/* ==========================================================================
   site.css — Minnich Manufacturing, Fort Wayne IN. Components from brief.md
   (approved), built FROM tokens. No raw hex/size/font literal outside
   tokens.css; no !important (house-tech-spec §3, §12).

   Archetype poster-hero: H1 + engraved-plate device, one composition,
   centred, single-column at every breakpoint; --hero-col-max (672px)
   governs every section, not the hero alone (brief §2.8). Signature: "the
   plate holds" — an independent 8.8s specular sweep + four independently-
   offset 6.4s rivet glints, hero-only; the rivet motif recurs, static, on
   the capability tags.
   ========================================================================== */

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

/* brief §2.7's formula is content-box: min(100% - 2*pad, 672px). base.css is
   border-box globally, so a plain max-width caps the OUTER box and the
   padding eats into the 672px column — adding the padding back into
   max-width restores the brief's own arithmetic (was: 610.6px at 768px
   instead of 672px, wrapping the header to two rows). */
.container {
  width: 100%;
  max-width: calc(var(--hero-col-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

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

/* --- Header & navigation ---------------------------------------------------
   Sticky: --chrome-header 56px + 1px border = 57px (brief §3.1/§3.2's 101px
   chrome figure). <=479px: "MM" monogram + icon-only call button. >=480px
   (30em, brief's own split, independent of the house 48em nav breakpoint):
   full wordmark + labelled Call link.                                      */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--chrome-header);
  padding-block: 0;
  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(--chrome-header);
}

/* In-page anchors clear the sticky header (57px stuck height). */
section[id] {
  scroll-margin-block-start: calc(var(--chrome-header) + var(--border-hairline));
}

/* Compact (<=479px): "MM" monogram, a small rectangular plate — never a
   hexagon or shield (brief §3.1). Builder-mechanical initials, not copy. */
.site-header__brand-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-tap-min);
  height: var(--layout-tap-min);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  text-decoration: none;
}

.site-header__brand-full {
  display: none;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-brand);
  font-weight: var(--font-weight-body-strong);
  text-decoration: none;
  color: var(--color-ink);
}

/* @allow-literal: brief §3.1's own <=479 / >=480 split, independent of the house 48em nav breakpoint */
@media (min-width: 30em) {
  .site-header__brand-compact {
    display: none;
  }

  .site-header__brand-full {
    display: inline-flex;
  }
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  row-gap: var(--space-xs);
}

.nav-toggle {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  /* Its only shape is this hairline, so it is a CONTROL boundary (WCAG
     1.4.11, >=3:1), not decorative — --color-border-strong, not --color-border. */
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  background-color: var(--color-bg);
}

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

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

/* Same CLS-fix precedent as the skeleton default (QA round-3, perf/cls):
   closed is the plain CSS default below 48em, no JS gate, so there is
   nothing to collapse post-paint. The <noscript> stylesheet override in
   @shared:head-boilerplate restores it for JS-off visitors. */
.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

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

.site-header__call-compact,
.site-header__call-full {
  order: 2;
}

/* Element-qualified: beats .btn's own later, equally-specific padding
   shorthand. min-width: 0 overrides the flex-item default, which would
   otherwise grow this box past 44px to fit the 20px icon. */
a.site-header__call-compact {
  padding-inline: 0;
  width: var(--layout-tap-min);
  min-width: 0;
}

a.site-header__call-full {
  display: none;
}

/* @allow-literal: matches the brand split above */
@media (min-width: 30em) {
  a.site-header__call-compact {
    display: none;
  }

  a.site-header__call-full {
    display: inline-flex;
  }
}

/* --- Buttons --------------------------------------------------------------
   Two roles. Radius, weight and colour come from tokens. Primary CTA
   control height 48px (brief §3.2). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  /* Inline padding only: a block padding pushes .btn--buy past the house
     44px tap floor ([data-tap], base.css) it must land on exactly. */
  padding-inline: 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);
}

/* 48px (brief §3.2's own CTA height), scoped to the site's own two button
   roles, never .btn--buy — preview chrome keeps the skeleton's own 44px. */
.btn--primary,
.btn--quiet {
  min-height: var(--control-height);
}

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

.btn--quiet {
  /* Outline button: the border is the whole control, so it takes the 3:1
     control-boundary token, not the decorative hairline (WCAG 1.4.11). */
  border-color: var(--color-border-strong);
  color: var(--color-ink);
  background-color: transparent;
}

/* --- Eyebrow ----------------------------------------------------------------
   Every eyebrow on this site (brief §2.3's accent role table): iron-oxide
   text, and every eyebrow sits directly on --color-bg (never --color-surface
   — brief §2.4's forbidden row). */

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

.section > .container > .eyebrow {
  margin-block-end: var(--space-2xs);
}

/* --- Hero: "the plate holds" ------------------------------------------------
   House DOM order (brief §3.2): eyebrow -> h1 -> primary CTA -> field ->
   lead -> facts. Fixed vertical rhythm tokens, same at every breakpoint. */

.hero {
  padding-block-start: var(--hero-pad-top);
  padding-block-end: var(--hero-pad-bottom);
  background-color: var(--color-bg);
}

/* min-height reserves the worst-case 2-line box (brief §2.9) from first
   paint so a fallback/Karla wrap-point difference cannot reflow the page
   below it (measured CLS culprit, fixed here). */
.hero__eyebrow {
  margin: 0;
  max-inline-size: 100%;
  min-height: calc(var(--text-eyebrow) * var(--leading-eyebrow) * 2);
}

.hero__h1 {
  margin: 0;
  margin-block-start: var(--hero-gap-eyebrow-h1);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

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

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

/* The engraved plate — the living field. LCP element inside. */
.field {
  position: relative;
  isolation: isolate;
  margin-block-start: var(--hero-gap-cta-field);
  aspect-ratio: var(--field-ratio);
  overflow: hidden;
  border-radius: var(--radius-md);
}

.field__img-wrap,
.field__img {
  width: 100%;
  height: 100%;
}

.field__img {
  object-fit: cover;
}

/* Specular sweep (slot 2, decorative, brief §4/§5): translated across the
   field on an independent 8.8s loop. mix-blend-mode: multiply drops the
   generated asset's white ground (the image tool has no alpha channel).
   Clipped by .field's overflow: hidden — the brief's "CSS mask". */
.field__sweep {
  position: absolute;
  z-index: 2;
  inset-block-start: -15%;
  inset-inline-start: -35%;
  width: 55%;
  height: 130%;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: field-sweep var(--duration-sweep) var(--ease-in-out) infinite;
}

.field__sweep img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes field-sweep {
  0%   { transform: translateX(0) translateY(0); opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translateX(220%) translateY(6%); opacity: 0.9; }
  92%  { opacity: 0; }
  100% { transform: translateX(240%) translateY(8%); opacity: 0; }
}

/* Four independent corner-rivet glints (brief §5), CSS-drawn --color-accent
   dots, each on its own offset within the shared 6.4s loop — no two glint
   in phase. */
.field__rivet {
  position: absolute;
  z-index: 3;
  width: var(--hero-rivet);
  height: var(--hero-rivet);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  opacity: var(--rivet-rest-opacity);
  animation: field-rivet-glint var(--duration-rivet) var(--ease-in-out) infinite;
}

.field__rivet--1 { inset-block-start: 11%; inset-inline-start: 9%;  animation-delay: var(--rivet-delay-1); }
.field__rivet--2 { inset-block-start: 11%; inset-inline-end: 9%;    animation-delay: var(--rivet-delay-2); }
.field__rivet--3 { inset-block-end: 11%;   inset-inline-start: 9%;  animation-delay: var(--rivet-delay-3); }
.field__rivet--4 { inset-block-end: 11%;   inset-inline-end: 9%;    animation-delay: var(--rivet-delay-4); }

@keyframes field-rivet-glint {
  0%, 100% { opacity: var(--rivet-rest-opacity); }
  50%      { opacity: 0.35; }
}

/* Reduced motion (brief §5, spec §8 — no exceptions): the sweep reads as a
   light artifact only while moving, so it is hidden outright rather than
   frozen mid-frame; rivets rest at the loop's own mid-glint opacity — a
   considered still, not an animation caught mid-frame. Collapsing the
   duration tokens alone is not enough: a near-zero infinite loop still runs. */
@media (prefers-reduced-motion: reduce) {
  .field__sweep {
    display: none;
  }

  .field__rivet {
    animation: none;
    opacity: var(--rivet-rest-opacity);
  }
}

/* The plate's own live-HTML engraving (brief §4 honesty block). Measured
   against the plate's own plain centre: >= 9:1, clear of AA. min-height
   reserves the worst-case 2-line box from first paint — centred via
   translateY(-50%), so a font-swap wrap change would otherwise shift
   (measured culprit, fixed here). */
.field__text {
  position: absolute;
  z-index: 4;
  inset-inline: 8%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  row-gap: var(--space-3xs);
  column-gap: var(--space-2xs);
  min-height: calc(var(--text-small) * var(--leading-snug) * 2);
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

/* Each segment wraps as one unit — the separator never orphans mid-phrase. */
.field__text-seg {
  white-space: nowrap;
}

.field__text-sep {
  color: var(--color-ink-muted);
}

.hero__lead {
  margin: 0;
  margin-block-start: var(--hero-gap-field-lead);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink);
}

.hero__facts {
  margin: 0;
  margin-block-start: var(--hero-gap-lead-facts);
  font-size: var(--text-small);
  line-height: var(--leading-facts);
  color: var(--color-ink-muted);
}

.hero__facts-sep {
  color: var(--color-border-strong);
}

/* --- Tenure band (id="tenure", brief §3.1 row 3) ---------------------------
   Badge-numeral treatment, a system distinct from the capability tags:
   numerals only, no rivet motif. */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  margin-block-start: var(--space-md);
  padding: 0;
  list-style: none;
}

.badge {
  flex: 1 1 var(--tag-min);
  min-width: var(--tag-min);
  padding: var(--space-md);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  text-align: center;
}

.badge__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-badge-num);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.badge__label {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- What the shop runs (id="capabilities", brief §3.1 row 4) --------------
   Three engraved-plate capability tags (brief §2.8): fixed 200px minimum,
   flex 1 1 200px, <=16px gap. The hero's own corner-rivet motif recurs here,
   fixed and non-animated (brief §5) — one device, two scales. */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
  margin: 0;
  margin-block-start: var(--space-md);
  padding: 0;
  list-style: none;
}

.tag {
  position: relative;
  flex: 1 1 var(--tag-min);
  min-width: var(--tag-min);
  padding: var(--space-md);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* Static corner-rivet dots — fixed, never animated (brief §5). */
.tag__rivet {
  position: absolute;
  inset-block-start: var(--space-xs);
  width: var(--tag-rivet);
  height: var(--tag-rivet);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.tag__rivet--left { inset-inline-start: var(--space-xs); }
.tag__rivet--right { inset-inline-end: var(--space-xs); }

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

/* On surface, never accent (brief §2.4 forbidden row) — ink, uppercase. */
.tag__label {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-tag-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tag__accent {
  flex: 0 0 auto;
  width: var(--tag-accent-size);
  height: var(--tag-accent-size);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tag__accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same white-ground technique as the hero sweep — no alpha from the
     image tool, so multiply drops the white against the tag's own surface
     ground. */
  mix-blend-mode: multiply;
}

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

/* --- The voice line (id="voice", brief §3.1 row 5) -------------------------
   A single-sentence typographic pull-quote, framed as the business's own
   published words (I-tier, tone only). */

.voice__quote {
  margin: 0;
  margin-block-start: var(--space-md);
  padding: 0;
  border: 0;
}

.voice__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-align: center;
}

.voice__attribution {
  margin: 0;
  margin-block-start: var(--space-sm);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  text-align: center;
}

/* --- Get a quote (id="contact", brief §3.1 row 6, §3.3) --------------------
   The form. Field wrapper is .form-field (not .field — that class is the
   hero's own living-plate component). */

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

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

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

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 ------------------------------------------------------------- */

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

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

.site-footer__nap {
  font-style: normal;
  margin-block-end: var(--space-sm);
}

/* --- thanks.html: no field, flat --color-bg. h1 at --text-h2. -------------- */

.thanks {
  padding-block-start: var(--space-lg);
}

.thanks__title {
  font-size: var(--text-h2);
  margin-block-end: var(--space-sm);
}

.thanks__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  margin-block-end: var(--space-sm);
}

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

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}