/* ==========================================================================
   site.css — per-site layout & components, built FROM tokens.
   Source: runs/alex-landscaping-and-tree-trimming-service-duluth-mn/brief.md.

   HARD RULE (house-tech-spec §3): no raw hex, no px/rem size literals, no
   font-name literals in this file. Tokens only. The two escape hatches are
   the house breakpoints (48em/64em) and an explicit `@allow-literal: reason`
   comment.
   ========================================================================== */

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

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

/* Vertical rhythm hook (design-rules §7.1). --section-gap is the ONLY value
   setting space between sections: .section's padding-block and the hero's
   padding-block-end are its only two call sites. */
.section {
  padding-block: var(--section-gap);
}

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

/* --- Header (brief §5.1) ---------------------------------------------------
   Non-sticky, in normal flow, single row: wordmark left, tel: link right.
   No nav menu — the brief specifies exactly these two elements. Fixed
   literal sizes only (no clamp) so the row height holds from 320–1440px. */

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

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

/* The full business name (44 characters) plus the phone number cannot both
   fit on one eyebrow-scale line below ~391px — the brief's own arithmetic
   (§5.1) states the header holds "fixed at every width" without allowing for
   this specific name's length. Rather than let it wrap to a second line
   (which would grow the header taller than the brief's stated figure and
   read as an accident, not a design), the wordmark truncates at the
   narrowest widths — the house's own precedented answer to this exact
   tension (the phone, the functional control, never loses room to the
   name). flex-shrink + min-width: 0 is what lets text-overflow apply inside
   a flex child at all. */
.site-header__brand-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header__brand {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
}

.site-header__phone {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  white-space: nowrap;
}

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

/* --- Buttons ----------------------------------------------------------------
   Two roles. --radius-none throughout (brief §4.1: every corner is square). */

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

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

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

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

/* --- Hero (brief §6.2) -------------------------------------------------------
   Single column at every width — editorial-stack never introduces a desktop
   split. --hero-gap is the ONLY gap between stacked hero elements. */

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

.hero__grid > * {
  margin-block-start: var(--hero-gap);
}

.hero__grid > *:first-child {
  margin-block-start: 0;
}

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

/* Rule-line — draws in left-to-right on load, one-time. Becomes the settled
   head-rule reused (statically) at every section boundary below. */
.hero__rule {
  border-top: var(--border-hairline) var(--border-style) var(--color-ink);
  transform-origin: left center;
  animation: hero-rule-drawin var(--duration-drawin) var(--ease-out) forwards;
}

@keyframes hero-rule-drawin {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__h1 {
  margin: 0;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

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

.hero__cta {
  margin-block-start: var(--hero-gap);
}

/* Field — the grade-line device, the site's one living-hero moment (§0).
   Fixed height at every width; full container width. */
.hero__field {
  position: relative;
  height: var(--hero-field-height);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border-muted);
}

.grade-field {
  display: block;
  width: 100%;
  height: 100%;
}

.grade-datum {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 8 8;
  opacity: 0.4;
}

.grade-tick {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
}

.grade-tick--a { animation: grade-tick-fade var(--duration-tick-a) var(--ease-in-out) infinite; }
.grade-tick--b { animation: grade-tick-fade var(--duration-tick-b) var(--ease-in-out) infinite; animation-delay: var(--delay-tick-b); }
.grade-tick--c { animation: grade-tick-fade var(--duration-tick-c) var(--ease-in-out) infinite; animation-delay: var(--delay-tick-c); }
.grade-tick--d { animation: grade-tick-fade var(--duration-tick-a) var(--ease-in-out) infinite; animation-delay: calc(var(--delay-tick-b) + var(--delay-tick-c)); }

@keyframes grade-tick-fade {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

/* Real CSS geometry (not SVG) — see tokens.css note. Positioned to sit on
   the field's first grade-datum line at every width. */
.grade-level {
  position: absolute;
  inset-block-start: var(--grade-level-top);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: var(--grade-level-width);
  height: var(--grade-level-height);
}

.grade-level__body {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
}

.grade-level__bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--grade-level-bubble);
  height: var(--grade-level-bubble);
  margin-block-start: calc(var(--grade-level-bubble) / -2);
  margin-inline-start: calc(var(--grade-level-bubble) / -2);
  display: block;
  background-color: transparent;
  border: var(--border-hairline) var(--border-style) var(--color-ink);
  border-radius: 50%;
  animation: grade-bubble-settle var(--duration-settle) var(--ease-out) forwards;
}

@keyframes grade-bubble-settle {
  from { transform: translateX(calc(var(--grade-level-drift) * -1)); }
  to   { transform: translateX(0); }
}

/* Leaf glyph — icon-fill accent-2 only (brief §2.3), static, no motion. */
.grade-leaf {
  fill: var(--color-accent-2);
  stroke: none;
}

.grade-leaf__stem {
  fill: none;
  stroke: var(--color-accent-2);
  stroke-width: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .hero__rule {
    animation: none;
    transform: scaleX(1);
  }
  .grade-level__bubble {
    animation: none;
    transform: translateX(0);
  }
  .grade-tick--a,
  .grade-tick--b,
  .grade-tick--c,
  .grade-tick--d {
    animation: none;
    opacity: 0.5;
  }
}

.hero__lead {
  margin: 0;
  max-width: var(--hero-lead-measure);
  font-size: var(--text-small);
  font-style: italic;
  color: var(--color-ink-muted);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.hero__facts li::before {
  content: '— ';
  color: var(--color-accent);
}

/* --- Section head-rule (brief §10: "the settled line becomes the static
   head-rule reused at every section boundary below"). Static, no motion. */

#services,
#how-it-works,
#estimate {
  border-top: var(--border-hairline) var(--border-style) var(--color-ink);
}

#services h2,
#how-it-works h2,
#estimate h2 {
  margin: 0;
}

/* --- Services, indexed (brief §6.3) ---------------------------------------- */

.index-group__label {
  margin-block: var(--space-xl) var(--space-sm);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

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

.index-row {
  display: grid;
  grid-template-columns: var(--index-numeral-width) 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border-muted);
}

.index-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--index-numeral-size);
  line-height: var(--leading-tight);
  color: var(--color-accent);
}

.index-row__body {
  display: block;
}

.index-row__name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.index-row__desc {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.pull-quote {
  margin: var(--space-xl) 0 0;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
}

.pull-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-quote);
  color: var(--color-ink);
}

.pull-quote__cite {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-small);
  font-style: normal;
  color: var(--color-ink-muted);
}

/* --- How it works (brief §6.4) ---------------------------------------------
   Arabic-numeral circle badges — visually distinct from the services
   index's italic roman numerals on numeral system, face/posture AND colour
   role (design-rules §5's nested-counter rule). Badge is fixed, never
   fluid. */

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

.process-step {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.process-step__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--process-badge-size);
  height: var(--process-badge-size);
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  line-height: 1;
}

.process-step__label {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

@media (min-width: 48em) {
  .process-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-step {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Get your free estimate (brief §6.5) ------------------------------------
   --color-surface ground distinguishes this section from --color-bg
   sections above/below (house rhythm of alternating grounds). */

.section--surface {
  background-color: var(--color-surface);
}

#estimate h2 + p {
  margin-block-start: var(--space-sm);
}

.form {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  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);
  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);
  font-family: var(--font-body);
  font-size: var(--text-body);
  border: var(--border-hairline) var(--border-style) var(--color-border-muted);
  border-radius: var(--radius-none);
}

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

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

.estimate-fallback {
  margin-block-start: var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

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

/* --- Footer ------------------------------------------------------------------
   Ink ground, bg text (brief §6.6 — contrast pair #8, 13.96:1). Interactive
   links re-point the focus ring at --color-focus-on-band (brief §2.2 note):
   accent-on-ink measures ~2.4:1, below the 3:1 non-text floor. */

.site-footer {
  padding-block: var(--space-xl);
  background-color: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--text-small);
}

.site-footer__nap {
  font-style: normal;
}

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

.site-footer :focus-visible {
  outline-color: var(--color-focus-on-band);
}