:root {
  --blue: #003DA5;
  --blue-dark: #00296e;
  --silver: #B0B0B0;
  --ink: #0b0d10;
  --body: #000000;
  --line: #e4e7ec;
  --wash: #f4f6f9;
  /* one shade under --wash so the sticky OEM bar still reads when it overlays a
     .section-wash block, which is --wash itself */
  --wash-bar: #e9edf4;
  --white: #ffffff;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --header-h: 92px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--text); color: var(--body); background: var(--white); line-height: 1.65; font-size: 1.0625rem; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--head); color: var(--ink); text-transform: uppercase; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; font-style: italic; letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
/* matches the .kicker treatment (italic Barlow Condensed) but stays black.
   Max is 1.5rem (24px), deliberately under the 1.9rem kicker so the headline
   reads smaller than its own CONTACT label. Still scales down below ~400px
   because the text is nowrap and would otherwise overrun narrow phones. */
.h2-oneline { white-space: nowrap; font-size: clamp(1.15rem, 6.2vw, 1.5rem); font-style: italic; letter-spacing: 0.01em; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; }

.kicker {
  font-family: var(--head); font-weight: 700; font-style: italic; font-size: 1.9rem;
  letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase; color: var(--blue);
  margin-bottom: 14px;
}

.btn {
  display: inline-block; font-family: var(--head); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 28px; border: 2px solid var(--blue); transition: all .18s ease;
  cursor: pointer;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.section { padding: 56px 0 96px; scroll-margin-top: 150px; }
.section-head { max-width: 720px; margin-bottom: 48px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: 0 2px 14px rgba(11, 13, 16, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand img { height: 72px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-family: var(--head); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.site-nav a:hover { color: var(--blue); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

/* Hero */
.hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(0, 61, 165, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 61, 165, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-inner { padding: 56px 24px 100px; position: relative; z-index: 1; }
.hero h1 { max-width: 880px; }
.hero h1 .amp { color: var(--blue); }
.hero-tagline { color: var(--blue); margin-bottom: 26px; font-size: 1.9rem; }
.hero .lead { font-size: 1.3rem; max-width: 640px; margin: 0; }
/* Five points; sized to hold one row at desktop, wraps cleanly below that */
.hero-points { display: flex; flex-wrap: wrap; gap: 18px 18px; margin-top: 34px; }
.hero-point { display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--blue); padding-left: 13px; }
.point-value { font-family: var(--head); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.point-label { font-family: var(--head); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }

/* OEM marquee (ticker above hero) */
.markets {
  background: var(--wash-bar); border-bottom: 1px solid #d7dde7; padding: 15px 0;
  overflow: hidden; position: sticky; top: var(--header-h); z-index: 40;
  display: flex; align-items: center;
}
/* pinned at the left edge of the bar; the brand names run underneath it */
.markets-label {
  flex: 0 0 auto; position: relative; z-index: 2; background: var(--wash-bar);
  padding-left: max(24px, calc((100vw - 1120px) / 2 + 24px)); padding-right: 24px;
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; color: var(--ink); white-space: nowrap;
}
.markets-viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
/* names dissolve into the label instead of hard-cutting at its edge */
.markets-viewport::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; z-index: 2;
  background: linear-gradient(to right, var(--wash-bar), rgba(233, 237, 244, 0));
  pointer-events: none;
}
/* 118s holds the original ~30px/s crawl now that the track carries 20 names
   instead of 17 (the big three run twice per loop). Changing the name count
   means rescaling this or the ticker speeds up. */
.markets-marquee { display: flex; width: max-content; animation: markets-scroll 118s linear infinite; }
.markets:hover .markets-marquee { animation-play-state: paused; }
.markets-track {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; color: var(--ink);
}
.markets-track li { padding: 0 30px; position: relative; white-space: nowrap; color: var(--brand, var(--white)); }
.markets-track li::after {
  content: ""; position: absolute; right: -3px; top: 50%;
  transform: translateY(-50%) rotate(45deg); width: 5px; height: 5px; background: var(--silver);
}

/* OEM brand colors and typefaces.
   Every one of these wordmarks is custom lettering with no released font, so each
   --face is the closest freely embeddable Google Fonts stand-in, not the real thing.
   Colors are each brand's TRUE value, deepened only where the real one was too pale
   to clear 4.5:1 on the pale wash bar (Harley, Segway, Arctic Cat, Buell, Simplicity,
   Argo). Swapping the bar back to a dark background means reverting to lightened
   values, not reusing these. */
.markets-track li { font-family: var(--face, var(--head)), var(--head); font-weight: var(--face-w, 700); font-style: var(--face-s, normal); font-size: var(--face-z, 1em); }

.oem-harley     { --brand: #c24a00; --face: "Anton"; --face-w: 400; }
.oem-deere      { --brand: #367c2b; --face: "Archivo Black"; --face-w: 400; --face-z: 0.94em; }
.oem-polaris    { --brand: #004a8d; --face: "Orbitron"; --face-w: 700; --face-z: 0.94em; }
.oem-toro       { --brand: #cd2027; --face: "Poppins"; --face-w: 800; --face-z: 0.94em; }
.oem-navistar   { --brand: #006680; --face: "Archivo"; --face-w: 900; --face-s: italic; --face-z: 0.96em; }
.oem-segway     { --brand: #c6350e; --face: "Orbitron"; --face-w: 900; --face-z: 0.94em; }
.oem-arcticcat  { --brand: #3e7a15; --face: "Barlow Condensed"; --face-w: 900; --face-s: italic; --face-z: 1.08em; }
.oem-newflyer   { --brand: #1a4387; --face: "Archivo"; --face-w: 700; --face-z: 0.96em; }
.oem-victory    { --brand: #da291c; --face: "Encode Sans Expanded"; --face-w: 900; --face-z: 0.9em; }
.oem-mci        { --brand: #274089; --face: "Bodoni Moda"; --face-w: 900; --face-z: 1.02em; }
.oem-buell      { --brand: #a86a00; --face: "Baloo 2"; --face-w: 800; --face-z: 1.04em; }
.oem-macdon     { --brand: #aa192d; --face: "Nunito"; --face-w: 800; --face-z: 1em; }
.oem-simplicity { --brand: #c2440a; --face: "Barlow Condensed"; --face-w: 900; --face-s: italic; --face-z: 1.08em; }
.oem-buhler     { --brand: #d70018; --face: "Archivo Black"; --face-w: 400; --face-z: 0.94em; }
.oem-argo       { --brand: #be3f0c; --face: "Rubik"; --face-w: 900; --face-s: italic; --face-z: 0.98em; }
.oem-hiniker    { --brand: #b40707; --face: "Anton"; --face-w: 400; }
.oem-ulv        { --brand: #046bd2; }
@keyframes markets-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .markets-marquee { animation: none; }
}

/* Mobile */
@media (max-width: 860px) {
  .section { padding: 40px 0 64px; }
  .hero-inner { padding: 40px 24px 60px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; padding: 18px 24px 22px; gap: 16px;
  }
  .site-nav.open { display: flex; }
  .markets-label { font-size: 0.85rem; letter-spacing: 0.06em; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  /* wraps to two lines so the sticky bar stays short */
  .markets-label { white-space: normal; width: 120px; line-height: 1.1; font-size: 0.8rem; padding-left: 14px; padding-right: 12px; }
}

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.service { border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 26px 22px 24px; background: var(--white); }
.service h3 { margin: 0 0 10px; font-size: 1.25rem; }
.service p { font-size: 1.03rem; }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* Partners */
.section-wash { background: var(--wash); }
.partners-list { display: grid; gap: 22px; }
.partner {
  display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center;
  background: var(--white); border: 2px solid var(--blue-dark); border-radius: 14px;
  padding: 34px 36px;
}
.partner-logo { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.partner-logo a { display: flex; align-items: center; justify-content: center; }
.partner-logo img { max-height: 120px; width: auto; max-width: 270px; object-fit: contain; }
.partner-body h3 { font-size: 1.45rem; }
.partner-cat {
  font-family: var(--head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.95rem; color: var(--blue); margin: 4px 0 10px;
}
.partner-body p { font-size: 1.05rem; }
.partner-link {
  display: inline-block; margin-top: 12px; font-family: var(--head); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem;
  border-bottom: 2px solid var(--blue);
}
.partner-link:hover { color: var(--blue-dark); border-color: var(--blue-dark); }
@media (max-width: 720px) {
  .partner { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .partner-logo { justify-content: flex-start; min-height: 0; }
  .partner-logo img { max-height: 88px; }
}

/* About */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.about-grid p + p { margin-top: 16px; }
.cred-card { background: var(--ink); color: var(--white); padding: 34px 30px; border-top: 4px solid var(--blue); }
.cred-card h3 { color: var(--white); margin-bottom: 16px; }
.cred-card ul { list-style: none; }
.cred-card li { padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.0625rem; }
.cred-card li:last-child { border-bottom: 0; }
.cred-card li::before { content: ""; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--white); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Contact */
/* Contact keeps the standard section spacing around its label and headline;
   only the tail is trimmed so the cards do not float above the footer. */
.contact { background: var(--white); border-top: 1px solid var(--line); }
.section.contact { padding-bottom: 44px; }
.contact-cards { display: flex; gap: 22px; flex-wrap: wrap; }
.contact-card {
  display: flex; flex-direction: row; align-items: baseline; gap: 12px;
  min-width: min(280px, 100%);
  background: var(--wash); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); padding: 22px 26px; transition: background .18s ease;
}
.contact-card:hover { background: rgba(0, 61, 165, 0.08); }
/* Label and value share one size so Call and Email always match. It scales down with
   the viewport so the email stays on a single line to 320px; never splits mid-word. */
.contact-label, .contact-value {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.125rem, 0.375rem + 3.75vw, 1.5rem);
  white-space: nowrap;
}
.contact-label { text-transform: uppercase; color: var(--blue); }
.contact-value { color: var(--ink); }

/* Footer */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding: 40px 0; }
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-legal { font-size: 0.88rem; color: #000000; }
.footer-credit a { color: #000000; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}