/* ==========================================================================
   Interior pages — service detail and anything else using the page banner
   plus main/sidebar layout. Built from ReRoof 05_Service_Details.

   ELEMENTOR TRAP: css_classes lands on CONTAINERS, never WIDGETS. Widget
   styles go through the container class plus :nth-child, or an _element_id.
   Elementor's kit heading rule ties a plain container rule on specificity and
   loads later, so some rules need the section id to win.
   ========================================================================== */

#hbr-pagehero > .e-con-inner, #hbr-svcbody > .e-con-inner,
#hbr-relhead > .e-con-inner, #hbr-related > .e-con-inner,
#hbr-relpad > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}

/* --- Page banner ---------------------------------------------------------- */

#hbr-pagehero { border-bottom: 4px solid var(--hbr-accent); }

#hbr-pagehero .hbr-pagehero__inner > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 13px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-accent);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: var(--hbr-space-2);
}
#hbr-pagehero .hbr-pagehero__inner > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: var(--hbr-size-h1); line-height: 1.1;
  font-weight: var(--hbr-w-extrabold);
  color: var(--hbr-white);
  margin-bottom: var(--hbr-space-3);
}

.hbr-crumb { margin: 0; font-size: 14px; color: rgba(255,255,255,0.6); }
.hbr-crumb a { color: rgba(255,255,255,0.82); }
.hbr-crumb a:hover { color: var(--hbr-white); }
.hbr-crumb span { color: var(--hbr-accent); }

/* --- Service body: main column -------------------------------------------- */

#hbr-svcbody > .e-con-inner { align-items: flex-start; gap: 48px; }

.hbr-svc__main .hbr-lead {
  font-size: 20px; line-height: 32px;
  color: var(--hbr-charcoal); font-weight: var(--hbr-w-medium);
  margin: var(--hbr-space-5) 0 var(--hbr-space-4);
}
#hbr-svcbody .hbr-svc__main .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 30px; line-height: 1.2;
  font-weight: var(--hbr-w-extrabold);
  color: var(--hbr-charcoal);
  margin: var(--hbr-space-6) 0 var(--hbr-space-3);
}
.hbr-svc__main .elementor-widget-text-editor p {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 29px;
}
.hbr-svc__main .elementor-icon-list-item { padding: 11px 0; border-bottom: 1px solid var(--hbr-hairline); }
.hbr-svc__main .elementor-icon-list-text {
  font-family: var(--hbr-font-body); font-size: 16px;
  color: var(--hbr-charcoal); font-weight: var(--hbr-w-medium);
}
.hbr-svc__main .elementor-icon-list-icon i { color: var(--hbr-accent); }

/* Numbered inline process */
ol.hbr-steps-inline { list-style: none; margin: 0; padding: 0; counter-reset: hbrstep; }
ol.hbr-steps-inline li {
  counter-increment: hbrstep;
  position: relative;
  padding: 0 0 var(--hbr-space-4) 56px;
}
ol.hbr-steps-inline li::before {
  content: counter(hbrstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--hbr-font-head); font-size: 20px;
  font-weight: var(--hbr-w-extrabold);
  color: var(--hbr-white); background: var(--hbr-accent);
  width: 40px; height: 40px; border-radius: var(--hbr-radius-sm);
  display: flex; align-items: center; justify-content: center;
}
ol.hbr-steps-inline strong {
  display: block; font-family: var(--hbr-font-head);
  font-size: 17px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal); margin-bottom: 2px;
}
ol.hbr-steps-inline span { color: var(--hbr-text-muted); font-size: 16px; }

/* In-content CTA */
.hbr-inlinecta {
  background: var(--hbr-roofline);
  border-left: 4px solid var(--hbr-accent);
  border-radius: var(--hbr-radius);
  padding: var(--hbr-space-5);
  margin-top: var(--hbr-space-6);
}
.hbr-inlinecta strong {
  display: block; font-family: var(--hbr-font-head);
  font-size: 20px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal); margin-bottom: 6px;
}
.hbr-inlinecta p { color: var(--hbr-text-muted); margin-bottom: var(--hbr-space-4) !important; }
.hbr-inlinecta a {
  display: inline-block; background: var(--hbr-accent); color: var(--hbr-white);
  font-family: var(--hbr-font-body); font-weight: var(--hbr-w-semibold);
  font-size: var(--hbr-size-btn); letter-spacing: var(--hbr-ls-btn);
  padding: 15px 28px; border-radius: var(--hbr-radius);
}
.hbr-inlinecta a:hover { background: var(--hbr-red-hover); color: var(--hbr-white); }

/* --- Service body: sidebar ------------------------------------------------ */

.hbr-svc__side { position: sticky; top: 24px; }

#hbr-svcbody .hbr-svc__side > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 15px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: var(--hbr-space-5) 0 var(--hbr-space-3);
}

ul.hbr-svcnav { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hbr-hairline); border-radius: var(--hbr-radius); overflow: hidden; }
ul.hbr-svcnav li { border-bottom: 1px solid var(--hbr-hairline); }
ul.hbr-svcnav li:last-child { border-bottom: 0; }
ul.hbr-svcnav a {
  display: block; padding: 13px 18px;
  font-family: var(--hbr-font-body); font-size: 15px;
  color: var(--hbr-charcoal); background: var(--hbr-white);
  transition: background var(--hbr-duration) var(--hbr-ease), color var(--hbr-duration) var(--hbr-ease);
}
ul.hbr-svcnav a:hover { background: var(--hbr-roofline); color: var(--hbr-accent); padding-left: 24px; }
ul.hbr-svcnav li.is-current a {
  background: var(--hbr-accent); color: var(--hbr-white);
  font-weight: var(--hbr-w-semibold);
}

.hbr-sidecard {
  background: var(--hbr-charcoal); color: var(--hbr-white);
  border-radius: var(--hbr-radius); padding: var(--hbr-space-5);
  margin-top: var(--hbr-space-4);
  border-bottom: 3px solid var(--hbr-accent);
}
.hbr-sidecard strong {
  display: block; font-family: var(--hbr-font-head);
  font-size: 19px; font-weight: var(--hbr-w-bold); margin-bottom: 8px;
}
.hbr-sidecard p { color: rgba(255,255,255,0.72) !important; font-size: 15px; line-height: 24px; }
.hbr-sidecard__phone { font-family: var(--hbr-font-head); font-size: 18px; font-weight: var(--hbr-w-bold); }
.hbr-sidecard .hbr-tbc { background: rgba(255,255,255,0.16); outline-color: rgba(255,255,255,0.5); }
.hbr-sidecard__btn {
  display: block; text-align: center; margin-top: var(--hbr-space-4);
  background: var(--hbr-accent); color: var(--hbr-white);
  font-family: var(--hbr-font-body); font-weight: var(--hbr-w-semibold);
  font-size: 16px; padding: 14px 18px; border-radius: var(--hbr-radius);
}
.hbr-sidecard__btn:hover { background: var(--hbr-red-hover); color: var(--hbr-white); }

/* --- Related services ----------------------------------------------------- */

#hbr-relhead { padding-bottom: var(--hbr-space-5) !important; }
#hbr-related > .e-con-inner { gap: 24px; align-items: stretch; }
#hbr-relpad { padding-top: 0 !important; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  #hbr-related > .e-con-inner { flex-wrap: wrap; }
  #hbr-related .e-con-inner > .e-con { width: calc(50% - 12px) !important; }
}

@media (max-width: 767px) {
  #hbr-svcbody > .e-con-inner { flex-direction: column; }
  #hbr-svcbody .e-con-inner > .e-con { width: 100% !important; }
  .hbr-svc__side { position: static; }
  #hbr-related > .e-con-inner { flex-direction: column; }
  #hbr-related .e-con-inner > .e-con { width: 100% !important; }
  #hbr-pagehero .hbr-pagehero__inner > .elementor-widget-heading:nth-child(2) .elementor-heading-title { font-size: var(--hbr-size-h1); }
}

/* ==========================================================================
   Services index, About, Contact
   ========================================================================== */

#hbr-svcintro > .e-con-inner, #hbr-grp1head > .e-con-inner, #hbr-grp1a > .e-con-inner,
#hbr-grp1b > .e-con-inner, #hbr-grp2head > .e-con-inner, #hbr-grp2 > .e-con-inner,
#hbr-aboutmain > .e-con-inner, #hbr-mission > .e-con-inner, #hbr-valueshead > .e-con-inner,
#hbr-values > .e-con-inner, #hbr-contactcards > .e-con-inner, #hbr-contactbody > .e-con-inner,
#hbr-svcspacer > .e-con-inner, #hbr-aboutspacer > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}

/* Card rows share the home page's icon-card treatment. */
.hbr-cardrow > .e-con-inner { gap: 24px; align-items: stretch; }
#hbr-grp1a, #hbr-grp1b, #hbr-grp2, #hbr-values, #hbr-contactcards { padding-bottom: 24px !important; }
#hbr-svcintro { padding-bottom: var(--hbr-space-5) !important; }

/* Group headings on the services index */
.hbr-grouptitle .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 22px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: var(--hbr-space-3);
  border-bottom: 2px solid var(--hbr-accent);
  margin-bottom: var(--hbr-space-5);
  display: inline-block;
}
.hbr-grphead { padding-top: var(--hbr-space-6) !important; padding-bottom: 0 !important; }

/* --- About ---------------------------------------------------------------- */

#hbr-aboutmain .hbr-about__copy > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 13px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: var(--hbr-space-2);
}
#hbr-aboutmain .hbr-about__copy > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: var(--hbr-size-h2); line-height: 1.15;
  font-weight: var(--hbr-w-extrabold); color: var(--hbr-charcoal);
  margin-bottom: var(--hbr-space-4);
}
#hbr-aboutmain .hbr-about__copy .elementor-widget-text-editor p {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 29px;
}
#hbr-aboutlist .elementor-icon-list-item { padding: 11px 0; border-bottom: 1px solid var(--hbr-hairline); }
#hbr-aboutlist .elementor-icon-list-text {
  font-family: var(--hbr-font-body); font-size: 16px;
  color: var(--hbr-charcoal); font-weight: var(--hbr-w-medium);
}
#hbr-aboutlist .elementor-icon-list-icon i { color: var(--hbr-accent); }
#hbr-aboutmain .hbr-about__copy .elementor-widget-button .elementor-button {
  background: var(--hbr-accent); color: var(--hbr-white);
  padding: 16px 30px; border-radius: var(--hbr-radius);
  font-family: var(--hbr-font-body); font-weight: var(--hbr-w-semibold);
  font-size: var(--hbr-size-btn); letter-spacing: var(--hbr-ls-btn);
  margin-top: var(--hbr-space-4);
}
#hbr-aboutmain .hbr-about__copy .elementor-widget-button .elementor-button:hover { background: var(--hbr-red-hover); }

/* Mission — quoted straight from the brand guide, so it is set apart. */
#hbr-mission .hbr-missiontext {
  font-family: var(--hbr-font-head);
  font-size: 26px; line-height: 40px; font-weight: var(--hbr-w-medium);
  color: var(--hbr-white) !important;
  max-width: 46ch; margin-inline: auto; text-align: center;
}

/* --- Contact -------------------------------------------------------------- */

#hbr-contactbody > .e-con-inner { align-items: flex-start; gap: 48px; }

#hbr-contactbody .hbr-contact__form > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 13px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: var(--hbr-space-2);
}
#hbr-contactbody .hbr-contact__form > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: var(--hbr-size-h2); line-height: 1.15;
  font-weight: var(--hbr-w-extrabold); color: var(--hbr-charcoal);
  margin-bottom: var(--hbr-space-3);
}
#hbr-contactbody .hbr-contact__form .elementor-widget-text-editor p {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 29px;
  margin-bottom: var(--hbr-space-5);
}
/* The form sits on Roofline Gray here, so it needs its own white panel. */
#hbr-contactbody #hbr-form {
  background: var(--hbr-white);
  border-radius: var(--hbr-radius-lg);
  padding: var(--hbr-space-5);
  box-shadow: var(--hbr-shadow-s);
}
#hbr-contactbody .hbr-contact__side .hbr-sidecard { margin-top: var(--hbr-space-4); }

/* Contact info cards centre their icon and text. */
#hbr-contactcards .hbr-iconcard { text-align: center; }
#hbr-contactcards .hbr-iconcard .elementor-icon-wrapper { text-align: center; }

@media (max-width: 1024px) {
  .hbr-cardrow > .e-con-inner { flex-wrap: wrap; }
  .hbr-cardrow .e-con-inner > .e-con { width: calc(50% - 12px) !important; }
}
@media (max-width: 767px) {
  #hbr-aboutmain > .e-con-inner, #hbr-contactbody > .e-con-inner { flex-direction: column; }
  #hbr-aboutmain .e-con-inner > .e-con,
  #hbr-contactbody .e-con-inner > .e-con,
  .hbr-cardrow .e-con-inner > .e-con { width: 100% !important; }
  #hbr-mission .hbr-missiontext { font-size: 20px; line-height: 32px; }
}

/* ==========================================================================
   Get a Free Estimate — the conversion page.
   One action only; no competing CTA band at the foot.
   ========================================================================== */

#hbr-estimate > .e-con-inner, #hbr-estimatetrust > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}
#hbr-estimate > .e-con-inner { align-items: flex-start; gap: 48px; }

#hbr-estimate .hbr-estimate__form > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: var(--hbr-size-h2); line-height: 1.15;
  font-weight: var(--hbr-w-extrabold); color: var(--hbr-charcoal);
  margin-bottom: var(--hbr-space-3);
}
#hbr-estimate .hbr-estimate__form .elementor-widget-text-editor p {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 29px;
  margin-bottom: var(--hbr-space-5);
}
#hbr-estimate #hbr-form {
  background: var(--hbr-roofline);
  border-radius: var(--hbr-radius-lg);
  padding: var(--hbr-space-5);
  border-top: 3px solid var(--hbr-accent);
}
#hbr-estimate .hbr-estimate__side > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 15px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal); text-transform: uppercase; letter-spacing: 0.1em;
  margin: var(--hbr-space-6) 0 var(--hbr-space-4);
}
#hbr-estimatetrust .hbr-iconcard { text-align: center; }
#hbr-estimatetrust .hbr-iconcard .elementor-icon-wrapper { text-align: center; }

@media (max-width: 1024px) {
  #hbr-estimate > .e-con-inner { flex-direction: column !important; }
  #hbr-estimate .e-con-inner > .e-con { width: 100% !important; }
  #hbr-estimate .hbr-estimate__side > .elementor-widget-heading .elementor-heading-title { margin-top: var(--hbr-space-5); }
}

/* ==========================================================================
   Footer — compacted 2026-09-12.
   Measured before: 481px desktop, 1440px mobile (taller than the viewport).
   ========================================================================== */

#hbr-footer { padding-top: 56px !important; padding-bottom: 32px !important; }
#hbr-footer > .e-con-inner {
  gap: 32px;
  padding-block: 0;   /* carried 136px of its own padding */
}

/* .hbr-footer-heading is a class on a heading WIDGET, which Elementor drops,
   so it never matched. Column headings were rendering 40px tall for 14px text. */
#hbr-footer .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: 14px;
  font-weight: var(--hbr-w-bold);
  line-height: 1.3;
  color: var(--hbr-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
/* The kit's 24px space_between_widgets applies at every depth, so it has to be
   cleared inside each footer column too, not only on the columns themselves.
   That was why the columns stayed ~250px after the padding came down. */
#hbr-footer > .e-con-inner > *,
#hbr-footer .e-con > *,
#hbr-footer .elementor-widget { margin-block: 0 !important; margin-bottom: 0 !important; }
#hbr-footer .e-con { row-gap: 0; }

/* The footer logo widget's css_classes was dropped by Elementor (widgets lose
   it, containers keep it), so .hbr-logo never existed here. Target the widget
   type instead. Footer logos are decorative repeats of the header mark, so the
   220px minimum does not bind. */
#hbr-footer .elementor-widget-image img {
  width: 200px; min-width: 0; max-width: 200px; height: auto;
  display: block; margin-bottom: 12px;
}
.hbr-footer-about p { font-size: 15px; line-height: 24px; }

.hbr-footer-heading { margin-bottom: var(--hbr-space-3) !important; font-size: 14px; }
ul.hbr-footer-links li { margin-bottom: 4px; }
ul.hbr-footer-links a { font-size: 15px; line-height: 24px; }
.hbr-footer-contact { font-size: 15px; line-height: 24px; }

.hbr-footer-bar { padding-top: 12px !important; padding-bottom: 12px !important; }
.hbr-footer-bar > .e-con-inner { gap: 8px; padding-block: 0; }
/* Same 24px kit widget gap that inflated the header rows. */
.hbr-footer-bar > .e-con-inner > *,
.hbr-footer-bar .elementor-widget { margin-block: 0 !important; margin-bottom: 0 !important; }
.hbr-footer-bar p { font-size: 13px; line-height: 1.4; margin: 0; }

/* ==========================================================================
   Resources hub + FAQ page
   ========================================================================== */

#hbr-reshub > .e-con-inner, #hbr-resspacer > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}
#hbr-reshub { padding-bottom: 0 !important; }
#hbr-reshub .hbr-iconcard { text-align: center; }
#hbr-reshub .hbr-iconcard .elementor-icon-wrapper { text-align: center; }
#hbr-reshub .hbr-iconcard .elementor-icon { font-size: 34px; }
#hbr-reshub .hbr-iconcard .elementor-widget-button .elementor-button {
  background: var(--hbr-accent);
  color: var(--hbr-white);
  padding: 14px 26px;
  border-radius: var(--hbr-radius);
  margin-top: var(--hbr-space-3);
}
#hbr-reshub .hbr-iconcard .elementor-widget-button .elementor-button::after { content: none; }
#hbr-reshub .hbr-iconcard .elementor-widget-button .elementor-button:hover { background: var(--hbr-red-hover); }

/* FAQ page: several accordion groups, each under its own H2. */
.hbr-faqpage .hbr-svc__main .elementor-accordion { margin-bottom: var(--hbr-space-5); }
.hbr-faqpage .hbr-svc__main .elementor-accordion-item {
  border: 1px solid var(--hbr-hairline);
  border-radius: var(--hbr-radius);
  margin-bottom: 10px;
  background: var(--hbr-white);
  overflow: hidden;
}
.hbr-faqpage .hbr-svc__main .elementor-tab-title {
  font-family: var(--hbr-font-head);
  font-size: 16px; font-weight: var(--hbr-w-semibold);
  color: var(--hbr-charcoal); padding: 16px 20px; border: none;
}
.hbr-faqpage .hbr-svc__main .elementor-tab-title.elementor-active { color: var(--hbr-accent); }
.hbr-faqpage .hbr-svc__main .elementor-tab-content {
  border: none; padding: 0 20px 18px;
  color: var(--hbr-text-muted); font-size: 16px; line-height: 26px;
}

/* ==========================================================================
   Service Areas index + city pages
   ========================================================================== */

#hbr-areacards > .e-con-inner, #hbr-areamap > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}
#hbr-areacards { padding-bottom: 32px !important; }
#hbr-areacards .hbr-iconcard { text-align: center; }
#hbr-areacards .hbr-iconcard .elementor-icon-wrapper { text-align: center; }
#hbr-areacards .hbr-iconcard .elementor-icon { font-size: 28px; }

#hbr-areamap > .e-con-inner { align-items: center; }
#hbr-areamap .hbr-inspect__copy .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: var(--hbr-size-h2); line-height: 1.15;
  font-weight: var(--hbr-w-extrabold); color: var(--hbr-charcoal);
  margin-bottom: var(--hbr-space-3);
}
#hbr-areamap .hbr-inspect__copy .elementor-widget-text-editor p {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 29px;
}

/* The unconfirmed-area notice. Deliberately loud: it must not ship unnoticed. */
.hbr-areanotice {
  background: rgba(163, 14, 15, 0.06);
  border-left: 3px solid var(--hbr-accent);
  border-radius: 0 var(--hbr-radius-sm) var(--hbr-radius-sm) 0;
  padding: 14px 16px;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--hbr-text-muted) !important;
  margin-block: var(--hbr-space-4) !important;
  text-align: left;
}
.hbr-sectionhead .hbr-areanotice { max-width: 68ch; margin-inline: auto !important; }

@media (max-width: 1024px) {
  #hbr-areamap > .e-con-inner { flex-direction: column !important; }
  #hbr-areamap .e-con-inner > .e-con { width: 100% !important; }
}

/* ==========================================================================
   Legal pages — long-form prose, measure-limited for readability
   ========================================================================== */

#hbr-legal > .e-con-inner { max-width: var(--hbr-container); width: 100%; margin-inline: auto; }
.hbr-legal__body { max-width: 76ch; }

.hbr-legal__body p { color: var(--hbr-text-muted); font-size: 17px; line-height: 30px; margin: 0 0 var(--hbr-space-4); }
.hbr-legal__body h2 {
  font-family: var(--hbr-font-head);
  font-size: 24px; line-height: 1.25; font-weight: var(--hbr-w-extrabold);
  color: var(--hbr-charcoal);
  margin: var(--hbr-space-6) 0 var(--hbr-space-3);
  padding-top: var(--hbr-space-3);
  border-top: 1px solid var(--hbr-hairline);
}
.hbr-legal__body ul { margin: 0 0 var(--hbr-space-4) 0; padding: 0; list-style: none; }
.hbr-legal__body li {
  color: var(--hbr-text-muted); font-size: 17px; line-height: 28px;
  padding: 8px 0 8px 24px; position: relative;
}
.hbr-legal__body li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--hbr-accent);
}
.hbr-legal__body strong { color: var(--hbr-charcoal); }
.hbr-legal__body a { color: var(--hbr-accent); text-decoration: underline; text-underline-offset: 3px; }

.hbr-legal-meta { font-size: 15px !important; }

/* Unresolved legal facts. Loud on purpose — this page must not go live with
   a placeholder entity name or contact address still in it. */
.hbr-legal-tbc {
  background: rgba(163,14,15,0.06);
  border-left: 3px solid var(--hbr-accent);
  border-radius: 0 var(--hbr-radius-sm) var(--hbr-radius-sm) 0;
  padding: 14px 16px;
  font-size: 15px !important; line-height: 24px !important;
}

@media (max-width: 767px) {
  .hbr-legal__body p, .hbr-legal__body li { font-size: 16px; line-height: 27px; }
  .hbr-legal__body h2 { font-size: 21px; }
}

/* Privacy link in the footer bar. */
.hbr-footer-bar a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 3px; }
.hbr-footer-bar a:hover { color: var(--hbr-white); }

/* ---- client-copy pages (build-site-pages.php, 2026-09-24) ---------------- */
/* Tagline sits under the photo, above the intro copy. */
#hbr-svcbody .hbr-svc__main > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  font-size: 26px; line-height: 1.3; margin-top: var(--hbr-space-3);
}
#hbr-svcbody .hbr-svc__main .elementor-widget-heading h3.elementor-heading-title {
  font-size: 20px; line-height: 1.35; margin-top: var(--hbr-space-3);
}
.hbr-svc__main ul.hbr-list { margin: 0 0 var(--hbr-space-4); padding: 0; list-style: none; }
.hbr-svc__main ul.hbr-list li {
  position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--hbr-hairline);
}
.hbr-svc__main ul.hbr-list li::before {
  content: ""; position: absolute; left: 4px; top: 17px; width: 10px; height: 10px;
  background: var(--hbr-accent); clip-path: polygon(50% 0, 100% 60%, 100% 100%, 0 100%, 0 60%);
}
.hbr-svc__main .elementor-widget-button .elementor-button {
  background-color: var(--hbr-accent); color: #fff; font-family: var(--hbr-font-head);
  font-weight: 700; border-radius: 4px; padding: 14px 24px;
}
.hbr-svc__main .elementor-widget-button .elementor-button:hover { background-color: var(--hbr-red-hover); }
.hbr-sidecard p:not(.hbr-sidecard__phone) { line-height: 1.5; }
/* About: 5 value cards wrap 3 + 2 instead of squeezing into one row. */
#hbr-values > .e-con-inner { flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Landing-page sections (Shingle Rejuvenation, 2026-10-02)
   Rendered by build-site-pages.php for pages with a `landing` key.
   ========================================================================== */

#hbr-landing-steps > .e-con-inner, #hbr-landing-cost > .e-con-inner,
#hbr-landing-costnote > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}
#hbr-landing-steps > .e-con-inner, #hbr-landing-cost > .e-con-inner { align-items: stretch; }

.hbr-landing__lead {
  max-width: 68ch; margin: var(--hbr-space-3) auto 0 !important;
  font-size: 18px; line-height: 28px; color: var(--hbr-text-muted);
}
.hbr-landing__note {
  max-width: 76ch; margin: var(--hbr-space-4) auto 0 !important; text-align: center;
  font-size: 14px; line-height: 22px; color: var(--hbr-text-muted);
}

/* Steps: same card as the home "Why choose us" row, four across. */
#hbr-landing-stepshead { padding-bottom: var(--hbr-space-5) !important; }
.hbr-landing-steps .hbr-step { min-height: 100%; }
.hbr-step__link { color: var(--hbr-white) !important; font-weight: var(--hbr-w-semibold); text-decoration: underline; text-underline-offset: 3px; }
.hbr-step__link:hover { color: rgba(255,255,255,.8) !important; }

/* Cost: two option cards. */
#hbr-landing-costhead { padding-bottom: var(--hbr-space-5) !important; }
.hbr-costcard {
  background: var(--hbr-white); border: 1px solid var(--hbr-hairline);
  border-radius: var(--hbr-radius); padding: var(--hbr-space-5);
}
.hbr-costcard--featured { border-top: 4px solid var(--hbr-accent); }
.hbr-costcard > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 20px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal); margin-bottom: var(--hbr-space-3);
}
.hbr-costcard__price {
  font-family: var(--hbr-font-head); font-size: 40px; line-height: 1; font-weight: var(--hbr-w-extrabold);
  color: var(--hbr-charcoal); margin: 0 0 var(--hbr-space-4) !important;
}
.hbr-costcard__price small { font-family: var(--hbr-font-body); font-size: 15px; font-weight: var(--hbr-w-medium); color: var(--hbr-text-muted); margin-left: 6px; }
.hbr-costcard__facts { list-style: none; margin: 0; padding: 0; }
.hbr-costcard__facts li {
  position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--hbr-hairline);
  font-size: 16px; line-height: 24px; color: var(--hbr-charcoal);
}
.hbr-costcard__facts li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 10px;
  background: var(--hbr-accent); clip-path: polygon(50% 0, 100% 60%, 100% 100%, 0 100%, 0 60%);
}

/* Compare table. */
.hbr-landing-compare__body { max-width: 900px; margin-inline: auto; width: 100%; }
.hbr-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--hbr-space-5); }
.hbr-compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; line-height: 24px; }
.hbr-compare th, .hbr-compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hbr-hairline); }
.hbr-compare thead th {
  background: var(--hbr-charcoal); color: var(--hbr-white);
  font-family: var(--hbr-font-head); font-size: 15px; font-weight: var(--hbr-w-bold);
  text-transform: uppercase; letter-spacing: .06em; border-bottom: none;
}
.hbr-compare thead th:first-child { border-radius: var(--hbr-radius) 0 0 0; }
.hbr-compare thead th:last-child { border-radius: 0 var(--hbr-radius) 0 0; }
.hbr-compare thead th.is-us { background: var(--hbr-accent); }
.hbr-compare tbody th { font-family: var(--hbr-font-head); font-weight: var(--hbr-w-semibold); color: var(--hbr-charcoal); width: 30%; }
.hbr-compare tbody td { color: var(--hbr-text-muted); }
.hbr-compare tbody td.is-us { background: rgba(163,14,15,.05); color: var(--hbr-charcoal); font-weight: var(--hbr-w-medium); }

/* FAQ accordion (same treatment as /resources/faqs/). */
.hbr-landing-faq__body { max-width: 820px; margin: var(--hbr-space-5) auto 0; width: 100%; }
.hbr-landing-faq .elementor-accordion-item {
  border: 1px solid var(--hbr-hairline); border-radius: var(--hbr-radius);
  margin-bottom: 10px; background: var(--hbr-white); overflow: hidden;
}
.hbr-landing-faq .elementor-tab-title {
  font-family: var(--hbr-font-head); font-size: 16px; font-weight: var(--hbr-w-semibold);
  color: var(--hbr-charcoal); padding: 16px 20px; border: none;
}
.hbr-landing-faq .elementor-tab-title.elementor-active { color: var(--hbr-accent); }
.hbr-landing-faq .elementor-tab-content {
  border: none; padding: 0 20px 18px; color: var(--hbr-text-muted); font-size: 16px; line-height: 26px;
}

@media (max-width: 1024px) {
  #hbr-landing-steps .e-con-inner > .e-con { width: calc(50% - 12px) !important; }
}
@media (max-width: 767px) {
  #hbr-landing-steps .e-con-inner > .e-con,
  #hbr-landing-cost .e-con-inner > .e-con { width: 100% !important; }
  .hbr-costcard__price { font-size: 32px; }
}
/* Compare table stacks into row cards on phones: label, then the two values side by side. */
@media (max-width: 767px) {
  .hbr-compare-wrap { overflow: visible; }
  .hbr-compare { min-width: 0; display: block; }
  .hbr-compare thead { display: none; }
  .hbr-compare tbody { display: block; }
  .hbr-compare tbody tr {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--hbr-hairline); border-radius: var(--hbr-radius);
    margin-bottom: 10px; overflow: hidden; background: var(--hbr-white);
  }
  .hbr-compare tbody th { grid-column: 1 / -1; width: auto; padding: 12px 14px 8px; border-bottom: none; font-size: 15px; }
  .hbr-compare tbody td { padding: 10px 14px 14px; font-size: 15px; line-height: 22px; border-bottom: none; }
  .hbr-compare tbody td::before {
    display: block; font-family: var(--hbr-font-head); font-size: 11px; font-weight: var(--hbr-w-bold);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; color: var(--hbr-text-muted);
  }
  .hbr-compare tbody td.is-us::before { content: "Rejuvenating"; color: var(--hbr-accent); }
  .hbr-compare tbody td:not(.is-us)::before { content: "Replacing"; }
}