/* tokens.css */
/*
 * Amuse Website V2 - Typography V2 / Design Tokens
 * Source of truth: Claude Design "Typography V2" (2026-10-24), tokens.json in the Design System.
 *
 * - English headings: Cormorant Garamond. English text, nav, buttons, price, labels, footer: Inter.
 * - Chinese: the device's own Chinese sans-serif (PingFang SC on Apple, the system CJK sans on Android,
 *   Microsoft YaHei on Windows). No Chinese italics. No Songti substitutes.
 * - Sizes follow the viewport piecewise-linearly between 320 / 390 / 768 / 1024 / 1440 px (calc(vw + px)),
 *   so the same token serves phone, tablet and desktop. Chinese pages (html[lang|="zh"]) override
 *   size, line-height and tracking where the spec differs.
 * - Minimum text size is 12px. Body copy is left-aligned. Text gold is #80613B (--tg); champagne
 *   (#C8A45D) is decoration and dark grounds only.
 *
 * CHINESE WEB FONT: none (owner decision 2026-10-27). The HarmonyOS Sans SC files (~16 MB) may not be
 * subset under their licence, so Chinese pages use system fonts instead of downloading them.
 */
/* Inter and Cormorant Garamond are served from this site (2026-10-28), not from Google Fonts: the same
 * variable woff2 files Google serves (latin and latin-ext only), SIL Open Font License, see assets/v2/fonts/OFL-*.txt. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/v2/fonts/cormorant-garamond-italic-latin-ext.06bc9a8c.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/v2/fonts/cormorant-garamond-italic-latin.e6d6d1d7.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:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/v2/fonts/cormorant-garamond-latin-ext.9dc38267.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/v2/fonts/cormorant-garamond-latin.5d618c46.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/v2/fonts/inter-latin-ext.a28eb6d3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/v2/fonts/inter-latin.c9407645.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}

:root{--ff-display:'Cormorant Garamond','HarmonyOS Sans SC','Songti SC','SimSun',Georgia,serif;--ff-body:'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',Arial,sans-serif;--tg:#80613B;--lh-hero:1.1;--ls-hero:-0.03em;--fw-hero:400;--lh-h1:1.04;--ls-h1:-0.06em;--fw-h1:500;--lh-land:1.04;--ls-land:-0.06em;--fw-land:500;--lh-h2:1.1;--ls-h2:-0.045em;--fw-h2:500;--lh-h3:1.15;--ls-h3:-0.025em;--fw-h3:500;--lh-card:1.2;--ls-card:-0.015em;--fw-card:500;--lh-service:1.15;--ls-service:-0.02em;--fw-service:500;--lh-faq:1.3;--ls-faq:-0.01em;--fw-faq:500;--lh-stat:1;--ls-stat:-0.03em;--fw-stat:500;--lh-num:1;--ls-num:0;--fw-num:500;--lh-lead:1.7;--ls-lead:0;--fw-lead:400;--lh-body:1.65;--ls-body:0;--fw-body:400;--lh-small:1.6;--ls-small:0;--lh-caption:1.5;--ls-caption:0;--lh-eyebrow:1.4;--ls-eyebrow:0.12em;--fw-eyebrow:500;--lh-label:1.4;--ls-label:0.12em;--fw-label:600;--lh-navd:1.25;--ls-navd:0.1em;--fw-navd:500;--lh-navm:1.2;--ls-navm:-0.01em;--fw-navm:500;--lh-lang:1.2;--ls-lang:0.06em;--lh-btn:1.25;--ls-btn:0;--fw-btn:600;--lh-ctam:1.25;--ls-ctam:0.08em;--fw-ctam:600;--lh-link:1.5;--ls-link:0;--fw-link:500;--lh-price:1.4;--ls-price:0;--fw-price:500;--lh-pricemeta:1.5;--ls-pricemeta:0;--lh-tab:1.3;--ls-tab:0;--fw-tab:500;--lh-fth:1.2;--ls-fth:-0.01em;--fw-fth:500;--lh-ftl:1.6;--ls-ftl:0;--lh-ftc:1.7;--lh-ftcopy:1.6;}
:root{--fs-hero:36px;--fs-h1:38px;--fs-land:36px;--fs-h2:30px;--fs-h3:24px;--fs-card:22px;--fs-service:23px;--fs-faq:18px;--fs-stat:40px;--fs-num:20px;--fs-lead:16px;--fs-body:15px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:18px;--fs-navd:16px;--fs-navm:30px;--fs-lang:14px;--fs-btn:16px;--fs-ctam:16px;--fs-link:15px;--fs-price:17px;--fs-pricemeta:14px;--fs-tab:14px;--fs-fth:22px;--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:30px;--fs-h1:36px;--fs-land:34px;--fs-h2:28px;--fs-h3:21px;--fs-card:19px;--fs-service:20px;--fs-faq:16px;--fs-num:18px;--fs-label:17px;--fs-navm:26px;--fs-fth:20px;}
@media (min-width:320px) and (max-width:389.98px){:root{--fs-hero:calc(5.7143vw + 17.7143px);--fs-h1:calc(8.5714vw + 10.5714px);--fs-land:calc(8.5714vw + 8.5714px);--fs-h2:calc(5.7143vw + 11.7143px);--fs-h3:calc(4.2857vw + 10.2857px);--fs-card:calc(2.8571vw + 12.8571px);--fs-service:calc(2.8571vw + 13.8571px);--fs-faq:calc(1.4286vw + 13.4286px);--fs-stat:calc(5.7143vw + 21.7143px);--fs-num:20px;--fs-lead:16px;--fs-body:15px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:calc(2.8571vw + 8.8571px);--fs-navd:16px;--fs-navm:calc(2.8571vw + 20.8571px);--fs-lang:14px;--fs-btn:16px;--fs-ctam:16px;--fs-link:15px;--fs-price:17px;--fs-pricemeta:14px;--fs-tab:14px;--fs-fth:22px;--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:calc(5.7143vw + 11.7143px);--fs-h1:calc(5.7143vw + 17.7143px);--fs-land:calc(5.7143vw + 15.7143px);--fs-h2:calc(5.7143vw + 9.7143px);--fs-h3:calc(4.2857vw + 7.2857px);--fs-card:calc(2.8571vw + 9.8571px);--fs-service:calc(2.8571vw + 10.8571px);--fs-faq:calc(1.4286vw + 11.4286px);--fs-num:18px;--fs-label:calc(2.8571vw + 7.8571px);--fs-navm:calc(2.8571vw + 16.8571px);--fs-fth:20px;}}
@media (min-width:390px) and (max-width:767.98px){:root{--fs-hero:calc(1.0582vw + 35.873px);--fs-h1:calc(1.5873vw + 37.8095px);--fs-land:calc(1.5873vw + 35.8095px);--fs-h2:calc(1.0582vw + 29.873px);--fs-h3:calc(0.7937vw + 23.9048px);--fs-card:calc(0.5291vw + 21.9365px);--fs-service:calc(0.2646vw + 23.9683px);--fs-faq:calc(0.2646vw + 17.9683px);--fs-stat:calc(2.1164vw + 35.746px);--fs-num:20px;--fs-lead:16px;--fs-body:calc(0.2646vw + 13.9683px);--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:calc(0.5291vw + 17.9365px);--fs-navd:16px;--fs-navm:32px;--fs-lang:14px;--fs-btn:16px;--fs-ctam:16px;--fs-link:15px;--fs-price:calc(0.2646vw + 15.9683px);--fs-pricemeta:14px;--fs-tab:14px;--fs-fth:calc(0.5291vw + 19.9365px);--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:calc(1.0582vw + 29.873px);--fs-h1:calc(1.5873vw + 33.8095px);--fs-land:calc(1.5873vw + 31.8095px);--fs-h2:calc(0.7937vw + 28.9048px);--fs-h3:calc(0.5291vw + 21.9365px);--fs-card:calc(0.5291vw + 18.9365px);--fs-service:calc(0.2646vw + 20.9683px);--fs-faq:calc(0.2646vw + 15.9683px);--fs-num:18px;--fs-label:calc(0.5291vw + 16.9365px);--fs-navm:28px;--fs-fth:calc(0.5291vw + 17.9365px);}}
@media (min-width:768px) and (max-width:1023.98px){:root{--fs-hero:calc(1.5625vw + 32px);--fs-h1:calc(3.9062vw + 20px);--fs-land:calc(3.125vw + 24px);--fs-h2:calc(1.5625vw + 26px);--fs-h3:calc(0.7812vw + 24px);--fs-card:calc(0.7812vw + 20px);--fs-service:calc(0.7812vw + 20px);--fs-faq:calc(0.3906vw + 17px);--fs-stat:calc(3.125vw + 28px);--fs-num:20px;--fs-lead:calc(0.3906vw + 13px);--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:calc(1.5625vw + 10px);--fs-navd:16px;--fs-navm:32px;--fs-lang:14px;--fs-btn:calc(-0.3906vw + 19px);--fs-ctam:16px;--fs-link:15px;--fs-price:18px;--fs-pricemeta:14px;--fs-tab:calc(0.3906vw + 11px);--fs-fth:24px;--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:calc(1.5625vw + 26px);--fs-h1:calc(3.125vw + 22px);--fs-land:calc(2.3438vw + 26px);--fs-h2:calc(1.5625vw + 23px);--fs-h3:calc(0.7812vw + 20px);--fs-card:calc(0.3906vw + 20px);--fs-service:calc(0.7812vw + 17px);--fs-faq:calc(0.3906vw + 15px);--fs-num:18px;--fs-label:calc(1.1719vw + 12px);--fs-navm:28px;--fs-fth:22px;}}
@media (min-width:1024px) and (max-width:1439.98px){:root{--fs-hero:calc(4.5673vw + 1.2308px);--fs-h1:calc(8.6538vw - 28.6154px);--fs-land:calc(8.1731vw - 27.6923px);--fs-h2:calc(4.3269vw - 2.3077px);--fs-h3:calc(0.9615vw + 22.1538px);--fs-card:calc(0.4808vw + 23.0769px);--fs-service:calc(0.4808vw + 23.0769px);--fs-faq:calc(0.2404vw + 18.5385px);--fs-stat:calc(0.9615vw + 50.1538px);--fs-num:20px;--fs-lead:calc(0.2404vw + 14.5385px);--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:calc(0.4808vw + 21.0769px);--fs-navd:16px;--fs-navm:32px;--fs-lang:14px;--fs-btn:15px;--fs-ctam:16px;--fs-link:15px;--fs-price:18px;--fs-pricemeta:14px;--fs-tab:15px;--fs-fth:24px;--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:calc(2.8846vw + 12.4615px);--fs-h1:calc(5.7692vw - 5.0769px);--fs-land:calc(5.2885vw - 4.1538px);--fs-h2:calc(1.2019vw + 26.6923px);--fs-h3:calc(0.4808vw + 23.0769px);--fs-card:calc(0.4808vw + 19.0769px);--fs-service:calc(0.4808vw + 20.0769px);--fs-faq:calc(0.2404vw + 16.5385px);--fs-num:18px;--fs-label:calc(0.4808vw + 19.0769px);--fs-navm:28px;--fs-fth:22px;}}
@media (min-width:1440px){:root{--fs-hero:67px;--fs-h1:96px;--fs-land:90px;--fs-h2:60px;--fs-h3:36px;--fs-card:30px;--fs-service:30px;--fs-faq:22px;--fs-stat:64px;--fs-num:20px;--fs-lead:18px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:12px;--fs-label:28px;--fs-navd:16px;--fs-navm:32px;--fs-lang:14px;--fs-btn:15px;--fs-ctam:16px;--fs-link:15px;--fs-price:18px;--fs-pricemeta:14px;--fs-tab:15px;--fs-fth:24px;--fs-ftl:16px;--fs-ftc:15px;--fs-ftcopy:13px;}html[lang|="zh"]{--fs-hero:54px;--fs-h1:78px;--fs-land:72px;--fs-h2:44px;--fs-h3:30px;--fs-card:26px;--fs-service:27px;--fs-faq:20px;--fs-num:18px;--fs-label:26px;--fs-navm:28px;--fs-fth:22px;}}
html[lang|="zh"]{--ff-display:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Source Han Sans SC','Microsoft YaHei','Inter',Arial,sans-serif;--ff-body:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Source Han Sans SC','Microsoft YaHei','Inter',Arial,sans-serif;--lh-hero:1.2;--ls-hero:0.02em;--fw-hero:500;--lh-h1:1.15;--ls-h1:0.01em;--lh-land:1.15;--ls-land:0.01em;--lh-h2:1.2;--ls-h2:0;--lh-h3:1.3;--ls-h3:0;--lh-card:1.35;--ls-card:0;--lh-service:1.3;--ls-service:0;--lh-faq:1.45;--ls-faq:0;--ls-stat:0;--lh-lead:1.85;--lh-body:1.8;--lh-small:1.75;--lh-caption:1.6;--lh-eyebrow:1.5;--ls-eyebrow:0.06em;--lh-label:1.5;--ls-label:0.03em;--lh-navd:1.3;--ls-navd:0.06em;--lh-navm:1.25;--ls-navm:0;--ls-lang:0.04em;--lh-btn:1.3;--ls-btn:0.02em;--lh-ctam:1.3;--ls-ctam:0.04em;--lh-link:1.6;--lh-price:1.5;--lh-pricemeta:1.65;--lh-tab:1.4;--lh-fth:1.3;--ls-fth:0;--lh-ftl:1.7;--lh-ftc:1.75;--lh-ftcopy:1.7;}

/* ---------------------------------------------------------------------------------------------
 * Colour tokens - Design System tokens.json (Typography V2 release, 2026-10-24).
 * Three golds, deliberately separate (owner decision 2026-10-24):
 *   --tg             #80613B  Text Gold: the only gold for text on light grounds (Typography block above)
 *   --v2-logo-gold   #82633D  Logo Gold: the colour of the confirmed vector logo (amuse-logo.svg)
 *   --v2-champagne   #C8A45D  Accent Gold: decoration, rules, the booking button fill, text on dark only
 * --------------------------------------------------------------------------------------------- */
:root{
  --v2-ivory:#FAF8F5;--v2-ink:#1A1A1A;--v2-warm:#F3F1ED;--v2-warm-sand:#E8E0D5;--v2-white:#FFFFFF;
  --v2-champagne:#C8A45D;--v2-champagne-bright:#D9BA78;--v2-bronze-soft:#927B50;
  --v2-logo-gold:#82633D;
  --v2-text-secondary:#555555;--v2-divider:#DFDCD5;--v2-control-border:#8F887E;
  --v2-cocoa:#5A4D42;--v2-dark-media:#242321;--v2-footer-rule:#7D6E61;--v2-footer-control:#B0A699;
  --v2-on-dark-muted:#D8D0C4;--v2-on-dark-subtle:#B9B0A4;--v2-dark-rule:#3A3835;--v2-dark-border:#6B655E;
  --v2-photo-placeholder:#E4DBCB;
}

/* ---------------------------------------------------------------------------------------------
 * Layout tokens - taken from the responsive-fixed canvas (the approved layout baseline).
 * Canvas: .wrap max-width 1360px, side padding clamp(24px,5vw,80px), 22px at <=620px;
 * header 72px (desktop) / 70px (<=620px); header inner row max 1440px.
 * 1360px is the confirmed main-content maximum (owner decision 2026-10-24; the old 1200px is not used).
 * It applies to content containers only: hero and full-bleed media follow the canvas per section and
 * are not capped by a token (wide 1600 / 1920px layouts are kept).
 * Custom properties cannot be used inside @media; breakpoints are documented in
 * docs/website-v2/p1-foundation.md and repeated as literals in base.css.
 * --------------------------------------------------------------------------------------------- */
:root{
  --v2-wrap-max:1360px;--v2-nav-max:1440px;
  --v2-edge:clamp(24px,5vw,80px);
  --v2-header-h:72px;
  --v2-btn-h:48px;--v2-hero-btn-h:56px;--v2-touch:44px;
  --v2-radius-pill:36px;
  --v2-s4:4px;--v2-s8:8px;--v2-s12:12px;--v2-s16:16px;--v2-s18:18px;--v2-s24:24px;--v2-s32:32px;
  --v2-s44:44px;--v2-s48:48px;--v2-s64:64px;--v2-s80:80px;--v2-s96:96px;--v2-s112:112px;--v2-s128:128px;
}
@media (max-width:620px){:root{--v2-edge:22px;--v2-header-h:70px}}

/* base.css */
/*
 * Amuse Website V2 - base styles (P1 foundation).
 * Requires tokens.css. Not linked from any existing page yet: pages adopt it in P2+.
 * Everything here comes from the approved, responsive-fixed canvas or the Design System;
 * no new visual design. Class names are prefixed v2- / t- so they cannot collide with styles.css.
 *
 * Breakpoints used by the canvas (literals, custom properties cannot be used in @media):
 *   >=1440 type plateau | 1024-1439 type ramp | <=1023 mobile navigation (measured: desktop nav fits
 *   at 1024, see docs) | 980 / 900 / 820 / 760 section-level grid steps (component CSS, P2+) |
 *   <=620 mobile layout (22px edge, 70px header) | <=480 / <=400 button padding | 390 / 320 type nodes
 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Keep content clear of the notch in landscape on viewport-fit=cover pages (0 elsewhere). */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* On phones the root (canvas) colour is the footer's cocoa, so the area iOS Safari shows below the end of
 * the page, behind its toolbar, matches the footer instead of a white block. The body stays ivory. */
@media (hover:none) and (pointer:coarse){html{background-color:var(--v2-cocoa)}body{min-height:100vh}}
body{margin:0;background:var(--v2-ivory);color:var(--v2-ink);-webkit-font-smoothing:antialiased;
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body);
  text-align:left}
img,video,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
/* Natural wrapping: never clip text to hide a layout problem. */
h1,h2,h3,h4,p,li,dd,blockquote{overflow-wrap:break-word}
/* No global text-wrap:balance/pretty: line breaks follow the approved canvas; components opt in where the canvas does. */
/* Chinese is never set in italics (accent phrases change colour only). */
html[lang|="zh"] em,html[lang|="zh"] i,html[lang|="zh"] cite{font-style:normal}
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--tg);outline-offset:3px}

/* Layout */
.v2-wrap{width:100%;max-width:var(--v2-wrap-max);margin-inline:auto;padding-inline:var(--v2-edge)}
/* Full-bleed sections and hero media are sized per component from the canvas; no global cap. */
.v2-skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--v2-ink);color:var(--v2-ivory);border-radius:4px;text-decoration:none;
  font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small)}
.v2-skip:focus{top:12px}
.v2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography helpers: one class per V2 token (sizes, leading, tracking, weight and family per language). */
.t-hero{font-family:var(--ff-display);font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);font-weight:var(--fw-hero)}
.t-h1{font-family:var(--ff-display);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:var(--fw-h1)}
.t-land{font-family:var(--ff-display);font-size:var(--fs-land);line-height:var(--lh-land);letter-spacing:var(--ls-land);font-weight:var(--fw-land)}
.t-h2{font-family:var(--ff-display);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-h2)}
.t-h3{font-family:var(--ff-display);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-h3)}
.t-card{font-family:var(--ff-display);font-size:var(--fs-card);line-height:var(--lh-card);letter-spacing:var(--ls-card);font-weight:var(--fw-card)}
.t-service{font-family:var(--ff-display);font-size:var(--fs-service);line-height:var(--lh-service);letter-spacing:var(--ls-service);font-weight:var(--fw-service)}
.t-faq{font-family:var(--ff-display);font-size:var(--fs-faq);line-height:var(--lh-faq);letter-spacing:var(--ls-faq);font-weight:var(--fw-faq)}
.t-stat{font-family:var(--ff-display);font-size:var(--fs-stat);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-weight:var(--fw-stat)}
.t-num{font-family:var(--ff-display);font-size:var(--fs-num);line-height:var(--lh-num);letter-spacing:var(--ls-num);font-weight:var(--fw-num)}
.t-lead{font-family:var(--ff-body);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-lead)}
.t-body{font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}
.t-small{font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.t-caption{font-family:var(--ff-body);font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption)}
.t-eyebrow{font-family:var(--ff-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-eyebrow)}
.t-label{font-family:var(--ff-body);font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--fw-label)}
.t-navd{font-family:var(--ff-body);font-size:var(--fs-navd);line-height:var(--lh-navd);letter-spacing:var(--ls-navd);font-weight:var(--fw-navd)}
.t-navm{font-family:var(--ff-display);font-size:var(--fs-navm);line-height:var(--lh-navm);letter-spacing:var(--ls-navm);font-weight:var(--fw-navm)}
.t-lang{font-family:var(--ff-body);font-size:var(--fs-lang);line-height:var(--lh-lang);letter-spacing:var(--ls-lang)}
.t-btn{font-family:var(--ff-body);font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);font-weight:var(--fw-btn)}
.t-ctam{font-family:var(--ff-body);font-size:var(--fs-ctam);line-height:var(--lh-ctam);letter-spacing:var(--ls-ctam);font-weight:var(--fw-ctam)}
.t-link{font-family:var(--ff-body);font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);font-weight:var(--fw-link)}
.t-price{font-family:var(--ff-body);font-size:var(--fs-price);line-height:var(--lh-price);letter-spacing:var(--ls-price);font-weight:var(--fw-price)}
.t-pricemeta{font-family:var(--ff-body);font-size:var(--fs-pricemeta);line-height:var(--lh-pricemeta);letter-spacing:var(--ls-pricemeta)}
.t-tab{font-family:var(--ff-body);font-size:var(--fs-tab);line-height:var(--lh-tab);letter-spacing:var(--ls-tab);font-weight:var(--fw-tab)}
.t-fth{font-family:var(--ff-display);font-size:var(--fs-fth);line-height:var(--lh-fth);letter-spacing:var(--ls-fth);font-weight:var(--fw-fth)}
.t-ftl{font-family:var(--ff-body);font-size:var(--fs-ftl);line-height:var(--lh-ftl);letter-spacing:var(--ls-ftl)}
.t-ftc{font-family:var(--ff-body);font-size:var(--fs-ftc);line-height:var(--lh-ftc)}
.t-ftcopy{font-family:var(--ff-body);font-size:var(--fs-ftcopy);line-height:var(--lh-ftcopy)}
.t-accent{color:var(--tg);font-style:italic}
html[lang|="zh"] .t-accent{font-style:normal}

/* Buttons. Labels stay at the token size (15px desktop / 16px mobile) and are never shrunk to fit.
 * Short labels sit on one line; long WhatsApp labels may wrap to two centred lines on narrow
 * phones (owner decision 2026-10-24): height grows with the text, padding stays generous. */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--v2-btn-h);max-width:100%;padding:12px 28px;border-radius:var(--v2-radius-pill);
  font-family:var(--ff-body);font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);font-weight:var(--fw-btn);
  text-align:center;text-decoration:none;white-space:normal;text-wrap:balance;overflow-wrap:break-word;cursor:pointer}
.v2-btn > svg{flex:none}
.v2-btn--gold{background:var(--v2-champagne);color:var(--v2-ink);border:0}
.v2-btn--ink{background:var(--v2-ink);color:var(--v2-ivory);border:0}
.v2-btn--ghost{background:rgba(40,34,30,0.30);color:var(--v2-ivory);border:1px solid rgba(250,248,245,0.85);min-height:var(--v2-hero-btn-h)}
.v2-btn--nowrap{white-space:nowrap}
@media (max-width:480px){.v2-btn{padding-inline:18px;gap:8px}}
@media (max-width:400px){.v2-btn{padding-inline:16px}}

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

/* components.css */
/*
 * Amuse Website V2 - shared components (P2): header, desktop navigation, language switch,
 * mobile menu V2.1 and footer. Requires tokens.css + base.css. Ported from the approved,
 * responsive-fixed canvas; type sizes come only from the Typography V2 tokens.
 * Breakpoints: desktop navigation >=1024px, menu <=1023px (re-verified on these components),
 * compact header <=620px.
 */

/* ---------- Header ---------- */
.v2-hdr{position:relative;z-index:60;color:var(--v2-ink);background:var(--v2-ivory);border-bottom:1px solid var(--v2-divider);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.v2-hdr--overlay{position:absolute;inset:0 0 auto 0;background:transparent;color:var(--v2-ivory);border-bottom-color:rgba(250,248,245,0.2)}
.v2-hdr.is-open{background:var(--v2-ivory);color:var(--v2-ink);border-bottom-color:var(--v2-divider)}
/* The homepage uses viewport-fit=cover so its hero fills the whole iPhone screen; the header then
 * clears the status bar. env() is 0 on pages without viewport-fit=cover. */
.v2-hdr{padding-top:env(safe-area-inset-top,0px)}
/* iOS 26 Safari colours the status-bar strip at the top of the page from a full-width fixed element at
 * the top edge, or else from the root background (which is cocoa on touch screens so the strip below the
 * footer matches it). This invisible strip sets that colour: ivory, or the hero photo's top tone on the
 * homepage. site.js removes it once the page scrolls, when Safari shows the page itself behind the bar. */
.v2-tint{display:none}
@media (hover:none) and (pointer:coarse){
  .v2-tint{display:block;position:fixed;top:0;left:0;width:100%;height:4px;background:var(--v2-ivory);opacity:0;pointer-events:none}
  .v2-tint--hero{background:#9C8F79}
  /* Same idea at the bottom edge: while the footer is on screen, a cocoa strip makes Safari colour the
   * area behind its toolbar like the footer (otherwise it shows a white block below the page). */
  /* Opaque and taller than the top strip: it only shows while the footer (same cocoa) fills the bottom of
   * the screen, so it is never visible, and Safari did not pick up the 4px invisible version. */
  .v2-tint--foot{top:auto;bottom:0;height:12px;background:var(--v2-cocoa);opacity:1}
  .v2-tint[hidden]{display:none}
}
.v2-hdr__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 32px;
  max-width:var(--v2-nav-max);margin:0 auto;min-height:var(--v2-header-h);padding:8px var(--v2-edge) 0}
.v2-hdr__home{grid-column:2;grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;
  width:156px;height:44px;text-decoration:none}
.v2-hdr__logo{display:block;width:156px;height:40px;object-fit:contain;object-position:center;transition:opacity .22s ease}
.v2-hdr--overlay .v2-hdr__logo{position:absolute;inset:2px 0}
.v2-hdr__logo--dark{opacity:0}
.v2-hdr.is-open .v2-hdr__logo--light{opacity:0}
.v2-hdr.is-open .v2-hdr__logo--dark{opacity:1}
.v2-hdr__right{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:40px;min-width:0}

/* Desktop navigation: Inter 16px (navd token), uppercase, underline on hover and on the current section */
.v2-nav{display:flex;align-items:center;gap:clamp(18px,calc(4.809vw - 29.15px),40px)}
.v2-nav--left{grid-column:1;grid-row:1;justify-self:end;margin-right:clamp(12px,1.667vw,24px)}
.v2-nav--right{margin-left:clamp(12px,1.667vw,24px)}
.v2-nav__link{padding:12px 0;color:inherit;text-decoration:none;text-transform:uppercase;white-space:nowrap;
  font-family:var(--ff-body);font-size:var(--fs-navd);line-height:var(--lh-navd);letter-spacing:var(--ls-navd);font-weight:var(--fw-navd);
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease}
.v2-nav__link:hover,.v2-nav__link[aria-current="page"]{background-size:100% 1px}
/* Services dropdown (2026-10-27): opens on hover or keyboard focus. The padding above the panel
 * bridges the gap from the link so the pointer can move down without closing it. */
.v2-dd{position:relative}
.v2-dd__panel{position:absolute;left:-24px;top:100%;z-index:70;min-width:260px;margin:0;padding:12px 0 0;list-style:none;
  visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.v2-dd__panel::before{content:"";position:absolute;inset:12px 0 0;z-index:-1;background:rgba(250,248,245,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(26,26,26,.08)}
.v2-dd:hover .v2-dd__panel,.v2-dd:focus-within .v2-dd__panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.v2-dd__panel li:first-child{padding-top:10px}.v2-dd__panel li:last-child{padding-bottom:10px}
.v2-dd__a{display:block;padding:11px 24px;color:var(--v2-ink);text-decoration:none;white-space:nowrap;
  font-family:var(--ff-body);font-size:var(--fs-navd);line-height:1.5;letter-spacing:.02em;transition:color .15s ease}
.v2-dd__a:hover,.v2-dd__a[aria-current="page"]{color:var(--tg)}
.v2-dd__a:focus-visible{outline:2px solid var(--v2-ink);outline-offset:-2px}
/* Over a hero photo the panel is a dark, see-through glass with ivory text, like the header itself. */
.v2-hdr--overlay:not(.is-open) .v2-dd__panel::before{background:rgba(26,26,26,.28);border-color:rgba(250,248,245,.22)}
.v2-hdr--overlay:not(.is-open) .v2-dd__a{color:var(--v2-ivory)}
.v2-hdr--overlay:not(.is-open) .v2-dd__a:hover,.v2-hdr--overlay:not(.is-open) .v2-dd__a[aria-current="page"]{color:var(--v2-champagne-bright)}
.v2-hdr--overlay:not(.is-open) .v2-dd__a:focus-visible{outline-color:var(--v2-ivory)}

/* Language switch: real links to the same page in the other language (14px lang token) */
.v2-lang{display:flex;flex:none;align-items:center;gap:4px;margin-left:auto}
.v2-lang__a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--v2-touch);min-width:36px;padding:0 8px;white-space:nowrap;
  color:inherit;text-decoration:none;opacity:.6;font-weight:400;
  font-family:var(--ff-body);font-size:var(--fs-lang);line-height:var(--lh-lang);letter-spacing:var(--ls-lang)}
.v2-lang__a[aria-current]{opacity:1;font-weight:700}
.v2-lang__a:hover{opacity:1}
.v2-lang__a--off{opacity:.35;cursor:default}
.v2-lang__a--off:hover{opacity:.35}
.v2-lang__sep{color:var(--v2-champagne)}
/* Canvas: narrower language links below 1240px so the right column never squeezes them */
@media (max-width:1240px){.v2-lang__a{min-width:0;padding:0 4px}}

/* Menu toggle (shown <=1023px) */
.v2-hdr__toggle{display:none;grid-column:1;grid-row:1;justify-self:start;align-items:center;justify-content:center;
  width:var(--v2-touch);height:var(--v2-touch);margin-left:-12px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.v2-hdr__ico--close{display:none}
.v2-hdr.is-open .v2-hdr__ico--open{display:none}
.v2-hdr.is-open .v2-hdr__ico--close{display:block}

.v2-hdr a:focus-visible,.v2-hdr button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.v2-hdr--overlay:not(.is-open) a:focus-visible,.v2-hdr--overlay:not(.is-open) button:focus-visible{outline-color:var(--v2-ivory)}

/* ---------- Mobile menu V2.1 ---------- */
.v2-menu{display:none}
@media (max-width:1023.98px){
  .v2-nav{display:none}
  .v2-hdr__toggle{display:flex}
  .v2-hdr__right{justify-content:flex-end}
  .v2-menu{position:absolute;left:0;right:0;top:100%;z-index:50;display:flex;flex-direction:column;
    height:min(calc(100dvh - var(--v2-header-h) - env(safe-area-inset-top,0px) - 1px),860px);overflow-y:auto;overscroll-behavior:contain;
    padding:8px var(--v2-edge) calc(32px + env(safe-area-inset-bottom,0px));
    background:var(--v2-ivory);color:var(--v2-ink);
    visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);
    transition:clip-path .24s cubic-bezier(.2,.7,.2,1),opacity .2s ease,visibility 0s linear .24s}
  .v2-hdr.is-open .v2-menu{visibility:visible;opacity:1;clip-path:inset(0 0 0 0);transition-delay:0s}
}
.v2-menu__list,.v2-menu__foot{width:100%;max-width:720px}
.v2-menu__list{list-style:none;margin:0;padding:0}
.v2-menu__i{opacity:0;transform:translateY(6px);transition:opacity .14s ease,transform .14s ease}
.v2-hdr.is-open .v2-menu__i{opacity:1;transform:none;transition:opacity .22s ease var(--d,0ms),transform .22s ease var(--d,0ms)}
.v2-menu__a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;
  border-bottom:1px solid #E6E2DA;color:var(--v2-ink);text-decoration:none;
  font-family:var(--ff-display);font-size:var(--fs-navm);line-height:var(--lh-navm);letter-spacing:var(--ls-navm);font-weight:var(--fw-navm);
  transition:color .18s ease}
.v2-menu__lbl{display:flex;align-items:center;min-width:0;overflow-wrap:break-word}
.v2-menu__a svg{flex:none;color:var(--v2-control-border);transition:transform .2s ease,color .2s ease}
.v2-menu__a:hover,.v2-menu__a:active{color:#927339}
.v2-menu__a:hover svg,.v2-menu__a:active svg{transform:translate(2px,-2px);color:#927339}
.v2-menu__a[aria-current="page"]{color:var(--tg)}
.v2-menu__a[aria-current="page"] .v2-menu__lbl::before{content:"";flex:none;width:16px;height:1px;margin-right:12px;background:var(--v2-champagne)}
.v2-menu__a[aria-current="page"] svg{color:var(--v2-champagne)}
/* Mobile menu: the five service pages listed under Services */
.v2-menu__sub{list-style:none;margin:0;padding:6px 0 10px 16px;border-bottom:1px solid #E6E2DA}
.v2-menu__s{display:flex;align-items:center;min-height:44px;color:var(--v2-text-secondary);text-decoration:none;
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body)}
.v2-menu__s:hover,.v2-menu__s:active,.v2-menu__s[aria-current="page"]{color:var(--tg)}
.v2-menu__foot{margin-top:auto;padding-top:40px}
/* The one booking button in the menu: champagne pill, 16px (ctam token), at least 48px tall */
.v2-menu__cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 16px;
  background:var(--v2-champagne);color:var(--v2-ink);border-radius:999px;text-decoration:none;text-transform:uppercase;text-align:center;
  font-family:var(--ff-body);font-size:var(--fs-ctam);line-height:var(--lh-ctam);letter-spacing:var(--ls-ctam);font-weight:var(--fw-ctam);
  transition:background-color .2s ease}
.v2-menu__cta svg{flex:none}
.v2-menu__cta:hover,.v2-menu__cta:active{background:var(--v2-champagne-bright)}
/* Same narrow-phone tightening the canvas applies to its pill buttons (<=400px): label stays 16px */
@media (max-width:400px){.v2-menu__cta{gap:8px;letter-spacing:0.04em}}
.v2-menu__brand{margin:16px 0 0;text-align:center;text-wrap:balance;text-transform:uppercase;color:#6B6055;
  font-family:var(--ff-body);font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption)}
.v2-menu a:focus-visible{outline:2px solid var(--v2-ink);outline-offset:3px}

/* No JavaScript: the menu is shown as a plain list under the header instead of a hidden panel. */
@media (max-width:1023.98px){
  html:not(.v2-js) .v2-hdr__toggle{display:none}
  html:not(.v2-js) .v2-menu{position:static;height:auto;visibility:visible;opacity:1;clip-path:none;padding-bottom:24px}
  html:not(.v2-js) .v2-menu__i{opacity:1;transform:none}
  html:not(.v2-js) .v2-hdr--overlay{position:relative;background:var(--v2-cocoa)}
}

/* Phone header (<=620px) = the approved mobile boards: 70px bar, 22px edge, 8px column gap,
 * 120x32 logo, language links 40px wide with no gap and pulled 8px into the edge. */
@media (max-width:620px){
  .v2-hdr__bar{gap:0 8px;min-height:var(--v2-header-h);padding:0 var(--v2-edge)}
  .v2-hdr__home,.v2-hdr__logo{width:120px}
  .v2-hdr__logo{height:32px}
  .v2-hdr--overlay .v2-hdr__logo{inset:6px 0}
  .v2-lang{gap:0;margin-right:-8px}
  .v2-lang__a{min-width:40px;padding:0 4px;white-space:nowrap}
}
/* Pages with three languages (the home page has BM, 2026-10-28): on phones show only the two languages
 * you can switch to, so the switch keeps the width of the two-language one. The current language stays
 * in the accessibility tree. */
@media (max-width:620px){
  .v2-lang:has(> :nth-child(5)) > [aria-current],
  .v2-lang:has(> :nth-child(5)) > [aria-current] + .v2-lang__sep,
  .v2-lang:has(> :nth-child(5)) > .v2-lang__sep:has(+ [aria-current]:last-child){position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* Narrowest phones and zoomed-in browsers: keep at least 8px between the centred logo and the
 * language switch without moving the logo or clipping text. Targets stay 44px tall. */
@media (max-width:360px){.v2-lang__a{min-width:34px}}
/* <=300px (a 320px phone at 107%+ zoom): show only the language you can switch to; the current
 * language stays in the accessibility tree. */
@media (max-width:300px){
  .v2-lang__a[aria-current],.v2-lang__sep{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .v2-lang{margin-right:-4px}
}
@media (max-width:260px){.v2-hdr__home,.v2-hdr__logo{width:96px}.v2-hdr__logo{height:26px}.v2-hdr--overlay .v2-hdr__logo{inset:9px 0}}
@media (max-width:230px){.v2-hdr__home,.v2-hdr__logo{width:80px}.v2-hdr__logo{height:22px}.v2-hdr--overlay .v2-hdr__logo{inset:11px 0}}

/* ---------- Footer ---------- */
.v2-ft{position:relative;background:var(--v2-cocoa);color:var(--v2-ivory);padding-bottom:env(safe-area-inset-bottom,0px)}
.v2-ft a:focus-visible{outline:2px solid var(--v2-ivory);outline-offset:3px}
.v2-ft__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);gap:48px;
  padding:80px max(var(--v2-edge),calc((100% - var(--v2-wrap-max)) / 2)) 48px}
/* 4 -> 2 columns at 1100px (owner decision 2026-10-24; canvas used 980px, which crowded the hours at 990-1090px) */
@media (max-width:1100px){.v2-ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.v2-ft__contact{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.v2-ft__addr{margin:0;font-style:normal;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:pre-line;
  font-family:var(--ff-body);font-size:var(--fs-ftc);line-height:var(--lh-ftc)}
.v2-ft__note{margin:6px 0 0;color:var(--v2-on-dark-muted);font-family:var(--ff-body);font-size:var(--fs-ftcopy);line-height:var(--lh-ftcopy)}
.v2-ft__links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:16px 0 0}
.v2-ft__a{color:var(--v2-on-dark-muted);text-decoration:none;transition:color .2s ease;
  font-family:var(--ff-body);font-size:var(--fs-ftl);line-height:var(--lh-ftl);letter-spacing:var(--ls-ftl)}
.v2-ft__a:hover{color:var(--v2-champagne)}
.v2-ft__strong{color:var(--v2-ivory);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  font-size:var(--fs-ftc);line-height:var(--lh-ftc)}
.v2-ft__tel{text-transform:none}
.v2-ft__arrow{color:var(--v2-champagne)}
.v2-ft__home{display:flex;align-items:center;margin:40px 0 0}
.v2-ft__home img{width:213px;height:57px;object-fit:contain;object-position:left center}
.v2-ft__socials{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.v2-ft__soc{display:flex;align-items:center;justify-content:center;width:var(--v2-touch);height:var(--v2-touch);
  border:1px solid rgba(243,238,230,0.5);border-radius:50%;color:#F3EEE6;text-decoration:none;transition:color .18s ease}
.v2-ft__soc svg{display:block;transition:transform .18s ease}
.v2-ft__soc:hover,.v2-ft__soc:focus-visible,.v2-ft__soc:active{color:var(--b)}
.v2-ft__soc:hover svg,.v2-ft__soc:focus-visible svg,.v2-ft__soc:active svg{transform:scale(1.1)}
.v2-ft__col{min-width:0}
.v2-ft__h{margin:0 0 20px;color:var(--v2-ivory);
  font-family:var(--ff-display);font-size:var(--fs-fth);line-height:var(--lh-fth);letter-spacing:var(--ls-fth);font-weight:var(--fw-fth)}
.v2-ft__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v2-ft__hours{margin:0}
.v2-ft__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:0 0 10px;
  font-family:var(--ff-body);font-size:var(--fs-ftc);line-height:var(--lh-ftc)}
.v2-ft__row dt{color:var(--v2-on-dark-muted)}
.v2-ft__row dd{margin:0;font-weight:500;color:var(--v2-ivory)}
.v2-ft__book{margin:18px 0 0;padding-inline:23px;border:1px solid var(--v2-champagne)}
.v2-ft__book span{font-weight:700}
.v2-ft__book:hover{background:var(--v2-champagne-bright);border-color:var(--v2-champagne-bright)}
.v2-ft__bottom{padding:0 max(var(--v2-edge),calc((100% - var(--v2-wrap-max)) / 2))}
.v2-ft__bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  padding:8px 0 0;border-top:1px solid var(--v2-footer-rule);color:var(--v2-on-dark-muted);
  font-family:var(--ff-body);font-size:var(--fs-ftcopy);line-height:var(--lh-ftcopy)}
.v2-ft__copy{display:flex;align-items:center;min-height:28px}
.v2-ft__top{position:absolute;right:0;top:0;transform:translateY(calc(-100% - 13px));display:flex;align-items:center;justify-content:center;
  min-width:64px;height:var(--v2-touch);padding:0 16px;border:1px solid var(--v2-footer-control);background:var(--v2-cocoa);color:var(--v2-ivory);text-decoration:none;
  font-family:var(--ff-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-eyebrow);
  transition:border-color .2s ease,color .2s ease}
.v2-ft__top:hover{border-color:var(--v2-champagne);color:var(--v2-champagne)}

/* Phone footer (<=620px) = the approved mobile boards: one column with Explore and Services side by side,
 * 40-44px link rows, full-width booking button. */
@media (max-width:620px){
  .v2-ft__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px;padding:56px var(--v2-edge) 72px}
  .v2-ft__contact,.v2-ft__col:last-child{grid-column:1 / -1}
  .v2-ft__links{gap:0;margin-top:10px}
  .v2-ft__strong{display:flex;align-items:center;gap:6px;min-height:var(--v2-touch)}
  .v2-ft__home{margin-top:28px}
  .v2-ft__home img{width:208px;height:55px}
  .v2-ft__h{margin-bottom:12px}
  .v2-ft__col:last-child .v2-ft__h{margin-bottom:14px}
  .v2-ft__list{gap:0}
  .v2-ft__list .v2-ft__a{display:flex;align-items:center;min-height:40px}
  .v2-ft__book{display:flex;width:100%;margin-top:16px}
  .v2-ft__bottom{padding-inline:var(--v2-edge)}
  .v2-ft__bar{gap:4px 16px;padding-top:14px}
}

/* Floating WhatsApp button (phones and tablets, where the header has no booking button).
 * site.js shows it once the visitor scrolls past the first screen and hides it while the footer,
 * with its own BOOK NOW button, is on screen. Without JavaScript it stays hidden. */
.v2-sticky{display:none}
@media (max-width:1023.98px){
  /* iOS 26 Safari colours its bottom toolbar from any fixed element that spans 80% or more of the screen
   * width near the bottom, even a hidden one or one painted through a pseudo-element: a full-width gold
   * button turned the toolbar gold. The button is therefore a compact pill (well under 80% wide), removed
   * with display:none while hidden, and it only rises a few pixels when it appears. */
  .v2-js .v2-sticky{position:fixed;z-index:40;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:none;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:72vw;min-height:52px;padding:12px 30px;
    background:var(--v2-champagne);color:var(--v2-ink);border-radius:999px;text-decoration:none;
    font-family:var(--ff-body);font-size:var(--fs-ctam);line-height:var(--lh-ctam);letter-spacing:0.02em;font-weight:var(--fw-ctam);
    box-shadow:0 2px 8px rgba(26,26,26,0.14);
    transform:translate(-50%,10px);opacity:0;
    transition:transform .25s ease,opacity .25s ease,display .25s allow-discrete,background-color .2s ease}
  .v2-js .v2-sticky.is-shown{display:flex;transform:translate(-50%,0);opacity:1}
  @starting-style{.v2-js .v2-sticky.is-shown{transform:translate(-50%,10px);opacity:0}}
  .v2-js .v2-sticky svg{flex:none}
  .v2-js .v2-sticky:hover,.v2-js .v2-sticky:active{background:var(--v2-champagne-bright)}
  .v2-js .v2-sticky:focus-visible{outline:2px solid var(--v2-ink);outline-offset:3px}
  .v2-hdr.is-open ~ .v2-sticky{display:none}
}
@media (prefers-reduced-motion:reduce){
  .v2-hdr,.v2-hdr__logo,.v2-dd__panel,.v2-menu,.v2-menu__i,.v2-hdr.is-open .v2-menu__i,.v2-menu__a,.v2-menu__a svg,.v2-menu__cta,.v2-nav__link,.v2-js .v2-sticky,.v2-js .v2-sticky.is-shown{transition:none !important}
}

/* Hair guide links on the Hair Colour and Hair Treatment pages (2026-10-27). */
.v2-reads__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0 0;padding:0;list-style:none}
.v2-reads__card{display:flex;flex-direction:column;height:100%;padding:28px;background:var(--v2-warm);color:var(--v2-ink);text-decoration:none}
.v2-reads__card h3{margin:0;font-family:var(--ff-display);font-size:var(--fs-card);line-height:var(--lh-card);letter-spacing:var(--ls-card);font-weight:var(--fw-card)}
.v2-reads__card p{flex:1;margin:12px 0 20px;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small)}
.v2-reads__card > span{align-self:flex-start}
.v2-reads__card:hover h3{color:var(--tg)}
.v2-reads__all{margin:24px 0 0}
@media (max-width:760px){.v2-reads__list{grid-template-columns:minmax(0,1fr);gap:16px}.v2-reads__card{padding:22px}}

/* WhatsApp booking questions (quiz.js, 2026-10-28): a bottom sheet on phones, a centred panel on larger screens. */
.v2-quiz[hidden]{display:none}
.v2-quiz{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.v2-quiz-open,.v2-quiz-open body{overflow:hidden}
.v2-quiz__scrim{position:absolute;inset:0;background:rgba(26,26,26,.42)}
.v2-quiz__sheet{position:relative;display:flex;flex-direction:column;width:100%;max-height:88dvh;background:var(--v2-ivory);color:var(--v2-ink);
  border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(26,26,26,.18);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:621px){
  .v2-quiz{align-items:center;padding:24px}
  .v2-quiz__sheet{max-width:460px;max-height:min(720px,90dvh);border-radius:22px;padding-bottom:0}
}
.v2-quiz__top{display:flex;align-items:center;gap:12px;padding:12px 12px 4px 22px}
.v2-quiz__title{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-logo-gold)}
.v2-quiz__dots{display:flex;gap:6px;margin-left:auto}
.v2-quiz__dots i{width:22px;height:3px;border-radius:2px;background:var(--v2-divider)}
.v2-quiz__dots i.is-on{background:var(--v2-champagne)}
.v2-quiz__x{display:grid;place-items:center;width:var(--v2-touch);height:var(--v2-touch);border:0;border-radius:50%;background:none;color:var(--v2-text-secondary);cursor:pointer}
.v2-quiz__body{overflow-y:auto;padding:4px 22px 12px}
.v2-quiz__q{margin:6px 0 4px;font-family:var(--ff-display);font-size:28px;font-weight:500;line-height:1.15;outline:none}
.v2-quiz__hint{margin:0 0 16px;font-size:13px;color:var(--v2-text-secondary)}
.v2-quiz__chips{display:flex;flex-wrap:wrap;gap:8px}
.v2-quiz__chip{min-height:var(--v2-touch);padding:10px 16px;border:1px solid var(--v2-divider);border-radius:999px;background:var(--v2-white);
  color:var(--v2-ink);font:500 14px/1.25 var(--ff-body);text-align:left;cursor:pointer}
.v2-quiz__chip small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--v2-text-secondary)}
.v2-quiz__chip[aria-pressed="true"]{border-color:var(--v2-logo-gold);background:#F4ECDD;box-shadow:inset 0 0 0 1px var(--v2-logo-gold)}
.v2-quiz__msg{margin:0;padding:14px 16px;border:1px solid var(--v2-divider);border-radius:14px;background:var(--v2-white);font-size:14px;line-height:1.6;white-space:pre-wrap}
.v2-quiz__price{margin:12px 0 0;font-size:13px;color:var(--v2-text-secondary)}
.v2-quiz__foot{display:flex;flex-direction:column;gap:6px;padding:12px 22px 16px;border-top:1px solid var(--v2-divider)}
.v2-quiz__next,.v2-quiz__send{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:999px;
  font:600 15px/1.2 var(--ff-body);text-decoration:none;cursor:pointer}
.v2-quiz__next{background:var(--v2-ink);color:var(--v2-ivory)}
.v2-quiz__next[disabled]{opacity:.35;cursor:not-allowed}
.v2-quiz__send{background:var(--v2-champagne);color:var(--v2-ink)}
.v2-quiz__send:hover{background:var(--v2-champagne-bright)}
.v2-quiz__links{display:flex;justify-content:space-between;gap:12px}
.v2-quiz__link{min-height:var(--v2-touch);display:inline-flex;align-items:center;padding:0;border:0;background:none;color:var(--v2-text-secondary);
  font:13px/1.3 var(--ff-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.v2-quiz button:focus-visible,.v2-quiz a:focus-visible{outline:2px solid var(--v2-ink);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.v2-quiz__sheet{animation:v2-quiz-up .22s ease}@keyframes v2-quiz-up{from{transform:translateY(24px);opacity:.6}}}

/* ---------- Monthly promotion bar (scripts/v2/promo.mjs) ----------
 * Shown above the header only while a promotion runs (an inline script removes [hidden]). In normal flow,
 * so on the home page the overlay header and the iOS status-bar strip move below it / take its colour. */
.v2-promo{position:relative;z-index:61;display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:env(safe-area-inset-top,0px) 48px 0;background:var(--v2-cocoa);color:var(--v2-ivory);
  font-family:var(--ff-body);font-size:14px;line-height:1.3;letter-spacing:0.02em}
.v2-promo[hidden]{display:none}
.v2-promo__t{margin:0;padding-block:9px;text-align:center}
.v2-promo__p b{color:var(--v2-champagne-bright);font-weight:600}
.v2-promo__p s{margin-left:4px;opacity:0.7}
.v2-promo__a{margin-left:10px;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.v2-promo__x{position:absolute;right:max(8px,calc(var(--v2-edge) - 12px));bottom:0;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;background:none;color:inherit;opacity:0.75;cursor:pointer}
.v2-promo__x:hover,.v2-promo__x:focus-visible{opacity:1}
.v2-promo-on .v2-hdr{padding-top:0}
.v2-promo-on .v2-hdr--overlay{top:var(--v2-promo-h,40px)} /* bar height, set by the inline script (it can wrap to two lines) */
@media (max-width:1023.98px){
  .v2-promo-on .v2-menu{height:min(calc(100dvh - var(--v2-header-h) - var(--v2-promo-h,40px) - 1px),860px)}
}
.v2-promo-on .v2-tint:not(.v2-tint--foot){background:var(--v2-cocoa)}
@media (max-width:620px){
  .v2-promo{justify-content:flex-start;padding-left:var(--v2-edge);font-size:13px;letter-spacing:0}
  .v2-promo__t{text-align:left}
  .v2-promo__p s{display:none}
  .v2-promo__a{margin-left:6px}
}

/* hair-treatment.css */
/*
 * Amuse Website V2 - Hair Treatment landing page (P4C). Requires tokens.css, base.css, components.css.
 * Ported from the approved canvas boards "HairTreatment" (desktop 1440) and "HairTreatmentMobile" (390):
 * desktop values, the desktop board's tablet steps (1024 / 900 / 820), and the mobile board's values at
 * <=620px. Type sizes come only from the Typography V2 tokens.
 */
.v2-ht{background:var(--v2-ivory);color:var(--v2-ink);overflow-x:clip}
.v2-ht em{font-style:italic;color:var(--tg)}
html[lang|="zh"] .v2-ht em{font-style:normal}
.ht-wrap{max-width:var(--v2-wrap-max);margin:0 auto;padding-inline:var(--v2-edge)}
.ht-sec{padding-top:64px}

/* Shared pieces */
.ht-kick{display:flex;align-items:center;gap:16px;margin:0 0 18px;text-transform:uppercase;color:var(--tg);
  font-family:var(--ff-body);font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--fw-label)}
.ht-kick::after{content:"";flex:1;height:1px;background:var(--v2-divider)}
html[lang|="zh"] .ht-kick{letter-spacing:.03em}
.ht-kick--c{justify-content:center}
.ht-kick--c::before{content:"";flex:none;width:48px;height:1px;background:var(--v2-divider)}
.ht-kick--c::after{flex:none;width:48px}
.ht-h1{margin:0;font-family:var(--ff-display);font-size:var(--fs-land);line-height:var(--lh-land);letter-spacing:var(--ls-land);font-weight:var(--fw-land)}
.ht-h2{margin:0;max-width:860px;font-family:var(--ff-display);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-h2)}
/* Chinese: accent phrases stay on one line so no single character is left alone */
html[lang|="zh"] .ht-h2 em,html[lang|="zh"] .ht-h1 em{white-space:nowrap}
.ht-lead{max-width:62ch;margin:20px 0 0;color:var(--v2-text-secondary);
  font-family:var(--ff-body);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-lead)}
.ht-num{display:block;margin:0 0 14px;color:var(--tg);font-family:var(--ff-display);font-size:var(--fs-num);line-height:var(--lh-num);letter-spacing:var(--ls-num);font-weight:var(--fw-num)}
.ht-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;max-width:100%;padding:0 26px;
  background:var(--v2-champagne);border:1px solid var(--v2-champagne);border-radius:var(--v2-radius-pill);color:var(--v2-ink);text-decoration:none;text-align:center;
  transition:background .25s ease,border-color .25s ease;
  font-family:var(--ff-body);font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);font-weight:var(--fw-btn)}
.ht-pill b{font-weight:600;letter-spacing:0}
.ht-pill svg{display:block;flex:none}
.ht-pill:hover{background:var(--v2-champagne-bright);border-color:var(--v2-champagne-bright)}
.ht-tlink{display:inline-flex;align-items:center;gap:8px;padding:0 0 5px;color:var(--v2-ink);text-decoration:none;border-bottom:1px solid var(--v2-champagne);transition:color .2s ease;
  font-family:var(--ff-body);font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);font-weight:var(--fw-link)}
.ht-tlink:hover{color:var(--tg)}
.ht-tlink :is(span,svg)[aria-hidden]{color:var(--tg);flex:none}

/* Video tile */
.ht-vt{position:relative;display:block;width:100%;aspect-ratio:4 / 5;margin:0;overflow:hidden;background:#3B342E;color:var(--v2-ivory)}
.ht-vt video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* Photo in place of the video tile (Haircut and Perm pages, 2026-10-27) */
.sp-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ht-vtag{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(26,26,26,0.42);text-transform:uppercase;color:var(--v2-ivory);
  font-family:var(--ff-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-eyebrow)}
.ht-vtag i{display:block;width:6px;height:6px;border-radius:50%;background:var(--v2-champagne)}
.ht-vbtn{position:absolute;right:14px;bottom:14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(250,248,245,0.6);border-radius:50%;
  background:rgba(26,26,26,0.35);color:var(--v2-ivory);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.ht-vbtn:hover{background:rgba(26,26,26,0.6);border-color:var(--v2-ivory)}
.ht-vbtn:focus-visible{outline:2px solid var(--v2-champagne);outline-offset:2px}
.ht-vbtn .ht-ico-play{display:none}
.ht-vbtn[aria-pressed="true"] .ht-ico-play{display:block}
.ht-vbtn[aria-pressed="true"] .ht-ico-pause{display:none}
html:not(.v2-js) .ht-vbtn{display:none}

/* 1. Hero */
.ht-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,72px);align-items:center;padding-top:64px}
.ht-hero .ht-lead{color:var(--v2-ink)}
.ht-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:22px 0 0;padding:0;list-style:none;text-transform:uppercase;color:var(--v2-ink);
  font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);font-weight:500}
html[lang|="zh"] .ht-facts{letter-spacing:.03em}
.ht-facts li{display:flex;align-items:center;gap:10px}
.ht-facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--v2-champagne)}
.ht-hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--v2-divider)}
.ht-hero__cta p{max-width:46ch;margin:0;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.ht-hero__vid{justify-self:end;width:100%;max-width:470px;margin:0}

/* 2. Signature Keratin: before / after, details, how it works */
.ht-sig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.556vw,80px);align-items:center}
.ht-ba{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:#E4DBCB;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ht-ba__l{position:absolute;inset:0;overflow:hidden}
.ht-ba__l img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ht-ba__before{background:#C9BFB1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ht-ba__lab{position:absolute;z-index:2;top:14px;padding:5px 10px;background:rgba(26,26,26,0.42);color:var(--v2-ivory);text-transform:uppercase;
  font-family:var(--ff-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-eyebrow)}
.ht-ba__before .ht-ba__lab{left:14px}
.ht-ba__after .ht-ba__lab{right:14px}
.ht-ba__line{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:2px;margin-left:-1px;background:var(--v2-ivory);pointer-events:none}
.ht-ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--v2-ivory);color:var(--v2-ink);box-shadow:0 4px 16px rgba(0,0,0,0.18)}
.ht-ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent}
.ht-ba:focus-within .ht-ba__knob{box-shadow:0 0 0 3px var(--tg),0 4px 16px rgba(0,0,0,0.18)}
html:not(.v2-js) .ht-ba{cursor:default}
html:not(.v2-js) .ht-ba__range{display:none}
.ht-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:30px 0 0}
.ht-spec > div{padding:14px 0;border-top:1px solid var(--v2-divider)}
.ht-spec__w{grid-column:1 / -1}
.ht-spec dt{text-transform:uppercase;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-eyebrow)}
html[lang|="zh"] .ht-spec dt{letter-spacing:.03em}
.ht-spec dd{margin:4px 0 0;color:var(--v2-ink);font-family:var(--ff-body);font-size:var(--fs-price);line-height:var(--lh-price);letter-spacing:var(--ls-price);font-weight:var(--fw-price)}
.ht-spec dd b{font-weight:600}
.ht-sig__go{margin:30px 0 0}
.ht-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:72px 0 0;padding:0;list-style:none}
.ht-steps li{padding:22px 0 0;border-top:1px solid var(--v2-ink)}
.ht-steps__h{margin:0 0 8px;font-family:var(--ff-display);font-size:var(--fs-card);line-height:var(--lh-card);letter-spacing:var(--ls-card);font-weight:var(--fw-card)}
.ht-steps p{margin:0;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}

/* 3. Find your treatment */
.ht-find{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:stretch;margin:44px 0 0}
.ht-chips{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ht-chip{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:60px;padding:0 22px;border:1px solid #CFC6B8;border-radius:40px;background:transparent;color:var(--v2-ink);
  text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;
  font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.ht-chip:hover{border-color:var(--tg)}
.ht-chip[aria-pressed="true"]{background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-ivory)}
.ht-chip span[aria-hidden]{color:var(--v2-champagne)}
.ht-chip:focus-visible{outline:2px solid var(--tg);outline-offset:3px}
html:not(.v2-js) .ht-chips{display:none}
.ht-pick{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:40px;background:var(--v2-warm)}
.ht-pick .ht-num{margin:0 0 10px}
.ht-pick__h{margin:0;font-family:var(--ff-display);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-h3)}
.ht-pick__rec > p{margin:14px 0 0;max-width:46ch;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}
/* The concern each suggestion answers: read with the suggestion (screen readers, no-JS), not shown with the chips */
.ht-pick__rec > p.ht-pick__for{margin:0 0 12px;color:var(--v2-ink);font-weight:500}
.v2-js .ht-pick__for{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v2-js .ht-pick__rec:not(.is-active){display:none}
html:not(.v2-js) .ht-pick__rec + .ht-pick__rec{margin-top:28px;padding-top:28px;border-top:1px solid var(--v2-divider)}
.ht-pick__acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:28px 0 0}
.ht-pick__note{margin:0;padding-top:16px;border-top:1px solid var(--v2-divider);color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}

/* 4. Treatment menu (two visual groups) */
.ht-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin:44px 0 0}
.ht-menu > div{min-width:0}
.ht-grp{margin:0 0 4px;text-transform:uppercase;color:var(--tg);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);font-weight:500}
html[lang|="zh"] .ht-grp{letter-spacing:.03em}
.ht-mlist{margin:0;padding:0;list-style:none;border-top:1px solid var(--v2-ink)}
.ht-mlist li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:22px 0;border-bottom:1px solid var(--v2-divider)}
.ht-mlist__h{margin:0;font-family:var(--ff-display);font-size:var(--fs-service);line-height:var(--lh-service);letter-spacing:var(--ls-service);font-weight:var(--fw-service)}
.ht-mlist p{grid-column:1 / 2;margin:0;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}
.ht-mlist .ht-pr{grid-column:2;grid-row:1 / span 2;text-align:right;color:var(--v2-text-secondary);white-space:nowrap;font-family:var(--ff-body);font-size:var(--fs-pricemeta);line-height:var(--lh-pricemeta);letter-spacing:var(--ls-pricemeta)}
.ht-mlist .ht-pr b{display:block;color:var(--v2-ink);font-family:var(--ff-body);font-size:var(--fs-price);line-height:var(--lh-price);letter-spacing:var(--ls-price);font-weight:var(--fw-price)}
.ht-ask{grid-column:1 / -1;justify-self:start;margin-top:4px;min-height:44px;box-sizing:border-box;align-items:flex-end}
.ht-menu__note{margin:28px 0 0;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}

/* 5. Results coverflow (homepage coverflow script; canvas card size and offsets for three photos) */
.ht-res{overflow-x:clip}
.ht-cf{position:relative;height:572px;margin:44px 0 0;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ht-cf .v2-cf__item{position:absolute;left:50%;top:50%;width:415px;height:560px;margin:0;overflow:hidden;background:#EAE4DA;
  transform:translate(-50%,-50%) translateX(var(--off,0px)) scale(var(--sc,1));transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease;cursor:pointer}
.ht-cf .v2-cf__item img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.ht-cf .v2-cf__item[data-d="0"]{--off:0px;--sc:1;opacity:1;z-index:10;background:#E4DBCB;cursor:default}
.ht-cf .v2-cf__item[data-d="1"]{--off:320px;--sc:.8;opacity:.7;z-index:9}
.ht-cf .v2-cf__item[data-d="-1"]{--off:-320px;--sc:.8;opacity:.7;z-index:9}
.ht-cf__cap{margin:18px auto 0;max-width:520px;text-align:center;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.ht-cf__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:24px 0 0}
.ht-cf__bar .ht-tlink{justify-self:end}
.ht-cf__ctrl{display:flex;align-items:center;justify-content:center;gap:16px}
.ht-cf__n{min-width:64px;text-align:center;font-weight:500;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.ht-gal-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--v2-control-border);border-radius:50%;background:transparent;color:var(--v2-ink);
  font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.ht-gal-btn:hover{border-color:var(--tg);color:var(--tg)}
html:not(.v2-js) .ht-cf__ctrl{visibility:hidden}

/* 6. Hair Colour cross-link */
.ht-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:48px 52px;background:var(--v2-cocoa);color:var(--v2-ivory)}
.ht-pair .ht-kick{color:#E2CB98}
.ht-pair .ht-kick::after{background:rgba(250,248,245,.25)}
.ht-pair__h{margin:0;font-family:var(--ff-display);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-h3)}
.ht-pair p{max-width:60ch;margin:14px 0 0;color:#E6DFD4;font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}
.ht-pair .ht-tlink{color:var(--v2-ivory)}
.ht-pair .ht-tlink:hover{color:#E2CB98}
.ht-pair .ht-tlink :is(span,svg)[aria-hidden]{color:#E2CB98}
.ht-pair .ht-tlink:focus-visible{outline-color:var(--v2-ivory)}

/* 7. FAQ */
.ht-faqg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,72px);align-items:start}
.ht-faq{border-top:1px solid var(--v2-divider)}
.ht-qa{border-bottom:1px solid var(--v2-divider)}
.ht-qa__h{margin:0;font-weight:inherit}
.ht-qa__btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:44px;padding:22px 0;background:none;border:0;cursor:pointer;color:var(--v2-ink);text-align:left;
  font-family:var(--ff-display);font-size:var(--fs-faq);line-height:var(--lh-faq);letter-spacing:var(--ls-faq);font-weight:var(--fw-faq)}
.ht-qa__btn:hover{color:var(--tg)}
.ht-qa__btn:focus-visible{outline:2px solid var(--tg);outline-offset:4px}
.ht-pm{position:relative;flex:none;width:16px;height:16px}
.ht-pm::before,.ht-pm::after{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--tg);transition:transform .25s ease}
.ht-pm::after{transform:rotate(90deg)}
.ht-qa__btn[aria-expanded="true"] .ht-pm::after{transform:rotate(0deg)}
.ht-qa__a p{max-width:560px;margin:0;padding:0 0 24px;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-body)}
.v2-js .ht-qa__a:not(.is-open){display:none}
html:not(.v2-js) .ht-pm{display:none}

/* 8. Consultation */
.ht-end{padding-top:64px;padding-bottom:64px}
.ht-end__in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px 72px;background:var(--v2-warm)}
.ht-end__in .ht-h2{margin:0 auto;max-width:760px}
.ht-end__in .ht-lead{margin:20px auto 30px;text-align:center}
.ht-end__acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.ht-end__loc{margin:26px 0 0;color:var(--v2-text-secondary);font-family:var(--ff-body);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}

@media (prefers-reduced-motion:reduce){.ht-cf .v2-cf__item,.ht-pm::before,.ht-pm::after,.ht-chip,.ht-vbtn,.ht-pill{transition:none}}

/* ---------- Tablet steps (desktop board responsive pass) ---------- */
@media (min-width:821px) and (max-width:1024px){ .ht-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)} }
@media (min-width:621px) and (max-width:900px){ .ht-faqg{grid-template-columns:minmax(0,1fr);gap:28px} }
@media (min-width:621px) and (max-width:820px){
  .ht-hero{grid-template-columns:minmax(0,1fr)}
  .ht-hero__vid{justify-self:start;max-width:420px}
  .ht-sig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .ht-find{grid-template-columns:minmax(0,1fr);gap:28px}
  .ht-menu{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ---------- Phones (mobile board, 390) ---------- */
@media (max-width:620px){
  .ht-sec{padding-top:32px}
  .ht-kick{margin-bottom:14px}
  .ht-kick--c::before,.ht-kick--c::after{width:28px}
  .ht-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:36px}
  .ht-facts{gap:8px 18px}
  .ht-hero__cta{margin-top:26px;padding-top:22px}
  .ht-hero__cta .ht-pill,.ht-end__acts .ht-pill,.ht-sig__go .ht-pill,.ht-pick__acts .ht-pill{width:100%;padding:12px 20px;text-wrap:balance}
  .ht-hero__vid{justify-self:stretch;max-width:none}
  .ht-sig{grid-template-columns:minmax(0,1fr);gap:32px}
  .ht-spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:22px}
  .ht-steps{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:32px}
  .ht-steps li{padding-top:16px}
  .ht-steps__h{margin-bottom:4px}
  .ht-find{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:30px}
  .ht-chips{flex-direction:row;flex-wrap:wrap;gap:8px}
  .ht-chip{width:auto;min-height:44px;padding:0 16px}
  .ht-chip span[aria-hidden]{display:none}
  .ht-pick{padding:26px 22px;gap:22px}
  .ht-pick__acts{flex-direction:column;align-items:stretch;gap:16px}
  .ht-pick__acts .ht-tlink{align-self:center}
  .ht-pick__note{padding-top:14px}
  .ht-menu{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:20px}
  .ht-menu__note{margin-top:14px}
  .ht-mlist{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--v2-edge);margin:0 calc(-1 * var(--v2-edge));padding:0 var(--v2-edge);border-top:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ht-mlist::-webkit-scrollbar{display:none}
  .ht-mlist li{flex:0 0 86%;display:flex;flex-direction:column;gap:4px;scroll-snap-align:start;padding:14px;border:1px solid var(--v2-divider);background:var(--v2-white)}
  .ht-mlist .ht-pr{text-align:left;white-space:normal}
  .ht-mlist .ht-pr b{display:inline;margin:0 8px 0 0}
  .ht-ask{align-self:flex-start;margin-top:auto;padding-top:6px}
  .ht-cf{height:330px;margin-top:30px}
  .ht-cf .v2-cf__item{width:230px;height:310px}
  .ht-cf .v2-cf__item[data-d="1"]{--off:150px;--sc:.78}
  .ht-cf .v2-cf__item[data-d="-1"]{--off:-150px;--sc:.78}
  .ht-cf__bar{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;margin-top:16px}
  .ht-cf__bar > span{display:none}
  .ht-cf__bar .ht-tlink{justify-self:center}
  .ht-pair{grid-template-columns:minmax(0,1fr);gap:22px;padding:30px 22px}
  .ht-faqg{grid-template-columns:minmax(0,1fr);gap:20px}
  .ht-qa__btn{padding:18px 0}
  .ht-qa__a p{padding-bottom:20px}
  .ht-end{padding-top:32px;padding-bottom:40px}
  .ht-end__in{padding:44px 20px 48px}
  .ht-end__acts{flex-direction:column;gap:18px;width:100%}
}
@media (max-width:480px){.ht-pill{padding-left:18px;padding-right:18px;gap:8px}}