:root {
  --ink: #10181a;
  --deep: #0b2323;
  --gold: #c9a35d;
  --gold-light: #e4c98f;
  --paper: #f5f3ee;
  --white: #ffffff;
  --muted: #66706e;
  --line: rgba(16, 24, 26, 0.14);
  --shadow: 0 24px 70px rgba(5, 18, 18, 0.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5vw, 78px); background: rgba(11, 35, 35, 0.92); color: white; backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: inline-flex; align-items: center; gap: 13px; letter-spacing: .22em; }
.brand-mark { width: 48px; height: 40px; fill: var(--gold); }
.brand span { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 1.02rem; font-weight: 600; }
.brand small { margin-top: 6px; color: var(--gold-light); font-size: .62rem; letter-spacing: .42em; }
.site-nav { display: flex; gap: 34px; font-size: .88rem; }
.site-nav a { opacity: .82; transition: .2s; }
.site-nav a:hover { opacity: 1; color: var(--gold-light); }
.menu-button { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: white; padding: 9px 13px; }
.hero { min-height: 840px; position: relative; overflow: hidden; padding: 190px clamp(22px, 7vw, 110px) 70px; background: linear-gradient(125deg, #0a2020 0%, #102c2c 48%, #183d3a 100%); color: white; }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 78% 35%, rgba(201,163,93,.22), transparent 28%); pointer-events:none; }
.hero-content { position: relative; z-index: 2; max-width: 690px; }
.eyebrow { margin: 0 0 18px; color: var(--gold); text-transform: uppercase; letter-spacing: .23em; font-size: .74rem; font-weight: 800; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 28px; font-size: clamp(3.5rem, 7vw, 7.7rem); line-height: .94; letter-spacing: -.055em; font-weight: 700; }
h1 span { color: var(--gold-light); font-family: "Playfair Display", serif; font-weight: 600; }
.hero-copy { max-width: 620px; color: rgba(255,255,255,.74); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero-actions, .project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 25px; border: 1px solid transparent; font: inherit; font-size: .84rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: #142020; }
.button-primary:hover { background: var(--gold-light); }
.button-ghost { border-color: rgba(255,255,255,.35); color: white; }
.button-outline { border-color: var(--ink); background: transparent; }
.hero-art { position: absolute; z-index: 1; right: -2%; bottom: 100px; width: min(54vw, 830px); height: 520px; opacity: .95; }
.hero-house { position:absolute; right:0; bottom:0; width:88%; height:64%; border:1px solid rgba(255,255,255,.25); background: linear-gradient(90deg, #d9d5cc 0 24%, #202928 24% 100%); clip-path: polygon(0 35%, 18% 20%, 52% 20%, 66% 0, 100% 22%, 100% 100%, 0 100%); box-shadow: var(--shadow); }
.hero-house::before { content:""; position:absolute; left:3%; bottom:0; width:24%; height:55%; background:#252c2c; border:10px solid #d5d0c5; }
.hero-house::after { content:""; position:absolute; right:14%; bottom:0; width:22%; height:58%; background:linear-gradient(90deg,#101919 48%,#bbc5bf 49% 52%,#101919 53%); border:9px solid #b7b1a6; }
.hero-number { position:absolute; right:33%; bottom:-20px; width:72px; height:118px; display:grid; place-items:center; font-size:1.5rem; background:#101616; border-top:3px solid var(--gold); box-shadow:0 20px 35px rgba(0,0,0,.3); }
.hero-stats { position:absolute; z-index:3; bottom:35px; left:clamp(22px, 7vw, 110px); display:flex; gap:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); }
.hero-stats div { min-width:135px; padding:18px 22px; border-right:1px solid rgba(255,255,255,.12); }
.hero-stats div:last-child { border-right:0; }
.hero-stats strong { display:block; color:var(--gold-light); font-size:1.55rem; }
.hero-stats span { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.7); }
.section { padding: 110px clamp(22px, 7vw, 110px); }
.intro { display:grid; grid-template-columns:1.1fr .9fr; gap:10vw; align-items:end; }
h2 { font-size:clamp(2.2rem,4.5vw,4.7rem); line-height:1.06; letter-spacing:-.045em; }
.intro > p { font-size:1.08rem; color:var(--muted); max-width:650px; }
.projects { background:white; }
.section-heading { margin-bottom:52px; }
.project-card { display:grid; grid-template-columns:1.25fr .75fr; min-height:550px; margin-bottom:50px; border:1px solid var(--line); background:var(--paper); box-shadow:0 16px 50px rgba(15,35,35,.08); }
.project-image { position:relative; overflow:hidden; min-height:540px; background:#ddd; }
.project-image img { width:100%; height:100%; object-fit:cover; }
.status { position:absolute; top:24px; left:24px; z-index:2; padding:10px 15px; text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; font-weight:800; }
.status-sale { color:white; background:var(--deep); }
.status-upcoming { color:var(--deep); background:var(--gold-light); }
.project-content { padding:clamp(32px,5vw,72px); align-self:center; }
.project-label { color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:800; }
.project-content h3 { font-size:clamp(2rem,3vw,3.45rem); line-height:1.05; letter-spacing:-.04em; }
.project-content > p:not(.project-label) { color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:0; margin:34px 0 0; list-style:none; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature-grid li { padding:16px; font-size:.82rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-grid strong { display:block; font-size:1.1rem; color:var(--deep); }
.text-link { font-weight:700; font-size:.88rem; }
.text-link span { color:var(--gold); margin-left:5px; }
.project-upcoming { background:var(--deep); color:white; }
.project-upcoming .project-content > p:not(.project-label) { color:rgba(255,255,255,.68); }
.project-upcoming .feature-grid { border-color:rgba(255,255,255,.15); }
.project-upcoming .feature-grid li { border-color:rgba(255,255,255,.15); }
.project-upcoming .feature-grid strong { color:var(--gold-light); }
.project-upcoming .button-outline { color:white; border-color:rgba(255,255,255,.5); }
.project-visual { position:relative; overflow:hidden; min-height:540px; background:linear-gradient(145deg,#c9a35d,#e7d5ad); }
.large-number { position:absolute; right:-20px; bottom:-110px; font-size:25rem; line-height:1; font-weight:800; color:rgba(16,24,26,.1); }
.line-house { position:absolute; width:72%; height:58%; left:13%; top:25%; }
.line-house span { position:absolute; border:3px solid rgba(15,35,35,.82); }
.line-house .roof { width:80%; height:55%; left:10%; top:0; border-bottom:0; transform:skewY(-15deg); }
.line-house .wall { width:86%; height:58%; left:7%; bottom:0; }
.line-house .garage { width:35%; height:35%; left:11%; bottom:0; }
.line-house .window { width:14%; height:25%; bottom:15%; }
.line-house .window.one { right:29%; }
.line-house .window.two { right:10%; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-card { padding:36px; border-top:3px solid var(--gold); background:white; }
.value-card span { color:var(--gold); font-weight:800; }
.value-card h3 { margin:24px 0 10px; font-size:1.35rem; }
.value-card p { color:var(--muted); margin-bottom:0; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:8vw; color:white; background:var(--deep); }
.contact h2 { max-width:650px; }
.contact-panel > p:not(.eyebrow) { color:rgba(255,255,255,.68); max-width:580px; }
.contact-phone { display:inline-block; margin-top:25px; font-size:clamp(2rem,4vw,4.5rem); color:var(--gold-light); font-weight:700; letter-spacing:-.04em; }
.contact-form { display:grid; gap:17px; align-self:start; padding:34px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); }
.contact-form label { display:grid; gap:7px; font-size:.75rem; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.7); }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:white; padding:13px; font:inherit; }
.contact-form select option { color:var(--ink); }
.form-note { margin:0; font-size:.76rem; color:rgba(255,255,255,.48); }
footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:38px clamp(22px, 7vw, 110px); background:#071616; color:rgba(255,255,255,.58); font-size:.78rem; }
.footer-brand { color:white; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width: 1000px) {
  .hero { min-height:920px; }
  .hero-art { width:88vw; opacity:.35; right:-25%; }
  .intro,.project-card,.contact { grid-template-columns:1fr; }
  .project-card { min-height:0; }
  .project-image,.project-visual { min-height:430px; }
  .values { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .site-header { height:76px; }
  .brand strong { font-size:.85rem; }
  .brand-mark { width:38px; }
  .menu-button { display:block; }
  .site-nav { position:absolute; top:76px; left:0; right:0; display:none; flex-direction:column; gap:0; padding:12px 22px 22px; background:var(--deep); }
  .site-nav.open { display:flex; }
  .site-nav a { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .hero { min-height:870px; padding-top:145px; }
  h1 { font-size:3.45rem; }
  .hero-art { height:420px; bottom:135px; right:-35%; width:120vw; }
  .hero-stats { left:22px; right:22px; overflow:auto; }
  .hero-stats div { min-width:116px; padding:14px; }
  .section { padding-top:78px; padding-bottom:78px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .project-image,.project-visual { min-height:310px; }
  footer { flex-direction:column; align-items:flex-start; }
}