/* Service page template. Loads after concept.css and only adds service patterns: tokens, type,
   buttons, header, promo strip, footer and bottom bar all come from the homepage design system. */

.eyebrow .n { font-variant-numeric: tabular-nums; color: var(--grey); margin-right: -2px; }
.on-ink .eyebrow .n { color: var(--line); }
.lede a, .sv-more a, .sv-note a, .sv-p a {
  color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: var(--rule-link); text-underline-offset: 5px; transition: text-decoration-color .18s ease;
}
.lede a:hover, .sv-note a:hover, .sv-p a:hover { text-decoration-color: var(--ink); }
.on-ink .lede a:hover, .sv-more a:hover { text-decoration-color: var(--white); }
.sv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ---------- Hero: same stage as the homepage, photo held right on desktop ---------- */
.sv-hero .hero-bg img { object-position: 22% 20%; }
.sv-hero .hero-note { position: static; order: 7; align-self: flex-start; margin-top: 18px; }
.sv-hero .hero-inner { padding-top: clamp(56px, calc(100svh - var(--top) - 440px), 400px); }
.sv-hero .rating .r-sub { color: var(--on-ink); }

/* ---------- Trust strip + on-page links ---------- */
.sv-stats { padding-bottom: 36px; }
.sv-jump { display: grid; gap: 10px; margin-top: 22px; }
.sv-jump p { font-family: var(--f-label); font-weight: 700; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: var(--grey); }
.sv-jump .chips { margin: 0; justify-content: flex-start; }
.sv-jump .chips a { min-height: 40px; padding: 0 14px; font-size: 15px; }

/* ---------- Warning signs: numbered white cards. The list itself stays clear so a short
   last row does not paint an empty gray panel in the unused tracks. ---------- */
.sv-signs {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: transparent; border: 0;
}
.sv-signs li {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; align-content: start;
  padding: 22px 20px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.sv-signs li:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule); background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.sv-signs li:hover:after { transform: scaleX(1); }
.sv-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 2px; background: var(--ink); color: var(--white); }
.sv-signs .sv-ico { grid-row: span 2; }
.sv-signs .n { position: absolute; top: 20px; right: 20px; font-family: var(--f-label); font-weight: 700; font-size: 18px; line-height: 1; color: var(--grey); font-variant-numeric: tabular-nums; }
.sv-signs h3 { margin: 3px 36px 4px 0; }
.sv-signs p { color: var(--muted); }

/* ---------- Repairs: dark band, divided grid ---------- */
.sv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--grey); }
.sv-grid li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 16px; align-content: start; padding: 22px 0; border-bottom: 1px solid var(--grey); }
.sv-grid .ic { grid-row: span 2; margin-top: -2px; color: var(--orange); transition: transform .2s ease; }
.sv-grid li:hover .ic { transform: translateY(-2px); }
.sv-grid h3 { margin: 0; color: var(--white); }
.sv-grid p { color: var(--line); font-size: 16px; line-height: 1.5; }
.sv-card-link {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 4px;
  font-family: var(--f-label); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--white);
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: var(--rule-link); text-underline-offset: 5px;
}
.sv-card-link:hover { text-decoration-color: var(--white); }
.sv-card-link svg { transition: transform .18s ease; }
.sv-card-link:hover svg { transform: translateX(3px); }
.sv-more { display: grid; gap: 10px; margin-top: 32px; max-width: 54rem; color: var(--line); font-size: 17px; }
.sv-more a { color: var(--white); }

/* ---------- Photo + copy split ---------- */
.sv-split { display: grid; gap: 28px; align-items: center; }
.sv-media { position: relative; margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; background: var(--ink); }
.sv-media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.94); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sv-media:hover img { transform: scale(1.04); }
.sv-copy .lede { max-width: 38rem; }

/* ---------- Why Rooted: headline + numbered list ---------- */
.sv-why { display: grid; gap: 32px; }
.sv-why-head .sv-media { margin-top: 26px; aspect-ratio: 16 / 10; }
.sv-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.sv-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.sv-list .n { font-family: var(--f-head); font-weight: 900; font-size: 30px; line-height: 1; color: var(--grey); font-variant-numeric: tabular-nums; transition: color .18s ease; }
.sv-list li:hover .n { color: var(--orange-hover); }
.sv-list strong { font-size: 19px; line-height: 1.3; }

/* ---------- How it works: step cards ---------- */
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sv-steps li { position: relative; display: grid; gap: 8px; padding: 24px 22px 26px; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 4px; background: var(--white); transition: border-color .2s ease; }
.sv-steps li:hover { border-top-color: var(--orange); }
.sv-steps .step { font-family: var(--f-label); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--grey); }
.sv-steps .sv-ico { margin: 8px 0 6px; }
.sv-steps h3 { margin: 0; }
.sv-steps p { color: var(--muted); }

/* ---------- Reviews: three static cards (concept mock) ---------- */
.sv-rv { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sv-rv .rv { width: auto; }
.sv-rv .rv q { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ---------- Local + areas ---------- */
.sv-local .sv-p { margin-top: 16px; color: var(--muted); }
.sv-safety {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 22px;
  padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 4px; background: var(--smoke);
}
.sv-safety svg { margin-top: 2px; color: var(--ink); }
.sv-safety strong { color: var(--ink); }
.sv-chips-only { margin-top: 0; }
.sv-areas { grid-template-columns: minmax(0, 1fr); }
.sv-note { margin: 22px auto 0; max-width: 44rem; text-align: center; color: var(--muted); }

/* ---------- Closing CTA: white split, so the page does not stack two black bands before the footer ---------- */
.sv-final-grid { display: grid; gap: 32px; }
.sv-final h2 { font-size: clamp(32px, 8vw, 52px); }
.sv-final .lede { max-width: 36rem; }
.sv-final-media { aspect-ratio: 16 / 10; }

@media (max-width: 559px) {
  .sv-final .sv-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sv-final .sv-actions .btn { justify-content: center; }
}
@media (max-width: 359px) {
  .sv-hero .hero-inner { padding-top: 24px; }
}
@media (min-width: 700px) {
  .sv-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five signs: three across, then two that share the row. Two columns would leave the fifth alone. */
  .sv-signs:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-signs:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .sv-signs:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-jump { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
}
/* Nine price cards: two columns leave the ninth alone. Six across, then three that share the last row.
   At 1000px the same nine are three full rows, and that query clears these spans. */
@media (min-width: 700px) and (max-width: 999px) {
  .sv-grid:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-grid:has(> li:nth-child(9):last-child) > li { grid-column: span 3; }
  .sv-grid:has(> li:nth-child(9):last-child) > li:nth-child(n + 7) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .sv-hero .hero-bg { left: auto; width: 62%; transform: none; }
  .sv-hero .hero-bg img { object-position: 50% 30%; }
  .sv-hero .hero-shade {
    background:
      linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 24%),
      linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.74) 46%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0) 76%);
  }
  .sv-hero .hero-note { position: absolute; order: 0; left: auto; top: auto; margin: 0; right: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: 40px; }
  .sv-hero .hero-inner { padding-top: 32px; padding-bottom: 72px; }
  .sv-hero .hero-lede { max-width: 37rem; }
  .sv-hero .trust { max-width: 40rem; }

  .sv-stats { padding-bottom: 20px; }
  .sv-jump { margin-top: 26px; }

  .sv-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Four signs fill 2×2. Three columns would leave the fourth alone. */
  .sv-signs:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-signs:has(> li:nth-child(4):last-child) > li { grid-column: auto; }
  .sv-signs:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-signs:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .sv-signs:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
  .sv-signs li { grid-template-columns: minmax(0, 1fr); padding: 30px 28px 32px; }
  .sv-signs .sv-ico { grid-row: auto; margin-bottom: 18px; width: 52px; height: 52px; }
  .sv-signs .n { top: 30px; right: 28px; font-size: 20px; }
  .sv-signs h3 { margin-right: 0; }

  .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .sv-grid:has(> li:nth-child(9):last-child) > li { grid-column: auto; }
  .sv-grid li { padding: 32px 28px 34px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sv-grid li:nth-child(3n + 1) { padding-left: 0; }
  .sv-grid li:not(:nth-child(3n)) { border-right: 1px solid var(--grey); }
  .sv-grid .ic { grid-row: auto; margin: 0 0 10px; }
  .sv-card-link { grid-column: auto; }

  .sv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .sv-split .sv-media { aspect-ratio: 4 / 5; }

  .sv-why { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
  .sv-why-head { position: sticky; top: calc(var(--hh) + 32px); }
  .sv-list li { grid-template-columns: 72px minmax(0, 1fr); padding: 28px 0; }
  .sv-list .n { font-size: 40px; }
  .sv-list strong { font-size: 22px; }

  .sv-steps { gap: 16px; }
  .sv-steps li { padding: 30px 28px 32px; }

  .sv-rv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .sv-rv .rv { padding: 24px; }
  .sv-local .ph { aspect-ratio: 4 / 5; }

  .sv-final-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
  .sv-final h2 { font-size: 44px; }
  .sv-final-media { aspect-ratio: 4 / 3; }
}

/* Question pages linked from the owning service. One link per People Also Ask page. */
.sv-paa { list-style: none; margin: 28px 0 0; padding: 0; }
.sv-paa a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
  font-family: var(--f-head); font-weight: 600; font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2; color: var(--ink); text-decoration: none;
}
.sv-paa li:last-child a { border-bottom: 1px solid var(--line); }
.sv-paa a:hover { color: var(--orange); }
.sv-paa svg { flex: none; }