:root {
    --mocha: #8B6F5C;
    --mocha-light: #EDE5DF;
    --mocha-pale: #FAF7F5;
    --gold: #C9A96E;
    --gold-light: #F5ECD0;
    --charcoal: #2D2D2D;
    --muted: #6c757d;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
}

html { font-size: 16px; }
body { font-family: var(--font-sans); color: var(--charcoal); background: #fff; margin: 0; }

h1, h2, h3, .brand-name { font-family: var(--font-serif); }
.brand-name { color: var(--mocha); font-weight: 700; letter-spacing: 0.02em; }

/* ── Header ── */
.site-header { background: #fff; border-bottom: 1px solid #ede5df; box-shadow: 0 1px 8px rgba(139,111,92,.07); }
.site-header .navbar { padding: 0.6rem 0; }
.site-header .navbar-brand img { height: 52px; width: auto; object-fit: contain; }
.site-header .nav-link { color: var(--charcoal) !important; font-size: 0.95rem; font-weight: 500;
    padding: 0.45rem 0.85rem !important; border-radius: 6px; transition: color .2s, background .2s; }
.site-header .nav-link:hover { color: var(--mocha) !important; background: var(--mocha-pale); }
.btn-book-now { background: var(--mocha); color: #fff !important; border-radius: 50px;
    padding: 0.55rem 1.4rem !important; font-weight: 500; transition: background .2s; }
.btn-book-now:hover { background: #735849 !important; }

/* ── Hero ── */
.hero { background: linear-gradient(135deg, var(--mocha-pale) 0%, #fff9f6 100%); padding: 90px 0 70px; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); color: var(--charcoal); margin-bottom: 1rem; }
.hero p { font-size: 1.1rem; color: var(--muted); max-width: 540px; margin: 0 auto 2rem; }
.hero-divider { width: 50px; height: 3px; background: var(--gold); border-radius: 2px; margin: 1rem auto 1.5rem; }

/* ── Buttons ── */
.btn-primary-mocha { background: var(--mocha); color: #fff; border: none; border-radius: 50px;
    padding: 0.75rem 2rem; font-weight: 500; text-decoration: none; display: inline-block; transition: background .2s, transform .15s; }
.btn-primary-mocha:hover { background: #735849; color: #fff; transform: translateY(-1px); }
.btn-outline-mocha { background: transparent; color: var(--mocha); border: 2px solid var(--mocha);
    border-radius: 50px; padding: 0.65rem 1.75rem; font-weight: 500; text-decoration: none;
    display: inline-block; transition: all .2s; }
.btn-outline-mocha:hover { background: var(--mocha); color: #fff; }

/* ── Section ── */
.section-title { font-family: var(--font-serif); text-align: center; margin-bottom: 0.4rem; }
.section-subtitle { text-align: center; color: var(--muted); margin-bottom: 2.5rem; }
.divider-gold { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0.5rem auto 1rem; }

/* ── Announcement banner ── */
.closure-banner { background: #fff3cd; border: 1px solid #ffc107; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.closure-banner i { color: #856404; }

/* ── Stylist cards ── */
.stylist-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s; text-align: center; height: 100%; }
.stylist-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(139,111,92,.15); }
.stylist-card .stylist-photo { width: 100%; height: 260px; object-fit: cover; }
.stylist-card .stylist-photo-placeholder { width: 100%; height: 260px; background: var(--mocha-light);
    display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--mocha); }
.stylist-card .card-body { padding: 1.25rem; }
.stylist-card .card-title { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 0.2rem; }
.stylist-card .stylist-spec { color: var(--gold); font-size: 0.85rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Portfolio gallery ── */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.portfolio-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
    cursor: pointer; transition: transform .25s; }
.portfolio-grid img:hover { transform: scale(1.03); }

/* ── Service list ── */
.service-item { border: 1px solid var(--mocha-light); border-radius: 12px; padding: 1rem 1.25rem;
    display: flex; justify-content: space-between; align-items: center; transition: border-color .2s, box-shadow .2s; }
.service-item:hover { border-color: var(--mocha); box-shadow: 0 2px 12px rgba(139,111,92,.1); }
.service-item .service-name { font-weight: 500; font-size: 0.95rem; }
.service-item .service-meta { color: var(--muted); font-size: 0.82rem; }
.service-item .service-price { font-family: var(--font-serif); font-size: 1.1rem; color: var(--mocha); font-weight: 600; }

/* ── Booking steps ── */
.booking-steps { display: flex; gap: 0; border-bottom: 2px solid var(--mocha-light); margin-bottom: 2rem; }
.booking-step { flex: 1; text-align: center; padding: 0.75rem 0.5rem; font-size: 0.82rem; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.booking-step.active { color: var(--mocha); border-bottom-color: var(--mocha); font-weight: 600; }
.booking-step.done { color: var(--gold); }

/* ── Service selection checkboxes ── */
.service-checkbox-card { border: 2px solid var(--mocha-light); border-radius: 12px; padding: 1rem 1.25rem;
    cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.service-checkbox-card:has(input:checked) { border-color: var(--mocha); background: var(--mocha-pale); }
.service-checkbox-card input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.service-checkbox-card .check-icon { width: 22px; height: 22px; border: 2px solid var(--mocha-light); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.service-checkbox-card:has(input:checked) .check-icon { background: var(--mocha); border-color: var(--mocha); color: #fff; }

/* ── Stylist radio cards ── */
.stylist-radio-card { border: 2px solid var(--mocha-light); border-radius: 12px; padding: 1rem;
    cursor: pointer; transition: border-color .2s, background .2s; }
.stylist-radio-card:has(input:checked) { border-color: var(--mocha); background: var(--mocha-pale); }
.stylist-radio-card input[type=radio] { position: absolute; opacity: 0; }

/* ── Slot picker calendar ── */
.date-group { margin-bottom: 1.5rem; }
.date-group-label { font-family: var(--font-serif); font-size: 1rem; color: var(--mocha);
    border-bottom: 1px solid var(--mocha-light); padding-bottom: 0.35rem; margin-bottom: 0.75rem; }
.slot-btn { background: var(--mocha-pale); border: 1.5px solid var(--mocha-light); color: var(--charcoal);
    border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.88rem; font-weight: 500;
    cursor: pointer; transition: all .2s; }
.slot-btn:hover, .slot-btn.selected { background: var(--mocha); border-color: var(--mocha); color: #fff; }

/* ── Forms ── */
.form-control:focus, .form-select:focus { border-color: var(--mocha); box-shadow: 0 0 0 0.2rem rgba(139,111,92,.18); }
.form-label { font-weight: 500; font-size: 0.9rem; }

/* ── Footer ── */
.site-footer { background: #faf5f2; border-top: 1px solid var(--mocha-light); }
.footer-link { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--mocha); }
.social-icon { color: var(--muted); font-size: 1.3rem; transition: color .2s, transform .2s; display: inline-block; }
.social-icon:hover { color: var(--mocha); transform: translateY(-2px); }

/* ── Reviews ── */
.review-card { border: 1px solid var(--mocha-light); border-radius: 14px; padding: 1.25rem; height: 100%; }
.review-stars { color: var(--gold); font-size: 0.9rem; }
.review-author { font-weight: 600; font-size: 0.9rem; }

/* ── Google Maps embed ── */
.map-container { border-radius: 16px; overflow: hidden; border: 1px solid var(--mocha-light); }
.map-container iframe { display: block; width: 100%; height: 340px; border: none; }

/* ── Confirmation / success ── */
.confirmation-card { background: var(--mocha-pale); border: 1px solid var(--mocha-light);
    border-radius: 16px; padding: 2rem; text-align: center; }
.confirmation-icon { font-size: 3.5rem; color: var(--mocha); margin-bottom: 1rem; }