*{box-sizing:border-box}
body{margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-body)}
a{color:inherit}

/* Header: compact color band instead of a full-height split hero -
   keeps brand color present without dominating the page. */
header{background:var(--color-primary);color:#fff;padding:clamp(28px,4.5vw,40px) clamp(20px,5vw,56px) clamp(20px,3vw,32px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative}
.back{color:inherit;text-decoration:none;opacity:.8;font-size:14px;font-weight:600}
.back:hover{opacity:1}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;opacity:.7;margin:0 0 10px}
header .hero-copy{max-width:640px;margin:22px auto 0}
header h1{font:600 clamp(30px,4.2vw,46px)/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 10px}
header #intro{margin:0;max-width:480px;line-height:1.6;opacity:.85;font-size:15px}

header #account-bar{position:relative;font-size:13px}
header #account-toggle{border:0;background:transparent;padding:0;color:#fff;opacity:.85;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:opacity .15s}
header #account-toggle:hover{opacity:1}
header #account-login-form{position:absolute;top:100%;right:0;margin-top:10px;width:min(320px,90vw);display:grid;gap:0 14px;grid-template-columns:1fr 1fr;padding:20px 22px;background:#fff;border:1px solid #e3e7e3;border-radius:16px;box-shadow:0 24px 48px -24px rgba(0,0,0,.4);z-index:20}
header #account-login-form[hidden]{display:none}
header #account-login-form label{margin-bottom:12px;color:#4b5563;font-size:12px}
header #account-login-form input{background:#fff;border-color:#e3e7e3;color:var(--color-text)}
header #account-login-form input:focus{outline:none;border-color:var(--color-primary)}
header #account-login-form .error{grid-column:1/-1;margin-bottom:10px}
header #account-login-form button.primary{grid-column:1/-1;width:auto;justify-self:start}
header #account-login-form a{grid-column:1/-1;font-size:12px;color:#6b7280}
header #account-login-form a:hover{color:var(--color-text)}
header .account-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#fff;font-size:13px}
header .account-confirm button{border:0;background:transparent;padding:0;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px}
header .account-confirm button:hover{color:#fff}
#logged-in-as{background:#f3f4f1;border-radius:10px;padding:12px 14px;margin-bottom:20px;font-size:13px}

main{max-width:1100px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,5vw,32px) 90px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:clamp(32px,5vw,48px)}
.steps span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:#8a938d;text-align:center}
.steps i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef1ee;color:#8a938d;font-style:normal;font-weight:700;font-size:12px;transition:background .15s,color .15s}
.steps b{font-weight:700}
.steps span.active i{background:var(--color-primary);color:#fff}
.steps span.active{color:var(--color-primary)}

.step h2{font:600 clamp(24px,3.4vw,32px)/1.15 var(--font-display);margin:0 0 24px;letter-spacing:-.01em}

/* Step 1 - services as large tappable tiles */
.service-category{margin-bottom:26px}
.service-category h3{font:700 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:#6b7280;margin:0 0 12px}
.choices,.service-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.service{border:1.5px solid #e3e7e3;border-radius:16px;padding:22px;text-align:left;background:#fff;display:grid;gap:10px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.service:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(0,0,0,.3)}
.service-image{width:calc(100% + 44px);margin:-22px -22px 0;border-radius:16px 16px 0 0;height:150px;object-fit:cover}
.service strong{font:600 20px/1.25 var(--font-display)}
.service small{justify-self:start;color:color-mix(in srgb,var(--color-primary) 80%,black);background:color-mix(in srgb,var(--color-primary) 12%,white);border-radius:999px;padding:4px 10px;font-weight:700;font-size:12px}
.service p{color:#5b6660;margin:0;font-size:14px;line-height:1.5}
.service-subcategory{margin:16px 0 6px}
.service-subcategory h4{font:700 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:#8a938d;margin:0 0 10px;padding-left:2px}

/* Location step - its own first step when there's more than one location (or
   a single closed one worth explaining). Big, one-per-row tappable bars. */
.location-rows{display:grid;gap:16px}
.location-row{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;border:1.5px solid #e3e7e3;border-radius:20px;background:#fff;padding:28px 32px;font:inherit;color:var(--color-text);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.location-row:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.location-row-main{display:grid;gap:6px}
.location-row strong{font:600 24px var(--font-display)}
.location-row .location-address{font-size:14px;color:#6b7280}
.location-row .location-note{color:#8c5a04;background:#fff0d5;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;white-space:nowrap}
.location-row .location-note--info{color:#4b5563;background:#eef1ee}
.location-row .location-arrow{font-size:22px;color:var(--color-primary);flex-shrink:0}
.location-row.disabled{cursor:not-allowed;opacity:.7}
.location-row.disabled:hover{border-color:#e3e7e3;transform:none;box-shadow:none}

/* Booking-disabled notice + info-only service cards - the location is still
   browsable with prices, just not bookable online (see resolveBookingEnabled). */
.booking-disabled-notice{background:#eef1ee;color:#4b5563;border-radius:14px;padding:16px 20px;margin-bottom:22px;font-size:14px;line-height:1.6}
.booking-disabled-notice a{color:var(--color-primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.service--info{cursor:default}
.service--info:hover{border-color:#e3e7e3;transform:none;box-shadow:none}

/* Step 2 - date, staff picker, slots grouped by time of day - all large color-coded boxes */
label{display:grid;gap:8px;font-size:12px;font-weight:700;margin-bottom:18px;color:#4b544e}
input,select{width:100%;border:1.5px solid #e3e7e3;border-radius:10px;background:#fff;padding:13px 14px;font:inherit;color:var(--color-text)}
input:focus,select:focus{outline:none;border-color:var(--color-primary)}

.field-block{margin-bottom:22px}
.field-label{display:block;font-size:12px;font-weight:700;color:#4b544e;margin-bottom:10px}

/* Date step - modern month calendar: prev/next nav, closed/fully-booked days
   struck through and inert, available days tappable, today marked with a dot. */
.calendar{border:1.5px solid #e3e7e3;border-radius:16px;padding:16px 16px 18px;background:#fff}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month{font:700 15px var(--font-body);text-transform:capitalize;color:var(--color-text)}
.cal-nav{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid #e3e7e3;background:#fff;font-size:16px;line-height:1;color:var(--color-text);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.cal-nav:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}
.cal-nav:disabled{opacity:.3;cursor:default}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.calendar-weekdays span{text-align:center;font-size:11px;font-weight:700;color:#8a938d;text-transform:uppercase;letter-spacing:.04em}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1.5px solid transparent;border-radius:10px;background:transparent;font:600 13px var(--font-body);color:var(--color-text);cursor:pointer;transition:transform .15s,background .15s,color .15s}
.cal-day--outside{visibility:hidden}
.cal-day--past{color:#c7cdc9;cursor:default}
.cal-day--closed{color:#c7cdc9;text-decoration:line-through;text-decoration-color:#d8dcd8;cursor:default}
.cal-day--available{background:color-mix(in srgb,var(--color-primary) 8%,white);color:color-mix(in srgb,var(--color-primary) 85%,black)}
.cal-day--available:hover{background:color-mix(in srgb,var(--color-primary) 16%,white);transform:translateY(-1px)}
.cal-day--today:not(.cal-day--selected)::after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--color-secondary)}
.cal-day--selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.cal-day:disabled{pointer-events:none}
.staff-choices{display:flex;flex-wrap:wrap;gap:10px}
.staff-option{display:flex;align-items:center;gap:10px;border:1.5px solid #e3e7e3;border-radius:14px;background:#fff;padding:10px 18px 10px 10px;min-height:52px;font:700 14px var(--font-body);color:var(--color-text);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.staff-option:hover{border-color:var(--color-primary);transform:translateY(-1px)}
.staff-option .avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 14%,white);color:color-mix(in srgb,var(--color-primary) 85%,black);font-size:13px;font-weight:800;flex-shrink:0}
.staff-option.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.staff-option.selected .avatar{background:rgba(255,255,255,.22);color:#fff}

.slot-group{margin-bottom:22px}
.slot-group h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;font-weight:700;margin:0 0 10px}
.slot-group .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{border:1.5px solid transparent;border-radius:14px;padding:18px 10px;min-height:64px;display:grid;place-items:center;font:700 16px/1 var(--font-body);text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s}
.slot:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(0,0,0,.4)}

.slot-group--morning .slot{background:color-mix(in srgb,var(--color-primary) 12%,white);border-color:color-mix(in srgb,var(--color-primary) 24%,white);color:color-mix(in srgb,var(--color-primary) 85%,black)}
.slot-group--morning .slot:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

.slot-group--afternoon .slot{background:color-mix(in srgb,var(--color-secondary) 22%,white);border-color:color-mix(in srgb,var(--color-secondary) 38%,white);color:color-mix(in srgb,var(--color-secondary) 55%,black)}
.slot-group--afternoon .slot:hover{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}

.slot-group--evening{--accent:color-mix(in srgb,var(--color-primary) 55%,var(--color-secondary) 45%)}
.slot-group--evening .slot{background:color-mix(in srgb,var(--accent) 16%,white);border-color:color-mix(in srgb,var(--accent) 32%,white);color:color-mix(in srgb,var(--accent) 75%,black)}
.slot-group--evening .slot:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Step 3 - details */
.text-button{border:0;background:transparent;padding:0;margin-bottom:25px;color:#6b7280;font-weight:600;cursor:pointer;transition:color .15s}
.text-button:hover{color:var(--color-primary)}
.summary{background:color-mix(in srgb,var(--color-primary) 6%,white);border:1px solid color-mix(in srgb,var(--color-primary) 18%,white);border-radius:16px;padding:20px 22px;margin-bottom:26px;line-height:1.7;font-size:15px}
.summary strong{font:600 18px var(--font-display)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fields label:last-child{grid-column:1/-1}
.primary{border:0;border-radius:10px;background:var(--color-primary);color:#fff;padding:15px 20px;font-weight:750;width:100%;cursor:pointer;transition:opacity .15s}
.primary:hover{opacity:.92}

.error{background:#fef2f0;color:#9b302b;padding:12px 14px;border-radius:10px;margin-bottom:20px;font-size:14px}
.empty{color:#5b6660}

/* Step 4 - success */
.success{text-align:center}
.success>span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin:0 auto 25px;background:var(--color-secondary);font-size:30px;color:#fff}
.success a{display:inline-block;margin-top:20px;color:var(--color-primary);font-weight:750;text-decoration:none}
.success a:hover{text-decoration:underline}

@media(max-width:760px){
  header .hero-copy{margin-top:26px}
  main{padding-left:16px;padding-right:16px}
  .choices,.service-group{grid-template-columns:1fr}
  .slot-group .slots{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  header{padding:18px 18px 26px}
  .steps b{display:none}
  .fields{grid-template-columns:1fr}
  .fields label:last-child{grid-column:auto}
  header #account-login-form{right:-6px}
}