/*
  K2 Contractors — Rustic modern theme
  Primary and accents chosen to fit simple, approachable, rustic feel.
*/
:root{
  --green:#003300; /* primary deep green */
  --green-2:#0a4a0a; /* darker shade for gradients */
  --brown:#7A5C43;   /* warm wood */
  --sand:#F0E7D8;     /* sand */
  --stone:#E7E0D6;   /* light stone */
  --charcoal:#1F2326; /* deep neutral */
  --gold:#C8A85A;     /* warm highlight */
  --ink:#2B2F33;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
}

ol li{
  list-style-type: none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:linear-gradient(180deg,var(--sand),#fff 40%);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:16px;
}
img{max-width:100%; display:block}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}

.container{ width:min(1100px, 92%); margin-inline:auto }
.section{ padding: 72px 0 }
.section.alt{ background: linear-gradient(180deg, var(--stone), #fff) }
.section-header{ text-align:center; margin-bottom: 36px }
.section-header h2{ font-family:"Merriweather", Georgia, serif; font-size: clamp(1.6rem, 2.2vw, 2.2rem); margin:0 0 8px }
.section-header p{ color:#5b5f64; margin:0 }

.topbar{ background: var(--charcoal); color: #cbd5df; font-size:14px }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 0 }
.topbar a{ color:#e6ecef }
.topbar .btn-xs{ padding:8px 12px; font-size:.9rem; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:transparent }
.topbar .btn-xs:hover{ background: rgba(255,255,255,.08) }

.header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(255,255,255,1); border-bottom:1px solid rgba(0,0,0,.06) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink) }
.menu{ display:flex; align-items:center; gap:22px }
.menu a{ color:var(--ink); font-weight:500 }
.menu .btn-sm{ padding:10px 14px }
.nav-toggle{ display:none; font-size:22px; border:1px solid rgba(0,0,0,.15); background:#fff; padding:6px 10px; border-radius:10px }

/* Buttons */
.btn{ display:inline-block; background: linear-gradient(135deg, var(--green), var(--green-2)); color:#fff; padding:14px 20px; border-radius: 12px; box-shadow: var(--shadow); border:none; font-weight:600 }
.btn:hover{ filter:brightness(1.05) }
.btn-outline{ background: transparent; color: var(--green); border:2px solid var(--green) }
.btn-outline:hover{ background: rgba(0,51,0,.06) }

/* Hero */
.hero{ position:relative; padding: 88px 0 64px; background:
  linear-gradient(rgba(31,35,38,.35), rgba(31,35,38,.35)),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 40 40"><defs><pattern id="p" width="40" height="40" patternUnits="userSpaceOnUse"><rect width="40" height="40" fill="%23E7E0D6"/><path d="M0 39h40M0 0h40M0 0v40M39 0v40" stroke="%23cfc6bb" stroke-width="1" opacity=".35"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>') center/auto repeat;
  color:#fff;
}
.hero:before{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 400px at 30% 20%, rgba(200,168,90,.55), transparent 60%), linear-gradient(135deg, rgba(0,51,0,.85), rgba(122,92,67,.85)); mix-blend: multiply }
.hero-inner{ position:relative }
.hero h1{ font-family:"Merriweather", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); margin:0 0 10px }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 65ch }
.cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
.trust{ display:flex; gap:18px; flex-wrap:wrap; padding:0; margin:20px 0 0; list-style:none }
.trust li{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:10px 12px; border-radius: 10px }

/* Cards / Grid */
.grid{ display:grid; gap: 18px }
.services{ grid-template-columns: repeat(4, 1fr) }
.gallery{ grid-template-columns: repeat(3, 1fr) }
.testimonials{ grid-template-columns: repeat(3, 1fr) }

.card{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow) }
.service .icon{ font-size:32px }
.service h3{ margin:8px 0 }
.card .more{ color:var(--brown); font-weight:600 }

/* Process */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; counter-reset: step }
.process li{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius: var(--radius); padding:16px 16px 18px; box-shadow: var(--shadow) }
.process h3{ margin:6px 0 6px }
.process p{ margin:0 }

/* Gallery */
.gallery figure{ border-radius: var(--radius); overflow:hidden }
.gallery figcaption{ padding:8px 10px; background: var(--charcoal); color:#fff; font-size:.95rem }

/* Services page */
.page-hero{ background: linear-gradient(180deg, var(--stone), #fff); padding: 56px 0 24px; border-bottom:1px solid rgba(0,0,0,.06) }
.page-hero h1{ font-family:"Merriweather", Georgia, serif; margin:0 0 8px }
.small.muted{ color:#6a7076; margin:6px 0 0 }
.service-sections{ display:grid; gap:36px }
.service-detail header h2{ margin:0 0 6px }
.service-grid{ display:grid; gap:18px; grid-template-columns: 1fr 1fr; margin: 10px 0 12px }
.service-detail ul{ padding-left: 20px }

/* Form / misc */
.form{ padding: 18px 18px 8px }
.form-msg{ margin:6px 0 12px; min-height: 22px; font-weight:600 }
.center{ text-align:center }

/* Footer */
.footer{ background: var(--charcoal); color:#e8ecef; padding-top: 28px }
.footer-inner{ display:grid; gap:18px; grid-template-columns: 1.1fr 1fr 1fr; align-items:start }
.footer a{ color:#e8ecef }
.legal{ border-top:1px solid rgba(255,255,255,.12); margin-top:12px; padding:12px 0 20px; color:#bac1c8 }

/* Animations */
[data-anim]{ opacity:0; transform: translateY(12px); transition:.6s ease }
[data-anim].in{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 960px){
  .services{ grid-template-columns: repeat(2, 1fr) }
  .gallery{ grid-template-columns: repeat(2, 1fr) }
  .testimonials{ grid-template-columns: 1fr 1fr }
  .process{ grid-template-columns: 1fr 1fr }
  .service-grid{ grid-template-columns: 1fr }
}
@media (max-width: 700px){
  .menu{ display:none; position:absolute; right:4%; top:64px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 12px; padding:12px; box-shadow: var(--shadow); flex-direction:column; gap:10px }
  .nav-toggle{ display:block }
  .trust{ gap:10px }
  .services, .gallery{ grid-template-columns: 1fr }
  .testimonials{ grid-template-columns: 1fr }
  .process{ grid-template-columns: 1fr }
  .footer-inner{ grid-template-columns: 1fr }
}