:root {
  --ink: #142235;
  --muted: #64748b;
  --paper: #ffffff;
  --snow: #ffffff;
  --frost: #e5f4ff;
  --aqua: #8ac3f1;
  --pine: #8ac3f1;
  --moss: #c4e0f8;
  --sun: #f5c861;
  --coral: #8ac3f1;
  --line: rgba(20, 34, 53, 0.12);
  --shadow: 0 24px 80px rgba(20, 34, 53, 0.16);

  /* 12 欄格線系統 */
  --grid-gap: 24px;
  /* 垂直間距刻度（8 的倍數） */
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
}

/* 12 欄格線容器 */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 50%;
  display: flex;
  width: min(1180px, calc(100% - max(40px, 15%)));
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* 右邊切換鈕與 pill 上/下/右間距一致（皆 8px）；左側 logo 保留較大留白 */
  padding: 6px 8px 6px 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 48px rgba(12, 31, 58, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 往下滑：Header 上滑消失 */
.site-header.is-hidden {
  transform: translateX(-50%) translateY(-160%);
}

.brand {
  display: inline-flex;
  width: clamp(104px, 11vw, 148px);
  min-width: 0;
  align-items: center;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.locale-switcher {
  position: relative;
}

.locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease;
}

.locale-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.locale-flag {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 34, 53, 0.12);
}

.locale-flag img {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.locale-currency {
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.locale-menu-icon {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 展開時箭頭轉 180° 朝上，收合轉回 */
.locale-switcher.is-open .locale-menu-icon {
  transform: rotate(180deg);
}

.locale-menu-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: none;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--shadow);
}

.locale-switcher.is-open .locale-menu-list {
  display: block;
}

.locale-menu-list li button {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease;
}

.locale-menu-list li button:hover {
  background: var(--frost);
}

.locale-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locale-menu-list li img {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 34, 53, 0.12);
}

.locale-name {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.locale-meta {
  padding-left: 34px;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
}

.locale-menu-list li[aria-selected="true"] button {
  background: var(--frost);
}

/* 滾動入場：淡入 + 輕微上移（只播一次；可用 --reveal-delay 錯開） */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1000ms ease-in-out,
    transform 1000ms ease-in-out;
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 服務方案卡片：從更下方升起（桌機；手機於 820px 內覆寫） */
.js-reveal .plan-card.reveal {
  transition-duration: 1.2s;
}

.js-reveal .plan-card.reveal:not(.is-visible) {
  transform: translateY(56px);
}

/* 桌機：卡片一張張接力，時間差拉大 */
.js-reveal .service-plans .plan-card:nth-child(2) {
  --reveal-delay: 250ms;
}

.js-reveal .service-plans .plan-card:nth-child(3) {
  --reveal-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero {
  position: relative;
  display: grid;
  height: 700px;
  overflow: hidden;
  isolation: isolate;
  place-items: center start;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: -3;
  background: #dcebfb;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.film-grain {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(20, 34, 53, 0.42) 0 1px, transparent 1px);
  background-size: 18px 18px, 24px 24px;
}

.motion-sheen {
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 42%,
    rgba(255, 255, 255, 0.36) 50%,
    rgba(255, 255, 255, 0.12) 58%,
    transparent 100%
  );
  transform: translateX(-32%);
  animation: sheen 7s ease-in-out infinite;
}

.hero-overlay {
  display: none;
}

.hero-content {
  width: min(1180px, calc(100% - max(40px, 15%)));
  margin: 0 auto;
  padding-top: 74px;
  color: var(--snow);
  text-shadow:
    0 2px 18px rgba(8, 22, 44, 0.45),
    0 10px 48px rgba(8, 22, 44, 0.5);
}

.season-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3.1rem, 8vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-accent {
  color: var(--aqua);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  margin: 44px 0 0;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(8, 28, 55, 0.42);
  color: var(--snow);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0;
  backdrop-filter: blur(12px);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.hero-cta:hover {
  background: rgba(8, 28, 55, 0.62);
  transform: translateY(-1px);
}

.services {
  padding: var(--space-2xl) 0;
  background: #ffffff;
}

.section-inner {
  width: min(1180px, calc(100% - max(40px, 15%)));
  margin: 0 auto;
}

.section-kicker {
  margin-bottom: 14px;
  color: #8ac3f1;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.services-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}

.services-heading {
  grid-column: 1 / 8;
}

.services h2 {
  margin: 0;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.services-subtitle {
  margin: 12px 0 0;
  color: #0d2238;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
}

/* 手機專用換行 / 桌機專用逗號 */
.sm-br {
  display: none;
}

.services-desc {
  grid-column: 8 / 13;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.service-plans {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
  padding-top: 60px;
}

.plan-card {
  grid-column: span 4;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 18px;
}

.plan-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.plan-main {
  display: grid;
  gap: 14px;
}

.plan-heading {
  border-left: 4px solid #8ac3f1;
  padding-left: 14px;
}

.plan-heading .plan-price {
  margin-top: 10px;
}

.plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #5aa8e6;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  transition: color 160ms ease;
}

.plan-toggle:hover {
  color: #5aa8e6;
}

.plan-toggle:hover .plan-toggle-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plan-toggle-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
}

.plan-card.is-open .plan-toggle-chevron {
  transform: translateY(1px) rotate(-135deg);
}

.plan-card h3 {
  margin: 0;
  color: #0d2238;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  margin: 0;
  color: #0d2238;
}

.plan-price span {
  font-size: clamp(2rem, 3.4vw, 2.45rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.plan-price small {
  color: #5b7187;
  font-size: 1rem;
  font-weight: 500;
}

.plan-description {
  margin: 8px 0 0;
  min-height: 4.95em;
  color: #50657a;
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.plan-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.plan-option {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid rgba(138, 195, 241, 0.7);
  border-radius: 8px;
  background: var(--snow);
  color: #0d2238;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.plan-option::after {
  width: 7px;
  height: 7px;
  flex: none;
  border-top: 2px solid #8ac3f1;
  border-right: 2px solid #8ac3f1;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  content: "";
}

.plan-option:hover {
  border-color: #8ac3f1;
  background: var(--frost);
}

.plan-option:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.plan-option:active {
  background: #cfe6fb;
  box-shadow: 0 2px 8px rgba(138, 195, 241, 0.24);
  transform: translateY(1px);
}

.plan-option:focus-visible {
  outline: 2px solid #8ac3f1;
  outline-offset: 2px;
}

.plan-details {
  display: none;
  gap: 20px;
  color: #50657a;
}

.plan-card.is-open .plan-details {
  display: grid;
}

.plan-detail-group h4 {
  margin: 0 0 8px;
  color: #151a20;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.plan-detail-group ul {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.75;
}

.plan-detail-group li {
  padding-left: 2px;
}

.plan-note {
  margin: 6px 0 0;
  color: #50657a;
}

.inclusion-list {
  display: grid;
  gap: 6px;
  padding-left: 0;
  list-style: none;
}

.inclusion-list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.55;
}

.inclusion-list li::before {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  content: "";
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.inclusion-block + .inclusion-block {
  margin-top: 14px;
}

.inclusion-label {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.inclusion-block-included .inclusion-label {
  color: #0d2238;
}

.is-included-list li::before {
  background-color: #5aa8e6;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.20948 17.5602C9.04155 17.5676 8.87603 17.5183 8.73948 17.4202L4.24948 13.7102C3.9602 13.4541 3.91665 13.0186 4.14948 12.7102C4.40515 12.4223 4.83734 12.3748 5.14948 12.6002L9.14948 15.8602L19.6495 6.15024C19.96 5.91711 20.3971 5.95953 20.657 6.24802C20.9169 6.5365 20.9136 6.97565 20.6495 7.26024L9.71948 17.3602C9.58026 17.488 9.39843 17.5593 9.20948 17.5602Z' fill='black'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.20948 17.5602C9.04155 17.5676 8.87603 17.5183 8.73948 17.4202L4.24948 13.7102C3.9602 13.4541 3.91665 13.0186 4.14948 12.7102C4.40515 12.4223 4.83734 12.3748 5.14948 12.6002L9.14948 15.8602L19.6495 6.15024C19.96 5.91711 20.3971 5.95953 20.657 6.24802C20.9169 6.5365 20.9136 6.97565 20.6495 7.26024L9.71948 17.3602C9.58026 17.488 9.39843 17.5593 9.20948 17.5602Z' fill='black'/%3E %3C/svg%3E");
}

/* 不含：文字與包含一致，僅圖示灰色區分 */
.inclusion-block-excluded .inclusion-label {
  color: #0d2238;
}

.is-excluded-list li::before {
  background-color: #5aa8e6;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.1665 12.008L20.762 4.43822C21.0793 4.11791 21.0793 3.599 20.762 3.27868C20.4503 2.95264 19.9355 2.94285 19.6118 3.2568L12.0163 10.8266L4.51839 3.2568C4.36467 3.09288 4.15078 3 3.92702 3C3.70327 3 3.48938 3.09288 3.33566 3.2568C3.0543 3.56628 3.0543 4.04123 3.33566 4.35071L10.8335 11.9096L3.238 19.4685C2.92067 19.7888 2.92067 20.3077 3.238 20.628C3.38907 20.784 3.59685 20.871 3.81309 20.8687C4.03351 20.8867 4.25202 20.8159 4.42074 20.6718L12.0163 13.102L19.6118 20.7593C19.7629 20.9153 19.9707 21.0022 20.1869 21C20.4029 21.001 20.6102 20.9142 20.762 20.7593C21.0793 20.439 21.0793 19.9201 20.762 19.5998L13.1665 12.008Z' fill='black'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.1665 12.008L20.762 4.43822C21.0793 4.11791 21.0793 3.599 20.762 3.27868C20.4503 2.95264 19.9355 2.94285 19.6118 3.2568L12.0163 10.8266L4.51839 3.2568C4.36467 3.09288 4.15078 3 3.92702 3C3.70327 3 3.48938 3.09288 3.33566 3.2568C3.0543 3.56628 3.0543 4.04123 3.33566 4.35071L10.8335 11.9096L3.238 19.4685C2.92067 19.7888 2.92067 20.3077 3.238 20.628C3.38907 20.784 3.59685 20.871 3.81309 20.8687C4.03351 20.8867 4.25202 20.8159 4.42074 20.6718L12.0163 13.102L19.6118 20.7593C19.7629 20.9153 19.9707 21.0022 20.1869 21C20.4029 21.001 20.6102 20.9142 20.762 20.7593C21.0793 20.439 21.0793 19.9201 20.762 19.5998L13.1665 12.008Z' fill='black'/%3E %3C/svg%3E");
}

.deposit-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 28px;
  border-radius: 999px;
  background: #eef4fb;
  color: #50657a;
}

.deposit-note-icon {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.7;
}

.deposit-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 匯率提示：接在訂金提示下方，僅非台幣時顯示 */
.fx-note {
  margin-top: 12px;
}

.fx-note.is-hidden {
  display: none;
}

/* 關於 heyhey 介紹區 */
.about {
  padding: var(--space-2xl) 0;
  background: #ffffff;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}

.about-grid > picture {
  grid-column: 1 / 5;
}

.about-heading {
  grid-column: 5 / 8;
}

.about-description {
  grid-column: 8 / 13;
}

.about-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

.about-heading {
  border-left: 4px solid #8ac3f1;
  padding-left: 16px;
}

.about-heading h2 {
  margin: 0;
  color: #0d2238;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.about-subtitle {
  margin: 12px 0 0;
  color: #5b7187;
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
}

.about-description {
  margin: 6px 0 0;
  color: #50657a;
  font-size: 1.04rem;
  line-height: 1.9;
}

/* 雪場介紹區 */
.resort {
  position: relative;
  z-index: 1;
  margin-top: -220px;
  display: flex;
  align-items: flex-end;
  min-height: 760px;
  padding: 0 0 80px;
  overflow: hidden;
}

.resort-media {
  position: absolute;
  top: -55%;
  left: 0;
  right: 0;
  height: 210%;
  z-index: -1;
  will-change: transform;
}

.resort-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.resort-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.resort-card {
  grid-column: 8 / 13;
  padding: 36px 40px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(8, 40, 78, 0.22);
}

.resort-heading {
  border-left: 4px solid #8ac3f1;
  padding-left: 16px;
}

.resort-heading h2 {
  margin: 0;
  color: #0d2238;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.resort-subtitle {
  margin: 10px 0 0;
  color: #0d2238;
  font-size: 1.05rem;
  font-weight: 800;
}

.resort-text {
  margin: 22px 0 0;
  color: #50657a;
  font-size: 1rem;
  line-height: 1.95;
}

/* 特色介紹區（深色） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.features {
  padding: var(--space-2xl) 0;
  background: #24262b;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.feature {
  grid-column: span 6;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}

.feature-image {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-heading {
  grid-column: 1 / 6;
  margin-top: 30px;
  border-left: 4px solid #8ac3f1;
  padding-left: 16px;
}

.feature-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.feature-subtitle {
  margin: 10px 0 0;
  color: #e6ebf2;
  font-size: 1rem;
  font-weight: 800;
}

.feature-text {
  grid-column: 1 / 6;
  margin: 22px 0 0;
  color: #a7b0bc;
  font-size: 1rem;
  line-height: 1.95;
}

/* FAQ 手風琴區 */
.faq {
  padding: var(--space-2xl) 0;
  background: #ffffff;
}

.faq .section-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.faq-heading {
  grid-column: 1 / -1;
  margin-bottom: 40px;
  text-align: center;
}

.faq-heading h2 {
  margin: 0;
  color: #0d2238;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
}

.faq-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  column-gap: 24px;
  row-gap: 44px;
  align-items: start;
}

.faq-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-cat {
  margin: 0 0 4px;
  text-align: center;
  color: #0d2238;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.faq-item {
  border: 1px solid rgba(138, 195, 241, 0.5);
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
  transition: background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* 僅在真正支援 hover 的裝置（桌機）套用；避免觸控點按後淺藍底色黏住 */
@media (hover: hover) {
  .faq-item:hover {
    background: var(--frost);
  }
}

.faq-q-heading {
  margin: 0;
  font-size: 1rem;
}

.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* 滑鼠／觸控按下不顯示方角外框；鍵盤 Tab 才顯示圓角焦點框（無障礙） */
.faq-q:focus:not(:focus-visible) {
  outline: none;
}

.faq-q:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: -3px;
  border-radius: 20px;
}

.faq-q-text {
  color: #0d2238;
  font-size: 1.05rem;
  font-weight: 700;
}

.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  background-color: #5b7187;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.75 11H12.5V3.75C12.5 3.33579 12.1642 3 11.75 3C11.3358 3 11 3.33579 11 3.75V11H3.75C3.33579 11 3 11.3358 3 11.75C3 12.1642 3.33579 12.5 3.75 12.5H11V19.75C11 20.1642 11.3358 20.5 11.75 20.5C12.1642 20.5 12.5 20.1642 12.5 19.75V12.5H19.75C20.1642 12.5 20.5 12.1642 20.5 11.75C20.5 11.3358 20.1642 11 19.75 11Z' fill='black'/%3E %3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.75 11H12.5V3.75C12.5 3.33579 12.1642 3 11.75 3C11.3358 3 11 3.33579 11 3.75V11H3.75C3.33579 11 3 11.3358 3 11.75C3 12.1642 3.33579 12.5 3.75 12.5H11V19.75C11 20.1642 11.3358 20.5 11.75 20.5C12.1642 20.5 12.5 20.1642 12.5 19.75V12.5H19.75C20.1642 12.5 20.5 12.1642 20.5 11.75C20.5 11.3358 20.1642 11 19.75 11Z' fill='black'/%3E %3C/svg%3E") center / contain no-repeat;
}

.faq-item.is-open .faq-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.75 12.5H3.75C3.33579 12.5 3 12.1642 3 11.75C3 11.3358 3.33579 11 3.75 11H19.75C20.1642 11 20.5 11.3358 20.5 11.75C20.5 12.1642 20.1642 12.5 19.75 12.5Z' fill='black'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.75 12.5H3.75C3.33579 12.5 3 12.1642 3 11.75C3 11.3358 3.33579 11 3.75 11H19.75C20.1642 11 20.5 11.3358 20.5 11.75C20.5 12.1642 20.1642 12.5 19.75 12.5Z' fill='black'/%3E %3C/svg%3E");
}

/* 展開/收合用高度動畫（grid-template-rows 0fr→1fr）平滑呈現，不瞬間切換 */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 32px;
  transition: grid-template-rows 320ms ease-in-out;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}

/* 底部間距放在內容上（而非 inner 本身），收合時才能一起被裁切歸零 */
.faq-a-inner > :last-child {
  padding-bottom: 24px;
}

.faq-a p,
.faq-a ul {
  margin: 0;
  color: #50657a;
  font-size: 1rem;
  line-height: 1.85;
}

.faq-a ul {
  padding-left: 1.2rem;
}

.faq-a li {
  padding-left: 2px;
}

/* Footer */
.site-footer {
  padding: 80px 0 48px;
  background: #1f2126;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 40px;
}

.footer-col:nth-child(1) {
  grid-column: 1 / 5;
}

.footer-col:nth-child(2) {
  grid-column: 5 / 9;
}

.footer-col:nth-child(3) {
  grid-column: 9 / 13;
}

.footer-title {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a {
  position: relative;
  padding-left: 18px;
  color: #a7b0bc;
  font-size: 1rem;
  transition: color 160ms ease;
}

.footer-links a::before {
  position: absolute;
  left: 0;
  color: #6b7580;
  content: "・";
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-social a {
  display: inline-flex;
  transition: transform 160ms ease;
}

.footer-social a:hover {
  transform: translateY(-2px);
}

.footer-social img {
  display: block;
  width: 44px;
  height: 44px;
}

.footer-legal {
  margin: 0 0 6px;
  color: #a7b0bc;
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-copy {
  margin: 22px 0 0;
  color: #8b939d;
  font-size: 0.95rem;
}

@keyframes slow-drift {
  from {
    transform: scale(1.03) translate3d(-0.4%, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(0.8%, -0.6%, 0);
  }
}

@keyframes sheen {
  0%,
  36% {
    transform: translateX(-44%);
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  74%,
  100% {
    transform: translateX(42%);
    opacity: 0;
  }
}

@keyframes timeline {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(240%);
  }
}

@media (max-width: 820px) {
  .site-header {
    top: 20px;
    width: calc(100% - 40px);
    min-height: auto;
    padding: 9px 14px;
  }

  .hero {
    height: clamp(520px, calc(100svh - 72px), 740px);
    min-height: 520px;
  }

  .hero-overlay {
  background:
      linear-gradient(180deg, rgba(8, 28, 55, 0.2) 0%, rgba(8, 28, 55, 0.74) 70%, rgba(8, 28, 55, 0.84) 100%),
      linear-gradient(90deg, rgba(8, 40, 78, 0.54) 0%, rgba(8, 40, 78, 0.1) 100%);
  }

  .hero-video {
    object-position: 62% center;
  }

  .hero-content {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 92px;
    align-self: end;
    padding-bottom: 108px;
  }

  .hero h1 {
    max-width: 520px;
    font-size: clamp(3.8rem, 18.5vw, 6.8rem);
  }

  .plan-card h3 {
    font-size: clamp(1.2rem, 6vw, 1.8rem);
  }

  .plan-description {
    min-height: 0;
  }

  .services {
    padding: 64px 0 76px;
  }

  .deposit-note {
    gap: 8px;
    padding: 14px 16px;
  }

  /* 手機：卡片進場略快、位移較短，避免堆疊時拖沓 */
  .js-reveal .plan-card.reveal {
    transition-duration: 900ms;
  }

  .js-reveal .plan-card.reveal:not(.is-visible) {
    transform: translateY(24px);
  }

  /* 手機：卡片各自進場，錯開維持較小 */
  .js-reveal .service-plans .plan-card:nth-child(2) {
    --reveal-delay: 90ms;
  }

  .js-reveal .service-plans .plan-card:nth-child(3) {
    --reveal-delay: 180ms;
  }

  /* 手機：訂金提示改為可換行（不再壓縮字級），繁中「接受…」會落到第二行 */
  .deposit-note p {
    white-space: normal;
    font-size: 0.85rem;
  }

  /* 匯率提示較長，手機一律可換行（含繁中香港） */
  .fx-note p {
    white-space: normal;
  }

  .section-inner {
    width: calc(100% - 40px);
  }

  /* 手機：所有 12 欄格線收合成單欄 */
  .services-top,
  .service-plans,
  .about-grid,
  .features-grid,
  .resort-inner,
  .faq .section-inner,
  .footer-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .services-heading,
  .services-desc {
    grid-column: auto;
  }

  .services-desc {
    margin-top: 20px;
  }

  .footer-col:nth-child(1),
  .footer-col:nth-child(2),
  .footer-col:nth-child(3) {
    grid-column: auto;
  }

  .plan-card,
  .about-grid > picture,
  .about-heading,
  .about-description,
  .feature,
  .resort-card,
  .faq-heading,
  .faq-list {
    grid-column: auto;
  }

  .services h2 {
    font-size: 2.6rem;
  }

  .services-subtitle .sm-br {
    display: inline;
  }

  .services-subtitle .lg-comma {
    display: none;
  }

  /* 手機：卡片間距改由上下留白 + 中間細分隔線構成，加強區隔 */
  .service-plans {
    row-gap: 0;
  }

  .plan-card + .plan-card {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }

  .about {
    padding: 64px 0 0;
  }

  .about-grid {
    row-gap: 28px;
  }

  /* 手機：文字在前、圖片移到最後，縮小約 80% 寬、靠左 */
  .about-grid > picture {
    order: 1;
    width: 80%;
    justify-self: start;
  }

  .about-image {
    aspect-ratio: 4 / 5;
  }

  .resort {
    margin-top: -80px;
    min-height: 860px;
    padding: 88px 0 32px;
    align-items: flex-end;
  }

  .resort-card {
    padding: 28px;
  }

  .features {
    padding: 72px 0;
  }

  .features-grid {
    row-gap: 48px;
  }

  .feature {
    display: block;
  }

  .plan-card {
    gap: 24px;
    /* 桌機的 100% 等高在手機單欄 Grid 會依整個容器高度計算，
       WebKit 因此把每張卡片撐出大量留白。手機改回內容高度。 */
    min-height: 0;
  }
}

@media (max-width: 460px) {
  .site-header {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}