/* V20 refinement: keep all existing content, video, interactions and section hierarchy. */
:root {
  --paper: #f3f5f5;
  --mist: #ecf1f3;
  --offwhite: #f3f5f5;
  --line: #d8dee2;
  --muted: #667382;
}
body { background: var(--paper); }
/* Light zones now use cool, mineral off-whites, not #fff. The navy services and
   wildlife background remain completely unchanged. */
body .intro.section { background:#f2f4f5; }
body .workplaces.section { background:#eaf0f3; }
body .approach.section { background:#f3f5f6; }
body .contact.section { background:#edf1f3; }
/* Navigation: preserve the approved white-orca inverse mark itself, but scale
   down its existing navy square so the wordmark leads the composition. */
body:has(.hero--v17) .site-header .header-brand-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 7px;
}
body:has(.hero--v17) .site-header .header-brand { gap: 10px; }
body:has(.hero--v17) .site-header .brand-wordmark {
  font-size:clamp(1.85rem,2.2vw,2.08rem);
  letter-spacing:-.045em;
}
body:has(.hero--v17) .site-header .nav-cta {
  border:1px solid transparent;
  box-shadow:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body:has(.hero--v17) .site-header .nav-cta:focus-visible {
  outline:3px solid #90cff5;
  outline-offset:3px;
}
/* Keep the shared approved layout and body CTA untouched. The two preview
   variants below differ ONLY in this navbar CTA treatment. */
@media (max-width:760px) {
  body:has(.hero--v17) .site-header .header-brand-icon {
    width:33px;height:33px;flex-basis:33px;
  }
  body:has(.hero--v17) .site-header .brand-wordmark {font-size:1.86rem;}
}

/* OPTION B: quiet glass outline on the video, gently illuminated on hover. */
body:has(.hero--v17) .site-header .nav-cta,
body:has(.hero--v17) .site-header:not(.is-scrolled) .nav-cta {
  color:#f6fbff;
  background:rgba(235,246,255,.09);
  border-color:rgba(236,247,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
}
body:has(.hero--v17) .site-header .nav-cta:hover,
body:has(.hero--v17) .site-header .nav-cta:focus-visible {
  color:#fff;
  background:rgba(235,246,255,.19);
  border-color:rgba(255,255,255,.75);
}
body:has(.hero--v17) .site-header.is-scrolled .nav-cta {
  color:#f6fbff;
  background:rgba(233,243,253,.15);
  border-color:rgba(236,247,255,.45);
}
@media (max-width:760px) {
  /* On the open, solid mobile menu an opaque CTA reads more clearly. */
  body:has(.hero--v17) .site-header .site-nav .nav-cta,
  body:has(.hero--v17) .site-header:not(.is-scrolled) .site-nav .nav-cta,
  body:has(.hero--v17) .site-header.is-scrolled .site-nav .nav-cta {
    background:#e5edf1;
    border-color:#e5edf1;
    color:#082b49;
  }
}