/* site.css — all-pro-lawn-service-boise-id. Family `retro-local`, archetype
   `editorial-stack`, signature "the painted shadow". Tokens-only (spec §3);
   two declared breakpoints (brief §2.7): 45.5rem, 48rem. */

/* --- Layout primitives — --section-gap fixed 64px everywhere (brief §5.5) */

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

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

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

/* --- The section-head object (brief §5.1.2): rule + eyebrow + h2, reused
   everywhere including the hero (its rule is the first instance). */

.rule {
  block-size: var(--rule-section);
  background-color: var(--color-ink);
  margin-block-end: var(--space-xs);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.section-head {
  margin-block-end: var(--space-md);
}

.section-head .eyebrow {
  color: var(--color-accent);
  margin-block-end: var(--space-xs);
}

/* The painted shadow — h1 and h2, sitewide (brief §5.4, R11). Fires once
   on the hero h1 (js/main.js, .hero__h1 below); static elsewhere. */
h1,
h2 {
  text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-accent);
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0;
}

/* --- Header — sticky beneath the expiry bar, 101px stack (brief §5.6) --- */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
  z-index: var(--z-header);
  block-size: var(--header-height);
  display: flex;
  align-items: center;
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
  background-color: var(--color-bg);
}

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

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

.site-header__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-echo);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

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

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  text-decoration: none;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink);
}

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

/* Below 48rem the tel: link alone is offered; no toggle (brief §6.1). The
   tel: link lives inside <nav> at every width (brief §6.1 frames it as part
   of the nav: "the tel: alone at <48rem ... four in-page anchors ... plus
   the tel:") — only the anchor list collapses. */
.site-nav__list {
  display: none;
}

@media (min-width: 48rem) {
  .site-nav__list {
    display: flex;
  }
}

/* Anchor targets need clearance for the sticky 101px stack. */
[id] {
  scroll-margin-block-start: calc(var(--expiry-height) + var(--header-height) + var(--border-hairline));
}

/* --- Buttons — one echo-filled primary, four instances (brief §5.3, §6) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: var(--control-height); /* not min-height — CLS fix, README.md */
  padding-inline: var(--space-md);
  border: 0;
  border-radius: var(--radius-none);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-control);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  width: 100%;
  background-color: var(--color-echo);
  color: var(--color-echo-ink);
}

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

@media (min-width: 48rem) {
  .btn--primary {
    width: auto;
    min-width: var(--control-min-width);
  }
}

/* --- Hero — the atmosphere gradient is the ONLY gradient on the site (R2) - */

.hero {
  background: radial-gradient(122% 84% at 22% 6%,
    var(--color-atmos-hi) 0%, var(--color-atmos-mid) 50%, var(--color-atmos-lo) 100%);
  padding-block-start: var(--space-sm);
  padding-block-end: var(--section-gap);
}

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

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

.hero__eyebrow {
  margin-block-end: var(--space-xs);
  color: var(--color-ink-muted);
}

.hero__h1 {
  margin: 0;
  max-width: var(--h1-max);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.hero__cta {
  margin: var(--space-sm) 0 0;
}

.hero__field {
  position: relative;
  margin-block-start: var(--space-md);
  aspect-ratio: var(--hero-field-ratio);
  overflow: hidden;
  margin-inline: calc(var(--layout-gutter) * -1); /* full-bleed below 48rem */
}

@media (min-width: 48rem) {
  .hero__field {
    margin-inline: 0;
  }
}

.hero__field picture,
.hero__field img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__satellites {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__haze {
  transform-origin: center;
  animation: hero-haze var(--duration-haze) ease-in-out infinite;
}

.hero__mote {
  animation-name: hero-mote;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.hero__mote--1 { animation-duration: var(--duration-mote-1); }
.hero__mote--2 { animation-duration: var(--duration-mote-2); animation-delay: var(--mote-2-delay); }
.hero__mote--3 { animation-duration: var(--duration-mote-3); animation-delay: var(--mote-3-delay); }

@keyframes hero-haze {
  0%   { opacity: 0.20; }
  50%  { opacity: 0.48; }
  100% { opacity: 0.20; }
}

@keyframes hero-mote {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--mote-path-a)); }
  50%  { transform: translate(var(--mote-path-b)); }
  75%  { transform: translate(var(--mote-path-c)); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__haze { animation: none; opacity: var(--rm-haze-opacity); }
  .hero__mote { animation: none; }
  .hero__mote--1 { transform: translate(var(--mote-rest-1)); }
  .hero__mote--2 { transform: translate(var(--mote-rest-2)); }
  .hero__mote--3 { transform: translate(var(--mote-rest-3)); }
}

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

.facts {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) 0 0;
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.facts li:not(:first-child)::before {
  content: '\00B7';
  margin-inline-end: var(--space-2xs);
}

/* The signature press (brief §8.2) — higher specificity than the rule
   above overrides it: invisible offset first, then the transition. */
.hero__h1 {
  text-shadow: 0 0 0 var(--color-accent);
  transition: text-shadow var(--duration-slow) var(--ease-out);
  transition-delay: var(--press-delay);
}

.hero__h1[data-pressed] {
  text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .hero__h1 {
    text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-accent);
    transition: none;
  }
}

/* --- Index lists — hairline-separated, not cards (brief §5, §6 §II/§VII) */

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

.index-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.index-list .index-row:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

@media (min-width: 48rem) {
  .index-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .index-row__desc {
    text-align: end;
  }
}

.index-row__name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.index-row__desc {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

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

.service-group:first-of-type {
  margin-block-start: 0;
}

.service-group__label {
  margin: 0 0 var(--space-2xs);
  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;
  color: var(--color-accent);
}

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

.services-image picture,
.services-image img {
  display: block;
  width: 100%;
  height: auto;
}

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

/* --- The programme (brief §6 §III) --- */

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

.programme-block:first-of-type {
  margin-block-start: var(--space-md);
}

.block-label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink);
}

.programme-lead {
  margin: 0 0 var(--space-sm);
  max-width: var(--layout-measure);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  font-style: italic;
}

.app-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
}

.app-list .app-row:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

@media (min-width: 48rem) {
  .app-row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-md);
  }
}

.app-row__season {
  flex: 0 0 auto;
  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;
  color: var(--color-accent);
}

.app-row__season:empty::before {
  content: '';
  display: inline-block;
}

.app-row__purpose {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

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

.perimeter-row {
  padding-block: var(--space-2xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.perimeter-list .perimeter-row:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

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

.blowout-copy p {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.blowout-copy p:last-child {
  margin-block-end: 0;
}

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

.programme-image picture,
.programme-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- The board (brief §6 §IV) — painted offset as inset left rule; needs
   >=22px row height at 3px, >=24px at 5px, else yields to hairline. */

.board-image {
  margin-block-end: var(--space-lg);
}

.board-image picture,
.board-image img {
  display: block;
  width: 100%;
  height: auto;
}

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

.board__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--space-md); /* 24px — clears the 5px-offset minimum at every width */
  padding-block: var(--space-xs);
  padding-inline-start: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
  box-shadow: inset var(--shadow-offset) 0 0 var(--color-accent);
}

.board .board__row:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.board__role {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.board__count {
  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;
  color: var(--color-accent);
}

.board__foot {
  margin: var(--space-md) 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

.board__foot p {
  margin: 0 0 var(--space-2xs);
}

.board__foot p:last-child {
  margin-block-end: 0;
}

/* --- The one dark band (brief §6 §V, R5). No painted offset here (R11). */

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

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

.band__kicker {
  margin: 0 0 var(--space-sm);
  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;
  color: var(--color-accent-onband);
}

.band__sentence {
  margin: 0;
  max-width: var(--h1-max);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-band-ink);
}

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

/* --- Reserved slots — reviews, gallery, visibly empty (brief §6 §VI/§VIII) */

.reserved {
  min-height: var(--reserved-height);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xs);
  background-color: var(--color-surface);
  border: var(--border-hairline) dashed var(--color-border);
}

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

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

/* --- FAQ (brief §6 §IX) — plus/minus marker is the ornament, no numeral */

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

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

.faq-list .faq-item:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__marker {
  flex: 0 0 auto;
  position: relative;
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
}

.faq-item__marker::before,
.faq-item__marker::after {
  content: '';
  position: absolute;
  background-color: var(--color-accent);
}

.faq-item__marker::before {
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 100%;
  block-size: var(--border-thick);
  transform: translateY(-50%);
}

.faq-item__marker::after {
  inset-inline-start: 50%;
  inset-block-start: 0;
  inline-size: var(--border-thick);
  block-size: 100%;
  transform: translateX(-50%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq-item[open] .faq-item__marker::after {
  transform: translateX(-50%) scaleY(0);
}

.faq-item__a {
  margin: 0 0 var(--space-sm);
  max-width: var(--layout-measure);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* --- Contact / quote (brief §6 §X) --- */

.contact-lead {
  margin: var(--space-sm) 0 0;
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

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

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

.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 {
  padding-block: var(--space-xs);
  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-small);
  color: var(--color-ink-muted);
}

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

.contact-secondary {
  margin: var(--space-md) 0 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.contact-secondary a {
  color: var(--color-echo);
}

/* --- Footer — NAP only; no hours (once, in the hero facts line), no
   copyright line (not theirs until bought). */

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

.site-footer__nap {
  font-style: normal;
  line-height: var(--leading-body);
}

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

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

/* --- thanks.html / buy.html — thin content sections --- */

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

.thin-section .eyebrow {
  color: var(--color-ink-muted);
}

.thin-section h1 {
  margin: var(--space-xs) 0 0;
  max-width: var(--h1-max);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.thin-section__lead {
  margin: var(--space-sm) 0 0;
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.thin-section__actions {
  margin: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.btn--quiet {
  background: none;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
  min-height: var(--layout-tap-min);
}