:root { --forest:#063d2c; --green:#0b7652; --lime:#c4e553; --cream:#f5f3ec; --paper:#fffefa; --ink:#14221d; --muted:#66716c; --line:#d8ddd7; --gold:#9d5a12; --gold-pale:#fff0c7; --shadow:0 20px 50px rgba(5,57,39,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
.site-header { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:18px clamp(20px,5vw,72px); color:white; background:var(--forest); box-shadow:0 2px 14px rgba(0,0,0,.08); }
.brand { display:flex; align-items:center; padding:6px 10px; border-radius:3px; background:#fff; text-decoration:none; }
.brand img { display:block; width:250px; max-width:42vw; height:auto; }
.brand-mark,.eyebrow { font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.brand-mark { font-size:20px; letter-spacing:.14em; }
.brand-subtitle { color:#b8d7c9; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.site-nav { display:flex; gap:24px; }
.site-nav a { color:#d9e8e0; font-size:14px; font-weight:650; text-decoration:none; }
.site-nav a:hover { color:var(--lime); }
.header-action { padding:10px 15px; border-radius:4px; color:var(--forest); background:var(--lime); font-size:14px; font-weight:800; text-decoration:none; }
.hero { display:grid; grid-template-columns:minmax(0,.86fr) minmax(440px,1.14fr); gap:clamp(32px,6vw,92px); align-items:center; padding:clamp(62px,9vw,126px) clamp(20px,8vw,124px); color:white; background:linear-gradient(90deg,rgba(2,32,23,.94),rgba(4,73,52,.88)),url("assets/engine-air-filter.avif") center/cover; }
.hero-copy .eyebrow,.quality-band .eyebrow { color:var(--lime); }
h1 { max-width:650px; margin-bottom:24px; font-size:clamp(43px,6vw,82px); line-height:.98; letter-spacing:-.055em; }
.hero-lede { max-width:525px; color:#d9e8e0; font-size:clamp(18px,2vw,22px); line-height:1.5; }
.hero-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:42px; }
.hero-stats div { display:grid; gap:4px; padding-right:26px; border-right:1px solid rgba(255,255,255,.22); }
.hero-stats strong { font-size:17px; }.hero-stats span { color:#bed7cb; font-size:13px; }
.finder-card { padding:clamp(24px,4vw,42px); border-radius:12px; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }
.finder-heading,.catalogue-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }.finder-heading .eyebrow,.section .eyebrow { color:var(--green); }
.finder-heading h2,.catalogue-heading h2,.section h2,.quality-band h2 { margin-bottom:0; font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.035em; }
.catalog-badge { padding:7px 10px; border-radius:100px; color:var(--green); background:#e6f4dc; font-size:12px; font-weight:800; white-space:nowrap; }
.finder-intro { margin:14px 0 25px; color:var(--muted); }.finder-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.field,.compact-field { display:grid; gap:7px; }.keyword-field { grid-column:1/-1; }.field span,.compact-field span,.summary-strip span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
input,select,button { font:inherit; } input,select { width:100%; min-height:46px; border:1px solid var(--line); border-radius:4px; padding:0 12px; color:var(--ink); background:white; } input:focus,select:focus,button:focus-visible { outline:3px solid rgba(11,118,82,.24); outline-offset:2px; }
.reset-btn { min-height:46px; border:1px solid var(--green); border-radius:4px; color:var(--green); background:white; font-weight:750; cursor:pointer; }.finder-count { margin:20px 0 0; color:var(--muted); font-size:13px; }
.section { padding:clamp(70px,9vw,130px) clamp(20px,8vw,124px); }.company-intro { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,8vw,150px); background:var(--paper); }.intro-copy { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(180px,.9fr); gap:28px; max-width:820px; color:#34423b; font-size:19px; line-height:1.65; }.intro-copy p:last-child { margin-bottom:0; }.company-image { width:100%; height:100%; min-height:250px; border-radius:8px; object-fit:cover; }
.products-section { background:var(--cream); }.section-heading { margin-bottom:40px; }.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.product-card { min-height:0; overflow:hidden; padding:0 26px 26px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.product-card img { display:block; width:calc(100% + 52px); height:auto; margin:0 -26px 20px; background:#fff; }.product-number { color:var(--green); font-size:13px; font-weight:850; }.product-card h3 { margin:12px 0 10px; font-size:24px; letter-spacing:-.03em; }.product-card p { margin-bottom:0; color:var(--muted); line-height:1.55; }
.quality-band { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding:clamp(65px,8vw,110px) clamp(20px,8vw,124px); color:white; background:var(--forest); }.quality-band h2 { max-width:540px; }.quality-points { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.quality-points div { display:grid; align-content:start; gap:10px; padding-top:15px; border-top:2px solid var(--lime); }.quality-points strong { font-size:17px; }.quality-points span { color:#c4d8ce; font-size:14px; line-height:1.5; }
.catalogue-section { background:var(--paper); }.compact-field { width:185px; }.summary-strip { display:flex; align-items:stretch; gap:32px; margin:30px 0 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.summary-strip>div { display:grid; gap:5px; }.summary-strip strong { font-size:15px; }.results-list { display:grid; }.result-row { display:grid; grid-template-columns:minmax(160px,.9fr) minmax(230px,1.4fr) minmax(250px,1fr); gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }.result-row:hover { background:#f8fbf8; }.part-block,.fitment { display:grid; align-content:start; gap:7px; }.part-no { display:inline-flex; width:fit-content; max-width:100%; padding:7px 10px; border-radius:4px; color:white; background:var(--green); font-size:18px; font-weight:850; overflow-wrap:anywhere; }.filter-type { color:var(--forest); font-size:12px; font-weight:850; }.style,.fitment span { color:var(--muted); font-size:13px; }.fitment strong { font-size:17px; }.engine { color:var(--ink)!important; font-weight:750; }.xref { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.xref-item { min-width:0; padding:9px; border:1px solid var(--line); border-radius:4px; }.xref-item span { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }.xref-item strong { display:block; overflow-wrap:anywhere; }.remarks { width:fit-content; margin-top:4px; color:var(--gold)!important; font-size:12px!important; font-weight:800; }.remarks.premium-badge { padding:4px 8px; border:1px solid #e7bd69; border-radius:100px; color:#7d4308!important; background:var(--gold-pale); font-size:11px!important; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.empty-state { margin:24px 0; padding:32px; border:1px dashed var(--line); border-radius:8px; text-align:center; }.load-more { display:flex; justify-content:center; padding:28px 0 0; }.load-more button { min-height:44px; padding:0 18px; border:0; border-radius:4px; color:white; background:var(--green); font-weight:800; cursor:pointer; }
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; background:#e9eee9; }.contact-details { display:grid; gap:18px; align-content:start; }.contact-details a { color:var(--green); font-size:22px; font-weight:800; }.contact-details p { margin-bottom:0; color:#3a4841; line-height:1.55; }.site-footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(20px,8vw,124px); color:#bfd6c9; background:var(--forest); font-size:13px; }.site-footer a { color:white; }
@media (max-width:980px) { .site-nav{display:none}.hero,.company-intro,.quality-band,.contact-section{grid-template-columns:1fr}.intro-copy{grid-template-columns:1fr}.company-image{max-height:360px}.product-grid{grid-template-columns:repeat(2,1fr)}.quality-points{max-width:700px}.hero{padding-top:68px}.finder-card{max-width:700px}.result-row{grid-template-columns:1fr 1.3fr}.xref{grid-column:1/-1}.quality-band{gap:40px} }
@media (max-width:640px) { .site-header{padding:14px 20px}.header-action{display:none}.hero,.section,.quality-band{padding-left:20px;padding-right:20px}.finder-fields,.product-grid,.quality-points{grid-template-columns:1fr}.hero-stats{gap:14px}.hero-stats div{padding-right:14px}.catalogue-heading,.summary-strip,.site-footer{align-items:flex-start;flex-direction:column}.compact-field{width:100%}.result-row{grid-template-columns:1fr;padding:18px 0}.xref{grid-column:auto;grid-template-columns:1fr}.contact-section{gap:34px} }