/* ==========================================================================
   site.css — Pro Landscapers (Fargo, ND)
   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 section head-rule (brief §6.1, §8): a single 1px line at the top of
   every section below the hero, echoing the still horizon line once the
   sway settles. Sits inside .container so it spans the content measure. */
.section__rule {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-ink);
  padding-block-start: 0;
  margin-block-end: var(--space-lg);
}

/* base.css's skip-link defaults to --color-accent, text-safe only >=24px
   (brief F3, 3.86:1). Swapped to --color-cta-fill, the brief's own "act"
   pairing at 7.07:1 for white text (F5) — not a new colour decision. */
.skip-link {
  background-color: var(--color-cta-fill);
  color: var(--color-accent-ink);
}

/* --- 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 — weight-plus-colour, NEVER italic (brief §2.2, §2.7, R6). */
.accent-word {
  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);
  border-radius: var(--radius-sm);
  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 (skeleton-wide): 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 ----------------------------------------------------------------
   Rounded rectangle CTA per brief §3.3 (--radius-cta); no pill token exists. */

.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-cta);
  font-family: var(--font-body-strong);
  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 {
  background-color: var(--color-cta-fill);
  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;
  /* Fallback gradient shown before the plate loads or if it fails (brief
     §4.3, §7): the tile's own two-stop gradient, kept as a tokenized ground
     rather than a flat colour. */
  background: linear-gradient(to bottom,
    var(--color-atmosphere-top) 0%,
    var(--color-atmosphere-mid) 55%,
    var(--color-atmosphere-bottom) 100%);
}

.hero__atmosphere picture,
.hero__atmosphere img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

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

.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);
  border-radius: var(--radius-chip);
  font-family: var(--font-body-strong);
  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 atmosphere layer, carrying the
   shelterbelt row and the Design/Plant/Build teaser (R1: chips opaque). */
.hero__field {
  position: relative;
  z-index: var(--z-field);
  height: var(--field-height);
  margin-block-start: var(--space-md);
}

/* The shelterbelt row: four independently-swaying silhouettes over a still
   horizon line (brief §8, ref-002's layered-loop physics x4). */
.hero__shelterbelt {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--layout-tap-min); /* sits directly above the teaser row */
  height: calc(var(--shelterbelt-tree-h) + var(--space-sm));
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-inline: var(--space-lg);
}

.tree {
  display: block;
  color: var(--color-shelter); /* R4: graphic fill only, never text */
  height: var(--shelterbelt-tree-h);
  aspect-ratio: 32 / 48;
  transform-origin: bottom center;
  fill: currentColor;
}

.tree--1 { animation: tree-sway-a var(--sway-1a) ease-in-out infinite alternate; animation-delay: var(--sway-delay-1); }
.tree--2 { animation: tree-sway-b var(--sway-2a) ease-in-out infinite alternate; animation-delay: var(--sway-delay-2); }
.tree--3 { animation: tree-sway-a var(--sway-1b) ease-in-out infinite alternate; animation-delay: var(--sway-delay-3); }
.tree--4 { animation: tree-sway-b var(--sway-2b) ease-in-out infinite alternate; animation-delay: var(--sway-delay-4); }

@keyframes tree-sway-a {
  from { transform: rotate(calc(var(--sway-amplitude) * -1)); }
  to   { transform: rotate(var(--sway-amplitude)); }
}

@keyframes tree-sway-b {
  from { transform: rotate(var(--sway-amplitude-2)); }
  to   { transform: rotate(calc(var(--sway-amplitude-2) * -1)); }
}

/* The still horizon line — never moves (brief §8); the same device reused
   as the section head-rule below the hero. */
.hero__horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--border-hairline);
  background-color: var(--color-ink);
  opacity: 0.35;
}

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

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

/* Reduced motion (brief §8): loops stop, trees render upright (0deg) as
   their own base state — no JS required. R8: no `!important`, wins on
   source order. */
@media (prefers-reduced-motion: reduce) {
  .tree--1, .tree--2, .tree--3, .tree--4 {
    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;
  }
}

/* --- OUTDOOR-LIVING INDEX (§II) — a plain editorial index, never a card
   grid (brief §1, ref-011). No cards, no icons: name, gloss, a small plain
   dot mark. -------------------------------------------------------------- */

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

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

.rooms__dot {
  display: inline-block;
  width: var(--space-3xs);
  height: var(--space-3xs);
  border-radius: 50%;
  background-color: var(--color-shelter); /* R4: graphic fill only */
  align-self: center;
}

.rooms__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  color: var(--color-ink);
  grid-column: 2;
}

.rooms__gloss {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
  margin: var(--space-3xs) 0 0;
  grid-column: 2;
}

@media (min-width: 40em) {
  .rooms__row {
    grid-template-columns: auto var(--rooms-name-col) 1fr;
    column-gap: var(--space-md);
  }

  .rooms__name {
    grid-column: 2;
  }

  .rooms__gloss {
    grid-column: 3;
    margin-block-start: 0;
  }
}

/* --- CREDENTIALS (§III) — plain text list, no bullets, no badge/seal/shield
   shape anywhere (R11). --------------------------------------------------- */

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

.credentials li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.credentials li:first-child {
  padding-block-start: 0;
  border-block-start: none;
}

/* --- PROCESS (§IV) — plain, numberless labels; a DIFFERENT costume than the
   outdoor-room rows' dot marks (brief §6.4's nested-counter check: no
   numeral-based enumeration anywhere on this site). ------------------------ */

.process {
  display: grid;
  gap: var(--space-md);
}

.process__name {
  font-family: var(--font-display-strong);
  font-weight: var(--font-weight-display-strong);
  font-style: normal;
  color: var(--color-ink);
  margin: 0 0 var(--space-3xs);
}

.process__body {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
  line-height: var(--leading-body);
  max-width: var(--layout-measure);
  margin: 0;
}

@media (min-width: 40em) {
  .process {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Form (§V estimate) -----------------------------------------------------
   One form per site (house-tech-spec §6). */

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

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

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

.estimate-contact 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;
}

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

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

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

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

/* The shelterbelt <symbol> sprite host — zero-size, off-canvas. */
.icon-sprite {
  position: absolute;
  /* @allow-literal: a zero-size, fully clipped host for a <symbol> def is a
     structural necessity, not a design value */
  width: 0; height: 0;
  overflow: hidden;
}

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