/* =========================================================
   Goats Landscaping — styles.css
   Clean, professional, grounded. Green-themed.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --green-900: #0f3a24;
  --green-800: #14522f;
  --green-700: #1a6238;
  --green-600: #227a45;
  --green-500: #2e9c58;
  --green-050: #eef6ef;

  --ink:      #1d2a22;
  --ink-soft: #55635a;
  --line:     #e4eae4;
  --bg:       #ffffff;
  --bg-alt:   #f6f9f5;

  --radius:    10px;
  --radius-sm: 8px;
  --shadow:    0 10px 30px -14px rgba(20, 60, 40, 0.28);

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --maxw: 1160px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground-b); }
body { font-family: var(--font-body); color: var(--ink); background: transparent; line-height: 1.65; overflow-x: hidden; }

/* ---------- Scroll backdrop (seasonal) ----------
   A fixed ground plane the goat clears as you scroll. --mow (0-100, set in
   main.js) does both jobs: it reveals the cleared band from the top down and
   walks the goat down the viewport. Every colour here is a token, so the same
   machinery reads as mowing in summer, sweeping in fall and plowing in winter
   — see "Seasonal theme" at the bottom of this file. */
:root {
  --mow: 0;

  /* growing-season default: green grass, cut into pale mower lanes */
  --ground-a:   #d3e4ca;              /* untouched ground, top */
  --ground-b:   #cfe1c6;              /* untouched ground, bottom */
  --ground-tex: rgba(20,70,40,.05);   /* the faint vertical blades */
  --lane-a:     #e9f3e3;              /* cleared band, lane A */
  --lane-b:     #e0eed9;              /* cleared band, lane B */
  --lane-w:     46px;
  --rig-opacity: .5;
}
.lawn {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--ground-tex) 0 3px, transparent 3px 9px),
    linear-gradient(var(--ground-a), var(--ground-b));
}
/* What is lying on the ground before the goat gets to it — leaves in fall,
   drifts in winter, nothing the rest of the year. Painted before .lawn__mowed
   so the cleared band wipes it away as the goat passes. */
.lawn::before { content: ""; position: absolute; inset: 0; }
.lawn__mowed {
  position: absolute; inset: 0;
  /* cleared ground: alternating light lanes */
  background: repeating-linear-gradient(90deg,
    var(--lane-a) 0 var(--lane-w),
    var(--lane-b) var(--lane-w) calc(var(--lane-w) * 2));
  /* reveal from the top down as --mow (0-100) grows */
  clip-path: inset(0 0 calc((100 - var(--mow)) * 1%) 0);
}
.lawn__mower {
  position: absolute; left: 11%; top: calc(var(--mow) * 1vh);
  width: 62px; transform: translate(-50%, -50%); opacity: var(--rig-opacity);
  transition: top .12s linear;
}
.lawn__mower svg { width: 100%; height: auto; display: block; animation: mowerBob .35s ease-in-out infinite alternate; }
@keyframes mowerBob { from { transform: translateX(-1px) rotate(-1deg); } to { transform: translateX(1px) rotate(1deg); } }

/* ---------- Falling snow / leaves ----------
   main.js fills these in fall and winter and leaves them empty otherwise.
   Each particle is one <i> carrying its own size, colour, drift and speed
   inline; the keyframes below just fly it from above the fold to below it.
   main.js also hands out negative animation delays, so the sky is already
   full on the first frame instead of filling up over the next 15 seconds. */
.sky { position: absolute; inset: 0; overflow: hidden; }
.sky--front {
  /* a few large, soft ones in front of the page — enough to read as weather
     falling on the site, sheer enough to keep text crisp underneath */
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
}
.sky > i { position: absolute; top: 0; display: block; animation: skyFall linear infinite; will-change: transform; }
.sky--front > i { filter: blur(1.1px); }
@keyframes skyFall {
  from { transform: translate3d(0, -15vh, 0) rotate(0deg); }
  to   { transform: translate3d(var(--sway, 0), 115vh, 0) rotate(var(--spin, 0deg)); }
}
html.season-winter .sky > i { border-radius: 50%; box-shadow: 0 0 5px rgba(255,255,255,.85); }
html.season-fall   .sky > i { border-radius: 62% 8% 62% 8%; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; font-weight: 700; }
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--green-600); color: #fff; }
.btn--primary:hover { background: var(--green-700); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline:hover { background: #fff; color: var(--green-700); border-color: #fff; }
.btn--light { background: #fff; color: var(--green-700); }
.btn--light:hover { background: var(--green-050); }
.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; background: var(--green-600); color: #fff; }
.btn--sm:hover { background: var(--green-700); }
.btn--outline-green { background: transparent; color: var(--green-700); border-color: var(--green-600); }
.btn--outline-green:hover { background: var(--green-600); color: #fff; }

/* ---------- Service details page ---------- */
.svc-list { display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; }
.svc-row { display: flex; gap: 1.2rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green-500); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.svc-row__icon { flex: none; width: 50px; height: 50px; display: grid; place-items: center; background: var(--green-050); color: var(--green-600); border-radius: 12px; }
.svc-row__icon svg { width: 28px; height: 28px; }
.svc-row h3 { font-size: 1.2rem; color: var(--green-800); margin-bottom: .3rem; }
.svc-row p { color: var(--ink-soft); font-size: .97rem; }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--green-900); color: #d7e7db; font-size: .85rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; flex-wrap: wrap; gap: .4rem; }
.topbar a:hover { color: #fff; }
.topbar__sep { opacity: .4; margin: 0 .6rem; }
.topbar__social { display: flex; align-items: center; gap: 1.2rem; }
.topbar__quote { color: #fff; font-weight: 600; }
.lang-toggle { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; font-family: var(--font-body); font-size: .8rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; cursor: pointer; transition: background .2s; }
.lang-toggle:hover { background: rgba(255,255,255,.16); }

.nav > a.is-active { color: var(--green-600); font-weight: 600; }

/* ---------- Our Projects (masonry + filters + lightbox) ---------- */
.projects { background: transparent; padding-top: 3rem; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 auto 2.2rem; max-width: 60rem; }
.filter { font-family: var(--font-head); font-weight: 600; font-size: .88rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.filter:hover { border-color: var(--green-500); color: var(--green-700); }
.filter.is-active { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.masonry { columns: 4 260px; column-gap: 1rem; }
.masonry__item { position: relative; break-inside: avoid; margin: 0 0 1rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.masonry__item img { width: 100%; height: auto; display: block; cursor: zoom-in; transition: transform .3s ease; background: var(--green-050); }
.masonry__item:hover img { transform: scale(1.04); }
.masonry__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,32,19,.55), rgba(8,32,19,0) 45%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.masonry__item:hover::after { opacity: 1; }
.masonry__cap { position: absolute; left: .7rem; bottom: .6rem; z-index: 2; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .82rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.masonry__item:hover .masonry__cap { opacity: 1; transform: none; }
.masonry__empty { text-align: center; color: var(--ink-soft); padding: 3rem 0; }

.lb { position: fixed; inset: 0; z-index: 100; background: rgba(6,20,12,.94); display: grid; place-items: center; }
.lb__img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb__btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; border-radius: 999px; display: grid; place-items: center; transition: background .2s; }
.lb__btn:hover { background: rgba(255,255,255,.28); }
.lb__close { top: 1.1rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lb__prev { left: 1.2rem; }
.lb__next { right: 1.2rem; }
.lb__count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: #dfeee2; font-size: .9rem; letter-spacing: .04em; }
@media (max-width: 640px) {
  .lb__prev, .lb__next { width: 44px; height: 44px; font-size: 1.6rem; }
  .lb__prev { left: .5rem; } .lb__next { right: .5rem; }
}

/* ---------- Community promo banner (中文) ---------- */
[hidden] { display: none !important; }
.promo { background: linear-gradient(90deg, #b81d24, #d4342c); color: #fff; }
.promo__inner { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .6rem 0; flex-wrap: wrap; text-align: center; }
.promo__badge { background: #ffd54a; color: #7a1418; font-family: var(--font-head); font-weight: 800; font-size: .82rem; padding: .2rem .6rem; border-radius: 6px; letter-spacing: .02em; flex: none; }
.promo__text { font-weight: 600; font-size: .96rem; }
.promo__cta { background: #fff; color: #b81d24; font-weight: 700; font-family: var(--font-head); font-size: .88rem; padding: .4rem .9rem; border-radius: 999px; flex: none; transition: transform .2s; }
.promo__cta:hover { transform: translateY(-1px); }
.promo__close { background: transparent; border: 0; color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; opacity: .8; padding: 0 .2rem; flex: none; }
.promo__close:hover { opacity: 1; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.header.scrolled { box-shadow: 0 4px 18px rgba(20,60,40,.08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__logo { height: 42px; width: auto; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--green-800); }
.nav { display: flex; align-items: center; gap: 1.7rem; font-weight: 500; }
.nav > a { color: var(--ink); transition: color .2s; }
.nav > a:hover { color: var(--green-600); }
.nav > a.btn { color: #fff; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 26px; height: 3px; background: var(--green-800); border-radius: 2px; transition: .3s; }
.nav__toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; padding: 7rem 0; overflow: hidden;
  background: #14492c url("../assets/hero-poster.jpg") center / cover no-repeat;
}
/* Background video: sits under the gradient overlay, fades in once it can play
   so the poster -> video swap is invisible. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,38,23,.86), rgba(14,52,31,.55)); }
.hero::after {
  content: ""; position: absolute; right: -20px; bottom: -30px; width: 340px; height: 340px;
  background: url("../assets/goat-mark.svg") no-repeat center / contain;
  opacity: .07; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 620px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: #bfe6c8; margin-bottom: .9rem; }
.hero__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.hero__slogan { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: #cdeecf; margin-top: .9rem; }
.hero__sub { font-size: 1rem; margin-top: .7rem; max-width: 33rem; opacity: .95; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section__head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--green-600); margin-bottom: .7rem; }
.section__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--green-800); }
.section__head p { color: var(--ink-soft); margin-top: .7rem; }

/* ---------- G.O.A.T. branding strip ---------- */
.goat-strip { background: var(--green-900); color: #e7f4ea; }
.goat-strip__inner { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .85rem 0; text-align: center; flex-wrap: wrap; }
.goat-strip__mark { width: 26px; height: 26px; opacity: .9; flex: none; }
.goat-strip p { font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: .02em; }
.goat-strip strong { color: #8fe0a4; font-weight: 700; }

/* ---------- Services (image tiles) ---------- */
.services { background: transparent; }
.services__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.service {
  position: relative; display: block; flex: 0 1 calc(33.333% - 0.8rem);
  aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.service__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,32,19,.86) 0%, rgba(8,32,19,.38) 42%, rgba(8,32,19,0) 72%);
}
.service__label {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .95rem; z-index: 2;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  transition: transform .3s ease;
}
.service__hint {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .7rem; z-index: 2;
  color: #dff3e4; font-weight: 600; font-size: .85rem;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.service:hover .service__img { transform: scale(1.06); }
.service:hover::after { background: linear-gradient(to top, rgba(8,32,19,.92) 0%, rgba(8,32,19,.5) 50%, rgba(8,32,19,.1) 85%); }
.service:hover .service__label { transform: translateY(-1.35rem); }
.service:hover .service__hint { opacity: 1; transform: none; }
.service:hover { box-shadow: var(--shadow-lg, var(--shadow)); }

/* ---------- Placeholders (swap for real photos) ---------- */
.placeholder {
  display: grid; place-items: center; text-align: center;
  background: var(--green-050); color: var(--green-700);
  border: 1px dashed #b9d4bd; border-radius: var(--radius); min-height: 180px;
  font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.placeholder--before { background: #efe9df; color: #7a6a4c; border-color: #cdbfa0; }
.placeholder--after  { background: #e4f3e6; color: var(--green-700); }

/* ---------- Our Work ---------- */
.work { background: transparent; }
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 2.4rem; }
/* pan-y: the browser keeps vertical swipes (page scroll) and hands us only the
   horizontal ones, so phones can scroll straight past the sliders. */
.ba {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; pointer-events: none; }
.ba__before { clip-path: inset(0 50% 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); z-index: 3; pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--green-700); display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow); }
/* The range is only the keyboard / screen-reader control now; dragging is
   handled with pointer events on the card itself (see main.js). */
.ba__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.ba:focus-within .ba__handle { background: var(--green-300, #9be0ad); }
.ba__tag { position: absolute; top: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.55); color: #fff; padding: .3rem .65rem; border-radius: 4px; z-index: 2; transition: opacity .2s ease; }
.ba__tag--before { left: 1rem; }
.ba__tag--after { right: 1rem; }
.ba__tag--hidden { opacity: 0; }
/* Newest four sliders show by default; the rest sit behind the "show more"
   button. The button hides itself when there is nothing extra to show. */
.ba-grid--collapsed .ba:nth-child(n+5) { display: none; }
.ba-more { text-align: center; margin: -1rem 0 2.4rem; }
.ba-more__hide { display: none; }
.ba-more__btn[aria-expanded="true"] .ba-more__show { display: none; }
.ba-more__btn[aria-expanded="true"] .ba-more__hide { display: inline; }

.work__more { text-align: center; margin-top: 2rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery__item { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); transition: transform .2s, box-shadow .2s; }
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- About ---------- */
.about { background: transparent; }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about__photo { width: 100%; aspect-ratio: 4/3; min-height: 260px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.about__content h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: .3rem 0 1rem; }
.about__content p { color: var(--ink-soft); }
.about__list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; margin: 1.4rem 0 1.8rem; }
.about__list li { position: relative; padding-left: 1.7rem; font-weight: 500; }
.about__list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: #fff; background: var(--green-500); width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; display: grid; place-items: center; }

/* ---------- CTA strip ---------- */
.cta { position: relative; background: linear-gradient(120deg, var(--green-900), var(--green-700)); color: #fff; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 220px; height: 220px; background: url("../assets/goat-mark.svg") no-repeat center / contain;
  opacity: .08; pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 3rem 0; flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.cta p { opacity: .9; margin-top: .3rem; }

/* ---------- Contact ---------- */
.contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.contact__info h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: .3rem 0 1rem; }
.contact__info p { color: var(--ink-soft); }
.contact__details { margin-top: 1.6rem; display: grid; gap: .9rem; }
.contact__details li { display: flex; align-items: center; gap: .8rem; font-weight: 500; }

/* Save-our-contact: QR (offline vCard) + .vcf download. */
.savecard { margin-top: 1.8rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.savecard__qr { width: 132px; height: 132px; display: block; flex-shrink: 0;
  background: #fff; border-radius: var(--radius-sm); padding: 7px; }
.savecard__text { display: flex; flex-direction: column; gap: .85rem; flex: 1 1 210px; }
.savecard__text p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.savecard__btn { align-self: flex-start; }
.contact__ico { width: 38px; height: 38px; display: grid; place-items: center; background: var(--green-050); border-radius: 8px; }

.contact__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; box-shadow: var(--shadow); }
.field { display: grid; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: .95rem; padding: .75rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .2s, box-shadow .2s; resize: vertical; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(46,156,88,.15); }
.field input.invalid, .field textarea.invalid { border-color: #d9534f; }
.form__note { grid-column: 1 / -1; font-size: .9rem; font-weight: 600; color: var(--green-600); min-height: 1.1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Footer ---------- */
.footer { background: var(--green-900); color: #bcd4c2; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding: 3rem 0 2.4rem; }
.footer__brand .brand__name { color: #fff; }
.footer__brand p { margin-top: .8rem; font-family: var(--font-head); font-weight: 500; }
.footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: .9rem; }
.footer__col a, .footer__col span { display: block; margin-bottom: .5rem; font-size: .92rem; }
.footer__col a:hover { color: #fff; }
.footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem 0; font-size: .85rem; opacity: .7; }

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

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .service { flex-basis: calc(50% - 0.6rem); }
  .ba-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .about__inner, .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav {
    position: fixed; inset: 0 0 auto 0; flex-direction: column; align-items: flex-start;
    background: #fff; padding: 5.5rem 2rem 2rem; gap: 1.3rem;
    transform: translateY(-100%); transition: transform .35s ease; box-shadow: var(--shadow);
  }
  .nav.open { transform: translateY(0); }
  .nav__toggle { display: flex; z-index: 70; }
  .service { flex-basis: 100%; }
  .gallery { grid-template-columns: 1fr; }
  .contact__form { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
  .hero { padding: 5rem 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lawn__mower { display: none; }
  .lawn__mowed { clip-path: none; }           /* show a calm, fully-cleared ground */
  .lawn__mower svg { animation: none; }
  .sky { display: none; }                     /* no falling leaves or snow */
  .rig__beacon { animation: none; }
}

/* --- Seasonal theme -------------------------------------------------------
   js/season.js adds season-winter / -spring / -summer / -fall to <html> before
   first paint, and two things hang off that class: the tokens below re-dress
   the scroll backdrop (ground, cleared lane, weather, the goat's front
   attachment), and the `order` rules after them float the services people
   actually want right now to the front of the row.

   Spring and summer keep the defaults at the top of this file — green grass,
   a mower, nothing falling out of the sky. Only fall and winter are dressed.
   Preview either one without waiting for the calendar: ?season=winter. */

/* Fall — a yellowed, leaf-strewn lawn the goat sweeps clean. */
html.season-fall {
  --ground-a:   #e6dcae;
  --ground-b:   #dbd09b;
  --ground-tex: rgba(130,95,25,.05);
  --lane-a:     #f4eecd;
  --lane-b:     #ebe3ba;
  --rig-opacity: .58;
}
/* Fallen leaves, tiled at four different sizes so the scatter never repeats
   visibly. The goat's cleared band paints over these. */
html.season-fall .lawn::before {
  background-image:
    radial-gradient(ellipse 7px 4px at 20% 30%, rgba(190,96,30,.6), transparent 70%),
    radial-gradient(ellipse 6px 4px at 72% 66%, rgba(206,150,38,.55), transparent 70%),
    radial-gradient(ellipse 8px 5px at 45% 86%, rgba(216,132,44,.5), transparent 70%),
    radial-gradient(ellipse 5px 3px at 88% 14%, rgba(150,84,28,.55), transparent 70%);
  background-size: 190px 150px, 230px 180px, 170px 210px, 260px 160px;
}

/* Winter — untouched snow, with a plowed lane opening up behind the goat. */
html.season-winter {
  --ground-a:   #e4ecf6;
  --ground-b:   #d9e3ef;
  --ground-tex: rgba(90,120,160,.06);
  --lane-a:     #f8fbfe;
  --lane-b:     #eef4fb;
  --lane-w:     62px;                 /* a plow clears a wider lane than a mower */
  --rig-opacity: .62;
}
html.season-winter .lawn::before {
  background-image:
    radial-gradient(ellipse 42px 12px at 26% 38%, rgba(158,184,214,.34), transparent 72%),
    radial-gradient(ellipse 56px 14px at 74% 76%, rgba(150,178,210,.3), transparent 72%);
  background-size: 330px 220px, 410px 260px;
}

/* The goat keeps the same chassis all year; only the front attachment changes.
   Exactly one rig shows, and mowing is the fallback — so spring, summer and a
   browser with JS off all get the mower rather than a machine with no front. */
.rig--leaf, .rig--plow { display: none; }
html.season-fall   .rig--mow  { display: none; }
html.season-fall   .rig--leaf { display: inline; }
html.season-winter .rig--mow  { display: none; }
html.season-winter .rig--plow { display: inline; }
@keyframes beaconFlash { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .18; } }
.rig__beacon { animation: beaconFlash .9s steps(1, end) infinite; }

/* Service ordering. DOM order is deliberately untouched, so crawlers and
   screen readers still get the canonical order and with JS off nothing moves.
   To retune a season, change which slugs get the negative order values. */
.season-spring .service[data-service="landscaping"] { order: -5; }
.season-spring .service[data-service="lawncare"]    { order: -4; }
.season-spring .service[data-service="drainage"]    { order: -3; }
.season-spring .service[data-service="waste"]       { order: -2; }
.season-spring .service[data-service="hedge"]       { order: -1; }

.season-summer .service[data-service="lawncare"]    { order: -4; }
.season-summer .service[data-service="hardscaping"] { order: -3; }
.season-summer .service[data-service="powerwash"]   { order: -2; }
.season-summer .service[data-service="hedge"]       { order: -1; }

/* Snow is promoted in fall too - people book before the first snowfall. */
.season-fall   .service[data-service="fallcleanup"] { order: -5; }
.season-fall   .service[data-service="gutter"]      { order: -4; }
.season-fall   .service[data-service="waste"]       { order: -3; }
.season-fall   .service[data-service="maintenance"] { order: -2; }
.season-fall   .service[data-service="snow"]        { order: -1; }

.season-winter .service[data-service="snow"]        { order: -4; }
.season-winter .service[data-service="maintenance"] { order: -3; }
.season-winter .service[data-service="demolition"]  { order: -2; }