/* Pastusek Industries — company page.
   Every value comes from tokens.css (generated from tokens.json); styles.css holds no raw colour, size or time.
   There are no media queries: the layout is intrinsic (flex-wrap, auto-fit grids, clamp()), so it fits any
   width from 320px up, in light and dark. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:focus-visible { outline: var(--line-focus) solid var(--button-focus-ring); outline-offset: var(--space-3xs); }
h1, h2, h3, p, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
svg { flex: none; width: var(--space-md); height: var(--space-md); }

.wrap { width: 100%; max-width: var(--size-page-wide); margin-inline: auto; padding-inline: var(--space-md); }

/* Top bar: a navy rule, then where and since when, and Made in the USA on every page. */
.topbar { border-top: var(--space-2xs) solid var(--topbar-rule); }
.topbar .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-sm);
  font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--topbar-fg);
}
.topbar strong { color: var(--ink); font-weight: var(--weight-bold); }

/* Hero: logo plate first (it is the first thing on the page), then the heading, intro and button. */
.hero .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-lg) var(--space-xl);
  padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
}
.logo-plate {
  flex: 1 1 var(--size-card-min);
  max-width: calc(var(--size-logo-max) + var(--space-md) * 2);
  margin-inline: auto;
  padding: var(--space-md);
  background: var(--logo-plate-bg);
  border: var(--line-thin) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--logo-plate-shadow);
}
.logo-plate img { width: 100%; }
.hero__text { flex: 1 1 var(--size-logo-max); max-width: var(--size-measure); }
.eyebrow {
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
h1 { font-size: clamp(var(--text-xl), 7vw, var(--text-2xl)); line-height: var(--leading-tight); font-weight: var(--weight-bold); }
.lead { font-size: var(--text-md); margin-top: var(--space-md); }
.hero .button { margin-top: var(--space-lg); }

/* Buttons and tap targets: at least --size-tap-min tall. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--size-tap-min);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--button-bg); color: var(--button-fg);
  font-weight: var(--weight-bold); font-size: var(--text-md);
  text-decoration: none;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.button:hover { background: var(--button-bg-hover); }
.button:active { background: var(--button-bg-active); transform: translateY(var(--line-thin)); }
.button--quiet { background: transparent; color: var(--link); border: var(--line-thin) solid var(--line); }
.button--quiet:hover { background: var(--tint); }
.tap { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--size-tap-min); color: var(--link); text-decoration: none; }
.tap:hover { text-decoration: underline; }
.tap--big { font-size: var(--text-md); font-weight: var(--weight-bold); }

/* Sections */
.section { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.section--tint { background: var(--tint); }
h2 { font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--weight-bold); }
h2::before {
  content: ""; display: block;
  width: var(--space-lg); height: var(--space-3xs);
  margin-bottom: var(--space-sm);
  background: var(--accent); border-radius: var(--line-thin);
}
.section__intro { margin-top: var(--space-sm); max-width: var(--size-measure); color: var(--muted); }
.section__note { margin-top: var(--space-lg); max-width: var(--size-measure); color: var(--muted); }

/* The PER FIT line: a navy band with one card per series, each card a link. */
.band { background: var(--band-bg); color: var(--band-ink); }
.band h2 { color: var(--band-ink); }
.band h2::before { background: var(--band-hover); }
.band .section__intro { color: var(--band-muted); }
.band .tap { color: var(--band-ink); margin-top: var(--space-md); }
.band .tap:focus-visible { outline-color: var(--band-hover); }
.series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-card-min), 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.series a {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: var(--size-tap-min);
  padding: var(--space-sm) var(--space-md);
  background: var(--series-card-bg); color: var(--series-card-fg);
  border: var(--line-thin) solid var(--series-card-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.series a:hover { border-color: var(--series-card-hover); transform: translateY(calc(var(--line-thin) * -1)); }
.series a:focus-visible { outline-color: var(--series-card-hover); }
.series strong { min-width: var(--space-2xl); font-size: var(--text-md); font-weight: var(--weight-bold); }
.series span { flex: 1; color: var(--series-card-muted); line-height: var(--leading-tight); }
.series svg { color: var(--series-card-hover); }

/* Why PER FIT: one tile per fact. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-tile-min), 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.tiles li {
  display: flex; align-items: center;
  min-height: var(--space-2xl);
  padding: var(--space-md);
  background: var(--tile-bg);
  border: var(--line-thin) solid var(--tile-line);
  border-left: var(--space-3xs) solid var(--tile-rule);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold); line-height: var(--leading-tight);
}

/* How may we help you? */
.contact { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.card {
  flex: 1 1 var(--size-card-min);
  padding: var(--space-md);
  background: var(--surface);
  border: var(--line-thin) solid var(--line);
  border-radius: var(--radius-md);
}
.card h3 {
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--muted);
}
.card h3 + * { margin-top: var(--space-2xs); }
.card h3 ~ h3 { margin-top: var(--space-md); }
.card .tap { display: flex; }
.card .big { font-size: var(--text-md); font-weight: var(--weight-bold); }

/* Footer */
footer { border-top: var(--line-thin) solid var(--line); color: var(--muted); font-size: var(--text-sm); }
footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
}
footer .tap { display: flex; font-size: var(--text-base); }

/* Not-found page */
.notfound .wrap { padding-block: clamp(var(--space-xl), 8vw, var(--space-2xl)); }
.notfound .logo-plate { max-width: calc(var(--size-card-min) + var(--space-md) * 2); margin-inline: 0; margin-bottom: var(--space-lg); flex: none; }
.notfound .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }