/* ===========================================================================
   Rootwork — landscaping identity.
   Botanical and cartographic: deep planted green, clay and a bright growth
   accent, with a soft variable serif for headings.
   =========================================================================== */

:root {
  --brand:       #2f6b3c;
  --brand-deep:  #1f4a29;
  --brand-tint:  #e7f1e8;
  --brand-line:  #b5d3bb;
  --brand-on:    #ffffff;
  --accent:      #a8572a;
  --accent-tint: #f8ede4;
  --growth:      #79ac2f;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Fraunces is a variable serif; dial in a softer, warmer cut. */
h1, h2, h3, h4 {
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 36;
  letter-spacing: -0.012em;
}
.stat-value { font-variation-settings: "SOFT" 30, "opsz" 24; }
.brand-copy strong { font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 20; }

/* Topographic contour backdrop for the marketing page. */
.contour-bg {
  background-image:
    radial-gradient(ellipse 120% 80% at 18% 10%, transparent 38%, var(--contour, rgba(47,107,60,.07)) 38.6%, transparent 39.4%),
    radial-gradient(ellipse 120% 80% at 18% 10%, transparent 52%, var(--contour, rgba(47,107,60,.07)) 52.6%, transparent 53.4%),
    radial-gradient(ellipse 120% 80% at 18% 10%, transparent 66%, var(--contour, rgba(47,107,60,.07)) 66.6%, transparent 67.4%),
    radial-gradient(ellipse 140% 90% at 85% 80%, transparent 40%, var(--contour, rgba(47,107,60,.07)) 40.6%, transparent 41.4%),
    radial-gradient(ellipse 140% 90% at 85% 80%, transparent 58%, var(--contour, rgba(47,107,60,.07)) 58.6%, transparent 59.4%);
}

/* Seasonal chip used on service plans. */
.season {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-11); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-deep);
}
.season::before { content: ""; width: 7px; height: 7px; border-radius: 2px 6px 2px 6px; background: var(--growth); }