/* Hermanos Real Estate — Luxury Dark & Gold */
:root{
  --bg:#0e0d0b; --bg2:#14120f; --bg3:#1b1815;
  --gold:#c9a24b; --gold-light:#e3c98a; --line:rgba(201,162,75,.25);
  --text:#efe9dd; --muted:#a89f8f;
  --serif:'Playfair Display',Georgia,serif; --sans:'Jost','Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;letter-spacing:.02em;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.35em;font-size:.72rem;margin-bottom:14px}
.section{padding:110px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
.section-head h2{font-size:clamp(2rem,4vw,3rem)}
.link-more{color:var(--gold);text-transform:uppercase;letter-spacing:.25em;font-size:.75rem;border-bottom:1px solid var(--line);padding-bottom:6px;transition:.3s}
.link-more:hover{color:var(--gold-light);border-color:var(--gold)}
.divider{width:64px;height:1px;background:var(--gold);margin:18px 0 26px}

/* Nav */
nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:.4s;padding:22px 0}
nav.scrolled{background:rgba(14,13,11,.92);backdrop-filter:blur(12px);padding:12px 0;border-bottom:1px solid rgba(201,162,75,.15)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:13px}
.logo-mark{width:44px;height:44px;flex:none}
.logo-text{font-family:var(--sans);font-weight:500;font-size:1.02rem;letter-spacing:.32em;color:var(--text);line-height:1.2;text-transform:uppercase}
.logo-text small{display:block;font-size:.55rem;letter-spacing:.44em;color:var(--gold);font-weight:400;margin-top:3px}
.logo span{color:var(--gold)}
.logo small{font-family:var(--sans)}
.nav-links{display:flex;gap:34px;list-style:none;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em}
.nav-links a{opacity:.85;transition:.3s;padding-bottom:4px;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--gold);border-color:var(--gold)}
.hamburger{display:none;background:none;border:0;color:var(--gold);font-size:1.6rem;cursor:pointer}

/* Hero gallery */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 12s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.35),rgba(14,13,11,.15) 40%,rgba(14,13,11,.92) 92%)}
.hero-frame{position:absolute;inset:26px;border:1px solid rgba(201,162,75,.35);pointer-events:none;z-index:2}
.hero-content{position:relative;z-index:3;padding-bottom:120px;width:100%}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem);max-width:820px}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero p{margin-top:20px;max-width:560px;color:var(--muted);font-size:1.05rem}
.hero-meta{position:absolute;right:56px;bottom:120px;z-index:3;text-align:right;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-light)}
.hero-dots{display:flex;gap:10px;margin-top:34px}
.hero-dots button{width:34px;height:2px;border:0;background:rgba(239,233,221,.3);cursor:pointer;transition:.3s}
.hero-dots button.active{background:var(--gold)}

/* Search bar */
.search-panel{background:var(--bg2);border:1px solid var(--line);padding:34px;margin-top:-80px;position:relative;z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.search-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:18px;align-items:end}
.field label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.25em;color:var(--gold);margin-bottom:8px}
.field select,.field input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(201,162,75,.4);color:var(--text);font-family:var(--sans);font-size:.95rem;padding:8px 0;outline:none}
.field select option{background:var(--bg2)}
.btn{display:inline-block;background:var(--gold);color:#141210;border:1px solid var(--gold);padding:14px 36px;font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.28em;cursor:pointer;transition:.3s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#141210}

/* Property cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--bg2);border:1px solid rgba(201,162,75,.14);overflow:hidden;transition:.4s;position:relative}
.card:hover{border-color:var(--gold);transform:translateY(-6px)}
.card-img{position:relative;height:280px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.card:hover .card-img img{transform:scale(1.07)}
.card-tag{position:absolute;top:16px;left:16px;background:rgba(14,13,11,.8);border:1px solid var(--line);color:var(--gold-light);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;padding:6px 14px}
.card-body{padding:26px}
.card-body h3{font-size:1.35rem;margin-bottom:6px}
.card-body .loc{color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.card-body .price{color:var(--gold);font-family:var(--serif);font-size:1.25rem;margin:14px 0}
.card-specs{display:flex;gap:20px;color:var(--muted);font-size:.8rem;border-top:1px solid rgba(201,162,75,.15);padding-top:16px}

/* Parallax band */
.parallax{position:relative;height:60vh;min-height:420px;background-attachment:fixed;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center}
.parallax::after{content:'';position:absolute;inset:0;background:rgba(14,13,11,.65)}
.parallax .inner{position:relative;z-index:2;max-width:760px;padding:0 24px}
.parallax h2{font-size:clamp(2rem,4.5vw,3.4rem);font-style:italic}
@media (max-width:1024px){.parallax{background-attachment:scroll}}

/* News */
.news-list{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.news-item{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid rgba(201,162,75,.15);transition:.3s}
.news-item:hover{padding-left:10px}
.news-date{min-width:86px;color:var(--gold);font-family:var(--serif);font-size:.95rem}
.news-item h3{font-size:1.15rem;font-family:var(--sans);font-weight:400;margin-bottom:6px}
.news-item p{color:var(--muted);font-size:.9rem}
.news-badge{font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--line);padding:3px 10px;display:inline-block;margin-bottom:8px}
.news-feature{position:relative;min-height:420px;border:1px solid var(--line);overflow:hidden}
.news-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-feature .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(14,13,11,.95));display:flex;flex-direction:column;justify-content:flex-end;padding:34px}

/* Podcast */
.podcast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pod{background:var(--bg2);border:1px solid rgba(201,162,75,.14)}
.pod .yt{position:relative;padding-top:56.25%}
.pod .yt iframe,.pod .yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.pod .yt .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(14,13,11,.35);cursor:pointer;transition:.3s}
.pod .yt .play:hover{background:rgba(14,13,11,.1)}
.pod .yt .play span{width:64px;height:64px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.2rem;background:rgba(14,13,11,.6)}
.pod-body{padding:22px}
.pod-body h3{font-size:1.05rem;font-family:var(--sans);font-weight:400}
.pod-body .ep{color:var(--gold);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:8px}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{border:1px solid rgba(201,162,75,.14);background:var(--bg2);transition:.4s}
.blog-card:hover{border-color:var(--gold)}
.blog-card .card-img{height:220px}
.blog-card .cat{color:var(--gold);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase}
.blog-card h3{font-size:1.25rem;margin:10px 0}
.blog-card p{color:var(--muted);font-size:.9rem}
.blog-card .meta{margin-top:16px;color:var(--muted);font-size:.78rem;letter-spacing:.1em}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.stats .num{font-family:var(--serif);font-size:2.6rem;color:var(--gold)}
.stats .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;margin-top:8px}

/* Footer */
footer{background:var(--bg2);border-top:1px solid var(--line);padding:80px 0 30px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}
footer h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:var(--gold);margin-bottom:20px}
footer ul{list-style:none}
footer li{margin-bottom:12px;font-size:.9rem;color:var(--muted)}
footer li a:hover{color:var(--gold-light)}
.footer-bottom{border-top:1px solid rgba(201,162,75,.12);padding-top:26px;display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}

/* Inner pages */
.page-hero{position:relative;height:46vh;min-height:340px;display:flex;align-items:flex-end;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.5),rgba(14,13,11,.95))}
.page-hero .container{position:relative;z-index:2;padding-bottom:48px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.prose{max-width:760px;margin:0 auto}
.prose p{margin-bottom:22px;color:#d6cfc2;font-size:1.03rem}
.prose h2{margin:40px 0 16px;font-size:1.7rem}
.gallery-strip{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:300px;gap:14px}
.gallery-strip img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .grid-3,.podcast-grid,.blog-grid{grid-template-columns:1fr}
  .search-grid{grid-template-columns:1fr 1fr}
  .news-list{grid-template-columns:1fr}
  .stats,.footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:fixed;inset:0;background:rgba(14,13,11,.97);flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:1rem;display:none}
  .nav-links.open{display:flex}
  .hamburger{display:block;position:relative;z-index:101}
  .hero-meta{display:none}
}