@charset "utf-8";
/* =========================================================================
   Location pages — "Fleet Livery", dispatch edition. Loads AFTER livery.css.
   Text-only by design (no photography): the hero sets the town's name in the
   livery lettering beside the quote form, which rides in a slanted van-door
   panel where the homepage has its photo; the service board, black band,
   dispatch map (with this town's pin marked) and chrome town name carry the rest.
   ========================================================================= */

/* ---------- hero: lettering + the form in the van door ---------- */
.lh{position:relative;padding-top:clamp(30px,4vw,56px)}
.lh-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(24px,3vw,48px);align-items:stretch}
.lh .hero-copy{align-self:center;padding-bottom:clamp(70px,7.4vw,108px)}
.lh .checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:24px 0 32px}
.lh .hero-cta .btn{padding:0 20px;font-size:14.5px;letter-spacing:.025em}   /* both doc CTAs on one row at ≥1300 */
.lh-door{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;
  margin:calc(-1 * clamp(30px,4vw,56px)) calc(-1 * max(var(--gut),(100vw - var(--wrap)) / 2)) 0 0;
  padding:clamp(52px,5.4vw,78px) max(var(--gut),(100vw - var(--wrap)) / 2) clamp(76px,7.4vw,108px) clamp(64px,7vw,120px)}
/* the panel is skewed from its bottom-left corner: the left edge leans at the site's 12deg */
.lh-door::before{content:"";position:absolute;top:0;bottom:0;left:0;right:-60%;z-index:-1;transform:skewX(-12deg);transform-origin:0 100%;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,.035) 0 1px,transparent 1px 16px),var(--ink)}
.lh-door .qf{width:min(100%,540px)}
.js .lh-door::before{animation:door-in 1.2s var(--ease) .15s both}
@keyframes door-in{from{transform:skewX(-12deg) translateX(34%)}}

/* ---------- services: the board ---------- */
.lsv{background:var(--paint-2);padding:clamp(104px,10.6vw,152px) 0 clamp(92px,9.6vw,136px)}
.bd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(26px,3vw,46px)}
.bd-list{display:contents}
.bd-head{align-self:start;padding:0 0 clamp(44px,4.4vw,60px)}
.bd-head .h2{font-size:clamp(30px,3.1vw,44px)}
.bd-head .sec-lede{margin-top:22px}
.bd{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:26px 0 40px;border-top:2px solid var(--ink)}
.bd::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.bd-i{margin-bottom:16px;font:900 italic 30px/1 var(--f-d);font-stretch:125%;color:transparent;-webkit-text-stroke:1.2px var(--ink);transition:color .3s var(--ease),-webkit-text-stroke-color .3s}
.bd h3{margin-bottom:10px}
.bd .bp{flex:1;font-size:16px;line-height:1.62;color:var(--soft)}
.bd .more{display:inline-block;max-width:100%;margin-top:18px}   /* a wrapped label keeps its arrow after the last word */
.bd .more .ic{display:inline-block;margin-left:7px;vertical-align:-3px}

/* ---------- why: the black band, no photo ---------- */
.lwhy .lwhy-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px clamp(44px,6vw,100px);align-items:start}
.lwhy .sec-lede{margin-top:24px}
.lwhy .why-list{margin-top:0}
.lwhy .h2 .xp{color:#fff}

/* ---------- reviews ---------- */
.lrevs .sec-head{margin-bottom:clamp(70px,7vw,100px)}
.lrevs .h2{margin-bottom:0}
.rev-n{font:800 italic 18px/1.15 var(--f-d);font-stretch:112%;color:var(--ink)}

/* ---------- areas: this town on the dispatch map ---------- */
.area-list li.here{color:var(--red-deep)}
.area-list li.here::before{transform:skewX(-12deg) scale(1.35)}

/* ---------- FAQ ---------- */
.lfaq .faq-side .h2{font-size:clamp(34px,4.2vw,58px)}

/* ---------- the ask: call + hours plate ---------- */
.lcta .cta-grid{align-items:center}
.dispatch{justify-self:end;width:min(100%,500px);background:#fff;color:var(--ink);box-shadow:0 50px 90px -50px rgba(0,0,0,.65)}
.dispatch-b{margin:0;padding:8px 28px 14px}
.dispatch-b div{padding:20px 0;border-bottom:1px solid var(--line)}
.dispatch-b div:last-child{border-bottom:0}
.dispatch-b dt{font:700 12px/1 var(--f-d);font-stretch:80%;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.dispatch-b dd{margin:10px 0 0;font:900 italic 21px/1.2 var(--f-d);font-stretch:112%;color:var(--ink)}
.dispatch-b dd a{font-size:clamp(26px,2.6vw,34px);font-stretch:125%;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
.cta .dispatch :focus-visible{outline-color:var(--red)}
.dispatch-map{border-top:1px solid var(--line)}
.dispatch-map iframe{display:block;width:100%;height:clamp(220px,22vw,280px);border:0}
.dispatch-wx{padding:16px 20px 20px;border-top:1px solid var(--line)}
.dispatch-wx .weatherwidget-io{display:block;font:700 13px/1.3 var(--f-d);letter-spacing:.12em;color:var(--ink)}
.lfaq .faq-side .sec-lede{margin-top:24px}
.lrevs .rev figcaption a.rev-n{display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:color .2s}
.lrevs .rev figcaption .ic{width:14px;height:14px;stroke-width:2.1;color:var(--red);transition:transform .45s var(--ease)}

/* ---------- hover ---------- */
@media(hover:hover){
  .bd:hover::before{transform:none}
  .bd:hover .bd-i{color:var(--red);-webkit-text-stroke-color:var(--red)}
  .dispatch-b dd a:hover{color:var(--red)}
  .lrevs .rev figcaption a.rev-n:hover{color:var(--red)}
  .lrevs .rev figcaption a.rev-n:hover .ic{transform:translate(2px,-2px)}
}
.bd:focus-within::before{transform:none}

/* ---------- ≤1180 ---------- */
@media(max-width:1180px){
  .lh-door{padding-left:clamp(44px,5vw,70px)}
}

/* ---------- ≤980 ---------- */
@media(max-width:980px){
  .lh-grid,.lwhy .lwhy-in{grid-template-columns:minmax(0,1fr)}
  .lh .hero-copy{padding-bottom:44px}
  .lh-door{justify-content:center;margin:0 calc(-1 * var(--gut));padding:48px var(--gut) 76px}
  .lh-door::before{right:0;transform:none;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%)}
  .js .lh-door::before{animation:none}
  .bd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-head{grid-column:1/-1}
  .lwhy{padding-top:clamp(104px,11vw,160px)}
  .dispatch{justify-self:start}
}

/* ---------- ≤640 ---------- */
@media(max-width:640px){
  .bd-grid{grid-template-columns:minmax(0,1fr)}
  .bd{padding-bottom:32px}
  .dispatch-b{padding-inline:20px}
}