/* Service area pages built by tools/build_areas.py.
   Uses the site's own components (section-heading, blue-div cards, faq-accordion, precision-pool band);
   these rules only add what those don't cover. */
.faq-accordion h3.accordion-header { margin: 0; font-size: inherit; }

/* Local know-how cards: three across, so the Imbue card titles run a little smaller */
.area-know .blue-div .section-heading { font-size: 32px; margin-bottom: 14px; }
.area-know .blue-div-icon img { height: 44px; width: auto; }

/* Permits dropdowns */
.area-permits .faq-accordion .bp-text { margin: 0; }
.area-permits .faq-accordion .accordion-body .body-text { color: #333; }

/* Neighborhoods band */
.area-hoods {
  padding-top: 90px; padding-bottom: 90px; background-color: #002A42;
  background-attachment: scroll; background-size: cover; position: relative;
}
.area-hoods::before { content: ""; position: absolute; inset: 0; background: rgba(0, 42, 66, .55); }
.area-hoods > .container { position: relative; z-index: 1; }
.area-hoods .area-hoods-sub { color: rgba(255, 255, 255, .8); margin-bottom: 34px; }
.area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto 50px; }
.area-chip {
  display: inline-block; padding: 9px 18px; border-radius: 100px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .2px;
  backdrop-filter: blur(4px);
}
.area-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto 46px; }
.area-stat {
  text-align: center; padding: 26px 18px; border-radius: 20px;
  background: #fff; box-shadow: 0 7px 19.6px rgba(0, 0, 0, .10);
}
.area-stat-label {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #777; margin: 0 0 8px;
}
.area-stat-value { font-family: Imbue, serif; text-transform: uppercase; font-size: 34px; line-height: 1; color: #1D4638; margin: 0; }
.area-stat-note { font-family: Inter, sans-serif; font-size: 12px; color: #8D8D8D; margin: 6px 0 0; }
.area-nearby { text-align: center; }
.area-nearby .area-stat-label { color: rgba(255, 255, 255, .85); }
.area-near-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.area-near-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 100px;
  background: #08B0DD; color: #fff; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: transform .25s ease, background .25s ease;
}
.area-near-link:hover { color: #fff; background: #007994; transform: translateY(-2px); }
.area-near-link.all { background: transparent; border: 1px solid #fff; }
.area-near-link.all:hover { background: rgba(255, 255, 255, .15); }

@media (max-width: 991px) {
  .area-know .blue-div .section-heading { font-size: 28px; }
}
@media (max-width: 767px) {
  .area-hoods { padding-top: 60px; padding-bottom: 60px; }
  .area-stats { grid-template-columns: 1fr; gap: 14px; }
  .area-stat-value { font-size: 28px; }
  .area-chip { font-size: 13px; padding: 8px 14px; }
}

/* The site's light-mint icons, darkened to match the dark green icons on the service cards */
.area-know .blue-div-icon img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(23%) saturate(926%) hue-rotate(104deg) brightness(95%);
}
.area-know .blue-div:hover .blue-div-icon img { filter: brightness(0) invert(1); }
/* breathing room between the neighborhoods band and the FAQ that follows it */
.area-hoods + section { padding-top: 90px !important; }
@media (max-width: 767px) { .area-hoods + section { padding-top: 60px !important; } }