/* Home-page-only static editorial hero. */
.home-page .hero--risk-control {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
  isolation: isolate;
}

.hero--risk-control::before,
.hero--risk-control::after {
  display: none;
}

.hero-risk-frame {
  position: relative;
  min-height: inherit;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-risk-media,
.hero-risk-image,
.hero-risk-scrim {
  position: absolute;
  inset: 0;
}

.hero-risk-media {
  z-index: 0;
  overflow: hidden;
  background: #d8d0c3;
}

.hero-risk-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.98) contrast(1.02) saturate(0.98);
}

.hero-risk-scrim {
  z-index: 1;
  background: linear-gradient(90deg, rgb(8 29 54 / 86%) 0%, rgb(8 29 54 / 72%) 24%, rgb(8 29 54 / 40%) 43%, rgb(8 29 54 / 10%) 58%, transparent 70%);
  pointer-events: none;
}

.hero-safety-tape {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.safety-tape-group {
  position: absolute;
  inset: 0;
  opacity: var(--tape-scroll-opacity, 0.84);
  transform: translate3d(var(--tape-scroll-x, 0), var(--tape-scroll-y, 0), 0);
  will-change: transform, opacity;
}

.safety-tape-strip {
  position: absolute;
  display: block;
  width: var(--tape-length);
  height: var(--tape-width, 36px);
  background-color: #d8b945;
  background-image:
    linear-gradient(to bottom, rgb(255 248 207 / 22%) 0, rgb(255 255 255 / 7%) 16%, transparent 43%, rgb(23 40 58 / 9%) 82%, rgb(23 40 58 / 17%) 100%),
    repeating-linear-gradient(122deg, transparent 0 14px, rgb(23 40 58 / 88%) 14px 22px, transparent 22px 38px),
    repeating-linear-gradient(92deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 11px);
  box-shadow: inset 0 1px rgb(255 255 255 / 28%), inset 0 -1px rgb(23 40 58 / 26%);
  clip-path: polygon(0 6%, 8% 3%, 18% 5%, 29% 2%, 41% 4%, 54% 1%, 67% 4%, 80% 2%, 91% 5%, 100% 2%, 100% 95%, 89% 98%, 77% 96%, 63% 99%, 49% 96%, 35% 100%, 21% 97%, 9% 99%, 0 95%);
  filter: drop-shadow(0 1px 1px rgb(7 22 38 / 24%));
  opacity: var(--strip-opacity, 0.96);
  transform: translate(-50%, -50%) translate3d(var(--tape-hover-x, 0), var(--tape-hover-y, 0), 0) rotate(calc(var(--tape-angle) + var(--tape-hover-rotate, 0deg))) skewX(var(--tape-skew, 0deg));
  transform-origin: center;
  transition: transform 460ms cubic-bezier(0.22, 0.72, 0.24, 1);
}

.safety-tape-strip::before,
.safety-tape-strip::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.safety-tape-strip::before {
  background: linear-gradient(100deg, transparent 0 24%, rgb(255 248 207 / 13%) 35%, transparent 47% 68%, rgb(255 255 255 / 8%) 76%, transparent 86%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.safety-tape-strip::after {
  background: repeating-linear-gradient(96deg, transparent 0 86px, rgb(23 40 58 / 7%) 88px 90px, transparent 92px 174px);
  opacity: 0.7;
}

.tape-strip--left-a,
.tape-strip--left-b {
  --tape-length: max(1100px, 155vh);
  left: -4%;
  top: 34%;
}

.tape-strip--left-a {
  --tape-angle: 76deg;
  --tape-skew: 0.2deg;
  --tape-width: 36px;
  z-index: 1;
  --strip-opacity: 0.91;
}

.tape-strip--left-b {
  --tape-angle: -76deg;
  --tape-skew: -0.18deg;
  --tape-width: 34px;
  z-index: 2;
  filter: drop-shadow(0 2px 1px rgb(7 22 38 / 27%));
}

.tape-strip--right-c,
.tape-strip--right-d {
  left: 94%;
  top: 82%;
}

.tape-strip--right-c {
  --tape-angle: -68deg;
  --tape-length: max(920px, 68vw, 115vh);
  --tape-width: 40px;
  --tape-skew: -0.15deg;
  --strip-opacity: 0.94;
  z-index: 1;
}

.tape-strip--right-d {
  --tape-angle: -35deg;
  --tape-length: max(1080px, 78vw, 125vh);
  --tape-width: 37px;
  --tape-skew: 0.2deg;
  z-index: 2;
  background-color: #ddbe47;
  filter: drop-shadow(0 2px 2px rgb(7 22 38 / 28%));
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .hero--risk-control.is-intro-complete:hover .tape-group--left .safety-tape-strip {
    --tape-hover-x: 4px;
    --tape-hover-y: -3px;
    --tape-hover-rotate: 0.7deg;
  }

  .hero--risk-control.is-intro-complete:hover .tape-group--right .safety-tape-strip {
    --tape-hover-x: -6px;
    --tape-hover-y: 4px;
    --tape-hover-rotate: -0.6deg;
  }
}

.hero-risk-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 112px 6vw clamp(70px, 10vh, 112px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.hero--risk-control .hero-copy {
  width: min(46vw, 530px);
  max-width: 530px;
  min-height: 0;
  padding: 0;
  align-items: flex-start;
  justify-content: flex-end;
}

.hero--risk-control h1 {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--off-white);
  font-size: clamp(52px, 5.4vw, 80px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.88;
  text-align: left;
}

.hero--risk-control .hero-title-line {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  animation: none;
}

.hero--risk-control .hero-title-line--accent {
  margin-top: 0.08em;
  color: var(--red);
}

.hero--risk-control .hero-title-line--knowledge,
.hero--risk-control .hero-title-line--risk {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero--risk-control .hero-title-line--knowledge {
  -webkit-text-stroke: 1px rgb(245 239 228 / 68%);
}

.hero--risk-control .hero-title-line--risk {
  opacity: 0;
  -webkit-text-stroke: 1px rgb(227 27 35 / 78%);
  animation: hero-risk-outline-in 160ms 380ms ease-out forwards;
}

.hero--risk-control.is-intro-complete .hero-title-line--knowledge,
.hero--risk-control.is-intro-complete .hero-title-line--risk {
  -webkit-text-stroke: 0;
}

.hero--risk-control .hero-title-line--knowledge::before,
.hero--risk-control .hero-title-line--risk::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: attr(data-text);
  pointer-events: none;
  -webkit-text-stroke: 0;
}

.hero--risk-control .hero-title-line--knowledge::before {
  color: var(--off-white);
  -webkit-text-fill-color: var(--off-white);
  clip-path: inset(100% 0 0);
  animation: hero-knowledge-build 650ms 200ms cubic-bezier(0.3, 0.72, 0.22, 1) forwards;
}

.hero--risk-control .hero-title-line--risk::before {
  color: var(--red);
  -webkit-text-fill-color: var(--red);
  clip-path: inset(0 100% 0 0);
  animation: hero-risk-resolve 500ms 580ms cubic-bezier(0.28, 0.72, 0.22, 1) forwards;
}

.hero--risk-control .hero-title-line--risk::after {
  position: absolute;
  inset: -4% 0 -2%;
  z-index: 2;
  width: 100%;
  border-left: 1px solid var(--red);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  animation: hero-risk-inspection 560ms 560ms cubic-bezier(0.3, 0.7, 0.25, 1) forwards;
}

.hero-construction-guides {
  position: absolute;
  top: -0.08em;
  left: -12px;
  z-index: 0;
  width: min(calc(100% + 24px), 550px);
  height: 0.98em;
  display: block;
  opacity: 0;
  pointer-events: none;
  animation: hero-guides-in-out 1050ms 80ms ease-out forwards;
}

.hero-construction-guides i {
  position: absolute;
  display: block;
  background: rgb(245 239 228 / 30%);
}

.hero-construction-guides i:nth-child(1) {
  top: 4%;
  left: 0;
  width: 86%;
  height: 1px;
  transform: rotate(-0.18deg);
}

.hero-construction-guides i:nth-child(2) {
  top: 50%;
  left: 5%;
  width: 73%;
  height: 1px;
  transform: rotate(0.12deg);
}

.hero-construction-guides i:nth-child(3) {
  right: 7%;
  bottom: 2%;
  width: 81%;
  height: 1px;
  transform: rotate(-0.1deg);
}

.hero-construction-guides i:nth-child(4) {
  top: -5%;
  left: 2%;
  width: 1px;
  height: 27%;
  background: rgb(227 27 35 / 66%);
  transform: rotate(1deg);
}

.hero-risk-scrim::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 42%, rgb(8 29 54 / 14%) 54%, rgb(8 29 54 / 7%) 65%, transparent 74%);
  content: "";
  pointer-events: none;
  animation: hero-controlled-side-open 1350ms 40ms ease-out forwards;
}

.hero--risk-control .hero-risk-image {
  transform: scale(1.012);
  animation: hero-background-settle 1400ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

@keyframes hero-knowledge-build {
  from {
    clip-path: inset(100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes hero-risk-outline-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-risk-resolve {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes hero-risk-inspection {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  10%,
  82% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes hero-guides-in-out {
  0% {
    opacity: 0;
  }

  12%,
  58% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hero-supporting-content-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-background-settle {
  from {
    transform: scale(1.012);
  }

  to {
    transform: scale(1);
  }
}

@keyframes hero-controlled-side-open {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.hero--risk-control .hero-brandline {
  max-width: 470px;
  margin: 20px 0 0;
  color: var(--off-white);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-align: left;
  animation: none;
}

.hero--risk-control .hero-description {
  max-width: 455px;
  margin: 9px 0 0;
  color: rgb(245 239 228 / 84%);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.58;
  text-align: left;
  animation: none;
}

.hero--risk-control .hero-actions {
  margin-top: 20px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  animation: none;
}

.hero--risk-control .button--primary {
  color: var(--white);
  background: var(--red);
}

.hero--risk-control .hero-secondary-link {
  align-self: center;
  color: var(--off-white);
  border-color: rgb(245 239 228 / 58%);
}

.hero--risk-control .hero-secondary-link:hover,
.hero--risk-control .hero-secondary-link:focus-visible {
  color: var(--white);
  border-color: var(--red);
}

.hero--risk-control .hero-brandline,
.hero--risk-control .hero-description,
.hero--risk-control .hero-actions {
  opacity: 0;
  transform: translateY(10px);
  animation: hero-supporting-content-in 420ms 900ms ease-out forwards;
}

@media (max-width: 1024px) {
  .hero-risk-image {
    object-position: 56% center;
  }

  .hero-risk-inner {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .hero--risk-control .hero-copy {
    width: min(52vw, 500px);
  }

  .hero--risk-control h1 {
    font-size: clamp(48px, 6.4vw, 66px);
  }
}

@media (max-width: 640px) {
  .home-page .hero--risk-control {
    min-height: 88svh;
  }

  .hero-risk-image {
    object-position: 65% center;
  }

  .hero-risk-scrim {
    background: linear-gradient(90deg, rgb(8 29 54 / 86%) 0%, rgb(8 29 54 / 72%) 45%, rgb(8 29 54 / 32%) 76%, transparent 100%);
  }

  .hero-risk-inner {
    min-height: 88svh;
    padding: 92px 20px clamp(44px, 8vh, 68px);
  }

  .hero--risk-control .hero-copy {
    width: min(88%, 340px);
    max-width: 340px;
  }

  .hero--risk-control h1 {
    font-size: clamp(39px, 11.8vw, 50px);
    line-height: 0.9;
  }

  .hero--risk-control .hero-brandline {
    max-width: 315px;
    margin-top: 16px;
    font-size: 9px;
  }

  .hero--risk-control .hero-description {
    max-width: 315px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.52;
  }

  .hero--risk-control .hero-actions {
    margin-top: 16px;
    gap: 12px;
  }

  .hero--risk-control .hero-actions .button {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .hero--risk-control .hero-title-line--knowledge::before {
    animation-duration: 560ms;
    animation-delay: 120ms;
  }

  .hero--risk-control .hero-title-line--risk {
    animation-duration: 130ms;
    animation-delay: 280ms;
  }

  .hero--risk-control .hero-title-line--risk::before {
    animation-duration: 430ms;
    animation-delay: 420ms;
  }

  .hero--risk-control .hero-title-line--risk::after {
    animation-duration: 470ms;
    animation-delay: 400ms;
  }

  .hero-construction-guides {
    animation-duration: 820ms;
    animation-delay: 50ms;
  }

  .hero-construction-guides i:nth-child(2) {
    display: none;
  }

  .hero--risk-control .hero-brandline,
  .hero--risk-control .hero-description,
  .hero--risk-control .hero-actions {
    transform: translateY(7px);
    animation-duration: 340ms;
    animation-delay: 720ms;
  }

  .hero--risk-control .hero-risk-image {
    animation-duration: 1150ms;
  }

  .hero-risk-scrim::after {
    animation-duration: 1050ms;
  }

  .tape-group--right {
    display: none;
  }

  .tape-strip--left-a,
  .tape-strip--left-b {
    --tape-length: max(980px, 155vh);
    --tape-width: 22px;
    left: -95px;
    top: 150px;
  }

  .tape-strip--left-a {
    --tape-angle: 77deg;
  }

  .tape-strip--left-b {
    --tape-angle: -76deg;
    --tape-width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-safety-tape {
    display: none;
  }

  .hero--risk-control .hero-title-line--knowledge,
  .hero--risk-control .hero-title-line--risk {
    color: inherit;
    opacity: 1;
    -webkit-text-fill-color: currentcolor;
    -webkit-text-stroke: 0;
    animation: none;
  }

  .hero--risk-control .hero-title-line--risk {
    color: var(--red);
  }

  .hero--risk-control .hero-title-line--knowledge::before,
  .hero--risk-control .hero-title-line--risk::before,
  .hero--risk-control .hero-title-line--risk::after,
  .hero-construction-guides,
  .hero-risk-scrim::after {
    display: none;
    animation: none;
  }

  .hero--risk-control .hero-risk-image,
  .hero--risk-control .hero-brandline,
  .hero--risk-control .hero-description,
  .hero--risk-control .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 360px) {
  .hero--risk-control .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
