:root { --ink: #092b43; --deep: #06233a; --navy: #0b344e; --paper: #f8faf9; --white: #fff; --aqua: #16969a; --aqua-soft: #e1f2f0; --mist: #eef5f4; --line: rgba(9,43,67,.16); --line-strong: rgba(9,43,67,.28); --radius: 2px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --shadow-line: 0 1px 0 rgba(9,43,67,.08),0 12px 30px rgba(9,43,67,.06); }
* { scroll-margin-top: 104px; }
body { background: var(--paper); overflow-x: visible; line-height: 1.5; }
.shell, .section-shell { max-width: 1296px; }
.notice { height: 32px; background: rgb(6, 36, 58); font-size: 9px; letter-spacing: 0.11em; }
.notice a { padding: 7px 0px 5px; border-bottom-color: rgba(255, 255, 255, 0.45); }
.site-header { position: sticky; top: 0px; background: rgba(248, 250, 249, 0.89); backdrop-filter: blur(18px) saturate(125%); border-bottom-color: rgba(9, 43, 67, 0.12); }
.header-inner { height: 78px; }
.brand { font-size: 11px; letter-spacing: 0.11em; }
.desktop-nav { gap: 0px; margin-left: 72px; }
.desktop-nav a { position: relative; padding: 29px 15px 27px; font-size: 11px; letter-spacing: 0.01em; }
.desktop-nav a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 17px; height: 2px; background: var(--aqua); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: var(--ink); }
.header-actions { gap: 18px; }
.utility-link { font-size: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 11px 14px; font-size: 10px; letter-spacing: 0.02em; background: var(--deep); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.nav-cta:hover { background: var(--ink); box-shadow: none; }
.button { min-height: 48px; padding: 13px 17px; gap: 20px; border-radius: var(--radius); letter-spacing: 0.015em; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.button.primary { background: var(--deep); }
.button.aqua { background: var(--aqua); color: rgb(255, 255, 255); }
.button.outline { border-color: var(--ink); background: transparent; }
.button:hover, .nav-cta:hover { transform: translateY(-1px); box-shadow: rgba(9, 43, 67, 0.12) 0px 7px 16px; }
.button.primary:hover { background: rgb(14, 64, 92); }
.button.aqua:hover { background: rgb(12, 119, 124); }
.hero { min-height: 610px; background: rgb(237, 245, 245); color: var(--ink); }
.hero-scene { opacity: 0.75; background-position: right center; }
.hero-overlay { background: linear-gradient(90deg, rgba(248, 251, 250, 0.99) 0%, rgba(248, 251, 250, 0.96) 40%, rgba(245, 250, 249, 0.58) 67%, rgba(239, 247, 246, 0.16) 100%); }
.hero-grid { min-height: 548px; grid-template-columns: 0.98fr 1.02fr; }
.hero-copy { padding: 64px 0px 42px; }
.eyebrow { margin-bottom: 15px; color: rgb(73, 119, 122); font-size: 9px; letter-spacing: 0.13em; }
.eyebrow span { width: 20px; }
.eyebrow.light { color: rgb(65, 116, 119); }
.hero h1 { font-size: clamp(54px, 5.15vw, 76px); letter-spacing: -0.062em; }
.hero h1 em { color: var(--aqua); font-style: italic; }
.hero-intro { margin: 20px 0px 27px; max-width: 430px; color: rgb(67, 101, 107); font-size: 14px; }
.hero-actions { gap: 20px; }
.hero .text-cta { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.hero-proof { margin-top: 42px; gap: 28px; }
.hero-proof div { border-left-color: rgba(9, 43, 67, 0.34); }
.hero-proof strong { color: var(--ink); }
.hero-proof span { color: rgb(85, 118, 123); }
.hero-product { height: 430px; isolation: isolate; justify-content: center; }
.hero-product::before { content: ""; position: absolute; z-index: 0; width: min(100%, 510px); height: 345px; border: 1px solid rgba(22, 150, 154, 0.34); background-image: linear-gradient(rgba(22, 150, 154, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 150, 154, 0.13) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(226, 243, 240, 0.42)); background-size: 28px 28px, 28px 28px, auto; box-shadow: inset 0 0 0 10px rgba(255,255,255,.22),var(--shadow-line); }
.hero-product::after { content: "PART VIEW / 01\a 022-000119"; white-space: pre; position: absolute; z-index: 3; right: 4px; top: 26px; color: rgb(68, 118, 122); font: 9px/1.65 var(--mono); letter-spacing: 0.09em; text-align: right; }
.hero-product img { z-index: 2; width: min(90%, 448px); max-height: 390px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(rgba(9, 43, 67, 0.2) 0px 22px 18px); transform: rotate(-1.5deg); }
.product-orbit { z-index: 1; border-color: rgba(22, 150, 154, 0.34); }
.orbit-one { width: 410px; height: 260px; }
.orbit-two { width: 500px; height: 320px; opacity: 0.25; }
.hero-product-label, .hero-spec { display: none; }
.hero-bottom { padding-bottom: 17px; color: rgb(86, 119, 123); }
.hero-line { background: rgba(9, 43, 67, 0.24); }
.trust-strip { background: rgb(231, 242, 240); }
.trust-grid > div { padding: 24px 30px 25px; }
.trust-grid b { margin: 7px 0px 5px; }
.trust-grid p { font-size: 10px; }
.applications { padding-top: 88px; padding-bottom: 88px; }
.section-top { gap: 36px; margin-bottom: 36px; }
.section-top h2, .quality h2 { font-size: clamp(40px, 4vw, 59px); letter-spacing: -0.058em; }
.section-top em, .quality h2 em, .page-hero h1 em { color: inherit; font-style: normal; }
.section-intro { font-size: 12px; line-height: 1.7; max-width: 325px; }
.category-grid { grid-auto-rows: 258px; gap: 10px; }
.category { border-radius: var(--radius); }
.category > div { inset: auto 17px 15px; }
.category h3 { font-size: 24px; margin: 4px 0px; }
.category-link { font-size: 9px; letter-spacing: 0.02em; }
.category::before { content: ""; position: absolute; z-index: 1; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.22); pointer-events: none; opacity: 0; transition: opacity 0.24s; }
.category:hover::before, .category:focus-visible::before { opacity: 1; }
.products { background: rgb(240, 246, 245); color: var(--ink); padding: 88px 0px; }
.products h2, .light-text { color: var(--ink); }
.products-heading { margin-bottom: 35px; }
.product-grid, .catalog-grid { gap: 12px; }
.product-card { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.product-photo { height: 294px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.product-photo::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(9, 43, 67, 0.08); pointer-events: none; }
.product-photo img { width: 82%; height: 79%; mix-blend-mode: multiply; }
.stock-tag { top: 17px; left: 17px; color: rgb(65, 107, 112); }
.quick-add { left: 10px; right: 10px; bottom: 10px; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--deep); padding: 12px; font-size: 10px; }
.product-meta { padding: 14px 1px 4px; }
.product-meta p { color: rgb(75, 126, 128); }
.product-meta h3 { font-size: 18px; margin: 6px 0px 10px; }
.product-meta a { color: var(--ink); display: inline-flex; align-items: center; min-height: 32px; }
.product-meta a span { color: var(--aqua); }
.finder { padding-top: 88px; padding-bottom: 88px; }
.finder-panel { padding: 49px 52px; gap: 52px; background: rgb(10, 52, 78); color: rgb(255, 255, 255); border: 1px solid rgba(9, 43, 67, 0.1); }
.finder-panel .eyebrow.light { color: rgb(167, 211, 209); }
.finder-panel h2 { color: rgb(255, 255, 255); }
.finder-copy > p:not(.eyebrow) { font-size: 12px; margin: 16px 0px; color: rgb(201, 221, 220); }
.finder-note { margin-top: 24px; padding-top: 14px; color: rgb(192, 216, 216); border-top-color: rgba(201, 221, 220, 0.35); }
.lookup-form { padding-top: 16px; }
.lookup-form label { color: rgb(255, 255, 255); }
.search-row input { height: 50px; border: 1px solid rgba(9, 43, 67, 0.2); }
.search-row button { min-width: 158px; }
.form-status { color: rgb(184, 213, 213); }
.popular-searches { border-top-color: rgba(201, 221, 220, 0.35); }
.popular-searches > span { color: rgb(172, 208, 208); }
.popular-searches button { min-height: 32px; border-radius: 0px; color: rgb(255, 255, 255); border-color: rgba(201, 221, 220, 0.45); }
.quality { padding: 88px 0px; background: rgb(248, 250, 249); }
.quality-grid { gap: 8%; }
.quality-image { min-height: 432px; background: rgb(230, 241, 240); border: 1px solid var(--line); }
.quality-image::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(9, 43, 67, 0.1); pointer-events: none; }
.quality-image img { mix-blend-mode: multiply; }
.quality-image-note { padding: 14px 18px; background: var(--deep); }
.quality-copy > p:not(.eyebrow) { font-size: 12px; margin: 18px 0px 24px; }
.quality dl > div { padding: 11px 0px; }
.quality dt { font-size: 10px; }
.quality dd { font-size: 10px; }
.wholesale { background: rgb(220, 239, 237); color: var(--ink); border-top: 1px solid var(--line); }
.wholesale-panel { min-height: 290px; padding-top: 59px; padding-bottom: 52px; }
.wholesale h2 { font-size: 48px; color: var(--ink); }
.wholesale-side { padding-top: 18px; }
.wholesale-side p { font-size: 12px; color: rgb(70, 102, 108); }
.wholesale-number { color: rgba(9, 43, 67, 0.055); font-size: 280px; }
.site-footer { padding-top: 54px; background: rgb(6, 35, 58); }
.footer-grid { padding-bottom: 45px; }
.footer-intro { font-size: 19px; }
.footer-grid div a { min-height: 28px; margin: 2px 0px; display: flex; align-items: center; }
.footer-bottom { padding-top: 14px; padding-bottom: 15px; }
.page-hero { padding: 58px 0px 53px; background: linear-gradient(135deg, rgb(238, 246, 245), rgb(228, 241, 239)); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: 9%; top: -110px; width: 260px; height: 260px; border: 1px solid rgba(22, 150, 154, 0.18); border-radius: 50%; }
.page-hero .section-shell { position: relative; z-index: 1; }
.page-hero .breadcrumbs { margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(45px, 5vw, 68px); max-width: 760px; }
.page-hero p:not(.breadcrumbs) { margin-top: 16px; font-size: 13px; }
.page-section { padding: 64px 0px; }
.section-kicker { margin-bottom: 10px; font-size: 9px; letter-spacing: 0.12em; }
.section-title { font-family: var(--sans); font-weight: 800; font-size: clamp(27px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 13px; }
.section-lead { font-size: 12px; }
.application-list { gap: 10px; margin-top: 29px; }
.application-list .category { height: 260px; }
.catalog-tools { margin-bottom: 24px; }
.filter-row { gap: 6px; }
.filter-row a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 0px; }
.filter-row a[aria-current="page"], .filter-row a:hover { background: var(--aqua-soft); }
.catalog-grid .product-card { border: 0px; background: transparent; }
.detail-layout { gap: 6%; grid-template-columns: 1.02fr 0.98fr; }
.detail-gallery { min-height: 470px; padding: 24px; background: rgb(255, 255, 255); position: relative; }
.detail-gallery::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(9, 43, 67, 0.1); pointer-events: none; }
.detail-gallery img { height: 390px; mix-blend-mode: multiply; }
.detail-copy .intro { font-size: 13px; margin: 18px 0px; }
.spec-table { margin: 22px 0px; }
.spec-table th, .spec-table td { padding: 10px 0px; font-size: 11px; }
.fitment-form, .contact-form { padding: 25px; margin-top: 24px; background: rgb(227, 241, 239); border: 1px solid rgba(9, 43, 67, 0.08); }
.fitment-form h2, .contact-form h2 { font-family: var(--sans); font-size: 21px; font-weight: 800; }
.form-grid { gap: 10px; }
.form-field input, .form-field textarea, .form-field select { min-height: 44px; padding: 10px; font-size: 12px; }
.form-field textarea { min-height: 96px; }
.finder-page { gap: 6%; }
.finder-box { padding: 35px; background: rgb(10, 52, 78); }
.finder-steps li { padding: 14px 0px 14px 38px; font-size: 12px; }
.quality-cards { gap: 10px; margin-top: 28px; }
.info-card { padding: 20px; min-height: 165px; }
.info-card b { font-family: var(--sans); font-size: 17px; }
.info-card p { font-size: 11px; }
.wholesale-grid, .contact-grid { gap: 6%; }
.page-note { font-size: 11px; padding: 13px 15px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: rgb(13, 137, 140) solid 3px; outline-offset: 3px; box-shadow: rgba(22, 150, 154, 0.18) 0px 0px 0px 5px; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .site-header { backdrop-filter: none; }
}
@media (max-width: 850px) {
  .site-header { top: 0px; }
  .header-inner { height: 72px; }
  .desktop-nav, .utility-link { display: none; }
  .hero-grid { min-height: 0px; grid-template-columns: 1fr; }
  .hero-copy { padding: 50px 0px 8px; }
  .hero-product { height: 330px; order: 2; }
  .hero-product::before { height: 258px; width: 440px; }
  .hero-product::after { right: 0px; top: 17px; }
  .hero-product img { max-height: 288px; }
  .applications, .products, .finder, .quality { padding-top: 64px; padding-bottom: 64px; }
  .trust-grid > div { padding: 20px 17px; }
  .finder-panel { padding: 38px 30px; }
  .page-section { padding: 55px 0px; }
  .page-hero { padding: 50px 0px 45px; }
  .application-list .category { height: 235px; }
}
@media (max-width: 520px) {
  .notice { height: 34px; }
  .notice-inner { font-size: 8px; }
  .header-inner { height: 68px; }
  .nav-cta { display: none; }
  .menu-button { min-width: 44px; min-height: 44px; }
  .mobile-menu { background: rgba(248, 250, 249, 0.98); backdrop-filter: blur(18px); padding: 8px 19px 16px; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid rgba(9, 43, 67, 0.09); padding: 8px 0px; }
  .hero { min-height: 0px; }
  .hero-overlay { background: linear-gradient(rgba(248, 251, 250, 0.97) 0%, rgba(248, 251, 250, 0.9) 56%, rgba(239, 247, 246, 0.48) 100%); }
  .hero-copy { padding: 40px 0px 5px; }
  .hero h1 { font-size: 42px; line-height: 0.96; }
  .hero-intro { font-size: 13px; margin: 15px 0px 20px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .hero-proof { margin-top: 28px; gap: 14px; }
  .hero-product { height: 275px; margin: 0px -4px; }
  .hero-product::before { width: 100%; height: 218px; background-size: 22px 22px, 22px 22px, auto; }
  .hero-product::after { top: 14px; right: 12px; font-size: 8px; }
  .hero-product img { max-height: 238px; width: 92%; }
  .orbit-one { width: 295px; height: 180px; }
  .orbit-two { width: 355px; height: 225px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > div { padding: 16px 14px; }
  .trust-grid > div:nth-child(3) { grid-column: span 2; }
  .trust-grid p { font-size: 9px; }
  .applications { padding-top: 55px; padding-bottom: 52px; }
  .section-top { gap: 14px; margin-bottom: 23px; }
  .section-top h2, .quality h2 { font-size: 39px; }
  .section-intro { font-size: 11px; }
  .category-grid, .product-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0px; padding: 0px 0px 12px; overscroll-behavior-x: contain; }
  .category-grid::-webkit-scrollbar, .product-grid::-webkit-scrollbar { height: 4px; }
  .category-grid::-webkit-scrollbar-thumb, .product-grid::-webkit-scrollbar-thumb { background: rgba(9, 43, 67, 0.3); }
  .category-grid .category, .category-featured, .category-wide { height: 232px; min-width: 84vw; flex: 0 0 84vw; grid-column: auto; scroll-snap-align: start; }
  .product-grid .product-card { min-width: 84vw; flex: 0 0 84vw; scroll-snap-align: start; background: rgb(255, 255, 255); border: 1px solid var(--line); padding: 9px; margin: 0px !important; }
  .product-grid .product-photo { border: 0px; }
  .product-grid .product-meta { padding: 13px 4px 5px; }
  .products { padding: 55px 0px 49px; }
  .products-heading { margin-bottom: 22px; }
  .products .text-cta, .product-meta a { min-height: 44px; display: inline-flex; align-items: center; }
  .product-photo { height: 260px; }
  .quick-add { opacity: 1; transform: none; }
  .finder { padding-top: 52px; padding-bottom: 52px; }
  .finder-panel { padding: 30px 19px; }
  .finder h2 { font-size: 42px; }
  .lookup-form { padding-top: 4px; }
  .search-row input, .search-row button { min-height: 48px; }
  .popular-searches { gap: 6px; }
  .popular-searches button { min-height: 44px; }
  .quality { padding: 55px 0px; }
  .quality-grid { gap: 35px; }
  .quality-image { min-height: 310px; }
  .wholesale-panel { min-height: 0px; padding-top: 48px; padding-bottom: 42px; }
  .wholesale h2 { font-size: 40px; }
  .wholesale-number { font-size: 205px; }
  .page-hero { padding: 43px 0px 38px; }
  .page-hero h1 { font-size: 43px; }
  .page-hero p:not(.breadcrumbs) { font-size: 12px; }
  .page-section { padding: 46px 0px; }
  .section-title { font-size: 28px; }
  .application-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 23px 0px 0px; padding-bottom: 10px; overscroll-behavior-x: contain; }
  .application-list .category { height: 220px; min-width: 84vw; flex: 0 0 84vw; scroll-snap-align: start; }
  .application-list::-webkit-scrollbar { height: 4px; }
  .application-list::-webkit-scrollbar-thumb { background: rgba(9, 43, 67, 0.3); }
  .catalog-grid { grid-template-columns: 1fr; gap: 26px; }
  .catalog-tools { gap: 14px; margin-bottom: 20px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; width: 100%; }
  .filter-row a { white-space: nowrap; min-height: 44px; }
  .detail-gallery { min-height: 300px; padding: 15px; }
  .detail-gallery img { height: 255px; }
  .detail-copy h1 { font-size: 42px; }
  .fitment-form, .contact-form { padding: 19px; margin-top: 20px; }
  .form-field input, .form-field textarea, .form-field select { min-height: 46px; }
  .finder-box { padding: 26px 19px; }
  .quality-cards { grid-template-columns: 1fr; gap: 8px; }
  .info-card { min-height: 0px; padding: 17px; }
  .footer-grid { padding-bottom: 36px; }
  .footer-grid div a { min-height: 44px; }
}