/* ============================================================
   SANTA OLIVER SERVICE AREAS
   ============================================================ */
.area-hero {
  position: relative;
  overflow: hidden;
  padding: 154px 0 84px;
  background:
    radial-gradient(70% 80% at 50% 12%, rgba(200,162,74,0.16), transparent 62%),
    linear-gradient(180deg, var(--forest-950), var(--forest-850));
  text-align: center;
}
.area-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 52px;
  background: var(--snow);
  clip-path: polygon(0 62%, 9% 45%, 19% 70%, 31% 42%, 43% 66%, 55% 38%, 67% 65%, 80% 41%, 91% 68%, 100% 48%, 100% 100%, 0 100%);
}
.area-hero-inner { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; padding: 0 28px; }
.area-breadcrumb { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.area-breadcrumb a { color: var(--gold-200); text-decoration: none; }
.area-breadcrumb a:hover, .area-breadcrumb a:focus-visible { text-decoration: underline; }
.area-hero .so-eyebrow { display: block; margin-bottom: 18px; color: var(--gold-200); }
.area-hero h1 {
  margin: 0 auto 22px;
  max-width: 14ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.01;
  color: var(--cream);
}
.area-hero p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
}
.area-main { background: var(--snow); padding: 76px 0 100px; }
.area-intro { max-width: 820px; margin: 0 auto 50px; text-align: center; }
.area-intro h2,
.area-services h2,
.area-faq h2 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--green);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.area-intro p { margin: 0; color: var(--ink-muted); font-size: 17px; line-height: 1.75; }
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 auto 70px;
}
.area-card {
  border: 1px solid rgba(27,75,48,0.12);
  border-radius: var(--r-lg);
  padding: 30px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15,26,20,0.07);
}
.area-card h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  color: var(--green);
}
.area-card p { margin: 0; color: var(--ink-muted); line-height: 1.7; font-size: 15.5px; }
.area-card strong { color: var(--ink); }
.area-services {
  margin: 0 auto 70px;
  padding: 44px;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--forest-900), var(--forest-800));
  color: var(--cream);
}
.area-services h2 { color: var(--cream); text-align: center; }
.area-services > p { max-width: 760px; margin: 0 auto 28px; text-align: center; color: var(--ink-soft); line-height: 1.7; }
.service-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.service-chips a,
.service-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--cream);
  font-size: 14px;
}
.service-chips a { text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.service-chips a:hover { border-color: rgba(227,200,120,.7); background: rgba(255,255,255,.11); }
.area-faq { max-width: 900px; margin: 0 auto 70px; }
.area-faq h2 { text-align: center; }
.area-faq details {
  border-top: 1px solid rgba(27,75,48,0.14);
  padding: 18px 4px;
}
.area-faq details:last-child { border-bottom: 1px solid rgba(27,75,48,0.14); }
.area-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); line-height: 1.45; }
.area-faq p { margin: 10px 0 0; color: var(--ink-muted); line-height: 1.7; }
.area-cta { text-align: center; max-width: 760px; margin: 0 auto; }
.area-cta h2 { font-family: var(--display); color: var(--green); font-size: clamp(34px, 4vw, 52px); font-weight: 500; margin: 0 0 14px; }
.area-cta p { color: var(--ink-muted); line-height: 1.7; margin: 0 auto 24px; }
.area-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .area-hero { padding-top: 126px; }
  .area-grid { grid-template-columns: 1fr; }
  .area-card { padding: 25px 22px; }
  .area-services { padding: 34px 22px; }
}
@media (max-width: 420px) {
  .area-hero-inner { padding: 0 20px; }
  .area-main { padding-top: 58px; }
}