:root {
  --forest: #173f35;
  --gold: #a27c35;
  --paper: #f8f5ec;
  --ink: #203d35;
}
body {
  background: var(--paper);
  color: var(--ink);
}
h1, h2, h3 {
  color: var(--forest);
}
section {
  scroll-margin-top: 90px;
}
.hero {
  position: relative;
  min-height: 560px;
  padding: 80px 7%;
  background-color: var(--paper);
  background-image: url('/static/img/rio-watercolor.webp');
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero h1 {
  font-size: clamp(48px, 6vw, 92px);
  letter-spacing: .04em;
  line-height: 1.2;
}
.hero p {
  max-width: 520px;
  line-height: 1.9;
}
.services-section,
.about-section {
  padding-top: 85px;
  padding-bottom: 85px;
}
@media(max-width:768px) {
  .hero {
    min-height: 520px;
    padding: 55px 7%;
    background-position: 62% center;
  }
  .hero h1 {
    font-size: 48px;
  }
  .services-section,
  .about-section {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

/* BR SOLVER 水彩首页优化 */
.hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(248,245,236,.94) 0%,
      rgba(248,245,236,.72) 30%,
      rgba(248,245,236,.08) 65%
    ),
    url('/static/img/rio-watercolor.webp');
  background-size: cover;
  background-position: center;
}

.hero h1 {
  color: #173f35;
  font-weight: 700;
}

.hero .subtitle,
.hero .tagline {
  color: #a27c35;
}

.services-section {
  background: #faf8f2;
}

.about-section {
  background: #f0f1e8;
}

@media (max-width: 768px) {
  .hero {
    background-position: 58% center;
  }
}