body.is-home-header-scrolled > header {
  --home-header-foreground: #FFFFFF;
  background: #07111F;
  box-shadow: 0 .35rem .9rem rgba(1, 8, 18, .16);
}

.hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  padding-inline: 0;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(2.25rem, 5vw, 3.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 18% 18%, rgba(123, 211, 214, .22), transparent 28rem),
    linear-gradient(135deg, #06101D 0%, #08182B 55%, #050A13 100%);
  transition: opacity 720ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}

@media (max-width: 900px) {
  @supports (height: 100lvh) {
    .hero {
      height: 100lvh;
      min-height: 100lvh;
    }
  }
}

.hero .background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  animation: hero-background-cycle 15s linear infinite;
  filter: saturate(.82) contrast(1.08) brightness(.78);
  transform: scale(1.02);
}

.hero .background.hero-background--delay-10 {
  animation-delay: -10s;
}

.hero .background.hero-background--delay-5 {
  animation-delay: -5s;
}

.hero video.background {
  transform: scale(1.08);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(5, 10, 19, .9) 0%, rgba(5, 10, 19, .68) 42%, rgba(5, 10, 19, .2) 100%),
    linear-gradient(180deg, rgba(5, 10, 19, .34) 0%, rgba(5, 10, 19, .1) 38%, rgba(1, 5, 14, .94) 86%, #01050E 100%);
}

.hero::after {
  opacity: .32;
  background:
    radial-gradient(circle at 1rem 1rem, rgba(255, 255, 255, .22) 0 1px, transparent 1.5px) 0 0 / 4rem 4rem;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

:root[data-theme="light"] .hero .background {
  animation-name: fade-light;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.hero-panel {
  color: white;
  background: var(--hero-overlay);
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(.75rem, 1.8vw, 1.2rem);
  text-align: left;
}

.hero-content hgroup {
  width: 100%;
}

.hero-content hgroup p {
  margin-top: 0;
}

.hero-content hgroup {
  max-width: 64rem;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.outcomes-section.section-appear,
.engagement-section.section-appear,
.capabilities-section.section-appear,
.cta-wrapper.section-appear {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.cta-wrapper.section-appear > .cta {
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(.2, .8, .2, 1), transform 180ms ease;
  will-change: opacity;
}

.outcomes-section.section-appear.is-visible .outcome-sequence-stage,
.outcomes-section.section-appear.is-visible > .section-heading,
.outcomes-section.section-appear.is-visible > .outcome-map,
.engagement-section.section-appear.is-visible > .engagement-steps,
.capabilities-section.section-appear.is-visible > .section-heading,
.capabilities-section.section-appear.is-visible > .capability-tags,
.cta-wrapper.section-appear.is-visible > .cta {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {

  .hero .background:first-of-type {
    opacity: .8;
  }

  .outcomes-section.section-appear .outcome-sequence-stage,
  .outcomes-section.section-appear > .section-heading,
  .outcomes-section.section-appear > .outcome-map,
  .engagement-section.section-appear > .engagement-steps,
  .capabilities-section.section-appear > .section-heading,
  .capabilities-section.section-appear > .capability-tags,
  .cta-wrapper.section-appear > .cta {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
    will-change: auto;
  }}

.outcomes-section,
.engagement-section,
.capabilities-section,
.cta-wrapper {
  position: relative;
  z-index: 2;
}

.challenge-section .section-heading p {
  font-style: italic;
}

.challenge-section .section-heading h2 em {
  font-style: italic;
}

.challenge-section.section-appear {
  transform: none;
}

.challenge-section {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.challenge-section .section-heading {
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 60rem;
  margin-inline: auto;
  margin-bottom: 0;
  text-align: left;
}

.challenge-section .section-heading h2,
.outcomes-section .section-heading h2,
.capabilities-section .section-heading h2 {
  font-size: var(--section-heading-size);
  font-weight: 400;
  line-height: 1.14;
}

@media (width <= 640px), (max-width: 640px) {

  .sector-card {
    min-height: min(28rem, calc(100vw - 2rem));
    gap: .26rem;
    padding: 1rem;
  }

  .sector-card::after {
    background:
      linear-gradient(90deg, rgba(1, 5, 14, .36) 0%, rgba(1, 5, 14, .08) 48%, rgba(1, 5, 14, 0) 76%);
  }

  .sector-titles {
    gap: .16rem;
  }

  .sector .hover-title {
    max-width: 24rem;
    font-size: .72rem;
    line-height: 1.18;
  }

  .sector-badge {
    width: 100%;
    max-width: 24rem;
    margin: 0;
    padding: 0;
    font-size: clamp(1.1rem, 5.7vw, 1.65rem);
    line-height: 1.08;
  }}

.supporting-statement {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 60rem;
}

.supporting-statement__card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2rem, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: clamp(18rem, 34vw, 24rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  color: #FFFFFF;
  border-radius: .75rem;
  background:
    radial-gradient(circle at top left, rgba(123, 211, 214, .16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(145, 167, 255, .12), transparent 34%),
    linear-gradient(180deg, #0A1727 0%, #06101D 100%);
  box-shadow: 0 1.2rem 2.8rem rgba(1, 8, 18, .26);
  isolation: isolate;
}

.supporting-statement__waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.supporting-statement__wave {
  position: absolute;
  right: -20%;
  bottom: -38%;
  width: 140%;
  height: 78%;
  border: 1px solid rgba(178, 251, 255, .28);
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
  transform-origin: center;
  animation: supporting-wave-drift 18s linear infinite;
}

.supporting-statement__wave:nth-child(2) {
  right: -12%;
  bottom: -46%;
  width: 132%;
  height: 86%;
  border-color: rgba(106, 138, 255, .3);
  opacity: .6;
  animation-delay: -6s;
  animation-duration: 22s;
}

.supporting-statement__wave:nth-child(3) {
  right: -28%;
  bottom: -52%;
  width: 152%;
  height: 94%;
  border-color: rgba(145, 167, 255, .24);
  opacity: .5;
  animation-delay: -12s;
  animation-duration: 26s;
}

.supporting-statement__title,
.supporting-statement__description {
  position: relative;
  z-index: 1;
}

.supporting-statement__title {
  align-self: start;
  justify-self: start;
  max-width: 24ch;
  margin: 0;
  color: #FFFFFF;
  font-size: var(--section-heading-size);
  font-weight: 400;
  line-height: 1.14;
}

.supporting-statement__description {
  grid-row: 3;
  align-self: end;
  justify-self: start;
  max-width: 42rem;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  text-align: left;
}

.hero .track-wrapper {
  margin-top: clamp(.1rem, .7vw, .45rem);
  margin-bottom: calc(clamp(2rem, 8vw, 4.5rem) * -0.35);
  opacity: .82;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.hero .track img {
  filter: brightness(0) invert(1);
}

@media (width <= 640px), (max-width: 640px) {

  .cta-wrapper {
    padding-block: 2.75rem;
    margin-block: -2.75rem;
  }

  .supporting-statement__card {
    grid-template-rows: auto auto;
    gap: 2rem;
    min-height: 0;
    padding: 1.5rem 1.25rem;
  }

  .supporting-statement__description {
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  .sector-card-action {
    top: .7rem;
    right: .7rem;
    min-height: 1.55rem;
    padding: .35rem .55rem;
    font-size: .7rem;
  }}

@media (width > 480px), (min-width: 480.02px) {

  .hero {
    align-items: flex-start;
    padding-inline: 0;
  }

  .hero .background {
    position: absolute;
    z-index: 0;
  }

  .hero-content {
    width: 100%;
  }

  .hero-panel {
    padding-inline: 6%;
  }

  .hero-content hgroup {
    width: 100%;
    max-width: 64rem;
  }

  .sector-list {
    width: 100%;
  }

  .sector {
    width: min(calc(100vw - 2rem), 60rem);
  }

  .cta-wrapper {
    padding-block: 4rem;
    margin-block: -4rem;
  }

  .cta-wrapper:hover .cta::after {
    opacity: 1;
  }}

@media (width >= 1250px), (min-width: 1250px) {
  .challenge-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .challenge-section .section-heading {
    position: static;
  }}

/* Keep full-view compositions inside the usable viewport on short screens. */
:where(.sectors, .challenge-section) {
  --full-view-gap: clamp(.75rem, 2vh, 1.5rem);
  --full-view-gap: clamp(.75rem, 2svh, 1.5rem);
  --full-view-height: calc(100vh - var(--home-header-offset, 3.2rem) - (2 * var(--full-view-gap)));
  --full-view-height: calc(100svh - var(--home-header-offset, 3.2rem) - (2 * var(--full-view-gap)));
  --full-view-height: calc(100vh - var(--home-header-offset, 3.2rem) - (2 * var(--full-view-gap)));
  --full-view-height: calc(100svh - var(--home-header-offset, 3.2rem) - (2 * var(--full-view-gap)));
}

#sectors .sector-card {
  min-height: 0;
  height: max(13rem, var(--carousel-card-height));
  aspect-ratio: auto;
  padding: clamp(1rem, 3.5vh, 2rem);
  padding: clamp(1rem, 3.5svh, 2rem);
}

#sectors .sector-badge {
  font-size: clamp(1.35rem, 5vh, 2.85rem);
  font-size: clamp(1.35rem, 5svh, 2.85rem);
}

@media (max-width: 640px) {
  #sectors .sector-card {
    min-height: 20rem;
    height: auto;
    padding: 3.5rem 1rem 1rem;
  }

  #sectors .sector-badge {
    font-size: clamp(1.1rem, 5.7vw, 1.65rem);
    line-height: 1.08;
  }}

.sectors > .sector-controls {
  margin-block: 0;
}

.challenge-section .section-heading {
  gap: clamp(.65rem, 1.8vh, 1.25rem);
  gap: clamp(.65rem, 1.8svh, 1.25rem);
}

.challenge-section .section-heading h2 {
  font-size: var(--section-heading-size);
  line-height: 1.14;
}

.challenge-section .learn-more-cta {
  align-self: center;
}

.engagement-cta__card {
  align-items: center;
  text-align: center;
}