@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter.woff2) format("woff2"); }

/* ---- Final look: "Peacock" (owner's choice, 2026-10-06) ----
   Deep teal accent on navy, with sand sections; Playfair Display for headings and Inter for text.
   <html data-look="peacock"> is set by build_pages.py. The --color-gold variables keep their template
   names but now hold teal. Latin text uses the web fonts below (self-hosted, SIL Open Font Licence). Chinese and Japanese characters
   keep the device's own fonts: web fonts for those run to several megabytes. */

html[data-look] { --on-accent: #fff; }
html[data-look] .hero__cta .btn, html[data-look] .price-band .btn, html[data-look] #sales-gallery .btn,
html[data-look] .facts-cta .btn, html[data-look] .plan-tab.is-active, html[data-look] .lang-switch a.is-active,
html[data-look] #layouts .plan-ask:hover { color: var(--on-accent); }
html[data-look] #signature-address, html[data-look] #layouts, html[data-look] #location, html[data-look] .section--light { --color-gold-light: var(--oak-light); }
html[data-look] #why .card { border-top-color: var(--color-gold); }
html[data-look] #pricing { border-color: color-mix(in srgb, var(--color-gold-light) 35%, transparent); }
html[data-look] .tower__zone.is-active { background: color-mix(in srgb, var(--color-gold) 14%, transparent); }
html[data-look] .tower__stage { border-color: color-mix(in srgb, var(--color-gold) 30%, transparent); background: radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--color-gold) 22%, transparent), transparent 60%), #0b0c0f; }
html[data-look] .scroll-progress span, html[data-look] .hero__accent-line { background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light)); }
html[data-look] #guides .guide-card { border-left-color: var(--color-gold); }
html[data-look] #guides .guide-card__site { color: var(--color-gold-light); }
html[data-look] .nav__logo, html[data-look] .footer-brand { letter-spacing: 0.04em; }

/* Teal accent, navy in place of pine, teal dusk on the two call-to-action bands. */
html[data-look="peacock"] {
  --color-gold: #1f9c95; --color-gold-light: #6fd6cc; --oak: #0f6f6b; --oak-light: #178f89;
  --pine: #0c1a2a; --pine-light: #15304a; --plum: #0e1b2b;
  --font-display: "Playfair Display", "Songti SC", "Noto Serif SC", "Hiragino Mincho ProN", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", sans-serif;
}
html[data-look="peacock"] #vision, html[data-look="peacock"] #lifestyle { --color-surface: #16314a; --color-border: rgba(150, 200, 235, 0.18); --color-ink-muted: #b5c4d2; }
html[data-look="peacock"] #pricing { background: linear-gradient(135deg, #0d2238 0%, #10405a 55%, #17696f 100%); }
html[data-look="peacock"] #sales-gallery { background: linear-gradient(160deg, #0b1626 0%, #123650 45%, #1c7a78 100%); }
html[data-look="peacock"] #sales-gallery .eyebrow { color: #a5ece3; }
html[data-look="peacock"] #sales-gallery .lede, html[data-look="peacock"] #sales-gallery .cta-hint { color: #d6e8ee; }
html[data-look="peacock"] h1, html[data-look="peacock"] h2 { font-weight: 600; }

/* the hero eyebrow sits on a busy sky: near-white reads better than any accent */
html[data-look] .hero__content .eyebrow { color: #f6f1e8; }


/* ---- Side rail (wide screens only; phones and tablets keep the menu button) ----
   No panel and no line. Ten small dots down the left edge, one per section: passed sections are
   solid, coming ones are faint. The section being read opens into a teal ring with its number; any
   dot does the same on hover or keyboard focus and shows the section's name. wolo.js marks each
   dot .is-on-light from the section behind it, so dots are light on dark and dark on sand. */
.side-nav { display: none; }
@media (min-width: 1100px) {
  :root { --side-w: 56px; }
  .side-nav { display: block; position: fixed; z-index: 96; top: 0; left: 0; bottom: 0; width: var(--side-w); background: none; border: 0; pointer-events: none; }
  .side-nav__rail { display: none; }
  .side-nav ol { position: absolute; left: 0; right: 0; top: 50%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateY(-50%); }
  .side-nav li { --rail: 255, 255, 255; display: flex; }
  .side-nav li.is-on-light { --rail: 29, 26, 22; }
  /* the link is a 26px hit area; the visible mark is drawn by ::before so it can grow from dot to ring */
  .side-nav a[data-spy] { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: transparent; text-decoration: none; pointer-events: auto; transition: color 0.25s ease; }
  .side-nav a[data-spy]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(var(--rail), 0.38); box-shadow: 0 0 0 0 rgba(var(--rail), 0); transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
  .side-nav li.is-done a[data-spy]::before { background: rgba(var(--rail), 0.95); }
  .side-nav__n { position: relative; font-size: 0.66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .side-nav a[data-spy]:hover, .side-nav a[data-spy]:focus-visible, .side-nav a[data-spy].is-current { color: rgb(var(--rail)); outline: none; }
  .side-nav a[data-spy]:hover::before, .side-nav a[data-spy]:focus-visible::before, .side-nav a[data-spy].is-current::before { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--rail), 0.9); }
  .side-nav a[data-spy].is-current { color: var(--color-gold-light); }
  .side-nav a[data-spy].is-current::before { box-shadow: inset 0 0 0 2px var(--color-gold-light); }
  .side-nav li.is-on-light a[data-spy].is-current { color: #0f6f6b; }
  .side-nav li.is-on-light a[data-spy].is-current::before { box-shadow: inset 0 0 0 2px var(--color-gold); }
  .side-nav__t { position: absolute; left: calc(100% + 10px); top: 50%; padding: 6px 11px; border-radius: 999px; background: rgba(11, 22, 34, 0.92); color: #fff; font-size: 0.8rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-6px, -50%); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
  .side-nav a[data-spy]:hover .side-nav__t, .side-nav a[data-spy]:focus-visible .side-nav__t { opacity: 1; transform: translate(0, -50%); }
  .nav__toggle { display: none; }
  .has-lightbox .side-nav { display: none; }
}
/* where the page is not much wider than its content, nudge content clear of the rail */
@media (min-width: 1100px) and (max-width: 1340px) {
  .container, .nav { padding-left: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-nav a[data-spy], .side-nav a[data-spy]::before, .side-nav__t { transition: none; }
}

/* ---- Top bar: no panel, no line, no blur. It takes the colour of the section under it (wolo.js 13). ---- */
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; transition: background-color 0.35s ease; }
main > section { --tone-bg: var(--color-bg); }
main > .section--alt, #faq { --tone-bg: var(--color-bg-alt); }
#vision, #lifestyle { --tone-bg: var(--pine-light); }
#pricing { --tone-bg: #0d2238; }
#sales-gallery { --tone-bg: #0b1626; }
#why { --tone-bg: #0f1518; }
#layouts { --tone-bg: var(--sand); }
.presented-by { --tone-bg: var(--plum); }
#vision, #lifestyle { background: linear-gradient(180deg, var(--pine-light) 0%, var(--pine) 420px); }
/* over sand sections the bar's text turns dark */
.site-header[data-tone="light"] .nav__logo { color: #1d1a16; }
.site-header[data-tone="light"] .nav__logo strong { color: var(--oak); }
.site-header[data-tone="light"] .nav__toggle { color: #1d1a16; }
.site-header[data-tone="light"] .lang-switch { background: rgba(29, 26, 22, 0.06); border-color: rgba(29, 26, 22, 0.16); }
.site-header[data-tone="light"] .lang-switch a:not(.is-active) { color: #4d463c; }
.site-header .nav__logo, .site-header .lang-switch a, .site-header .nav__toggle { transition: color 0.35s ease; }

/* ---- Top bar items share one shape: the language bar's pill ----
   Wordmark, "Ask Kay" and WeChat take the same fill, hairline border and full radius. */
.site-header { --pill-bg: rgba(11, 18, 26, 0.55); --pill-border: rgba(255, 255, 255, 0.16); --pill-ink: #e9eef0; }
.site-header[data-tone="light"] { --pill-bg: rgba(29, 26, 22, 0.06); --pill-border: rgba(29, 26, 22, 0.18); --pill-ink: #2a2620; }
.site-header .lang-switch, .site-header .nav__logo, .site-header .nav__actions .btn {
  background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: 999px;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.site-header .nav__logo { flex: 0 0 auto; padding: 0 18px; min-height: 42px; font-size: 1rem; letter-spacing: 0.05em; color: var(--pill-ink); overflow: visible; }
.site-header[data-tone="light"] .nav__logo { color: var(--pill-ink); }
.site-header .nav__actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; font-size: 0.82rem; font-weight: 600; color: var(--pill-ink); overflow: visible; }
.site-header .nav__actions .btn--beam::before, .site-header .nav__actions .btn--beam::after { display: none; }
.site-header .nav__actions .btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }
.site-header .lang-switch { min-height: 42px; }
@media (max-width: 600px) {
  .site-header .nav__logo { padding: 0 13px; min-height: 40px; font-size: 0.9rem; }
}

/* ---- Contact buttons, bottom right: quiet pills in the page's own colours ----
   No glow and no pulse. Navy glass with a hairline border, like the top bar; teal on hover. */
.contact-float { gap: 10px; }
.contact-float .whatsapp-float, .contact-float .wechat-float {
  width: 48px; height: 48px; border-radius: 50%; animation: none;
  background: rgba(11, 22, 34, 0.86); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 0.78rem; font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.contact-float .whatsapp-float svg { width: 24px; height: 24px; }
.contact-float .whatsapp-float svg path:last-child { fill: #0b1622; transition: fill 0.25s ease; }
@media (hover: hover) {
  .contact-float .whatsapp-float:hover, .contact-float .wechat-float:hover { background: var(--color-gold); border-color: var(--color-gold-light); transform: translateY(-2px); }
  .contact-float .whatsapp-float:hover svg path:last-child { fill: var(--color-gold); }
}
@media (max-width: 600px) {
  /* phone bar: one teal action, one outlined */
  .contact-float { background: rgba(9, 16, 24, 0.97); border-top: 1px solid rgba(111, 214, 204, 0.18); }
  .contact-float .whatsapp-float, .contact-float .wechat-float { width: auto; height: 50px; border-radius: 999px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 0.95rem; font-weight: 700; }
  .contact-float .whatsapp-float { background: var(--color-gold); border-color: var(--color-gold); }
  .contact-float .whatsapp-float svg path:last-child { fill: var(--color-gold); }
  .contact-float .wechat-float { background: transparent; border-color: rgba(255, 255, 255, 0.35); }
  /* small phones */
  .nav__toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
}
@media (max-width: 359px) {
  .site-header .nav__logo { padding: 0 9px; font-size: 0.8rem; }
  .site-header .lang-switch { padding: 2px; }
  .lang-switch a { padding: 9px 6px; font-size: 0.68rem; }
  .nav { gap: 4px; padding-left: 8px; padding-right: 4px; }
  .nav__toggle { min-width: 40px; }
}
/* short or narrow phones: the headline block must never slide up under the top bar */
@media (max-width: 600px) {
  .hero { padding-top: 104px; }
  .hero__content .eyebrow { display: block; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 1.6rem; }
  .hero__note { font-size: 0.78rem; }
}
@media (max-width: 359px) {
  .contact-float .wechat-float, .contact-float .whatsapp-float { white-space: nowrap; font-size: 0.82rem; }
  .contact-float .whatsapp-float { flex: 1.5; }
}
.wechat-popover__hint { max-width: 380px; margin: 12px auto 2px; font-size: 0.8rem; line-height: 1.5; color: #3a352d; text-align: left; }
@media (max-width: 600px) { .wechat-popover img { width: 240px; margin: 0 auto; } .wechat-popover__hint { max-width: 240px; } }