/*
Theme Name: So Amazing TT Hero
Theme URI: https://example.com/so-amazing-tt-hero
Author: So Amazing TT
Author URI: https://example.com
Description: A playful modern classic WordPress theme matching the supplied So Amazing TT hero design.
Version: 1.1.6
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: so-amazing-tt-hero
*/

:root {
  --deep-blue: #0956b5;
  --sky-blue: #27aee4;
  --bright-pink: #f65ac3;
  --purple: #8738d1;
  --orange: #ff7a21;
  --green: #35b957;
  --yellow: #ffd52e;
  --soft-yellow: #ffe783;
  --heading-font: Arial, Helvetica, sans-serif;
  --body-font: Arial, Helvetica, sans-serif;
  --page-width: 1218px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--deep-blue);
  font-family: var(--body-font);
  line-height: 1.35;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.announcement-bar {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  background: var(--announcement-bg, linear-gradient(90deg, var(--yellow) 0%, #ffdc42 54%, var(--soft-yellow) 100%));
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  text-align: center;
}

.announcement-bar p {
  margin: 0;
  color: var(--announcement-color, var(--deep-blue));
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
}

.announcement-bar a {
  color: var(--announcement-color, var(--deep-blue));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-header {
  background: #ffffff;
}

.site-header__inner {
  width: min(100%, var(--page-width));
  min-height: 96px;
  margin: 0 auto;
  padding: 8px 49px 9px 67px;
  display: grid;
  grid-template-columns: 188px minmax(430px, 1fr) 164px;
  gap: 22px;
  align-items: center;
}

.site-logo {
  width: 112px;
  height: 74px;
  display: block;
  overflow: visible;
}

.site-logo img {
  width: 112px;
  height: auto;
  max-width: none;
}

.main-navigation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 47px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation a {
  color: var(--menu-color, var(--deep-blue));
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta,
.hero__button,
.feature-card__tag {
  background: linear-gradient(90deg, var(--yellow) 0%, var(--soft-yellow) 100%);
  color: var(--deep-blue);
  font-family: var(--heading-font);
  font-weight: 700;
  text-decoration: none;
}

.header-cta {
  background: var(--menu-button-bg, linear-gradient(90deg, var(--yellow) 0%, var(--soft-yellow) 100%));
  color: var(--menu-button-color, var(--deep-blue));
  width: 150px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) inset;
  font-size: 16px;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.menu-toggle {
  display: none;
}

.site-content-wrapper {
  width: 100%;
}

.hero-page {
  position: relative;
  min-height: calc(100vh - 132px);
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}

.hero-page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: calc(100vh - 201px);
  min-height: 560px;
  background: var(--hero-overlay, linear-gradient(90deg, rgba(9, 86, 181, 0.42) 0%, rgba(9, 86, 181, 0.22) 48%, rgba(9, 86, 181, 0.08) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%));
  pointer-events: none;
}

.hero {
  position: relative;
  min-height: calc(100vh - 132px);
  overflow: hidden;
  background: transparent;
}

.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -2;
  height: calc(100vh - 201px);
  min-height: 560px;
  overflow: hidden;
}

.hero__media img,
.hero__media video,
.hero__carousel,
.hero__carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-media-position, center center);
  filter: brightness(0.48) saturate(1.08) blur(0.5px);
  transform: scale(1.015);
}

.hero__carousel {
  position: absolute;
  inset: 0;
}

.hero__carousel img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroCarousel 12s infinite;
}

.hero__carousel img:nth-child(1) {
  opacity: 1;
}

.hero__carousel img:nth-child(2) {
  animation-delay: 4s;
}

.hero__carousel img:nth-child(3) {
  animation-delay: 8s;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1058px);
  margin: 0 auto;
  padding: 166px 0 220px;
}

.hero h1 {
  max-width: 600px;
  margin: 0;
  color: #ffffff;
  background: var(--hero-title-color, #ffffff);
  background-clip: text;
  font-family: var(--heading-font);
  font-size: clamp(50px, 5.1vw, 66px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.26);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.hero__button {
  background: var(--hero-button-bg, linear-gradient(90deg, var(--yellow) 0%, var(--soft-yellow) 100%));
  color: var(--hero-button-color, var(--deep-blue));
  width: 282px;
  min-height: 40px;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(9, 86, 181, 0.12);
  font-size: 16px;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.feature-cards {
  position: relative;
  z-index: 3;
  min-height: 0;
  margin-top: -164px;
  background: transparent;
}

.feature-cards__inner {
  width: min(100%, 1058px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  transform: none;
}

.feature-card {
  position: relative;
  min-height: 190px;
  padding: 26px 33px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.feature-card--blue,
.card--blue {
  background: var(--card-bg, var(--sky-blue));
}

.card--pink {
  background: var(--card-bg, var(--bright-pink));
}

.card--purple {
  background: var(--card-bg, var(--purple));
}

.card--green {
  background: var(--card-bg, var(--green));
}

.feature-card__tag {
  position: absolute;
  top: 26px;
  left: 34px;
  z-index: 2;
  min-width: 73px;
  min-height: 26px;
  padding: 6px 10px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
}

.feature-card__shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.96;
}

.card--blue .feature-card__shape {
  width: 190px;
  right: -34px;
  bottom: -31px;
}

.card--pink .feature-card__shape {
  width: 191px;
  right: -23px;
  top: -11px;
}

.card--purple .feature-card__shape {
  width: 189px;
  right: -38px;
  bottom: -52px;
}

.card--green .feature-card__shape {
  width: 190px;
  right: -34px;
  bottom: -31px;
}

.feature-card__title,
.feature-card__text {
  position: relative;
  z-index: 2;
}

.feature-card__title {
  max-width: 174px;
  display: block;
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 0.87;
  letter-spacing: 0;
}

.feature-card__text {
  max-width: 164px;
  margin-top: 8px;
  display: block;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.25;
}

.wonder-section {
  position: relative;
  z-index: 1;
  min-height: 620px;
  margin-top: 0;
  overflow: hidden;
  background: #ffffff;
}

.wonder-art {
  position: absolute;
  z-index: 1;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.wonder-art--rainbow {
  top: -72px;
  left: -150px;
  width: 500px;
}

.wonder-art--heart {
  top: 16px;
  left: calc(50% + 55px);
  width: 150px;
  transform: translateX(-50%) rotate(-6deg);
}

.wonder-art--star {
  top: 20px;
  right: 42px;
  width: 205px;
  transform: rotate(-6deg);
}

.wonder-art--orange-flower {
  left: -26px;
  bottom: -26px;
  width: 235px;
}

.wonder-art--blue-cloud-left {
  left: 285px;
  bottom: 40px;
  width: 210px;
}

.wonder-art--blue-cloud-right {
  right: 255px;
  bottom: -118px;
  width: 350px;
}

.wonder-art--purple-flower {
  right: 190px;
  bottom: 16px;
  width: 195px;
}

.wonder-art--butterfly {
  right: 20px;
  bottom: 150px;
  width: 170px;
}

.wonder-copy {
  position: relative;
  z-index: 2;
  width: min(68vw, 946px);
  min-height: 222px;
  margin: 168px auto 0;
  padding: 42px 62px;
  display: grid;
  grid-template-columns: minmax(330px, 0.98fr) 1px minmax(330px, 1.02fr);
  align-items: center;
  gap: 38px;
  border-radius: 35px;
  background: #eaf4f9;
}

.wonder-copy h2 {
  margin: 0;
  color: var(--deep-blue);
  font-family: var(--heading-font);
  font-size: 58px;
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: 0;
  text-align: center;
}

.wonder-copy h2 span {
  display: block;
  white-space: nowrap;
}

.wonder-copy__divider {
  width: 1px;
  height: 138px;
  background: var(--deep-blue);
}

.wonder-copy p {
  max-width: 398px;
  margin: 0;
  color: var(--deep-blue);
  font-family: var(--body-font);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.18;
  text-align: center;
}

.wonder-button {
  position: absolute;
  left: 50%;
  bottom: 102px;
  z-index: 3;
  width: 437px;
  min-height: 59px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--soft-yellow) 100%);
  box-shadow: 0 16px 15px rgba(0, 0, 0, 0.27);
  color: var(--deep-blue);
  font-family: var(--heading-font);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transform: translateX(-50%);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .header-cta:hover,
  .hero__button:hover,
  .wonder-button:hover {
    filter: brightness(1.04);
    box-shadow: 0 10px 18px rgba(9, 86, 181, 0.16);
    transform: translateY(-2px);
  }

  .wonder-button:hover {
    transform: translateX(-50%) translateY(-2px);
  }

  .feature-card:hover {
    filter: brightness(1.03);
    box-shadow: 0 18px 26px rgba(0, 0, 0, 0.24);
    transform: translateY(-3px);
  }
}

@media (hover: none) {
  .header-cta:active,
  .hero__button:active,
  .feature-card:active,
  .wonder-button:active {
    filter: brightness(0.98);
    transform: scale(0.98);
  }

  .wonder-button:active {
    transform: translateX(-50%) scale(0.98);
  }
}

.entry-content,
.site-content,
.site-container {
  width: min(100% - 32px, var(--page-width));
  margin-right: auto;
  margin-left: auto;
}

.entry-content {
  padding: 48px 0;
}

@media (max-width: 1180px) {
  .site-header__inner {
    padding-right: 32px;
    padding-left: 32px;
    grid-template-columns: 140px 1fr 160px;
  }

  .main-navigation ul {
    gap: 28px;
  }

  .hero__content {
    width: min(100% - 48px, 1058px);
  }

  .feature-cards__inner {
    width: min(100% - 48px, 1058px);
    gap: 24px;
  }

  .wonder-art--rainbow {
    top: -66px;
    left: -180px;
    width: 455px;
  }

  .wonder-art--star {
    right: 16px;
    width: 205px;
  }

  .wonder-art--orange-flower {
    width: 176px;
  }

  .wonder-art--blue-cloud-left {
    left: 28%;
  }

  .wonder-art--blue-cloud-right {
    right: 19%;
  }

  .wonder-art--purple-flower {
    right: 10%;
  }

  .wonder-copy {
    width: min(70vw, 900px);
    grid-template-columns: minmax(300px, 0.95fr) 1px minmax(300px, 1.05fr);
    gap: 30px;
    padding: 40px 48px;
  }

  .wonder-copy h2 {
    font-size: 56px;
  }

  .wonder-copy p {
    font-size: 22px;
  }
}

@media (max-width: 880px) {
  .site-header__inner {
    min-height: 88px;
    grid-template-columns: 112px 1fr 48px;
    grid-template-areas:
      "logo cta toggle"
      "nav nav nav";
    gap: 10px 14px;
  }

  .site-logo {
    grid-area: logo;
    width: 112px;
    height: 74px;
  }

  .site-logo img {
    width: 112px;
  }

  .main-navigation {
    grid-area: nav;
    display: none;
    padding: 8px 0 2px;
  }

  .main-navigation.is-open {
    display: block;
  }

  .main-navigation ul,
  .main-navigation .fallback-menu {
    display: grid;
    justify-content: start;
    gap: 9px;
  }

  .header-cta {
    grid-area: cta;
  }

  .menu-toggle {
    grid-area: toggle;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(9, 86, 181, 0.18);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(9, 86, 181, 0.12);
  }

  .menu-toggle__bar {
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: var(--deep-blue);
  }

  .hero {
    min-height: 440px;
  }

  .hero__content {
    width: min(100% - 32px, 360px);
    padding: 78px 0 150px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 8.5vw, 54px);
  }

  .hero__button {
    width: min(100%, 316px);
    min-height: 42px;
    font-size: 18px;
  }

  .feature-cards {
    margin-top: -96px;
  }

  .feature-cards__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: none;
  }

  .wonder-section {
    min-height: 700px;
    margin-top: 0;
  }

  .wonder-art--rainbow {
    top: -78px;
    left: -168px;
    width: 405px;
  }

  .wonder-art--heart {
    top: 36px;
    left: 55%;
    width: 146px;
  }

  .wonder-art--star {
    top: 48px;
    right: -18px;
    width: 176px;
  }

  .wonder-art--orange-flower {
    left: -24px;
    bottom: -10px;
    width: 178px;
  }

  .wonder-art--blue-cloud-left {
    left: 15%;
    bottom: 104px;
    width: 220px;
  }

  .wonder-art--blue-cloud-right {
    right: 10%;
    bottom: -44px;
    width: 306px;
  }

  .wonder-art--purple-flower {
    right: 4%;
    bottom: 40px;
    width: 164px;
  }

  .wonder-art--butterfly {
    right: -40px;
    bottom: 190px;
    width: 174px;
  }

  .wonder-copy {
    width: min(88vw, 620px);
    margin-top: 148px;
    padding: 34px 38px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wonder-copy h2 {
    font-size: 48px;
  }

  .wonder-copy__divider {
    width: 80%;
    height: 1px;
    margin: 0 auto;
  }

  .wonder-copy p {
    max-width: 480px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.04;
  }

  .wonder-button {
    bottom: 117px;
    width: min(100% - 80px, 380px);
    min-height: 56px;
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .announcement-bar p {
    font-size: 13px;
  }

  .site-header__inner {
    padding: 10px 20px 12px;
    grid-template-columns: 112px 1fr 44px;
  }

  .header-cta {
    width: 142px;
    min-height: 36px;
    font-size: 13px;
  }

  .main-navigation a {
    font-size: 16px;
  }

  .hero {
    min-height: 510px;
  }

  .hero-page::before,
  .hero__media {
    height: 100%;
    min-height: 100%;
  }

  .hero__content {
    padding: 116px 0 138px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 10.7vw, 50px);
  }

  .hero__button {
    width: min(100%, 316px);
    min-height: 42px;
    margin-top: 18px;
    font-size: 18px;
  }

  .feature-cards__inner {
    width: min(100% - 32px, 360px);
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 0;
    transform: none;
  }

  .wonder-section {
    min-height: 650px;
  }

  .wonder-art--rainbow {
    top: -58px;
    left: -164px;
    width: 330px;
  }

  .wonder-art--heart {
    top: 45px;
    left: 55%;
    width: 108px;
  }

  .wonder-art--star {
    top: 58px;
    right: -36px;
    width: 146px;
  }

  .wonder-art--orange-flower {
    left: -32px;
    bottom: 4px;
    width: 150px;
  }

  .wonder-art--blue-cloud-left {
    left: 15%;
    bottom: 108px;
    width: 168px;
  }

  .wonder-art--blue-cloud-right {
    right: 3%;
    bottom: -30px;
    width: 252px;
  }

  .wonder-art--purple-flower {
    right: -22px;
    bottom: 48px;
    width: 140px;
  }

  .wonder-art--butterfly {
    right: -56px;
    bottom: 204px;
    width: 150px;
  }

  .wonder-copy {
    width: min(88vw, 420px);
    min-height: 0;
    margin-top: 136px;
    padding: 30px 24px;
    border-radius: 24px;
  }

  .wonder-copy h2 {
    font-size: 38px;
  }

  .wonder-copy p {
    font-size: 18px;
    line-height: 1.07;
  }

  .wonder-button {
    bottom: 123px;
    width: min(100% - 58px, 330px);
    min-height: 52px;
    border-radius: 18px;
    font-size: 21px;
  }
}

@keyframes heroCarousel {
  0%,
  28% {
    opacity: 1;
  }
  35%,
  100% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Playpark location showcase
   -------------------------------------------------------------------------- */
.location-showcase {
  --active-location-accent: #f24fbd;
  --active-location-tint: #f9abdf;
  --active-location-gradient: linear-gradient(135deg, #f24fbd 0%, #f9abdf 48%, #fff1fa 100%);
  --active-location-tabs-gradient: linear-gradient(90deg, #ffd9f1 0%, #f9abdf 52%, #ffeef9 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px) 22px;
  background: var(--active-location-gradient);
  transition: background 420ms ease;
}

.location-showcase__shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: #fffafc;
  box-shadow: 0 14px 30px rgba(18, 55, 101, 0.15);
}

.location-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 8px 12px;
  background: var(--active-location-tabs-gradient);
  transition: background 420ms ease;
}

.location-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 16px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--deep-blue);
  font-family: var(--heading-font);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.location-tab img {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  object-fit: contain;
}

.location-tab:hover {
  background: rgba(255, 255, 255, 0.48);
}

.location-tab.is-active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(9, 86, 181, 0.08);
}

.location-tab:focus-visible {
  outline: 3px solid var(--deep-blue);
  outline-offset: -3px;
}

.location-panels {
  position: relative;
  min-height: 520px;
}

.location-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(460px, 1.18fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  min-height: 520px;
  padding: clamp(34px, 4vw, 44px) clamp(38px, 5vw, 54px);
  background: #fffafc;
}

.location-panel[hidden] {
  display: none;
}

.location-panel.is-active {
  animation: locationPanelIn 360ms ease both;
}

.location-panel__content {
  color: var(--deep-blue);
}

.location-panel__content h3 {
  max-width: 330px;
  margin: 0 0 18px;
  color: var(--deep-blue);
  font-family: var(--heading-font);
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.location-panel__details {
  display: grid;
  gap: 15px;
}

.location-detail h4 {
  margin: 0 0 4px;
  color: var(--deep-blue);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.location-detail p {
  max-width: 385px;
  margin: 0;
  color: var(--deep-blue);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.location-panel__visual {
  position: relative;
  min-width: 0;
}

.location-panel__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1.46 / 1;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 6px 18px rgba(9, 86, 181, 0.07);
}

.location-panel__brand {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: clamp(185px, 22vw, 280px);
  pointer-events: none;
  z-index: 2;
}

.location-panel__brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes locationPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .location-showcase {
    padding-inline: 18px;
  }

  .location-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .location-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px;
  }

  .location-panel__content h3,
  .location-detail p {
    max-width: 100%;
  }

  .location-panel__photo {
    aspect-ratio: 16 / 10;
  }

  .location-panel__brand {
    right: 8px;
    bottom: -30px;
    width: clamp(175px, 30vw, 245px);
  }
}

@media (max-width: 620px) {
  .location-showcase {
    padding: 34px 12px 42px;
  }

  .location-showcase__shell {
    border-radius: 19px;
  }

  .location-tabs {
    grid-template-columns: 1fr 1fr;
    padding: 8px;
  }

  .location-tab {
    gap: 8px;
    min-height: 52px;
    padding: 7px 9px;
    border-radius: 11px;
    font-size: 14px;
  }

  .location-tab img {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .location-panel {
    gap: 24px;
    min-height: 0;
    padding: 28px 20px 48px;
  }

  .location-panel__content h3 {
    margin-bottom: 16px;
    font-size: 32px;
  }

  .location-panel__details {
    gap: 14px;
  }

  .location-detail h4 {
    font-size: 16px;
  }

  .location-detail p {
    font-size: 15px;
    line-height: 1.42;
  }

  .location-panel__photo {
    aspect-ratio: 4 / 3;
    border-radius: 15px;
  }

  .location-panel__brand {
    right: 4px;
    bottom: -28px;
    width: min(52vw, 205px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .location-showcase,
  .location-tabs,
  .location-tab {
    transition: none;
  }

  .location-panel.is-active {
    animation: none;
  }
}

/* Wonder section refinement — compact premium spacing */
.wonder-section {
  min-height: 0;
  margin-top: -72px;
  padding: 148px 0 88px;
  overflow: hidden;
  background: #fff;
}

.wonder-copy {
  width: min(calc(100% - 64px), 1000px);
  min-height: 168px;
  margin: 0 auto;
  padding: 26px 42px;
  grid-template-columns: minmax(300px, 360px) 1px minmax(0, 1fr);
  gap: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, #edf7fc 0%, #e8f3f8 100%);
  box-shadow: 0 14px 34px rgba(9, 86, 181, 0.07);
}

.wonder-copy h2 {
  font-size: clamp(40px, 3.35vw, 48px);
  line-height: 1.01;
}

.wonder-copy__divider {
  height: 108px;
  opacity: 0.72;
}

.wonder-copy p {
  max-width: 430px;
  font-size: 18px;
  line-height: 1.24;
}

.wonder-button {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(calc(100% - 48px), 312px);
  min-height: 48px;
  margin: 28px auto 0;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(9, 86, 181, 0.16);
  font-size: 20px;
  transform: none;
}

.wonder-art--rainbow {
  top: -118px;
  left: -122px;
  width: 390px;
}

.wonder-art--heart {
  top: 16px;
  left: calc(50% + 84px);
  width: 112px;
}

.wonder-art--star {
  top: 18px;
  right: 22px;
  width: 152px;
}

.wonder-art--orange-flower {
  left: -34px;
  bottom: -44px;
  width: 188px;
}

.wonder-art--blue-cloud-left {
  left: 23%;
  bottom: 14px;
  width: 158px;
}

.wonder-art--blue-cloud-right {
  right: 18%;
  bottom: -92px;
  width: 260px;
}

.wonder-art--purple-flower {
  right: 10%;
  bottom: -4px;
  width: 146px;
}

.wonder-art--butterfly {
  right: -12px;
  bottom: 104px;
  width: 126px;
}

@media (hover: hover) and (pointer: fine) {
  .wonder-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(9, 86, 181, 0.2);
  }
}

@media (hover: none) {
  .wonder-button:active {
    transform: scale(0.98);
  }
}

@media (max-width: 880px) {
  .wonder-section {
    margin-top: -28px;
    padding: 118px 0 72px;
  }

  .wonder-copy {
    width: min(calc(100% - 40px), 620px);
    min-height: 0;
    padding: 30px 36px;
    grid-template-columns: 1fr;
    gap: 16px;
    border-radius: 26px;
  }

  .wonder-copy h2 {
    font-size: clamp(38px, 7vw, 46px);
  }

  .wonder-copy h2 span {
    white-space: normal;
  }

  .wonder-copy__divider {
    width: 72px;
    height: 2px;
    margin: 0 auto;
    border-radius: 999px;
  }

  .wonder-copy p {
    max-width: 500px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.3;
  }

  .wonder-button {
    width: min(calc(100% - 64px), 292px);
    min-height: 46px;
    margin-top: 22px;
    font-size: 18px;
  }

  .wonder-art--rainbow {
    top: -94px;
    left: -130px;
    width: 320px;
  }

  .wonder-art--heart {
    top: 22px;
    left: 58%;
    width: 86px;
  }

  .wonder-art--star {
    top: 32px;
    right: -22px;
    width: 122px;
  }

  .wonder-art--orange-flower {
    left: -40px;
    bottom: -38px;
    width: 140px;
  }

  .wonder-art--blue-cloud-left {
    left: 11%;
    bottom: 0;
    width: 126px;
  }

  .wonder-art--blue-cloud-right {
    right: 8%;
    bottom: -66px;
    width: 205px;
  }

  .wonder-art--purple-flower {
    right: -12px;
    bottom: -14px;
    width: 112px;
  }

  .wonder-art--butterfly {
    right: -34px;
    bottom: 84px;
    width: 104px;
  }
}

@media (max-width: 560px) {
  .wonder-section {
    margin-top: -12px;
    padding: 92px 0 56px;
  }

  .wonder-copy {
    width: calc(100% - 28px);
    padding: 24px 20px 25px;
    gap: 14px;
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(9, 86, 181, 0.06);
  }

  .wonder-copy h2 {
    font-size: clamp(32px, 10vw, 38px);
    line-height: 1.02;
  }

  .wonder-copy p {
    font-size: 16px;
    line-height: 1.34;
  }

  .wonder-button {
    width: min(calc(100% - 48px), 276px);
    min-height: 44px;
    margin-top: 18px;
    border-radius: 14px;
    font-size: 17px;
    box-shadow: 0 8px 18px rgba(9, 86, 181, 0.14);
  }

  .wonder-art--rainbow {
    top: -78px;
    left: -112px;
    width: 258px;
  }

  .wonder-art--heart {
    top: 18px;
    left: 61%;
    width: 66px;
  }

  .wonder-art--star {
    top: 24px;
    right: -26px;
    width: 92px;
  }

  .wonder-art--orange-flower {
    left: -38px;
    bottom: -34px;
    width: 108px;
  }

  .wonder-art--blue-cloud-left {
    left: 5%;
    bottom: -8px;
    width: 92px;
  }

  .wonder-art--blue-cloud-right {
    right: 3%;
    bottom: -48px;
    width: 154px;
  }

  .wonder-art--purple-flower {
    right: -18px;
    bottom: -12px;
    width: 86px;
  }

  .wonder-art--butterfly {
    right: -28px;
    bottom: 62px;
    width: 78px;
  }
}


/* Wonder section layout fix — v1.0.12
   Keep the existing design, remove the CTA gap, bring the section directly
   beneath the feature cards, and make the mobile content panel narrower. */
.wonder-section {
  padding-top: 62px;
  padding-bottom: 64px;
}

@media (max-width: 880px) {
  .wonder-section {
    padding-top: 62px;
    padding-bottom: 60px;
  }
}

@media (max-width: 560px) {
  .wonder-section {
    padding-top: 58px;
    padding-bottom: 50px;
  }

  .wonder-copy {
    width: min(calc(100% - 48px), 360px);
  }
}


/* --------------------------------------------------------------------------
   Wonder transition + section balance — v1.0.13
   Decorative rainbow sits directly beneath the feature cards. The content
   section keeps the established visual style while restoring full vertical
   presence on desktop and a narrower, centered mobile composition.
   -------------------------------------------------------------------------- */
.feature-cards__inner {
  padding-bottom: 0;
}

.wonder-transition {
  position: relative;
  z-index: 2;
  height: 118px;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

.wonder-transition__rainbow {
  position: absolute;
  top: -74px;
  left: -146px;
  width: 500px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.wonder-section {
  position: relative;
  z-index: 1;
  min-height: 610px;
  margin-top: 0;
  padding: 70px 0 84px;
  overflow: hidden;
  background: #ffffff;
}

.wonder-copy {
  width: min(68vw, 946px);
  min-height: 220px;
  margin: 0 auto;
  padding: 42px 60px;
  grid-template-columns: minmax(320px, 0.98fr) 1px minmax(320px, 1.02fr);
  gap: 36px;
  border-radius: 30px;
  background: linear-gradient(135deg, #edf7fc 0%, #e8f3f8 100%);
  box-shadow: 0 14px 34px rgba(9, 86, 181, 0.07);
}

.wonder-copy h2 {
  font-size: clamp(44px, 3.7vw, 54px);
  line-height: 1.01;
}

.wonder-copy__divider {
  height: 138px;
}

.wonder-copy p {
  max-width: 430px;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.2;
}

/* Reframe the existing decorative SVGs around the restored section height. */
.wonder-art--heart {
  top: 12px;
  left: calc(50% + 70px);
  width: 124px;
}

.wonder-art--star {
  top: 14px;
  right: 30px;
  width: 172px;
}

.wonder-art--orange-flower {
  left: -30px;
  bottom: -28px;
  width: 205px;
}

.wonder-art--blue-cloud-left {
  left: 24%;
  bottom: 24px;
  width: 170px;
}

.wonder-art--blue-cloud-right {
  right: 18%;
  bottom: -88px;
  width: 280px;
}

.wonder-art--purple-flower {
  right: 10%;
  bottom: 4px;
  width: 155px;
}

.wonder-art--butterfly {
  right: -8px;
  bottom: 118px;
  width: 132px;
}

@media (max-width: 1180px) {
  .wonder-transition {
    height: 108px;
  }

  .wonder-transition__rainbow {
    top: -68px;
    left: -168px;
    width: 455px;
  }

  .wonder-copy {
    width: min(70vw, 900px);
    padding: 40px 48px;
    grid-template-columns: minmax(290px, 0.95fr) 1px minmax(290px, 1.05fr);
    gap: 30px;
  }
}

@media (max-width: 880px) {
  .wonder-transition {
    height: 92px;
  }

  .wonder-transition__rainbow {
    top: -62px;
    left: -156px;
    width: 390px;
  }

  .wonder-section {
    min-height: 690px;
    padding: 58px 0 72px;
  }

  .wonder-copy {
    width: min(88vw, 620px);
    min-height: 0;
    padding: 34px 38px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wonder-copy h2 {
    font-size: clamp(38px, 7vw, 46px);
  }

  .wonder-copy h2 span {
    white-space: normal;
  }

  .wonder-copy__divider {
    width: 74px;
    height: 2px;
    margin: 0 auto;
    border-radius: 999px;
  }

  .wonder-copy p {
    max-width: 500px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .wonder-transition {
    height: 76px;
  }

  .wonder-transition__rainbow {
    top: -48px;
    left: -142px;
    width: 316px;
  }

  .wonder-section {
    min-height: 640px;
    padding: 52px 0 62px;
  }

  .wonder-copy {
    width: min(88vw, 360px);
    padding: 30px 24px;
    gap: 15px;
    border-radius: 24px;
  }

  .wonder-copy h2 {
    font-size: clamp(32px, 9.6vw, 38px);
    line-height: 1.03;
  }

  .wonder-copy p {
    font-size: 16px;
    line-height: 1.34;
  }

  .wonder-art--heart {
    top: 20px;
    left: 61%;
    width: 64px;
  }

  .wonder-art--star {
    top: 30px;
    right: -24px;
    width: 92px;
  }

  .wonder-art--orange-flower {
    left: -38px;
    bottom: -30px;
    width: 108px;
  }

  .wonder-art--blue-cloud-left {
    left: 4%;
    bottom: -4px;
    width: 94px;
  }

  .wonder-art--blue-cloud-right {
    right: 3%;
    bottom: -44px;
    width: 154px;
  }

  .wonder-art--purple-flower {
    right: -16px;
    bottom: -8px;
    width: 86px;
  }

  .wonder-art--butterfly {
    right: -28px;
    bottom: 66px;
    width: 78px;
  }
}

/* --------------------------------------------------------------------------
   Wonder transition continuity refinement — v1.0.14
   Keeps the existing design/content intact while connecting the feature cards
   directly into the decorative transition, revealing more of the rainbow and
   using a dedicated mobile composition rather than a scaled desktop layout.
   -------------------------------------------------------------------------- */
.feature-cards {
  margin-bottom: 0;
}

.feature-cards__inner {
  padding-bottom: 0;
}

.wonder-transition {
  position: relative;
  z-index: 2;
  height: clamp(190px, 15vw, 235px);
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  background: #fff;
}

.wonder-transition__rainbow {
  top: -8px;
  left: -36px;
  width: clamp(610px, 42vw, 735px);
  max-width: none;
}

.wonder-section {
  position: relative;
  z-index: 1;
  min-height: 610px;
  margin-top: 0;
  padding: 24px 0 78px;
  overflow: hidden;
}

.wonder-copy {
  position: relative;
  z-index: 3;
}

.wonder-art {
  z-index: 1;
  pointer-events: none;
}

/* Scale the existing decorative artwork up roughly 40–60% and reframe it. */
.wonder-art--heart {
  top: -34px;
  left: 53%;
  width: 182px;
}

.wonder-art--star {
  top: -24px;
  right: -22px;
  width: 250px;
}

.wonder-art--orange-flower {
  left: -54px;
  bottom: -62px;
  width: 300px;
}

.wonder-art--blue-cloud-left {
  left: 22%;
  bottom: 10px;
  width: 248px;
}

.wonder-art--blue-cloud-right {
  right: 17%;
  bottom: -126px;
  width: 410px;
}

.wonder-art--purple-flower {
  right: 8%;
  bottom: -18px;
  width: 228px;
}

.wonder-art--butterfly {
  right: -34px;
  bottom: 112px;
  width: 194px;
}

@media (max-width: 1180px) {
  .wonder-transition {
    height: 200px;
  }

  .wonder-transition__rainbow {
    top: -4px;
    left: -44px;
    width: 650px;
  }

  .wonder-section {
    padding-top: 20px;
  }

  .wonder-art--heart {
    width: 168px;
  }

  .wonder-art--star {
    width: 226px;
  }
}

/* Dedicated tablet/mobile layout. Decorative elements are deliberately
   repositioned around the card instead of proportionally shrinking desktop. */
@media (max-width: 880px) {
  .wonder-transition {
    height: 170px;
    overflow: hidden;
  }

  .wonder-transition__rainbow {
    top: -8px;
    left: -28px;
    width: 520px;
  }

  .wonder-section {
    min-height: 610px;
    padding: 14px 0 58px;
  }

  .wonder-copy {
    width: min(88vw, 600px);
    padding: 32px 34px;
    gap: 17px;
  }

  .wonder-art--heart {
    top: -22px;
    left: auto;
    right: 22%;
    width: 128px;
  }

  .wonder-art--star {
    top: 8px;
    right: -36px;
    width: 168px;
  }

  .wonder-art--butterfly {
    right: -28px;
    bottom: 128px;
    width: 146px;
  }

  .wonder-art--orange-flower {
    left: -58px;
    bottom: -36px;
    width: 190px;
  }

  .wonder-art--blue-cloud-left {
    left: 8%;
    bottom: 6px;
    width: 168px;
  }

  .wonder-art--blue-cloud-right {
    right: 13%;
    bottom: -76px;
    width: 270px;
  }

  .wonder-art--purple-flower {
    right: -24px;
    bottom: -8px;
    width: 148px;
  }
}

@media (max-width: 560px) {
  .wonder-transition {
    height: 142px;
    margin: 0;
  }

  .wonder-transition__rainbow {
    top: -6px;
    left: -18px;
    width: 455px;
  }

  .wonder-section {
    min-height: 535px;
    padding: 8px 0 44px;
  }

  .wonder-copy {
    width: min(88vw, 366px);
    padding: 26px 22px 28px;
    gap: 14px;
    border-radius: 23px;
  }

  .wonder-copy h2 {
    font-size: clamp(31px, 9.4vw, 37px);
  }

  .wonder-copy p {
    font-size: 15.5px;
    line-height: 1.36;
  }

  .wonder-art--heart {
    top: -18px;
    right: 18%;
    width: 94px;
  }

  .wonder-art--star {
    top: 18px;
    right: -34px;
    width: 126px;
  }

  .wonder-art--butterfly {
    right: -22px;
    bottom: 112px;
    width: 112px;
  }

  .wonder-art--orange-flower {
    left: -48px;
    bottom: -28px;
    width: 148px;
  }

  .wonder-art--blue-cloud-left {
    left: 2%;
    bottom: 4px;
    width: 126px;
  }

  .wonder-art--blue-cloud-right {
    right: 10%;
    bottom: -54px;
    width: 205px;
  }

  .wonder-art--purple-flower {
    right: -20px;
    bottom: -2px;
    width: 112px;
  }
}

/* --------------------------------------------------------------------------
   Location showcase — compact premium proportions (v1.0.15)
   Keeps content, imagery, logos and interaction unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
  .location-showcase {
    padding: clamp(34px, 4vw, 54px) 22px;
  }

  .location-showcase__shell {
    width: min(74vw, 1080px);
    border-radius: 24px;
    box-shadow: 0 12px 26px rgba(18, 55, 101, 0.11);
  }

  .location-tabs {
    padding: 6px 10px;
  }

  .location-tab {
    min-height: 50px;
    gap: 9px;
    padding: 7px 12px;
    border-radius: 11px;
    font-size: clamp(14px, 1.1vw, 17px);
  }

  .location-tab img {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .location-panels,
  .location-panel {
    min-height: 420px;
  }

  .location-panel {
    grid-template-columns: minmax(260px, 0.84fr) minmax(390px, 1.16fr);
    gap: clamp(26px, 3vw, 40px);
    padding: 30px 38px 34px;
  }

  .location-panel__content h3 {
    max-width: 290px;
    margin-bottom: 15px;
    font-size: clamp(29px, 2.45vw, 36px);
    line-height: 1.02;
  }

  .location-panel__details {
    gap: 12px;
  }

  .location-detail h4 {
    margin-bottom: 3px;
    font-size: 15px;
  }

  .location-detail p {
    max-width: 350px;
    font-size: 15.5px;
    line-height: 1.42;
  }

  .location-panel__photo {
    aspect-ratio: 16 / 10;
    border-radius: 17px;
  }

  .location-panel__brand {
    right: -18px;
    bottom: -20px;
    width: clamp(145px, 16vw, 205px);
  }
}

@media (max-width: 620px) {
  .location-showcase {
    padding: 26px 0 34px;
  }

  .location-showcase__shell {
    width: 92%;
    max-width: 440px;
    margin-inline: auto;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(18, 55, 101, 0.10);
  }

  .location-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    padding: 7px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .location-tabs::-webkit-scrollbar {
    display: none;
  }

  .location-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 7px 11px;
    gap: 7px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .location-tab img {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .location-panel {
    gap: 18px;
    padding: 23px 18px 30px;
  }

  .location-panel__content h3 {
    margin-bottom: 14px;
    font-size: clamp(27px, 8vw, 30px);
    line-height: 1.04;
  }

  .location-panel__details {
    gap: 11px;
  }

  .location-detail h4 {
    margin-bottom: 2px;
    font-size: 15px;
  }

  .location-detail p {
    font-size: 14px;
    line-height: 1.4;
  }

  .location-panel__photo {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
  }

  .location-panel__brand {
    right: 8px;
    bottom: -14px;
    width: min(39vw, 155px);
  }
}
\n\n/* --------------------------------------------------------------------------\n   Mobile hero refinement (v1.0.16)\n   Preserve the original stacked feature-card design while ending the hero\n   media/overlay before the cards. Desktop and tablet remain unchanged.\n   -------------------------------------------------------------------------- */\n@media (max-width: 560px) {\n  .hero-page {\n    min-height: 0;\n    overflow: hidden;\n    background: #ffffff;\n  }\n\n  .hero {\n    min-height: 470px;\n  }\n\n  .hero-page::before,\n  .hero__media {\n    top: 0;\n    height: 470px;\n    min-height: 470px;\n  }\n\n  .hero__media {\n    background: #173b72;\n  }\n\n  .hero__media video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: var(--hero-media-position, center center);\n  }\n\n  .hero__content {\n    padding: 82px 0 72px;\n  }\n\n  .feature-cards {\n    margin-top: 0;\n    padding: 28px 0 18px;\n    background: #ffffff;\n  }\n\n  .feature-cards__inner {\n    width: min(100% - 40px, 360px);\n    gap: 18px;\n  }\n}\n
/* --------------------------------------------------------------------------
   Wonder composition — v1.0.17
   One continuous responsive composition directly after the feature cards.
   -------------------------------------------------------------------------- */
.wonder-transition { display: none !important; }

.wonder-section {
  position: relative;
  z-index: 1;
  min-height: 500px;
  margin: 28px 0 0;
  padding: 120px 0 86px;
  overflow: hidden;
  background: #fff;
}

.wonder-copy {
  position: relative;
  z-index: 4;
  width: min(68vw, 946px);
  min-height: 220px;
  margin: 0 auto;
  padding: 42px 60px;
}

.wonder-art--rainbow {
  top: -72px;
  left: -58px;
  width: 520px;
  max-width: none;
  z-index: 2;
}
.wonder-art--heart { top: 12px; left: 51%; width: 170px; z-index: 3; }
.wonder-art--star { top: 18px; right: 18px; width: 225px; z-index: 3; }
.wonder-art--orange-flower { left: -30px; bottom: -42px; width: 265px; }
.wonder-art--blue-cloud-left { left: 22%; bottom: 18px; width: 225px; }
.wonder-art--blue-cloud-right { right: 16%; bottom: -70px; width: 360px; }
.wonder-art--purple-flower { right: 7%; bottom: -2px; width: 205px; }
.wonder-art--butterfly { right: -6px; bottom: 112px; width: 180px; }

@media (max-width: 1180px) {
  .wonder-section { margin-top: 24px; min-height: 500px; padding-top: 116px; }
  .wonder-art--rainbow { left: -74px; width: 470px; }
  .wonder-art--star { width: 195px; }
}

@media (max-width: 880px) {
  .wonder-section {
    min-height: 570px;
    margin-top: 24px;
    padding: 126px 0 72px;
  }
  .wonder-copy { width: min(88vw, 620px); }
  .wonder-art--rainbow { top: -54px; left: -76px; width: 420px; }
  .wonder-art--heart { top: 26px; left: 60%; width: 130px; }
  .wonder-art--star { top: 92px; right: -22px; width: 165px; }
  .wonder-art--orange-flower { width: 190px; bottom: -24px; }
  .wonder-art--blue-cloud-left { left: 12%; bottom: 22px; width: 170px; }
  .wonder-art--blue-cloud-right { right: 16%; bottom: -26px; width: 215px; }
  .wonder-art--purple-flower { right: -10px; bottom: 6px; width: 150px; }
  .wonder-art--butterfly { right: 4%; bottom: 125px; width: 130px; }
}

@media (max-width: 560px) {
  .wonder-section {
    min-height: 580px;
    margin-top: 20px;
    padding: 116px 0 104px;
    overflow: hidden;
  }
  .wonder-copy {
    width: min(88vw, 360px);
    margin: 0 auto;
    padding: 28px 22px;
    gap: 14px;
    border-radius: 24px;
  }
  .wonder-copy h2 { font-size: clamp(31px, 9vw, 37px); }
  .wonder-copy p { font-size: 15px; line-height: 1.34; }
  .wonder-art--rainbow {
    top: -52px;
    left: -42px;
    width: 330px;
  }
  .wonder-art--heart { top: 32px; left: 66%; width: 92px; }
  .wonder-art--star { top: 126px; right: -32px; width: 130px; }
  .wonder-art--orange-flower { left: -24px; bottom: -28px; width: 145px; }
  .wonder-art--blue-cloud-left { left: 9%; bottom: 28px; width: 130px; }
  .wonder-art--blue-cloud-right { right: 17%; bottom: 2px; width: 160px; }
  .wonder-art--purple-flower { right: -20px; bottom: 10px; width: 120px; }
  .wonder-art--butterfly { right: 3px; bottom: 120px; width: 105px; }
}

/* --------------------------------------------------------------------------
   Mobile hero title clipping fix — v1.0.18
   Keep the existing three-line title treatment while ensuring the full
   "Big Adventures" line fits inside the mobile viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__content {
    width: min(100% - 40px, 1058px);
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(38px, 9.4vw, 45px);
    line-height: 1.02;
  }

  .hero h1 span {
    max-width: 100%;
  }
}


/* ==========================================================
   v1.0.19 — Premium sticky navigation
   Reference behaviour: clean full-width floating/sticky header
   with compact rounded menu-item hover/active states.
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(9, 86, 181, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  transition: min-height 220ms ease, padding 220ms ease;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  background: #fff3b0;
  color: var(--deep-blue);
  box-shadow: 0 5px 14px rgba(255, 213, 46, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.main-navigation .current-menu-item > a,
.main-navigation a[aria-current="page"] {
  background: #fff3b0;
  color: var(--deep-blue);
  box-shadow: 0 4px 12px rgba(255, 213, 46, 0.14);
}

.header-cta:hover,
.header-cta:focus-visible {
  box-shadow: 0 8px 18px rgba(255, 213, 46, 0.24);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 880px) {
  .site-header {
    box-shadow: 0 7px 20px rgba(9, 86, 181, 0.08);
  }

  .main-navigation {
    margin-top: 2px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(9, 86, 181, 0.10);
  }

  .main-navigation ul,
  .main-navigation .fallback-menu {
    width: 100%;
  }

  .main-navigation li,
  .main-navigation a {
    width: 100%;
  }

  .main-navigation a {
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
  }
}

/* ==========================================================
   v1.0.20 — Desktop sticky header: preserve original geometry
   Keep the complete white navigation visible while scrolling.
   ========================================================== */
@media (min-width: 881px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(9, 86, 181, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .site-header__inner {
    width: min(100%, var(--page-width));
    min-height: 96px;
    margin: 0 auto;
    padding: 8px 49px 9px 67px;
    grid-template-columns: 188px minmax(430px, 1fr) 164px;
    gap: 22px;
    align-items: center;
  }

  .site-logo,
  .site-logo img {
    width: 112px;
  }

  .site-logo {
    height: 74px;
    align-self: center;
    justify-self: start;
  }

  .main-navigation ul {
    gap: 34px;
  }

  .main-navigation a {
    min-height: 40px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
  }
}

/* ==========================================================
   v1.1.0 — Complete premium homepage
   Keeps the established hero, cards, Wonder section and
   interactive location showcase while extending the homepage.
   ========================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 118px; }
:root {
  --sat-blue: #0956B5;
  --sat-yellow: #FFD52E;
  --sat-ink: #12345c;
  --sat-soft-blue: #edf5ff;
  --sat-cream: #fffdf6;
  --sat-line: rgba(9, 86, 181, 0.12);
  --sat-shadow: 0 20px 55px rgba(16, 57, 104, 0.12);
}
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.home-section { padding: clamp(72px, 8vw, 118px) 0; position: relative; }
.section-kicker { margin: 0 0 10px; color: var(--sat-blue); font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-heading h2, .fun-strip h2, .final-cta h2, .trust-copy h2, .contact-section h2 { margin: 0; color: var(--sat-blue); font-size: clamp(38px, 5vw, 68px); line-height: .96; letter-spacing: -.045em; }
.section-heading > p:not(.section-kicker), .section-heading--split > p, .trust-copy > p:last-child, .contact-section__copy > p:last-child { color: #536981; font-size: 18px; line-height: 1.65; }
.section-heading--center { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.section-heading--split { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 70px; margin-bottom: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; }
.button--blue { background: var(--sat-blue); color: #fff; box-shadow: 0 12px 30px rgba(9,86,181,.2); }
.button--yellow { background: var(--sat-yellow); color: var(--sat-blue); box-shadow: 0 12px 28px rgba(255,213,46,.2); }
.button--ghost { border: 2px solid rgba(255,255,255,.7); color: #fff; }

.fun-strip { position: relative; overflow: hidden; padding: 64px 0; background: var(--sat-yellow); }
.fun-strip::before, .fun-strip::after { content:""; position:absolute; width:360px; height:360px; border:38px solid rgba(255,255,255,.55); border-radius:50%; opacity:.8; }
.fun-strip::before { left:-220px; top:-230px; } .fun-strip::after { right:-220px; bottom:-235px; }
.fun-strip__inner { display:grid; grid-template-columns: minmax(260px,.85fr) minmax(440px,1.5fr) auto; align-items:center; gap:44px; position:relative; z-index:1; }
.fun-strip h2 { font-size: clamp(40px, 4.6vw, 62px); }
.fun-strip__copy > p:last-child { max-width: 480px; margin-bottom:0; color:#284a70; line-height:1.55; }
.fun-strip__logos { display:grid; grid-template-columns: repeat(4,1fr); align-items:center; gap:14px; }
.fun-strip__logos a { min-height:120px; display:grid; place-items:center; padding:14px; border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 16px 38px rgba(9,86,181,.08); transition:.2s ease; }
.fun-strip__logos a:hover { transform:translateY(-4px) rotate(-1deg); background:#fff; }
.fun-strip__logos img { width:100%; max-height:92px; object-fit:contain; }

.plan-visit { background: #fff; }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.plan-card { position:relative; min-height:310px; padding:34px; border:1px solid var(--sat-line); border-radius:32px; background:linear-gradient(180deg,#fff 0%,#f9fbff 100%); box-shadow:0 15px 45px rgba(31,71,115,.08); overflow:hidden; }
.plan-card::after { content:""; position:absolute; width:150px; height:150px; right:-65px; bottom:-70px; border-radius:50%; background:var(--sat-yellow); opacity:.75; }
.plan-card__number { display:inline-grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--sat-yellow); color:var(--sat-blue); font-weight:900; }
.plan-card h3 { margin:50px 0 10px; color:var(--sat-blue); font-size:28px; }
.plan-card p { color:#5a6d83; line-height:1.6; }
.plan-card a { position:absolute; left:34px; bottom:30px; z-index:2; color:var(--sat-blue); font-weight:800; text-decoration:none; }

.membership-section { background: var(--sat-blue); color:#fff; overflow:hidden; }
.membership-section::before { content:""; position:absolute; inset:auto -8% -55% auto; width:620px; height:620px; border-radius:50%; background:rgba(255,213,46,.12); }
.membership-section .section-kicker, .membership-section .section-heading h2 { color:#fff; }
.membership-section .section-heading > p:not(.section-kicker) { color:rgba(255,255,255,.82); max-width:710px; }
.membership-section__top { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.membership-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.membership-card { min-height:330px; display:flex; flex-direction:column; padding:34px; border-radius:34px; color:#fff; box-shadow:0 24px 54px rgba(0,0,0,.16); transition:transform .2s ease; }
.membership-card:hover { transform:translateY(-5px); }
.membership-card--purple { background:linear-gradient(145deg,#7a33c5,#a964e6); }
.membership-card--blue { background:linear-gradient(145deg,#1597d2,#43c1ed); }
.membership-card--pink { background:linear-gradient(145deg,#e744ad,#f87acb); }
.membership-card__eyebrow { margin:0; font-size:18px; font-weight:900; }
.membership-card__price { margin:44px 0 18px; display:flex; align-items:flex-end; gap:9px; }
.membership-card__price strong { font-size:clamp(46px,5vw,66px); line-height:.85; letter-spacing:-.05em; }
.membership-card__price span { opacity:.86; }
.membership-card > p:last-of-type { opacity:.9; }
.membership-card a { margin-top:auto; color:#fff; font-weight:800; text-decoration:none; }
.membership-note { margin:18px 0 0; color:rgba(255,255,255,.7); font-size:13px; }

.gallery-section { background:#fff; }
.gallery-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-auto-rows:260px; gap:18px; }
.gallery-tile { position:relative; margin:0; border-radius:30px; overflow:hidden; background:#eef3f8; }
.gallery-tile img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.gallery-tile:hover img { transform:scale(1.035); }
.gallery-tile figcaption { position:absolute; left:18px; bottom:18px; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--sat-blue); font-weight:900; box-shadow:0 8px 25px rgba(0,0,0,.08); }
.gallery-tile--wide { grid-row:span 2; }
.gallery-tile:nth-child(4) { grid-column:2; grid-row:3 / span 1; }

.trust-section { background:#f3f8ff; }
.trust-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; }
.trust-copy > p:last-child { max-width:650px; }
.trust-points { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.trust-points div { min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; border-radius:28px; background:#fff; box-shadow:0 14px 42px rgba(9,86,181,.08); }
.trust-points strong { color:var(--sat-blue); font-size:52px; letter-spacing:-.05em; }
.trust-points span { margin-top:8px; color:#5d7085; line-height:1.35; }

.contact-section { background:var(--sat-yellow); }
.contact-section__shell { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.contact-section__copy > p:last-child { color:#365576; }
.contact-options { display:grid; gap:12px; }
.contact-options > a { display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; min-height:92px; padding:15px 22px; border-radius:24px; background:#fff; color:var(--sat-blue); text-decoration:none; box-shadow:0 14px 34px rgba(9,86,181,.08); transition:.2s ease; }
.contact-options > a:hover { transform:translateX(4px); }
.contact-options > a > span { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:#f1f6ff; font-size:25px; }
.contact-options strong, .contact-options small { display:block; }
.contact-options strong { font-size:18px; }.contact-options small { margin-top:3px; color:#6b7b8d; }

.faq-section { background:#fff; }
.faq-shell { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:start; }
.faq-list { border-top:1px solid var(--sat-line); }
.faq-list details { border-bottom:1px solid var(--sat-line); }
.faq-list summary { position:relative; padding:24px 52px 24px 0; cursor:pointer; color:var(--sat-blue); font-size:19px; font-weight:800; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; top:17px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#edf5ff; font-size:23px; }
.faq-list details[open] summary::after { content:"–"; background:var(--sat-yellow); }
.faq-list details p { margin:0; padding:0 52px 24px 0; color:#5b6e82; line-height:1.65; }

.final-cta { padding:74px 0; background:linear-gradient(120deg,#0956B5 0%,#0f6bd2 100%); color:#fff; }
.final-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.final-cta p { margin:0 0 10px; font-weight:800; opacity:.78; }.final-cta h2 { color:#fff; max-width:740px; }
.final-cta__actions { display:flex; gap:12px; flex-shrink:0; }

.site-footer { padding:70px 0 22px; background:#082c5a; color:#fff; }
.site-footer__grid { display:grid; grid-template-columns:1.35fr .7fr .7fr 1fr; gap:48px; padding-bottom:46px; }
.site-footer__brand img { width:120px; height:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.12)); }
.site-footer__brand p, .site-footer__visit p { color:rgba(255,255,255,.68); line-height:1.6; }
.site-footer h2 { margin:4px 0 18px; color:var(--sat-yellow); font-size:16px; }
.site-footer nav a { display:block; width:max-content; margin:0 0 11px; color:#fff; text-decoration:none; opacity:.83; }
.site-footer nav a:hover { opacity:1; color:var(--sat-yellow); }
.site-footer__visit .button { margin-top:9px; }
.site-footer__bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.58); font-size:13px; }
.site-footer__bottom p { margin:0; }.site-footer__bottom a { color:inherit; text-decoration:none; }

@media (max-width: 1040px) {
  .fun-strip__inner { grid-template-columns:1fr; }
  .fun-strip__logos { max-width:760px; }
  .fun-strip__inner > .button { width:max-content; }
  .plan-grid, .membership-grid { grid-template-columns:repeat(3,1fr); }
  .trust-grid, .contact-section__shell, .faq-shell { gap:42px; }
  .site-footer__grid { grid-template-columns:1.3fr .7fr .7fr; }
  .site-footer__visit { grid-column:1 / -1; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .section-shell { width:min(100% - 32px,1180px); }
  .home-section { padding:72px 0; }
  .section-heading--split, .trust-grid, .contact-section__shell, .faq-shell { grid-template-columns:1fr; gap:28px; }
  .section-heading--split { margin-bottom:30px; }
  .fun-strip { padding:54px 0; }
  .fun-strip__logos { grid-template-columns:repeat(2,1fr); gap:10px; }
  .fun-strip__logos a { min-height:100px; border-radius:22px; }
  .plan-grid, .membership-grid { grid-template-columns:1fr; }
  .plan-card { min-height:270px; }
  .membership-section__top { align-items:flex-start; flex-direction:column; }
  .membership-card { min-height:280px; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:190px; }
  .gallery-tile--wide { grid-row:span 1; }
  .gallery-tile:nth-child(4) { grid-column:auto; grid-row:auto; }
  .trust-points { grid-template-columns:repeat(3,1fr); }
  .trust-points div { min-height:150px; padding:18px; }.trust-points strong { font-size:38px; }
  .final-cta__inner { align-items:flex-start; flex-direction:column; }.final-cta__actions { flex-wrap:wrap; }
  .site-footer__grid { grid-template-columns:1fr 1fr; gap:34px; }.site-footer__brand, .site-footer__visit { grid-column:1 / -1; }
}
@media (max-width: 480px) {
  .section-heading h2, .fun-strip h2, .final-cta h2, .trust-copy h2, .contact-section h2 { font-size:40px; }
  .fun-strip__logos a { padding:9px; }.fun-strip__logos img { max-height:68px; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:230px; }
  .trust-points { grid-template-columns:1fr; }.trust-points div { min-height:120px; }
  .contact-options > a { grid-template-columns:50px 1fr auto; padding:13px; }.contact-options > a > span { width:46px; height:46px; }
  .site-footer__grid { grid-template-columns:1fr; }.site-footer__brand, .site-footer__visit { grid-column:auto; }
  .site-footer__bottom { flex-direction:column; }
}

/* v1.1.2 — Use the theme's existing playful SVG artwork instead of generic circles. */
.fun-strip::before,
.fun-strip::after {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .52;
  pointer-events: none;
}
.fun-strip::before {
  width: 230px;
  height: 230px;
  left: -62px;
  top: -64px;
  background-image: url('assets/svg/wonder-purple-flower.svg');
  transform: rotate(-16deg);
}
.fun-strip::after {
  width: 210px;
  height: 210px;
  right: -48px;
  bottom: -62px;
  background-image: url('assets/svg/wonder-blue-cloud.svg');
  transform: rotate(9deg);
}
.plan-card::after {
  width: 118px;
  height: 118px;
  right: -20px;
  bottom: -22px;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .16;
  pointer-events: none;
}
.plan-card:nth-child(1)::after { background-image: url('assets/svg/wonder-yellow-star.svg'); transform: rotate(12deg); }
.plan-card:nth-child(2)::after { background-image: url('assets/svg/wonder-green-heart.svg'); transform: rotate(-10deg); }
.plan-card:nth-child(3)::after { background-image: url('assets/svg/wonder-pink-butterfly.svg'); transform: rotate(8deg); }
.membership-section::before {
  inset: auto -60px -55px auto;
  width: 300px;
  height: 300px;
  border-radius: 0;
  background-color: transparent;
  background-image: url('assets/svg/wonder-orange-flower.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .13;
  transform: rotate(15deg);
  pointer-events: none;
}

/* v1.1.4 — Find Your Kind of Fun: clean section, no decorative SVG artwork. */
.fun-strip::before,
.fun-strip::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Contact page — v1.1.5 */
.contact-page { background:#fff; overflow:hidden; }
.contact-hero { position:relative; background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%); padding:88px 0 76px; overflow:hidden; }
.contact-hero__inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr); gap:72px; align-items:center; }
.contact-hero__copy { max-width:720px; }
.contact-hero__copy h1 { margin:8px 0 20px; max-width:760px; color:var(--sat-blue,#0956b5); font-size:clamp(3rem,6.4vw,6.7rem); line-height:.91; letter-spacing:-.055em; }
.contact-hero__copy > p:last-child { max-width:660px; margin:0; color:#526276; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.75; }
.contact-hero__quick { display:grid; gap:14px; }
.contact-hero__quick > a { display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:center; min-height:88px; padding:17px 22px; background:#fff; border:1px solid rgba(9,86,181,.09); border-radius:24px; color:#17385e; text-decoration:none; box-shadow:0 18px 46px rgba(27,62,104,.09); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.contact-hero__quick > a:hover,.contact-hero__quick > a:focus-visible { transform:translateY(-3px); border-color:rgba(9,86,181,.22); box-shadow:0 24px 56px rgba(27,62,104,.14); outline:none; }
.contact-quick__icon { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; background:#fff6ce; font-size:1.55rem; }
.contact-hero__quick strong,.contact-hero__quick small { display:block; }
.contact-hero__quick strong { color:var(--sat-blue,#0956b5); font-size:1.02rem; }
.contact-hero__quick small { margin-top:4px; color:#718096; font-size:.85rem; }
.contact-hero__shape { position:absolute; pointer-events:none; user-select:none; opacity:.75; }
.contact-hero__shape--star { width:94px; left:3.5%; top:46px; transform:rotate(-12deg); }
.contact-hero__shape--flower { width:136px; right:-32px; bottom:-22px; transform:rotate(13deg); opacity:.42; }
.contact-main { padding:104px 0 112px; }
.contact-main__grid { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); gap:76px; align-items:start; }
.contact-main__intro h2 { margin:8px 0 17px; color:#15395f; font-size:clamp(2.25rem,4.2vw,4.15rem); line-height:.98; letter-spacing:-.045em; }
.contact-main__intro > p { margin:0 0 30px; color:#617084; line-height:1.7; }
.contact-help-card { padding:25px 26px; margin-top:16px; border-radius:24px; background:#eef6ff; }
.contact-help-card--yellow { background:#fff7d7; }
.contact-help-card h3 { margin:0 0 8px; color:#163d69; font-size:1.04rem; }
.contact-help-card p { margin:0 0 11px; color:#5d6c7f; font-size:.92rem; line-height:1.55; }
.contact-help-card a { color:var(--sat-blue,#0956b5); font-weight:800; text-decoration:none; }
.contact-form-card { padding:clamp(28px,4vw,50px); background:#fff; border:1px solid #e7edf5; border-radius:34px; box-shadow:0 26px 70px rgba(31,61,97,.11); }
.sat-contact-form { display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
.sat-form-field { display:flex; flex-direction:column; min-width:0; }
.sat-form-field--full,.sat-form-actions { grid-column:1 / -1; }
.sat-form-field label { margin-bottom:9px; color:#24415f; font-size:.88rem; font-weight:800; }
.sat-form-field label span { color:#8190a1; font-weight:500; }
.sat-form-field input,.sat-form-field select,.sat-form-field textarea { width:100%; border:1.5px solid #dfe7f0; border-radius:16px; background:#fbfcfe; color:#1f3650; font:inherit; font-size:16px; padding:14px 16px; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.sat-form-field input,.sat-form-field select { min-height:52px; }
.sat-form-field textarea { min-height:154px; resize:vertical; line-height:1.55; }
.sat-form-field input:focus,.sat-form-field select:focus,.sat-form-field textarea:focus { outline:none; background:#fff; border-color:var(--sat-blue,#0956b5); box-shadow:0 0 0 4px rgba(9,86,181,.09); }
.sat-form-field textarea::placeholder { color:#9aa7b4; }
.sat-form-actions { display:flex; gap:18px; align-items:center; margin-top:2px; }
.sat-form-actions .button { border:0; cursor:pointer; font:inherit; font-weight:800; gap:8px; }
.sat-form-actions p { margin:0; color:#8592a0; font-size:.79rem; line-height:1.45; }
.sat-form-field--honeypot { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.contact-notice { display:grid; gap:4px; padding:16px 18px; margin-bottom:24px; border-radius:16px; font-size:.9rem; }
.contact-notice--success { background:#eaf8ef; color:#23663a; }
.contact-notice--error { background:#fff0ef; color:#9a342e; }
.contact-notice strong { font-size:.95rem; }
.contact-final { position:relative; padding:58px 0; background:var(--sat-blue,#0956b5); overflow:hidden; }
.contact-final__inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.contact-final .section-kicker { color:#ffd52e; }
.contact-final h2 { margin:5px 0 0; color:#fff; font-size:clamp(2rem,4.4vw,4rem); line-height:1; letter-spacing:-.04em; }
.contact-final__shape { position:absolute; right:14%; top:-30px; width:130px; opacity:.18; pointer-events:none; transform:rotate(14deg); }
@media (max-width:900px) {
  .contact-hero { padding:64px 0 62px; }
  .contact-hero__inner,.contact-main__grid { grid-template-columns:1fr; gap:42px; }
  .contact-hero__quick { grid-template-columns:repeat(3,1fr); gap:10px; }
  .contact-hero__quick > a { grid-template-columns:1fr; gap:9px; min-height:140px; align-content:center; text-align:center; padding:16px 10px; }
  .contact-quick__icon { margin:auto; }
  .contact-main { padding:76px 0 86px; }
  .contact-main__intro { max-width:660px; }
}
@media (max-width:620px) {
  .contact-hero { padding:48px 0 50px; }
  .contact-hero__copy h1 { font-size:clamp(3rem,15vw,4.65rem); }
  .contact-hero__quick { grid-template-columns:1fr; }
  .contact-hero__quick > a { grid-template-columns:48px 1fr; min-height:78px; text-align:left; padding:14px 16px; }
  .contact-quick__icon { width:48px; height:48px; margin:0; border-radius:15px; }
  .contact-hero__shape--star { width:62px; left:auto; right:12px; top:24px; opacity:.5; }
  .contact-hero__shape--flower { width:90px; }
  .contact-main { padding:58px 0 68px; }
  .contact-main__grid { gap:34px; }
  .contact-form-card { border-radius:26px; padding:24px 18px; }
  .sat-contact-form { grid-template-columns:1fr; gap:18px; }
  .sat-form-field--full,.sat-form-actions { grid-column:auto; }
  .sat-form-actions { align-items:flex-start; flex-direction:column; }
  .sat-form-actions .button { width:100%; }
  .contact-final__inner { align-items:flex-start; flex-direction:column; }
}


/* Discover the Wonder — cursor-responsive SVG movement */
.wonder-section .wonder-art {
  --wonder-shift-x: 0px;
  --wonder-shift-y: 0px;
  translate: var(--wonder-shift-x) var(--wonder-shift-y);
  will-change: translate;
  pointer-events: none;
  transition: filter 180ms ease;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .wonder-section .wonder-art {
    translate: 0 0;
    will-change: auto;
  }
}