/* ==========================================================================
   Vegetation Services, LLC — site styles (the "Open Field" design)
   Calm, light, easy to deal with. Warm off-white ground, soft moss greens,
   generous whitespace, big rounded cards and gentle layered shadows.
   Bricolage Grotesque for display, Instrument Sans for text.
   ========================================================================== */

:root {
  --shell:   #fbfaf7;
  --tint:    #f1f5ed;
  --card:    #ffffff;
  --moss:    #4f6f42;
  --moss-dp: #3a5330;
  --moss-lt: #8fb37c;
  --wash:    #e4eede;
  --ink:     #23291f;
  --ink-2:   #5d6657;
  --hair:    #e3e6dd;

  --disp: "Bricolage Grotesque", -apple-system, "Segoe UI", sans-serif;
  --text: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;

  --r:    22px;
  --r-sm: 14px;
  --shadow: 0 1px 2px rgba(35,41,31,.04), 0 8px 24px -12px rgba(35,41,31,.14);
  --shadow-up: 0 2px 4px rgba(35,41,31,.05), 0 20px 44px -18px rgba(35,41,31,.22);

  --wrap: 1180px;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0; background: var(--shell); color: var(--ink);
  font-family: var(--text); font-size: 16.5px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1,h2,h3 { margin: 0; font-family: var(--disp); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--moss); color: #fff; padding: 12px 18px; border-radius: 8px; }
.skip:focus { left: 12px; top: 12px; z-index: 999; }

/* Only hide content for the reveal animation once JS is confirmed present —
   otherwise a failed script load would leave the page blank. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.chip {
  display: inline-block; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--moss-dp); background: var(--wash);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 20px;
}
.chip-quiet { background: var(--wash); }
.chip-onDark { background: rgba(255,255,255,.16); color: #eaf2e4; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 200;
  background: rgba(251,250,247,.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 13px 30px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 44px; height: auto; mix-blend-mode: multiply; }
.brand span { font-family: var(--disp); font-size: 1.12rem; font-weight: 800; letter-spacing: -.025em; }

.nav { display: flex; gap: 28px; }
.nav a { font-size: .92rem; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.nav a:hover { color: var(--moss); }

.pill {
  background: var(--moss); color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.pill:hover { background: var(--moss-dp); transform: translateY(-2px); box-shadow: var(--shadow-up); }

.burger { display: none; flex-direction: column; gap: 5px; width: 24px; background: none; border: 0; cursor: pointer; padding: 5px 0; }
.burger span { height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- hero ----------
   Full-bleed photo, then a warm scrim that is near-opaque over the copy and
   opens up toward the right so the image actually reads. Keeps the design
   light and airy instead of turning into a dark stock-photo hero. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 132px 30px 72px;
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url("../images/golden-field.jpg") center 58% / cover no-repeat;
  filter: saturate(.68) brightness(1.06);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(102deg,
      rgba(251,250,247,.985) 0%,
      rgba(251,250,247,.965) 34%,
      rgba(251,250,247,.86)  56%,
      rgba(251,250,247,.48)  78%,
      rgba(251,250,247,.30) 100%),
    linear-gradient(to bottom,
      rgba(251,250,247,.72) 0%,
      rgba(251,250,247,0)   26%),
    /* Bottom edge: the photo runs at full strength behind the stat cards and
       dissolves completely into the page in the padding beneath them. Sized in
       px to match the hero's bottom padding, so the fade never starts behind
       the cards and never ends in a visible line. */
    linear-gradient(to top,
      rgba(251,250,247,1) 0,
      rgba(251,250,247,0) 72px);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 2; }
.blob-a { width: 620px; height: 620px; background: rgba(143,179,124,.26); top: -240px; right: -160px; }

.hero-in { position: relative; z-index: 3; max-width: var(--wrap); margin: 0 auto; width: 100%; }
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 5.2rem);
  font-weight: 600; max-width: 19ch; letter-spacing: -.032em; line-height: 1.04;
}
/* inline-block keeps each sentence whole — a sentence too wide for the line
   moves down intact rather than splitting after "Open" */
.hero h1 span, .hero h1 em { display: inline-block; }
/* Hero copy sits over the photo, so it runs darker than body text elsewhere.
   Measured against the darkest composited pixel under each box: h1 10.1:1,
   accent 6.8:1, sub 6.7:1 — all clear of WCAG AA. Re-check if the photo
   is swapped for a darker one. */
.hero h1 em { font-style: normal; color: var(--moss-dp); }
.hero-sub { margin-top: 28px; max-width: 58ch; color: #3f4736; font-size: 1.12rem; }
.acts { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 36px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text); font-size: .95rem; font-weight: 600;
  padding: 15px 30px; border-radius: 999px;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s, border-color .25s;
}
.btn-solid { background: var(--moss); color: #fff; box-shadow: var(--shadow); }
.btn-solid:hover { background: var(--moss-dp); transform: translateY(-2px); box-shadow: var(--shadow-up); }
.btn-soft { background: var(--card); color: var(--ink); border: 1px solid var(--hair); box-shadow: var(--shadow); }
.btn-soft:hover { border-color: var(--moss-lt); transform: translateY(-2px); box-shadow: var(--shadow-up); }

.quickstats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-top: 72px;
}
/* A touch translucent so the photo reads behind them. Kept high (.92): at .82 the
   cards on the photo side of the hero picked up a grey cast. */
.quickstats div {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--r);
  padding: 24px 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 3px;
}
.quickstats b { font-family: var(--disp); font-size: 2.7rem; font-weight: 800; color: var(--moss); line-height: 1; letter-spacing: -.03em; }
.quickstats > div > span { font-size: .82rem; color: var(--ink-2); }
.quickstats b span { font-size: inherit; color: inherit; }

/* ---------- capability pills ---------- */
.pills {
  /* Top padding keeps the pills clear of the hero so their hover lift does not
     ride up over the photo; bottom is small because the next section brings
     its own top padding. */
  max-width: var(--wrap); margin: 0 auto; padding: 14px 30px 12px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.pills span {
  background: var(--card); border: 1px solid var(--hair); border-radius: 999px;
  padding: 9px 18px; font-size: .86rem; font-weight: 500; color: var(--ink-2);
  transition: border-color .25s, color .25s, transform .25s;
}
.pills span:hover { border-color: var(--moss-lt); color: var(--moss-dp); transform: translateY(-2px); }

/* ---------- bands ---------- */
.band { padding: 92px 30px; }
.band-tint { background: var(--tint); }
.band-in { max-width: var(--wrap); margin: 0 auto; }
.band-hd { max-width: 62ch; margin-bottom: 50px; }
.band-hd h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
.band-note { margin-top: 20px; color: var(--ink-2); }

/* ---------- about split ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 58px; align-items: center; }
.split-copy h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); margin-bottom: 24px; }
.split-copy p { color: var(--ink-2); margin-bottom: 18px; max-width: 60ch; }
.split-fig { margin: 0; }
.split-fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow-up); }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.tcard {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
.tcard-wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--wash); color: var(--moss-dp);
  display: grid; place-items: center;
  font-family: var(--disp); font-size: 1.2rem; font-weight: 800;
  margin-bottom: 18px;
}
.tcard-wide .avatar { margin-bottom: 0; }
.tcard h3 { font-size: 1.4rem; }
.tcard > p, .trole { font-size: .86rem; color: var(--moss); font-weight: 600; margin-top: 6px; }
.tbio { color: var(--ink-2); font-size: .97rem; margin-top: 14px; max-width: 74ch; font-weight: 400; }
.tlink {
  display: inline-block; margin-top: 15px; font-weight: 600; color: var(--moss);
  border-bottom: 2px solid var(--moss-lt); padding-bottom: 2px;
}
.tlink:hover { color: var(--moss-dp); }

/* ---------- services ---------- */
.svc { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.scard {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 32px 30px; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
.scard h3 { font-size: 1.32rem; margin-bottom: 16px; }
.scard li {
  padding: 10px 0 10px 26px; position: relative;
  color: var(--ink-2); font-size: .95rem; border-bottom: 1px solid var(--hair);
}
.scard li:last-child { border-bottom: 0; }
.scard li::before {
  content: ""; position: absolute; left: 4px; top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--moss-lt);
}

.upnext {
  margin-top: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--wash); border-radius: var(--r); padding: 28px 30px;
}
.upnext-chip {
  background: var(--moss); color: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.upnext h3 { font-size: 1.3rem; }
.upnext p { color: var(--ink-2); font-size: .95rem; margin-top: 5px; }

/* ---------- industries tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tags li {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 15px 22px; font-size: .97rem; font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform .25s, border-color .25s, color .25s;
}
.tags li:hover { transform: translateY(-3px); border-color: var(--moss-lt); color: var(--moss-dp); }

/* ---------- mission ---------- */
.mission { padding: 96px 30px; }
.mission-in {
  max-width: var(--wrap); margin: 0 auto;
  background: var(--moss-dp); color: #fff;
  border-radius: 34px; padding: 68px 62px;
  position: relative; overflow: hidden;
}
.mission-in::after {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: rgba(143,179,124,.24); filter: blur(60px); top: -180px; right: -120px;
}
.mission blockquote {
  position: relative; z-index: 1;
  font-family: var(--disp); font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
  max-width: 24ch; margin-bottom: 38px;
}
.mission-two { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.mission-two p { color: rgba(255,255,255,.8); font-size: 1rem; }

/* ---------- area ---------- */
.area { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.area-cards { display: flex; flex-direction: column; gap: 14px; }
.acard {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 22px 26px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 20px;
  transition: transform .25s, border-color .25s;
}
.acard:hover { transform: translateX(4px); border-color: var(--moss-lt); }
.acard b { font-family: var(--disp); font-size: 2rem; font-weight: 800; color: var(--moss); line-height: 1; min-width: 56px; letter-spacing: -.03em; }
.acard span { font-size: 1rem; font-weight: 500; }
.area-copy p { color: var(--ink-2); margin-bottom: 20px; max-width: 62ch; }
.area-note {
  background: var(--card); border-left: 4px solid var(--moss-lt);
  border-radius: var(--r-sm); padding: 20px 24px; color: var(--ink) !important;
  box-shadow: var(--shadow);
}

/* ---------- contact ---------- */
.bigtel {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--disp); font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 800; color: var(--moss); letter-spacing: -.03em;
  margin-bottom: 46px; transition: gap .3s, color .3s;
}
.bigtel em { font-style: normal; font-size: .62em; }
.bigtel:hover { gap: 26px; color: var(--moss-dp); }

.ccards { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 44px; }
.ccard {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 9px;
}
.ccard span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.ccard b, .ccard a { font-family: var(--disp); font-size: 1.06rem; font-weight: 600; word-break: break-word; }
.ccard a:hover { color: var(--moss); }
.ccard i { font-style: normal; font-size: .81rem; color: var(--ink-2); margin-top: auto; }

.cta {
  background: var(--card); border: 1px solid var(--hair); border-radius: 28px;
  padding: 40px 38px; box-shadow: var(--shadow-up);
}
.cta h3 { font-size: 1.6rem; margin-bottom: 14px; }
.cta p { color: var(--ink-2); margin-bottom: 14px; max-width: 78ch; font-size: .98rem; }
.cta .acts { margin-top: 26px; }

/* ---------- footer ---------- */
.foot { background: var(--tint); padding: 48px 30px; border-top: 1px solid var(--hair); }
.foot-in { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.foot-in img { width: 190px; height: auto; mix-blend-mode: multiply; }
.foot-meta p { font-size: .88rem; color: var(--ink-2); }
.foot-meta a { font-weight: 600; color: var(--moss); }
.foot-c { margin-top: 9px !important; font-size: .78rem !important; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .split, .area, .mission-two { grid-template-columns: 1fr; gap: 36px; }
  .split-fig img { aspect-ratio: 16/10; }
  /* stat cards stay four across here, just tighter — stacked 2x2 at this width
     they became large slabs covering the hero photo */
  .quickstats { gap: 12px; }
  .quickstats div { padding: 20px 18px; }
  .quickstats b { font-size: 2.3rem; }
  .ccards { grid-template-columns: repeat(2,1fr); }
  .mission-in { padding: 50px 38px; }
}
@media (max-width: 760px) {
  .quickstats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .nav { display: none; }
  .burger { display: flex; }
  .nav.open {
    display: flex; flex-direction: column; gap: 16px;
    position: fixed; inset: 66px 0 auto 0;
    background: var(--card); padding: 24px 30px;
    border-bottom: 1px solid var(--hair); box-shadow: var(--shadow-up);
  }
}
@media (max-width: 680px) {
  .band, .mission { padding: 62px 20px; }
  /* Phone hero. Copy sits on a clean background; the photo is confined to the
     lower part of the hero, behind the buttons and stat cards, and dissolves
     into the page at both ends so there is no hard edge.
     Confining it matters: stretched over the full (very tall) phone hero the
     1400px photo was scaled up ~4x on a retina screen and showed only blurry
     wheat texture. At this size it shows the sky, sun and tree line instead. */
  .hero { padding: 96px 20px 54px; min-height: 0; }
  .hero-photo {
    top: 46%; background-position: 68% 50%;
    /* fade the photo's own top edge so no seam shows through the scrim */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  }
  /* Copy runs to ~53% of the hero, so the scrim stays near-opaque to 55%,
     opens over the buttons and stats, then closes fully at the bottom edge. */
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(251,250,247,.97) 0%,
      rgba(251,250,247,.96) 55%,
      rgba(251,250,247,.52) 66%,
      rgba(251,250,247,.46) 86%,
      rgba(251,250,247,1)  100%);
  }
  /* Near-opaque on phones: over a busy photo the translucent cards went grey. */
  .quickstats div { background: rgba(255,255,255,.94); }
  /* Left-aligned like the rest of the phone layout; centred, the wrapped rows
     were ragged with a lone pill on the first line. */
  .pills { padding: 10px 20px 14px; justify-content: flex-start; gap: 8px; }
  .pills span { padding: 8px 15px; font-size: .82rem; }
  .top-in { padding: 11px 20px; gap: 14px; }
  /* the name wraps to two lines beside the phone button; keep them tight */
  .brand span { line-height: 1.12; font-size: 1.05rem; }
  .pill { padding: 10px 15px; font-size: .8rem; }
  .svc, .team { grid-template-columns: 1fr; }
  .tcard-wide { grid-column: span 1; grid-template-columns: 1fr; gap: 16px; }
  .ccards { grid-template-columns: 1fr; }
  .quickstats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quickstats b { font-size: 2.1rem; }
  .mission-in { padding: 38px 26px; border-radius: 24px; }
  .cta { padding: 30px 24px; }
  .acts { flex-direction: column; align-items: stretch; }
  .foot-in { justify-content: center; text-align: center; }
}