/* ==========================================================================
   BRIGHT WAVE ELECTRIC — area-served (location) page layer.
   Loads AFTER assets/css/site.css and only adds what a location page needs:
   a hero with no photo (copy + quote form), the two-column fault log, the
   image-free service blocks and emergency strip, and the neighbourhood list.
   Every colour, font, spacing step and radius comes from the site.css tokens
   — nothing new is introduced here.
   ========================================================================== */

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute)}
.crumb a{color:var(--ink-mute);transition:color .22s var(--ease)}
.crumb .sep{color:var(--copper);opacity:.7}
.crumb [aria-current]{color:var(--copper)}

/* ── 01 · HERO — no photo; the quote form takes the right column ────── */
.loc-hero{position:relative;z-index:2;display:grid;
  grid-template-columns:70px 1.24fr 1.06fr;gap:0 46px;align-items:start}
.loc-hero h1{font-size:clamp(33px,4.6vw,62px)}
.loc-hero .rail{min-height:380px}
/* the form is the hero's second column, so it fades in with the copy */
.loc-form{opacity:0;animation:fadeUp .95s var(--ease) 1.5s forwards}
.loc-form .sheet{margin:0}

/* ── 02 · FAULT LOG — list beside a standing note ───────────────────── */
.loc-diag{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:start;
  margin-top:46px}
.loc-aside{position:sticky;top:96px}
.loc-aside .note{margin-top:0}

/* ── 03 · SERVICE BLOCKS — no photo plates ──────────────────────────── */
/* text-only cards: the plate's head rule stands in for the missing image */
.loc-svc .svc{background:var(--paper-2)}
.loc-svc .svc-body{padding:26px 24px 28px}

/* an H3 block: heading + intro on the left, the doc's list on the right */
.loc-sub{margin-top:clamp(56px,7vh,84px);padding-top:clamp(40px,5vh,60px);
  border-top:1px solid var(--line-soft)}
.loc-sub-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start}
.loc-sub-head{position:sticky;top:96px}
.loc-sub-head .body-p{margin-top:14px}
.loc-sub-grid .spec{margin-top:0;border-top:2px solid var(--ink)}
.loc-sub-grid .note{margin-top:24px}

/* emergency strip — inverted panel, single column without its photo */
.loc-emg{grid-template-columns:1fr}
.loc-emg .emg-body{padding:clamp(32px,4vw,52px) clamp(30px,4vw,54px)}
.loc-emg .emg-body>p{max-width:62ch}

/* the load-centre figure carries the section visually in place of a photo */
.loc-fig{margin-top:30px}

/* ── 04 · WHY — the doc's seven points in two columns ───────────────── */
.loc-why{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:44px}
.loc-why .spec{margin-top:0}
.loc-why .spec:first-child{border-top:2px solid var(--ink)}
.loc-why .spec:last-child{border-top:2px solid var(--ink)}

/* ── 05 · NEIGHBOURHOODS ────────────────────────────────────────────── */
.loc-hoods{margin-top:30px}
.loc-hoods .chips{margin-top:0}
.loc-hood-foot{margin-top:28px;font-size:14.5px;line-height:1.72;color:var(--ink-soft);
  max-width:78ch}
.loc-hood-foot+.loc-hood-foot{margin-top:14px}
.loc-hood-foot a{color:var(--copper);border-bottom:1px solid rgba(150,80,31,.35)}

/* ── 06 · COSTS — keep the 2-column table readable on small screens ─── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.costs-foot+.costs-foot{margin-top:14px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .loc-hero{grid-template-columns:70px 1.1fr 1fr;gap:0 34px}
  .loc-sub-grid{grid-template-columns:1fr;gap:30px}
  .loc-sub-head{position:static}
}
@media(max-width:980px){
  /* Once the hero stacks, the quote form leads and the copy follows it.
     This is an `order` swap, not a markup change: the H1 still precedes the
     form in the DOM, so the heading order a crawler or screen reader walks is
     untouched while a phone user gets the form first. */
  .loc-hero{grid-template-columns:1fr;gap:0}
  .loc-hero .rail{display:none}
  /* it also leads the entrance, rather than waiting on the copy above it */
  .loc-form{order:-1;margin:0 0 40px;animation-delay:1.2s}
  .loc-hero .hero-lead{order:0}
  .loc-diag{grid-template-columns:1fr;gap:34px}
  .loc-aside{position:static}
  .loc-why{grid-template-columns:1fr;gap:0}
  .loc-why .spec:last-child{border-top:0}
}
@media(max-width:700px){
  .loc-svc .svc-body{padding:22px 20px 24px}
}
@media(prefers-reduced-motion:reduce){
  .loc-form{opacity:1!important;transform:none!important}
}