:root {
  --ink: #111111;
  --charcoal: #1f2933;
  --gold: #f4a62a;
  --eggshell: #f7f4ef;
  --stone: #e7e2d9;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--charcoal); background: var(--eggshell); }
img { max-width:100%; height:auto; display:block; }
a { color: var(--charcoal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { color: var(--ink); margin: 0 0 .5rem; }
p { line-height: 1.6; margin: 0 0 1rem; }

.site-header {
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem; background:#fff; border-bottom: 1px solid var(--stone);
}
.brand { display:flex; align-items:center; gap:.75rem; font-weight:800; text-transform: uppercase; }
.brand img { width:56px; height:auto; }
.brand-name { font-size:1.25rem; letter-spacing:.04em; }
.brand-sub { font-size:.75rem; letter-spacing:.3em; color: var(--gold); display:block; margin-top:-4px; }

.nav { display:flex; gap:1rem; align-items:center; }
.nav a { padding:.5rem .75rem; border-radius:.5rem; }
.nav .cta { background: var(--gold); color:#000; font-weight:700; }
.nav .cta:hover { filter: brightness(0.95); text-decoration:none; }

.nav-toggle { display:none; }
.hamburger { display:none; width:32px; height:24px; position: relative; cursor:pointer; }
.hamburger::before, .hamburger::after, .hamburger:empty { content:""; position:absolute; left:0; right:0; height:3px; background:var(--ink); }
.hamburger::before { top:0; }
.hamburger:empty { top:10px; }
.hamburger::after { bottom:0; }

@media (max-width: 840px) {
  .hamburger { display:block; }
  .nav { 
    position: fixed; inset: 64px 0 auto 0; background:#fff; border-bottom:1px solid var(--stone);
    transform: translateY(-110%); transition: .25s ease; flex-direction:column; padding: .75rem;
  }
  .nav a { width:100%; padding:.75rem; }
  .nav-toggle:checked ~ .hamburger + .nav { transform: translateY(0); }
}

main { display:block; }
.hero {
  display:grid; place-items:center; padding: 6rem 1rem 4rem;
  background: radial-gradient(1200px 600px at 10% 10%, #fff, var(--eggshell));
  border-bottom:1px solid var(--stone);
}
.hero-content { max-width: 980px; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: .75rem; }
.hero p { font-size: clamp(1rem, 2.5vw, 1.15rem); opacity:.85; }
.hero-cta { display:flex; gap: .75rem; justify-content:center; margin-top:1.25rem; }

.btn { display:inline-block; padding:.9rem 1.1rem; border-radius:.6rem; background: var(--ink); color:#fff; font-weight:700; }
.btn:hover { text-decoration:none; filter: brightness(1.1); }
.btn-outline { background: transparent; border:2px solid var(--ink); color: var(--ink); }

.grid { display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr); padding: 2rem 1rem; max-width: 1100px; margin: 0 auto; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 540px) { .grid { grid-template-columns: 1fr; } }

.card { background:#fff; border:1px solid var(--stone); border-radius:.8rem; padding:1.25rem; box-shadow: 0 2px 0 rgba(0,0,0,.03); }

.cta-band { text-align:center; padding:3rem 1rem; background:#fff; border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }
.cta-slim { text-align:center; padding:2rem 1rem; }

.page-header { padding: 3rem 1rem 2rem; max-width: 980px; margin: 0 auto; }
.service { max-width:980px; margin: 0 auto 1.25rem; padding:1.25rem; background:#fff; border:1px solid var(--stone); border-radius:.8rem; }

.gallery-grid { max-width:1100px; margin:0 auto; padding: 1rem; columns: 3 280px; column-gap: 1rem; }
.gallery-grid figure { break-inside: avoid; margin: 0 0 1rem; background:#fff; border:1px solid var(--stone); border-radius:.8rem; overflow:hidden; }
.gallery-grid figcaption { padding:.5rem .75rem; font-size:.95rem; }

.about { display:grid; grid-template-columns: 1.2fr 1fr; gap:1.25rem; max-width:1100px; margin: 0 auto; padding:1rem; }
.about .checklist { margin: .5rem 0 1rem; padding-left: 1rem; }
.about .about-media { align-self: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.contact { display:grid; grid-template-columns: 1.5fr .7fr; gap:1.25rem; max-width:1100px; margin:0 auto; padding:1rem; }
.contact .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.contact label { display:block; font-weight:600; margin-bottom:.5rem; }
.contact input, .contact textarea, .contact select { width:100%; padding:.8rem; margin-top:.35rem; border-radius:.5rem; border:1px solid var(--stone); background:#fff; }
.form-note { font-size:.9rem; opacity:.8; margin-top:.5rem; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact .grid-2 { grid-template-columns: 1fr; } }

.site-footer { background: #111; color:#fff; margin-top:2rem; }
.site-footer a { color:#fff; }
.footer-inner { max-width:1100px; margin:0 auto; padding:1.25rem; display:flex; justify-content:space-between; gap:1rem; }
.legal { border-top:1px solid rgba(255,255,255,.15); padding:.75rem 1.25rem; text-align:center; opacity:.75; }


/* --- Fix header overlap issue --- */
.site-header {
  flex-wrap: wrap;
  align-items: center;
}

.brand {
  flex: 1;
  min-width: 180px;
}

.nav {
  flex: 2;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Hide the big "Get a Quote" button on small screens */
@media (max-width: 840px) {
  .nav .cta {
    display: none;
  }
}