:root{
    --white:#FFFFFF; 
    --off-white:#FBF8F6;
    --ink:#15100D;
    --ink-soft:#6B625C;
    --ink-faint:#A79E97;
    --magenta:#7B1535;
    --orange:#A8203E;
    --magenta-tint:#F5E4EA;
    --orange-tint:#F5E4EA;
    --line:#ECE6E1;
    --grad: linear-gradient(115deg, #4E1124 0%, #7B1535 55%, #A8203E 100%);
    --shadow: 0 20px 50px -20px rgba(21,16,13,0.18);
    --ease: cubic-bezier(.22,1,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:90px;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--white);
    overflow-x:hidden;
    line-height:1.5;
  }
  h1,h2,h3,h4,.display{
    font-family:'Plus Jakarta Sans', sans-serif;
    letter-spacing:-0.02em;
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--magenta);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:22px;height:1.5px;
    background:var(--grad);
    display:inline-block;
  }
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  ::selection{background:var(--orange-tint);color:var(--magenta);}

  /* reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* Inside stagger grids --- shorter lift + subtle scale (Squarespace style) */
  .stagger .reveal{transform:translateY(18px) scale(0.97); transition:opacity .55s var(--ease), transform .55s var(--ease);}
  .stagger .reveal.in{transform:translateY(0) scale(1);}

  /* card-reveal --- standalone card variant */
  .card-reveal{opacity:0; transform:translateY(20px) scale(0.98); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .card-reveal.in{opacity:1; transform:translateY(0) scale(1);}

  /* stagger delays --- card grids animate one by one */
  .stagger .reveal:nth-child(1),
  .stagger .card-reveal:nth-child(1){transition-delay:.04s;}
  .stagger .reveal:nth-child(2),
  .stagger .card-reveal:nth-child(2){transition-delay:.10s;}
  .stagger .reveal:nth-child(3),
  .stagger .card-reveal:nth-child(3){transition-delay:.16s;}
  .stagger .reveal:nth-child(4),
  .stagger .card-reveal:nth-child(4){transition-delay:.22s;}
  .stagger .reveal:nth-child(5),
  .stagger .card-reveal:nth-child(5){transition-delay:.28s;}
  .stagger .reveal:nth-child(6),
  .stagger .card-reveal:nth-child(6){transition-delay:.34s;}
  .stagger .reveal:nth-child(7),
  .stagger .card-reveal:nth-child(7){transition-delay:.40s;}
  .stagger .reveal:nth-child(8),
  .stagger .card-reveal:nth-child(8){transition-delay:.46s;}
  .stagger .reveal:nth-child(9),
  .stagger .card-reveal:nth-child(9){transition-delay:.52s;}
  .stagger .reveal:nth-child(10),
  .stagger .card-reveal:nth-child(10){transition-delay:.58s;}
  .stagger .reveal:nth-child(11),
  .stagger .card-reveal:nth-child(11){transition-delay:.64s;}
  .stagger .reveal:nth-child(12),
  .stagger .card-reveal:nth-child(12){transition-delay:.70s;}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1!important; transform:none!important; transition:none!important;}
    .card-reveal{opacity:1!important; transform:none!important; transition:none!important;}
    *{animation:none!important;}
  }
  /* On mobile shorten stagger --- don't wait too long */
  @media (max-width:600px){
    .stagger .card-reveal:nth-child(n){transition-delay:.06s;}
    .stagger .card-reveal:nth-child(1){transition-delay:.04s;}
    .stagger .card-reveal:nth-child(2){transition-delay:.10s;}
    .stagger .card-reveal:nth-child(3){transition-delay:.16s;}
    .stagger .card-reveal:nth-child(4){transition-delay:.22s;}
  }


  /* ---------- NAV ---------- */
  
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .4s;
  }
  header.scrolled{border-bottom:1px solid var(--line);}
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px; max-width:1200px; margin:0 auto;
  }
  .logo{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800; font-size:22px; letter-spacing:-0.02em;
    display:flex; align-items:center;
  }
  .logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .logo img{height:44px; width:auto; display:block;}
  .logo-dark img{height:30px;}
  .nav-links{display:flex; gap:36px; align-items:center;}
  .nav-links a{
    font-size:14px; font-weight:500; color:var(--ink-soft);
    position:relative; padding:4px 0;
    white-space:nowrap;
    transition:color .25s;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
    background:var(--grad); transition:width .3s var(--ease);
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{width:100%;}
  .mobile-contact-btn{display:none;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:100px;
    font-size:14px; font-weight:600;
    cursor:pointer; border:none; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .btn-primary{
    background:var(--ink); color:var(--white);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(21,16,13,0.4);}
  .btn-grad{
    background:var(--grad); color:var(--white); background-size:160% 100%; background-position:0% 0%;
  }
  .btn-grad:hover{transform:translateY(-2px); background-position:100% 0%; box-shadow:0 14px 30px -10px rgba(123,21,53,0.45);}
  .btn-outline{
    background:transparent; border:1.5px solid var(--line); color:var(--ink);
  }
  .btn-outline:hover{border-color:var(--ink); transform:translateY(-2px);}
  .menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-toggle svg{width:24px;height:24px;stroke:var(--ink);display:block;}

  /* ---- MOBILE NAV OVERLAY --- true full screen ---- */
  .nav-links.open{
    display:flex !important;
    flex-direction:column;
    position:fixed;
    top:0; left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    background:#fff;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    z-index:9999;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
    animation:navSlideIn .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes navSlideIn{
    from{opacity:0; transform:translateX(32px);}
    to{opacity:1; transform:translateX(0);}
  }

  /* Brand accent strip at top */
  .nav-links.open::before{
    content:'';
    display:block;
    height:5px;
    background:var(--grad);
    flex-shrink:0;
  }

  /* Get in Touch CTA at bottom of mobile nav */
  .nav-links.open .mobile-contact-btn{
    display:block;
    margin:20px 24px 32px;
    background:#1A2B4A;
    color:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    font-family:inherit;
    padding:12px 20px;
    border-radius:10px;
    flex-shrink:0;
    letter-spacing:.02em;
    width:auto;
    border-bottom:none;
  }
  .nav-links.open .mobile-contact-btn:hover{
    background:#2A3B5A;
    color:#fff;
  }
  .nav-links.open a.mobile-contact-btn::before{
    display:none;
  }

  .nav-links.open a{
    font-size:17px;
    font-weight:600;
    color:var(--ink);
    padding:17px 28px;
    width:100%;
    text-align:left;
    border-bottom:1px solid var(--line);
    transition:color .2s, background .2s;
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    box-sizing:border-box;
  }
  .nav-links.open a:first-of-type{ margin-top:64px; }
  .nav-links.open a:last-child{ border-bottom:none; }
  .nav-links.open a:hover{
    color:var(--magenta);
    background:#fdf6fb;
  }
  .nav-links.open a::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:var(--grad);
    flex-shrink:0;
  }
  .nav-links.open a::after{ display:none; }

  /* close (X) button */
  .close-nav{
    display:none;
    position:fixed;
    top:16px;
    right:16px;
    z-index:10000;
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:50%;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s, border-color .2s;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
  }
  .close-nav:hover{background:var(--ink); border-color:var(--ink);}
  .close-nav:hover svg{stroke:var(--white);}
  .close-nav.visible{display:flex;}
  .close-nav svg{width:20px;height:20px;stroke:var(--ink);}


  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:180px 0 110px;
    background:var(--off-white);
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
  }
  .hero .eyebrow{margin-bottom:22px;}
  .hero h1{
    font-size:clamp(40px,5.4vw,74px);
    font-weight:700; line-height:1.02; margin-bottom:26px;
  }
  .hero p.lead{
    font-size:18px; color:var(--ink-soft); max-width:440px; margin-bottom:36px;
  }
  .hero-ctas{display:flex; gap:14px; margin-bottom:52px; flex-wrap:wrap;}
  .hero-lines{display:flex; flex-direction:column; gap:10px;}
  .hero-lines li{
    font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:10px;
  }
  .hero-lines .dot{width:6px; height:6px; border-radius:50%; background:var(--grad); flex-shrink:0;}

  /* skyline */
  .skyline-wrap{
    position:relative; height:460px; display:flex; align-items:flex-end; justify-content:center;
  }
  .skyline-glow{
    position:absolute; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(168,32,62,0.18), rgba(123,21,53,0.10) 55%, transparent 75%);
    filter:blur(10px);
    pointer-events:none;
  }
  svg.skyline{position:relative; width:100%; max-width:480px; height:auto;}
  .win{ animation:flicker 5s ease-in-out infinite; }
  @keyframes flicker{
    0%,100%{opacity:.15;} 45%{opacity:.15;} 50%{opacity:1;} 90%{opacity:1;} 95%{opacity:.15;}
  }
  .float-card{
    position:absolute; background:var(--white); border-radius:16px; box-shadow:var(--shadow);
    padding:14px 18px; display:flex; align-items:center; gap:12px;
    animation:floaty 6s ease-in-out infinite;
  }
  .float-card svg{width:20px;height:20px;flex-shrink:0;}
  .float-card .fc-num{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:17px;}
  .float-card .fc-label{font-size:11px; color:var(--ink-soft);}
  .fc-1{top:8%; left:-4%; animation-delay:0s;}
  .fc-2{bottom:14%; right:-6%; animation-delay:1.4s;}

  @keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}


  /* ---------- STATS ---------- */
  .stats{
    background:var(--ink); color:var(--white); padding:56px 0;
  }


  .stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
  .stat-num{
    font-family:'Plus Jakarta Sans'; font-weight:700; font-size:clamp(30px,4vw,46px);
    background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .stat-label{font-size:13px; color:#B7AFAA; margin-top:6px; letter-spacing:.03em;}

  /* ---------- SECTION generic ---------- */
  section{padding:120px 0;}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head h2{font-size:clamp(30px,3.6vw,46px); font-weight:700; margin-top:16px; line-height:1.08;}
  .section-head p{color:var(--ink-soft); font-size:16.5px; margin-top:16px;}
  /* Off-white sections --- dot texture overlay */
  .off {
    background: var(--off-white);
    position: relative;
    isolation: isolate;
  }
  .off::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(123,21,53,0.08) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: -1;
  }

  /* White sections --- subtle gradient accent top line */
  #properties, #about, #services, #expertise, #presence {
    position: relative;
  }
  #properties::after, #about::after, #services::after, #expertise::after, #presence::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(123,21,53,0.25) 30%, rgba(168,32,62,0.25) 70%, transparent 100%);
    pointer-events: none;
  }

  /* Footer wave divider */
  .footer-wave-wrap {
    line-height: 0;
    overflow: hidden;
    background: #fff;
    margin-bottom: -2px;
  }
  .footer-wave-wrap svg { display: block; width: 100%; height: auto; }

  #values{background: linear-gradient(135deg,#8B1A72 0%,#7B1535 40%,#C94030 75%,#D9602F 100%);}
  #values .eyebrow{color:#FFD9A8;}
  #values .eyebrow::before{background:linear-gradient(115deg,#FFD9A8,#A8203E);}
  #values .section-head h2{color:#FFFFFF;}
  #values .section-head p{color:rgba(255,255,255,0.78);}
  #values .value-grid{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.14);}
  #values .value-card{background:transparent;}
  #values .value-card:hover{background:rgba(255,255,255,0.06);}
  #values .value-card .vnum{color:rgba(255,255,255,0.5);}
  #values .value-card h4{color:#FFFFFF;}
  #values .value-card p{color:rgba(255,255,255,0.75);}

  /* ---------- PROPERTY CARDS ---------- */
  .property-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .property-card{
    border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--white);
    transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s ease;
    will-change:transform, box-shadow;
  }
  .property-card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:
      0 4px 12px rgba(21,16,13,0.04),
      0 20px 40px -12px rgba(21,16,13,0.1),
      0 30px 60px -20px rgba(123,21,53,0.14);
    border-color:rgba(123,21,53,0.22);
  }
  .property-img{position:relative; height:210px; overflow:hidden;}
  .property-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(0.16, 1, 0.3, 1);}
  .property-card:hover .property-img img{transform:scale(1.06);}
  .property-price{
    transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .property-card:hover .property-price{
    transform:translateX(3px);
  }
  .property-tag{
    position:absolute; top:14px; left:14px; color:var(--white);
    font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:100px; letter-spacing:.02em;
    background:#1A2B4A;  /* deep navy - neutral, premium */
    transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s ease;
  }
  .property-card:hover .property-tag{
    transform:scale(1.04);
    box-shadow:0 4px 12px rgba(0,0,0,0.18);
  }
  /* For Sale = navy, For Rent = teal, Category tags */
  .property-tag[data-type="sale"]{ background:#1A2B4A; }
  .property-tag[data-type="rent"]{ background:#059669; }
  .property-tag[data-type="residential"]{ background:#1A2B4A; }
  .property-tag[data-type="commercial"]{ background:#7B1535; }
  .property-tag[data-type="investment"]{ background:#059669; }

  /* Filter tabs */
  .prop-filters{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
  .prop-filter{
    padding:8px 20px; border-radius:100px; font-size:13px; font-weight:600;
    border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
    cursor:pointer; transition:all .25s var(--ease);
  }
  .prop-filter.active, .prop-filter:hover{
    background:var(--grad); color:#fff; border-color:transparent;
  }
  .property-card.hidden{ display:none; }
  .property-body{padding:22px 22px 26px;}
  .property-price{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:22px; color:var(--magenta);}
  .property-price span{font-size:13px; font-weight:500; color:var(--ink-soft);}
  .property-body h4{font-size:16.5px; font-weight:700; margin:8px 0 10px;}
  .property-loc{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
  .property-loc svg{width:14px; height:14px; stroke:var(--orange); flex-shrink:0;}
  .property-meta{display:flex; gap:14px; padding-top:14px; border-top:1px solid var(--line);}
  .property-meta span{font-size:12.5px; color:var(--ink-soft); font-weight:500;}
  .property-enquire{
    display:block; width:100%; margin-top:18px; text-align:center;
    padding:11px 0; border-radius:100px; font-size:13.5px; font-weight:600;
    background:var(--off-white); color:var(--magenta); border:1.5px solid var(--magenta-tint);
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .property-enquire:hover{background:var(--grad); color:var(--white); border-color:transparent;}

  /* about */
  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start;}
  .about-grid h2{font-size:clamp(32px,4vw,50px); font-weight:700; line-height:1.06;}
  .about-copy p{color:var(--ink-soft); font-size:16.5px; margin-bottom:18px;}
  .about-copy p:last-child{margin-bottom:0;}

  /* values */
  .value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
  .value-card{background:var(--white); padding:36px 30px; transition:background .35s;}
  .value-card:hover{background:var(--off-white);}
  .value-card .vnum{font-family:'Plus Jakarta Sans'; font-size:13px; font-weight:700; color:var(--ink-faint); letter-spacing:.06em;}
  .value-card h4{font-size:19px; font-weight:700; margin:14px 0 8px;}
  .value-card p{font-size:14.5px; color:var(--ink-soft);}

  /* services */
  .service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .service-card{
    background:var(--white); border:1px solid var(--line); border-radius:20px; padding:30px 26px;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
    position:relative; overflow:hidden;
  }
  .service-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
  }
  .service-card:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent;}
  .service-card:hover::before{transform:scaleX(1);}
  .icon-badge{
    width:46px; height:46px; border-radius:13px;
    background:var(--magenta-tint);               /* default fallback */
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    transition:background .4s, transform .35s var(--ease);
  }
  .icon-badge svg{
    width:22px; height:22px;
    stroke:var(--magenta);                         /* default fallback */
    transition:stroke .3s;
  }
  .service-card:hover .icon-badge{transform:rotate(-6deg) scale(1.08);}
  .service-card:hover .icon-badge svg{stroke:var(--white) !important;}
  .service-card h4{font-size:16.5px; font-weight:700; margin-bottom:8px;}
  .service-card p{font-size:13.8px; color:var(--ink-soft);}

  /* --- Per-card accent colors (service) --- all 8 cards --- */
  .service-grid .service-card:nth-child(1)::before{background:#7B1535;}
  .service-grid .service-card:nth-child(1) .icon-badge{background:rgba(123,21,53,0.1);}
  .service-grid .service-card:nth-child(1) .icon-badge svg{stroke:#7B1535;}
  .service-grid .service-card:nth-child(1):hover .icon-badge{background:#7B1535;}

  .service-grid .service-card:nth-child(2)::before{background:#2563EB;}
  .service-grid .service-card:nth-child(2) .icon-badge{background:rgba(37,99,235,0.1);}
  .service-grid .service-card:nth-child(2) .icon-badge svg{stroke:#2563EB;}
  .service-grid .service-card:nth-child(2):hover .icon-badge{background:#2563EB;}

  .service-grid .service-card:nth-child(3)::before{background:#059669;}
  .service-grid .service-card:nth-child(3) .icon-badge{background:rgba(5,150,105,0.1);}
  .service-grid .service-card:nth-child(3) .icon-badge svg{stroke:#059669;}
  .service-grid .service-card:nth-child(3):hover .icon-badge{background:#059669;}

  .service-grid .service-card:nth-child(4)::before{background:#D97706;}
  .service-grid .service-card:nth-child(4) .icon-badge{background:rgba(217,119,6,0.1);}
  .service-grid .service-card:nth-child(4) .icon-badge svg{stroke:#D97706;}
  .service-grid .service-card:nth-child(4):hover .icon-badge{background:#D97706;}

  .service-grid .service-card:nth-child(5)::before{background:#7C3AED;}
  .service-grid .service-card:nth-child(5) .icon-badge{background:rgba(124,58,237,0.1);}
  .service-grid .service-card:nth-child(5) .icon-badge svg{stroke:#7C3AED;}
  .service-grid .service-card:nth-child(5):hover .icon-badge{background:#7C3AED;}

  .service-grid .service-card:nth-child(6)::before{background:#0891B2;}
  .service-grid .service-card:nth-child(6) .icon-badge{background:rgba(8,145,178,0.1);}
  .service-grid .service-card:nth-child(6) .icon-badge svg{stroke:#0891B2;}
  .service-grid .service-card:nth-child(6):hover .icon-badge{background:#0891B2;}

  .service-grid .service-card:nth-child(7)::before{background:#DC2626;}
  .service-grid .service-card:nth-child(7) .icon-badge{background:rgba(220,38,38,0.1);}
  .service-grid .service-card:nth-child(7) .icon-badge svg{stroke:#DC2626;}
  .service-grid .service-card:nth-child(7):hover .icon-badge{background:#DC2626;}

  .service-grid .service-card:nth-child(8)::before{background:#A8203E;}
  .service-grid .service-card:nth-child(8) .icon-badge{background:rgba(168,32,62,0.1);}
  .service-grid .service-card:nth-child(8) .icon-badge svg{stroke:#A8203E;}
  .service-grid .service-card:nth-child(8):hover .icon-badge{background:#A8203E;}



  /* why us */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border-radius:20px; overflow:hidden; border:1px solid var(--line);}
  .why-item{background:var(--white); padding:28px 24px; display:flex; gap:14px; transition:background .3s;}
  .why-item:hover{background:var(--off-white);}
  .why-item svg{width:22px; height:22px; flex-shrink:0; margin-top:2px; transition:transform .35s var(--ease);}
  .why-item h4{font-size:15px; font-weight:700; margin-bottom:6px;}
  .why-item p{font-size:13px; color:var(--ink-soft);}
  /* Per-item why-us icon colors --- all 8 items */
  .why-grid .why-item:nth-child(1) svg{stroke:#7B1535;}
  .why-grid .why-item:nth-child(2) svg{stroke:#2563EB;}
  .why-grid .why-item:nth-child(3) svg{stroke:#059669;}
  .why-grid .why-item:nth-child(4) svg{stroke:#D97706;}
  .why-grid .why-item:nth-child(5) svg{stroke:#7C3AED;}
  .why-grid .why-item:nth-child(6) svg{stroke:#DC2626;}
  .why-grid .why-item:nth-child(7) svg{stroke:#0891B2;}
  .why-grid .why-item:nth-child(8) svg{stroke:#A8203E;}
  /* Mobile: 2 cols on tablet, 1 on phone */
  @media(max-width:980px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:600px){ .why-grid{grid-template-columns:1fr;} }


  /* expertise --- base grid kept for compat */
  .expertise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .expertise-card{ border-radius:20px; padding:32px 28px; }

  /* ============================================================
     EXPERTISE ACCORDION --- PREMIUM LAYOUT
     ============================================================ */
  #expertise{ background:var(--white); }

  .exp-header{
    display:flex; align-items:flex-end;
    justify-content:space-between; gap:48px;
    margin-bottom:56px;
  }
  .exp-header h2{ font-size:clamp(28px,3.4vw,42px); max-width:520px; }
  .exp-sub{ font-size:15px; color:var(--ink-soft); max-width:260px; line-height:1.7; flex-shrink:0; text-align:right; }

  /* Split layout */
  .exp-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
  }

  /* LEFT: Accordion tabs */
  .exp-tabs{ display:flex; flex-direction:column; gap:0; }

  .exp-tab{
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .exp-tab:first-child{ border-top:1px solid var(--line); }

  .exp-tab-head{
    display:flex; align-items:center; gap:16px;
    padding:20px 0;
    cursor:pointer;
    user-select:none;
    transition:background .2s;
  }
  .exp-tab-head:hover .exp-tab-title h4{ color:var(--magenta); }

  /* Icon badge */
  .exp-tab-icon{
    width:42px; height:42px; border-radius:12px;
    background:var(--off-white);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .35s var(--ease);
  }
  .exp-tab-icon svg{ width:20px; height:20px; stroke:var(--ink-soft); transition:stroke .3s, transform .35s var(--ease); }

  /* Each accordion tab gets its own unique icon color when active */
  .exp-tab:nth-child(1).active .exp-tab-icon{ background:#7B1535; }
  .exp-tab:nth-child(1).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(1) .exp-tab-head:hover .exp-tab-title h4{ color:#7B1535; }
  .exp-tab:nth-child(1).active .exp-num{ color:#7B1535; }
  .exp-tab:nth-child(1).active .exp-arrow svg{ stroke:#7B1535; }

  .exp-tab:nth-child(2).active .exp-tab-icon{ background:#2563EB; }
  .exp-tab:nth-child(2).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(2) .exp-tab-head:hover .exp-tab-title h4{ color:#2563EB; }
  .exp-tab:nth-child(2).active .exp-num{ color:#2563EB; }
  .exp-tab:nth-child(2).active .exp-arrow svg{ stroke:#2563EB; }

  .exp-tab:nth-child(3).active .exp-tab-icon{ background:#059669; }
  .exp-tab:nth-child(3).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(3) .exp-tab-head:hover .exp-tab-title h4{ color:#059669; }
  .exp-tab:nth-child(3).active .exp-num{ color:#059669; }
  .exp-tab:nth-child(3).active .exp-arrow svg{ stroke:#059669; }

  .exp-tab:nth-child(4).active .exp-tab-icon{ background:#D97706; }
  .exp-tab:nth-child(4).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(4) .exp-tab-head:hover .exp-tab-title h4{ color:#D97706; }
  .exp-tab:nth-child(4).active .exp-num{ color:#D97706; }
  .exp-tab:nth-child(4).active .exp-arrow svg{ stroke:#D97706; }

  .exp-tab:nth-child(5).active .exp-tab-icon{ background:#7C3AED; }
  .exp-tab:nth-child(5).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(5) .exp-tab-head:hover .exp-tab-title h4{ color:#7C3AED; }
  .exp-tab:nth-child(5).active .exp-num{ color:#7C3AED; }
  .exp-tab:nth-child(5).active .exp-arrow svg{ stroke:#7C3AED; }

  .exp-tab:nth-child(6).active .exp-tab-icon{ background:#A8203E; }
  .exp-tab:nth-child(6).active .exp-tab-icon svg{ stroke:#fff; }
  .exp-tab:nth-child(6) .exp-tab-head:hover .exp-tab-title h4{ color:#A8203E; }
  .exp-tab:nth-child(6).active .exp-num{ color:#A8203E; }
  .exp-tab:nth-child(6).active .exp-arrow svg{ stroke:#A8203E; }

  /* Also colour the active pills per tab */
  .exp-tab:nth-child(1).active .exp-pills span{ background:rgba(123,21,53,0.08); color:#7B1535; border-color:rgba(123,21,53,0.2); }
  .exp-tab:nth-child(2).active .exp-pills span{ background:rgba(37,99,235,0.08);  color:#2563EB; border-color:rgba(37,99,235,0.2);  }
  .exp-tab:nth-child(3).active .exp-pills span{ background:rgba(5,150,105,0.08);  color:#059669; border-color:rgba(5,150,105,0.2);  }
  .exp-tab:nth-child(4).active .exp-pills span{ background:rgba(217,119,6,0.08);  color:#D97706; border-color:rgba(217,119,6,0.2);  }
  .exp-tab:nth-child(5).active .exp-pills span{ background:rgba(124,58,237,0.08); color:#7C3AED; border-color:rgba(124,58,237,0.2); }
  .exp-tab:nth-child(6).active .exp-pills span{ background:rgba(168,32,62,0.08); color:#A8203E; border-color:rgba(168,32,62,0.2); }


  /* Number + Title */
  .exp-tab-title{ flex:1; }
  .exp-num{
    display:block; font-size:10px; font-weight:700;
    color:var(--ink-faint); letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:2px;
    transition:color .3s;
  }
  .exp-tab.active .exp-num{ color:var(--magenta); }
  .exp-tab-title h4{
    font-size:16px; font-weight:700; color:var(--ink);
    transition:color .3s;
    margin:0;
  }

  /* Arrow */
  .exp-arrow svg{
    width:18px; height:18px; stroke:var(--ink-faint);
    transition:transform .4s var(--ease), stroke .3s;
  }
  .exp-tab.active .exp-arrow svg{
    transform:rotate(180deg);
    stroke:var(--magenta);
  }

  /* Body (collapsible) */
  .exp-tab-body{
    max-height:0; overflow:hidden;
    transition:max-height .55s cubic-bezier(.22,1,.36,1), padding .4s var(--ease);
    padding:0 0 0 58px;
  }
  .exp-tab.active .exp-tab-body{
    max-height:200px;
    padding:0 0 22px 58px;
  }
  .exp-tab-body p{
    font-size:14px; color:var(--ink-soft);
    line-height:1.7; margin-bottom:14px;
  }
  .exp-pills{ display:flex; flex-wrap:wrap; gap:8px; }
  .exp-pills span{
    font-size:11.5px; font-weight:600;
    background:var(--off-white); color:var(--ink-soft);
    padding:5px 12px; border-radius:100px;
    border:1px solid var(--line);
    transition:background .3s, color .3s, border-color .3s;
  }
  .exp-tab.active .exp-pills span{
    background:rgba(123,21,53,0.08);
    color:var(--magenta);
    border-color:rgba(123,21,53,0.2);
  }

  /* RIGHT: Image Panel */
  .exp-visual{
    position:sticky; top:110px;
    border-radius:28px; overflow:hidden;
    height:520px;
    background:var(--ink);
    box-shadow:0 32px 80px -24px rgba(21,16,13,0.28);
  }
  .exp-img{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0;
    transform:scale(1.06);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .exp-img::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(21,16,13,0.55) 0%, transparent 55%);
  }
  .exp-img.active{
    opacity:1;
    transform:scale(1);
  }

  /* Badge on image */
  .exp-visual-badge{
    position:absolute; bottom:24px; left:24px; z-index:2;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:14px; padding:14px 20px;
    display:flex; align-items:center; gap:14px;
    transition:all .5s var(--ease);
  }
  .exp-badge-num{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:28px; font-weight:800; color:#fff;
    line-height:1;
  }
  .exp-badge-label{
    font-size:13px; font-weight:600; color:rgba(255,255,255,0.88);
    max-width:130px; line-height:1.3;
  }

  /* Auto-advance progress bar */
  .exp-visual-progress{
    position:absolute; bottom:0; left:0;
    height:3px; background:var(--grad);
    width:0%; transition:none;
    z-index:3;
  }
  .exp-visual-progress.animate{
    transition:width 4s linear;
    width:100%;
  }

  /* Mobile stacked */
  @media(max-width:980px){
    .exp-layout{grid-template-columns:1fr; gap:36px;}
    .exp-visual{height:340px; position:relative; top:0;}
    .exp-header{flex-direction:column; align-items:flex-start; gap:12px;}
    .exp-sub{text-align:left; max-width:100%;}
  }
  @media(max-width:600px){
    .exp-visual{height:220px;}
    .exp-tab-body{padding-left:12px;}
    .exp-tab.active .exp-tab-body{padding-left:12px;}
    .exp-tab-head{padding:16px 14px;}
    .exp-tab-icon{width:36px; height:36px;}
  }



  /* ============================================================
     EXPERTISE V2 --- DARK ANIMATED SECTION
     ============================================================ */
  .expertise-dark{
    background:var(--ink);
    position:relative;
    overflow:hidden;
  }
  .expertise-canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none; z-index:0;
    opacity:0.55;
  }
  .expertise-dark .wrap{ position:relative; z-index:1; }
  .expertise-dark .section-head{ margin-bottom:56px; }
  .expertise-dark .section-head .eyebrow::before{
    background:linear-gradient(115deg,#A8203E,#7B1535);
  }

  /* Grid */
  .expertise-grid-v2{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }

  /* Card base */
  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  @keyframes borderSpin{ to{ --angle: 360deg; } }

  .expertise-card-v2{
    position:relative;
    background:rgba(255,255,255,0.04);
    border-radius:22px;
    padding:34px 28px 28px;
    overflow:hidden;
    cursor:default;
    transition:transform .4s var(--ease), background .35s;
    border:1px solid rgba(255,255,255,0.08);
    z-index:0;
  }
  /* Spinning aurora border --- activates on hover */
  .expertise-card-v2::before{
    content:'';
    position:absolute;
    inset:-1.5px;
    border-radius:23px;
    background:conic-gradient(
      from var(--angle),
      transparent 0deg,
      transparent 160deg,
      var(--card-color) 220deg,
      rgba(255,255,255,0.9) 260deg,
      var(--card-color) 300deg,
      transparent 360deg
    );
    animation:borderSpin 3.5s linear infinite;
    opacity:0;
    transition:opacity .45s var(--ease);
    z-index:-1;
  }
  /* Inner mask to keep the dark fill */
  .expertise-card-v2::after{
    content:'';
    position:absolute;
    inset:1.5px;
    border-radius:21px;
    background:#181210;
    z-index:-1;
  }
  .expertise-card-v2:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,0.06);
  }
  .expertise-card-v2:hover::before{ opacity:1; }

  /* Mouse-tracking glow blob inside card */
  .ecv2-glow{
    position:absolute;
    width:160px; height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(var(--card-rgb),0.35), transparent 70%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:opacity .3s;
    opacity:0;
    z-index:0;
    filter:blur(24px);
  }
  .expertise-card-v2:hover .ecv2-glow{ opacity:1; }

  /* Big faded number */
  .ecv2-num{
    position:absolute; top:16px; right:20px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800; font-size:72px;
    color:rgba(255,255,255,0.04);
    line-height:1; pointer-events:none;
    transition:color .4s, transform .4s var(--ease);
    user-select:none;
  }
  .expertise-card-v2:hover .ecv2-num{
    color:rgba(var(--card-rgb),0.12);
    transform:scale(1.1) translateX(4px);
  }

  /* Icon */
  .ecv2-icon{
    width:50px; height:50px; border-radius:14px;
    background:rgba(var(--card-rgb),0.15);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    transition:background .4s var(--ease), transform .4s var(--ease);
    position:relative; z-index:1;
  }
  .ecv2-icon svg{
    width:24px; height:24px;
    stroke:var(--card-color);
    transition:stroke .3s, transform .4s var(--ease);
  }
  .expertise-card-v2:hover .ecv2-icon{
    background:var(--card-color);
    transform:rotate(-6deg) scale(1.08);
  }
  .expertise-card-v2:hover .ecv2-icon svg{
    stroke:#fff;
    transform:rotate(6deg);
  }

  /* Text */
  .expertise-card-v2 h4{
    font-size:17px; font-weight:700; color:#fff;
    margin-bottom:10px; position:relative; z-index:1;
  }
  .expertise-card-v2 p{
    font-size:13.5px; color:rgba(255,255,255,0.55);
    line-height:1.65; position:relative; z-index:1;
  }

  /* Footer: bar + tag */
  .ecv2-footer{
    display:flex; align-items:center; gap:14px;
    margin-top:24px; position:relative; z-index:1;
  }
  .ecv2-bar{
    flex:1; height:4px; border-radius:100px;
    background:rgba(255,255,255,0.1); overflow:hidden;
  }
  .ecv2-bar-fill{
    height:100%; width:0%;
    background:var(--card-color);
    border-radius:100px;
    transition:width 1.2s cubic-bezier(.22,1,.36,1);
    box-shadow:0 0 8px var(--card-color);
  }
  .ecv2-tag{
    font-size:10.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--card-color);
    background:rgba(var(--card-rgb),0.12);
    padding:4px 10px; border-radius:100px;
    white-space:nowrap;
  }

  /* Mobile */
  @media(max-width:980px){ .expertise-grid-v2{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:600px){ .expertise-grid-v2{grid-template-columns:1fr;} }



  /* process */
  .process-wrap{position:relative;}
  .process-track{
    position:absolute; top:26px; left:0; right:0; height:2px;
    background:var(--line); z-index:0;
  }
  .process-track-fill{
    position:absolute; top:0; left:0; height:100%; width:0%;
    background:var(--grad); transition:width 1.4s var(--ease);
  }
  .process-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; position:relative; z-index:1;}
  .process-step{text-align:left;}
  .process-dot{
    width:52px; height:52px; border-radius:50%; background:var(--white); border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:700;
    color:var(--ink-soft); margin-bottom:18px; transition:all .4s var(--ease);
  }
  /* Process dots: each step a unique brand-coordinated solid color */
  .process-step:nth-child(1).in .process-dot{background:#1A2B4A; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step:nth-child(2).in .process-dot{background:#7B1535; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step:nth-child(3).in .process-dot{background:#2563EB; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step:nth-child(4).in .process-dot{background:#059669; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step:nth-child(5).in .process-dot{background:#D97706; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step:nth-child(6).in .process-dot{background:#A8203E; border-color:transparent; color:#fff; transform:scale(1.08);}
  .process-step h4{font-size:15px; font-weight:700; margin-bottom:6px;}
  .process-step p{font-size:13px; color:var(--ink-soft);}

  /* presence map */
  .presence-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .map-box{position:relative; aspect-ratio:1/0.85;}
  .map-box svg path{
    stroke-dasharray: 6 8;
    animation: routeFlow 25s linear infinite;
  }
  @keyframes routeFlow{
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0; }
  }
  .city-pin{position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:default;}
  .pin-dot{
    width:14px; height:14px; border-radius:50%; background:var(--magenta); position:relative;
    box-shadow: 0 0 14px rgba(123, 21, 53, 0.4);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .city-pin:hover .pin-dot{
    transform: scale(1.25);
  }
  /* Each city pin gets a unique color */
  .city-pin:nth-child(2) .pin-dot{background:#2563EB; box-shadow: 0 0 14px rgba(37, 99, 235, 0.45);}
  .city-pin:nth-child(2) .pin-dot::after{border-color:#2563EB;}
  .city-pin:nth-child(3) .pin-dot{background:#059669; box-shadow: 0 0 14px rgba(5, 150, 105, 0.45);}
  .city-pin:nth-child(3) .pin-dot::after{border-color:#059669;}
  .city-pin:nth-child(4) .pin-dot{background:#7B1535; box-shadow: 0 0 16px rgba(123, 21, 53, 0.55);}
  .city-pin:nth-child(4) .pin-dot::after{border-color:#7B1535;}
  .city-pin:nth-child(5) .pin-dot{background:#D97706; box-shadow: 0 0 14px rgba(217, 119, 6, 0.45);}
  .city-pin:nth-child(5) .pin-dot::after{border-color:#D97706;}
  .pin-dot::after{
    content:''; position:absolute; inset:-8px; border-radius:50%; border:1.5px solid var(--magenta);
    opacity:.6; animation:ping 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  }
  .city-pin .city-label{
    font-size:12.5px; font-weight:700; background:var(--white); padding:5px 12px; border-radius:100px;
    box-shadow: 0 6px 18px -4px rgba(21,16,13,0.12); white-space:nowrap;
    border: 1px solid rgba(236, 230, 225, 0.8);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease;
  }
  .city-pin:hover .city-label{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(21,16,13,0.18);
  }
  @keyframes ping{
    0%{transform:scale(0.5); opacity:0.8;}
    70%{transform:scale(2.6); opacity:0;}
    100%{transform:scale(2.6); opacity:0;}
  }
  .presence-copy p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;}

  /* founder --- clean simple card with unique creative layered glow shadow */
  .founder{
    background: #FFFFFF;
    color: var(--ink);
    border-radius: 26px;
    padding: 50px 50px 42px;
    position: relative;
    /* Unique multi-layered shadow: crisp structural depth + soft dual-tone ambient aura (wine & deep burgundy) */
    box-shadow:
      0 2px 4px rgba(21, 16, 13, 0.02),
      0 12px 28px -6px rgba(21, 16, 13, 0.06),
      0 28px 60px -16px rgba(123, 21, 53, 0.09),
      0 36px 80px -20px rgba(168, 32, 62, 0.07);
    border: 1px solid rgba(235, 230, 226, 0.85);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
    will-change: transform, box-shadow;
  }
  .founder:hover{
    transform: translateY(-7px);
    /* Creative elevated luminous glow on hover */
    box-shadow:
      0 4px 8px rgba(21, 16, 13, 0.02),
      0 18px 36px -8px rgba(21, 16, 13, 0.08),
      -12px 32px 70px -12px rgba(123, 21, 53, 0.18),
      18px 40px 90px -16px rgba(168, 32, 62, 0.16);
    border-color: rgba(123, 21, 53, 0.3);
  }
  .founder::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad);
    border-radius: 26px 26px 0 0;
    transition: height 0.3s var(--ease);
  }
  .founder:hover::before{
    height: 5px;
  }



  .founder-tag{
    display: inline-block;
    padding: 4px 12px;
    background: var(--orange-tint);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--magenta);
    margin-bottom: 20px;
  }

  .founder-quote{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(19px, 2.1vw, 25px);
    font-weight: 500;
    line-height: 1.55;
    max-width: 820px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
  }

  .founder-meta{
    display: flex;
    align-items: center;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .founder-meta-left{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .founder-logo-img{
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.35s var(--ease);
  }
  .founder:hover .founder-logo-img{
    transform: scale(1.04);
  }

  .founder-meta .fn{
    font-weight: 700; font-size: 15px; color: var(--ink);
  }
  .founder-meta .fr{
    font-size: 13px; color: var(--ink-soft);
    margin-top: 2px;
  }




  /* ============================================================
     CONTACT SECTION --- split layout, dark premium
     ============================================================ */
  .contact-section{
    background:linear-gradient(135deg,#0F172A 0%,#1A2540 55%,#0C1A2E 100%);
    padding:100px 0;
    position:relative;
  }
  /* Subtle grid texture overlay */
  .contact-section::before{
    content:'';
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
    background-size:48px 48px;
    pointer-events:none;
  }

  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:64px; align-items:center;
    position:relative; z-index:1;
  }

  /* LEFT SIDE */
  .contact-left h2{ font-size:clamp(30px,3.8vw,46px); line-height:1.1; margin:16px 0 18px; }
  .contact-left p{ font-size:15.5px; line-height:1.7; margin-bottom:40px; }
  .contact-left .eyebrow::before{ background:linear-gradient(115deg,#A8203E,#7B1535); }

  .contact-cards{ display:flex; flex-direction:column; gap:14px; }
  .contact-card{
    display:flex; align-items:center; gap:16px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:18px 20px;
    text-decoration:none; color:inherit;
    transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s;
    cursor:pointer;
  }
  .contact-card:hover{
    background:rgba(255,255,255,0.11);
    border-color:rgba(255,255,255,0.22);
    transform:translateX(6px);
  }
  .cc-icon{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .cc-icon svg{ width:20px; height:20px; }
  .cc-body{ flex:1; }
  .cc-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.55; margin-bottom:3px; }
  .cc-value{ display:block; font-size:15px; font-weight:600; }
  .cc-arrow{ font-size:18px; opacity:.4; transition:opacity .3s, transform .3s; }
  .contact-card:hover .cc-arrow{ opacity:1; transform:translateX(4px); }

  /* Per-card accent colors */
  .contact-card-call .cc-icon{ background:rgba(123,21,53,0.18); }
  .contact-card-call .cc-icon svg{ stroke:#C84FAA; }
  .contact-card-call .cc-label,.contact-card-call .cc-value{ color:#fff; }
  .contact-card-call:hover{ border-color:rgba(123,21,53,0.4); }

  .contact-card-wa .cc-icon{ background:rgba(37,211,102,0.15); }
  .contact-card-wa .cc-icon svg{ stroke:#25D366; }
  .contact-card-wa .cc-label,.contact-card-wa .cc-value{ color:#fff; }
  .contact-card-wa:hover{ border-color:rgba(37,211,102,0.35); }

  .contact-card-mail .cc-icon{ background:rgba(37,99,235,0.18); }
  .contact-card-mail .cc-icon svg{ stroke:#60A5FA; }
  .contact-card-mail .cc-label,.contact-card-mail .cc-value{ color:#fff; }
  .contact-card-mail:hover{ border-color:rgba(37,99,235,0.35); }

  /* RIGHT SIDE --- form box */
  .contact-form-box{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:24px; padding:40px 36px;
    position:relative; overflow:hidden;
    backdrop-filter:blur(10px);
  }
  .cfb-glow{
    position:absolute; width:250px; height:250px; border-radius:50%;
    background:radial-gradient(circle,rgba(123,21,53,0.25),transparent 70%);
    top:-80px; right:-60px; pointer-events:none; filter:blur(30px);
  }
  .contact-form-box h3{
    font-size:22px; font-weight:700; color:#fff;
    margin-bottom:6px; position:relative; z-index:1;
  }
  .cfb-sub{ font-size:13.5px; color:rgba(255,255,255,0.5); margin-bottom:28px; position:relative; z-index:1; }

  .contact-form{ position:relative; z-index:1; }
  .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cf-field{ margin-bottom:16px; }
  .cf-field label{ display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,0.6); letter-spacing:.04em; text-transform:uppercase; margin-bottom:7px; }
  .cf-field input,
  .cf-field select,
  .cf-field textarea{
    width:100%; box-sizing:border-box;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:10px; padding:12px 14px;
    font-size:14px; color:#fff;
    font-family:inherit;
    transition:border-color .3s, background .3s;
    outline:none;
  }
  .cf-field input::placeholder,
  .cf-field textarea::placeholder{ color:rgba(255,255,255,0.3); }
  .cf-field select option{ background:#1E293B; color:#fff; }
  .cf-field input:focus,
  .cf-field select:focus,
  .cf-field textarea:focus{
    border-color:rgba(123,21,53,0.6);
    background:rgba(255,255,255,0.1);
  }
  .cf-field textarea{ resize:none; }
  .cf-submit{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--grad); color:#fff;
    border:none; border-radius:12px; padding:15px 24px;
    font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; margin-top:6px;
    transition:transform .3s var(--ease), box-shadow .3s, opacity .3s;
    box-shadow:0 8px 24px -8px rgba(123,21,53,0.5);
  }
  .cf-submit svg{ width:18px; height:18px; stroke:#fff; transition:transform .3s var(--ease); }
  .cf-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(123,21,53,0.6); }
  .cf-submit:hover svg{ transform:translateX(4px); }

  /* Mobile */
  @media(max-width:980px){
    .contact-grid{ grid-template-columns:1fr; gap:48px; }
    .contact-section{ padding:70px 0; }
  }
  @media(max-width:600px){
    .cf-row{ grid-template-columns:1fr; }
    .contact-form-box{ padding:28px 22px; }
  }

  /* ---- WHITE theme (Get in Touch section) ---- */
  .contact-section-light{
    background:#fff;
    border-top:1px solid var(--line);
  }
  .contact-section-light::before{ display:none; }
  .contact-section-light .contact-left h2{ color:var(--ink); }
  .contact-section-light .contact-left p{ color:var(--ink-soft); }
  .contact-section-light .eyebrow{ color:var(--magenta); }
  .contact-section-light .eyebrow::before{ background:var(--grad); }


  /* Contact cards on white */
  .contact-section-light .contact-card{
    background:var(--off-white);
    border-color:var(--line);
  }
  .contact-section-light .contact-card:hover{
    background:#fff;
    box-shadow:var(--shadow);
    border-color:transparent;
  }
  .contact-section-light .cc-label{ color:var(--ink-faint); opacity:1; }
  .contact-section-light .cc-value{ color:var(--ink); }
  .contact-section-light .cc-arrow{ color:var(--ink-soft); }

  /* Form box on white */
  .contact-section-light .contact-form-box{
    background:var(--off-white);
    border-color:var(--line);
    backdrop-filter:none;
  }
  .contact-section-light .contact-form-box h3{ color:var(--ink); }
  .contact-section-light .cfb-sub{ color:var(--ink-soft); }
  .contact-section-light .cf-field label{ color:var(--ink-soft); }
  .contact-section-light .cf-field input,
  .contact-section-light .cf-field select,
  .contact-section-light .cf-field textarea{
    background:#fff;
    border-color:var(--line);
    color:var(--ink);
  }
  .contact-section-light .cf-field input::placeholder,
  .contact-section-light .cf-field textarea::placeholder{ color:var(--ink-faint); }
  .contact-section-light .cf-field select option{ background:#fff; color:var(--ink); }
  .contact-section-light .cf-field input:focus,
  .contact-section-light .cf-field select:focus,
  .contact-section-light .cf-field textarea:focus{
    border-color:var(--magenta);
    background:#fff;
    box-shadow:0 0 0 3px rgba(123,21,53,0.08);
  }
  .contact-section-light .cf-submit{
    background:var(--grad);
    color:#fff;
    box-shadow:0 8px 24px -8px rgba(123,21,53,0.4);
  }
  .contact-section-light .cf-submit svg{ stroke:#fff; }
  .contact-section-light .cf-submit:hover{
    box-shadow:0 14px 32px -8px rgba(123,21,53,0.55);
  }






  /* Decorative brand-color glow blobs */
  .cta-glow{
    position:absolute; border-radius:50%; pointer-events:none;
    filter:blur(60px); opacity:0.55;
  }
  .cta-glow-l{
    width:340px; height:340px;
    background:radial-gradient(circle,#7B1535,transparent 70%);
    top:-100px; left:-80px;
  }
  .cta-glow-r{
    width:300px; height:300px;
    background:radial-gradient(circle,#A8203E,transparent 70%);
    bottom:-80px; right:-60px;
  }
  /* Eyebrow label */
  .cta-eyebrow{
    display:inline-block; font-size:11px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    color:rgba(255,255,255,0.55);
    border:1px solid rgba(255,255,255,0.15);
    padding:5px 16px; border-radius:100px; margin-bottom:20px;
  }
  .cta-band h2{
    font-size:clamp(28px,3.6vw,44px); font-weight:700;
    margin-bottom:16px; line-height:1.15;
    position:relative; z-index:1;
  }
  .cta-band p{
    opacity:.7; margin-bottom:36px; font-size:16px;
    position:relative; z-index:1;
  }
  .cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}

  /* --- Call button: white, clean --- */
  .cta-btn-call{
    display:inline-flex; align-items:center; gap:9px;
    background:#fff; color:#0F172A;
    padding:14px 28px; border-radius:100px;
    font-size:14.5px; font-weight:700;
    border:none; transition:transform .3s var(--ease), box-shadow .3s;
    box-shadow: 0 8px 24px -8px rgba(255,255,255,0.25);
  }
  .cta-btn-call svg{ width:17px; height:17px; stroke:#0F172A; }
  .cta-btn-call:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -8px rgba(255,255,255,0.3); }

  /* --- WhatsApp button: real green --- */
  .cta-btn-wa{
    display:inline-flex; align-items:center; gap:9px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff; padding:14px 28px; border-radius:100px;
    font-size:14.5px; font-weight:700; border:none;
    transition:transform .3s var(--ease), box-shadow .3s;
    box-shadow:0 8px 24px -8px rgba(37,211,102,0.4);
  }
  .cta-btn-wa svg{ width:17px; height:17px; stroke:#fff; }
  .cta-btn-wa:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -8px rgba(37,211,102,0.5); }

  /* --- Email button: glassmorphism outline --- */
  .cta-btn-mail{
    display:inline-flex; align-items:center; gap:9px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(12px);
    color:#fff; padding:14px 28px; border-radius:100px;
    font-size:14.5px; font-weight:700;
    border:1.5px solid rgba(255,255,255,0.2);
    transition:transform .3s var(--ease), background .3s, border-color .3s;
  }
  .cta-btn-mail svg{ width:17px; height:17px; stroke:#fff; }
  .cta-btn-mail:hover{
    background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.4);
    transform:translateY(-3px);
  }





  footer{
    padding:80px 0 40px;
    background:var(--grad);
    color:#fff;
  }
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.2);}
  .foot-brand p{color:rgba(255,255,255,0.75); font-size:14px; margin-top:14px; max-width:280px;}
  .foot-col h5{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:rgba(255,255,255,0.55);}
  .foot-col a{display:block; font-size:14px; color:rgba(255,255,255,0.8); margin-bottom:11px; transition:color .25s;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:12px;}
  .social-row{display:flex; gap:12px;}
  .social-row a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; transition:background .3s, border-color .3s;}
  .social-row a:hover{background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.6);}
  .social-row a:hover svg{stroke:#fff;}
  .social-row svg{width:16px; height:16px; stroke:rgba(255,255,255,0.8);}


  /* whatsapp float --- real WhatsApp green, not brand gradient */
  .wa-float{
    position:fixed; bottom:26px; right:26px; z-index:90;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(37,211,102,.45);
    animation:floaty 4s ease-in-out infinite;
  }
  .wa-float svg{width:26px; height:26px; stroke:var(--white);}

  /* ---------- BACK TO TOP ---------- */
  #backToTop{
    position:fixed;
    bottom:96px;           /* sits above the WA button */
    right:26px;
    z-index:89;
    width:46px; height:46px;
    border-radius:50%;
    background:var(--white);
    border:1.5px solid var(--line);
    box-shadow:0 8px 24px -8px rgba(21,16,13,0.18);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0;
    transform:translateY(16px) scale(0.85);
    transition:opacity .4s var(--ease), transform .4s var(--ease), background .25s, border-color .25s, box-shadow .25s;
    pointer-events:none;
  }
  #backToTop.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  #backToTop svg{
    width:18px; height:18px;
    stroke:var(--ink-soft);
    transition:stroke .25s, transform .3s var(--ease);
  }
  #backToTop:hover{
    background:var(--ink);
    border-color:transparent;
    box-shadow:0 12px 28px -10px rgba(21,16,13,0.35);
  }
  #backToTop:hover svg{
    stroke:var(--white);
    transform:translateY(-2px);
  }


  /* ------ NAV: medium screens --- tighten before collapse ------ */
  @media (max-width:1100px){
    .nav-links{ gap:22px; }
    .nav-links a{ font-size:13px; }
    nav{ padding:20px 24px; }
    /* Hide "Become a Broker" from nav --- still in hamburger menu */
    .nav-links a[href="broker-registration.html"]{ display:none; }
    /* Shrink Get in Touch button */
    nav > .btn-grad{ font-size:13px; padding:10px 18px; }
  }

  @media (max-width:980px){

    .hero-grid, .about-grid, .presence-grid{grid-template-columns:1fr;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .property-grid{grid-template-columns:repeat(2,1fr);}
    .value-grid, .why-grid, .expertise-grid{grid-template-columns:repeat(2,1fr);}
    .process-grid{grid-template-columns:repeat(3,1fr); row-gap:40px;}
    .process-track{display:none;}
    .stats-row{grid-template-columns:repeat(2,1fr); gap:34px;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .nav-links{display:none;}
    .menu-toggle{display:flex; align-items:center; justify-content:center;}
    /* hide Get in Touch CTA on mobile to avoid nav clutter */
    nav > .btn-grad{display:none;}
    .founder, .cta-band{padding:44px 26px;}
    /* Fix float cards --- pull inside the box on tablet */
    .fc-1{top:4%; left:0%;}
    .fc-2{bottom:6%; right:0%;}
    /* Map box fixed height on tablet */
    .map-box{aspect-ratio:unset; height:300px;}
  }
  @media (max-width:600px){
    .service-grid, .value-grid, .why-grid, .expertise-grid, .process-grid, .property-grid{grid-template-columns:1fr;}
    .stats-row{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .hero{padding:130px 0 60px;}
    .hero h1{font-size:clamp(34px,9vw,54px);}
    .hero p.lead{font-size:16px;}
    section{padding:70px 0;}
    .wrap{padding:0 20px;}
    nav{padding:16px 20px;}
    .skyline-wrap{height:240px;}
    /* Float cards --- inside the building frame on mobile */
    .float-card{padding:8px 12px; gap:8px; border-radius:12px;}
    .float-card .fc-num{font-size:13px;}
    .float-card .fc-label{font-size:10px;}
    .float-card svg{width:16px; height:16px;}
    .fc-1{top:2%; left:0%;}
    .fc-2{bottom:4%; right:0%;}
    .section-head{margin-bottom:42px;}
    .section-head h2{font-size:clamp(26px,7vw,36px);}
    .stats{padding:40px 0;}
    .stats-row{gap:20px;}
    .stat-num{font-size:clamp(26px,8vw,38px);}
    .property-grid{grid-template-columns:1fr;}
    .cta-band{padding:40px 22px;}
    .cta-band h2{font-size:clamp(22px,6vw,32px);}
    .cta-btns{flex-direction:column; align-items:stretch;}
    .cta-btns .btn{text-align:center; justify-content:center;}
    .foot-bottom{flex-direction:column; text-align:center;}
    /* Process --- 2-col grid on mobile, centered steps */
    .process-grid{grid-template-columns:1fr 1fr; gap:20px 16px;}
    .process-step{text-align:center; display:flex; flex-direction:column; align-items:center;}
    .process-dot{width:46px; height:46px; font-size:14px; margin-bottom:14px;}
    .about-grid{gap:36px;}
    .presence-grid{gap:36px;}
    /* Map box fixed height on mobile */
    .map-box{aspect-ratio:unset; height:240px;}
    .founder{padding:32px 20px 24px; border-radius: 20px;}
    .founder-quote{font-size:clamp(16.5px,4.5vw,20px); line-height:1.5; margin-bottom: 20px;}
    .founder-meta{padding-top:16px;}
    .founder-logo-img{height:30px;}
    .founder-meta .fn{font-size:14px;}
    .founder-meta .fr{font-size:12px;}



    .service-grid{grid-template-columns:1fr;}
    footer{padding:60px 0 30px;}
    .mini-footer{padding:30px 0 40px;}
  }

/* ============================================================
   SHARED SUB-PAGE COMPONENTS (Landing / Broker Registration)
   ============================================================ */

  .page-hero{
    background:var(--off-white);
    padding:170px 0 70px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .page-hero .eyebrow{justify-content:center;}
  .page-hero h1{
    font-size:clamp(32px,4.4vw,52px); font-weight:700; margin:16px auto 14px; line-height:1.08; max-width:720px;
  }
  .page-hero p{color:var(--ink-soft); font-size:16.5px; max-width:520px; margin:0 auto;}

  .form-shell{
    max-width:660px; margin:-30px auto 100px; padding:0 32px; position:relative; z-index:2;
  }
  .form-card{
    background:var(--white); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow);
    padding:44px 40px;
  }

  /* progress dots */
  .step-track{display:flex; align-items:center; gap:8px; margin-bottom:34px;}
  .step-track .seg{flex:1; height:4px; border-radius:100px; background:var(--line); overflow:hidden;}
  .step-track .seg i{display:block; height:100%; width:0%; background:var(--grad); transition:width .5s var(--ease);}
  .step-track .seg.done i{width:100%;}
  .step-track .seg.active i{width:50%;}
  .step-label{font-size:12.5px; color:var(--ink-faint); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px;}

  .form-step{display:none;}
  .form-step.active{display:block; animation:stepIn .5s var(--ease);}
  @keyframes stepIn{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:translateX(0);}}

  .form-step h3{font-size:24px; font-weight:700; margin-bottom:8px;}
  .form-step .sub{color:var(--ink-soft); font-size:14.5px; margin-bottom:28px;}

  .option-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px;}
  .option-grid.two{grid-template-columns:repeat(2,1fr);}
  .option-card{
    border:1.5px solid var(--line); border-radius:16px; padding:22px 14px; text-align:center; cursor:pointer;
    transition:all .3s var(--ease); background:var(--white); position:relative;
  }
  .option-card svg{width:26px; height:26px; stroke:var(--ink-soft); margin:0 auto 12px; transition:stroke .3s;}
  .option-card .ot{font-weight:700; font-size:14.5px;}
  .option-card .os{font-size:12px; color:var(--ink-soft); margin-top:4px;}
  .option-card:hover{border-color:var(--magenta); transform:translateY(-3px);}
  .option-card.selected{border-color:transparent; background:var(--grad); box-shadow:0 14px 28px -14px rgba(123,21,53,.5);}
  .option-card.selected svg{stroke:var(--white);}
  .option-card.selected .ot, .option-card.selected .os{color:var(--white);}

  .field{margin-bottom:20px;}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);}
  .field .opt{font-weight:400; color:var(--ink-faint); font-size:12px;}
  .field input, .field select, .field textarea{
    width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:12px;
    font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:var(--off-white);
    transition:border-color .3s, background .3s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--magenta); background:var(--white);
  }
  .field textarea{resize:vertical; min-height:90px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

  .check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:8px;}
  .check-card{
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px;
    padding:14px 16px; cursor:pointer; transition:all .3s var(--ease); font-size:14px; font-weight:500;
  }
  .check-card:hover{border-color:var(--magenta);}
  .check-card input{accent-color:var(--magenta); width:16px; height:16px;}
  .check-card.selected{border-color:var(--magenta); background:var(--magenta-tint);}

  .step-nav{display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px;}
  .step-nav .btn{flex:1; justify-content:center;}
  .btn[disabled]{opacity:.35; pointer-events:none;}

  .success-view{text-align:center; padding:20px 0 6px;}
  .success-icon{
    width:74px; height:74px; border-radius:50%; background:var(--grad); display:flex; align-items:center;
    justify-content:center; margin:0 auto 22px; animation:popIn .5s var(--ease);
  }
  .success-icon svg{width:34px; height:34px; stroke:var(--white);}
  @keyframes popIn{0%{transform:scale(0);} 70%{transform:scale(1.1);} 100%{transform:scale(1);}}
  .success-view h3{font-size:24px; font-weight:700; margin-bottom:10px;}
  .success-view p{color:var(--ink-soft); font-size:14.5px; margin-bottom:26px; max-width:400px; margin-left:auto; margin-right:auto;}
  .summary-box{
    background:var(--off-white); border-radius:14px; padding:18px 20px; text-align:left; margin-bottom:26px; font-size:13.5px;
  }
  .summary-box div{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft);}
  .summary-box div:last-child{border-bottom:none;}
  .summary-box b{color:var(--ink);}

  .mini-footer{text-align:center; padding:40px 0 60px; font-size:13px; color:var(--ink-faint);}
  .mini-footer a{color:var(--magenta); font-weight:600;}

  @media (max-width:600px){
    .form-card{padding:30px 22px;}
    .option-grid{grid-template-columns:1fr 1fr;}
    .option-grid.three-mobile-1{grid-template-columns:1fr;}
    .field-row, .check-grid{grid-template-columns:1fr;}
    .page-hero{padding:140px 0 60px;}
  }

/* ============================================================
   PROFESSIONAL ANIMATION LAYER
   ============================================================ */

/* ---------- SCROLL PROGRESS BAR ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:9999;
  transition:width .1s linear;
  border-radius:0 100px 100px 0;
}

/* ---------- HERO ANIMATED BLOBS ---------- */
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
}
.hero-blob-1{
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(123,21,53,0.13), transparent 70%);
  top:-100px; right:-100px;
  animation:blobFloat1 12s ease-in-out infinite;
}
.hero-blob-2{
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(168,32,62,0.11), transparent 70%);
  bottom:-80px; left:-60px;
  animation:blobFloat2 15s ease-in-out infinite;
}
@keyframes blobFloat1{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-30px,40px) scale(1.08);}
  66%{transform:translate(20px,-30px) scale(0.94);}
}
@keyframes blobFloat2{
  0%,100%{transform:translate(0,0) scale(1);}
  40%{transform:translate(40px,-30px) scale(1.06);}
  70%{transform:translate(-20px,20px) scale(0.96);}
}
.hero > .wrap{ position:relative; z-index:1; }

/* ---------- REVEAL VARIANTS ---------- */
.reveal-left{opacity:0; transform:translateX(-36px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-left.in{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(36px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-right.in{opacity:1; transform:translateX(0);}
.reveal-scale{opacity:0; transform:scale(0.92); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-scale.in{opacity:1; transform:scale(1);}

/* ---------- 3D TILT CARDS ---------- */
.tilt-card{
  transform-style:preserve-3d;
  transition:transform .15s ease, box-shadow .4s var(--ease);
  will-change:transform;
}
.tilt-card:hover{box-shadow:0 28px 60px -20px rgba(21,16,13,0.22);}

/* ---------- MAGNETIC BUTTON ---------- */
.btn-mag{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }

/* ---------- STATS SHIMMER BACKGROUND ---------- */
.stats{
  position:relative; overflow:hidden;
}
.stats::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(168,32,62,0.06) 50%, transparent 100%);
  background-size:200% 100%;
  animation:statsShimmer 4s ease-in-out infinite;
}
@keyframes statsShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ---------- STAT COUNTER PULSE ---------- */
.stat-num.done{
  animation:statLockIn .6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes statLockIn{
  0%{transform:scale(0.96); filter:brightness(0.95);}
  60%{transform:scale(1.05); filter:brightness(1.15);}
  100%{transform:scale(1); filter:brightness(1);}
}

/* ---------- ENHANCED SERVICE CARD ICON ---------- */
.service-card:hover .icon-badge svg{
  animation:iconBounce .5s var(--ease);
}
@keyframes iconBounce{
  0%{transform:translateY(0) rotate(0deg);}
  30%{transform:translateY(-6px) rotate(-8deg);}
  60%{transform:translateY(-2px) rotate(4deg);}
  100%{transform:translateY(0) rotate(0deg);}
}

/* ---------- EXPERTISE CARD GLOW ON HOVER ---------- */
.expertise-card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  position:relative;
}
.expertise-card::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  background:var(--grad); opacity:0;
  transition:opacity .4s; z-index:-1; filter:blur(16px);
}
.expertise-card:hover{transform:translateY(-8px); box-shadow:0 24px 50px -18px rgba(123,21,53,0.2);}
.expertise-card:hover::after{opacity:0.18;}

/* ---------- VALUE CARD BORDER GLOW ---------- */
.value-card{
  position:relative; overflow:hidden;
}
.value-card::before{
  content:''; position:absolute; top:-1px; left:-100%;
  width:60%; height:2px; background:var(--grad);
  transition:left .5s var(--ease);
}
.value-card:hover::before{left:120%;}

  /* WhatsApp float pulse rings --- match WA green */
  .wa-float::before, .wa-float::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(37,211,102,0.4);
    animation:waPulse 2.4s ease-out infinite;
  }
  .wa-float::after{animation-delay:1.2s;}
  @keyframes waPulse{
    0%{transform:scale(1); opacity:1;}
    100%{transform:scale(1.7); opacity:0;}
  }

/* ---------- PROPERTY CARD IMAGE OVERLAY ---------- */
.property-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,16,13,0.18), transparent 50%);
  transition:opacity .4s;
}
.property-card:hover .property-img::after{opacity:0;}

/* ---------- HERO CTA BUTTON SHIMMER ---------- */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{
  content:''; position:absolute;
  top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease);
}
.btn-primary:hover::after{left:160%;}

/* ---------- SECTION HEADING UNDERLINE ANIMATE ---------- */
.section-head h2{position:relative; display:inline-block;}

/* ---------- PROCESS DOT GLOW ---------- */
.process-step.in .process-dot{
  box-shadow:0 0 0 6px rgba(123,21,53,0.15), 0 0 0 12px rgba(168,32,62,0.08);
}

/* ---------- FOOTER LINK HOVER ---------- */
.foot-col a{
  position:relative; padding-left:0;
  transition:color .25s, padding-left .25s var(--ease);
}
.foot-col a:hover{padding-left:8px;}



/* ---------- CTA BAND FLOATING ORB ---------- */
.cta-band::after{
  content:''; position:absolute;
  width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,0.07);
  bottom:-80px; right:-60px;
  animation:orbFloat 8s ease-in-out infinite;
}
.cta-band::before{
  content:''; position:absolute;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,0.05);
  top:-60px; left:-40px;
  animation:orbFloat 10s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(20px,-20px);}
}

/* ---------- MOBILE: DISABLE HEAVY ANIMATIONS ---------- */
@media (max-width:600px){
  .tilt-card{transform:none !important;}
  .hero-blob{display:none;}
  .expertise-card::after{display:none;}

  /* ------ NAV ------ */
  nav > .btn-grad { display: none; }           /* hide "Get in Touch" in nav on mobile */

  /* ------ HERO ------ */
  .hero-lines { display: none; }               /* hide bullet lines --- too cramped */
  .hero-ctas { flex-direction: column; gap: 12px; }
  .hero-ctas .btn { text-align: center; justify-content: center; }

  /* ------ PROPERTY FILTERS ------ */
  .prop-filters { gap: 8px; }
  .prop-filter  { font-size: 12px; padding: 7px 14px; }

  /* ------ CONTACT SECTION ------ */
  .contact-cards { gap: 10px; }
  .contact-card  { padding: 14px 16px; }
  .cc-value      { font-size: 13px; }

  /* ------ PRESENCE MAP ------ */
  .map-box { min-height: 220px; }

  /* ------ FOOTER ------ */
  .footer-wave-wrap { display: none; }         /* wave not needed --- footer has its own bg */
  .social-row { justify-content: center; }
  .foot-brand { text-align: center; }
  .foot-brand .social-row { margin: 16px auto 0; }
  .foot-col a { font-size: 13px; }
  .foot-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* ------ PROCESS ------ */
  .process-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .process-step { text-align: center; display: flex; flex-direction: column; align-items: center; }

  /* ------ FOUNDER ------ */
  .founder-meta { flex-direction: column; align-items: center; text-align: center; gap: 12px; }

  /* ------ SECTION ACCENT LINES ------ hide on mobile, too subtle to matter ------ */
  #properties::after, #about::after, #services::after,
  #expertise::after, #presence::after { display: none; }

  /* ------ STATS ------ */
  .stat-num  { font-size: clamp(24px, 7vw, 36px); }
  .stat-label{ font-size: 12px; }

  /* ------ FORM PAGES (landing / broker) ------ */
  .form-shell { padding: 0 16px; margin-bottom: 60px; }
  .cta-btns   { flex-direction: column; gap: 10px; }
  .cta-btns .btn { justify-content: center; text-align: center; }
}

/* ------ VERY SMALL SCREENS (< 380px) ------ */
@media (max-width: 380px) {
  .hero h1   { font-size: 28px; }
  .stat-num  { font-size: 22px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .btn       { font-size: 13px; padding: 11px 20px; }
  .prop-filters { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------
   MOBILE FOOTER REDESIGN  (--- 600px)
   --------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {

  footer { padding: 44px 0 20px; }

  /* 2-col grid: brand spans full top, links side-by-side, contact full bottom */
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   brand"
      "explore company"
      "contact contact";
    gap: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  /* ------ Brand ------ */
  .foot-brand {
    grid-area: brand;
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 24px;
  }
  .foot-brand .logo img { height: 34px; }
  .foot-brand p {
    font-size: 12.5px;
    max-width: 240px;
    margin: 10px auto 0;
    line-height: 1.55;
  }
  .foot-brand .social-row {
    justify-content: center;
    margin-top: 14px !important;
    gap: 10px;
  }

  /* ------ Explore (left) ------ */
  .foot-col:nth-child(2) {
    grid-area: explore;
    padding-right: 10px;
    padding-bottom: 24px;
  }

  /* ------ Company (right) ------ */
  .foot-col:nth-child(3) {
    grid-area: company;
    padding-left: 10px;
    padding-bottom: 24px;
  }

  /* ------ Contact (full width, separated) ------ */
  .foot-col:nth-child(4) {
    grid-area: contact;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* All columns base */
  .foot-col h5 { font-size: 11px; margin-bottom: 12px; }
  .foot-col a  { font-size: 13px; margin-bottom: 10px; }

  /* ------ Footer bottom ------ */
  .foot-bottom {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 11.5px;
  }
}