:root{
  --brand:#0d6efd;
  --ink:#1f2937;
  --muted:#6b7280;
  --card-border:#eef2f7;
}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#f7f9fc;font-size:1.1rem}
.navbar{background: linear-gradient(to bottom, #e9e95c, #FFCC00, #FFFF66);}
.navbar .nav-link{font-weight:900}
.hero{
  position:relative;border-radius:20px;padding:56px 24px;margin:24px 0;background:
    radial-gradient(1200px 600px at 10% -20%,#cfe2ff 0%,transparent 40%),
    radial-gradient(1000px 600px at 110% 10%,#e0e7ff 0%,transparent 40%),
    linear-gradient(135deg,#ffffff 0%,#f6f8ff 100%);
  overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.hero h1{font-weight:800;letter-spacing:-.02em}
.hero .sub{color:var(--muted)}
.btn-pill{border-radius:999px;padding:.7rem 1.25rem;font-weight:600}
.card-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:992px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:576px){.card-grid{grid-template-columns:1fr}}
.prop-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease}
.prop-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.08)}
.thumb{height:220px;object-fit:cover}
.badge-soft{background:#eef2ff;color:#3b82f6;border:1px solid #dbeafe;font-weight:600}
.price{font-size:1.1rem;font-weight:700;color:#0b5ed7}
.muted{color:var(--muted)}
.sticky-box{position:sticky;top:90px}
.icon-tag{display:inline-flex;gap:.5rem;align-items:center;padding:.4rem .7rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;text-decoration:none;color:inherit}
.icon-tag:hover{box-shadow:0 6px 16px rgba(0,0,0,.06)}
.search-bar{background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:10px}

#featured { margin-bottom: 48px; }  /* tweak to taste */
/* --- FULL-BLEED SECTIONS --- */

/* Break out of any parent .container and paint the full viewport width */
.bg-dark-bleed{
  /* full-bleed trick */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* band appearance */
  background: #0f1113;     /* ← change this for a different black/dark */
  color: #e9eef5;
  border: 0;
  border-radius: 0;
}

/* Inner vertical spacing of the dark bands (this controls HEIGHT) */
.section-dark-inner{
  padding: 72px 0;         /* ← adjust this to tighten/loosen the band */
}
.section-dark-inner h2,
.section-dark-inner h3,
.section-dark-inner h4{ color:#fff; letter-spacing:.02em; }

/* Optional presets per section */
.section-dark-inner.tight { padding: 48px 0; }
.section-dark-inner.loose { padding: 96px 0; }

/* Make the About section truly 50/50 on desktop */
.about-wrap{ display:grid; gap:42px; grid-template-columns:1fr 1fr; }
@media (max-width: 992px){ .about-wrap{ grid-template-columns:1fr; } }

/* Headings & spacing inside About */
.about-copy h2{ font-weight:800; text-transform:uppercase; margin:0 0 8px; font-size:clamp(32px,3.6vw,44px); }
.about-sub{ color:#a9b2bf; margin:0 0 20px; font-size:clamp(16px,1.4vw,18px); }
.about-copy p{ margin:0 0 16px; font-size:clamp(16px,1.3vw,18px); line-height:1.75; }
.mv-title{ margin:18px 0 6px; font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.2vw,28px); }
.mv-text{ margin:0; color:#d5dbe4; }

/* Right-side photo */
.about-photo{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.about-photo img{ display:block; width:100%; height:100%; max-height:520px; object-fit:cover; }

/* Contact section pieces */
.contact-banner{ border-radius:18px; overflow:hidden; border:1px solid rgba(255, 255, 255, 0.1); margin:14px 0 18px; }
.contact-grid{ display:grid; gap:22px; grid-template-columns:1fr 1fr 1fr; }
@media (max-width:992px){ .contact-grid{ grid-template-columns:1fr; } }
.socials a{ color:#e9eef5; text-decoration:none; font-size:28px; }
.socials a:hover{ opacity:.85; }

/* Prevent sideways scroll with full-bleed */
html, body{ overflow-x:hidden; }

/* Kill any gap before the footer */
footer, .site-footer{ margin-top:0 !important; }

/* === Navbar brand === */
.brand{display:flex;align-items:center;gap:22px;text-decoration:none}
.brand-logo{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:#111;color:#f7d354;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.brand-logo i{font-size:28px;line-height:1}

.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-title{font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,32px)}   /* ← adjust to taste */
.brand-sub{font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  font-size:.98rem;opacity:.8;margin-top:2px}

/* keep navbar height tidy */
.navbar .navbar-brand{padding-top:4;padding-bottom:4}

/* ===== HERO (full-width background, half/90vh height, bottom-aligned) ===== */
.hero-full{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: min(90vh, 860px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;                 /* ↓ make the outer a flex container */
  align-items: flex-end;         /* ↓ push content to the bottom */
}
.hero-full::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.30));
  z-index: 0;
}

/* inner row just spans width, no height constraints */
.hero-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 0 28px;             /* bottom breathing room */
  
}

.hero-card{
  background: rgba(255,255,255,.52); /* frosted */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,.16);
  max-width: 760px; width: 100%;
  text-align: center;
}
.hero-title{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 10px;
}
.hero-sub{ color:#2b2f36; font-size: clamp(15px, 1.3vw, 18px); margin: 0 0 14px; }
.hero-ctas .btn{ padding:.9rem 1.4rem; font-weight:700; border-radius:999px; }
.logo-in-hero{ width:42px; height:42px; }
.brand-inline-title{ font-weight:600; text-transform:uppercase; letter-spacing:.10em; }

/* --- Tiny-width robustness for the hero --- */

/* Keep hero as a bottom-aligned flex container (no height change) */
.hero-full{
  display:flex;
  align-items:flex-end;             /* card sits at the bottom */
}

/* Card row sits above the overlay and has bottom breathing room */
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 0 28px;                 /* bottom spacing */
}

/* Give the card guaranteed side gutters, even when window is tiny */
.hero-card{
  width:min(100% - 32px, 760px);    /* 16px safe space left/right */
}

/* ----- Fix the red-arrow misalignment on ultra-narrow viewports -----
   On very small widths, 100vw includes the scrollbar and can cause
   a 1–2px horizontal overflow. Switch hero to 100% to eliminate it. */
@media (max-width: 480px){
  .hero-full{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .hero-inner{ padding-bottom:16px; }  /* a bit tighter on phones */
  .hero-card{
    width:calc(100% - 20px);           /* ~10px gutter on each side */
    padding:14px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.46);  /* slightly more transparent */
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 10px 28px rgba(0,0,0,.14);
  }
  .logo-in-hero{ width:28px; height:28px; }
  .brand-inline-title{ font-size:12px; letter-spacing:.04em; }
  .hero-title{ font-size:clamp(20px, 6.2vw, 28px); letter-spacing:.04em; margin-bottom:8px; }
  .hero-sub{ font-size:clamp(12px, 3.6vw, 14px); margin-bottom:10px; }
  .hero-ctas .btn{ width:100%; padding:.7rem 1rem; }
}

/* Extra safety for super-narrow windows */
@media (max-width: 340px){
  .hero-card{ width:calc(100% - 14px); padding:12px; }
}



/* --- Fix hero card gutters & alignment on all widths --- */

/* remove container side padding only for the hero row */
.hero-inner.container,
.hero-inner.container-sm,
.hero-inner.container-md,
.hero-inner.container-lg,
.hero-inner.container-xl,
.hero-inner.container-xxl { padding-left: 0 !important; padding-right: 0 !important; }

/* center the card and use symmetric margins instead of width calc */
.hero-card{
  max-width: 760px;
  width: 100%;
  margin-left: 16px;    /* equal left/right gutters */
  margin-right: 16px;
}

/* tiny screens: slightly smaller gutter so it breathes */
@media (max-width: 480px){
  .hero-card{
    margin-left: 10px;
    margin-right: 10px;
    padding: 14px 14px;         /* keep your height; just tighten internal padding */
    border-radius: 12px;
  }
}

/* keep the card pinned to the bottom (no height change) */
.hero-full{ display:flex; align-items:flex-end; }
.hero-inner{ width:100%; display:flex; justify-content:center; padding:0 0 28px; }

/* --- Shadows you asked for --- */

/* button shadow (View Property Listings) */
.hero-ctas .btn {
  box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.52);
}

/* subtle text shadow in the hero card */
.hero-title,
.brand-inline-title,
.hero-sub {
  text-shadow: 0 2px 4px rgba(0,0,0,.48);
}

/* subtle text shadow in the navbar (titles + links) */
.navbar .brand-title,
.navbar .brand-sub,
.navbar .nav-link {
  text-shadow: 0 1px 2px rgba(0,0,0,.05);
}