/* Thomson Reserve palette: warm forest green and gold, which suits the lush
   Upper Thomson / MacRitchie setting. Lucerne Grand deliberately uses a cool
   lakeside scheme instead, so the two sites don't read as the same template. */
:root {
    --primary: #2b3a2f; /* Deep Forest Green */
    --accent: #c0a062; /* Warm Gold */
    --accent-hover: #b5952f; /* Darker gold for hover */
    --accent-glow: rgba(212, 175, 55, 0.4);
    /* Gold is light, so button text must be dark. White on this gold is only
       2.49:1 and fails WCAG AA on our main call-to-action. */
    --btn-text: #2b3a2f;
    --bg-main: #faf8f5; /* Warm Ivory */
    --bg-alt: #f0ede6; /* Soft Beige for alternating sections */
    --text-main: #2c2c2c; /* Soft Charcoal for readability */
    --text-inverse: #ffffff;
    --border: #e2dcd2;
    --box-shadow: rgba(43, 58, 47, 0.08);
    --card-bg: #ffffff;
    --placeholder-bg: #e8e5df;
    --scroll-track: #efece4;
    --scroll-thumb: #bcc4b6;
    --scroll-thumb-hover: #9aa793;
}

[data-theme="dark"] {
    --primary: #73a37d; /* Muted Green */
    --accent: #d4b878; /* Brightened Gold */
    --accent-hover: #c2a35f;
    --accent-glow: rgba(212, 175, 55, 0.4);
    --btn-text: #121212;
    --bg-main: #1a1c19; /* Rich Charcoal */
    --bg-alt: #222521; /* Slightly lighter charcoal */
    --text-main: #e0e0e0;
    --text-inverse: #121212;
    --border: #333831;
    --box-shadow: rgba(0,0,0,0.5);
    --card-bg: #222521;
    --placeholder-bg: #2a2e29;
    --scroll-track: #1e211d;
    --scroll-thumb: #3e483d;
    --scroll-thumb-hover: #586451;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; transition: background-color 0.3s, color 0.3s; }

/* Editorial type system (matches the reference look): serif display + sans body + mono data. */
/* Page scrollbar — themed to match the site instead of the grey OS default,
   and with the little arrow buttons removed. */
html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid var(--scroll-track); background-clip: padding-box; transition: background 0.25s ease, border-width 0.25s ease; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent-hover); border-width: 2px; background-clip: padding-box; }

/* Thin brass bar across the top showing how far down the page you are. */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 10px var(--accent-glow); transition: width 0.1s linear, opacity 0.3s ease; opacity: 0; pointer-events: none; }
.scroll-progress.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: var(--scroll-track); }

.logo, .hero h1, h1, h2, h3, .section-title, .panel-title, .track-title { font-family: 'Cormorant Garamond', 'Times New Roman', serif; }
.logo { font-weight: 700; letter-spacing: 0.06em; }
.hero h1 { font-weight: 600; letter-spacing: -0.005em; }
.section-title, .panel-title { font-weight: 600; }
.panel-kicker, .attention-icon, .stat-value, .trust-value, .timer-badge, #timer { font-family: 'JetBrains Mono', ui-monospace, monospace; }

html { scroll-behavior: smooth; }
body { color: var(--text-main); line-height: 1.6; background-color: var(--bg-main); overflow-x: hidden; padding-bottom: 140px; }

header { background-color: var(--primary); color: var(--text-inverse); padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px var(--box-shadow); transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
.header-hidden { transform: translateY(-100%); }

.logo { position: relative; display: inline-flex; align-items: center; font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-size: 1.7rem; font-weight: 600; letter-spacing: 2px; color: #ffffff; text-decoration: none; }
/* Set on the span itself: the serif on .logo was not reaching it. */
.logo-text { position: relative; z-index: 2; font-family: 'Cormorant Garamond', 'Times New Roman', serif; transition: color 0.4s ease; }
.logo:hover .logo-text { color: #dcc27a; }
.logo-foliage { position: absolute; left: -16px; top: 50%; z-index: 3; pointer-events: none; transform-origin: left center; transform: translateY(-55%) translateX(-14px) rotate(-32deg) scale(0.3); opacity: 0; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.4s ease; }
.logo:hover .logo-foliage { transform: translateY(-55%) translateX(0) rotate(0deg) scale(1); opacity: 1; }
.logo-leaves { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; overflow: visible; }
.logo-leaves .leaf { position: absolute; top: -6px; width: 8px; height: 8px; border-radius: 0 100% 0 100%; background: #8fbf6e; opacity: 0; }
.logo-leaves .leaf:nth-child(1) { left: 4%;  background: #8fbf6e; }
.logo-leaves .leaf:nth-child(2) { left: 14%; background: #c9a24b; }
.logo-leaves .leaf:nth-child(3) { left: 24%; background: #7fae63; }
.logo-leaves .leaf:nth-child(4) { left: 34%; background: #8fbf6e; }
.logo-leaves .leaf:nth-child(5) { left: 46%; background: #c9a24b; }
.logo-leaves .leaf:nth-child(6) { left: 56%; background: #7fae63; }
.logo-leaves .leaf:nth-child(7) { left: 67%; background: #8fbf6e; }
.logo-leaves .leaf:nth-child(8) { left: 78%; background: #c9a24b; }
.logo-leaves .leaf:nth-child(9) { left: 90%; background: #7fae63; }
.logo:hover .logo-leaves .leaf:nth-child(1) { animation: logoLeafFallL 1.7s ease-in 0s    infinite; }
.logo:hover .logo-leaves .leaf:nth-child(2) { animation: logoLeafFallR 2.0s ease-in 0.5s  infinite; }
.logo:hover .logo-leaves .leaf:nth-child(3) { animation: logoLeafFallC 1.6s ease-in 0.2s  infinite; }
.logo:hover .logo-leaves .leaf:nth-child(4) { animation: logoLeafFallR 1.9s ease-in 0.8s  infinite; }
.logo:hover .logo-leaves .leaf:nth-child(5) { animation: logoLeafFallL 1.8s ease-in 0.35s infinite; }
.logo:hover .logo-leaves .leaf:nth-child(6) { animation: logoLeafFallC 2.1s ease-in 0.6s  infinite; }
.logo:hover .logo-leaves .leaf:nth-child(7) { animation: logoLeafFallL 1.7s ease-in 0.15s infinite; }
.logo:hover .logo-leaves .leaf:nth-child(8) { animation: logoLeafFallR 1.9s ease-in 0.9s  infinite; }
.logo:hover .logo-leaves .leaf:nth-child(9) { animation: logoLeafFallC 2.0s ease-in 0.4s  infinite; }
@keyframes logoLeafFallL {
  0%   { opacity: 0; transform: translate(0, -6px) rotate(0deg); }
  12%  { opacity: 1; }
  85%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-24px, 42px) rotate(-260deg); }
}
@keyframes logoLeafFallR {
  0%   { opacity: 0; transform: translate(0, -6px) rotate(0deg); }
  12%  { opacity: 1; }
  85%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(22px, 44px) rotate(260deg); }
}
@keyframes logoLeafFallC {
  0%   { opacity: 0; transform: translate(0, -6px) rotate(0deg); }
  12%  { opacity: 1; }
  85%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-4px, 46px) rotate(170deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo-foliage { transition: none; }
  .logo:hover .logo-leaves .leaf { animation: none; }
}
.header-actions { display: flex; align-items: center; gap: 1rem; }

/* Section nav in the header. Hidden below 1000px — six links plus a button and the
   theme toggle cannot fit on a phone, and every target is reachable by scrolling. */
.main-nav { display: flex; align-items: center; gap: 1.75rem; margin: 0; }
header > .logo { flex: 1; }
header > .header-actions { flex: 1; justify-content: flex-end; }
.main-nav a { color: #efeadc; text-decoration: none; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.1em; font-weight: 600; white-space: nowrap; padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 1000px) { .main-nav { display: none; } }

.theme-toggle { background: transparent; border: none; font-size: 1.5rem; cursor: pointer; color: #ffffff; transition: transform 0.3s; }
.theme-toggle:hover { transform: scale(1.1); }

.btn { background-color: var(--accent); color: var(--btn-text); padding: 0.8rem 1.5rem; text-decoration: none; font-weight: bold; border-radius: 4px; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: inline-block; }
.btn:hover { background-color: var(--accent-hover); transform: translateY(-3px); box-shadow: 0 6px 15px var(--accent-glow); }
.btn-secondary { background: transparent; color: var(--primary); border: 1px solid rgba(26, 43, 76, 0.18); }
.btn-third { background: #25D366; color: #ffffff; border: 1px solid rgba(26, 43, 76, 0.18); }
.btn-secondary:hover { background: rgba(26, 43, 76, 0.06); box-shadow: none; }
.btn-third:hover { background: #1ca04d; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); }

.hero { position: relative; min-height: 88vh; display: flex; align-items: center; padding: 5rem 5%; overflow: hidden; background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(26, 43, 76, 0.16), transparent 30%),
    linear-gradient(135deg, var(--bg-main), var(--bg-alt));
}
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.22)); pointer-events: none; }
[data-theme="dark"] .hero::before { background: linear-gradient(135deg, rgba(18,18,18,0.88), rgba(18,18,18,0.46)); }
.hero-grid { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: stretch; }
.hero-copy, .hero-panel { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 25px 60px rgba(0,0,0,0.12); backdrop-filter: blur(10px); border-radius: 24px; }
.hero-copy { padding: 2.5rem; }
.hero-panel { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.hero-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(26, 43, 76, 0.08); color: var(--primary); font-size: 0.85rem; font-weight: 600; }
[data-theme="dark"] .hero-pill { background: rgba(255, 255, 255, 0.12); }
.hero h1 { color: var(--primary); font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; margin-bottom: 1rem; letter-spacing: -0.03em; }
.hero-subtext { font-size: 1.1rem; margin-bottom: 1.25rem; color: color-mix(in srgb, var(--text-main) 90%, var(--primary)); max-width: 34rem; }
.timer-badge { background: #e11d48; color: white; display: inline-block; padding: 0.2rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; }
.hero-points { list-style: none; display: grid; gap: 0.8rem; margin: 1.5rem 0 2rem; }
.hero-points li { padding-left: 1.8rem; position: relative; }
.hero-points li::before { content: '•'; position: absolute; left: 0; top: -0.1rem; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; color: var(--text-main); font-size: 0.9rem; }
.hero-proof span { padding: 0.5rem 0.75rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); }
.panel-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--accent); font-weight: 700; margin-bottom: 1rem; }
.panel-title { font-size: 1.65rem; color: var(--primary); margin-bottom: 1rem; }
.panel-description { color: var(--text-main); margin-bottom: 1.25rem; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.stat-card { padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, var(--bg-main), var(--bg-alt)); border: 1px solid var(--border); }
.stat-value { display: block; font-size: 1.4rem; font-weight: 700; color: var(--primary); }
.stat-label { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--text-main); }
.panel-list { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 1.25rem; }
.panel-list li { padding-left: 1.6rem; position: relative; }
.panel-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.hero-note { margin-top: 1rem; font-size: 0.85rem; color: var(--text-main); opacity: 0.85; }

.section { padding: 5rem 5%; background-color: var(--bg-main); }
.section-light { background-color: var(--bg-alt); }
.section-title { text-align: center; font-size: 2.6rem; color: var(--primary); margin-bottom: 3rem; }
.section-subtitle { text-align: center; margin-bottom: 2rem; }
.section-lead { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; color: var(--text-main); }

.trust-strip-section { padding-top: 2rem; padding-bottom: 2rem; }
/* Margin goes in the shorthand below, not a separate rule — a later `margin: 0 auto`
   was silently wiping it. The strip now lives inside the Why section, so it has to
   carry its own spacing above and below. */
.trust-strip { max-width: 1200px; margin: 1.75rem auto 2.25rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.trust-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 1.6rem 1.35rem; text-align: center; box-shadow: 0 10px 24px var(--box-shadow); }
.trust-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; line-height: 1.2; }
.trust-label { display: block; margin-top: 0.5rem; color: var(--text-main); font-size: 1.02rem; line-height: 1.5; }

.attention-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.attention-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem; box-shadow: 0 10px 24px var(--box-shadow); }
.attention-card h3 { margin: 0.75rem 0 0.5rem; color: var(--primary); }
.attention-icon { width: 3rem; height: 3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.12); color: var(--accent); font-size: 1.25rem; }
.attention-card p { color: var(--text-main); font-size: 0.95rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .hero-grid, .attention-grid, .trust-strip { grid-template-columns: 1fr; } .hero { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; } }

.factsheet, .pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px var(--box-shadow); }
.factsheet th, .factsheet td, .pricing-table th, .pricing-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; letter-spacing: 0.02em; font-size: 1.05rem; }
.factsheet th, .pricing-table th { background-color: var(--primary); color: #ffffff; }
.factsheet th { width: 40%; }
/* Private-lift qualifier, set quieter than the layout name it follows. */
.pl { font-size: 0.82em; opacity: 0.7; letter-spacing: 0; }

/* Unit mix grouped by bedroom count. <details> gives open/close for free — no JS,
   and it stays keyboard accessible and findable by in-page search when collapsed. */
.mix-groups { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card-bg); }
.mix-group + .mix-group { border-top: 1px solid var(--border); }
.mix-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.15rem; font-weight: 600; color: var(--primary); }
.mix-group summary::-webkit-details-marker { display: none; }
/* Border-drawn chevron rather than a +/- swap: rotating it is a real state change the
   eye can follow, whereas a rotated plus or minus looks identical to itself. */
.mix-group summary::after { content: ''; width: 0.5rem; height: 0.5rem; margin-right: 0.15rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); }
.mix-group[open] summary::after { transform: rotate(-135deg); }
.mix-group summary:hover { background: var(--bg-alt); }
.mix-count { margin-left: auto; font-weight: 400; font-size: 0.82rem; opacity: 0.65; color: var(--text-main); }
.mix-group ul { list-style: none; margin: 0; padding: 0 1.15rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.mix-group li { position: relative; padding-left: 0.95rem; font-size: 0.93rem; color: var(--text-main); }
.mix-group li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* Open animation on the panel contents. <details> snaps by default; a fade-and-drop
   reads as a dropdown without the JS a true height transition would need. */
.mix-group[open] > ul { animation: mixDrop 0.26s ease-out; }
@keyframes mixDrop {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
.mix-group summary::after { transition: transform 0.22s ease; }
/* Real height slide where the browser allows it. A 7px fade alone barely registers
   as opening; this actually pushes the rest of the page down as the panel grows.
   interpolate-size is what makes height:auto animatable at all. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .mix-group::details-content {
    /* block-size, not height, and transition-behavior as its own declaration so it
       covers every property in the list. Closing is the fussy direction: the browser
       wants to yank the content the instant [open] goes away, and allow-discrete is
       what defers content-visibility until the size transition has finished. */
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s ease;
    transition-behavior: allow-discrete;
  }
  .mix-group[open]::details-content { block-size: auto; }
  /* The fade would double up with the slide, so the slide takes over. */
  .mix-group[open] > ul { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mix-group[open] > ul { animation: none; }
  .mix-group summary::after { transition: none; }
  .mix-group::details-content { transition: none; }
}
/* Total sits inside the box as its closing row, right-aligned over the unit figures
   above it — the same place the e-book puts it. */
.mix-foot { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.5rem; padding: 0.85rem 1.15rem; border-top: 1px solid var(--border); background: var(--bg-alt); font-size: 0.82rem; }
.mix-foot span { color: var(--text-main); opacity: 0.7; }
.mix-foot strong { color: var(--primary); }
.peeks { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.peeks-title { text-align: center; font-family: 'Cormorant Garamond','Times New Roman',serif; font-size: 1.45rem; font-weight: 700; color: var(--primary); margin-bottom: 1.25rem; }
.peeks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.peek { text-align: center; padding: 0 0.5rem; }
.peek-n { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; }
.peek h4 { font-size: 1rem; color: var(--primary); margin-bottom: 0.35rem; }
.peek p { font-size: 0.88rem; color: var(--text-main); line-height: 1.55; }
@media (max-width: 700px) { .peeks-grid { grid-template-columns: 1fr; gap: 1.4rem; } }
.mix-price { text-align: center; font-family: 'Cormorant Garamond','Times New Roman',serif; font-size: 1.6rem; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; }
.mix-note { text-align: center; font-size: 0.9rem; color: var(--text-main); margin-bottom: 1.25rem; }
@media (max-width: 600px) {
  /* "psf" was dropping onto a line of its own; smaller type keeps the figure whole. */
  .mix-price { font-size: 1.25rem; }
  .mix-note { font-size: 0.84rem; }
  .mix-group summary { padding: 0.85rem 0.95rem; font-size: 0.95rem; gap: 0.5rem; }
  .mix-count, .mix-foot { font-size: 0.74rem; }
  .mix-group ul { padding: 0 0.95rem 0.9rem; }
  /* Qualifier onto its own line rather than trailing a long layout name. */
  .mix-group .pl { display: block; }
}

.pricing-container { max-width: 800px; margin: 0 auto; }
/* Narrow screens: let table text wrap instead of clipping, and never let the card
   overflow the page. Viewport-based (not JS device detection) so it always applies. */
@media (max-width: 768px) {
  .pricing-table th, .pricing-table td,
  .factsheet th, .factsheet td { padding: 0.75rem 0.65rem; font-size: 0.9rem; white-space: normal; }
  .pricing-container { overflow-x: auto; }
}
@media (max-width: 480px) {
  .pricing-table th, .pricing-table td { padding: 0.6rem 0.4rem; font-size: 0.78rem; }
  .pricing-card { padding: 1rem 0.75rem; }
}
.pricing-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; box-shadow: 0 18px 40px var(--box-shadow); }
.pricing-disclaimer { text-align: center; font-size: 0.9rem; color: var(--text-main); }

.highlights-container { display: flex; align-items: center; }
.highlights-list { list-style: none; }
.highlights-list li { margin-bottom: 1rem; padding-left: 2rem; position: relative; }
.highlights-list li::before { content: '✓'; color: var(--accent); position: absolute; left: 0; font-weight: bold; transition: transform 0.3s; }
.highlights-list li:hover::before { transform: scale(1.5); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.gallery-img { width: 100%; height: 200px; background-color: var(--placeholder-bg); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: transform 0.4s ease; cursor: pointer; border-radius: 4px; overflow: hidden; }
.gallery-img:hover { transform: scale(1.03); box-shadow: 0 10px 20px var(--box-shadow); border-color: transparent; }

.placeholder-box { width: 100%; height: 100%; min-height: 300px; background-color: var(--placeholder-bg); border-radius: 8px; box-shadow: 0 4px 15px var(--box-shadow); display: flex; align-items: center; justify-content: center; }

/* ---- e-book media, gallery, track record, land-cost chart, waves ---- */
/* The site plan used to be stretched to the factsheet's height with object-fit:
   contain, which letterboxed a tall drawing inside a wide box and left the caption
   floating over the plan itself. It now sits at its natural ratio with the caption
   underneath, so nothing covers the drawing and there is no dead space. */
/* Factsheet and site plan stack instead of sitting side by side: the plan is portrait
   and much taller than the table, so as columns one always ran ragged past the other. */
.factsheet-stack { display: block; }
/* Capped and centred: at full section width the factsheet ran to ~1140px, which left
   a key/value table with huge empty gutters and a long eye-travel between label and
   value. The plan is capped a little narrower again — it stays click-to-zoom. */
.factsheet-stack .factsheet { max-width: 820px; margin-left: auto; margin-right: auto; }
.plan-block { margin-top: 2.25rem; max-width: 780px; margin-left: auto; margin-right: auto; }
/* Centred and held to the table's width so it reads as a footnote to the table rather
   than a stray line running the full section. */
.factsheet-note { max-width: 820px; margin: 0.75rem auto 0; text-align: center; font-size: 0.8rem; color: var(--text-main); }
.media-figure { position: static; margin: 0; }
.media-img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); box-shadow: 0 10px 24px var(--box-shadow); background: #efeae0; }
.media-figure figcaption { position: static; margin: 0.55rem 0 0; padding: 0; background: none; color: var(--text-main); opacity: 0.82; text-align: center; font-size: 0.8rem; }

.zoomable-image { cursor: zoom-in; }
.lifestyle-fixed { max-width: 1000px; margin: 1.75rem auto 0; }
.lifestyle-fixed img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 10px 24px var(--box-shadow); }
.lifestyle-fixed figcaption { margin-top: 0.6rem; text-align: center; font-size: 0.85rem; color: var(--text-main); opacity: 0.82; }

/* gallery carousel */
.carousel { position: relative; max-width: 1000px; margin: 0 auto; height: 460px; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 18px 42px var(--box-shadow); background: #0b1e17; touch-action: pan-y; }
.carousel-track { position: absolute; inset: 0; }
.carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.9s ease-in-out; will-change: opacity; }
.carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.carousel-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.25rem 1.1rem; color: #fff; font-size: 0.95rem; letter-spacing: 0.01em; background: linear-gradient(0deg, rgba(7,16,12,0.9) 12%, rgba(7,16,12,0.55) 55%, transparent); }

.carousel-progress { position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 4; transition: width 0.15s linear; }

.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%) scale(1); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(11,30,23,0.45); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; opacity: 0.75; transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.carousel:hover .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: rgba(11,30,23,0.85); transform: translateY(-50%) scale(1.08); }
.carousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }

.carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; z-index: 3; margin: 0; }
.carousel-dots button { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,0.45); cursor: pointer; padding: 0; transition: width 0.3s ease, background 0.3s ease; }
.carousel-dots button:hover { background: rgba(255,255,255,0.8); }
.carousel-dots button.active { width: 26px; background: #fff; }

.carousel-counter { position: absolute; top: 14px; right: 16px; z-index: 3; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(11,30,23,0.5); color: #fff; font-size: 0.78rem; letter-spacing: 0.05em; }

@media (max-width: 768px) {
  .carousel { height: 300px; }
  .carousel-arrow { width: 40px; height: 40px; font-size: 1.5rem; opacity: 1; }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-slide { transition: none; }
  .carousel-progress { display: none; }
}
.media-figure figcaption, .chart-figure figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-main); opacity: 0.82; text-align: center; }

.gallery-grid { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; gap: 1rem; max-width: 1100px; margin: 0 auto; }
.gallery-figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 10px 24px var(--box-shadow); }
.gallery-figure.wide { grid-row: span 2; }
.gallery-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.gallery-figure:hover img { transform: scale(1.05); }
.gallery-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.7rem 0.9rem; font-size: 0.85rem; color: #fff; background: linear-gradient(0deg, rgba(7,16,12,0.82), transparent); }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-figure.wide { grid-row: auto; } .gallery-figure img { height: 220px; } }

.chart-figure { max-width: 880px; margin: 2.5rem auto 0; background: linear-gradient(160deg, #0b1e17, #12281f); border-radius: 16px; padding: 1.5rem; box-shadow: 0 14px 34px var(--box-shadow); }
.chart-figure img { width: 100%; display: block; }
.chart-figure figcaption { color: #e8e0cc; opacity: 0.92; }

.dev-by-label { text-align: center; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; color: var(--text-main); opacity: 0.8; margin: 0 0 1rem; }
.dev-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; background: #ffffff; border-radius: 12px; padding: 1.25rem 1.75rem; margin: 0 auto 1.75rem; max-width: 620px; box-shadow: 0 6px 18px var(--box-shadow); }
.dev-logos img { height: 42px; width: auto; display: block; }
@media (max-width: 620px) { .dev-logos { gap: 1.5rem; } .dev-logos img { height: 32px; } }
.track-title { text-align: center; margin: 2.75rem 0 1.25rem; color: var(--primary); font-size: 1.6rem; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; max-width: 820px; margin: 0 auto; }
.track-card { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 10px 24px var(--box-shadow); background: var(--card-bg); }
.track-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.track-card figcaption { padding: 0.7rem; text-align: center; font-weight: 600; color: var(--primary); }
@media (max-width: 620px) { .track-grid { grid-template-columns: 1fr; } }

.fp-btn.locked { background-color: #6a6a58; opacity: 0.5; cursor: not-allowed; pointer-events: none; display: inline-flex; align-items: center; gap: 0.45rem; }

/* subtle wave texture — About the Developer section only */
#developer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='44'%3E%3Cpath d='M0 32 Q 35 12 70 32 T 140 32' fill='none' stroke='%23d8ceb0' stroke-width='1.1'/%3E%3C/svg%3E"); }
[data-theme="dark"] #developer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='44'%3E%3Cpath d='M0 32 Q 35 12 70 32 T 140 32' fill='none' stroke='%232b3a31' stroke-width='1.1'/%3E%3C/svg%3E"); }
.virtual-tour-wrapper { width: 100%; margin-bottom: 2rem; text-align: center; }
.virtual-tour-container { position: relative; width: 100%; padding-top: 56.25%; background-color: var(--placeholder-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px var(--box-shadow); }
.virtual-tour-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.overlay-reset-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; background-color: var(--primary); color: #ffffff; padding: 1rem 2.5rem; font-size: 1.15rem; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.15); transition: all 0.3s ease; }
.overlay-reset-btn:hover { background-color: var(--accent); transform: translateX(-50%) scale(1.05); box-shadow: 0 12px 35px rgba(0,0,0,0.6); border-color: transparent; }
.brochure-container { text-align: center; margin-top: 3rem; }

.developer-box { background: var(--card-bg); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px var(--box-shadow); text-align: center; max-width: 800px; margin: 0 auto; }
.developer-logo { width: 250px; height: auto; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center; background: transparent; border: none; }

/* Past Projects Grid */
.past-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.project-card { background: var(--placeholder-bg); border-radius: 8px; overflow: hidden; position: relative; height: 160px; box-shadow: 0 4px 15px var(--box-shadow); }
.project-card img { width: 100%; height: 100%; object-fit: cover; }
.project-card span { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(26, 43, 76, 0.85); color: #fff; padding: 0.5rem; font-size: 0.85rem; font-weight: 600; text-align: center; backdrop-filter: blur(4px); }

/* Floor Plan Section */
#floor-plan { position: relative; background: #111; overflow: hidden; }
.floorplan-bg { position: absolute; inset: 0; background: linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.9)), url('REPLACE_WITH_EXTERIOR_BG_LINK') center/cover no-repeat; z-index: 1; }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 1000px; margin: 3rem auto 0; }
.fp-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-card { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 1.25rem; box-shadow: 0 15px 35px rgba(0,0,0,0.4); }
.fp-blur-layer { position: absolute; inset: -15px; background-size: cover; background-position: center; filter: blur(4px) brightness(0.6); }
.fp-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; z-index: 2; font-family: serif; }
.fp-icon { font-size: 2.8rem; margin-bottom: 0.5rem; opacity: 0.9; }
.fp-text { font-size: 1.3rem; font-weight: 400; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.fp-label { color: #ffffff; font-size: 1.15rem; font-weight: 600; margin-bottom: 1.2rem; }
.fp-btn { background-color: #555a47; color: #f1ebd9; border-radius: 50px; padding: 0.75rem 2rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; }
.fp-btn:hover { background-color: #6a7158; color: #ffffff; box-shadow: 0 6px 15px rgba(0,0,0,0.3); transform: translateY(-2px); }
@media (max-width: 768px) { .fp-grid { grid-template-columns: 1fr; max-width: 320px; } }
.developer-logo { width: 280px; height: auto; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center; border: none; background: transparent; } .developer-logo img { max-width: 100%; height: auto; object-fit: contain; }
.developer-desc { margin-top: 1rem; color: var(--text-main); }

.register-form { max-width: 500px; margin: 0 auto; background: var(--card-bg); padding: 2rem; border-radius: 8px; box-shadow: 0 10px 30px var(--box-shadow); }
.form-group { margin-bottom: 1.5rem; text-align: left; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
.form-group input, .form-group select { width: 100%; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background-color: var(--bg-main); color: var(--text-main); transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.1); }
.pdpa-group { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.qual-note { font-size: 0.78rem; color: var(--text-main); opacity: 0.7; margin: 0.25rem 0 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.pdpa-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; line-height: 1.4; color: var(--text-main); font-weight: 400 !important; cursor: pointer; }
.pdpa-label input { width: auto; margin-top: 0.2rem; cursor: pointer; }
.pdpa-label + .pdpa-label { margin-top: 0.75rem; }
.pdpa-label a { color: inherit; text-decoration: underline; }
.agent-contact-block { margin-top: 3rem; text-align: center; border-top: 1px solid var(--border); padding-top: 2rem; }
.agent-contact-block p { font-size: 0.9rem; color: var(--text-main); margin-bottom: 1rem; }
.agent-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.phone-input-wrapper { display: flex; gap: 0.5rem; position: relative; }
.country-dropdown { position: relative; width: 120px; flex-shrink: 0; }
.selected-country { padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-main); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9rem; }
.country-list { position: absolute; top: 100%; left: 0; width: 220px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 15px var(--box-shadow); display: none; z-index: 10; max-height: 200px; overflow-y: auto; }
.country-list.active { display: block; }
#countrySearch { width: 100%; padding: 0.6rem; border: none; border-bottom: 1px solid var(--border); outline: none; }
.country-option { padding: 0.6rem 0.8rem; cursor: pointer; font-size: 0.9rem; }
.country-option:hover { background: var(--bg-alt); }

.section-anchor { display: block; position: relative; top: -88px; visibility: hidden; }

footer.complex-footer { 
    background: var(--card-bg);
    padding: 1.8rem 5% 1.4rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.35; 
}
.footer-shell {
    max-width: 1660px;
    margin: 0 auto;
}
.footer-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2rem;
    align-items: start;
    text-align: left;
}
.footer-agency-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}
.footer-logo-placeholder {
    width: 150px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-dark-mode { display: none; }
[data-theme="dark"] .logo-light-mode { display: none; }
[data-theme="dark"] .logo-dark-mode { display: block; }
.footer-info-text,
.footer-contact-info {
    color: var(--text-main);
    font-size: 0.75rem;
}
.footer-info-text p,
.footer-contact-info p { margin-bottom: 0.18rem; }
.footer-info-text a,
.footer-policy-links a {
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.footer-info-text a:hover,
.footer-policy-links a:hover { color: var(--text-main); }
.footer-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 0.32rem !important;
}
.footer-text {
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--text-main);
    opacity: 0.75;
    margin-bottom: 0.6rem !important;
}
/* "(optional)" next to a field label — visibly lighter than the label itself,
   so the eye reads it as permission to skip rather than another instruction. */
.opt { font-weight: 400; opacity: 0.6; font-size: 0.86em; }
.footer-contact-info { justify-self: end; max-width: 340px; }
.footer-divider {
    height: 1px;
    background: var(--text-main);
    margin: 1rem 0;
}
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.3rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.footer-nav a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
}
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 0.14em; }
.footer-legal { max-width: 1600px; margin: 0 auto; }
.footer-legal > p:first-child { font-size: 0.8rem; color: var(--text-main); margin-bottom: 0.6rem; }
.footer-disclaimer-long {
    font-size: 0.72rem;
    color: var(--text-main);
    line-height: 1.45;
    max-width: 1500px;
    margin: 0 auto 0.9rem;
}
.footer-disclaimer-long p {
    margin-bottom: 0.6rem;
}
.footer-disclaimer-long p:last-child {
    margin-bottom: 0;
}
.footer-policy-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--text-main);
}

.footer-policy-links span { color: #94a3b8; }

.toast-notification { position: fixed; bottom: 100px; left: 20px; background: var(--card-bg); padding: 1rem 2.5rem 1rem 1rem; border-radius: 8px; box-shadow: 0 4px 15px var(--box-shadow); border-left: 5px solid var(--accent); max-width: min(90vw, 340px); opacity: 0; transform: translateY(18px); visibility: hidden; pointer-events: none; transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s; will-change: opacity, transform; z-index: 2500; }
.toast-notification.is-visible { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s; }
.toast-close { position: absolute; top: 6px; right: 8px; width: 1.8rem; height: 1.8rem; border: none; background: transparent; color: var(--accent); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 999px; transition: transform 0.2s ease, background-color 0.2s ease; }
.toast-close:hover { transform: scale(1.08); background-color: rgba(212, 175, 55, 0.12); }
.toast-notification.is-hidden { opacity: 0; transform: translateY(18px); visibility: hidden; pointer-events: none; }

.faq-list { max-width: 840px; margin: 0 auto; display: grid; gap: 1rem; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 24px var(--box-shadow); overflow: hidden; }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform 0.35s ease; }
.faq-item.is-open summary::after { transform: rotate(45deg); }
.faq-item[open] { transition: box-shadow 0.35s ease, transform 0.35s ease; }
.faq-description { margin: 0; padding: 0 1.25rem 0.6rem; color: var(--text-main); font-size: 0.92rem; opacity: 0.85; }
.faq-answer { height: 0; overflow: hidden; transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; transform: translateY(-10px); will-change: height, opacity, transform; }
.faq-item.is-open .faq-answer { opacity: 1; transform: translateY(0); }
.faq-answer > div { padding: 0 1.25rem 1rem; color: var(--text-main); line-height: 1.55; }

.sticky-cta { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(18px); width: min(1100px, calc(100% - 2rem)); z-index: 3000; background: rgba(255,255,255,0.88); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 20px 50px rgba(0,0,0,0.15); border-radius: 18px; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s; will-change: opacity, transform; }
[data-theme="dark"] .sticky-cta { background: rgba(18,18,18,0.9); border-color: rgba(255,255,255,0.12); }
.sticky-cta.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; pointer-events: auto; transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s; }
.sticky-cta strong { color: var(--primary); }
.sticky-cta p { color: var(--text-main); font-size: 0.9rem; }
.sticky-cta-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.sticky-cta-close { position: absolute; top: 8px; right: 10px; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--accent); font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: 999px; transition: transform 0.2s ease, background-color 0.2s ease; }
.sticky-cta-close:hover { transform: scale(1.08); background-color: rgba(212, 175, 55, 0.12); }
.sticky-cta.is-hidden { opacity: 0; transform: translateX(-50%) translateY(18px); visibility: hidden; pointer-events: none; }

@media (max-width: 768px) {
    .sticky-cta { flex-direction: column; align-items: stretch; padding-top: 2rem; }
    .sticky-cta-close { top: 6px; right: 8px; }
    .sticky-cta-actions .btn { width: 100%; text-align: center; }
}

body.is-mobile { padding-bottom: 92px; }
body.is-mobile .header-actions { gap: 0.5rem; }
body.is-mobile header { padding: 0.9rem 4.5%; }
body.is-mobile .logo { font-size: 1.1rem; line-height: 1.1; }
body.is-mobile .header-actions .btn { padding: 0.65rem 0.9rem; font-size: 0.9rem; }
body.is-mobile .hero { min-height: auto; padding: 1.25rem 4.5% 1.5rem; }
body.is-mobile .hero-grid { gap: 0.9rem; }
body.is-mobile .hero-copy,
body.is-mobile .hero-panel { border-radius: 18px; }
body.is-mobile .hero-copy { padding: 1.35rem; }
body.is-mobile .hero-panel { padding: 1.15rem; }
body.is-mobile .hero h1 { font-size: 2rem; }
body.is-mobile .hero-subtext { font-size: 0.98rem; margin-bottom: 1rem; }
body.is-mobile .hero-badges { gap: 0.45rem; }
body.is-mobile .hero-pill,
body.is-mobile .hero-proof span { font-size: 0.76rem; padding: 0.4rem 0.65rem; }
body.is-mobile .timer-badge { font-size: 0.72rem; padding: 0.18rem 0.65rem; }
body.is-mobile .hero-points { gap: 0.65rem; margin: 1rem 0 1.2rem; }
body.is-mobile .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
body.is-mobile .hero-actions .btn { width: 100%; text-align: center; }
body.is-mobile .hero-actions .btn,
body.is-mobile .hero-panel .btn { width: 100%; text-align: center; padding: 0.8rem 1rem; }
body.is-mobile .hero-proof { gap: 0.45rem; margin-top: 1rem; }
body.is-mobile .hero-panel .panel-kicker,
body.is-mobile .hero-panel .panel-title,
body.is-mobile .hero-panel .panel-description,
body.is-mobile .hero-panel .stat-grid,
body.is-mobile .hero-panel .panel-list,
body.is-mobile .hero-panel .hero-note { display: none; }
body.is-mobile .hero-panel { min-height: 0; }
body.is-mobile .hero-panel::before { display: none; }
body.is-mobile .trust-strip-section { padding-top: 1rem; padding-bottom: 1rem; }
body.is-mobile .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
body.is-mobile .trust-item { padding: 0.9rem 0.8rem; border-radius: 14px; }
body.is-mobile .trust-value { font-size: 1.3rem; }
body.is-mobile .trust-label { font-size: 0.9rem; }
body.is-mobile .section { padding: 2.5rem 4.5%; }
body.is-mobile .section-title { font-size: 1.9rem; margin-bottom: 1.4rem; }
body.is-mobile .section-lead { font-size: 0.95rem; margin-bottom: 1.3rem; }
body.is-mobile .attention-grid { grid-template-columns: 1fr; }
body.is-mobile .attention-card { padding: 1.1rem; border-radius: 14px; }
body.is-mobile .attention-card h3 { margin-top: 0.5rem; }
body.is-mobile .pricing-card,
body.is-mobile .developer-box,
body.is-mobile .register-form { padding: 1.15rem; border-radius: 14px; }
body.is-mobile .pricing-table th,
body.is-mobile .pricing-table td,
body.is-mobile .factsheet th,
body.is-mobile .factsheet td { padding: 0.75rem 0.65rem; font-size: 0.9rem; }
body.is-mobile .grid-2 { gap: 1.25rem; }
body.is-mobile .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
body.is-mobile .gallery-img { height: 120px; font-size: 0.9rem; }
body.is-mobile .virtual-tour-container,
body.is-mobile .placeholder-box { height: 210px; }
body.is-mobile .sticky-cta { width: calc(100% - 1rem); bottom: 8px; padding: 0.8rem 0.85rem 0.9rem; border-radius: 16px; }
body.is-mobile .sticky-cta > div:first-of-type { padding-right: 1.5rem; }
body.is-mobile .sticky-cta strong { font-size: 0.95rem; }
body.is-mobile .sticky-cta p { font-size: 0.82rem; }
body.is-mobile .sticky-cta-actions { gap: 0.5rem; }
body.is-mobile .sticky-cta .btn { padding: 0.75rem 0.9rem; font-size: 0.92rem; }
body.is-mobile .sticky-cta-close { top: 6px; right: 6px; }
body.is-mobile .wa-container { right: 12px; left: auto; bottom: 12px; align-items: flex-end; }
body.is-mobile .wa-btn-main { padding: 0.85rem 1rem; font-size: 0.92rem; }
body.is-mobile .wa-btn-sub { padding: 0.72rem 0.95rem; font-size: 0.88rem; }
body.is-mobile .toast-notification { left: 10px; right: 10px; bottom: 92px; max-width: none; }
body.is-mobile .toast-notification p { font-size: 0.82rem !important; }
body.is-mobile .faq-item summary { padding: 0.95rem 1rem; font-size: 0.96rem; }
body.is-mobile .faq-description { padding: 0 1rem 0.5rem; font-size: 0.85rem; }
body.is-mobile .faq-answer > div { padding: 0 1rem 0.9rem; font-size: 0.94rem; }
body.is-mobile .section-anchor { top: -76px; }
body.is-mobile footer.complex-footer { padding: 1.2rem 4.5% 1rem; }
body.is-mobile .footer-top-grid { grid-template-columns: 1fr; gap: 1rem; }
body.is-mobile .footer-agency-info { grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; }
body.is-mobile .footer-logo-placeholder { width: 120px; height: auto; margin-bottom: 0.3rem; }
body.is-mobile .footer-contact-info { justify-self: start; max-width: none; display: flex;justify-content: center; align-items: center;}
body.is-mobile .footer-divider { margin: 0.85rem 0; }
body.is-mobile .footer-nav { gap: 0.9rem 1rem; font-size: 0.74rem; }
body.is-mobile .footer-legal > p:first-child { font-size: 0.74rem; }
body.is-mobile .footer-disclaimer-long { font-size: 0.66rem; line-height: 1.4; }
body.is-mobile .footer-policy-links { font-size: 0.7rem; gap: 0.4rem; }

@media (max-width: 480px) {
    body.is-mobile .hero-actions { grid-template-columns: 1fr; }
    body.is-mobile .hero-proof { display: none; }
    body.is-mobile .trust-strip { grid-template-columns: 1fr; }
    body.is-mobile .gallery-grid { grid-template-columns: 1fr; }
    body.is-mobile .sticky-cta { width: calc(100% - 0.75rem); }
    body.is-mobile .sticky-cta-actions .btn { font-size: 0.88rem; }
    body.is-mobile .wa-container { right: 10px; bottom: 10px; }
    body.is-mobile .wa-options { gap: 8px; }
    body.is-mobile .footer-agency-info { grid-template-columns: 1fr; }
    body.is-mobile .footer-logo-placeholder { margin-bottom: 0.15rem; }
    body.is-mobile .footer-nav { gap: 0.7rem 0.85rem; }
}

.wa-container { position: fixed; bottom: 20px; right: 20px; z-index: 2400; display: flex; flex-direction: column; align-items: flex-end; }
.wa-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.wa-options.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wa-btn-sub { background-color: #ffffff; color: #25D366; padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 2px solid #25D366; transition: all 0.3s; text-align: center; }
.wa-btn-sub:hover { background-color: #f0fdf4; transform: scale(1.05); }
.wa-btn-main { background-color: #25D366; color: white; padding: 1rem 1.5rem; border-radius: 50px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s; }
.wa-btn-main:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); }

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Floor Plan Section */
#floor-plan { position: relative; background: #1a1e24; overflow: hidden; padding: 5rem 5%; text-align: center; }
.floorplan-bg { position: absolute; inset: 0; background: linear-gradient(rgba(20, 25, 35, 0.85), rgba(20, 25, 35, 0.95)), url('images/Lentor_Gardens_Exterior_BG.jpg') center/cover no-repeat; z-index: 1; }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 1100px; margin: 3rem auto 0; }
.fp-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-card { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; position: relative; background: rgba(120, 110, 100, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1.25rem; box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
.fp-blur-layer { position: absolute; inset: -10px; }
.fp-blur-layer img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(0.6); opacity: 0.5; }
.fp-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; z-index: 2; }
.fp-icon { width: 50px; height: auto; margin-bottom: 1rem; opacity: 0.9; }
.fp-text { font-size: 1.6rem; font-weight: 400; font-family: 'Times New Roman', Times, serif; letter-spacing: 0.03em; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.fp-label { color: var(--text-main); font-size: 1.2rem; font-weight: 600; margin-bottom: 1.2rem; z-index: 2; position: relative; }
.fp-btn { background-color: #6a6a58; color: #f1ebd9; border-radius: 50px; padding: 0.8rem 2.2rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; text-decoration: none; display: inline-block; transition: all 0.3s; }
.fp-btn:hover { background-color: #7b7b66; color: #ffffff; transform: translateY(-2px); }

/* Developer Section */
.developer-dark-section { background-color: #1a1a1a; padding: 5rem 5%; }
.developer-box-dark { background: #222222; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 8px; padding: 2rem; max-width: 800px; margin: 0 auto; text-align: center; }
.developer-logo { width: 250px; height: auto; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px; border-radius: 4px; border: none; }
.developer-desc { margin-top: 1rem; }
.past-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 3rem; max-width: 1000px; margin-left: auto; margin-right: auto; }
.project-card { background: var(--placeholder-bg); border-radius: 8px; overflow: hidden; position: relative; height: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid #444; }
.project-card img { width: 100%; height: 100%; object-fit: cover; }
.project-card span { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 0.6rem; font-size: 0.85rem; font-weight: 500; text-align: center; backdrop-filter: blur(4px); }

@media (max-width: 768px) { 
    .fp-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; } 
    .past-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile Optimization Fixes */
@media (max-width: 768px) {
    /* Prevent iOS Safari Auto-Zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        font-size: 16px !important;
    }
    
    /* Improve Tap Targets */
    .btn, button, a {
        min-height: 44px;
    }
    
    /* Manage Sticky Overlap */
    .sticky-cta {
        bottom: 85px; /* Pushes CTA above the WhatsApp widget */
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .sticky-cta-actions {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .wa-container {
        bottom: 15px;
        right: 15px;
        transform: scale(0.9); /* Slightly reduces widget size to save screen space */
    }
}
/* 1. Fix Dark Mode Sync for Sections and FAQs */
.section { 
    background-color: var(--bg-main) !important; 
    color: var(--text-main) !important; 
}
.section-light { 
    background-color: var(--bg-alt) !important; 
    color: var(--text-main) !important; 
}

.faq-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
}
.faq-item summary, .faq-answer, .faq-description, .faq-item div {
    color: var(--text-main) !important;
}

/* 2. Fix Mobile Horizontal Overflow for Factsheet */
@media (max-width: 768px) {
    /* Each row used to be its own bordered, shadowed card with a 1rem gap, so a
       nine-row factsheet read as nine unrelated boxes. The card now wraps the whole
       table and rows are separated by a hairline. Desktop layout is untouched. */
    .factsheet {
        display: block;
        width: 100%;
        background-color: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px var(--box-shadow);
    }
    .factsheet tbody {
        display: block;
        width: 100%;
    }
    .factsheet tr {
        display: flex;
        flex-direction: column;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .factsheet tr + tr { border-top: 1px solid var(--border); }
    .factsheet th {
        width: 100%;
        padding: 0.7rem 1rem;
        text-align: left;
        border-bottom: none;
    }
    .factsheet td {
        width: 100%;
        padding: 0.8rem 1rem;
        border-bottom: none !important;
    }
}
/* Universal Table Mobile Fix for Unit Mix & Factsheet */
@media (max-width: 768px) {
    .factsheet, table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        background-color: var(--card-bg) !important;
        border-radius: 8px;
    }
    
    .factsheet th, .factsheet td, table th, table td {
        min-width: 130px; /* Forces table to scroll instead of breaking layout */
        white-space: normal;
    }
    
    /* Ensure section containers don't restrict the table */
    .section-content, .container {
        max-width: 100%;
        overflow: hidden;
    }
}
/* Full-Screen Image Lightbox */
.zoomable-image { cursor: pointer; transition: opacity 0.3s ease; }
.zoomable-image:hover { opacity: 0.85; }
.image-modal { display: none; position: fixed; z-index: 4000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.92); opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(8px); }
.image-modal.is-visible { display: flex; align-items: center; justify-content: center; opacity: 1; }
.modal-content { margin: auto; display: block; max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 4px; animation: fadeIn 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-close { position: absolute; top: 15px; right: 30px; color: #ffffff; font-size: 50px; font-weight: 300; cursor: pointer; transition: color 0.3s; z-index: 4001; line-height: 1; }
.modal-close:hover { color: var(--accent); }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
/* Mobile Fix for 360 Virtual Tour Button */
@media (max-width: 768px) {
    .overlay-reset-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
        bottom: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
    animation: pulse 2s infinite;
    overflow: hidden;
    padding: 0 15px; /* Ensures the icon stays centered in the 60px circle */
    box-sizing: border-box;
}

.whatsapp-float svg {
    flex-shrink: 0;
}

.whatsapp-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    font-size: 16px;
    font-weight: 600;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}

/* Hover (Desktop) & Expanded (Mobile) States */
@media (hover: hover) {
    .whatsapp-float:hover {
        width: 190px;
        background-color: #128C7E;
        animation: none;
        border-radius: 30px;
    }
    .whatsapp-float:hover .whatsapp-text {
        max-width: 150px;
        opacity: 1;
        margin-left: 10px;
    }
}

.whatsapp-float.is-expanded {
    width: 190px !important;
    background-color: #128C7E !important;
    animation: none !important;
    border-radius: 30px !important;
}

.whatsapp-float.is-expanded .whatsapp-text {
    max-width: 150px !important;
    opacity: 1 !important;
    margin-left: 10px !important;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        padding: 0 12.5px;
    }
    .whatsapp-float svg {
        width: 25px;
        height: 25px;
    }
    .whatsapp-float.is-expanded {
        width: 180px !important;
    }
}