/* dshd3 main styles */
:root{
  --bg:#ffffff;
  --soft:#f6f7f8;
  --text:#101112;
  --muted:#60656f;
  --line:#e7eaee;
  --accent:#2bb673;
  --accent2:#1f9a5e;
  --shadow: 0 12px 30px rgba(16,17,18,.08);
  --shadow2: 0 10px 22px rgba(16,17,18,.10);
  --radius: 22px;
  --radius2: 16px;
  --container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.35;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 18px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(231,234,238,.7);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand__mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), #7ce2b1);
  box-shadow:0 10px 24px rgba(43,182,115,.22);
}
.brand--footer .brand__mark{box-shadow:none}
.nav{display:flex; align-items:center}
.nav__list{display:flex; align-items:center; gap:20px; padding:0; margin:0; list-style:none; color:#1b1d20; font-weight:600; font-size:14px}
.nav__link{opacity:.86}
.nav__link:hover{opacity:1}
.cta{display:flex; gap:10px; align-items:center}
.btn{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  transition:.18s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(16,17,18,.08)}
.btn--primary{background:var(--accent); border-color:var(--accent); color:#0b1510}
.btn--primary:hover{background:var(--accent2); border-color:var(--accent2)}
.btn__dot{width:8px;height:8px;border-radius:50%; background:rgba(0,0,0,.35)}

.navToggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  width:44px; height:44px;
  border-radius:14px;
  padding:0;
  align-items:center; justify-content:center;
  gap:5px;
}
.navToggle span{display:block; width:18px; height:2px; background:#111; border-radius:2px; opacity:.8}

/* Hero */
.hero{padding:34px 0 18px}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:stretch}
.hero__media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#dfe6e2;
  position:relative;
  min-height:460px;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.12));
  pointer-events:none;
}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__content{
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  padding:26px 24px;
  box-shadow:0 8px 20px rgba(16,17,18,.06);
  display:flex; flex-direction:column; justify-content:center;
}
.kicker{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:12px; letter-spacing:.9px; text-transform:uppercase; color:#1c2b22}
.kicker span{width:10px;height:10px;border-radius:3px;background:var(--accent); box-shadow:0 8px 16px rgba(43,182,115,.24)}
h1{margin:12px 0 10px; font-size:44px; line-height:1.05; letter-spacing:-.8px}
.lead{color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 18px; max-width:44ch}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.chip{padding:8px 12px; border-radius:999px; background:var(--soft); border:1px solid rgba(231,234,238,.9); font-weight:700; font-size:12px; color:#1a1d21}

/* Sections */
.section{padding:56px 0}
.section--soft{background:var(--soft); border-top:1px solid rgba(231,234,238,.7); border-bottom:1px solid rgba(231,234,238,.7)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px}
.section__title{margin:0; font-size:28px; letter-spacing:-.4px; line-height:1.15}
.section__sub{margin:0; color:var(--muted); max-width:60ch; font-size:14px; line-height:1.6}

/* Cards */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.grid-6{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius2);
  padding:18px 16px;
  box-shadow:0 6px 14px rgba(16,17,18,.05);
  transition:.18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow2)}
.card__icon{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg, rgba(43,182,115,.18), rgba(43,182,115,.06));
  border:1px solid rgba(43,182,115,.22);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  margin-bottom:12px;
}
.card__title{margin:0 0 6px; font-size:16px; letter-spacing:-.2px}
.card__text{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

/* Services */
.service{overflow:hidden; padding:0}
.service__media{height:160px; background:#e3e8e4; border-bottom:1px solid var(--line)}
.service__media img{width:100%; height:100%; object-fit:cover}
.service__body{padding:16px}
.service__title{margin:0 0 6px; font-size:16px; letter-spacing:-.2px}
.service__text{margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.6}
.service__link{font-weight:800; font-size:13px; color:#1a1d21; display:inline-flex; gap:8px; align-items:center}
.service__link span{width:18px;height:18px;border-radius:6px; background:rgba(43,182,115,.18); display:inline-flex; align-items:center; justify-content:center; font-weight:900}

/* Split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.panel{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 20px rgba(16,17,18,.06);
  padding:22px;
}
.panel h2{margin:0 0 10px; font-size:26px; letter-spacing:-.35px; line-height:1.15}
.panel p{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.7}
.bullets{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.bullets li{display:flex; gap:10px; align-items:flex-start; color:#2a2e34; font-weight:600; font-size:13px; line-height:1.55}
.tick{width:18px; height:18px; border-radius:6px; background:rgba(43,182,115,.2); border:1px solid rgba(43,182,115,.24); flex:0 0 18px; margin-top:2px}
.split__media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:360px}
.split__media img{width:100%; height:100%; object-fit:cover}

/* Testimonials */
.quote{padding:18px 18px 16px}
.quote__text{margin:0 0 12px; color:#2a2e34; font-size:14px; line-height:1.7}
.quote__who{display:flex; align-items:center; justify-content:space-between; gap:10px}
.who{display:flex; align-items:center; gap:10px; font-weight:800; font-size:13px}
.avatar{width:34px;height:34px;border-radius:12px; background:linear-gradient(135deg, rgba(16,17,18,.10), rgba(16,17,18,.02)); border:1px solid rgba(231,234,238,.9)}
.tag{font-size:12px; font-weight:800; color:#1f2a23; background:rgba(43,182,115,.16); border:1px solid rgba(43,182,115,.2); padding:6px 10px; border-radius:999px}

/* CTA band */
.ctaBand{
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(43,182,115,.18), rgba(43,182,115,.06));
  border:1px solid rgba(43,182,115,.22);
  padding:26px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 10px 24px rgba(43,182,115,.10);
}
.ctaBand h3{margin:0 0 6px; font-size:22px; letter-spacing:-.25px}
.ctaBand p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

/* Page hero */
.pageHero{
  padding:40px 0 22px;
  border-bottom:1px solid rgba(231,234,238,.8);
}
.pageHero__grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.pageHero__media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:320px}
.pageHero__media img{width:100%; height:100%; object-fit:cover}
.pageHero h1{font-size:40px; margin:0 0 10px}
.pageHero p{margin:0; color:var(--muted); font-size:15px; line-height:1.7; max-width:60ch}

/* Footer */
.footer{padding:34px 0; border-top:1px solid rgba(231,234,238,.8); color:#1a1d21}
.footer__row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer small{color:var(--muted)}
.footlinks{display:flex; gap:14px; flex-wrap:wrap; font-weight:700; font-size:13px; opacity:.9}
.footlinks a:hover{opacity:1}

/* Mobile */
@media (max-width: 980px){
  .navToggle{display:inline-flex}
  .nav{position:fixed; inset:70px 16px auto 16px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px; display:none}
  body.navOpen .nav{display:block}
  .nav__list{flex-direction:column; align-items:flex-start; gap:12px}
  .cta{display:none}
  .hero__grid{grid-template-columns:1fr}
  .pageHero__grid{grid-template-columns:1fr}
  h1{font-size:38px}
  .grid-3{grid-template-columns:1fr}
  .grid-6{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero__media{min-height:360px}
  .split__media{min-height:320px}
}