/* ============================================================
   PRIMENESS — Service + area landing pages (SEO pages)
   Loads AFTER styles.css and reuses its tokens and primitives
   (.container, .btn, .eyebrow, .h2, .volt, .brand, .footer).
   Everything here is dark background, so volt lime text is
   only ever used on black.
   ============================================================ */

body.sv { background: var(--bg); }

/* ---------- Top bar (same family as Work With Us / Contact) ---------- */
.sv-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 4vw, 44px);
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(10, 10, 11, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.sv-top .brand { flex: none; }
.sv-top__links { display: inline-flex; align-items: center; gap: clamp(14px, 2.6vw, 28px); min-width: 0; }
.sv-top__link { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); transition: color .25s; white-space: nowrap; }
.sv-top__link:hover { color: var(--white); }
.sv-top__tel { font: 700 14px/1 var(--font-mono); letter-spacing: .05em; color: var(--volt); white-space: nowrap; transition: text-shadow .25s; }
.sv-top__tel:hover { text-shadow: 0 0 14px var(--volt-glow); }
.sv-top__cta { padding: 11px 18px; font-size: 14px; }

@media (max-width: 820px) { .sv-top__link { display: none; } }
@media (max-width: 520px) { .sv-top__cta { display: none; } }
@media (max-width: 360px) {
  .sv-top { padding-inline: 12px; }
  .sv-top .brand__name { font-size: 20px; }
  .sv-top .brand__mark svg { width: 22px; height: 34px; }
  .sv-top__tel { font-size: 12.5px; letter-spacing: .02em; }
}

/* ---------- Hero ---------- */
.sv-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 9vh, 110px) clamp(48px, 8vh, 96px); border-bottom: 1px solid var(--line); }
.sv-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.sv-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.82) 55%, rgba(10,10,11,.55) 100%); }
.sv-hero__inner { position: relative; z-index: 2; }

.sv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 26px; font: 500 12.5px/1.4 var(--font-mono); color: var(--faint); }
.sv-crumbs a { color: var(--muted); transition: color .25s; }
.sv-crumbs a:hover { color: var(--volt); }
.sv-crumbs [aria-current] { color: var(--ink); }
.sv-hero .eyebrow { margin-bottom: 16px; line-height: 1.5; flex-wrap: wrap; }

.sv-title { font: 700 clamp(32px, 5.6vw, 66px)/1.03 var(--font-display); letter-spacing: -.025em; color: var(--white); max-width: 18ch; }
.sv-lead { max-width: 62ch; margin-top: 22px; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.65; color: #c9c9cf; }
.sv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sv-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sv-facts li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--muted); background: rgba(10,10,11,.6); }

/* ---------- Sections ---------- */
.sv-sec { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.sv-sec--alt { background: var(--bg-1); }
.sv-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sv-grid__head { position: sticky; top: 96px; }
.sv-h2 { font: 600 clamp(27px, 3.6vw, 42px)/1.08 var(--font-display); letter-spacing: -.02em; color: var(--white); }
.sv-sub { margin-top: 14px; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
.sv-prose p { color: #c9c9cf; line-height: 1.7; max-width: 68ch; }
.sv-prose p + p { margin-top: 16px; }
.sv-prose a, .sv-link { color: var(--volt); border-bottom: 1px solid rgba(191,255,0,.35); transition: border-color .25s; }
.sv-prose a:hover, .sv-link:hover { border-color: var(--volt); }

@media (max-width: 900px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv-grid__head { position: static; }
  .sv-sub { max-width: 60ch; }
}

/* What we do */
.sv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sv-list li { position: relative; padding: 20px 20px 20px 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.sv-list li::before { content: ""; position: absolute; left: 20px; top: 27px; width: 8px; height: 8px; border: 1.5px solid var(--volt); transform: rotate(45deg); }
.sv-list h3 { font: 600 17px/1.25 var(--font-display); color: var(--white); margin-bottom: 6px; }
.sv-list p { font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) { .sv-list { grid-template-columns: 1fr; } }

/* How it works */
.sv-steps { display: grid; gap: 0; counter-reset: none; }
.sv-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.sv-steps li:last-child { border-bottom: 1px solid var(--line); }
.sv-steps__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(191,255,0,.4); font: 700 14px/1 var(--font-mono); color: var(--volt); background: #000; }
.sv-steps h3 { font: 600 18px/1.25 var(--font-display); color: var(--white); margin: 2px 0 6px; }
.sv-steps p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* Where we work */
.sv-counties { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.sv-counties li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font: 500 12.5px/1.2 var(--font-mono); color: var(--ink); background: var(--bg-2); }
.sv-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sv-states li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #000; }
.sv-states b { display: block; font: 600 16px/1.2 var(--font-display); color: var(--white); }
.sv-states span { display: block; margin-top: 4px; font: 500 12px/1.4 var(--font-mono); color: var(--volt); }
@media (max-width: 760px) { .sv-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.sv-faq { display: grid; gap: 10px; }
.sv-faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color .25s; }
.sv-faq details[open] { border-color: rgba(191,255,0,.35); }
.sv-faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary h3 { font: 600 17px/1.35 var(--font-display); color: var(--white); }
.sv-faq summary::after { content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font: 500 17px/1 var(--font-mono); color: var(--volt); transition: transform .25s var(--ease); }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq__a { padding: 0 20px 20px; color: #c9c9cf; font-size: 15.5px; line-height: 1.65; max-width: 70ch; }

/* Related services / service link cards */
.sv-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-links a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color .25s, background .25s; }
.sv-links a:hover { border-color: var(--volt); background: #17171b; }
.sv-links b { font: 600 16.5px/1.25 var(--font-display); color: var(--white); }
.sv-links span { font: 500 12.5px/1.45 var(--font-mono); color: var(--muted); }
@media (max-width: 900px) { .sv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-links { grid-template-columns: 1fr; } }

/* County directory (area page) */
.sv-county-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-county { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.sv-county h3 { font: 600 17px/1.2 var(--font-display); color: var(--white); }
.sv-county p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 980px) { .sv-county-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-county-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.sv-band { position: relative; padding-block: clamp(56px, 8vw, 100px); background: #000; border-bottom: 1px solid var(--line); overflow: hidden; }
.sv-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 0% 50%, rgba(191,255,0,.10), transparent 70%); }
.sv-band__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.sv-band h2 { font: 700 clamp(28px, 4.4vw, 52px)/1.04 var(--font-display); letter-spacing: -.02em; color: var(--white); }
.sv-band p { margin-top: 12px; color: #c9c9cf; max-width: 52ch; }
.sv-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer (reuses .footer from styles.css) ---------- */
.sv-footer { padding-top: clamp(56px, 8vw, 96px); }
.sv-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px clamp(24px, 3vw, 44px); padding-bottom: clamp(40px, 6vw, 64px); }
.sv-footer .footer__col p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sv-footer .footer__bottom { padding-inline: var(--pad); }   /* styles.css zeroes the container side padding here */
@media (max-width: 900px) { .sv-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sv-footer__cols { grid-template-columns: 1fr; } }

/* Long strings (email) never push the page wider than the phone */
.sv a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Buttons wrap on very narrow phones instead of overflowing */
@media (max-width: 400px) {
  .sv-cta .btn, .sv-band__actions .btn { width: 100%; justify-content: center; }
}
.sv-links--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sv-links--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-links--4 { grid-template-columns: 1fr; } }