/* =========================================================
   NEW WINDSOR LAWN CARE — DESIGN SYSTEM
   Palette: pine forest + fresh grass + warm gold (complementary
   green/amber pairing — literally complementary on the color wheel,
   and drawn from the subject itself: healthy turf + golden-hour light).
   Display type: Fraunces (warm, characterful serif for a local,
   trusted, slightly old-fashioned-in-a-good-way feel).
   Body type: Plus Jakarta Sans (clean, modern, easy to scan on mobile).
   Label type: Archivo (condensed, uppercase, for eyebrows + data).
   Signature device: the "mow line" — alternating stripe pattern that
   mimics freshly cut turf, used in the hero and as a section motif,
   plus a jagged "grass-tip" edge between sections instead of a
   straight hairline.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  /* Color */
  --bg:            #F6F8F1;
  --bg-alt:        #ECF1E3;
  --forest:        #1B4332;
  --forest-dark:   #102A20;
  --grass:         #4C7A3D;
  --grass-light:   #6C9A57;
  --gold:          #E0A62E;
  --gold-dark:     #B9820F;
  --gold-soft:     #F6E4B8;
  --text:          #212B1F;
  --text-soft:     #4C5847;
  --white:         #FFFFFF;
  --line:          rgba(27,67,50,0.14);

  /* Type */
  --font-display: 'Sora', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-label: 'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --max: 1160px;
  --radius: 14px;
  --radius-sm: 8px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; color:var(--forest-dark); }
p{ margin:0; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold-dark);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:12.5px;
  font-weight:600;
  color:var(--grass);
}

/* ---------- Top utility bar ---------- */
.utility-bar{
  background:var(--forest-dark);
  color:var(--gold-soft);
  font-family:var(--font-label);
  font-size:13px;
  letter-spacing:0.02em;
}
.utility-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 24px;
  gap:16px;
  flex-wrap:wrap;
}
.utility-bar a{ color:var(--white); font-weight:600; }
.utility-bar a:hover{ color:var(--gold); }

/* ---------- Header ---------- */
header.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--forest-dark);
}
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand small{
  display:block;
  font-family:var(--font-label);
  font-size:10.5px;
  letter-spacing:0.14em;
  color:var(--grass);
  font-weight:600;
  text-transform:uppercase;
}
nav.main-nav{ display:flex; align-items:center; gap:28px; }
nav.main-nav a{
  font-family:var(--font-label);
  font-size:14px;
  font-weight:600;
  color:var(--text-soft);
  letter-spacing:0.01em;
}
nav.main-nav a:hover{ color:var(--forest-dark); }
nav.main-nav a.current{ color:var(--forest-dark); border-bottom:2px solid var(--gold); padding-bottom:4px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-label);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.01em;
  padding:12px 22px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--gold); color:var(--forest-dark); box-shadow:0 4px 0 var(--gold-dark); }
.btn-primary:hover{ box-shadow:0 5px 0 var(--gold-dark); }
.btn-ghost{ background:transparent; border-color:var(--forest); color:var(--forest-dark); }
.btn-ghost:hover{ background:var(--forest); color:var(--white); }
.btn-on-dark{ background:var(--gold); color:var(--forest-dark); box-shadow:0 4px 0 var(--gold-dark); }
.btn-block{ width:100%; justify-content:center; }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.btn-call{ background:transparent; border-color:var(--forest); color:var(--forest-dark); }
.btn-call:hover{ background:var(--forest); color:var(--white); }

.menu-toggle{ display:none; background:none; border:none; padding:6px; cursor:pointer; }
.menu-toggle svg{ width:26px; height:26px; }

/* ---------- Hero with mow-stripe signature ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      115deg,
      var(--forest) 0px, var(--forest) 90px,
      var(--forest-dark) 90px, var(--forest-dark) 180px
    );
  color:var(--white);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,42,32,0.15) 0%, rgba(16,42,32,0.72) 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  padding:88px 24px 110px;
  max-width:var(--max);
  margin:0 auto;
}
.hero-inner.narrow{ padding:64px 24px 84px; }
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3);
  padding:6px 14px;
  border-radius:999px;
  font-family:var(--font-label);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--white);
  max-width:820px;
  line-height:1.08;
}
.hero h1 em{ font-style:normal; color:var(--gold); font-weight:700; }
.hero .lede{
  margin-top:20px;
  font-size:18px;
  max-width:560px;
  color:rgba(255,255,255,0.88);
}
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-meta{
  display:flex;
  gap:28px;
  margin-top:52px;
  flex-wrap:wrap;
}
.hero-meta div{ font-family:var(--font-label); font-size:13px; color:rgba(255,255,255,0.75); }
.hero-meta strong{ display:block; font-family:var(--font-display); font-size:26px; color:var(--white); font-weight:600; }

/* grass-tip jagged edge under hero (signature transition, not a straight rule) */
.grass-edge{
  display:block;
  width:100%;
  height:34px;
  margin-top:-2px;
}
.grass-edge-flip{ transform:scaleY(-1); }

/* photo variant of the hero (used where a real property/work photo replaces the mow-stripe pattern) */
.hero-photo{ background-size:cover; background-position:center; }
.hero-photo::after{ background:linear-gradient(180deg, rgba(16,42,32,0.32) 0%, rgba(16,42,32,0.86) 100%); }

/* photo variant of split-visual (used where a real photo replaces the mow-stripe box) */
.split-visual.has-photo{ padding:0; }
.split-visual.has-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-visual.has-photo .photo-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,42,32,0.05) 0%, rgba(16,42,32,0.82) 100%); }

/* ---------- Sections ---------- */
section{ padding:78px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.9rem, 3.2vw, 2.5rem); margin-top:10px; line-height:1.15; }
.section-head p{ margin-top:14px; color:var(--text-soft); font-size:16.5px; }
.section-alt{ background:var(--bg-alt); }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--forest-dark); padding:22px 0; }
.trust-strip .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
.trust-item{ display:flex; align-items:center; gap:10px; color:var(--gold-soft); font-family:var(--font-label); font-size:13.5px; font-weight:600; letter-spacing:0.02em; }
.trust-item svg{ width:20px; height:20px; flex-shrink:0; }

/* ---------- Service cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(16,42,32,0.35); }
.card .icon{
  width:46px; height:46px;
  color:var(--forest);
  margin-bottom:16px;
}
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ color:var(--text-soft); font-size:15.5px; }
.card a.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--font-label); font-weight:700; font-size:13.5px; color:var(--grass); }
.card a.card-link:hover{ color:var(--forest-dark); }

/* ---------- Areas grid ---------- */
.area-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.area-card:hover{ border-color:var(--grass); }
.area-card .name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--forest-dark); }
.area-card .name span{ display:block; font-family:var(--font-label); font-size:12px; color:var(--text-soft); font-weight:600; margin-top:2px; text-transform:uppercase; letter-spacing:0.06em; }
.area-card svg{ width:20px; height:20px; color:var(--grass); flex-shrink:0; }

/* ---------- Two column feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-visual{
  background:var(--forest);
  border-radius:var(--radius);
  padding:36px;
  color:var(--white);
  position:relative;
  overflow:hidden;
  min-height:340px;
  display:flex;
  align-items:flex-end;
}
.split-visual .stripe-bg{
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, var(--grass) 0px, var(--grass) 46px, var(--forest) 46px, var(--forest) 92px);
  opacity:0.9;
}
.split-visual .stripe-content{ position:relative; z-index:2; }
.split-visual .stripe-content .eyebrow{ color:var(--gold-soft); }
.split-visual .stripe-content h3{ color:var(--white); font-size:26px; margin-top:8px; }

.checklist{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--text-soft); }
.checklist svg{ width:20px; height:20px; color:var(--grass); flex-shrink:0; margin-top:2px; }

/* ---------- Process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step .num{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--gold-dark);
  border:2px solid var(--gold);
  border-radius:50%;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.step h3{ font-size:17px; margin-bottom:6px; }
.step p{ color:var(--text-soft); font-size:15px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--gold);
  border-radius:20px;
  padding:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  color:var(--forest-dark);
}
.cta-band h2{ color:var(--forest-dark); font-size:clamp(1.6rem,3vw,2.1rem); max-width:480px; }
.cta-band p{ margin-top:10px; color:rgba(27,67,50,0.85); max-width:460px; }
.cta-band .btn-primary{ background:var(--forest-dark); color:var(--gold-soft); box-shadow:0 4px 0 rgba(16,42,32,0.5); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item summary{ font-family:var(--font-display); font-weight:600; font-size:17px; cursor:pointer; color:var(--forest-dark); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-size:22px; color:var(--gold-dark); flex-shrink:0; transition:transform 0.2s ease; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item p{ margin-top:12px; color:var(--text-soft); font-size:15.5px; max-width:720px; }

/* ---------- Form ---------- */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-label); font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:15px;
  background:var(--bg);
  color:var(--text);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--grass); background:var(--white); }
.form-note{ font-size:13px; color:var(--text-soft); margin-top:10px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--forest-dark); color:rgba(255,255,255,0.78); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--white); margin-bottom:14px; }
.footer-brand svg{ width:28px; height:28px; }
footer p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,0.6); max-width:320px; }
footer h4{ font-family:var(--font-label); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; font-weight:600; }
footer ul{ display:flex; flex-direction:column; gap:10px; }
footer a{ font-size:14.5px; color:rgba(255,255,255,0.75); }
footer a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:rgba(255,255,255,0.5); }
.footer-disclaimer{ flex-basis:100%; font-size:12px; line-height:1.6; color:rgba(255,255,255,0.4); margin-top:6px; max-width:760px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-family:var(--font-label); font-size:12.5px; color:rgba(255,255,255,0.7); display:flex; gap:8px; align-items:center; margin-bottom:18px; }
.breadcrumb a{ color:rgba(255,255,255,0.85); }
.breadcrumb a:hover{ color:var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  nav.main-nav{
    position:fixed; top:73px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:28px 24px; gap:20px; transform:translateX(100%);
    transition:transform 0.25s ease; overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav a{ font-size:17px; }
  .menu-toggle{ display:block; }
  .btn-call{ display:none; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:36px 26px; }
  section{ padding:56px 0; }
  .hero-inner{ padding:56px 20px 78px; }
}