/* ============================================================
   HKParties — "event production studio" theme (after styles.css)
   Direction: modern corporate, original hkparties.com palette.
   Teal #01C6B2 / deep teal #007A6F / magenta #FF0062 (sparing) /
   charcoal #141A1A / white + light grey #F5F7F7. Non-linear,
   asymmetric editorial layout, oversized section numerals, thin
   keylines, real-photo energy. Display = Sora, body = Noto Sans TC.
   Motion lives in studio.js behind html.motion.
   ============================================================ */
:root {
  /* ---- brand palette (original hkparties.com) ---- */
  --st-teal: #01C6B2;
  --st-teal-deep: #007A6F;
  --st-teal-ink: #045F57;
  --st-magenta: #FF0062;
  --st-ink: #141A1A;
  --st-ink-2: #33373D;
  --st-soft: #5A6562;
  --st-bg: #FFFFFF;
  --st-grey: #F5F7F7;
  --st-tint: #E9F9F6;
  --st-line: #E1E8E6;

  /* ---- shared-chrome token overrides ---- */
  --brand: var(--st-teal);
  --brand-dark: var(--st-teal-deep);
  --brand-darker: var(--st-teal-ink);
  --brand-tint: var(--st-tint);
  --brand-tint-2: #CFF2EC;
  --ink: var(--st-ink);
  --ink-soft: var(--st-soft);
  --line: var(--st-line);
  --white: #ffffff;
  --radius: 14px;
  --shadow-sm: 0 8px 22px -14px rgba(20, 26, 26, .22);
  --shadow-md: 0 18px 44px -20px rgba(20, 26, 26, .26);
  --shadow-lg: 0 30px 70px -26px rgba(20, 26, 26, .32);

  --font-display: "Sora", "Noto Sans TC", system-ui, -apple-system, "PingFang HK", "Microsoft JhengHei", sans-serif;
  --font-body: "Noto Sans TC", system-ui, -apple-system, "PingFang HK", "Microsoft JhengHei", sans-serif;
}

body.hp {
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--st-teal); color: #fff; }

/* ============================================================
   Chrome — slim deep-teal topbar + clean sticky nav
   ============================================================ */
.topbar { background: var(--st-teal-ink); color: #D9EFEB; border-bottom: 0; }
.topbar a, .topbar__item { color: #D9EFEB; }
.topbar__item .ico { color: var(--st-teal); }
.topbar__item:hover { color: #fff; }

/* floating frosted capsule — .nav stays sticky + transparent; the white
   surface moves to .nav__inner so the bar reads as an inset rounded capsule */
.nav { position: sticky; top: 0; z-index: 60; background: transparent;
  border-bottom: 0; box-shadow: none; padding-top: 10px; transition: padding .25s; }
.nav__inner { display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(20, 40, 38, .06); border-radius: 18px;
  box-shadow: 0 18px 40px -30px rgba(20, 40, 38, .5);
  padding: 10px 16px; transition: padding .25s, box-shadow .25s; }
.nav.is-scrolled { padding-top: 6px; }
.nav.is-scrolled .nav__inner { padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 22px 48px -28px rgba(20, 40, 38, .6); }
.nav .logo { margin-right: auto; }
.logo__mark { height: 38px; width: 38px; }
.logo__word { flex-direction: row; align-items: baseline; gap: 1px; }
.logo__word b { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--st-ink); }
.logo__word > span { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--st-teal-deep); }
.nav__link { position: relative; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--st-ink-2); border-radius: 9px; }
.nav__link:hover { color: var(--st-teal-deep); background: var(--st-tint); }
/* short centered underline-accent grows on link hover */
.nav__item:not(.nav__item--dropdown) .nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px;
  background: var(--st-teal); border-radius: 2px; opacity: 0;
  transition: left .2s ease, right .2s ease, opacity .2s ease; }
.nav__item:not(.nav__item--dropdown) .nav__link:hover::after { left: 22%; right: 22%; opacity: 1; }
/* CTA — the 自動報價 link becomes the one solid pill action (attribute selector, no markup edit) */
.nav__link[href="#quote"] { background: var(--st-teal-deep); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 12px 26px -14px rgba(0, 122, 111, .55);
  transition: transform .18s, box-shadow .18s, background .18s; }
.nav__link[href="#quote"]:hover { background: var(--st-teal-ink); color: #fff; transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(255, 0, 98, .6); }
.nav__link[href="#quote"]::after { display: none; }
.btn--solid { background: var(--st-ink); color: #fff; border-radius: 10px; font-weight: 700; }
.btn--solid:hover { background: var(--st-teal-deep); box-shadow: 0 12px 26px -12px rgba(0, 122, 111, .6); }
/* desktop: one row — logo left, menu + lang right; quick icons + burger hidden */
.nav__inner { flex-wrap: nowrap; }
.nav__link { font-size: 14.5px; }
.nav__quick, .nav__burger { display: none; }
.nav__panel { display: contents; }

@media (max-width: 1060px) and (min-width: 880px) {
  .nav__inner { gap: 12px; }
  .nav__link { padding: 8px 9px; font-size: 13.5px; }
}

/* ── Services hover dropdown (desktop) ────────────────────────── */
.nav__item--dropdown { position: relative; }
.nav__item--dropdown > .nav__link::after {
  content: "\25BE"; margin-left: 5px; font-size: .72em; opacity: .6;
  transition: transform .18s ease; display: inline-block;
}
.nav__item--dropdown:hover > .nav__link::after,
.nav__item--dropdown:focus-within > .nav__link::after { transform: rotate(180deg); opacity: .9; }
/* invisible bridge so the cursor can cross the gap without it closing */
.nav__item--dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 9px; }
.nav__dropdown {
  position: absolute; top: calc(100% + 7px); left: 0; margin: 0; padding: 8px;
  list-style: none; min-width: 212px;
  background: var(--st-bg); border: 1px solid var(--st-line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 80;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dropdown a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--st-ink-2); white-space: nowrap;
}
.nav__dropdown a:hover { color: var(--st-teal-deep); background: var(--st-tint); }

/* ============================================================
   ONE-ROW HEADER < 880px — logo left, quick contact icons +
   hamburger right; the menu collapses into an overlay panel
   (no layout shift) toggled by a real <button>.
   ============================================================ */
@media (max-width: 879px) {
  .topbar { display: none; }                 /* ONE top row on mobile */
  .nav__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
  .nav .logo { margin-right: auto; }

  .nav__quick { display: flex; align-items: center; gap: 2px; }
  .nav__quick-item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 11px; color: var(--st-teal-deep);
    transition: background .15s;
  }
  .nav__quick-item:hover, .nav__quick-item:active { background: var(--st-tint); }
  .nav__quick-item .ico { width: 20px; height: 20px; }

  /* Mobile header contact = WhatsApp only. Drop the email icon and turn the
     WhatsApp link (previously a plain phone-handset glyph, easily read as a
     phone icon) into a clear green WhatsApp button — matches the floating fab. */
  .nav__quick-item[href^="mailto"] { display: none; }
  .nav__quick-item[href*="wa.me"] { background: #25D366; color: #fff; }
  .nav__quick-item[href*="wa.me"] .ico { color: #fff; }
  .nav__quick-item[href*="wa.me"]:hover,
  .nav__quick-item[href*="wa.me"]:active { background: #1FB855; }

  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
    background: var(--st-bg); border: 1px solid var(--st-line); border-radius: 11px;
  }
  .nav__burger-box { position: relative; width: 18px; height: 14px; display: block; }
  .nav__burger-box i {
    position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px;
    background: var(--st-ink);
    transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .15s, top .22s cubic-bezier(.4,0,.2,1);
  }
  .nav__burger-box i:nth-child(1) { top: 0; }
  .nav__burger-box i:nth-child(2) { top: 6px; }
  .nav__burger-box i:nth-child(3) { top: 12px; }
  .nav.is-open .nav__burger-box i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav.is-open .nav__burger-box i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger-box i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* collapsed menu — overlay dropdown under the header row */
  .nav__panel {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--st-bg); border-bottom: 1px solid var(--st-line);
    box-shadow: var(--shadow-lg);
    padding: 8px 20px 18px;
    max-height: calc(100dvh - 64px); overflow: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__menu { display: block; width: 100%; margin: 0; }
  .nav__item { width: 100%; }
  .nav__link {
    display: flex; width: 100%; min-height: 46px; align-items: center;
    padding: 11px 12px; font-size: 15.5px;
  }
  .nav__panel .lang-switch { margin: 14px 12px 4px; }

  /* services dropdown → inline expanded sub-list on mobile (no hover) */
  .nav__item--dropdown::after { display: none; }
  .nav__item--dropdown > .nav__link::after { display: none; }
  .nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    padding: 0 0 6px 14px; min-width: 0;
  }
  .nav__dropdown a { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; font-size: 14.5px; }
}

/* ============================================================
   Section furniture — numerals, keylines, editorial headers
   ============================================================ */
.st-sec { padding: 96px 0; position: relative; }
.st-sec--grey { background: var(--st-grey); }
.st-sec--tint { background: var(--st-tint); }

.st-head { position: relative; margin-bottom: 54px; max-width: 760px; }
.st-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.st-no { position: absolute; right: -8px; top: -54px; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(96px, 13vw, 184px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(1, 198, 178, .34); letter-spacing: -.04em; }
.st-head--center .st-no { right: auto; left: 50%; transform: translateX(-50%); opacity: .8; }
.st-eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--st-teal-deep); margin: 0 0 14px; }
.st-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--st-teal); flex: none; }
.st-head--center .st-eyebrow::after { content: ""; width: 30px; height: 2px; background: var(--st-teal); flex: none; }
.st-h2 { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 14px; }
.st-h2 em { font-style: normal; color: var(--st-teal-deep); }
.st-sub { position: relative; z-index: 1; color: var(--st-soft); font-size: 16.5px; max-width: 600px; margin: 0; }
.st-head--center .st-sub { margin: 0 auto; }
.st-more { position: relative; z-index: 1; display: inline-block; margin-top: 14px; font-weight: 700; font-size: 15px;
  color: var(--st-ink); text-decoration: none; border-bottom: 2px solid var(--st-teal); padding-bottom: 2px; }
.st-more:hover { color: var(--st-teal-deep); border-color: var(--st-magenta); }

/* buttons (st-btn on the homepage; hp-btn kept for inner pages + JS) */
.st-btn, .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  padding: 14px 30px; border-radius: 12px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s, color .18s; }
.st-btn--teal, .hp-btn--teal { background: var(--st-teal); color: #053734; }
.st-btn--teal:hover, .hp-btn--teal:hover { background: var(--st-teal-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 122, 111, .7); }
.st-btn--ink, .hp-btn--ink { background: var(--st-ink); color: #fff; }
.st-btn--ink:hover, .hp-btn--ink:hover { background: var(--st-ink-2); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(20, 26, 26, .6); }
/* Kept as class names because 8 pages reference them; the fill is now deep
   teal. Magenta stays in the palette for sparing decorative accents only —
   never a button. */
.st-btn--magenta, .hp-btn--pink { background: var(--st-teal-deep); color: #fff; }
.st-btn--magenta:hover, .hp-btn--pink:hover { background: var(--st-teal-ink); transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(0, 122, 111, .55); }
.st-btn--line, .hp-btn--line { background: transparent; color: var(--st-ink); border-color: var(--st-ink); }
.st-btn--line:hover, .hp-btn--line:hover { background: var(--st-ink); color: #fff; transform: translateY(-2px); }
.hp-btn--yellow { background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.hp-btn--yellow:hover { border-color: var(--st-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* scroll reveals — [data-sr] (new) and [data-cr] (inner pages) */
[data-sr], [data-cr] { opacity: 1; transform: none; }
.motion [data-sr], .motion [data-cr] { opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.21, .8, .27, 1) var(--d, 0s); }
.motion [data-sr].is-in, .motion [data-cr].is-in { opacity: 1; transform: translateY(0); }
/* 3D entrance flavour for flagged elements */
.motion [data-sr="3d"] { transform: perspective(1000px) rotateY(-16deg) translateY(34px); }
.motion [data-sr="3d"].is-in { transform: perspective(1000px) rotateY(0) translateY(0); }

/* depth parallax (set by studio.js: --py) */
.motion [data-depth] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ============================================================
   HERO — full-bleed photo slideshow + frosted veil
   ============================================================ */
.st-hero { position: relative; display: flex; align-items: center;
  min-height: clamp(520px, 80vh, 760px); padding: 64px 0 92px; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--st-grey) 100%); }

/* full-bleed cross-fading background slideshow */
.st-hero__slides { position: absolute; inset: 0; z-index: 0; }
.st-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; will-change: opacity, transform; }
/* per-slide subject framing — pull each photo's key subject into the MIDDLE-RIGHT
   so it reads to the right of the left-aligned headline, never cropped or buried.
   p1 corp game-booth: cream-cardigan guest + colour board sit centre-right.
   p3 cotton-candy stall: operator + machines + sign are centre; kids on far left.
   p4 cylinder machine: machine sits centre-right beside the green sofa.
   p2 lion dance: the bold purple lion is on the right.
   p5 stage magic: the magician + draped table are on the right. */
.st-hero__slide--p1 { background-position: 60% 45%; }
.st-hero__slide--p3 { background-position: 62% 55%; }
.st-hero__slide--p4 { background-position: 60% 55%; }
.st-hero__slide--p2 { background-position: 58% 50%; }
.st-hero__slide--p5 { background-position: 70% 50%; }
.motion .st-hero__slide { animation: st-hero-fade var(--hero-cycle, 30s) infinite; }
.motion .st-hero__slide:nth-child(1) { animation-delay: 0s; }
.motion .st-hero__slide:nth-child(2) { animation-delay: 6s; }
.motion .st-hero__slide:nth-child(3) { animation-delay: 12s; }
.motion .st-hero__slide:nth-child(4) { animation-delay: 18s; }
.motion .st-hero__slide:nth-child(5) { animation-delay: 24s; }
/* 5 slides × 6s = 30s loop; each visible ~6s with a soft cross-fade + Ken-Burns */
@keyframes st-hero-fade {
  0%   { opacity: 0; transform: scale(1); }
  3%   { opacity: 1; }
  20%  { opacity: 1; }
  23%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.06); }
}
/* without JS / motion: show the first slide statically so the bg is never blank */
.st-hero__slide:nth-child(1) { opacity: 1; }
.motion .st-hero__slide:nth-child(1) { opacity: 0; }

/* HERO OVERLAY — layered, premium, not flat.
   Two parts:
   (1) .st-hero__veil — a single soft scrim concentrated behind the text on the
       LEFT that fades to a CLEAR photo on the right (multi-stop, no teal wash),
       plus a thin top/bottom legibility gradient. The photo reads through.
   (2) .st-hero__content::before — a frosted-glass text panel that sits directly
       behind the headline column so the dark type pops with real contrast,
       without washing out the whole frame. */
.st-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* horizontal: opaque-ish behind text on the left → fully clear by ~60% */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, transparent 22%, transparent 70%, rgba(20, 26, 26, .14) 100%),
    linear-gradient(96deg,
      rgba(248, 251, 250, .92) 0%,
      rgba(248, 251, 250, .74) 28%,
      rgba(248, 251, 250, .34) 50%,
      rgba(248, 251, 250, .06) 64%,
      transparent 78%); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .st-hero__veil {
    /* feather the blur so it's strong on the left, none on the right →
       photo stays sharp where the subject sits */
    -webkit-backdrop-filter: blur(3px) saturate(1.06);
    backdrop-filter: blur(3px) saturate(1.06);
    -webkit-mask-image: linear-gradient(96deg, #000 0%, #000 30%, transparent 60%);
    mask-image: linear-gradient(96deg, #000 0%, #000 30%, transparent 60%);
    /* lighter horizontal tint — blur carries the legibility on the left */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, transparent 22%, transparent 72%, rgba(20, 26, 26, .12) 100%),
      linear-gradient(96deg,
        rgba(248, 251, 250, .80) 0%,
        rgba(248, 251, 250, .58) 28%,
        rgba(248, 251, 250, .24) 50%,
        rgba(248, 251, 250, .04) 64%,
        transparent 78%); }
}

.st-hero__ghost { position: absolute; left: 0; right: 0; bottom: -22px; z-index: 2; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(80px, 13vw, 210px); line-height: 1;
  letter-spacing: .02em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(20, 26, 26, .045); opacity: .65; }
.st-hero__grid { position: relative; z-index: 3; width: 100%; }
.st-hero__content { position: relative; max-width: 620px; }
/* frosted-glass text panel — gives the dark headline a crisp, premium backing
   that only covers the text column (not the whole frame), so the photo stays
   clear on the right while contrast on the left is real, not a flat wash. */
.st-hero__content::before { content: ""; position: absolute; z-index: -1;
  top: -26px; bottom: -26px; left: -34px; right: -8%;
  border-radius: 26px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .30) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 100%); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .st-hero__content::before {
    -webkit-backdrop-filter: blur(6px) saturate(1.04);
    backdrop-filter: blur(6px) saturate(1.04);
    background: linear-gradient(100deg, rgba(255, 255, 255, .44) 0%, rgba(255, 255, 255, .20) 60%, transparent 100%); }
}
.st-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .2em; font-size: 12.5px; color: var(--st-teal-deep); text-transform: uppercase; margin: 0 0 22px; }
.st-kicker::before { content: ""; width: 40px; height: 2px; background: var(--st-teal); }
.st-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 6vw, 70px);
  line-height: 1.08; letter-spacing: -.03em; margin: 0 0 22px;
  color: var(--st-ink); text-shadow: 0 1px 2px rgba(255, 255, 255, .55); }
.st-h1 span { display: block; }
.st-h1__mark { color: var(--st-teal-deep); position: relative; }
.st-h1__mark::after { content: ""; position: absolute; left: 2px; right: 14%; bottom: .04em; height: .14em;
  background: var(--st-teal); opacity: .35; border-radius: 3px; z-index: -1; }
.st-hero__lead { font-size: 18px; color: var(--st-ink-2); max-width: 500px; margin: 0 0 30px; }
.st-hero__lead b { color: var(--st-ink); }
.st-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.st-hero__perks { display: flex; gap: 10px 12px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.st-hero__perks li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--st-ink-2); background: #fff; border: 1px solid var(--st-line); border-radius: 999px; padding: 7px 15px; }
.st-hero__perks i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--st-teal); }
.st-hero__perks li:nth-child(3) i { background: var(--st-magenta); }

/* ---- HERO MOTION + DESIGN (additive; all gated on .motion, killed under reduced-motion) ---- */

/* B2 · animated backdrop blobs — soft blurred teal/magenta gradients drifting behind grid + ghost */
.st-hero__blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.st-hero__blob { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .12; will-change: transform; }
.st-hero__blob--1 { width: 460px; height: 460px; top: -90px; right: -60px;
  background: radial-gradient(circle, var(--st-teal) 0%, transparent 70%); opacity: .14; }
.st-hero__blob--2 { width: 380px; height: 380px; bottom: -120px; left: -70px;
  background: radial-gradient(circle, var(--st-magenta) 0%, transparent 70%); opacity: .10; }
.st-hero__blob--3 { width: 300px; height: 300px; top: 38%; left: 46%;
  background: radial-gradient(circle, var(--st-teal-deep) 0%, transparent 72%); opacity: .10; }
.motion .st-hero__blob--1 { animation: st-blob-a 24s ease-in-out infinite; }
.motion .st-hero__blob--2 { animation: st-blob-b 30s ease-in-out infinite; }
.motion .st-hero__blob--3 { animation: st-blob-a 27s ease-in-out infinite reverse; }
@keyframes st-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(34px, -26px) scale(1.12); }
}
@keyframes st-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 28px) scale(1.1); }
}

/* B1 · cinematic entrance — stagger-reveal the hero text column children on load */
.motion .st-hero [data-sr] > * { opacity: 0; animation: st-hero-in .6s cubic-bezier(.21, .8, .27, 1) both; }
.motion .st-hero [data-sr] > *:nth-child(1) { animation-delay: .08s; }
.motion .st-hero [data-sr] > *:nth-child(2) { animation-delay: .16s; }
.motion .st-hero [data-sr] > *:nth-child(3) { animation-delay: .24s; }
.motion .st-hero [data-sr] > *:nth-child(4) { animation-delay: .32s; }
.motion .st-hero [data-sr] > *:nth-child(5) { animation-delay: .40s; }
@keyframes st-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* hero responsive — stronger, more-centred scrim on small screens where text
   sits over more of the photo */
@media (max-width: 960px) {
  .st-hero { min-height: clamp(480px, 78vh, 680px); padding: 52px 0 72px; }
  .st-hero__content { max-width: none; }
  /* mobile: text stacks over the photo top → a vertical scrim (strong at top
     behind the type, clearing toward the bottom) keeps the subject visible
     below the headline. */
  .st-hero__veil {
    -webkit-mask-image: none; mask-image: none;
    background:
      linear-gradient(180deg, rgba(248, 251, 250, .94) 0%, rgba(248, 251, 250, .80) 30%, rgba(248, 251, 250, .34) 58%, rgba(248, 251, 250, .10) 78%, transparent 100%); }
  /* drop the side-only text panel on mobile; the vertical veil handles legibility */
  .st-hero__content::before { display: none; }
  /* recentre subjects so the right-biased framing doesn't clip them on narrow screens */
  .st-hero__slide--p1 { background-position: 62% 32%; }
  .st-hero__slide--p3 { background-position: 56% center; }
  .st-hero__slide--p4 { background-position: 54% center; }
  .st-hero__slide--p2 { background-position: 64% center; }
  .st-hero__slide--p5 { background-position: 70% center; }
}
@media (max-width: 960px) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .st-hero__veil {
    -webkit-backdrop-filter: blur(2px) saturate(1.05);
    backdrop-filter: blur(2px) saturate(1.05);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 82%);
    background:
      linear-gradient(180deg, rgba(248, 251, 250, .84) 0%, rgba(248, 251, 250, .64) 30%, rgba(248, 251, 250, .26) 58%, rgba(248, 251, 250, .06) 78%, transparent 100%); }
}
@media (max-width: 560px) {
  .st-hero__lead { font-size: 16px; }
}

/* ---- kicker rotating word (生日會 · 週年晚宴 · …) — JS cycles .is-out ---- */
.st-rotator { display: inline-flex; align-items: center; margin-left: 10px; padding-left: 12px;
  border-left: 2px solid var(--st-line); color: var(--st-magenta); letter-spacing: 0; }
.st-rotator__word { display: inline-block; min-width: 4.5em;
  transition: opacity .3s ease, transform .3s cubic-bezier(.21, .8, .27, 1); }
.motion .st-rotator__word.is-out { opacity: 0; transform: translateY(-6px); }
@media (max-width: 420px) { .st-rotator { display: none; } }

/* ============================================================
   RECOMMENDER — 揀活動 → 推薦服務 (event chips → service cards)
   ============================================================ */
.st-reco { padding-top: 0; }
.st-reco__head { max-width: 760px; margin-bottom: 28px; }
.st-reco__picker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.st-reco__chip { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--st-ink);
  background: #fff; border: 1.5px solid var(--st-line); border-radius: 14px; padding: 12px 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.st-reco__chip:hover { transform: translateY(-2px); border-color: var(--st-teal); box-shadow: var(--shadow-sm); }
.st-reco__chip:focus-visible { outline: 2px solid var(--st-teal-deep); outline-offset: 2px; }
.st-reco__chip[aria-selected="true"] { border-color: var(--st-teal-deep); background: var(--st-tint);
  box-shadow: 0 0 0 1px var(--st-teal-deep) inset; }
.st-reco__chip-ico { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--st-tint); color: var(--st-teal-deep); flex: none; transition: background .2s, color .2s; }
.st-reco__chip-ico svg { width: 19px; height: 19px; }
.st-reco__chip[aria-selected="true"] .st-reco__chip-ico { background: var(--st-teal-deep); color: #fff; }
.st-reco__panel { background: var(--st-grey); border: 1px solid var(--st-line); border-radius: 20px; padding: 26px; }
/* two-column layout: a large representative photo of the chosen event on the
   left, the recommended-service cards on the right. */
.st-reco__layout { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.st-reco__visual { position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  min-height: 280px; box-shadow: var(--shadow-sm); background: var(--st-tint); }
.st-reco__visual::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 30, 27, .62) 100%); }
.st-reco__visual img { width: 100%; height: 100%; object-fit: cover; display: block;
  position: absolute; inset: 0; transition: transform .6s cubic-bezier(.21, .8, .27, 1), opacity .35s ease; }
.st-reco__visual:hover img { transform: scale(1.04); }
.st-reco__visual-cap { position: absolute; left: 16px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.st-reco__visual-cap i { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--st-teal); box-shadow: 0 0 0 4px rgba(1, 198, 178, .3); }
.motion .st-reco__grid.is-swapping ~ .st-reco__visual img,
.motion .st-reco__layout .st-reco__visual.is-swapping img { animation: st-reco-fade .5s ease both; }
@keyframes st-reco-fade { from { opacity: .35; } to { opacity: 1; } }
.st-reco__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.st-reco__card { display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--st-line); border-radius: 14px;
  text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(.21, .8, .27, 1), box-shadow .25s, border-color .2s; }
.st-reco__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; width: auto; z-index: 2;
  background: var(--st-teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; }
.st-reco__card:nth-child(even)::before { background: var(--st-magenta); }
.st-reco__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.st-reco__card:hover::before { transform: scaleX(1); }
.st-reco__card:focus-visible { outline: 2px solid var(--st-teal-deep); outline-offset: 2px; }
.st-reco__card-thumb { flex: none; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--st-tint); }
.st-reco__card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.21, .8, .27, 1); }
.st-reco__card:hover .st-reco__card-thumb img { transform: scale(1.07); }
.st-reco__card-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; padding: 14px 16px 16px; }
.st-reco__card-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; }
.st-reco__card-name::after { content: "→"; margin-left: auto; color: var(--st-teal-deep); font-weight: 700;
  transition: transform .2s, color .2s; }
.st-reco__card:hover .st-reco__card-name::after { transform: translateX(3px); color: var(--st-magenta); }
.st-reco__card-why { font-size: 12.5px; color: var(--st-soft); line-height: 1.5; }
.motion .st-reco__grid.is-swapping .st-reco__card { animation: st-row-in .36s cubic-bezier(.21, .8, .27, 1) both; }
.motion .st-reco__grid.is-swapping .st-reco__card:nth-child(2) { animation-delay: .05s; }
.motion .st-reco__grid.is-swapping .st-reco__card:nth-child(3) { animation-delay: .1s; }
.motion .st-reco__grid.is-swapping .st-reco__card:nth-child(4) { animation-delay: .15s; }
.motion .st-reco__grid.is-swapping .st-reco__card:nth-child(5) { animation-delay: .2s; }
.st-reco__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--st-line); }
.st-reco__cta-text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--st-ink); }
@media (max-width: 880px) {
  .st-reco__layout { grid-template-columns: 1fr; gap: 18px; }
  .st-reco__visual { min-height: 200px; aspect-ratio: 16 / 9; }
  .st-reco__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 560px) {
  .st-reco__panel { padding: 18px; }
  .st-reco__visual { min-height: 170px; }
  .st-reco__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .st-reco__cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 380px) {
  .st-reco__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   01 · AUDIENCES — offset grid, pointer-tilt 3D cards
   ============================================================ */
.st-aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.st-aud > :nth-child(2) { margin-top: 44px; }
.st-aud > :nth-child(3) { margin-top: 12px; }
.st-aud > :nth-child(4) { margin-top: 56px; }
@media (max-width: 1100px) {
  .st-aud { grid-template-columns: repeat(2, 1fr); }
  .st-aud > :nth-child(2) { margin-top: 36px; }
  .st-aud > :nth-child(3) { margin-top: 0; }
  .st-aud > :nth-child(4) { margin-top: 36px; }
}
@media (max-width: 560px) {
  .st-aud { grid-template-columns: 1fr; }
  .st-aud > * { margin-top: 0 !important; }
}
.st-aud__in { background: #fff; border: 1px solid var(--st-line); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-sm); }
.motion .st-aud__in[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .16s ease-out, box-shadow .2s; transform-style: preserve-3d; }
.st-aud__in:hover { box-shadow: var(--shadow-md); }
.st-aud__in::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--st-teal), var(--st-teal-deep)); }
.st-aud__img { height: 150px; overflow: hidden; }
.st-aud__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.st-aud__in:hover .st-aud__img img { transform: scale(1.05); }
.st-aud__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.st-aud__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0 0 4px; }
.st-aud__for { font-size: 13px; color: var(--st-soft); margin: 0 0 14px; }
.st-aud__list { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.st-aud__list li { font-size: 14px; padding: 5px 0 5px 18px; position: relative; border-bottom: 1px solid var(--st-grey); }
.st-aud__list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--st-teal); }
.st-aud__cta { font-weight: 700; font-size: 14.5px; color: var(--st-ink); text-decoration: none;
  align-self: flex-start; border-bottom: 2px solid var(--st-teal); padding-bottom: 2px; }
.st-aud__cta:hover { color: var(--st-teal-deep); border-color: var(--st-teal-deep); }

/* ============================================================
   02 · SERVICES — depth-parallax collage + editorial index rows
   ============================================================ */
.st-svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 54px; align-items: start; }
@media (max-width: 1000px) { .st-svc { grid-template-columns: 1fr; gap: 26px; } }

.st-collage { position: relative; min-height: 560px; }
.st-collage__shot { position: absolute; margin: 0; border-radius: 16px; overflow: hidden;
  border: 3px solid #fff; box-shadow: var(--shadow-md); }
.st-collage__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-collage__shot--a { left: 0; top: 0; width: 72%; aspect-ratio: 4 / 5; z-index: 1; }
.st-collage__shot--b { right: 0; top: 36%; width: 46%; aspect-ratio: 1 / 1; z-index: 2; }
.st-collage__shot--c { left: 8%; bottom: -2%; width: 38%; aspect-ratio: 4 / 3; z-index: 3; }
.st-collage__panel { position: absolute; right: 2%; top: 4%; z-index: 3; width: 200px;
  background: var(--st-teal-deep); color: #fff; border-radius: 16px; padding: 20px 20px 22px; box-shadow: var(--shadow-md); }
.st-collage__panel b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.45; margin-bottom: 8px; }
.st-collage__panel span { font-size: 13px; color: #C8EFE9; }
@media (max-width: 1000px) {
  .st-collage { min-height: 0; height: 420px; max-width: 560px; }
}
@media (max-width: 560px) { .st-collage { height: 330px; } .st-collage__panel { width: 160px; padding: 14px 16px 16px; } }

.st-rows { list-style: none; margin: 0; padding: 0; counter-reset: svc; }
.st-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 28px; align-items: center; gap: 16px;
  padding: 20px 10px; border-top: 1px solid var(--st-line); text-decoration: none; color: inherit;
  transition: background .2s, transform .2s, padding .2s; }
.st-rows li:last-child .st-row { border-bottom: 1px solid var(--st-line); }
.st-row:hover { background: var(--st-tint); transform: translateX(6px); }
.st-row__no { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--st-teal-deep); }
.st-row__main { min-width: 0; }
.st-row__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.st-row__desc { display: block; font-size: 13.5px; color: var(--st-soft); margin-top: 2px; }
.st-row__price { font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--st-ink); }
.st-row__price small { font-size: 12px; font-weight: 600; color: var(--st-soft); }
.st-row__arrow { font-weight: 700; color: var(--st-teal-deep); transition: transform .2s, color .2s; }
.st-row:hover .st-row__arrow { transform: translateX(4px); color: var(--st-magenta); }
.st-row--cta { background: var(--st-ink); color: #fff; border-radius: 14px; border-top: 0 !important; margin-top: 18px; }
.st-rows li:last-child .st-row--cta { border-bottom: 0; }
.st-row--cta .st-row__no, .st-row--cta .st-row__arrow { color: var(--st-teal); }
.st-row--cta .st-row__desc { color: #B9C4C0; }
.st-row--cta:hover { background: var(--st-teal-deep); transform: translateX(0) translateY(-3px); }
@media (max-width: 640px) {
  .st-row { grid-template-columns: minmax(0, 1fr) auto; }
  .st-row__no, .st-row__arrow { display: none; }
}

/* ---- category tabs above the service rows (vanilla-JS filtering) ---- */
.st-svc__list { min-width: 0; }
.st-svc__tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.st-svc__tab { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--st-ink-2);
  background: var(--st-tint); border: 1px solid transparent; border-radius: 999px; padding: 8px 16px;
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
.st-svc__tab:hover { transform: translateY(-1px); border-color: var(--st-teal); }
.st-svc__tab.is-active { background: var(--st-teal); color: #053734; }
.st-svc__tab:focus-visible { outline: 2px solid var(--st-teal-deep); outline-offset: 2px; }
.st-svc__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; font-size: 11px; font-weight: 800; border-radius: 999px;
  background: rgba(1, 198, 178, .18); color: var(--st-teal-ink); }
.st-svc__tab.is-active .st-svc__count { background: rgba(5, 55, 52, .16); color: #053734; }
/* filtered-out rows are removed from flow; visible rows fade/slide in on switch */
.st-rows li[hidden] { display: none; }
.motion .st-rows.is-swapping li:not([hidden]) { animation: st-row-in .34s cubic-bezier(.21, .8, .27, 1) both; }
.motion .st-rows.is-swapping li:nth-child(2):not([hidden]) { animation-delay: .04s; }
.motion .st-rows.is-swapping li:nth-child(3):not([hidden]) { animation-delay: .08s; }
.motion .st-rows.is-swapping li:nth-child(4):not([hidden]) { animation-delay: .12s; }
.motion .st-rows.is-swapping li:nth-child(5):not([hidden]) { animation-delay: .16s; }
@keyframes st-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   03 · FOOD STALLS — keyline chips + offset photo strip
   ============================================================ */
.st-menu { display: flex; flex-wrap: wrap; gap: 10px 12px; max-width: 820px; margin: 0 0 44px; }
.st-menu span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--st-ink); background: #fff; border: 1px solid var(--st-line);
  border-radius: 999px; padding: 9px 18px; transition: border-color .2s, transform .2s; }
.st-menu span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-teal); }
.st-menu span:nth-child(4n)::before { background: var(--st-magenta); }
.st-menu span:hover { border-color: var(--st-teal-deep); transform: translateY(-2px); }
.st-foods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.st-foods > :nth-child(2) { margin-top: 34px; }
.st-foods > :nth-child(4) { margin-top: 46px; }
@media (max-width: 900px) {
  .st-foods { grid-template-columns: repeat(2, 1fr); }
  .st-foods > :nth-child(2), .st-foods > :nth-child(4) { margin-top: 28px; }
}
.st-food { margin: 0; position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.st-food img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .5s; }
.st-food:hover img { transform: scale(1.05); }
.st-food figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(20, 26, 26, .82);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 14px; }

/* ============================================================
   04 · PROCESS — scroll-drawn timeline (teal→magenta fill, numbered
   nodes, line-SVG icons, alternating accent bars, staggered reveal)
   ============================================================ */
.st-steps { position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* connector rail behind the nodes (node centre sits at ~36px) */
.st-steps__line { position: absolute; left: 11%; right: 11%; top: 36px; height: 3px;
  background: var(--st-line); border-radius: 3px; z-index: 0; overflow: hidden; }
.st-steps__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(1);
  background: linear-gradient(90deg, var(--st-teal), var(--st-magenta)); border-radius: 3px; }
/* motion: rail fills as the section scrolls in ([data-progress] → --p) */
.motion [data-progress] .st-steps__fill { transform: scaleX(var(--p, 0)); transition: transform .12s linear; }

.st-step { position: relative; z-index: 1; background: #fff; border: 1px solid var(--st-line); border-radius: 16px;
  padding: 0 22px 24px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .3s cubic-bezier(.21, .8, .27, 1), box-shadow .3s; }
/* alternating top accent bar (teal / magenta) */
.st-step::before { content: ""; display: block; height: 4px; margin: 0 -22px 22px;
  background: linear-gradient(90deg, var(--st-teal), var(--st-teal-deep)); }
.st-step:nth-child(odd)::before { background: linear-gradient(90deg, var(--st-magenta), #c4004c); }
.st-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* numbered node sits on the rail */
.st-step__node { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--st-teal); color: #053734; box-shadow: 0 0 0 5px #fff;
  margin-top: 12px; margin-bottom: 14px; }
.st-step:nth-child(odd) .st-step__node { background: var(--st-magenta); color: #fff; }
.st-step__no { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.st-step__icon { display: block; color: var(--st-teal-deep); margin-bottom: 8px; }
.st-step:nth-child(odd) .st-step__icon { color: var(--st-magenta); }
.st-step__icon svg { width: 26px; height: 26px; }
.st-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.st-step p { font-size: 13.5px; color: var(--st-soft); margin: 0; }
/* staggered fade/slide-up reveal, driven by the same scroll progress */
.motion [data-progress] .st-step { --lp: clamp(0, calc(var(--p, 0) * 5 - var(--i, 0) * 0.9), 1);
  opacity: calc(.12 + var(--lp) * .88);
  transform: translateY(calc((1 - var(--lp)) * 26px));
  will-change: transform, opacity; }
.motion [data-progress] .st-step:hover { transform: translateY(-5px); }
@media (max-width: 900px) {
  .st-steps { grid-template-columns: repeat(2, 1fr); }
  .st-steps__line { display: none; }
}
@media (max-width: 520px) {
  /* vertical rail + stacked steps on mobile */
  .st-steps { grid-template-columns: 1fr; gap: 0; padding-left: 30px; }
  .st-steps__line { display: block; left: 23px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .st-steps__fill { background: linear-gradient(180deg, var(--st-teal), var(--st-magenta)); }
  .motion [data-progress] .st-steps__fill { transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
  .st-step { margin-bottom: 18px; }
  .st-step__node { box-shadow: 0 0 0 4px var(--st-grey); }
}

/* ============================================================
   05 · GALLERY — off-grid photo wall, varied spans
   ============================================================ */
.st-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.st-wall figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.st-wall img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.st-wall figure:hover img { transform: scale(1.045); }
.st-wall figcaption { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .92);
  color: var(--st-ink); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 4px 12px; }
.st-wall figure:nth-child(4n+2) figcaption { background: var(--st-teal); color: #053734; }
.st-w-4 { grid-column: span 4; aspect-ratio: 4 / 3; }
.st-w-5 { grid-column: span 5; aspect-ratio: 5 / 3.4; }
.st-w-3 { grid-column: span 3; aspect-ratio: 3 / 3.4; }
.st-w-6 { grid-column: span 6; aspect-ratio: 16 / 9; }
.st-wall .st-up { transform: translateY(-22px); }
@media (max-width: 880px) {
  .st-wall { gap: 12px; }
  .st-w-4, .st-w-5, .st-w-3, .st-w-6 { grid-column: span 6; aspect-ratio: 4 / 3; }
  .st-wall .st-up { transform: none; }
}

/* ============================================================
   06 · QUOTE TOOL — corporate panels (markup from quote.js)
   ============================================================ */
.hp-quote__tool { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 30px; align-items: start; }
@media (max-width: 920px) { .hp-quote__tool { grid-template-columns: 1fr; } }

.hp-quote__controls { background: #fff; border: 1px solid var(--st-line); border-radius: 18px; padding: 28px;
  box-shadow: var(--shadow-sm); display: grid; gap: 20px; }
.hp-quote__field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.hp-quote__label { font-weight: 700; font-size: 14px; color: var(--st-ink); }
.hp-quote__select, .hp-quote__input { font-family: var(--font-body); font-size: 15.5px; color: var(--st-ink);
  background: var(--st-grey); border: 1.5px solid var(--st-line); border-radius: 11px; padding: 12px 14px; width: 100%;
  transition: border-color .2s, background .2s; }
.hp-quote__select:hover, .hp-quote__input:hover { border-color: var(--st-teal); }
.hp-quote__select:focus, .hp-quote__input:focus { outline: 3px solid rgba(1, 198, 178, .45); outline-offset: 1px;
  border-color: var(--st-teal-deep); background: #fff; }
.hp-quote__row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .hp-quote__row3 { grid-template-columns: 1fr; } }
.hp-quote__addons { display: block; }
.hp-quote__addons legend { padding: 0; margin-bottom: 10px; }
.hp-quote__check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; padding: 7px 6px; cursor: pointer; border-radius: 9px; }
.hp-quote__check:hover { background: var(--st-tint); }
.hp-quote__check input { width: 18px; height: 18px; accent-color: var(--st-teal-deep); flex: none; }
.hp-quote__check.is-off { opacity: .4; cursor: not-allowed; }

/* result panel */
.hp-quote__result { position: relative; background: #fff; border: 1px solid var(--st-line); border-radius: 18px;
  padding: 26px 28px 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.hp-quote__result::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--st-teal), var(--st-teal-deep) 70%, var(--st-magenta)); }
.hp-quote__rhead { display: flex; flex-direction: column; border-bottom: 1px solid var(--st-line); padding-bottom: 12px; margin-bottom: 14px; }
.hp-quote__rhead span { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .24em; color: var(--st-teal-deep); }
.hp-quote__rhead b { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.hp-quote__resultlabel { font-size: 13px; font-weight: 700; color: var(--st-soft); display: block; }
.hp-quote__price { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1.1;
  letter-spacing: -.02em; color: var(--st-ink); margin: 2px 0 4px; }
.hp-quote__price--ask { color: var(--st-magenta); font-size: 32px; }
.hp-quote__nextday { font-weight: 700; font-size: 14.5px; color: var(--st-teal-deep); margin: 0 0 4px; }
.hp-quote__summary { font-size: 14px; color: var(--st-soft); margin: 0 0 6px; }
.hp-quote__summary--book { color: var(--st-teal-deep); font-weight: 700; }
/* early-booking discount (提早預訂優惠) — green eligibility note + discount line */
.hp-quote__grandline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 8px; font-size: 13px; }
.hp-quote__grandline--disc span, .hp-quote__grandline--disc b { color: #15803d; font-weight: 700; }
.hp-quote__ebnote { margin: 8px 0; padding: 9px 11px; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 12.5px; line-height: 1.55; }
.hp-quote__ebnote b { color: #15803d; font-weight: 800; }
.hp-quote__ebhint { margin: 6px 0; font-size: 12px; line-height: 1.5; color: var(--st-soft); }
.hp-quote__lines { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 13.5px; color: var(--st-soft); }
.hp-quote__lines li { margin-bottom: 3px; }
.hp-quote__warn { font-size: 14px; color: var(--st-soft); margin: 4px 0 0; }
.hp-quote__warnlink { color: var(--st-teal-deep); font-weight: 700; }
.hp-quote__final { font-size: 12.5px; color: var(--st-soft); margin: 14px 0; }
.hp-quote__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hp-quote__acts .hp-btn { font-size: 15px; padding: 11px 22px; }
.hp-quote__tear { border-top: 1px dashed var(--st-line); text-align: center; padding-top: 10px; }
.hp-quote__tear span { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .26em; color: var(--st-soft); }

/* lead capture form */
.hp-lead { background: var(--st-tint); border: 1px solid #BDE9E1; border-radius: 14px; padding: 18px; margin: 16px 0 4px; }
.hp-lead__head { font-weight: 900; font-size: 14.5px; margin: 0 0 12px; }
.hp-lead__form { display: grid; gap: 10px; }
.hp-lead__field { display: flex; flex-direction: column; gap: 4px; }
.hp-lead__label { font-size: 12.5px; font-weight: 700; color: var(--st-ink-2); }
.hp-lead__input { font-family: var(--font-body); font-size: 15px; border: 1.5px solid var(--st-line);
  border-radius: 10px; padding: 10px 12px; background: #fff; width: 100%; transition: border-color .2s; }
.hp-lead__input:focus { outline: 3px solid rgba(1, 198, 178, .45); outline-offset: 1px; border-color: var(--st-teal-deep); }
.hp-lead__input--area { resize: vertical; min-height: 56px; }
.hp-lead__submit { margin-top: 4px; font-size: 15px; padding: 12px 20px; }
.hp-lead__status { font-size: 13.5px; margin: 4px 0 0; min-height: 1em; }
.hp-lead__status--error { color: #C62828; font-weight: 700; }
.hp-lead__status--ok { color: var(--st-teal-deep); font-weight: 700; }

/* ============================================================
   07 · COMBOS — 3D flip tickets (hover/focus/tap → back face)
   ============================================================ */
.st-combos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; perspective: 1400px; }
@media (max-width: 980px) { .st-combos { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.st-combo { position: relative; min-height: 420px; }
.st-combo--hot { z-index: 1; }
.st-combo__tag { position: absolute; top: -13px; left: 22px; z-index: 3; background: var(--st-magenta); color: #fff;
  font-weight: 900; font-size: 12.5px; border-radius: 999px; padding: 5px 15px; box-shadow: 0 8px 18px -8px rgba(255, 0, 98, .6); }
.st-combo__card { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .8, .3, 1); }
.motion .st-combo:hover .st-combo__card,
.motion .st-combo:focus-within .st-combo__card,
.st-combo.is-flipped .st-combo__card { transform: rotateY(180deg); }
/* no-motion / very old browser fallback: faces stack, back stays hidden until interaction */
html:not(.motion) .st-combo__back { display: none; }
html:not(.motion) .st-combo.is-flipped .st-combo__back { display: flex; }
html:not(.motion) .st-combo.is-flipped .st-combo__front { display: none; }
.st-combo__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 18px; padding: 26px 26px 24px; display: flex; flex-direction: column; }
html:not(.motion) .st-combo__face { position: relative; }
.st-combo__front { background: #fff; border: 1px solid var(--st-line); box-shadow: var(--shadow-sm); }
.st-combo__back { background: var(--st-teal-deep); color: #fff; transform: rotateY(180deg); box-shadow: var(--shadow-md); }
html:not(.motion) .st-combo__back { transform: none; }
.st-combo__code { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; color: var(--st-teal-deep); background: var(--st-tint); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; }
.st-combo--hot .st-combo__code { color: var(--st-magenta); background: #FFE7F0; }
.st-combo__face h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -.01em; margin: 0 0 6px; }
.st-combo__price { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -.02em;
  color: var(--st-ink); margin: 0 0 2px; }
.st-combo--hot .st-combo__price { color: var(--st-magenta); }
.st-combo__price small { display: block; font-size: 13px; font-weight: 700; color: var(--st-soft); letter-spacing: 0; }
.st-combo__teaser { font-size: 14px; color: var(--st-soft); margin: 14px 0 auto; }
.st-combo__flipbtn { align-self: flex-start; margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid var(--st-line); border-radius: 999px; padding: 9px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--st-ink); cursor: pointer; transition: border-color .2s, color .2s; }
.st-combo__flipbtn:hover { border-color: var(--st-teal-deep); color: var(--st-teal-deep); }
.st-combo__back .st-combo__codeback { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; color: #9FE5DC; margin: 0 0 14px; }
.st-combo__back ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.st-combo__back li { position: relative; padding: 7px 0 7px 24px; font-size: 14.5px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.st-combo__back li::before { content: "✓"; position: absolute; left: 0; color: var(--st-teal); font-weight: 900; }
.st-combo__fit { font-size: 12.5px; font-weight: 700; color: #C9EFE9; margin: 0 0 14px; }
.st-combo__back .st-btn { align-self: flex-start; }
.st-combos__note { text-align: center; color: var(--st-soft); font-size: 14.5px; margin-top: 34px; }
.st-combos__note a { color: var(--st-teal-deep); font-weight: 700; }

/* ============================================================
   08 · SHOWREEL — two screens
   ============================================================ */
.st-reels { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: end; }
@media (max-width: 880px) { .st-reels { grid-template-columns: 1fr; } }
.st-reel { position: relative; border-radius: 16px; overflow: hidden; background: var(--st-ink);
  box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; }
.st-reel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   STATS — count-up over blurred-photo parallax band
   ============================================================ */
.st-band { position: relative; padding: 92px 0; overflow: hidden; background: var(--st-teal-ink); }
.st-band__bg { position: absolute; inset: -80px 0; z-index: 0; }
.st-band__bg img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(14px) saturate(.85); transform: scale(1.15); opacity: .38; }
.st-band::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(4, 95, 87, .9), rgba(0, 122, 111, .68)); }
.st-band__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
@media (max-width: 760px) { .st-band__grid { grid-template-columns: repeat(2, 1fr); } }
.st-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.st-stat > span { font-size: 14px; font-weight: 700; color: #BDEFE7; }

/* ============================================================
   FINAL CTA — the ONE dark charcoal section
   ============================================================ */
.st-cta { background: var(--st-ink); color: #fff; padding: 110px 0 100px; position: relative; overflow: hidden; }
.st-cta__ghost { position: absolute; left: 0; right: 0; top: 10px; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(70px, 11vw, 170px); line-height: 1;
  letter-spacing: .03em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); }
.st-cta .container { position: relative; z-index: 1; }
.st-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 58px);
  line-height: 1.2; letter-spacing: -.02em; margin: 0 0 30px; max-width: 720px; }
.st-cta h2 em { font-style: normal; color: var(--st-teal); }
.st-cta__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.st-cta__meta { color: #93A09C; font-size: 14.5px; margin: 0; }
.st-cta__meta a { color: #D7E2DE; }
.st-cta__meta a:hover { color: var(--st-teal); }

/* ============================================================
   FOOTER — light, keylined
   ============================================================ */
.footer { background: #fff; color: var(--st-ink-2); border-top: 1px solid var(--st-line); }
.footer a { color: var(--st-ink-2); }
.footer a:hover { color: var(--st-teal-deep); }
.footer__col h4 { color: var(--st-ink); }
.footer__tag { color: var(--st-soft); }
.footer__bar { background: var(--st-grey); color: var(--st-soft); }

/* ============================================================
   CHAT WIDGET — 活動報價助手 (hp-chat, markup from chat.js)
   ============================================================ */
.hp-chat { position: fixed; right: 18px; bottom: 18px; z-index: 90; font-family: var(--font-body); }
.hp-chat__fab { display: inline-flex; align-items: center; gap: 9px; background: var(--st-ink); color: #fff;
  border: 0; border-radius: 999px; padding: 13px 20px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-md);
  transition: transform .18s, background .18s; }
.hp-chat__fab:hover { transform: translateY(-2px); background: var(--st-teal-deep); }
.hp-chat__fab svg { width: 20px; height: 20px; fill: currentColor; }
.hp-chat__panel { position: absolute; right: 0; bottom: 64px; width: min(370px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: min(560px, 76vh); }
.hp-chat__panel[hidden] { display: none; }
.hp-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--st-teal-deep); color: #fff; padding: 14px 16px; }
.hp-chat__head-text { display: flex; flex-direction: column; }
.hp-chat__head-text strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.hp-chat__sub { font-size: 12px; opacity: .92; }
.hp-chat__head-acts { display: flex; gap: 6px; }
.hp-chat__icon { background: rgba(255,255,255,.16); border: 0; border-radius: 8px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.hp-chat__icon svg { width: 16px; height: 16px; fill: currentColor; }
.hp-chat__icon:hover { background: rgba(255,255,255,.3); }
.hp-chat__list { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 180px; background: var(--st-grey); }
.hp-chat__msg { max-width: 86%; padding: 9px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.6; }
.hp-chat__msg--assistant { background: #fff; border: 1px solid var(--st-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.hp-chat__msg--user { background: var(--st-ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.hp-chat__typing { color: var(--st-soft); font-style: italic; }
.hp-chat__wa { display: inline-block; margin-top: 8px; background: #25D366; color: #fff; font-weight: 700;
  font-size: 13.5px; border-radius: 999px; padding: 6px 14px; text-decoration: none; }
.hp-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chat__chip { background: #fff; border: 1px solid var(--st-teal-deep); color: var(--st-teal-deep);
  font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.hp-chat__chip:hover { background: var(--st-tint); }
.hp-chat__lead { padding: 0 14px 10px; background: var(--st-grey); }
.hp-chat__leadbtn { width: 100%; background: var(--st-teal); border: 0; border-radius: 10px; color: #053734;
  font-weight: 900; font-size: 14px; padding: 10px 12px; cursor: pointer; }
.hp-chat__leadbtn:hover { background: var(--st-teal-deep); color: #fff; }
.hp-chat__form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--st-line); }
/* 16px floor: <16px makes iOS Safari auto-zoom the page on focus */
.hp-chat__input { flex: 1; font-family: var(--font-body); font-size: 16px; border: 1.5px solid var(--st-line);
  border-radius: 999px; padding: 9px 15px; background: #fff; min-width: 0; }
.hp-chat__input:focus { outline: 2px solid var(--st-teal); border-color: var(--st-teal-deep); }
.hp-chat__send { background: var(--st-teal-deep); color: #fff; border: 0; border-radius: 999px;
  font-weight: 900; font-size: 14px; padding: 8px 18px; cursor: pointer; }
.hp-chat__send:hover { background: var(--st-teal-ink); }
.hp-chat__send:disabled, .hp-chat__input:disabled { opacity: .55; }

/* ============================================================
   INNER PAGES compatibility — same markup, new corporate skin
   (services/combos/cases/about/contact keep their HTML this round)
   ============================================================ */
.hp-sec { padding: 84px 0; position: relative; }
.hp-sec--teal { background: var(--st-tint); }
.hp-sec--warm { background: var(--st-grey); }
.hp-canopy, .hp-flags, .hp-cta__bulbs { display: none; }

.hp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--st-teal-deep); margin-bottom: 12px; }
.hp-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--st-teal); flex: none; }
.hp-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.16; letter-spacing: -.02em; margin: 0 0 12px; }
.hp-h2 em { font-style: normal; color: var(--st-teal-deep); }
.hp-h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em; margin: 0 0 6px; }
.hp-sub { color: var(--st-soft); font-size: 16.5px; max-width: 600px; margin: 0; }
.hp-sechead { margin-bottom: 46px; position: relative; }
.hp-sechead--center { text-align: center; }
.hp-sechead--center .hp-sub { margin: 0 auto; }
.hp-sechead--center .hp-eyebrow::after { content: ""; width: 30px; height: 2px; background: var(--st-teal); flex: none; }
.hp-sechead__more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 15px;
  color: var(--st-ink); text-decoration: none; border-bottom: 2px solid var(--st-teal); padding-bottom: 1px; }
.hp-sechead__more:hover { color: var(--st-teal-deep); border-color: var(--st-magenta); }
.hp-pagehero { padding: 58px 0 4px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--st-tint) 0%, #fff 88%); }
/* soft brand-accent glow behind the hero copy — token-only, decorative */
.hp-pagehero::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -120px; right: -90px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 198, 178, .28) 0%, rgba(1, 198, 178, 0) 70%); }
.hp-pagehero::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  bottom: -150px; left: -110px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 98, .12) 0%, rgba(255, 0, 98, 0) 72%); }
.hp-pagehero .container { position: relative; z-index: 1; }
.hp-pagehero .hp-sub { max-width: 660px; }
.hp-groophead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
.hp-groophead .hp-h3 { margin: 0; }
.hp-groophead p { margin: 0; color: var(--st-soft); font-size: 15px; }

/* services catalogue */
.hp-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .hp-svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hp-svcgrid { grid-template-columns: 1fr; } }
.hp-svc { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.hp-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hp-svc__img { height: 172px; overflow: hidden; }
.hp-svc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-svc__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.hp-svc__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.hp-svc__meta { font-size: 13px; color: var(--st-soft); margin: 0 0 10px; }
.hp-svc__list { list-style: none; margin: 0 0 14px; padding: 0; flex: 1; }
.hp-svc__list li { font-size: 13.5px; color: var(--st-ink); padding: 3px 0 3px 16px; position: relative; }
.hp-svc__list li::before { content: ""; position: absolute; left: 1px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--st-teal); }
.hp-svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.hp-svc__price { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-display);
  font-weight: 700; font-size: 16px; color: var(--st-teal-ink); background: var(--st-tint); border-radius: 999px; padding: 4px 14px; }
.hp-svc__price small { font-size: 11.5px; font-weight: 700; }
.hp-svc__go { font-weight: 700; font-size: 13.5px; color: var(--st-teal-deep); text-decoration: none; white-space: nowrap; }
.hp-svc__go:hover { color: var(--st-teal-deep); }

/* combos page tickets */
.hp-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .hp-tickets { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.hp-ticket { position: relative; background: #fff; border: 1px solid var(--st-line); border-radius: 18px;
  padding: 0 0 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.hp-ticket:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hp-ticket__band { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--st-tint); border-bottom: 1px solid var(--st-line); border-radius: 17px 17px 0 0; padding: 14px 20px; }
.hp-ticket--pink .hp-ticket__band { background: #FFE7F0; }
.hp-ticket--yellow .hp-ticket__band { background: var(--st-grey); }
.hp-ticket__band span { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .2em; color: var(--st-teal-deep); }
.hp-ticket--pink .hp-ticket__band span { color: var(--st-magenta); }
.hp-ticket__band b { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; background: #fff;
  border: 1px solid var(--st-line); border-radius: 999px; padding: 3px 12px; }
.hp-ticket__body { padding: 20px 24px 0; display: flex; flex-direction: column; flex: 1; }
.hp-ticket__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 0 0 4px; }
.hp-ticket__price { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; color: var(--st-ink); margin: 0 0 2px; }
.hp-ticket--hot .hp-ticket__price { color: var(--st-magenta); }
.hp-ticket__price small { display: block; font-size: 13px; font-weight: 700; color: var(--st-soft); letter-spacing: 0; }
.hp-ticket__body ul { margin: 14px 0 18px; padding: 0; list-style: none; flex: 1; }
.hp-ticket__body li { position: relative; padding: 6px 0 6px 24px; font-size: 14.5px; border-bottom: 1px solid var(--st-grey); }
.hp-ticket__body li::before { content: "✓"; position: absolute; left: 1px; color: var(--st-teal-deep); font-weight: 900; font-size: 13px; }
.hp-ticket__fit { font-size: 13px; font-weight: 700; color: var(--st-teal-deep); margin: 0 0 16px; }
.hp-ticket__flag { position: absolute; top: -13px; right: 18px; background: var(--st-magenta); color: #fff;
  font-weight: 900; font-size: 12.5px; border-radius: 999px; padding: 4px 14px; z-index: 2;
  box-shadow: 0 8px 18px -8px rgba(255, 0, 98, .6); }
.hp-ticket__cta { align-self: flex-start; margin: 0 24px; font-size: 14.5px; padding: 11px 22px; }
.hp-tickets__note { text-align: center; color: var(--st-soft); font-size: 15px; margin-top: 30px; }
.hp-tickets__note a { color: var(--st-teal-deep); font-weight: 700; }

/* cases wall + filter */
.hp-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 30px; }
.hp-filter button { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--st-ink-2);
  background: #fff; border: 1px solid var(--st-line); border-radius: 999px; padding: 8px 18px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; }
.hp-filter button:hover { border-color: var(--st-teal-deep); color: var(--st-teal-deep); }
.hp-filter button.is-on { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.hp-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .hp-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .hp-wall { grid-template-columns: repeat(2, 1fr); } }
.hp-case { margin: 0; background: #fff; border: 1px solid var(--st-line); border-radius: 14px;
  padding: 8px 8px 10px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.hp-case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hp-case img { width: 100%; height: 185px; object-fit: cover; border-radius: 9px; display: block; }
.hp-case figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--st-soft); padding-top: 8px; }
.hp-case__tag { flex: none; font-size: 11px; font-weight: 700; color: var(--st-teal-ink);
  background: var(--st-tint); border-radius: 999px; padding: 2px 10px; }
.hp-case.is-hidden { display: none; }

/* about / contact */
.hp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .hp-split { grid-template-columns: 1fr; } }
.hp-split__shot { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-md); margin: 0; }
.hp-split__shot img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 10px; display: block; }
.hp-split__shot figcaption { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-align: center; padding: 8px 0 2px; }
.hp-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .hp-vals { grid-template-columns: 1fr; } }
.hp-val { background: #fff; border: 1px solid var(--st-line); border-top: 4px solid var(--c, var(--st-teal));
  border-radius: 14px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease; }
.hp-val:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -26px rgba(20, 26, 26, .5); }
.hp-val h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.hp-val p { font-size: 14.5px; color: var(--st-soft); margin: 0; }
/* big-price treatment (studio.js wraps $-priced card titles) */
.hp-val--priced h3 { margin: 0 0 12px; }
.hp-val__name { display: block; font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--st-soft); margin: 0 0 6px; }
.hp-val__price { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--st-ink-2); letter-spacing: -.01em; line-height: 1.1; }
.hp-val__price b { font-size: 30px; font-weight: 800; color: var(--c, var(--st-teal-deep)); }
/* photo cards — a machine/service shot at the top, text below */
.hp-val--photo { position: relative; padding: 0; overflow: hidden; }
.hp-val__img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--st-tint); }
.hp-val__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.hp-val--photo:hover .hp-val__img img { transform: scale(1.06); }
.hp-val--photo > h3 { margin: 16px 20px 0; }
.hp-val--photo > p { margin: 6px 20px 20px; }
.hp-val--photo.hp-val--priced > h3 { margin: 16px 20px 12px; }

/* recommended/featured pricing card */
.hp-val--featured { border: 2px solid var(--st-magenta); box-shadow: 0 20px 44px -24px rgba(255,0,98,.45); }
.hp-val__badge { position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--st-magenta); color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(255,0,98,.6); }

/* ── itemized plan include-list (魔術 PLAN cards) ───────────────── */
.hp-vals--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .hp-vals--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp-vals--4 { grid-template-columns: 1fr; } }
.hp-plan-wrap { margin: 0 20px 20px; }
.hp-val--photo > .hp-plan-wrap { margin: 4px 20px 20px; }
.hp-plan { list-style: none; margin: 0; padding: 0; }
.hp-plan li { position: relative; padding: 7px 0 7px 26px; font-size: 13.5px; line-height: 1.5;
  color: var(--st-ink-2); border-bottom: 1px solid var(--st-grey); }
.hp-plan li:last-child { border-bottom: 0; }
.hp-plan li::before { content: "✓"; position: absolute; left: 0; top: 8px;
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--st-tint); color: var(--st-teal-deep);
  font-weight: 900; font-size: 10px; line-height: 1; }
.hp-plan__best { margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: var(--st-soft); line-height: 1.45; }
.hp-plan__best a { color: var(--st-teal-deep); text-decoration: none; }
.hp-plan__best a:hover { color: var(--st-magenta); }

/* ── Task 4 effects: hover accent, stagger-reveal, featured glow ── */
/* a) subtle teal top-accent that grows on hover (photo cards) */
.hp-val--photo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--c, var(--st-teal)); transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.21,.8,.27,1); z-index: 3; }
.hp-val--photo:hover::after { transform: scaleX(1); }
.hp-val--photo:hover { box-shadow: 0 28px 56px -28px rgba(20, 26, 26, .55); }
/* b) stagger-reveal the plan items as the card enters (tie to [data-cr].is-in) */
.motion .hp-val .hp-plan li { opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.21,.8,.27,1); }
.motion .hp-val.is-in .hp-plan li { opacity: 1; transform: translateY(0); }
.motion .hp-val.is-in .hp-plan li:nth-child(1) { transition-delay: .12s; }
.motion .hp-val.is-in .hp-plan li:nth-child(2) { transition-delay: .16s; }
.motion .hp-val.is-in .hp-plan li:nth-child(3) { transition-delay: .20s; }
.motion .hp-val.is-in .hp-plan li:nth-child(4) { transition-delay: .24s; }
.motion .hp-val .hp-plan__best { opacity: 0; transition: opacity .5s ease .3s; }
.motion .hp-val.is-in .hp-plan__best { opacity: 1; }
/* c) soft magenta glow on the 推薦 featured card */
.motion .hp-val--featured { animation: hp-feature-glow 3.4s ease-in-out infinite; }
@keyframes hp-feature-glow {
  0%, 100% { box-shadow: 0 20px 44px -24px rgba(255,0,98,.45); }
  50% { box-shadow: 0 20px 52px -22px rgba(255,0,98,.6), 0 0 24px -6px rgba(255,0,98,.35); }
}


/* ── 確認流程 booking-flow graphic + icon info cards ──────────── */
.hp-flow__head { text-align: center; margin: 0 0 32px; }
.hp-flow__eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .22em; color: var(--st-teal-deep); margin: 0 0 6px; }
.hp-flow__h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); color: var(--st-ink); margin: 0; }
.hp-flow { position: relative; list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-flow__line { position: absolute; left: 17%; right: 17%; top: 42px; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--st-teal-deep) 0 7px, transparent 7px 15px); opacity: .4; }
.hp-flow__step { position: relative; z-index: 1; background: #fff; border: 1px solid var(--st-line);
  border-radius: 18px; padding: 28px 20px 22px; text-align: center; box-shadow: var(--shadow-sm); }
.hp-flow__no { position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--st-tint); color: var(--st-teal-deep); border: 2px solid #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px -5px rgba(0,0,0,.35); }
.hp-flow__step:last-child .hp-flow__no { background: var(--st-magenta); color: #fff; }
.hp-flow__ico { display: inline-flex; width: 46px; height: 46px; margin: 4px auto 12px; color: var(--st-teal-deep); }
.hp-flow__step:last-child .hp-flow__ico { color: var(--st-magenta); }
.hp-flow__ico svg { width: 100%; height: 100%; }
.hp-flow__step p { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--st-ink-2); margin: 0; line-height: 1.5; }
.hp-vals--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.hp-val--ico { border-top-color: var(--c, var(--st-teal)); }
.hp-val__ico { display: inline-flex; width: 32px; height: 32px; margin: 0 0 10px; color: var(--c, var(--st-teal-deep)); }
.hp-val__ico svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hp-flow { grid-template-columns: 1fr; gap: 30px; }
  .hp-flow__line { display: none; }
  .hp-vals--2 { grid-template-columns: 1fr; max-width: 420px; }
}

.hp-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; }
@media (max-width: 880px) { .hp-contact { grid-template-columns: 1fr; } }
.hp-contact__card { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-sm); }
.hp-contact__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 14px; }
.hp-contact__rows { list-style: none; margin: 0; padding: 0; }
.hp-contact__rows li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--st-grey); font-size: 15px; }
.hp-contact__rows li:last-child { border-bottom: 0; }
.hp-contact__rows b { flex: none; min-width: 84px; font-size: 13.5px; color: var(--st-soft); padding-top: 1px; }
.hp-contact__rows a { color: var(--st-teal-deep); font-weight: 700; text-decoration: none; }
.hp-contact__rows a:hover { color: var(--st-ink); }

/* inner-page stats + reels + final CTA */
.hp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
@media (max-width: 760px) { .hp-stats { grid-template-columns: repeat(2, 1fr); } }
/* inline --c on old markup carried funfair colours — keyline pinned to teal */
.hp-stat { background: #fff; border: 1px solid var(--st-line); border-top: 4px solid var(--st-teal);
  border-radius: 14px; padding: 22px 10px 18px; box-shadow: var(--shadow-sm); }
.hp-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.1; color: var(--st-ink); }
.hp-stat span { font-size: 14px; font-weight: 700; color: var(--st-soft); }
.hp-reels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .hp-reels { grid-template-columns: 1fr; } }
.hp-reel { position: relative; border-radius: 16px; overflow: hidden; background: var(--st-ink); box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; }
.hp-reel iframe { width: 100%; height: 100%; border: 0; display: block; }
.hp-cta { background: var(--st-ink); color: #fff; padding: 96px 0 90px; position: relative; overflow: hidden; text-align: center; }
.hp-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.25; letter-spacing: -.02em; margin: 0 0 26px; }
.hp-cta h2 em { font-style: normal; color: var(--st-teal); }
.hp-cta__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.hp-cta__meta { color: #93A09C; font-size: 14.5px; margin: 0; }
.hp-cta__meta a { color: #D7E2DE; }

/* ============================================================
   SERVICE DETAIL PAGES — magic-show.html 等八頁共用組件
   ============================================================ */
.hp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none;
  margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--st-soft); }
.hp-crumbs a { color: var(--st-teal-deep); font-weight: 700; text-decoration: none; }
.hp-crumbs a:hover { color: var(--st-magenta); }
.hp-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--st-line); }

.hp-svp-price { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--st-tint); border: 1px solid #CFF2EC; border-radius: 12px;
  padding: 10px 18px; margin: 20px 0 0; }
.hp-svp-price b { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--st-teal-ink); letter-spacing: -.01em; }
.hp-svp-price span { font-size: 13.5px; font-weight: 700; color: var(--st-soft); }
.hp-svp-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.hp-svp-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-svp-shots--two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
@media (max-width: 760px) { .hp-svp-shots, .hp-svp-shots--two { grid-template-columns: 1fr; } }
.hp-svp-shots figure { margin: 0; background: #fff; border: 1px solid var(--st-line);
  border-radius: 14px; padding: 7px 7px 4px; box-shadow: var(--shadow-sm); }
.hp-svp-shots img { width: 100%; height: 230px; object-fit: cover; border-radius: 9px; display: block; }
.hp-svp-shots figcaption { font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  text-align: center; padding: 7px 0 4px; color: var(--st-ink-2); }

/* Photo-booth real-events gallery — masonry, preserves mixed aspect ratios */
.pb-gallery { columns: 3; column-gap: 18px; }
@media (max-width: 900px) { .pb-gallery { columns: 2; } }
@media (max-width: 560px) { .pb-gallery { columns: 1; } }
.pb-gallery figure { break-inside: avoid; margin: 0 0 18px; background: #fff;
  border: 1px solid var(--st-line); border-radius: 14px; padding: 7px 7px 4px; box-shadow: var(--shadow-sm); }
.pb-gallery img { width: 100%; height: auto; border-radius: 9px; display: block; }
.pb-gallery figcaption { font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  text-align: center; padding: 8px 6px 5px; color: var(--st-ink-2); line-height: 1.45; }
.pb-gallery figcaption b { color: var(--st-teal-deep); }

.hp-svp-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; max-width: 860px; }
@media (max-width: 700px) { .hp-svp-incl { grid-template-columns: 1fr; } }
.hp-svp-incl li { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 36px; border-bottom: 1px solid var(--st-grey); font-size: 15px; }
.hp-svp-incl li::before { content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--st-tint); color: var(--st-teal-deep); font-weight: 900; font-size: 12px; line-height: 1; }

.hp-chiprow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hp-chiprow li { font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--st-ink); background: #fff; border: 1.5px solid var(--st-ink); border-radius: 999px; padding: 8px 18px; }
.hp-chiprow li.is-hot { border-color: var(--st-magenta); color: var(--st-magenta); }

.hp-faq { max-width: 780px; }
.hp-faq details { background: #fff; border: 1px solid var(--st-line); border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.hp-faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; padding: 16px 46px 16px 20px; position: relative; list-style: none; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--st-teal-deep); }
.hp-faq details[open] summary::after { content: "−"; }
.hp-faq details p { margin: 0; padding: 0 20px 18px; font-size: 14.5px; color: var(--st-soft); }

/* ============================================================
   REDUCED MOTION — kill decorative animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .st-btn, .hp-btn, .st-row, .hp-svc, .hp-case, .hp-ticket, .hp-chat__fab, .st-combo__card { transition: none !important; }
  /* hero motion additions — neutralize so static layout is fully visible */
  .st-hero__blob { animation: none !important; transform: none !important; }
  /* hero: one static slide, no cross-fade, no Ken-Burns; veil stays put */
  .st-hero__slide { animation: none !important; transform: none !important; opacity: 0 !important; }
  .st-hero__slide:nth-child(1) { opacity: 1 !important; }
  /* kicker rotator parks on the first word, no cycling */
  .st-rotator__word { transition: none !important; opacity: 1 !important; transform: none !important; }
  .st-hero [data-sr] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* process timeline — full fill, all steps visible, no scroll-driven assembly */
  .st-steps__fill { transform: scaleX(1) !important; transition: none !important; }
  .st-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .st-step:hover { transform: none !important; }
  /* categorised services + recommender — swap is instant, no row animation */
  .st-rows.is-swapping li, .st-reco__grid.is-swapping .st-reco__card { animation: none !important; }
  .st-svc__tab, .st-reco__chip, .st-reco__card { transition: none !important; }
  /* magic-plan card effects — neutralize hover accent, stagger, featured glow */
  .hp-val--photo::after { transition: none !important; transform: scaleX(0) !important; }
  .hp-val--photo:hover::after { transform: scaleX(0) !important; }
  .hp-val .hp-plan li, .hp-val.is-in .hp-plan li,
  .hp-val .hp-plan__best, .hp-val.is-in .hp-plan__best {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .hp-val--featured { animation: none !important; }
}

/* ============================================================
   FORMAL QUOTE DOCUMENT — print to PDF (hp-fq, built by quote.js)
   ============================================================ */
.hp-print-doc { display: none; }
@media print {
  body.hp.hp-printing > *:not(#hp-print-doc) { display: none !important; }
  body.hp.hp-printing #hp-print-doc {
    display: block !important;
    padding: 34px 32px;
    color: #1b1b1b;
    background: #fff;
    font-family: var(--font-body);
    font-size: 12.5px; line-height: 1.55;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #hp-print-doc .hp-fq__top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
  #hp-print-doc .hp-fq__id { flex: 1.2; }
  #hp-print-doc .hp-fq__id h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; margin: 0 0 14px; }
  #hp-print-doc .hp-fq__client { font-size: 13px; margin: 0; color: #333; }
  #hp-print-doc .hp-fq__meta { flex: 1; }
  #hp-print-doc .hp-fq__meta p { margin: 0 0 12px; }
  #hp-print-doc .hp-fq__meta b { display: block; font-size: 12px; }
  #hp-print-doc .hp-fq__meta span { font-size: 12.5px; color: #222; }
  #hp-print-doc .hp-fq__brand { flex: 1; text-align: right; }
  #hp-print-doc .hp-fq__logo { width: 48px; height: 48px; margin-bottom: 6px; }
  #hp-print-doc .hp-fq__brand b {
    display: block; font-family: var(--font-display);
    font-weight: 700; font-size: 15px; letter-spacing: .08em; color: #007A6F; margin-bottom: 6px;
  }
  #hp-print-doc .hp-fq__brand address { font-style: normal; font-size: 11.5px; color: #333; line-height: 1.5; }
  #hp-print-doc .hp-fq__items { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
  #hp-print-doc .hp-fq__items th {
    text-align: left; font-size: 12px; font-weight: 700;
    border-top: 1.5px solid #1b1b1b; border-bottom: 1.5px solid #1b1b1b; padding: 7px 6px;
  }
  #hp-print-doc .hp-fq__items th.num, #hp-print-doc .hp-fq__items td.num { text-align: right; white-space: nowrap; }
  #hp-print-doc .hp-fq__items td { vertical-align: top; padding: 12px 6px 14px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px; }
  #hp-print-doc .hp-fq__items td p { margin: 0 0 2px; }
  #hp-print-doc .hp-fq__items td p.inc { margin: 0 0 1px; padding-left: 10px; font-size: 12px; color: #333; }
  #hp-print-doc .hp-fq__totrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
  #hp-print-doc .hp-fq__chop { width: 110px; height: auto; flex: none; margin-left: 6px; }
  #hp-print-doc .hp-fq__totals { width: 46%; margin-left: auto; margin-top: 4px; flex: none; }
  #hp-print-doc .hp-fq__totals p {
    display: flex; justify-content: space-between; margin: 0;
    padding: 7px 6px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px;
  }
  #hp-print-doc .hp-fq__totals p.total { font-weight: 700; border-bottom: 2px solid #1b1b1b; }
  #hp-print-doc .hp-fq__grid { display: flex; gap: 30px; margin: 44px 0 0; }
  #hp-print-doc .hp-fq__pay { flex: 1.3; }
  #hp-print-doc .hp-fq__pay h3 { font-size: 13px; margin: 0 0 8px; }
  #hp-print-doc .hp-fq__pay p { margin: 0 0 3px; font-size: 12px; }
  #hp-print-doc .hp-fq__sign { flex: 1; }
  #hp-print-doc .hp-fq__sign p { margin: 0 0 6px; font-size: 12.5px; }
  #hp-print-doc .hp-fq__sign i { display: block; font-style: normal; border-bottom: 1px solid #555; height: 26px; margin: 0 0 18px; width: 85%; }
  #hp-print-doc .hp-fq__terms { margin-top: 40px; break-before: auto; }
  #hp-print-doc .hp-fq__terms h3 { font-size: 13.5px; margin: 0 0 14px; }
  #hp-print-doc .hp-fq__terms h4 { font-size: 12.5px; margin: 14px 0 4px; }
  #hp-print-doc .hp-fq__terms p { margin: 0; font-size: 11.5px; color: #222; line-height: 1.65; }
  #hp-print-doc .hp-fq__contact {
    font-size: 11px; color: #007A6F; margin: 30px 0 0; border-top: 1px solid #cfcfcf; padding-top: 12px;
  }
  /* founder letter — its own page at the end of the quote pack */
  #hp-print-doc .hp-fq__letter {
    break-before: page; page-break-before: always;
    padding-top: 60px; max-width: 620px; margin: 0 auto;
    font-size: 13px; line-height: 1.9; color: #1b1b1b; text-align: left;
  }
  #hp-print-doc .hp-fq__letterlogo { display: block; width: 72px; height: 72px; margin: 0 auto 28px; }
  #hp-print-doc .hp-fq__letter p { margin: 0 0 14px; }
  #hp-print-doc .hp-fq__sig { margin-top: 30px; }
  #hp-print-doc .hp-fq__sig b { font-size: 15px; }
}

/* ---- emailed-PDF capture (html2canvas) ----
   The formal quote doc above is styled inside @media print only, but the
   emailed PDF is rasterised from SCREEN styles. quote.js adds .hp-pdf-capture
   to #hp-print-doc while capturing, so the same rules are mirrored here in an
   offscreen fixed-width (≈A4 @ 96dpi) container, then the class is removed. */
@media screen {
  #hp-print-doc.hp-pdf-capture {
    display: block;
    position: fixed; left: -10000px; top: 0;
    width: 794px;
    background: #fff;
    padding: 34px 14px;
    color: #1b1b1b;
    font-family: var(--font-body);
    font-size: 12.5px; line-height: 1.55;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__id { flex: 1.2; }
  #hp-print-doc.hp-pdf-capture .hp-fq__id h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; margin: 0 0 14px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__client { font-size: 13px; margin: 0; color: #333; }
  #hp-print-doc.hp-pdf-capture .hp-fq__meta { flex: 1; }
  #hp-print-doc.hp-pdf-capture .hp-fq__meta p { margin: 0 0 12px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__meta b { display: block; font-size: 12px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__meta span { font-size: 12.5px; color: #222; }
  #hp-print-doc.hp-pdf-capture .hp-fq__brand { flex: 1; text-align: right; }
  #hp-print-doc.hp-pdf-capture .hp-fq__logo { width: 48px; height: 48px; margin-bottom: 6px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__brand b {
    display: block; font-family: var(--font-display);
    font-weight: 700; font-size: 15px; letter-spacing: .08em; color: #007A6F; margin-bottom: 6px;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__brand address { font-style: normal; font-size: 11.5px; color: #333; line-height: 1.5; }
  #hp-print-doc.hp-pdf-capture .hp-fq__items { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
  #hp-print-doc.hp-pdf-capture .hp-fq__items th {
    text-align: left; font-size: 12px; font-weight: 700;
    border-top: 1.5px solid #1b1b1b; border-bottom: 1.5px solid #1b1b1b; padding: 7px 6px;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__items th.num, #hp-print-doc.hp-pdf-capture .hp-fq__items td.num { text-align: right; white-space: nowrap; }
  #hp-print-doc.hp-pdf-capture .hp-fq__items td { vertical-align: top; padding: 12px 6px 14px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__items td p { margin: 0 0 2px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__items td p.inc { margin: 0 0 1px; padding-left: 10px; font-size: 12px; color: #333; }
  #hp-print-doc.hp-pdf-capture .hp-fq__totrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__chop { width: 110px; height: auto; flex: none; margin-left: 6px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__totals { width: 46%; margin-left: auto; margin-top: 4px; flex: none; }
  #hp-print-doc.hp-pdf-capture .hp-fq__totals p {
    display: flex; justify-content: space-between; margin: 0;
    padding: 7px 6px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__totals p.total { font-weight: 700; border-bottom: 2px solid #1b1b1b; }
  #hp-print-doc.hp-pdf-capture .hp-fq__grid { display: flex; gap: 30px; margin: 44px 0 0; }
  #hp-print-doc.hp-pdf-capture .hp-fq__pay { flex: 1.3; }
  #hp-print-doc.hp-pdf-capture .hp-fq__pay h3 { font-size: 13px; margin: 0 0 8px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__pay p { margin: 0 0 3px; font-size: 12px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__sign { flex: 1; }
  #hp-print-doc.hp-pdf-capture .hp-fq__sign p { margin: 0 0 6px; font-size: 12.5px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__sign i { display: block; font-style: normal; border-bottom: 1px solid #555; height: 26px; margin: 0 0 18px; width: 85%; }
  #hp-print-doc.hp-pdf-capture .hp-fq__terms { margin-top: 40px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__terms h3 { font-size: 13.5px; margin: 0 0 14px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__terms h4 { font-size: 12.5px; margin: 14px 0 4px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__terms p { margin: 0; font-size: 11.5px; color: #222; line-height: 1.65; }
  #hp-print-doc.hp-pdf-capture .hp-fq__contact {
    font-size: 11px; color: #007A6F; margin: 30px 0 0; border-top: 1px solid #cfcfcf; padding-top: 12px;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__letter {
    padding-top: 60px; max-width: 620px; margin: 0 auto;
    font-size: 13px; line-height: 1.9; color: #1b1b1b; text-align: left;
  }
  #hp-print-doc.hp-pdf-capture .hp-fq__letterlogo { display: block; width: 72px; height: 72px; margin: 0 auto 28px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__letter p { margin: 0 0 14px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__sig { margin-top: 30px; }
  #hp-print-doc.hp-pdf-capture .hp-fq__sig b { font-size: 15px; }
}

/* ============================================================
   Language switcher（繁／EN）— compact toggle in the nav
   ============================================================ */
/* segmented control — soft track, active locale a filled deep-teal pill */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
}
.lang-switch__btn {
  min-width: 38px;
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--st-ink-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__btn:hover { color: var(--st-teal-deep); }
.lang-switch__btn.is-active { background: var(--st-teal-deep); color: #fff; }
.lang-switch__btn:focus-visible { outline: 2px solid var(--st-teal-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lang-switch__btn { transition: none; }
}
@media (max-width: 880px) {
  /* keep the toggle on the first row beside the logo; the menu wraps below */
  .nav .logo { order: -2; }
  .lang-switch { order: -1; }
}

/* ============================================================
   SEO ARTICLE — long-form layout for the rebuilt legacy pages
   (service / blog / legal pages ported from the old WordPress
   site; nav + footer reuse the studio chrome above)
   ============================================================ */
.seo-hero { background: linear-gradient(180deg, var(--st-tint) 0%, #fff 92%); padding-bottom: 26px; }
.seo-hero .hp-sechead { margin-bottom: 0; }
.seo-h1 { max-width: 880px; }
.seo-h1 br + span { display: inline; }
.seo-date { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--st-soft); }
.seo-fig { margin: 26px 0 0; background: #fff; border: 1px solid var(--st-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.seo-fig img { display: block; width: 100%; height: auto; }
.seo-fig figcaption { padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--st-soft); }
.seo-fig--hero { max-width: 880px; }
.seo-fig--hero img { max-height: 460px; object-fit: cover; }
.seo-wrap { padding-top: 38px; }
.seo-article { max-width: 780px; font-size: 16.5px; line-height: 1.9; }
.seo-article > p { margin: 0 0 18px; }
.seo-article h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(22px, 3vw, 28px); line-height: 1.35;
  margin: 44px 0 16px; padding-left: 16px;
  border-left: 4px solid var(--st-teal); color: var(--st-ink);
}
.seo-article h2:first-child { margin-top: 0; }
.seo-article h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  margin: 28px 0 10px; color: var(--st-teal-ink);
}
.seo-article ul, .seo-article ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.seo-article ol { counter-reset: seool; }
.seo-article li { position: relative; padding: 5px 0 5px 28px; }
.seo-article ul > li::before {
  content: ""; position: absolute; left: 6px; top: 16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-teal); box-shadow: 0 0 0 3px var(--st-tint);
}
.seo-article ol > li::before {
  counter-increment: seool; content: counter(seool);
  position: absolute; left: 0; top: 8px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--st-teal-deep); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.seo-article a { color: var(--st-teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.seo-article a:hover { color: var(--st-magenta); }
.seo-article .hp-faq { margin: 0 0 18px; }
.seo-tablewrap { margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--st-line); border-radius: var(--radius); }
.seo-tablewrap table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.seo-tablewrap th, .seo-tablewrap td { padding: 11px 14px; text-align: left; vertical-align: top; }
.seo-tablewrap thead th { background: var(--st-teal-ink); color: #fff; font-weight: 700; white-space: nowrap; }
.seo-tablewrap tbody th { font-weight: 700; color: var(--st-teal-ink); background: var(--st-tint); }
.seo-tablewrap tbody tr + tr th, .seo-tablewrap tbody tr + tr td { border-top: 1px solid var(--st-line); }
.seo-related { max-width: 780px; margin-top: 46px; padding: 24px 26px; background: var(--st-grey); border: 1px solid var(--st-line); border-radius: var(--radius); }
.seo-related h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.seo-related ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.seo-related a {
  display: inline-block; padding: 8px 14px; background: #fff;
  border: 1.5px solid var(--st-line); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--st-teal-ink); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.seo-related a:hover { border-color: var(--st-teal); color: var(--st-magenta); }
/* blog index grid */
.seo-bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 18px; }
@media (max-width: 960px) { .seo-bloggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .seo-bloggrid { grid-template-columns: 1fr; } }
.seo-bloggrid a {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: #fff; border: 1px solid var(--st-line); border-radius: var(--radius);
  text-decoration: none; color: var(--st-ink); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.seo-bloggrid a:hover { transform: translateY(-3px); border-color: var(--st-teal); box-shadow: var(--shadow-md); }
.seo-bloggrid .cat { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--st-teal-deep); text-transform: uppercase; }
.seo-bloggrid h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.5; }
.seo-bloggrid time { font-size: 13px; color: var(--st-soft); font-weight: 700; }
.seo-bloggrid .more { margin-top: auto; font-size: 13.5px; font-weight: 800; color: var(--st-magenta); }
@media (prefers-reduced-motion: reduce) {
  .seo-bloggrid a, .seo-related a { transition: none; }
}


/* ============ BLOG (專欄) — reusable article styles ============ */
.bl-wrap{max-width:880px;margin:0 auto;padding:46px 20px 70px}
.bl-wrap--index{max-width:1040px}
.bl-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:#5c6a67;margin-bottom:22px}
.bl-crumbs a{color:#01C6B2;text-decoration:none;font-weight:600}
.bl-crumbs a:hover{text-decoration:underline}
.bl-hero{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#eef2f1;margin:0 0 24px}
.bl-h1{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.3;font-weight:900;margin:0 0 10px}
.bl-meta{color:#7a8683;font-size:.85rem;margin:0 0 26px}
.bl-sub{color:#5c6a67;margin:0 0 28px}
.bl-intro{background:color-mix(in srgb, #01C6B2 8%, #ffffff);border-left:4px solid #01C6B2;padding:16px 18px;border-radius:0 12px 12px 0;line-height:1.85;margin:0 0 30px}
.bl-wrap h2{font-size:1.3rem;font-weight:800;margin:42px 0 14px;padding-top:8px}
.bl-wrap p{line-height:1.9;margin:0 0 16px;color:#2c3633}
.bl-table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:.92rem;display:block;overflow-x:auto}
.bl-table thead th{background:#01C6B2;color:#fff;text-align:left;padding:10px 12px;white-space:nowrap}
.bl-table tbody td{border-bottom:1px solid #e3e9e7;padding:10px 12px;vertical-align:top;line-height:1.7}
.bl-table tbody tr:nth-child(even){background:#f6faf9}
.bl-flow{display:flex;flex-direction:column;gap:0;margin:20px 0 28px}
.bl-flow__step{position:relative;border:2px solid #01C6B2;border-radius:14px;padding:12px 16px;background:#fff;display:flex;flex-direction:column;gap:2px}
.bl-flow__step b{color:#FF0062;font-size:.98rem}
.bl-flow__step span{color:#46524f;font-size:.9rem;line-height:1.6}
.bl-flow__step + .bl-flow__step{margin-top:26px}
.bl-flow__step + .bl-flow__step::before{content:"↓";position:absolute;top:-26px;left:50%;transform:translateX(-50%);color:#01C6B2;font-weight:900;font-size:1.1rem;line-height:26px}
.bl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 28px}
.bl-stat{border-radius:14px;background:color-mix(in srgb, #01C6B2 9%, #ffffff);border:1px solid color-mix(in srgb, #01C6B2 35%, #ffffff);padding:16px 14px;text-align:center}
.bl-stat b{display:block;font-size:1.25rem;color:#FF0062;font-weight:900}
.bl-stat span{display:block;margin-top:4px;font-size:.82rem;color:#5c6a67;line-height:1.5}
.bl-tl{list-style:none;margin:20px 0 28px;padding:0 0 0 18px;border-left:3px solid #01C6B2}
.bl-tl li{position:relative;padding:0 0 18px 16px}
.bl-tl li::before{content:"";position:absolute;left:-26px;top:6px;width:13px;height:13px;border-radius:50%;background:#FF0062;border:3px solid #fff;box-shadow:0 0 0 2px #FF0062}
.bl-tl b{display:block;color:#FF0062;font-size:.95rem}
.bl-tl span{color:#46524f;font-size:.9rem;line-height:1.7}
.bl-faqsec{margin-top:44px}
.bl-faq__item{border:1px solid #e3e9e7;border-radius:12px;margin:0 0 12px;background:#fff}
.bl-faq__item summary{cursor:pointer;font-weight:700;padding:14px 16px;list-style-position:inside}
.bl-faq__item p{padding:0 16px 14px;margin:0}
.bl-cta{margin:44px 0 8px;border-radius:18px;padding:26px 24px;background:linear-gradient(120deg, color-mix(in srgb, #01C6B2 14%, #ffffff), color-mix(in srgb, #FF0062 10%, #ffffff));border:2px solid #01C6B2}
.bl-cta h2{margin:0 0 8px;font-size:1.25rem}
.bl-cta p{margin:0 0 16px}
.bl-cta__acts{display:flex;flex-wrap:wrap;gap:12px}
.bl-cta__btn{display:inline-block;background:#FF0062;color:#fff;font-weight:800;padding:12px 20px;border-radius:999px;text-decoration:none}
.bl-cta__btn:hover{filter:brightness(1.08)}
.bl-cta__btn--line{background:#fff;color:#FF0062;border:2px solid #FF0062}
.bl-back{margin-top:30px}
.bl-back a{color:#01C6B2;font-weight:700;text-decoration:none}
.bl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.bl-card{display:flex;flex-direction:column;gap:8px;border:1px solid #e3e9e7;border-radius:16px;padding:0 0 20px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease}
.bl-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.bl-card__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#eef2f1;margin:0 0 4px}
.bl-card > :not(.bl-card__img){margin-left:20px;margin-right:20px}
.bl-card__date{font-size:.78rem;color:#7a8683;margin-top:14px}
.bl-card__title{font-size:1.05rem;font-weight:800;margin:0;line-height:1.5}
.bl-card__desc{font-size:.88rem;color:#5c6a67;line-height:1.7;margin:0}
.bl-card__more{color:#FF0062;font-weight:700;font-size:.88rem;margin-top:auto}
.bl-rel{margin:34px 0 0;border:1px dashed #01C6B2;border-radius:12px;padding:14px 16px;background:color-mix(in srgb, #01C6B2 6%, #ffffff)}
.bl-rel__label{margin:0 0 6px;font-size:.78rem;font-weight:800;color:#5c6a67;letter-spacing:.06em}
.bl-rel a{color:#FF0062;font-weight:700;text-decoration:none}
.bl-rel a:hover{text-decoration:underline}
@media (max-width:640px){.bl-wrap{padding:30px 16px 56px}}

/* ── Remove the top contact bar (WhatsApp moved to a floating button) ── */
.topbar { display: none; }
/* ── Floating WhatsApp button — bottom-right, above the 活動報價助手 chat FAB ── */
.wa-fab { position: fixed; right: 18px; bottom: 86px; z-index: 91; width: 54px; height: 54px;
  border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 12px 26px -8px rgba(0,0,0,.45); transition: transform .15s; }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 560px){ .wa-fab { right: 14px; bottom: 80px; width: 50px; height: 50px; } }

/* Quote tool — group sub-heading inside the combined service/combo checklist */
.hp-quote__checkgroup { margin: 14px 0 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--st-soft); }
.hp-quote__checkgroup:first-of-type { margin-top: 4px; }

/* Quote tool — per-service duration selector inline with each checked service */
.hp-quote__checkrow { display: flex; align-items: center; gap: 10px; }
/* Label sizes to its content only (checkbox + text) — it must NOT stretch into
   the gap, or a near-miss tap on mobile lands on the label and toggles the
   service off instead of opening the dropdown. The select is pushed right and
   given a comfortable tap target. */
.hp-quote__checkrow .hp-quote__check { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.hp-quote__checkrow .hp-quote__check span { overflow: hidden; text-overflow: ellipsis; }
.hp-quote__itemhours { flex: 0 1 auto; margin-left: auto; max-width: 60%; font: inherit; font-size: 12px; font-weight: 500;
  min-height: 36px; padding: 7px 10px; border: 1px solid var(--st-line); border-radius: 8px; background: #fff; color: var(--st-ink); cursor: pointer; position: relative; z-index: 1; }
.hp-quote__itemhours:focus { outline: 2px solid var(--st-teal); outline-offset: 1px; border-color: var(--st-teal); }
/* Multi-select services (美食攤位 / 攤位遊戲): checkbox chips below the row. */
.hp-quote__optpanel { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px 28px; }
.hp-quote__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 5px 11px; border: 1px solid var(--st-line); border-radius: 999px; background: #fff; color: var(--st-ink);
  cursor: pointer; white-space: nowrap; }
.hp-quote__chip:hover { background: var(--st-tint); }
.hp-quote__chip input { width: 15px; height: 15px; accent-color: var(--st-teal-deep); flex: none; }
.hp-quote__chip:has(input:checked) { border-color: var(--st-teal); background: var(--st-tint); }
/* 夾公仔／扭蛋機: variant + quantity selects share the right-hand slot. */
.hp-quote__itemctrls { display: flex; gap: 6px; margin-left: auto; max-width: 68%; }
.hp-quote__itemctrls .hp-quote__itemhours { margin-left: 0; max-width: none; flex: 1 1 auto; min-width: 0; }
.hp-quote__itemqty { flex: none; width: 58px; font: inherit; font-size: 12px; font-weight: 500;
  min-height: 36px; padding: 7px 8px; border: 1px solid var(--st-line); border-radius: 8px; background: #fff;
  color: var(--st-ink); cursor: pointer; }
.hp-quote__itemqty:focus { outline: 2px solid var(--st-teal); outline-offset: 1px; border-color: var(--st-teal); }

/* ============================================================
   MOBILE LAYER — phones (≤640px)
   ------------------------------------------------------------
   The desktop sheet grew ~50 ad-hoc breakpoints (380/420/520/560/
   620/640/700/760/800/880/900/920/960/980/1000…), so each section
   reflowed at a different width and the page read as a pile of
   unrelated blocks. This is the single place phones are styled;
   it lands last so it wins without !important (except where a
   desktop nth-child offset has to be unwound).

   Two devices carry it, both proven on hkeventpro:
     · the REEL  — a horizontal scroll-snap row, so a set of cards
                   costs one screen instead of N
     · HIDING    — decorative-only furniture is removed, not shrunk
   ============================================================ */
@media (max-width: 640px) {

  /* --- 1 · unwind the desktop masonry stagger -----------------
     .st-aud/.st-foods/.st-combos offset children (margin-top 12/
     34/44/46px) to fake masonry across 3–4 columns. Stacked on a
     phone those offsets survive as random gaps between cards —
     a main source of the "nothing lines up" read. */
  .st-aud > *, .st-foods > *, .st-combos > *, .st-wall .st-up {
    margin-top: 0 !important;
    transform: none !important;
  }

  /* --- 2 · the reel ------------------------------------------
     One card at a time, the next peeking to advertise the swipe.
     Full-bleed via a negative inline margin equal to .container's
     28px padding, with the padding restored inside so the first
     and last cards still align to the text column. */
  .st-aud, .st-foods, .st-combos, .st-reels, .st-reco__grid, .st-wall {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: -20px;
    padding: 2px 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .st-aud::-webkit-scrollbar, .st-foods::-webkit-scrollbar,
  .st-combos::-webkit-scrollbar, .st-reels::-webkit-scrollbar,
  .st-reco__grid::-webkit-scrollbar, .st-wall::-webkit-scrollbar { display: none; }

  /* --- 2b · tighter gutters ----------------------------------
     28px each side on a 375px phone is ~15% of the width gone to
     margin. 20px still keeps text off the edge and reclaims 16px
     of content width on every section. The reel bleed above is
     realigned to match (−20px), so full-bleed rows still align. */
  .container { padding-left: 20px; padding-right: 20px; }

  .st-aud > *, .st-foods > *, .st-combos > *,
  .st-reels > *, .st-reco__grid > *, .st-wall > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
  /* photo reels read better slightly narrower + on a fixed ratio */
  .st-wall > * { flex-basis: 74%; aspect-ratio: 4 / 3; }
  .st-wall > *, .st-w-4, .st-w-5, .st-w-3, .st-w-6 { grid-column: auto; }

  /* .st-reco__grid is the one reel that is NOT a direct child of .container
     (it sits inside .st-reco__results), so the -28px bleed would escape its
     parent and give the whole page a horizontal scrollbar. It reels in place.
     min-width:0 stops the wide flex/grid track from blowing its ancestors out
     — the default `auto` minimum sizes them to the content, not the screen. */
  .st-reco__grid { margin-inline: 0; padding-inline: 0; }
  .st-reco__layout, .st-reco__results, .st-reco__panel { min-width: 0; }
  .st-reco__layout > *, .st-reco__results > * { min-width: 0; max-width: 100%; }
  .st-reco__visual, .st-reco__visual img { max-width: 100%; height: auto; }

  /* --- 3 · occasion picker: a real grid ----------------------
     Was `flex-wrap` with content-width chips, so the six labels
     (生日會 … 企業週年晚宴) produced ragged rows of differing
     widths. Two equal columns line them up. */
  .st-reco__picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .st-reco__chip {
    min-height: 48px;          /* was ~38px — under the 44px target */
    padding: 10px 12px;
    gap: 8px;
    font-size: 14px;
  }
  .st-reco__chip-ico { width: 26px; height: 26px; flex: none; }
  .st-reco__chip-ico svg { width: 16px; height: 16px; }

  /* --- 4 · hide decoration, not content ----------------------
     .st-no is an oversized section numeral absolutely positioned
     at right:-8px; on a phone it is clipped by the viewport and
     reads as a stray glyph behind the headings. The collage is a
     desktop-only stack that costs ~330px to say nothing. */
  .st-no, .st-hero__ghost, .st-collage { display: none; }

  /* --- 5 · tighter vertical rhythm ---------------------------
     96px of section padding on a 390px screen is most of a
     thumb-scroll of nothing. */
  .st-sec { padding: 56px 0; }
  .st-head, .st-reco__head { margin-bottom: 28px; }
  .st-h2 { font-size: clamp(23px, 6.6vw, 29px); line-height: 1.25; }
  /* keep the accent clause whole — it was breaking mid-word (告 / 訴我們…) */
  .st-h2 em { display: inline-block; }
  .st-sub { font-size: 15px; }
  .st-eyebrow { font-size: 11.5px; letter-spacing: .14em; }

  /* --- 6 · tap targets + type floor --------------------------
     The audit found 28–31px links (查看全部服務 →, 立即估價 →,
     the 繁/简/EN switcher) and 10.5–12px body text. */
  .st-link, .st-aud__cta, .st-more, a.st-row { min-height: 44px; }
  .st-link, .st-aud__cta, .st-more { display: inline-flex; align-items: center; }
  .lang-switch__btn { min-width: 44px; min-height: 40px; }
  .st-ticket__no, .st-hero__badge, .hp-chat__label { font-size: 13px; }

  /* --- 7 · align the two floating widgets --------------------
     They sat at different right edges (chat 18px, WhatsApp 14px)
     and stacked over the copy. Same edge, consistent gap, and
     the page gets bottom room so the last block clears them. */
  .hp-chat { right: 14px; bottom: 14px; }
  .wa-fab  { right: 14px; bottom: 76px; width: 50px; height: 50px; }
  body { padding-bottom: 76px; }

  /* --- 8 · process steps: card stack -> compact timeline -------
     Four 270px cards each carrying a 48px number badge AND an
     icon saying the same thing. On a phone the number is enough:
     badge left, text right, ~90px a step. */
  .st-steps { display: grid; gap: 10px; }
  .st-steps__line { display: none; }        /* connector for the desktop row */
  .st-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 12px; row-gap: 2px;
    padding: 14px 16px; text-align: left;
  }
  .st-step::before { display: none; }       /* 4px accent bar reads as clutter here */
  .st-step__node { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; }
  .st-step__no { font-size: 13px; }
  .st-step__icon { display: none; }         /* redundant beside the numeral */
  .st-step h3 { grid-column: 2; grid-row: 1; font-size: 16px; margin: 0; }
  .st-step p  { grid-column: 2; grid-row: 2; font-size: 14px; margin: 0; }

  /* --- 9 · quote tool: tighten the rows -----------------------
     The tool is genuinely long (it is the conversion surface, so
     nothing is hidden) — but the rows were built for a desktop
     column and waste ~8px each over ~40 rows. */
  .hp-quote__tool { gap: 18px; }
  .hp-quote__checkrow { padding-block: 4px; gap: 8px; }
  .hp-quote__check { min-height: 40px; }   /* tap target — do not trade this away */
  .hp-quote__field { margin-bottom: 12px; }
  .hp-quote__itemhours, .hp-quote__itemqty { font-size: 13px; }

  /* --- 8b · the lead / result card was triple-padded ----------
     container(20) + result(28) + lead(18) = 66px each side put the
     form inputs at ~231px on a 375 screen. The container already
     frames it, so trim the two inner cards: inputs regain ~30px. */
  .hp-quote__result { padding: 20px 13px 16px; }
  .hp-lead { padding: 16px 13px; }

  /* --- 10 · in-page anchors clear the sticky header ------------
     #recommender, #quote etc. otherwise land with the eyebrow and
     part of the H2 hidden behind the fixed bar. */
  html { scroll-padding-top: 84px; }

  /* --- 11 · buttons sized for a thumb, not a desktop hero -----
     Base is 16px/14px-30px ≈ 52px tall; several sat nearly full
     width. 44px is the tap-target floor, and that is enough. */
  .st-btn, .hp-btn {
    font-size: 14.5px;
    padding: 11px 18px;
    min-height: 44px;
    border-radius: 10px;
  }
  .st-cta__acts .st-btn, .st-cta__acts .hp-btn { flex: 1 1 auto; }

  /* --- 12 · footer: four stacked columns -> two ---------------
     The service column alone ran nine links down a single file,
     pushing 了解更多 and 關聯品牌 an extra screen away. Two
     columns halve it and the whole footer reads at a glance.
     The dial code is dead weight on a phone (the number is a tap
     target, not something anyone reads out), so it is dropped
     from the label — the wa.me href is untouched. */
  .footer__inner { gap: 22px 20px; padding: 40px 28px 28px; }
  /* Brand and 服務 go full width; 服務's nine links run two-up, so they cost
     five rows instead of nine and 了解更多 + 關聯品牌 still pair off below.
     Previously the short brand block sat beside that nine-link column and
     left a column of dead space the height of six links. */
  .footer__inner > .footer__brand { grid-column: 1 / -1; margin-bottom: 0; }
  .footer__inner > .footer__col:nth-child(2) {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
  }
  .footer__inner > .footer__col:nth-child(2) h4 { grid-column: 1 / -1; }
  .footer__tag { max-width: none; margin-bottom: 12px; font-size: 13.5px; }
  .footer__contact { font-size: 14px; line-height: 1.7; }
  .footer__col { min-width: 0; }
  .footer__col h4 { margin-bottom: 8px; font-size: 14px; }
  .footer__col a { padding: 7px 0; font-size: 13.5px; }
  .footer__wa-cc { display: none; }        /* the "+852" span */
}