/* ============ HB Group — Premium finish layer ============
   Load AFTER styles.css. Overrides only; original file stays untouched. */
:root{
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --ink-deep:#122B38;
  --copper-hi:#D9B26E;
  --shadow-sm:0 2px 6px rgba(18,43,56,.06), 0 6px 16px rgba(18,43,56,.06);
  --shadow-md:0 10px 30px rgba(18,43,56,.10), 0 2px 8px rgba(18,43,56,.06);
  --shadow-lg:0 28px 60px rgba(18,43,56,.18), 0 8px 18px rgba(18,43,56,.08);
  --gloss:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 52%);
  --ease:cubic-bezier(.22,.7,.2,1);
}
::selection{background:var(--copper); color:var(--white);}
body{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(185,140,73,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(28,63,79,.06), transparent 60%),
    var(--paper);
  background-attachment:fixed;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{letter-spacing:-0.02em;}
p{text-wrap:pretty;}
h1,h2{text-wrap:balance;}

/* ---------- HEADER: frosted glass + copper hairline ---------- */
header{
  background:rgba(251,250,246,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:0;
  box-shadow:0 8px 28px rgba(18,43,56,.08);
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink-soft) 45%, var(--copper) 100%);
}
.icon-btn{width:42px; height:42px; border-radius:50%; transition:background .2s, transform .2s var(--ease);}
.icon-btn:hover{background:rgba(28,63,79,.08); transform:translateY(-1px);}

/* ---------- BUTTONS: glossy pills with light sweep ---------- */
.cta,.submit-btn{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-pill); padding:13px 28px; letter-spacing:.01em;
  background:linear-gradient(180deg, #2A5A6F 0%, var(--ink) 55%, var(--ink-deep) 100%);
  border:1px solid var(--ink-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(18,43,56,.28);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.cta::before,.submit-btn::before{content:""; position:absolute; inset:0; background:var(--gloss); z-index:-1;}
.cta::after,.submit-btn::after{
  content:""; position:absolute; top:0; left:-70%; width:50%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.cta:hover,.submit-btn:hover{
  transform:translateY(-2px); opacity:1; color:var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px rgba(18,43,56,.34);
}
.cta:hover::after,.submit-btn:hover::after{left:130%;}
.cta:active,.submit-btn:active{transform:translateY(0);}
.cta-light{
  background:linear-gradient(180deg, #FFFFFF 0%, #F1ECE0 100%); color:var(--ink); border-color:#fff;
  box-shadow:inset 0 -1px 0 rgba(28,63,79,.08), 0 10px 26px rgba(0,0,0,.22);
}
.cta-light:hover{color:var(--ink);}
.submit-btn{
  background:linear-gradient(180deg, var(--copper-hi) 0%, var(--copper) 55%, #9C733A 100%);
  border-color:#9C733A; color:#fff;
}
.link-arrow{border-bottom:0; padding:0 0 3px; position:relative;}
.link-arrow::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--copper), var(--copper-hi)); transform:scaleX(.35); transform-origin:left;
  transition:transform .35s var(--ease);
}
.link-arrow:hover::after{transform:scaleX(1);}
.link-arrow-light::after{background:linear-gradient(90deg, #fff, var(--copper-hi));}

/* ---------- HEROES ---------- */
.hero-video,.image-hero{
  margin:14px 14px 0; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
}
.hero-video-overlay,.image-hero-overlay{
  background:
    radial-gradient(900px 420px at 15% 85%, rgba(185,140,73,.28), transparent 60%),
    linear-gradient(180deg, rgba(18,43,56,.62) 0%, rgba(18,43,56,.38) 45%, rgba(18,43,56,.82) 100%);
}
.hero-video-tag span,.image-hero-tag span{
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:var(--r-pill);
}
.hero-video-content h1,.image-hero-content h1{text-shadow:0 2px 24px rgba(0,0,0,.28);}
.hero-video-content h1 em,.hero h1 em{
  background:linear-gradient(90deg, var(--copper-hi), var(--copper)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; padding-right:.06em;
}

/* ---------- STATS: floating glass panel ---------- */
.stats{
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-lg);
  margin:-44px auto 0; max-width:1100px; position:relative; z-index:5; padding:26px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,250,246,.84));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-md);
}
.stat .num{background:linear-gradient(180deg, var(--ink), #2C6178); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* ---------- CARDS ---------- */
.card,.testimonial-card,.value-card,.team-card,.benefit-card,.office-card,.inv-card{
  border-radius:var(--r-lg); border:1px solid rgba(28,63,79,.12);
  background:linear-gradient(180deg, #FFFFFF 0%, var(--white) 100%); box-shadow:var(--shadow-sm);
}
.card,.testimonial-card,.value-card,.inv-card{transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}
.card:hover,.testimonial-card:hover,.value-card:hover,.inv-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(185,140,73,.5);
}
.card-visual{border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; height:270px;}
.card-visual::after{
  background:linear-gradient(180deg, rgba(18,43,56,.45) 0%, transparent 38%, transparent 70%, rgba(18,43,56,.25) 100%);
}
.card-tag,.testimonial-badge{
  border-radius:var(--r-pill); padding:6px 12px; letter-spacing:.08em;
  background:rgba(18,43,56,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
}
.card-body{padding:26px 26px 28px;}
.card-body h3{font-size:23px;}
.price{
  display:inline-block; padding:8px 16px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(185,140,73,.18), rgba(185,140,73,.08));
  border:1px solid rgba(185,140,73,.45); color:var(--brand-brown);
}
.spec-row{border-top:1px dashed rgba(28,63,79,.2);}
.inv-card{border-left:1px solid rgba(28,63,79,.12); position:relative; overflow:hidden;}
.inv-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--copper-hi), var(--copper));}

/* filter tabs */
.filter-tab{border-radius:var(--r-pill); padding:10px 20px; box-shadow:var(--shadow-sm); transition:all .25s var(--ease);}
.filter-tab.active,.filter-tab:hover{
  background:linear-gradient(180deg, #2A5A6F, var(--ink-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(18,43,56,.25);
}

/* ---------- DARK FEATURE PANELS (quote / families / coming soon) ---------- */
.quote-block,.families-card,.soon-card{
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(185,140,73,.22), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(145deg, #234E61 0%, var(--ink) 45%, var(--ink-deep) 100%);
}
.quote-block::before,.families-card::before,.soon-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 35%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.families-visual,.soon-side,.nri-side{
  border-radius:var(--r-lg); background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16);
}
.families-point,.soon-badge{border-radius:var(--r-pill);}
.families-point{padding:8px 14px; background:rgba(255,255,255,.06);}
.families-number{
  background:linear-gradient(180deg, var(--copper-hi), var(--copper)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.soon-redact{border-radius:var(--r-pill);}

/* ---------- PROCESS / VALUES / 4 I's ---------- */
.process-list{border-top:0; gap:16px;}
.process-item,.process-item:first-child{
  border:1px solid rgba(28,63,79,.12); border-radius:var(--r-lg); padding:28px 24px;
  background:linear-gradient(180deg, #fff, var(--white)); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.process-item:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.process-num{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg, var(--copper-hi), var(--copper)); color:#fff; box-shadow:0 6px 14px rgba(185,140,73,.4);
}
.value-card .num{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg, var(--copper-hi), var(--copper)); color:#fff;
}
.i-flow{border-radius:var(--r-xl); box-shadow:var(--shadow-md); border:1px solid rgba(28,63,79,.12);}
.i-step:hover{background:linear-gradient(160deg, #2A5A6F, var(--ink-deep));}
.i-big{background:linear-gradient(180deg, var(--copper-hi), var(--copper)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* ---------- TESTIMONIALS / VIDEO ---------- */
.testimonial-media{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.testimonial-media video{border-radius:inherit;}
.founder-media{border-radius:var(--r-xl);}
.testimonial-play{
  width:64px; height:64px; background:linear-gradient(180deg, #fff, #EDE7D9);
  box-shadow:0 14px 30px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.22);
}
.testimonial-media:hover .testimonial-play{transform:scale(1.1);}

/* ---------- FORMS ---------- */
.field input,.field textarea,.field select{
  border-radius:var(--r-sm); padding:14px 16px; background:#fff; box-shadow:inset 0 1px 2px rgba(18,43,56,.06);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--copper); box-shadow:0 0 0 4px rgba(185,140,73,.2);
}
.contact-grid > div:first-child, #investorForm{
  /* form sits on a soft panel */
}
#contactForm,#investorForm{
  background:linear-gradient(180deg,#fff,var(--white)); border:1px solid rgba(28,63,79,.12);
  border-radius:var(--r-xl); padding:34px; box-shadow:var(--shadow-md);
}
.contact-info{background:transparent;}
.info-line{border-top:1px dashed rgba(28,63,79,.2);}
.job-tag,.bank-chip{border-radius:var(--r-pill);}

/* ---------- FOOTER ---------- */
footer{
  margin-top:40px; border-top:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(180deg, #FFFFFF, var(--paper-2)); box-shadow:0 -14px 40px rgba(18,43,56,.07);
}
.footer-social a{width:40px; height:40px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), background .15s;}
.footer-social a:hover{transform:translateY(-3px); background:linear-gradient(180deg,#2A5A6F,var(--ink-deep));}

/* ---------- OVERLAY MENU ---------- */
.nav-overlay{
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(185,140,73,.18), transparent 60%),
    var(--paper);
}
.nav-overlay-links a{border-bottom:1px solid rgba(28,63,79,.14); transition:color .2s, padding-left .3s var(--ease);}
.nav-overlay-links a:hover{padding-left:14px;}
.nav-overlay-links a.cta{border-bottom:1px solid var(--ink-deep); font-family:'Inter',sans-serif; font-size:15px; padding:13px 28px;}
.nav-overlay-links a.cta:hover{padding-left:28px; color:var(--white);}
.nav-overlay-close{width:44px; height:44px; border-radius:50%; background:rgba(28,63,79,.08);}

/* ---------- FLOATING CONTACT ---------- */
.fab-toggle{
  background:linear-gradient(180deg, #2A5A6F, var(--ink-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px rgba(18,43,56,.4);
  transition:transform .25s var(--ease);
}
.fab-toggle:hover{transform:scale(1.07);}
.fab-item-label{border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--shadow-sm);}
#toast{border-radius:var(--r-pill); padding:14px 26px; box-shadow:var(--shadow-lg);}

/* ---------- SCROLL REVEAL (only active when JS is running) ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.js .reveal.in{opacity:1; transform:none;}

/* scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg, var(--copper), var(--copper-hi)); border-radius:0 3px 3px 0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .stats{margin:-30px 14px 0;}
  .process-item,.process-item:first-child{border:1px solid rgba(28,63,79,.12) !important; padding:24px 22px !important;}
  .quote-block,.families-card,.soon-card{border-radius:var(--r-lg);}
}
@media (max-width:680px){
  .hero-video,.image-hero{margin:10px 10px 0; border-radius:var(--r-lg);}
  #contactForm,#investorForm{padding:22px;}
  .card-visual{height:230px;}
  footer{border-radius:var(--r-lg) var(--r-lg) 0 0;}
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  .cta::after,.submit-btn::after{display:none;}
}

/* ---------- v2 fixes ---------- */
.quote-block>*,.families-card>*,.soon-card>*{position:relative; z-index:1;}
.listings .card.card-soon{
  grid-column:1/-1; background:none; border:0; box-shadow:none; overflow:visible; border-radius:0;
}
.listings .card.card-soon:hover{transform:none; box-shadow:none; border-color:transparent;}
.js .reveal.card-soon{transition-delay:0ms !important;}

/* ---------- v3: desktop menu = side drawer (mobile stays full-screen) ---------- */
@media (min-width:901px){
  .nav-overlay{
    inset:0 0 0 auto; width:420px; max-width:100%;
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    transform:translateX(105%);
    transition:transform .38s var(--ease), visibility 0s linear .38s;
    visibility:hidden;
    box-shadow:none;
  }
  .nav-overlay.open{
    transform:translateX(0); visibility:visible; transition:transform .38s var(--ease), visibility 0s;
    box-shadow:-24px 0 60px rgba(18,43,56,.28), 0 0 0 100vmax rgba(18,43,56,.28);
    clip-path:inset(-100vmax -100vmax -100vmax 0);
  }
  .nav-overlay-top{padding:18px 26px;}
  .nav-overlay-links{
    justify-content:flex-start; padding:26px 26px 32px; gap:2px; max-width:none;
  }
  .nav-overlay-links a{font-size:clamp(22px,2vw,28px); padding:14px 0;}
  .nav-overlay-links a:hover{padding-left:10px;}
  .nav-overlay-cta{margin-top:26px;}
}