/* Town pages (includes/location.php) and Areas I cover (areas.php): the flying map opener, Paul's intro, the
   district sweep, services, reviews and the closing band. Built on site.css tokens; .facts comes from pages.css. */

/* heading fallback measured against Mona Sans 800 at 112% width (sized from measured widths), so the
   headings wrap onto the same lines before and after the web font arrives */
@font-face { font-family: 'MFLoc'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 500 900; size-adjust: 110.2%; ascent-override: 109%; descent-override: 32%; line-gap-override: 0%; }
.page-loc h1, .page-loc h2, .page-areas h1, .page-areas h2 { font-family: 'Mona Sans', 'MFLoc', Arial, sans-serif; }

/* ---------- the area map drawing (shared) ---------- */
.amap { display: block; width: 100%; height: 100%; overflow: hidden; }
/* pins and labels outside a town's zoomed frame show only while the map flies in */
.amap .is-out { display: none; }
.amap.is-flying .is-out { display: inline; }
.amap__contour path { fill: none; stroke: rgba(176,192,207,.13); stroke-width: 1.2; }
.amap__area { opacity: 0; transition: opacity .8s var(--ease); }
.amap__route { fill: none; stroke: var(--sage-soft); stroke-width: 2; stroke-dasharray: 5 7; opacity: .6; transition: opacity .6s var(--ease), stroke .6s; }
.amap__route.is-hl { stroke: var(--signal); stroke-width: 4; stroke-dasharray: none; stroke-linecap: round; opacity: 1; }
.amap__pin circle { fill: var(--mist); transition: fill .5s; }
.amap__pin text { fill: #E8EFEC; font-family: var(--display); font-weight: 600; font-size: 15px; transition: fill .5s, opacity .5s; }
.amap__pin.is-big text { font-weight: 800; font-size: 19px; fill: #fff; }
.amap__pin.is-big circle { fill: #DCE6E3; }
.amap__pin.is-hl circle { fill: var(--signal); }
.amap__pin.is-hl text { font-size: 24px; font-weight: 800; fill: var(--signal); paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; }
.amap__pin, .amap__home { transition: opacity .6s var(--ease); }
.amap__home circle { fill: var(--signal); }
.amap__home text { fill: var(--signal); font-weight: 800; font-size: 17px; font-family: var(--display); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; }
.amap__ring { fill: none !important; stroke: var(--signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
.amap__van { fill: #fff; stroke: var(--signal); stroke-width: 3; opacity: 0; pointer-events: none; }

/* ---------- LOCATION OPENER: map card that flies to the town ---------- */
.lo-open { padding-top: calc(var(--hdr) + clamp(20px, 3.6vh, 44px)); padding-bottom: clamp(22px, 3vh, 38px); }
.lo-open::before { content: ''; position: absolute; inset: -240px 0 0; z-index: -1; background: var(--dots); opacity: .5; animation: dotsDrift 18s linear infinite; pointer-events: none; }
.lo-open::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lanes); opacity: .9; pointer-events: none; }
.lo-open__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lo-open h1 { font-size: clamp(2.3rem, 3.9vw, 3.9rem); margin-bottom: .34em; }
.lo-open .lede { color: var(--muted); margin-bottom: 20px; }
.lo-fact { position: relative; display: grid; gap: 2px; margin: 0 0 24px; padding: 14px 20px 15px 24px; background: #fff; width: fit-content; max-width: 100%; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 6px 0 0 var(--signal); }
.lo-fact b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.15; color: var(--ink); }
.lo-fact span { color: var(--muted); font-size: .98rem; }
.lo-fact::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(244,196,48,.22) 50%, transparent 70%); background-size: 260% 100%; animation: sheen 5.5s ease-in-out infinite; pointer-events: none; }

.lo-stage { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: clamp(10px, 1vw, 16px); align-items: stretch; }
.lo-map { position: relative; display: flex; flex-direction: column; background: var(--ink); isolation: isolate; }
.lo-map::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(../img/carpet-pile-top-down-soiled-1000.webp) center / 600px auto; opacity: .07; mix-blend-mode: screen; animation: pileDrift 40s linear infinite; }
.lo-map__view { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.lo-map__view .amap { position: absolute; inset: 0; }
.lo-map .amap__pin:not(.is-hl) { opacity: .5; }
.lo-map[data-area="ST"] .amap__area[data-area="ST"], .lo-map[data-area="TF"] .amap__area[data-area="TF"], .lo-map[data-area="WV"] .amap__area[data-area="WV"] { opacity: 1; }
/* the route label is a bar across the top of the card, never over the map itself */
.lo-map__tag { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 30px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: .95rem; line-height: 1.3; }
.lo-map__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(244,196,48,.18); animation: pulse 1.8s ease-in-out infinite; }
.lo-photo { position: relative; margin: 0; display: flex; }
.lo-photo .frame { flex: 1; min-height: 100%; }
.lo-photo .frame > img { animation-duration: 7s; }
.lo-photo figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; padding: 5px 10px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: .875rem; line-height: 1.3; }
.lo-facts { margin-top: clamp(16px, 2.6vh, 30px); }
.lo-facts li { padding-top: 12px; }
.lo-facts b span { font: inherit; color: inherit; }

/* ---------- PAUL ---------- */
.lo-paul__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.lo-paul { padding-block: clamp(56px, 8vh, 92px); }
.lo-paul__media { position: relative; height: min(62vh, 560px); }
.lo-paul__van { position: absolute; right: 0; top: 0; width: 80%; height: 70%; }
.lo-paul__van > img { object-position: 50% 60%; }
.lo-paul__face { position: absolute; left: 0; bottom: 0; width: 37%; aspect-ratio: 4 / 5; height: auto; z-index: 2; }
.lo-paul__face > img { object-position: 50% 30%; animation: none; }
/* Max beside his dad, a step higher */
.lo-paul__face--max { left: calc(37% + 32px); bottom: 7%; width: 30%; }
.lo-paul__name { position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff; padding: 6px 12px 6px 10px; font-family: var(--display); font-weight: 700; font-stretch: 108%; font-size: .9rem; line-height: 1.2; }
.lo-paul__media::before { content: ''; position: absolute; z-index: 1; left: 18px; bottom: -18px; width: 37%; aspect-ratio: 4 / 5; background: var(--signal); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); animation: bob 4.6s ease-in-out infinite alternate; }
.lo-paul__badge { position: absolute; z-index: 3; left: 0; top: 8%; margin: 0; background: var(--ink); color: #fff; padding: 12px 18px; display: grid; font-family: var(--display); line-height: 1.25; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.lo-paul__badge b { font-weight: 800; font-stretch: 110%; font-size: 1.08rem; }
.lo-paul__badge span { font-weight: 500; font-size: .88rem; color: var(--mist); }
.lo-paul h2 { margin-bottom: .45em; }
.lo-paul__copy .lede { color: var(--text); }
.lo-paul__copy p { color: var(--muted); }
.lo-paul__copy .lede { color: var(--text); }
.lo-promise { position: relative; margin: 4px 0 16px; padding: 18px 22px 20px 26px; background: var(--linen); overflow: hidden; }
.lo-promise::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--signal); transform-origin: top; animation: promiseBar 3.4s ease-in-out infinite alternate; }
@keyframes promiseBar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.lo-promise h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); color: var(--ink); margin-bottom: 6px; }
.lo-promise p { margin: 0; color: var(--text); }
.lo-paul__more a { color: var(--ink); font-weight: 700; }
.lo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--line); }
.lo-stats > div { padding: 16px 16px 0 0; }
.lo-stats > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.lo-stats dt { font-size: .92rem; color: var(--muted); }
.lo-stats dd { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lo-stars { display: inline-flex; gap: 1px; color: var(--signal); }
.lo-stars svg { width: 15px; height: 15px; }

/* ---------- DISTRICT SWEEP: a clean lane sweeps the postcode chips clean ---------- */
.lo-sweep { padding-block: clamp(60px, 8vh, 100px); }
.lo-sweep__head { margin-bottom: clamp(20px, 3vh, 32px); }
.lo-count { margin-top: 14px !important; font-family: var(--display); font-weight: 700; font-stretch: 106%; color: #fff !important; font-size: 1.08rem; }
.lo-count__n { display: inline-block; min-width: 1.4em; font-weight: 800; font-stretch: 118%; font-size: 2.1rem; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; vertical-align: -.12em; }
.dsw { position: relative; isolation: isolate; padding: clamp(10px, 1.2vw, 16px); background: #5a5146 url(../img/carpet-pile-top-down-soiled-1600.webp) center / cover; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); --mx: 50%; --my: 50%; }
.dsw__clean { position: absolute; inset: 0; z-index: 0; background: #d9d4c9 url(../img/carpet-pile-top-down-clean-1600.webp) center / cover; }
.dsw__clean::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); background-size: 260% 100%; background-position: 160% 0; opacity: 0; }
.dsw.is-done .dsw__clean::after { opacity: 1; animation: dswSheen 4.8s ease-in-out infinite; }
@keyframes dswSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.dsw::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 70%); }
.dsw__grid { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: clamp(8px, .8vw, 12px); }
.dc { position: relative; min-height: 96px; padding: 12px 14px 14px; background: rgba(255,255,255,.93); color: var(--ink); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .55s var(--ease), color .55s, transform .45s var(--ease); }
.dc b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.1; transition: color .55s; }
.dc span { display: block; margin-top: 5px; font-size: .875rem; line-height: 1.35; color: var(--muted); transition: color .55s; }
.dc { box-shadow: inset 0 4px 0 var(--sage-soft); }
.dc.is-own { background: var(--signal); box-shadow: inset 0 4px 0 var(--signal-deep); }
.dsw.is-live .dc:not(.is-clean) { box-shadow: none; }
.dc.is-own span { color: #4b4220; }
.dc.is-own::after { content: ''; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: pulse 2s ease-in-out infinite; }
.dc:hover { transform: translateY(-4px); }
/* while the sweep runs, chips the lane has not reached look like soiled pile */
.dsw.is-live .dc:not(.is-clean) { background: rgba(36,30,24,.72); color: rgba(255,255,255,.86); transform: scale(.97); }
.dsw.is-live .dc:not(.is-clean) span { color: rgba(255,255,255,.78); }
.dsw.is-live .dc:not(.is-clean)::after { opacity: 0; }
.dsw__wand { position: absolute; z-index: 3; left: 0; top: 0; width: 46px; margin-left: -34px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55) 70%, rgba(244,196,48,.95) 72%, rgba(244,196,48,.95) 80%, rgba(255,255,255,0) 81%); clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%, 38% 50%); }
.lo-sweep__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: clamp(14px, 2.4vh, 24px); }
.lo-key { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: #C5D3CF; font-size: .98rem; }
.lo-key__own, .lo-key__all { width: 16px; height: 16px; background: var(--signal); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.lo-key__i { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; }
.lo-key__own, .lo-key__all { flex: none; }
.lo-key__all { background: #fff; }
.lo-card::after { background: linear-gradient(180deg, rgba(15,35,33,.05) 25%, rgba(15,35,33,.94) 88%); }
.lo-sweep .tlink { color: #fff; }
.lo-sweep .tlink:hover { color: var(--signal); }
/* the pinned version (desktop, when it fits one screen) */
.lo-sweep.is-pinned { height: 100svh; padding: calc(var(--hdr) + clamp(14px, 3vh, 34px)) 0 clamp(14px, 3vh, 30px); display: flex; flex-direction: column; justify-content: center; }
.pin-spacer:has(> .lo-sweep) { background: var(--ink) url(../img/carpet-pile-top-down-soiled-1000.webp) center / 700px auto; background-blend-mode: soft-light; }

/* ---------- SERVICES IN TOWN (sage band) ---------- */
.lo-svc .sec__head p { color: #E6F1EE; }
.lo-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); perspective: 1200px; }
.lo-card { height: min(46vh, 420px); min-height: 320px; transform-style: preserve-3d; will-change: transform; }
.lo-card h3 { font-size: clamp(1.35rem, 1.8vw, 1.8rem); }
.lo-extras { list-style: none; margin: clamp(18px, 3vh, 28px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #fff; font-family: var(--display); font-weight: 600; font-stretch: 104%; }
.lo-extras li { display: inline-flex; align-items: center; gap: 10px; }
.lo-extras li::before { content: ''; width: 18px; height: 10px; border-left: 3px solid var(--signal); border-bottom: 3px solid var(--signal); transform: rotate(-45deg) translate(2px, -2px); }

/* ---------- REVIEWS (location) ---------- */
.lo-rev .rev__note { margin-top: 22px; }

/* ---------- closing band: onward links (as on the service pages) ---------- */
.onward { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.onward__h { width: 100%; font-family: var(--display); font-weight: 700; color: #D7E8E3; font-size: .95rem; }
.onward__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: .95rem; transition: background .3s, color .3s; }
.onward__a svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.onward__a:hover { background: #fff; color: var(--ink); }
.onward__a:hover svg { transform: translateX(3px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dsw__grid { grid-template-columns: repeat(min(var(--cols, 7), 5), minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .lo-open__grid, .lo-paul__grid { grid-template-columns: 1fr; }
  .lo-stage { grid-template-columns: 1fr; }
  .lo-photo { order: 2; height: clamp(150px, 30vw, 240px); }
  .lo-paul__media { height: min(60vh, 480px); }
  .lo-svc__grid { grid-template-columns: 1fr; }
  .lo-card { height: 300px; min-height: 0; }
  .dsw__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lo-map__tag { font-size: .875rem; padding: 10px 14px 10px 26px; }
  .lo-stats > div + div { padding-left: 10px; }
  .lo-stats dd { font-size: 1.7rem; flex-wrap: wrap; gap: 4px; }
  .lo-stars svg { width: 12px; height: 12px; }
  .dsw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc { min-height: 0; padding: 10px 12px 12px; }
  .dc span { font-size: .875rem; }
}

/* the closing band keeps a drift of the logo's droplets over its photo */
.lo-cta::before { content: ''; position: absolute; inset: -240px 0 0; z-index: 0; background: var(--dots); opacity: .2; filter: brightness(2.2); animation: dotsDrift 12s linear infinite; pointer-events: none; }
.lo-cta .cta__grid { position: relative; z-index: 1; }

/* ================= AREAS I COVER ================= */
/* opener: the map is the opener */
.ar-open { padding-top: calc(var(--hdr) + clamp(20px, 3.4vh, 40px)); padding-bottom: clamp(30px, 4.4vh, 52px); }
.ar-open__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ar-open h1 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); margin-bottom: .34em; }
.ar-open .lede { color: #DCE6E3; }
.ar-pc { margin-top: 20px; }
.ar-open__ctas { margin-top: 20px; }
.ar-map { position: relative; }
.ar-map__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ar-map__btn { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: #DCE6E3; font-family: var(--display); font-weight: 600; font-stretch: 104%; font-size: .95rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ar-map__btn { font-family: 'Mona Sans', 'MF104', Arial, sans-serif; }
.ar-map__btn::before { content: attr(data-code); font-weight: 800; color: var(--signal); margin-right: 8px; transition: color .3s; }
.ar-map__btn:hover { border-color: #fff; color: #fff; }
.ar-map__btn[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.ar-map__btn[aria-pressed="true"]::before { color: var(--ink); }
.ar-map__card { position: relative; aspect-ratio: 5 / 4; width: min(100%, calc(min(60vh, 560px) * 1.25)); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.ar-map__card .amap { position: absolute; inset: 0; }
.ar-map__card.is-drawn .amap__route { animation: routeMarch 2.6s linear infinite; }
.no-js .ar-map__card .amap__route { animation: routeMarch 2.6s linear infinite; }
@keyframes routeMarch { to { stroke-dashoffset: -48; } }
.ar-map__card .amap [data-area] { transition: opacity .5s var(--ease); }
.amap[data-on]:not([data-on="all"]) .amap__route:not(.is-on), .amap[data-on]:not([data-on="all"]) .amap__pin:not(.is-on) { opacity: .2; }
.amap__route.is-on { stroke: var(--signal); stroke-width: 3; opacity: 1; }
.amap__pin.is-on circle { fill: var(--signal); }
.amap__pin.is-on text { fill: #fff; }
.amap__area.is-on { opacity: 1; }

/* the district grid, filtered with Flip */
.ar-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 28px; margin-bottom: 14px; }
.ar-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-filter { min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: 1rem; cursor: pointer; transition: background .3s, color .3s; }
.ar-filter span { font-weight: 500; opacity: .7; margin-left: 4px; }
.ar-filter:hover { background: var(--linen); }
.ar-filter[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ar-search { display: grid; gap: 6px; flex: 0 1 380px; }
.ar-search span { font-weight: 700; font-size: .95rem; color: var(--ink); }
.ar-search input { min-height: 50px; padding: 0 16px 0 46px; border: 1.5px solid #C4D0CD; background: #F8FAF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%2316302E' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%2316302E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center / 20px; font-size: 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.ar-search input:focus { outline: none; border-color: var(--sage); background-color: #fff; box-shadow: inset 0 -3px 0 var(--signal); }
.ar-lane { position: relative; height: 8px; margin: 0 0 14px; background: rgba(22,48,46,.08); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.ar-lane i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--sage-soft), var(--sage) 70%, var(--signal) 70%); transform-origin: left; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.ar-showing { margin: 0 0 16px; color: var(--muted); font-size: .98rem; }
.ar-showing b { color: var(--ink); font-family: var(--display); font-variant-numeric: tabular-nums; }
.ar-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; align-content: start; }
.ac { position: relative; background: #fff; border: 1px solid var(--line); min-height: 104px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .35s, border-color .35s; }
.ac > b, .ac a > b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 114%; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.ac > span, .ac a > span { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.35; color: var(--muted); }
.ac > b { padding: 12px 14px 0; }
.ac > span { padding: 0 14px 14px; }
.ac a { display: flex; flex-direction: column; height: 100%; padding: 12px 14px 12px; text-decoration: none; color: inherit; }
.ac a em { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--display); font-weight: 700; font-size: .875rem; color: var(--sage); }
.ac a em svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.ac.has-town { border-color: transparent; box-shadow: inset 0 4px 0 var(--signal); background: #FFFDF4; }
.ac.has-town:hover { background: var(--signal); }
.ac.has-town:hover em { color: var(--ink); }
.ac.has-town:hover em svg { transform: translateX(3px); }
/* no transform transition on the cards: Flip moves them with transforms */
.ac.is-near:not(.has-town) { background: var(--linen); }
.ac.is-hidden { display: none; }
.ar-none { margin: 18px 0 0; padding: 18px 20px; background: var(--linen); font-weight: 700; color: var(--ink); }
.ar-none a { color: var(--ink); }

/* town cards */
.tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); perspective: 1200px; }
.tcard { position: relative; display: block; height: min(54vh, 460px); min-height: 340px; overflow: hidden; color: #fff; text-decoration: none; background: var(--ink-deep); will-change: transform; }
.tcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); animation: panX 14s ease-in-out infinite alternate; }
.tcards li:nth-child(even) .tcard img { animation-direction: alternate-reverse; animation-duration: 17s; }
.tcard:hover img { transform: scale(1.12); }
.tcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,35,33,0) 30%, rgba(15,35,33,.93) 92%); }
.tcard__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(16px, 1.6vw, 24px); }
.tcard h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); margin-bottom: 6px; }
.tcard p { margin: 0 0 14px; color: #D8E3E0; font-size: .95rem; line-height: 1.4; }

@media (max-width: 1200px) {
  .ar-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tcards li { grid-column: span 2; }
  .tcards li:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 1000px) {
  .ar-open__grid { grid-template-columns: 1fr; }
  .ar-map__card { width: 100%; }
  .ar-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcards li, .tcards li:nth-child(n+4) { grid-column: auto; }
  .tcards li:last-child { grid-column: 1 / -1; }
  .tcard { height: 280px; min-height: 0; }
}
@media (max-width: 640px) {
  .ar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac { min-height: 0; }
  .ar-search { flex-basis: 100%; }
  .tcards { grid-template-columns: 1fr; }
  .ar-map__btn { font-size: .88rem; padding: 8px 12px; }
}
/* ambient: a shine travels along the yellow bar of each district with a town page */
.ac.has-town::before { content: ''; position: absolute; left: 0; top: 0; width: 40%; height: 4px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); animation: acShine 4.2s ease-in-out infinite; pointer-events: none; }
.ac.has-town:nth-child(3n+2)::before { animation-delay: -1.4s; }
.ac.has-town:nth-child(3n)::before { animation-delay: -2.8s; }
@keyframes acShine { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* narrow phones: the longest town name still fits its line */
@media (max-width: 560px) { .lo-open h1 { font-size: 2rem; } }
@media (max-width: 380px) { .lo-open h1 { font-size: 1.85rem; } }

/* phones: the lighter carpet textures behind the sweep (they load before the section is reached) */
@media (max-width: 900px) {
  .dsw { background-image: url(../img/carpet-pile-top-down-soiled-1000.webp); }
  .dsw__clean { background-image: url(../img/carpet-pile-top-down-clean-1000.webp); }
}