/* ============================================================
   Mega Turf Artificial Solutions Inc. — Turf-Green mood
   A premium, modern green reskin of the Fiorella industrial mood.
   All structure inherited from fiorella.css + site.css.
   Manrope typography for a clean, premium, outdoor-luxury voice.
   ============================================================ */

[data-mood="turf-green"] {
  /* Palette — deep green-black surface, fresh grass accent */
  --bg:        #06140e;
  --bg-2:      #0a1d14;
  --bg-3:      #102a1d;
  --ink:       #eef5ec;
  --ink-2:     rgba(238,245,236,.74);
  --ink-3:     rgba(238,245,236,.48);
  --ink-sub:   rgba(238,245,236,.86);

  --accent:    #62c25a;            /* fresh grass green pulled from logo */
  --accent-2:  rgba(98,194,90,.14);
  --accent-soft: rgba(98,194,90,.32);
  --lime:      #c9e265;            /* small accent — use surgically */
  --border:    rgba(238,245,236,.10);
  --border-2:  rgba(238,245,236,.22);
  --on-accent: #06140e;

  /* Manrope across the board — modern, premium, less industrial */
  --f-disp:  'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-body:  'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Manrope', 'Inter', sans-serif;
  --f-btn:   'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Manrope weights — 800 display, 500 body, 700 strong */
  --fw-disp:        800;
  --fw-body:        500;
  --fw-strong:      700;
  --fw-serif-light: 400;

  --ls-display:     -.022em;
  --ls-display-sm:  -.014em;
  --ls-label:       .22em;
  --ls-nav:         .13em;
  --ls-pill:        .06em;

  /* Subtle green glow — refined, premium, not loud */
  --glow-headline:  0 0 60px rgba(98,194,90,.14);
  --glow-cta:       0 0 28px rgba(98,194,90,.30), 0 0 70px rgba(98,194,90,.12);
  --glow-logo:      0 0 16px rgba(98,194,90,.28);
  --glow-logo-drop: drop-shadow(0 0 18px rgba(98,194,90,.32));
  --glow-strength:  .5;

  /* Imagery — let the green photos POP. Restrained desaturation. */
  --img-filter-rest:  brightness(.78) contrast(1.04) saturate(.95);
  --img-filter-hover: brightness(1.0) contrast(1.06) saturate(1.15);
  --map-filter:       brightness(.55) saturate(.6) contrast(1.15) hue-rotate(80deg);
}

/* ============================================================
   NAV — emblem logo left, links centered, green CTA pill right
   ============================================================ */
.nav-logo-img {
  display: inline-flex; align-items: center; gap: 14px;
}
.nav-logo-img img {
  height: 60px; width: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.55))
          drop-shadow(0 0 22px rgba(98,194,90,.20));
  transition: height var(--dur);
}
.nav.stuck .nav-logo-img img { height: 48px; }

/* Center the nav links between logo and CTA */
.nav-links {
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
  gap: 28px;
}
@media (max-width: 1200px) {
  .nav-links { gap: 20px; font-size: .72rem; letter-spacing: .11em; }
}
.nav-links a {
  color: var(--ink);
  opacity: .78;
  position: relative;
  padding: 4px 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--accent); }
.nav-links a.active {
  color: var(--accent);
  opacity: 1;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(98,194,90,.7);
}

/* ============================================================
   HERO — image background, dark green overlay
   ============================================================ */
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 50%;
  filter: brightness(.78) contrast(1.04) saturate(1.05);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* Left-side gradient so headline reads on darker ground */
    linear-gradient(to right,
      color-mix(in oklab, var(--bg) 80%, transparent) 0%,
      color-mix(in oklab, var(--bg) 42%, transparent) 32%,
      transparent 58%,
      transparent 100%),
    /* Bottom + top vignette — deep green tones */
    linear-gradient(to bottom,
      color-mix(in oklab, var(--bg) 55%, transparent) 0%,
      transparent 18%, transparent 78%,
      color-mix(in oklab, var(--bg) 90%, transparent) 100%);
}

/* Disable the system's centered radial vignette */
.hero::after { display: none; }

/* Hero typography — Manrope-sized for premium feel */
[data-mood="turf-green"] .hero-h1 {
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.025em;
  font-weight: 800;
  text-transform: none; /* Manrope sentence-case for premium feel */
}
[data-mood="turf-green"] .hero-h1 .acc {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
[data-mood="turf-green"] .hero-tag {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--ink-sub);
  max-width: 540px;
  line-height: 1.6;
  margin-bottom: 52px;
}
[data-mood="turf-green"] .hero-tag strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.08em;
  letter-spacing: -.005em;
  margin-bottom: 10px;
}
[data-mood="turf-green"] .hero-tag span {
  display: block;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
}

/* Left-aligned hero content column */
.hero-content.hero-left {
  position: relative; z-index: 2;
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
  padding: 170px var(--gutter) 140px;
  align-items: flex-start;
  text-align: left;
}

/* Hero badge — outlined pill, top of column */
.hero-badge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
  padding: 9px 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  backdrop-filter: blur(4px);
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(98,194,90,.9);
  animation: pulse 2s ease-in-out infinite;
}
.hero-badge-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
}

/* Logo-as-headline — full lockup */
.hero-logo-h1 {
  margin: 42px 0 54px;
  line-height: 1;
}
.hero-logo-h1 img {
  display: block;
  width: clamp(280px, 38vw, 540px);
  height: auto;
  /* Convert dark/green source logo to white. Single-line + -webkit- prefix
     for older mobile Safari, which can fail to parse multi-line filter
     chains with inline comments and silently drop the whole declaration. */
  -webkit-filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
  filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
  opacity: .98;
}
/* Mobile text fallback — replaces the filtered <img> on small viewports so
   the lockup is guaranteed white regardless of browser filter support.
   Hidden on desktop. */
.hero-logo-text { display: none; }
.hero-logo-text-mark,
.hero-logo-text-sub { display: block; color: #fff; }

/* Or — alternative headline (typographic) when not using logo */
.hero-htype {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 24px 0 18px;
  text-wrap: balance;
}
.hero-htype .acc {
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
}

/* Hero buttons — left-aligned, refined, dropped lower for breathing room */
.hero-content.hero-left .hero-btns {
  justify-content: flex-start;
  margin-top: 8px;
  gap: 14px;
}

/* Premium CTAs */
[data-mood="turf-green"] .btn-prim {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: 14px 26px;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow:
    0 8px 22px rgba(98,194,90,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
  gap: 9px;
}
[data-mood="turf-green"] .btn-prim:hover {
  background: #74d36a;
  color: var(--on-accent);
  transform: translateY(-2px);
}
[data-mood="turf-green"] .btn-ghost {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  padding: 13px 22px;
  text-transform: uppercase;
  gap: 12px;
  border-color: color-mix(in oklab, var(--ink) 30%, transparent);
  background: color-mix(in oklab, var(--ink) 4%, transparent);
  color: var(--ink);
}
[data-mood="turf-green"] .btn-ghost:hover {
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ico { width: 16px; height: 16px; }
.btn-ico-r { margin-left: 2px; }

/* Nav pill (CTA) — green, refined, never wraps */
.nav-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-family: var(--f-disp);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  box-shadow:
    0 6px 18px rgba(98,194,90,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-pill:hover { background: #74d36a; color: var(--on-accent) !important; transform: translateY(-1px); }

/* Quiet nav padding */
.nav { padding: 18px var(--gutter); }
.nav.stuck { padding: 10px var(--gutter); }

/* ============================================================
   HERO STAT STRIP — replaces QR card. A clean horizontal data band.
   ============================================================ */
.hero-stats {
  position: absolute;
  right: clamp(20px, 3.6vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 3;
  display: flex;
  gap: 22px;
  padding: 18px 24px;
  background: color-mix(in oklab, var(--bg) 62%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-radius: 14px;
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px -8px rgba(98,194,90,.22);
}
.hero-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 14px;
  border-right: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.hero-stat:first-child { padding-left: 4px; }
.hero-stat:last-child { border-right: none; padding-right: 4px; }
.hero-stat .num {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.hero-stat .num .pop { color: var(--accent); }
.hero-stat .lab {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero-stats { display: none; }
}

/* ============================================================
   EDITORIAL — premium slogan band
   ============================================================ */
[data-mood="turf-green"] .editorial-h {
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  letter-spacing: -.025em;
  text-transform: none;
}
[data-mood="turf-green"] .editorial-h .acc {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
[data-mood="turf-green"] .editorial-sub {
  font-family: var(--f-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05rem;
  color: var(--ink-sub);
  max-width: 580px; line-height: 1.65;
  font-style: normal;
}

/* ============================================================
   INTRO / ABOUT band — between marquee and editorial
   ============================================================ */
.intro {
  padding: 140px var(--gutter) 100px;
  border-top: 1px solid var(--border);
}
.intro-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.intro-eyebrow {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.intro-eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(98,194,90,.6);
}
.intro-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}
.intro-h em { font-style: italic; color: var(--accent); font-weight: 700; }
.intro p {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 18px;
}
.intro-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 32px;
}
.intro-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
}
.intro-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--img-filter-rest);
  transition: transform var(--dur-img) var(--ease), filter var(--dur-img) var(--ease);
}
.intro-img:hover img { transform: scale(1.04); filter: var(--img-filter-hover); }
.intro-badge {
  position: absolute;
  left: 24px; bottom: 24px;
  background: var(--bg);
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
}
.intro-badge .big {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.intro-badge .small {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 180px;
}
@media (max-width: 1024px) {
  .intro { padding: 90px var(--gutter-md) 80px; }
  .intro-inner { grid-template-columns: 1fr; gap: 60px; }
}
@media (max-width: 600px) {
  .intro { padding: 70px var(--gutter-sm) 60px; }
}

/* ============================================================
   PRODUCTS / SERVICES — refine for Manrope
   ============================================================ */
[data-mood="turf-green"] .products-head h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
[data-mood="turf-green"] .products-head h2 em {
  font-style: italic; color: var(--accent); font-weight: 700;
}
[data-mood="turf-green"] .prod-name {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: -.02em;
  text-transform: none;
  font-weight: 800;
  font-family: var(--f-disp);
}
[data-mood="turf-green"] .prod-desc {
  font-family: var(--f-body); font-weight: 500;
  color: var(--ink-2); line-height: 1.75;
  font-size: 1.02rem;
}
[data-mood="turf-green"] .prod-tag {
  font-family: var(--f-disp); font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  background: var(--accent); color: var(--on-accent);
  padding: 8px 18px;
}
[data-mood="turf-green"] .prod-num {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--accent);
}

/* products section — see-all link */
[data-mood="turf-green"] .products-head .see-all {
  color: var(--ink-2);
  font-family: var(--f-disp); font-weight: 700;
  font-size: .76rem; letter-spacing: .14em;
  border-color: var(--ink-3);
}
[data-mood="turf-green"] .products-head .see-all:hover {
  color: var(--accent); border-color: var(--accent);
}

/* ============================================================
   GALLERY — masonry + category filters
   ============================================================ */
.gallery-head {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 100px var(--gutter) 32px;
}
.gallery-head h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
.gallery-head h2 em {
  font-style: italic; color: var(--accent); font-weight: 700;
}
.gallery-head .sub {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-sub);
  max-width: 56ch;
  margin-top: 14px;
  line-height: 1.55;
}

.gal-filters {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.gal-filter {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.gal-filter:hover { color: var(--ink); border-color: var(--ink-3); }
.gal-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.gal-filter .count {
  margin-left: 6px;
  opacity: .6;
  font-size: .62rem;
  font-weight: 700;
}
.gal-filter.active .count { opacity: .8; }

/* Masonry grid — column-count layout for seamless packing, no holes */
[data-mood="turf-green"] .gal-grid {
  display: block;
  column-count: 3;
  column-gap: 12px;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-rows: auto;
  grid-auto-flow: initial;
  padding: 0 var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
}
[data-mood="turf-green"] .gal-cell {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  grid-column: auto;
  grid-row: auto;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
}
[data-mood="turf-green"] .gal-cell.hide { display: none; }
[data-mood="turf-green"] .gal-cell img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Cell category overlay */
.gal-cell .g-cat {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gal-cell:hover .g-cat { opacity: 1; }
.gal-cell .g-cat::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  margin-right: 8px; vertical-align: middle;
}

@media (max-width: 1024px) {
  .gallery-head { padding: 80px var(--gutter-md) 28px; }
  .gal-filters { padding: 0 var(--gutter-md) 24px; }
  [data-mood="turf-green"] .gal-grid {
    column-count: 2;
    column-gap: 10px;
    padding: 0 var(--gutter-md);
  }
  [data-mood="turf-green"] .gal-cell { margin-bottom: 10px; }
}
@media (max-width: 600px) {
  .gallery-head { padding: 60px var(--gutter-sm) 22px; }
  .gal-filters { padding: 0 var(--gutter-sm) 20px; }
  [data-mood="turf-green"] .gal-grid {
    column-count: 2;
    column-gap: 6px;
    padding: 0 var(--gutter-sm);
  }
  [data-mood="turf-green"] .gal-cell { margin-bottom: 6px; }
}

/* ============================================================
   WHY MEGA TURF — repurpose the reviews component as numbered standards
   ============================================================ */
.reviews-head h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.022em;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
.reviews-head h2 em {
  font-style: italic; color: var(--accent); font-weight: 700;
}
.rev-item { grid-template-columns: 80px 1fr; gap: 40px; }
.why-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-2);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-weight: 800; font-size: .8rem;
  letter-spacing: .1em;
}
.rev-quote {
  font-family: var(--f-body);
  color: var(--ink);
  font-weight: 500;
}
.rev-quote strong {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.015em;
  margin-bottom: 8px;
  color: var(--ink);
}
.rev-source {
  font-family: var(--f-disp); font-weight: 700;
  color: var(--accent);
  letter-spacing: .18em;
}

/* ============================================================
   CONTACT / ESTIMATE FORM
   ============================================================ */
.contact-section {
  padding: 140px var(--gutter) 100px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.contact-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.contact-info .intro-eyebrow { margin-bottom: 22px; }
.contact-info h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: 24px;
}
.contact-info h2 em { font-style: italic; color: var(--accent); font-weight: 700; }
.contact-info > p {
  font-size: 1.05rem;
  color: var(--ink-2);
  max-width: 44ch;
  line-height: 1.65;
  margin-bottom: 40px;
}
.contact-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 0;
}
.contact-list li {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.contact-list li:last-child { border-bottom: none; }
.contact-list .label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-list .value {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.contact-list a.value { transition: color var(--dur) var(--ease); }
.contact-list a.value:hover { color: var(--accent); }

.form-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 44px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.form-card h3 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.form-card > p {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-2);
  margin-bottom: 30px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
.field {
  display: flex; flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--f-body);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5b3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(98,194,90,.18);
}
.form-card button[type="submit"] {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: .85rem;
}
.form-success {
  display: none;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--accent-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 500;
}
.form-success.show { display: block; }

@media (max-width: 1024px) {
  .contact-section { padding: 90px var(--gutter-md) 80px; }
  .contact-inner { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 600px) {
  .contact-section { padding: 70px var(--gutter-sm) 60px; }
  .form-card { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICE AREAS — three-card panel + map
   ============================================================ */
.areas {
  padding: 140px var(--gutter) 100px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.areas-head {
  max-width: var(--max-content);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: end;
}
.areas-head h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -.022em;
  line-height: 1.05;
  text-wrap: balance;
}
.areas-head h2 em { font-style: italic; color: var(--accent); font-weight: 700; }
.areas-head .sub {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink-sub);
  line-height: 1.55;
  max-width: 56ch;
}

.areas-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.area-card {
  background: var(--bg-2);
  padding: 44px 36px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: background var(--dur) var(--ease);
}
.area-card:hover { background: var(--bg-3); }
.area-num {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.area-card h3 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -.022em;
  line-height: 1;
  color: var(--ink);
}
.area-card .tag {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.area-card ul {
  list-style: none;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-2);
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0;
}
.area-card ul li::before {
  content: '— ';
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .areas { padding: 90px var(--gutter-md) 80px; }
  .areas-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .areas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .areas { padding: 70px var(--gutter-sm) 60px; }
  .area-card { padding: 32px 26px; }
}

/* ============================================================
   FINAL CTA — premium green hammer
   ============================================================ */
[data-mood="turf-green"] .final-h {
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  text-transform: none;
  letter-spacing: -.025em;
}
[data-mood="turf-green"] .final-h .acc {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
[data-mood="turf-green"] .final-sub {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05rem;
  color: var(--ink-sub);
  max-width: 520px;
}

.final-phone {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 6px 0 28px;
  display: inline-flex; align-items: center; gap: 16px;
  position: relative; z-index: 1;
}
.final-phone .live {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00d56b;
  box-shadow: 0 0 14px #00d56b;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Final-CTA photo background — same pattern as Quiros */
.final { isolation: isolate; }
.final-photo {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover;
  background-position: center 45%;
  filter: brightness(.32) contrast(1.10) saturate(.85);
}
.final-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, color-mix(in oklab, var(--bg) 78%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--bg) 72%, transparent) 0%,
      transparent 25%, transparent 75%,
      color-mix(in oklab, var(--bg) 92%, transparent) 100%);
}
.final::before { background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(98,194,90,.18) 0%, transparent 65%); }

/* ============================================================
   BUSINESS INFO (hours + contact) — refined for Manrope
   ============================================================ */
[data-mood="turf-green"] .biz-h {
  font-family: var(--f-disp);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.025em;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
}
[data-mood="turf-green"] .biz-h em { font-style: italic; color: var(--accent); font-weight: 700; }
[data-mood="turf-green"] .biz-table td {
  font-family: var(--f-body); font-weight: 500;
}
[data-mood="turf-green"] .biz-table tr.today td {
  color: var(--accent); font-weight: 700;
}
[data-mood="turf-green"] .cb-value {
  font-family: var(--f-disp); font-weight: 700;
}

/* ============================================================
   FOOTER tweaks — use full logo, lighten copy
   ============================================================ */
.foot-brand img {
  height: 56px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 12px;
}
[data-mood="turf-green"] .foot-copy {
  font-family: var(--f-body); font-weight: 500;
  font-size: .82rem; color: var(--ink-3);
}
[data-mood="turf-green"] .foot-legal {
  font-family: var(--f-body); font-weight: 500;
  font-size: .82rem; color: var(--ink-3);
}
[data-mood="turf-green"] .foot-links a {
  font-family: var(--f-disp); font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-2);
}
[data-mood="turf-green"] .foot-links a:hover { color: var(--accent); }

/* ============================================================
   IMG treatment inside prod-img / gal-cell
   ============================================================ */
.prod-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: var(--img-filter-rest);
  transition: filter var(--dur-img) var(--ease), transform var(--dur-img) var(--ease);
}
.prod-row:hover .prod-img img {
  filter: var(--img-filter-hover);
  transform: scale(1.04);
}
.gal-cell img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
  filter: var(--img-filter-rest);
  transition: filter var(--dur) var(--ease), transform var(--dur-img) var(--ease);
}
.gal-cell:hover img {
  filter: var(--img-filter-hover);
  transform: scale(1.06);
}
@media (hover: none) {
  .gal-cell:hover img { filter: var(--img-filter-rest); transform: none; }
}

/* ============================================================
   FLOATING WHATSAPP (mobile-prominent, desktop-discreet)
   ============================================================ */
.float-wa {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 750;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.float-wa:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 36px -8px rgba(37,211,102,.65);
}
.float-wa svg { width: 28px; height: 28px; fill: #fff; }

/* Floating call (mobile only) — Quiros pattern, repurposed for "Estimate" */
.float-call {
  position: fixed; bottom: 22px; right: 90px; z-index: 750;
  display: none;
  align-items: center; gap: 10px;
  background: var(--accent); color: var(--on-accent);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  font-family: var(--f-disp); font-size: .82rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 24px rgba(98,194,90,.5);
}
.float-call .ring {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
}
.float-call .ring svg { width: 14px; height: 14px; stroke: var(--on-accent); fill: none; }
@media (max-width: 900px) {
  .float-call { display: inline-flex; }
}

/* ============================================================
   Mobile menu (overlay panel)
   ============================================================ */
.nav-burger { display: none; cursor: pointer; background: none; border: 0; color: var(--ink); padding: 8px; }
.nav-burger svg { width: 26px; height: 26px; }
@media (max-width: 1024px) {
  .nav-burger { display: inline-flex; }
}

.mob-menu {
  position: fixed; inset: 0; z-index: 900;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(24px) saturate(140%);
  display: flex; flex-direction: column; padding: 100px var(--gutter-md) var(--gutter-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
}
.mob-menu.open { opacity: 1; pointer-events: auto; }
.mob-menu .close {
  position: absolute; top: 22px; right: var(--gutter-md);
  background: none; border: 0; color: var(--ink); cursor: pointer; padding: 8px;
}
.mob-menu .close svg { width: 26px; height: 26px; }
.mob-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; }
.mob-menu a {
  font-family: var(--f-disp); font-size: 1.6rem;
  letter-spacing: -.015em; font-weight: 800;
  color: var(--ink); padding: 16px 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.mob-menu a::after { content: '→'; color: var(--accent); font-weight: 800; }
.mob-menu .mob-cta {
  margin-top: auto;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-disp); font-size: 1rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 800;
  padding: 18px; border-radius: var(--r-pill);
  text-align: center;
}

/* ============================================================
   GALLERY  — button cells (clickable lightbox triggers)
   ============================================================ */
button.gal-cell {
  appearance: none;
  border: 0;
  padding: 0;
  background: var(--bg-3);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  display: block;
  position: relative;
  outline: none;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(98,194,90,.18);
  user-select: none;
  -webkit-user-select: none;
}
button.gal-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   LIGHTBOX  — dark green overlay
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  background: rgba(4, 14, 8, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .24s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lb-stage {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 100%;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lb-stage img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
  animation: lbIn .28s ease;
}
.lb-stage figcaption {
  font-family: var(--f-disp);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
  color: var(--ink);
  text-align: center;
  padding: 10px 22px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  position: relative;
}
.lb-stage figcaption::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(98,194,90,.7);
  margin-right: 10px;
  vertical-align: middle;
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.lb-close, .lb-nav {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20, 32, 22, .72);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,.18);
  user-select: none;
}
.lb-close svg, .lb-nav svg { width: 22px; height: 22px; }
.lb-close:hover, .lb-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: scale(1.05);
}
.lb-close { top: 20px; right: 20px; }
.lb-prev  { left: clamp(14px, 3vw, 36px); top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(14px, 3vw, 36px); top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.05); }
.lb-next:hover { transform: translateY(-50%) scale(1.05); }
@media (max-width: 600px) {
  .lb-close { top: 12px; right: 12px; width: 48px; height: 48px; }
  .lb-nav   { width: 44px; height: 44px; }
  .lb-prev  { left: 8px; }
  .lb-next  { right: 8px; }
}

/* ============================================================
   Pulse keyframe (used by hero badge / phone live dot)
   ============================================================ */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(98,194,90,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(98,194,90,0); }
}

/* ============================================================
   Hero responsive refinements
   ============================================================ */
@media (max-width: 900px) {
  .hero-logo-h1 img {
    width: min(82vw, 420px);
    -webkit-filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
    filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
  }
  .hero-logo-h1 { margin: 36px 0 44px; }
  .hero-content.hero-left { padding: 130px var(--gutter-md) 100px; }
  .hero-photo { background-position: 60% 60%; }
  .hero-badge { font-size: .62rem; gap: 10px; padding: 8px 14px; }
  [data-mood="turf-green"] .hero-tag { margin-bottom: 40px; font-size: 1rem; }
  .nav-logo-img img { height: 48px; }
  .nav.stuck .nav-logo-img img { height: 40px; }
  .nav-pill { padding: 9px 14px; font-size: .68rem; letter-spacing: .06em; gap: 7px; }
}
@media (max-width: 600px) {
  .hero-logo-h1 img {
    width: 86vw;
    -webkit-filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
    filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(0,0,0,.45));
  }
  .hero-logo-h1 { margin: 32px 0 38px; }
  .hero-content.hero-left { padding: 110px var(--gutter-sm) 80px; }
  [data-mood="turf-green"] .hero-tag { margin-bottom: 32px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns > .btn-prim, .hero-btns > .btn-ghost { justify-content: center; }
  .nav-pill { padding: 8px 12px; font-size: .62rem; letter-spacing: .04em; }
  .nav-pill .phone-ico { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .nav-pill { padding: 8px 10px; font-size: .58rem; }
  .nav-pill .phone-ico { display: none; }
}

/* ============================================================
   MOBILE OVERFLOW + LAYOUT SAFETY NET
   Targeted fixes for narrow viewports (<= 900px). Does not touch
   desktop styling. Keeps content inside viewport, prevents the
   floating CTAs from covering hero content, and ensures the
   hero logo stays light on every mobile browser.
   ============================================================ */
@media (max-width: 900px) {
  /* 1. Global horizontal-overflow guard. Prevents stray wide
        children (long unbreakable strings, animations, fixed
        widths) from creating a right-side empty band. */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body { box-sizing: border-box; }

  /* 2. Belt-and-braces: force the hero lockup to render white.
        On mobile we HIDE the dark logo image entirely and render
        the lockup as plain white text — guaranteed visible on
        every mobile browser, no filter dependency. */
  .hero-logo-h1 img { display: none !important; }
  .hero-logo-h1 .hero-logo-text {
    display: block;
    color: #fff;
    text-align: left;
    line-height: 1;
  }
  .hero-logo-h1 .hero-logo-text-mark {
    font-family: var(--f-disp, 'Bebas Neue', 'Oswald', 'Helvetica Neue', sans-serif);
    font-weight: 800;
    font-size: clamp(2.6rem, 12vw, 4.2rem);
    letter-spacing: .02em;
    line-height: .95;
    color: #fff;
    text-shadow: 0 8px 28px rgba(0,0,0,.55);
  }
  .hero-logo-h1 .hero-logo-text-sub {
    margin-top: 10px;
    font-family: var(--f-body, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: 600;
    font-size: clamp(.78rem, 3vw, 1rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    opacity: .92;
    text-shadow: 0 4px 18px rgba(0,0,0,.55);
  }

  /* 3. Footer grid: let the 1fr column shrink below its
        children's min-content so the footer stops pushing the
        body wider than the viewport. */
  .foot { overflow: hidden; }
  .foot-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .foot-inner > * { min-width: 0; max-width: 100%; }
  .foot-links { flex-wrap: wrap; row-gap: 10px; }
  .foot-copy,
  .foot-legal,
  .foot-legal a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 4. Floating CTAs: stack vertically on the right edge so the
        Free Estimate pill no longer sits next to the WhatsApp
        bubble (where they crowded each other and the hero CTAs).
        WhatsApp stays at the bottom corner; Estimate floats just
        above it so neither covers the hero buttons. */
  .float-call {
    right: 16px;
    bottom: 92px;
    padding: 12px 18px;
    font-size: .76rem;
  }
  .float-wa {
    right: 16px;
    bottom: 22px;
    width: 52px;
    height: 52px;
  }
  .float-wa svg { width: 24px; height: 24px; }

  /* Hide the Free Estimate float while the hero is in view, so it
     can never sit on top of "Get a Free Estimate" / "View Our
     Work". Toggled by JS based on scroll position. Uses display:
     none so the change is immediate (no transition timing edge
     cases on mobile). */
  .float-call.is-hidden {
    display: none !important;
  }

  /* 5. Bottom-padding the page so footer/last section content
        is never permanently hidden beneath the floating CTAs. */
  .foot { padding-bottom: calc(36px + 110px); }
}

/* Extra safety for very narrow phones (<= 390px). */
@media (max-width: 420px) {
  .float-call {
    padding: 11px 14px;
    font-size: .72rem;
    letter-spacing: .06em;
    gap: 8px;
  }
  .float-call .ring { width: 24px; height: 24px; }
  .float-call .ring svg { width: 12px; height: 12px; }
}


/* ============================================================
   REVISION PASS — brighter overall, light About section,
   bigger About heading, footer socials. Preserves system.
   ============================================================ */

/* 1. Subtle lift to dark surfaces & body text for readability */
[data-mood="turf-green"] {
  --bg:        #08180f;
  --bg-2:      #0e2419;
  --bg-3:      #163223;
  --ink-2:     rgba(238,245,236,.82);
  --ink-sub:   rgba(238,245,236,.92);
  --border:    rgba(238,245,236,.14);
  --border-2:  rgba(238,245,236,.26);
}

/* 2. ABOUT — light, breathable, premium */
.intro.intro-light {
  background: #f4f2ea;
  border-top: 1px solid rgba(10,29,20,.08);
  border-bottom: 1px solid rgba(10,29,20,.08);
  position: relative;
  isolation: isolate;
}
.intro.intro-light::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 8% 0%, rgba(98,194,90,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(98,194,90,.07), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.intro.intro-light .intro-h,
.intro.intro-light h2 {
  color: #0e1f17;
}
.intro.intro-light p {
  color: rgba(14,31,23,.74);
}
.intro.intro-light .btn-ghost {
  border-color: rgba(14,31,23,.28);
  color: #0e1f17;
  background: transparent;
}
.intro.intro-light .btn-ghost:hover {
  background: rgba(14,31,23,.06);
  border-color: #0e1f17;
  color: #0e1f17;
}
.intro.intro-light .intro-img {
  box-shadow: 0 30px 80px -30px rgba(10,29,20,.35);
  border-radius: 6px;
  overflow: hidden;
}

/* 3. Larger, primary About heading — replaces eyebrow+headline */
.intro-h.intro-h-xl {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin-bottom: 28px;
  text-wrap: balance;
}

/* 4. AREAS — soften from deep dark to a slightly brighter tone */
.areas { background: #0d2418; }
.area-card { background: #0e2619; }
.area-card:hover { background: #143222; }

/* 5. BIZ section — give it a brighter, more inviting top band */
.biz { background: linear-gradient(180deg, #0e2419 0%, #08180f 100%); }

/* 6. CONTACT form card — lift surface for contrast */
.form-card {
  background: #112c1f;
  border-color: rgba(238,245,236,.16);
}

/* 7. FOOTER socials */
.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.foot-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border: 1px solid rgba(238,245,236,.18);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  background: rgba(238,245,236,.03);
}
.foot-social-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.foot-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(98,194,90,.10);
  transform: translateY(-1px);
}

/* 8. Hero — push background image slightly so palms compose well */
.hero-photo { background-position: 55% 60%; }

/* 9. Final CTA (now directly under hero) — light divider beneath */
.final + .marquee { border-top: 1px solid rgba(238,245,236,.10); }

/* 10. Mobile — make sure About light section sits cleanly */
@media (max-width: 1024px) {
  .intro.intro-light { padding: 90px var(--gutter-md) 80px; }
  .intro-h.intro-h-xl { font-size: clamp(2.2rem, 8vw, 3.4rem); }
}
@media (max-width: 600px) {
  .foot-social { justify-content: center; }
  .foot-brand { text-align: center; }
}


/* ============================================================
   BRIGHT REFINEMENT PASS v2 — flip entire site to a bright,
   premium palette with green accents. Preserves all structure,
   animations and spacing. Dark surfaces remain ONLY where photo
   contrast demands them (hero overlay, final-CTA overlay,
   lightbox).
   ============================================================ */

[data-mood="turf-green"] {
  /* Bright surface palette — warm off-whites */
  --bg:        #fbfaf5;
  --bg-2:      #f3f1ea;
  --bg-3:      #e7e4d8;

  /* Deep green-black ink for body copy on light */
  --ink:       #0e1f17;
  --ink-2:     rgba(14,31,23,.72);
  --ink-3:     rgba(14,31,23,.48);
  --ink-sub:   rgba(14,31,23,.86);

  /* Slightly deeper green for contrast on white */
  --accent:    #3f9a3a;
  --accent-2:  rgba(63,154,58,.10);
  --accent-soft: rgba(63,154,58,.28);
  --on-accent: #ffffff;

  --border:    rgba(14,31,23,.10);
  --border-2:  rgba(14,31,23,.18);

  --glow-headline:  0 0 60px rgba(63,154,58,.10);
  --glow-cta:       0 0 22px rgba(63,154,58,.22), 0 0 60px rgba(63,154,58,.10);
  --glow-logo:      0 0 16px rgba(63,154,58,.18);

  /* Imagery pops on light bg */
  --img-filter-rest:  brightness(.96) contrast(1.04) saturate(1.02);
  --img-filter-hover: brightness(1.04) contrast(1.06) saturate(1.10);
}

html, body { background: var(--bg); color: var(--ink); }

/* ---------- NAV — bright glass ---------- */
.nav {
  background: rgba(251,250,245,.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav.stuck {
  background: rgba(251,250,245,.86);
  border-color: rgba(14,31,23,.10);
  box-shadow: 0 10px 32px -22px rgba(14,31,23,.18);
}
.nav-links a { color: var(--ink); opacity: .72; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); opacity: 1; }
.nav-links a.active::after { background: var(--accent); box-shadow: 0 0 10px rgba(63,154,58,.35); }
[data-mood="turf-green"] .nav-pill {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(63,154,58,.45);
}
[data-mood="turf-green"] .nav-pill:hover { background: #348230; color: #fff !important; }
.nav-burger { color: var(--ink); }
.nav-logo-img img {
  filter: drop-shadow(0 4px 14px rgba(14,31,23,.18));
}

/* ---------- HERO — keep dark overlay for photo readability ---------- */
.hero-photo::after {
  background:
    linear-gradient(to right,
      rgba(8,24,15,.74) 0%,
      rgba(8,24,15,.45) 30%,
      rgba(8,24,15,.10) 58%,
      transparent 100%),
    linear-gradient(to bottom,
      rgba(8,24,15,.40) 0%,
      transparent 22%, transparent 78%,
      rgba(251,250,245,.65) 100%) !important;
}
.hero-content .hero-tag strong { color: #fff !important; }
.hero-content .hero-tag span   { color: rgba(255,255,255,.82) !important; }
.hero-badge {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
}
.hero-badge-sep { background: rgba(255,255,255,.5); }
.hero-stats {
  background: rgba(8,24,15,.55);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255,255,255,.15);
}
.hero-stat .num { color: #fff; }
.hero-stat .lab { color: rgba(255,255,255,.62); }
.hero-stat { border-right-color: rgba(255,255,255,.16); }

/* Hero secondary "View Our Work" ghost button — readable on dark photo */
[data-mood="turf-green"] .hero-btns .btn-ghost {
  border-color: rgba(255,255,255,.50);
  color: #fff;
  background: rgba(255,255,255,.06);
}
[data-mood="turf-green"] .hero-btns .btn-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  color: #fff;
}

/* ---------- MARQUEE — soft cream band ---------- */
.marquee {
  background: #f3f1ea;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.marquee-item { color: rgba(14,31,23,.62) !important; }

/* ---------- ABOUT — bright, with subtle green gradient ---------- */
.intro, .intro.intro-light {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(63,154,58,.07), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(63,154,58,.05), transparent 60%),
    #fbfaf5;
  color: var(--ink);
}
.intro.intro-light::before { display: none; }
.intro-eyebrow { color: var(--accent); }
.intro-eyebrow::before { background: var(--accent); }
.intro-h, .intro.intro-light .intro-h {
  color: var(--accent) !important;
}
.intro-h em { color: var(--ink); font-style: italic; }
.intro p, .intro.intro-light p { color: var(--ink-2) !important; }
.intro-img { box-shadow: 0 30px 60px -28px rgba(14,31,23,.22); border-radius: 6px; overflow: hidden; }
[data-mood="turf-green"] .intro .btn-ghost,
[data-mood="turf-green"] .intro.intro-light .btn-ghost {
  border-color: rgba(14,31,23,.28);
  color: var(--ink);
  background: transparent;
}
[data-mood="turf-green"] .intro .btn-ghost:hover,
[data-mood="turf-green"] .intro.intro-light .btn-ghost:hover {
  background: rgba(14,31,23,.06); border-color: var(--ink); color: var(--ink);
}

/* ---------- EDITORIAL ---------- */
.editorial { background: #fbfaf5; }
.editorial-h { color: var(--ink); }
.editorial-h .acc { color: var(--accent); }
.editorial-sub { color: var(--ink-2); }

/* ---------- PRODUCTS ---------- */
.products { background: #f7f5ee; }
.products-head h2 { color: var(--ink); }
[data-mood="turf-green"] .prod-name { color: var(--ink); }
[data-mood="turf-green"] .prod-desc { color: var(--ink-2); }
.prod-num { color: var(--accent); }
[data-mood="turf-green"] .prod-tag { background: var(--accent); color: #fff; }
[data-mood="turf-green"] .products-head .see-all {
  color: var(--ink-2); border-color: var(--border-2);
}
[data-mood="turf-green"] .products-head .see-all:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- GALLERY ---------- */
#gallery { background: #fbfaf5; }
.gallery-head h2 { color: var(--ink); }
.gallery-head h2 em { color: var(--accent); }
.gallery-head .sub { color: var(--ink-2); }
.gal-filter { color: var(--ink-2); border-color: var(--border-2); background: #fff; }
.gal-filter:hover { color: var(--ink); border-color: var(--accent); }
.gal-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-mood="turf-green"] .gal-cell { background: #e7e4d8; box-shadow: 0 14px 30px -22px rgba(14,31,23,.20); }
.g-cat {
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-color: rgba(14,31,23,.08);
}

/* ---------- WHY MEGA TURF ---------- */
.reviews { background: #f3f1ea; }
.reviews-head h2 { color: var(--ink); }
.reviews-head h2 em { color: var(--accent); }
.rev-eyebrow { color: var(--accent); }
.why-icon {
  background: rgba(63,154,58,.10);
  border-color: rgba(63,154,58,.30);
  color: var(--accent);
}
.rev-quote, .rev-quote strong { color: var(--ink) !important; }
.rev-source { color: var(--ink-3); }

/* ---------- AREAS ---------- */
.areas { background: #fbfaf5 !important; }
.areas-head h2 { color: var(--ink); }
.areas-head h2 em { color: var(--accent); }
.areas-head .sub { color: var(--ink-2); }
.areas-grid {
  background: rgba(14,31,23,.08);
  border-color: rgba(14,31,23,.08);
  box-shadow: 0 24px 60px -36px rgba(14,31,23,.20);
}
.area-card { background: #fff !important; }
.area-card:hover { background: #f7f5ee !important; }
.area-num { color: var(--accent); }
.area-card h3 { color: var(--ink); }
.area-card .tag { color: var(--ink-3); }
.area-card ul { color: var(--ink-2); }

/* ---------- CONTACT ---------- */
.contact-section { background: #f3f1ea !important; }
.contact-info .intro-eyebrow { color: var(--accent); }
.contact-info h2 { color: var(--ink); }
.contact-info h2 em { color: var(--accent); }
.contact-info > p { color: var(--ink-2); }
.contact-list .label { color: var(--ink-3); }
.contact-list .value { color: var(--ink); }
.contact-list .value a { color: var(--ink); }
.contact-list .value a:hover { color: var(--accent); }

.form-card {
  background: #ffffff !important;
  border: 1px solid rgba(14,31,23,.10) !important;
  box-shadow: 0 30px 80px -40px rgba(14,31,23,.30);
}
.form-card h3 { color: var(--ink); }
.form-card > p { color: var(--ink-2); }
.field label { color: var(--ink-3); }
.field input, .field select, .field textarea {
  background: #fbfaf5;
  border-color: rgba(14,31,23,.14);
  color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(14,31,23,.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63,154,58,.16);
  outline: none;
}
.form-success {
  background: rgba(63,154,58,.10);
  border-left-color: var(--accent);
  color: var(--ink);
}

/* ---------- BIZ ---------- */
.biz { background: #fbfaf5 !important; }
.biz-h { color: var(--ink); }
.biz-h em { color: var(--accent); font-style: italic; }
.biz-table { color: var(--ink); }
.biz-table td { border-color: var(--border); }
.biz-table .today td { color: var(--ink); font-weight: 700; }
.open-pill {
  background: rgba(63,154,58,.10);
  border: 1px solid rgba(63,154,58,.30);
  color: var(--accent);
}
.open-dot { background: var(--accent); }
.cb-label { color: var(--ink-3); }
.cb-value, .cb-value a { color: var(--ink); }
.cb-value a:hover { color: var(--accent); }

/* ---------- FINAL CTA — keep dark photo overlay, lighter base ---------- */
.final { background: #fbfaf5; }
.final-photo::after {
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(8,24,15,.10) 20%, rgba(8,24,15,.70) 100%),
    linear-gradient(to bottom,
      rgba(8,24,15,.55) 0%,
      rgba(8,24,15,.20) 25%, rgba(8,24,15,.30) 75%,
      rgba(251,250,245,.40) 100%) !important;
}
.final::before { background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(63,154,58,.18) 0%, transparent 65%); }
.final-h { color: #fff !important; }
.final-h .acc { color: #b7f0a6 !important; }
.final-sub { color: rgba(255,255,255,.82) !important; }
.final-phone, .final-phone a { color: #fff !important; }
[data-mood="turf-green"] .final .btn-ghost {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.06);
}
[data-mood="turf-green"] .final .btn-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff; color: #fff;
}

/* ---------- FOOTER ---------- */
.foot { background: #f3f1ea !important; border-top: 1px solid var(--border); }
.foot-brand img { filter: none; }
[data-mood="turf-green"] .foot-copy { color: var(--ink-2); }
[data-mood="turf-green"] .foot-legal,
[data-mood="turf-green"] .foot-legal a { color: var(--ink-2); }
[data-mood="turf-green"] .foot-legal a:hover { color: var(--accent); }
[data-mood="turf-green"] .foot-links a { color: var(--ink-2); }
[data-mood="turf-green"] .foot-links a:hover { color: var(--accent); }

/* Footer socials now removed — fall back gracefully if present */
.foot-social { display: none !important; }

/* ---------- LIGHTBOX — stays dark for photo viewing ---------- */
.lightbox { background: rgba(8,24,15,.94); }

/* ---------- MOB MENU ---------- */
.mob-menu {
  background: rgba(251,250,245,.98);
  color: var(--ink);
}
.mob-menu a, .mob-menu .mob-link { color: var(--ink); }
.mob-menu .close { color: var(--ink); }

/* ---------- FLOATING CTAs — softer drop shadow on light ---------- */
.float-call { background: var(--accent); color: #fff; box-shadow: 0 12px 30px -10px rgba(63,154,58,.5); }
.float-wa   { box-shadow: 0 12px 30px -10px rgba(37,211,102,.45); }

/* ============================================================
   CONTACT SOCIAL DOCK — integrated, premium
   ============================================================ */
.contact-social {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.contact-social-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: block;
}
.contact-social-links {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.contact-social a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 1px solid rgba(14,31,23,.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 6px 18px -12px rgba(14,31,23,.20);
}
.contact-social a svg { width: 18px; height: 18px; }
.contact-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(63,154,58,.45);
}

/* ============================================================
   LANGUAGE SWITCHER — pill in nav
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(14,31,23,.05);
  border: 1px solid rgba(14,31,23,.10);
  border-radius: 999px;
  margin-right: 14px;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  line-height: 1;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(63,154,58,.5);
}
@media (max-width: 1100px) {
  .lang-switch { margin-right: 8px; }
  .lang-switch button { padding: 5px 9px; font-size: .64rem; letter-spacing: .12em; }
}
@media (max-width: 760px) {
  .lang-switch {
    position: fixed;
    top: 18px; right: 64px;
    z-index: 850;
    background: rgba(251,250,245,.92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 8px 22px -12px rgba(14,31,23,.30);
    margin: 0;
  }
}

/* ============================================================
   ABOUT — right-sized primary heading + pillar list
   ============================================================ */
.intro-h.intro-h-xl {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 800;
  margin-bottom: 26px;
}
@media (max-width: 600px) {
  .intro-h.intro-h-xl { font-size: clamp(2rem, 8vw, 2.6rem); }
}

.about-pillars {
  list-style: none;
  padding: 0;
  margin: 30px 0 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  max-width: 520px;
}
.about-pillars li {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.about-pillars li::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(63,154,58,.14);
}
@media (max-width: 600px) {
  .about-pillars { grid-template-columns: 1fr; gap: 10px 0; }
}