/* Service Area page, to Micah's mockup (2026-10-20).

   Hero: copy on the left; on the right a short tagline, the gold branch in
   the corner and a gold ring sweeping up from the bottom edge.

   Where we serve: the towns in two columns on the left, the illustrated map
   bleeding off the right edge, its edges faded into the band. */

/* ------------------------------------------------------------------------
   Hero */
.sah { position: relative; }
.sah-leaf {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -3rem;
  width: min(30vw, 27rem);
  aspect-ratio: 840 / 1100;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.9;
  background: no-repeat right top / contain;
  background-image: url("../img/loc-hero-right-1x.webp");
  background-image: image-set(url("../img/loc-hero-right-1x.avif") type("image/avif") 1x, url("../img/loc-hero-right-2x.avif") type("image/avif") 2x, url("../img/loc-hero-right-1x.webp") type("image/webp") 1x, url("../img/loc-hero-right-2x.webp") type("image/webp") 2x);
}
.sah-ring {
  position: absolute;
  z-index: 0;
  right: -14rem;
  bottom: -34rem;
  width: 44rem;
  aspect-ratio: 1;
  border: 1.5px solid rgba(216, 184, 144, 0.7);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero .sah-tagline {
  position: absolute;
  z-index: 1;
  right: calc(min(30vw, 27rem) - 2rem);
  top: 67%;
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.75;
  text-transform: uppercase;
  color: rgba(244, 240, 235, 0.86);
}
.sah-tagline::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: var(--sp-4); background: var(--champagne); }

.page-hero .container.sah-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: 4.5rem 4.25rem;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem);
}
.page-hero .sah-inner h1 { max-width: none; margin: var(--sp-3) 0 var(--sp-4); font-size: clamp(2.75rem, 4.4vw, 4.5rem); line-height: 1.05; }
.page-hero .sah-inner p { max-width: 36rem; margin: 0; line-height: 1.5; }
.sah-rule { display: block; width: 4rem; height: 2px; margin-top: var(--sp-6); background: var(--champagne); }

@media (max-width: 87.9375rem) {
  .page-hero .sah-tagline { display: none; }
}
@media (max-width: 47.9375rem) {
  .sah-leaf { width: 11rem; opacity: 0.4; }
  .sah-ring { display: none; }
  .page-hero .container.sah-inner { padding-block: 3.5rem; }
}

/* ------------------------------------------------------------------------
   Where we serve */
.saw { position: relative; }
.saw-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem) 0;
}
@media (min-width: 80rem) {
  .saw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--sp-5); }
}
.saw-copy { padding-right: var(--sp-5); }
.saw-copy h2 { margin: var(--sp-3) 0 var(--sp-4); font-size: clamp(2rem, 2.6vw, 2.625rem); line-height: 1.1; text-wrap: balance; }
.saw-lede { max-width: 32rem; margin: 0 0 var(--sp-5); font-size: var(--fs-1); line-height: 1.5; color: var(--text-strong); }

.saw-towns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  max-width: 36rem;
}
.saw-towns li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(16, 27, 55, 0.1);
}
.saw-towns li:nth-last-child(-n+2) { border-bottom: 0; }
.sa-pin { flex: none; width: 1.6rem; height: auto; color: var(--brass); filter: drop-shadow(0 2px 3px rgba(16, 27, 55, 0.15)); }
.saw-towns strong { display: block; font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; line-height: 1.15; color: var(--text-strong); }
.sa-state { display: block; margin-top: 0.3rem; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }

.saw-foot { max-width: 36rem; margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid rgba(168, 134, 63, 0.45); }
.saw-foot p { margin: 0 0 var(--sp-2); font-size: var(--fs-0); line-height: 1.55; color: var(--text-strong); }
.saw-foot p:last-child { margin-bottom: 0; }
.saw-foot a { font-weight: 700; color: var(--text-strong); text-decoration-color: var(--brass); text-underline-offset: 0.2em; white-space: nowrap; }

.saw-map { margin: 0; }
.saw-map img {
  display: block;
  width: 100%;
  height: auto;
  /* Fade the left, top and bottom edges into the band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%), linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%), linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 79.9375rem) {
  .saw-grid { padding-inline: clamp(1.5rem, 6vw, 4rem); }
  .saw-copy { padding-right: 0; }
  .saw-map { max-width: 46rem; justify-self: center; width: 100%; }
  .saw-map img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  }
}
@media (max-width: 47.9375rem) {
  .saw-towns { grid-template-columns: 1fr; }
  .saw-towns li:nth-last-child(2) { border-bottom: 1px solid rgba(16, 27, 55, 0.1); }
  .saw-towns li { padding: var(--sp-3) 0; }
  .saw-towns strong { font-size: 1.375rem; }
  .sa-state { letter-spacing: 0.1em; }
  .saw-map { margin-inline: -1.5rem; width: auto; }
}