/* Areas We Cover hub (areas-we-cover.php) */

/* local-number colour key, shared by chips, cards, the map and the numbers band */
.chip__dot { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.chip__dot--all { background: conic-gradient(var(--brand) 0 120deg, var(--ink) 120deg 240deg, #fff 240deg); box-shadow: inset 0 0 0 1.5px rgba(12, 42, 32, .3); }
.chip__dot--a { background: var(--brand); }
.chip__dot--b { background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.chip__dot--c { background: #fff; box-shadow: inset 0 0 0 3.5px var(--trail); }

/* ---------- opener ---------- */
.aop { position: relative; background: var(--trail); color: rgba(255, 255, 255, .9); overflow: clip; min-height: min(58svh, 640px); display: grid; align-items: end; padding: calc(var(--tb) + var(--hh) + clamp(18px, 3vh, 40px)) 0 clamp(26px, 4vh, 48px); }
.aop__img { position: absolute; inset: 0; overflow: clip; }
.aop__img img { position: absolute; top: -8%; left: -5%; width: 110%; max-width: none; height: 116%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity; }
.aop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 42, 32, .5), rgba(12, 42, 32, 0) 45%, rgba(12, 42, 32, .55)); }
.aop .contours { opacity: .35; filter: invert(1) brightness(2); z-index: 1; }
.aop__in { position: relative; z-index: 2; display: grid; gap: 20px; }
.aop__title { font: 800 clamp(2.4rem, 4.6vw, 4rem)/.98 var(--display); font-stretch: 74%; letter-spacing: -.01em; color: var(--white); }
.aop__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 18px clamp(30px, 5vw, 80px); align-items: end; }
.aop__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }
.finder { display: grid; gap: 8px; }
.finder__lab { font-weight: 700; color: var(--white); }
.finder__box { position: relative; }
.finder__box svg { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 22px; fill: none; stroke: var(--trail); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.finder__box input { width: 100%; height: 58px; padding: 0 22px 0 54px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 600 1.0625rem var(--body); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .45); }
.finder__box input::placeholder { color: #6b7d73; font-weight: 400; }
.finder__box input:focus { outline: none; box-shadow: 0 0 0 4px var(--brand-hi), 0 20px 40px -20px rgba(0, 0, 0, .45); }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); color: var(--white); font-weight: 700; transition: color .35s, background .35s; }
.chip b { font-weight: 800; color: #c9f2a8; transition: color .35s; }
.chip:hover { background: rgba(255, 255, 255, .18); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--white); transition: color .35s, background 0s .5s; }
.chip[aria-pressed="true"] b { color: var(--trail); }
.chips__pill { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--white); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4); transition: transform .5s var(--ease), width .5s var(--ease); }
html:not(.js) .chips__pill { display: none; }
html:not(.js) .chip[aria-pressed="true"] { background: var(--white); }
.aop__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-weight: 600; }
.aop__count strong { font: 800 1.6rem/1 var(--display); font-stretch: 80%; color: var(--white); font-variant-numeric: tabular-nums; }
.aop__count a { display: inline-flex; align-items: center; min-height: 44px; color: #c9f2a8; font-weight: 700; }
.aop .crumbs--light a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the map and the town grid ---------- */
.atowns { position: relative; background: var(--white); padding: clamp(64px, 7vw, 110px) 0; }
.atowns__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); align-items: start; }
.atowns__mapcol { position: sticky; top: calc(var(--tb) + var(--hh) + 20px); display: grid; gap: 14px; }
.amap { position: relative; width: 100%; max-height: calc(100svh - var(--tb) - var(--hh) - 110px); aspect-ratio: 67 / 52; border-radius: var(--dome); overflow: clip; background: #dfe6dc; box-shadow: 0 40px 80px -46px rgba(12, 42, 32, .55), 0 0 0 1px var(--line); }
.amap__key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .92rem; font-weight: 600; color: var(--muted); }
.amap__key li { display: inline-flex; align-items: center; gap: 8px; }
.amap .tmap__dot { cursor: pointer; }
.amap .tmap__dot circle { r: 1.08px; stroke: #fff; stroke-width: .28; transition: r .35s var(--ease), opacity .35s, fill .3s; }
.amap .tmap__dot[data-tel="a"] circle { fill: var(--brand); }
.amap .tmap__dot[data-tel="b"] circle { fill: var(--ink); }
.amap .tmap__dot[data-tel="c"] circle { fill: #fff; stroke: var(--trail); stroke-width: .52; }
.amap .tmap__dot.is-dim circle { opacity: .18; }
.amap .tmap__dot.is-hot circle, .amap .tmap__dot.is-lit circle { r: 1.57px; }
.amap .tmap__dot.is-ping circle { animation: amap-ping 1.2s var(--ease); }
@keyframes amap-ping { 40% { r: 2.35px; stroke-width: .87; } }
.amap .tmap--all .tmap__dot text { opacity: 0; font: 800 2.7px var(--body); fill: var(--ink); stroke: #fbfcf9; stroke-width: .78px; transform: translate(.78px, .35px); transition: opacity .3s; pointer-events: none; }
.amap .tmap__dot.is-lit text, .amap .tmap__dot.is-hot text { opacity: 1; }
.amap .tmap__dot.is-hot text { fill: var(--trail); }
.atowns__list { display: grid; gap: 14px; }
.atowns__shown { font-weight: 600; color: var(--muted); }
.tgrid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.tcard a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 64px; padding: 10px 12px 10px 14px; border-radius: 16px; background: var(--chalk); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.tcard .tcard__dot { grid-row: 1 / 3; width: 12px; height: 12px; }
.tcard strong { font: 800 1.2rem/1.1 var(--display); font-stretch: 82%; overflow-wrap: anywhere; }
.tcard__tel { grid-column: 2; font-size: .9rem; font-weight: 600; color: var(--muted); transition: color .3s; }
.tcard__go { grid-row: 1 / 3; grid-column: 3; width: 20px; fill: none; stroke: var(--brand); stroke-width: 2.2; transition: transform .35s var(--ease); }
.tcard a:hover, .tcard.is-hot a, .tcard a:focus-visible { background: var(--ink); color: var(--white); box-shadow: none; }
.tcard a:hover .tcard__tel, .tcard.is-hot .tcard__tel, .tcard a:focus-visible .tcard__tel { color: rgba(255, 255, 255, .75); }
.tcard a:hover .tcard__go, .tcard.is-hot .tcard__go { transform: translateX(4px); }
.tcard.is-out { display: none; }
.tgrid__none { padding: 18px 20px; border-radius: 16px; background: var(--chalk); font-weight: 600; }
.tgrid__none[hidden] { display: none; }
.tgrid__none a, .tgrid__none button { color: var(--trail); font-weight: 800; text-decoration: underline; }

/* ---------- the three local numbers ---------- */
.lnum { position: relative; background: var(--ink); color: rgba(255, 255, 255, .86); padding: clamp(52px, 5vw, 84px) 0; overflow: clip; }
.lnum .head { margin-bottom: clamp(26px, 3vw, 44px); }
.lnum__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 70% at var(--gx, 20%) 0%, rgba(31, 107, 83, .65), transparent 70%), radial-gradient(ellipse 40% 60% at 100% 100%, rgba(31, 107, 83, .4), transparent 70%); }
.lnum .wrap { position: relative; }
.lnum .lede { color: rgba(255, 255, 255, .82); }
.lnum__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-items: stretch; }
.lnum__col { position: relative; overflow: clip; display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 34px) clamp(76px, 7vw, 110px); border-radius: var(--dome); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lnum__col::after { content: attr(data-code); position: absolute; right: 18px; bottom: -.12em; font: 800 clamp(4.4rem, 7.5vw, 7.2rem)/1 var(--display); font-stretch: 78%; color: transparent; -webkit-text-stroke: 1.5px rgba(108, 196, 63, .32); pointer-events: none; translate: 0 var(--cy, 0px); }
.lnum__area { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--white); }
.lnum__num { display: inline-flex; align-items: center; gap: 12px; font: 800 clamp(1.9rem, 2.6vw, 2.6rem)/1.05 var(--display); font-stretch: 82%; color: var(--white); text-decoration: none; white-space: nowrap; }
.lnum__num svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--brand); fill: var(--ink); }
.lnum__num:hover { color: var(--brand-hi); }
.lnum__n { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-weight: 600; }
.lnum__n strong { font: 800 1.5rem/1 var(--display); font-stretch: 80%; color: var(--brand-hi); }
.lnum__towns { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.lnum__towns li:not(:last-child)::after { content: ","; margin-right: .4em; }

/* ---------- services ---------- */
.asvc { position: relative; background: var(--chalk); padding: clamp(52px, 5vw, 84px) 0; overflow: clip; }
.asvc .wrap { position: relative; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .aop__row { grid-template-columns: minmax(0, 1fr); }
  .atowns__grid { grid-template-columns: minmax(0, 1fr); }
  .atowns__mapcol { position: relative; top: 0; }
  .amap { max-height: none; }
  .amap .tmap--all .tmap__dot text { font-size: 4.18px; stroke-width: 1.04px; }
  .amap .tmap__dot circle { r: 1.57px; }
  .amap .tmap__dot.is-hot circle, .amap .tmap__dot.is-lit circle { r: 2.17px; }
  .lnum__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .aop__title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .chip { flex: 1 1 100%; justify-content: flex-start; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tcard a { min-height: 58px; grid-template-columns: auto minmax(0, 1fr); padding: 9px 10px; gap: 0 8px; }
  .tcard strong { font-size: 1.05rem; }
  .tcard__go { display: none; }
}
html:not(.js) [data-finder], html:not(.js) [data-chips] { display: none; }