:root{
  --green:#1f5e3b;
  --green-700:#174a2e;
  --green-500:#2f7d52;
  --leaf:#8fd6a6;
  --cream:#f4fbf6;
  --card:#ffffff;
  --text:#223029;
  --muted:#5f6b66;
  --border:#e1ece5;
  --shadow: 0 12px 30px rgba(10,40,25,.12);
  --radius:18px;
  --radius-sm:12px;
  --pad: clamp(14px, 2.4vw, 20px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{width:min(1140px, 92vw); margin-inline:auto}

/* ---------------- Header / Nav ---------------- */
.site-header{
  background:#ffffffcc;
  padding: 10px 0;
  border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
}
.header-inner{
  display:grid; grid-template-columns:140px 1fr;
  gap:12px; align-items:center;
}
.logo{width:100%;height:auto;display:block;filter: drop-shadow(0 8px 16px rgba(0,0,0,.08))}
.logo.small{width:72px}

.quick-nav{justify-self:end; display:flex; gap:12px; flex-wrap:wrap}
.qnav{
  position:relative;
  font-weight:650;
  color:var(--green-700);
  background:#fff;
  border:1px solid var(--border);
  padding:.48rem .8rem;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(10,40,25,.06);
  text-decoration:none;
  transition:all .2s;
}
.qnav::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--leaf),var(--green));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  border-radius:2px;
}
.qnav:hover{background:#edf8f1; border-color:var(--green-500)}
.qnav:hover::after{transform:scaleX(1)}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  width:100%;
  min-height:clamp(420px, 70vh, 720px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border-bottom:1px solid var(--border);

  /* Background image fill */
  background-image: url("assets/images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(7,30,20,.55),rgba(18,70,42,.35));
}
.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding: clamp(16px, 3vw, 28px);
  max-width: 720px;
}
.hero-content h1{
  font-size:clamp(32px,6vw,56px);
  margin:0 0 8px;
  text-shadow:0 2px 18px rgba(0,0,0,.3);
}
.tagline{margin:0 0 14px;color:#e8f7ef}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:14px;text-decoration:none;font-weight:700;transition:.2s}
.btn.primary{color:#fff;background:linear-gradient(180deg,var(--green),var(--green-700));box-shadow:0 10px 24px rgba(21,77,46,.25)}
.btn.outline{border:2px solid #fff;color:#fff;background:transparent}
.btn.outline:hover{background:rgba(255,255,255,.14)}
.badges{display:flex;gap:14px;flex-wrap:wrap;padding:0;margin:14px 0 0;list-style:none}
.badges li{background:rgba(255,255,255,.12);padding:.42rem .72rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:.93rem;color:#f4fff5}

/* ---------------- Sections ---------------- */
.section{padding:clamp(38px,7.4vw,80px) 0}
.section h2{font-size:clamp(24px,3.2vw,36px);margin:0 0 18px;color:var(--green-700)}
.note{color:var(--muted);margin-top:12px}

/* ---------------- Service Cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{
  grid-column:span 3;
  background:#fff;
  border:3px solid var(--green-700); /* dark green frame */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;min-height:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,40,25,.14);border-color:var(--green-500)}
.service-figure{aspect-ratio:1/1;overflow:hidden;background:#eef6f0;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.service-img{
  width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .6s;
  border-top-left-radius:var(--radius); /* rounded image corners */
  border-top-right-radius:var(--radius);
}
.card:hover .service-img{transform:scale(1.05)}
.card-body{padding:var(--pad)}
.card h3{margin:2px 0 8px}
.card .price{margin:0;font-weight:800;font-size:1.25rem;color:var(--green)}
.card ul{margin:14px 0 0 0;padding:0;list-style:none}
.card ul li{display:flex;align-items:flex-start;gap:10px;padding:.18rem 0}
.card ul li::before{content:"✔";flex:0 0 auto;margin-top:1px;font-weight:800;color:var(--green)}

/* ---------------- Gallery ---------------- */
.gallery .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.grid-item{grid-column: span 4}
.gallery img{width:100%;height:260px;object-fit:cover;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;transition:transform .25s,box-shadow .25s}
.grid-item:hover img{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 40px rgba(10,40,25,.14)}

/* ---------------- Area ---------------- */
.area{background:linear-gradient(180deg,#ffffff 0%,#f9fdfa 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------------- Contact ---------------- */
.contact-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.contact-list{list-style:none;padding:0;margin:10px 0 0}
.contact-list a{text-decoration:none;font-weight:750;color:var(--green-700);border-bottom:2px solid transparent;transition:.15s}
.contact-list a:hover{color:var(--green);border-color:var(--green)}
.contact-form{background:#fff;padding:var(--pad);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-form label{display:block;margin:10px 0}
.contact-form span{display:block;font-size:.9rem;margin-bottom:6px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem .85rem;border:1px solid #dbe7df;border-radius:var(--radius-sm);font:inherit;transition:.15s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 35%,transparent)}
.form-note{font-size:.9rem;color:var(--muted)}

/* ---------------- Footer ---------------- */
.site-footer{background:#0f2018;color:#d8e7dd;padding:22px 0;border-top:1px solid #0b1a13}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center}
.footer-nav a{color:#d8e7dd;text-decoration:none;margin-right:14px}
.footer-nav a:hover{text-decoration:underline}
.social .fb{display:flex;align-items:center;gap:8px;color:#d8e7dd;text-decoration:none}
.social .fb:hover{color:#a9e4ba}
.powered{text-align:center;margin-top:14px;font-size:.9rem;color:#bbb}
.powered .code{color:#007bff;font-weight:700}
.powered .flux{color:#ff6600;font-weight:700}

/* ---------------- Modals ---------------- */
.modal{border:none;border-radius:var(--radius);padding:0;max-width:min(680px,92vw)}
.modal::backdrop{background:rgba(0,0,0,.5)}
.modal-inner{padding:var(--pad)}
.modal h3{margin:0 0 10px;color:var(--green-700)}

/* ---------------- Back-to-top ---------------- */
.back-to-top{position:fixed;right:16px;bottom:16px;background:var(--green);color:#fff;text-decoration:none;border-radius:999px;padding:.56rem .8rem;font-weight:900;box-shadow:var(--shadow);display:none}

/* JS fade-in class */
.fade-in{opacity:1 !important;transition:opacity .8s ease-in-out}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){.container{width:min(1060px,92vw)}}
@media (max-width:1024px){.cards .card{grid-column:span 6}.gallery .grid .grid-item{grid-column:span 6}}
@media (max-width:760px){
  .header-inner{grid-template-columns:120px 1fr}
  .quick-nav{justify-self:start}
  .hero{min-height:46vh}
  .cards .card{grid-column:span 12}
  .gallery .grid .grid-item{grid-column:span 12}
  .contact-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
}