/*
Theme Name: Doggy Pamper Patrol Studio
Description: Mobile grooming homepage with a photographic design.
Version: 1.0.22
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: dpp-studio
*/
:root{--brand:#43484b;--cream:#f8f4ea;--paper:#fffdf7;--gold:#ffb651;--ink:#252c2c;--line:#ded8cc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 'DM Sans',Arial,sans-serif}
a{color:inherit}
img{display:block;width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;line-height:1.03;letter-spacing:-.055em}
h1{font-size:clamp(3.25rem,7.6vw,7.5rem);max-width:9ch}
h2{font-size:clamp(2.5rem,5.4vw,5rem)}
h3{font-size:clamp(1.65rem,2.8vw,2.65rem)}
:focus-visible{outline:3px solid #c57420;outline-offset:5px}
.wrap{width:min(1280px,calc(100% - 80px));margin-inline:auto}
.site-header{background:var(--brand);color:var(--cream)}
.header-row{display:flex;min-height:94px;align-items:center;justify-content:space-between;gap:22px}
.brand{width:154px;flex:none}
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,42px)}
.nav a,.button{text-decoration:none;font-weight:700}
.nav a:not(.button):hover{color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--gold);color:var(--ink);border:1px solid transparent;border-radius:8px;padding:13px 19px;line-height:1.35}
.button:hover{background:#ffc87b}
.button.secondary{color:inherit;border-color:#a09f96;background:transparent}
.button.secondary:hover{border-color:currentColor}
.hero{background:var(--brand);color:var(--cream);padding:clamp(32px,5.5vw,80px) 0}
.hero-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(28px,5vw,86px);align-items:center}
.eyebrow{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em}
.hero .eyebrow{color:var(--gold);margin-bottom:19px}
.hero h1 em{color:var(--gold);font-style:normal}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:34ch;margin:22px 0 27px;color:#e3ddd0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.patrol-art{overflow:hidden;border-radius:38% 38% 14px 14px / 25% 25% 14px 14px;border:1px solid #eec27b;background:var(--gold)}
.patrol-art img{width:100%;aspect-ratio:1.24;object-fit:cover;object-position:50% 54%}
.area{background:var(--gold);color:var(--ink);padding:12px 0;font-weight:800}
.area .wrap{display:flex;gap:9px 28px;justify-content:space-between;flex-wrap:wrap}
.section{padding:clamp(56px,8vw,112px) 0}
.section .eyebrow{color:#7b481e;margin-bottom:13px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px}
.section-head p:not(.eyebrow){max-width:32ch;color:#555b57}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service{padding:27px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.service p{color:#555b57}
.service a{width:fit-content;margin-top:auto;font-weight:800;text-underline-offset:4px}
.grooming-extras{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem}
.grooming-extras h3{font-size:1rem;line-height:1.3;letter-spacing:0}
.extras-list{display:flex;flex-wrap:wrap;gap:3px 24px;margin:6px 0;padding-left:17px}
.extras-list li::marker{color:#8c4e16}
.grooming-extras > p{color:#555b57;font-size:.8125rem}
.grooming-extras a{font-weight:800;text-underline-offset:4px}
.experience{background:#e9e2d4}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,7vw,95px);align-items:center}
.van{aspect-ratio:1;object-fit:cover;object-position:center 25%;border-radius:15px}
.feature p:not(.eyebrow){max-width:40ch;margin:16px 0 24px}
.steps{padding-left:21px;margin:0}
.steps li{padding:6px 0}
.booking{background:var(--brand);color:var(--cream);border-radius:18px;overflow:hidden}
.booking-copy{padding:clamp(28px,6vw,78px)}
.booking .eyebrow{color:var(--gold)}
.booking-copy p:not(.eyebrow){margin:16px 0 22px}
.site-footer{padding:24px 0 33px;border-top:1px solid var(--line)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:10px 25px;flex-wrap:wrap}
.footer-contact{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.footer-row a{text-underline-offset:4px}
.back-to-top:not([hidden]) {
    display: grid;
    place-items: center;
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--gold);
    color: var(--ink);
    font: 700 25px/1 Arial, sans-serif;
    text-decoration: none;
    box-shadow: 0 3px 12px rgb(37 44 44 / 25%);
}
.back-to-top:hover{background:#ffc87b}
.back-to-top-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: none;
    stroke: #000;
    stroke-width: 3;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--scroll-border-offset, 100);
}
.splash{display:none}
@media(prefers-reduced-motion:no-preference){
 .has-opening .splash{display:grid;place-items:center;position:fixed;inset:0;z-index:10000;background:var(--brand);pointer-events:none;animation:curtain .7s cubic-bezier(.65,0,.35,1) 1.85s both}
 .splash-mark{width:min(300px,65vw)}
 .splash-trail{display:flex;justify-content:center;gap:clamp(3px,1vw,9px);margin:18px auto 0;font-size:clamp(18px,5vw,24px);color:var(--gold)}
 .splash-trail span{position:relative;top:3px;width:1em;height:1em;transform:rotate(98deg);animation:paw-step .26s ease-out .2s both}
 .splash-trail span:nth-child(even){top:-3px;transform:rotate(82deg)}
 .splash-trail span:nth-child(2){animation-delay:.45s}
 .splash-trail span:nth-child(3){animation-delay:.7s}
 .splash-trail span:nth-child(4){animation-delay:.95s}
 .splash-trail span:nth-child(5){animation-delay:1.2s}
 .splash-trail span:nth-child(6){animation-delay:1.45s}
 .splash-trail span::before,.splash-trail span::after{content:'';position:absolute;border-radius:50%}
 .splash-trail span::before{left:.23em;bottom:.08em;width:.54em;height:.4em;background:currentColor}
 .splash-trail span::after{left:.04em;top:.35em;width:.17em;height:.21em;background:currentColor;box-shadow:.23em -.2em,.51em -.2em,.74em 0}
 .has-opening body:focus-within .splash{display:none}
}
@keyframes paw-step{from{opacity:.16;scale:.86}to{opacity:1;scale:1}}
@keyframes curtain{from{transform:translateY(0);visibility:visible}to{transform:translateY(-100%);visibility:hidden}}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}.hero-grid{gap:24px}.nav{gap:15px}.nav a{font-size:.86rem}.services{gap:10px}.service{padding:19px}}
@media(max-width:650px){.header-row{flex-wrap:wrap;padding:12px 0;gap:10px}.brand{width:120px}.nav{flex-wrap:wrap;gap:10px 14px}.nav .button{padding:8px 12px}.hero-grid,.services,.feature{grid-template-columns:1fr}.section-head{display:block}.section-head p:not(.eyebrow){margin-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.service .service-kicker{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#7b481e}
.service ul{margin:0 0 8px;padding-left:20px;color:#424b46}
.service li+li{margin-top:6px}
.coverage{background:#f1ebde}
.county-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px}
.county-list li{background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px 12px;font-weight:700}
html.dpp-scrolling{scroll-behavior:auto}

.coverage-content{max-width:850px}
.coverage-content p:not(.eyebrow){margin:16px 0;max-width:53ch}
.booking{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);align-items:start}
.booking-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:clamp(22px,4vw,45px);margin:clamp(12px,2vw,25px);border-radius:12px;background:var(--paper);color:var(--ink)}
.booking-form label{display:grid;gap:5px;font-weight:700}
.booking-form input,.booking-form select,.booking-form textarea{width:100%;min-width:0;padding:10px 12px;border:1px solid #a9a59a;border-radius:6px;background:white;color:var(--ink);font:inherit;font-weight:400}
.booking-form textarea{resize:vertical}
.booking-form .button{font:inherit;font-weight:700;cursor:pointer}
.booking-form .button:disabled{opacity:.6;cursor:default}
.booking-wide{grid-column:1/-1}
.booking-draft small{display:block;margin-top:7px}
@media(max-width:800px){
 .booking{grid-template-columns:1fr}
 .booking-copy{padding-bottom:8px}
}
@media(max-width:430px){.booking-form{grid-template-columns:1fr}}

.reputation{background:#e9e2d4}
.reputation .section-head{gap:16px 28px;align-items:baseline}
.reviews-link{display:inline-block;font-weight:800;text-underline-offset:4px}
.grooming-stats,.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grooming-stats{margin:0 0 14px;padding:0;list-style:none}
.grooming-stats li{display:grid;align-content:start;gap:6px;padding:clamp(18px,3vw,32px);border-radius:12px;background:var(--brand);color:var(--cream)}
.grooming-stats strong{font:800 clamp(2.5rem,5vw,4.4rem)/1 Manrope,Arial,sans-serif;letter-spacing:-.055em;color:var(--gold)}
.review-card{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.review-stars{color:#8c4e16;letter-spacing:.12em}
.review-card blockquote{margin:0;font-size:1.05rem}
.review-card figcaption{margin-top:auto;padding-top:4px;font-size:.88rem;font-weight:800}
.review-card figcaption span{font-weight:400;color:#555b57}
@media(max-width:650px){
 .reputation .reviews-link{margin-top:14px}
 .grooming-stats,.review-grid{grid-template-columns:1fr}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .service, .review-card, .grooming-stats li, .county-list li {
        transition: translate .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .service:hover, .review-card:hover, .grooming-stats li:hover, .county-list li:hover {
        translate: 0 -3px;
        box-shadow: 0 8px 18px rgb(37 44 44 / 12%);
        border-color: #c57420;
    }
    .patrol-art img, .van, .brand img {
        transition: scale .5s cubic-bezier(.22, 1, .36, 1);
    }
    .patrol-art:hover img, .van:hover, .brand:hover img {
        scale: 1.025;
    }
    .button {
        transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .button:not(:disabled):hover {
        box-shadow: 0 5px 14px rgb(37 44 44 / 20%);
    }
    .button span, .reviews-link span {
        display: inline-block;
        transition: translate .25s ease;
    }
    .button:not(:disabled):hover span, .reviews-link:hover span {
        translate: 3px -2px;
    }
    .nav a:not(.button), .service a, .grooming-extras a, .reviews-link, .site-footer a {
        transition: color .25s ease, text-underline-offset .25s ease;
    }
    .service a:hover, .grooming-extras a:hover, .reviews-link:hover, .site-footer a:hover {
        color: #7b481e;
        text-underline-offset: 6px;
    }
    .booking-form :is(input, select, textarea) {
        transition: border-color .25s ease;
    }
    .booking-form :is(input, select, textarea):hover {
        border-color: #8c4e16;
    }
}