/* ==========================================================================
   site.css — Green Lawn Care & Landscape Inc. The brief's components, built
   FROM tokens (spec §3, brief §6.6 B2). Breakpoints, brief §5.2: 375 · 640 ·
   1024 · 1440; only 40em and 64em change layout, and 1440 is a max-width.
   Ornaments (brief §6.7): the datum · the hero radial · the satellite layer ·
   three circled numerals · the scope labels · hairlines · one dark band.
   No cards, no boxes, no shadows, no icons.
   ========================================================================== */

/* brief §5.1's table gives the CONTENT column (335/576/928/1152), and its
   7:5 split of 1152 less a 40px gap is exactly the 648.7/463.3 §5.5 computes.
   So the cap is on the content column and the gutter sits outside it. */
.container {
  width: 100%;
  max-width: calc(var(--layout-container) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

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

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

/* --- The datum (brief §5.1 r3): 2px accent, full content-column width, at
   the head of the hero and of EVERY section. Draws once, hero only. ---- */

.datum {
  display: block;
  inline-size: 100%;
  block-size: var(--border-thick);
  background-color: var(--color-accent);
}

/* brief §5.1: minimum 72px drawn. Below that it YIELDS ENTIRELY and the
   kicker holds position. Every container here tracks the viewport. */
@media (max-width: 4.4375em) {
  .datum { display: none; }
}

/* --- Eyebrows and kickers: authored in natural case, uppercased HERE (B8) */

.eyebrow,
.kicker,
.band__attrib {
  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); }

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

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

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

.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-snug);
  letter-spacing: var(--tracking-normal);
}

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

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

.section__note,

.hero__lead,
.page-head__lead { margin-block-start: var(--space-md); }

@media (min-width: 64em) {
  .section__title { margin-block-start: var(--space-md); }
}

/* --- Header (brief §6): 56px + 1px border, surface ground. The `position:
   sticky` half is in preview.css. NO NAV LINKS AND NO TOGGLE (copy §3). */

.site-header {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-surface);
}

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

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

.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-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  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);
  padding: var(--space-xs) 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-standard),
              color var(--duration-fast) var(--ease-standard);
}

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

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

@media (min-width: 64em) {
  .btn--primary,
  .btn--quiet { min-height: var(--cta-height-lg); }
}

/* A 24 × 1px currentColor tick in the primary control (brief §6 §I). Not an
   icon — this site ships zero icons (§6.2). */
.btn__tick {
  display: inline-block;
  inline-size: var(--tick-length);
  block-size: var(--border-hairline);
  margin-inline-start: var(--space-xs);
  background-color: currentColor;
}

/* The in-band tel: control — accent-onband ground, band ink, 8.34:1, 50px. */
.btn--onband {
  min-height: var(--band-cta-height);
  background-color: var(--color-accent-onband);
  color: var(--color-band);
}

/* --- §I hero — split-hero (brief §5.1, §5.4). The ONE non-flat ground on any
   page; §4.3 computes its ratios against the ground's extremes beneath the
   text block at 375. NO TYPE SITS ON THE IMAGE: the field is a SIBLING of
   the text block, never its background. ------------------------------- */

.hero {
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  background-image: radial-gradient(120% 78% at 18% 12%,
    var(--color-atmo-1) 0%, var(--color-atmo-2) 58%, var(--color-atmo-3) 100%);
}

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

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

/* ref-007's second borrowed move: italic-serif emphasis on a SINGLE word in
   a roman display line. One word per page, never two. */
.accent-word {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-display);
  color: var(--color-accent);
}

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

.hero__field {
  position: relative;
  margin-block-start: var(--space-md);
  margin-inline: calc(var(--layout-gutter) * -1);
}

.hero__field img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
}

.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-facts);
  color: var(--color-ink-muted);
}

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

  /* 7 : 5, text left, image right. The asymmetry IS the archetype and it is
     not negotiable to 6:6. DOM order is unchanged at every width. */
  .hero__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    /* Six explicit rows, one per column-1 child in brief §5.4's DOM order,
       so `grid-row: 1 / -1` resolves against the explicit grid and the field
       centres against the whole 419.6px text block (§5.5). */
    grid-template-rows: repeat(6, auto);
    column-gap: var(--space-lg);
    align-items: center;
  }

  .hero__grid > * { grid-column: 1; }

  .hero__field {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-block-start: 0;
    margin-inline: 0;
  }

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

/* --- The satellite layer (brief §8.3): §0's living-hero technique. Slow,
   INDEPENDENT, non-synchronised loops; transform and opacity only. The brief
   states no colour or geometry — see README.md. ----------------------- */

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

.mote,
.haze,
.shimmer {
  position: absolute;
  display: block;
  background-color: var(--color-atmo-1);
  will-change: transform, opacity;
}

.mote {
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  border-radius: var(--radius-pill);
}

.mote--1 {
  inset-block-start: 18%;
  inset-inline-start: 22%;
  opacity: var(--still-mote-1);
  animation: mote-1 var(--loop-mote-1) var(--ease-standard) infinite;
}

.mote--2 {
  inset-block-start: 31%;
  inset-inline-start: 68%;
  opacity: var(--still-mote-2);
  animation: mote-2 var(--loop-mote-2) var(--ease-standard) infinite;
}

.mote--3 {
  inset-block-start: 44%;
  inset-inline-start: 47%;
  opacity: var(--still-mote-3);
  animation: mote-3 var(--loop-mote-3) var(--ease-standard) infinite;
}

.haze {
  inset-block-start: 6%;
  inset-inline-start: -10%;
  inline-size: 62%;
  block-size: 34%;
  border-radius: var(--radius-pill);
  filter: blur(var(--space-lg));
  opacity: var(--still-haze);
  animation: haze var(--loop-haze) var(--ease-standard) infinite;
}

/* The water line of the field, and nothing else. */
.shimmer {
  inset-block-start: 69%;
  inset-inline: 0;
  block-size: var(--border-thick);
  opacity: var(--still-shimmer);
  animation: shimmer var(--loop-shimmer) var(--ease-standard) infinite;
}

@keyframes mote-1 {
  0%   { transform: translate(0, 0); opacity: var(--still-mote-1); }
  50%  { transform: translate(9%, -14%); opacity: 1; }
  100% { transform: translate(0, 0); opacity: var(--still-mote-1); }
}

@keyframes mote-2 {
  0%   { transform: translate(0, 0); opacity: var(--still-mote-2); }
  50%  { transform: translate(-13%, -9%); opacity: 0.92; }
  100% { transform: translate(0, 0); opacity: var(--still-mote-2); }
}

@keyframes mote-3 {
  0%   { transform: translate(0, 0); opacity: var(--still-mote-3); }
  50%  { transform: translate(6%, -18%); opacity: 0.88; }
  100% { transform: translate(0, 0); opacity: var(--still-mote-3); }
}

@keyframes haze {
  0%   { transform: translate(0, 0); opacity: 0.5; }
  50%  { transform: translate(22%, -5%); opacity: 0.78; }
  100% { transform: translate(0, 0); opacity: 0.5; }
}

@keyframes shimmer {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.35; }
}

/* --- The meltline (brief §8.2): scaleX(0) → scaleX(1), origin left, 1000ms,
   --ease-draw, 240ms delay, ONCE, on load. SECTION DATUMS DO NOT DRAW. -- */

.datum--hero {
  transform: scaleX(0);
  transform-origin: left center;
  animation: meltline var(--duration-slow) var(--ease-draw) var(--delay-meltline) forwards;
}

@keyframes meltline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Row-level names: §II · §V · §III windows · the snow scope heads ---- */

.row__name,
.window__name,
.scope__name {
  font-family: var(--font-display);
  font-size: var(--text-row);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

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

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

/* Every in-flow accent link is a 44px target; on the linked row a negative
   block margin absorbs that back into the row's own padding. */
.row__link,
.window__link a,
.page-head__back a,
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
}

.row__link { margin-block: calc(var(--space-xs) * -1); }

/* Right-aligned at every width — including on a wrapped row at 375, where
   `space-between` alone would left-align a lone item on its own line. */
.row__tag {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.rows--towns .row { justify-content: flex-start; }

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

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

.strip img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--strip-ratio);
  object-fit: cover;
}

.strip--snow img { aspect-ratio: var(--snow-ratio); }

/* --- §III season windows — a row-based list, never four cards ------------- */

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

.window {
  padding-block: var(--space-xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.window__line {
  margin-block-start: var(--space-3xs);
  color: var(--color-ink-muted);
}

.window__link {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-small);
}

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

  .window__name { grid-column: 1; grid-row: 1; }
  .window__line { grid-column: 2; grid-row: 1; margin-block-start: 0; }
  .window__link { grid-column: 2; grid-row: 2; }
}

/* --- §IV the ledger. THE SITE'S ONLY COUNTER, and it has no sub-list. -- */

.steps {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
}

.step {
  display: grid;
  grid-template-columns: var(--numeral-size) 1fr;
  align-items: start;
  column-gap: var(--space-md);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--numeral-size);
  block-size: var(--numeral-size);
  border: var(--border-hairline) var(--border-style) var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  color: var(--color-accent);
}

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

.ledger {
  margin-block-start: var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.ledger__row {
  padding: var(--space-xs) var(--space-md);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.ledger__row:last-child { border-block-end: 0; }

.ledger__num {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display-mid);
  line-height: var(--leading-snug);
  color: var(--color-accent);
}

/* The scope label is the enforcement, not decoration (dossier C5). */
.ledger__scope {
  font-size: var(--text-small);
  line-height: var(--leading-facts);
  color: var(--color-ink-muted);
}

/* --- §IV the closing band — the site's ONE dark ground -------------------- */

.band {
  position: relative;
  margin-block-start: var(--space-md);
  padding-block: var(--space-xl);
  overflow: hidden;
  background-color: var(--color-band);
  color: var(--color-bg);
}

.band__ground {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: var(--band-image-opacity);
}

.band__inner { position: relative; }

.band__quote {
  max-width: var(--layout-measure);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
}

.band__accent { color: var(--color-accent-onband); }

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

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

/* Scoped to the band, never global (brief §4.2 pair 15). */
.band :focus-visible { outline-color: var(--color-focus-on-band); }

/* --- §VI faq — native disclosure, keyboard-standard, no JS ---------------- */

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

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

/* list-item restores the native ::marker (brief §6 §VI); any other display
   drops it. The UA disclosure-closed/-open pair gives both states. No counter
   is added (design-rules.md §5). */
.qa__q {
  display: list-item;
  list-style-position: inside;
  padding-block: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  cursor: pointer;
}

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

/* --- §VII contact — the house form (spec §6). --------------------------- */

.contact { display: grid; gap: var(--space-lg); }

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

.form {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
  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-none);
}

.field__control:focus-visible { outline-offset: var(--border-thick); }

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

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* Honeypot: 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);
}

.nap {
  display: grid;
  gap: var(--space-3xs);
  font-style: normal;
  font-size: var(--text-small);
  line-height: var(--leading-facts);
  color: var(--color-ink-muted);
}

.nap__line { text-underline-offset: var(--space-3xs); }

@media (min-width: 64em) {
  .contact {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--space-lg);
    align-items: start;
  }
}

/* --- Sub-pages: services/snow-removal.html, thanks.html ------------------- */

.page-head { padding-block-start: var(--space-md); }

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

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

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

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

.page-head__back {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
}

@media (min-width: 64em) {
  .page-head { padding-block-start: var(--space-xl); }
  .page-head__title { margin-block-start: var(--space-md); }
}

/* The snow page's two scope lists — side by side at ≥1024, stacked below. */
.scopes { display: grid; gap: var(--space-md); }

.scope__list {
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  color: var(--color-ink-muted);
}

@media (min-width: 64em) {
  .scopes {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
  }
}

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  line-height: var(--leading-facts);
  color: var(--color-ink-muted);
}

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

.site-footer__towns,
.site-footer__nap,
.site-footer__social,
.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. base.css runs it at
   --duration-slow (here the 1000ms meltline), so the duration is re-pointed
   here rather than by editing house-level base.css. ------------------- */

[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;
   every animated element then resolves to its FINAL state, never its initial
   one — the datum renders FULLY DRAWN. -------------------------------- */

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

  .mote,
  .haze,
  .shimmer {
    animation: none;
    transform: none;
  }

  .mote--1 { opacity: var(--still-mote-1); }
  .mote--2 { opacity: var(--still-mote-2); }
  .mote--3 { opacity: var(--still-mote-3); }
  .haze    { opacity: var(--still-haze); }
  .shimmer { opacity: var(--still-shimmer); }
}