/*
 * Real Deal HVAC — visual refinement layer.
 *
 * Every page carries its own inline copy of the base styles in <head>, so this
 * file is linked LAST in every <head> to win ties, and its selectors are
 * prefixed with :root so they also out-specify the component <style> blocks
 * that sit further down in <body> (rdfaq / rdgr / rdmap / rdauth / rdfoot).
 *
 * What it does: strips the bordered-and-shadowed box off almost every element,
 * spends blue only on things you can click, and marks section labels with the
 * one signature device — a 2px cool-to-warm rule, because heating and cooling
 * is the whole business.
 *
 * Nothing here changes copy, links, forms, or structured data.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
/* Doubled :root beats the single :root in every inline copy, whatever the order. */
:root:root {
  --ink:        #12110f;
  --dark:       #12110f;
  --body:       #4b463f;
  --muted:      #8a837a;

  --line:       #e9e5df;
  --border:     #e9e5df;
  --hair:       #f1ede7;

  --off:        #f8f6f3;
  --soft:       #f8f6f3;
  --light:      #f8f6f3;
  --light-gray: #f8f6f3;
  --white:      #fff;

  --blue:       #1a56db;
  --blue-dark:  #1344b8;
  --blue-bg:    #f0f4fd;
  --blue-light: #f0f4fd;
  --ember:      #c2410c;
  --orange:     #c2410c;
  --amber:      #b7791f;
  --green:      #14803c;

  --shadow: none;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --thermal: linear-gradient(90deg, #1a56db 0%, #6d4bb4 55%, #c2410c 100%);
}

/* ── 2. Typography ─────────────────────────────────────────────────────── */
:root body {
  font-family: var(--font-body);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root h1, :root h2, :root h3, :root h4,
:root .rdgr-copy h2, :root .rdfaq-in h2, :root .rdmap-info h2, :root .rdauth-in h2 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
}
:root h1 {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 18px 0 20px;
}
:root h2, :root .rdgr-copy h2, :root .rdfaq-in h2, :root .rdmap-info h2, :root .rdauth-in h2 {
  font-size: clamp(27px, 2.7vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
:root h3 { font-size: 18px; line-height: 1.28; letter-spacing: -.018em; }
:root h4 { letter-spacing: -.01em; }
:root p, :root li { font-family: var(--font-body); }
:root h1, :root h2, :root h3 { text-wrap: balance; }
:root .hero-copy, :root .lead, :root .section-head p, :root .est-promo p,
:root .cta-band p, :root .cta-sec p, :root .cta-banner p, :root .rdfaq-lede { text-wrap: pretty; }
:root .hero-copy, :root .lead, :root .section-head p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  max-width: 62ch;
}

/* Figures read as data, not decoration: display face, tight, lining numerals. */
:root .stats-2x2 .sp .v, :root .hs .num, :root .stat-block .num,
:root .rdgr-num, :root .pb-amount, :root .price-row-amount, :root .est-total {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* ── 3. The signature: a cool-to-warm rule above every section label ────── */
:root .eyebrow, :root .section-kicker, :root .sec-label,
:root .price-subhead-label, :root .svc-sec > .section-inner > .section-head > .section-kicker {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
:root .eyebrow::before, :root .section-kicker::before, :root .sec-label::before,
:root .price-subhead-label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 2px;
  margin: -2px 11px 0 0;
  border-radius: 2px;
  background: var(--thermal);
}

/* ── 4. De-boxing: surfaces lose their border, fill and shadow ──────────── */
:root .card,
:root .link-card,
:root .why-card,
:root .svc-card,
:root .value-card,
:root .included-item,
:root .benefit-card,
:root .promo-card,
:root .stat-block,
:root .stats-box,
:root .est-card,
:root .price-box,
:root .loan-detail,
:root .trust-pill,
:root .rev-card,
:root .review-card,
:root .rdgr-card,
:root .rdgr-score,
:root .rdauth-item,
:root .map-placeholder,
:root .split-media,
:root .hero-media,
:root .booking-box,
:root .form-card,
:root .quote-panel,
:root .form-panel,
:root .hs {
  border: 0;
  box-shadow: none;
}
:root .card, :root .link-card, :root .why-card, :root .svc-card, :root .value-card,
:root .rev-card, :root .review-card, :root .rdgr-card, :root .rdgr-score,
:root .trust-pill, :root .stat-block, :root .hs, :root .stats-box,
:root .included-item, :root .benefit-card, :root .rdauth-item {
  background: none;
}
:root .card:hover, :root .why-card:hover, :root .svc-card:hover,
:root .promo-card:hover, :root .benefit-card:hover {
  box-shadow: none;
  transform: none;
}
:root .split-media img, :root .hero-media img, :root .photo-grid img,
:root .svc-card-img img, :root .hero-img img, :root .hero-image img {
  border: 0;
  border-radius: 12px;
}
:root .split-media, :root .hero-media { border-radius: 12px; background: none; }

/* ── 5. Icon chips become plain glyphs ─────────────────────────────────── */
:root .card-icon,
:root .value-icon,
:root .step-number,
:root .why-card-icon,
:root .why-icon,
:root .included-icon,
:root .check-icon,
:root .svc-ico,
:root .map-ci-icon,
:root .ci-icon,
:root .benefit-icon,
:root .form-info-icon,
:root .card-red .card-icon,
:root .card-orange .card-icon {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
:root .card-icon { margin-bottom: 16px; }
:root .why-card-icon { margin-bottom: 14px; }
:root .card-icon svg, :root .value-icon svg, :root .why-card-icon svg, :root .why-icon svg,
:root .included-icon svg, :root .svc-ico svg, :root .map-ci-icon svg,
:root .ci-icon svg, :root .benefit-icon svg, :root .form-info-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--blue);
}
:root .check-icon { min-width: 18px; height: auto; margin-top: 3px; }
:root .check-icon svg { width: 14px; height: 14px; stroke: var(--blue); stroke-width: 2.5; }
:root .feature-list svg, :root .check-list svg { color: var(--blue); stroke-width: 2.25; }

/* ── 6. Section rhythm — space separates, not rules ─────────────────────── */
:root .section, :root .svc-sec, :root .why-sec, :root .included-sec,
:root .content-sec, :root .photo-sec, :root .rdlocal, :root .rdauth {
  border-bottom: 0;
  border-top: 0;
}
:root .section { padding: 84px 56px; }
:root .section-alt { background: var(--off); }
:root .section-head { margin-bottom: 40px; max-width: 720px; }
/* The FAQ, reviews and map blocks each shipped with their own container
   width, so the left edge jumped three times on the way down the page. They
   now sit on the same 1300px grid as every .section. */
:root .rdfaq, :root .rdgr, :root .rdmap, :root .rdauth { border-top: 0; padding: 84px 56px; }
:root .rdgr { background: var(--off); }
:root .rdfaq, :root .rdmap { background: var(--white); }
:root .rdgr-in, :root .rdmap-in, :root .rdauth-in {
  max-width: 1300px;
  margin: 0 auto;
}
:root .rdfaq-in { max-width: 880px; margin: 0 auto; text-align: center; }
:root .rdfaq-in > p.rdfaq-lede { margin: 0 auto 34px; max-width: 62ch; }
:root .rdfaq-list { text-align: left; }

/* ── 7. Hero ───────────────────────────────────────────────────────────── */
:root .hero { border-bottom: 0; }
:root .hero-inner { padding: 76px 56px 72px; gap: 60px; align-items: start; }
:root .hero-copy { margin-bottom: 30px; }
:root .hero-actions { margin-top: 30px; }

/* The four credentials keep their words and lose their boxes. */
:root .trust-row:has(> .trust-pill) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
:root .trust-pill {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  max-width: none;
}
:root .trust-pill strong {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
:root .trust-pill span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Booking panel: one calm surface instead of a card holding ten cards. */
:root .hero-book-card {
  width: min(100%, 452px);
  background: var(--off);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  padding: 28px;
}
:root .hero-book-card .card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
:root .hero-book-card .card-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
:root .svc-grid:has(> .svc-tile) { gap: 6px; }
:root .svc-grid:has(> .svc-card) { gap: 40px 36px; }
:root .svc-tile {
  gap: 9px;
  min-height: 88px;
  padding: 14px 6px 12px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: background .15s ease, box-shadow .15s ease;
}
:root .svc-tile:hover { transform: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root .svc-tile[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
:root .svc-tile:focus-visible { box-shadow: 0 0 0 3px rgba(26,86,219,.22); }
:root .svc-tile .svc-ico { width: auto; height: auto; background: none; color: var(--blue); }
:root .svc-tile .svc-ico svg { width: 19px; height: 19px; stroke-width: 1.6; }
:root .svc-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}
:root .svc-tile.svc-other { min-height: 0; padding: 12px; background: none; box-shadow: inset 0 0 0 1px var(--line); }
:root .svc-tile.svc-other:hover { background: #fff; }
:root .book-note { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* Location-page stat block: four figures on a hairline grid, no boxes. */
:root .stats-box, :root .hs {
  border-radius: 0;
  overflow: visible;
  background: none;
}
:root .stat-block, :root .hs { padding: 0 0 4px; border: 0; }

/* ── 8. Cards read as peers in a list ──────────────────────────────────── */
:root .grid { gap: 44px 40px; }
:root .card, :root .why-card, :root .svc-card {
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
:root .card h3, :root .why-card h3, :root .svc-card h3 { margin-bottom: 10px; }
:root .card p, :root .why-card p, :root .svc-card p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body);
}
:root .link-card { min-height: 0; }
:root .link-card a[data-book-open] {
  align-self: flex-start;
  margin-top: 20px;
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -.005em;
  color: var(--ink);
  gap: 9px;
  transition: box-shadow .15s ease, color .15s ease, background .15s ease;
}
:root .link-card a[data-book-open]:hover {
  background: var(--off);
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.4);
  color: var(--blue);
}
:root .link-card a, :root .svc-link {
  margin-top: 18px;
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -.005em;
  color: var(--blue);
  gap: 7px;
}
:root .link-card a:not([data-book-open]):hover, :root .svc-link:hover { gap: 11px; transition: gap .15s ease; }

/* The included / why lists: rows on hairlines instead of tiles. */
:root .included-item, :root .rdauth-item {
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: none;
}
:root .included-grid, :root .rdauth-list { gap: 0 44px; }

/* Grids that hold hairline-topped cards. */
:root .why-grid:has(> .why-card) { gap: 40px 36px; }
:root .grid-3, :root .grid-2 { gap: 44px 40px; }

/* Location-page figures: no boxes, no dividers — just space. */
:root .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
:root .stats-box { display: block; padding: 0; }
:root .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
:root .hs .v, :root .stat-block .num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 7px;
  color: var(--ink);
}
:root .hs .l, :root .stat-block .desc {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

/* ── 9. Quiet promo band ───────────────────────────────────────────────── */
:root .est-promo {
  display: block;
  max-width: 700px;
  margin: 0 auto;
  padding: 76px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
}
:root .est-promo > div { flex: none; }
:root .est-promo h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 16px;
}
:root .est-promo p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 48ch;
  margin: 0 auto 34px;
}
:root .est-promo .btn {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 18px 38px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: none;
}
:root .section:has(> .section-inner > .est-promo) { padding-top: 0; padding-bottom: 92px; }

/* ── 10. Accordions and link lists ─────────────────────────────────────── */
:root details, :root .rdfaq-list details, :root .faq-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
:root .rdfaq-list details[open] { background: none; }
:root .faq-list, :root .rdfaq-list { gap: 0; }
:root summary, :root .rdfaq-list summary {
  padding: 22px 46px 22px 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}
:root .rdfaq-list summary::after { right: 4px; color: var(--muted); font-weight: 300; }
:root details p, :root .rdfaq-list details p {
  padding: 0 40px 24px 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--body);
}

:root .area-links { gap: 0 30px; }
:root .area-links a, :root .area-link {
  padding: 9px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.008em;
  box-shadow: inset 0 -1px 0 var(--line);
}
:root .area-links a:hover, :root .area-link:hover { color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }

:root .service-link-list a { font-weight: 550; font-size: 13.5px; border-bottom-color: var(--hair); }

/* Pricing page: the loud orange bar under each group title becomes the same
   signature rule everything else uses. */
:root .brochure-divider {
  width: 64px;
  height: 2px;
  background: var(--thermal);
  border-radius: 2px;
  margin-bottom: 22px;
}
:root .trust-check { background: none; border: 0; width: auto; height: auto; color: var(--blue); }
:root .trust-check svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
:root .trust-row:has(> .trust-item) { background: none; padding: 0 0 24px; }
:root .price-menu { background: none; border: 0; border-radius: 0; overflow: visible; }
:root .price-row { border-bottom: 1px solid var(--hair); padding-left: 0; padding-right: 0; }
:root .price-subhead {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 30px 0 12px;
}
:root .price-subhead:first-child { border-top: 0; padding-top: 4px; }
:root .price-row-name { font-weight: 550; }
:root .trust-row:has(> .trust-item) { border: 0; border-radius: 0; }

/* Instant estimate: choices are rows on hairlines, not bordered tiles. */
:root .est-choice {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  padding: 18px 4px;
}
:root .est-choice:hover { background: none; border-color: var(--line); }
:root .est-choice:hover strong { color: var(--blue); }
:root .est-choice.is-picked { background: none; box-shadow: none; border-bottom-color: var(--blue); }
:root .est-choice-ico {
  width: auto; height: auto; min-width: 0;
  background: none; border: 0; border-radius: 0;
  color: var(--blue);
}
:root .est-choice-ico svg { width: 21px; height: 21px; }
:root .est-choice strong { font-weight: 600; letter-spacing: -.015em; }
:root .est-tag {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .13em;
}
:root .est-progress span { height: 2px; border-radius: 2px; }

/* Financing: the sample estimate reads as a spec list, not four grey tiles. */
:root .loan-detail { background: none; padding: 16px 0 0; border-radius: 0; border-top: 1px solid var(--line); }
:root .loan-details { gap: 22px 32px; }

/* About page. */
:root .value-card { padding: 24px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; gap: 14px; }
:root .value-card:hover { border-color: var(--line); }
:root .values-grid { gap: 36px 40px; }
:root .value-icon svg { width: 21px; height: 21px; }
:root .badge {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
}
:root .story-sec { border-bottom: 0; }

/* Financing: numbered steps read as figures, not as bordered coins. */
:root .step-number {
  display: block;
  text-align: center;
  width: auto; height: auto; min-width: 0;
  margin: 0 auto 18px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--blue);
}
:root .benefit-icon { background: none; border: 0; width: auto; height: auto; }

/* Pricing callout: a rule in the warm accent instead of a tinted box. */
:root .pricing-callout {
  border: 0;
  border-left: 2px solid var(--ember);
  border-radius: 0;
  background: none;
  padding: 4px 0 4px 20px;
  margin: 26px 0;
}

/* Booking modal: same de-boxing as the page it opens from. */
:root .bk-modal { border-radius: 16px; }
/* Section 2 sizes every h2 for a page heading; a dialog title is smaller. */
:root .bk-head h2, :root .quote-head h2 { font-size: 22px; letter-spacing: -.025em; margin-bottom: 5px; }
:root .bk-head { background: none; border-bottom: 1px solid var(--line); }
:root .bk-foot { background: none; border-top: 1px solid var(--line); }
:root .bk-tile { border: 0; background: var(--off); border-radius: 10px; }
:root .bk-tile:hover { background: var(--off); box-shadow: inset 0 0 0 1px var(--line); }
:root .bk-tile[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
:root .bk-ico { width: auto; height: auto; background: none; color: var(--blue); }
:root .bk-ico svg { width: 19px; height: 19px; }
:root .bk-tile-other .bk-ico { width: auto; height: auto; }
:root .bk-summary { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 0; }
:root .bk-slot { border-color: var(--line); background: #fff; font-weight: 600; }
:root .bk-btn { font-weight: 650; border-radius: 10px; }

/* ── 11. Reviews ───────────────────────────────────────────────────────── */
:root .rdgr-head { gap: 22px 48px; margin-bottom: 46px; align-items: center; }
:root .rdgr-score { padding: 0; border-radius: 0; gap: 14px; align-items: center; }
:root .rdgr-num { font-size: 56px; }
:root .rdgr-count { font-size: 12.5px; font-weight: 550; color: var(--muted); }
:root .rdgr-grid { gap: 0 40px; }
:root .rdgr-card {
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  gap: 14px;
}
:root .rdgr-quote { font-size: 14.5px; line-height: 1.68; }
:root .rdgr-by { border-top: 0; padding-top: 4px; }
:root .rdgr-job { font-size: 10px; letter-spacing: .11em; color: var(--muted); }
:root .rdgr-name { font-family: var(--font-body); font-weight: 650; font-size: 13.5px; }
:root .rdgr-foot {
  margin: 52px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
:root .rdgr-cta-foot {
  display: inline-flex;
  width: fit-content;
  margin: 18px auto 0;
}
:root .rdgr-in > .rdgr-cta-foot { display: flex; }

/* ── 12. Map ───────────────────────────────────────────────────────────── */
:root .rdmap-in { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 52px; }
:root .rdmap-frame { border: 0; border-radius: 12px; min-height: 420px; }
:root .rdmap-row svg { color: var(--muted); }
@media (max-width: 860px) {
  :root .rdmap-in { grid-template-columns: 1fr; gap: 28px; }
  :root .rdmap-frame { min-height: 300px; }
}

/* ── 13. Forms ─────────────────────────────────────────────────────────── */
:root .quote-panel, :root .form-panel, :root .form-card {
  background: var(--off);
  border-radius: 16px;
  overflow: hidden;
}
:root .quote-head { background: none; border-bottom: 1px solid var(--line); padding: 26px 26px 20px; }
:root .quote-form { padding: 22px 26px 26px; }
:root .fg label, :root .bk-fg label, :root .form-group label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  color: var(--muted);
}
:root .fg input, :root .fg select, :root .fg textarea,
:root .form-group input, :root .form-group select, :root .form-group textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
}
:root .form-note { color: var(--muted); font-size: 11.5px; }

/* ── 14. Buttons — the only saturated surfaces left ─────────────────────── */
:root .btn, :root .rd-btn, :root .bk-btn, :root .nav-btn,
:root .rdgr-cta, :root .rdmap-btn, :root .btn-submit, :root .cta-btn {
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: -.008em;
}
:root .btn-primary, :root .rd-btn-estimate, :root .rd-btn-book, :root .nav-btn-primary {
  box-shadow: none;
}
:root .btn-primary:hover, :root .rd-btn-estimate:hover, :root .rd-btn-book:hover { box-shadow: none; }
:root .rd-btn { border-radius: 10px; }
:root .rd-btn:hover { transform: none; }
:root .rd-btn-call { border-color: var(--line); }
:root .rdgr-cta, :root .rdmap-btn { font-weight: 650; border-radius: 10px; }
:root .rdgr-cta .rdgr-g { background: #fff; }

/* ── 15. Header and footer ─────────────────────────────────────────────── */
:root .site-header { border-bottom: 1px solid var(--line); }
:root .nav { min-height: 92px; }
:root .brand img { width: 164px; height: 72px; }
:root .nav-links > a, :root .nav-service-link {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.005em;
  color: var(--body);
}
:root .nav-links > a:hover, :root .nav-service-link:hover,
:root .nav-links > a[aria-current="page"], :root .nav-service-link[aria-current="page"] {
  background: none;
  color: var(--ink);
}
:root .services-dropdown { border-color: var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(18,17,15,.10); }
:root .services-dropdown-section a { font-weight: 550; border-bottom-color: var(--hair); }
:root .services-dropdown-section strong, :root .mobile-service-group strong {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
:root .footer, :root footer { background: var(--ink); }
:root .footer h3, :root footer h3 {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 14px;
}
:root .footer a, :root footer a { font-weight: 400; color: rgba(255,255,255,.72); }
:root .footer a:hover, :root footer a:hover { color: #fff; }
:root .soc { background: none; border: 0; width: 26px; height: 26px; }
:root .soc:hover { background: none; opacity: .7; }

/* ── 16. Bands that stay saturated on purpose ──────────────────────────── */
/* Section 2 paints every heading with the ink colour, which is wrong on the
   blue and near-black bands. Two classes deep, so it wins there. */
:root .section-dark h1, :root .section-dark h2, :root .section-dark h3,
:root .top-bar, :root .top-bar a,
:root .footer h2, :root .footer h3, :root .footer h4,
:root footer h2, :root footer h3, :root footer h4 { color: #fff; }
:root .section-dark p, :root .footer p, :root footer p { color: rgba(255,255,255,.78); }

/* The closing CTA is the last thing on the page, so it is the one place that
   gets a full centred composition: rule, heading, line, actions, phone. It is
   white rather than a blue slab — the blue is saved for the buttons. */
:root .cta-band, :root .cta-sec, :root .cta-banner {
  background: #fff;
  color: var(--body);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 92px 56px;
  text-align: center;
}
:root .cta-band-inner {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  gap: 0;
}
:root .cta-band-inner::before, :root .cta-sec::before, :root .cta-banner::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 26px;
  border-radius: 2px;
  background: var(--thermal);
}
:root .cta-band h2, :root .cta-sec h2, :root .cta-banner h2 {
  color: var(--ink);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 auto 16px;
}
:root .cta-band p, :root .cta-sec p, :root .cta-banner p {
  color: var(--body);
  font-size: 17px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto 34px;
  opacity: 1;
}
/* Actions sit in one centred row; site.css stacks them full-width inside a band. */
:root .cta-band .cta-actions, :root .cta-sec .rd-cta, :root .cta-banner .rd-cta {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  width: auto;
  max-width: 560px;
  margin: 0 auto;
}
:root .cta-band .rd-cta { justify-content: center; }
:root .cta-band .cta-actions .rd-btn, :root .cta-sec .rd-btn, :root .cta-banner .rd-btn {
  flex: 0 1 auto;
  width: auto;
  min-height: 54px;
  padding: 15px 30px;
  font-size: 15.5px;
}
/* .rd-cta-dark inverts the pair for a blue band. On white it has to invert back. */
:root .cta-band .rd-cta-dark .rd-btn-estimate,
:root .cta-sec .rd-cta-dark .rd-btn-estimate,
:root .cta-banner .rd-cta-dark .rd-btn-estimate {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: none;
}
:root .cta-band .rd-cta-dark .rd-btn-estimate:hover,
:root .cta-sec .rd-cta-dark .rd-btn-estimate:hover,
:root .cta-banner .rd-cta-dark .rd-btn-estimate:hover { background: var(--blue-dark); color: #fff; }
:root .cta-band .rd-cta-dark .rd-btn-call,
:root .cta-sec .rd-cta-dark .rd-btn-call,
:root .cta-banner .rd-cta-dark .rd-btn-call {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
:root .cta-band .rd-cta-dark .rd-btn-call:hover,
:root .cta-sec .rd-cta-dark .rd-btn-call:hover,
:root .cta-banner .rd-cta-dark .rd-btn-call:hover {
  background: var(--off);
  border-color: rgba(26,86,219,.35);
  color: var(--blue);
}
/* Three classes deep, because `.cta-band p` above would otherwise win and give
   the fine print the body size, colour and margins of a lede paragraph. */
:root .cta-band p.cta-fine, :root .cta-sec p.cta-fine, :root .cta-banner p.cta-fine,
:root p.cta-fine {
  max-width: 600px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
:root .cta-fine a { color: var(--ink); font-weight: 650; box-shadow: inset 0 -1px 0 var(--line); }
:root .cta-fine a:hover { color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }

/* ── 17. Motion, focus, reduced motion ─────────────────────────────────── */
:root a:focus-visible, :root button:focus-visible, :root summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 18. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  :root .section { padding: 76px 40px; }
  :root .hero-inner { padding: 64px 40px 60px; gap: 44px; }
  :root .cta-band, :root .cta-sec { padding: 60px 40px; }
  :root .rdfaq, :root .rdgr, :root .rdmap, :root .rdauth { padding: 72px 40px; }
  :root .trust-row { gap: 18px 36px; }
}
@media (max-width: 720px) {
  :root .section { padding: 56px 20px; }
  :root .hero-inner { padding: 40px 20px 44px; gap: 32px; }
  :root .cta-band, :root .cta-sec { padding: 48px 20px; }
  :root .rdfaq, :root .rdgr, :root .rdmap, :root .rdauth { padding: 56px 20px; }
  :root h1 { font-size: 33px; letter-spacing: -.03em; }
  :root h2, :root .rdgr-copy h2, :root .rdfaq-in h2, :root .rdmap-info h2 { font-size: 25px; }
  :root .hero-copy, :root .lead, :root .section-head p { font-size: 15.5px; }
  :root .trust-row:has(> .trust-pill) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-top: 30px;
    padding-top: 22px;
  }
  :root .trust-pill { max-width: none; }
  :root .grid { gap: 32px; }
  :root .rdgr-grid { gap: 0; }
  :root .rdgr-card { padding-top: 22px; margin-top: 22px; }
  :root .rdgr-grid .rdgr-card:first-child { margin-top: 0; }
  :root .rdgr-num { font-size: 46px; }
  :root .hero-book-card { padding: 22px; border-radius: 14px; }
  :root .section-head { margin-bottom: 32px; }
  :root .area-links { gap: 0 22px; }
}
