* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: #2B2B2B;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #C30001; text-decoration: none; }
a:hover { color: #920001; }
input, select, textarea { font-family: Inter, system-ui, sans-serif; }
img, svg { max-width: 100%; }

@keyframes bslup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bslspin3d { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18,48,79,.12);
  transition: box-shadow .35s ease;
}
.site-nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  transition: padding .35s cubic-bezier(.16,1,.3,1);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-dot {
  width: 26px; height: 26px; border: 3px solid #C30001; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.brand-dot span { width: 8px; height: 8px; background: #C30001; border-radius: 50%; display: block; }
.brand-text {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: .06em; color: #12304F; line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav-link {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; padding-bottom: 5px;
  border-bottom: 2px solid transparent; color: #5d7387; transition: color .25s ease;
}
.nav-link:hover { color: #C30001; }
.nav-link.is-active { color: #12304F; border-bottom-color: #C30001; }
.btn-quote {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: #fff; background: #C30001;
  padding: 12px 20px; transition: background-color .3s ease, color .3s ease; display: inline-block;
}
.btn-quote:hover { background: #12304F; color: #fff; }

/* ---------- buttons ---------- */
.btn-primary {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; background: #C30001; padding: 17px 28px;
  transition: background-color .3s ease, color .3s ease; display: inline-block;
}
.btn-primary:hover { background: #fff; color: #12304F; }
.btn-outline {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; border: 1px solid rgba(232,244,251,.45);
  padding: 17px 28px; transition: border-color .3s ease, color .3s ease; display: inline-block;
}
.btn-outline:hover { border-color: #C30001; color: #C30001; }
.text-link {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- footer ---------- */
.site-footer { background: #12304F; color: #E8F4FB; }
.site-footer .stripe { height: 5px; background: linear-gradient(90deg, #C30001 0 22%, rgba(232,244,251,.25) 22% 100%); }
.footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 64px 32px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 40px;
}
.footer-brand { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: .06em; color: #fff; line-height: 1; }
.footer-col-title {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #C30001; margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link { color: #E8F4FB; font-size: 14px; text-decoration: none; }
.footer-link:hover { color: #C30001; }
.footer-bottom {
  max-width: 1240px; margin: 0 auto; padding: 0 32px 40px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #8FA8BC;
}

/* ---------- hover-enabled cards ---------- */
.card-hover { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), border-color .35s ease; }
.card-hover:hover { border-color: #C30001; }
.auto-card:hover { background: #0c2137; }
.table-row:hover { background-color: #E8F4FB; }
.pill:hover { border-color: #C30001; color: #C30001; }
.field:focus { border-color: #C30001; outline: none; }

/* ---------- section bar heading ---------- */
.section-bar { background: #12304F; padding: 20px 0; }
.section-bar-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 18px; }
.section-bar-dash { width: 36px; height: 5px; background: #C30001; flex: none; }
.section-bar h2 {
  margin: 0; font-family: 'Big Shoulders Display', sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(28px,3.6vw,48px); line-height: 1; text-transform: uppercase; color: #fff;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Justified body copy.

   Only for wide single-column prose: hero leads, section intros and the long
   product explanations, all of which sit on a measure of roughly 520px or
   more. Card copy, quotes, captions and list text stay ragged right, because
   justifying a 300px measure opens rivers of white space between the words.
   Below 768px every column is narrow, so justification is switched off there
   regardless of which element carries the class. Hyphenation is on to keep
   the word spacing even; the pages declare lang="en", so the browser has a
   dictionary to hyphenate with. */
.justify { text-align: justify; text-justify: inter-word; hyphens: auto; }
@media (max-width: 767px) {
  .justify { text-align: left; hyphens: manual; }
}

/* ---------- vehicle fitments ---------- */
.fitment-group + .fitment-group { margin-top: 34px; }
.fitment-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #C30001; margin-bottom: 16px;
}
.fitment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 480px) { .fitment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .fitment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fitment-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Brand card: the manufacturer logo alone. No name label, since the logo is the
   identifier. The brand name lives in the img's alt text and the card's title
   attribute, so screen readers and hover tooltips still name it, and the text
   fallback below shows if a logo file ever fails to load. */
.fitment-chip {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: 18px 16px;
  border: 1px solid rgba(18,48,79,.18); background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.fitment-chip:hover {
  border-color: #C30001;
  box-shadow: 0 8px 22px rgba(18,48,79,.10);
  transform: translateY(-2px);
}
.fitment-mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 64px;
}
.fitment-mark img {
  /* capped below 100% so a 6:1 wordmark does not out-shout a square mark */
  max-width: 88%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
}
/* only seen if a logo file fails; keeps the card meaningful rather than blank */
.fitment-fallback {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: #12304F; text-align: center; line-height: 1.3;
}

/* ---------- catalogue ---------- */
.cat-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 28px; align-items: end;
}
.cat-field { display: flex; flex-direction: column; gap: 10px; }
.cat-field > span {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #5d7387;
}
.cat-field input, .cat-field select {
  background: #fff; border: 1px solid rgba(18,48,79,.28); color: #2B2B2B;
  font-size: 15px; padding: 14px 16px; min-height: 48px; transition: border-color .3s ease;
}
.cat-field input:focus, .cat-field select:focus { border-color: #C30001; outline: none; }
.cat-count {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #5d7387; margin-bottom: 14px;
}
.cat-scroll { overflow-x: auto; }
.cat-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.cat-table th, .cat-table td {
  padding: 14px 12px; text-align: left; border-bottom: 1px solid rgba(18,48,79,.14);
  font-size: 14px; color: #2B2B2B; white-space: nowrap;
}
.cat-table thead th {
  position: sticky; top: 0; z-index: 2; background: #12304F; color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; border-bottom: none;
}
.cat-table th[data-sort] { cursor: pointer; user-select: none; }
.cat-table th[data-sort]:hover { color: #E8F4FB; }
.cat-table th[data-sort]::after { content: ' ⇅'; opacity: .45; }
.cat-table th[data-sort][aria-sort="ascending"]::after { content: ' ↑'; opacity: 1; }
.cat-table th[data-sort][aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }
.cat-table th[data-sort]:focus-visible { outline: 2px solid #C30001; outline-offset: -2px; }
.cat-table tbody tr:hover { background: #E8F4FB; }
.cat-desig {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .02em; color: #12304F;
}
.cat-inter { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5d7387; }
.cat-empty { padding: 40px 0; color: #5d7387; font-size: 15px; }
.cat-more { margin-top: 26px; }

/* catalogue rows become stacked cards on small screens */
.cat-cards { display: none; }
@media (max-width: 767px) {
  .cat-scroll { display: none; }
  .cat-cards { display: grid; gap: 14px; }
  .cat-card { border: 1px solid rgba(18,48,79,.16); background: #fff; padding: 20px 18px; }
  .cat-card-head {
    font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 26px;
    line-height: 1.05; text-transform: uppercase; color: #12304F;
    padding-bottom: 12px; border-bottom: 1px solid rgba(18,48,79,.14);
  }
  .cat-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; margin-top: 14px; }
  .cat-kv > div > dt,
  .cat-card-inter > div > dt {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: #5d7387;
  }
  .cat-kv > div > dd,
  .cat-card-inter > div > dd { margin: 5px 0 0; font-size: 15px; color: #2B2B2B; }
  .cat-card-inter {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(18,48,79,.14);
    /* interchange codes are long and unbreakable, so let this collapse to
       fewer columns rather than forcing three narrow ones */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px;
  }
  .cat-card-inter > div > dd { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
  /* grid children must be allowed to shrink below their content width */
  .cat-kv > div, .cat-card-inter > div { min-width: 0; }
  .cat-kv dd, .cat-card-inter dd { overflow-wrap: anywhere; }
}

/* ---------- deep groove series groups ---------- */
.series-group { border: 1px solid rgba(18,48,79,.16); background: #fff; margin-bottom: 14px; }
.series-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px; min-height: 64px; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; transition: background-color .3s ease;
}
.series-toggle:hover { background: #E8F4FB; }
.series-toggle:focus-visible { outline: 2px solid #C30001; outline-offset: -2px; }
.series-name {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 26px;
  letter-spacing: .02em; color: #12304F; line-height: 1;
}
.series-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #5d7387;
}
.series-sign { color: #C30001; font-family: 'JetBrains Mono', monospace; font-size: 18px; flex: none; }
.series-body { padding: 0 22px 24px; }
.series-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.series-chip {
  padding: 11px 8px; text-align: center; border: 1px solid rgba(18,48,79,.2);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #12304F;
}
.series-closures {
  margin: 18px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: #5d7387;
}

/* ---------- contact office cards ---------- */
.office-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; align-items: stretch; perspective: 1200px;
}
.office-card { display: flex; flex-direction: column; }
.office-contact {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(18,48,79,.18);
  display: flex; flex-direction: column;
}
.office-contact a {
  display: flex; align-items: center; min-height: 44px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #12304F; word-break: break-word; transition: color .25s ease;
}
.office-contact a:hover { color: #C30001; }
.office-todo {
  margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(18,48,79,.18);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #5d7387; line-height: 1.7;
}

/* ---------- exploded view (3D) ----------
   Default state is a static diagram in normal document flow: no pinned
   section, no scroll hijack, and the heading, copy and part labels are always
   readable. js/site.js adds .is-3d only once Three.js has actually loaded on a
   pointer-driven, non-reduced-motion viewport, which layers the scroll-scrub
   WebGL version over the same markup. */
.scrub3d {
  position: relative;
  background: linear-gradient(180deg, #0c2137 0%, #12304F 50%, #0c2137 100%);
}
.scrub3d-stage { padding: 64px 0 72px; }
.scrub3d-eyebrow-inner {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.scrub3d-kicker,
.scrub3d-caption {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
}
.scrub3d-kicker { color: #C30001; }
.scrub3d-caption { color: #8FA8BC; letter-spacing: .16em; }
.scrub3d-canvas { display: none; }
.scrub3d-static { margin: 26px auto 0; padding: 0 32px; max-width: 620px; }
.scrub3d-static svg { display: block; width: 100%; height: auto; }

/* The static diagram is what phones and any WebGL-less desktop actually see,
   so it plays the separation the pinned 3D scrub plays elsewhere: the four
   parts start stacked together and move apart once the diagram scrolls into
   view. The two races do the travelling and the ball set barely moves, which
   is how a bearing really comes apart.

   The SVG is authored in its final exploded position and js/site.js only adds
   .is-exploding, so a visitor with no JavaScript, or one who prefers reduced
   motion, still gets the correct diagram. It simply does not move. */
.scrub3d-static svg > g { transform-box: view-box; }
.scrub3d-static.is-exploding svg > g {
  animation: bsl-explode 1s cubic-bezier(.16,1,.3,1) both;
}
.scrub3d-static.is-exploding .bx-outer { --bsl-from: 144px; }
.scrub3d-static.is-exploding .bx-balls { --bsl-from: 4px;   animation-delay: .06s; }
.scrub3d-static.is-exploding .bx-cage  { --bsl-from: -50px; animation-delay: .1s; }
.scrub3d-static.is-exploding .bx-inner { --bsl-from: -144px; animation-delay: .14s; }
@keyframes bsl-explode {
  from { transform: translateY(var(--bsl-from)); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub3d-static.is-exploding svg > g { animation: none; }
}

.scrub3d-copy { margin-top: 34px; }
.scrub3d-parts {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.scrub3d-parts li {
  border: 1px solid rgba(232,244,251,.28); padding: 9px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #E8F4FB;
}

/* enhanced: pinned scroll-scrub, anywhere WebGL is available */
.scrub3d.is-3d { height: 340vh; }
.scrub3d.is-3d .scrub3d-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0;
}
.scrub3d.is-3d .scrub3d-canvas { display: block; position: absolute; inset: 0; }
.scrub3d.is-3d .scrub3d-static { display: none; }
/* clear of the sticky site header, which otherwise covers this row. Its height
   is published by js/site.js because it is one row on a desktop and three on a
   phone, so no fixed value is right for both. */
.scrub3d.is-3d .scrub3d-eyebrow {
  position: absolute; top: calc(var(--navh, 70px) + 28px); left: 0; width: 100%;
}
.scrub3d.is-3d .scrub3d-copy { position: absolute; bottom: 36px; left: 0; width: 100%; margin: 0; }
.scrub3d.is-3d .scrub3d-parts { margin-top: 18px; }

/* Part callouts drawn over the canvas by js/bearing3d.js. */
.scrub3d-callout {
  position: absolute; transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  padding-bottom: 6px; border-bottom: 1px solid #C30001;
}

/* Narrow screens run the same animation, but they cannot overlay the copy on
   the bearing the way a landscape viewport can. The header takes the top of
   the screen and the heading, paragraph and part list take the bottom third,
   so a full-bleed canvas would put the bearing behind both, which is what a
   phone was actually showing. The stage becomes a column instead and the
   canvas takes whatever height is left between them, with no fixed numbers to
   go stale. The callouts are children of the canvas, so they stay inside that
   band rather than landing on the paragraph.

   svh rather than vh: a mobile address bar shrinking the viewport must not
   push the copy off the bottom of a pinned section. Browsers without svh keep
   the vh value declared above. */
@media (max-width: 820px) and (min-height: 560px) {
  .scrub3d.is-3d .scrub3d-stage {
    height: 100svh;
    display: flex; flex-direction: column;
  }
  .scrub3d.is-3d .scrub3d-eyebrow {
    position: static; padding-top: calc(var(--navh, 96px) + 14px);
  }
  .scrub3d.is-3d .scrub3d-canvas {
    position: relative; inset: auto; flex: 1; min-height: 0;
  }
  .scrub3d.is-3d .scrub3d-copy { position: static; padding-bottom: 24px; }
}

@media (max-width: 820px) {
  /* The four callouts on the bearing name these same parts, so while the scrub
     is running the chips are duplicate text competing for a short viewport.
     They stay for the static fallback, which has no callouts to name them. */
  .scrub3d.is-3d .scrub3d-parts { display: none; }
  .scrub3d-callout { font-size: 10px; letter-spacing: .08em; padding-bottom: 4px; }
}

/* A phone held sideways has no vertical room to stack anything, so it keeps
   the full-bleed overlay the desktop uses. The status caption goes: it would
   sit behind the header, which is most of a landscape phone's height. */
@media (max-width: 820px) and (max-height: 559px) {
  .scrub3d.is-3d .scrub3d-eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scrub3d.is-3d { height: auto; }
  .scrub3d.is-3d .scrub3d-stage { position: static; height: auto; padding: 64px 0 72px; }
  .scrub3d.is-3d .scrub3d-canvas { display: none; }
  .scrub3d.is-3d .scrub3d-static { display: block; }
  .scrub3d.is-3d .scrub3d-eyebrow,
  .scrub3d.is-3d .scrub3d-copy { position: static; margin-top: 34px; }
}

/* ---------- mobile ergonomics ----------
   Scoped to small viewports only: the desktop nav, type scale and spacing are
   unchanged. Raises navigation text off 12px, gives every nav item, footer
   link and form control a 44px touch target, and lifts form inputs to 16px so
   iOS does not auto-zoom the page on focus. */
@media (max-width: 767px) {
  .site-nav-inner { padding-left: 20px; padding-right: 20px; gap: 12px; }
  .nav-links { gap: 4px 14px; }
  .nav-link {
    font-size: 14px;
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding-bottom: 0;
  }
  .nav-link.is-active { border-bottom-width: 2px; }
  .brand { min-height: 44px; }
  .btn-quote { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }

  .footer-links { gap: 2px; }
  .footer-link { min-height: 44px; display: flex; align-items: center; }
  .footer-grid { padding-left: 20px; padding-right: 20px; }
  .footer-bottom { padding-left: 20px; padding-right: 20px; }

  /* 16px minimum stops iOS zooming the viewport when a field takes focus */
  .field, .cat-field input, .cat-field select {
    font-size: 16px !important;
    min-height: 48px;
    width: 100%;
  }
  textarea.field { min-height: 120px; }
  .cat-controls { grid-template-columns: 1fr; }

  /* single column below 640px for the card grids */
  .office-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  }

/* respect notched devices in landscape */
@supports (padding: max(0px)) {
  @media (max-width: 900px) and (orientation: landscape) {
    .wrap, .site-nav-inner, .footer-grid, .footer-bottom {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
  }
}

/* reduced motion: never hide content, just stop it moving */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-split] span { opacity: 1 !important; transform: none !important; }
  * { transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- mobile: touch targets and minimum type ----------
   Mobile-scoped only. The micro-type in this design is mostly set inline on
   the elements themselves, so the inline sizes are lifted here by attribute
   selector; desktop keeps the original 11/12/13px scale untouched. */
@media (max-width: 767px) {
  .text-link,
  .cat-more button,
  .series-toggle {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .text-link { font-size: 14px; }
  .nav-link { padding-left: 2px; padding-right: 2px; min-width: 44px; justify-content: center; }
  .btn-quote, .btn-primary, .btn-outline { font-size: 14px; min-height: 44px; }
  .btn-primary, .btn-outline { display: inline-flex; align-items: center; }

  .fitment-label, .footer-col-title, .cat-count,
  .scrub3d-kicker, .scrub3d-caption, .series-meta,
  .scrub3d-parts li, .series-chip,
  .footer-bottom, .fitment-fallback, .office-contact a,
  .cat-field > span { font-size: 14px; }
  /* specificity must match the .cat-kv > div > dt rule set above */
  .cat-kv > div > dt, .cat-kv > div > dd,
  .cat-card-inter > div > dt, .cat-card-inter > div > dd { font-size: 14px; }

  /* inline-styled micro-type (kickers, card meta, table cells, addresses) */
  [style*="font-size:11px"],
  [style*="font-size:12px"],
  [style*="font-size:13px"] { font-size: 14px !important; }
}

/* ---------- horizontal scroll family headings ----------
   These panels previously shared the 320px card width, so INDUSTRIAL and
   AUTOMOTIVE were clipped by the track's overflow. They now size to their own
   text and never wrap. */
.hscroll-title {
  flex: none;
  display: flex; flex-direction: column; justify-content: center;
  padding-right: 24px;
}
.hscroll-title-text {
  margin-top: 12px;
  font-family: 'Big Shoulders Display', sans-serif;
  font-style: italic; font-weight: 800;
  font-size: clamp(40px, 6vw, 80px); line-height: .92;
  text-transform: uppercase; color: #12304F;
  white-space: nowrap;
}