/* ===========================================================
   Sam Green: Garden-Care — shared styles
   Tokens
   =========================================================== */
:root{
  --forest: #0B2B08;
  --forest-dark: #071D05;
  --sage: #85905E;
  --sage-light: #DADAAD; /* stone, used for tinted panels */
  --stone: #DADAAD;
  --khaki: #ACAF90;
  --cream: #FCFBD0;
  --clay: #85905E;       /* accents now use sage in place of the old clay */
  --clay-dark: #6C7549;
  --charcoal: #2F4521;   /* olive, body text on light backgrounds */

  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; /* wordmark, headings, body */
  --body: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --label: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* small tracked labels/subtitles */

  --max: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

h1,h2,h3{
  font-family: var(--display);
  color: var(--forest);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; font-weight: 500; }
body{ font-weight: 500; }
.lede{ font-size: 1.15rem; color: var(--charcoal); max-width: 46ch; }

.eyebrow{
  display:inline-block;
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-dark);
  margin-bottom: 0.6em;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--forest); color: var(--cream); padding: 0.75em 1.2em;
  z-index: 200; border-radius: 0 0 6px 0;
}
.skip-link:focus{ left:0; top:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
header.site{
  position: sticky; top:0; z-index: 100;
  background: rgba(246,241,228,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(31,59,44,0.12);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 0;
}
.brand{
  display:flex; align-items:center; gap:0.6rem;
  font-family: var(--display); font-size: 1.25rem; color: var(--forest);
  text-decoration:none;
}
.brand .mark{
  width: 34px; height:34px; border-radius: 50%;
  background: var(--forest);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand .mark svg{ width:18px; height:18px; }
.brand strong{ font-weight:700; }
.brand span{ display:block; font-family: var(--label); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--sage); font-weight:500; }

nav.primary ul{
  list-style:none; display:flex; gap: 1.9rem; margin:0; padding:0;
}
nav.primary a{
  text-decoration:none; font-weight:600; font-size:0.95rem; color: var(--forest-dark);
  padding: 0.3em 0; border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{ border-bottom-color: var(--clay); }

.btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:0.92rem;
  padding: 0.75em 1.4em; border-radius: 999px; border: 2px solid var(--forest);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background: var(--clay); border-color: var(--clay); color: var(--cream); }
.btn-primary:hover{ background: var(--clay-dark); border-color: var(--clay-dark); transform: translateY(-1px); }
.btn-ghost{ background:transparent; color: var(--forest); }
.btn-ghost:hover{ background: var(--forest); color: var(--cream); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:0.4rem; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background: var(--forest); position:relative;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

/* ---------- Hero ---------- */
.hero{ padding: 4.5rem 0 3rem; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items:center; }
.hero-art{
  aspect-ratio: 4/5; border-radius: 18px; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(190,106,61,0.35), transparent 55%),
    linear-gradient(155deg, var(--sage) 0%, var(--forest) 78%);
  position:relative;
}
.hero-art::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(246,241,228,0.06) 0 2px, transparent 2px 26px);
}
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

/* ---------- Seasonal strip (signature element) ---------- */
.season-strip{
  border-top: 1px solid rgba(31,59,44,0.15);
  border-bottom: 1px solid rgba(31,59,44,0.15);
}
.season-strip .wrap{ padding-top:0; padding-bottom:0; }
.season-track{
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.season{
  padding: 1.4rem 1.2rem;
  border-right: 1px solid rgba(31,59,44,0.12);
}
.season:last-child{ border-right:0; }
.season .months{ font-family: var(--display); font-size:1.15rem; color: var(--forest); margin-bottom:0.15em; }
.season .note{ font-size:0.86rem; color: var(--forest-dark); opacity:0.85; margin:0; }
.season.is-summer{ background: rgba(190,106,61,0.10); }
.season.is-autumn{ background: rgba(190,106,61,0.05); }
.season.is-winter{ background: rgba(143,160,126,0.10); }
.season.is-spring{ background: rgba(143,160,126,0.18); }

/* ---------- Sections ---------- */
section{ padding: 4rem 0; }
section.tint{ background: var(--sage-light); }
section.dark{ background: var(--forest); color: var(--cream); }
section.dark h2, section.dark h3{ color: var(--cream); }
section.dark .eyebrow{ color: var(--sage-light); }

.section-head{ max-width: 62ch; margin-bottom: 2.4rem; }

/* Service list */
.services-list{ display:grid; gap: 1.6rem; }
.service-row{
  display:grid; grid-template-columns: 220px 1fr; gap: 2rem;
  padding: 2rem 0; border-top: 1px solid rgba(31,59,44,0.15);
}
.service-row:last-child{ border-bottom: 1px solid rgba(31,59,44,0.15); }
.service-row .verb{ font-family: var(--display); font-size:1.5rem; color: var(--clay-dark); }
.service-row p{ margin-bottom:0.6em; }
.service-row ul{ margin:0.6em 0 0; padding-left:1.1em; color: var(--forest-dark); }

/* Cards */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card{
  background: var(--cream); border: 1px solid rgba(31,59,44,0.15);
  border-radius: 14px; padding: 1.8rem;
}
.card h3{ margin-bottom:0.4em; }

/* Gallery */
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.gallery-item{
  aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(160deg, var(--sage) 0%, var(--forest) 100%);
  position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:1rem;
}
.gallery-item::after{
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image: repeating-linear-gradient(100deg, rgba(246,241,228,0.08) 0 3px, transparent 3px 30px);
}
.gallery-item span{
  position:relative; z-index:1; color: var(--cream); font-family: var(--display); font-size:0.95rem;
}
.gallery-item.n1{ background: linear-gradient(160deg, #C9D2BB, var(--forest)); }
.gallery-item.n2{ background: linear-gradient(160deg, var(--clay), var(--forest-dark)); }
.gallery-item.n3{ background: linear-gradient(160deg, var(--sage), var(--forest)); }
.gallery-item.n4{ background: linear-gradient(160deg, var(--forest), var(--forest-dark)); }
.gallery-item.n5{ background: linear-gradient(160deg, #E3C9A8, var(--clay-dark)); }
.gallery-item.n6{ background: linear-gradient(160deg, var(--sage-light), var(--sage)); }

.gallery-note{
  border: 1px dashed rgba(31,59,44,0.35); border-radius: 12px;
  padding: 1.5rem; margin-top: 2rem; font-size:0.95rem; color: var(--forest-dark);
}

/* About */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.pull-quote{
  font-family: var(--display); font-size: 1.4rem; color: var(--forest);
  border-left: 3px solid var(--clay); padding-left:1.2rem; margin: 1.6rem 0;
}

/* Areas served */
.area-tags{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1rem; }
.area-tags span{
  border:1px solid rgba(11,43,8,0.3); border-radius: 999px; padding:0.4em 0.9em;
  font-family: var(--label); font-size:0.8rem; letter-spacing:0.03em; color: var(--charcoal);
}

/* Tracked service-area line, matching the business card back treatment */
.area-line{
  font-family: var(--label); font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--khaki); font-size:0.8rem;
}
.rule{ border:0; border-top:1px solid var(--sage); margin:1.4rem 0; }
.rule.stone{ border-top-color: var(--stone); }

/* Tagline bar echoing the business-card front layout */
.tagline-bar{
  background: var(--forest); color: var(--cream); padding: 1.6rem 0;
}
.tagline-bar .wrap{
  display:flex; flex-direction:column; align-items:center; gap:0.9rem; text-align:center;
}
.tagline-bar hr{ width:64px; border:0; border-top:2px solid var(--sage); margin:0; }
.tagline-bar p{
  margin:0; font-family: var(--label); font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  font-size:0.78rem; color: var(--stone);
}

/* Wordmark treatment: cream fill, sage outline, for larger lockups on dark backgrounds */
.wordmark{
  font-family: var(--display); font-weight:700; color: var(--cream);
  -webkit-text-stroke: 1px var(--sage);
  paint-order: stroke fill;
}

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-details dt{ font-weight:700; color: var(--forest); margin-top:1.2rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; }
.contact-details dd{ margin:0.2em 0 0; }

form.quote{ display:grid; gap:1rem; }
form.quote label{ font-weight:700; font-size:0.85rem; color: var(--forest); display:block; margin-bottom:0.3em; }
form.quote input, form.quote textarea, form.quote select{
  width:100%; padding:0.75em 0.9em; border-radius:8px; border:1px solid rgba(31,59,44,0.3);
  font-family: var(--body); font-size:1rem; background: var(--cream);
}
form.quote textarea{ min-height:120px; resize:vertical; }
form.quote input[type="file"]{
  padding: 0.6em; background: var(--cream); font-size:0.92rem;
}
form.quote input[type="file"]::file-selector-button{
  font-family: var(--label); font-weight:500; font-size:0.82rem; letter-spacing:0.04em;
  border: 1px solid var(--forest); background: transparent; color: var(--forest);
  border-radius: 999px; padding: 0.5em 1em; margin-right: 0.8em; cursor:pointer;
}
form.quote input[type="file"]::file-selector-button:hover{ background: var(--forest); color: var(--cream); }
.field-hint{ margin: 0.4em 0 0; font-size:0.82rem; color: var(--charcoal); opacity:0.75; font-family: var(--label); }
form.quote .btn-primary{ border:2px solid var(--clay); cursor:pointer; font-family: var(--body); }

/* Footer */
footer.site{ background: var(--forest-dark); color: var(--sage-light); padding: 3rem 0 2rem; }
footer.site .wrap{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2rem; }
footer.site a{ text-decoration:none; color: var(--sage-light); }
footer.site a:hover{ color: var(--cream); }
footer.site h3{ color: var(--cream); font-size:1rem; }
footer.site .bottom{
  max-width: var(--max); margin: 2rem auto 0; padding: 1.4rem var(--gutter) 0;
  border-top: 1px solid rgba(246,241,228,0.15); font-size:0.82rem; opacity:0.75;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero-grid, .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-row{ grid-template-columns: 1fr; gap:0.5rem; }
  .season-track{ grid-template-columns: repeat(2, 1fr); }
  .season:nth-child(2){ border-right:0; }
  footer.site .wrap{ grid-template-columns: 1fr; }

  nav.primary{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--cream); border-bottom: 1px solid rgba(31,59,44,0.15);
    padding: 1rem var(--gutter) 1.6rem;
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; gap:1rem; }
  .nav-toggle{ display:block; }
  .hero-cta .btn{ width:100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ---------- Blog: listing ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.blog-card{
  background: var(--cream); border: 1px solid rgba(11,43,8,0.15); border-radius: 14px;
  padding: 1.8rem; text-decoration:none; color: inherit; display:flex; flex-direction:column;
  transition: transform .15s ease, border-color .15s ease;
}
.blog-card:hover{ transform: translateY(-2px); border-color: var(--sage); }
.blog-card .kind{
  font-family: var(--label); font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--clay-dark); margin-bottom:0.7em;
}
.blog-card h3{ margin-bottom:0.4em; }
.blog-card p{ color: var(--charcoal); margin-bottom:0; flex-grow:1; }
.blog-card .read-more{
  margin-top:1.2em; font-family: var(--label); font-weight:500; font-size:0.85rem; letter-spacing:0.02em; color: var(--forest);
}

/* ---------- Blog: post ---------- */
.post-head{ max-width: 68ch; }
.post-meta{
  font-family: var(--label); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--khaki); margin-bottom:1em;
}
.post-body{ max-width: 68ch; }
.post-body h2{ margin-top:2em; font-size:1.5rem; }
.post-body p{ font-size:1.05rem; }
.post-body ul{ padding-left:1.2em; }
.post-body li{ margin-bottom:0.4em; }

/* Plant spotlight fact panel */
.spotlight-facts{
  background: var(--sage-light); border-radius: 14px; padding: 1.6rem 1.8rem; margin: 1.8rem 0;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.6rem;
}
.spotlight-facts dt{
  font-family: var(--label); font-weight:500; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--forest-dark); opacity:0.8;
}
.spotlight-facts dd{ margin: 0.15em 0 0; font-weight:500; }

.likes-dislikes{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; margin: 1.5rem 0; }
.likes-dislikes .card{ padding:1.4rem 1.6rem; }
.likes-dislikes h3{ font-size:1rem; margin-bottom:0.6em; }
.likes-dislikes.likes .card{ border-color: rgba(133,144,94,0.5); }

.post-cta{
  margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid rgba(11,43,8,0.15);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}

@media (max-width: 860px){
  .blog-grid{ grid-template-columns: 1fr; }
  .spotlight-facts{ grid-template-columns: 1fr; }
  .likes-dislikes{ grid-template-columns: 1fr; }
}