/* ============================================================================
   Prideful Grooming — design system
   Brand: lavender #bb9fc5 · pink #f8bbdb · orange #e49856 · rust #a34c1a · plum #613b62
   Type: Fredoka (display) · Avenir Next where installed, Nunito Sans otherwise.
   Look: the mascots' thick cartoon outline → ink borders + "sticker" offset shadows.
   ============================================================================ */
@font-face{font-family:Fredoka;src:url(/assets/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Fredoka Fallback";src:local("Arial Rounded MT Bold"),local("Arial");size-adjust:98%;ascent-override:96%;descent-override:24%}
/* Body: the real brand face (Avenir Next) where the device has it, Nunito Sans otherwise.
   One @font-face per weight — a single local() face declared for a weight RANGE makes
   every weight render regular (no bold at all on Macs). */
@font-face{font-family:PGBody;font-weight:400;font-display:swap;src:local("AvenirNext-Regular"),local("Avenir Next Regular"),url(/assets/fonts/nunito-sans.woff2) format("woff2")}
@font-face{font-family:PGBody;font-weight:600;font-display:swap;src:local("AvenirNext-DemiBold"),local("Avenir Next Demi Bold"),url(/assets/fonts/nunito-sans.woff2) format("woff2")}
@font-face{font-family:PGBody;font-weight:700;font-display:swap;src:local("AvenirNext-Bold"),local("Avenir Next Bold"),url(/assets/fonts/nunito-sans.woff2) format("woff2")}
@font-face{font-family:PGBody;font-weight:800;font-display:swap;src:local("AvenirNext-Heavy"),local("Avenir Next Heavy"),url(/assets/fonts/nunito-sans.woff2) format("woff2")}

:root{
  --lav:#bb9fc5; --lav-2:#d8c7e0; --lav-3:#f2ebf6;
  --pink:#f8bbdb; --pink-2:#fde4f1;
  --orange:#e49856; --peach:#fbe3cf; --rust:#a34c1a;
  --plum:#613b62; --ink:#3a2140; --deep:#2a1730;
  --cream:#fff8f2; --white:#fff;
  --ok:#256b42; --ok-bg:#dcf2e3;
  --b:2.5px solid var(--ink);
  --pop:5px 5px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink); --pop-lg:8px 8px 0 var(--ink);
  --r:26px; --r-lg:36px;
  --wrap:1200px; --gut:24px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,.8,.3,1);
  --display:Fredoka,"Fredoka Fallback",ui-rounded,system-ui,sans-serif;
  --body:PGBody,"Avenir Next",Avenir,"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}      /* author display rules must never beat [hidden] */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:normal}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:500;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:12px;font-weight:700}
.skip:focus{top:12px}
.ic{width:1.15em;height:1.15em;flex:none}
.ic-flip{transform:scaleX(-1)}
.ic-star{color:var(--orange)}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}

/* ------------------------------------------------------------------ type -- */
.display{font-family:var(--display);font-weight:700;line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.display em,.h2 em{color:var(--plum)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);margin-bottom:14px}
/* plum is 3.8:1 on lavender — too faint for small text, so ink there */
.hero .kicker,.phero .kicker,.cta .kicker,.reviews .kicker,.menu .kicker{color:var(--ink)}
.kicker::before{content:"";width:22px;height:22px;flex:none;background:var(--pink);border:var(--b);border-radius:50%;box-shadow:inset -4px -3px 0 rgba(255,255,255,.6)}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;max-width:56ch}
.eyebrow{display:block;font-family:var(--display);font-weight:600;font-size:clamp(.9rem,1.25vw,1.05rem);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);border-bottom:2.5px solid var(--pink);padding-bottom:2px;transition:gap .3s var(--spring),border-color .2s}
.link-arrow:hover{gap:14px;border-color:var(--plum)}

/* --------------------------------------------------------------- buttons -- */
.btn{--bg:var(--cream);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border:var(--b);border-radius:999px;background:var(--bg);color:var(--fg);
  font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.1;white-space:nowrap;box-shadow:var(--pop-sm);
  transition:transform .25s var(--spring),box-shadow .25s var(--spring),background-color .2s,color .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.btn-plum{--bg:var(--plum);--fg:var(--cream)}
.btn-plum:hover{--bg:var(--ink)}
.btn-ghost{--bg:var(--cream);--fg:var(--ink)}
.btn-ghost:hover{--bg:var(--pink-2)}
.btn-sm{padding:9px 16px;font-size:.98rem}
.btn-lg{padding:15px 26px;font-size:1.1rem}
.btn-xl{padding:18px 30px;font-size:1.18rem}
.btn-icon{padding:13px}
.btn .ic{width:1.2em;height:1.2em}
.btn:hover .ic-paw{animation:wiggle .6s var(--ease)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}60%{transform:rotate(14deg)}}

.sticker{position:absolute;z-index:3;display:inline-block;padding:10px 16px;border:var(--b);border-radius:18px;box-shadow:var(--pop-sm);
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.1;text-align:center;color:var(--ink);transform:rotate(-8deg)}
.sticker-pink{background:var(--pink)}
.sticker-orange{background:var(--orange)}

/* ------------------------------------------------------------------- nav -- */
.nav{position:fixed;inset:0 0 auto;z-index:120;padding:14px var(--gut) 0;pointer-events:none;transition:padding .35s var(--ease)}
.nav-bar{pointer-events:auto;max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:18px;
  padding:7px 8px 7px 12px;background:rgba(255,248,242,.9);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border:var(--b);border-radius:999px;box-shadow:var(--pop-sm);transition:box-shadow .3s,background-color .3s}
.nav.is-stuck{padding-top:8px}
.nav.is-stuck .nav-bar{box-shadow:var(--pop)}
.brand{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;min-height:44px}
.brand-pups{width:62px;height:auto;transition:transform .5s var(--spring)}
.brand:hover .brand-pups{transform:rotate(-8deg) scale(1.08)}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word b{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.01em;text-transform:uppercase;color:var(--plum)}
.brand-word small{font-family:var(--body);font-size:.78rem;letter-spacing:.24em;margin-right:-.24em;text-transform:uppercase;color:var(--plum);margin-top:3px}
.nav-links{display:flex;gap:4px;margin-inline:auto}
.nav-links a{position:relative;padding:9px 14px;border-radius:999px;font-family:var(--display);font-weight:500;font-size:1.02rem;transition:background-color .2s}
.nav-links a:hover{background:var(--lav-3)}
.nav-links a[aria-current]{background:var(--pink)}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-cta .btn{min-height:44px}
.nav-links+.nav-cta{margin-left:0}
.nav-toggle{display:none;width:46px;height:46px;border:var(--b);border-radius:50%;background:var(--lav-3);align-items:center;justify-content:center}
.nav-toggle .ic{width:22px;height:22px}
.nav-toggle .ic-close,.nav-toggle[aria-expanded=true] .ic-open{display:none}
.nav-toggle[aria-expanded=true] .ic-close{display:block}

.menu{position:fixed;inset:0;z-index:110;background:var(--lav);padding:110px var(--gut) 28px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.menu::before{content:"";position:absolute;inset:0;background:var(--plum);opacity:.13;-webkit-mask:url(/assets/img/cheetah.webp) center/cover no-repeat;mask:url(/assets/img/cheetah.webp) center/cover no-repeat;pointer-events:none}
.menu nav{position:relative;display:flex;flex-direction:column}
.menu nav a{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,11vw,3.4rem);line-height:1.12;color:var(--ink);opacity:0;transform:translateY(24px)}
.menu nav a[aria-current]{color:var(--plum)}
.menu.is-open nav a{animation:menuIn .6s var(--spring) forwards;animation-delay:calc(var(--i)*55ms + 60ms)}
.menu-foot{position:relative;display:grid;gap:10px;margin-top:30px}
.menu-call{display:flex;align-items:center;gap:10px;padding:14px 16px;border:var(--b);border-radius:18px;background:var(--cream);font-weight:700}
.menu-call span{flex:1}
@keyframes menuIn{to{opacity:1;transform:none}}
body.menu-open{overflow:hidden}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;isolation:isolate;overflow:clip;background:var(--lav);min-height:100vh;min-height:100svh;
  padding:128px 0 150px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.blob{position:absolute;border-radius:50%}
.blob-pink{width:min(78vw,900px);aspect-ratio:1;right:-18%;top:-26%;background:radial-gradient(closest-side,var(--pink) 0%,rgba(248,187,219,.55) 45%,rgba(248,187,219,0) 100%);animation:drift 18s ease-in-out infinite alternate}
.blob-peach{width:min(70vw,720px);aspect-ratio:1;left:-22%;bottom:-38%;background:radial-gradient(closest-side,rgba(251,227,207,.95),rgba(251,227,207,0));animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-6%,8%) scale(1.08)}}
@keyframes morph{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.06)}}
.bubbles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* areas so the salon chips sit under the copy on desktop but after the deck on phones */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy visual" "salons visual";column-gap:48px;row-gap:26px;align-items:center}
.hero-copy{grid-area:copy;align-self:end}
.hero-visual{grid-area:visual}
.hero-copy{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;margin-bottom:26px;background:var(--cream);border:var(--b);border-radius:999px;box-shadow:var(--pop-sm);font-size:.95rem;animation:popIn .7s var(--spring) .1s both}
.hero-badge-stars{display:flex;gap:1px;padding:4px 8px;background:var(--ink);border-radius:999px}
.hero-badge-stars .ic{width:15px;height:15px}
/* capped so "Leave fabulous." always fits its column — the column stops growing at 1248px */
.hero .eyebrow{line-height:1.4;margin-bottom:24px;text-wrap:balance}
.hero-title{display:block;font-size:clamp(3.3rem,7.2vw,5.8rem);color:var(--ink)}
.hero-title .ln{display:block;white-space:nowrap}
.w{display:inline-block;transform-origin:50% 100%;animation:drop 1s var(--spring) both;animation-delay:calc(var(--d)*90ms + 120ms)}
.w-hl{position:relative;color:var(--plum)}
/* "fabulous": brand pink lifted off the lavender by a plum drop shadow (no outline), plus a soft glint every few seconds */
.w-hl{color:var(--pink);filter:drop-shadow(.04em .06em 0 var(--plum))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .w-hl{background:linear-gradient(105deg,transparent 40%,#fff4fa 50%,transparent 60%) 160% 0/250% 100% no-repeat,var(--pink);
        -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glint 5s ease-in-out 1.6s infinite}
}
@keyframes glint{0%{background-position:160% 0,0 0}45%,100%{background-position:-60% 0,0 0}}
.swoosh{position:absolute;left:-2%;right:-2%;bottom:-.2em;width:104%;height:.26em;overflow:visible;z-index:-1}
.swoosh path{fill:none;stroke:var(--plum);stroke-width:16;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:draw .9s var(--ease) 1s forwards}
@keyframes drop{0%{transform:translateY(-.5em) rotate(-7deg) scaleY(1.08)}55%{transform:translateY(.05em) rotate(2deg) scaleY(.93)}78%{transform:translateY(-.02em) scaleY(1.02)}100%{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes popIn{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:none}}
.hero-lede{margin:26px 0 30px;font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.55;max-width:34em;animation:popIn .8s var(--ease) .55s both}
.hero-btns{animation:popIn .8s var(--spring) .7s both}
.btn-magnet{translate:var(--mx,0) var(--my,0);transition:transform .25s var(--spring),box-shadow .25s var(--spring),background-color .2s,translate .35s var(--ease)}
.hero-salons{grid-area:salons;align-self:start;display:flex;flex-wrap:wrap;gap:10px;animation:popIn .8s var(--ease) .85s both}
.hero-salons a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:999px;background:rgba(255,248,242,.62);border:2px solid rgba(58,33,64,.25);font-size:.95rem;transition:background-color .2s,border-color .2s}
.hero-salons a:hover{background:var(--cream);border-color:var(--ink)}

/* the pup deck */
.hero-visual{position:relative;z-index:2;display:grid;place-items:center;min-height:540px}
.deck{position:relative;width:min(340px,100%);aspect-ratio:4/5;touch-action:pan-y;cursor:grab;animation:popIn .9s var(--spring) .35s both}
.deck:active{cursor:grabbing}
.card{--k:0;--rot:0deg;position:absolute;inset:0;margin:0;padding:10px 10px 50px;background:var(--white);border:3px solid var(--ink);border-radius:28px;box-shadow:var(--pop-lg);
  transform-origin:50% 90%;transform:translate(calc(var(--k) * 16px),calc(var(--k) * -12px)) rotate(var(--rot)) scale(calc(1 - var(--k) * .035));
  z-index:calc(20 - var(--k));transition:transform .7s var(--spring),box-shadow .4s;user-select:none;-webkit-user-select:none}
.card img{width:100%;height:100%;object-fit:cover;border-radius:19px;border:2px solid var(--ink);pointer-events:none;background:var(--lav-3)}
.card-tag{position:absolute;left:16px;right:16px;bottom:12px;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-tag::before{content:"✂ ";color:var(--plum)}
.card.is-drag{transition:none}
.card.is-throw{transition:transform .5s var(--ease)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.spin{position:relative;width:132px;height:132px;border-radius:50%;background:var(--cream);border:var(--b);box-shadow:var(--pop-sm)}
.spin>svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}   /* only the ring of words turns; the paw stays upright */
.spin text{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:1px;fill:var(--ink)}
.spin-core{position:absolute;inset:34%;display:grid;place-items:center;border-radius:50%;background:var(--pink);border:2px solid var(--ink);color:var(--ink)}
.spin-core .ic{width:24px;height:24px}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-spin{position:absolute;z-index:26;right:calc(50% - 240px);bottom:4%}
.deck-hint{position:absolute;bottom:-6px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--ink);opacity:.75;white-space:nowrap}
.deck-hint .ic{color:var(--plum)}

.ribbon{position:absolute;left:-3%;right:-3%;bottom:34px;z-index:4;background:var(--ink);color:var(--cream);transform:rotate(-2.2deg);border-block:3px solid var(--ink);border-top:0;overflow:hidden;pointer-events:none}
/* thin rainbow along the top edge that rolls with the ribbon */
.ribbon::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#5ebd3e,#ffb900,#f78200,#e23838,#973999,#009cdf,#5ebd3e) 0 0/720px 100% repeat-x;animation:rainbow 12s linear infinite}
@keyframes rainbow{to{background-position:-720px 0}}
.ribbon-track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ribbon-set{display:flex;align-items:center;gap:26px;padding:14px 13px;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.5rem);white-space:nowrap}
.ribbon-set i{font-style:normal;color:var(--pink)}
@keyframes ticker{to{transform:translate3d(-50%,0,0)}}

/* -------------------------------------------------------------- sections -- */
section{position:relative}
.sec-head{margin-bottom:48px}
.sec-head .lede{margin-top:18px}
.sec-head-split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.sec-head-split>div{max-width:620px}
.sec-head-split .lede{margin-top:0;max-width:430px}
.sec-head-center{text-align:center;margin-inline:auto;max-width:760px}
.sec-head-center .lede{margin-inline:auto}

/* promise — words fill in as you scroll */
.promise{padding:150px 0 130px;background:var(--cream);overflow:clip}
.promise-in{position:relative;max-width:1080px}
.promise-text{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.5vw,3.9rem);line-height:1.13;letter-spacing:-.01em}
.promise-text .pw{color:rgba(58,33,64,.3);transition:color .35s var(--ease)}
.promise-text .pw.on{color:var(--ink)}
.promise-text em .pw{background:linear-gradient(var(--pink),var(--pink)) 0 88%/0 38% no-repeat;transition:color .35s var(--ease),background-size .6s var(--ease)}
.promise-text em .pw.on{color:var(--plum);background-size:100% 38%}
.float-ic{position:absolute;display:grid;place-items:center;width:64px;height:64px;border:var(--b);border-radius:20px;box-shadow:var(--pop-sm);animation:bob 5s ease-in-out infinite}
.float-ic .ic{width:30px;height:30px}
.fi-1{background:var(--pink);right:2%;top:-60px;rotate:10deg}
.fi-2{background:var(--orange);left:-70px;top:44%;rotate:-12deg;animation-delay:-1.4s}
.fi-3{background:var(--lav);right:-40px;bottom:-40px;rotate:-6deg;animation-delay:-2.6s}
.fi-4{background:var(--peach);left:30%;bottom:-86px;rotate:8deg;animation-delay:-.7s}

/* services bento */
.svc{padding:40px 0 130px;background:var(--cream)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bento-card{--bg:var(--lav-3);position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border:var(--b);border-radius:var(--r);background:var(--bg);box-shadow:var(--pop);
  transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .45s var(--spring),box-shadow .3s}
.bento-card:hover{box-shadow:var(--pop-lg)}
.bento-card h3{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.05}
.bento-card:not(.bc-bath):not(.bc-pets) h3{margin-top:auto;padding-top:26px}
.bento-card p{font-size:1rem;line-height:1.55}
.bento-n{position:absolute;right:22px;top:14px;font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;color:rgba(58,33,64,.14)}
.bento-ic{display:grid;place-items:center;width:66px;height:66px;margin-bottom:8px;background:var(--cream);border:var(--b);border-radius:22px;box-shadow:var(--pop-sm)}
.bento-ic .ic{width:32px;height:32px;color:var(--plum)}
.bento-card:hover .bento-ic{animation:wiggle .7s var(--ease)}
.bc-bath{--bg:var(--pink-2);grid-row:span 2}
.bc-dry{--bg:var(--lav-3)}
.bc-cut{--bg:var(--peach)}
.bc-paw{--bg:var(--lav-3)}
.bc-teeth{--bg:var(--pink-2)}
.bento-photo{margin-top:auto;padding-top:14px}
.bento-photo img{width:100%;aspect-ratio:4/4.2;object-fit:cover;border:var(--b);border-radius:20px}
.bc-pets{--bg:var(--plum);grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 28px;color:var(--cream)}
.bc-pets h3{color:var(--cream);font-size:clamp(1.8rem,3vw,2.4rem)}
.bc-pets h3 em{color:var(--pink)}
.bc-pets p{flex:1 1 260px;font-size:1.08rem}
.bc-pets .link-arrow{color:var(--cream);border-color:var(--pink)}
.pets-row{display:flex;align-items:center;gap:8px}
.pet-ic{display:grid;place-items:center;width:62px;height:62px;border:2.5px solid var(--cream);border-radius:50%;background:var(--pink);color:var(--ink)}
.pet-ic:last-child{background:var(--orange)}
.pet-ic .ic{width:32px;height:32px}
.pet-amp{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--pink)}

/* stats */
.stats{padding:72px 0;background:var(--deep);color:var(--cream);overflow:clip}
/* the print is NOT seamless — always scale one copy to cover, never tile it */
.stats-cheetah,.ftr-cheetah,.phero-cheetah{position:absolute;inset:0;background:var(--plum);opacity:.55;-webkit-mask:url(/assets/img/cheetah.webp) center/cover no-repeat;mask:url(/assets/img/cheetah.webp) center/cover no-repeat;pointer-events:none}
.stats-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.stats-row b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(3rem,6.6vw,5.6rem);line-height:1;color:var(--pink)}
.stats-row li:nth-child(even) b{color:var(--orange)}
.stats-row span{display:block;margin-top:8px;font-family:var(--display);font-weight:500;font-size:1.1rem}

/* meet margarita */
.meet{padding:140px 0;background:var(--lav-3);overflow:clip}
.meet-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:80px;align-items:center}
.meet-photos{position:relative;padding:8px}
.meet-main{border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--pop-lg);transform:rotate(-2deg);background:var(--lav)}
.meet-main img{width:100%;aspect-ratio:4/5;object-fit:cover}
.meet-sticker{left:-16px;top:34px;padding:14px 18px;font-size:1.1rem;transform:rotate(-12deg)}
.meet-copy .lede{margin:22px 0 26px}
.pull{position:relative;padding:24px 26px 22px;margin-bottom:26px;background:var(--cream);border:var(--b);border-radius:24px;box-shadow:var(--pop-sm)}
.pull::before{content:"“";position:absolute;left:18px;top:-34px;font-family:var(--display);font-weight:700;font-size:5rem;line-height:1;color:var(--plum)}
.pull p{font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.4}
.pull cite{display:block;margin-top:10px;font-style:normal;font-size:.92rem;color:var(--plum);font-weight:700}
.checks{display:grid;gap:12px;margin-bottom:30px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:1.05rem;line-height:1.45}
.checks .ic{width:28px;height:28px;padding:5px;margin-top:-2px;border-radius:50%;background:var(--plum);color:var(--cream)}

/* gallery ticker */
.gallery{padding:130px 0;background:var(--cream);overflow:clip}
.mq{overflow:hidden;padding:14px 0 20px}
.mq+.mq{margin-top:4px}
.mq-track{display:flex;gap:22px;width:max-content;animation:mqL 60s linear infinite}
.mq-right .mq-track{animation-name:mqR;animation-duration:66s}
.mq:hover .mq-track{animation-play-state:paused}
.mq-card{position:relative;flex:none;width:260px;padding:8px 8px 40px;background:var(--white);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--pop);transform:rotate(var(--tilt));transition:transform .4s var(--spring)}
.mq-card:hover{transform:rotate(0) scale(1.04)}
.mq-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:var(--lav-3)}
.mq-tag{position:absolute;left:14px;bottom:9px;font-family:var(--display);font-weight:600;font-size:1rem}
@keyframes mqL{to{transform:translate3d(calc(-50% - 11px),0,0)}}
@keyframes mqR{from{transform:translate3d(calc(-50% - 11px),0,0)}to{transform:translate3d(0,0,0)}}

/* reviews rail */
.reviews{padding:130px 0;background:var(--lav);overflow:clip}
.rev-score{display:flex;align-items:center;gap:16px}
.rev-score>b{font-family:var(--display);font-weight:700;font-size:clamp(4rem,7vw,5.6rem);line-height:.9;color:var(--ink)}
.rev-score>span{max-width:200px;font-weight:700;line-height:1.35}
.rev-score-stars{display:flex;gap:2px;margin-bottom:4px}
.rev-score-stars .ic{width:22px;height:22px}
.rail{position:relative}
.rail-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 30px;margin-left:-4px;margin-right:calc((100% - 100vw) / 2);padding-right:var(--gut);scrollbar-width:none;cursor:grab}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail-track.is-drag *{pointer-events:none}
.rev{--bg:var(--cream);flex:none;display:flex;flex-direction:column;gap:16px;width:min(380px,82vw);padding:26px;border:var(--b);border-radius:var(--r);background:var(--bg);box-shadow:var(--pop);scroll-snap-align:start}
.rev:nth-child(odd){rotate:-1deg}.rev:nth-child(even){rotate:1deg}
.rev-pink{--bg:var(--pink-2)}.rev-lav{--bg:var(--lav-3)}.rev-cream{--bg:var(--cream)}.rev-peach{--bg:var(--peach)}
.rev-stars{display:flex;gap:2px}
.rev-stars .ic{width:20px;height:20px}
.rev blockquote{flex:1}
.rev blockquote p{font-size:1.05rem;line-height:1.55}
.rev figcaption{display:flex;align-items:center;gap:12px}
.rev figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.1}
.rev figcaption small{font-size:.85rem;color:var(--plum);font-weight:700}
.rev-av{display:grid;place-items:center;width:44px;height:44px;border:var(--b);border-radius:50%;background:var(--orange);font-family:var(--display);font-weight:700;font-size:1.2rem}
.rail-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}
.rail-btn{display:grid;place-items:center;width:56px;height:56px;border:var(--b);border-radius:50%;background:var(--cream);box-shadow:var(--pop-sm);transition:transform .25s var(--spring),box-shadow .25s var(--spring)}
.rail-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.rail-btn .ic{width:24px;height:24px}

/* salons */
.salons{padding:130px 0;background:var(--cream)}
.salons-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.loc-card{position:relative;display:flex;flex-direction:column;padding:30px;border:var(--b);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--pop-lg);overflow:hidden}
.loc-card::after{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-70px;border-radius:50%;background:var(--pink-2);z-index:0}
.loc-card>*{position:relative;z-index:1}
.loc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.loc-kicker{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--plum)}
.loc-name{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1}
.loc-name a:hover{color:var(--plum)}
.loc-addr{margin-top:8px;font-size:1.08rem}
.loc-rating{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.95rem}
.hours{margin:20px 0 24px;padding:6px;border:2px dashed rgba(58,33,64,.3);border-radius:18px}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;font-size:.98rem}
.hours li.is-today{background:var(--pink);font-weight:700}
.hours li.is-today span:first-child::after{content:" · today";font-weight:600;color:var(--plum)}
.loc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.open-status{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:.85rem;font-weight:800;line-height:1.2;background:var(--lav-3);color:var(--ink);white-space:nowrap}
.open-status:empty{display:none}
.open-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.open-status.is-open{background:var(--ok-bg);color:var(--ok)}
.open-status.is-open::before{animation:pulse 1.8s ease-out infinite}
.open-status.is-closed{background:var(--lav-3);color:var(--ink)}
.open-status.is-closed::before{background:var(--plum)}
.open-mini{padding:3px 9px;font-size:.78rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,107,66,.5)}100%{box-shadow:0 0 0 9px rgba(37,107,66,0)}}

/* faq */
.faqs{padding:120px 0 130px;background:var(--lav-3)}
.faqs-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faqs-head{position:sticky;top:120px}
.faqs-head .lede{margin:18px 0 22px}
.faqs-pups{width:220px;margin-top:34px;transform:rotate(-6deg)}
.faq{display:grid;gap:14px}
.faq-item{border:var(--b);border-radius:22px;background:var(--cream);box-shadow:var(--pop-sm);transition:box-shadow .3s,background-color .3s}
.faq-item[open]{background:var(--white);box-shadow:var(--pop)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;background:var(--pink);transition:transform .45s var(--spring),background-color .2s}
.faq-ic .ic{width:18px;height:18px}
.faq-item[open] .faq-ic{transform:rotate(135deg);background:var(--orange)}
.faq-a>div{padding:0 20px 20px}
.faq-a p{font-size:1.02rem;line-height:1.6}

/* cta */
.cta{padding:130px 0;background:var(--lav);overflow:clip;isolation:isolate}
.cta::before{content:"";position:absolute;z-index:-2;width:760px;aspect-ratio:1;right:-240px;bottom:-320px;border-radius:50%;background:radial-gradient(closest-side,var(--pink),rgba(248,187,219,0))}
.cta-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:70px;align-items:center}
.cta-photo{position:relative;max-width:460px}
.cta-photo img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink);border-radius:50% 50% 44% 56%/52% 46% 54% 48%;box-shadow:var(--pop-lg);transform:rotate(3deg)}
.cta-photo .sticker{right:-10px;top:22px;font-size:1.3rem;padding:12px 18px;transform:rotate(10deg)}
.cta-copy .display{font-size:clamp(2.6rem,5.6vw,5rem);margin-bottom:18px}
.cta-copy .lede{margin-bottom:30px}

/* footer */
.ftr{position:relative;padding:100px 0 30px;background:var(--deep);color:var(--cream);overflow:clip}
.ftr-cheetah{opacity:.35}
.ftr-grid{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;gap:40px}
.brand-light .brand-word b,.brand-light .brand-word small{color:var(--cream)}
.ftr-brand p{margin:18px 0 14px;max-width:32ch;color:rgba(255,248,242,.86)}
.ftr-stars{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.ftr-stars span{margin-left:8px;font-weight:700;font-size:.95rem}
.ftr-ig{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border:2px solid rgba(255,248,242,.4);border-radius:999px;font-weight:700;transition:background-color .2s,color .2s}
.ftr-ig:hover{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.ftr-h{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--pink);margin-bottom:14px}
.ftr-loc address{display:grid;gap:6px;font-style:normal;margin-bottom:14px}
.ftr-loc address a:hover,.ftr-nav a:hover{color:var(--pink)}
.ftr-tel{font-weight:800;font-size:1.08rem}
.ftr-hours{display:grid;gap:3px;margin-bottom:16px;font-size:.9rem;color:rgba(255,248,242,.8)}
.ftr-hours li{display:flex;justify-content:space-between;gap:10px;max-width:250px}
.ftr .link-arrow{color:var(--cream)}
.ftr-nav{display:flex;flex-direction:column;gap:9px}
.ftr-nav a{width:fit-content}
.ftr-bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:70px;padding-top:24px;border-top:1.5px solid rgba(255,248,242,.18);font-size:.9rem;color:rgba(255,248,242,.78)}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.ftr-legal a{padding:6px 0}
.ftr-legal a:hover{color:var(--pink)}

/* ---------------------------------------------------------- booking sheet -- */
.bk{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.bk-scrim{position:absolute;inset:0;background:rgba(42,23,48,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .3s ease both}
.bk-sheet{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:calc(100dvh - 40px);background:var(--cream);border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);overflow:hidden;animation:sheetIn .55s var(--spring) both;transition:width .45s var(--ease),height .45s var(--ease)}
.bk.is-frame .bk-sheet{width:min(920px,100%);height:min(900px,calc(100dvh - 40px))}
.bk.is-closing .bk-sheet{animation:sheetOut .28s var(--ease) both}
.bk.is-closing .bk-scrim{animation:fade .28s ease reverse both}
.bk-head{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 22px;border-bottom:2.5px solid var(--ink);background:var(--lav)}
.bk-title{flex:1;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15}
.bk-back,.bk-ext{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font-family:var(--display);font-weight:600;font-size:.95rem}
.bk-x{display:grid;place-items:center;width:44px;height:44px;border:2.5px solid var(--ink);border-radius:50%;background:var(--pink);transition:transform .3s var(--spring)}
.bk-x:hover{transform:rotate(90deg)}
.bk-x .ic{width:20px;height:20px}
.bk-pick{display:grid;gap:14px;padding:22px}
.bk-loc{display:flex;align-items:center;gap:16px;width:100%;padding:18px;text-align:left;border:var(--b);border-radius:24px;background:var(--white);box-shadow:var(--pop-sm);transition:transform .25s var(--spring),box-shadow .25s var(--spring),background-color .2s}
.bk-loc:hover{transform:translate(-2px,-2px);box-shadow:var(--pop);background:var(--pink-2)}
.bk-loc-pin{display:grid;place-items:center;flex:none;width:54px;height:54px;border:2px solid var(--ink);border-radius:18px;background:var(--orange)}
.bk-loc-pin .ic{width:26px;height:26px}
.bk-loc-body{flex:1;display:grid;gap:3px;justify-items:start}
.bk-loc-body b{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.1}
.bk-loc-go .ic{width:26px;height:26px;transition:transform .3s var(--spring)}
.bk-loc:hover .bk-loc-go .ic{transform:translateX(5px)}
.bk-note{font-size:.93rem;line-height:1.5;color:var(--ink)}
.bk-note a{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.bk-frame{position:relative;flex:1;min-height:0;background:var(--white)}
.bk-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bk-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:1.1rem;background:var(--cream);transition:opacity .4s}
.bk-loading.is-done{opacity:0;pointer-events:none}
.bk-pups{width:140px;animation:hop .7s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-14px) rotate(-3deg)}}
@keyframes fade{from{opacity:0}}
@keyframes sheetIn{from{opacity:0;transform:translateY(40px) scale(.94) rotate(-1.5deg)}}
@keyframes sheetOut{to{opacity:0;transform:translateY(30px) scale(.96)}}
body.bk-open{overflow:hidden}

/* ------------------------------------------------------------ inner pages -- */
.phero{position:relative;isolation:isolate;overflow:clip;background:var(--lav);padding:150px 0 110px}
.phero-cheetah{opacity:.08}
.phero-in.has-visual{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.phero-visual{position:relative;isolation:isolate;justify-self:center;width:320px;margin-top:20px}
/* the pink "second card" sits on the wrapper — inside the card's own stacking context it would paint over the card's white background */
.phero-visual::before{content:"";position:absolute;inset:14px -18px -14px 18px;z-index:0;border:3px solid var(--ink);border-radius:28px;background:var(--pink);transform:rotate(-4deg)}
.phero-card{position:relative;inset:auto;z-index:1;aspect-ratio:4/5;transform:rotate(4deg);animation:popIn .9s var(--spring) .25s both}
.has-visual .phero-title{max-width:none}
.is-post .phero-title{font-size:clamp(2.3rem,4.2vw,3.7rem);line-height:1}
.h1-lead{display:block;font-size:.46em;letter-spacing:0;margin-bottom:.12em;color:var(--ink)}
.phero-pups{position:absolute;z-index:3;width:130px;left:-60px;top:-34px;transform:rotate(-12deg);animation:bob 4.5s ease-in-out infinite}
.phero-spin{position:absolute;z-index:3;right:-54px;bottom:-26px;width:118px;height:118px}
.phero .bubbles{z-index:-1}
.phero-in{position:relative}
.phero-title{font-size:clamp(2.8rem,6.6vw,5.6rem);max-width:15ch;margin-bottom:22px}
.phero .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:44em}
.phero .btn-row{margin-top:30px}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;fill:var(--cream)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;font-size:.92rem;font-weight:700}
.crumbs li+li::before{content:"›";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.block{padding:100px 0}
.block-lav{background:var(--lav-3)}
.block-tight{padding:70px 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.prose{display:grid;gap:18px;max-width:68ch}
.prose p,.prose li{font-size:1.08rem;line-height:1.7}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;margin-top:18px}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-top:10px}
.prose ul{display:grid;gap:8px;padding-left:1.2em;list-style:disc}
.prose a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pink);text-decoration-thickness:2px}
.photo-frame{position:relative}
.photo-frame img{width:100%;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--pop-lg);object-fit:cover;aspect-ratio:4/5}

/* steps timeline (services) */
.steps{position:relative;display:grid;gap:22px;counter-reset:step}
.steps::before{content:"";position:absolute;left:37px;top:30px;bottom:30px;width:4px;border-radius:4px;background:repeating-linear-gradient(to bottom,var(--ink) 0 10px,transparent 10px 20px);opacity:.25}
.step{position:relative;display:grid;grid-template-columns:78px 1fr;gap:22px;align-items:start}
.step-ic{position:relative;z-index:1;display:grid;place-items:center;width:78px;height:78px;border:var(--b);border-radius:26px;background:var(--pink);box-shadow:var(--pop-sm)}
.step:nth-child(2) .step-ic{background:var(--lav)}.step:nth-child(3) .step-ic{background:var(--orange)}.step:nth-child(4) .step-ic{background:var(--peach)}.step:nth-child(5) .step-ic{background:var(--lav-2)}
.step-ic .ic{width:36px;height:36px}
.step-body{padding:18px 22px;border:var(--b);border-radius:24px;background:var(--white);box-shadow:var(--pop-sm)}
.step-body h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.1;margin-bottom:6px}
.step-body h3 small{font-family:var(--body);font-size:.85rem;font-weight:800;color:var(--plum);letter-spacing:.06em;text-transform:uppercase;margin-right:8px}

.pet-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.pet-card{padding:34px;border:var(--b);border-radius:var(--r-lg);background:var(--pink-2);box-shadow:var(--pop-lg)}
.pet-card:nth-child(2){background:var(--peach)}
.pet-card .pet-ic{border-color:var(--ink);margin-bottom:18px;width:74px;height:74px}
.pet-card h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1;margin-bottom:12px}
.pet-card p{font-size:1.06rem;line-height:1.65}
.pet-card ul{display:grid;gap:8px;margin-top:16px}
.pet-card li{display:flex;gap:10px;align-items:flex-start}
.pet-card li .ic{width:22px;height:22px;margin-top:3px;color:var(--plum)}

.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.note{padding:26px;border:var(--b);border-radius:var(--r);background:var(--cream);box-shadow:var(--pop)}
.note h3{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.15;margin-bottom:10px}
.note h3 .ic{width:34px;height:34px;padding:6px;border:2px solid var(--ink);border-radius:12px;background:var(--pink)}
.note p{font-size:1rem;line-height:1.6}

.faq-groups{display:grid;gap:56px;max-width:880px}
.faq-group-h{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.faq-group-h span{display:grid;place-items:center;width:44px;height:44px;border:var(--b);border-radius:14px;background:var(--orange);font-size:1.2rem}

.loc-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.map-card{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border:var(--b);border-radius:var(--r-lg);box-shadow:var(--pop-lg);overflow:hidden;background:var(--lav-3)}
.map-card::before{content:"";position:absolute;inset:0;background:var(--lav);opacity:.5;-webkit-mask:url(/assets/img/cheetah.webp) center/cover no-repeat;mask:url(/assets/img/cheetah.webp) center/cover no-repeat}
.map-card>.btn{position:relative}
.map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.towns li{padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font-weight:700;font-size:.92rem}

.nf{min-height:80vh;display:grid;place-items:center;background:var(--lav);padding:140px 0 80px;text-align:center}
.nf-in{display:grid;justify-items:center;gap:20px}
.nf-pups{width:260px;animation:bob 3s ease-in-out infinite}
.nf .display{font-size:clamp(3rem,8vw,6rem)}

.legal{max-width:760px}
.legal h2{font-size:1.55rem}
.legal .effective{font-weight:800;color:var(--plum)}


/* ------------------------------------------------------------ motion toggle -- */
.motion-toggle{display:inline-flex;align-items:center;padding:10px 16px;border:var(--b);border-radius:999px;background:var(--cream);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.98rem;line-height:1.1;box-shadow:var(--pop-sm);transition:transform .25s var(--spring),box-shadow .25s var(--spring),background-color .2s}
.motion-toggle:hover{transform:translate(-2px,-2px);box-shadow:var(--pop);background:var(--pink-2)}
.motion-toggle>span{display:inline-flex;align-items:center;gap:8px}
.motion-toggle .ic{width:16px;height:16px}
.motion-toggle .mt-play,.motion-toggle[aria-pressed=true] .mt-pause{display:none}
.motion-toggle[aria-pressed=true] .mt-play{display:inline-flex}
.motion-off .mq-track,.motion-off .ribbon-track,.motion-off .ribbon::before,.motion-off .spin>svg,.motion-off .float-ic,.motion-off .blob,
.motion-off .phero-pups,.motion-off .open-status::before,.motion-off .bk-pups{animation-play-state:paused!important}
.ftr .motion-toggle{padding:6px 12px;font-size:.88rem;background:transparent;color:var(--cream);border-color:rgba(255,248,242,.45);box-shadow:none}
.ftr .motion-toggle:hover{background:rgba(255,248,242,.12);transform:none}

/* ------------------------------------------------------------ review tickers -- */
.reviews{padding:130px 0 80px}
.rev-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.mq-rev{padding:12px 0 24px}
.mq-rev .mq-track{align-items:stretch;animation-duration:92s}
.mq-rev.mq-right .mq-track{animation-duration:100s}
.mq-rev:hover .mq-track,.mq-rev:focus-within .mq-track{animation-play-state:paused}
.mq-rev-item{flex:none;display:flex;width:min(380px,82vw)}
.mq-rev-item .rev{width:100%;rotate:-1deg}
.mq-rev-item:nth-child(even) .rev{rotate:1deg}
.rev-more{margin-top:14px;text-align:center}

/* --------------------------------------------------------------- resources -- */
.tips{padding:120px 0;background:var(--cream)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pcard a{display:flex;flex-direction:column;height:100%;border:var(--b);border-radius:var(--r);background:var(--white);box-shadow:var(--pop);overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.pcard a:hover{transform:translate(-3px,-3px);box-shadow:var(--pop-lg)}
.pcard-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-bottom:var(--b);background:var(--lav-3)}
.pcard-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s var(--ease)}
.pcard a:hover .pcard-img img{transform:scale(1.05)}
.pcard-cat{position:absolute;left:14px;top:14px;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--pink);font-family:var(--display);font-weight:600;font-size:.88rem;line-height:1.1}
.pcard-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 22px 20px}
.pcard-title{font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:1.12}
.pcard-ex{flex:1;font-size:.98rem;line-height:1.55}
.pcard-meta{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:var(--plum)}
.pcard-meta .ic{margin-left:auto;transition:transform .3s var(--spring)}
.pcard a:hover .pcard-meta .ic{transform:translateX(4px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:var(--b);border-radius:999px;background:var(--cream);font-family:var(--display);font-weight:600;box-shadow:var(--pop-sm);transition:background-color .2s,transform .25s var(--spring)}
.chip span{padding:2px 8px;border-radius:999px;background:var(--lav-3);font-size:.82rem}
.chip:hover{background:var(--pink-2);transform:translate(-1px,-1px)}
.chip.on{background:var(--plum);color:var(--cream)}
.chip.on span{background:rgba(255,255,255,.22)}
.post-meta{display:flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:.98rem}
.post-meta .ic{width:22px;height:22px}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.article{max-width:740px}
.quick-answer{margin-bottom:38px;padding:24px 26px;border:var(--b);border-radius:var(--r);background:var(--pink-2);box-shadow:var(--pop)}
.qa-label{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.qa-label .ic{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--plum);color:var(--cream)}
.quick-answer p:last-child{font-size:1.14rem;line-height:1.6;font-weight:600}
.article-body h2{scroll-margin-top:120px;font-size:clamp(1.6rem,2.8vw,2.1rem)}
.article-body ol{list-style:decimal;display:grid;gap:8px;padding-left:1.3em}
.article-body #sources~ol li{font-size:.95rem;line-height:1.5}
.article-body .post-note{padding:14px 18px;border-radius:16px;background:var(--lav-3);font-size:.93rem}
.article-side{position:sticky;top:120px;display:grid;gap:22px}
.toc{padding:22px;border:var(--b);border-radius:var(--r);background:var(--cream);box-shadow:var(--pop-sm)}
.toc-h{margin-bottom:10px;font-family:var(--display);font-weight:700;font-size:1.15rem}
.toc ol{display:grid;gap:9px;padding-left:1.2em;list-style:decimal}
.toc a{font-size:.95rem;line-height:1.35;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.toc a:hover{text-decoration-color:var(--plum)}
.side-cta{display:grid;justify-items:center;gap:8px;padding:24px;border:var(--b);border-radius:var(--r);background:var(--lav);box-shadow:var(--pop);text-align:center}
.side-pups{width:120px}
.side-cta-h{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.1}
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:var(--b);border-radius:var(--r);background:var(--white);box-shadow:var(--pop);overflow:hidden}
.glance div{padding:20px 22px;border-right:2px dashed rgba(58,33,64,.22);border-bottom:2px dashed rgba(58,33,64,.22)}
.glance dt{font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.glance dd{margin:4px 0 0;font-size:1.05rem;line-height:1.45;font-weight:600}
.glance dd a{display:inline-block;padding:3px 0;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2.5px;text-underline-offset:4px}
.glance dd a:hover{text-decoration-color:var(--plum)}
@media (max-width:980px){
  .article-grid{grid-template-columns:1fr;gap:40px}
  .article-side{position:static}
  .post-grid,.glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-side{align-items:flex-start}
}
@media (max-width:640px){
  .post-grid,.glance{grid-template-columns:1fr}
  .tips{padding:90px 0}
  .reviews{padding:90px 0 60px}
}

/* --------------------------------------------------------------- reveals -- */
.js [data-rv]{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .8s var(--ease),transform .9s var(--spring);transition-delay:var(--rvd,0ms)}
.js [data-rv].in{opacity:1;transform:none}
.js .bento-card[data-rv].in{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1100px){
  .nav-links a{padding:9px 10px}
  .brand-word small{display:none}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .meet-grid,.cta-grid{gap:48px}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-links+.nav-cta{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .hero{padding:118px 0 150px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "visual" "salons";gap:30px}
  .hero-salons{justify-content:center;margin-top:-10px}
  .hero-visual{min-height:0;padding:40px 0 60px}
  .deck{translate:-32px 0}   /* the back cards fan 64px to the right; this centers the whole stack */
    .hero-spin{right:calc(50% - 215px);bottom:26px;width:112px;height:112px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-bath{grid-row:auto;grid-column:1/-1}
  .bc-bath .bento-photo img{aspect-ratio:16/9}
  .meet-grid,.cta-grid,.split,.loc-page,.phero-in.has-visual{grid-template-columns:1fr}
  .phero-visual{display:none}
  .meet-photos{max-width:520px}
  .cta-photo{max-width:380px;margin-inline:auto}
  .faqs-grid{grid-template-columns:1fr;gap:34px}
  .faqs-head{position:static}
  .faqs-pups{display:none}
  .salons-grid,.pet-split{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@media (max-width:640px){
  :root{--gut:18px;--r:22px;--r-lg:28px}
  body{font-size:16px}
  .nav{padding-top:10px}
  .nav-bar{gap:8px;padding:5px 5px 5px 8px}
  .brand-pups{width:46px}
  .brand-word b{font-size:.92rem;line-height:.95;max-width:6.4em}   /* wraps to two lines so the menu button fits */
  .spin-core .ic{width:18px;height:18px}
  .nav-cta .btn-sm{padding:9px 13px}
  .nav-cta .btn-sm .ic-paw{display:none}
  .hero{padding:104px 0 130px}
  .hero-badge{font-size:.85rem;margin-bottom:20px}
  .hero-title{font-size:clamp(2.75rem,13.4vw,5rem)}
  .hero-lede{margin:20px 0 24px}
  .hero-btns .btn{width:100%}
  .hero-btns .hide-sm{display:none}
  .hero-visual{padding:8px 0 44px}
  .btn-xl{padding:16px 24px;font-size:1.1rem}
  .deck{width:min(64vw,270px)}
  .card{padding:7px 7px 40px;border-radius:22px}
  .card img{border-radius:15px}
  .card-tag{font-size:.95rem;bottom:9px;left:12px}
    .hero-spin{width:98px;height:98px;right:2%;bottom:30px}
  .spin text{font-size:18px}
  .ribbon{bottom:26px}
  .promise{padding:100px 0 110px}
  .float-ic{width:50px;height:50px;border-radius:16px}
  .float-ic .ic{width:24px;height:24px}
  .fi-1{top:-54px;right:4%}.fi-2{display:none}.fi-3{right:2%;bottom:-70px}.fi-4{left:6%;bottom:-70px}
  .svc,.gallery,.reviews,.salons,.meet,.cta{padding:90px 0}
  .svc{padding-top:20px}
  .sec-head{margin-bottom:34px}
  .bento{grid-template-columns:1fr;gap:18px}
  .bento-card{padding:24px}
  .bento-card:not(.bc-bath):not(.bc-pets) h3{padding-top:4px}
  .meet-photos{padding:6px}
  .meet-sticker{left:-6px;top:18px;font-size:.95rem}
  .mq-card{width:190px;padding:6px 6px 34px;border-radius:18px}
  .mq-tag{font-size:.9rem;bottom:7px;left:11px}
  .loc-card{padding:24px}
  .loc-actions .btn{flex:1 1 auto}
  .ftr-grid{grid-template-columns:1fr;gap:34px}
  .bk{padding:0;place-items:end stretch}
  .bk-sheet,.bk.is-frame .bk-sheet{width:100%;max-height:94dvh;border-radius:28px 28px 0 0;border-bottom:0;box-shadow:none}
  .bk.is-frame .bk-sheet{height:94dvh}
  .bk-head{padding:12px 12px 12px 18px}
  .bk-title{font-size:1.1rem}
  .bk-ext span{display:none}
  .step{grid-template-columns:60px 1fr;gap:14px}
  .step-ic{width:60px;height:60px;border-radius:20px}
  .steps::before{left:28px}
  .phero{padding:124px 0 90px}
}

@media (hover:none){.mq:hover .mq-track{animation-play-state:running}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .swoosh path{stroke-dashoffset:0}
  .js [data-rv]{opacity:1;transform:none}
  .promise-text .pw{color:var(--ink)}
  .promise-text em .pw{color:var(--plum);background-size:100% 38%}
  .mq{overflow-x:auto}
  .menu nav a{opacity:1;transform:none}
}

/* page-level extras */
.photo-frame .spin{position:absolute;right:-18px;bottom:-34px;z-index:3}
.photo-frame .sticker{z-index:3}
/* iPhone Duo open (about 626 x 890pt upright, 890 x 626pt sideways): the whole hero, rolling bar included, fits one screen.
   Vertical sizes follow svh so it still fits with Safari's toolbars showing. */
@media (min-width:768px) and (max-width:980px) and (orientation:landscape){
  .hero{min-height:100svh;padding:calc(74px + 2svh) 0 calc(66px + 2svh);align-items:center}
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-areas:"copy visual" "copy salons";column-gap:28px;row-gap:1.6svh;align-items:center}
  .hero-copy{align-self:center}
  .hero-badge{margin-bottom:2svh;padding:5px 14px 5px 8px;font-size:.86rem}
  .hero .eyebrow{font-size:.8rem;margin-bottom:1.6svh}
  .hero-title{font-size:clamp(2.6rem,min(6.6vw,10svh),4.4rem)}
  .hero-lede{font-size:1rem;line-height:1.5;margin:2.4svh 0 2.8svh}
  .hero-btns .btn-xl{padding:12px 22px;font-size:1.02rem}
  .hero-btns .hide-sm{display:none}   /* the salon chips sit right beside */
  .hero-visual{min-height:0;padding:0 0 26px}
  .deck{width:min(100%,34svh);translate:none}
  .card{padding:7px 7px 36px;border-radius:22px}
  .card img{border-radius:15px}
  .card-tag{font-size:.9rem;bottom:8px;left:12px}
  .hero-spin{right:-4px;top:-18px;bottom:auto;width:82px;height:82px}
  .deck-hint{font-size:.8rem;bottom:0}
  .hero-salons{align-self:start;flex-direction:column;align-items:center;gap:8px;margin-top:0}
  .ribbon{bottom:22px}
  .ribbon-set{padding:8px 12px;font-size:1rem;gap:20px}
}
@media (min-width:560px) and (max-width:767px) and (orientation:portrait){
  .hero{min-height:100svh;padding:calc(72px + 2svh) 0 calc(68px + 2svh);align-items:center}
  /* the copy's children join the grid so the rating badge can sit beside the cards */
  .hero-copy{display:contents}
  .hero-copy>*{position:relative;z-index:2}
  .hero-grid{grid-template-columns:calc(22svh + 76px) minmax(0,1fr);grid-template-areas:"title title" "lede lede" "btns btns" "visual badge" "visual salons";
             grid-template-rows:auto auto auto auto 1fr;column-gap:20px;row-gap:0;align-items:start}
  .hero-copy h1{grid-area:title}
  .hero-lede{grid-area:lede;margin:2.2svh 0 2.6svh}
  .hero-btns{grid-area:btns;margin-bottom:2.4svh}
  .hero-btns .btn{width:auto}
  .hero-btns .hide-sm{display:inline-flex}
  .hero-badge{grid-area:badge;align-self:end;justify-self:start;margin:0 0 12px;gap:8px;padding:6px 12px 6px 7px;font-size:.8rem;white-space:nowrap}
  .hero-badge-stars .ic{width:12px;height:12px}
  .card{padding:6px 6px 32px;border-radius:20px}
  .card-tag{font-size:.8rem;bottom:7px;left:10px;right:10px}
  .hero .eyebrow{margin-bottom:1.6svh}
  .hero-title{font-size:clamp(3rem,min(12.4vw,8.4svh),5rem)}
  .hero-visual{min-height:0;padding:0 0 26px;justify-items:start}
  .deck{width:min(100%,22svh);translate:none}
  .hero-spin{right:auto;left:-14px;top:-16px;bottom:auto;width:78px;height:78px}
  .deck-hint{font-size:.8rem;bottom:0;left:11svh;translate:-50% 0}
  .hero-salons{align-self:start;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;margin-top:0}
  .ribbon{bottom:22px}
  .ribbon-set{padding:9px 12px;font-size:1.05rem;gap:20px}
}
@media (max-width:640px){.photo-frame .spin{width:100px;height:100px;right:-6px;bottom:-26px}}

/* iPhone: keep the fixed bar, menu and booking sheet clear of the notch and home bar (viewport-fit=cover), and make small links easy to tap */
@supports (padding: env(safe-area-inset-top)) {
  .nav{padding-top:max(14px, env(safe-area-inset-top));padding-left:max(var(--gut), env(safe-area-inset-left));padding-right:max(var(--gut), env(safe-area-inset-right))}
  .menu{padding-bottom:max(28px, calc(env(safe-area-inset-bottom) + 16px));padding-left:max(var(--gut), env(safe-area-inset-left));padding-right:max(var(--gut), env(safe-area-inset-right))}
  .bk{padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left))}
  .ftr{padding-bottom:max(30px, calc(env(safe-area-inset-bottom) + 16px))}
}
.ftr-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
a, button, summary, [data-deck]{-webkit-tap-highlight-color:transparent}