/* v69 — Full-screen video hero. v90: also used on the Holly Springs and Canton pages via body class "video-hero".
   v132: starts at 769px (tablets, and desktop windows zoomed in) instead of 1025px, so the
   older tablet photo never shows behind or under the video. Phones (<=768px) keep their photo. */
@media (min-width:769px){
  /* Header floats over the video, turns solid charcoal once scrolling starts */
  :is(.page-home,.video-hero) .header{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s ease,box-shadow .35s ease}
  :is(.page-home,.video-hero) .header.scrolled{background:rgba(29,31,34,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 24px rgba(0,0,0,.35)}
  :is(.page-home,.video-hero) .header .logo-icon img{filter:brightness(0) invert(1)}
  :is(.page-home,.video-hero) .header .nav a:link,:is(.page-home,.video-hero) .header .nav a:visited{color:rgba(255,255,255,.9)}
  :is(.page-home,.video-hero) .header .nav a:hover,:is(.page-home,.video-hero) .header .nav a.active{color:#fff}
  :is(.page-home,.video-hero) .header .header-tel:link,:is(.page-home,.video-hero) .header .header-tel:visited{color:#fff}
  :is(.page-home,.video-hero) .header .header-tel:hover{color:var(--amber-300)}

  /* Video fills the whole hero; credential bar peeks up at the bottom of the screen */
  :is(.page-home,.video-hero) .hero{min-height:0;height:calc(100vh - 68px);min-height:600px}
  :is(.page-home,.video-hero) .hero-bg,:is(.page-home,.video-hero) .hero-photo-line{display:none}
  :is(.page-home,.video-hero) .hero-photo{inset:0;width:100%;clip-path:none !important} /* v75: full-width video, no slanted panel (overrides the v59 slant in home.css) */
  :is(.page-home,.video-hero) .hero-photo-img{background:#1d1f22 url('assets/video/hero-poster.jpg') center 45%/cover no-repeat}
  :is(.page-home,.video-hero) .hero-photo-img picture{display:none}
  :is(.page-home,.video-hero) .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 45%;z-index:0;filter:saturate(.75) contrast(1.06) brightness(1.15)} /* v145: softer contrast so the dark shirt and tool belt keep their detail (was contrast 1.12); blacks still stay black */ /* v144: a bit brighter again (was brightness 1.1) */ /* v143: brighter so the worker on the right isn't crushed to black (was contrast 1.18, brightness .96); the left shade below is raised to cancel it out behind the text */ /* v113: more punch, same hue (was saturate .7, contrast 1.06, brightness .88) */
  :is(.page-home,.video-hero) .hero-photo-img::before{z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.89) 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.08) 78%,transparent 100%)} /* v144: text side up .01 to cancel the brighter video (was .88/.74) */ /* v143: slightly darker on the text side, fully clear on the far right (was .86/.7/.3 at 60%/.14 at 100%) */ /* v113: pure black instead of charcoal (true blacks, no gray haze), and it fades out sooner so more of the video shows */ /* v101: heavier shade on the text side only; right side unchanged. v106: left side a bit darker again (.94/.84/.58/.22 -> .96/.90/.68/.26); right edge unchanged */
  :is(.page-home,.video-hero) .hero-photo-img::after{z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 28%,transparent 66%,rgba(29,31,34,.55) 86%,#1d1f22 100%)} /* v114: bottom edge melts into the charcoal credentials bar so there is no visible line */

  /* Text: smaller footprint so the video gets the stage */
  :is(.page-home,.video-hero) .hero-inner{padding:90px 0 0}
  :is(.page-home,.video-hero) .hero h1{text-shadow:0 2px 24px rgba(0,0,0,.5)}
  :is(.page-home,.video-hero) .hero-h2{font-size:1.08rem;max-width:28rem;color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(0,0,0,.6)}
  /* v88: removed :is(.page-home,.video-hero) .hero-cta-stack{margin-top:26px} so homepage button spacing matches the town pages (was set when the hero had a sub line) */
}
@media (min-width:769px) and (prefers-reduced-motion:reduce){:is(.page-home,.video-hero) .hero-video{display:none}}

/* v116: homepage phones show hero-shingles-muted.webp in the <picture>; point the background at the same file so hero-shingles.webp isn't downloaded too */
/* v142: now points at the mobile video's first frame (see the v142 block at the bottom) */
@media (max-width:768px){.page-home .hero-photo-img{background-image:url('assets/video/hero-mobile-poster.webp')}}

/* v126 — Credentials strip (desktop only, >=1025px).
   The video fills the whole first screen, untouched (no dark fade at the bottom).
   The ratings strip starts right where the video ends. It opens in the same charcoal
   as the top menu bar (#1d1f22) and darkens to almost black at its bottom edge.
   To undo: delete this whole block. */
@media (min-width:1025px){
  :is(.page-home,.video-hero){--nm-glass-h:80px}

  /* Video fills the whole first screen; the strip comes right after it */
  :is(.page-home,.video-hero) .hero{height:100vh;min-height:640px}
  :is(.page-home,.video-hero) .hero-inner{padding:90px 0 24px}

  /* Keep the dark shade at the top (for the menu).
     v126: a short fade on just the last ~90px of the video, melting into the strip's
     top color (#1d1f22) so there's no hard line between them. */
  :is(.page-home,.video-hero) .hero-photo-img::after{background:
    linear-gradient(to bottom,transparent calc(100% - 90px),rgba(29,31,34,.55) calc(100% - 40px),#1d1f22 100%),
    linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 28%)}

  /* The strip: menu-bar charcoal at the top, fading to almost black at the bottom */
  :is(.page-home,.video-hero) .trust-strip-bar{
    position:relative;z-index:8;
    height:var(--nm-glass-h);margin-top:0;
    display:flex;align-items:center;padding:0;
    background:linear-gradient(to bottom,#1d1f22 0%,#141517 55%,#0a0b0c 100%);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;box-shadow:none;
  }
  :is(.page-home,.video-hero) .trust-strip-bar > .container{width:100%}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-strip-inner{flex-wrap:nowrap}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item{color:#b9bcc0;font-weight:500;text-shadow:none}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item:hover{color:#dfe1e3}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-divider{display:none}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item{padding:0 clamp(16px,2.2vw,30px)}
}
/* Narrow laptops: tighten spacing so all five fit on one line */
@media (min-width:1025px) and (max-width:1279px){
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item{padding:0 12px;font-size:.82rem;gap:8px}
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item svg,
  :is(.page-home,.video-hero) .trust-strip-bar .trust-bbb-img,
  :is(.page-home,.video-hero) .trust-strip-bar .trust-item-google .google-g{width:28px;height:28px}
}
/* Older browsers with no blur support: fall back to a solid-ish strip so the text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:1025px){:is(.page-home,.video-hero) .trust-strip-bar{background:transparent}}
}

/* v132 — Tablet widths (769–1024px, which is also what a desktop window turns into
   when zoomed in): the video fills the whole hero, like on desktop. These undo the
   older tablet photo layout (photo strip across the bottom 42%, dark fade on top). */
@media (min-width:769px) and (max-width:1024px){
  :is(.page-home,.video-hero) .hero-photo{top:0 !important;bottom:0 !important;height:auto !important;opacity:1 !important}
  :is(.page-home,.video-hero) .hero-photo-fade{display:none !important}
}
/* v132 — Phones: never show the video box (it only plays on wider screens). */
@media (max-width:768px){.video-hero .hero-video{display:none !important}} /* v142: homepage phones now get their own video (below); town pages still keep their photo */

/* v142 — Homepage phones: play the hero video in the photo box (the square above the headline).
   Uses hero-mobile.mp4: the same clip with the right third cut off, so it's a smaller download.
   The box is square, so a little more comes off the left side too (object-position below).
   Same color toning as desktop. The existing mobile fade (.hero-photo::after, dark at top,
   melting into charcoal at the bottom) sits on top of it unchanged.
   The still underneath (hero-mobile-poster.webp) is the video's first frame, so there's no jump
   when it starts. To undo: delete this block and restore the two lines marked v142 above. */
@media (max-width:768px){
  .page-home .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;z-index:1;filter:saturate(.75) contrast(1.18) brightness(.96)}
  .page-home .hero-photo-img > picture > img{object-position:100% 50%;filter:saturate(.75) contrast(1.18) brightness(.96)}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){.page-home .hero-video{display:none}}