/* ===========================================================
   I BUY REAL ESTATE — "Explore Areas" — full visual redesign
   Editorial / gallery direction: warm brass accent, deep near-black
   green, cream paper, oversized serif type, bento grid, image-overlay
   cards, film-grain texture. Class names kept identical to the
   original markup — this file is a drop-in replacement.
   =========================================================== */

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

:root{
  --green-dk:   #153A22;
  --green-dk2:  #1F4A2C;
  --ink-deep:   #0B1F14;   /* near-black green — hero/CTA backdrops */
  --mint:       #4FBD64;
  --mint-soft:  #7ED78E;
  --gold:       #C6A15B;   /* new premium accent */
  --gold-soft:  #E4CFA0;
  --paper:      #FFFDF9;   /* warm off-white, not pure white */
  --paper-alt:  #F4EFE4;
  --ink:        #161A16;
  --ink-soft:   #5E655C;
  --line:       #E7E0D2;
  --radius: 22px;
  --radius-sm: 12px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* film-grain texture, site-wide, purely decorative */
body::before{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 .4em;
}
p{ margin:0 0 1em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- header ---------- */
.site-header{
  background:rgba(255,253,249,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:box-shadow .25s var(--ease), padding .25s var(--ease);
}
.site-header.scrolled{ box-shadow:0 4px 24px rgba(11,31,20,.10); }
.site-header .bar{
  max-width:1360px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  height:92px;
  transition:height .25s var(--ease);
}
.site-header.scrolled .bar{ height:70px; }

.logo{ display:flex; align-items:center; }
.logo-img{ height:42px; width:auto; display:block; transition:height .25s var(--ease); }
.site-header.scrolled .logo-img{ height:34px; }

.header-nav{ display:flex; align-items:center; gap:32px; }
.header-nav .nav-links{ display:flex; align-items:center; gap:28px; }
.header-nav a{
  font-size:14px; font-weight:500; color:var(--ink);
  position:relative; padding:4px 0;
}
.header-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--gold); transition:width .25s var(--ease);
}
.header-nav a:hover{ color:var(--ink); }
.header-nav a:hover::after{ width:100%; }
.header-nav a.active{ color:var(--green-dk); }
.header-nav a.active::after{ width:100%; }
.header-nav .divider{ width:1px; height:20px; background:var(--line); }
.wa-header-btn{
  width:40px; height:40px; border-radius:50%;
  background:var(--ink-deep); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .2s var(--ease), background .2s;
}
.wa-header-btn svg path:first-child{ stroke:none !important; fill:#fff !important; }
.wa-header-btn svg path:last-child{ fill:var(--ink-deep) !important; }
.wa-header-btn:hover{ transform:scale(1.08); background:var(--gold); }
.wa-header-btn svg{ width:19px; height:19px; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle svg{ width:24px; height:24px; color:var(--green-dk); }
@media (max-width:900px){
  .header-nav .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column;
    align-items:flex-start; gap:0; padding:6px 0; box-shadow:0 12px 24px rgba(11,31,20,.1);
  }
  .header-nav .nav-links.mobile-open{ display:flex; }
  .header-nav .nav-links a{ width:100%; padding:14px 28px; }
  .header-nav .nav-links a::after{ display:none; }
  .header-nav .nav-links .divider{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- "More" dropdown ---------- */
.nav-more{ position:relative; }
.nav-more > a{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.nav-more .chev{ width:11px; height:11px; transition:transform .2s var(--ease); }
.nav-more:hover .chev, .nav-more:focus-within .chev{ transform:rotate(180deg); }
.nav-more .dropdown{
  position:absolute; top:100%; left:0; margin-top:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 20px 44px rgba(11,31,20,.16);
  min-width:190px; padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-more:hover .dropdown, .nav-more:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-more .dropdown a{ display:block; padding:9px 12px; font-size:14px; border-radius:8px; }
.nav-more .dropdown a::after{ display:none; }
.nav-more .dropdown a:hover{ background:var(--paper-alt); }
@media (max-width:900px){
  .nav-more .dropdown{ position:static; box-shadow:none; border:0; margin-top:0; opacity:1; visibility:visible; transform:none; display:none; padding-left:14px; }
  .nav-more:hover .dropdown, .nav-more:focus-within .dropdown{ display:block; }
}

/* ---------- crumb bar ---------- */
.crumb-bar{ background:var(--paper-alt); border-bottom:1px solid var(--line); padding:12px 0; }
.crumb-bar .wrap{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.crumb-bar a{ color:var(--green-dk); font-weight:600; }
.crumb-bar a:hover{ color:var(--gold); }

/* ---------- floating WhatsApp button ---------- */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:200;
  display:flex; align-items:center; gap:11px;
  padding:14px 22px 14px 15px; border-radius:100px;
  background:var(--ink-deep); color:#fff;
  box-shadow:0 10px 30px rgba(11,31,20,.38);
  transition:transform .2s var(--ease), box-shadow .2s, background .2s;
}
.wa-float svg{ width:27px; height:27px; flex-shrink:0; display:block; }
.wa-float svg path:first-child{ fill:#fff !important; }
.wa-float svg path:last-child{ fill:var(--ink-deep) !important; }
.wa-float .label{ font-size:14px; font-weight:600; white-space:nowrap; letter-spacing:.01em; }
.wa-float:hover{ transform:translateY(-2px); background:var(--gold); box-shadow:0 14px 34px rgba(198,161,91,.42); }
.wa-float:hover svg path:last-child{ fill:var(--gold) !important; }
@media (max-width:600px){
  .wa-float{ right:14px; bottom:14px; padding:12px 18px 12px 13px; gap:9px; }
  .wa-float svg{ width:23px; height:23px; }
  .wa-float .label{ font-size:12.5px; }
}
@media (max-width:400px){ .wa-float .label{ display:none; } .wa-float{ padding:14px; } }

/* ---------- scroll-reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- scroll cue (hero) ---------- */
.hub-hero::before, .area-hero::before{
  content:"Scroll"; position:absolute; right:34px; bottom:30px; z-index:2;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:12px;
  animation:scroll-pulse 2.6s ease-in-out infinite;
}
.hub-hero::after, .area-hero::after{ content:""; position:absolute; right:39px; bottom:76px; width:1px; height:34px; background:rgba(255,255,255,.35); z-index:2; }
@keyframes scroll-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.85; } }
@media (max-width:640px){ .hub-hero::before, .area-hero::before, .hub-hero::after, .area-hero::after{ display:none; } }

/* ---------- hub hero (index) ---------- */
.hub-hero{
  color:#fff;
  min-height:min(78vh, 640px);
  display:flex; align-items:center;
  padding:110px 0 60px;
  position:relative; overflow:hidden;
  background:var(--ink-deep);
}
.hub-hero-collage{
  position:absolute; inset:0; z-index:0;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.hub-hero-collage .tile{ position:relative; overflow:hidden; height:100%; }
.hub-hero-collage .tile img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.12) contrast(1.03) brightness(.88);
  transform:scale(1.04);
}
.hub-hero .wrap{ position:relative; z-index:2; }
.hub-hero-collage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(9,26,17,.9) 0%, rgba(9,26,17,.8) 30%, rgba(9,26,17,.56) 50%, rgba(9,26,17,.28) 68%, rgba(9,26,17,.06) 85%, transparent 100%),
    linear-gradient(0deg, rgba(9,26,17,.32) 0%, transparent 20%),
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(198,161,91,.12), transparent 60%);
}
.hub-hero h1{
  color:#fff; font-size:clamp(38px,6.4vw,72px); max-width:16ch; line-height:1.02;
  font-weight:600;
}
.hub-hero .lede{ max-width:52ch; font-size:17.5px; color:rgba(255,255,255,.72); margin-top:20px; }
@media (max-width:900px){
  .hub-hero-collage{ grid-template-columns:repeat(3,1fr); }
  .hub-hero-collage .tile:nth-child(4), .hub-hero-collage .tile:nth-child(5){ display:none; }
}
@media (max-width:600px){
  .hub-hero-collage{ grid-template-columns:repeat(2,1fr); }
  .hub-hero-collage .tile:nth-child(3){ display:none; }
  .hub-hero-collage::after{ background:
    linear-gradient(180deg, rgba(11,31,20,.65) 0%, rgba(11,31,20,.94) 62%, rgba(11,31,20,.98) 100%),
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(198,161,91,.16), transparent 60%);
  }
}

/* ---------- area index grid — bento layout ---------- */
main.wrap{ padding-top:64px; padding-bottom:96px; }
.area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.area-grid .area-card:nth-child(1){ grid-column:span 2; }
.area-grid .area-card:nth-child(1) .thumb{ aspect-ratio:21/9; }
.area-grid .area-card:last-child{
  grid-column:1/-1; display:flex; flex-direction:row; align-items:stretch;
  background:var(--ink-deep); border-color:transparent;
}
.area-grid .area-card:last-child .thumb{ width:170px; aspect-ratio:auto; flex-shrink:0; background:transparent; }
.area-grid .area-card:last-child .body{ flex:1; padding:30px 34px; justify-content:center; }
.area-grid .area-card:last-child .tag{ color:var(--gold-soft); }
.area-grid .area-card:last-child h3{ color:#fff; }
.area-grid .area-card:last-child p{ color:rgba(255,255,255,.62); }
.area-grid .area-card:last-child .go{ color:var(--gold-soft); }
@media (max-width:920px){
  .area-grid{ grid-template-columns:repeat(2,1fr);}
  .area-grid .area-card:nth-child(1){ grid-column:1/-1; }
}
@media (max-width:600px){
  .area-grid{ grid-template-columns:1fr;}
  .area-grid .area-card:last-child{ flex-direction:column; }
  .area-grid .area-card:last-child .thumb{ width:100%; aspect-ratio:16/9; }
}

.area-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .32s var(--ease), transform .32s var(--ease), border-color .32s;
}
.area-card:hover{ box-shadow:0 26px 54px rgba(11,31,20,.18); transform:translateY(-6px); border-color:transparent; }
.area-card .thumb{ aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--paper-alt); }
.area-card .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(11,31,20,.55) 100%);
  opacity:0; transition:opacity .35s var(--ease);
}
.area-card:hover .thumb::after{ opacity:1; }
.area-card .thumb img{
  width:100%; height:100%; object-fit:cover; filter:saturate(1.06) contrast(1.03);
}
/* NOTE: hover transform (scale + cursor parallax) is driven entirely by GSAP
   in initCardInteractions() so the two systems never fight over the same
   `transform` property. No-JS fallback below covers the no-GSAP case. */
.no-card-motion .area-card:hover .thumb img{ transform:scale(1.06); transition:transform .5s var(--ease); }
.area-card .num{
  position:absolute; top:14px; left:14px; background:rgba(255,253,249,.9); color:var(--ink-deep);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; padding:6px 11px; border-radius:20px;
  backdrop-filter:blur(6px);
}
.area-card .body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; }
.area-card .tag{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.area-card h3{ font-size:22px; margin-bottom:9px; line-height:1.18; }
.area-card p{ font-size:14.5px; color:var(--ink-soft); flex:1; margin-bottom:18px; }
.area-card .go{ font-size:13px; font-weight:600; color:var(--green-dk); display:inline-flex; align-items:center; gap:7px; }
.area-card .go svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.area-card:hover .go svg{ transform:translateX(5px); }

/* ---------- area hero (detail pages) ---------- */
.area-hero{ position:relative; color:#fff; min-height:min(82vh,660px); display:flex; align-items:flex-end; overflow:hidden; }
.area-hero .bg{ position:absolute; inset:0; z-index:0; }
.area-hero .bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:saturate(1.08) contrast(1.04); }
.no-js-zoom .area-hero .bg img{ animation:hero-zoom 18s ease-out forwards; }
@keyframes hero-zoom{ from{ transform:scale(1.1);} to{ transform:scale(1);} }
.area-hero .bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,20,.15) 0%, rgba(11,31,20,.5) 50%, rgba(8,22,14,.95) 100%);
}
.area-hero .content{ position:relative; z-index:1; width:100%; padding:70px 0 46px; }
.area-hero .eyebrow{ color:var(--gold-soft); }
.area-hero .eyebrow::before{ background:var(--gold-soft); }
.area-hero h1{ color:#fff; font-size:clamp(40px,7vw,76px); margin-bottom:10px; line-height:.98; }
.area-hero .tagline{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:19px; color:rgba(255,255,255,.82); }
.area-hero .stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border-top:1px solid rgba(255,255,255,.2); padding-top:22px; }
.area-hero .stat{ padding-right:40px; margin-right:40px; border-right:1px solid rgba(255,255,255,.16); }
.area-hero .stat:last-child{ border-right:none; }
.area-hero .stat b{ display:block; font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:#fff; }
.area-hero .stat span{ display:block; font-size:12.5px; color:rgba(255,255,255,.65); max-width:20ch; margin-top:5px; }
@media (max-width:640px){ .area-hero .stat{ padding-right:22px; margin-right:22px; } }

/* ---------- generic content blocks ---------- */
.block{ padding:76px 0; }
.block.alt{ background:var(--paper-alt); }
.block h2{ font-size:clamp(28px,3.8vw,40px); }
.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; }
@media (max-width:780px){ .two-col{ grid-template-columns:1fr; } }
.body-copy p{ font-size:17px; color:var(--ink); }
.body-copy p:last-child{ margin-bottom:0; }
.callout{ background:var(--ink-deep); border-left:3px solid var(--gold); padding:28px 30px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.callout .eyebrow{ color:var(--gold-soft); }
.callout .eyebrow::before{ background:var(--gold-soft); }
.callout p{ font-size:15.5px; color:rgba(255,255,255,.85); margin:0; }
.callout p + p{ margin-top:.8em; }

.photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.photo-pair.trio{ grid-template-columns:repeat(3,1fr); }
.photo-pair figure{ margin:0; overflow:hidden; border-radius:var(--radius); }
.photo-pair img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); filter:saturate(1.05) contrast(1.02); }
.photo-pair figure:hover img{ transform:scale(1.07); }
.photo-pair figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; }
@media (max-width:820px){ .photo-pair.trio{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .photo-pair{ grid-template-columns:1fr; } }

/* ---------- landmark grid — image-overlay cards ---------- */
.landmark-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:12px; }
.landmark{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  flex:1 1 230px; max-width:380px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
  background:var(--paper-alt);
}
.landmark:hover{ box-shadow:0 22px 44px rgba(11,31,20,.22); transform:translateY(-5px); }
.landmark .thumb{ position:absolute; inset:0; aspect-ratio:auto; background:none; }
.landmark .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:saturate(1.05) contrast(1.02); }
.landmark:hover .thumb img{ transform:scale(1.09); }
.landmark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,22,14,.88) 100%);
  pointer-events:none;
}
.landmark .cap{ position:absolute; left:0; right:0; bottom:0; padding:16px 16px 16px; z-index:1; }
.landmark h4{ font-size:15.5px; margin-bottom:4px; color:#fff; }
.landmark .status{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-soft); }
.landmark .status.build{ color:var(--gold-soft); }

/* ---------- feature block ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(11,31,20,.1); }
.feature .img{ aspect-ratio:1/1; overflow:hidden; }
.feature .img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:saturate(1.05) contrast(1.02); }
.feature:hover .img img{ transform:scale(1.06); }
.feature .txt{ padding:48px; display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.feature .txt p{ font-size:16px; }
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } .feature .img{ aspect-ratio:16/9; } }

/* ---------- projects list — image-overlay cards ---------- */
.project-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:12px; }
.project{
  position:relative; aspect-ratio:4/3.4; border-radius:var(--radius); overflow:hidden;
  background:var(--paper-alt); flex:1 1 260px; max-width:420px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.project:hover{ box-shadow:0 22px 44px rgba(11,31,20,.22); transform:translateY(-5px); }
.project .thumb{ position:absolute; inset:0; aspect-ratio:auto; background:none; }
.project .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:saturate(1.05) contrast(1.02); }
.project:hover .thumb img{ transform:scale(1.08); }
.project::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(8,22,14,.9) 100%);
  pointer-events:none;
}
.project .cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 24px; z-index:1; }
.project .kind{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; display:block; }
.project h4{ font-size:19px; margin-bottom:7px; color:#fff; }
.project p{ font-size:13.5px; color:rgba(255,255,255,.78); margin:0; }
/* clean fallback for project cards with no real photo yet — no fake placeholder graphic */
.project.no-photo{
  aspect-ratio:auto; background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; padding:28px 24px; min-height:180px;
}
.project.no-photo::after{ display:none; }
.project.no-photo .cap{ position:static; padding:0; }
.project.no-photo h4{ color:var(--ink); }
.project.no-photo p{ color:var(--ink-soft); }
.project.no-photo:hover{ transform:none; box-shadow:0 8px 22px rgba(11,31,20,.1); border-color:var(--gold-soft); }

/* ---------- CTA band ---------- */
.cta{
  background:
    radial-gradient(circle at 92% 15%, rgba(198,161,91,.24), transparent 60%),
    linear-gradient(135deg, var(--ink-deep), var(--green-dk));
  color:#fff; border-radius:var(--radius);
  padding:56px 56px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta h3{ margin:0; font-size:clamp(24px,3vw,30px); max-width:440px; color:#fff; position:relative; }
.cta .btn-group{ display:flex; gap:14px; flex-wrap:wrap; position:relative; }
.cta a.btn{
  background:var(--gold); color:var(--ink-deep); font-weight:700; font-size:13.5px; letter-spacing:.03em;
  padding:15px 30px; border-radius:100px; border:1px solid var(--gold);
  transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.cta a.btn:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.no-magnetic .cta a.btn:hover{ transform:translateY(-2px); }
.cta a.btn-outline{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
  font-size:13.5px; font-weight:600; padding:14.5px 28px; border-radius:100px;
  transition:border-color .2s, color .2s, transform .2s;
}
.cta a.btn-outline:hover{ border-color:var(--gold); color:var(--gold-soft); }
.no-magnetic .cta a.btn-outline:hover{ transform:translateY(-2px); }

/* ---------- info grid (hotels & everyday life blocks) ---------- */
.info-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px; margin-top:28px; }
.info-col{ flex:1 1 260px; max-width:420px; }
.info-col h4{ font-family:'Fraunces',serif; font-weight:600; font-size:16.5px; margin-bottom:12px; color:var(--green-dk); }
.info-col ul{ list-style:none; margin:0; padding:0; }
.info-col li{ font-size:14px; line-height:1.5; color:var(--ink-soft); padding:10px 0; border-top:1px solid var(--line); }
.info-col li:first-child{ border-top:none; padding-top:0; }
.info-col li b{ color:var(--ink); font-weight:600; }
.lede-wide{ max-width:70ch; font-size:16px; color:var(--ink-soft); margin-top:10px; }
@media (max-width:820px){ .info-grid{ gap:24px; } .info-col{ max-width:none; flex-basis:100%; } }

/* ---------- animated stat cards (Numbers to know) ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:30px; }
.stat-cards .card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:26px 22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.stat-cards .card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,31,20,.14); border-color:transparent; }
.stat-cards .card b{ display:block; font-family:'Fraunces',serif; font-size:clamp(26px,3vw,34px); font-weight:600; color:var(--green-dk); line-height:1.05; letter-spacing:-0.01em; }
.stat-cards .card span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:9px; line-height:1.45; }
.stat-cards .card.gold b{ color:var(--gold); }

/* case study cards (Yas resale examples) */
.case-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:26px; }
.case-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); overflow:hidden; }
.case-card.has-photo{ padding:0; }
.case-card.has-photo .ph{ height:150px; position:relative; overflow:hidden; }
.case-card.has-photo .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transition:transform .5s var(--ease); }
.case-card.has-photo:hover .ph img{ transform:scale(1.06); }
.case-card.has-photo .body{ padding:22px 24px 24px; }
.case-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(11,31,20,.12); }
.case-card h5{ font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; margin:0 0 4px; color:var(--green-dk); }
.case-card .sub{ font-size:12px; color:var(--ink-soft); margin-bottom:14px; display:block; }
.case-card .row{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--line); }
.case-card .row:last-child{ border-bottom:none; }
.case-card .roi{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.case-card .roi b{ display:block; font-size:26px; font-family:'Fraunces',serif; font-weight:600; color:var(--gold); line-height:1.1; }
.case-card .roi span{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

/* hotel cards: stylised gradient "photo" + facts, since real hotel photography isn't licensed for this build */
.hotel-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px; }
.hotel-card{
  border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); background:var(--paper);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hotel-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,31,20,.16); }
.hotel-card .ph{
  height:104px; position:relative; display:flex; align-items:flex-end; padding:14px;
  background:var(--hotel-grad, linear-gradient(135deg,var(--green-dk),var(--ink-deep)));
  overflow:hidden;
}
.hotel-card .ph.has-photo{ height:160px; background:var(--ink-deep); }
.hotel-card .ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.02); transition:transform .5s var(--ease);
}
.hotel-card:hover .ph img{ transform:scale(1.06); }
.hotel-card .ph.has-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,31,20,.05) 0%, rgba(11,31,20,.5) 100%);
}
.hotel-card .ph::before{
  content:attr(data-mono); position:absolute; right:-6px; top:-18px; font-family:'Fraunces',serif; font-weight:700;
  font-size:64px; color:rgba(255,255,255,.14); line-height:1; pointer-events:none; z-index:1;
}
.hotel-card .ph.has-photo::before{ display:none; }
.hotel-card .ph .stars{
  position:relative; z-index:2; font-size:10.5px; font-weight:600; letter-spacing:.05em; color:#fff;
  background:rgba(0,0,0,.28); padding:4px 9px; border-radius:20px; backdrop-filter:blur(2px);
}
.hotel-card .body{ padding:16px 18px 19px; }
.hotel-card h5{ font-family:'Fraunces',serif; font-weight:600; font-size:15px; margin:0 0 6px; color:var(--ink); line-height:1.25; }
.hotel-card p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55; }

/* ---------- distance cards: "getting around" facts with icons ---------- */
.distance-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:28px; }
.distance-cards .card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:22px 20px; text-align:left;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.distance-cards .card.has-photo{ padding:0; overflow:hidden; }
.distance-cards .card.has-photo .ph{ height:110px; position:relative; overflow:hidden; }
.distance-cards .card.has-photo .ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.02); transition:transform .5s var(--ease);
}
.distance-cards .card.has-photo:hover .ph img{ transform:scale(1.06); }
.distance-cards .card.has-photo .body{ padding:18px 20px 20px; }
.distance-cards .card.has-photo .icon{ margin-top:-38px; margin-bottom:12px; position:relative; z-index:1; box-shadow:0 4px 14px rgba(11,31,20,.2); background:var(--paper); }
.distance-cards .card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,31,20,.14); border-color:transparent; }
.distance-cards .card .icon{
  width:38px; height:38px; border-radius:50%; background:var(--paper-alt);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--green-dk);
}
.distance-cards .card.gold .icon{ color:var(--gold); background:rgba(198,161,91,.12); }
.distance-cards .card .icon svg{ width:17px; height:17px; }
.distance-cards .card b{ display:block; font-family:'Fraunces',serif; font-size:23px; font-weight:600; color:var(--green-dk); line-height:1.1; }
.distance-cards .card.gold b{ color:var(--gold); }
.distance-cards .card span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:7px; line-height:1.4; }

/* ---------- prev/next area nav ---------- */
.area-nav{ display:flex; justify-content:space-between; padding:50px 0 12px; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:14px; }
.area-nav a{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.area-nav a .name{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:21px; text-transform:none; letter-spacing:normal; margin-top:5px; color:var(--green-dk); transition:color .2s; }
.area-nav a:hover .name{ color:var(--gold); }

/* ---------- footer ---------- */
footer{ background:var(--ink-deep); color:rgba(255,255,255,.65); padding:44px 0; font-size:13.5px; border-top:1px solid rgba(255,255,255,.08); }
footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
footer .footer-logo{ height:26px; width:auto; display:block; opacity:.92; }
footer a{ color:rgba(255,255,255,.75); font-weight:500; transition:color .2s; }
footer a:hover{ color:var(--gold-soft); }

/* ---------- history scroll (index) — a fast 1761→2026 counter ----------
   Reuses the same counter mechanism as the rest of the site (site.js
   animateCount, now with an optional data-count-from starting value) so
   the reduced-motion / no-JS behaviour is identical and already proven:
   with no JS, or with prefers-reduced-motion, the final year (2026)
   just renders directly — never stuck at the 1761 starting value. */
.history-scroll{
  background: transparent; color: var(--ink);
  padding: 88px 0 76px; text-align: center;
}
.history-scroll-head .eyebrow{ justify-content: center; margin-bottom: 0; }
.history-counter{ max-width: 560px; margin: 0 auto; }
.history-year{
  display: block; font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(64px, 11vw, 132px); line-height: 1;
  color: var(--gold); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.history-counter p{
  max-width: 42ch; margin: 18px auto 0; color: var(--ink-soft);
  font-size: 15.5px; line-height: 1.6;
}
@media (max-width: 640px){
  .history-year{ font-size: clamp(52px, 17vw, 84px); }
}

/* stat-cards/case-cards/hotel-cards/distance-cards use auto-fit minmax above,
   so they naturally reflow to fewer columns on narrower viewports without
   needing explicit breakpoints here. */
/* ...but a single lone card in an auto-fit grid otherwise stretches to fill
   the entire row — cap and centre it instead of letting it look oversized. */
.stat-cards:has(> .card:only-child),
.case-cards:has(> .project:only-child),
.hotel-cards:has(> .hotel-card:only-child),
.distance-cards:has(> .card:only-child),
.project-list:has(> .project:only-child){
  justify-content:center;
}
.stat-cards > .card:only-child,
.hotel-cards > .hotel-card:only-child,
.distance-cards > .card:only-child{ max-width:340px; }
.project-list > .project:only-child{ max-width:380px; }

/* ===========================================================
   CINEMATIC MOTION SYSTEM — additive layer
   Everything below supports the GSAP/Lenis motion layer in
   site-motion.js. All of it degrades safely: with no 'js'-driven
   states applied (GSAP absent or prefers-reduced-motion), every
   element here renders in its normal static end-state — nothing
   in this block sets a hidden/zero-opacity default via CSS alone.
   =========================================================== */

/* ---------- line-reveal text (built at runtime by splitLines()) ---------- */
.line-mask{ display:block; overflow-y:hidden; overflow-x:visible; }
.line-inner{ display:block; will-change:transform; }

/* ---------- image reveal wrappers (clip-path masked by GSAP) ---------- */
.photo-pair figure,
.feature .img,
.landmark .thumb,
.project .thumb,
.hotel-card .ph.has-photo,
.case-card.has-photo .ph,
.distance-cards .card.has-photo .ph{
  will-change: clip-path;
}
.photo-pair img, .feature .img img, .landmark .thumb img, .project .thumb img,
.hotel-card .ph img, .case-card.has-photo .ph img, .distance-cards .card.has-photo .ph img,
.area-hero .bg img, .hub-hero-collage .tile img{
  will-change: transform;
}

/* ---------- editorial two-col: callout rides sticky while copy scrolls ---------- */
@media (min-width:901px){
  .two-col .callout{ position:sticky; top:118px; align-self:start; }
}

/* ---------- header: hide-on-scroll-down + dark-hero tone (progressive, GSAP-driven) ---------- */
.site-header{ transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.site-header.header-hidden{ transform: translateY(-100%); }
.site-header.on-dark{
  background: rgba(11,31,20,.32);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.1);
}
.site-header.on-dark .header-nav a{ color:#fff; }
.site-header.on-dark .header-nav a::after{ background:var(--gold-soft); }
.site-header.on-dark .header-nav a.active{ color:var(--gold-soft); }
.site-header.on-dark .nav-more .chev{ color:#fff; }
.site-header.on-dark .nav-toggle svg{ color:#fff; }
.site-header.on-dark .divider{ background:rgba(255,255,255,.22); }
.site-header.on-dark .wa-header-btn{ background:rgba(255,255,255,.14); }
.site-header.on-dark .wa-header-btn svg path:last-child{ fill:#fff !important; }
.site-header.on-dark .wa-header-btn:hover{ background:var(--gold); }
.site-header.on-dark .wa-header-btn:hover svg path:last-child{ fill:var(--ink-deep) !important; }
@media (max-width:900px){
  /* keep header always reachable on mobile — no hide-on-scroll, avoids fighting the mobile menu */
  .site-header.header-hidden{ transform:none; }
}

/* ---------- area-card: refined hover (image parallax handled in JS, rest here) ---------- */
.area-card .num{ transition: transform .3s var(--ease); }
.area-card:hover .num{ transform: translateY(-2px); }
.area-card h3{ transition: transform .3s var(--ease); }
.area-card:hover h3{ transform: translateX(2px); }
.area-card .thumb img{ transition: filter .5s; } /* transform now driven by GSAP quickTo, not CSS, to avoid fighting the cursor-parallax */

/* ---------- page transition curtain ---------- */
.page-curtain{
  position: fixed; inset: 0; z-index: 9999;
  background: #0B1F14;
  display: none;
  pointer-events: none;
  transform: translateY(100%);
}
.page-curtain-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:15px; letter-spacing:.04em; color:rgba(255,255,255,.55);
  opacity:0;
}

/* ---------- one-shot WhatsApp attention pulse (replaces the old infinite glow) ---------- */
.wa-float{ animation:none; } /* infinite glow removed — luxury interfaces don't nag */
.wa-float.pulse-once{ animation: wa-glow-once 1.4s ease-out 1; }
@keyframes wa-glow-once{
  0%{ box-shadow:0 10px 30px rgba(11,31,20,.38); }
  45%{ box-shadow:0 10px 30px rgba(11,31,20,.38), 0 0 0 10px rgba(198,161,91,.16); }
  100%{ box-shadow:0 10px 30px rgba(11,31,20,.38); }
}

/* ---------- reduced motion: hard stop for everything above ---------- */
@media (prefers-reduced-motion: reduce){
  .site-header{ transition:none !important; }
  .site-header.header-hidden{ transform:none !important; }
  .page-curtain{ display:none !important; }
  .line-mask, .line-inner{ overflow:visible !important; }
}