/* ==========================================================================
   Freedom Lawn Care & Snow Removal — shared stylesheet
   --------------------------------------------------------------------------
   Design language: light, clean, "soft structural". Content sits in nested
   frames (an outer tray + inner panel) with very soft, diffused shadows.

   Palette — edit these tokens to re-brand the whole site:
     --green   lawn / growing season, also the primary button colour
     --slate   snow season
     --accent  small markers only (never body text)
   All text/background pairs meet WCAG AA (checked at build time).
   ========================================================================== */

:root {
  --bg: #f6f6f2;
  --surface: #ffffff;
  --ink: #0e1511;
  --ink-muted: #5b6660;
  --hairline: rgba(14, 21, 17, 0.08);
  --tray: rgba(14, 21, 17, 0.035);

  --green: #1d4a34;
  --green-hover: #163a29;
  --green-mid: #2f6b4a;
  --green-soft: #e6eee7;
  --green-on: #b4c7ba;

  --slate: #22333f;
  --slate-ink: #26394a;
  --slate-soft: #e5ebf0;
  --slate-on: #aebcc8;

  --accent: #d97a2b;

  --ph-bg: #fff0b3;
  --ph-ink: #5a3e00;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 78rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);

  --r-shell: 1.75rem;
  --r-core: calc(var(--r-shell) - 0.375rem);
  --r-sm: 0.875rem;

  --shadow-soft: 0 1px 2px rgba(14, 21, 17, 0.04), 0 12px 32px -12px rgba(14, 21, 17, 0.10);
  --shadow-float: 0 1px 2px rgba(14, 21, 17, 0.05), 0 18px 48px -18px rgba(14, 21, 17, 0.18);

  /* Motion — heavy, natural deceleration. Never bare `ease`. */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6.5rem;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.25rem); line-height: 1; }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.04; }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
p { max-width: 64ch; text-wrap: pretty; }
.lede { font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.h-soft { color: var(--ink-muted); }

/* Eyebrow pill */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tag--lawn { background: var(--green-soft); color: var(--green); box-shadow: none; }
.tag--lawn::before { background: var(--green-mid); }
.tag--snow { background: var(--slate-soft); color: var(--slate-ink); box-shadow: none; }
.tag--snow::before { background: var(--slate-ink); }
.on-dark .tag { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }

.text-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 200ms var(--ease-snap);
}
.text-link:hover { text-decoration-color: currentColor; }

/* Placeholder marker — anything the owner still needs to supply */
.ph {
  background: var(--ph-bg);
  color: var(--ph-ink);
  outline: 1px dashed #b08900;
  outline-offset: -1px;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ph-block {
  background: var(--ph-bg);
  color: var(--ph-ink);
  border: 1px dashed #b08900;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: 0.975rem;
}
.ph-block strong { display: block; margin-bottom: 0.25rem; font-weight: 600; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 46rem; }
.section-head--split { max-width: none; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }

.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }
.prose { display: grid; gap: 1.15rem; align-content: start; }

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

/* ---------- Double-bezel frames ----------
   .shell = outer tray (hairline + padding); .core = the actual panel.
   Concentric radii keep the curves parallel. */
.shell {
  padding: 0.375rem;
  border-radius: var(--r-shell);
  background: var(--tray);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.core {
  position: relative;
  height: 100%;
  border-radius: var(--r-core);
  background: var(--surface);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.core--pad { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.core--green { background: var(--green); color: #fff; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.core--slate { background: var(--slate); color: #fff; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.core--ink { background: var(--ink); color: #fff; }

/* Faint mowing-stripe texture for green panels */
.stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.04) 0 72px, transparent 72px 144px);
  pointer-events: none;
}
.stripes > * { position: relative; }

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 2.5px solid var(--green-mid);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: #fff; }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons (pill + nested icon) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.4rem 0.45rem 0.4rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--green-hover); }
.btn:active { transform: scale(0.98); }
.btn-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  flex: none;
  transition: transform 400ms var(--ease-out), background-color 300ms var(--ease-out);
}
.btn-icon svg { width: 1rem; height: 1rem; }
.btn:hover .btn-icon { transform: translateX(3px) scale(1.05); }

.btn--plain { padding: 0.4rem 1.4rem; }
.btn--light {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-soft);
}
.btn--light:hover { background: #fbfbf9; }
.btn--light .btn-icon { background: var(--green-soft); color: var(--green); }
.on-dark .btn--light { box-shadow: none; }
.btn--ghost-dark {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.08); }
.btn--small { min-height: 2.75rem; font-size: 0.9375rem; padding-left: 1.15rem; }
.btn--small .btn-icon { width: 2rem; height: 2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Floating island header ---------- */
.site-header {
  position: sticky;
  top: 0.75rem;
  z-index: 50;
  padding-inline: var(--gutter);
  margin-top: 0.75rem;
}
.header-inner {
  position: relative;
  z-index: 2;
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
}
/* Glass lives on a pseudo-element: backdrop-filter on the bar itself would
   become the containing block for the fixed mobile menu overlay. */
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-float);
}
.header-inner > .brand, .header-inner > .nav-toggle { position: relative; z-index: 2; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand-sub { font-size: 0.75rem; color: var(--ink-muted); letter-spacing: -0.005em; }

.site-nav { display: flex; align-items: center; gap: 1rem; }
.site-nav ul { display: flex; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 200ms var(--ease-snap), background-color 200ms var(--ease-snap);
}
.site-nav a:not(.btn):hover { color: var(--ink); background: var(--tray); }
.site-nav a[aria-current="page"] { color: var(--green); background: var(--green-soft); }

.nav-toggle { display: none; }

/* Mobile: full-screen glass overlay, links stagger up (JS only; without JS
   the nav simply wraps and stays usable). */
@media (max-width: 1079.98px) {
  .js .nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0 0.6rem 0 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
  }
  .burger {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
  }
  .burger span {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 400ms var(--ease-out);
  }
  .burger span:first-child { top: calc(50% - 3px); }
  .burger span:last-child { top: calc(50% + 2px); }
  .nav-open .burger span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .nav-open .burger span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    padding: 7.5rem var(--gutter) 2rem;
    background: rgba(246, 246, 242, 0.9);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
    overflow-y: auto;
  }
  .js.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms var(--ease-out), visibility 0s;
  }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav li {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
    transition-delay: calc(var(--n, 0) * 45ms);
  }
  .js.nav-open .site-nav li { opacity: 1; transform: none; }
  .js .site-nav a:not(.btn) {
    display: flex;
    min-height: 3.75rem;
    padding: 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--hairline);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .js .site-nav a[aria-current="page"] { color: var(--green-mid); }
  .js .site-nav .btn { align-self: flex-start; }

  html:not(.js) .header-inner { flex-wrap: wrap; border-radius: var(--r-shell); }
  .nav-open .header-inner::before { box-shadow: inset 0 0 0 1px var(--hairline); }
  html:not(.js) .site-nav { flex-wrap: wrap; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
}
@media (max-width: 479.98px) {
  .brand-sub { display: none; }
}

/* ---------- Photo frames ---------- */
/* Image guidance: export real photos as WebP (or AVIF) / JPG, ~1600px on the
   long edge for hero shots and ~1000px elsewhere, target < 200 KB each. Keep
   width/height attributes so space is reserved and the layout never shifts. */
.photo { position: relative; height: 100%; }
.photo .core { background: var(--green-soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-note {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(14, 21, 17, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.photo-chip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
}
.photo-chip svg { width: 1.4rem; height: 1.4rem; padding: 0.25rem; border-radius: 50%; }
.photo-chip--lawn svg { background: var(--green-soft); color: var(--green); }
.photo-chip--snow svg { background: var(--slate-soft); color: var(--slate-ink); }

/* ---------- Home hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hero-copy { display: grid; gap: 1.6rem; justify-items: start; }
.hero h1 .h-soft { display: block; }
.hero-media { position: relative; padding-bottom: clamp(3rem, 8vw, 5rem); }
.hero-media > .photo:first-child { aspect-ratio: 5 / 4; height: auto; }
.hero-media > .photo--inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  height: auto;
  background: rgba(246, 246, 242, 0.85);
}
@media (max-width: 599.98px) {
  .hero-media > .photo--inset { width: 52%; }
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-points svg { width: 1.1rem; height: 1.1rem; color: var(--green-mid); flex: none; }

/* Towns row */
.towns-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.towns-row-label { font-size: 0.875rem; color: var(--ink-muted); margin-right: 0.25rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap), color 200ms var(--ease-snap);
}
a.chip:hover { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px transparent; }
.chip--static { min-height: 2.25rem; padding: 0 0.85rem; font-size: 0.875rem; }
.on-dark .chip { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; }

/* ---------- Services bento ---------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
  .bento > :nth-child(2) { grid-column: span 5; }
  .bento > :nth-child(3) { grid-column: span 5; }
}
.bento .core { display: flex; flex-direction: column; gap: 1.25rem; }
.bento-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.bento-icon svg { width: 1.4rem; height: 1.4rem; }
.bento-icon--light { background: var(--green-soft); color: var(--green); box-shadow: none; }
.bento h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; }
.bento .core--slate p, .bento .core--green p { color: rgba(255, 255, 255, 0.82); }
.bento .core:not(.core--slate):not(.core--green) p { color: var(--ink-muted); }
.svc-list { display: grid; margin-top: 0.25rem; }
.svc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 500;
}
.svc-list li span { font-weight: 400; font-size: 0.875rem; color: var(--slate-on); text-align: right; }
.core--green .svc-list li span { color: var(--green-on); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}
.card-link .btn-icon { background: rgba(255, 255, 255, 0.14); }
.card-link:hover .btn-icon { transform: translateX(3px) scale(1.05); }
.core:not(.core--slate):not(.core--green) .card-link .btn-icon { background: var(--green-soft); color: var(--green); }

/* ---------- Two side-by-side service panels (town pages) ---------- */
.pair { display: grid; gap: 1rem; }
@media (min-width: 860px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair .core { display: flex; flex-direction: column; gap: 1.25rem; }
.pair h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.08; }
.pair .core--slate p, .pair .core--green p { color: rgba(255, 255, 255, 0.85); }

.legal { max-width: 46rem; display: grid; gap: 1rem; }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); letter-spacing: -0.03em; margin-top: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-muted); }
.legal ul { display: grid; gap: 0.6rem; padding-left: 1.25rem; margin: 0; }
.legal li strong, .legal p strong { color: var(--ink); font-weight: 600; }
.legal h3 { font-size: 1.125rem; letter-spacing: -0.01em; margin-top: 0.75rem; }

/* ---------- Audience cards ---------- */
.audience { display: grid; gap: 1rem; }
@media (min-width: 860px) { .audience { grid-template-columns: 1fr 1.35fr; } }
.audience .core { display: grid; gap: 1rem; align-content: start; }
.audience p { color: var(--ink-muted); }
.audience .chip-list { margin-top: 0.5rem; }

/* ---------- Trust grid ---------- */
.trust { display: grid; gap: 1rem; }
@media (min-width: 640px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust .core { display: grid; gap: 0.75rem; align-content: start; }
.trust-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}
.trust-icon svg { width: 1.3rem; height: 1.3rem; }
.trust p { color: var(--ink-muted); font-size: 0.975rem; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: 1rem; }
@media (min-width: 860px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote .core { display: grid; gap: 1.5rem; align-content: space-between; }
.quote blockquote { font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; letter-spacing: -0.01em; }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; font-weight: 500; }
.quote-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--green-soft); flex: none; }

/* ---------- CTA panel ---------- */
.cta .core { display: grid; gap: 2rem; align-items: end; padding: clamp(2rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .cta .core { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.82); margin-top: 1rem; }
@media (min-width: 900px) { .cta .btn-row { justify-content: flex-end; } }

/* ---------- Full-width call-to-action band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
  color: #fff;
}
.cta-band--green { background: var(--green); }
.cta-band--slate { background: var(--slate); }
.cta-inner { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) {
  .cta-inner { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
  .cta-inner .btn-row { justify-content: flex-end; }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-top: 1rem; }

/* ---------- Interior page hero ---------- */
.page-hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); }
.page-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; } }
.page-hero-copy { display: grid; gap: 1.5rem; justify-items: start; }
.page-hero .photo { aspect-ratio: 4 / 3; height: auto; }

.breadcrumb { font-size: 0.875rem; color: var(--ink-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; opacity: 0.5; }
.breadcrumb a { text-underline-offset: 0.2em; }
.breadcrumb a:hover { color: var(--ink); }

/* ---------- Edge-to-edge interior hero with a photo background ----------
   Pulls up under the floating header so the photo runs to the very top and
   both sides of the screen. */
.hero-photo {
  position: relative;
  display: grid;
  align-items: end;
  margin-top: -4.75rem;
  min-height: clamp(36rem, 82vh, 48rem);
  padding-top: 8rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--slate);
  overflow: hidden;
}
.hero-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 21, 17, 0.84) 0%, rgba(14, 21, 17, 0.62) 46%, rgba(14, 21, 17, 0.12) 100%),
    linear-gradient(0deg, rgba(14, 21, 17, 0.5), transparent 45%);
}
.hero-photo > .container { position: relative; z-index: 2; }
.hero-photo__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 46rem;
  color: #fff;
}
.hero-photo h1 { color: #fff; }
.hero-photo .h-soft { display: block; color: rgba(255, 255, 255, 0.78); }
.hero-photo .hero-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.88); font-size: 0.9375rem; }
.hero-photo .hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-photo .hero-points svg { width: 1.1rem; height: 1.1rem; color: #fff; flex: none; }
.hero-photo .lede { color: rgba(255, 255, 255, 0.9); }
.hero-photo .breadcrumb, .hero-photo .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.hero-photo .breadcrumb a:hover { color: #fff; }
.hero-photo + .section--flush-top { padding-top: clamp(3.5rem, 8vw, 6rem); }

/* lighter overlay for bright lawn photos */
.hero-photo.hero-photo--lawn::after {
  background:
    linear-gradient(90deg, rgba(14, 21, 17, 0.74) 0%, rgba(14, 21, 17, 0.48) 46%, rgba(14, 21, 17, 0.05) 100%),
    linear-gradient(0deg, rgba(14, 21, 17, 0.45), transparent 45%);
}
@media (max-width: 899.98px) {
  .hero-photo.hero-photo--lawn::after {
    background: linear-gradient(0deg, rgba(14, 21, 17, 0.84) 0%, rgba(14, 21, 17, 0.6) 55%, rgba(14, 21, 17, 0.18) 100%);
  }
}
@media (max-width: 899.98px) {
  .hero-photo::after {
    background: linear-gradient(0deg, rgba(14, 21, 17, 0.88) 0%, rgba(14, 21, 17, 0.7) 60%, rgba(14, 21, 17, 0.38) 100%);
  }
}

/* Facts list in a card */
.facts { display: grid; }
.facts div { display: grid; gap: 0.15rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--hairline); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts div:last-child { padding-bottom: 0; }
@media (min-width: 560px) { .facts div { grid-template-columns: 10rem 1fr; } }
.facts dt { font-weight: 500; }
.facts dd { color: var(--ink-muted); }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
.svc-card .core { display: flex; flex-direction: column; }
@media (min-width: 900px) { .svc-card--wide { grid-column: 1 / -1; } }
.svc-card--wide .svc-media { aspect-ratio: 21 / 9; }
.svc-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { display: grid; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); align-content: start; }
.svc-num { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-muted); }
.svc-body h3 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); letter-spacing: -0.03em; }
.svc-body p { color: var(--ink-muted); }
.fit { display: grid; gap: 0.6rem; margin-top: 0.25rem; }
.fit-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink); }

/* ---------- Contract comparison cards ---------- */
.compare { display: grid; gap: 1rem; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare .core { display: grid; gap: 1.25rem; align-content: start; }
.compare h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.035em; }
.compare dl { display: grid; }
.compare dl div { padding-block: 1rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.2rem; }
.compare dt { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.compare .core--slate dl div { border-color: rgba(255, 255, 255, 0.12); }
.compare .core--slate dt { color: var(--slate-on); }

/* ---------- FAQ ---------- */
.faq .core { padding: 0.5rem clamp(1.25rem, 3vw, 2rem); }
.faq details + details { border-top: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding-block: 1.2rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat,
    var(--tray);
  transition: transform 300ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.4rem; color: var(--ink-muted); }

/* ---------- Service area ---------- */
.area-map .core { padding: clamp(0.75rem, 2vw, 1.5rem); }
.area-map .core > svg { width: 100%; height: auto; }
.area-map iframe.osm { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; border: 0; border-radius: calc(var(--r-core) - 0.25rem); background: var(--green-soft); }
.area-map figcaption { margin-top: 0.75rem; padding-inline: 0.25rem; font-size: 0.875rem; color: var(--ink-muted); }
.map-town circle { fill: var(--slate-ink); stroke: #fff; stroke-width: 5; }
.map-town--home circle { fill: var(--green-mid); }
.map-town text {
  font-family: var(--font);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  fill: var(--ink);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 9px;
  stroke-linejoin: round;
}
.map-road { fill: none; stroke: #c9d1cc; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map-road--minor { stroke-width: 4; stroke-dasharray: 2 10; stroke: #a9b4ad; }
.map-road-label { font-family: var(--font); font-weight: 600; font-size: 22px; fill: var(--ink-muted); }
.map-county { stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 8 8; opacity: 0.5; }
.map-county-label { font-family: var(--font); font-weight: 500; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-muted); }

.town-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .town-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1140px) { .town-grid { grid-template-columns: repeat(3, 1fr); } }
.town .core { display: grid; gap: 0.9rem; align-content: start; }
.town-county {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.town--home .town-county { color: var(--green); }
.town h2 { font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem); letter-spacing: -0.035em; }
.town p { color: var(--ink-muted); font-size: 0.995rem; }
.town-links-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.town--home .core { background: var(--green-soft); }

/* ---------- About ---------- */
.about-portrait { aspect-ratio: 4 / 5; height: auto; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; } }
.contact-side { display: grid; gap: 1rem; }
.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 500; font-size: 0.9375rem; }
.hint, .form-note { font-size: 0.875rem; color: var(--ink-muted); }
.req { color: var(--green-mid); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(14, 21, 17, 0.14);
  font-size: 1rem; /* >= 16px stops iOS zoom-on-focus */
  transition: box-shadow 200ms var(--ease-snap), background-color 200ms var(--ease-snap);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6660' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(14, 21, 17, 0.28); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  background-color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--green-mid), 0 0 0 4px rgba(47, 107, 74, 0.15);
}
.form-heading { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.form-intro { margin-bottom: 1.25rem; }
.embed-form { min-height: 640px; margin-bottom: 1rem; }
.embed-form iframe { display: block; }
.form-status { min-height: 1.5rem; font-weight: 500; color: #9a3412; }

.contact-lines { display: grid; font-style: normal; }
.contact-lines div { display: grid; gap: 0.1rem; padding-block: 0.9rem; border-top: 1px solid var(--hairline); }
.contact-lines div:first-child { border-top: 0; padding-top: 0; }
.contact-lines dt { font-size: 0.8125rem; color: var(--ink-muted); }
.contact-lines dd { font-size: 1.0625rem; font-weight: 500; }
.contact-lines a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding: 0; }
.footer-panel {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem;
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer-brand .brand-sub { color: #9fb0a6; display: block; }
.footer-brand p { margin-top: 1.25rem; color: #c6cfc9; max-width: 34ch; }
.footer-heading { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0a6; margin-bottom: 0.75rem; }
.footer-links li a { display: inline-flex; align-items: center; min-height: 40px; color: #e3e8e5; }
.site-footer address { font-style: normal; display: grid; gap: 0.35rem; color: #c6cfc9; }
.site-footer address a { min-height: 40px; display: inline-flex; align-items: center; }
.footer-base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  color: #9fb0a6;
  font-size: 0.875rem;
}

/* ---------- Scroll reveal ----------
   Armed only after script.js adds .motion-ready, so content is always
   visible without JS. Already-on-screen elements are never hidden. */
.motion-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
}
.motion-ready .reveal {
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .motion-ready .reveal:not(.is-visible) { opacity: 1; transform: none; filter: none; }
  .js .site-nav li { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .cta, .skip-link { display: none !important; }
  body { background: #fff; }
}


/* ---------- Scroll-aware header ----------
   At the very top of a page the logo sits big and centred with no bar. On
   scroll it glides left and shrinks, the bar fades in behind it, and the menu
   slides in on the right. Only transform and opacity are animated. Without
   JavaScript the normal header is shown (the at-top class is never added). */
#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.brand-mark--rev { display: none; }
.site-header .brand { transform-origin: center; }
html.header-anim .site-header .brand { transition: transform 700ms var(--ease-out), color 400ms var(--ease-out); }
html.header-anim .header-inner::before { transition: opacity 500ms var(--ease-out); }

html.header-ready.at-top:not(.nav-open) .site-header:not(:focus-within) .brand { transform: translateX(var(--brand-shift, 0px)) scale(1.75); }
html.header-ready.at-top:not(.nav-open) .site-header:not(:focus-within) .header-inner::before { opacity: 0; }

/* the menu stays in the page for keyboard and screen-reader users; focusing it brings the bar back */
@media (min-width: 1080px) {
  html.header-anim .site-nav { transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
  html.header-ready.at-top .site-header:not(:focus-within) .site-nav { opacity: 0; transform: translateX(32px); pointer-events: none; }
}
@media (max-width: 1079.98px) {
  html.header-anim .js .nav-toggle, html.header-anim.js .nav-toggle { transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
  html.header-ready.at-top:not(.nav-open) .site-header:not(:focus-within) .nav-toggle { opacity: 0; transform: translateX(32px); pointer-events: none; }
  html.header-ready.at-top:not(.nav-open) .site-header:not(:focus-within) .brand { transform: translateX(var(--brand-shift, 0px)) scale(1.35); }
}

/* over a photo banner the big logo switches to its light version */
html.header-ready.at-top:not(.nav-open) body[data-hero="photo"] .site-header:not(:focus-within) .brand { color: #fff; }
html.header-ready.at-top:not(.nav-open) body[data-hero="photo"] .site-header:not(:focus-within) .brand-sub { color: rgba(255, 255, 255, 0.85); }
html.header-ready.at-top:not(.nav-open) body[data-hero="photo"] .site-header:not(:focus-within) .brand-mark--color { display: none; }
html.header-ready.at-top:not(.nav-open) body[data-hero="photo"] .site-header:not(:focus-within) .brand-mark--rev { display: block; }


/* ---------- Service area map (Leaflet + OpenStreetMap) ---------- */
.osm-map { position: relative; z-index: 0; isolation: isolate; width: 100%; aspect-ratio: 16 / 11; border-radius: calc(var(--r-core) - 0.25rem); overflow: hidden; background: var(--green-soft); font-family: var(--font); }
.osm-map .leaflet-control-attribution { font-size: 0.6875rem; }
.pin { position: relative; display: block; width: 0; height: 0; cursor: pointer; }
.pin i { position: absolute; left: -0.45rem; top: -0.45rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--slate-ink); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(14, 21, 17, 0.4); }
.pin b { position: absolute; padding: 0.3rem 0.65rem; border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.1; white-space: nowrap; box-shadow: 0 0 0 1px rgba(14, 21, 17, 0.12), 0 6px 14px -6px rgba(14, 21, 17, 0.35); }
.pin--right b { left: 0.9rem; top: 0; transform: translateY(-50%); }
.pin--left b { right: 0.9rem; top: 0; transform: translateY(-50%); }
.pin--above b { bottom: 0.9rem; left: 0; transform: translateX(-50%); }
.pin--below b { top: 0.9rem; left: 0; transform: translateX(-50%); }
.pin--home i { background: var(--green); width: 1.1rem; height: 1.1rem; left: -0.55rem; top: -0.55rem; }
.pin--home b { background: var(--green); color: #fff; font-size: 0.875rem; }
@media (max-width: 640px) { .osm-map { aspect-ratio: 4 / 5; } }
.leaflet-marker-icon:focus-visible .pin b { outline: 2.5px solid var(--green-mid); outline-offset: 2px; }