:root {
  --ink: #191713;
  --muted: #68645c;
  --paper: #fbfaf6;
  --line: #ded8cd;
  --teal: #284c48;
  --red: #8f241c;
  --gold: #b98a44;
  --white: #ffffff;
  --shadow: 0 22px 70px rgba(25, 23, 19, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 72px);
  color: var(--ink);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.site-header.is-scrolled {
  background: rgba(251, 250, 246, 0.88);
  box-shadow: 0 1px 0 rgba(25, 23, 19, 0.08);
  backdrop-filter: blur(18px);
}
.brand, .nav-links, .hero-actions, .footer { display: flex; align-items: center; }
.brand { gap: 10px; font-weight: 760; }
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
}
.nav-links { gap: clamp(14px, 3vw, 34px); color: #37332d; font-size: 14px; }
.nav-links a, .footer a { position: relative; }
.nav-links a::after, .footer a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.nav-links a:hover::after, .footer a:hover::after { transform: scaleX(1); }

.nav-cta, .button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 23, 19, 0.18);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 720;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.nav-cta { padding: 8px 16px; background: rgba(251, 250, 246, 0.7); font-size: 14px; }
.button { padding: 11px 18px; }
.button:hover, .nav-cta:hover { box-shadow: 0 12px 28px rgba(25, 23, 19, 0.12); transform: translateY(-1px); }
.button.primary { border-color: var(--ink); background: var(--ink); color: var(--white); }
.button.secondary { background: rgba(251, 250, 246, 0.76); }

.hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 120px clamp(20px, 6vw, 84px) 76px;
  background:
    linear-gradient(90deg, rgba(251, 250, 246, 0.96) 0%, rgba(251, 250, 246, 0.76) 42%, rgba(251, 250, 246, 0.18) 100%),
    radial-gradient(circle at 85% 28%, rgba(185, 138, 68, 0.24), transparent 28%),
    linear-gradient(135deg, #fbfaf6 0%, #ece5d8 42%, #284c48 100%);
}
.hero-art {
  position: absolute;
  inset: auto clamp(16px, 5vw, 72px) 42px auto;
  width: min(560px, 48vw);
  aspect-ratio: 1.2;
  border-radius: 8px;
  opacity: 0.95;
}
.hero-art span { position: absolute; display: block; border: 1px solid rgba(255, 255, 255, 0.36); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.hero-art span:nth-child(1) { width: 54%; height: 78%; right: 22%; bottom: 8%; background: rgba(255, 255, 255, 0.34); }
.hero-art span:nth-child(2) { width: 36%; height: 58%; right: 8%; bottom: 22%; background: rgba(40, 76, 72, 0.58); }
.hero-art span:nth-child(3) { width: 32%; height: 42%; right: 22%; bottom: 12%; background: rgba(143, 36, 28, 0.7); }
.hero-art span:nth-child(4) { width: 10%; height: 72%; right: 0; bottom: 0; background: rgba(185, 138, 68, 0.82); }
.hero-content { position: relative; width: min(690px, 100%); }
.eyebrow { margin: 0 0 14px; color: var(--red); font-size: 12px; font-weight: 780; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(46px, 7vw, 88px); line-height: 1.02; letter-spacing: 0; }
h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 54px); line-height: 1.12; letter-spacing: 0; }
h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.25; }
.hero-copy { width: min(560px, 100%); color: #48443d; font-size: clamp(18px, 2vw, 22px); }
.hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.intro, .section, .feature-band, .contact, .footer { padding-inline: clamp(20px, 6vw, 84px); }
.intro {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr);
  gap: clamp(24px, 6vw, 80px);
  padding-block: clamp(56px, 8vw, 104px);
  border-bottom: 1px solid var(--line);
}
.intro p, .feature-copy p, .contact p { color: var(--muted); font-size: 18px; }
.stat { display: block; margin-bottom: 16px; color: var(--gold); font-weight: 820; }
.section { padding-block: clamp(64px, 9vw, 118px); }
.section-heading { width: min(760px, 100%); margin-bottom: 34px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 1px 0 rgba(25, 23, 19, 0.04);
}
.card-number { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 42px; border-radius: 8px; background: #e8dfd1; color: var(--teal); font-weight: 820; }
.card p, .timeline p { color: var(--muted); }
.feature-band {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(64px, 9vw, 112px);
  background: #203f3b;
  color: var(--white);
}
.feature-band .eyebrow { color: #e2bd78; }
.feature-copy p { color: rgba(255, 255, 255, 0.72); }
.focus-list { display: grid; gap: 12px; }
.focus-list div { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.focus-list span { color: #e2bd78; font-weight: 760; }
.focus-list strong { font-size: 16px; font-weight: 620; text-align: right; }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.timeline li { min-height: 220px; padding: 24px; border-top: 3px solid var(--gold); background: #ffffff; box-shadow: var(--shadow); }
.timeline span { display: inline-grid; width: 36px; height: 36px; place-items: center; margin-bottom: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--red); font-weight: 820; }
.contact { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 0.75fr); gap: clamp(30px, 7vw, 92px); align-items: start; padding-block: clamp(64px, 9vw, 118px); background: #f1eadf; }
.contact-form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #504c45; font-size: 14px; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid #d3c8b8; border-radius: 8px; background: rgba(255, 255, 255, 0.7); color: var(--ink); font: inherit; outline: none; padding: 13px 14px; }
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(40, 76, 72, 0.14); }
.footer { justify-content: space-between; gap: 20px; padding-block: 28px; color: var(--muted); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .intro, .feature-band, .contact { grid-template-columns: 1fr; }
  .service-grid, .timeline { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 88vh; }
  .hero-art { width: min(440px, 72vw); opacity: 0.38; }
}
@media (max-width: 620px) {
  .site-header { padding-block: 14px; }
  .nav-cta { display: none; }
  .hero { min-height: 86vh; padding-top: 98px; }
  h1 { font-size: clamp(40px, 13vw, 54px); }
  .service-grid, .timeline { grid-template-columns: 1fr; }
  .focus-list div { align-items: flex-start; flex-direction: column; }
  .focus-list strong { text-align: left; }
  .footer { align-items: flex-start; flex-direction: column; }
}