/* demos/wolk/wolk.css */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');
:root{
--color-bg:#FFF8F0;--color-surface:#FFFFFF;--color-text:#2B2D42;--color-divider:color-mix(in srgb,#2B2D42 12%,transparent);
--color-accent:#2A9D8F;--color-accent-100:#E3F4F1;--color-accent-200:#C2E7E1;--color-accent-300:#8FD1C6;--color-accent-400:#56B8AA;--color-accent-500:#2A9D8F;--color-accent-600:#1F8276;--color-accent-700:#17695F;--color-accent-800:#114E47;--color-accent-900:#0B3530;
--peach:#F4A261;--peach-100:#FDEBDC;--peach-200:#FAD3B3;--peach-600:#E08A45;--peach-800:#8A4A16;
--butter:#FFE5A5;--butter-100:#FFF4D6;--coral:#E63946;--coral-700:#B8212D;--wa:#25D366;--wa-700:#128C4A;
--font-heading:"Nunito",system-ui,sans-serif;--font-heading-weight:800;--font-body:"DM Sans",system-ui,sans-serif;
--radius-sm:10px;--radius-md:16px;--radius-lg:24px;
--shadow-sm:0 2px 8px color-mix(in srgb,#2B2D42 6%,transparent);--shadow-md:0 10px 30px color-mix(in srgb,#2B2D42 9%,transparent);--shadow-lg:0 24px 60px color-mix(in srgb,#2B2D42 14%,transparent);
--ink-soft:#55586F;--wrap:1200px}
html{scroll-behavior:smooth}
body{font-size:17px;line-height:1.6;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-0.01em;text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,64px);line-height:1.05;font-weight:900}
h2{font-size:clamp(30px,3.8vw,44px);line-height:1.1}
h3{font-size:22px}
p{text-wrap:pretty}
a{color:var(--color-accent-700)}a:hover{color:var(--color-accent-800)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--ink-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-700)}
.section{padding:96px 0}.section-tight{padding:64px 0}
.sec-head{display:flex;flex-direction:column;gap:10px;max-width:640px;margin-bottom:44px}
.sec-head.center{margin-inline:auto;text-align:center;align-items:center}
.sec-head h2{margin:0}.sec-head p{margin:0;color:var(--ink-soft);font-size:18px}
/* buttons (Industry .btn, softened) */
.btn{min-height:48px;padding:12px 22px;border-radius:999px;font-family:var(--font-heading);font-weight:800;font-size:16px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;color:var(--color-text)}
.btn:hover{transform:translateY(-2px) scale(1.02)}.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--peach);color:var(--color-text);box-shadow:0 8px 20px color-mix(in srgb,var(--peach) 35%,transparent)}
.btn-primary:hover{background:var(--peach-600);color:var(--color-text)}.btn-primary:active{background:var(--peach-600)}
.btn-teal{background:var(--color-accent-600);color:#fff}.btn-teal:hover{background:var(--color-accent-700);color:#fff}
.btn-secondary{background:var(--color-surface);border:1.5px solid var(--color-divider);color:var(--color-text)}
.btn-secondary:hover{background:var(--color-accent-100);border-color:var(--color-accent-300);color:var(--color-text)}
.btn-ghost{color:var(--color-accent-700);padding-inline:12px}
.btn-sos{background:var(--coral);color:#fff;min-height:42px;padding:8px 16px;font-size:15px}
.btn-sos:hover{background:var(--coral-700);color:#fff}
.btn-sm{min-height:40px;padding:8px 16px;font-size:15px}
.btn .wa-dot{color:var(--wa-700)}
/* tags */
.tag{border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
.tag-butter{background:var(--butter);color:#6B4A00}.tag-peach{background:var(--peach-100);color:var(--peach-800)}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
/* cards */
.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:28px;gap:12px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-title{font-size:20px}.card-body{font-size:15.5px;opacity:1;color:var(--ink-soft)}
/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:14px;font-weight:700;color:var(--color-text);margin:0}
.input{min-height:50px;border-radius:14px;background:#fff;border:1.5px solid var(--color-divider);font-size:16px;padding:10px 14px}
.input:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-100)}
.input[aria-invalid="true"]{border-color:var(--coral)}
.err{font-size:13.5px;color:var(--coral-700);font-weight:500}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:8px}
/* header */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);transition:box-shadow .2s}
.topbar.scrolled{box-shadow:0 1px 0 var(--color-divider)}
.nav{max-width:var(--wrap);margin:0 auto;padding:14px 24px;gap:28px}
.nav-links{display:flex;gap:26px;margin:0 auto}
.nav-links a{font-weight:500;font-size:15.5px}
.nav .menu-btn{display:none}
/* logo */
.logo{display:inline-flex;align-items:baseline;font-family:var(--font-heading);font-weight:900;font-size:32px;color:var(--color-accent-600);text-decoration:none;letter-spacing:-0.02em;line-height:1}
.logo:hover{color:var(--color-accent-700)}.nav .logo{font-size:32px;color:var(--color-accent-600)}.nav .logo:hover{color:var(--color-accent-700)}
.logo .paw-o{display:inline-block;width:.66em;height:.66em;margin:0 .02em;transform-origin:50% 90%}
.logo:hover .paw-o{animation:wag .7s ease-in-out}
@keyframes wag{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
/* blobs */
.blob{border-radius:62% 38% 54% 46%/48% 58% 42% 52%}
.blob-2{border-radius:42% 58% 38% 62%/58% 40% 60% 42%}
/* hero */
.hero{padding:40px 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1 em{font-style:normal;color:var(--color-accent-600)}
.hero-sub{font-size:19px;color:var(--ink-soft);max-width:520px;margin:18px 0 30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:end}
.hero-art .bg{position:absolute;inset:4% 0 0 6%;background:var(--butter)}
.hero-art .bg2{position:absolute;width:38%;height:38%;right:-4%;top:-2%;background:var(--color-accent-200)}
.hero-art .photo{position:absolute;inset:10% 6% 6% 12%;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-art .chip{position:absolute;background:#fff;border-radius:18px;padding:12px 16px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;z-index:2}
.trust-strip{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:#fff;border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.trust-item{display:flex;align-items:center;gap:12px;padding:6px 10px;font-weight:500;font-size:15.5px}
.trust-item b{font-family:var(--font-heading);font-size:20px;font-weight:900;display:block;line-height:1.1}
.ico-bubble{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--color-accent-100);color:var(--color-accent-700)}
.ico-bubble.peach{background:var(--peach-100);color:var(--peach-800)}.ico-bubble.butter{background:var(--butter);color:#6B4A00}.ico-bubble.coral{background:#FDE3E5;color:var(--coral-700)}
.ico-bubble.lg{width:72px;height:72px;border-radius:24px}
/* needs */
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.need{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;padding:30px 26px;min-height:250px}
.need .go{margin-top:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:800;color:var(--color-accent-700)}
.need.urgent .go{color:var(--coral-700)}
.need:hover .ico-bubble{animation:bob .6s ease}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}
/* services halves */
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.half{border-radius:32px;padding:36px}
.half.clinic{background:var(--color-accent-100)}.half.spa{background:var(--peach-100)}
.half-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.half-head h3{margin:0;font-size:28px}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svc{padding:20px;gap:8px;border-radius:20px}
.svc .card-title{font-size:17.5px}.svc .card-body{font-size:14.5px}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:14.5px}
.svc-foot .price{font-weight:700}
.svc-foot a{font-weight:700;text-decoration:none}
/* before/after */
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;user-select:none;touch-action:pan-y;box-shadow:var(--shadow-md);background:#eee}
.ba .layer{position:absolute;inset:0}
.ba .after{clip-path:inset(0 0 0 var(--pos))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;pointer-events:none;z-index:3}
.ba .knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:grid;place-items:center;color:var(--color-accent-700)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba input:focus-visible+.handle .knob{outline:3px solid var(--color-accent);outline-offset:3px}
.ba .lbl{position:absolute;top:14px;z-index:2;pointer-events:none}
.ba-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ba-tab{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;padding:10px 18px;min-height:44px;border-radius:999px;background:#fff;color:var(--color-text);box-shadow:var(--shadow-sm)}
.ba-tab[aria-pressed="true"]{background:var(--color-accent-600);color:#fff}
.ba-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
/* team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.member{padding:14px 14px 22px;gap:6px}
.member .ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden;margin-bottom:10px;position:relative}
.member .yrs{position:absolute;left:10px;bottom:10px;z-index:2}
.member .note{font-size:14.5px;color:var(--ink-soft);margin:6px 0 0;padding-top:10px;border-top:1px dashed var(--color-divider)}
/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.why{background:var(--color-accent-800);color:#fff;border-radius:40px;padding:72px 56px}
.why .eyebrow{color:var(--butter)}.why h2{color:#fff}.why .sec-head p{color:#D4ECE8}
.why .card{background:color-mix(in srgb,#fff 8%,transparent);box-shadow:none;color:#fff}
.why .card-body{color:#D4ECE8}.why .ico-bubble{background:var(--butter);color:#6B4A00}
/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{padding:32px;gap:14px;position:relative}
.plan.hot{background:var(--color-accent-700);color:#fff;box-shadow:var(--shadow-lg);transform:translateY(-10px)}
.plan.hot .card-body,.plan.hot li{color:#E2F2EF}
.plan .amt{font-family:var(--font-heading);font-weight:900;font-size:48px;line-height:1}
.plan .amt small{font-size:16px;font-weight:700;opacity:.75}
.plan ul{list-style:none;padding:0;margin:4px 0 8px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.plan li svg{flex:none;margin-top:3px;color:var(--color-accent-600)}.plan.hot li svg{color:var(--butter)}
.plan .badge{position:absolute;top:-14px;left:32px}
.wellness{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--butter-100);border-radius:var(--radius-lg);padding:28px 32px}
.wellness ul{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:8px 0 0;font-size:15px}
.wellness li{display:flex;gap:6px;align-items:center}
/* testimonials */
.tcar{position:relative}
.ttrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 4px 24px;scroll-behavior:smooth}
.ttrack::-webkit-scrollbar{display:none}
.tcard{scroll-snap-align:start;padding:16px 16px 24px}
.tcard .ph{aspect-ratio:1/1;border-radius:18px;overflow:hidden;margin-bottom:6px}
.tcard blockquote{margin:0;font-size:16px;line-height:1.55}
.stars{display:flex;gap:2px;color:#E0A100}
.tnav{display:flex;gap:10px}
.tnav button{width:48px;height:48px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer;display:grid;place-items:center;color:var(--color-text)}
.tnav button:hover{background:var(--color-accent-100)}
/* tips */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tip{padding:14px 14px 24px;text-decoration:none;color:inherit}
.tip .ph{aspect-ratio:16/10;border-radius:18px;overflow:hidden;margin-bottom:8px}
.tip .card-title,.tip .card-body,.tip .card-meta{padding:0 8px}
/* reminder */
.remind{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;background:var(--peach-100);border-radius:40px;padding:56px}
.remind form{background:#fff;border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-md);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.remind form .full{grid-column:1/-1}
.choice-row{display:flex;gap:8px;flex-wrap:wrap}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice>span{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:10px 16px;border-radius:14px;border:1.5px solid var(--color-divider);background:#fff;cursor:pointer;font-weight:500;transition:all .15s}
.choice input:checked+span{border-color:var(--color-accent-600);background:var(--color-accent-100);color:var(--color-accent-800);font-weight:700}
.choice input:focus-visible+span{outline:3px solid var(--color-accent);outline-offset:2px}
/* location */
.loc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
.map{border-radius:var(--radius-lg);overflow:hidden;min-height:420px;position:relative;box-shadow:var(--shadow-sm)}
.hours{display:flex;flex-direction:column}
.hours div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--color-divider);font-size:16px}
.hours div:last-child{border:0}
.open-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px}
.open-badge i{width:9px;height:9px;border-radius:50%;background:currentColor}
.open-badge.on{background:#DFF5E7;color:#11643A}.open-badge.on i{animation:pulse 1.8s infinite}
.open-badge.off{background:#F1EEEA;color:#5A5650}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
/* footer */
.footer{background:var(--color-text);color:#E7E6EE;margin-top:96px;padding:64px 0 120px;border-radius:40px 40px 0 0}
.footer a{color:#fff;text-decoration:none}.footer a:hover{color:var(--butter)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.footer h4{color:#fff;font-size:17px;margin-bottom:14px}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.footer .logo{color:#7FD3C7}
.footer .sos{display:inline-flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--coral) 22%,transparent);border-radius:16px;padding:12px 16px;margin-top:16px}
.footer .sos b{color:#fff}
.demo-note{margin-top:44px;padding-top:22px;border-top:1px solid #ffffff22;font-size:14px;color:#BEBDCB;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#ffffff14}
/* mobile bar */
.mbar{display:none}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* deco */
.deco{position:absolute;color:var(--color-accent-300);opacity:.55;pointer-events:none}
/* booking */
.book-shell{max-width:860px;margin:0 auto;padding:40px 24px 80px}
.progress{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.progress-bar{height:10px;border-radius:999px;background:var(--color-accent-100);overflow:hidden}
.progress-bar i{display:block;height:100%;background:var(--color-accent-600);border-radius:999px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.progress-steps{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--ink-soft)}
.progress-steps span.on{color:var(--color-accent-700)}
.step-card{background:#fff;border-radius:32px;padding:40px;box-shadow:var(--shadow-md)}
.step-card h1{font-size:clamp(30px,4vw,42px);margin-bottom:6px}
.pet-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.ptype{position:relative}
.ptype input{position:absolute;opacity:0;width:0;height:0}
.ptype span{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 12px;border-radius:24px;border:2px solid var(--color-divider);cursor:pointer;font-family:var(--font-heading);font-weight:800;font-size:18px;transition:all .2s}
.ptype span:hover{border-color:var(--color-accent-300)}
.ptype input:checked+span{border-color:var(--color-accent-600);background:var(--color-accent-100);transform:translateY(-3px)}
.ptype input:focus-visible+span{outline:3px solid var(--color-accent);outline-offset:3px}
.svc-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.svc-pick .ptype span{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px;gap:14px;font-size:17px}
.svc-pick .ptype small{display:block;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-soft)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0 24px}
.cal button{border:0;cursor:pointer;font:inherit;border-radius:16px;padding:10px 4px;min-height:64px;background:var(--color-accent-100);color:var(--color-accent-800);display:flex;flex-direction:column;align-items:center;gap:2px}
.cal button b{font-family:var(--font-heading);font-size:20px;font-weight:900}
.cal button small{font-size:12px;font-weight:700;text-transform:uppercase}
.cal button:disabled{background:#F2EEE9;color:#9C988F;cursor:not-allowed}
.cal button[aria-pressed="true"]{background:var(--color-accent-600);color:#fff}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.slots button{border:1.5px solid var(--color-accent-300);background:#fff;color:var(--color-accent-800);border-radius:14px;min-height:48px;font:inherit;font-weight:700;cursor:pointer}
.slots button:hover:not(:disabled){background:var(--color-accent-100)}
.slots button[aria-pressed="true"]{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.slots button:disabled{border-color:#E7E2DB;color:#A7A39B;text-decoration:line-through;cursor:not-allowed}
.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:32px}
.summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 16px;border-radius:16px;background:#E9F9EF}
.toggle input{width:22px;height:22px;accent-color:var(--wa-700)}
.confirm{text-align:center;position:relative;overflow:hidden}
.paws{position:absolute;inset:0;pointer-events:none}
.paws svg{position:absolute;color:var(--peach);opacity:0;animation:pawstep 3.2s ease forwards}
@keyframes pawstep{0%{opacity:0;transform:scale(.4) rotate(var(--r))}15%{opacity:.9;transform:scale(1) rotate(var(--r))}75%{opacity:.9}100%{opacity:.25;transform:scale(1) rotate(var(--r))}}
.confirm .big{width:120px;height:120px;border-radius:50%;margin:8px auto 16px;background:var(--butter);display:grid;place-items:center;color:var(--peach-800);animation:pop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.ticket{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left;background:var(--color-bg);border-radius:20px;padding:20px;margin:24px 0}
.ticket div small{display:block;font-size:13px;color:var(--ink-soft);font-weight:500}
.ticket div b{font-family:var(--font-heading);font-size:18px}
/* profile */
.prof-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;background:#fff;border-radius:32px;padding:28px;box-shadow:var(--shadow-sm)}
.prof-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;margin-top:22px}
.table th{font-size:12.5px}.table td{font-size:15px;padding:12px 8px}.table th{padding:10px 8px}
.timeline{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.empty{text-align:center;padding:28px;border-radius:20px;background:var(--color-bg);color:var(--ink-soft)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--color-text);color:#fff;padding:12px 20px;border-radius:999px;z-index:90;font-weight:500;box-shadow:var(--shadow-lg)}
/* responsive */
.intro-card{margin-top:26px;background:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;max-width:560px}
.intro-q{font-family:var(--font-heading);font-weight:800;font-size:17px}
.intro-row{display:flex;gap:10px;flex-wrap:wrap}.intro-row .input{flex:1 1 180px;width:auto}
.intro-row .choice>span{padding:10px 14px}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plan-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--color-bg);animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.plan-cta{min-height:40px;white-space:nowrap}
@media (max-width:560px){.plan-list li{grid-template-columns:auto minmax(0,1fr)}.plan-cta{grid-column:1/-1;width:100%}}
.feel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.worries{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.worry{position:relative}.worry input{position:absolute;opacity:0;width:0;height:0}
.worry span{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer;font-weight:500;font-size:17px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.worry span svg{color:var(--color-accent-700)}
.worry span:hover{transform:translateX(4px)}
.worry input:checked+span{background:var(--color-accent-700);color:#fff;font-weight:700}.worry input:checked+span svg{color:var(--butter)}
.worry input:focus-visible+span{outline:3px solid var(--color-accent);outline-offset:3px}
.answer{min-height:320px;display:grid}
.answer-card,.answer-empty{background:var(--butter-100);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:16px;justify-content:center;position:relative;animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.answer-card::before{content:"";position:absolute;left:-10px;top:56px;width:24px;height:24px;background:var(--butter-100);transform:rotate(45deg);border-radius:4px}
.answer-empty{background:transparent;border:2px dashed var(--color-divider);align-items:center;text-align:center;animation:none}
.answer-who{display:flex;align-items:center;gap:12px}
.answer-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;display:block}
.answer-text{font-family:var(--font-heading);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.35;margin:0;text-wrap:pretty}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dots{display:inline-flex;gap:5px;padding:6px 0}.dots i{width:8px;height:8px;border-radius:50%;background:var(--color-accent-400);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.big-dots i{width:12px;height:12px}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.why .card{position:relative}.why .card.asked{background:color-mix(in srgb,var(--butter) 18%,transparent);box-shadow:0 0 0 2px var(--butter)}
.asked-tag{position:absolute;top:-12px;right:16px}
.companion{position:fixed;left:20px;bottom:20px;z-index:55;max-width:380px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;background:#fff;border-radius:24px 24px 24px 6px;padding:14px 12px 14px 14px;box-shadow:var(--shadow-lg);animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.comp-av{width:44px;height:44px;border-radius:50%;background:var(--color-accent-100);display:grid;place-items:center;font-size:30px;line-height:0}
.comp-av .paw-o{width:24px;height:24px;margin:0;animation:wag 2.4s ease-in-out infinite}
.comp-from{font-size:13px;font-weight:700;color:var(--color-accent-700)}
.comp-line{margin:2px 0 0;font-size:15.5px;line-height:1.45;animation:rise .4s ease}
.comp-x{border:0;background:transparent;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
.comp-x:hover{background:var(--color-bg)}
/* responsive */
/* pages */
.page-hero{padding:48px 0 24px}
.cta-band{background:var(--color-accent-800);color:#fff;border-radius:40px;padding:48px 56px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}.cta-band h2{color:#fff}
.cta-band .btn-secondary{background:#fff}
.story{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.story li{display:flex;flex-direction:column;gap:14px}
.story-y{font-family:var(--font-heading);font-weight:900;font-size:40px;color:var(--peach-600);line-height:1}
.seg.visit-seg{border:0;background:#fff;border-radius:999px;padding:6px;box-shadow:var(--shadow-sm);gap:4px;margin-top:8px}
.seg-btn{border:0;background:transparent;font:inherit;font-weight:700;font-size:16px;min-height:48px;padding:10px 20px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--color-text)}
.seg-btn.on{background:var(--color-accent-600);color:#fff}.seg-btn:not(.on):hover{background:var(--color-accent-100)}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px}
.step-in{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.step-rail{position:relative;display:flex;justify-content:center}
.step-rail::after{content:"";position:absolute;top:56px;bottom:-8px;width:3px;border-radius:3px;background:repeating-linear-gradient(var(--color-accent-300) 0 8px,transparent 8px 16px)}
.step:last-child .step-rail::after{display:none}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--color-accent-600);color:#fff;display:grid;place-items:center;font-family:var(--font-heading);font-weight:900;font-size:22px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--color-bg)}
.step-body{margin-bottom:22px;padding:24px 28px}
.step-body.has-img{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center}
.step-img{aspect-ratio:4/3;border-radius:20px;overflow:hidden}
.step-feel{display:flex;gap:8px;align-items:center;margin:10px 0 0;font-weight:700;color:var(--peach-800);font-size:15px}
.prep{gap:10px}
.prep-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border-radius:16px;background:var(--color-bg);cursor:pointer;font-weight:500;transition:background .2s;position:relative}
.prep-item input{position:absolute;opacity:0;width:0;height:0}
.prep-item .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--color-accent-300);display:grid;place-items:center;color:transparent;flex:none;transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.prep-item.on{background:var(--color-accent-100)}.prep-item.on .box{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff;transform:scale(1.08)}
.prep-item:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-family:var(--font-heading);font-weight:800;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform .25s;color:var(--color-accent-700)}
.faq details[open] summary svg{transform:rotate(90deg)}
.faq details p{margin:0 0 20px;color:var(--ink-soft)}
.intent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start}
.face-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;padding:16px}
.face{width:120px;height:140px;border-radius:18px;overflow:hidden}
.reply-times{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:14px}
.reply-times li{display:flex;gap:14px;align-items:center;font-size:16px}
.contact-form{padding:32px;gap:16px}
.cf-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1040px){
.nav-links{display:none}.nav .menu-btn{display:inline-flex;margin-left:auto}
.nav-links.open{display:flex;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;gap:0;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:10px}
.nav-links.open a{padding:14px 16px;min-height:48px}
.needs,.team,.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.halves{grid-template-columns:1fr}
.ttrack{grid-auto-columns:calc((100% - 22px)/2)}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.remind,.ba-layout,.loc,.prof-grid,.feel{grid-template-columns:1fr}
.answer{min-height:0}.answer-card::before{display:none}
.wellness{grid-template-columns:1fr}
.story,.intent{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
body{font-size:16.5px}
.section{padding:64px 0}.wrap{padding:0 18px}
.nav{padding:10px 18px;gap:12px}.nav .logo{font-size:28px}
.btn-sos .lbl-long{display:none}
.hero-grid{grid-template-columns:1fr;gap:20px}
.hero-art{order:-1;justify-self:center;max-width:420px}
.hero .cta-row .btn{flex:1 1 100%}
.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;padding:12px}
.needs,.trust-grid,.pricing,.tips,.svc-grid{grid-template-columns:1fr}
.need{min-height:0}
.team{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.member .note{display:none}
.half{padding:22px;border-radius:24px}
.why{padding:44px 22px;border-radius:28px}.remind{padding:28px 18px;border-radius:28px}.remind form{grid-template-columns:1fr;padding:20px}
.plan.hot{transform:none}
.ttrack{grid-auto-columns:86%}
.fgrid{grid-template-columns:1fr}
.mbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,#fff 94%,transparent);backdrop-filter:blur(10px);box-shadow:0 -6px 24px color-mix(in srgb,#2B2D42 10%,transparent)}
.mbar .btn{min-height:52px;padding:8px;font-size:15px;border-radius:16px}
.companion{left:10px;right:10px;bottom:84px;max-width:none;padding:10px;gap:10px}
.comp-av{width:36px;height:36px}.comp-line{font-size:14.5px}
.intro-row .choice-lbl{display:none}
.answer-card{padding:22px;border-radius:24px}
.cta-band{padding:32px 22px;border-radius:28px}.step{grid-template-columns:40px minmax(0,1fr);gap:12px}.step-num{width:40px;height:40px;font-size:18px}.step-rail::after{top:44px}.step-body{padding:20px}.step-body.has-img{grid-template-columns:1fr}.step-img{order:-1}.cf-2{grid-template-columns:1fr}.contact-form{padding:20px}.seg-btn{padding:10px 14px;font-size:15px}
.step-card{padding:24px 18px;border-radius:24px}
.pet-types{gap:8px}.ptype span{padding:16px 6px;font-size:16px}
.svc-pick{grid-template-columns:1fr}
.cal{grid-template-columns:repeat(4,minmax(0,1fr))}
.slots{grid-template-columns:repeat(3,minmax(0,1fr))}
.prof-head{grid-template-columns:1fr;text-align:center;justify-items:center}
.ticket{grid-template-columns:1fr}
}