:root {
  --bg: #080808;
  --bg-soft: #111111;
  --panel: #171717;
  --paper: #f5f5f3;
  --white: #ffffff;
  --ink: #111111;
  --muted: #6f6f72;
  --muted-dark: #b6b6b8;
  --red: #df1f17;
  --red-dark: #a90e0a;
  --red-soft: #ff3b32;
  --line: rgba(255,255,255,.12);
  --line-dark: rgba(15,15,15,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.18);
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #ff746e; outline-offset: 3px; }

.container { width: min(100% - 32px, var(--container)); margin-inline:auto; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow::before { content:""; width:26px; height:3px; background:var(--red); border-radius:999px; }
.h2 { margin:12px 0 16px; font-size:clamp(2rem,8vw,4rem); line-height:.98; letter-spacing:-.045em; }
.lead { margin:0; font-size:clamp(1rem,3.7vw,1.18rem); color:var(--muted); max-width:720px; }
.kicker { font-weight:800; color:var(--red); }

/* Header */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,8,.94); color:var(--white);
  border-bottom:1px solid var(--line); backdrop-filter: blur(12px);
}
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logo {
  width:128px; height:46px; padding:4px 8px; background:#fff; border-radius:10px; object-fit:contain;
}
.brand-city { display:none; color:#d8d8d8; font-size:.82rem; white-space:nowrap; }
.desktop-nav { display:none; }
.header-call { display:none; }
.nav-toggle { position:relative; }
.nav-toggle summary {
  list-style:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  display:grid; place-items:center; cursor:pointer; font-size:0;
}
.nav-toggle summary::-webkit-details-marker { display:none; }
.nav-toggle summary::before,
.nav-toggle summary::after {
  content:""; position:absolute; width:20px; height:2px; background:#fff; transition:.2s ease;
}
.nav-toggle summary::before { transform:translateY(-4px); }
.nav-toggle summary::after { transform:translateY(4px); }
.nav-toggle[open] summary::before { transform:rotate(45deg); }
.nav-toggle[open] summary::after { transform:rotate(-45deg); }
.mobile-nav {
  position:absolute; right:0; top:56px; width:min(84vw,320px); background:#111; border:1px solid var(--line);
  box-shadow:var(--shadow); border-radius:16px; padding:10px;
}
.mobile-nav a { display:block; padding:13px 14px; border-radius:10px; color:#e8e8e8; font-weight:700; }
.mobile-nav a[aria-current="page"], .mobile-nav a:hover { background:#222; color:#fff; }
.mobile-nav .mobile-call { margin-top:6px; background:var(--red); color:#fff; text-align:center; }

/* Buttons */
.btn {
  min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 18px; border-radius:12px; font-weight:850; letter-spacing:-.01em;
  border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--red { background:var(--red); color:#fff; }
.btn--red:hover { background:#f02a21; }
.btn--dark { background:#0b0b0b; color:#fff; }
.btn--outline { border-color:rgba(255,255,255,.28); color:#fff; background:transparent; }
.btn--paper { background:#fff; color:#111; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.btn svg { width:19px; height:19px; fill:currentColor; }

/* Home */
.home-hero { position:relative; overflow:hidden; color:#fff; background:#070707; }
.home-hero::after {
  content:""; position:absolute; width:440px; height:440px; right:-260px; bottom:-190px;
  background:var(--red); transform:rotate(24deg); opacity:.9;
}
.home-hero-grid { position:relative; z-index:1; display:grid; gap:32px; padding:54px 0 42px; }
.home-hero-copy { position:relative; z-index:2; }
.home-hero h1 { margin:12px 0 18px; font-size:clamp(3.25rem,14vw,7.5rem); line-height:.82; letter-spacing:-.065em; text-transform:uppercase; max-width:850px; }
.home-hero h1 span { color:var(--red-soft); display:block; }
.home-hero p { color:#c8c8cb; max-width:650px; font-size:1.04rem; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; color:#fff; background:#181818; border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:.84rem; font-weight:750; }
.hero-badge i { width:8px; height:8px; background:var(--red); border-radius:50%; box-shadow:0 0 0 5px rgba(223,31,23,.14); }
.home-hero-photo { position:relative; min-height:330px; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:0 26px 70px rgba(0,0,0,.35); }
.home-hero-photo img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.home-hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.66)); }
.photo-label { position:absolute; z-index:2; left:18px; bottom:16px; display:flex; gap:10px; align-items:center; font-weight:800; }
.photo-label::before { content:""; width:34px; height:3px; background:var(--red); }
.trust-strip { background:#fff; border-bottom:1px solid var(--line-dark); }
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#e5e5e5; }
.trust-item { background:#fff; padding:20px 16px; }
.trust-item b { display:block; font-size:1.05rem; }
.trust-item span { color:var(--muted); font-size:.86rem; }
.category-grid { display:grid; gap:14px; margin-top:34px; }
.category-card { min-height:220px; background:#fff; border:1px solid var(--line-dark); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; justify-content:space-between; transition:.2s ease; }
.category-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.category-index { font-size:.72rem; letter-spacing:.12em; color:var(--red); font-weight:900; }
.category-card h3 { margin:28px 0 7px; font-size:1.55rem; line-height:1.05; }
.category-card p { margin:0; color:var(--muted); }
.category-link { margin-top:22px; font-weight:850; display:inline-flex; align-items:center; gap:8px; }
.category-link::after { content:"→"; color:var(--red); font-size:1.2em; }
.home-about { background:#0d0d0d; color:#fff; }
.home-about-grid { display:grid; gap:26px; }
.about-photo { border-radius:var(--radius); overflow:hidden; min-height:360px; position:relative; }
.about-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-copy p { color:#bcbcc0; }
.check-list { display:grid; gap:11px; padding:0; margin:24px 0 0; list-style:none; }
.check-list li { display:flex; gap:11px; align-items:flex-start; color:#e6e6e7; }
.check-list li::before { content:"✓"; flex:0 0 25px; height:25px; border-radius:50%; display:grid; place-items:center; background:rgba(223,31,23,.16); color:#ff514a; font-weight:900; }
.gallery-grid { display:grid; gap:14px; margin-top:30px; }
.gallery-grid figure { margin:0; border-radius:18px; overflow:hidden; min-height:240px; position:relative; background:#ddd; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.local-seo { background:var(--red); color:#fff; }
.local-seo-grid { display:grid; gap:26px; align-items:center; }
.local-seo h2 { margin:0 0 14px; font-size:clamp(2rem,9vw,4.4rem); line-height:.94; letter-spacing:-.05em; }
.local-seo p { margin:0; color:#ffe5e3; max-width:700px; }
.local-card { background:#fff; color:#111; padding:22px; border-radius:18px; }
.local-card b { display:block; font-size:1.25rem; }
.local-card small { color:var(--muted); }

/* Parts page */
.parts-body { background:#f3f1ed; }
.parts-hero { background:#0b0b0b; color:#fff; position:relative; overflow:hidden; }
.parts-hero::before { content:"AUTO DELOVI"; position:absolute; left:-12px; bottom:-22px; font-weight:950; font-size:25vw; line-height:.7; color:rgba(255,255,255,.025); white-space:nowrap; }
.parts-hero-grid { position:relative; z-index:1; display:grid; gap:30px; padding:56px 0 62px; }
.parts-hero h1 { font-size:clamp(3rem,13vw,6.8rem); line-height:.88; margin:10px 0 16px; letter-spacing:-.06em; }
.parts-hero p { color:#c2c2c6; max-width:670px; }
.spec-box { background:var(--red); padding:22px; border-radius:18px; align-self:end; }
.spec-box strong { display:block; font-size:1.35rem; }
.spec-box p { color:#ffe1df; margin:6px 0 0; }
.parts-intro { display:grid; gap:24px; }
.parts-intro-aside { border-left:4px solid var(--red); padding-left:18px; color:#555; font-size:1.02rem; }
.parts-grid { display:grid; gap:16px; margin-top:34px; }
.part-card { background:#fff; border-radius:18px; padding:24px; border:1px solid rgba(0,0,0,.08); min-height:220px; position:relative; overflow:hidden; }
.part-card::after { content:attr(data-no); position:absolute; right:14px; bottom:-20px; color:#f0efec; font-size:5.6rem; line-height:1; font-weight:950; }
.part-card h3 { margin:8px 0 9px; font-size:1.4rem; position:relative; z-index:1; }
.part-card p { margin:0; color:#666; position:relative; z-index:1; }
.part-card .chip { display:inline-flex; position:relative; z-index:1; padding:5px 9px; border-radius:999px; background:#f6dedc; color:#a70f09; font-size:.74rem; font-weight:900; }
.process-section { background:#171717; color:#fff; }
.process-grid { display:grid; gap:16px; margin-top:30px; counter-reset:step; }
.process-step { border:1px solid var(--line); border-radius:18px; padding:22px; counter-increment:step; }
.process-step::before { content:"0" counter(step); display:block; color:var(--red-soft); font-weight:950; font-size:1.9rem; line-height:1; margin-bottom:28px; }
.process-step h3 { margin:0 0 8px; }
.process-step p { margin:0; color:#bcbcc1; }
.info-band { background:#fff; }
.info-band-grid { display:grid; gap:18px; }
.info-note { padding:22px; border-radius:18px; background:#f6f4f0; }
.info-note h3 { margin:0 0 8px; }
.info-note p { margin:0; color:#676767; }

/* Oils page */
.oils-body { background:#0c0c0d; color:#fff; }
.oils-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 80% 20%, #59120e 0, #161010 25%, #090909 56%); }
.oils-hero-grid { display:grid; gap:30px; padding:58px 0 54px; align-items:center; }
.oils-hero h1 { margin:8px 0 16px; font-size:clamp(3rem,12.8vw,7rem); line-height:.88; letter-spacing:-.06em; }
.oils-hero p { color:#cacacc; max-width:640px; }
.oils-image { min-height:410px; border-radius:28px; overflow:hidden; position:relative; border:1px solid var(--line); box-shadow:0 25px 70px rgba(0,0,0,.35); }
.oils-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oils-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.62)); }
.fluid-section { background:#fff; color:#111; }
.fluid-list { display:grid; gap:0; margin-top:34px; border-top:1px solid #ddd; }
.fluid-item { display:grid; grid-template-columns:48px 1fr; gap:15px; padding:21px 0; border-bottom:1px solid #ddd; align-items:start; }
.fluid-item b:first-child { color:var(--red); font-size:.9rem; }
.fluid-item h3 { margin:0 0 4px; font-size:1.25rem; }
.fluid-item p { margin:0; color:#696969; }
.oil-guide { background:#171717; }
.oil-guide-grid { display:grid; gap:20px; }
.guide-card { border:1px solid var(--line); border-radius:20px; padding:24px; }
.guide-card em { display:block; font-style:normal; color:#ff625b; font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.guide-card h3 { margin:8px 0; font-size:1.3rem; }
.guide-card p { margin:0; color:#b7b7ba; }
.warning { background:var(--red); border-radius:20px; padding:24px; color:#fff; }
.warning h3 { margin:0 0 8px; }
.warning p { margin:0; color:#ffe5e3; }
.oil-brands { background:#0b0b0b; }
.brand-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.brand-tile { min-height:100px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; font-size:1.25rem; font-weight:950; letter-spacing:-.03em; text-transform:uppercase; }

/* Brands page */
.brands-body { background:#fff; }
.brands-hero { padding:54px 0 38px; background:#fff; }
.brands-hero h1 { margin:10px 0 18px; font-size:clamp(3rem,14vw,8.4rem); line-height:.78; letter-spacing:-.07em; text-transform:uppercase; }
.brands-hero h1 span { color:var(--red); }
.brands-hero-grid { display:grid; gap:24px; }
.brands-statement { font-size:1.04rem; color:#595959; max-width:630px; }
.logo-wall { background:#0d0d0d; color:#fff; }
.logo-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#333; border:1px solid #333; margin-top:32px; }
.logo-card { min-height:145px; background:#0d0d0d; display:flex; flex-direction:column; justify-content:center; padding:22px; }
.logo-card strong { font-size:1.7rem; letter-spacing:-.04em; text-transform:uppercase; }
.logo-card span { color:#9f9fa3; font-size:.82rem; margin-top:5px; }
.brand-photo-mosaic { display:grid; gap:14px; }
.brand-photo-mosaic figure { margin:0; min-height:280px; position:relative; border-radius:20px; overflow:hidden; }
.brand-photo-mosaic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compat-section { background:#f3f1ed; }
.compat-grid { display:grid; gap:18px; }
.compat-card { padding:23px; background:#fff; border-radius:18px; border-top:4px solid #111; }
.compat-card:nth-child(2) { border-top-color:var(--red); }
.compat-card:nth-child(3) { border-top-color:#777; }
.compat-card h3 { margin:0 0 8px; }
.compat-card p { margin:0; color:#676767; }
.vin-banner { background:var(--red); color:#fff; }
.vin-banner-grid { display:grid; gap:22px; }
.vin-banner h2 { margin:0; font-size:clamp(2.2rem,9vw,4.8rem); line-height:.92; letter-spacing:-.05em; }
.vin-points { display:grid; gap:10px; }
.vin-points span { display:flex; gap:11px; align-items:center; }
.vin-points span::before { content:""; width:9px; height:9px; border-radius:50%; background:#fff; flex:0 0 auto; }

/* Contact page */
.contact-body { background:#090909; color:#fff; }
.contact-hero { padding:56px 0 46px; border-bottom:1px solid var(--line); }
.contact-hero-grid { display:grid; gap:28px; }
.contact-hero h1 { margin:8px 0 18px; font-size:clamp(3rem,14vw,7.5rem); line-height:.82; letter-spacing:-.065em; text-transform:uppercase; }
.big-phone { display:block; color:var(--red-soft); font-size:clamp(2rem,10vw,5rem); line-height:.95; font-weight:950; letter-spacing:-.06em; word-break:break-word; }
.contact-hero p { color:#bdbdc0; max-width:640px; }
.contact-cards { display:grid; gap:12px; }
.contact-card { background:#151515; border:1px solid var(--line); border-radius:18px; padding:22px; }
.contact-card small { color:#8f8f94; text-transform:uppercase; letter-spacing:.1em; font-weight:850; }
.contact-card strong { display:block; margin-top:6px; font-size:1.2rem; }
.contact-card a:hover { color:#ff4c45; }
.map-section { background:#fff; color:#111; }
.map-grid { display:grid; gap:20px; }
.map-frame { min-height:390px; border:0; border-radius:22px; width:100%; box-shadow:var(--shadow); }
.map-copy { padding:6px 0; }
.map-copy h2 { margin:10px 0 14px; font-size:clamp(2rem,9vw,4.2rem); line-height:.94; letter-spacing:-.05em; }
.map-copy p { color:#626262; }
.no-form { background:#f2f0ec; border-left:4px solid var(--red); padding:17px; border-radius:0 12px 12px 0; margin-top:20px; }
.faq-section { background:#0d0d0d; }
.faq-list { margin-top:28px; display:grid; gap:10px; }
.faq-list details { border:1px solid var(--line); border-radius:14px; padding:0 17px; background:#121212; }
.faq-list summary { cursor:pointer; padding:17px 0; font-weight:850; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; color:var(--red-soft); font-size:1.35rem; line-height:1; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { color:#b5b5b9; margin:0 0 18px; }

/* Shared CTA and footer */
.cta-band { background:#111; color:#fff; border-top:1px solid var(--line); }
.cta-inner { display:grid; gap:20px; align-items:center; }
.cta-inner h2 { margin:0; font-size:clamp(1.9rem,8vw,3.6rem); line-height:.95; letter-spacing:-.045em; }
.cta-inner p { margin:8px 0 0; color:#b7b7bb; }
.site-footer { background:#060606; color:#fff; padding:42px 0 24px; }
.footer-grid { display:grid; gap:30px; }
.footer-brand p { color:#96969a; max-width:440px; margin:14px 0 0; }
.footer-title { font-size:.78rem; color:#7d7d82; text-transform:uppercase; letter-spacing:.12em; font-weight:900; margin-bottom:10px; }
.footer-links { display:grid; gap:7px; }
.footer-links a { color:#d6d6d8; }
.footer-links a:hover { color:#fff; }
.footer-bottom { margin-top:32px; padding-top:18px; border-top:1px solid var(--line); color:#77777c; font-size:.82rem; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; }
.footer-logo { width:144px; height:54px; object-fit:contain; background:#fff; border-radius:10px; padding:5px 8px; }

/* Breadcrumb */
.breadcrumb { font-size:.78rem; color:#85858a; padding-top:18px; }
.breadcrumb a { color:inherit; }
.breadcrumb span { margin:0 7px; }

/* Responsive */
@media (min-width: 600px) {
  .container { width:min(100% - 48px, var(--container)); }
  .section { padding:88px 0; }
  .brand-city { display:block; }
  .category-grid, .parts-grid, .process-grid, .oil-guide-grid, .compat-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:1.15fr .85fr; }
  .gallery-grid figure:first-child { grid-row:span 2; min-height:494px; }
  .gallery-grid figure:not(:first-child) { min-height:240px; }
  .brand-row { grid-template-columns:repeat(4,1fr); }
  .logo-grid { grid-template-columns:repeat(2,1fr); }
  .contact-cards { grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 820px) {
  .nav-toggle { display:none; }
  .desktop-nav { display:flex; align-items:center; gap:4px; }
  .desktop-nav a { padding:10px 11px; border-radius:9px; color:#cdcdcf; font-size:.9rem; font-weight:760; }
  .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color:#fff; background:#1b1b1b; }
  .header-call { display:inline-flex; min-height:44px; padding:9px 14px; }
  .home-hero-grid, .parts-hero-grid, .oils-hero-grid, .brands-hero-grid, .map-grid, .vin-banner-grid, .local-seo-grid, .home-about-grid, .parts-intro {
    grid-template-columns:1.08fr .92fr;
  }
  .home-hero-grid { min-height:650px; align-items:center; padding:70px 0; }
  .home-hero-photo { min-height:520px; }
  .trust-grid { grid-template-columns:repeat(4,1fr); }
  .category-grid { grid-template-columns:repeat(3,1fr); }
  .category-card:nth-child(1), .category-card:nth-child(5) { min-height:270px; }
  .category-card:nth-child(2) { transform:translateY(24px); }
  .category-card:nth-child(2):hover { transform:translateY(20px); }
  .about-photo { min-height:520px; }
  .gallery-grid { grid-template-columns:1.2fr .8fr .8fr; }
  .gallery-grid figure:first-child { grid-row:span 1; min-height:390px; }
  .gallery-grid figure { min-height:390px!important; }
  .parts-hero-grid { grid-template-columns:1.2fr .55fr; min-height:470px; align-items:center; }
  .parts-grid { grid-template-columns:repeat(3,1fr); }
  .part-card:nth-child(2), .part-card:nth-child(5), .part-card:nth-child(8) { transform:translateY(18px); }
  .process-grid { grid-template-columns:repeat(3,1fr); }
  .info-band-grid { grid-template-columns:repeat(3,1fr); }
  .oils-hero-grid { min-height:620px; }
  .oils-image { min-height:520px; }
  .fluid-item { grid-template-columns:76px minmax(220px, .55fr) 1fr; }
  .fluid-item h3 { margin:0; }
  .oil-guide-grid { grid-template-columns:repeat(3,1fr); }
  .warning { grid-column:span 3; }
  .logo-grid { grid-template-columns:repeat(4,1fr); }
  .brand-photo-mosaic { grid-template-columns:1.15fr .85fr; }
  .brand-photo-mosaic figure:first-child { min-height:520px; }
  .brand-photo-mosaic figure:last-child { min-height:520px; }
  .compat-grid { grid-template-columns:repeat(3,1fr); }
  .contact-hero-grid { grid-template-columns:1.25fr .75fr; align-items:end; }
  .map-grid { align-items:center; }
  .cta-inner { grid-template-columns:1fr auto; }
  .footer-grid { grid-template-columns:1.4fr .8fr .8fr; }
}

@media (min-width: 1100px) {
  .header-inner { min-height:78px; }
  .desktop-nav a { padding:10px 14px; }
  .home-hero-grid { grid-template-columns:1.06fr .78fr; gap:68px; }
  .home-hero h1 { font-size:6.65rem; }
  .category-grid { grid-template-columns:repeat(5,1fr); }
  .category-card { min-height:285px; }
  .category-card:nth-child(2) { transform:translateY(28px); }
  .category-card:nth-child(4) { transform:translateY(14px); }
  .parts-grid { grid-template-columns:repeat(4,1fr); }
  .process-grid { grid-template-columns:repeat(3,1fr); }
  .oils-hero-grid { grid-template-columns:.9fr 1.1fr; gap:64px; }
  .contact-cards { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; }
}

/* Mobile header: call CTA stays out of the header; phone CTA remains available inside the menu. */
@media (max-width: 819.98px) {
  .site-header .header-call { display: none !important; }
}