/* =========================================================================
   PROPLINE — Landmark Real Estate Marketplace
   Design system: dark-editorial, gallery-grade. "Landmark projects as art."
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Palette — near-black base, warm ivory, brass accent (Compass/Hubtown discipline) */
  --ink:            #0A0B0D;   /* base bg */
  --ink-2:          #101216;   /* raised surface */
  --ink-3:          #171A1F;   /* card */
  --ink-4:          #1F232A;   /* hover surface */
  --line:           rgba(255,255,255,.09);
  --line-2:         rgba(255,255,255,.16);
  --paper:          #F4F1EA;   /* light section bg */
  --paper-ink:      #16181C;   /* text on paper */

  --fog:            #C7CBD2;   /* secondary text on dark */
  --fog-2:          #8C919B;   /* tertiary text */
  --white:          #F6F7F9;

  --brass:          #C2A26A;   /* primary accent */
  --brass-2:        #D8BE8C;
  --brass-deep:     #9C7F49;
  --sage:           #7E8C7A;   /* rare secondary accent */
  --danger:         #E2725B;
  --ok:             #7FB77E;

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Playfair Display", Georgia, serif;

  /* Fluid type scale */
  --fs-hero:   clamp(3.2rem, 9vw, 8.5rem);
  --fs-h1:     clamp(2.4rem, 5.2vw, 4.6rem);
  --fs-h2:     clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3:     clamp(1.35rem, 2.2vw, 1.85rem);
  --fs-lg:     clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:   1rem;
  --fs-sm:     .875rem;
  --fs-xs:     .78rem;
  --fs-micro:  .68rem;

  /* Space scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; --s11:11rem;

  /* Radii */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0,0,0,.35);
  --sh-md: 0 12px 40px rgba(0,0,0,.45);
  --sh-lg: 0 30px 80px rgba(0,0,0,.55);

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);        /* expo-out — luxe reveal */
  --ease-2: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--white);
  font-size:var(--fs-body);
  line-height:1.65;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--brass);color:var(--ink)}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:99px;border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--brass-deep)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:380;line-height:1.04;letter-spacing:-.02em}
.serif{font-family:var(--serif)}
.display{font-family:var(--serif);font-weight:340;line-height:.98;letter-spacing:-.03em}
.italic{font-style:italic}
.eyebrow{
  font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--brass);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass);opacity:.6;display:inline-block}
.muted{color:var(--fog)}
.dim{color:var(--fog-2)}
.lead{font-size:var(--fs-lg);color:var(--fog);line-height:1.6;font-weight:340}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.section-pad{padding-block:clamp(4rem,9vw,9rem)}
.section-pad-sm{padding-block:clamp(3rem,6vw,5.5rem)}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper h1,.paper h2,.paper h3{color:var(--paper-ink)}
.paper .muted{color:#55585E}
.paper .eyebrow{color:var(--brass-deep)}
.paper .eyebrow::before{background:var(--brass-deep)}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);
  flex-wrap:wrap;margin-bottom:var(--s7)}
.section-head h2{max-width:16ch}

.grid{display:grid;gap:var(--s5)}
@media(min-width:640px){.g-sm-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-md-2{grid-template-columns:repeat(2,1fr)}.g-md-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.g-lg-3{grid-template-columns:repeat(3,1fr)}.g-lg-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.7em;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.01em;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform;position:relative;white-space:nowrap;
}
.btn-primary{background:var(--brass);color:#1A1408}
.btn-primary:hover{background:var(--brass-2);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--white)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--brass-2);transform:translateY(-2px)}
.btn-lg{padding:1.1em 2.2em;font-size:var(--fs-body)}
.btn-sm{padding:.6em 1.1em;font-size:var(--fs-xs)}
.btn .ico{width:1.05em;height:1.05em;transition:transform .5s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.link-underline{position:relative;display:inline-flex;align-items:center;gap:.5em;color:var(--white);
  font-size:var(--fs-sm);font-weight:500}
.link-underline::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}
.link-underline:hover{color:var(--brass)}

/* ---------- Chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.4em .85em;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:500;border:1px solid var(--line-2);color:var(--fog);
  background:rgba(255,255,255,.02);transition:.25s;cursor:pointer}
.chip.is-active{background:var(--brass);color:#1A1408;border-color:var(--brass)}
.chip:hover{border-color:var(--brass);color:var(--white)}
.chip.is-active:hover{color:#1A1408}
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.35em .7em;border-radius:var(--r-xs);
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.badge-new{background:rgba(194,162,106,.16);color:var(--brass-2)}
.badge-rera{background:rgba(127,183,126,.14);color:var(--ok)}
.badge-hot{background:rgba(226,114,91,.16);color:var(--danger)}

/* ---------- Header / Nav ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(10,11,13,.72);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-size:1.45rem;
  letter-spacing:-.02em;font-weight:420}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{font-weight:420}
.brand .tld{color:var(--brass)}
.nav-links{display:none;gap:var(--s6);align-items:center}
.nav-links a{font-size:var(--fs-sm);color:var(--fog);font-weight:450;transition:color .3s;position:relative}
.nav-links a:hover{color:var(--white)}
.nav-actions{display:flex;align-items:center;gap:var(--s3)}
.nav-toggle{display:flex;flex-direction:column;gap:5px;width:26px;padding:4px 0}
.nav-toggle span{height:1.5px;background:var(--white);width:100%;transition:.4s var(--ease);transform-origin:center}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1000px){.nav-links{display:flex}.nav-toggle{display:none}}

/* Mobile drawer */
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--ink);padding:calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;gap:var(--s4);transform:translateY(-100%);transition:transform .6s var(--ease);
  visibility:hidden}
.nav-open .mobile-menu{transform:translateY(0);visibility:visible}
.mobile-menu a{font-family:var(--serif);font-size:2rem;color:var(--fog);padding-block:.3em;border-bottom:1px solid var(--line)}
.mobile-menu a:hover{color:var(--brass)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:var(--s9) var(--s6)}
.footer-grid{display:grid;gap:var(--s7);grid-template-columns:1fr;margin-bottom:var(--s8)}
@media(min-width:800px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer-col h5{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fog-2);margin-bottom:var(--s4);font-weight:600}
.footer-col a{display:block;color:var(--fog);font-size:var(--fs-sm);padding-block:.35em;transition:.25s}
.footer-col a:hover{color:var(--brass);transform:translateX(4px)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid var(--line);color:var(--fog-2);font-size:var(--fs-xs)}

/* ---------- Reveal animation (progressive-enhance; visible if JS off) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
.no-js .reveal,.no-js .reveal-img,.no-js [data-stagger]>*{opacity:1;transform:none;clip-path:none}

/* ---------- Utilities ---------- */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}
.wrap{flex-wrap:wrap}.mt-4{margin-top:var(--s4)}.mt-6{margin-top:var(--s6)}.mt-8{margin-top:var(--s8)}
.tc{text-align:center}.mx-auto{margin-inline:auto}.maxw-60{max-width:60ch}.maxw-40{max-width:40ch}
.rel{position:relative}.hidden{display:none}
.divider{height:1px;background:var(--line);border:0;margin-block:var(--s6)}