/* =========================================================
   DREAM HOUSE — Karachi Property House
   Design system: brass address-plaque motif, editorial serif
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ink:        #12203A;   /* deep navy-charcoal, headings & dark panels */
  --ink-soft:   #2C3A54;
  --brass:      #B78A46;   /* plaque metal, the signature accent */
  --brass-dark: #8F6A32;
  --emerald:    #24463B;   /* lawn green, CTA hover / secondary accent */
  --cream:      #F6F1E7;   /* paper background */
  --cream-line: #E4DAC8;   /* hairline rule on cream */
  --charcoal:   #201C16;   /* body text */
  --white:      #FFFFFF;

  --serif: 'Fraunces', serif;
  --sans:  'Work Sans', sans-serif;

  --max: 1180px;

  /* internal build id, base64 — do not expose in UI */
  --build-id: "UGljb0NURntjNTVfYzRuX2gxZDNfczNjcjN0c30=";
}

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

html{ scroll-behavior:smooth; }

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

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

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

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family: var(--sans); font-size: 0.72rem; font-weight:600;
  letter-spacing: 0.22em; text-transform:uppercase;
  color: var(--brass-dark);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background: var(--brass);
}
.eyebrow.on-dark{ color: var(--brass); }

h1,h2,h3,h4{ font-family: var(--serif); font-weight:500; color: var(--ink); letter-spacing: -0.01em; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background: rgba(246,241,231,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px; max-width: var(--max); margin:0 auto;
}
.brand{
  font-family: var(--serif); font-size: 1.5rem; color: var(--ink); font-weight:600;
  display:flex; align-items:baseline; gap:6px;
}
.brand .dot{ color: var(--brass); }
.brand .sub{ font-family: var(--sans); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--brass-dark); font-weight:600; margin-left:6px; }

.nav-links{ display:flex; gap:38px; align-items:center; }
.nav-links a{
  font-size:0.92rem; font-weight:500; color: var(--ink-soft); position:relative; padding:4px 0;
  transition: color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--brass);
  transition: width .25s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.current{ color: var(--brass-dark); font-weight:600; }

.nav-cta{
  padding:10px 22px; border:1px solid var(--ink); border-radius:2px;
  font-size:0.85rem; font-weight:600;
  transition: all .25s ease;
}
.nav-cta:hover{ background: var(--ink); color: var(--white); }

.mobile-only{ display:none; }
.desktop-only{ display:inline-flex; }
@media (max-width:900px){
  .mobile-only{ display:block; margin-top:10px; }
  .desktop-only{ display:none; }
}

#hamburger, #close-menu{ display:none; cursor:pointer; }
#hamburger svg, #close-menu svg{ width:26px; height:26px; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; top:0; right:-280px; width:280px; height:100vh;
    background: var(--ink); flex-direction:column; align-items:flex-start;
    padding: 90px 32px 40px; gap:26px; transition: right .3s ease; z-index:200;
  }
  .nav-links.open{ right:0; }
  .nav-links a{ color: var(--white); font-size:1.05rem; }
  .nav-links a:hover{ color: var(--brass); }
  .nav-links a.current{ color: var(--brass); }
  .nav-cta{ border-color: var(--white); color:var(--white); }
  #hamburger{ display:block; }
  #close-menu{ display:block; position:fixed; top:26px; right:26px; z-index:201; color:var(--white); }
  .nav-links:not(.open) ~ #close-menu, #close-menu{ display:none; }
  .nav-links.open ~ .scrim{ display:block; }
}
.scrim{ display:none; position:fixed; inset:0; background:rgba(18,32,58,0.4); z-index:150; }

/* =========================================================
   PLAQUE — the signature element
   A brass address plaque, used on hero, cards, section tags
   ========================================================= */
.plaque{
  position:relative;
  display:inline-flex; flex-direction:column; gap:4px;
  background: linear-gradient(180deg,#c79c57,#a67a3a);
  color: #241a08;
  padding: 14px 22px;
  border: 1px solid #7d5c28;
  box-shadow: 0 10px 24px rgba(18,32,58,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.plaque::before, .plaque::after{
  content:""; position:absolute; top:7px; width:5px; height:5px; border-radius:50%;
  background: #5b4218; box-shadow: 0 42px 0 #5b4218;
}
.plaque::before{ left:7px; }
.plaque::after{ right:7px; }
.plaque .plaque-eyebrow{
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; opacity:0.75;
}
.plaque .plaque-title{
  font-family: var(--serif); font-size:1.05rem; font-weight:600; line-height:1.2;
}
.plaque.small{ padding:10px 16px; }
.plaque.small .plaque::before,.plaque.small::after{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(18,32,58,0.55), rgba(18,32,58,0.75)), url('../img/hero-villa.jpg') center/cover no-repeat;
  padding: 140px 0 90px;
  color: var(--white);
}
.hero-grid{
  display:grid; grid-template-columns: 1.3fr 0.9fr; gap:60px; align-items:end;
  max-width: var(--max); margin:0 auto; padding:0 32px; width:100%;
}
.hero h1{
  color: var(--white);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height:1.05;
  margin: 18px 0 24px;
}
.hero h1 em{ font-style:italic; color: var(--brass); }
.hero p.lede{
  max-width: 480px; font-size:1.08rem; font-weight:300; color: #E9E4D8;
}
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.hero-plaque-col{ display:flex; justify-content:flex-end; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-plaque-col{ justify-content:flex-start; }
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 30px; font-size:0.92rem; font-weight:600;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition: all .25s ease;
}
.btn-primary{ background: var(--brass); color:#241a08; }
.btn-primary:hover{ background:#c79c57; transform:translateY(-2px); box-shadow:0 10px 20px rgba(183,138,70,0.35); }
.btn-outline{ border-color: rgba(255,255,255,0.6); color: var(--white); }
.btn-outline:hover{ background: rgba(255,255,255,0.12); }
.btn-dark{ background: var(--ink); color: var(--white); }
.btn-dark:hover{ background: var(--emerald); }

/* stat strip under hero */
.stat-strip{
  background: var(--ink); color:var(--white);
}
.stat-strip .wrap{
  display:flex; justify-content:space-between; padding: 30px 32px; flex-wrap:wrap; gap:24px;
}
.stat{ text-align:left; }
.stat .num{ font-family:var(--serif); font-size:2.1rem; color: var(--brass); }
.stat .label{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:#B7C0CF; margin-top:4px; }

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
.section{ padding: 108px 0; }
.section.tight{ padding: 80px 0; }
.section.on-cream{ background: var(--cream); }
.section.on-ink{ background: var(--ink); color: #DCE1E9; }
.section.on-ink h2{ color: var(--white); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:56px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); max-width:620px; }
.section-head p{ max-width:420px; color:#5C5648; }
.on-ink .section-head p{ color:#AEB6C4; }

.divider{ border:none; border-top:1px solid var(--cream-line); margin: 0; }
.divider.on-ink{ border-top-color: rgba(255,255,255,0.12); }

/* ---------- listings / property grid ---------- */
.listing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
.listing-card{
  position:relative; background:var(--white); border:1px solid var(--cream-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.listing-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px rgba(18,32,58,0.14); }
.listing-photo{ position:relative; height: 240px; overflow:hidden; }
.listing-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.listing-card:hover .listing-photo img{ transform: scale(1.06); }
.listing-tag{
  position:absolute; left:16px; bottom:-18px;
}
.listing-status{
  position:absolute; top:14px; right:14px; background: rgba(18,32,58,0.85); color:var(--white);
  font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; padding:6px 10px; font-weight:600;
}
.listing-body{ padding: 34px 20px 22px; }
.listing-body h3{ font-size:1.2rem; margin-bottom:8px; }
.listing-body .addr{ font-size:0.86rem; color:#6B6455; margin-bottom:16px; }
.listing-meta{ display:flex; gap:18px; font-size:0.82rem; color: var(--ink-soft); border-top:1px solid var(--cream-line); padding-top:14px; }
.listing-meta span{ display:flex; align-items:center; gap:6px; }

@media (max-width: 980px){ .listing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .listing-grid{ grid-template-columns:1fr; } }

/* ---------- process / numbered steps (real sequence) ---------- */
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--cream-line); }
.process-step{ padding: 40px 34px; border-right:1px solid var(--cream-line); position:relative; }
.process-step:last-child{ border-right:none; }
.process-step .step-num{ font-family:var(--serif); font-size:0.95rem; color: var(--brass-dark); letter-spacing:0.1em; }
.process-step h3{ font-size:1.3rem; margin: 14px 0 12px; }
.process-step p{ font-size:0.94rem; color:#5C5648; }
@media (max-width: 800px){ .process{ grid-template-columns:1fr; } .process-step{ border-right:none; border-bottom:1px solid var(--cream-line); } }

/* ---------- why-us / feature list ---------- */
.feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 50px; }
.feature{ display:flex; gap:18px; }
.feature .mark{ font-family:var(--serif); font-size:1.6rem; color: var(--brass); flex-shrink:0; }
.feature h4{ font-size:1.05rem; margin-bottom:6px; }
.feature p{ font-size:0.92rem; color:#5C5648; }
@media (max-width:700px){ .feature-list{ grid-template-columns:1fr; } }

/* ---------- split panel (image + text) ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.split img{ width:100%; height:100%; object-fit:cover; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split.reverse{ direction:ltr; } }

.frame{ position:relative; }
.frame::after{
  content:""; position:absolute; inset:-14px; border:1px solid var(--brass); z-index:-1;
}

/* ---------- testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.testimonial{ background:var(--white); border:1px solid var(--cream-line); padding:34px 28px; display:flex; flex-direction:column; gap:18px; }
.testimonial .quote{ font-family:var(--serif); font-size:1.05rem; line-height:1.5; color:var(--ink); font-style:italic; }
.testimonial .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonial .who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testimonial .who .name{ font-weight:600; font-size:0.92rem; }
.testimonial .who .role{ font-size:0.78rem; color:#8A8371; }
@media (max-width:980px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.team-card{ background: var(--white); border:1px solid var(--cream-line); }
.team-photo{ height:280px; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(15%); }
.team-info{ padding:26px 22px; position:relative; }
.team-info h3{ font-size:1.15rem; margin-bottom:4px; }
.team-info .role{ font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass-dark); font-weight:600; margin-bottom:14px; }
.team-info p{ font-size:0.9rem; color:#5C5648; }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; } }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: var(--ink); color:var(--white); padding: 80px 0; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border:1px solid rgba(183,138,70,0.35); border-radius:50%;
}
.cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; position:relative; }
.cta-inner h2{ color:var(--white); max-width:520px; }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.form-grid .full{ grid-column: 1 / -1; }
label{ display:block; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }
input, textarea, select{
  width:100%; padding:13px 16px; border:1px solid var(--cream-line); background:var(--white);
  font-family: var(--sans); font-size:0.95rem; color:var(--charcoal); transition: border-color .2s ease;
}
input:focus, textarea:focus, select:focus{ border-color: var(--brass); }
textarea{ resize:vertical; min-height:130px; }

.info-card{
  background: var(--white); border:1px solid var(--cream-line); padding: 30px 26px; display:flex; gap:16px; margin-bottom:18px;
}
.info-card .ic{ font-family:var(--serif); font-size:1.3rem; color: var(--brass-dark); }
.info-card h4{ font-size:0.98rem; margin-bottom:4px; }
.info-card p{ font-size:0.88rem; color:#5C5648; }

/* ---------- map placeholder ---------- */
.map-box{ height:280px; border:1px solid var(--cream-line); overflow:hidden; }
.map-box iframe{ width:100%; height:100%; border:0; filter: grayscale(30%) contrast(1.05); }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-header{
  padding: 168px 0 70px;
  background: linear-gradient(180deg, rgba(18,32,58,0.68), rgba(18,32,58,0.82)), var(--bgimg, url('../img/about-hero.jpg')) center/cover no-repeat;
  color: var(--white);
}
.page-header h1{ color: var(--white); font-size: clamp(2.2rem, 4vw, 3.2rem); }
.crumbs{ font-size:0.82rem; color:#C6CCD8; margin-top:14px; }
.crumbs a{ color: var(--brass); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color:#C6CCD8; padding: 74px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap:44px; margin-bottom:50px; }
.footer-grid h4{ color: var(--white); font-family:var(--sans); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px; font-weight:600; }
.footer-grid p{ font-size:0.9rem; line-height:1.7; color:#9FA9BB; }
.footer-grid ul li{ margin-bottom:12px; }
.footer-grid ul a{ font-size:0.9rem; color:#C6CCD8; transition:color .2s ease; }
.footer-grid ul a:hover{ color: var(--brass); }
.foot-brand{ font-family:var(--serif); font-size:1.6rem; color:var(--white); margin-bottom:16px; }
.foot-brand .dot{ color:var(--brass); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:#8992A3; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all .2s ease; }
.footer-social a:hover{ border-color: var(--brass); color: var(--brass); }

@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- utility text (do not remove, used by legacy widget) ---------- */
.ghost-text{
  color: var(--cream);           /* same as page background — invisible, but present in DOM/selectable text */
  font-size: 1px;
  user-select: all;
  letter-spacing: -1px;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }