.site-main {
  background: #d8e6f1;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--navy);
  background: #d8e6f1;
}

.hero__background,
.hero__background img,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__background {
  z-index: -3;
  opacity: 0;
  will-change: opacity;
}

.hero__background img {
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.025);
  filter: brightness(1.04) saturate(0.94);
  will-change: transform, filter;
}

.hero__shade {
  z-index: -2;
  top: auto;
  height: 40.4%;
  background: linear-gradient(to bottom,
      rgba(28, 42, 84, 0),
      rgba(28, 42, 84, 0.8));
  pointer-events: none;
  opacity: 0;
}

.hero__top {
  position: absolute;
  top: clamp(108px, 15.625vh, 120px);
  left: 50%;
  width: min(440px, calc(100% - 40px));
  text-align: center;
  transform: translateX(-50%);
}

.hero__announcement {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--magenta);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.036em;
}

.hero__country {
  display: flex;
  justify-content: center;
  gap: 1.6em;
  margin: 17px 0 0;
  font-size: 16px;
  font-weight: 450;
  white-space: nowrap;
}

.hero__title {
  display: grid;
  justify-content: center;
  gap: 0;
  margin: 3px 0 0;
  font-family: "Noto Serif KR", serif;
  font-size: 47px;
  font-weight: 500;
  line-height: 1.3;
}

.hero__title .intro-word {
  display: flex;
  justify-content: center;
  gap: 0.6em;
}

.hero__title .intro-char {
  display: block;
}

.hero__opening {
  position: absolute;
  z-index: 2;
  top: 110px;
  right: max(calc((100% - 1300px) / 2), 40px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--navy);
  text-align: center;
}

.hero__opening strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.hero__opening span {
  margin-top: 3px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.032em;
}

.hero__bottom {
  position: absolute;
  right: 20px;
  bottom: 63px;
  left: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.hero__future {
  position: relative;
  z-index: 2;
  margin: 0 0 -17px;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.hero__script {
  /* display: block; */
  width: min(630px, 62vw);
  height: auto;
}

.hero__script svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__script path,
.hero__script polygon,
.hero__script rect {
  fill: transparent;
  stroke: #fff;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transform: translateY(3px);
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.hero__brand {
  width: 158px;
  margin-top: -2px;
}

.hero__rental-badge {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 20px;
  border-radius: 16px 16px 0 0;
  background: #71593d;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.96);
  will-change: opacity, transform;
}

.hero__description {
  margin: 17px 0 0;
  color: #90b0c0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.032em;
}

/* The hero resolves as one continuous sequence instead of a set of large blocks. */
.home-page .hero__opening,
.home-page .hero__announcement,
.home-page .hero__country,
.home-page .hero__brand,
.home-page .hero__description {
  opacity: 0;
}

.home-page .hero__title .intro-word {
  opacity: 0;
  color: rgba(28, 42, 84, 0.18);
  transform: translate3d(0, 8px, 0);
  will-change: opacity, color, transform;
}

.home-page .hero__title .intro-char {
  opacity: 1;
  transform: none;
}

.intro-char {
  display: inline-block;
}

.intro-char--space {
  width: 0.28em;
}

.home-page .hero__opening {
  transform: translateY(-4px) scale(0.99);
  will-change: opacity, transform;
}

.home-page .hero__future {
  opacity: 1;
  transform: none;
}

.home-page .hero__future .intro-char {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}

.home-page .hero__announcement .intro-line,
.home-page .hero__country .intro-char,
.home-page .hero__description span,
.home-page .hero__opening .intro-piece {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  will-change: opacity, transform, filter;
}

.home-page .hero__announcement .intro-line,
.home-page .hero__description span {
  clip-path: inset(0 0 100% 0);
  will-change: opacity, transform, clip-path;
}

.home-page .hero__announcement,
.home-page .hero__country,
.home-page .hero__brand,
.home-page .hero__description {
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}

.home-page .hero__script {
  will-change: opacity;
}

.home-page .hero__script path,
.home-page .hero__script polygon,
.home-page .hero__script rect {
  will-change: opacity, stroke-dashoffset, transform;
}

.intro-ready .home-page .hero__background {
  animation: intro-background 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s forwards;
}

.intro-ready .home-page .hero__background img {
  animation: intro-background-image 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s forwards;
}

.intro-ready .home-page .hero__shade {
  animation: intro-fade 0.5s ease 0.15s forwards;
}

.intro-ready .home-page .hero__future .intro-char:not(.intro-char--space) {
  animation: intro-copy 0.48s cubic-bezier(0.65, 0, 0.35, 1) calc(0.65s + var(--intro-order, 0) * 0.035s) forwards;
}

.intro-ready .home-page .hero__script path,
.intro-ready .home-page .hero__script polygon,
.intro-ready .home-page .hero__script rect {
  animation:
    intro-write 0.42s cubic-bezier(0.65, 0, 0.35, 1) calc(0.65s + var(--intro-order, 0) * 0.035s) forwards,
    intro-fill 0.3s ease calc(1.15s + var(--intro-order, 0) * 0.035s) forwards;
}

.intro-ready .home-page .hero__brand {
  animation: intro-brand 0.65s var(--intro-ease) 1.68s forwards;
}

.intro-ready .home-page .hero__announcement {
  animation: intro-rise 0.5s var(--intro-ease) 2.05s forwards;
}

.intro-ready .home-page .hero__announcement .intro-line {
  animation: intro-line-reveal 0.42s var(--intro-ease) calc(2.08s + var(--intro-order, 0) * 0.08s) forwards;
}

.intro-ready .home-page .hero__country {
  animation: intro-rise 0.45s var(--intro-ease) 2.42s forwards;
}

.intro-ready .home-page .hero__country .intro-char {
  animation: intro-rise 0.34s var(--intro-ease) calc(2.46s + var(--intro-order, 0) * 0.035s) forwards;
}

.intro-ready .home-page .hero__title .intro-word {
  animation: intro-title-ink 0.6s var(--intro-ease) 2.82s forwards;
}

.intro-ready .home-page .hero__description {
  animation: intro-rise 0.45s var(--intro-ease) 3.35s forwards;
}

.intro-ready .home-page .hero__description span {
  animation: intro-line-reveal 0.4s var(--intro-ease) calc(3.4s + var(--intro-order, 0) * 0.08s) forwards;
}

.intro-ready .home-page .hero__opening {
  animation: intro-badge 0.75s var(--intro-ease) 0.25s forwards;
}

.intro-ready .home-page .hero__opening .intro-piece:nth-child(1) {
  animation: intro-badge-piece 0.42s var(--intro-ease) 0.48s forwards;
}

.intro-ready .home-page .hero__opening .intro-piece:nth-child(2) {
  animation: intro-badge-piece 0.42s var(--intro-ease) 0.6s forwards;
}

.intro-complete .home-page .hero__rental-badge {
  animation: intro-rental-badge 0.72s var(--intro-ease) forwards;
}

@keyframes intro-background {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes intro-background-image {
  0% {
    transform: scale(1.025);
    filter: brightness(1.04) saturate(0.94);
  }

  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes intro-write {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
    transform: translateY(3px);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
}

@keyframes intro-fill {
  from {
    opacity: 1;
    fill: transparent;
    stroke-opacity: 1;
  }

  to {
    opacity: 1;
    fill: #fff;
    stroke-opacity: 0;
  }
}

@keyframes intro-fade {
  to {
    opacity: 1;
  }
}

@keyframes intro-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(1.5px);
  }

  68% {
    opacity: 0.9;
    filter: blur(0.2px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes intro-copy {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(1.8px);
  }

  38% {
    opacity: 0.58;
    filter: blur(0.8px);
  }

  76% {
    opacity: 0.95;
    transform: translate3d(0, -1px, 0);
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes intro-line-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    clip-path: inset(0 0 100% 0);
  }

  62% {
    opacity: 0.9;
    clip-path: inset(0 0 18% 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes intro-brand {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.94);
    filter: blur(2px);
  }

  58% {
    opacity: 0.9;
    transform: translate3d(0, -1px, 0) scale(1.015);
    filter: blur(0.2px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes intro-piece {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-title-ink {
  0% {
    opacity: 0;
    color: rgba(28, 42, 84, 0.18);
    transform: translate3d(0, 8px, 0);
    filter: blur(2px);
  }

  45% {
    opacity: 0.62;
    color: rgba(28, 42, 84, 0.68);
    transform: translate3d(0, 2px, 0);
    filter: blur(0.5px);
  }

  100% {
    opacity: 1;
    color: #1c2a54;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes intro-badge-piece {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.98);
    filter: blur(1.5px);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.01);
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes intro-badge {
  0% {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.008);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes intro-rental-badge {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.96);
    filter: blur(2px);
  }

  62% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.01);
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@media (max-height: 700px) and (min-width: 769px) {
  .hero__top {
    top: 96px;
  }

  .hero__announcement {
    font-size: 16px;
  }

  .hero__country {
    margin-top: 8px;
  }

  .hero__title {
    font-size: 41px;
  }

  .hero__opening {
    top: 96px;
  }

  .hero__bottom {
    bottom: 38px;
  }

  .hero__script {
    width: 535px;
  }

  .hero__description {
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .site-main {
    background: #fff;
  }

  .hero {
    min-height: max(720px, 100svh);
  }

  .hero__background img {
    object-position: 50% 50%;
  }

  .hero__shade {
    height: 49%;
    background: linear-gradient(to bottom,
        rgba(28, 42, 84, 0),
        rgba(28, 42, 84, 0.88));
  }

  .hero__top {
    top: 105px;
  }

  .hero__announcement {
    font-size: clamp(14px, 4vw, 17px);
  }

  .hero__country {
    margin-top: 12px;
    gap: 1.75em;
    font-size: 13px;
  }

  .hero__title {
    margin-top: 5px;
    font-size: clamp(37px, 11vw, 46px);
  }

  .hero__title .intro-word {
    gap: 0.48em;
  }

  .hero__opening {
    top: 82px;
    right: 18px;
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.12);
  }

  .hero__opening strong {
    font-size: 24px;
  }

  .hero__opening span {
    font-size: 16px;
  }

  .hero__bottom {
    right: 14px;
    bottom: max(35px, env(safe-area-inset-bottom));
    left: 14px;
  }

  .hero__future {
    margin-bottom: -11px;
    font-size: clamp(20px, 6vw, 25px);
  }

  .hero__script {
    width: min(94vw, 580px);
  }

  .hero__brand {
    width: min(138px, 48vw);
    height: auto;
    margin-top: -1px;
  }

  .hero__description {
    width: min(330px, 88vw);
    margin-top: 15px;
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .hero__top {
    top: 96px;
  }

  .hero__opening {
    top: 77px;
  }

  .hero__bottom {
    bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero__background {
    clip-path: none;
    opacity: 1;
  }

  .home-page .hero__background img {
    transform: none;
    animation: none;
  }

  .home-page .hero__shade,
  .home-page .hero__opening,
  .home-page .hero__top,
  .home-page .hero__announcement,
  .home-page .hero__country,
  .home-page .hero__future,
  .home-page .hero__brand,
  .home-page .hero__description {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .home-page .hero__top {
    transform: translateX(-50%);
  }

  .home-page .hero__script path,
  .home-page .hero__script polygon,
  .home-page .hero__script rect {
    fill: #fff;
    stroke: transparent;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: none;
    transform: none;
  }

  .home-page .hero__script {
    clip-path: none;
    animation: none;
  }

  .intro-line,
  .home-page .hero__title .intro-word,
  .home-page .hero__top .intro-char,
  .home-page .hero__future .intro-char,
  .home-page .hero__opening .intro-piece,
  .home-page .hero__description span {
    opacity: 1;
    color: inherit;
    clip-path: none;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* Revised Figma frame: keep the existing DOM and intro sequence, but align the
   home view to the current 1366 x 1033 reference. */
.home-page {
  --intro-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.home-page .hero {
  height: max(600px, min(56.2225vw, 100svh));
  min-height: 600px;
  background: #d8e6f1;
}

.home-page .hero__background img {
  object-fit: cover;
  object-position: center center;
  transform: none;
  filter: none;
}

.home-page .hero__shade {
  display: none;
}

.home-page .hero__top {
  top: 120px;
}

.home-page .hero__announcement {
  color: #92262a;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.home-page .hero__country {
  gap: 1.6em;
  margin-top: 12px;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0;
}

.home-page .hero__title {
  margin-top: 0;
  color: #1c2a54;
  font-size: 47px;
  line-height: 1.12;
}

.home-page .hero__description {
  display: grid;
  gap: 0;
  width: auto;
  margin: 11px 0 0;
  color: #1c2a54;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.home-page .hero__description span {
  display: block;
}

.home-page .hero__opening {
  top: 110px;
  right: max(calc((100% - 1200px) / 2), 40px);
  background: transparent;
  /* text-align: center; */
}

.home-page .hero__bottom {
  top: 394px;
  right: 20px;
  bottom: auto;
  left: 20px;
}

.home-page .hero__future {
  margin-bottom: -16px;
  color: #71593d;
  font-size: 38px;
  line-height: 33px;
  letter-spacing: -0.02em;
}

.home-page .hero__script {
  /* width: min(567.053px, 78vw); */
}

.home-page .hero__script path,
.home-page .hero__script polygon,
.home-page .hero__script rect {
  stroke: #71593d;
}

.home-page .hero__brand {
  width: 199px;
  height: 30px;
  margin-top: 0;
}

@keyframes intro-background-image {
  0% {
    transform: scale(1.035);
    filter: brightness(0.94) saturate(0.9);
  }

  55% {
    transform: scale(1.012);
    filter: brightness(0.98) saturate(0.96);
  }

  to {
    transform: scale(1);
    filter: none;
  }
}

@keyframes intro-fill {
  from {
    opacity: 1;
    fill: transparent;
    stroke-opacity: 1;
  }

  to {
    opacity: 1;
    fill: #71593d;
    stroke-opacity: 0;
  }
}

@media (max-width: 768px) {
  .intro-ready .home-page .hero__background img {
    animation-name: intro-background-image-mobile;
  }

  @keyframes intro-background-image-mobile {
    0% {
      filter: brightness(0.94) saturate(0.9);
    }

    55% {
      filter: brightness(0.98) saturate(0.96);
    }

    to {
      filter: none;
    }
  }

  .home-page .hero {
    height: max(660px, 100svh);
    min-height: 660px;
  }

  .home-page .hero__background img {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(50% - 135vw);
    width: 285vw;
    height: auto;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.96) 22%,
        #000 34%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.96) 22%,
        #000 34%);
  }

  .home-page .hero__top {
    top: 120px;
    width: min(360px, calc(100% - 40px));
  }

  .home-page .hero__announcement {
    font-size: clamp(14px, 4vw, 17px);
    line-height: 19px;
  }

  .home-page .hero__country {
    margin-top: 9px;
    font-size: 13px;
    line-height: 15px;
  }

  .home-page .hero__title {
    margin-top: 0;
    font-size: clamp(37px, 11vw, 46px);
    line-height: 1.1;
  }

  .home-page .hero__description {
    width: min(330px, 88vw);
    margin-top: 9px;
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
    line-height: 15px;
    white-space: normal;
  }

  .home-page .hero__opening {
    top: 77px;
    right: 18px;
  }

  .home-page .hero__bottom {
    right: 14px;
    top: clamp(350px, calc(40svh + 20px), 400px);
    bottom: auto;
    left: 14px;
  }

  .home-page .hero__future {
    margin-bottom: -11px;
    font-size: clamp(20px, 6vw, 25px);
    line-height: 30px;
  }

  .home-page .hero__script {
    width: min(320px, 82vw);
  }

  .home-page .hero__brand {
    width: min(112px, 42vw);
    height: auto;
  }

  .home-page .hero__rental-badge {
    right: 14px;
    bottom: 0;
  }
}

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

  .home-page .hero__script path,
  .home-page .hero__script polygon,
  .home-page .hero__script rect {
    fill: #71593d;
    stroke: transparent;
  }

  .home-page .hero__rental-badge {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}