/* ==========================================================================
   site.css — Garden Art Landscaping, Fort Collins CO. The brief's components,
   built FROM tokens (house-tech-spec §3). Archetype: band-rhythm, single
   full-width bands with a narrow (640px at desktop) centred content column —
   brief §4. Breakpoints: house standard 48em / 64em; only 64em changes the
   hero field and header padding.

   Ornaments (brief §7, §9): the italic numeral head-mark (I/II/III), the
   living-hero urn + three swaying moss stems + the gold hairline (hero only,
   §0's one-per-site rule), one typographic arrow glyph per service band.
   No cards, no boxes, no icon set, no shadow beyond the focus ring.
   ========================================================================== */

/* --- Layout primitives ----------------------------------------------------
   --layout-container is 40rem (640px) here — brief §5's own narrow editorial
   column, not the house's wider default. Bands themselves are full-bleed:
   background colour sits on the <section>, .container only narrows the
   content inside 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); }

/* --- Eyebrow (place) — every gated page, brief §4.1/§4.2 ------------------ */

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

/* --- Header (brief §4.1.2): 57px total (56 + 1px border), wordmark + phone,
   sticky immediately below the expiry bar. No nav links, no toggle — the
   footer carries the site's only nav (copy.md §2). ---------------------- */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
  z-index: var(--z-header);
  min-height: var(--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);
  min-height: var(--header-height);
}

/* The wordmark is the ONE other place --color-accent is licensed for text
   (brief §4.1.2, verbatim: "wordmark (Marcellus, --color-accent)") — the
   general binding rule in tokens.css is size-gated, never used below the
   AA large-text floor (row 5: >=24px normal), so this token pins the
   wordmark at exactly that floor, fixed rather than fluid, so the rule
   is never approached, let alone crossed. */
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-wordmark);
  font-weight: var(--font-weight-display);
  line-height: 1;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  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-strong);
  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-tap-min);
  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-hover) var(--ease-standard),
              color var(--duration-hover) var(--ease-standard);
}

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

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

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

/* --- Hero (brief §4.1.3, §5, §8) — the site's one living-hero moment.
   Single-column, full-width at every breakpoint: more vertical room at wide
   viewports (--space-2xl padding), never a split grid (brief §4). -------- */

.hero {
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
}

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

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

/* The H1's one italic accent word. Marcellus ships no true italic instance
   (brief §3.2) — this is browser-synthesized oblique on the one loaded
   Regular file, a deliberate narrow use (one word, display scale). */
.accent-word {
  font-style: italic;
  color: var(--color-accent);
}

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

/* The living-hero field: generated urn + three swaying stems + the gold
   hairline. No text ever sits inside it (tokens.css / brief §3.1). Mobile:
   intrinsic ratio near the arithmetic table's 335x320. Desktop (>=64em): a
   fixed 480px height, a deliberate desktop value, not aspect-scaled. */
.hero__field {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--space-md);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  aspect-ratio: var(--hero-ratio-sm);
  background-color: var(--color-surface);
}

.hero__field img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 69% center;
}

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

  .hero__field {
    aspect-ratio: auto;
    block-size: var(--hero-field-height-lg);
  }

  .hero__field img { object-position: 90% center; }
}

/* The gold hairline — fixed 60x1px at every breakpoint (brief §9), a
   decorative, non-animated ornament echoing ref-007's thin gold line and
   the site's own hairline dividers. Sits at the field's top-left, the same
   edge-marking role a hairline plays at every band boundary below. */
.hero__hairline {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  inline-size: var(--hairline-gold-length);
  block-size: var(--border-hairline);
  background-color: var(--color-hairline-gold);
}

/* Three independently-swaying moss stems (brief §8): positioned as
   percentages of the field's own rendered width, pure CSS transform:rotate()
   on absolutely-positioned decorative elements — no scroll/input hijack. */
.hero__stems {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__stem {
  position: absolute;
  inset-block-end: 34%;
  inline-size: var(--stem-width);
  block-size: 30%;
  background-color: var(--color-moss);
  border-radius: var(--radius-pill);
  transform-origin: bottom center;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: var(--ease-sway);
}

.hero__stem::before,
.hero__stem::after {
  content: "";
  position: absolute;
  inline-size: var(--stem-leaf-w);
  block-size: var(--stem-leaf-h);
  background-color: var(--color-moss);
  border-radius: var(--radius-pill);
}

.hero__stem::before {
  inset-block-start: 28%;
  inset-inline-start: calc(var(--stem-leaf-offset) * -1);
  transform: rotate(-18deg);
}

.hero__stem::after {
  inset-block-start: 52%;
  inset-inline-end: calc(var(--stem-leaf-offset) * -1);
  transform: rotate(18deg);
}

/* Urn centred at 35.8% of field width; stems at 47.2% / 55.8% / 64.5%
   (brief §8, exact). */
.hero__stem--1 {
  inset-inline-start: 47.2%;
  block-size: 26%;
  animation-name: stem-sway-1;
  animation-duration: var(--duration-sway-1);
}

.hero__stem--2 {
  inset-inline-start: 55.8%;
  block-size: 32%;
  animation-name: stem-sway-2;
  animation-duration: var(--duration-sway-2);
}

.hero__stem--3 {
  inset-inline-start: 64.5%;
  block-size: 24%;
  animation-name: stem-sway-3;
  animation-duration: var(--duration-sway-3);
}

@keyframes stem-sway-1 {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(4deg); }
}

@keyframes stem-sway-2 {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(2.5deg); }
}

@keyframes stem-sway-3 {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(5deg); }
}

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

.hero__facts {
  margin-block-start: var(--space-sm);
  font-size: var(--text-micro);
  line-height: var(--leading-facts);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

/* --- Services index — the band-rhythm representative section (brief
   §4.1.4). Three full-width alternating bands, each an <a> wrapping the
   whole band. ------------------------------------------------------------- */

.service-band {
  display: block;
  padding-block: var(--space-xl);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-hover) var(--ease-standard);
}

.service-band:nth-child(odd) { background-color: var(--color-bg); }
.service-band:nth-child(even) { background-color: var(--color-surface); }

.service-band:hover,
.service-band:focus-visible {
  background-color: var(--color-bg);
}

.service-band:nth-child(odd):hover,
.service-band:nth-child(odd):focus-visible {
  background-color: var(--color-surface);
}

/* The numeral head-mark — italic Marcellus, --color-accent, at or above
   display scale (brief §4.1.4 / §9). Shared, unchanged, on the service
   pages' own head (brief §4.2). */
.head-mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display);
  line-height: var(--leading-snug);
  color: var(--color-accent);
}

.service-band__heading {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
}

.service-band__text {
  margin-block-start: var(--space-2xs);
  max-width: var(--layout-measure);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* The single repeating arrow glyph — the link's only affordance beyond the
   whole-band hover tint. Body scale, so --color-accent-strong (brief
   §4.1.4). Inline after the text; wraps to its own line under the text if
   the available width cannot hold it, by ordinary text flow. */
.service-band__arrow {
  display: inline-block;
  margin-inline-start: var(--space-2xs);
  font-family: var(--font-display);
  color: var(--color-accent-strong);
}

/* --- Credentialed Care band (brief §4.1.5) — one --color-surface band,
   plain text, no seal/badge graphic. ---------------------------------- */

.section--credentialed { background-color: var(--color-surface); }

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

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

/* --- Reviews (brief §4.1.6) — two verbatim, attributed quotes. No rating,
   no count, no star graphic anywhere near this section. ----------------- */

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

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

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

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

/* --- Final CTA band (brief §4.1.7) — repeats the primary + phone. ------ */

.section--cta { background-color: var(--color-surface); }

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

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

.cta-band__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
}

/* --- Contact form fields (house-tech-spec §6) — one form, on index.html
   only; every other page's primary CTA anchors to it via "/#contact". ---- */

.field {
  display: grid;
  gap: var(--space-3xs);
  margin-block-start: var(--space-md);
}

.field:first-child { margin-block-start: var(--space-md); }

.field__label {
  font-size: var(--text-micro);
  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;
}

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

.form > p { margin-block-start: var(--space-md); }

/* Honeypot: present in the DOM for bots, unreachable for humans/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-micro);
  color: var(--color-ink-muted);
}

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

/* --- Footer (brief §4.1.8) — NAP, nav to the three service pages, one
   copyright line. No hours row: not published at V-tier, so neither the
   element nor the JSON-LD half ships (house-tech-spec §4). No gallery
   link — the slot is not built at all (playbook §6). ------------------- */

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

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

.site-footer__nap strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  color: var(--color-accent-strong);
  text-underline-offset: var(--space-3xs);
}

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


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

/* --- Service-page / thanks-page head (brief §4.2, §4.3) — calm, static, no
   living-hero, no animation. datum-free (this brief has no datum ornament);
   eyebrow -> numeral head-mark -> h2 -> paragraph -> CTA. ---------------- */

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

.page-head .head-mark { margin-block-start: var(--space-sm); }

.page-head__title {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

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

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

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

/* Secondary, static, lazy-loaded flora/material study (brief §4.2 point 3). */
.page-figure {
  margin-block-start: var(--space-xl);
}

.page-figure img {
  inline-size: 100%;
  block-size: auto;
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
}

.page-figure__cap {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
}

/* --- thanks.html — mirrors the service-page head, no form, no gallery. -- */

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

.thanks-actions__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
}

/* --- Focus ring supplement (tokens.css --shadow-focus) — a soft ink halo
   layered alongside base.css's fixed, AA-compliant outline ring
   (house-tech-spec §8). It never replaces that ring; it is the ONE shadow
   value this site uses anywhere. ----------------------------------------- */

:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* --- Reduced motion (house-tech-spec §8, brief §8's own statement): the
   three stem loops stop without exception. Nothing else changes — the full
   urn image, the gold hairline, the palette, all remain. This site ships no
   scroll-reveal system at all, so no reveal rule is needed here. -------- */

@media (prefers-reduced-motion: reduce) {
  .hero__stem {
    animation: none;
    transform: rotate(0deg);
  }
}