/* Neptune Window Cleaning – styles for what assets/site.js adds (Zoho's runtime used to supply these). */

html { background: #fff; }

/* Gallery lightbox */
body.np-lb-open { overflow: hidden; }
.np-lb {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9);
}
.np-lb[hidden] { display: none; }
.np-lb__stage { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.np-lb__img { display: block; max-width: 92vw; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.np-lb__count { margin-top: 10px; color: #fff; font: 14px/1.4 Georgia, serif; }
.np-lb button {
  position: absolute; border: 0; background: none; color: #fff; cursor: pointer;
  font: 44px/1 Georgia, serif; padding: 10px 16px; opacity: .85;
}
.np-lb button:hover, .np-lb button:focus-visible { opacity: 1; }
.np-lb button:focus-visible { outline: 2px solid #42B4D8; }
.np-lb__close { top: 8px; right: 8px; }
.np-lb__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.np-lb__next { right: 8px; top: 50%; transform: translateY(-50%); }

/* Body copy that was typed into heading tags in Zoho (h2/h3/h5 holding 18px text):
   use the normal paragraph size and spacing instead of the heading's 32-40px line box. */
.zptext .np-copy { font-size: inherit; line-height: inherit; }

/* Video showcase (e.g. "See Our Patio Cleaning in Action"): portrait reels side by side, each in a bordered card */
.np-videos-section { padding-block: 50px 60px; }
.np-videos-heading { font-family: Georgia, serif; font-size: 40px; line-height: 1.3; margin: 0 0 30px; }
.np-videos { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.np-video-card {
  margin: 0; width: 267px; padding: 8px; background: #fff;
  border: 3px solid #42B4D8; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 37, 55, .15);
}
.np-video-card video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: #0F2537; object-fit: cover; }
.np-video-card figcaption { margin-top: 10px; text-align: center; font: 600 15px/1.4 Georgia, serif; color: #0F2537; }
@media (max-width: 767px) {
  .np-videos-heading { font-size: 30px; }
  /* Two per row on phones so four reels aren't one very long scroll */
  .np-videos { gap: 14px; }
  .np-video-card { width: calc(50% - 7px); max-width: 267px; padding: 5px; border-width: 2px; }
  .np-video-card figcaption { font-size: 13px; margin-top: 6px; }
}
.np-video-card iframe { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; border: 0; border-radius: 8px; overflow: hidden; background: #0F2537; }

/* "You're One Step Away from a ..." headline: background is set inline per page to match its section.
   Navy sections keep the brand #42B4D8 word (6.5:1); white sections use #1F8FB3 (3.7:1, large text). */
#thememaincontent:focus { outline: none; }

/* Images carry width/height attributes for layout stability (CLS). Keep their
   aspect ratio and never let them overflow; :where() keeps specificity at 0 so
   every existing Zoho rule and inline style still wins. */
:where(img[width][height]) { max-inline-size: 100%; height: auto; }

/* Gallery thumbnail strip: centre the thumbnails under the main photo.
   "safe" falls back to start-aligned if there are ever more thumbs than fit, so none get clipped. */
.hb-lightbox__thumbs { display: flex; justify-content: safe center; }

/* Filmstrip galleries: photos of different heights sit centred in their slot, not top-aligned */
.zpfilmstrip-item { display: flex; flex-direction: column; justify-content: center; }

/* Filmstrip hover captions: the photos are small between 992px and 1199px, so tighten the caption
   type there so a full sentence or two still fits inside the frame (captions are hidden below 992px). */
@media (min-width: 992px) and (max-width: 1199px) {
  .zpfilmstrip .hb-grid-caption .hg-gallery-caption-heading { padding-top: 6px; font-size: 15px; line-height: 1.3; }
  .zpfilmstrip .hb-grid-caption .hg-gallery-caption-paragraph { font-size: 12.5px; line-height: 1.4; margin-inline: 6px; }
}