/* ==========================================================================
   site.css — anderson-landscape-green-bay-wi, built FROM tokens.
   HARD RULE (house-tech-spec §3): no raw hex, no px/rem literal, no
   font-name literal in this file — tokens only, the Critic greps for it.
   The shell (header/nav, section rhythm, buttons, form, footer) is the
   skeleton's; every component below it is written per this brief's
   split-hero archetype (design-rules §7).
   ========================================================================== */

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

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

/* Vertical rhythm hook. --section-gap is the only inter-section spacing value
   on a site (design-rules §7.1); the brief picks which scale step it is. */
.section {
  padding-block: var(--section-gap);
}

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

/* --- Header & navigation --------------------------------------------------
   Progressive enhancement: with JS off the nav list is a plain, always-visible
   list of links and the toggle stays [hidden] (it ships hidden in the HTML;
   main.js reveals it). With JS on, narrow viewports collapse the list behind
   the toggle. Nothing about navigation depends on JavaScript.              */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: 0;
  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: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

.site-header__brand {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* Phone sits OUTSIDE the collapsible nav (brief §4.4 step 1: visible at 375
   without opening the menu). margin-inline-start: auto clusters it with the
   toggle at the row's trailing edge while the brand stays pinned to the
   leading edge — the wordmark is the one thing allowed to shrink first
   (text-overflow: ellipsis above), never the phone or the toggle. */
.site-header__phone {
  flex-shrink: 0;
  margin-inline-start: auto;
  white-space: nowrap;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent);
  text-decoration: none;
}

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

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

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

/* Collapsed state exists only once JS has armed it. */
[data-nav-ready] .site-nav[data-nav-open='false'] {
  display: none;
}

[data-nav-ready] .site-nav {
  flex-basis: 100%;
}

@media (min-width: 48em) {
  [data-nav-ready] .site-nav[data-nav-open='false'] {
    display: block;
  }

  [data-nav-ready] .site-nav {
    flex-basis: auto;
  }

  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons --------------------------------------------------------------
   Two roles, no more. Radius, weight and colour all come from the brief via
   tokens — including --radius-none, which is a legitimate answer.          */

.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-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);
  min-height: var(--control-height-primary);
}

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

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

.btn--quiet:hover,
.btn--quiet:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Form -----------------------------------------------------------------
   One form per site (spec §6). POSTs to the endpoint constant in main.js;
   works as a plain HTML POST with JS off; auto-hides when no endpoint is
   configured so a spec site never shows a dead form.                       */

.form {
  display: grid;
  gap: 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-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 assistive
   tech. Not display:none — some bots skip those. */
.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-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
}

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

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

/* --- BRIEF COMPONENTS — brief.md v1 (C3 PASS), family warm-craft,
   archetype split-hero. Built FROM tokens (spec §3): no raw literal
   outside tokens.css or an @allow-literal line. --- */

/* --- Eyebrows and section heads — the page's spine (brief §4.1 rule 4) ---
   Every section head is trim-line arc (static, reused) → caps eyebrow
   (accent) → h2 carrying one italic accent word (accent-3). */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* The H1's accent word, each h2's accent word, the one pull-quote — the
   italic role's whole, closed scope (brief §2.6). Colour matches contrast
   table row 9 (accent-3 on bg, 4.99–5.58:1). Font-family/weight/tight
   leading are inherited from the parent h1/h2 (base.css); only style,
   weight and colour change here. */
.accent-em {
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent-3);
}

/* The trim-line arc: a static, unfilled 64×12 stroke reused at the head of
   every section below the hero, one step further along its own conceptual
   length each time (brief §4.1 rule 4). --space-xl (64px) matches the SVG's
   own viewBox width exactly, so no new size token is needed. */
.section-head__mark {
  margin-block-end: var(--space-sm);
}

.section-head__mark svg {
  display: block;
  inline-size: var(--space-xl);
  block-size: auto;
}

.section-head__mark path {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: var(--border-trim);
  stroke-linecap: round;
}

.section-head {
  display: grid;
  gap: var(--space-2xs);
  margin-block-end: var(--space-lg);
}

.section-head h2 {
  font-size: var(--text-h2);
}

.section-head > .measure {
  margin-block-start: var(--space-xs);
  color: var(--color-ink-muted);
}

/* service-area (§4.4 step 7) reuses the section-head object directly on its
   own container, one level up from a dedicated .section-head wrapper. */
.service-area {
  display: grid;
  gap: var(--space-2xs);
}

.service-area > .section-head__mark {
  margin-block-end: var(--space-sm);
}

.service-area h2 {
  font-size: var(--text-h2);
}

.service-area p {
  margin-block-start: var(--space-xs);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- HERO — split-hero (brief §4.1–§4.3, §5). Single column below 768:
   eyebrow → h1 → CTA → field → lead → facts, house order at every width.
   At ≥768 the same DOM order renders into the 44/56 grid split
   (--hero-col-text / --hero-col-field) without reordering it. --- */

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

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.hero__h1 {
  margin-block-start: var(--space-xs);
  font-size: var(--text-h1);
}

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

.hero__field {
  margin-block-start: var(--space-md);
  aspect-ratio: 5 / 3;
  background-color: var(--color-field-bg);
}

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

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  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);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

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

  .hero__grid {
    grid-template-columns: var(--hero-col-text) var(--hero-col-field);
    grid-template-rows: repeat(5, auto);
    column-gap: var(--space-lg);
    align-items: start;
  }

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

  .hero__eyebrow { margin-block-start: 0; }
  .hero__h1 { margin-block-start: var(--space-sm); }
  .hero__cta { margin-block-start: var(--space-lg); }
  .hero__lead { margin-block-start: var(--space-md); }
  .hero__facts { margin-block-start: var(--space-md); }

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

/* --- Trim-line/sprig field (brief §4.3), the site's one living-hero
   moment. Inline SVG, zero image request; main.js's initTrimField() sets
   position/visibility at the live field width, this file only draws. --- */

.trim-svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.trim-line {
  stroke: var(--color-ink);
  stroke-width: var(--border-trim);
}

.sprig-mark__stem {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: var(--border-trim);
  stroke-linecap: round;
}

.sprig-mark__leaf {
  fill: var(--color-accent);
}

/* Sway: five independent, non-synchronised durations (brief §4.3 Motion) —
   sprigs 1–4 carry the four base durations, 5–8 repeat them with a
   staggered delay. Rotation pivots at the stem's own base (the symbol's
   bottom-centre) via `rotate`, which composes with the `transform`
   attribute main.js sets for position — the two never contend. */
.sprig {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sprig-sway var(--duration-sprig-1) var(--ease-in-out) infinite alternate;
}

.sprig[data-sprig-index='2'] { animation-duration: var(--duration-sprig-2); }
.sprig[data-sprig-index='3'] { animation-duration: var(--duration-sprig-3); }
.sprig[data-sprig-index='4'] { animation-duration: var(--duration-sprig-4); }
.sprig[data-sprig-index='5'] { animation-duration: var(--duration-sprig-1); animation-delay: var(--sprig-delay-5); }
.sprig[data-sprig-index='6'] { animation-duration: var(--duration-sprig-2); animation-delay: var(--sprig-delay-5); }
.sprig[data-sprig-index='7'] { animation-duration: var(--duration-sprig-3); animation-delay: var(--sprig-delay-5); }
.sprig[data-sprig-index='8'] { animation-duration: var(--duration-sprig-4); animation-delay: var(--sprig-delay-5); }

@keyframes sprig-sway {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}

/* reduced-motion freezes every sprig at its 0° rest angle — not hidden
   (brief §4.3 Motion). The trim-line is static in both states already. */
@media (prefers-reduced-motion: reduce) {
  .sprig {
    animation: none;
    rotate: 0deg;
  }
}

/* --- SERVICES [LOAD-BEARING] — five hand-set numbered rows (brief §1
   ref-008 adaptation, §4.2). No card chrome. The numeral badge is a
   STAMPED CIRCULAR MARK — ink-stroked, honey-ochre fill (§2.6, §3.3 row
   11) — drawn with clip-path, never border-radius, so it and R5's "no
   element gets a corner radius" both hold: clip-path isn't that property. --- */

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

.service-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.service-row:first-child {
  padding-block-start: 0;
}

.service-row:last-child {
  border-bottom: 0;
  padding-block-end: 0;
}

.service-row__badge,
.process-step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-lg);
  block-size: var(--space-lg);
  clip-path: circle(50%);
  background-color: var(--color-accent-2);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--font-weight-display);
  font-style: normal;
  color: var(--color-ink);
}

.service-row__swatch {
  inline-size: var(--space-md);
  block-size: var(--space-md);
  background-color: var(--color-accent);
}

.service-row__swatch--1 { background-color: var(--color-accent); }
.service-row__swatch--2 { background-color: var(--color-accent-3); }
.service-row__swatch--3 { background-color: var(--color-accent-2); }
.service-row__swatch--4 {
  background-image: linear-gradient(135deg, var(--color-accent) 0%, var(--color-ink-muted) 100%);
}
.service-row__swatch--5 {
  background-image: linear-gradient(135deg, var(--color-ink-muted) 0%, var(--color-border) 100%);
}

.service-row__name {
  font-size: var(--text-h3);
}

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

/* --- SEASON-STRIP (device, brief §4.4 step 4) — four cards, one shared
   illustrated texture (imagery slot 3), tinted per card via CSS. --- */

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

.season-card {
  position: relative;
  overflow: clip;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.season-card__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
}

/* `<picture>` is an unstyled inline box by default and would otherwise size
   to its content (the img) rather than to this wrapper, leaving the img's
   own block-size:100% with nothing definite to resolve against — so both
   the picture and the img are sized here, not the img alone. */
.season-card__texture picture,
.season-card__texture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.season-card__texture img {
  object-fit: cover;
}

.season-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--season-tint, var(--color-accent));
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.season-card:nth-child(1) { --season-tint: var(--color-accent); }
.season-card:nth-child(2) { --season-tint: var(--color-accent-2); }
.season-card:nth-child(3) { --season-tint: var(--color-accent-3); }
.season-card:nth-child(4) { --season-tint: var(--color-ink-muted); }

.season-card__body {
  position: relative;
  z-index: 1;
}

.season-card__window {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.season-card__heading {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-h3);
}

.season-card__desc {
  margin-block-start: var(--space-2xs);
  color: var(--color-ink-muted);
}

@media (min-width: 48em) {
  .season-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .season-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- TRUST-STRIP (brief §4.4 step 5) — three V-tier facts plus the
   site's one italic pull-quote (§2.6's note; copy.md places it here).
   Imagery slot 5 (local-character band) sits behind at low opacity. --- */

.section--band {
  position: relative;
  isolation: isolate;
}

.trust-band__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.28;
}

.trust-band__image picture,
.trust-band__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.trust-band__image img {
  object-fit: cover;
}

.trust-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg);
  opacity: 0.62;
}

.section--band > .container {
  position: relative;
  z-index: 1;
}

.pull-quote {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  line-height: var(--leading-h2);
  color: var(--color-ink);
}

.trust-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-xs);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

/* --- PROCESS ("How It Works," brief §4.4 step 6) — 3 steps. Imagery slot
   4 beside the heading. Numeral badges reuse the services list's own
   device (shared rule above) — the two never nest, so no further
   distinction is owed (§2.6). --- */

.process-head {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr;
}

.process-head__image {
  inline-size: var(--space-3xl);
  block-size: var(--space-3xl);
  overflow: clip;
}

.process-head__image picture,
.process-head__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.process-head__image img {
  object-fit: cover;
}

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

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

.process-step__title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
}

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

@media (min-width: 48em) {
  .process-head {
    grid-template-columns: 1fr auto;
  }
}

/* --- FAQ (brief §4.4 step 8) — native <details>/<summary>, zero JS. --- */

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

.faq-item {
  padding-block-end: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq-item:last-child {
  border-bottom: 0;
  padding-block-end: 0;
}

.faq-item summary {
  cursor: pointer;
  padding-block: var(--space-xs);
}

.faq-item summary::-webkit-details-marker {
  color: var(--color-accent);
}

.faq-item__q {
  display: inline;
  font-size: var(--text-h3);
}

.faq-item p {
  margin-block-start: var(--space-2xs);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- FINAL CTA / CONTACT (brief §4.4 step 9) — phone CTA + quote form. --- */

.contact-ctas {
  margin-block: var(--space-md);
}