/* ==========================================================================
   site.css — Gold Landscaping, Eau Claire WI. editorial-modern / new-growth /
   full-bleed-immersive, built from the approved brief.

   HARD RULE (house-tech-spec §3): no raw hex, no px/rem size literal, no
   font-name literal here. Tokens only. Escape hatches: the house breakpoints
   (48em / 64em) and an explicit `@allow-literal: reason` comment — used below
   at 40em (brief §5.3's own declared 640px breakpoint, distinct from the
   house 48em default).

   ARCHETYPE RULES THIS FILE IS WRITTEN AGAINST (brief §5.1): one .field
   wrapping the entire hero ask; satellites are absolutely-positioned DOM
   siblings of .content, animating independently, never a CSS background;
   lead and facts follow the field, outside it, in normal flow; no cards, no
   boxes, no shadows anywhere; exactly one dark band (§IV).
   ========================================================================== */

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

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

/* design-rules §7.1's ONE inter-section token, at its two permitted call
   sites: .section's padding-block and .hero's padding-block-end. */
.section {
  padding-block: var(--section-gap);
}

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

section[id] {
  scroll-margin-block-start: calc(var(--layout-header-height) + var(--border-hairline));
}

/* --- Type roles (brief §2.3, §2.9). Weight is font-weight and nothing else
   (house-tech-spec §8: font-variation-settings carries opsz, never wght). --- */

h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' 30;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

/* The one italic role on the whole site — exactly one word, inside the h1. */
.accent-word {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' 30;
  color: var(--color-accent);
}

.band .accent-word {
  color: var(--color-focus-on-band);
}

/* h3 section heads — Piazzolla Roman 500, never italic. */
h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-head);
  font-variation-settings: 'opsz' 14;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}

/* The caps role — eyebrow, facts labels, row leads. Authored in natural case
   in the HTML, uppercased here only (house-tech-spec §8). */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* --- Header. Wordmark left, tel: right — no nav links, no toggle (brief §6:
   the header carries exactly these two things, at every scroll depth). --- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.site-header__brand {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  text-decoration: none;
}

@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);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

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

/* --- Buttons. One control shape: --radius-sm on the primary CTA only,
   everything else --radius-none. No shadow anywhere (brief §3.2). --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-tap-min);
  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);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

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

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

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

/* --- The leaf-tipped rule — this site's registered signature mark (brief
   §6.6). Cost: a 2px rule + a 6px inline-SVG leaf glyph. Fixed-width and
   flex-shrink:0 so it can never shrink into a dash; no layout on this site
   ever squeezes its container below the ornament's own 52px minimum drawn
   length, so the brief's "yields entirely" fallback has nothing to trigger
   (recorded in README rather than left silent). --- */

.head-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-md);
}

.head-mark__rule {
  inline-size: var(--ornament-rule-length);
  block-size: var(--border-thick);
  flex: 0 0 auto;
  background-color: var(--color-accent);
  transform-origin: left center;
}

.head-mark__leaf {
  inline-size: var(--ornament-leaf-size);
  block-size: var(--ornament-leaf-size);
  flex: 0 0 auto;
  fill: var(--color-accent);
  transform-origin: center;
}

.band .head-mark__rule,
.band .head-mark__leaf {
  background-color: var(--color-focus-on-band);
  fill: var(--color-focus-on-band);
}

/* The hero's own instance plays the signature grow-and-unfurl once, on load
   (brief §8.2). Everywhere else the mark renders already settled — no
   animation classes, no replay. */
.head-mark--hero .head-mark__rule {
  animation: gl-rule-grow var(--duration-signature) var(--ease-standard) both;
}

.head-mark--hero .head-mark__leaf {
  animation: gl-leaf-unfurl var(--duration-signature) var(--ease-standard) both;
  animation-delay: calc(var(--duration-signature) * 0.45);
}

@keyframes gl-rule-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes gl-leaf-unfurl {
  0%   { opacity: 0; transform: scale(0.3) rotate(-18deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- §I hero — full-bleed-immersive (brief §5.1, §5.5). One .field wrapping
   the entire ask; text sits directly over the field's own atmosphere, never
   on a separate opaque plate — this archetype's own reading of "content
   floats over" (design-rules §7). --- */

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

.hero__field {
  position: relative;
  overflow: clip;
  block-size: var(--hero-field-height);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-field);
}

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: center bottom;
}

/* The two ambient satellite leaves (brief §8.2, ref-001) — decorative,
   independent of the field's own illustrated content, swaying on
   non-synchronised loops. aria-hidden, transform/opacity only. */
.satellite {
  position: absolute;
  z-index: var(--z-atmosphere);
  display: block;
  pointer-events: none;
  inline-size: var(--satellite-size-a);
  block-size: var(--satellite-size-a);
  fill: var(--color-accent);
  opacity: 0.55;
}

/* Positioned in the field's lower band (>=80% down), which the brief's own
   first-screen arithmetic keeps clear of the text block at every declared
   breakpoint (control bottom sits at 69.5%-73.6% of field height) — so the
   satellites never cross a line of type. */
.satellite--a {
  inset-inline-start: 18%;
  inset-block-start: 80%;
  transform-origin: top center;
  animation: gl-sway-a var(--loop-leaf-a) var(--ease-standard) infinite;
}

.satellite--b {
  inset-inline-start: 76%;
  inset-block-start: 88%;
  inline-size: var(--satellite-size-b);
  block-size: var(--satellite-size-b);
  transform-origin: top center;
  animation: gl-sway-b var(--loop-leaf-b) var(--ease-standard) infinite;
}

@keyframes gl-sway-a {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

@keyframes gl-sway-b {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(var(--satellite-drift)); }
}

.hero__field .container {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
}

.hero__content {
  max-width: var(--layout-hero-content);
  padding-block-start: var(--space-md);
}

.hero__eyebrow {
  margin: 0;
}

.hero__content h1 {
  margin-block-start: var(--space-xs);
  margin-block-end: 0;
}

.hero__cta {
  margin-block-start: var(--hero-gap-h1-cta-sm);
  margin-block-end: 0;
}

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

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

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

/* Lead and facts follow the field, OUTSIDE it, in normal document flow
   (brief §5.1 rule 2). */
.hero__lead {
  margin-block-start: var(--space-lg);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-muted);
}

.hero__facts {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  color: var(--color-ink);
}

/* --- §II services / §III season — the shared index device: hairline-
   separated rows, no cards, no icons, no numerals. --- */

.index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index__row {
  padding-block: var(--space-xs);
  color: var(--color-ink);
}

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

.index__row p {
  margin: 0;
  max-width: var(--layout-measure);
}

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

.plate-figure {
  margin: 0;
  margin-block-start: var(--space-lg);
}

.plate-figure img {
  width: 100%;
  height: auto;
}

/* The reserved gallery plate (brief §6.1) — visibly empty, honest. No image,
   no icon, no gradient, no motion. */
.gallery-plate {
  margin-block-start: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--gallery-plate-height);
  background-color: var(--color-surface);
  border: var(--border-hairline) dashed var(--color-border);
  text-align: center;
}

.gallery-plate p {
  margin: 0;
  padding-inline: var(--space-md);
  color: var(--color-ink-muted);
}

/* --- §IV trust — the one dark band. A FLAT fill, no gradient, no texture,
   nothing in it moves (brief §5.1 rule 6). --- */

.band {
  background-color: var(--color-band);
  color: var(--color-bg);
}

.band :focus-visible {
  outline-color: var(--color-focus-on-band);
}

.band .eyebrow {
  color: var(--color-bg);
}

.quotes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-lg);
}

.quote {
  margin: 0;
}

.quote__text {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.quote__attribution {
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-bg);
}

.band__accent {
  margin: 0;
  margin-block-start: var(--space-xl);
  max-width: var(--band-accent-width);
}

.band__accent img {
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* --- §V service area / §VI contact --- */

.section__lead {
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-lg);
}

.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-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  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);
  font-family: var(--font-body);
  font-size: var(--text-body);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-none);
}

textarea.field__control {
  min-height: calc(var(--layout-tap-min) * 2);
  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-size: var(--text-eyebrow);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

.contact__aside {
  margin-block-start: var(--space-lg);
  color: var(--color-ink-muted);
}

.contact__nap {
  font-style: normal;
}

/* --- Footer --- */

.site-footer {
  padding-block: var(--space-xl);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

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

.site-footer p + p {
  margin-block-start: var(--space-sm);
}

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

/* --- thanks.html — the h1 renders at h2 scale (brief §5.5: "h2-scale h1,
   24.00px x 1.20"); it is still the page's one <h1>, sized down because this
   page carries no living-hero field. --- */

.thanks__title {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}

.thanks__eyebrow {
  margin-block-end: var(--space-xs);
}

.thanks__lead {
  margin-block-start: var(--space-md);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-muted);
}

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

.btn--quiet {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* ==========================================================================
   Breakpoints — declared at 640 (brief §5.3) and 1024 (brief §5.3, = house
   64em). 640px has no house alias, so it is flagged per the escape hatch.
   ========================================================================== */

/* @allow-literal: 40em / 640px is the brief's own declared layout breakpoint
   (§5.3), distinct from the house 48em default. */
@media (min-width: 40em) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64em) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* ==========================================================================
   Reduced motion — brief §8.3, no exceptions. base.css collapses the house
   duration tokens at :root; --duration-signature is a brief-specific token
   the house kill switch does not know about, so it is stopped explicitly
   here, held at its settled end state (fully grown, never mid-grow) exactly
   as §8.3's table specifies.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .head-mark--hero .head-mark__rule,
  .head-mark--hero .head-mark__leaf {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .satellite--a,
  .satellite--b {
    animation: none;
    transform: rotate(0deg);
  }

  .btn {
    transition: none;
  }
}