/* ============================================================================
   Location pages — "Clear Coast"
   Reuses the service page's reading grid, the homepage's glass plan and spec
   table, and adds a hero whose right column is the CITY'S OWN map plate — the
   one thing that differs per city gets the prominent position.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
.loc-hero{position:relative;overflow:clip;padding-bottom:clamp(40px,6vh,72px)}
.loc-hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:52px;
  align-items:start;padding-top:clamp(28px,4vh,48px);
}
.loc-h1{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(30px,4.2vw,55px);line-height:1.03;letter-spacing:-.018em;
  margin-bottom:22px;text-wrap:balance;
}
.loc-lede{font-size:clamp(16.5px,1.45vw,19px)}
.loc-pts{
  display:flex;flex-direction:column;gap:10px;margin:24px 0 26px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.loc-pts li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.loc-pts svg{color:var(--green-br);flex-shrink:0}
.loc-acts{display:flex;flex-wrap:wrap;gap:12px}
.loc-call{margin-top:18px;font-size:14px;color:var(--ink-soft)}

/* the city map, framed as an inspection plate */
.loc-plate{
  position:relative;border:1px solid var(--line);background:var(--paper);
  padding:22px;display:flex;flex-direction:column;
}
.loc-plate::before,.loc-plate::after{content:"";position:absolute;width:13px;height:13px}
.loc-plate::before{top:-1px;left:-1px;border-top:2px solid var(--green-br);border-left:2px solid var(--green-br)}
.loc-plate::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green-br);border-right:2px solid var(--green-br)}
.loc-map{border:1px solid var(--line-soft);margin-bottom:4px}
.loc-map iframe{height:clamp(230px,30vh,300px)}
.loc-dl{margin-top:14px}
.loc-plate .wx{margin-top:auto}

/* --------------------------------------------------------------- intro --- */
.loc-intro{border-top:1px solid var(--line-soft)}

/* ------------------------------------------------------------- territory -- */
.loc-areas{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}
.loc-area-h{
  display:block;color:var(--ink-mute);margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line);
  text-transform:none;letter-spacing:.08em;font-size:10px;line-height:1.6;
}
.loc-cols{border-top:0;padding-top:0;background:transparent;border:0;padding:0}
.loc-cols{columns:2}

/* nearby cities: a ruled index, linked where a page exists */
.loc-near{border-top:2px solid var(--ink)}
.loc-near li{border-bottom:1px solid var(--line-soft)}
.loc-near a,.loc-near > li > span{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;font-size:14.4px;color:var(--ink);
  transition:padding-left .38s var(--ease),color .35s var(--ease);
}
.loc-near > li > span{color:var(--ink-soft)}
.loc-near .mono{font-size:8.5px;letter-spacing:.15em;color:var(--green);flex-shrink:0}
.loc-near .loc-near-f{color:var(--ink-mute)}
@media(hover:hover){
  .loc-near a:hover{padding-left:9px;color:var(--green)}
}

/* ============================== RESPONSIVE ================================= */
@media(max-width:1080px){
  .loc-areas{grid-template-columns:1fr;gap:34px}
}
@media(max-width:980px){
  .loc-hero-grid{grid-template-columns:1fr;gap:32px}
  .loc-plate{max-width:560px}
  .loc-hero .frac{opacity:.4}
}
@media(max-width:560px){
  .loc-cols{columns:1}
  .loc-plate{padding:18px}
}