/* =========================================================================
   Simply Green Turf, LP-01 styles.css
   Client First utilities + component rules. Every value reads from
   pages/tokens.css. No raw hex, no arbitrary values here.
   ========================================================================= */

/* ---- reset + base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ---- typography, semantic ---------------------------------------- */
.text-display {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.text-h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}
.text-h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}
.text-h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}
.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}
.text-body-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}
.text-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand-leaf);
}

/* two-tone display for hero H1 */
.text-display--two-tone .accent { color: var(--text-accent); }

/* ---- color helpers ------------------------------------------------ */
.text-color-primary     { color: var(--text-primary); }
.text-color-secondary   { color: var(--text-secondary); }
.text-color-alternative { color: var(--text-alternative); }
.text-color-accent      { color: var(--text-accent); }

/* ---- layout, containers + section padding ----------------------- */
.padding-global {
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
}
@media (max-width: 1023px) {
  .padding-global {
    padding-left: var(--gutter-tablet);
    padding-right: var(--gutter-tablet);
  }
}
@media (max-width: 767px) {
  .padding-global {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}
.container-large {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.container-medium {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.container-small {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
.padding-section-large  {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
}
.padding-section-medium {
  padding-top: var(--section-pad-tablet);
  padding-bottom: var(--section-pad-tablet);
}
.padding-section-small {
  padding-top: var(--section-pad-mobile);
  padding-bottom: var(--section-pad-mobile);
}
@media (max-width: 1023px) {
  .padding-section-large { padding-top: var(--section-pad-tablet); padding-bottom: var(--section-pad-tablet); }
}
@media (max-width: 767px) {
  .padding-section-large,
  .padding-section-medium { padding-top: var(--section-pad-mobile); padding-bottom: var(--section-pad-mobile); }
}

/* ---- section background alternation ------------------------------- */
.section--light       { background: var(--background-primary); color: var(--text-primary); }
.section--off-white   { background: var(--background-secondary); color: var(--text-primary); }
.section--dark        { background: var(--background-alternative); color: var(--text-alternative); }
.section--dark .text-eyebrow { color: var(--color-brand-lime); }
.section--dark .text-body,
.section--dark .text-body-lg { color: rgba(255, 255, 255, 0.82); }

/* ---- buttons ------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color    var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}
.button--primary:hover { background: var(--button-primary-hover-bg); }
.button--primary:active { transform: translateY(1px); }

.button--secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}
.button--secondary:hover {
  background: var(--button-secondary-hover-bg);
  color: var(--button-secondary-hover-text);
}
.button--large {
  padding: var(--space-5) var(--space-7);
  font-size: var(--font-size-body-lg);
}
.button--full { width: 100%; }

/* ---- form ---------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--input-placeholder); }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}
.form-textarea { resize: vertical; min-height: 96px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-reassurance {
  margin-top: var(--space-3);
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* ---- form pane (hero + final CTA) --------------------------------- */
.form-pane {
  background: var(--background-form-pane);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-pane__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.form-pane__support {
  font-size: var(--font-size-body);
  color: var(--text-secondary);
}
.form-pane__fields { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 767px) {
  .form-pane { padding: var(--space-6); }
}

/* ---- nav bar (top of page, v2) ----------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-utility-bar);
  background: var(--background-primary);
  border-bottom: 1px solid var(--border-primary);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.nav__logo svg { height: 44px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav__links a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav__links a:hover { color: var(--color-brand-forest); }
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav__phone {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-body-sm);
}
.nav__phone:hover { color: var(--color-brand-forest); }
.nav__cta {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-body-sm);
}
@media (max-width: 1023px) {
  .nav__links { display: none; }
}
@media (max-width: 640px) {
  .nav__phone { display: none; }
  .nav__logo svg { height: 36px; }
}

/* ---- hero service area line (replaces hero__contact block) ---- */
.hero__service-area {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  max-width: 44ch;
  margin-top: var(--space-2);
}

/* ---- Service area icon (added for v2) ---- */
.service-area__icon {
  color: var(--color-brand-forest);
  align-self: center;
  margin-bottom: var(--space-3);
  line-height: 0;
}
.service-area__icon svg { display: block; }

/* ---- Footer socials (added for v2) ---- */
.footer__socials {
  display: inline-flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.footer__socials a:hover {
  background: var(--color-brand-lime);
  color: var(--color-brand-forest);
}
.footer__block a { display: inline-flex; align-items: center; }
.footer__block h4 + p a { color: rgba(255,255,255,0.75); }
.footer__block h4 + p a:hover { color: var(--color-brand-lime); }

/* ---- hero --------------------------------------------------------- */
.hero {
  position: relative;
  /* Layered background: dark scrim on top for headline contrast, then photo,
     then solid forest as the fallback if the photo fails to load. */
  background:
    linear-gradient(rgba(26, 58, 43, 0.72), rgba(26, 58, 43, 0.88)),
    url('../assets/photos/hero-home-lawn.jpg') center/cover no-repeat,
    var(--background-alternative);
  color: var(--text-alternative);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 1023px) {
  .hero__inner { gap: var(--space-7); }
}
@media (max-width: 767px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}
.hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(143, 209, 79, 0.14);
  color: var(--color-brand-lime);
  border: 1px solid rgba(143, 209, 79, 0.4);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  width: fit-content;
}
.hero__headline {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-alternative);
}
.hero__headline .accent { color: var(--text-tagline-lime); }
.hero__subhead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.82);
  max-width: 40ch;
}
.hero__contact { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-body); }
.hero__contact-row {
  display: flex; align-items: center; gap: var(--space-3);
  color: rgba(255, 255, 255, 0.9);
}
.hero__contact-row a { text-decoration: none; color: inherit; font-weight: var(--font-weight-semibold); }
.hero__contact-row a:hover { color: var(--color-brand-lime); }

/* ---- trust bar --------------------------------------------------- */
.trust-bar {
  background: var(--background-secondary);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
@media (max-width: 1023px) { .trust-bar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .trust-bar__grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; align-items: center; gap: var(--space-3); }
.trust-item__icon {
  width: 32px; height: 32px;
  color: var(--color-brand-forest);
  flex-shrink: 0;
}
.trust-item__label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-snug);
}

/* ---- section headers -------------------------------------------- */
.section-header { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header__eyebrow { color: var(--color-brand-leaf); }
.section--dark .section-header__eyebrow { color: var(--color-brand-lime); }

/* ---- solution / guide two-column ----------------------------- */
.solution__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1023px) {
  .solution__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---- plan / steps ------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; gap: var(--space-5); } }
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--background-primary);
}
.section--dark .step {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-alternative);
}
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-lime);
  color: var(--color-brand-forest);
  font-weight: var(--font-weight-extrabold);
  font-family: var(--font-family-display);
}
.step__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}
.step__body { font-size: var(--font-size-body); line-height: var(--line-height-relaxed); }

/* ---- services grid ----------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (max-width: 1023px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-neutral-100);
  overflow: hidden;
}
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.service-card__title { font-family: var(--font-family-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); }
.service-card__outcome { font-size: var(--font-size-body); color: var(--text-secondary); }
.service-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.service-card__list li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
}
.service-card__list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-lime);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ---- differentiators grid ---------------------------------------- */
.differentiators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 767px) { .differentiators { grid-template-columns: 1fr; } }
.diff-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-alternative);
}
.diff-card__title { font-family: var(--font-family-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); }
.diff-card__body { font-size: var(--font-size-body); line-height: var(--line-height-relaxed); }

/* ---- testimonials ------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 1023px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial-card__stars { display: inline-flex; gap: var(--space-1); color: var(--color-brand-lime); }
.testimonial-card__quote { font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); color: var(--text-primary); }
.testimonial-card__author {
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

/* ---- service area ------------------------------------------------- */
.service-area {
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.service-area__list { font-size: var(--font-size-body-lg); color: var(--text-primary); }

/* ---- final CTA --------------------------------------------------- */
.final-cta { background: var(--background-alternative); }
.final-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1023px) { .final-cta__inner { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- footer ------------------------------------------------------- */
.footer {
  background: var(--color-ink);
  color: var(--text-alternative);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-7);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.footer__block h4 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--color-brand-lime);
}
.footer__block a, .footer__block p { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer__block a:hover { color: var(--color-brand-lime); }
.footer__utility {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-4) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--font-size-body-sm);
  color: rgba(255,255,255,0.6);
}
@media (max-width: 640px) { .footer__utility { flex-direction: column; gap: var(--space-2); } }

/* ---- motion patterns --------------------------------------------- */
.motion-fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fade-in var(--duration-slow) var(--ease-decelerate) forwards;
}
@keyframes fade-in {
  to { opacity: 1; transform: translateY(0); }
}

.motion-badge-pulse {
  animation: badge-pulse 3s var(--ease-standard) infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 209, 79, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(143, 209, 79, 0); }
}

/* ---- visually hidden --------------------------------------------- */
.visually-hidden {
  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 --------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -40px; left: 0;
  background: var(--color-brand-forest);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-modal);
  text-decoration: none;
}
.skip-link:focus-visible { top: 0; }