/* =====================================================================
   GabProp — shared design system  (clean editorial / white)
   Headlines: Playfair Display   ·   Body & UI: Arial
   Near-monochrome: white, ink black, one restrained gold accent.
   ===================================================================== */

:root{
  --bg:#FCF9F3;            /* warm off-white — livelier than stark white */
  --soft:#F3ECDF;          /* warm sand section tint */
  --ink:#1A1A1A;           /* near-black text & buttons */
  --ink-2:#2E2E2C;
  --muted:#727270;         /* secondary grey */
  --line:#E6E6E1;          /* hairline borders */
  --gold:#A8842C;          /* single restrained accent */
  --gold-deep:#876A1F;
  --radius:4px;            /* tight radius = more editorial/clean */
  --shadow:0 20px 50px -30px rgba(0,0,0,.35);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:Arial,Helvetica,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.15;color:var(--ink);letter-spacing:.005em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1200px,90vw);margin-inline:auto}
.wrap-narrow{width:min(760px,90vw);margin-inline:auto}
.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.rule{width:44px;height:1px;background:var(--gold);margin:1.1rem auto}
.rule.left{margin-left:0}

/* image placeholder — neutral, awaiting real photos */
.ph{background:#EFEFEB;color:#AFAFA8;display:grid;place-items:center;font-family:var(--body);font-size:.78rem;text-align:center;padding:1rem;letter-spacing:.02em}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:1.4rem}
.logo{display:flex;align-items:baseline;gap:.5rem;font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--ink);letter-spacing:.02em}
.logo b{color:var(--gold);font-weight:600}
.navlinks{display:flex;gap:2.4rem;align-items:center;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--body)}
.navlinks a{color:var(--ink);opacity:.75;transition:opacity .2s;white-space:nowrap}
.navlinks a:hover{opacity:1}
.wa-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.75rem 1.3rem;border-radius:999px;transition:background .2s;font-family:var(--body)}
.wa-btn:hover{background:#000}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}

/* ---------- HERO (centered, portal-style) ---------- */
.hero{background:var(--bg);padding:5.5rem 0 4rem;text-align:center;border-bottom:1px solid var(--line)}
.hero .eyebrow{display:block;margin-bottom:1.3rem}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:500;max-width:14ch;margin:0 auto;letter-spacing:-.005em}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .sub{font-size:1.08rem;color:var(--muted);max-width:560px;margin:1.5rem auto 2.6rem}

/* search card */
.search{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;padding:.45rem;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:.3rem;max-width:760px;margin:0 auto}
.field{display:flex;flex-direction:column;padding:.6rem .95rem;border-radius:4px;text-align:left}
.field:hover{background:var(--soft)}
.field label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--body)}
.field select{border:0;background:transparent;font-family:var(--body);font-size:.94rem;color:var(--ink);font-weight:700;padding:.2rem 0;outline:none;width:100%;cursor:pointer}
.search-btn{background:var(--ink);color:#fff;border:0;border-radius:4px;padding:0 1.5rem;font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background .2s}
.search-btn:hover{background:#000}
.quick{margin-top:1.6rem;font-size:.86rem;color:var(--muted);font-family:var(--body)}
.quick a{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:1px;margin:0 .35rem;transition:color .2s}
.quick a:hover{color:var(--gold)}

/* ---------- SECTION SHELL ---------- */
section{padding:5rem 0}
section.soft{background:var(--soft)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.sec-head .eyebrow{display:block;margin-bottom:.4rem}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500}
.sec-head p{color:var(--muted);margin-top:.8rem;font-size:1rem}

/* ---------- BROWSE BY REGION ---------- */
.region-circles{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem 1.6rem}
.region-circle{width:148px;height:148px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;text-decoration:none;background:var(--ink);color:#fff;box-shadow:0 14px 28px -18px rgba(0,0,0,.4);transition:transform .25s ease,box-shadow .25s ease}
.region-circle:nth-child(even){background:var(--gold);color:#fff}
.region-circle .n{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.25}
.region-circle .c{margin-top:.35rem;font-size:.68rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.region-circle:hover{transform:translateY(-5px);box-shadow:0 20px 34px -18px rgba(0,0,0,.5)}
@media(max-width:640px){
  .region-circles{gap:1.1rem .9rem}
  .region-circle{width:104px;height:104px;padding:.6rem}
  .region-circle .n{font-size:.82rem}
  .region-circle .c{font-size:.6rem;margin-top:.25rem}
}

.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.region{position:relative;aspect-ratio:3/2;border-radius:6px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end;color:#fff}
.region .ph{position:absolute;inset:0}
.region .label{position:relative;z-index:2;width:100%;padding:1.3rem 1.4rem;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
.region .label .n{font-family:var(--display);font-size:1.5rem;font-weight:600}
.region .label .c{font-size:.8rem;opacity:.9;font-family:var(--body);letter-spacing:.03em}
.region:hover .label .n{color:#fff}

/* ---------- PROPERTY CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card-img{aspect-ratio:4/3;position:relative;background-size:cover;background-position:center}
.tag{position:absolute;top:1rem;left:1rem;background:#fff;color:var(--ink);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .75rem;border-radius:2px}
.card-body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.card-body .loc{font-size:.72rem;color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-family:var(--body)}
.card-body h3{font-size:1.5rem;margin:.5rem 0 .9rem;font-weight:500}
.cardspecs{display:flex;gap:1.4rem;font-size:.82rem;color:var(--muted);font-family:var(--body);padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.cardspecs b{color:var(--ink);font-weight:700}
.card-price{font-family:var(--display);font-size:1.4rem;font-weight:600;color:var(--ink);margin-top:auto}
.card-price small{font-family:var(--body);font-size:.74rem;color:var(--muted);font-weight:400;letter-spacing:.02em}
.card-link{margin-top:1.2rem;font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;align-self:flex-start;transition:color .2s,border-color .2s}
.card-link:hover{color:var(--gold);border-color:var(--gold)}
.center-cta{text-align:center;margin-top:3rem}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ink);color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.9rem 2rem;border-radius:999px;font-family:var(--body);transition:background .2s,color .2s}
.btn-outline:hover{background:var(--ink);color:#fff}

/* ---------- EDITORIAL ABOUT SPLIT ---------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-split .lead h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:500;line-height:1.2}
.about-split .lead .eyebrow{display:block;margin-bottom:1rem}
.about-split .body p{color:var(--muted);margin-bottom:1.1rem;font-size:1rem}
.about-split .body .sign{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--ink);margin-top:1.4rem}

/* ---------- ARTICLES ---------- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.art{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:box-shadow .25s,transform .25s}
.art:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.art-img{aspect-ratio:16/10}
.art-body{padding:1.5rem}
.art-body .cat{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:var(--body)}
.art-body h3{font-size:1.25rem;margin:.6rem 0;font-weight:500;line-height:1.3}
.art-body p{font-size:.88rem;color:var(--muted)}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink);color:#fff;text-align:center}
.cta-band .eyebrow{color:var(--gold);display:block;margin-bottom:1rem}
.cta-band h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:.8rem;color:#fff;font-weight:500}
.cta-band p{max-width:520px;margin:0 auto 2rem;color:#B9B9B4}
.cta-band .wa-btn{background:#fff;color:var(--ink);font-size:.82rem;padding:.95rem 2rem}
.cta-band .wa-btn:hover{background:#EDEDE7}

/* ---------- FOOTER ---------- */
footer{background:#141412;color:#9A9A94;padding:4rem 0 2rem;font-size:.88rem;font-family:var(--body)}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
footer h4{color:#fff;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
footer ul{list-style:none}
footer li{margin-bottom:.6rem}
footer a{opacity:.8}
footer a:hover{opacity:1;color:#fff}
.foot-brand .logo{color:#fff;font-size:1.7rem;margin-bottom:1rem}
.foot-brand .logo b{color:var(--gold)}
.foot-brand p{max-width:300px;color:#78786F;font-size:.86rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:#68685F}

/* =====================================================================
   PROJECT DETAIL PAGE
   ===================================================================== */
.breadcrumb{padding:1.6rem 0;font-size:.78rem;color:var(--muted);letter-spacing:.03em}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{opacity:.5}
.proj-hero{aspect-ratio:21/9;border-radius:6px;position:relative;overflow:hidden;background-size:cover;background-position:center}
.proj-hero .tag{top:1.3rem;left:1.3rem}
.proj-layout{display:grid;grid-template-columns:1fr 340px;gap:3.5rem;margin-top:2.5rem;align-items:start}
.proj-title h1{font-size:clamp(2.1rem,4vw,3rem);color:var(--ink);margin-bottom:.5rem;font-weight:500}
.proj-title .loc{color:var(--gold);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:2rem 0}
.fact{background:#fff;padding:1.3rem 1.4rem}
.fact .k{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fact .v{font-family:var(--display);font-size:1.25rem;color:var(--ink);font-weight:600;margin-top:.3rem}
.prose h2{font-size:1.7rem;color:var(--ink);margin:2.4rem 0 .9rem;font-weight:500}
.prose h3{font-size:1.25rem;color:var(--ink);margin:1.7rem 0 .6rem;font-weight:600}
.prose p{margin-bottom:1rem;color:var(--ink-2)}
.prose ul{margin:0 0 1.2rem 1.2rem;color:var(--ink-2)}
.prose li{margin-bottom:.5rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}
.gallery div{aspect-ratio:4/3;border-radius:4px}
.enquire{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.7rem;box-shadow:var(--shadow)}
.enquire .price{font-family:var(--display);font-size:2rem;color:var(--ink);font-weight:600}
.enquire .price small{display:block;font-family:var(--body);font-size:.78rem;color:var(--muted);font-weight:400;margin-bottom:1.3rem;letter-spacing:.02em}
.enquire .wa-btn{display:flex;justify-content:center;width:100%;font-size:.82rem;padding:.95rem;margin-bottom:.7rem}
.enquire .call-btn{display:flex;justify-content:center;width:100%;background:var(--soft);color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.9rem;border-radius:999px;font-family:var(--body)}
.enquire .call-btn:hover{background:var(--ink);color:#fff}
.enquire .note{font-size:.74rem;color:var(--muted);text-align:center;margin-top:1rem}

/* =====================================================================
   ARTICLE / GUIDE PAGE
   ===================================================================== */
.article-head{padding:3rem 0 1rem}
.article-head .cat{color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.article-head h1{font-size:clamp(2.1rem,4.4vw,3.2rem);color:var(--ink);margin:.9rem 0 1rem;line-height:1.15;font-weight:500}
.article-meta{display:flex;gap:1rem;align-items:center;font-size:.84rem;color:var(--muted)}
.article-cover{aspect-ratio:21/9;border-radius:6px;margin:2rem 0}
.article-body{font-size:1.08rem;line-height:1.75}
.article-body h2{font-size:1.8rem;color:var(--ink);margin:2.6rem 0 .9rem;font-weight:500}
.article-body h3{font-size:1.3rem;color:var(--ink);margin:1.9rem 0 .6rem;font-weight:600}
.article-body p{margin-bottom:1.2rem;color:var(--ink-2)}
.article-body ul,.article-body ol{margin:0 0 1.3rem 1.3rem;color:var(--ink-2)}
.article-body li{margin-bottom:.55rem}
.article-body blockquote{border-left:2px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;margin:1.6rem 0;font-family:var(--display);font-size:1.35rem;color:var(--ink);font-style:italic}
.article-body a.inline{color:var(--ink);border-bottom:1px solid var(--gold)}
.faq{margin:2.8rem 0}
.faq h2{margin-bottom:1.3rem;font-weight:500;font-size:1.8rem}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{font-family:var(--display);font-weight:600;color:var(--ink);cursor:pointer;font-size:1.15rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.8rem;color:var(--ink-2)}
.author-box{display:flex;gap:1.1rem;align-items:center;background:var(--soft);border-radius:6px;padding:1.5rem;margin:2.6rem 0}
.author-box .av{width:56px;height:56px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:600;flex-shrink:0}
.author-box .n{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.1rem}
.author-box .r{font-size:.82rem;color:var(--muted)}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1320px){
  .navlinks{gap:1.3rem;font-size:.72rem}
}
@media(max-width:1080px){
  .navlinks{display:none}
  .menu-toggle{display:block}
  .region-grid{grid-template-columns:1fr 1fr}
  .grid-3,.art-grid{grid-template-columns:1fr}
  .about-split{grid-template-columns:1fr;gap:2rem}
  .search{grid-template-columns:1fr 1fr}
  .search-btn{grid-column:1/-1;padding:.85rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .proj-layout{grid-template-columns:1fr}
  .enquire{position:static}
}
@media(max-width:560px){
  .region-grid{grid-template-columns:1fr}
  .search{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .hero{padding:3.5rem 0 3rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =====================================================================
   HOMEPAGE IMPROVEMENTS — designed logo + building hero
   ===================================================================== */
.logo{display:flex;align-items:center;gap:.6rem}
.logo-mark{width:40px;height:40px;flex-shrink:0;display:block}
.logo-word{font-family:var(--display);font-size:1.55rem;font-weight:600;color:var(--ink);letter-spacing:.02em;line-height:1}
.logo-word b{color:var(--gold);font-weight:600}
/* image wordmark logo */
.logo-img{display:block;height:34px;width:auto;max-width:200px}
.foot-brand .logo-img{height:42px;max-width:220px}
@media(max-width:520px){.logo-img{height:30px}}

/* building hero */
.hero{position:relative;overflow:hidden;background:#0C141E;padding:6.5rem 0 5rem;border-bottom:0}
.hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#1c2f43 0%,#12202f 52%,#0b1119 100%)}
.hero-bg .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 5%,rgba(0,0,0,.12),rgba(8,12,18,.6))}
.hero .hero-content{position:relative;z-index:2}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff}
.hero h1 em{color:#E7C877}
.hero .sub{color:#D4D8DE}
.quick{color:#AEB4BC}
.quick a{color:#fff;border-color:var(--gold)}
.quick a:hover{color:#E7C877}

/* footer logo on dark */
.foot-brand .logo-word{color:#fff}
.foot-brand .logo-word b{color:var(--gold)}

/* =====================================================================
   HERO REFRESH — professional twilight colour (first section only)
   ===================================================================== */
.hero{background:#0B1E3C;padding:7rem 0 5.5rem}
.hero-bg{
  background:
    radial-gradient(62% 50% at 50% 90%, rgba(224,150,60,.55), rgba(224,150,60,0) 62%),
    radial-gradient(90% 70% at 78% 18%, rgba(90,140,200,.22), rgba(90,140,200,0) 60%),
    linear-gradient(180deg,#0A1E40 0%,#173458 38%,#264566 56%,#6E5136 78%,#3A2B34 92%,#241D2B 100%);
}
.hero-bg::after{
  background:
    linear-gradient(180deg, rgba(7,15,32,.58) 0%, rgba(7,15,32,0) 28%, rgba(7,12,22,.12) 66%, rgba(6,10,18,.55) 100%);
}
/* warmer, brighter city lights to match the twilight */
.hero-bg .skyline g[fill="#C79A38"]{fill:#F1BE5C;}
.hero h1{letter-spacing:-.01em;text-shadow:0 1px 30px rgba(0,0,0,.25)}
.hero .sub{color:#DCE2EA}

/* =====================================================================
   HERO FINAL — compact; headline visible immediately, small skyline band
   ===================================================================== */
.hero{position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(58% 70% at 50% 122%, rgba(232,158,66,.55), rgba(232,158,66,0) 62%),
    linear-gradient(180deg,#0A1E40 0%,#173A63 46%,#295781 72%,#3A4A6E 100%);
  padding:4.5rem 0 0}
.hero-bg{position:absolute;left:0;right:0;bottom:-1px;top:auto;height:auto;z-index:1;background:none}
.hero-bg::after{display:none !important}
.hero-bg .skyline{position:static;display:block;width:100%;height:clamp(84px,10vw,140px)}
.hero .hero-content{position:relative;z-index:2;padding-bottom:clamp(115px,14vw,175px)}
.hero .eyebrow{color:#F1BE5C}
.hero h1{color:#fff;text-shadow:0 1px 26px rgba(0,0,0,.3)}
.hero h1 em{color:#F5C976}
.hero .sub{color:#E1E6EC}
.hero .quick{color:#B9C1CC}
.hero .quick a{color:#fff;border-color:var(--gold)}

/* =====================================================================
   LIVELIER THEME + ITALIC LOGO + DESKTOP-HIDES-SKYLINE
   ===================================================================== */
/* italic brand logo */
.logo-word{font-style:italic}

/* colourful "About" feature band (ties to the hero) */
#about{background:linear-gradient(135deg,#0E2440 0%,#1D3F64 58%,#274C72 100%);color:#fff}
#about .lead h2{color:#fff}
#about .lead .eyebrow{color:#F1BE5C}
#about .rule.left{background:#F1BE5C}
#about .body p{color:#D3DBE4}
#about .body .sign{color:#F5C976}

/* soft warm cards pop a touch more on the warm bg */
.card,.art,.region{background:#fff}

/* DESKTOP: remove the skyline (keep it only on mobile) */
@media(min-width:768px){
  .hero-bg{display:none}
  .hero{padding:5.5rem 0 5rem}
  .hero .hero-content{padding-bottom:0}
}

/* =====================================================================
   DEVELOPER-STYLE PROJECT PAGE (reusable for each project)
   ===================================================================== */
.pj-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0b1626 center/cover no-repeat}
.pj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,34,.15) 0%,rgba(10,20,34,.4) 45%,rgba(10,18,30,.9) 100%)}
.pj-hero-inner{position:relative;z-index:2;padding:3.2rem 0;width:min(1180px,92vw);margin-inline:auto}
.pj-hero .tagline{color:#E7C877;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;font-family:var(--body)}
.pj-hero h1{font-size:clamp(2.4rem,5vw,4rem);color:#fff;margin:.7rem 0 .5rem;font-weight:600}
.pj-hero .loc{color:#DCE3EB;font-size:1.02rem;font-family:var(--body)}
.pj-hero-cta{margin-top:1.7rem;display:flex;gap:.7rem;flex-wrap:wrap}
.pj-hero-cta .wa-btn{background:var(--gold);color:#22160a}
.pj-hero-cta .wa-btn:hover{background:#B9903A}
.pj-hero-cta .ghost{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.75rem 1.3rem;border-radius:999px;font-family:var(--body)}
.pj-hero-cta .ghost:hover{background:#fff;color:var(--ink)}

.pj-facts{background:#0E1F36}
.pj-facts-inner{width:min(1180px,92vw);margin-inline:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.12)}
.pj-fact{background:#0E1F36;padding:1.3rem 1.1rem;text-align:center}
.pj-fact .k{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#93A6BB;font-weight:700;font-family:var(--body)}
.pj-fact .v{font-family:var(--display);font-size:1.22rem;color:#fff;margin-top:.35rem;font-weight:600}

.pj-sec{padding:4.5rem 0}
.pj-sec h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);margin-bottom:.5rem;font-weight:600}
.pj-sec .sub{color:var(--muted);max-width:720px;margin-bottom:2.2rem}

/* overview split with facade image */
.ov-split{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
.ov-split .ov-text p{color:var(--ink-2);margin-bottom:1.05rem}
.ov-split .ov-img{border-radius:8px;overflow:hidden;border:1px solid var(--line)}

/* highlights */
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.hl{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.6rem}
.hl .ico{color:var(--gold);margin-bottom:.7rem}
.hl h3{font-size:1.12rem;margin-bottom:.35rem;font-weight:600}
.hl p{font-size:.9rem;color:var(--muted)}

/* connectivity */
.conn-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.conn-col h3{font-size:.78rem;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-family:var(--body);font-weight:700;margin-bottom:.9rem}
.conn-col ul{list-style:none}
.conn-col li{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}

/* facilities */
.fac-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 3rem}
.fac-cat h3{font-size:.78rem;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-family:var(--body);font-weight:700;margin-bottom:.6rem}
.fac-cat ul{list-style:none;font-size:.92rem;color:var(--ink)}
.fac-cat li{padding:.3rem 0;padding-left:1.1rem;position:relative}
.fac-cat li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* unit types with floor plans */
.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.unit{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.unit .plan{background:#fff;border-bottom:1px solid var(--line);padding:.6rem}
.unit .plan img{width:100%;height:200px;object-fit:contain}
.unit .u-body{padding:1.2rem 1.3rem 1.4rem}
.unit .u-type{font-family:var(--display);font-size:1.35rem;color:var(--ink);font-weight:600}
.unit .u-size{color:var(--gold);font-weight:700;font-size:.82rem;font-family:var(--body);letter-spacing:.04em;text-transform:uppercase;margin:.15rem 0 .5rem}
.unit .u-desc{font-size:.88rem;color:var(--muted)}

/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.gal-grid figure{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.gal-grid img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .5s ease}
.gal-grid figure:hover img{transform:scale(1.05)}

/* developer */
.dev-split{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:820px}
.dev-split h3{font-size:1.3rem;font-weight:600}
.dev-split p{color:var(--muted)}
.dev-past{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.dev-past span{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.82rem;color:var(--ink);font-family:var(--body)}

@media(max-width:960px){
  .pj-facts-inner{grid-template-columns:1fr 1fr 1fr}
  .hl-grid,.unit-grid,.gal-grid{grid-template-columns:1fr 1fr}
  .conn-grid,.ov-split{grid-template-columns:1fr;gap:1.8rem}
  .fac-cats{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pj-facts-inner{grid-template-columns:1fr 1fr}
  .hl-grid,.unit-grid,.gal-grid{grid-template-columns:1fr}
}

/* project page extras */
.concept .lede{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.4;color:var(--ink);font-style:italic;max-width:780px}
.concept .cn{color:var(--gold);font-style:normal}
.map-embed{aspect-ratio:16/7;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-top:1.6rem}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.unit .u-tour{display:inline-block;margin-top:.7rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px}
.legal{background:#141412;color:#83837b;font-size:.72rem;line-height:1.65;padding:2.2rem 0}
.legal .wrap{max-width:920px}
.legal strong{color:#b3b3a8}

/* simple layout cards (unit types without embedded floor plan) */
.lay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lay{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:8px;padding:1.4rem 1.5rem}
.lay .t{font-family:var(--display);font-size:1.4rem;color:var(--ink);font-weight:600}
.lay .s{color:var(--gold);font-weight:700;font-size:.8rem;font-family:var(--body);text-transform:uppercase;letter-spacing:.05em;margin:.2rem 0 .5rem}
.lay .d{font-size:.92rem;color:var(--muted)}
@media(max-width:960px){.lay-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lay-grid{grid-template-columns:1fr}}

/* =====================================================================
   LANDING-STYLE PROJECT PAGE v2 — floating WA, slim footer, cover hero
   ===================================================================== */
.pj-hero.cover{min-height:84vh}
.pj-hero.cover .pj-hero-inner{padding-bottom:4rem}

/* inline summary stats */
.sum-stats{display:flex;flex-wrap:wrap;gap:1.8rem;margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.3rem}
.sum-stats .k{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:var(--body)}
.sum-stats .v{font-family:var(--display);font-size:1.2rem;color:var(--ink);font-weight:600;margin-top:.15rem}

/* floating WhatsApp button — sits inside .float-stack (see below),
   same pill shape/sizing as .explore-float for visual consistency;
   label always visible, not hover-revealed */
.wa-float{position:relative;display:inline-flex;align-items:center;gap:.55rem;background:#25A366;color:#fff;padding:.75rem 1.15rem;border-radius:999px;box-shadow:0 12px 30px -8px rgba(37,163,102,.65);font-family:var(--body);font-weight:700;font-size:.85rem;white-space:nowrap;text-decoration:none;transition:background .2s,transform .2s}
.wa-float svg{width:18px;height:18px;display:block;flex-shrink:0}
.wa-float:hover{background:#1E8A55;transform:translateY(-2px)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(37,163,102,.5);animation:waPulse 2.2s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,163,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,163,102,0)}100%{box-shadow:0 0 0 0 rgba(37,163,102,0)}}
@media(prefers-reduced-motion:reduce){.wa-float::after{animation:none}}

/* slim footer (replaces the big-logo footer) */
.site-foot{background:#141412;color:#83837b;font-size:.78rem;line-height:1.7;padding:2.6rem 0}
.site-foot .wrap{max-width:980px}
.site-foot a{color:#c7c7be;border-bottom:1px solid rgba(199,199,190,.28)}
.site-foot a:hover{color:#fff}
.site-foot strong{color:#b3b3a8}
.site-foot .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.3rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1.2rem;color:#6f6f67;font-size:.74rem}

/* =====================================================================
   PROJECT PAGE v3 — Queenswoodz-inspired (chips, tabs, vtour, enquire)
   ===================================================================== */
.disclosure{background:#0E1F36;color:#9FB1C4;font-size:.7rem;letter-spacing:.03em;text-align:center;padding:.55rem 1rem;font-family:var(--body)}
.disclosure strong{color:#E7C877;font-weight:600}

/* feature chips */
.chip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.chip{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;font-size:.88rem;color:var(--ink);font-weight:600;font-family:var(--body);line-height:1.3}
.chip svg{color:var(--gold);flex-shrink:0}
@media(max-width:900px){.chip-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.chip-grid{grid-template-columns:1fr}}

/* connectivity 4-col */
.conn4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:1.8rem}
.conn4 h3{font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:var(--body);margin-bottom:.8rem}
.conn4 ul{list-style:none}
.conn4 li{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--ink);display:flex;justify-content:space-between;gap:.6rem}
.conn4 li b{color:var(--muted);font-weight:600;white-space:nowrap;font-size:.82rem}
@media(max-width:900px){.conn4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.conn4{grid-template-columns:1fr}}

/* layout tabs */
.tab-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.tab-btn{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.2rem;font-size:.84rem;font-weight:700;font-family:var(--body);color:var(--muted);cursor:pointer;transition:all .2s}
.tab-btn:hover{border-color:var(--gold);color:var(--ink)}
.tab-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.plan-wrap{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.5rem;text-align:center}
.plan-wrap img{max-width:100%;max-height:520px}
.plan-wrap .cap{margin-top:1rem;font-size:1.05rem;color:var(--ink);font-weight:600;font-family:var(--display)}
.plan-wrap .cap small{display:block;color:var(--muted);font-weight:400;font-size:.85rem;margin-top:.2rem;font-family:var(--body)}

/* gallery captions */
.gal-grid figure{border:none;overflow:visible}
.gal-grid figure img{border-radius:8px;border:1px solid var(--line);height:230px;width:100%;object-fit:cover}
.gal-grid figcaption{padding:.55rem .2rem 0;font-size:.78rem;color:var(--muted);text-align:center;font-family:var(--body);letter-spacing:.03em}

/* virtual tour */
.vtour{background:linear-gradient(135deg,#0E1F36,#12233b);border-radius:12px;padding:3.2rem 2rem;text-align:center;color:#fff}
.vtour h3{color:#fff;font-size:1.7rem;margin-bottom:.6rem}
.vtour p{color:#C9D4E0;max-width:560px;margin:0 auto 1.7rem}
.btn-gold{background:var(--gold);color:#22160a;padding:.85rem 1.8rem;border-radius:999px;font-weight:700;font-family:var(--body);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;display:inline-block}
.btn-gold:hover{background:#B9903A}

/* pricing */
.pricing-box{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:2.6rem;text-align:center}
.pricing-box .from{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;font-family:var(--body)}
.pricing-box .amt{font-family:var(--display);font-size:2.7rem;color:var(--ink);font-weight:600;margin:.3rem 0}
.pricing-box p{color:var(--muted);max-width:540px;margin:.6rem auto 1.6rem;font-size:.92rem}

/* enquire form */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.enq-form{display:flex;flex-direction:column;gap:.9rem}
.enq-form input{padding:.9rem 1rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-family:var(--body);background:#fff;color:var(--ink)}
.enq-form input:focus{outline:none;border-color:var(--gold)}
.enq-form .consent{font-size:.75rem;color:var(--muted);line-height:1.5;display:flex;gap:.5rem;align-items:flex-start}
.enq-form button{background:#25A366;color:#fff;border:none;border-radius:8px;padding:1rem;font-size:.95rem;font-weight:700;font-family:var(--body);cursor:pointer}
.enq-form button:hover{background:#1f8f57}
.enq-form .note{font-size:.72rem;color:var(--muted);text-align:center}
@media(max-width:800px){.enq{grid-template-columns:1fr;gap:1.8rem}}

/* contact footer */
.contact-foot{background:#141412;color:#9a9a90;padding:3rem 0;font-size:.82rem;line-height:1.7}
.contact-foot .cf-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem}
.contact-foot h4{color:#e7e7de;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.9rem;font-family:var(--body)}
.contact-foot a{color:#c7c7be;border-bottom:1px solid rgba(199,199,190,.28)}
.contact-foot a:hover{color:#fff}
.contact-foot strong{color:#c9c9c0}
.contact-foot .cf-legal{margin-top:2rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;font-size:.72rem;color:#75756c;line-height:1.65}
@media(max-width:800px){.contact-foot .cf-grid{grid-template-columns:1fr;gap:1.6rem}}

/* =============== REN v3.1 refinements =============== */
/* centered cover hero */
.pj-hero.mid{align-items:center}
.pj-hero.mid .pj-hero-inner{text-align:center;width:min(880px,92vw);margin:0 auto;padding:3rem 0}
.pj-hero.mid .pj-hero-cta{justify-content:center}

/* grand dark 6-feature band */
.feat-band{background:#141412;color:#fff;padding:5rem 0}
.feat-band .intro{text-align:center;max-width:700px;margin:0 auto 3.2rem}
.feat-band .intro .eyebrow{color:#E7C877}
.feat-band .intro h2{color:#fff;margin:.5rem 0 .8rem}
.feat-band .intro p{color:#C4C4BB;font-size:1rem;line-height:1.6}
.feat6{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2rem;max-width:1000px;margin:0 auto}
.feat6 .f{text-align:center;padding:0 .5rem}
.feat6 .f .ic{color:#E7C877;margin-bottom:1rem;display:flex;justify-content:center}
.feat6 .f .t{font-family:var(--display);font-size:1.15rem;color:#fff;font-weight:500;line-height:1.3}
.feat6 .f .d{font-size:.84rem;color:#AEAEA4;margin-top:.4rem;line-height:1.5}
@media(max-width:760px){.feat6{grid-template-columns:1fr 1fr;gap:2.4rem 1.2rem}.feat-band{padding:3.5rem 0}}

/* location: map image + centered category tabs */
.loc-map{width:100%;border-radius:12px;border:1px solid var(--line);display:block;margin-bottom:1.8rem}
.tab-btns.center{justify-content:center}
.loc-list{max-width:760px;margin:0 auto}
.loc-list ul{list-style:none}
.loc-list li{padding:.75rem .2rem;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink);display:flex;justify-content:space-between;gap:1rem}
.loc-list li b{color:var(--muted);font-weight:600;white-space:nowrap;font-size:.85rem}

/* centered layouts */
.lay-center{text-align:center}
.lay-center .plan-wrap{text-align:center}
.lay-center .tab-pane{max-width:820px;margin:0 auto}

/* embedded 360 VR */
.vr-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0E1F36}
.vr-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:600px){.vr-frame{aspect-ratio:4/3}}

/* v3.2 tweaks: smaller crisp map, richer location list, WA pricing pop */
.loc-map{max-width:560px;margin-left:auto;margin-right:auto}
.loc-list li b{color:var(--gold);font-weight:700;font-size:.88rem}
.loc-note{text-align:center;font-size:.72rem;color:var(--muted);margin-top:1.2rem}
.wa-pop{position:fixed;right:24px;bottom:158px;z-index:298;max-width:212px;background:#fff;border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.3);padding:.7rem .85rem;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s,transform .4s;pointer-events:none}
.wa-pop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.wa-pop a{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-family:var(--body);font-weight:600;font-size:.82rem;line-height:1.3;text-decoration:none}
.wa-pop a::before{content:"";width:9px;height:9px;border-radius:50%;background:#25A366;flex-shrink:0;box-shadow:0 0 0 3px rgba(37,163,102,.2)}
.wa-pop::after{content:"";position:absolute;bottom:-6px;right:30px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:3px 3px 6px -3px rgba(0,0,0,.12)}
.wa-pop-x{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;background:#333;color:#fff;border:none;font-size:13px;line-height:18px;cursor:pointer;padding:0}
@media(max-width:600px){.wa-pop{right:16px;bottom:130px}}
@media(max-width:560px){.wa-pop{right:16px;bottom:82px;max-width:190px}}

/* v3.3: location map + categories side by side on desktop */
.loc-two{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start;margin-top:1.6rem}
.loc-two .loc-map{max-width:100%;margin:0;position:sticky;top:90px}
.loc-two .tab-btns{justify-content:flex-start}
@media(max-width:820px){.loc-two{grid-template-columns:1fr;gap:1.6rem}.loc-two .loc-map{position:static}}

/* ===== v4: project cards, partner about, mobile nav, projects page ===== */
.pcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px -16px rgba(0,0,0,.3);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(0,0,0,.35)}
.pc-img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center}
.pc-img .tag{position:absolute;top:12px;left:12px;background:var(--gold);color:#22160a;font-size:.66rem;font-weight:700;padding:.32rem .7rem;border-radius:999px;letter-spacing:.05em;text-transform:uppercase;font-family:var(--body)}
.pc-img .view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;background:rgba(20,20,18,.3)}
.pc-img .view span{background:#fff;color:var(--ink);font-weight:700;font-family:var(--body);font-size:.8rem;padding:.6rem 1.5rem;border-radius:999px}
.pcard:hover .pc-img .view{opacity:1}
.pc-body{padding:1.1rem 1.2rem 1.3rem}
.pc-loc{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:700;font-family:var(--body)}
.pc-body h3{font-size:1.12rem;margin:.3rem 0 .8rem;font-weight:600}
.pc-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.8rem 0;margin-bottom:.9rem}
.pc-specs .s .k{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.25rem;font-family:var(--body);font-weight:700}
.pc-specs .s .v{display:flex;align-items:center;gap:.35rem;color:var(--ink);font-weight:600;font-size:.8rem}
.pc-specs svg{color:var(--gold);width:16px;height:16px;flex-shrink:0}
.pc-price{font-family:var(--display);font-size:1.15rem;color:#8a6d1f;font-weight:600}
.pc-price small{font-family:var(--body);font-size:.72rem;color:var(--muted);font-weight:400}
@media(max-width:900px){.pcard-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pcard-grid{grid-template-columns:1fr}}

/* Homepage "Selected new launches" — horizontal scroll-snap carousel on ALL
   screen sizes (desktop included). Scoped to #launches only; the full
   projects listing page (#projGrid) keeps its normal stacking grid. */
#launches .pcard-grid{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:visible;flex-wrap:nowrap;gap:1.4rem;padding:.2rem .2rem 1.2rem;margin:0 -.2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#launches .pcard-grid::-webkit-scrollbar{display:none}
#launches .pcard{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.launch-row{margin-bottom:2.6rem}
.launch-row:last-of-type{margin-bottom:0}
.launch-row-head{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1.1rem}
.launch-row-head h3{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--ink)}
.launch-row-head .tag-soon{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:.25rem .6rem;border-radius:999px}
.pcard.soon-row{background:var(--soft);display:flex;align-items:center;justify-content:center;text-align:center;padding:2.4rem 1.6rem;min-height:280px}
.pcard.soon-row .soon-inner{max-width:220px}
.pcard.soon-row svg{color:var(--gold);margin-bottom:1rem}
.pcard.soon-row h4{font-family:var(--display);font-size:1.05rem;margin-bottom:.4rem;color:var(--ink)}
.pcard.soon-row p{font-size:.82rem;color:var(--muted);line-height:1.5}

/* Carousel prev/next arrows */
.carousel-wrap{position:relative}
.car-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -8px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s,opacity .2s,transform .2s}
.car-arrow:hover{background:var(--ink);color:#fff}
.car-arrow:active{transform:translateY(-50%) scale(.92)}
.car-arrow.prev{left:-14px}
.car-arrow.next{right:-14px}
.car-arrow[disabled]{opacity:0;pointer-events:none}
@media(max-width:640px){.car-arrow{width:36px;height:36px}.car-arrow.prev{left:-8px}.car-arrow.next{right:-8px}}

/* Shiny "view all projects" CTA */
.btn-shine{position:relative;overflow:hidden;border-color:var(--gold)!important;box-shadow:0 0 0 1px rgba(168,132,44,.15),0 8px 22px -12px rgba(168,132,44,.55)}
.btn-shine::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:btnShine 3.4s ease-in-out infinite}
@keyframes btnShine{0%{left:-60%}30%{left:130%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.btn-shine::after{animation:none}}

.partner{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.partner .p-img{background-size:cover;background-position:center;min-height:440px}
.partner .p-txt{padding:3rem 2.6rem}
.partner .p-txt .eyebrow{color:var(--gold)}
.partner .p-txt h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:.4rem 0 1.2rem;font-weight:600}
.partner .p-txt h2 .g{color:var(--gold)}
.partner .p-txt p{color:var(--muted);margin-bottom:1rem;line-height:1.7}
.partner .p-agent{display:inline-flex;align-items:center;gap:.6rem;margin-top:.6rem;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.35rem .5rem}
.partner .p-agent .av{width:34px;height:34px;border-radius:50%;background:#25A366;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--body);font-size:.85rem}
.partner .p-agent b{font-family:var(--body);font-size:.85rem;color:var(--ink);padding-right:.7rem}
@media(max-width:820px){.partner{grid-template-columns:1fr}.partner .p-img{min-height:240px}.partner .p-txt{padding:2rem 1.5rem}}

/* mobile nav dropdown */
.nav-inner{position:relative}
@media(max-width:1080px){
  .navlinks{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:.4rem 1.2rem 1rem;box-shadow:0 16px 28px -16px rgba(0,0,0,.28);border-top:1px solid var(--line);gap:0}
  .navlinks.open{display:flex}
  .navlinks a{padding:.85rem .2rem;border-bottom:1px solid var(--line);font-size:.95rem;white-space:normal}
  .navlinks a:last-child{border-bottom:none}
  .nav .wa-btn{display:none}
  .menu-toggle{display:inline-flex}
}

/* projects listing page */
/* =====================================================================
   PROJECTS PAGE — state/area accordion sidebar + mobile bottom sheet
   ===================================================================== */
.proj-head{padding:2.4rem 0 .5rem}
.proj-head h1{font-size:clamp(2rem,4vw,3rem);font-weight:600}
.proj-layout{display:grid;grid-template-columns:252px 1fr;gap:2.8rem;align-items:start;padding:1.5rem 0 4rem}
.proj-empty{color:var(--muted);padding:2rem 0;grid-column:1/-1}

/* ---- sidebar shell ---- */
.proj-side{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}

/* ---- search bar ---- */
.proj-search{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#FAFAFA}
.proj-search input{border:none;outline:none;font-family:var(--body);font-size:.88rem;width:100%;background:transparent;color:var(--ink)}
.proj-search input::placeholder{color:var(--muted)}
.proj-search svg{color:var(--muted);flex-shrink:0}

/* ---- "All Projects" top row ---- */
.proj-all{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.9rem 1rem;background:none;border:none;border-bottom:1px solid var(--line);font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:background .15s}
.proj-all:hover{background:var(--soft)}
.proj-all.active{color:var(--gold);background:#FBF6EC}
.proj-all .proj-count{font-size:.75rem;font-weight:400;color:var(--muted);background:var(--soft);padding:.15rem .5rem;border-radius:999px}
.proj-all.active .proj-count{background:#F5E8C8;color:var(--gold-deep)}

/* ---- state group ---- */
.proj-state-group{}
.proj-state-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1rem;background:none;border:none;border-bottom:1px solid var(--line);font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:left;transition:background .15s}
.proj-state-btn:hover{background:var(--soft)}
.proj-state-btn .state-right{display:flex;align-items:center;gap:.5rem}
.proj-state-btn .state-ct{font-size:.7rem;font-weight:400;color:var(--muted)}
.proj-state-chevron{width:14px;height:14px;flex-shrink:0;transition:transform .22s ease;color:var(--muted)}
.proj-state-btn[aria-expanded="true"] .proj-state-chevron{transform:rotate(90deg)}

/* ---- area list ---- */
.proj-areas{list-style:none;overflow:hidden;max-height:0;transition:max-height .28s ease}
.proj-state-btn[aria-expanded="true"] + .proj-areas{max-height:500px}
.proj-areas li{}
.proj-area-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.72rem 1rem .72rem 1.6rem;background:none;border:none;border-bottom:1px solid var(--line);font-family:var(--body);font-size:.88rem;color:var(--ink);cursor:pointer;text-align:left;position:relative;transition:background .15s, color .15s}
.proj-area-btn::before{content:'';position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--line);transition:background .15s}
.proj-area-btn:hover{background:var(--soft)}
.proj-area-btn:hover::before{background:var(--gold)}
.proj-area-btn.active{color:var(--gold);font-weight:600;background:#FBF6EC}
.proj-area-btn.active::before{background:var(--gold)}
.proj-area-btn .proj-count{font-size:.73rem;color:var(--muted)}
.proj-area-btn.active .proj-count{color:var(--gold-deep)}
.proj-areas li:last-child .proj-area-btn{border-bottom:none}

/* ---- result count line ---- */
.proj-result-count{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;font-family:var(--body)}
.proj-result-count b{color:var(--ink)}

/* ---- mobile filter trigger bar (hidden on desktop) ---- */
.proj-mob-bar{display:none}

/* ---- bottom sheet overlay (mobile) ---- */
.proj-sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;opacity:0;transition:opacity .25s}
.proj-sheet-backdrop.open{display:block;opacity:1}
.proj-sheet{position:fixed;bottom:0;left:0;right:0;z-index:901;background:#fff;border-radius:18px 18px 0 0;max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.proj-sheet.open{transform:translateY(0)}
.proj-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem .9rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.proj-sheet-head h3{font-family:var(--body);font-size:1rem;font-weight:700;color:var(--ink);margin:0}
.proj-sheet-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.proj-sheet-close:hover{background:var(--soft)}
.proj-sheet-search{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-bottom:1px solid var(--line);background:#FAFAFA}
.proj-sheet-search input{border:none;outline:none;font-family:var(--body);font-size:.9rem;width:100%;background:transparent;color:var(--ink)}
.proj-sheet-search svg{color:var(--muted);flex-shrink:0}
.proj-sheet-body{padding:.4rem 0 6rem}
/* reuse same sidebar styles inside sheet */
.proj-sheet .proj-all{border-bottom:1px solid var(--line)}
.proj-sheet .proj-state-btn{font-size:.7rem}
.proj-sheet .proj-area-btn{padding:.8rem 1.2rem .8rem 2rem;font-size:.92rem}

/* ---- mobile apply bar ---- */
.proj-sheet-footer{position:fixed;bottom:0;left:0;right:0;z-index:902;padding:.9rem 1.2rem;background:#fff;border-top:1px solid var(--line);display:none}
.proj-sheet-footer.open{display:flex;gap:.8rem}
.proj-apply-btn{flex:1;background:var(--ink);color:#fff;border:none;border-radius:8px;padding:.85rem;font-family:var(--body);font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s}
.proj-apply-btn:hover{background:var(--gold)}
.proj-clear-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;font-family:var(--body);font-size:.9rem;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.proj-clear-btn:hover{border-color:var(--ink);color:var(--ink)}

@media(max-width:820px){
  .proj-layout{grid-template-columns:1fr;gap:1rem}
  .proj-side{display:none}
  .proj-mob-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;flex-wrap:wrap}
  .proj-mob-filter-btn{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:.6rem 1rem;font-family:var(--body);font-size:.88rem;color:var(--ink);cursor:pointer;font-weight:600;transition:border-color .2s,color .2s}
  .proj-mob-filter-btn svg{color:var(--muted);flex-shrink:0;transition:color .2s}
  .proj-mob-filter-btn.has-filter{border-color:var(--gold);color:var(--gold)}
  .proj-mob-filter-btn.has-filter svg{color:var(--gold)}
  .proj-mob-search{display:flex;align-items:center;gap:.45rem;flex:1;min-width:160px;border:1.5px solid var(--line);border-radius:8px;padding:.6rem .85rem;background:#fff}
  .proj-mob-search input{border:none;outline:none;font-family:var(--body);font-size:.88rem;width:100%;background:transparent;color:var(--ink)}
  .proj-mob-search svg{color:var(--muted);flex-shrink:0}
  .proj-mob-active-chip{display:inline-flex;align-items:center;gap:.4rem;background:#FBF6EC;border:1px solid #E8D49A;color:var(--gold-deep);border-radius:999px;padding:.3rem .75rem;font-family:var(--body);font-size:.8rem;font-weight:600}
  .proj-mob-active-chip button{background:none;border:none;cursor:pointer;color:var(--gold-deep);padding:0;line-height:1;font-size:.9rem}
}

/* v5: project fact sheet */
.factsheet{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.factsheet .fs{display:flex;gap:.9rem;align-items:flex-start;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.factsheet .fs:nth-child(odd){border-right:1px solid var(--line)}
.factsheet .fs:nth-last-child(1),.factsheet .fs:nth-last-child(2){border-bottom:none}
.factsheet .ic{color:var(--gold);flex-shrink:0;margin-top:1px}
.factsheet .k{font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;font-family:var(--body)}
.factsheet .v{font-family:var(--display);font-size:1.05rem;color:var(--ink);font-weight:600;margin-top:.2rem;line-height:1.3}
@media(max-width:640px){.factsheet{grid-template-columns:1fr}.factsheet .fs:nth-child(odd){border-right:none}.factsheet .fs:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* pcard: explore-more button replaces plain price text */
.pc-explore{display:block;text-align:center;background:var(--ink);color:#fff;font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.7rem 1rem;border-radius:8px;text-decoration:none;transition:background .2s}
.pc-explore:hover{background:var(--gold);color:#22160a}

/* coming-soon placeholder card */
.pcard.soon{cursor:default}
.pcard.soon .pc-img{background:linear-gradient(135deg,#1A1A1A,#2b2b28);display:flex;align-items:center;justify-content:center}
.pcard.soon .pc-img svg{opacity:.35}
.pcard.soon .pc-img .tag{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
.pcard.soon .pc-body{text-align:center;padding:1.6rem 1.3rem 1.5rem}
.pcard.soon h3{margin:.2rem 0 .5rem}
.pcard.soon .pc-soon-txt{color:var(--muted);font-size:.85rem;margin-bottom:1rem;line-height:1.5}

/* cover hero fallback when no photo has been supplied yet */
.pj-hero.pending{background:linear-gradient(145deg,#141412,#1f1f1c 60%,#141412)}
.pj-hero.pending::after{background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 60%)}
.photo-pending{display:inline-block;margin-top:1.4rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.4rem .9rem;font-family:var(--body)}

/* pcard image placeholder for a real (non-soon) project without a photo yet */
.pc-img.pending-tile{background:linear-gradient(135deg,#1c1c19,#2b2b26);display:flex;align-items:center;justify-content:center}
.pc-img.pending-tile::before{content:"";width:44px;height:44px;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22><rect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/><circle cx=%228.5%22 cy=%2210.5%22 r=%221.5%22/><path d=%22m21 15-5-5L5 19%22/></svg>') center/contain no-repeat}

/* =====================================================================
   SEO CONTENT SECTIONS (project pages) — added round 19
   All-new classes; nothing above is modified. Uses existing theme
   tokens so page-scoped themes (e.g. .theme-aras) inherit correctly.
   ===================================================================== */

/* breadcrumb */
.pj-crumb{font-family:var(--body);font-size:.78rem;color:var(--muted);padding:1rem 0 0}
.pj-crumb a{color:var(--muted);border-bottom:1px solid var(--line)}
.pj-crumb a:hover{color:var(--gold)}
.pj-crumb span{margin:0 .4rem;opacity:.6}

/* table of contents */
.pj-toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.5rem;margin:0 0 .5rem}
.pj-toc h2{font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.pj-toc ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin:0}
.pj-toc a{display:inline-block;font-family:var(--body);font-size:.83rem;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;transition:border-color .2s,color .2s}
.pj-toc a:hover{border-color:var(--gold);color:var(--gold)}

/* two-column "who it suits" */
.fit-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem}
.fit-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.6rem}
.fit-col h3{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--ink);margin:0 0 1rem;display:flex;align-items:center;gap:.55rem}
.fit-col h3 .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fit-col.yes h3 .dot{background:#3F8F5F}
.fit-col.no h3 .dot{background:#B4794A}
.fit-col ul{list-style:none;margin:0}
.fit-col li{position:relative;padding:0 0 .8rem 1.35rem;font-size:.92rem;color:var(--ink-2);line-height:1.6}
.fit-col li:last-child{padding-bottom:0}
.fit-col li::before{content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--line)}
.fit-col.yes li::before{background:#3F8F5F}
.fit-col.no li::before{background:#B4794A}

/* pros & cons */
.pc-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem}
.pc-panel{border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.6rem;background:#fff}
.pc-panel h3{font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem}
.pc-panel.pros h3{color:#3F8F5F}
.pc-panel.cons h3{color:#B4794A}
.pc-panel ul{list-style:none;margin:0}
.pc-panel li{position:relative;padding:0 0 .85rem 1.6rem;font-size:.92rem;color:var(--ink-2);line-height:1.6}
.pc-panel li:last-child{padding-bottom:0}
.pc-panel li::before{position:absolute;left:0;top:0;font-weight:700;font-size:.95rem}
.pc-panel.pros li::before{content:"+";color:#3F8F5F}
.pc-panel.cons li::before{content:"–";color:#B4794A}

/* verdict box */
.verdict{background:var(--ink);color:#EDE9E0;border-radius:14px;padding:2.2rem 2.4rem;margin-top:1.8rem}
.verdict h3{font-family:var(--display);font-size:1.35rem;color:#fff;font-weight:600;margin:0 0 1rem}
.verdict p{color:#C6C2B8;font-size:.95rem;line-height:1.75;margin:0 0 .9rem}
.verdict p:last-of-type{margin-bottom:0}
.verdict .sig{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);font-family:var(--body);font-size:.8rem;color:#9A968C}
.verdict .sig b{color:#E7C877;font-weight:600}

/* area context prose */
.area-prose p{font-size:.97rem;line-height:1.8;color:var(--ink-2);margin-bottom:1.1rem;max-width:760px}
.area-prose p:last-child{margin-bottom:0}
.area-prose h3{font-family:var(--display);font-size:1.2rem;color:var(--ink);font-weight:600;margin:1.8rem 0 .8rem}

/* related projects */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem}
.rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;transition:border-color .2s,transform .2s}
.rel-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.rel-card .rl{font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.rel-card h3{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--ink);margin:.35rem 0 .5rem}
.rel-card p{font-size:.85rem;color:var(--muted);line-height:1.55;margin:0}

@media(max-width:820px){
  .fit-two,.pc-two{grid-template-columns:1fr;gap:1rem}
  .rel-grid{grid-template-columns:1fr}
  .verdict{padding:1.7rem 1.5rem}
  .pj-toc{padding:1.1rem 1.2rem}
}
.pj-navsec{padding:1.4rem 0 .2rem}
/* fact sheet: a lone final cell (odd total) spans both columns instead of
   leaving a dangling vertical divider — affects odd-count sheets only */
.factsheet .fs:last-child:nth-child(odd){grid-column:1/-1;border-right:none}

/* =====================================================================
   FLOATING BUTTON ROW — site-wide, all pages. Both the WhatsApp button
   and the "Explore All Projects" button sit inside one fixed-position
   flex row (.float-stack) instead of stacking vertically, so together
   they take up far less screen height and block less of the page.
   Explore button uses fixed --ink (never overridden by page themes)
   so it reads correctly on every themed project page regardless of
   that page's own accent colour. Both labels are always visible.
   ===================================================================== */
.float-stack{position:fixed;right:22px;bottom:22px;z-index:300;display:flex;align-items:center;gap:12px}
.explore-float{position:relative;display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:#fff;padding:.75rem 1.15rem;border-radius:999px;box-shadow:0 12px 30px -8px rgba(26,26,26,.55);font-family:var(--body);font-weight:700;font-size:.85rem;white-space:nowrap;text-decoration:none;border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .2s}
.explore-float svg{width:18px;height:18px;display:block;flex-shrink:0}
.explore-float:hover{background:#000;transform:translateY(-2px)}
@media(max-width:600px){
  .float-stack{right:16px;bottom:16px;gap:8px}
  .explore-float,.wa-float{padding:.65rem 1rem;font-size:.78rem}
  .explore-float svg,.wa-float svg{width:16px;height:16px}
}
@media(max-width:420px){
  .explore-float .lbl{display:none}
  .explore-float{padding:.65rem}
}