/* ==========================================================================
   site.css — Alluring Lawn Service, Nampa ID. Brief's components, built FROM
   tokens (house-tech-spec §3). Breakpoints 375/640/1024/1440 (brief §5.2).
   Archetype: band-rhythm — "the edge holds" (brief §5). Full-bleed bands,
   grounds alternate paper/hay-bone with one sagebrush band (§IV); a 3px cut
   at the top of every band with a 10px riser at the entering end,
   alternating left/right; a roman numeral on the entering side. No cards,
   no boxes, no icon set, no drop shadows.
   ========================================================================== */

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

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

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

/* Anchor targets land below the sticky stack (brief §5.5's 101px while the
   preview bar ships; --header-sticky-offset collapses to 0 the moment
   preview.css is gone, so this self-corrects at purchase too). */
section[id] { scroll-margin-block-start: calc(var(--layout-header-height) + var(--header-sticky-offset) + var(--border-hairline)); }

/* --- Eyebrows and kickers — authored in natural case, uppercased HERE
   (house-tech-spec §8; copy.md §0). --------------------------------------- */

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

.kicker { color: var(--color-accent); }
.band[data-ground='dark'] .kicker { color: var(--color-accent-onband); }

/* Two block children at <640 (brief §5.5's two rendered lines); one row at
   ≥640, joined by the eyebrow's own middot. */
.eyebrow__line { display: block; }

@media (min-width: 40em) {
  .eyebrow__line { display: inline; }
  .eyebrow__line + .eyebrow__line::before { content: ' · '; }
}

/* --- Section heads — numeral → kicker → h2, at every width -------------- */

.section__head { position: relative; }

.section__head > .kicker { margin-block-start: var(--space-2xs); }

.section__title {
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-normal);
  text-wrap: balance;
}

.section__head + * { margin-block-start: var(--space-lg); }

.section__lead {
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* Roman numeral (brief §6.2, §6.7): Fraunces Italic, accent. A CSS counter,
   I–VIII, hero excluded — glyph is CSS, empty + aria-hidden in markup (copy
   §11). Inline above h2 on entering side <1024; hangs in margin ≥1024. */

main { counter-reset: band; }

.numeral {
  display: block;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  font-size: var(--text-lead);
  color: var(--color-accent);
  counter-increment: band;
}

.numeral::before { content: counter(band, upper-roman); }

.band[data-ground='dark'] .numeral { color: var(--color-accent-onband); }

@media (min-width: 64em) {
  .numeral {
    position: absolute;
    inset-block-start: var(--space-3xs);
    font-size: var(--text-h2);
  }
  .band[data-enter='left'] .numeral {
    inset-inline-start: calc(var(--layout-gutter) * -1);
  }
  .band[data-enter='right'] .numeral {
    inset-inline-end: calc(var(--layout-gutter) * -1);
  }
}

/* Header (brief §6 sticky chrome): 56px + 1px border. NO NAV (copy §3) — a
   wordmark and a tel: link only. Sticky half lives in preview.css. */

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

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

.wordmark,
.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.wordmark { text-decoration: none; white-space: nowrap; }

.site-header__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  padding-inline: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
  white-space: nowrap;
}

/* --- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-cta-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);
  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);
}

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

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

/* The paper-filled button on the dark band (brief §IV, contrast pair 13). */
.btn--onband {
  background-color: var(--color-surface);
  color: var(--color-accent);
}

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

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

/* Band, cut, riser (brief §5.1a, §5.1c). Every section is a full-bleed band;
   grounds alternate paper/hay-bone with one dark sagebrush band (§IV). The
   cut is a 3px accent rule at the band's top edge, full-bleed — never a
   repeated tick, so it cannot degrade into hatching. The riser is a 3×10px
   stub turning up out of the cut at the entering end. */

.band {
  position: relative;
  width: 100%;
  padding-block: var(--section-gap);
  background-color: var(--color-bg);
}

.band[data-ground='surface'] { background-color: var(--color-surface); }

.band[data-ground='dark'] {
  background-color: var(--color-band);
  color: var(--color-accent-ink);
}

/* Scoped to the dark band, never global (WCAG 1.4.11). */
.band[data-ground='dark'] :focus-visible { outline-color: var(--color-focus-on-band); }

.cut {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--cut-w);
  background-color: var(--color-accent);
}

.band[data-ground='dark'] .cut { background-color: var(--color-accent-onband); }

/* A sibling of .cut, both direct children of .band. Bottom edge flush with
   the cut's, extending upward — "turning up out of the cut" (brief §5.1c). */
.cut__riser {
  position: absolute;
  inset-block-start: calc(var(--cut-w) - var(--cut-riser));
  inline-size: var(--cut-w);
  block-size: var(--cut-riser);
  background-color: var(--color-accent);
}

.band[data-ground='dark'] .cut__riser { background-color: var(--color-accent-onband); }
.band[data-enter='left'] .cut__riser { inset-inline-start: 0; }
.band[data-enter='right'] .cut__riser { inset-inline-end: 0; }

/* §I hero — the atmosphere radial, the ONE non-flat ground (brief §3.2,
   §4.3). No type sits on the field: it is full-bleed, above the lead/facts. */

.hero {
  position: relative;
  padding-block-start: var(--layout-gutter);
  padding-block-end: var(--section-gap);
  background: radial-gradient(120% 88% at 40% 16%, var(--color-atmo-1) 0%, var(--color-atmo-3) 100%);
}

.hero__eyebrow { margin-block-start: var(--space-2xs); }

.hero__title {
  margin-block-start: var(--space-xs);
  max-width: var(--layout-hero-col);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* ref-001's borrowed move: a huge serif with an italic colour-accent word.
   One word per page, never two. */
.accent-word {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent);
}

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

/* Full-bleed at the true viewport edge — not merely the band's edge — while
   eyebrow/h1/CTA/lead/facts stay in the measured column (brief §5.2). */
.hero__field {
  position: relative;
  margin-block-start: var(--space-md);
  overflow: hidden;
  /* @allow-literal: the full-viewport breakout's fixed geometry, not a size the brief chose */
  inline-size: 100vw;
  /* @allow-literal: same breakout — escapes .container's padding and max-width at every width */
  margin-inline: calc(50% - 50vw);
}

.hero__field picture,
.hero__field img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.hero__field img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 58%;
}

@media (min-width: 40em) {
  .hero__field img { aspect-ratio: 16 / 9; }
}

/* The hero's own cut, drawn once on load at the image's bed/turf line (brief §8.2). */
.hero__field .cut {
  inset-block-start: 58%;
  transform: scaleX(0);
  transform-origin: left center;
  animation: cut-draw var(--duration-slow) var(--ease-draw) var(--delay-cut) forwards;
}

@keyframes cut-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__lead {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* One typographic line above a 1px rule. Never a counter row (brief §6.2). */
.hero__facts {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-xs);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-muted);
}

/* Satellite layer (brief §8.3): §0's living-hero technique. Slow, independent
   loops sharing no common factor; transform/opacity only, GPU-composited. */

.satellites {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.seed,
.haze {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.seed {
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.seed--1 {
  inset-block-start: 20%;
  inset-inline-start: 24%;
  opacity: 0.55;
  animation: seed-1 var(--loop-seed-1) var(--ease-standard) infinite;
}

.seed--2 {
  inset-block-start: 34%;
  inset-inline-start: 70%;
  opacity: 0.45;
  animation: seed-2 var(--loop-seed-2) var(--ease-standard) infinite;
}

.seed--3 {
  inset-block-start: 48%;
  inset-inline-start: 46%;
  opacity: 0.40;
  animation: seed-3 var(--loop-seed-3) var(--ease-standard) infinite;
}

.haze {
  inset-block-start: 8%;
  inset-inline-start: -8%;
  inline-size: 56%;
  block-size: 30%;
  border-radius: var(--radius-pill);
  background-color: var(--color-atmo-1);
  filter: blur(var(--space-lg));
  opacity: 0.52;
  animation: haze var(--loop-haze) var(--ease-standard) infinite;
}

/* Every offset below is brief §8.3's own stated px/deg value, satellite by
   satellite — not a token-scale value, so each carries its own
   @allow-literal immediately above the one line it covers. */
@keyframes seed-1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  /* @allow-literal: brief §8.3 seed head 1's exact motion value */
  50%  { transform: translate(10px, -12px) rotate(9deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes seed-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  /* @allow-literal: brief §8.3 seed head 2's exact motion value */
  50%  { transform: translate(-9px, -16px) rotate(-11deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes seed-3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  /* @allow-literal: brief §8.3 seed head 3's exact motion value */
  50%  { transform: translate(6px, -8px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes haze {
  0%   { transform: translate(0, 0); opacity: 0.40; }
  /* @allow-literal: brief §8.3 haze plate's exact motion value */
  50%  { transform: translate(18px, -4px); opacity: 0.62; }
  100% { transform: translate(0, 0); opacity: 0.40; }
}

/* --- Rows — §II services, §IV pillar line, §VII towns. A ruled list with a
   leading 12px accent tick and no counter (brief §1.1, §6.2). ------------ */

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

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--layout-row-pad);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.row::before {
  content: '';
  display: inline-block;
  inline-size: var(--layout-tick);
  block-size: var(--border-hairline);
  background-color: var(--color-accent);
}

.row__name {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
}

.rows--towns .row__name { font-family: var(--font-display); }

/* The pillar line — a single line of running text beneath §II's rows. */
.pillar-line {
  margin-block-start: var(--space-md);
  color: var(--color-ink-muted);
}

/* --- Image strips (slots 2, 3, 4) ---------------------------------------- */

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

.strip img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* --- §III season-strip — a rail of 8 month labels, then 3 rows. Never four
   cards; the current phase carries the accent colour (brief §III). ------ */

/* The rail is the sky wash itself (the anchor's sky support made visible,
   brief §6.7) — ink text on it, never sky-coloured text on the page ground.
   Matches the brief's own two measured pairs: ink-on-sky 10.24:1 (§4.1 pair
   11), accent-on-sky 5.44:1 (pair 12); sky as foreground on bg is unmeasured
   and would fail AA, so it never ships that way. */
.season-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-block-start: var(--space-lg);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-sky);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.season-rail__month--current { color: var(--color-accent); }

.windows {
  margin-block-start: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.window {
  padding-block: var(--layout-row-pad);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.window__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}

.window__line { color: var(--color-ink-muted); }

@media (min-width: 40em) {
  .window {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
  }
  .window__line { margin-block-start: 0; }
}

/* --- §IV commercial-and-hoa — the one dark band -------------------------- */

.band__title {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
}

.band__lines {
  margin-block-start: var(--space-xs);
  color: var(--color-accent-onband);
}

.band__copy {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted-onband);
}

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

.band__act { margin-block-start: var(--space-md); }

/* --- §V reviews — three softened quotes, no stars, no counts ------------- */

.reviews {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.review {
  padding-block-start: var(--space-xs);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  max-width: var(--layout-measure);
}

.review p {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-lead);
}

.review__attrib {
  display: block;
  margin-block-start: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

/* --- §VI process — four ticked rows, no counter (nested-ornament rule,
   brief §6.2: the counters are the roman numerals, not this sub-list). -- */

.steps {
  margin-block-start: var(--space-lg);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.step {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--layout-row-pad);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.step::before {
  content: '';
  flex: 0 0 auto;
  inline-size: var(--layout-tick);
  block-size: var(--border-hairline);
  background-color: var(--color-accent);
  align-self: center;
}

.step__text { font-size: var(--text-body); line-height: var(--leading-body); }

/* --- §VII service-area -------------------------------------------------- */

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

/* --- §VIII faq — native disclosure, keyboard-standard, no JS. The UA
   ::marker IS this sub-list's ornament (brief §6.2: a sub-list that already
   carries an ornament of its own does not also get a counter). ---------- */

.faq {
  margin-block-start: var(--space-lg);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  max-width: var(--layout-measure);
}

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

.qa__q {
  display: list-item;
  list-style-position: inside;
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  cursor: pointer;
}

.qa__q::marker { color: var(--color-accent); }

.qa__a {
  padding-block-end: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- §IX contact — the house form (house-tech-spec §6) -------------------- */

.contact__act { margin-block-start: var(--space-md); }

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

.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 AT. */
.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(--section-gap);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-muted);
}

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

.site-footer__towns,
.site-footer__nap,
.site-footer__legal { margin-block-start: var(--space-2xs); }

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

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

/* --- The reveal (brief §8.1): opacity 0 → 1, translateY(12px) → 0,
   --duration-base, threshold 0.15, once per element, staggered 60ms within
   a group. base.css runs the reveal at --duration-slow (this site's 1200ms
   cut draw), so the reveal's own duration is re-pointed here. ------------ */

[data-reveal-ready] [data-reveal] {
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

/* --- Reduced motion (brief §8.4). Durations collapse at the token source
   (base.css); every animated element then resolves to its FINAL state,
   never its initial one — the cut renders FULLY DRAWN. ------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__field .cut {
    transform: scaleX(1);
    animation: none;
  }

  .seed,
  .haze {
    animation: none;
    transform: none;
  }

  .seed--1 { opacity: 0.55; }
  .seed--2 { opacity: 0.45; }
  .seed--3 { opacity: 0.40; }
  .haze    { opacity: 0.52; }
}