/* Emerald & Gold theme */
:root {
  --emerald: #064e3b;
  --emerald-light: #0f766e;
  --gold: #d4af37;
  --off: #f8fafc;
  --ink: #0b1220;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; color: var(--off); background: var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Inter', 'Helvetica Neue', Arial, sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display:block; }
.small-note { opacity:.8; margin-top:.5rem; }

.container { width: min(1100px, 92%); margin-inline: auto; }
.narrow { width: min(800px, 92%); margin-inline: auto; }

.site-header { position: sticky; top:0; z-index: 100; background: var(--emerald); border-bottom: 2px solid color-mix(in oklab, var(--gold) 25%, black); }
.header-grid { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .75rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.logo { width:46px; height:46px; }
.brand-text { line-height:1; }
.brand-top { font-weight:800; letter-spacing:.3px; font-size:1.15rem; text-transform:uppercase; }
.brand-sub { font-size:.8rem; opacity:.85; }

#nav-toggle { display:none; }
.nav { display:flex; align-items:center; gap:1rem; }
.nav a { padding:.5rem .75rem; border-radius:.5rem; }
.nav a:hover { background: color-mix(in oklab, var(--off) 10%, var(--emerald)); }
.nav .cta { background: var(--gold); color: var(--emerald); font-weight:700; }
.nav .cta:hover { filter: brightness(.95); }

.burger { display:none; cursor:pointer; }
.burger span { display:block; width:26px; height:3px; background: var(--off); margin:5px 0; }

/* Hero */
.hero { background: linear-gradient(180deg, color-mix(in oklab, var(--emerald) 75%, black), var(--ink)); }
.hero-inner { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 3vw, 2rem); align-items:center; padding: clamp(2rem, 6vw, 4rem) 0; }
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3rem); margin:.25rem 0 1rem; }
.accent { color: var(--gold); }
.btn-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--gold); }
.btn.primary { background: var(--gold); color: var(--emerald); font-weight:800; }
.btn.ghost { background: transparent; }

.hero-card { min-height: 320px; border-radius: 1rem; background:
  linear-gradient(145deg, color-mix(in oklab, var(--gold) 10%, transparent), transparent),
  url('https://images.unsplash.com/photo-1504113888839-1c8eb50233d3?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; border:1px solid color-mix(in oklab, var(--gold) 25%, black); }

/* Sections */
.services-preview { padding: 2rem 0 3rem; }
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.card { background: color-mix(in oklab, var(--emerald) 85%, black); padding:1rem; border-radius:.8rem; border:1px solid color-mix(in oklab, var(--gold) 25%, black); }
.card h3 { color: var(--gold); margin:.25rem 0 .5rem; }

.reviews { padding: 1.5rem 0 2.25rem; }
.review-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.review-grid blockquote { margin:0; background: color-mix(in oklab, var(--emerald) 85%, black); border:1px solid color-mix(in oklab, var(--gold) 25%, black); padding:1rem; border-radius:.8rem; }
.review-grid cite { display:block; margin-top:.5rem; opacity:.9; }

.cta-wide { background: linear-gradient(180deg, var(--emerald), color-mix(in oklab, var(--emerald) 60%, black)); padding: 1.5rem 0; border-top: 1px solid color-mix(in oklab, var(--gold) 25%, black); border-bottom: 1px solid color-mix(in oklab, var(--gold) 25%, black); }
.cta-grid { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* Interior pages */
main.container { padding: 2rem 0 3rem; }
.service-section { margin: 1.5rem 0; }
.service-list { columns: 2; gap: 2rem; padding-left:1rem; }
.service-list li { margin:.35rem 0; }

.quote-block { background: color-mix(in oklab, var(--emerald) 85%, black); border:1px solid color-mix(in oklab, var(--gold) 25%, black); border-radius:.8rem; padding:1rem; margin:2rem 0; }

.stats { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1.5rem 0; }
.stat { display:block; font-size:2rem; color: var(--gold); font-weight:900; }
.label { opacity:.9; }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.gallery figure { background: color-mix(in oklab, var(--emerald) 85%, black); border:1px solid color-mix(in oklab, var(--gold) 25%, black); border-radius:.5rem; overflow:hidden; }
.gallery figcaption { padding:.5rem; font-size:.9rem; color: var(--off); }

/* Form */
.quote-form .grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
.quote-form .grid .full { grid-column: 1 / -1; }
label { display:block; font-size:.95rem; }
input, select, textarea { width:100%; padding:.7rem .8rem; border-radius:.6rem; border:1px solid color-mix(in oklab, var(--gold) 25%, black); background: color-mix(in oklab, var(--emerald) 85%, black); color: var(--off); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--gold); outline-offset:2px; }

/* Footer */
.site-footer { background: var(--emerald); border-top:2px solid color-mix(in oklab, var(--gold) 25%, black); }
.footer-grid { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: 1.25rem 0; }
.footer-contact a { display:block; margin:.25rem 0; }
.subfooter { text-align:center; border-top:1px solid color-mix(in oklab, var(--gold) 25%, black); padding:.75rem 0; opacity:.8; }

/* Responsive */
@media (max-width: 980px) {
  .cards, .gallery, .review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .hero-inner { grid-template-columns: 1fr; }
  .cards, .gallery, .review-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .quote-form .grid { grid-template-columns: 1fr; }
  .nav { display:none; position:absolute; top:60px; right:0; background: var(--emerald); padding: .5rem; border-radius: .5rem 0 0 .5rem; border:1px solid color-mix(in oklab, var(--gold) 25%, black); }
  #nav-toggle:checked ~ .nav { display:flex; flex-direction:column; align-items:flex-start; }
  .burger { display:block; }
}