﻿/* ===== Sub-page system · 现代东方编辑风格 ===== */
.page-main{padding-top:82px;min-height:100vh;background:var(--almond)}

/* ---- Page hero ---- */
.page-hero{padding:120px 8vw 70px;border-bottom:1px solid var(--line);position:relative}
.page-hero .micro-label{font:10px var(--mono);letter-spacing:.08em;color:var(--orange);margin:0 0 28px}
.page-hero h1{font:400 clamp(42px,6vw,82px)/1.1 var(--serif);letter-spacing:-.045em;color:var(--dai);margin:0}
.page-hero .page-lead{max-width:580px;color:var(--dai-soft);font-size:17px;line-height:2;margin-top:32px}

/* ---- Page content (article) ---- */
.page-content{max-width:880px;margin:0 auto;padding:90px 8vw 70px}
.page-content section{margin-bottom:72px}
.page-content h2{font:400 clamp(30px,3.8vw,46px)/1.2 var(--serif);letter-spacing:-.03em;color:var(--dai);margin:0 0 26px}
.page-content h3{font:500 22px var(--serif);margin:36px 0 14px;color:var(--dai)}
.page-content p{font-size:16px;line-height:1.95;color:var(--dai-soft);margin:0 0 18px}
.page-content ul,.page-content ol{font-size:16px;line-height:1.95;color:var(--dai-soft);padding-left:24px;margin:18px 0}
.page-content li{margin-bottom:12px}
.page-content li strong{color:var(--dai);font-weight:500}
.page-content a{color:var(--orange);border-bottom:1px solid rgba(238,123,25,.3);transition:border-color .2s}
.page-content a:hover{border-color:var(--orange)}

/* ---- Info list (contact) ---- */
.page-content dl.info-list{display:grid;grid-template-columns:30% 1fr;gap:20px 5%;margin:30px 0;border-top:1px solid var(--line);padding-top:30px}
.page-content dt{font:10px var(--mono);color:var(--quiet);text-transform:uppercase;letter-spacing:.08em;padding-top:4px}
.page-content dd{font-family:var(--serif);font-size:17px;color:var(--dai);margin:0}
.page-content dd a{font-size:17px}

/* ---- Contact QR ---- */
.contact-qr{margin:0;display:inline-block}
.contact-qr img{width:160px;height:auto;border:1px solid var(--line)}
.contact-qr figcaption{font:10px var(--mono);color:var(--quiet);text-align:center;margin-top:10px;letter-spacing:.06em}

/* ---- Email template block ---- */
.mail-template{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--orange);padding:30px;margin:30px 0;font-family:var(--mono);font-size:13px;line-height:2;color:var(--dai-soft)}
.mail-template .mail-subject{color:var(--orange);margin:0 0 20px}
.mail-template p{margin:0;font-family:var(--mono);font-size:13px;line-height:2;color:var(--dai-soft)}

/* ---- Case gallery ---- */
.case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-gallery figure{margin:0;background:var(--almond);overflow:hidden}
.case-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.6) sepia(.06) contrast(.95);transition:filter .4s,transform .5s}
.case-gallery figure:hover img{filter:saturate(.9);transform:scale(1.03)}
.case-gallery figcaption{padding:14px 16px;color:var(--quiet);font:10px var(--mono);letter-spacing:.08em}

/* ---- FAQ items ---- */
.faq-item{border-bottom:1px solid var(--line);padding:0 0 28px;margin-bottom:28px}
.faq-item h2{font:500 20px var(--serif);color:var(--dai);margin:0 0 14px;letter-spacing:-.01em}
.faq-item p{font-size:16px;line-height:1.95;color:var(--dai-soft);margin:0}

/* ---- Page CTA ---- */
.page-cta{background:var(--dai);padding:90px 8vw;text-align:center}
.page-cta h2{font:400 clamp(34px,4.5vw,62px)/1.15 var(--serif);letter-spacing:-.04em;color:var(--paper);margin:0 0 34px}
.cta-button{display:inline-flex;align-items:center;gap:28px;border:1px solid var(--orange);padding:14px 24px;color:var(--orange);font-family:var(--mono);font-size:11px;letter-spacing:.06em;transition:background .2s,color .2s}
.cta-button:hover{background:var(--orange);color:var(--dai)}
.cta-button b{font-size:18px;font-weight:400}

/* ---- Service detail mini-nav ---- */
.service-nav{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:50px;border-bottom:1px solid var(--line);padding-bottom:20px}
.service-nav a{font:12px var(--mono);color:var(--quiet);letter-spacing:.04em;transition:color .2s}
.service-nav a:hover,.service-nav a[aria-current="page"]{color:var(--orange)}

@media(max-width:850px){
  .page-hero{padding:90px 7vw 55px}
  .page-content{padding:65px 7vw 55px}
  .page-content dl.info-list{grid-template-columns:1fr;gap:8px}
  .page-content dt{margin-top:18px}
  .case-gallery{grid-template-columns:repeat(2,1fr)}
  .page-cta{padding:70px 7vw}
  .mail-template{padding:22px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
/* ---- Case detail page ---- */
.case-detail-gallery{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 auto;max-width:1200px;padding:0 3vw}
.case-detail-gallery figure{margin:0;background:var(--almond);overflow:hidden}
.case-detail-gallery img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.6) sepia(.06) contrast(.95);transition:filter .3s}
.case-detail-gallery figure:hover img{filter:saturate(.9)}
.case-detail-gallery figcaption{padding:10px 14px;color:var(--quiet);font:10px var(--mono);letter-spacing:.06em}
.case-meta{display:grid;grid-template-columns:120px 1fr;gap:0;margin:0 0 40px;padding-top:24px;border-top:1px solid var(--line)}
.case-meta dt{font:16px var(--serif);color:var(--quiet);border-bottom:1px solid var(--line);padding:14px 0;line-height:48px}
.case-meta dd{font:16px var(--serif);color:var(--dai);margin:0;border-bottom:1px solid var(--line);padding:14px 0;line-height:48px}
.case-nav{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:30px;border-top:1px solid var(--line)}
.case-nav a{font:13px var(--sans);color:var(--dai-soft);transition:color .2s}
.case-nav a:hover{color:var(--orange)}
@media(max-width:850px){.case-meta{grid-template-columns:1fr;gap:8px}.case-meta dt{margin-top:16px}}