:root{
  --forest: #245729;
  --leaf: #7fbf5a;
  --leaf-strong: #4f9b39;
  --earth: #8B6F47;
  --cream: #F5F1E8;
  --char: #333233;
  --white: #ffffff;
  --container-max: 1200px;
  --transition-fast: 220ms;
}
*{box-sizing:border-box;margin:0;padding:0}
body{ font-family: "Open Sans", sans-serif; color:var(--char); background:var(--cream); line-height:1.6; }
.container{max-width:var(--container-max);margin:0 auto;padding:0 20px}
.narrow{max-width:960px;margin-left:auto;margin-right:auto}
.site-header{background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,0.04);position:sticky;top:0;z-index:60}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{height:96px;width:auto;display:block}
.main-nav ul{list-style:none;display:flex;gap:18px;align-items:center;margin:0}
.main-nav a{font-family:"Montserrat",sans-serif;font-weight:600;color:var(--char);text-decoration:none;padding:8px 10px;border-radius:6px;transition:var(--transition-fast)}
.main-nav a:hover{color:var(--leaf);background:rgba(127,191,90,0.07)}
.contact-cta{background:var(--leaf-strong);color:var(--white);padding:8px 12px;border-radius:6px}
.mobile-menu-button{display:none;background:transparent;border:0;padding:8px;color:var(--char)}
.mobile-nav{position:fixed;inset:0;z-index:200;pointer-events:none}
.mobile-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);opacity:0;transition:300ms ease;pointer-events:none}
.mobile-panel{position:fixed;left:0;right:0;top:0;transform: translateY(-100%); transition:360ms cubic-bezier(.2,.9,.2,1); background:#fff; box-shadow:0 22px 60px rgba(0,0,0,0.2)}
.mobile-panel-inner{padding:28px 20px;position:relative}
.mobile-close{background:transparent;border:0;font-size:36px;position:absolute;top:12px;right:12px}
.mobile-panel ul{list-style:none;display:flex;flex-direction:column;gap:18px}
.mobile-panel a{text-decoration:none;color:var(--char);font-family:"Montserrat",sans-serif;font-weight:600}
html.mobile-open .mobile-overlay{opacity:0.46;pointer-events:auto;background:rgba(0,0,0,0.46)}
html.mobile-open .mobile-panel{transform: translateY(0);pointer-events:auto;}
.hero{background-image:url('dna_landscaping_brand_assets/web_optimized/hero_1600.jpg');background-size:cover;background-position:center;position:relative;min-height:74vh;display:flex;align-items:center;background-blend-mode:multiply}
.hero::before{content:"";position:absolute;inset:0;background:rgba(12,44,12,0.7)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-text{max-width:920px;margin:0 auto;color:var(--white);padding:48px 20px}
.hero-title{font-family:"Montserrat",sans-serif;font-weight:800;font-size:3rem;margin-bottom:14px;text-shadow:0 12px 32px rgba(0,0,0,0.7)}
.hero-sub{font-size:1.12rem;margin-bottom:22px;color:rgba(255,255,255,0.95)}
.btn{display:inline-block;padding:14px 28px;border-radius:10px;font-weight:700;text-decoration:none;font-family:"Montserrat",sans-serif;transition:220ms ease}
.btn-primary{background:var(--leaf);color:var(--white)}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(127,191,90,0.18)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.18);color:var(--white)}
.content-section{padding:80px 0}
.bg-soft{background:var(--white)}
.bg-accent{background:linear-gradient(90deg,var(--white),#fbfbfa)}
.content-section h2{font-family:"Montserrat",sans-serif;margin-bottom:12px;font-size:1.5rem;color:var(--forest)}
.service-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;margin-top:32px}
.service-card{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 8px 22px rgba(0,0,0,0.06);transition:300ms cubic-bezier(.2,.9,.2,1)}
.service-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(18,54,18,0.12)}
.service-card h3{font-family:"Montserrat",sans-serif;font-size:1.1rem;color:var(--forest);margin-bottom:10px}
.reveal-on-load, .reveal-on-scroll { opacity:0; transform: translateY(14px); transition: 520ms cubic-bezier(.2,.9,.2,1) }
.reveal-on-load.reveal, .reveal-on-scroll.reveal { opacity:1; transform: translateY(0) }
.site-footer{background:var(--forest);color:var(--white);padding:40px 0}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
@media (max-width:640px){
  .main-nav{display:none}
  .mobile-menu-button{display:block}
  .logo{height:72px}
  .hero-title{font-size:2rem;text-align:center}
  .hero-text{text-align:center}
}

/* Phone input - same visual treatment as other inputs */
input[type="tel"] {
  -webkit-text-security: none;
}

/* Phone input - same visual treatment as other inputs */
input[type="tel"] {
  -webkit-text-security: none;
}