/* A single restrained motion language: selection -> detail -> confirmation.
   Content stays visible and usable when JavaScript or motion is unavailable. */
:root{--motion-fast:180ms;--motion-base:360ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
.intro-copy{margin:18px 0 0;font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:-.02em}
.booking-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin:0 0 38px;max-width:720px}
.booking-flow li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:12px;color:var(--color-text-muted);isolation:isolate}
.booking-flow li:not(:last-child)::after{content:"";height:1px;background:var(--color-border);position:absolute;left:32px;right:15px;top:15px;z-index:-1}
.booking-flow li span{background:var(--color-bg);border:1px solid var(--color-border);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:none;font-size:10px;font-variant-numeric:tabular-nums}
.booking-flow li{background:var(--color-bg)}
.booking-flow li[aria-current] span,.booking-flow li.is-complete span{border-color:var(--color-primary-strong);color:var(--color-primary-strong)}
.booking-flow li[aria-current]{color:var(--color-text);font-weight:bold}
.booking-flow li.is-complete::after{background:var(--color-primary-strong)}
.header nav a{position:relative;border-bottom:0!important}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:left}
.header nav a[aria-current]::after{transform:scaleX(1)}
.barber{box-shadow:0 4px 14px rgba(16,25,49,.025)}
.barber[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-primary-strong),0 8px 22px rgba(16,25,49,.09)}
.ticket{box-shadow:0 12px 36px rgba(16,25,49,.045)}
.service,.slot,.primary,.appointment button{touch-action:manipulation}
#form-status:not(:empty){border-left:3px solid var(--color-primary);border-radius:0 6px 6px 0}
@media(prefers-reduced-motion:no-preference){
 .barber,.service,.slot,.primary,.appointment button{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-base) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
 .barber .work-image img{transition:transform 550ms var(--motion-ease)}
 .header nav a::after{transition:transform var(--motion-base) var(--motion-ease)}
 .booking-flow li span,.booking-flow li::after{transition:background-color var(--motion-base) ease,border-color var(--motion-base) ease,color var(--motion-base) ease}
 .primary:active:not(:disabled),.slot:active,.service:active:not(:disabled){transform:translateY(1px)}
 @media(hover:hover) and (pointer:fine){
  .barber:hover{transform:translateY(-3px)}
  .barber:hover .work-image img{transform:scale(1.035)}
  .service:hover:not(:disabled),.slot:hover:not([aria-pressed=true]){background:var(--color-primary-subtle);border-color:var(--color-primary)}
  .primary:hover:not(:disabled){background:var(--brand-800);box-shadow:0 5px 16px rgba(16,25,49,.14)}
 }
}
@media(max-width:650px){.booking-flow{margin-bottom:28px}.booking-flow li{display:block;font-size:10px}.booking-flow li span{margin-bottom:7px}.booking-flow li:not(:last-child)::after{right:10px}.intro-copy{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}