/* =============================================
   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;

  /* The *-Fallback faces are metric-matched in css/fonts.css so that when the
     webfont swaps in, line boxes barely move. Without them `font-display:swap`
     visibly reflows the page. */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', 'Work Sans Fallback', system-ui, -apple-system, 'Helvetica Neue', Arial, 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%; }
/* <picture> is a layout-neutral wrapper: keeps webp sources from breaking
   absolutely-positioned and 100%-height images (about hero, why-feature, cta bg). */
picture { display: contents; }
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 is a hint that an animation is ABOUT to happen, not a permanent
   decoration. On the base .btn rule it permanently promoted every button on
   every page to its own compositor layer from first paint — wasted layer
   memory on mobile, where :hover doesn't even exist. Scope it to devices that
   can actually hover, and only while hovering. */
@media (hover: hover) {
  .btn:hover { 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);
  /* No backdrop-filter here. It used to blur(16px), but the background sits
     at 94% opacity — there is essentially no backdrop showing through to
     blur, so the effect was invisible while still forcing a full-width fixed
     bar onto its own compositor layer and re-running a 16px blur over
     everything behind it on every scroll frame. Pure cost, zero output. */
  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;
}
/* The hero video is desktop-only. It is now static markup rather than being
   injected by an inline script, so it needs hiding here on mobile (the old
   inline script simply never wrote the element on small screens). */
@media (max-width: 768px) {
  .home-hero-video { display: none; }
}
@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;
  }
  /* At this width the gallery is a horizontal rail, so tiles 3-6 begin
     outside the viewport. Their .fade-up reveal is driven by an
     IntersectionObserver against the viewport, which for a horizontally
     scrolled rail may never fire — leaving those tiles permanently at
     opacity 0 with the photos invisible behind them. (Pre-existing; caught by
     tools/checkmotion.mjs.) Content must never depend on a reveal that cannot
     happen, so inside the rail the tiles simply start visible. */
  .gallery-grid .gallery-item.fade-up,
  .gallery-grid .gallery-item-lg.fade-up {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.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; }

/* --- Mobile service-card photo drift ---------------------------------
   Previously one scrubbed ScrollTrigger per card, each writing a transform
   on a large <img> on every scroll frame and forcing its own compositor
   layer — roughly seven of them on this page. A scroll-driven CSS animation
   does the same thing on the compositor and costs the main thread nothing.

   js/motion.js checks for the same @supports condition and only builds the
   GSAP version where this isn't available, so the effect never runs twice. */
@media (max-width: 768px) {
  @supports (animation-timeline: view()) {
    .services-grid-full .service-card-img img {
      animation: cardPhotoDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes cardPhotoDrift {
      from { transform: scale(1.22) translateY(-9%); }
      to   { transform: scale(1.22) translateY(9%); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-grid-full .service-card-img img { animation: none; transform: none; }
}
.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;
  transform: translate(-50%, -50%);
}
/* Promote the slides only while a drag is actually in flight — permanently
   promoting every slide costs layer memory for an interaction most visitors
   never start. js/gallery.js toggles .is-dragging on the stage. */
.workgallery-stage.is-dragging .wgal-slide { will-change: transform, opacity; }
.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); }
/* js/motion.js counts this from 0.0 to 5.0, rewriting textContent every frame
   for 1.6s. Tabular figures keep every intermediate value the same width, so
   the per-frame relayout stays inside this element instead of nudging its
   siblings. */
.reviews-score-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2.4ch;
}
.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; }
}

/* =============================================
   HERO ENTRANCE

   This used to be a GSAP `from({autoAlpha: 0})`, which meant the hero
   headline — the largest element on the page, and therefore the Largest
   Contentful Paint — stayed at opacity 0 until gsap.min.js had downloaded,
   parsed and run. Measured cost: LCP 3.9s instead of ~1.7s on a throttled
   phone.

   As CSS it starts on the very first frame, with no JavaScript in the way,
   and Chrome can record the LCP as soon as the text has any non-zero
   opacity. The choreography is identical: same rise, same stagger, same
   easing curve as the old tween.

   Critical content must never wait on a script to become visible.
   ============================================= */
/* Transform ONLY — deliberately no opacity fade on these elements.

   Chrome does not count an element as painted while its opacity is 0, so
   fading the headline in postponed the Largest Contentful Paint by the full
   delay + duration of the fade. Measured on a throttled phone:
     no animation      LCP 1.0s
     fade + rise       LCP 2.1s
     rise only (this)  LCP 1.0s
   The rise reads almost identically and costs nothing. The fade is kept for
   the smaller sibling lines below, which are not LCP candidates. */
@keyframes heroRise {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
@keyframes heroRiseFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.home-hero-content > *,
.about-hero-content > * {
  animation: heroRiseFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* The headline is the LCP element on both pages — rise, never fade. */
.home-hero-title,
.about-hero-title {
  animation-name: heroRise;
}
.home-hero-content > *:nth-child(1),
.about-hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.home-hero-content > *:nth-child(2),
.about-hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.home-hero-content > *:nth-child(3),
.about-hero-content > *:nth-child(3) { animation-delay: 0.25s; }
.home-hero-content > *:nth-child(4),
.about-hero-content > *:nth-child(4) { animation-delay: 0.35s; }
.home-hero-content > *:nth-child(5),
.about-hero-content > *:nth-child(5) { animation-delay: 0.45s; }
.home-hero-content > *:nth-child(n+6),
.about-hero-content > *:nth-child(n+6) { animation-delay: 0.55s; }

.about-hero-img {
  animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-content > *,
  .about-hero-content > *,
  .about-hero-img { animation: none; }
}

/* =============================================
   FADE-UP ANIMATION (global)
   ============================================= */
/* opacity + transform only by default. These two are the compositor's fast
   path — they animate without repainting. `filter: blur()` is not: it forces
   a separable Gaussian over the element's whole layer on every frame, and
   there are 30+ .fade-up elements on the homepage alone. On mobile that
   lands right in the post-LCP window where blocking time is measured, so the
   blur is gated to viewports with the headroom for it (below). */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .fade-up {
    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 { 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; }

/* --- Deferred-widget skeleton -----------------------------------------
   Stands in for the DeepLawn widget until js/deeplawn.js loads it. It fills
   the height .hero-quote-card / .services-hero-widget-card already reserve,
   so swapping it for the real widget shifts nothing.

   Deliberately NOT animated: a shimmer keyframe on an above-the-fold element
   is exactly the kind of gratuitous main-thread work this pass removes.

   The fake input is a real <button>, so it is keyboard-reachable, announces
   properly, and tapping it both loads the widget and focuses the real field.
   That avoids the dead-placeholder trap that ruins most lazy third-party
   embeds. */
.lawn-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 2px;
}
.lawn-skeleton-head {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255,255,255,0.92);
}
.lawn-skeleton-input {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
}
.lawn-skeleton-input:hover,
.lawn-skeleton-input:focus-visible {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.32);
}
.lawn-skeleton-note {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

/* =============================================
   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;
  }
  /* Both bars are fixed to the bottom of a ~390px screen, so they land on
     top of each other. The cookie banner is transient (first visit only)
     and needs a decision, so it wins; the quote bar stands down until the
     banner is gone rather than stacking two bars over the content. */
  body.cookie-banner-open .mobile-cta-bar.is-visible {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
  }
  .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; }
}

/* ---------------------------------------------------------------------
   6. LEGAL PAGES (privacy.html, terms.html) — plain-content shell
   ------------------------------------------------------------------- */
.legal-hero { background: var(--green-darker); color: var(--white); padding: 148px 0 64px; }
.legal-hero .eyebrow { margin-bottom: 16px; }
.legal-hero-updated { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-top: 14px; }
.legal-content { max-width: 68ch; margin: 0 auto; padding: 72px 0 96px; }
.legal-content h2 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  color: var(--text-dark); margin: 48px 0 16px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--text-medium); line-height: 1.75; margin-bottom: 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal-content li { color: var(--text-medium); line-height: 1.75; margin-bottom: 8px; }
.legal-content a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--green-sage); }
.legal-content strong { color: var(--text-dark); font-weight: 600; }
@media (max-width: 600px) {
  .legal-hero { padding: 128px 0 48px; }
}

/* ---------------------------------------------------------------------
   7. COOKIE CONSENT BANNER — real accept/decline, not an "OK" dismissal.
      See js/cookie-consent.js. DeepLawn (the quote widget) is treated as
      necessary — it's the tool the visitor is actively using to request a
      quote — but a real Decline choice is offered per the Aug 2026 legal
      review; see README for the reasoning.
   ------------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 640px; margin: 0 auto;
  background: var(--green-darker); color: rgba(255,255,255,0.88);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 22px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none;
  transition: transform 0.5s var(--ease-luxury), opacity 0.4s var(--ease-luxury);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner p { font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.78); flex: 1 1 260px; margin: 0; }
.cookie-banner a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions button {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  padding: 10px 20px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cookie-banner-decline { background: transparent; color: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.3); }
.cookie-banner-decline:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
.cookie-banner-accept { background: var(--green-sage); color: var(--green-darker); border: 1.5px solid var(--green-sage); }
.cookie-banner-accept:hover { background: var(--green-sage-muted); border-color: var(--green-sage-muted); }
@media (max-width: 600px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 18px; gap: 14px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}