

/* ── home hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px;padding-top:24px;padding-bottom:64px}
.hero-l{position:relative;padding-top:40px}
.h1{margin:0;line-height:.86}
.big{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(104px,14vw,208px);line-height:.86;color:var(--deep);animation:pop 700ms var(--ease) both}
.block{display:inline-block;background:var(--red);color:var(--white);font-family:var(--display);text-transform:uppercase;font-size:clamp(82px,10.6vw,158px);line-height:1;padding:0 .12em .06em;margin:-.06em 0 0 -.04em;transform:rotate(-4deg);box-shadow:0 16px 28px rgba(17,17,17,.18);animation:slam 800ms 250ms var(--ease) both}
.oval{position:absolute;left:52%;top:0;width:140px;z-index:2;animation:wobble 3s ease-in-out infinite alternate}
.story{margin-top:56px;display:flex;flex-direction:column;gap:16px;max-width:460px;animation:pop 700ms 450ms var(--ease) both}
.story h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;letter-spacing:.02em;margin:0}
.story .btn{align-self:flex-start;margin-top:12px}
.hero-r{position:relative;aspect-ratio:1/1.02;animation:pop 800ms 300ms var(--ease) both}
.disc{position:absolute;left:6%;right:6%;bottom:0;aspect-ratio:1/1;border-radius:50%;background:var(--red)}
.disc svg{position:absolute;inset:0;width:100%;height:100%}
.hero-dog{position:absolute;left:50%;bottom:2%;height:104%;width:auto;max-width:none;transform:translateX(-50%)}
.fl{position:absolute;z-index:3;animation:floaty 3.4s ease-in-out infinite alternate}
.fl1{top:12%;left:-2%;width:116px;--r:-14deg}
.fl2{bottom:10%;right:-2%;width:80px;--r:16deg;animation-duration:2.8s}
.badge{position:absolute;z-index:3;top:4%;right:2%;width:124px;height:124px}
.badge-ring{position:absolute;inset:0;border-radius:50%;background:var(--white);box-shadow:0 6px 14px rgba(40,18,4,.18)}
.badge .txt{position:absolute;inset:0;animation:spin 16s linear infinite}
.badge text{font-family:var(--display);font-size:17px;fill:var(--deep);letter-spacing:1px}
.badge-c{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:26px;line-height:.9;color:var(--red);text-align:center}

/* illustrated rider dog */
.br{--fur:#fff;--shade:#eadfd5;--spot:#141414}
.ink{stroke:#141414;stroke-width:6;stroke-linejoin:round}
.inkt{stroke:#141414;stroke-width:5;stroke-linejoin:round}
.fk{fill:#141414}.fred{fill:var(--red)}
.fur{fill:var(--fur)}.fsp{fill:var(--spot)}
.ol{fill:none;stroke:#141414;stroke-width:32;stroke-linecap:round}
.il{fill:none;stroke:var(--fur);stroke-width:20;stroke-linecap:round}
.il.dk{stroke:var(--shade)}
.olt{fill:none;stroke:#141414;stroke-width:26;stroke-linecap:round}
.ilt{fill:none;stroke:var(--fur);stroke-width:14;stroke-linecap:round}
.tongue{fill:#ff5a62;stroke:#141414;stroke-width:4}
.tail,.leg,.ear{transform-box:fill-box}
.tail{transform-origin:100% 100%;animation:wag .3s ease-in-out infinite alternate}
.leg{transform-origin:50% 0;animation:step .48s ease-in-out infinite alternate}
.leg.b{animation-delay:-.48s}
.ear{transform-origin:40% 8%;animation:flap .48s ease-in-out infinite alternate}
.bob{animation:bob .24s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-18deg)}to{transform:rotate(20deg)}}
@keyframes step{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
@keyframes flap{from{transform:rotate(-7deg)}to{transform:rotate(12deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}

/* ── services row ── */
.svc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
.svc{padding:0 28px;border-left:1px solid #ecd6c6;display:flex;flex-direction:column}
.svc:first-child{padding-left:0;border-left:0}
.svc:last-child{padding-right:0}
.svc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,2.8vw,40px);line-height:.95;margin:0}
.svc-meta{margin:10px 0 0;font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.svc-art{position:relative;height:260px;margin-top:28px;display:flex;align-items:flex-end;justify-content:center}
.svc-art::before{content:'';position:absolute;left:50%;bottom:0;width:min(220px,100%);aspect-ratio:1/1;border-radius:50%;background:var(--sand);transform:translateX(-50%);transition:background 300ms,transform 400ms var(--ease)}
.svc:hover .svc-art::before{background:var(--red);transform:translateX(-50%) scale(1.04)}
.svc-art img{position:relative;max-height:240px;max-width:100%;width:auto;transition:transform 400ms var(--ease)}
.svc:hover .svc-art img{transform:translateY(-8px) rotate(-2deg)}
.book{align-self:flex-start;margin-top:24px;font-family:var(--display);text-transform:uppercase;font-size:19px;letter-spacing:.02em;color:var(--red);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px}
.book:hover{color:var(--deep);border-color:var(--deep)}
.stamp{position:absolute;left:50%;top:-64px;width:132px;transform:translateX(-50%) rotate(-8deg)}

/* ── city ── */
.city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.place{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:3/4;transition:transform 400ms var(--ease)}
.place:hover{transform:translateY(-8px)}
.place svg{position:absolute;inset:0;width:100%;height:100%}
.place img{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);animation:trot 1.4s ease-in-out infinite alternate}
@keyframes trot{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-10px)}}
.cap{position:absolute;left:20px;bottom:20px;background:var(--cream);color:var(--deep);font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.02em;line-height:1;padding:10px 16px 11px;border-radius:40px}
.cap.red{background:var(--red);color:var(--cream)}
.p1{background:var(--red)}.p2{background:var(--deep)}.p3{background:var(--sand)}
.dl-r{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* ── reviews band ── */
.rev{background:var(--red)}
.rev .h2{color:var(--cream);font-size:clamp(54px,8vw,128px);line-height:.9}
.rev-card{max-width:560px;margin:56px auto 0;background:var(--deep);border-radius:32px;padding:20px 20px 36px;box-shadow:0 24px 48px rgba(40,18,4,.22)}
.rev-img{border-radius:20px;background:var(--cream);aspect-ratio:16/9;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.rev-img img{height:90%;width:auto}
.quote{font-family:var(--display);text-transform:uppercase;font-size:28px;line-height:1.08;margin:28px 16px 12px;color:var(--cream)}
.who{font-size:17px;font-weight:600;letter-spacing:.02em;color:#ffd6bd;margin:0 16px}

@media (max-width: 1024px){
.hero{grid-template-columns:minmax(0,1fr);gap:56px}
.hero-r{max-width:520px;width:100%;margin:0 auto}
.svc-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * clamp(20px,4vw,48px));padding-right:clamp(20px,4vw,48px)}
.svc-row::-webkit-scrollbar{display:none}
.svc{flex:none;width:min(300px,78vw);scroll-snap-align:start}
.city-grid,.city-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.place{aspect-ratio:4/3}
}
@media (max-width: 810px){
.hero-l{padding-top:56px}
.oval{left:auto;right:0;top:0;width:104px}
.badge{width:96px;height:96px}
.badge-c{font-size:20px}
.fl1{width:88px}.fl2{width:60px}
.quote{font-size:24px}
}
