:root {
  --black: #070707;
  --black-2: #111111;
  --cream: #f7f3ea;
  --muted: #b8b4aa;
  --gold: #c99532;
  --gold-light: #e6bd68;
  --line: rgba(255,255,255,.12);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0; left: 0; right: 0;
  height: 92px;
  padding: 10px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7,7,7,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand img { width: 105px; height: 70px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.nav a { color: #ddd; transition: .25s ease; }
.nav a:hover { color: var(--gold-light); }
.nav-cta {
  padding: 12px 17px;
  border: 1px solid var(--gold);
  color: var(--gold-light) !important;
}
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px; }

.hero {
  min-height: 94vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 30%, rgba(201,149,50,.17), transparent 28%),
    linear-gradient(120deg, #050505 0%, #111 52%, #070707 100%);
}
.hero::after {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -220px; bottom: -280px;
  border: 1px solid rgba(201,149,50,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(201,149,50,.025), 0 0 0 140px rgba(201,149,50,.018);
}
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.25)); }
.hero-content { position:relative; z-index:2; width:min(var(--max), 90%); margin:auto; padding-top:90px; }
.eyebrow, .section-kicker {
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: .25em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero h1 {
  margin: 18px 0;
  font: 600 clamp(52px, 7vw, 96px)/.92 "Cormorant Garamond", serif;
  letter-spacing: -.02em;
}
.hero h1 span, em { color: var(--gold-light); font-style: italic; }
.hero-copy { max-width: 600px; color:#d0ccc2; font-size:17px; }
.hero-actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 24px;
  border:1px solid var(--gold);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  cursor:pointer; transition:.25s ease;
}
.button-gold { background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:#090909; }
.button-gold:hover { transform:translateY(-2px); filter:brightness(1.08); }
.button-outline { color:#fff; border-color:rgba(255,255,255,.35); }
.button-outline:hover { border-color:var(--gold-light); color:var(--gold-light); }
.hero-scroll { position:absolute; z-index:2; bottom:28px; left:5vw; color:#aaa; font-size:9px; letter-spacing:.2em; }
.hero-scroll span { color:var(--gold-light); font-size:18px; margin-left:10px; }

.section { width:min(var(--max), 90%); margin:auto; padding:110px 0; }
.intro { max-width:900px; text-align:center; }
.intro h2, .section-heading h2, .about h2, .contact h2 {
  font:600 clamp(44px, 5vw, 70px)/.95 "Cormorant Garamond", serif;
  margin:16px 0 24px;
}
.intro p { max-width:720px; margin:auto; color:var(--muted); font-size:16px; }

.services { border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:45px; }
.section-heading > p { max-width:390px; color:var(--muted); margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.service-card { min-height:360px; padding:32px; background:var(--black-2); position:relative; transition:.3s; }
.service-card:hover { background:#171717; transform:translateY(-5px); }
.service-number { position:absolute; top:25px; right:25px; color:#6d665b; font-size:11px; }
.service-icon { color:var(--gold-light); font-size:36px; margin:45px 0 22px; }
.service-card h3 { font:600 29px/1.05 "Cormorant Garamond", serif; margin:0 0 16px; }
.service-card p { color:var(--muted); font-size:13px; }
.service-card a { display:inline-block; margin-top:14px; color:var(--gold-light); font-size:10px; text-transform:uppercase; letter-spacing:.15em; }

.work { border-top:1px solid var(--line); }
.project-grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.project-large { grid-row:span 2; min-height:620px; }
.project { min-height:300px; }
.project-placeholder {
  height:100%; min-height:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, rgba(201,149,50,.12), transparent),
    repeating-linear-gradient(45deg, #151515, #151515 12px, #111 12px, #111 24px);
  border:1px solid rgba(255,255,255,.08);
  color:#777;
}
.project-placeholder span { color:var(--gold-light); font-size:10px; letter-spacing:.2em; font-weight:700; }
.project-placeholder small { margin-top:8px; color:#777; }

.quote-section {
  padding:130px 8%; text-align:center;
  background:linear-gradient(135deg, #111, #090909);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.quote-mark { font:100px/0.5 "Cormorant Garamond", serif; color:var(--gold); }
blockquote { max-width:920px; margin:25px auto; font:500 clamp(32px,4vw,58px)/1.05 "Cormorant Garamond", serif; }
.quote-line { width:50px; height:1px; background:var(--gold); margin:30px auto 18px; }
.quote-section p { font-size:10px; letter-spacing:.2em; color:#999; }

.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.about-image {
  min-height:520px; display:flex; align-items:center; justify-content:center;
  background:#050505; border:1px solid rgba(201,149,50,.25);
}
.about-image img { width:min(85%, 520px); }
.about-copy p { color:var(--muted); max-width:620px; }
.checks { margin-top:30px; display:grid; gap:12px; color:#ddd; font-size:13px; }
.checks div::first-letter { color:var(--gold-light); }

.contact { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-top:1px solid var(--line); }
.contact-intro > p { color:var(--muted); max-width:450px; }
.contact-details { display:grid; gap:10px; margin-top:35px; }
.contact-details a { color:var(--gold-light); font-size:14px; }
.contact-details span { color:#999; font-size:13px; }
.estimate-form { display:grid; gap:16px; }
.estimate-form label { display:grid; gap:7px; color:#aaa; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.estimate-form input, .estimate-form select, .estimate-form textarea {
  width:100%; padding:14px 15px; border:1px solid #333; outline:none;
  background:#101010; color:#fff; font:14px "Montserrat", sans-serif;
}
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { border-color:var(--gold); }
.estimate-form textarea { resize:vertical; }
.form-note { margin:0; color:#777; font-size:10px; }

.footer {
  padding:50px 5vw 35px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
}
.footer-brand img { width:120px; height:80px; object-fit:contain; }
.footer-links { display:flex; gap:25px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#aaa; }
.footer > p { grid-column:1/-1; margin:0; color:#666; font-size:10px; }

@media (max-width: 900px) {
  .nav { display:none; position:absolute; top:92px; left:0; right:0; padding:25px; flex-direction:column; align-items:stretch; background:#090909; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav-cta { text-align:center; }
  .menu-toggle { display:block; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .about, .contact { grid-template-columns:1fr; gap:50px; }
  .section-heading { align-items:start; flex-direction:column; gap:0; }
}
@media (max-width: 600px) {
  .site-header { height:78px; }
  .brand img { width:85px; height:58px; }
  .hero-content { padding-top:80px; }
  .hero h1 { font-size:54px; }
  .hero-copy { font-size:14px; }
  .service-grid, .project-grid { grid-template-columns:1fr; }
  .project-large { grid-row:auto; min-height:360px; }
  .project { min-height:260px; }
  .section { padding:80px 0; }
  .footer { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}