@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap');
/* Rose and Thorn: service-area map inside the "White Rock craftsmanship" card (Nov 2026). */
.area .wrap.am-on{display:grid;width:min(1400px,92%);grid-template-columns:minmax(290px,.72fr) minmax(0,1.6fr);gap:clamp(24px,3.5vw,52px);align-items:center}
.am{--am-line:#f2b764;--am-glow:rgba(255,190,100,.9);position:relative;min-width:0}
.am svg{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
.am-r{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.am-r path{fill:rgba(242,183,100,0);stroke:var(--am-line);stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .25s,filter .25s,stroke-width .2s}
.am-r.am-home path{fill:rgba(242,183,100,.08)}
.am-r .am-hit{fill:transparent;stroke:none}
.am-dot{fill:#f2b764;stroke:#fff3dc;stroke-width:.8;filter:drop-shadow(0 0 3px rgba(255,190,100,.8))}
.am-r:hover path{fill:rgba(242,183,100,.16);filter:drop-shadow(0 0 3px rgba(255,190,100,.45))}
.am-r:focus-visible path{stroke:#fff3dc;stroke-width:2;fill:rgba(242,183,100,.18)}
.am-r.on path{fill:rgba(255,196,110,.42);stroke:#ffe2b0;stroke-width:1.8;filter:drop-shadow(0 0 6px var(--am-glow)) drop-shadow(0 0 14px rgba(255,170,70,.55))}
.am-t{font:500 10px/1.2 "Avenir Next","Trebuchet MS",Arial,sans-serif;letter-spacing:.08px;text-transform:none;fill:#f6dcb1;opacity:.82;pointer-events:none;paint-order:stroke;stroke:rgba(40,26,12,.35);stroke-width:1px;transition:opacity .2s,fill .2s}
.am-t-small{letter-spacing:0}
.am-t-home{fill:#ffe7c2;opacity:1}
.am-t.hov,.am-t.on{fill:#fff;opacity:1}
.am-pin{pointer-events:none}
.am-pin-body{fill:#a2232e;stroke:#fff3dc;stroke-width:1.2}
.am-pin-dot{fill:#fff3dc}
.am-pin-shadow{fill:rgba(0,0,0,.35)}
.am-pin.drop .am-pin-in{animation:amDrop .5s cubic-bezier(.3,1.5,.55,1) both}
@keyframes amDrop{0%{transform:translateY(-34px);opacity:0}60%{opacity:1}100%{transform:none}}
.am-note{margin:0 0 12px!important;display:flex;align-items:center;justify-content:flex-end;gap:14px;font:italic 600 clamp(19px,1.7vw,24px)/1.25 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.2px;color:#f2b764!important;text-shadow:0 0 18px rgba(242,183,100,.28);max-width:none!important}
.am-note::before{content:"";flex:0 1 70px;height:1px;background:linear-gradient(90deg,transparent,#f2b764)}
.am-cap{margin:8px 0 0;text-align:right;font:700 10px/1 Arial,sans-serif!important;letter-spacing:2px;text-transform:uppercase;color:#f2b764;opacity:.85;max-width:none!important}
.am-pop{position:absolute;z-index:5;width:min(250px,80vw);transform:translate(16px,-50%);padding:14px 16px 14px;border-radius:18px;color:#fff6e8;text-align:left;
  background:rgba(36,23,12,.9);border:1px solid rgba(246,195,114,.45);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,240,215,.16);animation:amPop .25s ease both}
.am-pop[hidden]{display:none}
.am-pop.am-left{transform:translate(calc(-100% - 16px),-50%)}
.am-pop.am-up{transform:translate(16px,calc(-100% + 10px))}
.am-pop.am-left.am-up{transform:translate(calc(-100% - 16px),calc(-100% + 10px))}
@keyframes amPop{from{opacity:0}}
.am-pop p{margin:0;max-width:none!important}
.am-pop-h{font:15px/1.35 Georgia,serif!important;padding-right:18px}
.am-pop-h b{color:#ffd08c;font-weight:400}
.am-x{position:absolute;top:6px;right:8px;width:28px;height:28px;border:0;background:none;color:#e9d5bb;font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.am-x:hover{background:rgba(255,236,206,.1)}
.am-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 8px;min-height:44px;border-radius:14px;text-decoration:none;font:700 15px/1 Arial,sans-serif;color:#2a1808!important;
  background:linear-gradient(180deg,#ffd896,#e19a45);border:1px solid rgba(255,230,190,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -8px rgba(232,150,60,.8)}
.am-btn svg{width:18px;height:18px}
.am-btn:active{transform:scale(.97)}
.am-num{font:12.5px/1.4 Arial,sans-serif!important;color:#e9d5bb;text-align:center}
.am-num a{color:#ffd08c}
.am-out{margin-top:8px!important;font:12px/1.4 Arial,sans-serif!important;color:#bda68a;text-align:center}
@media (max-width:820px){
  .area .wrap.am-on{grid-template-columns:1fr;gap:18px}
  .am{width:calc(100% + 24px);margin:0 -12px}
  .am-t{stroke-width:1.5px}
  .am-r path{stroke-width:1}
  .am-dot{r:5}
  .am-cap{text-align:center}
  .am-note{justify-content:center;text-align:center;padding:0 12px;font-size:20px!important}
  .am-note::before{display:none}
  /* on phones the pop-up sits under the map instead of floating over it */
  .am-pop,.am-pop.am-left,.am-pop.am-up,.am-pop.am-left.am-up{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.am-pin.drop .am-pin-in,.am-pop{animation:none}.am-r path,.am-t{transition:none}}