/* Hair Co. design tokens — the CMS Theme tab maps onto these custom properties. */
:root {
  --color-primary: #b08968;
  --color-secondary: #171412;
  --color-default: #3b3733;
  --color-surface: #fdf2e9;
  --color-muted: #8a8178;
  --font-default: 'Roboto', sans-serif;
  --font-primary: 'Roboto', sans-serif;
  --font-heading: 'Urbanist', sans-serif;
  --radius: 18px;
  --section-max-width: 1140px;
  --section-pad-y: 88px;
  --base-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: var(--base-size); scroll-behavior: smooth; }
body { font-family: var(--font-default); color: var(--color-default); line-height: 1.7; background: #fffdfb; font-weight: 300; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.12; color: var(--color-secondary); font-weight: 800; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
img { max-width: 100%; display: block; }

.container { max-width: var(--section-max-width); margin: 0 auto; padding: 0 24px; }
section { padding: var(--section-pad-y) 0; }
section.tinted { background: var(--color-surface); }

.btn {
  display: inline-block; background: var(--color-secondary); color: #fff; font-family: var(--font-heading);
  font-weight: 700; font-size: .92rem; letter-spacing: .02em; padding: .95rem 2.2rem; border-radius: 999px;
  border: 1px solid var(--color-secondary); cursor: pointer; transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--color-secondary); }
.btn.ghost:hover { background: var(--color-secondary); color: #fff; }

.eyebrow { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 2.4rem; margin: .45rem 0 .7rem; }
.section-head p { color: var(--color-muted); }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; background: rgba(255, 253, 251, .9); backdrop-filter: blur(12px);
  border-bottom: 1px solid #efe6dc; z-index: 60;
  transition: box-shadow .35s ease, background .35s ease;
}
.site-header.scrolled { background: rgba(255, 253, 251, .97); box-shadow: 0 10px 30px rgba(23, 20, 18, .08); }
.site-header .container { display: flex; align-items: center; gap: 2.4rem; height: 76px; transition: height .35s ease; }
.site-header.scrolled .container { height: 64px; }
.logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.45rem; color: var(--color-secondary); letter-spacing: -.01em; }
.logo b { color: var(--color-primary); }
.nav { margin-left: auto; display: flex; gap: 1.9rem; font-size: .93rem; font-weight: 400; }
.nav a { position: relative; padding: .3rem 0; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-primary); transition: width .3s ease; }
.nav a:hover { color: var(--color-primary); }
.nav a:hover::after { width: 100%; }
/* Active page — persistent accent + underline (Nuxt sets the router classes). */
.nav a.router-link-exact-active { color: var(--color-primary); font-weight: 500; }
.nav a.router-link-exact-active::after { width: 100%; }
.site-header .btn { padding: .7rem 1.6rem; font-size: .82rem; }

/* Mobile menu */
.menu-btn { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid #e6dbcf; border-radius: 12px; background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--color-secondary); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.site-header.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.open .menu-btn span:nth-child(2) { opacity: 0; }
.site-header.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-panel { display: none; border-top: 1px solid #efe6dc; background: rgba(255, 253, 251, .98); padding: 1.2rem 24px 1.6rem; }
.mobile-nav { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.mobile-nav a { padding: .55rem .8rem; border-radius: 10px; font-weight: 400; }
.mobile-nav a.router-link-exact-active { background: var(--color-surface); color: var(--color-primary); font-weight: 500; }
.drop-enter-active, .drop-leave-active { transition: opacity .25s ease, transform .25s ease; }
.drop-enter-from, .drop-leave-to { opacity: 0; transform: translateY(-8px); }
@media (max-width: 860px) {
  .nav { display: none; }
  .site-header .container > .btn { display: none; }
  .menu-btn { display: flex; }
  .mobile-panel { display: block; }
}

/* ── Hero ── */
.hero { background: var(--color-surface); overflow: hidden; position: relative; }
.hero::before {
  content: ''; position: absolute; right: -140px; top: -140px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(176, 137, 104, .16) 0%, transparent 68%); pointer-events: none;
}
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.4rem; align-items: center; min-height: 560px; position: relative; }
.hero h1 { font-size: 3.4rem; margin: .8rem 0 1.1rem; }
.hero p.lead { font-size: 1.12rem; color: var(--color-muted); margin-bottom: 2rem; max-width: 480px; }
.hero .actions { display: flex; gap: .9rem; align-items: center; }
.hero .visual { position: relative; padding: 0 1.2rem 1.2rem 0; }
.hero .visual::before {
  content: ''; position: absolute; inset: 1.6rem -1.2rem -1.2rem 1.6rem;
  border: 2px solid rgba(176, 137, 104, .45);
  border-radius: 300px 300px var(--radius) var(--radius); pointer-events: none;
}
.hero .visual img {
  width: 100%; aspect-ratio: 5 / 5.6; object-fit: cover; display: block;
  border-radius: 300px 300px var(--radius) var(--radius);
  box-shadow: 0 34px 70px rgba(23, 20, 18, .22); transition: transform .6s ease;
}
.hero .visual:hover img { transform: scale(1.02); }
@media (max-width: 860px) { .hero .container { grid-template-columns: 1fr; } .hero h1 { font-size: 2.4rem; } }

/* ── Services ── */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.service-card { background: #fff; border: 1px solid #efe6dc; border-radius: var(--radius); padding: 2.1rem 1.7rem; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; position: relative; overflow: hidden; }
.service-card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--color-primary); transition: width .35s ease; }
.service-card:hover::after { width: 100%; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(176, 137, 104, .18); border-color: var(--color-primary); }
.service-card .icon { width: 58px; height: 58px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.2rem; transition: background .35s ease, color .35s ease; }
.service-card:hover .icon { background: var(--color-primary); color: #fff; }
.service-card h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.service-card p { font-size: .92rem; color: var(--color-muted); }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* ── About ── */
.about .container { display: grid; grid-template-columns: .95fr 1.05fr; gap: 3.6rem; align-items: center; }
.about .visual { position: relative; }
.about .visual::after {
  content: ''; position: absolute; inset: -1.1rem auto auto -1.1rem; width: 45%; height: 45%;
  border-top: 3px solid var(--color-primary); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius) 0 0 0; pointer-events: none;
}
.about .visual img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: 0 28px 56px rgba(23, 20, 18, .16);
}
.about h2 { font-size: 2.3rem; margin: .45rem 0 1rem; }
.about p { color: var(--color-muted); margin-bottom: 1rem; }
.about ul { list-style: none; margin: 1.2rem 0 1.8rem; display: grid; gap: .7rem; }
.about li { padding-left: 1.9rem; position: relative; font-weight: 400; color: var(--color-default); }
.about li::before { content: '✦'; position: absolute; left: 0; color: var(--color-primary); }
@media (max-width: 860px) { .about .container { grid-template-columns: 1fr; } }

/* ── Team ── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.member { text-align: center; }
.member .photo { width: 100%; aspect-ratio: 1; border-radius: 50% 50% var(--radius) var(--radius); overflow: hidden; margin-bottom: 1.1rem; background: var(--color-surface); }
.member .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.member:hover .photo img { transform: scale(1.07); }
.member h3 { font-size: 1.05rem; }
.member p { font-size: .84rem; color: var(--color-primary); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Stats ── */
.stats { background: var(--color-secondary); }
.stats .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat h3 { font-size: 2.6rem; color: #fff; }
.stat h3 b { color: var(--color-primary); }
.stat p { color: rgba(255, 255, 255, .55); font-size: .88rem; letter-spacing: .04em; }
@media (max-width: 700px) { .stats .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Testimonials ── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review { background: #fff; border: 1px solid #efe6dc; border-radius: var(--radius); padding: 1.9rem; transition: transform .35s ease, box-shadow .35s ease; }
.review:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(23, 20, 18, .1); }
.review .stars { color: var(--color-primary); letter-spacing: .18em; margin-bottom: .8rem; }
.review blockquote { font-style: italic; color: var(--color-default); margin-bottom: 1.1rem; font-size: .96rem; }
.review .who { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--color-secondary); }
.review .who span { display: block; font-family: var(--font-default); font-weight: 300; font-size: .8rem; color: var(--color-muted); }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ── Pricing (salon menu style) ── */
.price-list { max-width: 760px; margin: 0 auto; display: grid; gap: .4rem; }
.price-row { display: flex; align-items: baseline; gap: .8rem; padding: 1.05rem .8rem; border-radius: calc(var(--radius) / 2); transition: background .3s ease; }
.price-row:hover { background: var(--color-surface); }
.price-row h3 { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.price-row .dots { flex: 1; border-bottom: 2px dotted #d9c9b8; transform: translateY(-4px); }
.price-row .price { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--color-primary); white-space: nowrap; }
.price-row p { flex-basis: 100%; }
.price-item { flex: 1 1 auto; min-width: 0; }
.price-item p { font-size: .85rem; color: var(--color-muted); margin-top: .15rem; }

/* ── Appointment ── */
.appointment .container { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.4rem; align-items: start; }
.hours-card { background: var(--color-secondary); color: #fff; border-radius: var(--radius); padding: 2.4rem; }
.hours-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 1.3rem; }
.hours-card ul { list-style: none; display: grid; gap: .75rem; }
.hours-card li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: rgba(255, 255, 255, .78); border-bottom: 1px solid rgba(255, 255, 255, .09); padding-bottom: .75rem; }
.hours-card li b { color: #fff; font-weight: 500; }
.hours-card .reach { margin-top: 1.6rem; font-size: .92rem; color: rgba(255, 255, 255, .78); }
.hours-card .reach b { display: block; color: var(--color-primary); font-size: 1.05rem; margin-top: .2rem; }
.appt-form { background: #fff; border: 1px solid #efe6dc; border-radius: var(--radius); padding: 2.4rem; }
.appt-form h3 { font-size: 1.3rem; margin-bottom: 1.4rem; }
.appt-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.appt-form label { display: block; font-size: .8rem; font-weight: 500; color: var(--color-secondary); margin-bottom: .35rem; letter-spacing: .03em; }
.appt-form input, .appt-form select, .appt-form textarea {
  width: 100%; font: inherit; font-size: .92rem; padding: .78rem 1rem; border: 1px solid #e6dbcf; border-radius: calc(var(--radius) / 2);
  background: #fffdfb; color: var(--color-default); transition: border-color .25s ease, box-shadow .25s ease;
}
.appt-form input:focus, .appt-form select:focus, .appt-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(176, 137, 104, .16); }
.appt-form .full { grid-column: 1 / -1; }
.appt-form .ok { margin-top: 1rem; color: #2e7d32; font-weight: 400; }
.appt-form .err { margin-top: 1rem; color: #b3261e; font-weight: 400; }
.appt-form .slot-note { font-size: .88rem; color: var(--color-muted); }
.slot-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-chips button {
  font: inherit; font-size: .85rem; font-weight: 500; padding: .5rem .95rem; cursor: pointer;
  border: 1px solid #e6dbcf; border-radius: 999px; background: #fffdfb; color: var(--color-default);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.slot-chips button:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.slot-chips button.active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.appt-form button.btn:disabled { opacity: .6; cursor: wait; }
.confirm-panel { display: grid; gap: 1.4rem; }
.confirm-head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid #f2eadf; }
.confirm-head h4 { font-size: 1.3rem; color: var(--color-secondary); margin-bottom: .2rem; }
.confirm-head .slot-note { margin: 0; }
.confirm-badge {
  flex: none; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  background: #e8f3ea; color: #2e7d32; border-radius: 50%; font-size: 1.3rem; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(46, 125, 50, .07);
}
.confirm-ref {
  text-align: center; background: #faf5ef; border: 1px dashed var(--color-primary); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: .8rem; color: var(--color-muted); letter-spacing: .06em; text-transform: uppercase;
}
.confirm-ref b {
  display: block; font-family: 'Urbanist', sans-serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: .18em; color: var(--color-secondary); margin-top: .25rem; text-transform: none;
}
.confirm-section h5 {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: .8rem;
}
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; }
.confirm-grid .full { grid-column: 1 / -1; }
.confirm-item { background: #fffdfb; border: 1px solid #f2eadf; border-radius: calc(var(--radius) / 2); padding: .7rem .9rem; }
.confirm-item span { display: block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .2rem; }
.confirm-item b { font-weight: 500; font-size: .95rem; color: var(--color-secondary); overflow-wrap: anywhere; }
.confirm-note {
  font-size: .88rem; color: var(--color-muted); line-height: 1.6;
  border-left: 3px solid var(--color-primary); padding: .35rem 0 .35rem 1rem;
}
.confirm-note b { color: var(--color-secondary); font-weight: 500; white-space: nowrap; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.appt-form .field-err { margin-top: .35rem; font-size: .8rem; color: #b3261e; }
@media (max-width: 560px) { .confirm-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .appointment .container { grid-template-columns: 1fr; } .appt-form .grid { grid-template-columns: 1fr; } }

/* ── Appointment wizard (stepper, service cards, calendar, review) ── */
.hours-card { position: sticky; top: 100px; }
.hours-card .summary { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.hours-card .summary-title { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin-bottom: .8rem; }
.hours-card .summary ul { gap: .55rem; }
.hours-card .summary li { border: 0; padding: 0; font-size: .9rem; align-items: baseline; }
.hours-card .summary li span { color: rgba(255, 255, 255, .55); }
.hours-card .summary li b { color: rgba(255, 255, 255, .5); font-weight: 500; transition: color .3s ease; }
.hours-card .summary li.set b { color: #fff; }

.appt-form.wizard { box-shadow: 0 30px 60px -40px rgba(23, 20, 18, .35); }
.appt-form label i { font-style: normal; color: var(--color-primary); margin-left: .2rem; }
.appt-form.wizard .err { padding: .7rem 1rem; border-radius: calc(var(--radius) / 2); background: #fdecea; font-size: .92rem; }
.appt-form.wizard button.btn:disabled { opacity: .5; cursor: not-allowed; }
.appt-form.wizard .grid { margin-bottom: 0; }

/* Stepper */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 2.2rem; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; cursor: default; }
.stepper li:not(:last-child)::after {
  content: ''; position: absolute; top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px;
  background: #efe6dc; transition: background .4s ease;
}
.stepper li.done:not(:last-child)::after { background: var(--color-primary); }
.stepper .dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; font-weight: 600; background: #fff; color: var(--color-muted);
  border: 2px solid #e6dbcf; transition: all .35s ease; position: relative; z-index: 1;
}
.stepper .lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; transition: color .3s ease; }
.stepper li.active .dot { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; box-shadow: 0 0 0 5px rgba(176, 137, 104, .2); transform: scale(1.08); }
.stepper li.active .lbl { color: var(--color-secondary); }
.stepper li.done { cursor: pointer; }
.stepper li.done .dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper li.done .lbl { color: var(--color-primary); }
.stepper li.done:hover .dot { transform: scale(1.08); }

.step-pane { animation: step-in .4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 1.2rem; }

/* Service cards */
.service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.service-cards button {
  position: relative; text-align: left; font: inherit; cursor: pointer; padding: 1.2rem 1.3rem 1.1rem;
  border: 1.5px solid #e6dbcf; border-radius: calc(var(--radius) / 1.3); background: #fffdfb; color: var(--color-default);
  display: grid; gap: .45rem; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.service-cards button:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(23, 20, 18, .4); }
.service-cards button.active { border-color: var(--color-secondary); background: var(--color-surface); box-shadow: 0 0 0 4px rgba(176, 137, 104, .16); }
.service-cards .svc-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-secondary); padding-right: 2rem; }
.service-cards .svc-meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--color-muted); }
.service-cards .svc-meta span:last-child { color: var(--color-primary); font-weight: 600; }
.service-cards .svc-check {
  position: absolute; top: .9rem; right: .9rem; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  border: 1.5px solid #e6dbcf; color: transparent; transition: all .25s ease;
}
.service-cards button.active .svc-check { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }

/* Calendar + times */
.datetime { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; align-items: start; }
.calendar { border: 1px solid #efe6dc; border-radius: calc(var(--radius) / 1.3); padding: 1.1rem 1.1rem 1rem; background: #fffdfb; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cal-head b { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--color-secondary); }
.cal-head button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e6dbcf; background: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--color-secondary); transition: background .25s ease;
}
.cal-head button:hover:not(:disabled) { background: var(--color-surface); }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .wd { text-align: center; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); padding: .3rem 0 .5rem; }
.cal-day {
  aspect-ratio: 1; border-radius: 50%; border: 0; background: transparent; font: inherit; font-size: .9rem;
  color: rgba(23, 20, 18, .28); cursor: default; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cal-day.open { color: var(--color-secondary); background: var(--color-surface); cursor: pointer; font-weight: 500; }
.cal-day.open:hover { background: #f3e3d3; transform: scale(1.06); }
.cal-day.active { background: var(--color-secondary) !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(176, 137, 104, .2); }
.cal-day.empty { visibility: hidden; }
.cal-legend { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .78rem; color: var(--color-muted); }
.cal-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-primary); }
.times { border: 1px solid #efe6dc; border-radius: calc(var(--radius) / 1.3); padding: 1.1rem 1.2rem; background: #fffdfb; min-height: 100%; }
.times-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-secondary); margin-bottom: .9rem; }
/* time list: fixed-height scroll box aligned with the calendar, tidy 2-col grid */
.times .slot-chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  max-height: 17rem; overflow-y: auto; padding-right: .35rem;
  scrollbar-width: thin; scrollbar-color: #e6dbcf transparent;
}
.times .slot-chips::-webkit-scrollbar { width: 6px; }
.times .slot-chips::-webkit-scrollbar-thumb { background: #e6dbcf; border-radius: 3px; }
.times .slot-chips button { text-align: center; }

/* Review */
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; }
.review-item { background: #faf5ef; border-radius: calc(var(--radius) / 2); padding: .8rem 1rem; }
.review-item.full { grid-column: 1 / -1; }
.review-item span { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .2rem; }
.review-item b { font-weight: 500; color: var(--color-secondary); overflow-wrap: anywhere; }
.review-grid + .slot-note { margin-top: 1rem; }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid #f2eadf; }

@media (max-width: 860px) {
  .hours-card { position: static; }
  .appt-form.wizard { padding: 1.8rem 1.3rem; }
  .service-cards, .datetime, .review-grid { grid-template-columns: 1fr; }
  .stepper .lbl { font-size: .6rem; }
}

/* ── Contact ── */
.contact .container { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.4rem; align-items: start; }
.contact-cards { display: grid; gap: 1.1rem; }
.contact-card { background: #fff; border: 1px solid #efe6dc; border-radius: var(--radius); padding: 1.5rem 1.7rem; transition: transform .3s ease, border-color .3s ease; }
.contact-card:hover { transform: translateX(6px); border-color: var(--color-primary); }
.contact-card h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-primary); margin-bottom: .3rem; }
.contact-card p { font-weight: 400; color: var(--color-secondary); }
@media (max-width: 860px) { .contact .container { grid-template-columns: 1fr; } }

/* ── CTA band ── */
.cta-band {
  background:
    linear-gradient(105deg, rgba(23, 20, 18, .92) 0%, rgba(23, 20, 18, .78) 45%, rgba(176, 137, 104, .55) 130%),
    url('/nuxt-preview/hairco/assets/images/cta.jpg') center 35% / cover no-repeat;
  border-radius: var(--radius); padding: 4rem 3rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  box-shadow: 0 28px 56px rgba(23, 20, 18, .22);
}
.cta-band h2 { color: #fff; font-size: 2rem; max-width: 520px; }
.cta-band p { color: rgba(255, 255, 255, .65); }
.cta-band .btn { margin-left: auto; background: #fff; color: var(--color-secondary); border-color: #fff; }
.cta-band .btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
@media (max-width: 700px) { .cta-band .btn { margin-left: 0; } }

/* ── Footer ── */
.site-footer { background: var(--color-secondary); color: rgba(255, 255, 255, .72); padding: 64px 0 28px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.4rem; margin-bottom: 2.6rem; }
.site-footer .logo { color: #fff; margin-bottom: .7rem; display: inline-block; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.site-footer ul { list-style: none; display: grid; gap: .55rem; font-size: .9rem; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer .fine { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.6rem; font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: rgba(255, 255, 255, .45); }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* ── Page intro (inner pages) ── */
.page-intro { background: var(--color-surface); padding: 64px 0; }
.page-intro h1 { font-size: 2.6rem; margin-top: .5rem; }
.page-intro p { color: var(--color-muted); max-width: 560px; margin-top: .5rem; }