/* ==========================================================================
   site.css — Earth Friendly Lawn Care, Traverse City MI.
   Family quiet-premium, archetype annotated-column ("the seed settles").
   Every value below is var(--token) — no raw hex/px/font literals
   (house-tech-spec §3). Two escape hatches: the house breakpoints and an
   explicit @allow-literal comment.
   ========================================================================== */

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

/* Brief §5.3: the container is fluid (gutter only) below 1024 and caps at
   --layout-container (640px), centred, from 1024 up — "a narrow measure,
   matching the archetype's single restrained column." */
.container {
  width: 100%;
  padding-inline: var(--layout-gutter);
}

@media (min-width: 64em) {
  .container {
    max-width: var(--layout-container);
    margin-inline: auto;
  }
}

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

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

/* --- Header & navigation -------------------------------------------------
   Brief §6: wordmark + phone link only, no persistent nav, no toggle
   (§5.1 rule 5). The <nav> landmark stays and wraps the header's one
   control — house-tech-spec §8 requires the landmark; a label would be a
   string nobody wrote, so it is omitted (only one nav on the page). Height
   fixed to 56px content + 1px border = 57px total (brief §5.5's sticky-
   chrome arithmetic: 44 + 56 + 1 = 101px). */

.site-header {
  box-sizing: border-box;
  block-size: calc(var(--bar-height) + var(--border-hairline));
  display: flex;
  align-items: center;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
  z-index: var(--z-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-header__brand {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
  color: var(--color-ink);
  text-decoration: none;
}

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

.site-header__nav {
  display: flex;
  align-items: center;
}

.site-header__tel {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* --- Buttons --------------------------------------------------------------
   Radius none, brief §3.2. */

.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-none);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-eyebrow);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* WCAG 1.4.11 non-text contrast: the accent fill measures 2.99:1 against the
   page ground (brief §4.3 row 11 — computed and recorded there as a text-
   contrast fail, never used as text; the same number also fails the
   separate 3:1 control-boundary floor for a borderless filled control). A
   hairline border in --color-border (ink-muted, 7.17:1 against bg, brief §4.1
   row 2) gives the control a boundary that clears 1.4.11 without touching
   the accent fill or the accent-ink text pass (row 5, 4.73:1) the brief
   fixed. */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-border);
}

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

/* --- Eyebrow ---------------------------------------------------------------
   Shared across the hero and thanks.html (brief §6 §I, copy.md §2). */

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}

/* --- Hero — §I hero-quote, brief §5.5 ------------------------------------- */

.hero {
  padding-block-start: var(--hero-pad-top);
  padding-block-end: var(--section-gap);
}

@media (min-width: 64em) {
  .hero {
    padding-block-start: var(--hero-pad-top-lg);
  }
}

.hero__rule {
  width: var(--space-lg);
  height: var(--border-hairline);
  background-color: var(--color-accent);
  margin-block-end: var(--hero-rule-margin);
  border: 0;
}

.hero__eyebrow {
  margin-block-end: var(--space-sm);
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--hero-h1-cta-gap);
  text-wrap: balance;
}

.hero-h1__accent {
  color: var(--color-accent-text);
}

.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-cta-secondary-gap);
  margin-block-end: var(--hero-cta-field-gap);
}

.hero__tel {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* --- The living-hero field — "the seed settles" (brief §7, §8) ------------
   A generated turf-and-seedling image fills the field; two CSS radial washes
   sit on top of it (the tile's own top-down white wash, plus a new lower
   warm wash anchored toward the turf band); four independent, non-
   synchronised inline-SVG satellites (seed, two plates, the new root
   tendril) sit above that. Fixed height per regime (brief §5.2) so the field
   never shifts layout while its image loads. */

.hero-field {
  position: relative;
  height: var(--hero-field-height);
  overflow: hidden;
}

@media (min-width: 64em) {
  .hero-field {
    height: var(--hero-field-height-lg);
  }
}

.hero-field__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-field__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--color-atmos-light) 55%, transparent), transparent 55%),
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--color-atmos-warm) 22%, transparent), transparent 60%);
}

.hero-field__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sat-seed {
  animation: eflc-bob var(--orbit-seed) var(--ease-in-out) infinite;
  transform-origin: var(--sat-seed-origin);
}

.sat-plate1 {
  animation: eflc-drift-a var(--orbit-plate1) var(--ease-in-out) infinite;
}

.sat-plate2 {
  animation: eflc-drift-b var(--orbit-plate2) var(--ease-in-out) infinite;
}

.sat-tendril {
  animation: eflc-sway var(--orbit-tendril) var(--ease-in-out) infinite;
  transform-origin: var(--sat-tendril-origin);
}

@keyframes eflc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--sat-bob-distance)) rotate(2deg); }
}

@keyframes eflc-drift-a {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50%      { opacity: 0.75; transform: translateX(var(--sat-drift-a-distance)); }
}

@keyframes eflc-drift-b {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 0.6; transform: translateX(var(--sat-drift-b-distance)); }
}

@keyframes eflc-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* Brief §8.3: reduced motion holds every satellite at its settled/mid-point
   state — never a fully collapsed one — and both wash layers stay fully
   rendered (they are not animated to begin with). No !important: this rule
   sits at the same specificity as the base one and wins on source order
   (house-tech-spec §12). */
@media (prefers-reduced-motion: reduce) {
  .sat-seed {
    animation: none;
    transform: translateY(var(--sat-bob-settled));
  }

  .sat-plate1 {
    animation: none;
    opacity: 0.6;
  }

  .sat-plate2 {
    animation: none;
    opacity: 0.45;
  }

  .sat-tendril {
    animation: none;
    transform: rotate(1deg);
  }
}

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

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
}

.hero__fact-value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.hero__fact-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Section heads ---------------------------------------------------------
   Prata 400 throughout (brief §6, every h2). */

.section__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}

.section__lead {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
  margin: 0 0 var(--space-lg);
}

/* --- The row-list device ---------------------------------------------------
   The archetype's one enumeration idiom (brief §5.1 rule 3): a small
   accent-fill tick, an uppercase accent-text tag, one hairline-divided
   sentence, no numeral, no icon, no card. Reused, unmodified, for services
   (§II), the combined trust/reviews device (§IV) and process (§V) — "one
   visual system, not two dressed alike" (design-rules §5). */

.row-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row-list__item {
  position: relative;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-hairline);
}

.row-list__item:first-child {
  border-top: 0;
}

.row-list__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--row-tick-top);
  width: var(--row-tick-width);
  height: var(--border-hairline);
  background-color: var(--color-accent);
}

/* The trust device (§IV) is the archetype's own representative section and
   keeps the tile's own row padding (17.6px = 1.1rem); services and process
   (§II, §V) share the same component at the house row padding (1rem). */
.row-list--trust .row-list__item {
  padding-block: var(--row-trust-padding);
}

.row-list__tag {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2xs);
}

.row-list__item p {
  margin: 0;
  max-width: var(--layout-row-measure);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* --- Season strip — §III season-strip --------------------------------------
   Three honest windows, spring/summer/fall only. The card matching the
   current calendar month (computed client-side by main.js) is the only one
   whose accent tint ever fills; the rest stay flat (brief §6 §III). With JS
   off, or before JS runs, every card renders flat and equally — no card is
   silently "missing" its highlight, it is simply undecided. */

.season-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.season-card {
  padding: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-hairline);
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.season-card[data-current='true'] {
  background-color: var(--color-accent);
}

.season-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
}

.season-card[data-current='true'] .season-card__title {
  color: var(--color-accent-ink);
}

.season-card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

.season-card[data-current='true'] p {
  color: var(--color-accent-ink);
}

/* --- Gallery — reserved, empty (§VII) ---------------------------------------
   A single short, light-weight strip — no standard .section padding, no
   image (brief §6 §VII). */

.gallery-strip {
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-hairline);
}

.gallery-strip p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

/* --- FAQ — native <details>/<summary> (§VIII) ------------------------------- */

.faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  border-top: var(--border-hairline) var(--border-style) var(--color-hairline);
}

.faq-item:last-child {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-hairline);
}

.faq-item summary {
  padding-block: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  cursor: pointer;
}

.faq-item summary::marker {
  color: var(--color-accent);
}

.faq-item p {
  margin: 0 0 var(--space-sm);
  max-width: var(--layout-measure);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

/* --- Form -----------------------------------------------------------------
   One form per site (spec §6). */

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

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

.field__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  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-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-none);
}

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

.field__hint {
  font-family: var(--font-body);
  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-family: var(--font-body);
  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);
}

.contact__secondary {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
}

.contact__secondary a {
  color: var(--color-ink);
}

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

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

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

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

.site-footer p {
  margin: var(--space-sm) 0 0;
}

/* --- Thanks page ------------------------------------------------------- */

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.thanks p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-sm);
}