```css
/* ========================================
   GLOBAL RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;

    font-family: "Montserrat", sans-serif;

    color: #414238;
    background: #f7f3ec;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    -webkit-tap-highlight-color: transparent;
}


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

.spa-header {
    width: 100%;
    min-height: 85px;

    padding: 20px clamp(20px, 7vw, 100px);

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

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid #e9e2d8;

    position: relative;
    z-index: 10;
}

.spa-logo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.logo-main {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(25px, 3vw, 30px);

    letter-spacing: clamp(3px, 0.5vw, 5px);

    color: #555746;
}

.logo-sub {
    margin-top: -3px;

    font-size: 8px;

    letter-spacing: 3px;

    color: #a08c72;
}

.spa-nav {
    display: flex;

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

    gap: clamp(15px, 3vw, 35px);

    flex-wrap: wrap;
}

.spa-nav a {
    text-decoration: none;

    color: #5e5d52;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1px;

    transition: 0.25s ease;
}

.spa-nav a:hover {
    color: #a08460;
}


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

.spa-hero {
    width: 100%;
    min-height: min(750px, 90vh);

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

    text-align: center;

    padding: clamp(70px, 10vw, 130px) 20px;

    background:
        linear-gradient(
            rgba(247, 243, 236, 0.78),
            rgba(247, 243, 236, 0.92)
        ),
        radial-gradient(
            circle at center,
            #e7ddce,
            #f7f3ec 65%
        );
}

.spa-hero-content {
    width: 100%;
    max-width: 850px;

    margin: auto;
}

.hero-small-title {
    display: block;

    font-size: clamp(8px, 1.5vw, 11px);

    letter-spacing: clamp(2px, 0.7vw, 5px);

    color: #9a8060;

    font-weight: 600;
}

.spa-hero h1 {
    margin: clamp(18px, 3vw, 28px) 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 9vw, 100px);

    line-height: 0.9;

    font-weight: 400;

    color: #414238;
}

.spa-hero p {
    width: 100%;
    max-width: 580px;

    margin: 0 auto 35px;

    padding: 0 10px;

    font-size: clamp(13px, 1.7vw, 15px);

    line-height: 1.8;

    color: #77756c;
}

.spa-button {
    display: inline-flex;

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

    min-height: 50px;

    padding: 15px 30px;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 600;

    color: white;

    background: #6d705b;

    border: 1px solid #6d705b;

    transition: 0.3s ease;
}

.spa-button:hover {
    background: #555746;

    transform: translateY(-2px);
}


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

.spa-services {
    width: 100%;

    padding: clamp(70px, 10vw, 120px)
             clamp(20px, 7vw, 100px);

    background: #ffffff;
}

.section-heading {
    width: 100%;
    max-width: 650px;

    margin: 0 auto clamp(40px, 6vw, 65px);

    text-align: center;
}

.section-heading span,
.section-label {
    font-size: 10px;

    letter-spacing: 4px;

    color: #9a8060;

    font-weight: 600;
}

.section-heading h2 {
    margin: 15px 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(42px, 6vw, 60px);

    line-height: 1;

    font-weight: 400;
}

.section-heading p {
    color: #77756c;

    font-size: 14px;

    line-height: 1.8;
}

.services-grid {
    width: 100%;
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: clamp(15px, 2vw, 25px);
}

.service-card {
    width: 100%;

    padding: clamp(30px, 4vw, 45px)
             clamp(18px, 2vw, 28px);

    text-align: center;

    background: #f8f5ef;

    border: 1px solid #ece5db;

    transition: 0.3s ease;
}

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

    box-shadow:
        0 15px 35px rgba(60, 50, 35, 0.08);
}

.service-icon {
    width: 55px;
    height: 55px;

    margin: 0 auto 20px;

    display: flex;

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

    border-radius: 50%;

    background: #e4dacb;

    color: #85745d;

    font-size: 22px;
}

.service-card h3 {
    margin-bottom: 12px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(25px, 3vw, 30px);

    font-weight: 500;
}

.service-card p {
    color: #77756c;

    font-size: 12px;

    line-height: 1.8;
}


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

.spa-about {
    width: 100%;
    min-height: 600px;

    padding:
        clamp(70px, 10vw, 120px)
        clamp(20px, 7vw, 100px);

    display: flex;

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

    background: #e9e1d5;
}

.about-content {
    width: 100%;
    max-width: 680px;

    text-align: center;
}

.about-content h2 {
    margin: 15px 0 25px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(48px, 7vw, 70px);

    line-height: 0.95;

    font-weight: 400;
}

.about-content p {
    margin-bottom: 15px;

    color: #706d64;

    font-size: clamp(13px, 1.7vw, 14px);

    line-height: 1.9;
}


/* ========================================
   CONTACT
======================================== */

.spa-contact {
    width: 100%;
    min-height: 650px;

    display: flex;

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

    padding:
        clamp(60px, 10vw, 100px)
        15px;

    background:
        linear-gradient(
            135deg,
            #f7f3ec,
            #eee7dc
        );
}

.spa-contact-card {
    width: 100%;
    max-width: 720px;

    padding:
        clamp(40px, 7vw, 65px)
        clamp(18px, 6vw, 50px);

    text-align: center;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(120, 100, 70, 0.15);

    border-radius: clamp(16px, 3vw, 25px);

    box-shadow:
        0 20px 60px rgba(70, 55, 35, 0.12);
}

.spa-contact-label {
    display: block;

    margin-bottom: 12px;

    font-size: clamp(9px, 1.5vw, 11px);

    font-weight: 700;

    letter-spacing: clamp(2px, 0.7vw, 4px);

    color: #9a8060;
}

.spa-contact-card h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 7vw, 58px);

    line-height: 1;

    font-weight: 500;

    color: #3f4035;
}

.spa-contact-text {
    width: 100%;
    max-width: 520px;

    margin:
        20px auto
        clamp(28px, 5vw, 38px);

    color: #77746b;

    font-size: clamp(12px, 1.8vw, 14px);

    line-height: 1.8;
}


/* ========================================
   CONTACT BUTTONS
======================================== */

.spa-contact-info {
    width: 100%;
    max-width: 500px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.spa-contact-item {
    width: 100%;

    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 15px 18px;

    text-align: left;

    text-decoration: none;

    color: #3f4035;

    background: #f8f6f1;

    border: 1px solid #e8e1d6;

    border-radius: 14px;

    transition: 0.25s ease;
}

.spa-contact-item:hover {
    transform: translateY(-3px);

    background: #f1ece3;

    box-shadow:
        0 8px 25px rgba(70, 55, 35, 0.08);
}

.spa-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #ded4c3;

    font-size: 20px;
}

.spa-contact-item small {
    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #9a8060;
}

.spa-contact-item strong {
    display: block;

    font-size: clamp(13px, 2vw, 15px);

    font-weight: 600;

    word-break: break-word;
}


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

.spa-contact-services {
    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;

    color: #8d806d;

    font-size: 12px;

    letter-spacing: 1px;
}


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

.spa-footer {
    width: 100%;

    padding:
        55px 20px
        35px;

    text-align: center;

    background: #3f4035;

    color: #e8e1d6;
}

.footer-logo {
    align-items: center;
}

.footer-logo .logo-main {
    color: #eee7dc;
}

.footer-logo .logo-sub {
    color: #bca98e;
}

.spa-footer > p {
    margin-top: 15px;

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    color: #d7cbbb;
}

.footer-contact {
    margin-top: 20px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 12px;

    font-size: 11px;

    letter-spacing: 1px;
}

.footer-contact a {
    color: #eee7dc;

    text-decoration: none;
}

.footer-contact a:hover {
    color: #cbb99e;
}

.copyright {
    margin-top: 30px !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 9px !important;

    color: #aaa79c !important;

    letter-spacing: 1px;
}


/* ========================================
   LARGE DESKTOP
   1400px+
======================================== */

@media (min-width: 1400px) {

    .spa-header {
        padding-left: 8%;
        padding-right: 8%;
    }

    .spa-services {
        padding-left: 8%;
        padding-right: 8%;
    }

    .spa-hero h1 {
        font-size: 105px;
    }

    .services-grid {
        max-width: 1200px;
    }
}


/* ========================================
   TABLET LANDSCAPE
   901px - 1100px
======================================== */

@media (max-width: 1100px) {

    .spa-header {
        padding-left: 5%;
        padding-right: 5%;
    }

    .spa-services {
        padding-left: 5%;
        padding-right: 5%;
    }

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

    .service-card {
        min-height: 250px;

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


/* ========================================
   TABLET PORTRAIT
   601px - 900px
======================================== */

@media (max-width: 900px) {

    .spa-header {
        min-height: auto;

        padding-top: 18px;
        padding-bottom: 18px;

        flex-direction: column;

        gap: 15px;
    }

    .spa-logo {
        align-items: center;
    }

    .spa-nav {
        width: 100%;
    }

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

    .spa-hero h1 {
        font-size: clamp(55px, 10vw, 80px);
    }

    .spa-about {
        min-height: 520px;
    }
}


/* ========================================
   MOBILE
   481px - 600px
======================================== */

@media (max-width: 600px) {

    .spa-header {
        padding:
            16px 15px;
    }

    .spa-nav {
        gap: 12px 18px;
    }

    .spa-nav a {
        font-size: 10px;
    }

    .spa-hero {
        min-height: 600px;

        padding:
            70px 15px;
    }

    .spa-hero h1 {
        font-size: clamp(48px, 14vw, 65px);
    }

    .spa-hero p {
        padding: 0 5px;
    }

    .spa-button {
        width: 100%;
        max-width: 300px;
    }

    .spa-services {
        padding:
            70px 15px;
    }

    .services-grid {
        grid-template-columns: 1fr;

        max-width: 450px;
    }

    .service-card {
        min-height: auto;

        padding: 35px 25px;
    }

    .spa-about {
        min-height: 500px;

        padding:
            70px 20px;
    }

    .about-content h2 {
        font-size: clamp(45px, 13vw, 58px);
    }

    .spa-contact {
        min-height: auto;

        padding:
            50px 10px;
    }

    .spa-contact-card {
        padding:
            42px 15px;
    }

    .spa-contact-card h2 {
        font-size: clamp(38px, 11vw, 50px);
    }

    .spa-contact-item {
        min-height: 72px;

        gap: 12px;

        padding: 13px;
    }

    .spa-icon {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }

    .spa-contact-item small {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .spa-contact-item strong {
        font-size: 13px;
    }

    .spa-footer {
        padding:
            45px 15px
            30px;
    }
}


/* ========================================
   SMALL PHONES
   320px - 480px
======================================== */

@media (max-width: 480px) {

    .logo-main {
        font-size: 25px;

        letter-spacing: 3px;
    }

    .logo-sub {
        font-size: 7px;

        letter-spacing: 2px;
    }

    .spa-nav {
        gap: 10px 14px;
    }

    .spa-nav a {
        font-size: 9px;

        letter-spacing: 0.5px;
    }

    .spa-hero {
        min-height: 570px;

        padding:
            60px 12px;
    }

    .hero-small-title {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .spa-hero h1 {
        font-size: 47px;

        line-height: 0.95;
    }

    .spa-hero p {
        font-size: 12px;

        line-height: 1.7;
    }

    .spa-button {
        min-height: 48px;

        padding:
            14px 20px;

        font-size: 9px;
    }

    .section-heading h2 {
        font-size: 43px;
    }

    .section-heading p {
        font-size: 12px;
    }

    .service-card h3 {
        font-size: 27px;
    }

    .service-card p {
        font-size: 11px;
    }

    .about-content h2 {
        font-size: 47px;
    }

    .about-content p {
        font-size: 12px;

        line-height: 1.8;
    }

    .spa-contact-card {
        border-radius: 16px;

        padding:
            38px 12px;
    }

    .spa-contact-label {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .spa-contact-card h2 {
        font-size: 37px;
    }

    .spa-contact-text {
        font-size: 12px;
    }

    .spa-contact-item {
        gap: 10px;

        padding:
            12px 10px;
    }

    .spa-contact-item strong {
        font-size: 12px;
    }

    .spa-contact-services {
        font-size: 10px;

        gap: 6px;
    }

    .footer-contact {
        font-size: 9px;
    }
}


/* ========================================
   VERY SMALL PHONES
   Below 360px
======================================== */

@media (max-width: 359px) {

    .spa-nav {
        gap: 8px 10px;
    }

    .spa-nav a {
        font-size: 8px;
    }

    .spa-hero h1 {
        font-size: 42px;
    }

    .spa-contact-card h2 {
        font-size: 34px;
    }

    .spa-contact-item strong {
        font-size: 11px;
    }
}


/* ========================================
   TOUCH DEVICES
======================================== */

@media (hover: none) {

    .service-card:hover,
    .spa-contact-item:hover,
    .spa-button:hover {
        transform: none;
        box-shadow: none;
    }

}


/* ========================================
   REDUCE MOTION
======================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}
```