/* X-CLEAN public motion · progressive enhancement, no booking delays. */
:root{--xc-ease:cubic-bezier(.2,.75,.2,1);--xc-spring:cubic-bezier(.2,.9,.25,1.2)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:xc-page-out .18s ease both}
::view-transition-new(root){animation:xc-page-in .32s var(--xc-ease) both}
@keyframes xc-page-out{to{opacity:0}}
@keyframes xc-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Generous spacing and depth retain the existing brand and layout. */
.hero{background:radial-gradient(ellipse at 78% 30%,#00c96b24,transparent 48%),radial-gradient(ellipse at 5% 90%,#174a443b,transparent 48%),linear-gradient(140deg,#0d151d,#202d38 65%,#101a22)}
.hero-service-photo{box-shadow:0 28px 65px #0004;isolation:isolate}
.hero-service-photo img,.story-photo img,.gallery-card img,.home-photos img{transform-origin:center;backface-visibility:hidden}
.hero-service-photo span{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.service-card,.value-card,.route-card,.home-service-card{transition:box-shadow .35s var(--xc-ease),border-color .3s,transform .35s var(--xc-ease)}
.nav{transition:background .3s,box-shadow .3s,border-color .3s}
html.xc-scrolled .nav{background:rgba(14,23,30,.94);border-color:#ffffff25;box-shadow:0 14px 45px #0003}
.nav-cta,.btn-primary,.btn-ghost,.chapter-book,.next,.back,.package,.extra,.service-categories button,.payment-option,.billing-type,.time-slot,.day,.slot,.theme-toggle,.menu-toggle{touch-action:manipulation;transition:background .25s,border-color .25s,box-shadow .3s,transform .25s var(--xc-spring)}
.nav-cta,.btn-primary,.next{background-image:linear-gradient(120deg,#00b962,#0fd67b);box-shadow:0 8px 24px #00c96b2e,inset 0 1px 0 #ffffff30}
.btn-primary span,.btn-ghost span,.route-card b i{display:inline-block;transition:transform .3s var(--xc-ease)}
.workspace{gap:28px}
.package-list,.extra-list{gap:12px}
.package,.extra{border-radius:18px}
.package.selected,.extra.selected,.payment-option.selected,.billing-type.selected{box-shadow:0 0 0 1px #00c96b55,0 10px 28px #00a95912}
.progress{overflow:hidden}.progress i{transition:width .55s var(--xc-ease);background-image:linear-gradient(90deg,#009b55,#18dc85)}
.summary{box-shadow:0 18px 50px #0b25171a}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 4px #00c96b17;transition:border-color .2s,box-shadow .2s}
.xc-tap-wave{position:fixed;z-index:10001;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#72f6b64d 0,#00c96b2e 45%,transparent 70%);border:1px solid #43e89955;contain:strict}
@media(hover:hover) and (pointer:fine){
 .service-card:hover,.value-card:hover,.route-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px #173c2814;border-color:#77cfa3}
 .package:hover,.extra:hover{transform:translateY(-2px);box-shadow:0 9px 24px #173c2810}
 .btn-primary:hover span,.btn-ghost:hover span,.route-card:hover b i{transform:translateX(4px)}
 .nav-cta:hover,.btn-primary:hover,.next:not(:disabled):hover{box-shadow:0 12px 32px #00c96b40}
}
@media(prefers-reduced-motion:no-preference){
 .hero-grid>div:first-child{animation:xc-page-in .8s var(--xc-ease) both}
 .hero-service-visual{animation:xc-hero-in 1s var(--xc-ease) both}
 .nav.open .nav-links{animation:xc-menu-in .3s var(--xc-ease) both}
 .menu-toggle span{transition:transform .25s,opacity .2s}
 .nav.open .menu-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
 .nav.open .menu-toggle span:nth-child(2){opacity:0}
 .nav.open .menu-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
 .sidebar{transition:transform .4s var(--xc-ease),opacity .3s}
 .package:active,.extra:active,.next:not(:disabled):active,.btn-primary:active,.nav-cta:active{scale:.98}
}
@keyframes xc-hero-in{from{opacity:0;translate:0 26px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes xc-menu-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.workspace{gap:18px}.xc-tap-wave{opacity:.7}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .xc-tap-wave{display:none}
}