/* ============================================
   Your Garden Guy
   Design system and global styles.

   Palette derived from the business logo (two-leaf mark, greens sampled at
   #46934F / #74B154 / #B6CB56 on a #343434 ground). The greens are darkened
   from the logo values so they clear WCAG AA as text and as button fills;
   the raw logo greens are kept for decorative use only.
   ============================================ */

@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Sans Fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Surfaces and ink. Contrast against #F7F9F4 / #E8EEE1 / #FFFFFF:
     ink 13.11 / 11.75 / 13.90, ink-soft 8.44 / 7.56 / 8.95,
     muted 5.70 / 5.10 / 6.04, accent 5.65 / 5.06 / 5.99.
     White on accent is 5.99, so the green CTA band passes as normal text. */
  --color-bg:        #F7F9F4;
  --color-bg-alt:    #E8EEE1;
  --color-surface:   #FFFFFF;
  --color-ink:       #23301C;
  --color-ink-soft:  #414D3A;
  --color-muted:     #59674F;
  --color-rule:      rgba(35, 48, 28, 0.14);
  --color-accent:    #317038;

  /* Decorative only: leaf artwork, footer accents, rules on dark surfaces.
     Never use these for body text on a light surface. --color-leaf measures
     5.40 against --color-ink, so it is safe as text on the dark footer. */
  --color-leaf:       #74B154;
  /* Pale leaf, for small text on the dark photographic hero. The logo's light
     green (#B6CB56) measured 3.24:1 there against the brightest backdrop the
     scrim lets through, and the hero eyebrow is 12px uppercase, the hardest
     text on the page. This value measures 5.17:1 at its worst and still reads
     green rather than white. Do not use it on a light surface. */
  --color-leaf-pale:  #EDF5D2;

  --font-serif: 'Fraunces', 'Serif Fallback', Georgia, serif;
  --font-sans:  'Karla', 'Sans Fallback', 'Helvetica Neue', Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  --maxw-content: 1120px;
  --maxw-prose:   640px;
  --maxw-headline: 820px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* Measured rendered header height, rounded up. */
  --header-h: 5rem;
}

/* ============================================
   Reset and base
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-ink); text-decoration: none; transition: opacity 0.15s ease; }
a:hover { opacity: 0.65; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.125rem, 4.8vw, 3.25rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); }

/* ============================================
   Layout helpers
   ============================================ */

.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container--narrow   { max-width: var(--maxw-prose); }
.container--headline { max-width: var(--maxw-headline); }

.section { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-4) 0; }
.section--alt { background: var(--color-bg-alt); }
.section__intro { max-width: 54ch; }
.section__head { margin-bottom: var(--space-4); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

/* ============================================
   Header / Navigation
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom: 1px solid var(--color-rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: var(--maxw-content);
  margin: 0 auto;
  gap: var(--space-3);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
}
.nav__logo:hover { opacity: 1; }

/* Two-leaf mark, redrawn from the business logo. Decorative, so the leaf
   greens do not need to clear a text-contrast threshold; what matters is that
   the front leaf separates from the back one. The separating stroke is painted
   in whatever surface the mark sits on, so one piece of markup works in both
   the header and the dark footer. */
.leaf-mark { width: 2.75rem; height: 2.75rem; flex: none; display: block; }
.leaf-mark__back  { fill: var(--color-accent); }
.leaf-mark__front { fill: var(--color-leaf); stroke: var(--color-bg); stroke-width: 3.5; stroke-linejoin: round; }
.site-footer .leaf-mark__front { stroke: var(--color-ink); }

.nav__logo-mark {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.nav__links a:hover { color: var(--color-ink); opacity: 1; }

.nav__cta {
  background: var(--color-accent);
  color: #FFFFFF !important;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav__cta:hover { opacity: 0.88; }
.nav__cta svg { flex: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-ink);
}
.nav__toggle svg { display: block; }

/* ============================================
   Hero
   ============================================ */

.hero { padding: var(--space-7) 0 var(--space-5); text-align: center; }

.hero__location {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.hero__subtitle {
  font-size: 1.1875rem;
  max-width: 34rem;
  margin: 0 auto var(--space-4);
  color: var(--color-ink-soft);
}

.hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Full-bleed photographic hero.

   The scrim is load-bearing, not decoration. Text over a photograph is the
   classic place contrast fails, because the photo's local brightness varies and
   nothing in the stylesheet can see it. The scrim below was tuned by sampling
   the actual composited pixels behind every run of text on the rendered page,
   at desktop and phone widths, and measuring them against white. Change the
   photo or these alpha values and that measurement is void; redo it.

   The image is also softened slightly at build time. That reads as depth, and
   it cuts the file by about 70% because grass texture compresses terribly. */
.hero--image {
  position: relative;
  isolation: isolate;
  min-height: clamp(30rem, 76vh, 44rem);
  display: grid;
  align-items: center;
  padding: var(--space-6) 0;
  color: #FFFFFF;
  background: var(--color-ink);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(21, 30, 17, 0.62) 0%,
      rgba(21, 30, 17, 0.74) 45%,
      rgba(21, 30, 17, 0.68) 100%);
}

.hero__content { position: relative; }

.hero--image h1 { color: #FFFFFF; }
.hero--image .hero__location { color: var(--color-leaf-pale); }
.hero--image .hero__subtitle { color: rgba(255, 255, 255, 0.94); }

.page-header { padding: var(--space-6) 0 var(--space-4); text-align: center; }

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  line-height: 1.1;
}
.btn svg { flex: none; }

.btn--primary { background: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: #FFFFFF; opacity: 1; }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-bg); opacity: 1; }

.btn--light { background: #FFFFFF; color: var(--color-accent); border-color: #FFFFFF; }
.btn--light:hover { background: var(--color-ink); border-color: var(--color-ink); color: #FFFFFF; opacity: 1; }

.btn--outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.7); }
.btn--outline-light:hover { background: #FFFFFF; color: var(--color-accent); border-color: #FFFFFF; opacity: 1; }

/* ============================================
   Facts strip
   ============================================ */

/* The band gets its own padding rather than .section--tight: it is the first
   thing under the hero and needs room to breathe, not to be compressed. */
.facts-band { padding: var(--space-5) 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts li { text-align: center; }

.facts__value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.1;
}

.facts__value--rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.facts__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.stars { display: inline-flex; gap: 0.125rem; color: var(--color-accent); }
.stars svg { width: 1.0625rem; height: 1.0625rem; }

/* ============================================
   Service cards
   ============================================ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 0.5rem;
}
/* A fixed-width rule above the title. Bordering the heading itself makes the
   rule as wide as the words, so it changes length card to card and reads as
   an accident rather than a system. */
.card__title::before {
  content: '';
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--color-leaf);
  margin-bottom: 0.875rem;
}

.card__desc { font-size: 0.9375rem; margin: 0; }

/* Two-column media + text block */
.split-block {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.split-block__media img { width: 100%; height: auto; border-radius: var(--radius-md); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}
.tag-list li {
  padding: 0.4375rem 0.9375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}
.section--alt .tag-list li { background: var(--color-bg); }

/* ============================================
   Work gallery (natural proportions, masonry columns)
   ============================================ */

.gallery {
  columns: 3;
  column-gap: var(--space-2);
}
.gallery picture {
  display: block;
  margin: 0 0 var(--space-2);
  break-inside: avoid;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ============================================
   Reviews
   ============================================ */

/* Four reviews on a three-column grid strand the fourth on its own row.
   Two columns keeps it balanced and gives the quotes a readable measure. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.review {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review__quote {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-ink);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.review__quote::before { content: '\201C'; }
.review__quote::after  { content: '\201D'; }

.review__by {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0;
}

.reviews__footnote { margin: var(--space-4) 0 0; font-size: 0.9375rem; color: var(--color-muted); }
.reviews__footnote a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================
   Service area
   ============================================ */

.area-image { margin-top: var(--space-4); }
.area-image img { width: 100%; height: auto; border-radius: var(--radius-md); }

.areas-intro p:not(.eyebrow) { max-width: 58ch; }

/* ============================================
   CTA band (own dark/saturated surface)
   ============================================ */

.cta-band {
  background: var(--color-accent);
  color: #FFFFFF;
  padding: var(--space-6) 0;
  text-align: center;
}
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: rgba(255,255,255,0.92); font-size: 1.0625rem; }
.cta-band .cta-band__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: var(--space-3);
}
.cta-band__note { font-size: 0.9375rem; margin: var(--space-3) 0 0; }

/* ============================================
   Footer (dark surface)
   ============================================ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-5) 0 var(--space-3);
}
.site-footer a { color: var(--color-bg); }
.site-footer a:hover { opacity: 0.7; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 15%, transparent);
}

.footer__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-bg);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 var(--space-2);
}

.footer__tagline { font-size: 0.9375rem; color: color-mix(in srgb, var(--color-bg) 78%, transparent); margin: 0; max-width: 26rem; }

.footer__heading {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-leaf);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.footer__nav, .footer__contact { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.footer__nav li, .footer__contact li { padding: 0.375rem 0; color: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.footer__nav a, .footer__contact a { display: inline-block; padding: 0.125rem 0; }

.footer__legal {
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-bg) 72%, transparent);
}

/* ============================================
   Accessibility
   ============================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 200;
}
.skip-link:focus { left: 0; opacity: 1; }

/* Default ring is the dark ink: 13.11 against the base surface. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Flip to the light token on every selector that sets its own dark or
   saturated background. On this site that is the footer and the green CTA
   band, and nothing else: .hero and the section bands sit on the base or
   alternate surface, where a light ring would be near-invisible. */
:where(.site-footer, .cta-band, .hero--image) :where(a, button):focus-visible {
  outline-color: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Responsive

   The nav collapses at 900px, not at the layout breakpoint. The wordmark plus
   four links plus a phone CTA needs more room than the body copy does, and
   between roughly 760px and 940px a desktop nav on a nearly-mobile viewport is
   where a wordmark silently wraps to two lines.
   ============================================ */

@media (max-width: 900px) {
  .nav__toggle { display: block; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-2) 0;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { padding: 0.625rem var(--space-3); border-bottom: 1px solid var(--color-rule); }
  .nav__links li:last-child { border-bottom: 0; padding-top: 1rem; }
  .nav__cta { display: inline-flex; justify-content: center; }

  .gallery { columns: 2; }
  .split-block { grid-template-columns: 1fr; gap: var(--space-3); }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --space-6: 3.25rem; --space-7: 4rem; }

  .facts { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer__legal { flex-direction: column; gap: var(--space-1); text-align: center; }

  .hero { padding: var(--space-5) 0 var(--space-4); }
  .hero--image { min-height: clamp(28rem, 72vh, 34rem); padding: var(--space-5) 0; }
  .hero__ctas { display: flex; width: 100%; }
  .hero__ctas .btn { flex: 1 1 14rem; }
}

@media (max-width: 560px) {
  .gallery { columns: 1; }
}

/* Very narrow phones (320px, the folded Galaxy). The wordmark is nowrap by
   design, so below about 400px the leaf plus the wordmark plus the menu button
   no longer fit the header and the page scrolls sideways. Shrink the lockup
   rather than letting the wordmark wrap, which would change the header height
   the scroll offset depends on. */
@media (max-width: 400px) {
  .nav { padding: var(--space-2); gap: var(--space-1); }
  .leaf-mark { width: 2.25rem; height: 2.25rem; }
  .nav__logo-mark { font-size: 1.3125rem; }
}