/* IZ Nadlan — white / black / gold */
:root {
  --ink: #14100a;
  --ink-soft: #4a4438;
  --muted: #8a8272;
  --gold: #b08d3e;
  --gold-soft: #c6a75b;
  --gold-bg: #f7f2e7;
  --line: #e9e3d5;
  --bg: #ffffff;
  --bg-alt: #faf8f3;
  --radius: 14px;
  --shadow: 0 10px 40px rgba(20, 16, 10, .08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Assistant', -apple-system, sans-serif;
  color: var(--ink); background: var(--bg);
  font-size: 17px; line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 36px; height: 78px; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo .mono {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 34px; letter-spacing: 2px; color: var(--ink);
}
.logo .mono b { color: var(--gold); font-weight: 600; }
.logo .sub { font-size: 11px; letter-spacing: 6px; color: var(--gold); margin-top: 2px; }
nav.mainnav { display: flex; gap: 28px; margin-inline-start: 12px; }
nav.mainnav a { font-weight: 600; font-size: 15.5px; color: var(--ink-soft); padding: 6px 2px; position: relative; }
nav.mainnav a:hover, nav.mainnav a.active { color: var(--ink); }
nav.mainnav a.active::after {
  content: ""; position: absolute; bottom: -4px; right: 0; left: 0; height: 2px; background: var(--gold);
}
.top-cta { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.phone-link { font-weight: 700; color: var(--ink); font-size: 15.5px; white-space: nowrap; }
.phone-link span { color: var(--gold); margin-inline-end: 6px; }
.btn {
  display: inline-block; padding: 12px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; cursor: pointer; border: none;
  transition: all .18s ease; font-family: inherit; text-align: center;
}
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #fff; }
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a251b; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-wa { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn-wa:hover { filter: brightness(1.05); }
.btn-sm { padding: 8px 18px; font-size: 14px; }
.menu-btn { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20,16,10,.15), rgba(20,16,10,.75)); }
.hero-in { position: relative; padding: 130px 0 150px; max-width: 720px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.15; color: #fff; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero p { color: rgba(255,255,255,.85); font-size: 20px; margin: 18px 0 34px; }
.hero .btn { font-size: 17px; padding: 15px 38px; }

/* search bar */
.searchbar {
  position: relative; margin-top: -58px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
  display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 12px; align-items: center;
}
.searchbar select, .searchbar input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15px; background: var(--bg-alt); color: var(--ink);
}
.searchbar select:focus, .searchbar input:focus { outline: 2px solid var(--gold-soft); }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section.alt { background: var(--bg-alt); }
.sec-head { text-align: center; margin-bottom: 46px; }
.sec-head .kicker { color: var(--gold); letter-spacing: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin-top: 6px; }
.sec-head .goldline { width: 54px; height: 3px; background: var(--gold); margin: 18px auto 0; border-radius: 2px; }

/* property cards */
.grid { display: grid; gap: 26px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-imgwrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--gold-bg); }
.card-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-imgwrap img { transform: scale(1.05); }
.badge {
  position: absolute; top: 14px; right: 14px; padding: 5px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: rgba(20,16,10,.82); color: #fff;
}
.badge.gold { background: var(--gold); }
.badge.left { right: auto; left: 14px; }
.ribbon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,10,.55);
}
.ribbon span {
  border: 2px solid var(--gold-soft); color: var(--gold-soft); padding: 8px 30px;
  font-size: 22px; font-weight: 800; letter-spacing: 2px; transform: rotate(-8deg); border-radius: 6px;
  background: rgba(20,16,10,.4);
}
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 20px; font-weight: 700; }
.card-loc { color: var(--muted); font-size: 15px; }
.specs { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ink-soft); font-size: 14.5px; padding: 8px 0; border-top: 1px solid var(--line); }
.specs span { display: inline-flex; align-items: center; gap: 6px; }
.specs svg { width: 16px; height: 16px; stroke: var(--gold); }
.card-price { font-size: 21px; font-weight: 800; margin-top: auto; }
.card-price small { font-weight: 600; color: var(--muted); font-size: 14px; }

/* projects */
.proj-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--ink); }
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .4s ease; }
.proj-card:hover img { transform: scale(1.05); }
.proj-card .proj-info {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(0deg, rgba(20,16,10,.85), transparent); color: #fff;
}
.proj-info h3 { font-size: 22px; }
.proj-info p { color: rgba(255,255,255,.8); font-size: 15px; }

/* about strip */
.about-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-strip img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
.about-strip .kicker { color: var(--gold); letter-spacing: 4px; font-size: 13px; font-weight: 700; }
.about-strip h2 { font-size: 34px; margin: 6px 0 16px; }
.about-strip p { color: var(--ink-soft); margin-bottom: 26px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.stat b { font-size: 30px; color: var(--gold); display: block; font-weight: 800; }
.stat span { color: var(--muted); font-size: 14.5px; }

/* blog */
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-card .card-imgwrap { aspect-ratio: 16/9; }
.post-card .card-body h3 { font-size: 19px; }
.post-date { color: var(--gold); font-size: 13.5px; font-weight: 700; }

/* footer */
footer { background: #171208; color: rgba(255,255,255,.8); padding: 70px 0 30px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
footer .logo .mono { color: #fff; }
footer h4 { color: #fff; font-size: 16px; margin-bottom: 16px; letter-spacing: 1px; }
footer a { display: block; padding: 4px 0; color: rgba(255,255,255,.7); font-size: 15px; }
footer a:hover { color: var(--gold-soft); }
.foot-contact div { display: flex; gap: 10px; align-items: center; padding: 4px 0; font-size: 15px; }
.foot-contact svg { width: 16px; height: 16px; stroke: var(--gold-soft); flex-shrink: 0; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 46px; padding-top: 22px; text-align: center; font-size: 13.5px; color: rgba(255,255,255,.45); }

/* floating whatsapp */
.wa-float {
  position: fixed; bottom: 26px; left: 26px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- listing page ---------- */
.page-head { background: var(--ink); color: #fff; padding: 64px 0 90px; text-align: center; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); }
.page-head p { color: rgba(255,255,255,.7); margin-top: 8px; }
.listing-tools { margin-top: -46px; }
.results-count { color: var(--muted); margin: 26px 0 18px; font-size: 15px; }

/* ---------- property page ---------- */
.prop-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding-top: 46px; align-items: start; }
.gallery-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--gold-bg); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.thumbs img.on { border-color: var(--gold); }
.prop-info h1 { font-size: 30px; line-height: 1.25; }
.prop-loc { color: var(--muted); margin: 6px 0 14px; font-size: 16px; }
.prop-price { font-size: 32px; font-weight: 800; color: var(--ink); margin-bottom: 18px; }
.prop-price small { font-size: 16px; color: var(--muted); font-weight: 600; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px; }
.spec-grid div { display: flex; justify-content: space-between; font-size: 15.5px; }
.spec-grid dt { color: var(--muted); }
.spec-grid dd { font-weight: 700; }
.prop-desc { padding: 40px 0; max-width: 820px; white-space: pre-line; color: var(--ink-soft); }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; margin-top: 22px; }
.contact-card h3 { margin-bottom: 4px; }
.contact-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; }
.contact-card form { display: flex; flex-direction: column; gap: 12px; }
input, textarea, select {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15px; width: 100%; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold-soft); }
.ok-note { background: #eaf7ec; border: 1px solid #b7e0bd; color: #1e6b2a; padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.video-wrap { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; margin: 10px 0 30px; background: #000; }
.video-wrap iframe, .video-wrap video { width: 100%; height: 100%; border: 0; }

/* ---------- blog post ---------- */
.post-body { max-width: 760px; margin: 0 auto; padding: 50px 0 80px; }
.post-body h1 { font-size: 36px; margin-bottom: 8px; }
.post-body .post-hero { border-radius: var(--radius); margin: 26px 0; aspect-ratio: 16/8; object-fit: cover; width: 100%; }
.post-text { white-space: pre-line; color: var(--ink-soft); font-size: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .searchbar { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .prop-top { grid-template-columns: 1fr; }
  .about-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  nav.mainnav {
    display: none; position: absolute; top: 78px; right: 0; left: 0;
    background: #fff; flex-direction: column; gap: 0; padding: 10px 24px 18px;
    border-bottom: 1px solid var(--line);
  }
  nav.mainnav.open { display: flex; }
  nav.mainnav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .menu-btn { display: block; margin-inline-start: auto; }
  .top-cta { margin-inline-start: 0; }
  .top-cta .btn { display: none; }
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .searchbar { grid-template-columns: 1fr 1fr; }
  .hero-in { padding: 84px 0 110px; }
  .foot-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .spec-grid { grid-template-columns: 1fr; }
}

/* ---------- brand & trust additions ---------- */
.hero-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-brand .line { width:44px; height:2px; background: var(--gold-soft); }
.hero-brand span { color: var(--gold-soft); font-weight:700; letter-spacing:1px; font-size:16px; }
.hero-img { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* trust strip */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.trust-item { text-align:center; padding:30px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.trust-item .t-ico { width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:var(--gold-bg); display:flex; align-items:center; justify-content:center; }
.trust-item .t-ico svg { width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.8; }
.trust-item h3 { font-size:18px; margin-bottom:6px; }
.trust-item p { color:var(--muted); font-size:14.5px; line-height:1.5; }

/* integrity / card-style section */
.integrity { background:#171208; color:#fff; padding:90px 0; position:relative; overflow:hidden; }
.integrity::before { content:"IZ"; position:absolute; left:-40px; top:-60px; font-family:'Cormorant Garamond',serif; font-size:340px; color:rgba(198,167,91,.05); font-weight:600; }
.integrity-in { max-width:760px; margin:0 auto; text-align:center; position:relative; }
.integrity .gold-frame { border:1px solid rgba(198,167,91,.4); border-radius:18px; padding:54px 40px; position:relative; }
.integrity .gold-frame::before, .integrity .gold-frame::after { content:"✦"; color:var(--gold-soft); position:absolute; top:-12px; font-size:18px; background:#171208; padding:0 10px; }
.integrity .gold-frame::before { right:40px; } .integrity .gold-frame::after { left:40px; }
.integrity .quote { font-size:clamp(22px,3vw,30px); font-weight:700; color:#fff; line-height:1.5; }
.integrity .quote em { font-style:normal; color:var(--gold-soft); }
.integrity .source { color:rgba(255,255,255,.55); margin-top:10px; font-size:15px; }
.integrity .divider { width:70px; height:2px; background:var(--gold); margin:26px auto; }
.integrity .who { font-size:20px; font-weight:800; color:var(--gold-soft); letter-spacing:1px; }
.integrity .tagline { color:rgba(255,255,255,.8); margin-top:6px; font-size:17px; }
.integrity .btn { margin-top:26px; }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } .hero-img { animation:none; } }

/* lightbox */
.lb { position:fixed; inset:0; background:rgba(10,8,4,.94); display:none; align-items:center; justify-content:center; z-index:100; cursor:zoom-out; }
.lb.open { display:flex; }
.lb img { max-width:94vw; max-height:92vh; object-fit:contain; border-radius:8px; }
.lb .lb-x { position:absolute; top:18px; right:24px; color:#fff; font-size:34px; cursor:pointer; background:none; border:none; }
.gallery-main img { cursor: zoom-in; }

@media (max-width:1020px){ .trust { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .trust { grid-template-columns:1fr 1fr; gap:12px; } .trust-item { padding:20px 12px; } .integrity .gold-frame { padding:40px 22px; } }

/* hero CTAs + sort + mobile action bar */
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.results-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:26px 0 18px; flex-wrap:wrap; }
.results-row .results-count { margin:0; }
.sort-form select { width:auto; padding:9px 14px; border-radius:999px; font-weight:600; background:#fff; }
.mob-cta { display:none; }
@media (max-width:640px) {
  .mob-cta { display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; bottom:0; right:0; left:0;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); z-index:70; }
  .mob-cta .btn { padding:13px 10px; font-size:15px; }
  body:has(.mob-cta) .wa-float { display:none; }
  body:has(.mob-cta) { padding-bottom:72px; }
}

/* seller CTA */
.seller-cta { padding: 60px 0 84px; }
.seller-box { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  background:#171208; border-radius:var(--radius); padding:50px 54px; color:#fff;
  border:1px solid rgba(198,167,91,.35); }
.seller-box .kicker { color:var(--gold-soft); letter-spacing:4px; font-size:13px; font-weight:700; }
.seller-box h2 { font-size:32px; margin:6px 0 10px; }
.seller-box p { color:rgba(255,255,255,.75); }
.seller-form { display:flex; flex-direction:column; gap:12px; }
.seller-form input { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#fff; }
.seller-form input::placeholder { color:rgba(255,255,255,.5); }
.seller-form input:focus { outline:2px solid var(--gold-soft); }
@media (max-width:900px){ .seller-box { grid-template-columns:1fr; padding:34px 24px; } }