:root {
    color-scheme: dark;
    --ink: #fff8ec;
    --muted: rgba(255, 248, 236, 0.58);
    --line: rgba(198, 166, 100, 0.22);
    --cream: #050505;
    --paper: #111111;
    --gold: #c6a664;
    --rose: #151515;
    --sage: #171717;
    --danger: #9f2f2f;
}

/* Homepage rebuild: original logo, mobile-first public brand experience. */
body:not(.admin-body) .site-shell {
    background: #050505;
    color: #fff8ec;
}

body:not(.admin-body) .site-header {
    background: rgba(0, 0, 0, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body:not(.admin-body) .nav {
    min-height: 78px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.1em;
}

.brand-logo-frame {
    width: 58px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(198, 166, 100, 0.28);
    border-radius: 8px;
    background: #050505;
    box-shadow: 0 14px 34px rgba(198, 166, 100, 0.16);
}

.brand-logo-frame img {
    width: 88px;
    max-width: none;
    height: auto;
}

.footer-inner {
    display: grid;
    gap: 28px;
}

.footer-brand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.footer-links,
.footer-contact {
    display: grid;
    gap: 10px;
}

.footer-links a {
    color: rgba(255, 248, 236, 0.68);
    font-weight: 780;
}

.footer-links a:hover {
    color: #c6a664;
}

.home-luxe {
    --luxe-gold: #c6a664;
    --luxe-gold-deep: #b98611;
    --luxe-cream: #fff8ec;
    --luxe-muted: rgba(255, 248, 236, 0.68);
    --luxe-line: rgba(255, 248, 236, 0.14);
    --luxe-card: rgba(255, 248, 236, 0.06);
    --luxe-card-strong: rgba(255, 248, 236, 0.09);
    overflow: hidden;
    background: #050505;
    color: var(--luxe-cream);
}

.luxe-wrap {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
}

.luxe-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    border: 1px solid rgba(198, 166, 100, 0.32);
    border-radius: 999px;
    background: rgba(198, 166, 100, 0.12);
    color: var(--luxe-gold);
    padding: 7px 13px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.luxe-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 20px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.luxe-button-gold {
    background: var(--luxe-gold);
    color: #050505;
    box-shadow: 0 18px 46px rgba(198, 166, 100, 0.22);
}

.luxe-button-ghost {
    border: 1px solid rgba(255, 248, 236, 0.18);
    background: rgba(255, 255, 255, 0.055);
    color: var(--luxe-cream);
}

.luxe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.luxe-hero {
    position: relative;
    padding: 42px 0 36px;
    border-bottom: 1px solid rgba(198, 166, 100, 0.2);
}

.luxe-hero-grid,
.luxe-story-grid,
.luxe-booking-grid,
.luxe-policy-grid {
    display: grid;
    gap: 36px;
}

.luxe-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
}

.luxe-hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.6rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0;
}

.luxe-hero-line {
    max-width: 650px;
    margin: 0;
    color: var(--luxe-gold);
    font-size: 1.32rem;
    font-weight: 780;
    line-height: 1.35;
}

.luxe-hero-copy-text {
    max-width: 620px;
    margin: 0;
    color: var(--luxe-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.luxe-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
}

.luxe-hero-stats div {
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: var(--luxe-card);
    padding: 16px;
}

.luxe-hero-stats strong {
    display: block;
    color: var(--luxe-gold);
    font-size: 1.6rem;
    line-height: 1;
}

.luxe-hero-stats span {
    display: block;
    margin-top: 7px;
    color: rgba(255, 248, 236, 0.62);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.luxe-hero-media {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(198, 166, 100, 0.28);
    border-radius: 8px;
    background: #0b0b0b;
    box-shadow: 0 42px 110px rgba(198, 166, 100, 0.14);
}

.luxe-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: luxeHeroSlide 15.6s infinite;
    animation-delay: calc(var(--slide-order) * 5.2s);
}

.luxe-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luxe-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.22)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 58%);
}

.luxe-slide-panel {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    padding: 18px;
    backdrop-filter: blur(14px);
}

.luxe-slide-panel span,
.luxe-product-card span,
.luxe-phone-top span {
    color: var(--luxe-gold);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.luxe-slide-panel h2 {
    margin: 10px 0 8px;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
}

.luxe-slide-panel p {
    margin: 0;
    color: rgba(255, 248, 236, 0.72);
    line-height: 1.6;
}

.luxe-slide-panel a {
    display: inline-flex;
    margin-top: 14px;
    color: var(--luxe-gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.luxe-slide-dots {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateY(34px);
}

.luxe-slide-dots span {
    width: 28px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
}

.luxe-slide-dots span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--luxe-gold);
    transform: scaleX(0);
    transform-origin: left;
    animation: luxeHeroDot 15.6s infinite;
    animation-delay: calc(var(--dot-order) * 5.2s);
}

.luxe-trust-band {
    background: var(--luxe-gold);
    color: #080808;
    padding: 24px 0;
}

.luxe-trust-grid {
    display: grid;
    gap: 12px;
}

.luxe-trust-grid article {
    border-radius: 8px;
    background: rgba(255, 248, 236, 0.56);
    padding: 18px;
}

.luxe-trust-grid span,
.luxe-step-grid span,
.luxe-policy-cards span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: #050505;
    color: var(--luxe-gold);
    font-size: 0.78rem;
    font-weight: 950;
}

.luxe-trust-grid h2 {
    margin: 16px 0 8px;
    color: #050505;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.luxe-trust-grid p {
    margin: 0;
    color: rgba(5, 5, 5, 0.66);
    font-size: 0.9rem;
    line-height: 1.55;
}

.luxe-section {
    padding: 64px 0;
}

.luxe-section-head {
    display: grid;
    gap: 22px;
    align-items: end;
    margin-bottom: 30px;
}

.luxe-section-head h2,
.luxe-story h2,
.luxe-booking-grid h2,
.luxe-policy-intro h2,
.luxe-final-card h2 {
    max-width: 780px;
    margin: 18px 0 0;
    color: #fff8ec;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.1rem;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.luxe-section-head p,
.luxe-story p,
.luxe-booking-grid > div > p,
.luxe-policy-intro p,
.luxe-final-card p {
    max-width: 650px;
    margin: 14px 0 0;
    color: var(--luxe-muted);
    line-height: 1.75;
}

.luxe-path-grid,
.luxe-product-grid,
.luxe-step-grid,
.luxe-policy-cards {
    display: grid;
    gap: 16px;
}

.luxe-path-card {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: #111;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.luxe-path-card img,
.luxe-product-card img,
.luxe-story-images img,
.luxe-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luxe-path-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.12));
}

.luxe-card-mark {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 999px;
    background: var(--luxe-gold);
    color: #050505;
    font-weight: 950;
}

.luxe-path-card div {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
}

.luxe-path-card p {
    margin: 0 0 10px;
    color: var(--luxe-gold);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.luxe-path-card h3 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0;
}

.luxe-path-card small {
    display: block;
    margin-top: 12px;
    color: rgba(255, 248, 236, 0.68);
    font-size: 0.92rem;
    line-height: 1.6;
}

.luxe-path-card strong,
.luxe-product-card a {
    display: inline-flex;
    margin-top: 16px;
    color: var(--luxe-gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.luxe-story {
    background: #0c0b09;
}

.luxe-story-images {
    position: relative;
    min-height: 520px;
}

.luxe-story-images img {
    position: absolute;
    overflow: hidden;
    border: 8px solid rgba(255, 248, 236, 0.08);
    border-radius: 8px;
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.34);
}

.luxe-story-images img:first-child {
    top: 0;
    left: 0;
    width: 74%;
    height: 390px;
    transform: rotate(-4deg);
}

.luxe-story-images img:nth-child(2) {
    right: 0;
    bottom: 0;
    width: 74%;
    height: 390px;
    transform: rotate(4deg);
}

.luxe-product-card {
    overflow: hidden;
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: var(--luxe-card);
    padding: 10px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.luxe-product-card img {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 8px;
    background: #1b1b1b;
}

.luxe-product-card div {
    padding: 18px 10px 12px;
}

.luxe-product-card h3 {
    margin: 10px 0 8px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 880;
    line-height: 1.2;
}

.luxe-product-card p {
    margin: 0;
    color: var(--luxe-muted);
    line-height: 1.55;
}

.luxe-product-card strong {
    display: block;
    margin-top: 12px;
    color: var(--luxe-gold);
}

.luxe-booking-grid {
    align-items: center;
}

.luxe-step-grid article,
.luxe-policy-cards article,
.luxe-final-card {
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: var(--luxe-card);
    padding: 20px;
}

.luxe-step-grid h3,
.luxe-policy-cards h3 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
}

.luxe-step-grid p,
.luxe-policy-cards p {
    margin: 0;
    color: var(--luxe-muted);
    line-height: 1.65;
}

.luxe-phone {
    width: min(100%, 390px);
    margin: 0 auto;
    border: 1px solid rgba(255, 248, 236, 0.12);
    border-radius: 34px;
    background: #111;
    padding: 12px;
    box-shadow: 0 42px 120px rgba(198, 166, 100, 0.12);
}

.luxe-phone-screen {
    overflow: hidden;
    border-radius: 26px;
    background: #050505;
    padding: 18px;
}

.luxe-phone-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--luxe-line);
    padding-bottom: 18px;
}

.luxe-phone-top h3 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1.1;
}

.luxe-phone-top strong {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 999px;
    background: var(--luxe-gold);
    color: #050505;
}

.luxe-phone-screen article {
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: var(--luxe-card);
    margin-top: 12px;
    padding: 14px;
}

.luxe-phone-screen article div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.luxe-phone-screen article span {
    color: var(--luxe-gold);
    font-weight: 900;
}

.luxe-phone-screen article small {
    border-radius: 999px;
    background: rgba(198, 166, 100, 0.14);
    color: var(--luxe-gold);
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.luxe-phone-screen h4 {
    margin: 12px 0 4px;
    color: #ffffff;
}

.luxe-phone-screen p {
    margin: 0;
    color: rgba(255, 248, 236, 0.58);
    line-height: 1.5;
}

.luxe-phone-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.luxe-phone-actions span {
    border-radius: 999px;
    background: var(--luxe-gold);
    color: #050505;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.luxe-policy-section {
    padding: 64px 0;
    background: var(--luxe-gold);
    color: #050505;
}

.luxe-policy-intro {
    border-radius: 8px;
    background: #050505;
    color: #fff8ec;
    padding: 24px;
}

.luxe-policy-intro h2,
.luxe-policy-intro p {
    color: inherit;
}

.luxe-policy-cards article {
    background: #050505;
    color: #fff8ec;
}

.luxe-gallery-grid {
    display: grid;
    grid-auto-rows: 150px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.luxe-gallery-grid figure {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--luxe-line);
    border-radius: 8px;
    background: var(--luxe-card);
    margin: 0;
}

.luxe-gallery-grid .is-tall {
    grid-row: span 2;
}

.luxe-gallery-grid .is-wide {
    grid-column: span 2;
}

.luxe-final {
    padding-bottom: 86px;
}

.luxe-final-card {
    display: grid;
    justify-items: start;
    gap: 16px;
    background:
        linear-gradient(135deg, rgba(255, 248, 236, 0.09), rgba(198, 166, 100, 0.08)),
        #080808;
    padding: 28px;
}

@keyframes luxeHeroSlide {
    0%,
    28% {
        opacity: 1;
    }

    35%,
    100% {
        opacity: 0;
    }
}

@keyframes luxeHeroDot {
    0% {
        transform: scaleX(0);
    }

    28% {
        transform: scaleX(1);
    }

    35%,
    100% {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxe-hero-slide,
    .luxe-slide-dots span::after {
        animation: none;
    }

    .luxe-hero-slide:first-child {
        opacity: 1;
    }
}

@media (min-width: 680px) {
    .luxe-hero-stats,
    .luxe-step-grid,
    .luxe-policy-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .luxe-gallery-grid {
        grid-auto-rows: 180px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .footer-inner {
        grid-template-columns: 1.2fr 0.8fr 1fr;
        align-items: start;
    }
}

@media (min-width: 900px) {
    .luxe-hero {
        padding: 58px 0 42px;
    }

    .luxe-hero-grid {
        grid-template-columns: 0.98fr 1.02fr;
        align-items: center;
        min-height: 720px;
    }

    .luxe-hero h1 {
        font-size: 7rem;
    }

    .luxe-hero-line {
        font-size: 1.55rem;
    }

    .luxe-hero-media {
        min-height: 680px;
    }

    .luxe-slide-panel {
        left: 26px;
        right: 26px;
        bottom: 26px;
        padding: 26px;
    }

    .luxe-slide-panel h2 {
        font-size: 3rem;
    }

    .luxe-trust-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .luxe-section {
        padding: 92px 0;
    }

    .luxe-section-head {
        grid-template-columns: 1fr auto;
    }

    .luxe-section-head h2,
    .luxe-story h2,
    .luxe-booking-grid h2,
    .luxe-policy-intro h2,
    .luxe-final-card h2 {
        font-size: 4.6rem;
    }

    .luxe-path-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .luxe-story-grid,
    .luxe-booking-grid,
    .luxe-policy-grid {
        grid-template-columns: 0.92fr 1.08fr;
        align-items: center;
    }

    .luxe-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .luxe-gallery-grid {
        grid-auto-rows: 190px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .luxe-final-card {
        align-items: center;
        justify-items: center;
        text-align: center;
        padding: 54px;
    }

    .luxe-final-card h2,
    .luxe-final-card p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 760px) {
    body:not(.admin-body) .nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
    }

    body:not(.admin-body) .nav-links {
        width: 100%;
        padding-bottom: 6px;
    }

    .brand-logo-frame {
        width: 54px;
        height: 42px;
    }

    .brand-logo-frame img {
        width: 82px;
    }

    .luxe-hero h1 {
        font-size: 4.05rem;
    }

    .luxe-hero-media {
        min-height: 520px;
    }

    .luxe-section-head h2,
    .luxe-story h2,
    .luxe-booking-grid h2,
    .luxe-policy-intro h2,
    .luxe-final-card h2 {
        font-size: 2.85rem;
    }

    .luxe-path-card {
        min-height: 390px;
    }

    .luxe-story-images {
        min-height: 420px;
    }

    .luxe-story-images img:first-child,
    .luxe-story-images img:nth-child(2) {
        height: 310px;
    }

    .luxe-gallery-grid .is-wide {
        grid-column: span 2;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

.site-shell {
    min-height: 100vh;
}

.container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header,
.admin-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(251, 247, 241, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.nav {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 0.93rem;
}

.button,
button.button {
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    font-weight: 700;
    cursor: pointer;
}

.button.secondary {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
}

.button.gold {
    background: var(--gold);
}

.hero {
    min-height: 78vh;
    display: grid;
    align-items: end;
    background-image: linear-gradient(180deg, rgba(23, 18, 14, 0.12), rgba(23, 18, 14, 0.72)), url("/site-media/hero-braids.jpg");
    background-size: cover;
    background-position: center;
    color: white;
}

.hero-inner {
    padding: 96px 0 56px;
}

.hero h1 {
    max-width: 780px;
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 8vw, 5.8rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.hero p {
    max-width: 640px;
    font-size: 1.15rem;
    line-height: 1.65;
}

.section {
    padding: 64px 0;
}

.section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.section-title h2,
.page-title h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: 0;
}

.section-title p,
.page-title p {
    color: var(--muted);
    max-width: 620px;
    line-height: 1.7;
}

.grid {
    display: grid;
    gap: 18px;
}

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

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

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

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.muted {
    color: var(--muted);
}

.price {
    color: var(--gold);
    font-weight: 800;
}

.status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    background: #f2e7d4;
    color: #6a4311;
    font-size: 0.82rem;
    font-weight: 800;
}

.status.good {
    background: #e6f1e8;
    color: #225830;
}

.status.warn {
    background: #faefd4;
    color: #7d4e00;
}

.status.bad {
    background: #f8dfdd;
    color: var(--danger);
}

.visual-card {
    min-height: 310px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    border: 1px solid var(--line);
}

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

.field {
    display: grid;
    gap: 7px;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 44px;
    background: white;
    padding: 10px 12px;
    color: var(--ink);
}

.field textarea {
    min-height: 110px;
}

.alert {
    padding: 14px 16px;
    border-radius: 8px;
    background: #e8f1eb;
    color: #225830;
    border: 1px solid #c8dfcd;
    margin: 16px 0;
}

.alert.error {
    background: #fae5e2;
    border-color: #efc2bd;
    color: #843129;
}

.admin-body {
    background: #f7f1e9;
    padding-bottom: 88px;
}

.admin-main {
    padding: 24px 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
}

.admin-sidebar {
    align-self: start;
    position: sticky;
    top: 92px;
    display: grid;
    gap: 8px;
}

.admin-sidebar a,
.bottom-nav a {
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--muted);
    font-weight: 800;
}

.admin-sidebar a.active,
.admin-sidebar a:hover,
.bottom-nav a.active {
    background: var(--ink);
    color: white;
}

.admin-content {
    display: grid;
    gap: 18px;
}

.admin-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-title h1 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: 0;
}

.metric {
    display: grid;
    gap: 6px;
}

.metric strong {
    font-size: 1.65rem;
}

.table-list {
    display: grid;
    gap: 10px;
}

.list-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    gap: 14px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.bottom-nav {
    display: none;
}

.footer {
    padding: 40px 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
    .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
    }

    .nav-links {
        overflow-x: auto;
        width: 100%;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .hero {
        min-height: 72vh;
    }

    .grid.three,
    .grid.four,
    .grid.two,
    .form-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 42px 0;
    }

    .section-title,
    .admin-title {
        align-items: start;
        flex-direction: column;
    }

    .admin-sidebar {
        display: none;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--paper);
        border-top: 1px solid var(--line);
        padding: 8px;
        gap: 6px;
    }

    .bottom-nav a {
        min-height: 48px;
        display: grid;
        place-items: center;
        text-align: center;
        font-size: 0.78rem;
        padding: 6px;
    }

    .list-row {
        grid-template-columns: 1fr;
    }
}

/* Luxury UI translation from the supplied React direction. */
:root {
    color-scheme: dark;
    --ink: #fff8ec;
    --muted: rgba(255, 248, 236, 0.64);
    --line: rgba(255, 255, 255, 0.12);
    --cream: #050505;
    --paper: rgba(255, 248, 236, 0.06);
    --gold: #c6a664;
    --gold-deep: #b7791f;
    --blush: #d8a1a1;
    --sage: #6f806d;
    --black-soft: #080808;
}

body {
    background: linear-gradient(180deg, #050505 0%, #11100d 44%, #070706 100%);
    color: var(--ink);
}

body::before {
    content: none;
}

.site-header,
.admin-header {
    background: rgba(0, 0, 0, 0.74);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
}

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #fef08a, #facc15, #b7791f);
    color: #050505;
    box-shadow: 0 0 45px rgba(250, 204, 21, 0.24);
}

.nav-links {
    color: rgba(255, 255, 255, 0.62);
}

.nav-links a:not(.button) {
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-links a:not(.button):hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.button,
button.button {
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    box-shadow: 0 0 40px rgba(250, 204, 21, 0.2);
}

.button.secondary {
    background: rgba(255, 255, 255, 0.055);
    color: white;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.button.gold {
    background: var(--gold);
    color: #050505;
}

.hero {
    min-height: 82vh;
    align-items: center;
    background-image:
        linear-gradient(110deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.42)),
        url("/site-media/hero-braids.jpg");
}

.hero-inner {
    padding: 88px 0;
}

.luxury-hero-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: 54px;
}

.hero h1 {
    max-width: 860px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(4rem, 10vw, 7.8rem);
    font-weight: 950;
    line-height: 0.86;
}

.gold-text {
    color: var(--gold);
}

.eyebrow,
.hero-kicker {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.1);
    color: var(--gold);
    padding: 9px 14px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
    margin-top: 36px;
}

.hero-stat {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
    padding: 18px;
    backdrop-filter: blur(18px);
}

.hero-stat strong {
    display: block;
    color: var(--gold);
    font-size: 1.75rem;
}

.hero-stat span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.showcase-panel {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 32px;
    background: linear-gradient(135deg, #fff8ec, #c6a664 46%, #6f806d 100%);
    box-shadow: 0 45px 170px rgba(250, 204, 21, 0.2);
}

.showcase-card {
    position: absolute;
    overflow: hidden;
    width: 42%;
    min-width: 190px;
    border-radius: 24px;
    background: #050505;
    padding: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.showcase-card.light {
    background: white;
}

.showcase-card.one {
    left: 24px;
    top: 32px;
    rotate: -6deg;
}

.showcase-card.two {
    right: 28px;
    top: 88px;
    rotate: 5deg;
}

.showcase-card.three {
    left: 62px;
    bottom: 124px;
    rotate: 4deg;
}

.showcase-image {
    min-height: 255px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.showcase-label {
    position: absolute;
    left: 26px;
    bottom: 26px;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    padding: 9px 13px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.booking-strip {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.92);
    padding: 26px;
    color: white;
    backdrop-filter: blur(18px);
}

.booking-strip h3 {
    margin: 8px 0;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 950;
    line-height: 1;
}

.action-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    padding: 10px 13px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section {
    padding: 86px 0;
}

.section-title h2,
.page-title h1 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 950;
    line-height: 0.96;
}

.section-title p,
.page-title p,
.muted {
    color: var(--muted);
}

.card,
.list-row,
.glass-card {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.16);
}

.card {
    padding: 26px;
}

.card h3 {
    font-size: 1.35rem;
    font-weight: 950;
    color: white;
}

.service-tile {
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    padding: 30px;
    transition: transform 180ms ease, border-color 180ms ease;
}

.service-tile:hover {
    transform: translateY(-8px);
    border-color: rgba(250, 204, 21, 0.45);
}

.service-tile.gold {
    background: linear-gradient(135deg, #fff8ec, #c6a664, #b7791f);
    color: #050505;
}

.service-tile.gold .muted,
.service-tile.gold .price,
.service-tile.gold h3 {
    color: #050505;
}

.icon-badge {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    font-weight: 950;
}

.service-rule-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.service-rule-list span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
    padding: 8px 11px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-tile.gold .service-rule-list span {
    background: rgba(0, 0, 0, 0.14);
    color: rgba(0, 0, 0, 0.68);
}

.product-luxury-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    padding: 12px;
    backdrop-filter: blur(18px);
    transition: transform 180ms ease, border-color 180ms ease;
}

.product-luxury-card:hover {
    transform: translateY(-8px);
    border-color: rgba(250, 204, 21, 0.45);
}

.product-luxury-image {
    min-height: 300px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.product-luxury-body {
    padding: 22px;
}

.price {
    color: var(--gold);
    font-weight: 950;
}

.status {
    background: rgba(250, 204, 21, 0.14);
    color: var(--gold);
    border: 1px solid rgba(250, 204, 21, 0.24);
}

.visual-card {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
}

.callout-panel {
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 24px;
    background: var(--gold);
    color: #050505;
    padding: 34px;
    box-shadow: 0 40px 140px rgba(250, 204, 21, 0.16);
}

.callout-panel h2,
.callout-panel h3,
.callout-panel .muted {
    color: #050505;
}

.phone-mockup {
    max-width: 390px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 52px;
    background: #050505;
    padding: 12px;
    box-shadow: 0 45px 150px rgba(250, 204, 21, 0.18);
}

.phone-screen {
    overflow: hidden;
    border-radius: 44px;
    background: #000;
}

.phone-top,
.phone-bottom {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.phone-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    padding: 16px;
}

.admin-body {
    background: linear-gradient(180deg, #050505 0%, #11100d 100%);
}

.admin-sidebar a,
.bottom-nav a {
    color: rgba(255, 255, 255, 0.62);
    border-radius: 18px;
}

.admin-sidebar a.active,
.admin-sidebar a:hover,
.bottom-nav a.active {
    background: var(--gold);
    color: #050505;
}

.field input,
.field select,
.field textarea,
.list-row input,
.list-row select,
.card input,
.card select,
.card textarea {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.14);
    color: white;
}

.field label {
    color: rgba(255, 255, 255, 0.62);
}

.bottom-nav {
    background: rgba(0, 0, 0, 0.92);
    border-top-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
}

.footer {
    background: rgba(0, 0, 0, 0.34);
    border-top-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 980px) {
    .luxury-hero-grid {
        grid-template-columns: 1fr;
    }

    .showcase-panel {
        min-height: 560px;
    }
}

@media (max-width: 680px) {
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .showcase-card {
        width: 48%;
        min-width: 150px;
    }

    .showcase-card.three {
        left: 24px;
    }

    .booking-strip {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 18px;
        border-radius: 28px;
    }
}

.home-slider {
    position: relative;
    min-height: calc(100vh - 68px);
    overflow: hidden;
    background: #050505;
    color: white;
}

.home-slider-track,
.home-slide {
    position: absolute;
    inset: 0;
}

.home-slide {
    display: grid;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.2) 100%),
        var(--slide-image);
    background-size: cover;
    background-position: center;
    animation: home-slide-fade 21s infinite;
    animation-delay: calc(var(--slide-index) * 7s);
}

.home-slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, #050505);
}

.home-slide-content {
    position: relative;
    z-index: 1;
    padding: 96px 0 120px;
}

.home-slide-script {
    margin: 0 0 18px;
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 6vw, 5.6rem);
    font-style: italic;
    line-height: 0.95;
}

.home-slide h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(4rem, 12vw, 9.5rem);
    font-weight: 950;
    line-height: 0.82;
    text-transform: uppercase;
}

.home-slide-subtitle {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.home-slide-content > p:not(.home-slide-script):not(.home-slide-subtitle) {
    max-width: 620px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.8;
}

.home-slider-status {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
}

.home-slider-dots,
.home-slider-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-slider-dots span {
    display: block;
    width: 36px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.home-slider-dots span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--gold);
    animation: home-dot-fill 21s infinite;
    animation-delay: calc(var(--dot-index) * 7s);
}

.home-slider-mini {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    padding: 8px;
    backdrop-filter: blur(16px);
}

.home-slider-mini span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 9px 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.care-editorial {
    background: linear-gradient(180deg, #050505, #11100d);
}

.care-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 56px;
}

.care-photo-stack {
    position: relative;
    min-height: 650px;
}

.care-photo-stack img {
    position: absolute;
    width: min(74%, 410px);
    min-height: 520px;
    object-fit: cover;
    border: 10px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
}

.care-photo-primary {
    left: 0;
    top: 0;
    transform: rotate(-5deg);
}

.care-photo-secondary {
    right: 0;
    bottom: 0;
    transform: rotate(6deg);
}

.care-copy h2 {
    max-width: 760px;
    margin: 28px 0 24px;
    font-size: clamp(2.6rem, 6vw, 5.8rem);
    font-weight: 950;
    line-height: 0.92;
}

.care-copy p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.02rem;
    line-height: 1.85;
}

.feature-rail-section {
    padding: 26px 0;
    background: var(--gold);
    color: #050505;
}

.feature-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.feature-rail article {
    min-height: 170px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.38);
    padding: 18px;
}

.feature-rail .icon-badge {
    width: 42px;
    height: 42px;
    background: #050505;
    color: var(--gold);
}

.feature-rail h3 {
    margin: 18px 0 8px;
    color: #050505;
    font-size: 1.05rem;
    font-weight: 950;
}

.feature-rail p {
    margin: 0;
    color: rgba(0, 0, 0, 0.68);
    font-size: 0.88rem;
    line-height: 1.55;
}

.service-door-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.service-door {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 24px;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.84)),
        var(--door-image);
    background-size: cover;
    background-position: center;
    transition: transform 180ms ease, border-color 180ms ease;
}

.service-door:hover {
    transform: translateY(-8px);
    border-color: rgba(250, 204, 21, 0.55);
}

.service-door span,
.service-door strong {
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.service-door h3 {
    max-width: 260px;
    margin: 12px 0 20px;
    color: white;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 950;
    line-height: 0.92;
}

.product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.product-tabs span {
    border: 1px solid rgba(250, 204, 21, 0.26);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.08);
    color: var(--gold);
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.product-tabs span:first-child {
    background: var(--gold);
    color: #050505;
}

.gallery-section {
    background: #0d0c0a;
}

.home-gallery-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.home-gallery-grid figure {
    min-height: 260px;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.home-gallery-grid figure.tall {
    grid-row: span 2;
    min-height: 532px;
}

.home-gallery-grid figure.wide {
    grid-column: span 2;
}

.home-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.home-gallery-grid figure:hover img {
    transform: scale(1.045);
}

@keyframes home-slide-fade {
    0%,
    28% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    33%,
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.04);
    }
}

@keyframes home-dot-fill {
    0% {
        transform: scaleX(0);
    }

    28% {
        transform: scaleX(1);
    }

    33%,
    100% {
        transform: scaleX(0);
    }
}

@media (max-width: 980px) {
    .care-grid,
    .feature-rail,
    .service-door-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .home-slider {
        min-height: 760px;
    }

    .home-slide {
        background-position: center top;
    }

    .home-slide-content {
        padding: 72px 0 150px;
    }

    .home-slide h1 {
        font-size: clamp(3.5rem, 20vw, 5.8rem);
    }

    .home-slider-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .care-grid,
    .feature-rail,
    .service-door-grid,
    .home-gallery-grid {
        grid-template-columns: 1fr;
    }

    .care-photo-stack {
        min-height: 560px;
    }

    .care-photo-stack img {
        width: 78%;
        min-height: 390px;
    }

    .home-gallery-grid figure,
    .home-gallery-grid figure.tall,
    .home-gallery-grid figure.wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 360px;
    }
}

.cms-panel {
    display: grid;
    gap: 22px;
}

.cms-stack,
.cms-section-list {
    display: grid;
    gap: 18px;
}

.cms-editor-box,
.cms-page,
.cms-add-block {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.24);
    padding: 18px;
}

.cms-page {
    padding: 0;
    overflow: hidden;
}

.cms-page summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    cursor: pointer;
    font-weight: 950;
}

.cms-page summary small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.cms-page-form,
.cms-add-block {
    margin: 18px;
}

.section-title.compact {
    align-items: center;
    margin-bottom: 16px;
}

.section-title.compact h3 {
    margin: 0;
}

.form-grid.mini {
    grid-template-columns: 0.72fr 1.28fr;
}

.cms-thumb {
    width: 112px;
    height: 84px;
    border-radius: 12px;
    object-fit: cover;
}

.cms-actions,
.cms-remove-form,
.media-delete {
    display: flex;
    justify-content: flex-end;
}

.button.danger,
button.button.danger {
    border-color: rgba(216, 90, 90, 0.36);
    color: #ffb4aa;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.media-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.media-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.media-card-body,
.media-delete {
    display: grid;
    gap: 9px;
    padding: 14px;
}

.media-card label {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.media-card input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.44);
    color: white;
    padding: 8px 10px;
}

.cms-public-hero {
    padding-top: 96px;
}

.cms-hero-image {
    min-height: 560px;
}

.cms-render-stack {
    display: grid;
    gap: 26px;
}

.cms-public-block {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    padding: clamp(24px, 5vw, 44px);
}

.cms-public-block h2 {
    max-width: 840px;
    margin: 0 0 16px;
    color: white;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 0.98;
}

.cms-copy {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    line-height: 1.85;
}

.cms-public-block.image-block {
    align-items: center;
}

.cms-public-block.image-block img {
    width: 100%;
    max-height: 620px;
    border-radius: 18px;
    object-fit: cover;
}

.cms-small-gallery {
    margin-top: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.contact-pill {
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.1);
    color: var(--gold);
    padding: 11px 14px;
    font-size: 0.8rem;
    font-weight: 950;
}

.booking-layout {
    display: grid;
    grid-template-columns: 0.76fr 1.24fr;
    align-items: start;
    gap: 22px;
    margin-top: 34px;
}

.booking-summary-card {
    position: sticky;
    top: 92px;
    border: 1px solid rgba(250, 204, 21, 0.26);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.14), rgba(255, 255, 255, 0.055));
    padding: 24px;
}

.booking-summary-card h2 {
    margin: 18px 0;
    color: white;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 950;
    line-height: 0.96;
}

.booking-summary-lines {
    display: grid;
    gap: 10px;
}

.booking-summary-lines div,
.booking-total-box,
.booking-money-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    padding: 13px;
}

.booking-summary-lines span,
.booking-total-box span,
.booking-money-box span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.booking-total-box {
    margin: 14px 0;
    background: var(--gold);
    color: #050505;
}

.booking-total-box span {
    color: rgba(0, 0, 0, 0.58);
}

.booking-total-box strong {
    font-size: 1.8rem;
}

.booking-money-box {
    align-items: flex-start;
    flex-direction: column;
}

.booking-money-box strong {
    color: var(--gold);
    font-size: 1.35rem;
}

.booking-summary-note,
.booking-policy-box {
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 14px;
    background: rgba(250, 204, 21, 0.08);
    color: rgba(255, 248, 236, 0.78);
    padding: 14px;
    line-height: 1.6;
}

.booking-form {
    gap: 16px;
}

.booking-addon-grid,
.admin-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.booking-addon,
.admin-check-grid label {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    padding: 13px;
}

.booking-addon span {
    display: grid;
    gap: 3px;
    flex: 1;
}

.booking-addon small {
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.35;
}

.booking-addon b {
    color: var(--gold);
}

.calendar-hours,
.calendar-day-list,
.service-admin-options {
    display: grid;
    gap: 14px;
}

.calendar-hour-row {
    display: grid;
    grid-template-columns: 1fr 110px 110px auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    padding: 12px;
}

.calendar-hour-row input {
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.44);
    color: white;
    padding: 8px 10px;
}

.calendar-day-card {
    display: grid;
    gap: 12px;
}

.calendar-day-card h3 {
    margin: 0;
    color: var(--gold);
}

.service-admin-card {
    display: grid;
    gap: 22px;
}

.service-admin-options {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
}

.service-admin-options h3 {
    margin: 0 0 12px;
}

.payment-board,
.email-template-grid {
    display: grid;
    gap: 18px;
}

.payment-card,
.email-template-card {
    display: grid;
    gap: 20px;
}

.payment-card-head,
.payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.payment-card-head h3 {
    margin: 10px 0 6px;
}

.payment-amounts div {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.24);
    padding: 14px;
}

.payment-amounts span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.payment-amounts strong {
    color: var(--gold);
    font-size: 1.35rem;
}

.email-body-field {
    min-height: 300px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.5;
}

.email-preview {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 16px;
    background: rgba(250, 204, 21, 0.08);
    padding: 18px;
}

.email-preview h3 {
    margin: 0;
    color: white;
}

.email-preview pre {
    overflow: auto;
    max-height: 340px;
    margin: 0;
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    line-height: 1.65;
}

.email-variable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.email-variable-list span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.74);
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.payment-instructions {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.08);
    padding: 22px;
}

.payment-instructions h3 {
    margin: 0;
}

@media (max-width: 980px) {
    .media-grid,
    .cms-small-gallery,
    .booking-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .form-grid.mini,
    .media-grid,
    .cms-small-gallery,
    .booking-layout,
    .booking-addon-grid,
    .admin-check-grid,
    .calendar-hour-row {
        grid-template-columns: 1fr;
    }

    .booking-summary-card {
        position: static;
    }

    .cms-page summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-card-head,
    .payment-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .cms-hero-image {
        min-height: 380px;
    }
}

.category-tabs {
    margin: 28px 0 10px;
}

.category-tabs a,
.service-rule-list a {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
    padding: 8px 11px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.category-tabs a.active {
    background: var(--gold);
    color: #050505;
}

.product-grid {
    margin-top: 28px;
}

.product-luxury-image {
    position: relative;
}

.product-stock-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.pagination-wrap {
    margin-top: 24px;
}

.product-detail-grid {
    align-items: start;
}

.product-detail-image {
    min-height: 560px;
}

.product-gallery-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.product-gallery-thumb {
    min-height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background-size: cover;
    background-position: center;
}

.product-order-panel {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.product-total-card,
.payment-instructions-card {
    border: 1px solid rgba(250, 204, 21, 0.26);
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.1);
    padding: 22px;
}

.product-total-card strong {
    display: block;
    margin-top: 8px;
    color: var(--gold);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 950;
    line-height: 1;
}

.product-total-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.bank-detail-list,
.order-totals {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.bank-detail-list div,
.order-totals div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.bank-detail-list span,
.order-totals span {
    color: var(--muted);
}

.list-row.simple {
    grid-template-columns: 1fr auto;
}

.product-admin-list,
.order-admin-list {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.product-admin-card,
.order-admin-card {
    display: grid;
    gap: 22px;
}

.product-admin-head,
.order-admin-head,
.order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.product-admin-head h2,
.order-admin-head h2 {
    margin: 10px 0 4px;
    color: white;
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    line-height: 1;
}

.product-option-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
}

.inline-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.inline-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inline-checks input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

.order-admin-contact {
    display: grid;
    justify-items: end;
    gap: 4px;
    color: var(--muted);
}

.order-admin-contact strong {
    color: white;
}

.subscription-admin-list {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.subscription-admin-card {
    display: grid;
    gap: 22px;
}

.subscription-admin-head,
.subscription-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.subscription-admin-head h2 {
    margin: 10px 0 4px;
    color: white;
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    line-height: 1;
}

.subscription-money {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.subscription-money strong {
    color: var(--gold);
    font-size: 1.65rem;
}

.subscription-money span,
.subscription-progress-top span {
    color: var(--muted);
}

.subscription-progress {
    display: grid;
    gap: 10px;
}

.subscription-progress-track {
    overflow: hidden;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.subscription-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gold);
}

.subscription-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.subscription-action-box {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
}

.subscription-action-box input,
.subscription-action-box select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    padding: 9px 11px;
}

.subscription-action-box label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.subscription-action-box input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

.customer-admin-list {
    display: grid;
    gap: 14px;
}

.customer-admin-card {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
    align-items: center;
    color: inherit;
}

.customer-admin-card h2 {
    margin: 10px 0 4px;
    color: white;
    font-size: clamp(1.35rem, 4vw, 2rem);
}

.customer-admin-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.customer-admin-stats span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.customer-profile-grid,
.customer-history-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
    margin-bottom: 18px;
}

.customer-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.private-note-box {
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 14px;
    background: rgba(250, 204, 21, 0.08);
    color: rgba(255, 255, 255, 0.82);
    padding: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.account-section .card {
    background: rgba(10, 10, 10, 0.92);
    border-color: rgba(198, 166, 100, 0.16);
}

.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}

.account-tabs a {
    border: 1px solid rgba(198, 166, 100, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    padding: 10px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.account-tabs a.is-active,
.account-tabs a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #050505;
}

.account-summary-grid,
.account-overview-grid,
.account-list,
.account-actions,
.account-detail-list {
    display: grid;
    gap: 14px;
}

.account-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.account-metric {
    color: inherit;
    text-decoration: none;
}

.account-metric span,
.account-list-meta span,
.account-detail-list span,
.account-record span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.account-metric strong {
    display: block;
    color: var(--gold);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1;
    margin: 10px 0;
}

.account-metric small,
.account-record p,
.account-panel p {
    color: rgba(255, 255, 255, 0.72);
}

.account-panel h2 {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2rem);
    margin: 0 0 12px;
}

.account-record {
    display: grid;
    gap: 10px;
}

.account-record strong,
.account-list-card h2 {
    color: #fff;
}

.account-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.account-actions form {
    margin: 0;
}

.account-form .form-grid,
.account-list-card {
    display: grid;
    gap: 16px;
}

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

.account-list-card {
    align-items: center;
    color: inherit;
    grid-template-columns: 1fr auto;
    text-decoration: none;
}

.account-list-card p {
    color: rgba(255, 255, 255, 0.72);
    margin: 8px 0 0;
}

.account-list-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    min-width: 190px;
}

.account-list-meta strong {
    color: var(--gold);
    font-size: 1.15rem;
}

.account-detail-list {
    gap: 0;
}

.account-detail-list div {
    align-items: center;
    border-bottom: 1px solid rgba(198, 166, 100, 0.12);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 11px 0;
}

.account-detail-list div:last-child {
    border-bottom: 0;
}

.account-detail-list strong {
    color: #fff;
    text-align: right;
}

.treatment-timeline {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.treatment-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    padding: 16px;
}

.treatment-card h3 {
    margin: 10px 0;
}

.treatment-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.treatment-photo-card {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background-size: cover;
    background-position: center;
}

.treatment-photo-card::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.62));
}

.treatment-photo-card span,
.treatment-photo-card small {
    position: absolute;
    z-index: 1;
    left: 10px;
}

.treatment-photo-card span {
    bottom: 10px;
    color: white;
    font-weight: 900;
}

.treatment-photo-card small {
    top: 10px;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    padding: 5px 8px;
    font-weight: 900;
}

.report-metrics {
    margin: 18px 0;
}

.admin-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 680px) {
    .product-detail-image {
        min-height: 420px;
    }

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

    .product-admin-head,
    .order-admin-head,
    .order-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .order-admin-contact {
        justify-items: start;
    }

    .bank-detail-list div,
    .order-totals div {
        flex-direction: column;
        gap: 4px;
    }

    .subscription-admin-head,
    .subscription-progress-top {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-actions {
        align-items: stretch;
        justify-content: flex-start;
    }

    .subscription-money {
        justify-items: start;
    }

    .subscription-actions-grid {
        grid-template-columns: 1fr;
    }

    .customer-admin-card,
    .customer-profile-grid,
    .customer-history-grid,
    .account-summary-grid,
    .account-form .form-grid,
    .account-list-card,
    .treatment-card,
    .treatment-photo-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }

    .account-list-meta {
        justify-items: start;
    }

    .account-detail-list div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .account-detail-list strong {
        text-align: left;
    }

    .customer-admin-stats {
        justify-content: flex-start;
    }
}

/* Premium polish pass: admin app usability, empty states and mobile-safe forms. */
html,
body {
    overflow-x: hidden;
}

.admin-content,
.admin-title,
.card,
.list-row,
.form-grid,
.booking-form,
.admin-accordion,
.booking-admin-card {
    min-width: 0;
}

.admin-title > div,
.admin-title-actions,
.field,
.field input,
.field select,
.field textarea {
    min-width: 0;
}

.field small,
.help-text {
    color: rgba(255, 248, 236, 0.52);
    font-size: 0.78rem;
    line-height: 1.5;
}

.admin-title-actions,
.empty-actions,
.booking-card-actions,
.payment-actions,
.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex: 0 0 auto;
    accent-color: var(--gold);
}

.toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.toggle-card,
.checkbox-card,
.admin-check-grid label,
.booking-policy-box label,
.inline-checks label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.26);
    padding: 14px;
    color: rgba(255, 248, 236, 0.78);
    font-weight: 850;
}

.toggle-card strong,
.checkbox-card strong {
    display: block;
    color: white;
    font-size: 0.95rem;
}

.toggle-card small {
    display: block;
    margin-top: 3px;
}

.toggle-card:has(input:checked),
.checkbox-card:has(input:checked),
.admin-check-grid label:has(input:checked),
.booking-policy-box label:has(input:checked) {
    border-color: rgba(250, 204, 21, 0.42);
    background: rgba(250, 204, 21, 0.1);
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.08);
}

.checkbox-card.small {
    min-height: 48px;
    padding: 10px 12px;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 248, 236, 0.72);
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-tab span {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.admin-tab.active {
    background: var(--gold);
    color: #050505;
}

.admin-tab.active span {
    background: rgba(0, 0, 0, 0.18);
    color: #050505;
}

.filter-panel {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, minmax(130px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    padding: 18px;
}

.compact-filter {
    grid-template-columns: 1fr auto;
}

.filter-actions .button {
    width: 100%;
}

.empty-state {
    display: grid;
    place-items: start;
    gap: 14px;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 0%, rgba(250, 204, 21, 0.18), transparent 34%),
        rgba(255, 255, 255, 0.055);
    padding: clamp(24px, 5vw, 44px);
}

.empty-state.compact {
    padding: 20px;
}

.empty-state h2,
.empty-state h3 {
    margin: 0;
    color: white;
    font-size: clamp(1.55rem, 5vw, 2.8rem);
    font-weight: 950;
    line-height: 0.98;
}

.empty-state p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
    font-weight: 950;
}

.command-money-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.command-money-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.command-metric {
    position: relative;
    overflow: hidden;
}

.command-metric span,
.command-metric small {
    color: var(--muted);
}

.command-metric strong {
    color: white;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.command-metric.urgent {
    border-color: rgba(250, 204, 21, 0.34);
}

.command-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 18px;
}

.command-panel {
    display: grid;
    align-content: start;
    gap: 16px;
}

.needs-action-list,
.quick-action-grid,
.admin-card-grid,
.location-admin-grid {
    display: grid;
    gap: 12px;
}

.needs-action-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.needs-action-card,
.quick-action-grid a,
.mini-admin-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.24);
    padding: 18px;
}

.needs-action-card span,
.needs-action-card small {
    color: var(--muted);
}

.needs-action-card strong {
    display: block;
    margin: 8px 0;
    color: var(--gold);
    font-size: 2rem;
}

.quick-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-action-grid a {
    min-height: 76px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 950;
    text-align: center;
}

.quick-action-grid a:first-child,
.quick-action-grid a:nth-child(2) {
    background: var(--gold);
    color: #050505;
}

.mini-feed {
    display: grid;
    gap: 8px;
}

.mini-feed a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.mini-feed span {
    color: var(--gold);
    font-weight: 900;
}

.booking-admin-list {
    display: grid;
    gap: 16px;
}

.booking-admin-card {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    padding: 22px;
}

.booking-admin-card.compact {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.booking-card-main,
.booking-card-top,
.booking-date-box,
.location-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.booking-card-main {
    justify-content: flex-start;
}

.booking-card-top h2,
.product-admin-head h2,
.subscription-admin-head h2 {
    margin: 10px 0 5px;
}

.booking-time,
.booking-date-box {
    border-radius: 16px;
    background: var(--gold);
    color: #050505;
    padding: 12px 14px;
    font-weight: 950;
}

.booking-date-box {
    align-items: flex-end;
    flex-direction: column;
}

.booking-card-details {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.booking-card-details div {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.24);
    padding: 13px;
}

.booking-card-details span,
.booking-date-box span {
    color: rgba(255, 248, 236, 0.58);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.booking-date-box span {
    color: rgba(0, 0, 0, 0.58);
}

.booking-card-details strong {
    color: white;
}

.admin-accordion {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
}

.admin-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}

.admin-accordion > summary::-webkit-details-marker {
    display: none;
}

.admin-accordion > summary strong {
    display: block;
    color: white;
    font-size: 1.08rem;
}

.admin-accordion > summary small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.4;
}

.admin-accordion > summary b {
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.12);
    color: var(--gold);
    padding: 8px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.accordion-body {
    padding: 0 22px 22px;
}

.service-list-board {
    display: grid;
    gap: 12px;
}

.admin-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-admin-card h3 {
    margin: 12px 0 5px;
    color: white;
}

.mini-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mini-card-facts span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.76);
    padding: 7px 10px;
    font-size: 0.75rem;
    font-weight: 900;
}

.product-summary-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-summary-row img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
}

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

.location-admin-card {
    display: grid;
    gap: 16px;
}

.location-admin-head strong {
    color: var(--gold);
    font-size: 1.6rem;
}

.settings-card-stack {
    display: grid;
    gap: 16px;
}

.settings-save-bar {
    position: sticky;
    bottom: 88px;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
}

.email-helper-panel,
.email-editor-grid {
    display: grid;
    gap: 18px;
}

.email-editor-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
}

.email-variable-list button,
.email-variable-list span {
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.74);
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 850;
    cursor: pointer;
}

.booking-step-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.booking-step-rail span {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.08);
    color: rgba(255, 248, 236, 0.72);
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.booking-step-rail b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #050505;
}

.booking-summary-toggle {
    display: grid;
    gap: 14px;
}

.booking-summary-toggle > summary {
    display: none;
}

.booking-selection-list {
    display: grid;
    gap: 9px;
    margin-bottom: 12px;
}

.booking-selection-list div {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 9px;
}

.booking-selection-list span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.booking-selection-list strong {
    color: white;
}

.booking-summary-note.strong {
    border-color: rgba(250, 204, 21, 0.4);
    color: var(--gold);
    font-weight: 900;
}

.booking-form-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.booking-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.booking-form-section h2 {
    margin: 10px 0 0;
    color: white;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    line-height: 1;
}

.booking-form-section p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.booking-policy-box {
    display: grid;
    gap: 10px;
}

@media (max-width: 1180px) {
    .command-money-grid,
    .command-money-grid.compact,
    .booking-card-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 860px) {
    .admin-main {
        padding-bottom: 104px;
    }

    .command-grid,
    .email-editor-grid,
    .location-admin-grid,
    .admin-card-grid,
    .quick-action-grid,
    .needs-action-list,
    .booking-step-rail {
        grid-template-columns: 1fr;
    }

    .booking-admin-card.compact,
    .booking-card-top,
    .booking-card-main,
    .payment-card-head,
    .product-admin-head,
    .location-admin-head,
    .mini-feed a {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-date-box {
        align-items: flex-start;
    }

    .admin-title-actions,
    .admin-title-actions .button,
    .empty-actions,
    .empty-actions .button,
    .booking-card-actions,
    .booking-card-actions .button,
    .booking-card-actions form,
    .booking-card-actions button,
    .payment-actions,
    .payment-actions .button {
        width: 100%;
    }

    .booking-summary-card {
        position: static;
    }

    .booking-summary-toggle > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        color: var(--gold);
        cursor: pointer;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
}

@media (max-width: 680px) {
    .filter-panel,
    .compact-filter,
    .toggle-grid,
    .command-money-grid,
    .command-money-grid.compact,
    .booking-card-details,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .admin-accordion > summary,
    .product-summary-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-summary-row img {
        width: 100%;
        height: 160px;
    }

    .booking-step-rail span {
        border-radius: 16px;
    }

    .home-slide-content,
    .cms-public-hero {
        padding-top: 56px;
    }
}

/* Rescue redesign pass: calmer premium public site and phone-friendly admin app. */
:root {
    --ab-ink: #fff8ec;
    --ab-soft-ink: rgba(255, 248, 236, 0.76);
    --ab-muted: rgba(255, 248, 236, 0.58);
    --ab-cream: #050505;
    --ab-paper: #111111;
    --ab-panel: #151515;
    --ab-line: rgba(198, 166, 100, 0.22);
    --ab-gold: #c6a664;
    --ab-gold-soft: #c6a664;
    --ab-black: #050505;
    --ab-dark-card: #171717;
    --ab-radius: 18px;
    --ab-shadow: 0 22px 70px rgba(39, 24, 10, 0.12);
}

* {
    letter-spacing: 0 !important;
}

body:not(.admin-body) {
    color-scheme: dark;
    background:
        radial-gradient(circle at 12% 0%, rgba(201, 151, 45, 0.12), transparent 28rem),
        linear-gradient(180deg, #050505 0%, var(--ab-cream) 44%, #080808 100%);
    color: var(--ab-ink);
}

.container {
    width: min(1180px, calc(100% - 40px));
}

body:not(.admin-body) .site-header {
    background: rgba(14, 12, 10, 0.88);
    border-bottom: 1px solid rgba(255, 250, 242, 0.1);
    backdrop-filter: blur(18px);
}

body:not(.admin-body) .nav {
    min-height: 82px;
}

.brand {
    gap: 12px;
    color: var(--ab-gold-soft);
    font-size: 0.92rem;
    font-weight: 850;
}

.brand-mark {
    width: 46px;
    height: 46px;
    box-shadow: 0 16px 36px rgba(201, 151, 45, 0.25);
}

body:not(.admin-body) .nav-links {
    gap: 8px;
}

body:not(.admin-body) .nav-links a:not(.button) {
    color: rgba(255, 250, 242, 0.7);
    padding: 9px 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-transform: none;
}

body:not(.admin-body) .nav-links a:not(.button):hover {
    color: #fffaf2;
    background: rgba(255, 250, 242, 0.08);
}

.button,
button.button {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #f2cb58, #c9972d);
    color: #17110b;
    padding: 0 18px;
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: none;
    box-shadow: 0 14px 34px rgba(201, 151, 45, 0.24);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.button:hover,
button.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(201, 151, 45, 0.3);
}

.button.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

body:not(.admin-body) main {
    background: transparent;
}

body:not(.admin-body) .section {
    padding: 86px 0;
}

body:not(.admin-body) .page-title {
    max-width: 780px;
    margin-bottom: 34px;
}

body:not(.admin-body) .page-title h1,
body:not(.admin-body) .section-title h2,
body:not(.admin-body) .care-copy h2 {
    color: var(--ab-ink);
    font-size: 4.1rem;
    font-weight: 850;
    line-height: 0.98;
}

body:not(.admin-body) .page-title p,
body:not(.admin-body) .section-title p,
body:not(.admin-body) .muted {
    color: var(--ab-muted);
}

.eyebrow,
.hero-kicker {
    border-color: rgba(201, 151, 45, 0.26);
    background: rgba(201, 151, 45, 0.1);
    color: var(--ab-gold);
    padding: 8px 13px;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: none;
}

.home-slider {
    min-height: calc(100vh - 82px);
    background: var(--ab-black);
}

.home-slide {
    background-image:
        linear-gradient(90deg, rgba(9, 7, 5, 0.78) 0%, rgba(9, 7, 5, 0.46) 50%, rgba(9, 7, 5, 0.2) 100%),
        var(--slide-image);
    background-position: center;
}

.home-slide-content {
    padding: 110px 0 122px;
}

.home-slide-script {
    color: #f0c95a;
    font-size: 4.1rem;
    line-height: 1;
}

.home-slide h1 {
    max-width: 760px;
    color: #fffaf2;
    font-size: 6.9rem;
    font-weight: 900;
    line-height: 0.88;
}

.home-slide-subtitle {
    color: #f0c95a;
    font-size: 0.88rem;
    font-weight: 850;
    text-transform: none;
}

.home-slide-content > p:not(.home-slide-script):not(.home-slide-subtitle) {
    max-width: 560px;
    color: rgba(255, 250, 242, 0.78);
    font-size: 1.02rem;
}

.home-slider-mini {
    background: rgba(14, 12, 10, 0.72);
}

.care-editorial,
.gallery-section {
    background: #12100d;
    color: #fffaf2;
}

.care-grid {
    gap: 72px;
}

.care-photo-stack {
    min-height: 610px;
}

.care-photo-stack img {
    border-width: 8px;
    border-color: rgba(255, 250, 242, 0.1);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.care-copy h2,
.gallery-section .section-title h2 {
    color: #fffaf2 !important;
}

.care-copy p,
.gallery-section .section-title p {
    color: rgba(255, 250, 242, 0.7) !important;
}

.feature-rail-section {
    padding: 34px 0;
    background: #080808;
}

.feature-rail article {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.service-door {
    min-height: 390px;
    border-radius: 18px;
    box-shadow: var(--ab-shadow);
}

.service-door h3 {
    font-size: 2.65rem;
    font-weight: 850;
}

body:not(.admin-body) .card,
body:not(.admin-body) .glass-card,
body:not(.admin-body) .list-row {
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    background: var(--ab-paper);
    box-shadow: var(--ab-shadow);
    backdrop-filter: none;
}

body:not(.admin-body) .card h3,
body:not(.admin-body) .card h2,
body:not(.admin-body) .glass-card h3 {
    color: var(--ab-ink);
}

body:not(.admin-body) .service-tile {
    min-height: 310px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    background: var(--ab-paper);
    color: var(--ab-ink);
    box-shadow: var(--ab-shadow);
}

body:not(.admin-body) .service-tile.gold {
    background: #151515;
    color: var(--ab-ink);
}

body:not(.admin-body) .service-tile h3 {
    color: var(--ab-ink);
    font-size: 1.35rem;
    line-height: 1.12;
}

body:not(.admin-body) .service-rule-list span,
body:not(.admin-body) .category-tabs a,
body:not(.admin-body) .service-rule-list a {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ab-soft-ink);
}

body:not(.admin-body) .category-tabs a.active,
body:not(.admin-body) .product-tabs span:first-child {
    background: var(--ab-gold);
    color: #050505;
}

body:not(.admin-body) .product-luxury-card {
    overflow: hidden;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    background: var(--ab-paper);
    box-shadow: var(--ab-shadow);
    backdrop-filter: none;
}

body:not(.admin-body) .product-luxury-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background-color: #080808;
}

body:not(.admin-body) .product-luxury-body h3 {
    color: var(--ab-ink);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
}

body:not(.admin-body) .price {
    color: var(--ab-gold);
}

body:not(.admin-body) .status {
    border-color: rgba(201, 151, 45, 0.22);
    background: rgba(198, 166, 100, 0.1);
    color: var(--ab-gold);
}

body:not(.admin-body) .status.good {
    background: rgba(198, 166, 100, 0.1);
    color: var(--ab-gold);
}

body:not(.admin-body) .status.warn {
    background: rgba(198, 166, 100, 0.1);
    color: var(--ab-gold);
}

body:not(.admin-body) .status.bad {
    background: rgba(159, 47, 47, 0.16);
    color: #ffb4a8;
}

.product-detail-image {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.product-total-card,
.payment-instructions-card {
    border-color: rgba(201, 151, 45, 0.26);
    border-radius: 18px;
    background: #111111;
}

body:not(.admin-body) .product-total-card strong {
    color: var(--ab-ink);
}

body:not(.admin-body) .form-grid.card,
body:not(.admin-body) form.card {
    background: var(--ab-paper);
}

body:not(.admin-body) .field label {
    color: var(--ab-soft-ink);
}

body:not(.admin-body) .field input,
body:not(.admin-body) .field select,
body:not(.admin-body) .field textarea,
body:not(.admin-body) .card input,
body:not(.admin-body) .card select,
body:not(.admin-body) .card textarea {
    border-color: var(--ab-line);
    background: #080808;
    color: var(--ab-ink);
    min-height: 48px;
}

body:not(.admin-body) .booking-page {
    background:
        linear-gradient(180deg, rgba(18, 16, 13, 0.04), transparent 18rem),
        var(--ab-cream);
}

body:not(.admin-body) .booking-step-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:not(.admin-body) .booking-step-rail span {
    border-color: rgba(201, 151, 45, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ab-soft-ink);
}

body:not(.admin-body) .booking-layout {
    grid-template-columns: 0.86fr 1.14fr;
    gap: 26px;
}

body:not(.admin-body) .booking-summary-card {
    border-color: rgba(201, 151, 45, 0.32);
    border-radius: 20px;
    background: #17120e;
    color: #fffaf2;
    box-shadow: 0 26px 80px rgba(23, 18, 14, 0.22);
}

body:not(.admin-body) .booking-summary-card h2,
body:not(.admin-body) .booking-summary-card strong,
body:not(.admin-body) .booking-form-section h2 {
    color: inherit;
}

body:not(.admin-body) .booking-summary-lines div,
body:not(.admin-body) .booking-money-box,
body:not(.admin-body) .booking-selection-list div {
    border-color: rgba(255, 250, 242, 0.1);
    background: rgba(255, 250, 242, 0.055);
}

body:not(.admin-body) .booking-form-section {
    border-color: rgba(47, 34, 23, 0.12);
}

body:not(.admin-body) .booking-form-section h2 {
    color: var(--ab-ink);
    font-size: 1.85rem;
    font-weight: 820;
}

body:not(.admin-body) .booking-addon,
body:not(.admin-body) .checkbox-card,
body:not(.admin-body) .booking-policy-box label {
    border-color: var(--ab-line);
    background: #111111;
    color: var(--ab-soft-ink);
}

body:not(.admin-body) .booking-policy-box {
    border-color: rgba(201, 151, 45, 0.22);
    background: #111111;
}

body:not(.admin-body) .footer {
    background: #15110d;
    color: rgba(255, 250, 242, 0.72);
    border-top: 1px solid rgba(255, 250, 242, 0.08);
}

body:not(.admin-body) .footer strong {
    color: #fffaf2;
}

.home-gallery-grid figure {
    border-radius: 16px;
}

/* Admin rescue: quieter light app surface with strong phone ergonomics. */
.admin-body {
    --admin-ink: #19130e;
    --admin-muted: #72675d;
    --admin-line: rgba(44, 32, 23, 0.12);
    --admin-paper: #fffaf2;
    --admin-soft: #f3eadf;
    --admin-gold: #c9972d;
    color-scheme: light;
    background:
        radial-gradient(circle at 78% -10%, rgba(201, 151, 45, 0.14), transparent 28rem),
        linear-gradient(180deg, #fbf5ec 0%, #f2e9de 100%);
    color: var(--admin-ink);
}

.admin-body .admin-header {
    background: rgba(18, 15, 12, 0.92);
    border-bottom-color: rgba(255, 250, 242, 0.1);
}

.admin-body .admin-main {
    padding: 30px 0 116px;
}

.admin-body .admin-grid {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 26px;
}

.admin-body .admin-sidebar {
    top: 106px;
    border: 1px solid var(--admin-line);
    border-radius: 22px;
    background: rgba(255, 250, 242, 0.82);
    padding: 10px;
    box-shadow: 0 18px 50px rgba(44, 32, 23, 0.08);
}

.admin-body .admin-sidebar a {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 14px;
    color: var(--admin-muted);
    font-size: 0.94rem;
    font-weight: 760;
}

.admin-body .admin-sidebar a.active,
.admin-body .admin-sidebar a:hover {
    background: var(--admin-ink);
    color: #fffaf2;
}

.admin-body .admin-content {
    gap: 20px;
}

.admin-body .admin-title {
    align-items: end;
    padding: 4px 0 10px;
}

.admin-body .admin-title h1 {
    color: var(--admin-ink);
    font-size: 2.85rem;
    font-weight: 820;
    line-height: 1;
}

.admin-body .admin-title p,
.admin-body .muted,
.admin-body .field small,
.admin-body .help-text {
    color: var(--admin-muted);
}

.admin-body .eyebrow {
    border-color: rgba(201, 151, 45, 0.24);
    background: rgba(201, 151, 45, 0.1);
    color: #856017;
    font-weight: 800;
}

.admin-body .card,
.admin-body .admin-accordion,
.admin-body .booking-admin-card,
.admin-body .list-row,
.admin-body .payment-card,
.admin-body .email-template-card,
.admin-body .mini-admin-card,
.admin-body .needs-action-card,
.admin-body .quick-action-grid a,
.admin-body .location-admin-card,
.admin-body .order-admin-card,
.admin-body .subscription-admin-card,
.admin-body .customer-admin-card,
.admin-body .filter-panel,
.admin-body .empty-state {
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: rgba(255, 250, 242, 0.92);
    color: var(--admin-ink);
    box-shadow: 0 18px 54px rgba(44, 32, 23, 0.08);
    backdrop-filter: none;
}

.admin-body .card h2,
.admin-body .card h3,
.admin-body .admin-accordion > summary strong,
.admin-body .mini-admin-card h3,
.admin-body .booking-card-top h2,
.admin-body .customer-admin-card h2,
.admin-body .product-admin-head h2,
.admin-body .order-admin-head h2,
.admin-body .subscription-admin-head h2,
.admin-body .empty-state h2,
.admin-body .empty-state h3,
.admin-body .section-title h2,
.admin-body .section-title h3 {
    color: var(--admin-ink);
}

.admin-body .command-money-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-body .command-metric {
    min-height: 132px;
    padding: 20px;
}

.admin-body .command-metric span,
.admin-body .command-metric small {
    color: var(--admin-muted);
}

.admin-body .command-metric strong {
    color: var(--admin-ink);
    font-size: 2rem;
}

.admin-body .command-metric.urgent {
    border-color: rgba(201, 151, 45, 0.38);
    background: #fff2cc;
}

.admin-body .command-metric.urgent span,
.admin-body .command-metric.urgent small {
    color: #705318;
}

.admin-body .command-grid {
    gap: 20px;
}

.admin-body .command-panel .section-title,
.admin-body .quick-action-panel .section-title {
    align-items: center;
    gap: 16px;
}

.admin-body .command-panel .section-title h2,
.admin-body .quick-action-panel .section-title h2 {
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    letter-spacing: 0;
    line-height: 1.02;
}

.admin-body .needs-action-card,
.admin-body .quick-action-grid a,
.admin-body .mini-admin-card {
    background: #fffdf8;
    box-shadow: none;
}

.admin-body .needs-action-card span,
.admin-body .needs-action-card small,
.admin-body .empty-state p {
    color: var(--admin-muted);
}

.admin-body .needs-action-card strong,
.admin-body .location-admin-head strong,
.admin-body .subscription-money strong {
    color: #9a6e18;
}

.admin-body .quick-action-grid a {
    min-height: 86px;
    color: var(--admin-ink);
    font-weight: 820;
}

.admin-body .quick-action-grid a:first-child,
.admin-body .quick-action-grid a:nth-child(2) {
    background: var(--admin-ink);
    color: #fffaf2;
}

.admin-body .button,
.admin-body button.button {
    min-height: 46px;
    background: var(--admin-ink);
    color: #fffaf2;
    box-shadow: 0 14px 32px rgba(25, 19, 14, 0.16);
}

.admin-body .button.secondary {
    background: #fffaf2;
    color: var(--admin-ink);
    border-color: var(--admin-line);
    box-shadow: none;
}

.admin-body .admin-title-actions .button:last-child,
.admin-body .settings-save-bar .button,
.admin-body .filter-actions .button {
    background: linear-gradient(135deg, #efc85a, #c9972d);
    color: #17110b;
}

.admin-body .field label {
    color: var(--admin-soft-ink, #4f453c);
    font-size: 0.86rem;
    font-weight: 780;
}

.admin-body .field input,
.admin-body .field select,
.admin-body .field textarea,
.admin-body .list-row input,
.admin-body .list-row select,
.admin-body .card input,
.admin-body .card select,
.admin-body .card textarea,
.admin-body .subscription-action-box input,
.admin-body .subscription-action-box select,
.admin-body .media-card input {
    min-height: 48px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: #fffdf8;
    color: var(--admin-ink);
}

.admin-body .field textarea,
.admin-body .card textarea {
    min-height: 118px;
}

.admin-body .toggle-card,
.admin-body .checkbox-card,
.admin-body .admin-check-grid label,
.admin-body .booking-policy-box label,
.admin-body .inline-checks label,
.admin-body .subscription-action-box {
    border-color: var(--admin-line);
    border-radius: 14px;
    background: #fffdf8;
    color: var(--admin-muted);
    box-shadow: none;
}

.admin-body .toggle-card strong,
.admin-body .checkbox-card strong {
    color: var(--admin-ink);
}

.admin-body .toggle-card:has(input:checked),
.admin-body .checkbox-card:has(input:checked),
.admin-body .admin-check-grid label:has(input:checked) {
    border-color: rgba(201, 151, 45, 0.42);
    background: #fff4d7;
}

.admin-body input[type="checkbox"] {
    border-radius: 8px;
    accent-color: var(--admin-gold);
}

.admin-body .admin-tab {
    border-color: var(--admin-line);
    background: #fffaf2;
    color: var(--admin-muted);
    font-weight: 800;
}

.admin-body .admin-tab span {
    background: rgba(25, 19, 14, 0.08);
    color: var(--admin-ink);
}

.admin-body .admin-tab.active {
    background: var(--admin-ink);
    color: #fffaf2;
}

.admin-body .booking-admin-card {
    padding: 20px;
}

.admin-body .booking-time,
.admin-body .booking-date-box {
    background: #fff2cc;
    color: var(--admin-ink);
}

.admin-body .booking-card-details div,
.admin-body .payment-amounts div,
.admin-body .calendar-hour-row,
.admin-body .subscription-action-box,
.admin-body .mini-feed a {
    border-color: var(--admin-line);
    background: #fffdf8;
}

.admin-body .booking-card-details span,
.admin-body .payment-amounts span,
.admin-body .booking-date-box span {
    color: var(--admin-muted);
}

.admin-body .booking-card-details strong,
.admin-body .order-admin-contact strong {
    color: var(--admin-ink);
}

.admin-body .admin-accordion > summary {
    background: #fffaf2;
}

.admin-body .admin-accordion > summary b {
    background: #fff0c6;
    color: #8b6418;
}

.admin-body .status {
    border-color: rgba(201, 151, 45, 0.22);
    background: #fff0c6;
    color: #7b5612;
}

.admin-body .status.good {
    background: #e7f2e8;
    color: #24582d;
}

.admin-body .status.warn {
    background: #fff0c6;
    color: #7b5612;
}

.admin-body .status.bad {
    background: #f7dfdc;
    color: #93342d;
}

.admin-body .product-summary-row img {
    border-radius: 12px;
}

.admin-body .product-option-panel,
.admin-body .service-admin-options {
    border-color: var(--admin-line);
}

.admin-body .email-preview,
.admin-body .payment-instructions,
.admin-body .private-note-box {
    border-color: rgba(201, 151, 45, 0.26);
    background: #fff4d7;
    color: var(--admin-ink);
}

.admin-body .email-preview h3,
.admin-body .email-preview pre {
    color: var(--admin-ink);
}

.admin-body .bottom-nav {
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    bottom: 10px;
    margin: 0 auto;
    width: min(520px, calc(100% - 20px));
    border: 1px solid var(--admin-line);
    border-radius: 22px;
    background: rgba(255, 250, 242, 0.94);
    box-shadow: 0 18px 50px rgba(44, 32, 23, 0.18);
}

.admin-body .bottom-nav a {
    border-radius: 16px;
    color: var(--admin-muted);
}

.admin-body .bottom-nav a.active {
    background: var(--admin-ink);
    color: #fffaf2;
}

@media (max-width: 1180px) {
    body:not(.admin-body) .booking-step-rail,
    .admin-body .command-money-grid,
    .admin-body .command-money-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-body .filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    body:not(.admin-body) .page-title h1,
    body:not(.admin-body) .section-title h2,
    body:not(.admin-body) .care-copy h2 {
        font-size: 3.15rem;
    }

    .home-slide h1 {
        font-size: 5.4rem;
    }

    .home-slide-script {
        font-size: 3.1rem;
    }

    .care-grid,
    body:not(.admin-body) .booking-layout {
        grid-template-columns: 1fr;
    }

    body:not(.admin-body) .booking-summary-card {
        position: static;
    }

    .admin-body .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-body .admin-sidebar {
        display: none;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    body:not(.admin-body) .nav {
        align-items: stretch;
        min-height: 78px;
    }

    body:not(.admin-body) .nav-links {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 0 8px;
    }

    body:not(.admin-body) .nav-links a {
        flex: 0 0 auto;
    }

    .home-slider {
        min-height: 720px;
    }

    .home-slide-content {
        padding: 72px 0 130px;
    }

    .home-slide h1 {
        font-size: 4.1rem;
        max-width: 94%;
    }

    .home-slide-script {
        font-size: 2.35rem;
    }

    .home-slider-status {
        bottom: 20px;
    }

    .home-slider-mini {
        display: none;
    }

    body:not(.admin-body) .page-title h1,
    body:not(.admin-body) .section-title h2,
    body:not(.admin-body) .care-copy h2 {
        font-size: 2.45rem;
    }

    body:not(.admin-body) .section {
        padding: 56px 0;
    }

    .service-door-grid,
    .feature-rail,
    .home-gallery-grid,
    body:not(.admin-body) .grid.three,
    body:not(.admin-body) .grid.two,
    body:not(.admin-body) .grid.four,
    body:not(.admin-body) .form-grid,
    body:not(.admin-body) .booking-step-rail,
    .admin-body .command-money-grid,
    .admin-body .command-money-grid.compact,
    .admin-body .command-grid,
    .admin-body .quick-action-grid,
    .admin-body .needs-action-list,
    .admin-body .admin-card-grid,
    .admin-body .location-admin-grid,
    .admin-body .filter-panel,
    .admin-body .toggle-grid,
    .admin-body .form-grid,
    .admin-body .booking-card-details {
        grid-template-columns: 1fr;
    }

    .care-photo-stack {
        min-height: 470px;
    }

    .care-photo-stack img {
        min-height: 330px;
    }

    .service-door,
    body:not(.admin-body) .service-tile {
        min-height: 300px;
    }

    body:not(.admin-body) .product-luxury-image {
        aspect-ratio: 1 / 1;
    }

    .home-gallery-grid figure,
    .home-gallery-grid figure.tall,
    .home-gallery-grid figure.wide {
        min-height: 310px;
    }

    .admin-body .admin-main {
        padding-top: 18px;
    }

    .admin-body .admin-title {
        align-items: flex-start;
    }

    .admin-body .admin-title h1 {
        font-size: 2.2rem;
    }

    .admin-body .card,
    .admin-body .admin-accordion,
    .admin-body .booking-admin-card,
    .admin-body .filter-panel,
    .admin-body .empty-state {
        border-radius: 16px;
    }

    .admin-body .admin-title-actions,
    .admin-body .admin-title-actions .button,
    .admin-body .empty-actions,
    .admin-body .empty-actions .button,
    .admin-body .booking-card-actions,
    .admin-body .booking-card-actions .button,
    .admin-body .booking-card-actions form,
    .admin-body .booking-card-actions button {
        width: 100%;
    }
}

/* Late public header/footer overrides for the WordPress logo asset. */
body:not(.admin-body) .site-header {
    background: rgba(0, 0, 0, 0.84);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body:not(.admin-body) .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #c6a664;
}

body:not(.admin-body) .brand-logo-frame {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(198, 166, 100, 0.28);
    border-radius: 8px;
    background: #050505;
    box-shadow: 0 14px 34px rgba(198, 166, 100, 0.16);
}

body:not(.admin-body) .brand-logo-frame img {
    width: 54px;
    max-width: none;
    height: auto;
}

body:not(.admin-body) .footer-inner {
    display: grid;
    gap: 28px;
}

body:not(.admin-body) .footer-brand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

body:not(.admin-body) .footer-links,
body:not(.admin-body) .footer-contact {
    display: grid;
    gap: 10px;
}

body:not(.admin-body) .footer-links a {
    color: rgba(255, 248, 236, 0.68);
    font-weight: 780;
}

@media (min-width: 680px) {
    body:not(.admin-body) .footer-inner {
        grid-template-columns: 1.2fr 0.8fr 1fr;
        align-items: start;
    }
}

@media (max-width: 760px) {
    body:not(.admin-body) .nav-links .button {
        order: -1;
    }
}

/* Premium public website and booking flow */
:root {
    --lux-black: #050505;
    --lux-deep: #090909;
    --lux-card: #111111;
    --lux-soft: rgba(255, 255, 255, 0.04);
    --lux-border: rgba(255, 255, 255, 0.1);
    --lux-border-gold: rgba(198, 166, 100, 0.32);
    --lux-gold: #c6a664;
    --lux-gold-hover: #d8bd82;
    --lux-dark-gold: #8a6f42;
    --lux-cream: #fff8ec;
    --lux-muted: rgba(255, 248, 236, 0.78);
    --lux-display: "Cormorant Garamond", Georgia, serif;
    --lux-body: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.premium-public-body {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 4%, rgba(198, 166, 100, 0.16), transparent 27rem),
        radial-gradient(circle at 86% 8%, rgba(255, 255, 255, 0.07), transparent 18rem),
        linear-gradient(180deg, var(--lux-black), #020202 48%, var(--lux-black));
    color: var(--lux-cream);
    font-family: var(--lux-body);
    font-feature-settings: "ss01" on;
}

.premium-public-body *,
.premium-public-body *::before,
.premium-public-body *::after {
    box-sizing: border-box;
}

.premium-public-body img {
    max-width: 100%;
    display: block;
}

.premium-public-body h1,
.premium-public-body h2,
.premium-public-body h3,
.premium-page-kicker,
.premium-booking-title,
.premium-brand__name {
    font-family: var(--lux-display);
    font-weight: 700;
    letter-spacing: 0;
}

.premium-site-shell {
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
    background:
        radial-gradient(circle at 18% 8%, rgba(198, 166, 100, 0.08), transparent 28rem),
        linear-gradient(180deg, #050505 0%, #080807 42%, #050505 100%);
    color: var(--lux-cream);
}

.premium-site-shell main {
    background: transparent;
}

.premium-wrap {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

.premium-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--lux-border);
    background: rgba(5, 5, 5, 0.82);
    /* No backdrop-filter. The home page now carries fixed full-viewport gradient
       layers, and re-filtering the backdrop behind a sticky header on every scroll
       frame is what the design handoff records as already tried and reverted for
       janking the marquees on mid-range phones. The 0.94-alpha background applied
       later makes the blur invisible anyway. */
}

.premium-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    gap: 18px;
}

.premium-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--lux-cream);
    text-decoration: none;
}

.premium-brand__logo {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(198, 166, 100, 0.52);
    border-radius: 999px;
    background: #000;
    box-shadow: 0 0 34px rgba(198, 166, 100, 0.18);
}

.premium-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-brand__copy {
    display: grid;
    gap: 3px;
}

.premium-brand__name {
    color: var(--lux-gold);
    font-size: clamp(1.25rem, 3.6vw, 1.9rem);
    line-height: 0.95;
    text-transform: uppercase;
    white-space: nowrap;
}

.premium-brand__tagline {
    color: rgba(255, 248, 236, 0.72);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.premium-nav {
    display: none;
    align-items: center;
    gap: 18px;
}

.premium-nav a {
    position: relative;
    color: rgba(255, 248, 236, 0.74);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 160ms ease;
}

.premium-nav a::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 2px;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    background: var(--lux-gold);
    transition: transform 180ms ease;
}

.premium-nav a:hover,
.premium-nav a.is-active {
    color: var(--lux-gold);
}

.premium-nav a:hover::after,
.premium-nav a.is-active::after {
    transform: scaleX(1);
}

.premium-header-cta,
.premium-btn,
.premium-gold-button,
.premium-outline-button,
.premium-place-order,
.premium-footer__whatsapp {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.premium-header-cta,
.premium-btn--gold,
.premium-gold-button,
.premium-place-order,
.premium-process-cta {
    border: 1px solid rgba(255, 227, 90, 0.28);
    background: linear-gradient(135deg, var(--lux-gold-hover), var(--lux-gold) 55%, #c48a0a);
    color: #070707;
    box-shadow: 0 18px 52px rgba(198, 166, 100, 0.18);
}

.premium-header-cta {
    display: none;
    padding: 0 22px;
    font-size: 0.75rem;
}

.premium-btn--dark,
.premium-outline-button {
    border: 1px solid rgba(198, 166, 100, 0.42);
    background: rgba(255, 255, 255, 0.035);
    color: var(--lux-cream);
}

.premium-header-cta:hover,
.premium-btn:hover,
.premium-gold-button:hover,
.premium-outline-button:hover,
.premium-place-order:hover,
.premium-footer__whatsapp:hover {
    transform: translateY(-1px);
}

.premium-mobile-menu {
    position: relative;
    flex: 0 0 auto;
}

.premium-mobile-menu summary {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--lux-border-gold);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    list-style: none;
}

.premium-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.premium-mobile-menu summary span {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 99px;
    background: var(--lux-gold);
}

.premium-mobile-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    width: min(82vw, 320px);
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--lux-border-gold);
    border-radius: 24px;
    background: rgba(5, 5, 5, 0.96);
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);
}

.premium-mobile-panel a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--lux-cream);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.premium-alert {
    margin-top: 18px;
    border: 1px solid rgba(198, 166, 100, 0.35);
    border-radius: 20px;
    padding: 14px 16px;
    background: rgba(198, 166, 100, 0.12);
    color: var(--lux-cream);
}

.premium-alert--error,
.premium-alert-error {
    border-color: rgba(255, 98, 98, 0.45);
    background: rgba(255, 98, 98, 0.1);
}

.premium-eyebrow,
.premium-page-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(198, 166, 100, 0.32);
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(198, 166, 100, 0.1);
    color: var(--lux-gold);
    font-family: var(--lux-body);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.premium-home {
    overflow-x: clip;
    background:
        radial-gradient(circle at 12% 18%, rgba(198, 166, 100, 0.1), transparent 24rem),
        radial-gradient(circle at 88% 38%, rgba(255, 255, 255, 0.045), transparent 20rem),
        linear-gradient(180deg, #050505 0%, #090909 48%, #050505 100%);
    color: var(--lux-cream);
}

.premium-home-hero {
    padding: 28px 0 48px;
    background: transparent;
}

.premium-hero-panel {
    position: relative;
    display: grid;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid var(--lux-border-gold);
    border-radius: clamp(28px, 5vw, 52px);
    background: var(--lux-card);
    box-shadow: 0 30px 140px rgba(198, 166, 100, 0.12);
}

.premium-hero-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 620px;
    padding: clamp(28px, 7vw, 76px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.82));
}

.premium-hero-copy h1 {
    max-width: 780px;
    margin: 22px 0 0;
    color: var(--lux-cream);
    font-size: clamp(3.55rem, 13vw, 8.9rem);
    line-height: 0.86;
}

.premium-hero-copy h1 span {
    color: var(--lux-gold);
}

.premium-hero-copy p {
    max-width: 560px;
    margin: 24px 0 0;
    color: var(--lux-muted);
    font-size: clamp(1rem, 3.4vw, 1.18rem);
    line-height: 1.72;
}

.premium-hero-actions,
.booking-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.premium-hero-actions a,
.booking-step-actions button,
.booking-step-actions a,
.premium-gold-button,
.premium-outline-button {
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 0.78rem;
}

.premium-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 640px;
    margin-top: 34px;
}

.premium-hero-badges span {
    border: 1px solid var(--lux-border);
    border-radius: 18px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.38);
    color: rgba(255, 248, 236, 0.78);
    font-size: 0.75rem;
    font-weight: 850;
}

.premium-hero-media {
    position: absolute;
    inset: 0;
}

.premium-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 520ms ease;
}

.premium-hero-slide.is-active {
    opacity: 1;
}

.premium-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-hero-slide::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.08)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 40%);
}

.premium-hero-slide__caption {
    position: absolute;
    right: 28px;
    bottom: 26px;
    z-index: 2;
    max-width: 300px;
    border: 1px solid var(--lux-border);
    border-radius: 22px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
}

.premium-hero-slide__caption strong {
    color: var(--lux-gold);
}

.premium-hero-slide__caption span {
    display: block;
    margin-top: 4px;
    color: var(--lux-muted);
    font-size: 0.83rem;
}

.premium-slider-arrow {
    position: absolute;
    z-index: 6;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 1px solid var(--lux-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.54);
    color: var(--lux-cream);
    transform: translateY(-50%);
    cursor: pointer;
}

.premium-slider-arrow--prev {
    left: 16px;
}

.premium-slider-arrow--next {
    right: 16px;
}

.premium-slider-dots {
    position: absolute;
    z-index: 7;
    left: clamp(28px, 7vw, 76px);
    bottom: 26px;
    display: flex;
    gap: 8px;
}

.premium-slider-dots button {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.premium-slider-dots button.is-active {
    width: 38px;
    background: var(--lux-gold);
}

.premium-section {
    padding: clamp(38px, 5vw, 72px) 0;
    background: transparent;
    color: var(--lux-cream);
}

.premium-section--tight {
    padding-top: 34px;
}

.premium-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.premium-section-head h2 {
    max-width: 840px;
    margin: 0;
    color: var(--lux-cream);
    font-size: clamp(2.75rem, 9vw, 5.6rem);
    line-height: 0.92;
}

.premium-section-head p {
    max-width: 650px;
    margin: 0;
    color: var(--lux-muted);
    line-height: 1.7;
}

.premium-section-head a {
    width: fit-content;
    color: var(--lux-gold);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.premium-section-head--center {
    align-items: center;
    text-align: center;
}

/* Generic premium primitives — reusable across the redesigned public pages
   (services, shop, contact, locations, faqs, subscriptions, CMS pages). */
.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.premium-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.premium-panel {
    background: var(--lux-card);
    border: 1px solid var(--lux-border-gold);
    border-radius: 20px;
    padding: clamp(18px, 3vw, 26px);
    color: var(--lux-cream);
}

.premium-panel h3 {
    margin: 0 0 8px;
    font-family: var(--lux-display, Georgia, serif);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--lux-cream);
}

.premium-panel p {
    margin: 0;
    color: var(--lux-muted);
    line-height: 1.65;
}

.premium-price-tag {
    color: var(--lux-gold);
    font-family: var(--lux-display, Georgia, serif);
    font-size: 1.6rem;
    line-height: 1;
}

.premium-media {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #17161a;
    border: 1px solid var(--lux-border);
}

.premium-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.premium-field {
    display: block;
    margin: 0 0 14px;
}

.premium-field label {
    display: block;
    color: var(--lux-muted);
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.premium-field input,
.premium-field textarea,
.premium-field select {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--lux-border-gold);
    color: var(--lux-cream);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
}

.premium-field textarea {
    min-height: 120px;
}

.premium-faq {
    border: 1px solid var(--lux-border);
    border-radius: 16px;
    padding: 2px 18px;
    margin-bottom: 10px;
    background: var(--lux-card);
}

.premium-faq summary {
    cursor: pointer;
    padding: 15px 0;
    color: var(--lux-cream);
    font-weight: 800;
    list-style: none;
}

.premium-faq summary::-webkit-details-marker {
    display: none;
}

.premium-faq[open] summary {
    color: var(--lux-gold);
}

.premium-faq p {
    color: var(--lux-muted);
    line-height: 1.65;
    padding: 0 0 15px;
    margin: 0;
}

.premium-line-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-top: 1px solid var(--lux-border);
}

.premium-style-row,
.premium-product-row,
.premium-testimonial-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 78vw);
    gap: 16px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.premium-style-row::-webkit-scrollbar,
.premium-product-row::-webkit-scrollbar,
.premium-testimonial-row::-webkit-scrollbar {
    display: none;
}

.premium-style-card,
.premium-care-card,
.premium-product-card,
.premium-process-card,
.premium-testimonial-card,
.booking-main-card,
.booking-summary-inner,
.booking-field-card,
.booking-review-card,
.booking-bank-card {
    border: 1px solid var(--lux-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
}

.premium-style-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 28px;
    scroll-snap-align: start;
    color: var(--lux-cream);
    text-decoration: none;
}

.premium-style-card img,
.premium-care-card img,
.premium-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease;
}

.premium-style-card::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.08) 60%);
}

.premium-style-card:hover img,
.premium-care-card:hover img,
.premium-product-card:hover img,
.booking-service-card:hover img {
    transform: scale(1.045);
}

.premium-style-card__content {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 18px;
}

.premium-style-card__content h3,
.premium-product-card h3 {
    margin: 0;
    color: var(--lux-cream);
    font-size: 1.35rem;
}

.premium-style-card__content span,
.premium-product-card span,
.premium-care-card span {
    color: var(--lux-gold);
    font-size: 0.8rem;
    font-weight: 900;
}

.premium-care-grid {
    display: grid;
    gap: 16px;
}

.premium-care-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 16px;
    min-height: 158px;
    overflow: hidden;
    border-radius: 24px;
    padding: 10px;
    color: var(--lux-cream);
    text-decoration: none;
}

.premium-care-card img {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
}

.premium-care-card h3,
.premium-process-card h3,
.premium-testimonial-card h3 {
    margin: 4px 0 0;
    color: var(--lux-cream);
}

.premium-care-card p,
.premium-process-card p,
.premium-testimonial-card p {
    color: var(--lux-muted);
    font-size: 0.9rem;
    line-height: 1.58;
}

.premium-product-card {
    overflow: hidden;
    border-radius: 28px;
    padding: 12px;
    scroll-snap-align: start;
}

.premium-product-card__media {
    aspect-ratio: 1 / 0.92;
    overflow: hidden;
    border-radius: 22px;
    background: #0b0b0b;
}

.premium-product-card__body {
    padding: 18px 8px 8px;
}

.premium-process {
    border-block: 1px solid var(--lux-border);
    background: linear-gradient(90deg, rgba(198, 166, 100, 0.08), rgba(255, 255, 255, 0.02), rgba(198, 166, 100, 0.08));
}

.premium-process-grid {
    display: grid;
    gap: 16px;
}

.premium-process-card,
.premium-testimonial-card {
    border-radius: 24px;
    padding: 22px;
}

.premium-process-card span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--lux-gold);
    color: #050505;
    font-weight: 950;
}

.premium-process-cta {
    width: 100%;
    margin-top: 18px;
    min-height: 54px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 900;
    color: #050505;
}

.premium-rating {
    color: var(--lux-gold);
    font-weight: 900;
}

.premium-testimonial-card {
    scroll-snap-align: start;
}

.premium-stars {
    color: var(--lux-gold);
    letter-spacing: 0.08em;
}

/* Reusable SVG star rating (partial-fill), used on testimonials and provider cards. */
.star-rating {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    font-size: 1em;
}

.star-rating__track {
    position: relative;
    display: inline-flex;
    width: max-content;
}

.star-rating__base,
.star-rating__fill {
    display: inline-flex;
    gap: 0.12em;
}

.star-rating__base svg,
.star-rating__fill svg {
    width: 1.05em;
    height: 1.05em;
    display: block;
}

.star-rating__base svg {
    fill: rgba(255, 248, 236, 0.24);
}

.star-rating__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
}

.star-rating__fill svg {
    fill: var(--lux-gold);
}

.provider-card__rating-value {
    margin-left: 0.4ch;
    font-weight: 800;
    color: var(--lux-cream);
}

/* Visible keyboard focus for every interactive element (none existed before). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--lux-gold, #c6a664);
    outline-offset: 3px;
    border-radius: 4px;
}

.premium-footer {
    position: relative;
    margin-top: 32px;
    border-top: 1px solid var(--lux-border-gold);
    background: #020202;
    padding: 46px 0 24px;
}

.premium-footer__grid {
    display: grid;
    gap: 30px;
}

.premium-footer h2 {
    margin: 0 0 14px;
    color: var(--lux-gold);
    font-family: var(--lux-body);
    font-size: 0.86rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.premium-footer p,
.premium-footer span,
.premium-footer a {
    color: rgba(255, 248, 236, 0.66);
}

.premium-footer a {
    text-decoration: none;
}

.premium-footer__brand {
    display: grid;
    gap: 16px;
}

.premium-brand__logo--footer {
    width: 70px;
    height: 70px;
}

.premium-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.premium-socials a {
    display: inline-grid;
    min-height: 38px;
    place-items: center;
    border: 1px solid var(--lux-border-gold);
    border-radius: 999px;
    padding: 0 13px;
    color: var(--lux-gold);
    font-size: 0.75rem;
    font-weight: 900;
}

.premium-footer__links {
    display: grid;
    gap: 10px;
}

.premium-footer__areas span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--lux-gold);
    vertical-align: middle;
}

.premium-footer__whatsapp {
    width: fit-content;
    margin-top: 8px;
    padding: 0 18px;
    color: #050505 !important;
}

.premium-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    border-top: 1px solid var(--lux-border);
    padding-top: 18px;
    font-size: 0.82rem;
}

.premium-footer__bottom div {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.premium-booking-page {
    padding: clamp(24px, 6vw, 52px) 0 74px;
}

.premium-booking-title {
    margin: 14px 0 8px;
    color: var(--lux-gold);
    font-size: clamp(2.4rem, 8vw, 4.8rem);
    line-height: 0.92;
    text-transform: uppercase;
}

.premium-booking-form input,
.premium-booking-form select,
.premium-booking-form textarea,
.premium-booking-form button {
    font: inherit;
}

.premium-booking-form input[type="text"],
.premium-booking-form input[type="email"],
.premium-booking-form input[type="tel"],
.premium-booking-form input[type="datetime-local"],
.premium-booking-form select,
.premium-booking-form textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.42);
    color: var(--lux-cream);
    padding: 12px 14px;
    outline: 0;
}

.premium-booking-form textarea {
    min-height: 120px;
    resize: vertical;
}

.premium-booking-form label {
    color: rgba(255, 248, 236, 0.82);
    font-size: 0.9rem;
    font-weight: 850;
}

.booking-progress-card {
    margin: 24px 0;
    border: 1px solid var(--lux-border);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.035);
    padding: 14px;
}

.booking-progress-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.booking-progress-track::-webkit-scrollbar {
    display: none;
}

.booking-progress-step {
    position: relative;
    display: grid;
    min-height: 86px;
    align-content: center;
    gap: 4px;
    border-radius: 18px;
    padding: 12px;
    color: rgba(255, 248, 236, 0.48);
}

.booking-progress-step span:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lux-border);
    border-radius: 999px;
    font-weight: 950;
}

.booking-progress-step.is-active,
.booking-progress-step.is-complete {
    color: var(--lux-cream);
    background: rgba(198, 166, 100, 0.08);
}

.booking-progress-step.is-active span:first-child,
.booking-progress-step.is-complete span:first-child {
    border-color: var(--lux-gold);
    background: var(--lux-gold);
    color: #050505;
}

.premium-booking-grid {
    display: grid;
    gap: 22px;
}

.booking-main-card,
.booking-summary-inner {
    border-radius: 30px;
    padding: clamp(18px, 4vw, 30px);
}

.booking-step-panel {
    display: none;
}

.booking-step-panel.is-active {
    display: block;
}

.booking-step-head {
    margin-bottom: 22px;
}

.booking-step-head h2 {
    margin: 0;
    color: var(--lux-gold);
    font-size: clamp(2.2rem, 7vw, 4rem);
    line-height: 0.96;
}

.booking-step-head p {
    margin: 8px 0 0;
    color: var(--lux-muted);
}

.booking-style-layout {
    display: grid;
    gap: 20px;
}

.booking-category-panel,
.booking-service-panel,
.booking-field-card,
.booking-review-card,
.booking-bank-card,
.booking-note-card,
.selected-style-card,
.hair-fullness-panel {
    border: 1px solid var(--lux-border);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
}

.booking-category-panel h3,
.booking-service-panel h3,
.booking-field-card h3,
.booking-review-card h3,
.hair-fullness-panel h3,
.booking-summary-inner h3 {
    margin: 0 0 12px;
    color: var(--lux-gold);
    font-size: 1.25rem;
}

.booking-category-list {
    display: grid;
    gap: 10px;
}

.booking-category-button {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--lux-border-gold);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--lux-cream);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
}

.booking-category-button.is-active {
    background: linear-gradient(135deg, var(--lux-gold-hover), var(--lux-gold));
    color: #050505;
}

.booking-service-panel-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.booking-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.booking-service-card {
    position: relative;
    min-height: 290px;
    overflow: hidden;
    border: 1px solid var(--lux-border);
    border-radius: 22px;
    background: #0a0a0a;
    color: var(--lux-cream);
    cursor: pointer;
}

.booking-service-card.is-selected,
.booking-location-card.is-selected,
.booking-time-slot.is-selected,
.booking-choice-card:has(input:checked),
.booking-option-chip:has(input:checked),
.booking-addon-option:has(input:checked) {
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 1px rgba(198, 166, 100, 0.22), 0 18px 52px rgba(198, 166, 100, 0.12);
}

.booking-service-image {
    position: absolute;
    inset: 0;
}

.booking-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease;
}

.booking-service-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 70px 14px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
}

.booking-service-overlay h3 {
    margin: 0 0 4px;
    color: var(--lux-cream);
}

.booking-service-overlay p {
    margin: 0;
    color: var(--lux-muted);
}

.booking-service-overlay strong,
.booking-location-card strong,
.summary-money,
.summary-total strong {
    color: var(--lux-gold);
}

.booking-location-grid,
.booking-detail-grid,
.booking-option-grid {
    display: grid;
    gap: 12px;
}

.booking-location-card,
.booking-time-slot,
.booking-choice-card,
.booking-option-chip,
.booking-addon-option {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    border: 1px solid var(--lux-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    padding: 13px 14px;
    color: var(--lux-cream);
    cursor: pointer;
}

.booking-location-card {
    justify-content: space-between;
}

.booking-location-pin {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(198, 166, 100, 0.12);
    color: var(--lux-gold);
}

.booking-date-grid {
    display: grid;
    gap: 16px;
}

.booking-time-grid {
    display: grid;
    gap: 10px;
}

.booking-time-slot {
    justify-content: space-between;
}

.booking-time-slot.is-selected {
    background: linear-gradient(135deg, rgba(198, 166, 100, 0.24), rgba(255, 255, 255, 0.04));
}

.selected-style-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: center;
}

.selected-style-card img {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
}

.booking-choice-row {
    display: grid;
    gap: 12px;
}

.booking-choice-card,
.booking-option-chip,
.booking-addon-option {
    position: relative;
}

.booking-choice-card input,
.booking-option-chip input,
.booking-addon-option input,
.booking-terms-line input,
.booking-location-card input,
.booking-service-card input {
    width: 20px;
    height: 20px;
    accent-color: var(--lux-gold);
    flex: 0 0 auto;
}

.booking-field-wide {
    grid-column: 1 / -1;
}

.hair-fullness-panel {
    margin-top: 16px;
}

.hair-upload-card {
    display: grid;
    place-items: center;
    min-height: 190px;
    margin-top: 14px;
    border: 1px dashed rgba(198, 166, 100, 0.55);
    border-radius: 22px;
    background: rgba(198, 166, 100, 0.07);
    text-align: center;
    cursor: pointer;
}

.hair-upload-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hair-upload-empty {
    color: var(--lux-muted);
}

.hair-upload-empty strong {
    display: block;
    color: var(--lux-gold);
    font-size: 1rem;
}

.hair-upload-preview {
    display: none;
    width: 100%;
    padding: 14px;
}

.hair-upload-preview.is-visible {
    display: grid;
    gap: 12px;
}

.hair-upload-preview img {
    max-height: 280px;
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
}

.booking-terms-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--lux-border-gold);
    border-radius: 18px;
    padding: 16px;
    background: rgba(198, 166, 100, 0.08);
}

.booking-policy-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    color: var(--lux-muted);
    font-size: 0.88rem;
}

.booking-review-lines,
.booking-bank-card {
    display: grid;
    gap: 10px;
}

.booking-summary-panel {
    display: none;
}

.booking-summary-inner {
    position: sticky;
    top: 104px;
}

.summary-selected-style {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.summary-selected-style img {
    width: 74px;
    height: 74px;
    border-radius: 16px;
    object-fit: cover;
}

.summary-line,
.summary-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--lux-border);
    padding: 12px 0;
}

.summary-line span:first-child,
.summary-selected-style small {
    color: var(--lux-muted);
}

.summary-total {
    font-size: 1.2rem;
}

.booking-summary-note,
.premium-empty-state,
.booking-note-card {
    color: var(--lux-muted);
    line-height: 1.6;
}

.premium-place-order {
    width: 100%;
    min-height: 58px;
    margin-top: 14px;
    border-radius: 18px;
    font-size: 0.9rem;
}

.booking-mobile-summary {
    position: sticky;
    z-index: 60;
    bottom: 12px;
    margin-top: 22px;
    border: 1px solid var(--lux-border-gold);
    border-radius: 22px;
    background: rgba(5, 5, 5, 0.96);
    box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.5);
}

.booking-mobile-summary summary {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: var(--lux-gold);
    font-weight: 950;
    cursor: pointer;
}

.booking-mobile-summary .booking-summary-inner {
    position: static;
    border: 0;
    border-top: 1px solid var(--lux-border);
    border-radius: 0 0 22px 22px;
    box-shadow: none;
}

@media (min-width: 680px) {
    .premium-hero-badges,
    .premium-process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .booking-choice-row,
    .booking-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 860px) {
    .premium-style-row,
    .premium-product-row {
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .premium-testimonial-row {
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }

    .premium-footer__grid {
        grid-template-columns: 1.2fr repeat(4, minmax(0, 0.8fr));
    }

    .premium-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* The full horizontal nav only appears once there is genuinely room for the
   wordmark, every link and the CTA — below this it stays on the hamburger,
   which prevents the links from colliding with the logo. */
@media (min-width: 1200px) {
    .premium-nav,
    .premium-header-cta {
        display: inline-flex;
    }

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

@media (min-width: 1020px) {
    .premium-hero-panel {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .premium-hero-copy {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.54) 70%, transparent);
    }

    .premium-care-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .premium-product-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .premium-booking-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.36fr);
        align-items: start;
    }

    .booking-summary-panel {
        display: block;
    }

    .booking-mobile-summary {
        display: none;
    }

    .booking-style-layout {
        grid-template-columns: 282px minmax(0, 1fr);
    }

    .booking-date-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }
}

@media (min-width: 1180px) {
    .premium-style-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .premium-style-card {
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    .premium-wrap {
        width: min(100% - 22px, 1280px);
    }

    .premium-header__inner {
        min-height: 74px;
    }

    .premium-brand__logo {
        width: 48px;
        height: 48px;
    }

    .premium-brand__name {
        font-size: 1.13rem;
    }

    .premium-brand__tagline {
        font-size: 0.75rem;
    }

    .premium-hero-panel,
    .booking-main-card,
    .booking-summary-inner {
        border-radius: 24px;
    }

    .premium-hero-copy {
        min-height: 610px;
        padding: 24px;
    }

    .premium-hero-actions a,
    .premium-gold-button,
    .premium-outline-button,
    .booking-step-actions button,
    .booking-step-actions a {
        width: 100%;
    }

    .premium-hero-badges {
        grid-template-columns: 1fr;
    }

    .premium-hero-slide__caption {
        display: none;
    }

    .premium-slider-arrow {
        top: auto;
        bottom: 70px;
        transform: none;
    }

    .selected-style-card,
    .summary-selected-style {
        grid-template-columns: 72px 1fr;
    }

    .selected-style-card img {
        width: 72px;
        height: 72px;
    }

    .booking-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-public-body *,
    .premium-public-body *::before,
    .premium-public-body *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

.marketplace-hero,
.marketplace-section,
.marketplace-booking-shell,
.stylist-dashboard {
    background: #050505;
    color: #f7e7ad;
}

.marketplace-hero {
    padding: clamp(56px, 8vw, 112px) 0 48px;
    border-bottom: 1px solid rgba(198, 166, 100, 0.18);
}

.marketplace-hero__grid,
.marketplace-form-grid,
.stylist-dashboard-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(20px, 4vw, 42px);
    align-items: start;
}

.marketplace-hero h1,
.marketplace-booking-head h1,
.stylist-dashboard h1 {
    max-width: 820px;
    margin: 10px 0 16px;
    color: #f9d65c;
    font-size: clamp(2.4rem, 5vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.marketplace-hero p,
.marketplace-booking-head p,
.marketplace-card p,
.marketplace-service-card p,
.stylist-dashboard p {
    color: rgba(255, 248, 224, 0.78);
}

.marketplace-kicker {
    display: inline-flex;
    color: #c6a664;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marketplace-actions,
.stack-actions,
.stylist-job-actions,
.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.marketplace-signal-panel,
.marketplace-card,
.marketplace-form-panel,
.marketplace-service-card,
.stylist-wallet,
.stylist-job-card,
.stylist-address-box {
    border: 1px solid rgba(198, 166, 100, 0.24);
    background: #0d0b08;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.marketplace-signal-panel,
.marketplace-card,
.marketplace-form-panel,
.stylist-wallet,
.stylist-job-card {
    border-radius: 8px;
    padding: clamp(18px, 3vw, 28px);
}

.marketplace-signal-panel span,
.marketplace-card span,
.marketplace-service-card span,
.stylist-wallet span,
.stylist-job-details span,
.stylist-address-box span {
    color: rgba(198, 166, 100, 0.72);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marketplace-signal-panel strong,
.marketplace-card strong,
.stylist-wallet strong {
    display: block;
    margin: 8px 0;
    color: #fff6cc;
    font-size: 1.5rem;
}

.marketplace-step-grid,
.marketplace-location-grid,
.marketplace-service-grid,
.marketplace-chip-grid,
.stylist-job-list {
    display: grid;
    gap: 16px;
}

.marketplace-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketplace-location-grid,
.marketplace-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.marketplace-service-card {
    overflow: hidden;
}

.marketplace-service-card img,
.marketplace-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: #090909;
    border-bottom: 1px solid rgba(198, 166, 100, 0.22);
}

.marketplace-placeholder {
    gap: 8px;
    color: #c6a664;
    text-align: center;
}

.marketplace-placeholder strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
}

.marketplace-placeholder span {
    border: 1px solid rgba(198, 166, 100, 0.4);
    padding: 5px 10px;
    border-radius: 999px;
}

.marketplace-service-card > div:last-child {
    padding: 18px;
}

.marketplace-service-card h3,
.marketplace-form-panel h2,
.stylist-job-card h2 {
    margin: 6px 0;
    color: #fff6cc;
}

.marketplace-booking-shell {
    padding: clamp(42px, 7vw, 92px) 0;
}

.marketplace-booking-head {
    max-width: 860px;
    margin-bottom: 28px;
}

.marketplace-form-grid {
    grid-template-columns: 1fr;
}

.marketplace-form-panel .booking-field-card,
.marketplace-form-panel .booking-choice-card,
.marketplace-form-panel .booking-option-chip,
.stylist-job-actions input {
    border-color: rgba(198, 166, 100, 0.22);
    background: #070707;
    color: #fff6cc;
}

.marketplace-form-panel input,
.marketplace-form-panel select,
.marketplace-form-panel textarea,
.stylist-job-actions input,
.inline-form input,
.inline-form select {
    background: #050505;
    color: #fff6cc;
    border: 1px solid rgba(198, 166, 100, 0.26);
    border-radius: 8px;
}

.marketplace-form-panel input::placeholder,
.marketplace-form-panel textarea::placeholder,
.stylist-job-actions input::placeholder {
    color: rgba(255, 248, 224, 0.45);
}

.marketplace-estimate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(198, 166, 100, 0.25);
    background: #050505;
    border-radius: 8px;
}

.marketplace-estimate strong {
    color: #c6a664;
    font-size: 1.4rem;
}

.marketplace-recommendation-box {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(198, 166, 100, 0.22);
    border-radius: 8px;
    background: #050505;
}

.marketplace-recommendation-head,
.marketplace-recommendation-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.marketplace-recommendation-head p,
.marketplace-recommendation-card p {
    margin: 4px 0 0;
    color: rgba(255, 248, 224, 0.7);
}

.marketplace-recommendation-list {
    display: grid;
    gap: 10px;
}

.marketplace-recommendation-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(198, 166, 100, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.marketplace-recommendation-card.is-selected {
    border-color: rgba(198, 166, 100, 0.72);
    background: rgba(198, 166, 100, 0.08);
}

.marketplace-recommendation-card strong {
    color: #fff6cc;
}

.marketplace-recommendation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.marketplace-recommendation-tags span,
.marketplace-recommendation-action span {
    border: 1px solid rgba(198, 166, 100, 0.18);
    border-radius: 999px;
    padding: 7px 10px;
    color: rgba(255, 248, 224, 0.78);
    background: rgba(198, 166, 100, 0.06);
    font-size: 0.78rem;
}

.marketplace-submit {
    margin-top: 16px;
}

.stylist-body {
    margin: 0;
    background: #050505;
    color: #fff6cc;
    font-family: "Manrope", system-ui, sans-serif;
}

.stylist-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(5, 5, 5, 0.94);
    border-bottom: 1px solid rgba(198, 166, 100, 0.22);
    backdrop-filter: blur(14px);
}

.stylist-header__inner,
.stylist-job-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.stylist-dashboard {
    min-height: 100vh;
    padding: 34px 0 72px;
}

.stylist-dashboard-head {
    grid-template-columns: minmax(0, 1fr) 260px;
    margin-bottom: 24px;
}

.stylist-job-card {
    display: grid;
    gap: 18px;
}

.stylist-job-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stylist-job-details strong {
    display: block;
    color: #fff6cc;
    word-break: break-word;
}

.stylist-address-box {
    border-radius: 8px;
    padding: 14px;
}

.stylist-job-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.stylist-job-muted {
    color: rgba(255, 248, 224, 0.56);
}

.inline-form input,
.inline-form select {
    min-height: 38px;
    padding: 8px 10px;
}

@media (max-width: 760px) {
    .marketplace-hero__grid,
    .stylist-dashboard-head,
    .marketplace-step-grid,
    .stylist-job-details {
        grid-template-columns: 1fr;
    }

    .stylist-header__inner,
    .stylist-job-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Urgent public black/gold correction: public UI only. */
:root {
    --public-black: #050505;
    --public-graphite: #080808;
    --public-section: #0a0a0a;
    --public-card: #111111;
    --public-card-strong: #171717;
    --public-elevated: rgba(255, 255, 255, 0.04);
    --public-gold: #c6a664;
    --public-deep-gold: #b7791f;
    --public-border-gold: rgba(198, 166, 100, 0.22);
    --public-text: #fff8ec;
    --public-body: rgba(255, 248, 236, 0.76);
    --public-muted: rgba(255, 248, 236, 0.58);
}

html,
body:not(.admin-body):not(.stylist-body),
.premium-public-body,
.premium-site-shell {
    max-width: 100%;
    overflow-x: hidden;
    background: var(--public-black) !important;
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) *,
.premium-public-body *,
.premium-public-body *::before,
.premium-public-body *::after {
    min-width: 0;
    box-sizing: border-box;
}

body:not(.admin-body):not(.stylist-body) main,
body:not(.admin-body):not(.stylist-body) .section,
body:not(.admin-body):not(.stylist-body) .premium-section,
body:not(.admin-body):not(.stylist-body) .premium-home,
body:not(.admin-body):not(.stylist-body) .premium-home-hero,
body:not(.admin-body):not(.stylist-body) .cms-public-hero,
body:not(.admin-body):not(.stylist-body) .cms-public-sections,
body:not(.admin-body):not(.stylist-body) .premium-booking-page,
body:not(.admin-body):not(.stylist-body) .marketplace-hero,
body:not(.admin-body):not(.stylist-body) .marketplace-section,
body:not(.admin-body):not(.stylist-body) .marketplace-booking-shell {
    background: var(--public-black) !important;
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) .container,
body:not(.admin-body):not(.stylist-body) .premium-wrap {
    width: min(100% - 32px, 1280px);
    max-width: 1280px;
    margin-inline: auto;
}

body:not(.admin-body):not(.stylist-body) .premium-header,
body:not(.admin-body):not(.stylist-body) .site-header {
    background: rgba(5, 5, 5, 0.94) !important;
    border-bottom-color: var(--public-border-gold) !important;
}

body:not(.admin-body):not(.stylist-body) .page-title h1,
body:not(.admin-body):not(.stylist-body) .section-title h2,
body:not(.admin-body):not(.stylist-body) .premium-section-head h2,
body:not(.admin-body):not(.stylist-body) .premium-booking-title h1,
body:not(.admin-body):not(.stylist-body) .marketplace-hero h1,
body:not(.admin-body):not(.stylist-body) .marketplace-booking-head h1,
body:not(.admin-body):not(.stylist-body) h1,
body:not(.admin-body):not(.stylist-body) h2,
body:not(.admin-body):not(.stylist-body) h3 {
    color: var(--public-text) !important;
    overflow-wrap: anywhere;
}

body:not(.admin-body):not(.stylist-body) .premium-booking-title h1,
body:not(.admin-body):not(.stylist-body) .page-title h1 {
    font-size: clamp(2.35rem, 9vw, 5.25rem) !important;
    line-height: 0.98 !important;
    text-transform: none !important;
}

/* Hero headline must scale to fit its column and never break mid-word. */
body:not(.admin-body):not(.stylist-body) .premium-hero-copy h1 {
    font-size: clamp(2.6rem, 6vw, 5rem) !important;
    line-height: 0.92 !important;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    hyphens: none;
}

body:not(.admin-body):not(.stylist-body) p,
body:not(.admin-body):not(.stylist-body) .muted,
body:not(.admin-body):not(.stylist-body) .page-title p,
body:not(.admin-body):not(.stylist-body) .section-title p,
body:not(.admin-body):not(.stylist-body) .premium-section-head p,
body:not(.admin-body):not(.stylist-body) .premium-booking-title p,
body:not(.admin-body):not(.stylist-body) .marketplace-hero p,
body:not(.admin-body):not(.stylist-body) .marketplace-booking-head p {
    color: var(--public-body) !important;
}

body:not(.admin-body):not(.stylist-body) .eyebrow,
body:not(.admin-body):not(.stylist-body) .premium-eyebrow,
body:not(.admin-body):not(.stylist-body) .premium-page-kicker,
body:not(.admin-body):not(.stylist-body) .marketplace-kicker,
body:not(.admin-body):not(.stylist-body) .status {
    border-color: var(--public-border-gold) !important;
    background: rgba(198, 166, 100, 0.1) !important;
    color: var(--public-gold) !important;
}

body:not(.admin-body):not(.stylist-body) .card,
body:not(.admin-body):not(.stylist-body) .glass-card,
body:not(.admin-body):not(.stylist-body) .list-row,
body:not(.admin-body):not(.stylist-body) .service-tile,
body:not(.admin-body):not(.stylist-body) .service-tile.gold,
body:not(.admin-body):not(.stylist-body) .product-luxury-card,
body:not(.admin-body):not(.stylist-body) .product-total-card,
body:not(.admin-body):not(.stylist-body) .payment-instructions-card,
body:not(.admin-body):not(.stylist-body) .cms-public-block,
body:not(.admin-body):not(.stylist-body) .callout-panel,
body:not(.admin-body):not(.stylist-body) .visual-card,
body:not(.admin-body):not(.stylist-body) .premium-hero-panel,
body:not(.admin-body):not(.stylist-body) .premium-care-card,
body:not(.admin-body):not(.stylist-body) .premium-product-card,
body:not(.admin-body):not(.stylist-body) .premium-process-card,
body:not(.admin-body):not(.stylist-body) .premium-testimonial-card,
body:not(.admin-body):not(.stylist-body) .booking-progress-card,
body:not(.admin-body):not(.stylist-body) .booking-main-card,
body:not(.admin-body):not(.stylist-body) .booking-summary-inner,
body:not(.admin-body):not(.stylist-body) .booking-category-panel,
body:not(.admin-body):not(.stylist-body) .booking-service-panel,
body:not(.admin-body):not(.stylist-body) .booking-field-card,
body:not(.admin-body):not(.stylist-body) .booking-review-card,
body:not(.admin-body):not(.stylist-body) .booking-bank-card,
body:not(.admin-body):not(.stylist-body) .booking-note-card,
body:not(.admin-body):not(.stylist-body) .selected-style-card,
body:not(.admin-body):not(.stylist-body) .hair-fullness-panel,
body:not(.admin-body):not(.stylist-body) .marketplace-signal-panel,
body:not(.admin-body):not(.stylist-body) .marketplace-card,
body:not(.admin-body):not(.stylist-body) .marketplace-form-panel,
body:not(.admin-body):not(.stylist-body) .marketplace-service-card,
body:not(.admin-body):not(.stylist-body) .marketplace-estimate {
    border-color: var(--public-border-gold) !important;
    background: var(--public-card) !important;
    color: var(--public-text) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-copy,
body:not(.admin-body):not(.stylist-body) .premium-process,
body:not(.admin-body):not(.stylist-body) .premium-footer,
body:not(.admin-body):not(.stylist-body) .footer {
    background: var(--public-graphite) !important;
    color: var(--public-body) !important;
}

body:not(.admin-body):not(.stylist-body) .service-tile {
    display: grid;
    overflow: hidden;
    padding: 0 !important;
}

body:not(.admin-body):not(.stylist-body) .service-tile-body {
    display: grid;
    gap: 12px;
    padding: 18px;
}

body:not(.admin-body):not(.stylist-body) .product-luxury-body h3,
body:not(.admin-body):not(.stylist-body) .service-tile h3,
body:not(.admin-body):not(.stylist-body) .card h2,
body:not(.admin-body):not(.stylist-body) .card h3,
body:not(.admin-body):not(.stylist-body) .marketplace-service-card h3,
body:not(.admin-body):not(.stylist-body) .booking-step-head h2,
body:not(.admin-body):not(.stylist-body) .booking-category-panel h3,
body:not(.admin-body):not(.stylist-body) .booking-service-panel h3 {
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) .price,
body:not(.admin-body):not(.stylist-body) a:not(.premium-brand):not(.premium-btn):not(.premium-header-cta) {
    color: var(--public-gold);
}

body:not(.admin-body):not(.stylist-body) .button,
body:not(.admin-body):not(.stylist-body) button.button,
body:not(.admin-body):not(.stylist-body) .premium-header-cta,
body:not(.admin-body):not(.stylist-body) .premium-btn--gold,
body:not(.admin-body):not(.stylist-body) .premium-gold-button,
body:not(.admin-body):not(.stylist-body) .premium-place-order,
body:not(.admin-body):not(.stylist-body) .premium-process-cta {
    max-width: 100%;
    border-color: rgba(198, 166, 100, 0.38) !important;
    background: linear-gradient(135deg, #c6a664, #d8a928 55%, #b7791f) !important;
    color: #050505 !important;
}

body:not(.admin-body):not(.stylist-body) .button.secondary,
body:not(.admin-body):not(.stylist-body) .premium-btn--dark,
body:not(.admin-body):not(.stylist-body) .premium-outline-button {
    border-color: var(--public-border-gold) !important;
    background: var(--public-elevated) !important;
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) .service-rule-list span,
body:not(.admin-body):not(.stylist-body) .service-rule-list a,
body:not(.admin-body):not(.stylist-body) .category-tabs a,
body:not(.admin-body):not(.stylist-body) .booking-category-button,
body:not(.admin-body):not(.stylist-body) .booking-location-card,
body:not(.admin-body):not(.stylist-body) .booking-time-slot,
body:not(.admin-body):not(.stylist-body) .booking-choice-card,
body:not(.admin-body):not(.stylist-body) .booking-option-chip,
body:not(.admin-body):not(.stylist-body) .booking-addon-option,
body:not(.admin-body):not(.stylist-body) .booking-terms-line,
body:not(.admin-body):not(.stylist-body) .booking-policy-list,
body:not(.admin-body):not(.stylist-body) .booking-mobile-summary,
body:not(.admin-body):not(.stylist-body) .hair-upload-card {
    border-color: var(--public-border-gold) !important;
    background: var(--public-elevated) !important;
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:not(.admin-body):not(.stylist-body) select,
body:not(.admin-body):not(.stylist-body) textarea,
body:not(.admin-body):not(.stylist-body) .field input,
body:not(.admin-body):not(.stylist-body) .field select,
body:not(.admin-body):not(.stylist-body) .field textarea,
body:not(.admin-body):not(.stylist-body) .card input,
body:not(.admin-body):not(.stylist-body) .card select,
body:not(.admin-body):not(.stylist-body) .card textarea {
    width: 100%;
    border-color: var(--public-border-gold) !important;
    background: #080808 !important;
    color: var(--public-text) !important;
}

body:not(.admin-body):not(.stylist-body) input::placeholder,
body:not(.admin-body):not(.stylist-body) textarea::placeholder {
    color: var(--public-muted) !important;
}

body:not(.admin-body):not(.stylist-body) label,
body:not(.admin-body):not(.stylist-body) small,
body:not(.admin-body):not(.stylist-body) .summary-line span:first-child,
body:not(.admin-body):not(.stylist-body) .summary-selected-style small,
body:not(.admin-body):not(.stylist-body) .booking-summary-note,
body:not(.admin-body):not(.stylist-body) .premium-empty-state,
body:not(.admin-body):not(.stylist-body) .booking-note-card {
    color: var(--public-muted) !important;
}

.ab-service-media,
.ab-service-preview {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--public-border-gold);
    background: #080808;
}

.ab-service-media img,
.ab-service-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ab-service-placeholder {
    min-height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(198, 166, 100, 0.12), transparent 42%),
        #080808;
    color: var(--public-text);
    text-align: center;
}

.ab-placeholder-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(198, 166, 100, 0.48);
    border-radius: 999px;
    color: var(--public-gold);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 800;
}

.ab-service-placeholder strong {
    max-width: 13rem;
    color: var(--public-text);
    font-size: 0.95rem;
    line-height: 1.25;
}

.ab-service-placeholder small {
    border: 1px solid rgba(198, 166, 100, 0.32);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--public-gold) !important;
    font-size: 0.75rem;
    font-weight: 800;
}

.service-tile-media {
    aspect-ratio: 4 / 3;
    border-width: 0 0 1px;
}

.premium-style-media,
.booking-service-image,
.marketplace-service-media {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
}

.premium-style-media .ab-service-placeholder,
.booking-service-image .ab-service-placeholder,
.marketplace-service-media .ab-service-placeholder {
    height: 100%;
}

.marketplace-service-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--public-border-gold);
}

.selected-style-preview,
.summary-style-preview {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
}

.selected-style-preview {
    width: 96px;
    height: 96px;
}

.summary-style-preview {
    width: 74px;
    height: 74px;
}

.selected-style-preview .ab-service-placeholder,
.summary-style-preview .ab-service-placeholder {
    padding: 8px;
}

.selected-style-preview .ab-placeholder-mark,
.summary-style-preview .ab-placeholder-mark {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
}

.selected-style-preview .ab-service-placeholder strong,
.summary-style-preview .ab-service-placeholder strong {
    display: none;
}

.selected-style-preview .ab-service-placeholder small,
.summary-style-preview .ab-service-placeholder small {
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    line-height: 1.1;
}

body:not(.admin-body):not(.stylist-body) .booking-progress-track {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
}

body:not(.admin-body):not(.stylist-body) .booking-progress-step {
    width: 100%;
    border: 1px solid var(--public-border-gold);
    background: var(--public-elevated);
}

body:not(.admin-body):not(.stylist-body) .booking-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

body:not(.admin-body):not(.stylist-body) .booking-service-card,
body:not(.admin-body):not(.stylist-body) .premium-style-card {
    background: var(--public-card) !important;
}

body:not(.admin-body):not(.stylist-body) .booking-service-overlay,
body:not(.admin-body):not(.stylist-body) .premium-style-card__content {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.08)) !important;
}

body:not(.admin-body):not(.stylist-body) .booking-field-wide {
    grid-column: 1 / -1;
}

body:not(.admin-body):not(.stylist-body) .summary-line,
body:not(.admin-body):not(.stylist-body) .summary-total,
body:not(.admin-body):not(.stylist-body) .summary-money div,
body:not(.admin-body):not(.stylist-body) .booking-review-lines div {
    border-color: rgba(198, 166, 100, 0.14) !important;
}

@media (min-width: 900px) {
    body:not(.admin-body):not(.stylist-body) .booking-progress-track {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body:not(.admin-body):not(.stylist-body) .container,
    body:not(.admin-body):not(.stylist-body) .premium-wrap {
        width: min(100% - 24px, 1280px);
    }

    body:not(.admin-body):not(.stylist-body) .grid.two,
    body:not(.admin-body):not(.stylist-body) .grid.three,
    body:not(.admin-body):not(.stylist-body) .premium-care-grid,
    body:not(.admin-body):not(.stylist-body) .premium-booking-grid,
    body:not(.admin-body):not(.stylist-body) .booking-style-layout,
    body:not(.admin-body):not(.stylist-body) .booking-date-grid,
    body:not(.admin-body):not(.stylist-body) .booking-detail-grid,
    body:not(.admin-body):not(.stylist-body) .marketplace-hero__grid,
    body:not(.admin-body):not(.stylist-body) .marketplace-form-grid,
    body:not(.admin-body):not(.stylist-body) .marketplace-step-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.admin-body):not(.stylist-body) .premium-brand__tagline {
        display: none;
    }

    body:not(.admin-body):not(.stylist-body) .premium-hero-copy {
        min-height: auto;
        padding: 28px 18px 92px;
    }

    body:not(.admin-body):not(.stylist-body) .premium-hero-copy h1 {
        font-size: clamp(2.45rem, 14vw, 4.2rem) !important;
        line-height: 0.96;
    }

    body:not(.admin-body):not(.stylist-body) .premium-booking-title {
        display: grid;
        gap: 14px;
        font-size: initial;
    }

    body:not(.admin-body):not(.stylist-body) .premium-booking-title h1 {
        font-size: clamp(2.2rem, 13vw, 3.4rem) !important;
    }

    body:not(.admin-body):not(.stylist-body) .premium-hero-actions,
    body:not(.admin-body):not(.stylist-body) .booking-step-actions,
    body:not(.admin-body):not(.stylist-body) .marketplace-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    body:not(.admin-body):not(.stylist-body) .premium-hero-actions a,
    body:not(.admin-body):not(.stylist-body) .premium-gold-button,
    body:not(.admin-body):not(.stylist-body) .premium-outline-button,
    body:not(.admin-body):not(.stylist-body) .booking-step-actions button,
    body:not(.admin-body):not(.stylist-body) .booking-step-actions a {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    body:not(.admin-body):not(.stylist-body) .booking-category-button,
    body:not(.admin-body):not(.stylist-body) .booking-location-card,
    body:not(.admin-body):not(.stylist-body) .booking-choice-card,
    body:not(.admin-body):not(.stylist-body) .booking-option-chip {
        align-items: flex-start;
        flex-direction: column;
    }

    body:not(.admin-body):not(.stylist-body) .booking-summary-panel {
        display: none !important;
    }
}

@media (max-width: 430px) {
    body:not(.admin-body):not(.stylist-body) .premium-wrap,
    body:not(.admin-body):not(.stylist-body) .container {
        width: min(100% - 20px, 1280px);
    }

    body:not(.admin-body):not(.stylist-body) .premium-brand__logo {
        width: 42px;
        height: 42px;
    }

    body:not(.admin-body):not(.stylist-body) .premium-brand__name {
        font-size: 1rem;
        white-space: normal;
    }

    body:not(.admin-body):not(.stylist-body) .booking-progress-track {
        grid-template-columns: 1fr;
    }

    body:not(.admin-body):not(.stylist-body) .booking-main-card,
    body:not(.admin-body):not(.stylist-body) .booking-summary-inner,
    body:not(.admin-body):not(.stylist-body) .booking-category-panel,
    body:not(.admin-body):not(.stylist-body) .booking-service-panel,
    body:not(.admin-body):not(.stylist-body) .booking-field-card {
        padding: 14px;
        border-radius: 18px;
    }

    body:not(.admin-body):not(.stylist-body) .selected-style-card,
    body:not(.admin-body):not(.stylist-body) .summary-selected-style {
        grid-template-columns: 64px 1fr;
    }

    .selected-style-preview,
    .summary-style-preview {
        width: 64px;
        height: 64px;
    }
}

body:not(.admin-body):not(.stylist-body) .provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 18px;
}

body:not(.admin-body):not(.stylist-body) .provider-card,
body:not(.admin-body):not(.stylist-body) .provider-profile-photo,
body:not(.admin-body):not(.stylist-body) .provider-package-card,
body:not(.admin-body):not(.stylist-body) .provider-safe-panel {
    overflow: hidden;
    border: 1px solid var(--public-border-gold);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(17, 17, 17, 0.98), rgba(5, 5, 5, 0.98)) !important;
    color: var(--public-text) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

body:not(.admin-body):not(.stylist-body) .provider-card__media,
body:not(.admin-body):not(.stylist-body) .provider-profile-photo {
    aspect-ratio: 4 / 3;
    background: #050505;
}

body:not(.admin-body):not(.stylist-body) .provider-card__media img,
body:not(.admin-body):not(.stylist-body) .provider-profile-photo img,
body:not(.admin-body):not(.stylist-body) .provider-portfolio-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body:not(.admin-body):not(.stylist-body) .provider-card__body {
    display: grid;
    gap: 12px;
    padding: 18px;
}

body:not(.admin-body):not(.stylist-body) .provider-card h3,
body:not(.admin-body):not(.stylist-body) .provider-package-card h3,
body:not(.admin-body):not(.stylist-body) .provider-safe-panel h2 {
    color: var(--public-text) !important;
    margin: 0;
}

body:not(.admin-body):not(.stylist-body) .provider-card p,
body:not(.admin-body):not(.stylist-body) .provider-package-card p,
body:not(.admin-body):not(.stylist-body) .provider-safe-panel p {
    color: var(--public-muted) !important;
    margin: 0;
}

body:not(.admin-body):not(.stylist-body) .provider-card__meta,
body:not(.admin-body):not(.stylist-body) .provider-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body:not(.admin-body):not(.stylist-body) .provider-card__meta span,
body:not(.admin-body):not(.stylist-body) .provider-profile-meta span,
body:not(.admin-body):not(.stylist-body) .provider-card__areas,
body:not(.admin-body):not(.stylist-body) .marketplace-category-link span {
    border: 1px solid rgba(198, 166, 100, 0.18);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--public-muted);
    background: rgba(198, 166, 100, 0.06);
    font-size: 0.78rem;
}

body:not(.admin-body):not(.stylist-body) .provider-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body:not(.admin-body):not(.stylist-body) .provider-card__bottom strong,
body:not(.admin-body):not(.stylist-body) .provider-package-card strong {
    color: var(--public-gold);
}

body:not(.admin-body):not(.stylist-body) .marketplace-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 12px;
    margin: 22px 0;
    padding: 14px;
    border: 1px solid var(--public-border-gold);
    border-radius: 18px;
    background: rgba(17, 17, 17, 0.92);
}

body:not(.admin-body):not(.stylist-body) .marketplace-filter-bar input,
body:not(.admin-body):not(.stylist-body) .marketplace-filter-bar select {
    width: 100%;
    border: 1px solid rgba(198, 166, 100, 0.2);
    border-radius: 12px;
    background: #050505;
    color: var(--public-text);
    padding: 12px 14px;
}

body:not(.admin-body):not(.stylist-body) .provider-profile-hero {
    padding: 56px 0 30px;
    background: radial-gradient(circle at top right, rgba(198, 166, 100, 0.12), transparent 32%), #050505;
}

body:not(.admin-body):not(.stylist-body) .provider-profile-hero__grid,
body:not(.admin-body):not(.stylist-body) .provider-profile-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
    gap: 28px;
    align-items: start;
}

body:not(.admin-body):not(.stylist-body) .provider-profile-hero h1 {
    color: var(--public-text) !important;
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.96;
    margin: 8px 0 14px;
}

body:not(.admin-body):not(.stylist-body) .provider-package-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
}

body:not(.admin-body):not(.stylist-body) .provider-package-card {
    display: grid;
    gap: 12px;
    padding: 18px;
}

body:not(.admin-body):not(.stylist-body) .provider-safe-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
}

body:not(.admin-body):not(.stylist-body) .provider-portfolio-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    min-height: 70px;
    color: var(--public-muted);
}

body:not(.admin-body):not(.stylist-body) .provider-portfolio-strip img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid rgba(198, 166, 100, 0.18);
}

body:not(.admin-body):not(.stylist-body) .marketplace-category-link {
    text-decoration: none;
}

body:not(.admin-body):not(.stylist-body) .provider-category-heading,
body:not(.admin-body):not(.stylist-body) .marketplace-events-actions {
    margin-top: 28px;
}

@media (max-width: 768px) {
    body:not(.admin-body):not(.stylist-body) .marketplace-filter-bar,
    body:not(.admin-body):not(.stylist-body) .provider-profile-hero__grid,
    body:not(.admin-body):not(.stylist-body) .provider-profile-grid {
        grid-template-columns: 1fr;
    }

    body:not(.admin-body):not(.stylist-body) .provider-card__bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .marketplace-recommendation-head,
    .marketplace-recommendation-action {
        align-items: stretch;
        flex-direction: column;
    }
}

.stylist-nav,
.marketplace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stylist-nav a,
.marketplace-tabs a {
    border: 1px solid rgba(198, 166, 100, 0.22);
    border-radius: 999px;
    color: rgba(255, 248, 220, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 12px;
    text-decoration: none;
}

.stylist-nav a.active,
.marketplace-tabs a.active {
    background: #c6a664;
    color: #080808;
}

.marketplace-tabs {
    margin: 0 0 20px;
}

.marketplace-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 10px;
    margin-top: 10px;
}

.marketplace-check-grid label,
.availability-row {
    align-items: center;
    color: rgba(255, 248, 220, 0.86);
    display: flex;
    gap: 10px;
}

.availability-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(100px, 0.5fr) minmax(100px, 0.5fr) minmax(180px, 1.2fr);
}

.marketplace-timeline {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.marketplace-timeline__item {
    align-items: center;
    background: rgba(5, 5, 5, 0.78);
    border: 1px solid rgba(198, 166, 100, 0.16);
    border-radius: 14px;
    color: rgba(255, 248, 220, 0.7);
    display: flex;
    gap: 10px;
    padding: 12px;
}

.marketplace-timeline__item span {
    align-items: center;
    border: 1px solid rgba(198, 166, 100, 0.25);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
}

.marketplace-timeline__item.is-done {
    border-color: rgba(198, 166, 100, 0.38);
}

.marketplace-timeline__item.is-current {
    background: rgba(198, 166, 100, 0.12);
    color: #fff8dc;
}

.provider-placeholder {
    align-items: center;
    background: linear-gradient(145deg, #050505, #15110a);
    color: #c6a664;
    display: flex;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    min-height: 180px;
    padding: 18px;
    text-align: center;
}

@media (max-width: 860px) {
    .stylist-header__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .availability-row {
        grid-template-columns: 1fr;
    }
}

/* ==================== Luxury refinement (true-gold pass) ====================
   Restraint layer: muted gold, small letterspaced uppercase labels, slim
   squared buttons, no glows, tighter radii. Public site only. */

body:not(.admin-body):not(.stylist-body) .premium-eyebrow {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--lux-gold) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-nav a {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body:not(.admin-body):not(.stylist-body) .premium-nav--utility a {
    font-size: 0.82rem;
    font-weight: 600;
}

body:not(.admin-body):not(.stylist-body) .premium-btn,
body:not(.admin-body):not(.stylist-body) .premium-header-cta,
body:not(.admin-body):not(.stylist-body) .premium-gold-button,
body:not(.admin-body):not(.stylist-body) .premium-outline-button,
body:not(.admin-body):not(.stylist-body) .premium-hero-actions a,
body:not(.admin-body):not(.stylist-body) .booking-step-actions a,
body:not(.admin-body):not(.stylist-body) .booking-step-actions button {
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 17px 32px !important;
    background-image: none !important;
    box-shadow: none !important;
}

body:not(.admin-body):not(.stylist-body) .premium-btn--gold,
body:not(.admin-body):not(.stylist-body) .premium-header-cta,
body:not(.admin-body):not(.stylist-body) .premium-gold-button {
    background: var(--lux-gold) !important;
    color: #140f08 !important;
    border: 1px solid var(--lux-gold) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-btn--dark,
body:not(.admin-body):not(.stylist-body) .premium-outline-button {
    background: transparent !important;
    border: 1px solid rgba(198, 166, 100, 0.5) !important;
    color: var(--lux-gold) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-panel {
    border-radius: 10px !important;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-style-card,
body:not(.admin-body):not(.stylist-body) .premium-style-media,
body:not(.admin-body):not(.stylist-body) .ab-service-media,
body:not(.admin-body):not(.stylist-body) .premium-panel,
body:not(.admin-body):not(.stylist-body) .premium-care-card,
body:not(.admin-body):not(.stylist-body) .premium-product-card,
body:not(.admin-body):not(.stylist-body) .premium-product-card__media,
body:not(.admin-body):not(.stylist-body) .premium-testimonial-card,
body:not(.admin-body):not(.stylist-body) .premium-process-card {
    border-radius: 8px !important;
}

body:not(.admin-body):not(.stylist-body) .premium-brand__logo {
    box-shadow: none !important;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-badges span {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(198, 166, 100, 0.35) !important;
    border-radius: 0 !important;
    padding: 3px 0 3px 13px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 248, 236, 0.68) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-section-head h2 {
    font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.01em !important;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-copy h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important;
    line-height: 1.02 !important;
}

body:not(.admin-body):not(.stylist-body) .premium-booking-title h1,
body:not(.admin-body):not(.stylist-body) .page-title h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-section-head a {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* ==================== Full-bleed futuristic-luxe layer ==================== */
body:not(.admin-body):not(.stylist-body) .premium-wrap {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(22px, 4vw, 80px);
}

body:not(.admin-body):not(.stylist-body) .premium-home-hero {
    padding: 0 !important;
}

body:not(.admin-body):not(.stylist-body) .premium-home-hero .premium-wrap {
    padding-inline: 0;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-panel {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 90vh;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-copy {
    min-height: 90vh;
    justify-content: flex-end;
    padding: clamp(28px, 5vw, 90px) clamp(22px, 4vw, 80px) clamp(50px, 7vw, 120px);
    background: linear-gradient(76deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.08) 72%), linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 42%) !important;
}

body:not(.admin-body):not(.stylist-body) .premium-hero-copy h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.6rem) !important;
}

.premium-hero-slide.is-active img {
    animation: lux-hero-zoom 16s ease-out forwards;
}

@keyframes lux-hero-zoom {
    from { transform: scale(1.001); }
    to { transform: scale(1.07); }
}

body:not(.admin-body):not(.stylist-body) .premium-style-row,
body:not(.admin-body):not(.stylist-body) .premium-product-row,
body:not(.admin-body):not(.stylist-body) .premium-testimonial-row {
    margin-inline: calc(-1 * clamp(22px, 4vw, 80px));
    padding-inline: clamp(22px, 4vw, 80px);
}

body:not(.admin-body):not(.stylist-body) .premium-section + .premium-section {
    border-top: 1px solid rgba(198, 166, 100, 0.13);
}

.premium-style-card { overflow: hidden; }

.premium-style-card img,
.premium-product-card__media img {
    transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.premium-style-card:hover img,
.premium-product-card:hover .premium-product-card__media img {
    transform: scale(1.06);
}

.lux-ribbon {
    overflow: hidden;
    border-block: 1px solid rgba(198, 166, 100, 0.22);
    background: #0a0908;
    padding: 14px 0;
}

.lux-ribbon__track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: lux-ribbon-scroll 38s linear infinite;
}

.lux-ribbon__track span {
    color: rgba(198, 166, 100, 0.82);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-right: 2.6em;
}

@keyframes lux-ribbon-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .premium-hero-slide.is-active img,
    .lux-ribbon__track { animation: none; }
    .premium-style-card img,
    .premium-product-card__media img { transition: none; }
}

/* Editorial statement */
.lux-statement {
    border-top: 1px solid rgba(198, 166, 100, 0.13);
    padding: clamp(70px, 9vw, 150px) clamp(22px, 4vw, 80px);
    text-align: center;
    background: radial-gradient(60% 90% at 50% 50%, rgba(198, 166, 100, 0.06), transparent 70%);
}

.lux-statement p {
    margin: 0 auto;
    max-width: 900px;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(1.9rem, 4vw, 3.3rem);
    line-height: 1.18;
    color: var(--lux-cream);
}

.lux-statement em {
    color: var(--lux-gold);
}

/* Full-bleed auto-scrolling gallery */
.lux-gallery {
    overflow: hidden;
    margin-inline: calc(-1 * clamp(22px, 4vw, 80px));
}

.lux-gallery__track {
    display: flex;
    width: max-content;
    animation: lux-gallery-scroll 70s linear infinite;
    padding-block: 8px;
}

.lux-gallery:hover .lux-gallery__track {
    animation-play-state: paused;
}

.lux-gallery__track figure {
    margin: 0 14px 0 0;
    width: 290px;
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

.lux-gallery__track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes lux-gallery-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Lookbook numerals on style cards */
.premium-style-card { position: relative; }

.lux-index {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 2;
    font-family: var(--lux-display, Georgia, serif);
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    color: rgba(255, 248, 236, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    .lux-gallery__track { animation: none; }
}

/* ==================== The Atelier interface (futuristic home) ==================== */
.ftr { position: relative; overflow: hidden; }

/* Film grain. Deliberately NOT `position: fixed` + `mix-blend-mode`: a full-viewport
   blended fixed layer forces the compositor to re-blend the page on every scroll
   frame, which was a major cause of scroll jank on laptops. Absolute + plain alpha
   looks the same and costs almost nothing. */
.ftr-grain {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ftr-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Gold aurora. The glow is painted with a soft radial gradient rather than an
   animated `filter: blur(90px)` on a 55vw element — animating a large-radius blur
   re-rasterises a huge layer every frame and was the single most expensive thing
   on the page. Same look, effectively free. */
.ftr-aurora i {
    position: absolute;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    opacity: 0.16;
    background: radial-gradient(circle, rgba(198, 166, 100, 0.55) 0%, rgba(198, 166, 100, 0.16) 38%, transparent 68%);
}

.ftr-aurora i:nth-child(1) { top: -18vw; left: -12vw; }
.ftr-aurora i:nth-child(2) { top: 24vh; right: -20vw; opacity: 0.1; }
.ftr-aurora i:nth-child(3) { bottom: -22vw; left: 24vw; opacity: 0.08; }

.ftr-arrival {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 6vw, 90px) clamp(22px, 4vw, 80px);
}

/* Hero with a photo backdrop. The scrim keeps the type fully legible over any
   image, and the <img> (rather than a CSS background) lets the browser prioritise
   and decode it as the LCP element. */
/* Painted at z-index 0 with the hero's own content lifted above it, rather than
   at z-index -1. A negative backdrop only stays visible while its parent happens
   to establish a stacking context — lose that and the photograph silently
   disappears behind the page background. */
.ftr-arrival--photo .ftr-arrival__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ftr-arrival--photo > *:not(.ftr-arrival__bg) {
    position: relative;
    z-index: 1;
}

/* The scroll hint is absolutely positioned against the hero; lifting it above the
   backdrop must not flatten it back into the flow. */
.ftr-arrival--photo > .ftr-hint { position: absolute; }

.ftr-arrival--photo .ftr-arrival__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.ftr-arrival--photo .ftr-arrival__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 58% 46% at 50% 47%, rgba(8, 7, 6, 0.82) 0%, rgba(8, 7, 6, 0.5) 58%, transparent 80%),
        linear-gradient(180deg, rgba(8, 7, 6, 0.6) 0%, rgba(8, 7, 6, 0.14) 24%, rgba(8, 7, 6, 0.2) 64%, rgba(8, 7, 6, 0.88) 100%);
}

.ftr-kicker {
    margin: 0 0 18px;
    color: var(--lux-gold);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ftr-word {
    margin: 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(3.1rem, 8.4vw, 6.6rem);
    line-height: 0.94;
    letter-spacing: 0.02em;
    background: linear-gradient(100deg, #b08f52 0%, #ecdcae 34%, #c6a664 62%, #a8874d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes ftr-shimmer { from { background-position: 0% 0; } to { background-position: 220% 0; } }

.ftr-lead {
    margin: 22px 0 0;
    color: var(--lux-cream);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    letter-spacing: 0.04em;
}

.ftr-type {
    margin: 10px 0 0;
    min-height: 1.5em;
    color: var(--lux-muted);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
}

.ftr-caret {
    display: inline-block;
    width: 9px;
    height: 1.1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--lux-gold);
    animation: ftr-blink 1s steps(1) infinite;
}

@keyframes ftr-blink { 50% { opacity: 0; } }

.ftr-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

.ftr-btn {
    display: inline-block;
    padding: 19px 38px;
    border-radius: 3px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.ftr-btn--gold { background: var(--lux-gold); color: #140f08; border: 1px solid var(--lux-gold); }
.ftr-btn--gold:hover { background: #d8bd82; }
.ftr-btn--ghost { background: transparent; color: var(--lux-gold); border: 1px solid rgba(198, 166, 100, 0.5); }
.ftr-btn--ghost:hover { border-color: var(--lux-gold); }

.ftr-hint {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 248, 236, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ftr-hint span {
    display: block;
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, var(--lux-gold), transparent);
    animation: ftr-hintdrop 2.2s ease-in-out infinite;
}

@keyframes ftr-hintdrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

.ftr-chapter { position: relative; z-index: 1; padding: clamp(64px, 9vw, 140px) clamp(22px, 4vw, 80px); }

.ftr-chaphead { max-width: 900px; margin-bottom: clamp(34px, 5vw, 64px); }

.ftr-chapnum {
    display: block;
    font-family: var(--lux-display, Georgia, serif);
    font-size: 0.9rem;
    letter-spacing: 0.4em;
    color: var(--lux-gold);
    margin-bottom: 10px;
}

.ftr-chaphead h2 {
    margin: 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    color: var(--lux-cream);
    line-height: 1.02;
}

.ftr-chaphead p { margin: 14px 0 0; color: var(--lux-muted); font-size: 1.12rem; line-height: 1.6; max-width: 56ch; }

.ftr-styles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 2.6vw, 34px);
}

.ftr-style {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--lux-cream);
}

@media (min-width: 980px) {
    .ftr-style:nth-child(3n + 2) { transform: translateY(46px); }
}

.ftr-ghost {
    position: absolute;
    top: -0.62em;
    left: -0.08em;
    z-index: 2;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2.4rem, 3.6vw, 3.2rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(198, 166, 100, 0.32);
    pointer-events: none;
}

.ftr-style figure {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
}

.ftr-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1), filter 1.1s ease;
}

.ftr-style:hover img { transform: scale(1.06); }

.ftr-style-meta { display: flex; align-items: baseline; gap: 12px; padding: 14px 2px 0; flex-wrap: wrap; }
.ftr-style-meta h3 { margin: 0; font-family: var(--lux-display, Georgia, serif); font-size: 1.35rem; font-weight: 600; }
.ftr-style-price { color: var(--lux-gold); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; }

.ftr-style-cta {
    margin-left: auto;
    color: rgba(255, 248, 236, 0.62);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.ftr-style:hover .ftr-style-cta { opacity: 1; transform: none; color: var(--lux-gold); }

.ftr-statement {
    position: relative;
    z-index: 1;
    padding: clamp(80px, 11vw, 170px) clamp(22px, 4vw, 80px);
    text-align: center;
    border-block: 1px solid rgba(198, 166, 100, 0.13);
    background: radial-gradient(55% 80% at 50% 50%, rgba(198, 166, 100, 0.07), transparent 70%);
}

.ftr-statement p {
    margin: 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2.1rem, 5.6vw, 4.4rem);
    line-height: 1.12;
    color: var(--lux-cream);
}

.ftr-statement em { color: var(--lux-gold); }

.ftr-statement .ftr-route {
    margin-top: 26px;
    font-family: var(--lux-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 248, 236, 0.5);
}

.ftr-chapter--bleed { padding-inline: 0; }
.ftr-chapter--bleed .ftr-chaphead { padding-inline: clamp(22px, 4vw, 80px); }

.ftr-stream { overflow: hidden; margin-top: 6px; }
.ftr-stream__track { display: flex; width: max-content; animation: ftr-stream-l 76s linear infinite; }
.ftr-stream--rev .ftr-stream__track { animation: ftr-stream-r 88s linear infinite; }
.ftr-stream:hover .ftr-stream__track { animation-play-state: paused; }

.ftr-stream figure {
    margin: 0 12px 0 0;
    width: 300px;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
}

.ftr-stream img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes ftr-stream-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ftr-stream-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.ftr-quote {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(70px, 9vw, 130px) clamp(22px, 4vw, 80px) clamp(30px, 4vw, 60px);
}

.ftr-quote-label {
    display: block;
    color: var(--lux-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ftr-quote blockquote {
    margin: 0 auto;
    max-width: 820px;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    line-height: 1.25;
    color: var(--lux-cream);
}

.ftr-quote cite {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--lux-muted);
    font-style: normal;
    font-size: 0.85rem;
}

.ftr-finale {
    position: relative;
    z-index: 1;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(70px, 9vw, 130px) clamp(22px, 4vw, 80px);
    overflow: hidden;
}

.ftr-ghost--xl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-size: clamp(6rem, 22vw, 19rem);
    -webkit-text-stroke: 1px rgba(198, 166, 100, 0.22);
}

.ftr-finale h2 {
    position: relative;
    margin: 0 0 26px;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    color: var(--lux-cream);
}

.ftr-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.65, 0.25, 1); }
.ftr-reveal.in { opacity: 1; transform: none; }

@media (min-width: 980px) {
    .ftr-style.ftr-reveal.in:nth-child(3n + 2) { transform: translateY(46px); }
}

.ftr-comet {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 300;
    pointer-events: none;
    background: radial-gradient(circle, #ecdcae 0%, #c6a664 70%);
    box-shadow: 0 0 16px rgba(198, 166, 100, 0.85);
    mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
    .ftr-aurora i, .ftr-word, .ftr-caret, .ftr-hint span,
    .ftr-stream__track { animation: none !important; }
    .ftr-reveal { opacity: 1; transform: none; transition: none; }
}

/* The global link-colour override must not paint the solid gold buttons'
   text gold-on-gold. */
body:not(.admin-body):not(.stylist-body) a.ftr-btn--gold,
body:not(.admin-body):not(.stylist-body) a.ftr-toggle.is-active {
    color: #140f08 !important;
}

body:not(.admin-body):not(.stylist-body) a.ftr-btn--ghost {
    color: var(--lux-gold) !important;
}

/* ==================== Atelier page shell (inner pages) ==================== */
.ftr--page { min-height: 60vh; }

.ftr-pagehero {
    position: relative;
    z-index: 1;
    padding: clamp(56px, 8vw, 118px) clamp(22px, 4vw, 80px) clamp(24px, 3vw, 44px);
    max-width: 1000px;
}

.ftr-pagetitle {
    margin: 16px 0 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    line-height: 0.98;
    color: var(--lux-cream);
}

.ftr-pagetitle em { color: var(--lux-gold); font-style: italic; }

.ftr-pagelede {
    margin: 22px 0 0;
    max-width: 620px;
    color: var(--lux-muted);
    font-size: clamp(0.98rem, 1.6vw, 1.16rem);
    line-height: 1.7;
}

.ftr-rule {
    height: 1px;
    border: 0;
    margin: 0 clamp(22px, 4vw, 80px);
    background: rgba(198, 166, 100, 0.16);
}

/* Editorial two-column split for contact/product-style pages */
.ftr-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 60px);
    padding: clamp(30px, 5vw, 70px) clamp(22px, 4vw, 80px) clamp(64px, 8vw, 120px);
}

@media (min-width: 900px) { .ftr-split { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

.ftr-card {
    position: relative;
    z-index: 1;
    background: rgba(21, 19, 23, 0.66);
    border: 1px solid rgba(198, 166, 100, 0.2);
    border-radius: 8px;
    padding: clamp(20px, 3vw, 34px);
    color: var(--lux-cream);
}

.ftr-card h3 { margin: 0 0 8px; font-family: var(--lux-display, Georgia, serif); font-size: 1.4rem; font-weight: 600; }
.ftr-card p { margin: 0; color: var(--lux-muted); line-height: 1.65; }

.ftr-figure {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 5;
}

.ftr-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ accordion */
.ftr-faq {
    border-bottom: 1px solid rgba(198, 166, 100, 0.16);
}

.ftr-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    color: var(--lux-cream);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: baseline;
}

.ftr-faq summary::-webkit-details-marker { display: none; }
.ftr-faq summary::after { content: '+'; color: var(--lux-gold); font-family: var(--lux-body, sans-serif); font-size: 1.4rem; }
.ftr-faq[open] summary::after { content: '\2212'; }
.ftr-faq[open] summary { color: var(--lux-gold); }
.ftr-faq p { color: var(--lux-muted); line-height: 1.7; padding: 0 0 22px; margin: 0; max-width: 760px; }

/* Plan / price cards */
.ftr-plans {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(18px, 3vw, 34px);
    padding: clamp(30px, 5vw, 60px) clamp(22px, 4vw, 80px) clamp(64px, 8vw, 120px);
}

.ftr-plan {
    border: 1px solid rgba(198, 166, 100, 0.22);
    border-radius: 8px;
    padding: clamp(24px, 3vw, 38px);
    background: rgba(21, 19, 23, 0.6);
    display: flex;
    flex-direction: column;
}

.ftr-plan h3 { margin: 0; font-family: var(--lux-display, Georgia, serif); font-size: 1.6rem; font-weight: 600; color: var(--lux-cream); }
.ftr-plan .ftr-plan-price { font-family: var(--lux-display, Georgia, serif); font-size: 2.6rem; color: var(--lux-gold); margin: 14px 0 4px; }
.ftr-plan ul { list-style: none; padding: 0; margin: 18px 0; color: var(--lux-muted); }
.ftr-plan li { padding: 7px 0; border-top: 1px solid rgba(255, 248, 236, 0.07); font-size: 0.92rem; }
.ftr-plan .ftr-btn { margin-top: auto; text-align: center; }

/* Marketplace "two crafts" headline panels */
.ftr-crafts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.5vw, 28px); padding: 0 clamp(22px, 4vw, 80px); }
@media (min-width: 760px) { .ftr-crafts { grid-template-columns: 1fr 1fr; } }
.ftr-craft { position: relative; overflow: hidden; border: 1px solid rgba(198, 166, 100, 0.24); border-radius: 10px; padding: clamp(28px, 4vw, 56px); background: radial-gradient(130% 130% at 100% 0, rgba(198, 166, 100, 0.1), transparent 62%); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: border-color .3s ease, transform .3s ease; }
.ftr-craft:hover { border-color: rgba(198, 166, 100, 0.6); transform: translateY(-3px); }
.ftr-craft .n { color: var(--lux-gold, #c6a664); font-size: .62rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.ftr-craft h3 { font-family: var(--lux-display, Georgia, serif); font-size: clamp(2rem, 4vw, 3.1rem); color: var(--lux-cream, #fff8ec); margin: 12px 0 6px; line-height: 1; }
.ftr-craft p { color: var(--lux-muted, rgba(255,248,236,.66)); margin: 0; max-width: 340px; line-height: 1.6; }
.ftr-craft .go { margin-top: 20px; color: var(--lux-gold, #c6a664); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ftr-craft--photo { min-height: 360px; background-size: cover; background-position: center; }
.ftr-craft--photo:hover { background-size: 108%; }
/* Cinematic full-width photo band */
.ftr-band { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: clamp(180px, 26vh, 320px); border-block: 1px solid rgba(198, 166, 100, 0.2); overflow: hidden; }
.ftr-band img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.82); transition: filter .5s ease, transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1); }
.ftr-band img:hover { filter: saturate(1.05) brightness(1); transform: scale(1.05); }
@media (max-width: 640px) { .ftr-band { grid-template-columns: repeat(2, 1fr); } }

/* Marketplace filter toggles + provider cards (Atelier) */
.ftr-toggles { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: clamp(8px, 2vw, 20px) clamp(22px, 4vw, 80px) 0; }
.ftr-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(198, 166, 100, 0.28); border-radius: 999px; padding: 9px 18px; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.ftr-toggle:hover { border-color: rgba(198, 166, 100, 0.6); color: var(--lux-cream, #fff8ec); }
.ftr-toggle.is-active { background: var(--lux-gold, #c6a664); border-color: var(--lux-gold, #c6a664); color: #140f08; }

.ftr-filterbar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: clamp(16px, 2.4vw, 26px) clamp(22px, 4vw, 80px) 0; }
.ftr-filterbar select { appearance: none; background: rgba(21, 19, 23, 0.72) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%23c6a664'%20d%3D'M6%208%200%200h12z'%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center; border: 1px solid rgba(198, 166, 100, 0.24); border-radius: 8px; color: var(--lux-cream, #fff8ec); padding: 12px 40px 12px 16px; font-size: 0.85rem; letter-spacing: 0.02em; min-width: 220px; }
.ftr-filterbar select:focus { outline: none; border-color: rgba(198, 166, 100, 0.6); }
.ftr-filterbar option { background: #14110c; color: #fff8ec; }

.ftr-providers { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 3vw, 34px); padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 80px) clamp(20px, 3vw, 40px); }
.ftr-provider { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 10px; overflow: hidden; background: rgba(21, 19, 23, 0.6); text-decoration: none; color: var(--lux-cream, #fff8ec); transition: border-color .3s ease, transform .3s ease; }
.ftr-provider:hover { border-color: rgba(198, 166, 100, 0.55); transform: translateY(-4px); }
.ftr-provider__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #14110c; }
.ftr-provider__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1); }
.ftr-provider:hover .ftr-provider__media img { transform: scale(1.05); }
.ftr-provider__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(120% 120% at 50% 0, rgba(198, 166, 100, 0.14), transparent 60%); color: var(--lux-gold, #c6a664); }
.ftr-provider__ph .mono { font-family: var(--lux-display, Georgia, serif); font-size: 2.6rem; letter-spacing: 0.04em; line-height: 1; }
.ftr-provider__ph small { color: var(--lux-muted, rgba(255, 248, 236, 0.6)); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ftr-provider__badge { position: absolute; top: 14px; left: 14px; background: rgba(10, 8, 6, 0.68); border: 1px solid rgba(198, 166, 100, 0.4); color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
.ftr-provider__body { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; flex: 1; }
.ftr-provider__type { color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ftr-provider__body h3 { margin: 8px 0 0; font-family: var(--lux-display, Georgia, serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.ftr-provider__body > p { margin: 8px 0 0; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); font-size: 0.9rem; line-height: 1.6; }
.ftr-provider__meta { display: flex; align-items: center; gap: 14px; margin: 15px 0 0; font-size: 0.76rem; color: var(--lux-muted, rgba(255, 248, 236, 0.6)); }
.ftr-provider__meta .rate { color: var(--lux-gold, #c6a664); font-weight: 600; }
.ftr-provider__meta .dot { opacity: 0.4; }
.ftr-provider__areas { margin: 10px 0 0; font-size: 0.75rem; color: rgba(255, 248, 236, 0.48); letter-spacing: 0.02em; }
.ftr-provider__bottom { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ftr-provider__price { font-family: var(--lux-display, Georgia, serif); color: var(--lux-cream, #fff8ec); font-size: 1.1rem; line-height: 1.1; }
.ftr-provider__price span { display: block; color: var(--lux-muted, rgba(255, 248, 236, 0.5)); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--lux-body, sans-serif); margin-bottom: 3px; }
.ftr-provider__go { color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; padding-bottom: 2px; }
.ftr-empty { position: relative; z-index: 1; margin: clamp(20px, 4vw, 40px) clamp(22px, 4vw, 80px); border: 1px dashed rgba(198, 166, 100, 0.3); border-radius: 10px; padding: clamp(30px, 5vw, 60px); text-align: center; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); }
.ftr-empty h2 { font-family: var(--lux-display, Georgia, serif); color: var(--lux-cream, #fff8ec); font-size: 1.6rem; margin: 0 0 8px; }
.ftr-pagination { position: relative; z-index: 1; padding: 0 clamp(22px, 4vw, 80px) clamp(50px, 7vw, 90px); }
.ftr-pagination nav { display: flex; justify-content: center; }
.ftr-pagination svg { width: 18px; height: 18px; }

/* Provider profile (Atelier) */
.ftr-profilehero { position: relative; z-index: 1; padding: clamp(40px, 6vw, 96px) clamp(22px, 4vw, 80px) clamp(20px, 3vw, 40px); }
.ftr-profilehero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 860px) { .ftr-profilehero__grid { grid-template-columns: 0.8fr 1.2fr; } }
.ftr-profilehero__photo { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; border: 1px solid rgba(198, 166, 100, 0.24); background: #14110c; }
.ftr-profilehero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftr-profilehero__photo .ftr-provider__ph { border-radius: 12px; }
.ftr-profilehero__id .ftr-pagetitle { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.ftr-metaline { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; }
.ftr-metaline span { border: 1px solid rgba(198, 166, 100, 0.28); border-radius: 999px; padding: 7px 15px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lux-muted, rgba(255, 248, 236, 0.7)); }
.ftr-metaline span.gold { color: var(--lux-gold, #c6a664); border-color: rgba(198, 166, 100, 0.5); }

.ftr-cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.5vw, 26px); }
@media (min-width: 720px) { .ftr-cards--2 { grid-template-columns: 1fr 1fr; } }
.ftr-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 8px; }
.ftr-portfolio img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid rgba(198, 166, 100, 0.2); display: block; }

.ftr-review { border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 10px; padding: clamp(22px, 3vw, 32px); background: rgba(21, 19, 23, 0.6); display: flex; flex-direction: column; }
.ftr-review .stars { color: var(--lux-gold, #c6a664); letter-spacing: 3px; font-size: 0.9rem; }
.ftr-review h3 { font-family: var(--lux-display, Georgia, serif); font-size: 1.25rem; font-weight: 600; margin: 12px 0 8px; color: var(--lux-cream, #fff8ec); }
.ftr-review p { color: var(--lux-muted, rgba(255, 248, 236, 0.66)); line-height: 1.65; margin: 0; }
.ftr-package-price { font-family: var(--lux-display, Georgia, serif); font-size: 2rem; color: var(--lux-gold, #c6a664); margin: 14px 0 18px; }

/* Atelier booking form (scoped to .ftr-form so shared classes elsewhere are untouched) */
.ftr-formwrap { position: relative; z-index: 1; padding: clamp(10px, 2vw, 24px) clamp(22px, 4vw, 80px) clamp(60px, 8vw, 110px); }
.ftr-form .marketplace-form-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.5vw, 28px); }
.ftr-form .marketplace-form-panel { border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 12px; background: rgba(21, 19, 23, 0.6); padding: clamp(22px, 3vw, 40px); }
.ftr-form .marketplace-form-panel > h2 { font-family: var(--lux-display, Georgia, serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; color: var(--lux-cream, #fff8ec); margin: 0 0 clamp(18px, 2.4vw, 28px); padding-bottom: 16px; border-bottom: 1px solid rgba(198, 166, 100, 0.16); }
.ftr-form .booking-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.ftr-form .booking-detail-grid + .booking-detail-grid { margin-top: clamp(14px, 2vw, 22px); }
@media (max-width: 640px) { .ftr-form .booking-detail-grid { grid-template-columns: 1fr; } }
.ftr-form .booking-field-card { display: flex; flex-direction: column; gap: 8px; }
.ftr-form .booking-field-wide { grid-column: 1 / -1; }
.ftr-form .booking-field-card > span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lux-gold, #c6a664); }
.ftr-form .booking-field-card input,
.ftr-form .booking-field-card select,
.ftr-form .booking-field-card textarea { width: 100%; background-color: rgba(12, 10, 14, 0.72); border: 1px solid rgba(198, 166, 100, 0.22); border-radius: 8px; color: var(--lux-cream, #fff8ec); padding: 12px 14px; font-size: 0.92rem; font-family: var(--lux-body, sans-serif); }
.ftr-form .booking-field-card textarea { resize: vertical; min-height: 92px; }
.ftr-form .booking-field-card select { appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%23c6a664'%20d%3D'M6%208%200%200h12z'%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.ftr-form .booking-field-card input:focus,
.ftr-form .booking-field-card select:focus,
.ftr-form .booking-field-card textarea:focus { outline: none; border-color: rgba(198, 166, 100, 0.6); }
.ftr-form .booking-field-card option { background: #14110c; color: #fff8ec; }
.ftr-form .booking-field-card input[type="file"] { padding: 10px; color: var(--lux-muted, rgba(255, 248, 236, 0.6)); font-size: 0.82rem; }
.ftr-form .booking-field-card small.muted { color: var(--lux-muted, rgba(255, 248, 236, 0.55)); font-size: 0.75rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.ftr-form .stylist-address-box { border: 1px solid rgba(198, 166, 100, 0.28); border-radius: 8px; padding: 16px 18px; margin-bottom: clamp(18px, 2.4vw, 26px); background: radial-gradient(120% 120% at 0 0, rgba(198, 166, 100, 0.08), transparent 60%); }
.ftr-form .stylist-address-box span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lux-gold, #c6a664); margin-bottom: 6px; }
.ftr-form .stylist-address-box p { margin: 0; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); line-height: 1.6; }
.ftr-form .marketplace-estimate { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; margin: clamp(20px, 2.6vw, 28px) 0; padding: clamp(18px, 2.4vw, 24px); border: 1px solid rgba(198, 166, 100, 0.3); border-radius: 10px; background: rgba(198, 166, 100, 0.05); }
.ftr-form .marketplace-estimate span { color: var(--lux-muted, rgba(255, 248, 236, 0.66)); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ftr-form .marketplace-estimate strong { font-family: var(--lux-display, Georgia, serif); color: var(--lux-gold, #c6a664); font-size: 1.5rem; text-align: right; }
/* Make the deposit/total summary stand out from the plain field cards
   (beats the global public-theme !important card treatment). */
body:not(.admin-body):not(.stylist-body) .ftr-form .marketplace-estimate { background: rgba(198, 166, 100, 0.06) !important; border-color: rgba(198, 166, 100, 0.4) !important; box-shadow: none !important; }
.ftr-form .booking-terms-line { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; }
.ftr-form .booking-terms-line input { margin-top: 3px; accent-color: var(--lux-gold, #c6a664); flex: none; width: auto; }
.ftr-form .booking-terms-line strong { font-weight: 500; font-size: 0.9rem; line-height: 1.5; color: var(--lux-cream, #fff8ec); }
.ftr-form .marketplace-submit { width: 100%; margin-top: 12px; text-align: center; }
.ftr-form .marketplace-recommendation-box { margin-top: clamp(18px, 2.4vw, 26px); border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 10px; padding: clamp(16px, 2.2vw, 24px); background: rgba(12, 10, 14, 0.5); }
.ftr-form .marketplace-recommendation-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.ftr-form .marketplace-recommendation-head > div > span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lux-gold, #c6a664); }
.ftr-form .marketplace-recommendation-head p { margin: 6px 0 0; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); font-size: 0.85rem; }
.ftr-form .marketplace-recommendation-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.ftr-form .marketplace-recommendation-list:empty { margin-top: 0; }
.ftr-form .marketplace-recommendation-card { border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 8px; padding: 16px; background: rgba(21, 19, 23, 0.6); display: flex; flex-direction: column; gap: 10px; }
.ftr-form .marketplace-recommendation-card.is-selected { border-color: var(--lux-gold, #c6a664); box-shadow: 0 0 0 1px var(--lux-gold, #c6a664) inset; }
.ftr-form .marketplace-recommendation-card strong { color: var(--lux-cream, #fff8ec); font-family: var(--lux-display, Georgia, serif); font-size: 1.05rem; }
.ftr-form .marketplace-recommendation-card p { margin: 0; color: var(--lux-muted, rgba(255, 248, 236, 0.6)); font-size: 0.78rem; }
.ftr-form .marketplace-recommendation-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr-form .marketplace-recommendation-tags span { font-size: 0.75rem; color: var(--lux-muted, rgba(255, 248, 236, 0.6)); border: 1px solid rgba(198, 166, 100, 0.24); border-radius: 999px; padding: 3px 9px; }
.ftr-form .marketplace-recommendation-action { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.ftr-form .marketplace-recommendation-action span { font-size: 0.75rem; color: var(--lux-gold, #c6a664); }
.ftr-form .premium-outline-button { background: transparent; border: 1px solid rgba(198, 166, 100, 0.5); color: var(--lux-gold, #c6a664); border-radius: 999px; padding: 9px 18px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background .25s ease; }
.ftr-form .premium-outline-button:hover { background: rgba(198, 166, 100, 0.12); }

/* Filter-bar free-text search input */
.ftr-filterbar input[type="text"],
.ftr-filterbar input:not([type]) { background-color: rgba(21, 19, 23, 0.72); border: 1px solid rgba(198, 166, 100, 0.24); border-radius: 8px; color: var(--lux-cream, #fff8ec); padding: 12px 16px; font-size: 0.85rem; min-width: 240px; flex: 1 1 240px; }
.ftr-filterbar input::placeholder { color: rgba(255, 248, 236, 0.4); }
.ftr-filterbar input:focus { outline: none; border-color: rgba(198, 166, 100, 0.6); }

/* Provider onboarding chips + event service check-grid (scoped to .ftr-form) */
.ftr-form .marketplace-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 clamp(16px, 2.4vw, 24px); }
.ftr-form .booking-option-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(198, 166, 100, 0.28); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ftr-form .booking-option-chip:hover { border-color: rgba(198, 166, 100, 0.55); }
.ftr-form .booking-option-chip input { accent-color: var(--lux-gold, #c6a664); width: auto; }
.ftr-form .booking-option-chip strong { font-weight: 500; font-size: 0.82rem; color: var(--lux-cream, #fff8ec); }
/* Selected craft/area/service chips: a crisp gold ring. box-shadow sidesteps
   the global public-theme !important background/border on chips. */
.ftr-form .booking-option-chip:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--lux-gold, #c6a664), 0 10px 30px rgba(198, 166, 100, 0.14); }
.ftr-form .booking-option-chip:has(input:checked) strong { color: var(--lux-gold, #c6a664); }
.ftr-form .marketplace-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ftr-form .marketplace-check-grid label { display: flex; align-items: center; gap: 9px; color: var(--lux-cream, #fff8ec); font-size: 0.85rem; border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.ftr-form .marketplace-check-grid input { accent-color: var(--lux-gold, #c6a664); width: auto; }

/* Booking status / info / timeline (Atelier transactional pages) */
.ftr-block { position: relative; z-index: 1; padding: 0 clamp(22px, 4vw, 80px) clamp(28px, 4vw, 48px); }
.ftr-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 16px; border: 1px solid rgba(198, 166, 100, 0.4); border-radius: 999px; color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.ftr-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lux-gold, #c6a664); box-shadow: 0 0 10px rgba(198, 166, 100, 0.7); }
.ftr-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(14px, 2vw, 24px); border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 12px; background: rgba(21, 19, 23, 0.6); padding: clamp(20px, 3vw, 34px); }
.ftr-info > div { border-top: 1px solid rgba(198, 166, 100, 0.18); padding-top: 12px; }
.ftr-info strong { display: block; color: var(--lux-gold, #c6a664); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.ftr-info p { margin: 7px 0 0; color: var(--lux-cream, #fff8ec); font-size: 0.98rem; line-height: 1.4; }
.ftr-timeline { display: grid; gap: 10px; }
.ftr-timeline__item { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid rgba(198, 166, 100, 0.14); border-radius: 8px; color: var(--lux-muted, rgba(255, 248, 236, 0.55)); background: rgba(21, 19, 23, 0.4); }
.ftr-timeline__item span { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(198, 166, 100, 0.3); display: grid; place-items: center; font-size: 0.75rem; font-family: var(--lux-display, Georgia, serif); }
.ftr-timeline__item strong { font-weight: 500; font-size: 0.92rem; }
.ftr-timeline__item.is-done { color: var(--lux-cream, #fff8ec); border-color: rgba(198, 166, 100, 0.3); }
.ftr-timeline__item.is-done span { background: rgba(198, 166, 100, 0.18); border-color: var(--lux-gold, #c6a664); color: var(--lux-gold, #c6a664); }
.ftr-timeline__item.is-current { border-color: var(--lux-gold, #c6a664); background: rgba(198, 166, 100, 0.07); box-shadow: inset 0 0 0 1px rgba(198, 166, 100, 0.3); }
.ftr-timeline__item.is-current strong { color: var(--lux-gold, #c6a664); }
.ftr-alert { position: relative; z-index: 1; margin: 0 clamp(22px, 4vw, 80px) clamp(20px, 3vw, 34px); border: 1px solid rgba(214, 120, 120, 0.4); border-radius: 10px; padding: 16px 20px; color: #e7b7b7; background: rgba(120, 40, 40, 0.12); }
.ftr-cards--3 { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 720px) { .ftr-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.ftr-linkcard { display: flex; flex-direction: column; gap: 8px; border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 10px; background: rgba(21, 19, 23, 0.6); padding: clamp(20px, 2.6vw, 30px); text-decoration: none; transition: border-color .3s ease, transform .3s ease; }
.ftr-linkcard:hover { border-color: rgba(198, 166, 100, 0.55); transform: translateY(-3px); }
.ftr-linkcard h3 { margin: 0; font-family: var(--lux-display, Georgia, serif); font-size: 1.3rem; font-weight: 600; color: var(--lux-cream, #fff8ec); }
.ftr-linkcard p { margin: 0; color: var(--lux-muted, rgba(255, 248, 236, 0.6)); font-size: 0.88rem; line-height: 1.55; }
.ftr-linkcard .go { margin-top: 6px; color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

/* Bank-transfer deposit panel (UK payment moment) */
.ftr-bank { position: relative; z-index: 1; border: 1px solid rgba(198, 166, 100, 0.4); border-radius: 14px; background: radial-gradient(120% 120% at 0 0, rgba(198, 166, 100, 0.1), transparent 60%), rgba(21, 19, 23, 0.7); padding: clamp(24px, 3.5vw, 44px); }
.ftr-bank .k { color: var(--lux-gold, #c6a664); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ftr-bank h2 { font-family: var(--lux-display, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; color: var(--lux-cream, #fff8ec); margin: 8px 0 10px; }
.ftr-bank > p { color: var(--lux-muted, rgba(255, 248, 236, 0.66)); max-width: 640px; line-height: 1.65; margin: 0; }
.ftr-bank__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: clamp(20px, 2.6vw, 30px) 0; }
.ftr-bank__rows > div { border-top: 1px solid rgba(198, 166, 100, 0.2); padding-top: 12px; }
.ftr-bank__rows strong { display: block; color: var(--lux-gold, #c6a664); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.ftr-bank__rows span { display: block; color: var(--lux-cream, #fff8ec); font-size: 1.1rem; font-family: var(--lux-display, Georgia, serif); margin-top: 5px; letter-spacing: 0.02em; }
.ftr-bank__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px dashed rgba(198, 166, 100, 0.45); border-radius: 10px; padding: 14px 18px; color: var(--lux-muted, rgba(255, 248, 236, 0.66)); font-size: 0.9rem; }
.ftr-bank__ref b { color: var(--lux-gold, #c6a664); font-family: var(--lux-display, Georgia, serif); font-size: 1.15rem; letter-spacing: 0.03em; }
.ftr-bank__online { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ftr-bank__online .muted { color: var(--lux-muted, rgba(255, 248, 236, 0.55)); font-size: 0.82rem; }

/* Service lines with no photography of their own — a typographic card rather than
   borrowing a braiding photo that would misrepresent the treatment. */
.ftr-style-plain {
    margin: 0;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(198, 166, 100, 0.28);
    border-radius: 6px;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    background: radial-gradient(120% 120% at 50% 0, rgba(198, 166, 100, 0.12), transparent 62%), rgba(21, 19, 23, 0.6);
}
.ftr-style-plain span {
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--lux-gold, #c6a664);
    line-height: 1.1;
}

/* A style photo arriving in the booking chat — framed like she just sent it. */
.ukc-shot {
    align-self: flex-start;
    /* The thread is a column flexbox, whose children shrink by default — without
       this the photo bubble collapses to a sliver. */
    flex: 0 0 auto;
    max-width: 74%;
    border-radius: 16px 16px 16px 5px;
    overflow: hidden;
    border: 1px solid rgba(198, 166, 100, 0.22);
    background: rgba(21, 19, 23, 0.9);
    animation: ukc-rise .34s cubic-bezier(.2, .7, .3, 1) both;
}
.ukc-shot img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ukc-shot span {
    display: block;
    padding: 9px 13px;
    color: rgba(255, 248, 236, 0.72);
    font-size: 12px;
    letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .ukc-shot { animation: none; } }

/* ---- Visible-breakage fixes (UI audit A7, A19, A30) ---- */

/* A19: this link was #050505 on a #080808 footer — 1.01:1, i.e. invisible on every
   page. The dark text was meant for a gold pill, so give it the pill. */
body:not(.admin-body):not(.stylist-body) .premium-footer__whatsapp {
    background: var(--lux-gold, #c6a664);
    color: #140f08 !important;
    border: 1px solid var(--lux-gold, #c6a664);
}
body:not(.admin-body):not(.stylist-body) .premium-footer__whatsapp:hover {
    background: var(--lux-gold-hover, #d8bd82);
    border-color: var(--lux-gold-hover, #d8bd82);
}

/* A7: "Book this look" was opacity:0 until :hover, so it never appeared on a phone —
   where most bookings start. Show it whenever there's no hover to reveal it. */
@media (hover: none) {
    .ftr-style-cta { opacity: 1; transform: none; color: var(--lux-gold, #c6a664); }
}

/* A30: Laravel's default paginator ships Tailwind's white chrome, which landed as a
   white slab on the dark shop page. */
.pagination-wrap nav,
.ftr-pagination nav { display: flex; justify-content: center; }
.pagination-wrap { padding: 0 clamp(22px, 4vw, 80px) clamp(40px, 6vw, 80px); }
.pagination-wrap .bg-white,
.ftr-pagination .bg-white { background: transparent !important; }
.pagination-wrap span, .pagination-wrap a,
.ftr-pagination span, .ftr-pagination a {
    color: var(--lux-cream, #fff8ec) !important;
    border-color: rgba(198, 166, 100, 0.28) !important;
    background: rgba(21, 19, 23, 0.6) !important;
}
.pagination-wrap a:hover,
.ftr-pagination a:hover { background: rgba(198, 166, 100, 0.14) !important; }
.pagination-wrap .shadow-sm,
.ftr-pagination .shadow-sm { box-shadow: none !important; }

/* A booking button in the header on every screen (UI audit A8). The nav still
   collapses to the hamburger below 1200px, but the primary action shouldn't be
   buried in a menu on the phones where most bookings start — it just gets shorter. */
body:not(.admin-body):not(.stylist-body) .premium-header-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}
.premium-header-cta__short { display: inline; }
.premium-header-cta__full { display: none; }
@media (min-width: 1200px) {
    .premium-header-cta__short { display: none; }
    .premium-header-cta__full { display: inline; }
}
@media (max-width: 1199px) {
    body:not(.admin-body):not(.stylist-body) .premium-header-cta {
        padding: 0 16px;
        margin-left: auto;
        margin-right: 10px;
        font-size: 0.75rem;
    }
}

/* ==================== Design pass: legibility + relief ==================== */

/* Concrete facts under the hero lead — what she does and where she works, which
   the hero previously never said. */
.ftr-facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

.ftr-facts li {
    border: 1px solid rgba(198, 166, 100, 0.34);
    border-radius: 999px;
    padding: 8px 17px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 248, 236, 0.86);
    background: rgba(8, 7, 6, 0.42);
    backdrop-filter: blur(3px);
}

.ftr-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Her work was being shown at 82% brightness. It is the product — show it. */
.ftr-band img { filter: none; }
.ftr-band img:hover { filter: none; transform: scale(1.04); }

/* ---- The warm break ----
   An unbroken column of near-black reads as one flat note however good the type
   is. This section is the relief: ivory ground, black text, gold as a true
   accent — and it carries the three things a first-time customer actually needs
   to know before they'll book. */
.ftr-break {
    position: relative;
    z-index: 1;
    background: #f4f0e7;
    color: #17140f;
    padding: clamp(64px, 8vw, 116px) clamp(22px, 4vw, 80px);
}

.ftr-break__head { max-width: 780px; margin: 0 auto clamp(38px, 5vw, 62px); text-align: center; }

.ftr-break__head span {
    display: block;
    color: #96773c;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.ftr-break__head h2 {
    margin: 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.06;
    color: #17140f;
}

.ftr-break__head p { margin: 16px 0 0; font-size: 1.12rem; line-height: 1.6; color: #554c3c; }

.ftr-steps {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.ftr-step { text-align: left; }

.ftr-step > b {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(150, 119, 60, 0.42);
    color: #96773c;
    font-family: var(--lux-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.ftr-step h3 {
    margin: 0 0 8px;
    font-family: var(--lux-display, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: #17140f;
}

.ftr-step p { margin: 0; font-size: 1.02rem; line-height: 1.62; color: #554c3c; }

.ftr-break__note {
    max-width: 1100px;
    margin: clamp(38px, 5vw, 58px) auto 0;
    padding-top: clamp(26px, 3vw, 36px);
    border-top: 1px solid rgba(23, 20, 15, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ftr-break__note p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: #554c3c; max-width: 62ch; }
.ftr-break__note strong { color: #17140f; font-weight: 700; }

.ftr-break .ftr-btn--gold { background: #17140f; border-color: #17140f; color: #f4f0e7; }
.ftr-break .ftr-btn--gold:hover { background: #96773c; border-color: #96773c; color: #fff; }

/* ---- Header: five things to browse, then two quiet utility links ---- */
.premium-nav { margin-left: auto; gap: 22px; }

.premium-nav a {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255, 248, 236, 0.82);
}

/* The marketplace and account links are real, but nobody lands here to click
   them — they sit at reduced weight beside the CTA rather than competing with
   the five things a customer actually browses. */
.premium-nav--utility { margin-left: 0; gap: 16px; padding-left: 22px; border-left: 1px solid rgba(198, 166, 100, 0.22); }
.premium-nav--utility a { font-size: 0.82rem; font-weight: 600; color: rgba(255, 248, 236, 0.55); }
.premium-nav--utility a:hover { color: var(--lux-gold); }

.premium-header-cta { font-size: 0.88rem; letter-spacing: 0.06em; }

/* ---- Collection: six cards, so three across is two full rows ----
   auto-fit produced four columns at desktop width and left the second row
   half-empty, which was most of why the page read as bare. */
.ftr-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 900px) {
    .ftr-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ftr-style figure { aspect-ratio: 4 / 5; }
.ftr-style-meta { padding-top: 16px; }
.ftr-style-meta h3 { font-size: 1.45rem; }

/* ---- Hero text over photography ----
   The hero sits on a real photograph now, so the text needs to survive whatever
   is behind it rather than assuming flat black. */
.ftr-arrival--photo .ftr-kicker,
.ftr-arrival--photo .ftr-lead { text-shadow: 0 1px 18px rgba(8, 7, 6, 0.85); }
.ftr-arrival--photo .ftr-word { filter: drop-shadow(0 2px 26px rgba(8, 7, 6, 0.6)); }

/* A transparent outline button vanishes over a light part of a photo. */
.ftr-arrival--photo .ftr-btn--ghost {
    background: rgba(8, 7, 6, 0.55);
    backdrop-filter: blur(4px);
    border-color: rgba(198, 166, 100, 0.72);
    color: #f2e4c4;
}
.ftr-arrival--photo .ftr-btn--ghost:hover { background: rgba(8, 7, 6, 0.75); border-color: var(--lux-gold); }

.ftr-arrival--photo .ftr-hint { color: rgba(255, 248, 236, 0.78); text-shadow: 0 1px 14px rgba(8, 7, 6, 0.9); }

/* ---- Warm break: colours ----
   The public layer forces cream text on every heading and paragraph with
   !important, which on an ivory ground is invisible. This section is the one
   place on the site with a light background, so it has to restate them at the
   same specificity. Ratios against #f4f0e7: ink 15.9:1, body 7.4:1, accent 5.0:1. */
body:not(.admin-body):not(.stylist-body) .ftr-break h2,
body:not(.admin-body):not(.stylist-body) .ftr-break h3,
body:not(.admin-body):not(.stylist-body) .ftr-break strong {
    color: #17140f !important;
}

body:not(.admin-body):not(.stylist-body) .ftr-break p {
    color: #554c3c !important;
}

body:not(.admin-body):not(.stylist-body) .ftr-break__head span,
body:not(.admin-body):not(.stylist-body) .ftr-step > b {
    color: #7d6230 !important;
}

body:not(.admin-body):not(.stylist-body) .ftr-break .ftr-btn--gold {
    background: #17140f !important;
    background-image: none !important;
    border-color: #17140f !important;
    color: #f4f0e7 !important;
}

body:not(.admin-body):not(.stylist-body) .ftr-break .ftr-btn--gold:hover {
    background: #7d6230 !important;
    border-color: #7d6230 !important;
}

.ftr-step > b { border-color: rgba(125, 98, 48, 0.45); }

/* ---- Touch ----
   Her customers browse on phones. Two style cards across makes each one a
   155px thumbnail, which is no way to sell hair — one per row below 560px so
   the work is actually visible. */
@media (max-width: 559px) {
    .ftr-styles { grid-template-columns: minmax(0, 1fr); }
    .ftr-style figure { aspect-ratio: 1 / 1; }
}

/* Footer and social links were 24px and 38px tall — under the 44px minimum for
   a reliable tap. */
@media (hover: none), (max-width: 900px) {
    .premium-footer__links a,
    .premium-footer__bottom a,
    .premium-socials a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* The slider's own tagline, sitting between the wordmark and the concrete
   description. Editable by the owner in admin. */
.ftr-tagline {
    margin: 18px 0 0;
    font-family: var(--lux-display, Georgia, serif);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.25;
    color: #ecdcae;
}

.ftr-arrival--photo .ftr-tagline { text-shadow: 0 1px 18px rgba(8, 7, 6, 0.85); }
.ftr-arrival--photo .ftr-lead { color: rgba(255, 248, 236, 0.88); }
.ftr-lead { max-width: 60ch; }

/* All slider lines are stacked in the same grid cell, so the hero reserves room
   for the longest one and nothing shifts as they cross-fade. */
.ftr-tagline { display: grid; justify-items: center; }
.ftr-tagline > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.9s ease; }
.ftr-tagline > span.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ftr-tagline > span { transition: none; }
}

/* ==========================================================================
   Home — lacquer redesign
   Ported from the design handoff. Namespaced .lq-* so it sits alongside the
   older .ftr-* / .premium-* systems without colliding.

   NOTE ON SPECIFICITY: the "Luxury refinement (true-gold pass)" block above
   prefixes ~382 rules with body:not(.admin-body):not(.stylist-body) and uses
   !important on colour, font-size and padding for headings, p, a and every
   button. Anything here that sets those has to carry the same prefix or it
   silently loses. That is why the selectors below look heavier than they need.
   ========================================================================== */

.lq {
    --bg: #070605;
    --surface: #0d0b09;
    --surface-2: #141110;
    --ink: #f7f0e4;
    --ink-70: rgba(247, 240, 228, 0.66);
    --ink-55: rgba(247, 240, 228, 0.55);
    /* The handoff's 0.45 / 0.42 / 0.35 measure 4.07:1, 3.72:1 and 2.92:1 against
       the page — all under the 4.5:1 needed for small text, and all used for real
       copy (meta lines, product categories, the plans footnote). Lifted to the
       lowest alpha that clears AA; the hierarchy still reads. */
    --ink-45: rgba(247, 240, 228, 0.52);
    --ink-42: rgba(247, 240, 228, 0.52);
    --ink-35: rgba(247, 240, 228, 0.5);
    --lqgold: #c6a664;
    --gold-light: #e6cf9a;
    --gold-pale: #fbf1d4;
    --gold-deep: #9d7f3b;
    --gold-dark: #715c35;
    --ink-60: rgba(247, 240, 228, 0.6);
    --ink-32: rgba(247, 240, 228, 0.42);
    --field: #100e0c;
    --hairline: rgba(198, 166, 100, 0.10);
    --rule: rgba(255, 255, 255, 0.07);
    --edge: rgba(198, 166, 100, 0.14);
    --edge-strong: rgba(198, 166, 100, 0.22);
    --edge-ghost: rgba(198, 166, 100, 0.32);
    --edge-hot: rgba(198, 166, 100, 0.55);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Manrope', system-ui, sans-serif;

    position: relative;
    z-index: 1;
    background: var(--bg);
    font-family: var(--sans);
    font-feature-settings: 'ss01' on;
}

/* Ambient glow + grain. Both fixed and pointer-transparent; the grain is plain
   alpha rather than a blend mode, which would force a full-page re-composite on
   every scroll frame. */
.lq-glow,
.lq-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.lq-glow {
    background:
        radial-gradient(60% 45% at 78% 8%, rgba(198, 166, 100, 0.13), transparent 62%),
        radial-gradient(52% 40% at 8% 62%, rgba(198, 166, 100, 0.08), transparent 60%);
}

.lq-grain {
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lq > *:not(.lq-glow):not(.lq-grain) { position: relative; z-index: 1; }

/* ---- Keyframes ---- */
@keyframes lq-sheen   { 0% { background-position: -140% 0; } 100% { background-position: 240% 0; } }
@keyframes lq-glide-l { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes lq-glide-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes lq-caret   { 50% { opacity: 0; } }
@keyframes lq-drift   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lq-wheel   { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(11px); opacity: 0; } }

/* ---- Scroll reveal ----
   The hidden state is gated behind .lq-reveal, which the script only adds once it
   is definitely going to reveal them again. Hiding by default in CSS means any
   failure to run — no JS, a throttled IntersectionObserver, a script error higher
   up the page — leaves the entire page blank. This way the worst case is that the
   content simply appears without animating. */
.lq.lq-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s cubic-bezier(.16, .8, .3, 1), transform 1s cubic-bezier(.16, .8, .3, 1);
}

.lq.lq-reveal [data-reveal].lit { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .lq.lq-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .lq .anim { animation: none !important; }
}

/* ---- Shared primitives ---- */
.lq-wrap { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 10vh, 140px) clamp(18px, 3.5vw, 54px); }

.lq-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lqgold);
}

.lq-kicker::before { content: ''; width: 34px; height: 1px; background: var(--lqgold); flex: none; }

.lq-head { display: grid; gap: 14px; margin-bottom: clamp(34px, 5vh, 58px); }

body:not(.admin-body):not(.stylist-body) .lq-head h2 {
    margin: 0 !important;
    max-width: 18ch;
    font-family: var(--serif) !important;
    font-size: clamp(2.2rem, 5.5vw, 4.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    text-wrap: pretty;
}

.lq-head h2 em { font-style: italic; color: var(--gold-light); }

body:not(.admin-body):not(.stylist-body) .lq-lede {
    margin: 0 !important;
    max-width: 56ch;
    font-size: clamp(0.95rem, 1.4vw, 1.08rem) !important;
    line-height: 1.7 !important;
    color: var(--ink-55) !important;
}

/* ---- Buttons ----
   2px radius everywhere; the sharp corner is load-bearing for the look. */
body:not(.admin-body):not(.stylist-body) .lq-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 58px;
    padding: 0 30px !important;
    border-radius: 2px !important;
    font-family: var(--sans);
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-decoration: none;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.16, .8, .3, 1), border-color .35s ease, background .35s ease;
}

body:not(.admin-body):not(.stylist-body) .lq-btn--gold {
    background: linear-gradient(140deg, #e6d09b, #c6a664 44%, #9d7f3b) !important;
    background-image: linear-gradient(140deg, #e6d09b, #c6a664 44%, #9d7f3b) !important;
    border: 1px solid rgba(198, 166, 100, 0.9) !important;
    box-shadow: 0 18px 46px rgba(198, 166, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    color: #140f06 !important;
}

body:not(.admin-body):not(.stylist-body) .lq-btn--ghost {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--edge-ghost) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-btn--ghost:hover { border-color: var(--edge-hot) !important; }
.lq-btn:hover { transform: translateY(-2px); }
.lq-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* The sweep that gives the gold buttons their lacquer. */
.lq-btn i {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
    background-size: 220% 100%;
    animation: lq-sheen 5.5s linear infinite;
}

.lq-btn span { position: relative; z-index: 1; }

/* Text filled with the gold gradient rather than painted flat. */
/* The handoff's darkest gradient stop (#6b5732) measures 2.93:1 against the page,
   just under the 3:1 large-text threshold, so the ends of the wordmark fall out of
   contrast. #715c35 is 3.17:1 and visually indistinguishable. */
.lq-gilt {
    background: linear-gradient(100deg, #715c35 0%, #c6a664 22%, #fbf1d4 38%, #e6cf9a 50%, #c6a664 66%, #715c35 100%);
    background-size: 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Hero ---- */
.lq-hero {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(96px, 14vh, 150px) clamp(18px, 3.5vw, 54px) clamp(60px, 9vh, 110px);
    min-height: 100svh;
    display: grid;
    align-content: center;
    gap: clamp(34px, 5vw, 60px);
}

@media (min-width: 1080px) {
    .lq-hero { grid-template-columns: 1.06fr 0.94fr; align-items: center; }
}

.lq-hero__copy { display: grid; gap: 0; align-content: center; }

body:not(.admin-body):not(.stylist-body) .lq-word {
    margin: 18px 0 0 !important;
    font-family: var(--serif) !important;
    font-size: clamp(3.6rem, 13.5vw, 11rem) !important;
    font-weight: 400 !important;
    line-height: 0.82 !important;
    letter-spacing: -0.02em !important;
    animation: lq-sheen 7s linear infinite;
}

body:not(.admin-body):not(.stylist-body) .lq-hero__sub {
    margin: 22px 0 0 !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.35rem, 2.6vw, 2.05rem) !important;
    font-style: italic;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-type {
    margin: 14px 0 0 !important;
    min-height: 1.6em;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    color: var(--ink-55) !important;
}

.lq-caret {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.13em;
    background: var(--lqgold);
    animation: lq-caret 1.05s step-end infinite;
}

.lq-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.lq-proof {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 4vw, 54px);
    margin-top: clamp(34px, 5vh, 54px);
    padding-top: 26px;
    border-top: 1px solid var(--edge);
}

.lq-proof b {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1;
    color: var(--gold-light);
}

.lq-proof span {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
}

/* Triptych — decorative, desktop only. */
.lq-tript { display: none; }

@media (min-width: 1080px) {
    .lq-tript { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

.lq-tript figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 2px; }
.lq-tript figure:nth-child(1) { aspect-ratio: 3 / 4;   margin-top: 18px;  animation: lq-drift 9s ease-in-out infinite; }
.lq-tript figure:nth-child(2) { aspect-ratio: 3 / 4.4; margin-top: -16px; animation: lq-drift 11s ease-in-out -3s infinite; }
.lq-tript figure:nth-child(3) { aspect-ratio: 3 / 4;   margin-top: 26px;  animation: lq-drift 10s ease-in-out -6s infinite; }
.lq-tript img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.04); }

.lq-tript figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 6, 5, 0.05), rgba(7, 6, 5, 0.55)),
        linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%);
}

.lq-scroll { display: flex; align-items: center; gap: 12px; margin-top: clamp(30px, 5vh, 56px); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-45); }
.lq-scroll i { position: relative; width: 18px; height: 29px; border: 1px solid var(--edge-ghost); border-radius: 999px; flex: none; }
.lq-scroll i::after { content: ''; position: absolute; top: 6px; left: 50%; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--lqgold); animation: lq-wheel 1.9s ease-in-out infinite; }

/* ---- Marquees (ribbon + gallery) ---- */
.lq-marquee { overflow: hidden; }
.lq-marquee__track { display: flex; width: max-content; }

.lq-ribbon {
    border-top: 1px solid rgba(198, 166, 100, 0.16);
    border-bottom: 1px solid rgba(198, 166, 100, 0.16);
    background: linear-gradient(180deg, rgba(198, 166, 100, 0.05), transparent);
    padding: 15px 0;
}

.lq-ribbon .lq-marquee__track { animation: lq-glide-l 42s linear infinite; }

.lq-ribbon span {
    padding-right: 28px;
    font-family: var(--serif);
    font-size: clamp(1rem, 1.7vw, 1.4rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(230, 207, 154, 0.6);
}

.lq-gallery__row + .lq-gallery__row { margin-top: 14px; }
.lq-gallery__row--l .lq-marquee__track { animation: lq-glide-l 58s linear infinite; }
.lq-gallery__row--r .lq-marquee__track { animation: lq-glide-r 64s linear infinite; }
.lq-gallery figure { position: relative; margin: 0 14px 0 0; width: clamp(150px, 17vw, 250px); aspect-ratio: 4 / 5; flex: 0 0 auto; overflow: hidden; border-radius: 2px; }
.lq-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) brightness(0.92); }
.lq-gallery figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), transparent 44%); }

/* ---- Style cards ---- */
.lq-styles { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6vw, 22px); }

@media (min-width: 640px)  { .lq-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lq-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lq-style {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--edge);
    border-radius: 2px;
    text-decoration: none;
    background: var(--surface);
    transition: transform .5s cubic-bezier(.16, .8, .3, 1), border-color .4s ease, box-shadow .5s ease;
}

.lq-style img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.16, .8, .3, 1); }
.lq-style:hover { transform: translateY(-6px); border-color: var(--edge-hot); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6); }
.lq-style:hover img { transform: scale(1.06); }
.lq-style:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.lq-style__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 6, 5, 0.12) 0%, rgba(7, 6, 5, 0.08) 45%, rgba(7, 6, 5, 0.9) 100%); }
.lq-style__gloss { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255, 255, 255, 0.13) 0%, transparent 38%); background-size: 220% 100%; background-position: 0 0; transition: background-position 1.1s cubic-bezier(.16, .8, .3, 1); }
.lq-style:hover .lq-style__gloss { background-position: -60% 0; }

.lq-style__no { position: absolute; top: 14px; right: 16px; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: rgba(247, 240, 228, 0.16); }
.lq-style__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px; }

body:not(.admin-body):not(.stylist-body) .lq-style__meta h3 {
    margin: 0 0 8px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
}

.lq-style__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lq-style__price { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.lq-style__go { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); }

/* ---- The promise ---- */
.lq-statement {
    padding: clamp(64px, 11vh, 150px) clamp(18px, 3.5vw, 54px);
    text-align: center;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(198, 166, 100, 0.045), transparent 60%);
}

body:not(.admin-body):not(.stylist-body) .lq-statement p {
    margin: 0 !important;
    font-family: var(--serif) !important;
    font-size: clamp(2.4rem, 8vw, 7rem) !important;
    font-weight: 300 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
}

.lq-statement p em { font-style: italic; animation: lq-sheen 8s linear infinite; }

body:not(.admin-body):not(.stylist-body) .lq-statement .lq-route {
    margin-top: 30px !important;
    font-family: var(--sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase;
    color: var(--ink-45) !important;
}

/* ---- How it works ---- */
.lq-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); }

@media (min-width: 900px) { .lq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lq-step {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--edge);
    border-radius: 2px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008) 42%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lq-step b { display: block; font-family: var(--serif); font-size: 2.6rem; font-weight: 400; line-height: 1; color: rgba(198, 166, 100, 0.5); }

body:not(.admin-body):not(.stylist-body) .lq-step h3 {
    margin: 16px 0 10px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.3rem, 1.9vw, 1.6rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-step p { margin: 0 !important; font-size: 0.98rem !important; line-height: 1.7 !important; color: var(--ink-55) !important; }

/* ---- Shop ---- */
.lq-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(34px, 5vh, 58px); }
.lq-headrow .lq-head { margin-bottom: 0; }

.lq-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }

@media (min-width: 760px)  { .lq-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lq-shop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lq-product { display: block; text-decoration: none; border: 1px solid var(--edge); border-radius: 2px; background: var(--surface); overflow: hidden; transition: transform .5s cubic-bezier(.16, .8, .3, 1), border-color .4s ease, box-shadow .5s ease; }
.lq-product:hover { transform: translateY(-6px); border-color: var(--edge-hot); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6); }
.lq-product:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.lq-product__well { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.lq-product__well img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.16, .8, .3, 1); }
.lq-product:hover .lq-product__well img { transform: scale(1.05); }
.lq-product__well::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255, 255, 255, 0.13) 0%, transparent 38%), linear-gradient(180deg, transparent 60%, rgba(7, 6, 5, 0.5) 100%); }

.lq-save { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 2px; background: rgba(198, 166, 100, 0.92); color: #140f06; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.lq-product__body { padding: 16px 16px 20px; }
.lq-product__name { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.lq-product__cat { display: block; margin-top: 5px; font-size: 0.76rem; color: var(--ink-42); }
.lq-product__price { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); }
.lq-product__was { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-35); text-decoration: line-through; }

/* ---- Plans ---- */
.lq-terms { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(198, 166, 100, 0.22); border-radius: 2px; }

body:not(.admin-body):not(.stylist-body) .lq-terms button {
    min-height: 46px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(247, 240, 228, 0.6) !important;
    font-family: var(--sans);
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

body:not(.admin-body):not(.stylist-body) .lq-terms button[aria-pressed="true"] {
    background: #c6a664 !important;
    background-image: none !important;
    color: #140f06 !important;
}

.lq-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); }

@media (min-width: 980px) { .lq-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lq-plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--edge); border-radius: 2px; background: var(--surface); overflow: hidden; }
.lq-plan--featured { border-color: rgba(198, 166, 100, 0.5); background: linear-gradient(180deg, rgba(198, 166, 100, 0.07), rgba(198, 166, 100, 0.015) 40%, transparent); }
.lq-plan--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #6b5732, #fbf1d4 50%, #6b5732); }

.lq-plan__tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lqgold); }

body:not(.admin-body):not(.stylist-body) .lq-plan h3 {
    margin: 12px 0 18px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

.lq-plan__price { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 3.6rem); font-weight: 400; line-height: 0.9; color: var(--ink); }
.lq-plan__price small { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--ink-45); }
.lq-plan__each { margin: 12px 0 0; font-size: 0.82rem; color: var(--gold-light); }
.lq-plan__rule { margin: 22px 0; height: 1px; background: var(--edge); }
.lq-plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.lq-plan li { display: flex; gap: 11px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-55); }
.lq-plan li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--lqgold); }
.lq-plan .lq-btn { margin-top: auto; width: 100%; min-height: 52px; }
.lq-plan__note { margin: clamp(26px, 3vw, 36px) 0 0; font-size: 0.85rem; line-height: 1.7; color: var(--ink-35); }

/* Both terms are rendered; the toggle only switches which is shown. */
.lq-plan__term { display: none; }
.lq-plan__term.is-on { display: block; }

/* ---- Lagos band ---- */
.lq-lagos { position: relative; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lq-lagos__bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.lq-lagos__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.4) saturate(0.7); }
.lq-lagos__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 6, 5, 0.97) 24%, rgba(7, 6, 5, 0.82) 52%, rgba(7, 6, 5, 0.62) 100%); }
.lq-lagos__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(56px, 9vh, 130px) clamp(18px, 3.5vw, 54px); }
.lq-lagos__copy { max-width: 640px; }
.lq-lagos__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.lq-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 1px solid var(--edge-ghost); border-radius: 2px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.lq-lagos__badges em { font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-45); }

.lq-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; padding: 0; list-style: none; }
.lq-areas li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--edge); border-radius: 2px; font-size: 0.76rem; color: var(--ink-55); background: rgba(7, 6, 5, 0.5); }

.lq-lagos__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

body:not(.admin-body):not(.stylist-body) .lq-textlink {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ink-45) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body:not(.admin-body):not(.stylist-body) .lq-textlink:hover { color: var(--gold-light) !important; }

/* ---- Word of mouth ---- */
.lq-quote { max-width: 1000px; margin: 0 auto; padding: clamp(56px, 9vh, 130px) clamp(18px, 3.5vw, 54px); text-align: center; }
.lq-quote .lq-kicker { justify-content: center; }

body:not(.admin-body):not(.stylist-body) .lq-quote blockquote {
    margin: 22px 0 26px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.6rem, 4vw, 3.1rem) !important;
    font-style: italic;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
}

.lq-quote cite { display: block; font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); }
.lq-quote cite b { display: block; margin-bottom: 10px; letter-spacing: 0.22em; color: var(--lqgold); }

/* ---- Finale ---- */
.lq-finale { padding: clamp(70px, 12vh, 160px) clamp(18px, 3.5vw, 54px); text-align: center; background: linear-gradient(180deg, transparent, rgba(198, 166, 100, 0.06)); }

body:not(.admin-body):not(.stylist-body) .lq-finale h2 {
    margin: 0 0 34px !important;
    font-family: var(--serif) !important;
    font-size: clamp(2.6rem, 9vw, 8rem) !important;
    font-weight: 300 !important;
    line-height: 0.94 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
}

.lq-finale .lq-hero__actions { justify-content: center; margin-top: 0; }
.lq-finale .lq-btn { min-height: 60px; }

/* The public colour layer forces `color: var(--public-text) !important` onto every
   heading, which repaints gradient-filled text flat cream. -webkit-text-fill-color
   wins over `color` for the glyph fill, so the clip survives either way. */
body:not(.admin-body):not(.stylist-body) .lq-gilt {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

body:not(.admin-body):not(.stylist-body) .lq-statement p em.lq-gilt { color: transparent !important; }

/* The handoff's a11y note asks for a 44px minimum on every interactive element; a
   bare text link is the one thing in the design that doesn't reach it on its own.
   Unconditional rather than touch-only, which also sits it on the same baseline as
   the buttons it sits beside. */
body:not(.admin-body):not(.stylist-body) .lq-textlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---- Cascade repairs ----
   Two pre-existing global rules silently beat the lacquer block:
     * { letter-spacing: 0 !important }                       (business-os.css:4325)
     body:not(.admin-body)… p / small { color: … !important }  (the true-gold pass)
   Everything below is the lacquer type that those two were flattening. */
body:not(.admin-body):not(.stylist-body) .lq-kicker {
    letter-spacing: 0.28em !important;
    color: var(--lqgold) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-statement .lq-route { letter-spacing: 0.32em !important; }
body:not(.admin-body):not(.stylist-body) .lq-plan__each { color: var(--gold-light) !important; }
body:not(.admin-body):not(.stylist-body) .lq-plan__note { color: var(--ink-35) !important; }
body:not(.admin-body):not(.stylist-body) .lq-plan__price small { color: var(--ink-45) !important; }
body:not(.admin-body):not(.stylist-body) .lq-product__cat { color: var(--ink-42) !important; }
body:not(.admin-body):not(.stylist-body) .lq-product__was { color: var(--ink-35) !important; }

.lq-btn { letter-spacing: 0.08em !important; }
.lq-proof span,
.lq-scroll,
.lq-style__price,
.lq-style__go,
.lq-plan__tag,
.lq-badge,
.lq-save,
.lq-areas li,
.lq-quote cite,
.lq-lagos__badges em { letter-spacing: 0.12em !important; }
.lq-ribbon span { letter-spacing: 0.16em !important; }
.lq-quote cite b { letter-spacing: 0.22em !important; }

/* Two copies of the list only fill a 50% translate when the content is at least as
   wide as the viewport; on a wide screen the ribbon ran out and left a gap. */
.lq-marquee__track > * { flex: none; }
.lq-ribbon .lq-marquee__track span { min-width: max(50vw, 100%); }

/* ==========================================================================
   Full redesign — shared primitives
   Step 1 of the handoff: the pieces every other surface composes from. The
   public "lacquer" language reuses the .lq-* tokens established by the home
   page; .cn-* below is the calmer "console" language for admin and provider.

   SPECIFICITY: two pre-existing global rules beat plain classes here —
     * { letter-spacing: 0 !important }                        (:4325)
     body:not(.admin-body)… h1-h3 / p / a / small / button      (true-gold pass)
   so anything setting colour, size, padding or tracking carries the prefix or
   !important. This is why the selectors look heavier than they should.
   ========================================================================== */

/* ---- Public page shell ---- */
.lq-page { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vh, 90px) clamp(18px, 3.5vw, 48px); }
.lq-page--wide { max-width: 1440px; }

.lq-hero-head { max-width: 760px; margin-bottom: clamp(30px, 5vh, 52px); }

body:not(.admin-body):not(.stylist-body) .lq-hero-head h1 {
    margin: 16px 0 0 !important;
    max-width: 20ch;
    font-family: var(--serif) !important;
    font-size: clamp(2.2rem, 6vw, 4.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    text-wrap: pretty;
}

body:not(.admin-body):not(.stylist-body) .lq-hero-head > p {
    margin: 18px 0 0 !important;
    max-width: 62ch;
    font-size: clamp(0.95rem, 1.4vw, 1.06rem) !important;
    line-height: 1.7 !important;
    color: var(--ink-60) !important;
}

/* ---- Panels and cards ---- */
.lq-panel {
    border: 1px solid var(--edge);
    border-radius: 2px;
    background: var(--surface);
    padding: clamp(20px, 2.6vw, 32px);
}

.lq-card {
    display: block;
    border: 1px solid var(--edge);
    border-radius: 2px;
    background: var(--surface);
    text-decoration: none;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.16, .8, .3, 1), border-color .45s ease, box-shadow .45s ease;
}

.lq-card:hover { transform: translateY(-5px); border-color: rgba(198, 166, 100, 0.5); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55); }
.lq-card:focus-visible,
.lq-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.lq-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .lq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px)  { .lq-grid--3, .lq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 680px)  { .lq-grid--form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Facts strip (confirmations, detail screens) ---- */
.lq-facts { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.lq-facts > div { background: var(--surface); padding: 16px 18px; }
.lq-facts dt { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--ink-45); }
.lq-facts dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }

/* ---- Forms ----
   16px on every control so iOS doesn't zoom the page when one is focused. */
body:not(.admin-body):not(.stylist-body) .lq-field { display: block; margin-bottom: 18px; }

body:not(.admin-body):not(.stylist-body) .lq-field > span {
    display: block;
    margin-bottom: 8px;
    font-size: 0.84rem !important;
    color: var(--ink-60) !important;
}

/* Required is stated in words, never signalled by colour alone. */
.lq-field > span em { font-style: normal; color: var(--lqgold); }
.lq-field > span em.is-optional { color: var(--ink-45); }

body:not(.admin-body):not(.stylist-body) .lq-input,
body:not(.admin-body):not(.stylist-body) .lq-field input:not([type="checkbox"]):not([type="radio"]),
body:not(.admin-body):not(.stylist-body) .lq-field select,
body:not(.admin-body):not(.stylist-body) .lq-field textarea {
    width: 100%;
    min-height: 54px;
    padding: 0 15px !important;
    border: 1px solid var(--edge-strong) !important;
    border-radius: 2px !important;
    background: var(--field) !important;
    background-image: none !important;
    color: var(--ink) !important;
    font-family: var(--sans);
    font-size: 16px !important;
    line-height: 1.5;
}

body:not(.admin-body):not(.stylist-body) .lq-field textarea { min-height: 132px; padding: 13px 15px !important; resize: vertical; }

body:not(.admin-body):not(.stylist-body) .lq-field input:focus,
body:not(.admin-body):not(.stylist-body) .lq-field select:focus,
body:not(.admin-body):not(.stylist-body) .lq-field textarea:focus {
    border-color: rgba(198, 166, 100, 0.62) !important;
    outline: none;
}

.lq-help { margin: 7px 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-45); }
.lq-error { margin: 7px 0 0; font-size: 0.84rem; color: #e3a0a0; }

/* Chip grid — multi-select answers, instead of a native checkbox list. */
.lq-chips { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.lq-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid var(--edge-strong);
    border-radius: 99px;
    background: var(--field);
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.lq-chip:hover { border-color: rgba(198, 166, 100, 0.45); }
.lq-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.lq-chip i { flex: none; width: 17px; height: 17px; border: 1px solid rgba(198, 166, 100, 0.45); border-radius: 3px; display: grid; place-items: center; }
.lq-chip i::after { content: ''; width: 9px; height: 9px; border-radius: 1px; background: var(--lqgold); transform: scale(0); transition: transform .16s ease; }
.lq-chip input:checked + i::after { transform: scale(1); }
.lq-chip:has(input:checked) { border-color: rgba(198, 166, 100, 0.6); background: rgba(198, 166, 100, 0.07); }
.lq-chip:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Segmented row — two- and three-option questions, instead of a select. */
.lq-seg { display: grid; gap: 9px; }
@media (min-width: 620px) { .lq-seg { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.lq-seg label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--edge-strong); border-radius: 99px; background: var(--field); color: var(--ink); font-size: 0.95rem; text-align: center; cursor: pointer; }
.lq-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.lq-seg label:has(input:checked) { border-color: rgba(198, 166, 100, 0.6); background: rgba(198, 166, 100, 0.1); color: var(--gold-light); }
.lq-seg label:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Consent — a full-width tappable row, comfortably over 44px. */
.lq-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 14px 16px; border: 1px solid var(--edge-strong); border-radius: 2px; background: var(--field); color: var(--ink); font-size: 0.95rem; line-height: 1.6; cursor: pointer; }
.lq-consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lqgold); }

/* Treatment consent points. A list, not prose, because each line is a separate
   thing the client is agreeing to and needs to be readable as one. The luxury
   refinement block below does not target li, so plain rules hold here - but it
   does reach p and small, so keep the copy in list items. */
.lq-consentlist { margin: 0 0 18px; padding: 0 0 0 22px; list-style: none; }
.lq-consentlist li { position: relative; margin: 0 0 11px; font-size: 0.92rem; line-height: 1.65; color: var(--ink-70, var(--ink)); }
.lq-consentlist li::before { content: ''; position: absolute; left: -22px; top: 0.62em; width: 7px; height: 1px; background: var(--lqgold); }
.lq-consentlist li:last-child { margin-bottom: 0; }

/* File input — a drop panel that says what happens to the file. */
.lq-file { display: block; border: 1px dashed rgba(198, 166, 100, 0.38); border-radius: 2px; background: rgba(198, 166, 100, 0.03); padding: 26px 20px; text-align: center; cursor: pointer; }
.lq-file:hover { border-color: rgba(198, 166, 100, 0.6); }
.lq-file svg { width: 26px; height: 26px; color: var(--lqgold); }
.lq-file b { display: block; margin: 12px 0 4px; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.lq-file span { display: block; font-size: 0.84rem; line-height: 1.55; color: var(--ink-45); }
.lq-file input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ==========================================================================
   Console language — admin and provider tools
   Calmer than the public lacquer: softer radii, flatter surfaces, denser type.
   Admin and stylist bodies carry .admin-body / .stylist-body, so the public
   !important layer does not reach here — but `* { letter-spacing: 0 !important }`
   is global, so tracking still needs !important.
   ========================================================================== */

.cn {
    --cn-bg: #0b0a08;
    --cn-rail: #0e0c0a;
    --cn-panel: #151210;
    --cn-panel-2: #161310;
    --cn-field: #0f0d0b;
    --cn-chip: #1b1714;
    --cn-ink: #f6efe2;
    --cn-ink-55: rgba(246, 239, 226, 0.62);
    --cn-ink-45: rgba(246, 239, 226, 0.52);
    --cn-ink-32: rgba(246, 239, 226, 0.46);
    --cn-gold: #c6a664;
    --cn-gold-light: #e6cf9a;
    --cn-edge: rgba(198, 166, 100, 0.14);
    --cn-edge-strong: rgba(198, 166, 100, 0.28);

    background: var(--cn-bg);
    color: var(--cn-ink);
    font-family: var(--sans, 'Manrope', system-ui, sans-serif);
    font-feature-settings: 'ss01' on;
}

.cn-head {
    position: sticky;
    top: 0;
    z-index: 40;
    /* No backdrop-filter: it forces a full-page repaint per scroll frame. */
    background: rgba(11, 10, 8, 0.96);
    border-bottom: 1px solid rgba(198, 166, 100, 0.12);
    padding: 16px clamp(14px, 2.4vw, 28px);
}

.cn-kicker { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em !important; text-transform: uppercase; color: var(--cn-gold); }
.cn-head h1 { margin: 8px 0 0; font-family: var(--serif, Georgia, serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.1; color: var(--cn-ink); }
.cn-head > p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--cn-ink-55); }

.cn-tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 14px; scrollbar-width: none; }
.cn-tabs::-webkit-scrollbar { display: none; }
.cn-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--cn-ink-55); font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cn-tabs a.is-on { color: var(--cn-ink); border-bottom-color: var(--cn-gold); }
.cn-tabs a:hover { color: var(--cn-ink); }

.cn-body { padding: clamp(16px, 2.4vw, 28px); }
.cn-panel { border: 1px solid var(--cn-edge); border-radius: 16px; background: var(--cn-panel); padding: clamp(16px, 2.2vw, 24px); }
.cn-panel h2 { margin: 0 0 4px; font-family: var(--serif, Georgia, serif); font-size: 1.3rem; font-weight: 600; color: var(--cn-ink); }
.cn-panel > p { margin: 0 0 16px; font-size: 0.92rem; color: var(--cn-ink-55); }

.cn-grid { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .cn-grid--2, .cn-grid--3, .cn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .cn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Stat tile */
.cn-stat { border: 1px solid var(--cn-edge); border-radius: 14px; background: var(--cn-panel); padding: 16px 18px; }
.cn-stat span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--cn-ink-45); }
.cn-stat b { display: block; margin-top: 8px; font-family: var(--serif, Georgia, serif); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--cn-ink); }
.cn-stat b.is-alert { color: var(--cn-gold-light); }

/* Grouped table — a 1px gold-tint grid rather than borders per cell. */
.cn-table { display: grid; gap: 1px; background: rgba(198, 166, 100, 0.12); border: 1px solid var(--cn-edge); border-radius: 14px; overflow: hidden; }
.cn-table > * { background: var(--cn-field); padding: 13px 15px; }
.cn-table__head { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--cn-ink-45); }
.cn-table__row { display: grid; gap: 1px; grid-column: 1 / -1; }

/* Status pills — one vocabulary across every admin and provider screen. */
.cn-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em !important; white-space: nowrap; }
.cn-pill--good    { background: rgba(127, 211, 155, 0.14); color: #7fd39b; }
.cn-pill--waiting { background: rgba(232, 184, 127, 0.14); color: #e8b87f; }
.cn-pill--busy    { background: rgba(143, 189, 232, 0.14); color: #8fbde8; }
.cn-pill--bad     { background: rgba(227, 160, 160, 0.14); color: #e3a0a0; }
.cn-pill--done    { background: rgba(246, 239, 226, 0.08); color: rgba(246, 239, 226, 0.6); }

/* Actions */
.cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; font-family: inherit; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em !important; text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.cn-btn--primary { background: var(--cn-gold); color: #191307; }
.cn-btn--primary:hover { background: #ddc48a; }
.cn-btn--ghost { background: transparent; border: 1px solid var(--cn-edge-strong); color: var(--cn-gold-light); }
.cn-btn--ghost:hover { border-color: rgba(198, 166, 100, 0.5); }
.cn-btn--danger { background: transparent; border: 1px solid rgba(227, 160, 160, 0.4); color: #e3a0a0; }
.cn-btn:focus-visible { outline: 2px solid var(--cn-gold-light); outline-offset: 2px; }

/* Console fields */
.cn-field { display: block; margin-bottom: 16px; }
.cn-field > span { display: block; margin-bottom: 7px; font-size: 0.84rem; color: var(--cn-ink-55); }
.cn-field input:not([type="checkbox"]):not([type="radio"]),
.cn-field select,
.cn-field textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--cn-edge); border-radius: 10px; background: var(--cn-field); color: var(--cn-ink); font-family: inherit; font-size: 16px; }
.cn-field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.cn-field input:focus, .cn-field select:focus, .cn-field textarea:focus { border-color: rgba(198, 166, 100, 0.6); outline: none; }
.cn-help { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--cn-ink-45); }

/* Read-only chip — for values the screen shows but does not edit. */
.cn-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 99px; background: var(--cn-chip); color: var(--cn-ink-55); font-size: 0.85rem; }

/* Provider portal is phone-first: a fixed bottom nav under 900px. */
.cn-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(11, 10, 8, 0.97); border-top: 1px solid rgba(198, 166, 100, 0.14); padding-bottom: env(safe-area-inset-bottom); }
.cn-bottomnav a { display: grid; place-items: center; gap: 4px; min-height: 62px; color: var(--cn-ink-45); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.cn-bottomnav a.is-on { color: var(--cn-gold); }
.cn-bottomnav svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .cn-bottomnav { display: none; } }

/* ---- Lookbook filter row ---- */
.lq-filters { display: flex; gap: 4px; overflow-x: auto; margin-bottom: clamp(22px, 3vh, 34px); border-bottom: 1px solid var(--edge); scrollbar-width: none; }
.lq-filters::-webkit-scrollbar { display: none; }

body:not(.admin-body):not(.stylist-body) .lq-filters button {
    flex: none;
    min-height: 46px;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ink-45) !important;
    font-family: var(--sans);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    cursor: pointer;
}

body:not(.admin-body):not(.stylist-body) .lq-filters button.is-on { color: var(--ink) !important; border-bottom-color: var(--lqgold) !important; }
body:not(.admin-body):not(.stylist-body) .lq-filters button:hover { color: var(--ink) !important; }
.lq-filters button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.lq-filters__empty { margin: 40px 0 0; color: var(--ink-45); }

/* A style line with no photography of its own — never borrow a braiding shot. */
.lq-style__plain { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--surface-2); color: rgba(198, 166, 100, 0.5); font-family: var(--serif); font-size: 1.6rem; text-align: center; }

/* The lookbook's card title is an h2 (the page h1 is the title above). */
body:not(.admin-body):not(.stylist-body) .lq-style__meta h2 {
    margin: 0 0 8px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
}

.lq-style[hidden] { display: none; }

/* ---- Areas ---- */
.lq-studio { display: grid; gap: clamp(20px, 3vw, 34px); margin-bottom: clamp(26px, 4vh, 44px); }
@media (min-width: 860px) { .lq-studio { grid-template-columns: 1.25fr 0.75fr; align-items: start; } }

body:not(.admin-body):not(.stylist-body) .lq-studio h2 {
    margin: 14px 0 10px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-studio p { margin: 0 !important; font-size: 1rem !important; line-height: 1.7 !important; color: var(--ink-55) !important; }

.lq-hours { margin: 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; }
.lq-hours > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface-2); padding: 11px 15px; }
.lq-hours dt { margin: 0; font-size: 0.88rem; color: var(--ink-60); }
.lq-hours dd { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--ink); }

.lq-areagroup { margin-top: clamp(30px, 4vh, 48px); }
.lq-areagroup > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

body:not(.admin-body):not(.stylist-body) .lq-areagroup > header h2 {
    margin: 0 !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-areagroup > header p { margin: 0 !important; font-size: 0.9rem !important; color: var(--ink-45) !important; }

.lq-arealist { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; }
.lq-area { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; background: var(--surface); padding: 15px 18px; }
.lq-area__name { font-size: 1.02rem; color: var(--ink); }
.lq-area__note { grid-column: 1; font-size: 0.85rem; color: var(--ink-45); }
.lq-area__fee { grid-row: 1 / 3; grid-column: 2; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); }

/* ---- Contact ---- */
.lq-channel { display: grid; gap: 7px; align-content: start; padding: 20px; }
.lq-channel__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--lqgold); }
.lq-channel__value { font-size: 1rem; line-height: 1.4; color: var(--ink); word-break: break-word; }
.lq-channel__go { margin-top: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--ink-45); }

.lq-contact__lead { margin: clamp(20px, 3vh, 32px) 0; }

body:not(.admin-body):not(.stylist-body) .lq-contact__lead h2 {
    margin: 0 0 12px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-contact__lead p { margin: 0 0 24px !important; max-width: 58ch; font-size: 1.02rem !important; line-height: 1.7 !important; color: var(--ink-55) !important; }
body:not(.admin-body):not(.stylist-body) .lq-studio .lq-panel h2 { margin: 10px 0 8px !important; }

/* ---- FAQ / policy accordion ---- */
.lq-faqs { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; }
.lq-faq { background: var(--surface); }

.lq-faq summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.35;
    color: var(--ink);
}

.lq-faq summary::-webkit-details-marker { display: none; }
.lq-faq summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.lq-faq summary em { font-family: var(--sans); font-style: normal; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--ink-45); }

.lq-faq summary i { margin-left: auto; flex: none; width: 13px; height: 13px; border-right: 1px solid var(--lqgold); border-bottom: 1px solid var(--lqgold); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s ease; }
.lq-faq[open] summary i { transform: rotate(225deg) translate(-3px, -3px); }

.lq-faq > div { padding: 0 20px 22px; max-width: 76ch; }
body:not(.admin-body):not(.stylist-body) .lq-faq > div p { margin: 0 0 12px !important; font-size: 1rem !important; line-height: 1.75 !important; color: var(--ink-55) !important; }
body:not(.admin-body):not(.stylist-body) .lq-faq > div p:last-child { margin-bottom: 0 !important; }

/* ---- Plans page ---- */
body:not(.admin-body):not(.stylist-body) .lq-plan__blurb { margin: 0 0 18px !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--ink-55) !important; }
.lq-notes { margin-top: clamp(26px, 4vh, 44px); }
body:not(.admin-body):not(.stylist-body) .lq-notes p:not(.lq-kicker) { margin: 10px 0 0 !important; font-size: 0.95rem !important; line-height: 1.65 !important; color: var(--ink-55) !important; }
.lq-notes .lq-kicker::before { display: none; }

/* Filter row also used as links on the shop. */
body:not(.admin-body):not(.stylist-body) .lq-filters a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 16px !important;
    border-bottom: 2px solid transparent;
    color: var(--ink-45) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

body:not(.admin-body):not(.stylist-body) .lq-filters a.is-on { color: var(--ink) !important; border-bottom-color: var(--lqgold); }
body:not(.admin-body):not(.stylist-body) .lq-filters a:hover { color: var(--ink) !important; }

.lq-save--muted { background: rgba(247, 240, 228, 0.86); color: #17140f; }
.lq-pager { margin-top: clamp(26px, 4vh, 40px); }
.lq-pager svg { width: 16px; height: 16px; }

/* ---- Product detail ---- */
.lq-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 0.82rem; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--ink-45); }
body:not(.admin-body):not(.stylist-body) .lq-crumb a { color: var(--ink-45) !important; text-decoration: none; }
body:not(.admin-body):not(.stylist-body) .lq-crumb a:hover { color: var(--gold-light) !important; }

.lq-split { display: grid; gap: clamp(24px, 3.4vw, 46px); }
@media (min-width: 900px) { .lq-split { grid-template-columns: 1fr 1fr; align-items: start; } }

.lq-product__well--lg { aspect-ratio: 1 / 1; border: 1px solid var(--edge); border-radius: 2px; }
.lq-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.lq-thumbs figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--edge); border-radius: 2px; }
.lq-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lq-prose { margin-top: 26px; max-width: 62ch; }
body:not(.admin-body):not(.stylist-body) .lq-prose p { margin: 0 0 14px !important; font-size: 1rem !important; line-height: 1.75 !important; color: var(--ink-55) !important; }

.lq-pricebox { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--edge); }
.lq-pricebox__now { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: var(--gold-light); }
.lq-pricebox__was { font-size: 1rem; color: var(--ink-35); text-decoration: line-through; }
.lq-pricebox__note { margin-left: auto; font-size: 0.88rem; color: var(--ink-45); }

.lq-form .lq-btn { width: 100%; margin-top: 6px; }
.lq-form .lq-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Laravel's default paginator markup, brought up to the 44px tap minimum. */
.lq-pager nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lq-pager nav > div:first-child { display: none; }          /* mobile prev/next duplicate */
body:not(.admin-body):not(.stylist-body) .lq-pager a,
body:not(.admin-body):not(.stylist-body) .lq-pager span[aria-current],
body:not(.admin-body):not(.stylist-body) .lq-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px !important;
    border: 1px solid var(--edge);
    border-radius: 2px;
    color: var(--ink-60) !important;
    font-size: 0.9rem !important;
    text-decoration: none;
}
body:not(.admin-body):not(.stylist-body) .lq-pager a:hover { border-color: var(--edge-hot); color: var(--ink) !important; }
body:not(.admin-body):not(.stylist-body) .lq-pager span[aria-current] { border-color: var(--lqgold); color: var(--gold-light) !important; }

/* ---- Long forms (consultation, application) ---- */
.lq-formsection { margin-bottom: clamp(16px, 2.2vw, 24px); }

body:not(.admin-body):not(.stylist-body) .lq-formsection h2 {
    margin: 0 0 6px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-formsection__help { margin: 0 0 22px !important; max-width: 68ch; font-size: 0.95rem !important; line-height: 1.65 !important; color: var(--ink-55) !important; }

.lq-field--group { border: 0; margin: 0 0 22px; padding: 0; }
.lq-field--group legend { padding: 0; margin-bottom: 10px; font-size: 0.84rem; color: var(--ink-60); }
.lq-consent + .lq-consent { margin-top: 10px; }
.lq-consent + .lq-field { margin-top: 20px; }
.lq-form .lq-formsection .lq-btn { width: 100%; margin-top: 8px; }

/* Inline notices */
.lq-note { margin-bottom: clamp(16px, 2.2vw, 24px); }
body:not(.admin-body):not(.stylist-body) .lq-note h2 { margin: 0 0 8px !important; font-family: var(--serif) !important; font-size: 1.35rem !important; font-weight: 400 !important; color: var(--ink) !important; }
body:not(.admin-body):not(.stylist-body) .lq-note p { margin: 0 !important; font-size: 1rem !important; line-height: 1.7 !important; color: var(--ink-55) !important; }
.lq-note ul { margin: 0; padding-left: 20px; color: var(--ink-55); font-size: 0.95rem; line-height: 1.7; }
.lq-note .lq-btn { margin-top: 18px; }
.lq-note--good { border-color: rgba(127, 211, 155, 0.4); }
.lq-note--bad { border-color: rgba(227, 160, 160, 0.45); }
body:not(.admin-body):not(.stylist-body) .lq-note--bad h2 { color: #e3a0a0 !important; }

/* ---- Confirmations ---- */
.lq-bank { margin: clamp(16px, 2.2vw, 24px) 0; }
body:not(.admin-body):not(.stylist-body) .lq-bank h2 { margin: 12px 0 10px !important; font-family: var(--serif) !important; font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important; font-weight: 400 !important; color: var(--ink) !important; }
body:not(.admin-body):not(.stylist-body) .lq-bank > p { margin: 0 0 22px !important; max-width: 62ch; font-size: 1rem !important; line-height: 1.7 !important; color: var(--ink-55) !important; }
.lq-bank .lq-btn { margin-top: 22px; }
.lq-bank .lq-kicker::before,
.lq-note .lq-kicker::before { display: none; }

.lq-facts--bank { margin: 0; }
.lq-facts--bank dd { font-family: var(--sans); font-size: 1.02rem; letter-spacing: 0.02em; }
.lq-facts .lq-facts--full { grid-column: 1 / -1; }

.lq-facts + .lq-panel, .lq-facts + section { margin-top: clamp(16px, 2.2vw, 24px); }
.lq-hero-head .cn-pill { margin-top: 16px; }
body:not(.admin-body):not(.stylist-body) .lq-panel h3 { margin: 10px 0 !important; font-family: var(--serif) !important; font-size: 1.3rem !important; font-weight: 400 !important; color: var(--ink) !important; }

/* ---- Order lines and totals ---- */
.lq-lines { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; margin-bottom: 20px; }
.lq-line { display: flex; align-items: center; gap: 14px; background: var(--surface-2); padding: 13px 15px; }
.lq-line figure { margin: 0; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 2px; background: var(--surface); }
.lq-line figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lq-line > div { flex: 1; min-width: 0; }
.lq-line strong { display: block; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.lq-line span { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--ink-45); }
.lq-line__price { flex: none; font-family: var(--serif); font-size: 1.25rem; color: var(--gold-light); }

.lq-totals { margin: 0; display: grid; gap: 10px; }
.lq-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lq-totals dt { margin: 0; font-size: 0.95rem; color: var(--ink-55); }
.lq-totals dd { margin: 0; font-size: 1rem; color: var(--ink); }
.lq-totals .is-total { padding-top: 12px; border-top: 1px solid var(--edge); }
.lq-totals .is-total dt { font-size: 1rem; color: var(--ink); }
.lq-totals .is-total dd { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-light); }

/* ---- CMS content template ---- */
.lq-split--hero { align-items: center; margin-bottom: clamp(26px, 4vh, 46px); }
.lq-pagefig { margin: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 2px; aspect-ratio: 4 / 3; }
.lq-pagefig--sq { aspect-ratio: 1 / 1; }
.lq-pagefig img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A page with no photograph of its own carries the house monogram rather than
   borrowing a braids photo, matching the room tiles. Bambi: "The website still
   feels like a hair website and not a mix of other things." */
.lq-pagefig__mono { display: grid; place-items: center; width: 100%; height: 100%;
    background: radial-gradient(120% 120% at 32% 22%, rgba(198, 166, 100, 0.14), rgba(198, 166, 100, 0.03) 70%);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3rem, 7vw, 5rem); font-weight: 300;
    letter-spacing: 0.06em !important; line-height: 1; color: rgba(198, 166, 100, 0.5); }

.lq-block { margin-bottom: clamp(16px, 2.4vw, 26px); }
body:not(.admin-body):not(.stylist-body) .lq-block h2,
body:not(.admin-body):not(.stylist-body) .lq-blockhead {
    margin: 0 0 14px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
}
body:not(.admin-body):not(.stylist-body) .lq-block > p { margin: 0 0 18px !important; max-width: 62ch; font-size: 1rem !important; line-height: 1.75 !important; color: var(--ink-55) !important; }
.lq-block--cta { text-align: center; }
.lq-block--cta > p { margin-left: auto !important; margin-right: auto !important; }
.lq-field--group legend em { font-style: normal; color: var(--lqgold); }
.lq-field--group legend em.is-optional { color: var(--ink-45); }
body:not(.admin-body):not(.stylist-body) .lq-bank__amount { margin: -6px 0 22px !important; font-family: var(--serif); font-size: 1.5rem !important; color: var(--gold-light) !important; }
body:not(.admin-body):not(.stylist-body) .lq-applylede { margin: 12px 0 0 !important; font-size: 0.95rem !important; letter-spacing: 0.02em; color: var(--ink-45) !important; }

/* ---- Account ---- */
.lq-accountnav { margin-bottom: clamp(22px, 3vh, 32px); }
.lq-stat { border: 1px solid var(--edge); border-radius: 2px; background: var(--surface); padding: 18px 20px; }
.lq-stat span { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--ink-45); }
.lq-stat b { display: block; margin-top: 8px; font-family: var(--serif); font-size: 2.1rem; font-weight: 400; line-height: 1; color: var(--ink); }

body:not(.admin-body):not(.stylist-body) .lq-panel h2 { margin: 0 0 14px !important; font-family: var(--serif) !important; font-size: 1.35rem !important; font-weight: 400 !important; color: var(--ink) !important; }
body:not(.admin-body):not(.stylist-body) .lq-dashline { margin: 8px 0 4px !important; font-size: 1.1rem !important; color: var(--ink) !important; }
body:not(.admin-body):not(.stylist-body) .lq-dashmeta { margin: 0 0 14px !important; font-size: 0.95rem !important; color: var(--ink-55) !important; }
.lq-panel .cn-pill + .lq-btn { display: flex; margin-top: 18px; }
.lq-panel .lq-btn { margin-top: 18px; }
.lq-panel .lq-kicker::before { display: none; }

/* ---- Record rows (account lists) ---- */
.lq-rows { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; }

body:not(.admin-body):not(.stylist-body) .lq-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 18px;
    align-items: center;
    background: var(--surface);
    padding: 16px 18px;
    text-decoration: none;
    transition: background .2s ease;
}

body:not(.admin-body):not(.stylist-body) .lq-row:hover { background: var(--surface-2); }
.lq-row:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.lq-row__main strong { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.lq-row__main span { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-45); }
.lq-row__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; grid-column: 1; }
.lq-row__meta > span { font-size: 0.88rem; color: var(--ink-55); }
.lq-row__figure { grid-row: 1 / 3; grid-column: 2; font-family: var(--serif); font-size: 1.45rem; color: var(--gold-light); }

@media (min-width: 720px) {
    body:not(.admin-body):not(.stylist-body) .lq-row { grid-template-columns: 1.4fr 1fr auto; }
    .lq-row__meta { grid-column: 2; justify-content: flex-start; }
    .lq-row__figure { grid-row: 1; grid-column: 3; text-align: right; }
}

.lq-empty { background: var(--surface); padding: 26px 18px; margin: 0; color: var(--ink-55); }
body:not(.admin-body):not(.stylist-body) .lq-empty a { color: var(--gold-light) !important; text-decoration: underline; text-underline-offset: 3px; }
.lq-progress { height: 8px; border-radius: 99px; background: rgba(198, 166, 100, 0.14); overflow: hidden; }
.lq-progress span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); }
.lq-line .cn-pill { flex: none; }

/* ---- Auth ---- */
.lq-auth { min-height: 100svh; display: grid; place-items: center; padding: clamp(24px, 5vh, 60px) 18px; }
.lq-auth__inner { position: relative; z-index: 1; width: 100%; max-width: 520px; }
.lq-auth__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; text-decoration: none; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.2em !important; text-transform: uppercase; color: var(--gold-light); }
.lq-auth__mark { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(198, 166, 100, 0.42); overflow: hidden; flex: none; }
.lq-auth__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

body:not(.admin-body):not(.stylist-body) .lq-authcard h1 {
    margin: 12px 0 8px !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.9rem, 5vw, 2.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-authcard__lede { margin: 0 0 26px !important; font-size: 1rem !important; line-height: 1.65 !important; color: var(--ink-55) !important; }
.lq-authcard .lq-kicker::before { display: none; }
.lq-authcard .lq-btn { width: 100%; margin-top: 6px; }
body:not(.admin-body):not(.stylist-body) .lq-authcard__alt { margin: 22px 0 0 !important; text-align: center; font-size: 0.95rem !important; color: var(--ink-55) !important; }
body:not(.admin-body):not(.stylist-body) .lq-authcard__alt a { color: var(--gold-light) !important; text-decoration: underline; text-underline-offset: 3px; }
body:not(.admin-body):not(.stylist-body) .lq-subhead { margin: 24px 0 12px !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--ink-45) !important; }

/* ---- Provider cards ---- */
.lq-provider { display: grid; gap: 12px; align-content: start; padding: 20px; }
.lq-provider__top { display: flex; align-items: center; gap: 13px; }
.lq-provider__top figure { margin: 0; flex: none; width: 52px; height: 52px; border-radius: 999px; overflow: hidden; border: 1px solid var(--edge); background: var(--surface-2); }
.lq-provider__top figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lq-provider__mono { display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; color: var(--gold-light); }
.lq-provider__top strong { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.lq-provider__top span { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--ink-45); }
.lq-badge--approved { align-self: start; border-color: rgba(198, 166, 100, 0.5); color: var(--gold-light); }
.lq-provider__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.88rem; color: var(--ink-55); }
.lq-provider__meta span:first-child { color: var(--gold-light); }
.lq-provider__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.lq-provider__from { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-light); }
.lq-filters--sub { border-bottom: 0; margin-top: -10px; }
body:not(.admin-body):not(.stylist-body) .lq-filters--sub a { min-height: 40px; font-size: 0.75rem !important; letter-spacing: 0.1em !important; }
.lq-review__stars { display: block; margin-bottom: 10px; font-size: 1.05rem; letter-spacing: 0.18em !important; color: var(--lqgold); }

/* ---- Nigeria booking flow ----
   The markup keeps its element ids, data attributes and the class names the
   inline script writes into the recommendation list, so the cascading selects
   and the live estimate keep working untouched. Only the styling moves. */
.lq-formwrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 3.5vw, 48px) clamp(40px, 7vh, 90px); }

body:not(.admin-body):not(.stylist-body) .lq-pagetitle {
    margin: 16px 0 0 !important;
    max-width: 20ch;
    font-family: var(--serif) !important;
    font-size: clamp(2.2rem, 6vw, 4.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
}

body:not(.admin-body):not(.stylist-body) .lq-pagelede { margin: 18px 0 0 !important; max-width: 62ch; font-size: clamp(0.95rem, 1.4vw, 1.06rem) !important; line-height: 1.7 !important; color: var(--ink-60) !important; }

.lq-field--wide { grid-column: 1 / -1; }
.lq-formsection .lq-grid { margin-bottom: 4px; }

/* Live estimate */
.marketplace-estimate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: 2px; background: var(--surface-2); }
.marketplace-estimate span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--ink-45); }
.marketplace-estimate strong,
.marketplace-estimate b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--gold-light); }

/* Provider recommendations, rendered by the inline script */
.marketplace-recommendation-box { margin-top: 20px; border: 1px solid var(--edge); border-radius: 2px; background: var(--surface-2); padding: 18px; }
.marketplace-recommendation-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.marketplace-recommendation-head span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--lqgold); }
.marketplace-recommendation-list { display: grid; gap: 10px; }
.marketplace-recommendation-card { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--edge); border-radius: 2px; background: var(--surface); cursor: pointer; }
.marketplace-recommendation-card[aria-pressed="true"],
.marketplace-recommendation-card.is-on { border-color: rgba(198, 166, 100, 0.55); background: rgba(198, 166, 100, 0.06); }
.marketplace-recommendation-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.marketplace-recommendation-tags span { padding: 4px 10px; border: 1px solid var(--edge); border-radius: 99px; font-size: 0.78rem; color: var(--ink-55); }
.marketplace-recommendation-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marketplace-form-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.stylist-address-box { margin-top: 14px; padding: 15px; border: 1px solid var(--edge); border-radius: 2px; background: var(--surface-2); }
.stylist-address-box span { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--lqgold); }

/* ---- Status timeline ---- */
.lq-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 2px; }
.lq-timeline li { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); padding: 15px 18px; }
.lq-timeline__mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--edge-strong); font-size: 0.82rem; font-weight: 700; color: var(--ink-45); }
.lq-timeline li.is-done .lq-timeline__mark { border-color: rgba(127, 211, 155, 0.5); color: #7fd39b; }
.lq-timeline li.is-current { background: rgba(198, 166, 100, 0.06); }
.lq-timeline li.is-current .lq-timeline__mark { border-color: var(--lqgold); color: var(--gold-light); }
.lq-timeline li.is-flagged .lq-timeline__mark { border-color: rgba(227, 160, 160, 0.5); color: #e3a0a0; }
.lq-timeline strong { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); }
.lq-timeline li:not(.is-done):not(.is-current) strong { color: var(--ink-45); font-weight: 400; }
.lq-timeline span { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em !important; text-transform: uppercase; color: var(--lqgold); }

/* ---- Star rating input ---- */
.lq-stars { display: grid; gap: 9px; }
@media (min-width: 620px) { .lq-stars { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.lq-stars label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 1px solid var(--edge-strong); border-radius: 99px; background: var(--field); cursor: pointer; }
.lq-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.lq-stars span { font-size: 1.15rem; color: var(--ink-45); }
.lq-stars b { font-size: 0.85rem; font-weight: 600; color: var(--ink-55); }
.lq-stars label:has(input:checked) { border-color: rgba(198, 166, 100, 0.6); background: rgba(198, 166, 100, 0.1); }
.lq-stars label:has(input:checked) span { color: var(--lqgold); }
.lq-stars label:has(input:checked) b { color: var(--gold-light); }
.lq-stars label:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
body:not(.admin-body):not(.stylist-body) .lq-help a { color: var(--gold-light) !important; text-decoration: underline; text-underline-offset: 3px; }
.lq-searchbar { display: grid; gap: 14px; align-items: end; margin-bottom: clamp(22px, 3vh, 32px); }
@media (min-width: 760px) { .lq-searchbar { grid-template-columns: 1.6fr 1fr auto; } }
.lq-searchbar .lq-field { margin-bottom: 0; }
.lq-searchbar .lq-btn { min-height: 54px; }

/* Plain checkbox labels inside a chip grid (views not yet migrated to .lq-chip). */
.lq-chips > label:not(.lq-chip) {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid var(--edge-strong);
    border-radius: 99px;
    background: var(--field);
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
}
.lq-chips > label:not(.lq-chip) input { flex: none; width: 18px; height: 18px; accent-color: var(--lqgold); }
.lq-chips > label:not(.lq-chip):has(input:checked) { border-color: rgba(198, 166, 100, 0.6); background: rgba(198, 166, 100, 0.07); }

/* ---- Provider app shell ---- */
.cn-app { min-height: 100svh; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .cn-app { padding-bottom: 0; } }

.cn-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cn-head__row h1 { margin: 6px 0 0; font-family: var(--serif, Georgia, serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.1; color: var(--cn-ink); }

/* The tab row duplicates the bottom bar on phones; keep one of them. */
.cn-head .cn-tabs { display: none; }
@media (min-width: 900px) { .cn-head .cn-tabs { display: flex; } }

.cn-note { margin-bottom: 16px; border-radius: 12px; font-size: 0.95rem; line-height: 1.55; }
.cn-note--good { border-color: rgba(127, 211, 155, 0.4); color: #7fd39b; }
.cn-note--bad { border-color: rgba(227, 160, 160, 0.45); color: #e3a0a0; }

/* ---- Provider job detail ---- */
.cn-stack { display: grid; gap: clamp(12px, 1.6vw, 18px); align-content: start; }
.cn-grid--job { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cn-grid--job { grid-template-columns: 1.3fr 0.7fr; } .cn-sticky { position: sticky; top: 96px; } }

.cn-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cn-panel__head h2 { margin: 0; }

.cn-facts { margin: 0; display: grid; gap: 1px; background: rgba(198, 166, 100, 0.12); border: 1px solid var(--cn-edge); border-radius: 12px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cn-facts > div { background: var(--cn-field); padding: 13px 15px; }
.cn-facts .is-wide { grid-column: 1 / -1; }
.cn-facts dt { margin: 0 0 5px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--cn-ink-45); }
.cn-facts dd { margin: 0; font-size: 1rem; color: var(--cn-ink); }
.cn-facts dd a { color: var(--cn-gold-light); text-decoration: none; }

.cn-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cn-kv span { font-size: 0.88rem; color: var(--cn-ink-55); }
.cn-kv b { font-size: 0.95rem; font-weight: 600; color: var(--cn-ink); text-align: right; }

.cn-btn--full { width: 100%; }
.cn-more { margin-top: 14px; border-top: 1px solid var(--cn-edge); padding-top: 14px; }
.cn-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--cn-ink-55); }
.cn-more summary:focus-visible { outline: 2px solid var(--cn-gold-light); outline-offset: 2px; }
.cn-more form + form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cn-edge); }

/* ---- Provider: remaining primitives ---- */
.cn-field--wide { grid-column: 1 / -1; }
.cn-chips { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.cn-chips label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--cn-edge); border-radius: 99px; background: var(--cn-field); color: var(--cn-ink); font-size: 0.92rem; cursor: pointer; }
.cn-chips input { flex: none; width: 17px; height: 17px; accent-color: var(--cn-gold); }
.cn-chips label:has(input:checked) { border-color: rgba(198, 166, 100, 0.5); background: rgba(198, 166, 100, 0.08); }
.cn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cn-actions form { display: contents; }

/* ---- Admin shell ---- */
.cn-admin { --cn-bg: #0d0b09; min-height: 100svh; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .cn-admin { padding-bottom: 0; } }

.cn-head__actions { display: flex; align-items: center; gap: 8px; }
.cn-head__actions .cn-btn { min-height: 40px; padding: 0 14px; font-size: 0.78rem; }

.cn-shell { display: block; }
@media (min-width: 900px) { .cn-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; } }

.cn-rail { display: none; }
@media (min-width: 900px) {
    .cn-rail { display: block; position: sticky; top: 0; padding: 20px 14px 40px; background: var(--cn-rail); border-right: 1px solid var(--cn-edge); min-height: 100svh; }
    .cn-rail a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--cn-ink-55); font-size: 0.88rem; text-decoration: none; }
    .cn-rail a:hover { color: var(--cn-ink); background: rgba(255, 255, 255, 0.03); }
    .cn-rail a.is-on { color: var(--cn-ink); background: rgba(198, 166, 100, 0.12); }
    .cn-rail__group { margin: 18px 0 6px; padding: 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--cn-ink-32); }
    .cn-rail__group:first-child { margin-top: 0; }
}

/* ---- Admin primitives ---- */
.cn-screentitle { margin: 0 0 4px; font-family: var(--serif, Georgia, serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.1; color: var(--cn-ink); }
.cn-sectiontitle { margin: 22px 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--cn-ink-45); }
.cn-sectiontitle:first-child { margin-top: 0; }

.cn-btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.78rem; }

.cn-empty { display: grid; place-items: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--cn-edge); border-radius: 14px; text-align: center; color: var(--cn-ink-55); }
.cn-empty__icon { font-size: 1.6rem; color: var(--cn-gold); }

.cn-tablewrap { overflow-x: auto; border-radius: 14px; }
.cn-tablewrap table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cn-tablewrap th, .cn-tablewrap td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cn-edge); font-size: 0.92rem; color: var(--cn-ink); }
.cn-tablewrap th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--cn-ink-45); white-space: nowrap; }
.cn-tablewrap tr:last-child td { border-bottom: 0; }

.cn-accordion { border: 1px solid var(--cn-edge); border-radius: 14px; background: var(--cn-panel); overflow: hidden; }
.cn-accordion + .cn-accordion { margin-top: 10px; }
.cn-accordion > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; font-size: 0.98rem; font-weight: 600; color: var(--cn-ink); list-style: none; }
.cn-accordion > summary::-webkit-details-marker { display: none; }
.cn-accordion > summary:focus-visible { outline: 2px solid var(--cn-gold-light); outline-offset: -2px; }
.cn-accordion__body { padding: 0 16px 18px; }

.cn-inlineform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.cn-inlineform .cn-field { margin-bottom: 0; flex: 1 1 180px; }

.cn-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cn-needs { border-color: rgba(232, 184, 127, 0.35); }

/* Aliases for the handful of bespoke blocks still carrying their own names. */
.cms-editor-box, .cms-panel, .subscription-action-box, .stylist-address-box, .style-sheet__hint {
    border: 1px solid var(--cn-edge); border-radius: 14px; background: var(--cn-field); padding: 16px;
}
.toggle-grid, .stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stack-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.service-rule-list { display: grid; gap: 8px; }
.alert { border: 1px solid var(--cn-edge); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; color: var(--cn-ink-55); }
.alert.error { border-color: rgba(227, 160, 160, 0.45); color: #e3a0a0; }
.mini { font-size: 0.82rem; color: var(--cn-ink-45); }

/* ---- Admin queues ---- */
.cn-bigfigure { font-family: var(--serif, Georgia, serif); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1; color: var(--cn-gold-light); }
.cn-queue { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; text-decoration: none; }
a.cn-queue:hover { background: rgba(255, 255, 255, 0.03); }
.cn-queue:focus-visible { outline: 2px solid var(--cn-gold-light); outline-offset: -2px; }
.cn-queue strong { display: block; font-size: 0.98rem; font-weight: 600; color: var(--cn-ink); }
.cn-queue span { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--cn-ink-45); }
.cn-queue b { font-family: var(--serif, Georgia, serif); font-size: 1.25rem; font-weight: 600; color: var(--cn-gold-light); }
.cn-queue__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cn-panel > .cn-table__row { border-top: 1px solid var(--cn-edge); padding: 13px 0; background: transparent; }
.cn-panel > .cn-table__row:first-of-type { border-top: 0; }

/* ==========================================================================
   By-hand booking (/admin/new-booking) — console skin
   881 lines of markup whose inline script pins .booking-category-button,
   .booking-choice-card, .booking-progress-step, .booking-time-slot and four
   data attributes. Nothing here renames anything; it restates the surfaces in
   console tokens and is scoped to .admin-body so the shape stays untouched.
   ========================================================================== */
.admin-body .premium-booking-page { background: var(--cn-bg, #0d0b09); }
.admin-body .premium-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(16px, 2.4vw, 28px); }

.admin-body .premium-page-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em !important; text-transform: uppercase; color: #c6a664; }
.admin-body .premium-booking-title h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: #f6efe2; }

.admin-body .booking-step-panel,
.admin-body .booking-main-card,
.admin-body .booking-summary-panel,
.admin-body .booking-progress-card,
.admin-body .booking-service-panel,
.admin-body .booking-category-panel,
.admin-body .booking-review-card,
.admin-body .booking-note-card,
.admin-body .booking-bank-card,
.admin-body .hair-fullness-panel {
    border: 1px solid rgba(198, 166, 100, 0.14);
    border-radius: 16px;
    background: #151210;
}

.admin-body .booking-field-card > span,
.admin-body .booking-step-head p { color: rgba(246, 239, 226, 0.62); }
.admin-body .booking-step-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: #f6efe2; }

.admin-body .booking-field-card input,
.admin-body .booking-field-card select,
.admin-body .booking-field-card textarea {
    min-height: 50px;
    border: 1px solid rgba(198, 166, 100, 0.14) !important;
    border-radius: 10px !important;
    background: #0f0d0b !important;
    color: #f6efe2 !important;
    font-size: 16px !important;
}

/* Choosables: category, service, location, time, add-on, payment choice. */
.admin-body .booking-category-button,
.admin-body .booking-choice-card,
.admin-body .booking-location-card,
.admin-body .booking-time-slot,
.admin-body .booking-option-chip,
.admin-body .booking-addon-option,
.admin-body .booking-payment-choice,
.admin-body .booking-service-card {
    min-height: 46px;
    border: 1px solid rgba(198, 166, 100, 0.16) !important;
    border-radius: 12px !important;
    background: #0f0d0b !important;
    color: #f6efe2 !important;
    transition: border-color .2s ease, background .2s ease;
}

.admin-body .booking-category-button:hover,
.admin-body .booking-choice-card:hover,
.admin-body .booking-location-card:hover,
.admin-body .booking-time-slot:hover,
.admin-body .booking-service-card:hover { border-color: rgba(198, 166, 100, 0.4) !important; }

.admin-body .booking-category-button.is-active,
.admin-body .booking-choice-card.is-active,
.admin-body .booking-location-card.is-active,
.admin-body .booking-time-slot.is-active,
.admin-body .booking-option-chip.is-active,
.admin-body .booking-addon-option.is-active,
.admin-body .booking-payment-choice.is-active,
.admin-body .booking-service-card.is-active {
    border-color: rgba(198, 166, 100, 0.6) !important;
    background: rgba(198, 166, 100, 0.1) !important;
}

/* Step rail — clickable so an admin can jump back mid-call. */
.admin-body .booking-progress-step { min-height: 44px; color: rgba(246, 239, 226, 0.52); }
.admin-body .booking-progress-step.is-active { color: #e6cf9a; }
.admin-body .booking-progress-track { background: rgba(198, 166, 100, 0.14); }

/* The sticky live-total summary. */
.admin-body .booking-summary-panel { position: sticky; top: 16px; }
.admin-body .summary-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 0.92rem; color: rgba(246, 239, 226, 0.62); }
.admin-body .summary-money { color: #f6efe2; }
.admin-body .summary-total { border-top: 1px solid rgba(198, 166, 100, 0.14); padding-top: 13px; margin-top: 4px; }
.admin-body .summary-total .summary-money { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; color: #e6cf9a; }

.admin-body .premium-gold-button,
.admin-body .premium-place-order {
    min-height: 52px;
    border: 0 !important;
    border-radius: 12px !important;
    background: #c6a664 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #191307 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

.admin-body .premium-outline-button {
    min-height: 48px;
    border: 1px solid rgba(198, 166, 100, 0.28) !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #e6cf9a !important;
}

.admin-body .booking-terms-line { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(198, 166, 100, 0.16); border-radius: 12px; background: #0f0d0b; color: #f6efe2; }
.admin-body .booking-terms-line input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: #c6a664; }
.admin-body .hair-upload-card { border: 1px dashed rgba(198, 166, 100, 0.34); border-radius: 12px; background: rgba(198, 166, 100, 0.03); }

/* ==========================================================================
   Public chrome — header and footer, lacquer language
   New .lqh-/.lqf- namespace rather than .premium-*, which sidesteps the older
   high-specificity !important layer entirely.
   ========================================================================== */

.lqh {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(7, 6, 5, 0.82);
    border-bottom: 1px solid rgba(198, 166, 100, 0.1);
    /* No backdrop-filter — see the note in the layout's scroll script. */
    transition: transform .5s cubic-bezier(.16, .8, .3, 1), background .4s ease, border-color .4s ease;
}

.lqh.is-stuck { background: rgba(7, 6, 5, 0.88); border-bottom-color: rgba(198, 166, 100, 0.2); }
.lqh.is-away { transform: translateY(-102%); }

.lqh__inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 26px);
    min-height: 68px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(14px, 3.5vw, 48px);
}

@media (min-width: 900px) { .lqh__inner { min-height: 78px; } }

.lqh__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.lqh__mark { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(198, 166, 100, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); overflow: hidden; display: grid; place-items: center; }
.lqh__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

body:not(.admin-body):not(.stylist-body) .lqh__word {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.12rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase;
    color: var(--ink, #f7f0e4) !important;
    white-space: nowrap;
}

.lqh__nav { display: none; align-items: center; gap: clamp(10px, 1.4vw, 20px); }

body:not(.admin-body):not(.stylist-body) .lqh__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: rgba(247, 240, 228, 0.66) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s ease;
}

body:not(.admin-body):not(.stylist-body) .lqh__nav a:hover { color: #f7f0e4 !important; }
body:not(.admin-body):not(.stylist-body) .lqh__nav a.is-on { color: #f7f0e4 !important; border-bottom-color: #c6a664; }
.lqh__nav a:focus-visible { outline: 2px solid #e6cf9a; outline-offset: 3px; }

.lqh__nav--utility { padding-left: clamp(10px, 1.4vw, 20px); border-left: 1px solid rgba(198, 166, 100, 0.18); }
body:not(.admin-body):not(.stylist-body) .lqh__nav--utility a { font-size: 0.75rem !important; color: rgba(247, 240, 228, 0.5) !important; }
body:not(.admin-body):not(.stylist-body) .lqh__nav--utility a:hover { color: #e6cf9a !important; }

body:not(.admin-body):not(.stylist-body) .lqh__cta {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 46px;
    padding: 0 22px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(198, 166, 100, 0.85) !important;
    background: linear-gradient(140deg, #e3cd97, #c6a664 45%, #a3853f) !important;
    background-image: linear-gradient(140deg, #e3cd97, #c6a664 45%, #a3853f) !important;
    box-shadow: 0 10px 30px rgba(198, 166, 100, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    color: #140f06 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none;
}

.lqh__cta i { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%); background-size: 220% 100%; animation: lq-sheen 5.5s linear infinite; }
.lqh__cta span { position: relative; z-index: 1; }
.lqh__cta:focus-visible { outline: 2px solid #e6cf9a; outline-offset: 3px; }

@media (min-width: 1000px) {
    .lqh__nav, body:not(.admin-body):not(.stylist-body) .lqh__cta { display: inline-flex; }
    .lqh__burger { display: none; }
}

/* Burger — a details panel, so it works with JS off. */
.lqh__burger { position: relative; margin-left: auto; }
.lqh__burger summary { display: grid; place-content: center; gap: 5px; width: 46px; height: 46px; border: 1px solid rgba(198, 166, 100, 0.3); border-radius: 2px; cursor: pointer; list-style: none; }
.lqh__burger summary::-webkit-details-marker { display: none; }
.lqh__burger summary span { display: block; width: 18px; height: 1px; background: #e6cf9a; }
.lqh__burger summary:focus-visible { outline: 2px solid #e6cf9a; outline-offset: 2px; }

.lqh__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(78vw, 300px); display: grid; padding: 8px; border: 1px solid rgba(198, 166, 100, 0.2); border-radius: 2px; background: #0d0b09; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }

body:not(.admin-body):not(.stylist-body) .lqh__panel a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 14px !important;
    color: rgba(247, 240, 228, 0.82) !important;
    font-size: 0.95rem !important;
    text-decoration: none;
}

body:not(.admin-body):not(.stylist-body) .lqh__panel a:hover { color: #f7f0e4 !important; background: rgba(198, 166, 100, 0.07); }

body:not(.admin-body):not(.stylist-body) .lqh__panelcta {
    margin-top: 6px;
    justify-content: center;
    background: linear-gradient(140deg, #e3cd97, #c6a664 45%, #a3853f) !important;
    background-image: linear-gradient(140deg, #e3cd97, #c6a664 45%, #a3853f) !important;
    color: #140f06 !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
}

/* ---- Footer ---- */
.lqf { background: #050403; border-top: 1px solid rgba(198, 166, 100, 0.16); }
.lqf__inner { max-width: 1440px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) clamp(18px, 3.5vw, 48px) clamp(20px, 3vh, 32px); }
.lqf__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .lqf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lqf__grid { grid-template-columns: 1.4fr repeat(3, 0.85fr); } }

.lqf__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; border: 1px solid rgba(198, 166, 100, 0.42); overflow: hidden; }
.lqf__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
body:not(.admin-body):not(.stylist-body) .lqf__brand p { margin: 18px 0 20px !important; max-width: 42ch; font-size: 0.95rem !important; line-height: 1.7 !important; color: rgba(247, 240, 228, 0.52) !important; }

.lqf__socials { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.admin-body):not(.stylist-body) .lqf__socials a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 15px !important;
    border: 1px solid rgba(198, 166, 100, 0.22);
    border-radius: 2px;
    color: rgba(247, 240, 228, 0.72) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    text-decoration: none;
}
body:not(.admin-body):not(.stylist-body) .lqf__socials a:hover { border-color: rgba(198, 166, 100, 0.5); color: #e6cf9a !important; }

body:not(.admin-body):not(.stylist-body) .lqf h2 {
    margin: 0 0 16px !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    color: #c6a664 !important;
}

.lqf__links { display: grid; }
body:not(.admin-body):not(.stylist-body) .lqf__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: rgba(247, 240, 228, 0.6) !important;
    font-size: 0.95rem !important;
    text-decoration: none;
}
body:not(.admin-body):not(.stylist-body) .lqf__links a:hover { color: #e6cf9a !important; }

.lqf__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(30px, 5vh, 52px); padding-top: 22px; border-top: 1px solid rgba(198, 166, 100, 0.12); }
.lqf__bottom span { font-size: 0.85rem; color: rgba(247, 240, 228, 0.42); }
.lqf__bottom div { display: flex; gap: 6px; }
body:not(.admin-body):not(.stylist-body) .lqf__bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px !important; color: rgba(247, 240, 228, 0.42) !important; font-size: 0.85rem !important; text-decoration: none; }
body:not(.admin-body):not(.stylist-body) .lqf__bottom a:hover { color: #e6cf9a !important; }

/* The handoff specifies a 40px logo mark and 42px social chips, but also asks for
   a 44px minimum on every interactive target. The a11y rule wins — the marks keep
   their size, the tappable areas around them grow. */
.lqh__brand { min-height: 44px; }
body:not(.admin-body):not(.stylist-body) .lqf__socials a { min-height: 44px; }
.lq-accountnav__out { margin-left: auto; display: flex; align-items: center; }
body:not(.admin-body):not(.stylist-body) .lq-accountnav__out button {
    min-height: 46px; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; background-image: none !important; box-shadow: none !important;
    color: var(--ink-45) !important; font-family: var(--sans); font-size: 0.78rem !important;
    font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; cursor: pointer;
}
body:not(.admin-body):not(.stylist-body) .lq-accountnav__out button:hover { color: var(--gold-light) !important; }
.cn-queue { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cn-queue > a { flex: 1 1 220px; min-width: 0; text-decoration: none; color: inherit; }
.cn-queue form { flex: 0 0 auto; }
.cn-btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.78rem; border-radius: 11px; }
.cn-review__shot { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--cn-edge); border-radius: 12px; background: var(--cn-field); margin-bottom: 16px; }
.cn-review__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-review__shot--none { display: grid; place-items: center; color: var(--cn-ink-45); font-size: 0.85rem; }
.cn-actionbox__head { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--cn-gold); margin-bottom: 4px; }
.cn-actionbox__why { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--cn-ink-45); }
.subscription-action-box.is-off { opacity: 0.62; }
.subscription-action-box.is-off .cn-btn { pointer-events: none; }
.subscription-action-box--links { display: grid; gap: 8px; align-content: start; }

/* ---- Calendar day strip + schedule ---- */
.cn-daystrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 16px; overflow-x: auto; }
.cn-daystrip a { display: grid; justify-items: center; gap: 3px; min-height: 66px; padding: 10px 6px; border: 1px solid var(--cn-edge); border-radius: 12px; background: var(--cn-panel); color: var(--cn-ink-55); text-decoration: none; }
.cn-daystrip a.is-on { border-color: rgba(198, 166, 100, 0.5); background: rgba(198, 166, 100, 0.08); color: var(--cn-ink); }
.cn-daystrip span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; }
.cn-daystrip b { font-family: var(--serif, Georgia, serif); font-size: 1.3rem; font-weight: 600; }
.cn-daystrip i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.cn-daystrip i.has { background: var(--cn-gold); }

.cn-dayschedule { margin-bottom: 16px; }
.cn-slot { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(198, 166, 100, 0.1); text-decoration: none; color: inherit; }
.cn-slot__hour { flex: 0 0 46px; font-size: 0.85rem; color: var(--cn-ink-45); }
.cn-slot__bar { flex: 0 0 3px; align-self: stretch; border-radius: 2px; background: var(--cn-gold); }
.cn-slot__body { flex: 1; min-width: 0; }
.cn-slot__body strong { display: block; font-size: 0.95rem; color: var(--cn-ink); }
.cn-slot__body span { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--cn-ink-45); }
.cn-dayschedule .cn-btn { margin-top: 16px; }

/* ---- Editable option / add-on rows ---- */
.cn-optionrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid rgba(198, 166, 100, 0.1); }
.cn-optionrow > form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cn-optionrow label { display: grid; gap: 5px; }
.cn-optionrow label span { font-size: 0.75rem; color: var(--cn-ink-45); }
.cn-optionrow input:not([type="checkbox"]) { min-height: 44px; padding: 0 12px; border: 1px solid var(--cn-edge); border-radius: 10px; background: var(--cn-field); color: var(--cn-ink); font-family: inherit; font-size: 16px; max-width: 190px; }
.cn-optionrow input:focus { border-color: rgba(198, 166, 100, 0.6); outline: none; }
.cn-optionrow .checkbox-card { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }

/* ---- Account filter chips ---- */
.lq-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body:not(.admin-body):not(.stylist-body) .lq-chiprow button {
    min-height: 44px; padding: 0 18px !important; border: 1px solid var(--edge-strong) !important;
    border-radius: 99px !important; background: transparent !important; background-image: none !important;
    box-shadow: none !important; color: var(--ink-45) !important; font-family: var(--sans);
    font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; cursor: pointer;
}
body:not(.admin-body):not(.stylist-body) .lq-chiprow button.is-on {
    border-color: rgba(198, 166, 100, 0.6) !important; background: rgba(198, 166, 100, 0.1) !important; color: var(--gold-light) !important;
}
.lq-chiprow button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.lq-row[hidden] { display: none; }

/* ---- Progress timeline ---- */
.lq-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lq-timeline li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.lq-timeline li + li { border-top: 1px solid var(--rule); }
.lq-timeline span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--edge-strong); font-size: 0.8rem; color: var(--ink-45); }
.lq-timeline strong { display: block; font-size: 0.98rem; font-weight: 500; color: var(--ink-45); }
.lq-timeline small { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--lqgold); }
.lq-timeline .is-done span { border-color: rgba(198, 166, 100, 0.5); color: var(--lqgold); }
.lq-timeline .is-done strong { color: var(--ink-60); }
.lq-timeline .is-now span { border-color: var(--lqgold); background: rgba(198, 166, 100, 0.12); color: var(--gold-light); }
.lq-timeline .is-now strong { color: var(--ink); font-weight: 600; }
.lq-timeline .is-stopped span { border-color: rgba(227, 160, 160, 0.5); color: #e3a0a0; }
.lq-timeline .is-stopped strong { color: var(--ink); }
.lq-timeline .is-stopped small { color: #e3a0a0; }
.cn-owed { margin-bottom: 16px; background: linear-gradient(140deg, rgba(232, 184, 127, 0.12), rgba(198, 166, 100, 0.04) 55%, transparent); border-color: rgba(232, 184, 127, 0.28); }
.cn-owed b { display: block; margin: 8px 0 4px; font-family: var(--serif, Georgia, serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; line-height: 1; color: #e8b87f; }
.cn-shortcuts { margin-bottom: 16px; }
.cn-shortcuts > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cn-statrow { margin-bottom: 16px; }

/* ============================================================================
   Front door — region entry
   ----------------------------------------------------------------------------
   Two panels, no photographs. Hovering one grows it and pushes the other back,
   so the choice reads as opening a door rather than ticking a radio button.

   Detection only decorates: .is-detected brightens the frame and adds the
   "Looks like you" tag. Both panels are ordinary links to the same route shape,
   so a wrong guess costs a visitor nothing.

   letter-spacing carries !important throughout because three separate
   `* { letter-spacing: 0 !important }` resets sit earlier in this file.
   ========================================================================== */

.lqd-body { margin: 0; background: #070605; color: var(--ink, #f7f0e4); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.lqd-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

.lqd { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
    gap: clamp(22px, 4vh, 44px); padding: clamp(14px, 2vh, 22px) clamp(18px, 5vw, 54px) clamp(30px, 5vh, 54px); }

.lqd-head { display: grid; justify-items: center; gap: 16px; text-align: center; }
.lqd-mark { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 999px;
    border: 1px solid rgba(198, 166, 100, 0.42); background: #000; box-shadow: 0 0 0 1px rgba(198, 166, 100, 0.1), 0 14px 40px rgba(0, 0, 0, 0.6); }
.lqd-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lqd-wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(0.92rem, 1.5vw, 1.14rem); font-weight: 500;
    letter-spacing: 0.34em !important; text-transform: uppercase; color: #f7f0e4; }
.lqd-rule { width: 52px; height: 1px; background: linear-gradient(90deg, transparent, rgba(198, 166, 100, 0.7), transparent); }

.lqd-main { display: grid; align-content: center; justify-items: center; gap: clamp(24px, 3.5vh, 38px); width: 100%; max-width: 1120px; margin: 0 auto; }
.lqd-intro { display: grid; justify-items: center; gap: 11px; text-align: center; }
.lqd-intro h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem, 4.6vw, 3.3rem);
    font-weight: 400; line-height: 1.06; letter-spacing: -0.01em !important; color: #f7f0e4; }
.lqd-intro p { margin: 0; max-width: 52ch; font-size: clamp(0.9rem, 1.4vw, 1rem); line-height: 1.7; color: rgba(247, 240, 228, 0.56); text-wrap: pretty; }

/* Fixed tracks, not stretch: one panel growing must push the other back. */
.lqd-doors { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
@media (min-width: 760px) { .lqd-doors { flex-direction: row; } }

.lqd-door { position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 1fr auto;
    min-height: clamp(300px, 52vh, 560px); padding: clamp(20px, 2.8vw, 42px); overflow: hidden; text-decoration: none;
    border: 1px solid rgba(198, 166, 100, 0.2); background: linear-gradient(160deg, #141110, #0a0908 68%);
    box-shadow: inset 0 0 70px rgba(198, 166, 100, 0.03);
    transition: flex-grow .8s cubic-bezier(.16, .8, .3, 1), border-color .6s ease, box-shadow .6s ease; }
.lqd-door + .lqd-door { border-top: 0; }
@media (min-width: 760px) { .lqd-door + .lqd-door { border-top: 1px solid rgba(198, 166, 100, 0.2); border-left: 0; } }

/* Stacked, both doors have to fit one screen. At the desktop min-height a phone
   pushes Nigeria below the fold, so the first thing a Lagos visitor sees is the
   UK - which quietly undoes the rule that both doors are equally available. */
@media (max-width: 759px) {
    /* flex:1 1 0 shares out the container's height rather than fitting content,
       so stacked doors overflow their share and overflow:hidden clips the money
       and Enter row clean off. Size to content instead. */
    .lqd-door { flex: 0 0 auto; min-height: 0; padding: 18px 20px; gap: 12px; }
    .lqd-door__name { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .lqd-door__blurb { font-size: 0.84rem; line-height: 1.55; }
    .lqd { gap: clamp(12px, 2vh, 22px); padding-top: 10px; padding-bottom: 18px; }
    .lqd-head { gap: 10px; }
    .lqd-mark { width: 46px; height: 46px; }
    .lqd-intro { gap: 8px; }
    .lqd-main { gap: 18px; align-content: start; }
}

.lqd-door.is-detected { border-color: rgba(198, 166, 100, 0.45); box-shadow: inset 0 0 90px rgba(198, 166, 100, 0.06); }
.lqd-door:hover, .lqd-door:focus-visible { flex-grow: 1.45; border-color: rgba(198, 166, 100, 0.66);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.7), inset 0 0 90px rgba(198, 166, 100, 0.07); outline: none; }
.lqd-door:focus-visible { border-color: #e6cf9a; }

.lqd-door__inset { position: absolute; inset: clamp(12px, 1.4vw, 20px); border: 1px solid rgba(198, 166, 100, 0.16); pointer-events: none; }
.lqd-door__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 108%, rgba(198, 166, 100, 0.16), transparent 68%); }
.lqd-door__sheen { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 250% 100%;
    background-image: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.13) 47%, transparent 60%); animation: lqd-sheen 7s linear infinite; }
.lqd-door__dot { position: absolute; top: 50%; right: clamp(19px, 2.1vw, 25px); width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 999px; background: rgba(198, 166, 100, 0.8); box-shadow: 0 0 12px rgba(198, 166, 100, 0.55); pointer-events: none; }

.lqd-door__top { position: relative; display: grid; align-content: start; gap: 10px; }
.lqd-door__kickers { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lqd-door__kicker { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em !important; text-transform: uppercase; color: #c6a664; }
.lqd-door__tag { min-height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgba(198, 166, 100, 0.42);
    border-radius: 999px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; color: #e6cf9a; }
.lqd-door__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 300;
    line-height: 0.94; letter-spacing: -0.02em !important; color: #f7f0e4; }
.lqd-door__cities { font-size: 0.8rem; letter-spacing: 0.16em !important; text-transform: uppercase; color: rgba(247, 240, 228, 0.44); }

.lqd-door__bottom { position: relative; display: grid; gap: 14px; align-content: end; }
.lqd-door__blurb { max-width: 38ch; font-size: clamp(0.88rem, 1.3vw, 0.96rem); line-height: 1.65; color: rgba(247, 240, 228, 0.6); text-wrap: pretty; }
.lqd-door__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(198, 166, 100, 0.16); }
/* Manrope carries no naira glyph, so the browser substitutes an arbitrary face
   for the one character that carries the whole Nigerian proposition. Naming the
   fallbacks makes the substitution predictable instead of whatever is installed. */
.lqd-door__money { font-family: 'Manrope', 'Noto Sans', 'DejaVu Sans', 'Segoe UI', system-ui, sans-serif; font-size: 0.76rem; letter-spacing: 0.12em !important; text-transform: uppercase; color: rgba(247, 240, 228, 0.42); }
.lqd-door__enter { display: inline-flex; align-items: center; gap: 9px; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em !important; text-transform: uppercase; color: #e6cf9a; }
.lqd-door__enter svg { width: 17px; height: 17px; transition: transform .5s cubic-bezier(.16, .8, .3, 1); }
.lqd-door:hover .lqd-door__enter svg { transform: translateX(5px); }

.lqd-foot { text-align: center; }
.lqd-foot p { margin: 0; font-size: 0.76rem; letter-spacing: 0.1em !important; text-transform: uppercase; color: rgba(247, 240, 228, 0.3); }

@keyframes lqd-sheen { 0% { background-position: 250% 0; } 100% { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
    .lqd-door, .lqd-door__enter svg { transition: none; }
    .lqd-door__sheen { animation: none; opacity: 0; }
    .lqd-door:hover, .lqd-door:focus-visible { flex-grow: 1; }
}

/* ============================================================================
   The five rooms — home bands, room page, category page
   ----------------------------------------------------------------------------
   Equal billing is enforced here, not by discipline. Every band shares one
   heading scale and one tile width, and .lqr-tiles uses a FIXED track with
   justify-content:start. That is what makes Occasions leave the rest of its row
   empty instead of stretching its single tile across the page. Do not change
   the track to 1fr or auto-fit to "balance" the thin rooms.

   letter-spacing carries !important: three `* { letter-spacing: 0 !important }`
   resets sit earlier in this file.
   ========================================================================== */

.lqr-band { position: relative; display: grid; gap: clamp(18px, 3vw, 44px); align-items: start;
    padding-top: clamp(26px, 3.4vw, 46px); margin-top: clamp(26px, 3.4vw, 46px); border-top: 1px solid rgba(198, 166, 100, 0.14); }
@media (min-width: 900px) { .lqr-band { grid-template-columns: minmax(230px, 1fr) 2.2fr; } }

/* The room name as a ghost word behind its tiles. */
.lqr-band__ghost { position: absolute; right: -2px; top: clamp(6px, 1vw, 16px); z-index: 0; pointer-events: none;
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3.4rem, 11vw, 9rem); font-weight: 300;
    line-height: 0.8; letter-spacing: -0.04em !important; color: rgba(198, 166, 100, 0.055); white-space: nowrap; }

.lqr-band__intro { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; }
.lqr-band__num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3.2rem, 6vw, 5.4rem); font-weight: 300;
    line-height: 0.85; letter-spacing: -0.03em !important; color: rgba(198, 166, 100, 0.55); }
.lqr-band__intro h3 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 400; line-height: 1.04; color: var(--ink, #f7f0e4); }
.lqr-band__intro p { margin: 0; max-width: 32ch; font-size: 0.92rem; line-height: 1.7; color: rgba(247, 240, 228, 0.52); text-wrap: pretty; }
.lqr-band__enter { display: inline-flex; align-items: center; gap: 9px; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.14em !important; text-transform: uppercase; color: #c6a664; text-decoration: none; }
.lqr-band__enter svg { width: 15px; height: 15px; transition: transform .45s cubic-bezier(.16, .8, .3, 1); }
.lqr-band__enter:hover svg { transform: translateX(4px); }

.lqr-tiles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, clamp(158px, 22vw, 280px));
    justify-content: start; gap: clamp(10px, 1.4vw, 16px); }

.lqr-tile { position: relative; display: grid; grid-template-rows: auto auto; overflow: hidden; text-decoration: none;
    border: 1px solid rgba(198, 166, 100, 0.15); border-radius: 2px; background: #0d0b09;
    transition: border-color .5s ease, transform .5s cubic-bezier(.16, .8, .3, 1); }
.lqr-tile:hover, .lqr-tile:focus-visible { border-color: rgba(198, 166, 100, 0.44); transform: translateY(-3px); outline: none; }
.lqr-tile__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #141110; }
.lqr-tile__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94); }
/* Monogram, not a placeholder box: reads as considered rather than unfinished. */
.lqr-tile__mono { display: grid; place-items: center; width: 100%; height: 100%;
    background: radial-gradient(120% 120% at 32% 22%, rgba(198, 166, 100, 0.14), rgba(198, 166, 100, 0.03) 70%);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 300;
    letter-spacing: 0.04em !important; line-height: 1; color: rgba(198, 166, 100, 0.5); }
.lqr-tile__meta { display: grid; gap: 4px; padding: 14px 15px 16px; }
.lqr-tile__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.16rem; font-weight: 500; line-height: 1.2; color: #f7f0e4; }
.lqr-tile__note { font-size: 0.79rem; line-height: 1.5; color: rgba(247, 240, 228, 0.44); }

/* Room page */
.lqr-hero { position: relative; padding-top: clamp(46px, 8vh, 92px); }
.lqr-hero__ghost { position: absolute; top: clamp(10px, 3vh, 40px); right: 0; z-index: 0; pointer-events: none;
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(6rem, 22vw, 17rem); font-weight: 300;
    line-height: 0.72; letter-spacing: -0.04em !important; color: rgba(198, 166, 100, 0.07); }
.lqr-hero h1 { position: relative; margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em !important; color: #f7f0e4; }

.lqr-detail { display: grid; gap: clamp(28px, 4vw, 56px); }
.lqr-service { display: grid; gap: clamp(16px, 2.4vw, 34px); align-items: start;
    padding-top: clamp(22px, 3vw, 38px); border-top: 1px solid rgba(198, 166, 100, 0.14); }
@media (min-width: 820px) { .lqr-service { grid-template-columns: clamp(180px, 24vw, 300px) 1fr; } }
.lqr-service__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(198, 166, 100, 0.15);
    border-radius: 2px; background: #141110; }
.lqr-service__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94); }
.lqr-service__body { display: grid; gap: 14px; align-content: start; }
.lqr-service__body h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 400; line-height: 1.1; color: #f7f0e4; }
.lqr-service__body p { margin: 0; max-width: 56ch; font-size: 0.96rem; line-height: 1.7; color: rgba(247, 240, 228, 0.58); text-wrap: pretty; }
.lqr-service__body .lq-btn { justify-self: start; }

.lqr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lqr-pill { min-height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(198, 166, 100, 0.2);
    border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em !important; text-transform: uppercase;
    color: rgba(247, 240, 228, 0.6); }
.lqr-pill--gold { border-color: rgba(198, 166, 100, 0.46); color: #e6cf9a; }

.lqr-includes { margin: 0; }

.lqr-others { margin-top: clamp(34px, 5vw, 70px); }
.lqr-otherlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.lqr-other { display: grid; gap: 6px; padding: 20px 20px 22px; text-decoration: none; border: 1px solid rgba(198, 166, 100, 0.15);
    border-radius: 2px; background: #0d0b09; transition: border-color .5s ease, transform .5s cubic-bezier(.16, .8, .3, 1); }
.lqr-other:hover, .lqr-other:focus-visible { border-color: rgba(198, 166, 100, 0.44); transform: translateY(-3px); outline: none; }
.lqr-other__num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 300; line-height: 1; color: rgba(198, 166, 100, 0.5); }
.lqr-other__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: #f7f0e4; }
.lqr-other__index { font-size: 0.76rem; letter-spacing: 0.1em !important; text-transform: uppercase; color: rgba(247, 240, 228, 0.4); }

/* Category page */
.lqc-hero { display: grid; gap: 12px; padding-top: clamp(40px, 7vh, 84px); }
.lqc-hero h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.3rem, 6vw, 4.2rem);
    font-weight: 300; line-height: 1.02; letter-spacing: -0.02em !important; color: #f7f0e4; }
.lqc-hero .lq-kicker a { color: #c6a664; text-decoration: none; }
.lqc-hero .lq-kicker a:hover { text-decoration: underline; }

.lqc-body { display: grid; gap: clamp(24px, 4vw, 54px); align-items: start; }
@media (min-width: 920px) { .lqc-body { grid-template-columns: 1fr clamp(280px, 30vw, 380px); } }
.lqc-main { display: grid; gap: clamp(24px, 3.4vw, 44px); }
.lqc-block { display: grid; gap: 14px; padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid rgba(198, 166, 100, 0.14); }
.lqc-block h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    font-weight: 400; line-height: 1.14; color: #f7f0e4; }

.lqc-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.lqc-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; align-items: start; }
.lqc-steps b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
    border: 1px solid rgba(198, 166, 100, 0.35); font-size: 0.8rem; font-weight: 700; color: #e6cf9a; }
.lqc-steps__name { font-size: 0.98rem; font-weight: 600; color: #f7f0e4; }
.lqc-steps__note { font-size: 0.88rem; line-height: 1.6; color: rgba(247, 240, 228, 0.52); }

.lqc-side { display: grid; gap: 16px; padding: clamp(22px, 2.6vw, 32px); border: 1px solid rgba(198, 166, 100, 0.18);
    border-radius: 2px; background: linear-gradient(165deg, #141110, #0a0908 72%); }
.lqc-side h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 400; color: #f7f0e4; }
.lqc-facts { margin: 0; display: grid; gap: 4px; }
.lqc-facts dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em !important; text-transform: uppercase; color: #c6a664; }
.lqc-facts dd { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.6; color: rgba(247, 240, 228, 0.6); }
.lqc-facts dd:last-child { margin-bottom: 0; }
.lqc-side .lq-btn { justify-self: stretch; }

@media (prefers-reduced-motion: reduce) {
    .lqr-tile, .lqr-other, .lqr-band__enter svg { transition: none; }
    .lqr-tile:hover, .lqr-other:hover { transform: none; }
}

/* An outstanding consultation form is a blocker, not a detail: it can stop the
   appointment going ahead, so it is marked rather than left to blend in. */
.lq-panel--todo { border-color: rgba(198, 166, 100, 0.5); background: linear-gradient(165deg, rgba(198, 166, 100, 0.07), transparent 70%); }
.lq-row__todo { display: inline-block; margin-top: 4px; font-size: 0.76rem; letter-spacing: 0.06em !important; color: #e6cf9a; }

/* Nigeria category grid. Twelve categories, so four across on wide screens
   rather than the two this used when only braids and makeup were listed. */
@media (min-width: 900px) { .lq-typegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lq-typegrid .lq-card { display: grid; gap: 6px; align-content: start; }
.lq-typegrid__count { font-size: 0.76rem; letter-spacing: 0.06em !important; color: rgba(247, 240, 228, 0.5); }
/* A category with nobody in it yet says so rather than leading somewhere empty. */
.lq-typegrid__count--none { color: rgba(198, 166, 100, 0.72); }

/* ── Nigeria pre-launch: the recruiting band ─────────────────────────────────
   Annel: "put it widely out there that we are looking for providers, in a way
   that providers open the website and know we are looking for them."

   So this sits directly under the hero and is the loudest thing on the page
   before the catalogue. Gold-edged rather than another flat panel, because a
   provider scanning on a phone has to register it as addressed to her before
   she scrolls past. Single column under 700px: four two-line points side by
   side on a 375px screen is unreadable, which is how the old page felt. */
.lq-recruit { position: relative; z-index: 1; margin: clamp(26px, 5vw, 44px) 0 0;
    padding: clamp(24px, 4.5vw, 40px); border: 1px solid rgba(198, 166, 100, 0.34);
    border-radius: 18px; background:
        radial-gradient(120% 140% at 0% 0%, rgba(198, 166, 100, 0.11), transparent 60%),
        rgba(21, 19, 23, 0.72); }
.lq-recruit h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.6rem, 4.4vw, 2.3rem);
    line-height: 1.12; margin: 10px 0 0; color: #f7f0e4; }
.lq-recruit__lede { margin: 12px 0 0; max-width: 58ch; line-height: 1.65; color: rgba(247, 240, 228, 0.72); }
.lq-recruit__points { display: grid; gap: 14px; margin: 24px 0 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .lq-recruit__points { grid-template-columns: 1fr 1fr; gap: 18px 26px; } }
.lq-recruit__points div { padding-left: 16px; border-left: 2px solid rgba(198, 166, 100, 0.4);
    font-size: 0.93rem; line-height: 1.62; color: rgba(247, 240, 228, 0.7); }
.lq-recruit__points strong { display: block; color: #f7f0e4; font-weight: 600; margin-bottom: 2px; }
/* The tile grid is shared with the UK rooms; on a phone two across is the
   readable maximum and the auto-fill track can otherwise drop to one. */
@media (max-width: 520px) {
    .lq-recruit { padding: 22px 18px; }
    .lqr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ── Provider onboarding ─────────────────────────────────────────────────────
   Annel: "the provider page is looking very not nice. Can we spice it up a bit
   and make it feel like actually onboarding."

   The form is long because the questions are real. What was missing was any
   sense of a journey through it, so: an honest four-step index at the top with
   real times on it, and numbered steps on the confirmation page. No fake
   progress bar - the form posts once, and pretending otherwise would be a lie
   the first validation error exposes. */
.lq-applysteps { display: grid; gap: 10px; margin: clamp(22px, 4vw, 34px) 0 0; padding: 0; list-style: none;
    grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 720px) { .lq-applysteps { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.lq-applysteps li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
    padding: 14px 16px; border: 1px solid rgba(198, 166, 100, 0.22); border-radius: 12px;
    background: rgba(21, 19, 23, 0.6); }
.lq-applysteps li span { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; border: 1px solid rgba(198, 166, 100, 0.5);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; color: #c6a664; }
.lq-applysteps li strong { color: #f7f0e4; font-size: 0.95rem; font-weight: 600; align-self: end; }
.lq-applysteps li em { font-style: normal; font-size: 0.78rem; color: rgba(247, 240, 228, 0.46); align-self: start; }

/* The "what happens next" steps on the confirmation page. */
.lq-steps { display: grid; gap: 18px; margin: 22px 0 0; }
.lq-steps__item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.lq-steps__num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(198, 166, 100, 0.5); background: rgba(198, 166, 100, 0.08);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; color: #c6a664; }
.lq-steps__item strong { display: block; color: #f7f0e4; font-size: 1rem; margin-bottom: 3px; }
.lq-steps__item p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(247, 240, 228, 0.66); }
/* A multiple-file input overflows a 375px screen unless it is told not to. */
.lq-field input[type="file"] { max-width: 100%; }