:root {
        --rose: #c8607a;
        --rose-light: #e8a0b0;
        --rose-pale: #faeef1;
        --rose-deep: #8b3a50;
        --blush: #f5dde3;
        --dark: #1a0d10;
        --dark-mid: #2e1820;
        --cream: #fdf8f9;
        --text: #3a1f25;
        --muted: #7a5560;
        --gold: #c9956a;
        --gold-light: #e8c4a0;
    }

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

    html {
        scroll-behavior: smooth
    }

    body {
        font-family: 'Jost', sans-serif;
        background: var(--cream);
        color: var(--text);
        overflow-x: hidden
    }

    h1,
    h2,
    h3,
    h4,
    .display-font {
        font-family: 'Cormorant Garamond', serif
    }

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        width: 94%;
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
        width: 6px
    }

    ::-webkit-scrollbar-track {
        background: var(--blush)
    }

    ::-webkit-scrollbar-thumb {
        background: var(--rose);
        border-radius: 3px
    }

    /* ── NAVBAR ── */
    #mainNav {
        background: rgb(255 255 255);
        transition: all .4s ease;
        padding: 0.3rem 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    #mainNav.scrolled {
        background: rgb(255 255 255);
        backdrop-filter: blur(10px);
        padding: .6rem 0;
        box-shadow: 0 2px 30px rgba(200, 96, 122, .15)
    }

    .navbar-brand img {
        height: 76px;
        width: auto;
        transition: height .3s
    }

    #mainNav.scrolled .navbar-brand img {
        height: 48px
    }

    .navbar-nav .nav-link {
        color: rgb(0 0 0) !important;
        font-family: 'Jost', sans-serif;
        font-weight: 400;
        font-size: .85rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 10px 1rem !important;
        transition: color .3s;
    }

    .navbar-nav .nav-link:hover {
        color: var(--rose-light) !important
    }

    .nav-cta {
        background: var(--rose) !important;
        color: #fff !important;
        border-radius: 30px;
        padding: .45rem 1.4rem !important;
        margin-left: .5rem
    }

    .nav-cta:hover {
        background: var(--rose-deep) !important
    }

    .navbar-toggler {
        border: 1px solid rgba(200, 96, 122, .4);
        padding: .35rem .6rem
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232,160,176,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    /* ── HERO ── */
    #hero {
        height: 100vh;
        min-height: 600px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center
    }

    .hero-slides {
        position: absolute;
        inset: 0
    }

    .hero-slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1.4s ease
    }

    .hero-slide.active {
        opacity: 1
    }

    .hero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(26, 13, 16, .75) 0%, rgba(46, 24, 32, .5) 50%, rgba(26, 13, 16, .3) 100%)
    }

    .hero-content {
        position: relative;
        z-index: 2;
        color: #fff
    }

    .hero-eyebrow {
        font-size: .75rem;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--rose-light);
        margin-bottom: 1rem;
        font-family: 'Jost', sans-serif;
        font-weight: 400
    }

    .hero-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(3rem, 7vw, 5.5rem);
        font-weight: 300;
        line-height: 1.1;
        margin-bottom: 1.2rem
    }

    .hero-title span {
        color: var(--rose-light);
        font-style: italic
    }

    .hero-subtitle {
        font-size: 1rem;
        font-weight: 300;
        color: rgba(255, 255, 255, .8);
        max-width: 480px;
        line-height: 1.7;
        margin-bottom: 2rem
    }

    .btn-lotus {
        background: transparent;
        border: 1px solid var(--rose-light);
        color: var(--rose-light);
        font-family: 'Jost', sans-serif;
        font-size: .8rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        padding: .7rem 2rem;
        border-radius: 30px;
        transition: all .35s;
        text-decoration: none;
        display: inline-block
    }

    .btn-lotus:hover {
        background: var(--rose);
        border-color: var(--rose);
        color: #fff
    }

    .btn-lotus-fill {
        background: var(--rose);
        border: 1px solid var(--rose);
        color: #fff;
        font-family: 'Jost', sans-serif;
        font-size: .8rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        padding: .7rem 2rem;
        border-radius: 30px;
        transition: all .35s;
        text-decoration: none;
        display: inline-block
    }

    .btn-lotus-fill:hover {
        background: var(--rose-deep);
        border-color: var(--rose-deep);
        color: #fff
    }

    .hero-indicators {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: .6rem;
        z-index: 5
    }

    .hero-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .35);
        cursor: pointer;
        transition: all .3s
    }

    .hero-dot.active {
        background: var(--rose-light);
        width: 22px;
        border-radius: 3px
    }

    .hero-scroll {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
        color: rgba(255, 255, 255, .5);
        font-size: .65rem;
        letter-spacing: .15em;
        text-transform: uppercase
    }

    .hero-scroll::before {
        content: '';
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, transparent, var(--rose-light));
        margin-bottom: .3rem
    }

    /* ── SECTION COMMONS ── */
    .section-tag {
        font-size: .72rem;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--rose);
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        margin-bottom: .6rem
    }

    .section-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300;
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.2;
        color: var(--dark)
    }

    .section-line {
        width: 50px;
        height: 1px;
        background: linear-gradient(to right, var(--rose), transparent);
        margin: 1rem 0 1.5rem
    }

    .section-line.centered {
        margin: 1rem auto 1.5rem
    }

    .divider-ornament {
        text-align: center;
        color: var(--rose-light);
        font-size: 1.2rem;
        letter-spacing: .5em;
        margin: 1rem 0
    }

    /* ── ABOUT STRIP ── */
    #about-strip {
        background: var(--dark);
        padding: 3rem 0
    }

    .strip-stat {
        text-align: center;
        padding: 1rem
    }

    .strip-stat .num {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.8rem;
        font-weight: 300;
        color: var(--rose-light);
        line-height: 1
    }

    .strip-stat .lbl {
        font-size: .75rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .5);
        margin-top: .3rem
    }

    /* ── SERVICES ── */
    #services {
        padding: 6rem 0;
        background: var(--cream)
    }

    .service-card {
        border-radius: 0;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 0 0 1px rgba(200, 96, 122, .08);
        transition: all .4s ease;
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(200, 96, 122, .15)
    }

    .service-img-wrap {
        height: 240px;
        overflow: hidden;
        position: relative
    }

    .service-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease
    }

    .service-card:hover .service-img-wrap img {
        transform: scale(1.07)
    }

    .service-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(to top, rgba(26, 13, 16, .6), transparent)
    }

    .service-body {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .service-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--dark);
        margin-bottom: .5rem
    }

    .service-desc {
        font-size: .9rem;
        color: var(--muted);
        line-height: 1.7;
        flex: 1;
        margin-bottom: 1rem
    }

    .service-link {
        font-size: .75rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--rose);
        text-decoration: none;
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        transition: gap .3s
    }

    .service-link:hover {
        color: var(--rose-deep);
        gap: .7rem
    }

    /* ── HOW IT WORKS ── */
    #how-it-works {
        padding: 6rem 0;
        background: var(--dark)
    }

    #how-it-works .section-title {
        color: #fff
    }

    .step-card {
        text-align: center;
        padding: 2rem 1.5rem;
        border: 1px solid rgba(200, 96, 122, .15);
        border-radius: 0;
        position: relative;
        background: rgba(255, 255, 255, .03);
        transition: background .3s
    }

    .step-card:hover {
        background: rgba(200, 96, 122, .06)
    }

    .step-num {
        font-family: 'Cormorant Garamond', serif;
        font-size: 3.5rem;
        font-weight: 300;
        color: rgba(200, 96, 122, .25);
        line-height: 1;
        margin-bottom: .5rem
    }

    .step-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .4);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto .8rem;
        color: var(--rose-light);
        font-size: 1.3rem
    }

    .step-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.3rem;
        font-weight: 400;
        color: #fff;
        margin-bottom: .6rem
    }

    .step-desc {
        font-size: .88rem;
        color: rgba(255, 255, 255, .5);
        line-height: 1.7
    }

    .step-connector {
        position: absolute;
        top: 30%;
        right: -15%;
        width: 30%;
        height: 1px;
        background: linear-gradient(to right, rgba(200, 96, 122, .3), transparent);
        display: block
    }

    /* ── TESTIMONIALS ── */
    #testimonials {
        padding: 6rem 0;
        background: var(--blush)
    }

    .testi-track {
        display: flex;
        gap: 2rem;
        transition: transform .7s cubic-bezier(.4, 0, .2, 1)
    }

    .testi-card {
        min-width: calc(33.333% - 1.35rem);
        background: #fff;
        padding: 2.2rem;
        border-radius: 0;
        box-shadow: 0 2px 20px rgba(200, 96, 122, .07);
        flex-shrink: 0
    }

    .testi-stars {
        color: var(--rose);
        margin-bottom: 1rem;
        font-size: .9rem;
        letter-spacing: .1em
    }

    .testi-text {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.15rem;
        font-weight: 300;
        font-style: italic;
        color: var(--text);
        line-height: 1.7;
        margin-bottom: 1.2rem
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: .8rem
    }

    .testi-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--blush);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1rem;
        font-weight: 500;
        color: var(--rose-deep);
        flex-shrink: 0
    }

    .testi-name {
        font-size: .88rem;
        font-weight: 500;
        color: var(--dark)
    }

    .testi-loc {
        font-size: .78rem;
        color: var(--muted)
    }

    .testi-nav {
        display: flex;
        gap: .5rem;
        justify-content: center;
        margin-top: 2rem
    }

    .testi-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--rose);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--rose);
        transition: all .3s;
        font-size: .9rem
    }

    .testi-btn:hover {
        background: var(--rose);
        color: #fff
    }

    .testi-dots {
        display: flex;
        gap: .5rem;
        align-items: center
    }

    .testi-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--rose-light);
        transition: all .3s;
        cursor: pointer
    }

    .testi-dot.active {
        background: var(--rose);
        width: 14px;
        border-radius: 2.5px
    }

    /* ── CTA BAND ── */
    #cta-band {
        padding: 5rem 0;
        background: var(--rose-deep);
        position: relative;
        overflow: hidden
    }

    #cta-band::before {
        content: '';
        position: absolute;
        top: -40%;
        left: -10%;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .08)
    }

    #cta-band::after {
        content: '';
        position: absolute;
        bottom: -40%;
        right: -10%;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .08)
    }

    #cta-band .section-title {
        color: #fff
    }

    #cta-band p {
        color: rgba(255, 255, 255, .7)
    }

    /* ── FOOTER ── */
    #footer {
        background: var(--dark);
        padding: 4rem 0 2rem;
        color: rgba(255, 255, 255, .6)
    }

    #footer .footer-logo {
        height: 80px;
        width: auto;
        margin-bottom: 1rem
    }

    #footer .footer-about {
        font-size: .88rem;
        line-height: 1.8;
        max-width: 280px
    }

    .footer-head {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.1rem;
        font-weight: 400;
        color: #fff;
        margin-bottom: 1.2rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid rgba(200, 96, 122, .2)
    }

    .footer-links {
        list-style: none;
        padding: 0
    }

    .footer-links li {
        margin-bottom: .5rem
    }

    .footer-links a {
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
        font-size: .87rem;
        transition: color .3s;
        display: inline-flex;
        align-items: center;
        gap: .5rem
    }

    .footer-links a:hover {
        color: var(--rose-light)
    }

    .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: .8rem;
        margin-bottom: .9rem;
        font-size: .87rem
    }

    .footer-contact-item i {
        color: var(--rose-light);
        font-size: 1rem;
        margin-top: .1rem;
        flex-shrink: 0
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .07);
        margin-top: 3rem;
        padding-top: 1.5rem;
        text-align: center;
        font-size: .8rem;
        color: rgba(255, 255, 255, .3)
    }

    .social-links {
        display: flex;
        gap: .7rem;
        margin-top: 1rem
    }

    .social-links a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .5);
        text-decoration: none;
        transition: all .3s;
        font-size: .9rem
    }

    .social-links a:hover {
        border-color: var(--rose);
        color: var(--rose-light)
    }

    /* ── FADE-IN ON SCROLL ── */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s ease, transform .7s ease
    }

    .reveal.visible {
        opacity: 1;
        transform: none
    }

    /* ── WHATSAPP FLOAT ── */
    .wa-float {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 900;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #25d366;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.5rem;
        box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
        text-decoration: none;
        transition: transform .3s
    }

    .wa-float:hover {
        transform: scale(1.1);
        color: #fff
    }

    /* ── RESPONSIVE ── */
    @media(max-width:991px) {
        .testi-card {
            min-width: calc(50% - 1rem)
        }

        .step-connector {
            display: none
        }
    }

    @media(max-width:767px) {
        .testi-card {
            min-width: calc(100%)
        }

        .hero-title {
            font-size: 2.6rem
        }

        #about-strip .strip-stat .num {
            font-size: 2.2rem
        }

        .service-img-wrap {
            height: 200px
        }
    }

    @media(max-width:480px) {
        .hero-title {
            font-size: 2.1rem
        }

        .btn-lotus,
        .btn-lotus-fill {
            font-size: .72rem;
            padding: .6rem 1.5rem
        }
    }



















    h1,
    h2,
    h3,
    h4,
    .display-font {
        font-family: 'Cormorant Garamond', serif
    }

    ::-webkit-scrollbar {
        width: 6px
    }

    ::-webkit-scrollbar-track {
        background: var(--blush)
    }

    ::-webkit-scrollbar-thumb {
        background: var(--rose);
        border-radius: 3px
    }


    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active-link {
        color: var(--rose-light) !important
    }

    .nav-cta {
        background: var(--rose) !important;
        color: #fff !important;
        border-radius: 30px;
        padding: .45rem 1.4rem !important;
        margin-left: .5rem
    }

    .nav-cta:hover {
        background: var(--rose-deep) !important
    }

    .navbar-toggler {
        border: 1px solid rgba(200, 96, 122, .4);
        padding: .35rem .6rem
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232,160,176,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    /* ── PAGE HERO ── */
    #page-hero {
        padding: 9rem 0 5rem;
        background: var(--dark);
        position: relative;
        overflow: hidden;
        text-align: center
    }

    #page-hero::before {
        content: '';
        position: absolute;
        top: -60%;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 700px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .1);
        pointer-events: none
    }

    #page-hero::after {
        content: '';
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .15);
        pointer-events: none
    }

    .page-eyebrow {
        font-size: .72rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--rose-light);
        font-family: 'Jost', sans-serif;
        font-weight: 400;
        margin-bottom: .8rem
    }

    .page-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.8rem, 6vw, 4.5rem);
        font-weight: 300;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 1rem
    }

    .page-title em {
        color: var(--rose-light);
        font-style: italic
    }

    .page-subtitle {
        font-size: .95rem;
        color: rgba(255, 255, 255, .55);
        max-width: 520px;
        margin: 0 auto 2rem;
        line-height: 1.8;
        font-weight: 300
    }

    .breadcrumb-wrap {
        display: flex;
        justify-content: center;
        gap: .5rem;
        align-items: center;
        font-size: .78rem;
        color: rgba(255, 255, 255, .4)
    }

    .breadcrumb-wrap a {
        color: rgba(255, 255, 255, .4);
        text-decoration: none
    }

    .breadcrumb-wrap a:hover {
        color: var(--rose-light)
    }

    .breadcrumb-wrap .sep {
        color: rgba(200, 96, 122, .4)
    }

    /* ── SERVICE FILTER TABS ── */
    #filter-bar {
        background: #fff;
        border-bottom: 1px solid rgba(200, 96, 122, .1);
        position: sticky;
        top: 70px;
        z-index: 500;
        padding: .6rem 0
    }

    .filter-tabs {
        display: flex;
        gap: .3rem;
        overflow-x: auto;
        padding: .2rem .5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: center;
        flex-wrap: wrap
    }

    .filter-tabs::-webkit-scrollbar {
        display: none
    }

    .filter-btn {
        font-family: 'Jost', sans-serif;
        font-size: .75rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: .42rem 1.1rem;
        border-radius: 30px;
        border: 1px solid rgba(200, 96, 122, .25);
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: all .3s;
        white-space: nowrap;
        font-weight: 400
    }

    .filter-btn:hover {
        border-color: var(--rose);
        color: var(--rose)
    }

    .filter-btn.active {
        background: var(--rose);
        border-color: var(--rose);
        color: #fff
    }

    /* ── SECTION COMMONS ── */
    .section-tag {
        font-size: .72rem;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--rose);
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        margin-bottom: .5rem
    }

    .section-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300;
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.15;
        color: var(--dark)
    }

    .section-rule {
        width: 44px;
        height: 1px;
        background: linear-gradient(to right, var(--rose), transparent);
        margin: 1rem 0 0
    }

    /* ── SERVICE DETAIL CARD ── */
    .svc-section {
        padding: 5rem 0;
        border-bottom: 1px solid rgba(200, 96, 122, .08)
    }

    .svc-section:last-of-type {
        border-bottom: none
    }

    .svc-section:nth-child(even) {
        background: var(--blush)
    }

    .svc-section:nth-child(odd) {
        background: #fff
    }

    .svc-img-frame {
        position: relative;
        overflow: hidden;
        border-radius: 0
    }

    .svc-img-frame img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        display: block;
        transition: transform .7s ease
    }

    .svc-img-frame:hover img {
        transform: scale(1.04)
    }

    .svc-img-badge {
        position: absolute;
        top: 1.2rem;
        left: 1.2rem;
        background: var(--dark);
        color: var(--rose-light);
        font-size: .7rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        padding: .35rem .9rem;
        font-family: 'Jost', sans-serif
    }

    .svc-img-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 35%;
        background: linear-gradient(to top, rgba(26, 13, 16, .5), transparent)
    }

    .svc-icon-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--rose);
        margin-bottom: 1.2rem;
        flex-shrink: 0
    }

    .svc-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.9rem, 3.5vw, 2.6rem);
        font-weight: 400;
        color: var(--dark);
        line-height: 1.15;
        margin-bottom: .7rem
    }

    .svc-tagline {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 1.15rem;
        font-weight: 300;
        color: var(--rose-deep);
        margin-bottom: 1.2rem
    }

    .svc-desc {
        font-size: .93rem;
        color: var(--muted);
        line-height: 1.85;
        margin-bottom: 1.5rem
    }

    .svc-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        margin-bottom: 1.5rem
    }

    .svc-meta-item {
        background: var(--cream);
        border: 1px solid rgba(200, 96, 122, .12);
        padding: .7rem 1rem
    }

    .svc-meta-label {
        font-size: .68rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .2rem;
        font-family: 'Jost', sans-serif
    }

    .svc-meta-value {
        font-size: .92rem;
        font-weight: 500;
        color: var(--dark)
    }

    .benefits-list {
        list-style: none;
        padding: 0;
        margin-bottom: 1.6rem
    }

    .benefits-list li {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        font-size: .9rem;
        color: var(--text);
        padding: .4rem 0;
        border-bottom: 1px solid rgba(200, 96, 122, .07);
        line-height: 1.6
    }

    .benefits-list li:last-child {
        border-bottom: none
    }

    .benefits-list li i {
        color: var(--rose);
        font-size: .9rem;
        margin-top: .2rem;
        flex-shrink: 0
    }

    .svc-techniques {
        margin-bottom: 1.5rem
    }

    .technique-tag {
        display: inline-block;
        font-size: .75rem;
        letter-spacing: .1em;
        padding: .3rem .8rem;
        background: var(--rose-pale);
        color: var(--rose-deep);
        margin: .25rem .2rem 0 0;
        font-family: 'Jost', sans-serif
    }

    .btn-book-svc {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: var(--rose);
        color: #fff;
        font-family: 'Jost', sans-serif;
        font-size: .8rem;
        letter-spacing: .15em;
        text-transform: uppercase;
        padding: .75rem 2rem;
        border-radius: 30px;
        text-decoration: none;
        transition: all .35s;
        border: none;
        cursor: pointer
    }

    .btn-book-svc:hover {
        background: var(--rose-deep);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(200, 96, 122, .3)
    }

    .btn-wa-svc {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: transparent;
        color: var(--rose);
        font-family: 'Jost', sans-serif;
        font-size: .8rem;
        letter-spacing: .15em;
        text-transform: uppercase;
        padding: .75rem 1.8rem;
        border-radius: 30px;
        text-decoration: none;
        transition: all .35s;
        border: 1px solid var(--rose)
    }

    .btn-wa-svc:hover {
        background: var(--rose);
        color: #fff
    }

    /* ── IDEAL FOR BADGES ── */
    .ideal-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .8rem;
        background: #fff;
        border: 1px solid rgba(200, 96, 122, .2);
        padding: .35rem .85rem;
        border-radius: 30px;
        color: var(--muted);
        margin: .25rem .2rem 0 0
    }

    .ideal-badge i {
        color: var(--rose);
        font-size: .85rem
    }

    /* ── BOOKING MODAL ── */
    .modal-content {
        border-radius: 0;
        border: none
    }

    .modal-header {
        background: var(--dark);
        border-bottom: none;
        padding: 1.5rem 2rem
    }

    .modal-header .modal-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.6rem;
        font-weight: 300;
        color: #fff
    }

    .modal-header .btn-close {
        filter: invert(1) opacity(.5)
    }

    .modal-body {
        padding: 2rem
    }

    .form-label {
        font-size: .78rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        margin-bottom: .3rem
    }

    .form-control,
    .form-select {
        border-radius: 0;
        border: 1px solid rgba(200, 96, 122, .2);
        font-family: 'Jost', sans-serif;
        font-size: .9rem;
        padding: .65rem 1rem;
        background: var(--cream);
        color: var(--text)
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--rose);
        box-shadow: 0 0 0 3px rgba(200, 96, 122, .1);
        background: #fff
    }

    .modal-footer {
        border-top: 1px solid rgba(200, 96, 122, .1);
        padding: 1rem 2rem 1.5rem
    }

    /* ── FAQ ACCORDION ── */
    #faq {
        padding: 5rem 0;
        background: var(--dark)
    }

    .accordion-item {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(200, 96, 122, .12)
    }

    .accordion-button {
        background: transparent;
        color: rgba(255, 255, 255, .8);
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.15rem;
        font-weight: 400;
        padding: 1.2rem 0;
        box-shadow: none
    }

    .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--rose-light);
        box-shadow: none
    }

    .accordion-button::after {
        filter: invert(1) opacity(.4)
    }

    .accordion-button:not(.collapsed)::after {
        filter: invert(0) sepia(1) saturate(2) hue-rotate(310deg) opacity(.8)
    }

    .accordion-body {
        color: rgba(255, 255, 255, .5);
        font-size: .9rem;
        line-height: 1.8;
        padding: .3rem 0 1.2rem
    }

    /* ── CTA BAND ── */
    #cta-services {
        padding: 4.5rem 0;
        background: var(--rose-deep);
        text-align: center;
        position: relative;
        overflow: hidden
    }

    #cta-services::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .07);
        pointer-events: none
    }

    /* ── FOOTER ── */
    #footer {
        background: var(--dark);
        padding: 4rem 0 2rem;
        color: rgba(255, 255, 255, .6)
    }

    #footer .footer-logo {
        height: 80px;
        width: auto;
        margin-bottom: 1rem
    }

    .footer-about {
        font-size: .88rem;
        line-height: 1.8;
        max-width: 280px
    }

    .footer-head {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.1rem;
        font-weight: 400;
        color: #fff;
        margin-bottom: 1.2rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid rgba(200, 96, 122, .2)
    }

    .footer-links {
        list-style: none;
        padding: 0
    }

    .footer-links li {
        margin-bottom: .5rem
    }

    .footer-links a {
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
        font-size: .87rem;
        transition: color .3s;
        display: inline-flex;
        align-items: center;
        gap: .5rem
    }

    .footer-links a:hover {
        color: var(--rose-light)
    }

    .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: .8rem;
        margin-bottom: .9rem;
        font-size: .87rem
    }

    .footer-contact-item i {
        color: var(--rose-light);
        font-size: 1rem;
        margin-top: .1rem;
        flex-shrink: 0
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .07);
        margin-top: 3rem;
        padding-top: 1.5rem;
        text-align: center;
        font-size: .8rem;
        color: rgba(255, 255, 255, .3)
    }

    .social-links {
        display: flex;
        gap: .7rem;
        margin-top: 1rem
    }

    .social-links a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(200, 96, 122, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .5);
        text-decoration: none;
        transition: all .3s;
        font-size: .9rem
    }

    .social-links a:hover {
        border-color: var(--rose);
        color: var(--rose-light)
    }

    /* ── REVEAL ── */
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .65s ease, transform .65s ease
    }

    .reveal.visible {
        opacity: 1;
        transform: none
    }

    .reveal-left {
        opacity: 0;
        transform: translateX(-24px);
        transition: opacity .65s ease, transform .65s ease
    }

    .reveal-left.visible {
        opacity: 1;
        transform: none
    }

    .reveal-right {
        opacity: 0;
        transform: translateX(24px);
        transition: opacity .65s ease, transform .65s ease
    }

    .reveal-right.visible {
        opacity: 1;
        transform: none
    }

    /* ── WA FLOAT ── */
    .wa-float {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 900;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #25d366;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.5rem;
        box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
        text-decoration: none;
        transition: transform .3s
    }

    .wa-float:hover {
        transform: scale(1.1);
        color: #fff
    }

    /* ── RESPONSIVE ── */
    @media(max-width:991px) {
        .svc-img-frame img {
            height: 320px
        }

        .svc-meta-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:767px) {
        .svc-img-frame img {
            height: 260px
        }

        .svc-section .row>div:first-child {
            margin-bottom: 2rem
        }

        .svc-meta-grid {
            grid-template-columns: 1fr 1fr
        }

        .filter-tabs {
            justify-content: flex-start
        }

        .page-title {
            font-size: 2.5rem
        }
    }

    @media(max-width:480px) {
        .svc-meta-grid {
            grid-template-columns: 1fr 1fr
        }

        .btn-book-svc,
        .btn-wa-svc {
            width: 100%;
            justify-content: center
        }
    }



    .hero {
        min-height: 70vh;
        display: flex;
        align-items: center;
        background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=1600&q=80') center/cover;
        color: #fff;
    }

    /* .section-title {
        text-align: center;
        margin-bottom: 40px;
    } */

    .step-card,
    .feature-card {
        /* background: #fff; */
        padding: 30px;
        height: 100%;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    }

    .cta {
        background: var(--rose);
        color: #fff;
        padding: 60px 0;
        text-align: center;
    }