/* ============================================================
   DDNY GROUP — Global Stylesheet
   Dark-luxe: deep blue / deep green base + gold accents
   ============================================================ */

:root {
  /* Brand palette */
  --c-blue: #272652;
  --c-red: #8b2022;
  --c-green: #093a1f;
  /* Refined champagne-gold — muted & less saturated to avoid the "mustard" look */
  --c-gold: #cbb78f;
  /* Metallic gradient for large display text */
  --grad-gold: linear-gradient(175deg, #f2e9d2 0%, #d7c39a 38%, #b89c66 72%, #9a7f50 100%);

  /* Derived tones — base/background tones kept unchanged (底色不變) */
  --c-blue-soft: #1a1940;
  --c-blue-deep: #0a0928;
  --c-blue-darker: #05041a;
  --c-green-deep: #061d10;
  --c-green-soft: #0d4a27;
  --c-gold-soft: #ecdfc4;
  --c-gold-dim: #97855f;
  --c-ink: #0a0a0a;
  --c-paper: #f5efe4;
  /* Hairline rules — far more restrained than before */
  --c-line: rgba(214, 196, 160, 0.12);
  --c-line-strong: rgba(214, 196, 160, 0.34);

  /* Page-level base — deep space blue (matches the homepage hero) */
  --c-base: #070d28;
  --c-base-darker: #03040f;

  /* Typography */
  --ff-serif-cn: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  --ff-serif-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-sans: 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --nav-h: 88px;
  --container: 1240px;

  /* Effects */
  --shadow-deep: 0 40px 100px -40px rgba(0, 0, 0, 0.85);
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ============================================================
   集團盛典 — 年終盛典＋世界之旅（refined）
   ============================================================ */
.gala-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 210px);
  padding-bottom: 92px;
}
.gala-hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 24%, rgba(203, 183, 143, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(3, 4, 15, 0.2), rgba(3, 4, 15, 0.55)),
    url('/images/materials/nebula.webp?v=2') 50% 28% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 100% 82% at 50% 30%, #000 32%, transparent 92%);
  mask-image: radial-gradient(ellipse 100% 82% at 50% 30%, #000 32%, transparent 92%);
  opacity: 0.85;
}
.gala-hero .container { position: relative; z-index: 2; }
.gala-hero-jet {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--nav-h) + 6px);
  width: min(36vw, 400px);
  opacity: 0.95;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.6));
  animation: galaJet 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes galaJet {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  50% { transform: translateX(-50%) translateY(-14px) rotate(1deg); }
}
.gala-hero-lead {
  max-width: 560px;
  margin: 26px auto 0;
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: rgba(245, 239, 228, 0.72);
  text-align: center;
}

.gala-section { padding-top: 96px; }
.gala-block { margin-bottom: 104px; }
.gala-block:last-child { margin-bottom: 0; }

.gala-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.gala-head h2 {
  font-family: var(--ff-serif-cn);
  font-size: 33px;
  letter-spacing: 0.14em;
  color: var(--c-paper);
  margin: 30px 0 0;
}
.gala-rule, .gala-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px auto 0;
}
.gala-rule { width: 210px; }
.gala-rule span { flex: 1; height: 1px; background: var(--c-line-strong); }
.gala-rule i { font-style: normal; font-size: 11px; line-height: 1; color: var(--c-gold); }
.gala-route { width: 320px; color: var(--c-gold); font-family: var(--ff-serif-en); font-size: 12px; letter-spacing: 0.3em; }
.gala-route span { flex: 0 0 auto; }
.gala-route i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(203,183,143,0.5) 0 5px, transparent 5px 11px); }
.gala-route b { font-size: 14px; }
.gala-sub {
  font-family: var(--ff-serif-cn);
  font-size: 15.5px;
  line-height: 2;
  color: rgba(245, 239, 228, 0.68);
  margin: 22px 0 0;
}

.gala-grid { display: grid; gap: 26px; }
.gala-grid-portrait { grid-template-columns: repeat(3, 1fr); }
.gala-grid-journey { grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* 金框相片卡 */
.gala-item {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  box-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.82);
  cursor: zoom-in;
  outline: none;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.gala-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.gala-grid-portrait .gala-item { aspect-ratio: 3 / 4; }
.gala-grid-journey .gala-item { aspect-ratio: 1.414; }
/* 香檳金金屬外框 */
.gala-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border: 8px solid transparent;
  border-image: linear-gradient(135deg, #f7efd6 0%, #ddc99f 28%, #a2854f 50%, #e6d3a8 74%, #f7efd6 100%) 1;
  transition: filter 0.4s var(--ease);
}
/* 內層細金線＋四角飾點 */
.gala-item::after {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(247, 239, 214, 0.5);
  background:
    radial-gradient(circle, rgba(247, 239, 214, 0.92) 0 1.6px, transparent 2.4px) left top / 10px 10px no-repeat,
    radial-gradient(circle, rgba(247, 239, 214, 0.92) 0 1.6px, transparent 2.4px) right top / 10px 10px no-repeat,
    radial-gradient(circle, rgba(247, 239, 214, 0.92) 0 1.6px, transparent 2.4px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle, rgba(247, 239, 214, 0.92) 0 1.6px, transparent 2.4px) right bottom / 10px 10px no-repeat;
}
.gala-item:hover, .gala-item:focus-visible {
  box-shadow: 0 0 0 1px rgba(203, 183, 143, 0.3), 0 32px 70px -26px rgba(0, 0, 0, 0.85), 0 0 42px rgba(203, 183, 143, 0.22);
  transform: translateY(-5px);
}
.gala-item:hover img, .gala-item:focus-visible img { transform: scale(1.045); }
.gala-item:hover::before, .gala-item:focus-visible::before { filter: brightness(1.16) saturate(1.08); }

.gi-zoom {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 7;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c-gold-soft);
  background: rgba(6, 9, 30, 0.55);
  border: 1px solid rgba(203, 183, 143, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.gala-item:hover .gi-zoom, .gala-item:focus-visible .gi-zoom { opacity: 1; transform: scale(1); }

/* 世界之旅：序號＋地點 */
.gj-index {
  position: absolute;
  top: 15px; left: 19px;
  z-index: 7;
  font-family: var(--ff-serif-en);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.gj-cap {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 5;
  padding: 40px 14px 14px;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(3, 4, 15, 0.86));
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.gj-cap b {
  display: block;
  font-family: var(--ff-serif-cn);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #fff;
}
.gj-cap i {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-serif-en);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}
.gala-journey:hover .gj-cap, .gala-journey:focus-visible .gj-cap { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .gala-grid-journey { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gala-hero { padding-top: calc(var(--nav-h) + 128px); padding-bottom: 60px; }
  .gala-hero-jet { width: 190px; top: calc(var(--nav-h) + 4px); opacity: 0.8; }
  .gala-hero-lead { font-size: 14px; }
  .gala-section { padding-top: 64px; }
  .gala-block { margin-bottom: 66px; }
  .gala-head { margin-bottom: 34px; }
  .gala-head h2 { font-size: 26px; }
  .gala-route { width: 240px; }
  .gala-grid { gap: 16px; }
  .gala-grid-portrait { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gj-cap { opacity: 1; transform: none; padding: 30px 12px 12px; }
  .gj-cap b { font-size: 15px; }
}
@media (max-width: 520px) {
  .gala-grid-portrait {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Lightbox ---------- */
.gala-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: rgba(3, 4, 12, 0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.gala-lightbox.open { opacity: 1; visibility: visible; }
.glb-stage { max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.glb-img {
  max-width: 92vw; max-height: 86vh;
  object-fit: contain;
  border: 1px solid rgba(203, 183, 143, 0.4);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease);
}
.gala-lightbox.open .glb-img { transform: scale(1); }
.glb-close {
  position: absolute; top: 18px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 10, 28, 0.55); color: var(--c-gold);
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
  cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.glb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 10, 28, 0.55); color: var(--c-gold);
  font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.glb-prev { left: 20px; }
.glb-next { right: 20px; }
.glb-close:hover, .glb-nav:hover { background: rgba(203, 183, 143, 0.92); color: #0a0f2a; }
.glb-count {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--ff-serif-en); font-size: 12px; letter-spacing: 0.24em;
  color: rgba(245, 239, 228, 0.55);
}
@media (max-width: 720px) {
  .glb-nav { width: 42px; height: 42px; font-size: 24px; }
  .glb-prev { left: 8px; }
  .glb-next { right: 8px; }
  .glb-close { top: 12px; right: 12px; }
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html,
body {
  /* 裁掉任何超出視窗的橫向內容（3D 輪播側卡等），避免頁面左右晃動；
     用 clip 而非 hidden — 不產生捲動容器，不影響 sticky 導覽列 */
  overflow-x: clip;
}

body {
  font-family: var(--ff-sans);
  background: var(--c-base);
  color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.012em;
  line-height: 1.75;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-serif-cn);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: var(--c-gold);
  color: var(--c-blue-deep);
}

/* ---------- App shell ---------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(72, 116, 214, 0.16), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(16, 24, 70, 0.45), transparent 60%),
    linear-gradient(180deg, #0b1130 0%, #070d28 50%, #03040f 100%);
}

main {
  flex: 1;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .container {
    padding: 0 20px;
  }
}

/* ---------- Shared atoms ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-serif-en);
  font-size: 13px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.eyebrow::before,
.eyebrow.both::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.7;
}

.section-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--c-paper);
  margin-top: 22px;
}

.section-title .accent {
  color: var(--c-gold);
  font-family: var(--ff-serif-en);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub {
  max-width: 640px;
  margin-top: 20px;
  color: rgba(245, 239, 228, 0.72);
  font-size: 16.5px;
  line-height: 1.85;
}

.section {
  padding: 78px 0;
  position: relative;
}

@media (max-width: 720px) {
  .section {
    padding: 42px 0;
  }
}

/* Gold rule */
.rule-gold {
  width: 56px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.8;
}

/* Buttons — framed ghost with gold sweep + inset hairline detail */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  font-family: var(--ff-sans);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* gold sweep fill */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-gold);
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease);
}

/* inset hairline frame — the crafted detail */
.btn::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid rgba(214, 196, 160, 0.26);
  pointer-events: none;
  transition: border-color 0.45s var(--ease);
}

.btn span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn:hover {
  color: var(--c-blue-deep);
  border-color: var(--c-gold);
}

.btn:hover::before {
  transform: translateX(0);
}

.btn:hover::after {
  border-color: rgba(10, 9, 40, 0.32);
}

/* Primary — subtle gold tint + full gold frame to lead the eye */
.btn-filled {
  color: var(--c-gold);
  border-color: var(--c-gold);
  background: rgba(198, 168, 107, 0.1);
}

.btn-filled:hover {
  color: var(--c-blue-deep);
}

/* Red variant */
.btn-red {
  border-color: var(--c-red);
  color: var(--c-red);
}

.btn-red::before {
  background: var(--c-red);
}

.btn-red:hover {
  color: var(--c-paper);
}

.btn-red:hover {
  color: var(--c-paper);
}

/* ---------- Navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: rgba(10, 10, 30, 0.12);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), height 0.45s var(--ease);
}

/* 手機選單開啟時：header 固定於視窗頂端，背景滑動也不會被捲走 */
body.menu-open .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.nav.scrolled {
  background: rgba(26, 25, 64, 0.42);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-bottom-color: var(--c-line);
}

/* Full-bleed heroes sit behind the same frosted navigation used on home. */
.has-hero-nav .nav {
  background: rgba(7, 13, 40, 0.2);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border-bottom-color: rgba(203, 183, 143, 0.08);
}

.has-hero-nav .nav.scrolled {
  background: rgba(26, 25, 64, 0.78);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-bottom-color: var(--c-line);
}

.nav-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Stable nav layout: links stay centered regardless of language width */
.nav-inner > .brand {
  grid-column: 1;
  justify-self: start;
}

.nav-inner > .nav-links {
  grid-column: 2;
  justify-self: center;
}

.nav-inner > .nav-actions {
  grid-column: 3;
  justify-self: end;
}

.nav-inner > .hamburger {
  grid-column: 3;
  justify-self: end;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text .en {
  font-family: var(--ff-serif-en);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

.brand-text .cn {
  font-family: var(--ff-serif-cn);
  /* 字級略小於 DDNY，以字距撐至與上行近等寬的字標鎖定 */
  font-size: 14px;
  letter-spacing: 0.5em;
  color: rgba(217, 187, 154, 0.85);
  margin-top: 7px;
  white-space: nowrap; /* 手機不斷行 */
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(245, 239, 228, 0.92);
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: all 0.4s var(--ease);
}

.nav-link:hover,
.nav-link.active {
  color: var(--c-gold);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--c-gold);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  transition: color 0.3s var(--ease);
}

/* divider between toggle and CTA */
.nav-cta::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--c-line-strong);
}

/* animated underline */
.nav-cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 0.4s var(--ease);
}

.nav-cta:hover {
  color: var(--c-gold-soft);
}

.nav-cta:hover::after {
  width: 100%;
}

/* Language-switch crossfade — hides text-length reflow during toggle */
.app-shell {
  transition: opacity 0.2s var(--ease);
}

body.lang-fade .app-shell {
  opacity: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: rgba(245, 239, 228, 0.85);
  font-family: var(--ff-serif-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
  transition: color 0.3s var(--ease);
}

.lang-toggle:hover {
  color: var(--c-gold);
}

.mobile-menu .lang-toggle {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--c-gold);
  padding: 11px 24px;
  border: 1px solid var(--c-line-strong);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.mobile-menu .lang-toggle:hover {
  border-color: var(--c-gold);
}

.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
}

.hamburger span {
  width: 20px;
  height: 1px;
  background: var(--c-gold);
  position: relative;
  transition: all 0.3s var(--ease);
}

.hamburger span::before,
.hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-gold);
  transition: all 0.3s var(--ease);
}

.hamburger span::before {
  top: -6px;
}
.hamburger span::after {
  top: 6px;
}

.hamburger.open span {
  background: transparent;
}
.hamburger.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger.open span::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(40, 64, 130, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(11, 17, 48, 0.92) 0%, rgba(7, 13, 40, 0.94) 55%, rgba(3, 4, 15, 0.97) 100%);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu .nav-link {
  position: relative;
  font-family: var(--ff-serif-cn);
  font-size: 23px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: rgba(245, 239, 228, 0.85);
  padding: 4px 2px;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.4s var(--ease), opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.mobile-menu .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: var(--grad-gold);
  transform: translateX(-50%);
  transition: width 0.45s var(--ease);
}

.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
  color: var(--c-gold);
}

.mobile-menu .nav-link:hover::after,
.mobile-menu .nav-link.active::after {
  width: 32px;
}

.mobile-menu.open .nav-link,
.mobile-menu.open .lang-toggle {
  opacity: 1;
  transform: none;
}

.mobile-menu.open .nav-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .nav-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .nav-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .nav-link:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.open .lang-toggle { transition-delay: 0.30s; }

/* DDNY wordmark — refined sign-off pinned to the bottom of the menu */
.mobile-menu .mm-logo {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 132px;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.mobile-menu.open .mm-logo {
  opacity: 0.82;
  transform: translate(-50%, 0);
  transition-delay: 0.38s;
}

@media (max-width: 960px) {
  .nav-links,
  .nav-cta,
  .nav-actions {
    display: none;
  }
  .hamburger {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(820px 540px at 22% 28%, rgba(64, 62, 122, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(20, 19, 56, 0.12) 0%, rgba(20, 19, 56, 0.5) 100%);
  z-index: 0;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
}

.hero-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.015em;
  color: var(--c-paper);
}

.hero-title .line-en {
  display: block;
  font-family: var(--ff-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.38em;
  letter-spacing: 0.25em;
  color: var(--c-gold);
  margin-top: 24px;
}

.hero-title .gold {
  color: var(--c-gold);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  margin-top: 36px;
  max-width: 540px;
  color: rgba(245, 239, 228, 0.78);
  font-size: 17px;
  line-height: 1.9;
}

.hero-ctas {
  margin-top: 44px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-stats {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  max-width: 560px;
}

.hero-stats .num {
  font-family: var(--ff-serif-en);
  font-size: 40px;
  color: var(--c-gold);
  letter-spacing: 0.04em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-stats .lbl {
  font-size: 12px;
  color: rgba(245, 239, 228, 0.6);
  letter-spacing: 0.3em;
  margin-top: 4px;
}

/* Hero visual (crest card) */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-card {
  position: relative;
  width: 100%;
  background: transparent;
}

.hero-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.hero-card .crest {
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.hero-card .cap {
  margin-top: 28px;
  font-family: var(--ff-serif-en);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
}

.hero-card .sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.5em;
  color: rgba(217, 187, 154, 0.6);
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-visual {
    max-width: 440px;
    margin: 0 auto;
  }
}

/* ---------- Brand pillars (homepage) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 60px;
  align-items: stretch;
}

.pillars > * {
  display: flex;
}

.pillar {
  width: 100%;
  height: 100%;
  padding: 40px 32px;
  border: 1px solid var(--c-line);
  background: rgba(10, 9, 40, 0.55);
  transition: all 0.5s var(--ease);
  position: relative;
  overflow: hidden;
}

.pillar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--c-gold);
  transition: width 0.6s var(--ease);
}

.pillar:hover {
  background: rgba(39, 38, 82, 0.4);
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
}

.pillar:hover::after {
  width: 100%;
}

.pillar .num {
  font-family: var(--ff-serif-en);
  color: var(--c-gold);
  font-size: 14px;
  letter-spacing: 0.3em;
}

.pillar h3 {
  margin-top: 20px;
  font-size: 22px;
  color: var(--c-paper);
}

.pillar p {
  margin-top: 14px;
  font-size: 14.5px;
  color: rgba(245, 239, 228, 0.7);
  line-height: 1.85;
}

@media (max-width: 820px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sub-brands ---------- */
.subbrands {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.subbrands > * {
  display: flex;
}

.subbrand {
  position: relative;
  width: 100%;
  padding: 56px 44px;
  min-height: 320px;
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: all 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.subbrand.blue {
  background: linear-gradient(160deg, #3a3877 0%, #232250 100%);
}
.subbrand.red {
  background: linear-gradient(160deg, #5a1618 0%, var(--c-red) 100%);
}
.subbrand.green {
  background: linear-gradient(160deg, var(--c-green-soft) 0%, var(--c-green) 100%);
}
.subbrand.ink {
  background: linear-gradient(160deg, #161616 0%, #0a0a0a 100%);
}
.subbrand.mocha {
  background: linear-gradient(160deg, #3a2a1e 0%, #1e1410 100%);
}
.subbrand.gold {
  background: linear-gradient(160deg, #6b553f 0%, #2a2018 100%);
}

.subbrand::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(217, 187, 154, 0.25);
  pointer-events: none;
  transition: border-color 0.5s var(--ease);
}

.subbrand:hover {
  transform: translateY(-4px);
}

.subbrand:hover::before {
  border-color: var(--c-gold);
}

.subbrand .cat {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.45em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.subbrand .name {
  margin-top: 18px;
  font-family: var(--ff-serif-en);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-paper);
}

.subbrand .name-cn {
  margin-top: 8px;
  font-family: var(--ff-serif-cn);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: rgba(245, 239, 228, 0.7);
}

.subbrand .desc {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(245, 239, 228, 0.72);
  line-height: 1.8;
  max-width: 360px;
}

.subbrand .more {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.subbrand .more::after {
  content: '→';
  transition: transform 0.3s var(--ease);
}

.subbrand:hover .more::after {
  transform: translateX(8px);
}

@media (max-width: 820px) {
  .subbrands {
    grid-template-columns: 1fr;
  }
}

/* ---------- Featured works ---------- */
.works {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 60px;
}

.work {
  position: relative;
  flex: 0 1 calc((100% - 40px) / 3);
  overflow: hidden;
  border: 1px solid var(--c-line);
  aspect-ratio: 4 / 5;
  cursor: pointer;
}

/* uniform tiles — no wide variant */

.work-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
}

.work:hover .work-bg {
  transform: scale(1.06);
}

.work-bg.w1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(217, 187, 154, 0.35), transparent 50%),
    linear-gradient(135deg, #1a1940 0%, #272652 50%, #0e0d28 100%);
}
.work-bg.w2 {
  background:
    radial-gradient(circle at 70% 40%, rgba(217, 187, 154, 0.25), transparent 50%),
    linear-gradient(135deg, #06180e 0%, #093a1f 60%, #03100a 100%);
}
.work-bg.w3 {
  background:
    radial-gradient(circle at 40% 60%, rgba(217, 187, 154, 0.28), transparent 50%),
    linear-gradient(135deg, #3a0f10 0%, #8b2022 60%, #2a0809 100%);
}
.work-bg.w4 {
  background:
    radial-gradient(circle at 50% 20%, rgba(217, 187, 154, 0.3), transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 50%, #050505 100%);
}
.work-bg.w5 {
  background:
    radial-gradient(circle at 20% 80%, rgba(217, 187, 154, 0.25), transparent 55%),
    linear-gradient(135deg, #093a1f 0%, #1a1940 60%, #040b08 100%);
}

.work::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
}

.work-info {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  color: var(--c-paper);
}

.work-info .tag {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
}

.work-info h4 {
  margin-top: 10px;
  font-size: 20px;
  color: var(--c-paper);
}

@media (max-width: 820px) {
  .work {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 520px) {
  .work {
    flex-basis: 100%;
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  padding: 100px 0;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(217, 187, 154, 0.1), transparent 60%),
    radial-gradient(700px 360px at 78% 100%, rgba(40, 70, 150, 0.18), transparent 70%),
    linear-gradient(180deg, #0a1130 0%, #03040f 100%);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.cta-band h2 {
  font-size: clamp(28px, 4vw, 46px);
  color: var(--c-paper);
}

.cta-band p {
  margin: 20px auto 40px;
  max-width: 560px;
  color: rgba(245, 239, 228, 0.72);
}

/* ---------- Footer ---------- */
.footer {
  background: linear-gradient(180deg, #060c22 0%, #02030c 100%);
  border-top: 1px solid var(--c-line);
  color: rgba(245, 239, 228, 0.7);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  /* 兩欄：品牌簡介｜聯絡資訊（Sitemap 移至下方全寬卡片區） */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.footer-grid li {
  white-space: nowrap; /* 地址、電話不斷行 */
}

.footer h5 {
  font-family: var(--ff-serif-en);
  font-size: 17px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
  text-transform: uppercase;
  line-height: 36px;
  margin-bottom: 18px;
}

/* ---------- Footer SITEMAP（裝飾卡片版） ---------- */
.footer-sitemap {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid rgba(203, 183, 143, 0.18);
  text-align: center;
}
.footer-sitemap .fs-title {
  font-family: var(--ff-serif-en);
  font-size: 17px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--c-gold);
  line-height: 1;
  margin: 0 0 12px;
}
.footer-sitemap .fs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 190px;
  margin: 0 auto 30px;
}
.footer-sitemap .fs-divider span { flex: 1; height: 1px; background: var(--c-line-strong); }
.footer-sitemap .fs-divider i { font-style: normal; font-size: 11px; line-height: 1; color: var(--c-gold); }

.sitemap-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  border-top: 0;
}
.sitemap-cards a {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 10px 15px;
  border: 1px solid rgba(203, 183, 143, 0.35);
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.sitemap-cards .orn {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--c-gold);
}
.sitemap-cards .orn::after {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--c-gold-dim);
  margin: 8px auto 0;
}
.sitemap-cards .lbl {
  font-family: var(--ff-serif-cn);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: rgba(245, 239, 228, 0.9);
}
.sitemap-cards small { display: none; }
.sitemap-cards a::before { display: none; }
.sitemap-cards a::after { content: none; }
.sitemap-cards a:hover {
  border-color: var(--c-gold);
  background: rgba(203, 183, 143, 0.06);
  box-shadow: 0 0 26px rgba(203, 183, 143, 0.14);
  transform: translateY(-3px);
}
.sitemap-cards a:hover .lbl { color: var(--c-gold-soft); }

@media (max-width: 900px) {
  .sitemap-cards a { flex: 0 0 140px; }
}
@media (max-width: 720px) {
  .footer-sitemap { margin-top: 48px; }
  .sitemap-cards { gap: 10px; }
  .sitemap-cards a { flex: 0 0 calc(50% - 10px); padding: 15px 8px 13px; }
}

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

.footer a:hover {
  color: var(--c-gold);
}

.footer .tagline {
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  line-height: 1.9;
  color: rgba(245, 239, 228, 0.85);
  margin-top: 14px;
}

/* Footer 品牌簡介段落 */
.footer .footer-intro {
  font-size: 14px;
  line-height: 2.05;
  color: rgba(245, 239, 228, 0.68);
  max-width: 440px;
  margin-top: 18px;
  text-align: justify;
}

/* Footer 英文標語 */
.footer .footer-slogan-en {
  font-family: var(--ff-serif-en);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--c-gold);
  margin: 18px 0 0;
}

.footer-brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-brand .en {
  font-family: var(--ff-serif-en);
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

/* 第一欄標題 — 與 SITEMAP / CONTACT 完全同款、同大小、切齊；
   徽章縮小後與標題文字同列置中，三欄標題文字落在同一條中線 */
.footer h5.footer-brand-title {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer h5.footer-brand-title .crest {
  width: 36px;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  letter-spacing: 0.15em;
  color: rgba(245, 239, 228, 0.45);
}

.socials {
  display: flex;
  gap: 12px;
}

.social {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  color: var(--c-gold);
  transition: all 0.3s var(--ease);
}

.social:hover {
  background: var(--c-gold);
  color: var(--c-blue-deep);
  border-color: var(--c-gold);
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

/* 手機版 footer — 置中、緊湊、有層次 */
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    text-align: center;
  }
  .footer-brand {
    justify-content: center;
  }
  .footer h5.footer-brand-title {
    justify-content: center;
  }
  .footer-grid li {
    white-space: normal; /* 手機允許換行，避免長字撐版 */
  }
  .footer .footer-intro {
    text-align: left; /* 窄版兩端對齊會拉出大空隙，改自然斷行 */
  }
  .socials {
    justify-content: center;
  }
  .footer-bottom {
    margin-top: 44px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}

/* ---------- Page header (subpages) ---------- */
.page-header {
  position: relative;
  padding: 108px 0 40px;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 720px) {
  .page-header {
    padding: 88px 0 24px;
  }
}

/* glow + grid removed site-wide — the champagne lattice now carries every subpage */
.page-header::before {
  display: none;
}

.page-header-bg {
  display: none;
}

/* keep all page content above the global lattice + DDNY watermark */
main {
  position: relative;
  z-index: 1;
}

.footer {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  text-wrap: balance; /* 長標題手機斷行平衡 */
}

.page-header .eyebrow {
  justify-content: center;
}

.page-header h1 {
  position: relative;
  font-size: clamp(36px, 4.4vw, 58px);
  color: var(--c-paper);
  margin-top: 20px;
}

.page-header .lead {
  position: relative;
  margin: 26px auto 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(245, 239, 228, 0.74);
}

/* ---------- Brand intro page — champagne lattice + DDNY watermark ---------- */
.brand-header {
  border-bottom: none;
}

.brand-header::before {
  display: none;
}

.brand-header .page-header-bg {
  display: none;
}

.brand-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(70% 55% at 50% 6%, rgba(204, 178, 122, 0.055), transparent 70%),
    repeating-linear-gradient(45deg, rgba(204, 178, 122, 0.038) 0, rgba(204, 178, 122, 0.038) 1px, transparent 1px, transparent 134px),
    repeating-linear-gradient(-45deg, rgba(204, 178, 122, 0.038) 0, rgba(204, 178, 122, 0.038) 1px, transparent 1px, transparent 134px);
  -webkit-mask-image: radial-gradient(ellipse 96% 82% at 50% 26%, #000 20%, transparent 94%);
  mask-image: radial-gradient(ellipse 96% 82% at 50% 26%, #000 20%, transparent 94%);
}

.brand-watermark {
  position: fixed;
  right: 1.5%;
  bottom: -2.5%;
  z-index: 0;
  pointer-events: none;
  font-family: var(--ff-serif-en);
  font-weight: 600;
  font-size: clamp(150px, 23vw, 400px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgba(198, 168, 107, 0.06);
}

/* keep all brand-page content above the lattice + watermark */
.brand-header,
.brand-header ~ .section,
.brand-header ~ .cta-band {
  position: relative;
  z-index: 1;
}

/* ---------- About page ---------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-intro .lead-col p {
  font-size: 16px;
  color: rgba(245, 239, 228, 0.78);
  line-height: 2;
  margin-bottom: 20px;
}

.about-intro .lead-col p.drop::first-letter {
  font-family: var(--ff-serif-en);
  color: var(--c-gold);
  font-size: 60px;
  float: left;
  line-height: 0.9;
  padding: 8px 14px 0 0;
}

.about-intro .aside {
  position: relative;
  padding: 40px;
  border: 1px solid var(--c-line);
  background: rgba(39, 38, 82, 0.25);
}

.about-intro .aside::before {
  content: '"';
  position: absolute;
  top: -30px;
  left: 20px;
  font-family: var(--ff-serif-en);
  font-size: 120px;
  color: var(--c-gold);
  line-height: 1;
  opacity: 0.7;
}

.about-intro .aside blockquote {
  margin: 0;
  font-family: var(--ff-serif-cn);
  font-size: 22px;
  line-height: 1.8;
  color: var(--c-paper);
  font-weight: 300;
}

.about-intro .aside .sign {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

@media (max-width: 960px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.value {
  padding: 36px 24px;
  text-align: center;
  border: 1px solid var(--c-line);
  transition: all 0.4s var(--ease);
}

.value:hover {
  background: rgba(39, 38, 82, 0.28);
  border-color: var(--c-line-strong);
  transform: translateY(-4px);
}

.value .ic {
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  margin-bottom: 24px;
}

.value h4 {
  font-size: 18px;
  color: var(--c-paper);
}

.value p {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(245, 239, 228, 0.7);
  line-height: 1.8;
}

@media (max-width: 820px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

.timeline {
  margin-top: 60px;
  position: relative;
  padding-left: 36px;
  border-left: 1px solid var(--c-line-strong);
}

.timeline-item {
  position: relative;
  padding: 24px 0 40px 28px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -42px;
  top: 32px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(217, 187, 154, 0.2);
}

.timeline-item .year {
  font-family: var(--ff-serif-en);
  font-size: 32px;
  color: var(--c-gold);
  letter-spacing: 0.08em;
}

.timeline-item h4 {
  margin-top: 8px;
  font-size: 20px;
  color: var(--c-paper);
}

.timeline-item p {
  margin-top: 10px;
  color: rgba(245, 239, 228, 0.72);
  font-size: 15px;
  max-width: 680px;
}

/* ---------- News page ---------- */
.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}

.chip {
  padding: 8px 20px;
  border: 1px solid var(--c-line);
  color: rgba(245, 239, 228, 0.72);
  font-size: 13px;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.chip:hover,
.chip.active {
  border-color: var(--c-gold);
  color: var(--c-gold);
  background: rgba(217, 187, 154, 0.08);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-card {
  position: relative;
  padding: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 9, 40, 0.5);
  overflow: hidden;
  transition: all 0.5s var(--ease);
}

.news-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-line-strong);
}

.news-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.news-thumb .bg {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease);
}

.news-card:hover .bg {
  transform: scale(1.06);
}

.news-thumb .tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  background: var(--c-gold);
  color: var(--c-blue-deep);
  font-size: 11px;
  letter-spacing: 0.3em;
  z-index: 2;
}

.news-body {
  padding: 28px 28px 32px;
}

.news-body .date {
  font-family: var(--ff-serif-en);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--c-gold);
}

.news-body h3 {
  margin-top: 14px;
  font-size: 20px;
  color: var(--c-paper);
  line-height: 1.5;
}

.news-body p {
  margin-top: 14px;
  color: rgba(245, 239, 228, 0.7);
  font-size: 14px;
  line-height: 1.8;
}

.news-body .more {
  margin-top: 20px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--c-gold);
}

.news-body .more::after {
  content: '→';
  transition: transform 0.3s var(--ease);
}

.news-card:hover .more::after {
  transform: translateX(8px);
}

@media (max-width: 960px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

.contact-info {
  padding: 48px;
  border: 1px solid var(--c-line);
  background: rgba(39, 38, 82, 0.25);
}

.contact-info h3 {
  font-size: 26px;
  color: var(--c-paper);
}

.contact-info p.intro {
  margin-top: 20px;
  color: rgba(245, 239, 228, 0.72);
  line-height: 1.9;
}

.info-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.info-item .ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.info-item .txt .lbl {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.info-item .txt .val {
  margin-top: 6px;
  color: var(--c-paper);
  font-size: 15px;
  line-height: 1.7;
}

.contact-form {
  padding: 48px;
  border: 1px solid var(--c-line);
  background: rgba(10, 9, 40, 0.5);
}

.contact-form h3 {
  font-size: 26px;
  color: var(--c-paper);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-paper);
  font-family: var(--ff-sans);
  font-size: 14.5px;
  letter-spacing: 0.05em;
  transition: border-color 0.3s var(--ease);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-gold);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field select option {
  background: var(--c-green-deep);
  color: var(--c-paper);
}

.form-success {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  background: rgba(217, 187, 154, 0.08);
  font-size: 14px;
  letter-spacing: 0.15em;
}

@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Media page ---------- */
.media-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.media-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--c-line);
  cursor: pointer;
}

.media-card .bg {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
}

.media-card:hover .bg {
  transform: scale(1.05);
}

.media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.85));
}

.media-card .meta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: var(--c-paper);
}

.media-card .meta .src {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.media-card .meta h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}

.media-card .meta .date {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(245, 239, 228, 0.6);
  letter-spacing: 0.2em;
}

@media (max-width: 820px) {
  .media-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .media-gallery {
    grid-template-columns: 1fr;
  }
}

/* ---------- Video / Media gallery ---------- */
.video-hero {
  margin-top: 48px;
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  cursor: pointer;
  box-shadow: var(--shadow-deep);
}

.video-hero .bg {
  position: absolute;
  inset: 0;
  transition: transform 1s var(--ease);
}

.video-hero:hover .bg {
  transform: scale(1.04);
}

.video-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.video-hero .meta {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 44px;
  z-index: 2;
  color: var(--c-paper);
}

.video-hero .meta .chip-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.video-hero .meta h2 {
  font-family: var(--ff-serif-cn);
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--c-paper);
  line-height: 1.3;
  max-width: 780px;
}

.video-hero .meta p {
  margin-top: 18px;
  max-width: 640px;
  color: rgba(245, 239, 228, 0.75);
  font-size: 15px;
  line-height: 1.8;
}

.video-hero .meta .info-row {
  margin-top: 22px;
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: rgba(245, 239, 228, 0.65);
  font-family: var(--ff-serif-en);
  text-transform: uppercase;
}

.video-hero .meta .info-row .dot {
  width: 4px;
  height: 4px;
  background: var(--c-gold);
  border-radius: 50%;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  background: rgba(10, 9, 40, 0.55);
  backdrop-filter: blur(6px);
  z-index: 3;
  transition: all 0.4s var(--ease);
}

.play-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  opacity: 0.6;
  transition: all 0.4s var(--ease);
}

.video-hero:hover .play-btn::before,
.video-card:hover .play-btn::before,
.media-card:hover .play-btn::before {
  inset: -6px;
  border-color: var(--c-gold);
}

.play-btn svg {
  margin-left: 4px;
}

.video-hero:hover .play-btn,
.video-card:hover .play-btn,
.media-card:hover .play-btn {
  background: var(--c-gold);
  color: var(--c-blue-deep);
  transform: translate(-50%, -50%) scale(1.08);
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.play-btn.sm {
  width: 56px;
  height: 56px;
}

.play-btn.sm::before {
  display: none;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.video-card {
  position: relative;
  border: 1px solid var(--c-line);
  background: rgba(10, 9, 40, 0.5);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s var(--ease);
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.video-thumb .bg {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
}

.video-card:hover .video-thumb .bg {
  transform: scale(1.06);
}

.video-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.6));
}

.duration {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 4px 10px;
  background: rgba(5, 4, 26, 0.85);
  border: 1px solid var(--c-line);
  color: var(--c-gold);
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  z-index: 3;
}

.video-card .body {
  padding: 22px 24px 26px;
}

.video-card .body .cat {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.video-card .body h3 {
  margin-top: 10px;
  font-size: 17px;
  color: var(--c-paper);
  line-height: 1.5;
}

.video-card .body .row {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(245, 239, 228, 0.5);
  font-family: var(--ff-serif-en);
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-hero .meta {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
}
@media (max-width: 560px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* Channel / platform bar */
.channel-bar {
  margin-top: 80px;
  padding: 40px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}

.channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  color: rgba(217, 187, 154, 0.7);
  transition: all 0.3s var(--ease);
  cursor: pointer;
  font-family: var(--ff-serif-en);
  font-size: 14px;
  letter-spacing: 0.3em;
}

.channel:hover {
  color: var(--c-gold);
}

.channel svg {
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .channel-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Fade-up reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #020115;
}

::-webkit-scrollbar-thumb {
  background: var(--c-gold-dim);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-gold);
}

/* ============================================================
   Brand Loader — robust full-screen overlay
   ============================================================ */
body.loading {
  overflow: hidden;
}

.loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* 不寫死 100vh — 以四邊 inset 撐滿，避免手機動態視窗（網址列收合）造成不滿版 */
  width: auto;
  height: auto;
  z-index: 9999;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(39, 38, 82, 0.55), transparent 70%),
    linear-gradient(180deg, #0a0928 0%, #05041a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  /* 保險：即使 JS 未執行，開場畫面 3 秒後也自動淡出，不會擋住頁面 */
  animation: loaderFailsafe 0.7s ease 3s forwards;
}

@keyframes loaderFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 90vw;
  perspective: 900px;
}

.loader-logo {
  width: 150px;
  max-width: 36vw;
  height: auto;
  display: block;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
  animation:
    loaderLogoIn 0.7s 0.1s forwards ease-out,
    loaderFlip 2s 0.4s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes loaderLogoIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loaderFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.loader-bar {
  margin-top: 34px;
  width: 220px;
  max-width: 56vw;
  height: 1px;
  background: rgba(217, 187, 154, 0.18);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: loaderFadeIn 0.6s 0.6s forwards ease-out;
}

.loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
  animation: loaderSweep 1.5s 0.8s linear infinite;
}

@keyframes loaderSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(222%); }
}

@keyframes loaderFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.loader-text {
  margin-top: 22px;
  font-family: var(--ff-serif-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0;
  animation: loaderFadeIn 0.8s 0.9s forwards ease-out;
}

.loader-sub {
  margin-top: 8px;
  font-family: var(--ff-serif-cn);
  font-size: 11px;
  letter-spacing: 0.45em;
  color: rgba(217, 187, 154, 0.5);
  opacity: 0;
  animation: loaderFadeIn 0.8s 1.1s forwards ease-out;
}

/* ---------- MVC port: featured-video chip (was inline-styled in React) ---------- */
.media-chip {
  padding: 5px 12px;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: rgba(10, 9, 40, 0.65);
  backdrop-filter: blur(4px);
}

/* ---------- Legal / privacy page ---------- */
.legal {
  max-width: 820px;
  margin: 0 auto;
}

.legal-meta {
  font-family: var(--ff-serif-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-gold);
  margin-bottom: 44px;
}

.legal h2 {
  font-family: var(--ff-serif-cn);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-paper);
  margin: 46px 0 16px;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p {
  color: rgba(245, 239, 228, 0.74);
  font-size: 16px;
  line-height: 2;
}

.legal a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover {
  color: var(--c-gold-soft);
}

/* ---------- Cookie / privacy consent ---------- */
.cookie-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 200;
  max-width: 440px;
  background: rgba(10, 9, 40, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.cookie-consent.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cc-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
}

.cc-text {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(245, 239, 228, 0.78);
}

.cc-text a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-accept {
  flex-shrink: 0;
  padding: 12px 22px;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  transition: all 0.3s var(--ease);
}

.cc-accept:hover {
  background: var(--c-gold);
  color: var(--c-blue-deep);
}

/* ---------- Brand detail page ---------- */
.brand-cn {
  margin-top: 14px;
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: rgba(245, 239, 228, 0.6);
}

.brand-detail {
  max-width: 820px;
  margin: 0 auto;
}

.brand-intro {
  font-size: 17px;
  line-height: 2;
  color: rgba(245, 239, 228, 0.8);
}

.brand-social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--c-line-strong);
  color: var(--c-gold);
  font-size: 13px;
  letter-spacing: 0.16em;
  background: transparent;
  transition: all 0.3s var(--ease);
}

.social-btn svg {
  flex-shrink: 0;
}

.social-btn:hover {
  background: var(--c-gold);
  color: var(--c-blue-deep);
  border-color: var(--c-gold);
}

.cta-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

html {
  scroll-behavior: smooth;
}

/* ============================================================
   Homepage — immersive minimal hero
   ============================================================ */
.hero-min {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-min::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 50% 35%, rgba(64, 62, 122, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(20, 19, 56, 0.1) 0%, rgba(20, 19, 56, 0.55) 100%);
  z-index: 0;
}

.hero-min-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.hero-min-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(46px, 7vw, 100px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--c-paper);
  margin-top: 26px;
}

.hero-min-title .gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-min-lead {
  margin: 30px auto 44px;
  font-family: var(--ff-serif-en);
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.66);
}

.hero-scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 38px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  z-index: 2;
}

.hero-scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  background: var(--c-gold);
  border-radius: 2px;
  animation: scrollDot 1.8s var(--ease) infinite;
}

@keyframes scrollDot {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ============================================================
   Homepage — interstellar voyage (airship)
   ============================================================ */
.voyage {
  position: relative;
  height: 300vh;            /* long scroll: crossing + a generous full-scene hold */
}

.voyage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 620px at 78% 26%, rgba(72, 116, 214, 0.2), transparent 60%),
    radial-gradient(circle at 58% 40%, #0b1130 0%, #05041a 55%, #020109 100%);
}

/* airship hero bleeds under the transparent nav */
.voyage.is-hero {
  margin-top: calc(var(--nav-h) * -1);
}

.voyage-stars {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 25px 35px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1px 1px at 90px 80px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2.2px 2.2px at 160px 140px, rgba(205, 228, 255, 0.9), transparent),
    radial-gradient(1px 1px at 200px 60px, rgba(214, 196, 160, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 60px 200px, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1px 1px at 130px 30px, rgba(170, 200, 255, 0.7), transparent);
  background-repeat: repeat;
  background-size: 205px 205px;
  opacity: 0.95;
  animation: starDrift 90s linear infinite;
}

.voyage-stars.layer2 {
  background-size: 360px 360px;
  opacity: 0.45;
  animation-duration: 150s;
}

.voyage-stars.layer3 {
  background-size: 520px 520px;
  opacity: 0.3;
  animation-duration: 220s;
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-240px, 140px, 0); }
}

.voyage-nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 480px at 82% 22%, rgba(96, 145, 235, 0.2), transparent 60%),
    radial-gradient(420px 340px at 92% 52%, rgba(150, 185, 255, 0.13), transparent 60%);
  pointer-events: none;
}

/* galaxy nebula image blended into the deep space */
.voyage-galaxy,
.voyage-galaxy2 {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
}

.voyage-galaxy {
  background-image: url('/images/materials/nebula.webp?v=2');
  opacity: 0.32;
  animation: galaxyDrift 64s ease-in-out infinite alternate;
}

.voyage-galaxy2 {
  background-image: url('/images/materials/nebula-back.webp?v=2');
  opacity: 0.26;
  animation: galaxyDrift2 84s ease-in-out infinite alternate;
}

@keyframes galaxyDrift {
  from { transform: scale(1.05) translateX(-1.2%); }
  to { transform: scale(1.12) translateX(1.2%); }
}

@keyframes galaxyDrift2 {
  from { transform: scale(1.1) translateX(1.6%); }
  to { transform: scale(1.04) translateX(-1.6%); }
}

/* JS-generated dense starfield (繁星) */
.starfield-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.starfield {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: transparent;
  animation-name: starRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes starRise {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--area) * -1)); }
}

/* floating mascots around the airship */
.voyage-mascots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mascot {
  position: absolute;
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5));
  animation-name: mascotFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-22px) rotate(2.5deg); }
}

.voyage-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* logo marquee sharing the hero screen, pinned to the bottom */
.voyage-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 0;
  padding: 32px 0 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 820px) {
  .voyage-mascots {
    display: none;
  }
}

.voyage-copy {
  margin-bottom: 8px;
}

.voyage-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.05em;
  color: var(--c-paper);
  margin-top: 22px;
}

.voyage-title .gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.voyage-ship-wrap {
  position: relative;
  z-index: 3;
  width: min(44vw, 540px);
  margin: 0 auto;
  will-change: transform;
}

/* text the airship "pulls out" as it crosses (revealed left→right on scroll) */
.voyage-trail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.trail-cn {
  font-family: var(--ff-serif-cn);
  font-size: clamp(46px, 8vw, 128px);
  font-weight: 500;
  letter-spacing: 0.14em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* user-made wordmark block (帝叡集團 + DDNY + queen + pegasus + fairy baked in) */
.trail-img {
  width: min(58vw, 600px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

/* the DDNY sovereign stands atop the 「叡」 glyph of 帝叡集團 */
.trail-anchor {
  position: relative;
}

.trail-queen {
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: 1.25em;
  height: auto;
  transform: translateX(-50%);
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
  animation: queenFloat 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes queenFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

.trail-en {
  font-family: var(--ff-serif-en);
  font-size: clamp(18px, 2.4vw, 42px);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* characters surrounding the text — float in place, fade in with the text */
.voyage-orbit {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 小飛船一律不用 filter — 即使 blur(0)/drop-shadow 也會讓部分裝置的
   GPU 把透明圖層合成成白色方塊；深藍星空上陰影本就幾乎不可見，
   只保留位移＋縮放＋淡入，視覺差異極小、相容性最高 */
.voyage-orbit img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.voyage-orbit.in img {
  opacity: 1;
  transform: none;
}

/* cruisers drop out of hyperspace — streak in from afar */
.voyage-orbit.warp img {
  transform: translateX(-260px) scale(0.12);
  transition: opacity 0.4s var(--ease),
    transform 0.55s cubic-bezier(0.14, 0.86, 0.28, 1);
}

.voyage-orbit.warp.in img {
  transform: none;
}

@media (max-width: 820px) {
  .voyage-orbit.warp img {
    transform: translateX(-90px) scale(0.5);
  }
}

/* pegasus & fairy gently breathe in place */
.orbit-pegasus,
.orbit-fairy {
  animation: orbitBreath 6.5s ease-in-out infinite;
}

@keyframes orbitBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}

/* pegasus & fairy flank the DDNY sub-line, mirrored about the centre */
.orbit-pegasus { top: 58%; right: 57%; left: auto; width: clamp(42px, 4vw, 70px); }
.orbit-fairy { top: 58%; left: 57%; right: auto; width: clamp(30px, 2.8vw, 48px); animation-delay: -2s; }

/* cruiser fleet — descending echelon kept in the far-left zone (clear of the
   centred text); a small JS-driven advance nudges them forward on scroll */
.orbit-c1 { top: 24%; left: 2%; width: clamp(76px, 8vw, 128px); }
.orbit-c2 { top: 42%; left: 11%; width: clamp(76px, 8vw, 128px); }
.orbit-c3 { top: 60%; left: 2%; width: clamp(76px, 8vw, 128px); }
.orbit-c4 { top: 75%; left: 11%; width: clamp(76px, 8vw, 128px); }

.voyage-ship {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 44px 90px rgba(0, 0, 0, 0.6));
  animation: shipFloat 8.5s ease-in-out infinite;
}

/* eagle leading the airship — flies ahead (upper-right) and bobs on its own */
.voyage-eagle {
  position: absolute;
  top: -13%;
  right: -15%;
  width: 20%;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
  animation: eagleFloat 6.5s ease-in-out infinite;
}

@keyframes eagleFloat {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-18px) rotate(-2deg); }
}

/* pegasus & fairy circle the flagship (travel with the ship) */
.voyage-pegasus,
.voyage-fairy {
  position: absolute;
  height: auto;
  z-index: 4;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5));
}

.voyage-pegasus {
  top: -4%;
  left: -6%;
  width: 15%;
  animation: eagleFloat 7.5s ease-in-out infinite;
  animation-delay: -2s;
}

.voyage-fairy {
  bottom: -3%;
  left: 16%;
  width: 10%;
  animation: orbitBreath 6s ease-in-out infinite;
}

@keyframes shipFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-28px) rotate(1.2deg); }
}

@media (max-width: 820px) {
  .voyage {
    height: 165vh;
  }
  .voyage-ship-wrap {
    width: 58vw;
    align-self: center;
    margin: 0 auto;
  }
  .voyage-eagle {
    width: 22%;
    top: -14%;
    right: -8%;
  }
  /* ship + text form one tight, centred group (less empty space) */
  .voyage-trail {
    position: relative;
    top: auto;
    bottom: auto;
    transform: none;
    margin-top: 14px;
  }
  .trail-cn {
    font-size: clamp(30px, 9vw, 52px);
  }
  .trail-en {
    font-size: clamp(13px, 3.4vw, 22px);
    letter-spacing: 0.4em;
  }
  /* mobile: drop pegasus & fairy, keep the cruiser fleet */
  .orbit-pegasus,
  .orbit-fairy {
    display: none;
  }
  /* mobile: cruisers fly across the open lower area in a scattered formation */
  .orbit-c1 { top: 68%; left: 6%; right: auto; width: clamp(54px, 15vw, 82px); }
  .orbit-c3 { top: 75%; left: 66%; right: auto; width: clamp(50px, 14vw, 76px); }
  .orbit-c4 { top: 90%; left: 22%; right: auto; width: clamp(42px, 11vw, 62px); }
  .orbit-c2 { top: 84%; left: 44%; right: auto; width: clamp(46px, 12vw, 68px); }
}

@media (max-width: 720px) {
  .brand-mark {
    width: 48px;
    height: 48px;
  }
  .brand-text .en {
    font-size: 18px;
    letter-spacing: 0.18em;
  }
  .brand-text .cn {
    font-size: 12px;
    letter-spacing: 0.32em;
  }
}

/* ============================================================
   Homepage — auto-scrolling logo marquee (press / featured)
   ============================================================ */
.marquee-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.marquee {
  position: relative;
  margin-top: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 56px;
  flex: none;
}

.logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: transform 0.35s var(--ease);
}

.logo-item:hover img {
  transform: scale(1.06);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .logo-item { width: 104px; height: 40px; }
  .marquee-track { gap: 48px; }
  .marquee-section { padding-top: 64px; padding-bottom: 64px; }
}

/* ============================================================
   Homepage — five houses expanding panels
   ============================================================ */
.houses {
  display: flex;
  min-height: 80vh;
}

.house {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  transition: flex 0.7s var(--ease);
}

.house:first-child {
  border-left: none;
}

.house:hover {
  flex: 2.4;
}

.house-bg {
  position: absolute;
  inset: 0;
  transition: transform 1s var(--ease);
}

.house:hover .house-bg {
  transform: scale(1.06);
}

.house.blue .house-bg {
  background: linear-gradient(160deg, #3a3877 0%, #1a1940 100%);
}
.house.ink .house-bg {
  background: linear-gradient(160deg, #232323 0%, #0a0a0a 100%);
}
.house.red .house-bg {
  background: linear-gradient(160deg, #7a1c1e 0%, #3a0f10 100%);
}
.house.green .house-bg {
  background: linear-gradient(160deg, #0f5a30 0%, #061d10 100%);
}
.house.mocha .house-bg {
  background: linear-gradient(160deg, #4a3526 0%, #1e1410 100%);
}

.house::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.78) 100%);
}

.house-num {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  font-family: var(--ff-serif-en);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

.house-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 34px 30px;
}

.house-cat {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.house-name {
  font-family: var(--ff-serif-en);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-paper);
  margin-top: 10px;
}

.house-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease), margin-top 0.6s var(--ease);
}

.house:hover .house-extra {
  max-height: 220px;
  opacity: 1;
  margin-top: 16px;
}

.house-extra p {
  color: rgba(245, 239, 228, 0.82);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 360px;
}

.house-more {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.house-more::after {
  content: '→';
  margin-left: 10px;
  transition: transform 0.3s var(--ease);
}

.house:hover .house-more::after {
  transform: translateX(6px);
}

@media (max-width: 820px) {
  .houses {
    flex-direction: column;
    min-height: 0;
  }
  .house {
    flex: none;
    min-height: 260px;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
  }
  .house:first-child {
    border-top: none;
  }
  .house:hover {
    flex: none;
  }
  .house-extra {
    max-height: none;
    opacity: 1;
    margin-top: 16px;
  }
}

/* ---------- Brand list — editorial rows ---------- */
.house-list {
  margin-top: 64px;
  border-top: 1px solid var(--c-line);
}

.house-row {
  display: grid;
  grid-template-columns: 124px 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 42px 8px;
  border-bottom: 1px solid var(--c-line);
  transition: background 0.45s var(--ease);
}

.house-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.hr-logo {
  width: 124px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hr-logo span {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  font-family: var(--ff-serif-cn);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--c-gold);
}

.hr-cat {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.hr-name {
  display: inline-block;
  font-family: var(--ff-serif-cn);
  font-size: 27px;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  margin-top: 10px;
  transition: color 0.3s var(--ease);
}

.hr-name:hover {
  color: var(--c-gold);
}

.hr-desc {
  margin-top: 12px;
  color: rgba(245, 239, 228, 0.64);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
}

.hr-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

.hr-socials {
  display: flex;
  gap: 18px;
}

.hr-soc {
  color: rgba(217, 187, 154, 0.65);
  transition: color 0.3s var(--ease);
}

.hr-soc:hover {
  color: var(--c-gold);
}

.hr-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding-bottom: 5px;
}

.hr-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 0.4s var(--ease);
}

.house-row:hover .hr-more::after {
  width: 100%;
}

@media (max-width: 820px) {
  .house-list {
    margin-top: 44px;
  }
  .house-row {
    grid-template-columns: 104px 1fr;
    gap: 20px;
    padding: 30px 0;
  }
  .hr-logo {
    width: 104px;
    height: 56px;
  }
  .hr-logo span {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }
  .hr-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Brand grid — tiled cards ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 24px;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.012);
  backdrop-filter: blur(2px);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.brand-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--grad-gold);
  transition: width 0.6s var(--ease);
}

.brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
  background: rgba(255, 255, 255, 0.028);
}

.brand-card:hover::before {
  width: 100%;
}

.bc-logo {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bc-logo img {
  height: 100%;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  object-position: left center;
}

.bc-logo span {
  min-width: 56px;
  height: 56px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  font-family: var(--ff-serif-cn);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  white-space: nowrap;
}

.bc-name {
  display: block;
  margin-top: 20px;
  font-family: var(--ff-serif-cn);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--c-paper);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}

.brand-card:hover .bc-name {
  color: var(--c-gold);
}

.bc-cat {
  margin-top: 7px;
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.bc-desc {
  margin: 14px 0 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(245, 239, 228, 0.6);
}

.bc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}

.bc-socials {
  display: flex;
  gap: 14px;
}

.bc-socials a {
  display: inline-flex;
  color: rgba(217, 187, 154, 0.6);
  transition: color 0.3s var(--ease);
}

.bc-socials a:hover {
  color: var(--c-gold);
}

.bc-more {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .brand-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .brand-card {
    padding: 26px 22px 20px;
  }
}

@media (max-width: 520px) {
  .cookie-consent {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
  .cc-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}

/* ============================================================
   Greeting Cards — card wall + lightbox (zoom / download / share)
   ============================================================ */
.card-wall {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 34px;
}

.gcard {
  cursor: pointer;
  outline: none;
}

.gcard.is-empty {
  cursor: default;
}

.gcard-frame {
  position: relative;
  aspect-ratio: 1 / 1.414; /* A 系列賀卡比例，避免裁切 */
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}

.gcard:not(.is-empty):hover .gcard-frame,
.gcard:not(.is-empty):focus-visible .gcard-frame {
  border-color: var(--c-line-strong);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(203, 183, 143, 0.12);
  transform: translateY(-6px);
}

.gcard-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) brightness(0.9);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.gcard:not(.is-empty):hover .gcard-frame img {
  transform: scale(1.04);
  filter: saturate(1.05) brightness(1);
}

.gcard-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-gold);
  background: rgba(8, 10, 28, 0.55);
  border: 1px solid rgba(203, 183, 143, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.gcard:not(.is-empty):hover .gcard-zoom,
.gcard:not(.is-empty):focus-visible .gcard-zoom {
  opacity: 1;
  transform: none;
}

.gcard:not(.is-empty):hover .gcard-zoom {
  background: rgba(203, 183, 143, 0.92);
  color: #0a0f2a;
}

.gcard-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-serif-en);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(203, 183, 143, 0.5);
  white-space: nowrap;
}

.gcard-meta {
  padding: 18px 4px 0;
}

.gcard-date {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}

.gcard-title {
  margin: 6px 0 0;
  font-family: var(--ff-serif-cn);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-paper);
  transition: color 0.35s var(--ease);
}

.gcard:not(.is-empty):hover .gcard-title {
  color: var(--c-gold);
}

.gcard.is-empty .gcard-title {
  color: rgba(245, 239, 228, 0.38);
}

.gcard-studio {
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: rgba(245, 239, 228, 0.55);
}

/* 3D ring carousel — 選卡體驗 */
.gc3d-stage {
  --cw: 330px;
  position: relative;
  margin-top: 48px;
  height: calc(var(--cw) * 1.414 + 120px);
}

.gc3d-scene {
  position: absolute;
  inset: 0;
  perspective: 1700px;
  perspective-origin: 50% 42%;
  touch-action: pan-y; /* 水平拖曳轉輪播，垂直仍可捲動頁面 */
}

.gc3d-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw);
  height: calc(var(--cw) * 1.414);
  margin: calc(var(--cw) * -0.707 - 20px) 0 0 calc(var(--cw) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}

.gc3d-item {
  position: absolute;
  inset: 0;
  touch-action: pan-y; /* 按在卡片上也能水平拖曳 */
  border: 1px solid var(--c-line);
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), filter 0.5s var(--ease);
}

.gc3d-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: saturate(0.85) brightness(0.55);
  transition: filter 0.5s var(--ease);
}

/* 被選中的那張 — 上浮、金光、亮起 */
.gc3d-item.is-front {
  border-color: rgba(203, 183, 143, 0.75);
  box-shadow:
    0 0 0 1px rgba(203, 183, 143, 0.35),
    0 26px 70px -22px rgba(0, 0, 0, 0.85),
    0 0 46px rgba(203, 183, 143, 0.28);
}

.gc3d-item.is-front img {
  filter: saturate(1.05) brightness(1);
}

.gc3d-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 10, 28, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--c-gold);
  font-size: 30px;
  line-height: 1;
  /* 箭頭符號在圓框內水平垂直置中（含字形視覺校正） */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.gc3d-nav:hover {
  background: rgba(203, 183, 143, 0.92);
  border-color: rgba(203, 183, 143, 0.92);
  color: #0a0f2a;
}

.gc3d-prev { left: 0; }
.gc3d-next { right: 0; }

/* 底部光暈地板 */
.gc3d-floor {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: min(70%, 720px);
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(203, 183, 143, 0.16) 0%, transparent 68%);
  pointer-events: none;
}

@media (max-width: 960px) {
  .gc3d-stage { --cw: 260px; }
}

@media (max-width: 720px) {
  .gc3d-stage {
    --cw: 240px;
    margin-top: 6px;
    height: calc(var(--cw) * 1.414 + 44px); /* 收緊上下留白 */
  }
  .gc3d-scene { perspective: 1100px; }
  .gc3d-nav { width: 42px; height: 42px; font-size: 24px; }
}

@media (max-width: 420px) {
  .gc3d-stage { --cw: 195px; }
}

/* ============================================================
   Mascots — 品牌吉祥物牆＋燈箱
   ============================================================ */
.msct-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 30px;
}

.msct-card {
  text-align: center;
  cursor: pointer;
  outline: none;
}

.msct-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: end center;
  border: 1px solid var(--c-line);
  background:
    radial-gradient(60% 45% at 50% 62%, rgba(203, 183, 143, 0.12), transparent 70%),
    linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  overflow: hidden;
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}

.msct-card:hover .msct-stage,
.msct-card:focus-visible .msct-stage {
  border-color: var(--c-line-strong);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 46px rgba(203, 183, 143, 0.14);
  transform: translateY(-6px);
}

.msct-stage img {
  max-width: 72%;
  max-height: 84%;
  object-fit: contain;
  margin-bottom: 8%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s var(--ease);
}

.msct-card:hover .msct-stage img {
  transform: translateY(-6px) scale(1.05);
}

.msct-name {
  margin: 16px 0 0;
  font-family: var(--ff-serif-cn);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  transition: color 0.35s var(--ease);
}

.msct-card:hover .msct-name {
  color: var(--c-gold);
}

.msct-brand {
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: rgba(245, 239, 228, 0.55);
}

/* 吉祥物燈箱 */
.mm-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 92vw;
  text-align: center;
  transform: translateY(16px);
  transition: transform 0.45s var(--ease);
}

.card-modal.open .mm-panel {
  transform: none;
}

.mm-figure img {
  max-height: 56vh;
  max-width: 84vw;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

.mm-info {
  max-width: 520px;
}

.mm-name {
  margin: 0;
  font-family: var(--ff-serif-cn);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-gold-soft);
}

.mm-brand {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

.mm-desc {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: rgba(245, 239, 228, 0.85);
}

@media (max-width: 960px) {
  .msct-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 38px 22px;
  }
}

@media (max-width: 720px) {
  .msct-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
    margin-top: 36px;
  }
  .msct-name { font-size: 17px; }
  .mm-figure img { max-height: 46vh; }
  .mm-desc { font-size: 14px; }
}

/* 吉祥物頁開頭序文 — 星際宇宙敘事 */
.msct-prologue {
  max-width: 780px;
  margin: 0 auto 72px;
}

.msct-prologue .pr-heading {
  text-align: center;
  margin-bottom: 34px;
}

.msct-prologue .pr-heading h2 {
  font-family: var(--ff-serif-cn);
  font-size: 30px;
  letter-spacing: 0.14em;
  color: var(--c-paper);
  margin: 14px 0 0;
}

.msct-prologue p {
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  line-height: 2.15;
  color: rgba(245, 239, 228, 0.78);
  margin: 0 0 24px;
  text-align: justify;
}

.msct-prologue .pr-finale {
  text-align: center;
  font-size: 17px;
  color: var(--c-gold-soft);
  margin-top: 40px;
}

.msct-prologue .pr-en {
  font-family: var(--ff-serif-en);
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 2;
  color: var(--c-gold);
  margin: 30px 0 0;
}

@media (max-width: 720px) {
  .msct-prologue { margin-bottom: 52px; }
  .msct-prologue .pr-heading h2 { font-size: 24px; }
  .msct-prologue p { font-size: 15px; }
}

/* 吉祥物輪播卡 — 透明立繪水平垂直置中、深藍星空背景
   （上層暗角壓暗背景、中央留亮，讓吉祥物立繪成為視覺焦點） */
.gc3d-item.msct-item {
  background:
    radial-gradient(58% 44% at 50% 52%, rgba(203, 183, 143, 0.1), transparent 70%),
    radial-gradient(130% 130% at 50% 45%, rgba(5, 8, 26, 0.28) 0%, rgba(5, 8, 26, 0.72) 100%),
    url('/images/materials/mascot-card-bg.jpg?v=1') 50% 50% / cover no-repeat,
    linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  background-blend-mode: normal;
  display: grid;
  place-items: center;
}

/* 星點 */
.gc3d-item.msct-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 18%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1px 1px at 32% 9%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255, 255, 255, 0.85), transparent 55%),
    radial-gradient(1px 1px at 62% 25%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(2px 2px at 88% 38%, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1px 1px at 8% 46%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 22% 68%, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1px 1px at 90% 66%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 70% 84%, rgba(255, 255, 255, 0.8), transparent 55%),
    radial-gradient(1px 1px at 38% 90%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1px 1px at 52% 6%, rgba(255, 255, 255, 0.65), transparent 55%);
  opacity: 0.3;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.gc3d-item.msct-item.is-front::before {
  opacity: 0.6;
}

/* 細金雙框＋四角飾線 — 內斂而精緻 */
.gc3d-item.msct-item::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(203, 183, 143, 0.3);
  background:
    /* 四角 L 形飾線（漸層金） */
    linear-gradient(90deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 0 0 / 22px 2px no-repeat,
    linear-gradient(180deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 0 0 / 2px 22px no-repeat,
    linear-gradient(270deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 100% 0 / 22px 2px no-repeat,
    linear-gradient(180deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 100% 0 / 2px 22px no-repeat,
    linear-gradient(90deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 0 100% / 22px 2px no-repeat,
    linear-gradient(0deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 0 100% / 2px 22px no-repeat,
    linear-gradient(270deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 100% 100% / 22px 2px no-repeat,
    linear-gradient(0deg, #ecdfc4, rgba(184, 156, 102, 0.35)) 100% 100% / 2px 22px no-repeat,
    /* 四角小鑽點 */
    radial-gradient(circle, #f2e9d2 0 1.4px, transparent 2.2px) 0 0 / 6px 6px no-repeat,
    radial-gradient(circle, #f2e9d2 0 1.4px, transparent 2.2px) 100% 0 / 6px 6px no-repeat,
    radial-gradient(circle, #f2e9d2 0 1.4px, transparent 2.2px) 0 100% / 6px 6px no-repeat,
    radial-gradient(circle, #f2e9d2 0 1.4px, transparent 2.2px) 100% 100% / 6px 6px no-repeat;
  opacity: 0.55;
  transition: opacity 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  pointer-events: none;
}

.gc3d-item.msct-item.is-front::after {
  opacity: 1;
  border-color: rgba(203, 183, 143, 0.5);
  box-shadow: inset 0 0 26px rgba(203, 183, 143, 0.1); /* 正面內暈 */
}

.gc3d-item.msct-item img {
  object-fit: contain;
  max-width: 80%;
  max-height: 82%;
  width: auto;
  height: auto;
}

/* 輪播下方名稱說明 */
.gc3d-caption {
  margin-top: 24px;
  text-align: center;
  min-height: 64px;
}

.gc3d-caption .gcard-title {
  font-size: 23px;
}

/* 輪播下方 — 英文祝詞 */
.gc3d-blessing {
  margin-top: 18px;
  text-align: center;
}

.gc3d-blessing .bl-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--c-gold-dim), transparent);
}

.gc3d-blessing .bl-en {
  margin: 0 auto 10px;
  max-width: 640px;
  font-family: var(--ff-serif-en);
  font-size: clamp(17px, 2vw, 21px);
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--c-gold-soft);
}

.gc3d-blessing .bl-sign {
  margin: 0;
  font-family: var(--ff-serif-en);
  font-size: 12.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(203, 183, 143, 0.55);
}

@media (max-width: 720px) {
  .gc3d-blessing {
    margin-top: 34px;
    padding: 0 20px;
  }
}

/* lightbox */
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 1000; /* 蓋過導覽列與所有內容 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 12, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.card-modal.open {
  opacity: 1;
  visibility: visible;
}

.cm-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 92vw;
  transform: translateY(16px);
  transition: transform 0.45s var(--ease);
}

.card-modal.open .cm-panel {
  transform: none;
}

.cm-stage img {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  display: block;
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.cm-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  font-family: var(--ff-sans);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  color: var(--c-gold-soft);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.cm-btn:hover {
  background: rgba(203, 183, 143, 0.92);
  border-color: rgba(203, 183, 143, 0.92);
  color: #0a0f2a;
}

.cm-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  color: var(--c-paper);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cm-close:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

@media (max-width: 960px) {
  .card-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
}

@media (max-width: 720px) {
  .card-modal {
    background: #04050f; /* 手機全不透明 — 純 modal 體驗 */
    padding: 16px;
  }
  .cm-stage img {
    max-height: 70vh;
  }
  .cm-btn {
    padding: 11px 16px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .card-wall {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
  .gcard-title {
    font-size: 19px;
  }
}

/* ---------- News — pinned badge + article pop-up ---------- */
.npin {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-base-darker);
  background: var(--grad-gold);
  padding: 5px 12px;
  border-radius: 2px;
}

/* ============================================================
   文章內頁 — 版心、圖片、內文與聯絡資訊
   ============================================================ */
.article {
  max-width: 820px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-bottom: 36px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-gold-dim);
  transition: color 0.3s var(--ease);
}

.back-link:hover {
  color: var(--c-gold);
}

.art-video,
.art-gallery {
  margin-bottom: 48px;
}

.art-video video {
  width: 100%;
  display: block;
  border: 1px solid var(--c-line);
  background: #05041a;
}

.art-gallery {
  display: grid;
  gap: 20px;
}

.art-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--c-line);
}

.art-body {
  font-size: 16px;
  line-height: 2.25;
  color: rgba(245, 239, 228, 0.82);
  white-space: pre-line; /* 保留文章換行 */
  text-align: justify;
}

.art-contact {
  margin-top: 52px;
  padding: 30px 34px;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.015);
  display: grid;
  gap: 16px;
}

.amc-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.amc-k {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--c-gold);
}

.amc-v {
  color: rgba(245, 239, 228, 0.85);
  word-break: break-all;
}

a.amc-v:hover {
  color: var(--c-gold);
}

@media (max-width: 720px) {
  .back-link { margin-bottom: 26px; }
  .art-video,
  .art-gallery { margin-bottom: 34px; }
  .art-gallery { gap: 14px; }
  .art-body { font-size: 15px; line-height: 2.15; }
  .art-contact { margin-top: 40px; padding: 22px 20px; gap: 13px; }
  .amc-row { gap: 14px; }
}

.article-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 12, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.article-modal.open {
  opacity: 1;
  visibility: visible;
}

.am-panel {
  width: min(92vw, 760px);
  max-height: 86vh;
  overflow-y: auto;
  padding: 48px 52px 52px;
  background: linear-gradient(180deg, #0b1130 0%, #070d28 100%);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: translateY(16px);
  transition: transform 0.45s var(--ease);
}

.article-modal.open .am-panel {
  transform: none;
}

.am-tag {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.am-title {
  margin: 14px 0 26px;
  font-family: var(--ff-serif-cn);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-paper);
}

.am-cover {
  margin: 0 0 30px;
  text-align: center;
  border: 1px solid var(--c-line);
  background: #0a0f2a;
}

.am-cover img {
  max-width: 100%;
  max-height: 64vh;
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.am-text {
  white-space: pre-line;
  font-size: 16px;
  line-height: 2.1;
  color: rgba(245, 239, 228, 0.82);
}

.am-contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 12px;
}

.amc-row {
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-size: 15px;
}

.amc-k {
  min-width: 84px;
  flex: none;
  color: var(--c-gold);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.amc-v {
  color: rgba(245, 239, 228, 0.85);
  text-decoration: none;
}

a.amc-v:hover {
  color: var(--c-gold);
}

@media (max-width: 520px) {
  .am-panel {
    padding: 34px 22px 38px;
  }
}

/* ---------- News — 雜誌式頭條＋卡片格 ---------- */
.ncard-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
}

.ncard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.ncard:hover .ncard-media img {
  transform: scale(1.05);
  filter: brightness(1);
}

.ntag-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ntag {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-gold);
  border: 1px solid rgba(203, 183, 143, 0.4);
}

.nnum {
  font-family: var(--ff-serif-en);
  font-size: 30px;
  line-height: 1;
  color: rgba(203, 183, 143, 0.32);
}

.nbrand {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(245, 239, 228, 0.55);
}

.nmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

.nmore::after {
  content: '→';
  transition: transform 0.35s var(--ease);
}

.ncard:hover .nmore::after {
  transform: translateX(6px);
}

.ngrid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.ncard {
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.45s var(--ease);
}

.ncard:hover {
  transform: translateY(-6px);
}

.ncard:hover .ncard-media {
  border-color: var(--c-line-strong);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.8), 0 0 36px rgba(203, 183, 143, 0.1);
}

.ncard-media {
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.ncard-body {
  padding: 18px 4px 0;
}

.ncard-title {
  text-wrap: balance;
  margin: 14px 0 0;
  font-family: var(--ff-serif-cn);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--c-paper);
  transition: color 0.35s var(--ease);
}

.ncard:hover .ncard-title {
  color: var(--c-gold);
}

.ncard .nmore {
  margin-top: 16px;
}

.nvid {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: rgba(8, 10, 28, 0.6);
  border: 1px solid rgba(203, 183, 143, 0.5);
  padding: 4px 10px;
  border-radius: 2px;
}

@media (max-width: 960px) {
  .ngrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ngrid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* ---------- Contact — LINE-first ---------- */
/* ---------- 聯絡我們 — 全頁星空＋飛船 ---------- */
.contact-cosmos {
  position: fixed;
  inset: 0;
  z-index: -1; /* 在 main 的堆疊層內墊底，蓋過全站格紋浮水印 */
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 4, 15, 0.42) 0%, rgba(3, 4, 15, 0.16) 34%, rgba(3, 4, 15, 0.62) 100%),
    url('/images/materials/nebula.jpg?v=1') 50% 32% / cover no-repeat,
    var(--c-base);
}

/* 女王飛船艦隊 — 老鷹在前領航 */
.contact-cosmos .cc-fleet {
  position: absolute;
  top: 14%;
  left: 0;
  width: min(380px, 44vw);
  animation: cc-sail 38s linear infinite; /* 兩倍速 */
}

.contact-cosmos .cc-ship {
  display: block;
  width: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6));
}

.contact-cosmos .cc-eagle {
  position: absolute;
  right: -36%;
  top: -14%;
  width: 36%;
  opacity: 0.95;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
  animation: cc-glide 3.6s ease-in-out infinite alternate;
}

@keyframes cc-sail {
  0%   { transform: translateX(-50vw) translateY(0) rotate(-2deg); }
  25%  { transform: translateX(-6vw) translateY(-26px) rotate(1deg); }
  50%  { transform: translateX(36vw) translateY(6px) rotate(-1deg); }
  75%  { transform: translateX(80vw) translateY(-22px) rotate(2deg); }
  100% { transform: translateX(130vw) translateY(0) rotate(-2deg); }
}

@keyframes cc-glide {
  from { transform: translateY(-7px) rotate(2deg); }
  to   { transform: translateY(9px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-cosmos .cc-fleet {
    animation: none;
    left: 8%;
    top: 12%;
  }
  .contact-cosmos .cc-eagle {
    animation: none;
  }
}

@media (max-width: 720px) {
  .contact-cosmos .cc-fleet {
    /* 手機：維持原大小，往下移避開 header 遮擋 */
    width: 210px;
    top: 170px;
  }
}

.contact-line {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 52px 44px 48px;
  border: 1px solid var(--c-line);
  /* 星空之上仍保有可讀性 */
  background: rgba(6, 9, 30, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.cl-badge {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin-bottom: 22px;
  color: #06c755;
  border: 1px solid rgba(6, 199, 85, 0.5);
  background: rgba(6, 199, 85, 0.08);
}

.cl-eyebrow {
  font-family: var(--ff-serif-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.contact-line h2 {
  margin-top: 10px;
  font-family: var(--ff-serif-cn);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 500;
  color: var(--c-paper);
}

.contact-line p {
  margin: 16px auto 30px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(245, 239, 228, 0.7);
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 34px;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  border-radius: 3px;
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn-line:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.contact-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 40px;
  border: 1px solid var(--c-line);
  background: var(--c-line);
}

.cm-item {
  background: rgba(6, 9, 30, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 36px 28px;
  text-align: center;
}

.cm-ic {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--c-gold);
}

.cm-k {
  font-family: var(--ff-serif-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.5);
}

.cm-v {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-paper);
  text-decoration: none;
}

a.cm-v:hover {
  color: var(--c-gold);
}

/* 預約邀請文 — 營業資訊下方 */
.contact-note {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  line-height: 2.15;
  color: rgba(245, 239, 228, 0.78);
}

@media (max-width: 720px) {
  .contact-note { font-size: 14.5px; text-align: justify; }
}

.contact-map {
  margin-top: 40px;
}

.map-slot {
  position: relative;
  height: 380px;
  border: 1px solid var(--c-line);
  overflow: hidden;
  background: #05041a;
}

.map-slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.3) contrast(1.05);
}

.map-open {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
}

.map-open:hover {
  color: var(--c-paper);
}

@media (max-width: 640px) {
  .contact-meta {
    grid-template-columns: 1fr;
  }
  .contact-line {
    padding: 40px 24px 36px;
  }
}


/* ============================================================
   品牌介紹 — 分類 TAB＋品牌介紹文字
   ============================================================ */

/* ---------- 環狀品牌卡輪播（縮小版） ---------- */
.brand-ring-stage {
  position: relative;
  height: 250px;
  --bw: 235px;
  --bh: 150px;
  margin-top: 72px;
}

.brand-ring-scene {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  overflow: hidden;
}

.brand-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bw);
  height: var(--bh);
  margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
  will-change: transform;
}

/* 乾淨的品牌小卡：細金框＋深藍底＋LOGO＋名稱 */
.br-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--c-line-strong);
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  cursor: pointer;
  outline: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: brightness(0.55);
  transition: filter 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.br-card img {
  max-height: 68px;
  max-width: 170px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.br-card .brc-mono {
  font-family: var(--ff-serif-cn);
  font-size: 22px;
  color: var(--c-gold);
}

.br-card .brc-name {
  font-family: var(--ff-serif-cn);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgba(245, 239, 228, 0.88);
  white-space: nowrap;
}

.br-card.is-front {
  filter: brightness(1);
  border-color: var(--c-gold);
  box-shadow:
    0 0 0 1px rgba(203, 183, 143, 0.3),
    0 20px 50px -20px rgba(0, 0, 0, 0.85),
    0 0 34px rgba(203, 183, 143, 0.18);
}

.brand-ring-stage .gc3d-nav {
  z-index: 2;
}

/* ---------- 品牌資訊：形象圖＋文字 ---------- */
.brand-feature {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 8px 0;
}

/* 形象照框 — 金色細框；未放圖時顯示品牌 LOGO 佔位 */
.bf-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(203, 183, 143, 0.4);
  background: linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
}

.bf-media::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(203, 183, 143, 0.16);
  pointer-events: none;
}

.bf-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-media .bf-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.bf-media .bf-ph img {
  max-width: 46%;
  max-height: 110px;
  object-fit: contain;
  opacity: 0.5;
}

.bf-media .bf-ph span {
  font-family: var(--ff-serif-cn);
  font-size: 34px;
  color: var(--c-gold-dim);
}

@media (max-width: 900px) {
  /* 手機：資訊區改自適應高度（桌機才需要固定高度防跳動），避免矮內容下方留大片空白 */
  .brand-panes { display: block; }
  .brand-pane {
    display: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .brand-pane.active { display: block; }
  .brand-ring-stage { margin-top: 40px; }

  .brand-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .bf-media {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  .brand-feature .bp-info { text-align: center; }
  .brand-feature .bp-rule { margin-left: auto; margin-right: auto; }
  .brand-feature .bp-intro { text-align: justify; }
  .brand-feature .bp-socials { justify-content: center; }
}

@media (max-width: 720px) {
  .brand-ring-stage {
    height: 200px;
    --bw: 185px;
    --bh: 122px;
  }
  .brand-ring-scene { perspective: 1000px; }
  .br-card img { max-height: 52px; max-width: 130px; }
}
.brand-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 56px;
}

.brand-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 128px;
  padding: 14px 16px 12px;
  border: 1px solid var(--c-line-strong);
  /* 吉祥物卡同款星空底 — 小尺寸、壓暗，讓內容當主角 */
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(5, 8, 26, 0.5) 0%, rgba(5, 8, 26, 0.82) 100%),
    url('/images/materials/mascot-card-bg.jpg?v=1') 50% 30% / cover no-repeat,
    linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.brand-tab .bt-logo {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-tab .bt-logo img {
  max-height: 34px;
  max-width: 92px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.brand-tab .bt-mono {
  font-family: var(--ff-serif-cn);
  font-size: 17px;
  color: var(--c-gold);
}

.brand-tab .bt-label {
  font-family: var(--ff-serif-cn);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(245, 239, 228, 0.62);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.brand-tab:hover {
  border-color: var(--c-gold);
}

.brand-tab:hover .bt-label {
  color: var(--c-gold-soft);
}

.brand-tab.active {
  border-color: var(--c-gold);
  box-shadow:
    0 0 0 1px rgba(203, 183, 143, 0.3),
    0 0 22px rgba(203, 183, 143, 0.16);
}

.brand-tab.active .bt-logo img {
  opacity: 1;
}

.brand-tab.active .bt-label {
  color: var(--c-gold-soft);
}

/* 疊層：所有 pane 佔同一格，容器高度＝最高的一塊，切換時版面不跳動 */
.brand-panes {
  display: grid;
}

.brand-pane {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.brand-pane.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: bp-fade 0.55s var(--ease);
}

@keyframes bp-fade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 單品牌精緻版面 ---------- */
.brand-profile {
  display: grid;
  grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 16px 0 8px;
}

/* 左側 LOGO 展示框 — 金色細框＋內層飾線＋柔光 */
.bp-logo {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 40px;
  border: 1px solid rgba(203, 183, 143, 0.4);
  background:
    radial-gradient(60% 48% at 50% 50%, rgba(203, 183, 143, 0.1), transparent 72%),
    linear-gradient(135deg, #11163a 0%, #0a0f2a 100%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
}

.bp-logo::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(203, 183, 143, 0.18);
  pointer-events: none;
}

.bp-logo img {
  max-width: 68%;
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

.bp-mono {
  font-family: var(--ff-serif-cn);
  font-size: 46px;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

/* 右側資訊 */
.bp-cat {
  font-family: var(--ff-serif-en);
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.bp-name {
  font-family: var(--ff-serif-cn);
  font-size: 38px;
  letter-spacing: 0.08em;
  color: var(--c-paper);
  margin: 14px 0 6px;
}

/* 過長的品牌名：縮小字級並維持單行 */
.bp-name.bp-name-long {
  font-size: 29px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bp-name.bp-name-long {
    font-size: 21px;
    white-space: normal;
    text-wrap: balance; /* 手機放不下時斷行保持平衡 */
  }
}

.bp-latin {
  font-family: var(--ff-serif-en);
  font-size: 15px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.bp-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 220px;
  margin: 26px 0;
}

.bp-rule span {
  flex: 1;
  height: 1px;
  background: var(--c-line-strong);
}

.bp-rule i {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  color: var(--c-gold);
}

.bp-tagline {
  font-family: var(--ff-serif-cn);
  font-size: 19px;
  line-height: 1.9;
  color: var(--c-gold-soft);
  margin: 0 0 16px;
}

.bp-intro {
  font-size: 15px;
  line-height: 2.15;
  color: rgba(245, 239, 228, 0.68);
  max-width: 560px;
  margin: 0;
  white-space: pre-line; /* 支援多段落文案 */
  text-align: justify;
}

.bp-socials {
  display: flex;
  gap: 18px;
  margin-top: 30px;
}

@media (max-width: 900px) {
  .brand-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .bp-logo {
    min-height: 200px;
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
    padding: 28px;
  }
  .bp-logo img { max-height: 120px; }
  /* 手機版整體置中，與置中的 LOGO 卡對齊 */
  .bp-info { text-align: center; }
  .bp-rule { margin-left: auto; margin-right: auto; }
  .bp-intro { text-align: justify; margin-left: auto; margin-right: auto; }
  .bp-socials { justify-content: center; }
}

@media (max-width: 720px) {
  /* 手機：單行橫向滑動頁籤列，邊緣淡出提示可滑動 */
  .brand-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 24px;
    margin-left: -24px;
    margin-right: -24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .brand-tabs::-webkit-scrollbar { display: none; }
  .brand-tab {
    flex: 0 0 auto;
    min-width: 108px;
    padding: 11px 12px 10px;
    gap: 7px;
  }
  .brand-tab .bt-logo { height: 28px; }
  .brand-tab .bt-logo img { max-height: 28px; max-width: 78px; }
  .brand-tab .bt-label { font-size: 12px; }
  .bp-name { font-size: 30px; }
  .bp-tagline { font-size: 17px; }
  .bp-intro { font-size: 14px; }
  .bp-logo { min-height: 180px; max-width: 260px; padding: 24px; }
  .bp-logo img { max-height: 100px; }
}

/* Contact uses the same two-layer nebula composition as the homepage. */
.contact-cosmos {
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 4, 15, 0.32) 0%, rgba(3, 4, 15, 0.12) 34%, rgba(3, 4, 15, 0.58) 100%),
    url('/images/materials/nebula.webp?v=2'),
    url('/images/materials/nebula-back.webp?v=2');
  background-position: center, 50% 32%, 50% 32%;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen, normal;
  background-color: var(--c-base);
}

.contact-cosmos ~ .page-header,
.contact-cosmos ~ .section {
  position: relative;
  z-index: 1;
}

/* 集團盛典 hero — 提高權重覆蓋 .page-header 的 padding，讓飛機置中於標題上方不被文字擋到 */
.page-header.gala-hero { padding-top: calc(var(--nav-h) + 244px); padding-bottom: 92px; }
.gala-hero .gala-hero-jet { width: min(34vw, 366px); }
@media (max-width: 720px) {
  .page-header.gala-hero { padding-top: calc(var(--nav-h) + 176px); padding-bottom: 60px; }
  .gala-hero .gala-hero-jet { width: min(58vw, 256px); }
}

/* 集團盛典 hero — 完整文案排版 */
.gala-hero .gala-hero-lead {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: 15.5px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.gala-hero .gala-hero-lead:first-of-type { margin-top: 26px; }
.gala-hero-slogan {
  margin: 30px auto 8px;
  font-family: var(--ff-serif-en);
  font-size: 20px;
  letter-spacing: 0.16em;
  line-height: 1.9;
  color: var(--c-gold);
  text-transform: uppercase;
}
.gala-hero-tag {
  margin: 2px 0 0;
  font-family: var(--ff-serif-cn);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgba(245, 239, 228, 0.8);
}
@media (max-width: 720px) {
  .gala-hero .gala-hero-lead { font-size: 14px; margin-top: 16px; }
  .gala-hero-slogan { font-size: 16px; letter-spacing: 0.12em; margin-top: 24px; }
  .gala-hero-tag { font-size: 13.5px; }
}