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

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

html {
    scroll-behavior: smooth;
}

body {
    background: hsl(40, 43%, 95%);
    color: #171512;
    font-family: "Inter", sans-serif;
}

body.menu-open {
    overflow: hidden;
}

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

button {
    font-family: inherit;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 118px;

    z-index: 1000;

    background: rgba(247, 243, 235, 0.96);

    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(12px);

    transition:
        height 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* Navbar when scrolling */

.navbar.scrolled {
    height: 88px;

    background: rgba(247, 243, 235, 0.98);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}


/* =========================================
   NAV CONTAINER
========================================= */

.nav-container {
    width: 100%;
    height: 100%;

    padding: 0 60px;

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


/* =========================================
   BRAND
========================================= */

.brand {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}


/* Logo */

.brand-logo {
    width: 73px;
    height: 73px;

    object-fit: contain;

    display: block;
}


/* Brand text */

.brand-name {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.brand-name span:first-child {
    font-family: "Cormorant Garamond", serif;

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

    letter-spacing: 3px;
}

.brand-name span:last-child {
    margin-top: 5px;

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

    letter-spacing: 4px;
}


/* =========================================
   DESKTOP NAV
========================================= */

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 37px;
}


/* Normal nav links */

.desktop-nav > a:not(.whatsapp-button) {
    position: relative;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #171512;

    transition: opacity 0.3s ease;
}
/* hover color */
.desktop-nav > a:not(.whatsapp-button):hover{
    color: #163f2b;
}


/* Underline animation */

.desktop-nav > a:not(.whatsapp-button)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #171512;

    transition: width 0.3s ease;
}

.desktop-nav > a:not(.whatsapp-button):hover::after {
    width: 100%;
}


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

.whatsapp-button {
    min-width: 280px;
    height: 50px;

    padding: 0 21px;

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

    gap: 25px;

    background: #bd452e;
    color: #171512;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.whatsapp-button:hover {
    background: #171512;
    color: #f7f3eb;

    transform: translateY(-2px);
}

.arrow {
    font-size: 19px;

    line-height: 1;

    transition: transform 0.3s ease;
}

.whatsapp-button:hover .arrow {
    transform: translate(3px, -3px);
}


/* =========================================
   MOBILE MENU BUTTON
========================================= */

.menu-button {
    display: none;

    width: 46px;
    height: 46px;

    border: none;
    background: transparent;

    cursor: pointer;

    position: relative;

    z-index: 1100;
}


/* Hamburger lines */

.menu-button span {
    position: absolute;

    left: 10px;

    width: 26px;
    height: 1px;

    background: #171512;

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

.menu-button span:nth-child(1) {
    top: 14px;
}

.menu-button span:nth-child(2) {
    top: 22px;
}

.menu-button span:nth-child(3) {
    top: 30px;
}


/* =========================================
   HAMBURGER → X
========================================= */

.menu-button.active span:nth-child(1) {
    top: 22px;

    transform: rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    top: 22px;

    transform: rotate(-45deg);
}


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

.mobile-menu {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    z-index: 1050;

    background: #f7f3eb;

    visibility: hidden;
    opacity: 0;

    transform: translateY(-30px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0.4s ease;
}


/* Open state */

.mobile-menu.active {
    visibility: visible;

    opacity: 1;

    transform: translateY(0);
}


/* =========================================
   MOBILE MENU INNER
========================================= */

.mobile-menu-inner {
    height: 100%;

    padding: 150px 35px 35px;

    display: flex;
    flex-direction: column;
}


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

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

    border-top: 1px solid rgba(0, 0, 0, 0.15);
}


/* Mobile links */

.mobile-link {
    width: 100%;

    padding: 22px 5px;

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

    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.mobile-link span:last-child {
    font-family: "Inter", sans-serif;

    font-size: 10px;

    letter-spacing: 2px;

    opacity: 0.5;
}

.mobile-link:hover {
    padding-left: 15px;
}


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

.mobile-whatsapp {
    width: 100%;

    min-height: 62px;

    margin-top: 35px;

    padding: 0 22px;

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

    background: #bd452e;

    font-size: 12px;

    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.mobile-whatsapp:hover {
    background: #171512;
    color: #f7f3eb;
}

.mobile-whatsapp span:last-child {
    font-size: 20px;
}


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

.mobile-menu-footer {
    margin-top: auto;

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

    gap: 20px;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0.55;
}


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

.hero {
    min-height: 100vh;

    padding-top: 118px;

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

    text-align: center;
}

.hero-content {
    max-width: 800px;

    padding: 40px;
}

.eyebrow {
    margin-bottom: 20px;

    font-size: 11px;

    letter-spacing: 5px;
}

.hero h1 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(55px, 8vw, 110px);

    font-weight: 400;

    line-height: 0.9;
}

.hero h1 em {
    font-style: italic;
}

.hero p:last-child {
    max-width: 500px;

    margin: 30px auto 0;

    font-size: 14px;

    line-height: 1.8;

    opacity: 0.65;
}


/* =========================================
   DEMO SECTIONS
========================================= */

.demo-section {
    min-height: 80vh;

    padding: 100px 40px;

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

    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.demo-section h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 7vw, 90px);

    font-weight: 400;
}


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

@media (max-width: 1100px) {

    .nav-container {
        padding: 0 35px;
    }

    .desktop-nav {
        gap: 22px;
    }

    .whatsapp-button {
        min-width: 230px;
    }

}


/* =========================================
   MOBILE / TABLET NAVIGATION
========================================= */

@media (max-width: 850px) {

    .navbar {
        height: 90px;
    }

    .navbar.scrolled {
        height: 78px;
    }

    .nav-container {
        padding: 0 22px;
    }

    .brand {
        gap: 12px;
    }

    .brand-logo {
        width: 57px;
        height: 57px;
    }

    .brand-name span:first-child {
        font-size: 21px;

        letter-spacing: 2px;
    }

    .brand-name span:last-child {
        font-size: 7px;

        letter-spacing: 3px;
    }

    /* Hide desktop nav */

    .desktop-nav {
        display: none;
    }

    /* Show hamburger */

    .menu-button {
        display: block;
    }

    .hero {
        padding-top: 90px;
    }

}


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

@media (max-width: 500px) {

    .mobile-menu-inner {
        padding: 125px 22px 25px;
    }

    .mobile-link {
        padding: 18px 3px;

        font-size: 31px;
    }

    .mobile-whatsapp {
        margin-top: 25px;

        min-height: 58px;

        font-size: 10px;
    }

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

        gap: 8px;

        margin-top: 30px;
    }

    .hero-content {
        padding: 25px;
    }

}


/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 360px) {

    .brand-name span:first-child {
        font-size: 18px;
    }

    .brand-name span:last-child {
        font-size: 6px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
    }

    .mobile-link {
        font-size: 27px;
    }

}

/* =========================================
   SHRI MAKEOVERS HERO
========================================= */

.hero-section {

    position: relative;

    min-height: 100vh;

    padding-top: 118px;

    overflow: hidden;

    background: #f7f3eb;

    isolation: isolate;
}


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

.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -3;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(189, 69, 46, 0.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(22, 63, 43, 0.08),
            transparent 35%
        ),

        #f7f3eb;
}


/* Organic animated blobs */

.gradient-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    opacity: 0.45;

    will-change: transform;

    mix-blend-mode: multiply;
}


/* Terracotta */

.orb-one {

    width: 420px;
    height: 420px;

    background: rgba(189, 69, 46, 0.25);

    top: -120px;
    left: -80px;

    animation:
        moveOrbOne
        18s
        ease-in-out
        infinite
        alternate;
}


/* Green */

.orb-two {

    width: 500px;
    height: 500px;

    background: rgba(22, 63, 43, 0.16);

    right: -180px;
    top: 10%;

    animation:
        moveOrbTwo
        22s
        ease-in-out
        infinite
        alternate;
}


/* Warm beige */

.orb-three {

    width: 350px;
    height: 350px;

    background: rgba(211, 178, 153, 0.35);

    left: 35%;
    bottom: -180px;

    animation:
        moveOrbThree
        20s
        ease-in-out
        infinite
        alternate;
}


/* Soft green */

.orb-four {

    width: 280px;
    height: 280px;

    background: rgba(150, 170, 145, 0.18);

    right: 35%;
    top: 35%;

    animation:
        moveOrbFour
        25s
        ease-in-out
        infinite
        alternate;
}


/* =========================================
   ORB ANIMATIONS
========================================= */

@keyframes moveOrbOne {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(180px, 100px)
            scale(1.2);
    }

    100% {
        transform:
            translate(70px, 220px)
            scale(0.9);
    }
}


@keyframes moveOrbTwo {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(-180px, 100px)
            scale(1.15);
    }

    100% {
        transform:
            translate(-80px, -120px)
            scale(0.9);
    }
}


@keyframes moveOrbThree {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(-160px, -100px)
            scale(1.2);
    }

    100% {
        transform:
            translate(140px, -50px)
            scale(0.85);
    }
}


@keyframes moveOrbFour {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(100px, -120px)
            scale(1.3);
    }

    100% {
        transform:
            translate(-100px, 100px)
            scale(0.9);
    }
}


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

.grain {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.06;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");

}


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

.hero-container {

    width: min(1400px, calc(100% - 100px));

    min-height: calc(100vh - 118px);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    align-items: center;

    gap: 70px;
}


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

.hero-text {

    padding-top: 10px;

    position: relative;

    z-index: 5;
}


/* =========================================
   EYEBROW
========================================= */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 28px;

    color: #bd452e;

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 500;
}


.eyebrow-line {

    width: 40px;

    height: 1px;

    background: #bd452e;
}


/* =========================================
   MAIN HEADING
========================================= */

.hero-title {

    margin: 0;

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

    font-size:
        clamp(
            70px,
            6.5vw,
            105px
        );

    line-height: 0.82;

    font-weight: 400;

    letter-spacing: -4px;

    color: #171512;
}


.accent-word {

    color: #bd452e;

    font-style: italic;

    font-weight: 400;
}


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

.hero-description {

    max-width: 480px;

    margin-top: 45px;

    font-size: 15px;

    line-height: 1.75;

    color: #45413c;
}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 32px;

    margin-top: 38px;
}


/* Primary */

.hero-primary-btn {

    min-width: 240px;

    height: 59px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #bd452e;

    color: #fff;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.hero-primary-btn:hover {

    background: #163f2b;

    transform:
        translateY(-3px);
}


.btn-arrow {

    font-size: 20px;

    transition:
        transform 0.3s ease;
}


.hero-primary-btn:hover .btn-arrow {

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


/* Secondary */

.hero-secondary-btn {

    display: flex;

    align-items: center;

    gap: 18px;

    font-size: 12px;

    letter-spacing: 2px;

    color: #171512;

    transition:
        color 0.3s ease;
}


.hero-secondary-btn:hover {

    color: #163f2b;
}


.down-arrow {

    font-size: 20px;

    color: #bd452e;

    animation:
        arrowBounce
        1.5s
        ease-in-out
        infinite;
}


@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* =========================================
   PAGINATION
========================================= */

.hero-pagination {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 85px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #45413c;
}


.pagination-line {

    width: 125px;

    height: 1px;

    background: rgba(23, 21, 18, 0.2);

    position: relative;

    overflow: hidden;
}


.pagination-line::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 30%;

    height: 100%;

    background: #bd452e;

    animation:
        paginationMove
        3s
        ease-in-out
        infinite;
}


@keyframes paginationMove {

    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(300%);
    }

    100% {
        transform: translateX(300%);
    }

}


/* =========================================
   RIGHT VISUAL
========================================= */

.hero-visual {

    position: relative;

    height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================
   MAIN IMAGE FRAME
========================================= */

.main-image-frame {

    position: relative;

    width: min(650px, 100%);

    height: 650px;

    background: rgba(211, 178, 153, 0.25);

    padding: 17px;

    animation:
        frameFloat
        8s
        ease-in-out
        infinite;
}


@keyframes frameFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* Inner border */

.image-border {

    width: 100%;

    height: 100%;

    border: 1px solid
        rgba(255, 255, 255, 0.7);

    overflow: hidden;

    position: relative;
}


/* Image */

.main-hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);
}


.main-image-frame:hover
.main-hero-image {

    transform:
        scale(1.04);
}


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

.image-label {

    position: absolute;

    bottom: -30px;

    right: 5px;

    font-size: 10px;

    letter-spacing: 3px;

    color: #45413c;
}


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

.small-image-card {

    position: absolute;

    left: -30px;

    bottom: 15px;

    width: 190px;

    height: 190px;

    background: #aeb9a4;

    padding: 0;

    overflow: hidden;

    z-index: 5;

    border: 10px solid #f7f3eb;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.08);

    animation:
        smallCardFloat
        7s
        ease-in-out
        infinite
        alternate;
}


.small-image-card img,
.small-image-card video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s ease;
}


.small-image-card:hover img,
.small-image-card:hover video {

    transform:
        scale(1.08);
}


@keyframes smallCardFloat {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-15px);
    }

}


/* =========================================
   MONOGRAM
========================================= */

.visual-monogram {

    position: absolute;

    top: 45%;

    left: 50%;

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

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 120px;

    color: rgba(255,255,255,0.4);

    pointer-events: none;

    z-index: 2;
}


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

.hero-location {

    position: absolute;

    right: 5.5%;

    bottom: 38px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #45413c;
}


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

.hero-scroll {

    position: absolute;

    left: 5.5%;

    bottom: 38px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 9px;

    letter-spacing: 3px;

    color: #45413c;
}


.scroll-line {

    width: 60px;

    height: 1px;

    background: rgba(23,21,18,0.25);

    position: relative;

    overflow: hidden;
}


.scroll-line::after {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    background: #163f2b;

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


@keyframes scrollLine {

    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }

}


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

@media (max-width: 1100px) {

    .hero-container {

        width:
            calc(100% - 60px);

        gap: 40px;
    }


    .hero-title {

        font-size:
            clamp(
                60px,
                7vw,
                85px
            );
    }


    .hero-visual {

        height: 570px;
    }


    .main-image-frame {

        height: 530px;
    }


    .small-image-card {

        width: 160px;

        height: 160px;

        left: -15px;
    }

}


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

@media (max-width: 850px) {

    .hero-section {

        padding-top: 90px;
    }


    .hero-container {

        width:
            calc(100% - 40px);

        min-height: auto;

        padding-top: 70px;

        padding-bottom: 100px;

        display: flex;

        flex-direction: column;

        gap: 70px;

        align-items: stretch;
    }


    .hero-title {

        font-size:
            clamp(
                58px,
                15vw,
                82px
            );

        letter-spacing:
            -2.5px;
    }


    .hero-description {

        margin-top: 35px;

        font-size: 14px;
    }


    .hero-actions {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }


    .hero-primary-btn {

        width: 230px;
    }


    .hero-pagination {

        margin-top: 55px;
    }


    .hero-visual {

        height: 500px;

        width: 100%;
    }


    .main-image-frame {

        width: 85%;

        height: 470px;

        margin-left: auto;
    }


    .small-image-card {

        width: 150px;

        height: 150px;

        left: 0;

        bottom: 5px;
    }


    .visual-monogram {

        font-size: 90px;
    }


    .hero-location {

        display: none;
    }


    .hero-scroll {

        display: none;
    }

}


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

@media (max-width: 500px) {

    .hero-container {

        width:
            calc(100% - 30px);

        padding-top: 55px;
    }


    .hero-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;

        gap: 12px;
    }


    .eyebrow-line {

        width: 25px;
    }


    .hero-title {

        font-size: 60px;

        line-height: 0.85;
    }


    .hero-description {

        font-size: 13px;

        line-height: 1.7;
    }


    .hero-visual {

        height: 420px;
    }


    .main-image-frame {

        width: 88%;

        height: 400px;

        padding: 10px;
    }


    .small-image-card {

        width: 125px;

        height: 125px;

        border-width: 7px;
    }


    .visual-monogram {

        font-size: 70px;
    }

}


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

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

    .gradient-orb,
    .main-image-frame,
    .small-image-card,
    .down-arrow,
    .pagination-line::after,
    .scroll-line::after {

        animation: none;
    }

}

/* =================================
   LUXURY NAVIGATION
================================== */

.luxury-nav {
    width: 100%;
    height: 86px;

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

    background: #f8f4ec;

    border-top: 1px solid #d8d0c4;
    border-bottom: 1px solid #d8d0c4;

    position: relative;
    z-index: 10;
}


.luxury-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 34px;
}


.luxury-nav-list li {
    margin: 0;
    padding: 0;
}


/* Navigation links */

.luxury-nav-list a {
    font-family: "Cormorant Garamond", Georgia, serif;

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

    letter-spacing: 2px;

    color: #bd3d25;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.3s ease;
}


.luxury-nav-list a:hover {
    color: #8f2818;
}


/* Diamond separators */

.nav-divider {
    color: #111;

    font-family: Georgia, serif;

    font-size: 15px;

    line-height: 1;

    transform: translateY(-1px);
}


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

@media (max-width: 900px) {

    .luxury-nav {
        height: auto;
        min-height: 80px;

        padding: 20px;
    }


    .luxury-nav-list {
        flex-wrap: wrap;

        gap: 16px 22px;
    }


    .luxury-nav-list a {
        font-size: 23px;

        letter-spacing: 1.5px;
    }


    .nav-divider {
        font-size: 11px;
    }

}
/* =========================================================
   SHRI MAKEOVERS — SERVICES SECTION
========================================================= */


.services-header {

    max-width: 500px;

    margin-bottom: 55px;
}


.services-eyebrow {

    display: block;

    margin-bottom: 16px;

    font-size: 8px;

    letter-spacing: 3px;

    color: #163f2b;
}


.services-header h2 {

    margin: 0;

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

    font-size: clamp(55px, 6vw, 82px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -2px;

    color: #171512;
}


.services-header h2 em {

    color: #bd452e;

    font-style: italic;
}

/* =========================================================
   MAIN SERVICES SECTION
========================================================= */
.services-section {
  /* position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 120px 6vw 150px;
  background-color: #f7f2eb;
  display: flex;
  justify-content: center;
  align-items: center; */

  /* .services-section { */

    
    position: relative;

    padding: 150px 7vw 180px;
    display: flex;

    background: #f7f3eb;

    overflow: hidden;
}


/* =========================================================
   SERVICES GRID (2-COLUMN EDITORIAL)
========================================================= */
.services-grid {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 55px;
  row-gap: 80px;
  align-items: start;
}

/* =========================================================
   BASE SERVICE CARD (SPLIT LAYOUT)
========================================================= */
.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding-top: 18px;
  align-items: stretch;
}

/* Staggered vertical shift for second card */
.service-card:nth-child(even) {
  margin-top: 50px;
}

/* Full-width editorial hairline divider */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(23, 21, 18, 0.16);
}

/* =========================================================
   SQUARE IMAGE BOX (LEFT SIDE)
========================================================= */
.service-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e4c2b2 0%, #d8b4a3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(211, 178, 163, 0.5);
}

/* Inner white stroke outline */
.service-image::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  pointer-events: none;
  z-index: 3;
}

/* Centered 'SM' watermark overlay */
.image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 88px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.38);
  z-index: 2;
  pointer-events: none;
}

.image-slot-label {
  position: relative;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(135, 96, 85, 0.75);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 5px;
}

.service-image img,
.service-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-card:hover .service-image img,
.service-card:hover .service-image video {
  transform: scale(1.05);
}

/* =========================================================
   SERVICE DETAILS & TYPOGRAPHY (RIGHT SIDE)
========================================================= */
.service-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

/* Meta Category / Top Arrow */
.service-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #655f58;
}

.meta-arrow {
  font-size: 13px;
  line-height: 1;
  color: #bd452e;
  transition: transform 0.3s ease;
}

.service-card:hover .meta-arrow {
  transform: translate(2px, -2px);
}

/* Titles */
.service-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.service-content h3 {
  margin: 18px 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.5px;
  color: #171512;
}

/* Card Title Color Accent */
.service-card.accent-red .service-content h3 {
  color: #bd452e;
}

/* Description text */
.service-content p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #5c564e;
  max-width: 270px;
}

/* Underline Link */
.service-content a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid #bd452e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #171512;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.service-content a span {
  font-size: 11px;
  line-height: 1;
  color: #171512;
  transition: color 0.3s ease;
}

.service-content a:hover {
  color: #bd452e;
  border-color: #bd452e;
  gap: 9px;
}

.service-content a:hover span {
  color: #bd452e;
}

/* =========================================================
   MEDIA QUERIES
========================================================= */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 60px;
  }

  .service-card:nth-child(even) {
    margin-top: 0;
  }
}

@media (max-width: 580px) {
  .services-section {
    padding: 80px 20px;
  }

  .service-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-details {
    min-height: auto;
  }

  .service-content h3 {
    font-size: 38px;
    margin: 15px 0 12px;
  }
}


/* =========================================================
   SHRI MAKEOVERS — APPROACH / ABOUT SECTION
========================================================= */

.approach-section {

    position: relative;

    width: 100%;

    padding: 110px 7vw 140px;

    background: #f7f3eb;

    overflow: hidden;
}


/* =========================================================
   TOP LINE
========================================================= */

.approach-top-line {

    width: 100%;

    height: 1px;

    margin-bottom: 145px;

    background:
        rgba(23, 21, 18, .18);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.approach-layout {

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    column-gap: 90px;
}


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

.approach-content {

    padding-right: 20px;
}


.approach-eyebrow {

    display: block;

    margin-bottom: 35px;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #526276;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.approach-content h2 {

    max-width: 650px;

    margin: 0;

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

    font-size:
        clamp(65px, 6vw, 94px);

    font-weight: 400;

    line-height: .86;

    letter-spacing: -3px;

    color: #171512;
}


.approach-content h2 em {

    display: block;

    margin-top: 8px;

    color: #bd452e;

    font-style: italic;

    font-weight: 400;
}


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

.approach-content p {

    max-width: 600px;

    margin: 55px 0 0;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.9;

    color: #526276;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.approach-details {

    position: relative;

    padding-left: 65px;

    border-left:
        1px solid rgba(23, 21, 18, .18);
}


/* =========================================================
   DETAIL ITEM
========================================================= */

.detail-item {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 35px;
}


/* =========================================================
   ICON
========================================================= */

.detail-icon {

    width: 25px;

    flex-shrink: 0;

    padding-top: 1px;

    font-size: 28px;

    line-height: 1;

    color: #bd452e;
}


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

.detail-text span {

    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #bd452e;
}


.detail-text p {

    margin: 0;

    font-size: 17px;

    line-height: 1.4;

    color: #171512;
}


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

.reviews-button {

    width: 100%;

    min-height: 64px;

    margin-top: 65px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    gap: 16px;

    border: 1px solid #171512;

    background: transparent;

    color: #171512;

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;

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


.review-star {

    font-size: 25px;

    color: #bd452e;

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


.review-arrow {

    margin-left: auto;

    font-size: 16px;

    transition:
        transform .4s ease;
}


/* =========================================================
   REVIEWS HOVER
========================================================= */

.reviews-button:hover {

    background-color: #163f2b;

    border-color: #163f2b;

    color: #f7f3eb;
}


.reviews-button:hover
.review-star {

    color: #f7f3eb;

    transform: rotate(20deg);
}


.reviews-button:hover
.review-arrow {

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


/* =========================================================
   SUBTLE BACKGROUND MOVEMENT
========================================================= */

.approach-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: 20%;

    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232, 201, 186, .18),
            transparent 70%
        );

    pointer-events: none;

    animation:
        approachGlow 14s
        ease-in-out
        infinite
        alternate;
}


@keyframes approachGlow {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(180px, 80px, 0)
            scale(1.3);

    }

}


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

@media (max-width: 1000px) {

    .approach-section {

        padding:
            90px 5vw
            120px;
    }


    .approach-top-line {

        margin-bottom: 100px;
    }


    .approach-layout {

        column-gap: 50px;
    }


    .approach-details {

        padding-left: 40px;
    }


    .approach-content h2 {

        font-size: 70px;

        letter-spacing: -2px;
    }


    .approach-content p {

        font-size: 15px;
    }

}


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

@media (max-width: 750px) {

    .approach-section {

        padding:
            80px 25px
            100px;
    }


    .approach-top-line {

        margin-bottom: 80px;
    }


    .approach-layout {

        display: flex;

        flex-direction: column;

        gap: 70px;
    }


    .approach-content {

        padding-right: 0;
    }


    .approach-eyebrow {

        margin-bottom: 25px;

        font-size: 9px;
    }


    .approach-content h2 {

        font-size: 58px;

        line-height: .88;

        letter-spacing: -1.5px;
    }


    .approach-content h2 em {

        margin-top: 5px;
    }


    .approach-content p {

        margin-top: 40px;

        max-width: 500px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* RIGHT */

    .approach-details {

        padding-left: 0;

        padding-top: 45px;

        border-left: none;

        border-top:
            1px solid rgba(23, 21, 18, .18);
    }


    .detail-item {

        gap: 20px;

        margin-bottom: 30px;
    }


    .detail-icon {

        font-size: 25px;
    }


    .detail-text span {

        font-size: 9px;
    }


    .detail-text p {

        font-size: 15px;
    }


    .reviews-button {

        margin-top: 50px;

        min-height: 60px;

        padding: 0 18px;

        font-size: 9px;
    }

}


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

@media (max-width: 450px) {

    .approach-section {

        padding:
            70px 20px
            90px;
    }


    .approach-top-line {

        margin-bottom: 65px;
    }


    .approach-content h2 {

        font-size: 51px;

        letter-spacing: -1px;
    }


    .approach-content p {

        font-size: 13px;

        line-height: 1.7;
    }


    .detail-item {

        gap: 16px;
    }


    .detail-text p {

        font-size: 14px;
    }


    .reviews-button {

        font-size: 8px;

        letter-spacing: .06em;
    }


    .review-star {

        font-size: 22px;
    }

}


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

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

    .approach-section::before {

        animation: none;
    }

}


/* =========================================================
   SHRI MAKEOVERS — VISIT / CONTACT SECTION
========================================================= */

.visit-section {

    position: relative;

    width: 100%;

    min-height: 760px;

    padding: 115px 7vw;

    background: #211e1c;

    color: #f7f3eb;

    overflow: hidden;
}


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

.visit-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -300px;

    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(163, 182, 158, .20),
            transparent 68%
        );

    filter: blur(20px);

    animation:
        visitGlowOne
        14s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


.visit-section::after {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    right: -180px;

    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(189, 69, 46, .15),
            transparent 68%
        );

    filter: blur(25px);

    animation:
        visitGlowTwo
        16s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


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

@keyframes visitGlowOne {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(350px, 220px, 0)
            scale(1.4);

    }

}


@keyframes visitGlowTwo {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(-250px, -180px, 0)
            scale(1.35);

    }

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.visit-container {

    position: relative;

    z-index: 2;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 120px;

    align-items: center;
}


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

.visit-image {

    position: relative;

    width: 100%;

    height: 530px;

    background: #879782;

    overflow: hidden;

    border: 1px solid
        rgba(220, 230, 218, .25);
}


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

.visit-image img,
.visit-image video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    opacity: .9;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1),
        opacity .5s ease;
}


.visit-image:hover img,
.visit-image:hover video {

    transform: scale(1.05);

    opacity: 1;
}


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

.visit-image-frame {

    position: absolute;

    inset: 16px;

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

    pointer-events: none;

    z-index: 2;
}


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

.visit-image-label {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

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

    font-size: 70px;

    font-style: italic;

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

    pointer-events: none;

    transition:
        opacity .5s ease;
}


.visit-image:hover
.visit-image-label {

    opacity: 0;
}


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

.visit-content {

    width: 100%;

    max-width: 600px;
}


/* =========================================================
   EYEBROW
========================================================= */

.visit-eyebrow {

    display: block;

    margin-bottom: 30px;

    font-size: 11px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #d88972;
}


/* =========================================================
   HEADING
========================================================= */

.visit-content h2 {

    margin: 0;

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

    font-size:
        clamp(65px, 6vw, 92px);

    font-weight: 400;

    line-height: .87;

    letter-spacing: -3px;

    color: #f7f3eb;
}


.visit-content h2 em {

    display: block;

    margin-top: 8px;

    color: #bd452e;

    font-style: italic;

    font-weight: 400;
}


/* =========================================================
   ADDRESS
========================================================= */

.visit-address {

    position: relative;

    display: grid;

    grid-template-columns: 25px 1fr 20px;

    gap: 10px;

    align-items: start;

    margin-top: 60px;

    padding-bottom: 45px;

    border-bottom:
        1px solid
        rgba(247,243,235,.18);

    color: #f7f3eb;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   ADDRESS ICON
========================================================= */

.address-icon {

    font-size: 23px;

    line-height: 1;

    color: #d88972;
}


.address-arrow {

    font-size: 18px;

    color: #d88972;

    transition:
        transform .35s ease;
}


.visit-address:hover
.address-arrow {

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


/* =========================================================
   INFORMATION BAR
========================================================= */

.visit-info {

    display: grid;

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

    align-items: center;

    gap: 20px;

    padding: 22px 0;

    border-bottom:
        1px solid
        rgba(247,243,235,.18);
}


.visit-info > *,
.visit-info a {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #f7f3eb;

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   INFO ICONS
========================================================= */

.info-icon {

    font-size: 21px;

    line-height: 1;

    color: #d88972;
}


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

.visit-content .whatsapp-button {

    width: fit-content;

    min-width: 315px;

    min-height: 59px;

    margin-top: 42px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background: #f7f3eb;

    color: #171512;

    font-size: 11px;

    letter-spacing: .13em;

    text-transform: uppercase;

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


.visit-content .whatsapp-button span:last-child {

    font-size: 17px;

    transition:
        transform .4s ease;
}


.visit-content .whatsapp-button:hover {

    background: #163f2b;

    color: #f7f3eb;

    transform:
        translateY(-3px);
}


.visit-content .whatsapp-button:hover
span:last-child {

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


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

@media (max-width: 1050px) {

    .visit-section {

        padding:
            90px 5vw
            110px;
    }


    .visit-container {

        gap: 70px;
    }


    .visit-image {

        height: 480px;
    }


    .visit-content h2 {

        font-size: 70px;

        letter-spacing: -2px;
    }


    .visit-info {

        grid-template-columns:
            1fr 1fr;

        row-gap: 20px;
    }

}


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

@media (max-width: 750px) {

    .visit-section {

        min-height: auto;

        padding:
            80px 25px
            100px;
    }


    .visit-container {

        display: flex;

        flex-direction: column;

        gap: 65px;

        align-items: stretch;
    }


    /* IMAGE */

    .visit-image {

        width: 100%;

        height: 420px;

        order: 1;
    }


    /* CONTENT */

    .visit-content {

        order: 2;

        max-width: none;
    }


    .visit-eyebrow {

        margin-bottom: 25px;

        font-size: 9px;
    }


    .visit-content h2 {

        font-size: 58px;

        line-height: .9;

        letter-spacing: -1.5px;
    }


    .visit-address {

        margin-top: 45px;

        padding-bottom: 30px;

        font-size: 13px;

        line-height: 1.65;
    }


    .visit-info {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 22px 0;
    }


    .visit-info > *,
    .visit-info a {

        font-size: 11px;
    }


    .whatsapp-button {

        width: 100%;

        min-width: 0;

        margin-top: 35px;

        padding: 0 20px;
    }

}


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

@media (max-width: 450px) {

    .visit-section {

        padding:
            65px 20px
            85px;
    }


    .visit-image {

        height: 340px;
    }


    .visit-image-frame {

        inset: 12px;
    }


    .visit-image-label {

        font-size: 55px;
    }


    .visit-content h2 {

        font-size: 51px;

        letter-spacing: -1px;
    }


    .visit-address {

        font-size: 12px;
    }


    .whatsapp-button {

        min-height: 56px;

        font-size: 8px;

        letter-spacing: .1em;
    }

}


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

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

    .visit-section::before,
    .visit-section::after {

        animation: none;
    }


    .visit-image img,
    .visit-image video {

        transition: none;
    }

}