/* candidhomeinspections.com — shared stylesheet.
   GENERATED by candid-redesign/tools/build_site_css.py. Do not hand-edit;
   edit the mockup styles or legacy.css and re-run the script. */

/* Self-hosted webfonts (Google Fonts, OFL). Local because the CSP in _headers
   allows font-src 'self' only. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/fonts/archivo-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* ============================================================
     Tokens — navy / red / off-white. Workwear, not tech.
  ============================================================ */
  :root {
    --navy: #1f3446;
    --navy-2: #182a3a;
    --steel: #42627f;       /* the navy in the logo */
    --steel-2: #5f7f9b;
    --red: #f8433d;         /* the red in the logo: marks, rules, icons */
    --red-btn: #dc3731;     /* button fill: 4.5:1 against white text */
    --red-btn-hover: #c52e29;
    --red-text: #c4261f;    /* red as text on light grounds: 5.6:1 */
    --paper: #f4f3f0;
    --paper-2: #ebeae6;
    --white: #ffffff;
    --ink: #17212b;
    --ink-2: #4b5866;
    --ink-3: #6f7c89;
    --line: #d8dce0;
    --line-2: #e7e9ec;
    --tint: #e9eef3;
    --amber: #e6a23c;
    --font-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-b: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --r: 6px;
    --r-lg: 10px;
    --wrap: 1200px;
    --nav-h: 76px;
    --shadow-card: 0 1px 2px rgba(23,33,43,.06), 0 12px 32px -16px rgba(23,33,43,.18);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
  body {
    font-family: var(--font-b);
    font-size: 17px; line-height: 1.6;
    color: var(--ink); background: var(--paper);
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: var(--steel); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  ul { list-style: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  ::selection { background: var(--navy); color: #fff; }
  :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 3px; }

  #services, #pricing, #process, #why, #promise, #team, #service-area, #reviews, #articles, #faq,
  #service-buying, #service-selling, #service-cl100, #service-water, #service-air, #service-radon, #service-septic, #service-thermal,
  #awards, #best-of-sc { scroll-margin-top: calc(var(--nav-h) + 16px); }

  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

  /* ============================================================
     Type
  ============================================================ */
  h1, h2, h3, h4 { font-family: var(--font-d); color: var(--ink); text-wrap: balance; }
  h1 { font-weight: 800; font-size: clamp(36px, 5.2vw, 66px); line-height: 1.02; letter-spacing: -.028em; font-variation-settings: "wdth" 108; }
  @media (min-width: 600px) { .nowrap { white-space: nowrap; } }
  h2 { font-weight: 700; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; letter-spacing: -.022em; font-variation-settings: "wdth" 106; }
  h3 { font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.012em; font-variation-settings: "wdth" 104; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-d); font-weight: 600; font-size: 12px; line-height: 1;
    letter-spacing: .22em; text-transform: uppercase; color: var(--steel);
    font-variation-settings: "wdth" 118;
    margin-bottom: 18px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
  .lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
  .lede strong { color: var(--ink); font-weight: 600; }
  .section { padding: 96px 0; }
  .section-head { max-width: 760px; margin-bottom: 52px; }
  .section-head h2 { margin-bottom: 16px; }
  .muted { color: var(--ink-3); }
  .num { font-variant-numeric: tabular-nums; }

  /* ============================================================
     Buttons
  ============================================================ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 26px; border-radius: var(--r);
    font-family: var(--font-b); font-weight: 600; font-size: 16px; line-height: 1;
    white-space: nowrap; text-decoration: none !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .btn-primary { background: var(--red-btn); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px -10px rgba(220,55,49,.6); }
  .btn-primary:hover { background: var(--red-btn-hover); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 14px 26px -10px rgba(220,55,49,.7); }
  .btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
  .btn-secondary:hover { background: var(--navy); color: #fff; }
  .btn-light { background: #fff; color: var(--navy); }
  .btn-light:hover { background: var(--paper); }
  .btn-sm { height: 44px; padding: 0 18px; font-size: 15px; }
  .textlink { font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
  .textlink::after { content: "›"; font-size: 1.2em; line-height: 1; transition: transform .15s ease; }
  .textlink:hover::after { transform: translateX(3px); }

  /* ============================================================
     Nav
  ============================================================ */
  .nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(244,243,240,.94);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 36px; }
  .nav .logo { display: flex; align-items: center; flex-shrink: 0; }
  .nav .logo img { height: 46px; width: auto; }
  .nav-links { display: flex; gap: 26px; margin-left: auto; }
  .nav-links a { font-weight: 500; font-size: 15px; color: var(--ink); letter-spacing: -.005em; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav-links a:hover { text-decoration: none; border-bottom-color: var(--red); }
  .nav-actions { display: flex; align-items: center; gap: 14px; }
  .nav-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--navy); white-space: nowrap; }
  .nav-phone svg { width: 16px; height: 16px; }
  .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r); }
  .nav-toggle svg { width: 24px; height: 24px; }
  .nav-toggle .x { display: none; }
  .nav.open .nav-toggle .bars { display: none; }
  .nav.open .nav-toggle .x { display: block; }
  .nav-menu { display: none; }

  /* ============================================================
     Hero
  ============================================================ */
  .hero { position: relative; padding: 72px 0 84px; overflow: hidden; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
  .hero h1 { margin-bottom: 22px; }
  .hero .lede { margin-bottom: 34px; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: var(--ink-2); }
  .hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
  .hero-proof svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }

  .hero-visual { position: relative; padding: 0 28px 28px 0; }
  .hero-visual .mat { position: absolute; inset: 28px 0 0 28px; background: var(--navy); border-radius: var(--r-lg); }
  .hero-visual .photo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px -24px rgba(23,33,43,.5); }
  .hero-visual .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
  .report-chip {
    position: absolute; left: -22px; bottom: 2px; z-index: 2;
    background: #fff; border-radius: var(--r-lg); padding: 14px 16px 14px 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -14px rgba(23,33,43,.45);
    max-width: 300px;
  }
  .report-chip .tick { width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
  .report-chip .tick svg { width: 20px; height: 20px; }
  .report-chip b { display: block; font-family: var(--font-d); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
  .report-chip span { font-size: 13px; color: var(--ink-2); line-height: 1.35; display: block; }

  /* page-load rise */
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero .up { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .up.d1 { animation-delay: .05s } .hero .up.d2 { animation-delay: .15s } .hero .up.d3 { animation-delay: .25s }
  .hero .up.d4 { animation-delay: .35s } .hero .up.d5 { animation-delay: .45s } .hero .up.d6 { animation-delay: .2s }

  /* ============================================================
     Trust bar
  ============================================================ */
  .trust { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .trust .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 22px; padding-top: 20px; padding-bottom: 20px; }
  .trust .item { display: flex; align-items: center; gap: 12px; }
  .trust img { height: 38px; width: auto; border-radius: 3px; }
  .trust .item.strip img { height: 32px; }
  .trust .txt b { display: block; font-family: var(--font-d); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
  .trust .txt span { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; display: block; margin-top: 2px; white-space: nowrap; }
  .trust .stars { color: var(--amber); font-size: 15px; letter-spacing: 1px; line-height: 1; }
  .trust .rating b { font-size: 20px; }

  /* ============================================================
     Services
  ============================================================ */
  .services { background: var(--paper); }
  .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 72px; }
  .svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
  .svc-card .img { aspect-ratio: 16 / 9; overflow: hidden; }
  .svc-card .img img { width: 100%; height: 100%; object-fit: cover; }
  .svc-card .body { padding: 30px 32px 32px; display: flex; flex-direction: column; flex: 1; }
  .svc-card .eyebrow { margin-bottom: 12px; }
  .svc-card h3 { font-size: 28px; margin-bottom: 12px; }
  .svc-card p { color: var(--ink-2); font-size: 16px; margin-bottom: 20px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .chip { background: var(--tint); color: var(--navy); font-weight: 500; font-size: 13px; padding: 7px 12px; border-radius: 999px; }
  .chip.price { background: var(--navy); color: #fff; }
  .svc-card .actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

  .addons { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .addons .intro h3 { font-size: 30px; margin-bottom: 12px; }
  .addons .intro p { color: var(--ink-2); margin-bottom: 22px; }
  .price-list { border-top: 1px solid var(--line); }
  .price-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
  .price-row .ic { width: 36px; height: 36px; color: var(--steel); }
  .price-row .ic svg { width: 100%; height: 100%; }
  .price-row .name { font-family: var(--font-d); font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 4px; }
  .price-row .desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
  .price-row .amt { text-align: right; white-space: nowrap; }
  .price-row .amt small { display: block; font-family: var(--font-d); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .price-row .amt b { font-family: var(--font-d); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }

  /* ============================================================
     Process
  ============================================================ */
  .process { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
  .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line); }
  .step { position: relative; padding-top: 58px; }
  .step .n {
    position: absolute; top: 0; left: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--navy); color: #fff;
    font-family: var(--font-d); font-weight: 700; font-size: 16px; font-variation-settings: "wdth" 110;
    display: grid; place-items: center;
    box-shadow: 0 0 0 6px #fff;
  }
  .step h3 { margin-bottom: 10px; }
  .step p { font-size: 15.5px; color: var(--ink-2); }
  .step .meta { display: inline-block; margin-top: 12px; font-family: var(--font-d); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); }

  /* ============================================================
     Why + Promise
  ============================================================ */
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
  .why-item .ic { width: 34px; height: 34px; color: var(--steel); margin-bottom: 18px; }
  .why-item .ic svg { width: 100%; height: 100%; }
  .why-item h3 { margin-bottom: 8px; }
  .why-item p { font-size: 15.5px; color: var(--ink-2); }

  .promise { background: #fff; border-top: 1px solid var(--line); }
  .promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .promise-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px 32px; }
  .tag { display: inline-block; font-family: var(--font-d); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; background: var(--navy); color: #fff; margin-bottom: 16px; font-variation-settings: "wdth" 112; }
  .tag.red { background: var(--red-btn); }
  .promise-card h3 { font-size: 23px; margin-bottom: 8px; }
  .promise-card p { font-size: 15.5px; color: var(--ink-2); }

  /* ============================================================
     Team
  ============================================================ */
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .member .portrait { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #1d3a4a; margin-bottom: 18px; }
  .member .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .member .portrait.bryan img { object-position: center 28%; }
  .member .name { font-family: var(--font-d); font-weight: 700; font-size: 22px; letter-spacing: -.015em; }
  .member .role { font-family: var(--font-d); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); margin: 4px 0 10px; }
  .member .bio { font-size: 15.5px; color: var(--ink-2); }
  .service-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--steel); background: var(--tint); padding: 4px 9px; border-radius: 999px; margin-top: 10px; }
  .service-mark svg { width: 12px; height: 12px; color: var(--red); }

  /* ============================================================
     Reviews (the one dark room)
  ============================================================ */
  .reviews { background: var(--navy); color: #fff; }
  .reviews h2, .reviews h3 { color: #fff; }
  .reviews .eyebrow { color: #a9bccd; }
  .reviews .lede { color: #c7d3de; }
  .featured { max-width: 960px; margin: 0 0 56px; padding: 36px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
  .featured .stars { color: var(--amber); font-size: 20px; letter-spacing: 3px; margin-bottom: 18px; }
  .featured blockquote { font-family: var(--font-d); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.28; letter-spacing: -.015em; font-variation-settings: "wdth" 104; text-wrap: balance; margin-bottom: 20px; }
  .featured cite { font-style: normal; font-size: 15px; color: #c7d3de; }
  .featured cite strong { color: #fff; font-weight: 600; }
  .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .review { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; }
  .review .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
  .review p { font-size: 15.5px; line-height: 1.55; color: #e9eef3; margin-bottom: 16px; flex: 1; }
  .review cite { font-style: normal; font-size: 14px; color: #a9bccd; }
  .review cite strong { color: #fff; font-weight: 600; }
  .more-reviews { margin-top: 18px; }
  .more-reviews summary { list-style: none; display: inline-flex; cursor: pointer; }
  .more-reviews summary::-webkit-details-marker { display: none; }
  .more-reviews[open] summary .btn { display: none; }
  .more-reviews .review-grid { margin-top: 18px; }
  .reviews .badges { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.14); }
  .reviews .badges img { height: 56px; width: auto; border-radius: 4px; background: #fff; }
  .reviews .badges .cap { font-size: 14px; color: #c7d3de; max-width: 40ch; }

  /* ============================================================
     Service area
  ============================================================ */
  .county-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .county { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
  .county img { width: 100%; height: 150px; object-fit: cover; }
  .county .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
  .county h3 { margin-bottom: 4px; }
  .county .cities { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 12px; line-height: 1.6; }
  .county p { font-size: 15px; color: var(--ink-2); }
  .county .textlink { margin-top: auto; padding-top: 14px; font-size: 15px; }
  .county.call { background: var(--navy); color: #fff; border-color: var(--navy); }
  .county.call .body { padding: 30px 28px; }
  .county.call h3 { color: #fff; font-size: 24px; }
  .county.call .cities { color: #ffb3af; }
  .county.call p { color: #d5dee6; }
  .county.call a { color: #fff; font-weight: 600; }
  .city-links { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; font-size: 14.5px; color: var(--ink-3); }
  .city-links a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-weight: 500; }
  .city-links a:hover { border-color: var(--navy); text-decoration: none; }

  /* ============================================================
     Articles
  ============================================================ */
  .articles { background: #fff; border-top: 1px solid var(--line); }
  .articles .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
  .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .article { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 28px; background: var(--paper); display: flex; flex-direction: column; }
  .article .cat { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); margin-bottom: 12px; }
  .article h3 { margin-bottom: 10px; font-size: 20px; }
  .article h3 a { color: var(--ink); }
  .article p { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; flex: 1; }

  /* ============================================================
     FAQ
  ============================================================ */
  .faq-list { max-width: 840px; border-top: 1px solid var(--line); }
  .faq { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-family: var(--font-d); font-weight: 600; font-size: 19px; letter-spacing: -.012em; color: var(--ink); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .pm { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; color: var(--ink-2); transition: transform .2s ease, background .2s ease, color .2s ease; }
  .faq summary .pm svg { width: 14px; height: 14px; }
  .faq[open] summary .pm { background: var(--navy); border-color: var(--navy); color: #fff; transform: rotate(45deg); }
  .faq .answer { padding: 0 52px 24px 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
  .faq .answer a { font-weight: 600; }

  /* ============================================================
     Final CTA + footer
  ============================================================ */
  .cta { background: var(--navy); color: #fff; padding: 104px 0; position: relative; overflow: hidden; }
  .cta::before { content: ""; position: absolute; right: -140px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(248,67,61,.22), transparent 62%); pointer-events: none; }
  .cta .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
  .cta h2 { color: #fff; font-size: clamp(38px, 5vw, 60px); margin-bottom: 14px; }
  .cta .eyebrow { color: #a9bccd; }
  .cta p { color: #c7d3de; font-size: 19px; margin-bottom: 30px; max-width: 46ch; }
  .cta .btns { display: flex; flex-wrap: wrap; gap: 14px; }
  .cta .hours { border-left: 1px solid rgba(255,255,255,.18); padding-left: 40px; }
  .cta .hours dt { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #a9bccd; margin-bottom: 6px; }
  .cta .hours dd { font-size: 17px; margin-bottom: 20px; }
  .cta .hours dd a { color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }

  footer { background: var(--paper); color: var(--ink-2); font-size: 14px; padding: 56px 0 28px; border-top: 1px solid var(--line); }
  .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .footer-top .footer-logo { height: 40px; width: auto; }
  .footer-top .creds { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .footer-top .creds img { height: 44px; width: auto; }
  .footer-top .creds .bbb { height: 56px; }
  footer .legal-note { font-size: 13.5px; line-height: 1.6; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 28px; color: var(--ink-3); }
  footer .columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  footer .col h4 { font-family: var(--font-d); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; font-variation-settings: "wdth" 112; }
  footer .col li { margin-bottom: 8px; }
  footer .col a { color: var(--ink-2); }
  footer .col a:hover { color: var(--ink); }
  footer .bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
  footer .bottom .social { display: flex; gap: 18px; }
  footer .bottom a { color: var(--ink-2); }

  /* ============================================================
     Mobile action bar
  ============================================================ */
  .mobile-bar { display: none; }

  /* ============================================================
     Scroll reveal
  ============================================================ */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero .up { animation: none; }
    html { scroll-behavior: auto; }
  }

  /* ============================================================
     Responsive
  ============================================================ */
  @media (max-width: 1080px) {
    .nav-links { gap: 20px; }
    .hero .wrap { gap: 40px; }
    .why-grid, .promise-grid, .review-grid, .county-grid, .article-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps::before { display: none; }
    .trust .wrap { justify-content: flex-start; gap: 18px 44px; }
    .addons { grid-template-columns: 1fr; gap: 32px; }
  }
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-phone span { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav .wrap { gap: 16px; }
    .nav-actions { margin-left: auto; }
    .nav-menu {
      display: none; position: absolute; left: 0; right: 0; top: var(--nav-h);
      background: var(--paper); border-bottom: 1px solid var(--line);
      padding: 12px 28px 22px; box-shadow: 0 24px 40px -20px rgba(23,33,43,.35);
    }
    .nav.open .nav-menu { display: block; }
    .nav-menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-family: var(--font-d); font-weight: 600; font-size: 18px; color: var(--ink); }
    .nav-menu a:last-child { border-bottom: 0; }
    .hero { padding: 48px 0 56px; }
    .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
    .hero-visual { padding: 0 20px 20px 0; }
    .hero-visual .mat { inset: 20px 0 0 20px; }
    .report-chip { left: 12px; bottom: 6px; }
  }
  @media (max-width: 760px) {
    body { padding-bottom: 76px; }
    .section { padding: 68px 0; }
    .section-head { margin-bottom: 36px; }
    .wrap { padding: 0 20px; }
    .nav-menu { padding-left: 20px; padding-right: 20px; }
    :root { --nav-h: 66px; }
    .nav .logo img { height: 40px; }
    .btn { height: 52px; }
    .hero-ctas .btn { flex: 1 1 100%; }
    .hero-proof { gap: 8px 18px; font-size: 14px; }
    .trust .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 22px 20px; }
    .trust .item { flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
    .trust .item:last-child { grid-column: 1 / -1; }
    .trust img { height: 34px; max-width: 100%; object-fit: contain; }
    .trust .item.strip img { height: 30px; }
    .trust .txt b, .trust .txt span { white-space: normal; }
    .svc-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 52px; }
    .svc-card .body { padding: 24px 22px 26px; }
    .svc-card h3 { font-size: 25px; }
    .price-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; }
    .price-row .ic { width: 28px; height: 28px; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .why-grid, .promise-grid, .review-grid, .county-grid, .article-grid, .team-grid { grid-template-columns: 1fr; }
    .why-grid { gap: 30px; }
    .featured { margin-bottom: 36px; padding: 28px 0; }
    .articles .section-head { flex-direction: column; align-items: flex-start; }
    .faq summary { font-size: 17px; padding: 18px 0; }
    .faq .answer { padding-right: 0; }
    .cta { padding: 72px 0; }
    .cta .wrap { grid-template-columns: 1fr; gap: 36px; }
    .cta .hours { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 28px; }
    .cta .btns .btn { flex: 1 1 100%; }
    footer .columns { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .footer-top { flex-direction: column; align-items: flex-start; }
    footer .bottom { flex-direction: column; align-items: flex-start; }
    .mobile-bar {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: rgba(244,243,240,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--line);
    }
    .mobile-bar .btn { height: 50px; font-size: 15px; padding: 0 14px; }
  }


  /* ================================================================
     LEGACY PAGE FAMILIES
     The city pages, article pages, articles index, 404, and privacy
     page keep their original markup and class names. The rules below
     dress those class names in the same system as the homepage.
     Appended to site.css by build_site_css.py.
  ================================================================ */

  /* Full-bleed sections that still need a 1200px inner column */
  .bleed-pad { padding-left: max(28px, calc((100% - var(--wrap)) / 2)); padding-right: max(28px, calc((100% - var(--wrap)) / 2)); }

  /* Breadcrumb */
  .breadcrumb { max-width: var(--wrap); margin: 0 auto; padding: 14px 28px 0; font-size: 13.5px; color: var(--ink-3); }
  .breadcrumb a { color: var(--ink-2); }
  .breadcrumb a:hover { color: var(--ink); }
  .breadcrumb .sep { margin: 0 8px; color: var(--line); }
  .breadcrumb .current { color: var(--ink); font-weight: 500; }

  /* Shared accent word in city-page headlines (large text only) */
  h1 .accent, h2 .accent { color: var(--red); }

  /* ---------- City pages: hero ---------- */
  .hero-tile {
    max-width: var(--wrap); margin: 0 auto; padding: 52px 28px 72px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr; column-gap: 64px;
    text-align: left; background: transparent; min-height: 0; overflow: visible;
  }
  .hero-tile > * { grid-column: 1; }
  /* pin the text children to rows 2–6 so the 1fr rows above and below centre them beside the photo */
  .hero-tile > :nth-child(1) { grid-row: 2; }
  .hero-tile > :nth-child(2) { grid-row: 3; }
  .hero-tile > :nth-child(3) { grid-row: 4; }
  .hero-tile > :nth-child(4) { grid-row: 5; }
  .hero-tile > :nth-child(5) { grid-row: 6; }
  .hero-tile > .hero-image {
    grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-height: 440px;
    border-radius: var(--r-lg); background-size: cover; background-position: center;
    box-shadow: 0 24px 60px -24px rgba(23,33,43,.5); margin: 0;
  }
  .hero-tile .award-badge {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    background: var(--tint); color: var(--navy); padding: 8px 14px; border-radius: 999px;
    font-family: var(--font-d); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    font-variation-settings: "wdth" 112; margin-bottom: 20px;
  }
  .hero-tile .award-badge .star { color: var(--amber); margin: 0; }
  .hero-tile h1 { margin-bottom: 18px; }
  .hero-tile .tagline { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 6px; letter-spacing: 0; }
  .hero-tile .subtagline { font-size: 17px; color: var(--ink-2); margin-bottom: 28px; }
  .hero-tile .ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-bottom: 0; }

  /* Legacy CTA links become buttons: first = primary, rest = secondary */
  .hero-tile .ctas a, .tile .ctas a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 54px; padding: 0 26px; border-radius: var(--r);
    font-family: var(--font-b); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0;
    white-space: nowrap; text-decoration: none !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  .hero-tile .ctas a:first-child, .tile .ctas a:first-child { background: var(--red-btn); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px -10px rgba(220,55,49,.6); }
  .hero-tile .ctas a:first-child:hover, .tile .ctas a:first-child:hover { background: var(--red-btn-hover); transform: translateY(-1px); }
  .hero-tile .ctas a:not(:first-child), .tile .ctas a:not(:first-child) { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
  .hero-tile .ctas a:not(:first-child):hover, .tile .ctas a:not(:first-child):hover { background: var(--navy); color: #fff; }

  /* Spartanburg "home base" banner */
  .home-base-banner {
    background: var(--navy); color: #fff; border-radius: 0; max-width: none; margin: 0;
    padding: 22px max(28px, calc((100% - var(--wrap)) / 2));
    display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: 16px;
  }
  .home-base-banner .pin { width: 28px; height: 28px; flex-shrink: 0; color: var(--red); font-size: 20px; }
  .home-base-banner .pin svg { width: 100%; height: 100%; display: block; }
  .home-base-banner .text { color: #d5dee6; }
  .home-base-banner .text strong, .home-base-banner strong { color: #fff; font-weight: 600; }

  /* ---------- City pages: tile system becomes plain sections ---------- */
  .tile-stack { padding: 0; }
  .tile-row { display: block; gap: 0; max-width: none; margin: 0; padding: 0; }
  .tile {
    position: relative; border-radius: 0; overflow: visible; text-align: left;
    background: transparent; color: var(--ink); display: block; min-height: 0;
    padding: 88px max(28px, calc((100% - var(--wrap)) / 2));
  }
  .tile.compact { min-height: 0; padding: 72px max(28px, calc((100% - var(--wrap)) / 2)); }
  .tile .header { margin-bottom: 44px; max-width: 760px; text-align: left; }
  .tile h2 { margin-bottom: 14px; text-align: left; }
  .tile .eyebrow { margin-bottom: 18px; }
  .tile .lede { margin: 0; opacity: 1; letter-spacing: 0; }
  .tile .body-copy { font-size: 17px; line-height: 1.6; color: var(--ink-2); opacity: 1; max-width: 64ch; margin: 0 0 26px; }
  .tile .ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
  .tile.local-intro, .tile.issues-tile, .tile.nearby-tile { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tile.local-intro { padding-top: 88px; padding-bottom: 88px; }
  .tile.local-intro h2 { max-width: 20ch; }
  .tile.cities-tile, .tile.services-pills, .tile.faq-tile { background: var(--paper); }

  /* Trust strip (city pages) */
  .trust-strip {
    background: #fff; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left;
    padding: 26px max(28px, calc((100% - var(--wrap)) / 2));
  }
  .trust-strip .stat { border-right: 1px solid var(--line-2); padding: 4px 24px 4px 0; }
  .trust-strip .stat:last-child { border-right: 0; }
  .trust-strip .stat .num { font-family: var(--font-d); font-weight: 800; font-size: 40px; letter-spacing: -.02em; line-height: 1; color: var(--ink); margin-bottom: 8px; font-variation-settings: "wdth" 106; font-variant-numeric: tabular-nums; }
  .trust-strip .stat .num .accent { color: var(--red); }
  .trust-strip .stat .label { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

  /* City pills */
  .city-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; max-width: none; margin: 0; }
  .city-pill { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; color: var(--navy); letter-spacing: 0; transition: none; }
  .city-pill:hover { background: #fff; color: var(--navy); border-color: var(--navy); }

  /* Common issues */
  .issues-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: none; margin: 0; text-align: left; }
  .issue-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 28px; }
  .issue-card h3 { font-size: 20px; margin-bottom: 8px; color: var(--ink); }
  .issue-card p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }

  /* Service pills */
  .service-pills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; max-width: none; margin: 0; text-align: left; }
  .service-pill { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
  .service-pill .name { font-family: var(--font-d); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
  .service-pill .price { font-family: var(--font-d); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); }

  /* Reviews tile (city pages) is the one dark room, same as the homepage */
  .tile.reviews-tile { background: var(--navy); color: #fff; }
  .tile.reviews-tile h2 { color: #fff; }
  .tile.reviews-tile .eyebrow { color: #a9bccd; }
  .tile.reviews-tile .lede { color: #c7d3de; }
  .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: none; margin: 0; text-align: left; }
  .tile.reviews-tile .featured { margin-bottom: 40px; }

  /* FAQ (city pages use .faq-item) */
  .tile.faq-tile .faq-list { margin: 0; text-align: left; }
  .faq-item { border-bottom: 1px solid var(--line); padding: 0; }
  .faq-item:first-child { border-top: 0; }
  .faq-item summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 0; cursor: pointer; font-family: var(--font-d); font-weight: 600; font-size: 19px; letter-spacing: -.012em; color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line);
    display: grid; place-items: center; font-family: var(--font-b); font-weight: 500; font-size: 20px; line-height: 1; color: var(--ink-2);
    transition: background .2s ease, color .2s ease;
  }
  .faq-item[open] summary::after { content: "−"; background: var(--navy); border-color: var(--navy); color: #fff; }
  .faq-item .answer { padding: 0 52px 24px 0; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
  .faq-item .answer a { font-weight: 600; }

  /* Nearby cities */
  .tile.nearby-tile h2 { font-size: clamp(26px, 3vw, 34px); }
  .tile.nearby-tile .nearby-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: 20px; }
  .tile.nearby-tile .nearby-links a { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--navy); font-weight: 500; font-size: 15px; transition: none; }
  .tile.nearby-tile .nearby-links a:hover { background: var(--paper); color: var(--navy); border-color: var(--navy); text-decoration: none; }

  /* Final CTA (city pages) */
  .tile.final-cta { background: var(--navy); color: #fff; min-height: 0; padding-top: 104px; padding-bottom: 104px; position: relative; overflow: hidden; }
  .tile.final-cta::before { content: ""; position: absolute; right: -140px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(248,67,61,.22), transparent 62%); pointer-events: none; }
  .tile.final-cta > * { position: relative; }
  .tile.final-cta .eyebrow { color: #a9bccd; }
  .tile.final-cta h2 { color: #fff; font-size: clamp(38px, 5vw, 60px); margin-bottom: 14px; }
  .tile.final-cta .lede { color: #c7d3de; font-size: 19px; margin-bottom: 30px; max-width: 46ch; }
  .tile.final-cta .button-primary {
    display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: var(--r);
    background: var(--red-btn); color: #fff; font-family: var(--font-b); font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1;
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px -10px rgba(220,55,49,.6); transition: background .18s ease, transform .18s ease;
  }
  .tile.final-cta .button-primary:hover { background: var(--red-btn-hover); transform: translateY(-1px); text-decoration: none; }
  .tile.final-cta .secondary { display: block; margin-top: 20px; font-size: 16px; color: #c7d3de; }
  .tile.final-cta .secondary a { color: #fff; font-weight: 600; }

  /* ---------- Article pages ---------- */
  article.post { max-width: 760px; margin: 0 auto; padding: 44px 28px 56px; }
  article.post header { text-align: left; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  article.post header .eyebrow { margin-bottom: 16px; }
  article.post h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; margin-bottom: 16px; }
  article.post .meta { font-size: 14px; color: var(--ink-3); letter-spacing: 0; }
  article.post .meta span { margin: 0 8px; color: var(--line); }
  article.post .body { font-size: 18px; line-height: 1.65; color: var(--ink); letter-spacing: 0; }
  article.post .body p { margin-bottom: 22px; }
  article.post .body a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(66,98,127,.4); }
  article.post .body a:hover { color: var(--navy); text-decoration-color: currentColor; }
  article.post .body h2 { font-size: 28px; line-height: 1.15; margin: 42px 0 14px; }
  article.post .body h3 { font-size: 21px; line-height: 1.25; margin: 30px 0 10px; }
  article.post .body ol, article.post .body ul { margin: 0 0 24px 0; padding-left: 0; list-style: none; counter-reset: list; }
  article.post .body ol li { position: relative; padding-left: 44px; margin-bottom: 16px; counter-increment: list; }
  article.post .body ol li::before { content: counter(list); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; background: var(--navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 13px; font-weight: 700; }
  article.post .body ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
  article.post .body ul li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  article.post .body strong { font-weight: 600; color: var(--ink); }
  article.post .body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 16px; }
  article.post .body table th, article.post .body table td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
  article.post .body table th { background: var(--paper-2); font-family: var(--font-d); font-weight: 700; font-size: 14px; }
  article.post .body img { border-radius: var(--r-lg); margin: 8px 0 22px; }

  .inline-cta { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 36px 32px; text-align: left; margin: 48px 0 0; max-width: none; }
  .inline-cta .eyebrow { color: #a9bccd; margin-bottom: 12px; }
  .inline-cta h3 { color: #fff; font-size: 26px; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.015em; }
  .inline-cta p { color: #c7d3de; font-size: 16.5px; margin-bottom: 22px; }
  .inline-cta .btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: var(--r); background: var(--red-btn); color: #fff; font-family: var(--font-b); font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1; transition: background .18s ease; }
  .inline-cta .btn:hover { background: var(--red-btn-hover); text-decoration: none; }
  .inline-cta .secondary { display: block; margin-top: 16px; font-size: 14.5px; color: #c7d3de; }
  .inline-cta .secondary a { color: #fff; font-weight: 600; }

  .related-row { max-width: var(--wrap); margin: 0 auto; padding: 0 28px 72px; }
  .related-tile { max-width: none; margin: 0; padding: 48px 0 0; background: transparent; border-radius: 0; border-top: 1px solid var(--line); }
  .related-tile h2 { font-size: 28px; text-align: left; margin-bottom: 22px; }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .related-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 24px; transition: border-color .18s ease; }
  .related-card:hover { background: #fff; border-color: var(--navy); }
  .related-card a { color: var(--ink); }
  .related-card a:hover { text-decoration: none; }
  .related-card .label { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); margin-bottom: 10px; }
  .related-card h3 { font-size: 17px; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }

  /* ---------- Articles index ---------- */
  .articles-hero { max-width: var(--wrap); margin: 0 auto; padding: 56px 28px 24px; text-align: left; }
  .articles-hero .eyebrow { margin-bottom: 18px; }
  .articles-hero h1 { font-size: clamp(36px, 4.8vw, 58px); margin-bottom: 16px; color: var(--ink); }
  .articles-hero p { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; margin: 0; }
  .articles-section { max-width: var(--wrap); margin: 0 auto; padding: 16px 28px 0; }
  .articles-section h2 { font-size: 24px; margin: 40px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .article-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 24px 22px; transition: border-color .18s ease; display: flex; flex-direction: column; }
  .article-card:hover { background: #fff; border-color: var(--navy); transform: none; }
  .article-card a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
  .article-card .label { font-family: var(--font-d); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); margin-bottom: 12px; }
  .article-card h3 { font-size: 19px; line-height: 1.25; color: var(--ink); margin-bottom: 10px; }
  .article-card p { font-size: 15px; color: var(--ink-2); line-height: 1.5; flex-grow: 1; margin-bottom: 16px; }
  .article-card .read-more { font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0; }
  .articles-cta { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 56px 40px; text-align: left; max-width: var(--wrap); margin: 64px auto 40px; }
  .articles-cta .eyebrow { color: #a9bccd; margin-bottom: 14px; }
  .articles-cta h2 { font-size: clamp(30px, 3.6vw, 44px); color: #fff; margin: 0 0 14px; border-bottom: 0; padding-bottom: 0; }
  .articles-cta p { font-size: 19px; color: #c7d3de; margin-bottom: 26px; max-width: 48ch; }
  .articles-cta .btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: var(--r); background: var(--red-btn); color: #fff; font-family: var(--font-b); font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1; transition: background .18s ease; }
  .articles-cta .btn:hover { background: var(--red-btn-hover); text-decoration: none; }

  /* ---------- Responsive, legacy families ---------- */
  @media (max-width: 1080px) {
    .issues-grid, .reviews-grid, .related-grid, .articles-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .hero-tile { display: block; padding: 44px 28px 56px; }
    .hero-tile .hero-image { min-height: 280px; margin-top: 32px; }
  }
  @media (max-width: 760px) {
    .breadcrumb { padding: 12px 20px 0; }
    .hero-tile { padding: 36px 20px 48px; }
    .hero-tile .ctas a, .tile .ctas a { flex: 1 1 100%; }
    .tile, .tile.compact { padding: 64px 20px; }
    .tile .header { margin-bottom: 30px; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; padding: 22px 20px; }
    .trust-strip .stat { border-right: 0; padding: 0; }
    .trust-strip .stat:nth-child(odd) { border-right: 1px solid var(--line-2); padding-right: 12px; }
    .trust-strip .stat .num { font-size: 32px; }
    .issues-grid, .reviews-grid, .related-grid, .articles-grid { grid-template-columns: 1fr; }
    .service-pills-grid { grid-template-columns: repeat(2, 1fr); }
    .tile.final-cta { padding-top: 72px; padding-bottom: 72px; }
    .faq-item summary { font-size: 17px; padding: 18px 0; }
    .faq-item .answer { padding-right: 0; }
    article.post { padding: 32px 20px 44px; }
    article.post .body { font-size: 17px; }
    article.post .body h2 { font-size: 25px; }
    article.post .body h3 { font-size: 20px; }
    .inline-cta { padding: 28px 22px; }
    .inline-cta h3 { font-size: 23px; }
    .related-row { padding: 0 20px 56px; }
    .articles-hero { padding: 40px 20px 16px; }
    .articles-section { padding: 8px 20px 0; }
    .articles-cta { padding: 40px 24px; margin: 48px auto 32px; }
    .home-base-banner { padding: 18px 20px; flex-direction: column; gap: 6px; font-size: 15px; }
  }