.service-areas-page .areas-hero{background:linear-gradient(120deg,#edf2e8,#f8f3e9);padding:85px 0 90px}.areas-hero-inner{max-width:1150px}.areas-hero h1,.areas-section-intro h2,.areas-cta h2{font:500 clamp(38px,5.4vw,68px)/1.1 Georgia,serif;color:#214b3a;letter-spacing:-.03em;margin:10px 0 20px}.areas-hero h1{max-width:850px}.areas-hero h1 em{color:#78906f}.areas-hero p,.areas-section-intro p{max-width:760px;font-size:18px;color:#536b5e}.areas-hero .button{margin-top:15px}.areas-map-section{padding-top:78px;padding-bottom:75px}.areas-section-intro{margin-bottom:30px}.areas-map-wrap{background:#fff;border:1px solid #dfe7db;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(33,75,58,.07)}#service-area-map{height:470px;background:#e9efe6}.map-fallback{padding:40px;color:#486454}.areas-map-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;color:#54695e;font-size:13px}.areas-list-section{background:#edf2e8}.areas-county-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.area-county{padding:27px;border-radius:18px;background:#fff;border:1px solid #e1e9de}.area-county h3{font:500 29px Georgia,serif;color:#214b3a;margin:0 0 19px}.area-city-list{display:flex;flex-wrap:wrap;gap:9px}.area-city-list a{border:1px solid #dce7d9;background:#f8faf5;border-radius:999px;padding:8px 13px;color:#295340;font-weight:650;font-size:14px}.area-city-list a:hover,.area-city-list a:focus-visible{background:#dfead9;outline-color:#416c4c}.area-city-list span{font-size:11px}.areas-availability{margin:26px 0 0;color:#52695b}.areas-service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.areas-service-grid a{background:#f1f5ed;border:1px solid #dfe8dc;border-radius:14px;padding:22px;color:#214b3a;font-weight:750;display:flex;justify-content:space-between}.areas-service-grid a:hover{background:#e1ebdd}.areas-cta{padding:52px;background:#eaf1e4;border-radius:24px;text-align:center}.areas-cta h2{font-size:clamp(32px,4vw,48px)}.areas-cta p{color:#536b5e;max-width:620px;margin:0 auto 22px}.areas-cta .eyebrow{margin:0}.areas-pin{width:17px;height:17px;background:#315d43;border:3px solid white;border-radius:50%;box-shadow:0 2px 10px #254b3a66}.areas-pin-icon{background:transparent;border:0}.leaflet-popup-content a{color:#24573e;font-weight:700}.leaflet-container{font-family:Inter,system-ui,sans-serif}@media(max-width:700px){.service-areas-page .areas-hero{padding:55px 0}.areas-county-grid,.areas-service-grid{grid-template-columns:1fr}#service-area-map{height:370px}.areas-cta{padding:32px 20px}.area-county{padding:20px}.areas-map-caption{font-size:12px}}
/* Leaflet's tile images must not inherit the site's global responsive img rules. */
#service-area-map .leaflet-tile {
  width:256px !important;
  height:256px !important;
  max-width:none !important;
  max-height:none !important;
  display:block;
}
#service-area-map .leaflet-pane img,
#service-area-map .leaflet-control img { max-width:none; }
#service-area-map .leaflet-container { width:100%; height:100%; }
#service-area-map .leaflet-control-attribution { font-size:11px; }

/* Mint topographic illustration for the Service Areas hero */
.service-areas-page .areas-hero {
  background-color: #eaf5e9;
  background-image: linear-gradient(90deg, rgba(242,249,239,.52), rgba(242,249,239,.25)), url("assets/service-areas-topographic-mint.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#service-area-map{display:block;width:100%;height:470px;border:0;background:#e9efe6}@media(max-width:700px){#service-area-map{height:370px}}

/* 2026-10-23: Lighter Service Areas hero and Services-page matching copy */
body.service-areas-page .areas-hero.services-page-showcase {
  background-image:
    linear-gradient(90deg, rgba(20,66,51,.65) 0%, rgba(20,66,51,.55) 48%, rgba(20,66,51,.46) 100%),
    url("assets/service-areas-topographic-mint.png") !important;
  background-color:#b7d9c5;
}
body.service-areas-page .areas-hero .services-page-summary p {
  font-family:inherit !important;
  font-size:clamp(19px,1.3vw,24px) !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  color:rgba(255,255,255,.96) !important;
  max-width:650px;
}
@media(max-width:720px){
  body.service-areas-page .areas-hero .services-page-summary p {font-size:18px !important;line-height:1.5 !important;}
}

/* Larger, clean map caption without emoji */
body.service-areas-page .areas-map-caption span:first-child {font-size:clamp(16px,1.3vw,19px);font-weight:600;line-height:1.5;}

/* Refined community directory — quiet editorial cards with clear hierarchy */
.service-areas-page .areas-list-section {
  background:linear-gradient(180deg,#edf3e9 0%,#f2f5ed 100%);
  padding-top:clamp(72px,8vw,112px);
  padding-bottom:clamp(72px,8vw,112px);
}
.service-areas-page .areas-list-section .areas-section-intro {
  max-width:850px;
  margin-bottom:clamp(34px,5vw,54px);
}
.service-areas-page .areas-list-section .areas-section-intro h2 {
  margin-top:16px;
  margin-bottom:20px;
}
.service-areas-page .areas-list-section .areas-section-intro p {
  max-width:680px;
  line-height:1.75;
}
.service-areas-page .areas-county-grid {
  gap:18px;
  align-items:stretch;
}
.service-areas-page .area-county {
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3vw,39px);
  border-radius:20px;
  border:1px solid #dce6d9;
  background:#fffefa;
  box-shadow:0 9px 30px rgba(31,72,53,.035);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.service-areas-page .area-county:hover {
  transform:translateY(-3px);
  border-color:#c9d9c8;
  box-shadow:0 16px 35px rgba(31,72,53,.085);
}
.service-areas-page .area-county::before {
  content:"";
  display:block;
  width:42px;
  height:3px;
  border-radius:3px;
  background:#b4c9a9;
  margin-bottom:22px;
}
.service-areas-page .area-county:first-child {
  background:#f7faf3;
  border-color:#c9d9c4;
}
.service-areas-page .area-county:first-child::before {background:#507c5c;}
.service-areas-page .area-county h3 {
  font-size:clamp(25px,2.35vw,34px);
  line-height:1.18;
  letter-spacing:-.025em;
  margin:0 0 23px;
}
.service-areas-page .area-city-list {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
}
.service-areas-page .area-city-list a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:11px 15px;
  min-height:42px;
  border-radius:10px;
  background:#f1f5ed;
  border:1px solid #e0e8db;
  color:#28523d;
  font-size:14px;
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.service-areas-page .area-city-list a span {
  font-size:13px;
  font-weight:400;
  color:#71927c;
  transition:transform .18s ease;
}
.service-areas-page .area-city-list a:hover,
.service-areas-page .area-city-list a:focus-visible {
  background:#e2eddf;
  border-color:#b6cfb7;
  color:#173d2b;
  outline-offset:3px;
}
.service-areas-page .area-city-list a:hover span {transform:translate(2px,-2px);}
.service-areas-page .areas-availability {
  margin-top:30px;
  padding:18px 22px;
  border-left:3px solid #a3bfa5;
  background:rgba(255,255,255,.6);
  border-radius:0 12px 12px 0;
  font-size:15px;
  line-height:1.65;
}
@media(max-width:700px) {
  .service-areas-page .areas-county-grid {gap:14px;}
  .service-areas-page .area-county {padding:25px 22px;}
  .service-areas-page .area-county h3 {margin-bottom:19px;}
  .service-areas-page .area-city-list {gap:8px;}
  .service-areas-page .area-city-list a {padding:10px 12px;font-size:13px;}
  .service-areas-page .areas-availability {padding:16px;font-size:14px;}
}
@media(prefers-reduced-motion:reduce) {
  .service-areas-page .area-county,
  .service-areas-page .area-city-list a,
  .service-areas-page .area-city-list a span {transition:none;}
  .service-areas-page .area-county:hover {transform:none;}
}

/* Map layout inspired by the reference: regional pin colors and compact legend */
.areas-map-legend{align-items:center;justify-content:flex-start;gap:15px 25px;background:#fff;font-size:14px;color:#3c5c4b;border:1px solid #e0e9de;border-top:0;border-radius:0 0 20px 20px}
.areas-legend-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600}
.areas-legend-item i{width:11px;height:11px;border-radius:50%;background:var(--legend);display:inline-block;box-shadow:0 0 0 2px white,0 0 0 3px #dce6dc}
.areas-legend-note{margin-left:auto;color:#607669;font-size:13px}
.areas-map-disclaimer{font-size:13px;line-height:1.5;color:#607568;margin:12px 0 0}
.areas-map-wrap{border-radius:20px 20px 0 0;overflow:hidden}
@media(max-width:700px){.areas-map-legend{gap:12px 18px;padding:15px}.areas-legend-note{margin-left:0;width:100%}}

/* Simple, searchable, mobile-friendly community directory */
.service-areas-page .areas-directory {max-width:100%;margin-top:32px;}
.service-areas-page .areas-search-label {display:block;font-weight:700;color:#234b37;margin-bottom:10px;font-size:15px;}
.service-areas-page .areas-city-search {display:block;box-sizing:border-box;width:100%;max-width:520px;height:52px;border:1px solid #cddccd;border-radius:13px;padding:0 17px;background:#fffefa;color:#234b37;font:inherit;font-size:16px;outline-offset:3px;margin-bottom:25px;}
.service-areas-page .areas-city-search:focus {border-color:#638c70;outline:2px solid #bed4bd;}
.service-areas-page .areas-region-list {display:grid;gap:13px;}
.service-areas-page .areas-region {border:1px solid #dbe5d8;border-radius:17px;background:#fffefa;overflow:hidden;box-shadow:0 5px 22px rgba(34,70,49,.035);}
.service-areas-page .areas-region[hidden],.service-areas-page .areas-region-cities a[hidden],.service-areas-page .areas-no-results[hidden] {display:none!important;}
.service-areas-page .areas-region summary {display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:23px 27px;}
.service-areas-page .areas-region summary::-webkit-details-marker {display:none;}
.service-areas-page .areas-region summary:focus-visible {outline:3px solid #89ad92;outline-offset:-3px;}
.service-areas-page .areas-region-name {font-family:Georgia,serif;font-size:clamp(23px,2.3vw,30px);line-height:1.2;color:#244b39;flex:1;}
.service-areas-page .areas-region-count {font-size:13px;color:#63776b;white-space:nowrap;}
.service-areas-page .areas-region-chevron {font-size:26px;color:#55745e;transition:transform .2s ease;line-height:1;}
.service-areas-page .areas-region[open] .areas-region-chevron {transform:rotate(180deg);}
.service-areas-page .areas-region-cities {display:flex;flex-wrap:wrap;gap:10px;padding:2px 27px 26px;}
.service-areas-page .areas-region-cities a {display:inline-flex;align-items:center;min-height:42px;box-sizing:border-box;padding:10px 16px;border-radius:10px;border:1px solid #dce8d9;background:#f0f5ed;color:#28523c;font-weight:600;font-size:14px;text-decoration:none;transition:background .15s,border-color .15s;}
.service-areas-page .areas-region-cities a:hover,.service-areas-page .areas-region-cities a:focus-visible {background:#e1eddf;border-color:#b9d0b7;}
.service-areas-page .areas-no-results {font-size:15px;color:#566d5e;margin:15px 0;}
@media(max-width:640px){.service-areas-page .areas-region summary {padding:19px 18px;gap:10px;}.service-areas-page .areas-region-count{font-size:12px;}.service-areas-page .areas-region-cities{padding:0 18px 20px;gap:8px;}.service-areas-page .areas-region-cities a{font-size:13px;padding:9px 12px;}.service-areas-page .areas-city-search{max-width:100%;}}
@media(prefers-reduced-motion:reduce){.service-areas-page .areas-region-chevron,.service-areas-page .areas-region-cities a{transition:none;}}

/* Accessible map legend: high contrast and unique shapes, not color alone. */
.service-areas-page .areas-map-legend{gap:16px;flex-wrap:wrap;font-size:15px;color:#17372b}
.service-areas-page .areas-legend-item{display:inline-flex;align-items:center;gap:9px;font-weight:700;line-height:1.5}
.service-areas-page .areas-legend-item i{display:inline-block;flex:none;width:17px;height:17px;background:var(--legend);border:2px solid #fff;box-shadow:0 0 0 1.5px #203e30;border-radius:50%}
.service-areas-page .areas-legend-item i.legend-square{border-radius:2px}
.service-areas-page .areas-legend-item i.legend-diamond{border-radius:2px;transform:rotate(45deg) scale(.83)}
.service-areas-page .areas-legend-note{font-size:14px;color:#314c3e}

/* Match the larger section labels used on the Services page. */
.service-areas-page .areas-map-section .areas-section-intro > .eyebrow {
  display: block;
  color: var(--clay, #ad7150);
  font-family: inherit;
  font-size: clamp(28px, 2.25vw, 40px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .13em;
  margin-bottom: 24px;
}
@media (max-width: 620px) {
  .service-areas-page .areas-map-section .areas-section-intro > .eyebrow {
    font-size: 26px;
    margin-bottom: 18px;
  }
}

/* Match the understated OUR APPROACH eyebrow on other Flora pages. */
.service-areas-page .areas-map-section .areas-section-intro > .eyebrow {
  display:block;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.18em;
  color:var(--clay,#ad7150);
  margin-bottom:14px;
}
@media(max-width:620px) {
  .service-areas-page .areas-map-section .areas-section-intro > .eyebrow {
    font-size:13px;
    margin-bottom:12px;
  }
}

/* Slightly larger, consistent section labels on the service areas page. */
.service-areas-page .areas-map-section .areas-section-intro > .eyebrow,
.service-areas-page .areas-list-section .areas-section-intro > .eyebrow {
  display:block;
  font-size:15px;
  font-weight:800;
  letter-spacing:.16em;
  line-height:1.5;
  color:var(--clay,#ad7150);
  margin-bottom:15px;
}
@media(max-width:620px){
  .service-areas-page .areas-map-section .areas-section-intro > .eyebrow,
  .service-areas-page .areas-list-section .areas-section-intro > .eyebrow {font-size:14px;margin-bottom:13px;}
}

/* Match DON'T SEE YOUR TOWN? to the other Service Areas section labels. */
.service-areas-page .areas-cta > .eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--clay, #ad7150);
  margin-bottom: 15px;
}
@media (max-width: 620px) {
  .service-areas-page .areas-cta > .eyebrow {
    font-size: 14px;
    margin-bottom: 13px;
  }
}

/* Clear, touch-friendly interactive service region selector */
.service-areas-page .areas-map-legend{display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:17px 18px 18px;background:#f8faf6;border-top:1px solid #e1e9df}
.service-areas-page .areas-legend-heading{display:block;font:800 12px/1.3 system-ui,-apple-system,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#476457}
.service-areas-page .areas-region-controls{display:flex;flex-wrap:wrap;gap:9px}
.service-areas-page .areas-region-filter{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:9px 13px;border:1.5px solid #cbd9d0;border-radius:999px;background:#fff;color:#204638;font:750 13px/1.25 system-ui,-apple-system,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.service-areas-page .areas-region-filter:hover{border-color:#397455;background:#edf5ed}
.service-areas-page .areas-region-filter.is-active{background:#1c513c;border-color:#1c513c;color:#fff;box-shadow:0 2px 7px #123f2a22}
.service-areas-page .areas-region-filter:focus-visible{outline:3px solid #d78b52;outline-offset:3px}
.service-areas-page .areas-region-filter i{display:inline-block;flex:0 0 auto;width:14px;height:14px;background:var(--legend);border:2px solid currentColor;box-shadow:inset 0 0 0 1px #fff}
.service-areas-page .areas-region-filter .legend-circle{border-radius:50%}
.service-areas-page .areas-region-filter .legend-square{border-radius:2px}
.service-areas-page .areas-region-filter .legend-diamond{border-radius:2px;transform:rotate(45deg);margin:0 3px}
.service-areas-page .areas-legend-note{font:500 13px/1.5 system-ui,-apple-system,sans-serif;color:#526b5e}
@media(max-width:620px){.service-areas-page .areas-map-legend{padding:15px 13px}.service-areas-page .areas-region-controls{gap:8px}.service-areas-page .areas-region-filter{font-size:12px;padding:9px 11px;min-height:42px}}

/* Filled region selector: coordinated with map colors, on desktop and mobile. */
.service-areas-page .areas-region-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
}
.service-areas-page .areas-region-filter {
  width:100%;
  min-width:0;
  min-height:56px;
  padding:12px 10px;
  border:2px solid transparent;
  border-radius:16px;
  font-size:clamp(12px,1.6vw,16px);
  font-weight:750;
  line-height:1.25;
  text-align:center;
  box-shadow:none;
}
.service-areas-page .areas-region-filter[data-map-region="all"] {background:#1c513c;color:#fff;}
.service-areas-page .areas-region-filter[data-map-region="Alamance & Orange"] {background:#e7f2ea;color:#176347;}
.service-areas-page .areas-region-filter[data-map-region="Triangle"] {background:#e8eff9;color:#285aa0;}
.service-areas-page .areas-region-filter[data-map-region="Triad"] {background:#faeee5;color:#ad602c;}
.service-areas-page .areas-region-filter:hover {filter:brightness(.96);border-color:currentColor;}
.service-areas-page .areas-region-filter.is-active {border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor,0 2px 6px #173a2a1a;}
.service-areas-page .areas-region-filter[data-map-region="all"].is-active {border-color:#1c513c;box-shadow:0 3px 8px #123f2a2a;}
.service-areas-page .areas-region-filter i {width:15px;height:15px;background:currentColor;border:0;box-shadow:none;}
@media(max-width:620px) {
 .service-areas-page .areas-region-controls {gap:8px;}
 .service-areas-page .areas-region-filter {min-height:54px;padding:10px 6px;border-radius:14px;font-size:12px;gap:6px;}
 .service-areas-page .areas-region-filter i {width:12px;height:12px;}
}