@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Mulish:wght@400;500;600;700&display=swap');

:root{
  --navy:#1a2a5e;
  --navy-deep:#11204a;
  --navy-darker:#0c1736;
  --yellow:#f5b60d;
  --gold:#f5b60d;        /* accent — same bright gold the brand uses */
  --gold-dark:#e0a300;
  --lavender:#dde4f2;    /* rentals panel */
  --mist:#f4f6fb;        /* page background */
  --ink:#1b2440;
  --muted:#5b6478;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',system-ui,sans-serif;
  color:var(--ink);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{font-family:'Poppins',sans-serif; font-weight:700;}

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

/* ---------- Brand logo ---------- */
.hq-logo{display:inline-flex; align-items:center; gap:.55rem;}
.hq-mark{
  font-family:'Poppins',sans-serif; font-weight:800;
  background:var(--navy); color:#fff;
  border:2px solid var(--gold);
  padding:.18rem .45rem; line-height:1; letter-spacing:-.02em;
  border-radius:3px;
}
.hq-word{
  font-family:'Poppins',sans-serif; font-weight:600;
  letter-spacing:.18em; color:#eef1f8;
  border-bottom:2px solid var(--gold); padding-bottom:2px;
}
.hq-logo--dark .hq-word{color:var(--navy);}

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

/* ---------- Hero ---------- */
.hero-bg{
  background:
    linear-gradient(100deg, rgba(17,32,74,.92) 0%, rgba(17,32,74,.66) 48%, rgba(17,32,74,.30) 100%),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
}
.kenburns{animation:kenburns 28s ease-in-out infinite alternate;}
@keyframes kenburns{0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.08) translate(-1%,-1%);}}
@media (prefers-reduced-motion: reduce){ .kenburns{animation:none;} }

.text-gold{color:var(--gold);}
.bg-navy{background:var(--navy);}
.bg-navy-deep{background:var(--navy-deep);}
.bg-lavender{background:var(--lavender);}
.border-gold{border-color:var(--gold);}

/* ---------- Buttons ---------- */
.btn-gold{ /* bright yellow CTA, navy text */
  background:var(--yellow); color:var(--navy-deep); font-weight:700;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover{background:#ffc828; transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(245,182,13,.7);}

.btn-navy{
  background:var(--navy-deep); color:#fff; font-weight:600;
  transition:background .25s ease, transform .25s ease;
}
.btn-navy:hover{background:var(--navy); transform:translateY(-2px);}

.btn-outline{
  border:1.5px solid rgba(255,255,255,.55); color:#fff; font-weight:600;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-outline:hover{border-color:var(--yellow); background:rgba(245,182,13,.12); transform:translateY(-2px);}

.btn-outline-navy{
  border:1.5px solid var(--navy); color:var(--navy); font-weight:600;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn-outline-navy:hover{background:var(--navy); color:#fff; transform:translateY(-2px);}

/* ---------- Property cards ---------- */
.prop-card{transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;}
.prop-card:hover{transform:translateY(-8px); box-shadow:0 30px 60px -22px rgba(17,32,74,.4);}
.prop-card .prop-img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.prop-card:hover .prop-img{transform:scale(1.07);}
.prop-overlay{background:linear-gradient(0deg, rgba(12,23,54,.82) 0%, rgba(12,23,54,.05) 60%);}

/* ---------- Nav ---------- */
.nav-link{position:relative; cursor:pointer;}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-7px; height:2px; width:0;
  background:var(--yellow); transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after{width:100%;}

.stat-num{font-variant-numeric:tabular-nums;}

/* ---------- Marquee ---------- */
.marquee-track{display:flex; gap:4rem; white-space:nowrap; animation:marquee 32s linear infinite;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- Social rail ---------- */
.social-rail{position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:40;}
.social-rail a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; color:#fff; background:var(--navy-darker);
  transition:background .25s ease, color .25s ease;
}
.social-rail a:hover{background:var(--yellow); color:var(--navy-deep);}

/* ---------- Chat bubble ---------- */
.chat-fab{position:fixed; right:1.25rem; bottom:1.25rem; z-index:45; display:flex; align-items:center; gap:.6rem;}
.chat-fab .chat-pill{
  background:#fff; color:var(--ink); font-size:.82rem; font-weight:600;
  padding:.55rem 1rem; border-radius:999px; box-shadow:0 10px 30px -10px rgba(17,32,74,.4);
}
.chat-fab .chat-avatar{
  width:54px; height:54px; border-radius:999px; object-fit:cover;
  border:3px solid #fff; box-shadow:0 10px 30px -8px rgba(17,32,74,.5);
}

/* ---------- Loader ---------- */
#loader{position:fixed; inset:0; z-index:100; background:var(--navy-deep); display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;}
#loader.done{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{opacity:0; animation:loaderfade 1.4s ease forwards;}
@keyframes loaderfade{0%{opacity:0; transform:translateY(6px);} 60%{opacity:1;} 100%{opacity:1; transform:translateY(0);}}

::selection{background:var(--yellow); color:var(--navy-deep);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--yellow); outline-offset:3px; border-radius:2px;
}
.cursor-pointer{cursor:pointer;}