/* AUT-04 信达 — white + navy, catalogue-clean. Figtree + DM Sans. */
.tpl-aut-04{
  --gut:clamp(20px,5vw,80px);--max:1240px;
  --pad-x:max(var(--gut),calc((100% - var(--max))/2));
  --r:clamp(14px,1.6vw,20px);
  --dock-bg:var(--fg);--dock-fg:var(--bg);
  font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.75;
}
.tpl-aut-04 main{overflow-x:clip}
.tpl-aut-04 main>section{padding:clamp(72px,9vw,128px) var(--pad-x)}
.tpl-aut-04 h1,.tpl-aut-04 h2,.tpl-aut-04 h3{font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:700;letter-spacing:-.025em}
.tpl-aut-04 h2{font-size:clamp(30px,3.5vw,46px);line-height:1.15}
:lang(zh-Hans) .tpl-aut-04 h1,:lang(zh-Hans) .tpl-aut-04 h2{letter-spacing:0}
:lang(zh-Hans) .tpl-aut-04 h2{line-height:1.3}

/* header */
.a4-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 32px;padding:16px var(--pad-x);border-bottom:1px solid var(--line)}
.a4-brand{display:flex;align-items:center;gap:12px;min-height:44px;font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:700;font-size:19px;text-decoration:none}
.a4-brand:not(:has(img))::before{content:"";width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,transparent 0 46%,var(--bg) 46% 54%,transparent 54%),var(--accent);flex:none}
.a4-nav{display:flex;flex-wrap:wrap;gap:0 28px;font-size:15px;font-weight:500}
.a4-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted)}
.a4-nav a:hover{color:var(--accent)}

/* hero */
.tpl-aut-04 main>.a4-hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(56px,7vw,96px);text-align:center}
.a4-hero-copy{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.a4-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.a4-eyebrow::before,.a4-eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.a4-hero h1{font-size:clamp(38px,5.6vw,80px);line-height:1.06}
:lang(zh-Hans) .a4-hero h1{line-height:1.22}
.a4-sub{margin-top:22px;max-width:34em;color:var(--muted);font-size:clamp(16.5px,1.3vw,18.5px)}
.a4-sub p:last-child{margin:0}
.a4-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:34px}
.a4-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s,transform .2s}
.a4-btn:hover{background:color-mix(in srgb,var(--accent) 85%,#000);transform:translateY(-1px)}
.a4-btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.a4-btn--ghost:hover{background:var(--soft)}
.a4-btn--light{background:var(--bg);color:var(--fg)}
.a4-btn--light:hover{background:var(--soft)}
.a4-hero-media{margin:clamp(44px,6vw,80px) 0 0;overflow:hidden;border-radius:var(--r)}
.a4-hero-media img{width:100%;aspect-ratio:16/8;object-fit:cover}
.a4-strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));width:min(100% - 48px,1000px);margin:-40px auto 0;border-radius:14px;background:var(--fg);color:var(--bg);box-shadow:0 24px 48px -28px color-mix(in srgb,var(--fg) 80%,transparent);text-align:left}
.a4-strip--flat{margin-top:40px}
.a4-strip li+li{border-left:1px solid color-mix(in srgb,var(--bg) 16%,transparent)}
.a4-strip a{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 22px;font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:600;font-size:15.5px;text-decoration:none}
.a4-strip a::before{content:"";flex:none;width:9px;height:5px;margin:0 4px 4px 2px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg);opacity:.85}
.a4-strip a:hover{background:color-mix(in srgb,var(--bg) 8%,transparent)}

/* labels */
.a4-label{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.a4-sec-head{max-width:640px;margin-bottom:clamp(36px,5vw,60px)}
.a4-intro{margin-top:14px;color:var(--muted);font-size:17px}
.a4-intro p:last-child{margin:0}

/* about: navy band */
.tpl-aut-04 main>.a4-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;background:var(--fg);color:var(--bg)}
.tpl-aut-04 main>.a4-about--text{grid-template-columns:minmax(0,760px)}
.a4-about .a4-label{color:inherit;opacity:.7}
.a4-about-media{margin:0;overflow:hidden;border-radius:var(--r)}
.a4-about-media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.a4-about h2{font-size:clamp(32px,4vw,54px)}
.a4-about-body{margin-top:22px;opacity:.85;font-size:17.5px}
.a4-checks{margin-top:32px}
.a4-checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 0;border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent)}
.a4-checks li:last-child{border-bottom:1px solid color-mix(in srgb,var(--bg) 16%,transparent)}
.a4-step{font-family:"Figtree",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;padding:4px 10px;border-radius:6px;background:color-mix(in srgb,var(--bg) 12%,transparent)}
.a4-checks p{margin:0;font-size:17px}

/* services */
.a4-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.a4-cards li{display:flex;flex-direction:column;padding:26px 26px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);transition:box-shadow .25s,border-color .25s}
.a4-cards li:hover{border-color:transparent;box-shadow:0 18px 40px -24px color-mix(in srgb,var(--fg) 50%,transparent)}
.a4-tick{position:relative;width:34px;height:34px;border-radius:50%;margin-bottom:22px;background:var(--soft)}
.a4-tick::after{content:"";position:absolute;left:11px;top:11px;width:12px;height:6px;border:solid var(--accent);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.a4-cards h3{font-size:21px;line-height:1.35;margin-bottom:8px}
.a4-desc{color:var(--muted);font-size:15.5px}
.a4-desc p:last-child{margin:0}
.a4-price{margin:12px 0 0;font-weight:700}
.a4-ask{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:12px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none}
.a4-ask:hover{text-decoration:underline}

/* gallery: listing cards */
.tpl-aut-04 main>.a4-work{background:var(--soft)}
.a4-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.a4-list figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--bg)}
.a4-ph{overflow:hidden}
.a4-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s ease}
.a4-list figure:hover .a4-ph img{transform:scale(1.04)}
.a4-list figcaption{display:flex;align-items:center;gap:12px;padding:16px 18px 18px;font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:600;font-size:15.5px}
.a4-list figcaption span{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}

/* testimonials */
.a4-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.a4-quote-list figure{padding:28px;border-radius:var(--r);border:1px solid var(--line)}
.a4-quote-list blockquote{font-size:17.5px}
.a4-quote-list figcaption{margin-top:12px;font-weight:600;font-size:14px;color:var(--muted)}

/* faq */
.tpl-aut-04 main>.a4-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.a4-faq-list details{border-bottom:1px solid var(--line)}
.a4-faq-list details:first-child{border-top:1px solid var(--line)}
.a4-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:600;font-size:18px}
.a4-faq-list summary::after{float:none;flex:none;color:var(--accent);font-size:22px}
.a4-faq-list details p{margin:0 0 22px;color:var(--muted);max-width:40em}

/* contact */
.tpl-aut-04 main>.a4-contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;padding-top:0}
.a4-contact-main{padding:clamp(40px,6vw,80px);border-radius:var(--r) 0 0 var(--r);background:var(--accent);color:var(--on-accent)}
.a4-contact-main .a4-actions{justify-content:flex-start}
.a4-contact h2{font-size:clamp(32px,4.2vw,56px)}
.a4-contact-intro{margin-top:16px;max-width:30em;opacity:.88;font-size:17px}
.a4-contact-intro p:last-child{margin:0}
.a4-contact-side{padding:clamp(32px,5vw,64px);border-radius:0 var(--r) var(--r) 0;background:var(--soft);display:flex;flex-direction:column;justify-content:center}
.a4-contact-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.a4-contact-list li:first-child{padding-top:0}
.a4-contact-list .bc-k{color:var(--muted);opacity:1;font-weight:600;margin-bottom:2px}
.a4-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;font-weight:600;text-decoration:none}
.a4-contact-list a:hover{color:var(--accent)}
.a4-social{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:16px;font-weight:600}
.a4-social a{min-height:44px;display:inline-flex;align-items:center;color:var(--accent);text-decoration:none}
.a4-contact-side:not(:has(li)){display:none}
.tpl-aut-04 main>.a4-contact:not(:has(.a4-contact-side li)){grid-template-columns:minmax(0,1fr)}
.a4-contact:not(:has(.a4-contact-side li)) .a4-contact-main{border-radius:var(--r)}

/* footer */
.a4-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:0 var(--pad-x) 40px;font-size:14px;color:var(--muted)}
.a4-foot-brand{font-family:"Figtree","Noto Sans SC",sans-serif;font-weight:700;color:var(--fg)}

@media (max-width:1000px){.a4-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .tpl-aut-04 main>.a4-about,.tpl-aut-04 main>.a4-faq,.tpl-aut-04 main>.a4-contact{grid-template-columns:minmax(0,1fr)}
  .a4-contact-main{border-radius:var(--r) var(--r) 0 0}
  .a4-contact-side{border-radius:0 0 var(--r) var(--r)}
  .a4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a4-strip li:nth-child(3){border-left:0}
  .a4-strip li:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent)}
}
@media (max-width:560px){
  .a4-head{justify-content:center;padding-top:8px;padding-bottom:4px}
  .a4-nav{justify-content:center;gap:0 18px;font-size:14.5px}
  .a4-hero-media{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);border-radius:0}
  .a4-hero-media img{aspect-ratio:4/3}
  .a4-strip{width:100%;margin-top:-28px}
  .a4-strip a{min-height:60px;padding:12px 14px;font-size:14.5px;gap:8px}
  .a4-list{grid-template-columns:minmax(0,1fr)}
}