/* site.css — AA Lawn Maintenance Services (Dayton, OH). Archetype
   route-stack (brief §4): every section below the hero is a bordered
   "ticket" card (ref-008's line-list logic); the hero's crew/status
   fields and stamp are NOT repeated elsewhere — only the card frame and
   label typography (Karla 600, tracked) recur, on the roster items and
   the How It Works word-ordinals. Tokens only, no raw literals (spec §3). */

/* --- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--section-gap);
}

.measure {
  max-width: var(--layout-measure);
}

/* --- Header & navigation ---------------------------------------------------
   Unchanged from the house pattern (progressive enhancement: JS-off nav is
   a plain always-visible list; the toggle ships hidden). */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-inline-end: var(--nav-toggle-reserve); /* clears the absolutely-positioned .nav-toggle below 48em — README "second CLS source" */
}

@media (min-width: 48em) {
  .site-header__inner {
    padding-inline-end: 0;
  }
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

@media (min-width: 48em) {
  .site-header__brand {
    font-size: var(--text-h3);
  }
}

/* Absolute, out of flex flow: main.js reveals this on DOMContentLoaded by
   clearing `hidden`, and in normal flow that reveal added a row to the
   header post-paint (README "second CLS source"). Out of flow, its reveal
   changes nothing about the row the wordmark sits in. */
.nav-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* QA r3 FIX perf/cls precedent, kept: closed is the plain CSS default below
   48em with no JS gate, so there is no post-paint collapse race. JS-off
   visitors get the nav back via the <noscript> style override in
   @shared:head-boilerplate. */
.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background-color: var(--color-ink);
}

.btn--quiet {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

/* --- Eyebrow -----------------------------------------------------------
   Label typography (Karla 600, tracked-wide, ink-muted — brief §6's
   per-element table: "accent-ink-on-bg not used here, set in ink-muted").
   Natural case, no forced text-transform (house precedent, spec §8). */

.eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

/* --- Hero — brief §4.4/§5/§7. Radial atmosphere behind the whole section;
   eyebrow/H1/CTA/lede sit over it directly (pair 1 on --color-bg binds). */

.hero {
  padding-block-start: 0; /* brief §4.4: eyebrow starts at the hero's top, right after the sticky stack */
  padding-block-end: var(--section-gap);
  background-image: radial-gradient(
    ellipse 70% 60% at 50% 20%,
    color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)) 0%,
    var(--color-bg) 70%
  );
}

.hero__headline {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-hero);
}

.hero__accent {
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent);
}

.hero__cta-row {
  margin: 0 0 var(--space-md); /* brief §4.4 */
}

.hero__call-link {
  margin: 0 0 var(--space-2xs); /* brief §4.4 */
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.hero__call-link a {
  text-underline-offset: var(--space-3xs);
}

.hero__lede {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* The field: turf-band + route-ticket + stamp + sprig. Fixed height at
   every breakpoint (brief §4.4/§5 — a stated target, not computed against
   variable content). */
.hero__field {
  position: relative;
  height: var(--hero-field-height);
  margin-block-end: var(--space-xs);
}

.hero__turf {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--hero-turf-height);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.hero__turf picture,
.hero__turf img {
  width: 100%;
  height: 100%;
}

.hero__turf img {
  object-fit: cover;
}

.hero__facts {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Route-ticket card (brief §5.2) — the proof device, capped at exactly
   three fields. No fourth field is ever added. */

.hero__ticket {
  position: absolute;
  inset-block-start: var(--hero-ticket-top);
  inset-inline-start: var(--hero-ticket-left);
  width: min(var(--hero-ticket-width), calc(100% - 2 * var(--layout-gutter)));
  min-width: var(--hero-ticket-min-width);
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  animation: hero-sway var(--loop-ticket) var(--ease-in-out) var(--loop-ticket-delay) infinite;
  transform-origin: 50% 100%;
}

.hero__ticket-fields {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
}

.hero__ticket-field {
  display: flex;
  gap: var(--space-3xs);
  font-size: var(--text-small);
}

.hero__ticket-field dt {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  letter-spacing: var(--tracking-wide);
}

.hero__ticket-field dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  color: var(--color-ink-muted);
}

/* Stamp (brief §5.3): source attribution only, static from first paint, no
   number — distinct job from the ticket's own Status field. */
.hero__stamp {
  position: absolute;
  inset-block-start: var(--hero-stamp-top);
  inset-inline-end: var(--hero-stamp-right);
  width: var(--hero-stamp-size);
  height: var(--hero-stamp-size);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-hairline) var(--border-style) var(--color-rust);
  border-radius: var(--radius-pill);
  transform: rotate(var(--hero-stamp-rotate));
  font-family: var(--font-body);
  font-size: var(--hero-stamp-text-size);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  text-align: center;
  line-height: var(--leading-tight);
}

/* One-job sprig (brief §5.4): "the one job, tended" — a distinct job from
   the turf-band's general anchor atmosphere. */
.hero__sprig {
  position: absolute;
  inset-block-end: var(--hero-sprig-bottom);
  inset-inline-end: var(--hero-sprig-right);
  width: var(--hero-sprig-width);
  height: var(--hero-sprig-height);
  background-color: var(--color-accent);
  border-radius: var(--shape-leaf);
  animation: hero-sway var(--loop-sprig) var(--ease-in-out) var(--loop-sprig-delay) infinite;
  transform-origin: 50% 100%;
}

@keyframes hero-sway {
  0%, 100% { transform: rotate(calc(var(--sway-angle) * -1)); }
  50% { transform: rotate(var(--sway-angle)); }
}

/* prefers-reduced-motion (spec §8, brief §8 — no exceptions): freeze both
   at their settled mid-tilt position. base.css's blanket --duration-*
   collapse does not reach --loop-ticket/--loop-sprig, since those are
   brief-specific tokens, so the freeze is explicit here. */
@media (prefers-reduced-motion: reduce) {
  .hero__ticket,
  .hero__sprig {
    animation: none;
    transform: rotate(0deg);
  }
}

/* --- Route-stack card frame (brief §4.1) — recurs on every section below
   the hero: a bordered box, ref-008's line-list logic as the page's
   structural idiom. */

.card {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
}

.card h2 {
  margin-block-start: 0;
  font-size: var(--text-h2);
}

.card__figure {
  margin: 0 0 var(--space-md);
}

.card__figure picture,
.card__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.card__closing {
  margin-block-start: var(--space-md);
  margin-block-end: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

/* --- Who We Serve roster (brief §4.2) — leaf dot marks, distinct from
   every other section's counter system. Each item is styled with the
   ticket's own label typography (Karla 600, tracked) — a self-labeled
   "field" with no separate value, ref-008's logic reused rather than a
   fourth kind of list mark invented. */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--roster-col-min), 1fr));
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
}

.roster__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
}

.roster__mark {
  flex: none;
  inline-size: var(--roster-mark-width);
  block-size: var(--roster-mark-height);
  background-color: var(--color-accent);
  border-radius: var(--shape-leaf);
}

/* --- One Call, Kept: review card + ticket echo (brief §5.2/§8's
   exactly-once rating discipline — the "5.0 · 1 Google review" label lives
   ONLY in .review__rating below, nowhere else on the site). */

.review {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.review__figure {
  margin: 0;
  max-width: var(--review-figure-width);
}

.review__figure picture,
.review__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.review__quote {
  margin: 0 0 var(--space-sm);
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.review__quote p {
  margin: 0;
}

.review__attribution {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.review__rating {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
}

.ticket-echo {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding: var(--space-sm);
  background-color: var(--color-bg);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  max-width: var(--ticket-echo-width);
}

.ticket-echo__field {
  display: flex;
  gap: var(--space-3xs);
  font-size: var(--text-small);
}

.ticket-echo__field dt {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  letter-spacing: var(--tracking-wide);
}

.ticket-echo__field dd {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-muted);
}

@media (min-width: 40em) {
  .review {
    grid-template-columns: var(--review-figure-width) 1fr;
    align-items: start;
  }
}

/* --- How It Works (brief §4.1 row 5) — each step is its own mini "ticket
   in the stack," the word-ordinal styled as the card's label (Karla 600,
   distinct from every other section's counter system, brief §4.2). */

.steps {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  padding: var(--space-md);
}

.steps__ordinal {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.steps__label {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-h3);
}

.steps__item p:last-child {
  margin-block-end: 0;
  color: var(--color-ink-muted);
}

.steps__item a {
  color: var(--color-ink);
  text-underline-offset: var(--space-3xs);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Final CTA band + form --------------------------------------------- */

.card h3 {
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  font-size: var(--text-h3);
}

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-bg);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* --- FAQ (brief §4.1 row 7) — disclosure marker (+/-), no numeral, no dot
   mark (brief §4.2's third distinct counter system on this page). Native
   <details>/<summary>, so it works fully with JS off. */

.faq {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.faq__item {
  padding: var(--space-md) var(--space-lg);
}

.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  flex: none;
  color: var(--color-accent);
  font-weight: var(--font-weight-body-strong);
}

.faq__item[open] .faq__question::after {
  content: '\2212';
}

.faq__answer {
  margin: var(--space-sm) 0 0;
  color: var(--color-ink-muted);
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.site-footer a {
  color: var(--color-ink);
  text-underline-offset: var(--space-3xs);
}

.site-footer__nap {
  margin: 0 0 var(--space-sm);
  font-style: normal;
  color: var(--color-ink);
}