:root { --ink:#17191d; --blue:#252b33; --orange:#e33a2f; --gold:#f5be20; --cream:#f5f3ed; --line:#d6d1c6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Barlow,Arial,sans-serif; }
.container { width:min(1120px,calc(100% - 48px)); margin:auto; }
.hero { min-height:680px; color:white; position:relative; overflow:hidden; background:linear-gradient(118deg,rgba(18,19,21,.94),rgba(41,43,47,.84)), radial-gradient(circle at 85% 35%,var(--gold) 0 2%,transparent 2.2%),linear-gradient(150deg,#32353a 5%,#191b1f 65%,#303337); }
.catalog-hero { min-height:430px; color:white; background:linear-gradient(118deg,rgba(18,19,21,.95),rgba(41,43,47,.84)),linear-gradient(150deg,#32353a 5%,#191b1f 65%,#303337); }.catalog-hero-copy { padding:45px 0 75px; }
.hero:after { content:""; position:absolute; width:520px; height:520px; right:-120px; bottom:-220px; border:48px solid rgba(245,190,32,.84); border-radius:50%; }
.nav { min-height:100px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.nav-menu { display:flex; align-items:center; justify-content:center; gap:20px; }.nav-menu a { color:#e8edf0; text-decoration:none; font-size:14px; font-weight:600; }.nav-menu a:hover { color:var(--gold); }
.brand { display:flex; gap:16px; align-items:center; color:white; text-decoration:none; text-transform:uppercase; letter-spacing:.055em; font-size:30px; line-height:.8; }
.brand-mark { font-family:'Barlow Condensed'; font-weight:800; font-size:54px; padding:8px 11px; border:3px solid var(--gold); color:var(--gold); }
.brand-name strong { font-size:1.3em; }
.nav-link { color:white; text-decoration:none; font-weight:600; border-bottom:2px solid var(--gold); padding-bottom:5px; }
.hero-content { position:relative; z-index:1; padding:100px 0 130px; }
.eyebrow { color:#b8c9d6; letter-spacing:.16em; font-size:12px; font-weight:700; margin:0 0 16px; }
.accent { color:var(--orange); }
h1,h2,h3 { font-family:'Barlow Condensed',Arial,sans-serif; margin:0; line-height:.92; text-transform:uppercase; }
h1 { font-size:clamp(60px,10vw,120px); max-width:850px; }
h2 { font-size:clamp(42px,5vw,64px); }
.lead { max-width:510px; font-size:20px; line-height:1.5; margin:29px 0; color:#dce6ec; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-block; padding:15px 22px; text-decoration:none; font-weight:700; transition:transform .2s; }
.button:hover { transform:translateY(-3px); }
.button-primary { color:white; background:var(--orange); }
.button-ghost { color:white; border:1px solid rgba(255,255,255,.65); }
.road-line { position:absolute; bottom:46px; height:4px; background:repeating-linear-gradient(90deg,var(--gold) 0 54px,transparent 54px 94px); width:100%; z-index:1; }
.intro { padding:120px 0; max-width:790px; margin-left:max(24px,calc((100% - 1120px)/2)); }
.intro h2 { margin-bottom:20px; }.intro>p:last-child { font-size:20px; line-height:1.55; max-width:650px; }
.vehicle-finder { padding:100px 0; background:var(--ink); color:white; }.finder-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }.finder-grid > div > p:last-child { color:#d5dce1; font-size:18px; line-height:1.5; max-width:480px; }.finder-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:28px; background:#f5f3ed; color:var(--ink); }.finder-form label { display:grid; gap:7px; font-size:13px; font-weight:700; }.finder-form label:last-of-type { grid-column:span 2; }.finder-form input,.finder-form select { width:100%; border:1px solid #bab4a7; padding:13px; background:white; color:var(--ink); font:inherit; }.finder-form select:disabled { color:#747b80; background:#ece9e1; }.finder-form button { grid-column:span 2; border:0; padding:15px; background:var(--orange); color:white; font:inherit; font-weight:700; cursor:pointer; }.finder-form small { grid-column:span 2; color:#59616a; line-height:1.35; }.finder-result { grid-column:span 2; padding:20px; border:1px solid #d6cfbe; background:white; }.finder-result h3 { margin:2px 0 8px; font-size:31px; }.finder-result p:not(.result-label) { margin:0; color:#46505a; line-height:1.45; }.finder-result .result-label { margin:0 0 7px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.1em; }.finder-result .result-contact { width:100%; margin-top:16px; background:var(--ink); }.finder-result .result-contact:hover { background:var(--orange); }
.oil-finder { padding:100px 0; color:white; background:linear-gradient(125deg,#4a2d1a,#211b17 70%); }.oil-finder .eyebrow { color:var(--gold); }.oil-finder .finder-grid > div > p { color:#eee4d9; font-size:18px; line-height:1.5; max-width:490px; }.oil-finder .finder-note { padding:16px 18px; border-left:3px solid var(--gold); background:rgba(255,255,255,.06); font-size:15px !important; }.oil-finder-form > button { background:#a94d20; }.oil-finder-form > button:hover { background:#7e3516; }
.oil-finder-result { padding:22px; }.oil-finder-result > p:not(.result-label) { margin-bottom:15px; }.oil-options { display:grid; gap:12px; margin-top:18px; }.oil-option { padding:17px; border:1px solid #d6cfbe; background:#f8f6f0; }.oil-option .oil-option-count { margin:0 0 6px; color:#a94d20; font-size:10px; font-weight:800; letter-spacing:.13em; }.oil-option h4 { margin:0 0 10px; color:#a94d20; font-family:'Barlow Condensed',Arial,sans-serif; font-size:31px; line-height:1; }.oil-option p { margin:4px 0 !important; font-size:14px; }.oil-option button { width:auto; margin:13px 8px 0 0; padding:10px 13px; background:var(--ink); }.oil-option a { display:inline-block; margin-top:13px; color:#6b3b22; font-size:13px; font-weight:700; }.oil-brand-picker { margin-top:18px; padding:18px; border:2px solid var(--gold); background:#fff9e8; }.oil-brand-picker h3 { color:#a94d20; }.oil-brand-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:16px; }.oil-brand-buttons button { display:flex; grid-column:auto; align-items:center; justify-content:center; gap:9px; min-height:62px; padding:9px; border:1px solid #d8d0be; color:var(--ink); background:white; }.oil-brand-buttons button:hover { border-color:var(--gold); background:#fff3c7; }.oil-brand-buttons img { width:58px; height:36px; object-fit:contain; }.oil-brand-buttons b { color:#174b85; font-size:20px; }.oil-brand-buttons span { font-size:14px; }.oil-disclaimer { margin-top:17px !important; padding-top:14px; border-top:1px solid #ddd5c5; font-size:12px; }
.oil-option .oil-secondary { color:#6b6257; font-size:12px; }
.oil-viscosity-label { margin:0 0 7px !important; color:#7b421f !important; font-size:10px !important; font-weight:800; letter-spacing:.1em; }.oil-viscosity-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }.oil-viscosity-list strong { display:inline-block; padding:7px 10px; border:1px solid #c7883a; color:#8c421e; background:#fff7df; font-family:'Barlow Condensed',Arial,sans-serif; font-size:22px; line-height:1; }.oil-option .oil-special-note { margin:0 0 12px !important; padding:10px; border-left:3px solid #a94d20; color:#664d3f; background:#fff0e5; font-size:12px; }.oil-choice-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.oil-choice-buttons button { margin:0; }
.official-catalog-link { display:inline-block; margin-top:22px; padding:13px 16px; border:1px solid var(--gold); color:var(--gold); text-decoration:none; font-weight:700; }.official-catalog-link:hover { color:var(--ink); background:var(--gold); }
.products { background:#e8e5de; padding:100px 0 115px; }.products h2 { margin-bottom:25px; }.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:25px; }
.product-card { min-height:330px; padding:36px; color:white; position:relative; overflow:hidden; text-decoration:none; transition:transform .2s,box-shadow .2s; }.product-card:hover { transform:translateY(-5px); box-shadow:0 14px 25px rgba(0,0,0,.2); }.battery { background:#252b33; }.oil { background:#54331d; }.moto { background:#153f38; }.tires { background:#263f70; }
.product-card:after { content:""; width:220px; height:220px; position:absolute; right:-62px; bottom:-86px; border:25px solid rgba(255,255,255,.1); border-radius:50%; }.product-card h3 { font-size:52px; }.product-card p { max-width:340px; font-size:17px; line-height:1.45; }.product-card .card-label { color:var(--gold); letter-spacing:.13em; font-size:11px; font-weight:700; margin:0 0 9px; }.product-card span { position:absolute; bottom:30px; z-index:3; display:inline-flex; align-items:center; min-height:42px; padding:10px 15px; border:2px solid var(--gold); color:var(--gold); font-weight:800; line-height:1.15; }.icon { width:33px; height:33px; display:grid; place-items:center; border:2px solid var(--gold); color:var(--gold); font-size:25px; margin-bottom:30px; }.drop { border-radius:50% 50% 55% 55%; font-size:18px; }.product-logo { height:52px; width:auto; max-width:150px; object-fit:contain; object-position:left center; margin-bottom:18px; }.ek-card-logo { background:white; border-radius:4px; padding:4px; }.ceat-card-logo { max-width:170px; }
.battery-copy { position:relative; z-index:2; }.duncan-card-logo { display:block; width:92px; height:92px; object-fit:contain; margin:0 0 18px; }.battery-image { position:absolute; z-index:1; width:56%; max-width:340px; height:auto; right:-18px; bottom:6px; mix-blend-mode:multiply; filter:drop-shadow(0 16px 16px rgba(0,0,0,.28)); }
.battery-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; position:relative; z-index:3; }
.battery-actions a { display:inline-flex; align-items:center; min-height:42px; padding:10px 15px; border:2px solid var(--gold); background:transparent; color:var(--gold); font-size:14px; font-weight:800; line-height:1.15; text-decoration:none; transition:background .2s,color .2s,transform .2s; }
.battery-actions a:hover { background:var(--gold); color:#252b33; transform:translateY(-2px); }
.battery-actions .finder-link { background:transparent; color:var(--gold); }
.battery-actions .finder-link:hover { background:var(--gold); color:#252b33; }
.brands { padding:112px 0; }.brands h2 { max-width:600px; }.brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:35px; }.brand-tile { height:120px; display:flex; align-items:center; justify-content:center; padding:22px; background:white; border:1px solid var(--line); font-weight:700; letter-spacing:.06em; text-align:center; }.brand-tile img { max-width:100%; max-height:65px; object-fit:contain; }.inca { color:#174b85; font-size:15px; flex-direction:column; }.inca strong { font-size:28px; line-height:1; }.valvoline { background:#f6f8fa; }
.catalog { background:#dfdbd1; padding:100px 0; }.catalog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.catalog-item { min-height:290px; padding:38px; background:white; }.catalog-item h2 { font-size:46px; }.catalog-item p:not(.eyebrow) { font-size:17px; line-height:1.5; max-width:420px; }.catalog-item a { display:inline-flex; align-items:center; min-height:42px; margin-top:8px; padding:10px 15px; border:2px solid currentColor; color:var(--orange); font-weight:800; line-height:1.15; text-decoration:none; transition:background .2s,color .2s,transform .2s; }.catalog-item a:hover { background:var(--orange); color:white; transform:translateY(-2px); }.catalog-item.dark { background:var(--ink); color:white; }.catalog-item.dark a { color:var(--gold); }.catalog-item.dark a:hover { background:var(--gold); color:var(--ink); }
.battery-catalog { padding:110px 0; background:var(--cream); }.catalog-lead { font-size:19px; max-width:590px; line-height:1.5; }.battery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px; }.battery-item { display:flex; flex-direction:column; background:white; border:1px solid var(--line); min-width:0; }.battery-item img { width:100%; height:155px; object-fit:contain; padding:12px; }.battery-info { display:flex; flex:1; flex-direction:column; padding:20px; border-top:1px solid var(--line); }.battery-info p { color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.1em; margin:0 0 8px; }.battery-info h3 { font-size:28px; }.battery-info span { display:block; min-height:65px; margin:12px 0 18px; color:#46505a; font-size:14px; line-height:1.4; }.battery-info a { align-self:flex-start; margin-top:auto; padding:10px 12px; background:var(--orange); color:white; text-decoration:none; font-size:14px; font-weight:700; }
.contact-modal[hidden] { display:none; }.contact-modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; }.contact-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.68); }.contact-dialog { position:relative; width:min(100%,470px); padding:40px; background:var(--cream); box-shadow:0 18px 45px rgba(0,0,0,.3); }.contact-dialog h2 { font-size:43px; }.contact-dialog > p:not(.eyebrow) { font-size:17px; line-height:1.45; }.contact-close { position:absolute; top:12px; right:16px; border:0; background:transparent; color:var(--ink); font-size:31px; cursor:pointer; }.contact-options { display:grid; gap:10px; margin-top:24px; }.contact-options button,.contact-options a { padding:16px; border:0; color:white; background:var(--ink); font:inherit; font-weight:700; line-height:1.55; text-align:center; text-decoration:none; cursor:pointer; }.contact-options button:hover,.contact-options a:hover { background:var(--orange); }.contact-options strong { font-size:19px; }
.why { padding:115px 0; display:grid; grid-template-columns:1fr 1fr; gap:70px; }.benefits { border-top:1px solid var(--line); }.benefits p { padding:18px 0; margin:0; border-bottom:1px solid var(--line); font-size:18px; }.benefits b { color:var(--orange); display:inline-block; width:46px; }
footer { background:var(--ink); color:white; padding:76px 0 20px; }.footer-grid { display:grid; grid-template-columns:1.25fr 1fr auto; gap:35px; align-items:end; }.footer-grid h2 { font-size:53px; }.footer-grid address { color:#d5dce1; line-height:1.55; font-style:normal; font-size:17px; }.footer-grid address a { color:var(--gold); text-decoration:none; font-weight:700; }.location-trigger { border:0; font:inherit; cursor:pointer; }.footer-bottom { padding-top:70px; color:#88949d; font-size:13px; }
@media (max-width:700px) { .container { width:min(100% - 36px,1120px); }.hero { min-height:620px; }.hero-content { padding-top:80px; }.brand { font-size:20px; gap:10px; }.brand-mark { font-size:38px; padding:6px 8px; }.nav { min-height:90px; flex-wrap:wrap; gap:8px; padding:16px 0; }.nav-menu { order:3; width:100%; justify-content:flex-start; gap:15px; overflow-x:auto; padding-bottom:3px; }.nav-menu a { white-space:nowrap; font-size:13px; }.product-grid,.why,.footer-grid,.catalog-grid,.finder-grid { grid-template-columns:1fr; }.brand-grid,.battery-grid { grid-template-columns:repeat(2,1fr); }.why { gap:45px; }.footer-grid { align-items:start; }.intro { margin-left:18px; padding:85px 0; }.vehicle-finder,.oil-finder { padding:75px 0; }.finder-grid { gap:35px; }.product-card { min-height:290px; }.battery-image { width:58%; right:-12px; bottom:18px; opacity:.78; }.battery-item img { height:115px; }.battery-info { padding:14px; }.battery-info h3 { font-size:23px; }.battery-info span { min-height:96px; font-size:13px; }.oil-brand-buttons { grid-template-columns:1fr; } }