/* ==========================================================================
   site.css — forever-green-lawn-care-missoula-mt, built FROM tokens.
   HARD RULE (house-tech-spec §3): no raw hex/px/rem/font-name literal in
   this file — tokens only, or an @allow-literal comment on the line above.
   Realises brief §5's editorial-stack: headrule+kicker+h2 section heads
   with no numeral (§5.1/§5.6), the hero's DOM order + full-bleed field
   (§5.2/§5.3), the trim-line signature + ambient grass sway (§8), and the
   process column's lowercase-roman counter — the page's only counter.
   ========================================================================== */

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

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

/* Vertical rhythm hook. --section-gap is the only inter-section spacing
   value on this site (brief §5.5: fixed 64px at every breakpoint). */
.section {
  padding-block: var(--section-gap);
}

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

/* Anchor-scroll offset for every in-page jump against the sticky
   expiry-bar + header stack (brief §5.4's 101px sticky-chrome term). */
html {
  scroll-padding-block-start: calc(var(--expiry-height) + var(--header-height) + var(--border-hairline));
}

/* --- Header — brand, collapsible nav, persistent tel: link (copy.md §3).
   Sticky under the sticky preview bar (brief §5.4's arithmetic). --- */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
  z-index: var(--z-header);
  padding-block: 0;
  min-height: var(--header-height);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

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

.site-header__brand {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-emphasis);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.nav-toggle {
  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);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-header__phone {
  flex-shrink: 0;
  order: 3;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-decoration: none;
}

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

.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-family: var(--font-body);
  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 {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* Collapsed state exists only once JS has armed it (progressive
   enhancement — the skeleton's own contract). */
[data-nav-ready] .site-nav[data-nav-open='false'] {
  display: none;
}

[data-nav-ready] .site-nav {
  flex-basis: 100%;
  order: 4;
}

@media (min-width: 40em) {
  [data-nav-ready] .site-nav[data-nav-open='false'] {
    display: block;
  }

  [data-nav-ready] .site-nav {
    flex-basis: auto;
    order: 2;
  }

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

/* --- Buttons --------------------------------------------------------------
   Two roles. --radius-sm is the one hand-cut radius on this site (brief
   §3.2); no shadow anywhere (warm-craft's plate-craft edge, brief §1.1). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  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-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

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

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

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

.btn--quiet:hover,
.btn--quiet:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Form -----------------------------------------------------------------
   One form per site (house-tech-spec §6). POSTs to the endpoint constant in
   main.js; works as a plain HTML POST with JS off; auto-hides when no
   endpoint is configured so a spec site never shows a dead form.          */

.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-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.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);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
}

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);
}

/* Honeypot: present in the DOM for bots, unreachable for humans and
   assistive tech. Not display:none — some bots skip those. */
.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);
}

/* --- 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 a {
  color: inherit;
  text-underline-offset: var(--space-3xs);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent);
}

.site-footer__nap {
  font-style: normal;
  line-height: var(--leading-body);
}

.site-footer__nap strong {
  color: var(--color-ink);
}

/* ==========================================================================
   BRIEF COMPONENTS — brief.md v1 (C3), family warm-craft, archetype
   editorial-stack. Built FROM tokens (spec §3).
   ========================================================================== */

/* --- Section head — the static headrule + small-caps kicker + h2 (brief
   §5.1/§5.5). Deliberately carries NO numeral of any kind — the process
   column below is the page's one and only counter (brief §5.6). --- */

.section-head {
  margin-block-end: var(--space-lg);
}

.section-head__rule {
  inline-size: var(--section-head-rule-width);
  block-size: var(--border-trim);
  margin: 0 0 var(--space-sm);
  background-color: var(--color-accent);
  border: 0;
}

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

.section-head h2 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.section-head__intro {
  margin-block-start: var(--space-xs);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* The h1's one italic accent word (brief §5.2, ref-001) — EB Garamond
   Italic, larch-gold. One word per page, never two. */
.accent-em {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent);
}

/* --- HERO — editorial-stack (brief §5.2/§5.3). DOM order: eyebrow -> h1 ->
   primary CTA -> field -> lead -> facts. Type column caps at 640px, left-
   aligned, only at >=1024; field is container-width/330px-fixed <640,
   full-bleed/16:9 at >=640 (brief §5.3's own table). --- */

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

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

.hero__copy {
  max-width: 100%;
}

.hero__h1 {
  max-width: 100%;
  margin: var(--space-xs) 0 0;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
}

.hero__cta {
  margin: var(--space-sm) 0 0;
}

.hero__field-wrap {
  margin-block-start: var(--space-md);
  padding-inline: var(--layout-gutter);
}

.hero__field {
  position: relative;
  overflow: clip;
  block-size: var(--hero-field-height);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
  background-image: radial-gradient(120% 90% at 30% 15%, var(--color-atmo-1) 0%, var(--color-atmo-3) 100%);
}

.hero__art {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

@media (min-width: 64em) {
  .hero__copy {
    max-width: var(--hero-copy-max);
  }
}

@media (min-width: 40em) {
  .hero {
    padding-block-start: var(--layout-gutter);
  }

  .hero__field-wrap {
    /* Full-bleed break-out to the viewport edge (brief §5.3: "aspect-ratio
       16/9, full-bleed" at >=640). Standard full-bleed-inside-a-container
       technique — 100vw centred via negative margins. Viewport-relative,
       not a design value, so it is not a token candidate. */
    /* @allow-literal: full-bleed break-out is structural (viewport width), not a design value */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    /* @allow-literal: full-bleed break-out is structural (viewport width), not a design value */
    margin-inline: -50vw;
    padding-inline: 0;
  }

  .hero__field {
    block-size: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Signature — "the trim line runs" (brief §8.2). A 2px accent line drawn
   once across the field's own turf/bed boundary on load. pathLength="1"
   normalises stroke-dasharray to a fraction regardless of container
   width — draws correctly with no recomputation (brief §8.1/§8.2). */

.hero__signature {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__sig-path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: var(--border-trim);
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: hero-sig-draw var(--duration-slow) var(--ease-draw) var(--delay-trim) forwards;
}

@keyframes hero-sig-draw {
  to { stroke-dashoffset: 0; }
}

/* Ambient satellites — two grass blades, independent non-synchronised
   loops (brief §8.3, ref-001 physics). transform only, % positioned. */

.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.grass-blade {
  position: absolute;
  inset-block-end: 40%;   /* rooted at the illustration's own turf/bed boundary */
  inline-size: var(--border-thick);
  block-size: var(--space-lg);
  transform-origin: 50% 100%;
}

.grass-blade path {
  fill: none;
  stroke: var(--color-moss);
  stroke-width: var(--border-trim);
  stroke-linecap: round;
}

.grass-blade--1 {
  inset-inline-start: 32%;
  animation: grass-sway-1 var(--loop-blade-1) ease-in-out infinite;
}

.grass-blade--2 {
  inset-inline-start: 69%;
  animation: grass-sway-2 var(--loop-blade-2) ease-in-out infinite;
}

@keyframes grass-sway-1 {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}

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

/* Reduced motion (brief §8.4): every animated element resolves to its
   FINAL state, never its initial one. */
@media (prefers-reduced-motion: reduce) {
  .hero__sig-path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .grass-blade--1,
  .grass-blade--2 {
    animation: none;
    transform: rotate(0deg);
  }
}

.hero__lead {
  margin: var(--space-md) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink);
}

.hero__facts {
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Illustration fills — Builder-built vector placeholder imagery. NO
   IMAGE-GENERATION TOOL WAS AVAILABLE THIS BUILD SESSION (README.md, and
   flagged in the Builder's handoff) — brief §7 specifies AI-generated
   photographic-illustration slots; these hand-built inline SVGs stand in
   rather than an empty <img> or a false generation claim. Every fill is a
   site token — no colour outside brief §3's palette. --- */

.fg-bed        { fill: var(--color-surface); }
.fg-bed-stipple{ fill: var(--color-ink-muted); opacity: 0.10; }
.fg-turf       { fill: var(--color-bg); }
.fg-turf-band  { fill: var(--color-ink); opacity: 0.08; }
.fg-plate-bg   { fill: var(--color-surface); }
.fg-plate-ink  { fill: var(--color-ink-muted); }
.fg-plate-dark { fill: var(--color-ink); }
.fg-plate-mark { fill: var(--color-accent); }
.fg-line-border { stroke: var(--color-border); stroke-width: var(--border-hairline); fill: none; }
.fg-line-ink    { stroke: var(--color-ink-muted); }
.fg-line-dark   { stroke: var(--color-ink); }
.fg-line-mark   { stroke: var(--color-accent); }

/* --- SERVICES [II, LOAD-BEARING] — "What we handle." (brief §6 §II). A
   ruled list, leading accent tick, no cards, no icons, no counter (brief
   §5.6 — a sub-list with its own ornament gets no counter). --- */

.services-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.services-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.services-row__tick {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1;
  color: var(--color-accent);
}

.services-row__body {
  min-width: 0;
}

.services-row__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.services-row__note {
  margin: var(--space-3xs) 0 0;
  color: var(--color-ink-muted);
}

.services-secondary {
  margin: var(--space-lg) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- Closing image strips (brief §7.2 slots 2/3/4) — frame-filling
   material-study plates, 3:1, decorative (alt=""). --- */

.plate-strip {
  position: relative;
  overflow: clip;
  margin-block-start: var(--space-xl);
  aspect-ratio: 3 / 1;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.plate-strip svg {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* --- SEASON STRIP [III] — "Some jobs run with the year." (brief §6 §III).
   Three term/description rows, no counter, no invented dates. --- */

.season-list {
  margin: 0;
  display: grid;
  gap: var(--space-lg);
}

.season-list__term {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.season-list__desc {
  margin: var(--space-3xs) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink);
}

/* --- TRUST STRIP [IV] — "Two things worth knowing." (brief §6 §IV). Two
   plain attributed sentences, never a badge (brief §6 §IV, X1). --- */

.trust-list {
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  max-width: var(--layout-measure);
}

.trust-list p {
  margin: 0;
  color: var(--color-ink);
}

/* --- REVIEWS [V] — "In their own words." (brief §6 §V). Three plain
   attributed quotes, no rating, no count, no platform mark. --- */

.review-list {
  margin: 0;
  display: grid;
  gap: var(--space-lg);
}

.review {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-trim) var(--border-style) var(--color-rule);
  max-width: var(--layout-measure);
}

.review p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink);
}

.review cite {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

/* --- PROCESS [VI] — "What happens after you ask." (brief §6 §VI, §8.2).
   Four lowercase-roman steps — the page's ONE counter — each carrying the
   static top-rule that is the trim-line signature's other job. --- */

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-block-start: var(--border-trim) var(--border-style) var(--color-rule);
}

.process-step:last-child {
  border-block-end: var(--border-trim) var(--border-style) var(--color-rule);
}

.process-step__num {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: var(--text-h3);   /* 20px, fixed at every width — brief §5.6 */
  color: var(--color-accent);
}

.process-step__desc {
  margin: 0;
  color: var(--color-ink);
}

/* --- SERVICE AREA [VII] — "Missoula, Lolo, Florence." (brief §6 §VII). --- */

.service-area__towns {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.service-area__towns strong {
  font-weight: var(--font-weight-display);
}

.service-area__note {
  margin: var(--space-sm) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- FAQ [VIII] — "Questions we get." (brief §6 §VIII). Native
   <details>/<summary>, no JS, keyboard-standard. --- */

.faq-list {
  margin: 0;
  display: grid;
  gap: 0;
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.faq-item {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
  padding-block: var(--space-sm);
}

.faq-item__q {
  cursor: pointer;
  padding-block: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.faq-item__q::-webkit-details-marker {
  color: var(--color-accent);
}

.faq-item__a {
  margin: var(--space-2xs) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- CONTACT [IX] — "Get your free estimate." (brief §6 §IX). --- */

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

.contact-form {
  margin-block-start: var(--space-lg);
}

/* --- THANKS.HTML (copy.md §5, brief §5.4). Never a second living-hero
   moment — one spectacular moment per site, already spent on index.html
   (design-rules §0). --- */

.thanks-section {
  padding-block-start: var(--layout-gutter);
}

.thanks__h1 {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
}

.thanks__body {
  margin: var(--space-md) 0 0;
  max-width: var(--layout-measure);
  color: var(--color-ink);
}

.thanks__facts {
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

@media (min-width: 64em) {
  .thanks-section .container {
    max-width: var(--hero-copy-max);
  }
}