/* ============================================================
   HEADER TOP FIXES  (works WITH the native nicepage header)
   1. "Celebrating 40 Years" text reduced ~50% (all breakpoints)
   2. On MOBILE only: stack logo UNDER the 40-year badge so they
      don't crowd/overlap. Desktop keeps the native layout intact.
   3. Hamburger = three clean white lines (never a solid block).
   Loaded LAST so it wins over earlier header CSS.
   ============================================================ */

/* ── 1. HALVE THE "CELEBRATING 40 YEARS" TEXT ─────────────────
   Native sizes: 0.875rem (desktop), 0.75rem (≤991px).
   Halved below. Positioning (margins) left untouched so the
   desktop layout stays exactly where nicepage places it.        */
.u-header .u-text-1 {
  font-size: 0.616rem !important;     /* desktop: enlarged 40% (0.44 -> 0.616) */
}
@media (max-width: 991px) {
  .u-header .u-text-1 {
    font-size: 0.38rem !important;   /* was 0.75rem */
  }
}

/* (Mobile logo/badge ordering is handled in section 4 below.) */

/* ── 3. HAMBURGER — clean three lines, fully clickable ────────
   Just the three-line icon (no button box, no label, no hover
   highlight). Kept fully tappable so the menu opens on click.     */

/* The clickable trigger link — transparent, no box, no hover fill */
.u-header .u-hamburger-link-1,
.u-header .u-hamburger-link-1:hover,
.u-header .u-hamburger-link.u-nav-link,
.u-header .u-hamburger-link-1.u-nav-link,
.u-header .u-hamburger-link-1.u-nav-link:hover,
.u-header .u-hamburger-link-1.u-nav-link.u-active,
.u-header .u-hamburger-link-1.u-nav-link.active,
.u-header .u-hamburger-link-1.u-nav-link.ge-active-menu-page,
.u-nav-container .u-hamburger-link-1.u-nav-link.u-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
/* The three-line icon, white */
.u-header .u-hamburger-link-1 svg,
.u-header .u-hamburger-link-1 .u-svg-link {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  pointer-events: none !important;       /* clicks pass to the link */
}
.u-header .u-hamburger-link-1 svg rect,
.u-header .u-hamburger-link-1 .u-svg-content rect,
.u-header .u-hamburger-link-1 .u-svg-link use {
  fill: #ffffff !important;              /* white bars */
  stroke: none !important;
}
/* Ensure the trigger and its container can receive taps */
.u-header .menu-collapse,
.u-header .u-menu-1 .menu-collapse {
  pointer-events: auto !important;
  z-index: 50 !important;
  cursor: pointer !important;
}

/* ── 4. MOBILE (VERTICAL) HEADER ORDER ───────────────────────
   MOBILE ONLY (≤991px). Desktop layout is left completely alone.
   Stack the header content vertically, centered, in this order:
     1) Social icons (Facebook, YouTube, Google)
     2) "Celebrating 40 Years" text
     3) CALL TODAY button
     4) 40-year badge
     5) Logo (under the badge)
   The hamburger menu stays pinned top-right, out of the way.     */
@media (max-width: 991px) {
  #header.u-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px 0 !important;
    position: relative !important;
    overflow-x: clip !important;
  }
  /* Nav stays in flow (so its offcanvas popup can slide out full-screen);
     only the small hamburger TRIGGER is pinned top-right. */
  #header .u-menu-1 {
    order: 0 !important;
    position: static !important;   /* do NOT constrain the offcanvas panel */
    width: auto !important;
    margin: 0 !important;
    z-index: 40 !important;
  }
  /* Pin just the hamburger button (the collapsed trigger) top-right */
  #header .u-menu-1 .menu-collapse {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    margin: 0 !important;
    z-index: 41 !important;
  }
  /* 1) Social icons centered first */
  #header .u-social-icons-1 {
    order: 1 !important;
    position: static !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 6px auto 10px !important;
    width: 100% !important;
    left: auto !important; right: auto !important; top: auto !important;
  }
  /* 2) "Celebrating 40 Years" text — one line on mobile */
  #header .u-text-1 {
    order: 2 !important;
    position: static !important;
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px auto 10px !important;
    padding: 0 12px !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    left: auto !important; right: auto !important; top: auto !important;
  }
  /* 3) CALL TODAY button */
  #header .u-btn-1 {
    order: 3 !important;
    position: static !important;
    float: none !important;
    display: inline-block !important;
    margin: 0 auto 12px !important;
    left: auto !important; right: auto !important; top: auto !important;
  }
  /* 4) 40-year badge — hidden; it now lives on the hero slider */
  #header .u-image-2 {
    display: none !important;
  }
  /* 5) Logo, under the badge — FULL WIDTH edge-to-edge.
     The header has side padding; the negative margins below let the
     logo escape it so the yellow reaches the far LEFT edge and the
     white side reaches the far RIGHT edge of the screen.            */
  #header .u-image-1 {
    order: 5 !important;
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 6px 0 0 !important;            /* no side margins */
    margin-left: -12px !important;          /* cancel header left padding */
    margin-right: -12px !important;         /* cancel header right padding */
    object-fit: contain !important;         /* keep aspect ratio, no distortion */
    object-position: center !important;
    left: auto !important; right: auto !important; top: auto !important;
  }
}
@media (max-width: 480px) {
  /* keep logo full-bleed on small phones; cancel the tighter padding */
  #header .u-image-1 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
}

/* ── 5. MOBILE: HIDE REDUNDANT BOTTOM CALL BAR ───────────────
   The fixed full-width yellow ".call-bar" at the bottom duplicates
   the floating click-to-call button (which shows the same number),
   so hide the bar on mobile. Desktop is unchanged.               */
@media (max-width: 991px) {
  .call-bar {
    display: none !important;
  }
}

/* ── 6. "$99/Month" ON ITS OWN LINE (mobile only) ────────────
   The price break only appears on mobile; desktop keeps the
   heading on one line as before.                                */
.price-mobile-br { display: none; }
@media (max-width: 991px) {
  .price-mobile-br { display: block; }
}

/* ── 7. KILL EXCESS EMPTY SPACE ON SERVICE PAGES (mobile/tablet) ──
   The remodeling/ADU service pages set a very tall fixed min-height
   on the left gallery cell/group (sized for desktop). On phones and
   tablets this leaves a big blank gap below the content. Let these
   containers size to their actual content instead.                  */
@media (max-width: 991px) {
  body:not(.ge-contact-page) .u-section-2 .u-layout-cell-1,
  body:not(.ge-contact-page) .u-section-2 .u-group-1,
  body:not(.ge-contact-page) .u-section-2 .u-sheet-1 {
    min-height: 0 !important;
    height: auto !important;
  }
  /* keep the gallery itself a sensible height so it's still visible */
  body:not(.ge-contact-page) .u-section-2 .u-gallery-1 {
    min-height: 0 !important;
    height: auto !important;
    /* The gallery has a fixed 592px/678px width that overflows phone
       screens and gets clipped. Clamp it to the viewport so the whole
       gallery is visible on mobile (ADU/Mold/Kitchen/Bathroom pages). */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body:not(.ge-contact-page) .u-section-2 .u-gallery-inner-1,
  body:not(.ge-contact-page) .u-section-2 .u-carousel,
  body:not(.ge-contact-page) .u-section-2 .u-carousel-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
  body:not(.ge-contact-page) .u-section-2 .u-carousel-item img,
  body:not(.ge-contact-page) .u-section-2 .u-gallery-item img {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 575px) {
  body:not(.ge-contact-page) .u-section-2 .u-layout-cell-1,
  body:not(.ge-contact-page) .u-section-2 .u-group-1,
  body:not(.ge-contact-page) .u-section-2 .u-sheet-1 {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ── 8. FINANCING IMAGE + CIRCLE IMAGES (ALL breakpoints) ─────
   (a) "We offer financing / $99/M NEW ROOF" image (Financing.png,
       u-image-10) was given fixed heights + expanded width, cropping
       it on the right/bottom. Force full image, correct aspect ratio,
       on every screen size — desktop, tablet, and phone.
   (b) The two round images must be centered and the same size
       everywhere.                                                   */

/* (a) Financing banner image — never crop, keep whole image visible.
   Target by SRC (not class number) so it covers every page: Mold uses
   u-image-9, ADU/Kitchen/Bathroom/city use u-image-10. Width-based,
   object-fit:contain, auto height → whole banner shows, consistent
   across all breakpoints and all pages.                                */
img[src*="Financing.png"],
.u-image-10.u-expanded-width,
.u-image.u-image-10 {
  height: auto !important;
  max-width: 100% !important;
  width: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* (b) Both circle images: same size + centered, all breakpoints */
.u-image-circle {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
  width: 340px !important;
  height: 340px !important;
  max-width: 90vw !important;
  max-height: 90vw !important;
  object-fit: cover !important;
}
@media (max-width: 991px) {
  .u-image-circle {
    width: 300px !important;
    height: 300px !important;
  }
  /* let the financing image's container size to content (no big gap) */
  img[src*="Financing.png"],
  .u-image-10.u-expanded-width,
  .u-image.u-image-10 { height: auto !important; object-fit: contain !important; max-height: none !important; }
}
@media (max-width: 575px) {
  .u-image-circle {
    width: 240px !important;
    height: 240px !important;
  }
}

/* ── 9. STOP HORIZONTAL OVERFLOW / IMAGE CUTOFF (mobile/tablet) ──
   The financing image's container (body:not(.ge-contact-page) .u-section-2 .u-group-1) was set
   to a fixed 1128px width with a big negative right margin, pushing
   content off-screen and cropping the "$99/M NEW ROOF" image. Clamp
   it to the viewport so the whole image shows.                       */
@media (max-width: 991px) {
  body:not(.ge-contact-page) .u-section-2 .u-group-1 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body:not(.ge-contact-page) .u-section-2 .u-sheet-1,
  body:not(.ge-contact-page) .u-section-2 .u-layout-cell-1,
  body:not(.ge-contact-page) .u-section-2 .u-layout-cell-2 {
    min-height: 0 !important;
    height: auto !important;
  }
  /* prevent any sideways scroll from the section */
  body:not(.ge-contact-page) .u-section-2 { overflow-x: clip !important; }
}
@media (max-width: 575px) {
  body:not(.ge-contact-page) .u-section-2 .u-group-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }
}

/* ── 2. YELLOW ACCENT LINE UNDER THE HEADER/LOGO (every page) ──
   A thin yellow line directly under the header bar, on ALL pages.
   Half the previous height (was 6px → now 3px).
   On DESKTOP this is overridden further down to sit at the bottom of
   the logo/nav row specifically, not the whole (now 2-row) header.   */
#header.u-header,
header#header,
header.u-header,
.u-header.u-sticky {
  border-bottom: 3px solid #f2b705 !important;
}

/* ── 12. TESTIMONIALS VIDEO BOX — yellow border (not blue) ─────
   Force the border around each testimonial / video box to the brand
   yellow (#f2b705) instead of blue. High-specificity selectors so
   it overrides the theme's custom-color border.                    */
#header ~ * .u-video.u-border-custom-color-1,
.u-section-5 .u-video,
.u-section-5 .u-video.u-border-custom-color-1,
.u-section-5 .u-border-custom-color-1.u-video,
.u-video.u-border-custom-color-1,
.u-video.u-border-10,
.u-border-custom-color-1.u-video,
div.u-video {
  border-color: #f2b705 !important;
  border-style: solid !important;
}
/* Testimonial cards (Testimonials.html) that use the same blue border */
.u-testimonial.u-border-custom-color-1,
.u-testimonial-card.u-border-custom-color-1,
.u-border-custom-color-1.u-testimonial {
  border-color: #f2b705 !important;
}

/* ── 13. NAV STRETCH + YELLOW HOVER — spaced menu, rollover ────
   Spread the menu items evenly across the bar with comfortable
   spacing, and give each item a yellow (#f2b705) rollover highlight
   on hover with dark text. Blog sits at the end before the social
   icons. Desktop only.                                              */
@media (min-width: 992px) {
  #header .u-menu-1 .u-nav-container,
  #header .u-menu-1 .u-custom-menu {
    width: 100% !important;
  }
  #header .u-menu-1 .u-nav.u-unstyled {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2px !important;
  }
  #header .u-menu-1 .u-nav.u-unstyled > .u-nav-item {
    flex: 0 1 auto !important;
  }
  #header .u-menu-1 .u-nav.u-unstyled > .u-nav-item > .u-nav-link {
    padding: 8px 11px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  /* Yellow rollover highlight over each menu item */
  #header .u-menu-1 .u-nav.u-unstyled > .u-nav-item > .u-nav-link:hover,
  #header .u-menu-1 .u-nav.u-unstyled > .u-nav-item > .u-nav-link:focus,
  #header .u-menu-1 .u-nav.u-unstyled > .u-nav-item:hover > .u-nav-link {
    background-color: #f2b705 !important;
    color: #062453 !important;
  }
}

/* ── 13c. DROPDOWN STAYS VERTICAL — submenus list down, not across ── */
@media (min-width: 992px) {
  /* The dropdown popup's ul also has .u-nav.u-unstyled; force it vertical */
  #header .u-menu-1 .u-nav-popup .u-nav.u-unstyled {
    display: block !important;
    width: auto !important;
  }
  #header .u-menu-1 .u-nav-popup .u-nav.u-unstyled > .u-nav-item {
    display: block !important;
    width: 100% !important;
  }
  #header .u-menu-1 .u-nav-popup .u-nav.u-unstyled > .u-nav-item > .u-nav-link {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
}

/* ── 13d. SUBMENU LEFT-ALIGN (desktop dropdown) ─────────────── */
@media (min-width: 992px) {
  #header .u-menu-1 .u-nav-popup .u-nav.u-unstyled {
    text-align: left !important;
  }
  #header .u-menu-1 .u-nav-popup .u-nav-item {
    text-align: left !important;
    width: 100% !important;
  }
  #header .u-menu-1 .u-nav-popup .u-nav-link {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ── 14. SIDEBAR FORM — yellow border on every field (always shown) ──────
   The Get-In-Touch / contact form fields show a yellow outline at all times. */
#phone-ea48,
#name-5485,
#street-1ab3,
#message-5485 {
  border: 2px solid #f2b705 !important;
  border-radius: 8px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#phone-ea48:focus,
#name-5485:focus,
#street-1ab3:focus,
#message-5485:focus {
  border: 2px solid #ffc61a !important;
  box-shadow: 0 0 0 3px rgba(242,183,5,.25) !important;
  outline: none !important;
}

/* ── 15. ROOF TOOL — center 'Select Roof Type' boxes on mobile ──
   Many stacked rules left the roof-type cards off-center on phones.
   This final rule (loaded last) centers the grid and cards cleanly. */
#stepRoofType .roof-type-grid {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-items: center !important;
  justify-content: center !important;
}
#stepRoofType .roof-type-card {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
@media (max-width: 800px) {
  #stepRoofType.roof-type-section {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #stepRoofType .roof-type-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #stepRoofType .roof-type-card {
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  #stepRoofType .roof-type-grid {
    grid-template-columns: 1fr !important;
    max-width: 340px !important;
  }
  #stepRoofType .roof-type-card {
    max-width: 340px !important;
  }
}

/* ── 16. ROOF TYPE CARDS — even yellow border, centered label ──
   Each card: clean photo on top, label below, an EVEN yellow border
   all the way around, everything centered. Consistent desktop+mobile. */
#stepRoofType .roof-type-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto !important;
  justify-items: center !important;
  justify-content: center !important;
}
#stepRoofType .roof-type-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 4px solid #f2b705 !important;   /* even yellow border all around */
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
}
#stepRoofType .roof-type-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 750 / 468 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  background: #f2b705 !important;
}
#stepRoofType .roof-type-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 12px 10px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background: #f2b705 !important;
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  font-size: clamp(1rem, 1.7vw, 1.35rem) !important;
  border: 0 !important;
  border-top: 3px solid #f2b705 !important;
}
#stepRoofType .roof-type-card.selected {
  outline: 4px solid #062453 !important;
  outline-offset: 2px !important;
}
@media (max-width: 900px) {
  #stepRoofType .roof-type-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; max-width: 560px !important; }
}
@media (max-width: 520px) {
  #stepRoofType .roof-type-grid { grid-template-columns: 1fr !important; max-width: 340px !important; gap: 16px !important; }
  #stepRoofType .roof-type-label { font-size: 1.25rem !important; }
}

/* ── 17. MOBILE HAMBURGER MENU (clean vertical + accordion) ────
   JS (hamburger-menu-fix.js) toggles .ge-menu-open on the nav.
   Shows a vertical white-text menu in a dark slide-out panel with
   accordion dropdowns (SERVICES / REMODELING), like most websites.  */

/* overlay behind the panel — MUST be below the panel's z-index (2147483000)
   so the menu links stay tappable; otherwise it covers them and swallows taps */
#ge-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2147481000; pointer-events: none !important; }

@media (max-width: 991px) {
  /* hamburger trigger always tappable */
  .u-menu-1 .u-hamburger-link-1, .u-menu-1 .menu-collapse {
    pointer-events: auto !important; cursor: pointer !important; z-index: 60 !important;
  }

  /* THE PANEL — slide-out dark box */
  nav.ge-menu-open .u-nav-container-collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
    width: 86% !important; max-width: 340px !important;
    height: 100% !important; min-height: 100vh !important;
    z-index: 2147483000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    margin: 0 !important; padding: 0 !important;
      pointer-events: auto !important;
      background: #062453 !important;
  }
  /* inner wrappers solid dark, full height */
  nav.ge-menu-open .u-nav-container-collapse .u-sidenav,
  nav.ge-menu-open .u-nav-container-collapse .u-inner-container-layout,
  nav.ge-menu-open .u-nav-container-collapse > div {
    background: #062453 !important;
    opacity: 1 !important;
    height: auto !important; min-height: 100vh !important;
    width: 100% !important; display: block !important;
    padding: 0 !important; margin: 0 !important;
  }

  /* THE MENU LIST — vertical */
  nav.ge-menu-open .u-nav-container-collapse .u-nav,
  nav.ge-menu-open .u-nav-container-collapse .u-nav-4 {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 64px 0 30px !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    position: relative !important;
  }

  /* MENU LINKS — white text, full width */
  nav.ge-menu-open .u-nav-container-collapse .u-nav-link,
  nav.ge-menu-open .u-nav-container-collapse a.u-nav-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    display: block !important;
    width: 100% !important;
    padding: 15px 44px 15px 22px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    background: transparent !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-link:hover {
    color: #f2b705 !important; -webkit-text-fill-color: #f2b705 !important;
    background: rgba(255,255,255,.05) !important;
  }

  /* DROPDOWN PARENTS — caret indicator */
  nav.ge-menu-open .u-nav-container-collapse .u-nav-link.ge-has-dropdown::after {
    content: "\25B8" !important;            /* ▸ */
    position: absolute !important; right: 20px !important; top: 15px !important;
    color: #f2b705 !important; -webkit-text-fill-color: #f2b705 !important;
    font-size: 1rem !important; transition: transform .18s ease !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-link.ge-has-dropdown::after {
    transform: rotate(90deg) !important;
  }

  /* SUBMENU (dropdown) — collapsed by default, vertical when open */
  nav.ge-menu-open .u-nav-container-collapse .u-nav-popup {
    display: none !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    transform: none !important;
    left: auto !important; top: auto !important;
    background: rgba(0,0,0,.25) !important;
    padding: 0 !important; margin: 0 !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup {
    display: block !important;
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    max-height: 2000px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* the inner UL and each item: full width, stacked, no float/absolute */
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup > ul,
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup .u-nav-popup-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    left: auto !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup .u-nav-item {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: block !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup .u-nav-link,
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item.ge-sub-open > .u-nav-popup a {
    visibility: visible !important;
    opacity: 1 !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-popup .u-nav-item {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-popup .u-nav-link {
    padding-left: 38px !important;
    font-size: .98rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #e8eef6 !important; -webkit-text-fill-color: #e8eef6 !important;
  }

  /* CLOSE (X) button */
  nav.ge-menu-open .u-menu-close {
    display: block !important;
    position: absolute !important; top: 18px !important; right: 18px !important;
    width: 28px !important; height: 28px !important; z-index: 5 !important;
    pointer-events: auto !important; cursor: pointer !important;
  }
  nav.ge-menu-open .u-menu-close::before,
  nav.ge-menu-open .u-menu-close::after {
    content: "" !important; position: absolute !important; top: 13px !important; left: 1px !important;
    width: 26px !important; height: 2px !important; background: #fff !important;
  }
  nav.ge-menu-open .u-menu-close::before { transform: rotate(45deg) !important; }
  nav.ge-menu-open .u-menu-close::after { transform: rotate(-45deg) !important; }
}

/* ── 22. MOBILE/TABLET — remove huge empty gaps before sections ──
   Some content sections had fixed/large min-heights that left big
   white gaps on phones & tablets (e.g. before the Get In Touch box
   and the lower text section). Let these sections size to content.  */
@media (max-width: 991px) {
  body:not(.ge-contact-page) .u-section-2, .u-section-3, .u-section-9, .u-section-11 {
    min-height: 0 !important;
    height: auto !important;
  }
  body:not(.ge-contact-page) .u-section-2 > .u-container-layout,
  .u-section-3 > .u-container-layout,
  .u-section-11 > .u-container-layout {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
@media (max-width: 767px) {
  .u-section-1, body:not(.ge-contact-page) .u-section-2, .u-section-3,
  .u-section-4, .u-section-5, .u-section-6,
  .u-section-7, .u-section-8, .u-section-9, .u-section-11 {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ── 17b. HAMBURGER LINKS ABOVE FADE LAYER (clickable) ────────
   The panel has a .u-opacity / fade inner layer; ensure the menu
   list and links sit above it and receive taps.                    */
@media (max-width: 991px) {
  /* the fade/opacity inner layer must not block taps */
  nav.ge-menu-open .u-nav-container-collapse .u-opacity,
  nav.ge-menu-open .u-nav-container-collapse .u-container-style {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  /* the menu UL + items lifted above any inner layer */
  nav.ge-menu-open .u-nav-container-collapse .u-nav,
  nav.ge-menu-open .u-nav-container-collapse .u-nav-4,
  nav.ge-menu-open .u-nav-container-collapse .u-sidenav-overflow {
    position: relative !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-item {
    position: relative !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
  }
  nav.ge-menu-open .u-nav-container-collapse .u-nav-link,
  nav.ge-menu-open .u-nav-container-collapse a.u-nav-link {
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  /* close button above everything too */
  nav.ge-menu-open .u-menu-close {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
}

/* ── 23. SERVICES GALLERY — show all photos on mobile ─────────
   The services-page gallery (u-repeater-1, in section 2/3/4 depending
   on page) collapsed to a 1-wide horizontal scroll on phones and
   appeared hidden. Force a visible wrapping grid so all gallery
   photos show on mobile, across every services page.                */

/* ── Mobile: stack the "Safety and Service" cards cell + insurance image cell
   full-width instead of squished side-by-side (they lacked u-size-xs-60) ── */
@media (max-width: 767px) {
  .u-layout-cell.u-size-34,
  .u-layout-cell.u-size-26 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── Sidebar images: center ALL of them on mobile (insurance circle, family
   circle, instant-quote) at a consistent width, with even spacing between ── */
.ge-clipboard-sidebar,
.ge-family-circle-sidebar,
.ge-instant-quote-sidebar {
  display: block !important;
  width: 340px !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 26px !important;   /* spacing between the images */
}
/* Instant Quote (60 SEC) banner matches the Financing ($99/M) banner width:
   full container width instead of a fixed 340px cap. The link wrapper must also
   go full-width or it caps the image at 340px. */
.ge-instant-quote-sidebar,
img[src*="Instant-Quote"],
.ge-instant-quote-sidebar-link,
a:has(> img[src*="Instant-Quote"]) {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
/* make sure their container centers content on mobile */
@media (max-width: 767px) {
  .ge-clipboard-sidebar,
  .ge-family-circle-sidebar,
  .ge-instant-quote-sidebar {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}

/* ── Safety: never let any image or the expanded-width banners overflow the
   screen on mobile (prevents right-edge cut-off anywhere) ── */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
@media (max-width: 991px) {
  .u-image, .u-expanded-width-xs, img {
    max-width: 100% !important;
    height: auto;
  }
  /* expanded-width banners: keep them within the viewport */
  .u-expanded-width-xs {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Financing ($99/M) banner (u-image-5 on index): never crop + nudge up 10px ── */
.u-image-5,
.u-image.u-image-5,
.u-expanded-width-xs.u-image-5 {
  height: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  margin-top: -10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Mobile: make the "Get In Touch" contact form full-width so fields stack
   on top of each other instead of squished into a narrow column ── */
@media (max-width: 767px) {
  .u-form, .u-form-1, .u-form.u-form-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .u-form form, .u-form .u-form-vertical, .u-form .u-inner-form {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .u-form .u-form-group {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .u-form .u-form-group input,
  .u-form .u-form-group textarea,
  .u-form .u-form-group select,
  .u-form .u-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Mobile: the contact form's flex parent was shrinking the form to content
   width (~120px). Force the form to fill the full cell width. ── */
@media (max-width: 767px) {
  /* target the container that holds the form and make its child (the form) stretch */
  .u-container-layout > .u-form,
  .u-container-layout > .u-expanded-width-xs.u-form,
  .u-form.u-form-1 {
    flex: 0 0 auto !important;   /* fill width but do NOT grow to the tall parent height */
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* if the form's parent is a flex row, let items stretch full width */
  .u-container-layout:has(> .u-form) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ── Yellow outline on each contact / sidebar form field ── */
.u-form .u-form-group input,
.u-form .u-form-group textarea,
.u-form .u-form-group select,
.u-form .u-input,
.u-form input[type="text"],
.u-form input[type="tel"],
.u-form input[type="email"],
.u-form textarea {
  border: 2px solid #f2b705 !important;
  border-radius: 8px !important;
  outline: none !important;
}
.u-form .u-form-group input:focus,
.u-form .u-form-group textarea:focus,
.u-form .u-input:focus,
.u-form textarea:focus {
  border-color: #ffc61a !important;
  box-shadow: 0 0 0 2px rgba(242,183,5,.25) !important;
}

/* ── Yellow outline: override u-border-none on form inputs (higher specificity) ── */
.u-form .u-input.u-border-none,
.u-form input.u-border-none,
.u-form textarea.u-border-none,
.u-form .u-form-group .u-input,
.u-form .u-form-group input.u-input-rectangle,
.u-form .u-form-group textarea.u-input-rectangle {
  border: 2px solid #f2b705 !important;
  border-radius: 8px !important;
}
.u-form .u-input.u-border-none:focus,
.u-form input.u-border-none:focus,
.u-form textarea.u-border-none:focus {
  border: 2px solid #ffc61a !important;
  box-shadow: 0 0 0 2px rgba(242,183,5,.25) !important;
}

/* ── Financing banner: beat the .u-section-3 .u-image-5 fixed-height rules that
   crop it on About. Force auto height so the whole $99/M image shows. ── */
.u-section-3 .u-image-5,
.u-section-3 .u-image.u-image-5,
.u-section-3 img.u-image-5,
body:not(.ge-contact-page) .u-section-2 .u-image-5,
.u-section-11 .u-image-5,
section .u-image-5 {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* ── Financing banner: override the fixed heights INSIDE each breakpoint so the
   media-scoped Nicepage rule can't win. Full image shows on every phone size. ── */
@media (max-width: 767px) {
  .u-section-3 .u-image-5,
  body:not(.ge-contact-page) .u-section-2 .u-image-5,
  .u-section-11 .u-image-5 { height: auto !important; max-height: none !important; object-fit: contain !important; }
}
@media (max-width: 575px) {
  .u-section-3 .u-image-5,
  body:not(.ge-contact-page) .u-section-2 .u-image-5,
  .u-section-11 .u-image-5 { height: auto !important; max-height: none !important; object-fit: contain !important; }
}
@media (max-width: 991px) {
  .u-section-3 .u-image-5,
  body:not(.ge-contact-page) .u-section-2 .u-image-5,
  .u-section-11 .u-image-5 { height: auto !important; max-height: none !important; object-fit: contain !important; }
}

/* ── Financing banner on About (u-expanded-width variant): force full natural
   aspect ratio so the whole $99/M image shows, not squished to 121px ── */
img.u-image-5[src*="Financing"],
.u-expanded-width.u-image-5,
img.u-expanded-width.u-image-5 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 568 / 496 !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Financing banner: it's a flex-item in a column container which mis-sizes
   its height. Take it out of flex sizing and set height from width explicitly. ── */
img.u-image-5[src*="Financing"],
.u-expanded-width.u-image-5 {
  flex: 0 0 auto !important;
  align-self: center !important;
  aspect-ratio: auto !important;
  height: auto !important;
}
/* belt: fix the calculated height using the known 568:496 ratio at 366px wide */
@media (max-width: 991px) {
  img.u-image-5[src*="Financing"],
  .u-expanded-width.u-image-5 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
}

/* ── Financing banner: universal fix for ALL pages/sections. The image mis-sizes
   as a flex item; force it to size from width with natural ratio everywhere. ── */
img[src*="Financing"] {
  flex: 0 0 auto !important;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 991px) {
  img[src*="Financing"] {
    height: auto !important; max-height: none !important; aspect-ratio: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ── 4 roof buttons (MOBILE ONLY): icon on the LEFT, text right of it,
   left-aligned, and a bit taller. Desktop layout stays untouched. ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link .u-container-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 18px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .ge-sidebar-roof-link .u-icon,
  .ge-sidebar-roof-link .u-file-icon {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 14px !important;
    float: none !important;
    flex: 0 0 auto !important;
  }
  .ge-sidebar-roof-link .u-text {
    position: static !important;
    text-align: left !important;
    margin-left: 0 !important;
    flex: 1 1 auto !important;
  }
  /* spacing between the 4 buttons block and the next element (insurance image) */
  .ge-sidebar-roof-link:last-of-type {
    margin-bottom: 28px !important;
  }
}

/* ── Contact form: more space between each field line ── */
.u-form .u-form-group {
  margin-bottom: 16px !important;
}
.u-form .u-form-group:last-child {
  margin-bottom: 0 !important;
}


/* ── "Get In Touch" form: show the form.png striped panel on mobile as the
   BACKGROUND of the form (fields sit on top), matching the desktop look.
   The decorative <img> stays hidden; we use it as a CSS background instead. ── */
@media (max-width: 991px) {
  .u-form.u-form-1,
  .u-section-3 .u-form,
  body:not(.ge-contact-page) .u-section-2 .u-form,
  section .u-form.u-form-1 {
    background-image: url('images/form.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding: 26px 18px !important;
    border-radius: 10px !important;
  }
}

/* ── 4 roof buttons (mobile): force ALL icons to identical size + centering so
   Roof Coating's icon matches the other three exactly ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link .u-icon,
  .ge-sidebar-roof-link .u-file-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ge-sidebar-roof-link .u-icon img,
  .ge-sidebar-roof-link .u-file-icon img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ── About page section-3: the round images (LocalRoofing u-border-9 and the
   BOOK NOW u-image-round) overlap the text on mobile via negative margins.
   Neutralize so everything stacks cleanly under each other with spacing. ── */
@media (max-width: 991px) {
  .u-section-3 .u-border-9,
  .u-section-3 .u-image-round,
  .u-section-3 .u-image-6 {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    float: none !important;
    margin: 20px auto !important;
    transform: none !important;
    display: block !important;
  }
  /* the text that was overlapped — give it normal flow spacing */
  .u-section-3 .u-text-4,
  .u-section-3 .u-text-5 {
    position: relative !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
}

/* ── About form: remove the ~350px of empty space below the Submit button on
   mobile. The form had a tall reserved height from desktop; size to content. ── */
@media (max-width: 991px) {
  .u-section-3 .u-form,
  .u-section-3 .u-form-1 {
    height: auto !important;
    min-height: 0 !important;
  }
  /* the tall cell that reserves extra height on mobile — let it fit content */
  .u-section-3 .u-layout-cell,
  .u-section-3 .u-container-layout {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ── Roof buttons on About: ROOF COATING text wraps taller and overflowed the
   top of its fixed-height button. Let buttons grow to fit their text so the
   text stays centered and contained like the rest. ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link,
  .ge-sidebar-roof-link .u-list-item,
  .ge-sidebar-roof-link .u-container-style {
    height: auto !important;
    min-height: 90px !important;
  }
  .ge-sidebar-roof-link .u-container-layout {
    height: auto !important;
    min-height: 90px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .ge-sidebar-roof-link .u-text {
    align-self: center !important;
  }
}

/* ── Roof Coating button text has a -59px top margin (Nicepage) pushing it up
   out of the button. Reset it so it centers like the other 3 buttons. ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link .u-text,
  .ge-sidebar-roof-link .u-text-5,
  .ge-sidebar-roof-link .u-text-6,
  .ge-sidebar-roof-link .u-text-7,
  .ge-sidebar-roof-link .u-text-8 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ── 4 roof buttons (mobile): ensure text is truly vertically centered and never
   clipped at the top of the navy box (fixes Roof Coating sitting too high) ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link .u-container-layout {
    align-items: center !important;
    min-height: 92px !important;
  }
  .ge-sidebar-roof-link .u-text {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.15 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .ge-sidebar-roof-link .u-icon,
  .ge-sidebar-roof-link .u-file-icon {
    align-self: center !important;
  }
}

/* ── 4 roof buttons: nudge text to sit dead-center (counter the slight upward
   offset) and add top padding so text never clips at the top of the box ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link .u-container-layout {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    align-items: center !important;
  }
  .ge-sidebar-roof-link .u-text {
    position: relative !important;
    top: 3px !important;
  }
}

/* ── The striped form.png is now applied as the FORM's background (fields sit on
   it). Hide the standalone u-image-4 copy so it doesn't create a big empty
   striped box above the form. ── */
@media (max-width: 991px) {
  .u-section-3 .u-image-4,
  body:not(.ge-contact-page) .u-section-2 .u-image-4,
  section .u-image-4 {
    display: none !important;
  }
}

/* ── Tablet (up to 1199px): apply the same form fixes so 1024px iPads etc. don't
   show the empty striped box and get the form background + no big gap ── */
@media (max-width: 1199px) {
  /* hide the standalone striped image (form has form.png as its own bg) */
  .u-section-3 .u-image-4,
  body:not(.ge-contact-page) .u-section-2 .u-image-4,
  section .u-image-4 {
    display: none !important;
  }
  /* form.png as the form's background */
  .u-form.u-form-1,
  .u-section-3 .u-form,
  body:not(.ge-contact-page) .u-section-2 .u-form,
  section .u-form.u-form-1 {
    background-image: url('images/form.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding: 26px 18px !important;
    border-radius: 10px !important;
  }
  /* form sizes to content, no stretch to the tall column, no big gap */
  .u-section-3 .u-form,
  .u-section-3 .u-form-1 {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }
}

/* ── 4 roof buttons: force identical font size on all (Roof Coating was smaller)
   + yellow roll-over (hover) on the whole button ── */
.ge-sidebar-roof-link .u-text,
.ge-sidebar-roof-link .u-text-5,
.ge-sidebar-roof-link .u-text-6,
.ge-sidebar-roof-link .u-text-7,
.ge-sidebar-roof-link .u-text-8 {
  font-size: 22px !important;
  line-height: 1.2 !important;
}
/* roll over the navy button to yellow, text + icon to navy */
.ge-sidebar-roof-link .u-list-item,
.ge-sidebar-roof-link .u-container-style {
  transition: background-color .2s ease, color .2s ease !important;
}
.ge-sidebar-roof-link:hover .u-list-item,
.ge-sidebar-roof-link:hover .u-container-style {
  background-color: #f2b705 !important;
  /* keep the same rounded-right-only shape as the blue button */
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.ge-sidebar-roof-link:hover .u-text {
  color: #062453 !important;
}

/* ── "Get In Touch!" area: keep the HEADING (h4) large, only shrink the
   description paragraph underneath it ── */
.u-section-3 h4.ge-contact-blue,
.u-section-3 h4.u-text-4.ge-contact-blue {
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}
.u-section-3 p.ge-contact-blue,
.u-section-3 p.u-text-5.ge-contact-blue {
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* ── "Get In Touch!" — put the heading + description + form all together INSIDE
   one striped box (form.png). Apply the background to the parent container that
   holds all three, and remove it from the form alone. All pages, up to 1199px. ── */
@media (max-width: 1199px) {
  /* the striped box now wraps heading + description + form */
  .u-section-3 .u-container-layout-3,
  .u-section-3 .u-layout-cell-2 > .u-container-layout,
  body:not(.ge-contact-page) .u-section-2 .u-container-layout:has(> .u-form) {
    background-image: url('images/form.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding: 24px 18px !important;
    border-radius: 10px !important;
  }
  /* remove the background from the form itself (parent now carries it) */
  .u-form.u-form-1,
  .u-section-3 .u-form,
  body:not(.ge-contact-page) .u-section-2 .u-form,
  section .u-form.u-form-1 {
    background-image: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  /* heading + description sit on the striped box, above the fields */
  .u-section-3 h4.ge-contact-blue,
  .u-section-3 p.ge-contact-blue {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ── 4 roof buttons: taller blue buttons. LAST word on height. ── */
@media (max-width: 991px) {
  .ge-sidebar-roof-link,
  .ge-sidebar-roof-link .u-list-item,
  .ge-sidebar-roof-link .u-container-style {
    min-height: 350px !important;
    height: auto !important;
  }
  .ge-sidebar-roof-link .u-container-layout {
    padding-top: 138px !important;
    padding-bottom: 138px !important;
    min-height: 350px !important;
    height: auto !important;
  }
}
/* ── Financing ($99/M) banner: match the blue buttons' width at ALL sizes.
   On tablet the buttons go full-width, so the banner must too (not capped). ── */
@media (max-width: 991px) {
  img[src*="Financing"],
  .u-image-5,
  .u-image.u-image-5 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }
}

/* ── Get In Touch box: heading + description + form ALL inside one striped box
   (like before). Applies on EVERY page that has the form, regardless of which
   section/container number holds it. Stripe capped so it ends before the
   roof buttons below. ── */
@media (max-width: 1199px) {
  .u-section-3 .u-container-layout-3,
  .u-section-3 .u-layout-cell-2 > .u-container-layout,
  body:not(.ge-contact-page) .u-section-2 .u-container-layout:has(> .u-form),
  .u-section-3 .u-container-layout:has(> .u-form),
  section .u-container-layout:has(> .u-form.u-form-1) {
    background-image: url('images/form.png') !important;
    background-size: 100% 722px !important;   /* covers heading+desc+form+submit, ends before roof buttons */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding: 44px 18px 26px 18px !important;   /* top pad pushes heading+desc BELOW the yellow bar */
    border-radius: 10px !important;
  }
  /* form itself carries no separate stripe (container has it) */
  .u-form.u-form-1,
  .u-section-3 .u-form.u-form-1,
  body:not(.ge-contact-page) .u-section-2 .u-form.u-form-1 {
    background-image: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  /* Make container-2 pages (index/contact) match About's container-3 sidebar
     exactly: same 722px stripe (was 632px). */
  body:not(.ge-contact-page) .u-section-2 .u-container-layout-2:has(> .u-form),
  .u-section-3 .u-container-layout-2:has(> .u-form),
  section .u-container-layout-2:has(> .u-form.u-form-1) {
    background-size: 100% 722px !important;
  }
  /* container-3 pages (About/service like Shingle) also have buttons inside;
     cap the stripe so it ends before the first roof button on short pages */
  .u-section-3 .u-container-layout-3.u-container-layout:has(> .u-form),
  .u-section-3 .u-container-layout-3:has(> .u-form),
  section .u-section-3 .u-container-layout-3 {
    background-size: 100% 722px !important;
  }
  /* heading + description sit ON the striped box (every page) */
  h4.ge-contact-blue,
  .u-section-3 h4.ge-contact-blue,
  body:not(.ge-contact-page) .u-section-2 h4.ge-contact-blue {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 4px !important;
  }
  p.ge-contact-blue,
  .u-section-3 p.ge-contact-blue,
  body:not(.ge-contact-page) .u-section-2 p.ge-contact-blue {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 14px !important;
  }
}

/* ── "Safety and Service, Always our Priority" heading: keep it large (revert to
   the larger size) on mobile/tablet ── */
@media (max-width: 991px) {
  section[id="block-19"] h3,
  section[id="block-19"] .u-text-1,
  .ge-safety-banner .u-text-1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
}

/* ── "Safety and Service, Always our Priority": match the HOME page size on
   desktop too (home is 36px; some pages were only 20px) ── */
@media (min-width: 992px) {
  section[id="block-19"] h3,
  section[id="block-19"] .u-text-1,
  .ge-safety-banner .u-text-1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
}

/* ── 4 roof button icons: turn navy/blue on hover to match the text (icons are
   yellow PNGs, so recolor them to navy with a CSS filter on hover) ── */
.ge-sidebar-roof-link .u-icon img,
.ge-sidebar-roof-link .u-file-icon img {
  transition: filter .2s ease !important;
}
.ge-sidebar-roof-link:hover .u-icon img,
.ge-sidebar-roof-link:hover .u-file-icon img {
  /* recolor yellow icon -> navy #062453 */
  filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(3200%) hue-rotate(200deg) brightness(95%) contrast(105%) !important;   /* navy #062453 to match site color, not pure black */
}

/* ── Instant Quote "60 SEC QUOTE" banner: make it as wide as the $99/M banner
   / blue buttons (full width), not capped at 340px. High specificity to beat
   the base 340px rule. ── */
@media (max-width: 991px) {
  img.ge-instant-quote-sidebar,
  img.u-image.ge-instant-quote-sidebar,
  img[src*="Instant-Quote"],
  img[src*="Quote-Sidebar"],
  body:not(.ge-contact-page) .u-section-2 .ge-instant-quote-sidebar,
  .u-section-3 .ge-instant-quote-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    height: auto !important;
  }
}

/* ── Instant Quote banner: the image is wrapped in an <a> link that's capped at
   340px. Make the link full-width so the banner matches the $99/M width. ── */
@media (max-width: 991px) {
  a:has(> .ge-instant-quote-sidebar),
  a:has(> img[src*="Instant-Quote"]) {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── Ensure the 4 roof buttons and the Instant Quote banner always sit IN FRONT
   (never behind a background/decorative element) and stay clickable ── */
.ge-sidebar-roof-link,
.ge-sidebar-roof-link .u-list-item,
.ge-sidebar-roof-link .u-container-style,
a:has(> .ge-instant-quote-sidebar),
.ge-instant-quote-sidebar {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

/* ── Roof tool timeline step: show the choice cards 2-per-row (2x2 grid) on
   MOBILE and TABLET only (desktop keeps the horizontal row) ── */
@media (max-width: 991px) {
  .ge-timeline-row.ge-timeline-cards,
  #projectTimelineRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .ge-timeline-row.ge-timeline-cards .ge-ticker-btn,
  #projectTimelineRow .ge-ticker-btn,
  .ge-timeline-row .ge-timeline-card {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── Get In Touch: force the DESCRIPTION (the <p>, whatever u-text-N it uses) to
   be small on every page. On HOME/CITY it shares u-text-4 with the heading, so
   without this it wrongly renders large. Heading is an <h4>, description a <p>. ── */
@media (max-width: 1199px) {
  p.ge-contact-blue,
  p.u-text-4.ge-contact-blue,
  p.u-text-5.ge-contact-blue,
  body:not(.ge-contact-page) .u-section-2 p.ge-contact-blue,
  .u-section-3 p.ge-contact-blue,
  .u-section-3 p.u-text-4.ge-contact-blue,
  body:not(.ge-contact-page) .u-section-2 p.u-text-4.ge-contact-blue {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }
  /* keep the heading (h4) large */
  h4.ge-contact-blue,
  h4.u-text-4.ge-contact-blue {
    font-size: 40px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }
}

/* ── FIX: the striped form box must never bleed onto the roof buttons. The roof
   buttons (u-list) sit BELOW the form; give the whole roof-buttons list a solid
   opaque backdrop and raise it above the stripe so the form.png bottom edge
   (white + rounded corner + border) can't show over the SHINGLE button. ── */
@media (max-width: 1199px) {
  .u-section-3 .u-list,
  body:not(.ge-contact-page) .u-section-2 .u-list,
  section .u-list:has(.ge-sidebar-roof-link) {
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
    margin-top: 14px !important;
  }
  /* each roof button navy box is fully opaque and above the stripe */
  .ge-sidebar-roof-link,
  .ge-sidebar-roof-link .u-list-item,
  .ge-sidebar-roof-link .u-container-style {
    position: relative !important;
    z-index: 3 !important;
  }
  .ge-sidebar-roof-link .u-list-item,
  .ge-sidebar-roof-link .u-container-style {
    background-color: #062453 !important;
  }
}

/* ── Roof buttons list sits above the stripe (no backdrop color — the navy
   buttons themselves cover the area; a white backdrop was hiding text) ── */
@media (max-width: 1199px) {
  .u-section-3 .u-list:has(.ge-sidebar-roof-link),
  body:not(.ge-contact-page) .u-section-2 .u-list:has(.ge-sidebar-roof-link),
  section .u-list:has(.ge-sidebar-roof-link) {
    background-color: transparent !important;
    position: relative !important;
    z-index: 3 !important;
  }
}

/* ── SERVICES dropdown: force it to open LEFT-aligned (left edge under the
   Services item), never to the right or centered ── */
@media (min-width: 992px) {
  #header .u-nav-container .u-nav-item > .u-nav-popup,
  #header .u-menu-1 .u-nav-item > .u-nav-popup,
  #header .u-nav-popup-1 {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
  }
  /* the inner popup content also left-anchored */
  #header .u-nav-popup .u-nav-popup-content {
    left: 0 !important;
    right: auto !important;
  }
}

/* ── All sidebar BANNER images (Financing/$99, Instant Quote, Insurance Claim,
   Family Circle, Banner) sized LARGE to match the form/text box width, aligned
   to the same left/right edges — no small left/right-floated banners ── */
@media (max-width: 991px) {
  .u-image-5,
  img[src*="Financing"],
  img[src*="Instant-Quote"],
  .ge-instant-quote-sidebar,
  img[src*="InsuranceClaim"],
  .ge-clipboard-sidebar,
  img[src*="Family-Circle"],
  .ge-family-circle-sidebar,
  img[src*="Banner.png"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    float: none !important;
  }
  /* the link wrappers around these banners also go full width so the image fills */
  a:has(> .ge-instant-quote-sidebar),
  a:has(> img[src*="Instant-Quote"]),
  a:has(> img[src*="Financing"]),
  a:has(> img[src*="InsuranceClaim"]),
  a:has(> img[src*="Family-Circle"]),
  a:has(> img[src*="Banner.png"]) {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
  }
}



/* ── The navy "ROOF REPAIR" infographic banner (Roofing.png / ge-free-roof-drop)
   that sits above the form: make it CENTERED and match the text-box width below
   it, on mobile AND desktop. This banner image differs per page but always uses
   the same class. Never crop or cut it off — full image always visible. ── */
img[src*="Roofing.png"]:not(.u-image-circle),
.ge-free-roof-drop {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
/* the banner's parent containers must not clip the image on any side */
.ge-free-roof-drop,
*:has(> .ge-free-roof-drop),
*:has(> img[src*="Roofing.png"]:not(.u-image-circle)) {
  overflow: visible !important;
  max-width: 100% !important;
}

/* ── Circle images (team/company photos in About/section-7) must FILL the
   circular frame — object-fit: cover, never contain (which leaves a gap). This
   overrides any banner rule that matched them by src substring. ── */
.u-image-circle,
img.u-image-circle[src*="Roofing"],
img.u-image-circle[src*="LocalRoofing"] {
  object-fit: cover !important;
}

/* ── Section-7 "Safety and Service" circle (RoofingComany) is covered by the
   yellow box in the NEXT section (section-8). Reserve enough bottom space in
   section-7 so the full circle clears before section-8's yellow box starts. ── */
@media (max-width: 991px) {
  .u-section-7 .u-image-circle,
  .u-section-7 img[src*="RoofingComany"] {
    position: relative !important;
    z-index: 2 !important;
  }
  /* the circle's cell reserves its full height + clearance so nothing overlaps */
  .u-section-7 {
    padding-bottom: 260px !important;
  }
  /* section-8 yellow box starts cleanly below, small gap */
  .u-section-8 {
    margin-top: 20px !important;
  }
}

/* ── Roof Tune-Up (BOOKNOW) banner: same HALF size on EVERY page (index, About,
   ADU, Kitchen, Bathroom, Mold, Remodeling, Contact, Privacy...). Keeps aspect
   ratio (not stretched/cropped). Width 50% halves both dimensions. Centered. ── */
img[src*="BOOKNOW"],
img.u-expanded-width[src*="BOOKNOW"],
.u-section-5 .u-image-1 {
  width: 100% !important;
  max-width: 570px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
.u-section-5 .u-container-layout,
a:has(> img[src*="BOOKNOW"]) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: center !important;
}

/* ── Circle images (RoofingComany, LocalRoofing, any u-image-circle): the photo
   must FILL the entire circle (clipped round, no white corner gaps), on every
   page and breakpoint. ── */
img.u-image-circle,
.u-image-circle,
img[src*="RoofingComany"],
img[src*="LocalRoofing"] {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLEAN REBUILT ROOF BUTTONS (ge-rbtn) — replaces the old repeater buttons.
   Navy card, yellow icon, white text, rounded-right corners, yellow roll-over.
   ══════════════════════════════════════════════════════════════════════════ */
.ge-roofbtns-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.ge-rbtn {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 350px !important;
  padding: 0 34px !important;
  background: #062453 !important;
  border-radius: 0 26px 26px 0 !important;   /* rounded right edges */
  text-decoration: none !important;
  transition: background-color .18s ease !important;
  cursor: pointer !important;
}
.ge-rbtn .ge-rbtn-icon img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  display: block !important;
}
.ge-rbtn .ge-rbtn-text,
.ge-roofbtns-v2 .ge-rbtn .ge-rbtn-text,
a.ge-rbtn span.ge-rbtn-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: .3px !important;
}
/* yellow roll-over: card turns yellow, text navy, icon darkened */
.ge-rbtn:hover {
  background: #f2b705 !important;
}
.ge-rbtn:hover .ge-rbtn-text {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}
.ge-rbtn:hover .ge-rbtn-icon img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(3200%) hue-rotate(200deg) brightness(95%) contrast(105%) !important;   /* navy #062453 to match site color, not pure black */
}
@media (min-width: 992px) {
  .ge-rbtn { min-height: 150px !important; }
}
/* mobile only: half the button height (was 350px → 175px) */
@media (max-width: 991px) {
  .ge-rbtn { min-height: 175px !important; }
}

/* ── Space out the roof buttons (ends with ROOF COATING) from the $99/M
   Financing banner below them so they don't touch/overlap ── */
.ge-roofbtns-v2 {
  margin-bottom: 40px !important;
}
.u-image-5,
.u-image.u-image-5 {
  margin-top: 30px !important;
}

/* ── Roof tool timeline card icons (Immediately, 1-3 Months, 3-6 Months) were
   turning white (invisible on white cards) because a global svg{fill:#fff} rule
   overrode their yellow attribute fill. Force the yellow back. ── */
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg path,
span.ge-timeline-icon svg,
span.ge-timeline-icon svg path {
  fill: #f2b705 !important;
}
/* no navy box behind the icons — show just the yellow icon on the white card */
.ge-timeline-icon,
.ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
span.ge-timeline-icon svg {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Just Researching uses a stroked magnifier — keep its stroke yellow, no fill */
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg path,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg circle,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg line {
  fill: none !important;
  stroke: #f2b705 !important;
}

/* ── Roof tool: give the "Please choose a timeline" hint and the Continue button
   breathing room so they don't touch the card's yellow border ── */
.ge-timeline-step-hint {
  margin: 16px 20px 8px !important;
  padding: 0 4px !important;
}
/* the nav row holding Back + Continue: keep both off the card's yellow border */
.ge-step-nav {
  padding: 8px 24px !important;
  margin-bottom: 24px !important;
  gap: 14px !important;
}
.ge-step-continue,
#continueToAddress,
.ge-step-back {
  margin: 0 !important;
}
/* ensure the step body/card reserves bottom room so the nav clears the border */
.ge-timeline-step-body,
.ge-step-body,
[class*="ge-step"][class*="body"] {
  padding-bottom: 28px !important;
}
/* make sure the timeline step body itself has inner padding from the border */
.ge-timeline-step-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

/* ── Safety yellow box (ge-safety-banner / section-8): half the height on MOBILE
   only. Reduce the tall min-heights and padding so the box is more compact. ── */
@media (max-width: 991px) {
  #block-19.ge-safety-banner,
  #block-19 .u-container-style,
  #block-19 .u-layout-cell,
  #block-19 [class*="u-size-"],
  #block-19 .u-container-layout,
  .ge-safety-banner .u-container-style,
  .ge-safety-banner .u-layout-cell,
  .u-section-8 .u-container-style,
  .u-section-8 .u-layout-cell,
  .u-section-8 .u-size-34,
  .u-section-8 [class*="u-size-"] {
    min-height: 0 !important;
    height: auto !important;
  }
  .ge-safety-banner .u-container-layout,
  .u-section-8 .u-container-layout {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .ge-safety-banner,
  .u-section-8 {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    /* Drop the yellow box clearly BELOW the family/circle photo above it so the
       circle (truck + couple) isn't cut off by the yellow banner on mobile. */
    margin-top: 48px !important;
    clear: both !important;
  }
  /* Give the circle photo above the banner room to render in full. */
  .ge-family-white-circle-section .u-image-circle,
  .ge-family-white-circle-section img.u-image-circle {
    margin-bottom: 28px !important;
  }
  /* shrink the heading text + tighten its spacing so the box is ~half height */
  .ge-safety-banner .u-text-1,
  .u-section-8 .u-text-1,
  .ge-safety-banner h2,
  .ge-safety-banner h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
  }
  /* remove extra vertical whitespace inside the yellow cell */
  .ge-safety-banner .u-container-layout,
  .u-section-8 .u-container-layout {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* ── Footer: align all content to the RIGHT (was left) ── */
#footer,
footer.u-footer,
#footer .u-text,
#footer p,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer a,
#footer .u-container-layout,
#footer .u-layout-cell,
#footer li,
#footer ul {
  text-align: right !important;
}
/* keep list bullets/menus from shoving content back left */
#footer ul,
#footer li {
  list-style-position: inside !important;
  padding-left: 0 !important;
}

/* ── Desktop SERVICES / REMODELING SERVICES dropdown: force items LEFT-aligned
   (they were rendering centered inside the popup panel) ── */
.u-nav-popup,
.u-nav-popup ul,
.u-nav-popup li,
.u-nav-popup .u-nav-item,
.u-nav-popup .u-nav-link,
.u-nav-popup a {
  text-align: left !important;
  justify-content: flex-start !important;
}
.u-nav-popup a,
.u-nav-popup .u-nav-link {
  display: block !important;
  width: 100% !important;
}
.u-nav-popup ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style-position: outside !important;
}
/* kill the 21px left indent + 9px top gap on the SERVICES popup so it matches
   REMODELING SERVICES exactly (no space between button and first link) */
.u-nav-popup,
.u-nav-popup-1,
div.u-nav-popup {
  padding: 0 !important;
  background-color: #062453 !important;
}
.u-nav-popup .u-h-spacing-21,
.u-nav-popup ul.u-h-spacing-21,
.u-nav-popup li,
.u-nav-popup .u-nav-item {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ── Header underline consistency: on Contact/About/Testimonials/service/city
   pages the page-title section adds a thick 14px yellow border-top directly
   under the header, making the line look much thicker than on index (which
   shows only the header's own 3px line). Remove that extra top border so every
   page has the same thin line. ── */
.u-header + section.u-border-14,
header + section.u-border-14,
.u-header + section[class*="u-border-"],
header + section[class*="u-border-"] {
  border-top: 0 !important;
}

/* ── All navigation links in CAPS (top nav + dropdown items + mobile menu) ── */
.u-nav .u-nav-link,
.u-nav a,
.u-nav-item a,
.u-nav-popup a,
.u-nav-popup .u-nav-link,
nav .u-nav-link,
.u-header .u-nav-link,
.u-menu .u-nav-link {
  text-transform: uppercase !important;
}

/* ── FINANCING BANNER: $99/M CUT OFF AT THE BOTTOM (all pages) ────────
   Root cause: Nicepage sets a FIXED height on the image per page, e.g.
   `.u-section-3 .u-image-5 { height:320px; width:404px }`. Financing.png
   is 568x496 (ratio 0.8732), so at 404px wide the correct height is
   ~353px — the 320px box chopped ~33px off the bottom, cutting the "$99".
   The section number differs per page (u-section-2 / -3 / -9 ...), so we
   target the image itself and lock its true aspect ratio. Loaded last =
   beats the Nicepage rules. Width-based scaling only, never cropped.   */
img[src*="Financing"],
img[src*="Financing"].u-image,
img.u-image-5[src*="Financing"],
img.u-image.u-image-5[src*="Financing"],
img.u-expanded-width-xs[src*="Financing"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 568 / 496 !important;
  object-fit: contain !important;
  max-width: 100% !important;
  display: block !important;
}

/* ── ROOF ESTIMATE TOOL — FINAL FORM ("A Few Quick Details" / "Finish Your
   Estimate"): white-on-white text. The <label>s and fields in .estimate-fields
   sit on a white .estimate-submit background but never get an explicit color,
   so they inherit white (and -webkit-text-fill-color silently wins over
   `color`). Pin both properties to navy on a light field background.        */
.estimate-submit .estimate-fields label,
.estimate-submit .estimate-fields > label,
#stepDetails label,
#stepDetails .estimate-fields label {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-weight: 800 !important;
}

.estimate-submit .estimate-fields input,
.estimate-submit .estimate-fields textarea,
.estimate-submit .estimate-fields select,
#stepDetails input[type="text"],
#stepDetails input[type="number"],
#stepDetails input[type="tel"],
#stepDetails textarea,
#stepDetails select,
#roofSqft,
#roofNotes {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
  opacity: 1 !important;
}

/* placeholders must be visible too (grey, not white) */
#stepDetails input::placeholder,
#stepDetails textarea::placeholder,
#roofSqft::placeholder,
#roofNotes::placeholder {
  color: #5a6472 !important;
  -webkit-text-fill-color: #5a6472 !important;
  opacity: 1 !important;
}

/* the Yes/No radio labels in the same step */
#stepDetails .choice-row label {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  background: #ffffff !important;
}

/* ── "Get A Instant Quote / Within 60 Sec" button: two centered lines ──
   The <br/> splits it; Nicepage's .u-btn is a flex/inline-block that can
   letter-center the first line only, so force block centering + a sane
   line-height and let the height grow to fit both lines.                */
a.u-btn-1[href*="Roof-Estimate-Tool"],
.u-btn.u-btn-1[href*="Roof-Estimate-Tool"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  white-space: normal !important;
}

/* ── Roof Tune-Up (BOOKNOW) banner: same HALF size on EVERY page (index, About,
   ADU, Kitchen, Bathroom, Mold, Remodeling, Contact, Privacy...). Keeps aspect
   ratio (not stretched/cropped). Width 50% halves both dimensions. Centered. ── */
img[src*="BOOKNOW"],
img.u-expanded-width[src*="BOOKNOW"],
.u-section-5 .u-image-1 {
  width: 100% !important;
  max-width: 570px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
.u-section-5 .u-container-layout,
a:has(> img[src*="BOOKNOW"]) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: center !important;
}

/* ── Circle images (RoofingComany, LocalRoofing, any u-image-circle): the photo
   must FILL the entire circle (clipped round, no white corner gaps), on every
   page and breakpoint. ── */
img.u-image-circle,
.u-image-circle,
img[src*="RoofingComany"],
img[src*="LocalRoofing"] {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLEAN REBUILT ROOF BUTTONS (ge-rbtn) — replaces the old repeater buttons.
   Navy card, yellow icon, white text, rounded-right corners, yellow roll-over.
   ══════════════════════════════════════════════════════════════════════════ */
.ge-roofbtns-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.ge-rbtn {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 350px !important;
  padding: 0 34px !important;
  background: #062453 !important;
  border-radius: 0 26px 26px 0 !important;   /* rounded right edges */
  text-decoration: none !important;
  transition: background-color .18s ease !important;
  cursor: pointer !important;
}
.ge-rbtn .ge-rbtn-icon img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  display: block !important;
}
.ge-rbtn .ge-rbtn-text,
.ge-roofbtns-v2 .ge-rbtn .ge-rbtn-text,
a.ge-rbtn span.ge-rbtn-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: .3px !important;
}
/* yellow roll-over: card turns yellow, text navy, icon darkened */
.ge-rbtn:hover {
  background: #f2b705 !important;
}
.ge-rbtn:hover .ge-rbtn-text {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}
.ge-rbtn:hover .ge-rbtn-icon img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(3200%) hue-rotate(200deg) brightness(95%) contrast(105%) !important;   /* navy #062453 to match site color, not pure black */
}
@media (min-width: 992px) {
  .ge-rbtn { min-height: 150px !important; }
}
/* mobile only: half the button height (was 350px → 175px) */
@media (max-width: 991px) {
  .ge-rbtn { min-height: 175px !important; }
}

/* ── Space out the roof buttons (ends with ROOF COATING) from the $99/M
   Financing banner below them so they don't touch/overlap ── */
.ge-roofbtns-v2 {
  margin-bottom: 40px !important;
}
.u-image-5,
.u-image.u-image-5 {
  margin-top: 30px !important;
}

/* ── Roof tool timeline card icons (Immediately, 1-3 Months, 3-6 Months) were
   turning white (invisible on white cards) because a global svg{fill:#fff} rule
   overrode their yellow attribute fill. Force the yellow back. ── */
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg path,
span.ge-timeline-icon svg,
span.ge-timeline-icon svg path {
  fill: #f2b705 !important;
}
/* no navy box behind the icons — show just the yellow icon on the white card */
.ge-timeline-icon,
.ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
span.ge-timeline-icon svg {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Just Researching uses a stroked magnifier — keep its stroke yellow, no fill */
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg path,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg circle,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg line {
  fill: none !important;
  stroke: #f2b705 !important;
}

/* ── Roof tool: give the "Please choose a timeline" hint and the Continue button
   breathing room so they don't touch the card's yellow border ── */
.ge-timeline-step-hint {
  margin: 16px 20px 8px !important;
  padding: 0 4px !important;
}
/* the nav row holding Back + Continue: keep both off the card's yellow border */
.ge-step-nav {
  padding: 8px 24px !important;
  margin-bottom: 24px !important;
  gap: 14px !important;
}
.ge-step-continue,
#continueToAddress,
.ge-step-back {
  margin: 0 !important;
}
/* ensure the step body/card reserves bottom room so the nav clears the border */
.ge-timeline-step-body,
.ge-step-body,
[class*="ge-step"][class*="body"] {
  padding-bottom: 28px !important;
}
/* make sure the timeline step body itself has inner padding from the border */
.ge-timeline-step-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

/* ── Safety yellow box (ge-safety-banner / section-8): half the height on MOBILE
   only. Reduce the tall min-heights and padding so the box is more compact. ── */
@media (max-width: 991px) {
  #block-19.ge-safety-banner,
  #block-19 .u-container-style,
  #block-19 .u-layout-cell,
  #block-19 [class*="u-size-"],
  #block-19 .u-container-layout,
  .ge-safety-banner .u-container-style,
  .ge-safety-banner .u-layout-cell,
  .u-section-8 .u-container-style,
  .u-section-8 .u-layout-cell,
  .u-section-8 .u-size-34,
  .u-section-8 [class*="u-size-"] {
    min-height: 0 !important;
    height: auto !important;
  }
  .ge-safety-banner .u-container-layout,
  .u-section-8 .u-container-layout {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .ge-safety-banner,
  .u-section-8 {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    /* Drop the yellow box clearly BELOW the family/circle photo above it so the
       circle (truck + couple) isn't cut off by the yellow banner on mobile. */
    margin-top: 48px !important;
    clear: both !important;
  }
  /* Give the circle photo above the banner room to render in full. */
  .ge-family-white-circle-section .u-image-circle,
  .ge-family-white-circle-section img.u-image-circle {
    margin-bottom: 28px !important;
  }
  /* shrink the heading text + tighten its spacing so the box is ~half height */
  .ge-safety-banner .u-text-1,
  .u-section-8 .u-text-1,
  .ge-safety-banner h2,
  .ge-safety-banner h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
  }
  /* remove extra vertical whitespace inside the yellow cell */
  .ge-safety-banner .u-container-layout,
  .u-section-8 .u-container-layout {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* ── Footer: align all content to the RIGHT (was left) ── */
#footer,
footer.u-footer,
#footer .u-text,
#footer p,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer a,
#footer .u-container-layout,
#footer .u-layout-cell,
#footer li,
#footer ul {
  text-align: right !important;
}
/* keep list bullets/menus from shoving content back left */
#footer ul,
#footer li {
  list-style-position: inside !important;
  padding-left: 0 !important;
}

/* ── Desktop SERVICES / REMODELING SERVICES dropdown: force items LEFT-aligned
   (they were rendering centered inside the popup panel) ── */
.u-nav-popup,
.u-nav-popup ul,
.u-nav-popup li,
.u-nav-popup .u-nav-item,
.u-nav-popup .u-nav-link,
.u-nav-popup a {
  text-align: left !important;
  justify-content: flex-start !important;
}
.u-nav-popup a,
.u-nav-popup .u-nav-link {
  display: block !important;
  width: 100% !important;
}
.u-nav-popup ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style-position: outside !important;
}
/* kill the 21px left indent + 9px top gap on the SERVICES popup so it matches
   REMODELING SERVICES exactly (no space between button and first link) */
.u-nav-popup,
.u-nav-popup-1,
div.u-nav-popup {
  padding: 0 !important;
  background-color: #062453 !important;
}
.u-nav-popup .u-h-spacing-21,
.u-nav-popup ul.u-h-spacing-21,
.u-nav-popup li,
.u-nav-popup .u-nav-item {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ── Header underline consistency: on Contact/About/Testimonials/service/city
   pages the page-title section adds a thick 14px yellow border-top directly
   under the header, making the line look much thicker than on index (which
   shows only the header's own 3px line). Remove that extra top border so every
   page has the same thin line. ── */
.u-header + section.u-border-14,
header + section.u-border-14,
.u-header + section[class*="u-border-"],
header + section[class*="u-border-"] {
  border-top: 0 !important;
}

/* ── All navigation links in CAPS (top nav + dropdown items + mobile menu) ── */
.u-nav .u-nav-link,
.u-nav a,
.u-nav-item a,
.u-nav-popup a,
.u-nav-popup .u-nav-link,
nav .u-nav-link,
.u-header .u-nav-link,
.u-menu .u-nav-link {
  text-transform: uppercase !important;
}

/* ── FINANCING BANNER: $99/M CUT OFF AT THE BOTTOM (all pages) ────────
   Root cause: Nicepage sets a FIXED height on the image per page, e.g.
   `.u-section-3 .u-image-5 { height:320px; width:404px }`. Financing.png
   is 568x496 (ratio 0.8732), so at 404px wide the correct height is
   ~353px — the 320px box chopped ~33px off the bottom, cutting the "$99".
   The section number differs per page (u-section-2 / -3 / -9 ...), so we
   target the image itself and lock its true aspect ratio. Loaded last =
   beats the Nicepage rules. Width-based scaling only, never cropped.   */
img[src*="Financing"],
img[src*="Financing"].u-image,
img.u-image-5[src*="Financing"],
img.u-image.u-image-5[src*="Financing"],
img.u-expanded-width-xs[src*="Financing"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 568 / 496 !important;
  object-fit: contain !important;
  max-width: 100% !important;
  display: block !important;
}

/* ── ROOF ESTIMATE TOOL — FINAL FORM ("A Few Quick Details" / "Finish Your
   Estimate"): white-on-white text. The <label>s and fields in .estimate-fields
   sit on a white .estimate-submit background but never get an explicit color,
   so they inherit white (and -webkit-text-fill-color silently wins over
   `color`). Pin both properties to navy on a light field background.        */
.estimate-submit .estimate-fields label,
.estimate-submit .estimate-fields > label,
#stepDetails label,
#stepDetails .estimate-fields label {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-weight: 800 !important;
}

.estimate-submit .estimate-fields input,
.estimate-submit .estimate-fields textarea,
.estimate-submit .estimate-fields select,
#stepDetails input[type="text"],
#stepDetails input[type="number"],
#stepDetails input[type="tel"],
#stepDetails textarea,
#stepDetails select,
#roofSqft,
#roofNotes {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
  opacity: 1 !important;
}

/* placeholders must be visible too (grey, not white) */
#stepDetails input::placeholder,
#stepDetails textarea::placeholder,
#roofSqft::placeholder,
#roofNotes::placeholder {
  color: #5a6472 !important;
  -webkit-text-fill-color: #5a6472 !important;
  opacity: 1 !important;
}

/* the Yes/No radio labels in the same step */
#stepDetails .choice-row label {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  background: #ffffff !important;
}

/* ── "Get A Instant Quote / Within 60 Sec" button: two centered lines ──
   The <br/> splits it; Nicepage's .u-btn is a flex/inline-block that can
   letter-center the first line only, so force block centering + a sane
   line-height and let the height grow to fit both lines.                */
a.u-btn-1[href*="Roof-Estimate-Tool"],
.u-btn.u-btn-1[href*="Roof-Estimate-Tool"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  white-space: normal !important;
}

/* ── Roof Tune-Up (BOOKNOW) banner: 30% smaller, ratio locked ──
   Was capped at 570px. 570 x 0.70 = 399px. The image is 1400x588
   (ratio 2.381); aspect-ratio + height:auto keep it exact, so a 30%
   narrower cap gives 30% less height. Centered, never cropped.
   NOTE: the old rule also targeted `.u-section-5 .u-image-1`, which is
   the "Looking for a New Roof" banner's selector — that one is handled
   separately above and must NOT be capped at this width.            */
img[src*="BOOKNOW"],
img.u-expanded-width[src*="BOOKNOW"],
a:has(> img[src*="BOOKNOW"]) > img {
  width: 100% !important;
  max-width: 399px !important;
  height: auto !important;
  aspect-ratio: 1400 / 588 !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
@media (max-width: 991px) {
  img[src*="BOOKNOW"],
  img.u-expanded-width[src*="BOOKNOW"] {
    max-width: 399px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1400 / 588 !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── CIRCLE IMAGES: RESTORE PERFECT CIRCLE (must be LAST) ──────────────
   Regression guard: the "Looking for a New Roof" banner rules target
   .u-section-5/-6/-7 .u-image-1, and on some pages that same selector is
   the yellow-truck / family circle <img>. The banner's aspect-ratio
   (1400/863) + width:70% stretched those circles into ovals. The banner
   selectors are now guarded with :not(.u-image-circle):not(img):not(.u-sheet), and this
   block re-asserts a true 1:1 circle afterwards so nothing can flatten it.

   Sizing is RESPONSIVE (min/clamp), never a hard px width, so the circle
   can't force its container wider than a phone screen and push the page
   sideways. aspect-ratio 1/1 keeps it round at any size.               */
img.u-image-circle,
.u-image-circle,
img[src*="RoofingComany"],
img[src*="LocalRoofing"] {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  width: clamp(200px, 80vw, 340px) !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ── Yellow "Get A Instant Quote / Within 60 Sec" button: 50% WIDTH, CENTERED ──
   Making it `display:flex` (to get two centered lines) also made the anchor a
   block-level box that stretched to the full container width — the too-wide
   yellow bar over the hero. Cap it at 50% and center it with auto margins.
   Same size and position on every slide/page. Text stays two centered lines. */
a.u-btn-1[href*="Roof-Estimate-Tool"],
.u-btn.u-btn-1[href*="Roof-Estimate-Tool"] {
  width: 50% !important;
  max-width: 50% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}
*:has(> a.u-btn-1[href*="Roof-Estimate-Tool"]) {
  text-align: center !important;
}
@media (max-width: 767px) {
  a.u-btn-1[href*="Roof-Estimate-Tool"],
  .u-btn.u-btn-1[href*="Roof-Estimate-Tool"] {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── MOBILE OVERFLOW GUARD: nothing may exceed the viewport ────────────
   The sideways-scrolling / shifted-left index on phones comes from fixed
   px widths inside narrow cells. Belt-and-braces: no image or layout cell
   may be wider than its container on small screens.                    */
@media (max-width: 767px) {
  img, .u-image, .u-layout-cell, .u-container-layout, .u-sheet {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 4 ROOF BUTTONS: ALWAYS SIT CLEARLY BELOW THE STRIPE GRAPHIC ───────
   The stripe/chevron graphic (RoofingBGContent.png) sits above the 4
   ge-rbtn buttons. Give the graphic breathing room underneath and keep
   the buttons evenly spaced from each other, on mobile AND desktop, so
   they never crowd or overlap it. Buttons stay full-width in a single
   column with an even gap.                                             */
img[src*="RoofingBGContent"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 36px !important;   /* clear space under the stripe */
  object-fit: contain !important;
}
.ge-roofbtns-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;             /* even spacing between the 4 buttons */
  width: 100% !important;
  max-width: 100% !important;
  margin: 36px auto 48px !important; /* clear of the graphic above + below */
  padding: 0 !important;
  box-sizing: border-box !important;
}
.ge-rbtn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;             /* gap handles the spacing, not margins */
}
@media (max-width: 991px) {
  img[src*="RoofingBGContent"] {
    margin-bottom: 28px !important;
  }
  .ge-roofbtns-v2 {
    gap: 20px !important;
    margin: 28px auto 40px !important;
  }
}

/* ── ROOF ESTIMATE TOOL — "💳 Estimated Monthly Payment Options" ────────
   This whole payment block is injected by Roof-Estimate-Tool.js and has
   NO css anywhere, so every ge-pay-* element inherits white text on the
   white result card — invisible. Give the title (next to the 💳 icon)
   navy, and make the rest of the block readable while we're here.
   -webkit-text-fill-color must be pinned too or it silently wins.     */
.ge-pay-title,
.ge-payment-section .ge-pay-title {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  margin: 18px 0 12px !important;
  text-align: center !important;
}

/* the payment cards + note in the same block */
.ge-payment-section,
.ge-pay-grid,
.ge-pay-card,
.ge-pay-term,
.ge-pay-per,
.ge-pay-note {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}

/* the badges (Fastest Payoff / Best Balance / Lowest Payment) — were
   rendering white-on-white. Give them a navy pill with WHITE text so they
   read clearly on the white card. */
.ge-pay-badge,
.ge-pay-card .ge-pay-badge,
.ge-payment-section .ge-pay-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #062453 !important;
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
}
/* the featured card's badge (Best Balance ★) in gold to stand out */
.pay-card-featured .ge-pay-badge {
  background: #f0a500 !important;
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}


/* the monthly PRICE itself in RED, like the main estimate price */
.ge-pay-amt,
.ge-pay-card .ge-pay-amt,
.ge-payment-section .ge-pay-amt {
  color: #d60000 !important;
  -webkit-text-fill-color: #d60000 !important;
  font-weight: 900 !important;
  font-size: 1.9rem !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  letter-spacing: .3px !important;
}
/* the small "/mo est." suffix stays navy so the number pops */
.ge-pay-amt .ge-pay-per,
.ge-pay-per {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
.ge-pay-note {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
  font-size: .85rem !important;
  text-align: center !important;
  margin-top: 12px !important;
}

/* ── FAQ ACCORDION: BORDER ONLY WHEN EXPANDED ──────────────────────────
   Default state: no border at all on the "Frequently Asked Questions"
   rows — clean, borderless list. When a question is OPENED (Nicepage adds
   `.active` to the link and `.u-accordion-active` to the pane), that item
   gets a border so the expanded answer is visually framed.
   Scoped strictly to .ge-faq-section so nothing else on the page is hit. */

/* 1) default: strip Nicepage's u-border-* styling */
.ge-faq-section .u-accordion,
.ge-faq-section .u-accordion-item,
.ge-faq-section .u-accordion-link,
.ge-faq-section .u-accordion-pane,
.ge-faq-section .u-accordion-link:hover,
.ge-faq-section .u-accordion-link:focus {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 2) expanded: border appears on the open question + its answer pane */
.ge-faq-section .u-accordion-link.active,
.ge-faq-section .u-accordion-link[aria-selected="true"] {
  border: 2px solid #f2b705 !important;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0 !important;
}
.ge-faq-section .u-accordion-pane.u-accordion-active {
  border: 2px solid #f2b705 !important;
  border-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
}

/* the "Frequently Asked Questions" heading: navy, NOT yellow */
.ge-faq-section h2,
.ge-faq-section .u-text-1 {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}

/* ── ROOF-COST CARD: RESTORE THE WHITE PILL/CARD ON MOBILE & TABLET ────
   BUG: an earlier "remove huge empty gaps" rule in this file collapses
   .u-section-11 with `min-height:0 !important; height:auto !important`
   at <=991px. But .u-section-11 IS the roof-cost banner, and
   roof-cost-html.css holds its card open with `min-height:670px`.
   Because header-top-fixes.css loads LAST, the collapse won.

   The section has `overflow:hidden`, so at zero height the white card
   ("YOUR NEW ROOF" pill + "Shouldn't Cost An Arm And A Leg" + copy) was
   clipped out of existence on phones and tablets.

   Give the section and its card-wrap their height back and force the
   card visible. This runs after the collapse rule, so it wins.        */
@media (max-width: 991px) {
  .ge-roof-cost-html-section,
  .ge-roof-cost-html-section.u-section-11 {
    min-height: 560px !important;
    height: auto !important;
    overflow: visible !important;
  }
  .ge-roof-cost-card-wrap {
    min-height: 560px !important;
    display: flex !important;
    align-items: center !important;
    padding: 36px 18px !important;
  }
  .ge-roof-cost-card,
  .ge-roof-cost-yellow-shape {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ge-roof-cost-pill {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media (max-width: 767px) {
  .ge-roof-cost-html-section,
  .ge-roof-cost-html-section.u-section-11,
  .ge-roof-cost-card-wrap {
    min-height: 520px !important;
    height: auto !important;
    overflow: visible !important;
  }
}
/* ── PAYMENT CARDS: EXPLICIT, READABLE STYLING (override any inherited grey) ─
   The JS renders .ge-pay-card > (.ge-pay-term, .ge-pay-amt, .ge-pay-badge).
   Nothing gave the card a real background, so it inherited a grey bubble and
   the badge text was hard to read. Define the whole component cleanly:
   white card, navy term, RED price, navy (or gold) badge pill.            */
.ge-pay-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-top: 12px !important;
}
.ge-pay-card {
  background: #ffffff !important;
  border: 3px solid #f2b705 !important;
  border-radius: 14px !important;
  padding: 18px 12px !important;
  text-align: center !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
}
.pay-card-featured {
  border-color: #062453 !important;
  box-shadow: 0 8px 22px rgba(6,36,83,.20) !important;
}
.ge-pay-term {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}
@media (max-width: 800px) {
  .ge-pay-grid { grid-template-columns: 1fr !important; }
}
/* ── ROOF TOOL — "Message on Facebook" CTA: white circle + FB "f" icon ──
   The button renders <span class="ge-fb-icon">f</span> with no styling, so
   the "f" was bare text. Make it a WHITE CIRCLE with the Facebook-blue "f"
   inside, sitting on the blue FB button. Also give the CTA row/buttons a
   clean layout so the Facebook and Contact buttons read properly.        */
.ge-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 18px !important;
}
.ge-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.ge-btn-red  { background: #c62828 !important; }
.ge-btn-fb   { background: #1877f2 !important; }

/* the white circle holding the Facebook "f" */
.ge-fb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  background: #ffffff !important;
  color: #1877f2 !important;
  -webkit-text-fill-color: #1877f2 !important;
  border-radius: 50% !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex: 0 0 26px !important;
}
/* ── HEADER ONE-LINE LAYOUT (desktop) ────────────────────────────────
   logo (far left) | nav | 40-yr badge | Celebrating text | CALL TODAY |
   social — one navy line. Desktop only (>=992px); mobile untouched.    */
@media (min-width: 992px) {
  #header.u-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 clamp(6px, 1vw, 16px) !important;
    min-height: 0 !important;
    height: auto !important;
    /* Yellow on the LEFT (behind the logo) then blue for the rest. The hard
       stop sits under the logo's diagonal slash so no blue shows on the left. */
    background-color: #062453 !important;
    background-image: linear-gradient(90deg, #f2b705 0, #f2b705 clamp(220px, 20vw, 300px), #062453 clamp(220px, 20vw, 300px)) !important;
    position: relative !important;
    border-bottom: 0 !important;   /* the whole-header line is replaced below —
                                       it now sits at the LOGO's bottom edge,
                                       not after the CALL US NOW/Celebrating row */
  }
  #header.u-header::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--ge-header-line-top, clamp(72px, 6.4vw, 92px)) !important;   /* measured to the logo's actual bottom edge */
    height: 3px !important;
    background: #f2b705 !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
  #header .u-image-1 {
    order: 1 !important;
    position: relative !important; top: 0 !important; left: auto !important;
    margin: 0 0 0 -48px !important;             /* pull logo hard LEFT so it covers the edge — no blue sliver */
    flex: 0 0 auto !important;
    height: clamp(72px, 6.4vw, 92px) !important;
    max-height: 92px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: left center !important;
    align-self: center !important;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%) !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%) !important;
  }
  #header nav.u-menu-1 {
    order: 2 !important;
    position: relative !important; top: auto !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    flex: 0 1 auto !important;                 /* allow the nav to shrink if needed */
    margin: 0 clamp(8px, 1.4vw, 26px) 0 0 !important;   /* small gap after BLOG, no auto push */
    min-width: 0 !important;
    align-self: flex-start !important;         /* push nav to the TOP, level with the logo top */
    background-color: #062453 !important;       /* nav bar background (matches header) */
  }
  #header nav.u-menu-1 .u-nav-container,
  #header nav.u-menu-1 .u-custom-menu {
    width: max-content !important;
    max-width: none !important;
    display: block !important;
    overflow: visible !important;
  }
  #header nav.u-menu-1 ul.u-nav {
    width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  /* Make each top-level nav item shrink-wrap to its label so the whole
     menu lays out on ONE line (Nicepage's default lets them collapse to
     a narrow box and overflow onto the badge). */
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    position: relative !important;
  }
  /* Nav link size scales with viewport so the whole header fits normal
     desktop/laptop widths (992–1600px) without clipping the edges. */
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-nav-link,
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-button-style,
  #header nav a.u-button-style,
  #header nav .u-nav-link,
  #header nav li > a {
    padding-left: clamp(3px, 0.4vw, 7px) !important;
    padding-right: clamp(3px, 0.4vw, 7px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: clamp(0.58rem, 0.82vw, 0.9rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  /* kill any Nicepage animated underline (pseudo-element line) on nav links */
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-nav-link::before,
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-nav-link::after,
  #header nav .u-nav-link::before,
  #header nav .u-nav-link::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
  }
  /* Rollover: yellow highlight with white text on hover/focus/active */
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-nav-link:hover,
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item > a.u-button-style:hover,
  #header nav a.u-button-style:hover,
  #header nav .u-nav-link:hover,
  #header nav li > a:hover,
  #header nav.u-menu-1 ul.u-nav > li.u-nav-item:hover > a.u-nav-link,
  #header nav .u-nav-link:focus,
  #header nav li > a:focus {
    background-color: #f2b705 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  /* Active/current-page nav item: YELLOW box, white text, stays highlighted */
  #header nav .u-nav-link.ge-active-menu-page,
  #header nav .u-nav-link.active,
  #header nav .u-nav-link.u-active,
  #header nav li.u-active > a.u-nav-link,
  #header nav li.active > a.u-nav-link {
    background-color: #f2b705 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
  }
  /* keep the same yellow highlight on hover too, for consistency */
  #header nav .u-nav-link.ge-active-menu-page:hover,
  #header nav .u-nav-link.active:hover,
  #header nav .u-nav-link.u-active:hover {
    background-color: #f2b705 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  #header .u-image-2 {
    display: none !important;   /* 40-year badge now lives on the hero slider */
  }
  #header .u-text-1 {
    order: 4 !important;
    position: relative !important; top: auto !important;
    margin: 0 4px !important;
    flex: 0 0 auto !important;
    font-size: clamp(0.6rem, 0.72vw, 0.74rem) !important;
    font-style: italic !important;
    line-height: 1.15 !important;
    max-width: clamp(110px, 12vw, 160px) !important;
  }
  #header .u-btn-1 {
    order: 5 !important;
    position: relative !important; top: auto !important; left: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    font-size: clamp(0.68rem, 0.82vw, 0.92rem) !important;
    white-space: nowrap !important;
  }
  #header .u-social-icons-1 {
    order: 6 !important;
    position: relative !important; top: auto !important; right: auto !important;
    margin: 0 0 0 6px !important;
    flex: 0 0 auto !important;
  }
  /* keep the stacked right column from overflowing on narrower desktops */
  #header .ge-header-right-col { flex: 0 0 auto !important; margin-left: clamp(4px, 0.6vw, 12px) !important; }
}

/* ── $99/MONTH CHEVRON BLOCK — CLICK HERE button ─────────────────────
   Navy pill button with white bold-italic text and a gold circle arrow,
   centered under the "$99/Month" line. Links to the roof estimate tool. */
.ge-chevron-clickhere {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: 90% !important;
  margin: 10px auto 18px !important;
  background-color: #062453 !important;
  color: #ffffff !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  padding: 12px 26px !important;
  border-radius: 10px !important;
}
.ge-chevron-clickhere:hover { background-color: #12294a !important; }
.ge-chevron-clickhere .ge-cc-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background-color: #f2b705 !important;
  color: #062453 !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
}

/* ── GLOBAL RULE: white text on navy backgrounds ─────────────────────
   Any element with the brand navy background (#062453) shows white text
   by default, so text and icons never disappear navy-on-navy. Explicit
   gold accents (u-text-custom-color-1 / gold buttons) keep their color. */
.ge-form-box,
.ge-form-box p,
.ge-form-box span:not(.u-text-custom-color-1),
.ge-form-box label,
.ge-chevron-clickhere,
[style*="#062453"]:not(img):not(.u-btn-submit):not(.ge-cc-arrow),
.u-palette-2-base,
.u-custom-color-2 {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
/* keep gold accents gold even inside navy boxes */
.ge-form-box .u-text-custom-color-1,
.ge-form-box h4[style*="f2b705"],
.u-text-custom-color-1 {
  color: #f2b705;
  -webkit-text-fill-color: #f2b705;
}
/* keep the gold CLICK HERE buttons navy-on-gold, not white */
.u-section-3 .ge-form-box a.u-btn-submit,
.ge-form-box .u-btn-submit,
.ge-chevron-clickhere .ge-cc-arrow {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
}

/* ── SLIDE COVER LINK — make the whole slide clickable ───────────────
   The ge-slide-cover-link is an empty <a> inside each slide's sheet; by
   default it collapses to 0×0 so the slide isn't clickable. Make it an
   absolute overlay that fills the entire slide (esp. the Banner0 first
   slide, which is a pure background image). Sits above the image but
   below the nav arrows/dots so those still work.                        */
.u-carousel-item .u-sheet {
  position: relative !important;
}
.ge-slide-cover-link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 5 !important;
  cursor: pointer !important;
  /* transparent — no visual change, just a clickable layer */
  background: transparent !important;
}
/* keep the carousel arrows and indicator dots above the cover link so
   they remain clickable */
.u-carousel-control,
.u-carousel-indicators,
.u-carousel-indicators li {
  z-index: 10 !important;
}
/* arrows: gold, matching the approved design (was default grey).
   Nicepage's own .u-text-grey-30 rule (also on these <a> tags) has
   higher specificity (a.u-button-style.u-text-grey-30), so match/beat
   it directly on the actual classes these arrows carry.               */
a.u-carousel-control-prev.u-text-grey-30,
a.u-carousel-control-next.u-text-grey-30,
.u-carousel-control.u-carousel-control-prev,
.u-carousel-control.u-carousel-control-next {
  color: #f2b705 !important;
}
a.u-carousel-control-prev.u-text-grey-30:hover,
a.u-carousel-control-next.u-text-grey-30:hover,
.u-carousel-control.u-carousel-control-prev:hover,
.u-carousel-control.u-carousel-control-next:hover {
  color: #ffd84d !important;
}
/* on slides that DO have a headline/button, keep those above the cover
   link too so their own links still work */
.u-carousel-item .u-title,
.u-carousel-item .u-btn {
  position: relative !important;
  z-index: 6 !important;
}

/* ── PAGE TITLE BAND ([CITY] ROOF REPAIR) — branded style ─────────────
   Make the "<keyword> Roof Repair" band match the approved design:
   • navy shingle photo with a solid #062453 overlay for strong contrast
   • title centered, BOLD ITALIC UPPERCASE white with a soft shadow
   • yellow slash "/////" graphics flanking the title on both sides
     (drawn in CSS so they render on every page, any city name)
   • yellow accent line top AND bottom of the band
   Targets .ge-shingle-bg-fix (present on the real title band on every
   page) instead of body:not(.ge-contact-page) .u-section-2 — Nicepage numbers sections
   sequentially, so "u-section-2" means the title band on most pages
   but a COMPLETELY DIFFERENT section (the $99/month CTA + contact
   form area) on the 4 remodeling pages (ADU-Builders, Mold-Remediation,
   Kitchen/Bathroom-Remodeling), where the title band is "u-section-1"
   instead. The old .u-section-2-based rule was incorrectly painting
   the shingle photo + navy overlay onto that unrelated section there. */
.ge-shingle-bg-fix {
  background-image: linear-gradient(rgba(6,36,83,.2), rgba(6,36,83,.2)), url('images/Los-Angeles-Roofing-Navy-Shingle-BG.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  border-top: 4px solid #f2b705 !important;
  border-bottom: 4px solid #f2b705 !important;
  position: relative !important;
}
.ge-shingle-bg-fix > * {
  position: relative !important;
  z-index: 1 !important;
}
.ge-shingle-bg-fix .u-title,
.ge-shingle-bg-fix .u-text-1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
/* Longer titles (e.g. About page's "Your Local #1 Rated Los Angeles
   Roofer") need a smaller font-size to fit on one line, since the
   default size was sized for shorter titles like "[City] Roof Repair". */
.ge-shingle-bg-fix .u-title.ge-title-long {
  font-size: clamp(1.1rem, 3.2vw, 2.4rem) !important;
  white-space: nowrap !important;
}
/* the yellow slash graphics on each side of the title */
.ge-shingle-bg-fix .u-title::before,
.ge-shingle-bg-fix .u-title::after {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 62px !important;
  height: 30px !important;
  background-image: repeating-linear-gradient(
    -60deg, #f2b705 0, #f2b705 8px, transparent 8px, transparent 15px) !important;
}
@media (max-width: 767px) {
  .ge-shingle-bg-fix .u-title::before,
  .ge-shingle-bg-fix .u-title::after { width: 34px !important; height: 20px !important; }
  .ge-shingle-bg-fix .u-title { gap: 12px !important; }
  .ge-shingle-bg-fix .u-title:not(.ge-title-long) {
    font-size: 1.6rem !important;
  }
}

/* ── HERO SLIDE HEADLINES — bold uppercase, yellow roof-type accent ───
   "The GO-TO [ROOF TYPE] Professionals in Los Angeles" — bold uppercase
   white base, with "GO-TO [ROOF TYPE]" highlighted bold gold/yellow.
   golden-empire-banner-slider.js re-applies white to all carousel text
   every slide change; it's patched to skip this span so the yellow
   sticks (see forceWhiteText's u-text-custom-color-1 guard).           */
.u-carousel-item .u-title.u-text-1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: .01em !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.65) !important;
  line-height: 1.15 !important;
}
.u-carousel-item .u-title.u-text-1 span.u-text-custom-color-1,
.u-carousel .u-carousel-item .u-title span.u-text-custom-color-1,
h1.u-title .u-text-custom-color-1 {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
  font-weight: 900 !important;
}

/* ── HERO SLIDE CAPTION — "GET A INSTANT QUOTE WITHIN 60 SEC!" ────────
   Sits just below the yellow CLICK HERE button on every slide. Bold
   white text with "60 SEC" picked out in gold, matching the approved
   design. Centered under the button, same width as the slide content. */
.u-carousel-item .ge-slide-caption {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: .02em !important;
  margin: 14px 0 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
  position: relative !important;
  z-index: 6 !important;
}
.u-carousel-item .ge-slide-caption .ge-slide-caption-accent {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
  font-weight: 900 !important;
}
@media (max-width: 767px) {
  .u-carousel-item .ge-slide-caption { font-size: 0.82rem !important; margin-top: 10px !important; }
}

/* ── HERO SLIDE "CLICK HERE" BUTTON — navy text on gold, always ────── */
.u-carousel-item .u-btn-1 {
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

/* ── $99/MONTH FINANCING CTA — ONE image (chevron + roof/window icon +
   CLICK HERE button all baked in), with the real HTML headline text
   absolutely positioned into the blank zone between the icon and the
   button (that zone runs roughly 20%–80% of the image's height).       */
.ge-99-month-cta-wrap {
  display: block !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
/* ── Backward-compat: City pages (Cities/ folder) still use the OLDER
   3-piece CTA structure (RoofingBGContent.png chevron + separate icon +
   separate button image), not the newer single-graphic structure used
   on root pages. Different class names, so both coexist safely.        */
.ge-99-chevron-top {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 0 -40px !important;
}
.ge-99-roof-window-icon {
  position: absolute !important;
  top: clamp(6px, 3vw, 24px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(70px, 15vw, 130px) !important;
  height: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.ge-99-click-here-img {
  display: block !important;
  width: min(320px, 80%) !important;
  height: auto !important;
  margin: 0 auto !important;
  transition: opacity .15s ease !important;
}
.ge-99-month-cta-wrap:hover .ge-99-click-here-img {
  opacity: .9 !important;
}

.ge-99-chevron-full {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}
/* ADU/Mold/Kitchen/Bathroom pages only (marked by ge-low-interest-centered
   on their text) — push the chevron+window image up 20px.              */
.ge-99-month-cta-wrap:has(.ge-low-interest-centered) .ge-99-chevron-full {
  position: relative !important;
  top: 0 !important;
}
/* Standalone CLICK HERE button — now independently positioned, separate
   from the chevron graphic (which no longer has it baked in). Sits in
   normal flow right after the (now shorter) chevron image, so it can be
   moved up/down freely via margin-top without affecting the text above. */
.ge-99-click-here-standalone {
  display: block !important;
  position: relative !important;
  width: min(320px, 45%) !important;
  height: auto !important;
  margin: 105px auto 20px !important;
  z-index: 1 !important;
}
@media (max-width: 767px) {
  .ge-99-click-here-standalone {
    width: min(220px, 55%) !important;
  }
}
@media (min-width: 768px) {
  .ge-99-click-here-standalone {
    margin-top: 85px !important;
  }
}
/* the real HTML headline text, dropped into the graphic's blank zone */
.ge-99-month-cta-wrap .ge-low-interest-banner-text {
  position: absolute !important;
  top: calc(34% + 25px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  text-align: center !important;
  color: #062453 !important;
  -webkit-text-fill-color: #062453 !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 12px !important;
}
.ge-99-month-cta-wrap .ge-low-interest-banner-text .u-text-custom-color-1 {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}
@media (max-width: 767px) {
  .ge-99-month-cta-wrap .ge-low-interest-banner-text { font-size: 1.05rem !important; top: calc(32% + 40px) !important; line-height: 1.1 !important; }
}
/* ── 4 remodeling pages (ADU/Mold/Kitchen/Bathroom) have this text on
   3 lines instead of 2, so it needs a smaller start position/font-size
   to fit within the chevron's blank zone without spilling below it.  */
.ge-99-month-cta-wrap .ge-low-interest-banner-text.ge-low-interest-centered {
  top: calc(34% + 25px) !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .ge-99-month-cta-wrap .ge-low-interest-banner-text.ge-low-interest-centered {
    top: calc(32% + 20px) !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    transform: none !important;
  }
  /* Give the chevron wrapper 20px extra room at the bottom on mobile so the
     absolutely-positioned $99/Month line isn't clipped off the graphic.   */
  .ge-99-month-cta-wrap:has(.ge-low-interest-centered) {
    padding-bottom: 20px !important;
  }
}
/* On the 3-line remodeling pages the chevron image is the same height but
   the text starts higher, so pull the standalone CLICK HERE button up so it
   sits right beneath the text (matching the tight index layout) instead of
   dropping far below the chevron.                                        */
.ge-99-month-cta-wrap:has(.ge-low-interest-centered) .ge-99-click-here-standalone {
  margin-top: 55px !important;
}
@media (min-width: 768px) {
  .ge-99-month-cta-wrap:has(.ge-low-interest-centered) .ge-99-click-here-standalone {
    margin-top: 70px !important;
  }
}
/* Pin the $99/month column to the TOP of its row (instead of Nicepage's
   default vertical-centering), so the chevron's top edge lines up with
   the yellow top border on the "Get In Touch" form image in the
   neighboring column.                                                  */
.u-section-3 .u-layout-cell-1,
.u-section-3 .u-layout-cell-2 {
  align-self: flex-start !important;
}

/* ── ADU/Mold/Kitchen/Bathroom chevron overflow fix ──────────────────
   These 4 remodeling page types put the chevron inside a Nicepage
   "group" (.u-section-2 .u-group-1) whose own per-page CSS sets
   `width:1128px; margin:0 -418px 0 auto`, deliberately bleeding the
   graphic ~418px to the RIGHT — straight into the neighboring
   "Get In Touch" form cell. Index has no such group; its chevron sits
   directly in the cell and stays contained. Neutralize the group so the
   chevron fills only its own left cell, matching index.                */
.u-section-2 .u-container-layout-1:has(.ge-99-month-cta-wrap) .u-group-1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.u-section-2 .u-container-layout-1:has(.ge-99-month-cta-wrap) .u-container-layout-2 {
  width: 100% !important;
  max-width: 100% !important;
}
/* Pin the chevron row to the TOP (like index's u-section-3) so the
   chevron's top edge lines up with the yellow top border of the
   "Get In Touch" form in the neighboring cell. Scoped via :has() to the
   row that actually contains the chevron, so only the 4 remodeling
   pages are affected — other section-2 layouts are untouched.          */
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) {
  align-items: flex-start !important;
}
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) > .u-layout-cell,
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) .u-layout-cell-1,
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) .u-layout-cell-2 {
  align-self: flex-start !important;
}

/* ── UNIVERSAL: align the "Get In Touch" form's yellow top border with the
   top of the chevron roof, on EVERY page that has both in one row
   (ADU/Mold/Kitchen/Bathroom in section-2, service pages in their own
   sections, etc.). Section-agnostic: keys off the chevron + the form
   image's stable u-border-12 class rather than section numbers, so it
   works everywhere the two sit side by side. Leaves the form itself
   (fields, styling) untouched — only removes the vertical offset that
   pushes the yellow line down below the roof peak.
   NOTE: scoped to .u-section-2 (the ADU/Mold/Kitchen/Bathroom remodeling
   chevron) ONLY. The Free-Roof-Program pages put their chevron + sidebar
   form together in .u-section-3; a bare :has() rule shoved that sidebar,
   so these MUST stay section-2-scoped.                                  */
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) {
  align-items: flex-start !important;
}
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) > .u-layout-cell {
  align-self: flex-start !important;
}
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) .u-layout-cell:has(> .u-container-layout > .u-border-12) > .u-container-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
}
.u-section-2 .u-layout-row:has(.ge-99-month-cta-wrap) .u-border-12.u-image {
  margin-top: 0 !important;
}

/* ── HERO SLIDER — reverted to original photo+headline slides.
   (New designed-banner CSS removed; index.css's own per-slide rules,
   e.g. .u-section-1-1 background-image: url('images/Banner.png') with
   the black overlay, now apply again.)                                */

/* ── GET IN TOUCH FORM — reverted to original (no custom styling) ── */

/* Defensive backup — CALL US NOW and Celebrating 40 Years are always
   left-aligned, both in text and in their own box, under HOME. Backs up
   the JS-applied inline styles at the stylesheet level too.            */
@media (min-width: 992px) {
  #header .ge-header-left-group,
  #header .ge-header-left-group .u-btn-1,
  #header .ge-header-left-group .u-text-1 {
    text-align: left !important;
    align-items: flex-start !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* Bulletproof fix for slide 5 (Metal Roofing) — the "GO-TO METAL ROOFING"
   accent should be yellow like every other slide. Extra-specific
   selector in case something else was overriding it just on this slide. */
.u-carousel-item.u-section-1-5 h1.u-title span.u-text-custom-color-1,
.u-section-1-5 .u-text-1 span.u-text-custom-color-1 {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
  font-weight: 900 !important;
}

/* ── 40-year badge, sitting below the "Get In Touch" form and above the
   4 roof-type quick-select buttons.                                    */
.ge-form-badge {
  display: block !important;
  width: clamp(180px, 24vw, 260px) !important;
  height: auto !important;
  margin: 18px auto !important;
}

/* ── Testimonials section specifically. On most pages it's numbered
   u-section-5; on 4 remodeling pages (ADU-Builders, Mold-Remediation,
   Kitchen/Bathroom-Remodeling) it's u-section-4 instead, since Nicepage
   numbers sections sequentially and those pages have one fewer section
   before it. Marked those 4 with .ge-testimonials-section directly in
   the HTML so this rule can target the real testimonials section on
   every page without guessing at section numbers.                     */
section.u-custom-color-2.u-section-5,
section.u-custom-color-2.ge-testimonials-section,
footer.u-custom-color-2,
header.u-custom-color-2 {
  background-color: #062453 !important;
}

/* ── Hero slide "OUR PRICING TOOL...60 SECONDS! CLICK HERE" graphic —
   replaces the old CLICK HERE button + caption, text/button baked in. */
.ge-hero-pricing-cta-link {
  display: block !important;
  margin: 0 auto 50px !important;
  text-decoration: none !important;
  transition: opacity .15s ease !important;
}
.ge-hero-pricing-cta-link:hover {
  opacity: .92 !important;
}
.ge-hero-pricing-cta-img {
  display: block !important;
  width: min(360px, 85%) !important;
  height: auto !important;
  margin: 0 auto !important;
}
@media (max-width: 767px) {
  .ge-hero-pricing-cta-img { width: min(300px, 85%) !important; }
  .ge-hero-pricing-cta-link { margin: 0 auto 40px !important; }
}

/* ── Bulletproof consistency fix: absolutely position the headline and
   CTA button at IDENTICAL coordinates on every slide. This bypasses any
   per-slide margin/sheet-height differences entirely (margin-based
   alignment kept drifting slide-to-slide, e.g. slide 4/Tile), so every
   slide's text + button now start at the exact same spot, guaranteed. */
.u-carousel-item .u-sheet-1 {
  position: relative !important;
  min-height: 460px !important;
}
.u-carousel-item.u-section-1-1 .u-title.u-text-1,
.u-carousel-item.u-section-1-2 .u-title.u-text-1,
.u-carousel-item.u-section-1-3 .u-title.u-text-1,
.u-carousel-item.u-section-1-4 .u-title.u-text-1,
.u-carousel-item.u-section-1-5 .u-title.u-text-1,
.u-carousel-item.u-section-1-6 .u-title.u-text-1,
.u-carousel-item.u-section-1-7 .u-title.u-text-1 {
  position: absolute !important;
  top: 90px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}
.ge-hero-pricing-cta-link {
  position: absolute !important;
  top: 185px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .u-carousel-item .u-sheet-1 { min-height: 200px !important; height: 200px !important; }
  .u-carousel-item.u-section-1-1 .u-title.u-text-1,
  .u-carousel-item.u-section-1-2 .u-title.u-text-1,
  .u-carousel-item.u-section-1-3 .u-title.u-text-1,
  .u-carousel-item.u-section-1-4 .u-title.u-text-1,
  .u-carousel-item.u-section-1-5 .u-title.u-text-1,
  .u-carousel-item.u-section-1-6 .u-title.u-text-1,
  .u-carousel-item.u-section-1-7 .u-title.u-text-1 {
    top: 35px !important;
    font-size: 1.15rem !important;
  }
  .ge-hero-pricing-cta-link {
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(calc(-50% + 105px)) !important;
  }
  .u-carousel-control-prev,
  .u-carousel-control-next {
    top: calc(50% - 20px) !important;
  }
}

/* Contact Us page: push the "Get In Touch" form sidebar left 10px */
body.ge-contact-page .u-layout-cell-2 {
  position: relative !important;
  left: -10px !important;
}

/* Hero slider: "Los Angeles" always on its own line on mobile only */
.ge-mobile-la-br {
  display: none !important;
}
@media (max-width: 767px) {
  .ge-mobile-la-br {
    display: block !important;
  }
}
/* Hero slider on mobile: keyword phrase + "Professionals in" merge onto
   one line (hide this break), so the headline is just 2 lines total:
   line 1 = keyword + "Professionals in", line 2 = "Los Angeles" (city). */
@media (max-width: 767px) {
  .ge-mobile-hide-br {
    display: none !important;
  }
}
/* Title band ([City] / [Keyword]): Los Angeles first row, keyword second
   row, on mobile only — desktop keeps them on the same line.           */
.ge-title-mobile-br {
  display: none !important;
}
@media (max-width: 767px) {
  .ge-title-mobile-br {
    display: block !important;
  }
}

/* ── "Family Owned Roofing Company" heading → brand yellow (class-based,
   works on every page regardless of section number) ── */
h2.ge-family-owned-yellow,
.ge-family-owned-yellow {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}