<style>

.service-img{
  display:block;
  width:100%;
  height:auto;            
  border-radius:14px;
  box-shadow:var(--shadow);
  background:#fffaf3;    
  margin:12px 0 18px;
}

@media (max-width: 899px){
  .service-img{
    max-height:280px;
    object-fit:contain;
  }
}


@media (min-width: 900px){
  .service-img{
    height: clamp(340px, 36vw, 520px); 
    object-fit: contain;               
    padding: 10px;                      
  }
}


@media (hover:hover){
  .service-img{ transition: transform .25s ease }
  .service-img:hover{ transform: translateY(-2px) }
}
    :root{
      --bg:#F5F0E6;          /* beige background */
      --fg:#0f172a;          /* main text */
      --green:#2f7a5b;       /* brand green */
      --green-600:#256b4f;
      --orange:#ff7a00;      /* accent orange */
      --muted:#6b7280;       /* secondary text */
      --card:#ffffffee;      /* soft card */
      --shadow: 0 12px 30px rgba(0,0,0,.08);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:linear-gradient(120deg,var(--bg),#fff)}
    a{color:inherit;text-decoration:none}
    .container{max-width:1120px;margin-inline:auto;padding:24px}
    /* Header */
    header{position:sticky;top:0;background:rgba(245,240,230,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid rgba(0,0,0,.06);z-index:50}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700}
    /* OLD placeholder badge hidden */
    .brand-mark{display:none}
    /* Responsive logo image */
    .brand .brand-logo{
      width:clamp(28px,6vw,40px);
      height:clamp(28px,6vw,40px);
      border-radius:12px;
      object-fit:cover;
      box-shadow:0 6px 16px rgba(47,122,91,.25);
      display:block;
    }
    .brand-name{letter-spacing:.3px}
    .nav-cta{display:flex;gap:12px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.08);font-weight:600;transition:.2s ease}
    .btn svg{width:18px;height:18px}
    .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
    .btn-primary{background:var(--green);color:#fff;border-color:transparent}
    .btn-primary:hover{background:var(--green-600)}
    .btn-ghost{background:#fff}
    /* Hero */
    .hero{padding:64px 24px 32px}
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,0,0,.08);padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:600}
    .title{font-size:clamp(28px,6vw,48px);line-height:1.1;margin:14px 0 10px}
    .subtitle{color:var(--muted);font-size:clamp(16px,3vw,18px)}
    .hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
    .hero-card{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
    .hero-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;list-style:none}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,122,0,.08);color:#a14a00;font-weight:600;border:1px solid rgba(255,122,0,.25)}
    /* Sections */
    .section{padding:42px 24px}
    .section h2{font-size:clamp(22px,4.5vw,32px);margin:0 0 16px}
    .muted{color:var(--muted)}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .card{grid-column:span 6;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
    .card h3{margin:0 0 8px;font-size:18px}
    .card p{margin:0;color:var(--muted)}
    .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(47,122,91,.08);color:var(--green);border:1px solid rgba(47,122,91,.25);padding:6px 10px;border-radius:999px;font-weight:600}
    /* CTA band */
    .cta{background:linear-gradient(135deg, rgba(47,122,91,.12), rgba(255,122,0,.10));border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
    .cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)}
    /* Footer */
    footer{padding:28px 24px;color:var(--muted)}
    footer .links{display:flex;gap:14px;flex-wrap:wrap}
    @media (max-width: 900px){
      .hero-grid{grid-template-columns:1fr}
      .card{grid-column:span 12}
    }

.brand { gap: clamp(10px, 2.2vw, 14px); }

.brand .brand-logo{
  width: clamp(32px, 7vw, 106px);
  height: clamp(32px, 7vw, 106px);
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(47,122,91,.25);
}

.brand-name{
  font-size: clamp(18px, 3vw, 22px);
  letter-spacing: .3px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .brand .brand-logo {
    width: clamp(66px, 9vw, 82px);
    height: clamp(66px, 9vw, 82px);
  }

  .brand-name {
    font-size: clamp(17px, 4vw, 20px);
  }
}
  </style>