/* full-screen per-service hero video (carpet-build/patch-service-video.js) */
#hero.hero-section { position: relative !important; min-height: 100vh; min-height: 100svh; display: flex !important;
  flex-direction: column; justify-content: flex-end; padding-top: 120px !important; padding-bottom: 150px !important;
  overflow: hidden; background-color: #0E0E0F !important; background-image: var(--cx-hv-poster) !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
#hero > .cx-hv { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#hero > .cx-hv video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* keeps the nav and the white title readable over bright frames */
#hero .cx-hv__shade { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(10, 12, 14, .55) 0%, rgba(10, 12, 14, .12) 30%, rgba(10, 12, 14, .3) 60%, rgba(10, 12, 14, .82) 100%); }
#hero > :not(.cx-hv) { position: relative; z-index: 1; width: 100%; }
#hero img, #hero .max-w-\[1640px\] > :not(:first-child) { display: none !important; }
#hero .max-w-\[1640px\] > :first-child { transform: none !important; translate: none !important; align-items: flex-start; }
#hero h1 { color: #fff !important; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
#hero p { color: rgba(255, 255, 255, .86) !important; }
/* phones: the fixed "Leave a request" bar is ~130px tall there */
/* (the hero starts below the 60px mobile nav strip, so it is shorter by that much) */
@media (max-width: 767px) { #hero.hero-section { min-height: calc(100svh - 60px); padding-top: 90px !important; padding-bottom: 175px !important; } }
/* "Leave a Request" right under the subline (client 2026-10-09); opens the same popup as the bottom bar.
   It lives in the title row; desktop = grid: title left (2 rows), subline + CTA right, title and subline top-aligned */
.cx-hv-cta { display: block; width: 100%; margin-top: -10px; } /* the title row has gap-6 (24px) below lg */
@media (min-width: 1024px) {
  #hero .max-w-\[1640px\] > :first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); grid-template-rows: auto 1fr;
    column-gap: 24px; row-gap: 0 !important; align-items: start; }
  #hero .max-w-\[1640px\] > :first-child > :first-child { grid-row: 1 / span 2; }
  #hero .max-w-\[1640px\] > :first-child > p { grid-column: 2; grid-row: 1; }
  #hero .max-w-\[1640px\] > :first-child > .cx-hv-cta { grid-column: 2; grid-row: 2; margin-top: 14px; }
}
.cx-hv-cta button { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 10px 0 28px; border-radius: 9999px;
  background: #fff; color: #0E0E0F; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .3s, box-shadow .3s; }
.cx-hv-cta button:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, .35); }
.cx-hv-cta__arrow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: #0E0E0F; color: #fff; transition: background-color .3s, color .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.cx-hv-cta button:hover .cx-hv-cta__arrow { background: #2FDACA; color: #0E0E0F; transform: rotate(45deg); }
@media (max-width: 767px) { .cx-hv-cta button { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { #hero > .cx-hv video { display: none; } }