:root { --green:#163d42; --ink:#283a3d; --mist:#f6f8f7; --line:#dfe8e5; --gold:#c8b990; --serif:"Songti SC","Noto Serif CJK SC",STSong,serif; --sans:"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; color:var(--ink); background:var(--mist); font-family:var(--sans); font-size:15px; line-height:1.7; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:-70px; left:18px; padding:8px 13px; background:#fff; color:var(--green); }
.skip-link:focus { top:12px; }
.site-header { flex:none; height:68px; padding:0 5.5vw; display:flex; justify-content:space-between; align-items:center; background:#fff; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--serif); font-size:21px; letter-spacing:.08em; color:var(--green); }
.header-note { font-size:13px; color:#657473; }
main { flex:1; display:flex; flex-direction:column; }
.hero { flex:1; position:relative; isolation:isolate; display:flex; align-items:center; min-height:340px; color:#fff; background:var(--green); }
.hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center 65%; z-index:-2; }
.hero-overlay { z-index:-1; background:linear-gradient(90deg,rgba(9,29,32,.82),rgba(13,39,42,.48) 48%,rgba(11,29,32,.10) 85%); }
.hero-content { padding:32px 8vw; }
h1,h2 { margin:0; font-family:var(--serif); font-weight:500; }
h1 { font-size:clamp(40px,5.2vw,72px); letter-spacing:.025em; line-height:1.2; }
.hero-content p { max-width:420px; margin:20px 0 24px; font-size:15px; color:#e5ecea; }
.image-note { position:absolute; bottom:15px; right:22px; font-size:11px; color:#dce4e1; }
.services { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4vw; padding:25px 8vw 27px; background:var(--mist); }
.services article+article { border-left:1px solid #cbd8d3; padding-left:4vw; }
h2 { font-size:25px; line-height:1.4; }
.services p { margin:8px 0 0; font-size:14px; color:#566764; max-width:300px; }
footer { flex:none; display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; align-items:center; padding:15px 5.5vw; font-size:12px; color:#60706e; background:#fff; }
.company,.legal { display:flex; gap:8px 22px; flex-wrap:wrap; }
.legal a { text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
@media (max-width: 700px) {
  .site-header { height:58px; padding:0 20px; }
  .brand { font-size:18px; gap:8px; }
  .brand img { width:40px; height:40px; }
  .header-note { font-size:12px; }
  .hero { min-height:292px; }
  .hero-image { object-position:59% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(9,29,32,.82),rgba(13,39,42,.55) 70%,rgba(11,29,32,.3)); }
  .hero-content { padding:26px 24px; }
  h1 { font-size:40px; }
  .hero-content p { font-size:14px; max-width:340px; margin:15px 0 18px; }
    .image-note { right:12px; bottom:9px; font-size:10px; }
  .services { display:flex; flex-direction:column; gap:0; padding:10px 20px; }
  .services article { display:grid; grid-template-columns:102px 1fr; gap:13px; align-items:center; padding:10px 0; }
  .services article+article { padding:10px 0; border-left:0; border-top:1px solid var(--line); }
  h2 { font-size:20px; }
  .services p { font-size:13px; margin:0; line-height:1.65; }
  footer { padding:11px 20px; gap:4px; }
  .company,.legal { gap:3px 12px; }
}
@media (max-width:360px) {
  .header-note { max-width:108px; text-align:right; line-height:1.4; }
  .hero-content { padding:22px 20px; }
  h1 { font-size:36px; }
  .services article { grid-template-columns:92px 1fr; gap:10px; padding:8px 0; }
  .services article+article { padding:8px 0; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }