.page-hero.security-hero {
  background:
    radial-gradient(ellipse at 72% 42%, #7134c817, transparent 55%),
    radial-gradient(ellipse at 91% 70%, #2765de0c, transparent 50%),
    #090b15;
  color: #fff;
}

.security-hero .breadcrumbs,
.security-hero .breadcrumbs a { color: #c3bdd5; }
.page-hero.security-hero .eyebrow { color: #d6b3f4; }
.security-hero .lead { --copy-color: #ded8eb; color: #ded8eb; }
.page-hero.security-hero .tag-row > span { color: #ded4ee; border-color: #685775; }
.page-hero.security-hero h1 {
  font-size: clamp(43px, 4.8vw, 70px);
  letter-spacing: -3.6px;
  line-height: 1.09;
}
.page-hero.security-hero h1 em { font-style: normal; }

.security-hero .security-visual {
  position: relative;
  align-self: stretch;
  min-height: 490px;
  background: transparent;
  border: 0;
  overflow: visible;
}
.security-hero .cosmo-scene {
  inset: 0 -7% 0 -7%;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* The security scene has its own selectors and never mounts the home sculpture. */
.security-hero .security-scene {
  position: absolute;
  inset: 0 -7%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.security-scene canvas,
.security-scene [data-security-poster] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 240ms ease;
}
.security-scene canvas { opacity: 0; }
.security-scene [data-security-poster] {
  opacity: 1;
  /* Match the camera's minimum world width as the viewport gets narrower. */
  width: 141%;
  max-width: none;
  left: -20.5%;
}
.security-scene-ready .security-scene canvas { opacity: 1; }
.security-scene-ready .security-scene [data-security-poster] { opacity: 0; }
.security-scene-fallback .security-scene canvas { opacity: 0; }
.security-scene-fallback .security-scene [data-security-poster] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .security-scene canvas,
  .security-scene [data-security-poster] { transition: none; }
}

@media (max-width: 700px) {
  .security-hero .security-visual { min-height: 0; aspect-ratio: 1.2; }
  .security-scene [data-security-poster] { width: 133.3%; left: -16.65%; }
  .page-hero.security-hero h1 { font-size: 48px; letter-spacing: -2.5px; }
}