/* =========================================================================
   Greenhaven Lawn & Landscape — shared stylesheet for the multi-page
   "Standard" tier demo. Linked by every page (index, about, services,
   gallery, contact). Theme lives in the :root variables below.
   ========================================================================= */

:root{
  --bg:#f6f5ef;
  --paper:#ffffff;
  --bg-muted:#eceadf;
  --green:#2e6b3e;
  --green-deep:#214f2d;
  --leaf:#5ba368;
  --sun:#d6a23e;
  --ink:#1d251c;
  --muted:#5d6a5b;
  --border:#e1e0d4;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(30,40,25,.06);
  --shadow-lg:0 18px 50px rgba(30,50,25,.12);
  --max:1140px;
  --font-head:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.14;letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.container{max-width:var(--max);margin:0 auto;padding:0 1.5rem;}
section[id]{scroll-margin-top:84px;}

.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;color:var(--green);margin-bottom:.9rem;}
.lead{font-size:1.14rem;color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:.95rem;
     padding:.8rem 1.6rem;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:.16s ease;}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-1px);}
.btn-ghost{border-color:#c7c8ba;color:var(--ink);}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-light{background:#fff;color:var(--green-deep);}
.btn-light:hover{background:#eef3ec;}
.btn-outline-light{border-color:rgba(255,255,255,.65);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}

/* ---------- Image placeholder / fallback ---------- */
.ph{background:var(--bg-muted);position:relative;overflow:hidden;}
.ph.img-fallback{background:linear-gradient(135deg,var(--leaf),var(--green-deep));}
.ph img{width:100%;height:100%;object-fit:cover;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--green-deep);color:#dce9d8;font-size:.82rem;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.5rem;flex-wrap:wrap;}
.topbar a{color:#fff;font-weight:600;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(246,245,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem;max-width:var(--max);margin:0 auto;}
.logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--green-deep);}
.logo .leaf-mark{width:30px;height:30px;flex:none;}
.nav-links{list-style:none;display:flex;align-items:center;gap:1.7rem;}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink);}
.nav-links a:hover{color:var(--green);}
.nav-links a[aria-current="page"]{color:var(--green);font-weight:600;}
.nav-cta{margin-left:.3rem;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.2s ease;}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;}
.hero .ph{position:absolute;inset:0;z-index:0;}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,20,.45),rgba(20,40,20,.72));}
.hero-inner{position:relative;z-index:1;max-width:720px;padding:7rem 1.5rem;margin:0 auto;text-align:center;}
.hero .eyebrow{color:#bfe0bd;}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.4rem);margin-bottom:1.1rem;text-shadow:0 2px 24px rgba(0,0,0,.25);}
.hero p{font-size:1.18rem;max-width:560px;margin:0 auto 2rem;color:#eaf3e6;}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* Compact page banner (interior pages) */
.page-banner{position:relative;color:#fff;text-align:center;}
.page-banner .ph{position:absolute;inset:0;z-index:0;}
.page-banner .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,20,.5),rgba(20,40,20,.7));}
.page-banner-inner{position:relative;z-index:1;padding:4.5rem 1.5rem;max-width:720px;margin:0 auto;}
.page-banner h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.6rem;}
.page-banner p{color:#eaf3e6;font-size:1.1rem;}
.crumbs{font-size:.85rem;color:#bfe0bd;margin-bottom:1rem;letter-spacing:.02em;}
.crumbs a:hover{color:#fff;}

/* ---------- Section scaffolding ---------- */
.section{padding:5.5rem 0;}
.section-paper{background:var(--paper);}
.section-muted{background:var(--bg-muted);}
.section-green{background:var(--green-deep);color:#eaf3e6;}
.sec-head{text-align:center;max-width:640px;margin:0 auto 3.2rem;}
.sec-head h2{font-size:clamp(2rem,4.5vw,2.9rem);margin-bottom:.7rem;}
.sec-head p{color:var(--muted);font-size:1.08rem;}
.section-green .sec-head p{color:#c7ddc2;}
.rule{width:54px;height:3px;background:var(--sun);border-radius:3px;margin:1rem auto 0;}

/* ---------- Feature / intro split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.split .ph{aspect-ratio:5/4;border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.split h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:1.1rem;}
.split p{color:var(--muted);margin-bottom:1.1rem;}

/* ---------- Card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.card .ic{width:46px;height:46px;border-radius:12px;background:#e7f1e6;color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;}
.card h3{font-size:1.3rem;margin-bottom:.5rem;}
.card p{color:var(--muted);font-size:.97rem;}
.card-link{display:inline-block;margin-top:1rem;color:var(--green);font-weight:600;font-size:.92rem;}
.card-link:hover{color:var(--green-deep);}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;}
.stat .num{font-family:var(--font-head);font-size:clamp(2rem,4vw,2.8rem);color:var(--sun);font-weight:600;}
.stat .label{font-size:.92rem;color:#c7ddc2;}

/* ---------- Service list (services page) ---------- */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
.svc{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;background:var(--paper);border:1px solid var(--border);
     border-radius:var(--radius);padding:1.6rem 1.7rem;box-shadow:var(--shadow);}
.svc .ic{width:48px;height:48px;flex:none;border-radius:12px;background:#e7f1e6;color:var(--green);display:flex;align-items:center;justify-content:center;}
.svc h3{font-size:1.22rem;margin-bottom:.35rem;}
.svc p{color:var(--muted);font-size:.95rem;margin-bottom:.6rem;}
.svc .price{font-family:var(--font-head);color:var(--green);font-size:1.02rem;}
.svc ul{list-style:none;font-size:.92rem;color:var(--muted);}
.svc li{position:relative;padding-left:1.3rem;margin:.2rem 0;}
.svc li::before{content:"✓";position:absolute;left:0;color:var(--leaf);font-weight:700;}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none;counter-reset:step;}
.step{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 1.5rem;box-shadow:var(--shadow);}
.step .n{width:38px;height:38px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--font-head);font-weight:600;
        display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.step h3{font-size:1.15rem;margin-bottom:.4rem;}
.step p{color:var(--muted);font-size:.94rem;}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:1rem;}
.gallery .ph{border-radius:var(--radius-sm);cursor:pointer;}
.gallery .ph img{transition:transform .4s ease;}
.gallery .ph:hover img{transform:scale(1.06);}
.gallery .wide{grid-column:span 2;}
.gallery .tall{grid-row:span 2;}
.gallery-cap{text-align:center;color:var(--muted);font-size:.92rem;margin-top:1.6rem;font-style:italic;}

/* ---------- Before / after ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
.ba{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.ba .ph{aspect-ratio:3/2;}
.ba .tag{position:absolute;top:.9rem;left:.9rem;background:rgba(33,79,45,.9);color:#fff;font-size:.72rem;font-weight:600;
         text-transform:uppercase;letter-spacing:.05em;padding:.3rem .7rem;border-radius:999px;}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.quote{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow);}
.section-green .quote{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.stars{color:var(--sun);letter-spacing:.14em;margin-bottom:.9rem;}
.quote blockquote{font-size:1.04rem;margin-bottom:1rem;}
.quote cite{color:var(--muted);font-style:normal;font-size:.9rem;font-weight:600;}
.section-green .quote blockquote{color:#f0f6ee;}
.section-green .quote cite{color:#bcd4b6;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;}
.cta-band h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.8rem;color:#fff;}
.cta-band p{max-width:520px;margin:0 auto 1.8rem;color:#cfe3c9;}

/* ---------- About: team & values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.member{text-align:center;}
.member .ph{aspect-ratio:1/1;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1rem;}
.member h3{font-size:1.2rem;}
.member span{color:var(--green);font-size:.9rem;font-weight:600;}
.member p{color:var(--muted);font-size:.93rem;margin-top:.4rem;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;}
.contact-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:1rem;}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;margin-top:.4rem;padding:.8rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.97rem;font-weight:400;background:var(--paper);color:var(--ink);transition:border-color .15s ease;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--green);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-status{margin-top:1rem;font-size:.92rem;min-height:1.2em;}
.form-status.success{color:var(--green);}
.form-status.error{color:#b23b2e;}
.contact-aside{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);}
.contact-aside h3{font-size:1.3rem;margin-bottom:1rem;}
.contact-line{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.1rem;font-size:.96rem;}
.contact-line .ic{color:var(--green);flex:none;margin-top:2px;}
.contact-line a:hover{color:var(--green);}
.map{width:100%;height:380px;border:0;border-radius:var(--radius);margin-top:1rem;filter:saturate(.95);}
.hours-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dotted var(--border);font-size:.94rem;}
.hours-row:last-child{border-bottom:0;}

/* ---------- Footer ---------- */
.footer{background:#1a221a;color:#aebdaa;padding:4rem 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;}
.footer .logo{color:#e6f0e3;margin-bottom:.9rem;}
.footer p{font-size:.94rem;margin-bottom:.4rem;}
.footer h4{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--sun);margin-bottom:1rem;}
.footer ul{list-style:none;}
.footer li{margin-bottom:.45rem;font-size:.94rem;}
.footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #2e3a2d;padding-top:1.5rem;text-align:center;font-size:.84rem;color:#869480;}
.footer-bottom a{color:#aebdaa;text-decoration:underline;}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .split{grid-template-columns:1fr;gap:2.5rem;}
  .grid-3,.values,.team,.quotes,.steps{grid-template-columns:1fr 1fr;}
  .svc-list{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;gap:2rem;}
  .contact-grid{grid-template-columns:1fr;gap:2rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;}
}
@media(max-width:680px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
             background:var(--bg);border-bottom:1px solid var(--border);padding:.5rem 1.5rem 1rem;display:none;}
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;padding:.55rem 0;}
  .nav-cta{margin:.4rem 0 0;}
  .grid-3,.grid-2,.values,.team,.quotes,.steps,.ba-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;grid-auto-rows:220px;}
  .gallery .wide,.gallery .tall{grid-column:auto;grid-row:auto;}
}