/* Base / tokens */
:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --brand: #0f172a;
  --brand-2: #334155;
  --surface: #f8fafc;

  --radius: 1rem;
  --shadow: 0 8px 30px rgb(0 0 0 / 10%);

  --s-1: clamp(0.5rem, 0.2rem + 1vw, 0.75rem);
  --s0: clamp(0.75rem, 0.5rem + 0.8vw, 1rem);
  --s1: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --s2: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --s3: clamp(1.5rem, 1.2rem + 2vw, 2.25rem);
  --s4: clamp(2rem, 1.5rem + 3vw, 3rem);
}

@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --fg:#e2e8f0; --surface:#0f172a; --muted:#94a3b8; --brand:#e2e8f0; --brand-2:#cbd5e1; }
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6; font-size: var(--s1);
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block }
.container{ width:min(100% - 2rem, 72rem); margin-inline:auto }

/* A11y */
.skip-link{
  position:absolute; left:-1000px; top:-1000px; padding:.5rem .75rem; background:#111; color:#fff; border-radius:.5rem;
}
.skip-link:focus{ left:.5rem; top:.5rem; z-index:1000 }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background: color-mix(in oklab, var(--bg), transparent 4%);
  backdrop-filter: saturate(120%) blur(6px); border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 92%);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; gap:1rem }
.brand{ display:flex; align-items:center; gap:.5rem; color:inherit; text-decoration:none; font-weight:700 }
.brand img{ border-radius:.5rem }
.nav-toggle{ background:transparent; border:0; padding:.5rem; border-radius:.75rem }
.nav-toggle:focus-visible{ outline: 2px solid currentColor; outline-offset:2px }

.primary-nav{ display:flex; align-items:center; gap:1rem }
.primary-nav ul{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0 }
.primary-nav a{ text-decoration:none; color:inherit }
.call-cta{ margin-left:.5rem }

@media (max-width: 48rem){
  .nav-toggle{ display:block }
  .primary-nav{ position:fixed; inset: var(--header-height, 64px) 0 auto 0; background:var(--bg);
    display:none; padding:1rem; border-bottom:1px solid color-mix(in oklab, var(--fg), transparent 90%); flex-direction:column; gap:1rem }
  .primary-nav[aria-hidden="false"]{ display:flex }
  .call-cta{ align-self:flex-start }
}

/* Hero */
.hero{ padding-block: clamp(2rem, 4vw, 5rem) }
.hero-grid{ display:grid; gap:1.5rem }
.hero-copy h1{ font-size: var(--s4); line-height:1.1; margin:0 0 .5rem }
.lead{ font-size: var(--s2); color: var(--muted) }
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-block:1rem }
.hero-bullets{ margin:0; padding-left:1.25rem; color:var(--muted) }
.hero-media img{ border-radius: var(--radius); box-shadow: var(--shadow) }

@media (min-width: 64rem){
  .hero-grid{ grid-template-columns: 1.1fr 0.9fr; align-items:center }
}

/* Checklist + Before/After */
.checklist-grid{ display:grid; gap:1.25rem }
@media (min-width: 64rem){
  .checklist-grid{ grid-template-columns: 1fr 1fr }
}
.checklist-list{ padding-left:1.25rem }
.before-after.card{ padding:1rem }
.ba-wrap{ position:relative; overflow:hidden; border-radius:.75rem; line-height:0 }
.ba{ width:100%; display:block }
.ba.before{ position:relative; height:auto } /* gives the container its height */
.ba.after{ position:absolute; inset:0; width:auto; height:auto; object-fit:cover }
.ba-slider{ position:relative; width:100%; margin-top: .75rem }

.ba-labels{ display:flex; justify-content:space-between; font-size:.875rem; color:var(--muted); margin-top:.25rem }

/* Services */
.services-grid{ display:grid; gap: clamp(.75rem, 2vw, 1rem); grid-template-columns: repeat(2, 1fr) }
@media (min-width: 48rem){ .services-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 64rem){ .services-grid{ grid-template-columns: repeat(4, 1fr) } }
.card{ background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow) }
.card img{ width:100%; aspect-ratio: 4/3; object-fit: cover }
.card-body{ padding:1rem }
.card h3{ margin:.25rem 0 .5rem }

/* Gallery */
.gallery-grid{ display:grid; gap: clamp(.5rem, 1.5vw, .75rem); grid-template-columns: repeat(2,1fr) }
@media (min-width: 48rem){ .gallery-grid{ grid-template-columns: repeat(3,1fr) } }
.gallery figure{ margin:0 }
.gallery figcaption{ padding:.75rem; font-size:.875rem; color:var(--muted) }

/* Testimonials */
.testimonials-grid{ display:grid; gap:1rem; grid-template-columns: repeat(1,1fr) }
@media (min-width: 48rem){ .testimonials-grid{ grid-template-columns: repeat(2,1fr) } }
.quote{ padding:1rem }
.quote p{ margin:0 0 .75rem }
.byline{ color:var(--muted); font-size:.95rem }

/* Contact */
.contact-grid{ display:grid; gap:1rem }
@media (min-width: 64rem){ .contact-grid{ grid-template-columns: 1.1fr .9fr } }
.contact-form{ padding:1rem; display:grid; gap:.75rem }
.field{ display:grid; gap:.25rem }
input, textarea{
  font: inherit; padding:.65rem .75rem; border-radius:.75rem; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background:#fff;
}
@media (prefers-color-scheme: dark){
  input, textarea{ background:#0b1220; color: var(--fg) }
}
input:focus, textarea:focus{ outline:2px solid var(--brand); outline-offset:2px }
.actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.contact-card{ padding:1rem }
.contact-list{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.25rem }
.map-wrap{ aspect-ratio: 4/3; overflow:hidden; border-radius:.75rem }
.map-wrap iframe{ width:100%; height:100%; border:0 }

/* Footer */
.site-footer{ border-top:1px solid color-mix(in oklab, var(--fg), transparent 90%); padding-block:1.25rem; margin-top:2rem }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.to-top{ display:inline-flex; padding:.5rem; border-radius:.5rem; background:var(--surface) }

/* Utilities */
.section{ padding-block: clamp(2rem, 3vw, 4rem) }
.grid{ display:grid; gap: clamp(.75rem, 2vw, 1rem) }
.btn{ display:inline-block; padding:.75rem 1rem; border-radius:.75rem; font-weight:600; text-decoration:none; line-height:1; border:1px solid transparent }
.btn-primary{ background: var(--brand); color:#fff }
.btn-outline{ background:transparent; border-color: color-mix(in oklab, var(--fg), transparent 80%) }
.max-readable{ max-width: 65ch }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}