:root{
  --ink:#1e2a32;
  --paper:#f7f3ea;
  --accent:#e05a33;
  --teal:#2a6f6a;
  --mustard:#d9a441;
  --muted:#5c6670;
  --line:#c9c2b2;
  --s-xs:4px;--s-sm:8px;--s-md:12px;--s-lg:16px;--s-xl:24px;--s-2xl:32px;--s-3xl:48px;--s-4xl:64px;
  --fs-1:14px;--fs-2:17px;--fs-3:22px;--fs-4:32px;--fs-5:48px;--fs-6:64px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.75;font-size:var(--fs-2)}
.container{max-width:1280px;margin:0 auto;padding:0 var(--s-xl)}
.narrow{max-width:760px}
a{color:var(--teal)}
a:hover{color:var(--accent)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-weight:800;letter-spacing:.02em;line-height:1.25}
h1{font-size:var(--fs-5)}
h2{font-size:var(--fs-4)}
h3{font-size:var(--fs-3)}
p{max-width:66ch}
/* header */
.site-header{border-bottom:3px solid var(--ink);background:var(--paper)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-lg);padding-top:var(--s-lg);padding-bottom:var(--s-lg)}
nav a{text-decoration:none;margin-left:var(--s-md);font-weight:600}
nav a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
/* collage accents */
.tilt-l{transform:rotate(-2deg);display:inline-block}
.kicker{font-size:var(--fs-1);letter-spacing:.35em;color:var(--accent);font-weight:700}
.tag{background:var(--mustard);color:var(--ink);padding:var(--s-xs) var(--s-md);font-size:var(--fs-1);font-weight:700;display:inline-block}
.hero-split{padding:var(--s-4xl) 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-3xl);align-items:center}
.hero-art{background:var(--teal);padding:var(--s-lg);transform:rotate(1.5deg)}
.hero-art img{display:block;width:100%;height:auto}
.lede{margin:var(--s-lg) 0;font-size:var(--fs-2)}
.hero-actions{display:flex;gap:var(--s-md);flex-wrap:wrap}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:var(--s-md) var(--s-xl);text-decoration:none;font-weight:700;border:2px solid var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
/* sections */
section{padding:var(--s-4xl) 0}
.sec-title{margin-bottom:var(--s-xl);border-left:8px solid var(--accent);padding-left:var(--s-md)}
.sec-note{color:var(--muted);margin-bottom:var(--s-xl)}
.capa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2xl)}
.capa-grid section{padding:0;border-top:3px solid var(--ink);padding-top:var(--s-lg)}
/* items grid (contract) */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{border:2px solid var(--ink);padding:var(--s-lg);background:#fffdf7}
.item:nth-child(3n+1){background:#f2ece0}
.item:nth-child(3n){border-color:var(--teal)}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line);margin-bottom:var(--s-md)}
.item h2,.item h3{font-size:var(--fs-3);margin:var(--s-sm) 0}
.item ul{list-style:none;margin-top:var(--s-md);font-size:var(--fs-1);color:var(--muted)}
.item ul li{border-top:1px dashed var(--line);padding:var(--s-xs) 0}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
.more-link{margin-top:var(--s-xl);font-weight:700}
/* process */
.process{background:var(--ink);color:var(--paper)}
.process .sec-title{border-color:var(--mustard)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-xl)}
.steps li{counter-increment:s}
.steps h3::before{content:counter(s,decimal-leading-zero);display:block;font-size:var(--fs-5);color:var(--mustard);font-weight:800;line-height:1}
.steps p{color:#c9cdd2;margin-top:var(--s-sm);font-size:var(--fs-1)}
/* faq */
.faq-sec dt,.contact-faq dt,.faq-page dt{font-weight:800;font-size:var(--fs-3);margin-top:var(--s-xl)}
.faq-sec dd,.contact-faq dd,.faq-page dd{margin-top:var(--s-sm);color:#3a444d;border-left:4px solid var(--mustard);padding-left:var(--s-md)}
/* cta */
.cta-end .container{background:var(--accent);color:#fff;padding:var(--s-3xl);transform:rotate(-1deg)}
.cta-end a{color:#fff}
.cta-end .btn{background:var(--ink);border-color:var(--ink)}
.cta-end .btn:hover{background:#fff;color:var(--ink)}
/* breadcrumb */
.breadcrumb{font-size:12px;letter-spacing:.12em;color:var(--muted);padding:var(--s-lg) var(--s-xl) 0;max-width:1280px;margin:0 auto;display:flex;gap:var(--s-sm)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3xl);align-items:center;padding-bottom:var(--s-3xl)}
.about-grid figure{background:var(--mustard);padding:var(--s-lg);transform:rotate(-2deg)}
.about-grid img{display:block;width:100%;height:auto}
.about-text h2{margin:var(--s-2xl) 0 var(--s-md);border-bottom:3px solid var(--line);padding-bottom:var(--s-sm)}
/* services intro */
.svc-intro .container{background:#e7e0d0;padding:var(--s-3xl);border:3px solid var(--ink)}
.wide-art{margin-top:var(--s-xl)}
.wide-art img{display:block;width:100%;height:auto}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-3xl);align-items:center}
.contact-grid figure{background:var(--teal);padding:var(--s-lg);transform:rotate(2deg)}
.contact-grid img{display:block;width:100%;height:auto}
.contact-steps{background:#e7e0d0}
.contact-steps .steps{grid-template-columns:repeat(2,1fr)}
.contact-steps .steps h3::before{color:var(--accent)}
/* guide */
.guide table{width:100%;border-collapse:collapse;margin:var(--s-xl) 0;font-size:var(--fs-1)}
.guide th,.guide td{border:1px solid var(--line);padding:var(--s-md);text-align:left}
.guide th{background:var(--ink);color:var(--paper)}
.guide caption{text-align:left;font-weight:700;padding-bottom:var(--s-sm)}
.checklist{margin:var(--s-md) 0 var(--s-md) var(--s-lg)}
.checklist li{list-style:square;margin-bottom:var(--s-sm)}
.guide h2{margin-top:var(--s-3xl)}
/* footer */
.site-footer{border-top:3px solid var(--ink);padding:var(--s-2xl) 0;color:var(--muted);font-size:var(--fs-1)}
/* responsive */
@media(max-width:900px){
  .hero-grid,.about-grid,.contact-grid,.capa-grid,.steps,.contact-steps .steps{grid-template-columns:minmax(0,1fr)}
  h1{font-size:var(--fs-4)}
  h2{font-size:var(--fs-3)}
  .cta-end .container{padding:var(--s-xl);transform:none}
}