.hero { padding: 20px var(--page-gap) 0; }

.hero {
  --hero-pad: clamp(30px, min(5vw - 30px, 3.125vw), 60px);
  --hero-inset: clamp(0px, 6.25vw - 100px, 20px);
  padding: 20px calc(var(--page-gap) + var(--hero-inset)) 0;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  min-height: clamp(540px, min(55vw - 190px, 36.4vw + 90.6px), 790px);
  padding: calc(var(--hero-pad) * 0.667) var(--hero-pad) var(--hero-pad);
  border-radius: clamp(20px, max(2.5vw - 10px, 3.125vw - 20px), 40px);
  background:
    url('../assets/img/hero/hero-line.svg') right top / cover no-repeat,
    var(--gradient-accent);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: min(720px, 48cqw);
  padding-left: 30px;
  color: var(--color-white);
}

.hero__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-blue);
  font-size: var(--fs-small);
}

.hero__location img { width: 24px; height: 24px; }

.hero__title {
  margin-top: clamp(20px, 1.667vw, 32px);
  font-size: calc(var(--fs-h1) + 4px);
  font-family: var(--font-heading);
  font-weight: 700;
}

.hero__hl {
  display: inline-block;
  padding-inline: 12px;
  margin-left: -12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-light-blue) 40%, transparent);
}

.hero__desc {
  margin-top: clamp(16px, 1.458vw, 28px);
  font-size: 24px;
  font-weight: 700;
}

.hero__note {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: 20px;
  font-weight: 700;
}

.hero__cta {
  position: relative;
  display: inline-block;
  margin-top: clamp(20px, 1.667vw, 32px);
}

.hero__cta-note {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: 16px;
  opacity: 0.7;
}

.hero__sticker {
  position: absolute;
  left: calc(100% - 23px);
  bottom: -27px;
  white-space: nowrap;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-pink);
  font-size: var(--fs-btn);
  transform: rotate(-8deg);
  box-shadow: var(--shadow-card);
}

.hero__spark { position: absolute; }

.hero__spark--btn {
  top: -18px;
  left: -16px;
}

.hero__spark--sticker {
  right: -22px;
  bottom: -10px;
}

.hero__kids {
  position: absolute;
  right: 17.2cqw;
  bottom: 30px;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  height: 93%;
}

.hero__kid {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

@media (max-width: 1024px) {
  .hero { padding: 12px var(--page-gap) 0; }

  .hero__title {
    --hl-h: 0.9em;
    line-height: var(--hl-h);
  }
  @supports (height: round(1.4px, 1px)) {
    .hero__title { --hl-h: round(0.9em, 1px); }
  }
  .hero__hl {
    --hl-c: color-mix(in srgb, var(--color-light-blue) 40%, transparent);
    --hl-r: 4px;
    --hl-corner: var(--hl-r) var(--hl-r);
    display: inline;
    padding-inline: 12px;
    margin-left: -12px;
    border-radius: 0;
    background-color: transparent;
    background-image:
      linear-gradient(var(--hl-c), var(--hl-c)),
      linear-gradient(var(--hl-c), var(--hl-c)),
      linear-gradient(var(--hl-c), var(--hl-c)),
      radial-gradient(circle at 100% 0, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
      radial-gradient(circle at 0 0, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
      radial-gradient(circle at 100% 100%, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
      radial-gradient(circle at 0 100%, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r));
    background-size:
      100% calc(var(--hl-h) - 2 * var(--hl-r)),
      calc(100% - 2 * var(--hl-r)) var(--hl-r),
      calc(100% - 2 * var(--hl-r)) var(--hl-r),
      var(--hl-corner), var(--hl-corner), var(--hl-corner), var(--hl-corner);
    background-position:
      0 50%,
      var(--hl-r) calc(50% + (var(--hl-r) - var(--hl-h)) / 2),
      var(--hl-r) calc(50% + (var(--hl-h) - var(--hl-r)) / 2),
      0 calc(50% + (var(--hl-h) - var(--hl-r)) / 2),
      100% calc(50% + (var(--hl-h) - var(--hl-r)) / 2),
      0 calc(50% + (var(--hl-r) - var(--hl-h)) / 2),
      100% calc(50% + (var(--hl-r) - var(--hl-h)) / 2);
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 20px 0;
    border-radius: 24px;
  }

  .hero__kids {
    position: static;
    align-self: stretch;
    justify-content: center;
    height: auto;
    margin-top: 24px;
  }

  .hero__kid {
    height: auto;
    width: min(70%, 460px);
  }
}

@media (max-width: 767px) {
  .hero-group { background: var(--gradient-accent-v); }

  .hero { padding: 0; }

  .hero__panel {
    padding: 20px var(--section-pad-x) 0;
    border-radius: 0;
    background: url('../assets/img/hero/hero-line.svg') right top / cover no-repeat;
  }

  .hero__content { max-width: none; padding-left: 0; }

  .hero__locations { gap: 10px; }

  .hero__location {
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: var(--fs-text);
  }

  .hero__location img { width: 20px; height: 20px; }

  .hero__title { margin-top: 40px; }

  .hero__br { display: none; }
  .hero__title { font-size: min(calc(var(--fs-h1) + 4px), calc((100vw - 42px) * 0.14)); }
  .hero__hl { padding-inline: 8px; margin-left: -8px; }

  .hero__desc {
    max-width: 87.5%;
    margin-top: 16px;
  }

  .hero__note {
    max-width: 87.5%;
    margin-top: 10px;
  }

  .hero__cta {
    display: block;
    margin-top: 30px;
  }

  .hero__cta-note {
    max-width: 87.5%;
    margin-top: 12px;
    font-size: var(--fs-text);
  }

  .hero__sticker {
    left: auto;
    right: 20px;
    bottom: -32px;
    padding: 10px 20px;
    font-size: var(--fs-text);
  }

  .hero__spark--btn {
    top: -11px;
    left: -9px;
    width: 14px;
    height: 16px;
  }

  .hero__spark--sticker {
    right: -14px;
    bottom: -8px;
    width: 20px;
    height: 20px;
  }

  .hero__kids {
    width: calc(100% + 20px);
    margin: 60px -10px 0;
  }

  .hero__kid { width: 86%; }

  .hero__note-hl {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
    background-size: 100% 1.35em;
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-inline: 3px;
    margin-left: -3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}