/* ==========================================================================
   site.css — Beus Hydroseed. Archetype: asymmetric-collage (brief §5).
   Tokens only — no raw hex/px/font-name literal outside tokens.css
   (house-tech-spec §3, R8). Percentages and degrees are not size literals
   under that rule and are used directly for the collage's own per-plate
   coordinates and rotations, which the brief deliberately leaves untokenised
   (§3.3: only --field-height, --plate-size and --plate-pin-size are named).
   ========================================================================== */

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

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

.section {
  padding-block: var(--section-gap); /* the ONE inter-section token, brief §5.5 */
}

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

/* --- Sticky bar (brief §6) ---------------------------------------------------
   56px min-height + 1px border-block-end = 57px. Sticky beneath the expiry
   bar per house-tech-spec §2 / Nic's placement ruling; brief §5.3's fold
   arithmetic is computed on that basis ("sticky chrome = 101.0px"). */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height, 0px);
  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-accent-deep);
  background-color: var(--color-bg);
}

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

/* Both bars sticky (preview.css's own instruction) means an in-page anchor
   would otherwise land under the stack. No nav on this site points at one
   today, but a form or a future amendment might, and the offset costs
   nothing to state. */
section[id] {
  scroll-margin-block-start: calc(var(--expiry-height, 0px) + var(--layout-header-height));
}

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

.site-header__tel {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__tel:hover,
.site-header__tel:focus-visible {
  color: var(--color-accent-deep);
}

/* --- Buttons ------------------------------------------------------------------
   NO PILL TOKEN EXISTS (brief §3.3) — --radius-none throughout. F6: the
   primary control's label is dark ink on the gold fill, never white
   (5.11:1; white-on-gold measures only 3.13:1). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  padding-inline: var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  line-height: var(--leading-flat);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  min-height: var(--cta-height); /* the credited control, brief §5.3 */
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  /* --color-accent's own fill measures 2.83:1 against --color-bg (brief §4.1's
     own disclosure) — under the 3:1 WCAG 1.4.11 floor for a control's
     boundary. Not a Builder colour choice: the border reuses --color-accent-deep,
     a pairing the brief already validates at 5.32:1 (F5/N2), the same fix this
     house applied to buy.html's identical defect (css/preview.css's own
     .btn--buy border-color note) — extending an already-argued pairing to the
     resting state rather than inventing a new one. */
  border-color: var(--color-accent-deep);
}

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

/* --- Section kicker ("bead + caps label", copy.md's own recurring phrase for
   every section head, brief §5.4's eyebrow row note) -------------------------- */

.kicker__bead {
  display: inline-block;
  inline-size: var(--plate-pin-size);
  block-size: var(--plate-pin-size);
  border-radius: var(--radius-round);
  background-color: var(--color-accent);
  margin-inline-end: var(--space-2xs);
  vertical-align: middle;
}

.section__kicker,
.hero__eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  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; /* authored in natural case; uppercased here (spec §8) */
  color: var(--color-accent-deep); /* F5 */
}

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

.section__title {
  margin: 0;
  font-size: var(--text-h2);
  color: var(--color-ink); /* F1 */
}

.section__lead {
  margin-block-start: var(--space-sm);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted); /* F3 */
}

.section__foot {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.section__foot a:not(.btn) {
  color: var(--color-accent-deep);
}

/* ============================================================================
   HERO — §I, brief §5. DOM order: eyebrow -> h1 -> primary CTA -> field ->
   lead -> fact chips (§5.3). Mobile: normal block flow, each element's own
   margin does the §5.3 arithmetic. >=45rem: two-column grid, text left, field
   an inset panel right — grid-area assignment lets the field visually anchor
   right without touching DOM order (§5.1: the reading order rule is about the
   PLATES' own numerals, not about re-ordering markup for layout).
   ============================================================================ */

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

.hero__eyebrow {
  margin-block-end: var(--space-xs);
  min-block-size: var(--layout-header-height); /* the deliberate 20px-equivalent row is folded into this fixed-height flex row; see brief §5.3's own note that the round figure is generous rather than face-relative */
}

.hero__title {
  margin: 0 0 var(--hero-h1-gap) 0;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  color: var(--color-ink); /* F1 */
}

.hero__title-accent {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent-deep); /* opaque underline, never the raw fill — brief §3.1 */
  text-decoration-thickness: var(--border-thick);
  text-underline-offset: var(--space-3xs);
}

.hero__cta-wrap {
  margin: 0;
}

.hero__field {
  position: relative;
  z-index: var(--z-field);
  block-size: var(--field-height);
  margin-block-start: var(--space-sm);
  overflow: visible;
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: var(--z-atmosphere);
  background-image: radial-gradient(ellipse at 50% 42%, var(--color-surface) 0%, var(--color-atmosphere-deep) 100%);
}

.hero__lead {
  margin: var(--space-sm) 0 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--color-ink-muted); /* F3 */
}

.hero__facts {
  margin: var(--space-2xs) 0 0 0;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-accent-deep); /* F5 */
}

.hero__facts-sep {
  color: var(--color-ink-muted);
  margin-inline: var(--space-2xs);
}

/* --- The collage plates (brief §5, §7, §8) --------------------------------- */

.plate-slot {
  position: absolute;
  z-index: var(--z-plate);
  transform: translate(-50%, -50%);
}

/* Reading order 01-04, left to right, at every declared width (§5.1 rule 3).
   Percentages are of the field's own box, so the composition scales fluidly
   between the three plate-size/field-height steps without separate per-
   breakpoint coordinates. */
.plate-slot--01 { inset-inline-start: 20%; inset-block-start: 58%; }
.plate-slot--02 { inset-inline-start: 45%; inset-block-start: 24%; }
.plate-slot--03 { inset-inline-start: 68%; inset-block-start: 62%; }
.plate-slot--04 { inset-inline-start: 88%; inset-block-start: 26%; }

/* The signature move — "the specimens settle" (brief §8). One-shot, on load,
   never repeating: translateY(-14px) to the final position, at a CONSTANT
   rotation held throughout (the table's "starting offset" and "settles to"
   columns carry the same rotate() value — only the vertical offset moves). */
.plate-settle {
  animation-name: plate-settle-in;
  animation-duration: var(--duration-settle);
  animation-timing-function: var(--ease-settle);
  animation-fill-mode: both;
}

.plate-settle--01 { animation-delay: 150ms; }
.plate-settle--02 { animation-delay: 330ms; }
.plate-settle--03 { animation-delay: 510ms; }
.plate-settle--04 { animation-delay: 690ms; }

@keyframes plate-settle-in {
  from { transform: translateY(var(--settle-offset)); }
  to   { transform: translateY(0); }
}

.plate {
  display: block;
  inline-size: var(--plate-size);
  margin: 0;
  background-color: var(--color-surface); /* opaque, never rgba() — R4 */
  border: var(--border-hairline) var(--border-style) var(--color-accent-deep); /* N4 */
}

.plate--01 { transform: rotate(-4deg); }
.plate--02 { transform: rotate(3deg); }
.plate--03 { transform: rotate(2deg); }
.plate--04 { transform: rotate(-3deg); }

.plate img {
  width: 100%;
  height: auto;
  display: block;
}

.plate__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs);
  margin: var(--space-3xs) var(--space-3xs) var(--space-3xs);
  position: relative;
}

.plate__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-micro);
  color: var(--color-accent-deep); /* 4.73:1 on --color-surface — verified, still AA */
}

.plate__label {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-micro);
  color: var(--color-accent-deep);
}

/* The pin-tag dot. R1: --color-sprout marks a pin, nothing else — never text,
   never a focus colour, never larger than --plate-pin-size. Sways on its own
   independent, non-synchronised loop once settled (brief §8). */
.plate__pin {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inline-size: var(--plate-pin-size);
  block-size: var(--plate-pin-size);
  border-radius: var(--radius-round);
  background-color: var(--color-sprout);
  animation-name: plate-pin-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.plate--01 .plate__pin { animation-duration: var(--loop-pin-1); }
.plate--02 .plate__pin { animation-duration: var(--loop-pin-2); }
.plate--03 .plate__pin { animation-duration: var(--loop-pin-3); }
.plate--04 .plate__pin { animation-duration: var(--loop-pin-4); }

@keyframes plate-pin-sway {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--sway-distance), calc(var(--sway-distance) * -1)); }
}

/* --- >=45rem (720px): two-column hero, field becomes an inset panel --------
   (--field-height and --plate-size step up in tokens.css's own copy of this
   breakpoint — see the note there.) */
@media (min-width: 45rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr var(--hero-field-width);
    column-gap: var(--space-xl);
    align-items: start;
    grid-template-areas:
      "eyebrow field"
      "title   field"
      "cta     field"
      "lead    field"
      "facts   field";
  }

  .hero__eyebrow  { grid-area: eyebrow; }
  .hero__title    { grid-area: title; }
  .hero__cta-wrap { grid-area: cta; }
  .hero__field    { grid-area: field; margin-block-start: 0; }
  .hero__lead     { grid-area: lead; }
  .hero__facts    { grid-area: facts; }
}

/* >=64rem (1024px): no structural change here — only --field-height and
   --plate-size step down again, in tokens.css (brief §5.2). */

/* ============================================================================
   §II — services-specific. Plain editorial index (ref-008's move): no cards,
   no icons, a --color-rule hairline between rows.
   ============================================================================ */

.index-list {
  margin: var(--space-lg) 0 0 0;
  padding: 0;
  list-style: none;
}

.index-list__row {
  display: grid;
  grid-template-columns: minmax(0, var(--index-name-col)) 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule); /* N3, decorative separator, R5 */
}

.index-list__row:last-child {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.index-list__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-ink); /* F1 */
}

.index-list__desc {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted); /* F3 */
}

.index-list__foot {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* ============================================================================
   §III — process. Plain numbered rows — arabic digits, --font-body-strong,
   --color-ink-muted: a DIFFERENT face+colour role from the plates' 01-04
   (brief §6.2's nested-counter check).
   ============================================================================ */

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

.process-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.process-list__num {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-lead);
  color: var(--color-ink-muted); /* F3 — different colour role from the plates' accent-deep numerals */
}

.process-list__body {
  display: block;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

.process-list__title {
  display: block;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink); /* F1 */
  margin-block-end: var(--space-3xs);
}

/* ============================================================================
   §IV — service-area. One statement, typographic — no extra components.
   ============================================================================ */

/* ============================================================================
   §V — faq. Native <details>/<summary>, no counter on the marker (brief §V).
   ============================================================================ */

.faq-list {
  margin: var(--space-lg) 0 0 0;
  display: grid;
  gap: 0;
}

.faq-list__row {
  padding-block: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.faq-list__row:last-child {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.faq-list__q {
  cursor: pointer;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-lead);
  color: var(--color-ink); /* F1 */
  min-height: var(--layout-tap-min);
  display: flex;
  align-items: center;
}

.faq-list__a {
  margin: var(--space-sm) 0 0 0;
  max-width: var(--layout-measure);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted); /* F3 */
}

/* ============================================================================
   §VI — contact. One form (house-tech-spec §6).
   ============================================================================ */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
}

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

.field__label {
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink); /* F1 */
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-bg);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-ink-muted); /* N5 */
  border-radius: var(--radius-none);
}

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

.field__hint {
  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-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(--space-xl);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-accent-deep);
  font-size: var(--text-small);
  color: var(--color-ink-muted); /* F3 */
}

.site-footer__nap {
  font-style: normal;
  color: var(--color-ink);
}

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

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

/* ============================================================================
   Reduced motion — the signature move's own kill switch. base.css's global
   kill switch has no way to know about this site's own settle/sway tokens
   (--duration-settle, the four --loop-pin- tokens, --sway-distance), so this
   site adds its own. R7: no bang-important; this rule wins purely on source
   order and equal specificity against .plate-settle / .plate__pin above.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .plate-settle {
    animation: none;
    transform: translateY(0);
  }

  .plate__pin {
    animation: none;
  }
}