/* PET-01 萌宠美容 — bright, bubbly grooming salon. Fredoka + Nunito. */
.tpl-pet-01{--gut:clamp(16px,5vw,72px);--max:1320px;--r:32px;--rs:22px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));--card:color-mix(in srgb,var(--bg) 35%,#fff);--display:"Fredoka","Noto Sans SC",system-ui,sans-serif;--paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.2c-2.9 0-5.6 2.6-5.6 5.1 0 1.6 1.2 2.4 2.6 2.4 1.2 0 1.9-.6 3-.6s1.8.6 3 .6c1.4 0 2.6-.8 2.6-2.4 0-2.5-2.7-5.1-5.6-5.1Z'/%3E%3Cellipse cx='5.2' cy='10.6' rx='2.1' ry='2.6' transform='rotate(-18 5.2 10.6)'/%3E%3Cellipse cx='9.3' cy='6.1' rx='2.2' ry='2.8' transform='rotate(-6 9.3 6.1)'/%3E%3Cellipse cx='14.7' cy='6.1' rx='2.2' ry='2.8' transform='rotate(6 14.7 6.1)'/%3E%3Cellipse cx='18.8' cy='10.6' rx='2.1' ry='2.6' transform='rotate(18 18.8 10.6)'/%3E%3C/svg%3E");font-family:Nunito,"Noto Sans SC",system-ui,sans-serif;font-size:16.5px}
.tpl-pet-01 h1,.tpl-pet-01 h2,.tpl-pet-01 h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.p1-main>section{padding:clamp(64px,8vw,120px) var(--pad-x)}

/* header */
.p1-head{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:16px var(--pad-x)}
.p1-brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;font-family:var(--display);font-weight:600;font-size:23px;line-height:1.15;text-decoration:none;color:var(--fg)}
.p1-brand{position:relative}
.p1-brand:not(:has(img))::before{content:"";flex:none;width:40px;height:40px;border-radius:46% 54% 50% 50%/55% 48% 52% 45%;background:var(--accent)}
.p1-brand:not(:has(img))::after{content:"";position:absolute;left:9px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--on-accent);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}
.p1-nav{display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-radius:999px;background:var(--card);border:1.5px solid var(--line)}
.p1-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;transition:background .2s}
.p1-nav a:hover{background:var(--soft)}
.p1-head-cta{display:inline-flex;align-items:center;min-height:48px;padding:8px 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-family:var(--display);font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .2s}
.p1-head-cta:hover{transform:rotate(-2deg) scale(1.04)}

/* buttons */
.p1-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}
.p1-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 32px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:600;font-size:18px;text-decoration:none;text-align:center;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 55%,var(--fg));transition:transform .15s,box-shadow .15s}
.p1-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,var(--fg))}
.p1-btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.p1-btn--ghost:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 2px var(--fg)}
.p1-btn--dark{background:var(--on-accent);color:var(--accent);box-shadow:0 5px 0 color-mix(in srgb,var(--on-accent) 55%,var(--accent))}
.p1-btn--dark:hover{box-shadow:0 3px 0 color-mix(in srgb,var(--on-accent) 55%,var(--accent))}

/* hero */
.p1-main>.p1-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,5vw,80px);align-items:center;padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(72px,8vw,120px)}
.p1-hero--text{grid-template-columns:minmax(0,1fr)!important;max-width:1000px}
.p1-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:9px 18px 9px 12px;border-radius:999px;background:var(--soft);font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.06em;color:var(--fg)}
.p1-eyebrow::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent)}
.p1-hero h1{font-size:clamp(42px,6.2vw,88px);line-height:1.1;letter-spacing:-.02em;margin-bottom:clamp(18px,2.2vw,28px)}
.p1-mark{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--accent) 70%,var(--bg)) 64%,color-mix(in srgb,var(--accent) 70%,var(--bg)) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;border-radius:.2em}
.p1-sub{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:30em;line-height:1.7}
.p1-sub p:last-child{margin:0}
.p1-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,36px)}
.p1-chips li{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:15px}
.p1-chip-i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--fg)}
.p1-chip-i svg{width:18px;height:18px}
.p1-hero-art{position:relative;padding:clamp(12px,2vw,24px);max-width:600px;justify-self:center;width:100%}
.p1-blob{position:absolute;inset:4% -2% -4% 8%;background:var(--soft);border-radius:42% 58% 63% 37%/41% 44% 56% 59%}
.p1-hero-media{position:relative;overflow:hidden;border-radius:47% 53% 46% 54%/52% 46% 54% 48%;box-shadow:0 40px 70px -46px var(--fg)}
.p1-hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.p1-sticker{position:absolute;display:grid;place-items:center;border-radius:50%;z-index:2}
.p1-sticker--paw{left:-2%;top:10%;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);background:var(--accent);color:var(--on-accent);transform:rotate(-14deg);box-shadow:0 0 0 6px var(--bg)}
.p1-sticker--paw svg{width:52%}
.p1-sticker--heart{right:0;bottom:12%;width:clamp(58px,6vw,78px);height:clamp(58px,6vw,78px);background:var(--card);color:var(--fg);box-shadow:0 0 0 6px var(--bg),0 16px 30px -18px var(--fg)}
.p1-sticker--heart svg{width:46%}
.p1-bubble{position:absolute;border-radius:50%;border:2px solid color-mix(in srgb,var(--fg) 30%,transparent);background:radial-gradient(circle at 32% 30%,#fff 0 14%,transparent 16%),color-mix(in srgb,var(--card) 60%,transparent);z-index:2}
.p1-bubble--a{width:44px;height:44px;right:10%;top:2%}
.p1-bubble--b{width:24px;height:24px;right:3%;top:16%}
.p1-bubble--c{width:32px;height:32px;left:6%;bottom:6%}
@media (prefers-reduced-motion:no-preference){
  .p1-blob{animation:p1-morph 14s ease-in-out infinite alternate}
  .p1-bubble{animation:p1-float 6s ease-in-out infinite alternate}
  .p1-bubble--b{animation-delay:-2s}.p1-bubble--c{animation-delay:-4s}
}
@keyframes p1-morph{50%{border-radius:58% 42% 40% 60%/55% 60% 40% 45%}to{border-radius:40% 60% 55% 45%/45% 40% 60% 55%}}
@keyframes p1-float{to{transform:translateY(-14px)}}

/* section heads */
.p1-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--fg)}
.p1-kicker-paw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.p1-kicker-paw svg{width:17px;height:17px}
.p1-main h2{font-size:clamp(32px,4.4vw,58px);line-height:1.12}
.p1-head-c{text-align:center;max-width:780px;margin:0 auto clamp(36px,4.4vw,60px)}
.p1-intro{color:var(--muted);font-size:17px;margin-top:16px}
.p1-intro p:last-child{margin:0}

/* about: bubble-edged band */
.p1-main>.p1-about{position:relative;background:var(--soft);margin:24px 0}
.p1-about::before,.p1-about::after{content:"";position:absolute;left:0;right:0;height:22px;background:radial-gradient(circle at 50% 100%,var(--soft) 21px,transparent 22px) 0 0/44px 22px repeat-x}
.p1-about::before{bottom:100%}
.p1-about::after{top:100%;transform:scaleY(-1)}
.p1-about-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,6vw,96px);align-items:center}
.p1-about--text .p1-about-in{grid-template-columns:minmax(0,1fr);max-width:860px}
.p1-about-media{position:relative;margin:0;border-radius:999px;border:10px solid var(--card);overflow:visible}
.p1-about-media img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:999px}
.p1-about-paw{position:absolute;right:-8px;bottom:14%;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--on-accent);transform:rotate(16deg);box-shadow:0 0 0 6px var(--soft)}
.p1-about-paw svg{width:38px}
.p1-about h2{margin-bottom:clamp(24px,3vw,36px)}
.p1-about-body{font-size:18px;color:var(--muted)}
.p1-steps{display:grid;gap:14px}
.p1-steps li{display:flex;align-items:center;gap:18px;padding:14px 26px 14px 14px;border-radius:999px;background:var(--card);box-shadow:0 14px 30px -26px var(--fg)}
.p1-steps li:nth-child(even){margin-left:clamp(0px,5vw,56px)}
.p1-steps p{margin:0;font-weight:700;font-size:clamp(16px,1.35vw,19px);line-height:1.45}
.p1-step-n{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:46% 54% 50% 50%/55% 48% 52% 45%;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:600;font-size:22px;line-height:1}
.p1-steps li:nth-child(even) .p1-step-n{border-radius:54% 46% 45% 55%/48% 55% 45% 52%}

/* services: pastel cards */
.p1-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.p1-cards--1{grid-template-columns:minmax(0,560px);justify-content:center}
.p1-cards--2,.p1-cards--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;margin:0 auto}
.p1-card{display:flex;flex-direction:column;gap:10px;padding:clamp(26px,2.6vw,36px);border-radius:var(--r) var(--r) var(--r) 10px;background:var(--soft);min-width:0;transition:transform .25s}
.p1-card:hover{transform:translateY(-4px) rotate(-.6deg)}
.p1-card--1{background:color-mix(in srgb,var(--accent) 26%,var(--bg));border-radius:var(--r) var(--r) 10px var(--r)}
.p1-card--2{background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.p1-cards--5 .p1-card:nth-child(4),.p1-cards--5 .p1-card:nth-child(5){grid-column:span 1}
.p1-cards--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.p1-cards--5 .p1-card{grid-column:span 2}
.p1-cards--5 .p1-card:nth-child(4){grid-column:2/span 2}
.p1-cards--5 .p1-card:nth-child(5){grid-column:4/span 2}
.p1-card-i{display:grid;place-items:center;width:64px;height:64px;border-radius:44% 56% 50% 50%/56% 48% 52% 44%;background:var(--bg);color:var(--fg);margin-bottom:10px}
.p1-card--0 .p1-card-i{background:var(--card)}
.p1-card--2 .p1-card-i{background:var(--soft)}
.p1-card-i svg{width:30px;height:30px}
.p1-card-img{margin:0 0 10px;border-radius:var(--rs);overflow:hidden}
.p1-card-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p1-card h3{font-size:clamp(22px,2vw,27px);line-height:1.25}
.p1-card-desc{color:var(--muted);font-size:16px}
.p1-card--1 .p1-card-desc{color:var(--fg)}
.p1-card-desc p{margin:0}
.p1-card-desc p+p{margin-top:.6em}
.p1-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-top:auto;padding-top:14px}
.p1-price{margin:0;font-family:var(--display);font-weight:600;font-size:20px}
.p1-ask{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--fg);color:var(--bg);font-family:var(--display);font-weight:500;font-size:15px;text-decoration:none;transition:transform .2s}
.p1-ask:hover{transform:scale(1.05)}

/* gallery: sticker wall */
.p1-wall{display:grid;align-items:start;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(14px,2vw,28px);max-width:1240px;margin:0 auto;padding-bottom:24px}
.p1-wall--few{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.p1-snap{margin:0;padding:10px 10px 0;border-radius:28px;background:var(--card);box-shadow:0 22px 40px -30px var(--fg),0 0 0 1.5px var(--line);transition:transform .3s;min-width:0}
.p1-snap--0{transform:rotate(-2.4deg)}
.p1-snap--1{transform:rotate(1.8deg);margin-top:40px}
.p1-snap--2{transform:rotate(-1.2deg)}
.p1-snap--3{transform:rotate(2.2deg);margin-top:40px}
.p1-snap:hover{transform:rotate(0) translateY(-6px)}
.p1-snap-img{border-radius:20px;overflow:hidden}
.p1-snap-img img{width:100%;aspect-ratio:1;object-fit:cover}
.p1-snap--1 .p1-snap-img img,.p1-snap--2 .p1-snap-img img{aspect-ratio:4/5}
.p1-snap figcaption{padding:12px 6px 14px;text-align:center;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.35}
.p1-snap:not(:has(figcaption)){padding-bottom:10px}

/* testimonials */
.p1-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;max-width:1200px;margin:0 auto}
.p1-quote-list figure{background:var(--soft);border-radius:var(--r) var(--r) var(--r) 10px;padding:30px}
.p1-quote-list blockquote{font-size:18px;font-weight:700;line-height:1.6}
.p1-quote-list blockquote p:last-child{margin:0}
.p1-quote-list figcaption{margin-top:16px;font-family:var(--display);font-weight:500}
.p1-quote-list figcaption span{color:var(--muted)}

/* faq */
.p1-main>.p1-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.p1-faq-head{position:relative}
.p1-faq-art{display:block;width:clamp(96px,12vw,170px);margin-top:28px;color:var(--soft);transform:rotate(-16deg)}
.p1-faq-list{display:grid;gap:12px}
.p1-faq-list details{background:var(--card);border-radius:var(--rs);padding:0 clamp(20px,2.4vw,30px);box-shadow:inset 0 0 0 1.5px var(--line)}
.p1-faq-list details[open]{background:var(--soft);box-shadow:none}
.p1-faq-list summary{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.5vw,20px);line-height:1.4;padding:20px 0;min-height:44px}
.p1-faq-list summary::after{display:inline-grid;place-items:center;width:34px;height:34px;margin-top:-4px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:22px;line-height:1}
.p1-faq-list details p{margin:0 0 22px;color:var(--muted)}

/* contact: scallop-topped peach panel */
.p1-main>.p1-contact{position:relative;background:var(--accent);color:var(--on-accent);margin-top:40px;padding-bottom:clamp(56px,7vw,96px)}
.p1-contact::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:radial-gradient(circle at 50% 100%,var(--accent) 21px,transparent 22px) 0 0/44px 22px repeat-x}
.p1-contact :focus-visible{outline-color:var(--on-accent)}
.p1-contact-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px clamp(32px,6vw,96px);align-items:center}
.p1-contact-in--solo{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center}
.p1-contact-paw{display:block;width:56px;margin-bottom:18px;transform:rotate(-14deg)}
.p1-contact-in--solo .p1-contact-paw{margin-inline:auto}
.p1-contact h2{font-size:clamp(36px,5.2vw,72px);line-height:1.08;margin-bottom:18px}
.p1-contact-intro{font-size:18px;max-width:30em;margin-bottom:28px}
.p1-contact-in--solo .p1-contact-intro{margin-inline:auto}
.p1-contact-card{background:var(--bg);color:var(--fg);border-radius:var(--r);padding:clamp(14px,2vw,22px) clamp(22px,3vw,36px)}
.p1-contact-list li{padding:14px 0}
.p1-contact-list li+li{border-top:2px dashed var(--line)}
.p1-contact-list .bc-k{opacity:1;color:var(--muted);font-weight:700}
.p1-contact-list a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:500;font-size:19px}
.p1-contact-list span a{font-family:inherit;font-size:15px;font-weight:700}
.p1-social{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 8px}
.p1-social a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--soft);text-decoration:none;font-weight:700;font-size:14px}
.p1-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;padding:20px var(--pad-x) 28px;background:var(--accent);color:var(--on-accent);border-top:1.5px solid color-mix(in srgb,var(--on-accent) 18%,transparent);font-weight:700;font-size:14px}
.p1-foot-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:18px}
.p1-foot-brand svg{width:22px;height:22px}

@media (max-width:1000px){
  .p1-cards,.p1-cards--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p1-cards--5 .p1-card,.p1-cards--5 .p1-card:nth-child(4){grid-column:auto}
  .p1-cards--5 .p1-card:nth-child(5){grid-column:1/-1}
  .p1-wall{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .p1-snap--1,.p1-snap--3{margin-top:28px}
  .p1-snap--2{margin-top:-28px}
}
@media (max-width:900px){
  .p1-main>.p1-hero,.p1-about-in,.p1-main>.p1-faq,.p1-contact-in{grid-template-columns:minmax(0,1fr)}
  .p1-hero-art{order:-1;max-width:440px}
  .p1-about-media{max-width:360px;justify-self:center;width:100%}
  .p1-faq-art{display:none}
}
@media (max-width:640px){
  .tpl-pet-01{--r:26px}
  .p1-head{gap:8px 12px;padding-block:10px}
  .p1-brand{font-size:20px}
  .p1-head-cta{display:none}
  .p1-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .p1-nav a{padding:0 12px;font-size:14px;white-space:nowrap;flex:none}
  .p1-hero-art{max-width:330px;padding:8px}
  .p1-sticker--paw{left:-4%}
  .p1-actions>*{flex:1 1 100%}
  .p1-cards,.p1-cards--2,.p1-cards--4,.p1-cards--5{grid-template-columns:minmax(0,1fr)}
  .p1-cards--5 .p1-card:nth-child(5){grid-column:auto}
  .p1-steps li{border-radius:28px;padding:12px 18px 12px 12px;gap:14px}
  .p1-steps li:nth-child(even){margin-left:0}
  .p1-step-n{width:46px;height:46px;font-size:19px}
  .p1-wall{gap:16px 12px}
  .p1-snap{padding:7px 7px 0;border-radius:20px}
  .p1-snap-img{border-radius:14px}
  .p1-snap figcaption{font-size:14px;padding:9px 4px 11px}
}