:root{
    --ink:#0B1E2D;
    --ink-2:#122C42;
    --ink-3:#16374F;
    --ivory:#F6F3EC;
    --ivory-2:#EEE8DA;
    --gold:#C79A2E;
    --gold-soft:#E4C674;
    --emerald:#1F4D3D;
    --emerald-soft:#2F6B54;
    --text-dark:#132030;
    --muted:#5C6B75;
    --muted-light:#9FB0C2;
    --line:rgba(199,154,46,0.28);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter', sans-serif;
    background:var(--ivory);
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3, .font-display{
    font-family:'Fraunces', serif;
    letter-spacing:-0.01em;
  }
  .font-mono{ font-family:'IBM Plex Mono', monospace; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  ::selection{ background:var(--gold); color:var(--ink); }

  /* ---------- Layout helpers ---------- */
  .wrap{ max-width:1240px; margin:0 auto; padding-left:24px; padding-right:24px; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:currentColor;
    display:inline-block;
  }

  /* ---------- Blueprint texture (signature motif) ---------- */
  .blueprint{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 20%, black 35%, transparent 78%);
    mask-image:radial-gradient(ellipse 80% 65% at 50% 20%, black 35%, transparent 78%);
    pointer-events:none;
  }
  .corner-tick{
    position:absolute; width:26px; height:26px; pointer-events:none;
  }
  .corner-tick::before, .corner-tick::after{
    content:""; position:absolute; background:var(--gold-soft);
  }
  .corner-tick::before{ width:26px; height:1px; top:0; left:0; }
  .corner-tick::after{ width:1px; height:26px; top:0; left:0; }
  .tl{ top:22px; left:22px; }
  .tr{ top:22px; right:22px; transform:rotate(90deg); }
  .bl{ bottom:22px; left:22px; transform:rotate(-90deg); }
  .br{ bottom:22px; right:22px; transform:rotate(180deg); }

  /* ---------- Nav ---------- */
  #nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    transition:all .4s cubic-bezier(.2,.8,.2,1);
    padding:22px 0;
  }
  #nav.scrolled{
    padding:12px 0;
    background:rgba(11,30,45,0.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(199,154,46,0.18);
  }
  .nav-link{
    position:relative; color:var(--ivory); opacity:0.82;
    font-size:14.5px; font-weight:500; text-decoration:none;
    transition:opacity .25s ease;
  }
  .nav-link:hover{ opacity:1; }
  .nav-link::after{
    content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0%;
    background:var(--gold-soft); transition:width .3s ease;
  }
  .nav-link:hover::after{ width:100%; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:999px; font-weight:600; font-size:14.5px;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
    white-space:nowrap;
  }
  .btn-gold{
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    color:#241a04;
    box-shadow:0 8px 24px -8px rgba(199,154,46,0.55);
  }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(199,154,46,0.65); }
  .btn-outline{
    border-color:rgba(246,243,236,0.35); color:var(--ivory); background:transparent;
  }
  .btn-outline:hover{ border-color:var(--gold-soft); background:rgba(246,243,236,0.06); transform:translateY(-2px); }
  .btn-dark{
    background:var(--ink); color:var(--ivory);
  }
  .btn-dark:hover{ background:var(--ink-2); transform:translateY(-2px); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; background:var(--ink); color:var(--ivory);
    padding-top:180px; padding-bottom:0; overflow:hidden;
  }
  .hero-glow{
    position:absolute; width:640px; height:640px; border-radius:50%;
    background:radial-gradient(circle, rgba(199,154,46,0.22), transparent 70%);
    top:-220px; right:-160px; pointer-events:none;
  }
  .hero-glow-2{
    position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(47,107,84,0.28), transparent 70%);
    bottom:-260px; left:-160px; pointer-events:none;
  }

  .deed-card{
    background:rgba(246,243,236,0.06);
    border:1px solid rgba(246,243,236,0.14);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-radius:20px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  }

  .seal{
    width:56px; height:56px; border-radius:50%;
    border:1.5px dashed var(--gold-soft);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }

  /* ---------- Ticker ---------- */
  .ticker-track{
    display:flex; width:max-content;
    animation:scrollTicker 34s linear infinite;
  }
  @keyframes scrollTicker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .ticker-item{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--muted-light); padding:0 28px; white-space:nowrap;
    display:flex; align-items:center; gap:28px;
  }
  .ticker-item span.dot{ color:var(--gold-soft); }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.in{ transition-delay:.08s; }
  .reveal-delay-2.in{ transition-delay:.16s; }
  .reveal-delay-3.in{ transition-delay:.24s; }
  .reveal-delay-4.in{ transition-delay:.32s; }

  /* ---------- Cards ---------- */
  .service-card{
    background:#fff;
    border:1px solid rgba(19,32,48,0.08);
    border-radius:18px; padding:34px 28px;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
    position:relative; overflow:hidden;
  }
  .service-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--emerald-soft), var(--gold-soft));
    transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 50px -20px rgba(11,30,45,0.22);
    border-color:rgba(199,154,46,0.35);
  }
  .service-card:hover::before{ transform:scaleX(1); }
  .service-icon{
    width:52px; height:52px; border-radius:14px;
    background:linear-gradient(135deg, var(--ink-2), var(--ink));
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-soft); margin-bottom:20px;
    transition:transform .4s ease;
  }
  .service-card:hover .service-icon{ transform:rotate(-6deg) scale(1.06); }

  .card-link{
    display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px;
    color:var(--emerald); text-decoration:none; margin-top:18px;
  }
  .card-link svg{ transition:transform .3s ease; }
  .card-link:hover svg{ transform:translateX(4px); }

  /* ---------- Property cards ---------- */
  .prop-card{
    background:#fff; border-radius:18px; overflow:hidden;
    border:1px solid rgba(19,32,48,0.08);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  }
  .prop-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -22px rgba(11,30,45,0.28); }
  .prop-img-wrap{ position:relative; overflow:hidden; height:230px; }
  .prop-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
  .prop-card:hover .prop-img-wrap img{ transform:scale(1.08); }
  .prop-tag{
    position:absolute; top:14px; left:14px;
    background:rgba(11,30,45,0.75); backdrop-filter:blur(6px);
    color:var(--gold-soft); font-family:'IBM Plex Mono',monospace;
    font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:999px;
  }
  .prop-price{
    position:absolute; bottom:14px; right:14px;
    background:var(--ivory); color:var(--ink);
    font-weight:700; font-size:14.5px; padding:7px 14px; border-radius:10px;
  }

  /* ---------- Why choose us ---------- */
  .why-item{
    display:flex; gap:18px; align-items:flex-start;
    padding:26px 0; border-top:1px solid rgba(246,243,236,0.12);
  }
  .why-item:last-child{ border-bottom:1px solid rgba(246,243,236,0.12); }
  .why-icon{
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(228,198,116,0.45);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    color:var(--gold-soft);
  }

  /* ---------- Counters ---------- */
  .counter-num{
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(34px,5vw,52px);
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- Form ---------- */
  .field{
    width:100%; padding:15px 16px; border-radius:12px;
    border:1px solid rgba(19,32,48,0.14); background:#fff;
    font-family:'Inter',sans-serif; font-size:15px; color:var(--text-dark);
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .field:focus{
    outline:none; border-color:var(--emerald-soft);
    box-shadow:0 0 0 4px rgba(31,77,61,0.12);
  }
  label.field-label{
    font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--muted); margin-bottom:8px; display:block;
  }

  /* ---------- Floating WhatsApp ---------- */
  .float-btn{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:58px; height:58px; border-radius:50%;
    background:#22C35E; display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px -8px rgba(34,195,94,0.6);
    text-decoration:none; animation:pulseBtn 2.6s ease-in-out infinite;
    transition:transform .3s ease;
  }
  .float-btn:hover{ transform:scale(1.08); }
  @keyframes pulseBtn{
    0%,100%{ box-shadow:0 12px 30px -8px rgba(34,195,94,0.6); }
    50%{ box-shadow:0 12px 34px -6px rgba(34,195,94,0.85), 0 0 0 8px rgba(34,195,94,0.12); }
  }

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; left:50%; bottom:32px; transform:translate(-50%, 24px);
    background:var(--ink); color:var(--ivory); padding:16px 26px; border-radius:12px;
    font-size:14.5px; font-weight:500; box-shadow:0 20px 40px -10px rgba(0,0,0,0.4);
    opacity:0; pointer-events:none; transition:all .4s cubic-bezier(.2,.8,.2,1);
    z-index:200; display:flex; align-items:center; gap:10px;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }

  /* mobile nav */
  #mobileNav{
    position:fixed; inset:0; z-index:99; background:var(--ink);
    transform:translateY(-100%); transition:transform .5s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  }
  #mobileNav.open{ transform:translateY(0); }

  @media (max-width:768px){
    .hero{ padding-top:150px; }
  }

/* ---------- Blog / Article ---------- */
.article-body{ max-width:720px; margin:0 auto; }
.article-body h2{
  font-family:'Fraunces', serif; font-weight:600; font-size:clamp(22px,3vw,28px);
  margin-top:48px; margin-bottom:14px; color:var(--text-dark); line-height:1.25;
}
.article-body h3{
  font-family:'Fraunces', serif; font-weight:600; font-size:19px;
  margin-top:32px; margin-bottom:10px; color:var(--text-dark);
}
.article-body p{
  font-size:16px; line-height:1.85; color:#33424E; margin-bottom:18px;
}
.article-body ul, .article-body ol{
  margin:0 0 20px 0; padding-left:22px; color:#33424E; font-size:15.5px; line-height:1.8;
}
.article-body li{ margin-bottom:8px; }
.article-body a{ color:var(--emerald); text-decoration:underline; text-decoration-color:rgba(31,77,61,0.35); text-underline-offset:3px; }
.article-body a:hover{ text-decoration-color:var(--emerald); }
.article-body blockquote{
  border-left:3px solid var(--gold); background:var(--ivory-2);
  padding:18px 24px; border-radius:0 12px 12px 0; margin:28px 0;
  font-family:'Fraunces', serif; font-style:italic; font-size:17px; color:var(--text-dark);
}
.article-body strong{ color:var(--text-dark); }
.article-hero-img{ width:100%; height:auto; border-radius:18px; margin:8px 0 8px; }
.tag-pill{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--emerald);
  background:rgba(31,77,61,0.08); padding:6px 14px; border-radius:999px; margin:0 8px 8px 0;
}
.author-box{
  display:flex; gap:16px; align-items:center; background:var(--ivory-2);
  border-radius:16px; padding:22px 24px; margin-top:56px;
}
.author-avatar{
  width:54px; height:54px; border-radius:50%; background:var(--ink);
  color:var(--gold-soft); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:20px; flex-shrink:0;
}
.faq-item{ border-top:1px solid rgba(19,32,48,0.1); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid rgba(19,32,48,0.1); }
.faq-item h3{ margin-top:0; }