:root{
    --ink:#070C16;
    --ink-soft:#101B2E;
    --ink-soft2:#152238;
    --surface:#0F1B2E;
    --surface-2:#16233A;
    --ivory:#F4F1E8;
    --sand:#E2D8BD;
    --gold:#C9A45A;
    --gold-bright:#E8C77E;
    --gold-deep:#D8B369;
    --line:rgba(255,255,255,0.09);
    --line-lt:rgba(232,199,126,0.22);
    --text-dim:#A9A294;
    --radius:2px;
    --serif:'Fraunces', Georgia, serif;
    --sans:'Manrope', -apple-system, sans-serif;
    --maxw:1240px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--ivory);
    background:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-0.01em; color:var(--ivory);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  ::selection{background:var(--gold); color:var(--ink);}

  /* ---------- Scroll reveal ---------- */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
  .reveal-stagger.in-view > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.in-view > *:nth-child(1){transition-delay:.04s;}
  .reveal-stagger.in-view > *:nth-child(2){transition-delay:.11s;}
  .reveal-stagger.in-view > *:nth-child(3){transition-delay:.18s;}
  .reveal-stagger.in-view > *:nth-child(4){transition-delay:.25s;}
  .reveal-stagger.in-view > *:nth-child(5){transition-delay:.32s;}
  .reveal-stagger.in-view > *:nth-child(6){transition-delay:.39s;}
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  }

  /* ---------- Glass utility ---------- */
  .glass{
    background:rgba(20,32,52,0.55);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(255,255,255,0.10);
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 30px; font-size:14px; font-weight:600; letter-spacing:0.02em;
    border-radius:var(--radius); border:1px solid transparent; transition:all .25s ease;
    white-space:nowrap; position:relative; overflow:hidden;
  }
  .btn-gold{background:var(--gold); color:var(--ink);}
  .btn-gold:hover{background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,164,90,0.28);}
  .btn-line{border-color:var(--line-lt); color:var(--ivory);}
  .btn-line:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px);}
  .btn-dark{background:var(--surface-2); color:var(--ivory); border-color:var(--line);}
  .btn-dark:hover{background:var(--ink-soft2); border-color:var(--gold);}
  .btn-outline-dark{border-color:var(--line-lt); color:var(--ivory);}
  .btn-outline-dark:hover{background:var(--gold); color:var(--ink); border-color:var(--gold); transform:translateY(-2px);}
  .btn-sm{padding:10px 18px; font-size:13px;}
  .btn-wa{background:#1f2d24; color:#e7f2ea;}
  .btn-wa:hover{background:#25382c; transform:translateY(-2px);}

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0; transition:background .35s ease, padding .3s ease, box-shadow .3s ease, backdrop-filter .35s ease;
    background:linear-gradient(180deg, rgba(4,7,13,0.85) 0%, rgba(4,7,13,0.45) 70%, transparent 100%);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  header.scrolled{
    background:rgba(7,12,22,0.72); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
    padding:14px 0; box-shadow:0 1px 0 var(--line-lt);
  }
  header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .logo{font-family:var(--serif); font-size:22px; color:var(--ivory); letter-spacing:0.02em; display:flex; align-items:center; gap:12px; line-height:1.15; text-shadow:0 2px 12px rgba(0,0,0,0.5);}
  .logo b{font-weight:500;}
  .logo span{font-family:var(--sans); font-size:9.5px; letter-spacing:0.22em; color:var(--gold-bright); font-weight:700; margin-top:3px; display:block;}
  .logo-text{display:flex; flex-direction:column;}
  .logo-icon{height:40px; width:auto; flex-shrink:0; transition:transform .3s ease;}
  .logo:hover .logo-icon{transform:rotate(-4deg) scale(1.05);}
  .logo-mark{height:150px; width:auto;}
  .footer-brand .logo{align-items:flex-start;}
  nav.primary-nav{display:flex; gap:30px;}
  nav.primary-nav a{font-size:13.5px; font-weight:600; color:var(--ivory); opacity:.88; position:relative; padding:4px 0;}
  nav.primary-nav a:hover{opacity:1;}
  nav.primary-nav a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .3s cubic-bezier(.2,.7,.2,1);}
  nav.primary-nav a:hover::after{width:100%;}
  .header-cta{display:flex; align-items:center; gap:12px;}
  .icon-btn{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-lt); color:var(--ivory); transition:all .25s ease;
  }
  .icon-btn:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px) scale(1.05);}
  .icon-btn svg{width:16px; height:16px;}
  .menu-btn{display:none; width:38px; height:38px; border:none; background:none; color:var(--ivory); align-items:center; justify-content:center;}

  /* mobile nav */
  .mobile-nav{
    position:fixed; inset:0; background:rgba(5,8,14,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:200; padding:32px;
    display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:56px;}
  .mobile-nav-close{width:38px; height:38px; border:1px solid var(--line-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ivory); background:none;}
  .mobile-nav a{font-family:var(--serif); font-size:30px; color:var(--ivory); padding:14px 0; border-bottom:1px solid var(--line-lt); transition:padding-left .25s ease, color .25s ease;}
  .mobile-nav a:hover{padding-left:10px; color:var(--gold-bright);}
  .mobile-nav-bottom{margin-top:auto; display:flex; gap:12px; padding-top:24px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(120% 90% at 15% 0%, #142744 0%, #0a1626 55%, #05090f 100%);
    color:var(--ivory); padding:170px 0 0;
    overflow:hidden;
  }
  .hero::before{
    content:''; position:absolute; top:-30%; right:-10%; width:60%; height:130%;
    background:radial-gradient(circle, rgba(201,164,90,0.20) 0%, transparent 65%);
    pointer-events:none;
  }
  .hero-content{position:relative; z-index:2; max-width:640px;}
  .eyebrow-line{display:flex; align-items:center; gap:14px; margin-bottom:26px;}
  .eyebrow-line .dash{width:36px; height:1px; background:var(--gold);}
  .eyebrow-line span{font-size:12.5px; letter-spacing:0.15em; color:var(--gold-bright); font-weight:700;}
  .hero h1{font-size:clamp(38px,5.6vw,64px); font-weight:400; color:var(--ivory);}
  .hero h1 em{font-style:italic; color:var(--gold-bright); font-weight:400;}
  .hero p.lead{font-size:16.5px; color:#cfc9ba; max-width:480px; margin:22px 0 34px; line-height:1.7;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

  .hero-skyline{position:absolute; left:0; right:0; bottom:0; height:34vh; z-index:1; opacity:.5;}
  .hero-banner-wrap{min-height:0; display:block; padding:0; background:#05090f; position:relative;}
  .hero-banner-img{width:100%; height:auto; display:block; position:relative; z-index:1; animation:heroZoom 18s ease-in-out infinite alternate;}
  .hero-banner-video{width:100%; height:auto; max-height:88vh; object-fit:cover; display:block; position:relative; z-index:1;}
  @keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.035); } }
  @media (prefers-reduced-motion: reduce){ .hero-banner-img{animation:none;} }

  .hero-caption-strip{
    position:relative; z-index:2;
    background:var(--ink);
    padding-top:38px;
  }
  .hero-caption-inner{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-bottom:34px;}
  .hero-caption-text .eyebrow-line{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .hero-caption-text .eyebrow-line .dash{width:36px; height:1px; background:var(--gold);}
  .hero-caption-text .eyebrow-line span{font-size:12px; letter-spacing:0.15em; color:var(--gold-bright); font-weight:700;}
  .hero-caption-text h1{font-size:clamp(24px,3vw,34px); font-weight:400; color:var(--ivory); max-width:560px;}
  .hero-caption-text h1 em{font-style:italic; color:var(--gold-bright); font-weight:400;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- Search Panel (glass) ---------- */
  .search-panel{
    position:relative; z-index:3; margin-top:-2px;
  }
  .search-panel .wrap > div{
    background:rgba(15,27,46,0.72); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-top:2px solid var(--gold); border-left:1px solid var(--line-lt); border-right:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt);
  }
  .search-tabs{display:flex; gap:2px; width:fit-content;}
  .search-tab{padding:13px 26px; font-size:13px; font-weight:700; letter-spacing:.02em; background:transparent; color:var(--text-dim); border:none; border-bottom:2px solid transparent; transition:all .25s ease;}
  .search-tab.active{color:var(--gold-bright); border-bottom-color:var(--gold);}
  .search-tab:hover{color:var(--ivory);}
  .search-form{
    display:flex; flex-wrap:wrap; gap:0;
    border-left:1px solid var(--line-lt); border-top:1px solid var(--line-lt);
  }
  .search-field{
    flex:1 1 150px; border-right:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt); padding:16px 20px; display:flex; flex-direction:column; gap:5px; min-width:130px; transition:background .25s ease;
  }
  .search-field:hover{background:rgba(255,255,255,0.03);}
  .search-field label{font-size:10.5px; letter-spacing:0.1em; color:var(--text-dim); font-weight:700;}
  .search-field select,.search-field input{
    border:none; background:none; font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ivory);
    padding:0; appearance:none; -webkit-appearance:none;
  }
  .search-field select option{ background:var(--ink-soft); color:var(--ivory); }
  .search-field input::placeholder{color:var(--text-dim);}
  .search-field select:focus, .search-field input:focus{outline:none;}
  .search-submit{background:var(--gold); color:var(--ink); border:none; padding:0 34px; font-weight:700; font-size:13.5px; letter-spacing:.03em; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .25s; flex:1 1 150px; min-height:58px; border-bottom:1px solid var(--line-lt);}
  .search-submit:hover{background:var(--gold-bright);}

  /* ---------- Section basics ---------- */
  section{padding:110px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px;}
  .section-head .tag{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .section-head .tag .dash{width:30px; height:1px; background:var(--gold);}
  .section-head .tag span{font-size:12px; letter-spacing:.15em; color:var(--gold-bright); font-weight:700;}
  .section-head h2{font-size:clamp(28px,3.4vw,42px); max-width:520px;}
  .section-head p{color:var(--text-dim); max-width:340px; font-size:14.5px; line-height:1.7;}

  /* ---------- Featured Properties (asymmetric grid) ---------- */
  .prop-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:22px;
  }
  .prop-card{
    position:relative; border:1px solid var(--line); background:var(--surface); overflow:hidden;
    display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .4s ease;
  }
  .prop-card:hover{transform:translateY(-6px); border-color:var(--line-lt); box-shadow:0 22px 44px rgba(0,0,0,0.35);}
  .prop-card.feature{grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column;}
  .prop-card.small{grid-column:span 2;}
  .prop-thumb{position:relative; aspect-ratio:4/3; overflow:hidden;}
  .prop-card.feature .prop-thumb{aspect-ratio:unset; flex:1; min-height:280px;}
  .prop-card.feature .prop-body{flex:none;}
  .prop-thumb .art{position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .prop-card:hover .prop-thumb .art{transform:scale(1.08);}
  .prop-badge{
    position:absolute; top:14px; left:14px; background:var(--gold); color:var(--ink);
    font-size:10.5px; font-weight:700; letter-spacing:.08em; padding:6px 12px;
  }
  .prop-id{position:absolute; top:14px; right:14px; background:rgba(5,8,14,.6); backdrop-filter:blur(6px); color:var(--ivory); font-size:10.5px; padding:6px 10px; letter-spacing:.03em;}
  .prop-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .prop-loc{font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:6px;}
  .prop-body h3{font-size:19px; color:var(--ivory);}
  .prop-card.feature .prop-body h3{font-size:24px;}
  .prop-price{font-family:var(--serif); font-size:20px; color:var(--gold-bright);}
  .prop-specs{display:flex; gap:16px; font-size:12.5px; color:var(--text-dim); padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:4px 0;}
  .prop-specs span{display:flex; align-items:center; gap:5px;}
  .prop-actions{display:flex; gap:10px; margin-top:auto;}
  .prop-actions .btn{flex:1; padding:11px 14px; font-size:12.5px;}

  /* gradient art placeholders per card (stand-ins for photography) */
  .art-1{background:linear-gradient(135deg,#2c3b3a,#0f1a18);}
  .art-2{background:linear-gradient(135deg,#3a2e1c,#171209);}
  .art-3{background:linear-gradient(135deg,#233042,#0e141f);}
  .art-4{background:linear-gradient(135deg,#3d2b2b,#170f0f);}
  .art-5{background:linear-gradient(135deg,#2a2f1e,#12140b);}
  .art-6{background:linear-gradient(135deg,#332639,#140f18);}
  .art-city{position:absolute; inset:0; opacity:.55; mix-blend-mode:screen;}
  img.art{width:100%; height:100%; object-fit:cover; display:block; border:0;}

  .center-more{text-align:center; margin-top:46px;}

  /* ---------- Communities ---------- */
  .communities{background:var(--ink-soft);}
  .comm-row{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line);}
  .comm-tile{
    position:relative; aspect-ratio:3/4; overflow:hidden; display:flex; align-items:flex-end; padding:20px;
    color:var(--ivory);
  }
  .comm-tile .art{position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .comm-tile:hover .art{transform:scale(1.1);}
  .comm-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,6,10,.9) 0%, rgba(4,6,10,.1) 55%); transition:background .3s ease;}
  .comm-tile:hover::after{background:linear-gradient(0deg, rgba(4,6,10,.75) 0%, rgba(201,164,90,.12) 100%);}
  .comm-tile-body{position:relative; z-index:2; transition:transform .35s ease;}
  .comm-tile:hover .comm-tile-body{transform:translateY(-4px);}
  .comm-tile-body h4{font-size:16.5px; color:var(--ivory); font-weight:500;}
  .comm-tile-body span{font-size:11px; color:var(--gold-bright); letter-spacing:.03em;}

  /* ---------- Off-plan strip ---------- */
  .offplan{background:var(--ink); color:var(--ivory);}
  .offplan .section-head h2{color:var(--ivory);}
  .offplan .section-head p{color:var(--text-dim);}
  .offplan .section-head .tag span{color:var(--gold-bright);}
  .op-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .op-card{border:1px solid var(--line-lt); padding:0; display:flex; flex-direction:column; background:var(--surface); transition:transform .4s ease, box-shadow .4s ease;}
  .op-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,0.4);}
  .op-thumb{aspect-ratio:16/10; position:relative; overflow:hidden;}
  .op-thumb .art{transition:transform .6s ease;}
  .op-card:hover .op-thumb .art{transform:scale(1.08);}
  .op-body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1;}
  .op-dev{font-size:11px; letter-spacing:.1em; color:var(--gold-bright); font-weight:700;}
  .op-body h3{color:var(--ivory); font-size:20px;}
  .op-meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim); border-top:1px solid var(--line-lt); padding-top:12px; margin-top:4px;}
  .op-meta strong{color:var(--ivory); display:block; font-family:var(--serif); font-size:15px; font-weight:400;}

  /* ---------- Developer marquee ---------- */
  .marquee-section{background:var(--ink-soft); padding:52px 0; overflow:hidden;}
  .marquee-label{text-align:center; font-size:11.5px; letter-spacing:.18em; color:var(--text-dim); font-weight:700; margin-bottom:30px;}
  .marquee-track{display:flex; width:max-content; animation:marqueeScroll 28s linear infinite;}
  .marquee-track:hover{animation-play-state:paused;}
  .marquee-item{font-family:var(--serif); font-size:26px; color:var(--sand); opacity:.6; padding:0 50px; white-space:nowrap; transition:opacity .3s ease, color .3s ease;}
  .marquee-item:hover{opacity:1; color:var(--gold-bright);}
  @keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  /* ---------- Stats / Why us ---------- */
  .why{display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:center;}
  .why-copy .tag{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .why-copy .tag .dash{width:30px; height:1px; background:var(--gold);}
  .why-copy .tag span{font-size:12px; letter-spacing:.15em; color:var(--gold-bright); font-weight:700;}
  .why-copy h2{font-size:clamp(28px,3.2vw,38px); margin-bottom:20px;}
  .why-copy p{color:var(--text-dim); font-size:15px; line-height:1.8; margin-bottom:16px;}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
  .stat-cell{background:var(--surface); padding:38px 30px; transition:background .3s ease;}
  .stat-cell:hover{background:var(--surface-2);}
  .stat-cell strong{font-family:var(--serif); font-size:38px; color:var(--gold-bright); display:block; font-weight:400;}
  .stat-cell span{font-size:12.5px; color:var(--text-dim); letter-spacing:.02em;}

  /* ---------- Services ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .service-card{background:var(--surface); padding:32px 26px; transition:background .3s ease, transform .3s ease;}
  .service-card:hover{background:var(--surface-2); transform:translateY(-4px);}
  .service-card h4{font-family:var(--serif); font-weight:500; font-size:18px; margin-bottom:10px; color:var(--ivory);}
  .service-card p{font-size:13.5px; color:var(--text-dim); line-height:1.7;}

  /* ---------- Core Team ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .team-card{background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease;}
  .team-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35);}
  .team-photo{aspect-ratio:1/1; overflow:hidden; background:var(--ink);}
  .team-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .team-card:hover .team-photo img{transform:scale(1.06);}
  .team-photo.placeholder{display:flex; align-items:center; justify-content:center; background:var(--ink-soft); border-bottom:1px solid var(--line);}
  .team-photo.placeholder span{font-family:var(--serif); font-size:46px; color:var(--sand); font-weight:400;}
  .team-body{padding:22px; display:flex; flex-direction:column; gap:6px;}
  .team-body h3{font-size:19px;}
  .team-role{font-size:12px; letter-spacing:.06em; color:var(--gold-bright); font-weight:700; text-transform:uppercase;}
  .team-contact{display:flex; flex-direction:column; gap:5px; margin-top:10px;}
  .team-contact a{font-size:13px; color:var(--text-dim); transition:color .2s ease;}
  .team-contact a:hover{color:var(--gold-bright);}
  .placeholder-card{border-style:dashed;}
  .placeholder-note{font-size:13px; color:var(--text-dim); line-height:1.6; margin-top:8px;}

  /* ---------- Testimonials ---------- */
  .testimonials{background:var(--ink-soft); position:relative; overflow:hidden;}
  .testi-track-wrap{overflow:hidden;}
  .testi-track{display:flex; gap:24px; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .testi-card{
    flex:0 0 calc(33.333% - 16px); background:var(--surface); border:1px solid var(--line); padding:32px;
    display:flex; flex-direction:column; gap:18px;
  }
  .testi-stars{color:var(--gold); font-size:15px; letter-spacing:2px;}
  .testi-quote{font-size:14.5px; color:var(--ivory); line-height:1.8; font-style:italic;}
  .testi-person{display:flex; align-items:center; gap:12px; margin-top:auto;}
  .testi-avatar{width:44px; height:44px; border-radius:50%; background:var(--ink-soft2); display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--gold-bright); font-size:17px; flex-shrink:0;}
  .testi-person strong{display:block; font-size:13.5px; color:var(--ivory); font-weight:600;}
  .testi-person span{font-size:12px; color:var(--text-dim);}
  .testi-controls{display:flex; justify-content:center; gap:10px; margin-top:36px;}
  .testi-dot{width:8px; height:8px; border-radius:50%; background:var(--line-lt); border:none; cursor:pointer; transition:background .25s ease, transform .25s ease;}
  .testi-dot.active{background:var(--gold); transform:scale(1.3);}

  /* ---------- Consultation banner ---------- */
  .consult{
    background:linear-gradient(120deg, #0d1a2e, #070c16);
    color:var(--ivory); padding:70px 0; position:relative; overflow:hidden;
  }
  .consult::before{content:''; position:absolute; top:-40%; left:60%; width:50%; height:180%; background:radial-gradient(circle, rgba(201,164,90,0.14) 0%, transparent 70%); pointer-events:none;}
  .consult .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; position:relative; z-index:2;}
  .consult h2{font-size:clamp(24px,3vw,32px); max-width:480px;}
  .consult-actions{display:flex; gap:12px; flex-wrap:wrap;}

  /* ---------- Enquiry ---------- */
  .enquiry{background:var(--ink-soft);}
  .enquiry .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px;}
  .enquiry-copy h2{font-size:clamp(28px,3.2vw,38px); margin-bottom:18px;}
  .enquiry-copy p{color:var(--text-dim); font-size:15px; line-height:1.8; margin-bottom:26px;}
  .enquiry-contact{display:flex; flex-direction:column; gap:14px;}
  .enquiry-contact a{display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:600; transition:transform .2s ease;}
  .enquiry-contact a:hover{transform:translateX(4px); color:var(--gold-bright);}
  .enquiry-contact .ic{width:34px; height:34px; border:1px solid var(--line-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .enquiry-contact .ic svg{width:15px; height:15px; color:var(--gold-bright);}

  form.enquiry-form{background:var(--surface); padding:40px; border:1px solid var(--line);}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
  .form-group{display:flex; flex-direction:column; gap:7px;}
  .form-group.full{grid-column:1/-1;}
  .form-group label{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--ivory);}
  .form-group input, .form-group select, .form-group textarea{
    border:1px solid var(--line); background:var(--ink); padding:12px 14px; font-family:var(--sans); font-size:14px; color:var(--ivory); border-radius:1px; transition:border-color .25s ease;
  }
  .form-group input::placeholder, .form-group textarea::placeholder{color:var(--text-dim);}
  .form-group select option{background:var(--ink-soft); color:var(--ivory);}
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:var(--gold);}
  .form-group textarea{resize:vertical; min-height:90px;}
  .form-submit{width:100%; margin-top:6px;}
  .form-success{display:none; text-align:center; padding:50px 20px;}
  .form-success.show{display:block; animation:fadeUp .5s ease;}
  .form-success svg{width:44px; height:44px; color:var(--gold-bright); margin:0 auto 18px;}
  .form-success h3{font-size:22px; margin-bottom:10px;}
  .form-success p{color:var(--text-dim); font-size:14px;}
  @keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- Footer ---------- */
  footer{background:#04070D; color:var(--text-dim); padding:80px 0 0;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line);}
  .footer-brand .logo{color:var(--ivory); margin-bottom:16px;}
  .footer-brand p{font-size:13.5px; line-height:1.8; color:var(--text-dim); max-width:300px; margin-bottom:22px;}
  .social-row{display:flex; gap:10px;}
  .social-row a{width:34px; height:34px; border:1px solid var(--line-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.25s;}
  .social-row a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px);}
  .social-row svg{width:14px; height:14px;}
  footer h5{font-size:12px; letter-spacing:.1em; color:var(--gold-bright); font-weight:700; margin-bottom:20px;}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
  footer ul a{font-size:13.5px; color:var(--text-dim); transition:color .2s ease, padding-left .2s ease;}
  footer ul a:hover{color:var(--gold-bright); padding-left:4px;}
  .footer-contact li{font-size:13.5px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start;}
  .footer-contact svg{width:14px; height:14px; color:var(--gold-bright); flex-shrink:0; margin-top:2px;}
  .footer-bottom{padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#6b6558;}
  .footer-bottom a{color:#6b6558;}
  .footer-bottom a:hover{color:var(--gold-bright);}
  .footer-legal{display:flex; gap:18px; flex-wrap:wrap;}

  /* ---------- Floating actions ---------- */
  .float-actions{position:fixed; right:22px; bottom:22px; z-index:150; display:flex; flex-direction:column; gap:12px;}
  .float-btn{
    width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.4); color:#fff; transition:transform .25s ease, box-shadow .25s ease;
  }
  .float-btn:hover{transform:translateY(-4px) scale(1.06); box-shadow:0 14px 30px rgba(0,0,0,.5);}
  .float-btn.wa{background:#25D366;}
  .float-btn.call{background:var(--surface-2); border:1px solid var(--gold);}
  .float-btn svg{width:24px; height:24px;}
  .back-to-top{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(15,27,46,0.75); backdrop-filter:blur(10px); border:1px solid var(--line-lt); color:var(--gold-bright);
    opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease; box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
  .back-to-top:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}
  .back-to-top svg{width:18px; height:18px;}

  /* ---------- Page header banner (sub-pages) ---------- */
  .page-hero{
    background:radial-gradient(120% 90% at 15% 0%, #142744 0%, #0a1626 55%, #05090f 100%);
    color:var(--ivory); padding:170px 0 60px; position:relative; overflow:hidden;
  }
  .page-hero::before{
    content:''; position:absolute; top:-30%; right:-10%; width:60%; height:130%;
    background:radial-gradient(circle, rgba(201,164,90,0.20) 0%, transparent 65%); pointer-events:none;
  }
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{font-size:12.5px; color:var(--text-dim); margin-bottom:18px;}
  .breadcrumb a{color:var(--text-dim); transition:color .2s ease;}
  .breadcrumb a:hover{color:var(--gold-bright);}
  .page-hero h1{font-size:clamp(32px,4.5vw,48px); color:var(--ivory); margin-bottom:12px;}
  .page-hero p{color:var(--text-dim); max-width:520px; font-size:15px; line-height:1.7;}

  /* ---------- Listing layout ---------- */
  .listing-layout{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start;}
  .filter-sidebar{background:var(--surface); border:1px solid var(--line); padding:26px; position:sticky; top:100px; display:flex; flex-direction:column; gap:22px;}
  .filter-sidebar h4{font-size:12px; letter-spacing:.1em; color:var(--gold-bright); font-weight:700; text-transform:uppercase; margin-bottom:2px;}
  .filter-group{display:flex; flex-direction:column; gap:8px; padding-bottom:18px; border-bottom:1px solid var(--line);}
  .filter-group:last-of-type{border-bottom:none; padding-bottom:0;}
  .filter-group label{font-size:12.5px; font-weight:600; color:var(--ivory);}
  .filter-group select, .filter-group input{
    border:1px solid var(--line); background:var(--ink); padding:10px 12px; font-family:var(--sans); font-size:13.5px; color:var(--ivory); transition:border-color .2s ease;
  }
  .filter-group select option{background:var(--ink-soft); color:var(--ivory);}
  .filter-group select:focus, .filter-group input:focus{outline:none; border-color:var(--gold);}
  .filter-range{display:flex; gap:8px;}
  .chip-group{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{border:1px solid var(--line); padding:6px 12px; font-size:12px; font-weight:600; color:var(--text-dim); cursor:pointer; transition:all .2s ease;}
  .chip:hover, .chip.active{border-color:var(--gold); color:var(--gold-bright); background:rgba(201,164,90,0.08);}

  .listing-toolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line);}
  .listing-toolbar .count strong{color:var(--gold-bright);}
  .toolbar-actions{display:flex; gap:12px; align-items:center;}
  .toolbar-actions select{border:1px solid var(--line); padding:9px 12px; font-size:13px; background:var(--surface); font-family:var(--sans); color:var(--ivory);}
  .toolbar-actions select option{background:var(--ink-soft);}
  .view-toggle{display:flex; border:1px solid var(--line);}
  .view-toggle button{width:38px; height:38px; border:none; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:all .2s ease;}
  .view-toggle button.active{background:var(--gold); color:var(--ink);}

  .listing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .listing-grid .prop-card{grid-column:span 1;}

  .pagination{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:50px;}
  .pagination a, .pagination span{
    width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ivory); transition:all .2s ease;
  }
  .pagination a:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px);}
  .pagination .active{background:var(--gold); color:var(--ink); border-color:var(--gold);}

  /* ---------- Property Details page ---------- */
  .gallery-main{aspect-ratio:16/9; position:relative; overflow:hidden; margin-bottom:10px;}
  .gallery-main .art{position:absolute; inset:0; transition:opacity .4s ease;}
  .gallery-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
  .gallery-thumb{aspect-ratio:4/3; position:relative; overflow:hidden; cursor:pointer; opacity:.55; transition:opacity .25s ease, transform .25s ease;}
  .gallery-thumb .art{position:absolute; inset:0;}
  .gallery-thumb.active, .gallery-thumb:hover{opacity:1; outline:2px solid var(--gold); transform:translateY(-2px);}

  .pd-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start;}
  .pd-header{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; flex-wrap:wrap;}
  .pd-header h1{font-size:clamp(26px,3vw,34px);}
  .pd-loc{font-size:13.5px; color:var(--text-dim); margin-top:6px;}
  .pd-price{font-family:var(--serif); font-size:30px; color:var(--gold-bright); text-align:right;}
  .pd-price span{display:block; font-family:var(--sans); font-size:11px; color:var(--text-dim); font-weight:600; letter-spacing:.05em;}
  .pd-quickspecs{display:flex; gap:0; border:1px solid var(--line); margin:24px 0; background:var(--surface);}
  .pd-quickspecs div{flex:1; text-align:center; padding:18px 10px; border-right:1px solid var(--line);}
  .pd-quickspecs div:last-child{border-right:none;}
  .pd-quickspecs strong{display:block; font-family:var(--serif); font-size:20px; color:var(--ivory); font-weight:500;}
  .pd-quickspecs span{font-size:11.5px; color:var(--text-dim); letter-spacing:.03em;}
  .pd-section{margin-top:44px;}
  .pd-section h3{font-size:21px; margin-bottom:16px;}
  .pd-section p{color:var(--text-dim); font-size:14.5px; line-height:1.8; margin-bottom:14px;}
  .highlight-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
  .highlight-list li{list-style:none; font-size:13.5px; color:var(--ivory); display:flex; align-items:center; gap:8px;}
  .highlight-list li::before{content:''; width:5px; height:5px; background:var(--gold); border-radius:50%; flex-shrink:0;}
  .amenities-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .amenity-pill{border:1px solid var(--line); padding:12px 14px; font-size:13px; font-weight:600; color:var(--ivory); display:flex; align-items:center; gap:9px; background:var(--surface); transition:border-color .2s ease;}
  .amenity-pill:hover{border-color:var(--gold);}
  .amenity-pill svg{width:16px; height:16px; color:var(--gold-bright); flex-shrink:0;}
  .map-embed{width:100%; height:340px; border:1px solid var(--line); filter:grayscale(0.3) invert(0.92) contrast(0.9);}
  .nearby-list{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
  .nearby-list li{list-style:none; display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-dim); padding:10px 0; border-bottom:1px solid var(--line);}
  .nearby-list li span{color:var(--ivory); font-weight:600;}

  .pd-sidebar{position:sticky; top:100px; display:flex; flex-direction:column; gap:22px;}
  .agent-card{background:var(--surface); border:1px solid var(--line); padding:26px; text-align:center;}
  .agent-photo{width:90px; height:90px; border-radius:50%; overflow:hidden; margin:0 auto 14px; border:2px solid var(--gold);}
  .agent-photo img{width:100%; height:100%; object-fit:cover;}
  .agent-card h4{font-size:17px;}
  .agent-card .role{font-size:12px; color:var(--gold-bright); font-weight:700; letter-spacing:.04em; margin-bottom:14px; display:block;}
  .agent-actions{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
  .pd-form-card{background:var(--surface); border:1px solid var(--line); padding:26px;}
  .pd-form-card h4{font-size:16px; margin-bottom:16px;}

  /* ---------- Legal pages ---------- */
  .legal-content{max-width:760px;}
  .legal-content h2{font-size:22px; margin:34px 0 14px;}
  .legal-content h2:first-child{margin-top:0;}
  .legal-content p, .legal-content li{font-size:14.5px; color:var(--text-dim); line-height:1.8; margin-bottom:12px;}
  .legal-content ul{padding-left:20px;}
  .legal-updated{font-size:12.5px; color:var(--text-dim); margin-bottom:36px;}

  /* ---------- Responsive ---------- */
  @media (max-width:1080px){
    .listing-layout{grid-template-columns:1fr;}
    .filter-sidebar{position:static;}
    .listing-grid{grid-template-columns:repeat(2,1fr);}
    .pd-layout{grid-template-columns:1fr;}
    .pd-sidebar{position:static;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .prop-grid{grid-template-columns:repeat(2,1fr);}
    .prop-card.feature{grid-column:span 2; grid-row:span 1;}
    .prop-card.small{grid-column:span 1;}
    .comm-row{grid-template-columns:repeat(3,1fr);}
    .op-grid{grid-template-columns:repeat(1,1fr); max-width:480px; margin:0 auto;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .why{grid-template-columns:1fr; gap:44px;}
    .enquiry .wrap{grid-template-columns:1fr; gap:44px;}
    .search-field{flex-basis:50%;}
    .search-submit{grid-column:1/-1; padding:16px;}
    .testi-card{flex:0 0 calc(50% - 12px);}
  }
  @media (max-width:760px){
    .services-grid{grid-template-columns:1fr;}
    .listing-grid{grid-template-columns:1fr;}
    .gallery-thumbs{grid-template-columns:repeat(3,1fr);}
    .pd-header{flex-direction:column;}
    .pd-price{text-align:left;}
    .pd-quickspecs{flex-wrap:wrap;}
    .pd-quickspecs div{flex:1 1 50%; border-bottom:1px solid var(--line);}
    .highlight-list{grid-template-columns:1fr;}
    .amenities-grid{grid-template-columns:1fr 1fr;}
    .wrap{padding:0 20px;}
    nav.primary-nav{display:none;}
    .menu-btn{display:flex;}
    .header-cta .icon-btn:nth-child(2){display:none;}
    section{padding:70px 0;}
    .hero{padding-top:130px;}
    .search-field{flex-basis:100%;} .search-submit{flex-basis:100%;}
    .hero-caption-inner{flex-direction:column; align-items:flex-start;}
    .search-field{border-right:none; border-bottom:1px solid var(--line-lt);}
    .prop-grid{grid-template-columns:1fr;}
    .prop-card.feature, .prop-card.small{grid-column:span 1;}
    .comm-row{grid-template-columns:repeat(2,1fr);}
    .section-head{flex-direction:column; align-items:flex-start;}
    .consult .wrap{flex-direction:column; align-items:flex-start;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
    .form-row{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column; align-items:flex-start;}
    .testi-card{flex:0 0 100%;}
  }

/* ===========================================================
 * NEW FEATURES — Quick Chat, Compare Tool, Mortgage Calculator,
 * Newsletter signup
 * =========================================================== */

/* ---------- Quick Chat launcher + panel ---------- */
.float-btn.chat{background:var(--gold);}
.float-btn.chat svg{color:var(--ink);}
.chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:151; width:320px; max-width:calc(100vw - 44px);
  background:var(--surface); border:1px solid var(--line-lt); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.5);
  overflow:hidden; opacity:0; visibility:hidden; transform:translateY(16px) scale(.97); transition:all .25s ease;
}
.chat-panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.chat-panel-head{background:var(--ink-soft); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);}
.chat-panel-head h5{color:var(--ivory); font-size:14.5px; margin:0;}
.chat-panel-head span{display:block; color:var(--gold-bright); font-size:11.5px; margin-top:2px;}
.chat-panel-close{background:none; border:none; color:var(--ivory); cursor:pointer; opacity:.7; font-size:18px; line-height:1;}
.chat-panel-close:hover{opacity:1;}
.chat-panel-body{padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.chat-quick{display:flex; flex-direction:column; gap:8px;}
.chat-quick button{
  text-align:left; background:var(--surface-2); border:1px solid var(--line); color:var(--ivory);
  padding:10px 12px; border-radius:10px; font-size:13px; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.chat-quick button:hover{border-color:var(--gold); background:rgba(196,164,90,.08);}
.chat-panel-form{display:flex; gap:8px; margin-top:4px;}
.chat-panel-form input{flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ivory); font-size:13px;}
.chat-panel-form input:focus{outline:none; border-color:var(--gold);}
.chat-panel-form button{background:#25D366; color:#fff; border:none; border-radius:10px; padding:0 14px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.chat-panel-note{font-size:11px; color:var(--stone); line-height:1.5;}

/* ---------- Compare tool ---------- */
.compare-check{
  position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(7,12,22,.72); backdrop-filter:blur(6px); border:1px solid var(--line-lt); border-radius:8px;
  padding:6px 10px; font-size:11.5px; color:var(--ivory); cursor:pointer; user-select:none;
}
.compare-check input{accent-color:var(--gold); width:14px; height:14px; cursor:pointer;}
.compare-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:160; background:var(--ink-soft); border-top:1px solid var(--gold);
  padding:14px 22px; display:none; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.compare-bar.show{display:flex;}
.compare-bar-items{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.compare-chip{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; padding:6px 8px 6px 6px; font-size:12px; color:var(--ivory);
}
.compare-chip img{width:26px; height:26px; border-radius:50%; object-fit:cover;}
.compare-chip button{background:none; border:none; color:var(--stone); cursor:pointer; font-size:14px; line-height:1; padding:0 2px;}
.compare-chip button:hover{color:var(--gold-bright);}
.compare-bar-actions{display:flex; gap:10px; align-items:center;}
.compare-bar span.hint{font-size:12px; color:var(--stone);}
.compare-modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(4,6,10,.82); display:none; align-items:flex-start; justify-content:center;
  padding:60px 20px; overflow-y:auto;
}
.compare-modal-overlay.open{display:flex;}
.compare-modal{background:var(--ink); border:1px solid var(--line-lt); border-radius:18px; max-width:900px; width:100%; padding:28px; position:relative;}
.compare-modal-close{position:absolute; top:18px; right:18px; background:none; border:none; color:var(--ivory); font-size:22px; cursor:pointer; opacity:.7;}
.compare-modal-close:hover{opacity:1;}
.compare-modal h3{color:var(--ivory); margin-bottom:18px;}
.compare-table{width:100%; border-collapse:collapse; overflow-x:auto; display:block;}
.compare-table th, .compare-table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; color:var(--ivory); white-space:nowrap;}
.compare-table th{color:var(--stone); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;}
.compare-table img{width:120px; height:80px; object-fit:cover; border-radius:8px; display:block;}
.compare-table td.price{color:var(--gold-bright); font-weight:600;}

/* ---------- Mortgage / EMI calculator ---------- */
.calc-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;}
.calc-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px;}
.calc-field{margin-bottom:18px;}
.calc-field label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--stone); margin-bottom:8px;}
.calc-field label span.val{color:var(--gold-bright); font-weight:600;}
.calc-field input[type="range"]{width:100%; accent-color:var(--gold);}
.calc-field input[type="number"]{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  color:var(--ivory); font-size:14.5px;
}
.calc-field input[type="number"]:focus{outline:none; border-color:var(--gold);}
.calc-result{background:var(--surface); border:1px solid var(--gold); border-radius:16px; padding:28px; position:sticky; top:100px;}
.calc-result .emi-figure{font-family:'Fraunces', serif; font-size:38px; color:var(--gold-bright); margin:6px 0 4px;}
.calc-result .emi-label{font-size:12px; color:var(--stone); text-transform:uppercase; letter-spacing:.05em;}
.calc-breakdown{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.calc-breakdown-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ivory); padding-bottom:12px; border-bottom:1px solid var(--line);}
.calc-breakdown-row span:first-child{color:var(--stone);}
.calc-disclaimer{font-size:11.5px; color:var(--stone); margin-top:20px; line-height:1.6;}
@media (max-width:900px){
  .calc-wrap{grid-template-columns:1fr;}
  .calc-result{position:static;}
}

/* ---------- Newsletter signup ---------- */
.newsletter-box{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border:1px solid var(--gold);
  border-radius:18px; padding:32px; display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
}
.newsletter-copy h3{color:var(--ivory); font-size:20px; margin-bottom:6px;}
.newsletter-copy p{color:var(--stone); font-size:13.5px; max-width:420px;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:280px; max-width:420px;}
.newsletter-form input[type="email"]{
  flex:1; min-width:180px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--ivory); font-size:13.5px;
}
.newsletter-form input[type="email"]:focus{outline:none; border-color:var(--gold);}
.newsletter-success{color:var(--gold-bright); font-size:13px; margin-top:10px; display:none;}
.newsletter-success.show{display:block;}

/* ===========================================================
 * FEATURES ROUND 2 — Favorites, Share, Recently Viewed,
 * Testimonial form, refined floating actions
 * =========================================================== */

/* ---------- Favourite (heart) button on cards ---------- */
.fav-btn{
  position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(7,12,22,.62); backdrop-filter:blur(6px); border:1px solid var(--line-lt);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.fav-btn:hover{transform:scale(1.08);}
.fav-btn svg{width:17px; height:17px; stroke:var(--ivory); fill:none; stroke-width:1.8; transition:fill .2s ease, stroke .2s ease;}
.fav-btn.active svg{fill:#e0536b; stroke:#e0536b;}

/* ---------- Saved header link + badge ---------- */
.saved-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; color:var(--ivory); cursor:pointer; transition:background .2s ease;
}
.saved-link:hover{background:rgba(255,255,255,.06);}
.saved-link svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7;}
.saved-count{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  background:var(--gold); color:var(--ink); font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center;
}
.saved-count.show{display:flex;}

.saved-drawer-overlay{position:fixed; inset:0; z-index:200; background:rgba(4,6,10,.82); display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto;}
.saved-drawer-overlay.open{display:flex;}
.saved-drawer{background:var(--ink); border:1px solid var(--line-lt); border-radius:18px; max-width:640px; width:100%; padding:28px; position:relative;}
.saved-drawer-close{position:absolute; top:18px; right:18px; background:none; border:none; color:var(--ivory); font-size:22px; cursor:pointer; opacity:.7;}
.saved-drawer-close:hover{opacity:1;}
.saved-drawer h3{color:var(--ivory); margin-bottom:16px;}
.saved-item{display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
.saved-item img{width:76px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0;}
.saved-item .info{flex:1; min-width:0;}
.saved-item .info h5{color:var(--ivory); font-size:14px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.saved-item .info span{color:var(--gold-bright); font-size:12.5px;}
.saved-item button{background:none; border:none; color:var(--stone); cursor:pointer; font-size:18px;}
.saved-item button:hover{color:#e0536b;}
.saved-empty{color:var(--stone); font-size:13.5px; text-align:center; padding:30px 0;}

/* ---------- Share button + popover ---------- */
.share-btn-wrap{position:relative; display:inline-block;}
.share-btn{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ivory); transition:border-color .2s ease;
}
.share-btn:hover{border-color:var(--gold);}
.share-btn svg{width:17px; height:17px;}
.share-pop{
  position:absolute; bottom:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--line-lt);
  border-radius:12px; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,.45); display:none; flex-direction:column; gap:2px; min-width:170px; z-index:20;
}
.share-pop.open{display:flex;}
.share-pop a, .share-pop button{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; color:var(--ivory); font-size:12.5px;
  background:none; border:none; text-align:left; cursor:pointer; width:100%;
}
.share-pop a:hover, .share-pop button:hover{background:rgba(255,255,255,.06);}
.share-pop svg{width:15px; height:15px; flex-shrink:0;}

/* ---------- Recently viewed ---------- */
.recent-viewed{display:none;}
.recent-viewed.show{display:block;}
.recent-viewed-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:6px;}
.recent-viewed-card{flex:0 0 220px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none;}
.recent-viewed-card img{width:100%; height:130px; object-fit:cover; display:block;}
.recent-viewed-card .rv-body{padding:12px 14px;}
.recent-viewed-card h5{color:var(--ivory); font-size:13.5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.recent-viewed-card span{color:var(--gold-bright); font-size:12px;}

/* ---------- Testimonial submission form ---------- */
.testi-form-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px; max-width:640px; margin:0 auto;}
.star-rate{display:flex; gap:6px; margin-bottom:4px;}
.star-rate button{background:none; border:none; cursor:pointer; padding:0; font-size:26px; line-height:1; color:var(--line-lt); transition:color .15s ease;}
.star-rate button.filled{color:var(--gold);}
.star-rate button:hover ~ button{color:var(--line-lt);}

/* ---------- Refined floating action cluster ---------- */
.float-actions{gap:10px;}
.float-btn{position:relative;}
.float-btn .fb-label{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink-soft); border:1px solid var(--line-lt); color:var(--ivory); font-size:12px; white-space:nowrap;
  padding:6px 11px; border-radius:8px; opacity:0; visibility:hidden; transition:all .2s ease; pointer-events:none;
}
.float-btn:hover .fb-label{opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);}

/* ===========================================================
 * QUOTATION / INVOICE / RECEIPT GENERATOR
 * =========================================================== */
.invoice-tool-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start;}
@media (max-width:1000px){.invoice-tool-wrap{grid-template-columns:1fr;}}

.invoice-form-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; position:sticky; top:100px;}
.invoice-form-card h4{color:var(--ivory); font-size:15px; margin:22px 0 12px;}
.invoice-form-card h4:first-child{margin-top:0;}
.invoice-form-card .form-group{margin-bottom:14px;}
.invoice-form-card label{display:block; font-size:12px; color:var(--stone); margin-bottom:6px;}
.invoice-form-card input, .invoice-form-card select, .invoice-form-card textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  color:var(--ivory); font-size:13.5px;
}
.invoice-form-card input:focus, .invoice-form-card select:focus, .invoice-form-card textarea:focus{outline:none; border-color:var(--gold);}
.invoice-row-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.invoice-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ivory); margin:14px 0;}
.invoice-check input{width:15px; height:15px; accent-color:var(--gold);}

.invoice-item-row{display:grid; grid-template-columns:1fr 60px 100px 32px; gap:8px; align-items:center; margin-bottom:8px;}
.invoice-item-row input{padding:9px 10px; font-size:13px;}
.invoice-item-remove{background:none; border:none; color:var(--stone); font-size:18px; cursor:pointer; line-height:1;}
.invoice-item-remove:hover{color:#e0536b;}
.invoice-add-row{background:none; border:1px dashed var(--line-lt); color:var(--gold-bright); border-radius:9px; padding:9px; width:100%; cursor:pointer; font-size:12.5px; margin-top:4px;}
.invoice-add-row:hover{border-color:var(--gold);}

/* ---------- Live document preview (A4-style, always light) ---------- */
.invoice-preview{
  background:#ffffff; color:#1a1a1a; border-radius:14px; padding:44px; box-shadow:0 20px 50px rgba(0,0,0,.45);
  font-family:'Inter', Arial, sans-serif;
}
.invoice-preview-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:26px; border-bottom:2px solid #0a1526;}
.invoice-preview-head img{height:56px; width:auto; display:block;}
.invoice-preview-company{font-size:11.5px; color:#555; margin-top:10px; line-height:1.6; max-width:260px;}
.invoice-preview-doc{text-align:right;}
.invoice-preview-doc h2{font-family:'Fraunces', Georgia, serif; font-size:26px; color:#0a1526; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;}
.invoice-preview-doc div{font-size:12.5px; color:#555; line-height:1.7;}
.invoice-preview-parties{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0;}
.invoice-preview-parties h5{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#999; margin-bottom:6px;}
.invoice-preview-parties p{font-size:13px; color:#1a1a1a; line-height:1.7; white-space:pre-line;}
.invoice-preview-table{width:100%; border-collapse:collapse; margin-top:10px;}
.invoice-preview-table th{
  background:#0a1526; color:#fff; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  padding:10px 12px; font-weight:600;
}
.invoice-preview-table th:last-child, .invoice-preview-table td:last-child{text-align:right;}
.invoice-preview-table th:nth-child(2), .invoice-preview-table td:nth-child(2){text-align:center;}
.invoice-preview-table td{padding:11px 12px; font-size:13px; border-bottom:1px solid #eee; color:#333;}
.invoice-preview-totals{margin-left:auto; width:260px; margin-top:16px;}
.invoice-preview-totals-row{display:flex; justify-content:space-between; padding:8px 12px; font-size:13px; color:#444;}
.invoice-preview-totals-row.grand{background:#0a1526; color:#fff; border-radius:8px; font-size:15px; font-weight:700; margin-top:4px;}
.invoice-preview-notes{margin-top:30px; padding-top:20px; border-top:1px solid #eee; font-size:12px; color:#777; line-height:1.7; white-space:pre-line;}
.invoice-preview-footer{margin-top:34px; text-align:center; font-size:11px; color:#aaa;}
.invoice-actions-row{display:flex; gap:12px; margin-top:20px;}

@media print{
  body *{visibility:hidden;}
  #invoicePreview, #invoicePreview *{visibility:visible;}
  #invoicePreview{position:absolute; top:0; left:0; width:100%; box-shadow:none; border-radius:0; padding:20px;}
  .invoice-actions-row{display:none;}
}

/* Signature row for invoice preview */
.invoice-sign-row{display:flex; justify-content:space-between; gap:40px; margin-top:50px;}
.invoice-sign-line{flex:1; border-top:1px solid #999; padding-top:8px; font-size:11px; color:#777; text-align:center;}

/* Segmented document-type selector */
.doc-type-toggle{display:flex; gap:8px; margin-bottom:4px;}
.doc-type-toggle button{
  flex:1; padding:10px 8px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--stone); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .18s ease;
}
.doc-type-toggle button.active{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.doc-type-toggle button:not(.active):hover{border-color:var(--gold-bright); color:var(--ivory);}