/* ─────────────────────────────────────────────
   LOCATIONS — truck on NL/BE map block
   Brand pattern from thepowerofbricks.com
─────────────────────────────────────────────  */
.locations {
  padding:40px 0 64px;
}
.locations-inner {
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:48px;
  align-items:center;
}
.locations-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.locations-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink);
  padding:4px 10px 4px 7px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  border-radius:6px;
  box-shadow: 0 2px 0 var(--ink);
}
.locations-eyebrow-dot {
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
}
.locations-title {
  font-family:var(--font-display);
  font-size:clamp(28px, 4vw, 44px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-1px;
  color:var(--ink);
  text-transform:uppercase;
  margin:6px 0 2px;
}
.locations-title em {
  font-style:normal;
  color:var(--orange-d);
  position:relative;
}
.locations-title em::after {
  content:'';
  position:absolute;
  left:-2px; right:-2px;
  bottom:0.05em;
  height:0.22em;
  background:var(--yellow);
  z-index:-1;
  border-radius:2px;
}
.locations-text {
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:480px;
  margin-bottom:8px;
}
.locations-cta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.loc-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 22px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-0.1px;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .2s, color .2s;
  box-shadow: 0 3px 0 var(--orange);
}
.loc-pill:hover {
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--orange);
  background:var(--orange);
  border-color:var(--ink);
}
.loc-pill-ghost {
  background:transparent;
  color:var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.loc-pill-ghost:hover {
  background:var(--white);
  color:var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

.locations-art {
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}
.locations-art img {
  width:100%;
  max-width:560px;
  height:auto;
  display:block;
  filter: drop-shadow(0 8px 16px rgba(21,21,26,.10));
}

/* ─── Mobile ─── */
@media (max-width:1024px) {
  .locations-inner {
    grid-template-columns: 1fr;
    gap:24px;
  }
  .locations-art { order:-1 }
  .locations-art img { max-width:420px }
}
@media (max-width:640px) {
  .locations { padding:24px 0 44px }
  .locations-inner { gap:18px }
  .locations-eyebrow { font-size:9.5px; padding:3px 9px 3px 6px; gap:6px }
  .locations-eyebrow-dot { width:7px; height:7px }
  .locations-title { font-size:clamp(24px, 7.5vw, 32px); letter-spacing:-0.6px }
  .locations-text { font-size:14px; line-height:1.5 }
  .locations-cta { gap:8px; width:100%; flex-direction:column; align-items:stretch }
  .loc-pill {
    padding:12px 18px;
    font-size:13px;
    justify-content:center;
    width:100%;
  }
  .locations-art img { max-width:320px }
}