/* ============================================
   GRACIOUS CONTOURS — Master Stylesheet
   Luxury Lymphatic Drainage & Beauty Clinic
   ============================================ */

/* -- DESIGN TOKENS -------------------------- */
:root {
    /* Colour palette — refined editorial */
    --ivory:        #F7F3EC;
    --cream:        #EDE6D8;
    --bone:         #FBF8F2;
    --gold:         #B8945A;
    --gold-deep:    #8C6E3F;
    --gold-soft:    #D4B985;
    --charcoal:     #1F1D1A;
    --graphite:     #3A3733;
    --stone:        #6B6660;
    --mist:         #C8C2B8;
    --line:         rgba(31, 29, 26, 0.08);
    --line-strong:  rgba(31, 29, 26, 0.18);

    /* Typography */
    --serif:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --sans:         'Outfit', 'Inter', -apple-system, sans-serif;
    --mono:         'JetBrains Mono', 'Courier New', monospace;

    /* Scale */
    --max:          1440px;
    --gutter:       clamp(1.5rem, 4vw, 4rem);

    /* Motion */
    --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- RESET ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--sans);
    font-weight: 300;
    color: var(--charcoal);
    background: var(--bone);
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* -- TYPOGRAPHY ----------------------------- */
.display, h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 6.5vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.eyebrow::before {
    content: '';
    width: 2.5rem;
    height: 1px;
    background: var(--gold);
    display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.no-line::before { display: none; }

.lede { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--graphite); max-width: 52ch; line-height: 1.7; }

em.italic, .italic { font-style: italic; font-family: var(--serif); font-weight: 300; }

/* -- LAYOUT --------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(4rem, 10vw, 9rem) 0; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }

/* -- BUTTONS -------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.1rem 2.25rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 0.5s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary { background: var(--charcoal); color: var(--ivory); }
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--ivory); }
.btn-gold { background: var(--gold); color: var(--ivory); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--charcoal);
    transition: all 0.4s var(--ease);
}
.btn-link:hover { color: var(--gold-deep); border-color: var(--gold-deep); gap: 1.25rem; }
.btn-link .arr { display: inline-block; transition: transform 0.4s var(--ease); }
.btn-link:hover .arr { transform: translateX(4px); }

/* -- NAVIGATION ----------------------------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 1.5rem var(--gutter);
    background: rgba(251, 248, 242, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transition: all 0.4s var(--ease);
}
.nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}
.nav-logo {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    line-height: 1;
}
.nav-logo small {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.55rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 0.4rem;
    font-weight: 400;
}
.nav-menu { display: flex; gap: 2.5rem; justify-content: center; }
.nav-menu a {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s var(--ease);
}
.nav-menu a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px; background: var(--gold);
    transition: width 0.4s var(--ease);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--charcoal); }
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.nav-actions { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; }
.nav-toggle { display: none; }

/* Mobile nav */
@media (max-width: 920px) {
    .nav-menu { display: none; }
    .nav-actions .btn { display: none; }
    .nav-toggle {
        display: flex; flex-direction: column; gap: 5px;
        width: 28px; padding: 6px 0; cursor: pointer;
        justify-self: end;
    }
    .nav-toggle span {
        display: block; width: 100%; height: 1px;
        background: var(--charcoal);
        transition: all 0.4s var(--ease);
    }
    .nav-inner { grid-template-columns: 1fr auto; }
    .nav-inner .nav-toggle { grid-column: 2; }

    .mobile-menu {
        position: fixed; inset: 0; background: var(--bone);
        z-index: 99; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2rem; padding: 6rem 2rem 2rem;
        opacity: 0; pointer-events: none;
        transition: opacity 0.4s var(--ease);
    }
    .mobile-menu.open { opacity: 1; pointer-events: auto; }
    .mobile-menu a {
        font-family: var(--serif); font-size: 1.75rem;
        color: var(--charcoal); letter-spacing: 0.02em;
    }
    .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* -- HERO ----------------------------------- */
.hero {
    min-height: 100vh;
    padding: 9rem var(--gutter) 4rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: linear-gradient(180deg, var(--bone) 0%, var(--ivory) 100%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 50%; height: 100%;
    background: radial-gradient(ellipse at top right, rgba(184, 148, 90, 0.08), transparent 60%);
    pointer-events: none;
}
.hero-text { max-width: 640px; position: relative; z-index: 2; }
.hero-text .eyebrow { margin-bottom: 2rem; }
.hero-text h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.98;
    margin-bottom: 2rem;
    letter-spacing: -0.015em;
}
.hero-text h1 .italic { color: var(--gold-deep); display: block; }
.hero-text .lede { margin-bottom: 3rem; font-size: 1.1rem; }
.hero-cta { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.hero-visual {
    position: relative;
    aspect-ratio: 4/5;
    max-height: 80vh;
    align-self: center;
}
.hero-visual .img-main {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #d8c8a8 0%, #b89c6a 100%);
    overflow: hidden;
}
.hero-visual .img-main::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(140, 110, 63, 0.4), transparent 50%);
}
.hero-visual .img-main svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.9;
}
.hero-visual .img-stamp {
    position: absolute; bottom: -3rem; left: -3rem;
    width: 8rem; height: 8rem;
    border-radius: 50%;
    background: var(--bone);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 60px rgba(31, 29, 26, 0.1);
    z-index: 3;
}
.hero-visual .img-stamp svg { width: 100%; height: 100%; animation: rotate 30s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

.hero-meta {
    position: absolute;
    bottom: 3rem;
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 2;
    pointer-events: none;
}
.hero-meta .meta-item {
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
}
.hero-meta .meta-item strong {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0;
    color: var(--charcoal);
    text-transform: none;
    margin-top: 0.5rem;
}

@media (max-width: 920px) {
    .hero { grid-template-columns: 1fr; padding-top: 7rem; }
    .hero-visual { max-height: 60vh; aspect-ratio: 4/5; order: -1; }
    .hero-meta { display: none; }
}

/* -- MARQUEE -------------------------------- */
.marquee {
    overflow: hidden;
    background: var(--charcoal);
    color: var(--cream);
    padding: 1.25rem 0;
    border-top: 1px solid var(--gold-deep);
    border-bottom: 1px solid var(--gold-deep);
}
.marquee-track {
    display: flex;
    gap: 4rem;
    white-space: nowrap;
    animation: marq 40s linear infinite;
    width: max-content;
}
.marquee-track span {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4rem;
}
.marquee-track span::after {
    content: '✦'; color: var(--gold); font-style: normal;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* -- TREATMENTS GRID ------------------------ */
.treatments-intro {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    margin-bottom: 5rem;
    align-items: end;
}
.treatments-intro h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
}
.treatment-card {
    background: var(--bone);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: background 0.5s var(--ease);
    position: relative;
    cursor: pointer;
    min-height: 380px;
}
.treatment-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 2px;
    background: var(--gold);
    transition: width 0.6s var(--ease);
}
.treatment-card:hover { background: var(--ivory); }
.treatment-card:hover::before { width: 100%; }
.treatment-card .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold-deep);
    letter-spacing: 0.05em;
}
.treatment-card h3 {
    font-size: 2rem;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}
.treatment-card p {
    color: var(--graphite);
    line-height: 1.7;
    flex: 1;
    font-size: 0.95rem;
}
.treatment-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
}
.treatment-meta .price {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--charcoal);
    letter-spacing: 0;
    text-transform: none;
}
@media (max-width: 720px) {
    .treatment-grid { grid-template-columns: 1fr; }
    .treatments-intro { grid-template-columns: 1fr; gap: 2rem; }
}

/* -- PROCESS / RITUAL ----------------------- */
.ritual-section {
    background: var(--charcoal);
    color: var(--ivory);
    position: relative;
    overflow: hidden;
}
.ritual-section .eyebrow { color: var(--gold-soft); }
.ritual-section .eyebrow::before { background: var(--gold-soft); }
.ritual-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    counter-reset: ritual;
}
.ritual-step {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 2rem;
    counter-increment: ritual;
}
.ritual-step::before {
    content: counter(ritual, decimal-leading-zero);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold-soft);
    display: block;
    margin-bottom: 1.5rem;
}
.ritual-step h4 {
    color: var(--ivory);
    margin-bottom: 1rem;
    font-size: 1.4rem;
}
.ritual-step p {
    color: var(--mist);
    font-size: 0.92rem;
    line-height: 1.7;
}
@media (max-width: 720px) { .ritual-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* -- SPLIT SECTION (About / Practitioner) --- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
}
.split-image {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--cream), var(--mist));
    position: relative;
    overflow: hidden;
}
.split-image svg { width: 100%; height: 100%; }
.split-content {
    padding: clamp(3rem, 8vw, 7rem) clamp(2rem, 5vw, 5rem);
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.split-content .quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.4;
    color: var(--charcoal);
    border-left: 1px solid var(--gold);
    padding-left: 1.5rem;
    margin: 2rem 0;
}
.signature {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 2rem;
    color: var(--gold-deep);
    margin-top: 2rem;
}
.signature small {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 0.5rem;
}
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }

/* -- GALLERY -------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}
.gallery-card {
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    background: var(--cream);
    cursor: pointer;
}
.gallery-card svg { width: 100%; height: 100%; transition: transform 0.8s var(--ease); }
.gallery-card:hover svg { transform: scale(1.04); }
.gallery-card .gallery-label {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
    color: var(--ivory);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    z-index: 2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.gallery-card .gallery-label strong {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 0.3rem;
}
.gallery-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(31,29,26,0.6) 100%);
    z-index: 1;
}
@media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

/* -- TESTIMONIALS --------------------------- */
.testimonial-section { background: var(--ivory); }
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 4rem;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}
.testimonial {
    padding: 3.5rem 2.5rem;
    border-right: 1px solid var(--line-strong);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.testimonial:last-child { border-right: none; }
.testimonial .stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.3em; }
.testimonial blockquote {
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--charcoal);
    flex: 1;
}
.testimonial cite {
    font-style: normal;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
}
.testimonial cite strong {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--charcoal);
    margin-bottom: 0.3rem;
}
@media (max-width: 920px) {
    .testimonial-grid { grid-template-columns: 1fr; }
    .testimonial { border-right: none; border-bottom: 1px solid var(--line-strong); }
    .testimonial:last-child { border-bottom: none; }
}

/* -- BOOKING CTA BANNER --------------------- */
.booking-banner {
    background: var(--charcoal);
    color: var(--ivory);
    padding: clamp(4rem, 8vw, 7rem) var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.booking-banner::before, .booking-banner::after {
    content: '';
    position: absolute;
    width: 30vw; height: 30vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
}
.booking-banner::before { background: var(--gold); top: -10vw; left: -10vw; }
.booking-banner::after { background: var(--gold-deep); bottom: -10vw; right: -10vw; }
.booking-banner .wrap { position: relative; z-index: 2; }
.booking-banner h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--ivory);
    margin: 1.5rem 0 1.5rem;
}
.booking-banner h2 .italic { color: var(--gold-soft); }
.booking-banner p {
    color: var(--mist);
    max-width: 50ch;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
}
.booking-banner .btn-primary {
    background: var(--gold);
    color: var(--charcoal);
    border-color: var(--gold);
}
.booking-banner .btn-primary:hover { background: var(--ivory); }

/* -- FOOTER --------------------------------- */
.footer {
    background: var(--bone);
    padding: 5rem var(--gutter) 2rem;
    border-top: 1px solid var(--line);
}
.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--line);
}
.footer-brand h3 {
    font-size: 2rem;
    font-style: italic;
    margin-bottom: 1rem;
}
.footer-brand h3 small {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 1rem;
    line-height: 1.7;
    font-weight: 400;
}
.footer-brand p { font-size: 0.9rem; color: var(--graphite); margin-top: 1rem; max-width: 30ch; }
.footer-col h5 {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.5rem;
    font-weight: 400;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { font-size: 0.92rem; color: var(--graphite); transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--gold-deep); }
.footer-bottom {
    max-width: var(--max);
    margin: 0 auto;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--stone);
    letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--charcoal); }
@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* -- PAGE HEADER (interior pages) ----------- */
.page-header {
    padding: 10rem var(--gutter) 5rem;
    background: linear-gradient(180deg, var(--bone), var(--ivory));
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.page-header .eyebrow { margin-bottom: 1.5rem; justify-content: center; }
.page-header h1 { font-size: clamp(3rem, 7vw, 5.5rem); max-width: 18ch; margin: 0 auto 1.5rem; }
.page-header p { max-width: 55ch; margin: 0 auto; color: var(--graphite); }
.page-header .breadcrumb {
    display: flex; gap: 0.5rem; justify-content: center;
    font-size: 0.7rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--stone);
    margin-top: 2rem;
}
.page-header .breadcrumb a { color: var(--gold-deep); }

/* -- FORMS ---------------------------------- */
.form-section { background: var(--bone); padding: clamp(3rem, 6vw, 5rem) 0; }
.form-shell {
    max-width: 880px;
    margin: 0 auto;
    background: var(--ivory);
    padding: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px -40px rgba(31, 29, 26, 0.15);
}
.form-step-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
    flex-wrap: wrap;
}
.form-step-indicator .step {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid transparent;
    transition: all 0.3s var(--ease);
}
.form-step-indicator .step.active { color: var(--charcoal); border-bottom-color: var(--gold); }
.form-step-indicator .step.done { color: var(--gold-deep); }
.form-step-indicator .step .dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    font-family: var(--serif);
}
.form-step-indicator .step.active .dot { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.form-step-indicator .step.done .dot { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.form-step-indicator .divider { flex: 1; height: 1px; background: var(--line-strong); min-width: 1rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    font-weight: 400;
}
.form-group label .req { color: var(--gold-deep); }
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.95rem 1rem;
    background: var(--bone);
    border: 1px solid var(--line-strong);
    font-size: 0.95rem;
    font-family: var(--sans);
    color: var(--charcoal);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); background: var(--ivory); }
.form-group textarea { min-height: 120px; resize: vertical; font-family: var(--sans); }

.form-section-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--charcoal);
}
.form-section-title:first-child { margin-top: 0; }
.form-section-title small {
    display: block;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.medical-question {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}
.medical-question:last-of-type { border-bottom: none; }
.medical-question p {
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.medical-question p small {
    display: block;
    color: var(--stone);
    font-size: 0.82rem;
    margin-top: 0.3rem;
    line-height: 1.4;
}
.radio-group { display: flex; gap: 0.5rem; }
.radio-group label {
    padding: 0.55rem 1.25rem;
    background: var(--bone);
    border: 1px solid var(--line-strong);
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.3s var(--ease);
    user-select: none;
}
.radio-group input { display: none; }
.radio-group label:hover { border-color: var(--gold); }
.radio-group input:checked + label,
.radio-group label.selected { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.radio-group input:checked + label.is-yes,
.radio-group label.is-yes.selected { background: var(--gold-deep); border-color: var(--gold-deep); }

.consent-block {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--cream);
    border-left: 2px solid var(--gold);
}
.consent-block p { font-size: 0.92rem; color: var(--graphite); line-height: 1.7; margin-bottom: 1rem; }
.consent-checkbox {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding-top: 1rem; border-top: 1px solid var(--line);
    cursor: pointer;
}
.consent-checkbox input { margin-top: 0.3rem; accent-color: var(--gold-deep); width: 16px; height: 16px; }
.consent-checkbox span { font-size: 0.9rem; line-height: 1.5; color: var(--charcoal); }

.form-actions {
    display: flex; justify-content: space-between;
    gap: 1rem; margin-top: 3rem;
    padding-top: 2rem; border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .form-row { grid-template-columns: 1fr; }
    .medical-question { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* -- BOOKING FLOW --------------------------- */
.booking-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.booking-summary {
    background: var(--charcoal);
    color: var(--ivory);
    padding: 3rem 2.5rem;
    position: sticky;
    top: 6rem;
    height: fit-content;
}
.booking-summary h3 {
    color: var(--ivory);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 1.5rem;
}
.summary-row {
    display: flex; justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.92rem;
}
.summary-row .label { color: var(--mist); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.summary-row .value { font-family: var(--serif); font-style: italic; color: var(--ivory); font-size: 1.05rem; text-align: right; }
.summary-total {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gold);
    display: flex; justify-content: space-between;
    align-items: baseline;
}
.summary-total .label {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.summary-total .value {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--ivory);
}

.treatment-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.treatment-option {
    padding: 1.5rem;
    background: var(--bone);
    border: 1px solid var(--line-strong);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.treatment-option:hover { border-color: var(--gold); }
.treatment-option.selected { background: var(--ivory); border-color: var(--charcoal); border-width: 2px; padding: calc(1.5rem - 1px); }
.treatment-option h4 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.treatment-option .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.75rem; }
.treatment-option .duration { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }
.treatment-option .price { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--charcoal); }

.calendar {
    background: var(--bone);
    border: 1px solid var(--line);
    padding: 1.5rem;
}
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.calendar-header h4 { font-size: 1.3rem; }
.calendar-nav button {
    width: 36px; height: 36px;
    border: 1px solid var(--line-strong);
    transition: all 0.3s var(--ease);
}
.calendar-nav button:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-grid .day-label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
    text-align: center;
    padding: 0.6rem 0;
}
.calendar-grid .day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    border: 1px solid transparent;
    color: var(--charcoal);
}
.calendar-grid .day:hover { background: var(--ivory); border-color: var(--line-strong); }
.calendar-grid .day.disabled { color: var(--mist); cursor: not-allowed; pointer-events: none; }
.calendar-grid .day.selected { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.calendar-grid .day.today { font-weight: 500; }
.calendar-grid .day.today::after {
    content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.time-slot {
    padding: 0.85rem 0.5rem;
    background: var(--bone);
    border: 1px solid var(--line-strong);
    text-align: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s var(--ease);
}
.time-slot:hover { border-color: var(--gold); }
.time-slot.selected { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.time-slot.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
}
.payment-option {
    padding: 1.5rem;
    background: var(--bone);
    border: 1px solid var(--line-strong);
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.payment-option.selected { border-color: var(--charcoal); border-width: 2px; padding: calc(1.5rem - 1px); background: var(--ivory); }
.payment-option h5 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 0.5rem; font-style: italic; }
.payment-option p { font-size: 0.85rem; color: var(--graphite); }
.payment-option .amt { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-deep); margin-top: 0.5rem; }

.stripe-mock {
    background: var(--bone);
    border: 1px solid var(--line-strong);
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.stripe-mock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
}
.stripe-mock .lock { color: var(--gold-deep); }

@media (max-width: 920px) {
    .booking-layout { grid-template-columns: 1fr; }
    .booking-summary { position: static; }
    .treatment-select, .payment-options { grid-template-columns: 1fr; }
    .time-slots { grid-template-columns: repeat(3, 1fr); }
}

/* -- LEGAL / TEXT PAGES --------------------- */
.legal-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    font-size: 1rem;
    line-height: 1.85;
    color: var(--graphite);
}
.legal-content h2 {
    margin: 4rem 0 1.5rem;
    font-size: 2rem;
    color: var(--charcoal);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    margin: 2.5rem 0 1rem;
    font-size: 1.35rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold-deep);
}
.legal-content p { margin-bottom: 1.25rem; }
.legal-content ul {
    margin: 1rem 0 1.5rem 1.5rem;
    color: var(--graphite);
}
.legal-content ul li { margin-bottom: 0.5rem; }
.legal-content strong { color: var(--charcoal); font-weight: 500; }
.legal-meta {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
}

/* -- CONTACT -------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
}
.contact-info h3 { margin-bottom: 1.5rem; }
.contact-info p { color: var(--graphite); margin-bottom: 2rem; }
.contact-detail {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail h5 {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.5rem;
    font-weight: 400;
}
.contact-detail p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--charcoal);
    margin: 0;
}
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

/* -- ANIMATIONS ----------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Toast for booking confirmation */
.toast {
    position: fixed;
    bottom: 2rem; right: 2rem;
    background: var(--charcoal);
    color: var(--ivory);
    padding: 1.25rem 2rem;
    z-index: 200;
    max-width: 360px;
    border-left: 2px solid var(--gold);
    transform: translateX(120%);
    transition: transform 0.6s var(--ease);
}
.toast.show { transform: none; }
.toast h5 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}
.toast p { font-size: 0.85rem; color: var(--mist); }

/* -- UTILITIES ------------------------------ */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.hidden { display: none !important; }
.gold { color: var(--gold-deep); }

/* ============================================================
 * Results page (before/after grid)
 * ============================================================ */
.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}
.before-after {
    background: var(--bone);
    overflow: hidden;
}
.before-after-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--charcoal);
    aspect-ratio: 16/9;
}
.before-after-imgs > div { position: relative; overflow: hidden; }
.before-after-imgs > div svg,
.before-after-imgs > div img { width: 100%; height: 100%; display: block; object-fit: cover; }
.before-after-imgs .ba-label {
    position: absolute; top: 1rem; left: 1rem;
    background: rgba(31, 29, 26, 0.85); color: var(--ivory);
    font-size: 0.65rem; letter-spacing: 0.32em;
    text-transform: uppercase; padding: 0.5rem 0.85rem;
}
.before-after-info { padding: 1.75rem 2rem; }
.before-after-info h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.before-after-info .meta {
    font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-deep); margin-bottom: 1rem;
}
.before-after-info p { color: var(--graphite); font-size: 0.95rem; }
@media (max-width: 720px) { .results-grid { grid-template-columns: 1fr; } }

/* Confirmation page */
.confirmation-hero {
    text-align: center;
    padding: 8rem var(--gutter) 4rem;
    background: var(--bone);
}
.confirmation-seal {
    width: 110px; height: 110px;
    margin: 0 auto 2.5rem;
    display: block;
}
.confirmation-summary {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    padding: 2.5rem 3rem;
    text-align: left;
}
.confirmation-summary h3 {
    font-size: 0.7rem; letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--gold-deep);
    margin-bottom: 1.5rem;
}
.confirmation-summary dl { display: grid; grid-template-columns: 140px 1fr; gap: 0.85rem 1.5rem; }
.confirmation-summary dt { color: var(--stone); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.confirmation-summary dd { margin: 0; color: var(--charcoal); font-family: var(--serif); font-size: 1.1rem; }
.next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 5rem auto;
    max-width: 1100px;
}
.next-step {
    padding: 2rem; background: var(--cream);
    border-top: 2px solid var(--gold-deep);
}
@media (max-width: 720px) { .next-steps { grid-template-columns: 1fr; } }


/* ============================================
   GLOBAL MOBILE OVERFLOW SAFETY
   ============================================
   Locks the viewport so no element can cause horizontal scroll
   on mobile. Applied to html/body so it works on every page
   (homepage, treatments, clinic, results, contact, etc.).
   The marquee uses width: max-content intentionally; we don't
   apply a universal * { max-width: 100% } rule because that
   would break its animation. */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Make all media responsive — no image, video, or embed can be wider
   than its container. */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Specific overflow fix: the rotating brand badge has left: -3rem
   in its base position, which spills it off-screen on mobile.
   Reposition to inside the viewport on small displays. */
@media (max-width: 920px) {
    .hero-visual .img-stamp {
        width: 5.5rem;
        height: 5.5rem;
        bottom: -1rem;
        left: auto;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-visual .img-stamp {
        width: 4.5rem;
        height: 4.5rem;
        bottom: -0.5rem;
        right: 0.5rem;
    }
}

/* ============================================
   MOBILE FIXES: BOOKING PAGE
   ============================================
   The booking layout already collapses to 1 column at 920px, but
   on actual phone widths the calendar, time slots, summary card
   and form fields are still cramped. Tighten paddings and step
   the grids down so everything stays comfortably visible. */
@media (max-width: 600px) {
    .booking-layout {
        gap: 2rem;
        padding: 0 1.25rem;
    }
    .booking-summary {
        padding: 2rem 1.5rem;
    }
    .booking-summary h3 { font-size: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
    .summary-row { font-size: 0.85rem; padding: 0.7rem 0; }
    .summary-row .label { font-size: 0.7rem; }
    .summary-row .value { font-size: 0.95rem; }
    .summary-total .value { font-size: 1.6rem; }

    .form-step-indicator {
        gap: 0.5rem;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        margin-bottom: 2rem;
    }
    .form-step-indicator .divider { display: none; }

    .form-section-title {
        font-size: 1.25rem;
        margin: 2rem 0 1.25rem;
    }

    .treatment-option { padding: 1.25rem; }
    .treatment-option h4 { font-size: 1.05rem; }
    .treatment-option .price { font-size: 1.1rem; }

    .calendar { padding: 1rem; }
    .calendar-header h4 { font-size: 1.05rem; }
    .calendar-nav button { width: 32px; height: 32px; }
    .calendar-grid { gap: 2px; }
    .calendar-grid .day-label {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        padding: 0.4rem 0;
    }
    .calendar-grid .day { font-size: 0.85rem; }

    .time-slots { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

/* ============================================
   MOBILE FIXES: FOOTER (ALL PAGES)
   ============================================
   Existing rule at 720px goes 4 → 2 columns. On phones (<600px)
   2 columns squashes the link lists and clips text. Stack to a
   single column with comfortable spacing. */
@media (max-width: 600px) {
    .footer {
        padding: 3.5rem 1.25rem 1.5rem;
    }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .footer-brand { grid-column: auto; }
    .footer-brand h3 { font-size: 1.6rem; }
    .footer-brand p { max-width: none; font-size: 0.88rem; }
    .footer-col h5 { margin-bottom: 1rem; }
    .footer-col ul { gap: 0.6rem; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.72rem;
        text-align: left;
    }
}

/* ============================================
   MOBILE FIXES: BOOKING PAGE — RIGHT-EDGE OVERFLOW
   ============================================
   Specific fixes for elements that push past the viewport on
   phones. Scoped to ≤600px so desktop is untouched. */
@media (max-width: 600px) {
    /* Form shell — reduce inner padding so buttons/inputs have more room */
    .form-shell {
        padding: 1.5rem 1.25rem;
    }

    /* Buttons must be allowed to wrap text on small screens. The default
       white-space: nowrap forces "Continue to Consultation →" past the
       viewport edge. */
    .form-actions .btn,
    .form-actions .btn-link {
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .form-actions .btn { width: 100%; padding: 0.95rem 1rem; font-size: 0.72rem; letter-spacing: 0.16em; }
    .form-actions .btn-link { justify-content: center; padding: 0.5rem; }

    /* Stripe mock row — allow the two labels to stack instead of overflowing */
    .stripe-mock-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .stripe-mock { padding: 1.25rem; }

    /* Form inputs — force full width and prevent intrinsic min-width
       behaviour pushing them past the container */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .form-group { min-width: 0; }

    /* Summary rows — let long values wrap rather than overflow */
    .summary-row { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
    .summary-row .value { text-align: left; word-break: break-word; }
    .summary-total { flex-wrap: wrap; gap: 0.5rem; }

    /* Inline deposit policy box — strip its harsh inline padding */
    .booking-layout > div > div[style*="padding: 2rem"] {
        padding: 1.25rem !important;
        margin-top: 1.5rem !important;
    }

    /* Page header padding (booking page lives under .page-header) */
    .page-header { padding: 8rem 1.25rem 3rem; }
}


/* Gallery card — when img/picture is used instead of SVG (homepage results section) */
.gallery-card picture,
.gallery-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.gallery-card img {
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s var(--ease);
}
.gallery-card:hover img { transform: scale(1.04); }

/* Gallery card images — refine focal point so the photo doesn't crop badly */
.gallery-card img {
    object-fit: cover;
    object-position: center 30%;
}
.gallery-card img[alt*="Post-surgical"]   { object-position: center 35%; }
.gallery-card img[alt*="Waist"]           { object-position: center 40%; }
.gallery-card img[alt*="Buccal"]          { object-position: center 25%; }

/* ============================================
   FOOTER — extended (visit / hours / contact / social)
   ============================================ */
.footer-visit address.footer-address {
    font-style: normal;
    font-size: 0.92rem;
    color: var(--graphite);
    line-height: 1.7;
    margin-bottom: 12px;
}
.footer-map-link {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 20px;
    transition: color 0.3s var(--ease);
}
.footer-map-link:hover { color: var(--charcoal); }

.footer-visit .footer-subhead {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 20px 0 8px;
    font-weight: 400;
}

.footer-hours,
.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--graphite);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.footer-contact a {
    color: var(--graphite);
    transition: color 0.3s var(--ease);
}
.footer-contact a:hover { color: var(--gold-deep); }

.footer-col ul.footer-social,
ul.footer-social,
.footer-social {
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.footer-col ul.footer-social li,
.footer-social li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.footer-col ul.footer-social a,
.footer-social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid var(--line-strong);
    color: var(--graphite);
    transition: all 0.3s var(--ease);
}
.footer-social a:hover {
    color: var(--ivory);
    background: var(--charcoal);
    border-color: var(--charcoal);
}
.footer-social svg { display: block; }

/* Footer-bottom credit link */
.footer-bottom a {
    color: var(--stone);
    transition: color 0.3s var(--ease);
}
.footer-bottom a:hover { color: var(--charcoal); }

/* Mobile — single column already handled at 600px breakpoint earlier;
   tighten the new sections for phones */
@media (max-width: 600px) {
    .footer-visit .footer-subhead { margin: 1rem 0 0.5rem; }
    .footer-social { justify-content: flex-start; }
}

/* ============================================
   TREATMENT CARD — dual action footer
   ============================================
   Matches the .treatment-meta layout used on both the homepage
   treatment cards and the /treatments/ archive cards. */
.treatment-meta .treatment-actions {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}
.treatment-meta .treatment-link-secondary {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite, #3c352d);
    border-bottom: 1px solid var(--gold-soft, #d4b985);
    padding-bottom: 2px;
    transition: color 0.3s var(--ease, ease);
    white-space: nowrap;
}
.treatment-meta .treatment-link-secondary:hover {
    color: var(--gold-deep, #8c6e3f);
}
@media (max-width: 600px) {
    .treatment-meta {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .treatment-meta .treatment-actions {
        gap: 1.25rem;
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   LEGAL PAGE EXTRAS — callout box + data table
   Used by /terms/, /cancellation/, /cookies/
   ============================================ */
.legal-callout {
    margin: 3rem 0 0;
    padding: 1.75rem 2rem;
    background: var(--cream, #f7f2ea);
    border-left: 3px solid var(--gold-deep, #8c6e3f);
}
.legal-callout p {
    margin: 0;
    font-family: Georgia, 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--graphite, #3c352d);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 2rem;
    font-size: 0.92rem;
}
.legal-table thead tr {
    background: var(--cream, #f7f2ea);
}
.legal-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bone, #ded4c5);
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep, #8c6e3f);
    font-weight: 500;
}
.legal-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bone, #ded4c5);
    color: var(--graphite, #3c352d);
    line-height: 1.6;
    vertical-align: top;
}
.legal-table code {
    font-size: 0.85rem;
    background: var(--cream, #f7f2ea);
    padding: 0.15rem 0.4rem;
    color: var(--gold-deep, #8c6e3f);
}
@media (max-width: 600px) {
    .legal-table { font-size: 0.85rem; }
    .legal-table th,
    .legal-table td { padding: 0.65rem 0.6rem; }
}

/* ================================================================
   SINGLE TREATMENT — featured image (hero)
   ================================================================
   Lives inside .split which is a 2-col grid (1fr 1fr). Two issues
   stacked:
     A) Grid intrinsic-size: img has width="1600" so the column
        was bleeding past 50%. Fixed below with min-width:0 and
        minmax(0, 1fr).
     B) Height: the right column is tall (lots of text), so the
        grid stretches the left cell to match. But the img with
        height:100% computes against its inline-element's natural
        size, leaving a gap at the bottom. The fix is to make the
        img absolutely-positioned inside a relative container —
        that decouples the img from its own intrinsic size and
        forces it to fill its parent edge-to-edge.
   ================================================================ */
.split > .treatment-hero-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 600px;
    aspect-ratio: auto;          /* reset .split-image's 4/5 */
    overflow: hidden;
    position: relative;          /* anchor for the absolute img below */
    background: linear-gradient(135deg, var(--cream), var(--mist));
}
/* Pin the image to all four edges so it always fills the column,
   regardless of how tall the right column grows. */
.treatment-hero-image > img {
    position: absolute;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Force the .split grid tracks to actually be 50/50 even when
   children have intrinsic sizes that would push them wider.
   minmax(0, 1fr) is the documented fix for this. */
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Mobile: .split collapses to single column at 920px (existing
   media query). Image gets a sensible aspect ratio. */
@media (max-width: 920px) {
    .split > .treatment-hero-image {
        min-height: 0;
        height: auto;
        aspect-ratio: 4/3;
        max-height: 480px;
    }
}

/* ================================================================
   PER-TREATMENT FOCAL POINT OVERRIDES
   Use either form (both work — pick whichever is clearer):
       body.postid-{ID}                 .treatment-hero-image img { ... }
       body.single-gc_treatment-{slug}  .treatment-hero-image img { ... }
   ================================================================ */

body.single-gc_treatment-face-sculpt .treatment-hero-image img {
    object-position: center 40%;
}

body.single-gc_treatment-pressotherapy .treatment-hero-image img {
    object-position: 55% 35%;
}



/* ================================================================
   SINGLE TREATMENT — mobile overflow fix
   ================================================================
   On Pressotherapy and other treatments with long titles, the
   .btn-primary on the right column has `white-space: nowrap` which
   forces the button to one unbreakable line. With 0.22em letter
   spacing, "Reserve Pressotherapy & Detox →" overflows the column.
   The duration/price details box also uses generous padding which
   combined with .split-content padding can clip on narrow screens.
   This block fixes the overflow without touching desktop styles.
   ================================================================ */
@media (max-width: 920px) {
    /* Belt-and-braces no-horizontal-scroll guarantee */
    html, body { overflow-x: hidden; }

    /* Right text column on single treatment pages — keep content
       inside the viewport even with long words/buttons. */
    .split-content {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: normal;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .split-content p,
    .split-content h2,
    .split-content > div {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* Duration/price details box uses inline padding 1.5rem 2rem
       which is too generous on phones. Bring it in. */
    .split-content > div[style*="padding: 1.5rem 2rem"] {
        padding: 1.25rem 1.25rem !important;
    }

    /* Reserve button can be very long on treatments with multi-word
       titles (e.g. "Pressotherapy & Detox"). Allow it to wrap and
       fit within the column. */
    .split-content .btn {
        white-space: normal;
        max-width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
        line-height: 1.4;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* Extra-narrow phones (≤480px): give the reserve button full width
   so it never has a chance to overflow. */
@media (max-width: 480px) {
    .split-content .btn {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ================================================================
   RESULTS PAGE — coming-soon panel
   Renders only when no real `gc_result` posts exist. As soon as
   Grace publishes one with real before/after photos and consent,
   this panel disappears and the proper grid takes over.
   ================================================================ */
.results-coming-soon {
    grid-column: 1 / -1;
    padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--cream, #f7f2ea);
    border-left: 2px solid var(--gold, #b89455);
    text-align: center;
}
.results-coming-soon-inner {
    max-width: 56ch;
    margin: 0 auto;
}
.results-coming-soon-mark {
    width: 96px;
    height: 96px;
    margin: 0 auto 2rem;
    opacity: 0.85;
}
.results-coming-soon-mark svg { width: 100%; height: 100%; }
.results-coming-soon .eyebrow {
    display: inline-block;
    margin-bottom: 1.5rem;
}
.results-coming-soon-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--charcoal, #1f1b18);
}
.results-coming-soon p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--graphite, #3c352d);
    margin: 0 auto 2.5rem;
}
.results-coming-soon .btn { margin-top: 0.5rem; }
@media (max-width: 600px) {
    .results-coming-soon { padding: 3rem 1.5rem; }
    .results-coming-soon-mark { width: 72px; height: 72px; }
}

/* ================================================================
   JOURNAL — index, single posts, archives
   ================================================================
   Editorial / magazine layout that reuses the brand vocabulary:
   cream/gold framings, Cormorant Garamond serif, gold accents.
   ================================================================ */

/* -- Category pill row across the top of the index/archive -- */
.journal-cats {
    border-top: 1px solid var(--bone, #ded4c5);
    border-bottom: 1px solid var(--bone, #ded4c5);
    background: var(--ivory, #faf6ee);
}
.journal-cats-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    justify-content: center;
    padding: 1.5rem 0;
}
.journal-cat {
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite, #3c352d);
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
    white-space: nowrap;
}
.journal-cat:hover { color: var(--gold-deep, #8c6e3f); }
.journal-cat.is-active {
    color: var(--gold-deep, #8c6e3f);
    border-bottom-color: var(--gold-soft, #d4b985);
}

/* -- Hero post (top of the index) -- */
.journal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
}
.journal-hero-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5/4;
    background: var(--cream, #f7f2ea);
}
.journal-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease, ease);
}
.journal-hero-image:hover img { transform: scale(1.04); }
.journal-hero-text { padding: 0 1rem; }
.journal-hero-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    margin: 1rem 0 1.5rem;
    color: var(--charcoal, #1f1b18);
}
.journal-hero-title a { color: inherit; transition: color 0.3s var(--ease, ease); }
.journal-hero-title a:hover { color: var(--gold-deep, #8c6e3f); }
.journal-hero-excerpt {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--graphite, #3c352d);
    margin: 0 0 1.75rem;
    max-width: 50ch;
}
@media (max-width: 920px) {
    .journal-hero { grid-template-columns: 1fr; gap: 2rem; }
    .journal-hero-text { padding: 0; }
}

/* -- Article meta strip (category + date) -- */
.journal-meta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.journal-cat-pill {
    color: var(--gold-deep, #8c6e3f);
    border: 1px solid var(--gold-soft, #d4b985);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(247, 242, 234, 0.5);
}
.journal-date { color: var(--stone, #7a7165); }

/* -- Grid of secondary posts -- */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
}
@media (max-width: 920px) {
    .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .journal-grid { grid-template-columns: 1fr; }
}
.journal-card {
    display: flex;
    flex-direction: column;
}
.journal-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--cream, #f7f2ea);
    margin-bottom: 1.5rem;
    display: block;
}
.journal-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease, ease);
}
.journal-card-image:hover img { transform: scale(1.04); }
.journal-card-text { display: flex; flex-direction: column; }
.journal-card-title {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    line-height: 1.25;
    margin: 0.5rem 0 0.75rem;
    color: var(--charcoal, #1f1b18);
}
.journal-card-title a { color: inherit; transition: color 0.3s var(--ease, ease); }
.journal-card-title a:hover { color: var(--gold-deep, #8c6e3f); }
.journal-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--graphite, #3c352d);
    margin: 0;
}

/* -- Branded fallback when post has no featured image -- */
.journal-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cream, #f7f2ea), var(--mist, #e8d8b8));
    display: flex;
    align-items: center;
    justify-content: center;
}
.journal-fallback-mark {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 4rem;
    color: var(--charcoal, #1f1b18);
    opacity: 0.75;
}

/* -- Pagination -- */
.journal-pagination {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--bone, #ded4c5);
}
.journal-pagination .page-numbers {
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    color: var(--graphite, #3c352d);
    border: 1px solid transparent;
    transition: all 0.3s var(--ease, ease);
}
.journal-pagination .page-numbers.current {
    color: var(--gold-deep, #8c6e3f);
    border-color: var(--gold-soft, #d4b985);
}
.journal-pagination .page-numbers:hover { color: var(--gold-deep, #8c6e3f); }
.journal-pagination .dots { border: none; }

/* -- Empty state -- */
.journal-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--stone, #7a7165);
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.2rem;
}

/* ================================================================
   SINGLE ARTICLE — editorial typography
   ================================================================ */
.journal-article-header {
    text-align: center;
    padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
}
.journal-article-header-inner {
    max-width: 64ch;
    margin: 0 auto;
}
.journal-article-header .eyebrow {
    margin-bottom: 1.5rem;
    justify-content: center;
}
.journal-article-header h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin: 0 auto 1.5rem;
    max-width: 22ch;
    color: var(--charcoal, #1f1b18);
}
.journal-article-lede {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    color: var(--graphite, #3c352d);
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    max-width: 50ch;
    margin: 0 auto 2rem;
}
.journal-article-meta {
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone, #7a7165);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.journal-article-meta .dot { opacity: 0.5; }

/* Hero image for articles */
.journal-article-image {
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    max-width: 1200px;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.journal-article-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Constrain article body for readability */
.wrap-narrow {
    max-width: 64ch;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2rem);
}

/* Article body typography */
.journal-article-body {
    font-family: Georgia, 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--graphite, #3c352d);
}
.journal-article-body > * + * { margin-top: 1.5rem; }
.journal-article-body p { margin: 0 0 1.5rem; }
.journal-article-body h2 {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin: 3rem 0 1.25rem;
    color: var(--charcoal, #1f1b18);
}
.journal-article-body h3 {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    line-height: 1.3;
    margin: 2.25rem 0 1rem;
    color: var(--charcoal, #1f1b18);
}
.journal-article-body strong { color: var(--charcoal, #1f1b18); font-weight: 500; }
.journal-article-body em { font-style: italic; }
.journal-article-body a {
    color: var(--gold-deep, #8c6e3f);
    border-bottom: 1px solid var(--gold-soft, #d4b985);
    transition: border-color 0.3s var(--ease, ease);
}
.journal-article-body a:hover { border-bottom-color: var(--gold-deep, #8c6e3f); }
.journal-article-body ul,
.journal-article-body ol {
    margin: 0 0 1.5rem 1.5rem;
    padding: 0;
}
.journal-article-body ul li,
.journal-article-body ol li { margin: 0 0 0.6rem; line-height: 1.75; }
.journal-article-body blockquote {
    margin: 2.5rem 0;
    padding: 0 0 0 1.75rem;
    border-left: 2px solid var(--gold-soft, #d4b985);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--charcoal, #1f1b18);
}
.journal-article-body blockquote p { margin: 0 0 0.75rem; }
.journal-article-body img,
.journal-article-body figure {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    display: block;
}
.journal-article-body figcaption {
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.78rem;
    color: var(--stone, #7a7165);
    text-align: center;
    margin-top: 0.6rem;
    letter-spacing: 0.04em;
}
.journal-article-body code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.92rem;
    background: var(--cream, #f7f2ea);
    padding: 0.15rem 0.4rem;
    color: var(--gold-deep, #8c6e3f);
}
.journal-article-body hr {
    border: none;
    width: 60px;
    height: 1px;
    background: var(--gold-soft, #d4b985);
    margin: 3rem auto;
}

/* Article footer (share row) */
.journal-article-footer {
    margin: clamp(3rem, 6vw, 5rem) auto;
}
.journal-article-footer-divider {
    width: 60px;
    height: 1px;
    background: var(--gold-soft, #d4b985);
    margin: 0 auto 2rem;
}
.journal-article-share {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    font-family: var(--sans, 'Outfit', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.journal-article-share-label {
    color: var(--gold-deep, #8c6e3f);
    margin-right: 0.5rem;
}
.journal-article-share a {
    color: var(--graphite, #3c352d);
    border-bottom: 1px solid var(--bone, #ded4c5);
    padding-bottom: 2px;
    transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.journal-article-share a:hover {
    color: var(--gold-deep, #8c6e3f);
    border-bottom-color: var(--gold-deep, #8c6e3f);
}

/* Related posts section */
.journal-related {
    background: var(--ivory, #faf6ee);
    padding: clamp(4rem, 8vw, 6rem) 0;
}

/* ================================================================
   QUIET LUXURY POLISH — Path A
   ================================================================
   Standardises the palette, tightens text contrast, and disciplines
   gold usage. Append-only — does not touch layout or typography.
   The existing CSS variables (--ivory, --cream, --charcoal etc) are
   redefined here so every component using them adopts the new
   palette automatically.

   Locked palette:
     #F6F2EC   main background
     #EDE5DC   secondary background (cards / alternating sections)
     #FFFFFF   white (form fields, summary cards)
     #1A1A1A   primary text
     #B89A6A   accent gold (labels, dividers, small UI only)

   Notes on what stays unchanged:
   - All typography, font sizes, layout grids, spacing
   - Gold still appears on the booking banner CTA (it is the brand's
     warmest moment and removing gold there would flatten the page)
   - Italic accent text remains gold but at a single, deeper tone
   ================================================================ */

:root {
    /* Backgrounds — collapsed to two warm neutrals */
    --bone:         #F6F2EC;   /* main body background */
    --ivory:        #F6F2EC;   /* alias — was a near-duplicate */
    --cream:        #EDE5DC;   /* secondary — cards, alt sections */
    --mist:         #EDE5DC;   /* alias — was a colder grey, now warm */

    /* Gold — single accent tone, used sparingly */
    --gold:         #B89A6A;
    --gold-deep:    #8C6E3F;   /* kept for hover states + darker links */
    --gold-soft:    #B89A6A;   /* alias — collapsed to single gold */

    /* Text — single near-black, no faded greys */
    --charcoal:     #1A1A1A;
    --graphite:     #1A1A1A;   /* body copy now matches headings */
    --stone:        #6B6660;   /* kept for true secondary text only */

    /* Lines — slightly stronger so dividers actually read */
    --line:         rgba(26, 26, 26, 0.10);
    --line-strong:  rgba(26, 26, 26, 0.20);
}

/* -- Body baseline ---------------------------------------------- */
body {
    background: #F6F2EC;
    color: #1A1A1A;
}

/* -- Section alternation
   Naturally cycles cream/ivory through .section blocks where the
   theme uses them, but we add a utility to force a section onto
   the secondary background when needed. */
.section--cream { background: #EDE5DC; }
.section--ivory { background: #F6F2EC; }

/* -- Buttons — disciplined and consistent ----------------------- */
/* Primary: solid black, white text, subtle deepening on hover.
   Removes the previous shift to gold which read as inconsistent. */
.btn-primary {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}
.btn-primary:hover {
    background: #2A2A2A;
    color: #FFFFFF;
    border-color: #2A2A2A;
}

/* Ghost: transparent with black border */
.btn-ghost {
    background: transparent;
    color: #1A1A1A;
    border-color: #1A1A1A;
}
.btn-ghost:hover {
    background: #1A1A1A;
    color: #FFFFFF;
}

/* Gold button — removed in favour of primary. Anywhere .btn-gold is
   still used inherits the primary treatment. */
.btn-gold {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}
.btn-gold:hover {
    background: #2A2A2A;
}

/* Booking banner keeps a warmer CTA — the dark surround makes it
   work. The gold reads as deliberate emphasis here. */
.booking-banner .btn-primary {
    background: #B89A6A;
    color: #1A1A1A;
    border-color: #B89A6A;
}
.booking-banner .btn-primary:hover {
    background: #FFFFFF;
    color: #1A1A1A;
    border-color: #FFFFFF;
}

/* -- Eyebrow labels — single gold tone -------------------------- */
.eyebrow {
    color: #B89A6A;
}
.eyebrow::before {
    background: #B89A6A;
}

/* Inside the dark booking/ritual sections, eyebrows stay gold but
   slightly warmer for legibility on charcoal. */
.ritual-section .eyebrow,
.booking-banner .eyebrow {
    color: #B89A6A;
}
.ritual-section .eyebrow::before,
.booking-banner .eyebrow::before {
    background: #B89A6A;
}

/* -- Italic accents — deepened from soft to deep gold for contrast */
em.italic, .italic {
    color: #8C6E3F;
}
/* On dark backgrounds keep italics warmer/lighter for readability */
.ritual-section .italic,
.booking-banner .italic,
.booking-banner h2 .italic {
    color: #B89A6A;
}

/* -- Body text contrast ----------------------------------------- */
/* Many components used --graphite for body copy which read as a
   muted grey-brown. Pull body copy back to true near-black for
   readability without losing softness. */
.lede,
.legal-content,
.legal-content p,
.legal-content ul,
.treatment-card p,
.split-content p,
.testimonial blockquote,
.journal-card-excerpt,
.journal-hero-excerpt,
.journal-article-body,
.journal-article-body p,
.contact-info p {
    color: #1A1A1A;
}

/* Secondary metadata (dates, durations, prices-as-meta) keeps a
   softer tone — but ONE softer tone, not three. */
.journal-date,
.treatment-meta,
.summary-row .label,
.testimonial cite,
.legal-meta,
.confirmation-summary dt {
    color: #6B6660;
}

/* -- Cards & panels --------------------------------------------- */
.treatment-card {
    background: #F6F2EC;
}
.treatment-card:hover {
    background: #EDE5DC;
}
.treatment-card::before {
    background: #B89A6A;     /* the gold accent line on hover */
}

.before-after,
.contact-detail,
.split-content {
    background: #F6F2EC;
}

.legal-callout {
    background: #EDE5DC;
    border-left-color: #8C6E3F;
}

.results-coming-soon {
    background: #EDE5DC;
    border-left-color: #B89A6A;
}

.confirmation-summary {
    background: #FFFFFF;
}

/* -- Form fields — clear contrast ------------------------------- */
.form-group input,
.form-group select,
.form-group textarea {
    background: #FFFFFF;
    color: #1A1A1A;
    border-color: rgba(26,26,26,0.20);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: #FFFFFF;
    border-color: #B89A6A;
}

.form-shell {
    background: #F6F2EC;
}

.consent-block {
    background: #EDE5DC;
    border-left-color: #B89A6A;
}

.radio-group label {
    background: #FFFFFF;
    border-color: rgba(26,26,26,0.20);
}
.radio-group input:checked + label,
.radio-group label.selected {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}
/* Yes/no "is-yes" no longer turns gold — keep one selected state */
.radio-group input:checked + label.is-yes,
.radio-group label.is-yes.selected {
    background: #1A1A1A;
    border-color: #1A1A1A;
}

/* Booking — treatment options & payment options */
.treatment-option,
.payment-option,
.calendar,
.time-slot,
.stripe-mock {
    background: #FFFFFF;
    border-color: rgba(26,26,26,0.18);
}
.treatment-option:hover,
.payment-option:hover,
.time-slot:hover {
    border-color: #1A1A1A;
}
.treatment-option.selected,
.payment-option.selected,
.time-slot.selected {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}
.treatment-option.selected .price,
.payment-option.selected h5,
.payment-option.selected p {
    color: #FFFFFF;
}

/* -- Navigation ------------------------------------------------- */
.nav {
    background: rgba(246, 242, 236, 0.92);
    border-bottom-color: rgba(26,26,26,0.10);
}
.nav-menu a {
    color: #1A1A1A;
}
.nav-menu a::after {
    background: #B89A6A;
}
.nav-menu a:hover,
.nav-menu a.active {
    color: #1A1A1A;
}
.nav-logo {
    color: #1A1A1A;
}
.nav-logo small {
    color: #B89A6A;
}

/* -- Footer ----------------------------------------------------- */
.footer {
    background: #F6F2EC;
    border-top-color: rgba(26,26,26,0.10);
}
.footer-col h5,
.footer-visit .footer-subhead {
    color: #B89A6A;
}
.footer-col a,
.footer-contact a,
.footer-bottom span {
    color: #1A1A1A;
}
.footer-col a:hover,
.footer-contact a:hover,
.footer-map-link:hover,
.footer-bottom a:hover {
    color: #8C6E3F;
}
.footer-map-link {
    color: #8C6E3F;
}
.footer-social a {
    color: #1A1A1A;
    border-color: rgba(26,26,26,0.20);
}
.footer-social a:hover {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}
.footer-brand h3 small {
    color: #B89A6A;
}

/* -- Page header ------------------------------------------------ */
.page-header {
    background: #F6F2EC;
    border-bottom-color: rgba(26,26,26,0.10);
}
.page-header h1 { color: #1A1A1A; }
.page-header p { color: #1A1A1A; }
.page-header .breadcrumb { color: #6B6660; }
.page-header .breadcrumb a { color: #8C6E3F; }

/* -- Marquee strip --------------------------------------------- */
.marquee {
    background: #1A1A1A;
    color: #F6F2EC;
    border-top-color: #8C6E3F;
    border-bottom-color: #8C6E3F;
}
.marquee-track span::after {
    color: #B89A6A;
}

/* -- Hero — keep the warm wash, tighten the gradient ------------ */
.hero {
    background: linear-gradient(180deg, #F6F2EC 0%, #EDE5DC 100%);
}
.hero-text h1 .italic { color: #8C6E3F; }

/* -- Ritual / dark sections ------------------------------------- */
.ritual-section {
    background: #1A1A1A;
    color: #FFFFFF;
}
.ritual-step h4 { color: #FFFFFF; }
.ritual-step p { color: rgba(255,255,255,0.78); }
.ritual-step::before { color: #B89A6A; }

/* -- Booking banner --------------------------------------------- */
.booking-banner {
    background: #1A1A1A;
    color: #FFFFFF;
}
.booking-banner h2 { color: #FFFFFF; }
.booking-banner p { color: rgba(255,255,255,0.78); }
/* Soften the radial corner glows so they read as warmth not stripe */
.booking-banner::before { background: #B89A6A; opacity: 0.18; }
.booking-banner::after  { background: #8C6E3F; opacity: 0.18; }

/* -- Booking summary (charcoal sidebar) ------------------------- */
.booking-summary {
    background: #1A1A1A;
    color: #FFFFFF;
}
.booking-summary h3 { color: #FFFFFF; }
.summary-row .value { color: #FFFFFF; }
.summary-row .label { color: rgba(255,255,255,0.65); }
.summary-total .label { color: #B89A6A; }
.summary-total .value { color: #FFFFFF; }
.summary-total { border-top-color: #B89A6A; }

/* -- Testimonials ----------------------------------------------- */
.testimonial-section { background: #EDE5DC; }
.testimonial blockquote { color: #1A1A1A; }
.testimonial cite strong { color: #1A1A1A; }
.testimonial .stars { color: #B89A6A; }

/* -- Journal ---------------------------------------------------- */
.journal-cats {
    background: #F6F2EC;
    border-top-color: rgba(26,26,26,0.10);
    border-bottom-color: rgba(26,26,26,0.10);
}
.journal-cat { color: #1A1A1A; }
.journal-cat:hover { color: #8C6E3F; }
.journal-cat.is-active {
    color: #8C6E3F;
    border-bottom-color: #B89A6A;
}
.journal-cat-pill {
    color: #8C6E3F;
    border-color: #B89A6A;
    background: #F6F2EC;
}
.journal-hero-title,
.journal-card-title,
.journal-article-header h1 { color: #1A1A1A; }
.journal-hero-title a:hover,
.journal-card-title a:hover { color: #8C6E3F; }
.journal-article-lede { color: #1A1A1A; }
.journal-related { background: #EDE5DC; }
.journal-article-body strong { color: #1A1A1A; }
.journal-article-body a {
    color: #8C6E3F;
    border-bottom-color: #B89A6A;
}
.journal-article-body a:hover { border-bottom-color: #8C6E3F; }
.journal-article-body blockquote {
    border-left-color: #B89A6A;
    color: #1A1A1A;
}

/* -- Treatment hero fallback gradient (single-treatment.php) ---- */
.split > .treatment-hero-image,
.split-image,
.journal-hero-image,
.journal-card-image {
    background: linear-gradient(135deg, #F6F2EC, #EDE5DC);
}

/* -- Cookie banner (already dark) — small token cleanup --------- */
.gc-cookie-banner {
    background: #1A1A1A;
}
.gc-cookie-text strong,
.gc-cookie-text a {
    color: #B89A6A;
}
.gc-cookie-text p {
    color: rgba(255,255,255,0.78);
}

/* -- Confirmation page ----------------------------------------- */
.confirmation-hero { background: #F6F2EC; }
.next-step {
    background: #EDE5DC;
    border-top-color: #8C6E3F;
}