@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --black:#050504;
  --panel:#0D0C0A;
  --panel-2:#131210;
  --gold:#C6A15B;
  --gold-dim:#8A6F3E;
  --dusk-blue:#3E5972;
  --dusk-blue-dim:#12191F;
  --text:#E8E3D9;
  --text-dim:#8A8578;
  --line:#1F1D18;
  --max:1200px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:linear-gradient(180deg, rgba(5,5,4,0.96) 0%, rgba(5,5,4,0.98) 100%), url('images/hero-architecture.jpg') center top/cover no-repeat fixed;
  background-color:var(--black);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:860px){
  body{background-attachment:scroll;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:500;
  line-height:1.15;
  color:var(--text);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); font-weight:400;}
h2{font-size:clamp(1.7rem,3vw,2.6rem);}
h3{font-size:1.3rem;}
p{max-width:62ch; color:var(--text-dim);}
a{color:inherit; text-decoration:none;}

.container{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){.container{padding:0 20px;}}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(5,5,4,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1400px; margin:0 auto;
}
.logo-mark{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo-mark .logo-video-box{width:44px; height:44px; overflow:hidden; position:relative; flex-shrink:0;}
.logo-mark .logo-video-box video{
  position:absolute; top:50%; left:50%;
  width:44px; height:44px; object-fit:cover; object-position:50% 20%;
  transform:translate(-50%,-50%) scale(1.55);
}
.logo-mark img{height:44px; width:auto; display:block;}
.logo-text{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--text); line-height:1.1;}
.logo-text span{display:block; font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.08em; color:var(--gold); margin-top:2px;}

nav.primary-nav{display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; min-width:0;}
nav.primary-nav::-webkit-scrollbar{display:none;}
nav.primary-nav a{
  font-size:0.82rem; color:var(--text-dim); font-weight:500;
  padding:8px 11px; border-radius:20px; border:1px solid transparent;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
  white-space:nowrap; flex-shrink:0;
}
nav.primary-nav a:hover{color:var(--text); background:rgba(62,89,114,0.20);}
nav.primary-nav a.active{color:var(--gold); background:rgba(198,161,91,0.10); border-color:rgba(198,161,91,0.35);}

.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; font-size:1rem; border-radius:2px;}

@media (max-width:980px){
  nav.primary-nav{
    position:fixed; inset:64px 0 0 0; background:var(--black);
    flex-direction:column; padding:24px 32px; gap:4px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    overflow-y:auto;
  }
  nav.primary-nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  nav.primary-nav a{padding:14px 16px; border-radius:8px; border-bottom:1px solid var(--line); font-size:1rem;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; font-size:0.9rem; font-weight:600;
  border-radius:2px; transition:all .2s ease; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--gold); color:var(--black);}
.btn-primary:hover{background:#D8B36F;}
.btn-secondary{border-color:var(--gold-dim); color:var(--text);}
.btn-secondary:hover{border-color:var(--gold); color:var(--gold);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:90vh;
  display:flex; align-items:flex-end;
  padding:120px 0 90px;
  background:linear-gradient(180deg, rgba(5,5,4,0.4) 0%, rgba(5,5,4,0.6) 55%, var(--black) 100%), url('images/hero-architecture.jpg') center/cover no-repeat;
  background-color:var(--panel);
  overflow:hidden;
}
@media (min-width:861px){
  .hero{background-attachment:fixed;}
}
.hero::before, .hero::after{
  content:''; position:absolute; border:1px solid rgba(198,161,91,0.16); border-radius:50%;
  pointer-events:none;
}
.hero::before{ width:620px; height:620px; left:-160px; top:8%; }
.hero::after{ width:420px; height:420px; left:60px; top:22%; border-color:rgba(198,161,91,0.12); }
@media (max-width:860px){.hero::before, .hero::after{display:none;}}
.hero-grid{
  display:grid; grid-template-columns:1.4fr 0.8fr; gap:48px; align-items:end; width:100%;
  position:relative; z-index:1;
}
.eyebrow-plain{color:var(--gold); font-size:0.9rem; font-weight:500; margin-bottom:18px; letter-spacing:0.02em;}
.hero h1{max-width:15ch;}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:400;}
.hero-logo-large{width:100%; max-width:280px; aspect-ratio:1/1; margin:0 auto 24px; display:block;}
.hero-logo-large video{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 0 40px rgba(198,161,91,0.25));}
@media (max-width:640px){.hero-logo-large{max-width:200px;}}
.hero-underline{
  width:0; height:2px; background:var(--gold); margin-top:22px;
  animation:draw-in 1.1s 0.3s cubic-bezier(.22,.9,.3,1) forwards;
}
@keyframes draw-in{to{width:120px;}}
.hero p.lead{margin-top:24px; font-size:1.1rem; color:var(--text);}
.credibility-box{
  border:1px solid var(--gold-dim); background:rgba(5,5,4,0.6); backdrop-filter:blur(6px);
  padding:36px 28px; box-shadow:0 0 60px rgba(198,161,91,0.08); text-align:center;
}
.credibility-box .stat{font-family:'Fraunces',serif; font-size:2.8rem; color:var(--gold); font-weight:400; line-height:1;}
.credibility-box p{margin:12px auto 0; font-size:0.92rem; color:var(--text-dim); max-width:32ch;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .credibility-box{padding:24px;}
}

/* ---------- Sections ---------- */
section{padding:100px 0;}
section.tight{padding:64px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.section-head p{margin-top:12px;}
.divider{height:1px; background:var(--line); border:none;}

.bg-panel{background:linear-gradient(180deg, var(--panel) 0%, #0B0F12 100%);}

/* ---------- Cards / Grids ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.card{
  border:1px solid var(--line); background:var(--panel-2);
  padding:32px; transition:border-color .2s ease;
}
.card:hover{border-color:var(--gold-dim);}
.card .kicker{color:var(--gold); font-size:0.78rem; font-weight:600; margin-bottom:10px;}
.card h3{margin-bottom:12px;}
.card p{font-size:0.94rem;}

.listing-card{border:1px solid var(--line); background:var(--panel-2); overflow:hidden;}
.listing-card .img{aspect-ratio:4/3; background:var(--panel) center/cover no-repeat; position:relative; overflow:hidden;}
.img img{width:100%; height:100%; object-fit:cover; display:block;}
.fact{border-top:1px solid var(--line); padding:14px 0;}
.fact .label{font-size:0.78rem; color:var(--text-dim); margin-bottom:4px;}
.fact .value{color:var(--text); font-size:0.98rem;}
.status-pill{display:inline-block; font-size:0.7rem; font-weight:600; letter-spacing:0.03em; color:var(--gold); border:1px solid var(--gold-dim); padding:5px 12px; margin-bottom:16px;}
.pending-note{border:1px dashed var(--gold-dim); padding:18px 22px; font-size:0.88rem; color:var(--text-dim); margin-top:24px;}
.listing-card .badge{
  position:absolute; top:14px; left:14px; background:var(--black);
  color:var(--gold); font-size:0.7rem; font-weight:600; padding:6px 12px; border:1px solid var(--gold-dim);
}
.listing-card .body{padding:24px;}
.listing-card .price{color:var(--gold); font-weight:600; font-size:0.95rem; margin-top:6px;}
.listing-card .meta{font-size:0.85rem; color:var(--text-dim); margin-top:4px;}
.listing-card a.card-link{display:block;}

.transaction-card{border:1px solid var(--line); background:var(--panel-2); padding:36px;}
.transaction-card .sold-badge{
  display:inline-block; color:var(--gold); font-size:0.72rem; font-weight:600;
  border:1px solid var(--gold-dim); padding:5px 12px; margin-bottom:16px;
}
.transaction-card .figure{font-family:'Fraunces',serif; font-size:2rem; color:var(--gold); margin:12px 0;}

/* ---------- Placeholder image treatment ---------- */
.ph-img{
  background:
    repeating-linear-gradient(135deg, #15130f 0px, #15130f 2px, #0d0c0a 2px, #0d0c0a 14px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:0.78rem; letter-spacing:0.04em; text-align:center; padding:12px;
  border:1px dashed var(--line);
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:64px 0 32px; background:linear-gradient(180deg, var(--dusk-blue-dim) 0%, var(--panel) 22%);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:48px;}
footer h4{font-size:0.82rem; color:var(--gold); font-weight:600; margin-bottom:16px; font-family:'Inter',sans-serif;}
footer a, footer p{font-size:0.9rem; color:var(--text-dim);}
footer ul{list-style:none;}
footer li{margin-bottom:10px;}
footer li a:hover{color:var(--gold);}
.disclaimer{font-size:0.78rem; color:#5f5c53; border-top:1px solid var(--line); padding-top:24px; max-width:none;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Forms ---------- */
form.inquiry{display:grid; gap:18px; max-width:560px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
label{display:block; font-size:0.82rem; color:var(--text-dim); margin-bottom:8px;}
input, select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:0.95rem; border-radius:2px;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold); outline:none;}
textarea{min-height:120px; resize:vertical;}

/* ---------- Video embed ---------- */
.video-embed{position:relative; padding-top:56.25%; background:var(--panel-2); border:1px solid var(--line);}
.video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}