:root {
    --font-body: 'DM Sans', 'Segoe UI', Arial, sans-serif;
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --c-ink: #302a27;
    --c-muted: #81766e;
    --c-paper: #fffdf9;
    --c-cream: #f8f3ed;
    --c-rose: #a97968;
    --c-rose-dark: #7f594e;
    --c-line: #eadfd6;
    --c-green: #547665;
    --c-accent: #c1543a;
    --c-accent-dark: #a3452e
}

* {
    box-sizing: border-box
}

body.customer-body {
    margin: 0;
    background: var(--c-cream);
    color: var(--c-ink);
    font-family: var(--font-body)
}

.customer-shell {
    display: flex;
    min-height: 100vh
}

.customer-sidebar {
    width: 270px;
    position: fixed;
    inset: 0 auto 0 0;
    background: #2d2927;
    color: #fff;
    padding: 28px 20px;
    display: flex;
    flex-direction: column
}

.customer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none
}

.customer-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #b98e7e;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 20px
}

.customer-brand b {
    display: block;
    font: 25px var(--font-heading);
    letter-spacing: 1px
}

.customer-brand small {
    display: block;
    color: #bcb2aa;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px
}

.customer-welcome {
    margin: 34px 5px 18px;
    padding: 16px;
    border: 1px solid #49423d;
    border-radius: 16px;
    background: #342f2c
}

    .customer-welcome span {
        display: block;
        color: #a9a09a;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.4px
    }

    .customer-welcome strong {
        display: block;
        margin-top: 5px;
        font-size: 15px
    }

.customer-nav {
    display: grid;
    gap: 6px
}

    .customer-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 13px;
        border-radius: 12px;
        color: #cfc6bf;
        text-decoration: none;
        font-size: 14px
    }

        .customer-nav a:hover, .customer-nav a.active {
            background: #443c38;
            color: #fff
        }

        .customer-nav a.active {
            box-shadow: inset 3px 0 var(--c-rose)
        }

.customer-sidebar-bottom {
    margin-top: auto
}

.customer-logout {
    display: block;
    color: #d9ccc4;
    text-decoration: none;
    padding: 12px 13px
}

.customer-mini-note {
    font-size: 10px;
    color: #857b74;
    padding: 10px 13px;
    letter-spacing: .7px
}

.customer-main {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh
}

.customer-topbar {
    padding: 28px 44px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.customer-eyebrow, .muted-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--c-rose-dark);
    font-weight: 800
}

.customer-topbar h1 {
    font: 32px var(--font-heading);
    margin: 7px 0 0
}

.customer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-muted);
    font-size: 13px
}

.customer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e6d3ca;
    color: #68483e;
    font-weight: 700
}

.customer-content {
    padding: 10px 44px 55px;
    max-width: 1450px
}

.customer-hero {
    background: linear-gradient(120deg,#8b655b,#b78b7b);
    color: #fff;
    border-radius: 25px;
    padding: 34px 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 235px;
    box-shadow: 0 20px 50px #7d5a4b1a
}

.hero-kicker {
    font-size: 10px;
    letter-spacing: 2px;
    opacity: .8
}

.customer-hero h2 {
    font: 38px var(--font-heading);
    margin: 9px 0
}

.customer-hero p {
    max-width: 650px;
    color: #f9eeea;
    margin: 0 0 20px;
    line-height: 1.6
}

.hero-orb {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff1c;
    border: 1px solid #ffffff55;
    font: 48px var(--font-heading)
}

.customer-primary, .customer-secondary {
    display: inline-block;
    border-radius: 12px;
    padding: 11px 16px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border: 0;
    cursor: pointer
}

.customer-primary {
    background: var(--c-accent);
    color: #fff;
    transition: background .25s ease,transform .25s ease,box-shadow .25s ease
}

    .customer-primary:hover {
        background: var(--c-accent-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(193,84,58,.28)
    }

.customer-hero .customer-primary {
    background: #fff;
    color: #6e4b42
}

    .customer-hero .customer-primary:hover {
        background: #fff;
        color: var(--c-accent-dark);
        box-shadow: 0 10px 22px rgba(0,0,0,.18)
    }

.customer-secondary {
    background: #fffaf5;
    border: 1px solid var(--c-line);
    color: var(--c-rose-dark)
}

.customer-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin: 18px 0
}

.customer-stat, .customer-card, .customer-ai-card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    box-shadow: 0 10px 30px #6f4d3b08
}

.customer-stat {
    padding: 20px 22px
}

    .customer-stat span, .customer-stat small {
        display: block;
        color: var(--c-muted);
        font-size: 12px
    }

    .customer-stat b {
        display: block;
        font: 31px var(--font-heading);
        margin: 9px 0 3px
    }

.customer-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.customer-card {
    padding: 22px
}

.card-heading, .page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

    .card-heading h3, .page-toolbar h2 {
        margin: 5px 0 0;
        font: 25px var(--font-heading)
    }

    .card-heading a {
        color: var(--c-rose-dark);
        text-decoration: none;
        font-size: 13px
    }

.empty-state {
    text-align: center;
    padding: 35px 15px;
    color: var(--c-muted);
    line-height: 1.8
}

    .empty-state a {
        color: var(--c-rose-dark)
    }

.booking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-line)
}

    .booking-row:last-child {
        border-bottom: 0
    }

.date-box {
    width: 48px;
    height: 55px;
    border-radius: 12px;
    background: #f1e4dc;
    text-align: center;
    padding-top: 7px;
    color: #765148
}

    .date-box b {
        display: block;
        font: 20px var(--font-heading)
    }

    .date-box span {
        font-size: 10px;
        text-transform: uppercase
    }

.row-main {
    flex: 1;
    min-width: 0
}

    .row-main strong, .row-main span {
        display: block
    }

    .row-main span {
        font-size: 12px;
        color: var(--c-muted);
        margin-top: 4px
    }

.status-pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eee5df;
    color: #6f5147;
    font-size: 10px;
    font-weight: 800
}

    .status-pill.pending {
        background: #f4eadb
    }

    .status-pill.confirmed {
        background: #e5eee9;
        color: #335d4c
    }

    .status-pill.in_progress {
        background: #f4e5e2;
        color: #895045
    }

    .status-pill.cancelled {
        background: #eee
    }

    .status-pill.completed {
        background: #e2eee7;
        color: #416151
    }

.treatment-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--c-line)
}

    .treatment-item:last-child {
        border-bottom: 0
    }

.treatment-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px
}

    .treatment-title span {
        color: var(--c-muted);
        font-size: 12px
    }

.progress {
    height: 7px;
    border-radius: 99px;
    background: #eee6df;
    overflow: hidden;
    margin: 9px 0
}

    .progress span {
        display: block;
        height: 100%;
        background: var(--c-rose);
        border-radius: 99px
    }

.treatment-item small {
    color: var(--c-muted);
    font-size: 11px
}

.customer-ai-card {
    margin-top: 18px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px
}

.ai-symbol {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f0e1d9;
    color: var(--c-rose-dark);
    display: grid;
    place-items: center;
    font-size: 21px
}

.customer-ai-card > div:nth-child(2) {
    flex: 1
}

.customer-ai-card h3 {
    margin: 3px 0 5px;
    font: 21px var(--font-heading)
}

.customer-ai-card p {
    margin: 0;
    color: var(--c-muted);
    font-size: 12px;
    line-height: 1.55
}

.page-toolbar {
    margin-bottom: 18px
}

.table-card {
    padding: 8px 18px
}

.customer-table-wrap {
    overflow-x: auto
}

.customer-table {
    width: 100%;
    border-collapse: collapse
}

    .customer-table th {
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--c-muted);
        text-align: left;
        padding: 15px 10px;
        border-bottom: 1px solid var(--c-line)
    }

    .customer-table td {
        padding: 16px 10px;
        border-bottom: 1px solid #f0e8e2;
        font-size: 13px;
        vertical-align: middle
    }

    .customer-table small {
        color: var(--c-muted)
    }

.link-danger {
    background: none;
    border: 0;
    color: #9b5e5e;
    cursor: pointer;
    font-size: 12px
}

.form-card-customer {
    max-width: 850px
}

    .form-card-customer form {
        display: grid;
        gap: 8px
    }

    .form-card-customer label {
        font-size: 12px;
        font-weight: 700;
        margin-top: 8px
    }

    .form-card-customer input, .form-card-customer select, .form-card-customer textarea {
        width: 100%;
        border: 1px solid var(--c-line);
        border-radius: 11px;
        background: #fff;
        padding: 12px 13px;
        color: var(--c-ink);
        font: inherit;
        outline: none
    }

        .form-card-customer input:focus, .form-card-customer select:focus, .form-card-customer textarea:focus {
            border-color: var(--c-rose)
        }

    .form-card-customer .customer-primary {
        width: max-content;
        margin-top: 10px
    }

.form-note {
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.5
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px
}

    .booking-field label {
        margin-top: 0
    }

.req {
    color: #a9564d
}

.field-error {
    color: #a54f4f;
    font-size: 12px
}

.validation-summary {
    color: #a54f4f;
    font-size: 12px;
    margin-bottom: 5px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px
}

    .form-grid .full {
        grid-column: 1/-1
    }

.treatment-large {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
    gap: 22px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--c-line)
}

    .treatment-large:last-child {
        border-bottom: 0
    }

    .treatment-large h3 {
        font: 21px var(--font-heading);
        margin: 5px 0
    }

    .treatment-large p {
        color: var(--c-muted);
        font-size: 13px;
        line-height: 1.5;
        margin: 7px 0 0
    }

.treatment-progress {
    align-self: center
}

    .treatment-progress strong {
        font: 22px var(--font-heading)
    }

.treatment-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.treatment-count {
    color: var(--c-muted);
    font-size: 12px;
    white-space: nowrap
}

.treatment-progress small {
    color: var(--c-muted);
    font-size: 11px
}

    .treatment-progress > span {
        color: var(--c-muted);
        margin-left: 5px
    }

.timeline-card {
    padding: 28px 30px
}

.timeline-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 15px;
    position: relative;
    padding-bottom: 28px
}

    .timeline-item:not(:last-child):before {
        content: "";
        position: absolute;
        left: 7px;
        top: 14px;
        bottom: 0;
        width: 1px;
        background: var(--c-line)
    }

.timeline-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #d8b6a8;
    border: 4px solid #f6e9e3;
    z-index: 1
}

.timeline-item small, .timeline-item .muted {
    color: var(--c-muted);
    font-size: 11px
}

.timeline-item h3 {
    margin: 4px 0;
    font: 21px var(--font-heading)
}

.timeline-item p {
    color: #5f5752;
    line-height: 1.6;
    margin: 7px 0
}

.result-note {
    background: #f7eee8;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: #68534b;
    margin: 9px 0
}

.customer-alert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 10px 26px #6f4d3b0f;
    animation: customer-alert-in .25s ease-out
}

.customer-alert-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    margin-top: 1px
}

.customer-alert-text {
    padding-top: 3px
}

    .customer-alert.success {
        background: #e7f1eb;
        color: #2f4b3b;
        border: 1px solid #cfe3d6
    }

        .customer-alert.success .customer-alert-icon {
            background: var(--c-green);
            color: #fff
        }

    .customer-alert.error {
        background: #f7e7e5;
        color: #6d3934;
        border: 1px solid #edcfca
    }

        .customer-alert.error .customer-alert-icon {
            background: #a9564d;
            color: #fff
        }

@keyframes customer-alert-in {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

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

@media(max-width:1000px) {
    .customer-sidebar {
        width: 220px
    }

    .customer-main {
        margin-left: 220px;
        width: calc(100% - 220px)
    }

    .customer-topbar, .customer-content {
        padding-left: 24px;
        padding-right: 24px
    }

    .customer-grid-2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:720px) {
    .customer-sidebar {
        position: static;
        width: 100%;
        min-height: auto
    }

    .customer-shell {
        display: block
    }

    .customer-nav {
        grid-template-columns: 1fr 1fr
    }

    .customer-sidebar-bottom {
        margin-top: 18px
    }

    .customer-main {
        margin-left: 0;
        width: 100%
    }

    .customer-topbar {
        padding-top: 20px
    }

        .customer-topbar h1 {
            font-size: 27px
        }

    .customer-user > span {
        display: none
    }

    .customer-stats {
        grid-template-columns: 1fr
    }

    .customer-hero {
        min-height: auto
    }

    .hero-orb {
        display: none
    }

    .customer-content {
        padding: 8px 15px 35px
    }

    .form-grid, .treatment-large {
        grid-template-columns: 1fr
    }

        .form-grid .full {
            grid-column: auto
        }
}

.customer-login-body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 80% 15%,#ecdcd4 0,#f8f3ed 38%,#f1e8e1 100%);
    font-family: var(--font-body);
    color: var(--c-ink)
}

.customer-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 25px
}

.customer-login-card {
    width: min(460px,100%);
    background: #fffdf9;
    border: 1px solid var(--c-line);
    border-radius: 25px;
    padding: 34px;
    box-shadow: 0 25px 80px #6b4d4018;
    position: relative
}

.customer-back {
    display: inline-block;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 25px
}

.customer-login-mark {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #a97968;
    color: #fff;
    display: grid;
    place-items: center;
    font: 25px var(--font-heading);
    margin-bottom: 22px
}

.customer-login-card h1 {
    font: 31px var(--font-heading);
    margin: 8px 0
}

.customer-login-card > p {
    color: var(--c-muted);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 25px
}

.customer-login-card form {
    display: grid;
    gap: 8px
}

.customer-login-card label {
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px
}

.customer-login-card input {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--c-line);
    border-radius: 11px;
    outline: none;
    font: inherit
}

    .customer-login-card input:focus {
        border-color: var(--c-rose)
    }

.customer-login-card .customer-primary {
    margin-top: 10px;
    width: 100%;
    padding: 13px
}

.customer-login-demo {
    margin-top: 18px;
    padding: 11px 12px;
    background: #f6eee8;
    border-radius: 10px;
    font-size: 11px;
    color: #715950;
    text-align: center
}

/* ==========================================================
   LUMISPA PUBLIC CUSTOMER WEBSITE
   Inspired by editorial luxury-spa layouts, adapted for LumiSpa.
   ========================================================== */
:root {
    --pub-ink: #282421;
    --pub-muted: #7b716a;
    --pub-paper: #fffdf9;
    --pub-cream: #f4eee8;
    --pub-blush: #e8d5cb;
    --pub-rose: #9c6d5d;
    --pub-dark: #302a27;
    --pub-line: #e2d6ce
}

html {
    scroll-behavior: smooth
}

body.public-spa-body {
    margin: 0;
    background: var(--pub-paper);
    color: var(--pub-ink);
    font-family: var(--font-body)
}

    body.public-spa-body a {
        transition: all .25s ease
    }

.public-container {
    width: min(1240px,calc(100% - 48px));
    margin: auto
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fffdf9eF;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: .25s
}

    .public-header.scrolled {
        border-color: var(--pub-line);
        box-shadow: 0 10px 35px #4b342710
    }

.public-nav-wrap {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.public-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--pub-ink)
}

    .public-logo .logo-mark {
        width: 43px;
        height: 43px;
        border-radius: 14px;
        background: var(--pub-dark);
        color: #fff;
        display: grid;
        place-items: center;
        font: 19px var(--font-heading)
    }

    .public-logo b {
        display: block;
        font: 25px var(--font-heading);
        letter-spacing: .5px
    }

    .public-logo small {
        display: block;
        font-size: 8px;
        letter-spacing: 1.8px;
        color: var(--pub-muted);
        margin-top: 2px
    }

.public-nav {
    display: flex;
    align-items: center;
    gap: 25px
}

    .public-nav a {
        color: #625852;
        text-decoration: none;
        font-size: 12px
    }

        .public-nav a:hover {
            color: var(--pub-rose)
        }

    .public-nav .nav-login {
        border-left: 1px solid var(--pub-line);
        padding-left: 25px
    }

    .public-nav .nav-book {
        background: var(--pub-dark);
        color: #fff;
        padding: 12px 18px;
        border-radius: 99px
    }

.mobile-menu-btn {
    display: none;
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--pub-ink)
}

.public-kicker {
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 800;
    color: var(--pub-rose)
}

.public-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,#f5eee8,#eee0d8 55%,#f7f0eb);
    min-height: 680px;
    display: flex;
    align-items: center
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 80px 0 45px
}

.hero-copy {
    max-width: 630px
}

    .hero-copy h1 {
        font: clamp(54px,6.5vw,88px)/.95 var(--font-heading);
        letter-spacing: -3px;
        margin: 22px 0;
        color: #312a26
    }

        .hero-copy h1 em, .story-copy h2 em, .experience-copy h2 em, .cta-box h2 em, .services-page-head h1 em {
            font-style: italic;
            color: var(--pub-rose)
        }

    .hero-copy p {
        max-width: 560px;
        color: #71665f;
        font-size: 15px;
        line-height: 1.8
    }

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 30px
}

.public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-decoration: none;
    border-radius: 99px;
    padding: 14px 21px;
    font-size: 12px;
    font-weight: 800
}

.public-btn-dark {
    background: var(--pub-dark);
    color: #fff
}

    .public-btn-dark:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px #302a2730
    }

.public-btn-outline {
    border: 1px solid #a88c80;
    color: var(--pub-dark)
}

.public-btn-light {
    background: #fff;
    color: var(--pub-dark)
}

.public-text-link {
    font-size: 12px;
    font-weight: 800;
    color: var(--pub-dark);
    text-decoration: none;
    border-bottom: 1px solid #b8a49a;
    padding-bottom: 5px
}

.hero-note {
    font-size: 10px;
    color: #887a72;
    margin-top: 34px;
    letter-spacing: .5px
}

    .hero-note span {
        color: var(--pub-rose);
        margin-right: 6px
    }

.hero-art {
    height: 540px;
    position: relative;
    display: grid;
    place-items: center
}

.hero-portrait {
    width: min(410px,78%);
    height: 500px;
    border-radius: 220px 220px 35px 35px;
    background: linear-gradient(150deg,#b99080,#ead7ce 48%,#8d665b);
    padding: 13px;
    box-shadow: 30px 35px 70px #5d40352e;
    transform: rotate(3deg)
}

.portrait-inner {
    height: 100%;
    border-radius: 205px 205px 25px 25px;
    background: radial-gradient(circle at 50% 28%,#f6e8e1 0 12%,transparent 12.5%),linear-gradient(150deg,#dfbbae,#a97a6b 65%,#6e5048);
    display: flex;
    align-items: end;
    justify-content: center;
    overflow: hidden
}

    .portrait-inner span {
        font: clamp(150px,18vw,230px) var(--font-heading);
        color: #ffffff3a;
        line-height: .8
    }

.hero-floating-card {
    position: absolute;
    left: 4%;
    bottom: 58px;
    background: #fffdf9f5;
    border: 1px solid #ffffff;
    padding: 17px 19px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 18px 50px #503b321c
}

    .hero-floating-card .mini-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: #eee0d8;
        color: var(--pub-rose);
        display: grid;
        place-items: center
    }

    .hero-floating-card b {
        display: block;
        font: 14px var(--font-heading)
    }

    .hero-floating-card small {
        display: block;
        color: var(--pub-muted);
        font-size: 10px;
        margin-top: 4px
    }

.hero-stamp {
    position: absolute;
    right: 3%;
    top: 55px;
    width: 96px;
    height: 96px;
    border: 1px solid #8e706533;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    font: 20px var(--font-heading);
    color: #7b5a4f;
    transform: rotate(12deg)
}

    .hero-stamp small {
        font-size: 9px;
        letter-spacing: 3px
    }

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    background: #fff7
}

.hero-glow-one {
    width: 330px;
    height: 330px;
    right: -80px;
    top: -80px
}

.hero-glow-two {
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -120px
}

.hero-bottom {
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 8px;
    letter-spacing: 2.2px;
    color: #897c74;
    padding-bottom: 23px
}

    .hero-bottom i {
        width: 4px;
        height: 4px;
        background: #b69b8f;
        border-radius: 50%
    }

.public-section {
    padding: 110px 0
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px
}

    .section-heading h2, .story-copy h2 {
        font: clamp(38px,5vw,61px)/1.02 var(--font-heading);
        letter-spacing: -2px;
        margin: 15px 0 0;
        max-width: 760px
    }

.service-showcase {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.service-card {
    background: #fff;
    border: 1px solid var(--pub-line);
    transition: transform .35s,box-shadow .35s,opacity .25s;
    overflow: hidden
}

    .service-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 25px 50px #533c3215
    }

    .service-card.filtered-out {
        display: none
    }

.service-visual {
    height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

    .service-visual:before, .service-visual:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: #ffffff25
    }

    .service-visual:before {
        width: 210px;
        height: 210px;
        top: -75px;
        right: -45px
    }

    .service-visual:after {
        width: 160px;
        height: 160px;
        bottom: -70px;
        left: -40px
    }

.service-tone-0 {
    background: linear-gradient(145deg,#cda99b,#7f5c52)
}

.service-tone-1 {
    background: linear-gradient(145deg,#d9c4a9,#9d7f61)
}

.service-tone-2 {
    background: linear-gradient(145deg,#b8c3b2,#61725f)
}

.service-tone-3 {
    background: linear-gradient(145deg,#d7b9c0,#875d6b)
}

.service-visual span {
    font: 82px var(--font-heading);
    color: #fff9;
    position: relative;
    z-index: 2
}

.service-visual small {
    position: absolute;
    bottom: 17px;
    left: 18px;
    color: #fff;
    letter-spacing: 2px;
    font-size: 8px;
    z-index: 2
}

.service-body {
    padding: 20px
}

.service-category {
    font-size: 8px;
    letter-spacing: 1.8px;
    color: var(--pub-rose);
    font-weight: 800
}

.service-body h3 {
    font: 23px var(--font-heading);
    margin: 8px 0
}

.service-body p {
    font-size: 11px;
    line-height: 1.65;
    color: var(--pub-muted);
    min-height: 55px;
    margin: 0
}

.service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--pub-line);
    margin-top: 18px;
    padding-top: 15px;
    font-size: 11px
}

    .service-meta b {
        font-size: 14px
    }

    .service-meta span {
        color: var(--pub-muted)
    }

.story-section {
    background: #eee3dc;
    padding: 115px 0
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.story-art {
    height: 520px;
    position: relative
}

.story-card-main {
    position: absolute;
    inset: 0 70px 0 0;
    background: linear-gradient(145deg,#9c6d5d,#d8b9ab);
    display: flex;
    align-items: end;
    padding: 42px;
    box-shadow: 25px 25px 0 #f8f1eb
}

    .story-card-main span {
        position: absolute;
        top: 35px;
        left: 38px;
        color: #ffffff77;
        font: 80px var(--font-heading)
    }

    .story-card-main b {
        font: 56px/.9 var(--font-heading);
        color: #fff;
        letter-spacing: -2px
    }

.story-card-small {
    position: absolute;
    right: 0;
    bottom: 35px;
    background: #302a27;
    color: #fff;
    padding: 27px 30px;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1.6
}

    .story-card-small em {
        font: 27px var(--font-heading);
        color: #e6cfc4;
        letter-spacing: 0
    }

.story-copy > p {
    color: #746a63;
    font-size: 14px;
    line-height: 1.9;
    max-width: 600px
}

.story-points {
    display: grid;
    gap: 15px;
    margin: 30px 0
}

    .story-points > div {
        display: flex;
        gap: 20px;
        align-items: center
    }

    .story-points b {
        font: 17px var(--font-heading);
        color: var(--pub-rose)
    }

    .story-points span {
        font-size: 12px;
        font-weight: 800
    }

    .story-points small {
        font-weight: 400;
        color: var(--pub-muted)
    }

.experience-section {
    padding: 110px 0;
    background: #fff
}

    .experience-section .public-container {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 90px
    }

.experience-copy h2 {
    font: 55px/1 var(--font-heading);
    letter-spacing: -2px;
    margin: 15px 0
}

.experience-copy p {
    color: var(--pub-muted);
    font-size: 13px;
    line-height: 1.8
}

.experience-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--pub-line);
    border: 1px solid var(--pub-line)
}

.experience-step {
    background: #fff;
    padding: 30px;
    min-height: 220px
}

    .experience-step span {
        font: 25px var(--font-heading);
        color: var(--pub-rose)
    }

    .experience-step h3 {
        font: 24px var(--font-heading);
        margin: 50px 0 8px
    }

    .experience-step p {
        color: var(--pub-muted);
        font-size: 11px;
        line-height: 1.7
    }

.cta-section {
    padding: 35px 0 105px;
    background: #fff
}

.cta-box {
    background: var(--pub-dark);
    color: #fff;
    padding: 78px 70px;
    text-align: center;
    position: relative;
    overflow: hidden
}

    .cta-box:before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        border: 1px solid #fff1;
        border-radius: 50%;
        left: -150px;
        top: -220px
    }

    .cta-box:after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border: 1px solid #fff1;
        border-radius: 50%;
        right: -100px;
        bottom: -170px
    }

    .cta-box h2 {
        font: 55px/1.03 var(--font-heading);
        letter-spacing: -2px;
        margin: 15px auto
    }

        .cta-box h2 em {
            color: #dfbcae
        }

    .cta-box p {
        color: #c8beb8;
        font-size: 12px;
        margin: 18px 0 30px
    }

.public-footer {
    background: #292421;
    color: #d5cbc4;
    padding: 70px 0 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 70px
}

.footer-logo {
    color: #fff;
    margin-bottom: 20px
}

    .footer-logo .logo-mark {
        background: #a97968
    }

.footer-grid p {
    color: #92857e;
    font-size: 12px;
    line-height: 1.8;
    max-width: 370px
}

.footer-grid a, .footer-grid > div > span:not(.footer-label) {
    display: block;
    color: #a99d95;
    text-decoration: none;
    font-size: 11px;
    margin: 0 0 12px
}

    .footer-grid a:hover {
        color: #fff
    }

.footer-label {
    display: block;
    color: #e2d7d0;
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 18px
}

.footer-bottom {
    border-top: 1px solid #fff1;
    margin-top: 45px;
    padding: 20px 0;
    color: #716762;
    font-size: 9px;
    letter-spacing: .4px
}

.services-page-head {
    padding: 100px 0 80px;
    background: #eee3dc
}

    .services-page-head h1 {
        font: clamp(52px,7vw,82px)/.95 var(--font-heading);
        letter-spacing: -3px;
        margin: 20px 0
    }

    .services-page-head p {
        max-width: 570px;
        color: #71665f;
        line-height: 1.8;
        font-size: 13px
    }

.services-list-section {
    padding-top: 60px
}

.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px
}

.filter-chip {
    border: 1px solid var(--pub-line);
    background: #fff;
    border-radius: 99px;
    padding: 10px 17px;
    font-size: 10px;
    color: var(--pub-muted);
    cursor: pointer
}

    .filter-chip.active, .filter-chip:hover {
        background: var(--pub-dark);
        border-color: var(--pub-dark);
        color: #fff
    }

.services-all-grid {
    grid-template-columns: repeat(3,1fr)
}

.service-card-full .service-visual {
    height: 260px
}

.cta-section.compact {
    padding-bottom: 80px
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease,transform .7s ease
}

.reveal-delay {
    transition-delay: .12s
}

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

@media(max-width:1050px) {
    .public-nav {
        gap: 15px
    }

        .public-nav .nav-login {
            padding-left: 15px
        }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-copy {
        max-width: 760px
    }

    .hero-art {
        height: 450px
    }

    .hero-portrait {
        height: 410px
    }

    .service-showcase {
        grid-template-columns: repeat(2,1fr)
    }

    .story-grid, .experience-section .public-container {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .story-art {
        max-width: 600px;
        width: 100%
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

        .footer-grid > div:first-child {
            grid-column: 1/-1
        }
}

@media(max-width:760px) {
    .public-container {
        width: min(100% - 30px,1240px)
    }

    .public-nav-wrap {
        min-height: 70px
    }

    .mobile-menu-btn {
        display: block
    }

    .public-nav {
        display: none;
        position: absolute;
        left: 15px;
        right: 15px;
        top: 70px;
        background: #fffdf9;
        border: 1px solid var(--pub-line);
        padding: 12px;
        border-radius: 16px;
        box-shadow: 0 20px 50px #4a352b18;
        flex-direction: column;
        align-items: stretch;
        gap: 3px
    }

        .public-nav.open {
            display: flex
        }

        .public-nav a {
            padding: 11px 12px
        }

        .public-nav .nav-login {
            border: 0;
            padding-left: 12px
        }

        .public-nav .nav-book {
            text-align: center
        }

    .public-hero {
        min-height: auto
    }

    .hero-grid {
        padding-top: 65px
    }

    .hero-copy h1 {
        font-size: 55px;
        letter-spacing: -2px
    }

    .hero-art {
        height: 390px
    }

    .hero-portrait {
        height: 360px;
        width: 260px
    }

    .hero-floating-card {
        left: 0;
        bottom: 15px
    }

    .hero-stamp {
        right: 0;
        top: 10px
    }

    .hero-bottom {
        display: none
    }

    .section-heading {
        display: block
    }

        .section-heading > a {
            display: inline-block;
            margin-top: 20px
        }

    .public-section, .story-section, .experience-section {
        padding: 75px 0
    }

    .service-showcase, .services-all-grid {
        grid-template-columns: 1fr
    }

    .story-art {
        height: 390px
    }

    .story-card-main {
        inset: 0 45px 0 0;
        padding: 30px
    }

        .story-card-main b {
            font-size: 42px
        }

    .story-card-small {
        padding: 20px
    }

    .experience-steps {
        grid-template-columns: 1fr
    }

    .experience-step {
        min-height: 0
    }

        .experience-step h3 {
            margin-top: 25px
        }

    .cta-box {
        padding: 55px 25px
    }

        .cta-box h2 {
            font-size: 42px
        }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

        .footer-grid > div:first-child {
            grid-column: auto
        }

    .services-page-head {
        padding: 70px 0 55px
    }

        .services-page-head h1 {
            font-size: 55px
        }
}

/* ============================================================
   LUMISPA PUBLIC HOME — EDITORIAL / LUXURY SPA REDESIGN
   Appended intentionally so the authenticated customer portal
   styles above remain untouched.
   ============================================================ */
:root {
    --ls-ink: #2f2926;
    --ls-paper: #fffdf9;
    --ls-cream: #f5eee8;
    --ls-sand: #e9d9cf;
    --ls-rose: #a97968;
    --ls-rose2: #cba496;
    --ls-muted: #776b64;
    --ls-line: #e5d9d1;
    --ls-dark: #2c2623
}

.public-spa-body {
    font-family: var(--font-body);
    background: var(--ls-paper);
    color: var(--ls-ink)
}

    .public-spa-body .public-container {
        width: min(1180px,calc(100% - 56px))
    }

    .public-spa-body .public-header {
        background: rgba(255,253,249,.88);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(65,45,35,.08);
        z-index: 100
    }

    .public-spa-body .public-nav-wrap {
        min-height: 82px
    }

    .public-spa-body .public-logo {
        gap: 11px
    }

        .public-spa-body .public-logo b {
            font-family: var(--font-heading);
            font-size: 25px;
            letter-spacing: .2px
        }

        .public-spa-body .public-logo small {
            font-family: var(--font-body);
            font-size: 8px;
            letter-spacing: 2.2px
        }

    .public-spa-body .logo-mark {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--ls-dark);
        color: #f3ded3;
        font-family: var(--font-heading);
        font-size: 17px
    }

    .public-spa-body .public-nav {
        gap: 25px
    }

        .public-spa-body .public-nav a {
            position: relative;
            font-size: 10px;
            letter-spacing: .65px;
            text-transform: uppercase
        }

        .public-spa-body .public-nav a[data-nav-link]:after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -6px;
            height: 1px;
            background: var(--ls-rose);
            transition: right .3s cubic-bezier(.4,0,.2,1)
        }

        .public-spa-body .public-nav a[data-nav-link]:hover:after {
            right: 0
        }

        .public-spa-body .public-nav .nav-login {
            padding-left: 25px;
            border-color: var(--ls-line)
        }

        .public-spa-body .public-nav .nav-book {
            background: var(--ls-dark);
            border-color: var(--ls-dark);
            padding: 11px 17px
        }

            .public-spa-body .public-nav .nav-book:hover {
                background: var(--ls-rose);
                border-color: var(--ls-rose)
            }

.ls-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 75% 15%,#f9f1ea 0%,var(--ls-cream) 55%),var(--ls-cream);
    min-height: 735px;
    padding: 35px 0 0
}

.ls-hero-grid {
    display: grid;
    grid-template-columns: 1fr .88fr;
    gap: 70px;
    align-items: center;
    min-height: 650px
}

.ls-hero-copy {
    padding: 40px 0 70px;
    position: relative;
    z-index: 2
}

.public-kicker {
    font-family: var(--font-body);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 2.4px;
    color: var(--ls-rose);
    font-weight: 800
}

.ls-hero-copy h1 {
    font-family: var(--font-heading);
    font-size: clamp(60px,7.2vw,94px);
    line-height: .96;
    letter-spacing: -4px;
    font-weight: 500;
    margin: 24px 0 27px;
    max-width: 720px
}

    .ls-hero-copy h1 em, .ls-hero-copy h2 em, .section-heading h2 em, .ls-intro-copy em, .ls-editorial-copy em, .ls-experience-head em, .ls-cta h2 em {
        color: var(--ls-rose);
        font-style: italic
    }

.ls-lead {
    font-size: 14px;
    line-height: 1.9;
    color: var(--ls-muted);
    max-width: 530px;
    margin: 0
}

.ls-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 31px
}

.ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px 20px;
    transition: .25s ease
}

    .ls-btn span {
        font-size: 16px;
        line-height: 0
    }

.ls-btn {
    transition: background .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),color .3s ease,transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease
}

    .ls-btn span {
        transition: transform .3s cubic-bezier(.4,0,.2,1)
    }

    .ls-btn:hover span {
        transform: translate(3px,-3px)
    }

.ls-btn-dark {
    background: var(--ls-dark);
    color: #fff;
    border: 1px solid var(--ls-dark)
}

    .ls-btn-dark:hover {
        background: var(--ls-rose);
        border-color: var(--ls-rose);
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(169,121,104,.35)
    }

.ls-btn-outline {
    border: 1px solid var(--ls-dark);
    color: var(--ls-dark)
}

    .ls-btn-outline:hover {
        background: var(--ls-dark);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(44,38,35,.22)
    }

.ls-btn-light {
    background: #fff;
    color: var(--ls-dark);
    border: 1px solid #fff
}

    .ls-btn-light:hover {
        background: #ead6cd;
        border-color: #ead6cd;
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(0,0,0,.25)
    }

.ls-under-link {
    color: var(--ls-ink);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #b8a69c;
    padding-bottom: 5px
}

    .ls-under-link:hover {
        color: var(--ls-rose);
        border-color: var(--ls-rose)
    }

.ls-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9b8c84;
    font-size: 9px;
    letter-spacing: .7px;
    margin-top: 36px
}

    .ls-trust span {
        color: var(--ls-rose);
        font-size: 13px
    }

.ls-hero-visual {
    height: 600px;
    position: relative;
    z-index: 1
}

.ls-photo {
    position: absolute;
    overflow: hidden
}

.ls-photo-hero {
    inset: 0 25px 15px 40px;
    background: linear-gradient(150deg,#b98776 0%,#d7b5a6 45%,#967061 100%);
    box-shadow: 30px 35px 0 rgba(143,104,89,.11)
}

    .ls-photo-hero:before {
        content: "";
        position: absolute;
        width: 72%;
        height: 76%;
        right: -9%;
        bottom: -10%;
        border-radius: 50% 50% 0 0;
        background: linear-gradient(135deg,#e9d8cc,#b27f70);
        transform: rotate(9deg);
        opacity: .82
    }

    .ls-photo-hero:after {
        content: "";
        position: absolute;
        width: 44%;
        height: 62%;
        left: 13%;
        top: 12%;
        border-radius: 50% 50% 46% 46%;
        background: linear-gradient(145deg,#ead8cc,#a97667);
        box-shadow: 50px 55px 0 -20px rgba(72,53,45,.13);
        transform: rotate(-10deg);
        opacity: .95
    }

.ls-photo-orb {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    right: 15%;
    top: 10%;
    background: rgba(255,249,242,.16);
    border: 1px solid rgba(255,255,255,.38);
    z-index: 2;
    animation: lsFloat 7s ease-in-out infinite
}

.ls-photo-leaf {
    position: absolute;
    color: rgba(255,255,255,.5);
    font-size: 110px;
    line-height: 1;
    z-index: 4;
    transform: rotate(20deg);
    animation: lsFloat 6s ease-in-out infinite
}

.leaf-one {
    right: 4%;
    top: 27%
}

.leaf-two {
    left: 0;
    bottom: 19%;
    transform: rotate(-30deg);
    font-size: 75px;
    animation-delay: 1.2s
}

@keyframes lsFloat {
    0%,100% {
        transform: translateY(0) rotate(20deg)
    }

    50% {
        transform: translateY(-14px) rotate(20deg)
    }
}

.leaf-two, .leaf-two.ls-photo-leaf {
    animation-name: lsFloatAlt
}

@keyframes lsFloatAlt {
    0%,100% {
        transform: translateY(0) rotate(-30deg)
    }

    50% {
        transform: translateY(-10px) rotate(-30deg)
    }
}

.ls-photo-caption {
    position: absolute;
    z-index: 5;
    left: 31px;
    bottom: 32px;
    color: #fff
}

    .ls-photo-caption small {
        display: block;
        font-size: 8px;
        letter-spacing: 2px;
        margin-bottom: 9px
    }

    .ls-photo-caption strong {
        display: block;
        font: italic 34px/1 'Playfair Display',Georgia,serif
    }

.ls-floating-note {
    position: absolute;
    left: -7px;
    bottom: 53px;
    background: #fffdf9;
    box-shadow: 0 20px 45px rgba(63,42,33,.14);
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 15px 18px;
    z-index: 8;
    min-width: 245px;
    transition: transform .35s ease,box-shadow .35s ease
}

    .ls-floating-note:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 55px rgba(63,42,33,.2)
    }

    .ls-floating-note > span {
        width: 31px;
        height: 31px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #f0e0d8;
        color: var(--ls-rose)
    }

    .ls-floating-note b, .ls-floating-note small {
        display: block
    }

    .ls-floating-note b {
        font: 12px 'DM Sans',sans-serif
    }

    .ls-floating-note small {
        font-size: 9px;
        color: #988981;
        margin-top: 3px
    }

.ls-round-mark {
    position: absolute;
    right: -6px;
    top: 28px;
    width: 91px;
    height: 91px;
    border-radius: 50%;
    background: var(--ls-dark);
    color: #f0ddd4;
    display: grid;
    place-items: center;
    text-align: center;
    font: 24px/.8 'Playfair Display',Georgia,serif;
    z-index: 8;
    box-shadow: 0 14px 30px rgba(44,38,35,.2);
    animation: lsPulseGlow 4s ease-in-out infinite
}

@keyframes lsPulseGlow {
    0%,100% {
        box-shadow: 0 14px 30px rgba(44,38,35,.2)
    }

    50% {
        box-shadow: 0 14px 38px rgba(169,121,104,.45)
    }
}

    .ls-round-mark small {
        font: 7px 'DM Sans',sans-serif;
        letter-spacing: 2px
    }

.ls-hero-shape {
    position: absolute;
    border: 1px solid rgba(116,76,62,.11);
    border-radius: 50%;
    pointer-events: none
}

.ls-shape-a {
    width: 520px;
    height: 520px;
    right: -240px;
    top: -260px
}

.ls-shape-b {
    width: 350px;
    height: 350px;
    left: -210px;
    bottom: -260px
}

.ls-marquee {
    height: 85px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid var(--ls-line);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.ls-marquee-track {
    display: flex;
    align-items: center;
    gap: 23px;
    color: #927f75;
    font-size: 9px;
    letter-spacing: 2.5px;
    white-space: nowrap;
    animation: lsMarquee 26s linear infinite
}

    .ls-marquee-track span {
        transition: color .3s ease
    }

    .ls-marquee-track span:hover {
        color: var(--ls-rose)
    }

    .ls-marquee i {
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #c9aa9b
    }

@keyframes lsMarquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.ls-marquee:hover .ls-marquee-track {
    animation-play-state: paused
}

.ls-intro {
    background: #fff;
    padding: 105px 0
}

.ls-intro-grid {
    display: grid;
    grid-template-columns: .28fr 1fr;
    gap: 80px
}

.ls-intro-label {
    display: flex;
    justify-content: space-between;
    flex-direction: column
}

.ls-big-number {
    font: 90px/1 'Playfair Display',Georgia,serif;
    color: #dfcdc4
}

.ls-intro-copy h2 {
    font: 42px/1.12 'Playfair Display',Georgia,serif;
    font-weight: 500;
    letter-spacing: -1px;
    margin: 0 0 22px
}

.ls-intro-copy p {
    font-size: 13px;
    line-height: 1.95;
    color: var(--ls-muted);
    max-width: 730px;
    margin-bottom: 25px
}

.ls-services-section {
    background: #f8f2ed;
    padding-top: 105px
}

    .ls-services-section .section-heading {
        align-items: end;
        margin-bottom: 42px
    }

        .ls-services-section .section-heading h2 {
            font: 45px/1.05 'Playfair Display',Georgia,serif;
            font-weight: 500;
            letter-spacing: -1px;
            max-width: 700px;
            margin: 14px 0 0
        }

.ls-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.ls-service-card {
    background: #fff;
    min-width: 0;
    transition: transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease
}

    .ls-service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 55px rgba(63,42,33,.14)
    }


.ls-service-image {
    height: 330px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 25px
}

    .ls-service-image:not(:before):not(:after) {
        transition: transform .6s cubic-bezier(.4,0,.2,1)
    }

.ls-service-card:hover .ls-service-image {
    transform: scale(1.04)
}

.ls-service-content h3 {
    transition: color .3s ease
}

.ls-service-card:hover .ls-service-content h3 {
    color: var(--ls-rose)
}

    .ls-service-image:before, .ls-service-image:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(.1px)
    }

    .ls-service-image:before {
        width: 240px;
        height: 240px;
        right: -50px;
        top: -40px;
        background: rgba(255,255,255,.16)
    }

    .ls-service-image:after {
        width: 170px;
        height: 250px;
        left: 25%;
        bottom: -90px;
        background: rgba(68,48,41,.13);
        transform: rotate(25deg)
    }

.ls-tone-0 {
    background: linear-gradient(140deg,#c08f7e,#e1c2b5)
}

.ls-tone-1 {
    background: linear-gradient(140deg,#897a67,#c8b6a0)
}

.ls-tone-2 {
    background: linear-gradient(140deg,#8b6b61,#d0a998)
}

.ls-tone-3 {
    background: linear-gradient(140deg,#b39b83,#e0d0bd)
}

.ls-tone-4 {
    background: linear-gradient(140deg,#756c60,#b8a48d)
}

.ls-service-initials {
    font: 72px/1 'Playfair Display',Georgia,serif;
    color: rgba(255,255,255,.9);
    position: relative;
    z-index: 2
}

.ls-service-category, .ls-service-index {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-size: 8px;
    letter-spacing: 2px
}

.ls-service-category {
    top: 22px;
    left: 25px
}

.ls-service-index {
    right: 25px;
    bottom: 26px
}

.ls-service-content {
    padding: 24px 25px 25px
}

    .ls-service-content h3 {
        font: 25px/1.1 'Playfair Display',Georgia,serif;
        font-weight: 500;
        margin: 10px 0
    }

    .ls-service-content p {
        font-size: 11px;
        line-height: 1.75;
        color: var(--ls-muted);
        min-height: 58px;
        margin: 0
    }

.ls-service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--ls-line);
    font-size: 10px
}

    .ls-service-meta strong {
        font-size: 13px
    }

    .ls-service-meta span {
        color: #93857e
    }

.ls-editorial {
    padding: 120px 0;
    background: #ede2db
}

.ls-editorial-grid {
    display: grid;
    grid-template-columns: 1fr .92fr;
    gap: 100px;
    align-items: center
}

.ls-editorial-visual {
    height: 555px;
    position: relative
}

.ls-editorial-main {
    position: absolute;
    inset: 0 65px 0 0;
    background: linear-gradient(145deg,#a87665,#d6b4a5);
    overflow: hidden;
    padding: 42px;
    display: flex;
    align-items: flex-end;
    box-shadow: 25px 25px 0 #fffaf6;
    transition: transform .6s cubic-bezier(.4,0,.2,1)
}

.ls-editorial-visual:hover .ls-editorial-main {
    transform: translate(-6px,-6px)
}

    .ls-editorial-main:before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border: 1px solid rgba(255,255,255,.4);
        border-radius: 50%;
        right: -90px;
        top: -80px
    }

    .ls-editorial-main span {
        position: absolute;
        top: 34px;
        left: 38px;
        color: rgba(255,255,255,.45);
        font: 80px 'Playfair Display',Georgia,serif
    }

    .ls-editorial-main strong {
        color: #fff;
        font: 58px/.9 'Playfair Display',Georgia,serif;
        letter-spacing: -2px
    }

    .ls-editorial-main small {
        position: absolute;
        bottom: 38px;
        right: 38px;
        color: #fff;
        font-size: 8px;
        letter-spacing: 2px
    }

.ls-editorial-small {
    position: absolute;
    right: 0;
    bottom: 35px;
    background: var(--ls-dark);
    color: #fff;
    padding: 29px 32px;
    z-index: 2;
    box-shadow: 0 14px 35px rgba(42,31,27,.18)
}

    .ls-editorial-small span {
        display: block;
        font-size: 9px;
        letter-spacing: 2px
    }

    .ls-editorial-small em {
        display: block;
        color: #e5c8bb;
        font: italic 27px/1.02 'Playfair Display',Georgia,serif;
        margin-top: 8px
    }

.ls-editorial-copy h2 {
    font: 52px/1.03 'Playfair Display',Georgia,serif;
    font-weight: 500;
    letter-spacing: -2px;
    margin: 17px 0 22px
}

.ls-editorial-copy > p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--ls-muted);
    max-width: 570px
}

.ls-points {
    margin: 28px 0 30px;
    display: grid;
    gap: 12px
}

    .ls-points > div {
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 12px;
        align-items: start;
        padding: 12px 0;
        border-bottom: 1px solid rgba(80,55,44,.12)
    }

    .ls-points b {
        font: 17px 'Playfair Display',Georgia,serif;
        color: var(--ls-rose)
    }

    .ls-points span {
        font-size: 11px;
        font-weight: 700
    }

    .ls-points small {
        display: block;
        color: var(--ls-muted);
        font-weight: 400;
        margin-top: 3px
    }

.ls-stats {
    background: #fff;
    padding: 0 0 105px
}

.ls-stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--ls-line);
    border-bottom: 1px solid var(--ls-line)
}

    .ls-stats-grid > div {
        padding: 34px 25px;
        border-right: 1px solid var(--ls-line);
        transition: background .3s ease
    }

        .ls-stats-grid > div:hover {
            background: var(--ls-cream)
        }

        .ls-stats-grid > div:last-child {
            border-right: 0
        }

    .ls-stats-grid strong {
        display: block;
        font: 38px 'Playfair Display',Georgia,serif;
        color: var(--ls-rose)
    }

    .ls-stats-grid span {
        display: block;
        font-size: 9px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 700;
        margin: 8px 0
    }

    .ls-stats-grid small {
        display: block;
        font-size: 10px;
        line-height: 1.6;
        color: var(--ls-muted)
    }

.ls-experience {
    padding: 110px 0;
    background: #f8f2ed
}

.ls-experience-head {
    display: grid;
    grid-template-columns: .75fr 1fr .8fr;
    gap: 50px;
    align-items: end;
    margin-bottom: 55px
}

    .ls-experience-head h2 {
        font: 50px/1 'Playfair Display',Georgia,serif;
        font-weight: 500;
        letter-spacing: -2px;
        margin: 0
    }

    .ls-experience-head p {
        font-size: 12px;
        line-height: 1.8;
        color: var(--ls-muted);
        margin: 0
    }

.ls-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--ls-line);
    border-bottom: 1px solid var(--ls-line)
}

.ls-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 20px;
    padding: 35px 30px;
    border-right: 1px solid var(--ls-line);
    transition: background .3s ease
}

    .ls-step:hover {
        background: #fff
    }

    .ls-step:last-child {
        border-right: 0
    }

    .ls-step > span {
        font: 24px 'Playfair Display',Georgia,serif;
        color: var(--ls-rose)
    }

    .ls-step h3 {
        font: 24px 'Playfair Display',Georgia,serif;
        font-weight: 500;
        margin: 0 0 10px
    }

    .ls-step p {
        font-size: 11px;
        line-height: 1.7;
        color: var(--ls-muted);
        margin: 0
    }

.ls-quote {
    position: relative;
    padding: 110px 0;
    background: #fff;
    text-align: center
}

    .ls-quote:before {
        content: "“";
        position: absolute;
        left: 50%;
        top: 40px;
        transform: translateX(-50%);
        font: 220px/1 'Playfair Display',Georgia,serif;
        color: var(--ls-cream);
        z-index: 0;
        pointer-events: none
    }

    .ls-quote blockquote {
        position: relative;
        z-index: 1;
        font: italic 43px/1.2 'Playfair Display',Georgia,serif;
        max-width: 820px;
        margin: 22px auto;
        color: var(--ls-ink)
    }

.ls-quote-mark {
    font-size: 8px;
    letter-spacing: 3px;
    color: #9a8b83
}

.ls-cta {
    padding-top: 0
}

    .ls-cta .cta-box {
        position: relative;
        overflow: hidden;
        background: var(--ls-dark);
        padding: 95px 30px
    }

        .ls-cta .cta-box:before {
            content: "";
            position: absolute;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            right: -180px;
            top: -220px;
            background: radial-gradient(circle,rgba(169,121,104,.35),transparent 70%)
        }

        .ls-cta .cta-box:after {
            content: "";
            position: absolute;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            left: -160px;
            bottom: -200px;
            background: radial-gradient(circle,rgba(169,121,104,.22),transparent 70%)
        }

        .ls-cta .cta-box > * {
            position: relative;
            z-index: 1
        }

        .ls-cta .cta-box h2 {
            font: 58px/1.02 'Playfair Display',Georgia,serif;
            font-weight: 500;
            letter-spacing: -2px
        }

        .ls-cta .cta-box p {
            font-size: 11px
        }

    .ls-cta .public-kicker {
        color: #c99b8a
    }

.public-spa-body .public-footer {
    background: #26211f
}

.public-spa-body .footer-grid {
    padding-top: 10px
}

.public-spa-body .footer-bottom {
    font-size: 9px
}

@media(max-width:1050px) {
    .ls-hero-grid {
        grid-template-columns: 1fr .85fr;
        gap: 30px
    }

    .ls-hero-copy h1 {
        font-size: 70px
    }

    .ls-service-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .ls-editorial-grid {
        gap: 55px
    }

    .ls-experience-head {
        grid-template-columns: 1fr 1fr
    }

        .ls-experience-head p {
            grid-column: 2
        }

        .ls-experience-head .public-kicker {
            grid-column: 1
        }

        .ls-experience-head h2 {
            grid-column: 1/-1;
            grid-row: 2
        }

    .ls-stats-grid {
        grid-template-columns: repeat(2,1fr)
    }

        .ls-stats-grid > div:nth-child(2) {
            border-right: 0
        }

        .ls-stats-grid > div:nth-child(-n+2) {
            border-bottom: 1px solid var(--ls-line)
        }
}

@media(max-width:760px) {
    .public-spa-body .public-container {
        width: min(100% - 30px,1180px)
    }

    .ls-hero {
        padding-top: 0
    }

    .ls-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 60px
    }

    .ls-hero-copy {
        padding: 20px 0 20px
    }

        .ls-hero-copy h1 {
            font-size: 56px;
            letter-spacing: -2.5px
        }

    .ls-lead {
        font-size: 13px
    }

    .ls-hero-visual {
        height: 430px
    }

    .ls-photo-hero {
        inset: 0 22px 10px 22px
    }

    .ls-floating-note {
        left: 0;
        bottom: 30px
    }

    .ls-round-mark {
        right: 0
    }

    .ls-marquee {
        display: none
    }

    .ls-intro, .ls-editorial, .ls-experience, .ls-quote {
        padding: 75px 0
    }

    .ls-intro-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .ls-big-number {
        font-size: 60px
    }

    .ls-intro-copy h2 {
        font-size: 34px
    }

    .ls-services-section {
        padding-top: 75px
    }

        .ls-services-section .section-heading {
            display: block
        }

            .ls-services-section .section-heading h2 {
                font-size: 35px
            }

    .ls-service-grid {
        grid-template-columns: 1fr
    }

    .ls-service-image {
        height: 290px
    }

    .ls-editorial-grid {
        grid-template-columns: 1fr;
        gap: 55px
    }

    .ls-editorial-visual {
        height: 410px
    }

    .ls-editorial-main {
        padding: 30px;
        inset: 0 42px 0 0
    }

        .ls-editorial-main strong {
            font-size: 43px
        }

    .ls-editorial-small {
        padding: 22px
    }

    .ls-editorial-copy h2 {
        font-size: 43px
    }

    .ls-stats {
        padding-bottom: 75px
    }

    .ls-stats-grid {
        grid-template-columns: 1fr
    }

        .ls-stats-grid > div, .ls-stats-grid > div:nth-child(2) {
            border-right: 0;
            border-bottom: 1px solid var(--ls-line)
        }

            .ls-stats-grid > div:last-child {
                border-bottom: 0
            }

    .ls-experience-head {
        display: block;
        margin-bottom: 35px
    }

        .ls-experience-head h2 {
            font-size: 42px;
            margin: 16px 0
        }

    .ls-steps {
        grid-template-columns: 1fr
    }

    .ls-step {
        border-right: 0;
        border-bottom: 1px solid var(--ls-line);
        padding: 27px 5px
    }

        .ls-step:last-child {
            border-bottom: 0
        }

    .ls-quote blockquote {
        font-size: 31px
    }

    .ls-cta .cta-box {
        padding: 65px 22px
    }

        .ls-cta .cta-box h2 {
            font-size: 43px
        }

    .ls-actions {
        flex-wrap: wrap;
        gap: 18px
    }

    .public-spa-body .footer-grid {
        grid-template-columns: 1fr
    }
}

/* Customer booking gateway — lấy cảm hứng từ bố cục cổng khách hàng tham chiếu */
.customer-portal-body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
    color: #111;
    font-family: var(--font-body)
}

.customer-portal-topbar {
    width: min(1290px,calc(100% - 40px));
    margin: 20px auto 0;
    height: 52px;
    background: #1d1b1a;
    color: #fff;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08)
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font: 700 20px var(--font-heading)
}

    .portal-brand span {
        font: 600 16px Arial,sans-serif;
        letter-spacing: .2px
    }

.portal-welcome {
    justify-self: start;
    margin-left: 26px;
    font-size: 14px;
    font-weight: 700
}

.portal-staff-link {
    justify-self: end;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700
}

    .portal-staff-link:hover {
        text-decoration: underline
    }

.customer-portal-page {
    width: min(1160px,calc(100% - 60px));
    margin: 72px auto 35px
}

.customer-portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 470px
}

.portal-existing {
    padding: 8px 90px 25px 50px;
    border-right: 1px solid #bdbdbd
}

.portal-new {
    padding: 18px 45px 25px 90px;
    display: flex;
    align-items: flex-start
}

.portal-new-inner {
    max-width: 470px;
    width: 100%
}

.portal-kicker {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #8b6658;
    font-weight: 800;
    margin-bottom: 16px
}

.portal-existing h1, .portal-new h2 {
    font: 700 30px Arial,sans-serif;
    margin: 0 0 16px;
    color: #111
}

.portal-description {
    font-size: 16px;
    line-height: 1.42;
    text-align: center;
    margin: 0 auto 28px;
    max-width: 450px;
    color: #111
}

.portal-existing .portal-description {
    text-align: center
}

.portal-login-form {
    max-width: 430px
}

    .portal-login-form label, .portal-new label {
        display: block;
        font-size: 15px;
        margin: 0 0 7px
    }

    .portal-login-form > label:not(:first-of-type) {
        margin-top: 14px
    }

    .portal-login-form input, .portal-new input {
        width: 100%;
        height: 43px;
        border: 1px solid #aaa;
        border-radius: 0;
        background: #fff;
        padding: 0 12px;
        font-size: 15px;
        outline: none;
        box-sizing: border-box
    }

        .portal-login-form input:focus, .portal-new input:focus {
            border-color: #3f6f5b;
            box-shadow: 0 0 0 2px rgba(63,111,91,.12)
        }

.portal-password-wrap {
    position: relative
}

    .portal-password-wrap input {
        padding-right: 48px
    }

.portal-eye {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 43px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: #111
}

.portal-forgot {
    display: block;
    text-align: right;
    margin: 11px 0 9px;
    color: #1599dc;
    font-size: 14px
}

.portal-remember {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px !important;
    font-size: 14px !important
}

    .portal-remember input {
        width: 38px !important;
        height: 38px !important;
        accent-color: #d7c4ee
    }

    .portal-remember span {
        display: block
    }

.portal-login-button, .portal-continue {
    height: 51px;
    border: 0;
    border-radius: 6px;
    background: #a8dced;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s
}

.portal-login-button {
    display: block;
    width: 195px;
    margin: 0 auto
}

    .portal-login-button:hover, .portal-continue:hover {
        background: #7dc9e0
    }

.portal-validation {
    color: #a13f3f;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px
}

.portal-new h2 {
    margin-top: 0
}

.portal-new .portal-description {
    text-align: center;
    margin-bottom: 34px
}

.portal-new label {
    margin-bottom: 7px
}

.portal-continue {
    display: block;
    width: 195px;
    margin: 8px 0 0 auto
}

.portal-new-note {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    margin: 14px 0 0;
    text-align: right
}

.portal-back-home {
    display: block;
    text-align: center;
    color: #7f594e;
    text-decoration: none;
    font-size: 13px;
    margin-top: 35px
}

    .portal-back-home:hover {
        text-decoration: underline
    }

@media(max-width:850px) {
    .customer-portal-topbar {
        grid-template-columns: auto 1fr auto;
        width: calc(100% - 24px)
    }

    .portal-welcome {
        margin-left: 15px
    }

    .customer-portal-page {
        width: calc(100% - 30px);
        margin-top: 40px
    }

    .customer-portal-grid {
        grid-template-columns: 1fr
    }

    .portal-existing {
        border-right: 0;
        border-bottom: 1px solid #bbb;
        padding: 10px 20px 40px
    }

    .portal-new {
        padding: 40px 20px
    }

    .portal-new-inner {
        max-width: 100%
    }

    .portal-new .portal-description {
        margin-bottom: 25px
    }

    .portal-login-form {
        max-width: 100%
    }

    .portal-continue {
        margin-left: auto
    }

    .portal-login-button {
        width: 100%;
        max-width: 260px
    }

    .portal-brand span {
        display: none
    }
}


/* ===== FONT SYSTEM (thống nhất toàn site) ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.005em; }
h4, h5, h6, th, label { font-family: var(--font-body); }

/* ===== LOGO ===== */
.logo-mark img, .customer-brand-mark img { width: 72%; height: 72%; object-fit: contain; display: block; }
.hero-orb img { width: 58%; height: 58%; object-fit: contain; display: block; }
.ai-avatar img { width: 66%; height: 66%; object-fit: contain; display: block; }
.public-logo .logo-mark, .customer-brand-mark { overflow: hidden; }

.ls-editorial-main span img { width: 84px; height: 84px; object-fit: contain; opacity: .55; display: block; }
/* Thẻ dịch vụ trên trang chủ khách hàng */
.ls-service-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(47, 64, 55, 0.09);
}

    .ls-service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(47, 64, 55, 0.16);
    }
    .ls-service-image {
    height: 220px;
}

.ls-service-content {
    padding: 20px 22px 22px;
}

.ls-service-content h3 {
    font-size: 19px;
    line-height: 1.35;
}
.ls-service-image.has-photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .ls-service-image.has-photo .ls-service-initials,
    .ls-service-image.has-photo::before,
    .ls-service-image.has-photo::after {
        display: none;
    }

    .ls-service-image.has-photo .ls-service-category,
    .ls-service-image.has-photo .ls-service-index {
        text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
    }
/* Nút Đăng nhập trên thanh menu trang chủ */
.public-spa-body .public-nav .nav-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid #9c7567;
    border-radius: 999px;
    background: #fff8f3;
    color: #49362f;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

    .public-spa-body .public-nav .nav-login:hover,
    .public-spa-body .public-nav .nav-login:focus-visible {
        background: #9c7567;
        border-color: #9c7567;
        color: #fff;
    }
.public-spa-body .public-nav .nav-book {
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .public-spa-body .public-nav .nav-book:hover,
    .public-spa-body .public-nav .nav-book:focus-visible {
        background: #9c7567;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(73, 54, 47, .22);
    }
.customer-sidebar-bottom form {
    margin: 0;
}

.customer-logout {
    width: 100%;
    border: 1px solid #6b5750;
    border-radius: 10px;
    background: transparent;
    color: #f0e7e1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    .customer-logout:hover,
    .customer-logout:focus-visible {
        background: #9c7567;
        border-color: #9c7567;
        color: #fff;
        transform: translateX(4px);
    }