/* Service-area map: replaces the Google Maps embed in #area-map.
   Basemap images and pin positions come from .claude/mockups/service-area-map/tools/build_prod_map.py;
   --x/--y are % of the desktop map, --mx/--my of the phone crop. */
.sam{position:relative;max-width:1180px;margin:0 auto 40px;}
.sam-stage{position:relative;}
.sam-card{position:relative;aspect-ratio:1190/605;border-radius:18px;overflow:hidden;background:#cfdde3;
  border:1px solid rgba(203,184,136,.45);box-shadow:0 30px 70px rgba(0,0,0,.55);}
.sam-base{position:absolute;inset:0;width:100%;height:100%;display:block;}
.sam-layer span,.sam-pins a{position:absolute;left:var(--x);top:var(--y);}
.sam .ph{display:none;}

/* pins: zero-size anchor at the town; the drop's tip sits on the point */
.sam-pins a{width:0;height:0;color:#202125;text-decoration:none;}
.sam-pins a::before{content:"";position:absolute;left:-8.5px;top:-22px;width:17px;height:23px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8.5 -22 17 23'%3E%3Cpath d='M0 0C-2.4-3.8-7.5-8.6-7.5-14a7.5 7.5 0 1 1 15 0C7.5-8.6 2.4-3.8 0 0Z' fill='%23111113' stroke='%23fff' stroke-width='1.3'/%3E%3Ccircle cy='-14' r='2.8' fill='%23cbb888'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .15s;transform-origin:50% 100%;}
.sam-pins a:hover::before,.sam-pins a:focus-visible::before{transform:scale(1.2);}
.sam-label{position:absolute;white-space:nowrap;font:700 12.5px/1 var(--ff-body);
  text-shadow:0 0 2px #f5f1e9,0 0 2px #f5f1e9,0 0 3px #f5f1e9,0 0 4px #f5f1e9;}
.sam-pins a:hover .sam-label,.sam-pins a:focus-visible .sam-label{text-decoration:underline;}
.sam-pins a.is-current{z-index:2;}
.sam-pins a.is-current::before{transform:scale(1.35);}
.sam-pins a.is-current:hover::before{transform:scale(1.45);}
.sam-pins .is-current .sam-label{padding:5px 9px;border-radius:999px;background:#0c0c0d;color:#e4d7b6;text-shadow:none;}
/* label side: d-* on desktop, m-* on phones */
@media (min-width:701px){
  .d-r .sam-label{left:11px;top:-14px;transform:translateY(-50%);}
  .d-l .sam-label{right:11px;top:-14px;transform:translateY(-50%);}
  .d-t .sam-label{left:0;bottom:26px;transform:translateX(-50%);}
  .d-b .sam-label{left:0;top:5px;transform:translateX(-50%);}
  .sam-pins .is-current.d-r .sam-label{left:15px;}
  .sam-pins .is-current.d-l .sam-label{right:15px;}
  .sam-pins .is-current.d-t .sam-label{bottom:33px;}
}

/* labels painted on the map: highway shields, nearby towns, water */
.sam-i,.sam-s{transform:translate(-50%,-50%);font:800 7.6px/1 var(--ff-body);color:#3a3b3f;text-align:center;}
.sam-i{width:18px;height:22px;padding-top:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9.5 -11.5 19 23'%3E%3Cpath d='M-9-8.5C-3-11 3-11 9-8.5L8.4 1.8C7.4 6.6 3.8 9.4 0 11-3.8 9.4-7.4 6.6-8.4 1.8Z' fill='%23fff' stroke='%23a39d90'/%3E%3C/svg%3E") no-repeat center/contain;}
.sam-s{padding:3.5px 4.5px;border:1px solid #a39d90;border-radius:8px;background:#fff;}
.sam-ctx{transform:translateX(-50%);padding-top:5px;font:italic 500 10.5px/1 var(--ff-body);color:#8a8476;white-space:nowrap;
  text-shadow:0 0 2px #f5f1e9,0 0 3px #f5f1e9;}
.sam-ctx::before{content:"";position:absolute;left:50%;top:-2px;width:4.4px;height:4.4px;margin-left:-2.2px;border-radius:50%;background:#a8a294;}
.sam-water{transform:translate(-50%,-50%);font:700 11px/1 var(--ff-body);letter-spacing:.42em;color:#7d99a3;white-space:nowrap;}

/* Badge scales with the map: 290px at the full 1180px width. */
.sam-badge{position:absolute;right:2.2%;bottom:-7.6%;width:24.6%;max-width:290px;height:auto;pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}
.sam-cta{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px 10px 16px;
  background:#0c0c0d;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:.86rem;color:var(--silver);}
.sam-sw{width:18px;height:12px;flex:none;border-radius:3px;background:rgba(214,163,72,.6);border:1.5px solid #a9824a;}
.sam-cta a{padding:7px 14px;border-radius:999px;background:var(--gold);color:var(--black);font-weight:800;white-space:nowrap;}
.sam-cta a:hover{background:var(--gold-light);}

/* Tablets: the map is too small for all 22 labels or for the call bar beside the badge. */
@media (min-width:701px) and (max-width:1080px){
  .sam-pins a:not(.anchor):not(.is-current) .sam-label{display:none;}
  .sam .sam-s.dt{display:none;}
  .sam-cta{position:static;width:fit-content;max-width:70%;margin-top:18px;}
}

/* Phones: tighter crop, smaller pins, the main towns labeled, and the detailer stands on the call card. */
@media (max-width:700px){
  .sam-card{aspect-ratio:590/620;}
  .sam-layer span,.sam-pins a{left:var(--mx);top:var(--my);}
  .sam .dt{display:none;}
  .sam .ph{display:block;}
  .sam-pins a::before{left:-6.6px;top:-17.2px;width:13.2px;height:18px;}
  .sam-pins a:not(.anchor):not(.is-current) .sam-label{display:none;}
  .sam-label{font-size:12px;}
  .m-r .sam-label{left:9px;top:-11px;transform:translateY(-50%);}
  .m-l .sam-label{right:9px;top:-11px;transform:translateY(-50%);}
  .m-t .sam-label{left:0;bottom:21px;transform:translateX(-50%);}
  .m-b .sam-label{left:0;top:5px;transform:translateX(-50%);}
  .sam-pins .is-current.m-r .sam-label{left:13px;}
  .sam-pins .is-current.m-l .sam-label{right:13px;}
  .sam-pins .is-current.m-t .sam-label{bottom:27px;}
  .sam-stage{position:static;}
  .sam-badge{width:118px;max-width:none;right:12px;bottom:14px;z-index:2;}
  .sam-cta{position:static;margin-top:70px;padding:16px 140px 16px 16px;border-radius:14px;flex-wrap:wrap;align-items:flex-start;min-height:132px;}
  .sam-sw{display:none;}
}