/* ==========================================================================
   Home page.

   ELEMENTOR TRAP: css_classes is applied to CONTAINERS but silently dropped on
   WIDGETS. Every widget style is reached through its container class plus
   :nth-child, or through an _element_id, which does survive. Do not
   "simplify" these back to widget classes; they will stop matching.

   Balance: 60% white/light, 25% charcoal/slate, 15% red (guide page 7).
   ========================================================================== */

#hbr-hero > .e-con-inner, #hbr-features > .e-con-inner, #hbr-about > .e-con-inner,
#hbr-split > .e-con-inner, #hbr-projectshead > .e-con-inner, #hbr-projects > .e-con-inner,
#hbr-projectsnote > .e-con-inner, #hbr-processhead > .e-con-inner, #hbr-process > .e-con-inner,
#hbr-inspect > .e-con-inner, #hbr-faq > .e-con-inner, #hbr-areas > .e-con-inner,
#hbr-bloghead > .e-con-inner, #hbr-blog > .e-con-inner, #hbr-cta > .e-con-inner {
  max-width: var(--hbr-container); width: 100%; margin-inline: auto;
}

/* --- Shared: eyebrow + section title ------------------------------------- */

.hbr-sectionhead { text-align: center; }

.hbr-sectionhead > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
.hbr-about__copy > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
.hbr-split__copy > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
.hbr-inspect__copy > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
.hbr-faq__copy    .elementor-widget-heading:nth-child(1) .elementor-heading-title,
#hbr-hero-eyebrow .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-sectionhead > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-about__copy > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-split__copy > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-inspect__copy > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-faq__copy    .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-cta__copy    .elementor-widget-heading:nth-child(1) .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: 0 0 var(--hbr-space-4);
}
/* Dark grounds only — separate rule, never a prefix on one item of a list. */
.hbr-section--dark .hbr-sectionhead > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-section--dark .hbr-split__copy > .elementor-widget-heading:nth-child(2) .elementor-heading-title,
.hbr-section--dark .hbr-cta__copy > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
  color: var(--hbr-white);
}
.hbr-section--dark .elementor-widget-text-editor p { color: rgba(255,255,255,0.75); }

/* Explicit sizes for nested sub-headings, which sit deeper than the rules above. */
/* Elementor's kit rule (.elementor-widget-heading .elementor-heading-title) has the
   same specificity as a plain container rule and loads later, so nested headings
   need the section id to win. */
#hbr-split .hbr-split__point .elementor-heading-title {
  color: var(--hbr-white);
  font-family: var(--hbr-font-head);
  font-size: 17px;
  font-weight: var(--hbr-w-bold);
  margin-bottom: 4px;
}

/* --- Image placeholders --------------------------------------------------- */

.hbr-ph {
  width: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(32,38,41,.05) 0 12px, rgba(32,38,41,.09) 12px 24px);
  border: 1px dashed rgba(32,38,41,.28);
  border-radius: var(--hbr-radius);
  display: flex; align-items: center; justify-content: center;
}
.hbr-ph span {
  font-family: var(--hbr-font-head);
  font-size: 12px; font-weight: var(--hbr-w-bold);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hbr-steel);
}
.hbr-section--dark .hbr-ph {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.09) 12px 24px);
  border-color: rgba(255,255,255,.28);
}
.hbr-section--dark .hbr-ph span { color: rgba(255,255,255,.6); }

/* Placeholder text marker */
.hbr-tbc { background: rgba(163,14,15,.10); outline: 1px dashed var(--hbr-accent); padding: 0 5px; }

/* --- 1. Hero -------------------------------------------------------------- */

#hbr-hero { position: relative; }
#hbr-hero-title .elementor-heading-title {
  font-family: var(--hbr-font-head);
  font-size: var(--hbr-size-h1); line-height: 1.08;
  font-weight: var(--hbr-w-extrabold); color: var(--hbr-white);
  margin-bottom: var(--hbr-space-4);
}
#hbr-hero-body p {
  color: rgba(255,255,255,.78); font-size: 18px; line-height: 30px;
  max-width: 52ch; margin-bottom: var(--hbr-space-5);
}
.hbr-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hbr-hero__actions > .elementor-widget-button:nth-child(1) .elementor-button {
  background-color: var(--hbr-accent); color: var(--hbr-white);
  padding: 18px 32px; 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);
}
.hbr-hero__actions > .elementor-widget-button:nth-child(1) .elementor-button:hover { background-color: var(--hbr-red-hover); }
.hbr-hero__actions > .elementor-widget-button:nth-child(2) .elementor-button {
  background-color: transparent; color: var(--hbr-white);
  border: 2px solid rgba(255,255,255,.5);
  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);
}
.hbr-hero__actions > .elementor-widget-button:nth-child(2) .elementor-button:hover { background-color: var(--hbr-white); color: var(--hbr-charcoal); }

.hbr-formpanel {
  background: var(--hbr-white); border-radius: var(--hbr-radius-lg);
  padding: var(--hbr-space-5); box-shadow: var(--hbr-shadow-l);
}
#hbr-formpanel-title .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 26px;
  font-weight: var(--hbr-w-bold); color: var(--hbr-charcoal); margin-bottom: 4px;
}
#hbr-formpanel-intro p { color: var(--hbr-text-muted); font-size: 16px; margin-bottom: var(--hbr-space-4); }

/* --- 2. Feature cards ----------------------------------------------------- */

#hbr-features { margin-top: -70px; z-index: 5; position: relative; padding-bottom: 0 !important; }
#hbr-features > .e-con-inner { gap: 24px; align-items: stretch; }

.hbr-iconcard {
  background: var(--hbr-white);
  border: 1px solid var(--hbr-hairline);
  border-top: 3px solid var(--hbr-accent);
  border-radius: var(--hbr-radius);
  padding: var(--hbr-space-5);
  box-shadow: var(--hbr-shadow-s);
  transition: box-shadow var(--hbr-duration) var(--hbr-ease), transform var(--hbr-duration) var(--hbr-ease);
}
.hbr-iconcard:hover { box-shadow: var(--hbr-shadow-l); transform: translateY(-3px); }
.hbr-iconcard .elementor-icon { color: var(--hbr-accent); font-size: 30px; margin-bottom: var(--hbr-space-3); }
.hbr-iconcard .elementor-icon-wrapper { text-align: left; }
.hbr-iconcard .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-2);
}
.hbr-iconcard .elementor-widget-text-editor p { color: var(--hbr-text-muted); font-size: 15px; line-height: 25px; }
.hbr-iconcard .elementor-widget-button .elementor-button {
  background: transparent; color: var(--hbr-accent); padding: 12px 0 0;
  font-weight: var(--hbr-w-semibold); font-size: 15px;
}
.hbr-iconcard .elementor-widget-button .elementor-button::after { content: " \2192"; }
.hbr-iconcard .elementor-widget-button .elementor-button:hover { color: var(--hbr-red-hover); }

/* --- 3. About ------------------------------------------------------------- */

.hbr-about__media { position: relative; }
.hbr-badge {
  position: absolute; left: 0; bottom: -24px;
  background: var(--hbr-accent); color: var(--hbr-white);
  border-radius: var(--hbr-radius); padding: 16px 22px;
  box-shadow: var(--hbr-shadow-l);
}
.hbr-badge strong { display: block; font-family: var(--hbr-font-head); font-size: 26px; font-weight: var(--hbr-w-extrabold); line-height: 1; }
.hbr-badge span { font-size: 13px; opacity: .9; }
.hbr-badge .hbr-tbc { background: rgba(255,255,255,.2); outline-color: rgba(255,255,255,.6); }

#hbr-checklist .elementor-icon-list-item,
.hbr-inspect__list .elementor-icon-list-item {
  padding: 11px 0; border-bottom: 1px solid var(--hbr-hairline);
}
#hbr-checklist .elementor-icon-list-text,
.hbr-inspect__list .elementor-icon-list-text {
  font-family: var(--hbr-font-body); font-size: 16px;
  color: var(--hbr-charcoal); font-weight: var(--hbr-w-medium);
}
#hbr-checklist .elementor-icon-list-icon i,
.hbr-inspect__list .elementor-icon-list-icon i { color: var(--hbr-accent); }

.hbr-about__copy .elementor-widget-button .elementor-button,
.hbr-inspect__copy .elementor-widget-button .elementor-button,
.hbr-projectsnote .elementor-widget-button .elementor-button,
.hbr-areas .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-about__copy .elementor-widget-button .elementor-button:hover,
.hbr-inspect__copy .elementor-widget-button .elementor-button:hover,
.hbr-projectsnote .elementor-widget-button .elementor-button:hover,
.hbr-areas .elementor-widget-button .elementor-button:hover { background: var(--hbr-red-hover); }

/* --- 4. Dark split -------------------------------------------------------- */

.hbr-split__points { margin-top: var(--hbr-space-5); }
.hbr-split__point .elementor-icon { color: var(--hbr-accent); font-size: 26px; margin-bottom: var(--hbr-space-2); }
.hbr-split__point .elementor-icon-wrapper { text-align: left; }

.hbr-split__point p { font-size: 14px; line-height: 22px; }

/* --- 5. Projects ---------------------------------------------------------- */

#hbr-projectshead { padding-bottom: var(--hbr-space-5) !important; }
#hbr-projects > .e-con-inner { gap: 16px; align-items: stretch; }
.hbr-proj .hbr-ph { height: 100%; }
#hbr-projectsnote .hbr-note { color: var(--hbr-text-muted); font-size: 15px; max-width: 60ch; margin-inline: auto; }

/* --- 6. Process ----------------------------------------------------------- */

#hbr-processhead { padding-bottom: 0 !important; }
#hbr-process > .e-con-inner { gap: 24px; align-items: stretch; padding-bottom: 96px; }
.hbr-step {
  background: var(--hbr-slate); border-radius: var(--hbr-radius);
  padding: var(--hbr-space-5); border-left: 3px solid var(--hbr-accent);
}
.hbr-step > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 44px; font-weight: var(--hbr-w-extrabold);
  color: rgba(255,255,255,.18); line-height: 1; margin-bottom: var(--hbr-space-2);
}
.hbr-step > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 19px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-white); margin-bottom: var(--hbr-space-2);
}
.hbr-step > .elementor-widget-text-editor p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 24px; }

/* --- 7. Inspection CTA ---------------------------------------------------- */

.hbr-inspect__copy p { color: var(--hbr-text-muted); }

/* --- 8. FAQ + stats ------------------------------------------------------- */

#hbr-accordion .elementor-accordion-item {
  border: 1px solid var(--hbr-hairline); border-radius: var(--hbr-radius);
  margin-bottom: var(--hbr-space-2); background: var(--hbr-white); overflow: hidden;
}
#hbr-accordion .elementor-tab-title {
  font-family: var(--hbr-font-head); font-size: 16px; font-weight: var(--hbr-w-semibold);
  color: var(--hbr-charcoal); padding: 17px 20px; border: none;
}
#hbr-accordion .elementor-tab-title.elementor-active { color: var(--hbr-accent); }
#hbr-accordion .elementor-tab-content {
  border: none; padding: 0 20px 18px; color: var(--hbr-text-muted);
  font-size: 15px; line-height: 25px;
}

.hbr-stats { flex-wrap: wrap !important; }
.hbr-stat__cell { width: calc(50% - 8px) !important; }
.hbr-stat {
  background: var(--hbr-charcoal); color: var(--hbr-white);
  border-radius: var(--hbr-radius); padding: 26px 22px; height: 100%;
  border-bottom: 3px solid var(--hbr-accent);
}
.hbr-stat strong {
  display: block; font-family: var(--hbr-font-head); font-size: 30px;
  font-weight: var(--hbr-w-extrabold); line-height: 1.1; margin-bottom: 6px;
}
.hbr-stat span { font-size: 13px; color: rgba(255,255,255,.7); }
.hbr-stat .hbr-tbc { background: rgba(255,255,255,.16); outline-color: rgba(255,255,255,.5); }

/* --- 10. Blog ------------------------------------------------------------- */

#hbr-bloghead { padding-bottom: var(--hbr-space-5) !important; }
#hbr-blog > .e-con-inner { gap: 24px; align-items: stretch; }
.hbr-blogcard {
  background: var(--hbr-white); border: 1px solid var(--hbr-hairline);
  border-radius: var(--hbr-radius); overflow: hidden; padding-bottom: var(--hbr-space-4);
  box-shadow: var(--hbr-shadow-s);
}
.hbr-blogcard .elementor-widget-text-editor:first-child { margin-bottom: var(--hbr-space-3); }
.hbr-blogcard .hbr-ph { border-radius: var(--hbr-radius) var(--hbr-radius) 0 0; border-top: 0; border-inline: 0; }
.hbr-blogcard .elementor-widget-heading .elementor-heading-title {
  font-family: var(--hbr-font-head); font-size: 19px; font-weight: var(--hbr-w-bold);
  color: var(--hbr-charcoal); padding: 0 var(--hbr-space-4); margin-bottom: var(--hbr-space-2);
}
.hbr-blogcard .elementor-widget-text-editor p { color: var(--hbr-text-muted); font-size: 15px; padding: 0 var(--hbr-space-4); }
.hbr-blogcard .elementor-widget-button .elementor-button {
  background: transparent; color: var(--hbr-accent); padding: 10px var(--hbr-space-4) 0;
  font-weight: var(--hbr-w-semibold); font-size: 15px;
}
.hbr-blogcard .elementor-widget-button .elementor-button::after { content: " \2192"; }

/* --- 11. Final CTA -------------------------------------------------------- */

.hbr-cta__action { display: flex; justify-content: flex-end; align-items: center; }
.hbr-cta__copy p { color: rgba(255,255,255,.78); font-size: 17px; margin: 0; }
#hbr-cta .hbr-cta__action .elementor-button {
  background-color: var(--hbr-accent); color: var(--hbr-white);
  padding: 18px 32px; 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); white-space: nowrap;
}
#hbr-cta .hbr-cta__action .elementor-button:hover { background-color: var(--hbr-red-hover); }

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

@media (max-width: 1024px) {
  #hbr-features > .e-con-inner, #hbr-process > .e-con-inner, #hbr-blog > .e-con-inner,
  #hbr-projects > .e-con-inner { flex-wrap: wrap; }
  #hbr-features .e-con-inner > .e-con,
  #hbr-process  .e-con-inner > .e-con,
  #hbr-projects .e-con-inner > .e-con { width: calc(50% - 12px) !important; }
  #hbr-blog .e-con-inner > .e-con { width: 100% !important; }
  #hbr-features { margin-top: 0; padding-top: 64px !important; }
}

@media (max-width: 767px) {
  #hbr-hero > .e-con-inner, #hbr-about > .e-con-inner, #hbr-split > .e-con-inner,
  #hbr-inspect > .e-con-inner, #hbr-faq > .e-con-inner, #hbr-cta > .e-con-inner {
    flex-direction: column;
  }
  #hbr-hero .e-con-inner > .e-con, #hbr-about .e-con-inner > .e-con,
  #hbr-split .e-con-inner > .e-con, #hbr-inspect .e-con-inner > .e-con,
  #hbr-faq .e-con-inner > .e-con, #hbr-cta .e-con-inner > .e-con,
  #hbr-features .e-con-inner > .e-con, #hbr-process .e-con-inner > .e-con,
  #hbr-projects .e-con-inner > .e-con, #hbr-blog .e-con-inner > .e-con { width: 100% !important; }
  .hbr-cta__action { justify-content: flex-start; margin-top: var(--hbr-space-4); }
  .hbr-hero__actions .elementor-button { width: 100%; }
  .hbr-badge { position: static; display: inline-block; margin-top: var(--hbr-space-3); }
  .hbr-about__media { margin-bottom: var(--hbr-space-5); }
}

/* Dark sections: icon lists, list headings and buttons inherit light-canvas colours
   from Elementor globals, which vanish on charcoal. */
.hbr-section--dark .elementor-icon-list-text { color: rgba(255,255,255,0.85); font-family: var(--hbr-font-body); font-size: 16px; }
.hbr-section--dark .elementor-icon-list-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hbr-section--dark .elementor-icon-list-icon svg { fill: var(--hbr-accent); }
.hbr-split__media .elementor-widget-heading .elementor-heading-title { color: var(--hbr-white); }
.hbr-section--dark .hbr-split__copy .elementor-widget-button .elementor-button { background: var(--hbr-red); color: var(--hbr-white); }
.hbr-section--dark .hbr-split__copy .elementor-widget-button .elementor-button:hover { background: var(--hbr-red-hover); }
/* 5-up cards: "Recommendations" is wider than the card at 20px and broke mid-word. */
.hbr-step > .elementor-widget-heading:nth-child(2) .elementor-heading-title { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.35; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }