/* Matches sparetrac.com: royal blue + signal orange on a soft off-white, Lora serif headings, Work Sans body, Lato spaced labels. Single light theme by design. */
:root {
  --bg: #f9f9fb;
  --surface: #ffffff;
  --surface-2: #eef0f7;
  --ink: #1d2550;
  --muted: #6f7277;
  --line: #e1e4ee;
  --primary: #253993;
  --primary-2: #1b2b78;
  --accent: #ff8b00;
  --accent-ink: #ffffff;
  --mark: #253993;
  --steel: #253993;
  --steel-2: #2f46ac;
  --on-steel: #ffffff;
  --on-steel-muted: #cdd4f2;
  --ok: #1f7a4d;
  --danger: #c62828;
  --shadow: 0 2px 6px rgb(37 57 147 / .06), 0 14px 34px rgb(37 57 147 / .10);

  --f-display: "Lora", Georgia, "Times New Roman", serif;
  --f-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Lato", "Work Sans", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 10px;
  --header-h: 92px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-stretch: 115%; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; font-stretch: 108%; }
p { margin: 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.eyebrow {
  font-family: var(--f-mono); font-size: .76rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 18px; height: 3px; background: var(--accent); border-radius: 2px; }
.hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 70%, transparent) 62%); padding-inline: .06em; }
.mono { font-family: var(--f-mono); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; padding: .8em 1.25em; border-radius: 8px;
  font-weight: 600; text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-ghost { border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-steel { border-color: color-mix(in srgb, var(--on-steel) 30%, transparent); color: var(--on-steel); }
.btn-steel:hover { border-color: var(--on-steel); }
.btn-sm { padding: .5em .85em; font-size: .9rem; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo svg { width: 34px; height: 34px; }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-word b { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: 1.12rem; letter-spacing: .02em; }
.logo-word small { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em; color: var(--muted); margin-top: 4px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  text-decoration: none; font-weight: 500; font-size: .95rem; padding: .5em .8em; border-radius: 6px; color: var(--muted);
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 6px 6px 0 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.basket-btn {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
}
.basket-btn:hover { border-color: var(--ink); }
.count {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font: 600 .72rem/20px var(--f-mono); text-align: center;
}
.count[data-n="0"] { display: none; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; place-items: center; }

@media (max-width: 960px) {
  .menu-btn { display: inline-grid; }
  .header-actions .portal-link { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--gutter) 18px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85em .4em; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; }
  .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent); padding-left: .9em; }
  .nav .nav-portal { display: block; color: var(--ink); font-weight: 600; border-bottom: 0; }
  .header-actions { margin-left: auto; }
}
.nav .nav-portal { display: none; }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head > div { display: grid; gap: 14px; max-width: 680px; min-width: 0; }
.band-steel { background: var(--steel); color: var(--on-steel); }
.band-steel .eyebrow, .band-steel .lead { color: var(--on-steel-muted); }
.band-surface { background: var(--surface); border-block: 1px solid var(--line); }

.blueprint {
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero .wrap { display: grid; gap: 18px; position: relative; }
.crumbs { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); letter-spacing: .06em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ---------- home hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(44px, 7vw, 92px); }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
.hero-tags span { display: inline-flex; align-items: center; gap: 6px; }
.hero-tags .icon { color: var(--ok); }
.gear-deco { position: absolute; right: -90px; top: -80px; width: 420px; height: 420px; color: var(--line); pointer-events: none; }
.gear-deco .spin { transform-origin: 50% 50%; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-deco .spin { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .gear-deco { width: 300px; height: 300px; right: -120px; } }

/* finder */
.finder { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: clamp(18px, 2.6vw, 26px); display: grid; gap: 16px; min-width: 0; }
.finder-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finder-top h2 { font-size: 1.15rem; font-stretch: 110%; }
.finder-step { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface-2); padding: 5px; border-radius: 10px; }
.seg button {
  border: 0; background: transparent; padding: .65em .4em; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: .92rem;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted);
}
.seg button .icon { width: 22px; height: 22px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: .38em .85em; font-size: .86rem; cursor: pointer;
  font-weight: 500; transition: border-color .15s, background .15s; line-height: 1.3;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.finder-result { border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 12px; }
.finder-result ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .9rem; }
.finder-result li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.finder-result li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; transform: translateY(-2px); }
.finder-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.finder-meta .mono { font-size: .8rem; color: var(--muted); }
@media (max-width: 420px) { .finder-result ul { grid-template-columns: 1fr; } }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 22px 18px; border-right: 1px solid var(--line); display: grid; gap: 2px; }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--f-display); font-stretch: 120%; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .88rem; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat { border-bottom: 1px solid var(--line); } .stat:nth-child(2n) { border-right: 0; } .stat:last-child { grid-column: 1 / -1; border-bottom: 0; } }

/* range cards */
.ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.range-card {
  position: relative; display: grid; gap: 16px; align-content: start; padding: 26px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden;
}
.range-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink); }
.range-card .badge-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.range-card .badge-ico .icon { width: 28px; height: 28px; }
.range-card p { color: var(--muted); }
.makes { display: flex; flex-wrap: wrap; gap: 6px; }
.make { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; padding: .3em .6em; border-radius: 4px; background: var(--surface-2); color: var(--ink); }
.range-card .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 4px; }
.range-card:hover .go .icon { transform: translateX(4px); }
.go .icon { transition: transform .2s; }
.range-code { position: absolute; top: 22px; right: 22px; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); }
@media (max-width: 880px) { .ranges { grid-template-columns: 1fr; } }

/* systems explorer */
.systems { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sys-tile {
  border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 16px 12px; cursor: pointer; text-align: left;
  display: grid; gap: 10px; align-content: start; transition: border-color .15s, background .15s, transform .15s; min-height: 108px;
}
.sys-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.sys-tile .icon { width: 28px; height: 28px; color: var(--mark); }
.sys-tile b { font-size: .95rem; line-height: 1.25; font-weight: 600; }
.sys-tile[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sys-tile[aria-selected="true"] .icon { color: var(--accent); }
.sys-panel { background: var(--steel); color: var(--on-steel); border-radius: 14px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 20px); min-width: 0; }
.sys-panel .code { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; color: var(--accent); }
.sys-panel p { color: var(--on-steel-muted); }
.sys-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.sys-panel li { padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--on-steel) 14%, transparent); font-size: .94rem; min-width: 0; }
.sys-fits { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; color: var(--on-steel-muted); }
.sys-fits a { color: var(--on-steel); background: var(--steel-2); padding: .35em .7em; border-radius: 6px; text-decoration: none; font-weight: 500; }
.sys-fits a:hover { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 880px) { .systems { grid-template-columns: 1fr; } .sys-panel { position: static; } }
@media (max-width: 480px) { .sys-grid { grid-template-columns: repeat(2, 1fr); } .sys-panel ul { grid-template-columns: 1fr; } }

/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.feature .icon { width: 30px; height: 30px; color: var(--mark); }
.feature p { color: var(--muted); font-size: .95rem; }
.band-steel .features, .band-steel .feature { border-color: color-mix(in srgb, var(--on-steel) 14%, transparent); }
.band-steel .feature .icon { color: var(--accent); }
.band-steel .feature p { color: var(--on-steel-muted); }
@media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* portal band */
.portal { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.portal-copy { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
.portal-copy .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.portal .features { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .portal { grid-template-columns: 1fr; } .portal-copy { position: static; } }
@media (max-width: 560px) { .portal .features { grid-template-columns: 1fr; } }

/* CTA */
.cta { background: var(--accent); color: var(--accent-ink); border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.cta > div { display: grid; gap: 10px; max-width: 620px; min-width: 0; }
.cta p { opacity: .82; }
.cta .btn-dark { background: var(--accent-ink); color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .btn-outline { border-color: rgb(20 18 10 / .35); color: var(--accent-ink); }
.cta .btn-outline:hover { border-color: var(--accent-ink); }

/* prose & two-col */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split > .sticky { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.prose { display: grid; gap: 1.1em; max-width: 66ch; }
.prose p { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split > .sticky { position: static; } }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.pillar .tag { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mark); }
.pillar p { color: var(--muted); }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }

/* subnav */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.subnav a { white-space: nowrap; text-decoration: none; font-size: .9rem; font-weight: 500; padding: .45em .9em; border-radius: 999px; color: var(--muted); border: 1.5px solid transparent; }
.subnav a:hover { color: var(--ink); border-color: var(--line); }
.subnav a.active { background: var(--ink); color: var(--bg); }
[id] { scroll-margin-top: calc(var(--header-h) + 70px); }

/* global */
.globe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.globe-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gstat { background: var(--steel-2); border-radius: 12px; padding: 22px; display: grid; gap: 4px; }
.gstat b { font-family: var(--f-display); font-stretch: 125%; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; color: var(--accent); line-height: 1; }
.gstat span { color: var(--on-steel-muted); font-size: .92rem; }
.gstat.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.gstat.wide .icon { width: 34px; height: 34px; color: var(--accent); }
.globe-svg { width: 100%; height: auto; color: var(--on-steel-muted); }
@media (max-width: 880px) { .globe-grid { grid-template-columns: 1fr; } }

.brand-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.brand-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 6px; }
.brand-cell b { font-family: var(--f-display); font-stretch: 112%; font-size: 1.05rem; }
.brand-cell span { font-family: var(--f-mono); font-size: .72rem; color: var(--muted); letter-spacing: .03em; }
.note { font-size: .82rem; color: var(--muted); margin-top: 16px; }

/* ---------- catalogue ---------- */
.cat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-tab {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.cat-tab:hover { border-color: var(--ink); }
.cat-tab .ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.cat-tab .ico .icon { width: 24px; height: 24px; }
.cat-tab b { display: block; font-size: 1.02rem; }
.cat-tab small { color: var(--muted); font-family: var(--f-mono); font-size: .74rem; }
.cat-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cat-tab[aria-selected="true"] small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.cat-tab[aria-selected="true"] .ico { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 720px) { .cat-tabs { grid-template-columns: 1fr; } }

.cat-intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; align-items: end; margin-block: 28px 18px; }
.cat-intro > div { display: grid; gap: 8px; min-width: 0; max-width: 640px; }
.cat-intro p { color: var(--muted); }
.toolbar { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; padding: .7em .9em .7em 2.5em; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); }
.search input:focus { outline: none; border-color: var(--ink); }
@media (max-width: 720px) { .toolbar { grid-template-columns: 1fr; } }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.group-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.group-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.group-head .icon { width: 26px; height: 26px; color: var(--mark); }
.group-head h3 { font-size: 1.05rem; flex: 1; min-width: 0; }
.group-head .mono { font-size: .72rem; color: var(--muted); }
.part-list { list-style: none; margin: 0; padding: 6px 0; }
.part-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 18px; transition: background .12s; }
.part-row:hover { background: var(--surface-2); }
.part-row span { flex: 1; font-size: .94rem; min-width: 0; }
.part-row mark { background: color-mix(in srgb, var(--accent) 55%, transparent); color: inherit; border-radius: 2px; }
.add-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center;
  cursor: pointer; flex: none; transition: all .15s; color: var(--muted);
}
.add-btn:hover { border-color: var(--ink); color: var(--ink); }
.add-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.add-btn .icon { width: 16px; height: 16px; }
.empty { padding: 40px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 14px; display: grid; gap: 10px; justify-items: center; }
.portal-note { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 20px 22px; border-radius: 12px; background: var(--surface-2); }
.portal-note p { max-width: 70ch; color: var(--muted); font-size: .95rem; }

/* ---------- basket drawer ---------- */
.fab {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: .85em 1.2em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 10px 30px rgb(0 0 0 / .25);
}
.fab .n { background: var(--accent); color: var(--accent-ink); font: 600 .78rem/1 var(--f-mono); padding: .35em .55em; border-radius: 999px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgb(10 12 15 / .45); z-index: 70; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 80; background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: -10px 0 40px rgb(0 0 0 / .2);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.2rem; }
.icon-btn { width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.basket-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.basket-item div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.basket-item b { font-weight: 600; font-size: .95rem; }
.basket-item small { font-family: var(--f-mono); font-size: .72rem; color: var(--muted); }
.drawer-foot { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-foot .btn { justify-content: center; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; font-size: .88rem; padding: 4px; }
.link-btn:hover { color: var(--ink); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); z-index: 90;
  background: var(--ink); color: var(--bg); padding: .7em 1.1em; border-radius: 8px; font-size: .92rem; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .icon { color: var(--accent); }

/* ---------- quality ---------- */
.iso { display: inline-flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); width: fit-content; max-width: 100%; }
.iso .seal { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 .7rem/1.05 var(--f-display); font-stretch: 120%; text-align: center; flex: none; }
.iso b { display: block; }
.iso small { color: var(--muted); }

.stepper { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: s; position: relative; }
.step-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1.5px solid transparent;
  background: transparent; cursor: pointer; font-weight: 600; color: var(--muted); transition: all .15s;
}
.step-btn:hover { color: var(--ink); background: var(--surface); }
.step-btn .num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem var(--f-mono); border: 1.5px solid var(--line); flex: none; background: var(--bg); }
.step-btn[aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.step-btn[aria-selected="true"] .num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.step-btn.done .num { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.step-panel { background: var(--steel); color: var(--on-steel); border-radius: 16px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; min-height: 100%; align-content: start; }
.step-panel .code { font-family: var(--f-mono); color: var(--accent); font-size: .78rem; letter-spacing: .12em; }
.step-panel p { color: var(--on-steel-muted); font-size: 1.05rem; max-width: 56ch; }
.step-panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.step-panel li { background: var(--steel-2); padding: .4em .8em; border-radius: 6px; font-size: .88rem; }
.step-progress { height: 4px; background: var(--steel-2); border-radius: 2px; overflow: hidden; }
.step-progress i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.step-nav { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 800px) { .stepper { grid-template-columns: 1fr; } .step-list { grid-template-columns: repeat(3, 1fr); } .step-btn { flex-direction: column; text-align: center; gap: 6px; font-size: .78rem; padding: 10px 6px; } }

.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.check { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 8px; }
.check .icon { color: var(--mark); width: 28px; height: 28px; }
.check small { color: var(--muted); }
@media (max-width: 880px) { .checks { grid-template-columns: 1fr 1fr; } }

.instruments { display: flex; flex-wrap: wrap; gap: 8px; }
.instrument { font-family: var(--f-mono); font-size: .82rem; padding: .5em .9em; border-radius: 6px; border: 1.5px dashed var(--line); }

.pack { display: grid; gap: 18px; }
.pack-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 3vw, 34px); }
.pack-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pack-panel li { display: flex; gap: 10px; align-items: flex-start; }
.pack-panel li .icon { color: var(--ok); margin-top: 3px; }
.pack-panel p { color: var(--muted); }
.pack-visual { border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; padding: 20px; min-height: 200px; }
.pack-visual svg { width: min(260px, 100%); height: auto; color: var(--ink); }
@media (max-width: 720px) { .pack-panel { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-cards { display: grid; gap: 12px; }
.ccard { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.ccard .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.ccard > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ccard small { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ccard .val { font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.ccard .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .9rem; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .72em .85em; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field .err { color: var(--danger); font-size: .82rem; }
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.enq-items { display: grid; gap: 8px; }
.enq-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 8px; background: var(--surface-2); }
.enq-item span { flex: 1; font-size: .92rem; min-width: 0; }
.enq-item small { font-family: var(--f-mono); color: var(--muted); font-size: .72rem; }
.enq-item input { width: 64px; padding: .35em .5em; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); text-align: center; font-family: var(--f-mono); }
.enq-empty { font-size: .9rem; color: var(--muted); padding: 12px; border: 1.5px dashed var(--line); border-radius: 8px; }
.result { border: 1.5px solid var(--ok); border-radius: 12px; padding: 18px; display: grid; gap: 12px; background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.result pre { margin: 0; white-space: pre-wrap; font: .82rem/1.55 var(--f-mono); background: var(--bg); border: 1px solid var(--line); padding: 14px; border-radius: 8px; max-height: 260px; overflow: auto; }
.result .row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--steel); color: var(--on-steel); padding-block: 56px 28px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-grid h4 { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-steel-muted); font-weight: 500; margin-bottom: 14px; font-stretch: 100%; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--on-steel); opacity: .86; }
.foot-grid a:hover { opacity: 1; color: var(--accent); }
.foot-grid p { color: var(--on-steel-muted); font-size: .94rem; }
.site-footer .logo-word small { color: var(--on-steel-muted); }
.foot-contact { display: grid; gap: 10px; font-size: .94rem; }
.foot-contact div { display: flex; gap: 10px; align-items: flex-start; color: var(--on-steel); }
.foot-contact .icon { color: var(--accent); margin-top: 3px; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--on-steel) 14%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .8rem; color: var(--on-steel-muted); }
.foot-base .mono { letter-spacing: .04em; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* steel-band chips + pillar icons */
.band-steel .chip { background: transparent; color: var(--on-steel); border-color: color-mix(in srgb, var(--on-steel) 30%, transparent); }
.band-steel .chip:hover { border-color: var(--on-steel); }
.band-steel .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pillar > .icon { width: 30px; height: 30px; color: var(--mark); }
.cat-intro > .makes { display: flex; max-width: 440px; justify-content: flex-end; }
@media (max-width: 720px) { .cat-intro > .makes { justify-content: flex-start; } }

/* ================= sparetrac.com look ================= */
h1, h2, h3, h4 { font-stretch: 100%; letter-spacing: 0; color: var(--ink); }
.band-steel h1, .band-steel h2, .band-steel h3, .band-steel h4, .cta h2, .page-hero h1, .slide h1, .slide h2 { color: #fff; }
h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.08rem; }
.eyebrow { font-family: var(--f-mono); letter-spacing: .28em; color: var(--accent); font-weight: 700; }
.eyebrow::before { content: "-"; width: auto; height: auto; background: none; }
.eyebrow::after { content: "-"; }
.hl { background: none; color: var(--accent); padding: 0; }
.btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; font-weight: 700; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-orange { background: var(--accent); color: #fff; }
.btn-orange:hover { background: #e67d00; }
.btn-pill { border-radius: 999px; padding: 1em 1.8em; }
.btn-white { background: #fff; color: var(--primary); }
.btn-outline-white { border-color: #fff; color: #fff; }
.btn-outline-white:hover { background: rgb(255 255 255 / .12); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* header */
.site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.logo img { height: 34px; width: auto; display: block; }
.nav a { text-transform: uppercase; font-size: .84rem; letter-spacing: .05em; color: #3a3f4a; font-weight: 500; }
.nav a:hover { color: var(--primary); background: none; }
.nav a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--accent); }
.portal-link.btn { background: var(--primary); color: #fff; border: 0; padding: .95em 1.4em; }
.portal-link.btn:hover { background: var(--primary-2); }
.basket-btn, .menu-btn { border-color: var(--line); }
.count { background: var(--accent); color: #fff; }

/* hero slider */
.slider { position: relative; overflow: hidden; background: linear-gradient(100deg, #18245f 0%, #253993 55%, #2f46ac 100%); color: #fff; }
.slides { position: relative; min-height: clamp(460px, 42vw, 540px); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.slide.is-active { opacity: 1; visibility: visible; position: relative; }
.slide-copy { display: grid; gap: 14px; padding-block: 48px; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: 24px; min-width: 0; }
.slide .kicker { font-family: var(--f-mono); letter-spacing: .3em; font-size: .78rem; font-weight: 700; color: #fff; opacity: .9; }
.slide h1, .slide .h1 { font-family: var(--f-display); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05; color: #fff; margin: 0; }
.slide .sub { font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.45rem); color: #fff; }
.slide p { color: rgb(255 255 255 / .86); max-width: 46ch; font-family: var(--f-mono); }
.slide .row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.slide-art { align-self: stretch; position: relative; display: grid; place-items: center; padding: 30px; }
.slide-art.round { background: radial-gradient(circle at 60% 50%, rgb(255 255 255 / .14), transparent 62%); }
.slide-art .disc { position: absolute; inset: 0 0 0 8%; background: linear-gradient(160deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03)); border-radius: 50% 0 0 50% / 70% 0 0 70%; }
.slide-art svg { position: relative; width: min(420px, 100%); height: auto; }
.slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .45); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.slide-arrow:hover { background: var(--accent); }
.slide-arrow.prev { left: 14px; } .slide-arrow.next { right: 14px; }
.slide-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.slide-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .45); cursor: pointer; padding: 0; }
.slide-dots button[aria-current="true"] { background: var(--accent); width: 26px; border-radius: 5px; }
@media (max-width: 820px) {
  .slide { grid-template-columns: 1fr; }
  .slide-art { display: none; }
  .slide-copy { padding-inline: calc(var(--gutter) + 40px); text-align: left; }
}

/* centered section heading with divider, as on sparetrac.com */
.center-head { text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: 36px; }
.center-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); text-transform: uppercase; color: var(--primary); }
.center-head .rule { width: 70px; height: 4px; background: var(--accent); border-radius: 2px; }
.center-head p { color: var(--muted); max-width: 820px; }
.band-steel .center-head h2 { color: #fff; }

/* product categories 3x3 */
.cat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card { background: var(--surface); border-radius: 10px; padding: 30px 26px; text-align: center; display: grid; gap: 12px; justify-items: center; align-content: start; box-shadow: 0 1px 0 var(--line); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; text-decoration: none; }
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); }
.cat-card .ci { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 9%, #fff); color: var(--primary); transition: background .2s, color .2s; }
.cat-card:hover .ci { background: var(--accent); color: #fff; }
.cat-card .ci .icon { width: 32px; height: 32px; }
.cat-card h3 { font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); font-size: 1rem; }
.cat-card p { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.cat-card .more { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
@media (max-width: 900px) { .cat3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat3 { grid-template-columns: 1fr; } }

/* parts make marquee */
.marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.make-tile { flex: none; min-width: 180px; height: 84px; display: grid; place-items: center; padding: 0 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: var(--f-mono); font-weight: 900; font-size: 1.15rem; letter-spacing: .06em; color: #5b6070; text-transform: uppercase; transition: color .2s, border-color .2s; }
.make-tile:hover { color: var(--primary); border-color: var(--primary); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; } }

/* B2B portal section */
.b2b { background: linear-gradient(110deg, var(--primary-2), var(--primary)); color: #fff; }
.b2b .feature { border-color: rgb(255 255 255 / .16); }
.b2b .lead { color: var(--on-steel-muted); }

/* contact band — diagonal split like the original */
.contact-band { background: linear-gradient(110deg, var(--bg) 32%, rgb(37 57 147 / .08) 32%); }
.cbox3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cbox { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: 10px; padding: 22px; border: 1px solid var(--line); }
.cbox .ci { width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; }
.cbox small { display: block; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.cbox span { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 860px) { .cbox3 { grid-template-columns: 1fr; } }

/* inner page banners */
.page-hero { background: linear-gradient(100deg, #18245f, var(--primary) 60%, #2f46ac); color: #fff; border-bottom: 0; }
.page-hero.blueprint { background-image: linear-gradient(100deg, #18245f, var(--primary) 60%, #2f46ac); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgb(255 255 255 / .85); }
.page-hero .crumbs, .page-hero .crumbs a { color: rgb(255 255 255 / .75); }
.page-hero .iso { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .25); }
.page-hero .iso b { color: #fff; } .page-hero .iso small { color: var(--on-steel-muted); }
.blueprint { background-image: none; }

/* misc recolours */
.cta { background: var(--primary); color: #fff; }
.cta p { color: rgb(255 255 255 / .85); opacity: 1; }
.cta .btn-dark { background: #fff; color: var(--primary); }
.cta .btn-outline { border-color: rgb(255 255 255 / .55); color: #fff; }
.cta .btn-outline:hover { border-color: #fff; }
.iso .seal, .ccard .ico, .range-card .badge-ico { background: var(--primary); color: #fff; }
.chip[aria-pressed="true"], .cat-tab[aria-selected="true"], .sys-tile[aria-selected="true"], .subnav a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-tab[aria-selected="true"] .ico { background: var(--accent); color: #fff; }
.add-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fab { background: var(--primary); color: #fff; }
.fab .n { background: var(--accent); color: #fff; }
.toast { background: var(--ink); color: #fff; }
.step-btn[aria-selected="true"] .num { background: var(--accent); color: #fff; }
.step-btn.done .num { background: var(--primary); color: #fff; border-color: var(--primary); }
.gstat b, .step-panel .code, .sys-panel .code { color: #ffb257; }
.finder { border-top: 4px solid var(--accent); }
.finder-result li::before { background: var(--accent); }
.part-row mark { background: rgb(255 139 0 / .28); }
.band-steel .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-footer { background: var(--primary); }
.site-footer .logo img { height: 34px; }
.foot-grid a:hover { color: #ffb257; }
.foot-contact .icon { color: #ffb257; }
.portal-note { background: color-mix(in srgb, var(--primary) 7%, #fff); }
.btn-dark { background: var(--primary); color: #fff; }
.sys-fits a:hover { background: var(--accent); color: #fff; }
.feature .icon { color: var(--accent); }
.pillar > .icon, .check .icon, .group-head .icon { color: var(--primary); }
.instrument { border-color: var(--primary); color: var(--primary); }
.make { background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--primary); }
.spin-slow, .spin-rev { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.spin-rev { animation-direction: reverse; animation-duration: 26s; }
@media (prefers-reduced-motion: reduce) { .spin-slow, .spin-rev { animation: none; } }

/* ===== dropdown menus ===== */
.dd { position: relative; display: flex; align-items: center; }
.dd-top.is-active { color: var(--primary) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.dd-toggle { border: 0; background: none; padding: 4px 4px 4px 0; margin-left: -6px; cursor: pointer; color: #3a3f4a; display: grid; place-items: center; }
.dd-toggle .icon { width: 15px; height: 15px; transition: transform .2s; }
.dd:hover .dd-toggle, .dd.open .dd-toggle { color: var(--primary); }
.dd.open .dd-toggle .icon { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 250px; z-index: 60; background: #fff;
  border: 1px solid var(--primary); border-radius: 6px; box-shadow: 0 12px 30px rgb(29 37 80 / .14); padding: 4px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dd.open .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 961px) { .dd:hover .dd-menu { opacity: 1; visibility: visible; transform: none; } .dd:hover .dd-toggle .icon { transform: rotate(180deg); } }
.nav .dd-menu a { display: block; padding: 15px 18px; text-transform: none; letter-spacing: 0; font-size: .97rem; color: #3a3f4a; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.nav .dd-menu a:last-child { border-bottom: 0; }
.nav .dd-menu a:hover { color: var(--primary); background: var(--surface-2); }
.nav .dd-menu a[aria-current="page"] { color: var(--primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 960px) {
  .dd { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .dd > .dd-top { flex: 1; border-bottom: 0; }
  .dd-toggle { width: 44px; height: 44px; margin: 0; }
  .dd-menu { position: static; flex-basis: 100%; min-width: 0; border: 0; border-left: 3px solid var(--accent); border-radius: 0; box-shadow: none; padding: 0 0 8px; margin-left: 6px; opacity: 1; visibility: visible; transform: none; display: none; }
  .dd.open .dd-menu { display: block; }
  .dd:focus-within .dd-menu { display: none; }
  .dd.open:focus-within .dd-menu { display: block; }
  .nav .dd-menu a { padding: 12px 14px; font-size: 1rem; }
}
.hero-makes { margin-top: 6px; }
.hero-makes .make { background: rgb(255 255 255 / .12); color: #fff; }
.range-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: .9rem; }
.range-switch .chip { text-decoration: none; }
.slide-art.photo { padding: 0; position: relative; overflow: hidden; }
.slide-art.photo img { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: min(100%, 600px); max-width: none; object-fit: contain; object-position: center bottom; }
.slide { min-height: clamp(460px, 42vw, 540px); }
.slide-copy { padding-left: max(calc(var(--gutter) + 52px), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.slide:nth-child(2) { background: linear-gradient(100deg, #141f3d 0%, #1b2a55 60%, #22336a 100%); }

/* ===== equipment cards (photo-top style) ===== */
.eq-head { text-align: center; display: grid; gap: 14px; justify-items: center; margin: 64px 0 40px; }
.section > .wrap > .eq-head:first-child { margin-top: 0; }
.eq-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-weight: 900; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: #d9620b; }
.eq-eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.eq-head h2 { font-family: var(--f-body); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.75rem); color: #0f1638; letter-spacing: -.01em; }
.eq-head p { color: var(--muted); font-size: 1.1rem; max-width: 60ch; }
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.eq-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; }
.eq-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; z-index: 2; }
.eq-card:hover, .eq-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.eq-card:hover::before, .eq-card:focus-visible::before { transform: scaleX(1); }
.eq-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.eq-media svg, .eq-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.eq-card:hover .eq-media svg, .eq-card:hover .eq-media img { transform: scale(1.06); }
.eq-body { padding: 28px 30px 30px; display: grid; gap: 12px; align-content: start; flex: 1; }
.eq-tag { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eq-body h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.5rem; color: #0f1638; text-transform: none; letter-spacing: -.01em; }
.eq-body p { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.eq-body .go { color: var(--primary); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.eq-card:hover .go .icon { transform: translateX(4px); }
@media (max-width: 960px) { .eq-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .eq-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .eq-card, .eq-media svg { transition: none; } }

/* ===== blue hover animation on equipment cards ===== */
.eq-card::before { background: linear-gradient(90deg, var(--primary), #4f6ae0); }
.eq-card:hover, .eq-card:focus-visible { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); box-shadow: 0 18px 40px rgb(37 57 147 / .22); }
.eq-media { position: relative; }
.eq-hover {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgb(27 43 120 / .92) 0%, rgb(37 57 147 / .72) 55%, rgb(37 57 147 / .25) 100%);
  clip-path: inset(100% 0 0 0); transition: clip-path .5s cubic-bezier(.2,.7,.2,1);
}
.eq-hover-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: .8em 1.4em; border-radius: 999px; background: #fff; color: var(--primary);
  font-weight: 700; font-size: .9rem; letter-spacing: .02em; transform: translateY(18px); opacity: 0; transition: transform .45s .15s, opacity .45s .15s;
}
.eq-hover-btn .icon { width: 16px; height: 16px; }
.eq-card:hover .eq-hover, .eq-card:focus-visible .eq-hover { clip-path: inset(0 0 0 0); }
.eq-card:hover .eq-hover-btn, .eq-card:focus-visible .eq-hover-btn { transform: none; opacity: 1; }
.eq-body h3 { transition: color .25s; }
.eq-card:hover .eq-body h3 { color: var(--primary); }
.eq-tag { color: var(--primary); }
.eq-card .make { transition: background .25s, color .25s; }
.eq-card:hover .make { background: var(--primary); color: #fff; }
/* gentle blue shimmer on the card's top edge at rest */
.eq-card::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 4px; background: linear-gradient(90deg, transparent, rgb(79 106 224 / .9), transparent); animation: eqShine 4.5s ease-in-out infinite; z-index: 3; }
.eq-card:nth-child(2)::after { animation-delay: 1.5s; } .eq-card:nth-child(3)::after { animation-delay: 3s; }
@keyframes eqShine { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@media (hover: none) { .eq-hover { display: none; } }
@media (prefers-reduced-motion: reduce) { .eq-hover, .eq-hover-btn { transition: none; } .eq-card::after { animation: none; display: none; } }

/* ===== animated fuel injector icon (2s loop) ===== */
.cat-card .ci.ci-injector { background: var(--primary); width: 72px; height: 72px; overflow: hidden; }
.cat-card:hover .ci.ci-injector { background: var(--accent); }
.injector { width: 100%; height: 100%; display: block; }
.inj-body { animation: injPulse 2s ease-in-out infinite; }
.inj-spray circle { opacity: 0; animation: injSpray 2s ease-out infinite; }
.inj-spray .d2 { animation-delay: .08s; } .inj-spray .d3 { animation-delay: .16s; }
@keyframes injPulse {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-4px); }   /* plunger fires toward the nozzle */
  30% { transform: translateX(1px); }
  42% { transform: translateX(0); }
}
@keyframes injSpray {
  0%, 14% { opacity: 0; transform: translate(0, 0) scale(.6); }
  22% { opacity: 1; transform: translate(-3px, 0) scale(1); }
  55% { opacity: 0; transform: translate(-12px, var(--dy, 0)) scale(.4); }
  100% { opacity: 0; }
}
.inj-spray .d2 { --dy: -4px; } .inj-spray .d3 { --dy: 4px; }
.inj-spray circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .inj-body, .inj-spray circle { animation: none; } .inj-spray circle { opacity: 0; } }
.cat-card .ci.ci-injector { color: var(--primary); }
.cat-card:hover .ci.ci-injector { color: var(--accent); }

/* ===== grey "tube" part tags (Fuel & Air) ===== */
.tube-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tube-tags li {
  position: relative; overflow: hidden; padding: .45em .95em; border-radius: 999px; font-size: .82rem; font-weight: 500; color: #3a3f4a; line-height: 1.3;
  background: linear-gradient(180deg, #f6f7f9 0%, #e3e6ea 48%, #d4d8de 52%, #e9ebee 100%);
  border: 1px solid #cdd1d8; box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(29 37 80 / .08);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.tube-tags li::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .75), transparent); transform: skewX(-20deg); transition: left .55s ease;
}
.tube-tags li:hover {
  transform: translateY(-3px) scale(1.04); color: #fff; border-color: var(--primary);
  background: linear-gradient(180deg, #3d55c4 0%, #2a40a6 48%, #22378f 52%, #2f46ac 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 14px rgb(37 57 147 / .3);
}
.tube-tags li:hover::after { left: 130%; }
/* when the card is hovered, the tags ripple one after another */
.cat-card:hover .tube-tags li { animation: tubeRipple .5s ease both; animation-delay: calc(var(--n) * 45ms); }
@keyframes tubeRipple { 0% { transform: translateY(0); } 45% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.cat-card:hover .tube-tags li:hover { animation: none; transform: translateY(-3px) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .tube-tags li, .tube-tags li::after { transition: none; } .cat-card:hover .tube-tags li { animation: none; } }
/* keep Fuel & Air card the same size as the other category cards */
.tube-tags { gap: 6px; margin-top: 0; }
.tube-tags li { font-size: .74rem; padding: .28em .7em; }
.tube-tags li.more-tag { background: none; border-style: dashed; box-shadow: none; color: var(--primary); font-weight: 600; }
/* Fuel & Air: two slow-moving rows of tube tags so the card keeps the same size as the others */
.tube-rail { width: 100%; display: grid; gap: 7px; padding-block: 6px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tube-row { overflow: visible; }
.tube-rail .tube-tags { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 7px; animation: tubeSlide 22s linear infinite; }
.tube-rail .r2 .tube-tags { animation-direction: reverse; animation-duration: 26s; }
.tube-rail .tube-tags li { white-space: nowrap; flex: none; animation: none !important; }
.tube-rail:hover .tube-tags { animation-play-state: paused; }
@keyframes tubeSlide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tube-rail .tube-tags { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .tube-rail .tube-tags li[aria-hidden] { display: none; } }

/* ===== animated bevel gear icon (Transmission & Axles) ===== */
.cat-card .ci.ci-anim { background: var(--primary); width: 72px; height: 72px; overflow: hidden; }
.cat-card:hover .ci.ci-anim { background: var(--accent); }
.bevel { width: 100%; height: 100%; display: block; }
.crown-teeth { animation: crownTurn 2s linear infinite; }
.pinion-teeth { animation: pinionTurn 2s linear infinite; }
@keyframes crownTurn { to { stroke-dashoffset: -14.8; } }
@keyframes pinionTurn { to { stroke-dashoffset: 25; } }
@media (prefers-reduced-motion: reduce) { .crown-teeth, .pinion-teeth { animation: none; } }
.ci-bevel { color: var(--primary); }
.cat-card:hover .ci-bevel { color: var(--accent); }
.bv-teeth-a { animation: bvA 1.2s linear infinite; }
.bv-teeth-b { animation: bvB 1.2s linear infinite; }
@keyframes bvA { to { transform: translateX(-6px); } }   /* crown wheel turns */
@keyframes bvB { to { transform: translateY(6px); } }    /* meshing pinion turns with it */
@media (prefers-reduced-motion: reduce) { .bv-teeth-a, .bv-teeth-b { animation: none; } }
/* static tube tags (no sliding) */
.tube-tags.static { flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 300px; margin-inline: auto; }
.tube-tags.static li { font-size: .78rem; padding: .34em .85em; animation: none !important; }
.cat-card:hover .tube-tags.static li { animation: none; }

/* ===== moving piston icon (Diesel Engine) ===== */
.ci-piston { color: var(--primary); }
.cat-card:hover .ci-piston { color: var(--accent); }
.piston { width: 100%; height: 100%; display: block; }
.ps-move { animation: psStroke 2s ease-in-out infinite; }
.ps-rod { transform-box: view-box; transform-origin: 50px 40px; animation: psSwing 2s ease-in-out infinite; }
@keyframes psStroke { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }      /* up and down stroke */
@keyframes psSwing { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }  /* rod follows the crank */
@media (prefers-reduced-motion: reduce) { .ps-move, .ps-rod { animation: none; } }

/* ===== expandable tag list ===== */
.cat-card.has-tags .card-link { color: inherit; text-decoration: none; }
.cat-card.has-tags .card-link:hover { color: var(--accent); }
.cat-card.has-tags a.more { text-decoration: none; }
.cat-card.has-tags a.more:hover { text-decoration: underline; }
.tube-tags .more-li { list-style: none; }
.tube-tags .more-tag {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--primary); cursor: pointer; padding: .34em .85em; border-radius: 999px;
  background: none; border: 1px dashed color-mix(in srgb, var(--primary) 55%, #fff); transition: background .2s, color .2s, border-color .2s;
}
.tube-tags .more-tag:hover { background: var(--primary); color: #fff; border-style: solid; border-color: var(--primary); }
.tube-tags li.extra { display: none; }
.tube-tags.expanded li.extra { display: block; animation: tagIn .35s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--n) * 40ms); }
@keyframes tagIn { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
.tube-tags.static li.extra:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .tube-tags.expanded li.extra { animation: none; } }
.tube-tags li.more-li { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.tube-tags li.more-li::after { display: none; }
.tube-tags li.more-li:hover { background: none; transform: none; box-shadow: none; }

/* ===== hydraulic cylinder icon: rod extends and retracts ===== */
.ci-hyd { color: var(--primary); }
.cat-card:hover .ci-hyd { color: var(--accent); }
.hyd { width: 100%; height: 100%; display: block; }
.hyd-rod { animation: hydStroke 2s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes hydStroke { 0%, 15% { transform: translateY(6px); } 50%, 65% { transform: translateY(-5px); } 100% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hyd-rod { animation: none; } }

/* ===== animations run only on interaction (hover, tap or keyboard focus) ===== */
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .inj-body,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .inj-spray circle,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .bv-teeth-a,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .bv-teeth-b,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .ps-move,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .ps-rod,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .hyd-rod { animation: none; }
.eq-card::after { animation: none; opacity: 0; }
.eq-card:hover::after, .eq-card:focus-visible::after { opacity: 1; animation: eqShine 1.6s ease-in-out infinite; }

/* ===== disc brake icon: rotor spins, caliper clamps (on interaction) ===== */
.ci-brake { color: var(--primary); }
.cat-card:hover .ci-brake { color: var(--accent); }
.brake { width: 100%; height: 100%; display: block; }
.br-disc { transform-box: view-box; transform-origin: 54px 57px; animation: brSpin 2s cubic-bezier(.3,0,.4,1) infinite; }
.br-caliper { animation: brClamp 2s ease-in-out infinite; }
@keyframes brSpin { 0% { transform: rotate(0); } 70% { transform: rotate(330deg); } 100% { transform: rotate(360deg); } }  /* slows as the brake bites */
@keyframes brClamp { 0%, 45% { transform: translate(0, 0); } 60%, 85% { transform: translate(2px, 2px); } 100% { transform: translate(0, 0); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .br-disc,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .br-caliper { animation: none; }
@media (prefers-reduced-motion: reduce) { .br-disc, .br-caliper { animation: none; } }

/* ===== spark plug icon: sparks fire at the electrode (on interaction) ===== */
.ci-spark { color: var(--primary); }
.cat-card:hover .ci-spark { color: var(--accent); }
.spark { width: 100%; height: 100%; display: block; }
.sp-rays { transform-box: view-box; transform-origin: 50px 78px; animation: spRays 2s steps(1, end) infinite, spGrow 2s ease-out infinite; }
.sp-flash { transform-box: fill-box; transform-origin: center; opacity: 0; animation: spFlash 2s ease-out infinite; }
.sp-plug { animation: spJolt 2s linear infinite; }
.sp-warn { animation: spWarn 2s steps(1, end) infinite; }
@keyframes spRays { 0% { opacity: 1; } 18% { opacity: 0; } 46% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 1; } }
@keyframes spGrow { 0% { transform: scale(.75); } 10% { transform: scale(1.12); } 46% { transform: scale(.8); } 52% { transform: scale(1.1); } 100% { transform: scale(.75); } }
@keyframes spFlash { 0% { opacity: 1; transform: scale(1.5); } 14% { opacity: 0; transform: scale(.5); } 46% { opacity: 1; transform: scale(1.4); } 58% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } }
@keyframes spJolt { 0%, 100% { transform: translate(0, 0); } 3% { transform: translate(-.8px, 0); } 6% { transform: translate(.8px, 0); } 9% { transform: translate(0, 0); } 48% { transform: translate(-.6px, 0); } 51% { transform: translate(0, 0); } }
@keyframes spWarn { 0% { opacity: 1; } 25% { opacity: .35; } 50% { opacity: 1; } 75% { opacity: .35; } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .sp-rays,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .sp-flash,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .sp-plug,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .sp-warn { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-rays, .sp-flash, .sp-plug, .sp-warn { animation: none; } }

/* ===== cooling fan icon: spins up on interaction ===== */
.ci-fan { color: var(--primary); }
.cat-card:hover .ci-fan { color: var(--accent); }
.fan { width: 100%; height: 100%; display: block; }
.fan-rotor { transform-box: view-box; transform-origin: 50px 50px; animation: fanSpin .9s linear infinite; }
@keyframes fanSpin { to { transform: rotate(360deg); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .fan-rotor { animation: none; }
@media (prefers-reduced-motion: reduce) { .fan-rotor { animation: none; } }

/* ===== cooling fan: your exact icon artwork, spun as one piece ===== */
.ci-fan { position: relative; }
.ci-fan .fan-mask {
  position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/png;base64,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") center / 100% 100% no-repeat; mask: url("data:image/png;base64,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") center / 100% 100% no-repeat;
  transform-origin: 50% 48.8%; animation: fanSpin .9s linear infinite;
}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .fan-mask { animation: none; }
@media (prefers-reduced-motion: reduce) { .fan-mask { animation: none; } }

/* ===== PTO shaft: turns about its axis and slides (telescopes) on interaction ===== */
.ci-pto { color: var(--primary); }
.cat-card:hover .ci-pto { color: var(--accent); }
.pto { width: 100%; height: 100%; display: block; }
.pto-spin { transform-box: view-box; transform-origin: 50px 50px; animation: ptoTurn 1s linear infinite; }
.pto-left { animation: ptoSlideL 2s ease-in-out infinite; }
.pto-right { animation: ptoSlideR 2s ease-in-out infinite; }
@keyframes ptoTurn { 0% { transform: scaleY(1); } 25% { transform: scaleY(.55); } 50% { transform: scaleY(1); } 75% { transform: scaleY(.55); } 100% { transform: scaleY(1); } }
@keyframes ptoSlideL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes ptoSlideR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-spin,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-left,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-right { animation: none; }
@media (prefers-reduced-motion: reduce) { .pto-spin, .pto-left, .pto-right { animation: none; } }


/* ===== linkage icon: your exact artwork, the two links tug apart and back (on interaction) ===== */
.ci-link { position: relative; }
.ci-link .link-a, .ci-link .link-b { position: absolute; inset: 0; background: #fff; }
.ci-link .link-a { -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAATFUlEQVR42u2de5RdZXmHn5MLuSOQQMCGm40krHAtICCldhmLFhVbsF1W660utIgsaEWgjZfWVS0VrH/YKnWBFl29qMsSbRdYUylS8LaQmwESrgVDiiRAEjOExGRO/3i/7ewcZzKTmW/vs8+c51lr1mQmM/ucs/ee57y/b3/7/VrtdhsRkV5girtARBSWiIjCEhGFJSKisEREFJaIKCwREYUlIqKwRERhiYgoLBERhSUiCktERGGJiCgsEVFYIiIKS0REYYmIwhIRUVgiIgpLRBSWiIjCEhFRWCKisEREFJaIiMISEYUlIqKwRERhiYgoLBERhSUiCktERGGJiCgsEVFYIiIKS0REYYmIwhIRUVgiIgpLRBSWiIjCEhFRWCKisEREFJaIiMISEYUlIqKwREQUlogoLBERhSUiorBERGGJiCgsERGFJSIKS0REYYmIwhIRUVgiIgpLRBSWiIjCEhFRWCKisEREFJaIiMISEYUlIqKwREQUlogoLBERhSUiorBERGGJiCgsERGFJSIKS0REYYmIKCwRUVgiIgpLRERhiUiPMs1d0He0Rvn/trtIFJY0RUztin5PRGHJuCTV3oNgZgPTR/i/F4DtYxSZAhOFJdkk9SJgITAHODp9vQ9wHHAAMDjMdn4CrElfrwceAQaAp4Bte3hcEYUlYxZV8fVBwDHAqenz0iSsg4FZ6WdGO+Y/T9vcDGwENgH3A/cAPwAeT9/fpbik9pO+3fY860FRlQ/aglQ1vTx9HAscAkwd4ffHO4a1HXgCeBT4EfBfwJ1JbIpLFJaMKKoWsAQ4EzgLOD1VUVPHIKbxXiVsdfzM46niuglYlSKk4hKFpah+IYAWcBRwDnBeqqZmDyObVgXPoz2CvDYDtwNfGUZcnlyisPq0qloM/C5wLnAiMGMUkVRNpxzL4roR2KC4RGH1n6xmAa8GLgR+g7jSV3U1NVFxfQP4TIqMbaUlCqs/IuChwAXAW4FFDRPVaOK6F/gc8GXiqqLSEoU1iSPgGcDFxHjVjAaLak/i2gLcAFxJzO9SWqKwJpmsZgKvAj4MnFKSQKvHXk85Cv4b8HHgbn55wqqIwupRWc0F/hi4CDish6qq0aQ1mGT1cWAlMenUaksUVo/L6r3A5cStM71YVY0mrrXAihQT2x0RUmRU7IfVDFnNSbK6jKH7/FqT7HUOEpNdP0ZMz2hNMilLDXgvYXMqq8uA+el7k/GNZEp6bYW0SJXWoPFQjIS9K6vJXnEUr/Eh4LPAl3DagyisnoiBF/aZrDqltRX4e+Aq4BmlJQqrmbKaD5wPXNqHsuqU1kCS1ieUloyGY1j1y2opcAUx8Lwv/Tvw3HnBAaUlCqtZf5z7Ae8H3kb3rpKNtx9WlfulGMtrA1fjmJaMgNMa6q0k3kO0hSku89chh3bHR2uUj86fr1Na7yMmzs5VVmKF1T1ZFRXEB4D9qWfqwkiz5J8n2iAPx0yG2taMtp2qpH4RsBP4NDG+ZaUlCqvmyqruqQvlx9hOdAe9F1gH/Bh4dhhhFt0hlgBHEG2Xy62Wq37exf46CLgEeA64Fm/jEYVVe2VVl6zKkW8zcBvwTeCHwIPENIKdo2xjn1QFLiN6xJ8NnMTufbhaFe+3hcRY3zPE5FKlJXGCOK1h0slqVxLVF9i9ZTFjjHblE2IK8FLg9cDvJXFNrfG1eO+hKKyaYmCdk0LbparqemIG+ZoRBLU3VwnLP3s88EHgd1Jl3g1peRuPwvLYT5LKai0xUP0vxBhVrtVryoJ4CfBu4F3E8mKDVHvxoFNaK42HCsu9MDlktYJolFdVD/XO6rGuNjjGQ/kFDrrn/UOu+2pgC3gA+FCqPqiw+iimYgwQC0wMsnujwSoH4sutaTAeWmFJ71RW5cH1m4BPAbcSV//q+AMeqZVz3ZXWyiQtT2CFJQ2WVfH5hvSHu7YLlUb58ZYTi0ycXLO0Lge+bpXVX3hrTu/EwPLYVFlWU7rwB1ue7/Vt4mbuO2qQRzkevp+YK2bXUoUlY6ys6pq6UI6BnZVVt1ahKd+bWLe02sDpwEeAw5WWwpLmxcBBYtymWzFwNJnWJa1iP08D3gC8g6F1G5WWwhJj4Jj3T53SahO3C70T+C1lpbDEGNjkeFhs+/D0eMdYZSksMQY2OR4Wj3kacC5D8wqVlsIyBhoDGxcPi2MwlWiMeApOcVBYVlbGwAbHw2K7xxALe7zIaKiwjIHGwKbHwxbwGuBMT1+FZQw0BjY5HhbbPAR4HTDLKkthGQONgU2PhxBdUpd6KissY6AxMEc8vAr4aQWvsThGS4BXduxfUVjGQGPguPbzjcDfUs2CqcVk0uXAog6RicIyBhoD97qa3Er007qK6lZ5Pgk41lNbYRkDjYE5RL2V6Dv/r0nauWPhfkQnB1vPKCxjoDEwyz7YQvSgX5VZLEUsPCMdT2OhwjIGGgOz7Iu1wHXAxgqqoaXEwrCisIyBxsBsx+IW4L8r2PYhOL1BYRkDjYGZJb4R+CqwIZPAi+M4jxh4n47jWArLGGgMzMh3gO9m3u/FqtWzO0QmCssYaAyckNA3ALcBP8+8f/YhOjmIwjIGGgOz7q/7iBWrc3IkDrwrLGOgMbACHgaeyLzNA4h2M6KwjIHGwKxsBX5WwfFwvyssY6AxMDubgDXuBtkT06ysssfAlcbAcVWl24guDuAVPemTCssY6PkoniDGQGNgLViNSl9EQmNg7x+7qcBMd4f0Uwl+NvCnxsCeZH+iJQzuQ5nMwiok8ZupslpoDOxZYb24gnPDAXwjYeNkdWSS1UnGwJ5lMUNtjXOxI32IFVZjZLUvcAmx8EDVS6IbA6s7lssYariXiypmz4vCmhBvAN4MzCid/MbA3nrTmU90CJ2euULeRMygFyNhI07044ELgAUVRkFjYPUcDZyQ+fwYBB4iJqTiG4sVVrdlNQN4C/CyCk9GY2C1x5F0HF/PUFeFVqZjtgN4lKGWNaKwusqJ6USfWlEUNAZWTztVVuek45hzvz4NPOIuNhI2pbo6FziqoihoDKynupoLvInoDJr7Ted/U4UlVliNqK7Oqfj5GwOrr65em4SVu2ptAz8EnnI3K6xuV1czgfOIeTu5q6ty/6SvGwMrra6WA5cCB2c8jsV2ngFuJ8axfKNRWF3lV4FXUU2v7uKE/zHwNyVZGQPzvum8HPhr4OSKIv0a4B53t8JqAiclaVUhqylJUh8F7sAxqypkdRhwMXAK1Y0/fh9YV/paFFZXTvbZwK8Ta87lPNnLKxGvIMaudnmyZz9++wOXE+OPVcT5FvB/xMKsTmdQWF3nyPTOXEUMfBz4EDGFYZcne/Z9PBV4I/AHDN2VUAWriPErUViTLg4WsnoB+EdioH0QB2pzV1fFm807UpVVVXW1nlhFerPHUGF1O05MI5Yen9fxh5CDm5OwvKpUHYvTm02V+3YVsSCrKKyuMx84pvSOmutd+UngGmKiobKqJg6Sjt0BVDfJ1+pKYTWKI6jm6uAtwK2eCpXGwX2B48jfjcHqSmE1lkXAQZnflZ8HvuO7cuXMI6YzVFG9tYAHgC94HBVWUyLFFGApMa2BjO/QjxHzraRaNhGtXqqQ1VbgWuLKoLJSWI2IFNOI9iPTM5+QdxBdKaW6NxuAgfTmMJg5Du4iruz+M7DT3a2wmnTi78r8zrwTuBv4me/MtbzpPJgqLTLs6+IY3gFcRdzk7DFUWI1hHnBg5m1uYej2DametcSVvFxvOGuJ+z3vVVYKq2ksJHpf5eRp8o+ryMix8GHga8Qk3fFWWUWkfBT4YIqDOSo2UVjZn2fuZoO7cNyjzli4jZice/M4K6Li4ssA8Dnifk9vTFdYIpVUWS1icu7fpc9Fj7H2GH63qKwG0u9fl95sjIIKS6RSbiba96xm95WZ2yN8tNJ5+iTwSeBqYKOy6k+muQukxioLYDvwRaLJ3vnAWcQS9SNNd9hMzLG6FvhmipbKSmGJ1MYu4HvA/cCpwCuAJcTdDIcSLY4fI67kfhv4T6LPFcpKYfUCzxD9qpZl3OZ84naR+zwNukIrVU/fSlKaQ1wNPoSYr7UuVWMDpZ9HWSmsXuBZ4InM25xP9GiS7kXEVqni2pI+HhpGbIpKgP4cdC/311pCrMJTVQcBGV1axb4vPqZ0fD2WK4misBpzQkP0536EvA32WsBpVNNFQMYnrmIKQ1tRSa9WWIWgHiOuEOXkKGJRVhFRWFl5lhikzSnB/YhVeGaWvi8iCmvCPJyqrNwsB04wfogorJxsIObt5IyaEAPv76Ka1VxEpM+EVV6Ka3X6nGvgvbih9jxivbx9PCVEFFYufkTe+VjlFYn/BDizJDERUVgTYi1wV+ZtFtJaDPw5cDL5W/mKSB8Jq4iFxY2w28l7T1mxrVcCVyZpOZ4lorAmLK7/IZZ1yk0hreVKS0Rh5eKBJK0qpbg8xcMX45iWiMKaQCzcTrQbWU/+ViPlG21fDVxC3CTtmJaIwho3txFLk1dBIabZwAXAZUlaxkMRhTWuKmsz8FWiqVsVDd2Kbc4F3gt8QGmJKKyJVln/QXUrp5Sl9T4rLRGFNdEq6x+IeVlVtc0ttjsnVVpKS0RhjVtadwHXAM/VIC3joYjCmhCDxGrCX6Pabgu9HA+VqiisBlVZzxGLa95KtSuq9Eo8bPHLLYY7vy+isLoorXuATxE3RtchrbklaR3YEGl19kAvPqaX9lVnD3WRnqLVbk+KvnUtYAbwVuDDxPp2VUqk2PZWYGWS5Z10b8288uMuAJYmkR6a/v0YsRrNE8CD6XmDa/yJwuqasNpJWn8GXJH+XYe0INbVuwK4owsSKEfV1wFvIjqo7k+0fp5BLOIxQMxb+x4x5ncL8LzSEoXVXWktSlXW24mGfFVLq3jssrSmUM+qL8VrPhy4CHgLcPAexFqwDvgscB3wU6UlCqv70voI8LYapFWWQllaVUau8j2PryCaD/52eq2d9z0O9xxaqeJaCfwVsEZpicLqn0qrU1pXElctd1DNDdrF9sqtcNiL19gubeczwApiIq7SkkYzGdumFH+M64CPAl+sSBwjVT3LU9x6O7uvKj2RK3OtjqpqDnGB4RMM9e3aGyG3SpXY7xNjXyJWWH0YDwvWA9cDnyeWKOsUW1mw7OH/yz/TAl4K/CHwHuCgCb6e4ndvBM6nmpY9IgprLyrIwS7Gwx3EVbkvEz28fkJcsWMPkhrugMwAXgK8lljh50TyXAUtfn8TMYP/nxSWKKz+rLTK2x8A7k7yup0Y5F4PbAN2sXvHialJtHOJjqfLiNWpTweOTaKigud/NTElZKfSEoXVv/Gw8zE2EuNr9wNbgKeB+1I1Ngs4DtiPuO3naOBXiDlVw8XDnM/vJuCdOM1BGsy0PnmdRV/2dcBfpq/rioed9/MtSB8npO8NpgpsMD3HeSM8fzKLqpN5DN3GI6KwukxxVay4etiqsdLa0xjVcJIay0C8iMLqg0qrVaq0oP6rh60xVFDdENQGYkxNRGEZD/daYnU+9g7gu8CzI1R4Io2gX9fb64yHdU0ubaK8Ia5Yfh+7qIrC6pl42K/SgriNaLV/DqKweiseXt9H0iqqzIeBLxGTR53OIArLeNhYUQ8A16YKS0Rh9Wg8vJ64hWYySqt4rQNEL/zr+jgKS4/RLzPd90bgg0Rr4UuBNxOTPCfLYHTxOp5Movo0MfNeWYnC6tV9kv545xEdPFcw1COeHhVX+bmvAf4C+AYx70pZicKaJNLah+iRfjHwax1VSq9VVYPEjdefBP6dobE7TwBRWJNIWi3gVGJJr9cQNyj3QrVVfo5bgBuIjgyrO16fiMKaZNKC6JpwIfBHwMJhpNBEUQE8TrRB/jwxXiWisPpEXHOJJnrvTlXXnAaJq/M5bCamK1wD3Ay8YFUlCqs/q60jgLOBNwIvG0ZcdclruMfbTIxVfQX4FrEWoRFQFFafSosRxHUqMHsUmVQlqU5RrSLuDxzuOYsorD6utsriOovoGLqI3Zvh5V7mq+AFok/8XcRCEopKFJaMWVwLgKXAacAZwPHESsyzMj7m1hTz7kwV1Q+AB4l7ARWVKCzZ66hYyOsooi/7MuAwYDExcL+QmOM12ja3AU8lST2YqqnVwAPAQyVJKSpRWJJFXBCNEvcFDkyfjyYG6tujbGsTMTN9gFgcYiuxys5w8dADKQpLJiyv3DJRUtK3THMXVEYdVwlFFJZUKi8RGSf2wxIRhSUiorBERGGJiCgsERGFJSIKS0REYYmIKCwRUVgiIgpLRERhiYjCEhFRWCIiCktEFJaIiMISEVFYIqKwREQUloiIwhIRhSUiorBERBSWiCgsERGFJSKisEREYYmIKCwRUVjuAhFRWCIiCktEFJaIiMISEVFYIqKwREQUloiIwhIRhSUiorBERBSWiCgsERGFJSKisEREYYmIKCwREYUlIgpLRERhiYgoLBFRWCIiCktERGGJiMISEVFYIiIKS0QUloiIwhIRhSUiorBERBSWiCgsERGFJSKisEREYYmIKCwREYUlIgpLRKRJ/D/0elP6g+BfkAAAAABJRU5ErkJggg==") center / 100% 100% no-repeat; mask: url("data:image/png;base64,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") center / 100% 100% no-repeat; animation: linkA 2s ease-in-out infinite; }
.ci-link .link-b { -webkit-mask: url("data:image/png;base64,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") center / 100% 100% no-repeat; mask: url("data:image/png;base64,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") center / 100% 100% no-repeat; animation: linkB 2s ease-in-out infinite; }
@keyframes linkA { 0%, 100% { transform: translate(0, 0); } 35%, 55% { transform: translate(-3.5px, 3.5px); } 70% { transform: translate(.6px, -.6px); } }
@keyframes linkB { 0%, 100% { transform: translate(0, 0); } 35%, 55% { transform: translate(3.5px, -3.5px); } 70% { transform: translate(-.6px, .6px); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .link-a,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .link-b { animation: none; }
@media (prefers-reduced-motion: reduce) { .link-a, .link-b { animation: none; } }

/* PTO: spin the whole shaft as one rigid piece (shape never changes) */
.pto-spin { animation: ptoSpin 2s linear infinite; }
.pto-left, .pto-right { animation: none !important; }
@keyframes ptoSpin { to { transform: rotate(360deg); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .pto-spin { animation: none; } }

/* PTO (clean): shaft keeps its exact shape; rotation shown by bands sweeping round the shaft
   and the cross-pin travelling over the yoke, while the two halves telescope in and out */
.pto-spin { animation: none !important; }
.pto-left { animation: ptoSlideL 2s ease-in-out infinite !important; }
.pto-right { animation: ptoSlideR 2s ease-in-out infinite !important; }
.pto-band { animation: ptoBand 1s linear infinite; }
.pto-band.b2 { animation-delay: -.5s; }
@keyframes ptoBand { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
.pto-pin { animation: ptoPin 1s linear infinite; }
@keyframes ptoPin { 0% { transform: translateY(-11px); } 100% { transform: translateY(11px); } }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-left,
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-right { animation: none !important; }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-band { animation: none; opacity: 0; }
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-pin { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .pto-left, .pto-right { animation: none !important; } .pto-band, .pto-pin { animation: none; } .pto-band { opacity: 0; } }
/* PTO: no telescoping gap — halves stay joined, only the spin effect runs */
.pto-left, .pto-right, .cat-card:hover .pto-left, .cat-card:hover .pto-right { animation: none !important; transform: none !important; }

/* Linkage: on interaction the two links come in from apart and interlock completely, then stay locked */
.ci-link .link-a, .ci-link .link-b { animation: none; }
.cat-card:hover .ci-link .link-a, .cat-card:focus-within .ci-link .link-a, .cat-card:active .ci-link .link-a { animation: linkInA 1.1s cubic-bezier(.3,.7,.2,1) both; }
.cat-card:hover .ci-link .link-b, .cat-card:focus-within .ci-link .link-b, .cat-card:active .ci-link .link-b { animation: linkInB 1.1s cubic-bezier(.3,.7,.2,1) both; }
@keyframes linkInA { 0% { transform: translate(-14px, 14px); opacity: .3; } 30% { opacity: 1; } 70% { transform: translate(1px, -1px); } 85% { transform: translate(-.5px, .5px); } 100% { transform: translate(0, 0); } }
@keyframes linkInB { 0% { transform: translate(14px, -14px); opacity: .3; } 30% { opacity: 1; } 70% { transform: translate(-1px, 1px); } 85% { transform: translate(.5px, -.5px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .cat-card:hover .ci-link .link-a, .cat-card:hover .ci-link .link-b { animation: none; } }

/* ===== Makes we serve — dark band, colour-coded brand cards with a pattern per equipment type ===== */
.makes-band {
  --mk-agri: #ff8b00; --mk-bhl: #ffc93c; --mk-dsl: #48c6f0;
  position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 88px);
  background:
    radial-gradient(60% 80% at 15% 0%, rgb(47 70 172 / .45), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgb(255 139 0 / .12), transparent 60%),
    #0b1033;
  color: #fff;
}
.makes-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 40px 40px; }
.mk-head { position: relative; text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: 40px; }
.mk-head .eq-eyebrow { color: #ff8b00; }
.mk-head h2 { font-family: var(--f-body); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.75rem); color: #fff; letter-spacing: -.01em; }
.mk-head p { color: #b7bfe0; font-size: 1.08rem; max-width: 56ch; }
.mk-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.mk-legend span { display: inline-flex; align-items: center; gap: 8px; padding: .4em .9em; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; border: 1px solid; background: rgb(255 255 255 / .04); }
.mk-legend .icon { width: 16px; height: 16px; }
.lg-agri { color: var(--mk-agri); border-color: rgb(255 139 0 / .45) !important; }
.lg-bhl { color: var(--mk-bhl); border-color: rgb(255 201 60 / .45) !important; }
.lg-dsl { color: var(--mk-dsl); border-color: rgb(72 198 240 / .45) !important; }

.mk-rail { position: relative; overflow: hidden; padding-block: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mk-track { display: flex; gap: 22px; width: max-content; animation: mkSlide 48s linear infinite; padding-inline: 11px; }
.mk-rail:hover .mk-track, .mk-rail:focus-within .mk-track { animation-play-state: paused; }
@keyframes mkSlide { to { transform: translateX(-50%); } }

.mk-card {
  --c: var(--mk-agri);
  position: relative; flex: none; min-width: 230px; padding: 22px 30px 20px; border-radius: 10px; text-align: center;
  display: grid; justify-items: center; gap: 8px; border: 1.5px solid color-mix(in srgb, var(--c) 75%, transparent);
  background-color: #131a4d; transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s;
}
.mk-card b { font-family: var(--f-body); font-weight: 700; font-size: 1.4rem; color: #fff; white-space: nowrap; }
.mk-cat { font-family: var(--f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #c9d0ee); white-space: nowrap; }
.mk-icons { display: flex; gap: 12px; height: 30px; align-items: center; }
.mk-ic { color: var(--c); display: grid; transition: transform .3s; }
.mk-ic .icon { width: 28px; height: 28px; stroke-width: 1.7; }
.mk-ic-agri { color: var(--mk-agri); } .mk-ic-bhl { color: var(--mk-bhl); } .mk-ic-dsl { color: var(--mk-dsl); }

/* a different pattern for each equipment type */
.mk-agri { --c: var(--mk-agri); background-image: repeating-linear-gradient(135deg, rgb(255 139 0 / .09) 0 2px, transparent 2px 11px); }
.mk-bhl { --c: var(--mk-bhl); background-image: radial-gradient(rgb(255 201 60 / .22) 1.3px, transparent 1.6px); background-size: 13px 13px; }
.mk-dsl { --c: var(--mk-dsl); background-image: linear-gradient(rgb(72 198 240 / .11) 1px, transparent 1px), linear-gradient(90deg, rgb(72 198 240 / .11) 1px, transparent 1px); background-size: 14px 14px; }
/* makes that cover two equipment types get a two-colour border */
.mk-multi { border-color: transparent; background-clip: padding-box; }
.mk-multi::before { content: ""; position: absolute; inset: -1.5px; border-radius: 11px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, var(--c), var(--c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mk-2dsl { --c2: var(--mk-dsl); } .mk-2bhl { --c2: var(--mk-bhl); } .mk-2agri { --c2: var(--mk-agri); }

.mk-card:hover { transform: translateY(-5px); background-color: #18205c; border-color: var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 14px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.mk-card:hover .mk-ic { transform: translateY(-3px) scale(1.12); }
.mk-card:hover .mk-ic + .mk-ic { transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .mk-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: var(--gutter); }
  .mk-track > [aria-hidden="true"] { display: none; }
  .mk-card, .mk-ic { transition: none; }
}
@media (max-width: 560px) { .mk-card { min-width: 200px; padding: 18px 22px; } .mk-card b { font-size: 1.2rem; } }

/* ===== B2B order portal — video + interactive feature explorer ===== */
.b2b2 { background: radial-gradient(70% 60% at 0% 0%, #2f46ac 0%, transparent 60%), linear-gradient(110deg, #1b2b78, #253993); color: #fff; position: relative; overflow: hidden; }
.b2b2::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.4px); background-size: 22px 22px; }
.b2b2 .wrap { position: relative; }
.b2b-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.b2b-copy { display: grid; gap: 18px; }
.b2b-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.b2b-copy .lead { color: #cdd4f2; }
.b2b-copy .row { display: flex; flex-wrap: wrap; gap: 12px; }
.b2b-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.b2b-steps li { display: flex; align-items: center; gap: 12px; color: #e6eaff; font-size: .98rem; }
.b2b-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 139 0 / .15); color: #ffb257; border: 1px solid rgb(255 139 0 / .5); font-size: .85rem; flex: none; }

.video-card { display: grid; gap: 10px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b1033; box-shadow: 0 24px 60px rgb(5 10 40 / .45), 0 0 0 1px rgb(255 255 255 / .12); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, #18245f, #2f46ac); display: grid; place-items: center; }
.vp-screen { position: absolute; inset: 12% 14% 22%; border-radius: 8px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); padding: 5%; display: grid; gap: 6%; align-content: start; }
.vp-row { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .18); }
.vp-row.w60 { width: 60%; background: rgb(255 139 0 / .7); } .vp-row.w80 { width: 80%; } .vp-row.w40 { width: 40%; }
.vp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4%; }
.vp-grid i { aspect-ratio: 4/3; border-radius: 4px; background: rgb(255 255 255 / .1); }
.vp-btn { position: relative; width: 78px; height: 78px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 0 rgb(255 139 0 / .5); transition: transform .25s; }
.vp-btn svg { width: 34px; height: 34px; margin-left: 4px; }
.video-play:hover .vp-btn, .video-play:focus-visible .vp-btn { transform: scale(1.08); animation: vpPulse 1.4s ease-out infinite; }
@keyframes vpPulse { 0% { box-shadow: 0 0 0 0 rgb(255 139 0 / .55); } 100% { box-shadow: 0 0 0 22px rgb(255 139 0 / 0); } }
.vp-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; text-align: left; background: linear-gradient(transparent, rgb(5 10 40 / .75)); display: grid; gap: 2px; }
.vp-label b { font-size: 1.05rem; } .vp-label small { color: #cdd4f2; }
.video-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: #cdd4f2; }
.video-meta span, .video-meta a { display: inline-flex; align-items: center; gap: 6px; }
.video-meta a { color: #ffb257; text-decoration: none; font-weight: 600; } .video-meta a:hover { text-decoration: underline; }
.video-meta .icon { width: 16px; height: 16px; }

.b2b-explore { margin-top: clamp(48px, 6vw, 72px); }
.b2b-explore-head { display: grid; gap: 6px; margin-bottom: 20px; }
.b2b-explore-head h3 { color: #fff; font-family: var(--f-display); font-size: 1.6rem; }
.b2b-explore-head p { color: #cdd4f2; }
.b2b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.b2b-tabs { display: grid; gap: 8px; }
.b2b-tab { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 10px; cursor: pointer;
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .12); color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.b2b-tab:hover { background: rgb(255 255 255 / .08); transform: translateX(3px); }
.b2b-tab .icon { width: 24px; height: 24px; color: #ffb257; }
.b2b-num { font-family: var(--f-mono); font-size: .75rem; font-weight: 700; color: rgb(255 255 255 / .45); }
.b2b-tt b { display: block; font-weight: 600; }
.b2b-tt small { display: block; color: #cdd4f2; font-size: .85rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .3s, margin .3s; }
.b2b-tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 12px 30px rgb(5 10 40 / .3); }
.b2b-tab[aria-selected="true"] .b2b-num { color: var(--accent); }
.b2b-tab[aria-selected="true"] .icon { color: var(--accent); }
.b2b-tab[aria-selected="true"] .b2b-tt small { max-height: 80px; opacity: 1; margin-top: 4px; color: var(--muted); }

.b2b-panel { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 10px; }
.device { background: #fff; border-radius: 14px; overflow: hidden; color: var(--ink); box-shadow: 0 24px 60px rgb(5 10 40 / .4); }
.device-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef0f7; border-bottom: 1px solid var(--line); }
.device-top i { width: 10px; height: 10px; border-radius: 50%; background: #d0d4e0; } .device-top i:first-child { background: #ff6b5a; } .device-top i:nth-child(2) { background: #ffc93c; } .device-top i:nth-child(3) { background: #3ccf7a; }
.device-top span { margin-left: 10px; font-size: .78rem; color: var(--muted); background: #fff; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.device-body { padding: 18px; min-height: 300px; }
.scr { display: grid; gap: 14px; animation: scrIn .35s ease both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scr-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: .9rem; color: var(--primary); font-weight: 600; }
.scr-bar span { display: inline-flex; gap: 8px; align-items: center; } .scr-bar .icon { width: 16px; height: 16px; }
.scr-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.scr-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.scr-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.scr-table tbody tr { transition: background .15s; } .scr-table tbody tr:hover { background: var(--surface-2); }
.thumb { display: block; width: 30px; height: 24px; border-radius: 4px; background: linear-gradient(135deg, #dfe3ee, #c6ccdc); }
.price-card { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.price-card small { display: block; color: var(--muted); font-size: .8rem; }
.price-rows { display: grid; gap: 4px; justify-items: end; font-size: .85rem; color: var(--muted); }
.price-rows .yours { color: var(--ink); } .price-rows .yours b { color: var(--primary); font-size: 1.05rem; }
.pill-ok { background: rgb(31 122 77 / .1); color: var(--ok); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.rep { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 10px; background: var(--surface-2); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; }
.rep small { display: block; color: var(--muted); }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rep-list li { display: flex; gap: 10px; align-items: center; } .rep-list .icon { color: var(--ok); }
.online { font-style: normal; font-size: .75rem; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.chat { display: grid; gap: 10px; }
.msg { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 80%; font-size: .9rem; }
.msg.you { justify-self: end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.rep-msg { background: var(--surface-2); border-bottom-left-radius: 4px; }
.scr[data-s="3"] .msg { animation: msgIn .4s ease both; } .scr[data-s="3"] .msg:nth-child(2) { animation-delay: .5s; } .scr[data-s="3"] .msg:nth-child(3) { animation-delay: 1s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.typing { margin: 0; display: inline-flex; gap: 4px; padding: 10px 14px; background: var(--surface-2); border-radius: 14px; width: fit-content; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typeDot 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.cart { display: grid; gap: 10px; }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .92rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 32px; height: 30px; border: 0; background: var(--surface-2); cursor: pointer; font-size: 1rem; color: var(--primary); }
.qty button:hover { background: var(--primary); color: #fff; }
.qty output { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.cart-done { display: flex; gap: 8px; align-items: center; color: var(--ok); font-weight: 600; margin: 0; } .cart-done .icon { color: var(--ok); }
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: t; }
.track li { position: relative; padding: 8px 0 14px 34px; color: var(--muted); font-size: .92rem; }
.track li::before { content: ""; position: absolute; left: 8px; top: 9px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: #fff; z-index: 1; transition: all .3s; }
.track li::after { content: ""; position: absolute; left: 14px; top: 23px; bottom: -9px; width: 2px; background: var(--line); }
.track li:last-child::after { display: none; }
.track li.done { color: var(--ink); } .track li.done::before { background: var(--primary); border-color: var(--primary); } .track li.done::after { background: var(--primary); }
.track li.now { color: var(--accent); font-weight: 700; } .track li.now::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgb(255 139 0 / .2); }
.b2b-note { font-size: .8rem; color: #b7bfe0; }
@media (max-width: 900px) { .b2b-top, .b2b-grid { grid-template-columns: 1fr; } .b2b-panel { position: static; } }
@media (prefers-reduced-motion: reduce) { .scr, .msg, .typing i, .vp-btn { animation: none !important; } }
.vp-badge { position: absolute; top: 14px; left: 14px; background: var(--accent); color: #fff; font-family: var(--f-mono); font-weight: 900; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .35em .7em; border-radius: 4px; }
.vp-dur { position: absolute; right: 14px; bottom: 14px; z-index: 1; background: rgb(0 0 0 / .7); color: #fff; font-size: .78rem; font-weight: 600; padding: .2em .5em; border-radius: 4px; font-variant-numeric: tabular-nums; }
.vp-label { padding-right: 70px; }

/* ===== self-hosted walkthrough video with chapters ===== */
.vf-local video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b1033; }
.vf-local .vp-over { background: linear-gradient(180deg, rgb(11 16 51 / .15), rgb(11 16 51 / .55)); }
.vf-local.playing .vp-over { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.vchapters { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: c; }
.vch { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14); color: #e6eaff; font-size: .82rem; line-height: 1.25; position: relative; overflow: hidden; transition: background .2s, border-color .2s; }
.vch:hover { background: rgb(255 255 255 / .1); }
.vch-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgb(255 255 255 / .12); }
.vch-time { font-variant-numeric: tabular-nums; color: #b7bfe0; font-size: .74rem; }
.vch::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--accent); transition: width .25s linear; }
.vch.active { background: #fff; color: var(--ink); border-color: #fff; }
.vch.active .vch-n { background: var(--accent); color: #fff; }
.vch.active .vch-time { color: var(--muted); }
@media (max-width: 700px) { .vchapters { grid-template-columns: 1fr 1fr; } }
/* hover preview state: overlay fades so the video shows, hint stays */
.vf-local.previewing .vp-over { opacity: 1; visibility: visible; background: transparent; }
.vf-local.previewing .vp-btn, .vf-local.previewing .vp-label, .vf-local.previewing .vp-badge { opacity: 0; transition: opacity .25s; }
.vp-hint { position: absolute; top: 14px; right: 14px; background: rgb(0 0 0 / .6); color: #fff; font-size: .72rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; }
.vf-local.previewing .vp-hint { opacity: 1; }
.vf-local.playing:not(.previewing) .vp-hint { display: none; }
@media (hover: none) { .vp-hint { display: none; } }
.vf-local.previewing .vp-dur { opacity: 0; }

/* ===== explorer: portal-faithful mock screens (styled after the live order portal) ===== */
.device-body.pt-device { padding: 0; min-height: 0; }
.pt-url em { font-style: normal; color: var(--primary); }
.pt-app { display: grid; font-size: .8rem; color: #2b2f3a; background: #f4f5fa; }
.pt-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e6e8f0; }
.pt-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .04em; color: #f47e20; font-size: .82rem; }
.pt-logo i { width: 14px; height: 14px; border-radius: 3px; background: #f47e20; transform: skewX(-12deg); }
.pt-logo b { color: #253993; }
.pt-icons { display: flex; align-items: center; gap: 12px; }
.pt-icons > i { position: relative; color: #6b7080; display: grid; } .pt-icons .icon { width: 16px; height: 16px; }
.pt-icons > i::after { content: attr(data-n); position: absolute; top: -7px; right: -8px; min-width: 14px; height: 14px; border-radius: 7px; background: #e5243b; color: #fff; font: 700 .58rem/14px var(--f-body); text-align: center; padding: 0 3px; }
.pt-icons > i.bump::after { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.pt-av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #e5243b; color: #e5243b; font-size: .5rem; font-weight: 800; display: grid; place-items: center; }
.pt-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 330px; }
.pt-side { background: linear-gradient(180deg, #4a548f, #3c4580); color: #e8eaff; padding: 12px 0; }
.pt-hi { font-weight: 700; padding: 0 12px 10px; font-size: .82rem; }
.pt-side ul { list-style: none; margin: 0; padding: 0; }
.pt-side li { padding: 7px 12px; font-size: .74rem; display: flex; align-items: center; gap: 7px; opacity: .85; transition: background .25s, opacity .25s; }
.pt-side li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .7; }
.pt-side li.on { background: rgb(255 255 255 / .16); opacity: 1; box-shadow: inset 3px 0 0 #f47e20; font-weight: 600; }
.pt-main { padding: 12px; min-width: 0; position: relative; }
.pt-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgb(20 30 70 / .08); padding: 10px; display: grid; gap: 10px; position: relative; overflow: hidden; }
.pt-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #1f2d5a; font-size: .86rem; }
.pt-title .icon { width: 16px; height: 16px; color: #1f2d5a; }
.pt-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #6b7080; font-size: .72rem; flex-wrap: wrap; }
.pt-tools .sel { font-style: normal; border: 1px solid #dfe2ea; padding: 1px 8px; border-radius: 3px; margin: 0 3px; }
.typer { display: inline-block; min-width: 110px; padding: 3px 8px; border: 1.5px solid #f47e20; border-radius: 3px; color: #2b2f3a; background: #fff; }
.typer::after { content: "|"; margin-left: 1px; animation: blink 1s steps(1) infinite; color: #f47e20; }
@keyframes blink { 50% { opacity: 0; } }
.pt-tablewrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: .7rem; white-space: nowrap; }
.pt-table thead th { background: #1f2d5a; color: #fff; font-weight: 600; text-align: left; padding: 7px 8px; }
.pt-table td { padding: 7px 8px; border-bottom: 1px solid #eef0f5; }
.pt-table td.m { font-variant-numeric: tabular-nums; }
.pt-table td.fit { white-space: normal; min-width: 90px; color: #555a68; }
.pt-table tbody tr { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.35s + var(--r) * .09s); transition: background .2s; }
.pt-table tbody tr:hover { background: #f7f8fc; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.qbox { display: inline-block; border: 1px solid #dfe2ea; border-radius: 3px; padding: 2px 10px; }
.addc { border: 0; background: none; color: #e85d2a; cursor: pointer; padding: 2px; display: grid; transition: transform .2s; }
.addc .icon { width: 17px; height: 17px; } .addc:hover { transform: scale(1.2); }
.addc.added { color: #2dbb5d; } tr.flash { animation: flashRow .8s ease; }
@keyframes flashRow { 0% { background: rgb(45 187 93 / .25); } 100% { background: transparent; } }
.pt-hint { margin: 0; color: #cdd4f2; font-size: .74rem; display: none; }
.net { color: #1f2d5a; font-weight: 700; position: relative; }
.scr[data-s="1"] .net { animation: netGlow 1.6s ease 1.1s both; }
@keyframes netGlow { 0% { background: transparent; } 30% { background: rgb(244 126 32 / .18); } 100% { background: rgb(244 126 32 / .07); } }
.tot { font-weight: 700; }
.pt-badge-row { display: flex; justify-content: flex-end; }
.pt-badge { background: rgb(45 187 93 / .12); color: #1f7a4d; font-weight: 700; font-size: .7rem; padding: 3px 10px; border-radius: 999px; animation: msgIn .4s ease 1.4s both; }
.rep-pt { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 6px; background: #f4f5fa; }
.rep-pt small { display: block; color: #6b7080; }
.rep-pt .pt-online { margin-left: auto; }
.pt-online { font-size: .68rem; color: #1f7a4d; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.pt-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2dbb5d; animation: blink 1.4s infinite; }
.scr .rep-list li { animation: rowIn .4s ease both; animation-delay: calc(.3s + var(--r) * .15s); }
.pt-cart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.pt-btns i { font-style: normal; color: #fff; font-size: .64rem; font-weight: 700; padding: 5px 9px; border-radius: 3px; }
.b-xl { background: #2dbb5d; } .b-up { background: #4f5bd5; } .b-ex { background: #1f8f5f; } .b-pf { background: #e5243b; }
.pq { display: inline-flex; align-items: center; border: 1px solid #dfe2ea; border-radius: 3px; overflow: hidden; }
.pq button { border: 0; background: #f4f5fa; width: 20px; height: 22px; cursor: pointer; color: #1f2d5a; font-weight: 700; }
.pq button:hover { background: #1f2d5a; color: #fff; }
.pq output { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.rowtot { font-weight: 700; }
.pt-orderbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-totals { display: grid; gap: 2px; } .pt-totals small { color: #8a6d1d; font-size: .64rem; background: #fff7d6; padding: 3px 6px; border-radius: 3px; }
.grand { color: #1f2d5a; font-size: .9rem; }
.pt-order { border: 0; background: #2f4bb8; color: #fff; font-weight: 700; padding: 10px 26px; border-radius: 4px; cursor: pointer; box-shadow: 0 4px 10px rgb(47 75 184 / .35); transition: transform .15s, background .2s; }
.pt-order:hover { background: #253993; transform: translateY(-1px); }
.pt-order.busy { opacity: .7; pointer-events: none; }
.pt-modal { position: absolute; inset: 0; background: rgb(20 25 50 / .45); display: grid; place-items: center; animation: msgIn .25s ease; }
.pt-modal-box { background: #fff; border-radius: 8px; padding: 18px 26px; text-align: center; display: grid; gap: 6px; justify-items: center; box-shadow: 0 18px 40px rgb(0 0 0 / .25); animation: popIn .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.pt-ok { width: 44px; height: 44px; border-radius: 50%; background: #2dbb5d; color: #fff; display: grid; place-items: center; }
.pt-ok .icon { width: 24px; height: 24px; stroke-width: 3; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s ease .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pt-modal-box b { font-size: 1rem; } .pt-modal-box small { color: #6b7080; }
.pt-close { border: 1px solid #dfe2ea; background: #fff; border-radius: 4px; padding: 4px 14px; cursor: pointer; margin-top: 4px; }
.pt-advance { justify-self: start; border: 0; background: #1f2d5a; color: #fff; font-weight: 600; padding: 7px 14px; border-radius: 4px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pt-advance .icon { width: 14px; height: 14px; }
.pscr .track li { font-size: .8rem; }
@media (max-width: 560px) { .pt-body { grid-template-columns: 1fr; } .pt-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .pt-table tbody tr, .scr .rep-list li, .pt-badge, .pt-modal, .pt-modal-box, .typer::after, .pt-ok .icon { animation: none !important; } .pt-ok .icon { stroke-dashoffset: 0; } }
.b2b-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.38fr); }
.pt-table td.fit { min-width: 80px; }
@media (max-width: 900px) { .b2b-grid { grid-template-columns: 1fr; } }
.pt-body { grid-template-columns: 96px minmax(0, 1fr); }
.pt-side li { padding: 7px 10px; font-size: .7rem; }
.pt-main { padding: 10px; }
.pt-table { font-size: .68rem; } .pt-table thead th, .pt-table td { padding: 6px 6px; }

/* ===== Price Request Report (custom pricing) ===== */
.pt-title-lg { font-size: 1rem; gap: 10px; }
.pt-flag { width: 22px; height: 16px; background: #1f2d5a; clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%); }
.spr-form { display: flex; gap: 6px; flex-wrap: wrap; background: #f4f5fa; padding: 8px; border-radius: 6px; }
.spr-in { flex: 1 1 150px; min-width: 0; border: 1px solid #dfe2ea; border-radius: 4px; padding: 5px 8px; font-size: .74rem; background: #fff; }
.spr-in:focus { outline: none; border-color: #f47e20; }
.spr-qty { flex: 0 0 64px; }
.spr-btn { border: 0; background: #1f2d5a; color: #fff; font-weight: 700; font-size: .72rem; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background .2s; }
.spr-btn:hover { background: #f47e20; }
.sel-w { display: inline-block; width: 70px; height: 1.2em; vertical-align: middle; }
.spr-table td u { color: #3b4cc0; text-underline-offset: 2px; }
.st { display: inline-block; padding: 3px 9px; border-radius: 3px; font-weight: 700; font-size: .66rem; transition: background .3s, color .3s; }
.st-pending { background: #fff1e0; color: #c96a0b; }
.st-review { background: #e6ebff; color: #3b4cc0; }
.st-offer { background: #e3f6ea; color: #1f7a4d; animation: popIn .35s cubic-bezier(.2,.9,.3,1.3); }
.st-review::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.spr-table .addc:disabled { color: #c6cad6; cursor: not-allowed; transform: none; }
.pr.ready { color: #1f7a4d; font-weight: 700; }
.pt-foot { display: flex; justify-content: space-between; align-items: center; color: #6b7080; font-size: .7rem; flex-wrap: wrap; gap: 6px; }
.pager { display: inline-flex; border: 1px solid #dfe2ea; border-radius: 3px; overflow: hidden; }
.pager i { font-style: normal; padding: 3px 9px; } .pager i.on { background: #1e6ff0; color: #fff; }
.spr-tip { margin: 0; color: #6b7080; font-size: .7rem; }
tr.spr-new { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; }
.spr-table td, .spr-table th { white-space: normal; }
.spr-table td:nth-child(5) { min-width: 90px; }
.spr-table .st { white-space: nowrap; }
.spr-table td:nth-child(1), .spr-table td:nth-child(4), .spr-table th:nth-child(4) { white-space: nowrap; }

/* ===== Dedicated sales professional: contact dialog styled after the portal ===== */
.sp-stage { min-height: 300px; padding: 0; background: #f4f5fa; }
.sp-bg { display: flex; justify-content: space-between; align-items: center; padding: 10px; gap: 8px; flex-wrap: wrap; }
.sp-open { border: 0; background: #1f2d5a; color: #fff; font-size: .72rem; font-weight: 700; padding: 6px 12px; border-radius: 4px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sp-open .icon { width: 14px; height: 14px; }
.sp-modal { position: absolute; inset: 8px; background: #fff; border-radius: 6px; box-shadow: 0 16px 40px rgb(20 25 60 / .28); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; animation: spIn .45s cubic-bezier(.2,.9,.3,1.15) both; }
.sp-modal.closing { animation: spOut .25s ease forwards; }
.sp-modal[hidden] { display: none; }
@keyframes spIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.sp-head { display: flex; justify-content: space-between; align-items: center; background: #2c2f4a; color: #fff; padding: 9px 14px; font-weight: 600; font-size: .9rem; }
.sp-x { border: 0; background: none; color: #c9cbe0; font-size: 1.3rem; line-height: 1; cursor: pointer; } .sp-x:hover { color: #fff; }
.sp-body { display: grid; gap: 10px; padding: 12px; align-content: start; justify-items: center; }
.sp-card { width: min(100%, 330px); background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgb(20 30 70 / .1); padding: 10px 14px; animation: rowIn .45s ease both; }
.sp-c1 { display: grid; justify-items: center; gap: 5px; animation-delay: .25s; }
.sp-c1 img { height: 26px; width: auto; }
.sp-c1 hr { width: 100%; border: 0; border-top: 1px solid #e3e6ee; margin: 2px 0; }
.sp-c2 { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; animation-delay: .45s; }
.sp-line { display: inline-flex; align-items: center; gap: 6px; color: #1f4f9a; font-weight: 600; font-size: .74rem; }
.sp-line .icon { width: 13px; height: 13px; color: #1f2d5a; }
.sp-av { position: relative; width: 48px; height: 48px; border-radius: 50%; }
.sp-av svg { width: 100%; height: 100%; border-radius: 50%; display: block; animation: avBob 3s ease-in-out infinite; }
.sp-av::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgb(45 187 93 / .55); animation: ring 1.8s ease-out infinite; }
.sp-dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2dbb5d; border: 2px solid #fff; }
@keyframes ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes avBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.sp-info { display: grid; gap: 3px; border-left: 1px solid #e3e6ee; padding-left: 12px; }
.sp-info b { font-size: .85rem; color: #3a3d4a; } .sp-info small { color: #a0a4b2; font-size: .68rem; }
.sp-info .sp-line { opacity: 0; animation: msgIn .35s ease forwards; } .sp-info .sp-line:nth-of-type(1) { animation-delay: .75s; } .sp-info .sp-line:nth-of-type(2) { animation-delay: .9s; }
.sp-foot { display: flex; justify-content: flex-end; padding: 8px 12px 12px; }
.sp-close { border: 1px solid #2c2f4a; background: #fff; color: #2c2f4a; border-radius: 4px; padding: 5px 22px; cursor: pointer; font-size: .78rem; }
.sp-close:hover { background: #2c2f4a; color: #fff; }
@media (prefers-reduced-motion: reduce) { .sp-modal, .sp-card, .sp-av svg, .sp-av::before, .sp-info .sp-line { animation: none !important; opacity: 1 !important; } }
.sp-stage { min-height: 392px; }

/* ===== Order Status (order tracking) ===== */
.os-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: #f4f5fa; margin: -10px -10px 0; padding: 10px; }
.os-box { width: 16px; height: 16px; border: 2px solid #1f2d5a; border-radius: 3px; }
.os-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.os-tools i { font-style: normal; font-size: .62rem; padding: 4px 7px; border-radius: 3px; }
.os-tools em { font-style: normal; font-size: .62rem; color: #6b7080; }
.os-date { background: #fff; color: #9aa0b0; border: 1px solid #e3e6ee; }
.b-srch { background: #1e6ff0; color: #fff; font-weight: 600; }
.os-tools .b-ex, .os-tools .b-pf { color: #fff; font-weight: 700; }
.os-note { margin: 0; background: #fff7d6; border: 1px solid #f3e19b; color: #a8650b; font-size: .7rem; padding: 6px 10px; border-radius: 3px; width: fit-content; }
.os-table td.wrapc { white-space: normal; min-width: 90px; }
.os-view { border: 0; background: none; cursor: pointer; color: #1f2d5a; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; position: relative; }
.os-view .icon { width: 18px; height: 18px; }
.os-view::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1e6ff0; animation: ring 1.6s ease-out infinite; }
.os-view[aria-expanded="true"] { background: #1f2d5a; color: #fff; } .os-view[aria-expanded="true"]::after { display: none; }
.os-row { cursor: pointer; }
.os-detail td { background: #f7f8fc; padding: 10px 12px; }
.os-detail-in { display: grid; gap: 10px; animation: rowIn .4s ease both; }
.os-track { display: flex; flex-wrap: wrap; gap: 0; }
.os-track li { flex: 1 1 0; min-width: 62px; padding: 22px 4px 0; text-align: center; font-size: .64rem; white-space: normal; }
.os-track li::before { left: 50%; top: 2px; transform: translateX(-50%); }
.os-track li::after { left: calc(50% + 9px); right: calc(-50% + 9px); top: 9px; bottom: auto; width: auto; height: 2px; }
.st-ok { background: #e3f6ea; color: #1f7a4d; }
.st-blue { background: #e6ebff; color: #3b4cc0; }
@media (prefers-reduced-motion: reduce) { .os-view::after, .os-detail-in { animation: none; } }
.os-adv { justify-self: start; border: 0; background: #1f2d5a; color: #fff; font-weight: 600; padding: 7px 14px; border-radius: 4px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; }
.os-adv:hover { background: #f47e20; } .os-adv .icon { width: 14px; height: 14px; }
.os-track li { overflow-wrap: anywhere; }
.os-track li { overflow-wrap: normal; font-size: .6rem; min-width: 0; }

/* ===== Messages (portal chat) ===== */
.ms-card { gap: 8px; }
.ms-head { display: flex; align-items: center; gap: 10px; background: #1f3566; color: #fff; padding: 9px 12px; border-radius: 4px; }
.ms-head b { display: block; font-size: .86rem; } .ms-head small { display: block; font-size: .64rem; color: #c9d3f2; }
.ms-stat { color: #9be3b4 !important; }
.ms-av { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #d4915f; flex: none; }
.ms-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #2dbb5d; border: 2px solid #1f3566; }
.ms-attach { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / .12); display: grid; place-items: center; }
.ms-attach .icon { width: 14px; height: 14px; }
.ms-thread { display: grid; gap: 8px; align-content: start; min-height: 170px; max-height: 210px; overflow-y: auto; padding: 2px 4px; }
.ms-day { display: flex; align-items: center; gap: 8px; color: #8a8fa0; font-size: .64rem; } .ms-day::after { content: ""; flex: 1; height: 1px; background: #e3e6ee; }
.ms-msg { display: grid; gap: 3px; max-width: 78%; animation: msgIn .4s ease both; animation-delay: var(--d, 0s); }
.ms-msg small { color: #8a8fa0; font-size: .62rem; }
.ms-msg p { margin: 0; padding: 8px 11px; border-radius: 8px; font-size: .74rem; line-height: 1.45; }
.ms-them p { background: #eef0f6; color: #2b2f3a; }
.ms-me { justify-self: end; text-align: right; } .ms-me p { background: #1f3566; color: #fff; text-align: left; }
.ms-typing { display: inline-flex; gap: 4px; padding: 8px 11px; background: #eef0f6; border-radius: 8px; width: fit-content; animation: msgIn .3s ease both; animation-delay: var(--d, 0s); }
.ms-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8a8fa0; animation: typeDot 1s infinite; } .ms-typing i:nth-child(2) { animation-delay: .15s; } .ms-typing i:nth-child(3) { animation-delay: .3s; }
.ms-form { display: flex; gap: 8px; align-items: center; }
.ms-form input { flex: 1; min-width: 0; border: 1.5px solid #f0c18f; border-radius: 4px; padding: 7px 10px; font-size: .74rem; }
.ms-form input:focus { outline: none; border-color: #f47e20; }
.ms-form button { border: 0; background: none; color: #1f6fd0; cursor: pointer; display: grid; padding: 4px; transition: transform .2s; }
.ms-form button .icon { width: 22px; height: 22px; } .ms-form button:hover { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ms-msg, .ms-typing, .ms-typing i { animation: none !important; } }
/* shared PDF bubble with upload animation */
.ms-file { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; background: #1f3566; color: #fff; padding: 9px 11px; border-radius: 8px; text-align: left; min-width: 220px; }
.ms-pdf { flex: none; width: 34px; height: 40px; border-radius: 4px; background: #fff; color: #e5243b; font: 800 .6rem/1 var(--f-body); display: grid; place-items: end center; padding-bottom: 6px; position: relative;
  clip-path: polygon(0 0, 72% 0, 100% 24%, 100% 100%, 0 100%); }
.ms-pdf::before { content: ""; position: absolute; top: 0; right: 0; width: 28%; height: 24%; background: #c9d1ea; }
.ms-pdf::after { content: ""; position: absolute; left: 6px; right: 6px; top: 12px; height: 2px; background: #e5243b; box-shadow: 0 5px 0 #d6dae6, 0 10px 0 #d6dae6; }
.ms-fname { display: grid; gap: 2px; min-width: 0; } .ms-fname b { font-size: .74rem; } .ms-fname small { color: #c9d3f2; font-size: .62rem; }
.ms-dl { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #2dbb5d; display: grid; place-items: center; opacity: 0; transform: scale(.4); animation: popIn .35s cubic-bezier(.2,.9,.3,1.4) forwards; animation-delay: calc(var(--d, 0s) + 1s); }
.ms-dl .icon { width: 13px; height: 13px; color: #fff; stroke-width: 3; }
.ms-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: #f47e20; width: 0; animation: upBar .9s ease-out forwards; animation-delay: calc(var(--d, 0s) + .1s); }
.ms-file-msg .ms-dl, .ms-file-msg .ms-bar { --d: 1s; }
@keyframes upBar { 0% { width: 0; opacity: 1; } 90% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-dl { opacity: 1; transform: none; animation: none; } .ms-bar { display: none; } }
.ms-thread { max-height: 250px; min-height: 250px; scroll-behavior: smooth; }
.sp-modal { grid-template-rows: auto 1fr; } .sp-stage { min-height: 330px; } .sp-body { align-content: center; padding-block: 16px; }
/* Order Status: fit in one frame, no sideways scroll */
.os-table { table-layout: fixed; width: 100%; white-space: normal; }
.os-table th, .os-table td { white-space: normal; overflow-wrap: anywhere; padding: 7px 5px; vertical-align: middle; }
.os-table td.wrapc { min-width: 0; }
.os-date-s { display: block; color: #8a8fa0; font-size: .62rem; margin-top: 2px; }
.os-table .st { white-space: normal; line-height: 1.25; text-align: center; }
.scr[data-s="5"] .pt-tablewrap { overflow: visible; }
.os-tools { gap: 3px; } .os-tools i { padding: 4px 5px; }
@media (max-width: 560px) { .pt-body { grid-template-columns: 1fr; } .pt-side { display: none; } }
@media (max-width: 560px) {
  .os-table col:nth-child(2), .os-table th:nth-child(2), .os-table td:nth-child(2) { display: none; }
  .os-table th, .os-table td { font-size: .64rem; overflow-wrap: normal; word-break: normal; }
  .os-table .st { font-size: .6rem; padding: 3px 5px; }
  .os-track { display: grid; gap: 0; }
  .os-track li { text-align: left; padding: 6px 0 10px 30px; font-size: .7rem; }
  .os-track li::before { left: 8px; top: 7px; transform: none; }
  .os-track li::after { left: 14px; right: auto; top: 21px; bottom: -7px; width: 2px; height: auto; }
}
@media (max-width: 560px) { .os-table { table-layout: auto; } .os-table colgroup { display: none; } .os-table .st { white-space: normal; } }

/* ===== Makes We Serve — simple, classic, filterable ===== */
.mk2 { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk2-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.mk2-filter button { display: inline-flex; align-items: center; gap: 8px; padding: .6em 1.2em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .2s; }
.mk2-filter button .icon { width: 18px; height: 18px; color: var(--primary); }
.mk2-filter button:hover { border-color: var(--primary); }
.mk2-filter button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.mk2-filter button[aria-pressed="true"] .icon { color: #fff; }
.mk2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mk2-tile { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 24px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s, opacity .3s; }
.mk2-tile b { font-family: var(--f-display); font-size: 1.3rem; color: var(--primary); }
.mk2-tile span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mk2-tile em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s, opacity .25s, margin .25s; }
.mk2-tile em .icon { width: 14px; height: 14px; }
.mk2-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .3s; }
.mk2-tile:hover, .mk2-tile:focus-visible { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow); }
.mk2-tile:hover::before, .mk2-tile:focus-visible::before { transform: scaleX(1); }
.mk2-tile:hover em, .mk2-tile:focus-visible em { max-height: 24px; opacity: 1; margin-top: 6px; }
.mk2-tile.dim { opacity: .25; transform: scale(.97); pointer-events: none; }
@media (max-width: 900px) { .mk2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mk2-grid { grid-template-columns: repeat(2, 1fr); } .mk2-tile b { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .mk2-tile, .mk2-tile::before, .mk2-tile em { transition: none; } }
.mk2-tile em { max-height: none; margin-top: 6px; } .mk2-tile { align-content: center; }

/* Makes We Serve as a slider: one row, arrows, swipe */
.mk2-slider { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mk2-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 2px 14px; scrollbar-width: none; }
.mk2-grid::-webkit-scrollbar { display: none; }
.mk2-tile { flex: 0 0 calc((100% - 3 * 14px) / 4); scroll-snap-align: start; min-height: 150px; }
.mk2-tile.dim { display: none; }
.mk2-nav { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--primary); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.mk2-nav:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
.mk2-nav:disabled { opacity: .35; cursor: default; }
.mk2-nav .icon { width: 20px; height: 20px; }
@media (max-width: 900px) { .mk2-tile { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 600px) { .mk2-tile { flex-basis: calc((100% - 14px) / 2); } .mk2-slider { grid-template-columns: minmax(0, 1fr); } .mk2-nav { display: none; } }

/* ===== Makes We Serve — coloured, icon-led tiles ===== */
.mk2 { --agri: #ff8b00; --agri-bg: #fff4e6; --bhl: #e0a800; --bhl-bg: #fff9db; --dsl: #1a8fd6; --dsl-bg: #e7f4fd;
  background: linear-gradient(180deg, #fff 0%, #f6f7fc 100%); }
.mk2-grid { padding: 14px 4px 22px; }
.mk2-tile { --c: var(--agri); --bg: var(--agri-bg); gap: 10px; padding: 26px 16px 22px; border: 1px solid var(--line); border-radius: 14px; min-height: 0; align-content: start;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 55%); }
.t-bhl { --c: var(--bhl); --bg: var(--bhl-bg); }
.t-dsl { --c: var(--dsl); --bg: var(--dsl-bg); }
.mk2-tile::before { height: 4px; background: var(--c); transform: scaleX(1); opacity: .85; }
.mk2-icons { display: flex; gap: 8px; justify-content: center; }
.mk2-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid currentColor; box-shadow: 0 4px 12px rgb(29 37 80 / .08); transition: transform .35s cubic-bezier(.2,.9,.3,1.4), background .25s, color .25s; }
.mk2-ic .icon { width: 28px; height: 28px; stroke-width: 1.8; }
.ic-agri { color: var(--agri); } .ic-bhl { color: var(--bhl); } .ic-dsl { color: var(--dsl); }
.mk2-icons .mk2-ic + .mk2-ic { margin-left: -14px; }
.mk2-tile b { font-size: 1.35rem; color: var(--ink); }
.mk2-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; letter-spacing: 0; text-transform: none; }
.mk2-tags i { font-style: normal; font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; }
.tg-agri { background: var(--agri-bg); color: #b35f00; } .tg-bhl { background: var(--bhl-bg); color: #8a6700; } .tg-dsl { background: var(--dsl-bg); color: #0f6aa3; }
.mk2-tile em { color: var(--c); filter: brightness(.85); margin-top: 2px; }
.mk2-tile:hover, .mk2-tile:focus-visible { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.mk2-tile:hover .mk2-ic, .mk2-tile:focus-visible .mk2-ic { background: currentColor; transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.mk2-tile:hover .mk2-ic .icon, .mk2-tile:focus-visible .mk2-ic .icon { color: #fff; }
.mk2-tile:hover .mk2-ic + .mk2-ic { transition-delay: .06s; transform: translateY(-4px) rotate(6deg) scale(1.06); }
.mk2-tile:hover b { color: var(--primary); }
.mk2-nav { box-shadow: 0 4px 12px rgb(29 37 80 / .08); }
.mk2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.mk2-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: #d3d7e5; cursor: pointer; transition: all .25s; }
.mk2-dots button[aria-current="true"] { width: 26px; border-radius: 5px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { .mk2-ic { transition: none; } }
.mk2-tile .mk2-ic.ic-agri { color: var(--agri); } .mk2-tile .mk2-ic.ic-bhl { color: var(--bhl); } .mk2-tile .mk2-ic.ic-dsl { color: var(--dsl); }
.mk2-tile span.mk2-icons, .mk2-tile span.mk2-tags { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: inherit; }
.mk2-tile:hover .mk2-ic, .mk2-tile:focus-visible .mk2-ic { background: currentColor; }
.mk2-tile:hover .mk2-ic .icon, .mk2-tile:focus-visible .mk2-ic .icon { color: #fff; }
.mk2-tags i { text-transform: uppercase; letter-spacing: .06em; }

/* ===== Makes We Serve — dark band, compact outlined tiles, subtle colours ===== */
.mk3 { --agri: #f08a3c; --bhl: #d9b04a; --dsl: #5aa9d6;
  background: #0d1234; color: #fff; padding-block: clamp(48px, 6vw, 72px); overflow: hidden; }
.mk3-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 30px; }
.mk3-head .eq-eyebrow { color: #f08a3c; font-size: .74rem; }
.mk3-head h2 { font-family: var(--f-body); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); color: #fff; letter-spacing: -.01em; }
.mk3-head p { color: #aeb5d6; font-size: 1rem; max-width: 54ch; }
.mk3-rail { overflow: hidden; padding-block: 6px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mk3-track { display: flex; gap: 16px; width: max-content; animation: mkSlide 50s linear infinite; padding-inline: 8px; }
.mk3-rail:hover .mk3-track, .mk3-rail:focus-within .mk3-track { animation-play-state: paused; }
.mk3-tile { --c: var(--agri); flex: none; width: 196px; padding: 16px 12px 14px; border-radius: 8px; text-align: center; text-decoration: none;
  display: grid; justify-items: center; gap: 6px; background: #151b45; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.k-bhl { --c: var(--bhl); } .k-dsl { --c: var(--dsl); }
.mk3-ic { display: flex; gap: 8px; height: 24px; align-items: center; }
.mk3-ic span { display: grid; } .mk3-ic .icon { width: 22px; height: 22px; stroke-width: 1.7; }
.mk3-ic .ic-agri { color: var(--agri); } .mk3-ic .ic-bhl { color: var(--bhl); } .mk3-ic .ic-dsl { color: var(--dsl); }
.mk3-tile b { font-family: var(--f-body); font-weight: 700; font-size: 1.08rem; color: #fff; white-space: nowrap; }
.mk3-tile small { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d94b8; white-space: nowrap; }
.mk3-tile:hover, .mk3-tile:focus-visible { transform: translateY(-4px); background: #1b2257; border-color: var(--c); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.mk3-tile:hover .mk3-ic span { animation: icHop .45s ease; }
@keyframes icHop { 40% { transform: translateY(-3px); } }
.mk3-note { margin: 26px 0 0; text-align: center; color: #8d94b8; font-size: .84rem; }
.mk3-note a { color: #f08a3c; font-weight: 700; text-decoration: none; margin-left: 8px; white-space: nowrap; }
.mk3-note a:hover { text-decoration: underline; }
@media (max-width: 560px) { .mk3-tile { width: 168px; } }
@media (prefers-reduced-motion: reduce) {
  .mk3-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: var(--gutter); }
  .mk3-track > [aria-hidden="true"] { display: none; }
}
.mk3-tile { width: auto; min-width: 184px; padding-inline: 20px; } @media (max-width: 560px) { .mk3-tile { width: auto; min-width: 160px; } }
.mk3-ic { height: 34px; gap: 10px; } .mk3-ic .icon { width: 36px; height: 36px; stroke-width: 1.25; }

/* Makes We Serve — white background version */
.mk3 { --agri: #e8751a; --bhl: #c99a1e; --dsl: #2b8fcf; background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk3-head .eq-eyebrow { color: #e8751a; }
.mk3-head h2 { color: #0f1638; }
.mk3-head p { color: var(--muted); }
.mk3-tile { background: #fff; border: 1px solid color-mix(in srgb, var(--c) 40%, #e3e6ee); box-shadow: 0 2px 6px rgb(29 37 80 / .04); }
.mk3-tile b { color: #1d2550; }
.mk3-tile small { color: #7a7f8f; }
.mk3-tile:hover, .mk3-tile:focus-visible { background: color-mix(in srgb, var(--c) 7%, #fff); border-color: var(--c); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.mk3-tile:hover b { color: var(--primary); }
.mk3-note { color: var(--muted); }
.mk3-note a { color: #e8751a; }
.mk3 { background: #f1f3f7; }
/* Contact Us areas on light grey */
.contact-band, main[data-page="contact"] > .section { background: #f1f3f7; }
main[data-page="contact"] .form-card, main[data-page="contact"] .ccard { background: #fff; }

/* Footer B2B button: clear text + better hover */
.site-footer .foot-grid a.btn-orange { color: #fff; opacity: 1; position: relative; overflow: hidden; border: 1.5px solid var(--accent); box-shadow: 0 6px 16px -6px rgb(255 139 0 / .6); transition: background .25s, color .25s, transform .2s, box-shadow .25s; }
.site-footer .foot-grid a.btn-orange::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.site-footer .foot-grid a.btn-orange:hover, .site-footer .foot-grid a.btn-orange:focus-visible { background: #fff; color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgb(255 139 0 / .75); }
.site-footer .foot-grid a.btn-orange:hover::after { left: 130%; }
.site-footer .foot-grid a.btn-orange .icon { transition: transform .25s; }
.site-footer .foot-grid a.btn-orange:hover .icon { transform: translateX(-2px) scale(1.12); }

/* About page additions */
.ab-chips, .ab-cats { display: grid; gap: 8px; }
.ab-chips small, .ab-cats small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ab-chips > div, .ab-cats > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-cats span { font-size: .82rem; font-weight: 600; padding: .35em .85em; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: #b35f00; border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); }
.ab-pride { margin-top: 28px; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 12px; background: var(--primary); color: #fff; }
.ab-pride .icon { width: 34px; height: 34px; flex: none; color: #ffb257; }
.ab-pride p { color: #e6eaff; font-size: 1.02rem; line-height: 1.7; margin: 0; }

/* ===== Global presence: revolving globe ===== */
.gp-band { background: #f1f3f7; }
.gp-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 30px; }
.gp-head h2 { color: var(--ink); }
.gp-head .lead strong { color: var(--ink); }
.gp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.gp-globe-wrap { display: grid; justify-items: center; gap: 8px; }
.gp-globe { width: min(100%, 520px); aspect-ratio: 1; cursor: grab; touch-action: none; }
.gp-globe:active { cursor: grabbing; }
.gp-globe svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g-grat { fill: none; stroke: #253993; stroke-opacity: .12; stroke-width: .6; }
.g-rim { fill: none; stroke: #253993; stroke-opacity: .35; stroke-width: 1.2; }
.g-c { fill: #2d3f95; stroke: #fff; stroke-width: .35; stroke-opacity: .6; transition: fill .4s; }
.g-c.partner, .g-c.hq { fill: #ff8b00; cursor: pointer; }
.g-c.partner:hover, .g-c.hq:hover { fill: #ffa53a; }
.g-c.active { fill: #ffb24d; animation: gGlow 1.6s ease-in-out infinite; }
@keyframes gGlow { 50% { fill: #ff8b00; } }
.g-arc { fill: none; stroke: #ff8b00; stroke-width: 1.4; stroke-opacity: .35; stroke-dasharray: 3 4; }
.g-arc.active { stroke-opacity: 1; stroke-width: 2.2; stroke-dasharray: 6 5; animation: arcFlow 1s linear infinite; }
@keyframes arcFlow { to { stroke-dashoffset: -22; } }
.g-dot .core { fill: #ff8b00; stroke: #fff; stroke-width: 1.5; }
.g-dot.hq .core { fill: #253993; stroke: #fff; stroke-width: 2; }
.g-dot .pulse { fill: none; stroke: #ff8b00; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.g-dot.hq .pulse { stroke: #253993; }
.g-dot.active .pulse, .g-dot.hq .pulse { animation: gPulse 1.8s ease-out infinite; }
@keyframes gPulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3); } }
.gp-cap { margin: 0; font-size: .95rem; color: var(--muted); min-height: 1.5em; }
.gp-cap b { color: var(--primary); }
.gp-tip { margin: 0; font-size: .78rem; color: #9aa0b0; }
.gp-side { display: grid; gap: 18px; }
.gp-side h3 { font-family: var(--f-display); font-size: 1.4rem; color: var(--ink); }
.gp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gp-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: all .25s; color: var(--ink); }
.gp-list button:hover { border-color: #ff8b00; }
.gp-list .gl-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff8b00; flex: none; box-shadow: 0 0 0 3px rgb(255 139 0 / .18); }
.gp-list .hq .gl-dot { background: var(--primary); box-shadow: 0 0 0 3px rgb(37 57 147 / .18); }
.gl-name { display: grid; min-width: 0; } .gl-name b { font-size: .92rem; } .gl-name small { color: var(--muted); font-size: .72rem; }
.gp-list em { margin-left: auto; font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .1em; color: #fff; background: var(--primary); padding: 2px 7px; border-radius: 4px; }
.gp-list button.on { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateX(4px); box-shadow: 0 10px 22px -12px rgb(37 57 147 / .7); }
.gp-list button.on small { color: #cdd4f2; }
.gp-list button.on .gl-dot { background: #ff8b00; animation: dotPing 1.4s ease-out infinite; }
.gp-list button.on em { background: #ff8b00; }
@keyframes dotPing { 0% { box-shadow: 0 0 0 0 rgb(255 139 0 / .7); } 100% { box-shadow: 0 0 0 9px rgb(255 139 0 / 0); } }
.gp-side .globe-stats { grid-template-columns: 1fr 1fr; }
.gp-side .gstat { background: #fff; border: 1px solid var(--line); }
.gp-side .gstat b { color: #ff8b00; } .gp-side .gstat span { color: var(--muted); }
.gp-more { margin: 30px auto 0; max-width: 820px; text-align: center; color: var(--muted); }
.gp-globe.nomap .g-ocean { fill: #e7ebf6; }
@media (max-width: 900px) { .gp-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .gp-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .g-c.active, .g-arc.active, .g-dot .pulse, .gp-list button.on .gl-dot { animation: none !important; } }

/* ===== Global presence v2: map boundaries + pinned supply countries ===== */
.gp-stage { display: grid; justify-items: center; gap: 22px; }
.gp-globe { width: min(100%, 620px); }
.gp-globe.grab { cursor: grabbing; }
.g-c { fill: #c9d0e6; stroke: #fff; stroke-width: .5; stroke-opacity: 1; }
.g-c.partner { fill: #ff8b00; stroke: #fff; stroke-width: .7; cursor: default; }
.g-c.hq { fill: #253993; stroke: #fff; stroke-width: .7; cursor: default; }
.g-c.partner:hover { fill: #ffa53a; } .g-c.hq:hover { fill: #2f48b5; }
.g-arc { stroke: #ff8b00; stroke-opacity: .55; stroke-width: 1.3; stroke-dasharray: 5 5; animation: arcFlow 1.2s linear infinite; }
.g-pin .core { fill: #ff8b00; stroke: #fff; stroke-width: 2; }
.g-pin.hq .core { fill: #253993; }
.g-pin .pulse { fill: none; stroke: #ff8b00; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: gPulse 2s ease-out infinite; }
.g-pin.hq .pulse { stroke: #253993; }
.g-pin .tag rect { fill: #fff; stroke: #ff8b00; stroke-width: 1.2; filter: drop-shadow(0 3px 5px rgb(11 16 51 / .18)); }
.g-pin.hq .tag rect { fill: #253993; stroke: #253993; }
.g-pin .tag text { font: 700 12px "Work Sans", system-ui, sans-serif; fill: #1b2350; }
.g-pin.hq .tag text { fill: #fff; }
.g-pin { pointer-events: none; }
.gp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: .88rem; color: var(--muted); }
.gp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gp-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.gp-legend .lg-hq { background: #253993; } .gp-legend .lg-sup { background: #ff8b00; }
.gp-legend .gp-tip { color: #9aa0b0; font-size: .8rem; }
.gp-stats { width: min(100%, 520px); }
.gp-stats .gstat { background: #fff; border: 1px solid var(--line); text-align: center; }
.gp-stats .gstat b { color: #ff8b00; } .gp-stats .gstat span { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .g-arc, .g-pin .pulse { animation: none !important; } }

/* Global presence: selected supply country turns blue */
.g-c.partner { cursor: pointer; }
.g-c.partner.sel, .g-c.partner.sel:hover { fill: #253993; }
.g-arc.sel { stroke: #253993; stroke-opacity: 1; stroke-width: 2.6; stroke-dasharray: 7 5; }
.has-sel .g-arc:not(.sel) { stroke-opacity: .25; }
.g-pin:not(.hq) { pointer-events: auto; cursor: pointer; }
.g-pin.sel .core { fill: #253993; }
.g-pin.sel .pulse { stroke: #253993; }
.g-pin.sel .tag rect { fill: #253993; stroke: #253993; }
.g-pin.sel .tag text { fill: #fff; }

/* ===== Quality & Safety page v2 ===== */
.q-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.q-hero-text { display: grid; gap: 18px; justify-items: start; }
.q-glance { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .18); border-radius: 16px; backdrop-filter: blur(4px); }
.q-glance li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; transition: background .25s; }
.q-glance li:hover { background: rgb(255 255 255 / .08); }
.q-glance .icon { width: 42px; height: 42px; padding: 10px; border-radius: 10px; background: #ff8b00; color: #fff; flex: none; }
.q-glance b { display: block; color: #fff; font-size: 1.02rem; }
.q-glance small { color: rgb(255 255 255 / .72); font-size: .86rem; }
@media (max-width: 880px) { .q-hero { grid-template-columns: 1fr; } }

.step-panel .step-title { color: #fff; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.step-panel li { color: #fff; background: rgb(255 255 255 / .12); }
.step-panel .step-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.step-panel .btn-steel { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .4); }
.step-panel .btn-steel:hover { background: rgb(255 255 255 / .1); }
.step-panel .step-progress { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .15); overflow: hidden; }
.step-panel .step-progress i { display: block; height: 100%; background: #ff8b00; transition: width .4s; }

.check { align-content: start; transition: transform .25s, box-shadow .25s, border-color .25s; }
.check:hover { transform: translateY(-3px); border-color: #ff8b00; box-shadow: 0 14px 28px -18px rgb(37 57 147 / .45); }
.check .icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: #eef1fb; color: var(--primary); }
.check b { color: var(--ink); }
.check small { color: var(--muted); line-height: 1.5; }
.pillar .instruments { margin-top: 4px; }
.pillar .instrument { font-family: inherit; font-size: .8rem; border: 0; background: #f1f3f7; color: #4a5068; border-radius: 999px; padding: .38em .85em; }

.band-steel .pack-panel { color: var(--ink); align-items: center; }
.pack-text { display: grid; gap: 14px; align-content: start; }
.pack-text h3 { color: var(--ink) !important; font-size: 1.4rem; }
.band-steel .pack-panel p { color: var(--muted); }
.pack .chips { margin-bottom: 16px; }
.band-steel .pack .chip { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.band-steel .pack .chip:hover { border-color: #ff8b00; }
.band-steel .pack .chip[aria-pressed="true"] { background: #ff8b00; border-color: #ff8b00; color: #fff; }
.pack-visual svg { animation: packIn .45s ease both; }
@keyframes packIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.q-close { margin: 26px 0 0; color: rgb(255 255 255 / .85); font-family: var(--f-display); font-size: 1.15rem; font-style: italic; text-align: center; }
@media (prefers-reduced-motion: reduce) { .pack-visual svg { animation: none; } }
@media (max-width: 720px) { .pack-visual { min-height: 150px; padding: 14px; } .pack-visual svg { width: 170px; } .q-glance li { padding: 10px 8px; } }
.gp-globe { width: min(100%, 460px); }

/* ===== Looking Ahead: interactive roadmap ===== */
.la-road { position: relative; margin-top: 8px; }
.la-track { position: absolute; left: 16.66%; right: 16.66%; top: 52px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #d5dbef 0 8px, transparent 8px 14px); z-index: 0; }
.la-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #253993, #ff8b00); transition: width .9s cubic-bezier(.6,.05,.25,1); }
.la-road.in .la-fill { width: var(--la-w, 100%); }
.la-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.la-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px 30px; display: grid; gap: 10px; align-content: start; justify-items: start; cursor: default; outline: none;
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .35s; }
.la-road.in .la-card { opacity: 1; transform: none; }
.la-road.in .la-card[data-i="1"] { transition-delay: .12s, .12s, 0s, 0s, 0s; }
.la-road.in .la-card[data-i="2"] { transition-delay: .24s, .24s, 0s, 0s, 0s; }
.la-node { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #d5dbef; color: var(--primary); margin-bottom: 8px; transition: background .35s, border-color .35s, color .35s, transform .35s; }
.la-num { position: absolute; top: -6px; right: -10px; font: 700 .68rem var(--f-mono, monospace); background: #ff8b00; color: #fff; border-radius: 999px; padding: 2px 7px; box-shadow: 0 0 0 3px #fff; }
.la-ico { width: 32px; height: 32px; overflow: visible; }
.la-card .tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ff8b00; font-weight: 700; }
.la-card h3 { color: var(--ink); font-size: 1.15rem; transition: color .3s; }
.la-card p { color: var(--muted); transition: color .3s; }
.la-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #ff8b00, #ffb24d); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }

/* active state (hover, focus or tap) */
.la-card.on { transform: translateY(-8px); border-color: transparent; background: linear-gradient(155deg, #253993, #1b2a75); box-shadow: 0 26px 46px -24px rgb(37 57 147 / .75); }
.la-card.on h3 { color: #fff; } .la-card.on p { color: rgb(255 255 255 / .82); } .la-card.on .tag { color: #ffb257; }
.la-card.on .la-node { background: #ff8b00; border-color: #ff8b00; color: #fff; transform: scale(1.08) rotate(-4deg); }
.la-card.on .la-num { background: #fff; color: #253993; box-shadow: 0 0 0 3px #ff8b00; }
.la-card.on .la-bar { transform: scaleX(1); }
.la-grid.has-on .la-card:not(.on) { opacity: .62; }

/* icon animations, only while active */
.la-target .arrow { transform-box: view-box; transform: translate(10px, -10px); opacity: .0; transition: none; }
.la-card .la-target .arrow { opacity: 1; transform: none; }
.la-card.on .la-target .arrow { animation: laShoot .9s cubic-bezier(.3,1.4,.5,1) both; }
.la-card.on .la-target .r1, .la-card.on .la-target .r2 { transform-box: fill-box; transform-origin: center; animation: laRing 1.4s ease-out .5s infinite; }
.la-card.on .la-target .r2 { animation-delay: .7s; }
@keyframes laShoot { 0% { transform: translate(16px, -16px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes laRing { 0% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } 100% { stroke-opacity: 1; } }
.la-globe .m1, .la-globe .m2 { transform-box: fill-box; transform-origin: center; }
.la-card.on .la-globe .m1 { animation: laSpin 1.6s linear infinite; }
.la-card.on .la-globe .m2 { animation: laSpin 1.6s linear -.8s infinite; }
@keyframes laSpin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.05); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
.la-star .st { transform-box: fill-box; transform-origin: center; }
.la-star .sp { opacity: 0; transform-box: fill-box; transform-origin: center; }
.la-card.on .la-star .st { animation: laStar .9s cubic-bezier(.3,1.5,.5,1) both; fill: currentColor; fill-opacity: .25; }
.la-card.on .la-star .sp { animation: laSpark 1.3s ease-in-out infinite; }
.la-card.on .la-star .s2 { animation-delay: .35s; } .la-card.on .la-star .s3 { animation-delay: .7s; }
@keyframes laStar { 0% { transform: rotate(-72deg) scale(.6); } 100% { transform: rotate(0) scale(1); } }
@keyframes laSpark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } }

@media (max-width: 880px) {
  .la-grid { grid-template-columns: 1fr; gap: 16px; }
  .la-track { left: 55px; right: auto; top: 40px; bottom: 40px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, #d5dbef 0 8px, transparent 8px 14px); }
  .la-fill { width: 100% !important; height: 0; right: 0; bottom: auto; transition: height .9s cubic-bezier(.6,.05,.25,1); background: linear-gradient(180deg, #253993, #ff8b00); }
  .la-road.in .la-fill { height: var(--la-h, 100%); }
  .la-card { grid-template-columns: 60px 1fr; column-gap: 18px; padding: 20px; }
  .la-card .la-node { grid-row: 1 / span 3; margin: 0; }
  .la-card.on { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .la-card, .la-fill { transition: none !important; } .la-card { opacity: 1; transform: none; }
  .la-card.on * { animation: none !important; }
}

/* Looking Ahead v2: nodes sit on a roadmap line above the cards */
.la-road { padding-top: 92px; }
.la-track { top: 30px; left: calc((100% - 44px) / 6); right: calc((100% - 44px) / 6); }
.la-card { overflow: visible; justify-items: center; text-align: center; padding: 30px 26px 32px; }
.la-node { position: absolute; top: -92px; left: 50%; margin: 0; transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 6px #fff; }
.la-node::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 30px; background: #d5dbef; transform: translateX(-50%); transition: background .35s; }
.la-card.on .la-node { transform: translateX(-50%) scale(1.1); }
.la-card.on .la-node::after { background: #ff8b00; }
.la-bar { border-radius: 0 0 16px 16px; }
.la-card::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); transition: background .35s; }
.la-card.on::before { background: #253993; border-color: #253993; }
@media (max-width: 880px) {
  .la-road { padding-top: 0; padding-left: 78px; }
  .la-track { left: 29px; right: auto; top: 30px; bottom: 30px; width: 3px; }
  .la-card { display: grid; grid-template-columns: 1fr; justify-items: start; text-align: left; padding: 20px; }
  .la-card .la-node { position: absolute; top: 14px; left: -78px; transform: none; grid-row: auto; }
  .la-card.on .la-node { transform: scale(1.08); }
  .la-node::after { left: 100%; top: 50%; width: 18px; height: 2px; transform: translateY(-50%); }
  .la-card::before { top: 34px; left: -7px; transform: rotate(-45deg); }
  .la-card.on { transform: translateX(4px); }
}
.la-grid.has-on .la-card:not(.on) { opacity: 1; }
.la-grid.has-on .la-card:not(.on) > :not(.la-node) { opacity: .5; transition: opacity .3s; }
.la-card > * { transition: opacity .3s; }
.la-track { transition: none; }

/* ===== Quality: illustrated final-inspection cards ===== */
.qc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.qc-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; outline: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.qc-card.on, .qc-card:focus-visible { transform: translateY(-6px); border-color: #ff8b00; box-shadow: 0 24px 40px -24px rgb(37 57 147 / .55); }
.qc-fig { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.qc-art { display: block; width: 100%; height: 100%; }
.qc-fig figcaption { position: absolute; left: 10px; bottom: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgb(11 16 51 / .55); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: .3s; }
.qc-card.on figcaption { opacity: 1; transform: none; }
.qc-num { position: absolute; top: 10px; right: 10px; font: 700 .7rem var(--f-mono, monospace); color: #fff; background: #ff8b00; border-radius: 999px; padding: 3px 8px; }
.qc-body { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.qc-body h3 { font-size: 1.08rem; color: var(--ink); }
.qc-body p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.qc-std { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qc-std li { font-size: .72rem; font-weight: 600; color: var(--primary); background: #eef1fb; border-radius: 6px; padding: .3em .6em; }

/* scene animations: idle state, then play while the card is active */
.qc-tag { opacity: 0; transition: opacity .3s .6s; }
.qc-card.on .qc-tag { opacity: 1; }
.qa-slide { transform: translateX(34px); transition: transform .9s cubic-bezier(.5,0,.2,1); }
.qc-card.on .qa-slide { transform: none; }
.qa-read, .qb-read { transition: opacity .2s; }
.qc-card:not(.on) .qa-read, .qc-card:not(.on) .qb-read { opacity: .25; }
.qb-ind { transform: translateY(-12px); }
.qc-card.on .qb-ind { animation: qbPress 1.8s ease-in-out both; }
@keyframes qbPress { 0% { transform: translateY(-12px); } 40%, 70% { transform: translateY(12px); } 100% { transform: translateY(-12px); } }
.qc-card.on .qb-dent { opacity: 1; transition: opacity .2s .75s; }
.qc-trace { stroke-dasharray: 260; stroke-dashoffset: 260; }
.qc-card.on .qc-trace { animation: qcTrace 1.6s linear forwards; }
@keyframes qcTrace { to { stroke-dashoffset: 0; } }
.qc-probe { transform: translateX(60px); }
.qc-card.on .qc-probe { animation: qcProbe 1.6s linear forwards; }
@keyframes qcProbe { from { transform: translateX(60px); } to { transform: translateX(-40px); } }
.qd-needle { transform-origin: 224px 70px; transform: rotate(-115deg); transition: transform 1.4s cubic-bezier(.3,1.25,.5,1); }
.qc-card.on .qd-needle { transform: rotate(58deg); }
.qd-rotor { transform-origin: 105px 126px; }
.qc-card.on .qd-rotor { animation: qdSpin .6s linear infinite; }
@keyframes qdSpin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) { .qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qc-card * { animation: none !important; transition: none !important; } }
.qc-fig figcaption { top: 10px; bottom: auto; transform: translateY(-6px); }
.qc-card.on figcaption { transform: none; }
.qc-fig figcaption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 1; }
.qc-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1d2b78; }
.qc-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(255 139 0 / .92); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .5); transition: opacity .3s, transform .3s; pointer-events: none; }
.qc-play svg { width: 20px; height: 20px; margin-left: 3px; }
.qc-card.on .qc-play { opacity: 0; transform: scale(.7); }
.qc-play { left: auto; top: auto; right: 10px; bottom: 10px; margin: 0; width: 36px; height: 36px; }
.qc-play svg { width: 16px; height: 16px; }

/* ===== Quality: gauge-room photo with hotspots ===== */
.hg { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 44px); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(14px, 2vw, 20px); }
.hg-fig { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1200 / 783; background: #e9ecf3; }
.hg-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), transform-origin 0s; }
.hg-fig.zoom img { transform: scale(1.18); }
.hg-fig figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .78rem; font-weight: 600; color: #fff; background: rgb(11 16 51 / .6); backdrop-filter: blur(4px); padding: 4px 11px; border-radius: 999px; }
.hg-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #ff8b00; box-shadow: 0 0 0 4px rgb(255 255 255 / .85), 0 4px 12px rgb(0 0 0 / .35); z-index: 2; }
.hg-pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff8b00; animation: hgPing 1.8s ease-out infinite; }
.hg-pin span { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); white-space: nowrap; font-size: .76rem; font-weight: 700; color: #fff; background: #253993; padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .5); }
.hg-pin span::after { content: ""; position: absolute; left: 50%; top: 100%; border: 6px solid transparent; border-top-color: #253993; transform: translateX(-50%); }
.hg-pin:hover span, .hg-pin.on span, .hg-pin:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.hg-pin.on { background: #253993; }
.hg-pin.on::after { border-color: #253993; }
@keyframes hgPing { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.hg-text { display: grid; gap: 12px; align-content: center; padding-right: 8px; }
.hg-text h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--ink); }
.hg-text p { color: var(--muted); }
.hg-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.hg-list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); transition: border-color .25s, background .25s, transform .25s; cursor: default; }
.hg-list li .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #eef1fb; color: var(--primary); flex: none; transition: .25s; }
.hg-list b { display: block; color: var(--ink); font-size: .95rem; }
.hg-list small { color: var(--muted); font-size: .82rem; }
.hg-list li.on, .hg-list li:hover { border-color: #ff8b00; background: #fff8ef; transform: translateX(4px); }
.hg-list li.on .icon, .hg-list li:hover .icon { background: #ff8b00; color: #fff; }
.hg-hint { font-size: .8rem; color: #9aa0b0 !important; }
@media (max-width: 880px) { .hg { grid-template-columns: 1fr; } .hg-pin span { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .hg-pin::after { animation: none; } .hg-fig img { transition: none; } }
.hg-fig img { transform: none; transition: filter .4s; } .hg-fig:hover img { filter: saturate(1.08) contrast(1.03); }
.qc-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.0); transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.qc-card.on .qc-photo { transform: scale(1.12); transform-origin: 72% 35%; }
.qc-fig picture { display: block; width: 100%; height: 100%; }
.qc-ptag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #1b2350; background: #fff; border-radius: 999px; padding: 4px 10px 4px 6px; box-shadow: 0 4px 12px -4px rgb(0 0 0 / .4); opacity: 0; transform: translateY(8px); transition: .35s .4s; }
.qc-ptag i { width: 14px; height: 14px; border-radius: 50%; background: #1aa260 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/10px no-repeat; }
.qc-card.on .qc-ptag { opacity: 1; transform: none; }
.qc-card.on .qc-photo { transform-origin: 82% 30%; }
.qc-photo-micro { object-position: 40% 60%; } .qc-card.on .qc-photo-micro { transform-origin: 42% 62%; }
.qc-photo.qc-static { object-position: 45% 50%; } .qc-card.on .qc-photo.qc-static { transform: none; }
.qc-photo-ring { object-fit: contain; background: rgb(230 218 202); } .qc-card.on .qc-photo-ring { transform: scale(1.06); transform-origin: 50% 50%; } .qc-fig:has(.qc-photo-ring) { background: rgb(230 218 202); }

/* ===== Quality: instruments slider ===== */
.qc-slider { position: relative; }
.qc-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 18px; margin: -10px -2px 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.qc-track::-webkit-scrollbar { display: none; }
.qc-track > .qc-card { scroll-snap-align: start; }
.qc-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.qc-track.dragging .qc-card { pointer-events: none; }
.qc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.qc-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--primary); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, border-color .25s, opacity .25s; }
.qc-btn svg { width: 20px; height: 20px; }
.qc-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.qc-btn:disabled { opacity: .35; cursor: default; }
.qc-dots { display: flex; gap: 8px; }
.qc-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: #cfd5e6; cursor: pointer; transition: width .3s, background .3s; }
.qc-dots button[aria-current="true"] { width: 26px; background: #ff8b00; }
@media (max-width: 1080px) { .qc-track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .qc-track { grid-auto-columns: 84%; gap: 14px; } }

/* new instrument scene animations (play while the card is active) */
.qe-rock { transform-origin: 160px 150px; }
.qc-card.on .qe-rock { animation: qeRock 1.6s ease-in-out infinite; }
@keyframes qeRock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.qe-needle, .qf-needle { transform: rotate(-40deg); transition: transform .6s; }
.qc-card.on .qe-needle { animation: qeNeedle 1.6s ease-in-out infinite; }
@keyframes qeNeedle { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(18deg); } }
.qc-card.on .qf-needle { animation: qfNeedle 1.2s ease-in-out infinite; }
@keyframes qfNeedle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.qc-card.on .qf-spin { animation: qfSpin 1.2s linear infinite; }
@keyframes qfSpin { to { transform: translateX(40px); } }
.qf-spin { clip-path: inset(0 40px 0 0); }
.qg-plug { transform: translateX(0); transition: transform 1.2s cubic-bezier(.5,0,.2,1); }
.qc-card.on .qg-plug { transform: translateX(46px); }
.qh-jaw { transform: translateX(14px); transition: transform 1s cubic-bezier(.5,0,.2,1); }
.qc-card.on .qh-jaw { transform: none; }
.qc-photo-bore { object-position: 30% 40%; } .qc-card.on .qc-photo-bore { transform-origin: 22% 30%; }
.qc-photo-dial { object-position: 50% 55%; } .qc-card.on .qc-photo-dial { transform-origin: 60% 65%; }
/* ring & plug: full picture always visible, tag moved clear of the plug gauge */
.qc-photo-ring { object-fit: cover; object-position: 50% 50%; }
.qc-card.on .qc-photo-ring { transform: scale(1.03); transform-origin: 50% 50%; }
.qc-fig:has(.qc-photo-ring) .qc-ptag { top: 10px; bottom: auto; transform: translateY(-8px); }
.qc-card.on .qc-fig:has(.qc-photo-ring) .qc-ptag { transform: none; }
.qc-fig:has(.qc-photo-ring) .qc-ptag { display: none; }

/* ===== Contact Us band: interactive cards ===== */
.cbx3 { align-items: stretch; }
.cbx { position: relative; display: grid; gap: 0; padding: 0; overflow: hidden; align-content: start; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.cbx::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #253993, #ff8b00); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.cbx-main { display: flex; gap: 16px; align-items: center; padding: 22px; color: inherit; text-decoration: none; outline: none; }
.cbx-main > div { min-width: 0; }
.cbx-main span:not(.ci) { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; transition: color .25s; }
.cbx-hint { display: block; font-style: normal; font-size: .8rem; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .3s, margin .3s; }
.cbx .ci { position: relative; transition: background .3s, transform .3s; }
.cbx .ci::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #ff8b00; opacity: 0; transform: scale(.8); }
.cbx-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .3s, padding .35s; border-top: 1px solid transparent; }
.cbx-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem/1 var(--f-body, inherit); color: var(--primary); background: #eef1fb; border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.cbx-btn .icon { width: 15px; height: 15px; }
.cbx-btn:hover, .cbx-btn:focus-visible { background: #253993; color: #fff; transform: translateY(-1px); }
.cbx-btn.done { background: #1aa260; color: #fff; }

.cbx:hover, .cbx:focus-within, .cbx.open { transform: translateY(-5px); border-color: transparent; box-shadow: 0 22px 40px -22px rgb(37 57 147 / .55); }
.cbx:hover::before, .cbx:focus-within::before, .cbx.open::before { transform: scaleX(1); }
.cbx:hover .ci, .cbx:focus-within .ci, .cbx.open .ci { background: #ff8b00; }
.cbx:hover .ci::after, .cbx:focus-within .ci::after, .cbx.open .ci::after { animation: cbxPing 1.6s ease-out infinite; }
.cbx:hover .cbx-main span:not(.ci), .cbx:focus-within .cbx-main span:not(.ci), .cbx.open .cbx-main span:not(.ci) { color: var(--primary); }
.cbx:hover .cbx-hint, .cbx:focus-within .cbx-hint, .cbx.open .cbx-hint { max-height: 3em; opacity: 1; margin-top: 2px; }
.cbx:hover .cbx-acts, .cbx:focus-within .cbx-acts, .cbx.open .cbx-acts { max-height: 120px; opacity: 1; padding: 14px 22px 18px; border-top-color: var(--line); }
@keyframes cbxPing { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.45); } }

/* icon motion per card */
.cbx[data-kind="phone"]:hover .ci .icon, .cbx[data-kind="phone"].open .ci .icon { animation: cbxRing .9s ease-in-out infinite; }
@keyframes cbxRing { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-16deg); } 20%, 40% { transform: rotate(16deg); } }
.cbx[data-kind="pin"]:hover .ci .icon, .cbx[data-kind="pin"].open .ci .icon { animation: cbxDrop 1s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes cbxDrop { 0% { transform: translateY(-6px); } 45%, 100% { transform: translateY(0); } }
.cbx[data-kind="mail"]:hover .ci .icon, .cbx[data-kind="mail"].open .ci .icon { animation: cbxFly 1.2s ease-in-out infinite; }
@keyframes cbxFly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px) rotate(-6deg); } }

/* touch screens: actions always visible */
@media (hover: none) { .cbx-acts { max-height: 120px; opacity: 1; padding: 0 22px 18px; } .cbx-hint { max-height: 3em; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cbx, .cbx *, .cbx::before { animation: none !important; transition: none !important; } }
.cbx3 { align-items: start; }
.cbox .cbx-btn span { color: inherit; overflow-wrap: normal; }

/* ===== Global presence: "Growing our network" background ===== */
.gn-band { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 1px 1px, rgb(37 57 147 / .12) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(100deg, #eef1fb 0%, #f8f9fc 45%, #fff 75%); }
.gn-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 40%, rgb(255 255 255 / .9) 62%, #fff 85%); }
.gn-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.gn-lines path { stroke: #253993; stroke-opacity: .16; stroke-width: 1.2; fill: none; }
.gn-dots circle { fill: #253993; fill-opacity: .28; }
.gn-dots .gn-hot { fill: #ff8b00; fill-opacity: .75; transform-box: fill-box; transform-origin: center; animation: gnPulse 2.6s ease-in-out infinite; }
.gn-dots .gn-hot:nth-child(2n) { animation-delay: 1.1s; }
.gn-arcs path { fill: none; stroke: #ff8b00; stroke-opacity: .45; stroke-width: 1.6; stroke-dasharray: 6 8; animation: gnFlow 3s linear infinite; }
@keyframes gnFlow { to { stroke-dashoffset: -56; } }
@keyframes gnPulse { 0%, 100% { transform: scale(1); fill-opacity: .75; } 50% { transform: scale(1.8); fill-opacity: .35; } }
.gn-band .sticky { position: relative; }
.gn-band .sticky::before { content: ""; position: absolute; left: -26px; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: linear-gradient(#253993, #ff8b00); }
.gn-band .prose { background: rgb(255 255 255 / .82); backdrop-filter: blur(3px); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 18px 40px -30px rgb(37 57 147 / .5); }
@media (max-width: 880px) { .gn-band .sticky::before { left: -12px; } .gn-band::after { background: linear-gradient(180deg, transparent 30%, rgb(255 255 255 / .85) 70%); } }
@media (prefers-reduced-motion: reduce) { .gn-arcs path, .gn-dots .gn-hot { animation: none; } }
.gn-lines path { stroke-opacity: .11; }
@media (max-width: 880px) { .gn-band .split > .sticky, .gn-band .sticky { position: relative !important; top: auto !important; } .gn-band .split { gap: 22px; } }

/* ===== Quality: "How we keep standards high" interactive cards ===== */
.ka-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ka-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: grid; gap: 10px; align-content: start; outline: none;
  opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .35s; }
.ka-grid.in .ka-card { opacity: 1; transform: none; }
.ka-grid.in .ka-card:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s, 0s; }
.ka-grid.in .ka-card:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s, 0s; }
.ka-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #253993, #ff8b00); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.ka-ico { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: #eef1fb; color: var(--primary); transition: background .35s, color .35s, transform .35s; }
.ka-ico svg { width: 34px; height: 34px; overflow: visible; }
.ka-card .tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #ff8b00; }
.ka-card h3 { color: var(--ink); font-size: 1.12rem; }
.ka-card p { color: var(--muted); }
.ka-pts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.ka-pts li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); opacity: .55; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.ka-pts li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background: #1aa260 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/11px no-repeat; transform: scale(.6); transition: transform .3s; }
.ka-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; font-size: .88rem; color: var(--primary); text-decoration: none; width: fit-content; }
.ka-link .icon { width: 16px; height: 16px; transition: transform .25s; }
.ka-link:hover .icon { transform: translateX(4px); }
.ka-inst .instrument { font: 600 .8rem/1 inherit; cursor: pointer; border: 1px solid transparent; background: #f1f3f7; color: #4a5068; border-radius: 999px; padding: .5em .9em; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.ka-inst .instrument:hover, .ka-inst .instrument:focus-visible { background: #253993; color: #fff; transform: translateY(-2px); outline: none; }

/* active card */
.ka-card:hover, .ka-card:focus-within, .ka-card.on { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 44px -26px rgb(37 57 147 / .6); }
.ka-card:hover::after, .ka-card:focus-within::after, .ka-card.on::after { transform: scaleX(1); }
.ka-card:hover .ka-ico, .ka-card:focus-within .ka-ico, .ka-card.on .ka-ico { background: #253993; color: #fff; transform: rotate(-4deg) scale(1.05); }
.ka-card:hover .ka-pts li, .ka-card:focus-within .ka-pts li, .ka-card.on .ka-pts li { opacity: 1; transform: none; }
.ka-card:hover .ka-pts li::before, .ka-card:focus-within .ka-pts li::before, .ka-card.on .ka-pts li::before { transform: scale(1); }
.ka-pts li:nth-child(2) { transition-delay: .08s; } .ka-pts li:nth-child(3) { transition-delay: .16s; }

/* icon motion while active */
.ka-gear-big, .ka-gear-small { transform-box: fill-box; transform-origin: center; }
.ka-card:hover .ka-gear-big, .ka-card.on .ka-gear-big { animation: kaSpin 3s linear infinite; }
.ka-card:hover .ka-gear-small, .ka-card.on .ka-gear-small { animation: kaSpin 1.6s linear infinite reverse; }
@keyframes kaSpin { to { transform: rotate(360deg); } }
.ka-scan { stroke-dasharray: 40; stroke-dashoffset: 40; }
.ka-card:hover .ka-scan, .ka-card.on .ka-scan { animation: kaScan 1.4s ease-in-out infinite; }
@keyframes kaScan { 0% { stroke-dashoffset: 40; } 60%, 100% { stroke-dashoffset: 0; } }
.ka-card:hover .ka-ticks, .ka-card.on .ka-ticks { animation: kaTick 1.4s ease-in-out infinite; }
@keyframes kaTick { 50% { opacity: .35; } }
.ka-stars path { transform-box: fill-box; transform-origin: center; }
.ka-card:hover .ka-stars path, .ka-card.on .ka-stars path { animation: kaStar 1.5s ease-in-out infinite; fill: #ffb24d; stroke: #ffb24d; }
.ka-card:hover .ka-stars path:nth-child(2), .ka-card.on .ka-stars path:nth-child(2) { animation-delay: .2s; }
.ka-card:hover .ka-stars path:nth-child(3), .ka-card.on .ka-stars path:nth-child(3) { animation-delay: .4s; }
@keyframes kaStar { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }

/* flash the instrument card the visitor jumped to */
.qc-card.flash { animation: qcFlash 1.6s ease-out; }
@keyframes qcFlash { 0%, 40% { box-shadow: 0 0 0 4px #ff8b00, 0 24px 40px -24px rgb(37 57 147 / .55); } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 900px) { .ka-grid { grid-template-columns: 1fr; } }
@media (hover: none) { .ka-pts li { opacity: 1; transform: none; } .ka-pts li::before { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ka-card { opacity: 1; transform: none; transition: none; } .ka-card * { animation: none !important; } }

/* ===== Contact page: symmetric, interactive info cards ===== */
main[data-page="contact"] .contact-grid { align-items: stretch; }
.cc2 { display: grid; grid-auto-rows: 1fr; gap: 14px; height: 100%; }
.cc { position: relative; overflow: hidden; align-items: stretch; gap: 16px; padding: 20px; border-radius: 14px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.cc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#253993, #ff8b00); transform: scaleY(0); transform-origin: top; transition: transform .35s; }
.cc .ico { width: 46px; height: 46px; border-radius: 12px; transition: background .3s, transform .3s; }
.cc .ico .icon { width: 20px; height: 20px; }
.cc-body { display: grid !important; grid-template-rows: auto 1fr auto; gap: 6px !important; min-width: 0; }
.cc-val { display: flex; align-items: flex-start; gap: 8px; }
.cc-val .val { flex: 1; min-width: 0; user-select: text; line-height: 1.45; }
.cc-copy { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s, border-color .2s; }
.cc-copy .icon { width: 15px; height: 15px; }
.cc-copy:hover, .cc-copy:focus-visible { background: #253993; color: #fff; border-color: #253993; opacity: 1; outline: none; }
.cc-copy.done { background: #1aa260; border-color: #1aa260; color: #fff; opacity: 1; }
.cc .acts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 4px !important; align-self: end; }
.cc .acts .btn { justify-content: center; width: 100%; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.cc .acts .btn:hover { background: #253993; color: #fff; border-color: #253993; transform: translateY(-1px); }
.cc:hover, .cc:focus-within { transform: translateX(4px); border-color: transparent; box-shadow: 0 18px 36px -24px rgb(37 57 147 / .55); }
.cc:hover::before, .cc:focus-within::before { transform: scaleY(1); }
.cc:hover .ico, .cc:focus-within .ico { background: #ff8b00; transform: scale(1.06); }
.cc:hover .cc-copy { opacity: 1; }
.cc[data-kind="phone"]:hover .ico .icon { animation: cbxRing .9s ease-in-out infinite; }
.cc[data-kind="pin"]:hover .ico .icon { animation: cbxDrop 1s cubic-bezier(.3,1.6,.5,1) infinite; }
.cc[data-kind="mail"]:hover .ico .icon { animation: cbxFly 1.2s ease-in-out infinite; }
.cc[data-kind="portal"]:hover .ico .icon { animation: ccBlink 1.2s ease-in-out infinite; }
@keyframes ccBlink { 50% { transform: translateY(-2px); } }
@media (max-width: 880px) { .cc2 { grid-auto-rows: auto; height: auto; } .cc:hover { transform: none; } }
@media (max-width: 380px) { .cc .acts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cc, .cc * { animation: none !important; transition: none !important; } }
.cc .acts .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .cc { padding: 16px; gap: 12px; }
  .cc .ico { width: 40px; height: 40px; }
  .cc .acts .btn { font-size: .7rem; letter-spacing: .04em; padding-inline: 8px; gap: 5px; }
  .cc .acts .btn .icon { width: 13px; height: 13px; }
}
.qc-photo-dial { object-position: 55% 60%; } .qc-card.on .qc-photo-dial { transform-origin: 60% 66%; }
/* ring & plug: original square photo shown 1:1, no stretching or cropping */
.qc-photo-ring { object-fit: contain; object-position: 50% 50%; background: rgb(230 218 202); }
.qc-card.on .qc-photo-ring { transform: none; }
.qc-photo-spline { object-position: 50% 40%; } .qc-card.on .qc-photo-spline { transform-origin: 70% 40%; }
.qc-card.on .qc-photo-gear { transform-origin: 22% 75%; }
.qc-fig:has(.qc-photo-gear) .qc-ptag { top: 10px; bottom: auto; transform: translateY(-8px); }
.qc-card.on .qc-fig:has(.qc-photo-gear) .qc-ptag { transform: none; }
.qc-card.on .qc-photo-gear { transform: scale(1.06); }

/* ===== Agri tractor parts: system sidebar + photo tiles ===== */
.rt { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 28px; }
.rt-side { position: sticky; top: calc(var(--header-h, 72px) + 16px); display: grid; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.rt-side-head { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff8b00; padding: 6px 8px 8px; }
.rt-sys { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 12px; padding: 8px; cursor: pointer; color: var(--ink); transition: background .2s, border-color .2s, transform .2s; }
.rt-sys:hover { background: #f4f6fc; transform: translateX(3px); }
.rt-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #eef1fb; color: var(--primary); transition: background .25s, color .25s; }
.rt-ico .icon { width: 20px; height: 20px; }
.rt-name b { display: block; font-size: .92rem; line-height: 1.25; }
.rt-name small { color: var(--muted); font-size: .74rem; }
.rt-code { font: 600 .66rem var(--f-mono, monospace); color: #9aa0b0; }
.rt-sys[aria-pressed="true"] { background: #253993; color: #fff; box-shadow: 0 12px 24px -16px rgb(37 57 147 / .8); }
.rt-sys[aria-pressed="true"] .rt-ico { background: #ff8b00; color: #fff; }
.rt-sys[aria-pressed="true"] .rt-name small, .rt-sys[aria-pressed="true"] .rt-code { color: #c9d1f0; }

.rt-main { min-width: 0; display: grid; gap: 28px; }
.rt-head { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: linear-gradient(110deg, #253993, #1b2a75); color: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; position: relative; overflow: hidden; }
.rt-head::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid rgb(255 139 0 / .14); }
.rt-hico { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; background: #ff8b00; }
.rt-hico .icon { width: 28px; height: 28px; }
.rt-hcode { font: 600 .72rem var(--f-mono, monospace); letter-spacing: .1em; color: #ffb257; }
.rt-head h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 2px 0; }
.rt-head p { color: rgb(255 255 255 / .8); font-size: .92rem; margin: 0; }
.rt-count { text-align: center; position: relative; z-index: 1; font-size: .72rem; color: #c9d1f0; text-transform: uppercase; letter-spacing: .08em; }
.rt-count b { display: block; font: 700 1.8rem var(--f-display); color: #fff; letter-spacing: 0; }

.rt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rt-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; animation: rtIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d) * 40ms); transition: transform .3s, box-shadow .3s, border-color .3s; }
@keyframes rtIn { from { opacity: 0; transform: translateY(12px); } }
.rt-tile:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 22px 40px -26px rgb(37 57 147 / .6); }
.rt-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: #fff; cursor: zoom-in; overflow: hidden; border-bottom: 1px solid var(--line); }
.rt-media picture, .rt-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rt-media img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.rt-tile:hover .rt-media img { transform: scale(1.06); }
.rt-zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: #253993; color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .25s; }
.rt-zoom .icon { width: 16px; height: 16px; }
.rt-tile:hover .rt-zoom, .rt-media:focus-visible .rt-zoom { opacity: 1; transform: none; }
.rt-ph { cursor: default; display: grid; place-items: center; align-content: center; gap: 8px; color: #b5bdd6; background: repeating-linear-gradient(135deg, #f6f7fb 0 10px, #f1f3f8 10px 20px); }
.rt-ph .icon { width: 44px; height: 44px; }
.rt-ph small { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9aa0b0; }
.rt-tbody { padding: 14px 16px 16px; display: grid; gap: 12px; align-content: space-between; }
.rt-tbody h4 { font-size: .98rem; color: var(--ink); line-height: 1.3; margin: 0; }
.rt-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font: 700 .76rem/1 inherit; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #d5dbef; background: #fff; color: var(--primary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rt-add .icon { width: 15px; height: 15px; }
.rt-add:hover { border-color: #253993; background: #253993; color: #fff; }
.rt-add[aria-pressed="true"] { background: #ff8b00; border-color: #ff8b00; color: #fff; }

/* lightbox */
.rt-lb { position: fixed; inset: 0; z-index: 200; background: rgb(11 16 51 / .72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: rtFade .25s ease; }
.rt-lb[hidden] { display: none; }
@keyframes rtFade { from { opacity: 0; } }
.rt-lb-card { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); background: #fff; border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: rtIn .3s ease; }
.rt-lb-img { background: #fff; display: grid; place-items: center; min-height: 0; }
.rt-lb-img picture, .rt-lb-img img { display: block; width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.rt-lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.rt-lb-foot small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #ff8b00; font-weight: 700; }
.rt-lb-foot b { color: var(--ink); font-size: 1.05rem; }
.rt-lb-foot .rt-add { width: auto; padding-inline: 18px; }
.rt-lb-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1f3f7; color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.rt-lb-x:hover { background: #253993; color: #fff; }
html.rt-lock { overflow: hidden; }

@media (max-width: 1100px) { .rt { grid-template-columns: 240px minmax(0, 1fr); } .rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rt { grid-template-columns: 1fr; }
  .rt-side { position: static; display: flex; overflow-x: auto; gap: 8px; padding: 8px; scrollbar-width: none; }
  .rt-side::-webkit-scrollbar { display: none; }
  .rt-side-head { display: none; }
  .rt-sys { flex: none; grid-template-columns: 34px auto; width: auto; padding: 6px 12px 6px 6px; border-color: var(--line); }
  .rt-sys:hover { transform: none; }
  .rt-ico { width: 34px; height: 34px; }
  .rt-code, .rt-name small { display: none; }
  .rt-name b { white-space: nowrap; font-size: .85rem; }
}
@media (max-width: 560px) {
  .rt-grid { gap: 10px; }
  .rt-head { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .rt-hico { width: 48px; height: 48px; }
  .rt-count { display: none; }
  .rt-tbody { padding: 10px 10px 12px; gap: 8px; }
  .rt-tbody h4 { font-size: .86rem; }
  .rt-add { font-size: .64rem; padding: 8px 6px; letter-spacing: .03em; }
  .rt-add span { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .rt-tile { animation: none; } .rt-media img { transition: none; } }
.rt-tbody h4 { font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; }
.rt-add { font-family: "Work Sans", system-ui, sans-serif; font-size: .74rem; font-weight: 700; line-height: 1; }
@media (max-width: 560px) { .rt-add { font-size: .64rem; } }
.rt-name small { white-space: nowrap; }

/* ===== Agri page: view toggle + system-wise list with reference image slider ===== */
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rt-view { display: inline-flex; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; gap: 4px; }
.rt-view button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 9px 14px; border-radius: 9px; font: 600 .86rem "Work Sans", system-ui, sans-serif; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.rt-view button .icon { width: 16px; height: 16px; }
.rt-view button[aria-pressed="true"] { background: #253993; color: #fff; }
.rt-view button:not([aria-pressed="true"]):hover { background: #f1f3f7; color: var(--ink); }
.rt-enq { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #253993; background: #fff; color: #253993; border-radius: 10px; padding: 9px 14px; font: 700 .84rem "Work Sans", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.rt-enq .icon { width: 17px; height: 17px; }
.rt-enq:hover { background: #253993; color: #fff; }
.rt-enq-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff8b00; color: #fff; font-size: .74rem; display: grid; place-items: center; }
.rt-enq-n[data-n="0"] { background: #cfd5e6; color: #4a5068; }

.rt[data-view="list"] .rt-main { gap: 22px; }
.sw-sec { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; scroll-margin-top: calc(var(--header-h, 72px) + 20px); animation: rtIn .45s ease both; }
.sw-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 20px; background: linear-gradient(180deg, #e9ebf5, #f6f7fb); overflow: hidden; }
.sw-band::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 38%; background: #dcdfee; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.sw-band > * { position: relative; z-index: 1; }
.sw-code { font: 600 .7rem var(--f-mono, monospace); letter-spacing: .1em; color: #ff8b00; }
.sw-band h2 { font-family: "Work Sans", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: #1b2350; margin: 2px 0 8px; }
.sw-rule { display: block; width: 110px; height: 3px; border-radius: 3px; background: #ff8b00; }
.sw-band-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #253993; color: #fff; box-shadow: 0 12px 24px -14px rgb(37 57 147 / .8); }
.sw-band-ico .icon { width: 26px; height: 26px; }
.sw-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; padding: 22px 26px 26px; align-items: start; }
.sw-text { color: var(--muted); margin: 0 0 12px; font-size: .92rem; }
.sw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sw-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--ink); font: 500 .93rem "Work Sans", system-ui, sans-serif; transition: background .2s, border-color .2s, transform .2s; }
.sw-item:hover { background: #f4f6fc; border-color: #e3e7f4; transform: translateX(2px); }
.sw-tick { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #fff3e5; color: #ff8b00; border: 1.5px solid #ffcf99; transition: background .2s, color .2s, border-color .2s; }
.sw-tick .icon { width: 13px; height: 13px; }
.sw-name { flex: 1; min-width: 0; }
.sw-cam { flex: none; color: #9aa0b0; display: grid; }
.sw-cam .icon { width: 15px; height: 15px; }
.sw-item[aria-pressed="true"] { background: #fff8ef; border-color: #ffcf99; }
.sw-item[aria-pressed="true"] .sw-tick { background: #ff8b00; border-color: #ff8b00; color: #fff; }
.sw-hint { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .78rem; color: #9aa0b0; }
.sw-hint .icon { width: 14px; height: 14px; }

.sw-slider { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; aspect-ratio: 4 / 3; }
.sw-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sw-slide { flex: 0 0 100%; position: relative; border: 0; padding: 0; background: #fff; cursor: zoom-in; }
.sw-slide picture, .sw-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sw-cap { position: absolute; left: 12px; bottom: 12px; font: 600 .78rem "Work Sans", system-ui, sans-serif; color: #fff; background: rgb(27 35 80 / .82); padding: 5px 11px; border-radius: 999px; }
.sw-ref { position: absolute; right: 10px; top: 10px; font: 700 .64rem "Work Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b7184; background: rgb(255 255 255 / .9); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; z-index: 1; }
.sw-nav { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 1px solid var(--line); background: rgb(255 255 255 / .95); color: #253993; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .25s, background .2s, color .2s; z-index: 1; }
.sw-nav .icon { width: 16px; height: 16px; }
.sw-prev { left: 10px; } .sw-next { right: 10px; }
.sw-slider:hover .sw-nav, .sw-nav:focus-visible { opacity: 1; }
.sw-nav:hover { background: #253993; color: #fff; }
.sw-dots { position: absolute; right: 12px; bottom: 14px; display: flex; gap: 6px; z-index: 1; }
.sw-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #cfd5e6; cursor: pointer; transition: width .3s, background .3s; }
.sw-dots button[aria-current="true"] { width: 22px; background: #ff8b00; }
.sw-empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f6f7fb 0 10px, #f1f3f8 10px 20px); }
.sw-ph { display: grid; justify-items: center; gap: 6px; text-align: center; color: #b5bdd6; padding: 16px; }
.sw-ph .icon { width: 46px; height: 46px; }
.sw-ph b { color: #6b7184; font-family: "Work Sans", system-ui, sans-serif; }
.sw-ph small { color: #9aa0b0; font-size: .78rem; }
.rt[data-view="list"] .rt-sys[aria-pressed="true"] { background: #253993; }

@media (max-width: 1100px) { .sw-body { grid-template-columns: 1fr; } .sw-slider { max-width: 560px; } }
@media (max-width: 560px) {
  .sw-band { padding: 18px 16px 16px; } .sw-band::after { width: 30%; } .sw-band-ico { width: 44px; height: 44px; }
  .sw-body { padding: 16px; gap: 16px; }
  .sw-list { grid-template-columns: 1fr; }
  .rt-view button { padding: 8px 10px; font-size: .8rem; }
  .sw-nav { opacity: 1; width: 32px; height: 32px; margin-top: -16px; }
}
@media (prefers-reduced-motion: reduce) { .sw-track { transition: none; } .sw-sec { animation: none; } }
.sw-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); } @media (max-width: 1100px) { .sw-body { grid-template-columns: 1fr; } }
/* list view: systems become a sticky jump bar so the sections get the full width */
.rt[data-view="list"] { grid-template-columns: 1fr; }
.rt[data-view="list"] .rt-side { position: sticky; top: calc(var(--header-h, 72px) + 8px); z-index: 5; display: flex; overflow-x: auto; gap: 6px; padding: 6px; scrollbar-width: none; box-shadow: 0 10px 24px -18px rgb(37 57 147 / .45); }
.rt[data-view="list"] .rt-side::-webkit-scrollbar { display: none; }
.rt[data-view="list"] .rt-side-head, .rt[data-view="list"] .rt-code, .rt[data-view="list"] .rt-name small { display: none; }
.rt[data-view="list"] .rt-sys { flex: none; width: auto; grid-template-columns: 30px auto; padding: 5px 12px 5px 5px; }
.rt[data-view="list"] .rt-sys:hover { transform: none; }
.rt[data-view="list"] .rt-ico { width: 30px; height: 30px; border-radius: 8px; }
.rt[data-view="list"] .rt-ico .icon { width: 16px; height: 16px; }
.rt[data-view="list"] .rt-name b { white-space: nowrap; font-size: .84rem; }
.sw-sec { scroll-margin-top: calc(var(--header-h, 72px) + 80px); }
.sw-body { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
.sw-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 1100px) { .sw-body { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sw-list { grid-template-columns: 1fr; } }
.sw-empty { aspect-ratio: auto; min-height: 220px; }
/* ===== Category icons reused outside the home page (.ani-host triggers) ===== */
.ani-host .ci.ci-injector{background: var(--primary); width: 72px; height: 72px; overflow: hidden;}
.ani-host:hover .ci.ci-injector, .ani-host.on .ci.ci-injector{background: var(--accent);}
.ani-host .ci.ci-injector{color: var(--primary);}
.ani-host:hover .ci.ci-injector, .ani-host.on .ci.ci-injector{color: var(--accent);}
.ani-host .ci.ci-anim{background: var(--primary); width: 72px; height: 72px; overflow: hidden;}
.ani-host:hover .ci.ci-anim, .ani-host.on .ci.ci-anim{background: var(--accent);}
.ani-host:hover .ci-bevel, .ani-host.on .ci-bevel{color: var(--accent);}
.ani-host:hover .ci-piston, .ani-host.on .ci-piston{color: var(--accent);}
.ani-host:hover .ci-hyd, .ani-host.on .ci-hyd{color: var(--accent);}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .inj-body, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .inj-spray circle, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .bv-teeth-a, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .bv-teeth-b, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .ps-move, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .ps-rod, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .hyd-rod{animation: none;}
.ani-host:hover .ci-brake, .ani-host.on .ci-brake{color: var(--accent);}
.ani-host:hover .ci-spark, .ani-host.on .ci-spark{color: var(--accent);}
.ani-host:hover .ci-fan, .ani-host.on .ci-fan{color: var(--accent);}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .fan-mask{animation: none;}
.ani-host:hover .ci-pto, .ani-host.on .ci-pto{color: var(--accent);}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-spin, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-left, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-right{animation: none;}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .link-a, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .link-b{animation: none;}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-spin{animation: none;}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-left, .ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-right{animation: none !important;}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-band{animation: none; opacity: 0;}
.ani-host:not(:hover):not(.on):not(:focus-within):not(:active) .pto-pin{animation: none; transform: none;}
.ani-host:hover .pto-left, .ani-host.on .pto-left, .ani-host:hover .pto-right, .ani-host.on .pto-right{animation: none !important; transform: none !important;}
.ani-host:hover .ci-link .link-a, .ani-host.on .ci-link .link-a, .ani-host:focus-within .ci-link .link-a, .ani-host:active .ci-link .link-a{animation: linkInA 1.1s cubic-bezier(.3,.7,.2,1) both;}
.ani-host:hover .ci-link .link-b, .ani-host.on .ci-link .link-b, .ani-host:focus-within .ci-link .link-b, .ani-host:active .ci-link .link-b{animation: linkInB 1.1s cubic-bezier(.3,.7,.2,1) both;}
@media (prefers-reduced-motion: reduce){.ani-host:hover .ci-link .link-a, .ani-host.on .ci-link .link-a, .ani-host:hover .ci-link .link-b, .ani-host.on .ci-link .link-b{animation: none;}
}
/* animated category icons inside the Agri page (72px icon scaled into each slot) */
.rt-ico, .sw-band-ico, .rt-hico { position: relative; overflow: hidden; }
.rt-ico > .ci, .sw-band-ico > .ci, .rt-hico > .ci { position: absolute; left: 0; top: 0; width: 72px !important; height: 72px !important; border-radius: 0; transform-origin: 0 0; }
.rt-ico > .ci { transform: scale(calc(40 / 72)); }
.sw-band-ico > .ci { transform: scale(calc(54 / 72)); }
.rt-hico > .ci { transform: scale(calc(60 / 72)); }
.rt[data-view="list"] .rt-ico > .ci { transform: scale(calc(30 / 72)); }
@media (max-width: 900px) { .rt-ico > .ci { transform: scale(calc(34 / 72)); } }
@media (max-width: 560px) { .sw-band-ico > .ci { transform: scale(calc(44 / 72)); } .rt-hico > .ci { transform: scale(calc(48 / 72)); } }

/* system-wise list: interactive extras */
.sw-media { display: grid; gap: 10px; min-width: 0; }
.sw-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(37 57 147 / .08); z-index: 1; }
.sw-prog i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #253993, #ff8b00); transform-origin: left; animation: swProg 3.8s linear both; }
.sw-slider.held .sw-prog i { animation-play-state: paused; }
@keyframes swProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sw-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.sw-thumbs button { aspect-ratio: 4 / 3; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; padding: 2px; cursor: pointer; overflow: hidden; opacity: .65; transition: opacity .2s, border-color .2s, transform .2s; }
.sw-thumbs img, .sw-thumbs picture { display: block; width: 100%; height: 100%; object-fit: contain; }
.sw-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.sw-thumbs button[aria-current="true"] { opacity: 1; border-color: #ff8b00; box-shadow: 0 0 0 2px rgb(255 139 0 / .2); }
.sw-cam { border-radius: 6px; padding: 3px; transition: background .2s, color .2s; }
.sw-cam:hover { background: #253993; color: #fff; }
.sw-item:hover .sw-cam { color: #253993; }
.sw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sw-sel { font-size: .84rem; color: var(--muted); }
.sw-sel b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #eef1fb; color: #253993; margin-right: 4px; transition: background .25s, color .25s, transform .25s; }
.sw-sec.has-sel .sw-sel b { background: #ff8b00; color: #fff; transform: scale(1.08); }
.sw-all { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #d5dbef; background: #fff; color: #253993; border-radius: 8px; padding: 8px 12px; font: 700 .76rem "Work Sans", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sw-all .icon { width: 14px; height: 14px; }
.sw-all:hover { background: #253993; border-color: #253993; color: #fff; }
.sw-all[aria-pressed="true"] { border-color: #ffcf99; color: #c45f00; background: #fff8ef; }
.sw-sec { transition: box-shadow .3s, border-color .3s; }
.sw-sec:hover { border-color: #d5dbef; box-shadow: 0 24px 46px -34px rgb(37 57 147 / .55); }
.sw-band-ico { transition: transform .3s; }
.sw-sec:hover .sw-band-ico { transform: rotate(-4deg) scale(1.05); }
.sw-rule { transition: width .4s; }
.sw-sec:hover .sw-rule { width: 160px; }
.rt-head .rt-hico { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sw-prog { display: none; } }
.rt-sys[aria-pressed="true"] .ci.ci-anim, .rt-hico .ci.ci-anim, .sw-sec:hover .sw-band-ico .ci.ci-anim { background: var(--accent) !important; }
.rt-sys[aria-pressed="true"] .ci.ci-anim, .rt-hico .ci.ci-anim, .sw-sec:hover .sw-band-ico .ci.ci-anim { color: var(--accent); }

/* alternate layout: image right on one system, image left on the next */
@media (min-width: 1101px) {
  .sw-sec:nth-of-type(even) .sw-body { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); }
  .sw-sec:nth-of-type(even) .sw-media { order: -1; }
}
.sw-sec:nth-of-type(even) .sw-band { flex-direction: row-reverse; text-align: right; }
.sw-sec:nth-of-type(even) .sw-band::after { right: auto; left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.sw-sec:nth-of-type(even) .sw-rule { margin-left: auto; }
.sw-sec:nth-of-type(even) .sw-band-ico { transform: none; }
.sw-sec:nth-of-type(even):hover .sw-band-ico { transform: rotate(4deg) scale(1.05); }

/* ===== Agri tractor parts hero: blended tractor photo ===== */
.page-hero.hero-photo { position: relative; isolation: isolate; overflow: hidden; }
.page-hero.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: image-set(url("hero-agri-tractor.webp") type("image/webp"), url("hero-agri-tractor.jpg") type("image/jpeg")) right 40% / cover no-repeat;
  background: url("hero-agri-tractor.jpg") right 40% / cover no-repeat;
  opacity: .32; mix-blend-mode: luminosity; filter: contrast(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / .55) 40%, #000 72%);
          mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / .55) 40%, #000 72%);
  animation: heroDrift 18s ease-in-out infinite alternate; }
.page-hero.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 85% 55%, rgb(255 139 0 / .14), transparent 70%), linear-gradient(180deg, transparent 70%, rgb(11 16 51 / .35)); }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1.5%); } }
@media (max-width: 760px) { .page-hero.hero-photo::before { background-position: 70% center; opacity: .26; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .35), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .35), #000 70%); } }
@media (prefers-reduced-motion: reduce) { .page-hero.hero-photo::before { animation: none; } }
.page-hero.hero-photo::before { background: url("hero-agri-tractor.jpg") right bottom / auto 112% no-repeat; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .6) 52%, #000 72%); mask-image: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .6) 52%, #000 72%); }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.04); } }
.page-hero.hero-photo::before { transform-origin: right bottom; }
@media (max-width: 760px) { .page-hero.hero-photo::before { background-size: cover; background-position: 35% center; opacity: .28; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); } }

/* crisp category icons: re-render at the real size with zoom instead of scaling a bitmap layer */
.rt-ico > .ci, .sw-band-ico > .ci, .rt-hico > .ci { transform: none !important; transform-origin: 0 0; }
.rt-ico > .ci { zoom: calc(40 / 72); }
.sw-band-ico > .ci { zoom: calc(54 / 72); }
.rt-hico > .ci { zoom: calc(60 / 72); }
.rt[data-view="list"] .rt-ico > .ci { zoom: calc(30 / 72); }
@media (max-width: 900px) { .rt-ico > .ci { zoom: calc(34 / 72); } }
@media (max-width: 560px) { .sw-band-ico > .ci { zoom: calc(44 / 72); } .rt-hico > .ci { zoom: calc(48 / 72); } }
.sw-sec:hover .sw-band-ico, .sw-sec:nth-of-type(even):hover .sw-band-ico { transform: none; }
.sw-band-ico { transition: box-shadow .3s; }
.sw-sec:hover .sw-band-ico { box-shadow: 0 0 0 4px rgb(255 139 0 / .22), 0 12px 24px -14px rgb(37 57 147 / .8); }
.rt-ico svg, .sw-band-ico svg, .rt-hico svg { shape-rendering: geometricPrecision; }
/* eye (view photo) button: clear icon in every state */
.sw-item .sw-cam { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; padding: 0; color: #8a91a8; background: transparent; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.sw-item .sw-cam .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.sw-item:hover .sw-cam { color: #253993; background: #eef1fb; border-color: #d5dbef; }
.sw-item .sw-cam:hover, .sw-item:hover .sw-cam:hover { color: #fff; background: #253993; border-color: #253993; }
.sw-item[aria-pressed="true"] .sw-cam { color: #c45f00; }
.sw-item { min-height: 46px; } .sw-item .sw-cam { margin: -4px 0; }

/* ===== Order portal promo card (replaces the plain portal note) ===== */
.pn { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 28px; padding: clamp(20px, 3vw, 34px); border-radius: 20px; color: #fff;
  background: radial-gradient(70% 120% at 100% 0%, rgb(255 139 0 / .22), transparent 60%), linear-gradient(120deg, #1b2a75, #253993 55%, #2f46ac); box-shadow: 0 30px 60px -40px rgb(27 42 117 / .9); }
.pn::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .09) 1px, transparent 1.5px) 0 0 / 20px 20px; pointer-events: none; }
.pn > * { position: relative; }
.pn-text { display: grid; gap: 12px; justify-items: start; }
.pn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem "Work Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffb257; }
.pn-eyebrow .icon { width: 16px; height: 16px; }
.pn h3 { color: #fff; font-size: clamp(1.25rem, 2.3vw, 1.6rem); margin: 0; }
.pn p { color: rgb(255 255 255 / .8); margin: 0; font-size: .95rem; }
.pn p b { color: #fff; }
.pn-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 4px; }
.pn-feat { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .06); color: #fff; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; font-family: "Work Sans", system-ui, sans-serif; }
.pn-feat .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: rgb(255 255 255 / .12); transition: background .25s; }
.pn-feat b { display: block; font-size: .86rem; }
.pn-feat small { display: block; font-size: .72rem; color: rgb(255 255 255 / .7); }
.pn-feat:hover, .pn-feat.on { background: rgb(255 255 255 / .14); border-color: rgb(255 178 87 / .7); transform: translateY(-2px); }
.pn-feat:hover .icon, .pn-feat.on .icon { background: #ff8b00; }
.pn-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pn .btn-primary { background: #ff8b00; border-color: #ff8b00; color: #fff; }
.pn .btn-primary:hover { background: #e67d00; }
.pn .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .45); }
.pn .btn-ghost:hover { background: #fff; color: #253993; }
.pn-go .icon { transition: transform .3s; } .pn-go:hover .icon { transform: translateX(3px); }

/* mini portal window */
.pn-mock { perspective: 900px; }
.pn-win { background: #fff; border-radius: 14px; overflow: hidden; color: #1b2350; box-shadow: 0 30px 50px -24px rgb(0 0 0 / .55); transform: rotateY(-8deg) rotateX(3deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pn:hover .pn-win { transform: none; }
.pn-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f1f3f7; border-bottom: 1px solid #e3e7f4; }
.pn-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dbef; } .pn-bar i:first-child { background: #ff8b00; }
.pn-bar span { margin-left: 8px; font: 500 .7rem ui-monospace, monospace; color: #6b7184; background: #fff; border-radius: 6px; padding: 3px 10px; flex: 1; }
.pn-search { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 9px 12px; border: 1.5px solid #253993; border-radius: 9px; font: 500 .82rem "Work Sans", system-ui, sans-serif; }
.pn-search .icon { width: 15px; height: 15px; color: #253993; }
.pn-caret { width: 1.5px; height: 15px; background: #253993; margin-left: -6px; animation: pnBlink 1s steps(1) infinite; }
@keyframes pnBlink { 50% { opacity: 0; } }
.pn-rows { display: grid; gap: 6px; padding: 0 12px 12px; }
.pn-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; padding: 7px 8px; border: 1px solid #eef1fb; border-radius: 9px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s, border-color .3s, background .3s; }
.pn-win.show .pn-row { opacity: 1; transform: none; }
.pn-win.show .pn-row:nth-child(2) { transition-delay: .12s; } .pn-win.show .pn-row:nth-child(3) { transition-delay: .24s; }
.pn-img { width: 36px; height: 30px; border-radius: 6px; background: #eef1fb url("parts/fuel-lift-pumps.jpg") center / cover; transition: box-shadow .3s; }
.pn-row:nth-child(2) .pn-img { background-image: url("parts/fuel-taps.jpg"); } .pn-row:nth-child(3) .pn-img { background-image: url("parts/carburetor.jpg"); }
.pn-l b { display: block; font-size: .78rem; } .pn-l small { font-size: .68rem; color: #6b7184; transition: color .3s, background .3s; border-radius: 4px; padding: 0 3px; margin-left: -3px; }
.pn-oem { font: 600 .64rem ui-monospace, monospace; color: #253993; background: #eef1fb; border-radius: 5px; padding: 3px 6px; white-space: nowrap; transition: background .3s, color .3s; }
.pn-add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #fff3e5; color: #ff8b00; font-weight: 700; font-size: .8rem; }
/* feature highlight */
.pn[data-hl="fit"] .pn-fit { background: #fff3e5; color: #c45f00; }
.pn[data-hl="oem"] .pn-oem { background: #ff8b00; color: #fff; }
.pn[data-hl="img"] .pn-img { box-shadow: 0 0 0 2px #ff8b00; }
@media (max-width: 900px) { .pn { grid-template-columns: 1fr; } .pn-win { transform: none; } }
@media (max-width: 560px) { .pn-feats { grid-template-columns: 1fr; } .pn-oem { display: none; } .pn-row { grid-template-columns: 36px minmax(0, 1fr) 22px; } }
@media (prefers-reduced-motion: reduce) { .pn-win, .pn-row { transition: none; } .pn-caret { animation: none; } }
/* more breathing room between systems */
.rt[data-view="list"] .rt-main { gap: 40px; }
.sw-sec + .sw-sec { margin-top: 0; }
@media (max-width: 560px) { .rt[data-view="list"] .rt-main { gap: 28px; } }
/* eye on parts without a photo */
.sw-item .sw-cam.nophoto { color: #b5bdd6; }
.sw-item .sw-cam.nophoto .icon { stroke-dasharray: 3 2; }
.rt-lb-ph { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 56px 28px; min-height: 320px; align-content: center; background: repeating-linear-gradient(135deg, #f6f7fb 0 12px, #f1f3f8 12px 24px); width: 100%; }
.rt-lb-ph > .ci { position: relative; zoom: 1; border-radius: 18px; }
.rt-lb-ph b { font-size: 1.2rem; color: var(--ink); }
.rt-lb-ph span { max-width: 42ch; color: var(--muted); font-size: .92rem; }
.rt-lb-phi { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: #253993; color: #fff; box-shadow: 0 0 0 6px rgb(37 57 147 / .12); }
.rt-lb-phi .icon { width: 36px; height: 36px; }
.rt-lb-phi .icon { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* extra spacing between systems + list rows; eye clearly visible on every part */
.rt[data-view="list"] .rt-main { gap: 64px; }
@media (max-width: 560px) { .rt[data-view="list"] .rt-main { gap: 40px; } }
.sw-list { gap: 10px 18px; }
.sw-item .sw-cam, .sw-item .sw-cam.nophoto { color: #253993; background: #eef1fb; border-color: #d5dbef; opacity: 1; }
.sw-item .sw-cam.nophoto .icon { stroke-dasharray: none; }
.sw-item .sw-cam.nophoto { color: #6b7184; background: #f4f5f9; }
/* one system per screen in the system-wise list */
@media (min-width: 900px) and (min-height: 600px) {
  .rt[data-view="list"] .sw-sec { min-height: calc(100vh - var(--header-h, 72px) - 110px); display: grid; grid-template-rows: auto 1fr; }
  .rt[data-view="list"] .sw-body { align-content: center; align-items: center; }
  .rt[data-view="list"] .rt-main { gap: 110px; }
  html:has(.rt[data-view="list"]) { scroll-snap-type: y proximity; }
}
.sw-sec { scroll-margin-top: calc(var(--header-h, 72px) + 84px); scroll-snap-align: start; }

/* ===== Quick parts finder: sourcing blueprint background ===== */
.qf-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #f4f6fc 0%, #eef1fb 45%, #f7f4ef 100%); }
.qf-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.qf-route path { animation: qfFlow 2.4s linear infinite; }
.qf-route path:nth-child(2) { animation-duration: 3.2s; stroke-opacity: .6; }
@keyframes qfFlow { to { stroke-dashoffset: -48; } }
.qf-n { fill: #fff; stroke: #ff8b00; stroke-width: 2; }
.qf-ni { fill: none; stroke: #253993; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qf-nodes g { animation: qfBob 4s ease-in-out infinite; transform-box: fill-box; }
.qf-nodes g:nth-child(2) { animation-delay: -1s; } .qf-nodes g:nth-child(3) { animation-delay: -2s; } .qf-nodes g:nth-child(4) { animation-delay: -3s; }
@keyframes qfBob { 50% { translate: 0 -5px; } }
.qf-band .finder { position: relative; box-shadow: 0 30px 60px -36px rgb(37 57 147 / .45), 0 0 0 1px rgb(37 57 147 / .06); }
.qf-band .finder::before { content: ""; position: absolute; inset: -14px; border: 1.5px dashed rgb(37 57 147 / .18); border-radius: 26px; z-index: -1; pointer-events: none; }
.qf-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; position: relative; max-width: 420px; }
.qf-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 2px dashed #ffcf99; }
.qf-steps li { position: relative; display: flex; gap: 14px; align-items: center; padding: 8px 12px 8px 0; border-radius: 12px; transition: background .25s, transform .25s; }
.qf-si { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #253993; border: 1.5px solid #d5dbef; box-shadow: 0 6px 14px -10px rgb(37 57 147 / .6); transition: background .25s, color .25s, border-color .25s; z-index: 1; }
.qf-si .icon { width: 20px; height: 20px; }
.qf-steps b { display: block; color: var(--ink); font-size: .95rem; }
.qf-steps small { color: var(--muted); font-size: .8rem; }
.qf-steps li.on .qf-si { background: #ff8b00; border-color: #ff8b00; color: #fff; }
.qf-steps li.done .qf-si { background: #253993; border-color: #253993; color: #fff; }
.qf-steps li.on { transform: translateX(4px); }
@media (max-width: 880px) { .qf-steps { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .qf-route path, .qf-nodes g { animation: none; } }
.qf-part .qf-dim { stroke: #ff8b00; stroke-opacity: .55; stroke-width: 1; }
.qf-part .qf-cl { stroke-dasharray: 10 4 2 4; stroke-opacity: .5; stroke-width: 1; }
.qf-part { animation: qfDraw 1.6s ease-out both; }
.qf-part:nth-child(1) path:first-child { transform-box: fill-box; transform-origin: center; animation: qfGear 30s linear infinite; }
@keyframes qfGear { to { transform: rotate(360deg); } }
@keyframes qfDraw { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qf-part, .qf-part path { animation: none !important; } }
/* system bar arrows */
.rt-sidewrap { position: relative; min-width: 0; }
.rt-arr { display: none; position: absolute; top: 50%; z-index: 7; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #253993; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -8px rgb(37 57 147 / .6); transition: background .2s, color .2s, opacity .2s; }
.rt-arr .icon { width: 16px; height: 16px; }
.rt-arr:hover:not(:disabled) { background: #253993; color: #fff; border-color: #253993; }
.rt-arr:disabled { opacity: .35; cursor: default; }
.rt-prev { left: -14px; } .rt-next { right: -14px; }
.rt[data-view="list"] .rt-sidewrap { position: sticky; top: calc(var(--header-h, 72px) + 8px); z-index: 6; }
.rt[data-view="list"] .rt-sidewrap .rt-side { position: static; padding-inline: 26px; scroll-padding-inline: 26px; }
.rt[data-view="list"] .rt-arr { display: grid; }
@media (max-width: 900px) { .rt-arr { display: grid; } .rt-prev { left: -6px; } .rt-next { right: -6px; } .rt-sidewrap .rt-side { padding-inline: 26px; } }
.rt-bar-t { display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem "Work Sans", system-ui, sans-serif; color: #253993; }
.rt-bar-t .icon { width: 18px; height: 18px; }
.pn-img { background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid #eef1fb; }
.pn-img.pn-ico { display: grid; place-items: center; background: #eef1fb; color: #253993; }
.pn-img.pn-ico .icon { width: 18px; height: 18px; }

/* ===== Mobile polish: comfortable tap targets and readable small text ===== */
@media (max-width: 760px) {
  .site-footer a, .crumbs a { display: inline-block; padding-block: 8px; }
  .cat-card .more, .cat-card .card-link { display: inline-block; padding-block: 8px; }
  .more-tag { min-height: 34px; padding-inline: 12px; }
  .btn-sm { min-height: 40px; }
  .addc { min-width: 32px; min-height: 32px; }
  .slider-dots button, .hero-dots button, [class*="dots"] > button { position: relative; }
  [class*="dots"] > button::after { content: ""; position: absolute; inset: -14px -6px; }
  small, .sw-ref, .pn-fit, .qbox, .vp-badge { font-size: max(11.5px, 1em); }
  .cat-card small, .tube-tags li { font-size: 12px; }
  .sw-item { min-height: 48px; }
  .sw-tick { width: 26px; height: 26px; }
  .sw-item .sw-cam { width: 34px; height: 34px; }
  .rt-arr { width: 38px; height: 38px; margin-top: -19px; }
  .sw-all, .rt-enq { min-height: 40px; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
}
@media (max-width: 760px) {
  .qf-bg .qf-route, .qf-bg .qf-nodes, .qf-bg .qf-parts { display: none; }
  .qf-band .finder::before { inset: -8px; }
}
@media (max-width: 960px) {
  .nav .nav-portal { display: flex; align-items: center; justify-content: center; margin-top: 12px; padding: .8em 1em !important; border-radius: 10px !important; background: #253993; color: #fff !important; font-weight: 700; border-bottom: 0 !important; }
}
/* brake icon: rotate the disc around its own hub on every browser (incl. iOS Safari) */
.br-disc { transform-box: view-box; transform-origin: 0 0; will-change: transform; }
.br-disc-vp { overflow: visible; }
/* play category icon animations on tap (touch screens have no hover) */
.cat-card.tap .br-disc { animation: brSpin 2s cubic-bezier(.3,0,.4,1) infinite !important; }
.cat-card.tap .br-caliper { animation: brClamp 2s ease-in-out infinite !important; }
.cat-card.tap .ci-brake { color: var(--accent); }
/* ===== Category icons: same animation on tap for touch screens ===== */
.cat-card .ci.ci-injector{background: var(--primary); width: 72px; height: 72px; overflow: hidden;}
.cat-card:hover .ci.ci-injector, .cat-card.tap .ci.ci-injector{background: var(--accent);}
.cat-card .ci.ci-injector{color: var(--primary);}
.cat-card:hover .ci.ci-injector, .cat-card.tap .ci.ci-injector{color: var(--accent);}
.cat-card .ci.ci-anim{background: var(--primary); width: 72px; height: 72px; overflow: hidden;}
.cat-card:hover .ci.ci-anim, .cat-card.tap .ci.ci-anim{background: var(--accent);}
.cat-card:hover .ci-bevel, .cat-card.tap .ci-bevel{color: var(--accent);}
.cat-card:hover .ci-piston, .cat-card.tap .ci-piston{color: var(--accent);}
.cat-card:hover .ci-hyd, .cat-card.tap .ci-hyd{color: var(--accent);}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .inj-body, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .inj-spray circle, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .bv-teeth-a, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .bv-teeth-b, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .ps-move, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .ps-rod, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .hyd-rod{animation: none;}
.cat-card:hover .ci-brake, .cat-card.tap .ci-brake{color: var(--accent);}
.cat-card:hover .ci-spark, .cat-card.tap .ci-spark{color: var(--accent);}
.cat-card:hover .ci-fan, .cat-card.tap .ci-fan{color: var(--accent);}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .fan-mask{animation: none;}
.cat-card:hover .ci-pto, .cat-card.tap .ci-pto{color: var(--accent);}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-spin, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-left, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-right{animation: none;}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .link-a, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .link-b{animation: none;}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-spin{animation: none;}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-left, .cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-right{animation: none !important;}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-band{animation: none; opacity: 0;}
.cat-card:not(:hover):not(.tap):not(:focus-within):not(:active) .pto-pin{animation: none; transform: none;}
.cat-card:hover .pto-left, .cat-card.tap .pto-left, .cat-card:hover .pto-right, .cat-card.tap .pto-right{animation: none !important; transform: none !important;}
.cat-card:hover .ci-link .link-a, .cat-card.tap .ci-link .link-a, .cat-card:focus-within .ci-link .link-a, .cat-card:active .ci-link .link-a{animation: linkInA 1.1s cubic-bezier(.3,.7,.2,1) both;}
.cat-card:hover .ci-link .link-b, .cat-card.tap .ci-link .link-b, .cat-card:focus-within .ci-link .link-b, .cat-card:active .ci-link .link-b{animation: linkInB 1.1s cubic-bezier(.3,.7,.2,1) both;}
@media (prefers-reduced-motion: reduce){.cat-card:hover .ci-link .link-a, .cat-card.tap .ci-link .link-a, .cat-card:hover .ci-link .link-b, .cat-card.tap .ci-link .link-b{animation: none;}
}
.page-hero.hero-backhoe::before { background-image: url("hero-backhoe.jpg"); background-position: right 35%; }
@media (max-width: 760px) { .page-hero.hero-backhoe::before { background-position: 40% center; } }
.page-hero.hero-backhoe::before { background-size: cover; background-position: right 40%; opacity: .38;
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, rgb(0 0 0 / .55) 50%, #000 70%); mask-image: linear-gradient(90deg, transparent 28%, rgb(0 0 0 / .55) 50%, #000 70%); }
@media (max-width: 760px) { .page-hero.hero-backhoe::before { background-position: 45% center; opacity: .26; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); } }
.page-hero.hero-backhoe::before { background-size: auto 118%; background-position: right 60%; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent 54%, rgb(0 0 0 / .6) 66%, #000 80%); mask-image: linear-gradient(90deg, transparent 54%, rgb(0 0 0 / .6) 66%, #000 80%); }
@media (max-width: 760px) { .page-hero.hero-backhoe::before { background-size: cover; background-position: 40% center; opacity: .26; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); } }
.page-hero.hero-backhoe::before { background-image: url("hero-backhoe.jpg?v=2"); background-size: auto 112%; background-position: right 55%; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 74%); mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 74%); }
@media (max-width: 760px) { .page-hero.hero-backhoe::before { background-size: cover; background-position: 55% center; } }
/* backhoe banner: keep the photo still, blended and placed as shown */
.page-hero.hero-backhoe::before { animation: none; transform: none; background-size: auto 115%; background-position: right 60%; }
@media (min-width: 1300px) { .page-hero.hero-backhoe::before { background-size: auto 130%; background-position: right 62%; } }
/* backhoe banner: static photo (no zoom movement) */
.page-hero.hero-backhoe::before { animation: none !important; transform: none !important; }
/* agri banner: static photo too */
.page-hero.hero-agri::before { animation: none !important; transform: none !important; }

/* system jump bar: only shows while the page is being scrolled */
.rt[data-view="list"] .rt-sidewrap { transition: transform .35s ease, opacity .3s ease; }
.rt[data-view="list"] .rt-sidewrap.is-idle { transform: translateY(-14px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rt[data-view="list"] .rt-sidewrap { transition: opacity .2s; } .rt[data-view="list"] .rt-sidewrap.is-idle { transform: none; } }
/* diesel banner: static engine-line photo, blended on the right */
.page-hero.hero-diesel::before { background-image: url("hero-diesel.jpg?v=1"); background-size: auto 120%; background-position: right 55%; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 74%); mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 74%);
  animation: none !important; transform: none !important; }
@media (min-width: 1300px) { .page-hero.hero-diesel::before { background-size: auto 135%; background-position: right 60%; } }
@media (max-width: 760px) { .page-hero.hero-diesel::before { background-size: cover; background-position: 30% center; opacity: .26; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); } }
@media (min-width: 761px) { .page-hero.hero-diesel::before { background-size: auto 160%; background-position: right 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .55) 64%, #000 80%); mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .55) 64%, #000 80%); } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-diesel::before { background-size: auto 125%; background-position: right 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%); mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%); } }
/* backhoe banner: same soft merge as the diesel banner (no visible photo edge) */
@media (min-width: 761px) { .page-hero.hero-backhoe::before { background-size: auto 165% !important; background-position: right 62% !important; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 46%, rgb(0 0 0 / .55) 62%, #000 80%) !important; mask-image: linear-gradient(90deg, transparent 46%, rgb(0 0 0 / .55) 62%, #000 80%) !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-backhoe::before { background-size: auto 130% !important; background-position: right 60% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%) !important; mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%) !important; } }
/* agri banner: same soft merge as the diesel banner (no visible photo edge) */
@media (min-width: 761px) { .page-hero.hero-agri::before { background-size: auto 165% !important; background-position: right 70% !important; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 46%, rgb(0 0 0 / .55) 62%, #000 80%) !important; mask-image: linear-gradient(90deg, transparent 46%, rgb(0 0 0 / .55) 62%, #000 80%) !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-agri::before { background-size: auto 130% !important; background-position: right 65% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%) !important; mask-image: linear-gradient(90deg, transparent 38%, rgb(0 0 0 / .55) 54%, #000 72%) !important; } }

/* interactive make chips in the parts banners */
.hero-makes { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-makes .make { position: relative; overflow: hidden; border: 1px solid rgb(255 255 255 / .18); cursor: pointer; font: 600 .8rem/1 "Work Sans", system-ui, sans-serif; letter-spacing: .01em; padding: .62em .9em; border-radius: 8px;
  background: rgb(255 255 255 / .1); color: #fff; backdrop-filter: blur(4px); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s, color .25s;
  animation: make-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.hero-makes .make::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; }
.hero-makes .make:hover, .hero-makes .make:focus-visible { transform: translateY(-3px); background: rgb(255 255 255 / .2); border-color: #ff8b00; box-shadow: 0 10px 22px -10px rgb(255 139 0 / .7); outline: none; }
.hero-makes .make:hover::after { transform: translateX(120%); }
.hero-makes .make:active { transform: translateY(-1px) scale(.97); }
.hero-makes .make[aria-pressed="true"] { background: #ff8b00; border-color: #ff8b00; color: #1b2350; box-shadow: 0 10px 24px -10px rgb(255 139 0 / .9); }
.hero-makes .make[aria-pressed="true"]::before { content: "✓ "; }
.hero-makes.has-pick .make[aria-pressed="false"] { opacity: .6; }
.hero-makes.has-pick .make[aria-pressed="false"]:hover { opacity: 1; }
@keyframes make-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.make-pick { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16);
  color: #fff; font-size: .9rem; max-width: 640px; animation: make-in .35s ease both; }
.make-pick b { color: #ffb24d; }
.make-pick a, .make-pick button { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem "Work Sans", system-ui, sans-serif; color: #fff; text-decoration: none; padding: .45em .8em; border-radius: 7px; border: 1px solid rgb(255 255 255 / .3); background: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.make-pick a:hover, .make-pick button:hover { background: rgb(255 255 255 / .15); border-color: #fff; }
.make-pick .mp-enq { background: #ff8b00; border-color: #ff8b00; color: #1b2350; }
.make-pick .mp-enq:hover { background: #ffa033; border-color: #ffa033; }
.make-pick .mp-x { margin-left: auto; padding: .35em .55em; border: 0; opacity: .75; }
.make-pick .icon { width: 15px; height: 15px; }
@media (max-width: 600px) { .make-pick { font-size: .85rem; } .make-pick .mp-x { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-makes .make, .make-pick { animation: none; } .hero-makes .make::after { display: none; } }
.make-pick { position: relative; padding-right: 44px; }
.make-pick .mp-x { position: absolute; top: 8px; right: 8px; margin: 0 !important; }

/* finder band: scale the drawings with the width so they stay in view on smaller laptops */
.qf-band { background-image: linear-gradient(rgb(37 57 147 / .1) 1px, transparent 1px), linear-gradient(90deg, rgb(37 57 147 / .1) 1px, transparent 1px),
  linear-gradient(rgb(37 57 147 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(37 57 147 / .07) 1px, transparent 1px),
  linear-gradient(115deg, #f4f6fc 0%, #eef1fb 45%, #f7f4ef 100%);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px, auto; }
.qf-bg > rect { display: none; }
@media (min-width: 761px) {
  .qf-bg { inset: auto 0 auto 0; top: 50%; height: auto; aspect-ratio: 1440 / 640; transform: translateY(-50%); }
}
@media (min-width: 761px) and (max-width: 1599px) {
  .qf-band { padding-bottom: calc(var(--qf-pad, 0px) + clamp(70px, 9vw, 130px)); }
  .qf-bg { top: auto; bottom: 0; transform: none; }
}
/* contact banner: keyboard photo blended on the right, static */
.page-hero.hero-contact::before { background: url("hero-contact.jpg?v=1") right 50% / auto 125% no-repeat !important; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 60%, #000 78%); mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 60%, #000 78%);
  animation: none !important; transform: none !important; mix-blend-mode: luminosity; }
@media (min-width: 1300px) { .page-hero.hero-contact::before { background-size: auto 150% !important; } }
@media (max-width: 760px) { .page-hero.hero-contact::before { background-size: cover !important; background-position: 70% center !important; opacity: .28; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%); } }
@media (min-width: 761px) { .page-hero.hero-contact::before { opacity: .38;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-contact::before { background-size: auto 140% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; } }
/* about banner: factory photo blended on the right, static */
.page-hero.hero-about::before { background: url("hero-about.jpg?v=1") right 55% / auto 125% no-repeat !important; opacity: .42;
  animation: none !important; transform: none !important; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; }
@media (min-width: 1300px) { .page-hero.hero-about::before { background-size: auto 150% !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-about::before { background-size: auto 135% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; } }
@media (max-width: 760px) { .page-hero.hero-about::before { background-size: cover !important; background-position: 60% center !important; opacity: .28; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; } }

/* ===== What Drives Us: interactive cards ===== */
#purpose { position: relative; overflow: hidden; }
#purpose::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(600px 260px at var(--px, 50%) 70%, rgb(37 57 147 / .07), transparent 70%); transition: background .2s; }
#purpose .wrap { position: relative; z-index: 1; }
#purpose .pillars { counter-reset: pl; perspective: 1200px; position: relative; }
#purpose .pillar { position: relative; overflow: hidden; cursor: default; isolation: isolate; counter-increment: pl;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  opacity: 0; translate: 0 26px; }
#purpose .pillar.in { opacity: 1; translate: 0 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .6s ease var(--d, 0s), translate .6s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
#purpose .pillar::before { content: counter(pl, decimal-leading-zero); position: absolute; right: 18px; top: 10px; z-index: -1;
  font: 700 4.2rem/1 "Lora", serif; color: rgb(37 57 147 / .06); transition: color .35s, transform .35s; }
#purpose .pillar::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #253993, #ff8b00);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#purpose .pillar > .icon { width: 52px; height: 52px; padding: 12px; border-radius: 14px; background: #eef1fb; color: #253993; box-sizing: border-box;
  transition: background .35s, color .35s, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
#purpose .pillar h3 { transition: color .3s; }
#purpose .pillar .pl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 .82rem "Work Sans", system-ui, sans-serif; color: #ff8b00;
  opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; text-decoration: none; }
#purpose .pillar .pl-more .icon { width: 15px; height: 15px; }
#purpose .pillar:is(:hover, :focus-within, .tap) { --ty: -8px; border-color: rgb(37 57 147 / .25); box-shadow: 0 26px 50px -26px rgb(37 57 147 / .55); }
#purpose .pillar:is(:hover, :focus-within, .tap)::after { transform: scaleX(1); }
#purpose .pillar:is(:hover, :focus-within, .tap)::before { color: rgb(255 139 0 / .14); transform: translateY(-4px); }
#purpose .pillar:is(:hover, :focus-within, .tap) > .icon { background: #253993; color: #fff; box-shadow: 0 10px 22px -10px rgb(37 57 147 / .8); }
#purpose .pillar:is(:hover, :focus-within, .tap) h3 { color: #253993; }
#purpose .pillar:is(:hover, :focus-within, .tap) .pl-more { opacity: 1; transform: none; }
#purpose .pillar:nth-child(1):is(:hover, :focus-within, .tap) > .icon { transform: rotate(144deg) scale(1.05); }
#purpose .pillar:nth-child(2):is(:hover, :focus-within, .tap) > .icon { animation: pl-blink 1.6s ease-in-out infinite; }
#purpose .pillar:nth-child(3):is(:hover, :focus-within, .tap) > .icon { animation: pl-pulse 1.4s ease-out infinite; }
@keyframes pl-blink { 0%, 40%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.15); } 50% { transform: scaleY(1); } }
@keyframes pl-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 139 0 / .55); } 100% { box-shadow: 0 0 0 16px rgb(255 139 0 / 0); } }
@media (hover: none) { #purpose .pillar .pl-more { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #purpose .pillar { opacity: 1; translate: none; transform: none !important; } #purpose .pillar > .icon { animation: none !important; transform: none !important; } }

/* ===== About > Why Choose Us: interactive grid ===== */
#why .features { position: relative; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
#why .feature { position: relative; isolation: isolate; overflow: hidden; cursor: default; transition: background .35s;
  opacity: 0; translate: 0 18px; }
#why .feature.in { opacity: 1; translate: 0 0; transition: background .35s, opacity .55s ease var(--d, 0s), translate .55s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
#why .feature::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 139 0 / .12), transparent 65%); }
#why .feature::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #ff8b00, #253993);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#why .feature > .icon { width: 50px; height: 50px; padding: 12px; box-sizing: border-box; border-radius: 13px; background: #fff4e6; color: #ff8b00;
  transition: background .35s, color .35s, box-shadow .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
#why .feature h3 { transition: color .3s, transform .35s; }
#why .feature:is(:hover, :focus-within, .tap) { background: #fbfcff; }
#why .feature:is(:hover, :focus-within, .tap)::before { opacity: 1; }
#why .feature:is(:hover, :focus-within, .tap)::after { transform: scaleX(1); }
#why .feature:is(:hover, :focus-within, .tap) > .icon { background: #ff8b00; color: #fff; box-shadow: 0 10px 22px -10px rgb(255 139 0 / .9); }
#why .feature:is(:hover, :focus-within, .tap) h3 { color: #253993; transform: translateX(3px); }
#why .feature:nth-child(1):is(:hover, :focus-within, .tap) > .icon { transform: rotate(180deg); }
#why .feature:nth-child(2):is(:hover, :focus-within, .tap) > .icon { animation: wy-bounce .9s cubic-bezier(.3,1.6,.5,1) infinite alternate; }
#why .feature:nth-child(3):is(:hover, :focus-within, .tap) > .icon { animation: wy-swing 1.1s ease-in-out infinite; transform-origin: 30% 30%; }
#why .feature:nth-child(4):is(:hover, :focus-within, .tap) > .icon { animation: wy-wobble .9s ease-in-out; }
#why .feature:nth-child(5):is(:hover, :focus-within, .tap) > .icon { animation: wy-pulse 1.3s ease-out infinite; }
#why .feature:nth-child(6):is(:hover, :focus-within, .tap) > .icon { transform: translateY(-4px) scale(1.06); }
@keyframes wy-bounce { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes wy-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
@keyframes wy-wobble { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-10deg) scale(1.08); } 50% { transform: rotate(8deg) scale(1.08); } 75% { transform: rotate(-4deg); } }
@keyframes wy-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 139 0 / .55); } 100% { box-shadow: 0 0 0 16px rgb(255 139 0 / 0); } }
#why .feature .wy-go { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; font: 600 .82rem "Work Sans", system-ui, sans-serif; color: #253993; text-decoration: none; }
#why .feature .wy-go .icon { width: 15px; height: 15px; transition: transform .25s; }
#why .feature .wy-go:hover .icon { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { #why .feature { opacity: 1; translate: none; } #why .feature > .icon { animation: none !important; transform: none !important; } }

/* ===== About intro: redesigned left column ===== */
.ab-intro { display: grid; gap: 22px; }
.ab-intro h2 em { font-style: normal; background: linear-gradient(90deg, #253993, #4a5fc4); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
.ab-intro h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; border-radius: 3px; background: rgb(255 139 0 / .35); z-index: -1; }
.ab-iso { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(120deg, #253993, #1b2b78); color: #fff; box-shadow: 0 24px 44px -28px rgb(37 57 147 / .8); }
.ab-iso::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; border: 18px solid rgb(255 255 255 / .06); }
.ab-seal { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #ff8b00; color: #1b2350; }
.ab-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ab-spin 22s linear infinite; }
.ab-seal text { font: 700 8.6px "Work Sans", system-ui, sans-serif; letter-spacing: 1.3px; fill: #1b2350; }
.ab-seal b { position: relative; font: 800 .82rem/1.05 "Lora", serif; text-align: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #253993; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-iso-t b { display: block; font-size: 1.05rem; }
.ab-iso-t small { display: block; margin-top: 3px; color: rgb(255 255 255 / .75); font-size: .85rem; line-height: 1.45; }
.ab-ranges { display: grid; gap: 8px; }
.ab-ranges > small, .ab-cats small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ab-range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.ab-range b { display: block; font-size: .98rem; } .ab-range small { color: var(--muted); font-size: .8rem; }
.ab-ri { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #eef1fb; color: #253993; transition: background .3s, color .3s; }
.ab-ri .icon { width: 26px; height: 26px; }
.ab-range > .icon { width: 18px; height: 18px; color: #ff8b00; opacity: .5; transition: transform .3s, opacity .3s; }
.ab-range:hover, .ab-range:focus-visible { transform: translateX(6px); border-color: rgb(37 57 147 / .3); box-shadow: 0 16px 30px -22px rgb(37 57 147 / .7); outline: none; }
.ab-range:hover .ab-ri, .ab-range:focus-visible .ab-ri { background: #253993; color: #fff; }
.ab-range:hover > .icon, .ab-range:focus-visible > .icon { opacity: 1; transform: translateX(4px); }
.ab-points { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ab-points span { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: #3a4252; }
.ab-points .icon { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #1aa260; color: #fff; stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .ab-seal svg { animation: none; } }

/* ===== About: rewritten prose ===== */
.ab-prose h3 { font: 700 1.35rem/1.25 "Lora", serif; color: #1b2350; margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.ab-prose h3::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: #ff8b00; }
.ab-prose .ab-lead { font-size: 1.08rem; color: var(--ink); }
.ab-eq { display: grid; gap: 12px; margin: 4px 0 6px; }
.ab-eq-card { display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .3s; }
.ab-eq-card:hover { border-color: rgb(37 57 147 / .3); box-shadow: 0 18px 36px -26px rgb(37 57 147 / .7); transform: translateY(-2px); }
.ab-eq-card:hover .ab-ri { background: #253993; color: #fff; }
.ab-eq-h { display: flex; align-items: center; gap: 14px; }
.ab-eq-h b { display: block; font-size: 1.05rem; color: #1b2350; } .ab-eq-h small { color: var(--muted); font-size: .82rem; }
.ab-eq-card p { margin: 0; font-size: .95rem; color: var(--muted); }
.ab-eq-mk { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-eq-mk span { font: 600 .78rem "Work Sans", system-ui, sans-serif; padding: .4em .75em; border-radius: 999px; background: #eef1fb; color: #253993; }
.ab-eq-card > a { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font: 600 .85rem "Work Sans", system-ui, sans-serif; color: #ff8b00; text-decoration: none; }
.ab-eq-card > a .icon { width: 15px; height: 15px; transition: transform .25s; } .ab-eq-card > a:hover .icon { transform: translateX(4px); }
.ab-prose .ab-note { font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }

/* ===== About: equipment slider ===== */
.ab-eqs { position: relative; display: grid; gap: 12px; margin: 4px 0 6px; }
.ab-eqs-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: #eef1fb; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ab-eqs-tabs::-webkit-scrollbar { display: none; }
.ab-eqs-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: 600 .85rem "Work Sans", system-ui, sans-serif; color: #4a5068; padding: .55em .95em; border-radius: 10px; transition: background .25s, color .25s, box-shadow .25s; }
.ab-eqs-tabs button .icon { width: 18px; height: 18px; }
.ab-eqs-tabs button[aria-selected="true"] { background: #fff; color: #253993; box-shadow: 0 6px 14px -8px rgb(37 57 147 / .5); }
.ab-eqs .ab-eq { display: flex; gap: 14px; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 16px; }
.ab-eqs .ab-eq::-webkit-scrollbar { display: none; }
.ab-eqs .ab-eq-card { flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; padding: 0 0 20px; gap: 12px; transform: none !important; }
.ab-eqs .ab-eq-card > *:not(.ab-eq-img) { margin-inline: 20px; }
.ab-eq-img { height: 170px; background: #1b2b78 center 60% / cover no-repeat; position: relative; }
.ab-eq-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(27 43 120 / .05), rgb(27 43 120 / .55)); }
.ab-eq-img i { position: absolute; left: 20px; bottom: 14px; z-index: 1; font: 700 .72rem "Work Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgb(255 139 0 / .95); padding: .35em .7em; border-radius: 6px; font-style: normal; }
.ab-eq-card:nth-child(1) .ab-eq-img { background-image: url("hero-agri-tractor.jpg"); }
.ab-eq-card:nth-child(2) .ab-eq-img { background-image: url("hero-backhoe.jpg?v=2"); background-position: right 60%; }
.ab-eq-card:nth-child(3) .ab-eq-img { background-image: url("hero-diesel.jpg?v=1"); }
.ab-eqs-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ab-eqs-dots { display: flex; gap: 6px; }
.ab-eqs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #cfd5ea; cursor: pointer; transition: width .3s, background .3s; position: relative; }
.ab-eqs-dots button::after { content: ""; position: absolute; inset: -10px -4px; }
.ab-eqs-dots button[aria-current="true"] { width: 26px; background: #ff8b00; }
.ab-eqs-arrows { display: flex; gap: 8px; }
.ab-eqs-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #253993; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.ab-eqs-arrows button .icon { width: 16px; height: 16px; }
.ab-eqs-arrows button:hover:not(:disabled) { background: #253993; color: #fff; border-color: #253993; }
.ab-eqs-arrows button:disabled { opacity: .35; cursor: default; }
.ab-eqs-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #ff8b00; transform-origin: left; transform: scaleX(0); z-index: 2; }
@media (max-width: 560px) { .ab-eq-img { height: 130px; } .ab-eqs-tabs button span { display: none; } .ab-eqs-tabs button { padding: .6em .8em; } }

/* ===== About: part categories by equipment ===== */
.ab-cats2 { display: grid; gap: 12px; }
.ab-cg { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ab-cg-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; color: #1b2350; width: fit-content; }
.ab-cg-h > .icon { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #253993; color: #fff; box-sizing: border-box; }
.ab-cg-h b { font-size: 1rem; } .ab-cg-h small { color: var(--muted); font-size: .8rem; }
.ab-cg-h:hover b { color: #253993; text-decoration: underline; text-decoration-color: #ff8b00; text-underline-offset: 3px; }
.ab-cg > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-cg > div span { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem "Work Sans", system-ui, sans-serif; padding: .45em .8em .45em .6em; border-radius: 999px;
  background: #fff4e6; color: #b35f00; border: 1px solid #ffe0b8; transition: background .2s, color .2s, transform .2s; }
.ab-cg > div span .icon { width: 15px; height: 15px; }
.ab-cg > div span:hover { background: #ff8b00; color: #fff; transform: translateY(-2px); }
/* About: single column after removing the left intro */
.ab-solo { max-width: 920px; }
.ab-solo .ab-prose { display: grid; gap: 14px; }
@media (min-width: 900px) { .ab-solo .ab-eq-img { height: 220px; } }
.ab-solo { margin-inline: auto; } .ab-solo .ab-prose { max-width: none; width: 100%; }
/* global presence banner: glass globe, static, blended right (kept in colour) */
.page-hero.hero-global::before { background: url("hero-global.jpg?v=1") right 50% / auto 120% no-repeat !important; opacity: .7;
  animation: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, rgb(0 0 0 / .55) 58%, #000 76%) !important; mask-image: linear-gradient(90deg, transparent 42%, rgb(0 0 0 / .55) 58%, #000 76%) !important; }
@media (min-width: 1300px) { .page-hero.hero-global::before { background-size: auto 150% !important; background-position: right 45% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .55) 64%, #000 80%) !important; mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .55) 64%, #000 80%) !important; } }
@media (max-width: 760px) { .page-hero.hero-global::before { background-size: cover !important; background-position: 75% center !important; opacity: .35; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; } }
/* quality banner: measuring-lab photo across the banner, static, behind the text panels */
.page-hero.hero-quality::before { background: url("hero-quality.jpg?v=1") center 40% / cover no-repeat !important; opacity: .3;
  animation: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), rgb(0 0 0 / .7) 45%, #000 75%) !important; mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), rgb(0 0 0 / .7) 45%, #000 75%) !important; }
@media (max-width: 760px) { .page-hero.hero-quality::before { background-position: 75% center !important; opacity: .24; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; } }
/* quality: glance list now sits under the "Quality built in" heading (light background) */
.q-hero { grid-template-columns: 1fr !important; }
.q-glance-in { margin-top: 22px; background: linear-gradient(135deg, #253993, #1b2b78); border: 0; box-shadow: 0 24px 44px -28px rgb(37 57 147 / .8); backdrop-filter: none; }
.q-glance-in li { transition: background .25s, transform .25s; }
.q-glance-in li:hover { background: rgb(255 255 255 / .1); transform: translateX(4px); }
/* quality banner: right-side blended placement, same as About / Global Presence */
.page-hero.hero-quality::before { background: url("hero-quality.jpg?v=1") right 45% / auto 125% no-repeat !important; opacity: .45; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; }
@media (min-width: 1300px) { .page-hero.hero-quality::before { background-size: auto 150% !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-quality::before { background-size: auto 135% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; } }
@media (max-width: 760px) { .page-hero.hero-quality::before { background-size: cover !important; background-position: 80% center !important; opacity: .28;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; } }
/* quality banner: frame shifted lower (shows probe tip and part) */
.page-hero.hero-quality::before { background-position: right 80% !important; }
@media (max-width: 760px) { .page-hero.hero-quality::before { background-position: 80% 75% !important; } }
/* quality intro: centre the two columns against each other */
.split:has(.q-glance-in) { align-items: center; }
.split:has(.q-glance-in) > .sticky { position: static; }

/* ===== Register page ===== */
.rg-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rg-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h, 72px) + 24px); }
.rg-perks { list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px; border-radius: 16px; background: linear-gradient(135deg, #253993, #1b2b78); box-shadow: 0 24px 44px -28px rgb(37 57 147 / .8); }
.rg-perks li { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; transition: background .25s, transform .25s; }
.rg-perks li:hover { background: rgb(255 255 255 / .1); transform: translateX(4px); }
.rg-perks .icon { width: 42px; height: 42px; padding: 10px; border-radius: 10px; background: #ff8b00; color: #fff; flex: none; box-sizing: border-box; }
.rg-perks b { display: block; color: #fff; } .rg-perks small { color: rgb(255 255 255 / .72); font-size: .86rem; }
.rg-have { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--muted); font-size: .92rem; }
.rg-form .req { color: #e5484d; }
.rg-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.rg-chips legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.rg-chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chips label { position: relative; cursor: pointer; }
.rg-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rg-chips label span { display: inline-flex; align-items: center; gap: 7px; padding: .55em .95em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font: 600 .85rem "Work Sans", system-ui, sans-serif; color: #3a4252; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.rg-chips label span .icon { width: 18px; height: 18px; }
.rg-chips label:hover span { border-color: #253993; transform: translateY(-1px); }
.rg-chips input:checked + span { background: #253993; border-color: #253993; color: #fff; }
.rg-chips input:focus-visible + span { outline: 2px solid #ff8b00; outline-offset: 2px; }
.rg-chips.invalid label span { border-color: #e5484d; }
.rg-form .hint { color: var(--muted); font-size: .78rem; }
.rg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 880px) { .rg-grid { grid-template-columns: 1fr; } .rg-side { position: static; } }
@media (max-width: 880px) { .rg-form { order: -1; } }
.rg-grid .field-row { align-items: start; }

/* ===== Quality intro: QMS cycle background ===== */
.qms-sec { position: relative; overflow: hidden; isolation: isolate; }
.qms-sec > .wrap { position: relative; z-index: 1; }
.qms-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.qms-bg .qb-n { fill: #fff; stroke: #253993; stroke-opacity: .35; stroke-width: 2; }
.qms-bg .qb-num { font: 700 13px "Work Sans", system-ui, sans-serif; fill: #253993; fill-opacity: .7; }
.qms-bg .qb-lbl { font: 700 13px "Work Sans", system-ui, sans-serif; letter-spacing: 2.5px; fill: #253993; fill-opacity: .4; }
.qms-bg .qb-c1 { font: 700 30px "Lora", serif; fill: #253993; fill-opacity: .55; }
.qms-bg .qb-c2 { font: 600 11px "Work Sans", system-ui, sans-serif; letter-spacing: 1.5px; fill: #ff8b00; fill-opacity: .8; }
.qms-bg .qb-mono { font: 600 12px ui-monospace, monospace; fill: #253993; fill-opacity: .45; stroke: none; }
.qms-bg .qb-spin { animation: qb-rot 60s linear infinite; }
.qms-bg .qb-arc path { animation: qb-flow 2.4s linear infinite; }
.qms-bg .qb-node .qb-n { animation: qb-glow 3.6s ease-in-out infinite; animation-delay: inherit; }
@keyframes qb-rot { to { transform: rotate(360deg); } }
@keyframes qb-flow { to { stroke-dashoffset: -24; } }
@keyframes qb-glow { 0%, 70%, 100% { stroke-opacity: .35; fill: #fff; } 80% { stroke-opacity: 1; fill: #fff4e6; stroke: #ff8b00; } }
@media (max-width: 880px) { .qms-bg .qb-ring { opacity: .45; transform: translate(-560px, 140px); } .qms-bg .qb-dim { display: none; } }
@media (prefers-reduced-motion: reduce) { .qms-bg * { animation: none !important; } }
/* keep the QMS ring clear of the text: push it to the right edge and soften it */
.qms-bg .qb-ring { transform: translate(250px, 0); opacity: .55; }
@media (max-width: 1500px) { .qms-bg .qb-ring { transform: translate(300px, 10px) scale(.95); transform-origin: 1150px 330px; opacity: .45; } }
@media (max-width: 880px) { .qms-bg .qb-ring { transform: translate(-80px, 180px) scale(.9); opacity: .3; } }
/* frosted panel so the text reads cleanly over the QMS cycle */
.qms-sec .split > .prose { position: relative; padding: clamp(18px, 2.4vw, 30px); border-radius: 18px; background: rgb(255 255 255 / .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgb(37 57 147 / .1); box-shadow: 0 24px 50px -36px rgb(37 57 147 / .5); }
.qms-sec .split > .prose::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: linear-gradient(#253993, #ff8b00); }
/* register banner: keyboard photo, same placement as About / Contact */
.page-hero.hero-register::before { background: url("hero-register.jpg?v=1") right 55% / auto 125% no-repeat !important; opacity: .42; mix-blend-mode: luminosity;
  animation: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .5) 64%, #000 82%) !important; }
@media (min-width: 1300px) { .page-hero.hero-register::before { background-size: auto 150% !important; } }
@media (min-width: 761px) and (max-width: 1299px) { .page-hero.hero-register::before { background-size: auto 135% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; mask-image: linear-gradient(90deg, transparent 40%, rgb(0 0 0 / .5) 56%, #000 76%) !important; } }
@media (max-width: 760px) { .page-hero.hero-register::before { background-size: cover !important; background-position: 60% center !important; opacity: .28; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .4), #000 70%) !important; } }

/* ===== QMS section — alternate design: process track instead of the cut-off ring ===== */
.qms-bg .qb-ring { display: none !important; }
.qms-sec { background: radial-gradient(900px 420px at 85% 10%, rgb(37 57 147 / .06), transparent 70%), radial-gradient(700px 360px at 5% 100%, rgb(255 139 0 / .07), transparent 70%); }
.qms-sec::after { content: "QMS"; position: absolute; right: 3%; top: 4%; z-index: 0; pointer-events: none;
  font: 700 clamp(7rem, 16vw, 15rem)/1 "Lora", serif; color: transparent; -webkit-text-stroke: 1.5px rgb(37 57 147 / .08); letter-spacing: .02em; }
.qms-flow-wrap { position: relative; z-index: 1; margin-top: clamp(36px, 5vw, 64px); }
.qms-flow { list-style: none; margin: 0; padding: 22px 10px 6px; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; counter-reset: none; }
.qms-flow::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 49px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #ffb35c 0 10px, transparent 10px 18px); background-size: 36px 3px; animation: qf-run 1.6s linear infinite; }
.qms-flow::after { content: ""; position: absolute; left: calc(100% / 12); top: 49px; height: 3px; border-radius: 3px; width: 0; background: linear-gradient(90deg, #253993, #ff8b00);
  transition: width 1.8s cubic-bezier(.2,.8,.2,1); }
.qms-flow.in::after { width: calc(100% - 100% / 6); }
@keyframes qf-run { to { background-position: 36px 0; } }
.qms-flow li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; z-index: 1;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k) * .15s); }
.qms-flow.in li { opacity: 1; transform: none; }
.qf-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #253993; border: 2px solid rgb(37 57 147 / .18);
  box-shadow: 0 12px 26px -16px rgb(37 57 147 / .7); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.qf-dot .icon { width: 24px; height: 24px; }
.qms-flow li:hover .qf-dot, .qms-flow li.on .qf-dot { background: #253993; color: #fff; border-color: #253993; transform: translateY(-4px); }
.qms-flow li.on .qf-dot { box-shadow: 0 0 0 7px rgb(255 139 0 / .18), 0 12px 26px -14px rgb(37 57 147 / .8); }
.qms-flow b { font: 700 .72rem "Work Sans", system-ui, sans-serif; letter-spacing: .14em; color: #ff8b00; margin-top: 4px; }
.qms-flow small { font: 700 .95rem "Work Sans", system-ui, sans-serif; color: #1b2350; }
@media (max-width: 720px) {
  .qms-flow { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .qms-flow::before, .qms-flow::after { display: none; }
  .qms-sec::after { font-size: 6rem; top: auto; bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) { .qms-flow::before { animation: none; } .qms-flow li { opacity: 1; transform: none; transition: none; } }

/* ===== QMS section: back to the ring design, now fully visible ===== */
.qms-sec { background: none; }
.qms-sec::after { content: none; }
.qms-ring { position: absolute; z-index: 0; pointer-events: none; top: 50%; right: max(12px, calc((100vw - 1500px) / 2 - 200px));
  width: clamp(320px, 30vw, 500px); height: auto; transform: translateY(-50%); opacity: .6; overflow: visible; }
.qms-ring .qb-n { fill: #fff; stroke: #253993; stroke-opacity: .35; stroke-width: 2; }
.qms-ring .qb-num { font: 700 13px "Work Sans", system-ui, sans-serif; fill: #253993; fill-opacity: .7; }
.qms-ring .qb-lbl { font: 700 13px "Work Sans", system-ui, sans-serif; letter-spacing: 2.5px; fill: #253993; fill-opacity: .45; }
.qms-ring .qb-c1 { font: 700 30px "Lora", serif; fill: #253993; fill-opacity: .55; }
.qms-ring .qb-c2 { font: 600 11px "Work Sans", system-ui, sans-serif; letter-spacing: 1.5px; fill: #ff8b00; fill-opacity: .85; }
.qms-ring .qb-spin { animation: qb-rot 60s linear infinite; }
.qms-ring .qb-arc path { animation: qb-flow 2.4s linear infinite; }
.qms-ring .qb-node .qb-n { animation: qb-glow 3.6s ease-in-out infinite; animation-delay: inherit; }
@media (min-width: 1700px) { .qms-ring { opacity: .8; } }
@media (max-width: 880px) { .qms-ring { top: auto; bottom: 10px; right: 50%; transform: translateX(50%); width: min(92vw, 380px); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .qms-ring * { animation: none !important; } }
/* QMS ring: sit fully in the free space to the right of the content on wide screens;
   on narrower screens show it as its own centred block under the text */
.qms-ring { right: 8px; width: calc((100vw - 1180px) / 2 - 24px); max-width: 520px; opacity: .85; }
@media (max-width: 1699px) {
  .qms-ring { position: relative; display: block; top: auto; right: auto; transform: none; margin: clamp(28px, 4vw, 48px) auto 0;
    width: min(440px, 86vw); max-width: none; opacity: .9; z-index: 1; }
}
@media (max-width: 1699px) { .qms-sec { display: flex; flex-direction: column; } .qms-sec > .wrap { width: 100%; } .qms-ring { order: 2; } }
@media (max-width: 600px) { .qms-ring { width: 80vw; } }

/* QMS ring v3: bigger, filled disc, tucked under / beside the text panel */
.qms-sec .split > .prose { z-index: 2; }
.qms-ring { opacity: 1 !important; filter: drop-shadow(0 30px 50px rgb(37 57 147 / .12)); }
.qms-ring .qb-lbl { fill-opacity: .6; } .qms-ring .qb-c1 { fill-opacity: .8; }
/* wide screens: ring sits beside the panel, its left edge slipping under it */
@media (min-width: 1650px) {
  .qms-sec { --rw: min(700px, calc((100vw - 1180px) / 2 + 224px)); min-height: calc(var(--rw) * 1.02 + 80px); display: flex; align-items: center; }
  .qms-ring { position: absolute !important; top: 50% !important; right: auto !important; left: calc(50% + 590px - 240px) !important;
    width: var(--rw) !important; max-width: none !important; margin: 0 !important; transform: translateY(-50%) !important; z-index: 1 !important; }
}
/* laptops / tablets / phones: bigger ring tucked up under the text panel */
@media (max-width: 1649px) {
  .qms-ring { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important;
    width: min(620px, 92vw) !important; max-width: none !important; margin: -36px auto 0 !important; z-index: 0 !important; }
}
@media (min-width: 1650px) { .qms-sec { --rw: min(680px, calc((100vw - 1180px) / 2 + 196px)); } }
/* between 1650–1799px there isn't room beside the panel: use the under-text layout */
@media (min-width: 1650px) and (max-width: 1799px) {
  .qms-sec { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .qms-ring { position: relative !important; top: auto !important; left: auto !important; transform: none !important;
    width: min(620px, 92vw) !important; margin: -36px auto 0 !important; z-index: 0 !important; }
}
@media (max-width: 600px) { .qms-ring { width: 84vw !important; margin: 18px auto 0 !important; } }
/* parts range banner: white-background product group, multiplied into the blue so the white drops out */
.page-hero.hero-parts::before { background: url("hero-parts.jpg?v=1") right 70% / auto 92% no-repeat !important; opacity: .55; mix-blend-mode: multiply;
  animation: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 72%) !important; mask-image: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .6) 58%, #000 72%) !important; }
@media (min-width: 1300px) { .page-hero.hero-parts::before { background-size: auto 100% !important; background-position: right 4% bottom !important; } }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 78% !important; background-position: right bottom !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 36%, rgb(0 0 0 / .6) 52%, #000 70%) !important; mask-image: linear-gradient(90deg, transparent 36%, rgb(0 0 0 / .6) 52%, #000 70%) !important; } }
@media (max-width: 760px) { .page-hero.hero-parts::before { background-size: 160% auto !important; background-position: 60% bottom !important; opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .3), #000 75%) !important; mask-image: linear-gradient(180deg, rgb(0 0 0 / .3), #000 75%) !important; } }
/* parts range banner: overhaul kit photo */
.page-hero.hero-parts::before { background-image: url("hero-parts2.jpg?v=1") !important; background-size: auto 112% !important; background-position: right 3% 55% !important; opacity: .6; }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 100% !important; background-position: right 55% !important; } }
@media (max-width: 760px) { .page-hero.hero-parts::before { background-size: cover !important; background-position: 60% center !important; opacity: .35; } }
/* parts banner: frame shifted lower */
.page-hero.hero-parts::before { background-position: right 3% 85% !important; }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 112% !important; background-position: right 85% !important; } }
@media (max-width: 760px) { .page-hero.hero-parts::before { background-position: 60% 80% !important; } }
/* parts banner: move the picture down so the tops of the liners show */
.page-hero.hero-parts::before { background-size: auto 100% !important; background-position: right 3% top 34px !important; }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 96% !important; background-position: right top 34px !important; } }
@media (max-width: 760px) { .page-hero.hero-parts::before { background-size: cover !important; background-position: 60% top 30px !important; } }
/* parts banner: whole kit visible, vertically centred */
.page-hero.hero-parts::before { background-size: auto 88% !important; background-position: right 4% center !important; }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 86% !important; background-position: right 2% center !important; } }
@media (max-width: 760px) { .page-hero.hero-parts::before { background-size: 115% auto !important; background-position: 40% center !important; } }
@media (min-width: 1300px) { .page-hero.hero-parts::before { -webkit-mask-image: linear-gradient(90deg, transparent 56%, rgb(0 0 0 / .7) 62%, #000 66%) !important; mask-image: linear-gradient(90deg, transparent 56%, rgb(0 0 0 / .7) 62%, #000 66%) !important; } }
/* parts banner: scaled up to fill top/bottom, nudged left */
.page-hero.hero-parts::before { background-size: auto 106% !important; background-position: right 9% center !important; }
@media (max-width: 1299px) and (min-width: 761px) { .page-hero.hero-parts::before { background-size: auto 104% !important; background-position: right 5% center !important; } }
@media (min-width: 1300px) { .page-hero.hero-parts::before { -webkit-mask-image: linear-gradient(90deg, transparent 52%, rgb(0 0 0 / .75) 58%, #000 62%) !important; mask-image: linear-gradient(90deg, transparent 52%, rgb(0 0 0 / .75) 58%, #000 62%) !important; } }

/* Register: interactive "Already registered? Sign in" card */
.rg-have2 { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.rg-have2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #253993, #1b2b78); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.rg-h-ico { position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #eef1fb; color: #253993; transition: background .3s, color .3s; }
.rg-h-ico .icon { width: 22px; height: 22px; }
.rg-h-ico i { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #1aa260; border: 2px solid #fff; }
.rg-h-ico i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #1aa260; animation: rg-ping 1.8s ease-out infinite; }
@keyframes rg-ping { to { transform: scale(2.2); opacity: 0; } }
.rg-h-t { display: grid; gap: 1px; min-width: 0; }
.rg-h-t small { font: 600 .74rem "Work Sans", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #ff8b00; }
.rg-h-t b { font-size: .98rem; color: #1b2350; transition: color .3s; }
.rg-h-sub { font: 500 .78rem ui-monospace, monospace; color: var(--muted); transition: color .3s; }
.rg-h-go { display: inline-flex; align-items: center; gap: 6px; padding: .6em .95em; border-radius: 10px; background: #253993; color: #fff;
  font: 700 .8rem "Work Sans", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; transition: background .3s, color .3s; }
.rg-h-go .icon { width: 15px; height: 15px; transition: transform .3s; }
.rg-have2:hover, .rg-have2:focus-visible { border-color: #253993; transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgb(37 57 147 / .8); outline: none; }
.rg-have2:hover::before, .rg-have2:focus-visible::before { transform: scaleX(1); }
.rg-have2:hover .rg-h-ico, .rg-have2:focus-visible .rg-h-ico { background: #ff8b00; color: #fff; }
.rg-have2:hover .rg-h-t b, .rg-have2:focus-visible .rg-h-t b { color: #fff; }
.rg-have2:hover .rg-h-sub, .rg-have2:focus-visible .rg-h-sub { color: rgb(255 255 255 / .7); }
.rg-have2:hover .rg-h-go, .rg-have2:focus-visible .rg-h-go { background: #ff8b00; color: #1b2350; }
.rg-have2:hover .rg-h-go .icon { transform: translateX(4px); }
.rg-have2:active { transform: translateY(-1px) scale(.99); }
@media (max-width: 420px) { .rg-have2 { grid-template-columns: auto 1fr; } .rg-h-go { grid-column: 1 / -1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .rg-h-ico i::after { animation: none; } }

/* ===== Page loader ===== */
.st-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(900px 500px at 50% 40%, #ffffff, #eef1fb 70%), #fff; transition: opacity .6s ease, visibility .6s, transform .6s ease; }
.st-loader::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(37 57 147 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(37 57 147 / .05) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 65%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 65%); }
.st-loader.skip { display: none; }
.st-loader.out { opacity: 0; visibility: hidden; transform: scale(1.04); }
.stl-stage { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.stl-gear { position: absolute; inset: 0; width: 100%; height: 100%; }
.stl-teeth { transform-origin: 100px 100px; animation: stl-spin 6s linear infinite; }
.stl-arc { transform-origin: 100px 100px; animation: stl-spin .9s linear infinite reverse; }
.stl-mark { position: relative; width: 66px; height: auto; animation: stl-pop .8s cubic-bezier(.3,1.6,.5,1) .15s both; }
.stl-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ff8b00;
  box-shadow: 0 0 12px 3px rgb(255 139 0 / .6); offset-path: circle(70px at 4px 4px); animation: stl-orbit 1.4s linear infinite; }
@supports not (offset-path: circle(10px)) { .stl-spark { display: none; } }
.stl-word { width: min(300px, 70vw); overflow: hidden; clip-path: inset(0 100% 0 0); animation: stl-wipe .9s cubic-bezier(.7,0,.2,1) .55s forwards; }
.stl-word img { display: block; width: 100%; height: auto; }
.stl-bar { width: min(220px, 56vw); height: 4px; border-radius: 4px; background: rgb(37 57 147 / .1); overflow: hidden; }
.stl-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #253993, #ff8b00); animation: stl-load 1.1s ease-in-out infinite; }
.stl-tag { margin: 0; font: 600 .72rem "Work Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b7290; opacity: 0; animation: stl-fade .6s ease 1s forwards; text-align: center; padding: 0 16px; }
@keyframes stl-spin { to { transform: rotate(360deg); } }
@keyframes stl-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes stl-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes stl-load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes stl-fade { to { opacity: 1; } }
@keyframes stl-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .st-loader * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
@media print { .st-loader { display: none !important; } }
.stl-spark { left: 0; top: 0; margin: 0; offset-path: circle(70px at 75px 75px); offset-anchor: center; offset-rotate: 0deg; }
.stl-spark { offset-path: circle(58px at 75px 75px); }

/* ===== Page loader v2: "S & T forge" on white ===== */
.st-loader.sf { gap: 22px; --mw: clamp(76px, 10vw, 120px); background: radial-gradient(60% 70% at 50% 45%, #fff 0%, #f6f8fd 60%, #eef1fb 100%); }
.st-loader.sf::before { background-image: linear-gradient(rgb(37 57 147 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(37 57 147 / .07) 1px, transparent 1px); background-size: 28px 28px; }
.st-loader.sf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgb(255 139 0 / .18), transparent 40%); opacity: 0; animation: sf-glow 1.1s ease-out 1.35s both; }
.sf-row { position: relative; display: flex; align-items: center; }
.sf-mark { position: relative; width: var(--mw); height: calc(var(--mw) * 96 / 118); flex: none; animation: sf-thump .45s ease-out 1.35s both; }
.sf-mark img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sf-s { animation: sf-s .9s cubic-bezier(.25,1.25,.45,1) .3s both; }
.sf-j { animation: sf-j .9s cubic-bezier(.25,1.25,.45,1) .55s both; }
.sf-t { animation: sf-t .45s cubic-bezier(.6,0,.2,1) 1.75s both; }
.sf-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px solid #253993; opacity: 0; animation: sf-ring .8s ease-out 1.35s both; }
.sf-sparks { position: absolute; left: 35.6%; top: 65.6%; }
.sf-sparks i { position: absolute; width: 3px; height: 12px; margin: -6px -1.5px; border-radius: 2px; background: linear-gradient(#ffd08a, #ff8b00); opacity: 0; animation: sf-spark .7s ease-out 2.1s both; }
.sf-word { overflow: hidden; width: 0; flex: none; animation: sf-grow .8s cubic-bezier(.7,0,.2,1) 2.5s forwards; }
.sf-word img { display: block; height: calc(var(--mw) * 96 / 118); width: auto; margin-left: calc(var(--mw) * .08); clip-path: inset(0 100% 0 0); animation: sf-wipe .9s cubic-bezier(.7,0,.2,1) 2.65s forwards; }
.sf-line { width: min(240px, 50vw); height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ff8b00, transparent); transform: scaleX(0); animation: sf-line .7s ease 3.3s forwards; }
.sf-tag { margin: 0; font: 700 clamp(.72rem, 1.6vw, .92rem) "Work Sans", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #253993; opacity: 0; animation: stl-fade .6s ease 3.5s forwards; }
@keyframes sf-s { from { opacity: 0; transform: translate(220%, -160%) rotate(-40deg) scale(.5); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; } }
@keyframes sf-j { from { opacity: 0; transform: translate(-220%, 160%) rotate(40deg) scale(.5); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; } }
@keyframes sf-t { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes sf-ring { 0% { opacity: 0; transform: scale(1); } 2% { opacity: .9; } to { opacity: 0; transform: scale(26); border-width: .3px; } }
@keyframes sf-glow { 0% { opacity: 0; } 25% { opacity: 1; } to { opacity: .25; } }
@keyframes sf-thump { 40% { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes sf-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(.4); } 8% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scaleY(1); } }
@keyframes sf-grow { to { width: calc(var(--mw) * 96 / 118 * 505 / 96 + var(--mw) * .08); } }
@keyframes sf-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes sf-line { to { transform: scaleX(1); } }
@media (max-width: 560px) { .st-loader.sf { --mw: 52px; } }
/* loader v2: faster timeline (~2.5s total) */
.st-loader.sf::after { animation: sf-glow .7s ease-out .8s both; }
.sf-mark { animation: sf-thump .3s ease-out .8s both; }
.sf-s { animation: sf-s .55s cubic-bezier(.25,1.25,.45,1) .15s both; }
.sf-j { animation: sf-j .55s cubic-bezier(.25,1.25,.45,1) .3s both; }
.sf-ring { animation: sf-ring .5s ease-out .8s both; }
.sf-t { animation: sf-t .3s cubic-bezier(.6,0,.2,1) 1.05s both; }
.sf-sparks i { animation: sf-spark .45s ease-out 1.3s both; }
.sf-word { animation: sf-grow .5s cubic-bezier(.7,0,.2,1) 1.45s forwards; }
.sf-word img { animation: sf-wipe .55s cubic-bezier(.7,0,.2,1) 1.55s forwards; }
.sf-line { animation: sf-line .4s ease 1.95s forwards; }
.sf-tag { animation: stl-fade .35s ease 2.05s forwards; }

/* ===== Home hero slider v2 ===== */
.hx{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(900px 520px at 78% 40%,#2f47b5 0%,transparent 60%),linear-gradient(120deg,#131c52 0%,#1e2e86 55%,#253993 100%)}.hx::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}.hx::after{content:"";position:absolute;right:-6%;top:-30%;width:58%;height:160%;z-index:-1;transform:skewX(-14deg);
  background:linear-gradient(180deg,rgb(255 139 0/.0),rgb(255 139 0/.12));border-left:2px solid rgb(255 139 0/.35)}.hx-in{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,72px) 16px clamp(28px,4vw,40px);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center;min-height:600px}.hx-copy{position:relative;min-height:330px}.hx-c{position:absolute;inset:0 0 auto 0;display:grid;gap:16px;align-content:start;pointer-events:none}.hx-c>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.hx-c.on{pointer-events:auto}.hx-c.on>*{opacity:1;transform:none}.hx-c.on>*:nth-child(2){transition-delay:.08s}.hx-c.on>*:nth-child(3){transition-delay:.16s}.hx-c.on>*:nth-child(4){transition-delay:.24s}.hx-c.on>*:nth-child(5){transition-delay:.32s}.hx-c.on>*:nth-child(6){transition-delay:.4s}.hx .kick{display:inline-flex;align-items:center;gap:10px;width:fit-content;font:700 .74rem "Work Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ffb257}.hx .kick::before{content:"";width:26px;height:2px;background:#ff8b00}.hx h2{margin:0;font:700 clamp(2.3rem,5vw,4rem)/1.04 "Lora",serif;letter-spacing:-.01em}.hx h2 em{font-style:normal;color:#ffb257}.hx .sub2{font:600 clamp(1.1rem,2vw,1.4rem) "Work Sans",system-ui,sans-serif;color:#fff}.hx p{margin:0;max-width:46ch;color:rgb(255 255 255/.8);font-size:1.02rem;line-height:1.6}.hx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}.hx .b{display:inline-flex;align-items:center;gap:8px;padding:.9em 1.4em;border-radius:12px;font:700 .82rem "Work Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}.hx .b svg{width:16px;height:16px;transition:transform .25s}.hx .b-o{background:#ff8b00;color:#1b2350;box-shadow:0 14px 28px -14px rgb(255 139 0/.9)}.hx .b-o:hover{transform:translateY(-2px)}.hx .b-o:hover svg{transform:translateX(4px)}.hx .b-g{border:1.5px solid rgb(255 255 255/.35);color:#fff}.hx .b-g:hover{background:rgb(255 255 255/.1);border-color:#fff}.hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.hx-chips span{display:inline-flex;align-items:center;gap:7px;font:600 .8rem "Work Sans",system-ui,sans-serif;padding:.45em .8em;border-radius:999px;background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.14)}.hx-chips span i{width:7px;height:7px;border-radius:50%;background:#ff8b00}.hx-vis{position:relative;height:clamp(340px,40vw,470px)}.hx .v{position:absolute;inset:0;opacity:0;transform:translateX(40px) scale(.97);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}.hx .v.on{opacity:1;transform:none;pointer-events:auto}.hx .ph{position:absolute;left:8%;right:0;top:0;bottom:0;border-radius:28px 28px 120px 28px;overflow:hidden;box-shadow:0 40px 70px -30px rgb(0 0 0/.6)}.hx .ph img{width:100%;height:100%;object-fit:cover;object-position:60% 25%;transform:scale(1.12);transition:transform 7s linear}.hx .v.on .ph img{transform:scale(1)}.hx .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 50%,rgb(19 28 82/.55))}.hx .frame{position:absolute;left:3%;right:5%;top:6%;bottom:-4%;border:2px solid rgb(255 139 0/.55);border-radius:28px 28px 120px 28px;z-index:-1}.hx .fl{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;color:#1b2350;box-shadow:0 20px 40px -18px rgb(0 0 0/.5);
  opacity:0;transform:translateY(14px) scale(.95);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}.hx .v.on .fl{opacity:1;transform:none}.hx .fl{text-decoration:none}.hx .fl:hover{box-shadow:0 24px 44px -16px rgb(0 0 0/.6),0 0 0 2px #ff8b00}.hx .fl b{display:block;font-size:.92rem}.hx .fl small{color:#6b7290;font-size:.74rem}.hx .fl .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}.hx .fl .ic svg{width:20px;height:20px}.hx .f1{left:0;top:12%;transition-delay:.35s}.hx .f1 .ic{background:#253993;color:#fff}.hx .f2{right:-2%;top:44%;transition-delay:.5s}.hx .f2 .ic{background:#ff8b00;color:#fff}.hx .fl .ic svg{width:22px;height:22px}.hx .f3{left:4%;bottom:8%;transition-delay:.65s}.hx .f3 .ic{background:#253993;color:#fff}.hx .v.on .fl{animation:hx-bob 5s ease-in-out 1.2s infinite}.hx .v.on .f2{animation-delay:1.8s}.hx .v.on .f3{animation-delay:2.4s}@keyframes hx-bob{50%{translate:0 -6px}}.hx .win{position:absolute;left:4%;right:2%;top:4%;bottom:6%;border-radius:18px;background:#fff;color:#1b2350;box-shadow:0 40px 70px -30px rgb(0 0 0/.6);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}.hx .wb{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#f1f3f9;border-bottom:1px solid #e3e7f2}.hx .wb i{width:10px;height:10px;border-radius:50%;background:#d5dae8}.hx .wb i:nth-child(1){background:#ff6b5f}.hx .wb i:nth-child(2){background:#ffc23d}.hx .wb i:nth-child(3){background:#28c840}.hx .wb span{margin-left:10px;flex:1;font:500 .76rem ui-monospace,monospace;color:#6b7290;background:#fff;border:1px solid #e3e7f2;border-radius:8px;padding:5px 10px;display:flex;align-items:center;gap:6px}.hx .wb span svg{width:12px;height:12px;color:#1aa260}.hx .ws{display:flex;align-items:center;gap:10px;margin:14px 16px 6px;padding:10px 12px;border:1.5px solid #253993;border-radius:12px;font-size:.9rem}.hx .ws svg{width:18px;height:18px;color:#253993}.hx .ws .ty{white-space:nowrap;overflow:hidden;border-right:2px solid #ff8b00;width:0}.hx .v.on .ws .ty{animation:hx-type 1.4s steps(22) .6s forwards,hx-caret .8s step-end infinite}@keyframes hx-type{to{width:22ch}}@keyframes hx-caret{50%{border-color:transparent}}.hx .rows{display:grid;gap:8px;padding:6px 16px 16px;align-content:start}.hx .r{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:12px;padding:8px;border:1px solid #e8ebf4;border-radius:12px;opacity:0;transform:translateX(16px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}.hx .v.on .r{opacity:1;transform:none}.hx .v.on .r:nth-child(1){transition-delay:1.9s}.hx .v.on .r:nth-child(2){transition-delay:2.05s}.hx .v.on .r:nth-child(3){transition-delay:2.2s}.hx .v.on .r:nth-child(4){transition-delay:2.35s}.hx .r img{width:48px;height:38px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid #eef1fb}.hx .r b{display:block;font-size:.86rem}.hx .r small{color:#6b7290;font-size:.72rem}.hx .r .oem{font:600 .72rem ui-monospace,monospace;color:#253993;background:#eef1fb;padding:4px 8px;border-radius:6px}.hx .r .add{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#253993;color:#fff;font-weight:700}.hx .r.done .add{background:#1aa260}.hx-toast{position:absolute;right:-1%;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#1b2350;color:#fff;box-shadow:0 22px 40px -16px rgb(0 0 0/.6);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}.hx .v.on .hx-toast{opacity:1;transform:none;transition-delay:2.9s}.hx-toast .ic{width:30px;height:30px;border-radius:50%;background:#1aa260;display:grid;place-items:center}.hx-toast svg{width:16px;height:16px}.hx-toast b{display:block;font-size:.88rem}.hx-toast small{color:rgb(255 255 255/.7);font-size:.74rem}.hx .key{position:absolute;left:-2%;bottom:14%;width:58px;height:58px;border-radius:16px;background:#ff8b00;color:#fff;display:grid;place-items:center;box-shadow:0 18px 30px -14px rgb(255 139 0/.9);
  opacity:0;transform:rotate(-20deg) scale(.6);transition:opacity .4s,transform .6s cubic-bezier(.3,1.6,.5,1)}.hx .key svg{width:28px;height:28px}.hx .v.on .key{opacity:1;transform:rotate(-8deg);transition-delay:.4s}.hx-nav{max-width:1180px;margin:0 auto;padding:0 16px 28px;display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:stretch}.hx .tab{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-align:left;padding:14px 16px 16px;border-radius:14px;cursor:pointer;color:#fff;
  background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.12);font-family:inherit;transition:background .3s,border-color .3s}.hx .tab:hover{background:rgb(255 255 255/.09)}.hx .tab .n{grid-row:span 2;font:700 1.5rem "Lora",serif;color:rgb(255 255 255/.35);transition:color .3s}.hx .tab b{font-size:.95rem}.hx .tab small{color:rgb(255 255 255/.65);font-size:.8rem}.hx .tab .bar{position:absolute;left:16px;right:16px;bottom:8px;height:3px;border-radius:3px;background:rgb(255 255 255/.12);overflow:hidden}.hx .tab .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb257,#ff8b00)}.hx .tab.on{background:rgb(255 255 255/.12);border-color:rgb(255 139 0/.6)}.hx .tab.on .n{color:#ff8b00}.hx .arrows{display:flex;gap:8px;align-items:center}.hx .arrows button{width:48px;height:48px;border-radius:14px;border:1px solid rgb(255 255 255/.25);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s}.hx .arrows button:hover{background:#ff8b00;border-color:#ff8b00;color:#1b2350}.hx .arrows svg{width:18px;height:18px}@media (max-width:900px){.hx-in{grid-template-columns:1fr;min-height:0}.hx-copy{min-height:330px}.hx-vis{height:340px}.hx-nav{grid-template-columns:1fr 1fr}.hx .arrows{display:none}.hx .f2{right:0}}@media (max-width:520px){.hx-copy{min-height:400px}.hx .tab small{display:none}.hx-vis{height:300px}.hx .r{grid-template-columns:40px 1fr auto}.hx .r .oem{display:none}}@media (prefers-reduced-motion:reduce){}
.hx h1{margin:0;font:700 clamp(2.3rem,5vw,4rem)/1.04 "Lora",serif;letter-spacing:-.01em;color:#fff}.hx h1 em{font-style:normal;color:#ffb257}.hx h2{color:#fff}
/* hero slider v2: no tabs, arrows on the left/right edges */
.hx-nav { position: static; padding: 0; margin: 0; display: block; max-width: none; }
.hx .arrows { display: contents; }
.hx .arrows button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .3); backdrop-filter: blur(4px); }
.hx .arrows .pv { left: 18px; } .hx .arrows .nx { right: 18px; }
.hx .arrows button:hover { background: #ff8b00; border-color: #ff8b00; color: #1b2350; }
.hx-in { padding-bottom: clamp(40px, 6vw, 72px); }
@media (max-width: 1300px) { .hx .arrows .pv { left: 8px; } .hx .arrows .nx { right: 8px; } .hx .arrows button { width: 38px; height: 38px; } }
@media (max-width: 900px) { .hx .arrows { display: contents !important; } .hx .arrows button { top: auto; bottom: 14px; transform: none; } .hx .arrows .pv { left: auto; right: 62px; } .hx .arrows .nx { right: 16px; } .hx-in { padding-bottom: 72px; } }
/* static parts list (shown only before the interactive list loads / without JS) */
.sp-static { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.sp-sys h2 { font-size: 1.05rem; margin: 0 0 6px; color: #253993; }
.sp-sys ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }