/* =============================================
   EVERGREEN PROPERTY CARE — Global Styles
   ============================================= */

/* --- Custom Properties ---
   Editorial nature-luxury palette: warm parchment paper tone, near-black
   ink/moss darks, and a single terracotta (clay) accent used sparingly. */
:root {
  --green-dark: #2F4A33;      /* moss */
  --green-darker: #16231A;    /* ink */
  --green-sage: #BD5B39;      /* clay — the one accent color, used with restraint */
  --green-sage-muted: #D98F6F;
  --cream: #F6F1E6;
  --off-white: #FBF8F1;
  --white: #FFFFFF;
  --text-dark: #16231A;
  --text-medium: #5B6558;
  --text-light: #8A9186;
  --border: #DED3BD;

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --shadow-card: 0 2px 20px rgba(22,35,26,0.07);
  --shadow-lg: 0 8px 44px rgba(22,35,26,0.14);

  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.4s var(--ease-luxury);
  --transition-slow: 0.6s var(--ease-luxury);
  --max-width: 1160px;

  --z-mobile-nav: 99; /* mobile drawer only — desktop .nav is unaffected at z-index:100 */
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: 90px; }

:focus-visible {
  outline: 2px solid var(--green-sage);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--off-white);
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }

/* --- Typography --- */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.display-3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-medium);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow.light { color: rgba(255,255,255,0.7); }
.eyebrow.light::before { background: rgba(255,255,255,0.7); }

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.15s; }
.btn-dark {
  background: var(--green-dark);
  color: var(--white);
  border: 1.5px solid var(--green-dark);
}
.btn-dark:hover {
  background: var(--green-darker);
  border-color: var(--green-darker);
  box-shadow: 0 14px 30px -12px rgba(22,35,26,0.45);
}
.btn-sage {
  background: var(--green-sage);
  color: var(--green-darker);
  border: 1.5px solid var(--green-sage);
}
.btn-sage:hover {
  background: var(--green-sage-muted);
  border-color: var(--green-sage-muted);
  box-shadow: 0 14px 30px -12px rgba(189,91,57,0.45);
}
.btn-outline {
  background: transparent;
  color: var(--green-dark);
  border: 1.5px solid var(--green-dark);
}
.btn-outline:hover {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 14px 30px -12px rgba(22,35,26,0.35);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}
.btn-lg {
  padding: 15px 32px;
  font-size: 1rem;
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--green-sage);
  color: var(--green-darker);
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  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;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--green-dark);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm, 6px);
  font-weight: 600;
  font-size: 0.9rem;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 12px;
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 24px;
  transition: background var(--transition), box-shadow var(--transition);
}
.nav.scrolled {
  background: rgba(22, 35, 26, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(217,143,111,0.16), 0 20px 40px -24px rgba(0,0,0,0.5);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  padding-right: 28px;
  position: relative;
}
.nav-logo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.14);
}
.nav-logo svg { width: 32px; height: 32px; }
.nav-logo-img { height: 68px; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-left: auto;
}
.nav-links a {
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--transition);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--green-sage-muted);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::before,
.nav-links a.active::before {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta {
  margin-left: 4px;
  padding: 13px 26px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Light nav variant (for pages with light hero) */
.nav-light .nav-logo,
.nav-light .nav-links a { color: var(--green-dark); }
.nav-light .nav-links a:hover { color: var(--green-darker); }
.nav-light.scrolled {
  background: rgba(244, 239, 230, 0.97);
}
.nav-light .btn-dark { background: var(--green-dark); color: white; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: all var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--green-dark);
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  z-index: var(--z-mobile-nav);
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
}
.nav-mobile.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.nav-mobile a {
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-weight: 500;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile .btn { margin-top: 12px; }

/* =============================================
   FOOTER — sticky reveal
   ============================================= */
main {
  position: relative;
  z-index: 2;
  background: var(--off-white);
  border-radius: 0 0 32px 32px;
  margin-bottom: -72px;
  box-shadow: 0 50px 80px -30px rgba(22,35,26,0.32);
}
.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--green-dark);
  color: var(--white);
  padding: 222px 0 0;
  /* .footer-sprig is absolutely positioned past the container's right edge; on
     narrow screens its rotated bounding box ran past the viewport and gave the
     whole site a ~34px horizontal scroll. Clip here — the footer is full-bleed,
     so the sprig still bleeds past the container as designed, it just can't
     widen the page. `clip` not `hidden`: it creates no scroll container, so the
     sticky footer and the pinned ScrollTrigger sections are unaffected. */
  overflow-x: clip;
}
.footer-wordmark-wrap {
  overflow: hidden;
  padding-top: 12px;
}
.footer-wordmark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.2rem, 13vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--green-darker);
}
/* Footer — "Field Notes" editorial: a closing statement, a tight two-column
   directory (explore / reach us), then the wordmark signature and legal. */
.footer-main {
  position: relative;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-sprig {
  position: absolute;
  top: -24px;
  right: -40px;
  width: 150px;
  height: auto;
  color: var(--green-sage-muted);
  opacity: 0.08;
  transform: rotate(10deg);
  pointer-events: none;
}
.footer-tagline {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
  max-width: 440px;
  margin-bottom: 36px;
}
.footer-tagline em { font-style: italic; color: var(--green-sage-muted); }
.footer-cols {
  display: flex;
  gap: 24px;
}
.footer-col { flex: 1; min-width: 0; }
.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-sage-muted);
  margin-bottom: 10px;
}
.footer-links { list-style: none; }
.footer-links a,
.footer-links span {
  display: block;
  padding: 9px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }
.footer-links span { color: rgba(255, 255, 255, 0.5); }
@media (min-width: 769px) {
  .footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 56px;
  }
  .footer-tagline { margin-bottom: 0; flex: 1 1 auto; max-width: 420px; }
  .footer-cols { flex: 0 0 auto; gap: 72px; }
  .footer-col { flex: 0 0 auto; }
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom p,
.footer-bottom a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
.footer-legal { display: flex; gap: 20px; }

/* =============================================
   SERVICE CARD (dark green)
   ============================================= */
.service-card {
  position: relative;
  background: var(--green-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(22,35,26,0.4);
}
.service-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--green-dark);
  position: relative;
  overflow: hidden;
}
.service-card-img picture { display: contents; }
.service-card-img img,
.service-card-img .gallery-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.service-card-img img[src=""] ,
.service-card-img img:not([src]) { display: none; }
.service-card-body {
  padding: 24px;
}
.service-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.service-card-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}
.service-card-title-heading { display: block; }
.service-card[data-quote-target] .service-card-img,
.service-card[data-quote-target] .service-card-desc { cursor: pointer; }

/* =============================================
   IMAGE PLACEHOLDER SVG
   ============================================= */
.img-placeholder {
  position: absolute;
  inset: 0;
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-placeholder svg {
  width: 60%;
  opacity: 0.4;
}
/* Show real image on top of placeholder when loaded */
.service-card-img img[src]:not([src=""]) {
  z-index: 1;
}

/* =============================================
   HOME PAGE
   ============================================= */

/* Hero — editorial split: set copy against a deep ink field, let the
   signature sprig line stand alone on the right rather than a stock-feeling
   full-bleed photo/video. */
.home-hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  background: var(--green-darker);
  display: flex;
  align-items: center;
  padding: 148px 0 96px;
}
.home-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px);
  align-items: center;
  gap: 64px;
  width: 100%;
}
.home-hero-video,
.home-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (min-width: 769px) {
  .home-hero-poster { display: none; }
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,20,15,0.75) 0%, rgba(11,20,15,0.55) 40%, rgba(11,20,15,0.85) 70%, var(--green-darker) 92%),
    linear-gradient(90deg, rgba(11,20,15,0.9) 0%, rgba(11,20,15,0.45) 55%, rgba(11,20,15,0.25) 100%);
}
.folio-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--green-sage-muted);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.home-hero-title {
  font-weight: 500;
  line-height: 1.06;
  color: var(--white);
  margin-bottom: 20px;
  margin-top: 10px;
}
.home-hero-title em {
  font-style: italic;
  color: var(--green-sage-muted);
}
.home-hero-sub {
  font-size: 0.925rem;
  color: rgba(255,255,255,0.78);
  max-width: 380px;
  line-height: 1.65;
  margin-bottom: 30px;
}
.home-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 2px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color var(--transition), gap var(--transition), opacity var(--transition);
}
.hero-link:hover { gap: 12px; }
.hero-link svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--transition); }
.hero-link:hover {
  border-color: rgba(255,255,255,0.9);
}
.hero-link:hover svg { transform: translateX(3px); }

/* About Intro */
.home-about { background: var(--cream); }
.home-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.home-about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--green-dark);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.home-about-stamp {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(246,241,230,0.4);
  color: var(--off-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-about-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(30,46,30,0.8), transparent);
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
}
.home-about-text .eyebrow { margin-bottom: 16px; }
.home-about-title { margin-bottom: 24px; }
.home-about-body {
  color: var(--text-medium);
  font-size: 0.9rem;
  line-height: 1.75;
}
.home-about-body p + p { margin-top: 16px; }

.home-about-quote-block {
  position: relative;
  margin-top: 32px;
  padding: 30px 32px 26px 44px;
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--green-sage);
  box-shadow: var(--shadow-card);
}
.home-about-quote-mark {
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--green-sage);
  opacity: 0.3;
  line-height: 1;
}
.home-about-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--green-darker);
}
.home-about-quote-cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-medium);
}

.home-about-proof {
  margin-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.home-about-proof p {
  font-size: 0.85rem;
  color: var(--text-medium);
  line-height: 1.5;
}

/* Services Preview */
.home-services { background: var(--off-white); }
.home-services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}
.home-services-title-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Before/After */
.home-work { background: var(--off-white); padding-top: 0; }
.home-work-label {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 600;
  margin-bottom: 40px;
  padding-top: 80px;
  line-height: 1.0;
}
.home-work-label em {
  font-style: italic;
  font-size: 0.52em;
  display: block;
  color: var(--text-medium);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Gallery */
.home-gallery { padding: 64px 0; }
.home-gallery-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--border);
  aspect-ratio: 4 / 5;
}
.gallery-item-lg { grid-column: span 2; aspect-ratio: 8 / 5; }
.gallery-item img,
.gallery-item .gallery-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery-item:hover img,
.gallery-item:hover .gallery-art { transform: scale(1.05); }
.gallery-item-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,30,20,0.72) 100%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.gallery-item:hover .gallery-item-caption { opacity: 1; }
/* :hover has no touch equivalent, so on touch devices these captions would
   never appear at all — visitors would see unlabeled photos with no way to
   reveal what each one is. Show them by default wherever hover isn't the
   primary input. */
@media (hover: none) {
  .gallery-item-caption { opacity: 1; }
}
.gallery-item-caption span {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .gallery-item-lg { grid-column: span 2; }
}
@media (max-width: 768px) {
  .home-gallery { padding: 48px 0; }
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -24px;
    padding: 0 24px 4px;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item,
  .gallery-item-lg {
    flex: 0 0 82%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
  }
}
.before-after-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.before-after-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.before-after-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.before-after-half { position: relative; overflow: hidden; }
.before-after-half img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.before-after-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255,255,255,0.9);
  color: var(--text-dark);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Testimonials */
.home-testimonials { background: var(--cream); }
.home-testimonials-header { text-align: center; margin-bottom: 56px; }
.testimonials-wrapper {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: stretch;
}
.testimonials-rating-card {
  background: var(--green-dark);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--white);
}
.rating-score {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}
.rating-score span { font-size: 1.4rem; font-weight: 400; opacity: 0.6; }
.rating-label { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.rating-avatars { display: flex; gap: -6px; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--green-dark);
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
  margin-right: -8px;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonials-carousel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 64px 84px;
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.testimonials-carousel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-sage);
}
.testimonial-item {
  display: none;
}
.testimonial-item.active { display: flex; flex-direction: column; align-items: flex-start; }
.testimonial-name {
  order: 4;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-darker);
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.testimonial-body {
  order: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.5;
  color: var(--text-dark);
  max-width: 560px;
}
/* Testimonials index rail — a numbered ledger of reviewers standing in for
   the quote itself, echoing the 01/02/03 language already used in the
   services list, rather than dots or prev/next arrows. */
.testimonials-index {
  display: flex;
  flex-direction: column;
}
.testimonial-index-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  border-top: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: opacity var(--transition);
}
.testimonial-index-item .avatar { margin-right: 0; }
.testimonials-index .testimonial-index-item:last-child { border-bottom: 1px solid var(--border); }
.testimonial-index-meta { display: flex; flex-direction: column; gap: 2px; opacity: 0.5; transition: opacity var(--transition); }
.testimonial-index-name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-darker);
}
.testimonial-index-loc {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.testimonial-index-item.active .testimonial-index-meta,
.testimonial-index-item:hover .testimonial-index-meta { opacity: 1; }
.testimonial-index-item.active .testimonial-index-name { color: var(--green-sage-dark, var(--green-darker)); }

/* CTA Section */
/* The home page's closing CTA now reuses the shared .services-pricing styles
   (see index.html #contact) — the old bespoke .home-cta rules were removed. */

/* =============================================
   SERVICES PAGE
   ============================================= */
.services-hero {
  background: var(--green-darker);
  color: var(--white);
  padding: 160px 0 96px;
  position: relative;
  overflow: hidden;
}
.services-hero-sprig {
  position: absolute;
  top: -20px;
  right: 6%;
  width: 70px;
  height: auto;
  color: var(--green-sage);
  opacity: 0.35;
  transform: rotate(12deg);
}
.services-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.services-hero-content { text-align: left; }
.services-hero-eyebrow { justify-content: flex-start; margin-bottom: 20px; }
@media (max-width: 768px) {
  .services-hero-sprig { width: 44px; right: 4%; }
}
.services-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 520px;
  margin: 0 0 24px;
}
.services-hero-sub {
  font-size: 0.975rem;
  color: rgba(255,255,255,0.65);
  max-width: 440px;
  margin: 0;
  line-height: 1.7;
}
.services-hero-stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.services-hero-stats .about-hero-stat { text-align: left; }

/* --- Instant estimate widget (Deeplawn embed) --- */
/* Matches the home hero's .hero-quote-card frosted-glass treatment so the
   Instant Estimate widget presents identically on both pages. */
.services-hero-widget-card {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  padding: 28px 26px;
  position: relative;
  /* Reserve the widget's settled height so the async DeepLawn injection
     doesn't shift the layout mid-load (mirrors .hero-quote-card). */
  min-height: 343px;
  overflow-anchor: none;
}
.services-hero-widget-eyebrow { justify-content: flex-start; margin-bottom: 14px; }
.services-hero-widget-card .lawn-widget { min-height: 252px; }

.services-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 20px;
}
.services-grid-full .service-card {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  transition: transform var(--transition), box-shadow var(--transition), clip-path var(--transition);
}
.services-grid-full .service-card:hover {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
.services-grid-full .service-card:hover .service-category {
  transform: translateX(3px);
}
.services-grid-full .service-card.is-featured,
.services-grid-full .service-card.cta-card {
  grid-column: span 2;
}
.services-grid-full .service-card.is-featured .service-card-img { aspect-ratio: 21/9; }
.services-grid-full .service-card.is-featured .service-card-title { font-size: 1.9rem; }
.service-card.cta-card {
  background: var(--green-dark);
  display: flex;
  flex-direction: column;
}
.service-card.cta-card .service-card-img { background: var(--green-dark); }
.service-card.cta-card .service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service-card.cta-card .service-card-desc { flex: 1; }

/* =============================================
   SELECTED WORK — center-stage coverflow carousel
   A dark "screening-room" band: photographs read best against
   ink, so the work becomes the hero between two light sections.
   ============================================= */
.workgallery {
  background: var(--green-darker);
  color: var(--cream);
  padding: clamp(64px, 9vw, 120px) 0;
  overflow: hidden;
  position: relative;
}
.workgallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.workgallery-eyebrow { margin-bottom: 18px; }
.workgallery-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}
.workgallery-sub {
  margin-top: 16px;
  max-width: 44ch;
  color: rgba(246, 241, 230, 0.66);
  font-size: 1.02rem;
}
.workgallery-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.workgallery-arrows { display: flex; gap: 12px; }
.workgallery-arrow {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(246, 241, 230, 0.24);
  color: var(--cream);
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.workgallery-arrow svg { width: 20px; height: 20px; }
.workgallery-arrow:hover {
  background: var(--green-sage);
  border-color: var(--green-sage);
  color: var(--white);
}

.workgallery-stage-wrap { position: relative; }
.workgallery-stage {
  position: relative;
  height: clamp(320px, 46vw, 520px);
  touch-action: pan-y;
  cursor: grab;
}
.workgallery-stage.is-dragging { cursor: grabbing; }
.workgallery-stage:focus-visible {
  outline: 2px solid var(--green-sage);
  outline-offset: 8px;
  border-radius: var(--radius-md);
}

.wgal-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 60vw, 620px);
  margin: 0;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
.wgal-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--green-dark);
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, 0.66);
}
.wgal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.workgallery-progress {
  position: relative;
  height: 2px;
  background: rgba(246, 241, 230, 0.16);
  border-radius: 2px;
  margin-top: clamp(30px, 4vw, 46px);
  overflow: hidden;
}
.workgallery-progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0.1667);
  background: var(--green-sage);
  border-radius: 2px;
}
@media (max-width: 760px) {
  .workgallery-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .workgallery-nav { width: 100%; justify-content: flex-end; }
}

/* Reviews Section */
/* "See more reviews" links: centered under the home carousel, stacked under the
   services score block. Both point at the Google profile. */
.testimonials-more { margin-top: 40px; text-align: center; }
.reviews-more-link { margin-top: 24px; }

.services-reviews { background: var(--cream); }
.services-reviews-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.reviews-score-block {}
.reviews-big-score {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green-dark);
}
.reviews-big-score span { font-size: 2rem; color: var(--text-light); }
.reviews-meta { font-size: 0.8rem; color: var(--text-medium); margin-top: 8px; margin-bottom: 20px; }
.reviews-avatars { display: flex; }
.reviews-list { display: flex; flex-direction: column; }
.review-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.review-row:first-child { border-top: 1px solid var(--border); }
.review-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
  margin-bottom: 12px;
  max-width: 480px;
}
.review-customer-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.review-source { font-size: 0.8rem; color: var(--text-medium); }
.review-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review-source a:hover { color: var(--green-sage); }

.star-row { display: flex; gap: 2px; color: var(--green-sage); }
.star-row svg { width: 13px; height: 13px; }
.review-row .star-row { margin-bottom: 10px; }
.star-row-lg { margin: 10px 0 4px; }
.star-row-lg svg { width: 16px; height: 16px; }

/* Instant Quote CTA */
.services-pricing {
  position: relative;
  background: var(--green-sage);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0;
  overflow: hidden;
}
/* Signature: oversized sprig line-art bled off the right edge, echoing the hero motif at closing scale */
.services-pricing-sprig {
  position: absolute;
  top: 50%;
  right: -60px;
  width: min(46vw, 620px);
  height: auto;
  color: var(--cream);
  opacity: 0.14;
  transform: translateY(-50%) rotate(8deg);
  pointer-events: none;
}
.services-pricing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 620px;
}
.services-pricing-eyebrow {
  justify-content: flex-start;
  margin-bottom: 24px;
}
.services-pricing-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 620px;
}
.services-pricing-sub {
  margin-top: 24px;
  max-width: 480px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}
.services-pricing-actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.services-pricing-cta {
  background: var(--cream);
  color: var(--green-darker);
  border: 1.5px solid var(--cream);
}
.services-pricing-cta:hover {
  background: var(--white);
  border-color: var(--white);
  box-shadow: 0 16px 34px -14px rgba(22,35,26,0.5);
}
.services-pricing-phone {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color var(--transition);
}
.services-pricing-phone:hover { border-bottom-color: var(--white); }

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-hero {
  background: var(--green-darker);
  color: var(--white);
  padding: 130px 0 96px;
  overflow: hidden;
}
.about-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 64px;
  align-items: center;
}
.about-hero-content {}
.about-hero-eyebrow { margin-bottom: 20px; }
.about-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 20px;
}
.about-hero-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 360px;
}
.about-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.about-hero-stat { display: flex; flex-direction: column; gap: 6px; }
.about-hero-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}
.about-hero-stat-num em { font-style: normal; color: var(--green-sage-muted); }
.about-hero-stat-label {
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.about-hero-stat-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.14); flex-shrink: 0; }
.about-hero-img {
  position: relative;
  transform: rotate(1.4deg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--green-darker);
  border: 8px solid var(--cream);
  box-shadow: var(--shadow-lg);
}
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Passion Section */
.about-passion { background: var(--cream); }
.about-passion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-passion-visual { position: relative; }
.about-passion-img-wrap {
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-passion-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-passion-badge {
  position: absolute;
  right: -28px;
  bottom: -28px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.about-passion-badge-sprig {
  width: 20px;
  height: 30px;
  color: var(--green-sage);
  opacity: 0.65;
  margin-bottom: 8px;
}
.about-passion-badge-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1;
}
.about-passion-badge-label {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-medium);
}

/* Why Choose Us */
.about-why { background: var(--off-white); }
.about-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(178px, auto);
  gap: 20px;
  margin-top: 48px;
}
.why-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.why-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--green-sage-muted); }

/* nth-of-type maps to source order: (1) feature, (2) pricing, (3) always-there, (4) familiar face */
.why-card:nth-of-type(2) { grid-column: 3 / 5; grid-row: 1; }
.why-card:nth-of-type(3) { grid-column: 3 / 4; grid-row: 2; }
.why-card:nth-of-type(4) { grid-column: 4 / 5; grid-row: 2; }

.why-feature {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: none;
}
.why-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-feature-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(195deg, rgba(22,35,26,0.05) 32%, rgba(22,35,26,0.92) 100%);
}
.why-feature-content { position: relative; z-index: 2; padding: 32px; }
.why-feature:hover { transform: translateY(-4px); border-color: transparent; }

.why-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--green-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background var(--transition);
}
.why-card:hover .why-icon { background: var(--green-sage); }
.why-card:hover .why-icon svg { color: var(--green-darker); }
.why-icon svg { width: 20px; height: 20px; color: var(--green-sage); transition: color var(--transition); }
.why-icon-light { border-color: rgba(255,255,255,0.55); }
.why-icon-light svg { color: var(--white); }
.why-feature:hover .why-icon-light { background: var(--green-sage); }
.why-feature:hover .why-icon-light svg { color: var(--green-darker); }
.why-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}
.why-desc { font-size: 0.8rem; color: var(--text-medium); line-height: 1.6; }
.why-title-light { color: var(--white); }
.why-desc-light { color: rgba(255,255,255,0.75); }

/* Mission — folded into the Why Choose Us section as an editorial band beneath the grid */
.about-mission-row {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 48px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.about-mission-heading { display: flex; flex-direction: column; }
.about-mission-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
}
.about-mission-body {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.75;
  max-width: 560px;
  padding-top: 6px;
}

/* Service Area */
.about-area { background: var(--off-white); text-align: center; }
.about-area-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.2;
}
.area-map {
  max-width: 900px;
  margin: 72px auto 0;
  color: var(--green-dark);
}
.area-map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.area-map-route { stroke-width: 2.2; }
.area-map-dot { fill: var(--green-dark); }
.area-map-pin { fill: var(--green-sage); }
.area-map-pulse {
  fill: none;
  stroke: var(--green-sage);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.area-map-town {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  fill: var(--text-medium);
  text-anchor: middle;
}
.area-map-city {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  fill: var(--text-dark);
  text-anchor: middle;
}

/* CTA Banner */
.about-cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--green-darker);
  min-height: 400px;
  display: flex;
  align-items: center;
}
.about-cta-bg {
  position: absolute;
  inset: 0;
}
.about-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.about-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(189,91,57,0.78) 0%, rgba(22,35,26,0.55) 48%, rgba(22,35,26,0.88) 100%);
}
.about-cta-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-cta-content {}
.about-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
}
.about-cta-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 380px;
}
.about-cta-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--green-dark);
}
.about-cta-img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .home-hero-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .home-about-grid { gap: 48px; }
  .about-hero-inner { grid-template-columns: 1fr; }
  .about-hero-img { display: none; }
  .about-hero { padding-bottom: 72px; }
  .services-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-why-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .why-card, .why-feature { grid-column: auto; grid-row: auto; }
  .why-card:nth-of-type(2), .why-card:nth-of-type(3), .why-card:nth-of-type(4) { grid-column: auto; grid-row: auto; }
  .why-feature { grid-column: 1 / 3; aspect-ratio: 16/9; }
  .about-cta-grid { grid-template-columns: 1fr; }
  .about-cta-img { display: none; }
  .services-reviews-grid { grid-template-columns: 1fr; }
  .about-passion-grid { grid-template-columns: 1fr; }
  .about-passion-visual { display: none; }
  .services-pricing { padding: 110px 0; }
  .services-pricing-sprig { width: 62vw; right: -80px; opacity: 0.1; }
  .services-pricing-actions { gap: 20px; }
  .testimonials-wrapper { grid-template-columns: 1fr; }
  .testimonials-rating-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .home-hero { padding: 120px 0 64px; }
  .home-hero-grid { gap: 40px; }
  .home-hero-sub { margin-bottom: 22px; }
  .home-hero-title { margin-bottom: 14px; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid-full { grid-template-columns: repeat(2, 1fr); }
  .home-about-grid { grid-template-columns: 1fr; }
  .home-about-img { aspect-ratio: 3/2; }
  .before-after-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-tagline { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .home-services-header { flex-direction: column; align-items: flex-start; }
  .about-why-grid { grid-template-columns: 1fr; }
  .why-feature { grid-column: 1; aspect-ratio: 4/3; }
  .about-mission-row { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; padding-top: 32px; }
  .carousel-controls { position: static; flex-direction: row; margin-top: 20px; transform: none; }
  .testimonials-carousel { padding: 32px 24px; }

  /* Drawer must cover the full remaining viewport, or hero content bleeds
     through beneath it — this rule only exists within this mobile breakpoint. */
  .nav-mobile.open {
    min-height: calc(100vh - 84px);
    min-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .services-grid-full { grid-template-columns: 1fr; }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .btn { width: 100%; justify-content: center; }
}

/* =============================================
   FADE-UP ANIMATION (global)
   ============================================= */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.fade-up.delay-1 { transition-delay: 0.08s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.36s; }
.fade-up.delay-4 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; filter: none; transition: none; }
  .sprig-path { stroke-dashoffset: 0 !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =============================================
   STATS STRIP
   ============================================= */
/* Stats strip — one oversized editorial sentence instead of three
   boxed-number tiles; the sprig motif sits in the margin like a printer's
   ornament rather than a repeated icon set. */
.stats-strip {
  background: var(--green-darker);
  padding: 88px 0;
  overflow: hidden;
}
.stats-editorial {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 980px;
}
.stats-editorial-sprig {
  flex-shrink: 0;
  width: 56px;
  height: 82px;
  color: var(--green-sage);
  opacity: 0.55;
  transform: rotate(-8deg);
  margin-top: 4px;
}
.stats-sentence {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.82);
}
.stats-num {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}
.stats-num em {
  font-style: normal;
  color: var(--green-sage);
}
@media (max-width: 768px) {
  .stats-strip { padding: 64px 0; }
  .stats-editorial { gap: 22px; }
  .stats-editorial-sprig { width: 38px; height: 56px; }
  .stats-sentence { font-size: 1.35rem; }
}

/* =============================================
   SERVICES.HTML — full-bleed "field guide" stack (mobile <=768px only)
   One card per row, edge-to-edge: photo on top, dark body panel below,
   tap-to-expand accordion (one open at a time — see main.js). The notched
   corner + dark card stay on-brand; only the layout changes on mobile.
   Desktop (>=769px) is deliberately untouched.
   ============================================= */
@media (max-width: 768px) {
  .services-grid-full {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 14px;
    /* break out of the .container's 24px side padding -> true edge-to-edge */
    margin-inline: -24px;
  }
  /* featured + cta cards no longer span; drop the letterboxed 21/9 crop */
  .services-grid-full .service-card.is-featured,
  .services-grid-full .service-card.cta-card { grid-column: auto; }
  .services-grid-full .service-card.is-featured .service-card-img { aspect-ratio: 4 / 3; }
  .services-grid-full .service-card.is-featured .service-card-title { font-size: 1.7rem; }

  /* roomier body + type now that each card owns the full width */
  .services-grid-full .service-card-body { padding: 22px 24px 24px; }
  .services-grid-full .service-card-title { font-size: 1.55rem; }
  .services-grid-full .service-card-desc { font-size: 0.9rem; line-height: 1.6; }

  /* Description tucks into the accordion on mobile: collapsed cards show only
     photo + title, and the desc reveals on tap. Applies to every card in the
     grid, including the CTA card (whose Call/Email buttons stay visible since
     they sit outside the collapsing description). */
  .services-grid-full .service-card .service-card-desc {
    max-height: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height var(--transition-slow),
                opacity var(--transition),
                margin var(--transition-slow),
                visibility var(--transition-slow);
  }
  .services-grid-full .service-card.is-open .service-card-desc {
    max-height: 8em;
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
  }

  /* thumb-friendly toggle + arrow (>=44px target) */
  .services-grid-full .service-card-toggle { min-height: 44px; padding: 4px 0; }
  .services-grid-full .service-card-arrow { width: 34px; height: 34px; }

  /* category tag sized for the wider photo */
  .services-grid-full .service-category { top: 16px; left: 18px; font-size: 0.66rem; }
}

/* The CTA card's toggle/arrow exist only to drive the mobile accordion. On
   desktop it stays exactly as before: description always shown, no arrow, and
   the title is not an interactive toggle. */
@media (min-width: 769px) {
  .services-grid-full .service-card.cta-card .service-card-arrow { display: none; }
  .services-grid-full .service-card.cta-card .service-card-toggle {
    pointer-events: none;
    cursor: default;
  }
}

/* =============================================
   SERVICE CARD IMPROVEMENTS
   ============================================= */
.service-card-img { position: relative; }
.service-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  z-index: 2;
}
.service-category {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(22,35,26,0.55);
  backdrop-filter: blur(2px);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: transform var(--transition);
}
.service-card-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--green-darker), var(--green-dark));
}
.service-card-icon svg { width: 42%; height: auto; color: var(--green-sage-muted); opacity: 0.9; }
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.service-card-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  transition: all var(--transition);
}
.service-card:hover .service-card-arrow,
.service-card.is-open .service-card-arrow {
  background: var(--green-sage);
  border-color: var(--green-sage);
  color: var(--green-darker);
}
.service-card.is-open .service-card-arrow { transform: rotate(180deg); }
.service-card-arrow svg { width: 13px; height: 13px; }

/* Service card accordion — toggle reveals what's included + starting price */
.service-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
}
.service-card-toggle .service-card-title { margin-bottom: 0; }
.service-card-toggle:focus-visible { outline-offset: 4px; }
.service-card-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.service-card.is-open .service-card-details { grid-template-rows: 1fr; }
.service-card-details-inner {
  overflow: hidden;
}
.service-card.is-open .service-card-details-inner { padding-top: 16px; }
.service-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.service-card-list li {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  padding-left: 16px;
  position: relative;
}
.service-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-sage-muted);
}
.service-card-price {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  transition: color var(--transition);
}
.service-card-price:hover { color: var(--green-sage); }
.cta-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* =============================================
   TESTIMONIAL IMPROVEMENTS
   ============================================= */
.testimonial-quote-mark {
  order: 1;
  font-family: var(--font-display);
  font-size: 4.25rem;
  line-height: 0.6;
  color: var(--green-sage);
  opacity: 1;
  display: block;
  margin-bottom: 8px;
  user-select: none;
}
.testimonial-stars {
  order: 3;
  display: flex;
  gap: 4px;
  margin-top: 24px;
  margin-bottom: 0;
}
.testimonial-stars svg {
  width: 12px;
  height: 12px;
  fill: var(--green-sage);
  opacity: 1;
}
.testimonial-location {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-medium);
  margin-left: 8px;
}

/* =============================================
   NAV PHONE
   ============================================= */
.nav-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.72);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-left: 24px;
  position: relative;
  transition: color var(--transition);
}
.nav-phone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.14);
}
.nav-phone svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-phone:hover { color: var(--white); }
.nav-light .nav-phone { color: var(--green-dark); }
.nav-mobile-phone {
  color: var(--green-sage) !important;
  font-weight: 600 !important;
}
@media (max-width: 1150px) {
  .nav-phone { display: none; }
}

/* =============================================
   HERO TRUST STRIP
   ============================================= */
.home-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}
.home-hero-trust-stars {
  color: var(--green-sage);
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.hero-quote-card {
  width: 100%;
  padding: 28px 26px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  /* The DeepLawn widget script injects its markup async, after this card is
     already painted empty. Without a reserved height that insertion pushes
     every section below it down mid-load, and on some loads the resulting
     layout shift drags the whole page's scroll position down with it —
     landing visitors mid-page with a heading clipped under the fixed nav.
     Reserving the widget's settled height (measured: ~252px content, ~343px
     card) keeps the card's box stable before/after the widget populates. */
  min-height: 343px;
  /* Belt-and-suspenders: even with height reserved, don't let the browser's
     scroll-anchoring "helpfully" reposition the viewport if this card's
     content still shifts by a few px as fonts/widget assets settle. */
  overflow-anchor: none;
}
.hero-quote-card-label {
  margin-bottom: 14px;
}
/* DeepLawn widget renders its own light-DOM markup with a Poppins font baked
   into its bundled styles — override with !important so it matches the
   site's Work Sans body type instead of clashing. */
.lawn-widget,
.lawn-widget * {
  font-family: var(--font-body) !important;
}
.lawn-widget { min-height: 252px; }

/* =============================================
   BEFORE/AFTER SLIDER
   ============================================= */
.ba-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  user-select: none;
  box-shadow: var(--shadow-lg);
}
.ba-slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  background: var(--green-dark);
  overflow: hidden;
}
.ba-slider-before,
.ba-slider-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--green-dark);
}
.ba-slider-after-wrap {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}
.ba-slider-after-wrap .ba-slider-after {
  width: var(--ba-frame-width, 200%);
  max-width: none;
}
.ba-slider-tag {
  position: absolute;
  top: 16px;
  background: rgba(20,26,20,0.55);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
  pointer-events: none;
}
.ba-slider-tag-before { right: 16px; }
.ba-slider-tag-after { left: 16px; }
.ba-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  z-index: 3;
}
.ba-slider-handle::before,
.ba-slider-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
}
.ba-slider-handle::before { bottom: 100%; height: 400px; }
.ba-slider-handle::after { top: 100%; height: 400px; }
.ba-slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.ba-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
}
.ba-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.ba-thumb {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--off-white);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-medium);
  transition: all var(--transition);
}
.ba-thumb:hover { border-color: var(--green-dark); color: var(--text-dark); }
.ba-thumb.active {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
@media (max-width: 768px) {
  .ba-slider-frame { aspect-ratio: 4/5; }
}

/* =============================================
   SERVICES: FEATURED + LIST LAYOUT
   ============================================= */
.services-featured-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.service-card-featured { display: flex; flex-direction: column; }
.service-card-featured .service-card-img { aspect-ratio: 5/4; }
/* Make the whole featured card clickable via the "Get Pricing" link */
.service-card-featured .service-card-footer .hero-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-card-badge {
  background: var(--green-sage);
  color: var(--green-darker);
  margin-bottom: 12px;
}
.services-list-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  flex: 1;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.service-row:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--green-dark);
  transform: translateY(-2px);
}
.service-row-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-light);
  font-weight: 600;
  flex-shrink: 0;
}
.service-row-body { flex: 1; }
.service-row-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.service-row-desc {
  font-size: 0.825rem;
  color: var(--text-medium);
  line-height: 1.6;
}
.service-row-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-medium);
  flex-shrink: 0;
  transition: all var(--transition);
}
.service-row-arrow svg { width: 13px; height: 13px; }
.service-row:hover .service-row-arrow {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
.home-services-header .hero-link {
  color: var(--text-dark);
  border-color: var(--border);
}
.home-services-header .hero-link:hover { border-color: var(--green-dark); }
@media (max-width: 1024px) {
  .services-featured-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .service-row { flex-wrap: wrap; padding: 20px; }
}

/* =============================================
   TESTIMONIALS: SPOTLIGHT + INDEX RAIL
   ============================================= */
.testimonials-wrapper-index {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
  align-items: stretch;
}
.testimonials-wrapper-index .testimonials-carousel {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border-right: none;
  padding: 64px 56px;
}
.testimonials-wrapper-index .testimonials-index {
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 20px 24px;
  justify-content: center;
}
@media (max-width: 768px) {
  .testimonials-wrapper-index { grid-template-columns: 1fr; }
  .testimonials-wrapper-index .testimonials-carousel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-right: 1px solid var(--border); padding: 40px 28px; }
  .testimonials-wrapper-index .testimonials-index { border-left: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-direction: row; overflow-x: auto; }
  .testimonial-index-item { border-top: none; border-right: 1px solid var(--border); flex-shrink: 0; }
  .testimonials-wrapper-index .testimonial-index-item:last-child { border-bottom: none; }
  .testimonial-quote-mark { font-size: 3.25rem; }
  .testimonial-body { font-size: 1.3rem; }
}

/* =====================================================================
   MOBILE, DESIGNED — not shrunk
   ---------------------------------------------------------------------
   Everything below is scoped to touch input and small viewports. The
   desktop composition above is deliberately left untouched; this is a
   second, purpose-built pass at the phone experience: touch ergonomics,
   type rhythm, the estimate widget, the drawer, the service cards, and
   a thumb-reachable quote bar. One system, tuned for the hand.
   ===================================================================== */

/* A layout variable the mobile rules below share. Declaring it changes
   nothing on its own — desktop never reads it. */
:root { --nav-h: 84px; }

/* Everything genuinely global stops here. From this line down, every rule
   is wrapped in a mobile media query so the desktop composition renders
   byte-for-byte as it did before. */
@media (max-width: 768px) {
  html { -webkit-tap-highlight-color: transparent; }

  /* Kill the legacy 300ms tap delay and stop scroll from chaining out of
     drawers and horizontal carousels into the page behind them. */
  a, button, [role="tab"], .btn, input, textarea, select { touch-action: manipulation; }

  /* Type: let the browser break headings and body copy like a typesetter
     would, instead of leaving orphans and lopsided ragged edges in a
     narrow single column. `balance` on display lines, `pretty` on prose. */
  h1, h2, h3, .display-1, .display-2, .display-3,
  .home-hero-title, .services-hero-title, .about-hero-title,
  .services-pricing-title, .footer-tagline,
  .stats-sentence { text-wrap: balance; }
  p, .home-hero-sub, .service-card-desc, .review-quote { text-wrap: pretty; }
}

/* Touch devices don't hover, so the site's hover affordances never fire.
   Give every primary interactive surface a real *press* state instead — a
   quick, springy scale-down that reads as "registered". Gated to small
   widths as well as no-hover so a touchscreen laptop keeps the desktop UI. */
@media (hover: none) and (max-width: 768px) {
  .btn:active,
  .hero-link:active,
  .service-row:active,
  .service-card-toggle:active,
  .testimonial-index-item:active,
  .workgallery-arrow:active,
  .footer-links a:active,
  .nav-mobile a:active,
  .mobile-cta-bar:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
  }
  /* The card lift is a hover trick; on touch it would stick after a tap.
     Neutralise it so cards sit flat and only respond to the press above. */
  .service-card:hover,
  .service-row:hover,
  .gallery-item:hover img,
  .gallery-item:hover .gallery-art { transform: none; box-shadow: none; }
}

/* --- Touch targets: bring the inline text links up to a 44px hit area ---
   The hero-links are underlined editorial text, so growing their box would
   pull the underline off the baseline. Instead an invisible, centred
   overlay extends the tappable area while the visible link stays exactly
   as drawn. Logo + footer legal links have no underline to protect, so
   they just take real vertical padding. */
@media (max-width: 768px) {
  /* Only the standalone CTAs need the overlay. The featured service card's
     "Get Pricing" link is deliberately left alone: its ::after already makes
     the *whole card* the tap target (resolved against .service-card), and
     positioning the link here would shrink that hit area back to the text. */
  .home-hero-actions .hero-link,
  .home-services-header .hero-link,
  .services-pricing-phone { position: relative; }
  .home-hero-actions .hero-link::before,
  .home-services-header .hero-link::before,
  .services-pricing-phone::before {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  .nav-logo { padding-top: 11px; padding-bottom: 11px; }
  .footer-legal a { padding: 13px 0; }
  .footer-bottom .footer-legal { gap: 24px; }
}

/* ---------------------------------------------------------------------
   1. NAV + DRAWER — a real bottom-anchored menu, safe-area aware
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Honour the notch: nudge the bar's contents below the status bar and
     keep the drawer's top edge locked to the bar's true bottom. */
  .nav { padding-top: env(safe-area-inset-top); }
  .nav-mobile { top: calc(var(--nav-h) + env(safe-area-inset-top)); }

  /* Drawer becomes a considered full-height panel: navigation up top in
     the eye-line, the primary action and contact details dropped into
     the thumb zone at the bottom — no more dead lower half. */
  .nav-mobile {
    padding: 22px 26px calc(28px + env(safe-area-inset-bottom));
    gap: 0;
    justify-content: flex-start;
  }
  .nav-mobile.open {
    display: flex;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-mobile a:not(.btn):not(.nav-mobile-foot a) {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.9);
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* A quiet index number + hairline, echoing the 01/02/03 language used
     across the site, so the drawer reads as part of the same design. */
  .nav-mobile a.active:not(.btn) { color: var(--white); }
  .nav-mobile a.active:not(.btn)::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-sage);
    flex-shrink: 0;
  }
  .nav-mobile-phone {
    margin-top: 4px;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    /* Site clay (#BD5B39) only reaches 2.2:1 on the drawer's green — too
       low to read. This lighter terracotta hits 4.8:1 (passes AA at this
       size) while staying unmistakably in the warm "call us" family. */
    color: #E3A98C !important;
  }
  /* Push the CTA + footer block to the bottom of the panel. `display:flex`
     is required here — the base `.nav-mobile a { display:block }` rule is
     more specific than `.btn`, so without this the label wouldn't centre. */
  .nav-mobile .btn {
    display: flex;
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 0.95rem;
  }

  /* The signature sprig, sitting quietly in the drawer's negative space so
     the calm middle reads as composed rather than empty. Decorative only. */
  .nav-mobile-sprig {
    position: absolute;
    right: 26px;
    top: 46%;
    transform: translateY(-50%) rotate(6deg);
    width: 74px;
    height: auto;
    color: var(--green-sage);
    opacity: 0.16;
    pointer-events: none;
    z-index: -1;
  }
  .nav-mobile-foot {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .nav-mobile-foot .nav-mobile-tag {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--green-sage-muted);
  }
  .nav-mobile-foot a {
    color: rgba(255,255,255,0.62) !important;
    font-size: 0.82rem !important;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    padding: 2px 0 !important;
    border: none !important;
    justify-content: flex-start !important;
  }
}

/* ---------------------------------------------------------------------
   2. HERO ESTIMATE WIDGET — stop the placeholder truncating
   The DeepLawn embed lays its input + submit out in a fixed row; at a
   phone's width the input starved to ~191px and clipped "…home addres".
   Give the card room and shave the input's type down a hair so the whole
   placeholder reads, then re-reserve the (now shorter) settled height.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-quote-card,
  .services-hero-widget-card {
    padding: 22px 16px;
    min-height: 296px;
  }
  .hero-quote-card-label,
  .services-hero-widget-eyebrow { margin-bottom: 12px; }

  .lawn-widget > div:first-child {
    font-size: 21px !important;
    line-height: 1.28 !important;
    margin-bottom: 12px !important;
  }
  .lawn-widget .search-address-input { padding: 6px !important; }
  .lawn-widget .search-address-input input {
    font-size: 14px !important;
    letter-spacing: -0.005em !important;
    min-width: 0 !important;
  }
  .lawn-widget { min-height: 214px; }
  .hero-quote-card .lawn-widget,
  .services-hero-widget-card .lawn-widget { min-height: 214px; }
}
/* Narrowest phones (≤360, incl. 320 and zoomed-in views): reclaim a few
   more pixels for the widget's input so the placeholder still reads whole. */
@media (max-width: 360px) {
  .hero-quote-card,
  .services-hero-widget-card { padding-left: 13px; padding-right: 13px; }
  .lawn-widget .search-address-input { padding: 5px !important; }
  .lawn-widget .search-address-input input { font-size: 13px !important; }
}

/* ---------------------------------------------------------------------
   3. THUMB-ZONE QUOTE BAR — a persistent, self-effacing mobile CTA
   Appears only once the hero has scrolled away, retracts whenever a real
   contact/quote section is on screen so it never duplicates the page's
   own call to action. Sits above the safe-area, mobile only.
   ------------------------------------------------------------------- */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 90;
    padding: 16px 24px;
    border-radius: var(--radius-pill);
    background: var(--green-sage);
    color: var(--green-darker);
    font-family: var(--font-body);
    /* Terracotta keeps this consistent with every other primary button on
       the site. Dark-on-clay is 3.66:1, so the label is set at large-text
       scale (>=18.66px, bold) where 3:1 is the AA bar — it clears it and
       reads more decisively as the page's main action. */
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 30px -10px rgba(22,35,26,0.55), 0 2px 0 rgba(255,255,255,0.12) inset;
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s var(--ease-luxury), opacity 0.4s var(--ease-luxury);
  }
  .mobile-cta-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-cta-bar svg { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------------
   4. SERVICE CARDS (services page) — content-height, no dead space
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Single column below 600 (was 480) so the two-up row never squashes
     a card title onto three lines. */
  .services-grid-full { grid-template-columns: 1fr; gap: 16px; }
  /* Featured cards are identical to the rest at one column — drop the
     span and the wide 21/9 crop that left them letterboxed on a phone. */
  .services-grid-full .service-card.is-featured,
  .services-grid-full .service-card.cta-card { grid-column: auto; }
  .services-grid-full .service-card.is-featured .service-card-img { aspect-ratio: 16/10; }
  .services-grid-full .service-card.is-featured .service-card-title { font-size: 1.5rem; }
  .services-grid-full .service-card .service-card-img { aspect-ratio: 16/10; }
  /* Soften the desktop corner-notch so it doesn't clip the tap target. */
  .services-grid-full .service-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  }
  .service-card-body { padding: 22px 20px 26px; }
  /* The whole header row is the tap target — give it real height. */
  .service-card-toggle { min-height: 44px; }
}

/* ---------------------------------------------------------------------
   5. FOOTER — tidy the seam and the logo on small screens
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer { padding-top: 150px; }
  .footer-bottom { gap: 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  /* Keep the giant wordmark from kissing the copyright line. */
  .footer-wordmark-wrap { padding-top: 20px; }
  /* 44px+ touch targets for the directory rows on mobile. */
  .footer-links a, .footer-links span { padding: 12px 0; }
  /* Belt-and-braces for browsers without `overflow: clip` (Safari < 16): pull
     the sprig's rotated bounding box inside the viewport on its own. */
  .footer-sprig { right: -8px; width: 130px; }
}