@import url('tokens.css?v=20261021');
@import url('components.css?v=20261021');
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--color-ivory);color:var(--color-text);font:15px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:inherit}button,a,summary{cursor:pointer}button{color:inherit}a{color:var(--color-text)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:-.025em}h2{font-size:30px}h3{font-size:25px}p{margin-bottom:var(--space-4)}[hidden]{display:none!important}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600;color:var(--color-muted);margin-bottom:var(--space-2)}main{height:100dvh}
/* Welcome — the mascot and one clear service decision. */
.scene-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;background:var(--color-ivory)}.hero-top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;flex:0 0 80px;width:100%;height:80px;max-width:1180px;margin:0 auto;padding:10px 24px}.scene-logo{display:block;width:80px;height:64px;background:var(--color-text);mask:url('assets/logo-new.png') center/contain no-repeat;-webkit-mask:url('assets/logo-new.png') center/contain no-repeat}.scene-logo img{width:100%;height:100%;opacity:0}.scene-menu-wrap{position:relative}.scene-menu{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;border:0;border-radius:var(--radius-pill);background:var(--color-forest)}.scene-menu:hover{background:var(--color-forest-hover)}.scene-menu svg{display:block;width:24px;height:24px;flex-shrink:0}.scene-menu svg path{stroke:var(--color-surface);stroke-width:2;fill:none}
.cat-stage{position:relative;z-index:1;flex:1 1 0;height:auto;min-height:0;width:100%;max-width:700px;margin:0 auto;overflow:hidden;border-radius:0 0 48% 48%}.cat-stage svg{display:block;width:100%;height:100%;overflow:visible}#cat-orange stop:first-child{stop-color:var(--color-peach-strong)}#cat-orange stop:last-child{stop-color:var(--color-secondary-ochre)}.cat-face [stroke]{stroke:var(--color-text)}.cat-face [fill='#4b2d3a']{fill:var(--color-text)}.cat-paws{stroke:#a87743}.cat-paws path[fill='none']{stroke:#161213}#mask-pink stop:first-child{stop-color:var(--brand-primary)}#mask-pink stop:last-child{stop-color:var(--color-sage)}.sleep-mask>path:first-child{stroke:var(--brand-primary)}.sleep-mask>path:last-child{stroke:var(--brand-primary)}.cat-bedding>.bed-pillow{fill:var(--brand-primary)}.cat-bedding>path:nth-child(2){fill:var(--brand-primary)}.cat-bedding>path:last-child{stroke:var(--color-ivory)}.bath-foam{fill:var(--color-surface)}.bath-foam>path{fill:var(--color-peach)}.bath-bubbles{fill:var(--color-sage);stroke:var(--color-surface)}.sleep-sparkles{fill:var(--color-text)}
.scene-copy{position:relative;z-index:2;flex:0 0 auto;text-align:center;padding:8px 24px 18px;background:var(--color-ivory);color:var(--color-text)}.scene-copy:before{content:none}.scene-copy h1{font-family:var(--font-display);font-weight:400;color:var(--color-text);font-size:clamp(40px,6.3dvh,60px);line-height:1.02;letter-spacing:-.04em;margin:0 0 16px}.scene-copy>p{font-size:13px;line-height:1.65;color:var(--color-muted);margin:0 0 20px}.scene-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:500px;margin:0 auto}.scene-options button{min-height:52px;padding:12px 18px;border:1px solid #7b7279;border-radius:var(--radius-field);background:var(--color-surface);color:var(--color-text);font-size:15px;font-weight:600}.scene-options button:hover{background:var(--color-sage)}.scene-options button[aria-pressed=true]{background:var(--color-sage);border:2px solid var(--color-forest);padding:11px 17px}.scene-next{display:flex;flex-direction:column;gap:8px;max-width:500px;height:134px;margin:14px auto 0}.scene-next[hidden]{display:flex!important;visibility:hidden;pointer-events:none}.scene-next>p{min-height:34px;margin:0;color:var(--color-muted);font-size:12px;line-height:1.5}.scene-next .btn{width:100%;min-height:48px;height:48px;padding:12px 16px;font-size:14px}.scene-reset{display:block;width:fit-content;min-height:28px;height:28px;padding:0;border:0;background:transparent;color:var(--color-muted);font-size:12px;text-decoration:underline;text-underline-offset:4px;margin:0 auto}.scene-caption{display:block;margin-top:12px;color:var(--color-muted);font-size:9px;font-weight:500;letter-spacing:1.6px}
/* Shared dialog shell and independent content scrolling. */
dialog{padding:0;border:1px solid var(--border-subtle);border-radius:var(--radius-panel);width:min(640px,calc(100% - 24px));height:min(860px,92dvh);max-height:92dvh;overflow:hidden;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-dialog)}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#16121365;backdrop-filter:blur(3px)}.dialog-head,.info-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-shrink:0;padding:24px 24px 18px}.dialog-head h2,.info-head h2{font-size:30px;margin:0;color:var(--color-text)}.dialog-head .eyebrow,.info-head .eyebrow{font-size:9px;margin-bottom:7px}.circle{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:transparent;color:var(--color-text);font-size:24px;font-weight:400}.circle:hover{background:var(--color-sage)}#progress{padding:0 24px 18px;border-bottom:1px solid var(--color-line);flex-shrink:0}.progress-caption{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;font-size:12px;color:var(--color-muted)}.progress-bars{display:flex;gap:6px}.progress-bars span{height:3px;flex:1;border-radius:var(--radius-pill);background:var(--color-line)}.progress-bars span.active{background:var(--color-forest)}#form{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}#fields{flex:1;min-height:0;padding:20px 24px 24px;overflow-y:auto;overscroll-behavior:contain;scroll-padding:20px}.service-switch{margin:-6px 0 14px}#change-service{min-height:38px;padding:4px 0;border:0;background:transparent;color:var(--color-muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}
/* Reusable selection cards, fields and supporting notes. */
.package-options{display:grid;gap:12px;min-width:0;margin:0 0 24px;padding:0;border:0}.package-option{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);cursor:pointer}.package-option:has(input:checked){background:var(--bg-page);border:2px solid var(--color-selected-line);padding:15px}.package-option:focus-within{outline:3px solid #161213;outline-offset:3px}.package-option input{width:18px;height:18px;min-height:18px;margin:3px 0 0;flex-shrink:0;accent-color:var(--color-text)}.package-content{display:block;min-width:0;flex:1}.package-heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:14px;line-height:1.5}.package-heading strong{font-weight:600;color:var(--color-text)}.package-heading>span{font-weight:600;font-variant-numeric:tabular-nums}.package-heading small{font-size:11px;color:var(--color-muted);font-weight:400;white-space:nowrap}.package-description{display:block;margin-top:8px;font-size:13px;line-height:1.65;color:var(--color-muted)}.addons{margin:0 0 24px;padding:0 14px;border:1px solid var(--color-line);border-radius:var(--radius-card)}summary{min-height:52px;padding:14px 0;cursor:pointer;font-size:14px;font-weight:600;line-height:1.5;color:var(--color-text)}.addons summary{font-size:14px}.addon-option{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;font-size:14px;line-height:1.5}.addon-option input{width:20px;height:20px;min-height:20px;flex-shrink:0;accent-color:var(--color-text)}.field{margin-bottom:20px}.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--color-text)}.field-note,.fine{font-size:13px;line-height:1.7;color:var(--color-muted);margin:10px 0 20px}.notice{margin:0 0 24px;background:var(--bg-page)}.animal{padding-top:24px;margin-top:24px;border-top:1px solid var(--color-line)}.animal h3{font-size:24px;margin-bottom:20px;color:var(--color-text)}
/* One prominent primary action and a quiet estimate. */
.booking-bottom{flex-shrink:0;border-top:1px solid var(--color-line);padding:16px 24px max(16px,env(safe-area-inset-bottom));background:var(--color-surface)}.live-estimate{margin:0 0 12px;padding:0;border:0;background:transparent;color:var(--color-muted);font-size:12px;line-height:1.5}.live-estimate strong{font-size:23px;color:var(--color-text);font-weight:600;font-variant-numeric:tabular-nums}.live-estimate small{display:block;font-size:11px;margin-top:4px}.form-actions{display:flex;align-items:center;gap:10px}.form-actions .btn{flex:1}.form-actions .secondary{min-height:52px;padding-inline:14px;font-size:13px}#error:empty,#send-status:empty{display:none}#error{margin:0 0 10px;color:var(--color-error);font-size:13px}#send-status{margin:12px 0 0;color:var(--color-muted);font-size:12px;line-height:1.6}.field-error{margin:8px 0 0}.review-section{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--color-line)}.review-section h3{font-size:26px;color:var(--color-text);margin-bottom:18px}.review-section dl{margin:0}.review-row{display:grid;grid-template-columns:110px 1fr;gap:16px;margin:12px 0;font-size:14px;line-height:1.6}.review-row dt{color:var(--color-muted)}.review-row dd{margin:0;overflow-wrap:anywhere}.cost-review{padding:20px;border:0;border-radius:var(--radius-card);background:var(--color-sage);margin:0 0 24px}.review-total{font-size:30px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--color-text);margin:20px 0 10px}.cost-review .field-note{margin-bottom:0}
/* Information panels use the same surfaces and typography as booking. */
.info-dialog{width:min(660px,calc(100% - 24px));height:min(800px,92dvh)}.info-head{border-bottom:1px solid var(--color-line);align-items:flex-start}#info-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px;scroll-padding:20px}#info-content>section{max-width:none;padding:0;margin:0;border:0}#info-content>section>h2,#info-content .section-heading h2{display:none}.section-heading p{font-size:14px;color:var(--color-muted);margin:0 0 16px}.price-group{border-bottom:1px solid var(--color-line);padding-bottom:8px}.price-group>summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0}.price-group>summary:before{content:'+';width:14px;flex-shrink:0;font-weight:400}.price-group[open]>summary:before{content:'−'}.price-group>summary span{margin-left:auto;text-align:right;font-size:12px;font-weight:500;color:var(--color-muted)}.price-group>summary::-webkit-details-marker{display:none}.price-group>summary{list-style:none}.price-group>.btn{margin:12px 0 16px}.price-row{padding:18px 0;border-top:1px solid var(--color-line)}.price-row>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:14px}.price-row>div>strong{font-weight:600;color:var(--color-text)}.price-row>div>span{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.price-row small{display:block;font-size:11px;font-weight:400;color:var(--color-muted)}.price-row p{font-size:13px;line-height:1.7;color:var(--color-muted);margin:8px 0 0}.addon-list{margin-top:20px}.faq details{border-bottom:1px solid var(--color-line)}.faq details p{font-size:14px;line-height:1.7;color:var(--color-muted);padding-bottom:12px}.trust p,.contact>p{font-size:15px;line-height:1.75;color:var(--color-muted)}.contact-grid{display:grid;grid-template-columns:1fr;gap:24px}.address{font-size:15px;line-height:1.7}.contact-actions{display:flex;gap:10px;flex-wrap:wrap}.contact-link{font-size:13px;min-height:46px;padding:11px 14px}.qr-contact{display:flex;align-items:center;gap:18px}.qr-contact img{display:block;width:116px;height:116px;padding:12px;background:white;border:1px solid var(--color-line);border-radius:var(--radius-field);image-rendering:pixelated}.qr-contact p{max-width:130px;color:var(--color-muted);font-size:12px;margin:0}

/* Existing character transitions, preserved without new animation. */
.awake-eyes,.closed-eyes,.sleep-mask,.bath-foam,.bath-bubbles,.cat-bedding,.cat-paws,.sleep-sparkles,.cat-face{transition:opacity .65s ease,transform .85s cubic-bezier(.22,.68,.22,1);transform-box:fill-box;transform-origin:center}.closed-eyes,.sleep-mask,.bath-foam,.bath-bubbles,.cat-bedding,.cat-paws,.sleep-sparkles{opacity:0;pointer-events:none}.bath-foam{transform:translateY(24px) scale(.85)}.bath-bubbles{transform:translateY(40px) scale(.9)}.sleep-mask{transform:translateY(-40px) scale(.95)}.cat-bedding{transform:translateY(90px)}.cat-paws{transform:translateY(50px)}.sleep-sparkles{transform:translateY(22px)}.scene-hero[data-scene=grooming] .awake-eyes,.scene-hero[data-scene=hotel] .awake-eyes{opacity:0;transform:scaleY(.5)}.scene-hero[data-scene=grooming] .closed-eyes,.scene-hero[data-scene=hotel] .closed-eyes{opacity:1}.scene-hero[data-scene=grooming] .bath-foam,.scene-hero[data-scene=grooming] .bath-bubbles,.scene-hero[data-scene=grooming] .cat-paws,.scene-hero[data-scene=hotel] .sleep-mask,.scene-hero[data-scene=hotel] .cat-bedding,.scene-hero[data-scene=hotel] .cat-paws,.scene-hero[data-scene=hotel] .sleep-sparkles{opacity:1;transform:translateY(0) scale(1)}.scene-hero[data-scene=hotel] .cat-face{transform:translateY(-12px)}.bubble{transform-box:fill-box;transform-origin:center;animation:bubble-drift 4s ease-in-out infinite;animation-play-state:paused}.b2{animation-delay:-1s}.b3{animation-delay:-2s}.b4{animation-delay:-3s}.scene-hero[data-scene=grooming] .bubble{animation-play-state:running}@keyframes bubble-drift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}

/* iPhone-first composition. Short screens retain every control. */
@media(max-width:600px){.hero-top{padding-inline:22px;flex-basis:76px;height:76px}.scene-logo{width:72px;height:58px}.scene-menu{width:46px;height:46px}.cat-stage{width:100%;max-width:540px}.scene-copy{padding:4px 22px 18px}.scene-copy h1{font-size:clamp(40px,6.3dvh,56px)}.scene-copy>p{font-size:13px}.scene-options{gap:12px}.scene-next{height:138px}.scene-next>p{font-size:12px;min-height:36px}.scene-caption{font-size:8px}.dialog-head,.info-head{padding:20px 18px 16px;gap:12px}.dialog-head h2,.info-head h2{font-size:27px}.dialog-head .eyebrow,.info-head .eyebrow{font-size:9px}#progress{padding:0 18px 16px}#fields,#info-content{padding:20px 18px 24px}.package-option{padding:15px}.package-option:has(input:checked){padding:14px}.package-heading{display:block}.package-heading>span{display:block;margin-top:5px}.package-description{font-size:13px}.booking-bottom{padding:14px 18px max(14px,env(safe-area-inset-bottom))}.form-actions .btn{font-size:13px;padding-inline:12px}.form-actions .secondary{padding-inline:10px}.review-row{grid-template-columns:88px 1fr;gap:12px;font-size:13px}.review-section h3{font-size:25px}.cost-review{padding:16px}.price-row>div{gap:12px;font-size:14px}.price-row>div>span{max-width:48%;flex-shrink:0}.contact-actions{flex-direction:column;align-items:stretch}.contact-link{font-size:13px}.live-estimate strong{font-size:22px}}
@media(max-height:700px){.hero-top{flex-basis:64px;height:64px;padding-block:5px}.scene-logo{width:64px;height:52px}.scene-menu{height:44px;width:44px;padding:10px}.scene-copy{padding-top:2px;padding-bottom:12px}.scene-copy h1{font-size:clamp(32px,6dvh,40px);line-height:.98;margin-bottom:12px}.scene-copy>p{display:none}.scene-options button{min-height:46px}.scene-next{height:112px;margin-top:10px;gap:6px}.scene-next>p{font-size:11px;min-height:30px}.scene-next .btn{min-height:44px;height:44px;padding-block:10px}.scene-reset{font-size:11px;height:24px;min-height:24px}.scene-caption{display:none}.dialog-head{padding-block:12px}.dialog-head .eyebrow{display:none}#progress{padding-bottom:12px}.booking-bottom{padding-block:10px}.live-estimate small{display:none}}
@media(max-width:360px){.form-actions:has(#whatsapp:not([hidden])){flex-wrap:wrap}.form-actions #whatsapp{flex-basis:100%}.dialog-head h2,.info-head h2{font-size:24px}.scene-options button{padding-inline:12px;font-size:14px}.scene-options button[aria-pressed=true]{padding-inline:11px}.price-group>summary{gap:8px;font-size:13px}.price-group>summary span{font-size:11px}.live-estimate strong{font-size:20px}}
@media(min-width:900px){.scene-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:100px minmax(0,1fr);padding:0 max(32px,calc((100vw - 1180px)/2))}.hero-top{grid-column:1/-1;grid-row:1;height:100px;max-width:none;padding:14px 0;flex-basis:auto}.scene-logo{width:98px;height:78px}.scene-menu{width:50px;height:50px}.cat-stage{grid-column:2;grid-row:2;align-self:center;width:100%;height:min(70dvh,610px);max-width:640px;margin:0 0 0 auto;border-radius:0 0 47% 47%;overflow:hidden}.scene-copy{grid-column:1;grid-row:2;align-self:center;text-align:left;padding:0 40px 24px 0;background:transparent;max-width:540px}.scene-copy h1{font-size:clamp(62px,6.4vw,88px);line-height:1.03;margin-bottom:24px}.scene-copy>p{font-size:16px;line-height:1.8;margin-bottom:32px}.scene-copy>p br{display:initial}.scene-options{margin:0;gap:14px}.scene-options button{min-height:56px}.scene-next{margin:20px 0 0;height:140px;gap:10px}.scene-next>p{font-size:13px;min-height:36px;max-width:430px}.scene-next .btn{min-height:52px;height:52px}.scene-reset{margin:0;font-size:12px}.scene-caption{margin-top:22px;font-size:9px}.scene-copy h1 br{display:initial}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-hero *{animation:none!important;transition:none!important}}

/* Color guide v1.0 — semantic roles, existing layout and behavior retained. */
.scene-options button[aria-pressed=true]{border-color:var(--color-primary);color:var(--color-text)}.scene-options button[aria-pressed=true]::before{content:"✓ ";color:var(--color-text)}
.package-option:focus-within{outline:2px solid var(--color-text);outline-offset:2px;box-shadow:0 0 0 2px white}
.bath-bubbles{fill:var(--color-secondary-pink)}.sleep-mask>path:last-child{stroke:var(--color-secondary-pink)}
.scene-options button:hover{background:var(--color-bg)}

/* Latest supplied guide: pink identity, teal/periwinkle service choices. */
#cat-orange stop:first-child,#cat-orange stop:last-child{stop-color:var(--brand-primary)}
.cat-paws{stroke:var(--color-text)}.cat-paws path[fill='none']{stroke:var(--color-text)}
#mask-pink stop{stop-color:var(--accent-lavender)}.sleep-mask>path:first-child,.sleep-mask>path:last-child{stroke:var(--accent-lavender)}
.cat-bedding>.bed-pillow{fill:var(--accent-pale-lavender)}.cat-bedding>path:nth-child(2){fill:var(--accent-lavender)}.bath-bubbles{fill:var(--accent-mint)}.bath-foam>path{fill:var(--accent-pale-lavender)}
.scene-menu{background:var(--brand-secondary)}.scene-menu svg path{stroke:var(--color-text)}.scene-menu:hover{background:var(--accent-mint)}
.scene-options button{background:var(--brand-secondary);border-color:transparent;color:var(--color-text)}.scene-options button+button{background:var(--accent-lavender)}
.scene-options button:hover{background:var(--accent-mint)}.scene-options button[aria-pressed=true]{background:var(--brand-primary);border-color:var(--color-text)}
#scene-links button:hover,#scene-links button:focus-visible{background:var(--brand-primary)}
.package-option:has(input:checked){background:var(--accent-mint)}.progress-bars span.active{background:var(--brand-secondary)}

/* Apricot companion: independent nested layers keep mood morphs intact. */
#cat-orange stop:first-child,#cat-orange stop:last-child{stop-color:#e6a669}
.eye-blink{transform-box:fill-box;transform-origin:50% 100%;animation:cat-blink 6.6s ease-in-out infinite;animation-play-state:paused}
.eye-pupils{animation:cat-look 9s ease-in-out infinite;animation-play-state:paused}
.scene-hero:not([data-scene=hotel]) .eye-blink,.scene-hero:not([data-scene=hotel]) .eye-pupils{animation-play-state:running}
.scene-hero[data-scene=grooming] .awake-eyes{opacity:1;transform:none}.scene-hero[data-scene=grooming] .closed-eyes{opacity:0}
@keyframes cat-blink{0%,35%,39%,74%,78%,100%{transform:scaleY(1)}37%,76%{transform:scaleY(.035)}}
@keyframes cat-look{0%,12%,46%,58%,92%,100%{transform:translateX(0)}20%,36%{transform:translateX(-20px)}66%,82%{transform:translateX(20px)}}
.sleep-dream-text{animation:cat-dream 3.2s ease-in-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:center}
.sleep-z{animation:cat-dream-glow 3.2s ease-in-out infinite;animation-play-state:paused}.sleep-z:nth-child(2){animation-delay:-.45s}.sleep-z:nth-child(3){animation-delay:-.9s}.sleep-z:nth-child(4){animation-delay:-1.35s}.sleep-z:nth-child(5){animation-delay:-1.8s}
.scene-hero[data-scene=hotel] .sleep-dream-text,.scene-hero[data-scene=hotel] .sleep-z{animation-play-state:running}
@keyframes cat-dream{0%,100%{transform:translate(0,4px) rotate(-2deg)}50%{transform:translate(9px,-13px) rotate(2deg)}}
@keyframes cat-dream-glow{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.eye-blink,.eye-pupils,.sleep-dream-text,.sleep-z{animation:none!important}}

/* Fullscreen navigation on every viewport; native dialog manages keyboard focus. */
#scene-links.menu-overlay{position:fixed;inset:0;z-index:50;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg-page);color:var(--color-text);box-shadow:none;overflow:hidden}
#scene-links[open]{display:flex;flex-direction:column}
#scene-links::backdrop{background:var(--bg-page);backdrop-filter:none}
.menu-overlay-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:24px;padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));background:transparent;color:var(--color-text)}
.menu-overlay-head .scene-logo{width:80px;height:64px;background:var(--color-text);flex-shrink:0}
.menu-close{display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:48px;padding:8px 0 8px 16px;border:0;background:transparent;color:var(--color-text);font:500 14px var(--font-body);text-transform:uppercase;letter-spacing:.06em}
.menu-close span{font-size:28px;line-height:1;font-weight:400}
.menu-overlay-main{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:center;align-items:center;gap:40px;overflow-y:auto;overscroll-behavior:contain;padding:24px}
.menu-overlay-links{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:900px}
#scene-links .menu-overlay-links button{display:block;width:auto;max-width:100%;min-height:52px;margin:0;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--color-text);font:700 clamp(28px,5.6vw,64px)/1.12 var(--font-body);letter-spacing:-.045em;text-align:center;text-transform:uppercase;text-wrap:balance}
#scene-links .menu-overlay-links button:hover{color:#326f68;background:transparent}
.menu-whatsapp{display:inline-flex;align-items:center;gap:20px;min-height:48px;padding:12px 22px;border:1px solid var(--color-text);border-radius:999px;background:transparent;color:var(--color-text);font-size:14px;font-weight:600;text-decoration:none!important}
.menu-whatsapp:hover{background:var(--accent-mint)}
.menu-location{flex-shrink:0;margin:0;padding:16px 24px max(24px,env(safe-area-inset-bottom));text-align:center;font-size:10px;letter-spacing:.18em;color:var(--color-muted)}
@media(max-width:600px){.menu-overlay-head{padding-inline:22px}.menu-overlay-head .scene-logo{width:72px;height:58px}.menu-overlay-main{gap:32px;padding:20px}.menu-overlay-links{gap:16px}#scene-links .menu-overlay-links button{font-size:clamp(28px,8vw,44px)}}
@media(max-height:600px){.menu-overlay-head{padding-block:8px}.menu-overlay-head .scene-logo{height:48px;width:60px}.menu-overlay-main{gap:20px;padding-block:12px}.menu-overlay-links{gap:4px}#scene-links .menu-overlay-links button{font-size:clamp(24px,5.2vh,36px);min-height:44px}.menu-location{padding-block:12px}}
#scene-links .menu-close:hover,#scene-links .menu-close:focus-visible{background:transparent;color:var(--color-text);text-decoration:underline;text-underline-offset:5px}

/* Reference-inspired navigation: Menu / centered brand / Book. */
.hero-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hero-top>.scene-logo{grid-column:2;grid-row:1;justify-self:center;width:80px;height:64px}
.hero-top>.scene-menu-wrap{grid-column:1;grid-row:1;justify-self:start}
.hero-top .scene-menu{width:auto;min-width:56px;min-height:44px;height:auto;border-radius:0;background:transparent;color:var(--color-text);padding:10px 0;font:600 13px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.035em}
.hero-top .scene-menu svg{display:none}.hero-top .scene-menu:hover{background:transparent;text-decoration:underline;text-underline-offset:5px}
.header-book{grid-column:3;grid-row:1;justify-self:end;min-height:44px;padding:10px 0 10px 12px;border:0;border-radius:0;background:transparent;color:var(--color-text);font:600 13px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.035em}.header-book:hover{text-decoration:underline;text-underline-offset:5px}
/* Overlay reveal and staggered links mirror the reference without its loading screen. */
#scene-links[open]{animation:overlay-reveal .55s cubic-bezier(.22,.68,.22,1) both}
#scene-links[open] .menu-overlay-links button{animation:menu-link-in .45s ease both;animation-delay:.18s}
#scene-links[open] .menu-overlay-links button:nth-child(2){animation-delay:.23s}#scene-links[open] .menu-overlay-links button:nth-child(3){animation-delay:.28s}#scene-links[open] .menu-overlay-links button:nth-child(4){animation-delay:.33s}
@keyframes overlay-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-link-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Booking is a fullscreen sequence with one visible question per screen. */
#booking,#service-picker{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg-page);box-shadow:none}
#booking[open],#service-picker[open]{display:flex;flex-direction:column;animation:booking-reveal .4s cubic-bezier(.22,.68,.22,1) both}
#booking.is-closing{animation:booking-dismiss .23s ease both}
#booking .dialog-head{position:relative;display:block;flex-shrink:0;width:100%;padding:88px 24px 18px;text-align:center}
#booking .dialog-head .eyebrow{display:none}#booking .dialog-head h2{max-width:760px;margin:0 auto;font:700 clamp(28px,4vw,46px)/1.12 var(--font-body);letter-spacing:-.035em;text-wrap:balance}
#booking #close{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:48px;height:48px;border:0;border-radius:0;font-size:36px;background:transparent}
#booking .dialog-head:before{content:'';position:absolute;left:0;right:0;top:72px;height:1px;background:var(--color-line)}
#booking #progress{width:100%;max-width:700px;margin:0 auto;padding:0 24px 12px;border:0}.question-progress{height:2px;background:var(--color-line);overflow:hidden}.question-progress span{display:block;height:100%;background:var(--brand-secondary);transition:width .25s ease}
#booking #fields{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:700px;margin:0 auto;padding:24px;gap:0}
#booking #fields>.field,#booking .question-package,#booking .single-animal,#booking #booking-addons{width:100%;max-width:560px}
#booking .single-animal{margin:0;padding:0;border:0}#booking .field{margin-bottom:0}#booking .field label{font-size:13px;font-weight:500;margin-bottom:10px;color:var(--color-muted)}
#booking .field input,#booking .field select{min-height:58px;border-radius:999px;border-color:var(--color-field-line);padding:15px 20px;background:transparent;font-size:16px}
#booking .question-hint,#booking .question-package .package-description{max-width:560px;margin:16px 0 0;font-size:13px;line-height:1.65;color:var(--color-muted)}
#booking #booking-addons{margin:0;padding:8px 16px;background:var(--color-surface)}#booking #booking-addons .field-note{font-size:12px;margin:14px 0}
#booking .booking-bottom{width:100%;max-width:700px;margin:0 auto;padding:16px 24px max(24px,env(safe-area-inset-bottom));border:0;background:transparent}
#booking .live-estimate{font-size:11px;text-align:center;margin-bottom:16px}#booking .live-estimate strong{font-size:20px}#booking .live-estimate small{font-size:10px}
#booking .form-actions{justify-content:center}#booking .form-actions .btn{flex:0 1 320px;border-radius:999px;min-height:52px}#booking .form-actions .secondary{border-radius:999px;background:transparent}
#booking #error{text-align:center}#booking.is-review #fields{justify-content:flex-start;align-items:stretch}#booking.is-review .review-section{width:100%}
#booking .question-enter{animation:question-in .32s ease both}#booking[data-direction=back] .question-enter{animation-name:question-back}
#service-picker{align-items:center;justify-content:center}.picker-close{position:absolute;right:22px;top:18px;border:0;background:transparent;font-size:32px}.picker-content{width:min(100%,620px);padding:32px 24px;text-align:center}.picker-content h2{font:700 clamp(32px,6vw,52px)/1.1 var(--font-body);letter-spacing:-.035em}.picker-content>p{color:var(--color-muted)}.picker-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}.picker-options .secondary{display:flex;gap:18px;justify-content:space-between;min-height:64px;border-color:var(--color-field-line);background:white;color:var(--color-text)}.picker-options .secondary:hover{background:var(--accent-mint)}
@keyframes booking-reveal{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes booking-dismiss{to{opacity:0;transform:translateY(24px)}}
@keyframes question-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes question-back{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.hero-top>.scene-logo{width:70px;height:58px}#booking .dialog-head{padding:92px 22px 20px}#booking .dialog-head h2{font-size:30px}#booking #fields{padding:20px 22px}#booking .booking-bottom{padding-inline:22px}.picker-options{grid-template-columns:1fr}}
@media(max-height:650px){#booking .dialog-head{padding:66px 20px 12px}#booking .dialog-head:before{top:54px}#booking #close{top:3px}#booking .dialog-head h2{font-size:25px}#booking #fields{padding:12px 20px}#booking .booking-bottom{padding-block:10px}#booking .live-estimate{margin-bottom:10px}#booking .live-estimate small{display:none}}
@media(prefers-reduced-motion:reduce){#booking,#service-picker,#scene-links,#scene-links .menu-overlay-links button,#booking .question-enter{animation:none!important}.question-progress span{transition:none}}
#flow-change-service{min-height:32px;padding:0;border:0;background:transparent;color:var(--color-muted);font:inherit;text-decoration:underline;text-underline-offset:3px}
#scene-links.is-closing{animation:overlay-dismiss .28s ease both}#scene-links.is-closing .menu-overlay-main{opacity:0;transition:opacity .18s ease}
@keyframes overlay-dismiss{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
#booking #fields{justify-content:safe center}
.question-package-info{margin-top:16px}.question-package-info summary{font-size:13px;font-weight:500;color:var(--color-muted);min-height:44px;padding:10px 0}.question-package-info .package-description,#question-package-policy{font-size:12px;line-height:1.7;color:var(--color-muted)}#question-package-policy{margin-top:16px}

/* Distinct palette surfaces for navigation and the complete booking journey. */
#scene-links.menu-overlay,#scene-links::backdrop{background:var(--brand-secondary)}
#booking,#service-picker,#booking::backdrop,#service-picker::backdrop{background:var(--accent-lavender)}
#scene-links,#booking,#service-picker{--color-muted:#30292b;--color-field-line:#30292b;--color-line:#30292b;--color-error:#761b18;color:var(--text-main)}
#scene-links .menu-overlay-links button:hover,#scene-links .menu-overlay-links button:focus-visible{color:var(--text-main);background:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
#scene-links .menu-location{color:var(--text-main)}
#booking .question-progress{background:rgba(22,18,19,.22)}
#booking .question-progress span{background:var(--text-main)}
#booking .dialog-head:before{background:rgba(22,18,19,.24)}
#booking .field input::placeholder,#booking .field textarea::placeholder{color:#413a3e;opacity:1}
#booking .field input[aria-invalid=true],#booking .field select[aria-invalid=true]{background:var(--color-error-soft);border-color:var(--color-error)}
#booking .form-actions .secondary:hover{background:var(--accent-pale-lavender);color:var(--text-main)}
#booking #booking-addons{border-color:var(--color-field-line)}
#booking .question-package-info summary:hover{color:var(--text-main)}
#service-picker .picker-options .secondary{border-color:var(--text-main);color:var(--text-main);background:var(--bg-page)}
#service-picker .picker-options .secondary:hover{background:var(--accent-mint);color:var(--text-main)}

/* Shared motion rhythm: short feedback, gentle screens, no layout jumps. */
:root{--motion-fast:180ms;--motion-control:220ms;--motion-screen:420ms;--ease-refined:cubic-bezier(.22,.61,.36,1)}
button,a,input,select,textarea{transition:background-color var(--motion-control) ease,color var(--motion-fast) ease,border-color var(--motion-control) ease,box-shadow var(--motion-fast) ease}
.ui-arrow{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#scene-links[open]{animation-duration:480ms;animation-timing-function:var(--ease-refined)}
#scene-links.is-closing{animation-duration:320ms}
#scene-links[open] .menu-overlay-links button{animation-duration:380ms;animation-timing-function:var(--ease-refined)}
#booking[open],#service-picker[open]{animation-duration:var(--motion-screen);animation-timing-function:var(--ease-refined)}
#booking.is-closing{animation-duration:300ms}
#booking .question-enter{animation-duration:320ms;animation-timing-function:var(--ease-refined)}
.question-progress span{transition:width 360ms var(--ease-refined)}
#information[open]{animation:booking-reveal 360ms var(--ease-refined) both}
summary{list-style:none;position:relative;padding-right:26px}summary::-webkit-details-marker{display:none}
summary::after{content:'';display:block;position:absolute;right:3px;top:20px;width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform 240ms var(--ease-refined)}
details[open]>summary::after{transform:rotate(225deg)}details:not(.disclosure-expanded)[style]>summary::after{transform:rotate(45deg)}
.price-group>summary:before{content:none}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161213' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-position:right 18px center!important;background-size:18px 18px!important;background-repeat:no-repeat!important;padding-right:48px!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}

/* Flat social marks occupy the previously reserved welcome action area. */
.scene-socials{position:absolute;left:24px;right:24px;bottom:64px;display:flex;justify-content:center;align-items:center;gap:22px}
.scene-socials .social-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:9px;border-radius:12px;text-decoration:none;background:transparent}
.scene-socials svg{display:block;width:28px;height:28px;fill:currentColor}
.scene-socials .social-instagram{color:var(--text-main)}.scene-socials .social-tiktok{color:var(--text-main)}.scene-socials .social-whatsapp{color:var(--text-main)}
.scene-socials .social-instagram svg{color:var(--brand-primary)}.scene-socials .social-tiktok svg{color:var(--accent-lavender)}.scene-socials .social-whatsapp svg{color:var(--brand-secondary)}
.scene-socials .social-icon:hover{background:var(--accent-mint)}
.scene-hero:not([data-scene=welcome]) .scene-socials{display:none}
@media(max-height:700px){.scene-socials{bottom:42px;gap:18px}}
@media(min-width:900px){.scene-socials{justify-content:flex-start;left:0;bottom:64px}}
.scene-socials .social-instagram{background:var(--brand-primary)}.scene-socials .social-tiktok{background:var(--accent-lavender)}.scene-socials .social-whatsapp{background:var(--brand-secondary)}
.scene-socials .social-icon svg{color:var(--text-main)}