/*
 * Near Me landing pages — faithful restore of the "Near Me Pages Mock" artifact
 * (claude.ai/artifact/AVzDgsYmY59oMLhCvG9dYt: the live pages measured at 1440px,
 * 2026-10-12). Geometry, type sizes and colours below are the artifact's own
 * measured values, written as literals on purpose — this sheet is a restore of
 * that design, not a consumer of the site Foundation.
 *
 * Scope: everything is nested under `.nm`. Pages wrap their body in <div class="nm">,
 * which also keeps these sections from matching the sunny-owned
 * `.tp-nearme-page > section` rules in nearme.css.
 *
 * Desktop (>=1200px) is the artifact. Tablet and phone are not in the artifact;
 * they collapse the same structure (810px / 810px breakpoints of the live site).
 */

.nm {
  --nm-blue: #1688ca;
  --nm-accent: #18acf6;
  --nm-navy: #011932;
  --nm-body: #525c66;
  --nm-line: #e2e6e9;
  --nm-line-soft: #f0f3f4;
  --nm-gray: #f9fafb;
  --nm-head-grad: linear-gradient(96deg, #3e4d5c 0%, #092138 100%);
  --nm-shadow-card: 0 .6px .6px -1.25px rgba(0, 0, 0, .18), 0 2.29px 2.29px -2.5px rgba(0, 0, 0, .16), 0 10px 10px -3.75px rgba(0, 0, 0, .06);
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  color: var(--nm-navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

:where(.nm) *, :where(.nm) *::before, :where(.nm) *::after { box-sizing: border-box; }
.nm :is(h1, h2, h3, h4, h5, p, ul) { margin: 0; padding: 0; }
.nm ul { list-style: none; }
:where(.nm) a { color: inherit; text-decoration: none; }
:where(.nm) img { display: block; max-width: 100%; }

.nm-wrap {
  width: min(1200px, 100% - 80px);
  margin-inline: auto;
}

/* Gradient headings (the artifact's `GRAD` text). */
.nm-grad {
  background: var(--nm-head-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nm-grad--light {
  background-image: linear-gradient(96deg, #fff 0%, rgba(255, 255, 255, .7) 100%);
}
.nm-grad--eyebrow {
  background-image: linear-gradient(96deg, #0d74ce 0%, #113264 100%);
}
.nm-grad--eyebrow-light {
  background-image: linear-gradient(96deg, #c5dff6 0%, #4798ea 100%);
}

.nm-h2 { font-size: 40px; line-height: 50px; font-weight: 700; }
.nm-h2--center { text-align: center; }
.nm .nm-eyebrow { font-size: 18px; line-height: 21.6px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.nm-p { font-size: 16px; line-height: 25.6px; font-weight: 400; color: var(--nm-body); }
.nm-p a, .nm-link { color: var(--nm-blue); }
.nm-p a, .nm-link { transition: color .2s; }
.nm-p a:hover, .nm-p a:focus-visible, .nm-link:hover, .nm-link:focus-visible { color: #146fa3; }
.nm-sec { padding-block: 100px; background: #fff; }
.nm-sec--gray { background: var(--nm-gray); }
.nm-sec--80 { padding-block: 80px; }
.nm-sec--duo { padding-block: 100px 0; }
.nm-sec--duo .nm-split__in + .nm-split__in { margin-top: 80px; }
.nm-sec--states { padding-block: 80px 0; }

/* ------------------------------------------------------------------ Hero -- */

.nm-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 800px;
  padding-block: 112px;
  background: radial-gradient(50% 107% at 72% 97.4%, #0e2235 0%, #00101d 100%);
  color: #fff;
  overflow: hidden;
}
/* The live hero photo fades in from the left (mask) and is slightly desaturated. */
.nm-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 88%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 88%);
  filter: grayscale(.22);
}
.nm-hero__copy { position: relative; width: 640px; max-width: 100%; }

.nm-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  transition: gap .2s;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nm-accent);
}
.nm-hero__back img { width: 18px; height: 18px; }
.nm-hero__back:hover, .nm-hero__back:focus-visible { gap: 10px; }

.nm-hero h1 {
  font-size: 48px;
  line-height: 62.4px;
  font-weight: 700;
  letter-spacing: -1.5px;
  margin-bottom: 8px;
  background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* The hero also carries `tpl-hero` so the shared header switches theme when it ends
     (site-chrome.js reads `.tpl-hero`); keep Locations' h1 sizing rules out of this one. */
  max-width: none;
  text-wrap: wrap;
}
.nm-hero__intro { font-size: 18px; line-height: 27px; color: rgba(255, 255, 255, .7); }

.nm-badges { display: flex; gap: 16px; margin-top: 32px; }
.nm-badge {
  position: relative;
  display: block;
  height: 48px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: background-color .2s;
}
.nm-badge:hover { background: rgba(255, 255, 255, .1); }
.nm-badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.nm-badge--apple { width: 130px; border-radius: 4px; }
.nm-badge--play { width: 143px; border-radius: 6px; }
.nm-badge:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }

.nm-sms { margin-top: 32px; }
.nm .nm-sms__title { font-size: 14px; line-height: 14px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.nm-sms__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nm-sms__row { display: flex; gap: 8px; }
.nm-sms__input {
  width: 284px;
  max-width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--nm-line);
  border-radius: 4px;
  background: #fff;
  color: #000;
  font: 400 14px Poppins, "Helvetica Neue", Arial, sans-serif;
}
.nm-sms__input::placeholder { color: #babfc4; }
.nm-sms__input:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }
.nm-sms__input:disabled { background: #e8eef2; cursor: not-allowed; }
.nm-sms__send {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--nm-blue);
  color: #fff;
  font: 600 14px Poppins, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease;
}
.nm-sms__send:hover { background: #126da2; }
.nm-sms__send:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }
.nm-sms__send:disabled { opacity: .6; cursor: not-allowed; }
.nm .nm-sms__status { min-height: 0; margin-top: 8px; font-size: 12px; line-height: 18px; color: #fff; }
.nm .nm-sms__status:empty { display: none; }
.nm .nm-sms__status.is-error { color: #eb5200; }
.nm .nm-sms__status.is-ok { color: #08b86c; }
/* Live component states: orange error border, blue focus ring, green "Sent" button. */
.nm .nm-sms__input { transition: border-color .2s, box-shadow .2s; }
.nm .nm-sms__input:focus, .nm .nm-sms__input:focus-visible { border-color: #1688ca; box-shadow: 0 0 0 1px #1688ca; outline: none; }
.nm .nm-sms__input.is-error { border: 1px solid #eb5200; }
.nm .nm-sms__input.is-error:focus { border-color: #eb5200; box-shadow: 0 0 0 1px #eb5200; }
.nm .nm-sms__send { transition: background-color .2s; }
.nm .nm-sms__send:disabled:not(.is-sent) { background: #aaa; opacity: 1; }
.nm .nm-sms__send.is-sent, .nm .nm-sms__send.is-sent:hover { background: #08b86c; cursor: default; }
.nm-sms.is-unconfigured .nm-sms__send { opacity: .6; cursor: not-allowed; }

.nm .nm-rating { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 14px; line-height: 20px; }
.nm .nm-rating img { width: 92px; height: 19px; margin-right: 4px; }
.nm .nm-rating strong { font-weight: 400; color: #fff; }
.nm .nm-rating span { color: rgba(255, 255, 255, .7); }

.nm-fleet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  transition: gap .2s;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nm-accent);
}
.nm-fleet img { width: 20px; height: 20px; }
.nm-fleet:hover, .nm-fleet:focus-visible { gap: 10px; }

/* ------------------------------------------------------------- M11 map entry --
   Spec: Confluence 4547346439 section 3.1. 1200 wide, padding 20/24, 1px #e2e6e9, radius 4, no shadow;
   48x48 icon on #e8f3fa; 18/600 title; 14 body; 40px button like the hero Send. 48px above, 93px bar. */
.nm-map { padding: 48px 0 0; background: #fff; }
.nm-map__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--nm-line);
  border-radius: 4px;
  background: #fff;
}
.nm-map__icon {
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: #e8f3fa;
}
.nm-map__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--nm-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm-map__text { flex: 1 1 auto; min-width: 0; }
.nm .nm-map__text h2 { margin: 0; font-size: 18px; line-height: 25px; font-weight: 600; color: var(--nm-navy); }
.nm .nm-map__text p { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--nm-body); }
.nm-map__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 4px;
  background: var(--nm-blue);
  color: #fff;
  font: 600 14px/1 Poppins, "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
  transition: background-color .2s;
}
a.nm-map__btn:hover, a.nm-map__btn:focus-visible { background: #126da2; }
.nm-map__btn.is-pending { background: #e6ebf0; color: #868f98; pointer-events: none; cursor: not-allowed; }

/* ---------------------------------------------------- Split (panel + copy) -- */

.nm-split__in { display: flex; align-items: center; justify-content: space-between; }
.nm-split--rev .nm-split__in, .nm-split__in--rev { flex-direction: row-reverse; }
.nm-split__copy { width: 550px; max-width: 100%; }
.nm-split__copy .nm-h2 + .nm-p { margin-top: 16px; }
.nm-split__copy .nm-p + .nm-p { margin-top: 16px; }
.nm-split__copy .nm-p + .nm-h2, .nm-split__copy .nm-chips + .nm-h2 { margin-top: 40px; }
.nm-split--lg .nm-split__copy { width: 544px; }

.nm-panel {
  position: relative;
  flex: none;
  width: 500px;
  height: 500px;
  border-radius: 32px;
  overflow: hidden;
}
.nm-panel--lg { width: 576px; height: 576px; }
/* The live panel fades out towards the bottom (mask on the gradient layer only; the phone stays solid). */
.nm-panel__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #e6f6ff 0%, #ccecff 100%);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
.nm-panel__bg::before, .nm-panel__bg::after {
  content: "";
  position: absolute;
  width: 639px;
  height: 639px;
  left: -245px;
  top: -173px;
  border: 1px solid rgba(255, 255, 255, .33);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .2) 56%);
  opacity: .8;
  transform: rotate(45deg);
  pointer-events: none;
}
.nm-panel__bg::after { display: none; }
.nm-panel--lg .nm-panel__bg::after {
  display: block;
  width: 699px;
  height: 699px;
  left: -72px;
  top: 193px;
  border-color: rgba(255, 255, 255, .21);
  background: linear-gradient(180deg, rgba(255, 255, 255, .37) 8%, rgba(255, 255, 255, 0) 60%);
}
.nm-panel__img { position: absolute; inset: 50px; width: 400px; height: 400px; object-fit: contain; }
.nm-panel--lg .nm-panel__img { inset: 32px; width: 512px; height: 512px; }

/* Brand chips (truck stops: "TA Petro", ...) */
.nm .nm-chips { display: grid; grid-template-columns: repeat(3, 177px); gap: 10px; margin-top: 16px; }
.nm-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--nm-line);
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--nm-navy);
  white-space: nowrap;
}
.nm-chip img { width: 24px; height: 24px; flex: none; }

/* Link cards ("Best Rated Truck Stops") */
.nm-links { display: grid; gap: 12px; margin-top: 16px; }
.nm-linkcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 52px 0 16px;
  border: 1px solid var(--nm-line-soft);
  border-radius: 16px;
  background: #fff;
}
.nm-linkcard__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 6px;
  background: #f0f9ff;
  color: var(--nm-blue);
}
.nm-linkcard__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--nm-navy); }
.nm-linkcard__text { font-size: 14px; line-height: 20px; color: #868f98; }
.nm-linkcard__chev { position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: #babfc4; }
.nm-linkcard__chev { transition: color .2s; }
.nm-linkcard:hover .nm-linkcard__chev, .nm-linkcard:focus-visible .nm-linkcard__chev { color: #068dd0; }

/* Stacked phones + three text blocks (truck stops, "Stops with showers"). */
.nm-stack__in { display: flex; align-items: flex-start; justify-content: space-between; }
.nm-stack__phones { position: relative; flex: none; width: 600px; height: 653px; }
.nm-stack__phones img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(1, 25, 51, .11));
}
.nm-stack__phones .p3 { left: 181px; top: 113px; width: 480px; height: 480px; }
.nm-stack__phones .p2 { left: 91px; top: 83px; width: 540px; height: 540px; }
.nm-stack__phones .p1 { left: 0; top: 53px; width: 600px; height: 600px; }
.nm-stack__copy { width: 550px; max-width: 100%; display: grid; gap: 32px; }
.nm-stack__item { padding: 24px; }
.nm-stack__item[data-nm-tab] { cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.nm-stack__item.is-active { background: #fff; box-shadow: var(--nm-shadow-card); }
.nm-stack__item:focus-visible { outline: 2px solid #0a5cff; outline-offset: 2px; }
.nm-stack__phones img { transition: left .25s, top .25s, width .25s, height .25s; }
@media (min-width: 1200px) {
/* Selecting tab n rotates the phones like the live page. Slots: front 600, middle 540, back 480.
   Tab 1: p1 front, p2 middle, p3 back (the default markup).
   Tab 2: p2 front, p3 middle, p1 back.  Tab 3: p3 front, p1 middle, p2 back. */
.nm-stack[data-active="2"] .nm-stack__phones .p2 { left: 0; top: 53px; width: 600px; height: 600px; z-index: 3; }
.nm-stack[data-active="2"] .nm-stack__phones .p3 { left: 91px; top: 83px; width: 540px; height: 540px; z-index: 2; }
.nm-stack[data-active="2"] .nm-stack__phones .p1 { left: 181px; top: 113px; width: 480px; height: 480px; z-index: 1; }
.nm-stack[data-active="3"] .nm-stack__phones .p3 { left: 0; top: 53px; width: 600px; height: 600px; z-index: 3; }
.nm-stack[data-active="3"] .nm-stack__phones .p1 { left: 91px; top: 83px; width: 540px; height: 540px; z-index: 2; }
.nm-stack[data-active="3"] .nm-stack__phones .p2 { left: 181px; top: 113px; width: 480px; height: 480px; z-index: 1; }
}
.nm-stack__item h3 { font-size: 30px; line-height: 39px; font-weight: 600; }
.nm-stack__item .nm-p { margin-top: 8px; }
.nm-stack__item .nm-p + .nm-p { margin-top: 8px; }

/* ----------------------------------------------- Full-bleed background band -- */

.nm-band {
  position: relative;
  color: #fff;
  background: radial-gradient(126.93% 73.07% at 79.34% 111.1%, #0e2134 0%, #000f1c 100%);
  overflow: hidden;
}
.nm-band__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 88%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 88%);
}
.nm-band > .nm-wrap { position: relative; }
.nm-band--diesel { min-height: 468px; display: flex; align-items: center; }
.nm-band--diesel .nm-band__copy { width: 540px; max-width: 100%; padding-block: 100px; }
.nm-band__copy .nm-h2 { color: #fff; }
.nm-band .nm-p { color: rgba(255, 255, 255, .7); }
.nm-band__copy .nm-h2 + .nm-p { margin-top: 16px; }
.nm-band__copy .nm-p + .nm-p { margin-top: 16px; }

/* Weigh station: "Open or Closed" with phone + video */
.nm-band--phone { min-height: 700px; display: flex; align-items: center; }
.nm-band__bg--full { -webkit-mask-image: none; mask-image: none; opacity: .5; }
.nm-phone { flex: none; width: 500px; height: 500px; object-fit: contain; }
.nm-band--phone .nm-split__copy { width: 540px; }
.nm-phone-video {
  position: relative;
  flex: none;
  width: 500px;
  height: 500px;
}
.nm-phone-video .nm-panel__img { inset: 0; width: 500px; height: 500px; z-index: 1; }
.nm-phone-video video {
  position: absolute;
  left: 140px;
  top: 11px;
  width: 220px;
  height: 478px;
  object-fit: cover;
  border-radius: 28px;
  z-index: 2;
  opacity: 0;
}
.nm-phone-video video.is-playing { opacity: 1; }

/* ------------------------------------------------------- Dark feature grid -- */

.nm-dark { padding-block: 100px; color: #fff; background: linear-gradient(180deg, #000f1c 0%, #021c33 100%); }
.nm-dark--all { padding-block: 80px; background: linear-gradient(180deg, #000f1c 0%, #001629 100%); }
.nm-dark__title { text-align: center; }
.nm .nm-dark__sub { margin-top: 4px; text-align: center; font-size: 18px; line-height: 27px; color: rgba(255, 255, 255, .6); }
.nm .nm-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  border-top: 0;
}
.nm-fgrid--tight { margin-top: 60px; }
.nm-fcell {
  position: relative;
  min-height: 201px;
  padding: 32px;
  border-right: 1px solid rgba(112, 181, 255, .12);
  border-bottom: 1px solid rgba(112, 181, 255, .12);
}
.nm-fcell:nth-child(3n) { border-right: 0; }
.nm-fcell:nth-last-child(-n+3) { border-bottom: 0; }
.nm-fcell img { width: 40px; height: 40px; }
.nm-fcell h3 { margin-top: 24px; font-size: 18px; line-height: 25px; font-weight: 600; color: #fff; }
.nm-fcell p { margin-top: 8px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .7); }
/* Live hover: a faint blue wash rising from the bottom edge (linear-gradient(0deg, 0 -> .1)),
   only on cells that link somewhere. A gradient cannot transition, so the wash is an overlay whose
   opacity does. */
.nm-fcell { isolation: isolate; }
.nm-fcell:has(> a)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(112, 181, 255, 0) 0%, rgba(112, 181, 255, .1) 100%);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.nm-fcell:has(> a):hover::before, .nm-fcell:has(> a:focus-visible)::before { opacity: 1; }
.nm-fcell a { position: absolute; inset: 0; }
.nm-fcell a:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: -2px; }

/* --------------------------------------------------------------- Brands row -- */

.nm .nm-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.nm-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 193px;
  border-radius: 4px;
  background: var(--nm-gray);
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--nm-navy);
}
.nm-brand img { width: 64px; height: 64px; }

/* "Truck Stop Brands": every Locations hub brand as a compact card (icon + name). */
.nm .nm-brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 60px; }
.nm-brandcard {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 0 20px;
  border: 1px solid var(--nm-line-soft);
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--nm-navy);
}
.nm-brandcard img { width: 48px; height: 48px; flex: none; }

/* -------------------------------------------------------------- All locations -- */

.nm .nm-all__sub { max-width: 800px; margin: 12px auto 0; text-align: center; font-size: 18px; line-height: 27px; color: var(--nm-body); }
.nm-loc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 184px;
  border: 1px solid var(--nm-line-soft);
  border-radius: 4px;
  background: #fff;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--nm-navy);
}
.nm-loc img { width: 116px; height: 55px; object-fit: contain; }
.nm-loc--off { opacity: .6; }
a.nm-loc { transition: box-shadow .2s; }
.nm-loc .nm-loc__hover { display: none; }
a.nm-loc:hover .nm-loc__hover, a.nm-loc:focus-visible .nm-loc__hover { display: block; }
a.nm-loc:hover img:not(.nm-loc__hover), a.nm-loc:focus-visible img:not(.nm-loc__hover) { display: none; }
a.nm-loc:hover, a.nm-loc:focus-visible {
  box-shadow: 0 .72px .72px -1.08px rgba(0, 0, 0, .09), 0 2.75px 2.75px -2.17px rgba(0, 0, 0, .09), 0 12px 12px -3.25px rgba(0, 0, 0, .05);
}
.nm .nm-locs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }

/* -------------------------------------------------------------------- States -- */

.nm .nm-states { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 60px; }
.nm-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border: 1px solid var(--nm-line-soft);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nm-navy);
  text-align: center;
}
/* Live layout: the row is always [1px magnifier box][8px gap][label], centred, so the label already sits 4.5px
   right of centre at rest; on hover the box grows to 20px (label moves 9.5px) while the magnifying-glass icon fades in. */
.nm-state::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: 8px;
  flex: none;
  background: url("/assets/locations/nearme/shared/search-white.svg") center / 20px 20px no-repeat;
  opacity: 0;
  transform: scale(.05);
  transition: width .25s ease, opacity .25s ease, transform .25s ease;
}
.nm-state { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.nm-state:hover, .nm-state:focus-visible { background: var(--nm-blue); border-color: var(--nm-blue); color: #fff; }
.nm-state:hover::before, .nm-state:focus-visible::before { width: 20px; opacity: 1; transform: none; }
.nm-states-title { color: var(--nm-navy); }
/* City cards: the state card with the label and a grey count pill (PRD-15 M5). A long name wraps inside its
   own span and the pill stays at the end of the row. */
.nm-city { padding: 0 12px; gap: 0; }
/* No hover icon here: its box would take 9px at rest and 28px on hover and wrap names like "Montgomery, Alabama"
   that fit on one line in the artifact. Fill, white label and the pill still change. */
.nm-city::before, .nm-city:hover::before, .nm-city:focus-visible::before { display: none; }
.nm-city__name { flex: 0 1 auto; min-width: 0; }
.nm-city__count {
  flex: none;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #eef1f4;
  color: var(--nm-body);
  font-size: 12px;
  line-height: 17px;
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.nm-city:hover .nm-city__count, .nm-city:focus-visible .nm-city__count { background: rgba(255, 255, 255, .2); color: #fff; }

/* ----------------------------------------------------------------- Community -- */

.nm-community {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #fff;
  background-size: cover;
  background-position: center;
}
.nm-community__copy { width: 590px; max-width: 100%; }
.nm-community h2 { font-size: 40px; line-height: 50px; font-weight: 700; color: #fff; }
.nm-community p { margin-top: 10px; font-size: 18px; line-height: 27px; color: #fff; }
.nm-community .nm-badges { margin-top: 32px; }

/* ----------------------------------------------------------------------- FAQ -- */

.nm-faq { padding-block: 100px; background: #fff; }
.nm-faq__in { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.nm-faq__side { width: 483px; max-width: 100%; margin-top: -19px; }
.nm-faq__tag { font-size: 18px; line-height: 21.6px; font-weight: 700; text-transform: uppercase; }
.nm-faq__side .nm-h2 { margin-top: 12px; }
.nm-faq__side .nm-p { margin-top: 24px; }
.nm-faq__side .nm-p a { font-size: 18px; }
.nm-faq__main { width: 677px; max-width: 100%; }
.nm-faq__list { background: #fff; }
.nm-faq details { border-bottom: 1px solid var(--nm-line-soft); }
.nm-faq summary {
  position: relative;
  display: block;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--nm-navy);
  cursor: pointer;
  list-style: none;
}
.nm-faq summary::-webkit-details-marker { display: none; }
.nm-faq summary img { position: absolute; right: 0; top: 20px; width: 24px; height: 24px; transition: transform .15s ease; }
.nm-faq details[open] summary img { transform: rotate(180deg); }
.nm-faq summary:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 2px; }
.nm .nm-faq__a { padding: 0 0 20px; }
.nm-faq__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nm-blue);
}
.nm-faq__more img { width: 20px; height: 20px; }
.nm-faq__more { transition: gap .2s; }
/* Same Framer "Text Button - Brand Blue" as the hero back / fleet links: the gap opens 6px -> 10px. */
.nm-faq__more:hover, .nm-faq__more:focus-visible { gap: 10px; }

/* ------------------------------------------------- Weigh: scales cross-link -- */

.nm-cross__in { display: flex; align-items: center; justify-content: center; gap: 60px; }
.nm-cross__img { width: 180px; height: 180px; flex: none; object-fit: contain; }
.nm-cross__copy { width: 550px; max-width: 100%; }
.nm-cross__copy .nm-p { margin-top: 16px; }

/* -------------------------------------------------------------- Tablet 810+ -- */

@media (max-width: 1199.98px) {
  .nm-split__in, .nm-stack__in { gap: 40px; }
  .nm-panel, .nm-panel--lg { width: min(45%, 500px); height: auto; aspect-ratio: 1; }
  .nm-panel__img, .nm-panel--lg .nm-panel__img { inset: 10%; width: 80%; height: 80%; }
  .nm-split__copy, .nm-split--lg .nm-split__copy { width: 50%; }
  .nm .nm-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-stack__phones { width: 45%; height: auto; aspect-ratio: 1; overflow: clip; }
  .nm-stack__phones .p1 { left: 0; top: 0; width: 100%; height: 100%; }
  .nm-stack__phones .p2 { left: 15%; top: 5%; width: 90%; height: 90%; }
  .nm-stack__phones .p3 { left: 30%; top: 10%; width: 80%; height: 80%; }
  .nm-stack__copy { width: 50%; }
  .nm .nm-cards4, .nm .nm-locs { grid-template-columns: repeat(2, 1fr); }
  .nm .nm-brands { grid-template-columns: repeat(3, 1fr); }
  .nm .nm-states { grid-template-columns: repeat(3, 1fr); }
  .nm .nm-fgrid { grid-template-columns: repeat(2, 1fr); }
  .nm-fcell:nth-child(3n) { border-right: 1px solid rgba(112, 181, 255, .12); }
  .nm-fcell:nth-child(2n) { border-right: 0; }
  .nm-phone-video { width: 45%; height: auto; aspect-ratio: 1; }
  .nm-phone-video .nm-panel__img { width: 100%; height: 100%; }
  .nm-phone-video video { left: 28%; top: 2.2%; width: 44%; height: 95.6%; }
  .nm-faq__side { width: 40%; }
  .nm-faq__main { width: 55%; }
}

/* ------------------------------------------------------------------- Phone -- */

@media (max-width: 809.98px) {
  .nm-map__bar { flex-wrap: wrap; }
  .nm-map__text { flex-basis: calc(100% - 68px); }
  .nm-map__btn { width: 100%; }
  .nm-wrap { width: min(1200px, 100% - 40px); }
  .nm-sec, .nm-dark, .nm-faq { padding-block: 48px; }
  .nm-h2 { font-size: 28px; line-height: 36px; }
  .nm-hero { min-height: 0; padding-block: 360px 56px; }
  .nm-hero__bg {
    bottom: auto;
    height: 560px;
    background-position: 68% top;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 85%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 85%);
  }
  .nm-hero h1 { font-size: 32px; line-height: 42px; letter-spacing: -1px; }
  .nm-hero__intro { font-size: 16px; line-height: 24px; }
  .nm-sms__input { flex: 1 1 auto; width: auto; min-width: 0; }
  .nm-split__in, .nm-split--rev .nm-split__in, .nm-stack__in { flex-direction: column; align-items: stretch; gap: 32px; }
  .nm-split__copy, .nm-split--lg .nm-split__copy, .nm-stack__copy, .nm-cross__copy { width: 100%; }
  .nm-panel, .nm-panel--lg { width: 100%; }
  .nm .nm-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-stack__phones { width: 100%; }
  .nm-stack__item { padding: 16px; }
  .nm-stack__item h3 { font-size: 24px; line-height: 32px; }
  .nm-band--diesel .nm-band__copy, .nm-band--phone .nm-split__copy { padding-block: 56px; width: 100%; }
  .nm-band--phone { min-height: 0; }
  .nm-band--phone .nm-split__in { flex-direction: column; }
  .nm-phone-video { width: 100%; }
  .nm .nm-fgrid { grid-template-columns: 1fr; margin-top: 32px; }
  .nm-fcell, .nm-fcell:nth-child(3n), .nm-fcell:nth-child(2n) { border-right: 0; min-height: 0; padding: 24px 0; }
  .nm .nm-cards4, .nm .nm-locs { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  .nm .nm-brands { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .nm-brandcard { min-height: 72px; padding: 0 14px; gap: 12px; font-size: 16px; }
  .nm-brandcard img { width: 40px; height: 40px; }
  .nm .nm-states { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .nm-loc, .nm-brand { height: 150px; font-size: 16px; }
  .nm-faq__in { flex-direction: column; }
  .nm-faq__side, .nm-faq__main { width: 100%; }
  .nm-community { min-height: 360px; }
  .nm-community h2 { font-size: 28px; line-height: 36px; }
  .nm-cross__in { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-sms__send, .nm-faq summary img, .nm-hero__back, .nm-fleet, .nm-faq__more, .nm-badge, a.nm-loc, .nm-state, .nm-state::before,
  .nm-linkcard__chev, .nm-p a, .nm-link, .nm-fcell::before, .nm-map__btn { transition: none; }
}

/* --------------------------------------------- T8–T11 additions (Monty) -- */
/* Blocks the walmart / truck-scales / truck-wash / truck-parking pages carry
   that the other four do not. Same tokens and rhythm as above. */

/* A brand mark above a split heading (truck-scales: CAT Scale). */
.nm-split__logo { display: block; width: 56px; height: auto; margin-bottom: 12px; }

/* The rating line on a light surface (truck-parking "Find Truck Parking",
   where it stands in for the 270K / 8K / 600K figures, PRD 3.4). */
.nm .nm-split__copy .nm-rating { margin-top: 24px; font-size: 16px; line-height: 24px; }
.nm .nm-split__copy .nm-rating strong { color: var(--nm-navy); font-weight: 600; }
.nm .nm-split__copy .nm-rating span { color: var(--nm-body); }

/* Benefits (truck-parking): three centred items over the band photo. */
.nm-benefits { padding-block: 60px; }
.nm-benefits .nm-h2 { text-align: center; }
.nm .nm-benefits__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.nm-benefits__item { text-align: center; }
.nm-benefits__item > img { display: block; width: 80px; height: 80px; object-fit: contain; margin: 0 auto 16px; }
.nm-benefits__item h3 { font-size: 18px; line-height: 26px; font-weight: 600; color: #fff; }
.nm-benefits__item .nm-p { margin-top: 8px; font-size: 14px; line-height: 20px; }
.nm-benefits__item .nm-fleet { margin-top: 12px; }

/* Icon list (truck-parking "Truck Parking Locations"): two columns, artwork beside copy. */
.nm .nm-iconlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 60px; margin-top: 48px; }
.nm-iconlist__item { display: flex; gap: 20px; align-items: flex-start; }
.nm-iconlist__item > img { flex: none; width: 80px; height: 80px; object-fit: contain; }
.nm-iconlist__item h3 { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--nm-navy); }
.nm-iconlist__item .nm-p { margin-top: 6px; font-size: 14px; line-height: 20px; }
.nm-iconlist__item .nm-fleet { margin-top: 8px; color: var(--nm-blue); }

/* A heading and copy without a picture (truck-parking N2). */
.nm-prose .nm-p { margin-top: 16px; max-width: 760px; }

@media (max-width: 809.98px) {
  .nm .nm-benefits__list, .nm .nm-iconlist { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
}