/* ABL GROUP — STYLESHEET v3
   Mobile-first · Full-width sections · Clean
================================================ */

:root {
  --black:  #0C0C0C;
  --dark:   #141414;
  --gold:   #C9A84C;
  --gold2:  #A8883A;
  --white:  #FFFFFF;
  --off:    #F7F5F1;
  --gray:   #6B6B6B;
  --light:  #E2DDD6;
  --green:  #2DB86E;
  --red:    #E24B4A;
  --nav-h:  64px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --trans:  .2s ease;
  --max:    1200px;
  --pad:    1.25rem;
}
@media(min-width:768px){ :root{ --pad: 2rem; } }
@media(min-width:1280px){ :root{ --pad: 3rem; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--black); background:var(--white);
  line-height:1.6; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
button{ border:none; background:none; cursor:pointer; font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
ul{ list-style:none; }

/* CONTAINER — centered, padded, max-width */
.container{
  width:100%; max-width:var(--max);
  margin:0 auto; padding:0 var(--pad);
}

/* SECTION — always full viewport width, never boxed */
.section{ width:100%; }
.section-pad{ padding:4.5rem 0; }
@media(min-width:768px){ .section-pad{ padding:6rem 0; } }

/* TYPOGRAPHY */
h1{ font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.1; letter-spacing:-.025em; }
h2{ font-size:clamp(1.65rem,3.5vw,2.4rem); font-weight:700; line-height:1.2; letter-spacing:-.015em; }
h3{ font-size:clamp(1.05rem,2vw,1.25rem); font-weight:700; line-height:1.3; }
h4{ font-size:1rem; font-weight:700; }
p{ color:var(--gray); line-height:1.85; }

.eyebrow{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.65rem;
}
.section-title{ margin-bottom:1rem; }
.section-sub{ color:var(--gray); max-width:560px; }
.text-center{ text-align:center; }
.text-white{ color:var(--white) !important; }
.text-gold{ color:var(--gold) !important; }
.text-muted{ color:rgba(255,255,255,.5) !important; }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:var(--r);
  font-size:.875rem; font-weight:600;
  transition:background var(--trans),transform var(--trans),border-color var(--trans);
  cursor:pointer; white-space:nowrap; border:2px solid transparent;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:var(--black); }
.btn-gold:hover{ background:var(--gold2); }
.btn-black{ background:var(--black); color:var(--white); }
.btn-black:hover{ background:#222; }
.btn-outline-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-outline-white:hover{ border-color:var(--white); background:rgba(255,255,255,.1); }
.btn-outline-dark{ background:transparent; color:var(--black); border-color:var(--light); }
.btn-outline-dark:hover{ border-color:var(--black); }
.btn-sm{ padding:.55rem 1.1rem; font-size:.8rem; }
.btn-lg{ padding:.9rem 2rem; font-size:1rem; }
.btn-full{ width:100%; justify-content:center; }
.btn-group{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* IMAGE FRAME */
.img-frame{
  position:relative; overflow:hidden;
  background:var(--light); border-radius:var(--r-lg);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; }
.img-label{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; padding:1rem; text-align:center;
  background:linear-gradient(135deg,#ede8e0,#e0dbd3);
  color:var(--gray); font-size:.72rem;
}
.img-label i{ font-size:2rem; color:rgba(0,0,0,.15); }
.img-label strong{ font-size:.7rem; color:var(--black); display:block; }
.img-label span{ font-size:.65rem; color:var(--gray); }
/* Image sits above label — label always visible underneath as placeholder */
.img-frame img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
/* When image fails to load, it collapses to 0 height revealing the label */
.img-frame img[src]{ display:block; }

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
:root{ --nav-h: 72px; }
@media(min-width:960px){ :root{ --nav-h: 84px; } }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); width:100%;
  transition:background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.5);
}
.nav.solid{ background:var(--black); }

.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:100%; max-width:1320px; margin:0 auto; padding:0 var(--pad);
}

/* ── LOGO — image only, no text ── */
.nav-logo{
  display:flex; align-items:center; gap:1rem;
  z-index:2; flex-shrink:0; text-decoration:none;
}
.nav-logo-img{
  height:48px; width:48px; object-fit:contain;
  transition:transform .25s ease;
}
@media(min-width:960px){
  .nav-logo-img{ height:60px; width:60px; }
}
.nav-logo:hover .nav-logo-img{ transform:scale(1.05); }

/* Tagline beside logo — desktop only */
.nav-logo-tag{ display:none; }
@media(min-width:1024px){
  .nav-logo-tag{
    display:flex; flex-direction:column; gap:2px;
    border-left:1px solid rgba(255,255,255,.12);
    padding-left:1rem; margin-left:.25rem;
  }
  .nav-logo-tag strong{
    font-size:.7rem; font-weight:800; letter-spacing:.18em;
    text-transform:uppercase; color:var(--gold); line-height:1;
  }
  .nav-logo-tag span{
    font-size:.65rem; color:rgba(255,255,255,.35);
    letter-spacing:.06em; line-height:1;
  }
}
/* Hide old text element */
.nav-logo-text{ display:none !important; }

/* ── DESKTOP LINKS ── */
.nav-links{ display:none; }
@media(min-width:960px){
  .nav-links{
    display:flex; align-items:center; gap:.05rem;
    position:absolute; left:50%; transform:translateX(-50%);
  }
  .nav-links a{
    display:block; padding:.6rem 1.1rem;
    font-size:.82rem; font-weight:600; letter-spacing:.01em;
    color:rgba(255,255,255,.6);
    border-radius:var(--r);
    transition:color .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .nav-links a:hover{ color:var(--white); background:rgba(255,255,255,.07); }
  .nav-links a.active{
    color:var(--gold);
    background:rgba(201,168,76,.1);
  }
  /* Gold underline on active */
  .nav-links a.active::after{
    content:''; display:block; height:2px; width:100%;
    background:var(--gold); border-radius:2px; margin-top:2px;
  }
}
@media(min-width:1100px){ .nav-links a{ padding:.6rem 1.35rem; font-size:.85rem; } }

/* ── NAV RIGHT ── */
.nav-right{ display:flex; align-items:center; gap:.75rem; }
.nav-cta{ display:none; }
@media(min-width:640px){ .nav-cta{ display:inline-flex; } }
@media(min-width:960px){
  .nav-cta{
    padding:.65rem 1.4rem !important;
    font-size:.82rem !important;
    letter-spacing:.02em;
  }
}

/* Hamburger */
.hamburger{
  display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  width:42px; height:42px;
  background:rgba(255,255,255,.1); border-radius:var(--r);
  padding:10px; transition:background var(--trans);
}
@media(min-width:960px){ .hamburger{ display:none; } }
.hamburger span{
  display:block; width:100%; height:2px;
  background:var(--white); border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu — full screen slide */
.mob-menu{
  position:fixed; inset:0; z-index:999;
  background:var(--black);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 2rem) var(--pad) 2rem;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
@media(min-width:960px){ .mob-menu{ display:none !important; } }
.mob-menu.open{ transform:translateX(0); }
.mob-menu a{
  display:block; padding:1rem 0;
  font-size:1.2rem; font-weight:600;
  color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color var(--trans);
}
.mob-menu a:hover,.mob-menu a.active{ color:var(--gold); }
.mob-menu .btn{ margin-top:1.75rem; }

/* Back-to-top / WhatsApp */
.back-top{
  position:fixed; bottom:5.5rem; right:1.25rem; z-index:900;
  width:44px; height:44px; border-radius:50%;
  background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  opacity:0; pointer-events:none;
  transition:opacity var(--trans);
}
.back-top.on{ opacity:1; pointer-events:auto; }
.wa-btn{
  position:fixed; bottom:1.5rem; right:1.25rem; z-index:900;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:transform var(--trans);
}
.wa-btn:hover{ transform:scale(1.1); }

 50%{opacity:1;transform:scale(1)} }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero{
  position:relative; width:100%;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--black);
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero-media img,.hero-media video{
  width:100%; height:100%; object-fit:cover;
  opacity:.45;
}
/* Geometric fallback when no image */
.hero-media::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(135deg,rgba(12,12,12,.98) 0%,rgba(18,14,8,.9) 50%,rgba(12,12,12,.95) 100%);
}
.hero-media::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:
    linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:center center;
}
.hero-media img{ position:relative; z-index:3; }
.hero-overlay{
  position:absolute; inset:0; z-index:4;
  background:linear-gradient(to top,rgba(12,12,12,.92) 0%,rgba(12,12,12,.3) 55%,transparent 100%);
}
.hero-body{
  position:relative; z-index:5; width:100%;
  padding:calc(var(--nav-h) + 3rem) 0 4rem;
}

.hero-h1{ color:var(--white); margin-bottom:1rem; }
.hero-h1 em{ font-style:normal; color:var(--gold); }
.hero-p{ color:rgba(255,255,255,.6); font-size:1rem; max-width:540px; margin-bottom:2rem; }
.hero-stats{
  display:inline-grid; grid-template-columns:repeat(3,1fr);
  margin-top:2.5rem; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.hero-stat{
  padding:1.1rem 1.25rem; text-align:center;
  background:rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.1);
}
.hero-stat:last-child{ border-right:none; }
.hero-stat-n{ font-size:1.5rem; font-weight:800; color:var(--gold); line-height:1; }
.hero-stat-l{ font-size:.62rem; color:rgba(255,255,255,.45); margin-top:.3rem; letter-spacing:.04em; }
@media(min-width:768px){
  .hero-stat-n{ font-size:1.85rem; }
  .hero-body{ padding:calc(var(--nav-h) + 4rem) 0 5rem; }
}

/* ─────────────────────────────────────────
   SECTION HEADERS
───────────────────────────────────────── */
.s-hdr{ margin-bottom:3rem; }
.s-hdr-row{
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:3rem;
}

/* ─────────────────────────────────────────
   TWO-COLUMN PITCH
───────────────────────────────────────── */
.pitch-grid{ display:grid; gap:1.5rem; }
@media(min-width:768px){ .pitch-grid{ grid-template-columns:1fr 1fr; } }
.pitch-card{
  border-radius:var(--r-xl); padding:2.25rem;
}
.pitch-card.dark{ background:var(--black); }
.pitch-card.light{ background:var(--off); border:1.5px solid var(--light); }
.pitch-icon{
  width:54px; height:54px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:1.25rem;
}
.pitch-card.dark .pitch-icon{ background:rgba(201,168,76,.12); color:var(--gold); }
.pitch-card.light .pitch-icon{ background:var(--black); color:var(--gold); }
.pitch-list{ margin:1.25rem 0 1.75rem; display:flex; flex-direction:column; gap:.6rem; }
.pitch-list li{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.875rem;
}
.pitch-card.dark .pitch-list li{ color:rgba(255,255,255,.6); }
.pitch-card.light .pitch-list li{ color:var(--gray); }
.pitch-list li i{ color:var(--gold); margin-top:.18rem; flex-shrink:0; font-size:.8rem; }

/* ─────────────────────────────────────────
   WHY INVEST CARDS
───────────────────────────────────────── */
.invest-grid{ display:grid; gap:1.25rem; }
@media(min-width:580px){ .invest-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .invest-grid{ grid-template-columns:repeat(4,1fr); } }
.invest-card{
  padding:1.75rem; border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  transition:border-color var(--trans);
}
.invest-card:hover{ border-color:var(--gold); }
.invest-icon{
  width:52px; height:52px;
  border-radius:var(--r);
  background:rgba(201,168,76,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--gold);
  margin-bottom:1rem;
  flex-shrink:0;
}
.invest-card h4{ color:var(--white); margin-bottom:.4rem; font-size:.95rem; }
.invest-card p{ color:rgba(255,255,255,.45); font-size:.82rem; line-height:1.75; }

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
.services-grid{ display:grid; gap:1.25rem; }
@media(min-width:580px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{
  background:var(--white); border-radius:var(--r-xl);
  overflow:hidden; border:1.5px solid var(--light);
  transition:box-shadow var(--trans),transform var(--trans);
}
.svc-card:hover{ transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.08); }
.svc-img{ height:180px; }
.svc-body{ padding:1.5rem; }
.svc-icon{
  width:46px; height:46px; border-radius:var(--r);
  background:var(--black); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:1rem;
}
.svc-card h3{ font-size:1rem; margin-bottom:.4rem; }
.svc-card p{ font-size:.83rem; }

/* ─────────────────────────────────────────
   PROJECTS
───────────────────────────────────────── */
.proj-grid{ display:grid; gap:1.25rem; }
@media(min-width:580px){ .proj-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .proj-grid{ grid-template-columns:repeat(3,1fr); } }
.proj-card{
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--white); border:1.5px solid var(--light);
  transition:box-shadow var(--trans),transform var(--trans);
}
.proj-card:hover{ transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.1); }
.proj-thumb{ position:relative; height:230px; overflow:hidden; background:var(--light); }
.proj-thumb img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.proj-thumb .img-label{ z-index:0; border-radius:0; height:100%; }
.proj-card:hover .proj-thumb img{ transform:scale(1.04); }
.proj-badge{
  position:absolute; top:.85rem; left:.85rem;
  padding:.28rem .8rem; border-radius:100px;
  font-size:.65rem; font-weight:700; letter-spacing:.05em;
}
.badge-done{ background:var(--gold); color:var(--black); }
.badge-live{ background:var(--green); color:var(--white); }
.badge-soon{ background:var(--gray); color:var(--white); }
.proj-body{ padding:1.4rem; }
.proj-type{ font-size:.7rem; font-weight:700; color:var(--gold); letter-spacing:.06em; margin-bottom:.35rem; }
.proj-body h3{ font-size:.975rem; margin-bottom:.35rem; }
.proj-meta{ font-size:.78rem; color:var(--gray); display:flex; align-items:center; gap:.3rem; margin-bottom:1rem; }
.filter-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.25rem; }
.f-btn{
  padding:.45rem 1rem; border-radius:100px;
  font-size:.78rem; font-weight:600; cursor:pointer;
  background:var(--off); color:var(--gray);
  border:1.5px solid transparent;
  transition:all var(--trans);
}
.f-btn.on,.f-btn:hover{ background:var(--black); color:var(--white); }

/* ─────────────────────────────────────────
   STATS BAND
───────────────────────────────────────── */
.stats-band{ display:grid; }
@media(min-width:580px){ .stats-band{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .stats-band{ grid-template-columns:repeat(4,1fr); } }
.stat-cell{
  padding:2.5rem 2rem; text-align:center;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stat-cell:last-child{ border-right:none; }
.stat-n{ font-size:2.25rem; font-weight:800; color:var(--gold); line-height:1; }
.stat-l{ font-size:.78rem; color:rgba(255,255,255,.4); margin-top:.4rem; letter-spacing:.04em; }

/* ─────────────────────────────────────────
   PROCESS STEPS
───────────────────────────────────────── */
.steps-grid{ display:grid; gap:1.25rem; }
@media(min-width:580px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
.step{
  padding:1.75rem; border-radius:var(--r-xl);
  background:var(--off); position:relative;
}
.step-n{
  font-size:2.75rem; font-weight:900; color:var(--light);
  line-height:1; margin-bottom:.75rem; letter-spacing:-.05em;
}
.step h4{ margin-bottom:.4rem; font-size:.95rem; }
.step p{ font-size:.82rem; }

/* ─────────────────────────────────────────
   TESTIMONIALS CAROUSEL
───────────────────────────────────────── */
.testi-overflow{ overflow:hidden; }
.testi-track{
  display:flex; gap:1.25rem;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.testi-card{
  flex-shrink:0;
  background:var(--off); border-radius:var(--r-xl);
  padding:2rem; border:1.5px solid var(--light);
}
.stars{ color:var(--gold); font-size:.85rem; letter-spacing:.1em; margin-bottom:1rem; }
.testi-card blockquote{
  font-size:.9rem; line-height:1.85;
  color:var(--black); font-style:italic;
  margin-bottom:1.25rem;
}
.testi-author{ display:flex; align-items:center; gap:.85rem; }
.testi-av{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--black); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
}
.testi-av img{ width:100%; height:100%; object-fit:cover; }
.testi-name{ font-size:.875rem; font-weight:700; display:block; }
.testi-role{ font-size:.75rem; color:var(--gray); }
.car-btns{ display:flex; gap:.5rem; }
.car-btn{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--light); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; cursor:pointer;
  transition:all var(--trans);
}
.car-btn:hover{ background:var(--black); color:var(--white); border-color:var(--black); }

/* ─────────────────────────────────────────
   BLOG
───────────────────────────────────────── */
.blog-grid{ display:grid; gap:1.25rem; }
@media(min-width:580px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{
  border-radius:var(--r-xl); overflow:hidden;
  border:1.5px solid var(--light); background:var(--white);
  transition:box-shadow var(--trans),transform var(--trans);
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.08); }
.blog-thumb{ position:relative; height:190px; overflow:hidden; background:var(--light); }
.blog-thumb img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-thumb .img-label{ z-index:0; border-radius:0; height:100%; }
.blog-card:hover .blog-thumb img{ transform:scale(1.04); }
.blog-body{ padding:1.4rem; }
.blog-cat{ font-size:.68rem; font-weight:700; color:var(--gold); letter-spacing:.08em; margin-bottom:.45rem; }
.blog-body h3{ font-size:.95rem; line-height:1.4; margin-bottom:.45rem; }
.blog-excerpt{ font-size:.82rem; margin-bottom:.85rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:var(--gray); }
.blog-link{ color:var(--gold); font-weight:600; display:flex; align-items:center; gap:.3rem; }

/* ─────────────────────────────────────────
   CTA BAND
───────────────────────────────────────── */
.cta-band{ width:100%; background:var(--gold); padding:4.5rem 0; text-align:center; }
.cta-band h2{ color:var(--black); margin-bottom:.75rem; }
.cta-band p{ color:rgba(0,0,0,.6); margin-bottom:2rem; }

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact-grid{ display:grid; gap:3rem; }
@media(min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.contact-item{ display:flex; gap:1rem; margin-bottom:1.4rem; align-items:flex-start; }
.contact-icon{
  width:46px; height:46px; flex-shrink:0;
  border-radius:var(--r); background:var(--off);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1rem;
}
.contact-item h5{ font-size:.78rem; color:var(--gray); margin-bottom:.2rem; }
.contact-item p{ font-size:.9rem; color:var(--black); }
.map-box{ height:260px; border-radius:var(--r-xl); overflow:hidden; margin-top:2rem; }
.map-box iframe{ width:100%; height:100%; border:none; display:block; }

/* Form */
.form-wrap .fg{ margin-bottom:1.15rem; }
.form-wrap label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.4rem; }
.form-wrap .fc{
  width:100%; padding:.75rem 1rem;
  border:1.5px solid var(--light); border-radius:var(--r);
  background:var(--off); color:var(--black); outline:none;
  transition:border-color var(--trans);
}
.form-wrap .fc:focus{ border-color:var(--gold); background:var(--white); }
textarea.fc{ resize:vertical; min-height:130px; }
.form-row{ display:grid; gap:1rem; }
@media(min-width:580px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-ok{
  display:none; align-items:center; gap:.65rem;
  padding:.85rem 1.1rem; border-radius:var(--r);
  background:rgba(45,184,110,.1); border:1.5px solid rgba(45,184,110,.25);
  color:#1a8a4a; font-size:.875rem; margin-bottom:1rem;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer{ width:100%; background:var(--black); }

/* ── Top strip: brand + tagline + socials ── */
.footer-top-strip{
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:2.25rem 0;
}
.footer-top-strip-inner{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:1.25rem;
}
.footer-brand-block{ display:flex; align-items:center; gap:1rem; }
.footer-brand-block img{ height:44px; width:44px; object-fit:contain; }
.footer-brand-words{ display:flex; flex-direction:column; gap:2px; }
.footer-brand-words strong{
  font-size:.72rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); line-height:1;
}
.footer-brand-words span{
  font-size:.62rem; color:rgba(255,255,255,.3);
  letter-spacing:.05em; line-height:1;
}
.footer-socials{ display:flex; gap:.5rem; justify-content:center; }
@media(min-width:640px){ .footer-socials{ justify-content:flex-end; } }
.footer-socials a{
  width:38px; height:38px; border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:rgba(255,255,255,.4);
  transition:all var(--trans);
}
.footer-socials a:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

/* ── Main links area ── */
.footer-main{ padding:2.5rem 0; }
.footer-links-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 1.5rem;
}
@media(min-width:640px){
  .footer-links-grid{ grid-template-columns:repeat(3,1fr); gap:2rem; }
}
@media(min-width:960px){
  .footer-links-grid{ grid-template-columns:repeat(4,1fr); }
}
.footer-col h5{
  font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.9); margin-bottom:.85rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-col a{
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:rgba(255,255,255,.38);
  padding:.28rem 0; transition:color var(--trans);
  line-height:1.5;
}
.footer-col a:hover{ color:var(--gold); }
.footer-col a i{ font-size:.65rem; color:var(--gold); opacity:.5; flex-shrink:0; }
.footer-col a:hover i{ opacity:1; }

/* ── Contact pill row ── */
.footer-contact-row{
  display:flex; flex-wrap:wrap; gap:.65rem;
  justify-content:center;
  padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:0;
}
.footer-contact-pill{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:.78rem; color:rgba(255,255,255,.5);
  transition:all var(--trans);
  text-decoration:none;
}
.footer-contact-pill:hover{ background:rgba(201,168,76,.1); border-color:rgba(201,168,76,.3); color:var(--gold); }
.footer-contact-pill i{ color:var(--gold); font-size:.72rem; }

/* ── Base ── */
.footer-base{
  padding:1.1rem 0;
  display:flex; flex-direction:column; gap:.5rem;
  align-items:center; text-align:center;
}
@media(min-width:640px){
  .footer-base{
    flex-direction:row; justify-content:space-between;
    align-items:center; text-align:left;
  }
}
.footer-base span{ font-size:.72rem; color:rgba(255,255,255,.22); line-height:1.6; }
.footer-legal{ display:flex; gap:1.25rem; justify-content:center; }
@media(min-width:640px){ .footer-legal{ justify-content:flex-end; } }
.footer-legal a{ font-size:.72rem; color:rgba(255,255,255,.22); transition:color var(--trans); }
.footer-legal a:hover{ color:var(--gold); }

/* ─────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────── */
.page-hero{
  width:100%; background:var(--black);
  padding:calc(var(--nav-h) + 4rem) 0 4rem;
}
.page-hero h1{ color:var(--white); margin-bottom:.65rem; }
.page-hero p{ color:rgba(255,255,255,.5); max-width:560px; font-size:1rem; }
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.4rem; margin-bottom:1.25rem;
  font-size:.75rem; color:rgba(255,255,255,.35);
}
.breadcrumb a{ color:rgba(255,255,255,.35); transition:color var(--trans); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb i{ font-size:.55rem; }

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */
.about-grid{ display:grid; gap:3.5rem; align-items:center; }
@media(min-width:960px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.cert-row{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.cert{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:var(--r);
  background:var(--off); font-size:.78rem; font-weight:600;
  border:1.5px solid var(--light);
}
.cert i{ color:var(--gold); }
.team-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .team-grid{ grid-template-columns:repeat(4,1fr); } }
.team-card{ text-align:center; }
.team-photo{ height:240px; border-radius:var(--r-xl); margin-bottom:1rem; }
.team-card h4{ font-size:.9rem; margin-bottom:.2rem; }
.team-card span{ font-size:.75rem; color:var(--gold); }
.job-card{
  padding:1.5rem; background:var(--off);
  border-radius:var(--r-xl); border:1.5px solid var(--light);
  margin-bottom:1rem;
}
.job-card h4{ margin-bottom:.35rem; }
.job-meta{ font-size:.75rem; color:var(--gray); display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.85rem; }
.job-meta span{ display:flex; align-items:center; gap:.3rem; }

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
/* Fade animations — only active after JS marks body ready */
.fade{ opacity:1; transform:none; }
.js-ready .fade{ opacity:0; transform:translateY(24px); transition:opacity .55s ease,transform .55s ease; }
.js-ready .fade.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .js-ready .fade{ opacity:1; transform:none; transition:none; } }

/* ─────────────────────────────────────────
   UTILITIES
───────────────────────────────────────── */
.mt-1{ margin-top:.5rem; }
.mt-2{ margin-top:1rem; }
.mt-3{ margin-top:1.5rem; }
.mt-4{ margin-top:2rem; }
.mb-1{ margin-bottom:.5rem; }
.mb-2{ margin-bottom:1rem; }
.gap-1{ gap:.5rem; }
.gap-2{ gap:1rem; }
.hidden{ display:none !important; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.grid{ display:grid; }




/* ─────────────────────────────────────────
   HERO BOTTOM ROW — stats + QR side by side
───────────────────────────────────────── */



@media(max-width:580px){
  
}

/* QR bar */
.hero-qr-bar{
  display:inline-flex; align-items:center; gap:.85rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  padding:.85rem 1.1rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  flex-shrink:0;
}
.hero-qr-box{
  background:var(--white);
  border-radius:8px;
  padding:6px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-qr-box img,
.hero-qr-box canvas{
  display:block;
  width:72px !important;
  height:72px !important;
}
.hero-qr-info{
  display:flex; flex-direction:column; gap:.5rem;
}
.hero-qr-info span{
  font-size:.68rem; color:rgba(255,255,255,.4);
  line-height:1.4;
}
.hero-qr-info button{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .85rem;
  border-radius:var(--r);
  background:rgba(201,168,76,.15);
  border:1px solid rgba(201,168,76,.3);
  color:var(--gold);
  font-size:.7rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background var(--trans), border-color var(--trans);
}
.hero-qr-info button:hover{
  background:rgba(201,168,76,.25);
  border-color:var(--gold);
}
/* Mobile: stack naturally */
@media(max-width:580px){
  
  .hero-qr-bar{ width:100%; }
}

/* ─────────────────────────────────────────
   HERO BOTTOM ROW — stats left, QR far right
───────────────────────────────────────── */
.hero-bottom-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:2rem;
  width:100%;
}
.hero-bottom-row .hero-stats{ margin-top:0; flex-shrink:0; }
.hero-bottom-row .hero-qr-bar{ flex-shrink:0; }

/* Mobile: stack, stats top, QR below */
@media(max-width:600px){
  .hero-bottom-row{ flex-direction:column; align-items:flex-start; gap:1rem; }
}

/* ─────────────────────────────────────────
   PROPERTY CARDS (properties page)
───────────────────────────────────────── */
.prop-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin-top:1.75rem;
}
.prop-card{
  background:var(--white);
  border-radius:var(--r-xl);
  border:1.5px solid var(--light);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--trans), box-shadow var(--trans);
}
.prop-card:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.10); }
.prop-thumb{ position:relative; height:220px; overflow:hidden; }
.prop-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.prop-card:hover .prop-thumb img{ transform:scale(1.04); }
.prop-tag{
  position:absolute; top:1rem; left:1rem;
  padding:.3rem .75rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.tag-fast{ background:#E24B4A; color:#fff; }
.tag-sale{ background:#2DB86E; color:#fff; }
.tag-offplan{ background:var(--gold); color:var(--black); }
.prop-body{ padding:1.35rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.prop-type{ font-size:.72rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; }
.prop-body h3{ font-size:1rem; color:var(--black); line-height:1.4; margin:0; }
.prop-location{ font-size:.8rem; color:var(--gray); display:flex; align-items:center; gap:.4rem; }
.prop-location i{ color:var(--gold); font-size:.75rem; }
.prop-features{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0; }
.prop-feat{
  font-size:.72rem; color:var(--gray);
  background:var(--off); border-radius:999px;
  padding:.25rem .65rem;
  display:flex; align-items:center; gap:.3rem;
}
.prop-feat i{ color:var(--gold); font-size:.65rem; }
.prop-price-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:.75rem 0; border-top:1px solid var(--light); border-bottom:1px solid var(--light);
  margin:.25rem 0;
}
.prop-price-lbl{ font-size:.68rem; color:var(--gray); margin-bottom:.15rem; }
.prop-price{ font-size:1.15rem; font-weight:800; color:var(--black); }
.prop-plan{ font-size:.68rem; color:var(--gray); text-align:right; line-height:1.5; }

/* ─────────────────────────────────────────
   WHY CHOOSE US — light background variant
   invest-card normally has white text for dark bg;
   on light sections override to dark text
───────────────────────────────────────── */
.section-light .invest-card,
.why-light .invest-card,
[style*="background:var(--off)"] .invest-card,
[style*="background:var(--white)"] .invest-card{
  background:var(--white);
  border:1.5px solid var(--light);
}
.section-light .invest-card h4,
.why-light .invest-card h4,
[style*="background:var(--off)"] .invest-card h4,
[style*="background:var(--white)"] .invest-card h4{ color:var(--black); }
.section-light .invest-card p,
.why-light .invest-card p,
[style*="background:var(--off)"] .invest-card p,
[style*="background:var(--white)"] .invest-card p{ color:var(--gray); }
/* Icon keeps gold color, just brighter box on light bg */
.section-light .invest-icon,
.why-light .invest-icon,
[style*="background:var(--off)"] .invest-icon,
[style*="background:var(--white)"] .invest-icon{
  background:rgba(201,168,76,.12);
  color:var(--gold);
}

/* ─────────────────────────────────────────
   FILTER ROW (projects / properties)
───────────────────────────────────────── */
.filter-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.f-btn{
  padding:.45rem 1.1rem; border-radius:999px;
  border:1.5px solid var(--light); background:var(--white);
  font-size:.78rem; font-weight:600; color:var(--gray);
  cursor:pointer; transition:all var(--trans);
}
.f-btn:hover{ border-color:var(--gold); color:var(--black); }
.f-btn.on{ background:var(--black); border-color:var(--black); color:var(--white); }
.hidden{ display:none !important; }

/* ─────────────────────────────────────────
   STEPS GRID (process section)
───────────────────────────────────────── */
.steps-grid{ display:grid; gap:1.5rem; }
@media(min-width:580px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:2rem; background:var(--off); border-radius:var(--r-xl); border:1.5px solid var(--light); }
.step-n{ font-size:2.5rem; font-weight:900; color:var(--gold); opacity:.35; line-height:1; margin-bottom:.75rem; }
.step h4{ margin-bottom:.4rem; }
.step p{ font-size:.83rem; color:var(--gray); line-height:1.75; }

/* ─────────────────────────────────────────
   STATS BAND
───────────────────────────────────────── */
.stats-band{
  display:grid; grid-template-columns:repeat(2,1fr);
  max-width:var(--max); margin:0 auto; padding:3rem 1.5rem;
}
@media(min-width:680px){ .stats-band{ grid-template-columns:repeat(4,1fr); } }
.stat-cell{ text-align:center; padding:1.5rem 1rem; }
.stat-n{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--gold); line-height:1; }
.stat-l{ font-size:.78rem; color:rgba(255,255,255,.45); margin-top:.4rem; text-transform:uppercase; letter-spacing:.06em; }

/* ─────────────────────────────────────────
   CONTACT / FORM GRID
───────────────────────────────────────── */
.contact-grid{ display:grid; gap:3rem; align-items:start; }
@media(min-width:860px){ .contact-grid{ grid-template-columns:1fr 1.2fr; } }
.contact-item{ display:flex; gap:1rem; align-items:flex-start; }
.contact-icon{
  width:44px; height:44px; flex-shrink:0;
  background:var(--black); color:var(--gold);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center;
}
.contact-item h5{ font-size:.875rem; margin-bottom:.2rem; }
.contact-item p{ font-size:.8rem; color:var(--gray); }

/* ─────────────────────────────────────────
   PITCH CARD — 3-col on desktop
───────────────────────────────────────── */
@media(min-width:960px){ .pitch-grid{ grid-template-columns:repeat(3,1fr); } }

/* ─────────────────────────────────────────
   TEAM / JOB CARDS
───────────────────────────────────────── */
.team-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .team-grid{ grid-template-columns:repeat(4,1fr); } }
.team-card{ text-align:center; }
.team-photo{ height:280px; border-radius:var(--r-xl); }
.team-card h4{ margin-top:1rem; margin-bottom:.25rem; font-size:.95rem; }
.team-card span{ font-size:.78rem; color:var(--gold); font-weight:600; }
.job-card{
  padding:1.5rem; border-radius:var(--r-xl);
  border:1.5px solid var(--light); background:var(--white);
  margin-bottom:1rem;
}
.job-meta{ display:flex; flex-wrap:wrap; gap:.75rem; margin:.5rem 0 .75rem; }
.job-meta span{ font-size:.75rem; color:var(--gray); display:flex; align-items:center; gap:.35rem; }
.job-meta i{ color:var(--gold); }

/* ─────────────────────────────────────────
   CERT ROW (about page)
───────────────────────────────────────── */
.cert-row{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.cert{
  padding:.4rem .9rem; border-radius:999px;
  background:var(--off); border:1.5px solid var(--light);
  font-size:.75rem; font-weight:600; color:var(--gray);
  display:flex; align-items:center; gap:.4rem;
}
.cert i{ color:var(--gold); }

/* ─────────────────────────────────────────
   BLOG GRID
───────────────────────────────────────── */
.blog-grid{ display:grid; gap:1.5rem; }
@media(min-width:680px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{ background:var(--white); border-radius:var(--r-xl); border:1.5px solid var(--light); overflow:hidden; }
.blog-thumb{ height:200px; overflow:hidden; position:relative; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-body{ padding:1.35rem; }
.blog-cat{ font-size:.7rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.blog-body h3{ font-size:.95rem; line-height:1.45; margin-bottom:.5rem; }
.blog-excerpt{ font-size:.82rem; color:var(--gray); line-height:1.7; margin-bottom:.85rem; }
.blog-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:var(--gray); }
.blog-link{ color:var(--gold); font-weight:600; display:flex; align-items:center; gap:.35rem; text-decoration:none; }
.blog-link:hover{ text-decoration:underline; }

/* ─────────────────────────────────────────
   TESTIMONIAL CAROUSEL
───────────────────────────────────────── */
.testi-overflow{ overflow:hidden; }
.testi-track{ display:flex; gap:1.5rem; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.testi-card{
  min-width:calc(100% - 0px); padding:2rem; border-radius:var(--r-xl);
  background:var(--off); border:1.5px solid var(--light);
}
@media(min-width:768px){ .testi-card{ min-width:calc(50% - .75rem); } }
@media(min-width:1100px){ .testi-card{ min-width:calc(33.333% - 1rem); } }
.stars{ color:var(--gold); font-size:1.1rem; margin-bottom:1rem; letter-spacing:.1em; }
.testi-card blockquote{ font-size:.9rem; line-height:1.85; color:var(--gray); font-style:italic; margin-bottom:1.25rem; }
.testi-author{ display:flex; align-items:center; gap:.85rem; }
.testi-av{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--black); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; flex-shrink:0;
}
.testi-av img{ width:100%; height:100%; object-fit:cover; }
.testi-name{ display:block; font-size:.875rem; font-weight:700; }
.testi-role{ display:block; font-size:.75rem; color:var(--gray); }
.car-btns{ display:flex; gap:.5rem; }
.car-btn{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--light); background:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--black); transition:all var(--trans);
}
.car-btn:hover{ background:var(--black); color:var(--white); border-color:var(--black); }

/* ─────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────── */
.page-hero{
  background:var(--black); padding:5rem 0 3.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.page-hero h1{ color:var(--white); font-size:clamp(1.8rem,4vw,2.8rem); margin:.5rem 0 .75rem; }
.page-hero p{ color:rgba(255,255,255,.55); max-width:620px; font-size:1rem; line-height:1.8; }
.breadcrumb{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:rgba(255,255,255,.35); margin-bottom:.85rem; }
.breadcrumb a{ color:rgba(255,255,255,.5); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb i{ font-size:.6rem; }
.page-hero .eyebrow{ margin-bottom:.35rem; }

/* ─────────────────────────────────────────
   SVC FORM WRAP
───────────────────────────────────────── */
.form-wrap{ background:var(--white); border-radius:var(--r-xl); padding:2rem; border:1.5px solid var(--light); }
.form-ok{ display:none; align-items:center; gap:.5rem; padding:.85rem; background:rgba(45,184,110,.1); border-radius:var(--r); margin-top:.75rem; color:#1a8a4a; font-size:.85rem; }

/* ─────────────────────────────────────────
   JUSTIFY CENTER UTILITY
───────────────────────────────────────── */
.justify-center{ justify-content:center; }
.btn-full{ width:100%; justify-content:center; }