@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --gold: #c5a065;
  --gold-deep: #a6844b;
  --ink: #111111;
  --ink-soft: #333333;
  --cream: #f8f6f1;
  --warm: #f1ede8;
  --stone: #e8e4dc;
  --silver: #b8b3aa;
  --shadow: rgba(17,17,17,0.08);
  --glass: rgba(255,255,255,0.45);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--cream); color: var(--ink); line-height:1.65; -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }

/* Header */
.header { position:fixed; top:0; width:100%; z-index:100; padding:1.4rem 4vw; display:flex; align-items:center; justify-content:space-between; background: linear-gradient(to bottom, rgba(248,246,241,0.92) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.03); transition: padding 0.3s ease; }
.header.scrolled { padding:1rem 4vw; background: rgba(248,246,241,0.96); }
.logo { font-family: var(--font-display); font-weight:300; font-size:1.6rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink); text-decoration:none; }
.nav a { font-family: var(--font-body); font-weight:300; font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-soft); text-decoration:none; margin-left:2.5rem; position:relative; transition: color 0.2s ease; }
.nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--gold); transition: width 0.3s ease; }
.nav a:hover { color:var(--gold-deep); }
.nav a:hover::after { width:100%; }

/* Hero */
.hero { position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.55); z-index:0; }
.hero-overlay { position:absolute; inset:0; background: radial-gradient(circle at 30% 50%, rgba(17,17,17,0.1) 0%, rgba(17,17,17,0.55) 100%); z-index:1; }
.hero-inner { position:relative; z-index:2; max-width:1200px; padding:0 6vw; }
.hero-label { font-family: var(--font-body); font-weight:400; letter-spacing:0.35em; text-transform:uppercase; font-size:0.8rem; color: var(--gold); margin-bottom:1.5rem; }
.hero h1 { font-family: var(--font-display); font-weight:300; font-size: clamp(3rem, 8vw, 7.5rem); line-height:1.05; color:#fff; letter-spacing:-0.03em; margin-bottom:1.2rem; }
.hero p { font-family: var(--font-display); font-style:italic; font-weight:300; font-size:1.2rem; color: rgba(255,255,255,0.85); max-width:520px; }

/* Section spacing */
section { padding: 8rem 6vw; max-width:1200px; margin:0 auto; position:relative; }
.section-label { font-family: var(--font-body); letter-spacing:0.3em; text-transform:uppercase; font-size:0.72rem; color: var(--gold-deep); margin-bottom:0.6rem; }
.section-title { font-family: var(--font-display); font-weight:300; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height:1.1; letter-spacing:-0.02em; color: var(--ink); }

/* About */
.about { display:grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items:center; }
.about img { border-radius: 0.5rem; box-shadow: 0 25px 60px rgba(17,17,17,0.1); }
.about p { color: var(--ink-soft); margin-top: 1.2rem; font-size:1.05rem; }

/* Services */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top:3rem; }
.service-card { background:#fff; border:1px solid var(--stone); border-radius:1rem; padding:2.5rem 2rem; box-shadow: 0 10px 40px rgba(17,17,17,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient(to right, var(--gold), var(--gold-deep)); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(17,17,17,0.08); }
.service-card h3 { font-family: var(--font-display); font-weight:400; font-size:1.5rem; margin-bottom:0.6rem; }
.service-card p { color: var(--ink-soft); font-size:0.95rem; }
.service-price { margin-top:1.2rem; font-family: var(--font-display); font-weight:600; font-size:1.2rem; color: var(--gold-deep); }

/* Stats */
.stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:2rem; text-align:center; border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); padding:4rem 0; }
.stat h4 { font-family: var(--font-display); font-size:2.5rem; font-weight:300; color:var(--ink); }
.stat span { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--silver); }

/* Testimonials */
.testimonials { background: linear-gradient(135deg, var(--warm) 0%, var(--cream) 100%); border-radius:1.5rem; padding:4rem; }
.testimonials-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:2rem; margin-top:3rem; }
.quote-card { background:#fff; padding:2rem; border-radius:1rem; box-shadow: 0 6px 25px rgba(17,17,17,0.05); position:relative; }
.quote-card::before { content:'"'; font-family: var(--font-display); font-size:5rem; color:var(--gold); line-height:0; position:absolute; top:1rem; right:1.5rem; opacity:0.2; }

/* Pricing */
.pricing-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1.5rem; margin-top:3rem; text-align:center; }
.pricing-card { background:#fff; border:1px solid var(--stone); border-radius:1rem; padding:2.5rem 2rem; box-shadow: 0 8px 30px rgba(17,17,17,0.04); transition: transform 0.3s ease; }
.pricing-card.featured { border-color: var(--gold); box-shadow: 0 20px 50px rgba(197,160,101,0.15); transform: translateY(-8px); }
.pricing-card h3 { font-family: var(--font-display); font-weight:400; font-size:1.3rem; margin-bottom:0.3rem; }
.pricing-card .price { font-family: var(--font-display); font-size:2.6rem; font-weight:300; color:var(--gold-deep); margin:1rem 0; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--stone); padding:1.2rem 0; }
.faq-item button { width:100%; background:none; border:none; font-family: var(--font-display); font-weight:400; font-size:1.1rem; text-align:left; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-content { max-height:0; overflow:hidden; transition: max-height 0.3s ease; color: var(--ink-soft); font-size:0.95rem; }
.faq-item.open .faq-content { max-height:200px; padding-top:0.5rem; }

/* Contact */
.contact-form input, .contact-form textarea { width:100%; padding:1rem; border:1px solid var(--stone); border-radius:0.5rem; font-family: var(--font-body); background:#fff; margin-bottom:1rem; font-size:0.95rem; transition: border-color 0.2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); outline:none; }
.contact-form button { background: var(--ink); color:#fff; border:none; padding:1rem 2.5rem; border-radius:0.5rem; font-family: var(--font-body); letter-spacing:0.1em; text-transform:uppercase; font-size:0.85rem; cursor:pointer; transition: background 0.2s ease; }
.contact-form button:hover { background: var(--gold-deep); }

/* Footer */
.footer { background: var(--ink); color:#fff; padding:4rem 6vw; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; }
.footer a { color: var(--silver); text-decoration:none; font-size:0.85rem; transition: color 0.2s ease; }
.footer a:hover { color: var(--gold); }

/* 404 */
.error-hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem; }
.error-hero h1 { font-family: var(--font-display); font-size:8rem; font-weight:300; color: var(--gold); line-height:1; }
.error-hero p { color: var(--ink-soft); margin-top:1rem; }

/* Responsive */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size:4rem; }
  .nav a { margin-left:1.2rem; font-size:0.7rem; }
  .header { padding:1rem 3vw; }
  section { padding: 5rem 5vw; }
}