/* ============================================================
   Areas We Cover — page-specific styles.
   Reuses tokens/components already defined in styles.css:
   --red / --black / --text-secondary / --grey-soft / --grey-light,
   --font-display / --font-text, --ease, .container, .reveal,
   .hero__eyebrow / .hero__eyebrow-line / .hero__eyebrow-text,
   .btn / .btn--primary.
   ============================================================ */

.areas-main .container{
  max-width: var(--container-wide);
  margin-left: auto;
}

/* The FAQ section reuses the Landing Page's .faq/.faq__inner component
   verbatim (same markup, same styles.css rules) and must render at the
   exact same width. .faq__inner's own "max-width: 760px" (one class)
   otherwise loses to .areas-main .container above (two classes) on
   specificity regardless of source order, stretching this page's FAQ
   to --container-wide instead. Restated here at matching specificity
   so it wins on this page too — styles.css and the Landing Page itself
   are untouched. */
.areas-main .faq__inner{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.areas-map__head .hero__eyebrow.reveal{ transform: translateY(8px); }
.areas-map__heading.reveal{ transform: translateY(15px); transition-delay: 0.08s; }
.areas-map__subtext.reveal{ transform: translateY(15px); transition-delay: 0.16s; }
.areas-hero__postcode.reveal{ transform: translateY(15px); transition-delay: 0.24s; }

/* ---------- Postcode search — input + attached CTA, single premium bar ---------- */
.areas-hero__postcode{
  position: relative;
  z-index: 50;
  margin-top: 30px;
  max-width: 540px;
  margin-inline: auto;
  display: flex;
  gap: 12px;
  text-align: left;
}
.areas-hero__postcode-field{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 20px;
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: 9999px;
  transition: border-color 0.2s var(--ease);
}
.areas-hero__postcode-field:focus-within{ border-color: var(--red); }
.areas-hero__postcode-field svg{ flex-shrink: 0; color: var(--red); }
.areas-hero__postcode-field input{
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--black);
}
.areas-hero__postcode-field input::placeholder{ color: #9C9C99; }
.areas-hero__postcode-btn{
  flex-shrink: 0;
  height: 58px;
  padding-inline: 22px;
}
@media (max-width: 560px){
  .areas-hero__postcode{ flex-direction: column; }
  .areas-hero__postcode-btn{ width: 100%; justify-content: center; }
}

/* ---------- Postcode search — floating panel (autocomplete + result),
   shares the field's shell language but never affects the field itself
   or pushes layout: absolutely positioned, hidden by default. ---------- */
.areas-hero__postcode-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17,17,17,0.08);
  overflow: hidden;
}
.areas-hero__postcode-list{
  max-height: 280px;
  overflow-y: auto;
}
.areas-hero__postcode-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
.areas-hero__postcode-option + .areas-hero__postcode-option{
  border-top: 1px solid #F1F1EF;
}
.areas-hero__postcode-option:hover,
.areas-hero__postcode-option.is-active{
  background: rgba(225,6,0,0.06);
}
.areas-hero__postcode-option-icon{ flex-shrink: 0; color: var(--red); }
.areas-hero__postcode-option-main{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.areas-hero__postcode-option-name{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--black);
}
.areas-hero__postcode-option-region{
  font-family: var(--font-text);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ---------- Postcode search — coverage result ---------- */
.areas-hero__postcode-result{
  padding: 20px 22px;
}
.areas-hero__postcode-result-status{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--black);
}
.areas-hero__postcode-result-status svg{ flex-shrink: 0; color: var(--red); }
.areas-hero__postcode-result-status--muted{
  font-weight: 500;
  color: var(--text-secondary);
}
.areas-hero__postcode-result-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.areas-hero__postcode-result-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--red);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.areas-hero__postcode-result-link:hover{ color: var(--red-dark); }
.areas-hero__postcode-result-link--secondary{ color: var(--black); }
.areas-hero__postcode-result-link--secondary:hover{ color: var(--red); }

/* ---------- Shared section heading pattern ---------- */
.areas-section{
  padding-top: 110px;
  padding-bottom: 110px;
  border-top: 1px solid rgba(0,0,0,0.06);
  scroll-margin-top: var(--header-h);
}
.areas-section__head{
  max-width: 640px;
}
.areas-section__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  color: var(--black);
  letter-spacing: -0.01em;
}
.areas-section__subtitle{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ============================================================
   Interactive London coverage map
   Reuses --red / --black / --text-secondary / --grey-soft /
   --grey-light / --font-display / --font-text / --ease already
   defined in styles.css. Leaflet's own chrome (zoom control,
   attribution, tooltip) is restyled below to match the site
   rather than left at library defaults — see areas-coverage-map.js
   for the borough data / interaction logic.
   ============================================================ */
.areas-map-section{
  padding-top: 60px;
  padding-bottom: 90px;
  background: var(--white);
}
/* First section on the page — no hairline divider to sit under, and a
   little extra breathing room below the header. */
.areas-map-section--hero{
  border-top: none;
  padding-top: 68px;
}

.areas-map__head{
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}
.areas-map__head .hero__eyebrow{ justify-content: center; }
.areas-map__heading{
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 2.9vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--black);
}
.areas-map__subtext{
  margin-top: 18px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Map frame ---------- */
.areas-map__frame{
  position: relative;
  margin-top: 52px;
  border-radius: 20px;
  border: 1px solid #E7E7E7;
  box-shadow: 0 12px 32px rgba(17,17,17,0.05);
  overflow: hidden;
  background: var(--grey-light);
}
.areas-map__canvas{
  height: 600px;
  width: 100%;
  background: var(--grey-light);
}
.areas-map__canvas-fallback{
  display: block;
  padding-top: 260px;
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--text-secondary);
}
/* Once Leaflet has taken over the container the note is hidden, and it
   only returns — as an overlay above the tiles and controls — when
   areas-coverage-map.js flags a genuine tile/boundary failure. */
.areas-map__canvas.leaflet-container .areas-map__canvas-fallback{ display: none; }
.areas-map__canvas.leaflet-container.areas-map__canvas--unavailable .areas-map__canvas-fallback{
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1001;
  background: var(--grey-light);
}
/* Desaturate + lighten the stock OSM tiles so labels/roads recede into a
   quiet grey backdrop and the red borough hover states stay the clear
   focal point, instead of competing with a busy, colourful basemap. */
.areas-map__canvas .leaflet-tile-pane{
  filter: grayscale(1) contrast(0.85) brightness(1.22);
}

/* ---------- Trust badge (top-right) ---------- */
.areas-map__badge{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 16px 11px;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(17,17,17,0.08);
}
.areas-map__badge-accent{
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 2.5px;
  background: var(--red);
  border-radius: 0 0 2px 2px;
}
.areas-map__badge-title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}
.areas-map__badge-sub{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

/* ---------- Hint overlay (bottom-left) ---------- */
.areas-map__hint{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: rgba(17,17,17,0.72);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.areas-map__hint svg{ color: var(--red); flex-shrink: 0; }

/* ---------- Leaflet chrome restyle ---------- */
.areas-map__canvas .leaflet-control-zoom{
  border: 1px solid var(--grey-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(17,17,17,0.08) !important;
  overflow: hidden;
}
.areas-map__canvas .leaflet-control-zoom a{
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  color: var(--black) !important;
  background: var(--white) !important;
}
.areas-map__canvas .leaflet-control-zoom a:hover{
  background: var(--grey-light) !important;
  color: var(--red) !important;
}
.areas-map__canvas .leaflet-control-attribution{
  background: rgba(255,255,255,0.75) !important;
  font-size: 9.5px !important;
}

/* Tooltip — Leaflet's default is already white-on-white, so its own
   arrow (.leaflet-tooltip-top:before) needs no override, only the
   shell's shadow/radius/padding/type to match the brand. */
.leaflet-tooltip.areas-map__tooltip{
  padding: 9px 13px;
  background: var(--white);
  border: none;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(17,17,17,0.14);
  font-family: var(--font-text);
  color: var(--black);
  opacity: 1;
}
.areas-map__tooltip-name{
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--black);
}
.areas-map__tooltip-cta{
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--red);
}

/* ---------- All Areas — light block: eyebrow/title/text vs. stat, then chips ---------- */
.areas-map__chips-band{
  margin-top: 16px;
  padding-top: 24px;
}
.areas-map__chips-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.areas-map__chips-head-copy .hero__eyebrow{ margin-bottom: 0; }
.areas-map__chips-title{
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.1vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--black);
}
.areas-map__chips-subtext{
  margin-top: 10px;
  max-width: 440px;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.areas-map__chips-stat{
  flex-shrink: 0;
  text-align: right;
}
.areas-map__chips-stat-num{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--black);
}
.areas-map__chips-stat-label{
  display: block;
  margin-top: 8px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--red);
}
.areas-map__chips{
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.areas-map__chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: 999px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.areas-map__chip:hover,
.areas-map__chip.is-active{
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.areas-map__chip:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (max-width: 900px){
  .areas-map-section{ padding-top: 44px; padding-bottom: 64px; }
  .areas-map__frame{ margin-top: 36px; border-radius: 16px; }
  .areas-map__canvas{ height: 480px; }
  .areas-map__canvas-fallback{ padding-top: 200px; }
  .areas-map__badge{ top: 12px; right: 12px; padding: 10px 12px 9px; }
  .areas-map__badge-title{ font-size: 0.64rem; }
  .areas-map__badge-sub{ font-size: 0.6rem; }
  .areas-map__hint{ left: 10px; bottom: 10px; padding: 7px 11px; font-size: 0.68rem; }
  .areas-map__chips-band{ margin-top: 12px; padding-top: 16px; }
  .areas-map__chips-head{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .areas-map__chips-stat{ text-align: left; }
  .areas-map__chips{ gap: 8px; }
  .areas-map__chip{ padding: 12px 16px; min-height: 44px; font-size: 0.82rem; }
}

@media (max-width: 420px){
  .areas-map__hint-text{ display: none; }
  .areas-map__hint{ padding: 8px; }
}

/* ---------- Areas coverage: intro ---------- */
.areas-coverage__head{
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.areas-coverage__head .hero__eyebrow{ justify-content: center; }
.areas-coverage__head .hero__eyebrow-text{
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}
.areas-coverage__heading{
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 2.9vw, 3.44rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: nowrap;
}
.areas-coverage__subtext{
  margin-top: 21px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Coverage tabs ---------- */
.areas-coverage__tabs{
  margin-top: 45px;
  display: flex;
  border: 1px solid var(--grey-soft);
}
.areas-coverage__tab{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;
  min-height: 112px;
  padding: 24px 22px;
  background: var(--white);
  border: none;
  border-left: 1px solid var(--grey-soft);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.areas-coverage__tab:first-child{ border-left: none; }
.areas-coverage__tab::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: transparent;
  transition: background-color 0.2s var(--ease);
}
.areas-coverage__tab:hover:not(.is-active){ background: var(--grey-light); }
.areas-coverage__tab.is-active::before{ background: var(--red); }
.areas-coverage__tab-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--red);
}
.areas-coverage__tab-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.2;
  color: var(--black);
}

/* ---------- Detail panel ---------- */
.areas-coverage__panel{
  margin-top: 29px;
  display: flex;
  flex-direction: column;
  /* Fixed to the tallest tab's content (UK-Wide/London/Around London/Sussex
     & Kent all reach ~381px at 7 rows) so switching tabs never resizes the
     panel or shifts the section below it — see .areas-coverage__panel-content
     (align-items: flex-start) for why shorter tabs stay top-aligned instead
     of centering into the extra space. */
  min-height: 384px;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(17,17,17,0.02);
  padding: 42px;
}
.areas-coverage__panel-content{
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 45px;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.areas-coverage__panel-content.is-leaving{
  opacity: 0;
  transform: translateY(4px);
}
.areas-coverage__panel-left{
  flex: 0 0 30%;
  max-width: 256px;
}
.areas-coverage__panel-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.92rem, 1.92vw + 0.8rem, 2.56rem);
  line-height: 1.05;
  color: var(--black);
}
.areas-coverage__badge{
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 5px 14px;
  background: var(--white);
  border: 1px solid var(--red);
  border-radius: 9999px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.areas-coverage__badge[hidden]{ display: none; }
.areas-coverage__panel-desc{
  margin-top: 16px;
  max-width: 17.5rem;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.areas-coverage__panel-divider{
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: var(--grey-soft);
}
.areas-coverage__locations{
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Set per zone in areas-coverage-tabs.js (ceil(item count / column count)) —
     each zone can have a different number of locations, and grid-auto-flow:
     column needs the real row count or it fills the first column too deep
     and starves the later ones. */
  grid-template-rows: repeat(var(--loc-rows, 3), auto);
  grid-auto-flow: column;
  column-gap: 26px;
  row-gap: 24px;
}
.areas-coverage__locations li{
  position: relative;
  padding-left: 16px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--black);
}
.areas-coverage__locations li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- Support bar — bottom of the panel card ---------- */
.areas-coverage__support{
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  background: var(--black);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}
.areas-coverage__support-left{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.areas-coverage__support-icon{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(225,6,0,0.16);
  border: 1px solid rgba(225,6,0,0.3);
  color: var(--red);
}
.areas-coverage__support-text{ min-width: 0; }
.areas-coverage__support-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
}
.areas-coverage__support-sub{
  margin-top: 3px;
  font-family: var(--font-text);
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.62);
}
.areas-coverage__support-btn{
  flex-shrink: 0;
  gap: 14px;
  background: var(--white);
  color: var(--black);
  padding: 19px 34px;
  border-radius: 9999px;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(17,17,17,0.06);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.areas-coverage__support-btn .btn__arrow{ color: var(--red); }
.areas-coverage__support-btn:hover{
  background: var(--grey-soft);
  box-shadow: 0 4px 14px rgba(17,17,17,0.08);
  transform: translateY(-1px);
}

@media (max-width: 1100px){
  .areas-coverage__heading{ font-size: clamp(2.6rem, 6vw, 3.4rem); }
  /* Below this width the panel stacks (title above locations, see
     flex-direction below) instead of sitting side by side, so the fixed
     desktop min-height no longer matches the content shape — let it size
     to content again here. */
  .areas-coverage__panel{ min-height: auto; }
  .areas-coverage__panel-content{
    flex-direction: column;
    gap: 32px;
  }
  .areas-coverage__panel-left{ flex-basis: auto; max-width: none; }
  .areas-coverage__panel-divider{
    width: auto;
    height: 1px;
    align-self: stretch;
  }
  .areas-coverage__locations{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--loc-rows-2col, 6), auto);
  }
}

@media (max-width: 700px){
  .areas-coverage__heading{ font-size: clamp(2.4rem, 8vw, 2.625rem); }
  .areas-coverage__tabs{
    flex-direction: column;
  }
  .areas-coverage__tab{
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 22px;
    border-left: none;
    border-top: 1px solid var(--grey-soft);
    gap: 8px;
  }
  .areas-coverage__tab:first-child{ border-top: none; }
  .areas-coverage__tab::before{
    top: 0; left: 0; right: auto; bottom: 0;
    width: 3px;
    height: auto;
  }
  .areas-coverage__tab-num{ font-size: 0.95rem; }
  .areas-coverage__tab-title{ font-size: 1.15rem; -webkit-line-clamp: unset; line-clamp: unset; }
  .areas-coverage__panel{ padding: 28px; }
  .areas-coverage__panel-title{ font-size: 2rem; }
  .areas-coverage__panel-desc{ font-size: 1.02rem; }
  .areas-coverage__support{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border-radius: 20px;
  }
  .areas-coverage__support-btn{ width: 100%; justify-content: center; }
  .areas-coverage__locations{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 20px;
    column-gap: 20px;
  }
  .areas-coverage__locations li{ font-size: 1rem; }
}

.areas-coverage{
  position: relative;
  background: var(--white);
  padding-top: 60px;
  padding-bottom: 140px;
}

@media (max-width: 1100px){
  .areas-coverage__heading{ white-space: normal; }
}

/* ---------- Find Your Area: background decoration ---------- */
#detailed-areas{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}
#detailed-areas > .container{
  position: relative;
  z-index: 1;
}

.areas-find__head{
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.areas-find__head .hero__eyebrow{ justify-content: center; }

.areas-search{
  position: relative;
  margin: 44px auto 0;
  max-width: 610px;
}
.areas-search__label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.areas-search__field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 22px;
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: 9999px;
  transition: border-color 0.2s var(--ease);
}
.areas-search__field:focus-within{ border-color: var(--red); }
@keyframes areasSearchFlash{
  0%{ box-shadow: 0 0 0 0 rgba(225,6,0,0.32); }
  60%{ box-shadow: 0 0 0 7px rgba(225,6,0,0.1); }
  100%{ box-shadow: 0 0 0 0 rgba(225,6,0,0); }
}
.areas-search__field.is-flash{
  animation: areasSearchFlash 0.8s var(--ease);
}
.areas-search__icon{ flex-shrink: 0; color: var(--red); }
.areas-search__input{
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-text);
  font-size: 1.05rem;
  color: var(--black);
}
.areas-search__input::placeholder{ color: #9C9C99; }
.areas-search__hint{
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.areas-search__hint.is-visible{ opacity: 1; }

/* Absolutely positioned overlay — never participates in document flow,
   never pushes the directory below, never changes section height. */
.areas-search__panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--white);
  opacity: 1;
  isolation: isolate;
  border: 1px solid var(--grey-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17,17,17,0.08);
  overflow: hidden;
}
.areas-search__listbox{
  max-height: 360px;
  overflow-y: auto;
}
.areas-search__option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 22px;
  background: var(--white);
  border-bottom: 1px solid #ECECEA;
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
.areas-search__option:last-child{ border-bottom: none; }
.areas-search__option:hover,
.areas-search__option.is-active{ background: #F7F7F7; }
.areas-search__option-main{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.areas-search__option-name{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--black);
}
.areas-search__option-region{
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: #777777;
}
.areas-search__option-arrow{
  flex-shrink: 0;
  color: var(--grey-border);
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.areas-search__option:hover .areas-search__option-arrow,
.areas-search__option.is-active .areas-search__option-arrow{
  color: var(--red);
  transform: translateX(3px);
}

/* Compact confirm state — small notice, not a card */
.areas-search__confirm{
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.areas-search__confirm-status{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--black);
}
.areas-search__confirm-status svg{ flex-shrink: 0; color: var(--red); }
.areas-search__empty-text{
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.areas-search__empty-text strong{ color: var(--black); font-weight: 600; }
.areas-search__empty-link{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--red);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.areas-search__empty-link:hover{ color: var(--red-dark); }
.areas-search__empty-link span{ transition: transform 0.2s var(--ease); }
.areas-search__empty-link:hover span{ transform: translateX(3px); }

/* Compact "Can't find your area?" panel — title, subtext and a single
   CTA only. No region/city suggestions here: this is the zero-match
   state, so it must never render content that looks like a match. */
.areas-search__empty{
  padding: 44px 34px 48px;
  text-align: center;
}
.areas-search__empty-title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
}
.areas-search__empty-sub{
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.areas-search__empty-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}

/* ---------- Directory (browsable, below search) ---------- */
/* Flexbox-with-wrap rather than Grid on purpose: with 11 groups in 4
   columns the last row only has 3 — Grid leaves its 4th track empty and
   the row reads as pinned left, while a wrapping flex row centers
   whatever items land on it, including a short last row. */
.areas-directory{
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  column-gap: 32px;
  row-gap: 40px;
}
/* .areas-directory sets its own `display`, which is an author rule at the
   same specificity as the UA [hidden] rule — author wins regardless of
   source order, so plain `hidden` alone would silently no-op here. */
.areas-directory[hidden]{ display: none; }
.areas-directory__group{
  min-width: 0;
  text-align: center;
  flex: 0 0 calc(25% - 24px); /* 4 per row: (100% - 3 gaps) / 4 */
}
.areas-detail__col-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.areas-detail__col-head svg{ color: var(--red); flex-shrink: 0; }
.areas-detail__col-title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}
.areas-detail__list{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.areas-detail__list li{
  font-family: var(--font-text);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* "View More +N" — sends the visitor to the search field above rather
   than expanding inline; a plain text link, not a button. */
.areas-directory__more{
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--red);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.areas-directory__more:hover{
  color: var(--red-dark);
  text-decoration: underline;
}

@media (max-width: 1100px){
  .areas-directory__group{ flex-basis: calc(50% - 16px); } /* 2 per row: (100% - 1 gap) / 2 */
}
@media (max-width: 420px){
  .areas-directory__group{ flex-basis: 100%; }
}

@media (max-width: 700px){
  .areas-search{ max-width: none; width: calc(100% - 32px); }
  .areas-search__panel{ left: 0; right: 0; }
}

/* ---------- Bottom CTA — final "Ready to..." panel ----------
   Same component/markup as about.html, services.html and
   prices/index.html (see the matching block in services-page.css) —
   duplicated here since this page doesn't load services-page.css. */
.about-cta{
  position: relative;
  padding: 142px 0 132px;
  overflow: hidden;
  background: var(--white);
}
.about-cta__bg{
  position: absolute;
  z-index: 0;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 124%;
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
.about-cta__inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.about-cta__eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-cta__eyebrow-line{
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: var(--red);
}
.about-cta__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  color: var(--black);
}
.about-cta__text{
  max-width: 30rem;
  margin: 14px auto 0;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.about-cta__actions{
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.about-cta__trust{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 44px;
  row-gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.about-cta__trust li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--black);
  white-space: nowrap;
}
.about-cta__trust-icon{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}

@media (max-width: 900px){
  .areas-hero{ padding-top: 32px; padding-bottom: 64px; }
  .areas-section{ padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 700px){
  .about-cta{ padding: 94px 0 86px; }
  .about-cta__trust{
    column-gap: 24px;
    row-gap: 12px;
  }
}

/* "Every London borough, one list." is an H2 (it follows the page H1
   directly); keep its own tracking over the site-wide `main h2` rule. */
main h2.areas-map__chips-title{ letter-spacing: -0.01em !important; }

/* Target of the "London" breadcrumb on borough pages (areas/<slug>/):
   land below the sticky header. */
#london-boroughs{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* Ukrainian only: the one-line (nowrap, ≥1101px) heading
   "Наші найпопулярніші райони обслуговування" is wider than the
   720px intro column, so it overflowed that column to the right and
   sat off the page's centre axis. Letting the intro span the full
   container keeps eyebrow, heading and subtext on the same centre
   (text-align:center, margin-inline:auto). English still fits 720px. */
@media (min-width: 1101px){
  html[lang="uk"] .areas-coverage__head{ max-width: none; }
}