/* ==========================================================
   Story section: an extra-thick orange line drawn by scroll
   (GSAP ScrollTrigger scrub), weaving behind three big
   illustrations, then flooding into the orange services band.
   Modelled on two26.studio's About page.
   ========================================================== */
.story-trail{--stw:clamp(46px,7vw,118px);position:relative;padding:clamp(72px,9vw,140px) 0 calc(var(--stw) * 2.2);overflow-x:clip}
.st-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.st-line{fill:none;stroke:var(--red);stroke-width:var(--stw);stroke-linecap:round;stroke-linejoin:round}

.st-block{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,8vw,140px);min-height:clamp(460px,52vw,720px);padding:clamp(24px,3vw,48px) clamp(20px,4vw,48px)}
.st-block + .st-block{margin-top:clamp(40px,7vw,120px)}
.st-block.flip .st-art{order:2}
.st-art{display:flex;justify-content:center}
.st-art img{width:min(92%,460px);height:auto;filter:drop-shadow(0 18px 24px rgba(17,17,17,.14))}
.st-copy{max-width:460px}
.st-block.flip .st-copy{justify-self:end}
.st-k{margin:0 0 18px;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.st-h{margin:0 0 24px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(36px,4vw,64px);line-height:.95;color:var(--red)}
.st-h .ln{display:block}
.st-copy p:last-child{margin:0;font-size:19px;line-height:1.6;color:var(--deep)}

/* reveal: art pops in with a little spin, copy rises */
.js .st-art img{opacity:0;transform:translateY(40px) scale(.82) rotate(-8deg);transition:opacity 900ms ease,transform 1400ms cubic-bezier(.22,1.2,.36,1)}
.js .st-block.flip .st-art img{transform:translateY(40px) scale(.82) rotate(8deg)}
.js .st-block.in .st-art img{opacity:1;transform:none}
.js .st-copy > *{opacity:0;transform:translateY(40px);transition:opacity 900ms ease,transform 1200ms cubic-bezier(.16,1,.3,1)}
.js .st-block.in .st-copy > *{opacity:1;transform:none}
.js .st-block.in .st-copy > :nth-child(2){transition-delay:140ms}
.js .st-block.in .st-copy > :nth-child(3){transition-delay:280ms}
.st-art img.float{animation:stfloat 4s ease-in-out infinite alternate}
@keyframes stfloat{from{translate:0 0;rotate:-1deg}to{translate:0 -10px;rotate:1deg}}

/* orange band the line floods into */
.svc-orange{background:var(--red);color:#fff;padding-top:clamp(96px,10vw,160px)}
.svc-orange .h2{color:#fff}
.svc-orange .svc{border-color:rgba(255,255,255,.35)}
.svc-orange .svc h3{color:#fff}
.svc-orange .svc-meta{color:#ffe0cc}
.svc-orange .svc-art::before{background:#fff8f2}
.svc-orange .svc:hover .svc-art::before{background:var(--deep)}
.svc-orange .book{color:#fff;border-color:#fff}
.svc-orange .book:hover{color:var(--deep);border-color:var(--deep)}

@media (prefers-reduced-motion: reduce){
  .js .st-art img,.js .st-copy > *{opacity:1 !important;transform:none !important}
}
@media (max-width: 1024px) and (min-width: 811px){
  .st-block{min-height:clamp(420px,58vw,560px);gap:40px}
  .st-h{font-size:clamp(34px,4.6vw,48px)}
}
@media (max-width: 810px){
  .story-trail{--stw:38px;padding:56px 0 110px}
  .st-block,.st-block.flip{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding:0 20px}
  .st-block + .st-block{margin-top:88px}
  .st-block.flip .st-art{order:0}
  .st-art{justify-content:flex-start}
  .st-block.flip .st-art{justify-content:flex-end}
  .st-art img{width:min(74%,320px)}
  .st-copy{background:var(--cream);border-radius:28px;padding:24px 22px 26px;max-width:none;box-shadow:0 10px 30px rgba(17,17,17,.06)}
  .st-k{margin-bottom:12px}
  .st-h{font-size:clamp(32px,9vw,44px);margin-bottom:16px}
  .st-copy p:last-child{font-size:17px;line-height:1.6}
}


/* soften the illustrations' cropped edges so nothing looks chopped off */
.st-art img[src*="story-key"]{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.st-art img[src*="story-walk"]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}

.st-burst{position:absolute;z-index:0;border-radius:50%;background:var(--red);transform-origin:50% 50%;pointer-events:none;will-change:transform}
.st-block{z-index:2}
/* the highlights strip sits above the line, so the ribbon slides out from under it */
.hl-wrap{position:relative;z-index:3}
.svc-orange{position:relative;z-index:1}
/* until the burst covers the screen the band is empty, so it reads as white opening into colour */

/* services: real dog photos standing in illustrated discs */
.svc-art.has-bg{height:300px;align-items:flex-end}
.svc-art.has-bg::before{display:none}
.svc-art .svc-bg{position:absolute;left:50%;bottom:0;width:min(270px,100%);height:auto;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 12px 20px rgba(17,17,17,.2));transition:transform 600ms var(--spring)}
.svc:nth-child(even) .svc-art .svc-bg{transform:translateX(-50%) rotate(3deg)}
.svc:hover .svc-art .svc-bg{transform:translateX(-50%) rotate(0deg) scale(1.05)}
.svc-art.has-bg img.photo{position:relative;z-index:1;max-height:190px;max-width:86%;margin-bottom:18px}
.svc-art.has-bg img[src*="pack"]{max-width:80%;max-height:150px;margin-bottom:28px}
@media (max-width: 1024px){.svc-art.has-bg{height:280px}}

/* hero: illustrated park disc (How We Started style) behind the real dog */
.wp .disc.v2{background:transparent;overflow:visible}
.wp .disc.v2 img.scene{border-radius:0;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(17,17,17,.14))}
/* care cards: illustrated scenes behind the real photos */
.feat-img .clip img.photo{position:relative;z-index:1}
.feat-img .clip img.photo[src*="corgi"]{margin-bottom:8%}
.feat-img .clip img.scene{transition:transform 1200ms cubic-bezier(.16,1,.3,1)}
.feat:hover .feat-img .clip img.scene{transform:scale(1.06)}
/* faq: leash question-mark illustration */
.faq-art{display:block;width:min(260px,62%);height:auto;margin-top:28px;transform:rotate(-6deg);filter:drop-shadow(0 12px 18px rgba(17,17,17,.14));animation:stfloat 4.5s ease-in-out infinite alternate}
@media (max-width: 1024px){.faq-art{width:180px;margin:12px 0 0}}
/* walk report card: illustrated scene behind the puppy */
.rev-img{position:relative}
.rev-img img.photo{position:relative;z-index:1;height:72% !important;margin-bottom:4%}
/* CTA: illustrated skyline + leash scene behind headline and dogs */
.wp .cta img.cta-bg.scene{z-index:0;object-position:50% 100%}
.cta > *:not(.cta-bg){position:relative;z-index:1}
/* hero: illustrated hand holding the real dog's leash, illustrated bone + ball */
.hero-r .hero-hand{position:absolute;z-index:4;left:27.3%;top:-15.9%;width:20%;height:auto;transform-origin:50% 94%;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(17,17,17,.15))}
.hero-r img.fl{height:auto;filter:drop-shadow(0 10px 14px rgba(17,17,17,.18))}
.hero-r img.fl1{width:130px}
.hero-r img.fl2{width:100px}
@media (max-width: 810px){.hero-r img.fl1{width:96px}.hero-r img.fl2{width:72px}}
.hero-r .hero-hand{animation:handswing 3.2s ease-in-out infinite alternate}@keyframes handswing{from{rotate:-3deg}to{rotate:3deg}}@media (prefers-reduced-motion: reduce){.hero-r .hero-hand{animation:none}}

/* ── walk report carousel ── */
.rep{margin-top:clamp(40px,5vw,64px)}
.rep-track{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px max(20px,calc((100vw - min(520px,84vw)) / 2)) 28px;cursor:grab;outline:none}
.rep-track::-webkit-scrollbar{display:none}
.rep-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rep-track.dragging *{pointer-events:none;user-select:none}
.rep-track .rep-card{flex:none;width:min(520px,84vw);margin:0;scroll-snap-align:center;transform:scale(.9);opacity:.55;transition:transform 600ms cubic-bezier(.16,1,.3,1),opacity 500ms}
.rep-track .rep-card.is-active{transform:none;opacity:1}
.rep-track .rep-card .rev-img img.photo{max-width:58%;object-fit:contain}
.rep-track .quote{font-size:clamp(22px,2vw,28px);min-height:3.3em}
.rep-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.rep-btn{width:56px;height:56px;border-radius:50%;border:0;background:#fff8f2;color:var(--deep);display:grid;place-items:center;cursor:pointer;transition:transform 300ms var(--spring),background 200ms,color 200ms}
.rep-btn:hover{transform:scale(1.08);background:var(--deep);color:#fff}
.rep-btn:disabled{opacity:.4;cursor:default;transform:none}
.rep-bar{width:min(320px,40vw);height:6px;border-radius:6px;background:rgba(255,248,242,.3);overflow:hidden}
.rep-bar i{display:block;height:100%;width:10%;background:#fff8f2;border-radius:6px;transition:width 500ms cubic-bezier(.16,1,.3,1)}
.rep-count{font-family:var(--display);font-size:22px;color:#fff8f2;min-width:74px;text-align:center}
.rep-count b{font-weight:400}
@media (max-width: 810px){.rep-btn{width:48px;height:48px}.rep-bar{width:30vw}}
@media (prefers-reduced-motion: reduce){.rep-track .rep-card{transition:none}}
/* services page: "Booking is easy" as a story ribbon */
.steps-head{position:relative;z-index:3;padding-bottom:0}
.story-trail.steps-trail{padding-top:clamp(24px,3vw,48px);padding-bottom:clamp(60px,7vw,120px)}
.steps-trail .st-block{min-height:clamp(380px,40vw,560px)}
.steps-trail .st-h{margin-bottom:16px}
@media (max-width: 810px){.story-trail.steps-trail{padding-bottom:64px}}
/* keep the burst circle inside the story section; the orange band below
   reveals itself with its own matching circle mask, so nothing spills past it */
.story-trail{overflow:clip}
.st-burst{will-change:auto;backface-visibility:hidden}

/* phones: give the hero art room so it doesn't crowd the buttons or the cards below */
@media (max-width: 810px){
  .hero{gap:0;padding-bottom:40px}
  .hero-r{margin-top:96px;width:88%;max-width:420px}
  .hero-r img.fl{display:none}
  .hero-r .badge{width:78px;height:78px;top:-2%;right:-4%}
  .hero-r .badge-c{font-size:17px}
  .hero-r .hero-hand{width:18%}
  .hl-wrap{padding-top:48px}
}
/* home service cards: no top rule on the titles; breathing room between swipe cards on phones */
.svc-orange .svc{border-top:0;padding-top:4px}
@media (max-width: 1024px){
  .svc-orange .svc-row{margin-top:40px;gap:0}
  .svc-orange .svc{padding:6px 24px 0;border-left:2px dashed rgba(255,248,242,.45)}
  .svc-orange .svc:first-child{padding-left:0;border-left:0}
  .svc-orange .svc h3{margin-bottom:4px}
}
/* review carousel sizing (overrides the older report-card sizes above) */
.rep-track{padding-left:max(20px,calc((100vw - min(420px,82vw)) / 2));padding-right:max(20px,calc((100vw - min(420px,82vw)) / 2))}
.rep-track .rv-card.rep-card{width:min(420px,82vw);background:#fff;color:var(--deep);padding:26px}

/* home services band: titles take two lines on desktop so the prices line up */
.svc-orange .svc h3{min-height:1.9em}
.svc-dots{display:none}
/* phones/tablets: a real swipe carousel. Full-bleed track, the next card peeks
   in, gentle snapping, native momentum, dots underneath */
@media (max-width: 1024px){
  .svc-orange .svc h3{min-height:0}
  .svc-orange .svc-row{gap:14px;margin:36px calc(-1 * clamp(20px,4vw,48px)) 0;padding:0 clamp(20px,4vw,48px) 6px;
    scroll-snap-type:x mandatory;scroll-padding:0 clamp(20px,4vw,48px);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .svc-orange .svc,.svc-orange .svc:first-child{width:min(300px,76vw);padding:22px 20px;border:0;border-radius:26px;background:rgba(255,248,242,.1);
    box-shadow:inset 0 0 0 1.5px rgba(255,248,242,.28);scroll-snap-align:start;scroll-snap-stop:always}
  .svc-orange .svc .svc-art.has-bg{height:240px;margin-top:18px}
  .svc-orange .svc .svc-art .svc-bg{width:min(230px,100%)}
  .svc-orange .svc .svc-art.has-bg img.photo{max-height:160px}
  .svc-orange .svc .book{margin-top:18px;align-self:flex-start}
  .svc-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .svc-dots i{width:8px;height:8px;border-radius:8px;background:rgba(255,248,242,.4);transition:width 300ms var(--ease),background 300ms}
  .svc-dots i.on{width:26px;background:#fff8f2}
}
/* the care panel's paw stamp pokes above the panel: give it clear air below the orange band */
#care.sec-top0,#care{padding-top:clamp(104px,9vw,140px)}
/* every service card lines up: same title height, art on one line, Book now pinned to the bottom */
@media (max-width: 1024px){
  .svc-orange .svc-row{align-items:stretch}
  .svc-orange .svc{display:flex;flex-direction:column}
  .svc-orange .svc h3{min-height:1.9em;display:flex;align-items:flex-end}
  .svc-orange .svc .book{margin-top:auto;padding-top:18px}
  .svc-orange .svc .svc-art.has-bg{margin-bottom:6px}
}
/* compact service cards: no tall empty space, sized to their content on every screen */
.svc-orange .svc-art.has-bg{height:260px}
.svc-orange .svc-art .svc-bg{width:min(240px,100%)}
.svc-orange .svc-art.has-bg img.photo{max-height:170px}
@media (max-width: 1024px){
  .svc-orange .svc,.svc-orange .svc:first-child{width:clamp(240px,40vw,280px);padding:20px 18px}
  .svc-orange .svc h3{font-size:28px}
  .svc-orange .svc .svc-meta{font-size:15px;margin-top:6px}
  .svc-orange .svc .svc-art.has-bg{height:196px;margin-top:14px}
  .svc-orange .svc .svc-art .svc-bg{width:min(196px,100%)}
  .svc-orange .svc .svc-art.has-bg img.photo{max-height:132px;margin-bottom:14px}
  .svc-orange .svc .svc-art.has-bg img[src*="pack"]{max-height:110px;margin-bottom:22px}
  .svc-orange .svc .book{padding-top:14px}
}
@media (max-width: 600px){
  .svc-orange .svc,.svc-orange .svc:first-child{width:min(262px,72vw)}
}