/* ============================================================
   BIG BEND GUTTERS — global stylesheet

   The design prototype expressed nearly all styling as inline styles on each
   element (Claude Design renders one component at a time), and put only the
   things inline styles cannot do — resets, hover states, focus rings and media
   queries — inside <helmet><style> blocks. Those blocks are collected here,
   verbatim in effect, keyed by class instead of the prototype's data-attributes.
   Element-level styles stay inline in the markup so the pages remain a
   one-to-one match with the source design files.
   ============================================================ */

/* ---------- root (from `Big Bend Gutters.dc.html`) ---------- */
html, body { margin: 0; background: #F5F8FB; }
* { box-sizing: border-box; }
a { color: #0F6FBF; text-decoration: none; }
a:hover { color: #0C5C9E; }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ---------- accessibility ---------- */
.bbg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #0C3A5E; color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
}
.bbg-skip:focus { left: 0; color: #fff; }

.bbg-navlink:focus-visible,
.bbg-focus:focus-visible,
.ft-focus:focus-visible {
  outline: 3px solid #5AA6DE; outline-offset: 2px; border-radius: 6px;
}

/* ---------- header (from Header.dc.html helmet) ---------- */
.bbg-navlink:hover { background: #F4F8FC; }
.bbg-city-link:hover { color: #0F6FBF; }
.bbg-btn-primary:hover { background: #0C5C9E !important; color: #fff; }
.bbg-drop[hidden] { display: none; }
.bbg-drawer[hidden] { display: none; }
[data-acc-panel][hidden] { display: none; }
[data-acc-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }
body.bbg-no-scroll { overflow: hidden; }

@media (max-width: 980px) {
  .bbg-desktop-nav { display: none !important; }
  .bbg-desktop-cta { display: none !important; }
  .bbg-mobile-call { display: flex !important; }
  .bbg-mobile-toggle { display: flex !important; }
  .bbg-drop { display: none !important; }
  /* Utility-bar phone: the number and the hours together wrap to two lines
     inside a 40px bar on a phone. The round call button appears at this same
     breakpoint, so the number stays one tap away. */
  .bbg-topbar-phone { display: none !important; }
  .bbg-topbar { justify-content: center !important; }
}
@media (min-width: 1120px) {
  .bbg-wide { display: inline !important; }
}

/* ---------- sticky mobile CTA (from `Big Bend Gutters.dc.html`) ---------- */
.bbg-mcta { display: none; }
@media (max-width: 980px) {
  .bbg-mcta { display: grid; }
  .bbg-mcta-spacer { display: block !important; }
}

/* ---------- shared card interactions (from `style-hover` attributes) ---------- */
.bbg-card-lift { transition: box-shadow .18s ease, border-color .18s ease; }
.bbg-card-lift:hover { box-shadow: 0 16px 34px rgba(12,58,94,.14); border-color: #BEDAF0; }
.bbg-tile { transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bbg-tile:hover { background: #fff; border-color: #BEDAF0; box-shadow: 0 12px 28px rgba(12,58,94,.1); }

/* ---------- home page (from HomePage.dc.html helmet) ---------- */
@media (max-width: 900px) {
  .hp-hero { grid-template-columns: 1fr !important; }
  .hp-2col { grid-template-columns: 1fr !important; }
  .hp-form { grid-template-columns: 1fr !important; }
}
@media (max-width: 1080px) {
  .hp-cty { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  .hp-cty { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-3 { grid-template-columns: 1fr !important; }
  .hp-cond { grid-template-columns: 1fr 1fr !important; }
  .hp-proc { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  /* not in the prototype: keeps the name/phone pair legible on small phones */
  .hp-field-pair { grid-template-columns: 1fr !important; }
}

/* Card CTAs in the added sections: padding enlarges the tap/click target to
   ~32px for WCAG 2.5.8 while the negative margin cancels the added box, so the
   rendered position is identical to the existing text-link CTAs. */
.bbg-card-cta { padding: 6px 0; margin: -6px 0; }

/* added homepage sections — same breakpoints as the grids above */
@media (max-width: 1080px) {
  .hp-cards-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-cards-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Orphan card. In two columns an odd-numbered group leaves the last card
     alone on its own row, hard against the left edge. Span it across both
     columns and cap it at one column's width so it centres under the pair
     above. No placeholder card, no empty grid cell.

     Scoped to the two grids that actually pass through a two-column stage.
     .hp-proc goes three columns straight to one, so it never has an orphan and
     must not be included here: between 760px and 1080px it is still three
     columns, and this rule would shrink its third card for no reason. */
  .hp-cards-3 > :last-child:nth-child(odd),
  .hp-cards-4 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 9px);
    margin-inline: auto;
  }
}

/* .hp-cards-2 is a two-column card group at every width above the phone
   breakpoint, so an odd number of cards always strands the last one on the
   left. Its own gap is 14px, hence the different half-gap here. Applies at all
   widths rather than inside a query, because the grid never widens beyond two
   columns. Bullet lists are deliberately excluded: a lone bullet centred under
   a two-column list reads worse than one left-aligned in reading order. */
.hp-cards-2 > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 7px);
  margin-inline: auto;
}
@media (max-width: 560px) {
  .hp-cards-2 { grid-template-columns: 1fr !important; }
  .hp-cards-2 > :last-child:nth-child(odd) { width: auto; grid-column: auto; }
}
@media (max-width: 760px) {
  .hp-cards-3 { grid-template-columns: 1fr !important; }
  /* .hp-cards-3 is single column from here, so release its orphan. */
  .hp-cards-3 > :last-child:nth-child(odd) { width: auto; grid-column: auto; }
}
@media (max-width: 600px) {
  .hp-cards-4 { grid-template-columns: 1fr !important; }
  /* .hp-cards-4 stays two columns until 600px, so its orphan is released here
     rather than at 760px. */
  .hp-cards-4 > :last-child:nth-child(odd) { width: auto; grid-column: auto; }
  .hp-decision-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hp-cty { grid-template-columns: 1fr !important; }
  .hp-cond { grid-template-columns: 1fr !important; }
  .hp-trust { grid-template-columns: 1fr 1fr !important; }
}

.bbg-card-outline { transition: box-shadow .18s ease, border-color .18s ease; }
.bbg-card-outline:hover { border-color: #BEDAF0; box-shadow: 0 12px 26px rgba(12,58,94,.1); }
.bbg-tile-flat { transition: background .18s ease, border-color .18s ease; }
.bbg-tile-flat:hover { background: #fff; border-color: #BEDAF0; }
.bbg-chip { transition: background .18s ease, border-color .18s ease; }
.bbg-chip:hover { border-color: #BEDAF0; background: #fff; }
.bbg-toc-link:hover { color: #0F6FBF; }

/* ---------- service pages (from ServicePage.dc.html helmet) ---------- */
.sp-table { overflow-x: auto; }
@media (max-width: 900px) {
  .sp-hero { grid-template-columns: 1fr !important; }
  .sp-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .sp-signs { grid-template-columns: 1fr !important; }
}

/* ---------- services hub (from ServicesHub.dc.html helmet) ---------- */
@media (max-width: 1080px) { .sh-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .sh-grid { grid-template-columns: 1fr !important; } }

/* ---------- areas hub (from AreasHub.dc.html helmet) ---------- */
@media (max-width: 900px) {
  .ah-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ah-map { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) { .ah-grid { grid-template-columns: 1fr !important; } }

/* ---------- county pages (from CountyPage.dc.html helmet) ---------- */
@media (max-width: 900px) {
  .cp-hero { grid-template-columns: 1fr !important; }
  .cp-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) { .cp-svc { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .cp-svc { grid-template-columns: 1fr !important; } }

/* ---------- city pages (from CityPage.dc.html helmet) ---------- */
@media (max-width: 900px) {
  .ci-hero { grid-template-columns: 1fr !important; }
  .ci-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .ci-svc { grid-template-columns: 1fr 1fr !important; }
  .ci-proof { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) { .ci-svc { grid-template-columns: 1fr !important; } }

/* ---------- guide pages (from GuidePage.dc.html helmet) ---------- */
.gp-body { font-size: 16.5px; line-height: 1.75; color: #33454F; }
.gp-table { overflow-x: auto; }
.gp-sec { scroll-margin-top: 150px; } /* replaces the prototype's scrollTo(-96px) offset */
@media (max-width: 900px) {
  .gp-grid { grid-template-columns: 1fr !important; }
  .gp-toc { position: static !important; }
}
@media (max-width: 640px) { .gp-rel { grid-template-columns: 1fr !important; } }

/* ---------- guides hub (from GuidesHub.dc.html helmet) ---------- */
@media (max-width: 820px) {
  .gh-grid { grid-template-columns: 1fr !important; }
  .gh-blog { grid-template-columns: 1fr !important; }
}

/* ==========================================================
   CONTACT PAGE AND FORM
   ========================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 13.5px; color: #33454F; margin-bottom: 6px;
}
.form-req { color: #C0362C; margin-left: 3px; }
.form-hint { font-size: 12.5px; color: #6B7B87; margin: 0 0 6px; line-height: 1.5; }
.form-control {
  width: 100%; background: #fff; border: 1px solid #CBD8E2; border-radius: 10px;
  padding: 12px 13px; font-family: 'Mulish', sans-serif; font-size: 15px; color: #12232E;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus-visible { outline: 3px solid #5AA6DE; outline-offset: 2px; border-color: #0F6FBF; }
textarea.form-control { resize: vertical; min-height: 130px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7B87' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }

/* invalid state: border, icon-free text message and a bar — never colour alone */
.form-field.is-invalid .form-control { border-color: #C0362C; background: #FBECEA; }
.form-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 12.5px; color: #A32B22; line-height: 1.5; margin: 6px 0 0; font-weight: 600;
}
.form-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #C0362C; color: #fff; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
.form-error[hidden] { display: none; }

.form-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: #5A6A76; line-height: 1.55; font-family: 'Mulish', sans-serif; }
.form-consent input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
.form-consent.is-invalid label span { color: #A32B22; }

/* honeypot: removed from the accessibility tree and off-screen, not display:none
   (some bots skip display:none fields) */
/*
  Honeypot wrapper. Positioned off-screen rather than display:none or
  type="hidden", because a bot that skips hidden inputs will still fill a
  visible-to-the-DOM text field. Real visitors never see or reach it: the
  wrapper is aria-hidden, the input is tabindex="-1", and autocomplete is off so
  a browser cannot fill it and block a genuine submission.
*/
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-submit {
  width: 100%; background: #0F6FBF; color: #fff; border: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px;
  padding: 15px; border-radius: 12px; cursor: pointer; margin-top: 6px;
}
.form-submit[disabled] { opacity: .65; cursor: progress; }

.form-status { margin-top: 18px; border-radius: 12px; padding: 16px 18px; font-size: 14.5px; line-height: 1.6; }
.form-status[hidden] { display: none; }
.form-status.is-success { background: #E7F4EC; border: 1px solid #B7DEC6; color: #1B5E39; }
.form-status.is-error { background: #FBECEA; border: 1px solid #E3B5B0; color: #8E2A22; }

@media (max-width: 980px) {
  .ct-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  #estimate-form { padding: 24px 20px !important; }
}

/* ----- inline estimate form (money pages) -----
   Supporting copy beside the form on desktop; copy first, full-width form
   below on narrow screens. */
@media (max-width: 1000px) {
  .est-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 620px) {
  .est-section { padding: 54px 0 !important; }
  .est-card { padding: 22px 18px !important; }
}

/* ----- city-page local work section -----
   Two columns on desktop and tablet (image left, copy right, top-aligned).
   Below that it stacks content-first: label, H2, paragraphs and buttons come
   before the image, which suits both reading order and local search. */
/* Tablet keeps two columns while there is room for them: the gap tightens and
   the heading steps down rather than the layout collapsing early. */
@media (max-width: 900px) {
  .lw-grid { gap: 28px !important; }
  .lw-copy h2 { font-size: 27px !important; }
}
/* Below that the columns would be too narrow to read, so it stacks
   content-first: label, heading, paragraphs and buttons ahead of the image. */
@media (max-width: 720px) {
  .lw-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .lw-copy { order: 1; }
  .lw-media { order: 2; }
}
@media (max-width: 620px) {
  .lw-copy h2 { font-size: 26px !important; }
}

/* ----- article body: bullet lists and FAQ sub-headings ----- */
.article-body .article-list { margin: 14px 0 0; padding-left: 22px; }
.article-body .article-list li { margin-bottom: 9px; line-height: 1.72; }
.article-body .article-list li strong { color: #0C3A5E; }
.article-body h3 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px;
  color: #0C3A5E; margin: 26px 0 8px; line-height: 1.35;
}

/* ----- AEO direct-answer grid (county and city pages) ----- */
@media (max-width: 820px) {
  .ab-grid { grid-template-columns: 1fr !important; }
}

/* ----- homepage customer testimonials -----
   Three across on desktop. On tablet the row splits two-up and the odd last
   card centres itself under them rather than stretching full width. Stacked
   below that. Cards stretch to equal height from the grid. */
@media (max-width: 1000px) {
  .hp-reviews { grid-template-columns: 1fr 1fr !important; }
  /* justify-self, not auto margins: the cards carry an inline `margin:0`, which
     would outrank a stylesheet margin rule. */
  .hp-reviews > :last-child:nth-child(odd) {
    grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center;
  }
}
@media (max-width: 700px) {
  .hp-reviews { grid-template-columns: 1fr !important; }
  .hp-reviews > :last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
}

/* ==========================================================
   SERVICE AREAS MEGA MENU
   ========================================================== */
/* Every county group lists its cities one per line. The panel body scrolls
   (.bbg-menu-scroll) rather than splitting long lists into internal columns,
   so alignment stays consistent between groups and the panel stays on screen. */
.bbg-menu-drop .bbg-city-link { line-height: 1.35; }
.bbg-menu-drop .bbg-county-link:hover,
.bbg-menu-drop .bbg-menu-link:hover,
.bbg-menu-drop .bbg-city-link:hover { background: #F4F8FC; }
.bbg-menu-drop .bbg-county-toggle:hover { color: #0F6FBF; }
/* The compact dropdown is anchored to its nav item. Near the right edge of a
   narrow desktop window it flips to right-aligned so it cannot run off screen. */
@media (max-width: 1180px) {
  .bbg-menu-drop { left: auto !important; right: 0 !important; }
}
/* very short viewports: scroll inside the panel rather than the whole page */
@media (max-height: 720px) {
  .bbg-menu-scroll { max-height: calc(100vh - 130px); }
}

/* ==========================================================
   BLOG ARTICLE TEMPLATE
   Two-column reading layout with a sticky table of contents on desktop,
   collapsing to a single column with a disclosure TOC on smaller screens.
   ========================================================== */
.article-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}
.article-main { min-width: 0; max-width: 800px; }
.article-aside { position: sticky; top: 138px; }

/* --- body typography: sized for long-form reading --- */
.article-body { font-size: 17px; line-height: 1.78; color: #33454F; }
.article-body p { margin: 0 0 20px; max-width: 70ch; }
.article-section { scroll-margin-top: 150px; }
.article-section h2 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.25;
  color: #0C3A5E; margin: 44px 0 14px; padding-top: 4px;
}
.article-section:first-child h2 { margin-top: 8px; }
.article-section h3 {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3;
  color: #0C3A5E; margin: 28px 0 10px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: #0F6FBF; font-weight: 600; }
.article-body a:hover { color: #0C5C9E; }
.article-note { font-size: 14px; color: #8494A0; margin: 0 0 16px !important; }

/* --- callouts --- */
.article-callout { border-radius: 16px; padding: 24px 26px; margin: 0 0 32px; }
.article-callout-answer { background: #E8F1FA; border: 1px solid #C7DEF2; border-left: 4px solid #0F6FBF; }
.article-body .article-callout { margin: 32px 0; }
.article-quote {
  border-left: 4px solid #0F6FBF; margin: 32px 0; padding: 4px 0 4px 20px;
  font-size: 17px; font-style: italic; line-height: 1.66; color: #33454F;
}

/* --- worked examples --- */
.article-worked { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.article-worked li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0;
  background: #F4F8FC; border: 1px solid #E5EDF3; border-radius: 12px; padding: 16px 20px;
}
.article-worked strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #0C3A5E; }
.article-worked-calc { display: block; font-size: 13px; color: #6B7B87; margin-top: 2px; }
.article-worked-total { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 19px; color: #0F6FBF; white-space: nowrap; }

/* --- responsive table --- */
.article-table-wrap {
  border: 1px solid #E5EDF3; border-radius: 14px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; margin: 0 0 24px;
}
.article-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14.5px; }
.article-table thead tr { background: #0C3A5E; color: #fff; }
.article-table th { text-align: left; padding: 13px 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; }
.article-table tbody th { color: #0C3A5E; background: transparent; }
.article-table td { padding: 12px 16px; color: #3E4E59; }
.article-table tbody tr { border-top: 1px solid #EEF3F7; }
.article-table tbody tr:nth-child(even) { background: #F4F8FC; }

/* --- inline service CTA --- */
.article-inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #F4F8FC; border: 1px solid #C7DEF2; border-radius: 16px; padding: 24px 26px; margin: 36px 0;
}

/* --- author block --- */
.article-author {
  display: flex; gap: 16px; align-items: center;
  background: #F4F8FC; border: 1px solid #E5EDF3; border-radius: 14px; padding: 20px 22px; margin-top: 40px;
}

/* --- table of contents --- */
.article-toc-link {
  display: block; font-size: 13.5px; line-height: 1.5; color: #4A5A66;
  padding: 7px 0 7px 12px; border-left: 2px solid #E5EDF3;
  transition: color .15s ease, border-color .15s ease;
}
.article-toc-link:hover { color: #0F6FBF; border-left-color: #BEDAF0; }
.article-toc-link.is-active { color: #0F6FBF; font-weight: 600; border-left-color: #0F6FBF; }
.bbg-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  /* TOC moves above the article and stops sticking */
  .article-aside { position: static; order: -1; }
  .article-main { max-width: none; }
  .article-toc-toggle { display: inline-flex !important; }
  .article-toc ol[data-disclosure-panel][hidden] { display: none; }
}
@media (min-width: 1081px) {
  /* always open on desktop, where it is a sidebar rather than a disclosure */
  .article-toc ol[data-disclosure-panel] { display: block !important; }
}
@media (max-width: 700px) {
  .article-body { font-size: 16.5px; }
  .article-section h2 { font-size: 23px; margin-top: 36px; }
  .article-inline-cta { flex-direction: column; align-items: flex-start; }
  .article-worked li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .article-author { flex-direction: column; align-items: flex-start; }
  .article-featured { margin-top: -24px; }
}

/* ---------- unified blog ---------- */
@media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .ba-toc { grid-template-columns: 1fr !important; } }

/* ---------- blog index (from BlogIndex.dc.html helmet) ---------- */
.bbg-chip-filter { background: #fff; color: #4A5A66; border: 1px solid #DCE4EA; }
.bbg-chip-filter.is-active { background: #0C3A5E; color: #fff; border-color: #0C3A5E; }
[data-post][hidden], [data-featured-card][hidden] { display: none !important; }
@media (max-width: 900px) { .bi-feat { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) { .bi-grid { grid-template-columns: 1fr !important; } }

/* ---------- blog article (from BlogArticle.dc.html helmet) ---------- */
.ba-body { font-size: 17px; line-height: 1.78; color: #33454F; }
@media (max-width: 640px) { .ba-rel { grid-template-columns: 1fr !important; } }

/* ---------- services hub ----------
   Flex rather than grid so the trailing row of three service cards centres
   instead of hanging to the left of an empty fourth column. */
.sh-card { flex: 0 1 calc(25% - 15px); max-width: calc(25% - 15px); }
@media (max-width: 1080px) { .sh-card { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); } }
@media (max-width: 700px) { .sh-card { flex-basis: 100%; max-width: 100%; } }
@media (max-width: 700px) { .sh-two { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .sh-cond { grid-template-columns: 1fr !important; } }

/* ---------- service money pages ---------- */
.svc-steps { grid-auto-rows: 1fr; }
.svc-step-line { display: block; }
@media (max-width: 1080px) {
  .svc-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-step-line { display: none; }
}
@media (max-width: 640px) { .svc-steps { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) {
  .svc-two { grid-template-columns: 1fr !important; }
  .svc-proof { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .svc-checklist { grid-template-columns: 1fr !important; }
  .svc-two-list { grid-template-columns: 1fr !important; }
  .svc-cond { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  .svc-flow { flex-direction: column; align-items: stretch; }
  .svc-flow li { flex-direction: column; }
  .svc-flow-arrow { transform: rotate(90deg); margin: 4px auto; }
}
@media (max-width: 600px) { .svc-cost-cta { flex-direction: column; align-items: flex-start; } }

/* ---------- geographic pages ---------- */
[data-disclosure-panel][hidden] { display: none !important; }
.bbg-disclosure:hover { color: #0C5C9E; }

/* ---------- about page ---------- */
.ab-county { transition: background .18s ease, border-color .18s ease; }
.ab-county:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 560px) { .ab-svc-list { grid-template-columns: 1fr !important; } }

/* ---------- footer (from Footer.dc.html helmet) ---------- */
.ft a { color: #BFD4E6; text-decoration: none; }
.ft a:hover { color: #fff; }
@media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr !important; } }

/* ----- header logo -----
   Only the rendered height changes by breakpoint; width stays auto so the
   aspect ratio is never touched. Sizes are chosen to sit inside the existing
   78px / 64px header bars, so header height is unchanged at every width. */
@media (max-width: 980px) {
  .bbg-logo-img { height: 46px !important; }
  .bbg-logo-chip { padding: 6px 10px !important; }
}
@media (max-width: 767px) {
  .bbg-logo-img { height: 42px !important; }
  .bbg-logo-chip { padding: 5px 9px !important; }
}
@media (max-width: 380px) {
  .bbg-logo-img { height: 38px !important; }
  .bbg-logo-chip { padding: 5px 8px !important; }
}

/* ----- footer logo -----
   Only the rendered height changes; width stays auto so the aspect ratio is
   never touched. */
@media (max-width: 767px) {
  .ft-logo-img { height: 46px !important; }
}

/* ----- Editorial service-page sections -----
   The alternating image/text layout collapses to a single column on tablet and
   below. The image keeps its own aspect box so it never stretches to match a
   long copy column, and it is ordered above the copy on small screens because
   the photograph explains the section faster than the heading does. */
@media (max-width: 1024px) {
  .ed-hero,
  .ed-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
  .ed-hero .ed-media,
  .ed-grid .ed-media { order: -1; position: static !important; }
  .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Orphan process card. Three steps in two columns leave the third alone on
     row two, hard against the left edge. Span it and cap it at one column so it
     centres under the pair above. Released at 640px, where .ed-steps becomes a
     single full-width column. */
  .ed-steps > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    margin-inline: auto;
  }
}
@media (max-width: 900px) {
  /* the FAQ photo is a tall 3:4 portrait beside the list on desktop; once the
     column stacks it would dominate the screen, so it drops to a wide crop */
  .ed-grid .ed-media { aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 640px) {
  .ed-steps { grid-template-columns: minmax(0, 1fr) !important; }
  /* Single column from here: release the orphan so the last card is full width
     like the rest. */
  .ed-steps > :last-child:nth-child(odd) { width: auto; grid-column: auto; }
}

/* ----- Service Areas county directory -----
   Three equal columns on desktop, two on tablet, one on phones. grid-auto-rows
   is set inline on the element; these rules only change the column count, so
   every card keeps equal width and height at every breakpoint. */
@media (max-width: 1024px) {
  .cty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .cty-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* rows no longer need to match once the grid is a single column, and
     forcing it would leave tall gaps under the shorter cards */
  .cty-grid { grid-auto-rows: auto !important; }
}

/* ----- City page grids -----
   Service cards 3 -> 2 -> 1, problem cards and process steps step down with
   them. Every rule only changes the column count, so card padding, radius and
   type stay identical across breakpoints. */
@media (max-width: 1024px) {
  .csv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cpr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .cp-split { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  .csv-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cpr-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cp-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================
   MOBILE HEADING SCALE
   ==========================================================
   Headings are written with inline font-size by the page components, which
   is why these rules need !important — nothing else can outrank an inline
   style. Desktop and tablet are untouched: this block only applies at 767px
   and below.

   Measured sizes before this change: H1 at 40px (65 pages), 42px (11) and
   47px (1); H2 at 32px (459) and 30px (157). Those are the sizes that read
   as oversized on a 390px screen.

   H3 is deliberately left alone. Its dominant size is 16.5px, which is
   already correct for mobile, and a blanket rule would enlarge 594 headings
   rather than reduce anything.

   Only font-size and line-height change. Font family, weight, color,
   letter-spacing, margins and the heading hierarchy all stay as they are.
   ========================================================== */
@media (max-width: 767px) {
  h1 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em;
  }

  /* #toc-heading is the uppercase "On this page" micro-label on blog
     articles. It happens to be an h2 for document outline reasons and sits
     at 12.5px, so the scale below must not touch it. */
  h2:not(#toc-heading) {
    font-size: 23px !important;
    line-height: 1.26 !important;
  }

  /* The contact hero H1 is constrained to 20ch, which forces an awkward
     column on a narrow screen once the type is smaller. */
  main h1[style*="max-width:20ch"] { max-width: none !important; }

  /* Component rules that previously set their own mobile heading sizes now
     defer to the scale above, so every H2 on the page matches. */
  .lw-copy h2,
  .article-section h2,
  .hp-reviews h2 { font-size: 23px !important; }
}

/* Service-detail split (editorialFeature).
   Desktop places header/media/items by explicit grid coordinates; below 1024 we
   drop to one column and let DOM order take over, which is already the required
   mobile sequence: eyebrow, H2, intro, image, detail items. */
@media (max-width: 1024px) {
  .ed-feat { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  .ed-feat > .ed-feat-head,
  .ed-feat > .ed-feat-media,
  .ed-feat > .ed-feat-items { grid-column: 1 !important; grid-row: auto !important; }
  .ed-feat > .ed-feat-media { align-self: auto !important; }
  .ed-feat .ed-feat-sticky { position: static !important; top: auto !important; }
  .ed-feat > .ed-feat-items { margin-top: 4px !important; }
  .ed-feat-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
}

/* Dual CTA row (src/components/dual-cta.js).
   Desktop keeps the two pills side by side and aligned to the text column.
   Below 640 they stack full-width, quote first, with an accessible tap height. */
.bbg-btn-dark:hover { background: #12557F !important; color: #fff; }
@media (max-width: 640px) {
  .bbg-dual-cta { flex-direction: column; gap: 14px !important; align-items: stretch !important; }
  .bbg-dual-cta > a { width: 100%; min-height: 50px; padding-left: 18px !important; padding-right: 18px !important; }
}

/* Homepage responsive. The services grid and the hero H1 were sized for desktop
   and stayed that way on tablets, so three cards were competing for 720px and
   the H1 held its full 42px. */
@media (max-width: 1024px) {
  .hp .hp-2col > div h1 { font-size: 34px !important; }
}
@media (max-width: 640px) {
  .hp .hp-2col > div h1 { font-size: 29px !important; }
}

/* Editorial hero H1 across service, county and city pages. The earlier rule was
   scoped to .hp and so left the county heroes at their full desktop size on
   tablets. */
@media (max-width: 1024px) {
  .cty .hp-2col h1, .sp .hp-2col h1 { font-size: 33px !important; }
}
@media (max-width: 640px) {
  .cty .hp-2col h1, .sp .hp-2col h1 { font-size: 28px !important; }
}

/*
  Media boxes own their own height.

  Every card image sits in a box that declares an aspect-ratio, but the cards
  are column flex containers, so each media box is a flex item whose
  min-height:auto resolves to its content's intrinsic height. The image's
  height:100% could not resolve against a parent sized only by aspect-ratio, so
  it fell back to the file's natural height and pushed the box past the declared
  ratio. A 4:3 source therefore rendered ~46px taller than a 16:9 source in the
  same grid, and the image bottoms in a row did not line up.

  min-height:0 lets the declared ratio decide the height. The image then fills
  that box and crops with object-fit:cover rather than stretching, so nothing is
  distorted and no source's natural dimensions leak into the layout.
*/
.bbg-media {
  min-height: 0;
  overflow: hidden;
}
.bbg-media > * {
  width: 100%;
  height: 100%;
}
.bbg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Request-a-quote media column.

  The column used to hold a single fixed-ratio image beside a much taller form
  card, leaving a large empty block underneath it. The logo block now sits on
  top at a fixed ratio and the photograph takes whatever height is left, so the
  media column and the form finish at the same point.
*/
.est-media {
  display: flex;
  height: 100%;
}
/* One image, filling the column. It takes the form card's radius so the two
   columns read as a pair, and crops with object-fit:cover via .bbg-media. */
.est-photo {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(12, 58, 94, .05);
}
.est-photo img { border-radius: 20px; }

/*
  Breakpoint matches .est-layout's collapse to one column exactly. When these
  two disagreed, the media column kept its stretch behaviour inside a
  single-column layout for a 100px band and rendered a huge slab.
*/
@media (max-width: 1000px) {
  .est-media { height: auto; }
  .est-photo { flex: 0 0 auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/*
  Service grid: natural grid flow.

  An incomplete final row starts at the left, which is simply what CSS Grid does
  on its own. This grid was briefly flex-centered so a leftover card sat in the
  middle; that was reversed on instruction — the seventh card belongs in column
  one, not the centre.

  So there is deliberately no centering here: no justify-content, no
  justify-items, no margin-inline:auto on the last child, no nth-child
  positioning, no placeholder items. Every card keeps one column's width, so the
  leftover card is exactly as wide as the others and never stretches.

  This applies to the service grids only. The three-step process cards, the
  informational card groups and the two-card residential/commercial layouts keep
  their own intentional centering, which lives elsewhere in this file.
*/
.hp-svc {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) {
  .hp-svc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .hp-svc { grid-template-columns: minmax(0, 1fr) !important; }
}