/* Location template — only what differs from the approved homepage (components.css + home.css). */

/* hero: breadcrumb + city-led headline */
.pg-loc .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;font:600 10.5px/1 var(--f-mono);font-stretch:112%;letter-spacing:.04em;color:var(--ink-mute)}
.pg-loc .crumbs a{color:var(--ink-soft);text-decoration:none}
.pg-loc .crumbs a:hover{color:var(--red)}
.pg-loc .crumbs span[aria-current]{color:var(--ink)}
.pg-loc .h1 .ln-city{color:var(--red)}
.pg-loc .h1 .ln-wrap>span{white-space:normal}
.js .pg-loc .crumbs{opacity:0;animation:fadeUp .8s var(--ease) forwards}
.pg-loc .hero-intro .sv-il{color:inherit;text-decoration-color:var(--red);text-underline-offset:3px}

/* areas: this city and its neighbours on the radar */
.areas-map.in .rd-pt.here .rd-dot{fill:var(--red-hot);transform:scale(1.9)}
.rd-pt.here .rd-lab{fill:#fff;font-weight:650}
.rd-pt.here .rd-hit{fill:rgba(255,90,76,.22)}
.rd-pt.near .rd-dot{fill:#fff}
.loc-radar:not(.focus):not(.all) .rd-pt:not(.here):not(.near) .rd-lab{opacity:.4}
.loc-radar:not(.focus):not(.all) .rd-pt:not(.here):not(.near) .rd-dot{opacity:.5}
.loc-p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:56ch;margin-top:14px}
.loc-also{margin-top:26px;font:600 11.5px/1.4 var(--f-mono);font-stretch:112%;letter-spacing:.05em;color:var(--ink-soft)}
.pg-loc .areas-copy .area-list{margin-top:14px}
.area-list .al-plain{display:flex;align-items:center;gap:12px;padding:12px 6px 12px 4px;border-bottom:1px solid var(--line);font-weight:520;font-size:15px;letter-spacing:-.01em;color:var(--ink-soft)}

/* grounds: hero L · services t · pricing D · mobile L · why t · areas L · FAQ t · booking+map D · footer D */
.pg-loc .loc-faq{background:var(--paper-2)}
.pg-loc .loc-faq .faq-call{background:var(--white)}
.pg-loc .loc-locate{border-top:1px solid var(--line-dark)}
/* The city map + NAP card: a 2-column band, NOT the homepage's absolute overlay — the card carries the
   client's weather widget, which expands to a 7-day forecast, so its height must drive the band. */
.pg-loc .loc-locate{display:grid;grid-template-columns:minmax(392px,34%) 1fr;align-items:stretch}
.pg-loc .loc-locate .locate-in{position:static;inset:auto;grid-column:1;grid-row:1;max-width:none;display:flex;align-items:center;padding-block:clamp(30px,5vh,64px);padding-inline:clamp(18px,2vw,34px);pointer-events:auto}
.pg-loc .loc-locate .locate-card{width:100%;max-width:400px;margin:0}
.pg-loc .loc-locate .locate-map{grid-column:2;grid-row:1;height:auto;min-height:clamp(420px,56vh,560px)}
.pg-loc .loc-locate .locate-map iframe{height:100%;min-height:inherit}
@media(max-width:980px){
  .pg-loc .loc-locate{grid-template-columns:1fr}
  .pg-loc .loc-locate .locate-map{grid-column:1;grid-row:1;min-height:340px}
  .pg-loc .loc-locate .locate-in{grid-column:1;grid-row:2;padding:0 0 40px}
  .pg-loc .loc-locate .locate-card{max-width:none;margin-top:-60px;position:relative}
}

/* the client's weather widget inside the map card */
.loc-weather{margin-top:18px;border-radius:6px;overflow:hidden;min-height:40px}
.loc-weather .weatherwidget-io{display:block;font:600 11px/1 var(--f-mono);font-stretch:125%;letter-spacing:.12em;color:var(--ink-soft);text-decoration:none}