/* Brand styles shared with 4pawsboutiquespa.com */
/* 4 Paws Mobile Spa — refreshed site */
:root{
  --navy:#005490;      /* brand navy (existing) */
  --navy-deep:#0B2A45; /* ink */
  --blue:#3D9BE9;      /* brand bright blue (existing) */
  --royal:#3A54B4;     /* brand royal (existing) */
  --sky:#EAF3FC;       /* tint of brand blue */
  --mist:#F5F8FC;
  --line:#DCE6F1;
  --muted:#4A5D72;
  --white:#fff;
  --radius:20px;
  --radius-lg:28px;
  --max:1200px;
  --shadow:0 1px 2px rgba(11,42,69,.06),0 8px 24px rgba(11,42,69,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--navy-deep);background:var(--white);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
a:hover{color:var(--royal)}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:800}
h1{font-size:clamp(2.5rem,6vw,4.5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.35rem;letter-spacing:-.01em;font-weight:700}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.lead{font-size:1.2rem;color:var(--muted);max-width:40ch}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);color:#fff}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--sky);color:var(--navy-deep)}
.btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--navy)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand img{width:44px;height:44px;border-radius:12px}
.brand span{font-family:"Chelsea Market",cursive;font-size:1.4rem;line-height:1;color:var(--navy)}
.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;color:var(--navy-deep);font-weight:600;font-size:.98rem}
.menu a:hover,.menu a[aria-current=page]{color:var(--navy)}
.menu a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-phone{font-weight:700;text-decoration:none;color:var(--navy-deep);white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;width:48px;height:48px;border-radius:12px;color:var(--navy);cursor:pointer}
.menu-toggle svg{width:26px;height:26px}

/* Hero */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,69,0) 25%,rgba(11,42,69,.55) 60%,rgba(11,42,69,.85) 100%)}
.hero .wrap{position:relative;z-index:1;padding-top:120px;padding-bottom:72px;width:100%}
.hero .eyebrow{color:#fff;opacity:.9}
.hero h1{margin:14px 0 18px;max-width:14ch}
.hero p{font-size:1.25rem;max-width:44ch;color:rgba(255,255,255,.92)}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-sm{min-height:420px}
.hero-sm h1{max-width:18ch}

/* Trust strip */
.trust{background:var(--navy-deep);color:#fff}
.trust ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.98rem}
.trust svg{flex:none;width:24px;height:24px;color:var(--blue)}

/* Sections */
section.block{padding:112px 0}
section.tint{background:var(--mist)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.section-head .lead{margin-top:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
a.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);color:inherit}
.card .media{aspect-ratio:4/3;overflow:hidden;background:var(--sky)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.card:hover .media img{transform:scale(1.04)}
.card .body{padding:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .price{margin-top:auto;padding-top:8px;font-weight:800;color:var(--navy);font-size:1.1rem}
.link-arrow{font-weight:700;color:var(--navy);text-decoration:none}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}

/* Steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:#fff;border-radius:var(--radius-lg);padding:36px;border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--sky);color:var(--navy);font-weight:800;font-size:1.2rem;margin-bottom:22px}
.step h3{margin-bottom:10px}

/* Split image */
.split-img{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4}
.split-img img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks svg{flex:none;width:24px;height:24px;color:var(--navy);margin-top:2px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:12px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--sky)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* Service list */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:12px}
.service header{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.service .from{font-weight:800;color:var(--navy);white-space:nowrap}
.service .from small{font-weight:600;color:var(--muted);font-size:.8rem;margin-right:4px}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.addon{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:6px}
.addon strong{font-size:1.05rem}
.addon .from{font-weight:800;color:var(--navy)}

/* Price tables */
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
.price-card h3{margin-bottom:6px}
.price-card .breeds{font-size:.9rem;color:var(--muted);margin-top:18px}
.rows{list-style:none;margin:16px 0 0;padding:0}
.rows li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows b{white-space:nowrap}
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.chip span{display:block;font-size:.9rem;color:var(--muted)}
.chip b{font-size:1.25rem}

/* Terms */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 40px}
.terms h3{font-size:1.1rem;margin-bottom:8px}
.terms p{color:var(--muted)}

/* Band CTA */
.band{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:64px;display:flex;justify-content:space-between;align-items:center;gap:32px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:var(--blue);opacity:.35}
.band > *{position:relative;z-index:1}
.band p{color:rgba(255,255,255,.88);margin-top:10px;font-size:1.1rem}
.band .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Family */
.family .card .body{padding:32px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.contact-list li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.contact-list svg{flex:none;width:26px;height:26px;color:var(--navy)}
.contact-list b{display:block}
.map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--navy);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted)}

/* Footer */
.site-footer{background:var(--navy-deep);color:#C9D6E4;padding:80px 0 40px;margin-top:0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-grid h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-brand{font-family:"Chelsea Market",cursive;font-size:1.6rem;color:#fff;margin-bottom:12px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1)}
.socials a:hover{background:var(--navy)}
.socials svg{width:20px;height:20px}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;font-size:.9rem;flex-wrap:wrap}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn,.card,.card .media img{transition:none}}

/* Responsive */
@media (max-width:1080px){
  .menu{gap:20px}
  .nav-phone{display:none}
  .grid-4,.addons{grid-template-columns:repeat(2,1fr)}
  .chips{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu{position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu li a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
  .nav-cta .btn{display:none}
  .grid-2,.contact-grid{grid-template-columns:1fr;gap:40px}
  .grid-3,.steps,.terms{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .trust ul{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:150px}
  .band{flex-direction:column;align-items:flex-start;padding:44px 32px}
  section.block{padding:80px 0}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .grid-4,.addons,.chips{grid-template-columns:1fr 1fr}
  .trust ul{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .wide{grid-column:span 2}
  .hero .wrap{padding-bottom:48px}
  .foot-grid{grid-template-columns:1fr}
  .brand span{font-size:1.2rem}
}

/* Form */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.fields .full{grid-column:1/-1}
.fields input,.fields select,.fields textarea{font:inherit;font-weight:400;padding:12px 14px;min-height:48px;border:1px solid #B9C8D8;border-radius:12px;background:#fff;color:var(--navy-deep)}
.fields input:focus,.fields select:focus,.fields textarea:focus{outline:3px solid var(--sky);border-color:var(--navy)}
@media (max-width:560px){.fields{grid-template-columns:1fr}}

/* ===== Motion ===== */
/* Hero: slow zoom + staggered entrance */
.hero img.bg{animation:kenburns 22s ease-out both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero .anim{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .anim:nth-child(1){animation-delay:.15s}
.hero .anim:nth-child(2){animation-delay:.3s}
.hero .anim:nth-child(3){animation-delay:.5s}
.hero .anim:nth-child(4){animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1 .accent{color:#9CCBF5;display:inline-block}

/* Floating paw prints */
.paws{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.paws svg{position:absolute;bottom:-60px;width:28px;height:28px;color:#fff;opacity:0;animation:floatup linear infinite}
@keyframes floatup{0%{transform:translateY(0) rotate(0deg);opacity:0}15%{opacity:.35}85%{opacity:.25}100%{transform:translateY(-110vh) rotate(40deg);opacity:0}}
.band .paws svg{color:#fff}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:14px;transform:translateX(-50%)}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Ticker (trust strip) */
.ticker{background:var(--navy-deep);color:#fff;overflow:hidden;padding:20px 0}
.ticker-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;gap:56px;padding-right:56px}
.ticker li{display:flex;align-items:center;gap:12px;font-weight:600;white-space:nowrap}
.ticker svg{width:22px;height:22px;color:var(--blue);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Photo reel */
.reel{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:16px;width:max-content;animation:marquee 60s linear infinite}
.reel-track.rev{animation-direction:reverse;animation-duration:70s;margin-top:16px}
.reel:hover .reel-track{animation-play-state:paused}
.reel figure{margin:0;width:260px;height:260px;border-radius:24px;overflow:hidden;flex:none;background:var(--sky)}
.reel figure.w{width:380px}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.reel figure:hover img{transform:scale(1.06)}

/* Van driving along the road */
.road{position:relative;height:90px;margin:8px 0 40px}
.road::before{content:"";position:absolute;left:0;right:0;bottom:18px;border-bottom:3px dashed var(--line)}
.van{position:absolute;bottom:14px;left:0;width:120px;animation:drive 14s linear infinite}
.van .wheel{transform-box:fill-box;transform-origin:center;animation:spin .6s linear infinite}
@keyframes drive{0%{left:-130px}100%{left:100%}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reveal variants + stagger */
.reveal.from-left{transform:translateX(-32px)}
.reveal.from-right{transform:translateX(32px)}
.reveal.zoom{transform:scale(.94)}
.reveal.in{transform:none}
.stagger > .reveal:nth-child(2){transition-delay:.1s}
.stagger > .reveal:nth-child(3){transition-delay:.2s}
.stagger > .reveal:nth-child(4){transition-delay:.3s}
.stagger > .reveal:nth-child(5){transition-delay:.4s}
.stagger > .reveal:nth-child(6){transition-delay:.5s}

/* Steps: number pulse when visible */
.step.in::before{animation:pop .6s cubic-bezier(.2,.9,.3,1.4) both .2s}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* Parallax images */
.parallax{overflow:hidden}
.parallax img{transform:translateY(var(--py,0)) scale(1.12);will-change:transform}

/* Button shine */
.btn-primary,.btn-light{position:relative;overflow:hidden}
.btn-primary::after,.btn-light::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn-primary:hover::after,.btn-light:hover::after{left:130%}

/* Price table */
.ptable{width:100%;border-collapse:collapse;font-size:.98rem}
.ptable th{text-align:left;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 12px 12px 0;border-bottom:2px solid var(--line)}
.ptable td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable td:first-child{font-weight:600;white-space:normal}
.ptable tr{transition:background .2s}
.ptable tbody tr:hover{background:var(--mist)}
.ptable td.na{color:#8A9AAC}
.table-scroll{overflow-x:auto}
.tabs{display:inline-flex;gap:6px;padding:6px;background:var(--mist);border-radius:999px;margin-bottom:24px;border:1px solid var(--line)}
.tabs button{font:inherit;font-weight:700;border:0;background:transparent;color:var(--navy-deep);min-height:44px;padding:0 22px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.tabpanel{animation:fadein .45s ease both}
.tabpanel[hidden]{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intervals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.interval{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.interval b{display:block;font-size:1.6rem;color:var(--navy);margin:6px 0}
.interval small{color:var(--muted)}
.note{font-size:.92rem;color:var(--muted);margin-top:16px}
.cant{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-top:32px}
@media (max-width:900px){.intervals{grid-template-columns:1fr 1fr}.reel figure{width:200px;height:200px}.reel figure.w{width:280px}}
@media (max-width:560px){.intervals{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .hero img.bg,.hero .anim,.paws svg,.ticker-track,.reel-track,.van,.van .wheel,.step.in::before,.scroll-cue::after,.tabpanel{animation:none!important}
  .hero .anim{opacity:1;transform:none}
  .paws,.scroll-cue{display:none}
  .parallax img{transform:none}
  .reveal{transition:none}
}
.band > .paws{position:absolute;inset:0;z-index:0}
.addons{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Robustness: content always visible without JS */
html:not(.js) .reveal{opacity:1!important;transform:none!important}
/* Stronger hero legibility */
.hero::after{background:linear-gradient(90deg,rgba(11,42,69,.72) 0%,rgba(11,42,69,.38) 50%,rgba(11,42,69,0) 80%),linear-gradient(180deg,rgba(11,42,69,.15) 0%,rgba(11,42,69,.2) 50%,rgba(11,42,69,.7) 100%)}
.hero h1,.hero p,.hero .eyebrow{text-shadow:0 2px 18px rgba(11,42,69,.35)}
@media (max-width:700px){.hero::after{background:linear-gradient(180deg,rgba(11,42,69,.35) 0%,rgba(11,42,69,.55) 45%,rgba(11,42,69,.88) 100%)}}
/* Terms page */
.t-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.t-toc{position:sticky;top:100px;display:grid;gap:4px;font-size:.92rem}
.t-toc a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px}
.t-toc a:hover{background:var(--mist);color:var(--navy)}
.t-sec{padding:28px 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.t-sec h2{font-size:1.5rem;margin-bottom:12px}
.t-sec p{color:#33475C;margin:0 0 12px;max-width:72ch}
.t-sec ul{margin:0 0 12px;padding-left:20px;color:#33475C}
@media (max-width:900px){.t-layout{grid-template-columns:1fr}.t-toc{display:none}}
@media (max-width:700px){.scroll-cue{display:none}}
.map{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#fff;position:relative}
.map img{width:100%;height:auto;display:block}
.map figcaption{position:absolute;left:16px;top:16px;background:var(--navy);color:#fff;font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px}
.map[hidden]{display:none}
.map-stack .map{animation:fadein .45s ease both}

/* New vans section */
.fleet{background:var(--navy-deep);color:#fff}
.fleet .eyebrow{color:#9CCBF5}
.fleet .lead{color:#C9D6E4}
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.inside-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.fleet figure{margin:0;border-radius:20px;overflow:hidden;position:relative;background:#132f4a}
.fleet figure.big{grid-column:span 2;grid-row:span 2}
.fleet img,.fleet video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.fleet figure:hover img{transform:scale(1.05)}
.fleet figcaption{position:absolute;left:12px;bottom:12px;background:rgba(11,42,69,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-weight:700;font-size:.9rem;padding:6px 12px;border-radius:999px}
.inside-title{font-size:1.6rem;margin:56px 0 20px;color:#fff}
.vid-toggle{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(11,42,69,.7);cursor:pointer}
.vid-toggle::before,.vid-toggle::after{content:"";position:absolute;top:14px;width:5px;height:16px;background:#fff;border-radius:2px}
.vid-toggle::before{left:15px}.vid-toggle::after{left:24px}
.vid-toggle.paused::after{display:none}
.vid-toggle.paused::before{left:17px;top:13px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
@media (max-width:900px){.fleet-grid,.inside-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}}
@media (max-width:560px){.fleet-grid,.inside-grid{grid-auto-rows:140px}}
.cred::before{display:none}
.cred h3{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cred h3 svg{width:26px;height:26px;flex:none;color:var(--navy)}

/* Tighter homepage hero: text sits closer to the header */
.hero:not(.hero-sm){min-height:min(74vh,660px);align-items:center}
.hero:not(.hero-sm) .wrap{padding-top:56px;padding-bottom:96px}
@media (max-width:700px){.hero:not(.hero-sm){min-height:auto}.hero:not(.hero-sm) .wrap{padding-top:48px;padding-bottom:56px}}
html,body{overflow-x:clip}
.hero:not(.hero-sm){min-height:min(68vh,600px);align-items:flex-start}
.hero:not(.hero-sm) .wrap{padding-top:64px;padding-bottom:88px}
@media (max-width:700px){.hero:not(.hero-sm){min-height:auto}.hero:not(.hero-sm) .wrap{padding-top:40px;padding-bottom:56px}}
.fleet .inside-grid.two{grid-template-columns:repeat(2,1fr);grid-auto-rows:320px}
.fleet .inside-grid.three{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}
@media (max-width:900px){.fleet .inside-grid.two,.fleet .inside-grid.three{grid-template-columns:1fr;grid-auto-rows:220px}}

/* ===== Extra motion (v2) ===== */
/* Scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--navy));z-index:60;pointer-events:none}
/* Header gains a soft shadow once you scroll */
.site-header{transition:box-shadow .3s,background .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(11,42,69,.10)}
/* Header "Book" button gentle attention pulse */
.nav-cta .btn-primary{animation:ctapulse 6s ease-in-out 3s infinite}
@keyframes ctapulse{0%,86%,100%{box-shadow:0 0 0 0 rgba(61,155,233,0)}90%{box-shadow:0 0 0 8px rgba(61,155,233,.28)}96%{box-shadow:0 0 0 14px rgba(61,155,233,0)}}
/* Eyebrow accent line draws in */
.section-head .eyebrow{position:relative;padding-left:0;transition:padding .6s ease}
.section-head .eyebrow::before{content:"";position:absolute;left:0;top:50%;height:2px;width:0;background:currentColor;transition:width .6s ease .15s}
.section-head.in .eyebrow,.js .section-head.in .eyebrow{padding-left:34px}
.section-head.in .eyebrow::before{width:24px}
/* Headings rise word by word */
.wordfx .w{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.wordfx.in .w{opacity:1;transform:none}
/* Photos wipe into view */
.js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.js .wipe.in{clip-path:inset(0 0 0 0)}
/* 3D tilt on cards */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt.tilting{transition:transform .08s linear}
.tilt:not(.tilting){transition:transform .5s ease,box-shadow .25s}
/* Icon bob in perks/ticks */
.perk .ic,.ticks li svg{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.perk:hover .ic{transform:translateY(-4px) rotate(-6deg)}
.ticks li:hover svg{transform:scale(1.2) rotate(-8deg)}
/* Paw trail walking across the bottom of bands */
.pawtrail{position:absolute;left:0;right:0;bottom:14px;height:22px;pointer-events:none;z-index:0}
.pawtrail svg{position:absolute;width:18px;height:18px;color:rgba(255,255,255,.55);opacity:0;animation:pawstep 7s linear infinite}
@keyframes pawstep{0%{opacity:0}8%{opacity:.7}40%{opacity:.4}60%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .progress,.pawtrail{display:none}
  .nav-cta .btn-primary{animation:none}
  .wordfx .w{opacity:1;transform:none;transition:none}
  .js .wipe{clip-path:none;transition:none}
  .tilt{transform:none!important}
}

.form-status{margin-top:16px;font-weight:600;min-height:1.2em}
.form-status.err{color:#B42318}
.form-done{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.form-done .tick{width:56px;height:56px;border-radius:50%;background:#E7F6EC;color:#1C6B3A;display:flex;align-items:center;justify-content:center;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both}
.form-done .tick svg{width:28px;height:28px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.7;cursor:progress}

.menu a,.brand span{white-space:nowrap}
@media (max-width:1440px){.nav-phone{display:none}}
.btn{white-space:nowrap}
.hero h1{max-width:19ch}
@media (min-width:901px){.hero.home-hero{background:#0B2A45}.hero.home-hero img.bg{left:42%;width:58%}.hero.home-hero::after{background:linear-gradient(90deg,#0B2A45 42%,rgba(11,42,69,.6) 48%,rgba(11,42,69,0) 60%)}}
.brand span small{display:block;font-family:"Figtree",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.bubbles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.bubbles i{position:absolute;bottom:-40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%);opacity:0;animation:bubble linear infinite}
@keyframes bubble{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}50%{transform:translate(14px,-50vh)}90%{opacity:.6}100%{transform:translate(-8px,-100vh);opacity:0}}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px;margin:0}
.review .stars{color:#F2B84B;letter-spacing:2px;font-size:1.05rem}
.review blockquote{margin:0;color:#33475C;line-height:1.6}
.review figcaption{margin-top:auto;font-weight:700;color:var(--navy)}
.promise{max-width:860px;margin:0 auto;text-align:center}
.promise p{font-family:"Chelsea Market",cursive;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.45;color:var(--navy);margin-top:18px}
.mud{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mud .card .body{gap:12px}
.hours-note{font-size:.95rem;color:var(--muted)}
@media (max-width:1080px){.reviews{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.mud{grid-template-columns:1fr}}
@media (max-width:560px){.reviews{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}}

/* 10 Nov 2026 (Nigel): company name a little bigger and slightly bolder, as on the other 4 Paws sites (9 Nov 2026). */
.brand span{font-size:1.6rem;-webkit-text-stroke:.5px currentColor}
.brand span small{-webkit-text-stroke:0}
@media (min-width:901px) and (max-width:1180px){.brand span{font-size:1.45rem}}
@media (max-width:560px){.brand span{font-size:1.3rem}}
/* Phones: "4 Paws Boutique Online" is long, so on narrow phones the name keeps about its size (bolder only) and steps down
   below 390px, so the basket and menu buttons stay fully on screen (on 360px phones the menu button used to be cut off). */
@media (max-width:440px){
  .site-header .nav{gap:8px}
  .site-header .nav-cta{gap:8px}
  .site-header .nav .brand{gap:10px}
  .site-header .nav .brand span{font-size:1.15rem}
}
@media (max-width:419px){.site-header .nav .brand span{font-size:1.03rem}}
@media (max-width:389px){.site-header .nav .brand span{font-size:.96rem}}
@media (max-width:374px){.site-header .nav .brand span{font-size:.88rem}}
@media (max-width:350px){
  .site-header .nav .brand{gap:8px}
  .site-header .nav .brand img{width:32px;height:32px}
  .site-header .nav .brand span{font-size:.74rem}
  .site-header .nav .brand span small{font-size:.5rem}
}