/* Roadway Moving Reviews — public styles.
   Roadway brand: Klein blue #1E22AA and pink #f9008a on a near-black hero,
   the pink-to-blue brand gradient on calls to action, white cards on a light field.
   No framework, no build step. */

:root {
  --blue: #1e22aa;
  --blue-deep: #14167a;
  --blue-wash: #ecebfa;
  --grad-pink: #f9008a;
  --grad-blue: #1e22aa;
  --ink: #232323;
  --ink-2: #3f464d;
  --ink-3: #6d7781;
  --ink-4: #98a2ac;
  --line: #e4e9ee;
  --line-2: #eff2f5;
  --page: #ffffff;
  --field: #f7f9fa;
  --card: #ffffff;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(35, 35, 35, .05), 0 4px 16px rgba(35, 35, 35, .05);
  --shadow-lift: 0 2px 6px rgba(35, 35, 35, .07), 0 12px 32px rgba(35, 35, 35, .09);
  --font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --wrap: 1220px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }

a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  padding: .7rem 1.3rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
}
.btn:hover { background: var(--field); color: var(--ink); border-color: var(--ink-4); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.btn-cta {
  background: linear-gradient(90deg, var(--grad-pink) 0, var(--grad-blue) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(249, 0, 138, .28);
}
/* The background MUST be re-declared here. Without it, .btn:hover's near-white
   background applies while this rule keeps the text white, and the label
   disappears. Inheriting only some properties from a base :hover is the trap. */
.btn-cta:hover,
.btn-cta:focus-visible {
  background: linear-gradient(90deg, #d70077 0, #171a8f 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(240, 109, 48, .38);
}

.btn-lg { padding: .95rem 1.9rem; font-size: 1.05rem; }

.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------- header */

.hdr { background: var(--ink); padding: .85rem 0; }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.hdr-logo { text-decoration: none; display: block; line-height: 1.05; }
.hdr-logo-mark {
  display: block; font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.03em;
}
.hdr-logo-sub {
  display: block; font-size: .62rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: .16em;
}

.hdr-right { display: flex; align-items: center; gap: .9rem; }

.hdr-phone {
  color: #fff; font-weight: 700; text-decoration: none; font-size: 1.02rem; white-space: nowrap;
}
.hdr-phone:hover { color: var(--blue); }

/* --------------------------------------------------------------------- hero */

.hero { background: var(--ink); color: #fff; padding: 3rem 0 3.5rem; }
.hero-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.hero-copy { flex: 1 1 30rem; }

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.3rem);
  color: #fff;
  margin-bottom: .75rem;
}
.hero-sub {
  color: #b6c0c9;
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0;
}
.hero-disclosure {
  margin-top: .6rem;
  font-size: .92rem;
  color: #93a0ab;
  max-width: 56ch;
}

/* ------------------------------------------------------------------- badges */

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin: -2rem 0 2.5rem;
}

.badge {
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--grad-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.25rem 1.4rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
a.badge:hover { box-shadow: var(--shadow-lift); color: var(--ink); transform: translateY(-2px); }
a.badge { transition: transform .15s ease, box-shadow .15s ease; }

.badge-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.badge-name { font-size: 1.15rem; font-weight: 800; }

.badge-score {
  font-size: 2.1rem; font-weight: 800; color: var(--grad-blue); letter-spacing: -.03em;
  line-height: 1.05;
}
.badge-of { font-size: 1.1rem; color: var(--ink-4); font-weight: 700; }

.badge-count { font-size: .85rem; color: var(--ink-3); line-height: 1.35; }
.badge-count strong { color: var(--ink); font-size: .95rem; }

/* ------------------------------------------------- rating spread (signature)
   A review page that publishes its own one-star count is making a claim the
   reader can verify. That is the point of this block. */

.spread {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}

.spread-figure { text-align: center; flex: 0 0 auto; }
.spread-avg {
  display: block; font-size: 3.4rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
}
.spread-avg-of { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .3rem; }

.spread-table { flex: 1 1 20rem; border-collapse: collapse; font-size: .86rem; }
.spread-table th {
  text-align: right; font-weight: 600; color: var(--ink-3);
  padding: .18rem .7rem .18rem 0; white-space: nowrap; font-size: .82rem;
}
.spread-table td { padding: .18rem 0; }
.spread-bar-cell { width: 100%; }
.spread-bar {
  display: block; height: 9px; border-radius: 5px; min-width: 3px;
  background: linear-gradient(90deg, var(--grad-pink), var(--grad-blue));
}
.spread-n {
  padding-left: .7rem; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-2); white-space: nowrap; font-weight: 600;
}

/* ------------------------------------------------------------------ bubbles */

.bubbles { margin-bottom: 2.5rem; }
.bubbles-h { font-size: 1.15rem; margin-bottom: .8rem; }
.bubble-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; align-content: flex-start; }

.bubble {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  background: var(--blue-wash);
  border: 1px solid #c4efe2;
  border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  color: #0b6b52; text-decoration: none;
}
.bubble:hover { background: var(--blue); border-color: var(--blue); color: #05271e; }
.bubble-n { font-size: .76rem; color: var(--ink-3); font-weight: 700; }
.bubble:hover .bubble-n { color: #05271e; }

/* --------------------------------------------------------------- page heads */

.page-head { margin: 0 0 1.5rem; }

/* Only the home page opens with the dark hero. On every other page main begins
   at the top of the document, so its first block needs breathing room or the
   heading butts straight into the header. Targeted rather than a blanket
   padding-top on main, because the home page's badges deliberately overlap the
   hero with a negative margin. */
main.wrap > .crumbs:first-child,
main.wrap > .page-head:first-child { margin-top: 2.5rem; }
.h2-big { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.accent { color: var(--grad-pink); }
.lede { color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; }
.intro {
  max-width: 68ch; color: var(--ink-2); font-size: 1rem;
  border-left: 3px solid var(--blue); padding-left: 1.1rem; margin-top: 1rem;
}

.crumbs { font-size: .86rem; color: var(--ink-3); margin: 1.5rem 0 1rem; display: flex; gap: .5rem; }
.crumbs a { color: var(--ink-3); }

.page-narrow { max-width: 44rem; padding-top: 3rem; padding-bottom: 4rem; }

/* -------------------------------------------------------- filters and chips */

.filters {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex: 1 1 30rem;
  /* Without these, a chip stretches to fill the flex line. That is invisible
     while .filters is a row, but the moment it becomes a column the 30rem
     flex-basis above turns into a *height*, align-content spreads it across the
     wrapped lines, and every chip inflates into a circle. */
  align-items: flex-start;
  align-content: flex-start;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .92rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip.is-on {
  background: linear-gradient(90deg, var(--grad-pink) 0, var(--grad-blue) 100%);
  border-color: transparent; color: #fff;
}
.chip-n { font-size: .76rem; font-weight: 700; color: var(--ink-4); }
.chip.is-on .chip-n { color: rgba(255, 255, 255, .8); }

.search { display: flex; gap: .5rem; flex: 0 1 24rem; }
.search input {
  flex: 1; min-width: 0;
  padding: .6rem .95rem;
  font-family: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.search input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }

/* ----------------------------------------------------------- review cards */

.rv-grid {
  display: grid;
  /* min() stops a track wider than the viewport from overflowing on small
     phones; auto-fill then gives 1 column on a phone, 2 on a tablet and 3 on a
     desktop with no breakpoints of its own. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
  /* stretch, not start: cards in a row share the tallest height, so a short
     review no longer leaves a ragged hole beneath it. Combined with the line
     clamp below this keeps rows close to uniform without any masonry
     machinery, which would need JavaScript and would not survive a crawler. */
  align-items: stretch;
}

.rv {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem 1.15rem;
  display: flex;
  flex-direction: column;
}
.rv-featured { border-color: #bdeedd; box-shadow: 0 0 0 3px var(--blue-wash), var(--shadow); }

.rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.rv-name { font-size: 1.08rem; font-weight: 800; margin: 0; }
.rv-logo { height: 20px; width: auto; max-width: 78px; object-fit: contain; flex: none; margin-top: .15rem; }
.rv-platform { font-size: .78rem; font-weight: 700; color: var(--ink-4); white-space: nowrap; }

.rv-meta { display: flex; align-items: center; gap: .7rem; margin: .35rem 0 .7rem; flex-wrap: wrap; }
.rv-stars { color: var(--grad-blue); letter-spacing: .06em; font-size: 1rem; }
.rv-stars-off { color: #dde3e8; }
.rv-date { font-size: .82rem; color: var(--ink-4); }

/* The checkbox drives the clamp, so expanding needs no JavaScript and the
   clamped text is never missing from the document. */
.rv-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.rv-body { color: var(--ink-2); font-size: .95rem; line-height: 1.62; }
.rv-body.is-clamped {
  display: -webkit-box;
  /* Line count comes from the admin setting, passed down as a custom property
     on the grid so it can be changed without touching this file. */
  -webkit-line-clamp: var(--clamp-lines, 6);
  line-clamp: var(--clamp-lines, 6);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-toggle:checked ~ .rv-body.is-clamped {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  display: block;
}

.rv-more {
  align-self: flex-start;
  margin-top: .5rem;
  font-size: .88rem; font-weight: 700; color: var(--grad-blue);
  cursor: pointer; user-select: none;
}
.rv-more:hover { color: var(--ink); text-decoration: underline; }
.rv-more-close { display: none; }
.rv-toggle:checked ~ .rv-more .rv-more-open { display: none; }
.rv-toggle:checked ~ .rv-more .rv-more-close { display: inline; }
.rv-toggle:focus-visible ~ .rv-more { outline: 3px solid var(--blue); outline-offset: 2px; }

.rv-translated {
  margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line);
  font-size: .92rem; color: var(--ink-2);
}
.rv-translated-label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-4); font-weight: 700; margin-bottom: .2rem;
}

.rv-reply {
  margin-top: .9rem;
  background: var(--field);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: .7rem .9rem;
  font-size: .89rem;
  color: var(--ink-2);
}
.rv-reply-who {
  margin: 0 0 .25rem; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--blue-deep);
}

.rv-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .9rem;
}
.rv-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.rv-tag {
  font-size: .74rem; font-weight: 700;
  padding: .16rem .5rem; border-radius: 4px;
  background: var(--line-2); color: var(--ink-3); text-decoration: none;
}
.rv-tag:hover { background: var(--blue-wash); color: #0b6b52; }
.rv-src { font-size: .8rem; font-weight: 700; color: var(--ink-4); text-decoration: none; white-space: nowrap; }
.rv-src:hover { color: var(--blue-deep); text-decoration: underline; }

/* --------------------------------------------------------------- pagination */

.pager {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; flex-wrap: wrap; margin: 2.5rem 0 1rem;
}
.pager-n, .pager-step {
  display: inline-block; padding: .5rem .85rem;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: .9rem; font-weight: 700;
  color: var(--ink); text-decoration: none; background: #fff;
}
.pager-n:hover, .pager-step:hover { border-color: var(--ink-4); color: var(--ink); }
.pager-n.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager-gap { color: var(--ink-4); padding: 0 .2rem; }
.pager-note { text-align: center; color: var(--ink-3); font-size: .88rem; margin-bottom: 3rem; }

.empty {
  text-align: center; padding: 3.5rem 1rem;
  background: var(--field); border-radius: var(--radius-lg); color: var(--ink-3);
}
.empty p { margin-bottom: 1rem; }

/* -------------------------------------------------------------------- modal
   Rendered server-side when ?r= names a review, so a shared link is a real
   page state rather than a JavaScript effect. */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 4vh 1.25rem;
  overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal-scrim { position: fixed; inset: 0; background: rgba(20, 24, 28, .68); display: block; }

.modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 44rem; width: 100%;
  padding: 2rem 2.1rem 1.6rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  margin: auto 0;
}

.modal-x {
  position: absolute; top: .7rem; right: 1rem;
  font-size: 1.9rem; line-height: 1; color: var(--ink-4);
  text-decoration: none; padding: .2rem .5rem; border-radius: 6px;
}
.modal-x:hover { color: var(--ink); background: var(--field); }

.modal-name { font-size: 1.5rem; margin-bottom: .3rem; }
.modal-sub {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-4); margin-bottom: 1.2rem;
}
.modal-plat { font-weight: 700; }
.modal-body { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }

.modal-foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.modal-share { flex: 1 1 14rem; min-width: 0; }
.modal-share input {
  width: 100%; padding: .5rem .7rem;
  font-family: inherit; font-size: .82rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 8px; background: var(--field);
}

/* ---------------------------------------------------------------- CTA band */

.cta-band {
  background: linear-gradient(90deg, var(--grad-pink) 0, var(--grad-blue) 100%);
  color: #fff;
  padding: 2.6rem 0;
  margin-top: 3rem;
}
.cta-band-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .25rem; }
.cta-band p { color: rgba(255, 255, 255, .92); margin: 0; max-width: 52ch; }
.cta-band .btn-cta {
  background: #fff; color: var(--grad-blue); box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.cta-band .btn-cta:hover,
.cta-band .btn-cta:focus-visible {
  background: #fff;
  color: var(--ink);
  border-color: transparent;
}

/* -------------------------------------------------------------------- footer */

.ftr { background: var(--ink); color: #b6c0c9; padding: 3rem 0 1.5rem; font-size: .9rem; }
.ftr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem; margin-bottom: 2rem;
}
.ftr-brand { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: .4rem; }
.ftr-head {
  color: #fff; font-weight: 700; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .6rem;
}
.ftr-small { color: #8e99a4; line-height: 1.7; margin: 0; }
.ftr a { color: var(--blue); }
.ftr a:hover { color: #fff; }
.ftr-list { list-style: none; margin: 0; padding: 0; }
.ftr-list li { margin-bottom: .35rem; }
.ftr-legal {
  border-top: 1px solid #34393e; padding-top: 1.2rem; margin: 0;
  color: #6d7781; font-size: .82rem;
}

/* ------------------------------------------------------------- narrow view */

@media (max-width: 860px) {
  .hero { padding: 2.2rem 0 2.6rem; }
  .badges { margin-top: -1.25rem; gap: .9rem; }
  .spread { gap: 1.25rem; padding: 1.25rem; }
  .spread-figure { flex: 1 1 100%; text-align: left; display: flex; align-items: baseline; gap: .7rem; }
  .spread-avg { font-size: 2.4rem; }
  /* Stacked: every child sizes to its own content and spans the width. Any
     flex-basis inherited from the row layout would be read as a height here. */
  .filters { flex-direction: column; align-items: stretch; }
  .filters > * { flex: 0 0 auto; width: 100%; }
  .search { width: 100%; }
  .modal-box { padding: 1.6rem 1.3rem 1.2rem; }
}

@media (max-width: 560px) {
  /* Two rows: logo above, phone and quote button below. Hiding the phone here
     would remove the fastest way for someone on a phone to actually book. */
  .hdr-in { flex-wrap: wrap; gap: .6rem; }
  .hdr-right { width: 100%; justify-content: space-between; gap: .6rem; }
  .hdr-logo-mark { font-size: 1.35rem; }
  .hdr-logo-img img { max-height: 38px; }
  .hdr-phone { font-size: .95rem; }
  .btn { padding: .6rem 1.05rem; font-size: .9rem; }
  .hero h1 { font-size: 1.9rem; }
  .search input { font-size: 1rem; } /* 16px stops iOS zooming on focus */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  a.badge:hover { transform: none; }
}

@media print {
  .hdr, .hero, .filters, .pager, .cta-band, .ftr, .modal, .rv-more { display: none !important; }
  .rv-body.is-clamped { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; }
  .rv { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
  .rv-grid { display: block; }
}

/* A band with no reviews states the zero plainly rather than drawing a sliver. */
.spread-n.is-zero { color: var(--ink-4); font-weight: 400; }

/* Crew names are people, not topics, so they read differently from the phrase
   bubbles above them. */
.bubble-crew {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.bubble-crew:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bubble-crew:hover .bubble-n { color: rgba(255, 255, 255, .75); }

/* Uploaded site logo. Sizing comes from the settings screen as inline
   max-width/max-height, so this only handles layout. */
.hdr-logo-img { display: flex; align-items: center; line-height: 0; }
.hdr-logo-img img { width: auto; height: auto; display: block; }
.ftr-logo { margin: 0 0 .6rem; line-height: 0; }
.ftr-logo img { width: auto; height: auto; display: block; }

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

.loc-nav { margin: 1.4rem 0 .4rem; }
.loc-nav-head {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.loc-nav .chips { margin-bottom: .5rem; }
.chip-state { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.chip-state:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.loc-badges { margin-top: .4rem; }
.loc-contact { font-size: .95rem; color: var(--ink-3); }