@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

:root {
  --bg: #F7F5EF;
  --bg-alt: #EDEBE1;
  --ink: #2A2C24;
  --ink-80: rgba(42, 44, 36, .78);
  --ink-60: rgba(42, 44, 36, .6);
  --ink-55: rgba(42, 44, 36, .55);
  --ink-50: rgba(42, 44, 36, .5);
  --ink-30: rgba(42, 44, 36, .3);
  --line: rgba(42, 44, 36, .1);
  --line-strong: rgba(42, 44, 36, .14);
  --field: rgba(42, 44, 36, .22);
  --accent: #5A6247;
  --accent-dark: #454C36;
  --accent-soft: rgba(90, 98, 71, .45);
  --accent-tint: rgba(90, 98, 71, .05);
  --error: #9A4A3F;
  --radius: 2px;
  --pad: 22px;
}
@media (min-width: 900px) { :root { --pad: 56px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 15px/1.7 Jost, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
.hidden { display: none !important; }

h1, h2 { font-family: "Cormorant Garamond", serif; font-weight: 400; margin: 0; color: var(--ink); }
h1 { font-size: 44px; line-height: 1.04; letter-spacing: -.01em; }
h2 { font-size: 32px; line-height: 1.1; }
p { margin: 0; }
.lead { font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--ink-80); max-width: 46ch; }
.muted { color: var(--ink-60); }

.eyebrow {
  font: 400 11px/1 Jost; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.label {
  font: 400 11px/1 Jost; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-50); display: block; margin-bottom: 8px;
}

@media (min-width: 900px) {
  h1 { font-size: 66px; }
  h2 { font-size: 38px; }
  .lead { font-size: 16.5px; }
}

/* ---------- Buttons / primitives ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 15px Jost; border: none; border-radius: 999px;
  padding: 15px 28px; background: var(--accent); color: var(--bg); cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  min-height: 48px;
}
.btn.block { width: 100%; }
.btn:disabled { background: rgba(90, 98, 71, .3); cursor: default; }
.btn.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 14px 27px; }
.btn.outline.danger { color: var(--error); border-color: rgba(154, 74, 63, .4); }
.btn.text {
  background: none; color: var(--ink); border: none; border-bottom: 1px solid rgba(42, 44, 36, .3);
  border-radius: 0; padding: 4px 0; min-height: auto; font-size: 14px;
}
.btn.small { padding: 9px 18px; font-size: 14px; min-height: 40px; }
@media (hover: hover) {
  .btn:not(.text):not(:disabled):hover { background: var(--accent-dark); }
  .btn.outline:not(:disabled):hover { background: var(--accent); color: var(--bg); }
  .btn.outline.danger:not(:disabled):hover { background: var(--error); color: var(--bg); border-color: var(--error); }
  .btn.text:hover { color: var(--accent); }
}

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-soft); border-radius: 999px; background: transparent;
  color: var(--accent-dark); font: 300 14px Jost; padding: 9px 18px; cursor: pointer;
  min-height: 44px; transition: background-color .12s ease, color .12s ease;
}
.chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.chip.crossed { color: var(--ink-30); text-decoration: line-through; border-color: var(--line-strong); cursor: default; }
.chip:disabled { color: var(--ink-30); border-color: var(--line-strong); cursor: default; }
@media (hover: hover) {
  .chip:not(.active):not(.crossed):not(:disabled):hover { background: var(--accent); color: var(--bg); }
}

.field { margin-bottom: 16px; }
.field label { margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font: 300 16px Jost; color: var(--ink); background: transparent;
  border: 1px solid var(--field); border-radius: var(--radius); padding: 14px;
  min-height: 48px;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-50); }
.field.error input, .field.error textarea { border-color: var(--error); }
.field-error { color: var(--error); font-size: 13px; margin-top: 6px; }

.card { background: var(--bg-alt); border-radius: var(--radius); padding: 18px; }
.stack > * + * { margin-top: 10px; }

/* ---------- Header ---------- */
.page-top { display: flex; flex-direction: column; }
.page-top .hero { order: 1; }
.page-top header.site { order: 2; }
@media (min-width: 900px) {
  .page-top .hero { order: 2; }
  .page-top header.site { order: 1; }
}

header.site { border-bottom: 1px solid var(--line); background: var(--bg); }
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
}
@media (min-width: 900px) { header.site .bar { padding: 22px var(--pad); } }
.brand-block { display: flex; flex-direction: column; }
.brand {
  font: 400 20px "Cormorant Garamond", serif; letter-spacing: .14em; text-transform: uppercase;
}
@media (min-width: 900px) { .brand { font-size: 23px; } }
.brand-sub { font: 300 12px Jost; color: var(--ink-60); margin-top: 3px; }
.brand-sub.mobile-only { display: block; }
.brand-sub.desktop-only { display: none; }
@media (min-width: 900px) {
  .brand-sub.mobile-only { display: none; }
  .brand-sub.desktop-only { display: block; }
}

.nav-desktop { display: none; }
@media (min-width: 900px) {
  .nav-desktop { display: flex; align-items: center; gap: 34px; }
  .nav-desktop a { font: 300 14px Jost; transition: color .12s ease; }
  .nav-desktop a:hover { color: var(--accent); }
}
.phone-link-mobile { font: 300 14px Jost; }
@media (min-width: 900px) { .phone-link-mobile { display: none; } }

/* ---------- Hero ---------- */
.hero-grid { display: flex; flex-direction: column; }
.hero-grid .hero-photo { order: 1; }
.hero-grid .hero-copy { order: 2; padding: 26px var(--pad) 40px; }
.hero-photo { width: 100%; height: 420px; background: var(--bg-alt); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; padding: 76px var(--pad) 72px; max-width: 1120px; margin: 0 auto; }
  .hero-grid .hero-copy { order: 1; padding: 0; }
  .hero-grid .hero-photo { order: 2; height: 520px; border-radius: var(--radius); }
}

.free-windows { margin: 26px 0; }
.free-windows .chips { display: flex; gap: 10px; flex-wrap: wrap; }

.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.cta-row .btn.text { border-color: rgba(42, 44, 36, .3); }

/* ---------- Sections ---------- */
section.sec { padding: 46px 0; }
section.sec.alt { background: var(--bg-alt); }
.sec-head { margin-bottom: 26px; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-note { font: 300 13.5px Jost; color: var(--ink-60); max-width: 380px; }
@media (min-width: 900px) {
  section.sec { padding: 72px 0; }
  .sec-note { text-align: right; }
}

/* ---------- Services / price list ---------- */
.svc-list { display: flex; flex-direction: column; }
.svc-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .12s ease;
}
.svc-row .svc-left { display: flex; flex-direction: column; min-width: 0; }
.svc-row .name { font: 400 22px "Cormorant Garamond", serif; color: var(--ink); line-height: 1.15; }
.svc-row .leader { display: none; }
.svc-row .dur { font: 300 12.5px Jost; color: var(--ink-55); white-space: nowrap; margin-top: 2px; }
.svc-row .price { font: 500 15px Jost; color: var(--ink); white-space: nowrap; flex: none; }
.svc-row.quote .price { font: 300 13px Jost; color: var(--accent-dark); }
@media (min-width: 900px) {
  .svc-row { align-items: baseline; }
  .svc-row .svc-left { flex-direction: row; align-items: baseline; flex: 1; }
  .svc-row .name { font-size: 25px; }
  .svc-row .leader { display: block; flex: 1; border-bottom: 1px dotted rgba(42, 44, 36, .28); margin: 0 6px; transform: translateY(-4px); }
  .svc-row .dur { width: 78px; text-align: right; margin-top: 0; }
  .svc-row .price { width: 110px; text-align: right; }
}
@media (hover: hover) { .svc-row:hover { background: var(--accent-tint); } }

.svc-group-label { font: 400 11px Jost; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin: 26px 0 4px; }
.svc-group-label:first-child { margin-top: 0; }

/* ---------- About ---------- */
.about-grid { display: flex; flex-direction: column; gap: 30px; }
.about-copy { max-width: 460px; }
.about-copy p + p { margin-top: 16px; }
.badge-exp {
  display: inline-block; border: 1px solid var(--accent-soft); border-radius: 999px;
  padding: 9px 20px; font: 300 13.5px Jost; margin-top: 18px; color: var(--accent-dark);
}
@media (min-width: 900px) {
  .about-grid { flex-direction: row; gap: 56px; border-top: 1px solid var(--line-strong); padding-top: 4px; }
  .about-grid > * { flex: 1; }
}

/* ---------- Contacts (mobile) ---------- */
.contact-block { background: var(--bg-alt); padding: 32px var(--pad); }
.contact-block .row { font: 300 14px Jost; margin-top: 8px; }
.contact-block .row:first-of-type { margin-top: 4px; }
@media (min-width: 900px) { .contact-block { display: none; } }

/* ---------- Day/time widget (desktop landing) ---------- */
.time-widget { display: none; }
@media (min-width: 900px) {
  .time-widget { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; padding: 52px var(--pad); }
  .time-widget-card { background: var(--bg); padding: 28px; border-radius: var(--radius); }
  .tw-month { font: 400 11px Jost; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 14px; }
  .tw-days { display: flex; gap: 8px; margin-bottom: 22px; }
  .tw-day {
    flex: 1; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 10px 4px; cursor: pointer; background: transparent; font-family: Jost;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  }
  .tw-day .wd { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }
  .tw-day .num { font: 400 22px "Cormorant Garamond", serif; margin: 4px 0; }
  .tw-day .cnt { font-size: 9.5px; color: var(--ink-55); }
  .tw-day.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .tw-day.active .wd, .tw-day.active .cnt { color: rgba(247, 245, 239, .8); }
  .tw-day.off { opacity: .4; cursor: default; }
  .tw-day:not(.off):not(.active):hover { border-color: var(--accent); }
  .tw-slots { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* ---------- Portfolio ---------- */
.gallery { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gallery .g { flex: none; width: 210px; aspect-ratio: 210/270; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; overflow: visible; }
  .gallery .g { width: auto; aspect-ratio: 4/5; }
}

/* ---------- Footer ---------- */
footer.site {
  padding: 26px var(--pad); font: 300 13px Jost; color: var(--ink-60);
  display: flex; flex-direction: column; gap: 4px;
}
@media (min-width: 900px) { footer.site { flex-direction: row; justify-content: space-between; padding: 38px var(--pad); } }

/* ==================== Booking wizard (full-screen steps) ==================== */
.step-screen { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.step-head { padding: 16px var(--pad); border-bottom: 1px solid var(--line); }
.step-head-row { display: flex; align-items: center; gap: 14px; }
.step-back { background: none; border: none; font-size: 22px; color: var(--ink-55); cursor: pointer; line-height: 1; padding: 4px; }
.step-title { font: 400 17px "Cormorant Garamond", serif; letter-spacing: .14em; text-transform: uppercase; }
.progress { display: flex; gap: 6px; margin-top: 14px; }
.progress i { flex: 1; height: 2px; background: rgba(42, 44, 36, .15); }
.progress i.on { background: var(--accent); }

.step-body { flex: 1; padding: 26px var(--pad) 120px; max-width: 620px; width: 100%; margin: 0 auto; }
.step-eyebrow { font: 400 11px Jost; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.step-h1 { font: 400 36px "Cormorant Garamond", serif; margin-bottom: 22px; }
.step-sub { color: var(--ink-60); font-size: 14px; margin: -12px 0 22px; }

.opt-row { display: flex; align-items: center; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.opt-radio, .opt-check {
  flex: none; width: 18px; height: 18px; border: 1.5px solid var(--field); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; transition: border-color .12s ease;
}
.opt-check { border-radius: 2px; }
.opt-row.on .opt-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg); background: var(--accent); }
.opt-row.on .opt-check { background: var(--accent); border-color: var(--accent); color: var(--bg); font-size: 12px; }
.opt-row .grow { flex: 1; }
.opt-row .name { font: 400 21px "Cormorant Garamond", serif; }
.opt-row .dur { font: 300 12.5px Jost; color: var(--ink-55); margin-top: 2px; }
.opt-row .price { font: 500 15px Jost; }

.day-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; }
.day-chip {
  flex: none; width: 60px; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 2px; background: transparent; font-family: Jost; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.day-chip .wd { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }
.day-chip .num { font: 400 22px "Cormorant Garamond", serif; margin: 4px 0; }
.day-chip .cnt { font-size: 9.5px; color: var(--ink-55); }
.day-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.day-chip.active .wd, .day-chip.active .cnt { color: rgba(247, 245, 239, .8); }
.day-chip.off { opacity: .4; cursor: default; }
@media (hover: hover) { .day-chip:not(.off):not(.active):hover { border-color: var(--accent); } }

.slot-group-label { font: 400 11px Jost; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin: 18px 0 10px; }
.slot-group-label:first-child { margin-top: 0; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.day-date { font: 300 15px Jost; color: var(--ink-80); margin-bottom: 18px; }

.summary-card { background: var(--bg-alt); border-radius: var(--radius); padding: 18px; margin-bottom: 22px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.summary-row + .summary-row { margin-top: 8px; }
.summary-card .svc-name { font: 400 21px "Cormorant Garamond", serif; }
.summary-when { font: 300 14px Jost; color: var(--ink-80); margin-top: 10px; }

.sticky-bar {
  position: sticky; bottom: 0; left: 0; right: 0; background: var(--bg);
  border-top: 1px solid rgba(42, 44, 36, .12); padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sticky-bar .totals { font: 300 13px Jost; color: var(--ink-60); }
.sticky-bar .totals strong { display: block; font: 400 16px Jost; color: var(--ink); margin-top: 2px; }
.sticky-bar .btn { flex: none; }
.sticky-bar.center { justify-content: center; }
.sticky-bar.center .btn { width: 100%; max-width: 620px; }

.upload-box {
  border: 1px dashed var(--field); border-radius: var(--radius); padding: 20px;
  text-align: center; cursor: pointer; color: var(--ink-60); font: 300 15px Jost;
}
.upload-box.has-file { border-color: var(--accent); color: var(--ink); border-style: solid; }
.upload-preview { max-height: 160px; border-radius: var(--radius); margin-top: 10px; overflow: hidden; }
.upload-preview img { width: 100%; object-fit: cover; }

/* ---------- Confirmation screen ---------- */
.confirm-top { padding: 56px var(--pad) 0; max-width: 620px; margin: 0 auto; }
.confirm-check {
  width: 56px; height: 56px; border-radius: 999px; border: 1px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent);
  margin-bottom: 22px;
}
.confirm-details {
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: 20px 0; margin: 26px 0; display: flex; flex-direction: column; gap: 14px;
}
.confirm-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.confirm-row .k { font: 400 11px Jost; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }
.confirm-row .v { font: 400 15px Jost; text-align: right; }
.pill { display: inline-block; border: 1px solid var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 5px 14px; font: 300 13px Jost; }
.confirm-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; margin-bottom: 40px; }
.confirm-actions .btn.text { align-self: center; }
.confirm-photo { width: 100%; height: 200px; object-fit: cover; }
.link-copy-row { display: flex; gap: 10px; align-items: center; }
.link-copy-row input { flex: 1; font: 300 13px Jost; color: var(--ink-60); border: 1px solid var(--field); border-radius: var(--radius); padding: 12px; background: transparent; }

/* ---------- Manage/booking page ---------- */
.manage-wrap { max-width: 480px; margin: 0 auto; padding: 46px var(--pad) 60px; }
.manage-wrap .brand { text-align: center; margin-bottom: 30px; display: block; }
.badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font: 300 12.5px Jost; border: 1px solid var(--accent-soft); color: var(--accent-dark); }
.badge.cancelled { border-color: rgba(154, 74, 63, .35); color: var(--error); }
.badge.done { border-color: var(--line-strong); color: var(--ink-55); }

.error { color: var(--error); font-size: 14px; }

/* ---------- Overlay-free utility ---------- */
.center { text-align: center; }
.spacer-lg { height: 40px; }