/* =====================================================================
   Bastiano Landscaping — design system
   Warm cream ground, deep forest green, pale sage, rounded capsule
   chrome, generous spacing. Single stylesheet for the homepage and the
   generated service pages.
   ===================================================================== */

/* ---------- Display typeface (self-hosted) ---------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --cream:      #faf8f2;   /* page ground */
  --cream-deep: #f3efe6;   /* alt band */
  --white-warm: #ffffff;   /* cards */
  --sage-100:   #e9efdd;   /* pale sage card */
  --sage-200:   #dde6cc;
  --forest-950: #16291d;
  --forest-900: #1d3527;   /* deep forest — footer, dark cards */
  --forest-800: #24422f;
  --forest-700: #2e5138;   /* buttons */
  --forest-600: #3a6647;

  /* Text */
  --ink:   #22302a;
  --muted: #5d6a58;        /* soft grey-green — 4.5:1+ on cream and cream-deep */
  --line:  #e2dcc9;        /* fine warm border */
  --line-on-dark: rgba(255,255,255,.14);

  /* Feedback */
  --gold:  #e9a70a;
  --error: #b4231d;
  --ok:    #2e5138;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(29,53,39,.05), 0 3px 10px rgba(29,53,39,.05);
  --shadow-md: 0 8px 24px rgba(29,53,39,.09), 0 2px 8px rgba(29,53,39,.05);
  --shadow-lg: 0 22px 50px rgba(29,53,39,.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", var(--font);

  --header-h: 72px;
  --bottombar-h: 62px;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 28px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest-700); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--forest-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--forest-900);
  line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
p  { margin: 0 0 1rem; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.4rem, 9vw, 6.5rem); }
.section--tint { background: var(--cream-deep); }
.section--dark { background: linear-gradient(165deg, var(--forest-800), var(--forest-950)); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: #c3d2bd; }
.section--dark .values { border-top-color: rgba(255,255,255,.16); }
.section--dark .value { border-bottom-color: rgba(255,255,255,.12); }
.section--dark .value__body p { color: #b9c9b3; }
.section__head { max-width: 47rem; margin-bottom: clamp(1.8rem, 4.5vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(1.05rem, 2.3vw, 1.2rem); color: var(--muted); }
.center { text-align: center; }

/* Pill section label */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  color: var(--forest-800); background: var(--white-warm);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem 1.05rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm);
}
.eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--forest-600); }
.eyebrow--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); box-shadow: none; }
.eyebrow--light::before { background: #cfe3c2; }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--forest-900); color: #fff; padding: .7rem 1rem; border-radius: 10px;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sage-200); outline-offset: 2px; border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; padding: .95rem 1.7rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; min-height: 50px;
  transition: transform .12s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--forest-800); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--forest-700); color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--forest-900); border-color: var(--forest-800); }
.btn--ghost:hover { background: var(--forest-900); color: #fff; }
.btn--ondark { background: var(--white-warm); color: var(--forest-900); }
.btn--ondark:hover { background: #fff; color: var(--forest-900); box-shadow: var(--shadow-md); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.06rem; min-height: 56px; }
.btn--block { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Circular up-right arrow chip inside quote buttons (Gibsons-style) */
.btn__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.18); color: currentColor; margin: 0 -.35em 0 .2em;
  transition: background .18s ease, transform .18s ease;
}
.btn__arrow svg { width: .85em; height: .85em; }
.btn:hover .btn__arrow { background: rgba(255,255,255,.3); transform: translate(1px, -1px); }
.btn--ondark .btn__arrow { background: var(--sage-200); color: var(--forest-900); }
.btn--ondark:hover .btn__arrow { background: var(--sage-100); }

/* Hero primary quote button — dark green, larger than the CTA beside it */
.btn--quote {
  background: var(--forest-800); color: #fff;
  border-color: rgba(255,255,255,.28); box-shadow: var(--shadow-md);
}
.btn--quote:hover { background: var(--forest-700); color: #fff; box-shadow: var(--shadow-lg); }
.btn--xl { padding: 1.2rem 1.7rem 1.2rem 2.1rem; font-size: 1.13rem; min-height: 64px; }
/* legacy aliases used by generated pages */
.btn--call { background: var(--forest-800); color: #fff; }
.btn--call:hover { background: var(--forest-700); color: #fff; }
.btn--lime { background: var(--forest-800); color: #fff; }
.btn--lime:hover { background: var(--forest-700); color: #fff; }

/* ---------- Floating capsule header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding: .9rem var(--gutter) 0;
  pointer-events: none;               /* the capsule re-enables it */
  transition: padding .2s ease;
}
.site-header__inner {
  pointer-events: auto;
  /* stays above the open full-screen mobile menu (its sibling, z 99),
     so the capsule and its X button remain visible and tappable */
  position: relative; z-index: 100;
  max-width: var(--wrap); margin-inline: auto;
  background: rgba(250, 247, 239, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-md);
  height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: 1.6rem 0.6rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand__logo { height: 32px; width: auto; display: block; transition: height .2s ease; }

/* Compact header once the page is scrolled */
.site-header.is-scrolled { padding-top: .45rem; }
.site-header.is-scrolled .site-header__inner { height: 58px; box-shadow: var(--shadow-sm); }
.site-header.is-scrolled .brand__logo { height: 28px; }
.site-header.is-scrolled .header-call { padding-block: .5rem; min-height: 42px; }
.site-header__inner { transition: height .2s ease, box-shadow .2s ease; }

.primary-nav { display: none; }
.header-cta { display: flex; align-items: center; gap: .55rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--forest-900); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: .55rem .8rem; border-radius: 999px; white-space: nowrap;
}
.header-phone:hover { background: var(--sage-100); color: var(--forest-900); }
.header-phone svg { width: 1.05em; height: 1.05em; flex: none; }
.header-call {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--forest-800); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  padding: .68rem 1.35rem; border-radius: 999px; min-height: 48px;
  white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.header-call:hover { background: var(--forest-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--line); background: var(--white-warm);
  border-radius: 50%; cursor: pointer; color: var(--forest-900);
}
/* Hamburger: three bars that fold into an X while the menu is open */
.nav-toggle, .mnav__link { -webkit-tap-highlight-color: transparent; }
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__bars > span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .25s ease;
}
.nav-toggle__bars > span:nth-child(1) { top: 0; }
.nav-toggle__bars > span:nth-child(2) { top: 6px; }
.nav-toggle__bars > span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile menu ----------
   A full-screen panel that slides down from behind the floating capsule
   (the capsule sits above it at z 100, so its X stays visible). Closed, it is
   parked above the screen and — once the slide-up has finished — hidden, so
   nothing in it can be tabbed to or read out. main.js sets data-open. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  pointer-events: auto;
  background: var(--cream);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s;
}
.mobile-nav[data-open="true"] {
  transform: none; visibility: visible;
  transition: transform .6s cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
.mnav {
  min-height: 100%; display: flex; flex-direction: column;
  max-width: 34rem; margin-inline: auto;
  padding: calc(var(--header-h) + .9rem + 1.5rem) max(var(--gutter), 1.25rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));
}
.mnav__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mnav__item { border-bottom: 1px solid var(--line); }
.mnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1rem .2rem; margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  line-height: 1.15; letter-spacing: -.01em; text-align: left;
  color: var(--forest-900); text-decoration: none;
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.mnav__link:hover { color: var(--forest-700); }
.mnav__toggle svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--forest-600); transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Dropdown: grid rows 0fr -> 1fr animates the real height (no max-height
   guess); the links stay hidden — untabbable — until it is open. */
.mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.mnav__group.is-open .mnav__sub { grid-template-rows: 1fr; }
.mnav__sub-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .4s; }
.mnav__group.is-open .mnav__sub-in { visibility: visible; transition: visibility 0s; }
.mnav__sub-in a {
  display: block; padding: .6rem .2rem .6rem 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--forest-800); text-decoration: none;
}
.mnav__sub-in a:last-child { margin-bottom: .75rem; }
.mnav__sub-in a:hover { color: var(--leaf-deep); }
.mnav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .5rem; }
.mnav__quote { justify-content: center; margin-bottom: .5rem; }
.mnav__contact {
  display: block; padding: .35rem .2rem; width: fit-content;
  font-family: var(--font-display); font-weight: 600; color: var(--forest-800); text-decoration: none;
}
.mnav__contact:hover { color: var(--leaf-deep); }
.mnav__link:focus-visible, .mnav__sub-in a:focus-visible, .mnav__contact:focus-visible {
  outline: 2px solid var(--leaf-deep); outline-offset: 2px; border-radius: 6px;
}
/* Rows rise in one after another once the panel is mostly down; on close
   they simply fade with the panel. */
.mnav__item, .mnav__foot > * { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; }
.mobile-nav[data-open="true"] .mnav__item,
.mobile-nav[data-open="true"] .mnav__foot > * {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.mobile-nav[data-open="true"] .mnav__item:nth-child(1) { transition-delay: .22s; }
.mobile-nav[data-open="true"] .mnav__item:nth-child(2) { transition-delay: .27s; }
.mobile-nav[data-open="true"] .mnav__item:nth-child(3) { transition-delay: .32s; }
.mobile-nav[data-open="true"] .mnav__item:nth-child(4) { transition-delay: .37s; }
.mobile-nav[data-open="true"] .mnav__foot > :nth-child(1) { transition-delay: .42s; }
.mobile-nav[data-open="true"] .mnav__foot > :nth-child(2) { transition-delay: .46s; }
.mobile-nav[data-open="true"] .mnav__foot > :nth-child(3) { transition-delay: .5s; }
/* The page behind must not scroll while the menu is open (main.js). Only the
   root is locked: overflow on body as well would make body the scroll
   container of the sticky header, which would then jump off-screen when the
   menu is opened part-way down a page. */
html.nav-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav[data-open="true"],
  .mnav__item, .mnav__foot > *, .mobile-nav[data-open="true"] .mnav__item, .mobile-nav[data-open="true"] .mnav__foot > *,
  .mnav__sub, .mnav__sub-in, .mnav__toggle svg, .nav-toggle__bars > span {
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
}

/* ---------- Hero (photo background, centred composition) ---------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + .9rem));   /* photo runs behind the floating header */
  padding-top: calc(var(--header-h) + .9rem);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(18,32,23,.55), rgba(18,32,23,.72) 70%),
    linear-gradient(180deg, rgba(18,32,23,.35), rgba(18,32,23,.62));
}
.hero__inner {
  text-align: center;
  padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(11rem, 24vw, 17rem);
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 { color: #fff; max-width: 20ch; margin-inline: auto; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__sub {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: #e8efe4;
  max-width: 44rem; margin-inline: auto; margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-bottom: 1.8rem; }

/* Layered media strip overlapping the hero's bottom edge */
.hero-strip { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -8vw, -3rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero-strip__grid { display: grid; gap: clamp(.5rem, 1.6vw, 1rem); grid-template-columns: 1fr 1.45fr 1fr; position: relative; align-items: center; }
.hero-strip__grid figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--sage-100);
  box-shadow: var(--shadow-lg); border: 4px solid var(--white-warm);
}
.hero-strip__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.hero-strip__grid figure:hover img { transform: scale(1.03); }
.hero-strip__grid figure:nth-of-type(2) { z-index: 1; }
.hero-strip__grid figure:nth-of-type(2) img { aspect-ratio: 16 / 11; }
.hero-strip__grid figure:nth-of-type(1),
.hero-strip__grid figure:nth-of-type(3) { transform: translateY(clamp(.8rem, 2.4vw, 1.8rem)) scale(.96); }

/* Floating stat cards over the collage */

/* ---------- Quote section ---------- */
.quote-section__inner { display: grid; gap: 2.4rem; align-items: start; }
.quote-section__intro .lead { margin-bottom: 1.4rem; }
.quote-section .hero__trust { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.quote-section .hero__trust li { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 600; font-size: .98rem; }
.quote-section .hero__trust svg { width: 1.3rem; height: 1.3rem; color: var(--forest-600); flex: none; }
.hero__panel { max-width: 36rem; }
.quote-cta .hero__trust { margin-bottom: 1.6rem; }
.quote-cta .hero__trust li { align-items: flex-start; }
.quote-cta .hero__trust svg { margin-top: .05rem; }
.quote-cta .btn { text-align: center; }
.quote-cta__call { margin: 1rem 0 0; text-align: center; color: var(--muted); font-size: .95rem; }
.quote-cta__call a { color: var(--forest-900); font-weight: 600; }

/* ---------- Quote form ---------- */
.form {
  background: var(--white-warm); color: var(--ink); border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-lg);
}
.form__title { color: var(--forest-900); font-size: 1.35rem; margin-bottom: .9rem; }
.form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label, .field__label-text { font-weight: 600; color: var(--forest-900); font-size: .95rem; font-family: var(--font-display); }
.field .req { color: var(--error); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 14px; padding: .8rem 1rem;
  min-height: 50px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--forest-600); outline: 3px solid rgba(58,102,71,.18); outline-offset: 0;
}
.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='%232e5138'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.2rem; padding-right: 2.6rem;
}
.field--hp { position: absolute; left: -9999px; }
.field__opt { font-weight: 600; color: var(--muted); font-size: .85rem; }
.field__note { font-size: .82rem; color: var(--muted); margin: .1rem 0 0; }
.field__file {
  font: inherit; color: var(--muted); background: var(--cream);
  border: 1.5px dashed var(--line); border-radius: 14px;
  padding: .7rem .9rem; width: 100%; min-height: 50px; cursor: pointer;
}
.field__file:hover { border-color: var(--forest-600); background: var(--cream-deep); }
.field__file::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--forest-800); color: #fff; border: 0;
  border-radius: 999px; padding: .45rem 1rem; margin-right: .8rem;
}
.field__file::file-selector-button:hover { background: var(--forest-700); }
.filelist { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .3rem; }
.filelist li {
  font-size: .85rem; color: var(--forest-900); background: var(--sage-100);
  border-radius: 8px; padding: .4rem .6rem; word-break: break-word;
}
.form__consent { font-size: .82rem; color: var(--muted); margin: .2rem 0 1rem; }
.form__status { margin-top: 1rem; font-weight: 600; }
.form__status[data-state="ok"] { color: var(--ok); }
.form__status[data-state="error"] { color: var(--error); }
.form__nav { display: flex; gap: .7rem; }
.form__nav .btn--ghost { flex: 0 0 auto; }
.form__nav .btn--primary { flex: 1; }

.steps-bar {
  list-style: none; margin: 0 0 1.3rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.steps-bar__item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600; color: var(--muted);
  padding-top: .6rem; border-top: 3px solid var(--line);
}
.steps-bar__item span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  background: var(--line); color: var(--muted); font-size: .8rem;
}
.steps-bar__item.is-active { color: var(--forest-900); border-top-color: var(--forest-700); }
.steps-bar__item.is-active span { background: var(--forest-700); color: #fff; }
.steps-bar__item.is-done { color: var(--forest-700); border-top-color: var(--sage-200); }
.steps-bar__item.is-done span { background: var(--sage-200); color: var(--forest-900); }

/* ---------- Editorial values ---------- */
.values { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.value { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.value__body h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.value__body p { color: var(--muted); margin: 0; max-width: 34rem; }

/* ---------- Service cards (Gibsons three-across treatment) ---------- */
.svc-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-bottom: 1.1rem; }
.svc {
  position: relative; border-radius: var(--r-lg); padding: 2rem 1.7rem 1.8rem;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.22,.9,.36,1.2), box-shadow .3s ease;
}
.svc:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg); }
.svc--sage    { background: var(--sage-100); }
.svc--forest  { background: var(--forest-900); color: #dfe8da; }
.svc--neutral { background: var(--white-warm); border: 1px solid var(--line); }
.svc__num {
  position: absolute; top: 1rem; right: 1.4rem;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 7vw, 5rem);
  line-height: 1; color: rgba(29,53,39,.16); pointer-events: none;
}
.svc--forest .svc__num { color: rgba(255,255,255,.18); }
.svc__icon {
  width: 52px; height: 52px; border-radius: 16px; background: var(--white-warm);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.2rem;
}
.svc--forest .svc__icon { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); }
.svc__icon svg { width: 24px; height: 24px; color: var(--forest-700); }
.svc--forest .svc__icon svg { color: #cfe3c2; }
.svc h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.svc--forest h3 { color: #fff; }
.svc__desc { color: var(--muted); margin-bottom: 1.1rem; }
.svc--forest .svc__desc { color: #c3d2bd; }
.svc__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.svc__list li { position: relative; padding-left: 1.7rem; font-size: .97rem; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--sage-200);
}
.svc__list li::after {
  content: ""; position: absolute; left: .26rem; top: .58em; width: .53rem; height: .53rem;
  background: var(--forest-800);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3 8 14l-4.7-4.7 1.4-1.4L8 11.2l7.3-7.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3 8 14l-4.7-4.7 1.4-1.4L8 11.2l7.3-7.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc--forest .svc__list li::before { background: rgba(255,255,255,.14); }
.svc--forest .svc__list li::after { background: #cfe3c2; }
.svc__link {
  margin-top: auto; font-family: var(--font-display); font-weight: 600; text-decoration: none;
  color: var(--forest-800); display: inline-flex; align-items: center; gap: .4rem;
}
.svc__link:hover { gap: .65rem; color: var(--forest-600); }
.svc--forest .svc__link { color: #cfe3c2; }
.svc--forest .svc__link:hover { color: #fff; }
.svc__link svg { width: 1em; height: 1em; transition: transform .15s ease; }

/* Secondary services row — same system, visually lighter */
.svc-row--secondary .svc { padding: 1.5rem 1.4rem 1.35rem; }
.svc-row--secondary .svc h3 { font-size: 1.15rem; }
.svc-row--secondary .svc__icon { width: 44px; height: 44px; border-radius: 13px; margin-bottom: .9rem; }
.svc-row--secondary .svc__num { font-size: 2.8rem; }
.svc-row--secondary .svc__list { margin-bottom: 1rem; }

.svc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem;
  background: var(--white-warm); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: clamp(1.3rem, 3.5vw, 1.9rem) clamp(1.3rem, 4vw, 2.2rem);
  margin-top: 1.6rem;
}
.svc-cta h3 { margin-bottom: .2rem; font-size: 1.25rem; }
.svc-cta p { margin: 0; color: var(--muted); }

/* ---------- Process ---------- */
.process { position: relative; padding-block: clamp(2.8rem, 7vw, 5.2rem); }
.process .section__head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
/* Step cards are numbered 01–04; no connector rail or dots (removed —
   they rendered as disconnected floating dots). */
.process__grid {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  position: relative;
}
.process__card {
  background: var(--cream); border: 1px solid var(--sage-200); border-radius: 15px;
  box-shadow: 0 4px 14px rgba(29, 53, 39, .05);
  padding: 1.35rem 1.25rem 1.2rem;
  position: relative; z-index: 1;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.process__card:hover {
  transform: translateY(-3px); border-color: var(--forest-600);
  box-shadow: 0 8px 22px rgba(29, 53, 39, .1);
}
.process__card:hover .process__num { color: rgba(46, 81, 56, .38); }
.process__icon { display: inline-flex; margin-bottom: .7rem; }
.process__icon svg { width: 22px; height: 22px; color: var(--forest-600); }
.process__num {
  position: absolute; top: .55rem; right: .95rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: rgba(46, 81, 56, .2);
  transition: color .22s ease;
}
.process__card h3 { font-size: .98rem; line-height: 1.45; margin-bottom: .35rem; padding-right: 2.6rem; }
.process__card p { color: var(--muted); margin: 0; font-size: .85rem; line-height: 1.55; }
.process__cta { text-align: center; margin-top: 1.6rem; }
@media (max-width: 819px) { .process__cta .btn { width: 100%; justify-content: center; } }

/* ---------- Before / after transformations ---------- */
.tf { overflow: hidden; }
.tf__viewport { position: relative; }
.tf__track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.tf__slide { flex: 0 0 100%; padding-inline: .4rem; }
/* ---------- Before/after comparison slider (site-wide canonical) ----------
   Rendered by beforeAfterBlock() in scripts/chrome.js. 4:3 matches the
   1200x900 photos the pipeline produces, so nothing is cropped. */
.ba-block { margin: clamp(1.6rem, 3vw, 2.2rem) 0; }
.ba-block h2 { margin-bottom: .2rem; }
.ba-block__intro { max-width: 46rem; margin: 0 0 .45rem; }
.hint-line { color: var(--muted); font-size: .9rem; margin: .2rem 0 .9rem; }
.ba {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; background: var(--sage-100); touch-action: pan-y;
  box-shadow: var(--shadow-md); user-select: none; max-width: 900px;
}
.ba:focus-visible { outline: 3px solid var(--sage-200); outline-offset: 3px; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* The AFTER photo is the full base layer; the BEFORE photo sits on top and
   is clipped to the left of the divider, so before is left, after is right. */
.ba__before { z-index: 1; clip-path: inset(0 50% 0 0); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; z-index: 2;
  box-shadow: 0 0 12px rgba(0,0,0,.35); transform: translateX(-50%); pointer-events: none;
}
.ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--forest-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); pointer-events: none;
}
.ba__handle svg { width: 20px; height: 20px; }
.ba__label {
  position: absolute; top: 1rem; z-index: 2; pointer-events: none;
  background: rgba(255,255,255,.95); color: var(--forest-900);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  border-radius: 999px; padding: .4rem .95rem; box-shadow: var(--shadow-sm);
}
.ba__label--before { left: 1rem; }
.ba__label--after { right: 1rem; }
/* JS-off fallback: show the after photo fully, no divider chrome */
html:not(.js) .ba__before { display: none; }
html:not(.js) .ba__divider, html:not(.js) .ba__handle { display: none; }
.tf__meta { text-align: center; margin-top: 1.2rem; }
.tf__meta h3 { margin-bottom: .15rem; }
.tf__meta p { color: var(--muted); margin: 0; font-size: .95rem; }
.tf__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.tf__arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white-warm); color: var(--forest-900); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .12s ease;
}
.tf__arrow:hover { background: var(--sage-100); transform: translateY(-1px); }
.tf__arrow svg { width: 20px; height: 20px; }
.tf__dots { display: flex; gap: .5rem; }
.tf__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.tf__dot[aria-current="true"] { background: var(--forest-800); transform: scale(1.25); }

/* ---------- Google reviews strip ---------- */
.reviews { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
.reviews__proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem;
  margin: 0 0 .9rem; color: var(--muted); font-size: .92rem;
}
.reviews__proof strong { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--forest-900); }
.reviews__of { font-size: .55em; font-weight: 700; color: var(--muted); }
.reviews__proof-stars { color: var(--leaf-deep); letter-spacing: .1em; font-size: .9rem; }
.reviews__proof a { font-weight: 600; }
.reviews__scroller { position: relative; }
.reviews__track {
  --gap: .75rem;
  list-style: none; margin: 0; padding: .15rem 0 .7rem; display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--sage-200) transparent;
}
.reviews__track::-webkit-scrollbar { height: 4px; }
.reviews__track::-webkit-scrollbar-thumb { background: var(--sage-200); border-radius: 999px; }
.review {
  flex: 0 0 min(320px, 84%); height: 178px; box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .5rem; padding: .95rem 1.05rem .9rem;
  background: var(--white-warm); border: 1px solid var(--line); border-radius: 12px;
}
.review--photo { height: auto; }
.review__photo { margin: -.95rem -1.05rem .1rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px 12px 0 0; }
.review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.review__stars { display: inline-flex; gap: .1rem; color: var(--leaf-deep); }
.review__stars svg { width: 14px; height: 14px; }
.review__g { width: 18px; height: 18px; flex: none; }
.review__text {
  margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.review__who { margin-top: auto; display: flex; align-items: baseline; gap: .45rem; font-size: .82rem; color: var(--muted); }
.review__who strong { font-family: var(--font-display); font-weight: 600; color: var(--forest-900); font-size: .86rem; }
.review--static { height: auto; }
.review--static p { margin: 0; font-size: .93rem; }
/* Continuous marquee: soft fading edges, hover/focus and button pause.
   Without the marquee classes (reduced motion / no JS) the track stays
   the original swipeable strip. */
.reviews__scroller--marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}
.reviews__track--marquee {
  overflow: visible; width: max-content; scroll-snap-type: none;
  animation: reviews-marquee var(--marquee-time, 70s) linear infinite;
  will-change: transform;
}
.reviews__track--marquee .review { flex: 0 0 280px; }
@keyframes reviews-marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }
.reviews__scroller--marquee:hover .reviews__track--marquee,
.reviews__scroller--marquee:focus-within .reviews__track--marquee,
.reviews__track--marquee.is-paused { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .reviews__track--marquee { animation: none; }
}
.reviews__pause {
  margin-left: auto; width: 30px; height: 30px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white-warm);
  color: var(--forest-900); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color .2s ease;
}
.reviews__pause:hover { background: var(--sage-100); }
.reviews__pause svg { width: 13px; height: 13px; }
@media (min-width: 820px) {
  .review, .reviews__track--marquee .review { flex-basis: 320px; }
}
.reviews__cta { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
.mosaic__cta {
  grid-column: 1 / -1;
  background: linear-gradient(165deg, var(--forest-800), var(--forest-950));
  border-radius: 14px; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.mosaic__cta h3 { color: #fff; margin: 0 0 .3rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.mosaic__cta p { color: #c3d2bd; margin: 0; max-width: 34rem; }


/* ---------- Founder ---------- */
.founder__inner { display: grid; gap: 2.4rem; align-items: center; }
.founder__copy h2 { max-width: 28rem; }
.founder__copy p { color: var(--muted); max-width: 36rem; }
.founder__copy .btn { margin-top: .6rem; }
.founder__portrait {
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(155deg, var(--sage-200), var(--sage-100));
  display: flex; align-items: center; justify-content: center; position: relative;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.founder__portrait img { width: 100%; height: auto; display: block; }
.founder__portrait svg { width: 32%; height: 32%; color: var(--forest-700); opacity: .35; }
.founder__portrait > span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem; text-align: center;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  background: linear-gradient(0deg, rgba(233,239,221,.95), rgba(233,239,221,0));
}

/* ---------- Service areas ---------- */
.region-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; align-items: start; } /* start: an open region must not stretch its row-mate */
.region {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white-warm);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.region[open] { border-color: var(--forest-600); }
.region summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: .8rem; }
.region summary::-webkit-details-marker { display: none; }
.region__name { font-family: var(--font-display); font-weight: 600; color: var(--forest-900); font-size: 1.05rem; }
.region__count { color: var(--muted); font-size: .85rem; margin-right: auto; }
.region summary .chev { flex: none; width: 1.2rem; height: 1.2rem; color: var(--forest-700); transition: transform .2s ease; }
.region[open] summary .chev { transform: rotate(180deg); }
.region__list { padding: 0 1.3rem 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.areas__note { margin: 1.6rem 0 0; text-align: center; color: var(--muted); }

.chip {
  display: inline-block; background: var(--cream); border: 1px solid var(--line);
  color: var(--forest-900); border-radius: 999px; padding: .38rem .9rem; font-size: .9rem; font-weight: 600;
  text-decoration: none;
}
.chip:hover { border-color: var(--forest-600); color: var(--forest-900); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white-warm); margin-bottom: .7rem; overflow: hidden; box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--forest-600); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.3rem;
  font-weight: 600; font-family: var(--font-display); color: var(--forest-900);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 1.2rem; height: 1.2rem; color: var(--forest-700); transition: transform .2s ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq__answer { padding: 0 1.3rem 1.15rem; color: var(--muted); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Final CTA ---------- */
.closing {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 2px, transparent 2px),
    linear-gradient(160deg, var(--forest-800), var(--forest-950));
  background-size: 46px 46px, 62px 62px, cover;
  color: #dfe8da;
}
.closing__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing h2 { color: #fff; max-width: 22ch; }
.closing p { color: #c3d2bd; font-size: 1.08rem; max-width: 38rem; margin-bottom: 1.8rem; }
.closing__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-bottom: 1.8rem; }
.closing__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: center; margin: 0; padding: 0; }
.closing__trust li { display: inline-flex; align-items: center; gap: .5rem; color: #c3d2bd; font-weight: 600; font-size: .95rem; }
.closing__trust svg { width: 1.05rem; height: 1.05rem; color: #9db88a; flex: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--forest-900), var(--forest-950));
  color: #b9c9b3; padding-block: clamp(3rem, 7vw, 4.5rem) 1.6rem;
}
.site-footer a { color: #e4ecdf; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
.brand--footer .brand__logo { height: 64px; }
/* h2 for a valid heading order after the page content; styled as the small caps label */
.footer__grid h2, .footer__grid h4 {
  color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1rem; font-weight: 700;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer__socials a {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .12s ease;
}
.footer__socials a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.footer__socials svg { width: 22px; height: 22px; color: #e4ecdf; display: block; transition: color .18s ease; }
.footer__socials a:hover svg, .footer__socials a:focus-visible svg { color: var(--leaf); }
.footer__cta { margin-top: 1.4rem; }
.footer__bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .85rem; color: #93a88d;
}
/* "Created by MONTARRO ↗" — plain text in the bottom row, muted label,
   slightly heavier spaced-out name, green accent on hover. */
.footer__credit { font-size: .72rem; color: #93a88d; white-space: nowrap; }
.footer__credit-link {
  font-weight: 600; letter-spacing: .08em; color: #e4ecdf; text-decoration: none;
  transition: color .18s ease;
}
.site-footer .footer__credit-link:hover, .site-footer .footer__credit-link:focus-visible { color: var(--leaf); text-decoration: none; }
@media (max-width: 819px) {
  .footer__credit { display: block; text-align: center; margin-top: .55rem; white-space: normal; }
  .footer__credit-sep { display: none; }
  .footer__bottom > span:first-child { width: 100%; text-align: center; }
}


/* ---------- Sub-pages (services) ---------- */
.page-hero {
  position: relative; color: #fff; isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + .9rem));
  padding-top: calc(var(--header-h) + .9rem);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Service pages that have no photo yet: solid forest background instead of an image. */
.page-hero--plain { background: var(--forest-900); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,32,23,.6), rgba(18,32,23,.78));
}
.page-hero__inner { padding-block: clamp(3.4rem, 10vw, 5.6rem); }
.page-hero__inner > * { max-width: 46rem; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #e8efe4; font-size: clamp(1.05rem, 2.4vw, 1.2rem); margin-bottom: 1.3rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.breadcrumb { font-size: .85rem; margin-bottom: .9rem; color: #c3d2bd; }
.breadcrumb a { color: #e4ecdf; }
.breadcrumb span { opacity: .7; padding: 0 .35rem; }

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose .lead { margin-bottom: 1.4rem; }

.cta-band {
  background: linear-gradient(160deg, var(--forest-800), var(--forest-950));
  color: #fff; border-radius: var(--r-lg); padding: clamp(1.6rem, 5vw, 2.4rem);
}
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: #c3d2bd; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

/* ---------- Scroll reveal (JS-gated so content can't get stuck hidden) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tf__track { transition: none; }
  .btn, .svc, .process__card, .footer__socials a { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 819px) {
  .header-call { display: none; }
  /* Icon-only round call button beside the hamburger */
  .header-phone {
    background: var(--forest-800); color: #fff;
    width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center;
  }
  .header-phone:hover { background: var(--forest-700); color: #fff; }
  .header-phone span { display: none; }
  .header-phone svg { width: 1.25rem; height: 1.25rem; }
  .site-header.is-scrolled .header-phone,
  .site-header.is-scrolled .nav-toggle { width: 42px; height: 42px; }
}
@media (max-width: 559px) {
  .brand__logo { height: 28px; }
  .site-header__inner { gap: .5rem; }
  .hero-strip__grid figure { border-width: 2px; border-radius: 14px; }
}

@media (min-width: 560px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Desktop navigation ----------
   Measured, the capsule needs 1175px to lay out the logo (97), the six nav
   items (681) and the phone + Free Quote group (330) with its own padding and
   gaps. The capsule is `viewport - 64` wide (capped at --wrap), so 1175px of
   content only exists from about 1264px up; below that the flex row compresses
   and the items collide — at 1140px they are 99px over.

   Hence 1280px, the first round width with real breathing room (41px spare).
   Everything below it uses the hamburger, which carries the same links.

   This used to switch at 820px, where the row was ~400px over: the header
   pushed every page into horizontal overflow from 820px to ~1016px. */
@media (min-width: 1280px) {
  .primary-nav {
    display: flex; align-items: center; gap: .2rem;
  }
  .primary-nav a {
    text-decoration: none; color: var(--forest-900);
    font-family: var(--font-display); font-weight: 600; font-size: .93rem;
    white-space: nowrap; padding: .5rem .95rem; border-radius: 999px;
    transition: background .18s ease, color .18s ease;
  }
  /* top-level links only (incl. the dropdown trigger) — mega-menu links
     style their own hover */
  .primary-nav > a:hover, .primary-nav > a:focus-visible,
  .primary-nav .nav-drop__toggle:hover, .primary-nav .nav-drop__toggle:focus-visible { background: var(--white-warm); color: var(--forest-800); box-shadow: var(--shadow-sm); }
  .nav-toggle, .mobile-nav { display: none; }
  body { padding-bottom: 0; }
}

@media (min-width: 820px) {
  .brand__logo { height: 38px; }

  .quote-section__inner { grid-template-columns: 1fr 1.1fr; gap: 3rem; }
  .values { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .svc-row { grid-template-columns: repeat(3, 1fr); }
  .process__grid { grid-template-columns: repeat(4, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .founder__inner { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
  .founder__portrait { max-width: 24rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4rem; }
  .tf__slide { flex-basis: 88%; }
  .tf__track { padding-inline: 6%; }
}

/* =====================================================================
   /quote — quote wizard page
   ===================================================================== */
.quote-hero {
  padding-block: clamp(2.6rem, 7vw, 4.5rem) clamp(1.6rem, 4vw, 2.5rem);
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(58,102,71,.09), transparent 65%),
    linear-gradient(rgba(29,53,39,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,53,39,.045) 1px, transparent 1px),
    var(--cream);
  background-size: auto, 44px 44px, 44px 44px, auto;
}
.quote-hero h1 { max-width: 18ch; }
.quote-hero .lead { max-width: 34rem; margin-bottom: 1rem; }
/* Single-line trust reassurance between the intro and the promo pill */
.quote-trust {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 1.375rem; max-width: 34rem;
  font-size: .97rem; font-weight: 500; color: var(--forest-800);
}
.quote-trust svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .12rem; color: var(--sage-200); stroke-width: 2; }
.promo-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--white-warm); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); padding: .55rem 1.15rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--forest-900);
}
.promo-pill svg { width: 1.1rem; height: 1.1rem; color: var(--forest-600); flex: none; }

.quote-wizard { padding-top: clamp(1.6rem, 4vw, 2.5rem); }
.quote-layout { display: grid; gap: 2.2rem; align-items: start; }

/* Progress */
.qprogress {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; align-items: center; gap: .6rem;
}
.qprogress__item {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--muted);
  flex: 0 0 auto;
}
.qprogress__item:not(:last-child)::after {
  content: ""; width: clamp(1.2rem, 5vw, 3.5rem); height: 1.5px; background: var(--line); margin-left: .6rem;
}
.qprogress__dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--white-warm); border: 1.5px solid var(--line); color: var(--muted);
  font-size: .95rem; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.qprogress__dot svg { width: 1rem; height: 1rem; }
.qprogress__item.is-active { color: var(--forest-900); }
.qprogress__item.is-active .qprogress__dot { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.qprogress__item.is-done { color: var(--forest-700); }
.qprogress__item.is-done .qprogress__dot { background: var(--sage-200); border-color: var(--sage-200); color: var(--forest-900); }
@media (max-width: 700px) {
  .qprogress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-items: start; }
  .qprogress__item {
    flex-direction: column; text-align: center; gap: .45rem;
    font-size: .8rem; line-height: 1.25; min-width: 0;
  }
  .qprogress__item:not(:last-child)::after { display: none; }
}

/* Step content */
.qstep__title { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: .4rem; }
.qstep__sub { color: var(--muted); margin-bottom: 1.6rem; max-width: 38rem; }
.qgroup { display: grid; gap: 1.2rem; margin-bottom: 1.8rem; }
.qgroup__title { font-size: 1.15rem; margin: .4rem 0 .8rem; }

/* Service cards */
.qcards { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
.qcard {
  position: relative; display: block; cursor: pointer;
  background: var(--white-warm); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 1.2rem 3rem 1.2rem 1.2rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qcard:hover { border-color: var(--forest-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.qcard input { position: absolute; opacity: 0; pointer-events: none; }
.qcard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; background: var(--sage-100); margin-bottom: .7rem;
}
.qcard__icon svg { width: 22px; height: 22px; color: var(--forest-700); }
.qcard__name { display: block; font-family: var(--font-display); font-weight: 700; color: var(--forest-900); font-size: 1.05rem; margin-bottom: .2rem; }
.qcard__desc { display: block; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.qcard__check {
  position: absolute; top: 1rem; right: 1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease;
}
.qcard__check svg { width: .85rem; height: .85rem; }
.qcard:has(input:checked) { border-color: var(--forest-800); box-shadow: var(--shadow-md); }
.qcard:has(input:checked) .qcard__check { background: var(--forest-800); border-color: var(--forest-800); }
.qcard:has(input:focus-visible) { outline: 3px solid var(--sage-200); outline-offset: 2px; }

/* Fields */
.qfield { display: flex; flex-direction: column; gap: .4rem; }
.qfield[hidden] { display: none; }
.qfield__label { font-family: var(--font-display); font-weight: 600; color: var(--forest-900); font-size: .95rem; }
.qfield input[type="text"], .qfield input[type="number"], .qfield select, .qfield textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 14px; padding: .8rem 1rem;
  min-height: 50px; width: 100%;
}
.qfield textarea { min-height: 110px; resize: vertical; }
.qfield input:focus, .qfield select:focus, .qfield textarea:focus {
  border-color: var(--forest-600); outline: 3px solid rgba(58,102,71,.18); outline-offset: 0;
}
.qfield select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232e5138'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.2rem; padding-right: 2.6rem;
}
.qfield.is-invalid input, .qfield.is-invalid select, .qfield.is-invalid textarea { border-color: var(--error); }
.qfield.is-invalid .qfield__label { color: var(--error); }

/* Pill choices (radio/chips) */
.qpills { display: flex; flex-wrap: wrap; gap: .5rem; }
.qpill { position: relative; cursor: pointer; }
.qpill input { position: absolute; opacity: 0; pointer-events: none; }
.qpill span {
  display: inline-flex; align-items: center;
  background: var(--white-warm); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1.05rem; font-weight: 600; font-size: .92rem; color: var(--forest-900);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.qpill:hover span { border-color: var(--forest-600); }
.qpill:has(input:checked) span { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.qpill:has(input:focus-visible) span { outline: 3px solid var(--sage-200); outline-offset: 2px; }
.qpills--addons { margin-bottom: 1.4rem; }

/* Summary */
.qsummary { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white-warm); margin-bottom: 1.4rem; overflow: hidden; }
.qsummary__row {
  display: grid; grid-template-columns: minmax(7rem, .8fr) 1.4fr auto; gap: .8rem; align-items: baseline;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.qsummary__row:last-child { border-bottom: 0; }
.qsummary__row span:first-child { color: var(--muted); font-weight: 600; }
.qsummary__edit {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--forest-700); font-weight: 600; font-size: .88rem; text-decoration: underline;
}
.qsummary__edit:hover { color: var(--forest-600); }

.qconsent { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.2rem; cursor: pointer; }
.qconsent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--forest-800); flex: none; }

/* Turnstile widget slot on the summary step — reserve its height so the
   challenge appearing doesn't shove the submit button around. */
.qturnstile { margin: .4rem 0 1rem; min-height: 65px; }

.qerror { color: var(--error); font-weight: 600; margin: 0 0 1rem; }
.qnav { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* Confirmation */
.qdone { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; }
.qdone__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%; background: var(--sage-200); color: var(--forest-800);
  margin-bottom: 1.2rem;
}
.qdone__icon svg { width: 2rem; height: 2rem; }
.qdone p { color: var(--muted); }
.qdone__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* Sidebar */
.quote-side { display: grid; gap: 1.1rem; }
.qside-card {
  background: var(--white-warm); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1.6rem 1.5rem;
}
.qside-card h2 { font-size: 1.15rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.qside-card h2 svg { width: 1.2rem; height: 1.2rem; color: var(--forest-600); flex: none; }
.qside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.qside-card li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; }
.qside-card li svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; }
.qside-card--dark { background: var(--forest-900); border-color: var(--forest-800); color: #dfe8da; }
.qside-card--dark h2 { color: #fff; }
.qside-card--dark li svg { color: #9db88a; }
.qside-card__phone {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 1.9rem); color: var(--forest-900); text-decoration: none; margin-bottom: .3rem;
}
.qside-card__phone:hover { color: var(--forest-700); }
.qside-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.qside-card--promo { background: var(--sage-100); border-color: var(--sage-200); }
.qside-card--promo p { color: var(--ink); }

@media (min-width: 560px) {
  .qcards { grid-template-columns: repeat(2, 1fr); }
  .qgroup--contact { grid-template-columns: 1fr 1fr; }
  .qgroup--contact .qfield[data-field="name"],
  .qgroup--contact .qfield[data-field="contact_method"],
  .qgroup--contact .qfield[data-field="notes"] { grid-column: 1 / -1; }
}
@media (min-width: 1020px) {
  .quote-layout { grid-template-columns: 1.7fr 1fr; gap: 3rem; }
  .quote-side { position: sticky; top: calc(var(--header-h) + 1.6rem); }
}

/* The wizard's first step is drawn by quote.js after load. Until then,
   hold roughly its height so the sidebar below it doesn't jump on phones
   (measured step-one heights). No effect once the step is in place, or
   when scripting is off (the noscript message shows instead). */
@media (scripting: enabled) and (max-width: 599px) { #qsteps:empty { min-height: 530px; } }
@media (scripting: enabled) and (min-width: 600px) and (max-width: 1019px) { #qsteps:empty { min-height: 320px; } }
@media (scripting: enabled) and (min-width: 1020px) { #qsteps:empty { min-height: 380px; } }

/* ---------- Quote wizard: customer type + progressive disclosure ---------- */
.qcards--type { grid-template-columns: 1fr; margin-bottom: 1.8rem; }
.qcards--type .qcard { padding: 1.5rem 3rem 1.5rem 1.5rem; }
@media (min-width: 560px) { .qcards--type { grid-template-columns: repeat(2, 1fr); } }

.qreveal { animation: qslide .4s ease; }
@keyframes qslide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .qreveal { animation: none; } }

.qmore {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white-warm);
  margin-bottom: 1.2rem; overflow: hidden;
}
.qmore summary {
  list-style: none; cursor: pointer; padding: 1rem 1.2rem;
  font-family: var(--font-display); font-weight: 600; color: var(--forest-900);
  display: flex; align-items: center; gap: .6rem;
}
.qmore summary::-webkit-details-marker { display: none; }
.qmore summary > span { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-right: auto; }
.qmore summary .chev { flex: none; width: 1.1rem; height: 1.1rem; color: var(--forest-700); transition: transform .2s ease; }
.qmore[open] summary .chev { transform: rotate(180deg); }
.qmore__body { padding: 0 1.2rem 1.2rem; }

.qreassure { color: var(--muted); font-size: .95rem; margin: 0 0 1.6rem; }


/* =====================================================================
   Hero location line
   ===================================================================== */
.hero__location {
  color: #cfe3c2; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 2vw, 1.1rem); letter-spacing: .16em; text-transform: uppercase;
  margin: .4rem auto .9rem; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* =====================================================================
   Desktop services dropdown in the primary nav
   ===================================================================== */
.nav-drop { position: static; display: flex; align-items: center; }
.site-header__inner { position: relative; }
/* One trigger: the "Our Services" label and its chevron live in the same
   button, styled exactly like the neighbouring top-level links. */
.nav-drop__toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 0; cursor: pointer; color: var(--forest-900);
  font-family: var(--font-display); font-weight: 600; font-size: .93rem; line-height: inherit;
  white-space: nowrap; padding: .5rem .95rem; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav-drop__toggle:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.nav-drop__toggle svg { flex: none; width: .9rem; height: .9rem; transition: transform .18s ease; }
.nav-drop.is-open .nav-drop__toggle svg { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: calc(100% + .7rem); left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: grid; grid-template-columns: repeat(3, minmax(11.5rem, 1fr)); gap: .6rem 2.2rem;
  width: max-content; max-width: min(52rem, calc(100vw - 2rem));
  background: var(--white-warm); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(18,32,23,.14); padding: 1.35rem 1.6rem 1.15rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav-drop.is-open .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop__label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest-600); margin-bottom: .55rem; white-space: nowrap;
}
.nav-drop__menu a {
  display: block; padding: .34rem 0;
  color: var(--forest-800); font-weight: 500; font-size: .92rem; white-space: nowrap;
  transition: color .15s ease, transform .15s ease;
}
.nav-drop__menu a:hover, .nav-drop__menu a:focus-visible {
  color: var(--leaf-deep); transform: translateX(3px);
  background: none; box-shadow: none;
}
/* Compact footer row: spans the panel edge to edge (negative margins undo
   the panel padding), divider on top, whole row clickable. */
/* Selectors are scoped under .nav-drop__menu so they outrank the generic
   `.primary-nav a` pill rule (padding + 999px radius) and the menu-link
   hover rule — that pill is what made this row look like a big bubble. */
.nav-drop__menu .nav-drop__all {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .65rem;
  margin: .7rem -1.6rem -1.15rem; padding: 1.15rem 1.6rem;
  border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  font-weight: 700; color: var(--forest-800);
  transition: background .15s ease, color .15s ease;
}
.nav-drop__menu .nav-drop__all svg { flex: none; width: 1rem; height: 1rem; transition: transform .15s ease; }
.nav-drop__menu .nav-drop__all:hover, .nav-drop__menu .nav-drop__all:focus-visible {
  background: rgba(46, 81, 56, .06); color: var(--leaf-deep); transform: none; box-shadow: none;
}
.nav-drop__menu .nav-drop__all:hover svg, .nav-drop__menu .nav-drop__all:focus-visible svg { transform: translateX(3px); }


/* =====================================================================
   What we do & why — editorial split: copy left, tall photo right
   ===================================================================== */
.wwd { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.wwd__inner { display: grid; gap: 2rem; align-items: center; }
.wwd__copy .lead { margin-bottom: 0; }
.wwd__points { list-style: none; margin: 1.6rem 0 1.7rem; padding: 0; }
.wwd__points li {
  display: flex; align-items: flex-start; gap: 1.15rem;
  padding-block: 1rem; border-top: 1px solid rgba(46, 81, 56, .22);
}
.wwd__points li:last-child { border-bottom: 1px solid rgba(46, 81, 56, .22); }
.wwd__num {
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  color: var(--forest-600); letter-spacing: .06em; padding-top: .2rem; flex: none;
}
.wwd__points h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.wwd__points p { color: var(--muted); font-size: .93rem; margin: 0; max-width: 30rem; }
.wwd__media { margin: 0; }
.wwd__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-lg); box-shadow: 0 14px 36px rgba(18, 32, 23, .14);
}
.wwd__media figcaption { color: var(--muted); font-size: .85rem; margin-top: .6rem; }
@media (min-width: 920px) {
  .wwd__inner { grid-template-columns: 52fr 48fr; gap: clamp(2.4rem, 5vw, 4.5rem); }
  .wwd__media img { aspect-ratio: 4 / 5; }
}

/* =====================================================================
   Image-led service cards
   ===================================================================== */
.svc-cards { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 2rem; }
.svc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white-warm); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--forest-600); box-shadow: 0 14px 34px rgba(18,32,23,.14); }
.svc-card__media { margin: 0; overflow: hidden; }
.svc-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.svc-card__body h3 { font-size: 1.12rem; color: var(--forest-900); }
.svc-card__body p { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.svc-card__link {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--forest-700);
}
.svc-card__link svg { width: 1rem; height: 1rem; transition: transform .18s ease; }
.svc-card:hover .svc-card__link svg { transform: translateX(3px); }
@media (max-width: 559px) {
  .svc-card__body { padding: .8rem .85rem .95rem; gap: .3rem; }
  .svc-card__body h3 { font-size: .98rem; }
  .svc-card__body p { font-size: .82rem; }
  .svc-card__link { font-size: .82rem; }
}
@media (min-width: 560px) { .svc-cards { gap: 1rem; } }
@media (min-width: 920px) { .svc-cards { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }


/* =====================================================================
   Homepage editorial redesign (scoped to body.home — no other route
   is affected). Reference: full-bleed photographic hero, cinematic
   left gradient, Poppins display headline with a leaf-green accent,
   copy left-aligned.
   ===================================================================== */
:root { --leaf: #a8c66c; --leaf-deep: #6a8f40; }

/* --- Hero: copy left, cinematic gradient, editorial type --- */
.home .hero::after {
  /* Directional scrim: dark enough under the left-hand copy block for white
     text, fading to nothing over the right and lower two-thirds so the lawn
     and planting keep their colour. A light top band keeps the nav legible
     against the sky; nothing is layered over the bottom of the photo. */
  background:
    linear-gradient(92deg, rgba(13,24,17,.82) 0%, rgba(13,24,17,.62) 28%, rgba(13,24,17,.22) 56%, rgba(13,24,17,0) 78%),
    linear-gradient(180deg, rgba(13,24,17,.28) 0%, rgba(13,24,17,0) 32%);
}
.home .hero__media img { object-position: 50% 50%; }   /* front-yard photo: fence and roses left, rose bed right — keep both */
/* Phones get the 9:16 crop of the same photo; on a tall screen it is cropped
   at the sides, so bias it left to keep the whole front door in frame with
   the stepping-stone path and the planting either side of it. */
@media (max-width: 819px) { .home .hero__media img { object-position: 35% 50%; } }
.home .hero__inner {
  align-items: flex-start; text-align: left;
  min-height: min(86vh, 56rem);
  justify-content: center;
  /* larger bottom padding floats the copy block higher in the frame */
  padding-block: clamp(2rem, 4vw, 3rem) clamp(8rem, 16vw, 13rem);
}
.home .hero__ctas .btn {
  padding: .8rem 1.5rem; font-size: .95rem; min-height: 0;
}
.home .hero__ctas .btn--xl { padding: .8rem 1.1rem .8rem 1.6rem; }
.home .hero__ctas .btn__arrow { width: 1.9rem; height: 1.9rem; }
.home .hero__ctas .btn__arrow svg { width: .95rem; height: .95rem; }
.home .hero__location {
  font-family: var(--font-display); font-weight: 700;
  color: var(--leaf); letter-spacing: .22em; font-size: clamp(.82rem, 1.6vw, .95rem);
  margin: 0 0 1.1rem; text-transform: uppercase;
}
.home .hero h1 {
  /* Bold sans heading restored from the pre-editorial design:
     Poppins 700, -.015em tracking, 1.12 line height. */
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.12;
  letter-spacing: -.015em; max-width: 15ch; margin-inline: 0;
  text-wrap: balance;
}
.home .hero__accent {
  font-style: normal; color: var(--leaf); font-weight: 700;
}
.home .hero__nowrap { white-space: nowrap; }
.home .hero__sub {
  margin-inline: 0; max-width: 30rem; text-align: left;
  font-size: clamp(1.02rem, 2vw, 1.15rem);
}
.home .hero__ctas { justify-content: flex-start; margin-bottom: 0; }

/* Masked line reveal on arrival. CSS-only so it also works without JS;
   the default is fully visible for reduced-motion users and older browsers. */
.home .hero__line { display: block; }
.home .hero__line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .home .hero__line {
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
  }
  /* Each line rises out of its own mask, .1s apart (the reference staggers
     its lines the same way); the copy and buttons follow, everything settled
     by ~1.2s. Nothing waits on this — the buttons work from the first frame. */
  .home .hero__line > span {
    animation: hero-line-rise .95s cubic-bezier(.16, 1, .3, 1) .08s backwards;
  }
  .home .hero__line:nth-child(2) > span { animation-delay: .18s; }
  .home .hero__line:nth-child(3) > span { animation-delay: .28s; }
  .home .hero__location,
  .home .hero__sub,
  .home .hero__ctas {
    animation: hero-copy-arrive .75s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .home .hero__location { animation-delay: 0s; }
  .home .hero__sub { animation-delay: .38s; }
  .home .hero__ctas { animation-delay: .48s; }
  /* Keyboard focus must never land on an invisible action during the delay. */
  .home .hero__ctas:focus-within { animation: none; }
}
@keyframes hero-line-rise {
  from { transform: translateY(115%); }
  to { transform: translateY(0); }
}
@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Homepage section headings use the same Poppins as the hero (base h2 rule) */


/* --- Service cards: stronger photographic crops --- */
.home .svc-card__media img { aspect-ratio: 4 / 3; }

/* --- Mobile hero: full-width overlay, tight spacing, clean stacking --- */
@media (max-width: 819px) {
  .home .hero::after {
    /* Phones: the copy spans the full width, so the scrim runs top-to-bottom —
       heaviest behind the headline and buttons, clearing over the path and
       raised bed at the bottom. */
    background:
      linear-gradient(180deg, rgba(13,24,17,.42) 0%, rgba(13,24,17,.56) 30%, rgba(13,24,17,.52) 66%, rgba(13,24,17,.08) 100%);
  }
  /* Include the header in the first-screen height and leave a 24px glimpse
     of the next section. svh accounts for the mobile browser bars. */
  .home .hero__inner {
    min-height: calc(100vh - var(--header-h) - .9rem - 24px);
    min-height: calc(100svh - var(--header-h) - .9rem - 24px);
    padding-inline: max(var(--gutter), 16px);
    padding-block: 1.5rem 3rem;
    padding-bottom: clamp(2rem, 7svh, 4rem);
  }
  .home .hero h1 { font-size: clamp(2.2rem, 9.5vw, 2.9rem); }
  .home .hero__ctas { width: auto; }
  .home .hero__ctas .btn { width: auto; padding: .62rem 1.25rem; font-size: .92rem; min-height: 0; }
  .home .hero__ctas .btn--xl { padding: .62rem .95rem .62rem 1.35rem; }
  .home .hero__ctas .btn__arrow { width: 1.7rem; height: 1.7rem; }
}

/* --- Homepage: transparent header over the hero, capsule appears on scroll --- */
.site-header__inner { transition: height .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease; }
.home .site-header:not(.is-scrolled) .site-header__inner {
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.home .site-header:not(.is-scrolled) .primary-nav { background: transparent; }
.home .site-header:not(.is-scrolled) .primary-nav > a,
.home .site-header:not(.is-scrolled) .primary-nav .nav-drop__toggle { color: #fff; }
.home .site-header:not(.is-scrolled) .primary-nav > a:hover,
.home .site-header:not(.is-scrolled) .primary-nav > a:focus-visible,
.home .site-header:not(.is-scrolled) .primary-nav .nav-drop__toggle:hover,
.home .site-header:not(.is-scrolled) .primary-nav .nav-drop__toggle:focus-visible { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.home .site-header:not(.is-scrolled) .nav-drop__toggle { color: #fff; }
.home .site-header:not(.is-scrolled) .nav-drop__toggle:hover,
.home .site-header:not(.is-scrolled) .nav-drop__toggle:focus-visible { background: rgba(255,255,255,.14); box-shadow: none; }
.home .site-header:not(.is-scrolled) .header-phone { color: #fff; }
.home .site-header:not(.is-scrolled) .header-phone:hover { background: rgba(255,255,255,.14); color: #fff; }
.home .site-header:not(.is-scrolled) .nav-drop__menu a { color: var(--forest-800); }
.home .site-header:not(.is-scrolled) .nav-drop__menu a:hover,
.home .site-header:not(.is-scrolled) .nav-drop__menu a:focus-visible { background: none; color: var(--leaf-deep); }

/* =====================================================================
   Editorial design language extension (scoped to body.editorial).
   Applied to every public page EXCEPT the quote page, which keeps the
   original system untouched.
   ===================================================================== */
.accent-i {
  font-style: normal; font-weight: 700; color: var(--leaf);
}
/* Headings across editorial pages inherit the base Poppins rules,
   matching the homepage hero. */

/* Eyebrows become plain editorial kickers - no pill, no dot */
.editorial .eyebrow {
  background: none; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--forest-600); letter-spacing: .2em; text-transform: uppercase;
  font-size: .8rem; font-weight: 700;
}
.editorial .eyebrow::before { display: none; }
.editorial .section--dark .eyebrow,
.editorial .closing .eyebrow,
.editorial .page-hero .eyebrow,
.editorial .eyebrow--light { color: var(--leaf); background: none; border: 0; }

/* Page heroes: cinematic left gradient + editorial headline scale */
.editorial .page-hero::after {
  background:
    linear-gradient(92deg, rgba(13,24,17,.9) 0%, rgba(13,24,17,.68) 36%, rgba(13,24,17,.32) 66%, rgba(13,24,17,.24) 100%),
    linear-gradient(180deg, rgba(13,24,17,.16), rgba(13,24,17,.38));
}
.editorial .page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.1; text-wrap: balance; }

/* On warm-light sections the italic accent needs a deeper leaf for contrast */
.section:not(.section--dark) .accent-i { color: var(--leaf-deep); }
.section--dark .accent-i, .closing .accent-i, .page-hero .accent-i, .hero .accent-i { color: var(--leaf); }

/* =====================================================================
   Our Solutions — featured transformation, residential grid, commercial band
   ===================================================================== */
.sol .section__head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.sol-feature {
  display: grid; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--forest-800), var(--forest-950));
}
.sol-feature__media { margin: 0; }
.sol-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10; }
.sol-feature__copy {
  padding: clamp(1.7rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.sol-feature__copy h3 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; margin-bottom: .8rem; text-wrap: balance;
}
.sol-feature__copy p { color: #c3d2bd; margin-bottom: 1.5rem; max-width: 30rem; }
@media (min-width: 920px) {
  .sol-feature { grid-template-columns: 60fr 40fr; }
  .sol-feature__media img { aspect-ratio: auto; }
}

.sol-grid2 { display: grid; gap: 0 clamp(1.8rem, 4vw, 3.5rem); margin-top: clamp(1.4rem, 3vw, 2rem); }
.sol-item { padding-block: clamp(1.5rem, 3vw, 2.1rem); border-bottom: 1px solid var(--line); }
.sol-item figure { margin: 0 0 1.1rem; border-radius: 14px; overflow: hidden; }
.sol-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sol-item__head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .3rem; }
.sol-item h3 { font-size: 1.15rem; }
.sol-item p { color: var(--muted); font-size: .95rem; margin-bottom: .9rem; max-width: 34rem; }
.sol-link {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--forest-700);
}
.sol-link svg { width: 1.05rem; height: 1.05rem; transition: transform .18s ease; }
.sol-link:hover { color: var(--forest-900); }
.sol-link:hover svg { transform: translateX(3px); }
@media (min-width: 820px) { .sol-grid2 { grid-template-columns: 1fr 1fr; } }

.sol-comm {
  display: grid; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--forest-800), var(--forest-950));
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.sol-comm__media { margin: 0; }
.sol-comm__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 9; }
.sol-comm__copy {
  padding: clamp(1.7rem, 4vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.sol-comm__copy h3 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .7rem;
}
.sol-comm__copy p { color: #c3d2bd; margin-bottom: 1.3rem; max-width: 32rem; }
@media (min-width: 920px) {
  .sol-comm { grid-template-columns: 45fr 55fr; }
  .sol-comm__media { order: 2; }
  .sol-comm__media img { aspect-ratio: auto; }
}

/* =====================================================================
   Who We Are — owner-led editorial split + open value columns
   ===================================================================== */
.wwa { padding-block: clamp(2.6rem, 6vw, 4.4rem); }
.wwa__top { display: grid; gap: 2rem; align-items: center; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.wwa__copy h2 { max-width: 20ch; }
.wwa__copy .lead { color: #c9d6c3; max-width: 38rem; }
.sol-link--light { color: var(--leaf); margin-top: .9rem; }
.sol-link--light:hover { color: #fff; }
.wwa__media { margin: 0; max-width: 26rem; }
.wwa__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: var(--r-lg);
}
.wwa__media figcaption { margin-top: .7rem; line-height: 1.4; }
.wwa__media figcaption strong { display: block; color: #fff; font-family: var(--font-display); font-weight: 700; }
.wwa__media figcaption span { color: #9fb598; font-size: .88rem; }
@media (min-width: 920px) {
  .wwa__top { grid-template-columns: 58fr 42fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .wwa__media { justify-self: end; width: 100%; }
}

/* Open value columns — thin top dividers, big leaf numbers, no cards */
.wwa .values { display: grid; gap: 1.4rem; border-top: 0; margin-top: 0; grid-template-columns: 1fr; }
.wwa .value {
  display: block; border-bottom: 0; padding: 1.15rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.wwa .value__body h3 { font-size: 1.05rem; margin-bottom: .35rem; color: #fff; }
.wwa .value__body p { color: #c3d2bd; font-size: .93rem; line-height: 1.6; margin: 0; }
@media (min-width: 820px) { .wwa .values { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* =====================================================================
   Meet the Owner — editorial 44/56 split
   ===================================================================== */
.about { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.about__inner { display: grid; gap: 2.2rem; align-items: center; }
.about__media { margin: 0; position: relative; max-width: 27rem; }
.about__media::before {
  content: ""; position: absolute; inset: -1rem -1rem 30% 24%;
  background: linear-gradient(165deg, var(--forest-800), var(--forest-950));
  border-radius: 18px; z-index: -1;
}
.about__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block;
  border-radius: 18px; box-shadow: 0 12px 30px rgba(18, 32, 23, .14);
}
.about__media figcaption { margin-top: .75rem; line-height: 1.4; }
.about__media figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--forest-900); }
.about__media figcaption span { color: var(--muted); font-size: .88rem; }
.about__copy h2 { max-width: 18ch; }
.about__copy > p { color: var(--muted); max-width: 36rem; line-height: 1.7; }
.about__facts {
  list-style: none; display: flex; flex-wrap: wrap; margin: 1.4rem 0; padding: 0;
  font-family: var(--font-display); font-weight: 600; color: var(--forest-900); font-size: .95rem;
}
.about__facts li { padding-right: 1.1rem; margin-right: 1.1rem; border-right: 1px solid var(--sage-200); }
.about__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.about__contact-line { color: var(--muted); max-width: 32rem; }
.about__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.1rem; }
.about__head h2 { max-width: 18ch; }
@media (min-width: 920px) {
  .about__inner {
    grid-template-columns: 44fr 56fr; gap: 1rem clamp(2.6rem, 5vw, 4.5rem);
    grid-template-areas: "media head" "media copy"; align-items: center;
  }
  .about__head { grid-area: head; align-self: end; }
  .about__media { grid-area: media; justify-self: start; width: 100%; }
  .about__copy { grid-area: copy; align-self: start; }
}
@media (max-width: 919px) {
  .about__ctas .btn { width: 100%; justify-content: center; }
  .about__facts { flex-direction: column; gap: .55rem; }
  .about__facts li { border-right: 0; margin: 0; padding: 0 0 .55rem; border-bottom: 1px solid var(--sage-200); }
  .about__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Who We Are — company variant: landscape project photo, asymmetric split */
.wwa__body { color: #c9d6c3; max-width: 38rem; }
.wwa__media--wide { max-width: none; align-self: center; }
.wwa__media--wide img { aspect-ratio: 16 / 11; border-radius: 16px; }
@media (min-width: 920px) {
  .wwa .wwa__top { grid-template-columns: 55fr 45fr; align-items: center; }
}

/* Homepage transparent-header logo: white-wordmark version over the hero,
   green version once the capsule appears on scroll */
.brand__logo--light { display: none; }
.home .site-header:not(.is-scrolled) .brand__logo--dark { display: none; }
.home .site-header:not(.is-scrolled) .brand__logo--light { display: block; height: 44px; }

/* Discreet admin link in the footer bottom row */
.footer__admin { color: inherit; opacity: .75; font-size: .95em; }
.footer__admin:hover { opacity: 1; color: #fff; }

/* While the mobile menu is open the capsule always takes its solid form —
   on the homepage hero it is normally transparent with the light logo,
   which would vanish against the menu's white panel. */
body.nav-open .site-header:not(.is-scrolled) .site-header__inner {
  background: rgba(250, 247, 239, .92); border-color: var(--line); box-shadow: var(--shadow-md);
}
body.nav-open .site-header:not(.is-scrolled) .brand__logo--dark { display: block; }
body.nav-open .site-header:not(.is-scrolled) .brand__logo--light { display: none; }
/* ...and the phone number, white over the hero, turns dark again on the solid
   capsule (from 820px, where it shows as text rather than the round icon). */
@media (min-width: 820px) {
  body.nav-open .site-header:not(.is-scrolled) .header-phone,
  body.nav-open .site-header:not(.is-scrolled) .header-phone:hover { color: var(--forest-900); }
}

/* =====================================================================
   Legal pages (/privacy-policy) — plain reading layout: quiet page head,
   sticky "on this page" list at desktop, comfortable measure.
   ===================================================================== */
.legal-head {
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.2rem));
  padding-bottom: clamp(1.4rem, 3.5vw, 2.2rem);
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(58,102,71,.09), transparent 65%),
    var(--cream);
}
.legal-head__inner > * { max-width: 46rem; }
.legal-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; margin-bottom: .7rem; text-wrap: balance; }
.legal-standfirst { font-size: clamp(1.05rem, 2.3vw, 1.2rem); line-height: 1.6; color: var(--muted); margin-bottom: .9rem; }
.legal-head .breadcrumb { color: var(--muted); }
.legal-head .breadcrumb a { color: var(--forest-700); }
.legal-updated { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--forest-700); margin: 0; }
.legal-body { padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.legal-layout { display: grid; gap: 2.2rem; align-items: start; }
.legal-toc {
  background: var(--white-warm); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
}
.legal-toc__label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--forest-600); margin-bottom: .6rem;
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .92rem; }
.legal-toc li::marker { color: var(--forest-600); font-family: var(--font-display); font-weight: 700; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-prose { max-width: 42rem; font-size: 1.05rem; line-height: 1.72; }
.legal-prose h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.22; margin-top: 2.4rem; margin-bottom: .6rem; scroll-margin-top: calc(var(--header-h) + 28px); }
.legal-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: .4rem; }
.legal-prose p { margin-bottom: 1.1rem; }
.legal-prose ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal-prose li { margin-bottom: .55rem; }
.legal-prose li::marker { color: var(--leaf-deep); }
.legal-prose a { text-decoration: underline; text-underline-offset: .17em; }
.legal-prose code { font-size: .92em; background: var(--cream-deep); border: 1px solid var(--line); border-radius: 4px; padding: .05em .35em; }
.footer__legal { color: inherit; }
.footer__legal:hover { color: #fff; }
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: 15rem minmax(0, 42rem); gap: 3.4rem; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 1.6rem); }
}