/* Hallmark · macrostructure: Marquee Hero · H1 knobs: size=display-cap, alignment=left-bias, underlay=rule-below
 * theme: custom · vibe: "industrial precision, safety-amber, engineered calm" · paper: oklch(97.5% 0.007 85) · accent: oklch(82% 0.165 85)
 * display: Space Grotesk · body: IBM Plex Sans · outlier: IBM Plex Mono (machine-readout register: labels, spec data, captions)
 * enrichment: E5 custom illustration · craft: tier-B hand-built SVG conveyor + rAF engine (VFD speed ramp) · reduced-motion: static
 * nav: N1b (links=4 · dropdowns=none · frost-on-scroll · CTA fill only) · footer: Ft1 mast-headed
 * pre-emit critique: P4 H5 E4 S4 R4 V5 · studied: no · context: inferred (autonomous run)
 * photos: CC-BY placeholders (see README) — replace with client photography before launch
 */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  z-index: var(--z-modal);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-ctl);
  text-decoration: none;
  white-space: nowrap;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-md); }

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tnum { font-variant-numeric: tabular-nums; }

/* one-shot reveal (IntersectionObserver adds .is-in; no-JS pages render fully visible) */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* section head: amber tick + heading, stacked, left-aligned */
.head { display: grid; gap: var(--space-sm); max-width: 40ch; }
.head::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--color-accent-deep);
}
.head h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.head p { color: var(--color-muted); max-width: 46ch; }

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-ctl);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform 100ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .ctl:disabled, .cta-form input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-paper); }

/* ---------- nav · N1b ---------- */
.nav { position: absolute; inset: 0 0 auto; }
.js .nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: var(--rule-hair) solid transparent;
  transition:
    background-color 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in oklch, var(--color-paper) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-rule);
}
.nav__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand svg { display: block; }
.nav__center {
  justify-self: center;
  display: flex;
  gap: var(--space-lg);
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: 3px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav__right { justify-self: end; }
@media (max-width: 60rem) {
  .nav__center { display: none; }
}

/* ---------- hero · Marquee ---------- */
.hero {
  min-height: clamp(60vh, 78dvh, 88dvh);
  display: grid;
  align-content: end;
  gap: var(--space-xl);
  padding-block: calc(64px + var(--space-md)) var(--space-2xl); /* end ≥ 1.3× visual start below nav */
}
.hero h1 {
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 14ch;
}
.js .hero h1 .w {
  display: inline-block;
  transform: translateY(0.35em);
  opacity: 0;
  transition:
    transform 0.62s var(--ease-out),
    opacity 0.62s var(--ease-out);
  transition-delay: calc(var(--w) * 55ms);
}
.js .hero.is-set h1 .w { transform: none; opacity: 1; }
.hero__lede {
  max-width: 52ch;
  font-size: var(--text-md);
  color: var(--color-muted);
}

/* the line panel — dark instrument card */
.panel {
  margin: 0;
  background: var(--color-graphite);
  border: var(--rule-hair) solid var(--color-graphite-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-whisper);
  overflow: hidden;
  color: var(--color-ink-dark);
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-graphite-rule);
}
.panel__title { color: var(--color-muted-dark); }
.panel__controls {
  margin-left: auto;
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
}
.ctl {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted-dark);
  background: none;
  border: var(--rule-hair) solid var(--color-graphite-rule);
  border-radius: var(--radius-ctl);
  padding: var(--space-2xs) var(--space-xs);
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.ctl:hover { color: var(--color-ink-dark); border-color: var(--color-muted-dark); }
.ctl[aria-pressed="true"],
.ctl.is-live {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.ctl:active { transform: translateY(1px); }
@media (pointer: coarse) { .ctl { min-height: 44px; } }

/* focus rings on dark surfaces need the bright accent to clear 3:1 */
.panel :focus-visible,
.process :focus-visible,
.lightbox :focus-visible { outline-color: var(--color-accent); }
.panel__scene { display: block; width: 100%; height: auto; }
.panel__readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-graphite-rule);
  color: var(--color-muted-dark);
}
.panel__readout b {
  font-weight: 600;
  color: var(--color-ink-dark);
}
.status { display: inline-flex; align-items: center; gap: 0.45em; }
.status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.status[data-state="stopped"] .status__dot { background: var(--color-muted-dark); }
.status[data-state="running"] b { color: var(--color-accent); }

/* conveyor scene internals (inline SVG inherits these tokens) */
.scene__belt      { stroke: var(--color-graphite-rule); }
.scene__tread     { stroke: var(--color-steel); opacity: 0.7; }
.scene__edge      { stroke: var(--color-accent); }
.scene__drum      { fill: var(--color-graphite-2); stroke: var(--color-graphite-rule); }
.scene__spoke     { stroke: var(--color-muted-dark); }
.scene__leg       { stroke: var(--color-graphite-rule); }
.scene__floor     { stroke: var(--color-graphite-rule); }
.scene__crate     { fill: var(--color-cardboard); stroke: var(--color-cardboard-2); }
.scene__tape      { stroke: var(--color-cardboard-2); }
.scene__sensor    { stroke: var(--color-graphite-rule); fill: var(--color-graphite-2); }
.scene__beam      { stroke: var(--color-accent); opacity: 0; }
.scene__beam.is-hit { opacity: 1; }
.scene__shadow    { fill: var(--color-shade); }

.rule-thick {
  border: 0;
  border-top: 4px solid var(--color-ink);
  margin: 0;
}

/* ---------- systems · F6 product grid ---------- */
.systems { padding-block: var(--space-3xl) var(--space-2xl); }
.systems__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.product { display: grid; gap: var(--space-sm); align-content: start; }
.product__media {
  aspect-ratio: 4 / 3;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-ctl);
  overflow: hidden;
  display: grid;
}
.product__media svg { width: 100%; height: 100%; display: block; }
.product h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.product__spec { color: var(--color-muted); }
.product p { color: var(--color-muted); font-size: var(--text-base); max-width: 34ch; }
.product__link {
  justify-self: start;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.product__link:hover { border-bottom: 2px solid var(--color-accent-deep); }

/* mini belt art: dash motion runs on hover / keyboard focus only */
.mini__belt { stroke: var(--color-ink-2); }
.mini__dash { stroke: var(--color-accent-deep); stroke-dasharray: 7 9; }
.mini__chain { stroke: var(--color-ink-2); stroke-dasharray: 10 6; }
.mini__part { fill: var(--color-paper); stroke: var(--color-ink-2); }
.mini__accent { fill: var(--color-accent); stroke: var(--color-accent-deep); }
.mini__steel { fill: var(--color-paper-2); stroke: var(--color-steel); }
@media (prefers-reduced-motion: no-preference) {
  .product:hover .mini__dash,
  .product:focus-within .mini__dash,
  .product:hover .mini__chain,
  .product:focus-within .mini__chain { animation: mini-run 1.1s linear infinite; }
  .mini__spin { transform-box: fill-box; transform-origin: center; }
  .product:hover .mini__spin,
  .product:focus-within .mini__spin { animation: mini-spin 1.6s linear infinite; }
}
@keyframes mini-run { to { stroke-dashoffset: -32; } }
@keyframes mini-spin { to { transform: rotate(360deg); } }

@media (max-width: 60rem) {
  .systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .systems__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- process · dark band, F4 steps + scroll-scrubbed belt line ---------- */
.process {
  background: var(--color-graphite);
  color: var(--color-ink-dark);
  padding-block: var(--space-3xl);
}
.process .head::before { background: var(--color-accent); }
.process .head h2 { color: var(--color-ink-dark); }
.process .head p { color: var(--color-muted-dark); }

.steps {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.step { display: grid; gap: var(--space-xs); align-content: start; }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-muted-dark);
  transition: color var(--dur-short) var(--ease-out);
}
.step.is-active .step__num { color: var(--color-accent); }
.step h3 { color: var(--color-ink-dark); font-size: var(--text-md); font-weight: 600; }
.step p { color: var(--color-muted-dark); font-size: var(--text-base); }

/* the traveling line */
.track {
  position: relative;
  margin-top: var(--space-2xl);
  height: 20px;
}
.track__base,
.track__live {
  position: absolute;
  inset-inline: 0;
  top: 9px;
  height: 2px;
}
.track__base { background: var(--color-graphite-rule); }
.track__live {
  background: var(--color-accent);
  transform-origin: left center;
}
.js .track__live { transform: scaleX(0); }
.track__pack { display: none; }
.js .track__pack { display: block; }
.track__pack {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 11px;
  background: var(--color-cardboard);
  border: 1px solid var(--color-cardboard-2);
  border-radius: 1px;
  will-change: transform;
}
@media (max-width: 60rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track { display: none; }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- specifications · F3 sheet + S3 sticky head ---------- */
.specs { padding-block: var(--space-2xl) var(--space-3xl); }
.specs__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.specs__side { position: sticky; top: calc(64px + var(--space-lg)); display: grid; gap: var(--space-md); }
.specs__side .note { color: var(--color-muted); font-size: var(--text-sm); max-width: 34ch; }
.spec-sheet { width: 100%; border-collapse: collapse; }
.spec-sheet th,
.spec-sheet td {
  text-align: left;
  vertical-align: baseline;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec-sheet th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-ink-2);
  width: 34%;
}
.spec-sheet td.val {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.spec-sheet td.foot { color: var(--color-muted); font-size: var(--text-sm); padding-right: 0; }
@media (max-width: 60rem) {
  .specs__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .specs__side { position: static; }
  .spec-sheet td.foot { display: none; }
}

/* ---------- gallery ---------- */
.gallery { padding-block: var(--space-2xl) var(--space-3xl); }
.plates {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-lg);
}
.plate {
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}
.plate--w4 { grid-column: span 4; }
.plate--w2 { grid-column: span 2; }
.plate--w6 { grid-column: span 6; }
.plate__btn {
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-ctl);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-paper-2);
  display: block;
  position: relative;
}
.plate__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.22) contrast(1.05) brightness(0.99);
  transition: transform var(--dur-long) var(--ease-out);
}
.plate__btn::after {
  /* grain — keeps five different sources reading as one series */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plate__btn:hover img { transform: scale(1.02); }
.plate--w4 .plate__btn { aspect-ratio: 16 / 10; }
.plate--w2 .plate__btn { aspect-ratio: 4 / 5; }
.plate--w6 .plate__btn { aspect-ratio: 21 / 9; }
.plate figcaption { color: var(--color-muted); }
@media (max-width: 60rem) {
  .plates { grid-template-columns: minmax(0, 1fr); }
  .plate--w4, .plate--w2, .plate--w6 { grid-column: span 1; }
  .plate--w4 .plate__btn, .plate--w2 .plate__btn, .plate--w6 .plate__btn { aspect-ratio: 3 / 2; }
}

/* lightbox */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 70rem);
}
.lightbox::backdrop { background: var(--color-scrim); }
.lightbox figure { margin: 0; display: grid; gap: var(--space-sm); }
.lightbox img {
  width: 100%;
  max-height: 78dvh;
  object-fit: contain;
  border-radius: var(--radius-ctl);
  filter: grayscale(1) sepia(0.22) contrast(1.05);
}
.lightbox figcaption { color: var(--color-ink-dark); }
.lightbox__row { display: flex; gap: var(--space-xs); justify-content: space-between; align-items: center; }
.lightbox__nav { display: flex; gap: var(--space-xs); }
.lightbox .ctl { min-width: 44px; min-height: 44px; }

/* ---------- stat strip · T4 ---------- */
.numbers {
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl);
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.stat { display: grid; gap: var(--space-2xs); }
.stat b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1;
}
.stat span { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .numbers__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- contact · C2 inline form ---------- */
.contact { padding-block: var(--space-3xl) var(--space-2xl); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}
.cta-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: end;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  padding-bottom: var(--space-xs);
}
.cta-form label { display: block; }
.cta-form input {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--space-sm) 0;
  min-height: 44px;
  font: inherit;
  color: var(--color-ink);
}
.cta-form input::placeholder { color: var(--color-muted); }
.cta-form input:focus-visible { outline-offset: 6px; }
.cta-form .btn { align-self: center; }
.form-done { color: var(--color-ink); font-weight: 500; }
.contact__alt { display: grid; gap: var(--space-xs); color: var(--color-muted); }
.contact__alt a { color: var(--color-ink-2); text-decoration-color: var(--color-rule); }
.contact__alt a:hover { text-decoration-color: var(--color-accent-deep); }
@media (max-width: 60rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cta-form { grid-template-columns: minmax(0, 1fr); }
  .cta-form .btn { justify-self: start; }
}

/* ---------- footer · Ft1 ---------- */
.foot {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl) var(--space-xl);
  display: grid;
  gap: var(--space-md);
}
.foot__mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md) var(--space-xl);
}
.foot__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-ink);
}
.foot__tag { color: var(--color-muted); }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.foot__links a {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.foot__links a:hover { border-bottom-color: var(--color-accent-deep); }
.foot__colophon { color: var(--color-muted); text-transform: none; letter-spacing: 0.02em; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .js .reveal, .js .hero h1 .w { opacity: 1; transform: none; transition: none; }
  .panel__controls { display: none; }
  .js .track__live { transform: scaleX(1); }
  .js .track__pack { display: none; }
  .step .step__num { color: var(--color-accent); }
}