/* ==========================================================================
   site.css — 3 Elements Landscaping (Asheville, NC)
   Layout archetype: full-bleed-immersive (brief §5). Tokens only — no raw
   hex, px-size or font-name literal appears below (house-tech-spec §3).
   ========================================================================== */

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

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

/* Vertical rhythm hook (brief §6.1). ONE inter-section token, two call
   sites: .section's padding-block and .hero's padding-block-end. */
.section {
  padding-block: var(--section-gap);
  position: relative;
}

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

/* The settled-plumb head-rule (brief §2.8, §8): a single 1px line at the top
   of every section on every page, echoing the hero's cord once it has come
   to rest. Sits inside .container so it spans the content measure rather
   than the full viewport. Stone's own page overrides the colour (§6.5). */
.section__rule {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-ink);
  padding-block-start: 0;
  margin-block-end: var(--space-lg);
}

.section--stone .section__rule,
.page-head--stone .section__rule {
  border-block-start-color: var(--color-warm); /* brief §6.5, this page only */
}

/* --- Eyebrow / caps labels --------------------------------------------------
   Authored in natural case, uppercased here (house-tech-spec §8). */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}

.section__kicker {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-block-end: var(--space-sm);
}

/* The accent word/name — weight-plus-colour, NEVER italic (brief §2.2a, R6). */
.accent-word,
.accent {
  font-family: var(--font-display-strong);
  font-weight: var(--font-weight-display-strong);
  font-style: normal;
  color: var(--color-accent);
}

/* --- Header & navigation ---------------------------------------------------
   Sticky, 56px min-height + 1px border-block-end (brief §6.2). Progressive
   enhancement: with JS off, the nav list is a plain always-visible list and
   the toggle stays [hidden] (main.js reveals and wires it). */

.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-block-end: 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-lead);
  color: var(--color-ink);
  text-decoration: none;
}

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

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

/* QA r3 FIX perf/cls: default-closed pre-48em, no JS gate.
   <noscript> override restores JS-off nav. */
.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

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

/* --- Buttons ----------------------------------------------------------------
   Square corners throughout — --radius-none, R11 (no pill anywhere). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--cta-height);
  padding-inline: 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-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn--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-ink);
  color: var(--color-ink);
  background-color: transparent;
}

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

/* --- HERO — the one living-hero moment (index.html only, brief §5, §7, §8) - */

.hero {
  position: relative;
  overflow: clip;
  padding-block-end: var(--section-gap);
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: var(--z-atmosphere);
  overflow: hidden;
}

.hero__atmosphere picture,
.hero__atmosphere img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* QA round-1 FIX (§7.1a): the short >=45rem hero band shows only ~34% of
     the tall source under `cover`; old `top` cropped the new foreground
     out at 768/1440. 55% keeps the ridge and shows the foreground; no
     change at <45rem, already height-constrained to the full image. */
  object-position: center 55%;
}

/* Two independently-drifting mist bands, per ref-002's layered slow-loop
   physics (brief §8). Non-synchronising by construction: 22s and 27s share
   no small common period. */
.hero__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__mist--1 {
  background: linear-gradient(100deg,
    rgb(250 247 242 / 0%) 0%,
    rgb(250 247 242 / 32%) 45%,
    rgb(250 247 242 / 0%) 75%);
  animation: hero-mist-drift-1 var(--loop-mist-1) ease-in-out infinite alternate;
}

.hero__mist--2 {
  background: linear-gradient(260deg,
    rgb(250 247 242 / 0%) 0%,
    rgb(250 247 242 / 24%) 55%,
    rgb(250 247 242 / 0%) 85%);
  animation: hero-mist-drift-2 var(--loop-mist-2) ease-in-out infinite alternate;
}

@keyframes hero-mist-drift-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sway-distance)); }
}

@keyframes hero-mist-drift-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sway-distance-2)); }
}

.hero__inner {
  position: relative;
  z-index: var(--z-card);
  padding-block-start: var(--section-gap);
}

/* The card: opaque, ALWAYS. R1 — never translucent, never rgba(), no
   backdrop-filter, no shadow (brief §4.4). */
.hero__card {
  background-color: var(--color-bg);
  padding-block-start: var(--hero-inset-top);
  padding-block-end: var(--space-lg);
  padding-inline: var(--space-md);
}

.hero__eyebrow {
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

/* No max-width in `ch` here on purpose: `ch` is the width of the current
   font's own "0" glyph, so a ch-based cap would wrap the headline onto a
   DIFFERENT number of lines the moment the display face swaps in over its
   fallback — a font-swap-triggered reflow, not merely a metrics mismatch.
   The hero card's own padding and the container width already narrow this
   enough to wrap the headline at 375px without an extra constraint; the
   house's own `text-wrap: balance` (base.css) evens the break. */
.hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--hero-h1-gap);
}

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

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

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* The field: a transparent window onto the same atmosphere layer, carrying
   the settling plumb bob and the Land/Water/Stone teaser strip. */
.hero__field {
  position: relative;
  z-index: var(--z-field);
  height: var(--field-height);
  margin-block-start: var(--space-md);
}

.hero__plumb {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 12%;
  display: block;
  transform-origin: top center;
  transform: rotate(9deg);
  animation: hero-plumb-settle var(--duration-settle) var(--ease-settle) forwards;
  animation-delay: 200ms;
}

.hero__cord {
  display: block;
  width: var(--border-hairline);
  height: var(--plumb-cord-height);
  background-color: var(--color-ink);
  margin-inline: auto;
}

.hero__bob {
  display: block;
  width: var(--space-sm);
  height: var(--space-md);
  margin-inline: auto;
  background-color: var(--color-warm);
  clip-path: polygon(50% 100%, 0 25%, 20% 0, 80% 0, 100% 25%);
}

@keyframes hero-plumb-settle {
  from { transform: rotate(9deg); }
  to   { transform: rotate(0deg); }
}

.hero__teaser {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
}

.hero__teaser-link {
  flex: 1 1 33.333%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-tap-min);
  text-decoration: none;
}

.hero__teaser-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-block: var(--space-xs);
  background-color: var(--color-bg);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  font-family: var(--font-display-strong);
  font-weight: var(--font-weight-display-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  text-align: center;
  transition: color var(--duration-fast) var(--ease-out);
}

.hero__teaser-link:hover .hero__teaser-chip,
.hero__teaser-link:focus-visible .hero__teaser-chip {
  color: var(--color-accent);
}

/* Reduced motion (brief §8, house-tech-spec §8): both mist loops stop, and
   the cord renders at 0° (true vertical) as its own base CSS state — nothing
   disappears, no JS required to reach the settled frame. R8: no
   `!important`; this wins on source order (it is later) and specificity
   (equal to the rules it overrides), never by weight. */
@media (prefers-reduced-motion: reduce) {
  .hero__mist--1,
  .hero__mist--2 {
    animation: none;
  }

  .hero__plumb {
    animation: none;
    transform: rotate(0deg);
  }
}

/* Two-column hero at 45rem (brief §5.3): card left, field an inset
   atmosphere panel right. */
@media (min-width: 45rem) {
  .hero__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .hero__card {
    flex: 1 1 auto;
    padding-inline: 0;
  }

  .hero__field {
    flex: 0 0 auto;
    inline-size: var(--hero-field-inline);
    margin-block-start: 0;
  }
}

/* --- SERVICES INDEX (§II) — a plain editorial index, never a card grid ---- */

.pillars {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.pillar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  text-decoration: none;
  color: inherit;
}

.pillar-row:hover .pillar-row__link,
.pillar-row:focus-within .pillar-row__link {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

.pillar-row__name {
  font-family: var(--font-display-strong);
  font-weight: var(--font-weight-display-strong);
  font-style: normal;
  font-size: var(--text-h2);
  color: var(--color-accent);
}

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

.pillar-row__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-accent);
}

.services-foot {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-md);
}

@media (min-width: 40em) {
  .pillar-row {
    grid-template-columns: var(--pillar-row-name-col) 1fr auto;
    align-items: baseline;
    gap: var(--space-md);
  }
}

/* --- PROCESS (§III) — plain numbered rows, a DIFFERENT costume than the
   pillar rows' names (brief §6.4's nested-counter check). ------------------ */

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

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

.process-step__num {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

.process-step__name {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  margin: 0 0 var(--space-3xs);
}

.process-step__body {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
  line-height: var(--leading-body);
  margin: 0;
  grid-column: 2;
}

/* --- Form (§IV quote) -------------------------------------------------------
   One form per site (house-tech-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-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-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-rule);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-body);
}

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

.quote-contact {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
  margin-block-start: var(--space-md);
}

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

/* --- SERVICE PAGES (land / water / stone) — static head, no living hero --- */

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

.page-head__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
}

.page-head__lead p {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink);
  max-width: var(--layout-measure);
  margin: 0 0 var(--space-sm);
}

/* Shared with thanks.html and buy.html's plain prose blocks. */
.page-head__body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.buy__terms,
.buy__terms-links {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.buy__terms-links a,
.buy__terms a {
  color: var(--color-ink);
}

.page-figure {
  margin: var(--space-lg) 0 0;
}

.page-figure picture,
.page-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-head__cta {
  margin: var(--space-lg) 0 0;
}

.cta-band {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.cta-band__phone {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  color: var(--color-ink-muted);
}

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

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

.site-footer {
  padding-block: var(--section-gap);
  border-block-start: 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);
  margin: 0 0 var(--space-md);
}

.site-footer__nap strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  display: block;
  margin-block-end: var(--space-2xs);
}

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

.site-footer__line {
  display: block;
}

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

.site-footer__nav a {
  color: var(--color-ink);
  text-decoration: none;
}

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

/* --- Thanks / Buy page shells ----------------------------------------------- */

.thanks-actions,
.buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  /* @allow-literal: the standard visually-hidden clip box is not a design value */
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}