/* Health & Beauty Amy · 爱美荟 — preview v1 (2026-10-11). Hand-written, no framework.
   Forked from the Città d'Oro preview: same component system (cards 12px / pad 20 / icon 40, buttons 8px, inputs 44px,
   .sec rhythm), so every block shares one set of sizes. Colour and type are the salon's own: the cocoa-brown sign with
   champagne-gold letters, the mint curtains in the windows, the white marble floor. Young Serif (close to the sign's
   lettering) over Figtree; «Amy» in Pinyon Script as on the sign. */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/young-serif-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/young-serif-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/pinyon-script-latin.woff2) format("woff2"); }
@font-face { font-family: "Amy Serif SC"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/noto-serif-sc-sub.woff2?v=5b2207d143) format("woff2"); }
/* metric-matched fallbacks so the swap does not shove the hero around */
@font-face { font-family: "Young Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 104%; ascent-override: 90%; descent-override: 24%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; }

:root {
  /* marble white and a mint-grey alternate (hue 170: not the warm cream band) */
  --paper: oklch(0.986 0.003 165); --paper-2: oklch(0.958 0.012 172); --card: #FFFFFF;
  --ink: oklch(0.25 0.022 45); --ink-2: oklch(0.38 0.022 45); --mute: oklch(0.50 0.018 45);
  /* the sign: cocoa brown, champagne letters */
  --noir: oklch(0.31 0.036 45); --noir-deep: oklch(0.235 0.03 45);
  --gold-tint: oklch(0.95 0.025 175); --gold-ink: oklch(0.47 0.075 70); --gold: oklch(0.82 0.075 80); --gold-2: oklch(0.70 0.085 75); --gold-soft: oklch(0.80 0.05 170);
  --mint: oklch(0.93 0.035 178); --mint-ink: oklch(0.45 0.07 178);
  --on-dark: oklch(0.95 0.012 80); --on-dark-2: oklch(0.82 0.02 70); --dark-line: rgba(243, 234, 223, .14);
  --seal: var(--gold-ink); --seal-ink: #fff;
  --line: oklch(0.89 0.012 170); --line-2: oklch(0.93 0.009 170);
  --wa: #25D366; --wa-dark: #1DA851; --wechat: #07C160; --wechat-dark: #06AE56;
  --r: 12px; --r-lg: 18px; --shadow: 0 20px 44px rgba(40, 26, 18, .10); --shadow-s: 0 6px 16px rgba(40, 26, 18, .07);
  --max: 1240px; --gutter: clamp(18px, 4vw, 44px);
  --f: "Figtree", "Figtree Fallback", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-display: "Young Serif", "Amy Serif SC", "Young Fallback", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --f-zh-serif: "Amy Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── base ───────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scroll-behavior: smooth; background: var(--noir-deep); -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg:not(.sprite) { width: 18px; height: 18px; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.012em; line-height: 1.08; }
h1 { font-size: clamp(40px, 5.2vw, 70px); }
h2 { font-size: clamp(30px, 3.5vw, 46px); }
h3 { font: 500 clamp(17px, 1.5vw, 19px)/1.3 var(--f); letter-spacing: -.005em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 0; }
.topbar :focus-visible, .hero :focus-visible, .hdr.over :focus-visible, .band :focus-visible, .tl :focus-visible, .foot :focus-visible, .mbar :focus-visible, .wa-panel .head :focus-visible, .wc-pop .head :focus-visible { outline-color: var(--gold); }
.skip { position: fixed; left: 12px; top: -64px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--noir); color: #fff; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 500 11.5px/1 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lede { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: clamp(24px, 3.6vw, 44px); }
.sec-head.row { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
.sec-head.row .lede { max-width: 44ch; }
.sec-head h2 { margin-top: 2px; }
@media (max-width: 700px) { .sec-head.row { grid-template-columns: 1fr; } }

/* ── buttons: five kinds only ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; font: 500 14.5px/1 var(--f); letter-spacing: .02em; padding: 13px 20px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--noir); color: #fff; }
.btn-primary:hover { background: var(--noir-deep); box-shadow: 0 10px 22px rgba(40, 26, 18, .22); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: #fff; }
.btn-gold { background: var(--gold); color: var(--noir-deep); }
.btn-gold:hover { background: #E6CFA3; box-shadow: 0 10px 24px rgba(216, 188, 140, .22); }
.btn-wa { background: var(--wa); color: #063D1E; }
.btn-wa:hover { background: var(--wa-dark); color: #fff; }
.btn-wechat { background: var(--wechat); color: #063D1E; }
.btn-wechat:hover { background: var(--wechat-dark); color: #fff; }
.btn-sm { min-height: 40px; padding: 10px 14px; font-size: 13.5px; }
.btn .wc-ic { color: var(--wechat-dark); }
/* on dark grounds */
.band .btn-ghost { color: var(--on-dark); border-color: rgba(243, 234, 223, .3); }
.band .btn-ghost:hover { background: rgba(243, 234, 223, .08); border-color: var(--on-dark); }
.band .btn .wc-ic { color: var(--wechat); }

/* ── promo bar (owner-set, content.json): above the service bar, scrolls away; three fixed contrast-checked colours ── */
.promo { padding: 9px var(--gutter); text-align: center; font-size: 13.5px; line-height: 1.45; letter-spacing: .01em; }
.promo[hidden] { display: none; }
.promo p { margin: 0 auto; max-width: var(--max); }
.promo-a { background: var(--gold); color: var(--noir-deep); }
.promo-b { background: var(--mint); color: var(--noir-deep); }
.promo-c { background: var(--noir); color: var(--on-dark); }

/* ── service bar + header: both stick (user 2026-10-10: «统一一点都 sticky») ─────────────── */
:root { --tb: 38px; --hd: 72px; }
html { scroll-padding-top: calc(var(--tb) + var(--hd) + 4px); }
.topbar { position: sticky; top: 0; z-index: 63; height: var(--tb); background: var(--noir-deep); color: var(--on-dark-2); font-size: 12.5px; }
.topbar .wrap { display: flex; gap: 18px; align-items: center; height: 100%; }
.topbar a, .topbar button { color: #fff; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.topbar a:hover, .topbar button:hover { color: var(--gold); }
.topbar .grow { flex: 1; }
.topbar .it { display: inline-flex; align-items: center; gap: 7px; height: 100%; white-space: nowrap; }
.topbar svg { width: 14px; height: 14px; color: var(--gold); }
.topbar .today { min-width: 0; }
.topbar [data-today-text] { overflow: hidden; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #8A7F78; flex: none; }
[data-today].is-open .dot { background: #4CC57E; box-shadow: 0 0 0 3px rgba(76, 197, 126, .2); }

.hdr { position: sticky; top: var(--tb); z-index: 40; background: rgba(247, 245, 241, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: background-color .35s var(--ease), border-color .2s, box-shadow .2s, backdrop-filter .35s; }
.hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px rgba(40, 26, 18, .06); }
/* over the hero pictures the header is clear with light words; it turns solid once the hero has scrolled away (app.js «over») */
.hdr.over:not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom-color: rgba(255, 255, 255, .14); }
.hdr.over:not(.menu-open) .mark { color: #fff; }
.hdr.over:not(.menu-open) .mark small, .hdr.over:not(.menu-open) .mark .amy { color: var(--gold); }
.hdr.over:not(.menu-open) .mark-icon { background: var(--gold); }
.hdr.over:not(.menu-open) .mark .mark-zh { color: #fff; }
.hdr.over:not(.menu-open) .nav a { color: rgba(255, 255, 255, .88); }
.hdr.over:not(.menu-open) .nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hdr.over:not(.menu-open) .hdr-cta { background: var(--gold); border-color: var(--gold); color: var(--noir-deep); }
.hdr.over:not(.menu-open) .burger, .hdr.over:not(.menu-open) .lang-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); color: #fff; }
.hdr.over:not(.menu-open) .burger span, .hdr.over:not(.menu-open) .burger span::before, .hdr.over:not(.menu-open) .burger span::after { background: #fff; }
@media (min-width: 761px) {
  .hdr.over .lang-list { background: transparent; border-color: rgba(255, 255, 255, .32); }
  .hdr.over .lang-list a { color: rgba(255, 255, 255, .72); }
  .hdr.over .lang-list a[aria-current] { background: #fff; color: var(--noir); }
  .hdr.over .lang-list a:not([aria-current]):hover { background: rgba(255, 255, 255, .1); color: #fff; }
}
.hdr .wrap { display: flex; align-items: center; gap: 26px; height: var(--hd); }
/* the mark: the butterfly from the owner's logo file (爱美荟定稿, tools/logo.py), then the 2026 sign's lettering «Health & Beauty Amy» */
.mark { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 12px; align-content: center; gap: 5px; min-height: 44px; text-decoration: none; color: var(--ink); line-height: 1; flex: none; white-space: nowrap; }
.mark b { font: 400 22px/1 var(--f-display); letter-spacing: 0; white-space: nowrap; }
.mark .amy { font: 400 1.62em/.6 var(--f-script); color: var(--gold-ink); margin-left: .04em; letter-spacing: 0; }
.mark .mark-zh { font: 600 12px/1 var(--f-zh-serif); letter-spacing: .14em; margin-right: 9px; color: var(--ink-2); text-transform: none; }
.mark b, .mark small { grid-column: 2; }  /* words always in column 2, so hiding the icon leaves column 1 empty, not a two-up row */
.mark-icon { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 40px; background: var(--gold-ink); -webkit-mask: url(../img/butterfly.png) center / contain no-repeat; mask: url(../img/butterfly.png) center / contain no-repeat; }
.mark small { display: flex; align-items: center; font: 600 9.5px/1 var(--f); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 9px 11px; border-radius: 6px; transition: background-color .15s, color .15s; white-space: nowrap; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.lang { position: relative; flex: none; }
.lang-btn { display: none; }
.lang-list { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; font: 600 12px/1 var(--f); background: #fff; }
.lang-list a { text-decoration: none; padding: 9px 11px; color: var(--mute); letter-spacing: .04em; white-space: nowrap; transition: background-color .15s, color .15s; display: inline-flex; align-items: center; }
.lang-list a b { font-weight: 600; }
.lang-list a span { display: none; }
.lang-list a[aria-current] { background: var(--noir); color: #fff; }
.lang-list a:not([aria-current]):hover { background: var(--paper-2); color: var(--ink); }
.hdr-cta { margin-left: 6px; }
.burger { display: none; width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; place-items: center; margin-left: 8px; position: relative; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mnav { display: none; }
@media (max-width: 1260px) { .nav a { padding: 9px 8px; font-size: 13.5px; } .hdr .wrap { gap: 18px; } }
@media (max-width: 1140px) { .hdr-cta { display: none; } }
@media (max-width: 980px) {
  .nav, .hdr-cta { display: none; }
  .lang { margin-left: auto; }
  .burger { display: grid; z-index: 61; }
  .hdr .wrap { gap: 10px; }
  .mnav { display: block; position: fixed; inset: 0; background: var(--paper); z-index: 60; padding: calc(var(--tb) + var(--hd) + 24px) var(--gutter) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s; overflow: auto; }
  .mnav.open { transform: none; opacity: 1; visibility: visible; }
  .mnav a.item { display: flex; justify-content: space-between; align-items: center; font: 400 26px/1.2 var(--f-display); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .mnav.open a.item { opacity: 1; transform: none; }
  .mnav .ctas { display: grid; gap: 10px; margin-top: 22px; }
  .mnav .meta { margin-top: 26px; font-size: 13.5px; color: var(--mute); }
  .hdr.menu-open { background: var(--paper); z-index: 62; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* phones: the bar keeps today's status and three one-tap icons; the address lives in the bottom bar (Directions) */
@media (max-width: 760px) {
  :root { --tb: 44px; --hd: 60px; }
  .hide-m { display: none !important; }
  .topbar .wrap { gap: 0; padding-right: calc(var(--gutter) - 10px); }
  .topbar .lbl { display: none; }
  .topbar .it:not(.today) { width: 44px; justify-content: center; }
  .topbar .it:not(.today) svg { width: 18px; height: 18px; }
  .topbar .today { font-size: 12.5px; padding-right: 8px; }
  .mark b { font-size: 19px; }
  .mark small { font-size: 8.5px; letter-spacing: .2em; }
  .mark .mark-zh { font-size: 11px; margin-right: 7px; }
  /* phones: no room for the butterfly next to «IT ▾» + burger (zh had 9 px to spare); it stays in the footer and the favicon */
  .hdr .mark { column-gap: 0; }
  .hdr .mark-icon { display: none; }
  /* language: one quiet «IT ▾» button, the list opens under it */
  .lang-btn { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 600 13px/1 var(--f); letter-spacing: .04em; cursor: pointer; }
  .lang-btn svg { width: 15px; height: 15px; color: var(--mute); transition: rotate .2s var(--ease); }
  .lang.open .lang-btn svg { rotate: 180deg; }
  .lang-list { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 176px; flex-direction: column; padding: 6px; border-radius: 12px; box-shadow: 0 14px 34px rgba(40, 26, 18, .16); font-weight: 500; }
  .lang.open .lang-list { display: flex; animation: pop .16s var(--ease); }
  .lang-list a { justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); }
  .lang-list a b { order: 2; font-size: 11.5px; color: var(--mute); letter-spacing: .08em; }
  .lang-list a span { display: inline; font: 500 15px/1 var(--f); }
  .lang-list a[aria-current] { background: var(--gold-tint); color: var(--ink); }
}

/* ── hero: full-bleed pictures that cross-fade (slow zoom while shown), words on a shade, logo strip at the foot ── */
.hero { position: relative; margin-top: calc(-1 * var(--hd) - 1px); /* the header is --hd + its 1 px border */ min-height: clamp(600px, calc(100svh - var(--tb)), 940px); display: grid; grid-template-rows: 1fr auto; overflow: clip; isolation: isolate; background: var(--noir-deep); color: var(--on-dark); }
.slides { position: absolute; inset: 0; z-index: -2; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
/* shade: dark where the words are (left, then the foot for the logo strip), clear where the picture is */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(34, 22, 16, .62) 0, rgba(34, 22, 16, 0) 190px), linear-gradient(90deg, rgba(34, 22, 16, .86) 0%, rgba(34, 22, 16, .62) 38%, rgba(34, 22, 16, .18) 72%, rgba(34, 22, 16, .08) 100%), linear-gradient(0deg, rgba(34, 22, 16, .9) 0%, rgba(34, 22, 16, 0) 32%); }
.hero-in { width: 100%; align-self: stretch; display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 24px; align-items: center; padding-top: calc(var(--hd) + clamp(40px, 8vw, 120px)); padding-bottom: clamp(28px, 4vw, 44px); }
.slide-ctl { justify-self: end; align-self: end; display: flex; align-items: center; gap: 6px; }
.scap { margin-right: 8px; font: 500 11px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.sdots { display: flex; }
.sdot { width: 36px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
.sdot i { position: relative; display: block; width: 26px; height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.sdot i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; scale: 0 1; }
.sdot[aria-pressed="true"] i::after { scale: 1 1; }
.hero.playing .sdot[aria-pressed="true"] i::after { animation: sfill var(--sdur, 6s) linear both; }
.sdot:hover i { background: rgba(255, 255, 255, .55); }
.spause { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(34, 22, 16, .25); color: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.spause:hover { border-color: #fff; background: rgba(34, 22, 16, .45); }
.spause svg { width: 15px; height: 15px; }
.spause .i-play, .hero.paused .spause .i-pause { display: none; }
.hero.paused .spause .i-play { display: block; }
@keyframes sfill { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes kenburns { from { scale: 1.08; } to { scale: 1; } }
.hero h1 { margin: 18px 0 16px; font-size: clamp(40px, 4.6vw, 64px); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .notice { text-decoration: none; }
.hero .notice:hover { background: rgba(34, 22, 16, .78); }
.hero .lede { max-width: 44ch; color: rgba(255, 255, 255, .82); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero .btn-primary { background: var(--gold); color: var(--noir-deep); }
.hero .btn-primary:hover { background: #E6CFA3; box-shadow: 0 10px 24px rgba(216, 188, 140, .22); }
.hero .btn-ghost { color: var(--on-dark); border-color: rgba(243, 234, 223, .3); }
.hero .btn-ghost:hover { background: rgba(243, 234, 223, .08); border-color: var(--on-dark); }
.hero .btn .wc-ic { color: var(--wechat); }
.btn .wa-ic { color: var(--wa-dark); }
.hero .btn .wa-ic, .band .btn .wa-ic, .foot .btn .wa-ic { color: var(--wa); }
/* small phones (360-400): mark + «中文 ▾» + burger overflowed by 6-21 px at 360; a smaller wordmark and tighter gaps fit them */
@media (max-width: 400px) { .hdr .wrap { gap: 8px; } .hdr .mark b { font-size: 16.5px; } .burger { margin-left: 2px; } .lang-btn { padding: 0 8px 0 10px; } }
@media (max-width: 600px) { .hero .ctas, .fc-actions { display: grid; grid-template-columns: 1fr 1fr; } .hero .ctas .btn:first-child { grid-column: 1 / -1; } }
.notice { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; border-radius: 999px; padding: 6px 14px 6px 7px; font-size: 13.5px; font-weight: 500; background: rgba(34, 22, 16, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 0 0 1px rgba(216, 188, 140, .35); }
.notice i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--noir-deep); }
.notice i svg { width: 11px; height: 11px; }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 18px; align-content: end; }
  .slide-ctl { justify-self: start; margin-left: -10px; }
  .hero::before { background: linear-gradient(180deg, rgba(34, 22, 16, .6) 0, rgba(34, 22, 16, 0) 150px), linear-gradient(0deg, rgba(34, 22, 16, .92) 0%, rgba(34, 22, 16, .72) 42%, rgba(34, 22, 16, .25) 75%, rgba(34, 22, 16, .2) 100%); }
}
@media (max-width: 600px) { .scap { display: none; } .hero h1 { font-size: clamp(32px, 9vw, 40px); } }
/* phones: the hero ends above the action bar so the logo strip is visible at first sight */
@media (max-width: 760px) { .hero { min-height: max(560px, calc(100svh - var(--tb) - 72px - env(safe-area-inset-bottom))); } }

/* silk canvas (services band): fades in once app.js has a frame; no-gl keeps the CSS gradient */
.silk { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.silk.on { opacity: 1; }
.silk.no-gl { display: none !important; }

/* facts strip at the foot of the hero: four short truths, no motion */
.facts { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 var(--gutter); min-height: 62px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 36px; border-top: 1px solid var(--dark-line); background: rgba(36, 24, 18, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--on-dark); font-size: 14px; }
.facts li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 10px 0; }
.facts svg { width: 18px; height: 18px; color: var(--gold); }
@media (max-width: 760px) { .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 6px var(--gutter); justify-items: start; font-size: 13px; } .facts li { white-space: normal; min-height: 40px; padding: 6px 0; } }

/* ── treatments: four tabs; picture | list of rows, each row books itself ──────────────── */
.tr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 3vw, 32px); overflow-x: auto; scrollbar-width: none; }
.tr-tabs::-webkit-scrollbar { display: none; }
.tr-tab { position: relative; flex: none; min-height: 50px; padding: 0 18px; border: 0; background: none; cursor: pointer; font: 500 15.5px/1 var(--f); color: var(--mute); white-space: nowrap; transition: color .2s; }
.tr-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold-2); scale: 0 1; transition: scale .35s var(--ease); }
.tr-tab:hover { color: var(--ink); }
.tr-tab[aria-selected="true"] { color: var(--ink); }
.tr-tab[aria-selected="true"]::after { scale: 1 1; }
.tr-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.tr-panel[hidden] { display: none; }
.tr-pic { position: sticky; top: calc(var(--tb) + var(--hd) + 20px); margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: clip; background: var(--paper-2); }
.tr-pic img { width: 100%; height: 100%; object-fit: cover; }
.tr-pic figcaption, .svc-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .92); font: 600 11px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tr-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tr-list h3 { font: 400 clamp(19px, 1.7vw, 22px)/1.25 var(--f-display); margin-bottom: 6px; }
.tr-list p { font-size: 15px; color: var(--ink-2); max-width: 54ch; }
.tr-book { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 14px/1 var(--f); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.tr-book svg { width: 16px; height: 16px; color: var(--gold-ink); transition: color .2s; }
.tr-book:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
.tr-book:hover svg { color: var(--gold); }
.brands-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 30px; margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; border-top: 1px solid var(--line-2); }
.brands-line span { font: 600 11.5px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.brands-line b { font: 400 20px/1.2 var(--f-display); color: var(--ink-2); }
@media (max-width: 900px) { .tr-panel { grid-template-columns: 1fr; } .tr-pic { position: relative; top: auto; aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .tr-tabs { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } }
@media (max-width: 480px) { .tr-tab { padding: 0 13px; font-size: 14.5px; } .tr-list li { gap: 12px; padding: 16px 0; } .tr-book { padding: 0 12px; } .tr-book svg { display: none; } }

/* ── gallery: one long rail of large pictures; each one slides in as the rail is swiped ─ */
.gal .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.rail-nav { display: flex; gap: 8px; }
.gal-track { list-style: none; margin: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) 8px; scroll-padding-inline: max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)); }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.g { flex: none; scroll-snap-align: start; }
.g figure { margin: 0; }
.g img { height: clamp(320px, 34vw, 500px); width: auto; max-width: 82vw; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.g figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: baseline; gap: 10px; }
.g figcaption small { font: 500 10px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 600px) { .g img { height: 300px; } .gal .rail-nav { display: none; } }

/* ── services: dark band over the gold silk; the picture follows the service ─────────── */
.band { position: relative; overflow: clip; isolation: isolate; padding: clamp(56px, 8vw, 104px) 0; background: var(--noir-deep) radial-gradient(60% 80% at 85% 15%, rgba(184, 147, 90, .2), transparent 65%); color: var(--on-dark); }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(34, 22, 16, .86) 0%, rgba(34, 22, 16, .62) 55%, rgba(34, 22, 16, .25) 100%); }
.band > .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.band .eyebrow { color: var(--gold); }
.band h2 { color: #fff; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--dark-line); }
/* hover / focus / tap: the icon turns gold and a gold rule draws along the bottom — colour only, nothing moves */
.step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--dark-line); align-items: start; cursor: pointer; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px; transition: background-size .6s var(--ease); }
.step i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgba(216, 188, 140, .12); color: var(--gold); transition: background-color .3s, color .3s, box-shadow .3s; }
.step i svg { width: 20px; height: 20px; }
.step h3 { color: #fff; margin-bottom: 4px; font-size: 17px; transition: color .3s; }
.step p { color: var(--on-dark-2); font-size: 14.5px; }
.step.is-on { background-size: 100% 1px; }
.step.is-on i { background: var(--gold); color: var(--noir-deep); box-shadow: 0 0 0 6px rgba(216, 188, 140, .12); }
.step.is-on h3 { color: var(--gold); }
.band .photo { margin: 0; position: relative; border-radius: var(--r-lg); overflow: clip; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); background: #2c1f18; }
.svc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.svc-photo img.on { opacity: 1; }
.band .ctas { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .band > .grid { grid-template-columns: 1fr; } .band .photo { aspect-ratio: 16 / 10; order: -1; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* ── story: an auto-playing timeline — one picture, an outlined year and the words on a dark card; four steps on a gold line ─ */
.tl { background: var(--noir-deep); color: var(--on-dark); border-radius: var(--r-lg); overflow: clip; box-shadow: 0 30px 60px rgba(40, 26, 18, .18); }
.tl-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(360px, 36vw, 470px); }
.tl-media { position: relative; overflow: clip; background: #000; }
.tl-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.tl-pic.is-on { opacity: 1; }
.tl-pic img { width: 100%; height: 100%; object-fit: cover; }
.tl-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 60%, rgba(34, 22, 16, .55)); }
.tl-text { position: relative; display: grid; align-content: center; padding: clamp(28px, 4vw, 56px); overflow: clip; }
.tl-panel { grid-area: 1 / 1; }
.tl-panel[hidden] { display: block; visibility: hidden; opacity: 0; }
.tl-n { display: block; font: 400 clamp(60px, 8vw, 120px)/.9 var(--f-display); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px rgba(216, 188, 140, .75); font-variant-numeric: lining-nums; margin-bottom: 18px; white-space: nowrap; }
.tl-k { display: block; font: 600 11px/1 var(--f); letter-spacing: .2em; color: var(--gold); margin-bottom: 12px; }
.tl-text h3 { color: #fff; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 12px; }
.tl-text p { color: var(--on-dark-2); font-size: 15.5px; max-width: 38ch; }
.tl-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 clamp(16px, 2.4vw, 28px) 0 0; border-top: 1px solid var(--dark-line); }
.tl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-tab { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; min-height: 76px; padding: 18px clamp(16px, 2.4vw, 28px) 16px; border: 0; background: transparent; color: var(--on-dark-2); cursor: pointer; transition: background-color .2s, color .2s; }
.tl-tab b { font: 400 20px/1 var(--f-display); color: var(--on-dark); transition: color .2s; }
.tl-tab span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-tab:hover { background: rgba(255, 255, 255, .04); }
.tl-tab[aria-selected="true"] b { color: var(--gold); }
.tl-tab[aria-selected="true"] { color: #fff; }
.tl-fill { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(216, 188, 140, .18); }
.tl-fill::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; scale: 0 1; }
.tl-tab[aria-selected="true"] .tl-fill::after { scale: 1 1; }
.tl.playing .tl-tab[aria-selected="true"] .tl-fill::after { animation: sfill var(--sdur, 7s) linear both; }
.tl .spause { flex: none; }
.tl.paused .spause .i-pause { display: none; }
.tl.paused .spause .i-play { display: block; }
.tl:not(.paused) .spause .i-play { display: none; }
@media (max-width: 900px) {
  .tl-stage { grid-template-columns: 1fr; min-height: 0; }
  .tl-media { aspect-ratio: 4 / 3; }
  .tl-media::after { background: linear-gradient(0deg, rgba(34, 22, 16, .5), transparent 40%); }
  .tl-text { padding: 22px 20px 24px; align-content: start; }
  .tl-n { font-size: 56px; margin-bottom: 12px; }
  .tl-text p { font-size: 15px; }
}
@media (max-width: 600px) {
  .tl-tab { min-height: 60px; padding: 14px 10px 12px; }
  .tl-tab b { font-size: 16px; }
  .tl-tab span { display: none; }
  .tl-bar { padding-right: 10px; gap: 6px; }
}

/* ── reviews ────────────────────────────────────────────────────────────────────────── */
.reviews { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: clip; }
.rv-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.rv-head h2 { margin-top: 14px; }
.rv-nav { display: flex; gap: 8px; }
.rv-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.rv-nav button:hover { border-color: var(--ink); }
.rv-nav button:disabled { opacity: .35; cursor: default; }
.rv-track { list-style: none; margin: 0 calc(-1 * var(--gutter)); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scroll-behavior: smooth; padding: 4px var(--gutter) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rv-track::-webkit-scrollbar { display: none; }
.rv { flex: 0 0 min(340px, 80vw); scroll-snap-align: start; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 22px; display: grid; gap: 12px; align-content: start; min-height: 220px; }
.stars { color: var(--gold-2); letter-spacing: 2px; font-size: 14px; }
.rv blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.rv .who { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); margin-top: auto; }
.glogo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.glogo i { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); display: inline-block; }
.rv.more { border-style: dashed; background: transparent; align-content: center; justify-items: start; }
.rv.more b { font: 400 22px/1.15 var(--f-display); }
.rv.more p { font-size: 14px; color: var(--ink-2); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--ink-2); text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.link:hover { color: var(--ink); }
.rv-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.rv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: width .25s var(--ease), background-color .2s; }
.rv-dots i.on { width: 18px; border-radius: 3px; background: var(--noir); }
@media (prefers-reduced-motion: reduce) { .rv-track { scroll-behavior: auto; } }

.rv-score { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.rv-score b { font: 400 30px/1 var(--f-display); color: var(--ink); }
.stars .off { color: var(--line); }

/* ── gift voucher: picture | words, occasions as quiet pills ──────────────────────────── */
.gift { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.gift-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.gift-pic { margin: 0; aspect-ratio: 1; border-radius: var(--r-lg); overflow: clip; background: var(--card); box-shadow: var(--shadow); }
.gift-pic img { width: 100%; height: 100%; object-fit: cover; }
.gift-copy h2 { margin-bottom: 14px; }
.occ { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.occ li { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; color: var(--ink-2); }
.gift .ctas { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .gift-in { grid-template-columns: 1fr; } .gift-pic { aspect-ratio: 16 / 11; } }

/* ── find us ────────────────────────────────────────────────────────────────────────── */
.where .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: stretch; }
#map { border-radius: var(--r-lg); overflow: hidden; min-height: 440px; background: #E7EFEC; border: 1px solid var(--line); position: relative; }
#map .fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--mute); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-popup-content { font: 400 14px/1.5 var(--f); padding: 12px 14px; color: var(--ink); border-radius: 10px; }
.pin { width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--noir); border: 2px solid var(--gold); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(40, 26, 18, .35); }
.pin span { transform: rotate(45deg); font: 400 22px/1 var(--f-script); color: var(--gold); }
.where .info { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow-s); }
.where .info h3 { font: 400 22px/1.2 var(--f-display); }
.where .info h3 span { font: 600 16px/1 var(--f-zh-serif); color: var(--seal); margin-left: 6px; }
.row { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14.5px; }
.row > svg { width: 18px; height: 18px; color: var(--gold-ink); margin-top: 2px; }
.row b { display: block; font: 500 11px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.row a { text-decoration: none; color: var(--ink); font-weight: 500; display: inline-block; padding: 3px 0; }
.row a:hover { text-decoration: underline; }
.hours { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 12px; }
.today-line { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: var(--mute); }
.today-line.is-open { color: #1E7A46; }
.facade { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-2); }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.where .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 900px) { .where .grid { grid-template-columns: 1fr; } #map { min-height: 320px; } }
@media (max-width: 350px) { .where .ctas { grid-template-columns: 1fr; } }

/* ── faq ────────────────────────────────────────────────────────────────────────────── */
#faq { background: var(--card); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq h2 { margin: 14px 0 clamp(20px, 3vw, 32px); }
.faq-side { position: sticky; top: calc(var(--tb) + var(--hd) + 24px); }
.ask { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 12px; }
.ask h3 { font: 400 22px/1.2 var(--f-display); }
.ask p { font-size: 14.5px; color: var(--ink-2); }
.ask .ctas { display: grid; gap: 8px; margin-top: 4px; }
.ask small { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); }
.ask small svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } .faq-side { position: static; } }
@media (max-width: 760px) { .faq-side { display: none; } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 500 clamp(16.5px, 1.5vw, 19px)/1.4 var(--f); margin: 0; }
.faq summary i { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; transition: background-color .25s, border-color .25s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); border-radius: 1px; transform: translate(-50%, -50%); transition: transform .3s var(--ease), background-color .25s; }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq summary:hover i { border-color: var(--ink); }
.faq details.is-open summary i { background: var(--noir); border-color: var(--noir); }
.faq details.is-open summary i::before, .faq details.is-open summary i::after { background: var(--gold); }
.faq details.is-open summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .a { overflow: hidden; }
.faq .a-in { padding: 0 0 20px; color: var(--ink-2); max-width: 66ch; font-size: 15.5px; }

/* ── contact: booking panel | WeChat card + direct lines, both columns end together ──── */
.contact { background: var(--paper-2); border-top: 1px solid var(--line); }
.contact .grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 16px; align-items: stretch; }
.panel { position: relative; z-index: 2; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-s); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); padding: 4px; gap: 4px; margin: 12px 12px 0; border-radius: 10px; }
.tab { border: 0; background: transparent; font: 500 14.5px/1 var(--f); min-height: 42px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--mute); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .2s, color .2s, box-shadow .2s; }
.tab svg { width: 17px; height: 17px; }
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(40, 26, 18, .1); }
.tab[aria-selected="true"] svg { color: var(--gold-ink); }
.tabpanel { padding: 20px 22px 22px; }
.tabpanel[hidden] { display: none; }
.f { display: grid; gap: 16px; }
.f .two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field .lab { font-size: 13px; font-weight: 600; color: var(--ink); }
.field label small { font-weight: 400; color: var(--mute); font-size: 12px; }
.input, .textarea { width: 100%; font: 400 15px/1.4 var(--f); color: var(--ink); background: #FCFDFD; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; height: 44px; outline: none; transition: border-color .15s, background-color .15s; -webkit-appearance: none; appearance: none; }
.textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.input:hover, .textarea:hover { border-color: #C3D0CC; }
.input:focus, .textarea:focus { border-color: var(--gold-soft); background: #fff; outline: none; }
.input:focus-visible, .textarea:focus-visible { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(216, 188, 140, .3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 15px; font: 500 13.5px/1 var(--f); cursor: pointer; color: var(--ink-2); transition: background-color .15s, color .15s, border-color .15s; }
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.chip svg { width: 15px; height: 15px; }
/* day rail: one compact row of days to swipe (half a year), the month view behind the calendar button at its end */
.days-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.days { position: relative; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 1px; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.days::-webkit-scrollbar { display: none; }
.days .mon { flex: none; align-self: center; padding: 0 2px 0 4px; font: 600 10.5px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); writing-mode: vertical-rl; transform: rotate(180deg); }
.days .mon:first-child { padding-left: 0; }
.day { flex: 0 0 54px; height: 54px; scroll-snap-align: start; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 0 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; color: var(--ink); transition: background-color .15s, color .15s, border-color .15s; }
.day small { font: 500 10px/1.1 var(--f); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.day b { font: 400 18px/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
.day b i { font: 500 9.5px/1 var(--f); font-style: normal; color: var(--mute); margin-left: 1px; }
.day:hover { border-color: var(--ink-2); }
.day[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: #fff; }
.day[aria-pressed="true"] small, .day[aria-pressed="true"] b i { color: var(--gold); }
.day:disabled { opacity: .4; cursor: not-allowed; }
.day:disabled:hover { border-color: var(--line); }
.cal-btn { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--gold-ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.cal-btn svg { width: 19px; height: 19px; }
.cal-btn:hover, .cal-btn[aria-expanded="true"] { border-color: var(--ink-2); background: #fff; }
/* time menu: a button that opens a small list drawn like the calendar */
.pick { position: relative; }
.pick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.pick-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn svg { flex: none; width: 16px; height: 16px; color: var(--mute); transition: rotate .2s var(--ease); }
.pick-btn[aria-expanded="true"] { border-color: var(--gold-soft); background: #fff; }
.pick-btn[aria-expanded="true"] svg { rotate: 180deg; }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(40, 26, 18, .16); animation: pop .16s var(--ease); min-width: 200px; }
.pick-list[hidden] { display: none; }
.pick-list li { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.pick-list li:hover, .pick-list li:focus { background: var(--paper-2); color: var(--ink); outline: none; }
.pick-list li[aria-selected="true"] { background: var(--noir); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pick-list { animation: none; } }
.f .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rv-nav button, .rail-nav button, .rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .15s, border-color .15s, opacity .2s; }
.rv-nav button:hover, .rail-nav button:hover, .rail-btn:hover { border-color: var(--ink); }
.rv-nav button:disabled, .rail-nav button:disabled, .rail-btn:disabled { opacity: .3; cursor: default; border-color: var(--line); }
.rv-nav svg, .rail-nav svg, .rail-btn svg { width: 18px; height: 18px; }
.rail-btn { width: 36px; height: 36px; }
.cal-wrap { position: relative; }
.cal-wrap .cal { left: auto; right: 0; }
.cal { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(40, 26, 18, .16); padding: 14px; animation: pop .16s var(--ease); }
.cal[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font: 400 19px/1 var(--f-display); text-transform: capitalize; }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.cal-nav:hover { border-color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font: 500 11px/1 var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); text-align: center; padding: 6px 0 8px; }
.cal-day { position: relative; height: 38px; border: 0; border-radius: 50%; background: transparent; font: 400 14px/1 var(--f); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.cal-day:hover { background: var(--paper-2); }
.cal-day.is-today { font-weight: 600; }
.cal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold-2); }
.cal-day[aria-pressed="true"] { background: var(--noir); color: #fff; }
.cal-day:disabled { color: #BCC6C3; cursor: default; background: transparent; }
@media (prefers-reduced-motion: reduce) { .cal { animation: none; } }
.wa-preview { background: var(--paper); border-radius: 10px; padding: 13px 15px; font-size: 14px; white-space: pre-wrap; color: var(--ink-2); border: 1px dashed var(--line); min-height: 50px; }
.f .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.hint { font-size: 12.5px; color: var(--mute); }
/* right column: one card — the WeChat code beside a title and two buttons, then the direct lines as hairline rows */
.side { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-s); overflow: clip; }
.wechat-card { flex: 1; padding: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; border-bottom: 1px solid var(--line-2); }
.wechat-card .qr { display: grid; gap: 6px; justify-items: center; }
.wechat-card .qr span { font: 600 10.5px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: #0A7A3D; }
.wechat-card img { width: clamp(168px, 15vw, 196px); height: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); padding: 7px; background: #fff; }
.wechat-card h3 { font: 400 21px/1.2 var(--f-display); }
.wechat-card p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.wechat-card .ctas { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
/* direct lines: whole row is the link (Giglio); channels still missing are dashed «to be linked» */
.direct { display: grid; }
.direct .line:first-child { border-top: 0; }
.line { grid-column: 1 / -1; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 9px 20px 9px 16px; background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .25s; }
.line:hover { background: var(--paper); }
.line::after { content: ""; width: 7px; height: 7px; border: solid var(--mute); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.line > svg, .line .xhs { width: 40px; height: 40px; padding: 10px; border-radius: 9px; background: var(--gold-tint); color: var(--gold-ink); }
.line .xhs { display: grid; place-items: center; padding: 0; background: #FF2442; color: #fff; font: 600 15px/1 var(--f-zh-serif); }
.line span { min-width: 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.line span b { display: block; font: 500 11px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 3px; }
.line.todo { grid-column: auto; background: transparent; border-style: dashed; border-color: #C3D0CC; color: var(--mute); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; min-height: 0; padding: 8px 4px; }
.line.todo::after { display: none; }
.line.todo > svg, .line.todo .xhs { width: 28px; height: 28px; padding: 6px; border-radius: 7px; }
.line.todo > svg { background: var(--paper); color: var(--mute); }
.line.todo .xhs { background: #F1C7CB; }
.line.todo span { font-size: 11px; font-weight: 400; font-style: italic; line-height: 1.25; }
.line.todo .xhs { padding: 0; font-size: 13px; }
.line.todo span b { font-style: normal; color: var(--ink-2); font-size: 9.5px; letter-spacing: .08em; margin-bottom: 1px; }
.line.todo:hover { box-shadow: none; border-color: var(--mute); }
@media (max-width: 900px) { .contact .grid { grid-template-columns: minmax(0, 1fr); } }  /* not 1fr: its min-content floor made both cards 2-10 px wider than 360 px phones */
@media (max-width: 600px) {
  .f .two { grid-template-columns: 1fr; }
  .f .three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .f .three > :last-child { grid-column: 1 / -1; }
  /* chips: one swipeable row instead of three wrapped rows */
  .f .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 -14px; padding: 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); }
  .f .chips::-webkit-scrollbar { display: none; }
  .f .chip { flex: none; padding: 0 13px; font-size: 13px; }
  .day { flex-basis: 50px; }
  .tabs { margin: 10px 10px 0; }
  .tab { font-size: 14px; gap: 7px; }
  .tabpanel { padding: 16px 14px 18px; }
  /* phones: one vertical card (Bessi): the code large and centred, the buttons under it, then the lines */
  .wechat-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; gap: 14px; }
  .wechat-card img { width: min(220px, 62vw); }
  .wechat-card .ctas { grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .wechat-card h3 { font-size: 20px; }
  .wechat-card p { margin: 6px auto 0; font-size: 14px; max-width: 26ch; }
  .cal { width: min(320px, calc(100vw - 2 * var(--gutter) - 34px)); }
  .f .actions .btn { flex: 1 1 100%; }
}


/* ── footer: a closing call to action, the brand, and the name set large as the last word ─ */
.foot { background: var(--noir-deep); color: var(--on-dark-2); padding: 0 0 0; overflow: clip; }
.foot-cta { position: relative; padding: clamp(48px, 7vw, 88px) 0; border-bottom: 1px solid var(--dark-line); background: radial-gradient(60% 120% at 85% 0%, rgba(184, 147, 90, .18), transparent 70%); }
.foot-cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.foot-cta .eyebrow { color: var(--gold); }
.fc-h { margin: 14px 0 12px; color: #fff; font-size: clamp(30px, 3.6vw, 48px); max-width: 18ch; }
.fc-copy p { color: var(--on-dark-2); font-size: 15px; }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 400px; }
.foot .btn-ghost { color: var(--on-dark); border-color: rgba(243, 234, 223, .3); }
.foot .btn-ghost:hover { background: rgba(243, 234, 223, .08); border-color: var(--on-dark); }
.foot .btn .wc-ic { color: var(--wechat); }
.foot > .wrap { padding-top: 48px; }
.foot .grid { display: grid; grid-template-columns: 1.3fr auto auto; gap: 36px clamp(36px, 6vw, 96px); }
.foot .grid > div:last-child { justify-self: end; }
.foot h4 { color: var(--gold); font: 500 11px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; }
.foot-brand .mark { color: #fff; }
.foot-brand .mark b { font-size: 27px; }
.foot-brand .mark small, .foot-brand .mark .amy { color: var(--gold); }
.foot-brand .mark .mark-zh { color: #fff; }
.foot-brand .mark { column-gap: 14px; }
.foot-brand .mark-icon { width: 73px; height: 46px; background: var(--gold); }
.foot-brand p { margin-top: 12px; font-size: 14px; max-width: 34ch; }
/* social profiles the owner has not given yet: dashed circles, a tap says «coming soon» */
.f-social { display: flex; gap: 8px; margin-top: 16px; }
.soc { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(243, 234, 223, .32); color: var(--on-dark-2); transition: border-color .15s, color .15s; }
.soc:hover { border-color: var(--gold); color: var(--gold); }
.soc svg { width: 18px; height: 18px; }
.soc .xhs { font: 600 14px/1 var(--f-zh-serif); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot .f-hours { font-size: 14px; color: var(--on-dark-2); margin-bottom: 8px; }
.foot .f-pages { grid-template-columns: repeat(2, auto); justify-content: start; gap: 0 22px; }
.foot ul a { display: inline-block; padding: 4px 0; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--gold); }
/* .foot a is more specific than .btn-gold: without this the footer CTA was white (and gold on hover) on gold, 1.8:1 */
.foot .btn-gold, .foot .btn-gold:hover { color: var(--noir-deep); }
.foot .row { color: #fff; align-items: center; min-height: 30px; }
.foot .row > svg { color: var(--gold); margin-top: 0; }
.foot .row a { padding: 0; }
.legal { border-top: 1px solid var(--dark-line); margin-top: 34px; padding-top: 16px; font-size: 12px; color: #A89A8D; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: center; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legal a { color: var(--on-dark-2); display: inline-block; padding: 6px 4px; min-width: 44px; text-align: center; }
.foot-word { margin: 20px 0 0; text-align: center; white-space: nowrap; font: 400 clamp(96px, 22vw, 320px)/.9 var(--f-script); color: rgba(216, 188, 140, .2); user-select: none; padding-bottom: .1em; }
@media (max-width: 820px) {
  .foot-cta .wrap { grid-template-columns: 1fr; }
  .fc-actions { min-width: 0; }
  .foot > .wrap { padding-top: 36px; }
  .foot .grid { grid-template-columns: 1fr; gap: 22px; }
  .foot-brand .mark b { font-size: 21px; }
  .foot-brand .mark { column-gap: 12px; }
  .foot-brand .mark-icon { width: 61px; height: 38px; }  /* 27 px words + 73 px icon were 400 px wide on a 390 px phone */
  .foot .f-pages { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .foot .grid > div:last-child { justify-self: start; }
  .legal { margin-top: 22px; font-size: 11.5px; gap: 2px 14px; }
  .foot-cta { padding: 40px 0 36px; }
  .fc-h { margin: 10px 0 8px; }
  .foot-word { margin: 20px 0 0; text-align: center; white-space: nowrap; font: 400 clamp(96px, 22vw, 320px)/.9 var(--f-script); color: rgba(216, 188, 140, .2); user-select: none; padding-bottom: .1em; }
}

/* ── side launchers (WhatsApp + WeChat) and their popovers ─────────────────────────────── */
.fabs { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wa-fab, .wc-fab { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 32px rgba(0, 0, 0, .25); transition: background-color .2s, color .2s; }
.wa-fab { background: var(--wa); color: #fff; }
.wa-fab:hover { background: var(--wa-dark); }
/* the second launcher is smaller and white; on the Chinese page the two swap roles (WeChat nearest the corner) */
.wc-fab { width: 48px; height: 48px; background: #fff; color: var(--wechat-dark); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.wc-fab:hover { background: #F2FBF5; }
:lang(zh) .wc-fab { order: 2; width: 56px; height: 56px; background: var(--wechat); color: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, .25); }
:lang(zh) .wc-fab:hover { background: var(--wechat-dark); }
:lang(zh) .wa-fab { order: 1; width: 48px; height: 48px; background: #fff; color: var(--wa-dark); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
:lang(zh) .wa-fab:hover { background: #F2FBF5; }
.wa-fab svg, .wc-fab svg { width: 26px; height: 26px; }
.wa-fab .i-x, .wc-fab .i-x { display: none; width: 20px; height: 20px; }
.wa-fab[aria-expanded="true"], .wc-fab[aria-expanded="true"] { background: var(--ink); color: #fff; }
.wa-fab[aria-expanded="true"] .i-wa, .wc-fab[aria-expanded="true"] .i-wc { display: none; }
.wa-fab[aria-expanded="true"] .i-x, .wc-fab[aria-expanded="true"] .i-x { display: block; }
/* a slow ring on the main launcher only */
.wa-fab::before, .wa-fab::after, :lang(zh) .wc-fab::before, :lang(zh) .wc-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: wapulse 2.6s ease-out infinite; }
.wa-fab::before, .wa-fab::after { border-color: var(--wa); }
:lang(zh) .wc-fab::before, :lang(zh) .wc-fab::after { border-color: var(--wechat); }
:lang(zh) .wa-fab::before, :lang(zh) .wa-fab::after { display: none; }
.wa-fab::after, :lang(zh) .wc-fab::after { animation-delay: 1.3s; }
.wa-fab[aria-expanded="true"]::before, .wa-fab[aria-expanded="true"]::after, .wc-fab[aria-expanded="true"]::before, .wc-fab[aria-expanded="true"]::after { animation: none; }
@keyframes wapulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.wa-dim { position: fixed; inset: 0; background: rgba(34, 22, 16, .4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 65; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.wa-dim.show { opacity: 1; visibility: visible; }
.wa-panel, .wc-pop { position: fixed; z-index: 70; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
/* visibility flips at once on open (so app.js can focus inside in the same task), and only after the fade on close */
.wa-panel.show, .wc-pop.show { transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.wa-panel { right: 90px; bottom: 18px; width: min(350px, calc(100vw - 108px)); transform: translateX(10px) scale(.98); }
.wc-pop { left: 50%; top: 50%; width: min(340px, calc(100vw - 36px)); transform: translate(-50%, -48%) scale(.98); }
.wa-panel.show { opacity: 1; visibility: visible; transform: none; }
.wc-pop.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.wa-panel .head, .wc-pop .head { background: var(--wa-dark); color: #fff; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.wc-pop .head { background: var(--wechat-dark); }
.wa-panel .head svg, .wc-pop .head > svg { width: 24px; height: 24px; }
.wa-panel .head b, .wc-pop .head b { display: block; font-size: 14.5px; font-weight: 600; }
.wa-panel .head small, .wc-pop .head small { opacity: .88; font-size: 12.5px; }
.pop-x { margin-left: auto; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.pop-x:hover { background: rgba(255, 255, 255, .15); }
.pop-x svg { width: 18px; height: 18px; }
.wa-panel .list { padding: 10px; display: grid; gap: 8px; }
.wa-opt { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; min-height: 48px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 13px; font-size: 14px; line-height: 1.35; transition: background-color .15s, border-color .15s; }
.wa-opt:hover { background: #fff; border-color: var(--wa); }
.wa-opt i { width: 26px; height: 26px; border-radius: 50%; background: #E6F8EC; color: #0F6B36; display: grid; place-items: center; font: 600 12px/1 var(--f); font-style: normal; }
.wa-panel .foot-note { padding: 2px 16px 10px; font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wc-body { padding: 22px; display: grid; gap: 16px; justify-items: center; }
.wc-body img { width: 220px; height: 220px; border-radius: 12px; border: 1px solid var(--line); padding: 6px; background: #fff; }
.wc-body .btn { width: 100%; }

/* back to top: a quiet round button above the launchers (desktop) or above the action bar (phones) */
.totop { position: fixed; right: 22px; bottom: 150px; z-index: 60; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 8px 22px rgba(40, 26, 18, .14); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .25s var(--ease), translate .25s var(--ease), visibility 0s .25s, background-color .15s, border-color .15s; }
.totop.show { opacity: 1; visibility: visible; translate: none; transition: opacity .25s var(--ease), translate .25s var(--ease), visibility 0s, background-color .15s, border-color .15s; }
.totop:hover { border-color: var(--ink); background: #fff; }
.totop svg { width: 20px; height: 20px; rotate: 180deg; }
@media (max-width: 760px) { .totop { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .totop, .totop.show { translate: none; } .slide { transition-duration: .01s; } }

/* phone action bar: call · the two chats · directions (replaces the side launchers) */
.mbar { display: none; }
@media (max-width: 760px) {
  .foot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .fabs { display: none; }
  /* dark like the service bar on top: the page is framed by two dark bars; a shade lighter than the footer + a hairline keeps it apart there */
  .mbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 64; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(44, 31, 24, .9); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid rgba(243, 234, 223, .14); }
  .mbar a, .mbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; border-radius: 12px; border: 1px solid rgba(243, 234, 223, .16); background: rgba(255, 255, 255, .06); color: var(--on-dark); text-decoration: none; font: 500 12px/1 var(--f); cursor: pointer; }
  .mbar svg { width: 20px; height: 20px; color: var(--gold); }
  .mbar .wa svg { color: var(--wa); }
  .mbar .wc svg { color: var(--wechat); }
  .mbar .wa { background: var(--wa); border-color: var(--wa); color: #063D1E; }
  .mbar .wa svg { color: #063D1E; }
  :lang(zh) .mbar .wa { background: rgba(255, 255, 255, .06); border-color: rgba(243, 234, 223, .16); color: var(--on-dark); }
  :lang(zh) .mbar .wa svg { color: var(--wa); }
  :lang(zh) .mbar .wc { background: var(--wechat); border-color: var(--wechat); color: #063D1E; }
  :lang(zh) .mbar .wc svg { color: #063D1E; }
  .wa-panel { right: 10px; left: 10px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateY(10px) scale(.98); }
}

/* toast + owner placeholders (?todo=1 outlines every one) */
.toast { position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 8px); z-index: 90; max-width: calc(100vw - 120px); padding: 12px 18px; border-radius: 10px; background: var(--noir); color: #fff; font-size: 14px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom)); max-width: calc(100vw - 36px); } }
html.todo [data-todo] { outline: 2px dashed #E0533D; outline-offset: 3px; position: relative; }
html.todo a[data-todo]::after { content: attr(data-todo); position: absolute; left: -2px; top: -6px; transform: translateY(-100%); padding: 3px 6px; background: #C2412F; color: #fff; font: 600 11px/1 var(--f); letter-spacing: 0; text-transform: none; white-space: nowrap; z-index: 5; }

/* ── motion ─────────────────────────────────────────────────────────────────────────── */
/* Containers that clip use overflow: clip, not hidden: «hidden» makes a scroll container, and a view() timeline
   inside one never advances (the reveal would be stuck or skipped). */
@keyframes up { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes popin { from { opacity: 0; translate: 0 30px; scale: .94; } to { opacity: 1; translate: none; scale: 1; } }
@keyframes settle { from { translate: 0 18px; scale: .97; } to { translate: none; scale: 1; } }
@keyframes wordin { from { opacity: 0; filter: blur(10px); translate: 0 .22em; } to { opacity: 1; filter: none; translate: none; } }
@keyframes rise { from { opacity: 0; translate: 0 44px; scale: .96; } to { opacity: 1; translate: none; scale: 1; } }
@keyframes slidein { from { opacity: 0; translate: 64px 0; } to { opacity: 1; translate: none; } }
@keyframes unveil { from { clip-path: inset(12% 10% 12% 10%); scale: 1.14; } to { clip-path: inset(0); scale: 1; } }
@keyframes spine { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
h2.split .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: up .8s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .22s; }
  /* the picture on show zooms out slowly (never starts invisible: it is the LCP image) */
  .slide.is-on img { animation: kenburns 9s cubic-bezier(.2, .6, .3, 1) both; }
  .tl-pic.is-on img { animation: kenburns 9s cubic-bezier(.2, .6, .3, 1) both; }
  .tl-panel.is-on > * { animation: up .7s var(--ease) both; }
  .tl-panel.is-on > :nth-child(2) { animation-delay: .08s; }
  .tl-panel.is-on > :nth-child(3) { animation-delay: .14s; }
  .tl-panel.is-on > :nth-child(4) { animation-delay: .2s; }
  .facts { animation: fadein 1s ease .5s both; }
  .tr-panel:not([hidden]) .tr-pic img { animation: settle .9s var(--ease) both; }
}
/* scroll-driven reveals: headings sharpen word by word, cards and blocks rise, photos open, the story spine draws,
   gallery pictures slide in as the rail is swiped. Reduced motion keeps a plain fade. No view timelines → all shown. */
@supports (animation-timeline: view()) {
  h2.split { view-timeline: --h block; }
  h2.split .w { animation: wordin linear both; animation-timeline: --h; animation-range: cover calc(2% + var(--i, 0) * 1.6%) cover calc(20% + var(--i, 0) * 1.6%); }
  .tr-list li, .gift-pic, .gift-copy, .step, .line, .where .info, .panel, .wechat-card, .ask, .faq details, .fc-copy, .fc-actions, .gal-track, .rv-track { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .steps .step:nth-child(even), .gift-copy { animation-range: entry 8% entry 83%; }
  .g figure { animation: slidein linear both; animation-timeline: view(inline); animation-range: entry 0% entry 80%; }
  @media (prefers-reduced-motion: reduce) {
    h2.split .w, .tr-list li, .gift-pic, .gift-copy, .step, .line, .where .info, .panel, .wechat-card, .ask, .faq details, .fc-copy, .fc-actions, .gal-track, .rv-track, .g figure { animation-name: fadein; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .wa-panel, .wc-pop, .wa-dim, .mnav, .toast { transition-property: opacity, background-color, color, border-color, visibility; }
  .wa-fab::before, .wa-fab::after, .wc-fab::before, .wc-fab::after { animation: none !important; }
}

/* Lenis (assets/vendor, MIT): only runs with motion allowed; while it runs it owns smooth scrolling */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── touch + CJK floor ──────────────────────────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 760px) {
  .btn-sm, .chip, .tab, .input { min-height: 44px; }
  .input { height: 44px; }
  .cal-nav, .cal-day { height: 44px; }
  .cal-nav { width: 44px; }
  .row a, .foot .row a, .foot ul a, .legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  .soc { width: 44px; height: 44px; }
  .foot ul a { min-width: 44px; }
  .mark { min-height: 44px; }
  .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
}
:lang(zh) .eyebrow, :lang(zh) .brands-line span, :lang(zh) .tr-pic figcaption, :lang(zh) .svc-photo figcaption, :lang(zh) .row b, :lang(zh) .foot h4, :lang(zh) .line span b, :lang(zh) .day small, :lang(zh) .cal-dow, :lang(zh) .g figcaption small { font-size: 12px; letter-spacing: .06em; }
:lang(zh) .hero h1 { font-size: clamp(34px, 3.7vw, 52px); line-height: 1.2; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; } /* break only at the <br> / <wbr>, never inside 珠宝; display headings carry no punctuation */
:lang(zh) h2 { line-height: 1.2; letter-spacing: .02em; }
:lang(zh) .legal { font-size: 12px; }
:lang(zh) .tr-tab { font-size: 15px; }
:lang(zh) .tr-list h3, :lang(zh) .brands-line b { letter-spacing: .02em; }

/* legal pages */
.legal-page { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 96px); }
.legal-doc { max-width: 760px; }
.legal-doc h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 12px 0 10px; }
.legal-doc h2 { font-size: 22px; margin: 30px 0 8px; }
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: 15.5px; }
.legal-doc ul { padding-left: 20px; display: grid; gap: 8px; }
.legal-doc a { color: var(--gold-ink); }
.hdr-back { margin-left: auto; }
.legal-date { margin-bottom: 8px; font-size: 14px; color: var(--mute); }
.foot-slim { padding: 22px 0; }
.foot-slim .legal { margin-top: 0; padding-top: 0; border-top: 0; }
.nf-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* desktop: standalone contact links ≥ 24px tall (WCAG 2.5.8); touch sizes are set above */
@media (pointer: fine) and (min-width: 761px) { .foot .row a, .lang-list a { min-height: 28px; display: inline-flex; align-items: center; } }
.foot-slim > .wrap { padding-top: 0; }
@media (max-width: 420px) { .tab svg { display: none; } .tab { font-size: 14px; padding: 0 8px; } }