/* ValuFlor — locations page only (src/pages/locations.html).
   Tokens and the base components (.loc, .tile, .embed, .chip-btn, .btn, .route) live in site.css; this file adds to them.
   Bands down the page: truck photo (night) → orange ticker → route map (deep night) → addresses + map (paper) → form (orange). */

/* ── hero: the truck photo ────────────────────────────────────────────────
   The door lettering ("valuflor" / "We deliver what we promise") sits in the lower-left of the photo, centred on
   x = 290 of 1024; the team member stands on the right.
   Above 1180px: the photo fills the hero, anchored to its bottom edge, and the heading sits top-left over the
   dark window behind a deep plate that is clear again before it reaches the lettering.
   1180px and below: the photo is cropped to the left 580px of the file (img width 1024/580 = 176.6% of the frame,
   anchored bottom-left), so the lettering is centred in a square frame and sits in its lower half. 701-1180px
   the frame stands beside the heading; 700px and below it runs full width under the heading. */
.lh{display:flex;flex-direction:column;justify-content:flex-start;background:#0E0C0A;color:var(--vfink);border-bottom:0;
  height:clamp(calc(320px + 36vw),100svh,72vw)}
.lh__media{position:absolute;inset:0;overflow:hidden}
.lh__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 100%}
.lh__plate{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 88% at 0% 0%,rgba(14,12,10,.95) 0%,rgba(14,12,10,.86) 32%,rgba(14,12,10,.5) 50%,rgba(14,12,10,0) 64%),
    linear-gradient(180deg,rgba(14,12,10,.6) 0%,rgba(14,12,10,0) 24%)}
.lh__in{position:relative;z-index:2;width:100%;padding-top:calc(var(--hdr-h) + clamp(28px,4.5vw,64px))}
/* a soft dark pool that follows the heading block, so the type keeps its contrast wherever the truck falls */
.lh__in .enter{position:relative}
.lh__in .enter::before{content:"";position:absolute;z-index:-1;inset:-30% -26% -26% -40%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,12,10,.8),rgba(14,12,10,.62) 52%,rgba(14,12,10,0))}
.lh__h{font-size:clamp(3rem,7.6vw,7.4rem);max-width:12ch;line-height:.9}
.lh__jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,36px)}
.lh__jump .chip-btn{gap:9px;padding:11px 16px;background:rgba(14,12,10,.74);border-color:rgba(255,255,255,.22)}
.lh__jump .chip-btn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vf-orange)}
.lh__jump .chip-btn--ghost::before{background:transparent;border:1px solid var(--vf-gold)}
@media (pointer:coarse),(max-width:700px){.lh__jump .chip-btn{min-height:44px}}
/* the photo settles into place on load (bottom edge fixed, so the lettering never leaves the frame) */
@keyframes lhSettle{from{transform:scale(1.09)}to{transform:none}}
.js .lh__img{animation:lhSettle 2.6s var(--ease-out) both}
html.rm .lh__img{animation:none}

@media (max-width:1180px){
  .lh{height:auto}
  .lh__plate,.lh__in .enter::before{display:none}
  .lh__media{position:relative;inset:auto;aspect-ratio:1}
  .lh__img{inset:auto;left:0;bottom:0;width:176.6%;max-width:none;height:auto;object-fit:fill;transform-origin:28.3% 100%}
}
/* 701-1180px: heading and chips on the left, the square photo on the right */
@media (min-width:701px) and (max-width:1180px){
  .lh{display:grid;grid-template-columns:var(--gut) minmax(0,1.1fr) minmax(0,1fr) var(--gut);column-gap:clamp(24px,4vw,52px);align-items:center;
    padding:calc(var(--hdr-h) + clamp(24px,3.6vw,44px)) 0 clamp(40px,5vw,64px)}
  .lh__in{grid-column:2;grid-row:1;padding:0;max-width:none}
  .lh__media{grid-column:3;grid-row:1;border-radius:var(--r-l);border:1px solid rgba(255,255,255,.14)}
  .lh__h{font-size:clamp(2.7rem,5.6vw,4.6rem)}
}
/* 700px and below: the photo runs full width under the heading, the top edge fading into the night ground */
@media (max-width:700px){
  .lh__in{order:1;padding-bottom:0}
  .lh__media{order:2;margin-top:-28px}
  .lh__media::before{content:"";position:absolute;inset:0 0 auto;height:30%;z-index:1;background:linear-gradient(#0E0C0A,rgba(14,12,10,0))}
  .lh__h{font-size:clamp(2.9rem,14vw,4.2rem)}
}

/* ── the ticker under the hero ─────────────────────────────────────────── */
/* the ticker drifts sideways with the scroll; the orange section around it keeps the band full width */
.lt{position:relative;overflow:hidden;border-block:1px solid rgba(28,17,8,.18)}
.lt .ticker{border:0;margin-inline:-6vw}

/* ── route map + the three facts beside it ─────────────────────────────── */
.lr{background:#0B0907}
.lr__grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.85fr);gap:clamp(12px,1.4vw,18px);align-items:stretch}
.lr__map{border-radius:var(--r-l);min-width:0}
.lr__map .route{height:100%;display:flex;align-items:center;transition:border-color .4s ease,box-shadow .5s ease}
.lr__map .route:hover{border-color:rgba(225,137,66,.5);box-shadow:0 0 0 1px rgba(225,137,66,.25),0 24px 70px rgba(225,137,66,.12)}
.lr__tiles{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.lr__tiles .tile{min-height:0;transition:transform .5s var(--ease-out),border-color .3s ease,box-shadow .5s ease}
@media (hover:hover){
  .lr__tiles .tile:hover{transform:translateY(-4px);box-shadow:var(--vflift)}
  .lr__tiles .tile:not(.tile--acc):hover{border-color:color-mix(in srgb,var(--vfacc) 60%,var(--vfline))}
}
.lr__tiles .stat__n{font-size:clamp(3rem,5.4vw,5rem)}
.lr__tiles .stat__l{margin-top:10px}
.tile--ghost{background:transparent;border:1px dashed var(--vfline2)}
.lr__big{display:block;font:800 clamp(1.3rem,1.9vw,1.75rem)/1.08 var(--head);letter-spacing:-.025em;color:var(--vfgoldt)}
@media (max-width:1000px){
  .lr__grid{grid-template-columns:1fr}
  .lr__tiles{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .lr__tiles .tile{min-height:190px}
}
/* the road map is drawn for a 1000-unit frame: on a tablet its labels grow so they stay about 11px on screen
   (phones get the larger size and drop the small print in site.css) */
@media (min-width:701px) and (max-width:1000px){.lr .route text{font-size:15px}.lr .route text.sm{font-size:12px}}
/* phones: the longest label ("Charlotte, NC" at x 806 of a 1010-wide view) must end inside the frame */
@media (max-width:700px){.lr .route text{font-size:23px;letter-spacing:.04em}}
@media (max-width:640px){
  .lr__tiles{grid-template-columns:1fr}
  .lr__tiles .tile{min-height:0;gap:18px}
}

/* ── addresses beside the map ──────────────────────────────────────────── */
.la__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.la__list{display:grid;gap:14px;align-content:start}
.la__mapcol{min-width:0}
/* the map stays in view while the cards scroll past, so "Show on map" is always answered on screen */
.la__map{position:sticky;top:calc(var(--hdr-h) + 20px);height:calc(100svh - var(--hdr-h) - 40px);min-height:480px;max-height:820px;
  border-color:#2F2923;box-shadow:0 30px 80px rgba(46,34,22,.22)}

.la .loc{min-height:0;gap:10px;padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(20px,2.2vw,26px)}
.la .loc::before{height:4px}
.la .loc h3{font-size:clamp(1.6rem,2.3vw,2.1rem);padding-right:72px}
.la .loc address{min-height:0;font-size:15px;color:var(--vfink)}
.la .loc p{font-size:14.5px;color:var(--vfbody);max-width:52ch}
.la .loc__kind{min-height:0;padding-right:72px}
.loc__n{position:absolute;top:clamp(16px,2vw,24px);right:clamp(18px,2.2vw,28px);font:800 clamp(2.6rem,3.6vw,3.4rem)/.8 var(--head);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.2px var(--vfline2);transition:color .5s var(--ease-out),-webkit-text-stroke-color .5s ease,transform .6s var(--ease-out)}
.loc:hover .loc__n,.loc:focus-within .loc__n{color:var(--vfacc);-webkit-text-stroke-color:var(--vfacc);transform:translateY(-3px)}
.loc--gold:hover .loc__n,.loc--gold:focus-within .loc__n{color:var(--vfgold);-webkit-text-stroke-color:var(--vfgold)}
.la .loc--ghost{background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--vfline) 55%,transparent) 14px 15px)}
.la .loc--ghost .loc__n{font-size:clamp(2rem,2.8vw,2.6rem)}
.loc__from{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfmut)}
.loc__from b{color:var(--vfink);font-weight:600;padding:8px 12px;border:1px dashed var(--vfline2);border-radius:999px}
.loc__from i{position:relative;width:34px;height:1px;background:var(--vfacc)}
.loc__from i::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left:5px solid var(--vfacc);border-right:0}
.loc__from i:last-of-type::after{right:auto;left:-1px;border-left:0;border-right:5px solid var(--vfacc)}

/* card footer: phone and directions stacked on the left, "Show on map" on the right */
.loc__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--vfline);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.loc__links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.loc__tel{font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--vfink);white-space:nowrap}
.loc__tel:hover{color:var(--vfacct)}
a.loc__go{color:var(--vfacct)}
.loc__foot .chip-btn{background:transparent}
.loc__foot .chip-btn:hover,.loc__foot .chip-btn:focus-visible{background:var(--vfacc);border-color:var(--vfacc);color:var(--vfonacc)}
@media (pointer:fine) and (min-width:701px){
  .loc__links{gap:0}
  .loc__tel{padding-block:9px 4px;margin-top:-9px}
  a.loc__go{padding-block:4px 9px;margin-bottom:-9px}
}
.loc__where{font-size:15px;color:var(--vfink)}
@media (max-width:700px){.loc__from{font-size:12px;letter-spacing:.1em}}
@media (pointer:coarse){
  .loc__links{gap:0}
  .loc a.loc__tel,.loc .loc__go{padding-block:16.5px}
  .loc__foot .chip-btn,.lead__done .btn--xs{min-height:44px}
}
@media (max-width:900px){
  .la__split{grid-template-columns:1fr}
  .la__map{position:relative;top:auto;height:min(70svh,520px);min-height:400px}
}
/* phones: a shorter map leaves room above and below it to scroll the page past with a finger */
@media (max-width:700px){.la__map{height:min(60svh,420px);min-height:0}}

/* ── ask a branch: the form on the orange slab ─────────────────────────── */
.lq{border-bottom:0;overflow:hidden;isolation:isolate}
.lq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.lq__h{font-size:clamp(2.6rem,5.6vw,5.2rem);max-width:11ch}
.lq .sub{max-width:40ch;margin-top:22px}
.lq__lines{display:grid;gap:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--vfline)}
.lq__line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--vfline);color:var(--vfink);
  transition:color .2s ease}
.lq__line>:first-child{transition:transform .45s var(--ease-out)}
.lq__line b{font:800 clamp(1.3rem,2.2vw,1.9rem)/1.1 var(--head);letter-spacing:-.025em;overflow-wrap:anywhere;text-align:right}
.lq__line:focus-visible{color:#3A2412}
.lq__line:focus-visible>:first-child{transform:translateX(12px)}
@media (hover:hover){.lq__line:hover{color:#3A2412}.lq__line:hover>:first-child{transform:translateX(12px)}}
.lq__line .fact__k{color:var(--vfmut)}
/* the form card is night on the orange slab: its own palette supplies the text colour (the success heading included) */
.lq__card{background:transparent}
.lq .lead__done h3{color:var(--vfink)}
.lq .fields>.field:first-child{grid-column:1/-1}
.lq .form-card{margin-top:0;border-color:#2F2923;box-shadow:0 40px 90px rgba(60,28,6,.35)}
@media (max-width:900px){.lq__grid{grid-template-columns:1fr}}