/* ============================================
   SUBH SANKALP — Design Tokens
   ============================================ */
:root {
  /* Colors */
  --navy: #0F2147;
  --navy-deep: #081429;
  --royal: #1B3A6B;
  --gold: #C9A227;
  --gold-soft: #DCC178;
  --cream: #FAF9F6;
  --cream-warm: #F3F0E8;
  --charcoal: #2B2B2B;
  --slate: #6B7280;
  --slate-light: #9CA3AF;
  --white: #FFFFFF;
  --border-hairline: rgba(15, 33, 71, 0.12);

  /* Type */
  --font-display: "Ubuntu", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-body: "Ubuntu", "Plus Jakarta Sans", -apple-system, sans-serif;

  /* Layout */
  --container-max: 1280px;
  --section-pad: 120px;
  --section-pad-mobile: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Lenis smooth-scroll integration */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.section-title {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 20px;
}

.section-lead {
  font-size: 17px;
  color: var(--slate);
  max-width: 620px;
  line-height: 1.7;
}

.section-head {
  margin-bottom: 56px;
}

.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-head.center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover { background: var(--navy-deep); }

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: var(--gold-soft); }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

/* ============================================
   Header / Navigation
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  padding: 28px 0;
  transition: all 0.35s ease;
}

.site-header.scrolled {
  background: rgba(255,255,255,0.98);
  backdrop-filter: none;
  padding: 16px 0;
  box-shadow: 0 1px 0 var(--border-hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
  transition: color 0.35s ease;
}

.logo span { color: var(--gold); }

.site-header.scrolled .logo { color: var(--navy); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
  transition: color 0.35s ease;
}

.site-header.scrolled .nav-links a { color: var(--charcoal); }

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  margin-left: 8px;
}

.nav-overlay { display: none; } /* shown only on mobile via media query */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1100;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--white);
  transition: all 0.3s ease;
}
.site-header.scrolled .nav-toggle span { background: var(--navy); }

@media (max-width: 968px) {
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 78%;
    max-width: 340px;
    background: var(--navy-deep);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 1060;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: var(--white); font-size: 18px; }
  /* Visual dim — pointer-events:none means it NEVER blocks clicks */
  .nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(4,8,20,0.55);
    z-index: 1049;
    pointer-events: none;
  }
  body.nav-open .nav-overlay { display: block; }
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: flex; }
  .nav-cta { margin-left: 0; margin-top: 12px; }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .logo { color: var(--white); margin-bottom: 16px; display: inline-block; }
.footer-brand p { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.55); max-width: 320px; }

.footer-col h4 {
  color: var(--white);
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-col a, .footer-col li {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  transition: color 0.25s ease;
  list-style: none;
}
.footer-col a:hover { color: var(--gold-soft); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.social-row { display: flex; gap: 14px; }
.social-row a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.25s ease;
}
.social-row a:hover { border-color: var(--gold); background: rgba(201,162,39,0.12); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* ============================================
   Hero (generic, reused per page with modifiers)
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--royal) 100%);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 140px, rgba(201,162,39,0.05) 140px 142px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 120px;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.08;
  max-width: 880px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-soft);
}

.hero-sub {
  color: rgba(255,255,255,0.72);
  font-size: 18px;
  max-width: 560px;
  margin: 24px 0 40px;
  line-height: 1.7;
}

.hero-cta-row { display: flex; gap: 18px; flex-wrap: wrap; }

.hero-stats {
  position: relative;
  z-index: 2;
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 40px;
}

.stat-block { padding-right: 20px; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--gold-soft);
  font-weight: 700;
}
.stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ============================================
   Page Header (for sub-pages, smaller than home hero)
   ============================================ */
.page-header {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--royal) 100%);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 140px, rgba(201,162,39,0.05) 140px 142px);
}
.page-header-content { position: relative; z-index: 2; padding-top: 100px; }
.page-header h1 { color: var(--white); font-size: clamp(36px, 5vw, 60px); }
.breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--gold-soft); }
.page-header-lead {
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.7;
}

/* ============================================
   Generic Section
   ============================================ */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--cream-warm); }
.section-navy { background: var(--navy-deep); color: rgba(255,255,255,0.8); }
.section-navy h2 { color: var(--white); }

@media (max-width: 768px) {
  .section { padding: var(--section-pad-mobile) 0; }
}

/* ============================================
   Portfolio Strip (Signature Element)
   ============================================ */
.portfolio-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}

.portfolio-card {
  background: var(--white);
  padding: 48px 40px;
  position: relative;
  transition: background 0.3s ease;
}

.portfolio-card:hover { background: var(--cream-warm); }

.portfolio-card .pf-index {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  display: block;
}

.portfolio-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.portfolio-card p {
  font-size: 14px;
  color: var(--slate);
  margin-bottom: 28px;
  line-height: 1.7;
}

.portfolio-card .pf-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--slate-light);
  border-top: 1px solid var(--border-hairline);
  padding-top: 18px;
  margin-bottom: 18px;
}

.portfolio-card .pf-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.portfolio-card .pf-link::after { content: "→"; transition: transform 0.25s ease; }
.portfolio-card:hover .pf-link::after { transform: translateX(4px); }

@media (max-width: 900px) {
  .portfolio-strip { grid-template-columns: 1fr; }
}

/* ============================================
   Cards Grid (generic, projects/values/team)
   ============================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.info-card {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  padding: 36px 28px;
}
.info-card .icon-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 22px;
  border: 1px solid var(--border-hairline);
}
.info-card h3 { font-size: 19px; margin-bottom: 10px; }
.info-card p { font-size: 14px; color: var(--slate); line-height: 1.7; }

/* ============================================
   Image placeholder block (no external images used)
   ============================================ */
.img-block {
  background: linear-gradient(135deg, var(--cream-warm) 0%, #E8E2D4 100%);
  border: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-light);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.img-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(201,162,39,0.08) 49%, rgba(201,162,39,0.08) 51%, transparent 52%);
}
.img-block span { position: relative; z-index: 1; background: rgba(255,255,255,0.7); padding: 6px 14px; }

/* ============================================
   Project Detail Page Specific
   ============================================ */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.spec-table tr { border-bottom: 1px solid var(--border-hairline); }
.spec-table td { padding: 16px 0; font-size: 15px; }
.spec-table td:first-child { color: var(--slate); width: 40%; }
.spec-table td:last-child { font-weight: 600; color: var(--navy); }

.phase-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-hairline);
}
.phase-tab {
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--slate);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.25s ease;
}
.phase-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.phase-panel { display: none; }
.phase-panel.active { display: block; animation: fadeIn 0.4s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.amenity-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--charcoal);
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border-hairline);
}
.amenity-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

@media (max-width: 600px) { .amenity-list { grid-template-columns: 1fr; } }

/* ============================================
   Gallery
   ============================================ */
.gallery-filters { display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.gallery-filter-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--border-hairline);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.25s ease;
}
.gallery-filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-item.wide { grid-column: span 2; }
}

/* ============================================
   Contact Page
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-form {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  padding: 44px;
}

.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--border-hairline);
  background: var(--cream-warm);
  color: var(--charcoal);
  transition: border-color 0.25s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 110px; }

.contact-info-block { margin-bottom: 36px; }
.contact-info-block h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.contact-info-block p, .contact-info-block a { font-size: 16px; color: var(--charcoal); display: block; }

.map-embed {
  margin-top: 32px;
  border: 1px solid var(--border-hairline);
  height: 320px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   Misc utilities
   ============================================ */
.text-center { text-align: center; }
.mt-section { margin-top: var(--section-pad); }
.divider-gold {
  width: 60px; height: 2px; background: var(--gold);
  margin: 24px 0;
}
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* ============================================
   3D Solar System — Location Experience
   ============================================ */
.solar-section {
  position: relative;
  background: radial-gradient(circle at 50% 40%, #102046 0%, #060912 60%, #02030a 100%);
  overflow: hidden;
  padding: 100px 0;
}
.solar-section .eyebrow { color: var(--gold-soft); justify-content: center; }
.solar-section .eyebrow::before { background: var(--gold-soft); }
.solar-section h2 { color: #fff; }
.solar-section .section-lead { color: rgba(255,255,255,0.62); }

.solar-stage {
  position: relative;
  margin-top: 44px;
  border: 1px solid rgba(120,150,220,0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 120px rgba(40,70,140,0.25);
}
#solar-canvas {
  width: 100%;
  height: 72vh;
  min-height: 460px;
  display: block;
  cursor: grab;
}
#solar-canvas:active { cursor: grabbing; }

.solar-hint {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 3;
}

/* Fallback if WebGL/Three.js unavailable */
.solar-fallback {
  background: radial-gradient(circle at 50% 40%, #16284f, #060912);
}
.solar-fallback::after {
  content: "Your browser could not load the 3D view — scroll down for our location details.";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  color: rgba(255,255,255,0.6); font-size: 15px;
}

/* Location reveal overlay */
.solar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(4,8,20,0.35), rgba(2,3,10,0.78));
  backdrop-filter: blur(2px);
  transition: opacity 0.6s ease, visibility 0.6s ease;
  z-index: 4;
}
.solar-overlay.show { opacity: 1; visibility: visible; }

.solar-card {
  width: 100%;
  max-width: 560px;
  background: rgba(15, 25, 50, 0.72);
  border: 1px solid rgba(140,170,240,0.25);
  border-radius: 16px;
  padding: 34px;
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.solar-overlay.show .solar-card { transform: translateY(0) scale(1); }
.solar-card h3 {
  color: #fff; font-size: 26px; margin-bottom: 6px;
}
.solar-card .solar-coords {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 20px;
}
.solar-loc-list { display: grid; gap: 12px; margin-bottom: 24px; }
.solar-loc {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.solar-loc:hover { background: rgba(201,162,39,0.12); border-color: rgba(201,162,39,0.4); }
.solar-loc .pin { color: var(--gold-soft); font-size: 18px; line-height: 1.4; }
.solar-loc strong { display: block; font-size: 15px; color: #fff; font-family: var(--font-body); font-weight: 600; }
.solar-loc span { font-size: 13px; color: rgba(255,255,255,0.6); }
.solar-card-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.solar-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 13px 24px; border-radius: 3px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s ease;
}
.solar-back-btn:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

@media (max-width: 768px) {
  #solar-canvas { height: 60vh; min-height: 380px; }
  .solar-card { padding: 26px; }
}

/* ============================================
   MODERN UPGRADE — handhold-inspired polish
   (pill buttons · glowing orbs · glass cards ·
    process flow · testimonials · FAQ)
   ============================================ */

/* Pill-shaped buttons with soft glow */
.btn {
  border-radius: 100px;
  padding: 15px 34px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 15px;
}
.btn-gold {
  box-shadow: 0 10px 30px rgba(201,162,39,0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201,162,39,0.5); }
.btn-primary:hover, .btn-outline:hover, .btn-outline-light:hover { transform: translateY(-2px); }

/* Glowing gradient orbs on dark sections */
.hero, .page-header, .section-navy, .solar-section { position: relative; }
.hero::after, .page-header::after, .section-navy::after {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  top: -180px; right: -160px;
  background: radial-gradient(circle, rgba(201,162,39,0.22) 0%, rgba(201,162,39,0) 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.hero::after { top: auto; bottom: -220px; left: -160px; right: auto;
  background: radial-gradient(circle, rgba(80,120,220,0.28) 0%, rgba(80,120,220,0) 65%); }

/* Gradient shimmer on hero italic word */
.hero h1 em {
  background: linear-gradient(100deg, #F4D98B 0%, #C9A227 45%, #F8EBC0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards: lift + glow on hover */
.portfolio-card, .info-card {
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}
.portfolio-card:hover, .info-card:hover {
  box-shadow: 0 24px 60px rgba(15,33,71,0.14);
}
.portfolio-strip { border-radius: 18px; overflow: hidden; }
.info-card .icon-badge {
  background: linear-gradient(140deg, #FBF6E6, #F3E8C4);
  box-shadow: 0 6px 18px rgba(201,162,39,0.18);
}

.section-navy .container { position: relative; z-index: 1; }

/* ---- Process / 3-step flow ---- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.step-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: 18px;
  padding: 40px 32px 34px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(15,33,71,0.12); }
.step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--gold-soft));
  color: var(--navy-deep);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(201,162,39,0.32);
}
.step-card h3 { font-size: 20px; margin-bottom: 10px; }
.step-card p { font-size: 14.5px; color: var(--slate); line-height: 1.7; }
@media (max-width: 900px) { .steps-row { grid-template-columns: 1fr; } }

/* ---- Testimonials ---- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.testi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 34px 30px;
  backdrop-filter: blur(6px);
}
.testi-card .stars { color: var(--gold-soft); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.testi-card p { color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.75; margin-bottom: 22px; }
.testi-who { display: flex; align-items: center; gap: 14px; }
.testi-ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--royal));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-family: var(--font-display);
}
.testi-who strong { display: block; color: #fff; font-size: 15px; font-family: var(--font-body); }
.testi-who span { color: rgba(255,255,255,0.5); font-size: 13px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  margin-bottom: 14px;
  background: var(--white);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.faq-item.open { box-shadow: 0 14px 40px rgba(15,33,71,0.10); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy);
}
.faq-q .faq-ico {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.faq-item.open .faq-ico { transform: rotate(45deg); background: var(--gold); color: #fff; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 26px;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.75;
}
.faq-item.open .faq-a { max-height: 320px; padding: 0 26px 24px; }

/* ---- Mobile polish / responsiveness ---- */
@media (max-width: 768px) {
  /* shrink glow orbs so they don't overflow / wash out small screens */
  .hero::after, .page-header::after, .section-navy::after {
    width: 300px; height: 300px; filter: blur(50px);
  }
  .hero-content { padding-top: 124px; }
  .hero h1 { font-size: clamp(32px, 9vw, 46px); line-height: 1.12; }
  .hero-sub { font-size: 16px; margin: 20px 0 32px; }
  .hero-cta-row { gap: 12px; }
  .hero-cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .hero-stats { margin-top: 54px; gap: 26px 16px; padding-top: 28px; }
  .stat-num { font-size: 30px; }

  .solar-section { padding: 56px 0; }
  .solar-stage { border-radius: 12px; }
  .solar-hint { font-size: 10.5px; letter-spacing: 0.08em; }

  .section-title { font-size: clamp(26px, 7.5vw, 36px); }
  .section-head { margin-bottom: 36px; }
  .section-head.center .section-lead { font-size: 15.5px; }

  .step-card { padding: 32px 26px 28px; }
  .testi-card { padding: 28px 24px; }
  .faq-q { font-size: 16px; padding: 18px 20px; gap: 14px; }
  .faq-item.open .faq-a { max-height: 420px; padding: 0 20px 22px; }

  /* mobile slide-in menu: darker, wider, with shadow + backdrop feel */
  .nav-links {
    width: 84%;
    box-shadow: -24px 0 80px rgba(0,0,0,0.55);
  }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(28px, 8.6vw, 38px); }
  .container { padding: 0 18px; }
  .btn { padding: 14px 26px; font-size: 14px; }
}

/* ============================================
   FULL DARK THEME (handhold-inspired)
   This block overrides the light theme above.
   ============================================ */
:root {
  --d-bg: #070A14;
  --d-bg-2: #0C1120;
  --d-card: rgba(255,255,255,0.045);
  --d-border: rgba(255,255,255,0.10);
  --d-text: #C3CCDD;
  --d-head: #F2F5FB;
  --d-muted: #8A93A6;
}

body {
  background-color: var(--d-bg);
  background-image:
    radial-gradient(800px circle at 8% -5%, rgba(80,110,210,0.12), transparent 55%),
    radial-gradient(720px circle at 96% 10%, rgba(201,162,39,0.08), transparent 52%);
  background-attachment: fixed;
  color: var(--d-text);
}

h1, h2, h3, h4 { color: var(--d-head); }
p, li { color: var(--d-text); }
.section-lead { color: var(--d-muted); }

/* Section backgrounds */
.section-alt { background: var(--d-bg-2); }
.section-navy { background: #05080f; }

/* Header */
.site-header.scrolled {
  background: rgba(8,11,22,0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}
.site-header.scrolled .logo { color: #fff; }
.site-header.scrolled .nav-links a { color: rgba(255,255,255,0.85); }
.site-header.scrolled .nav-toggle span { background: #fff; }

/* Cards → frosted glass */
.info-card, .portfolio-card, .step-card, .faq-item {
  background: var(--d-card);
  border-color: var(--d-border);
  backdrop-filter: blur(6px);
}
.portfolio-card:hover, .info-card:hover, .step-card:hover { background: rgba(255,255,255,0.075); }
.info-card p, .portfolio-card p, .step-card p { color: var(--d-muted); }
.portfolio-strip { background: var(--d-border); border-color: var(--d-border); }
.portfolio-card .pf-meta { border-color: var(--d-border); color: var(--d-muted); }
.portfolio-card .pf-index { color: var(--gold-soft); }
.portfolio-card .pf-link { color: #fff; }
.info-card .icon-badge {
  background: rgba(201,162,39,0.14);
  border-color: rgba(201,162,39,0.32);
  box-shadow: 0 6px 18px rgba(201,162,39,0.18);
}

/* Spec tables */
.spec-table tr { border-color: var(--d-border); }
.spec-table td:first-child { color: var(--d-muted); }
.spec-table td:last-child { color: #fff; }
.spec-table td a { color: var(--gold-soft); }

/* FAQ */
.faq-q { color: var(--d-head); }
.faq-a { color: var(--d-muted); }
.faq-item.open { box-shadow: 0 16px 44px rgba(0,0,0,0.5); }

/* Forms */
.contact-form { background: var(--d-card); border-color: var(--d-border); }
.form-group label { color: #fff; }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.04);
  border-color: var(--d-border);
  color: #fff;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.35); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--gold);
}
.form-group select option { background: #0C1120; color: #fff; }
.contact-info-block p, .contact-info-block a { color: var(--d-text); }

/* Amenities */
.amenity-item { background: var(--d-card); border-color: var(--d-border); color: var(--d-text); }

/* Gallery filters */
.gallery-filter-btn { background: var(--d-card); border-color: var(--d-border); color: var(--d-muted); }
.gallery-filter-btn.active { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

/* Phase tabs */
.phase-tabs { border-color: var(--d-border); }
.phase-tab { color: var(--d-muted); }
.phase-tab.active { color: #fff; }

/* Image placeholders → dark */
.img-block {
  background: linear-gradient(135deg, #0E1424 0%, #131B30 100%);
  border-color: var(--d-border);
  color: var(--d-muted);
}
.img-block span { background: rgba(255,255,255,0.06); color: var(--d-text); }

/* Map embed */
.map-embed { border-color: var(--d-border); }

/* Buttons that were dark-on-light → gold primary on dark */
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: var(--gold-soft); }
.btn-outline { border-color: rgba(255,255,255,0.32); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Misc */
.breadcrumb { color: var(--d-muted); }
.divider-gold { background: var(--gold); }

.whatsapp-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 26px;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  z-index: 999;
  transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ============================================
   CLEAN WHITE PROFESSIONAL THEME
   (official real-estate look — overrides dark theme)
   Placed last so it wins. Flips the --d-* tokens to
   light values, then fixes hardcoded dark rules.
   ============================================ */
:root {
  --d-bg: #FFFFFF;
  --d-bg-2: #F6F8FB;       /* soft slate background for alt sections */
  --d-card: #FFFFFF;
  --d-border: #E6EAF1;     /* hairline border */
  --d-text: #4B5563;       /* body text (slate-600) */
  --d-head: #0F2147;       /* navy headings */
  --d-muted: #6B7280;      /* muted text (slate-500) */
}

/* Clean white page background (no dark glow) */
body {
  background: #FFFFFF;
  color: var(--d-text);
}

/* Header: white when scrolled */
.site-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--d-border), 0 6px 24px rgba(15,33,71,0.05);
}
.site-header.scrolled .logo { color: var(--navy); }
.site-header.scrolled .nav-links a { color: #374151; }
.site-header.scrolled .nav-toggle span { background: var(--navy); }

/* Cards: white with soft professional shadow + rounded corners */
.info-card, .portfolio-card, .step-card, .faq-item {
  background: #FFFFFF;
  border: 1px solid var(--d-border);
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(15,33,71,0.04), 0 10px 30px rgba(15,33,71,0.05);
}
.portfolio-card:hover, .info-card:hover, .step-card:hover {
  background: #FFFFFF;
  box-shadow: 0 8px 18px rgba(15,33,71,0.08), 0 24px 50px rgba(15,33,71,0.10);
}
.portfolio-strip {
  background: var(--d-border);
  border: 1px solid var(--d-border);
  box-shadow: 0 10px 40px rgba(15,33,71,0.06);
}
.portfolio-card .pf-index { color: var(--gold); }
.portfolio-card .pf-link { color: var(--navy); }

/* Spec tables */
.spec-table td:last-child { color: var(--navy); }
.spec-table td a { color: var(--gold); }

/* FAQ */
.faq-item.open { box-shadow: 0 14px 40px rgba(15,33,71,0.10); }

/* Forms: light inputs */
.form-group label { color: var(--navy); }
.form-group input, .form-group select, .form-group textarea {
  background: #F8FAFC;
  border: 1px solid var(--d-border);
  color: #1F2937;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9CA3AF; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  background: #FFFFFF;
  border-color: var(--gold);
}
.form-group select option { background: #FFFFFF; color: #1F2937; }

/* Image placeholders → light, branded */
.img-block {
  background: linear-gradient(135deg, #EEF2F8 0%, #E2E8F0 100%);
  border: 1px solid var(--d-border);
  color: #94A3B8;
}
.img-block span { background: rgba(255,255,255,0.85); color: #64748B; }

/* Buttons: navy primary + navy outline (classic real-estate) */
.btn-primary { background: var(--navy); color: #FFFFFF; }
.btn-primary:hover { background: var(--navy-deep); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #FFFFFF; }

/* Breadcrumb sits on the dark hero → keep it light */
.breadcrumb { color: rgba(255,255,255,0.6); }
.breadcrumb a { color: var(--gold-soft); }

/* Phase tab active → navy */
.phase-tab.active { color: var(--navy); }

/* Dark contrast band (testimonials / CTA) → on-brand navy */
.section-navy { background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%); }

/* Photo-filled image blocks (set by script.js) */
.img-block.has-photo { background-size: cover; background-position: center; color: transparent; }
.img-block.has-photo span { display: none; }
.img-block.has-photo::before { display: none; }
.img-block.is-avatar { color: transparent; }
.img-block.is-avatar span { display: none; }
.img-block.is-avatar::before { display: none; }

/* Home hero: real-estate backdrop with navy overlay */
.hero {
  background:
    linear-gradient(160deg, rgba(8,20,41,0.93) 0%, rgba(15,33,71,0.86) 55%, rgba(27,58,107,0.80) 100%),
    url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
}

/* ============================================
   MOTION & HOVER EFFECTS
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  body { animation: pageFade .7s ease both; }
  @keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Button shine sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.38), transparent);
  transition: left .6s ease; pointer-events: none;
}
.btn:hover::after { left: 150%; }

/* Image blocks: slow zoom on hover */
.img-block.has-photo { background-size: 106%; transition: background-size .7s ease, box-shadow .3s ease; }
.img-block.has-photo:hover { background-size: 118%; }

/* Gallery: zoom + caption reveal on hover */
.gallery-item.img-block { position: relative; overflow: hidden; }
.gallery-item.has-photo { background-size: 110%; transition: background-size .7s ease; }
.gallery-item.has-photo:hover { background-size: 124%; }
.gallery-item.has-photo span {
  display: flex; align-items: flex-end;
  position: absolute; inset: 0; margin: 0; padding: 18px;
  background: linear-gradient(to top, rgba(8,20,41,0.9) 0%, rgba(8,20,41,0.12) 55%, transparent 100%);
  color: #fff; font-size: 13px; letter-spacing: .03em; line-height: 1.45;
  opacity: 0; transition: opacity .4s ease;
}
.gallery-item.has-photo:hover span { opacity: 1; }

/* Staggered reveal for grid children */
.stagger > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .20s; }
.stagger.in > *:nth-child(4) { transition-delay: .28s; }
.stagger.in > *:nth-child(5) { transition-delay: .36s; }
.stagger.in > *:nth-child(6) { transition-delay: .44s; }
.stagger.in > *:nth-child(7) { transition-delay: .52s; }
.stagger.in > *:nth-child(8) { transition-delay: .60s; }
.stagger.in > *:nth-child(9) { transition-delay: .68s; }
.stagger.in > *:nth-child(10) { transition-delay: .76s; }

/* Card link & icon micro-interactions */
.info-card .icon-badge { transition: transform .3s ease, box-shadow .3s ease; }
.info-card:hover .icon-badge { transform: translateY(-4px) rotate(-6deg); }
.step-num { transition: transform .3s ease; }
.step-card:hover .step-num { transform: scale(1.08) rotate(-4deg); }

/* ---- Halston-style image reveal (curtain wipe + slow zoom) ---- */
.img-block.reveal { overflow: hidden; background-size: 130%; }
.img-block.reveal::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: var(--navy);
  transform: scaleY(1); transform-origin: top;
  transition: transform 1s cubic-bezier(.76,0,.24,1);
}
.img-block.reveal.in::after { transform: scaleY(0); transform-origin: bottom; }
.img-block.reveal.in { background-size: 110%; transition: background-size 1.8s cubic-bezier(.16,1,.3,1); }
.img-block.reveal.in:hover { background-size: 120%; transition: background-size .7s ease; }
/* curtain handles reveal for these — let stagger ignore them */
.stagger > .img-block.reveal { opacity: 1 !important; transform: none !important; }

/* Scroll-to-top button */
.scroll-top {
  position: fixed; bottom: 96px; right: 28px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease;
  z-index: 998;
  box-shadow: 0 8px 24px rgba(15,33,71,0.3);
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--navy-deep); }

/* Eyebrow stays gold (already), section leads muted slate (via token) */

/* ============================================
   HALSTON EDITORIAL THEME (warm, architectural)
   Final block — wins over everything above.
   Warm greige palette · big sans headings · flat warm cards
   ============================================ */
:root {
  --d-bg:    #E6E3DA;   /* warm greige page background */
  --d-bg-2:  #DCD8CC;   /* deeper greige for alt sections */
  --d-card:  #F3F1EA;   /* warm off-white card */
  --d-border:#CFC9BB;   /* warm hairline */
  --d-text:  #3A352D;   /* warm dark body text */
  --d-head:  #211E18;   /* near-black warm headings */
  --d-muted: #7A7264;   /* warm grey muted */
  --warm-dark: #2A2520; /* dark brown band/overlay */
}

body { background: var(--d-bg); color: var(--d-text); }

/* Big editorial SANS headings */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-head);
}
.section-title { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.hero h1 { font-size: clamp(44px, 7vw, 86px); line-height: 1.02; letter-spacing: -0.03em; }
.page-header h1 { font-size: clamp(40px, 6.5vw, 76px); letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; } /* keep gradient, drop italic for grotesque look */

/* Hero & headers → warm dark overlay (was navy) */
.hero {
  background:
    linear-gradient(160deg, rgba(30,26,22,0.74) 0%, rgba(30,26,22,0.5) 55%, rgba(30,26,22,0.62) 100%),
    url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.page-header { background: linear-gradient(160deg, var(--warm-dark) 0%, #3A332B 100%); }
.section-navy { background: linear-gradient(160deg, var(--warm-dark) 0%, #38312A 100%); }

/* Header: warm when scrolled */
.site-header.scrolled {
  background: rgba(230,227,218,0.95);
  box-shadow: 0 1px 0 var(--d-border), 0 6px 24px rgba(42,37,32,0.06);
}
.site-header.scrolled .logo { color: var(--d-head); }
.site-header.scrolled .nav-links a { color: #4A443A; }
.site-header.scrolled .nav-toggle span { background: var(--d-head); }

/* Flat warm cards (editorial, minimal shadow) */
.info-card, .portfolio-card, .step-card, .faq-item {
  background: var(--d-card);
  border: 1px solid var(--d-border);
  box-shadow: none;
  border-radius: 6px;
}
.portfolio-card:hover, .info-card:hover, .step-card:hover {
  background: #FFFFFF;
  box-shadow: 0 16px 44px rgba(42,37,32,0.10);
}
.portfolio-strip { border-radius: 6px; box-shadow: none; background: var(--d-border); }

/* Squared editorial buttons */
.btn { border-radius: 2px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }
.btn-gold { background: var(--gold); color: #211E18; box-shadow: none; }
.btn-gold:hover { background: var(--gold-soft); box-shadow: none; }
.btn-primary { background: var(--warm-dark); color: #F3F1EA; }
.btn-primary:hover { background: #1C1814; }
.btn-outline { border-color: var(--warm-dark); color: var(--warm-dark); }
.btn-outline:hover { background: var(--warm-dark); color: #F3F1EA; }

/* Image placeholder + curtain → warm */
.img-block {
  background: linear-gradient(135deg, #DAD6C9 0%, #CDC8B9 100%);
  border-color: var(--d-border);
  color: #9A9281;
}
.img-block.reveal::after { background: var(--warm-dark); }

/* Forms → warm */
.contact-form { background: var(--d-card); border-color: var(--d-border); }
.form-group label { color: var(--d-head); }
.form-group input, .form-group select, .form-group textarea {
  background: #EFEDE5; border-color: var(--d-border); color: #2E2A23;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  background: #FFFFFF; border-color: var(--gold);
}
.form-group select option { background: #F3F1EA; color: #2E2A23; }

/* Avatars (team) → warm gradient */
.img-block.is-avatar { background: linear-gradient(140deg, #3A332B, #6E5A4A 60%, var(--gold)) !important; }

/* Scroll-to-top → warm */
.scroll-top { background: var(--warm-dark); box-shadow: 0 8px 24px rgba(42,37,32,0.3); }
.scroll-top:hover { background: #1C1814; }

/* Eyebrow + accents stay gold */
.portfolio-card .pf-index, .spec-table td a { color: var(--gold); }
.spec-table td:last-child { color: var(--d-head); }
.portfolio-card .pf-link, .phase-tab.active { color: var(--d-head); }

/* ---- Hero: slow Ken-Burns pan (cinematic) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: heroPan 22s ease-in-out infinite alternate; }
  @keyframes heroPan {
    0%   { background-position: center 40%; }
    100% { background-position: center 60%; }
  }
}

/* ---- Image hover: subtle darken for depth ---- */
.img-block.reveal::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(30,26,22,0.42) 0%, transparent 55%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.img-block.reveal:hover::before { opacity: 1; }

/* ---- Halston-style floating bottom sub-nav ---- */
.float-nav {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 2px;
  background: rgba(33,30,24,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px; padding: 5px;
  z-index: 997;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
  box-shadow: 0 14px 44px rgba(0,0,0,0.28);
}
.float-nav.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.float-nav a {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding: 9px 18px; border-radius: 100px;
  transition: background .25s ease, color .25s ease;
}
.float-nav a:hover, .float-nav a.active { background: var(--gold); color: #211E18; }
@media (max-width: 600px) {
  .float-nav { bottom: 18px; }
  .float-nav a { padding: 8px 12px; font-size: 11px; letter-spacing: .05em; }
}

/* ============================================
   HALSTON COMPONENTS (ditto layout pieces)
   ============================================ */
/* Huge split display heading: "OUR  TOWNSHIPS" */
.hl-display {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  border-bottom: 1px solid var(--d-border);
  padding-bottom: 18px; margin-bottom: 80px; line-height: .85;
}
.hl-display span { font-size: clamp(44px, 13vw, 190px); font-weight: 700; letter-spacing: -0.04em; color: var(--d-head); }

/* Numbered list: big image left + text right */
.hl-list { display: flex; flex-direction: column; gap: 96px; }
.hl-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hl-media { height: 540px; }
.hl-body { position: relative; }
.hl-num {
  display: inline-block; font-family: monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--d-muted); border: 1px solid var(--d-border); border-radius: 4px;
  padding: 4px 10px; margin-bottom: 22px;
}
.hl-body h3 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 18px; letter-spacing: -0.02em; }
.hl-body p { font-size: 17px; line-height: 1.7; color: var(--d-muted); max-width: 480px; margin-bottom: 30px; }
.hl-meta { display: flex; gap: 56px; margin-bottom: 32px; flex-wrap: wrap; }
.hl-meta .lbl { display: block; font-family: monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 7px; }
.hl-meta .val { font-size: 15px; font-weight: 700; color: var(--d-head); }
@media (max-width: 860px) {
  .hl-row { grid-template-columns: 1fr; gap: 26px; }
  .hl-media { height: 320px; }
  .hl-list { gap: 60px; }
  .hl-display { margin-bottom: 44px; }
}

/* Scrolling marquee strip */
.marquee { overflow: hidden; border-top: 1px solid var(--d-border); border-bottom: 1px solid var(--d-border); padding: 20px 0; }
.marquee-track { display: flex; width: max-content; animation: marq 28s linear infinite; }
.marquee-track span {
  font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--d-head); display: flex; align-items: center;
}
.marquee-track span::after { content: "✦"; color: var(--gold); margin: 0 44px; font-size: .55em; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   PROFESSIONAL REAL-ESTATE THEME — Deep Green + Gold + White
   FINAL block. Clean builder look (DLF/Godrej/Sobha vibe).
   Overrides every theme above.
   ============================================================ */
:root {
  --d-bg:    #FFFFFF;
  --d-bg-2:  #F3F7F4;     /* soft mint section */
  --d-card:  #FFFFFF;
  --d-border:#E4EAE6;
  --d-text:  #41504A;
  --d-head:  #15281F;     /* deep green-charcoal */
  --d-muted: #6B7770;
  --warm-dark: #14543A;   /* repointed: deep green (drives hero/bands/buttons/curtain) */
  --green:   #14543A;
  --green-deep: #0E3B28;
  --gold:    #C9A227;
  --gold-soft: #E0C76A;
}

body { background: #FFFFFF; color: var(--d-text); }

/* Elegant serif headings (premium real-estate), professional sizing */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--d-head); }
.section-title { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; }
.hero h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.08; letter-spacing: -0.01em; }
.page-header h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.01em; }
.hero h1 em { font-style: italic; }

/* Sections */
.section-alt { background: var(--d-bg-2); }
.section-navy { background: linear-gradient(155deg, var(--green-deep) 0%, var(--green) 100%); }

/* Hero: real Golden City aerial — directional overlay (dark left for text, image visible right) */
.hero {
  background:
    linear-gradient(90deg, rgba(11,46,32,0.95) 0%, rgba(13,55,38,0.82) 40%, rgba(15,60,42,0.45) 72%, rgba(15,60,42,0.28) 100%),
    linear-gradient(0deg, rgba(11,46,32,0.55) 0%, rgba(11,46,32,0) 40%),
    url('assets/img/goldencity/eyeshot.jpg') center/cover no-repeat;
}
@media (max-width: 768px) {
  .hero {
    background:
      linear-gradient(160deg, rgba(11,46,32,0.92) 0%, rgba(13,55,38,0.8) 60%, rgba(15,60,42,0.7) 100%),
      url('assets/img/goldencity/eyeshot.jpg') center/cover no-repeat;
  }
}
.page-header { background: linear-gradient(155deg, var(--green-deep) 0%, var(--green) 100%); }

/* Header */
.site-header.scrolled {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 0 var(--d-border), 0 6px 24px rgba(20,84,58,0.06);
}
.site-header.scrolled .logo { color: var(--green); }
.site-header.scrolled .logo span { color: var(--gold); }
.site-header.scrolled .nav-links a { color: #2E3A34; }
.site-header.scrolled .nav-toggle span { background: var(--green); }

/* Buttons — professional, normal-case, slightly rounded */
.btn { border-radius: 5px; text-transform: none; letter-spacing: 0.01em; font-size: 14.5px; font-weight: 600; }
.btn-gold { background: var(--gold); color: #1A2A12; box-shadow: 0 8px 22px rgba(201,162,39,0.28); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-outline { border-color: var(--green); color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }

/* Cards — clean white with soft shadow + rounded */
.info-card, .portfolio-card, .step-card, .faq-item {
  background: #FFFFFF; border: 1px solid var(--d-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,60,40,0.04), 0 12px 30px rgba(20,60,40,0.05);
}
.portfolio-card:hover, .info-card:hover, .step-card:hover {
  box-shadow: 0 10px 22px rgba(20,60,40,0.10), 0 26px 54px rgba(20,60,40,0.10);
}
.info-card .icon-badge { background: #EAF3EE; border-color: #D4E5DB; color: var(--green); box-shadow: none; }
.step-num { background: linear-gradient(140deg, var(--green), #1f7a54); color: #fff; box-shadow: 0 8px 20px rgba(20,84,58,0.28); }

/* Eyebrow + accents */
.eyebrow { color: var(--gold); }
.eyebrow::before { background: var(--gold); }
.portfolio-card .pf-index, .spec-table td a, .hl-num { color: var(--gold); }
.spec-table td:last-child { color: var(--green); }

/* Image placeholders → clean light */
.img-block { background: linear-gradient(135deg, #EAF0EC 0%, #DCE7E0 100%); border-color: var(--d-border); color: #9AAAA1; }

/* Forms */
.form-group input, .form-group select, .form-group textarea { background: #F5F8F6; border-color: var(--d-border); color: #1F2A24; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: #fff; border-color: var(--green); }
.form-group label { color: var(--green); }

/* Huge split heading → refined, centered serif */
.hl-display { justify-content: center; gap: .28em; border-bottom: none; padding-bottom: 0; margin-bottom: 56px; line-height: 1.1; }
.hl-display span { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 58px); letter-spacing: -0.01em; }
.hl-display span:first-child { color: var(--gold); }
.hl-body h3 { font-family: var(--font-display); }

/* Marquee — green text, gold star */
.marquee-track span { font-family: var(--font-display); font-weight: 600; text-transform: none; color: var(--green); font-size: clamp(18px,2.3vw,28px); }
.marquee { background: var(--d-bg-2); }

/* Floating bottom nav → green glass */
.float-nav { background: rgba(14,59,40,0.92); border-color: rgba(255,255,255,0.14); }
.float-nav a:hover, .float-nav a.active { background: var(--gold); color: #1A2A12; }

/* Curtain reveal panel → green */
.img-block.reveal::after { background: var(--green-deep); }

/* Scroll-to-top → green */
.scroll-top { background: var(--green); box-shadow: 0 8px 24px rgba(20,84,58,0.32); }
.scroll-top:hover { background: var(--green-deep); }

/* Logo */
.logo span { color: var(--gold); }

/* ---- Luxury typography tuning (Cormorant + Montserrat) ---- */
body { font-weight: 400; }
h1, h2, h3, h4 { font-weight: 600; }
.section-title { font-size: clamp(32px, 4.4vw, 58px); font-weight: 600; }
.hero h1 { font-size: clamp(42px, 6vw, 80px); font-weight: 600; }
.page-header h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 600; }
.hl-display span { font-size: clamp(34px, 5.4vw, 64px); font-weight: 600; }
.portfolio-card h3, .info-card h3, .step-card h3, .hl-body h3, .faq-q { font-weight: 600; }

.logo { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 0; }

/* Nav — classic uppercase tracked (Montserrat) */
.nav-links a {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}
@media (max-width: 968px) { .nav-links a { font-size: 14px; letter-spacing: 0.08em; } }

/* Eyebrows & small labels — luxury tracking */
.eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; }
.hl-num, .hl-meta .lbl, .contact-info-block h4, .footer-col h4, .stat-label, .pf-meta,
.gallery-filter-btn, .form-group label, .spec-table td:first-child {
  font-family: var(--font-body);
}
.hl-meta .lbl { letter-spacing: 0.14em; }

/* Buttons — Montserrat, confident */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.03em; }

/* Body copy — Montserrat, comfortable reading */
p, li, .section-lead, .hero-sub, td, input, select, textarea, .nav-cta { font-family: var(--font-body); }
.section-lead { font-weight: 400; line-height: 1.75; }

/* Stat numbers stay elegant serif */
.stat-num { font-family: var(--font-display); font-weight: 600; }

/* ============================================================
   EQUISPACE STYLE — bold sans · big rounded cards · pill CTAs
   FINAL block (matches the reference site's modern feel)
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.section-title { font-size: clamp(30px, 4vw, 52px); font-weight: 700; }
.hero h1 { font-size: clamp(40px, 6.2vw, 84px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.0; }
.hero h1 em { font-style: normal; }
.page-header h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
.hl-display span { font-weight: 700; text-transform: uppercase; }
.hl-body h3, .portfolio-card h3, .info-card h3, .step-card h3, .faq-q { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.logo { font-family: var(--font-display); font-weight: 700; }
.stat-num { font-family: var(--font-display); font-weight: 700; }
.nav-links a { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0.005em; font-size: 15px; }
.eyebrow { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.18em; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }

/* Pill buttons (gold = reference yellow CTA) */
.btn { border-radius: 100px; font-weight: 700; letter-spacing: 0.01em; padding: 15px 32px; text-transform: none; font-size: 14.5px; }

/* Big rounded cards & images — signature of the reference design */
.info-card, .portfolio-card, .step-card, .faq-item, .contact-form, .testi-card { border-radius: 22px; }
.img-block, .map-embed { border-radius: 22px; }
.img-block.hl-media { border-radius: 26px; }
.gallery-item.img-block { border-radius: 18px; }
.portfolio-strip { border-radius: 24px; }
.solar-stage { border-radius: 26px; }
.info-card .icon-badge { border-radius: 16px; }

/* Hero social-proof card (avatars + count) */
.hero-proof {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 38px; padding: 9px 22px 9px 11px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px; backdrop-filter: blur(8px);
}
.hero-proof .avatars { display: flex; }
.hero-proof .avatars span {
  width: 38px; height: 38px; border-radius: 50%; margin-left: -12px;
  border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.hero-proof .avatars span:first-child { margin-left: 0; }
.hero-proof .avatars span:nth-child(1) { background: linear-gradient(135deg, #14543A, #1f7a54); }
.hero-proof .avatars span:nth-child(2) { background: linear-gradient(135deg, #C9A227, #E0C76A); color: #1A2A12; }
.hero-proof .avatars span:nth-child(3) { background: linear-gradient(135deg, #1B3A6B, #2e6fb0); }
.hero-proof .proof-text strong { display: block; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.1; font-family: var(--font-display); }
.hero-proof .proof-text span { color: rgba(255,255,255,0.78); font-size: 12.5px; }

/* ---- Blog / Insights cards (EquiSpace-style) ---- */
.blog-card {
  background: #fff; border: 1px solid var(--d-border);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,60,40,0.04), 0 12px 30px rgba(20,60,40,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column; color: inherit;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20,60,40,0.12); }
.blog-img { height: 210px; background-size: cover; background-position: center; transition: transform .6s ease; }
.blog-card:hover .blog-img { transform: scale(1.07); }
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.blog-card h3 { font-size: 20px; line-height: 1.28; margin-bottom: 12px; }
.blog-card p { font-size: 14.5px; color: var(--d-muted); line-height: 1.7; margin-bottom: 18px; flex: 1; }
.blog-readmore {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  color: var(--green); display: inline-flex; align-items: center; gap: 7px;
}
.blog-readmore::after { content: "→"; transition: transform .25s ease; }
.blog-card:hover .blog-readmore::after { transform: translateX(4px); }

/* ============================================================
   INK + WHITE THEME (no green) — white bg · light-black · gold
   FINAL block. Repoints the green vars to charcoal so the whole
   site flips to white + light-black + gold (EquiSpace palette).
   ============================================================ */
:root {
  --green:      #1F1F1F;   /* repurposed -> light black / charcoal */
  --green-deep: #121212;
  --warm-dark:  #1C1C1C;
  --d-head:     #1A1A1A;
  --d-text:     #4A4A4A;
  --d-muted:    #7C7C7C;
  --d-bg-2:     #F5F5F3;   /* neutral light-grey section */
  --d-border:   #E8E8E5;
}

body { background: #FFFFFF; color: var(--d-text); }

/* Hero — light-black overlay over the aerial (image stays visible right) */
.hero {
  background:
    linear-gradient(90deg, rgba(14,14,14,0.90) 0%, rgba(18,18,18,0.70) 42%, rgba(20,20,20,0.42) 72%, rgba(20,20,20,0.28) 100%),
    linear-gradient(0deg, rgba(12,12,12,0.45) 0%, rgba(12,12,12,0) 45%),
    url('assets/img/goldencity/eyeshot.jpg') center/cover no-repeat;
}
@media (max-width: 768px) {
  .hero {
    background:
      linear-gradient(160deg, rgba(16,16,16,0.82) 0%, rgba(20,20,20,0.68) 55%, rgba(22,22,22,0.5) 100%),
      url('assets/img/goldencity/eyeshot.jpg') center/cover no-repeat;
  }
}

/* Charcoal-tinted accents that were green */
.info-card .icon-badge { background: #F2F2F0; border-color: #E5E5E2; color: #1A1A1A; }
.step-num { background: linear-gradient(140deg, #2C2C2C, #161616); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.16); }
.float-nav { background: rgba(20,20,20,0.93); border-color: rgba(255,255,255,0.14); }
.hero-proof .avatars span:nth-child(1) { background: linear-gradient(135deg, #2C2C2C, #141414); }
.hero-proof .avatars span:nth-child(3) { background: linear-gradient(135deg, #3A3A3A, #1A1A1A); }

/* Gold stays the single accent */
.btn-gold { background: var(--gold); color: #1A1A1A; }
.btn-gold:hover { background: var(--gold-soft); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--d-border), 0 6px 24px rgba(0,0,0,0.06); }

/* Headings + key text pure ink */
h1, h2, h3, h4 { color: var(--d-head); }
.spec-table td:last-child, .portfolio-card .pf-link, .phase-tab.active { color: #1A1A1A; }

/* ============================================================
   EQUISPACE FINAL TOUCHES — vivid yellow CTAs + blue contact
   ============================================================ */
/* Bright yellow pill buttons (like "Let's Connect" / "Submit") */
.btn-gold {
  background: #F4C20D; color: #1A1A1A; font-weight: 700;
  box-shadow: 0 8px 22px rgba(244,194,13,0.30);
}
.btn-gold:hover { background: #FFD43B; }

/* Floating bottom nav — blue "Contact" pill like the reference */
.float-nav a:last-child { background: #3B49DF; color: #fff; }
.float-nav a:last-child:hover { background: #2D39C4; color: #fff; }
.float-nav a.active:not(:last-child) { background: #F4C20D; color: #1A1A1A; }

/* Body in Ubuntu reads best at 400 */
body, p, li, .section-lead { font-weight: 400; }

/* ============================================================
   RESPONSIVE — FINAL MOBILE PASS (authoritative, fixes overlap)
   ============================================================ */
/* Kill all horizontal overflow site-wide */
html, body { overflow-x: hidden; width: 100%; }

@media (max-width: 768px) {
  /* Glow orbs are positioned beyond the right edge → they cause horizontal
     overflow on phones. Turn them off on mobile. */
  .hero::after, .page-header::after, .section-navy::after { display: none !important; }
  /* Hard guarantee: nothing exceeds the screen width */
  .container { padding-left: 20px; padding-right: 20px; }
  .container, .hero-content, section, .hl-row, .hl-body { max-width: 100%; min-width: 0; }
  .hero-content > *, .hl-body > * { max-width: 100%; }
  /* Long eyebrow must wrap, never overflow */
  .eyebrow { flex-wrap: wrap; }
  .hero-sub, .section-lead, .hero h1, .hl-display { max-width: 100%; overflow-wrap: break-word; }
  /* Stack hero buttons full-width (no overflow off the right edge) */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; flex: none; }
  /* HERO: top-align so tall content never slides under the fixed header */
  .hero { min-height: auto; align-items: flex-start; }
  .hero-content { padding-top: 132px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(34px, 11vw, 52px); line-height: 1.05; }
  .hero-sub { font-size: 15.5px; margin: 18px 0 30px; max-width: 100%; }
  .hero-cta-row { gap: 12px; }
  .hero-cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .hero-proof { margin-top: 26px; }
  .hero-stats { margin-top: 42px; gap: 24px 16px; padding-top: 26px; }
  .stat-num { font-size: 26px; }
  .stat-label { font-size: 11.5px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.16em; }

  /* Header sits cleanly above content */
  .site-header { padding: 18px 0; }

  /* Hide the floating bottom nav on mobile (hamburger already covers nav;
     it was overlapping the WhatsApp button) */
  .float-nav { display: none !important; }

  /* Headings + section spacing */
  .section { padding: 54px 0; }
  .section-head { margin-bottom: 30px; }
  .section-title { font-size: clamp(26px, 8vw, 40px); }
  .hl-display { flex-wrap: wrap; justify-content: center; gap: 0 .25em; margin-bottom: 34px; }
  .hl-display span { font-size: clamp(28px, 10vw, 44px); }

  /* Numbered project list */
  .hl-row { grid-template-columns: 1fr; gap: 22px; }
  .hl-media { height: 250px; }
  .hl-body p { font-size: 15px; }
  .hl-meta { gap: 34px; }

  /* Cards / blog / gallery */
  .grid-2, .grid-3, .grid-4 { gap: 18px; }
  .blog-img { height: 190px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; }
  .gallery-item.wide { grid-column: span 2; }

  /* Forms / tables / map */
  .contact-form { padding: 26px 20px; }
  .map-embed { height: 280px; }
  .spec-table td { font-size: 14px; padding: 12px 0; }
  .amenity-list { grid-template-columns: 1fr; }

  /* Floating action buttons — smaller, no crowding */
  .whatsapp-float { width: 52px; height: 52px; bottom: 20px; right: 18px; font-size: 22px; }
  .scroll-top { width: 42px; height: 42px; bottom: 82px; right: 21px; }
}

@media (max-width: 430px) {
  .container { padding: 0 18px; }
  .hero-content { padding-top: 124px; }
  .hero h1 { font-size: clamp(30px, 10.5vw, 44px); }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .btn { padding: 13px 22px; font-size: 13.5px; }
  .logo { font-size: 21px; }
  .hero-proof { padding: 8px 16px 8px 9px; }
  .hero-proof .avatars span { width: 34px; height: 34px; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   MOBILE MENU — polished slide-in (on-brand dark + gold hover)
   ============================================================ */
@media (max-width: 968px) {
  .nav-links {
    background: #0E0E11 !important;     /* fully opaque, crisp dark panel */
    box-shadow: -26px 0 80px rgba(0,0,0,0.55);
    gap: 4px;
    padding: 96px 36px 40px;
    justify-content: flex-start;
    width: 80%;
    max-width: 330px;
  }
  .nav-links a:not(.nav-cta) {
    color: #FFFFFF !important;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    transition: color .2s ease, padding-left .2s ease;
  }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta).active { color: var(--gold) !important; padding-left: 6px; }
  .nav-links .nav-cta {
    width: 100%; justify-content: center; margin-top: 24px;
    color: #1A1A1A !important; background: var(--gold) !important;
  }

  /* Hamburger → animated X */
  .nav-toggle span { transition: transform .3s ease, opacity .2s ease; transform-origin: center; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open .nav-toggle span { background: #fff !important; }

  /* Overlay bg — JS creates the real div (.nav-overlay) so clicks can close menu */
  .nav-overlay { background: rgba(6,6,8,0.62); }
}

/* ============================================================
   FINAL OVERRIDES — No blur anywhere + strong hover on every card
   ============================================================ */

/* 1. Remove ALL backdrop blur site-wide (user wants crisp, no frosted glass) */
.site-header.scrolled {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.info-card, .portfolio-card, .step-card, .faq-item, .testi-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Smooth transition on ALL interactive cards */
.portfolio-card, .info-card, .step-card, .blog-card, .testi-card {
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.28s ease,
              border-color 0.28s ease !important;
}

/* 3. Strong visible lift + gold border on hover — you FEEL it */
.portfolio-card:hover, .info-card:hover, .step-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.13), 0 4px 14px rgba(0,0,0,0.06) !important;
  border-color: var(--gold) !important;
}
.blog-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.12) !important;
}
.testi-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.10) !important;
}

/* 4. FAQ item hover — gold question text */
.faq-q { transition: color 0.2s ease; }
.faq-q:hover { color: var(--gold) !important; }

/* 5. Numbered project rows — image zooms on row hover */
.hl-media { overflow: hidden; }
.hl-media .img-block {
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.hl-row:hover .hl-media .img-block { transform: scale(1.05) !important; }

/* 6. Gallery image zoom on hover — slightly stronger */
.gallery-item.has-photo { transition: background-size 0.5s ease; }
.gallery-item.has-photo:hover { background-size: 115% !important; }

/* 7. Icon badge on info-card — keep the rotate animation */
.info-card .icon-badge { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.info-card:hover .icon-badge { transform: translateY(-5px) rotate(-8deg) !important; }
.step-card:hover .step-num { transform: scale(1.1) rotate(-5deg) !important; }

/* ============================================================
   SKY MANSION STYLE — Hero + Header redesign
   ============================================================ */

/* Header phone pill (right side, replaces "Enquire Now" in nav) */
.header-phone {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 22px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 100px;
  color: rgba(255,255,255,0.92);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s ease;
  text-decoration: none;
}
.header-phone:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.95); }
.site-header.scrolled .header-phone { border-color: #1A1A1A; color: #1A1A1A; }
.site-header.scrolled .header-phone:hover { background: rgba(0,0,0,0.05); }
.header-phone svg { flex-shrink: 0; }

/* Hero — bottom-left aligned, large serif heading */
.hero {
  align-items: flex-end !important;
  padding-bottom: 80px;
  padding-top: 0;
}
.hero-content {
  align-items: flex-start;
  gap: 0;
}
.hero .eyebrow { display: none !important; }
.hero-sub { display: none !important; }
.hero-proof { display: none !important; }

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(46px, 6vw, 88px) !important;
  font-weight: 600 !important;
  line-height: 1.07 !important;
  letter-spacing: -0.022em !important;
  color: #fff !important;
  max-width: 740px;
  margin-bottom: 22px;
}

/* Info bar — pipe-separated uppercase facts */
.hero-info-bar {
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  font-weight: 500;
  line-height: 2;
  margin-bottom: 38px;
}
.hero-info-bar .highlight { color: #F4C20D; font-weight: 700; }

/* Outlined site-visit CTA (like "SCHEDULE A SITE VISIT") */
.btn-hero-outline {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 34px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 3px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-bottom: 52px;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.13); border-color: #fff; color: #fff; }

/* Hero stats row — clean line at bottom */
.hero-stats {
  display: flex !important;
  flex-direction: row !important;
  gap: 48px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
  width: 100%;
}
.hero-stats .stat-block { text-align: left; }
.hero-stats .stat-num { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
.hero-stats .stat-label { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 5px; }

/* "ENQUIRE NOW" vertical side button */
.hero-side-cta {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}
.hero-side-cta a {
  display: block;
  padding: 26px 14px;
  background: rgba(160,120,16,0.88);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-decoration: none;
  transition: background 0.25s ease;
}
.hero-side-cta a:hover { background: rgba(160,120,16,1); }

/* Mobile overrides */
@media (max-width: 968px) {
  .header-phone { display: none; }
  .hero-side-cta { display: none; }
}
@media (max-width: 768px) {
  .hero { align-items: flex-start !important; padding-bottom: 48px !important; padding-top: 0 !important; }
  .hero-content { padding-top: 130px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 54px) !important; margin-bottom: 18px; }
  .hero-info-bar { font-size: 11px; letter-spacing: 0.10em; margin-bottom: 26px; }
  .btn-hero-outline { padding: 14px 26px; font-size: 12px; margin-bottom: 40px; }
  .hero-stats { gap: 20px 16px !important; flex-wrap: wrap !important; }
  .hero-stats .stat-num { font-size: 22px; }
}

/* ============================================================
   WHOLE SITE — Professional premium typography & structure
   ============================================================ */

/* --- Playfair Display for ALL headings site-wide --- */
h1, h2, h3, h4,
.section-title,
.hl-body h3,
.portfolio-card h3,
.info-card h3,
.step-card h3,
.faq-q,
.page-header h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
}

/* Section titles — large, elegant */
.section-title {
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  color: #1A1A1A !important;
}

/* Card headings — slightly smaller, refined */
.info-card h3, .step-card h3, .portfolio-card h3, .testi-card h3 {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* FAQ question text stays legible */
.faq-q { font-size: 17px !important; font-weight: 600 !important; }

/* Eyebrow label — Ubuntu, gold, uppercase (keep as is) */
.eyebrow {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}
.eyebrow::before { background: var(--gold) !important; }

/* Section lead text */
.section-lead {
  font-size: 16.5px !important;
  line-height: 1.78 !important;
  color: #5A5A5A !important;
}

/* --- Premium page-header banner (inner pages) --- */
.page-header {
  min-height: 58vh !important;
  background:
    linear-gradient(160deg, rgba(12,12,12,0.88) 0%, rgba(18,18,18,0.72) 55%, rgba(22,22,22,0.55) 100%),
    url('assets/img/goldencity/render-aerial.jpg') center/cover no-repeat !important;
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 64px !important;
}
.page-header::before { display: none !important; }
.page-header-content {
  padding-top: 0 !important;
  max-width: 820px;
}
.page-header h1 {
  font-size: clamp(38px, 5.5vw, 76px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.022em !important;
  color: #fff !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}
.page-header-lead {
  font-size: 16px !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.68) !important;
  max-width: 580px !important;
  margin-top: 0 !important;
}
.breadcrumb {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 14px !important;
}
.breadcrumb a { color: var(--gold) !important; text-decoration: none; }

/* --- Section spacing — generous, premium --- */
.section { padding: 96px 0 !important; }
.section-alt { padding: 96px 0 !important; }
.section-head { margin-bottom: 56px !important; }

/* --- Logo — Playfair Display serif mark --- */
.logo { font-family: 'Playfair Display', Georgia, serif !important; font-size: 22px !important; }

/* --- Buttons — sharper, more premium --- */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
}

/* --- Nav links — clean Ubuntu caps --- */
.nav-links a:not(.header-phone):not(.btn) {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* --- Footer headings use Playfair --- */
.site-footer h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* --- WhatsApp float icon — real icon --- */
.whatsapp-float { font-size: 26px !important; line-height: 1 !important; }

/* Mobile overrides */
@media (max-width: 768px) {
  .section { padding: 64px 0 !important; }
  .section-alt { padding: 64px 0 !important; }
  .section-head { margin-bottom: 36px !important; }
  .page-header { min-height: auto !important; padding-top: 120px !important; padding-bottom: 48px !important; align-items: flex-start !important; }
  .page-header h1 { font-size: clamp(30px, 9vw, 48px) !important; }
  .section-title { font-size: clamp(26px, 7.5vw, 38px) !important; }
}

/* ============================================================
   COLOUR SYSTEM — Jet Black · White · Charcoal
   Monochrome premium palette: stark, aggressive, professional
   ============================================================ */
:root {
  --gold:      #0A0A0A;   /* jet black — primary accent */
  --gold-soft: #333333;   /* charcoal — secondary accent */
}

/* CTA buttons — solid black */
.btn-gold,
.btn-primary {
  background: #0A0A0A !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
}
.btn-gold:hover,
.btn-primary:hover {
  background: #2A2A2A !important;
  color: #fff !important;
}

/* Outlined button */
.btn-outline {
  border-color: #0A0A0A !important;
  color: #0A0A0A !important;
}
.btn-outline:hover {
  background: #0A0A0A !important;
  color: #fff !important;
}

/* Eyebrow accent — black dash + text */
.eyebrow { color: #0A0A0A !important; }
.eyebrow::before { background: #0A0A0A !important; }

/* Logo "Sankalp" word — black */
.logo span { color: #0A0A0A !important; }

/* Hero info highlight text (on dark bg — warm off-white) */
.hero-info-bar .highlight { color: #E8E8E8 !important; }

/* Hero side "ENQUIRE NOW" button */
.hero-side-cta a {
  background: rgba(0,0,0,0.88) !important;
}
.hero-side-cta a:hover { background: #000000 !important; }

/* Mobile menu active link */
.nav-links a:not(.nav-cta).active { color: #0A0A0A !important; }
.nav-links .nav-cta {
  background: #0A0A0A !important;
  color: #fff !important;
}

/* Floating bottom nav */
.float-nav a:last-child { background: #0A0A0A !important; color: #fff !important; }
.float-nav a:last-child:hover { background: #2A2A2A !important; }
.float-nav a.active:not(:last-child) { background: #0A0A0A !important; color: #fff !important; }

/* Card hover border — black */
.portfolio-card:hover,
.info-card:hover,
.step-card:hover {
  border-color: #0A0A0A !important;
}

/* FAQ open icon + hover */
.faq-item.open .faq-ico { background: #0A0A0A !important; color: #fff !important; }
.faq-q:hover { color: #0A0A0A !important; }

/* Gallery filter active */
.gallery-filter-btn.active {
  background: #0A0A0A !important;
  color: #fff !important;
  border-color: #0A0A0A !important;
}

/* Phase tab active */
.phase-tab.active { border-bottom-color: #0A0A0A !important; color: #0A0A0A !important; }

/* Social links hover */
.social-row a:hover {
  border-color: #0A0A0A !important;
  background: rgba(0,0,0,0.08) !important;
  color: #0A0A0A !important;
}

/* Scroll-to-top button */
.scroll-top { background: #0A0A0A !important; box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important; }
.scroll-top:hover { background: #2A2A2A !important; }

/* HL numbered list accent */
.hl-num { color: #AAAAAA !important; }
.hl-display span:first-child { color: #0A0A0A !important; }

/* Amenity dot */
.amenity-item .dot { background: #0A0A0A !important; }

/* Step num — solid black */
.step-num {
  background: #0A0A0A !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.20) !important;
}

/* Spec table links */
.spec-table td a { color: #0A0A0A !important; }
.portfolio-card .pf-index, .hl-num { color: #AAAAAA !important; }

/* Portfolio card link */
.portfolio-card .pf-link { color: #0A0A0A !important; }

/* Blog card read-more arrow */
.blog-readmore { color: #0A0A0A !important; }

/* Curtain reveal panel */
.img-block.reveal::after { background: #0A0A0A !important; }

/* ============================================================
   HERO CINEMATIC — Full-screen image reel + rotating content
   ============================================================ */

.hero.hero-cinematic {
  background: #080808 !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 76px;
}

/* Background image frames (Ken Burns zoom on active) */
.hero-bg-reel { position: absolute; inset: 0; z-index: 0; }
.hero-bg-frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1);
}
.hero-bg-frame.active {
  opacity: 1;
  animation: kenBurnsZoom 7.5s ease-out forwards;
}
@keyframes kenBurnsZoom {
  from { transform: scale(1.10); }
  to   { transform: scale(1.00); }
}

/* Dark gradient veil — heavy left, fades right */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(4,4,4,0.94) 0%,
    rgba(4,4,4,0.72) 42%,
    rgba(4,4,4,0.34) 100%
  );
}

/* All content above veil */
.hero-cinematic .hero-content { position: relative; z-index: 2; }
.hero-cinematic .hero-side-cta { z-index: 3; }

/* Rotating text container */
.hero-reel-content { position: relative; min-height: 230px; margin-bottom: 12px; }

.hero-reel-slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events: none;
}
.hero-reel-slide.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-reel-slide h1 { margin-bottom: 38px !important; }
.hero-reel-slide .hero-info-bar { margin-bottom: 22px !important; }

/* Dot progress indicators */
.hero-reel-dots { display: flex; gap: 8px; margin-top: 32px; }
.reel-dot {
  width: 30px; height: 3px;
  background: rgba(255,255,255,0.22);
  border: none; border-radius: 2px;
  cursor: pointer; padding: 0;
  transition: all 0.4s ease;
}
.reel-dot.active { background: #2558D8; width: 58px; }

@media (max-width: 768px) {
  .hero.hero-cinematic { padding-bottom: 80px !important; align-items: flex-start !important; }
  .hero-cinematic .hero-content { padding-top: 130px; }
  .hero-reel-content { min-height: 260px; }
  .hero-reel-slide h1 { margin-bottom: 24px !important; }
  .hero-reel-dots { margin-top: 24px; }
}

/* ============================================================
   LIGHT PREMIUM THEME — White bg · Jet Black text · Monochrome
   ============================================================ */

body { background: #FFFFFF !important; color: #2D2D2D !important; }
h1, h2, h3, h4 { color: #0A0A0A !important; }
p { color: #4A4A4A; }
.section-lead { color: #5A5A5A !important; }
li { color: #4A4A4A; }

/* Section backgrounds */
.section { background: #FFFFFF !important; }
.section-alt { background: #F5F5F5 !important; }
.section-navy { background: #0A0A0A !important; }

/* Header — crisp white */
.site-header { background: rgba(255,255,255,0.97) !important; border-bottom: 1px solid rgba(0,0,0,0.09) !important; }
.site-header .logo { color: #0A0A0A !important; }
.site-header .logo span { color: #0A0A0A !important; }
.site-header .nav-links a { color: #2D2D2D !important; }
.site-header .nav-links a:hover, .site-header .nav-links a.active { color: #0A0A0A !important; border-bottom: 2px solid #0A0A0A; }
.site-header .nav-toggle span { background: #0A0A0A !important; }
.site-header .header-phone { border-color: rgba(0,0,0,0.20) !important; color: #0A0A0A !important; }
.site-header.scrolled { background: #FFFFFF !important; box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important; }
.site-header.scrolled .logo { color: #0A0A0A !important; }
.site-header.scrolled .nav-links a { color: #2D2D2D !important; }
.site-header.scrolled .nav-toggle span { background: #0A0A0A !important; }

/* ALL cards → white with sharp border */
.info-card, .portfolio-card, .step-card, .testi-card, .faq-item, .blog-card, .contact-form {
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.info-card h3, .portfolio-card h3, .step-card h3, .testi-card h3, .blog-card h3 { color: #0A0A0A !important; }
.info-card p, .portfolio-card p, .step-card p { color: #5A5A5A !important; }

/* Card hover — lift with black border */
.portfolio-card:hover, .info-card:hover, .step-card:hover {
  background: #FAFAFA !important;
  border-color: #0A0A0A !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12) !important;
  transform: translateY(-6px) !important;
}
.blog-card:hover { background: #FAFAFA !important; border-color: #0A0A0A !important; box-shadow: 0 12px 36px rgba(0,0,0,0.10) !important; }

/* FAQ */
.faq-q { color: #0A0A0A !important; background: #FFFFFF !important; border-color: #E0E0E0 !important; }
.faq-item.open .faq-a { background: #F5F5F5 !important; color: #2D2D2D !important; }

/* Forms */
.form-group input, .form-group select, .form-group textarea {
  background: #F8F8F8 !important; border-color: #D0D0D0 !important; color: #0A0A0A !important;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #A0A0A0 !important; }
.form-group label { color: #2D2D2D !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  background: #FFFFFF !important; border-color: #0A0A0A !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

/* Outlined buttons */
.btn-outline { border-color: #0A0A0A !important; color: #0A0A0A !important; background: transparent !important; }
.btn-outline:hover { background: #0A0A0A !important; color: #fff !important; }
.btn-outline-light { border-color: rgba(255,255,255,0.55) !important; color: #fff !important; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12) !important; }

/* Numbered project list (Halston rows) */
.hl-row { border-color: #E0E0E0 !important; }
.hl-body h3 { color: #0A0A0A !important; }
.hl-body p { color: #5A5A5A !important; }
.hl-meta .lbl { color: #A0A0A0 !important; }
.hl-meta .val { color: #0A0A0A !important; }
.hl-display span { color: #0A0A0A !important; }
.hl-display span:first-child { color: #0A0A0A !important; }

/* Spec tables */
.spec-table td { border-color: #E0E0E0 !important; color: #2D2D2D !important; }
.spec-table td:first-child { color: #A0A0A0 !important; }

/* Gallery filters */
.gallery-filter-btn { background: #FFFFFF !important; border-color: #D0D0D0 !important; color: #2D2D2D !important; }
.gallery-filter-btn:hover { color: #0A0A0A !important; border-color: #0A0A0A !important; }

/* Blog cards */
.blog-tag, .blog-meta { background: #F0F0F0 !important; color: #5A5A5A !important; border-radius: 4px; padding: 2px 8px; }
.blog-date { color: #A0A0A0 !important; }
.blog-card p { color: #5A5A5A !important; }
.blog-card h3 { color: #0A0A0A !important; }
.blog-readmore { color: #0A0A0A !important; font-weight: 700; letter-spacing: 0.05em; }

/* Image placeholder blocks */
.img-block:not(.has-photo) { background: #EBEBEB !important; border-color: #D8D8D8 !important; color: #A0A0A0 !important; }

/* Portfolio cards */
.portfolio-card .pf-meta { border-color: #E0E0E0 !important; color: #5A5A5A !important; }
.portfolio-strip { background: #F5F5F5 !important; }

/* Testimonials */
.testi-card p { color: #4A4A4A !important; }
.testi-who strong { color: #0A0A0A !important; }
.testi-who span { color: #7A7A7A !important; }
.testi-ava { background: #0A0A0A !important; color: #fff !important; }
.testi-card .stars { color: #C9A227 !important; }  /* gold stars — only colour allowed */

/* Section navy/dark CTA bands */
.section-navy { background: #0A0A0A !important; }
.section-navy h2, .section-navy h3 { color: #fff !important; }
.section-navy .section-lead { color: rgba(255,255,255,0.65) !important; }
.section-navy .eyebrow { color: rgba(255,255,255,0.45) !important; }
.section-navy .eyebrow::before { background: rgba(255,255,255,0.45) !important; }

/* Contact info */
.contact-info-block { border-color: #E0E0E0 !important; background: #F5F5F5 !important; }
.contact-info-block h4 { color: #A0A0A0 !important; }
.contact-info-block p, .contact-info-block a { color: #0A0A0A !important; }

/* Footer — jet black */
.site-footer { background: #0A0A0A !important; border-top: none !important; }
.site-footer p, .site-footer li { color: rgba(255,255,255,0.42) !important; }
.footer-col h4 { color: rgba(255,255,255,0.88) !important; }
.footer-col a { color: rgba(255,255,255,0.45) !important; }
.footer-col a:hover { color: #fff !important; }
.footer-bottom { border-top-color: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.25) !important; }
.social-row a { border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.50) !important; }
.social-row a:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.40) !important; color: #fff !important; }
.footer-brand .logo { color: #fff !important; }
.footer-brand .logo span { color: #fff !important; }

/* Amenity list */
.amenity-item { color: #2D2D2D !important; }

/* Phase tabs */
.phase-tab { color: #6A6A6A !important; }
.phase-tabs { border-color: #E0E0E0 !important; }

/* Eyebrow labels — bold black */
.eyebrow { color: #0A0A0A !important; }
.eyebrow::before { background: #0A0A0A !important; }

/* WhatsApp float */
.whatsapp-float { background: #25D366 !important; color: #fff !important; }

/* Reel dot — black */
.reel-dot.active { background: #0A0A0A !important; width: 58px; }

/* ============================================================
   AWARD-STYLE EFFECTS — cursor, progress, marquee, intro, parallax
   ============================================================ */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: #0A0A0A;
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 3000;
}

/* Native cursor kept — smooth transitions site-wide instead */
a, button, .btn, .gallery-item, .faq-q, .team-card, .blog-card, .info-card, .step-card {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero intro — staggered rise on load */
.hero-company > * {
  opacity: 0; transform: translateY(30px);
  animation: heroRise 0.95s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-company > *:nth-child(1) { animation-delay: 0.9s; }
.hero-company > *:nth-child(2) { animation-delay: 1.05s; }
.hero-company > *:nth-child(3) { animation-delay: 1.2s; }
.hero-company > *:nth-child(4) { animation-delay: 1.35s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

/* Marquee band — infinite scrolling brand strip */
.ss-marquee { background: #0A0A0A; overflow: hidden; padding: 20px 0; }
.ss-marquee-track {
  display: flex; width: max-content;
  animation: ssMarquee 30s linear infinite;
}
.ss-marquee-track span {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.10em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 56px;
  padding-right: 56px; white-space: nowrap;
}
.ss-marquee-track .dot-sep {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.32);
  display: inline-block; flex-shrink: 0;
}
@keyframes ssMarquee { to { transform: translateX(-50%); } }
.ss-marquee:hover .ss-marquee-track { animation-play-state: paused; }

/* Inner page banners — clear the fixed white header, no overlap */
.page-header {
  padding-top: 150px !important;
  min-height: 52vh !important;
}
@media (max-width: 768px) {
  .page-header { padding-top: 130px !important; }
}

/* Magnetic buttons — smooth spring transition */
.btn, .btn-hero-outline {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

/* Preloader — quick logo intro (homepage) */
.ss-preloader {
  position: fixed; inset: 0; z-index: 5000;
  background: #0A0A0A;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.ss-preloader img {
  width: 92px; height: 92px; border-radius: 50%;
  animation: preloaderPulse 1.1s ease-in-out infinite;
}
.ss-preloader.done { opacity: 0; visibility: hidden; }
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

/* ============================================================
   LOGO MARK — circular emblem beside wordmark
   ============================================================ */
.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.logo-mark {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}
.site-footer .logo-mark { height: 50px; width: 50px; }
@media (max-width: 768px) {
  .logo-mark { height: 38px; width: 38px; }
  .logo { gap: 8px !important; font-size: 18px !important; }
}

/* ============================================================
   COMPANY HERO — single static professional hero
   ============================================================ */
.hero-company { max-width: 780px; }
.hero-company h1 {
  color: #fff !important;
  margin-bottom: 22px !important;
}
.hero-sub {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin-bottom: 36px;
}
.hero-company .hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-company .btn-hero-outline { margin-bottom: 0; }
@media (max-width: 768px) {
  .hero-sub { font-size: 15px; margin-bottom: 28px; }
}

/* Icon badge — clean circle for SVG icons */
.icon-badge svg { display: block; }

/* ============================================================
   MVD VIDEOS — Project film section
   ============================================================ */
.mvd-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 820px) {
  .mvd-video-grid { grid-template-columns: 1fr; }
}
.mvd-video-card video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  background: #000;
  display: block;
  border: 1px solid #E0E0E0;
}
.mvd-video-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2D2D2D;
  text-align: center;
}

/* ============================================================
   TEAM CARDS — About page leadership section
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

.team-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.11);
  border-color: #0A0A0A;
}

/* Photo area */
.team-photo-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #F0F0F0;
  position: relative;
}
.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.team-card:hover .team-photo { transform: scale(1.04); }

/* Letter avatar fallback */
.team-avatar {
  width: 100%;
  height: 100%;
  background: #0A0A0A;
  color: #FFFFFF;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

/* Info section */
.team-info {
  padding: 24px 24px 22px;
}
.team-info h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  margin-bottom: 5px !important;
}
.team-role {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6A6A6A;
  margin-bottom: 14px;
}
.team-info p {
  font-size: 14.5px;
  line-height: 1.70;
  color: #5A5A5A;
  margin-bottom: 16px;
}

/* Badge */
.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #2D2D2D;
  letter-spacing: 0.02em;
}
.team-badge svg { flex-shrink: 0; color: #0A0A0A; }

/* ============================================================
   SOCIAL ICONS — Hero strip + Footer icons
   ============================================================ */

/* Hero social strip — LEFT side vertical on desktop, bottom row on mobile */
.hero-social-strip {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 4;
}
/* Decorative lines above + below */
.hero-social-strip::before,
.hero-social-strip::after {
  content: '';
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.22);
}
.hero-social-strip a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hero-social-strip a:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.80);
  color: #fff;
  transform: scale(1.12);
}
/* Mobile: horizontal row at bottom of hero */
@media (max-width: 968px) {
  .hero-social-strip {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 22px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 12px;
  }
  .hero-social-strip::before,
  .hero-social-strip::after { display: none; }
  .hero-social-strip a { width: 36px; height: 36px; }
}

/* Footer social icon sizing + hover */
.social-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.social-row a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.55) !important;
  transition: all 0.22s ease !important;
  text-decoration: none;
  flex-shrink: 0;
}
.social-row a svg { display: block; flex-shrink: 0; }
.social-row a:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ============================================================
   MONOCHROME FIX — Mobile nav white + nav hover clean
   ============================================================ */

/* Mobile nav: white panel, dark text — override old dark panel */
@media (max-width: 968px) {
  .nav-links {
    background: #FFFFFF !important;
    box-shadow: -12px 0 60px rgba(0,0,0,0.18) !important;
  }
  .nav-links a:not(.nav-cta) {
    color: #0A0A0A !important;
    border-bottom: 1px solid #E8E8E8 !important;
  }
  .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta).active {
    color: #0A0A0A !important;
    padding-left: 10px !important;
    background: #F5F5F5 !important;
    border-radius: 6px !important;
  }
  .nav-links .nav-cta {
    background: #0A0A0A !important;
    color: #fff !important;
  }
  /* Hamburger icon dark on white header */
  .nav-toggle span { background: #0A0A0A !important; }
  /* When nav open, keep hamburger dark (visible on white header) */
  body.nav-open .nav-toggle span { background: #0A0A0A !important; }
  /* Overlay is a subtle dark scrim behind the white panel */
  .nav-overlay { background: rgba(0,0,0,0.40) !important; }
}

/* Desktop nav: remove border-bottom on hover (just colour change) */
.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #0A0A0A !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

/* section-alt on dark sections: eyebrow override so text is visible */
.section-navy .eyebrow,
.section-navy .eyebrow::before { color: rgba(255,255,255,0.50) !important; background: rgba(255,255,255,0.50) !important; }

/* icon-badge — never go black */
.icon-badge { color: #0A0A0A !important; background: #F0F0F0 !important; }
.info-card:hover .icon-badge { background: #E8E8E8 !important; }

/* Ensure section-alt cards on light grey are white, not grey-on-grey */
.section-alt .info-card,
.section-alt .step-card,
.section-alt .portfolio-card {
  background: #FFFFFF !important;
}

/* hl-row hover — subtle left-border, no black fill */
.hl-row:hover .hl-body h3 { color: #0A0A0A !important; }

/* Testimonial stars gold */
.stars { color: #C9A227 !important; }

/* Page header breadcrumb link */
.breadcrumb a { color: rgba(255,255,255,0.65) !important; }
.breadcrumb a:hover { color: #FFFFFF !important; }