/* Client experience: editorial beauty photography beside a direct booking flow. */
.client-mode { background: #f7f6f8; color: #342735; }
.client-page { max-width: 1272px; margin: 0 auto; padding: 0 48px; --client-ink: #342735; --client-muted: #776e7b; --client-line: #e8e3e9; }
.client-page *, .client-page *::before, .client-page *::after { box-sizing: border-box; }
.client-page svg { width: 22px; height: 22px; flex: 0 0 auto; }
.client-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--client-line); }
.client-logo { display: inline-flex; align-items: center; color: var(--client-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 48px; line-height: 1; letter-spacing: -3px; text-decoration: none; }
.client-logo span { font: 20px system-ui, sans-serif; color: var(--brand); margin: -14px 0 0 5px; }
.client-topbar-label { display: flex; align-items: center; gap: 9px; color: var(--client-muted); font-size: 14px; }
.client-topbar-label svg { width: 18px; height: 18px; }
.client-layout { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 1.4fr); gap: 64px; padding: 44px 0 52px; align-items: start; }
.client-story { min-width: 0; }
.client-photo { position: relative; margin: 0; border-radius: 120px 120px 16px 16px; overflow: hidden; aspect-ratio: 4/5.4; background: #302332; }
.client-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 35%; }
.client-photo::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #1b1425bb); pointer-events: none; }
.client-photo figcaption { position: absolute; z-index: 1; inset: auto 30px 30px; color: white; }
.client-overline { display: block; font-size: 11px; line-height: 1.6; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; }
.client-photo .client-overline { color: #ebe0e9; font-size: 12px; letter-spacing: 1.5px; }
.client-photo p { margin: 14px 0 0; font: 36px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.7px; }
.client-photo em { font-weight: 400; color: #e4cadb; }
.client-studio-info { display: flex; align-items: center; gap: 14px; padding: 23px 0; }
.client-studio-monogram { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border: 1px solid #ddd3df; border-radius: 50%; font: 26px Georgia, serif; }
.client-studio-info h2 { font-size: 16px; margin: 0; font-weight: 600; }
.client-studio-info p { font-size: 13px; line-height: 1.6; margin: 5px 0 0; color: var(--client-muted); overflow-wrap: anywhere; }
.client-policy { display: flex; gap: 12px; border-top: 1px solid var(--client-line); padding-top: 22px; }
.client-policy-icon { color: #8b768a; }
.client-policy h3 { font-size: 14px; font-weight: 600; margin: 1px 0 7px; }
.client-policy p { margin: 0; color: var(--client-muted); font-size: 14px; line-height: 1.6; }
.client-intro { padding: 2px 0 26px; }
.client-intro .client-overline { color: #806b81; }
.client-intro h1 { font: 42px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -1.3px; margin: 11px 0 13px; }
.client-intro p { color: var(--client-muted); margin: 0; font-size: 15px; line-height: 1.6; }
.client-progress { display: flex; padding: 0 0 25px; margin: 0; list-style: none; gap: 0; }
.client-progress li { display: flex; align-items: center; gap: 8px; color: #8a808c; font-size: 13px; flex: 1; white-space: nowrap; }
.client-progress li:not(:last-child)::after { content: ''; height: 1px; background: #e4dfe5; flex: 1; margin: 0 12px 0 4px; }
.client-progress li > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid #e0d9e2; border-radius: 50%; font-size: 12px; background: white; }
.client-progress li[aria-current=step] { color: var(--client-ink); font-weight: 600; }
.client-progress li[aria-current=step] > span { background: var(--client-ink); color: white; border-color: var(--client-ink); }
.client-progress li.is-done > span { background: #e9e3ec; border-color: #e9e3ec; color: #57435b; }
.client-progress svg { width: 15px; height: 15px; }
.client-form { background: white; border: 1px solid var(--client-line); border-radius: 18px; padding: 28px; box-shadow: 0 10px 40px #39223804; }
.client-form-section { padding: 0; margin: 0; border: 0; min-width: 0; }
.client-form-section + .client-form-section { border-top: 1px solid #eee9ee; margin-top: 24px; padding-top: 24px; }
.client-section-heading { display: flex; gap: 10px; align-items: center; margin-bottom: 19px; }
.client-section-heading > span { font-size: 12px; color: #a08f9f; font-weight: 500; }
.client-section-heading h2 { font-size: 16px; letter-spacing: -.3px; margin: 0; font-weight: 600; }
.client-two-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.client-form label { gap: 8px; font-size: 14px; font-weight: 500; color: #5d505f; }
.client-form input, .client-form select { min-height: 48px; padding: 12px; font-size: 14px; border: 1px solid #e1dbe4; border-radius: 9px; background-color: #fcfbfd; color: var(--client-ink); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.client-form input:focus, .client-form select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); outline: 0; }
.client-form input::placeholder { color: #a096a5; }
.client-field-note { color: var(--client-muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.client-date-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; font-size: 14px; color: #5d505f; }
.client-form .client-date-input input { min-height: 34px; padding: 5px 8px; border-radius: 6px; font-size: 13px; background: white; }
.client-date-strip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 7px; }
.client-date { display: grid; gap: 5px; justify-items: center; padding: 10px 2px; border-radius: 9px; border-color: var(--client-line); color: var(--client-muted); font-weight: 400; background: white; }
.client-date span { font-size: 11px; line-height: 1.3; }
.client-date strong { font-size: 19px; line-height: 1.4; font-weight: 500; color: var(--client-ink); }
.client-date[aria-pressed=true] { background: var(--client-ink); border-color: var(--client-ink); color: #e0d6e3; }
.client-date[aria-pressed=true] strong { color: white; }
.client-date:hover:not([aria-pressed=true]) { border-color: #ad97b1; background: #faf7fb; }
.client-slot-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 23px 0 12px; }
.client-slot-heading h3 { margin: 0; font-weight: 500; font-size: 14px; }
.client-slot-heading > span { font-size: 12px; color: var(--client-muted); }
.client-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 272px; overflow: auto; scrollbar-width: thin; padding: 1px; }
.client-slot-placeholder { display: flex; grid-column: 1/-1; gap: 13px; align-items: center; justify-content: center; padding: 21px 16px; min-height: 86px; background: #f9f7fa; border: 1px dashed #e1d9e4; border-radius: 10px; color: #968798; }
.client-slot-placeholder p { margin: 0; font-size: 13px; line-height: 1.6; max-width: 300px; color: var(--client-muted); }
.client-slot { display: grid; gap: 4px; padding: 12px 6px; text-align: center; border: 1px solid #e6dfe9; background: white; border-radius: 9px; font-weight: 400; }
.client-slot strong { font-size: 17px; font-weight: 600; color: var(--client-ink); }
.client-slot > span { font-size: 13px; color: #67586b; }
.client-slot small { font-size: 12px; color: var(--client-muted); }
.client-slot small span { padding: 0 2px; }
.client-slot:hover { background: #f9f6fb; border-color: #aa91b1; }
.client-slot[aria-pressed=true] { background: color-mix(in srgb, var(--brand) 5%, white); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.client-reservation-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #e4dce8; padding: 18px; margin: 24px 0; border-radius: 11px; background: #f7f3f9; }
.client-reservation-summary span { font-size: 10px; letter-spacing: 1px; color: #89738d; }
.client-reservation-summary h3 { margin: 6px 0 4px; font-size: 16px; font-weight: 600; }
.client-reservation-summary p { font-size: 13px; line-height: 1.6; margin: 0; color: #786780; }
.client-total { text-align: right; flex-shrink: 0; }
.client-total > span { display: block; letter-spacing: 0; font-size: 12px; margin-bottom: 6px; }
.client-total strong { font-size: 24px; letter-spacing: -1px; font-weight: 500; }
#client-contacts > .client-two-columns { margin-top: 16px; }
.client-page [hidden] { display: none !important; }
.client-confirm.primary { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 16px 18px; margin-top: 22px; border-color: var(--client-ink); background: var(--client-ink); color: white; border-radius: 10px; font-size: 14px; font-weight: 500; }
.client-confirm.primary:hover { background: #4b3650; border-color: #4b3650; }
.client-error { font-size: 14px; color: #ad274c; margin: 0; line-height: 1.6; }
.client-error:not(:empty) { margin-top: 18px; padding: 12px; border-radius: 8px; background: #fff3f5; }
.client-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--client-line); padding: 22px 0 28px; font-size: 12px; color: #968b99; }
.client-footer strong { font: 21px Georgia, serif; letter-spacing: -.9px; margin-left: 4px; color: #67546e; }
.client-empty, .client-receipt { border: 1px solid var(--client-line); border-radius: 18px; background: white; padding: 35px; text-align: center; }
.client-empty h2, .client-receipt h2 { font: 31px/1.2 Georgia, serif; letter-spacing: -.7px; margin: 14px 0; }
.client-empty p, .client-receipt p { color: var(--client-muted); font-size: 15px; line-height: 1.7; }
.client-receipt-check { width: 60px; height: 60px; border-radius: 50%; background: #f0e9f3; color: #6f4e7b; display: grid; place-items: center; margin: 0 auto 24px; }
.client-receipt-check svg { width: 28px; height: 28px; }
.client-receipt-details { display: grid; grid-template-columns: 1fr 1fr; text-align: left; margin: 26px 0; border-top: 1px solid var(--client-line); border-bottom: 1px solid var(--client-line); gap: 20px; padding: 22px 0; }
.client-receipt-details span { display: block; color: var(--client-muted); font-size: 12px; margin-bottom: 8px; }
.client-receipt-details strong { font-size: 15px; line-height: 1.6; font-weight: 500; }
.client-another { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; padding: 12px 18px; border-color: #ded2e4; }
.client-retry { grid-column: 1/-1; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1050px) {
  .client-page { padding: 0 30px; }
  .client-layout { gap: 30px; grid-template-columns: minmax(240px,.85fr) minmax(0,1.4fr); }
  .client-form { padding: 22px; }
  .client-intro h1 { font-size: 36px; }
  .client-photo figcaption { left: 22px; right: 22px; }
  .client-photo p { font-size: 31px; }
  .client-progress li { font-size: 12px; gap: 5px; }
  .client-progress li:not(:last-child)::after { margin: 0 6px; }
}
@media (max-width: 780px) {
  .client-page { padding: 0 20px; }
  .client-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 24px; }
  .client-story { display: contents; }
  .client-photo { grid-row: 1; aspect-ratio: auto; height: 180px; border-radius: 16px; }
  .client-photo img { object-position: 50% 31%; }
  .client-photo::after { inset: 0; background: linear-gradient(90deg,#231324c7,transparent); }
  .client-photo figcaption { inset: 24px; display: flex; flex-direction: column; justify-content: center; }
  .client-photo p { font-size: 28px; margin-top: 8px; }
  .client-photo p br:last-of-type { display: none; }
  .client-booking { grid-row: 2; }
  .client-studio-info { grid-row: 3; padding: 0; }
  .client-policy { grid-row: 4; padding-top: 20px; }
  .client-intro { padding-bottom: 20px; }
  .client-intro h1 { font-size: 36px; }
  .client-progress { padding-bottom: 20px; }
  .client-progress li { font-size: 13px; gap: 8px; }
  .client-progress li:not(:last-child)::after { margin: 0 10px; }
  .client-form { padding: 24px; }
  .client-topbar { padding: 21px 0; }
  .client-logo { font-size: 42px; }
}
@media (max-width: 460px) {
  .client-page { padding: 0 16px; }
  .client-topbar-label { font-size: 12px; }
  .client-photo { height: 150px; }
  .client-photo p { font-size: 26px; }
  .client-layout { gap: 24px; }
  .client-intro h1 { font-size: 32px; }
  .client-intro p { font-size: 14px; }
  .client-form { padding: 20px 16px; border-radius: 14px; }
  .client-two-columns { grid-template-columns: 1fr; gap: 14px; }
  .client-progress li { font-size: 11px; gap: 5px; }
  .client-progress li > span { width: 23px; height: 23px; flex-basis: 23px; }
  .client-progress li:not(:last-child)::after { margin: 0 5px; }
  .client-date-strip { gap: 4px; }
  .client-date { padding: 9px 0; }
  .client-date strong { font-size: 17px; }
  .client-date span { font-size: 10px; }
  .client-section-heading h2 { font-size: 15px; }
  .client-date-heading { font-size: 13px; }
  .client-form input, .client-form select { font-size: 16px; }
  .client-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-total strong { font-size: 22px; }
  .client-reservation-summary { padding: 14px; }
  .client-receipt { padding: 25px 20px; }
}
@media (prefers-reduced-motion: reduce) { .client-form input, .client-form select { transition: none; } }