/* City service pages (the six live /service-areas/ac-{repair,installation}-{city} routes).
   Loads after city.css. Same tokens, type, buttons and city hero. The middle is its own:
   a photo split or a long read, numbered work tiles, Bentonville's repair-or-replace verdict,
   the local copy, the related list, and open numbered answers. */

.lc-page main p a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: var(--rule);
  text-underline-offset: 3px;
}
.lc-page .on-ink p a { color: var(--white); }
.lc-page .cy-head:not(:has(.lede)) { grid-template-columns: minmax(0, 1fr); }

/* ---------- Opening copy: photo beside the live paragraphs, or a long read ---------- */
.lc-split, .lc-read { display: grid; gap: 28px; }
.lc-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--smoke); }
.lc-media img { width: 100%; height: 100%; object-fit: cover; }
.lc-copy h2, .lc-read-head h2 { margin-bottom: 16px; }
.lc-copy .lede, .lc-read .lede, .lc-p { margin: 0 0 14px; }
.lc-p { font-size: 17px; line-height: 1.6; }
.lc-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lc-ticks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 700; line-height: 1.4; }
.lc-ticks svg { margin-top: 1px; color: var(--orange); }

/* ---------- The six live cards as numbered tiles ---------- */
.lc-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lc-tile {
  position: relative; display: grid; align-content: start; gap: 10px; height: 100%;
  padding: 22px 20px 24px; border: 1px solid var(--line); border-top: 2px solid var(--ink);
  border-radius: 2px; background: var(--white); color: inherit;
  transition: border-top-color .2s ease, transform .2s ease;
}
.lc-tile.is-link { padding-bottom: 72px; }
.lc-tile:hover { border-top-color: var(--orange); }
.lc-t-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc-t-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 2px; background: var(--ink); color: var(--white); transition: background-color .18s ease; }
.lc-tile:hover .lc-t-ic { background: var(--orange); }
.lc-t-n { font-family: var(--f-head); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.2px var(--ink); font-variant-numeric: tabular-nums; }
.lc-tile h3 { margin: 6px 0 0; font-size: 20px; }
.lc-tile p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.lc-tile .cy-go { position: absolute; right: 18px; bottom: 18px; border: 1px solid var(--line); color: var(--ink); }
.lc-tile.is-link:hover { transform: translateY(-2px); }
.lc-tile.is-link:hover .cy-go, .lc-tile.is-link:focus-visible .cy-go { background: var(--ink); color: var(--white); border-color: var(--ink); }
.lc-note { max-width: 46rem; margin: 22px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }

/* ---------- Repair or replace: black type on the orange panel, the answer on black ---------- */
.lc-verdict { display: grid; overflow: hidden; border-radius: 2px; }
.lc-v-head { display: grid; gap: 16px; align-content: start; padding: 32px 24px; background: var(--orange); color: var(--ink); }
.lc-v-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 2px; background: var(--ink); color: var(--white); }
.lc-v-head h2 { margin: 0; color: var(--ink); font-size: clamp(28px, 7vw, 40px); }
.lc-v-body { display: grid; gap: 22px; justify-items: start; padding: 32px 24px; background: var(--ink); }
.lc-v-body p { margin: 0; color: var(--on-ink); font-size: 17px; line-height: 1.6; }

/* ---------- Local copy with no photo of its own: a pinned black card ---------- */
.lc-card { display: grid; gap: 22px; padding: 32px 22px 36px; border-radius: 2px; background: var(--ink); color: var(--white); box-shadow: inset 0 var(--rule) 0 var(--orange); }
.lc-card-head { display: grid; gap: 16px; align-content: start; }
.lc-card-head h2 { margin: 0; color: var(--white); }
.lc-card-body { display: grid; gap: 16px; }
.lc-card-body .lede { margin: 0; color: var(--on-ink); }

/* ---------- FAQ: every live answer open, numbered, beside a sticky heading ---------- */
.lc-faq-grid { display: grid; gap: 28px; }
.lc-faq-head h2 { margin-bottom: 12px; }
.lc-faq-head .lede { margin: 0; }
.lc-qa { list-style: none; margin: 0; padding: 0; }
.lc-qa li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.lc-qn { font-family: var(--f-head); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--orange); font-variant-numeric: tabular-nums; }
.lc-qa h3 { margin: 0 0 8px; font-size: 18px; }
.lc-qa p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.lc-final .final-bg { object-position: 72% 30%; }

@media (max-width: 559px) {
  .lc-verdict-band .btn, .lc-final .actions .btn { justify-content: center; width: 100%; }
  .lc-final .actions { width: 100%; }
}
@media (min-width: 700px) {
  .lc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lc-tile { padding: 26px 24px 28px; }
  .lc-tile.is-link { padding-bottom: 76px; }
  .lc-verdict { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lc-v-head, .lc-v-body { padding: 40px 36px; }
  .lc-card { padding: 40px 36px 44px; }
}
@media (min-width: 1000px) {
  .lc-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .lc-split-r { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lc-read { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .lc-read-head { position: sticky; top: 96px; }
  .lc-copy h2, .lc-read-head h2 { font-size: clamp(36px, 3.3vw, 44px); }
  .lc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-tile h3 { font-size: 22px; }
  .lc-v-head, .lc-v-body { padding: 56px; }
  .lc-v-head h2 { font-size: clamp(36px, 3.2vw, 46px); }
  .lc-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding: 56px; align-items: start; }
  .lc-card-head h2 { font-size: clamp(36px, 3.3vw, 46px); }
  .lc-faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .lc-faq-head { position: sticky; top: 96px; }
  .lc-qa h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-tile, .lc-t-ic, .lc-tile .cy-go { transition: none; }
  .lc-tile.is-link:hover { transform: none; }
}

/* ---------- Holiday lighting heroes on phones (hub and Cave Springs, `hero.photoFirst`) ----------
   Aaron 2026-10-07, second pass. Under 768px only. The hero is one small-viewport screen (svh, so
   Safari's bars are allowed for) and the copy sits at its bottom, so the H1, the subline, the stars
   and both buttons are on the first screen; the photo above them is framed on the lit roofline (Cave
   Springs has its own phone crop, see local.mjs). No pill. One compact stars line. The paragraph,
   chips and Elkins line live in the strip just under the hero. The shade is clear over the photo and
   dark under the text, measured in pixels from the bottom so it tracks the text on any screen height
   (WCAG AA checked). Desktop and tablet are unchanged. */
.hl-hero-facts { display: none; }
@media (max-width: 767.98px) {
  .hl-hero .kicker, .hl-hero .trust, .hl-hero .cy-note, .hl-hero .hero-lede { display: none; }
  .hl-hero .hero-stage { display: flex; flex-direction: column; min-height: calc(100svh - var(--top) - 1px); }
  .hl-hero .hero-bg, .hl-hero .hero-shade { height: 100%; }
  .hl-hero .hero-bg img { object-position: 50% 65%; }
  .hl-hero .hero-inner { flex: 1; justify-content: flex-end; padding: 16px var(--gutter) 20px; }
  .hl-hero .crumbs { margin-bottom: 6px; }
  .hl-hero h1 { font-size: clamp(26px, 7.4vw, 31px); }
  .hl-hero .rating { margin-top: 8px; }
  /* One line from 360px up: about 11px at 360, 12px at 390, 13px from 422. */
  .hl-hero .rating:not(.hero-subline) { flex-wrap: nowrap; gap: .4em; font-size: clamp(11px, 3.08vw, 13px); white-space: nowrap; }
  .hl-hero .rating:not(.hero-subline) .stars svg { width: 1em; height: 1em; }
  .hl-hero .cta-pair { margin-top: 14px; }
  .hl-hero .hero-shade {
    background: linear-gradient(0deg, var(--ink) 0, rgba(0,0,0,.9) 120px, rgba(0,0,0,.74) 220px, rgba(0,0,0,.5) 290px, rgba(0,0,0,0) 400px);
  }
  .hl-hero-facts { display: block; padding: 22px 0 28px; background: var(--ink); color: var(--white); }
  .hl-hero-facts .hero-lede { margin: 0 0 20px; padding: 0; border: 0; font-size: 17px; line-height: 1.5; color: var(--on-ink); }
  .hl-hero-facts .trust { margin: 0; }
}

/* Cave Springs, phones (Aaron 2026-10-08): the H1 one step bigger so it clearly outranks the copy
   around it; the breadcrumb hidden on screen (it stays in the markup, and the BreadcrumbList schema
   carries it); the copy a little higher. The photo keeps the top of the first screen. `hl-city` gives
   the Bentonville, Rogers and Fayetteville lighting pages the same handling. */
@media (max-width: 767.98px) {
  .hl-cs .crumbs, .hl-city .crumbs { display: none; }
  /* As big as keeps two lines ("HOLIDAY LIGHTING IN / CAVE SPRINGS, AR"): the first line is 11.0em wide,
     so the size is the column width / 11.25 (a little slack for Safari), capped at 36px. */
  .hl-cs h1, .hl-city h1 { font-size: clamp(26px, calc((100vw - 2 * var(--gutter)) / 11.25), 36px); }
  .hl-cs .hero-inner, .hl-city .hero-inner { padding-bottom: 34px; }
  /* The H1 sits higher here, over brighter siding: a little more shade behind it, the top still clear. */
  .hl-cs .hero-shade, .hl-city .hero-shade { background: linear-gradient(0deg, var(--ink) 0, rgba(0,0,0,.9) 120px, rgba(0,0,0,.78) 240px, rgba(0,0,0,.62) 330px, rgba(0,0,0,0) 450px); }
}
/* Cave Springs and the hl-city pages, desktop (Aaron 2026-10-08): both hero buttons above the fold on real
   laptop screens (1366x768 leaves about 657px in the browser, 1280x720 about 609px). The breadcrumb is
   visually hidden: it stays in the markup for screen readers, and the BreadcrumbList schema carries it. On
   short screens the gaps between the hero lines are also about a third smaller. */
@media (min-width: 1000px) {
  .hl-cs .crumbs, .hl-city .crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .hl-cs .kicker, .hl-city .kicker { margin-bottom: 6px; }
  .hl-cs .rating, .hl-city .rating { margin-top: 8px; }
  .hl-cs .hero-lede, .hl-city .hero-lede { margin-top: 8px; }
  .hl-cs .trust, .hl-city .trust { margin-top: 10px; row-gap: 6px; }
  .hl-cs .cta-pair, .hl-city .cta-pair { margin-top: 12px; }
}

/* Related rows with `related.wideLast` (the holiday lighting hub, Aaron 2026-10-08): from two columns up, the
   last row spans the full width instead of leaving an empty cell beside it. Phones stay one column. */
@media (min-width: 700px) {
  .lc-rows-wide-last > li:last-child { grid-column: 1 / -1; }
}