/* ══════════════════════════════════════════════════════════════════════════
   LEGEND JUNK REMOVAL — v2 DESIGN SYSTEM (whole site)
   ──────────────────────────────────────────────────────────────────────────
   Served as a static asset from /styles/v2.css and linked from
   BaseLayout only when config.designSystem === 'v2'. Deliberately NOT a
   component <style> block: one cached stylesheet across ~135 pages beats
   inlining ~24KB into every one of them, and it keeps this layer out of every
   other client's CSS bundle entirely.

   Everything is scoped under `.lj2`, which only the v2 shell emits.
   ═══════════════════════════════════════════════════════════════════════ */

.lj2 {
  --lj-ink:        #0C1A11;
  --lj-ink-2:      #141C16;
  --lj-field:      #6FC6A8;   /* field green, tint of the logo's #149666 — ink on top = 8.8:1 */
  --lj-forest:     #116B4A;   /* deep brand green — display type on white, 6.5:1 */
  --lj-go:         #F58220;   /* Legend orange — the single CTA colour        */
  --lj-go-dark:    #DC7016;
  --lj-paper:      #FFFFFF;
  --lj-shell:      #F3F5F3;
  --lj-body:       #565E58;   /* body copy on white                            */
  --lj-muted:      #67706A;
  --lj-dim:        #9BA49E;   /* body copy on ink                              */
  --lj-rule-soft:  #E2E6E3;

  --lj-bd:    2px solid var(--lj-ink);
  --lj-bd-3:  3px solid var(--lj-ink);
  --lj-max:   1320px;
  --lj-gut:   32px;

  --lj-space-tight: 56px;
  --lj-space:       88px;
  --lj-space-major: 116px;

  --lj-font: 'Archivo', system-ui, -apple-system, sans-serif;

  font-family: var(--lj-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--lj-ink-2);
  background: var(--lj-shell);
  -webkit-font-smoothing: antialiased;
}

/* Defensive net, not the mechanism: BaseLayout no longer renders the theme's
   sticky bar for a designSystem client, and v2 routes render no theme header or
   footer. These stay so a route converted incorrectly fails visibly quiet rather
   than shipping duplicated chrome. */
body:has(.lj2) { background: var(--lj-shell, #F3F5F3); }
body:has(.lj2) .sticky-mobile-cta,
body:has(.lj2) > header,
body:has(.lj2) > footer { display: none !important; }

.lj2 h1, .lj2 h2, .lj2 h3, .lj2 h4, .lj2 h5, .lj2 h6 {
  font-family: var(--lj-font);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}
.lj2 section { padding: 0; }
/* :where() keeps these at zero specificity so component rules still win. */
:where(.lj2) a { color: inherit; text-decoration: none; }
:where(.lj2) a:hover { color: var(--lj-forest); }
:where(.lj2) p { margin: 0; }
:where(.lj2) img { max-width: 100%; display: block; }
/* The dist image optimizer wraps every <img> in a <picture>. Left as an inline
   box it breaks the height chain for every img sized at height:100% (hero shot,
   card shots, map, owner shot). display:contents takes the wrapper out of layout
   so those rules resolve against the real container again. */
.lj2 picture { display: contents; }
:where(.lj2) ul { list-style: none; margin: 0; padding: 0; }
.lj2 input, .lj2 button, .lj2 textarea, .lj2 select { font-family: var(--lj-font); }

.lj2 .lj-green { color: var(--lj-forest); }
.lj2 .lj-band--ink .lj-green,
.lj2 .lj-shotband .lj-green,
.lj2 .lj-close .lj-green { color: var(--lj-field); }
.lj2 .lj-cta-text { color: var(--lj-field); font-weight: 900; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.lj2 .lj-wrap { max-width: var(--lj-max); margin: 0 auto; padding: 0 var(--lj-gut); }

.lj2 .lj-band { padding: var(--lj-space) 0; }
.lj2 .lj-band--tight { padding: var(--lj-space-tight) 0; }
.lj2 .lj-band--major { padding: var(--lj-space-major) 0; }
.lj2 .lj-band--shell { background: var(--lj-shell); }
.lj2 .lj-band--paper { background: var(--lj-paper); }
.lj2 .lj-band--ink   { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-band--green { background: var(--lj-field); color: var(--lj-ink); }
.lj2 .lj-band--ink .lj-lede,
.lj2 .lj-band--ink .lj-body { color: var(--lj-dim); }

.lj2 .lj-grid { display: grid; gap: 22px; }
.lj2 .lj-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.lj2 .lj-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.lj2 .lj-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.lj2 .lj-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.lj2 .lj-split--wide-l { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.lj2 .lj-split--wide-r { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.lj2 .lj-eyebrow {
  font-size: 14px; font-weight: 800; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--lj-field); margin-bottom: 14px;
}
.lj2 .lj-eyebrow--dark { color: var(--lj-forest); }

.lj2 .lj-h1, .lj2 .lj-h2, .lj2 .lj-h3, .lj2 .lj-h4,
.lj2 .lj-lede, .lj2 .lj-body { overflow-wrap: break-word; }

.lj2 .lj-h1 { font-size: 60px; line-height: .92; letter-spacing: -2.4px; margin: 0 0 22px; }
.lj2 .lj-h1--big { font-size: 66px; letter-spacing: -2.6px; }
.lj2 .lj-h2 { font-size: 46px; line-height: .95; letter-spacing: -2px; margin: 0 0 18px; }
.lj2 .lj-h3 { font-size: 21px; line-height: 1.08; letter-spacing: -.5px; margin: 0 0 10px; }
.lj2 .lj-h4 { font-size: 17px; line-height: 1.1; letter-spacing: -.3px; margin: 0 0 8px; }

.lj2 .lj-lede { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--lj-body); max-width: 620px; }
.lj2 .lj-body { font-size: 17px; line-height: 1.62; font-weight: 500; color: var(--lj-body); }
.lj2 .lj-pull {
  font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--lj-ink);
  border-left: 6px solid var(--lj-field); padding-left: 20px; margin-top: 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.lj2 .lj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 28px; font-size: 16px; font-weight: 900; letter-spacing: 1.4px;
  text-transform: uppercase; border: var(--lj-bd); background: var(--lj-paper);
  color: var(--lj-ink); cursor: pointer; transition: background .15s, color .15s;
  min-height: 52px; text-align: center; border-radius: 0;
}
.lj2 .lj-btn:hover { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-btn--go { background: var(--lj-go); color: var(--lj-ink); }
.lj2 .lj-btn--go:hover { background: var(--lj-ink); color: var(--lj-go); }
.lj2 .lj-btn--ink { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-btn--ink:hover { background: var(--lj-field); color: var(--lj-ink); }
.lj2 .lj-btn--block { width: 100%; }
.lj2 .lj-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.lj2 a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 1130px) {
  .lj2 .lj-btns--book-call .lj-btn--go { background: var(--lj-paper); color: var(--lj-ink); }
  .lj2 .lj-btns--book-call .lj-btn--go:hover { background: var(--lj-ink); color: var(--lj-paper); }
  .lj2 .lj-btns--book-call a.lj-btn:not(.lj-btn--go) { background: var(--lj-go); color: var(--lj-ink); border-color: var(--lj-ink); }
  /* Below the same width the header switches to a burger, the topbar's four
     items (hours, rating, same-day, phone) no longer fit one line — flex-wrap
     drops the phone number onto its own row, reading as "floating" off to the
     side instead of centered with the hours text. Dropping the two optional
     middle items here (already hidden below 720px) keeps the bar single-line
     the whole way down to that breakpoint. */
  .lj2 .lj-topbar .lj-wrap > span:not(.lj-hours):not(.lj-topbar-phone) { display: none; }
}

/* ── Top bar + header ─────────────────────────────────────────────────── */
.lj2 .lj-topbar { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-topbar .lj-wrap {
  min-height: 42px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
/* The phone is one of the bar's facts, not a CTA parked at the far edge. It
   used to carry margin-left:auto plus its own type scale, which made it a
   full-height block hard against the right margin, reading as a different kind
   of element from the hours / rating / same-day items (Brett, 2026-08-30:
   "more like one of the regular items… positioned more to the left and lower
   down"). It now inherits the bar's type and sits in the normal gap flow right
   after its siblings; only the colour sets it apart. */
.lj2 .lj-topbar .lj-topbar-phone { white-space: nowrap; }
.lj2 .lj-topbar .lj-topbar-phone a { color: var(--lj-field); }
.lj2 .lj-topbar .lj-topbar-phone a:hover { color: var(--lj-paper); }

.lj2 .lj-header { position: sticky; top: 0; z-index: 60; background: var(--lj-paper); border-bottom: var(--lj-bd-3); }
.lj2 .lj-header .lj-wrap { height: 96px; display: flex; align-items: center; gap: 30px; }
/* Legend's logo.png is white artwork on transparency — it disappears on a white
   header. The v2 header keeps its paper ground and gives the mark its own
   full-height ink block instead, which is also the most brutalist reading of a
   logo lockup: a solid field with a hard rule against the nav. */
.lj2 .lj-logo {
  flex: 0 0 auto; align-self: stretch; display: flex; align-items: center;
  background: var(--lj-ink); padding: 0 var(--lj-logo-pad);
  margin-left: calc(var(--lj-gut) * -1); border-right: var(--lj-bd-3);
  /* Fixed narrower than the enlarged mark on purpose, so the sword's grip
     bleeds past the ink block onto the header instead of being padded flush
     inside it (Brett, 2026-08-30 — "handle protrude out of the box").
     The box edge is placed off the ARTWORK, not by eye: measured on the source
     PNG (300x148), the LEGEND wordmark's D ends at x=260 and the grip starts at
     x=262, so the edge sits at artwork x~262 — the whole wordmark stays inside
     the block and only the grip and pommel clear it (Brett: "the D should be
     completely in that black box"). Re-measure if the logo file is ever
     replaced; these numbers are specific to this artwork. */
  width: var(--lj-logo-box, auto); overflow: visible; position: relative;
  --lj-logo-pad: 14px; --lj-logo-h: 80px;
}
.lj2 .lj-logo img { height: var(--lj-logo-h); width: auto; max-width: none; flex-shrink: 0; position: relative; z-index: 1; }
/* Only the client whose mark is meant to breach the block gets a fixed box —
   every other client's block sizes to its own artwork, or it inherits Legend's
   width as dead ink beside a narrower logo. */
body[data-client="legend-junk-removal"] .lj2 .lj-logo { --lj-logo-box: 156px; --lj-logo-w: 162.16px; }

/* The mark is pure-white artwork. Inside the ink block it reads fine, but the
   ~23% that bleeds past the block lands on the white header and disappears —
   the overflow was working, it was just white-on-white (Brett, 2026-08-30:
   "the logo change didn't work"). So paint a second, ink-coloured copy of the
   same mark via a mask and clip it to only the slice that clears the block:
   the handle protrudes in dark, the wordmark stays white on the ink. Scoped to
   the one client whose logo is a white sword lockup. */
body[data-client="legend-junk-removal"] .lj2 .lj-logo::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: var(--lj-logo-pad); top: 50%; transform: translateY(-50%);
  width: var(--lj-logo-w); height: var(--lj-logo-h);
  background-color: var(--lj-ink);
  -webkit-mask: url("/images/legend-junk-removal/logo.png") left center / var(--lj-logo-w) var(--lj-logo-h) no-repeat;
  mask: url("/images/legend-junk-removal/logo.png") left center / var(--lj-logo-w) var(--lj-logo-h) no-repeat;
  /* clip away everything still sitting over the ink block */
  clip-path: inset(0 0 0 calc(var(--lj-logo-box) - var(--lj-logo-pad)));
}
.lj2 .lj-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; height: 100%; }
.lj2 .lj-nav > a, .lj2 .lj-nav-item > a {
  display: flex; align-items: center;
  font-size: 15.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; line-height: 1;
}
.lj2 .lj-header .lj-btn { flex: 0 0 auto; padding: 15px 24px; font-size: 14px; }

.lj2 .lj-nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.lj2 .lj-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 250px; max-height: 70vh; overflow-y: auto;
  background: var(--lj-paper); border: var(--lj-bd); border-top: none;
  padding: 8px 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.lj2 .lj-nav-item:hover .lj-drop,
.lj2 .lj-nav-item:focus-within .lj-drop { opacity: 1; visibility: visible; pointer-events: auto; }
.lj2 .lj-drop a { padding: 12px 20px; font-size: 15px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; }
.lj2 .lj-drop a:hover { background: var(--lj-shell); color: var(--lj-forest); }

.lj2 .lj-burger {
  display: none; flex: 0 0 auto; margin-left: auto;
  width: 52px; height: 52px; padding: 14px 12px;
  background: var(--lj-paper); border: var(--lj-bd); cursor: pointer;
  flex-direction: column; justify-content: space-between; align-items: stretch;
}
.lj2 .lj-burger span { display: block; height: 3px; background: var(--lj-ink); }
.lj2 .lj-burger[aria-expanded="true"] { background: var(--lj-field); }

.lj2 .lj-drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--lj-ink); color: var(--lj-paper);
  overflow-y: auto; padding: 104px var(--lj-gut) 40px; display: flex; flex-direction: column;
}
.lj2 .lj-drawer[hidden] { display: none; }
body.lj-nav-open .lj2 .lj-header { position: fixed; top: 0; left: 0; right: 0; z-index: 300; }
.lj2 .lj-drawer__nav { display: flex; flex-direction: column; }
.lj2 .lj-drawer__nav > a, .lj2 .lj-drawer__group summary {
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: 23px; font-weight: 900; letter-spacing: -.4px; text-transform: uppercase;
}
.lj2 .lj-drawer__group summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.lj2 .lj-drawer__group summary::-webkit-details-marker { display: none; }
.lj2 .lj-drawer__group summary::after { content: "+"; color: var(--lj-field); font-size: 22px; }
.lj2 .lj-drawer__group[open] summary::after { content: "–"; }
.lj2 .lj-drawer__sub { display: flex; flex-direction: column; padding: 0 0 16px 4px; }
.lj2 .lj-drawer__sub a { padding: 10px 0; font-size: 15px; font-weight: 700; color: var(--lj-dim); }
.lj2 .lj-drawer__foot { margin-top: 28px; }
.lj2 .lj-drawer__phone { display: block; font-size: 30px; font-weight: 900; letter-spacing: -1px; color: var(--lj-field); margin-bottom: 16px; }

.lj2 .lj-header-cta--call { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lj2 .lj-hero { background: var(--lj-ink); }
.lj2 .lj-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.lj2 .lj-hero-type { background: var(--lj-paper); padding: 64px 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.lj2 .lj-hero-shot { position: relative; min-height: 600px; }
.lj2 .lj-hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lj2 .lj-hero-flag {
  position: absolute; left: 0; bottom: 0; background: var(--lj-field); color: var(--lj-ink);
  padding: 20px 26px; max-width: 350px; pointer-events: none;
}
.lj2 .lj-hero-flag b { display: block; font-weight: 900; font-size: 21px; letter-spacing: -.5px; text-transform: uppercase; line-height: 1.05; }
.lj2 .lj-hero-flag span { display: block; font-size: 15px; font-weight: 700; margin-top: 8px; line-height: 1.4; }

.lj2 .lj-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--lj-bd-3); padding-top: 18px; margin-top: 34px; }
.lj2 .lj-stats b { display: block; font-weight: 900; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; }
.lj2 .lj-stats span { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--lj-muted); margin-top: 4px; }
.lj2 .lj-stat--mobile-only { display: none; }

/* ── Trust strip ──────────────────────────────────────────────────────── */
.lj2 .lj-trust { background: var(--lj-field); border-top: var(--lj-bd-3); border-bottom: var(--lj-bd-3); }
.lj2 .lj-trust .row { display: grid; grid-template-columns: repeat(4, 1fr); }
.lj2 .lj-trust .row > div {
  padding: 18px 20px; font-size: 13.5px; font-weight: 900; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--lj-ink); border-left: 2px solid rgba(12,26,17,.2);
}
.lj2 .lj-trust .row > div:first-child { border-left: 0; }

/* ── Cards / tiles ────────────────────────────────────────────────────── */
.lj2 .lj-card { background: var(--lj-paper); border: var(--lj-bd); display: flex; flex-direction: column; }
.lj2 .lj-card:hover { color: inherit; }
.lj2 .lj-card__shot { position: relative; height: 156px; border-bottom: var(--lj-bd); overflow: hidden; }
.lj2 .lj-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lj2 .lj-card__body { padding: 22px 18px; display: flex; flex-direction: column; flex: 1; }
.lj2 .lj-card__more { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }

.lj2 .lj-step { padding: 28px 26px; border: var(--lj-bd); }
.lj2 .lj-step--go { background: var(--lj-field); border-color: var(--lj-ink); color: var(--lj-ink); }
.lj2 .lj-step--ink { background: var(--lj-ink-2); border-color: var(--lj-paper); color: var(--lj-paper); }
.lj2 .lj-step--ink .lj-body { color: var(--lj-dim); }
.lj2 .lj-step .n { font-size: 13.5px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 14px; display: block; }
.lj2 .lj-step--go .n { color: rgba(12,26,17,.62); }
.lj2 .lj-step--ink .n { color: var(--lj-field); }

.lj2 .lj-feat { border: var(--lj-bd); padding: 28px 26px; background: var(--lj-paper); }
.lj2 .lj-feat .n {
  display: inline-block; background: var(--lj-field); color: var(--lj-ink);
  font-size: 13.5px; font-weight: 900; padding: 5px 9px; margin-bottom: 16px; border: var(--lj-bd);
}

/* ── Checklist ────────────────────────────────────────────────────────── */
.lj2 .lj-check li {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 0;
  border-bottom: 1px solid var(--lj-rule-soft); font-size: 16.5px; font-weight: 600; color: var(--lj-ink-2);
}
.lj2 .lj-check li::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 4px;
  background: var(--lj-field); border: var(--lj-bd);
}

/* ── Accordion ────────────────────────────────────────────────────────── */
.lj2 .lj-faq { border-top: var(--lj-bd); }
.lj2 .lj-faq details { border-bottom: var(--lj-bd); background: var(--lj-paper); }
.lj2 .lj-faq summary {
  cursor: pointer; list-style: none; padding: 22px 24px; display: flex; align-items: center; gap: 18px;
  font-size: 15.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
}
.lj2 .lj-faq summary::-webkit-details-marker { display: none; }
.lj2 .lj-faq summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 900; color: var(--lj-forest); line-height: 1; }
.lj2 .lj-band--ink .lj-faq summary::after { color: var(--lj-field); }
.lj2 .lj-faq details[open] summary::after { content: "–"; }
.lj2 .lj-faq .a { padding: 0 24px 24px; font-size: 16.5px; line-height: 1.62; color: var(--lj-body); font-weight: 500; }

/* ── Reviews ──────────────────────────────────────────────────────────── */
.lj2 .lj-review { border: var(--lj-bd); background: var(--lj-paper); padding: 24px 22px; margin: 0; }
.lj2 .lj-review .stars { color: var(--lj-go); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.lj2 .lj-review .who { margin-top: 16px; font-size: 13.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.lj2 .lj-review .job { font-size: 13.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lj-muted); margin-top: 3px; }
.lj2 .lj-badge-rating {
  display: inline-flex; align-items: center; background: var(--lj-field); color: var(--lj-ink);
  border: var(--lj-bd); padding: 14px 20px; font-size: 13.5px; font-weight: 900;
  letter-spacing: 1.4px; text-transform: uppercase; margin-left: auto; align-self: flex-end;
}

/* ── Media band ───────────────────────────────────────────────────────── */
.lj2 .lj-shotband { position: relative; background: var(--lj-ink); overflow: hidden; border-top: 3px solid var(--lj-field); }
.lj2 .lj-shotband { min-height: 460px; display: flex; align-items: center; }
.lj2 .lj-shotband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lj2 .lj-shotband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,26,17,.95) 0%, rgba(12,26,17,.88) 42%, rgba(12,26,17,.45) 100%);
}
.lj2 .lj-shotband .inner { position: relative; z-index: 2; width: 100%; padding: var(--lj-space) 0; color: var(--lj-paper); }
.lj2 .lj-shotband .lj-body { color: #D4DAD6; }

/* ── Gallery / map / owner shot ───────────────────────────────────────── */
.lj2 .lj-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lj2 .lj-gal figure { margin: 0; border: var(--lj-bd); border-color: var(--lj-paper); height: 190px; overflow: hidden; }
.lj2 .lj-gal img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.lj2 .lj-map { border: var(--lj-bd); overflow: hidden; background: var(--lj-shell); align-self: stretch; }
.lj2 .lj-map img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.lj2 .lj-owner-shot { border: var(--lj-bd); overflow: hidden; align-self: stretch; }
.lj2 .lj-owner-shot img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

/* ── Link rail ────────────────────────────────────────────────────────── */
.lj2 .lj-rail a {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border: var(--lj-bd); background: var(--lj-ink); color: var(--lj-paper);
  font-size: 13.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
}
.lj2 .lj-rail a::after { content: "→"; margin-left: auto; color: var(--lj-field); }
.lj2 .lj-rail a:hover { background: var(--lj-paper); color: var(--lj-ink); }
.lj2 .lj-band--green .lj-rail a { border-color: var(--lj-ink); }
.lj2 .lj-rail a:hover::after { color: var(--lj-ink); }

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.lj2 .lj-close { background: var(--lj-ink); color: var(--lj-paper); padding: 54px 0; border-top: 3px solid var(--lj-field); }
.lj2 .lj-close .lj-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lj2 .lj-close h2 { font-size: 40px; line-height: .95; letter-spacing: -1.4px; margin: 0; }
.lj2 .lj-close .lj-btns { margin-left: auto; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.lj2 .lj-footer { background: var(--lj-ink); color: var(--lj-paper); border-top: 1px solid #2B372F; }
.lj2 .lj-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 62px 0 44px; }
/* Footer column labels are h2, not h4: the page body ends on an h2, so an h4 here was a
   skipped level and failed the heading-order audit on every page. They are top-level
   sections of the contentinfo landmark, so h2 is also the honest level. Selector keeps
   h4 so any client page still authoring one is unaffected. */
.lj2 .lj-footer h2, .lj2 .lj-footer h4 { font-size: 13.5px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; color: var(--lj-field); margin: 0 0 16px; }
.lj2 .lj-footer li { margin-bottom: 9px; }
.lj2 .lj-footer li a { font-size: 15.5px; font-weight: 500; color: #C6CCC8; }
/* Footer links are a real navigation surface (the footer carries 8 city pages and the
   service list), but as inline boxes they render 18px tall on mobile against the 44x44
   minimum in design-standards.md § Mobile. Grow the hit area vertically without moving
   the text: inline-block + symmetric padding, with the list margin reduced by the same
   amount so the visual rhythm is unchanged. */
@media (max-width: 767px) {
  .lj2 .lj-footer li { margin-bottom: 0; }
  .lj2 .lj-footer li a,
  .lj2 .lj-footer .disclaimer a { display: inline-block; padding: 12px 0; }
}
.lj2 .lj-footer li a:hover { color: var(--lj-field); }
.lj2 .lj-footer .blurb { font-size: 15.5px; line-height: 1.6; color: var(--lj-dim); max-width: 310px; margin: 16px 0 18px; }
.lj2 .lj-footer .tel { font-size: 21px; font-weight: 900; letter-spacing: -.4px; color: var(--lj-field); display: block; }
.lj2 .lj-footer .hrs { font-size: 13.5px; font-weight: 600; color: var(--lj-dim); margin-top: 8px; line-height: 1.6; }
.lj2 .lj-footer .base {
  border-top: 1px solid #26312B; padding: 20px 0 24px; display: flex; gap: 20px;
  flex-wrap: wrap; align-items: center; font-size: 13.5px; font-weight: 600; color: #7E877F;
}
.lj2 .lj-footer .base .push { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
/* #6E7770 measured 3.87:1 against the --lj-ink footer, under the 4.5:1 AA floor for
   13px text (Lighthouse color-contrast failure). #8C948E is 5.75:1 and still reads as
   secondary against the #C6CCC8 footer links. */
.lj2 .lj-footer .disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lj2 .lj-footer .disclaimer { font-size: 14px; line-height: 1.5; color: #8C948E; padding-bottom: 28px; max-width: 940px; }

/* ── Utility ──────────────────────────────────────────────────────────── */
.lj2 .lj-mt-s { margin-top: 14px; }
.lj2 .lj-mt-m { margin-top: 26px; }
.lj2 .lj-mt-l { margin-top: 40px; }
.lj2 .lj-mb-l { margin-bottom: 44px; }
.lj2 .lj-head-row { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 40px; }
.lj2 .lj-head-row .lj-lede { margin-left: auto; text-align: right; }
.lj2 .lj-center { text-align: center; }
.lj2 .lj-center .lj-lede { margin-left: auto; margin-right: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   PAGE-TYPE PRIMITIVES — everything beyond the homepage
   ────────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.lj2 .lj-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--lj-muted); margin-bottom: 20px;
}
.lj2 .lj-crumbs a { color: var(--lj-forest); }
.lj2 .lj-crumbs a:hover { color: var(--lj-ink); }
.lj2 .lj-crumbs .sep { color: var(--lj-dim); }
.lj2 .lj-crumbs .cur { color: var(--lj-ink); }
.lj2 .lj-phero .lj-crumbs { color: rgba(255,255,255,.6); }
.lj2 .lj-phero .lj-crumbs a { color: var(--lj-field); }
.lj2 .lj-phero .lj-crumbs a:hover { color: #fff; }
.lj2 .lj-phero .lj-crumbs .cur { color: #fff; }

/* ── Page hero — the interior counterpart to the homepage hero ────────── */
.lj2 .lj-phero { position: relative; background: var(--lj-ink); color: var(--lj-paper); overflow: hidden; }
/* Descendant, never `>`: the dist image optimizer wraps every <img> in a
   <picture>, so a child combinator silently stops matching and the photo drops
   into normal flow (DEC-151). */
.lj2 .lj-phero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Scrim weighted to the copy column, not a blanket wash across the photo.
   The old 0.96 -> 0.90 -> 0.50 ramp covered the full width, so the subject of
   every interior hero (crew, truck, the item being hauled) read as a dark green
   smear — while the facts rail, sitting out at the 0.50 end, was still the one
   element FAILING contrast. Dense over the type, then a fast falloff so the
   right third of the photograph is essentially uncovered. */
.lj2 .lj-phero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,26,17,.86) 0%, rgba(12,26,17,.8) 40%, rgba(12,26,17,.6) 56%, rgba(12,26,17,.18) 78%, rgba(12,26,17,.04) 100%);
}
/* Contrast here must not depend on how long a page's headline happens to be.
   Capping the copy column keeps every hero's type inside the dense end of the
   ramp, which is what lets the falloff start as early as it does. */
.lj2 .lj-phero .lj-crumbs,
.lj2 .lj-phero .lj-eyebrow,
.lj2 .lj-phero .lj-h1,
.lj2 .lj-phero .lj-lede { max-width: 740px; }
.lj2 .lj-phero .inner { position: relative; z-index: 2; padding: 68px 0 62px; }
.lj2 .lj-phero .lj-h1 { color: var(--lj-paper); margin-bottom: 18px; }
.lj2 .lj-phero .lj-lede { color: #D4DAD6; max-width: 640px; }
.lj2 .lj-phero--flat { background: var(--lj-ink); }
.lj2 .lj-phero--flat::after { display: none; }
.lj2 .lj-phero .lj-btns { margin-top: 30px; }
/* A slim variant for legal + thank-you pages that carry no photo. */
.lj2 .lj-phero--slim .inner { padding: 52px 0 46px; }

/* Facts rail beneath an interior hero: same weight as the homepage stat row. */
/* Its own solid field rather than whatever photo happens to sit behind it.
   As a transparent rail this was the worst-contrast element on the page (2.86:1
   against a 3.0 floor) and it varied per page with the photograph. Solid ink is
   both deterministic and how the system treats every other rail. */
.lj2 .lj-phero-facts {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--lj-field); background: var(--lj-ink);
}
.lj2 .lj-phero-facts > div {
  padding: 18px 22px; border-left: 2px solid rgba(255,255,255,.16);
  font-size: 14px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
}
.lj2 .lj-phero-facts > div:first-child { border-left: 0; }
.lj2 .lj-phero-facts b { display: block; color: var(--lj-field); font-size: 19px; letter-spacing: -.4px; margin-bottom: 4px; }

/* ── Prose — blog bodies, legal pages, city long-form ─────────────────── */
.lj2 .lj-prose { max-width: 760px; font-size: 17.5px; line-height: 1.72; font-weight: 500; color: var(--lj-body); }
.lj2 .lj-prose > * + * { margin-top: 20px; }

/* Author attribution line (geo-standards.md). Sits above the first paragraph of a blog
   guide and above the FAQ accordion. Deliberately quiet: it is a credibility signal for
   AI citation systems and for a reader checking who wrote this, not a headline. */
.lj2 .lj-byline { margin: 0 0 22px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--lj-muted); }
.lj2 .lj-faq .lj-byline { margin-bottom: 18px; }
.lj2 .lj-prose h2 { font-size: 30px; line-height: 1.02; letter-spacing: -1.2px; color: var(--lj-ink); margin-top: 46px; padding-top: 22px; border-top: var(--lj-bd); }
.lj2 .lj-prose h3 { font-size: 21px; line-height: 1.1; letter-spacing: -.5px; color: var(--lj-ink); margin-top: 34px; }
.lj2 .lj-prose h4 { font-size: 17px; color: var(--lj-ink); margin-top: 26px; }
.lj2 .lj-prose a { color: var(--lj-forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lj2 .lj-prose a:hover { color: var(--lj-ink); }
.lj2 .lj-prose strong { color: var(--lj-ink); font-weight: 800; }
.lj2 .lj-prose ul, .lj2 .lj-prose ol { padding-left: 0; }
.lj2 .lj-prose li { position: relative; padding: 0 0 0 26px; margin-top: 10px; }
.lj2 .lj-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 11px; background: var(--lj-field); border: var(--lj-bd);
}
.lj2 .lj-prose ol { counter-reset: ljol; }
.lj2 .lj-prose ol li { counter-increment: ljol; }
.lj2 .lj-prose ol li::before {
  content: counter(ljol); position: absolute; left: 0; top: 1px;
  font-size: 14px; font-weight: 900; color: var(--lj-forest);
}
.lj2 .lj-prose blockquote {
  margin: 26px 0 0; padding: 0 0 0 20px; border-left: 6px solid var(--lj-field);
  font-size: 19px; font-weight: 700; color: var(--lj-ink); line-height: 1.4;
}
.lj2 .lj-prose img { border: var(--lj-bd); margin-top: 26px; }
.lj2 .lj-prose table { width: 100%; border-collapse: collapse; border: var(--lj-bd); margin-top: 26px; }
.lj2 .lj-prose th, .lj2 .lj-prose td { border: 1px solid var(--lj-rule-soft); padding: 12px 14px; text-align: left; font-size: 16px; }
.lj2 .lj-prose th { background: var(--lj-shell); color: var(--lj-ink); font-weight: 900; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
.lj2 .lj-prose--tight { max-width: none; }

/* ── Article layout: body + sticky sidebar ────────────────────────────── */
.lj2 .lj-article { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 56px; align-items: start; }
.lj2 .lj-aside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.lj2 .lj-aside__box { border: var(--lj-bd); background: var(--lj-paper); padding: 24px 22px; }
.lj2 .lj-aside__box--ink { background: var(--lj-ink); border-color: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-aside__box--ink .lj-body { color: var(--lj-dim); }
.lj2 .lj-aside__box h2,
.lj2 .lj-aside__box h3 { font-size: 18px; line-height: 1.08; letter-spacing: -.4px; margin-bottom: 12px; }
.lj2 .lj-aside__box .lj-btn { width: 100%; margin-top: 16px; }
.lj2 .lj-aside__links { display: flex; flex-direction: column; }
.lj2 .lj-aside__links a {
  padding: 12px 0; border-bottom: 1px solid var(--lj-rule-soft);
  font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 10px;
}
.lj2 .lj-aside__box--ink .lj-aside__links a { border-bottom-color: #2B372F; color: #C6CCC8; }
.lj2 .lj-aside__links a::after { content: "→"; margin-left: auto; color: var(--lj-forest); }
.lj2 .lj-aside__box--ink .lj-aside__links a::after { color: var(--lj-field); }
.lj2 .lj-aside__links a:hover { color: var(--lj-forest); }
.lj2 .lj-aside__box--ink .lj-aside__links a:hover { color: var(--lj-field); }

/* ── Item chips — "what we take" lists on service + city pages ────────── */
.lj2 .lj-items { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 0; border-top: var(--lj-bd); border-left: var(--lj-bd); }
.lj2 .lj-items li {
  padding: 15px 18px; border-right: var(--lj-bd); border-bottom: var(--lj-bd);
  font-size: 15px; font-weight: 700; color: var(--lj-ink-2); background: var(--lj-paper);
  display: flex; align-items: center; gap: 12px;
}
.lj2 .lj-items li::before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; background: var(--lj-field); border: var(--lj-bd); }
.lj2 .lj-band--ink .lj-items { border-color: #2B372F; }
.lj2 .lj-band--ink .lj-items li { background: var(--lj-ink-2); border-color: #2B372F; color: #D4DAD6; }
.lj2 .lj-items--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ── Pricing ──────────────────────────────────────────────────────────── */
.lj2 .lj-load { border: var(--lj-bd); background: var(--lj-paper); display: flex; flex-direction: column; }
.lj2 .lj-load__bar { height: 130px; background: var(--lj-shell); border-bottom: var(--lj-bd); position: relative; overflow: hidden; }
.lj2 .lj-load__fill { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--lj-field); border-top: var(--lj-bd); }
.lj2 .lj-load__fill span {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-size: 14px; font-weight: 900; letter-spacing: 1.4px; color: var(--lj-ink);
}
.lj2 .lj-load__body { padding: 22px 20px; display: flex; flex-direction: column; flex: 1; }
.lj2 .lj-load__vol { font-size: 14px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lj-forest); margin-bottom: 10px; }

/* ── Services index — grouped columns ─────────────────────────────────── */
.lj2 .lj-group { border: var(--lj-bd); background: var(--lj-paper); display: flex; flex-direction: column; }
.lj2 .lj-group__head { background: var(--lj-ink); color: var(--lj-paper); padding: 20px 22px; border-bottom: var(--lj-bd); }
.lj2 .lj-group__head h3 { font-size: 19px; letter-spacing: -.4px; margin: 0 0 6px; }
.lj2 .lj-group__head p { font-size: 14.5px; font-weight: 500; color: var(--lj-dim); line-height: 1.5; }
.lj2 .lj-group__list { display: flex; flex-direction: column; padding: 6px 22px 20px; }
.lj2 .lj-group__list a {
  padding: 11px 0; border-bottom: 1px solid var(--lj-rule-soft);
  font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.lj2 .lj-group__list a::after { content: "→"; margin-left: auto; color: var(--lj-forest); }
.lj2 .lj-group__list a:hover { color: var(--lj-forest); }
.lj2 .lj-group__list a:last-child { border-bottom: 0; }

/* ── Blog cards ───────────────────────────────────────────────────────── */
.lj2 .lj-post { border: var(--lj-bd); background: var(--lj-paper); display: flex; flex-direction: column; }
.lj2 .lj-post__shot { height: 190px; border-bottom: var(--lj-bd); overflow: hidden; position: relative; }
.lj2 .lj-post__shot img { width: 100%; height: 100%; object-fit: cover; }
.lj2 .lj-post__body { padding: 22px 20px; display: flex; flex-direction: column; flex: 1; }
.lj2 .lj-post__date { font-size: 13.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lj-forest); margin-bottom: 10px; }
.lj2 .lj-post__more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.lj2 .lj-post--lead { grid-column: span 2; }
.lj2 .lj-post--lead .lj-post__shot { height: 300px; }

/* ── Scenario cards — city pages ──────────────────────────────────────── */
.lj2 .lj-scenario { border: var(--lj-bd); background: var(--lj-paper); padding: 26px 24px; display: flex; flex-direction: column; }
.lj2 .lj-scenario h3 { font-size: 18px; line-height: 1.14; letter-spacing: -.3px; margin-bottom: 12px; }
.lj2 .lj-scenario ul { margin-top: 16px; border-top: 1px solid var(--lj-rule-soft); }
.lj2 .lj-scenario li {
  padding: 10px 0 0; font-size: 14.5px; font-weight: 700; color: var(--lj-ink-2);
  display: flex; align-items: flex-start; gap: 10px;
}
.lj2 .lj-scenario li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; background: var(--lj-field); border: 2px solid var(--lj-ink); }

/* ── Route strip — where the crew already runs ────────────────────────── */
.lj2 .lj-route { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: var(--lj-bd); background: var(--lj-paper); padding: 18px 20px; }
.lj2 .lj-route .lbl { font-size: 13.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lj-muted); }
.lj2 .lj-route .pin { background: var(--lj-ink); color: var(--lj-paper); padding: 8px 14px; font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.lj2 .lj-route a.pin { background: var(--lj-field); color: var(--lj-ink); }
.lj2 .lj-route a.pin:hover { background: var(--lj-ink); color: var(--lj-paper); }

/* ── Note card ────────────────────────────────────────────────────────── */
.lj2 .lj-note { border: var(--lj-bd); border-left: 8px solid var(--lj-field); background: var(--lj-paper); padding: 24px 26px; }
.lj2 .lj-note h3 { font-size: 17px; margin-bottom: 10px; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.lj2 .lj-form { border: var(--lj-bd); background: var(--lj-paper); padding: 30px 28px; }
.lj2 .lj-form h3 { font-size: 22px; letter-spacing: -.6px; margin-bottom: 6px; }
.lj2 .lj-form .hint { font-size: 14.5px; font-weight: 600; color: var(--lj-muted); margin-bottom: 22px; }
.lj2 .lj-field { display: block; margin-bottom: 16px; }
.lj2 .lj-field span { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 7px; color: var(--lj-ink); }
.lj2 .lj-field input, .lj2 .lj-field textarea, .lj2 .lj-field select {
  width: 100%; border: var(--lj-bd); border-radius: 0; background: var(--lj-paper);
  padding: 14px 14px; font-size: 16px; font-weight: 600; color: var(--lj-ink); min-height: 52px;
}
.lj2 .lj-field textarea { min-height: 128px; resize: vertical; }
.lj2 .lj-field input:focus, .lj2 .lj-field textarea:focus, .lj2 .lj-field select:focus {
  outline: none; border-color: var(--lj-forest); box-shadow: inset 0 0 0 2px var(--lj-field);
}
.lj2 .lj-form .callnote { margin-top: 18px; font-size: 14.5px; font-weight: 700; color: var(--lj-muted); }
.lj2 .lj-form .callnote a { color: var(--lj-forest); font-weight: 900; }
.lj2 .lj-embed { border: var(--lj-bd); background: var(--lj-paper); }
.lj2 .lj-embed iframe { display: block; width: 100%; min-height: 760px; border: 0; }

/* ── Contact detail rows ──────────────────────────────────────────────── */
.lj2 .lj-contact-rows { border-top: var(--lj-bd); }
.lj2 .lj-contact-rows > div { border-bottom: var(--lj-bd); padding: 20px 0; display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.lj2 .lj-contact-rows dt, .lj2 .lj-contact-rows .k {
  flex: 0 0 150px; font-size: 13.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lj-muted);
}
.lj2 .lj-contact-rows .v { font-size: 17px; font-weight: 700; color: var(--lj-ink); }
.lj2 .lj-contact-rows .v a { color: var(--lj-forest); }

/* ── Confirmation / 404 panel ─────────────────────────────────────────── */
.lj2 .lj-panel { border: var(--lj-bd-3); background: var(--lj-paper); padding: 48px 44px; max-width: 780px; }
.lj2 .lj-panel .tick {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  background: var(--lj-field); border: var(--lj-bd); font-size: 26px; margin-bottom: 22px;
}

/* ── Alternating band helper for long stacked sections ────────────────── */
.lj2 .lj-hr { border: 0; border-top: var(--lj-bd); margin: 0; }

/* ── New-primitive breakpoints ────────────────────────────────────────── */
@media (max-width: 1080px) {
  .lj2 .lj-article { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .lj2 .lj-aside { position: static; }
  .lj2 .lj-phero-facts { grid-template-columns: repeat(2, 1fr); }
  .lj2 .lj-phero-facts > div:nth-child(odd) { border-left: 0; }
  .lj2 .lj-phero-facts > div:nth-child(n+3) { border-top: 2px solid rgba(255,255,255,.16); }
  .lj2 .lj-items { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-post--lead { grid-column: span 2; }
  .lj2 .lj-phero .inner { padding: 54px 0 50px; }
}
@media (max-width: 720px) {
  /* Type spans nearly the full width on a phone, so the horizontal ramp has
     nothing to fall off into — a flat scrim is right here. Lightened in step
     with the desktop change now that the facts rail carries its own field. */
  .lj2 .lj-phero::after { background: rgba(12,26,17,.78); }
  .lj2 .lj-phero .inner { padding: 40px 0 38px; }
  /* Two up, not four stacked: at one per row the fact rail and the trust strip
     together spent ~700px of the fold on chrome before any copy. */
  .lj2 .lj-phero-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-phero-facts > div { padding: 14px 16px; font-size: 12px; }
  .lj2 .lj-phero-facts > div:nth-child(odd) { border-left: 0; }
  .lj2 .lj-phero-facts > div:nth-child(n+3) { border-top: 2px solid rgba(255,255,255,.16); }
  .lj2 .lj-phero-facts b { font-size: 17px; }
  .lj2 .lj-phero .lj-btns { width: 100%; }
  .lj2 .lj-phero .lj-btns .lj-btn { flex: 1; }
  .lj2 .lj-items, .lj2 .lj-items--2 { grid-template-columns: minmax(0,1fr); }
  /* 15px and 14.5px sit under the 16px AP-FONT1 hard floor. Raised at phone width only
     (2026-08-26, check_mobile_setup.py -> M7 on alabama-junk and legend-junk-removal);
     the desktop grid keeps its tighter type. */
  .lj2 .lj-items li { font-size: 16px; }
  .lj2 .lj-group__head p { font-size: 16px; }
  .lj2 .lj-post--lead { grid-column: span 1; }
  .lj2 .lj-post--lead .lj-post__shot { height: 190px; }
  .lj2 .lj-prose { font-size: 17px; }
  .lj2 .lj-prose h2 { font-size: 25px; letter-spacing: -.8px; margin-top: 36px; }
  .lj2 .lj-prose h3 { font-size: 19px; }
  .lj2 .lj-panel { padding: 32px 22px; }
  .lj2 .lj-form { padding: 24px 20px; }
  .lj2 .lj-contact-rows dt, .lj2 .lj-contact-rows .k { flex: 0 0 100%; }
  .lj2 .lj-embed iframe { min-height: 900px; }
  .lj2 .lj-route { gap: 8px; padding: 14px 16px; }
}

/* ── Breakpoints ──────────────────────────────────────────────────────── */
@media (max-width: 1130px) {
  .lj2 .lj-burger { display: flex; margin-left: 12px; }
  .lj2 .lj-nav { display: none; }
  .lj2 .lj-header-cta--book { display: none; }
  .lj2 .lj-header .lj-header-cta--call { display: inline-flex; margin-left: auto; padding: 13px 16px; font-size: 14px; letter-spacing: .8px; min-height: 46px; white-space: nowrap; flex: 0 0 auto; }
}

@media (max-width: 1080px) {
  .lj2 { --lj-space-tight: 48px; --lj-space: 72px; --lj-space-major: 92px; }
  .lj2 .lj-hero-grid { grid-template-columns: minmax(0,1fr); }
  .lj2 .lj-hero-type { padding: 48px 32px; }
  .lj2 .lj-hero-shot { min-height: 420px; }
  /* Stacked, the shot goes from a tall portrait box to a short wide one, and
     `center top` crops straight into the tree line. Drop the focal point so the
     crew and the customer stay in frame. */
  .lj2 .lj-hero-shot img { object-position: center 38%; }
  .lj2 .lj-split, .lj2 .lj-split--wide-l, .lj2 .lj-split--wide-r { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .lj2 .lj-g3, .lj2 .lj-g4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .lj2 .lj-trust .row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .lj2 .lj-trust .row > div:nth-child(odd) { border-left: 0; }
  .lj2 .lj-h1, .lj2 .lj-h1--big { font-size: 52px; letter-spacing: -1.8px; }
  .lj2 .lj-h2 { font-size: 38px; letter-spacing: -1.4px; }
  .lj2 .lj-footer .cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; }
  .lj2 .lj-head-row .lj-lede { margin-left: 0; text-align: left; }
  .lj2 .lj-badge-rating { margin-left: 0; align-self: flex-start; }
  .lj2 .lj-owner-shot img { min-height: 320px; }
}

@media (max-width: 720px) {
  .lj2 { --lj-gut: 20px; --lj-space-tight: 40px; --lj-space: 56px; --lj-space-major: 72px; }
  .lj2 .lj-header .lj-wrap { height: 76px; gap: 10px; }
  .lj2 .lj-logo { --lj-logo-pad: 10px; --lj-logo-h: 50px; }
  /* Same artwork-derived edge as desktop, scaled to the 50px mark. */
  body[data-client="legend-junk-removal"] .lj2 .lj-logo { --lj-logo-box: 99px; --lj-logo-w: 101.35px; }
  .lj2 .lj-logo img { height: var(--lj-logo-h); }
  .lj2 .lj-drawer { padding-top: 88px; }
  /* The bar wraps to two rows on a phone and the number is already the header
     pill directly below it, so on mobile it carries hours only — the one fact
     the page doesn't repeat above the fold. */
  .lj2 .lj-topbar .lj-wrap > span:not(.lj-hours) { display: none; }
  .lj2 .lj-hide-sm { display: none; }
  .lj2 .lj-g2, .lj2 .lj-g3, .lj2 .lj-g4 { grid-template-columns: minmax(0,1fr); }
  .lj2 .lj-trust .row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-trust .row > div { padding: 14px 14px; font-size: 11.5px; letter-spacing: 1px; }
  .lj2 .lj-trust .row > div:nth-child(odd) { border-left: 0; }
  .lj2 .lj-trust .row > div:nth-child(n+3) { border-top: 2px solid rgba(12,26,17,.2); }
  .lj2 .lj-h1, .lj2 .lj-h1--big { font-size: min(38px, 8.8vw); letter-spacing: -1.2px; }
  .lj2 .lj-h2 { font-size: min(30px, 7.2vw); letter-spacing: -1px; }
  .lj2 .lj-close h2 { font-size: 28px; }
  .lj2 .lj-close .lj-btns { margin-left: 0; width: 100%; }
  .lj2 .lj-close .lj-btn { flex: 1; }
  .lj2 .lj-hero-type { padding: 40px 20px; }
  .lj2 .lj-hero-type .lj-btns { width: 100%; }
  .lj2 .lj-hero-type .lj-btn { flex: 1; }
  /* The hero's call button is hidden on a phone (the header pill carries the
     call), which leaves Get free estimate as the only action — so it takes back
     the orange the 1130px book/call swap had handed to the call button. */
  .lj2 .lj-hero-call { display: none; }
  .lj2 .lj-hero-type .lj-btns--book-call .lj-btn--go { background: var(--lj-go); color: var(--lj-ink); }
  .lj2 .lj-hero-type .lj-btns--book-call .lj-btn--go:hover { background: var(--lj-ink); color: var(--lj-go); }
  .lj2 .lj-hero-flag { max-width: none; right: 0; padding: 16px 20px; }
  .lj2 .lj-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 0; }
  .lj2 .lj-stat--mobile-only { display: block; }
  .lj2 .lj-btn { font-size: 14px; padding: 16px 18px; letter-spacing: 1px; }
  .lj2 .lj-btns .lj-btn { font-size: 14px; padding: 15px 12px; letter-spacing: .6px; }
  .lj2 .lj-footer .cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px 20px; padding: 46px 0 34px; }
  .lj2 .lj-footer .blurb { max-width: none; }
  .lj2 .lj-shotband::after { background: rgba(12,26,17,.9); }
  .lj2 .lj-shotband { min-height: 0; }
  .lj2 .lj-gal figure { height: 132px; }
  .lj2 .lj-head-row { margin-bottom: 28px; }
  .lj2 .lj-pull { font-size: 19px; padding-left: 16px; }
}