/* ══════════════════════════════════════════════════════════════════════════
   SUPERIOR MOBILE AUTO GLASS — location (service-area) pages
   Loaded IN ADDITION TO homepage.css, never instead of it. Every colour,
   font and spacing value here resolves through the homepage's own custom
   properties (--amber, --grot, --line, --shell …) so a location page can
   never drift away from the home page's "Night Dispatch" theme.

   Scope rule: if a rule would also be useful on the home page it belongs in
   homepage.css. Only location-page-specific structure lives here — the
   image-less hero, the image-less service cards, the equal-column card
   grids, the coverage/map split and the review band.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── HERO ──────────────────────────────────────────────────────────────────
   Location documents ship no hero image, so the space the home page gives to
   the photograph goes to the quote form instead. Same rail, same headline
   type, same vertical rhythm — only the right-hand column changes. */
.hero--loc{padding-bottom:clamp(56px,7vh,86px)}
.hero--loc::before{top:-160px}

.loc-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:72px 1.06fr .94fr;gap:0 46px;align-items:start}

/* The headline column carries the H1, the lead line, the checklist and the
   document's call-to-action line — nothing else. Any further intro prose is
   rendered by the band below the hero. */
.loc-lead{padding-bottom:8px;min-width:0}

/* Location H1s are sentence-length, so they wrap rather than running as the
   fixed one-line-per-clause home page headline does. */
.hero--loc h1{font-size:clamp(34px,4.55vw,64px);line-height:1.0;margin-bottom:26px}
.hero--loc h1 .ln{overflow:visible}
.hero--loc h1 .ln>span{white-space:normal;transform:translateY(0);opacity:0;
  animation:locUp .85s var(--ease) forwards}
.hero--loc h1 .l1>span{animation-delay:.92s}
.hero--loc h1 .l2>span{animation-delay:1.02s}
.hero--loc h1 .l3>span{animation-delay:1.12s}
.hero--loc h1 .amb{color:var(--amber)}
@keyframes locUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.loc-p{opacity:0;animation:fadeUp .9s var(--ease) 1.3s forwards;
  color:var(--chalk-2);font-size:16.5px;line-height:1.76;max-width:62ch;
  text-wrap:pretty}

/* The hero checklist is the home page's .creds row; it only needs its own
   entry animation here because the hero runs on delays, not on scroll. */
.hero--loc .creds{opacity:0;animation:fadeUp .9s var(--ease) 1.45s forwards}
.hero--loc .hero-acts{opacity:0;animation:fadeUp .9s var(--ease) 1.6s forwards}
.loc-callout{margin-top:26px;color:var(--chalk);font-size:15.5px;line-height:1.7;
  max-width:60ch;opacity:0;animation:fadeUp .9s var(--ease) 1.52s forwards}

/* Form column. Sticks alongside the headline on wide screens the way the
   home page's photograph sits in the eyeline, and unsticks before the grid
   collapses so it can never overlap the content. */
.loc-form{min-width:0;position:sticky;top:calc(var(--bar) + 22px)}
.loc-form .sheet{opacity:1;transform:none;animation:fadeUp .9s var(--ease) 1.1s both}


/* Inline links the documents set inside body copy. The global reset makes
   every <a> inherit its colour and drop its underline, so a link sitting in a
   sentence would otherwise be invisible. An amber rule under the words reads
   as a link without breaking the line's colour. */
.loc-p a,.loc-callout a,.lblocks .p a,.loc-intro a{
  color:var(--chalk);
  background:linear-gradient(var(--amber),var(--amber)) no-repeat 0 100%/100% 1px;
  padding-bottom:2px;transition:color .3s var(--ease),background-size .3s var(--ease)}
@media(hover:hover){
  .loc-p a:hover,.loc-callout a:hover,.lblocks .p a:hover,.loc-intro a:hover{
    color:var(--amber)}
}
.loc-p a:focus-visible,.loc-callout a:focus-visible,
.lblocks .p a:focus-visible,.loc-intro a:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px}


/* ── INTRO BAND ────────────────────────────────────────────────────────────
   Holds the intro prose that would otherwise crowd the hero. Set in the
   same display serif the home page uses for its insurance manifesto so the
   overflow reads as a deliberate opening statement. */
.loc-intro{padding:clamp(52px,7vh,80px) 0}
.loc-intro p{font-family:var(--ser);font-weight:300;
  font-size:clamp(19px,2.15vw,28px);line-height:1.44;color:var(--chalk);
  max-width:30ch;max-width:min(100%,34ch);text-wrap:pretty}
@media(min-width:981px){.loc-intro p{max-width:24ch;max-width:min(100%,60ch)}}


/* ── SECTION BODY ──────────────────────────────────────────────────────────
   One wrapper owns the gap below the section head and the rhythm between
   blocks. Without it a section opening on a paragraph starts hard against
   the heading while one opening on a card grid starts 48px lower — the two
   sit on different baselines and the page reads as if it were assembled
   twice. Every block type is normalised here instead. */
.lblocks{margin-top:clamp(36px,4.2vh,52px)}
.lblocks>*+*{margin-top:32px}
.lblocks>*+.lcards,.lblocks>*+.lsvcs,.lblocks>*+.lgroups{margin-top:44px}
.lblocks>*+.leadin{margin-top:38px}
.lblocks>.leadin+.panel{margin-top:16px}   /* a list belongs to its lead-in */
.lblocks>.ltail{margin-top:24px}           /* a sentence closing a list */


/* ── EQUAL-COLUMN CARD GRID ────────────────────────────────────────────────
   The home page's .why grid deliberately staggers its cards. Location pages
   run several card groups back to back, so they use a flat, even grid; the
   card itself is the home page's .card, unchanged. */
.lcards{display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.lcards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.lcards--2{grid-template-columns:1fr}}
@media(max-width:560px){.lcards{grid-template-columns:1fr}}


/* ── SERVICE CARDS (no imagery) ────────────────────────────────────────────
   Same silhouette as the home page's .svc card with the photograph removed:
   the amber index badge moves inline with the heading and the document's own
   call-to-action line stays pinned to the foot of the card, so every card in
   a row ends on the same line whatever the copy length. */
.lsvcs{display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr))}
@media(max-width:640px){.lsvcs{grid-template-columns:1fr}}

.lsvc{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--night-2);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.lsvc::before{content:"";position:absolute;top:-1px;left:-1px;width:13px;height:13px;
  border:2px solid var(--amber);border-right:0;border-bottom:0;
  opacity:0;transition:opacity .35s var(--ease)}
.lsvc-body{padding:26px 26px 22px;flex:1}
.lsvc-n{display:inline-block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.22em;color:var(--amber);margin-bottom:12px}
.lsvc h3{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2vw,24px);line-height:1.06;letter-spacing:.005em;
  margin:0 0 12px;color:var(--chalk)}
.lsvc .p{font-size:14.5px;max-width:none}
.lsvc .p+.p{margin-top:11px}
.lsvc-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding:16px 26px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--chalk-2);
  transition:color .3s var(--ease),background .3s var(--ease)}
.lsvc-cta .r-arw{width:32px;height:32px;flex:none;border:1px solid var(--line);
  border-radius:50%;display:grid;place-items:center;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.lsvc-cta .r-arw svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
  .lsvc:hover{border-color:var(--amber)}
  .lsvc:hover::before{opacity:1}
  .lsvc:hover .lsvc-cta{color:var(--amber)}
  .lsvc:hover .lsvc-cta .r-arw{border-color:var(--amber);transform:translateX(4px)}
}
.lsvc-cta:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}


/* ── LIST GROUPS ───────────────────────────────────────────────────────────
   An H3 that introduces a bulleted list, plus the trailing sentence some
   sections close on. The list itself is the home page's .blist in a .panel;
   only the heading above it is new. */
.lgroup+.lgroup{margin-top:44px}
.lgroup h3{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,27px);line-height:1.08;margin:0 0 6px;
  color:var(--chalk)}
.lgroup .leadin{margin-top:18px}
.lgroup .p{margin-top:16px}
.ltail{margin-top:22px}


/* ── COVERAGE / MAP SPLIT ──────────────────────────────────────────────────
   The document's map and weather embeds belong beside the areas they
   describe, exactly as the home page places them. The map column sticks so
   it stays in view while the three coverage lists scroll past it. */
.loc-cov{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;
  align-items:start;margin-top:44px}
.loc-cov-map{position:sticky;top:calc(var(--bar) + 26px)}
@media(max-width:980px){
  .loc-cov{grid-template-columns:1fr;gap:40px}
  .loc-cov-map{position:static}
}


/* ── CLOSING CTA BAND ──────────────────────────────────────────────────────
   The document's final "Book …" heading appears here and ONLY here. */
.loc-cta{border-top:1px solid var(--line)}
.loc-cta .sec-head{margin-bottom:0}
.loc-close{margin-top:clamp(30px,3.4vh,42px)}


/* ── REVIEWS ───────────────────────────────────────────────────────────────
   The one light band, matching the home page. These documents supply the
   reviewer name only — no Google permalink — so the attribution is plain
   text rather than the home page's linked variant. */
.loc-rvs{display:grid;gap:34px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:980px){.loc-rvs{grid-template-columns:1fr;gap:28px}}
.loc-rvs .rvc figcaption b{color:var(--amber-ink);font-weight:500}


/* ── RESPONSIVE ────────────────────────────────────────────────────────────
   Hero collapses in two steps: the rail goes first (it is decorative), then
   the form drops below the headline. Nothing may scroll sideways. */
@media(max-width:1080px){
  .loc-grid{grid-template-columns:1fr .92fr;gap:0 38px}
  .loc-grid .rail{display:none}
}
@media(max-width:900px){
  .loc-grid{grid-template-columns:1fr;gap:44px 0}
  .loc-form{position:static}
  .hero--loc h1{font-size:clamp(32px,7.4vw,48px)}
}
@media(max-width:560px){
  .lsvc-body{padding:22px 20px 18px}
  .lsvc-cta{padding:14px 20px;font-size:9.5px;letter-spacing:.14em}
  .loc-intro p{font-size:clamp(18px,5vw,22px)}
}

/* Honour reduced-motion the same way the home page does: content is present
   immediately, nothing slides or fades in. */
@media(prefers-reduced-motion:reduce){
  .hero--loc h1 .ln>span,.loc-p,.loc-callout,
  .hero--loc .creds,.hero--loc .hero-acts,.loc-form .sheet{
    opacity:1!important;transform:none!important;animation:none!important}
  .lsvc,.lsvc-cta,.lsvc-cta .r-arw{transition:none}
}


.lblocks>.steps{margin-top:0}

/* ── PROCESS STEPS ─────────────────────────────────────────────────────────
   Reuses the home page's .steps component (including its drawn connector),
   but the numeric chip is replaced by a marker: these documents number their
   own H3s ("1. Send Vehicle Details"), and a numbered chip beside a numbered
   heading would print the step number twice. */
.step .chip--dot{color:var(--amber);font-size:15px;line-height:1}