:root{
    --green-dark:#0B5D3B;
    --green:#16A34A;
    --green-light:#E8F8EF;
    --green-soft:#F4FBF7;
    --white:#FFFFFF;
    --ink:#0F1E17;
    --muted:#5B6B63;
    --border:#E1EFE6;
    --amber:#F59E0B;
    --blue:#2563EB;
    --teal:#0D9488;
    --purple:#7C3AED;
    --pink:#DB2777;
    --indigo:#4F46E5;
    --shadow: 0 10px 30px rgba(11,93,59,0.10);
    --radius: 14px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family:'Poppins', sans-serif; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }
  .container{ max-width:1180px; margin:0 auto; padding:0 24px; }
  .section{ padding:88px 0; }
  .section--tight{ padding:64px 0; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase;
    color: var(--green-dark);
    background: var(--green-light);
    border:1px solid rgba(22,163,74,0.25);
    padding:7px 14px; border-radius:999px;
  }
  .section-title{
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight:700;
    margin:16px 0 14px;
    color: var(--ink);
  }
  .section-sub{
    color: var(--muted);
    font-size:16px;
    max-width:620px;
  }
  .section-head{ text-align:center; margin-bottom:52px; }
  .section-head .section-sub{ margin:0 auto; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:'Inter', sans-serif;
    font-weight:600; font-size:14.5px;
    padding:14px 26px;
    border-radius:10px;
    border:2px solid transparent;
    cursor:pointer;
    transition: all .22s ease;
    white-space:nowrap;
  }
  .btn--primary{ background: var(--green); color:#fff; box-shadow: var(--shadow); }
  .btn--primary:hover{ background: var(--green-dark); transform: translateY(-2px); }
  .btn--whatsapp{ background:#25D366; color:#fff; }
  .btn--whatsapp:hover{ background:#1DA851; transform: translateY(-2px); }
  .btn--ghost{ background:#fff; color: var(--green-dark); border-color: var(--green); }
  .btn--ghost:hover{ background: var(--green-light); }
  .btn--light{ background:#fff; color: var(--green-dark); }
  .btn--light:hover{ background: var(--green-light); }
  .btn svg{ flex-shrink:0; }



  .brand {
  display: flex;
  align-items: center;
}

.brand__logo {
  height: clamp(32px, 4vw, 45px);
  width: auto;
  display: block;
  object-fit: contain;
}
  /* ---------------- Navbar ---------------- */
  .navbar{
    position: sticky; top:0; z-index:100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
  }
  .navbar__row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
    max-width:1180px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color: var(--green-dark); }
  .brand__mark{
    width:38px; height:38px; border-radius:10px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:16px;
  }
  .nav-links{ display:flex; align-items:center; gap:30px; }
  .nav-links a{ font-size:14.5px; font-weight:500; color: var(--ink); transition: color .2s; }
  .nav-links a:hover{ color: var(--green-dark); }
  .navbar__actions{ display:flex; align-items:center; gap:10px; }
  .nav-phone{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:600; color: var(--green-dark);
  }
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:38px; height:38px; align-items:center; justify-content:center;
  }
  .mobile-menu{
    display:none;
    flex-direction:column;
    background:#fff;
    border-top:1px solid var(--border);
    padding: 10px 24px 20px;
  }
  .mobile-menu a{
    padding:12px 0; border-bottom:1px solid var(--border);
    font-size:15px; font-weight:500;
  }
  .mobile-menu .btn{ margin-top:14px; width:100%; }

  @media (max-width: 860px){
    .nav-links, .nav-phone{ display:none; }
    .nav-toggle{ display:flex; }
    .mobile-menu.is-open{ display:flex; }
  }

  /* ---------------- Hero ---------------- */
  .hero{
    position:relative;
    background: linear-gradient(180deg, var(--green-soft) 0%, #ffffff 100%);
    overflow:hidden;
  }
  .hero__blob{
    position:absolute; top:-120px; right:-140px;
    width:520px; height:520px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(22,163,74,0.18), rgba(22,163,74,0) 70%);
    pointer-events:none;
  }
  .hero__grid{
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap:50px; align-items:center;
    padding: 76px 0 60px;
    position:relative; z-index:1;
  }
  .hero__badge{ margin-bottom:20px; }
  .hero h1{
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight:800; line-height:1.12; color: var(--ink);
  }
  .hero h1 span{ color: var(--green); }
  .hero p{
    margin-top:20px; font-size:17px; color: var(--muted); max-width:520px;
  }
  .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
  .hero__trust{
    display:flex; align-items:center; gap:22px; margin-top:40px; flex-wrap:wrap;
  }
  .hero__trust-item{ display:flex; align-items:center; gap:10px; }
  .hero__trust-num{ font-size:22px; font-weight:800; color: var(--green-dark); }
  .hero__trust-label{ font-size:12.5px; color: var(--muted); font-weight:500; }

  /* .hero__art{
    position:relative;
    display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
  } */
   .hero__art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}

  .art-card{
    background:#fff; border:1px solid var(--border); border-radius:16px;
    padding:22px; box-shadow: var(--shadow);
    display:flex; flex-direction:column; gap:10px;
    height: 200px;

  }
  .art-card:nth-child(2){ margin-top:2px; }
  .art-card:nth-child(4){ margin-top:-2px; }
  .art-icon{
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
  }
  .art-card h4{ font-size:14.5px; font-weight:700; }
  .art-card p{ font-size:12.5px; color: var(--muted); margin:0; }

  @media (max-width: 900px){
    .hero__grid{ grid-template-columns:1fr; padding-top:44px; }
    .hero__art{ margin-top:20px; }
  }

  /* ---------------- Stats strip ---------------- */
  .stats-strip{
    background: var(--green-dark);
    padding: 38px 0;
  }
  .stats-strip .container{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; text-align:center;
  }
  .stat{ color:#fff; }
  .stat__num{ font-size: clamp(24px, 3vw, 32px); font-weight:800; }
  .stat__label{ font-size:12.5px; color: rgba(255,255,255,0.72); margin-top:4px; text-transform:uppercase; letter-spacing:0.06em; }
  @media (max-width: 700px){
    .stats-strip .container{ grid-template-columns: repeat(2, 1fr); row-gap:28px; }
  }

  /* ---------------- Services ---------------- */
  .services-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
  }
  .service-card{
    background:#fff; border:1px solid var(--border); border-radius:16px;
    padding:28px 24px; transition: all .25s ease;
  }
  .service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
  .service-icon{
    width:52px; height:52px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .service-card h3{ font-size:17px; font-weight:700; margin-bottom:8px; }
  .service-card p{ font-size:14px; color: var(--muted); }
  @media (max-width: 1000px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } }

  /* ---------------- About / property types ---------------- */
  .about-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
  }
  .about-list{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
  .about-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--ink); }
  .check{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    background: var(--green-light); color: var(--green-dark);
    display:flex; align-items:center; justify-content:center; margin-top:2px;
  }
  .property-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  .property-card{
    background: var(--green-soft); border:1px solid var(--border);
    border-radius:16px; padding:26px 20px; text-align:center;
  }
  .property-card .p-icon{
    width:48px; height:48px; margin:0 auto 12px; border-radius:12px;
    background:#fff; display:flex; align-items:center; justify-content:center; color: var(--green-dark);
  }
  .property-card h4{ font-size:15.5px; font-weight:700; }
  .property-card p{ font-size:12.5px; color: var(--muted); margin-top:4px; }
  @media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; gap:32px; } }

  /* ---------------- Process ---------------- */
  .process-steps{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; counter-reset: step;
  }
  .step{ position:relative; padding-top:14px; }
  .step__num{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background: var(--green); color:#fff; font-weight:800; font-size:15px;
    margin-bottom:16px;
  }
  .step h4{ font-size:16px; font-weight:700; margin-bottom:6px; }
  .step p{ font-size:13.5px; color: var(--muted); }
  @media (max-width: 860px){ .process-steps{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .process-steps{ grid-template-columns: 1fr; } }

  /* ---------------- Testimonials ---------------- */
  .testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
  .testi-card{
    background: var(--green-soft); border:1px solid var(--border);
    border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:14px;
  }
  .testi-stars{ color: var(--amber); font-size:15px; letter-spacing:2px; }
  .testi-card p{ font-size:14.5px; color: var(--ink); }
  .testi-name{ font-size:13.5px; font-weight:700; color: var(--green-dark); }
  .testi-role{ font-size:12px; color: var(--muted); }
  @media (max-width: 860px){ .testi-grid{ grid-template-columns:1fr; } }

  /* ---------------- CTA banner ---------------- */
  .cta-banner{
    background: linear-gradient(120deg, var(--green-dark), var(--green));
    border-radius:24px;
    padding:56px 40px;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    flex-wrap:wrap;
    color:#fff;
  }
  .cta-banner h2{ font-size: clamp(22px, 3vw, 30px); font-weight:800; }
  .cta-banner p{ color: rgba(255,255,255,0.85); margin-top:8px; max-width:420px; }
  .cta-banner__actions{ display:flex; gap:14px; flex-wrap:wrap; }

  /* ---------------- Contact ---------------- */
  .contact-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:start;
  }
  .contact-cards{ display:flex; flex-direction:column; gap:16px; }
  .contact-card{
    display:flex; align-items:center; gap:16px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:20px; box-shadow: var(--shadow);
  }
  .contact-card__icon{
    width:48px; height:48px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .contact-card h4{ font-size:15px; font-weight:700; }
  .contact-card a, .contact-card span.value{ font-size:14px; color: var(--muted); }
  .contact-card a:hover{ color: var(--green-dark); }

  .contact-form{
    background:#fff; border:1px solid var(--border); border-radius:18px;
    padding:32px; box-shadow: var(--shadow);
  }
  .contact-form h3{ font-size:19px; font-weight:700; margin-bottom:6px; }
  .contact-form > p{ font-size:13.5px; color: var(--muted); margin-bottom:22px; }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:14px; }
  .form-group{ display:flex; flex-direction:column; gap:6px; }
  .form-group.full{ grid-column: 1 / -1; }
  .form-group label{ font-size:12.5px; font-weight:600; color: var(--ink); }
  .form-group input, .form-group select, .form-group textarea{
    border:1px solid var(--border); border-radius:9px; padding:12px 13px;
    font-family:'Inter', sans-serif; font-size:14px; color: var(--ink);
    background: #FAFDFB;
    outline:none;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    border-color: var(--green);
  }
  .form-group textarea{ resize: vertical; min-height:90px; }
  .contact-form .btn{ width:100%; margin-top:6px; }
  @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

  /* ---------------- Footer ---------------- */
  footer{ background: var(--ink); color: rgba(255,255,255,0.75); padding: 56px 0 24px; }
  .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; }
  .footer-brand .brand{ color:#fff; }
  .footer-brand p{ font-size:13.5px; margin-top:14px; color: rgba(255,255,255,0.55); max-width:280px; }
  footer h5{ color:#fff; font-size:14px; font-weight:700; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.05em; }
  footer ul li{ margin-bottom:10px; }
  footer ul li a{ font-size:13.5px; color: rgba(255,255,255,0.6); }
  footer ul li a:hover{ color:#fff; }
  .footer-bottom{
    margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:12.5px; color: rgba(255,255,255,0.45);
  }
  @media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

  /* ---------------- Floating WhatsApp ---------------- */
  .float-whatsapp{
    position:fixed; bottom:24px; right:24px; z-index:200;
    width:60px; height:60px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    animation: pulse 2.4s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
    70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }