/* Homepage narrative hierarchy: vision, promise, then visitor questions. */
.hero-with-visual .hero-copy {
  align-self: center;
}

.hero-with-visual h1 {
  max-width: 610px;
  font-size: clamp(3.25rem, 5vw, 5.8rem);
  line-height: 0.94;
  text-wrap: balance;
}

.hero-with-visual h1 span {
  display: block;
}

.hero-with-visual .hero-subhead {
  max-width: 540px;
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.story-with-questions {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: stretch;
}

.story-question-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(320px, 35vw, 430px);
  place-items: center start;
  padding: clamp(2rem, 4.4vw, 4.4rem);
  overflow: hidden;
  color: white;
  background:
    linear-gradient(135deg, rgba(16, 24, 32, 0.99), rgba(39, 70, 88, 0.96)),
    var(--graphite);
  box-shadow: 0 30px 76px rgba(16, 24, 32, 0.18);
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 48px 100%, 0 calc(100% - 48px));
}

.story-question-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 167, 189, 0.34), transparent 68%);
}

.story-question-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 0.35rem;
  background: linear-gradient(90deg, transparent, var(--storm));
}

.story-question-rotator {
  display: grid;
  width: 100%;
  align-items: center;
  min-height: 7.5em;
}

.story-question-panel .story-question {
  grid-area: 1 / 1;
  max-width: 10.5em;
  margin: 0;
  color: white;
  font-family: Archivo, Inter, sans-serif;
  font-size: clamp(2.55rem, 4vw, 4.35rem);
  font-weight: 750;
  letter-spacing: -0.058em;
  line-height: 1.01;
  text-wrap: balance;
}

.story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.35rem, 2vw, 1.5rem) 0;
}

.story-copy h2 {
  margin-bottom: 1.35rem;
  font-size: clamp(2.4rem, 4.3vw, 4.25rem);
  text-wrap: balance;
}

.story-copy p {
  max-width: 640px;
}

@media (max-width: 1080px) {
  .hero-with-visual h1 {
    font-size: clamp(3.1rem, 5.4vw, 5.1rem);
  }

  .story-question-panel .story-question {
    font-size: clamp(2.4rem, 4.1vw, 3.8rem);
  }
}

@media (max-width: 820px) {
  .story-with-questions {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .story-question-panel {
    min-height: 340px;
  }

  .story-question-rotator {
    min-height: 6.2em;
  }

  .story-copy {
    padding: 0;
  }
}

@media (max-width: 620px) {
  .hero-with-visual h1 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }

  .hero-with-visual .hero-subhead {
    font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  }

  .story-question-panel {
    min-height: 310px;
    padding: 1.75rem;
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
  }

  .story-question-panel .story-question {
    font-size: clamp(2.25rem, 10.5vw, 3.25rem);
  }

  .story-copy h2 {
    font-size: clamp(2.3rem, 11vw, 3.7rem);
  }
}