.heroStack {
  position: relative;
}

.heroSection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 120rem;
  height: clamp(39.0625rem, calc(1000 / 1920 * 100vw), 62.5rem);
  margin-inline: auto;
  background: var(--color-white);
}

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

.heroStripe {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroStripe img {
  display: block;
  max-width: none;
}

.heroStripePrimary {
  left: calc(603.68 / 1920 * 100%);
  top: calc(-159 / 1000 * 100%);
  width: calc(1637.955 / 1920 * 100%);
  height: calc(1437 / 1000 * 100%);
}

.heroStripePrimary img {
  width: calc(1834.788 / 1637.955 * 100%);
  height: calc(349.553 / 1437 * 100%);
  transform: rotate(-39.51deg);
}

.heroStripeSecondary {
  left: calc(1034.15 / 1920 * 100%);
  top: calc(170.72 / 1000 * 100%);
  width: calc(1151.867 / 1920 * 100%);
  height: calc(1039.209 / 1000 * 100%);
}

.heroStripeSecondary img {
  width: calc(1289.615 / 1151.867 * 100%);
  height: calc(264.408 / 1039.209 * 100%);
  transform: rotate(-40.54deg);
}

.heroVisualStage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.heroVisual {
  position: absolute;
  left: calc(671 / 1920 * 100%);
  top: calc(148 / 1000 * 100%);
  z-index: 2;
  width: calc(646 / 1920 * 100%);
  height: calc(852 / 1000 * 100%);
  overflow: hidden;
  pointer-events: none;
}

.heroStudent {
  position: absolute;
  top: -3.38%;
  left: -61.65%;
  width: 217.21%;
  height: 123.42%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.heroContainer.container {
  position: absolute;
  left: 50%;
  top: calc(80 / 1000 * 100%);
  z-index: 3;
  display: flex;
  align-items: stretch;
  width: min(calc(100% - (var(--container-pad) * 2)), var(--container-max));
  max-width: var(--container-max);
  height: calc(840 / 1000 * 100%);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.heroContent {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(600 / 1720 * 100%);
  max-width: 37.5rem;
  height: 100%;
  pointer-events: auto;
}

.heroBrandCard {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(289 / 600 * 100%);
  max-width: 18.0625rem;
  height: calc(111 / 840 * 100%);
  max-height: 6.9375rem;
  padding: 10px;
  border-radius: 4.383px;
  background: var(--color-white);
  box-shadow: 0 6.574px 74.507px rgba(0, 0, 0, 0.13),
    0 2.747px 31.127px rgba(0, 0, 0, 0.09),
    0 1.468px 16.642px rgba(0, 0, 0, 0.08),
    0 0.823px 9.329px rgba(0, 0, 0, 0.06),
    0 0.437px 4.955px rgba(0, 0, 0, 0.05),
    0 0.182px 2.062px rgba(0, 0, 0, 0.04);
}

.heroBrandLogoFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 184 / 42;
  overflow: hidden;
}

.heroBrandLogo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.heroCopy {
  display: flex;
  flex-direction: column;
  gap: calc(40 / 1920 * 100vw);
  margin-top: calc(60 / 1920 * 100vw);
}

.heroCopyLead {
  display: flex;
  flex-direction: column;
}

.heroTitle {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(2.375rem, calc(60 / 1920 * 100vw), 3.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -1.2px;
}

.heroTitleStrong {
  font-weight: 700;
}

.heroCampus {
  margin-top: calc(28 / 1920 * 100vw);
  color: var(--color-black);
  font-size: clamp(1.5rem, calc(40 / 1920 * 100vw), 2.5rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.8px;
}

.heroCampusStrong {
  font-weight: 700;
}

.heroDescription {
  max-width: 37.5rem;
  color: var(--color-black);
  font-size: clamp(1.0625rem, calc(26 / 1920 * 100vw), 1.625rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.52px;
}

.heroButtonWrap {
  margin-top: auto;
}

.heroButtonWrap .primaryButton {
  min-height: calc(64 / 1920 * 100vw);
  padding: 0.75rem 1rem;
  border-radius: 1rem;
}

.heroGlassCard {
  position: absolute;
  border: 0.542px solid var(--color-border-glass);
  border-radius: 20px;
  backdrop-filter: blur(11.378px);
  -webkit-backdrop-filter: blur(11.378px);
  background-image: linear-gradient(
    157.35deg,
    rgba(58, 108, 220, 0.5) 6.88%,
    rgba(0, 48, 255, 0) 90.78%
  );
}

.heroGlassStat {
  display: flex;
  flex-direction: column;
  top: calc(55 / 1000 * 100%);
  left: calc(1003 / 1920 * 100%);
  z-index: 1;
  width: calc(420 / 1920 * 100%);
  height: calc(249 / 1000 * 100%);
  padding: calc(26 / 1920 * 100vw) calc(16 / 1920 * 100vw) calc(16 / 1920 * 100vw)
    calc(126 / 1920 * 100vw);
}

.heroGlassExplore {
  display: flex;
  align-items: flex-start;
  top: calc(699 / 1000 * 100%);
  left: calc(455 / 1920 * 100%);
  z-index: 1;
  width: calc(288 / 1920 * 100%);
  height: calc(211 / 1000 * 100%);
  padding: calc(28 / 1920 * 100vw) calc(20 / 1920 * 100vw) calc(20 / 1920 * 100vw)
    calc(32 / 1920 * 100vw);
}

.heroStatValue {
  background-image: linear-gradient(-88.83deg, #010767 25.03%, #214ab1 99.48%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(2.75rem, calc(80 / 1920 * 100vw), 5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -1.6px;
}

.heroStatLabel {
  max-width: 14.6875rem;
  color: var(--color-ink);
  font-size: clamp(1.125rem, calc(28 / 1920 * 100vw), 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.56px;
}

.heroExploreText {
  color: var(--color-ink);
  font-size: clamp(1.375rem, calc(36 / 1920 * 100vw), 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.72px;
}

.heroFormPlaceholder {
  position: absolute;
  top: calc(185.5 / 1000 * 100%);
  right: var(--container-pad);
  z-index: 5;
  width: clamp(12.375rem, calc(377 / 1920 * 100vw), 23.5625rem);
  max-width: 23.5625rem;
  height: clamp(31.25rem, calc(629 / 1920 * 100vw), 39.3125rem);
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--color-white);
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.heroFormPlaceholder .npf_wgts,
.heroFormPlaceholder iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media screen and (max-width: 1199px) {
  .heroSection {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    grid-template-areas: "copy visual";
    column-gap: clamp(1rem, 2vw, 1.5rem);
    align-items: end;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-top: 1.5rem;
  }

  .heroStripes {
    grid-column: 1 / -1;
    grid-row: 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    opacity: 0.28;
    pointer-events: none;
  }

  .heroContainer.container {
    grid-area: copy;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0 0 0 var(--container-pad);
    padding: 0 0 1rem;
    transform: none;
    pointer-events: auto;
  }

  .heroContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .heroBrandCard {
    width: min(16rem, 70%);
    height: 5.5rem;
    max-width: 16rem;
    max-height: none;
  }

  .heroCopy {
    margin-top: 1.25rem;
    gap: 0.75rem;
  }

  .heroTitle,
  .heroCampus,
  .heroDescription {
    max-width: none;
  }

  .heroTitle {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  }

  .heroCampus {
    margin-top: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  }

  .heroDescription {
    font-size: clamp(0.9375rem, 1.8vw, 1.25rem);
  }

  .heroButtonWrap {
    margin-top: 1.25rem;
  }

  .heroVisualStage {
    grid-area: visual;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 2;
    width: 100%;
    max-width: 24rem;
    height: clamp(25rem, 40vw, 30rem);
    margin: 0 clamp(1rem, 2vw, 1.5rem) 0 0;
    overflow: visible;
    justify-self: end;
  }

  .heroVisual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .heroStudent {
    top: 0;
    left: auto;
    right: -9%;
    width: auto;
    height: 100%;
    transform: none;
    object-fit: contain;
    object-position: right bottom;
  }

  .heroGlassStat,
  .heroGlassExplore {
    position: absolute;
  }

  .heroGlassStat {
    top: 8%;
    left: auto;
    right: 3%;
    z-index: 1;
    width: min(64%, 11rem);
    height: auto;
    min-height: 0;
    padding: 0.6875rem 0.8125rem;
  }

  .heroGlassExplore {
    top: auto;
    left: -18%;
    bottom: 16%;
    z-index: 1;
    width: min(56%, 10.5rem);
    height: auto;
    min-height: 0;
    padding: 0.75rem 0.875rem;
    opacity: 1;
  }

  .heroStatValue {
    font-size: clamp(2.25rem, 4vw, 3rem);
    letter-spacing: -0.06rem;
  }

  .heroStatLabel,
  .heroExploreText {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    line-height: 1.2;
  }

  .heroFormPlaceholder {
    position: static;
    top: auto;
    right: auto;
    display: block;
    width: min(calc(100% - 2.5rem), 23.5625rem);
    max-width: 100%;
    height: 31.25rem;
    margin: 1.75rem auto 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .heroSection {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.88fr);
  }

  .heroVisualStage {
    max-width: 21.5rem;
    height: 24rem;
    margin-right: 1rem;
  }

  .heroStudent {
    right: -8%;
  }

  .heroGlassStat {
    width: min(62%, 10rem);
  }

  .heroGlassExplore {
    left: -16%;
    bottom: 16%;
    width: min(54%, 9.5rem);
  }
}

@media screen and (max-width: 767px) {
  .heroSection {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(650 / 440 * 100vw + 2.5rem);
    max-height: none;
    padding: 1.5rem 1.5rem 0;
    overflow: hidden;
    background: var(--color-white);
  }

  .heroSection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-white)
      url("../assets/images/hero-banner-mobile.webp") center bottom / 100% auto
      no-repeat;
    pointer-events: none;
  }

  .heroStripes,
  .heroVisualStage {
    display: none;
  }

  .heroContainer.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    pointer-events: auto;
  }

  .heroContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .heroBrandCard {
    width: 12.6875rem;
    height: 3.875rem;
    max-width: none;
    max-height: none;
    padding: 0.625rem;
    border-radius: 0.25rem;
  }

  .heroBrandLogoFrame {
    width: 11.25rem;
    height: 2.625rem;
    aspect-ratio: auto;
  }

  .heroCopy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 0;
  }

  .heroCopyLead {
    gap: 0.875rem;
  }

  .heroTitle {
    font-size: 2.25rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: -0.045rem;
  }

  .heroTitleStrong {
    font-weight: 700;
    font-style: italic;
  }

  .heroCampus {
    margin-top: 0;
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.0375rem;
  }

  .heroCampusStrong {
    font-weight: 700;
  }

  .heroDescription {
    position: relative;
    z-index: 2;
    max-width: 20.5rem;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.0225rem;
  }

  .heroButtonWrap {
    display: none;
  }

  .heroFormPlaceholder {
    width: min(calc(100% - 2rem), 23.5625rem);
    margin: 1.5rem auto 2rem;
  }
}

@media screen and (max-width: 580px) {
  .heroSection {
    min-height: calc(650 / 440 * 100vw + 4.5rem);
    padding: 1.25rem 1.25rem 0;
  }

  .heroBrandCard {
    width: 11.5rem;
    height: 3.625rem;
  }

  .heroBrandLogoFrame {
    width: 10.25rem;
    height: 2.375rem;
  }

  .heroTitle {
    font-size: clamp(1.875rem, 8.18vw, 2.25rem);
  }

  .heroCampus {
    font-size: clamp(1.5rem, 6.82vw, 1.875rem);
  }

  .heroDescription {
    font-size: clamp(1rem, 4.09vw, 1.125rem);
  }
}

@media screen and (max-width: 450px) {
  .heroSection {
    min-height: calc(650 / 440 * 100vw + 5.75rem);
  }

  .heroCopy {
    gap: 0.75rem;
  }

  .heroDescription {
    max-width: 18.75rem;
    font-size: 1rem;
  }

  .heroFormPlaceholder {
    width: calc(100% - 2rem);
  }
}