/* site.css — Daniel's Lawn Care & Landscaping (Longview, TX). Archetype
   ticket-column (brief §4): a hero built as a single oversized hand-written
   job-ticket scene on a living-turf base, followed by a column of
   individually-stamped job-cards carrying the business's two real incentive
   offers. Tokens only, no raw literals outside tokens.css (spec §3). */

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

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

/* Brief-specific: the hero, "What's on the ticket" and footer/contact
   sections share this wider container at >=64rem so their content edges
   align down the page (brief §5.1/§5.2/§5.3). Below 64rem it is identical
   to .container. */
.container--wide {
  max-width: var(--layout-container);
}

@media (min-width: 64em) {
  .container--wide {
    max-width: var(--layout-container-wide);
    padding-inline: var(--layout-gutter-wide);
  }
}

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

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

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

/* --- Header & navigation ---------------------------------------------------
   Brief §5.4: single row, same design at every width, sticky from the first
   build. No hamburger, no collapsible nav — the one in-page link renders
   inline next to the wordmark at every width (brief §5.4), so main.js's
   nav-toggle wiring simply finds nothing to wire (no [data-nav-toggle] in
   this markup) and no-ops. */

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

:root {
  scroll-padding-block-start: var(--space-3xl);
}

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

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

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

.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-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

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

/* The phone pill — brief §4.2 "a phone-pill call button," outside any nav,
   visible at every width. */
.site-header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--layout-tap-min);
  padding-inline: var(--space-sm);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.site-header__call:hover {
  background-color: var(--color-ink);
}

.site-header__call svg {
  flex: none;
}

/* --- Buttons ---------------------------------------------------------------- */

.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-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-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

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

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

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

/* --- Hero — brief §4.2/§5.1/§7. DOM order (binding, brief §2.1 correction):
   eyebrow -> H1 -> primary CTA -> ticket-scene (field) -> lead -> facts.
   Soft radial atmosphere behind the text block (ref-001 physics only). */

.hero {
  padding-block-start: var(--space-md);   /* brief §4.2: "1.5rem / 24px" at 375 */
  padding-block-end: var(--section-gap);
  background-image: radial-gradient(
    130% 90% at 80% -10%,
    var(--color-hero-atmosphere) 0%,
    var(--color-bg) 55%
  );
}

@media (min-width: 64em) {
  .hero {
    padding-block-start: var(--space-xl); /* brief §4.2: "4rem / 64px" at 1440 */
  }
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-3xs);
  margin: 0 0 var(--space-3xs);
}

.hero__eyebrow-trade,
.hero__eyebrow-place {
  margin: 0;
  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-ink-muted);
}

.hero__heading {
  margin: var(--space-3xs) 0 var(--space-sm);
  font-size: var(--text-h1);
}

.ln {
  display: block;
}

/* The one italic accent word on this site — brief §3.3, the H1's "done." */
.ln.grade em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent);
}

.hero__cta-row {
  margin: 0 0 var(--hero-cta-gap);
}

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

/* Facts row: omitted from the first screen at <64rem (brief §4.2 — the two
   real offers already land one scroll below), present as the fourth
   text-column row at >=64rem (brief §5.1). */
.hero__facts {
  display: none;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- The ticket-scene (the hero's living field, brief §9): turf band +
   ticket + pencil + sprig, three independently-timed ambient loops. The
   whole scene is aria-hidden (copy.md §I) — none of the three loops, nor
   the ticket's own "Job Ticket" label, carries information a screen-reader
   user needs; the business's real services are stated in words in §II. */

.ticket-scene {
  position: relative;
  height: var(--hero-field-height);
  margin-inline: var(--hero-scene-bleed);
  margin-block-end: var(--space-sm);
  overflow: hidden;
}

@media (min-width: 64em) {
  .ticket-scene {
    margin-inline: 0;
    border-radius: var(--radius-ticket);
  }
}

.hero__turf {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--hero-turf-height);
  overflow: hidden;
}

@media (min-width: 64em) {
  .hero__turf {
    height: 100%;
  }
}

.hero__turf picture,
.hero__turf img {
  width: 100%;
  height: 100%;
}

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

/* Route-ticket card (brief §9) — a flat paper plate, no customer data on its
   face (copy.md §I: "no customer name, no date, no service list and no
   numeral are written on the ticket face itself"). Sways on its own loop. */
.ticket {
  position: absolute;
  inset-block-start: var(--ticket-top);
  inset-inline-start: var(--ticket-left);
  width: min(var(--ticket-width), calc(100% - 2 * var(--ticket-left)));
  min-width: var(--ticket-min-width);
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-ticket);
  box-shadow: var(--shadow-ticket);
  animation: hero-sway var(--loop-ticket) var(--ease-in-out) infinite;
  transform-origin: 50% 100%;
}

.ticket__label {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
}

.ticket__rule {
  display: block;
  height: var(--border-hairline);
  margin-block-end: var(--space-sm);
  background-color: var(--color-border);
}

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

/* Pencil prop — a simple CSS-drawn shape, rocking on its own loop. */
.hero__pencil {
  position: absolute;
  inset-block-end: var(--pencil-bottom);
  inset-inline-end: var(--pencil-right);
  width: var(--pencil-width);
  height: var(--pencil-height);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    180deg,
    var(--color-accent) 0%,
    var(--color-accent) 85%,
    var(--color-ink) 85%,
    var(--color-ink) 100%
  );
  animation: hero-sway var(--loop-pencil) var(--ease-in-out) infinite;
  transform-origin: 50% 100%;
}

/* Sprig prop (CSS-drawn, distinct from the sprig-study raster near the
   footer) — swaying on its own loop. */
.hero__sprig {
  position: absolute;
  inset-block-end: var(--sprig-bottom);
  inset-inline-end: var(--sprig-right);
  width: var(--sprig-width);
  height: var(--sprig-height);
  background-color: var(--color-support);
  border-radius: var(--shape-leaf);
  animation: hero-sway var(--loop-sprig) var(--ease-in-out) infinite;
  transform-origin: 50% 100%;
}

@keyframes hero-sway {
  0%, 100% { transform: rotate(calc(var(--sway-angle) * -1)); }
  50% { transform: rotate(var(--sway-angle)); }
}

/* prefers-reduced-motion (spec §8, brief §9 — no exceptions): freeze all
   three at a neutral rest transform. base.css's blanket --duration-*
   collapse does not reach --loop-ticket/--loop-pencil/--loop-sprig, since
   those are brief-specific tokens, so the freeze is explicit here. */
@media (prefers-reduced-motion: reduce) {
  .ticket,
  .hero__pencil,
  .hero__sprig {
    animation: none;
    transform: rotate(0deg);
  }
}

/* --- Desktop hero composition (brief §5.1, >=64rem): explicit grid
   placement, not DOM reordering. Container capped at 90rem with 4.5rem side
   padding (.container--wide, above) so at exactly 1440px the content area
   is 1296px: a fixed 36rem (576px) text column, a 56px gap, and the scene
   column at 664px. */
@media (min-width: 64em) {
  .hero__inner {
    display: grid;
    grid-template-columns: var(--hero-text-column) 1fr;
    grid-template-rows: repeat(5, auto);
    column-gap: var(--hero-column-gap);
  }

  .hero__eyebrow { grid-column: 1; grid-row: 1; }
  .hero__heading { grid-column: 1; grid-row: 2; }
  .hero__cta-row { grid-column: 1; grid-row: 3; margin-block-end: 0; }
  .hero__lead { grid-column: 1; grid-row: 4; margin-block-end: 0; max-width: var(--hero-lead-measure); }
  .hero__facts { grid-column: 1; grid-row: 5; display: block; margin-block-start: var(--space-md); }

  .ticket-scene {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    height: auto;
    aspect-ratio: 8 / 5;
    margin-block-end: 0;
  }
}

/* --- "What's on the ticket" (brief §4.1 row 2, §5.2) ------------------------ */

.section-figure {
  margin: 0 0 var(--space-md);
  max-width: var(--section-figure-max-width);
}

.section-figure picture,
.section-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-ticket);
}

h2 {
  margin-block-start: 0;
  font-size: var(--text-h2);
}

.job-cards {
  display: grid;
  gap: var(--job-card-gap);
  margin-block-start: var(--space-md);
}

.job-cards__pair {
  display: grid;
  gap: var(--job-card-gap);
}

@media (min-width: 64em) {
  #the-ticket .container--wide { display: grid; grid-template-columns: var(--section-figure-max-width) 1fr; column-gap: var(--hero-column-gap); }
  #the-ticket .section-figure { grid-row: 1 / 3; margin-block-end: 0; }
  #the-ticket .job-cards { grid-column: 1 / -1; }

  .job-cards__pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--job-card-col-gap);
  }

  .job-card--regular {
    max-width: var(--job-card-row-max-width);
    margin-inline: auto;
  }
}

/* The three job-cards are deliberately not uniform (brief §8): the two
   stamped cards carry --shadow-ticket and the fern stamp because they each
   drive a commercial action; the unstamped "regular stop" carries the
   lighter --shadow-sm and no stamp, because its job is structural. */
.job-card {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-ticket);
}

.job-card--stamped {
  box-shadow: var(--shadow-ticket);
}

.job-card--regular {
  box-shadow: var(--shadow-sm);
}

.job-card__stamp {
  display: inline-block;
  margin: 0 0 var(--space-sm);
  padding: var(--space-3xs) var(--space-sm);
  border: var(--border-thick) var(--border-style) var(--color-support);
  border-radius: var(--radius-sm);
  transform: rotate(-4deg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-support);
}

.job-card__label {
  margin: 0 0 var(--space-3xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

.job-card__heading {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
}

.job-card__body {
  margin: 0 0 var(--space-sm);
  color: var(--color-ink);
}

.job-card__body:last-of-type {
  margin-block-end: 0;
}

.job-card__note {
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Footer / contact (brief §4.1 row 9, §5.3, §6) -------------------------- */

.contact-wrap {
  max-width: 100%;
}

@media (min-width: 64em) {
  .contact-wrap {
    max-width: var(--contact-max-width);
    margin-inline: auto;
  }
}

.contact__secondary {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-muted);
}

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

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

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

.field__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  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-bg);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  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);
}

.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 (shared block) --------------------------------------------- */

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

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

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-sm);
}

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

/* The sprig-study accent near the NAP block (brief §7 slot 3) — a real
   content image, not decorative chrome, so it carries its own alt text and
   is never aria-hidden. */
.site-footer__sprig {
  flex: none;
  margin: 0;
  width: var(--footer-sprig-width);
}

.site-footer__sprig picture,
.site-footer__sprig img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-ticket);
}

/* 64em and up: the footer's centred column holds inside the shared wide
   container applied to every other section (brief §5.3); nothing extra
   needed here beyond .contact-wrap above. */