/* Scoped header treatment and one hero scroll cue. */
.site-header .header-cta,
.site-header.is-light .header-cta {
  position: relative;
  background: #0d1423;
  color: #f4f3ef;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .105em;
  border-left: 1px solid rgba(117, 154, 255, .28);
  padding-left: clamp(30px, 2.4vw, 36px);
  transition: background-color .45s ease, border-color .45s ease;
}
.site-header .header-cta::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  background: #4c78ff;
  box-shadow: 0 0 11px rgba(76, 120, 255, .65);
  transition: background-color .45s ease, box-shadow .45s ease;
}
.site-header .header-cta::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 15px;
  width: 22px;
  height: 1px;
  background: #4c78ff;
  transform: scaleX(.35);
  transform-origin: right;
  transition: transform .55s var(--motion-ease);
}
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
  background: #152440;
  border-left-color: rgba(117, 154, 255, .55);
  transform: none;
}
.site-header .header-cta:hover::before,
.site-header .header-cta:focus-visible::before { background: #83a5ff; box-shadow: 0 0 17px rgba(86, 145, 255, .8); }
.site-header .header-cta:hover::after,
.site-header .header-cta:focus-visible::after { transform: scaleX(1); }

.hero-scroll-cue {
  position: absolute;
  z-index: 6;
  right: var(--gutter);
  bottom: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 35px;
  color: #c1efff;
  text-transform: uppercase;
  text-align: center;
  font: 500 .51rem/1.1 var(--sans);
  letter-spacing: .14em;
  opacity: .8;
  transition: opacity .6s ease, transform .6s var(--motion-ease), visibility .6s;
}
.hero-scroll-cue svg { width: 20px; height: 25px; filter: drop-shadow(0 0 4px #2d9fff) drop-shadow(0 0 8px #2457ff77); animation: cue-breathe 2.7s ease-in-out infinite; }
.hero-scroll-cue b { font: 400 .9rem/1 var(--sans); color: #77bfff; animation: cue-fall 2.7s ease-in-out infinite; }
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible { opacity: 1; color: #fff; }
.hero-scroll-cue.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
@keyframes cue-breathe { 50% { opacity: .58; transform: translateY(3px); } }
@keyframes cue-fall { 50% { opacity: .45; transform: translateY(4px); } }
@media(max-width:760px) { .hero-scroll-cue { right: var(--gutter); bottom: 150px; width: 28px; font-size: .46rem; } .hero-scroll-cue svg { width: 17px; height: 22px; } }
@media(prefers-reduced-motion:reduce) { .hero-scroll-cue, .hero-scroll-cue svg, .hero-scroll-cue b { animation: none; transition: none; } }

/* Hide header and hero guide lines while retaining their border geometry. */
.site-header { border-bottom-color: transparent; }
.site-header .brand { border-right-color: transparent; }
.site-header .header-cta,
.site-header.is-light .header-cta { border-left-color: transparent; }
.site-header .menu-toggle { border-left-color: transparent; }
.hero-grid { background-image: none; }
.hero-image-stage::before { background: none; }
.hero .capability-rail { border-top-color: transparent; }
