/* ══════════════════════════════════════════════════════════════════════════
   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-refuse:     #C62828;   /* refusal-list marker — a 'we cannot take this' item never wears the brand colour (Brett, 2026-09-12) */
  --lj-field:      #2ECC81;   /* uniform-shirt green, brightened for on-ink use — ink on top = 8.6:1 (Brett, 2026-08-31: match the crew shirt) */
  --lj-forest:     #0D6E4A;   /* uniform-shirt green, darkened for display type on white, 6.3: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-mist:       #ECF3EE;   /* third light ground — a whisper of the shirt green.
                                Exists so a run of light bands alternates across three
                                tones instead of ping-ponging between two, and so the
                                brand green appears in the page's quiet parts, not only
                                in the trust bar and the closer (Brett, 2026-09-01). */

  --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--mist  { background: var(--lj-mist); }
.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)); }
/* Five items in one row (five pricing load sizes) instead of an orphaned 3 + 2 (BS-18). */
.lj2 .lj-g5 { grid-template-columns: repeat(5, 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 and 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. The two middle items go.
     Each item is now hidden by its own name rather than by an exclusion list:
     the old `span:not(.lj-hours):not(.lj-topbar-phone)` hid by DEFAULT, so any
     span added to the bar silently vanished below 1130px — and it outranked the
     narrower breakpoint that wanted one of them back. (2026-09-04) */
  .lj2 .lj-topbar .lj-topbar-rating,
  .lj2 .lj-topbar .lj-topbar-sameday { display: none; }
}

/* ── Top bar + header ─────────────────────────────────────────────────── */
.lj2 .lj-topbar { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-topbar .lj-wrap {
  min-height: 48px; display: flex; align-items: center; gap: 14px 46px; flex-wrap: wrap;
  padding-top: 6px; padding-bottom: 6px;
  font-size: 14px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
/* Full desktop width, all four items present: spread them across the bar so
   each has visible breathing room instead of bunching flush left with a wall
   of empty space on the right (Brett, 2026-09-11). Narrower breakpoints below
   keep their own explicit justify-content and are unaffected. */
@media (min-width: 1131px) {
  .lj2 .lj-topbar .lj-wrap { justify-content: space-between; }
}
/* 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);
  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; }
.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);
  transform-origin: center; transition: transform .18s ease, opacity .12s ease;
}
.lj2 .lj-burger[aria-expanded="true"] { background: var(--lj-field); }
/* Open, the three bars fold into an X so the control reads as "close" rather
   than "the menu you already opened". The 10.5px is arithmetic, not a guess:
   the 52px button minus 28px of vertical padding leaves a 24px inner box, so
   the outer bars' centres sit 10.5px either side of the middle one.
   (Brett, 2026-09-04) */
.lj2 .lj-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.lj2 .lj-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lj2 .lj-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .lj2 .lj-burger span { transition: none; }
}

.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: 12px 0; font-size: 17px; font-weight: 700; color: #D4DAD6; }
.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; }
/* The flag is not a card dropped on the photo — it is literally a fourth cell of
   the stat row beside it, and it is built to that footprint: the same 3px rule
   across the top, the same 18px below the rule before the type starts, the same
   bottom line (56px above the hero's edge, which is the type column's own
   padding-bottom), the same type, and the same width. The width is derived
   rather than guessed: the shot is 1fr of a 1.05fr/1fr grid, so the type column
   is 1.05x the shot, less its 128px of padding, split three ways — the exact
   width of one stat cell at any viewport. That footprint is also why the flag
   carries the rating and the ownership line sits in the stat row: it is the only
   pairing where both fit their cell. Measured at 1280: stat cell 175.9 wide,
   rule at 704.8, bottom 811.4 — flag identical. (Brett, 2026-09-04)
   Revised 2026-09-05: the box now runs all the way down to the green trust band
   the way the paper column beside it does. Ending 56px short left a strip of
   photograph under it and read as a floating label rather than the fourth cell
   of the same row. */
.lj2 .lj-hero-flag {
  position: absolute; left: 0; bottom: 0; background: var(--lj-paper); color: var(--lj-ink);
  border-top: var(--lj-bd-3); padding: 18px 0 56px 26px; pointer-events: none;
  width: calc((100% * 1.05 - 128px) / 3);
}
/* The box reaches the green band by carrying the old 56px gap as bottom padding
   rather than as an offset — the top rule then stays exactly where it was proved
   to line up with the stat row, at any viewport, instead of drifting upward as
   the copy rewraps. The Google mark lives in that padding and is positioned out
   of flow on purpose: contributing height would push the rule off that line
   again, which is the bug this shape avoids. (Brett, 2026-09-05) */
.lj2 .lj-hero-flag__badge {
  position: absolute; left: 26px; bottom: 15px;
  display: flex; align-items: center; gap: 0;
}
/* The mark's spacing is a margin, not a flex `gap`, and the <source> tags are
   explicitly hidden. The dist optimizer rewrites the <img> into a <picture>
   with two <source> children, and `picture { display: contents }` promotes
   those to flex items of this row: zero-wide, but each still consumes a gap,
   which shifted the mark 18px off the left edge of the box. */
.lj2 .lj-hero-flag__badge source { display: none; }
.lj2 .lj-hero-flag .lj-hero-flag__stars { margin-left: 9px; }
/* `position: static` is load-bearing: the badge's mark is a descendant of
   .lj-hero-shot, whose `img` rule absolutely positions the hero photograph.
   Without this the Google mark inherits that and lands in the flag's top-left
   corner instead of the badge row — which is exactly what it did. */
.lj2 .lj-hero-flag__badge img { position: static; width: 26px; height: 26px; display: block; flex: 0 0 auto; }
/* Three classes deep so it outranks `.lj2 .lj-hero-flag span`, which would
   otherwise hand the stars the muted grey of the review-count line. */
.lj2 .lj-hero-flag .lj-hero-flag__stars {
  display: block; margin-top: 0; font-size: 15px; letter-spacing: 1.5px;
  color: var(--lj-go); line-height: 1; text-transform: none;
}
.lj2 .lj-hero-flag b { display: block; font-weight: 900; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; }
.lj2 .lj-hero-flag 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-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; }

/* Interior split hero — the homepage's own shape, reused on every inside page.
   Copy in the paper column on the left, photograph uncovered on the right. This
   replaced an overlay treatment: measured across the interior photos, crew faces
   span x .21–.92 and sit about a third down, so no overlay column and no scrim
   height was clear of a face. Giving the picture its own half is the only version
   where nothing sits on top of anybody. (Brett, 2026-09-02) */
.lj2 .lj-phero-split .lj-hero-type { padding: 56px 56px 52px; }
.lj2 .lj-phero-split .lj-hero-shot { min-height: 540px; }
/* Interior photos are wider than the homepage's and their subjects sit higher —
   `center top` cuts the tree line in, `center 25%` keeps heads and shoulders. */
.lj2 .lj-phero-split .lj-hero-shot img { object-position: center 25%; }
/* An inside-page H1 carries a real sentence, not three stacked words. */
.lj2 .lj-phero-split .lj-h1 { font-size: 46px; letter-spacing: -1.8px; line-height: .96; }
.lj2 .lj-phero-split .lj-lede { max-width: 560px; }
.lj2 .lj-phero-split .lj-eyebrow { margin-bottom: 14px; }
.lj2 .lj-phero-split--slim .lj-hero-shot { min-height: 420px; }
.lj2 .lj-phero-split--slim .lj-hero-type { padding: 46px 56px 44px; }
.lj2 .lj-stats--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.lj2 .lj-stats--4 b { font-size: 20px; letter-spacing: -.6px; }
.lj2 .lj-stats--4 span { font-size: 12px; letter-spacing: 1px; }
.lj2 .lj-stat--mobile-only { display: none; }
/* CTA-adjacent micro-copy under a hero button pair (AP36, opt-in: v2ShowCtaMicroCopy). */
.lj2 .lj-cta-micro { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--lj-muted); margin-top: 10px; }
.lj2 .lj-phero .lj-cta-micro { color: #D4DAD6; }

/* ── 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(var(--lj-ink-tint-rgb, 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--go .lj-body { color: rgba(var(--lj-ink-tint-rgb, 12,26,17),.78); }
.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(var(--lj-ink-tint-rgb, 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; white-space: nowrap; 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);
}

/* ── Google rating badge — real stars/count instead of a "5.0 across N
   reviews" claim in running copy (Brett, 2026-09-11). Reused in the "Six
   reasons" grid and above the review-wall heading. */
.lj2 .lj-google-badge { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lj2 .lj-google-badge img { flex: none; }
.lj2 .lj-google-badge__text { display: block; }
.lj2 .lj-google-badge b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.3px; color: var(--lj-forest); }
.lj2 .lj-google-badge__text > span { display: block; font-size: 13px; font-weight: 700; color: var(--lj-ink-2); }
.lj2 .lj-google-badge--heading { align-items: center; margin-bottom: 0; }
.lj2 .lj-google-badge--heading .lj-h2 { margin: 0; }

/* ── 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; }

/* ── FAQ topic grouping (/faq/) ────────────────────────────────────────────
   Twenty-one questions in one undifferentiated accordion made a visitor open
   half of them looking for the one they came for (Brett, 2026-09-01). The page
   now groups them and rails the topics at the top; the rail is plain anchor
   links so it works with no JS and the browser handles the scroll. */
/* Neighborhood chips on the city page's "Where we run" band. Same pin as the
   old route strip so nothing new is invented, just laid out to breathe. */
.lj2 .lj-hoods { display: flex; flex-wrap: wrap; gap: 18px 12px; }
.lj2 .lj-hoods .pin {
  border: var(--lj-bd); background: var(--lj-paper); padding: 16px 20px;
  font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  color: var(--lj-ink); line-height: 1;
}

.lj2 .lj-faq-jump {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 30px; padding-bottom: 26px; border-bottom: var(--lj-bd);
}
.lj2 .lj-faq-jump a {
  border: var(--lj-bd); padding: 10px 15px; font-size: 13.5px; font-weight: 900;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--lj-ink);
  text-decoration: none; background: var(--lj-paper); line-height: 1;
}
.lj2 .lj-faq-jump a:hover { background: var(--lj-ink); color: var(--lj-paper); }
.lj2 .lj-faq-jump a:focus-visible { outline: 3px solid var(--lj-go, currentColor); outline-offset: 3px; }
.lj2 .lj-faq-group + .lj-faq-group { margin-top: 44px; }
.lj2 .lj-faq-group__head {
  margin: 0 0 18px; font-size: 26px; font-weight: 900;
  letter-spacing: .3px; text-transform: uppercase; color: var(--lj-forest);
}

/* ── 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: 14.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.lj2 .lj-review .job { font-size: 14.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lj-muted); margin-top: 3px; }
/* When the review was left. Quieter than the job label on purpose: the date
   is evidence the business is still working, not a heading. */
.lj2 .lj-review .when { font-size: 13px; color: var(--lj-muted); opacity: .78; margin-top: 2px; }
.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(var(--lj-ink-tint-rgb, 12,26,17),.95) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.88) 42%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.45) 100%);
}
/* Legend's own hero/shot-band photos read better under a lighter scrim (Brett, 2026-08-31) — kept client-scoped so the other nine junkra-theme clients keep their original, already-approved overlay. */
body[data-client="legend-junk-removal"] .lj2 .lj-shotband::after {
  background: linear-gradient(90deg, rgba(var(--lj-ink-tint-rgb, 12,26,17),.8) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.58) 42%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.2) 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: 14.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: 14.5px; font-weight: 600; color: #97A098;
}
.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
   ────────────────────────────────────────────────────────────────────────── */

/* ── 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(var(--lj-ink-tint-rgb, 12,26,17),.86) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.8) 40%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.6) 56%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.18) 78%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.04) 100%);
}
body[data-client="legend-junk-removal"] .lj2 .lj-phero::after {
  background: linear-gradient(90deg, rgba(var(--lj-ink-tint-rgb, 12,26,17),.74) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.66) 38%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.42) 54%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.12) 76%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.02) 100%);
}
/* Text-side variants — the composer picks whichever side the photo's subject
   is NOT on, per photo, rather than always darkening the left (Brett, 2026-08-31:
   heads/faces were landing under the copy on several interior heroes). */
.lj2 .lj-phero--right::after {
  background: linear-gradient(270deg, rgba(var(--lj-ink-tint-rgb, 12,26,17),.74) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.66) 38%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.42) 54%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.12) 76%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.02) 100%);
}
/* Right-side heroes align their copy with MARGINS, not flex. The previous
   `display:flex` on .inner and .lj-wrap laid the eyebrow, H1, lede and button pair
   out as a ROW, so the sub-copy printed straight across the headline (Brett,
   2026-09-01 — /service-areas/); it also shrink-wrapped .lj-wrap, which broke the
   page gutter the rest of the site aligns to, and caught the facts rail's own
   .lj-wrap outside .inner. Each block keeps its own max-width and is pushed right
   with margin-left:auto — no layout mode change, nothing to re-stack. */
/* Legend's own scrim override is scoped to `body[data-client=...] .lj-phero`, which
   outranks the generic `--right` variant — so a right-side hero was getting the LEFT-dark
   ramp and the copy landed on the uncovered half (that is what "text isn't displaying
   properly" on /service-areas/ actually was). Mirror it, and carry a little more density
   than the left version: the right of these photos is sky and a white-lettered truck. */
body[data-client="legend-junk-removal"] .lj2 .lj-phero--right::after {
  background: linear-gradient(270deg, rgba(var(--lj-ink-tint-rgb, 12,26,17),.86) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.78) 38%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.5) 56%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.14) 78%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.02) 100%);
}
.lj2 .lj-phero--right .inner .lj-wrap > * { margin-left: auto; text-align: right; }
.lj2 .lj-phero--right .lj-btns { justify-content: flex-end; }
.lj2 .lj-phero--center::after {
  background: linear-gradient(90deg, rgba(var(--lj-ink-tint-rgb, 12,26,17),.2) 0%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.62) 30%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.62) 70%, rgba(var(--lj-ink-tint-rgb, 12,26,17),.2) 100%);
}
.lj2 .lj-phero--center .lj-wrap { text-align: center; }
.lj2 .lj-phero--center .lj-eyebrow,
.lj2 .lj-phero--center .lj-h1,
.lj2 .lj-phero--center .lj-lede { margin-left: auto; margin-right: auto; }
.lj2 .lj-phero--center .lj-btns { justify-content: center; }

/* 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-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); }

/* ── FAQ sidebar experiment: one merged sticky card, opt-in via config.faqSidebarStyle (2026-09-11) ── */
.lj2 .lj-article--card { gap: 64px; }
.lj2 .lj-aside--card .lj-aside__box--primary { padding: 34px 28px; }
.lj2 .lj-aside--card .lj-aside__box--primary h3 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--lj-dim); margin-bottom: 14px; }
.lj2 .lj-aside__divider { height: 1px; background: #2B372F; margin: 28px 0 32px; }
.lj2 .lj-aside__links--plain a { border-bottom: none; padding: 9px 0; font-weight: 700; }

/* ── 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); }
/* A refusal list ("what we cannot take") marks every item in red. Green is the brand's
   yes-colour and it reads as approval on a list of things we will refuse to load — the
   marker is the only thing a scanning phone user sees before the label. Set by
   components/v2/ItemList.astro (kind="refused") — the caller declares intent and this
   class is derived. Backstopped by scripts/check_refusal_markers.py (source) and CD-29
   in scripts/check_conversion_density.py (render), both blocking at Phase 7h.
   Doctrine: docs/rules/design-visual.md. */
.lj2 .lj-items--refuse li::before { background: var(--lj-refuse); }
.lj2 .lj-band--ink .lj-items--refuse li::before { background: var(--lj-refuse); }
.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,
  .lj2 .lj-article--card { 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(var(--lj-ink-tint-rgb, 12,26,17),.78); }
  body[data-client="legend-junk-removal"] .lj2 .lj-phero::after,
  body[data-client="legend-junk-removal"] .lj2 .lj-phero--right::after,
  body[data-client="legend-junk-removal"] .lj2 .lj-phero--center::after { background: rgba(var(--lj-ink-tint-rgb, 12,26,17),.62); }
  .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: 13px; }
  .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); }
  /* BS-1 / CD-1: on a phone the photo leads — EVERY hero, not just the homepage.
     Stacked, the type column came first and pushed the hero image below the fold,
     so a page opened on a wall of words with nothing to look at. The interior
     heroes were exempted here originally and that is exactly what Brett found on
     the city pages: no picture at the top. One rule, all page types now.
     (Brett, 2026-09-04) */
  .lj2 .lj-hero .lj-hero-shot { order: -1; }
  .lj2 .lj-hero-type { padding: 48px 32px; }
  .lj2 .lj-hero-shot { min-height: 420px; }
  .lj2 .lj-phero-split .lj-hero-shot,
  .lj2 .lj-phero-split--slim .lj-hero-shot { min-height: 360px; }
  .lj2 .lj-phero-split .lj-hero-type { padding: 48px 32px; }
  .lj2 .lj-phero-split .lj-h1 { font-size: 44px; }
  /* 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-g5 { 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; }
  .lj2 .lj-logo img { height: var(--lj-logo-h); }
  /* On a phone the header is a white bar with a white burger and a white drawer,
     and the ink logo block was the one dark object in it — it read as a separate
     panel rather than part of the header. Inverted: paper ground, ink artwork.
     brightness(0) rather than invert(1) because it takes any logo to solid black,
     including a coloured one; opt-in per client since it is only correct for a
     mark that is a single flat colour. (Brett, 2026-09-04) */
  /* Pulled flush to the viewport edge the block read as cropped, not placed.
     Most of the negative gutter is cancelled, not all of it: the full 20px
     pushed the call pill and the burger 2px past the right edge of a 375px
     screen. 12px buys the breathing room and still fits the row. The 3px drop
     optically centres the mark in the 76px bar — its own top whitespace made
     it sit high.
     (Brett, 2026-09-04) */
  .lj2 .lj-logo--ink-sm {
    background: var(--lj-paper); border-right: 0;
    margin-left: calc(var(--lj-gut) * -0.4); padding-left: 0; padding-right: 12px;
  }
  .lj2 .lj-logo--ink-sm img { filter: brightness(0); transform: translateY(3px); }
  .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 the phone and the rating drop out. What stays is
     the pair Brett asked for: hours on the left, same-day on the right — the two
     facts the page doesn't repeat above the fold. (Brett, 2026-09-04) */
  .lj2 .lj-topbar .lj-topbar-rating,
  .lj2 .lj-topbar .lj-topbar-phone { display: none; }
  .lj2 .lj-topbar .lj-wrap { gap: 10px; flex-wrap: nowrap; justify-content: space-between; }
  .lj2 .lj-topbar .lj-topbar-sameday {
    display: block; text-align: right; font-size: 11.5px; letter-spacing: .9px;
  }
  .lj2 .lj-topbar .lj-hours { font-size: 11.5px; letter-spacing: .9px; white-space: nowrap; }
  .lj2 .lj-hide-sm { display: none; }
  .lj2 .lj-g2, .lj2 .lj-g3, .lj2 .lj-g4 { grid-template-columns: minmax(0,1fr); }
  .lj2 .lj-g5 { grid-template-columns: minmax(0,1fr); }
  /* A .lj-group is a whole card — dark header, blurb, and its own link list — not a
     short pictureless cell, so it is excluded from the two-up above. Nesting the two
     rules put a 2-column list inside a 209px card: 61px columns with "Appliance
     Removal" wrapped 143px tall. Measured on the live phone render 2026-09-03; the
     group stays full width so its list gets ~153px columns. */
  /* BS-11 / CD-11 (2026-09-02) — short, pictureless cells go TWO-up on a phone.
     Collapsing every grid to one column turned a 12-item area list into twelve
     scrolls of 56px chips. Grids that carry a photo stay one-up: two 175px photo
     cards read as thumbnails, which is a worse trade than the height. :has() is the
     only honest way to ask "does this cell have a picture" in CSS; browsers without
     it fall back to the single column above, which is the safe direction. */
  .lj2 .lj-grid:not(:has(img)):not(:has(picture)):not(:has(svg)):not(:has(.lj-group)):not(:has(.lj-step)):not(:has(.lj-feat)):not(:has(.lj-scenario)):not(:has(.lj-load)) {
    grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 12px;
  }
  /* A half-width cell is ~165px, and the longest service names
     ("Construction Debris Removal") ran past that into a silent horizontal
     scroll — content hidden behind a gesture nobody makes. Let the label wrap
     instead. (M2, 2026-09-02.) */
  .lj2 .lj-grid:not(:has(img)):not(:has(picture)):not(:has(svg)):not(:has(.lj-group)):not(:has(.lj-step)):not(:has(.lj-feat)):not(:has(.lj-scenario)):not(:has(.lj-load)) > * {
    min-width: 0; overflow-wrap: anywhere;
  }
  /* BS-9 / BS-11 / CD-9 / CD-11 (2026-09-02): the services index stacked its group
     lists one link per row — 19 items in one group is 19 scrolls of identical
     71-95px rows, and nobody reaches the bottom. These are text links with an
     arrow, not photo cards, so two columns lose nothing and halve the page. The
     services index is the master page, so every service keeps its link here; the
     cap-at-8 treatment belongs on the pages that only preview the list. */
  .lj2 .lj-group__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-group__list a { min-width: 0; overflow-wrap: anywhere; }
  .lj2 .lj-group__list a:last-child { border-bottom: 1px solid var(--lj-line, rgba(var(--lj-ink-tint-rgb, 12,26,17),.14)); }
  .lj2 .lj-items, .lj2 .lj-items--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-items li { min-width: 0; overflow-wrap: anywhere; }
  .lj2 .lj-trust .row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lj2 .lj-trust .row > div { padding: 14px 14px; font-size: 12.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(var(--lj-ink-tint-rgb, 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-phero-split .lj-hero-type { padding: 40px 20px; }
  .lj2 .lj-stats--4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .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-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(var(--lj-ink-tint-rgb, 12,26,17),.9); }
  body[data-client="legend-junk-removal"] .lj2 .lj-shotband::after { background: rgba(var(--lj-ink-tint-rgb, 12,26,17),.68); }
  .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; }
}


/* ── In-page anchor offset ───────────────────────────────────────────────
   The header is sticky (178) and the topbar sits above it, so an anchored
   section otherwise lands under the chrome. Applies to every id target in the
   v2 shell, including the header's "Items we take" deep link. */
.lj2 [id] { scroll-margin-top: 108px; }
@media (max-width: 900px) { .lj2 [id] { scroll-margin-top: 86px; } }

/* ── Phone above-the-fold ─────────────────────────────────────────────────
   The fold is the whole ad spend. Measured against callprojunk.com at 390x844
   — the arrangement Brett asked every Legend page to replicate — a phone gets,
   in this order and nothing else: header, a 296px photo carrying the rating,
   the H1, four facts as a 2x2, and a fixed call bar on the floor. The hero's
   lede and its button pair are the two blocks that pushed the facts under the
   fold, and both are already carried elsewhere (the bar and the header pill
   hold the actions; the lede repeats on the section below). ProJunk's fold has
   the same six elements at 121/296/445/616/742/784. (Brett, 2026-09-04) */
@media (max-width: 720px) {
  .lj2 .lj-hero .lj-hero-shot { min-height: 296px; }
  .lj2 .lj-hero .lj-hero-type { padding: 26px 20px 30px; }
  .lj2 .lj-hero .lj-hero-type > .lj-lede,
  .lj2 .lj-hero .lj-hero-type > .lj-btns { display: none; }
  /* The micro-copy belongs to the hidden button pair, so it goes with it. */
  .lj2 .lj-hero .lj-hero-type > .lj-cta-micro { display: none; }
  .lj2 .lj-hero .lj-stats { margin-top: 22px; }

  /* The flag stops being a full-width band across the photo and becomes the
     rating chip in its corner — the one fact worth putting on the picture. The
     ownership line it carries on desktop moves into the stat grid, where
     ProJunk keeps it, so nothing is lost, only re-seated. */
  .lj2 .lj-hero-flag { width: auto; right: auto; bottom: 0; padding: 10px 16px 12px; }
  /* The chip is a corner label, not a badge — the Google lockup would double its
     height on the one screen where vertical space is the scarce resource. */
  .lj2 .lj-hero-flag__badge { display: none; }
  .lj2 .lj-hero-flag b { font-size: 17px; letter-spacing: -.4px; line-height: 1.05; }
  .lj2 .lj-hero-flag span { font-size: 11.5px; letter-spacing: .9px; margin-top: 2px; line-height: 1.35; }

  /* Interior pages read the same as the homepage: photo, then the eyebrow as a
     filled band rather than a line of small green type, then the H1, then the
     facts. The lede and the button pair are hidden by the rule above — the
     sticky bar carries the actions (BS-4). */
  .lj2 .lj-phero-split .lj-eyebrow--dark {
    background: var(--lj-ink); color: var(--lj-paper);
    padding: 11px 14px; margin-bottom: 16px; letter-spacing: 1.6px; font-size: 13px;
  }
  .lj2 .lj-phero-split .lj-h1 { font-size: 30px; letter-spacing: -1.1px; }
}

/* ── Sticky call bar ──────────────────────────────────────────────────────
   v2 suppresses the theme's own .sticky-mobile-cta, which left Legend with no
   floor action at all. This is the design system's own: call filled and
   dominant, book kept reachable beside it. Equal-width pill buttons with a
   frame and shadow so the pair reads as two buttons, not a flat split bar
   (Brett, 2026-09-11 — "make the two elements more clearly buttons... even
   size"). */
.lj2 .lj-stickybar { display: none; }
@media (max-width: 720px) {
  .lj2 .lj-stickybar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 70; background: var(--lj-paper);
    border-top: var(--lj-bd);
    /* The home-indicator strip is not free space — without the safe-area inset
       the bottom of both buttons sits under it on a notched phone. */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .lj2 .lj-stickybar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 12px; font-size: 15px; font-weight: 900;
    letter-spacing: .6px; text-transform: uppercase; text-decoration: none;
    border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
  }
  .lj2 .lj-stickybar .call { background: var(--lj-go); color: var(--lj-ink); }
  .lj2 .lj-stickybar .book { background: var(--lj-ink); color: var(--lj-paper); border: 2px solid var(--lj-ink); }
  /* BS-29: on the booking page itself the bar carries the phone alone, full width. */
  .lj2 .lj-stickybar--solo { grid-template-columns: minmax(0,1fr); }
  .lj2 .lj-footer { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body.lj-nav-open .lj2 .lj-stickybar { display: none; }
}

/* ── Rows instead of boxes on a phone ─────────────────────────────────────
   Two columns on a 390px screen leave a card 162px wide, and a step or a
   feature with a heading and two sentences in it then runs 470-540px tall —
   a 1:3 sliver. The content is not the problem; the box is. On a phone these
   groups drop the border and the fill and become full-width rows: the number
   or step label in a narrow left column, the heading and the copy taking the
   whole remaining width, one hairline between rows. A four-step group goes
   from 2x472 to roughly 380px total and fits one view, which is what BS-7 was
   ever asking for. (Brett, 2026-09-04) */
@media (max-width: 720px) {
  .lj2 .lj-grid:has(> .lj-step),
  .lj2 .lj-grid:has(> .lj-feat),
  .lj2 .lj-grid:has(> .lj-scenario) { grid-template-columns: minmax(0,1fr); gap: 0; }

  .lj2 .lj-step {
    display: grid; grid-template-columns: 64px minmax(0,1fr); column-gap: 14px;
    border: 0; border-top: 1px solid rgba(255,255,255,.22);
    background: none; padding: 14px 0 16px;
  }
  .lj2 .lj-step:first-child { border-top: 0; padding-top: 0; }
  .lj2 .lj-step--go, .lj2 .lj-step--ink { background: none; color: var(--lj-paper); }
  .lj2 .lj-step--go .lj-body, .lj2 .lj-step--ink .lj-body { color: var(--lj-dim); }
  .lj2 .lj-step .n {
    grid-column: 1; grid-row: 1 / span 2; margin: 0; color: var(--lj-field);
    font-size: 11.5px; letter-spacing: 1.4px; line-height: 1.25; padding-top: 3px;
  }
  .lj2 .lj-step--go .n { color: var(--lj-field); }
  .lj2 .lj-step .lj-h3, .lj2 .lj-step .lj-body { grid-column: 2; }
  .lj2 .lj-step .lj-h3 { margin-bottom: 4px; }

  .lj2 .lj-feat {
    /* max-content, not a fixed 44px: the badge carries "01" on most pages but "STEP 1"
       on /how-it-works/, which overflowed and wrapped inside a 44px column. */
    display: grid; grid-template-columns: minmax(44px, max-content) minmax(0,1fr); column-gap: 14px;
    border: 0; border-top: 1px solid var(--lj-rule-soft);
    background: none; padding: 14px 0 16px;
  }
  .lj2 .lj-feat:first-child { border-top: 0; padding-top: 0; }
  .lj2 .lj-feat .n { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; }
  .lj2 .lj-feat .lj-h3, .lj2 .lj-feat .lj-body { grid-column: 2; }
  .lj2 .lj-feat .lj-h3 { margin-bottom: 4px; }

  .lj2 .lj-scenario {
    border: 0; border-top: 1px solid var(--lj-rule-soft);
    background: none; padding: 14px 0 16px;
  }
  .lj2 .lj-scenario:first-child { border-top: 0; padding-top: 0; }

  /* The load cards are the one group whose box earns its keep: the fill bar is a
     gauge, and four gauges only read as a scale next to each other. Side by side
     on a phone that gauge is 169px wide with 400+px of copy hanging off it. So
     the card turns on its side — the gauge keeps its box in a narrow left
     column, the copy takes the rest of the width, and the four still read in
     order down the page. */
  .lj2 .lj-grid:has(> .lj-load) { grid-template-columns: minmax(0,1fr); gap: 0; }
  .lj2 .lj-load {
    display: grid; grid-template-columns: 104px minmax(0,1fr); column-gap: 16px;
    border: 0; border-top: 1px solid var(--lj-rule-soft); background: none;
    padding: 16px 0 18px; align-items: start;
  }
  .lj2 .lj-load:first-child { border-top: 0; padding-top: 0; }
  .lj2 .lj-load__bar { height: 104px; border: var(--lj-bd); }
  .lj2 .lj-load__fill span { font-size: 12px; letter-spacing: .8px; }
  .lj2 .lj-load__body { padding: 0; }
}


/* ==== BEGIN generated head-safe focal points — legend-junk-removal ====
   Generated by scripts/face_tools/gen_focal_css.py. Do not hand-edit: re-run the
   generator after any photo is added, replaced or re-cropped. Each rule names a
   photo whose highest face would lose its crown at the default centre crop.
   58 of 90 photos need one. */
body[data-client="legend-junk-removal"] img[src*="/about-team."] { object-position: 50% 45%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-01."] { object-position: 50% 10%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-02."] { object-position: 50% 19%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-02."] { object-position: 50% 13%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-03."] { object-position: 50% 15%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-04."] { object-position: 50% 43%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-05."] { object-position: 50% 15%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-06."] { object-position: 50% 22%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-07."] { object-position: 50% 26%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-08."] { object-position: 50% 42%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-09."] { object-position: 50% 10%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-11."] { object-position: 50% 27%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-12."] { object-position: 50% 23%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-13."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-15."] { object-position: 50% 28%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-17."] { object-position: 50% 37%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-02."] { object-position: 50% 20%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-03."] { object-position: 50% 7%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-04."] { object-position: 50% 6%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-05."] { object-position: 50% 7%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-06."] { object-position: 50% 15%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-customer-07."] { object-position: 50% 17%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-hero-01."] { object-position: 50% 11%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-hero-customer-01."] { object-position: 50% 27%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-hero-customer-03."] { object-position: 50% 23%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-hero-customer-04."] { object-position: 50% 19%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-hero-customer-05."] { object-position: 50% 17%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-above-playground-removal."] { object-position: 50% 40%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-appliance-removal."] { object-position: 50% 9%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-basement-cleanout."] { object-position: 50% 2%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-bathroom-demolition."] { object-position: 50% 11%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-carpet-removal."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-construction-debris-removal."] { object-position: 50% 25%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-couch-removal-2."] { object-position: 50% 17%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-couch-removal."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-deck-removal."] { object-position: 50% 13%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-demolition."] { object-position: 50% 22%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-donation."] { object-position: 50% 34%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-electronics-removal."] { object-position: 50% 5%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-estate-cleanout."] { object-position: 50% 18%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-fence-removal."] { object-position: 50% 13%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-garage-cleanout-2."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-garage-cleanout."] { object-position: 50% 23%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-hoarding-cleanout."] { object-position: 50% 15%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-hot-tub-removal."] { object-position: 50% 12%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-junk-removal-2."] { object-position: 50% 41%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-junk-removal."] { object-position: 50% 13%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-kitchen-cleanout."] { object-position: 50% 16%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-kitchen-demolition."] { object-position: 50% 19%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-mattress-removal."] { object-position: 50% 30%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-office-cleanout."] { object-position: 50% 24%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-piano-removal."] { object-position: 50% 3%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-property-cleanout."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-shed-demolition-2."] { object-position: 50% 13%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-shed-demolition."] { object-position: 50% 15%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-trampoline-removal."] { object-position: 50% 14%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-job-yard-waste-removal."] { object-position: 50% 29%; }
body[data-client="legend-junk-removal"] img[src*="/legend-junk-removal-truck-01."] { object-position: 50% 0%; }
/* ==== END generated head-safe focal points ==== */

/* ══════════════════════════════════════════════════════════════════════════
   ALABAMA JUNK — client-scoped reskin (staging, 2026-09-04, pending Brett)
   ──────────────────────────────────────────────────────────────────────────
   The live site's personality comes from two things this design system's
   Legend-authored defaults don't carry: real colour used as backgrounds (not
   just button/link accents) and rounded shapes, which echo the round-state
   logo mark. Both are scoped to this client only — every rule here is guarded
   by body[data-client="alabama-junk"], so Legend and any future v2 client
   render byte-identically to before this block existed.
   ═══════════════════════════════════════════════════════════════════════ */

/* Top bar in solid brand red instead of the generic ink neutral — the first
   color a visitor sees, echoing the live site's banner treatment. */
body[data-client="alabama-junk"] .lj2 .lj-topbar { background: var(--lj-forest); }

/* Media-band photo scrim warmed toward the brand ink (red-black) instead of
   Legend's cool green-black, so the truck/crew photo bands read as branded. */
body[data-client="alabama-junk"] .lj2 .lj-shotband::after {
  background: linear-gradient(90deg, rgba(27,12,13,.95) 0%, rgba(27,12,13,.88) 42%, rgba(27,12,13,.45) 100%);
}

/* Rounded corners on buttons, cards and photo frames — the live site's pill
   nav, round seal logo and rounded review card all read as "soft," which
   fits a state whose own outline is rounded. v2's default is deliberately
   square (border-radius:0) for Legend's blockier brand; Alabama opts out. */
body[data-client="alabama-junk"] .lj2 .lj-btn { border-radius: 8px; }
body[data-client="alabama-junk"] .lj2 .lj-card,
body[data-client="alabama-junk"] .lj2 .lj-step,
body[data-client="alabama-junk"] .lj2 .lj-feat,
body[data-client="alabama-junk"] .lj2 .lj-review,
body[data-client="alabama-junk"] .lj2 .lj-owner-shot,
body[data-client="alabama-junk"] .lj2 .lj-map,
body[data-client="alabama-junk"] .lj2 .lj-badge-rating,
body[data-client="alabama-junk"] .lj2 .lj-rail a {
  border-radius: 10px;
}
body[data-client="alabama-junk"] .lj2 .lj-card { overflow: hidden; }
body[data-client="alabama-junk"] .lj2 .lj-card__shot { border-radius: 10px 10px 0 0; }
body[data-client="alabama-junk"] .lj2 .lj-gal figure { border-radius: 8px; }

/* ── Services by Neighborhood & City ────────────────────────────────────────
   The by-city directory at the foot of /services/. Deliberately a plain link
   list, not cards: it exists so ~two dozen per-city service variants are
   reachable and crawlable, and card treatment at that count would bury the
   real catalogue above it. Only renders for clients that set
   config.hideCityComboServicesFromIndex. */
.lj2 .lj-city-dir__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px 32px;
  margin-top: 26px;
}
.lj2 .lj-city-dir__city {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--lj-ink);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--lj-forest);
}
.lj2 .lj-city-dir__city a { color: inherit; text-decoration: none; }
.lj2 .lj-city-dir__city a:hover { color: var(--lj-forest); }
.lj2 .lj-city-dir__list { list-style: none; margin: 0; padding: 0; }
.lj2 .lj-city-dir__list li + li { margin-top: 2px; }
.lj2 .lj-city-dir__list a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--lj-ink);
  text-decoration: none;
}
.lj2 .lj-city-dir__list a:hover { color: var(--lj-forest); text-decoration: underline; }
@media (max-width: 600px) {
  .lj2 .lj-city-dir__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS — config-gated (v2HomeLayout, v2ServiceLayout, v2ProseLead,
   v2WwtBand, v2MobileCardRail, v2HeroQuote). Every class below is new and only
   emitted by a variant, so a client that sets none of those keys renders exactly
   as before this block existed.
   ═══════════════════════════════════════════════════════════════════════ */

/* Centred Book + phone pair under a step group (Steps `cta` prop). */
.lj2 .lj-btns--center { justify-content: center; }

/* Lead paragraph + disclosure (v2ProseLead). The words stay in the HTML; only the
   first paragraph (two on /about/) is visible until the visitor opens it (AP8). */
.lj2 .lj-more { margin-top: 12px; }
.lj2 .lj-more > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--lj-forest);
}
.lj2 .lj-more > summary::-webkit-details-marker { display: none; }
.lj2 .lj-more > summary::after { content: "+"; font-size: 22px; line-height: 1; }
.lj2 .lj-more[open] > summary::after { content: "–"; }
.lj2 .lj-more > summary:focus-visible { outline: 3px solid var(--lj-go, currentColor); outline-offset: 3px; }

/* A secondary link set as a link, not a third button (owner band "More about the crew"). */
.lj2 .lj-textlink {
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; min-height: 44px;
  font-size: 14px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--lj-forest); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.lj2 .lj-textlink::after { content: "→"; }
.lj2 .lj-textlink:hover { color: var(--lj-ink); }

/* Truck-Space Rate Card: quarter marks on the empty part of each gauge, so the bars
   read as shares of one truck rather than as a bar chart. */
.lj2 .lj-ratecard .lj-load__bar {
  background-image: repeating-linear-gradient(to top, transparent 0 calc(25% - 2px), rgba(var(--lj-ink-tint-rgb, 12,26,17),.16) calc(25% - 2px) 25%);
}

/* What we take / what we can't (v2WwtBand). */
.lj2 .lj-wwt__ask { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.lj2 .lj-wwt__ask p { font-size: 18px; font-weight: 900; letter-spacing: -.2px; text-transform: uppercase; color: var(--lj-paper); }
/* Item cells on ink follow v2Palette.inkTint instead of the green-black rule. */
.lj2 .lj-band--ink .lj-items--tint,
.lj2 .lj-band--ink .lj-items--tint li { border-color: rgba(255,255,255,.16); }

/* Hero proof chip for a client with no displayable rating (v2HeroQuote): the flag's
   footprint and bottom line, carrying one verbatim review sentence. Desktop only. */
.lj2 .lj-hero-quote {
  position: absolute; left: 0; bottom: 0; margin: 0; box-sizing: border-box;
  width: calc((100% * 1.05 - 128px) / 3); min-width: 190px;
  background: var(--lj-paper); color: var(--lj-ink); border-top: var(--lj-bd-3);
  padding: 18px 20px 56px 26px;
}
.lj2 .lj-hero-quote__stars { font-size: 15px; letter-spacing: 1.5px; line-height: 1; color: var(--lj-forest); }
.lj2 .lj-hero-quote blockquote { margin: 10px 0 0; padding: 0; font-size: 15px; line-height: 1.38; font-weight: 700; color: var(--lj-ink); }
.lj2 .lj-hero-quote figcaption { margin-top: 12px; }
.lj2 .lj-hero-quote figcaption b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.lj2 .lj-hero-quote figcaption span {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--lj-muted);
}

@media (max-width: 720px) {
  .lj2 .lj-hero-quote { display: none; }

  /* Photo-card grids swipe sideways on a phone (v2MobileCardRail): one card at 82%
     with the next card's edge showing, the same affordance as the reviews rail. The
     leading gutter is padding, the trailing one a spacer, because a scroller's own
     trailing padding is not reliably part of its scroll width. */
  .lj2 .lj-grid.lj-cardrail {
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: calc(var(--lj-gut, 20px) * -1); margin-right: calc(var(--lj-gut, 20px) * -1);
    padding-left: var(--lj-gut, 20px); padding-right: 0;
    scroll-padding-left: var(--lj-gut, 20px);
  }
  .lj2 .lj-cardrail::-webkit-scrollbar { display: none; }
  .lj2 .lj-cardrail > .lj-card { flex: 0 0 82%; scroll-snap-align: start; }
  .lj2 .lj-cardrail::after { content: ""; flex: 0 0 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS, batch C — config-gated (v2CityLayout, faqSidebarStyle "inline",
   areasGroupByCounty, v2MobileHeaderCompact, v2HomeHeroCompact) plus the no-map
   area band and areas index (FX-17). Every class below is new and only emitted by a
   variant or by a client with no map, so every other client renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* Full-width ink CTA row: the city body's closing "Book a {city} pickup" (v2CityLayout
   "proof-first") and the FAQ page's inline note (faqSidebarStyle "inline"). */
.lj2 .lj-cta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px;
  background: var(--lj-ink); color: var(--lj-paper); border: var(--lj-bd); padding: 28px 32px;
}
.lj2 .lj-cta-row__copy { flex: 1 1 320px; min-width: 0; }
.lj2 .lj-cta-row h2, .lj2 .lj-cta-row h3 { font-size: 28px; line-height: 1; letter-spacing: -.9px; color: var(--lj-paper); margin: 0; }
.lj2 .lj-cta-row .lj-body { color: var(--lj-dim); margin-top: 10px; max-width: 560px; }
.lj2 .lj-cta-row .lj-btns { margin-left: auto; }
.lj2 .lj-cta-row .lj-btn--ink { border-color: var(--lj-paper); }

/* FAQ page with no rail: the accordion and the note at a readable measure, centred (DS-1). */
.lj2 .lj-faq-solo { max-width: 880px; margin-left: auto; margin-right: auto; }

/* Areas index "locally based" block when there is no map: bullets in two columns. */
.lj2 .lj-check--2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 36px; }

/* A county page's city chips are links. */
.lj2 .lj-hoods a.pin:hover { background: var(--lj-ink); color: var(--lj-paper); }

/* Homepage hero sized to the desktop fold (v2HomeHeroCompact, DS-3): tighter type-column
   padding, an H1 size at which each authored line wraps once at 1280 instead of twice,
   and tile labels on one line. The copy is unchanged. The proof flag and quote chip keep
   the stat-cell width rule, recomputed for the 96px of side padding and two 14px column
   gaps, and the same bottom line as the type column. */
@media (min-width: 1081px) {
  .lj2 .lj-hero--compact .lj-hero-type { padding: 36px 48px 32px; }
  .lj2 .lj-hero--compact .lj-h1--big { font-size: 62px; letter-spacing: -2.4px; }
  .lj2 .lj-hero--compact .lj-stats { margin-top: 24px; column-gap: 14px; }
  .lj2 .lj-hero--compact .lj-stats span { font-size: 12.5px; letter-spacing: .6px; }
  .lj2 .lj-hero--compact .lj-hero-flag,
  .lj2 .lj-hero--compact .lj-hero-quote { width: calc((100% * 1.05 - 124px) / 3); padding-bottom: 32px; }
  .lj2 .lj-hero--compact .lj-hero-flag__badge { bottom: 3px; }
}

@media (max-width: 1080px) {
  .lj2 .lj-check--2 { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 720px) {
  .lj2 .lj-cta-row { padding: 22px 20px; gap: 16px; }
  .lj2 .lj-cta-row h2, .lj2 .lj-cta-row h3 { font-size: 23px; }
  .lj2 .lj-cta-row .lj-btns { margin-left: 0; width: 100%; }
  .lj2 .lj-cta-row .lj-btn { flex: 1; }

  /* Phone header that fits a wide wordmark (v2MobileHeaderCompact): the logo is sized by
     width, and the call pill and burger give up padding, so logo + pill + burger fit a
     360px screen instead of pushing the burger past the right edge (BS-3 / CD-3). The
     burger keeps its 52px height, which the open-state X arithmetic above depends on. */
  .lj2 .lj-header--compact .lj-wrap { gap: 8px; }
  .lj2 .lj-header--compact .lj-logo { --lj-logo-pad: 8px; }
  .lj2 .lj-header--compact .lj-logo img { height: auto; width: min(124px, 31vw); }
  .lj2 .lj-header--compact .lj-header-cta--call { padding: 13px 11px; letter-spacing: .2px; }
  .lj2 .lj-header--compact .lj-burger { margin-left: 0; width: 48px; padding-left: 11px; padding-right: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BATCH D — config-gated (v2RailWordWrap). Emitted only under .lj2--rail-words,
   so every other client renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* Link rails wrap between words on a phone, never inside one (F15). The two-up
   pictureless-grid rule gives every cell overflow-wrap:anywhere, and a rail label
   at 13.5px with 1px tracking and 18px side padding had about 86 to 110px of text
   width at 360 to 390px, so "BIRMINGHAM" and "DEARBORN" broke mid-word. Tighter
   padding and tracking fit the longest single word ("CONSTRUCTION") at 360px, and
   the wrap rule repeats the two-up selector so it outranks it without !important. */
@media (max-width: 720px) {
  .lj2.lj2--rail-words .lj-rail > a {
    padding: 13px 12px; gap: 8px; font-size: 12.5px; letter-spacing: .3px; line-height: 1.25;
  }
  .lj2.lj2--rail-words .lj-grid.lj-rail:not(:has(img)):not(:has(picture)):not(:has(svg)):not(:has(.lj-group)):not(:has(.lj-step)):not(:has(.lj-feat)):not(:has(.lj-scenario)):not(:has(.lj-load)) > a {
    overflow-wrap: normal;
  }
}

/* v2HeroQuoteMobile: verbatim review line under the phone hero tiles (desktop shows the photo chip). */
.lj2 .lj-hero-quote-m { display: none; }
@media (max-width: 720px) {
  .lj2 .lj-hero-quote-m {
    display: block; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(var(--lj-ink-tint-rgb, 12,26,17), .14);
    font-size: 16px; line-height: 1.4; color: var(--lj-ink);
  }
  .lj2 .lj-hero-quote-m span { font-weight: 700; }
  .lj2 .lj-hero-quote-m b { font-weight: 900; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 6 R1 — config-gated. Every rule sits under a class a flag emits
   (.lj2--item-words, .lj2--trust-rules, .lj-ratecard--compact, .lj-topbar-vanity),
   so a client without the flag renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2PhoneVanity: the vanity spelling beside the topbar number, as on the trucks. Text, not
   part of the tel: link; it leaves with the number where the topbar drops the phone. */
.lj2 .lj-topbar .lj-topbar-vanity { color: var(--lj-paper); }
.lj2 .lj-topbar .lj-topbar-vanity::before { content: "·"; margin: 0 10px; color: var(--lj-dim); }

/* v2ItemWordWrap: item cells wrap between words on a phone. At 2-up a cell had about 98px
   of text width at 375px, so "Refrigerators," broke inside the word or before its comma.
   Tighter padding, marker and type give the longest single word room; break-word stays as
   the last resort for a word that still cannot fit. */
@media (max-width: 720px) {
  .lj2.lj2--item-words .lj-items li {
    padding: 13px 10px; gap: 8px; font-size: 16px; line-height: 1.3; overflow-wrap: break-word;
  }
  .lj2.lj2--item-words .lj-items li::before { width: 9px; height: 9px; }
}

/* v2TrustRules: the dividers between trust-strip items at 55% ink instead of 20% (3.1:1 on
   the field band instead of 1.45:1). */
.lj2.lj2--trust-rules .lj-trust .row > div { border-left-color: rgba(var(--lj-ink-tint-rgb, 12,26,17),.55); }
@media (max-width: 720px) {
  .lj2.lj2--trust-rules .lj-trust .row > div:nth-child(n+3) { border-top-color: rgba(var(--lj-ink-tint-rgb, 12,26,17),.55); }
}

/* v2RateCardCompact: the rate card on a phone in about one screen. Each size is a slim
   gauge the height of its row beside the size and volume on one line and the what-fits
   line under them; every tier, volume and line stays. */
@media (max-width: 720px) {
  .lj2 .lj-band.lj-ratecard--compact { padding: 40px 0; }
  .lj2 .lj-ratecard--compact .lj-head-row { margin-bottom: 18px; }
  .lj2 .lj-ratecard--compact .lj-load {
    grid-template-columns: 34px minmax(0,1fr); column-gap: 14px; padding: 11px 0; align-items: stretch;
  }
  .lj2 .lj-ratecard--compact .lj-load:first-child { padding-top: 0; }
  .lj2 .lj-ratecard--compact .lj-load__bar { height: auto; min-height: 56px; }
  .lj2 .lj-ratecard--compact .lj-load__body {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
  }
  .lj2 .lj-ratecard--compact .lj-load__body .lj-h4 { margin: 0; font-size: 16px; }
  .lj2 .lj-ratecard--compact .lj-load__vol { margin: 0; font-size: 12px; letter-spacing: .5px; }
  .lj2 .lj-ratecard--compact .lj-load__body .lj-body { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
  .lj2 .lj-ratecard--compact .lj-pull { font-size: 16px; margin-top: 18px; padding-left: 12px; border-left-width: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 7D R1 — config-gated or scoped to a flag-only component. Every rule sits
   under a class a flag emits (.lj2--heading-words, .lj2--review-foot), an id only
   pageCopy.book.hero.jumpLabel renders (#request-form, .lj-textlink--jump), or the
   v2WwtBand section (.lj-wwt), so a client without them renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2HeadingWordSpacing: Archivo at 900 with negative tracking closes the word gaps in
   uppercase display headings ("JUNKREMOVAL"). The tracking stays; the space widens. */
.lj2.lj2--heading-words h1,
.lj2.lj2--heading-words h2,
.lj2.lj2--heading-words h3,
.lj2.lj2--heading-words h4 { word-spacing: .12em; }

/* v2ReviewNameFoot: the name block sits at the bottom of every review card, so names line
   up across a row of equal-height cards whatever the quote length. */
.lj2.lj2--review-foot .lj-review { display: flex; flex-direction: column; }
.lj2.lj2--review-foot .lj-review .who { margin-top: auto; padding-top: 16px; }

/* Booking hero jump link (pageCopy.book.hero.jumpLabel) and its target: the form lands
   below the sticky header instead of under it. */
.lj2 .lj-textlink--jump::after { content: "↓"; }
.lj2 #request-form { scroll-margin-top: 120px; }

/* v2WwtBand refusal list: an odd last item spans the row, so the two-up grid never ends
   on an empty bordered cell (13 items = 6 full rows + 1 full-width row). */
.lj2 .lj-wwt .lj-items--2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* v2KeepHyphens: a hyphenated compound in a display heading stays on one line
   ("18-CUBIC-YARD", "TWO-HOUR"). The span is only emitted under the flag. */
.lj2 .lj-nobr { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 7D R2 — config-gated. Every rule sits under a class only a flag emits
   (.lj-more--prose from v2CityProseMore, .lj2--hoods-grid from v2HoodsGrid), so a
   client without them renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2CityProseMore: the city body's later sections inside a collapsed disclosure. The
   sections inside keep the prose rhythm they had as direct children of .lj-prose. */
.lj2 .lj-prose .lj-more--prose { margin-top: 24px; padding-top: 6px; border-top: var(--lj-bd); }
.lj2 .lj-prose .lj-more--prose > * + * { margin-top: 20px; }
.lj2 .lj-prose .lj-more--prose > summary + h2 { margin-top: 18px; }

/* v2HoodsGrid: on a phone the neighborhood (or county-city) pins sit in an even two-column
   grid; a long name wraps between words inside its own cell, and an odd last pin spans the
   row so the grid never ends on an empty cell. */
@media (max-width: 720px) {
  .lj2.lj2--hoods-grid .lj-hoods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lj2.lj2--hoods-grid .lj-hoods .pin {
    display: flex; align-items: center; min-height: 52px; padding: 12px 12px;
    font-size: 13px; letter-spacing: .6px; line-height: 1.25;
    overflow-wrap: normal; word-break: normal; hyphens: manual;
  }
  .lj2.lj2--hoods-grid .lj-hoods .pin:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .lj2.lj2--hoods-grid .lj-hoods .pin { padding: 12px 9px; font-size: 12.5px; letter-spacing: .4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 7D R3 — scoped to the v2WwtBand section (.lj-wwt), which only a client with
   the flag renders, so a client without it renders as before.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2WwtBand refusal list: the odd last item already spans the row (R1 rule above), but its
   label sat at the left edge, so the row read as one left-column cell beside an empty one.
   Centred, it reads as the full-width row it is, at every width the list shows two columns. */
.lj2 .lj-wwt .lj-items--2 > li:last-child:nth-child(odd) { justify-content: center; }

/* v2ItemWordWrap: an odd last item in a two-column item list spans the row instead of
   leaving a lone half cell (7h grid-orphan check). */
.lj2.lj2--item-words .lj-items--2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }