@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap');

:root{--ink:#10282e;--muted:#667a7e;--line:#dbe5e5;--paper:#f4f7f6;--orange:#079fab;--dark:#0b252c;--mint:#d9eeee}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--paper);font-family:'DM Sans',Arial,sans-serif}
a,button,select,input{touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:3px solid #32c7d1;outline-offset:3px}

/* The navigation stays in view throughout every page. */
.topbar{position:sticky;top:0;z-index:1000;height:76px;background:#091c22;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 4px 20px rgba(4,18,21,.14)}
.topbar .brand-logo{filter:brightness(0) invert(1);width:144px;height:30px}
.topbar .brand-parts{color:#eaf3f3;border-color:rgba(255,255,255,.42);font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:.12em}
.topbar nav{height:100%}
.topbar .nav-link{color:#bdd0d2;font-size:12px;font-weight:700;letter-spacing:.025em;padding:0 3px}
.topbar .nav-link:hover,.topbar .nav-link.active{color:#fff;border-color:#33c5d0}
footer{background:#091c22;color:#c4d5d7;border-top:1px solid #24424a}

/* Photographic headers share a restrained type and color system. */
.visual-hero{position:relative;isolation:isolate;overflow:hidden;background:#142c30 center/cover no-repeat;color:#fff}
.visual-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,17,22,.93) 0%,rgba(4,20,24,.79) 28%,rgba(6,22,26,.24) 62%,rgba(6,22,26,.04) 100%)}
.visual-hero-inner{max-width:1280px;margin:auto;padding:0 32px;position:relative;z-index:1}
.home-hero{min-height:500px;background-image:url('/static/hero-450mt.jpg');background-position:center 52%}
.home-hero .visual-hero-inner{padding-top:83px;padding-bottom:125px}
.hero-kicker{color:#57d4dd;font:700 11px 'IBM Plex Mono',monospace;letter-spacing:.2em}
.visual-hero h1{max-width:660px;margin:18px 0 17px;font:800 clamp(58px,6.3vw,91px)/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:.006em;text-transform:uppercase}
.visual-hero p{max-width:460px;margin:0;color:#edf3f2;font-size:15px;line-height:1.6}
.hero-photo-label{position:absolute;right:max(calc((100vw - 1216px)/2),32px);bottom:36px;color:#fff;font:700 10px 'IBM Plex Mono',monospace;letter-spacing:.15em;text-shadow:0 2px 9px rgba(0,0,0,.8)}
.inner-hero{min-height:300px}
.inner-hero .visual-hero-inner{padding-top:76px;padding-bottom:74px}
.inner-hero h1{font-size:clamp(53px,5vw,74px);margin:16px 0 13px}
.directory-hero{background-image:url('/static/hero-800mtx.jpg');background-position:center 44%}
.directory-hero:before{background:linear-gradient(90deg,rgba(3,17,22,.94),rgba(4,20,24,.72) 42%,rgba(6,22,26,.18) 100%)}
.about-hero{background-image:url('/static/hero-675srr.jpg');background-position:center 49%}
.about-hero:before{background:linear-gradient(90deg,rgba(3,17,22,.86),rgba(4,20,24,.66) 40%,rgba(6,22,26,.16) 100%)}

/* A single part search and step-by-step vehicle picker sit above the directory. */
.home-shell{max-width:1280px;padding:0 32px 90px;margin:-65px auto 0;position:relative;z-index:2}
.lookup-panel{padding:27px 36px 24px;background:#fff;border:1px solid #d7e2e2;box-shadow:0 19px 40px rgba(14,43,47,.15)}
.lookup-top{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.lookup-top h2{font:700 32px/.98 'Barlow Condensed',sans-serif;letter-spacing:.015em;text-transform:uppercase;margin:0;color:var(--dark)}
.lookup-panel .part-search{margin:0;height:58px;display:flex}
.lookup-panel .part-search input{background:#f8fafa;border:1px solid #cfdcdd;color:var(--ink);font-size:16px;padding:0 20px}
.lookup-panel .part-search button{background:#079fab;color:#fff;min-width:135px;border:0;font-weight:700;font-size:15px}
.lookup-panel .part-search button:hover{background:#067e89}
.lookup-divider{margin:23px 0 16px;text-transform:uppercase;font:700 10px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#82989b}
.lookup-divider:before,.lookup-divider:after{background:#e2e9e9}
.picker-grid{gap:11px}
.picker-grid label span{font:700 11px 'IBM Plex Mono',monospace;letter-spacing:.065em;color:#61787d;text-transform:uppercase}
.picker-grid select{height:52px;border-color:#d6e1e1;background:#fff;font-family:'DM Sans',sans-serif;font-size:15px}
.picker-grid select:disabled{background:#f5f7f7;color:#9badaf}
.variant-results{min-height:44px;margin-top:13px;padding-top:12px;font-size:13px;border-color:#e8eeee}
.variant-row{background:#fbfdfd}
.variant-identity{display:flex;align-items:baseline;gap:5px 10px;flex-wrap:wrap;min-width:0}
.year-variant .variant-identity strong,.variant-row .variant-identity strong{font:700 15px 'DM Sans',Arial,sans-serif;color:#10282e}
.year-variant .factory-code,.variant-row .factory-code{font:500 12px 'IBM Plex Mono',monospace;color:#71878b;white-space:normal}

/* Exact-CC chips narrow the already indexed model families in place. */
.home-directory{margin-top:64px;scroll-margin-top:95px}
.directory-layout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:30px;align-items:start}
.directory-side{position:sticky;top:102px;background:#0c2931;border-top:4px solid #35c1ca;padding:33px 28px 36px;box-shadow:0 14px 32px rgba(10,40,47,.12)}
.directory-side .overline{font-size:12px;color:#68d7dd}
.directory-side h2{font:800 50px/.92 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:17px 0;color:#fff;letter-spacing:.01em}
.directory-side p{color:#bfd2d4;font-size:14px;line-height:1.55;margin:19px 0 25px}
.cc-filters{display:flex;flex-wrap:wrap;gap:8px}
.cc-filters button{min-width:62px;min-height:44px;padding:0 12px;border:1px solid #49656b;background:#17373e;color:#e8f2f2;font:700 13px 'IBM Plex Mono',monospace;text-transform:uppercase}
.cc-filters button:hover{border-color:#6edce2;background:#214b52;color:#fff}
.cc-filters button[aria-pressed="true"]{background:#45c8cf;border-color:#45c8cf;color:#06292e}
.directory-main{min-width:0}
.directory-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 17px}
.directory-tools>span{font:700 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#506b70}
.directory-tools .directory-search{height:46px;width:min(360px,53%);max-width:none;margin:0}
.directory-tools .directory-search input{font-size:14px;background:#fff}
.directory-tools .directory-search button{padding:0 18px;background:#0d2a31;font-size:13px}
.model-list{border-color:#d7e2e2}
.model-list-head,.model-list-row{grid-template-columns:78px minmax(0,1.7fr) minmax(92px,.8fr) minmax(102px,.9fr) 20px;gap:14px}
.model-list-head{background:#0c2931;color:#bdd2d4;min-height:48px;box-sizing:border-box;padding:14px 20px;font-size:11px}
.model-list-row{min-height:72px;padding:15px 20px;border-color:#e5ecec;font-size:14px}
.model-list-row strong{color:#132d32;font-size:19px;line-height:1.2;letter-spacing:-.015em}
.model-list-row .list-cc{color:#617b80;font-size:13px}
.model-list-row .list-years,.model-list-row .list-count{color:#60777c;font-size:13px;line-height:1.35}
.model-list-row>b{font-size:20px;line-height:1}
.model-list-row b,.model-list-row:hover strong{color:#079fab}
.model-family[open]>summary{background:#edf8f8}
.model-family{scroll-margin-top:95px}
.inline-years{background:#fbfefe}
.inline-years .year-label{background:#e8f4f4;font-size:18px;padding:20px}
.inline-years .year-variant{grid-template-columns:minmax(0,1.4fr) minmax(100px,.65fr) auto;gap:16px;padding:18px 20px;font-size:13px}
.inline-years .year-variant .variant-identity strong{font-size:16px;line-height:1.25}
.inline-years .year-variant .factory-code{font-size:12px}
.inline-years .year-variant b{color:#079fab;font-size:13px;white-space:nowrap}
.filter-empty{padding:28px;color:#566f73;font-size:14px;background:#fff;border:1px solid var(--line);border-top:0}
.directory-page{max-width:1280px;padding-top:29px}
.directory-page .breadcrumb{margin-bottom:27px}
.directory-page .directory-layout{margin-top:8px}

/* Interior pages keep the catalog easy to scan. */
.page-shell{max-width:1280px}
.detail-head h1,.section-heading h2,.parts-heading h2,.about-intro h2,.about-contact h2{font-family:'Barlow Condensed',sans-serif;letter-spacing:.005em}
.detail-head h1{font-size:clamp(42px,4vw,58px)}
.model-detail-head[class*="model-photo-"]{position:relative;isolation:isolate;min-height:250px;display:flex;align-items:center;padding:35px 43px;color:#fff;background-color:#0b252c;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.model-detail-head[class*="model-photo-"]:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,17,22,.94),rgba(4,20,24,.70) 45%,rgba(6,22,26,.07))}
.model-detail-head[class*="model-photo-"]>div{position:relative;z-index:1}
.model-detail-head[class*="model-photo-"] h1{color:#fff;font-size:clamp(49px,5vw,70px);margin:12px 0}
.model-detail-head[class*="model-photo-"] p{color:#e0eeee}
.model-detail-head[class*="model-photo-"] .eyebrow{color:#63d8df}
.model-photo-450mt{background-image:url('/static/hero-450mt.jpg');background-position:center 50%}
.model-photo-675srr{background-image:url('/static/hero-675srr.jpg');background-position:center 50%}
.model-photo-800mtx{background-image:url('/static/hero-800mtx.jpg');background-position:center 48%}
.section-heading h2{font-size:38px}
.about-page{padding-top:28px}
.about-intro h2{font-size:clamp(39px,4.5vw,58px);line-height:1.02;max-width:700px;margin:16px 0 27px}
.about-intro{padding-bottom:38px}
.about-contact{padding-top:26px}
.about-contact h2{font-size:34px}
.part-hero{background:#0b252c}
.part-hero .eyebrow{color:#65d8df}
.part-hero-stats{border-color:#365259}
.part-hero-stats>div{border-color:#365259}
.part-explain,.notice{background:#e8f4f4;border-color:#30b7bf}
.fitment-list,.diagram-card,.image-panel,.parts-panel{border-color:#d8e3e3}

/* Exploded diagrams need room for legible OEM numbers and descriptions. */
.diagram-page{max-width:1680px;padding-left:clamp(24px,2.5vw,46px);padding-right:clamp(24px,2.5vw,46px)}
.diagram-page .diagram-layout{grid-template-columns:minmax(0,1.18fr) minmax(470px,.82fr);gap:24px}
.diagram-page .parts-heading{padding:24px 26px 20px;gap:16px}
.diagram-page .parts-heading h2{font-size:28px;line-height:1.06}
.diagram-page .parts-heading>span{font-size:12px;white-space:nowrap}
.diagram-page .parts-panel table{table-layout:fixed;font-size:16px}
.diagram-page .parts-panel th:first-child{width:57px}
.diagram-page .parts-panel th:nth-child(2){width:38%}
.diagram-page .parts-panel th{font-size:11px;line-height:1.3;letter-spacing:.045em;padding:14px 13px}
.diagram-page .parts-panel td{font-size:16px;line-height:1.43;padding:15px 13px;overflow-wrap:anywhere}
.diagram-page .parts-panel td.position{font:600 14px/1.43 'IBM Plex Mono',monospace}
.diagram-page .parts-panel .part-number{font:600 15px/1.43 'IBM Plex Mono',monospace;word-break:normal;overflow-wrap:anywhere}
.diagram-page .parts-panel tbody tr:hover{background:#f3fafa}

@media(max-width:1050px){
  .diagram-page .diagram-layout{grid-template-columns:1fr}
}

@media(max-width:980px){
  .directory-layout{grid-template-columns:245px minmax(0,1fr);gap:20px}
  .directory-side{padding:28px 20px 30px}
  .directory-side h2{font-size:46px}
  .model-list-head,.model-list-row{grid-template-columns:68px minmax(0,1.5fr) 82px minmax(92px,.8fr) 18px;gap:10px}
  .model-list-head,.model-list-row{padding-left:16px;padding-right:16px}
  .model-list-row strong{font-size:18px}
}
@media(max-width:880px){
  .directory-layout{grid-template-columns:1fr;gap:24px}
  .directory-side{position:static;display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:26px;padding:27px 30px}
  .directory-side .overline,.directory-side h2,.directory-side p{grid-column:1}
  .directory-side .overline{grid-row:1}
  .directory-side h2{grid-row:2;margin:10px 0 0}
  .directory-side p{grid-row:3;margin:13px 0 0}
  .cc-filters{grid-column:2;grid-row:1/4;align-content:center}
}
@media(max-width:760px){
  footer span{display:block}
  .topbar{height:auto;min-height:76px;display:grid;grid-template-columns:1fr;gap:2px;padding:8px 18px 0;align-content:center}
  .topbar .brand-logo{width:119px;height:25px}
  .topbar .brand-parts{font-size:16px}
  .topbar nav{height:35px;gap:24px;justify-content:flex-start}
  .topbar .nav-link{height:35px;font-size:11px}
  .home-hero{min-height:395px;background-position:61% center}
  .home-hero .visual-hero-inner{padding-top:55px;padding-bottom:135px}
  .visual-hero-inner{padding-left:23px;padding-right:23px}
  .visual-hero h1{font-size:clamp(52px,10vw,73px);max-width:520px}
  .visual-hero p{font-size:13px;max-width:360px}
  .hero-photo-label{right:22px;bottom:92px;font-size:9px}
  .home-shell{padding:0 17px 65px;margin-top:-70px}
  .lookup-panel{padding:22px 22px 18px}
  .lookup-top{grid-template-columns:1fr;gap:12px}
  .lookup-top h2{font-size:29px}
  .lookup-panel .part-search{height:51px}
  .lookup-panel .part-search button{min-width:96px;font-size:14px}
  .picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .directory-layout{gap:20px}
  .directory-side{grid-template-columns:1fr minmax(180px,.9fr);column-gap:18px;padding:24px}
  .directory-side .overline{grid-column:1/-1;grid-row:auto}
  .directory-side h2{grid-column:1;grid-row:auto;font-size:44px;margin:11px 0 0}
  .directory-side p{grid-column:2;grid-row:auto;margin:14px 0 0;max-width:260px}
  .cc-filters{grid-column:1/-1;grid-row:auto;margin-top:21px}
  .directory-tools{align-items:flex-start}
  .directory-tools>span{padding-top:14px}
  .directory-page{padding:20px 17px 65px}
  .inner-hero{min-height:245px}
  .inner-hero .visual-hero-inner{padding-top:53px;padding-bottom:51px}
  .inner-hero h1{font-size:55px}
  .about-hero{background-position:38% center}
  .model-detail-head[class*="model-photo-"]{min-height:210px;padding:28px}
}
@media(max-width:700px){
  .model-list-head{display:none}
  .model-list-row{grid-template-columns:74px minmax(0,1fr) 20px;column-gap:12px;row-gap:4px;padding:16px 18px}
  .model-list-row .list-cc{font-size:13px}
  .model-list-row strong{font-size:17px}
  .model-list-row .list-years{font-size:13px}
  .inline-years .year-group{grid-template-columns:74px minmax(0,1fr)}
  .inline-years .year-label{padding:17px 11px;font-size:16px}
  .inline-years .year-variant{grid-template-columns:1fr;gap:7px;padding:16px 18px}
  .inline-years .year-variant b{margin-top:2px}
}
@media(max-width:560px){
  .diagram-page{padding-left:16px;padding-right:16px}
  .diagram-page .parts-heading{padding:19px 17px;align-items:start}
  .diagram-page .parts-heading h2{font-size:25px}
  .diagram-page .parts-panel th:first-child{width:42px}
  .diagram-page .parts-panel th:nth-child(2){width:42%}
  .diagram-page .parts-panel th{font-size:10px;padding:12px 8px}
  .diagram-page .parts-panel td{font-size:15px;padding:13px 8px}
  .diagram-page .parts-panel .part-number{font-size:14px;color:#087e8a;text-decoration:underline;text-underline-offset:2px}
  .diagram-page .parts-panel .part-number span{display:none}
  .home-hero{min-height:385px;background-position:63% center}
  .home-hero:before{background:linear-gradient(90deg,rgba(3,17,22,.87),rgba(4,20,24,.50) 64%,rgba(6,22,26,.18))}
  .home-hero .visual-hero-inner{padding-top:53px}
  .visual-hero h1{font-size:clamp(47px,13vw,63px);line-height:.9}
  .hero-photo-label{display:none}
  .lookup-panel{padding:20px 17px 16px}
  .lookup-panel .part-search input{font-size:15px;padding:0 12px}
  .lookup-panel .part-search button{min-width:82px;padding:0 9px;font-size:13px}
  .lookup-divider{margin:20px 0 15px}
  .picker-grid{grid-template-columns:1fr}
  .picker-grid select{font-size:15px;padding:0 11px;height:49px}
  .picker-grid label span{font-size:10px}
  .variant-results{font-size:12px}
  .home-directory{margin-top:39px;scroll-margin-top:93px}
  .directory-side{display:block;padding:25px 20px 27px}
  .directory-side h2{font-size:44px;margin:12px 0 0}
  .directory-side p{font-size:13px;line-height:1.55;margin:14px 0 0;max-width:none}
  .cc-filters{margin-top:19px}
  .cc-filters button{min-height:44px;font-size:12px}
  .directory-tools{display:block}
  .directory-tools>span{display:block;padding:0 0 12px;font-size:11px}
  .directory-tools .directory-search{width:100%;height:46px}
  .model-list-row{grid-template-columns:66px minmax(0,1fr) 18px;gap:8px;padding:16px 13px}
  .model-list-row .list-cc{font-size:12px}
  .model-list-row strong{font-size:16px}
  .model-list-row .list-years{font-size:12px}
  .inline-years .year-group{grid-template-columns:66px minmax(0,1fr)}
  .inline-years .year-label{padding:16px 9px;font-size:15px}
  .inline-years .year-variant{padding:16px 12px}
  .inline-years .year-variant .variant-identity strong{font-size:15px}
  .inline-years .year-variant .factory-code{font-size:11px}
  .inline-years .year-variant b{font-size:12px}
  .inner-hero h1{font-size:47px}
  .directory-hero{background-position:52% center}
  .about-hero{background-position:37% center}
  .about-intro h2{font-size:39px}
  .model-detail-head[class*="model-photo-"]{min-height:180px;padding:22px}
}