/* PRO-03 精品事务所 — the friendly boutique firm */
.tpl-pro-03{
  --gut:clamp(18px,4.4vw,72px);
  --max:1280px;
  --leaf:clamp(72px,9vw,150px) clamp(14px,1.6vw,22px);
  --serif:"DM Serif Display","Noto Serif SC",Georgia,serif;
  --sans:"Manrope","Noto Sans SC",system-ui,sans-serif;
  font-family:var(--sans);font-size:16px;line-height:1.75;
}
.tpl-pro-03 main>section{padding:clamp(60px,8vw,120px) var(--gut)}
.tpl-pro-03 main>section>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.pr3-h1,.pr3-h2,.tpl-pro-03 h3{font-family:var(--serif);font-weight:500}
.pr3-leaf{display:inline-flex;width:22px;height:22px;color:var(--accent);flex:none}
.pr3-leaf svg,.pr3-hello-leaf svg,.pr3-contact-leaf svg{width:100%;height:100%}

/* ---- header ---- */
.pr3-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 28px;padding:16px var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.pr3-brand{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;line-height:1.2}
.pr3-nav{display:flex;flex-wrap:wrap;gap:0 6px;font-size:15px;font-weight:600}
.pr3-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;text-decoration:none;transition:background-color .2s}
.pr3-nav a:hover{background:var(--soft)}
.pr3-nav a[href="#contact"]{background:var(--accent);color:var(--on-accent);padding:0 20px;margin-left:6px}

/* ---- hero ---- */
.tpl-pro-03 main>.pr3-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;padding-top:clamp(32px,5vw,80px);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.tpl-pro-03 main>.pr3-hero>*{margin:0;max-width:none}
.pr3-hero--text{grid-template-columns:1fr!important;text-align:left}
.pr3-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--soft);font-size:14px;font-weight:600;color:var(--fg)}
.pr3-h1{font-size:clamp(38px,4.7vw,70px);line-height:1.12;letter-spacing:-.01em;color:var(--fg)}
:lang(zh-Hans) .pr3-h1{font-weight:600;letter-spacing:.01em;line-height:1.25}
.pr3-sub{margin-top:24px;font-size:clamp(16px,1.3vw,19px);color:var(--muted);max-width:30em}
.pr3-sub p:last-child{margin:0}
.pr3-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pr3-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 10px 24px -12px var(--accent);transition:transform .2s}
.pr3-btn:hover{transform:translateY(-2px)}
.pr3-btn2{display:inline-flex;align-items:center;min-height:54px;padding:0 24px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:700;font-size:15px;transition:border-color .2s}
.pr3-btn2:hover{border-color:var(--accent)}
.pr3-hero-art{position:relative;padding-bottom:40px}
.pr3-hero-fig{margin:0;border-radius:var(--leaf);overflow:hidden;background:var(--soft)}
.pr3-hero-fig img{width:100%;aspect-ratio:5/4;object-fit:cover}
.pr3-hello{position:absolute;left:clamp(-40px,-3vw,-12px);bottom:0;max-width:300px;padding:20px 24px;border-radius:22px 22px 22px 6px;background:var(--bg);box-shadow:0 22px 50px -24px rgba(20,30,25,.35);border:1px solid var(--line)}
.pr3-hello-leaf{position:absolute;top:-18px;right:20px;width:36px;height:36px;color:var(--accent)}
.pr3-hello ul{display:grid;gap:6px}
.pr3-hello li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;line-height:1.4}
.pr3-hello svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:var(--accent);color:var(--on-accent)}

/* ---- shared heads ---- */
.pr3-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pr3-kicker::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.pr3-kicker--inv{color:inherit;opacity:.9}
.pr3-h2{font-size:clamp(30px,3.8vw,54px);line-height:1.18;letter-spacing:-.005em;max-width:20em}
:lang(zh-Hans) .pr3-h2{font-weight:600;letter-spacing:.01em;line-height:1.32}
.pr3-sec-head{margin-bottom:clamp(36px,4.5vw,60px)}
.pr3-sec-head--c{text-align:center;display:flex;flex-direction:column;align-items:center}
.pr3-sec-head--c .pr3-h2{margin:0 auto}
.pr3-intro{margin-top:16px;color:var(--muted);font-size:17px;max-width:34em}
.pr3-intro p:last-child{margin:0}

/* ---- about: ink-green panel ---- */
.pr3-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center;background:var(--accent);color:var(--on-accent);border-radius:clamp(24px,3vw,40px);padding:clamp(28px,5vw,80px)}
.pr3-about--text .pr3-panel{grid-template-columns:1fr}
.pr3-about-fig{margin:0;border-radius:var(--leaf);overflow:hidden;border:6px solid color-mix(in srgb,var(--on-accent) 16%,transparent)}
.pr3-about-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pr3-about-copy .pr3-h2{margin-bottom:clamp(20px,2.6vw,32px)}
.pr3-about-body{font-size:clamp(16px,1.25vw,18px);opacity:.92;max-width:36em}
.pr3-about-body p:last-child{margin:0}
.pr3-steps{display:grid;gap:10px}
.pr3-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px 14px 14px;border-radius:18px;background:color-mix(in srgb,var(--on-accent) 9%,transparent)}
.pr3-steps span{width:40px;height:40px;border-radius:50%;background:var(--on-accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px}
.pr3-steps p{margin:0;font-weight:600}

/* ---- services ---- */
.pr3-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pr3-card{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.4vw,34px);border-radius:26px;background:var(--soft);transition:transform .25s,box-shadow .25s}
.pr3-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(20,30,25,.45)}
.pr3-card-n{width:46px;height:46px;border-radius:14px 14px 14px 4px;background:var(--bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;margin-bottom:12px}
.pr3-card h3{font-size:clamp(21px,1.7vw,25px);line-height:1.3}
:lang(zh-Hans) .pr3-card h3{font-weight:600}
.pr3-card-d{color:var(--muted);flex:1}
.pr3-card-d p{margin:0}
.pr3-price{margin:0;font-weight:700}
.pr3-ask{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;font-weight:700;font-size:15px;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}

/* ---- gallery: staggered strip ---- */
.tpl-pro-03 main>.pr3-work{background:var(--soft);border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.pr3-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);align-items:start}
.pr3-shot{margin:0}
.pr3-shot-ph{overflow:hidden;border-radius:22px;background:var(--bg)}
.pr3-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s}
.pr3-shot:hover img{transform:scale(1.04)}
.pr3-shot1,.pr3-shot3{margin-top:clamp(28px,4vw,64px)}
.pr3-shot0 .pr3-shot-ph{border-radius:var(--leaf)}
.pr3-shot3 .pr3-shot-ph{border-radius:clamp(14px,1.6vw,22px) clamp(72px,9vw,150px)}
.pr3-shot figcaption{margin-top:12px;font-weight:600;font-size:15px;padding-left:14px;border-left:3px solid var(--accent);line-height:1.5}

/* ---- testimonials ---- */
.pr3-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.pr3-quote-list figure{background:var(--soft);border-radius:26px 26px 26px 6px;padding:clamp(24px,2.6vw,34px)}
.pr3-quote-list blockquote{font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);line-height:1.55}
.pr3-quote-list figcaption{margin-top:14px;font-weight:700;color:var(--muted)}

/* ---- faq ---- */
.tpl-pro-03 main>.pr3-faq{background:var(--soft)}
.pr3-faq-list{max-width:820px!important;display:grid;gap:12px}
.pr3-faq-list details{background:var(--bg);border-radius:20px;padding:0 clamp(18px,2.4vw,30px);transition:box-shadow .2s}
.pr3-faq-list details[open]{box-shadow:0 18px 36px -28px rgba(20,30,25,.5)}
.pr3-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:16px 0;font-weight:700;font-size:clamp(16px,1.3vw,18px);line-height:1.45}
.pr3-faq-list summary::after{float:none;flex:none;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px}
.pr3-faq-list details p{margin:0 0 22px;color:var(--muted)}

/* ---- contact ---- */
.tpl-pro-03 main>.pr3-faq+.pr3-contact,.tpl-pro-03 main>.pr3-work+.pr3-contact{background:var(--soft);padding-top:0}
.pr3-card-big{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(32px,5vw,80px);align-items:end;background:var(--bg);border:1px solid var(--line);border-radius:clamp(26px,3vw,40px);padding:clamp(28px,5vw,72px);position:relative}
.pr3-contact-leaf{display:block;width:48px;height:48px;color:var(--accent);margin-bottom:18px}
.pr3-contact-intro{margin:18px 0 28px;color:var(--muted);font-size:17px;max-width:30em}
.pr3-contact-intro p:last-child{margin:0}
.pr3-contact-list li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.pr3-contact-list .bc-k{padding-top:3px;color:var(--muted);opacity:1}
.pr3-contact-list a{min-height:44px;display:inline-flex;align-items:center;margin:-10px 0;font-weight:700}
.pr3-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pr3-social a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--soft);text-decoration:none;font-weight:700;font-size:14px}
.pr3-contact-side:empty{display:none}

/* ---- footer ---- */
.pr3-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:28px var(--gut);background:var(--soft);font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.pr3-foot-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;color:var(--fg)}

/* ---- responsive ---- */
@media (max-width:1080px){
  .pr3-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr3-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr3-shot2{margin-top:0}
}
@media (max-width:900px){
  .tpl-pro-03 main>.pr3-hero,.pr3-panel,.pr3-card-big{grid-template-columns:1fr}
  .pr3-hello{left:12px}
  .pr3-about-fig{max-width:420px}
}
@media (max-width:560px){
  .pr3-head{padding-top:10px;padding-bottom:6px}
  .pr3-nav{gap:0;margin-left:-12px;font-size:14px}
  .pr3-nav a{padding:0 10px}
  .pr3-nav a[href="#contact"]{padding:0 16px}
  .pr3-h1{font-size:clamp(34px,10.4vw,46px)}
  .pr3-btn,.pr3-btn2{flex:1 1 auto}
  .pr3-hero-fig img{aspect-ratio:4/3}
  .pr3-hello{position:relative;left:auto;margin:-36px 14px 0;max-width:none}
  .pr3-hero-art{padding-bottom:0}
  .pr3-cards{grid-template-columns:1fr}
  .pr3-h2{font-size:clamp(25px,7.4vw,30px)}
  .pr3-card{padding:20px 22px;gap:6px;border-radius:22px}
  .pr3-card-n{width:38px;height:38px;font-size:16px;margin-bottom:6px}
  .pr3-panel{padding:24px 20px 28px}
  .pr3-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .pr3-strip::-webkit-scrollbar{display:none}
  .pr3-shot{flex:0 0 78%;scroll-snap-align:center;margin-top:0!important}
  .pr3-contact-list li{grid-template-columns:1fr}
}