/* ============================================================
   Design Tokens & Components
   Local Growth Groundskeeper design system, ported to CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ---- Primary palette ---- */
  --color-search-orange: #F36B21;
  --color-evergreen:     #12382A;
  --color-lawn:          #5F8F3A;
  --color-stone:         #D8D2C4;
  --color-warm-white:    #F8F5EF;
  --color-soil:          #252521;

  /* ---- Secondary palette ---- */
  --color-hydrangea:     #7897A6;
  --color-mulch:         #6B4A33;
  --color-paver:         #B9AA96;
  --color-map-pack:      #2E7D32;

  /* ---- Tints & shades ---- */
  --color-evergreen-700: #0C271D;
  --color-evergreen-500: #12382A;
  --color-evergreen-300: #2C5A48;
  --color-orange-strong: #D95512;
  --color-orange-tint:   #FCE7D6;
  --color-lawn-tint:     #E6EEDB;
  --color-map-pack-tint: #E1EFE2;
  --color-stone-50:      #EFEBE2;
  --color-stone-line:    #CFC8B8;
  --color-hydrangea-tint:#E4EBEF;

  /* ---- Semantic aliases ---- */
  --surface-page:        var(--color-warm-white);
  --surface-card:        #FFFFFF;
  --surface-card-warm:   var(--color-warm-white);
  --surface-sunken:      var(--color-stone-50);
  --surface-stone:       var(--color-stone);
  --surface-inverse:     var(--color-evergreen);
  --surface-inverse-2:   var(--color-evergreen-700);

  --text-strong:         var(--color-evergreen);
  --text-body:           var(--color-soil);
  --text-muted:          #5A5A52;
  --text-faint:          #8A877E;
  --text-on-inverse:     var(--color-warm-white);
  --text-on-orange:      #FFFFFF;
  --text-link:           var(--color-evergreen);

  --action-primary:      var(--color-evergreen);
  --action-primary-hover:var(--color-evergreen-700);
  --signal:              var(--color-search-orange);
  --signal-hover:        var(--color-orange-strong);

  --border-card:         var(--color-stone-line);
  --border-strong:       var(--color-paver);
  --divider:             var(--color-stone-line);

  --success:             var(--color-map-pack);
  --success-tint:        var(--color-map-pack-tint);
  --info:                var(--color-hydrangea);
  --info-tint:           var(--color-hydrangea-tint);
  --warn:                var(--color-search-orange);
  --warn-tint:           var(--color-orange-tint);

  --focus-ring:          rgba(243, 107, 33, 0.45);

  /* ---- Typography ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --font-accent:  'Fraunces', Georgia, serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- Effects ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(37, 37, 33, 0.05);
  --shadow-sm: 0 1px 3px rgba(37, 37, 33, 0.06), 0 1px 2px rgba(37, 37, 33, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 56, 42, 0.08), 0 2px 4px rgba(37, 37, 33, 0.04);
  --shadow-lg: 0 12px 32px rgba(18, 56, 42, 0.12), 0 4px 8px rgba(37, 37, 33, 0.05);
  --shadow-hover: 0 8px 24px rgba(18, 56, 42, 0.14);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --lift-hover: translateY(-3px);

  --focus-width: 3px;

  /* ---- Patterns ---- */
  --pattern-lawn-stripe: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 14px,
    rgba(95, 143, 58, 0.07) 14px,
    rgba(95, 143, 58, 0.07) 28px
  );
  --pattern-lawn-stripe-dark: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 16px,
    rgba(248, 245, 239, 0.04) 16px,
    rgba(248, 245, 239, 0.04) 32px
  );
  --pattern-paver-grid:
    linear-gradient(to right, rgba(185, 170, 150, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(185, 170, 150, 0.18) 1px, transparent 1px);
  --pattern-paver-size: 28px 28px;
  --pattern-map-radius: radial-gradient(
    circle at center,
    transparent 0,
    transparent 38px,
    rgba(18, 56, 42, 0.10) 39px,
    transparent 40px,
    transparent 78px,
    rgba(18, 56, 42, 0.08) 79px,
    transparent 80px,
    transparent 118px,
    rgba(18, 56, 42, 0.06) 119px,
    transparent 120px
  );
}

/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* ============================================================
   PATTERN UTILITIES
   ============================================================ */
.pattern-lawn-stripe {
  background-image: var(--pattern-lawn-stripe);
}
.pattern-lawn-stripe-dark {
  background-image: var(--pattern-lawn-stripe-dark);
}
.pattern-paver-grid {
  background-image: var(--pattern-paver-grid);
  background-size: var(--pattern-paver-size);
}
.pattern-map-radius {
  background-image: var(--pattern-map-radius);
}

/* Section overlay gradients (Hero / About) */
.gradient-hero-overlay {
  background: linear-gradient(100deg, rgba(12, 39, 29, .96) 20%, rgba(12, 39, 29, .55) 100%);
}
.gradient-about-overlay {
  background: linear-gradient(95deg, rgba(46, 30, 20, .94) 45%, rgba(46, 30, 20, .6) 100%);
}

/* ============================================================
   ICONS
   ============================================================ */
.l-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.l-icon-dot {
  position: absolute;
  right: -1px;
  top: -1px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--surface-card);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--action-primary);
  color: var(--text-on-inverse);
}
.btn-primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-evergreen);
  border-color: var(--color-evergreen);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-lawn-tint);
}

.btn-ghost {
  background: transparent;
  color: var(--color-evergreen);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
}

.btn-signal-bg {
  background: var(--signal);
  color: #fff;
}
.btn-signal-bg:hover:not(:disabled) {
  background: var(--signal-hover);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(248, 245, 239, .35);
}
.btn-outline-light:hover {
  background: rgba(248, 245, 239, .08);
  border-color: rgba(248, 245, 239, .6);
}

.btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}
.btn-primary .btn-dot,
.btn-signal-bg .btn-dot {
  box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.22);
}

.btn-arrow {
  flex: 0 0 auto;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.badge-neutral { background: var(--surface-sunken); color: var(--text-muted); }
.badge-neutral .badge-dot { background: var(--color-paver); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-success .badge-dot { background: var(--success); }
.badge-signal { background: var(--warn-tint); color: var(--signal-hover); }
.badge-signal .badge-dot { background: var(--signal); }
.badge-info { background: var(--info-tint); color: var(--info); }
.badge-info .badge-dot { background: var(--info); }
.badge-lawn { background: var(--color-lawn-tint); color: var(--color-lawn); }
.badge-lawn .badge-dot { background: var(--color-lawn); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-elevation-sm { box-shadow: var(--shadow-sm); }
.card-elevation-md { box-shadow: var(--shadow-md); }
.card-elevation-flat { box-shadow: none; }

.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-evergreen);
}

.card-interactive:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-hover);
}

/* ============================================================
   TOWN CHIP
   ============================================================ */
.town-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-evergreen);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.town-chip--active {
  color: var(--text-on-inverse);
  background: var(--color-evergreen);
  border-color: var(--color-evergreen);
}

/* ============================================================
   PHOTO PLACEHOLDER
   ============================================================ */
.photo-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: flex-end;
  background-color: var(--color-stone);
  background-image: var(--pattern-lawn-stripe);
}
.photo-placeholder--evergreen {
  background-color: var(--color-evergreen-300);
}
.photo-placeholder--mulch {
  background-color: var(--color-mulch);
}
.photo-placeholder__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px;
  background: rgba(248, 245, 239, .92);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}

/* ============================================================
   STAT CHIP
   ============================================================ */
.stat-chip {
  width: 160px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
}
.stat-chip__num {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 30px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.stat-chip__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}

/* ============================================================
   LEAD FORM
   ============================================================ */
.lead-form {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.lead-form__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.lead-form__subtext {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 8px;
}
.lead-form__required-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.ld-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.ld-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: var(--surface-page);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.ld-input:focus {
  border-color: var(--color-evergreen);
  box-shadow: 0 0 0 var(--focus-width) var(--focus-ring);
}
.ld-input.error {
  border-color: var(--signal);
}
label.error {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--signal-hover);
  margin-top: 4px;
  font-weight: 400;
}

.form-success,
.form-error {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}
.form-success {
  background: var(--success-tint);
  color: var(--success);
}
.form-error {
  background: var(--warn-tint);
  color: var(--signal-hover);
}

/* Honeypot — visually hidden, inaccessible to real users */
.bot-trap {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* reCAPTCHA scaling on narrow screens */
.g-recaptcha-wrap {
  overflow: hidden;
}
@media (max-width: 380px) {
  .g-recaptcha-wrap {
    height: 65px;
  }
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

/* ============================================================
   RESULTS / CASE STUDIES
   ============================================================ */
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 920px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
}
.results-card {
  border-radius: var(--radius-lg);
}
.results-card:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-md);
}
.results-photo__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
}
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: var(--color-evergreen);
  text-decoration: none;
}
.case-link__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.case-link:hover .case-link__dot {
  box-shadow: 0 0 0 3px rgba(243, 107, 33, .22);
}
.case-link__arrow {
  transition: transform var(--dur-base) var(--ease-standard);
}
.case-link:hover .case-link__arrow {
  transform: translateX(3px);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  color: var(--text-strong);
}
.faq-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-standard);
}
.faq-toggle svg {
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[data-open="true"] .faq-toggle {
  background: var(--signal);
}
.faq-item[data-open="true"] .faq-toggle svg {
  transform: rotate(180deg);
}
.faq-item[data-open="true"] .faq-toggle path {
  stroke: #fff;
}
.faq-answer {
  padding: 0 22px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.faq-item[data-open="false"] .faq-answer {
  display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-link {
  display: block;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(248, 245, 239, .8);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color var(--dur-base) var(--ease-standard);
}
.footer-link:hover {
  color: #fff;
}
.footer-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}
.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(248, 245, 239, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.footer-social:hover {
  background: rgba(248, 245, 239, .2);
}

/* ============================================================
   LEAD MODAL ANIMATION
   ============================================================ */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes backdrop-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#lead-modal[open] {
  animation: modal-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#lead-modal::backdrop {
  animation: backdrop-enter 0.28s ease both;
}

.footer-social [data-icon] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   LONG ISLAND MAP (Contact CTA section)
   ============================================================ */
.li-mapwrap {
  background: var(--surface-page);
  padding: 8px 32px 56px;
  text-align: left;
  margin: 48px -32px -64px; /* side: cancel px-8(32px); bottom: cancel py-16(64px) default */
}
.li-map-head { margin-bottom: 22px; }
.li-map-ttl {
  font: 700 24px/1.12 'Sora', sans-serif;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--color-evergreen);
}
.li-map-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted, #5a6b5e);
  margin: 0;
  white-space: nowrap;
}
.li-map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-card, rgba(20,50,35,.14));
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.li-map-embed iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  filter: saturate(.82);
}
.li-rev-card {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: block;
  width: 268px;
  padding: 16px 18px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(20,50,35,.22);
  text-decoration: none;
  line-height: 1.4;
  transition: transform .15s ease, box-shadow .15s ease;
}
.li-rev-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(20,50,35,.28);
}
.li-rev-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.li-rev-stars { color: #F5A623; font-size: 15px; letter-spacing: 1px; }
.li-rev-score { font: 700 14px/1 'Sora', sans-serif; color: var(--color-evergreen); }
.li-rev-name  { font: 700 15px/1.2 'Sora', sans-serif; color: var(--color-evergreen); margin-bottom: 2px; }
.li-rev-sub   { font-size: 12.5px; color: var(--text-muted, #5a6b5e); margin-bottom: 12px; }
.li-rev-cta   { display: inline-block; font: 600 13px/1 'Sora', sans-serif; color: var(--color-search-orange); }

@media (min-width: 1024px) {
  .li-mapwrap { margin-bottom: -80px; } /* cancel lg:py-20 (80px) */
}
@media (max-width: 640px) {
  .li-mapwrap { padding-bottom: 40px; }
  .li-map-sub { white-space: normal; }
  .li-rev-card { width: calc(100% - 40px); }
}