/* ============================================================
   VKG Auto Parts — global stylesheet
   Design language reskinned from VKG Agri Parts reference:
   white + crimson, heavy grotesque headlines, red section labels.
   ============================================================ */

:root {
  --red: #c8102e;
  --red-dark: #a50d25;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --muted: #6b7280;
  --line: #e7e7e7;
  --cream: #f6efe9;
  --cream-2: #f2e9e1;
  --white: #ffffff;
  --footer: #141414;
  --footer-2: #1d1d1d;
  --maxw: 1240px;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(17, 17, 17, 0.10);
  --header-h: 92px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
}

.display {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.h-xl { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.h-lg { font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
.h-md { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;
margin-left:0px;margin-bottom:20px;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.form-control:focus{border-color:#046697;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(3, 151, 225, .6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(3, 151, 225, .6);}
.form-control::-moz-placeholder{color:#999;opacity:1;}
.form-control:-ms-input-placeholder{color:#999;}
.form-control::-webkit-input-placeholder{color:#999;}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee;opacity:1;}
textarea.form-control{height:auto;}
input[type="search"]{-webkit-appearance:none;}



.fax {
    display: none;
}


.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section.cream { background: var(--cream); }
.section.ink { background: var(--footer); color: #efeae5; }
.section.ink h2, .section.ink h3 { color: #fff; }

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color:#fff; }
.arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo (VKG Impex mark — SVG, swap for raster in images/ if preferred) */
.logo { display: flex; align-items: center; gap: 14px; }
.logo-img { height: 80px; width: auto; display: block; }
.site-footer .logo-img { height: 74px; background: #fff; padding: 9px 16px; border-radius: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Legacy CSS lockup (kept for reference, no longer used) */
.logo-badge {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(200,16,46,.35);
  flex: 0 0 auto;
}
.logo-text { line-height: 1; }
.logo-text .brand-main {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  display: block;
}
.logo-text .brand-sub {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px; display: block;
}
.logo-text .brand-division {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #b6b6b6; margin-top: 4px; display: block;
}

/* Nav */
.nav { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 1rem; font-weight: 600; color: var(--ink); padding: 6px 0;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { font-weight: 700; }

/* Language dropdown */
.lang { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  padding: 6px 0;
}
.lang-toggle .caret { transition: transform .2s ease; font-size: .7rem; }
.lang.open .lang-toggle .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 210px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: inherit; font-size: .98rem; font-weight: 500; color: var(--ink);
  padding: 11px 16px; border-radius: 8px; cursor: pointer;
}
.lang-menu button:hover { background: #f4f4f4; }
.lang-menu button.active { background: var(--red); color: #fff; font-weight: 700; }

/* Mobile toggle */
.menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.menu-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease; margin: 5px 0;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
  /* Static fallback gradient (sunset-port tones) shown until the logistics
     photo is added at images/hero-logistics.jpg */
  background:
    linear-gradient(90deg, rgba(8,16,34,.62) 0%, rgba(8,16,34,.32) 55%, rgba(8,16,34,.14) 100%),
    linear-gradient(120deg, #10294d 0%, #7d5a3a 52%, #e6a94e 100%);
  background-size: cover;
  background-position: center;
}
.hero.has-image {
  /* Static image — no animation. The sun sits in the left third of the photo,
     so the scrim is darkest on the RIGHT (behind the text) and clears toward the
     left so the sunset stays bright and unobstructed. */
  background:
    linear-gradient(90deg, rgba(8,16,34,0) 0%, rgba(8,16,34,.06) 40%, rgba(8,16,34,.34) 72%, rgba(8,16,34,.6) 100%),
    url("../images/hero-logistics.jpg");
  background-size: cover;
  background-position: left center;
}
.hero.has-image .hero-inner h1 { text-shadow: 0 2px 18px rgba(6,12,26,.55); }
.hero.has-image .hero-inner p { text-shadow: 0 1px 12px rgba(6,12,26,.5); }
.hero-inner { position: relative; z-index: 2; padding: 60px 0 90px; max-width: 560px; margin-left: auto; }
.hero-badge {
  display: inline-block; border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: 9px 20px;
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 30px;
}
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -0.03em; }
.hero p {
  margin-top: 22px; font-size: clamp(1rem, 1.4vw, 1.22rem);
  color: rgba(255,255,255,.9); max-width: 560px;
}
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2;
}
.scroll-hint .container { display: flex; align-items: center; gap: 16px;
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.scroll-hint .line { width: 70px; height: 1px; background: rgba(255,255,255,.6); }

/* Page hero (interior pages) */
.page-hero { padding: 84px 0 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.page-hero .lead { margin-top: 20px; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--cream); }
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.stat-card {
  background: #fff; border-top: 4px solid var(--red);
  border-radius: 6px; padding: 46px 30px; text-align: center;
  box-shadow: 0 10px 30px rgba(17,17,17,.05);
}
.stat-num { font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; }
.stat-label { margin-top: 10px; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   GENERIC LAYOUT HELPERS
   ============================================================ */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.split.reverse > :first-child { order: 2; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.feature {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #dcdcdc; }
.feature .num { font-size: .8rem; font-weight: 800; color: var(--red); letter-spacing: .1em; }
.feature h3 { margin: 14px 0 10px; font-size: 1.35rem; }
.feature p { color: var(--ink-soft); margin: 0; }

/* Category tiles */
.cat {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red); }
.cat h3 { font-size: 1.2rem; margin: 0 0 8px; }
.cat p { margin: 0; color: var(--muted); font-size: .95rem; }
.cat .kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }

/* Brand cards */
.brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.brand-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #dcdcdc; }
.brand-logo {
  height: 150px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  padding: 22px; text-align: center; overflow: hidden;
}
.brand-name {
  background: var(--cream); text-align: center; padding: 16px;
  font-weight: 700; font-size: 1.02rem; border-top: 1px solid var(--line);
}
.brand-sub { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 3px; }
.brand-logo { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.brand-logo.brand-more { color: var(--red); }
/* Real logo image — sits inside the .brand-logo box; wordmark shows only if the file is missing */
.brand-logo .brand-img { max-height: 96px; max-width: 84%; width: auto; object-fit: contain; }
.brand-logo .brand-img + .brand-wm { display: none; }
/* Logos that render small at the shared cap get a touch more room so the grid
   reads evenly instead of some marks looking shrunken. */
.brand-logo.b-minda .brand-img,
.brand-logo.b-mando .brand-img,
.brand-logo.b-valeo .brand-img,
.brand-logo.b-nissan .brand-img { max-height: 108px; max-width: 90%; }
/* Logos with a solid baked-in background get a full matching panel so they read
   as intentional tiles instead of a small block floating on white. */
.brand-logo.b-renault  { background: #000; }
.brand-logo.b-mahindra { background: #e93423; }
.brand-logo.b-renault .brand-img,
.brand-logo.b-mahindra .brand-img { max-height: 118px; max-width: 88%; }
/* Brand wordmark colors (styled stand-ins — drop official logo images in images/brands/ to replace) */
.b-suzuki   { color: #E30A17; }
.b-hyundai  { color: #002C5F; font-style: italic; }
.b-kia      { color: #05141F; }
.b-tata     { color: #1A5DAD; }
.b-mahindra { color: #E31837; }
.b-toyota   { color: #EB0A1E; }
.b-honda    { color: #E00000; }
.b-nissan   { color: #C3002F; }
.b-renault  { color: #111111; }
.b-bosch    { color: #EA0016; }
.b-minda    { color: #E01F26; }
.b-mando    { color: #003DA5; }
.b-valeo    { color: #0072BC; }
.b-sangsin  { color: #C8102E; }
.b-nsk      { color: #00337F; }
.b-ngk      { color: #E4002B; }

/* Bullet list */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.tick-list li:last-child { border-bottom: none; }
.tick-list li::before {
  content: "→"; position: absolute; left: 0; top: 10px; color: var(--red); font-weight: 800;
}

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 0 auto; }
.cta-band p { margin: 18px auto 30px; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px; box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fafafa; transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: #fff;
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .88rem; color: var(--muted); margin-top: 6px; }

/* Contact info blocks */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: none; }
.info-list .label { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.info-list .value { font-size: 1.05rem; font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--footer); color: #cfcfcf; padding: 70px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 50px; }
.site-footer .logo-badge { box-shadow: none; }
.site-footer .logo-text .brand-main { color: #fff; }
.site-footer .logo-text .brand-sub { color: #9a9a9a; }
.site-footer .logo-text .brand-division { color: #6f6f6f; }
.footer-about { margin-top: 22px; max-width: 40ch; color: #a7a7a7; font-size: .96rem; }
.footer-col h4 { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8f8f8f; margin: 0 0 20px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a, .footer-col span { color: #cfcfcf; font-size: .98rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 54px; padding-top: 26px; border-top: 1px solid #2b2b2b;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #7f7f7f; font-size: .88rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .stats-grid, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse > :first-child { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 76px; }
  .logo-img { height: 62px; }
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 18px;
    transform: translateY(-120%); transition: transform .28s ease; z-index: 90;
    box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 16px 32px; font-size: 1.05rem; }
  .nav-links a::after { display: none; }
  .nav-cta { padding: 16px 32px; }
  .lang { padding: 8px 32px; }
  .lang-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 4px 0 0; min-width: 0; }
  .lang.open .lang-menu { display: block; }
  .lang:not(.open) .lang-menu { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .stats-grid, .cards-3, .cards-4, .cards-2, .brand-grid, .footer-grid, .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
  .logo-text .brand-sub { letter-spacing: .24em; }
  .footer-bottom { flex-direction: column; }
}