/* ==========================================================================
   site.css — bend-lawn-service-bend-or. Brief.md v1 (C3 APPROVED), family
   bold-industrial, archetype split-hero, signature "the bid stamps down".

   HARD RULE (house-tech-spec §3): no raw hex, no px/rem size literals, no
   font-name literals in this file. Tokens only (percentages are proportional
   layout math, not size literals, and are used freely for the hero's
   overlay positioning).
   ========================================================================== */

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

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

/* Sticky chrome (brief §6: "Sticky chrome (both pages)"). .expiry's own
   sticky rule lives in preview.css, the file it belongs to; the header
   sticks just below it. Every section[id] gets the matching scroll-margin so
   the hero CTA's #contact jump does not land under the fixed chrome. */
.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
}

section[id] {
  scroll-margin-block-start: calc(var(--expiry-height) + var(--header-height) + var(--border-hairline));
}

/* --- Header (brief §6: wordmark left, tel: link right — no nav) ---------- */

.site-header {
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

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

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

.site-header__phone {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent);
  text-decoration: none;
}

/* --- Buttons --------------------------------------------------------------
   R5 (brief §3.2): --radius-none everywhere. No shadow anywhere. */

.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-none);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

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

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

/* --- Eyebrow (brief §I: Barlow 600, --text-eyebrow, --tracking-wide,
   uppercase via CSS). Colour is a Builder execution fill: no role is stated
   in the brief, so it takes the already-computed, already-passing
   ink-muted/bg pair (brief §4.1 row 2) rather than a new value. */

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

/* --- Hero (brief §5, §7, §8) ----------------------------------------------- */

.hero,
.page-head {
  padding-block-start: var(--hero-pad-top);
  padding-block-end: var(--section-gap);
}

.hero__grid {
  display: flex;
  flex-direction: column;
}

@media (min-width: 64em) {
  .hero__grid {
    display: grid;
    grid-template-columns: var(--hero-text-col-width) 1fr;
    align-items: start;
    gap: var(--layout-gutter);
  }
}

.hero__title {
  margin: 0;
  margin-block-start: var(--hero-gap-eyebrow-h1);
  font-size: var(--text-display);
}

.hero__line {
  display: block;
  height: calc(var(--text-display) * var(--leading-tight));
  line-height: calc(var(--text-display) * var(--leading-tight));
  overflow: hidden;
}

.hero__accent {
  color: var(--color-accent);
}

.hero__cta-wrap {
  margin: 0;
  margin-block-start: var(--hero-gap-h1-cta);
}

/* The field follows the ask in DOM flow below 1024 (brief §5.1 rule 1); the
   18px gap from the CTA's bottom is the same value as the h1→CTA gap at this
   width, so the existing token is reused rather than a new one declared for
   an identical number. At ≥1024 the field sits beside the text column
   instead, sharing its top via the grid — no margin needed. */
.hero__field {
  position: relative;
  overflow: hidden;
  height: var(--hero-field-height);
  margin-block-start: var(--hero-gap-h1-cta);
}

@media (min-width: 64em) {
  .hero__field {
    margin-block-start: 0;
  }
}

/* .hero__cover reproduces exactly what object-fit:cover computes internally for
   .hero__image — a box sized to the image's own 1500:1006 intrinsic ratio
   (matching the <img width="1500" height="1006"> attributes already in the
   markup), clamped to never be smaller than the field in either dimension, then
   shifted so the stated object-position fraction (unchanged from the values this
   regime already used) aligns with the field's own edges. Because this box's
   aspect ratio always equals the image's own, ANY point inside it — including the
   ticket rectangle below — sits at the same percentage of the box at every
   viewport width. This is what removes the crop-axis dependency (brief §13.2)
   without changing --hero-field-height (§5.2) or any fold arithmetic (§5.5). */
.hero__cover {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1500 / 1006;
  inset-block-start: 48%;     /* <1024 — the object-position Y fraction this regime already used */
  inset-inline-start: 38%;    /* <1024 — the object-position X fraction this regime already used */
  transform: translate(-38%, -48%);
}

@media (min-width: 64em) {
  .hero__cover {
    inset-block-start: 44%;   /* ≥1024 — the object-position Y fraction this regime already used */
    inset-inline-start: 46%;  /* ≥1024 — the object-position X fraction this regime already used */
    transform: translate(-46%, -44%);
  }
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* No object-fit/object-position: .hero__cover is already sized to exactly the
     image's own intrinsic aspect ratio, so the image fills it edge-to-edge with
     no further fitting needed. */
}

/* .hero__ticket is now a child of .hero__cover, not of .hero__field directly.
   Its percentages are fractions of the FULL image frame (the fitted rectangle
   from the README's four-corner measurement: centre 42.08%/53.03%, width
   47.30%, height 38.44%) and are therefore constant at every viewport width, in
   BOTH breakpoint regimes — no media query needed for this rule. Values are
   unchanged from the already-shipped, already-QA-confirmed ≥1024 numbers; only
   their scope widens from "≥1024 only" to "always." */
.hero__ticket {
  position: absolute;
  inset-inline-start: 18.43%;  /* = fx_center(42.08%) − fw/2(23.65%) */
  inset-block-start: 33.81%;   /* = fy_center(53.03%) − fh/2(19.22%) */
  width: 47.30%;               /* = fw, the fitted rectangle's width fraction */
  height: 38.44%;              /* = fh, the fitted rectangle's height fraction */
  background-color: var(--color-surface);
  transform: rotate(var(--hero-ticket-rotate));
}

/* The stamp: a small CSS shape (handle + head) matching the photo's own
   depicted stamp silhouette, in the accent colour reserved for the stamp
   head/ink pad (brief §7.3's palette echo). One-shot press-and-settle,
   carried unchanged from the C2-winning tile (brief §8.2) — the keyframe
   percentages below are the brief's own millisecond marks divided by the
   5000ms sequence: 900ms=18%, 1300ms=26%, 2000ms=40%. */
.hero__stamp {
  position: absolute;
  inset-inline-start: 62%;
  inset-block-start: 30%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-14%);
  animation: hero-stamp-press var(--duration-press-sequence) var(--ease-standard) 1 both;
}

.hero__stamp-handle {
  display: block;
  width: var(--ornament-stamp-handle-w);
  height: var(--ornament-stamp-handle-h);
  border-radius: var(--ornament-stamp-handle-radius);
  background-color: var(--color-ink-muted);
}

.hero__stamp-head {
  display: block;
  width: var(--ornament-stamp-head-w);
  height: var(--ornament-stamp-head-h);
  border-radius: var(--ornament-stamp-head-radius);
  background-color: var(--color-accent);
}

@keyframes hero-stamp-press {
  0%    { transform: translateY(-14%); }  /* 0ms — elevated rest */
  18%   { transform: translateY(0%); }    /* 900ms — pressed down */
  26%   { transform: translateY(0%); }    /* 1300ms — still pressed (hold) */
  40%   { transform: translateY(-14%); }  /* 2000ms — lifted back up */
  100%  { transform: translateY(-14%); }  /* 2000–5000ms — static hold */
}

/* The "BID" imprint: real HTML text, the hero's one piece of copy inside the
   field, inside the accent-fill chip (brief §4.1 row 7 — accent-ink on
   accent fill, 11.10:1). Fires 1200–1500ms = 24–30% of the sequence,
   overlapping the stamp's lift (brief §8.2). */
.hero__imprint {
  position: absolute;
  inset-block-end: 6%;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-ink);
  background-color: var(--color-accent);
  padding-inline: var(--space-xs);
  padding-block: var(--space-3xs);
  opacity: 0;
  animation: hero-imprint-fade var(--duration-press-sequence) linear 1 both;
}

@keyframes hero-imprint-fade {
  0%   { opacity: 0; }
  24%  { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Satellite loops (brief §8.2): independent, non-synchronised, continuous —
   never registered against the image, floating near the field's margin. */
.hero__pencil {
  position: absolute;
  inset-inline-start: 6%;
  inset-block-end: 8%;
  width: var(--ornament-pencil-w);
  height: var(--ornament-pencil-h);
  border-radius: var(--ornament-pencil-radius);
  background-color: var(--color-ink-muted);
  transform-origin: 50% 50%;
  animation: hero-pencil-rock var(--loop-pencil-rock) ease-in-out infinite;
}

@keyframes hero-pencil-rock {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* QA round 1: was a bordered rounded-rectangle (no paperclip silhouette at
   all — read as a stray outline, not an ambient desk object). Replaced with
   an inline SVG tracing a simple two-loop paperclip bend, stroked only (no
   fill), at the same footprint the brief's ornament tokens already state.
   Motion, timing and position are unchanged (brief §8.2's 12s independent
   loop) — only the shape drawn inside the same box changed. */
.hero__clip {
  position: absolute;
  inset-inline-end: 5%;
  inset-block-start: 6%;
  width: var(--ornament-clip-w);
  height: var(--ornament-clip-h);
  color: var(--color-ink-muted);
  opacity: 0.55;
  animation: hero-clip-glint var(--loop-clip-glint) ease-in-out infinite;
}

.hero__clip path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes hero-clip-glint {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Reduced motion (brief §8.3): every loop stops at its stated end state; the
   atmosphere, the ticket and the full palette are unchanged. base.css's
   kill switch collapses the generic duration tokens — this site's own
   press-sequence and loop tokens need their own rule. */
@media (prefers-reduced-motion: reduce) {
  .hero__stamp {
    animation: none;
    transform: translateY(0%);
  }
  .hero__imprint {
    animation: none;
    opacity: 1;
  }
  .hero__pencil {
    animation: none;
    transform: rotate(0deg);
  }
  .hero__clip {
    animation: none;
    opacity: 0.55;
  }
}

/* --- Section heads (brief §2.3: Barlow 600, uppercase via CSS,
   --tracking-wide — every section on index.html runs straight from h1 to
   h3, per the brief's own device). --------------------------------------- */

.section__head {
  margin: 0;
  margin-block-end: var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* --- Ticket lines (brief §II, §IV): the numbered register, carried from
   the tile. The ONLY numbered mark on the site (brief §6.10). ------------- */

.dlines {
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.dline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.dline__n {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-accent);
}

.dline__label {
  margin: 0 0 var(--space-3xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.dline__body p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* --- Season strip (brief §III): four plain stub windows, no numeral, no
   card (brief §6.10 — "no two counters in one costume"). ------------------ */

.stubs {
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.stub__label {
  margin: 0 0 var(--space-3xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.stub p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* --- Material-study plates (brief §7.2 slots 2–4) ------------------------- */

.plate {
  width: 100%;
  margin-block-start: var(--space-lg);
}

/* --- Service-area index (brief §V): plain two-column text index, no map,
   no pin icon. ------------------------------------------------------------ */

.place-index {
  columns: 2;
  column-gap: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  margin: 0;
}

.place-index li {
  break-inside: avoid;
  padding-block: var(--space-2xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* --- FAQ (brief §VI): three Q/A pairs, no numeral. ------------------------ */

.faq {
  margin: 0;
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.faq__q {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
}

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

/* --- Lead + micro registers (brief §2.9) ---------------------------------- */

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

.micro {
  margin: 0;
  margin-block-start: var(--space-sm);
  font-size: var(--text-micro);
  line-height: var(--leading-eyebrow);
  color: var(--color-ink-muted);
}

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

/* --- Form -----------------------------------------------------------------
   R5: --radius-none everywhere, no shadow. */

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

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

.field__label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  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-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-none);
}

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

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  inset-inline-start: -999em;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

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

/* --- NAP (contact section + footer) ---------------------------------------- */

.nap {
  margin-block-start: var(--space-lg);
  font-style: normal;
  line-height: var(--leading-body);
}

.nap a {
  color: var(--color-accent);
  font-weight: var(--font-weight-body-strong);
  text-decoration: none;
}

/* --- Footer ---------------------------------------------------------------- */

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

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

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

/* --- thanks.html ------------------------------------------------------------ */

.thanks__heading {
  margin: 0;
  margin-block-start: var(--hero-gap-eyebrow-h1);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.thanks__cta-wrap {
  margin: 0;
  margin-block-start: var(--hero-gap-h1-cta);
}