/* =====================================================
   SANTE BEAUTY
   COMPLETE CLEAN CSS
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap');


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: "DM Sans", sans-serif;
    color: #25211e;
    background: #ffffff;
}

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


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

.top-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eee8e1;

    position: sticky;
    top: 0;
    left: 0;

    z-index: 9999;
}
.header-inner {
    width: calc(100% - 40px);
    height: 78px;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* LOGO */

.logo {
    width: 165px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #211d1a;

    line-height: 1;
}

.logo span {
    font-family: "Playfair Display", serif;

    font-size: 34px;
    font-weight: 500;

    letter-spacing: 7px;
}

.logo small {
    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    letter-spacing: 7px;

    margin-top: 8px;
}


/* MENU */

.main-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 30px;

    font-size: 12px;
}

.main-nav a {
    color: #27221f;

    padding: 8px 0;

    position: relative;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 1px;

    width: 0;
    height: 1px;

    background: #9b704e;

    transition: width 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}


/* HEADER BOOKING */

.header-booking {
    margin-left: 35px;

    padding: 12px 24px;

    border-radius: 40px;

    background: #986b47;

    color: #ffffff;

    font-size: 12px;

    transition: 0.25s;
}

.header-booking:hover {
    background: #795236;
}


/* LANGUAGE */

.language {
    position: relative;
    margin-left: 25px;
}

.language-current {
    height: 38px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    border: 0;
    background: transparent;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;

    color: #27221f;

    cursor: pointer;
}

.language-arrow {
    font-size: 12px;
    margin-left: 2px;
}


/* MENU XỔ XUỐNG */

.language-dropdown {
    position: absolute;

    top: 44px;
    right: 0;

    width: 160px;

    padding: 6px;

    display: none;

    background: #ffffff;

    border: 1px solid #ebe4de;
    border-radius: 8px;

    box-shadow:
        0 10px 30px rgba(40, 30, 20, 0.12);

    z-index: 1000;
}

.language-dropdown.show {
    display: block;
}

.language-dropdown button {
    width: 100%;
    height: 40px;

    padding: 0 10px;

    display: flex;
    align-items: center;

    border: 0;
    border-radius: 6px;

    background: transparent;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;

    color: #29231f;

    text-align: left;

    cursor: pointer;
}

.language-dropdown button:hover {
    background: #f8f4ee;
}

/* MOBILE MENU */

.mobile-menu-btn {
    display: none;

    border: none;
    background: transparent;

    cursor: pointer;
}

.mobile-menu {
    display: none;
}
.mobile-socials {
    margin-top: 24px;

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

    gap: 26px;
}

.mobile-socials a {
    width: 28px;
    height: 28px;

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

    text-decoration: none;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.mobile-socials img {
    width: 22px;
    height: 22px;

    object-fit: contain;
    display: block;
}

.mobile-socials a:active {
    transform: scale(.90);
    opacity: .65;
}
/* =====================================================
   HERO DESKTOP
===================================================== */

.hero {
    position: relative;

    width: 100%;
    height: 520px;

    background-color: #f8f4ee;

    background-image: url("image/hero.jpg");

    background-size: cover;
    background-position: center 56%;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* HERO GRADIENT */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(249,246,241,0.97) 0%,
        rgba(249,246,241,0.90) 24%,
        rgba(249,246,241,0.50) 43%,
        rgba(249,246,241,0.10) 62%,
        rgba(249,246,241,0.00) 72%
    );
}


/* =====================================================
   HERO CONTENT DESKTOP
===================================================== */

.hero-content {
    position: relative;
    z-index: 2;

    width: 58%;
    height: 520px;

    margin: 0;

    padding:
        0
        20px
        72px
        4%;

    display: flex;
    flex-direction: column;

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

    text-align: left;
}


/* WILLKOMMEN */

.hero-small {
    margin: 0 0 11px;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #9a7051;
}


/* SANTE BEAUTY */

.hero h1 {
    margin: 0 0 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 3.5vw, 64px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.5px;

    color: #2d211c;

    white-space: nowrap;
}


/* SUBTITLE */

.hero-subtitle {
    margin: 0;

    font-size: 9px;

    letter-spacing: 5px;

    color: #5f5650;

    white-space: nowrap;
}


/* HANDWRITING */

.hero-script {
    margin: 14px 0 0;

    font-family: "Allura", cursive;

    font-size: clamp(30px, 2.4vw, 40px);

    font-weight: 400;

    line-height: 0.78;

    color: #a37656;

    max-width: 330px;

    transform: rotate(-3deg);

    text-align: center;
}
/* =====================================================
   HERO BOTTOM DESKTOP
===================================================== */

.hero-bottom {
    position: relative;

    z-index: 5;

    width: 100%;

    margin: -72px 0 0;

    padding: 14px 0 18px;

    background: #f8f4ee;

    border-radius:
        50% 50% 0 0 /
        38px 38px 0 0;
}

.hero-bottom-inner {
    width: calc(100% - 40px);

    margin: 0 auto;
}


/* =====================================================
   TERMIN BUCHEN DESKTOP
===================================================== */

.hero-button {
    min-width: 210px;
    height: 46px;

    padding: 0 22px;

    display: inline-flex;

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

    gap: 25px;

    background: #986b47;

    color: #ffffff;

    border-radius: 40px;

    margin-bottom: 24px;

    transition: 0.25s;
}

.hero-button:hover {
    background: #795236;

    transform: translateY(-2px);
}

.booking-text {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;
}

.booking-text span {
    font-size: 14px;
    font-weight: 600;
}

.booking-calendar {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.booking-arrow {
    font-size: 19px;
    font-weight: 400;

    line-height: 1;
}


/* =====================================================
   BENEFITS DESKTOP
===================================================== */

.benefit-grid {
    width: 700px;

    max-width: 100%;

    display: grid;

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

    gap: 20px;

    margin: 0;
}

.benefit-item {
    text-align: center;

    color: #504943;

    font-size: 9px;
}

.benefit-item p {
    margin: 4px 0 0;

    line-height: 1.25;
}

.benefit-icon {
    width: 25px;
    height: 25px;

    margin: 0 auto 7px;

    color: #9a704e;
}

.benefit-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   HOME SERVICES - DESKTOP
===================================================== */

.home-services {
    width: 100%;

    background: #ffffff;

    padding: 34px 0 42px;
}

.home-services-inner {
    width: calc(100% - 40px);

    margin: 0 auto;
}


/* HEADING */

.home-services-heading {
    text-align: center;

    margin-bottom: 22px;
}

.home-services-heading span {
    display: block;

    margin: 0 0 6px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.7px;

    color: #8c7768;
}

.home-services-heading h2 {
    margin: 0 auto;

    font-family: "Playfair Display", serif;

    font-size: 28px;
    font-weight: 400;

    line-height: 1.15;

    color: #2c241f;
}


/* 4 CARDS */

.home-services-grid {
    width: 100%;

    display: grid;

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

    gap: 14px;
}


/* CARD */

.home-service-card {
    display: block;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eee7df;

    border-radius: 4px;

    box-shadow:
        0 3px 12px rgba(65,47,34,0.06);

    color: inherit;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-service-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 9px 22px rgba(65,47,34,0.10);
}


/* IMAGE */

.home-service-image {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f5f1ed;
}

.home-service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.home-service-card:hover .home-service-image img {
    transform: scale(1.025);
}


/* TEXT */

.home-service-info {
    padding: 11px 12px 12px;
}

.home-service-info h3 {
    margin: 0 0 4px;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.2;

    color: #2c2723;
}

.home-service-info p {
    margin: 0 0 10px;

    font-size: 9px;

    line-height: 1.35;

    color: #77706a;
}


/* MEHR ERFAHREN */

.home-service-more {
    height: 27px;

    padding: 0 10px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    border: 1px solid #b88a67;

    border-radius: 30px;

    font-size: 8px;
    font-weight: 500;

    color: #936846;
}

.home-service-more b {
    font-size: 12px;
    font-weight: 400;

    line-height: 1;
}



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

@media (max-width: 700px) {

    html,
    body {
        margin: 0;
        padding: 0;

        width: 100%;

        overflow-x: hidden;
    }


    /* =================================================
       HEADER MOBILE
    ================================================= */
.main-nav,
.header-booking {
    display: none;
}

.mobile-menu-btn {
    display: block;
}

.language {
    display: block;
}
    .top-header {
        width: 100%;
    }

    .header-inner {
        width: 100%;
        height: 62px;

        padding: 0 16px;

        margin: 0;
    }

    .logo {
        width: auto;
    }

    .logo span {
        font-size: 19px;

        letter-spacing: 4px;
    }

    .logo small {
        font-size: 5px;

        letter-spacing: 4px;

        margin-top: 5px;
    }

    .mobile-menu-btn {
        display: block;

        margin-left: auto;

        font-size: 23px;
    }
.hero-script {
    font-size: 21px;
    line-height: .72;
    max-width: 190px;
    text-align: left;
    transform: rotate(-3deg);
}

.hero-script span {
    display: block;
}

.hero-script span:nth-child(2) {
    margin-left: 55px;
}

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

    .hero {
    position: relative;
    width: 100vw;
    height: 430px;
    margin: 0;

    background-image: url("image/hero.jpg") !important;
    background-size: cover !important;

    /* TEST: cố tình kéo cực mạnh để kiểm tra */
    background-position: left center !important;

    background-repeat: no-repeat;
    overflow: hidden;
}


    .hero-overlay {
        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                90deg,
                rgba(248,244,238,0.88) 0%,
                rgba(248,244,238,0.62) 28%,
                rgba(248,244,238,0.20) 50%,
                rgba(248,244,238,0) 68%
            ),
            linear-gradient(
                180deg,
                rgba(248,244,238,0) 0%,
                rgba(248,244,238,0) 55%,
                rgba(248,244,238,0.16) 72%,
                rgba(248,244,238,0.48) 100%
            );
    }


    .hero-content {
        position: relative;
        z-index: 2;

        width: 100%;
        height: 430px;

        margin: 0;

        padding: 0 18px 90px;

        display: flex;
        flex-direction: column;

        justify-content: flex-end;
        align-items: flex-start;

        text-align: left;
    }


    .hero-small {
        font-size: 7px;

        font-weight: 500;

        letter-spacing: 2px;

        margin: 0 0 5px;
    }

    .hero h1 {
        font-size: 27px;

        line-height: 1;

        letter-spacing: 0;

        margin: 0 0 7px;
    }

    .hero-subtitle {
        font-size: 5.5px;

        letter-spacing: 2px;

        margin: 0;

        white-space: normal;
    }

    .hero-script {
    font-size: 21px;

    line-height: .78;

    margin: 8px 0 0;

    max-width: 150px;

    text-align: center;

    transform: rotate(-3deg);
}


    /* =================================================
       HERO BOTTOM MOBILE
    ================================================= */

    .hero-bottom {
        position: relative;

        z-index: 5;

        width: 100vw;

        margin: -105px 0 0;

        padding:
            42px
            18px
            18px;

        background: #f8f4ee;

        border-radius: 0;

        clip-path: polygon(
            0% 7%,
            10% 7%,
            20% 8%,
            30% 10%,
            40% 13%,
            50% 17%,
            60% 22%,
            70% 28%,
            80% 35%,
            90% 43%,
            100% 52%,
            100% 100%,
            0% 100%
        );
    }

    .hero-bottom::before {
        display: none;
    }

    .hero-bottom-inner {
        width: 100%;

        margin: 0;
    }


    /* =================================================
       TERMIN BUCHEN MOBILE
    ================================================= */

    .hero-button {
        width: 190px;
        height: 42px;

        padding: 0 20px;

        margin: 0 0 18px;

        display: inline-flex;

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

        background: #986b47;

        color: #ffffff;

        border-radius: 24px;

        font-family: "DM Sans", sans-serif;

        font-size: 14px;
        font-weight: 600;

        line-height: 1;

        white-space: nowrap;

        text-decoration: none;
    }

    .booking-text {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        white-space: nowrap;
    }

    .booking-text span {
        font-size: 14px;

        font-weight: 600;
    }

    .booking-calendar {
        width: 17px;
        height: 17px;

        flex-shrink: 0;
    }

    .booking-arrow {
        font-size: 19px;

        font-weight: 400;

        line-height: 1;
    }


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

    .benefit-grid {
        width: 100%;

        display: grid;

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

        gap: 4px;

        margin: 0;
    }

    .benefit-item {
        text-align: center;

        font-size: 6px;

        color: #504943;
    }

    .benefit-item p {
        margin: 4px 0 0;

        line-height: 1.2;
    }

    .benefit-icon {
        width: 21px;
        height: 21px;

        margin: 0 auto 6px;

        color: #9a704e;
    }


    /* =================================================
       HOME SERVICES MOBILE
    ================================================= */

    .home-services {
        padding: 24px 0 32px;

        background: #ffffff;
    }

    .home-services-inner {
        width: calc(100% - 24px);

        margin: 0 auto;
    }


    .home-services-heading {
        margin-bottom: 14px;
    }

    .home-services-heading span {
        margin-bottom: 4px;

        font-size: 7px;

        letter-spacing: 0.8px;

        color: #81746b;
    }

    .home-services-heading h2 {
        max-width: 285px;

        font-size: 20px;

        line-height: 1.08;
    }


    .home-services-grid {
        display: grid;

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

        gap: 7px;
    }


    .home-service-card {
        border-radius: 4px;

        box-shadow:
            0 2px 8px rgba(54,39,29,0.06);
    }


    .home-service-image {
    width: 100%;
    aspect-ratio: 1 / 1;
}

    .home-service-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    .home-service-info {
        padding: 7px 7px 8px;
    }

    .home-service-info h3 {
        margin-bottom: 3px;

        font-size: 8px;

        line-height: 1.15;
    }

    .home-service-info p {
        margin-bottom: 6px;

        font-size: 6px;

        line-height: 1.25;
    }


    .home-service-more {
        height: 21px;

        min-height: 21px;

        padding: 0 7px;

        gap: 5px;

        font-size: 6px;
    }

    .home-service-more b {
        font-size: 9px;
    }
}
/* =====================================================
   MOBILE LANGUAGE
===================================================== */

@media (max-width: 700px) {
/* =================================================
   HEADER MOBILE
================================================= */

.top-header {
    width: 100%;
}

.header-inner {
    position: relative;

    width: 100%;
    height: 62px;

    padding: 0 16px;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ẨN MENU DESKTOP */

.main-nav,
.header-booking {
    display: none;
}


/* 3 GẠCH BÊN TRÁI */

.mobile-menu-btn {
    display: block;

    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font-size: 23px;

    cursor: pointer;
}


/* LOGO Ở GIỮA */

.logo {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: auto;

    margin: 0;
}

.logo span {
    font-size: 24px;
    letter-spacing: 5px;
}

.logo small {
    font-size: 6px;
    letter-spacing: 5px;
    margin-top: 6px;
}


/* NGÔN NGỮ BÊN PHẢI */

.language {
    display: block;

    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    margin: 0;
}

.language-current {
    height: 38px;

    padding: 0 3px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    border: 0;

    background: transparent;

    font-size: 13px;

    cursor: pointer;
}

#currentFlag {
    font-size: 16px;
}

#currentLang {
    font-size: 13px;
    font-weight: 500;
}

.language-arrow {
    font-size: 12px;

    margin-left: 0;
}


/* DROPDOWN NGÔN NGỮ */

.language-dropdown {
    top: 42px;
    right: 0;

    width: 155px;

    z-index: 9999;
}


/* =================================================
   LUXURY MOBILE MENU
================================================= */

.mobile-menu {
    display: flex;
    flex-direction: column;

    position: fixed;

    top: 62px;
    left: 0;

    width: 82%;
    max-width: 330px;
    height: calc(100vh - 62px);

    padding: 34px 26px;

    gap: 0;

    background: rgba(255, 253, 250, 0.98);

    box-shadow:
        18px 0 45px rgba(49, 38, 30, 0.10);

    transform: translateX(-105%);

    opacity: 0;

    visibility: hidden;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        opacity 0.3s ease,
        visibility 0.45s;

    z-index: 9998;
}


/* MENU MỞ */

.mobile-menu.show {
    transform: translateX(0);

    opacity: 1;

    visibility: visible;
}


/* LINK */

.mobile-menu a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 57px;

    padding: 0 4px;

    border-bottom: 1px solid rgba(152, 107, 71, 0.10);

    font-family: "Playfair Display", serif;

    font-size: 21px;
    font-weight: 400;

    color: #302721;

    opacity: 0;

    transform: translateX(-14px);

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


/* TỪNG MỤC HIỆN LẦN LƯỢT */

.mobile-menu.show a {
    animation: luxuryMenuItem 0.5s ease forwards;
}

.mobile-menu.show a:nth-child(1) {
    animation-delay: 0.08s;
}

.mobile-menu.show a:nth-child(2) {
    animation-delay: 0.12s;
}

.mobile-menu.show a:nth-child(3) {
    animation-delay: 0.16s;
}

.mobile-menu.show a:nth-child(4) {
    animation-delay: 0.20s;
}

.mobile-menu.show a:nth-child(5) {
    animation-delay: 0.24s;
}

.mobile-menu.show a:nth-child(6) {
    animation-delay: 0.28s;
}

.mobile-menu.show a:nth-child(7) {
    animation-delay: 0.32s;
}


@keyframes luxuryMenuItem {

    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* KHI CHẠM VÀO LINK */

.mobile-menu a:active {
    color: #986b47;

    padding-left: 8px;
}


/* ĐẶT LỊCH TRONG MENU */

.mobile-menu .mobile-booking {
    margin-top: 22px;

    min-height: 46px;

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

    border: 0;

    border-radius: 30px;

    background: #986b47;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 500;
}
.mobile-menu-btn {
    width: 27px;
    height: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    z-index: 9999;
}

.mobile-menu-btn span {
    display: block;

    width: 27px;
    height: 1.5px;

    background: #302721;

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}


/* ☰ → × */

.mobile-menu-btn.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
}
/* =====================================================
   IPAD / TABLET
   701px - 1100px
===================================================== */

@media (min-width: 701px) and (max-width: 1100px) {

    /* HEADER */

    .top-header {
        width: 100%;
    }

    .header-inner {
        width: calc(100% - 30px);
        height: 70px;
        margin: 0 auto;

        display: flex;
        align-items: center;
    }


    /* LOGO */

    .logo {
        flex-shrink: 0;
        margin-right: 20px;
    }

    .logo span {
        font-size: 21px;
    }

    .logo small {
        font-size: 7px;
        letter-spacing: 3px;
    }


    /* MENU */

    .main-nav {
        display: flex;
        align-items: center;
        gap: 16px;

        margin-left: auto;
    }

    .main-nav a {
        font-size: 11px;
        white-space: nowrap;
    }


    /* BOOKING */

    .header-booking {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        height: 36px;
        padding: 0 14px;

        margin-left: 16px;

        font-size: 10px;
        white-space: nowrap;
    }


    /* LANGUAGE */

    .language {
        display: block;
        position: relative;

        margin-left: 10px;
    }

    .language-current {
        height: 36px;
        padding: 0 5px;

        display: inline-flex;
        align-items: center;
        gap: 5px;

        font-size: 11px;
    }

    #currentFlag {
        font-size: 15px;
    }

    #currentLang {
        font-size: 11px;
    }

    .language-arrow {
        font-size: 11px;
    }


    /* ẨN NÚT 3 GẠCH TRÊN IPAD */

    .mobile-menu-btn {
        display: none;
    }

    .mobile-menu {
        display: none;
    }


    /* HERO */

    .hero {
        min-height: 500px;
    }

    .hero-content {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-small {
        font-size: 9px;
    }

    .hero-subtitle {
        font-size: 8px;
    }

    .hero-script {
        font-size: 36px;
    }


    /* SERVICES */

    .home-services-inner {
        width: calc(100% - 40px);
    }

    .home-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

   /* SERVICE IMAGE MOBILE - NHỎ GỌN */

.home-service-image {
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;

    aspect-ratio: unset !important;

    overflow: hidden;
}

.home-service-image img {
    width: 100% !important;
    height: 78px !important;

    aspect-ratio: unset !important;

    object-fit: cover !important;

    display: block;
}
}
/* =====================================================
   SANTE LUXURY REVEAL
===================================================== */

.luxury-reveal {
    opacity: 0 !important;

    transform:
        translateY(45px)
        scale(.97) !important;

    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1) !important;
}

.luxury-reveal.luxury-show {
    opacity: 1 !important;

    transform:
        translateY(0)
        scale(1) !important;
}


/* ẢNH SERVICE */

.home-service-image {
    overflow: hidden;
}

.home-service-image img {
    transition:
        transform .9s cubic-bezier(.22,1,.36,1);
}


/* HOVER DESKTOP */

@media (hover: hover) {

    .home-service-card:hover {
        transform: translateY(-7px);

        box-shadow:
            0 18px 42px rgba(65,45,30,.14);
    }

    .home-service-card:hover .home-service-image img {
        transform: scale(1.055);
    }
}
.hero-script span {
    display: block;
}

.hero-script span:nth-child(2) {
    margin-left: 55px;
}
/* =====================================================
   SANTE INTRO
===================================================== */

.sante-intro {
    width: 100%;

    padding:
        0
        20px
        42px;

    background: #ffffff;
}


.sante-intro-inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        52%
        48%;

    overflow: hidden;

    background: #f8f4ee;
}


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

.sante-intro-image {
    height: 320px;

    overflow: hidden;
}

.sante-intro-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1);
}


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

.sante-intro-content {
    padding: 38px 42px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;
}


/* KICKER */

.sante-intro-kicker {
    margin-bottom: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 2.5px;

    color: #9a7051;
}


/* TITLE */

.sante-intro-title {
    margin:
        0
        0
        14px;

    font-family: "Playfair Display", serif;

    font-size: 31px;
    font-weight: 400;

    line-height: 1.02;

    color: #2d211c;
}

.sante-intro-title span {
    display: block;
}


/* TEXT */

.sante-intro-content p {
    max-width: 430px;

    margin:
        0
        0
        20px;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    line-height: 1.65;

    color: #665c55;
}


/* BUTTON */

.sante-intro-button {
    min-width: 135px;
    height: 40px;

    padding: 0 18px;

    display: inline-flex;

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

    gap: 12px;

    border-radius: 30px;

    background: #986b47;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

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

.sante-intro-button b {
    font-size: 14px;
    font-weight: 400;
}

.sante-intro-button:hover {
    background: #795236;

    transform: translateY(-2px);
}


/* DESKTOP IMAGE HOVER */

@media (hover: hover) {

    .sante-intro-inner:hover
    .sante-intro-image img {
        transform: scale(1.025);
    }
}


/* =====================================================
   SANTE INTRO MOBILE
===================================================== */

@media (max-width: 700px) {

    .sante-intro {
        padding:
            0
            12px
            30px;
    }


    .sante-intro-inner {
        display: block;

        border-radius: 5px;

        background: #f8f4ee;
    }


    /* IMAGE MOBILE */

    .sante-intro-image {
        width: 100%;
        height: 205px;
    }

    .sante-intro-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* CONTENT MOBILE */

    .sante-intro-content {
        padding:
            24px
            20px
            27px;
    }


    .sante-intro-kicker {
        margin-bottom: 7px;

        font-size: 7px;

        letter-spacing: 2px;
    }


    .sante-intro-title {
        margin-bottom: 11px;

        font-size: 27px;

        line-height: 1.02;
    }


    .sante-intro-content p {
        margin-bottom: 17px;

        font-size: 10px;

        line-height: 1.55;
    }


    .sante-intro-button {
        min-width: 120px;

        height: 37px;

        padding: 0 15px;

        gap: 10px;

        font-size: 9px;
    }

}
/* =====================================================
   FIX SERVICE IMAGE MOBILE
===================================================== */

@media (max-width: 700px) {

    .home-service-image {
        width: 100% !important;
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;

        aspect-ratio: unset !important;

        overflow: hidden;
    }

    .home-service-image img {
        width: 100% !important;
        height: 78px !important;

        aspect-ratio: unset !important;

        object-fit: cover !important;
    }

}
/* =====================================================
   HOME PRICES
   DESKTOP + TABLET ONLY
===================================================== */

.home-prices {
    width: 100%;

    padding: 34px 20px 38px;

    background: #ffffff;
}


.home-prices-inner {
    width: 100%;

    margin: 0 auto;
}


/* HEADING */

.home-prices-heading {
    margin-bottom: 20px;

    text-align: center;
}


.home-prices-heading span {
    display: block;

    margin-bottom: 5px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 2px;

    color: #9a7051;
}


.home-prices-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 28px;
    font-weight: 400;

    line-height: 1.1;

    color: #2d211c;
}


/* =====================================================
   8 PRICE ITEMS
===================================================== */

.home-prices-grid {
    width: 100%;

    display: grid;

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

    gap: 8px;
}


.home-price-item {
    min-width: 0;

    text-align: center;

    background: #ffffff;
}


/* IMAGE */

.home-price-item img {
    display: block;

    width: 100%;
    height: 82px;

    margin-bottom: 9px;

    object-fit: cover;

    border-radius: 3px;
}


/* NAME */

.home-price-item h3 {
    margin: 0 3px 3px;

    min-height: 28px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.25;

    color: #302721;
}


/* DESCRIPTION */

.home-price-item p {
    margin: 0 3px 7px;

    min-height: 22px;

    font-size: 7px;

    line-height: 1.3;

    color: #81766e;
}


/* PRICE */

.home-price-item strong {
    display: block;

    font-family: "Playfair Display", serif;

    font-size: 18px;
    font-weight: 500;

    color: #986b47;
}


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

.home-prices-button-wrap {
    margin-top: 22px;

    display: flex;

    justify-content: center;
}


.home-prices-button {
    height: 39px;

    padding: 0 20px;

    display: inline-flex;

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

    gap: 13px;

    border-radius: 30px;

    background: #986b47;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    transition:
        background .25s ease,
        transform .25s ease;
}


.home-prices-button b {
    font-size: 14px;

    font-weight: 400;
}


.home-prices-button:hover {
    background: #795236;

    transform: translateY(-2px);
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .home-prices {
        padding:
            30px
            15px
            34px;
    }


    .home-prices-grid {
        gap: 6px;
    }


    .home-price-item img {
        height: 68px;
    }


    .home-price-item h3 {
        font-size: 8px;
    }


    .home-price-item p {
        font-size: 6px;
    }


    .home-price-item strong {
        font-size: 16px;
    }

}


/* =====================================================
   FIX HEADER MOBILE ALWAYS VISIBLE
===================================================== */

@media (max-width: 700px) {

    .top-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;

        z-index: 99999 !important;

        background: #ffffff !important;
    }

    body {
        padding-top: 62px !important;
    }

}
/* =====================================================
   MOBILE BOTTOM NAVIGATION
===================================================== */

/* =====================================================
   SANTE — LUXURY MOBILE BOTTOM NAV
===================================================== */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 700px) {

    .mobile-bottom-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 10px;

        height: 68px;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;

        padding: 6px 8px;

        background: rgba(255, 253, 250, 0.96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        border: 1px solid rgba(118, 84, 61, 0.13);
        border-radius: 22px;

        box-shadow:
            0 12px 35px rgba(64, 42, 28, 0.13),
            0 2px 8px rgba(64, 42, 28, 0.06);

        z-index: 9999;
    }


    /* LINKS */

    .mobile-bottom-nav > a {
        position: relative;

        min-width: 0;
        height: 56px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        color: #76675e;
        text-decoration: none;

        font-family: "DM Sans", sans-serif;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .02em;

        transition:
            color .25s ease,
            transform .25s ease;
    }


    /* ICON */

    .mobile-bottom-nav .bottom-icon {
        height: 23px;

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

        font-family: "Playfair Display", serif;
        font-size: 20px;
        line-height: 1;

        color: #6f5848;
    }


    /* ACTIVE */

    .mobile-bottom-nav > a.active {
        color: #684a36;
        font-weight: 600;
    }

    .mobile-bottom-nav > a.active::after {
        content: "";

        position: absolute;
        bottom: 1px;
        left: 50%;

        width: 16px;
        height: 2px;

        transform: translateX(-50%);

        background: #8b654b;
        border-radius: 20px;
    }


    /* =================================================
       CENTER BOOK BUTTON
    ================================================= */

    .mobile-bottom-nav > a.bottom-book {
        transform: translateY(-12px);
        gap: 4px;

        color: #5c4435;
        font-weight: 600;
    }

    .mobile-bottom-nav .bottom-book-circle {
        width: 46px;
        height: 46px;

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

        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #9b7559,
                #674936
            );

        color: #fff;

        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        font-weight: 300;
        line-height: 1;

        border: 4px solid #fffdfa;

        box-shadow:
            0 7px 18px rgba(82, 55, 37, .24);

        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }

    .mobile-bottom-nav > a.bottom-book:active
    .bottom-book-circle {
        transform: scale(.94);
    }


    /* tránh nội dung bị nav che */

    body {
        padding-bottom: 94px;
    }
}
/* =====================================================
   HOME PRICES MOBILE - HORIZONTAL SCROLL
===================================================== */

@media (max-width: 700px) {

    .home-prices {
        display: block !important;

        width: 100%;

        padding: 28px 0 32px;

        background: #fbf8f4;

        overflow: hidden;
    }


    .home-prices-inner {
        width: 100%;

        margin: 0;
    }


    /* HEADING */

    .home-prices-heading {
        padding: 0 18px;

        margin-bottom: 16px;

        text-align: left;
    }

    .home-prices-heading span {
        font-size: 7px;

        letter-spacing: 2px;
    }

    .home-prices-heading h2 {
        font-size: 29px;
    }


    /* 8 CARDS - SWIPE */

    .home-prices-grid {
        width: 100%;

        padding:
            3px
            18px
            14px;

        display: flex;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .home-prices-grid::-webkit-scrollbar {
        display: none;
    }


    /* CARD */

    .home-price-item {
        flex: 0 0 145px;

        padding-bottom: 12px;

        overflow: hidden;

        scroll-snap-align: start;

        border-radius: 10px;

        background: #ffffff;

        border: 1px solid rgba(152,107,71,.10);

        box-shadow:
            0 5px 16px rgba(61,43,31,.07);

        transition:
            transform .3s cubic-bezier(.22,1,.36,1),
            box-shadow .3s ease;
    }


    .home-price-item:active {
        transform:
            translateY(-4px)
            scale(1.035);

        box-shadow:
            0 12px 25px rgba(61,43,31,.14);
    }


    /* IMAGE */

    .home-price-item img {
        width: 100%;

        height: 105px;

        margin-bottom: 10px;

        object-fit: cover;

        border-radius:
            10px
            10px
            0
            0;
    }


    /* TEXT */

    .home-price-item h3 {
        min-height: 28px;

        margin:
            0
            10px
            4px;

        font-size: 10px;

        line-height: 1.25;
    }

    .home-price-item p {
        min-height: 19px;

        margin:
            0
            10px
            7px;

        font-size: 7px;
    }

    .home-price-item strong {
        margin: 0 10px;

        font-size: 17px;
    }


    /* BUTTON */

    .home-prices-button-wrap {
        margin-top: 7px;
    }

    .home-prices-button {
        height: 39px;

        padding: 0 19px;

        font-size: 9px;
    }

}
/* =====================================================
   PRICE CARD - LUXURY HOVER
===================================================== */

@media (hover: hover) {

    .home-price-item {
        transition:
            transform .35s cubic-bezier(.22, 1, .36, 1),
            box-shadow .35s ease;
    }

    .home-price-item img {
        transition:
            transform .6s cubic-bezier(.22, 1, .36, 1);
    }

    .home-price-item:hover {
        transform:
            translateY(-5px)
            scale(1.025);

        box-shadow:
            0 14px 30px rgba(65, 45, 30, .13);

        z-index: 2;
    }

    .home-price-item:hover img {
        transform: scale(1.06);
    }

}
/* =====================================================
   HOME PRICES HEADING
===================================================== */

.home-prices-heading {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 30px;
}


/* LEFT */

.home-prices-heading-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-prices-kicker {
    display: block;

    margin-bottom: 7px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 3px;

    color: #a17454;
}

.home-prices-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 42px;
    font-weight: 400;

    line-height: 1;

    color: #302721;
}


/* RIGHT HANDWRITING */

.home-prices-script {
    width: 190px;

    display: flex;
    flex-direction: column;

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

    margin-right: 25px;

    font-family: "Allura", cursive;

    color: #947158;

    line-height: .68;

    transform: rotate(-4deg);
}

.home-prices-script span {
    display: block;

    font-family: "Allura", cursive;

    font-size: 25px;
    font-weight: 400;

    white-space: nowrap;
}

.home-prices-script strong {
    display: block;

    margin: 7px 0 9px;

    font-family: "Allura", cursive;

    font-size: 36px;
    font-weight: 400;

    line-height: .65;

    color: #947158;

    white-space: nowrap;
}
@media (max-width: 700px) {

    .home-prices-heading {
        padding: 0 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 16px;
    }

    .home-prices-heading-left {
        flex: 1;
    }

    .home-prices-heading h2 {
        font-size: 29px;
    }

    .home-prices-kicker {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .home-prices-script {
        width: 105px;

        margin-right: 4px;

        line-height: .62;

        transform: rotate(-4deg);
    }

    .home-prices-script span {
        font-size: 15px;
    }

    .home-prices-script strong {
        margin: 5px 0 6px;

        font-size: 22px;
    }

}
/* =====================================================
   HOME PRICES SLIDER DOTS
===================================================== */

.home-prices-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 18px;
}

.home-prices-dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 1px solid #b89a83;
    border-radius: 50%;

    background: transparent;

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

.home-prices-dots button.active {
    background: #986b47;
    border-color: #986b47;

    transform: scale(1.15);
}
/* =====================================================
   WHY SANTE BEAUTY
===================================================== */

.why-sante {
    width: 100%;
    padding: 72px 24px 78px;
    background: #fbf8f4;
}

.why-sante-inner {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}


/* HEADING */

.why-sante-heading {
    margin-bottom: 42px;
    text-align: center;
}

.why-sante-heading > span {
    display: block;
    margin-bottom: 12px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 4px;
    color: #a17454;
}

.why-sante-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 46px;
    font-weight: 400;

    line-height: 1.15;
    color: #302721;
}


/* GRID */

.why-sante-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}


/* ITEM */

.why-sante-item {
    position: relative;
    padding: 0 30px;
    text-align: center;
}

.why-sante-item:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 16px;
    right: 0;

    width: 1px;
    height: 230px;

    background: rgba(152, 107, 71, .14);
}


/* ICON */

.why-sante-icon {
    width: 92px;
    height: 92px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background: #f3ece4;
}

.why-sante-icon svg {
    width: 43px;
    height: 43px;

    fill: none;

    stroke: #986b47;
    stroke-width: 1.3;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TITLE */

.why-sante-item h3 {
    margin: 0 0 13px;

    font-family: "Playfair Display", serif;

    font-size: 22px;
    font-weight: 400;

    color: #302721;
}


/* TEXT */

.why-sante-item p {
    max-width: 235px;

    margin: 0 auto;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.65;

    color: #756c65;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .why-sante {
        padding: 58px 28px 64px;
    }

    .why-sante-heading h2 {
        font-size: 39px;
    }

    .why-sante-item {
        padding: 0 18px;
    }

    .why-sante-item h3 {
        font-size: 18px;
    }

    .why-sante-item p {
        font-size: 12px;
    }

}


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

@media (max-width: 700px) {

    .why-sante {
        padding: 44px 18px 48px;
    }

    .why-sante-heading {
        margin-bottom: 30px;
    }

    .why-sante-heading > span {
        margin-bottom: 9px;

        font-size: 8px;
        letter-spacing: 2.6px;
    }

    .why-sante-heading h2 {
        max-width: 320px;

        margin: 0 auto;

        font-size: 31px;
        line-height: 1.12;
    }


    /* 2 x 2 */

    .why-sante-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 12px;
    }

    .why-sante-item {
        padding: 0 8px;
    }

    .why-sante-item::after {
        display: none;
    }


    /* ICON */

    .why-sante-icon {
        width: 66px;
        height: 66px;

        margin-bottom: 14px;
    }

    .why-sante-icon svg {
        width: 31px;
        height: 31px;
    }


    /* TEXT */

    .why-sante-item h3 {
        margin-bottom: 8px;

        font-size: 15px;
        line-height: 1.2;
    }

    .why-sante-item p {
        font-size: 10px;
        line-height: 1.55;
    }

}
/* =====================================================
   HOME RESULTS
===================================================== */

.home-results {
    width: 100%;
    padding: 76px 24px 82px;

    background: #ffffff;
}

.home-results-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;
}


/* HEADING */

.home-results-heading {
    margin-bottom: 35px;

    text-align: center;
}

.home-results-heading > span {
    display: block;

    margin-bottom: 10px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #a17454;
}

.home-results-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 45px;
    font-weight: 400;

    line-height: 1.15;

    color: #302721;
}

.home-results-heading p {
    max-width: 570px;

    margin: 14px auto 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    line-height: 1.6;

    color: #81766e;
}


/* GALLERY */

.home-results-gallery {
    display: grid;

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

    gap: 12px;
}

.home-result-card {
    position: relative;

    height: 310px;

    overflow: hidden;

    border-radius: 16px;

    background: #f3ede7;
}

.home-result-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .65s cubic-bezier(.22,1,.36,1);
}


/* DESKTOP HOVER */

@media (hover:hover) {

    .home-result-card:hover img {
        transform: scale(1.06);
    }

}


/* BUTTON */

.home-results-button-wrap {
    margin-top: 31px;

    display: flex;

    justify-content: center;
}

.home-results-button {
    min-height: 44px;

    padding: 0 23px;

    display: inline-flex;

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

    gap: 17px;

    border-radius: 30px;

    background: #986b47;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    color: #ffffff;

    box-shadow: 0 7px 20px rgba(152,107,71,.18);
}

.home-results-button b {
    font-size: 15px;
    font-weight: 400;
}


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

@media (max-width:700px) {

    .home-results {
        padding: 47px 0 52px;
    }

    .home-results-heading {
        padding: 0 20px;

        margin-bottom: 25px;
    }

    .home-results-heading > span {
        font-size: 8px;

        letter-spacing: 2.7px;
    }

    .home-results-heading h2 {
        max-width: 330px;

        margin: 0 auto;

        font-size: 30px;

        line-height: 1.12;
    }

    .home-results-heading p {
        max-width: 315px;

        margin-top: 11px;

        font-size: 10px;
    }


    /* SWIPE */

    .home-results-gallery {
        display: flex;

        gap: 10px;

        padding: 0 18px 10px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .home-results-gallery::-webkit-scrollbar {
        display: none;
    }

    .home-result-card {
        flex: 0 0 72%;

        height: 330px;

        scroll-snap-align: center;

        border-radius: 14px;
    }


    .home-results-button-wrap {
        margin-top: 18px;
    }

    .home-results-button {
        min-height: 40px;

        padding: 0 20px;

        font-size: 9px;
    }

}
/* =====================================================
   HOME BOOKING CTA
===================================================== */

.home-booking-cta {
    position: relative;

    width: 100%;
    min-height: 680px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #302721;
}

.home-booking-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 1;
}

.home-booking-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(35, 21, 13, .78) 0%,
            rgba(35, 21, 13, .55) 42%,
            rgba(35, 21, 13, .12) 75%
        );

    z-index: 2;
}

.home-booking-content {
    position: relative;

    width: 100%;
    max-width: 1220px;

    margin: 0 auto;
    padding: 80px 40px;

    z-index: 3;

    color: #fff;
}

.home-booking-kicker {
    display: block;

    margin-bottom: 25px;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    letter-spacing: 4px;
}

.home-booking-content h2 {
    max-width: 670px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 58px;
    font-weight: 400;

    line-height: 1.05;

    color: #fff;
}

.home-booking-script {
    margin: 16px 0 18px;

    font-family: "Allura", cursive;

    font-size: 48px;

    color: #ead1bb;

    transform: rotate(-2deg);
}

.home-booking-content > p {
    max-width: 430px;

    margin: 0 0 27px;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.6;
}

.home-booking-button {
    min-width: 220px;
    height: 52px;

    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: 1px solid rgba(255,255,255,.65);
    border-radius: 40px;

    background: #a97650;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #fff;

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

.home-booking-button:hover {
    transform: translateY(-3px);

    background: #936443;
}


/* BENEFITS */

.home-booking-benefits {
    max-width: 650px;

    margin-top: 55px;

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

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

    padding-top: 24px;
}

.home-booking-benefits > div {
    display: flex;
    align-items: center;

    gap: 11px;

    padding-right: 20px;
}

.home-booking-benefits > div:not(:first-child) {
    padding-left: 20px;

    border-left: 1px solid rgba(255,255,255,.22);
}

.home-booking-benefits span {
    font-size: 30px;
}

.home-booking-benefits p {
    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    line-height: 1.4;
}


/* =====================================================
   SANTE FOOTER NEW
===================================================== */

.sante-footer {
    width: 100%;
    padding: 55px 5% 25px;

    background: #f7f0e8;
    color: #44372f;
}


/* DESKTOP: 1 HÀNG */

.sante-footer-main {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        .8fr
        1.25fr
        1.15fr
        1.35fr
        1.1fr;

    align-items: center;

    gap: 32px;
}


/* HEADINGS */

.sante-footer h4 {
    margin: 0 0 23px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #44372f;
}


/* LOGO */

.footer-brand {
    text-align: center;

    padding-right: 28px;

    border-right: 1px solid #ddcfc4;
}

.footer-brand > img {
    display: block;

    width: 190px;
    max-width: 100%;

    margin: 0 auto;

    object-fit: contain;
}

.footer-brand-script {
    margin-top: 12px;

    font-family: "Allura", cursive;

    font-size: 30px;

    color: #a17454;

    transform: rotate(-3deg);
}


/* SOCIAL */

.footer-follow {
    padding-right: 25px;

    border-right: 1px solid #ddcfc4;
}

.footer-social-list {
    display: grid;

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

    gap: 13px;
}

.footer-social-list a {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
}

.footer-social-list img {
    width: 34px;
    height: 34px;

    display: block;

    object-fit: contain;

    transition: transform .3s ease;
}

.footer-social-list a:hover img {
    transform: translateY(-3px) scale(1.08);
}


/* CONTACT */

.footer-contact {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.footer-contact a {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    line-height: 1.55;
}

.footer-contact-icon {
    width: 20px;

    flex-shrink: 0;

    font-size: 18px;

    color: #a17454;
}


/* MAP */

.footer-map {
    width: 100%;
    height: 180px;

    overflow: hidden;

    border-radius: 9px;

    box-shadow:
        0 5px 18px rgba(61,43,31,.09);
}

.footer-map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* HOURS */

.footer-hours {
    padding-left: 30px;

    border-left: 1px solid #ddcfc4;
}

.footer-hour-row {
    display: flex;

    justify-content: space-between;

    gap: 18px;

    margin: 7px 0;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
}

.footer-hour-row b {
    font-weight: 400;

    white-space: nowrap;
}


/* BOOKING */

.footer-booking {
    width: 100%;
    height: 42px;

    margin-top: 20px;

    padding: 0 20px;

    display: flex;

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

    border-radius: 30px;

    background: #a6744d;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

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

.footer-booking:hover {
    background: #8f603f;

    transform: translateY(-2px);
}

.footer-booking b {
    font-size: 16px;
    font-weight: 400;
}


/* LEGAL */

.footer-legal {
    width: 100%;
    max-width: 1500px;

    margin: 42px auto 0;

    padding-top: 22px;

    display: flex;

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

    border-top: 1px solid #ddcfc4;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
}

.footer-legal > div {
    display: flex;

    gap: 25px;
}


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

@media (max-width: 700px) {

    .sante-footer {
        padding: 42px 20px 105px;
    }

    .sante-footer-main {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    /* LOGO */

    .footer-brand {
        width: 100%;

        padding: 0 0 28px;

        border: 0;
    }

    .footer-brand > img {
        width: 190px;
    }

    .footer-brand-script {
        margin-top: 7px;

        font-size: 29px;
    }


    /* FOLLOW */

    .footer-follow {
        width: 100%;

        padding: 27px 0;

        border-right: 0;
        border-top: 1px solid #ddcfc4;
        border-bottom: 1px solid #ddcfc4;

        text-align: center;
    }

    .sante-footer h4 {
        margin-bottom: 22px;

        text-align: center;

        font-size: 9px;
        letter-spacing: 3px;
    }

    .footer-social-list {
        width: 100%;

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

        gap: 5px;
    }

    .footer-social-list img {
        width: 35px;
        height: 35px;
    }

    .footer-social-list a {
        gap: 7px;

        font-size: 8px;
    }


    /* CONTACT */

    .footer-contact {
        width: 100%;

        padding: 29px 12px;
    }

    .footer-contact h4 {
        margin-bottom: 5px;
    }

    .footer-contact a {
        font-size: 11px;

        gap: 14px;
    }


    /* MAP */

    .footer-map {
        width: 100%;
        height: 205px;

        margin-bottom: 30px;

        border-radius: 10px;
    }


    /* HOURS */

    .footer-hours {
        width: 100%;

        padding: 28px 12px 0;

        border-left: 0;
        border-top: 1px solid #ddcfc4;
    }

    .footer-hour-row {
        margin: 8px 0;

        font-size: 10px;
    }


    /* BUTTON */

    .footer-booking {
        height: 46px;

        margin-top: 25px;

        padding: 0 25px;

        font-size: 11px;
    }


    /* LEGAL */

    .footer-legal {
        margin-top: 32px;

        padding-top: 23px;

        flex-direction: column;

        gap: 14px;

        text-align: center;

        font-size: 8px;
    }

    .footer-legal > div {
        gap: 18px;
    }

}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width:700px) {

    .sante-footer-logo-img {
        width: 190px;
    }

}
@media (max-width:700px) {

    .home-booking-cta {
        min-height: 660px;

        align-items: flex-end;
    }

    .home-booking-bg {
        object-position: center;
    }

    .home-booking-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(37,22,13,.88) 0%,
                rgba(37,22,13,.60) 52%,
                rgba(37,22,13,.08) 100%
            );
    }

    .home-booking-content {
        padding: 45px 25px 35px;
    }

    .home-booking-kicker {
        margin-bottom: 14px;

        font-size: 8px;

        letter-spacing: 2.7px;
    }

    .home-booking-content h2 {
        max-width: 350px;

        font-size: 39px;

        line-height: 1.03;
    }

    .home-booking-script {
        margin: 10px 0 12px;

        font-size: 35px;
    }

    .home-booking-content > p {
        max-width: 310px;

        margin-bottom: 20px;

        font-size: 11px;
    }

    .home-booking-button {
        min-width: 205px;

        height: 46px;

        padding: 0 23px;

        font-size: 9px;
    }

    .home-booking-benefits {
        margin-top: 30px;

        padding-top: 17px;
    }

    .home-booking-benefits > div {
        padding: 0 8px;

        flex-direction: column;

        text-align: center;

        gap: 4px;
    }

    .home-booking-benefits > div:not(:first-child) {
        padding-left: 8px;
    }

    .home-booking-benefits span {
        font-size: 22px;
    }

    .home-booking-benefits p {
        font-size: 8px;
    }}


  
/* =====================================================
   HEADER DESKTOP FINAL
===================================================== */

@media (min-width: 1101px) {

    .header-inner {
        position: relative;

        width: 100%;
        height: 78px;

        padding: 0 30px;
        margin: 0;

        display: flex;
        align-items: center;
    }


    /* LOGO CHÍNH GIỮA */

    .header-inner > .logo {
        position: absolute;

        left: 50%;
        top: 50%;

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

        width: 165px;

        margin: 0;

        z-index: 10;
    }


    /* NAV */

    .main-nav {
        width: auto;

        margin: 0;

        display: contents !important;
    }


    /* 4 MỤC BÊN TRÁI */

    .nav-left {
        position: absolute;

        left: 30px;
        top: 50%;

        transform: translateY(-50%);

        display: flex;
        align-items: center;

        gap: 42px;
    }


    /* GALERIE + KONTAKT */

    .nav-right {
        position: absolute;

        left: calc(50% + 120px);
        top: 50%;

        transform: translateY(-50%);

        display: flex;
        align-items: center;

        gap: 42px;

        padding: 0;
    }


    /* TERMIN BUCHEN */

    .header-booking {
        position: absolute;

        right: 105px;
        top: 50%;

        transform: translateY(-50%);

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        margin: 0;

        white-space: nowrap;
    }


    /* LANGUAGE */

    .language {
        position: absolute;

        right: 25px;
        top: 50%;

        transform: translateY(-50%);

        display: block;

        margin: 0;
    }


    /* HAMBURGER KHÔNG XUẤT HIỆN */

    .mobile-menu-btn,
    .mobile-menu {
        display: none !important;
    }

}
/* =====================================================
   DESKTOP HEADER - KÉO MENU SÁT LOGO
===================================================== */

@media (min-width: 1101px) {

    /* MENU TRÁI - SÁT LOGO HƠN */
    .nav-left {
        left: auto !important;
        right: calc(50% + 135px) !important;

        justify-content: flex-end !important;

        gap: 38px !important;
    }


    /* MENU PHẢI - SÁT LOGO HƠN */
    .nav-right {
        left: calc(50% + 135px) !important;

        padding-left: 0 !important;

        gap: 38px !important;
    }

}
.footer-map {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;

    border-radius: 14px;

    box-shadow: 0 6px 22px rgba(60,40,25,.10);
}

.footer-map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* GOOGLE RATING */

.footer-google-rating {
    position: absolute;

    left: 12px;
    bottom: 12px;

    min-width: 165px;

    padding: 11px 14px;

    border-radius: 9px;

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

    box-shadow: 0 4px 16px rgba(0,0,0,.16);

    font-family: "DM Sans", sans-serif;

    color: #302721;
}

.footer-google-rating > strong {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .5px;
}

.footer-rating-row {
    display: flex;

    align-items: center;

    gap: 7px;
}

.footer-rating-row b {
    font-size: 13px;
    font-weight: 600;
}

.footer-stars {
    font-size: 13px;

    letter-spacing: 1px;

    color: #f4b400;
}

.footer-google-rating small {
    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: #766b64;
}
.footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-designed {
    font-family: "DM Sans", sans-serif;
    font-size: 7px;
    letter-spacing: 1.3px;
    color: #9b8b7f;
}

.footer-designed strong {
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #a17454;
}


/* MOBILE */

@media (max-width: 700px) {

    .footer-copyright {
        align-items: center;
        text-align: center;
    }

}
 /* =====================================================
   FOOTER MOBILE - FINAL
===================================================== */

@media (max-width: 700px) {

    .sante-footer {
        height: auto !important;
        min-height: 0 !important;

        padding-top: 35px !important;
        padding-bottom: 18px !important;
    }


    .footer-legal {
        height: auto !important;
        min-height: 0 !important;

        margin: 25px auto 0 !important;

        padding-top: 20px !important;
        padding-bottom: 0 !important;

        gap: 12px !important;
    }


    .footer-copyright {
        margin: 0 !important;
        padding: 0 !important;

        align-items: center;
        text-align: center;
    }


    .footer-legal-links {
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }

}
/* =====================================================
   =====================================================
   SANTE BEAUTY
   LEISTUNGEN PAGE — LUXURY EDITORIAL
   =====================================================
   ===================================================== */


/* =====================================================
   PAGE
===================================================== */

.leistungen-page {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


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

.leistungen-hero {
    position: relative;

    width: 100%;
    height: calc(100vh - 78px);
    min-height: 680px;
    max-height: 900px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #2d241e;
}


/* IMAGE */

.leistungen-hero-image {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;
}

.leistungen-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 42%;

    transform: scale(1.015);

    animation:
        leistungenHeroZoom 8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


@keyframes leistungenHeroZoom {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }

}


/* OVERLAY */

.leistungen-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(35,24,18,.82) 0%,
            rgba(35,24,18,.65) 29%,
            rgba(35,24,18,.30) 55%,
            rgba(35,24,18,.06) 78%,
            rgba(35,24,18,.02) 100%
        ),
        linear-gradient(
            0deg,
            rgba(30,20,15,.18),
            rgba(30,20,15,.02) 45%
        );
}


/* CONTENT */

.leistungen-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 0 6%;
}


/* KICKER */

.leistungen-hero-kicker {
    display: block;

    margin-bottom: 22px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;

    color: #e0c4ad;

    animation:
        leistungenFadeUp
        .9s .15s both;
}


/* TITLE */

.leistungen-hero-content h1 {
    max-width: 720px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 5.6vw, 86px);
    font-weight: 400;

    line-height: .94;

    letter-spacing: -1.5px;

    color: #ffffff;

    animation:
        leistungenFadeUp
        1s .25s both;
}

.leistungen-hero-content h1 span,
.leistungen-hero-content h1 em {
    display: block;
}

.leistungen-hero-content h1 em {
    margin-top: 7px;

    font-weight: 400;
    font-style: italic;

    color: #ead5c3;
}


/* TEXT */

.leistungen-hero-content p {
    max-width: 455px;

    margin:
        29px
        0
        32px;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    font-weight: 300;

    line-height: 1.75;

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

    animation:
        leistungenFadeUp
        1s .38s both;
}


/* HERO BUTTON */

.leistungen-hero-button {
    min-width: 230px;
    height: 51px;

    padding: 0 23px;

    display: inline-flex;

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

    gap: 28px;

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

    border-radius: 40px;

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

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

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 1px;

    color: #ffffff;

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

    animation:
        leistungenFadeUp
        1s .5s both;
}

.leistungen-hero-button b {
    font-size: 17px;
    font-weight: 300;

    transition:
        transform .3s ease;
}


@media (hover:hover) {

    .leistungen-hero-button:hover {
        background: #a17454;

        border-color: #a17454;

        transform: translateY(-3px);
    }

    .leistungen-hero-button:hover b {
        transform: translateY(3px);
    }

}


/* HANDWRITING */

.leistungen-hero-script {
    position: absolute;

    right: 7%;
    bottom: 55px;

    z-index: 3;

    font-family: "Allura", cursive;

    font-size: 42px;

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

    transform: rotate(-5deg);
}


/* ANIMATION */

@keyframes leistungenFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}



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

.leistungen-intro {
    position: relative;

    width: 100%;

    padding:
        105px
        6%
        110px;

    background: #fbf8f4;
}


/* DECORATION */

.leistungen-intro::before {
    content: "";

    position: absolute;

    top: 0;
    left: 6%;

    width: 1px;
    height: 52px;

    background: #c7a98f;
}


.leistungen-intro-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.05fr
        .75fr;

    gap: 110px;

    align-items: center;
}


/* LEFT */

.leistungen-section-kicker {
    display: block;

    margin-bottom: 17px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #a17454;
}


.leistungen-intro-left h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(43px, 4.5vw, 65px);
    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -.7px;

    color: #302721;
}


.leistungen-intro-left h2 span,
.leistungen-intro-left h2 em {
    display: block;
}


.leistungen-intro-left h2 em {
    margin-top: 5px;

    font-weight: 400;
    font-style: italic;

    color: #9b704f;
}


/* RIGHT */

.leistungen-intro-right {
    position: relative;

    padding:
        9px
        0
        9px
        50px;

    border-left:
        1px solid
        #d8c8bb;
}


.leistungen-intro-right p {
    max-width: 440px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 300;

    line-height: 1.85;

    color: #746961;
}


.leistungen-intro-signature {
    display: block;

    margin-top: 28px;

    font-family: "Allura", cursive;

    font-size: 33px;

    color: #a17454;

    transform: rotate(-3deg);
}



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

.leistungen-service {
    width: 100%;

    padding:
        105px
        6%;

    background: #ffffff;
}


/* ALTERNATING BACKGROUND */

.leistungen-service-reverse {
    background: #f8f3ed;
}


.leistungen-service-inner {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap: 95px;

    align-items: center;
}



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

.leistungen-service-image {
    position: relative;

    width: 100%;
    height: 610px;

    overflow: hidden;

    background: #eee5dd;
}


.leistungen-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(30,20,15,0) 65%,
            rgba(30,20,15,.15) 100%
        );

    pointer-events: none;
}


.leistungen-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        1.1s
        cubic-bezier(.22,1,.36,1);
}


@media (hover:hover) {

    .leistungen-service-image:hover img {
        transform: scale(1.035);
    }

}


/* BIG NUMBER */

.leistungen-service-number {
    position: absolute;

    left: 24px;
    bottom: 18px;

    z-index: 2;

    font-family: "Playfair Display", serif;

    font-size: 75px;
    font-weight: 400;

    line-height: 1;

    color:
        rgba(255,255,255,.82);
}



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

.leistungen-service-content {
    max-width: 500px;
}


/* KICKER */

.leistungen-service-kicker {
    display: block;

    margin-bottom: 16px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #a17454;
}


/* TITLE */

.leistungen-service-content h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 4vw, 59px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -.8px;

    color: #302721;
}


/* SCRIPT */

.leistungen-service-script {
    display: block;

    margin:
        11px
        0
        24px;

    font-family: "Allura", cursive;

    font-size: 31px;

    color: #a17454;

    transform: rotate(-2deg);
}


/* DESCRIPTION */

.leistungen-service-content > p {
    max-width: 455px;

    margin:
        0
        0
        27px;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 300;

    line-height: 1.8;

    color: #746a63;
}



/* =====================================================
   SERVICE TAGS
===================================================== */

.leistungen-service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 31px;
}


.leistungen-service-tags span {
    min-height: 31px;

    padding: 0 13px;

    display: inline-flex;

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

    border:
        1px solid
        #dfd0c4;

    border-radius: 30px;

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

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 400;

    color: #685c54;
}



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

.leistungen-service-button {
    min-width: 165px;
    height: 43px;

    padding: 0 18px;

    display: inline-flex;

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

    gap: 25px;

    border-radius: 30px;

    background: #986b47;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    color: #ffffff;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.leistungen-service-button b {
    font-size: 15px;
    font-weight: 300;

    transition:
        transform .3s ease;
}


@media (hover:hover) {

    .leistungen-service-button:hover {
        background: #795236;

        transform:
            translateY(-3px);

        box-shadow:
            0 10px 25px
            rgba(95,61,39,.17);
    }

    .leistungen-service-button:hover b {
        transform:
            translateX(4px);
    }

}



/* =====================================================
   REVERSE SERVICE
===================================================== */

.leistungen-service-reverse
.leistungen-service-image {
    grid-column: 2;
    grid-row: 1;
}


.leistungen-service-reverse
.leistungen-service-content {
    grid-column: 1;
    grid-row: 1;

    justify-self: end;
}



/* =====================================================
   QUALITY / VALUES STRIP
===================================================== */

.leistungen-values {
    width: 100%;

    padding:
        31px
        5%;

    background: #302721;

    overflow: hidden;
}


.leistungen-values-inner {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: flex;

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

    gap: 25px;
}


.leistungen-values span {
    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;

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

    white-space: nowrap;
}


.leistungen-values i {
    font-style: normal;

    font-size: 10px;

    color: #c49a78;
}



/* =====================================================
   FINAL CTA
===================================================== */

.leistungen-final {
    position: relative;

    width: 100%;

    padding:
        125px
        25px
        130px;

    overflow: hidden;

    background: #f4ebe3;

    text-align: center;
}


/* HUGE BACKGROUND TEXT */

.leistungen-final::before {
    content: "SANTE";

    position: absolute;

    left: 50%;
    top: 50%;

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

    font-family: "Playfair Display", serif;

    font-size: clamp(150px, 24vw, 360px);
    font-weight: 400;

    letter-spacing: 15px;

    color:
        rgba(139,101,72,.045);

    white-space: nowrap;

    pointer-events: none;
}


.leistungen-final-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 800px;

    margin: 0 auto;
}


.leistungen-final-kicker {
    display: block;

    margin-bottom: 18px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;

    color: #9c704f;
}


.leistungen-final h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 68px);
    font-weight: 400;

    line-height: 1.02;

    color: #302721;
}


.leistungen-final h2 span,
.leistungen-final h2 em {
    display: block;
}


.leistungen-final h2 em {
    margin-top: 4px;

    font-weight: 400;
    font-style: italic;

    color: #986b47;
}


.leistungen-final p {
    max-width: 465px;

    margin:
        24px
        auto
        29px;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 300;

    line-height: 1.75;

    color: #746961;
}


.leistungen-final-button {
    min-width: 190px;
    height: 48px;

    padding: 0 22px;

    display: inline-flex;

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

    gap: 30px;

    border-radius: 40px;

    background: #986b47;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    color: #ffffff;

    box-shadow:
        0 8px 25px
        rgba(115,75,48,.16);

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


.leistungen-final-button b {
    font-size: 16px;
    font-weight: 300;
}


@media (hover:hover) {

    .leistungen-final-button:hover {
        transform:
            translateY(-3px);

        background: #795236;
    }

}


.leistungen-final-script {
    display: block;

    margin-top: 25px;

    font-family: "Allura", cursive;

    font-size: 29px;

    color: #a17454;

    transform: rotate(-3deg);
}



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

@media
(min-width: 701px)
and
(max-width: 1100px) {


    /* HERO */

    .leistungen-hero {
        height: 650px;
        min-height: 650px;
    }


    .leistungen-hero-content {
        padding: 0 6%;
    }


    .leistungen-hero-content h1 {
        max-width: 600px;

        font-size: 59px;
    }


    /* INTRO */

    .leistungen-intro {
        padding:
            80px
            5%;
    }


    .leistungen-intro-inner {
        gap: 60px;
    }


    .leistungen-intro-left h2 {
        font-size: 45px;
    }


    /* SERVICES */

    .leistungen-service {
        padding:
            75px
            5%;
    }


    .leistungen-service-inner {
        gap: 50px;
    }


    .leistungen-service-image {
        height: 480px;
    }


    .leistungen-service-content h2 {
        font-size: 41px;
    }


    .leistungen-service-number {
        font-size: 58px;
    }

}



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

@media (max-width: 700px) {


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

    .leistungen-hero {
        height: 610px;
        min-height: 0;

        align-items: flex-end;
    }


    .leistungen-hero-image img {
        object-position: 61% center;
    }


    .leistungen-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(32,21,15,.94) 0%,
                rgba(32,21,15,.72) 36%,
                rgba(32,21,15,.28) 65%,
                rgba(32,21,15,.03) 100%
            );
    }


    .leistungen-hero-content {
        padding:
            0
            21px
            61px;
    }


    .leistungen-hero-kicker {
        margin-bottom: 12px;

        font-size: 7px;

        letter-spacing: 3px;
    }


    .leistungen-hero-content h1 {
        max-width: 345px;

        font-size: 41px;

        line-height: .98;

        letter-spacing: -.5px;
    }


    .leistungen-hero-content h1 em {
        margin-top: 4px;
    }


    .leistungen-hero-content p {
        max-width: 315px;

        margin:
            17px
            0
            22px;

        font-size: 10px;

        line-height: 1.65;
    }


    .leistungen-hero-button {
        min-width: 190px;
        height: 43px;

        padding: 0 18px;

        font-size: 8px;
    }


    .leistungen-hero-script {
        display: none;
    }



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

    .leistungen-intro {
        padding:
            57px
            20px
            62px;
    }


    .leistungen-intro::before {
        left: 20px;

        height: 27px;
    }


    .leistungen-intro-inner {
        display: block;
    }


    .leistungen-section-kicker {
        margin-bottom: 11px;

        font-size: 7px;

        letter-spacing: 2.6px;
    }


    .leistungen-intro-left h2 {
        font-size: 35px;

        line-height: 1.04;
    }


    .leistungen-intro-right {
        margin-top: 27px;

        padding:
            22px
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            #d8c8bb;
    }


    .leistungen-intro-right p {
        font-size: 10px;

        line-height: 1.7;
    }


    .leistungen-intro-signature {
        margin-top: 18px;

        font-size: 27px;
    }



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

    .leistungen-service,
    .leistungen-service-reverse {
        padding:
            0
            0
            58px;

        background: #ffffff;
    }


    .leistungen-service-reverse {
        background: #f8f3ed;
    }


    .leistungen-service-inner {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    /* IMAGE */

    .leistungen-service-image,
    .leistungen-service-reverse
    .leistungen-service-image {
        order: 1;

        grid-column: auto;
        grid-row: auto;

        width: 100%;
        height: 410px;
    }


    .leistungen-service-image img {
        object-position: center;
    }


    .leistungen-service-number {
        left: 17px;
        bottom: 13px;

        font-size: 55px;
    }


    /* CONTENT */

    .leistungen-service-content,
    .leistungen-service-reverse
    .leistungen-service-content {
        order: 2;

        grid-column: auto;
        grid-row: auto;

        width: 100%;
        max-width: none;

        padding:
            33px
            20px
            0;

        justify-self: auto;
    }


    .leistungen-service-kicker {
        margin-bottom: 10px;

        font-size: 7px;

        letter-spacing: 2.6px;
    }


    .leistungen-service-content h2 {
        font-size: 35px;

        line-height: 1.03;
    }


    .leistungen-service-script {
        margin:
            7px
            0
            17px;

        font-size: 25px;
    }


    .leistungen-service-content > p {
        margin-bottom: 20px;

        font-size: 10px;

        line-height: 1.7;
    }


    /* TAGS */

    .leistungen-service-tags {
        gap: 6px;

        margin-bottom: 23px;
    }


    .leistungen-service-tags span {
        min-height: 27px;

        padding: 0 10px;

        font-size: 7px;
    }


    /* BUTTON */

    .leistungen-service-button {
        min-width: 150px;
        height: 39px;

        padding: 0 16px;

        font-size: 8px;
    }



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

    .leistungen-values {
        padding:
            25px
            0;

        overflow: hidden;
    }


    .leistungen-values-inner {
        width: max-content;

        padding: 0 22px;

        justify-content: flex-start;

        gap: 20px;

        animation:
            leistungenValuesMove
            18s
            linear
            infinite;
    }


    .leistungen-values span {
        font-size: 7px;

        letter-spacing: 1.7px;
    }


    @keyframes leistungenValuesMove {

        from {
            transform:
                translateX(0);
        }

        to {
            transform:
                translateX(-28%);
        }

    }



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

    .leistungen-final {
        padding:
            76px
            20px
            82px;
    }


    .leistungen-final::before {
        font-size: 130px;

        letter-spacing: 5px;
    }


    .leistungen-final-kicker {
        margin-bottom: 12px;

        font-size: 7px;

        letter-spacing: 2.5px;
    }


    .leistungen-final h2 {
        font-size: 38px;

        line-height: 1.02;
    }


    .leistungen-final p {
        max-width: 310px;

        margin:
            18px
            auto
            23px;

        font-size: 10px;

        line-height: 1.7;
    }


    .leistungen-final-button {
        min-width: 175px;
        height: 43px;

        font-size: 9px;
    }


    .leistungen-final-script {
        margin-top: 20px;

        font-size: 25px;
    }

}
/* =====================================================
   HOME HERO — LUXURY LIKE LEISTUNGEN
===================================================== */

.home-editorial-hero {
    position: relative;

    width: 100%;
    height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #30231d;
}


/* IMAGE */

.home-editorial-image {
    position: absolute;
    inset: 0;

    z-index: 1;
}

.home-editorial-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 55%;

    animation: homeEditorialZoom 8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

@keyframes homeEditorialZoom {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}


/* DARK LUXURY OVERLAY */

.home-editorial-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(39,24,16,.88) 0%,
            rgba(39,24,16,.72) 28%,
            rgba(39,24,16,.38) 52%,
            rgba(39,24,16,.10) 75%,
            rgba(39,24,16,.02) 100%
        );
}


/* CONTENT */

.home-editorial-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 0 6%;

    color: #ffffff;
}


/* WILLKOMMEN */

.home-editorial-kicker {
    display: block;

    margin-bottom: 20px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;

    color: #e2c7b1;

    animation:
        homeEditorialUp
        .9s .1s both;
}


/* SANTE BEAUTY */

.home-editorial-content h1 {
    max-width: 760px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;

    line-height: .92;

    letter-spacing: -2px;

    color: #ffffff;

    white-space: nowrap;

    animation:
        homeEditorialUp
        1s .2s both;
}


/* SUBTITLE */

.home-editorial-subtitle {
    display: block;

    margin-top: 25px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 400;

    letter-spacing: 5px;

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

    animation:
        homeEditorialUp
        1s .32s both;
}


/* HANDWRITING */

.home-editorial-script {
    width: max-content;

    margin:
        28px
        0
        0
        25px;

    font-family: "Allura", cursive;

    color: #ead0ba;

    line-height: .68;

    transform: rotate(-4deg);

    animation:
        homeEditorialUp
        1s .44s both;
}


.home-editorial-script span {
    display: block;

    font-family: "Allura", cursive;

    font-size: 42px;
    font-weight: 400;
}


.home-editorial-script span:nth-child(2) {
    margin:
        8px
        0
        0
        105px;
}


/* ANIMATION */

@keyframes homeEditorialUp {

    from {
        opacity: 0;

        transform: translateY(28px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}



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

@media (max-width: 700px) {

    .home-editorial-hero {
        height: 560px;

        align-items: flex-end;
    }


    /* IMAGE */

    .home-editorial-image img {
        object-position: 64% center;
    }


    /* DARK GRADIENT MOBILE */

    .home-editorial-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(34,21,14,.94) 0%,
                rgba(34,21,14,.73) 38%,
                rgba(34,21,14,.30) 67%,
                rgba(34,21,14,.04) 100%
            );
    }


    /* CONTENT */

    .home-editorial-content {
        padding:
            0
            20px
            125px;
    }


    /* WILLKOMMEN */

    .home-editorial-kicker {
        margin-bottom: 11px;

        font-size: 7px;

        letter-spacing: 3px;
    }


    /* SANTE BEAUTY */

    .home-editorial-content h1 {
        max-width: 350px;

        font-size: 43px;

        line-height: .94;

        letter-spacing: -1px;

        white-space: nowrap;
    }


    /* SUBTITLE */

    .home-editorial-subtitle {
        margin-top: 15px;

        font-size: 6px;

        letter-spacing: 2.8px;
    }


    /* SCRIPT */

    .home-editorial-script {
        margin:
            18px
            0
            0
            5px;

        line-height: .65;
    }


    .home-editorial-script span {
        font-size: 30px;
    }


    .home-editorial-script span:nth-child(2) {
        margin:
            7px
            0
            0
            78px;
    }

}
/* =====================================================
   SANTE BEAUTY — PREISE PAGE FINAL
===================================================== */

.preise-page {
    width: 100%;
    overflow: visible;
    background: #fbf8f4;
    color: #35241c;
}


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

.preise-hero {
    width: 100%;
    padding: 55px 30px;
    background:
        radial-gradient(circle at 15% 20%, rgba(187,145,115,.12), transparent 35%),
        #f4ece4;
}

.preise-hero-content {
    width: 100%;
    max-width: 1280px;
    min-height: 570px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.preise-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 75px 60px 25px;
}

.preise-hero-kicker {
    display: block;
    margin-bottom: 18px;

    font: 500 9px "DM Sans", sans-serif;
    letter-spacing: 5px;

    color: #9a755e;
}

.preise-hero h1 {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: clamp(65px, 7vw, 102px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -3px;

    color: #33231c;
}

.preise-hero h1 em {
    display: block;
    margin-left: 75px;

    font-weight: 400;
    color: #8f674f;
}

.preise-hero-script {
    display: block;
    width: max-content;

    margin: 24px 0 0 145px;

    font-family: "Allura", cursive;
    font-size: 34px;

    color: #a57b61;

    transform: rotate(-4deg);
}

.preise-hero p {
    max-width: 430px;
    margin: 28px 0 0;

    font: 400 13px/1.8 "DM Sans", sans-serif;

    color: #725f54;
}

.preise-hero-image {
    position: relative;
    width: 100%;
    height: 570px;

    overflow: hidden;
    border-radius: 4px;
}

.preise-hero-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


/* ================= FILTER ================= */

.preise-category-nav {
    position: sticky;
    top: 70px;
    z-index: 9000;

    width: 100%;

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

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 15px;

    background: rgba(255, 253, 250, 0.97);

    border-top: 1px solid #eee4dc;
    border-bottom: 1px solid #e7ddd5;

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

    scrollbar-width: none;
}

.preise-category-nav::-webkit-scrollbar {
    display: none;
}

.preise-category-nav button {
    flex: 0 0 auto;

    padding: 21px 22px;

    border: 0;
    border-bottom: 1px solid transparent;

    background: transparent;

    font: 500 9px "DM Sans", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #78645a;

    cursor: pointer;
}

.preise-category-nav button:hover,
.preise-category-nav button.active {
    color: #38251d;
}

.preise-category-nav button.active {
    border-bottom-color: #8d6249;
}

.preise-hidden {
    display: none !important;
}


/* ================= SECTIONS ================= */

.preise-section {
    width: 100%;
    padding: 100px 30px;

    background: #fbf8f4;

    scroll-margin-top: 140px;
}

.preise-section-soft {
    background: #f5eee8;
}

.preise-section-inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* SECTION TITLE */

.preise-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 24px;

    margin-bottom: 42px;
}

.preise-number {
    flex: 0 0 auto;

    font-family: "Playfair Display", serif;
    font-size: 82px;
    line-height: .75;

    color: #e1d3c8;
}

.preise-kicker {
    display: block;

    margin-bottom: 9px;

    font: 500 8px "DM Sans", sans-serif;
    letter-spacing: 4px;

    color: #a17a62;
}

.preise-section-heading h2 {
    max-width: 650px;

    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 400;

    color: #33241d;
}

.preise-script {
    display: block;

    width: max-content;

    margin: 10px 0 0 35px;

    font-family: "Allura", cursive;
    font-size: 27px;

    color: #a57b62;

    transform: rotate(-3deg);
}


/* ================= IMAGE + PRICES ================= */

.preise-editorial-grid {
    display: grid;

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

    gap: 55px;

    align-items: start;
}


/* DESKTOP = SQUARE */

.preise-service-image {
    position: sticky;
    top: 150px;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 6px;

    background: #e8ddd4;
}

.preise-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.preise-service-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(45,27,18,.42),
            transparent 55%
        );
}

.preise-service-image > span {
    position: absolute;

    left: 28px;
    bottom: 27px;

    z-index: 2;

    font-family: "Allura", cursive;
    font-size: 35px;
    line-height: .85;

    color: #ffffff;
}


/* ================= PRICE LIST ================= */

.preise-list {
    width: 100%;

    border-top: 1px solid #d9ccc2;
}

.preise-item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 18px;

    min-height: 92px;

    padding: 20px 5px;

    border-bottom: 1px solid #ddd1c8;
}

.preise-item-info {
    min-width: 0;
}

.preise-item-info h3 {
    margin: 0 0 6px;

    font-family: "Playfair Display", serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 400;

    color: #382820;
}

.preise-item-info span {
    display: block;

    margin: 0;

    font: 400 10px/1.5 "DM Sans", sans-serif;

    color: #88776d;
}

.preise-item > strong {
    min-width: 65px;

    text-align: right;
    white-space: nowrap;

    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 500;

    color: #825c46;
}


/* ADD BUTTON */

.preise-add {
    min-width: 112px;

    padding: 11px 12px;

    border: 1px solid #8b654d;
    border-radius: 4px;

    background: transparent;

    color: #6e4c38;

    font: 500 9px "DM Sans", sans-serif;
    letter-spacing: .4px;

    cursor: pointer;

    transition: .25s ease;
}

.preise-add:hover,
.preise-add.added {
    background: #76543f;
    color: #ffffff;
}


/* ================= ACCORDION ================= */

.preise-accordion {
    margin-top: 14px;

  overflow: visible;

    border: 1px solid #ded2c9;
    border-radius: 8px;

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

.preise-accordion-head {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 20px;

    border: 0;

    background: transparent;

    color: #38271f;

    text-align: left;

    cursor: pointer;
}

.preise-accordion-head > span {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.preise-accordion-head small {
    font: 500 8px "DM Sans", sans-serif;

    letter-spacing: 2px;

    color: #a17a62;
}

.preise-accordion-head b {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 400;
}

.preise-accordion-head i {
    font-size: 20px;
    font-style: normal;

    transition: transform .25s ease;
}

.preise-accordion.open .preise-accordion-head i {
    transform: rotate(180deg);
}

.preise-accordion-body {
    display: none;

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

    gap: 8px;

    padding: 0 15px 15px;
}

.preise-accordion.open .preise-accordion-body {
    display: grid;
}

.preise-option {
    padding: 14px 8px;

    text-align: center;

    border-radius: 5px;

    background: #fffdfa;
}

.preise-option span {
    display: block;

    margin-bottom: 6px;

    font: 400 10px "DM Sans", sans-serif;

    color: #75635a;
}

.preise-option b {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 400;

    color: #38271f;
}


/* ================= MASSAGE MULTI ================= */

.preise-multi {
    padding: 23px 5px;

    border-bottom: 1px solid #ddd1c8;
}

.preise-multi h3 {
    margin: 0 0 13px;

    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 400;

    color: #382820;
}

.preise-multi > div {
    display: flex;
    justify-content: space-between;

    padding: 7px 0;

    font: 400 11px "DM Sans", sans-serif;

    color: #75635a;
}

.preise-multi b {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 500;

    color: #38271f;
}


/* ================= LASER SUBHEADING ================= */

.preise-subheading {
    padding: 37px 5px 16px;

    border-bottom: 1px solid #cfc0b5;
}

.preise-subheading:first-child {
    padding-top: 6px;
}

.preise-subheading span {
    display: block;

    margin-bottom: 6px;

    font: 500 8px "DM Sans", sans-serif;

    letter-spacing: 3px;

    color: #a17a62;
}

.preise-subheading h3 {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-weight: 400;

    color: #382820;
}

.preise-item-highlight {
    margin-top: 8px;

    padding-left: 18px;
    padding-right: 18px;

    background: #efe4da;
}


/* ================= CART ================= */

.preise-cart {
    position: fixed;

    left: 50%;
    bottom: 24px;

    z-index: 99998;

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

    display: none;

    grid-template-columns: 1fr auto;
    align-items: center;

    gap: 10px;

    padding: 10px;

    transform: translateX(-50%);

    border: 1px solid rgba(139,101,77,.16);
    border-radius: 15px;

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

    box-shadow: 0 15px 45px rgba(54,35,25,.15);

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

.preise-cart.show {
    display: grid;
}

.preise-cart-info {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 5px;

    border: 0;

    background: transparent;

    color: #38271f;

    text-align: left;
}

.preise-cart-info > span:last-child {
    display: flex;
    align-items: center;

    gap: 10px;
}

.preise-cart-info b {
    font: 500 11px "DM Sans", sans-serif;
}

.preise-cart-info strong {
    font-family: "Playfair Display", serif;
    font-size: 17px;
}

.preise-cart-icon {
    position: relative;

    font-size: 25px;
}

.preise-cart-icon small {
    position: absolute;

    right: -9px;
    top: -7px;

    min-width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #4b2e1f;

    color: #ffffff;

    font: 500 9px "DM Sans", sans-serif;
}

.preise-cart-book {
    padding: 15px 22px;

    border: 0;
    border-radius: 5px;

    background: #76543f;

    color: #ffffff;

    font: 500 9px "DM Sans", sans-serif;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    cursor: pointer;
}

.preise-cart-book b {
    margin-left: 12px;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .preise-hero {
        padding: 40px 25px;
    }

    .preise-hero-content {
        min-height: 470px;
    }

    .preise-hero-text {
        padding: 40px 35px 40px 10px;
    }

    .preise-hero h1 {
        font-size: 65px;
    }

    .preise-hero-image {
        height: 470px;
    }

    .preise-category-nav {
        justify-content: flex-start;
    }

    .preise-editorial-grid {
        grid-template-columns: 310px minmax(0,1fr);

        gap: 35px;
    }

    .preise-service-image {
        aspect-ratio: 1 / 1;
    }

    .preise-section {
        padding: 80px 30px;
    }

}


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

@media (max-width: 700px) {

    .preise-hero {
        padding: 0;
    }

    .preise-hero-content {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }

    .preise-hero-text {
        width: 100%;

        padding: 45px 22px 32px;
    }

    .preise-hero-kicker {
        margin-bottom: 13px;

        font-size: 7px;

        letter-spacing: 3px;
    }

    .preise-hero h1 {
        font-size: 52px;

        line-height: .92;

        letter-spacing: -2px;
    }

    .preise-hero h1 em {
        margin-left: 42px;
    }

    .preise-hero-script {
        margin: 17px 0 0 72px;

        font-size: 27px;
    }

    .preise-hero p {
        max-width: 310px;

        margin-top: 20px;

        font-size: 11px;
    }


    /* HERO MOBILE IMAGE */

    .preise-hero-image {
        width: calc(100% - 36px);
        height: auto;

        aspect-ratio: 16 / 9;

        margin: 0 18px 35px;

        border-radius: 7px;
    }


    /* FILTER */

    .preise-category-nav {
        top: 62px;

        justify-content: flex-start;

        padding: 0 8px;
    }

    .preise-category-nav button {
        padding: 17px 14px;

        font-size: 8px;

        letter-spacing: 1px;
    }


    /* SECTION */

    .preise-section {
        padding: 60px 18px;
    }

    .preise-section-heading {
        gap: 10px;

        margin-bottom: 25px;
    }

    .preise-number {
        font-size: 58px;
    }

    .preise-kicker {
        font-size: 7px;

        letter-spacing: 3px;
    }

    .preise-section-heading h2 {
        font-size: 28px;
    }

    .preise-script {
        margin: 8px 0 0 25px;

        font-size: 24px;
    }


    /* IMAGE */

    .preise-editorial-grid {
        display: block;
    }

    .preise-service-image {
        position: relative;

        top: auto;

        width: 100%;

        aspect-ratio: 16 / 7;

        margin-bottom: 20px;

        border-radius: 7px;
    }

    .preise-service-image > span {
        left: 20px;
        bottom: 18px;

        font-size: 28px;
    }


    /* ACCORDION */

    .preise-accordion-body {
        grid-template-columns: repeat(2,1fr);
    }

    .preise-accordion-head {
        padding: 16px;
    }

    .preise-accordion-head b {
        font-size: 16px;
    }


    /* CART */

    .preise-cart {
        bottom: 82px;

        width: calc(100% - 22px);

        border-radius: 13px;
    }

    .preise-cart-info {
        gap: 9px;
    }

    .preise-cart-info b {
        font-size: 9px;
    }

    .preise-cart-info strong {
        font-size: 14px;
    }

    .preise-cart-book {
        padding: 14px 13px;

        font-size: 8px;
    }

    .preise-cart-book b {
        margin-left: 5px;
    }

}/* =====================================================
   PREISE CATEGORY NAV - FIXED ON SCROLL
===================================================== */

.preise-category-nav {
    position: relative !important;
    top: auto !important;

    width: 100%;
    z-index: 9998;

    background: rgba(255, 253, 250, 0.98);

    border-top: 1px solid #eee4dc;
    border-bottom: 1px solid #e7ddd5;

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


/* KHI CUỘN TỚI HEADER */

.preise-category-nav.preise-nav-fixed {
    position: fixed !important;

    top: 78px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9998 !important;
}


/* GIỮ CHỖ CŨ, KHÔNG LÀM TRANG BỊ GIẬT */

.preise-nav-placeholder {
    display: none;
}

.preise-nav-placeholder.active {
    display: block;
}


@media (max-width: 700px) {

    .preise-category-nav.preise-nav-fixed {
        top: 62px !important;
    }

}@media (max-width: 700px) {

    .preise-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 48px !important;
        align-items: center;
        column-gap: 12px;
        row-gap: 3px;

        min-height: 78px;
        padding: 13px 4px;

        border-bottom: 1px solid #e4d9d0;
    }

    .preise-item-info {
        min-width: 0;
    }

    .preise-item-info h3 {
        margin: 0 0 5px;

        font-family: "Playfair Display", serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;

        color: #3d2c25;
    }

    .preise-item-info span {
        font-family: "DM Sans", sans-serif;
        font-size: 12px;

        color: #8a7b72;
    }

    .preise-item > strong {
        min-width: 55px;

        font-family: "Playfair Display", serif;
        font-size: 20px;
        font-weight: 500;

        color: #805d45;

        text-align: right;
        white-space: nowrap;
    }

    .preise-add,
    .preise-general-book {
        width: 48px !important;
        height: 48px !important;

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

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

        border: 0;
        border-radius: 8px;

        background: #805d45;
        color: #fff;

        text-decoration: none;
    }

    .preise-add-plus {
        font-size: 22px;
        font-weight: 300;
        line-height: 1;
    }

    .preise-add-text {
        display: none !important;
    }

    .preise-general-book {
        font-size: 22px;
        line-height: 1;
    }
}



/* =====================================================
   FLOATING PRICE CART
===================================================== */

.preise-cart {
    position: fixed;

    left: 50%;
    bottom: 24px;

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

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

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px;

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

    border: 1px solid rgba(128,93,69,.14);
    border-radius: 16px;

    box-shadow:
        0 12px 40px rgba(57,40,30,.18);

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 99997;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

.preise-cart.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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

@media (max-width: 700px) {

    .preise-cart {
        bottom: 84px;
        width: calc(100% - 24px);
    }
}
@media (max-width: 700px) {

    /* GIỎ HÀNG: đặt bên phải, trước LANGUAGE */
    .header-price-cart {
        position: absolute !important;

        right: 86px !important;
        left: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 36px !important;
        height: 42px !important;

        z-index: 20;
    }

    .header-price-cart-icon {
        font-size: 27px;
        line-height: 1;
    }

    .header-price-cart-count {
        top: 0px;
        right: -1px;

        min-width: 17px;
        height: 17px;

        font-size: 9px;
    }

    /* LANGUAGE nằm ngoài cùng bên phải */
    .language {
        position: absolute !important;

        right: 12px !important;
        left: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* LOGO luôn chính giữa tuyệt đối */
    .logo {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;

        top: 50% !important;

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

        z-index: 10;
    }
}
/* =====================================================
   PREISE HERO - LUXURY FULL IMAGE
   DESKTOP + MOBILE
===================================================== */

.preise-hero {
    overflow: hidden;
    background: #f7f0e8;
}

.preise-hero-content {
    position: relative !important;
    display: block !important;
    overflow: hidden;
    min-height: 430px;
    background: #f7f0e8;
}


/* ===== FULL BACKGROUND IMAGE ===== */

.preise-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    overflow: hidden;
}

.preise-hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 65% center;
    display: block;

    /* Luxury image entrance */
    animation: priceHeroImage 1.6s cubic-bezier(.22,.61,.36,1) both;
}


/* ===== BEIGE FADE OVER IMAGE ===== */

.preise-hero-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(247,240,232,1) 0%,
        rgba(247,240,232,.98) 24%,
        rgba(247,240,232,.88) 39%,
        rgba(247,240,232,.58) 51%,
        rgba(247,240,232,.20) 64%,
        rgba(247,240,232,0) 76%
    );
}


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

.preise-hero-text {
    position: relative !important;
    z-index: 3 !important;

    width: 48% !important;
    min-height: 430px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px 0 45px 5%;
}


/* ===== LUXURY TEXT ANIMATION ===== */

.preise-hero-kicker {
    opacity: 0;
    animation: priceHeroText .8s ease-out .15s forwards;
}

.preise-hero-text h1 {
    opacity: 0;
    animation: priceHeroTitle 1s cubic-bezier(.22,.61,.36,1) .30s forwards;
}

.preise-hero-script {
    opacity: 0;
    animation: priceHeroText .9s ease-out .55s forwards;
}

.preise-hero-text p {
    opacity: 0;
    animation: priceHeroText .9s ease-out .72s forwards;
}


/* ===== ANIMATIONS ===== */

@keyframes priceHeroImage {

    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes priceHeroText {

    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


@keyframes priceHeroTitle {

    from {
        opacity: 0;
        transform: translateY(22px);
        letter-spacing: .03em;
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: normal;
        filter: blur(0);
    }
}


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

@media (max-width: 700px) {

    .preise-hero-content {
        min-height: 330px !important;
    }


    /* Ảnh vẫn phủ toàn bộ hero */

    .preise-hero-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .preise-hero-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        /* Cô gái nằm bên phải */
        object-position: 68% center;
    }


    /* Mobile: lớp beige mạnh hơn bên trái */

    .preise-hero-content::after {

        background: linear-gradient(
            90deg,
            rgba(247,240,232,.98) 0%,
            rgba(247,240,232,.94) 25%,
            rgba(247,240,232,.78) 43%,
            rgba(247,240,232,.40) 59%,
            rgba(247,240,232,.08) 76%,
            rgba(247,240,232,0) 100%
        );
    }


    .preise-hero-text {
        width: 62% !important;
        min-height: 330px !important;

        padding:
            28px
            0
            28px
            20px !important;

        justify-content: center;
    }


    .preise-hero-text h1 {
        position: relative;
        z-index: 4;
    }

}
/* =====================================================
   LUXURY BOOKING BUTTON
===================================================== */

.preise-laser-book {
    width: fit-content;
    min-width: 220px;
    height: 58px;
    margin: 30px 0 10px auto;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    background: #76543f;
    color: #fff;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(79, 53, 38, .12);

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

.preise-laser-book b {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;

    transition: transform .35s ease;
}


/* Hover luxury */

.preise-laser-book:hover {
    background: #5f4232;

    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(79, 53, 38, .20);
}

.preise-laser-book:hover b {
    transform: translateX(6px);
}


/* MOBILE */

@media (max-width: 700px) {

    .preise-laser-book {
        width: 100%;
        height: 56px;

        margin: 24px 0 6px;
        padding: 0 22px;

        justify-content: space-between;

        font-size: 12px;
        letter-spacing: .13em;

        border-radius: 4px;
    }

}
/* =====================================================
   MOBILE BOTTOM NAV - FIX ICONS
===================================================== */

@media (max-width: 700px) {

    .mobile-bottom-nav .mobile-bottom-item > svg,
    .mobile-bottom-booking-circle svg {
        width: 25px;
        height: 25px;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-nav .mobile-bottom-item {
        color: #7b6a60;
    }

    .mobile-bottom-nav .mobile-bottom-item > span {
        color: inherit;
    }


    /* HOME / PREISE / GALERIE / KONTAKT */

    .mobile-bottom-nav .mobile-bottom-item > svg path,
    .mobile-bottom-nav .mobile-bottom-item > svg circle,
    .mobile-bottom-nav .mobile-bottom-item > svg rect {
        fill: none !important;
        stroke: currentColor !important;
    }


    /* NÚT BUCHEN Ở GIỮA */

    .mobile-bottom-booking-circle {
        width: 50px;
        height: 50px;

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

        border-radius: 50%;

        background: #805d45;

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

    .mobile-bottom-booking-circle svg {
        width: 24px;
        height: 24px;

        color: #fff;

        fill: none !important;
        stroke: #fff !important;
    }

    .mobile-bottom-booking-circle svg path {
        fill: none !important;
        stroke: #fff !important;
    }

}
/* =========================================
   PREISE HERO - DESKTOP FULL
========================================= */

@media (min-width: 701px) {

    .preise-hero {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .preise-hero-content {
        width: 100% !important;
        max-width: none !important;

        min-height: 560px !important;
        height: 560px !important;

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

        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .preise-hero-image {
        position: absolute !important;
        inset: 0 !important;

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

    .preise-hero-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: 65% center !important;

        display: block !important;
    }

    .preise-hero-text {
        min-height: 560px !important;
    }
}
/* =====================================================
   PREISE LUXURY FINAL + FOOTER
===================================================== */

.preise-luxury-final {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #f5ede5;
}

.preise-luxury-final-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.preise-luxury-final-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 75% center;
}

.preise-luxury-final-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(248, 243, 237, .99) 0%,
        rgba(248, 243, 237, .96) 34%,
        rgba(248, 243, 237, .80) 52%,
        rgba(248, 243, 237, .25) 72%,
        rgba(248, 243, 237, 0) 100%
    );
}

.preise-luxury-final-content {
    position: relative;
    z-index: 3;

    width: 56%;
    min-height: 560px;

    padding: 70px 6%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.preise-luxury-kicker {
    margin-bottom: 22px;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    letter-spacing: .34em;
    color: #906e59;
}

.preise-luxury-final h2 {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 5vw, 78px);
    font-weight: 400;
    line-height: .98;

    color: #35241d;
}

.preise-luxury-final h2 span,
.preise-luxury-final h2 em {
    display: block;
}

.preise-luxury-final h2 em {
    margin-top: 8px;

    font-weight: 400;
    color: #9a7057;
}

.preise-luxury-final p {
    max-width: 520px;
    margin: 28px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color: #65574f;
}

.preise-luxury-book {
    min-width: 275px;
    height: 64px;

    margin-top: 30px;
    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 40px;

    background: #956a4d;
    color: #fff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

    transition: .35s ease;
}

.preise-luxury-book:hover {
    background: #76513b;
    transform: translateY(-3px);
}

.preise-luxury-book b {
    font-size: 24px;
    font-weight: 300;
}

.preise-luxury-signature {
    margin-top: 28px;

    font-family: "Allura", cursive;
    font-size: 38px;

    color: #9a7057;
}

.preise-luxury-heart {
    font-size: 32px;
    color: #8d654d;
}


/* FOOTER */

.preise-luxury-footer {
    padding: 48px 6% 22px;

    background: #fbf7f2;
    color: #4b3a31;

    border-top: 1px solid #dfd0c4;
}

.preise-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 42px;
}

.preise-footer-logo {
    color: #2f241f;
    text-decoration: none;
}

.preise-footer-logo strong {
    display: block;

    font-family: "Playfair Display", serif;
    font-size: 42px;
    font-weight: 500;

    letter-spacing: .20em;
    line-height: 1;
}

.preise-footer-logo small {
    display: block;

    margin-top: 8px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;

    letter-spacing: .48em;
}

.preise-footer-script {
    margin-top: 16px;

    font-family: "Allura", cursive;
    font-size: 30px;

    color: #9a7057;
}

.preise-footer-heart {
    font-size: 25px;
    color: #8d654d;
}

.preise-footer-grid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1.15fr .8fr;
    gap: 70px;

    padding: 10px 0 42px;
}

.preise-footer-column h3 {
    margin: 0 0 23px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: .30em;
    color: #8d654d;
}

.preise-footer-column > a {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin: 0 0 16px;

    color: #61534b;
    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.preise-footer-icon {
    min-width: 20px;

    font-size: 19px;
    color: #8d654d;
}

.preise-footer-hours > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;

    margin-bottom: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

    color: #61534b;
}

.preise-footer-hours b {
    font-weight: 400;
}

.preise-footer-socials {
    display: flex;
    gap: 14px;
}

.preise-footer-socials a {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #987056;
    color: #fff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 18px;
}

.preise-footer-story {
    margin-top: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    color: #8d654d;
}

.preise-footer-story span {
    font-size: 26px;
}

.preise-footer-story small {
    margin-top: 6px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;

    letter-spacing: .27em;
    line-height: 1.6;
}

.preise-footer-bottom {
    padding-top: 20px;

    border-top: 1px solid #dfd0c4;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;

    color: #88786f;
}

.preise-footer-legal {
    display: flex;
    gap: 25px;
}

.preise-footer-legal a {
    color: inherit;
    text-decoration: none;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .preise-luxury-final {
        min-height: 520px;
    }

    .preise-luxury-final-content {
        width: 62%;
        min-height: 520px;
        padding: 55px 4%;
    }

    .preise-luxury-final h2 {
        font-size: 54px;
    }

    .preise-luxury-final-image img {
        object-position: 70% center;
    }

    .preise-footer-grid {
        gap: 35px;
    }

    .preise-footer-hours > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* =====================================================
   PREISE LUXURY – MOBILE GIỐNG DEMO
===================================================== */

@media (max-width: 700px) {

    /* ==========================================
       FINAL CTA
    ========================================== */

    .preise-luxury-final {
        position: relative;
        min-height: 530px !important;
        height: 530px;
        overflow: hidden;
        background: #f8f2eb;
    }

    .preise-luxury-final-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

   .preise-luxury-final-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* kéo ảnh sang trái để lộ lọ hoa bên phải */
    object-position: 90% center;

    display: block;
}

    .preise-luxury-final-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;

        background: linear-gradient(
            90deg,
            rgba(249,244,238,.97) 0%,
            rgba(249,244,238,.93) 34%,
            rgba(249,244,238,.68) 56%,
            rgba(249,244,238,.16) 82%,
            rgba(249,244,238,0) 100%
        );
    }

    .preise-luxury-final-content {
        position: relative;
        z-index: 3;

        width: 76% !important;
        min-height: 530px !important;
        height: 530px;

        padding: 34px 12px 25px 22px !important;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
    }


    /* KICKER */

    .preise-luxury-kicker {
        margin: 0 0 18px;

        font-family: "DM Sans", sans-serif;
        font-size: 8px;
        font-weight: 500;
        line-height: 1;

        letter-spacing: .30em;
        white-space: nowrap;

        color: #916b55;
    }


    /* TITLE */

    .preise-luxury-final h2 {
        margin: 0;

        font-family: "Playfair Display", serif;
        font-size: 37px !important;
        font-weight: 400;
        line-height: .98;

        color: #35251e;
    }

    .preise-luxury-final h2 span {
        display: block;
    }

    .preise-luxury-final h2 em {
        display: block;

        margin-top: 3px;

        font-size: 38px;
        font-weight: 400;
        line-height: 1;

        color: #9b7057;
    }


    /* DESCRIPTION */

    .preise-luxury-final p {
        width: 92%;
        max-width: 285px;

        margin: 19px auto 0;

        font-family: "DM Sans", sans-serif;
        font-size: 11px;
        line-height: 1.5;

        color: #62554e;
    }


    /* BUTTON */

    .preise-luxury-book {
        width: 245px !important;
        min-width: 0 !important;
        max-width: 90% !important;
        height: 54px;

        margin: 21px auto 0;
        padding: 0 22px;

        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-radius: 30px;

        font-size: 12px;
        letter-spacing: 0;
    }

    .preise-luxury-book b {
        font-size: 20px;
        font-weight: 300;
    }


    /* HANDWRITING */

    .preise-luxury-signature {
        margin-top: 20px;

        font-family: "Allura", cursive;
        font-size: 29px !important;
        line-height: 1;

        color: #9b7057;
    }

    .preise-luxury-heart {
        margin-top: 7px;

        font-size: 24px;
        line-height: 1;

        color: #8d654d;
    }



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

    .preise-luxury-footer {
        padding:
            32px
            28px
            100px !important;

        background: #fbf7f2;
    }


    /* LOGO */

    .preise-footer-brand {
        margin: 0 0 32px !important;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .preise-footer-logo strong {
        font-size: 35px !important;
        letter-spacing: .20em;
    }

    .preise-footer-logo small {
        margin-top: 5px;

        font-size: 7px;
        letter-spacing: .45em;
    }

    .preise-footer-script {
        margin-top: 13px;

        font-size: 25px;
        line-height: 1;
    }

    .preise-footer-heart {
        margin-top: 5px;
        font-size: 21px;
    }



    /* FOOTER CONTENT */

    .preise-footer-grid {
        display: block !important;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0 0 25px;
    }

    .preise-footer-column {
        margin: 0 0 27px !important;
    }

    .preise-footer-column h3 {
        margin: 0 0 16px;

        font-size: 9px;
        letter-spacing: .30em;
    }


    /* CONTACT */

    .preise-footer-column > a {
        margin-bottom: 11px;

        gap: 11px;

        font-size: 12px;
        line-height: 1.45;
    }

    .preise-footer-icon {
        min-width: 18px;
        font-size: 16px;
    }


    /* HOURS */

    .preise-footer-hours > div {
        display: grid !important;
        grid-template-columns: 1fr auto !important;

        gap: 12px;

        margin-bottom: 9px;

        font-size: 12px;
        line-height: 1.4;
    }

    .preise-footer-hours b {
        white-space: nowrap;
        font-weight: 400;
    }


    /* SOCIAL */

    .preise-footer-social-column {
        margin-bottom: 20px !important;
    }

    .preise-footer-socials {
        display: flex;

        gap: 13px;
    }

    .preise-footer-socials a {
        width: 38px;
        height: 38px;

        font-size: 16px;
    }


    /* BEAUTY STORY */

    .preise-footer-story {
        margin-top: 25px;
    }

    .preise-footer-story span {
        font-size: 24px;
    }

    .preise-footer-story small {
        margin-top: 6px;

        font-size: 7px;
        line-height: 1.6;

        letter-spacing: .28em;
    }


    /* BOTTOM FOOTER */

    .preise-footer-bottom {
        margin-top: 3px;
        padding-top: 17px;

        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: start;

        gap: 9px 15px;

        font-size: 9px;
        line-height: 1.45;
    }

    .preise-footer-legal {
        display: flex;

        gap: 18px;
    }

    .preise-footer-bottom > span:last-child {
        grid-column: 2;
        text-align: right;
    }

}
/* =====================================================
   FIX FOOTER MOBILE - REMOVE EMPTY SPACE
===================================================== */

@media (max-width: 700px) {

    .preise-luxury-footer {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding-top: 32px !important;
        padding-bottom: 95px !important;

        margin-bottom: 0 !important;
    }

    .preise-footer-grid {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 18px !important;
    }

    .preise-footer-bottom {
        height: auto !important;
        min-height: 0 !important;

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

    .preise-footer-bottom > * {
        margin-bottom: 0 !important;
    }
}
/* =====================================================
   CHỈ MOBILE - THU GỌN PHẦN CUỐI FOOTER
===================================================== */

@media (max-width: 700px) {

    .preise-luxury-footer {
        height: auto !important;
        min-height: 0 !important;

        /* chỉ chừa đủ chỗ cho thanh menu dưới */
        padding-bottom: 82px !important;
    }

    .preise-footer-bottom {
        height: auto !important;
        min-height: 0 !important;

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

    .preise-page {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
/* HEART + 2 ĐƯỜNG KẺ */

.preise-footer-story {
    position: relative;
}

.preise-footer-story::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #d8c1b1;

    position: absolute;
    top: 17px;
    left: 0;
}

.preise-footer-story span {
    position: relative;
    z-index: 2;

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

    width: 58px;
    margin: 0 auto;

    background: #fbf7f2;
    color: #8d654d;
}


/* CHỈ ĐIỆN THOẠI */

@media (max-width: 700px) {

    .preise-footer-story::before {
        top: 13px;
    }

    .preise-footer-story span {
        width: 52px;
        font-size: 24px;
    }

}
.preise-option {
    display: grid;
    grid-template-columns: 1fr auto 38px;
    align-items: center;
    gap: 14px;
}

.preise-option-plus {
    width: 34px;
    height: 34px;

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

    border-radius: 6px;
    background: #805d45;
    color: #fff;

    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

@media (max-width: 700px) {

    .preise-option {
        grid-template-columns: 1fr auto 38px;
        gap: 10px;
    }

    .preise-option-plus {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }
}
@media (max-width: 700px) {

    .preise-hero-image img {
        width: 110% !important;
        max-width: none !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        transform: translateX(35px) !important;
        animation: none !important;
    }

}
/* =========================================================
   INDEX MOBILE — FIX FOOTER BEHIND BOTTOM NAV
========================================================= */

@media (max-width: 700px){

    body{
        padding-bottom: 90px !important;
    }

    .sante-footer{
        position: relative;
        z-index: 1;
        margin-bottom: 0;
    }

    .footer-legal{
        padding-bottom: 25px !important;
    }

    .mobile-bottom-nav{
        z-index: 9999;
    }
}

/* =========================================================
   SANTE BEAUTY
   HOME — PAYMENT + WHATSAPP
========================================================= */

.home-payment-contact{
    width:min(1400px,94%);
    margin:70px auto 0;
    font-family:"DM Sans",sans-serif;
}


/* =========================================================
   PAYMENT BOX
========================================================= */

.home-payment-box{
    position:relative;
    min-height:510px;
    overflow:hidden;

    padding:
        62px
        clamp(40px,5vw,74px);

    box-sizing:border-box;

    border:
        1px solid
        rgba(167,119,82,.13);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 92% 45%,
            rgba(205,166,132,.20),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #fffdf9 0%,
            #fbf5ee 58%,
            #f5e9de 100%
        );

    box-shadow:
        0 18px 50px
        rgba(73,49,34,.06);
}


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

.home-payment-content{
    position:relative;
    z-index:3;

    max-width:850px;
}


.home-payment-kicker{
    display:block;

    margin-bottom:20px;

    font:
        600 10px/1
        "DM Sans",sans-serif;

    letter-spacing:5px;

    color:#a77752;
}


.home-payment-content h2{
    margin:0;

    font:
        400 clamp(40px,4vw,56px)/1.08
        "Playfair Display",serif;

    color:#51372b;
}


.home-payment-text{
    max-width:680px;

    margin:
        22px 0 0;

    font:
        400 15px/1.7
        "DM Sans",sans-serif;

    color:#74665d;
}


/* =========================================================
   PAYMENT METHODS
========================================================= */

.home-payment-methods{
    display:flex;

    align-items:stretch;

    gap:12px;

    margin-top:36px;
}


.home-payment-method{
    display:flex;

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

    height:72px;

    min-width:125px;

    padding:0 20px;

    box-sizing:border-box;

    border:
        1px solid
        rgba(105,78,61,.08);

    border-radius:11px;

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

    box-shadow:
        0 7px 22px
        rgba(69,48,35,.05);
}


/* VISA */

.payment-visa{
    font-size:29px;
    font-weight:800;
    font-style:italic;

    letter-spacing:-2px;

    color:#193ba5;
}


/* MASTERCARD */

.payment-mastercard{
    position:relative;

    min-width:135px;
}


.mc-circle{
    display:block;

    width:34px;
    height:34px;

    border-radius:50%;
}


.mc-red{
    background:#e62c2f;
}


.mc-orange{
    margin-left:-12px;

    background:
        rgba(246,153,27,.94);
}


/* GIROCARD */

.payment-giro{
    gap:7px;

    color:#2862a7;
}


.giro-icon{
    font-size:29px;

    line-height:1;
}


.payment-giro strong{
    font-size:16px;
    font-weight:600;
}


/* APPLE PAY */

.payment-apple{
    gap:7px;

    color:#111;
}


.apple-symbol{
    position:relative;

    display:block;

    width:23px;
    height:27px;

    overflow:hidden;

    font-size:0;
}


.apple-symbol::before{
    content:"";

    position:absolute;

    left:2px;
    bottom:1px;

    width:19px;
    height:20px;

    border-radius:
        48% 48%
        52% 52%;

    background:#111;
}


.apple-symbol::after{
    content:"";

    position:absolute;

    top:0;
    left:13px;

    width:7px;
    height:5px;

    border-radius:
        7px 2px
        7px 2px;

    background:#111;

    transform:
        rotate(-35deg);
}


.payment-apple strong{
    font-size:23px;
    font-weight:600;
}


/* GOOGLE PAY */

.payment-google{
    gap:6px;

    color:#333;
}


.google-g{
    font-size:27px;
    font-weight:700;

    color:#4285f4;
}


.payment-google strong{
    font-size:22px;
    font-weight:500;
}


/* =========================================================
   FEATURES
========================================================= */

.home-payment-features{
    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:36px;
}


.home-payment-features > div{
    display:flex;

    align-items:center;

    gap:13px;
}


.home-payment-features > div > span{
    display:flex;

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

    flex:0 0 auto;

    width:25px;
    height:25px;

    border:
        1px solid
        #c89976;

    border-radius:50%;

    color:#a77752;

    font-size:11px;
}


.home-payment-features p{
    margin:0;

    font:
        400 13px/1.5
        "DM Sans",sans-serif;

    color:#675950;
}


/* =========================================================
   DECORATION RIGHT
========================================================= */

.home-payment-decor{
    position:absolute;

    z-index:1;

    right:0;
    top:0;

    width:38%;
    height:100%;

    pointer-events:none;
}


.home-payment-circle{
    position:absolute;

    width:500px;
    height:500px;

    right:-210px;
    top:-115px;

    border-radius:50%;

    background:
        rgba(215,181,151,.14);
}


/* FLOWERS */

.home-payment-flowers{
    position:absolute;

    right:45px;
    bottom:30px;

    width:190px;
    height:230px;

    opacity:.65;
}


.home-payment-flowers::before{
    content:"";

    position:absolute;

    left:90px;
    bottom:-30px;

    width:2px;
    height:250px;

    background:
        linear-gradient(
            to top,
            #a99076,
            transparent
        );

    transform:
        rotate(15deg);
}


.home-payment-flowers span{
    position:absolute;

    display:block;

    width:72px;
    height:38px;

    border-radius:
        70% 10%
        70% 10%;

    background:
        rgba(187,160,132,.23);

    filter:
        blur(.2px);
}


.home-payment-flowers span:nth-child(1){
    right:17px;
    top:35px;

    transform:
        rotate(-28deg);
}


.home-payment-flowers span:nth-child(2){
    right:72px;
    top:95px;

    transform:
        rotate(28deg);
}


.home-payment-flowers span:nth-child(3){
    right:0;
    top:145px;

    transform:
        rotate(-20deg);
}


/* =========================================================
   SCRIPT
========================================================= */

.home-payment-script{
    position:absolute;

    z-index:3;

    left:74px;
    bottom:37px;

    font:
        400 47px/.85
        "Allura",cursive;

    color:#b37c58;

    transform:
        rotate(-5deg);

    opacity:.82;
}


.home-payment-script span{
    display:inline-block;

    margin-left:35px;

    font-size:34px;
}


/* =========================================================
   WHATSAPP BOX
========================================================= */

.home-whatsapp-box{
    position:relative;

    display:flex;

    align-items:center;

    min-height:280px;

    margin-top:16px;

    padding:
        45px
        clamp(40px,5vw,74px);

    box-sizing:border-box;

    overflow:hidden;

    border:
        1px solid
        rgba(167,119,82,.13);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(212,177,148,.15),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #fffdf9,
            #f8eee5
        );

    box-shadow:
        0 15px 42px
        rgba(75,52,38,.055);
}


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

.home-whatsapp-content{
    position:relative;

    z-index:4;

    width:65%;
}


.home-whatsapp-kicker{
    display:block;

    margin-bottom:12px;

    font:
        600 9px/1
        "DM Sans",sans-serif;

    letter-spacing:4px;

    color:#a77752;
}


.home-whatsapp-content h2{
    margin:0;

    font:
        400 38px/1.1
        "Playfair Display",serif;

    color:#54392c;
}


.home-whatsapp-content > p{
    margin:
        12px 0
        24px;

    font:
        400 14px/1.6
        "DM Sans",sans-serif;

    color:#77685e;
}


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

.home-whatsapp-button{
    display:flex;

    align-items:center;

    gap:15px;

    width:min(470px,100%);

    min-height:62px;

    padding:
        0 22px;

    box-sizing:border-box;

    border:
        1px solid
        #9b7862;

    border-radius:13px;

    text-decoration:none;

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

    color:#594236;

    font:
        600 12px/1
        "DM Sans",sans-serif;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.home-whatsapp-button:hover{
    transform:
        translateY(-2px);

    background:#fff;

    box-shadow:
        0 12px 28px
        rgba(70,47,33,.09);
}


.home-whatsapp-button-icon{
    display:flex;

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


.home-whatsapp-button-icon svg{
    width:29px;
    height:29px;

    fill:none;

    stroke:#72503c;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.home-whatsapp-button b{
    margin-left:auto;

    font-size:20px;
    font-weight:300;

    color:#a77752;
}


/* =========================================================
   PHONE
========================================================= */

.home-whatsapp-phone-wrap{
    position:absolute;

    z-index:2;

    right:8%;
    bottom:-125px;
}


.home-whatsapp-phone{
    position:relative;

    width:195px;
    height:385px;

    padding:9px;

    box-sizing:border-box;

    border:
        4px solid
        #282522;

    border-radius:35px;

    background:#161514;

    box-shadow:
        0 25px 55px
        rgba(53,37,27,.24);

    transform:
        rotate(10deg);
}


.home-whatsapp-notch{
    position:absolute;

    z-index:4;

    left:50%;
    top:7px;

    width:72px;
    height:18px;

    transform:
        translateX(-50%);

    border-radius:
        0 0
        13px 13px;

    background:#161514;
}


.home-whatsapp-screen{
    display:flex;

    flex-direction:column;

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

    width:100%;
    height:100%;

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #eee7e0
        );
}


.home-whatsapp-app{
    display:flex;

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

    width:67px;
    height:67px;

    margin-bottom:18px;

    border-radius:18px;

    background:#25d366;

    box-shadow:
        0 8px 22px
        rgba(37,211,102,.20);
}


.home-whatsapp-app svg{
    width:43px;
    height:43px;

    fill:none;

    stroke:#fff;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.home-whatsapp-screen strong{
    font:
        600 11px/1
        "DM Sans",sans-serif;

    letter-spacing:1.7px;

    color:#624735;
}


.home-whatsapp-screen small{
    margin-top:7px;

    font:
        500 6px/1
        "DM Sans",sans-serif;

    letter-spacing:2.5px;

    color:#9a7d69;
}


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

@media(max-width:1000px){

    .home-payment-contact{
        width:94%;
    }


    .home-payment-method{
        min-width:0;

        flex:1;

        padding:
            0 10px;
    }


    .home-payment-decor{
        opacity:.65;
    }


    .home-whatsapp-phone-wrap{
        right:5%;
    }

}


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

@media(max-width:700px){

    .home-payment-contact{
        width:calc(100% - 20px);

        margin:
            38px auto 0;
    }


    /* PAYMENT */

    .home-payment-box{
        min-height:0;

        padding:
            38px 18px
            145px;

        border-radius:18px;
    }


    .home-payment-content{
        max-width:none;
    }


    .home-payment-kicker{
        margin-bottom:14px;

        text-align:center;

        font-size:8px;

        letter-spacing:3.3px;
    }


    .home-payment-content h2{
        text-align:center;

        font-size:32px;
    }


    .home-payment-text{
        max-width:315px;

        margin:
            15px auto 0;

        text-align:center;

        font-size:10px;

        line-height:1.65;
    }


    /* PAYMENT METHODS */

    .home-payment-methods{
        display:grid;

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

        gap:7px;

        margin-top:27px;
    }


    .home-payment-method{
        width:auto;

        min-width:0;

        height:59px;

        padding:
            0 7px;

        border-radius:9px;
    }


    .payment-visa{
        grid-column:
            span 2;

        font-size:22px;
    }


    .payment-mastercard{
        grid-column:
            span 2;
    }


    .payment-giro{
        grid-column:
            span 2;
    }


    .payment-apple{
        grid-column:
            2 / span 2;
    }


    .payment-google{
        grid-column:
            4 / span 2;
    }


    .mc-circle{
        width:25px;
        height:25px;
    }


    .mc-orange{
        margin-left:-9px;
    }


    .giro-icon{
        font-size:20px;
    }


    .payment-giro strong{
        font-size:11px;
    }


    .payment-apple strong,
    .payment-google strong{
        font-size:17px;
    }


    .google-g{
        font-size:20px;
    }


    /* FEATURES */

    .home-payment-features{
        width:min(310px,100%);

        margin:
            28px auto 0;

        gap:10px;
    }


    .home-payment-features p{
        font-size:9px;
    }


    .home-payment-features > div > span{
        width:21px;
        height:21px;

        font-size:9px;
    }


    /* REMOVE BIG DECORATION ON MOBILE */

    .home-payment-decor{
        right:-90px;

        width:250px;

        opacity:.55;
    }


    .home-payment-circle{
        width:280px;
        height:280px;

        right:-150px;
        top:-70px;
    }


    .home-payment-flowers{
        display:none;
    }


    /* SCRIPT */

    .home-payment-script{
        left:50%;
        bottom:38px;

        width:260px;

        transform:
            translateX(-50%)
            rotate(-4deg);

        text-align:center;

        font-size:40px;
    }


    .home-payment-script span{
        margin-left:20px;

        font-size:29px;
    }


    /* WHATSAPP */

    .home-whatsapp-box{
        min-height:300px;

        margin-top:10px;

        padding:
            30px 18px;

        border-radius:18px;
    }


    .home-whatsapp-content{
        width:68%;
    }


    .home-whatsapp-kicker{
        font-size:7px;

        letter-spacing:2.5px;
    }


    .home-whatsapp-content h2{
        font-size:29px;
    }


    .home-whatsapp-content > p{
        margin:
            9px 0
            18px;

        max-width:210px;

        font-size:9px;

        line-height:1.55;
    }


    .home-whatsapp-button{
        width:100%;

        min-height:53px;

        padding:
            0 11px;

        gap:8px;

        border-radius:10px;

        font-size:8px;
    }


    .home-whatsapp-button-icon svg{
        width:22px;
        height:22px;
    }


    .home-whatsapp-button b{
        font-size:15px;
    }


    /* PHONE */

    .home-whatsapp-phone-wrap{
        right:-14px;
        bottom:-105px;
    }


    .home-whatsapp-phone{
        width:130px;
        height:280px;

        border-width:3px;

        border-radius:27px;

        transform:
            rotate(9deg);
    }


    .home-whatsapp-notch{
        width:48px;
        height:13px;
    }


    .home-whatsapp-screen{
        border-radius:20px;
    }


    .home-whatsapp-app{
        width:50px;
        height:50px;

        margin-bottom:12px;

        border-radius:14px;
    }


    .home-whatsapp-app svg{
        width:32px;
        height:32px;
    }


    .home-whatsapp-screen strong{
        font-size:8px;

        letter-spacing:1px;
    }


    .home-whatsapp-screen small{
        font-size:5px;

        letter-spacing:1px;
    }

}


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

@media(max-width:380px){

    .home-payment-content h2{
        font-size:29px;
    }


    .home-payment-box{
        padding-left:14px;
        padding-right:14px;
    }


    .home-whatsapp-content{
        width:70%;
    }


    .home-whatsapp-content h2{
        font-size:26px;
    }


    .home-whatsapp-button{
        font-size:7px;
    }


    .home-whatsapp-phone{
        width:115px;
        height:260px;
    }

}
/* SANTE HALLOWEEN START — additive seasonal overlay only */
#sb-halloween .sb-hw-stage{position:fixed;inset:0;z-index:9998;pointer-events:none;display:block;max-width:none;}
#sb-halloween .sb-hw-stage[hidden]{display:none;}
#sb-halloween .sb-hw-controls{position:fixed;right:14px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:9999;display:flex;gap:6px;align-items:center;max-width:calc(100vw - 28px);}
#sb-halloween .sb-hw-controls button{appearance:none;width:auto;min-height:36px;margin:0;padding:8px 12px;border:1px solid #b59a655e;border-radius:30px;background:#231d24f2;color:#e2cda5;font-family:"DM Sans",sans-serif;font-size:11px;line-height:1.4;font-weight:500;letter-spacing:.3px;cursor:pointer;box-shadow:0 3px 15px #00000015;}
#sb-halloween .sb-hw-controls button:focus-visible{outline:2px solid #c4a66b;outline-offset:3px;}
@media(pointer:coarse){#sb-halloween .sb-hw-controls button{min-height:44px;}}
@media print{#sb-halloween{display:none!important;}}
/* SANTE HALLOWEEN END */

/* SANTE HALLOWEEN NIGHT — seasonal colors and decorations */
html.sb-halloween-night{color-scheme:dark;}
html.sb-halloween-night body{background:#0d0b0f!important;color:#e9ddce!important;}
.sb-halloween-night :is(.top-header,.mobile-menu,.language-dropdown,.mobile-bottom-nav){background:#141016!important;color:#e9d5b3!important;border-color:#b48a4940!important;}
.sb-halloween-night :is(.main-nav a,.logo,.language-current,.mobile-menu a,.mobile-bottom-item){color:#e8d3b0!important;}
.sb-halloween-night :is(.logo img,.footer-brand img){filter:drop-shadow(0 0 1px #d3ac73);}
.sb-halloween-night :is(.home-services,.sante-intro,.home-prices,.home-why,.home-results,.home-payment,.home-booking,.site-footer,.footer,.hero-bottom){background:#100d13!important;color:#e9ddce!important;}
.sb-halloween-night :is(section,footer){position:relative;}
.sb-halloween-night :is(section,footer) :is(h1,h2,h3,h4,strong,b){color:#f0dfc2;}
.sb-halloween-night :is(section,footer) p{color:#c7b8a9;}
.sb-halloween-night :is(.home-service-info,.home-service-card,.home-price-item,.home-why-item,.home-payment-inner,.home-payment-card,.home-booking-inner){background:#1c1520!important;border-color:#ac7f4438!important;color:#dfc9a4!important;}
.sb-halloween-night :is(.home-service-more,.sante-intro-kicker,.home-prices-kicker,.home-payment-kicker){color:#d9a35e!important;}
.sb-halloween-night :is(.header-booking,.hero-button,.sante-intro-button,.home-booking-button){background:linear-gradient(110deg,#d9ac69,#aa733c)!important;color:#1c1210!important;}
.sb-halloween-night .hero-bottom:before,.sb-halloween-night .hero-bottom:after{background:#100d13!important;}
.sb-halloween-night .home-editorial-overlay{background:linear-gradient(90deg,rgba(13,8,17,.8),rgba(17,9,21,.35))!important;}
.sb-halloween-night :is(.home-editorial-content h1,.home-editorial-content span){color:#f1dfc0!important;}
.sb-halloween-night .home-editorial-script span{color:#d2b17f!important;}
.sb-halloween-night footer{background:#0b090d!important;color:#d6c2a3!important;}
.sb-halloween-night footer a{color:#d6c2a3!important;}
.sb-halloween-night .footer-legal{border-color:#b48a4933!important;}
.sb-halloween-night .mobile-menu-btn span{background:#e6cd9e!important;}
.sb-hw-decor{position:absolute;pointer-events:none;z-index:3;right:22px;top:20px;width:90px;height:85px;opacity:.92;}
.sb-hw-pumpkin{position:absolute;width:56px;height:44px;right:0;bottom:0;border-radius:44% 44% 43% 43%;background:repeating-linear-gradient(90deg,#6b301e 0%,#c16c2b 15%,#e39b43 25%,#9d4823 35%,#db8b36 50%);box-shadow:inset 0 -8px 10px #4a1b1c88,0 0 24px #c16c2b1a;transform:rotate(8deg);}
.sb-hw-pumpkin:before{content:"";position:absolute;width:8px;height:13px;left:24px;top:-10px;border-radius:5px 2px 0 0;background:#7a7042;transform:rotate(14deg);}
.sb-hw-pumpkin:after{content:"";position:absolute;left:12px;top:13px;width:33px;height:23px;background:#ffe2a3;clip-path:polygon(0 30%,19% 0,31% 33%,0 30%,69% 33%,81% 0,100% 30%,69% 33%,50% 40%,60% 55%,40% 55%,50% 40%,7% 66%,28% 78%,39% 67%,51% 83%,64% 67%,76% 78%,94% 64%,80% 96%,21% 96%,7% 66%);filter:drop-shadow(0 0 4px #ffce70);}
.sb-hw-pumpkin.small{right:47px;bottom:-2px;transform:rotate(-12deg) scale(.68);transform-origin:right bottom;}
.sb-hw-bat{position:absolute;right:13px;top:1px;width:58px;height:24px;background:#a98862;opacity:.55;clip-path:polygon(0 8%,17% 24%,31% 3%,41% 47%,45% 19%,50% 32%,55% 19%,59% 47%,69% 3%,83% 24%,100% 8%,89% 77%,73% 62%,63% 91%,51% 76%,37% 91%,27% 62%,11% 77%);}
.sb-hw-decor.left{right:auto;left:22px;transform:scaleX(-1);}
.sb-halloween-night section:nth-of-type(even)>.sb-hw-decor{top:auto;bottom:22px;}
html:not(.sb-halloween-night) .sb-hw-decor{display:none;}
@media(max-width:600px){.sb-hw-decor{right:10px;top:12px;transform:scale(.68);transform-origin:right top;}.sb-hw-decor.left{left:10px;transform:scale(-.68,.68);transform-origin:left top;}.sb-halloween-night .home-editorial-hero>.sb-hw-decor{top:18px;}}
.sb-halloween-night body>section:not(.home-editorial-hero){background:#100d13!important;}
.sb-halloween-night :is(.why-sante,.home-payment-contact,.home-booking-cta,.sante-footer){background:#100d13!important;color:#ead8bd!important;}
.sb-halloween-night :is(.why-sante-card,.why-sante-item,.home-payment-content,.home-booking-content,.home-payment-contact-inner){background:#1b1420!important;color:#e7d5b8!important;border-color:#b18a4933!important;}
.sb-halloween-night :is(.hero-bottom-inner,.benefit-grid,.home-prices-heading,.home-services-heading,.home-results-heading){background:transparent!important;}
.sb-halloween-night :is(.home-booking-cta,.home-payment-contact):before,.sb-halloween-night :is(.home-booking-cta,.home-payment-contact):after{opacity:.16!important;}
.sb-halloween-night :is(.benefit-item p,.why-sante p,.home-payment-contact p,.home-booking-cta p){color:#d5c3ae!important;}

/* Gentle roaming ghosts — decorative and click-through */
#sb-halloween .sb-hw-ghosts{position:fixed;inset:95px 0 150px;z-index:9997;pointer-events:none;overflow:hidden;}
#sb-halloween .sb-hw-ghost{position:absolute;left:0;top:15%;display:block;width:38px;height:49px;border-radius:48% 48% 8% 8%;background:radial-gradient(ellipse at 34% 24%,#fff7e9,#e5d2b3 65%,#c8b28b);opacity:.7;filter:drop-shadow(0 0 10px #e4cd9d33);clip-path:polygon(0 0,100% 0,100% 100%,84% 88%,68% 100%,50% 88%,33% 100%,17% 88%,0 100%);animation:sb-hw-roam 27s ease-in-out infinite alternate;}
#sb-halloween .sb-hw-ghost:before{content:"";position:absolute;width:5px;height:8px;left:10px;top:17px;background:#352b3c;border-radius:50%;box-shadow:14px 0 #352b3c;}
#sb-halloween .sb-hw-ghost b{position:absolute;left:16px;top:30px;width:6px;height:8px;border-radius:50%;background:#56414a;}
#sb-halloween .ghost-b{top:58%;width:29px;height:38px;animation-duration:34s;animation-delay:-19s;opacity:.48;}
#sb-halloween .ghost-b:before{left:6px;top:12px;box-shadow:12px 0 #352b3c;}
#sb-halloween .ghost-b b{left:12px;top:25px;width:5px;height:6px;}
#sb-halloween .ghost-c{top:35%;animation-duration:41s;animation-delay:-29s;opacity:.38;}
@keyframes sb-hw-roam{0%{transform:translate(8vw,0) rotate(-9deg);}25%{transform:translate(30vw,30px) rotate(7deg);}50%{transform:translate(52vw,-25px) rotate(-7deg);}75%{transform:translate(72vw,40px) rotate(9deg);}100%{transform:translate(86vw,-10px) rotate(-6deg);}}
html:not(.sb-halloween-night) #sb-halloween .sb-hw-ghosts{display:none;}
@media(prefers-reduced-motion:reduce){#sb-halloween .sb-hw-ghost{animation:none;left:12%;}#sb-halloween .ghost-b{left:78%;}#sb-halloween .ghost-c{left:52%;}}
@media print{#sb-halloween .sb-hw-ghosts{display:none;}}