/*
Theme Name: SBK Realty Modern
Theme URI: https://sbkrealty.com
Author: Wright Construction
Description: Modern Apple-inspired WordPress theme concept for SBK Realty.
Version: 1.0.0
Text Domain: sbk-realty-modern
*/

:root{
  --black:#080d11;
  --dark:#111820;
  --gold:#c8953a;
  --text:#111;
  --muted:#666;
  --line:#e5e5e5;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px 44px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,0))}
.logo{font-weight:900;line-height:.9;letter-spacing:.04em}
.logo span{display:block;font-size:38px}
.logo small{display:block;color:var(--gold);letter-spacing:.25em;font-size:14px}
.main-nav{display:flex;gap:30px;font-size:14px}
.btn{display:inline-block;padding:15px 24px;border:1px solid transparent;font-weight:700}
.btn.gold{background:var(--gold);color:#fff}
.hero{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,#071016,#172634)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.82),rgba(0,0,0,.1)),url('https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1900&q=80');background-size:cover;background-position:center;opacity:.85}
.hero-content{position:relative;z-index:2;color:#fff;max-width:620px;padding:140px 0 90px 46px}
.eyebrow{text-transform:uppercase;color:var(--gold);font-size:14px;font-weight:800;letter-spacing:.08em}
.hero h1,.section h2,.why h2,.split h2,.about h2{font-family:Georgia,serif;line-height:.96;margin:16px 0}
.hero h1{font-size:clamp(46px,6vw,86px)}
.hero p{font-size:19px;line-height:1.55}
.hero-people{position:absolute;right:7%;bottom:0;z-index:2;width:min(520px,42vw)}
.search-panel{max-width:1200px;margin:-55px auto 0;position:relative;z-index:3;background:#fff;padding:34px;border-radius:4px;box-shadow:0 20px 55px rgba(0,0,0,.16)}
.search-panel form{display:grid;grid-template-columns:repeat(4,1fr) 180px;gap:20px;align-items:end}
.search-panel select,.search-panel button{width:100%;height:52px;border:1px solid #ddd;background:#fff;padding:0 14px}
.search-panel button{background:#111;color:#fff;border:0;font-weight:700}
.section,.why,.about{max-width:1200px;margin:auto;padding:90px 34px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.section h2{font-size:42px;max-width:680px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{border:1px solid var(--line);background:#fff;padding-bottom:24px;position:relative}
.card-image{height:180px;background:linear-gradient(135deg,#9ab2c9,#24384a)}
.card span{position:absolute;top:12px;left:12px;background:#0d1520;color:#fff;padding:7px 10px;font-size:11px;text-transform:uppercase}
.card h3,.card p,.card a{margin-left:18px;margin-right:18px}
.card a{color:#a67321;font-weight:700}
.why{display:grid;grid-template-columns:1fr 2fr;gap:60px}
.why h2{font-size:38px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.features div{border-left:1px solid #ddd;padding-left:28px}
.split{display:grid;grid-template-columns:1.25fr 1fr}
.city{min-height:360px;color:#fff;padding:80px 46px;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.45)),url('https://images.unsplash.com/photo-1519178614-68673b201f36?auto=format&fit=crop&w=1400&q=80');background-size:cover;background-position:center}
.split h2{font-size:50px}
.contact-box{background:#091015;color:#fff;padding:70px;display:grid;gap:45px}
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:center}
.site-footer{background:var(--black);color:#fff;padding:50px 46px;display:grid;grid-template-columns:220px 1fr 1fr;gap:40px}
.reveal{opacity:0;transform:translateY(24px);transition:all .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:900px){
  .main-nav{display:none}
  .site-header{padding:18px 22px}
  .hero-content{padding:120px 24px 80px}
  .hero-people{opacity:.35;right:-80px;width:560px}
  .search-panel{margin:0 18px}
  .search-panel form,.cards,.why,.split,.about,.site-footer{grid-template-columns:1fr}
  .section,.why,.about{padding:70px 22px}
  .section-head{display:block}
  .features{grid-template-columns:1fr}
}