/* Local Lawn Care of Forney
   ------------------------------------------------------------------
   No web fonts, no external assets. Every rule here is served from
   this repository so the site cannot go blank when another vendor is
   cancelled.

   Media slots (.slot) are sized containers that already hold their
   aspect ratio. A photograph or the owner's video drops straight in
   without the page being redesigned around it.
   ------------------------------------------------------------------ */

:root {
  --bg: #faf9f5;
  --panel: #ffffff;
  --ink: #16211c;
  --muted: #4f5f57;
  --line: #dde3dd;
  --green-deep: #123f26;
  --green: #16713f;
  --green-bright: #1c8b4d;
  --green-soft: #eaf3ec;
  --green-tint: #f2f7f2;
  --measure: 66ch;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(18, 63, 38, .06), 0 8px 24px rgba(18, 63, 38, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(1.85rem, 5.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }
a { color: var(--green); }

.wrap {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-deep);
  color: #fff;
  padding: .7rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 249, 245, .96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.head-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}

.wordmark {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--green-deep);
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.head-call {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Navigation is a visible row, never a menu that hides the way to book. */
.nav {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.nav ul {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block;
  white-space: nowrap;
  padding: .7rem .8rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--green-deep); }
.nav a[aria-current="page"] {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.35rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-call {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-call:hover { background: var(--green-deep); }
.btn-sm { padding: .5rem .9rem; font-size: .92rem; }
.btn-ghost {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--green); }

/* ---------- first screen ---------- */

.hero {
  padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(1.75rem, 4vw, 3rem);
}
.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 { margin-bottom: .45em; }
.hero .lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 1.1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.chips li {
  background: var(--green-soft);
  color: var(--green-deep);
  border: 1px solid #cfe3d5;
  border-radius: 999px;
  padding: .32rem .75rem;
  font-size: .87rem;
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}
.hero-cta .btn-call { font-size: 1.1rem; padding: .95rem 1.6rem; }
.cta-note {
  font-size: .9rem;
  color: var(--muted);
  margin: .7rem 0 0;
}

/* The media slot. Holds the owner's video when there is one; a
   photograph until then. Sized now so nothing has to move later. */
.slot {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, var(--green-deep), var(--green));
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}
.slot > img,
.slot > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot-fallback { color: #fff; }
.slot-fallback strong {
  display: block;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.slot-fallback span {
  display: block;
  margin-top: .45rem;
  font-size: .88rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #bfe0cb;
}

/* ---------- sections ---------- */

.band { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.band-tint { background: var(--green-tint); border-block: 1px solid var(--line); }
.band-head { max-width: var(--measure); margin-bottom: 1.5rem; }

.quote {
  max-width: var(--measure);
  margin: 0;
  padding: 1.25rem 0 1.25rem 1.35rem;
  border-left: 4px solid var(--green-bright);
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  color: var(--ink);
}
.quote p:last-child { margin-bottom: 0; }

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}
.card:hover { border-color: var(--green-bright); }
.card h3 { color: var(--green-deep); margin-bottom: .35em; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }
.card .more {
  display: inline-block;
  margin-top: .7rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--green);
}

/* ---------- article pages ---------- */

.article { padding: clamp(1.5rem, 4vw, 2.75rem) 0 0; }
.article-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .4em; }

.aside {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .aside { position: sticky; top: 130px; }
}
.aside h2 { font-size: 1.15rem; }
.aside p { font-size: .95rem; color: var(--muted); }
.aside .btn { width: 100%; }

.note {
  max-width: var(--measure);
  background: var(--green-soft);
  border: 1px solid #cfe3d5;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: .96rem;
  color: var(--green-deep);
}
.note p:last-child { margin-bottom: 0; }
.note strong { display: block; margin-bottom: .2em; }

/* ---------- the one thing to press ---------- */

.ask { text-align: left; }
.ask-inner {
  background: var(--green-deep);
  color: #fff;
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 800px) {
  .ask-inner { grid-template-columns: 1fr auto; }
}
.ask-inner h2 { color: #fff; margin-bottom: .35em; }
.ask-inner p { color: #cfe4d6; margin: 0; max-width: 46ch; }
.ask-inner .btn-call {
  background: #fff;
  color: var(--green-deep);
  font-size: 1.1rem;
  padding: .95rem 1.6rem;
}
.ask-inner .btn-call:hover { background: #d8efe0; }
.ask-links {
  margin-top: .9rem;
  font-size: .95rem;
}
.ask-links a { color: #a9dcbd; }

/* ---------- form ---------- */

.form { max-width: 34rem; }
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .3rem;
}
.field .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: .88rem;
}
.field input,
.field textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #c6cfc7;
  border-radius: var(--radius);
}
.field textarea { min-height: 8rem; resize: vertical; }
.consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  font-size: .95rem;
}
.consent input { margin-top: .28rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.form .btn-call { width: 100%; }

.sent {
  background: var(--green-soft);
  border: 1px solid #cfe3d5;
  border-left: 4px solid var(--green-bright);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  color: var(--green-deep);
  font-weight: 600;
}
[hidden] { display: none !important; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-list li { margin-bottom: .85rem; }
.contact-list .k {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ---------- footer ---------- */

.site-foot {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background: var(--green-deep);
  color: #cfe4d6;
  padding: 2.25rem 0 2rem;
  font-size: .95rem;
}
.foot-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.site-foot h2 {
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8fc7a5;
  margin-bottom: .7rem;
}
.site-foot a { color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .4rem; }
.foot-bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .87rem;
  color: #9dc6ac;
}

/* ---------- the call button that is always there ---------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(250, 249, 245, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.callbar .btn-call { width: 100%; font-size: 1.08rem; padding: .9rem 1rem; }

@media (max-width: 899px) {
  .callbar { display: block; }
  body { padding-bottom: 5.25rem; }
  .head-call { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}