/* Only /landing/: shared viewport gradient joins the sticky navbar to the photo. */
body[data-landing-photo] { --landing-photo-scale: var(--opshub-ui-scale, 1); }
html.opshub-ui-scale--off body[data-landing-photo] { --landing-photo-scale: 1; }
body[data-landing-photo] .navbar-landing,
body[data-landing-photo] .landing-photo-scene::before {
  background-image: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #4f46e5 100%);
  background-size: calc(100vw / var(--landing-photo-scale)) calc(100vh / var(--landing-photo-scale));
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body[data-landing-photo] .navbar-landing,
body[data-landing-photo] .navbar-landing.scrolled {
  position: sticky;
  top: 0;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-landing-photo] .landing-photo-scene {
  position: relative;
  isolation: isolate;
  min-height: 700px;
  padding: 4.5rem 0;
  margin: 0;
  border: 0;
  background: #1e40af;
}
/* A wider view of the scene, blended into the existing blue at the left edge. */
.landing-hero-photo {
  position: absolute; inset: auto 0 0 auto; z-index: -3; display: block;
  width: 85%; aspect-ratio: 2; max-height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}
.landing-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%); mask-image: linear-gradient(180deg, transparent, #000 16%); }
body[data-landing-photo] .landing-photo-scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 18%, rgba(0,0,0,.45) 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 18%, rgba(0,0,0,.45) 52%, transparent 100%);
}
body[data-landing-photo] .landing-photo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(30,64,175,.65) 0%, rgba(30,64,175,.60) 40%, rgba(30,64,175,.18) 56%, transparent 70%);
}
.landing-photo-inner { position: relative; z-index: 1; }
.landing-photo-copy { width: 50%; max-width: 640px; }
@media (max-width: 991px) {
  body[data-landing-photo] .landing-photo-scene {
    display: block;
    min-height: 0;
    padding: 2.5rem 0 clamp(250px, 54vw, 440px);
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #4f46e5 100%);
    background-size: calc(100vw / var(--landing-photo-scale)) calc(100vh / var(--landing-photo-scale));
    background-attachment: fixed;
  }
  .landing-photo-copy { width: 100%; max-width: 680px; margin-inline: auto; }
  .landing-photo-copy .hero-subtitle { max-width: none; }
  .landing-hero-photo { top: auto; width: 100%; aspect-ratio: auto; height: clamp(290px, 62vw, 480px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
  .landing-hero-photo img { object-position: 100% center; -webkit-mask-image: none; mask-image: none; }
  body[data-landing-photo] .landing-photo-scene::after { display: none; }
}
@media (max-width: 575px) {
  body[data-landing-photo] .landing-photo-scene { padding-top: 2rem; padding-bottom: 245px; }
  .landing-hero-photo { height: 270px; }
  .landing-photo-copy .hero-points { justify-content: center; }
}

/* The full navigation needs desktop width; keep all links in the existing drawer. */
@media (max-width: 1399.98px) {
  body[data-landing-photo] .navbar-landing .d-lg-flex { display: none !important; }
  body[data-landing-photo] .navbar-landing .mobile-menu-btn { display: inline-flex !important; }
}