/* ============================================================
   LEGACY VIDEOS HK — style.css
   Rebuilt from scratch (Sept 2026). Refined brand system:
   Playfair Display + DM Sans, warm cinema palette.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink: #1a1611;
  --ink-2: #241e16;
  --ink-3: #2e271d;
  --paper: #fdfaf3;
  --cream: #f3ecdf;
  --cream-2: #eae0cd;
  --white: #ffffff;
  --gold: #c19a3d;
  --gold-2: #d8b662;
  --gold-deep: #96752a;
  --gold-line: rgba(193, 154, 61, 0.45);
  --hairline: rgba(26, 22, 17, 0.1);
  --hairline-w: rgba(255, 255, 255, 0.14);
  --muted: rgba(26, 22, 17, 0.66);
  --muted-w: rgba(253, 250, 243, 0.72);
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 4px 14px rgba(26, 22, 17, 0.06);
  --shadow-lg: 0 24px 60px -24px rgba(26, 22, 17, 0.35);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1200px;
  --header-h: 90px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}
h1, h2, h3, h4, p { text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0 0 0.45em; font-family: var(--font-display); font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.32rem; }
em { font-style: italic; }
::selection { background: rgba(193, 154, 61, 0.28); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.2rem;
}
.skip-link:focus { left: 0; }

.container {
  width: min(var(--maxw), 100% - 48px);
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-line); }
.eyebrow--center::after { content: ""; width: 34px; height: 1px; background: var(--gold-line); }
.eyebrow--light { color: var(--gold-2); }
.gold-hl { color: var(--gold-deep); font-style: italic; }
.section-title em { color: var(--gold-deep); }
.lede { color: var(--muted); max-width: 640px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1rem 1.7rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
  background 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform;
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; }
.btn--gold { background: var(--gold); color: #221a0b; box-shadow: 0 10px 26px -12px rgba(193, 154, 61, 0.8); }
.btn--gold:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-3); transform: translateY(-2px); }
.btn--ghost { border-color: rgba(253, 250, 243, 0.4); color: var(--paper); }
.btn--ghost:hover { border-color: var(--gold-2); color: var(--gold-2); transform: translateY(-2px); }
.btn--line { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: rgba(253, 250, 243, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow 0.3s, background 0.3s;
}
.header.scrolled { box-shadow: 0 10px 30px -20px rgba(26, 22, 17, 0.35); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 88px; padding: var(--space-4) var(--space-6); }
.brand { display: inline-flex; align-items: baseline; gap: 0.42rem; font-family: var(--font-display); }
.brand__name { font-size: 1.42rem; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.01em; }
.brand__sub { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.44em; text-transform: uppercase; color: var(--ink); opacity: 0.78; }
.brand__mark { width: 48px; height: 48px; margin-right: 0.65rem; flex-shrink: 0; object-fit: contain; }
.brand:hover .brand__mark { opacity: 0.85; transition: opacity 0.3s; }
.brand--footer { display: inline-block; }
.brand--footer img { display: block; height: auto; max-width: 200px; }
.brand--full { display: inline-block; line-height: 0; }
.brand--full img { display: block; height: 56px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  .brand--full img { height: 52px; }
}

.nav { display: flex; align-items: center; gap: 0.4rem; }
.nav__link {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(26, 22, 17, 0.72); padding: 0.5rem 0.85rem; position: relative; transition: color 0.25s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.12rem;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__cta {
  margin-left: 0.9rem; padding: 0.72rem 1.35rem; background: var(--ink); color: var(--paper);
  border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.nav__cta:hover { background: var(--gold); color: #221a0b; transform: translateY(-1px); }
.nav__cta[aria-current="page"], .nav__cta.nav__link[aria-current="page"] {
  background: var(--gold-deep); color: #fff; cursor: default;
}
.nav__cta[aria-current="page"]:hover, .nav__cta.nav__link[aria-current="page"]:hover {
  background: var(--gold-deep); color: #fff; transform: none;
}
.nav__cta::after { display: none; }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: 0.3s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero (home, full-bleed) ---------- */
.hero {
  position: relative; min-height: max(92svh, 640px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 2rem) 0 4.5rem;
  color: var(--paper); isolation: isolate;
}
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__img--fade { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(26, 22, 17, 0.05) 0%, rgba(26, 22, 17, 0.28) 48%, rgba(26, 22, 17, 0.74) 100%),
    linear-gradient(180deg, rgba(26, 22, 17, 0.22) 0%, rgba(26, 22, 17, 0) 30%);
}
.hero__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; }
.hero__inner { width: min(var(--maxw), 100% - 48px); margin-inline: auto; }
.hero__content { max-width: 660px; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); font-weight: 600; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero h1 .gold-hl { color: var(--gold-2); }
.hero__lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: rgba(253, 250, 243, 0.88); max-width: 560px; margin: 1.4rem 0 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__eyebrow { position: relative; margin-bottom: 1.6rem; }

/* ---------- Hero (interior pages) ---------- */
.hero--page { min-height: min(64svh, 600px); align-items: flex-end; padding-bottom: 3.6rem; }
.hero--page .hero__content { max-width: 720px; }
.hero--page h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.hero--page .hero__lede { font-size: 1.05rem; }

/* ---------- Sections ---------- */
.sec { padding: clamp(4.6rem, 9vw, 7.6rem) 0; }
.sec--cream { background: var(--cream); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink .section-title { color: #fff; }
.sec--ink .section-title em, .sec--ink .gold-hl { color: var(--gold-2); }
.sec--ink .lede { color: var(--muted-w); }
.sec-head { max-width: 720px; margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::after { display: block; }
.section-title { margin: 1.1rem 0 1rem; }
.sec-head p { margin: 0; }
.gold-rule { width: 62px; height: 1px; background: var(--gold); margin: 0.4rem 0 1.6rem; }
.sec-head--center .gold-rule { margin: 0.4rem auto 1.6rem; }

/* Split two-col */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.6rem, 6vw, 5.5rem); align-items: center; }
.split__media { position: relative; }
.frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--cream-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--sq { aspect-ratio: 4 / 4.4; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); pointer-events: none; }
.split__offset { position: absolute; inset: -22px -22px auto auto; width: 38%; z-index: -1; border: 1px solid var(--gold-line); border-radius: var(--radius); }
.quote-card {
  background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem 1.9rem;
}
.quote-card p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.22rem; line-height: 1.5; color: var(--ink-2); }
.quote-card--ink { background: var(--ink-2); border-left-color: var(--gold-2); }
.quote-card--ink p { color: rgba(253, 250, 243, 0.94); }
.quote-card--down { margin-top: -3rem; margin-left: 1.2rem; margin-right: -0.5rem; position: relative; }

/* Feature cards (What We Do) */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.feat {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 2.2rem 2rem; position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.feat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feat:hover::before { transform: scaleX(1); }
.feat__icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(193, 154, 61, 0.1); color: var(--gold-deep); margin-bottom: 1.4rem; }
.feat__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.feat h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.feat p { font-size: 0.97rem; color: var(--muted); margin: 0; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; counter-reset: step; }
.step { position: relative; padding-top: 0.4rem; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold-line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--gold-deep);
  margin-bottom: 1.5rem; position: relative;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; top: 26px; left: 60px; right: -26px; height: 1px;
  background: linear-gradient(90deg, var(--gold-line), var(--hairline));
}
.step h3 { font-size: 1.22rem; }
.step p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* 2-col utility grid (About principles) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }

/* Four audience cards (image boxes) */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.who-card {
  position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; min-height: 380px; background: var(--ink-3);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.who-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.who-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease); }
.who-card:hover img { transform: scale(1.06); }
.who-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 15, 10, 0.02) 30%, rgba(20, 15, 10, 0.55) 68%, rgba(16, 12, 8, 0.94) 100%);
}
.who-card__body { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.5rem 1.6rem; color: #fff; }
.who-card h3 { font-size: 1.32rem; color: #fff; margin-bottom: 0.35rem; }
.who-card h3::before { content: ""; display: block; width: 26px; height: 2px; background: var(--gold-2); margin-bottom: 0.7rem; }
.who-card p { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.price {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 2.4rem 2.1rem; position: relative;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.price:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.price--featured { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg); }
.price--featured:hover { transform: translateY(-8px); }
.price__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #221a0b; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 2px; white-space: nowrap;
}
.price__tier { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 0.3rem; }
.price--featured .price__tier { color: var(--gold-2); }
.price h3 { font-size: 1.7rem; margin-bottom: 0.2rem; }
.price--featured h3 { color: #fff; }
.price__amt { margin: 0.7rem 0 1.1rem; min-height: 6rem; display: flex; flex-direction: column; justify-content: flex-start; }
.price__amt .from { display: block; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 0.15rem; }
.price--featured .price__amt .from { color: var(--muted-w); }
.price__amt .num {
  font-family: var(--font-display); font-size: 2.35rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.15;
}
.price__amt .num {
  font-variant-numeric: tabular-nums;
}
.price__amt .num sup {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--gold-deep);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
  /* explicit positioning to ensure consistent rendering across browsers */
  position: relative;
  top: -0.05em;
}
.price--featured .price__amt .num sup { color: var(--gold-2); }
.price__desc { font-size: 0.94rem; color: var(--muted); margin-bottom: 1.5rem; }
.price--featured .price__desc { color: var(--muted-w); }
.price ul { flex: 1; display: flex; flex-direction: column; gap: 0.62rem; margin-bottom: 1.9rem; }
.price li { font-size: 0.9rem; color: var(--muted); display: flex; gap: 0.6rem; line-height: 1.45; }
.price--featured li { color: rgba(253, 250, 243, 0.85); }
.price li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 0.58em; }
.price--featured li::before { background: var(--gold-2); }
.price .btn { margin-top: auto; width: 100%; }
.price__note { font-size: 0.78rem; color: var(--muted); opacity: 0.9; text-align: center; margin-top: 1.2rem; }
.price--featured .price__note { color: var(--muted-w); }
.price__pay-note { font-size: 0.8rem; margin: 0.4rem 0 1.6rem; color: var(--muted); }
.price--featured .price__pay-note { color: rgba(253, 250, 243, 0.6); }

/* Add-ons band */
.addons {
  margin-top: 2.6rem; background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 2.2rem 2.4rem;
  display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 1.8rem; align-items: start;
}
.addons h3 { font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem; }
.addons li { font-size: 0.92rem; color: var(--muted); padding: 0.34rem 0 0.34rem 1.15rem; position: relative; }
.addons li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 6px; height: 1px; background: var(--gold); }
.addons__cta { display: flex; align-items: center; }
.addons__cta a { font-weight: 600; font-size: 0.95rem; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 0.4rem; }
.addons__cta a:hover { color: var(--ink); }

/* FAQ */
.faq { max-width: 840px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.9rem; }
.faq details {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 0.1rem 1.9rem; transition: border-color 0.25s, box-shadow 0.25s;
}
.faq details[open] { border-color: var(--gold-line); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.4rem 1.35rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.13rem; color: var(--ink-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; color: var(--gold-deep); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq__a { padding: 0 0 1.5rem; margin: 0; color: var(--muted); font-size: 0.98rem; }
.sec--ink .faq details { background: rgba(255, 255, 255, 0.04); border-color: var(--hairline-w); }
.sec--ink .faq summary { color: var(--paper); }
.sec--ink .faq .faq__a { color: var(--muted-w); }

/* CTA band */
.cta {
  background: var(--ink); color: var(--paper); text-align: center;
  padding: clamp(4.2rem, 9vw, 6.5rem) 0; position: relative; overflow: hidden; isolation: isolate;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(58% 90% at 50% 110%, rgba(193, 154, 61, 0.22) 0%, transparent 70%);
}
.cta h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 780px; margin-inline: auto; }
.cta h2 .gold-hl { color: var(--gold-2); }
.cta p { color: var(--muted-w); max-width: 560px; margin: 1.1rem auto 2.2rem; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }

/* Contact layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.4rem, 5vw, 4.6rem); align-items: start; }
.info-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.05rem 0; border-bottom: 1px solid var(--hairline); }
.info-item:last-of-type { border-bottom: 0; }
.info-item__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(193, 154, 61, 0.1); display: flex; align-items: center; justify-content: center; color: var(--gold-deep); }
.info-item__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.info-item__label { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 0.1rem; }
.info-item a { color: var(--ink); font-weight: 500; }
.info-item a:hover { color: var(--gold-deep); }
.info-note { margin-top: 1.4rem; background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: 10px; padding: 1.3rem 1.5rem; }
.info-note strong { display: block; font-size: 0.94rem; margin-bottom: 0.2rem; }
.info-note p { margin: 0; font-size: 0.88rem; color: var(--muted); }

.form-panel { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.8rem, 4vw, 2.8rem); }
.form-panel h2 { font-size: 1.7rem; }
.form-panel > p { font-size: 0.94rem; color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.15rem; }
.form-group label { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.45rem; }
.form-group .opt { color: var(--gold-deep); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.98rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(26, 22, 17, 0.18); border-radius: 8px;
  padding: 0.82rem 1rem; transition: border-color 0.25s, box-shadow 0.25s;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193, 154, 61, 0.18);
}
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396752a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.form-submit { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.form-submit .btn { flex: 1 1 180px; }
.form-divider { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 1.2rem 0; }
.form-divider::before, .form-divider::after { content: ""; height: 1px; background: var(--hairline); flex: 1; }
.pay-box { background: rgba(193, 154, 61, 0.07); border: 1px dashed var(--gold-line); border-radius: 10px; padding: 1.2rem 1.4rem; margin-top: 0.4rem; }
.pay-box p { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.85rem; }
.pay-links { display: flex; flex-direction: column; gap: 0.55rem; }
.pay-link { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.72rem 1rem; font-size: 0.9rem; transition: border-color 0.25s, transform 0.25s var(--ease); }
.pay-link:hover { border-color: var(--gold); transform: translateX(3px); }
.pay-link strong { font-family: var(--font-display); }
.pay-link > span:not(.lnk) { margin-left: auto; min-width: 6rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-link .lnk { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; margin-left: 1.5rem; }
.form-msg { display: none; font-size: 0.95rem; color: var(--ink-2); background: rgba(193, 154, 61, 0.1); border: 1px solid var(--gold-line); border-radius: 8px; padding: 0.9rem 1.1rem; margin-top: 0.8rem; }
.form-msg.show { display: block; }

/* Footer */
.footer { background: #14100b; color: rgba(253, 250, 243, 0.6); padding: clamp(3.2rem, 7vw, 5rem) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.footer .brand__name { color: var(--gold); }
.footer .brand__sub { color: rgba(253, 250, 243, 0.7); }
.footer__tag { margin: 1.2rem 0 1.6rem; font-family: var(--font-display); font-style: italic; font-size: 1.06rem; color: rgba(253, 250, 243, 0.85); white-space: nowrap; }
.footer__brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.8rem; }
.footer__tagline { font-size: 0.9rem; color: rgba(255,255,255,0.4); line-height: 1.6; max-width: 34rem; }
.footer__brand-name span { color: var(--gold); }
.footer__h { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; margin-bottom: 1.1rem; }
.footer ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer a { font-size: 0.95rem; color: rgba(253, 250, 243, 0.7); transition: color 0.2s; }
.footer a:hover { color: var(--gold-2); }
.footer .foot-email { font-size: 0.9rem; }
.footer__bottom {
  border-top: 1px solid rgba(253, 250, 243, 0.1); padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; align-items: center;
}
.footer__bottom p { margin: 0; font-size: 0.8rem; color: rgba(253, 250, 243, 0.45); }
.footer__bottom .prod { color: rgba(253, 250, 243, 0.55); white-space: nowrap; }
.footer__bottom .prod a { color: var(--gold-2); white-space: nowrap; }


/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-hero {
  padding: 8rem 0 3rem;
  background: var(--cream);
  border-bottom: 1px solid rgba(26, 22, 17, 0.08);
  text-align: center;
}
.legal-hero__inner { max-width: 720px; }
.legal-hero .eyebrow {
  display: block; margin-bottom: 1rem; color: var(--gold-2);
}
.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.legal-meta {
  font-size: 0.82rem;
  color: rgba(26, 22, 17, 0.55);
  letter-spacing: 0.05em;
}
.legal-body { padding: 4rem 0 6rem; background: var(--paper); }
.legal-body .container--narrow { max-width: 760px; }
.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2.4rem 0 0.9rem;
}
.legal-body h2:first-of-type { margin-top: 0.4rem; }
.legal-body p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.legal-body ul, .legal-body ol {
  margin: 0.5rem 0 1.4rem 1.4rem;
  padding-left: 0.4rem;
}
.legal-body li {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 1.6rem;
}
.legal-back { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(26, 22, 17, 0.1); }
.legal-back a { color: var(--gold-2); text-decoration: none; font-weight: 500; }
.legal-back a:hover { color: var(--ink); }


/* Price package "Request booking" link (replaces old pay-stripe button) */
.price__request {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  margin-top: 0.4rem;
}
.price__request:hover { color: var(--ink); border-bottom-color: var(--gold); }


/* Consent checkbox on contact form (HK PDPO compliance) */
.field--consent { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(26, 22, 17, 0.1); }
.checkbox-label {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; color: var(--ink-2); cursor: pointer; line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--gold-2);
}
.checkbox-label a { color: var(--gold-2); text-decoration: underline; }

/* The consent row overflowed its container by 7px at 390px because the
   long "Privacy Policy" link could not wrap inside the flex row. Let the
   text block shrink and wrap; the checkbox stays fixed-width. */
.checkbox-label span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.15rem; }
  .checkbox-label { gap: 0.7rem; }
}


/* Inline legal links in footer bottom strip */
.footer__legal-links { display: flex; gap: 0.5rem; align-items: center; }
.footer__legal-links a { color: rgba(253, 250, 243, 0.55); text-decoration: none; transition: color 0.2s; }
.footer__legal-links a:hover { color: var(--gold-light); }


/* Contact form success/error messages */
.form-msg { padding: 0.9rem 1.2rem; border-radius: 8px; margin: 1rem 0; font-size: 0.92rem; display: none; }
.form-msg.error { display: block; background: #fde7e7; color: #8a1a1a; border: 1px solid #f5c2c2; }
.form-msg.success { display: block; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }

/* 404 */
.notfound { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem 1.5rem 4rem; background: var(--ink); color: var(--paper); }
.notfound .big { font-family: var(--font-display); font-style: italic; font-size: clamp(5rem, 16vw, 9rem); color: var(--gold-2); line-height: 1; margin-bottom: 0.5rem; }
.notfound h1 { color: #fff; }

/* Reveal animation */
.rv { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .step:nth-child(2)::before { display: none; }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .price--featured { order: -1; }
  .split { grid-template-columns: 1fr; }
  .split__offset { display: none; }
  .quote-card--down { margin: -2.4rem 1rem 0 1rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr 1fr; }
  .addons__cta { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { width: min(100% - 40px, var(--maxw)); }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 99;
    background: rgba(253, 250, 243, 0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 1.4rem 1.4rem 2.5rem; overflow-y: auto;
    opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .nav__link { font-size: 1.05rem; letter-spacing: 0.14em; padding: 1rem 0.4rem; border-bottom: 1px solid var(--hairline); }
  .nav__link::after { display: none; }
  .nav__cta { margin: 1.4rem 0 0; justify-content: center; padding: 1rem; }
  .nav-toggle { display: block; }
  .feat-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step::before { display: none; }
  .who-grid { grid-template-columns: 1fr; }
  .who-card { min-height: 340px; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .brand__sub { display: none; }
  .hero__actions .btn { width: 100%; }

  /* ---------- Mobile tap targets ----------
     Measured at 390px: nav/footer/email links rendered 18–29px tall and
     23–28px wide — far below the 44px minimum for a thumb. Padding (not
     font-size) is used so the visual weight of the desktop design is
     unchanged; only the hit area grows. */
  .nav__link { min-height: 44px; display: flex; align-items: center; }
  .footer a,
  .footer__bottom .prod a,
  .footer .foot-email {
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
    padding: 0 0.15rem;
  }
  .lang-switch-simple a { min-height: 40px; }
  /* "Request booking →" on the pricing cards is a text link — give it a
     real button-sized target so it is not missed on a phone. */
  .price__request {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.15rem;
  }
  /* Contact-page direct links (email / WhatsApp / Instagram) sit inside
     .info-item rows and rendered 21px tall — give them the same 40px
     hit area as the footer links. */
  .info-item a { display: inline-block; min-height: 40px; line-height: 40px; }
  /* Inline links inside legal prose (e.g. the Resend email address) sit
     mid-sentence, so a 40px box would break the line rhythm. They get a
     modest vertical pad instead — the hit area grows without reflowing
     the paragraph. */
  .legal-body a { display: inline-block; padding: 0.35rem 0; }
  .legal-back a { display: inline-block; padding: 0.45rem 0; }
  /* Payment-page inline legal links ("email us") read as text, not buttons —
     same treatment: taller hit area, same visual weight. These links carry
     inline styles rather than classes, so target their containers. */
  .pay-note a,
  .pay-info p a,
  .pay-box p a,
  .form-panel .legal-inline a { display: inline-block; padding: 0.35rem 0; }
  /* Footer tagline: "Your voice. Your story. Your love. Preserved." must
     read as one line. Its natural width is 284px, so on a 320px screen it
     no longer fits — shrink the type slightly there rather than letting it
     break mid-phrase after "Your". */
  .footer__tagline { font-size: 0.82rem; }
}

/* Simple language switcher - no JS, no animation */
/* The language switcher was moved out of <nav> so it stays reachable when the
   mobile nav is collapsed (the nav is opacity:0 / pointer-events:none at
   <=720px, which trapped 繁/简/EN behind it). As a separate flex child it
   now sits to the RIGHT of the whole nav block, which pushed the nav links
   left of their original desktop position. Pull it back into the nav's
   right-hand position by removing the extra flex gap before it. */
.lang-switch-simple {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.5rem;
}
@media (min-width: 721px) {
  .header__inner { gap: 0; }
  .brand { margin-right: auto; }
}
.lang-switch-simple a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(26, 22, 17, 0.55);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: var(--font-body, system-ui);
}
.lang-switch-simple a:hover {
  color: var(--ink, #1a1611);
  background: rgba(193, 154, 61, 0.06);
}
.lang-switch-simple a.is-current {
  color: var(--gold-deep, #a07d2e);
  font-weight: 700;
  border-bottom: 1.5px solid var(--gold-deep, #a07d2e);
  border-radius: 0;
}
@media (max-width: 900px) {
  .lang-switch-simple {
    margin-left: 0;
    gap: 0.25rem;
  }
  .lang-switch-simple a {
    font-size: 0.72rem;
    padding: 0.25rem 0.35rem;
  }
}

/* ---------- Mobile header: language switcher stays visible ----------
   The switcher was moved OUT of the collapsible <nav> (it was trapped
   inside .nav, which is opacity:0 / pointer-events:none when closed on
   <=720px, making 繁/简/EN unreachable on a phone). Now that it is a
   sibling of .nav it must be kept in the header bar at mobile widths —
   and given a 44px tap target so it is actually usable with a thumb. */
@media (max-width: 720px) {
  /* CRITICAL: the header's backdrop-filter makes it a containing block for
     fixed-position descendants. The mobile nav (position:fixed; bottom:0)
     then resolved against the 90px header instead of the viewport, so the
     menu collapsed to 62px tall and the hero image painted over it.
     Dropping the blur on mobile restores a viewport-relative fixed nav;
     a more opaque background keeps the frosted look. */
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(253, 250, 243, 0.98);
  }
  .header__inner { gap: 0.5rem; padding: var(--space-4) 1.25rem; }
  .lang-switch-simple {
    display: inline-flex;
    margin-left: auto;
    margin-right: 0.35rem;
    gap: 0.15rem;
  }
  .lang-switch-simple a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
  }
  .lang-switch-simple a.is-current { border-bottom-width: 2px; }
}

/* Hide the old dropdown CSS classes (no longer used) */
.lang-switch,
.lang-switch__btn,
.lang-switch__chev,
.lang-switch__menu {
  display: none;
}


/* ---- lv:channels — HK contact channels (t_c39675de) ---- */
/* ---- lv:channels — HK contact channels (t_c39675de) ----
   Extends the existing .info-item grid. Uses the site's existing tokens only
   (--gold-deep, --gold-line, --ink, --muted, --cream, --radius) so the block
   inherits whatever the v4 theme already defines. No new colours invented. */

.info-item--channel .info-item__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.12rem;
  line-height: 1.45;
}

.info-item--channel a { word-break: break-word; }

/* WeChat QR sits beside the handle rather than under it, so the row keeps the
   same height as the WhatsApp/Signal rows above it. */
.info-item__qr {
  display: block;
  margin-top: 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  width: 104px;
  height: 104px;
}

@media (max-width: 560px) {
  .info-item__qr { width: 88px; height: 88px; }
  .info-item--channel .info-item__hint { font-size: 0.8rem; }
}