/* fremontlandscapingpros.com, nature archetype, hue 40, radius 3px, head Fraunces */
:root{
  --loam:#211f17; --moss:#63705f; --field:#f6f6ec; --mist:#ffffff;
  --furrow:#dfe3cf; --leaf:hsl(40 46% 38%); --leaf-dk:hsl(40 46% 28%);
  --canopy:hsl(140 30% 18%); --canopy-dk:hsl(140 32% 12%);
  --curve:3px; --wrap:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 'Public Sans',system-ui,sans-serif;color:var(--loam);background:var(--field)}
h1,h2,h3{font-family:'Fraunces',sans-serif;text-transform:none;letter-spacing:.4px;line-height:1.08}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.55rem,3vw,2.1rem);font-weight:600;margin:0 0 14px}
h3{font-size:1.15rem;font-weight:600;margin:22px 0 8px}
p{margin:0 0 16px}
ul{margin:0 0 16px 22px}
li{margin:0 0 8px}
a{color:var(--leaf-dk)}
a:focus-visible,button:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* header */
header{background:hsl(40 38% 95%);border-bottom:none}
.nav{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--loam);font-family:'Fraunces',sans-serif;font-size:1.22rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.brand svg{flex:0 0 auto}
.nav-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:var(--loam);text-decoration:none;font-size:.94rem;font-weight:600}
.nav-links a:hover{color:var(--leaf-dk)}
.nav-call{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1rem;color:var(--leaf-dk);text-decoration:none;white-space:nowrap}

/* hero */
.hero{padding:64px 0 56px;text-align:center;background:
 linear-gradient(180deg,var(--mist) 0%,var(--field) 100%)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--moss);margin-bottom:18px}
.hero h1{max-width:880px;margin:0 auto 18px}
.hero .lift{max-width:640px;margin:0 auto 34px;font-size:1.12rem}

/* call card -- the worksite readout (the ONE shadow) */
.callcard{max-width:520px;margin:0 auto;background:var(--mist);border:1px solid var(--furrow);border-top:6px solid var(--leaf);border-radius:var(--curve);padding:26px 30px;box-shadow:0 10px 28px hsl(82 30% 60% / .22)}
.callcard .lbl{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--moss)}
.callcard .num{display:block;font-family:'IBM Plex Mono',monospace;font-size:clamp(1.7rem,4.4vw,2.3rem);font-weight:600;color:var(--loam);text-decoration:none;margin:6px 0 4px}
.callcard .num:hover{color:var(--leaf-dk)}
.callcard .sub{font-size:.95rem;color:var(--moss);margin-bottom:16px}
.btn{display:inline-block;background:var(--leaf);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:13px 26px;border-radius:var(--curve);border:none;cursor:pointer}
.btn:hover{background:var(--leaf-dk)}
.btn:active{transform:scale(.98)}
.authority{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--moss);margin-top:16px;letter-spacing:.3px}

/* mascot */
.mascot{margin:34px auto 0;width:150px}

/* sections */
section{padding:56px 0}
section.alt{background:var(--mist);border-top:1px solid var(--furrow);border-bottom:1px solid var(--furrow)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* services grid: 2 feature + 4 standard, never identical triplets */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc a{background:var(--mist);border:1px solid var(--furrow);border-radius:var(--curve);padding:22px;text-decoration:none;color:var(--loam);display:block}
.svc a:nth-child(1),.svc a:nth-child(2){border-top:4px solid var(--leaf);padding:26px 24px}
.svc a:hover{border-color:var(--leaf)}
.svc h3{margin:0 0 8px;color:var(--leaf-dk)}
.svc p{margin:0;font-size:.95rem;color:var(--moss)}

/* accent band -- one blunt sentence */
.band{background:var(--leaf);color:#fff;padding:44px 0;text-align:center}
.band .big{font-family:'Fraunces',sans-serif;text-transform:none;font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:600;line-height:1.15}
.band a{color:#fff}

/* checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;list-style:none;margin:0}
.checks li{padding-left:28px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:var(--leaf);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}

/* readout figure */
.readout{border:1px solid var(--furrow);border-left:4px solid var(--canopy);background:var(--mist);border-radius:var(--curve);padding:18px 22px;font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--canopy-dk)}

/* faq */
.faq details{border:1px solid var(--furrow);border-radius:var(--curve);background:var(--mist);margin-bottom:10px;padding:0 18px}
.faq summary{font-weight:600;padding:14px 0;cursor:pointer;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--leaf-dk);font-weight:700}
.faq details[open] summary::after{content:"-"}
.faq details p{color:var(--moss)}

/* prose pages */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:38px}
.page-head{background:var(--mist);border-bottom:1px solid var(--furrow);padding:44px 0 36px}
.page-head .wrap{max-width:760px}
.page-head h1{font-size:clamp(2rem,4.6vw,3.1rem)}
.page-head .lift{max-width:700px;font-size:1.08rem;margin-top:12px}

/* inline cta */
.cta-inline{border:1px solid var(--furrow);border-top:4px solid var(--leaf);background:var(--mist);border-radius:var(--curve);padding:22px 26px;margin:30px 0;text-align:center}
.cta-inline .num{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;color:var(--loam);text-decoration:none;display:inline-block;margin:6px 0 10px}

/* form */
.qform{display:grid;gap:12px;max-width:520px}
.qform input,.qform textarea{padding:12px;border:1px solid var(--furrow);border-radius:var(--curve);font:inherit;background:var(--mist)}
.qform input:focus-visible,.qform textarea:focus-visible{outline:2px solid var(--leaf);outline-offset:1px}

/* footer -- HARD RULE grid: never flex, 1.8fr/1fr/1fr, always */
footer{background:var(--canopy-dk);color:hsl(140 20% 82%);padding:48px 0 90px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:32px;align-items:start}
footer .cols a{display:block;margin:0 0 9px;color:hsl(140 20% 88%);text-decoration:none}
footer .cols a:hover{color:#fff}
footer .brand{color:#fff}
footer .brand svg .mk{fill:#fff}
footer h3{color:#fff;font-size:1rem;margin:0 0 12px}
footer .fine{margin-top:34px;padding-top:18px;border-top:1px solid hsl(140 25% 32%);font-size:.8rem;color:hsl(140 15% 65%)}

/* sticky mobile call bar -- the ONE motion */
.callbar{position:fixed;left:0;right:0;bottom:0;background:var(--leaf);padding:12px 16px;text-align:center;z-index:50;transform:translateY(0);box-shadow:0 -6px 18px hsl(40 60% 30% / .3)}
.callbar a{color:#fff;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.15rem}
@media (prefers-reduced-motion:no-preference){
  .callbar{animation:rise .5s ease-out}
  @keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media (min-width:761px){.callbar{display:none}}

@media (max-width:760px){
  .cols2{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .hero{padding:44px 0 40px}
}