/* ═══════════════════════════════════════════════════════
   CTB Realty — Project Landing (Singapore Luxury Property)
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --pl-brand: #0f141e;
  --pl-brand-hover: #1a2233;
  --pl-accent: #C5A880; /* Champagne Gold */
  --pl-surface: #ffffff;
  --pl-surface-alt: #f8f7f5;
  --pl-border: rgba(0,0,0,0.06);
  --pl-ink: #111111;
  --pl-ink-muted: #555555;
  --pl-ink-faint: #999999;
  --pl-serif: 'Playfair Display', serif;
  --pl-sans: 'Inter', sans-serif;
  --pl-radius: 2px; /* Sharp luxury edges */
}

[data-theme="dark"] {
  --pl-brand: #ffffff;
  --pl-brand-hover: #eeeeee;
  --pl-accent: #D4AF37;
  --pl-surface: #0a0a0a;
  --pl-surface-alt: #111111;
  --pl-border: rgba(255,255,255,0.08);
  --pl-ink: #ffffff;
  --pl-ink-muted: #a0a0a0;
  --pl-ink-faint: #666666;
}

body { font-family:var(--pl-sans); background:var(--pl-surface); color:var(--pl-ink); margin:0; -webkit-font-smoothing:antialiased; font-weight:300; }
* { box-sizing:border-box; }

svg[stroke="#635bff"] { stroke: var(--pl-accent) !important; }
svg[fill="#635bff"] { fill: var(--pl-accent) !important; }
.pl-status { border: 1px solid transparent; }
.pl-status.available { background:rgba(197,168,128,0.1); color:var(--pl-accent); border-color:rgba(197,168,128,0.3); }
.pl-status.hot { background:rgba(217,119,6,0.05); color:#d97706; border-color:rgba(217,119,6,0.2); }
.pl-status.limited { background:rgba(239,68,68,0.05); color:#ef4444; border-color:rgba(239,68,68,0.2); }

/* ── Sticky Nav ── */
.pl-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,0.98); border-bottom:1px solid var(--pl-border); padding:0 32px;
  transform:translateY(-100%); transition:transform 0.4s ease;
}
.pl-nav.visible { transform:translateY(0); }
[data-theme="dark"] .pl-nav { background:rgba(10,10,10,0.98); }
.pl-nav-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:70px; }
.pl-nav-brand { font-family:var(--pl-serif); font-weight:700; font-size:20px; color:var(--pl-ink); text-decoration:none; letter-spacing:0.02em; }
.pl-nav-brand span { color:var(--pl-accent); }
.pl-nav-links { display:flex; gap:24px; }
.pl-nav-links a { font-size:11px; font-weight:500; color:var(--pl-ink-muted); text-decoration:none; text-transform:uppercase; letter-spacing:0.1em; transition:color 0.3s; }
.pl-nav-links a:hover { color:var(--pl-accent); }
.pl-nav-cta {
  padding:12px 24px; background:var(--pl-brand); color:var(--pl-surface); border-radius:var(--pl-radius);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; text-decoration:none; transition:background 0.3s; border:1px solid var(--pl-brand);
}
.pl-nav-cta:hover { background:transparent; color:var(--pl-brand); }
[data-theme="dark"] .pl-nav-cta:hover { background:transparent; color:var(--pl-surface); border-color:var(--pl-surface); }

/* ── Hero ── */
.pl-hero {
  position:relative; min-height:85vh; display:flex; flex-direction:column; align-items:center;
  background-color:#0f141e; overflow:hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pl-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
.pl-hero-content { position:relative; z-index:2; text-align:center; max-width:1000px; width:100%; padding:20vh 32px 10vh; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pl-tag { display:inline-block; color:var(--pl-accent); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.3em; margin-bottom:24px; border-bottom:1px solid var(--pl-accent); padding-bottom:6px; }
.pl-title { font-family:var(--pl-serif); font-size:clamp(52px,8vw,100px); font-weight:400; color:#fff; line-height:1.1; margin:0 0 24px; text-shadow:0 10px 30px rgba(0,0,0,0.5); }
.pl-subtitle { font-size:17px; color:rgba(255,255,255,0.7); line-height:1.8; margin:0 auto 48px; max-width:600px; font-weight:300; }
.pl-hero-stats { display:flex; gap:60px; justify-content:center; }
.pl-stat { display:flex; flex-direction:column; gap:8px; }
.pl-stat-label { font-size:10px; font-weight:500; color:var(--pl-accent); text-transform:uppercase; letter-spacing:0.15em; }
.pl-stat-val { font-family:var(--pl-serif); font-size:24px; color:#fff; }

/* Floating Info Strip */
.pl-info-strip {
  background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border:1px solid rgba(0,0,0,0.05); padding:40px 0;
  position:relative; z-index:10; max-width:1200px; margin:-50px auto 50px; border-radius:var(--pl-radius);
  box-shadow:0 30px 60px rgba(0,0,0,0.08);
}
[data-theme="dark"] .pl-info-strip { background:rgba(20,20,20,0.95); border:1px solid rgba(255,255,255,0.05); }
.pl-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; padding:0 32px; }
.pl-info-item { display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--pl-border); }
.pl-info-item:last-child { border-right:none; }
.pl-info-label { font-size:10px; font-weight:500; color:var(--pl-ink-muted); text-transform:uppercase; letter-spacing:0.2em; }
.pl-info-val { font-family:var(--pl-serif); font-size:22px; color:var(--pl-brand); }
[data-theme="dark"] .pl-info-val { color:var(--pl-accent); }

/* ── Sections ── */
.pl-section { padding:100px 32px; max-width:1200px; margin:0 auto; background:transparent; position:relative; z-index:5; }
.pl-section-alt { background:var(--pl-surface-alt); max-width:none; padding-left:calc((100vw - 1200px)/2 + 32px); padding-right:calc((100vw - 1200px)/2 + 32px); position:relative; z-index:5; }
.pl-section-title { font-family:var(--pl-serif); font-size:42px; font-weight:400; color:var(--pl-ink); margin:0 0 12px; }
.pl-section-title::after { content:""; display:block; width:60px; height:2px; background:var(--pl-accent); margin-top:24px; }
.pl-section-sub { color:var(--pl-ink-muted); font-size:15px; margin:32px 0 48px; max-width:600px; line-height:1.8; }

/* ── Project Details ── */
.pl-details-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:48px; border-top:1px solid var(--pl-border); border-left:1px solid var(--pl-border); }
.pl-detail-card { background:transparent; border-right:1px solid var(--pl-border); border-bottom:1px solid var(--pl-border); padding:40px 32px; text-align:center; transition:background 0.3s; }
.pl-detail-card:hover { background:var(--pl-surface-alt); }
.pl-detail-icon { margin-bottom:20px; }
.pl-detail-label { font-size:10px; font-weight:500; color:var(--pl-ink-muted); text-transform:uppercase; letter-spacing:0.15em; margin-bottom:8px; }
.pl-detail-val { font-family:var(--pl-serif); font-size:20px; color:var(--pl-ink); }
.pl-description { font-size:15px; color:var(--pl-ink-muted); line-height:2; max-width:800px; }

/* ── Lifestyle Gallery ── */
.pl-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pl-gallery-item {
  position:relative; aspect-ratio:3/4; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding:32px; cursor:pointer; background-size:cover; background-position:center;
  border-radius:var(--pl-radius);
}
.pl-gallery-item::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%); transition:opacity 0.5s; }
.pl-gallery-item:hover::before { opacity:0.6; }
.pl-gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease; }
.pl-gallery-item:hover img { transform:scale(1.05); }
.pl-gallery-item span { position:relative; z-index:2; font-family:var(--pl-serif); font-size:22px; color:#fff; font-weight:400; text-align:center; letter-spacing:0.02em; }

/* ── Form Card (Minimalist) ── */
.pl-form-card { background:transparent; padding:0; width:100%; max-width:440px; flex-shrink:0; color:var(--pl-ink); }
.pl-form-title { font-family:var(--pl-serif); font-size:32px; font-weight:400; margin:0 0 8px; }
.pl-form-sub { font-size:14px; color:var(--pl-ink-muted); margin:0 0 32px; line-height:1.6; }
.pl-field { margin-bottom:24px; position:relative; }
.pl-label { display:block; font-size:10px; font-weight:600; color:var(--pl-ink-muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.pl-field input, .pl-field textarea, .pl-field select {
  width:100%; padding:12px 0; border:none; border-bottom:1px solid var(--pl-border); border-radius:0;
  font-size:15px; font-family:inherit; color:var(--pl-ink); background:transparent;
  outline:none; transition:border-color 0.3s;
}
.pl-field input:focus, .pl-field textarea:focus, .pl-field select:focus { border-bottom-color:var(--pl-accent); }
.pl-field-checkbox { display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; cursor:pointer; font-size:12px; color:var(--pl-ink-muted); line-height:1.4; }
.pl-field-checkbox input { margin-top:2px; cursor:pointer; }
.pl-field-checkbox a { color:var(--pl-accent); text-decoration:none; }
.pl-btn-primary { width:100%; padding:18px; border:1px solid var(--pl-brand); background:var(--pl-brand); color:var(--pl-surface); font-size:11px; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:0.2em; margin-top:16px; border-radius:var(--pl-radius); }
.pl-btn-primary:hover { background:transparent; color:var(--pl-brand); }
[data-theme="dark"] .pl-btn-primary:hover { border-color:var(--pl-surface); color:var(--pl-surface); }
.pl-btn-outline-sm { padding:12px 24px; border:1px solid var(--pl-border); background:transparent; color:var(--pl-ink); font-size:10px; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:0.15em; border-radius:var(--pl-radius); }
.pl-btn-outline-sm:hover { border-color:var(--pl-accent); color:var(--pl-accent); }

/* ── Site Plan & Maps ── */
.pl-siteplan-wrap { margin-top:24px; }
.pl-siteplan, .pl-location-map { width:100%; max-width:800px; background:var(--pl-surface); border:1px solid var(--pl-border); padding:8px; border-radius:var(--pl-radius); }
.pl-siteplan img, .pl-location-map img { width:100%; height:auto; display:block; filter:grayscale(20%) contrast(110%); }

/* ── Location Grid ── */
.pl-location-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:center; }
.pl-location-list h3 { font-family:var(--pl-serif); font-size:22px; font-weight:400; margin:0 0 24px; }
.pl-amenity { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--pl-border); font-size:14px; color:var(--pl-ink); }
.pl-amenity-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--pl-accent); }

/* ── Units Table ── */
.pl-units-table-wrap { overflow-x:auto; }
.pl-units-table { width:100%; border-collapse:collapse; font-size:14px; }
.pl-units-table th { text-align:left; padding:20px 0; color:var(--pl-ink-muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; border-bottom:1px solid var(--pl-ink); }
.pl-units-table td { padding:24px 0; border-bottom:1px solid var(--pl-border); color:var(--pl-ink); }
.pl-units-table tr:hover td { color:var(--pl-accent); }

/* ── Floorplans ── */
.pl-floorplan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.pl-floorplan-card { background:transparent; text-align:center; }
.pl-fp-img { width:100%; background:var(--pl-surface); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; margin-bottom:24px; border:1px solid var(--pl-border); padding:20px; transition:border-color 0.3s; }
.pl-floorplan-card:hover .pl-fp-img { border-color:var(--pl-accent); }
.pl-fp-img img { width:100%; height:100%; object-fit:contain; opacity:0.8; }
.pl-fp-name { font-family:var(--pl-serif); font-size:18px; margin-bottom:8px; font-weight:400; }
.pl-fp-size { font-size:12px; color:var(--pl-ink-muted); margin-bottom:24px; letter-spacing:0.05em; }

/* ── FAQ ── */
.pl-faq-list { display:flex; flex-direction:column; max-width:800px; border-top:1px solid var(--pl-border); }
.pl-faq-item { border-bottom:1px solid var(--pl-border); background:transparent; }
.pl-faq-q { padding:32px 0; font-family:var(--pl-serif); font-size:20px; color:var(--pl-ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.pl-faq-chevron { color:var(--pl-accent); transition:transform 0.4s ease; }
.pl-faq-item.open .pl-faq-chevron { transform:rotate(180deg); }
.pl-faq-a { max-height:0; overflow:hidden; padding:0; font-size:15px; color:var(--pl-ink-muted); line-height:1.8; transition:max-height 0.5s ease,padding 0.5s; }
.pl-faq-item.open .pl-faq-a { max-height:400px; padding:0 0 32px; }

/* ── Contact ── */
.pl-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.pl-contact-info h3 { font-family:var(--pl-serif); font-size:28px; font-weight:400; margin:0 0 16px; }
.pl-contact-info p { font-size:15px; color:var(--pl-ink-muted); margin:0 0 32px; line-height:1.8; max-width:400px; }
.pl-contact-detail { display:flex; align-items:center; gap:16px; margin-bottom:24px; font-size:14px; letter-spacing:0.05em; }

/* ── Footer ── */
.pl-footer { text-align:center; padding:60px 32px; background:var(--pl-brand); color:var(--pl-surface); }
.pl-footer p { font-size:11px; opacity:1.0; margin:0 0 8px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.8); }
.pl-footer a { color:var(--pl-accent); text-decoration:none; margin:0 10px; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; }

@media (max-width:960px) {
  .pl-hero-content { padding:15vh 24px 8vh; }
  .pl-title { font-size:42px; }
  .pl-info-strip { margin:0 24px 32px; border-radius:0; padding:32px 0; }
  .pl-info-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .pl-info-item:nth-child(2) { border-right:none; }
  .pl-details-grid { grid-template-columns:1fr; border:none; }
  .pl-detail-card { border:1px solid var(--pl-border); margin-bottom:16px; }
  .pl-gallery { grid-template-columns: repeat(2,1fr); }
  .pl-location-grid { grid-template-columns:1fr; }
  .pl-floorplan-grid { grid-template-columns: repeat(2,1fr); }
  .pl-contact-grid { grid-template-columns:1fr; }
  .pl-nav-links { display:none; }
}
@media (max-width: 480px) {
  .pl-section { padding: 48px 16px; }
  .pl-section-title { font-size: 22px; }
  .pl-gallery { grid-template-columns:1fr; }
  .pl-floorplan-grid { grid-template-columns:1fr; }
  .pl-details-grid { grid-template-columns:1fr; }
  .pl-hero-content { padding: 80px 16px 0; }
  .pl-info-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .pl-sticky-bar { flex-direction: column; gap: 10px; padding: 12px 16px; }
  .pl-sticky-actions { width: 100%; }
  .pl-sticky-actions .pl-btn-primary, .pl-sticky-actions .pl-btn-wa { flex: 1; }
}