/* ==========================================================
   Walky Paws NYC — additions on top of the template styles
   insured badge · highlights · marquee · reveals · curtain
   mobile menu · rate tables
   ========================================================== */
img{height:auto}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--deep);color:#fff;padding:10px 16px;border-radius:30px}
.skip:focus{left:12px}

/* logo */
.logo small{font-size:.62em;color:var(--red);margin-left:2px}
.f-logo small{color:var(--red);font-size:.5em;margin-left:4px;align-self:flex-start;margin-top:.15em}

/* insured badge (pill) */
.ins{display:inline-flex;align-items:center;gap:8px;background:var(--deep);color:#fff;border-radius:40px;padding:7px 14px 7px 8px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.04em;line-height:1;white-space:nowrap}
.ins i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.ins svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ins.light{background:#fff;color:var(--deep)}
.ins.orange{background:var(--red)}.ins.orange i{background:var(--deep)}
.nav .ins{font-size:14px}

/* highlights (5+ years / insured / animal lovers) */
.hl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:32px;overflow:hidden}
.hl > div{display:flex;align-items:center;gap:18px;padding:26px 28px;color:#fff;background:var(--red)}
.hl > div:nth-child(2){background:var(--deep)}
.hl-ic{flex:none;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.16);display:grid;place-items:center;transform:rotate(-8deg);transition:transform 500ms var(--spring)}
.hl > div:hover .hl-ic{transform:rotate(6deg) scale(1.08)}
.hl-ic svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hl b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1}
.hl span{display:block;font-size:18px;opacity:.9;margin-top:4px}

/* marquee band */
.marquee{position:relative;z-index:2;background:var(--red);color:#fff;overflow:hidden;transform:rotate(-2deg);margin:40px -20px;padding:18px 0;box-shadow:0 14px 30px rgba(242,107,29,.22)}
.marquee.dark{background:var(--deep);transform:rotate(1.5deg)}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee.dark .mq-track{animation-direction:reverse}
.mq-track span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.2vw,46px);line-height:1;white-space:nowrap}
.mq-track svg{width:.8em;height:.8em;color:var(--deep);fill:currentColor}
.marquee.dark .mq-track svg{color:var(--red)}
@keyframes mq{to{transform:translateX(-50%)}}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(56px);transition:opacity 900ms cubic-bezier(.16,1,.3,1),transform 1100ms cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
/* line-by-line heading reveal */
.js .split .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .split .ln > span{display:block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform 1000ms cubic-bezier(.16,1,.3,1)}
.js .split .ln:nth-child(2) > span{transition-delay:110ms}
.js .split .ln:nth-child(3) > span{transition-delay:220ms}
.js .split.in .ln > span{transform:none}
/* stagger children */
.js .stg > *{opacity:0;transform:translateY(40px);transition:opacity 800ms cubic-bezier(.16,1,.3,1),transform 900ms cubic-bezier(.16,1,.3,1)}
.js .stg.in > *{opacity:1;transform:none}
.js .stg.in > *:nth-child(2){transition-delay:100ms}.js .stg.in > *:nth-child(3){transition-delay:200ms}
.js .stg.in > *:nth-child(4){transition-delay:300ms}.js .stg.in > *:nth-child(5){transition-delay:400ms}.js .stg.in > *:nth-child(6){transition-delay:500ms}
.js .stg.in > *:nth-child(7){transition-delay:600ms}.js .stg.in > *:nth-child(8){transition-delay:700ms}
.js .stg.in > *:nth-child(n+9){transition-delay:750ms}

/* page transitions: see the leash stroke rules at the end */

/* scroll progress */
.prog{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--red);z-index:110;pointer-events:none}

/* floating book button (mobile) */
.fab{position:fixed;right:16px;bottom:16px;z-index:90;display:none !important;box-shadow:0 12px 26px rgba(17,17,17,.25);transform:translateY(140px);transition:transform 450ms var(--spring)}
.fab.show{transform:none}

/* mobile menu */
.burger{display:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--deep);color:#fff;cursor:pointer;place-items:center;position:relative;z-index:101}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform 300ms var(--ease),background 200ms}
.burger span::before,.burger span::after{content:'';position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:100;background:var(--red);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:100px 28px 40px;clip-path:circle(0% at calc(100% - 50px) 50px);transition:clip-path 700ms cubic-bezier(.76,0,.24,1),visibility 0s 700ms;visibility:hidden}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 50px) 50px);visibility:visible;transition:clip-path 700ms cubic-bezier(.76,0,.24,1)}
.mmenu a{font-family:var(--display);text-transform:uppercase;font-size:clamp(48px,13vw,84px);line-height:1.02;color:#fff;text-decoration:none}
.mmenu a:hover{color:var(--deep)}
.mmenu .ins{align-self:flex-start;margin-top:24px}
.menu-open{overflow:hidden}

/* rate tables */
.rate{width:100%;border-collapse:separate;border-spacing:0;font-size:19px}
.rate th{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:17px;text-align:left;background:var(--deep);color:#fff;padding:16px 20px;border-bottom:4px solid var(--red)}
.rate th:first-child{border-top-left-radius:20px}.rate th:last-child{border-top-right-radius:20px}
.rate td{padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;background:#fff;transition:background 200ms}
.rate tr:nth-child(even) td{background:#fff3ea}
.rate tr:last-child td{border-bottom:0}
.rate tr:last-child td:first-child{border-bottom-left-radius:20px}.rate tr:last-child td:last-child{border-bottom-right-radius:20px}
.rate td b{font-weight:700;font-size:21px}
.rate .pr{font-family:var(--display);font-size:24px;color:var(--red);white-space:nowrap}
.rate tbody tr:hover td{background:var(--sand)}

/* FAQ accordion */
.a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 500ms var(--ease)}
.a-wrap > div{overflow:hidden}
.qa.is-open .a-wrap{grid-template-rows:1fr}
.qa .a{animation:none;opacity:0;transform:translateY(-8px);transition:opacity 400ms,transform 500ms var(--ease)}
.qa.is-open .a{opacity:1;transform:none}
.qa.is-open .qi{transform:rotate(45deg)}
.qa.is-open{background:var(--sand-2)}

/* footer link */
.f-web{color:var(--cream);text-decoration:none;border-bottom:2px solid var(--red)}
.f-web:hover{color:var(--red)}
.foot .ins{margin-top:4px}

/* buttons: arrow nudge + shine */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);transform:translateX(-101%) skewX(-18deg);transition:transform 600ms var(--ease)}
.btn:hover::after{transform:translateX(101%) skewX(-18deg)}
.btn-r:hover .circ{transform:translateX(3px) rotate(-12deg)}

@media (max-width: 1024px){
  .nav .ins{display:none}
  .burger{display:grid}
  .nav-r .btn{display:none}
  .hl{grid-template-columns:minmax(0,1fr)}
  .fab{display:inline-flex !important}
}
@media (max-width: 810px){
  .rate{font-size:17px}
  .rate thead{display:none}
  .rate,.rate tbody,.rate tr,.rate td{display:block;width:100%}
  .rate tr{margin-bottom:12px;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(17,17,17,.06)}
  .rate td,.rate tr:nth-child(even) td{border:0;padding:6px 18px;background:#fff;border-radius:0 !important}
  .rate td:first-child{padding-top:18px}.rate td:last-child{padding-bottom:18px}
  .hl b{font-size:26px}
  .marquee{margin:24px -20px;padding:14px 0}
}
@media (prefers-reduced-motion: reduce){
  .js .rv,.js .stg > *,.js .split .ln > span{opacity:1 !important;transform:none !important;transition:none !important}
  .mq-track{animation:none}
}

/* shared bits used on several pages */
.s-l svg,.s-r svg,.fl svg{display:block;width:100%}
.hero-ins{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.cta-ins{position:relative;margin-bottom:22px}
.cta-sub{position:relative;margin:18px 0 0;font-size:21px;font-weight:600;color:#fff}
.faq-list .qa{margin-top:12px}.faq-list .qa:first-child{margin-top:0}
.field.err input,.field.err select,.field.err textarea{border-color:#d1350f;background:#fff}
.field.err .chips .chip{border-color:#d1350f}
.field .err-msg{display:none;font-size:15px;font-weight:600;color:#c4320c}
.field.err .err-msg{display:block}

/* illustrated scenes behind the dogs (Higgsfield) */
.wp img.scene{position:absolute;inset:0;top:0;left:0;right:auto;bottom:auto;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;transform:none;animation:none;filter:none;z-index:0;transition:transform 1400ms cubic-bezier(.16,1,.3,1)}
.wp .disc{overflow:hidden}
.wp .disc img.scene{border-radius:50%}
.wp .place:hover img.scene,.wp .svc:hover .svc-img img.scene,.wp .rc:hover img.scene,.wp .banner:hover img.scene{transform:scale(1.06)}
.wp .svc-num{z-index:2}
.wp .rc-img{position:relative}
.wp .rc-img img.photo,.wp .f-img img.photo{position:relative;z-index:1}
.wp .place .cap{z-index:2}
.wp .place img.photo{z-index:1}
.wp .svc-num{background:var(--deep);color:#fff;border-radius:18px;padding:8px 16px 10px;font-size:40px;opacity:1;box-shadow:0 6px 14px rgba(17,17,17,.25)}
.wp .svc-img.deep .svc-num{background:var(--red)}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* ── footer: four columns + giant wordmark with stickers ── */
.foot.ft{background:var(--deep);color:#fff8f2;padding:clamp(48px,5vw,72px) 0 28px;overflow:hidden}
.ft-cols{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.6fr;gap:32px;align-items:start}
.ft-col{display:flex;flex-direction:column;gap:12px}
.ft-h{margin:0 0 6px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1;color:#fff8f2}
.ft-col a,.ft-col span{font-size:20px;font-weight:500;color:#fff8f2;text-decoration:none;width:max-content;background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size 350ms var(--ease),color 200ms}
.ft-col a:hover{color:var(--red);background-size:100% 2px}
.ft-sign{display:flex;flex-direction:column;gap:14px;justify-self:end;width:100%;max-width:500px}
.ft-sign label{font-size:21px;font-weight:600}
.ft-row{display:flex;gap:10px}
.ft-row input{flex:1;min-width:0;min-height:54px;border-radius:12px;border:1.5px solid rgba(255,248,242,.75);background:transparent;color:#fff;padding:0 18px;font-family:var(--text);font-size:18px;font-weight:500;outline:none;transition:border-color 200ms}
.ft-row input::placeholder{color:rgba(255,248,242,.6)}
.ft-row input:focus{border-color:var(--red)}
.ft-row button{flex:none;min-width:130px;min-height:54px;border:0;border-radius:6px;background:#fff8f2;color:var(--deep);font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background 200ms,color 200ms,transform 200ms}
.ft-row button:hover{background:var(--red);color:#fff;transform:translateY(-2px)}

.ft-mark{position:relative;margin:clamp(40px,7vw,110px) auto 0;width:min(100% - 40px,1880px);text-align:center;line-height:.8}
.ft-word{display:inline-flex;justify-content:center;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,19.4vw,370px);line-height:.86;letter-spacing:-.01em;color:#fff8f2;white-space:nowrap}
.ft-word > span{display:inline-block}
.ft-word .sp{width:.18em}
.js .ft-word > span{transform:translateY(105%);opacity:0;transition:transform 1000ms cubic-bezier(.16,1,.3,1),opacity 600ms}
.js .ft-mark.in .ft-word > span{transform:none;opacity:1}
.ft-stk{position:absolute;z-index:2;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));transition:transform 900ms var(--spring),opacity 500ms}
.js .ft-stk,.js .ft-badge{opacity:0;transform:scale(.4) rotate(-30deg)}
.js .ft-mark.in .ft-stk,.js .ft-mark.in .ft-badge{opacity:1}
.ft-stk.s1{width:13%;left:15%;top:-26%;--r:-12deg}
.ft-stk.s2{width:12%;left:4%;bottom:-24%;--r:18deg}
.ft-stk.s3{width:11%;left:61%;bottom:-20%;--r:-6deg}
.ft-stk.s4{width:15%;right:24%;top:-30%;--r:4deg}
.ft-stk.s5{width:12%;right:1%;top:-22%;--r:10deg}
.js .ft-mark.in .ft-stk{transform:rotate(var(--r));animation:ftbob 3.6s ease-in-out infinite alternate}
.ft-mark.in .s2{animation-delay:-1s !important}.ft-mark.in .s3{animation-delay:-2s !important}.ft-mark.in .s4{animation-delay:-.5s !important}.ft-mark.in .s5{animation-delay:-1.5s !important}
@keyframes ftbob{from{translate:0 0}to{translate:0 -10px}}
.ft-badge{position:absolute;z-index:3;left:39%;top:30%;width:13%;aspect-ratio:200/160;display:grid;place-items:center;transition:transform 900ms var(--spring),opacity 500ms}
.ft-badge svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--red);stroke:var(--deep);stroke-width:5}
.ft-badge b{position:relative;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(14px,2.1vw,40px);line-height:.92;color:var(--deep);text-align:center}
.js .ft-mark.in .ft-badge{transform:rotate(-9deg)}
.ft-base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,7vw,110px);padding-top:20px;border-top:1px solid rgba(255,248,242,.18);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,248,242,.75)}
@media (max-width: 1024px){
  .ft-cols{grid-template-columns:1fr 1fr 1fr}
  .ft-sign{grid-column:1 / -1;justify-self:start;max-width:none}
}
@media (max-width: 810px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:36px 24px}
  .ft-col:nth-child(3){grid-column:1 / -1}
  .ft-h{font-size:26px}
  .ft-col a,.ft-col span{font-size:18px}
  .ft-word{font-size:17.6vw}
  .ft-stk.s1{top:-38%}.ft-stk.s4{top:-44%}.ft-stk.s5{top:-34%}
  .ft-stk.s2{bottom:-34%}.ft-stk.s3{bottom:-30%}
  .ft-row button{min-width:96px}
}
@media (prefers-reduced-motion: reduce){
  .js .ft-word > span,.js .ft-stk,.js .ft-badge{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ── highlights: three illustrated cards (art in the "How we started" style) ── */
.hl{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);border-radius:0;overflow:visible;padding-top:clamp(56px,6vw,90px)}
.hl > .hl-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-height:clamp(190px,17vw,240px);padding:clamp(24px,2.4vw,34px);padding-right:clamp(130px,15vw,200px);border-radius:32px;background:var(--red);color:#fff;overflow:visible;transition:transform 500ms var(--spring),box-shadow 400ms}
.hl > .hl-card.c2{background:var(--deep)}
.hl > .hl-card.c3{background:var(--sand);color:var(--deep)}
.hl > .hl-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 22px 40px rgba(17,17,17,.16)}
.hl-art{position:absolute;right:clamp(-6px,-.4vw,0px);top:clamp(-70px,-5vw,-44px);width:clamp(150px,16vw,230px);height:auto;transform:rotate(5deg);filter:drop-shadow(0 12px 18px rgba(17,17,17,.22));transition:transform 700ms var(--spring);pointer-events:none}
.hl-card.c2 .hl-art{transform:rotate(-5deg)}
.hl > .hl-card:hover .hl-art{transform:translateY(-10px) rotate(-3deg) scale(1.05)}
.hl .hl-k{display:block;margin:0 0 6px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.hl b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.3vw,52px);line-height:.95}
.hl .hl-s{display:block;margin-top:6px;font-size:18px;line-height:1.3;opacity:.92}
.hl-card.c3 .hl-k{color:var(--red);opacity:1}
.js .hl.stg.in .hl-art{animation:hlpop 900ms var(--spring) both}
.js .hl.stg.in .hl-card:nth-child(2) .hl-art{animation-delay:120ms}
.js .hl.stg.in .hl-card:nth-child(3) .hl-art{animation-delay:240ms}
@keyframes hlpop{from{opacity:0;scale:.5;rotate:-20deg}to{opacity:1;scale:1;rotate:0deg}}
@media (max-width: 1024px){
  .hl{grid-template-columns:minmax(0,1fr);gap:56px;padding-top:56px}
  .hl > .hl-card{min-height:170px;padding-right:170px}
  .hl-art{width:170px;top:-46px}
}
@media (max-width: 480px){
  .hl > .hl-card{padding-right:130px;min-height:160px}
  .hl-art{width:140px;top:-40px;right:-4px}
  .hl .hl-s{font-size:16px}
}
.hl-art{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);mask-image:linear-gradient(to bottom,#000 72%,transparent 98%)}
/* stacked: art pops out of the top-right corner, text runs full width below */
.hl > .hl-card{padding:clamp(24px,2.4vw,34px);min-height:clamp(250px,21vw,300px)}
.hl-art{width:clamp(150px,13.5vw,200px);top:clamp(-74px,-5vw,-50px);right:clamp(6px,1.2vw,18px)}
.hl b{white-space:nowrap;font-size:clamp(34px,3.1vw,48px)}
@media (max-width: 1024px){
  .hl > .hl-card{min-height:200px;padding-right:170px}
  .hl-art{width:160px;top:-44px;right:8px}
}
@media (max-width: 480px){
  .hl > .hl-card{min-height:190px;padding-right:118px}
  .hl-art{width:128px;top:-40px;right:2px}
  .hl b{font-size:34px}
}
@media (min-width: 1025px){.hl-art{width:clamp(170px,15.5vw,236px);top:clamp(-96px,-6.4vw,-64px)}.hl{padding-top:clamp(80px,7vw,110px)}}

/* illustrated bone/ball stickers in page headers and panels */
.stk-img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(17,17,17,.18))}
.ahero .s-l{width:130px;left:-120px;top:-40px}
.ahero .s-r{width:100px;right:-96px}
.why-s.ws1{width:120px}.why-s.ws2{width:96px}
@media (max-width: 810px){.ahero .s-r{width:64px;right:-6px;top:-44px}}
/* closing banners on every page: illustrated skyline + leash scene behind */
.wp .cta img.cta-bg.scene{z-index:0;object-position:50% 100%}
.cta > *:not(.cta-bg){position:relative;z-index:1}
/* about: illustrated rooftop disc behind the three dogs */
.center-dog .cd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(17,17,17,.2))}
.center-dog:has(.cd-bg)::before{display:none}
.center-dog img.photo{position:relative;z-index:1}
/* contact map: photo above the illustrated map */
.map img.photo{z-index:1}.map .map-cap{z-index:2}
.tile{position:relative}.tile img.photo{position:relative;z-index:1}.tile:hover img.scene{transform:scale(1.06)}
/* keep side gutters on page headers (their vertical padding shorthand was wiping them) */
.wrap.ahero{padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap.sec{padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.btn.fab{position:fixed}

/* ── mobile menu overlay: numbered links, illustration, tidy contact footer ── */
.mmenu{justify-content:space-between;gap:24px;padding:96px clamp(22px,6vw,40px) 26px;overflow-y:auto;overscroll-behavior:contain}
.mm-links{display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
.mmenu .mm-links a{display:flex;align-items:baseline;gap:14px;font-size:clamp(44px,12.5vw,76px);line-height:1.02;opacity:0;transform:translateY(34px);transition:opacity 500ms,transform 700ms cubic-bezier(.16,1,.3,1),color 200ms}
.mm-links a i{font-style:normal;font-family:var(--text);font-weight:700;font-size:15px;letter-spacing:.08em;color:rgba(255,255,255,.7);transform:translateY(-.9em)}
.mm-links a.on{color:var(--deep)}
.menu-open .mm-links a{opacity:1;transform:none}
.menu-open .mm-links a:nth-child(1){transition-delay:180ms}.menu-open .mm-links a:nth-child(2){transition-delay:230ms}
.menu-open .mm-links a:nth-child(3){transition-delay:280ms}.menu-open .mm-links a:nth-child(4){transition-delay:330ms}
.menu-open .mm-links a:nth-child(5){transition-delay:380ms}
.mm-art{position:absolute;right:-6px;top:38%;width:min(44vw,210px);height:auto;z-index:1;pointer-events:none;opacity:0;transform:scale(.6) rotate(-14deg);transition:opacity 500ms 420ms,transform 900ms 420ms var(--spring);filter:drop-shadow(0 12px 18px rgba(17,17,17,.2))}
.menu-open .mm-art{opacity:1;transform:rotate(6deg)}
.mm-foot{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:2px dashed rgba(255,248,242,.45);opacity:0;transform:translateY(24px);transition:opacity 500ms 450ms,transform 700ms 450ms cubic-bezier(.16,1,.3,1)}
.menu-open .mm-foot{opacity:1;transform:none}
.mm-cta{align-self:stretch;justify-content:space-between}
.mm-contact{display:flex;flex-direction:column;gap:10px}
.mmenu .mm-row{display:flex;align-items:center;gap:12px;font-family:var(--text);font-weight:600;font-size:18px;line-height:1.2;color:#fff;text-transform:none}
.mm-row svg{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:rgba(255,255,255,.18);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-socials{display:flex;gap:10px}
.mmenu .mm-soc{width:46px;height:46px;border-radius:50%;background:#fff8f2;color:var(--red);display:grid;place-items:center;font-size:0;transition:transform 250ms var(--spring)}
.mm-soc:hover{transform:rotate(-10deg) scale(1.06)}
.mm-soc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.mm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mmenu .mm-meta .ins{margin:0;font-size:13px}
@media (max-height: 700px){.mm-art{width:min(34vw,150px);top:34%}.mmenu .mm-links a{font-size:clamp(38px,10vw,56px)}}
@media (prefers-reduced-motion: reduce){.mm-links a,.mm-art,.mm-foot{opacity:1 !important;transform:none !important;transition:none !important}}

/* services page: jump links become one swipeable row on phones */
@media (max-width: 810px){
  .ahero .jump{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;width:calc(100% + 40px);margin:0 -20px;padding:4px 20px 8px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent)}
  .ahero .jump::-webkit-scrollbar{display:none}
  .ahero .jump a{flex:none;scroll-snap-align:start;white-space:nowrap}
}
.mmenu a.mm-cta{font-family:var(--display);font-size:19px;line-height:1;color:var(--deep);min-height:54px}.mmenu a.mm-cta:hover{color:var(--deep)}
.mm-art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}

/* the menu's dashed divider, used as the site-wide divider style */
.ft-base{border-top:2px dashed rgba(255,248,242,.35)}
.wp .svc{border-top-style:dashed;border-top-width:2px}
.svc-orange .svc{border-left:2px dashed rgba(255,248,242,.45)}
.svc-orange .svc:first-child{border-left:0}
.rate td{border-bottom:2px dashed var(--line)}
.rate tr:last-child td{border-bottom:0}
.tl::before{width:0;background:none;border-left:3px dashed var(--red)}
.stat{border-bottom-width:2px;border-bottom-style:dashed}
.ft-cols{padding-bottom:clamp(28px,3vw,40px);border-bottom:2px dashed rgba(255,248,242,.3)}
.faq-list .qa + .qa{position:relative}
@media (max-width: 1024px){.svc-orange .svc{border-left:0}}
/* phones/tablets: once you scroll, the menu button floats top-right so it is always reachable */
.burger.float{position:fixed;top:14px;right:14px;z-index:101;box-shadow:0 10px 24px rgba(17,17,17,.25);animation:burgerIn 450ms var(--spring) both}
@keyframes burgerIn{from{transform:translateY(-70px) scale(.6)}to{transform:none}}

/* logo pack: header + footer logos */
.logo.logo-img{display:block;line-height:0}
.logo.logo-img img{display:block;width:200px;height:auto;transition:transform 400ms var(--spring)}
.logo.logo-img:hover img{transform:rotate(-2deg) scale(1.03)}
@media (max-width: 810px){.logo.logo-img img{width:150px}}
.ft-brand{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-bottom:clamp(32px,4vw,48px);margin-bottom:clamp(32px,4vw,48px);border-bottom:2px dashed rgba(255,248,242,.3)}
.ft-brand img{display:block;width:clamp(240px,24vw,320px);height:auto}
.ft-brand p{margin:0;max-width:380px;font-size:20px;font-weight:600;line-height:1.35;color:rgba(255,248,242,.85)}

/* services: compact link card to How We Work */
.how-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,5vw,72px);background:var(--sand);border-radius:40px;padding:clamp(28px,4vw,56px)}
.how-art{width:min(100%,340px);height:auto;justify-self:center;filter:drop-shadow(0 14px 22px rgba(17,17,17,.16));transform:rotate(-4deg);transition:transform 600ms var(--spring)}
.how-card:hover .how-art{transform:rotate(3deg) scale(1.04)}
.how-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width: 810px){.how-card{grid-template-columns:minmax(0,1fr);border-radius:28px}.how-art{width:220px}}
/* how we work page */
.cards.four{row-gap:56px}
.process-band .head .h2{color:#fff}
.process-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:56px}
.story-trail.process-trail{padding-top:clamp(32px,4vw,64px)}
.ahero .hero-ins{animation:pop 700ms 450ms var(--ease) both}
@media (max-width: 1280px){.nav .ins{display:none}}

/* ── illustrated loading screen (first visit) + quick paw wipe (page changes) ── */

/* review cards (Areas grid + home carousel) */
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.rv-card{display:flex;flex-direction:column;gap:18px;background:#fff;border-radius:28px;padding:24px;border:2px dashed var(--line);transition:transform 400ms var(--spring)}
.rv-card:hover{transform:translateY(-6px)}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stars{color:var(--red);font-size:22px;letter-spacing:2px}
.rv-tag{background:var(--sand);border-radius:20px;padding:4px 12px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.rv-card blockquote{margin:0;font-family:var(--display);text-transform:uppercase;font-size:22px;line-height:1.15;color:var(--deep)}
.rv-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rv-who img{width:52px;height:52px;border-radius:50%;object-fit:contain;background:var(--sand)}
.rv-who b{display:block;font-size:17px}
.rv-who span{font-size:15px;color:var(--muted)}

.rv-grid .rv-card{border:2px dashed var(--line)}
/* home: review cards in the swipe carousel */
.rep-track .rv-card{flex:none;width:min(420px,82vw);border:0;box-shadow:0 18px 40px rgba(17,17,17,.18);min-height:300px}
.rep-track .rv-card blockquote{font-size:clamp(20px,1.8vw,24px)}
@media (max-width: 1024px){.rv-grid{grid-template-columns:minmax(0,1fr)}}

/* phones: smaller buttons (still 48px tap targets) with room to breathe */
@media (max-width: 810px){
  .wp .btn{min-height:48px;font-size:16px;gap:12px;padding:4px 4px 4px 20px}
  .wp .btn .circ{width:38px;height:38px}
  .wp .btn .circ svg{width:15px;height:15px}
  .wp .btn-o{padding:4px 20px}
  .wp .btn.fab{min-height:46px;font-size:15px;right:14px;bottom:14px}
  .hero-btns{gap:22px;margin-top:22px}
  .row-head{gap:24px}
  .row-head > .btn,.head .btn,.faq-l .btn,.how-copy .btn,.hw-head .btn,.svc-c .btn{margin-top:10px}
  .process-cta,.btns,.gal-cta,.rep + .wrap .center{gap:14px}
  .cta .btn{margin-top:30px}
  .mmenu a.mm-cta{min-height:50px;font-size:17px}
  .bk-foot .btn{min-height:46px;font-size:15px}
}

/* ── button style: label pill + a separate matching arrow circle (not connected) ── */
.wp .btn:has(.circ),.bk .btn:has(.circ){
  --h:56px;--g:10px;--pill:var(--red);--arrow:#fff;
  position:relative;isolation:isolate;overflow:visible;
  min-height:var(--h);gap:0;padding:0 calc(var(--h) + var(--g) + 26px) 0 26px;
  background:none !important;box-shadow:none !important;border:0;
  filter:drop-shadow(0 8px 14px rgba(17,17,17,.12));
  transition:transform 260ms var(--ease),filter 260ms
}
.wp .btn:has(.circ)::before,.bk .btn:has(.circ)::before{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;left:0;right:calc(var(--h) + var(--g));
  border-radius:60px;background:var(--pill);transition:background 200ms
}
.wp .btn:has(.circ)::after,.bk .btn:has(.circ)::after{display:none}
.wp .btn:has(.circ) .circ,.bk .btn:has(.circ) .circ{
  position:absolute;right:0;top:0;width:var(--h);height:var(--h);
  background:var(--pill) !important;color:var(--arrow) !important;
  transition:transform 350ms var(--spring),background 200ms
}
.wp .btn:has(.circ) .circ svg,.bk .btn:has(.circ) .circ svg{width:18px;height:18px}
.wp .btn.btn-r:has(.circ),.bk .btn.btn-r:has(.circ){--pill:var(--red);--arrow:#fff;color:#fff}
.wp .btn.btn-c:has(.circ),.bk .btn.btn-c:has(.circ){--pill:#fff8f2;--arrow:var(--red);color:var(--deep)}
.wp .btn:has(.circ):hover,.bk .btn:has(.circ):hover{transform:translateY(-2px);filter:drop-shadow(0 12px 18px rgba(17,17,17,.18))}
.wp .btn:has(.circ):hover .circ,.bk .btn:has(.circ):hover .circ{transform:translateX(4px) rotate(-12deg)}
.wp .btn.btn-r:has(.circ):hover{--pill:#e45f12;color:#fff}
.wp .btn.btn-c:has(.circ):hover{--pill:#ffffff;color:var(--deep)}
/* on cream sections, cream buttons get a soft outline so the shapes still read */
.wp .btn.btn-c:has(.circ)::before{box-shadow:inset 0 0 0 2px rgba(17,17,17,.06)}
/* sizes */
.wp .nav .btn:has(.circ){--h:48px;padding-left:20px;padding-right:calc(48px + 10px + 20px);font-size:17px}
.bk-foot .btn:has(.circ){--h:50px}
@media (max-width: 810px){
  .wp .btn:has(.circ),.bk .btn:has(.circ){--h:48px;--g:8px;padding:0 calc(48px + 8px + 20px) 0 20px;font-size:16px}
  .wp .btn:has(.circ) .circ svg,.bk .btn:has(.circ) .circ svg{width:15px;height:15px}
  .wp .btn.fab:has(.circ){--h:46px}
  .bk-foot .btn:has(.circ){--h:46px}
}

/* ── premium loader v2: "walking to your door" (Higgsfield art) ── */
/* exit: the orange closes into a circle around the dog, revealing the page */

/* trimmed buttons, all screens */
.wp .btn:has(.circ),.bk .btn:has(.circ){--h:48px;--g:8px;padding:0 calc(var(--h) + var(--g) + 22px) 0 22px;font-size:17px;letter-spacing:.02em}
.wp .btn:has(.circ) .circ svg,.bk .btn:has(.circ) .circ svg{width:15px;height:15px}
.wp .nav .btn:has(.circ){--h:42px;padding:0 calc(42px + 8px + 18px) 0 18px;font-size:15px}
.bk-foot .btn:has(.circ){--h:44px}
.wp .btn-o{min-height:48px;font-size:17px;padding:4px 22px}
@media (max-width: 810px){
  .wp .btn:has(.circ),.bk .btn:has(.circ){--h:44px;--g:7px;padding:0 calc(44px + 7px + 18px) 0 18px;font-size:15px}
  .wp .btn:has(.circ) .circ svg,.bk .btn:has(.circ) .circ svg{width:13px;height:13px}
  .wp .btn.fab:has(.circ){--h:44px}
  .bk-foot .btn:has(.circ){--h:44px}
  .wp .btn-o{min-height:44px;font-size:15px;padding:4px 18px}
}

/* ── loader v3: the "How we started" ribbon on cream, burst + lift reveal ── */
/* ── tighter page endings: last section → closing CTA → footer ── */
.sec:has(+ .cta-wrap),.sec:has(+ section > .cta),main > .sec:last-child{padding-bottom:clamp(64px,6vw,96px)}
.cta{padding-top:clamp(56px,6vw,84px)}
.cta .btn{margin-top:clamp(24px,2.4vw,32px)}
.cta-sub{margin-top:14px}
.cta-img{width:min(480px,76%);margin-top:clamp(24px,2.6vw,34px)}
.foot.ft{padding:clamp(40px,4vw,60px) 0 22px}
.ft-brand{padding-bottom:clamp(22px,2.6vw,34px);margin-bottom:clamp(22px,2.6vw,34px)}
.ft-cols{padding-bottom:clamp(22px,2.4vw,32px)}
.ft-mark{margin-top:clamp(28px,4vw,64px)}
.ft-base{margin-top:clamp(28px,3.6vw,56px)}
@media (max-width: 810px){
  .cta-img{width:min(340px,84%)}
  .ft-cols{gap:26px 20px}
  .ft-col{gap:9px}
  .ft-h{font-size:24px;margin-bottom:2px}
  .ft-brand p{font-size:17px}
  .ft-base{flex-direction:row;row-gap:10px}
}
@media (max-width: 600px){ .cta-img{width:min(290px,78%)} .cta{padding-top:52px} }

/* ── page transitions: drawn leash stroke ── */
.page-draw{position:fixed;inset:0;z-index:250;pointer-events:none;overflow:clip;visibility:hidden}
.page-draw-shape{position:absolute;inset:0}
.page-draw-svg{position:absolute;top:-15%;left:-15%;width:130%;height:130%;overflow:visible}
.page-draw path{stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 200;stroke-width:50;opacity:0}
.pd-line{stroke:var(--red)}
html.draw-enter .page-draw{z-index:310}
html.draw-enter .page-draw{visibility:visible;background:var(--red)}
.page-draw.pd-full{background:var(--red)}
html.draw-enter .page-draw path{stroke-dasharray:100 200;stroke-dashoffset:0;stroke-width:300;opacity:1}
/* hold the first-screen entrances until the page is revealed */
html.ld-wait main *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){.page-draw{display:none !important}}

/* phone safeguards: no text inflation on rotate, no double-tap zoom (pinch still works), no sideways drift */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{overflow-x:clip;max-width:100%}
img,svg,video{max-width:100%}
input,select,textarea{font-size:max(16px,1em)}

/* phones + tablets: the logo follows you down the page, beside the floating menu button */
.logo-float{display:none}
@media (max-width: 1024px){
  .logo-float{display:flex;align-items:center;position:fixed;top:14px;left:14px;z-index:101;height:52px;padding:0 16px;border-radius:40px;background:#fff8f2;
    box-shadow:0 10px 24px rgba(17,17,17,.18);opacity:0;transform:translateY(-12px) scale(.96);pointer-events:none;
    transition:opacity 300ms ease,transform 450ms var(--spring)}
  .logo-float img{display:block;width:118px;height:auto}
  .logo-float.on{opacity:1;transform:none;pointer-events:auto}
}

/* floating Book a walk v2: every screen size, fades in after the hero, out at the footer */
.wp .btn.fab,.fab{display:inline-flex !important;position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:90;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px) scale(.96);
  transition:opacity 350ms ease,transform 500ms var(--spring),visibility 0s linear 350ms}
.wp .btn.fab.show,.fab.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity 350ms ease,transform 500ms var(--spring),visibility 0s}
.menu-open .fab,.bk-lock .fab{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}


/* desktop header (after village.health): a full-width bar at the top of the page that, once you
   scroll, tightens into a floating black pill with a soft shadow; back at the top it opens out again.
   The header is fixed and the page keeps a matching spacer, so nothing underneath ever moves. */
.logo.logo-img img.logo-alt{display:none}
@media (min-width: 1025px){
  .wp{padding-top:var(--navh,100px)}
  .wp > .nav{position:fixed;top:0;left:0;right:0;z-index:95;margin:0 auto;width:100%;max-width:1280px;
    border-radius:0;background:rgba(255,248,242,0);box-shadow:0 0 0 rgba(17,17,17,0);
    transition:max-width 650ms cubic-bezier(.22,1,.36,1),top 650ms cubic-bezier(.22,1,.36,1),padding 650ms cubic-bezier(.22,1,.36,1),
      border-radius 650ms cubic-bezier(.22,1,.36,1),background-color 350ms ease,box-shadow 450ms ease}
  .wp > .nav .logo.logo-img{position:relative}
  .wp > .nav .logo.logo-img img{transition:opacity 300ms ease,width 650ms cubic-bezier(.22,1,.36,1)}
  .wp > .nav .logo.logo-img img.logo-alt{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
  .wp > .nav .nav-links a{transition:border-color 150ms,color 300ms ease}
  /* scrolled: the floating pill */
  .wp > .nav.nav-stuck{top:12px;max-width:min(980px,calc(100% - 48px));padding-top:12px;padding-bottom:12px;padding-left:28px;padding-right:14px;
    border-radius:22px;background:var(--deep);box-shadow:0 18px 40px rgba(17,17,17,.22)}
  .wp > .nav.nav-stuck .logo.logo-img img{width:150px}
  .wp > .nav.nav-stuck .logo.logo-img img:first-child{opacity:0}
  .wp > .nav.nav-stuck .logo.logo-img img.logo-alt{opacity:1}
  .wp > .nav.nav-stuck .nav-links a{color:#fff8f2}
  .wp > .nav .nav-links{transition:gap 650ms cubic-bezier(.22,1,.36,1)}
  .wp > .nav.nav-stuck .nav-links{gap:26px}
  .wp > .nav.nav-stuck .nav-links a{font-size:16px}
  .wp > .nav.nav-stuck .nav-links a:hover,.wp > .nav.nav-stuck .nav-links a.on{border-color:var(--red)}
  .wp > .nav.nav-stuck .ins{display:none}
  .wp > .nav.nav-stuck .btn:has(.circ)::before{box-shadow:none}
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce){
  .wp > .nav,.wp > .nav .logo.logo-img img{transition:none}
}

/* floating Book a walk: centred at the bottom on every screen */
.wp .btn.fab,.fab{left:50%;right:auto;transform:translate(-50%,24px) scale(.96)}
.wp .btn.fab.show,.fab.show{transform:translate(-50%,0)}

/* menu illustration: pops in (overshoot + wiggle) after the links, then bobs gently */
@keyframes mmPop{0%{opacity:0;transform:scale(.3) rotate(-22deg)}55%{opacity:1;transform:scale(1.14) rotate(12deg)}75%{transform:scale(.95) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(6deg)}}
@keyframes mmBob{from{translate:0 0}to{translate:0 -10px}}
.menu-open .mm-art{animation:mmPop 850ms 380ms cubic-bezier(.34,1.56,.64,1) both,mmBob 2.4s 1.3s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){.menu-open .mm-art{animation:none}}

/* back to top: a little dog collar whose ID tag carries the arrow and swings on hover */
.top-link .top-ic.collar{width:64px;height:64px;border-radius:0;background:none;color:inherit;display:block;overflow:visible}
.top-link .top-ic.collar svg{width:64px;height:64px;overflow:visible}
.collar .c-band{fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round}
.collar .c-stitch{fill:none;stroke:#fff8f2;stroke-width:1.4;stroke-dasharray:2.4 3;stroke-linecap:round;opacity:.85}
.collar .c-buckle{fill:none;stroke:#fff8f2;stroke-width:2.2}
.collar .c-ring{fill:none;stroke:#d8d2cc;stroke-width:2.2}
.collar .c-disc{fill:#fff8f2;stroke:var(--red);stroke-width:2.5}
.collar .c-hole{fill:#111}
.collar .c-arrow{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.collar .c-tag{transform-box:view-box;transform-origin:32px 26px;transition:transform 400ms cubic-bezier(.34,1.56,.64,1)}
.top-link:hover .top-ic.collar{transform:none;background:none}
.top-link:hover .collar .c-tag,.top-link:focus-visible .collar .c-tag{animation:tagSwing 900ms ease-in-out}
@keyframes tagSwing{0%{transform:rotate(0)}20%{transform:rotate(16deg)}45%{transform:rotate(-12deg)}70%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.top-link:hover .collar .c-tag{animation:none}}
.ft-base .ft-copy{white-space:nowrap}
@media (max-width: 810px){
  .ft-base{flex-direction:column-reverse !important;align-items:center;justify-content:center;text-align:center;row-gap:14px}
  .ft-base .ft-copy{font-size:clamp(8.5px,2.7vw,13px);letter-spacing:.02em}
}

/* no divider between the footer columns and the big wordmark */
.ft-cols{border-bottom:0 !important}

/* 7 nav links: tighter spacing on narrow desktops so nothing touches the Book button */
@media (min-width: 1025px) and (max-width: 1240px){
  .wp > .nav .nav-links{gap:20px}
  .wp > .nav .nav-links a{font-size:16px}
  .wp > .nav.nav-stuck .nav-links{gap:16px}
  .wp > .nav.nav-stuck .nav-links a{font-size:15px}
  .wp > .nav .ins{display:none}
}

/* Walky Paws logo (stacked, taller shape): keep header heights about the same as before */
.logo.logo-img img{width:184px}
@media (max-width: 810px){.logo.logo-img img{width:140px}}
@media (max-width: 1024px){.logo-float img{width:108px}}
@media (min-width: 1025px){.wp > .nav.nav-stuck .logo.logo-img img{width:128px}}