/* ==========================================================================
   NCB section backgrounds
   Uses only the existing images in images/backgrounds and images/logo.
   Images are scaled evenly (never distorted); overlays keep text readable.
   Each section is visibly different from the one before and after it.
   Loads last on every page, after the other stylesheets.
   ========================================================================== */
:root {
  --bg-gallery: url("../images/backgrounds/project-gallery-blueprint.webp");
  --bg-contact: url("../images/backgrounds/contact-panel-blueprint.webp");
  --bg-logo: url("../images/logo/cropped-NCB-Logo.webp");
  --bg-gray: #e7e9ec;
  --bg-gray-2: #eef0f3;
  --bg-gray-3: #e3e6eb; /* plain gray for What we do + service sections */
}

/* ---------- 1. Navy gallery blueprint: Project gallery ----------
   (The full gallery page already shows this image as a fixed, window-sized
   layer in its own <style>, which suits that very long page.) */
.projects-home {
  background:
    linear-gradient(rgba(11, 20, 60, .18), rgba(11, 20, 60, .18)),
    var(--bg-gallery) center / cover no-repeat,
    #0f1a45
}

/* ---------- 2. Let's Get Started + Contact Info ----------
   The section sits right above the blueprint footer, so it uses plain white
   (also distinct from the gray About section above it). The blueprint stays
   inside the Contact Info panel only. */
.contact-section {
  background: #fff
}

.contact-section .contact-card {
  border: 1px solid #dde1e7;
  box-shadow: 0 16px 40px rgba(15, 26, 69, .14)
}

/* Full gallery page: its only section sits right above the blueprint footer,
   so it uses plain navy instead of the blueprint layer from its own <style> */
.projects.project-gallery-page::before {
  background: linear-gradient(180deg, #17245a 0%, #0f1a45 100%)
}

/* Contact Info panel: same blueprint, lighter blue tint so it stands apart */
.contact-info-panel {
  background:
    linear-gradient(rgba(58, 80, 166, .55), rgba(41, 59, 134, .7)),
    var(--bg-contact) right top / cover no-repeat,
    #293b86
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .14)
}

/* ---------- 3. Plain cool gray: What we do + service sections ---------- */
.services,
.service-detail-section {
  background: var(--bg-gray-3)
}

/* Home inspection "Inspection services": navy gallery blueprint.
   The white service cards sit on top; the heading turns light to stay readable. */
.inspection-services {
  border-top: 0;
  border-bottom: 0;
  background:
    linear-gradient(rgba(11, 20, 60, .28), rgba(11, 20, 60, .28)),
    var(--bg-gallery) center / cover no-repeat,
    #0f1a45
}

.inspection-services .section-heading .eyebrow {
  color: #c4cdea
}

.inspection-services .section-heading h2 {
  color: #fff
}

.inspection-services .inspection-service-grid> .inspection-service-card {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 14px 34px rgba(5, 10, 32, .35)
}

/* ---------- 4. Cool gray + faint NCB logo: About and credentials ---------- */
.inspection-credentials,
.company-intro,
#team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-gray-2) 0%, var(--bg-gray) 100%)
}

.inspection-credentials::after,
.company-intro::after,
#team::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-40px, -2vw, -12px);
  bottom: clamp(-40px, -3vw, -16px);
  width: clamp(150px, 22vw, 272px);   /* at most 2x the 136px logo, so it stays crisp enough */
  aspect-ratio: 1;
  background: var(--bg-logo) center / contain no-repeat;
  filter: grayscale(1);
  opacity: .08;
  pointer-events: none
}

/* Meet the founder: watermark on the left so it doesn't sit behind the stats */
#team::after {
  right: auto;
  left: clamp(-40px, -2vw, -12px);
  top: clamp(-30px, -2vw, -12px);
  bottom: auto
}

/* Home credentials strip is short: smaller watermark */
.intro-band~.inspection-credentials::after,
.hero~.inspection-credentials::after {
  width: clamp(110px, 14vw, 200px)
}

/* ---------- 5. Plain sections in between, so neighbours always differ ---------- */
#approach,
#community,
.work-process {
  background: #fff
}