/* ==========================================================================
   site.css — Grant Creek Lawns (grant-creek-lawns-missoula-mt).
   Archetype: sidebar-anchor (brief §5). Family: bold-industrial.
   Tokens only — no raw hex/px/font literal outside tokens.css (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 ----------------------------------------------------
   Brief §6: 56px + 1px --color-ink bottom border, --color-bg ground, sticky.
   Left: wordmark. Right: tel:, present at every scroll depth. A quiet in-page
   nav (two links, reusing the exact section headings they jump to) fills the
   house's required nav landmark (house-tech-spec §8) without competing with
   the wordmark/tel for visual weight — the brief describes the header's two
   primary elements, not the landmark scaffolding underneath them. */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--layout-header-height);
  display: flex;
  align-items: center;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-ink);
  background-color: var(--color-bg);
}

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

.site-header__brand {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
}

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

.site-header__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  color: var(--color-ink);
  text-decoration: none;
}

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

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-body-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

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

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

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

[data-nav-ready] .site-nav[data-nav-open='false'] {
  display: none;
}

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

@media (min-width: 48em) {
  [data-nav-ready] .site-nav[data-nav-open='false'] {
    display: block;
  }
  [data-nav-ready] .site-nav {
    flex-basis: auto;
    order: 0;
  }
  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons ---------------------------------------------------------------
   One filled accent CTA shape on this site (brief §0: quote/estimate-shaped
   primary). --radius-sm, Barlow 600, heights fixed by brief §5.4's fold
   arithmetic (52px <1024, 56px ≥1024). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  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);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  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);
}

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

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

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

/* --- Hero — brief §5.4 ------------------------------------------------------
   Stacked, non-overlapping: eyebrow → h1 → primary CTA → field → lead → facts
   line. The field carries no text (design-rules §7.2 rule 1), so nothing on
   it is ever obstructed. */

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

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

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

.hero__title {
  margin: var(--gap-eyebrow-h1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  /* Hard 2-line cap at every declared width (brief §5.4) — the copy is
     written short enough by design; this is a safety backstop, not the
     mechanism. */
  max-inline-size: 100%;
}

.hero__cta {
  margin: var(--gap-h1-cta) 0 0;
}

@media (min-width: 64em) {
  .hero__title {
    margin-block-start: var(--gap-eyebrow-h1-lg);
  }
  .hero__cta {
    margin-block-start: var(--gap-h1-cta-lg);
  }
}

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

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  list-style: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.hero__facts li {
  display: inline-flex;
}

.hero__facts li:not(:last-child)::after {
  content: '\00B7';
  margin-inline-start: var(--space-sm);
  color: var(--color-border);
}

/* --- The living-hero field --------------------------------------------------
   The generated frost-etched mow-stripe plate, 2px ink border. The gauge
   signature and the three frost motes are aria-hidden overlays; the moss
   touch is already baked into the generated asset (brief §7.3/§7.4), so it is
   not a separate live element. */

.hero__field {
  position: relative;
  overflow: hidden;
  margin: var(--space-sm) 0 0;
  block-size: var(--hero-field-height);
  border: var(--border-thick) var(--border-style) var(--color-ink);
  background-color: var(--color-atmo-1);
}

.hero__field img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The gauge — "the needle settles." One-time sweep, 900ms, then holds.
   aria-hidden, pointer-events:none, transform-only, GPU composited. */

.hero__gauge {
  position: absolute;
  inset-block-start: var(--gauge-inset);
  inset-inline-end: var(--gauge-inset);
  inline-size: var(--gauge-size);
  block-size: var(--gauge-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-atmo-1);
  border: var(--border-gauge) var(--border-style) var(--color-ink);
  pointer-events: none;
}

.hero__gauge-tick {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: var(--border-thick);
  block-size: 34%;
  background-color: var(--color-brass);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(-90deg);
  animation: gauge-sweep var(--duration-signature) var(--ease-standard) both;
}

.hero__gauge-hub {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  transform: translate(-50%, -50%);
}

@keyframes gauge-sweep {
  from { transform: translate(-50%, -100%) rotate(-90deg); }
  to   { transform: translate(-50%, -100%) rotate(58deg); }
}

/* Three frost motes — independent, non-synchronised drift loops (17s/22s/27s).
   Positions are percentages of the field so they hold their place across the
   field's fluid height. */

.hero__mote {
  position: absolute;
  inline-size: var(--space-3xs);
  block-size: var(--space-3xs);
  background-color: var(--color-ink);
  opacity: 0.28;
  pointer-events: none;
}

.hero__mote--a { inset-inline-start: 12%; inset-block-start: 46%; animation: drift-a var(--loop-mote-a) ease-in-out infinite; }
.hero__mote--b { inset-inline-start: 38%; inset-block-start: 60%; animation: drift-b var(--loop-mote-b) ease-in-out infinite; }
.hero__mote--c { inset-inline-start: 68%; inset-block-start: 50%; animation: drift-c var(--loop-mote-c) ease-in-out infinite; }

@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--mote-drift-a-x), var(--mote-drift-a-y)); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--mote-drift-b-x), var(--mote-drift-b-y)); } }
@keyframes drift-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--mote-drift-c-x), var(--mote-drift-c-y)); } }

@media (prefers-reduced-motion: reduce) {
  .hero__gauge-tick {
    animation: none;
    transform: translate(-50%, -100%) rotate(58deg);
  }
  .hero__mote--a,
  .hero__mote--b,
  .hero__mote--c {
    animation: none;
  }
}

/* --- Section head — the unnumbered cirque-blue head-rule (brief §5.1 rule 4,
   §6.6). A fixed 40px drawn length: never shrinks below the minimum the
   ornament states, so the dot fallback is never entered. */

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

.section-head__rule {
  display: block;
  inline-size: var(--section-head-rule-width);
  block-size: 0;
  border-top: var(--section-head-rule-thickness) var(--border-style) var(--color-accent);
  margin-block-end: var(--space-md);
}

.section-head__title {
  margin: 0;
  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);
}

/* --- Sidebar-anchor layout (brief §5.1/§5.3) --------------------------------
   <1024: in-flow, stacked. ≥1024: persistent left rail (18rem) beside the
   scrolling content column — the rail's own section IS the shared grid
   spanning services-detail/trust/service-area/contact, so the rail persists
   exactly while "a reader scrolls through §III/§IV/§V's prose to their
   right" (brief §II) and stops at the grid's own bottom, before the footer —
   "not the whole page" (brief §5.1 rule 1). */

.layout-sidebar {
  display: block;
}

@media (min-width: 64em) {
  .layout-sidebar {
    display: grid;
    grid-template-columns: var(--rail-column) 1fr;
    align-items: start;
    gap: var(--section-gap) var(--space-xl);
  }
}

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

@media (min-width: 64em) {
  .layout-sidebar__rail {
    position: sticky;
    inset-block-start: calc(var(--expiry-height, 0px) + var(--layout-header-height) + var(--border-hairline));
    padding-block-start: 0;
  }
}

.layout-sidebar__content {
  display: flex;
  flex-direction: column;
}

.layout-sidebar__content > .section:first-child {
  padding-block-start: 0;
}

/* --- The four read-outs (brief §5.2) ---------------------------------------
   Each row is led by a static instrument dial rather than an arabic numeral —
   never animated, fixed at one of four distinct rotation values. */

.rail {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-surface);
}

.rail__row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.rail__row:first-child {
  border-top: 0;
}

.rail__dial {
  flex: 0 0 auto;
  inline-size: var(--row-height);
  block-size: var(--row-height);
  margin-block-start: var(--space-3xs);
}

.rail__dial-face {
  fill: var(--color-atmo-1);
  stroke: var(--color-ink);
  stroke-width: var(--border-thick);
}

.rail__dial-tick {
  stroke: var(--color-brass);
  stroke-width: var(--border-thick);
  stroke-linecap: round;
}

.rail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

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

.rail__detail {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* --- Data plates (brief §III) — 2px ink border, bg fill, laid flat side by
   side. Never a four-stat counter row (design-rules §4). */

.plates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}

.plate {
  border: var(--border-thick) var(--border-style) var(--color-ink);
  background-color: var(--color-bg);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}

.plate__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
}

.plate__label {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.trust__line {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* --- Reserved gallery plate (brief §6.1) — visibly empty, honest, no image,
   no icon, one line only. Height is carried by generous padding rather than
   a literal box height (no exact figure is stated in the brief). */

.gallery-reserved {
  margin-block-start: var(--space-lg);
  padding: var(--space-2xl) var(--space-md);
  border: var(--border-hairline) dashed var(--color-border);
  background-color: var(--color-surface);
  text-align: center;
}

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

/* --- Plate images (services / trust closing images) ------------------------ */

.plate-image {
  display: block;
  margin-block-start: var(--space-lg);
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.plate-image--trust {
  max-inline-size: var(--plate-image-trust-max);
}

/* --- Form -------------------------------------------------------------------
   One form (brief §V). Fields on --color-surface, 1px ink border, radius
   none, label above every input. */

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

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

.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-sm);
  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-ink);
  border-radius: var(--radius-none);
}

.field__control:focus-visible {
  outline: var(--border-thick) var(--border-style) var(--color-focus);
  outline-offset: var(--space-3xs);
}

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-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 {
  margin-block-start: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

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

.nap {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
  line-height: var(--leading-body);
}

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

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

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-ink);
  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);
  line-height: var(--leading-body);
}

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

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

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

.thanks__title {
  margin: var(--gap-eyebrow-h1) 0 0;
  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);
}

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

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

@media (min-width: 64em) {
  .thanks__title {
    margin-block-start: var(--gap-eyebrow-h1-lg);
  }
}