/* ==========================================================================
   BHRealty landing pages - shared stylesheet
   --------------------------------------------------------------------------
   Design tokens are derived from the Tilia penthouse poster
   (src/penthouse/listings/tilia-residences-376/tilia-penthouse-poster.html) but re-authored for a
   responsive web page rather than a fixed 1080x1920 canvas.

   IMPORTANT - oklch() fallback strategy
   The poster declared every token as oklch(). On an engine without oklch()
   support a custom property holding an oklch() value is invalid at
   computed-value time, so `color: var(--fg)` falls back to `inherit` - i.e.
   dark text on a dark background, which is invisible. To avoid that we declare
   sRGB hex fallbacks first and upgrade to oklch() only inside @supports.
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

/* ---------- Design tokens (sRGB fallbacks) ---------- */
:root {
  --bg: #0e0906;
  --bg-base: #0d0c0a;
  --surface: #1a130f;
  --fg: #f6f3ed;
  --muted: #aba495;
  --accent: #ebc36d;
  --border: rgba(202, 195, 182, 0.18);
  --border-strong: rgba(202, 195, 182, 0.32);
  --scrim: rgba(13, 12, 10, 0.55);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 8px;

  /* Height of the mobile sticky CTA bar; body reserves this much space so the
     bar never covers page content. */
  --cta-bar-h: 0px;
}

/* ---------- Design tokens (oklch upgrade) ---------- */
@supports (color: oklch(0.5 0.1 60)) {
  :root {
    --bg: oklch(0.145 0.012 60);
    --surface: oklch(0.195 0.014 60);
    --fg: oklch(0.965 0.008 85);
    --muted: oklch(0.72 0.022 85);
    --accent: oklch(0.835 0.115 85);
    --border: oklch(0.82 0.02 85 / 0.18);
    --border-strong: oklch(0.82 0.02 85 / 0.32);
    --scrim: oklch(0.12 0.012 60 / 0.55);
  }
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  /* Offset in-page anchor jumps so the sticky bar does not cover headings. */
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Reserve room for the sticky CTA bar plus the iOS home indicator. */
  padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link - keyboard users land here first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Heading roles follow .github/instructions/headings-bhrealty.instructions.md:
   class = visual role, tag = semantic role. */
.heading-page-title { font-size: 30px; }
.heading-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 13vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.heading-section-title { font-size: 24px; }
.heading-subsection { font-size: 20px; }
.heading-card-title { font-size: 18px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--border-strong);
  flex: none;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: rgba(13, 12, 10, 0.92); }
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/* Brand logo, taken from the main site's header asset (see landing.config.json).
   The declared width/height attributes give the browser the aspect ratio before
   the image loads, so this cannot shift layout. */
.brand { display: block; flex: none; }
.brand img {
  display: block;
  width: auto;
  height: 32px;
}
@media (min-width: 640px) { .brand img { height: 38px; } }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch a,
.lang-switch span {
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lang-switch [aria-current="true"] {
  background: var(--fg);
  color: var(--bg);
}

/* One button per hotline. Never a merged "call us" label: a combined number
   string is ambiguous to read and impossible to tap unambiguously. Hidden below
   1024px because the sticky CTA bar already carries both numbers there. */
.topbar__hotlines {
  display: none;
  align-items: center;
  gap: 8px;
}
.topbar__hotline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.topbar__hotline:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 1024px) { .topbar__hotlines { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 12, 10, 0.68) 0%, rgba(13, 12, 10, 0.20) 26%, rgba(13, 12, 10, 0.70) 64%, var(--bg) 100%);
}
@supports (color: oklch(0.5 0.1 60)) {
  .hero__scrim {
    background:
      linear-gradient(180deg, oklch(0.12 0.012 60 / 0.68) 0%, oklch(0.12 0.012 60 / 0.20) 26%, oklch(0.12 0.012 60 / 0.70) 64%, var(--bg) 100%);
  }
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78vh, 620px);
  padding-block: 72px 32px;
  gap: 14px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}
.hero__badge {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Eyebrow legibility over the hero photograph. The flat-background contrast of
   --accent on --bg is already ~11:1, but the hero is a photo under a scrim, so
   the effective contrast is much lower than the token pair suggests. Brighten the
   tone for this one context and add a shadow so it survives a light patch of
   image. */
.hero .eyebrow {
  color: #f4d98a;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(13, 12, 10, 0.95), 0 2px 10px rgba(13, 12, 10, 0.8);
}

.hero__sub {
  /* Cap the measure with a font-independent length, never `ch`.
     `ch` is resolved against whichever font is available at that instant, so it
     changes size when the web font swaps in: 56ch measured 604px on the system
     fallback and 757px with Be Vietnam Pro. Whenever the cap dropped below the
     paragraph's natural width the text re-wrapped from one line to two, which
     moved every element above it in this bottom-anchored flex column and cost
     ~0.13 CLS on desktop (VI only - the English copy is short enough to stay on
     one line in both fonts). 47.5rem is the same measure as 56ch in Be Vietnam
     Pro and stays above the natural width of every fallback font, so the box
     geometry is identical in all font states. */
  max-width: 47.5rem;
  font-size: clamp(16px, 4vw, 20px);
  color: var(--muted);
}
.hero__sub strong { color: var(--fg); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.btn--primary {
  background: var(--accent);
  color: #1a130f;
}
.btn--primary:hover { background: var(--fg); }

.btn--ghost {
  background: var(--scrim);
  color: var(--fg);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--fg); }

.btn--block { width: 100%; }

/* ---------- Sections ---------- */
.section { padding-block: 44px; }
.section--muted { background: var(--bg); }
.section--surface { background: var(--surface); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

/* ---------- Specs ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.spec {
  padding: 18px 12px;
  min-width: 0;
}
.spec + .spec { border-left: 1px solid var(--border); }
.spec__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 34px);
  line-height: 1.05;
}
.spec__value small {
  font-family: var(--font-body);
  font-size: 0.55em;
  font-weight: 400;
  color: var(--muted);
}
.spec__label {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Video ---------- */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}
.video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn {
  position: relative;
  width: clamp(64px, 18vw, 96px);
  height: clamp(64px, 18vw, 96px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.play-btn svg { fill: currentColor; }
.video-poster:hover .play-btn { transform: scale(1.06); border-color: var(--fg); }
.video-poster:active .play-btn { transform: scale(0.97); }

.yt-holder { position: absolute; inset: 0; }
/* The holder overlays the poster button, so it must not swallow clicks until an
   iframe is actually injected into it. */
.yt-holder { pointer-events: none; }
.yt-holder iframe { pointer-events: auto; }
.yt-holder iframe { width: 100%; height: 100%; border: none; display: block; }

.video-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  background: rgba(26, 19, 15, 0.94);
  font-size: 15px;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(246, 243, 237, 0.18);
  border-top-color: var(--fg);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.video-status a { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

/* ---------- Highlights ---------- */
.highlights {
  list-style: none;
  display: grid;
  gap: 12px;
}
.highlights li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
}
.highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.highlights strong { color: var(--fg); font-weight: 600; }

/* ---------- Price ---------- */
.price-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 15vw, 96px);
  line-height: 0.92;
  color: var(--accent);
}
.price small { font-size: 0.46em; font-weight: 600; margin-left: 6px; }
.price-note { color: var(--muted); max-width: 46ch; }

/* ---------- Trust ---------- */
.trust-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.trust-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.trust-card h3 { margin-bottom: 6px; }
.trust-card p { color: var(--muted); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body {
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Lead form ---------- */
.lead {
  display: grid;
  gap: 22px;
}
.lead__intro p { color: var(--muted); }

.lead__form { display: grid; gap: 14px; }

.field { display: grid; gap: 6px; }
.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.field .req { color: var(--accent); }

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-weight: 300;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(235, 195, 109, 0.18);
}
.field textarea { min-height: 132px; resize: vertical; }

.field--invalid input,
.field--invalid textarea { border-color: #e5796b; }

.field__error {
  font-size: 13px;
  color: #f0938a;
  min-height: 0;
}
.field__error:empty { display: none; }

.field__hint { font-size: 12px; color: var(--muted); }

/* Honeypot - visually and semantically removed from the real form. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
}
.form-status:empty { display: none; }
.form-status--ok {
  background: rgba(235, 195, 109, 0.14);
  border: 1px solid var(--accent);
  color: var(--fg);
}
.form-status--err {
  background: rgba(229, 121, 107, 0.12);
  border: 1px solid #e5796b;
  color: var(--fg);
}

.lead__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lead__privacy { font-size: 13px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 32px 28px;
  background: var(--bg);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.site-footer__brand img { display: block; height: 40px; width: auto; }
.site-footer__tagline {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-hotlines { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.footer-hotlines a { font-variant-numeric: tabular-nums; }
.site-footer__links .lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.site-footer__legal {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Sticky mobile CTA bar ---------- */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  /* Flex, not a fixed column count: the number of hotlines is data, so the bar
     must not break when a host configures one or three. */
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 12, 10, 0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 6px;
  font-size: 12px;
  gap: 5px;
}
.cta-bar .btn--primary { flex-grow: 1.15; }
.cta-bar__call { font-variant-numeric: tabular-nums; }
.cta-bar svg { flex: none; }

/* ---------- Floating chat widget ---------- */
.float-widget {
  position: fixed;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sits above the sticky CTA bar on small screens. */
  bottom: calc(var(--cta-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
}
.float-widget a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.float-widget a:hover { transform: translateY(-2px); }
.float-widget svg { fill: currentColor; }
.float-widget .fw-zalo { background: #0068ff; }
.float-widget .fw-whatsapp { background: #25d366; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .section { padding-block: 56px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .price-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .price-note { text-align: right; max-width: 34ch; padding-bottom: 8px; }
  .lead { grid-template-columns: 1fr 1fr; align-items: start; }
  .lead__form { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .section { padding-block: 68px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .spec { padding: 24px 24px 24px 0; }
  .spec + .spec { padding-left: 28px; }
  .hero__inner { min-height: min(72vh, 660px); padding-block: 96px 48px; }
}

@media (min-width: 1024px) {
  .section { padding-block: 80px; }
  .site-footer { padding-block: 44px 36px; }
}

/* The sticky CTA bar is mobile-only; the floating widget drops back to the
   corner once the bar is gone. */
@media (min-width: 1024px) {
  :root { --cta-bar-h: 0px; }
  .cta-bar { display: none; }
}

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

/* ---------- Print ---------- */
@media print {
  .topbar, .cta-bar, .float-widget, .video-frame { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}