/* HOME brand hero. Header and subsequent sections keep their existing styles. */
.external-home .ext-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(700px, 76vh, 760px);
  padding: 100px 7vw;
  color: #f6f5f2;
  background: radial-gradient(ellipse at 64% 0%, #21364e 0%, #102337 36%, #091a2a 70%, #081725 100%);
}

.external-home .ext-hero-copy {
  position: relative;
  z-index: 1;
  width: 62vw;
  max-width: 1040px;
}

.external-home .ext-hero h1 {
  margin: 0;
  color: #f6f5f2;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(46px, 4.2vw, 72px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.045em;
  word-break: keep-all;
}

.external-home .ext-hero h1 span {
  display: block;
}

.external-home .ext-hero-lead {
  max-width: 720px;
  margin: 38px 0 0;
  padding-top: 29px;
  position: relative;
  color: #c3cdd7;
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.external-home .ext-hero-lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: #8293a6;
}

.external-home .ext-hero-visual {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  pointer-events: none;
}

@media (min-width: 981px) {
  .external-home .ext-hero h1 span { white-space: nowrap; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .external-home .ext-hero {
    min-height: 600px;
    padding: 88px 7vw;
  }
  .external-home .ext-hero-copy { width: 100%; max-width: 740px; }
  .external-home .ext-hero h1 { font-size: clamp(36px, 4.6vw, 46px); }
  .external-home .ext-hero-visual { right: -8%; width: 36%; opacity: .55; }
  .external-home .ext-hero-lead { max-width: 570px; font-size: 17px; }
  .external-home .ext-hero-lead-break { display: none; }
}

@media (max-width: 640px) {
  .external-home .ext-hero {
    min-height: 520px;
    padding: 66px 6vw 100px;
    align-items: flex-start;
  }
  .external-home .ext-hero-copy { width: 100%; }
  .external-home .ext-hero h1 {
    max-width: 490px;
    font-size: clamp(30px, 8.1vw, 42px);
    line-height: 1.55;
    letter-spacing: -.055em;
  }
  .external-home .ext-hero-lead {
    max-width: 460px;
    margin-top: 28px;
    padding-top: 23px;
    font-size: 16px;
    line-height: 1.85;
  }
  .external-home .ext-hero-lead-break { display: none; }
  .external-home .ext-hero-visual {
    top: auto;
    right: -18%;
    bottom: -150px;
    width: 68%;
    height: 360px;
    opacity: .38;
  }
}