/* Dan's Dog Wash — tokens from the brand guide */
:root{
  --navy:#123C63; --navy-deep:#0C2A47; --sky:#87B5E1; --sky-light:#DDEEFA; --pool:#3F7FC4;
  --orange:#F4742D; --orange-deep:#DD5F1C; --white:#FFFFFF; --ground:#FFFFFF; --line:#CFE0EF;
  --ink:#123C63; --ink-2:#3A5578; --ink-3:#6C83A0;
  --display:Fredoka,Rubik,"Helvetica Neue",Arial,sans-serif; --body:Rubik,"Helvetica Neue",Arial,sans-serif;
  --r:16px; --wrap:1160px; --sec:clamp(56px,8vw,96px);
  --lift:0 18px 40px -22px rgba(18,60,99,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:98px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--pool)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;text-wrap:balance}
h1{font-weight:700;text-transform:uppercase;font-size:clamp(2.8rem,6vw,4.9rem);letter-spacing:.01em;line-height:1.04}
h2{font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.12}
h3{font-weight:600;font-size:1.25rem}
p{margin:0 0 1.15rem;max-width:62ch}
h2+p,h3+p,h4+p{margin-top:1.1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:#fff;padding:.4rem .8rem;border-radius:.4rem;margin-bottom:1.3rem}
.eyebrow.sky{background:var(--sky);color:var(--navy)}
.strip{font-family:var(--body);font-weight:700;font-style:italic;font-size:.85rem;letter-spacing:.07em;text-transform:uppercase}
.strip .dot{display:inline-block;width:.45em;height:.45em;border-radius:50%;background:var(--orange);margin:0 .6em;vertical-align:middle}
.tbc{display:inline-block;font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--ink-3);border-radius:.3rem;padding:.15rem .45rem;vertical-align:middle;margin-left:.4rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:1.05rem;padding:.9rem 1.7rem;border-radius:999px;text-decoration:none;border:2px solid transparent;line-height:1;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(244,116,45,.7)}
.btn-primary:hover{background:var(--orange-deep)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--sky-light)}
.btn-outline-white{background:transparent;color:#fff;border-color:#fff}
.btn-outline-white:hover{background:#fff;color:var(--navy)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--pool);outline-offset:3px}
.btn-lg{font-size:1.15rem;padding:1.05rem 2rem}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:#fff;color:var(--navy);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:78px;position:relative}
.logo{display:inline-flex;align-items:flex-start;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.35rem;text-transform:uppercase;color:var(--navy);text-decoration:none;letter-spacing:.01em;white-space:nowrap;align-self:flex-start;margin-top:5px;position:relative;z-index:2}
.logo .mark{width:auto;height:108px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(18,60,99,.18))}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:1.4rem;font-weight:500;font-size:.95rem}
.nav ul a{color:var(--ink-2);text-decoration:none}
.nav ul a:hover{color:var(--orange)}
.nav .btn{padding:.6rem 1.15rem;font-size:.95rem;box-shadow:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--navy);padding:.4rem;cursor:pointer}
.nav-toggle svg{width:28px;height:28px}

/* hero with video background */
.hero{position:relative;color:var(--navy);min-height:min(82vh,780px);display:flex;align-items:center;overflow:hidden;background:var(--sky)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .slide{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0}
.hero-bg .slide:nth-child(1){opacity:1}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero.has-video .hero-bg video{opacity:1}
.hero.has-video .hero-bg .slide{display:none}
.hero-tint{position:absolute;inset:0;background:linear-gradient(100deg,rgba(236,245,252,.96) 0%,rgba(221,238,250,.9) 45%,rgba(200,228,246,.78) 100%)}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(3rem,8vw,5rem);padding-bottom:clamp(3.5rem,9vw,6rem);width:100%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-dog{position:relative;display:flex;justify-content:center;align-items:flex-end;aspect-ratio:1/1.12;max-width:430px;margin-left:auto;width:100%}
.hero-dog .blob-o{position:absolute;left:0;right:0;top:8%;aspect-ratio:1;border-radius:52% 48% 45% 55%/58% 42% 58% 42%;background:var(--orange)}
.hero-dog img{position:relative;width:70%;height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,rgba(0,0,0,.35) 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 86%,rgba(0,0,0,.35) 96%,transparent 100%)}
.hero-zaps{position:absolute;left:50%;top:0;transform:translateX(-50%);width:78%;height:auto;overflow:visible;z-index:1}
.hero-zaps .zap{stroke:#fff}
.hero h1{max-width:none}
.hero h1 small{display:block;font-size:.34em;font-weight:600;line-height:1.25;letter-spacing:.06em;color:var(--pool);margin-top:1rem;text-transform:uppercase}
.hero h1 b{color:var(--orange)}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;margin:1.5rem 0 2rem;max-width:46ch;color:var(--ink-2)}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero .strip{margin-top:1.4rem;color:var(--navy)}
.grating{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;background:#fff;border-radius:999px;padding:.55rem 1rem;text-decoration:none;color:var(--navy);box-shadow:0 8px 20px -10px rgba(18,60,99,.45);font-size:.92rem;line-height:1}
.grating:hover{box-shadow:0 10px 24px -10px rgba(18,60,99,.6)}
.grating .stars{display:inline-flex;gap:2px}
.grating .stars svg{width:16px;height:16px;fill:#FBBC04}
.grating .gtext b{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-right:.15rem}
.grating .gicon{width:18px;height:18px;flex:none}
.zaps{position:absolute;right:clamp(16px,4vw,40px);top:clamp(1.5rem,5vw,4rem);width:clamp(120px,16vw,220px);height:auto;overflow:visible;z-index:1;pointer-events:none}
.zap{stroke:var(--orange);stroke-width:6;stroke-linecap:round;fill:none}
.hero-badge{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(1.2rem,4vw,3rem);z-index:1;background:#fff;color:var(--navy);border-radius:999px;padding:.6rem 1rem .6rem .6rem;display:flex;align-items:center;gap:.7rem;font-weight:500;font-size:.9rem;box-shadow:var(--lift)}
.hero-badge .pulse{width:14px;height:14px;border-radius:50%;background:#1E8E5A;position:relative;flex:none}
.hero-badge .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #1E8E5A;opacity:.6}
.hero-badge b{font-family:var(--display);font-weight:600}

/* marquee */
.marquee{background:var(--orange);color:#fff;overflow:hidden;padding:.75rem 0;font-family:var(--display);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;will-change:transform}
.marquee span{padding:0 1.4rem;display:inline-flex;align-items:center;gap:1.4rem}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.85}

/* feature cards */
.features{background:var(--sky-light);padding:2.5rem 0}
.features .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.feature{background:#fff;border-radius:var(--r);padding:1.6rem 1.6rem;display:flex;align-items:flex-start;gap:1.1rem;box-shadow:var(--lift)}
.feature .ico{width:52px;height:52px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.feature .ico svg{width:28px;height:28px}
.feature h3{font-size:1.15rem;text-transform:uppercase;margin-bottom:.35rem}
.feature p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* sections */
section{padding:var(--sec) 0}
.sec-head{max-width:60ch;margin-bottom:2.8rem}
.sec-head p{color:var(--ink-2);font-size:1.1rem;margin:1.2rem 0 0;line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{background:var(--sky-light);border-radius:var(--r);padding:1.9rem 1.8rem;position:relative;overflow:hidden}
.step .n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--display);font-weight:700;font-size:1.25rem;margin-bottom:1.2rem}
.step h3{margin-bottom:.5rem}
.step p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.step>*{position:relative;z-index:1}
.step .bl{z-index:0;position:absolute;right:-40px;bottom:-50px;width:150px;height:130px;border-radius:48% 52% 55% 45%/60% 40% 60% 40%;background:var(--sky);opacity:.55}
.dial{margin-top:2.6rem}
.dial h3{font-size:.95rem;color:var(--ink-3);font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.cycle{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;counter-reset:s}
.cycle div{background:var(--orange);color:#fff;border-radius:12px;padding:1.1rem 1rem .95rem;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.15;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.cycle div::before{counter-increment:s;content:counter(s);position:absolute;top:.6rem;right:.75rem;font-family:var(--body);font-weight:700;font-size:.72rem;opacity:.85}
.cycle small{display:block;font-family:var(--body);font-weight:400;font-size:.75rem;line-height:1.35;opacity:.92;margin-top:.35rem}

/* pricing */
.pricing{background:var(--sky);color:var(--navy);position:relative;overflow:hidden}
.pricing .blob{position:absolute;border-radius:48% 52% 55% 45%/60% 40% 60% 40%;background:var(--pool);opacity:.35;pointer-events:none}
.pricing .wrap{position:relative}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tier{background:#fff;color:var(--navy);border-radius:var(--r);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--lift);position:relative}
.tier .amt{font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums}
.tier .amt sup{font-size:.45em;vertical-align:top;margin-top:.5em;display:inline-block}
.tier .mins{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--orange)}
.tier p{margin:.7rem 0 0;font-size:.94rem;color:var(--ink-2);line-height:1.6}
.tier.pop{outline:4px solid var(--orange);transform:translateY(-8px)}
.tier.pop::before{content:"Most popular";position:absolute;top:-14px;left:1.4rem;background:var(--orange);color:#fff;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.pay{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font-size:.95rem;color:var(--ink-2)}
.pay b{color:var(--navy)}
.loyalty{margin-top:2.2rem;background:#fff;border-radius:var(--r);padding:1.5rem 1.8rem;display:flex;align-items:center;gap:1.6rem;box-shadow:var(--lift)}
.loyalty h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:.4rem}
.loyalty p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.burst{flex:none;width:76px;height:76px;background:var(--orange);color:#fff;clip-path:polygon(50% 0%,61% 12%,76% 6%,80% 21%,96% 25%,91% 39%,100% 50%,91% 61%,96% 75%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,4% 75%,9% 61%,0% 50%,9% 39%,4% 25%,20% 21%,24% 6%,39% 12%);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.3rem}

/* gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:minmax(230px,auto);gap:1rem}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--line);position:relative}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1rem .9rem;background:linear-gradient(transparent,rgba(7,33,66,.78));color:#fff;font-size:.9rem;font-weight:500}

/* faq */
.faqs{background:var(--sky-light)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem;align-items:start}
details{background:#fff;border-radius:12px;padding:0 1.2rem;box-shadow:var(--lift)}
summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.05rem;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange);font-size:1.5rem;font-weight:700;flex:none;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--ink-2);font-size:.95rem;padding-bottom:1.2rem;margin:0;line-height:1.65;max-width:56ch}

/* find us */
.find{background:var(--sky);color:var(--navy);position:relative;padding-top:0}
.suds{display:block;width:100%;height:64px;background:var(--sky-light)}
.find .inner{padding-top:var(--sec)}
.find .suds path{fill:#87B5E1}
.find .sec-head p{color:var(--ink-2)}
.suburbs{margin:2rem 0 0;color:var(--ink-2);font-size:.95rem;max-width:70ch;line-height:1.7}
.find .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.find-grid{grid-template-columns:1.15fr .85fr}
.map{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--lift);min-height:420px;height:100%}
.map iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.stack{display:grid;gap:1.5rem}
.find .sub{margin:3.2rem 0 1.4rem;font-size:.95rem;color:var(--ink-2);font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.access{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.acc{background:#fff;transition:transform .25s;border-radius:var(--r);padding:1.6rem 1.6rem 1.5rem;box-shadow:var(--lift)}
.acc .ico{width:44px;height:44px;border-radius:12px;background:var(--sky-light);color:var(--pool);display:grid;place-items:center;margin-bottom:.9rem}
.acc .ico svg{width:24px;height:24px}
.acc h4{font-family:var(--display);font-weight:600;font-size:1.1rem;margin:0 0 .45rem;color:var(--navy)}
.acc p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:none;line-height:1.6}
.card{background:#fff;color:var(--navy);border-radius:var(--r);padding:1.9rem 1.9rem}
.card h3{margin-bottom:.9rem}
.hours{margin:0;padding:0;list-style:none;font-variant-numeric:tabular-nums}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.98rem}
.hours li:last-child{border:0}
.hours b{font-weight:500}
.addr{font-size:1.1rem;font-weight:500;margin-bottom:1rem}
.addr .tbc{display:block;width:max-content;margin:.5rem 0 0}
.tips{margin:1rem 0 0;padding-left:1.1rem;color:var(--ink-2);font-size:.95rem}
.tips li{margin-bottom:.4rem}
.big-cta{margin-top:2.5rem;background:var(--orange);border-radius:var(--r);padding:2.2rem 2.2rem;padding-right:min(36%,340px);position:relative;min-height:220px;display:flex;align-items:center}
.cta-text{padding:.2rem 0}
.cta-text .btn{margin-top:1.2rem}
.cta-dog{position:absolute;right:1.5rem;bottom:0;width:min(22%,200px)}
.cta-dog img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(18,60,99,.35))}
.cta-zaps{position:absolute;left:50%;top:-10%;transform:translateX(-50%);width:70%;height:auto;overflow:visible}
.cta-zaps .zap{stroke:#fff}
.big-cta h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;text-transform:uppercase;color:#fff}
.big-cta p{margin:.2rem 0 0;color:#FFE4D3;max-width:40ch}

/* footer */
footer{background:var(--navy);color:#B7CDE3;padding:0 0 1.5rem;font-size:.95rem;position:relative}
footer .fsuds{display:block;width:100%;height:64px}
footer .wrap{display:grid;grid-template-columns:1.4fr .9fr .7fr;gap:2.5rem 3rem;padding-top:2.5rem}
.fcol h4{font-family:var(--display);font-weight:600;font-size:1.05rem;color:#fff;text-transform:uppercase;letter-spacing:.04em;margin:0 0 1rem}
.fcol p{margin:0 0 1rem;max-width:34ch}
.fbrand .flogo{display:inline-block;background:#fff;border-radius:16px;padding:.5rem;margin-bottom:1.2rem}
.fbrand .flogo img{width:120px;height:auto;display:block}
.fstrip{font-weight:700;font-style:italic;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.fstrip .dot{display:inline-block;width:.45em;height:.45em;border-radius:50%;background:var(--orange);margin:0 .6em;vertical-align:middle}
footer address{font-style:normal;color:#fff;font-weight:500;font-size:1.05rem;line-height:1.4;margin-bottom:.8rem}
.fhours{display:flex;align-items:center;gap:.6rem;color:#fff;margin:0 0 1.2rem}
.fhours .pulse{width:11px;height:11px;border-radius:50%;background:#3DD68C;position:relative;flex:none}
.fhours .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3DD68C;opacity:.6}
footer .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
footer a{color:#D6E7F6;text-decoration:none}
footer .fcol ul a:hover{color:var(--orange)}
footer .fine{grid-column:1/-1;border-top:1px solid #1E4275;padding-top:1.2rem;margin-top:.5rem;font-size:.82rem;color:#7F9DBE;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem}
footer .totop{color:var(--sky);font-weight:500}
footer .totop:hover{color:#fff}

/* sticky mobile CTA */
.mob-cta{display:none}

/* reveal: content is visible at rest, motion only nudges it */
.rv{transform:translateY(18px)}
.rv.in{transform:none}

@media (max-width:900px){
  .find .grid,.find-grid,.faq{grid-template-columns:1fr}
  .big-cta{flex-direction:column;align-items:stretch;padding:2rem 1.5rem 0}
  .cta-dog{position:static;width:min(60%,230px);margin:1.5rem auto 0}
  .cta-text .btn{width:100%}
  .loyalty{flex-direction:column;align-items:flex-start}
  footer .wrap{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
  .access{grid-template-columns:1fr 1fr}
  .map,.map iframe{min-height:320px}
  .steps,.tiers,.features .wrap{grid-template-columns:1fr}
  .tier.pop{transform:none;margin-top:.6rem}
  .cycle{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:first-child{grid-column:span 2;grid-row:auto}
  .hero{min-height:0}
  .hero-badge{position:static;margin-top:1.8rem;width:max-content}
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-grid>div:first-child{text-align:center}
  .hero h1,.hero .lead{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
  .grating{margin-top:1.3rem}
  .hero-badge{margin-left:auto;margin-right:auto}
  .hero-grid>div:first-child{text-align:center}
  .hero h1,.hero .lead{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
  .grating{margin-top:1.3rem}
  .hero .eyebrow{margin-bottom:1.1rem}
  .hero-badge{margin-left:auto;margin-right:auto}
  .hero-dog{order:-1;max-width:230px;margin:0 auto}
  .logo .mark{height:78px}
  .logo{margin-top:4px}
  .logo .mark{height:50px}
  .nav ul{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;flex-direction:column;gap:0;padding:.5rem 0 1rem;border-top:1px solid var(--line);box-shadow:0 12px 24px -12px rgba(18,60,99,.3)}
  .nav ul a{display:block;padding:.8rem clamp(16px,4vw,40px)}
  .nav.open ul{display:flex}
  .nav-toggle{display:block}
  .nav > .wrap > .btn{display:none}
  .mob-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:25}
  .mob-cta .btn{width:100%}
  .hero .wrap{padding-top:1.5rem;padding-bottom:2.5rem}
  .hero h1{font-size:clamp(2.4rem,10.5vw,3.2rem)}
  .hero h1 small{font-size:.38em;margin-top:.8rem}
  .hero .lead{margin:1.2rem 0 1.6rem;font-size:1.02rem}
  .hero .cta{gap:.7rem}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .hero .strip{margin-top:1.4rem;font-size:.78rem}
  .hero-badge{margin-top:1.4rem;width:auto;font-size:.85rem}
  .marquee{font-size:.92rem;padding:.6rem 0}
  section{padding:3rem 0}
  .sec-head{margin-bottom:2rem}
  .loyalty{gap:1.1rem}
  .stamps{gap:.4rem}
  .st{width:38px;height:38px}
  .st.on svg{width:20px;height:20px}
  .big-cta{padding:1.8rem 1.4rem 0}
  .cta-text h3{font-size:1.6rem}
  .map,.map iframe{min-height:280px}
  footer .wrap{padding-top:2rem}
  body{padding-bottom:76px}
}
@media (max-width:520px){.hero-dog{max-width:200px}.logo .mark{height:70px}footer .wrap{grid-template-columns:1fr}.access{grid-template-columns:1fr}.cycle{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr}.gallery figure:first-child{grid-column:auto}}

@media (prefers-reduced-motion:no-preference){
  .btn{transition:background .15s,color .15s,transform .15s,box-shadow .15s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(1px)}
  .feature,.tier,.step,.gallery figure,details{transition:transform .25s,box-shadow .25s}
  .feature:hover,.tier:hover,.step:hover,.gallery figure:hover{transform:translateY(-4px)}
  .tier.pop:hover{transform:translateY(-12px)}
  .cycle div{transition:transform .2s}
  .cycle div:hover{transform:scale(1.04)}
  .rv{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .hero-bg .slide{animation:kb 18s ease-in-out infinite}
  .hero-bg .slide:nth-child(2){animation-delay:6s}
  .hero-bg .slide:nth-child(3){animation-delay:12s}
  @keyframes kb{0%{opacity:0;transform:scale(1)}8%{opacity:1}33%{opacity:1}42%{opacity:0;transform:scale(1.1)}100%{opacity:0;transform:scale(1.1)}}
  .hero-bg .slide:nth-child(1){animation-name:kb1}
  @keyframes kb1{0%{opacity:1;transform:scale(1)}33%{opacity:1}42%{opacity:0;transform:scale(1.1)}92%{opacity:0;transform:scale(1)}100%{opacity:1}}
  .marquee .track{animation:mq 28s linear infinite}
  @keyframes mq{to{transform:translateX(-50%)}}
  .zap{stroke-dasharray:60;stroke-dashoffset:60;animation:zap .55s ease-out forwards,zapPulse 4s ease-in-out 1.2s infinite}
  .zap:nth-child(2){animation-delay:.1s,1.3s}.zap:nth-child(3){animation-delay:.2s,1.4s}.zap:nth-child(4){animation-delay:.3s,1.5s}.zap:nth-child(5){animation-delay:.4s,1.6s}
  @keyframes zap{to{stroke-dashoffset:0}}
  @keyframes zapPulse{0%,100%{opacity:1}50%{opacity:.35}}
  .hero-badge .pulse::after,.fhours .pulse::after{animation:ping 1.8s ease-out infinite}
  @keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
  .pricing .blob,.step .bl{animation:drift 12s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate(14px,-10px) rotate(6deg)}}
}
@media (prefers-reduced-motion:reduce){.rv{transform:none}.hero-bg .slide:nth-child(1){opacity:1}}

/* ---- fun graphics ---- */
.paws{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='%23123C63' fill-opacity='.07'%3E%3Cg transform='translate(20 20) rotate(-20) scale(1.4)'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Ccircle cx='5.2' cy='10' r='2.2'/%3E%3Ccircle cx='9' cy='6' r='2.3'/%3E%3Ccircle cx='15' cy='6' r='2.3'/%3E%3Ccircle cx='18.8' cy='10' r='2.2'/%3E%3C/g%3E%3Cg transform='translate(100 90) rotate(15) scale(1.4)'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Ccircle cx='5.2' cy='10' r='2.2'/%3E%3Ccircle cx='9' cy='6' r='2.3'/%3E%3Ccircle cx='15' cy='6' r='2.3'/%3E%3Ccircle cx='18.8' cy='10' r='2.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:160px 160px}
.ul{position:relative;display:inline-block}
.ul svg{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.28em;overflow:visible}
.ul path{fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset -4px -4px 0 rgba(135,181,225,.35);opacity:0}
.bubbles i:nth-child(1){left:6%;width:26px;height:26px}.bubbles i:nth-child(2){left:14%;width:14px;height:14px}.bubbles i:nth-child(3){left:27%;width:34px;height:34px}.bubbles i:nth-child(4){left:38%;width:18px;height:18px}.bubbles i:nth-child(5){left:52%;width:24px;height:24px}.bubbles i:nth-child(6){left:66%;width:12px;height:12px}.bubbles i:nth-child(7){left:80%;width:30px;height:30px}.bubbles i:nth-child(8){left:92%;width:16px;height:16px}
.marquee .mpaw{width:16px;height:16px;fill:#fff;opacity:.9;margin-left:1.4rem}
.marquee span::after{display:none}
.feature .ico svg{width:34px;height:34px}
.step .ill{width:64px;height:64px;position:absolute;top:1.2rem;right:1.3rem}
.dial-wrap{display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:center}
.bigdial{width:240px;height:240px;filter:drop-shadow(0 16px 24px rgba(18,60,99,.25))}
.bigdial .spin,.bigdial .needle{transform-origin:120px 120px}
.trail{background:var(--bg);line-height:0}
.trail svg{width:100%;height:70px;display:block}
.dogsize{position:absolute;top:1.2rem;right:1.2rem;width:44px;height:44px;fill:var(--sky)}
.tier.pop .dogsize{fill:var(--orange)}
.stamps{display:flex;gap:.5rem;flex:none}
.st{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line);font-family:var(--display);font-weight:700;font-size:.7rem;color:var(--ink-3)}
.st.on{background:var(--orange);border-color:var(--orange)}
.st.on svg{width:24px;height:24px;fill:#fff}
.st.free{border-color:var(--orange);color:var(--orange);letter-spacing:.04em}
.faqs{position:relative;overflow:hidden}
.faqs .peek{display:none;position:absolute;right:2.5%;bottom:0;width:min(14vw,168px);height:auto;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(18,60,99,.18))}
.faqs .wrap{position:relative;z-index:1}
@media (min-width:1180px){.faqs .peek{display:block}.faqs .faq{padding-right:190px}}
@media (max-width:900px){.dial-wrap{grid-template-columns:1fr}.bigdial{width:200px;height:200px;margin:0 auto}.step .ill{width:52px;height:52px}}
@media (prefers-reduced-motion:no-preference){
  .ul path{stroke-dasharray:210;stroke-dashoffset:210;animation:draw .7s ease-out .5s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .bubbles i{animation:rise 11s linear infinite}
  .bubbles i:nth-child(2){animation-duration:14s;animation-delay:2s}.bubbles i:nth-child(3){animation-duration:9s;animation-delay:4s}.bubbles i:nth-child(4){animation-duration:13s;animation-delay:1s}.bubbles i:nth-child(5){animation-duration:10s;animation-delay:6s}.bubbles i:nth-child(6){animation-duration:15s;animation-delay:3s}.bubbles i:nth-child(7){animation-duration:12s;animation-delay:7s}.bubbles i:nth-child(8){animation-duration:9s;animation-delay:5s}
  @keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translateY(-110vh) translateX(30px);opacity:0}}
  .bigdial .spin{animation:spin 30s linear infinite}
  .bigdial .needle{animation:tick 6s ease-in-out infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes tick{0%,15%{transform:rotate(0)}20%,35%{transform:rotate(60deg)}40%,55%{transform:rotate(120deg)}60%,75%{transform:rotate(180deg)}80%,95%{transform:rotate(240deg)}100%{transform:rotate(360deg)}}
  .st.on{animation:stamp .4s cubic-bezier(.2,1.6,.4,1) both}
  .st.on:nth-child(2){animation-delay:.15s}.st.on:nth-child(3){animation-delay:.3s}.st.on:nth-child(4){animation-delay:.45s}
  @keyframes stamp{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
  .faqs .peek{animation:peek 1s cubic-bezier(.2,1.2,.4,1) .3s both}
  @keyframes peek{from{transform:translateY(75%)}to{transform:translateY(0)}}
}

/* ---- our story ---- */
.story{background:var(--sky-light);position:relative;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.story-side{display:grid;gap:1.2rem}
.pullquote{position:relative;margin:0;background:var(--sky);border-radius:var(--r);padding:1.8rem 1.8rem 1.6rem;overflow:hidden}

.pq-paw{position:absolute;right:-14px;bottom:-14px;width:96px;height:96px;fill:var(--navy);opacity:.12}
.qc{display:flex;align-items:center;gap:1.1rem;background:#fff;border-radius:var(--r);padding:1.2rem 1.3rem;box-shadow:var(--lift)}
.qc img{width:74px;height:74px;flex:none;border-radius:50%}
.qc b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--navy);margin-bottom:.2rem}
.qc span{font-size:.92rem;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;gap:2rem}}
.story h2{margin-bottom:1.4rem}
.story .lead-p{font-size:1.18rem;color:var(--ink);line-height:1.6;margin-bottom:1.4rem}
.story p{color:var(--ink-2);line-height:1.7}
.story .pullquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.22;color:var(--navy);max-width:none}
.story .qc span{line-height:1.5}
.story .btn{margin-top:1rem}
.pups{display:grid;gap:1.4rem}
.pup{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--lift)}
.pup .frame{aspect-ratio:5/3;background:var(--sky);display:grid;place-items:center;position:relative}
.pup .frame::before{content:"";position:absolute;width:52%;aspect-ratio:1;border-radius:48% 52% 55% 45%/60% 40% 60% 40%;background:var(--orange);opacity:.9}
.pup .ph{position:relative;z-index:1;color:#fff;font-family:var(--display);font-weight:600;font-size:.95rem;text-align:center;display:grid;justify-items:center;gap:.4rem;padding:1rem}
.pup .ph svg{width:30px;height:30px;fill:#fff}
.pup .ph .tbc{color:#fff;border-color:rgba(255,255,255,.8);margin:0}
.pup figcaption{padding:1.1rem 1.3rem 1.2rem;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.pup figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--navy);margin-bottom:.2rem}