@font-face {
  font-family: 'KINJO Summer Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../img/hero-summer/kaushan-script-regular.ttf') format('truetype');
}

html:not([data-hero-theme="halloween"]) .summer-hero { background: #2497bb; }
html:not([data-hero-theme="halloween"]) .summer-hero > .hero-bg {
  background-image: url('../img/hero-summer/summer-okinawa-v2.webp');
  background-position: 72% center;
  animation: none;
  transform: none;
}
html:not([data-hero-theme="halloween"]) .summer-hero::after {
  background: linear-gradient(90deg, rgba(4, 62, 91, .38), rgba(4, 62, 91, .24) 42%, rgba(4, 62, 91, .04) 68%, transparent 85%),
              linear-gradient(0deg, rgba(4, 62, 91, .22), transparent 52%);
}
html:not([data-hero-theme="halloween"]) .summer-hero > .wrap {
  display: block;
  padding: 64px 24px 116px;
}
html:not([data-hero-theme="halloween"]) .summer-hero .hero-copy { max-width: 700px; }
.summer-hero__script {
  display: inline-block;
  position: relative;
  color: #fff;
  font-family: 'KINJO Summer Brush', cursive;
  font-size: clamp(68px, 6.7vw, 88px);
  font-weight: 400;
  line-height: 1.22;
  white-space: nowrap;
  letter-spacing: -.035em;
  transform: rotate(-5deg);
  transform-origin: left center;
  text-shadow: 0 2px 16px rgba(0, 48, 80, .2);
}
.summer-hero__accent { color: #ffe176; }
.summer-hero__place { position: relative; }
.summer-hero__place::after {
  content: '';
  position: absolute;
  left: 2%;
  right: 0;
  bottom: -.08em;
  height: .18em;
  background: url('../img/hero-summer/lettering-swish.svg') center / 100% 100% no-repeat;
}
html:not([data-hero-theme="halloween"]) .summer-hero h1 {
  color: #fff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(32px, 3.05vw, 44px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .035em;
  margin: 10px 0 18px;
  text-shadow: 0 2px 14px rgba(0, 48, 80, .28);
}
.summer-hero__line { display: block; white-space: nowrap; }
.summer-hero__mobile { display: none; }
html:not([data-hero-theme="halloween"]) .summer-hero .hero-copy > p {
  max-width: 555px;
  font-size: 14px;
  line-height: 1.9;
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 8px rgba(0, 48, 80, .45);
}
html:not([data-hero-theme="halloween"]) .summer-hero .hero-stats { margin-top: 26px; gap: 24px; }
html:not([data-hero-theme="halloween"]) .summer-hero .hero-stats div { border-left: 1px solid rgba(255, 255, 255, .65); }
html:not([data-hero-theme="halloween"]) .summer-hero .hero-stats b {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}
html:not([data-hero-theme="halloween"]) .summer-hero .hero-stats small { display: block; margin-top: 5px; font-size: 11px; opacity: 1; }

@media (max-width: 767px) {
  html:not([data-hero-theme="halloween"]) .summer-hero > .wrap { padding: 44px 24px 110px; }
  html:not([data-hero-theme="halloween"]) .summer-hero .hero-copy { max-width: 100%; }
  .summer-hero__script { font-size: clamp(48px, 6.7vw, 72px); }
}
@media (max-width: 600px) {
  html:not([data-hero-theme="halloween"]) .summer-hero > .wrap { padding: 48px 16px 108px; }
  html:not([data-hero-theme="halloween"]) .summer-hero > .hero-bg {
    background-image: url('../img/hero-summer/summer-okinawa-mobile-v2.webp');
    background-position: center center;
  }
  html:not([data-hero-theme="halloween"]) .summer-hero::after {
    background: linear-gradient(90deg, rgba(4, 62, 91, .3), rgba(4, 62, 91, .14) 68%, transparent),
                linear-gradient(0deg, rgba(4, 62, 91, .16), transparent 62%);
  }
  .summer-hero__script { font-size: clamp(30px, 10.2vw, 61px); }
  html:not([data-hero-theme="halloween"]) .summer-hero h1 { font-size: clamp(23px, 7.1vw, 36px); margin: 8px 0 16px; }
  html:not([data-hero-theme="halloween"]) .summer-hero .hero-copy > p,
  html:not([data-hero-theme="halloween"]) .summer-hero .hero-stats { display: none; }
  .summer-hero__desktop { display: none; }
  .summer-hero__mobile { display: inline; }
}