/* ==============================================================
   Fresh Prints Supply Co. — "Areas We Serve"
   Every rule is scoped to #fps-areas, so nothing else on the site
   is affected. Tokens match the live theme:
     amber #fab528 · ink #1a1a1a · Outfit + Yellowtail
   Fonts are already loaded by the theme. If you ever use this
   block somewhere without them, add:
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Yellowtail&display=swap');
   ============================================================== */

#fps-areas{
  --fps-amber:#fab528;
  --fps-amber-d:#dd9c10;
  --fps-amber-w:#fff7e6;
  --fps-ink:#1a1a1a;
  --fps-body:#4d5561;
  --fps-muted:#7b8391;
  --fps-line:#e9e5dd;
  --fps-cream:#faf8f3;
  --fps-dark:#151516;
  --fps-r:18px;
  --fps-shadow:0 1px 2px rgba(16,20,26,.04), 0 10px 26px -14px rgba(16,20,26,.16);
  --fps-shadow-h:0 2px 6px rgba(16,20,26,.06), 0 22px 46px -18px rgba(16,20,26,.26);

  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--fps-body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---------- local reset (block only) ---------- */
#fps-areas *,#fps-areas *::before,#fps-areas *::after{box-sizing:border-box;}
#fps-areas h2,#fps-areas h3,#fps-areas h4,#fps-areas p,#fps-areas ul,#fps-areas li,#fps-areas figure{margin:0;padding:0;}
#fps-areas ul{list-style:none;}
#fps-areas h2,#fps-areas h3,#fps-areas h4{color:var(--fps-ink);line-height:1.16;letter-spacing:-.018em;font-weight:700;}
#fps-areas h2{font-size:clamp(1.85rem,3.4vw,2.7rem);}
#fps-areas h3{font-size:1.28rem;}
#fps-areas a{color:inherit;text-decoration:none;}
#fps-areas img,#fps-areas svg{max-width:100%;display:block;}
#fps-areas :focus-visible{outline:3px solid var(--fps-amber);outline-offset:3px;border-radius:6px;}

/* ---------- shared ---------- */
#fps-areas .fps-sec{padding:clamp(36px,5vw,60px) 0;}
#fps-areas .fps-eyebrow{font-family:"Yellowtail",cursive;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--fps-amber);line-height:1;display:block;margin-bottom:.35em;}
#fps-areas .fps-kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fps-amber-d);margin-bottom:.9rem;display:block;}
#fps-areas .fps-swash{background-image:linear-gradient(var(--fps-amber),var(--fps-amber));background-size:100% .28em;background-repeat:no-repeat;background-position:0 88%;}
#fps-areas .fps-lede{font-size:1.08rem;max-width:60ch;}
#fps-areas .fps-head{max-width:64ch;}
#fps-areas .fps-head p{margin-top:1rem;}
#fps-areas .fps-center{text-align:center;margin-left:auto;margin-right:auto;}

/* ---------- buttons ---------- */
#fps-areas .fps-btn{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.98rem;
  padding:.86em 1.5em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;}
#fps-areas .fps-btn svg{width:1.05em;height:1.05em;flex:none;}
#fps-areas .fps-btn--primary{background:var(--fps-amber);color:#1a1a1a;box-shadow:0 10px 22px -12px rgba(250,181,40,.9);}
#fps-areas .fps-btn--primary:hover{background:var(--fps-amber-d);transform:translateY(-2px);}
#fps-areas .fps-btn--ghost{border-color:#dcd8d0;color:var(--fps-ink);background:#fff;}
#fps-areas .fps-btn--ghost:hover{border-color:var(--fps-ink);transform:translateY(-2px);}
#fps-areas .fps-btn--onDark{background:var(--fps-amber);color:#1a1a1a;}
#fps-areas .fps-btn--onDark:hover{background:#ffc953;transform:translateY(-2px);}
#fps-areas .fps-btn--wire{border-color:rgba(255,255,255,.28);color:#fff;}
#fps-areas .fps-btn--wire:hover{border-color:#fff;background:rgba(255,255,255,.07);}
#fps-areas .fps-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem;}

/* ---------- 1. intro + stat rail ---------- */
#fps-areas .fps-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center;}
#fps-areas .fps-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#fps-areas .fps-stat{background:var(--fps-cream);border:1px solid var(--fps-line);border-radius:16px;padding:20px 20px 18px;position:relative;overflow:hidden;}
#fps-areas .fps-stat::after{content:"";position:absolute;inset:auto auto 0 0;width:38px;height:3px;background:var(--fps-amber);}
#fps-areas .fps-stat b{display:block;font-size:1.85rem;font-weight:700;color:var(--fps-ink);line-height:1.05;letter-spacing:-.02em;}
#fps-areas .fps-stat span{display:block;font-size:.86rem;color:var(--fps-muted);margin-top:.35rem;line-height:1.4;}

/* ---------- 2. dark map panel ---------- */
#fps-areas .fps-panel{background:var(--fps-dark);color:#d7d9dd;border-radius:26px;padding:clamp(26px,4vw,52px);
  overflow:hidden;position:relative;min-width:0;max-width:100%;}
#fps-areas .fps-panel h2,#fps-areas .fps-panel h3{color:#fff;}
#fps-areas .fps-panel .fps-kicker{color:var(--fps-amber);}
#fps-areas .fps-panel::before{content:"";position:absolute;width:560px;height:560px;right:-180px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,181,40,.16),transparent 65%);pointer-events:none;}
#fps-areas .fps-maprow{display:grid;grid-template-columns:1fr;gap:26px;margin-top:clamp(24px,3vw,38px);position:relative;}
#fps-areas .fps-maprow>*{min-width:0;}
#fps-areas .fps-mapwrap{background:#1b1c1e;border:1px solid #2b2c30;border-radius:20px;padding:14px;min-width:0;max-width:100%;}
#fps-areas .fps-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;padding:0 4px;font-size:.8rem;color:#9aa0aa;}
#fps-areas .fps-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#6d7079;margin-right:.45em;vertical-align:middle;}
#fps-areas .fps-legend .is-hq i{background:var(--fps-amber);box-shadow:0 0 0 3px rgba(250,181,40,.22);}

/* city list beside / under the map */
#fps-areas .fps-citylist{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;}
#fps-areas .fps-cityrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;cursor:pointer;border:1px solid transparent;width:100%;text-align:left;
  background:transparent;font-family:inherit;transition:background .16s ease,border-color .16s ease,transform .16s ease;}
#fps-areas .fps-cityrow>span:first-child{min-width:0;}
#fps-areas .fps-cityrow:hover,#fps-areas .fps-cityrow.is-on{background:#212225;border-color:#33343a;transform:translateX(3px);}
#fps-areas .fps-cityrow strong{color:#fff;font-weight:600;font-size:1.02rem;display:flex;align-items:center;gap:.55em;white-space:nowrap;}
#fps-areas .fps-cityrow .fps-pipdot{width:8px;height:8px;border-radius:50%;background:#5d616b;flex:none;transition:background .16s ease,box-shadow .16s ease;}
#fps-areas .fps-cityrow:hover .fps-pipdot,#fps-areas .fps-cityrow.is-on .fps-pipdot{background:var(--fps-amber);box-shadow:0 0 0 4px rgba(250,181,40,.2);}
#fps-areas .fps-cityrow em{font-style:normal;font-size:.83rem;color:#8d939d;display:block;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#fps-areas .fps-cityrow .fps-dist{font-size:.82rem;color:#8d939d;white-space:nowrap;font-variant-numeric:tabular-nums;}
#fps-areas .fps-cityrow.is-hq strong{color:var(--fps-amber);}
#fps-areas .fps-cityrow.is-hq .fps-pipdot{background:var(--fps-amber);}
#fps-areas .fps-note{font-size:.79rem;color:#7e848e;margin-top:18px;}

/* ---------- the maps ----------
   <use> clones geometry into a shadow tree that normal CSS selectors
   cannot reach, so the shapes are painted with presentation attributes
   that read custom properties. Those DO inherit through the boundary. */
#fps-areas .fps-map{width:100%;height:auto;display:block;border-radius:14px;overflow:hidden;
  --geo-water:#0f1013;--geo-land:#303239;--geo-stroke:#565962;--geo-border:#5f626b;--geo-sw:2;--geo-dot:#9096a1;}
#fps-areas .fps-mini{
  --geo-water:#dde5ee;--geo-land:#ffffff;--geo-stroke:#b4bfcb;--geo-border:#b4bfcb;--geo-sw:2.4;--geo-dot:#a7b1bd;}

#fps-areas .fps-map .fps-riverlbl{fill:#82868f;font-size:14px;font-style:italic;letter-spacing:.04em;}
#fps-areas .fps-map .fps-link{stroke:rgba(250,181,40,.22);stroke-width:1.6;stroke-dasharray:4 7;
  transition:stroke .2s ease,stroke-width .2s ease;}
#fps-areas .fps-map .fps-pin{cursor:pointer;}
#fps-areas .fps-map .fps-pin circle.hit{fill:transparent;pointer-events:all;}
#fps-areas .fps-map use{pointer-events:none;}
#fps-areas .fps-map .fps-pin circle.dot{fill:#9096a1;transition:fill .18s ease,r .18s ease;}
#fps-areas .fps-map .fps-pin text{fill:#c2c7d0;font-size:15px;font-weight:500;transition:fill .18s ease;
  paint-order:stroke;stroke:#0f1013;stroke-width:4.5px;stroke-linejoin:round;}
#fps-areas .fps-map .fps-pin:hover circle.dot,#fps-areas .fps-map .fps-pin.is-on circle.dot{fill:var(--fps-amber);r:8;}
#fps-areas .fps-map .fps-pin:hover text,#fps-areas .fps-map .fps-pin.is-on text{fill:#fff;}
#fps-areas .fps-map .fps-pin:hover .fps-link,#fps-areas .fps-map .fps-pin.is-on .fps-link{stroke:rgba(250,181,40,.85);stroke-width:2.4;}
#fps-areas .fps-map .fps-hq circle.dot{fill:var(--fps-amber);}
#fps-areas .fps-map .fps-hq text{fill:var(--fps-amber);font-weight:700;}
#fps-areas .fps-map .fps-hqbadge{fill:#0f1013;stroke:var(--fps-amber);stroke-width:1.4;}
#fps-areas .fps-map .fps-pulse{fill:none;stroke:var(--fps-amber);stroke-width:2;animation:fps-pulse 2.8s ease-out infinite;}
@keyframes fps-pulse{0%{r:9;opacity:.85}70%{r:26;opacity:0}100%{r:26;opacity:0}}

#fps-areas .fps-mini .fps-mlink{stroke:#c98f13;stroke-width:3;stroke-dasharray:7 8;opacity:.85;fill:none;}
#fps-areas .fps-mini .fps-mhq{fill:#1a1a1a;}
#fps-areas .fps-mini .fps-mact{fill:var(--fps-amber);}
#fps-areas .fps-mini .fps-mhalo{fill:rgba(250,181,40,.3);transition:fill .22s ease;}
#fps-areas .fps-card:hover .fps-mini .fps-mhalo{fill:rgba(250,181,40,.45);}

/* ---------- 3. city cards ---------- */
#fps-areas .fps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px;margin-top:clamp(26px,3vw,40px);}
#fps-areas .fps-card{background:#fff;border:1px solid var(--fps-line);border-radius:var(--fps-r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--fps-shadow);scroll-margin-top:110px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
#fps-areas .fps-card:hover{transform:translateY(-4px);box-shadow:var(--fps-shadow-h);border-color:#ded9d0;}
#fps-areas .fps-card.is-flash{border-color:var(--fps-amber);box-shadow:0 0 0 4px rgba(250,181,40,.22),var(--fps-shadow-h);}
#fps-areas .fps-thumb{position:relative;background:#dde5ee;border-bottom:1px solid var(--fps-line);}
#fps-areas .fps-thumb .fps-mini{width:100%;height:auto;display:block;}
#fps-areas .fps-thumb figcaption{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.94);
  border:1px solid var(--fps-line);border-radius:999px;padding:.28em .8em;font-size:.72rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--fps-ink);}
#fps-areas .fps-cbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
#fps-areas .fps-cbody h3{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;}
#fps-areas .fps-cbody p{font-size:.95rem;margin-top:.7rem;}
#fps-areas .fps-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.85rem;}
#fps-areas .fps-chip{font-size:.73rem;font-weight:600;letter-spacing:.03em;padding:.32em .72em;border-radius:999px;
  background:var(--fps-cream);border:1px solid var(--fps-line);color:#5d6470;}
#fps-areas .fps-chip--amber{background:var(--fps-amber-w);border-color:#f3dfae;color:#8a6410;}
#fps-areas .fps-clink{margin-top:auto;padding-top:1.05rem;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.93rem;color:var(--fps-ink);}
#fps-areas .fps-clink span{border-bottom:2px solid var(--fps-amber);padding-bottom:1px;}
#fps-areas .fps-clink svg{width:15px;height:15px;transition:transform .2s ease;}
#fps-areas .fps-card:hover .fps-clink svg{transform:translateX(4px);}
#fps-areas .fps-clink.is-plain{color:var(--fps-muted);font-weight:500;font-size:.88rem;}
#fps-areas .fps-clink.is-plain span{border-bottom:0;}

/* featured Surrey card */
#fps-areas .fps-card--hq{grid-column:span 2;flex-direction:row;background:linear-gradient(180deg,#fffdf8,#fff);border-color:#f0e2bf;}
#fps-areas .fps-card--hq .fps-thumb{border-bottom:0;border-right:1px solid var(--fps-line);flex:0 0 46%;
  display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(155deg,#fdf4e3 0%,#eef2f7 70%);}
#fps-areas .fps-card--hq .fps-mini{width:100%;height:auto;border-radius:14px;border:1px solid #dbe1e8;
  box-shadow:0 10px 24px -14px rgba(20,24,30,.45);overflow:hidden;}
#fps-areas .fps-card--hq .fps-thumb figcaption{right:24px;top:24px;}
#fps-areas .fps-card--hq .fps-cbody{padding:26px 26px 28px;}
#fps-areas .fps-badge{display:inline-flex;align-items:center;gap:.4em;background:var(--fps-amber);color:#1a1a1a;
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;}
#fps-areas .fps-meta{display:grid;gap:.55rem;margin-top:1.1rem;font-size:.92rem;}
#fps-areas .fps-meta div{display:flex;gap:.6em;align-items:flex-start;}
#fps-areas .fps-meta svg{width:17px;height:17px;color:var(--fps-amber-d);flex:none;margin-top:3px;}
#fps-areas .fps-meta b{color:var(--fps-ink);font-weight:600;}

/* ---------- 4. process ---------- */
#fps-areas .fps-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:clamp(26px,3vw,40px);}
#fps-areas .fps-step{background:#fff;border:1px solid var(--fps-line);border-radius:var(--fps-r);padding:26px 22px 24px;position:relative;}
#fps-areas .fps-step .fps-num{width:38px;height:38px;border-radius:50%;background:var(--fps-ink);color:var(--fps-amber);
  display:grid;place-items:center;font-weight:700;font-size:.95rem;margin-bottom:1rem;}
#fps-areas .fps-step h3{font-size:1.1rem;}
#fps-areas .fps-step p{font-size:.93rem;margin-top:.5rem;}
#fps-areas .fps-step::after{content:"";position:absolute;top:44px;right:-13px;width:22px;height:2px;
  background:repeating-linear-gradient(90deg,var(--fps-line) 0 5px,transparent 5px 10px);}
#fps-areas .fps-steps>.fps-step:last-child::after{display:none;}

/* ---------- 5. services ---------- */
#fps-areas .fps-svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:18px;margin-top:clamp(26px,3vw,40px);}
#fps-areas .fps-svc{background:#fff;border:1px solid var(--fps-line);border-radius:var(--fps-r);padding:24px 22px;display:block;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
#fps-areas .fps-svc:hover{transform:translateY(-4px);box-shadow:var(--fps-shadow-h);border-color:#ede0c0;}
#fps-areas .fps-ico{width:46px;height:46px;border-radius:13px;background:var(--fps-amber-w);border:1px solid #f4e3b8;
  display:grid;place-items:center;color:var(--fps-amber-d);margin-bottom:1rem;}
#fps-areas .fps-ico svg{width:22px;height:22px;}
#fps-areas .fps-svc h3{font-size:1.08rem;}
#fps-areas .fps-svc p{font-size:.93rem;margin-top:.45rem;}

/* ---------- 6. who we help ---------- */
#fps-areas .fps-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:12px;margin-top:clamp(24px,3vw,34px);}
#fps-areas .fps-whoitem{display:flex;align-items:center;gap:.8em;background:#fff;border:1px solid var(--fps-line);
  border-radius:14px;padding:14px 16px;font-weight:600;color:var(--fps-ink);font-size:.97rem;line-height:1.3;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;}
#fps-areas .fps-whoitem:hover{border-color:var(--fps-amber);transform:translateY(-3px);background:#fffdf6;}
#fps-areas .fps-whoitem svg{width:19px;height:19px;color:var(--fps-amber-d);flex:none;}
#fps-areas .fps-whoitem .fps-arrow{margin-left:auto;width:15px;height:15px;color:#c9ccd2;transition:transform .2s ease,color .2s ease;}
#fps-areas .fps-whoitem:hover .fps-arrow{transform:translateX(3px);color:var(--fps-amber-d);}

/* ---------- 7. FAQ ---------- */
#fps-areas .fps-faq{max-width:820px;margin:clamp(24px,3vw,36px) auto 0;}
#fps-areas .fps-q{border-bottom:1px solid var(--fps-line);}
#fps-areas .fps-q:first-child{border-top:1px solid var(--fps-line);}
#fps-areas .fps-qbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2em;
  background:none;border:0;padding:19px 4px;cursor:pointer;text-align:left;font-family:inherit;
  font-size:1.05rem;font-weight:600;color:var(--fps-ink);line-height:1.4;}
#fps-areas .fps-qbtn .fps-pm{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--fps-line);
  display:grid;place-items:center;color:var(--fps-ink);transition:background .2s ease,border-color .2s ease,transform .25s ease;}
#fps-areas .fps-qbtn .fps-pm svg{width:13px;height:13px;}
#fps-areas .fps-q.is-open .fps-pm{background:var(--fps-amber);border-color:var(--fps-amber);transform:rotate(180deg);}
#fps-areas .fps-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;}
#fps-areas .fps-q.is-open .fps-a{grid-template-rows:1fr;}
#fps-areas .fps-a>div{overflow:hidden;}
#fps-areas .fps-a p{padding:0 4px 20px;font-size:.98rem;max-width:70ch;}

/* ---------- 8. closing CTA ---------- */
#fps-areas .fps-cta{border-radius:26px;background:var(--fps-dark);color:#d7d9dd;position:relative;overflow:hidden;
  padding:clamp(32px,5vw,60px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  min-width:0;max-width:100%;}
#fps-areas .fps-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 88% 20%,rgba(250,181,40,.18),transparent 70%);}
#fps-areas .fps-cta h2{color:#fff;position:relative;}
#fps-areas .fps-cta p{margin-top:.85rem;max-width:52ch;position:relative;color:#cfd2d8;}
#fps-areas .fps-cta .fps-actions{margin-top:0;position:relative;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #fps-areas .fps-intro{grid-template-columns:1fr;}
  #fps-areas .fps-citylist{grid-template-columns:1fr;}
}
@media (max-width:760px){
  #fps-areas{font-size:16px;}
  #fps-areas .fps-grid{grid-template-columns:1fr;}
  #fps-areas .fps-card--hq{grid-column:1/-1;flex-direction:column;}
  #fps-areas .fps-card--hq .fps-thumb{border-right:0;border-bottom:1px solid var(--fps-line);flex:none;}
  #fps-areas .fps-cta{grid-template-columns:1fr;}
  #fps-areas .fps-step::after{display:none;}
  #fps-areas .fps-stats{grid-template-columns:1fr 1fr;}
  #fps-areas .fps-svcs{grid-template-columns:1fr 1fr;}
  #fps-areas .fps-who{grid-template-columns:1fr;}
  #fps-areas .fps-panel,#fps-areas .fps-cta{border-radius:20px;}
  #fps-areas .fps-legend{font-size:.86rem;}
  #fps-areas .fps-cityrow{grid-template-columns:1fr;gap:2px;}
  #fps-areas .fps-cityrow strong{white-space:normal;}
  #fps-areas .fps-cityrow em{white-space:normal;padding-left:1.35em;}
  #fps-areas .fps-cityrow .fps-dist{white-space:normal;padding-left:1.35em;}
  /* the map keeps its viewBox, so label sizes are bumped to stay legible */
  #fps-areas .fps-map .fps-pin text{font-size:30px;stroke-width:7px;}
  #fps-areas .fps-map .fps-hq text{font-size:30px;}
  #fps-areas .fps-map .fps-hq text+text{font-size:22px;}
  #fps-areas .fps-map .fps-riverlbl{font-size:24px;}
  #fps-areas .fps-map .fps-pin circle.dot{r:11;}
  #fps-areas .fps-map .fps-pin:hover circle.dot,#fps-areas .fps-map .fps-pin.is-on circle.dot{r:13;}
}
@media (max-width:620px){
  #fps-areas .fps-svcs{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  #fps-areas *{animation:none!important;transition:none!important;}
}