/* ==========================================================================
   site.css — moores-landscaping-knoxville-tn, built FROM tokens.
   HARD RULE (house-tech-spec §3): no raw hex/px/rem/font-name literal in
   this file — tokens only. Shell adapted per brief §4 section 1 (no nav
   items — wordmark + tel: link only); components below per this brief's
   editorial-stack archetype (design-rules §7).
   ========================================================================== */

/* --- 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 §4: fixed 64px at every breakpoint, never stepped). */
.section {
  padding-block: var(--section-gap);
}

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

/* Anchor-scroll offset for every in-page jump (the hero CTA, the final
   section's own CTA) against the sticky expiry bar + header stack (brief
   §5's 101px sticky-chrome term). One rule, native browser behaviour,
   rather than a scroll-margin on every possible target. */
html {
  scroll-padding-block-start: calc(var(--expiry-height) + var(--header-height) + var(--border-hairline));
}

/* --- Header — brief §4 section 1: wordmark + tel: link only, no nav items
   (copy.md). Sticky, below the sticky expiry bar (preview.css's override). --- */

.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;
  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);
  font-style: italic;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.site-header__phone {
  flex-shrink: 0;
  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);
}

/* --- Buttons --------------------------------------------------------------
   Two roles, no more. Radius is --radius-none throughout (brief §2: "hard
   edges ... no rounded corners on the CTA"); no shadow anywhere.          */

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

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

/* ==========================================================================
   BRIEF COMPONENTS — brief.md v1 (C3 PASS), family quiet-premium,
   archetype editorial-stack. Built FROM tokens (spec §3): no raw literal
   outside tokens.css or an @allow-literal line.
   ========================================================================== */

/* --- Section head — the static head-rule + heading (brief §7: "the joined
   rule then becomes the static head-rule of every section below"). A
   single joined gold rule, no embedded text — copy.md gives no per-section
   eyebrow string, so none is invented. --- */

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

.section-head__rule {
  inline-size: var(--space-xl);
  block-size: var(--border-trim);
  margin: 0 0 var(--space-md);
  background-color: var(--color-line);
  border: 0;
}

.section-head h2 {
  font-size: var(--text-h2);
  font-style: italic;
}

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

/* The H1's and every h2's single differentiator/accent word (brief §1,
   §3): italic Cormorant, pine. The direction's one emphasis device —
   never carried by italic body copy (brief §3: "No italic Lora ships"). */
.accent-em {
  font-style: italic;
  color: var(--color-accent);
}

/* --- HERO — editorial-stack (brief §4 section 2, §5). Strict single
   column at every width: eyebrow → h1 → primary CTA → field, house DOM
   order, no reordering at any breakpoint (ref-011's collage caution,
   honoured literally). --- */

.hero {
  padding-block-start: var(--space-md);
  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-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.hero__h1 {
  max-width: var(--hero-copy-max);
  margin-block-start: var(--space-xs);
  font-size: var(--text-display);
  font-style: normal;
}

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

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

.hero__field picture,
.hero__field img {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero__field img {
  object-fit: cover;
}

@media (min-width: 48em) {
  .hero {
    padding-block-start: var(--space-2xl);
  }

  .eyebrow {
    margin-block-start: 0;
  }

  .hero__h1 {
    margin-block-start: var(--space-sm);
  }

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

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

/* Signature — "the partner line." Two thin rules draw in from either edge
   of the field and meet at centre, once, on load (brief §7). Confined to
   the hero; the joined rule then repeats, static, as every section's own
   head-rule above. */

.hero__signature {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 38%;
  z-index: 1;
  pointer-events: none;
}

.hero__sig-line {
  position: absolute;
  inset-block-start: 0;
  block-size: var(--border-trim);
  background-color: var(--color-accent);
}

.hero__sig-line--l {
  inset-inline-start: 0;
  inline-size: 50%;
  transform-origin: 0 50%;
  animation: hero-sig-join-l var(--duration-signature) var(--ease-standard) both;
}

.hero__sig-line--r {
  inset-inline-end: 0;
  inline-size: 50%;
  transform-origin: 100% 50%;
  animation: hero-sig-join-r var(--duration-signature) var(--ease-standard) both;
}

@keyframes hero-sig-join-l {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes hero-sig-join-r {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Ambient satellites — three independent, non-synchronised seed-mote
   drift loops plus one stem-sway loop, all confined to the hero field
   (brief §7, ref-001 physics adaptation). */

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

.mote {
  position: absolute;
  inline-size: var(--mote-size);
  block-size: var(--mote-size);
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.6;
}

.mote--1 { inset-inline-start: 17%; inset-block-start: 28%; animation: mote-drift-a var(--duration-mote-1) var(--ease-standard) infinite; }
.mote--2 { inset-inline-start: 59%; inset-block-start: 22%; animation: mote-drift-b var(--duration-mote-2) var(--ease-standard) infinite; }
.mote--3 { inset-inline-start: 85%; inset-block-start: 32%; animation: mote-drift-c var(--duration-mote-3) var(--ease-standard) infinite; }

@keyframes mote-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--space-2xs), calc(var(--space-2xs) * -1)); }
}

@keyframes mote-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(calc(var(--space-2xs) * -1), calc(var(--space-xs) * -1)); }
}

@keyframes mote-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--space-3xs), calc(var(--space-3xs) * -1)); }
}

.stem {
  position: absolute;
  inset-inline-start: 31%;
  inset-block-end: 42%;
  inline-size: var(--border-trim);
  block-size: var(--stem-height);
  background-color: var(--color-accent);
  opacity: 0.7;
  transform-origin: 50% 100%;
  animation: stem-sway var(--duration-stem-sway) var(--ease-standard) infinite;
}

@keyframes stem-sway {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 3deg; }
}

/* Reduced motion (brief §7): the two signature rules park already joined
   at centre — the rest state matches the animated end-state, so nothing
   visually disappears. Motes and the stem park at rest. */
@media (prefers-reduced-motion: reduce) {
  .hero__sig-line--l,
  .hero__sig-line--r {
    animation: none;
    transform: scaleX(1);
  }

  .mote {
    animation: none;
    transform: none;
  }

  .stem {
    animation: none;
    rotate: 0deg;
  }
}

/* --- SERVICES INDEX [LOAD-BEARING] — "What We Build" (brief §4 section 3,
   ref-011 adaptation). Arabic 01–05, body face, ink-muted — distinct from
   the process section's roman numerals on all 3 of {system, face, colour}
   (brief §3's nested-counter check). Shared texture behind the list. --- */

.services-index {
  position: relative;
}

.services-index__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
}

.services-index__texture picture,
.services-index__texture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.services-index__texture img {
  object-fit: cover;
}

.services-list {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.services-row:last-child {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.services-row__num {
  padding-block-start: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.services-row__body {
  display: block;
}

.services-row__name {
  margin: 0;
  font-size: var(--text-h3);
  font-style: italic;
}

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

/* --- PROCESS — "How We Work Together" (brief §4 section 4). Roman
   numerals I–IV, display face, italic, accent colour — the section C2
   named as the direction's concrete evidence, built as the page's
   second-heaviest section by content and imagery. --- */

.process-head {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr;
}

.process-head__image {
  inline-size: var(--space-3xl);
  block-size: var(--space-3xl);
  overflow: clip;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.process-head__image picture,
.process-head__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.process-head__image img {
  object-fit: cover;
}

@media (min-width: 48em) {
  .process-head {
    grid-template-columns: 1fr auto;
  }
}

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

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
}

.process-step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--color-accent);
}

.process-step__title {
  margin: 0;
  font-size: var(--text-body);
  font-style: normal;
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

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

.process-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: center;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.process-footer__image {
  inline-size: var(--space-2xl);
  block-size: var(--space-2xl);
  overflow: clip;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.process-footer__image picture,
.process-footer__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.process-footer__image img {
  object-fit: cover;
}

.process-footer__text {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* --- ABOUT — "A Partner in the Process" (brief §4 section 5). The
   business's own V-tier voice, quoted directly. --- */

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

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

.about-tenure {
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
  color: var(--color-ink-muted);
}

/* --- SERVICE AREA — "Where We Work" (brief §4 section 6). Plain,
   unnumbered wrapped list of the full 14-town union. Imagery slot 5
   (local-character band) sits behind at low opacity — the anchor's
   "earth and sky" support register, not its "growth" half. --- */

.section--band {
  position: relative;
  isolation: isolate;
}

.service-area__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.24;
}

.service-area__image picture,
.service-area__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.service-area__image img {
  object-fit: cover;
}

.service-area__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg);
  opacity: 0.66;
}

.section--band > .container {
  position: relative;
  z-index: 1;
}

.service-area__list {
  max-width: var(--layout-measure);
  color: var(--color-ink);
}

/* --- FINAL CTA / CONTACT — "Let's Talk Through Your Design" (brief §4
   section 8). Quote form (primary) + phone (secondary). --- */

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

.contact-cta .btn {
  margin-inline-end: var(--space-sm);
}

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

/* --- THANKS.HTML — brief §4 thanks.html section plan; §5's own arithmetic
   table. Never a second living-hero moment (§0 permits exactly one
   spectacular moment per site, already spent on index.html); H1 at
   H2-scale, per §5's own table heading. --- */

.thanks-section {
  padding-block-start: var(--space-xl);
}

.thanks__h1 {
  margin-block-start: var(--space-sm);
  font-size: var(--text-h2);
  font-style: italic;
}

@media (min-width: 48em) {
  .thanks-section {
    padding-block-start: var(--space-2xl);
  }
}