/* The Dog Geezer: bolder type, countryside shapes and motion. Keeps the green / cream / sage brand. */
:root{--gold:#c8963e;--moss:#647653;--green-deep:#182a1e}
body{overflow-x:clip}
#dg-progress{position:fixed;left:0;top:0;height:5px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--gold));z-index:9999;pointer-events:none}
@keyframes dgrise{from{opacity:0;translate:0 34px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes dgword{from{opacity:0;translate:0 .45em;filter:blur(10px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes dgspin{to{rotate:360deg}}
@keyframes dgbreathe{50%{scale:1.06}}
@keyframes dgfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes dgkenburns{from{scale:1.02}to{scale:1.13}}
.dgw{display:inline-block;animation:dgword .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*110ms + 150ms)}
/* header + buttons */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(8px);background:rgba(250,244,230,.9)}
.navlinks a:not(.btn){position:relative}
.navlinks a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s}
.navlinks a:not(.btn):hover:after{transform:scaleX(1)}
.btn{border-radius:999px;padding:14px 28px;box-shadow:0 10px 24px rgba(36,59,42,.28);position:relative;overflow:hidden;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(36,59,42,.36)}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .55s}
.btn:hover:after{left:130%}
.btn.light{box-shadow:0 10px 24px rgba(0,0,0,.2)}
.textlink{transition:color .2s,letter-spacing .2s}
.textlink:hover{color:var(--moss);letter-spacing:.02em}
/* hero (full-bleed photo with cream text) */
.hero{overflow:hidden;min-height:680px}
.hero:before{inset:-8% 0;background-position:center 58%;translate:0 var(--py,0);animation:dgkenburns 18s ease-in-out infinite alternate;transform-origin:60% 50%}
.hero h1,.hero .hero-slogan{font-size:clamp(60px,7.4vw,112px);letter-spacing:-.055em;line-height:.96}
.hero h1 em,.hero .hero-slogan em{font-style:italic;color:#e1e8d2;background:linear-gradient(var(--gold),var(--gold)) 0 92%/0 .08em no-repeat;animation:dgunder 1.2s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes dgunder{to{background-size:100% .08em}}
.hero-content>*:not(h1):not(:where(.hero-slogan)){animation:dgrise .9s cubic-bezier(.2,.8,.2,1) both}
.hero-content>.eyebrow{animation-delay:.05s}.hero-content>.intro{animation-delay:.8s}.hero-content>.actions{animation-delay:1s}
.hero .intro{font-size:19px}
.spinbadge{position:absolute;right:max(28px,calc((100vw - 1210px)/2));bottom:46px;width:164px;height:164px;border-radius:50%;background:rgba(250,244,230,.96);color:var(--green);box-shadow:0 18px 40px rgba(0,0,0,.4);display:grid;place-items:center;z-index:3;animation:dgfloat 6s ease-in-out infinite}
.spinbadge svg.ring{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:dgspin 22s linear infinite}
.spinbadge text{font:700 15px Arial,sans-serif;letter-spacing:.15em;fill:currentColor;text-transform:uppercase}
.spinbadge .paw{width:46px;height:46px;color:var(--moss)}
.paw{fill:currentColor}
/* paw trail */
.paws{display:flex;justify-content:space-between;align-items:center;max-width:1320px;margin:-30px auto 10px;padding:0 55px;color:var(--moss);pointer-events:none}
.paws .paw{width:34px;height:34px;opacity:.55}
.paws .paw:nth-child(odd){rotate:-18deg;translate:0 -8px}
.paws .paw:nth-child(even){rotate:12deg;translate:0 10px}
.js-dg .paws .paw{opacity:0;scale:.3;transition:opacity .4s,scale .5s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i)*110ms)}
.js-dg .paws.in .paw{opacity:.55;scale:1}
/* strips + sections */
.localstrip span{transition:color .2s,translate .2s}
.localstrip span:hover{color:var(--moss);translate:0 -3px}
h2{font-size:clamp(44px,5.2vw,78px);letter-spacing:-.055em;line-height:1}
.section{padding-top:110px;padding-bottom:100px}
/* cards */
.services>*{transition:translate .3s,box-shadow .3s,background .3s}
.services>*:hover{translate:0 -10px}
.services .btn{width:100%}
.step{position:relative;transition:translate .3s}
.step:hover{translate:0 -6px}
.step:before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--gold);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.step.in:before,.no-js .step:before{width:100%}
.step span{font-size:44px;color:var(--gold)}
/* about block */
.about{position:relative;overflow:hidden}
.about>*{position:relative;z-index:1}
.aboutlogo{animation:dgfloat 8s ease-in-out infinite}
.dg-bigword{position:absolute;left:0;bottom:-.16em;z-index:0!important;white-space:nowrap;font:italic 400 clamp(150px,22vw,340px)/1 Georgia,serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(250,244,230,.16);translate:var(--hx,0%) 0;pointer-events:none;user-select:none}
/* outdoors */
.outdoors{overflow:hidden}
.outdoors>img{scale:1.08;translate:0 var(--py,0);transition:scale 1.2s}
.outdoors:hover>img{scale:1.14}
/* areas + faq + form */
.areas h3,.areas li,.areas p{transition:translate .25s}
.areas>div>div>*:hover{translate:8px 0}
details{transition:padding .2s,background .2s}
details summary{transition:translate .2s,color .2s}
details summary:hover{translate:6px 0;color:var(--moss)}
details[open]{background:linear-gradient(90deg,rgba(220,226,211,.55),transparent)}
form input,form select,form textarea{transition:box-shadow .2s,border-color .2s}
form input:focus,form select:focus,form textarea:focus{outline:none;box-shadow:0 4px 0 0 var(--gold)}
/* footer */
.footer-top{transition:translate .2s}
.footer-top:hover{translate:0 -4px}
/* reveal */
.js-dg [data-dg]{opacity:0;transform:translateY(42px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-dg [data-dg=zoom]{transform:scale(.85)}
.js-dg [data-dg=left]{transform:translateX(-60px)}
.js-dg [data-dg=right]{transform:translateX(60px)}
.js-dg [data-dg].in{opacity:1;transform:none}
@media(max-width:900px){.spinbadge{width:112px;height:112px}.spinbadge .paw{width:32px;height:32px}.spinbadge text{font-size:14px}.paws{padding:0 22px;overflow:hidden}.paws .paw{width:24px;height:24px}.hero{padding-top:34px;padding-bottom:50px}.hero{min-height:620px}.spinbadge{right:18px;bottom:20px}.section{padding-top:64px;padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js-dg [data-dg]{opacity:1;transform:none}.js-dg .paws .paw{opacity:.55;scale:1}#dg-progress{display:none}.hero h1 em,.hero .hero-slogan em{background-size:100% .09em}}
.paws{margin:8px auto 2px}

/* ===== header v2: dark green bar, logo lockup, serif menu with gold sweep ===== */
.header{background:var(--green);border-bottom:0;position:sticky;top:-36px;z-index:50;backdrop-filter:none;box-shadow:0 10px 30px rgba(10,24,14,.28)}
.header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold),#ecca86,var(--gold))}
.topbar{background:var(--green-deep);color:rgba(250,244,230,.85);font:700 11px/36px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;height:36px;overflow:hidden}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:20px}
.topbar a{color:var(--gold);transition:color .2s}.topbar a:hover{color:var(--cream)}
.navrow{min-height:100px;transition:min-height .35s}
.brand .lockup{display:block;height:76px;width:auto;transition:height .35s}
.header.scrolled .navrow{min-height:76px}
.header.scrolled .brand .lockup{height:56px}
.navlinks{gap:38px}
.navlinks a:not(.btn){font:italic 400 22px/1 Georgia,serif;letter-spacing:-.01em;color:transparent;background:linear-gradient(90deg,var(--gold) 50%,var(--cream) 50%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;transition:background-position .5s cubic-bezier(.2,.8,.2,1);padding:8px 0;position:relative}
.navlinks a:not(.btn):hover,.navlinks a:not(.btn):focus-visible{background-position:0 0}
.navlinks a:not(.btn):after{content:"";position:absolute;left:-16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--gold);height:8px;bottom:auto;right:auto;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.navlinks a:not(.btn):hover:after{transform:scale(1)}
.navlinks .btn{background:var(--gold);color:var(--green);border-color:var(--gold);font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.navlinks .btn:hover{background:var(--cream);border-color:var(--cream)}
.menu{border-color:rgba(250,244,230,.45);color:var(--cream);border-radius:999px;font-weight:700}
@media(max-width:900px){.navrow{min-height:88px}.brand .lockup{height:60px}.header.scrolled .brand .lockup{height:48px}.navlinks{gap:22px}.navlinks a:not(.btn){font-size:20px}}
/* Webster 23 Oct 2026: keep the desktop menu tidy between tablet and laptop widths */
@media(min-width:681px){.navlinks{flex-wrap:wrap;justify-content:flex-end;row-gap:2px;min-width:0}.navlinks a{white-space:nowrap}}
@media(min-width:681px) and (max-width:1240px){.navlinks{gap:18px}.navlinks a:not(.btn){font-size:18px}}
@media(max-width:680px){.topbar span{display:none}.topbar .wrap{justify-content:center}.navrow{min-height:80px}.brand .lockup{height:52px}.header.scrolled .navrow{min-height:68px}.header.scrolled .brand .lockup{height:44px}.navlinks{background:var(--green);padding:6px 0 18px}.navlinks a:not(.btn){padding:14px 12px;font-size:23px}.navlinks a:not(.btn):after{display:none}.navlinks .btn{margin:6px 12px 0}}
.navrow{min-height:124px}
.brand .lockup{height:100px}
.header.scrolled .navrow{min-height:86px}
.header.scrolled .brand .lockup{height:68px}
@media(max-width:900px){.navrow{min-height:96px}.brand .lockup{height:70px}.header.scrolled .brand .lockup{height:52px}}
@media(max-width:680px){.navrow{min-height:84px}.brand .lockup{height:60px}.header.scrolled .navrow{min-height:70px}.header.scrolled .brand .lockup{height:46px}}

/* topbar: text only now; hidden on phones where it would not fit */
@media(max-width:680px){.topbar{display:none}.header{top:0}}

/* footer credit */
.footer-credit{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);transition:color .2s}
.footer-credit:hover,.footer-credit:focus-visible{color:var(--moss)}

/* ===== adventure section v2: soft arch photo, floating chips, overlapping card, curved edges ===== */
.trail{position:relative;background:var(--sage);padding:130px 0 140px;overflow:hidden}
.trail:before,.trail:after{content:"";position:absolute;left:-10%;right:-10%;height:90px;background:var(--cream);z-index:0}
.trail:before{top:-1px;border-radius:0 0 50% 50%/0 0 100% 100%}
.trail:after{bottom:-1px;border-radius:50% 50% 0 0/100% 100% 0 0}
.trail-inner{position:relative;z-index:1;max-width:1260px;margin:0 auto;padding:0 55px;display:grid;grid-template-columns:1.02fr 1fr;align-items:center}
.trail-photo{position:relative;margin:0;padding:34px 0 34px 24px}
.trail-ring{position:absolute;left:-60px;top:-10px;width:92%;aspect-ratio:1;border-radius:50%;border:3px dashed rgba(36,59,42,.28);animation:dgspin 70s linear infinite;pointer-events:none}
.trail-frame{position:relative;border-radius:300px 300px 44px 44px;overflow:hidden;border:11px solid var(--cream);box-shadow:0 38px 74px rgba(24,42,30,.36);rotate:-2.5deg;aspect-ratio:.86;background:var(--green)}
.trail-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 42%;scale:1.12;translate:0 var(--py,0);transition:scale 1.4s}
.trail-photo:hover .trail-frame img{scale:1.18}
.chip{position:absolute;z-index:3;background:var(--cream);color:var(--green);font:italic 400 19px/1 Georgia,serif;letter-spacing:-.01em;padding:13px 22px;border-radius:999px;box-shadow:0 14px 30px rgba(24,42,30,.28);white-space:nowrap;animation:dgfloat 6s ease-in-out infinite}
.chip:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-right:10px}
.chip.c1{left:-14px;top:120px;rotate:-5deg}
.chip.c2{right:-34px;top:330px;rotate:4deg;animation-delay:-2s}
.chip.c3{left:34px;bottom:12px;rotate:-3deg;animation-delay:-4s}
.trail-copy{position:relative;z-index:2;background:var(--cream);border-radius:46px;padding:60px 56px;margin-left:-96px;box-shadow:0 34px 70px rgba(24,42,30,.2)}
.trail-copy .eyebrow{color:var(--moss)}
.trail-copy h2{font-size:clamp(46px,4.8vw,74px);margin-bottom:26px}
.trail-copy h2 em{font-style:italic;color:var(--moss);background:linear-gradient(var(--gold),var(--gold)) 0 94%/100% .07em no-repeat}
.trail-copy p{max-width:520px}
.trail-copy .btn{margin-top:10px}
@media(max-width:900px){
 .trail{padding:96px 0 110px}
 .trail-inner{grid-template-columns:1fr;padding:0 22px}
 .trail-photo{padding:20px 6px 0}
 .trail-frame{border-radius:200px 200px 34px 34px;aspect-ratio:.95}
 .trail-ring{display:none}
 .chip{font-size:16px;padding:10px 16px}.chip.c1{left:-4px;top:60px}.chip.c2{right:-4px;top:200px}.chip.c3{left:14px;bottom:70px}
 .trail-copy{margin:-70px 10px 0;padding:44px 28px;border-radius:34px}
}
.chip.c2{top:34px;right:-18px}
@media(max-width:900px){.chip.c2{top:36px;right:-2px}}
/* Intro video (click-to-load YouTube) */
.dg-video{position:relative;aspect-ratio:16/9;border-radius:30px;overflow:hidden;background:var(--green-deep);box-shadow:0 30px 60px rgba(24,42,30,.25)}
.dg-video a,.dg-video img,.dg-video iframe{display:block;width:100%;height:100%;border:0}
.dg-video img{object-fit:cover;transition:scale .5s}
.dg-video a:hover img,.dg-video a:focus-visible img{scale:1.04}
.dg-video-btn{position:absolute;left:50%;top:50%;translate:-50% -50%;width:84px;height:84px;border-radius:50%;background:var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:scale .3s}
.dg-video-btn:before{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #182a1e}
.dg-video a:hover .dg-video-btn{scale:1.1}
.dg-video-home{margin:26px 0 8px;max-width:560px}
.dg-video-section{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:start}
.dg-chapters ol{list-style:none;margin:18px 0;padding:0;display:grid;gap:6px}
.dg-chapters a{display:flex;gap:14px;padding:10px 14px;border-radius:14px;color:inherit;text-decoration:none;font-weight:600}
.dg-chapters a:hover,.dg-chapters a:focus-visible{background:var(--sage)}
.dg-chapters a span,.dg-transcript h3 span{font-variant-numeric:tabular-nums;color:var(--moss);font-weight:800;min-width:3em}
.dg-transcript{max-width:780px}
.dg-transcript h3{font-size:22px;margin:32px 0 8px}
.dg-transcript p{font-size:18px;line-height:1.7}
@media (max-width:860px){.dg-video-section{grid-template-columns:1fr;gap:30px}.dg-video{border-radius:20px}.dg-video-btn{width:68px;height:68px}.dg-video-btn:before{left:27px;top:21px;border-width:13px 0 13px 21px}}

/* homepage service cards: room for the page links under the button (audit fixes, Oct 2026) */
.services{grid-template-rows:repeat(7,auto)}.service{grid-row:span 7}.service-links{display:flex;flex-wrap:wrap;column-gap:22px;align-items:flex-start}

/* Homepage walking section (moved from the old /dog-walking-heywood page, 30 Oct 2026) */
.home-walks h3{margin:28px 0 12px}
.home-walks .btn{margin-top:14px}
.home-walks .service-page-panel{position:relative;background:var(--green);color:var(--cream);border-radius:40px;padding:46px 40px;box-shadow:0 34px 70px rgba(24,42,30,.3)}
.home-walks .service-page-panel h2{color:var(--cream);font-size:36px}
.home-walks .service-page-panel ul{list-style:none;padding:0;display:grid;gap:12px}
.home-walks .service-page-panel li{position:relative;margin:0;padding:15px 16px 15px 58px;border-radius:16px;background:rgba(250,244,230,.09)}
.home-walks .service-page-panel li:before{content:"\2713";position:absolute;left:14px;top:50%;translate:0 -50%;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#182a1e;font-weight:900}
@media(max-width:900px){.home-walks .service-page-panel{padding:34px 24px;border-radius:30px}}