/* KHATLON LLC — REDESIGNED STYLES v2 */
/* Design: Industrial / Road-Worn — asphalt dark, amber accent, condensed type */

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

:root {
  --asphalt:    #18181a;
  --asphalt-2:  #222226;
  --asphalt-3:  #2c2c32;
  --asphalt-4:  #38383f;
  --amber:      #d4890a;
  --amber-lt:   #f0a832;
  --amber-dim:  #7a4e06;
  --rust:       #b83a1e;
  --rust-lt:    #d44a28;
  --chalk:      #f0ede6;
  --chalk-dim:  #c8c4ba;
  --chalk-mute: #8a877f;
  --white:      #ffffff;
  --green:      #2a7a4a;

  --ff-display: 'Barlow Condensed', sans-serif;
  --ff-body:    'Barlow', sans-serif;
  --ff-serif:   'Zilla Slab', serif;

  --shadow-sm:  0 2px 8px rgba(0,0,0,.35);
  --shadow-md:  0 8px 32px rgba(0,0,0,.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.55);
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--ff-body);
  background: var(--asphalt);
  color: var(--chalk);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
.container { max-width:1280px; margin:0 auto; padding:0 2rem }

/* ─── TICKER STRIP ─────────────────────────────────────────── */
.ticker {
  background: var(--amber);
  color: var(--asphalt);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  padding: .45rem 0;
  position: relative;
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 30s linear infinite;
}
.ticker-track span { padding:0 2.5rem }
.ticker-dot { color: var(--asphalt-2); opacity:.5 }
@keyframes ticker-scroll {
  0%   { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}

/* ─── TOP BAR ───────────────────────────────────────────────── */
.topbar {
  background: var(--asphalt-2);
  border-bottom: 1px solid var(--asphalt-4);
  font-family: var(--ff-body);
  font-size: .8rem;
  padding: .5rem 0;
  color: var(--chalk-dim);
}
.topbar-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem }
.topbar-left  { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center }
.topbar a:hover { color: var(--amber-lt) }
.dot-status { display:inline-flex; align-items:center; gap:.4rem }
.dot-status::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:#3ddc7f; box-shadow:0 0 8px #3ddc7f;
}

/* ─── LANG SWITCHER ─────────────────────────────────────────── */
.lang { position:relative; display:inline-block }
.lang-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--chalk);
  font-family: var(--ff-display);
  font-size: .8rem; font-weight: 700;
  padding: .3rem .75rem;
  cursor: pointer;
  letter-spacing: .06em;
  display: inline-flex; align-items:center; gap:.4rem;
  transition: background .15s;
  text-transform: uppercase;
}
.lang-btn:hover { background: rgba(255,255,255,.12) }
.lang-arrow { font-size:.6rem; transition:transform .2s }
.lang.open .lang-arrow { transform:rotate(180deg) }
.lang-menu {
  display: none;
  position: absolute; top:calc(100% + 4px); right:0;
  background: var(--asphalt-3);
  border: 1px solid var(--asphalt-4);
  box-shadow: var(--shadow-lg);
  min-width: 180px; z-index:200;
}
.lang.open .lang-menu { display:block }
.lang-menu button {
  display: flex; align-items:center; gap:.7rem;
  width:100%; text-align:left;
  background: none; border: none; border-bottom: 1px solid var(--asphalt-4);
  padding: .7rem 1rem;
  font-family: var(--ff-body); font-size:.92rem; color:var(--chalk);
  cursor: pointer;
}
.lang-menu button:last-child { border-bottom:none }
.lang-menu button:hover { background:var(--asphalt-4) }
.lang-menu button.active { background:var(--asphalt-4); font-weight:700; color:var(--amber-lt) }
.lang-flag { font-size:1.1rem }

/* ─── HEADER ────────────────────────────────────────────────── */
.header {
  background: var(--asphalt-2);
  border-bottom: 2px solid var(--amber);
  position: sticky; top:0; z-index:100;
  box-shadow: var(--shadow-md);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:2rem }

.logo { display:flex; align-items:center; gap:.8rem; font-family:var(--ff-display); font-weight:900; font-size:1.5rem; letter-spacing:.04em; color:var(--chalk) }
.logo-mark {
  width:44px; height:44px;
  background: var(--amber);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative;
}
.logo-mark::after {
  content:""; position:absolute; bottom:-6px; left:0; right:0;
  height:4px; background:var(--rust);
}
.logo-mark svg { width:26px; height:26px }
.logo-text small {
  display:block; font-family:var(--ff-body); font-size:.6rem; font-weight:600;
  color:var(--chalk-mute); letter-spacing:.22em; text-transform:uppercase; margin-top:-1px;
}

.nav { display:flex; gap:2rem; align-items:center }
.nav a {
  font-family: var(--ff-display); font-size:1rem; font-weight:700;
  color:var(--chalk-dim); letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem 0; transition:color .2s;
}
.nav a:hover, .nav a.current { color:var(--amber-lt) }
.nav a.cta {
  background: var(--amber); color: var(--asphalt);
  padding: .55rem 1.4rem;
  font-weight: 800; letter-spacing:.08em;
  transition: background .2s, color .2s;
}
.nav a.cta:hover { background:var(--amber-lt); color:var(--asphalt) }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; font-size:1.7rem; color:var(--chalk) }

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items:center; gap:.6rem;
  font-family: var(--ff-display); font-weight:800; font-size:1.05rem;
  padding: 1rem 2rem;
  border:none; cursor:pointer;
  transition: all .2s;
  letter-spacing:.08em; text-transform:uppercase;
}
.btn-primary  { background:var(--amber); color:var(--asphalt) }
.btn-primary:hover { background:var(--amber-lt); transform:translateY(-2px) }
.btn-secondary { background:transparent; color:var(--chalk); border:2px solid rgba(255,255,255,.25) }
.btn-secondary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5) }
.btn-dark  { background:var(--asphalt-2); color:var(--chalk); border:2px solid var(--asphalt-4) }
.btn-dark:hover { background:var(--asphalt-3) }
.btn-ghost { background:transparent; color:var(--chalk); border:2px solid var(--amber) }
.btn-ghost:hover { background:var(--amber); color:var(--asphalt) }
.btn-arrow { transition:transform .2s }
.btn:hover .btn-arrow { transform:translateX(5px) }

/* ─── SECTIONS ──────────────────────────────────────────────── */
section { padding: 5rem 0 }
.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: .8rem; font-weight:800;
  letter-spacing: .22em; text-transform:uppercase;
  color: var(--amber); margin-bottom:.9rem;
}
h1, h2, h3 { font-family:var(--ff-display); font-weight:900; line-height:1.0; letter-spacing:-.01em }
h2 { font-size: clamp(2.2rem,3.5vw,3.2rem); margin-bottom:1rem }
.section-lead { font-size:1.1rem; color:var(--chalk-dim); max-width:680px; margin-bottom:3rem; line-height:1.6 }

/* diagonal section divider */
.section-cut {
  clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 100%);
  padding-top: 7rem;
}
.section-cut-rev {
  clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%);
  padding-top: 7rem;
}

/* ─── PAGE HERO ─────────────────────────────────────────────── */
.page-hero {
  background: var(--asphalt-2);
  border-bottom: 3px solid var(--amber);
  color: var(--chalk);
  padding: 4rem 0 5rem;
  position: relative; overflow:hidden;
}
.page-hero::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,137,10,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,137,10,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:2 }
.page-hero h1 { font-size:clamp(2.4rem,5vw,4rem); margin-bottom:1rem }
.page-hero p { font-size:1.15rem; color:var(--chalk-dim); max-width:700px }

/* ─── TRUST BAR ─────────────────────────────────────────────── */
.trust-bar {
  background: var(--asphalt-3);
  border-bottom: 1px solid var(--asphalt-4);
  padding: 2rem 0;
}
.trust-inner { display:grid; grid-template-columns:auto repeat(4,1fr); gap:2rem; align-items:center }
.trust-label {
  font-family:var(--ff-display); font-size:.75rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-mute);
  border-right:1px solid var(--asphalt-4); padding-right:2rem;
}
.trust-item { display:flex; align-items:center; gap:.75rem; font-family:var(--ff-display); font-weight:700; font-size:1rem; color:var(--chalk); letter-spacing:.04em; text-transform:uppercase }
.trust-icon {
  width:34px; height:34px; background:var(--amber); color:var(--asphalt);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.trust-icon svg { width:18px; height:18px }

/* ─── FOOTER ────────────────────────────────────────────────── */
.footer { background:var(--asphalt-2); border-top:3px solid var(--amber); color:var(--chalk-mute); padding:4rem 0 1.5rem }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.footer-brand .logo { margin-bottom:1.1rem }
.footer-brand p { font-size:.92rem; line-height:1.65 }
.footer h4 { font-family:var(--ff-display); color:var(--chalk); font-size:.85rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.2rem; border-bottom:1px solid var(--asphalt-4); padding-bottom:.7rem }
.footer ul { list-style:none }
.footer ul li { margin-bottom:.65rem }
.footer ul a { font-size:.92rem; transition:color .2s }
.footer ul a:hover { color:var(--amber-lt) }
.footer-meta { font-size:.88rem; line-height:1.8 }
.footer-meta strong { color:var(--chalk) }
.footer-bottom {
  border-top:1px solid var(--asphalt-4);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.8rem; color:var(--chalk-mute);
}

/* ─── FORMS ─────────────────────────────────────────────────── */
.form-card {
  background: var(--asphalt-2);
  padding: 2.5rem;
  border-top: 4px solid var(--amber);
  border: 1px solid var(--asphalt-4);
  border-top-width: 4px;
}
.form-card h3 { font-family:var(--ff-display); font-size:1.6rem; font-weight:900; color:var(--chalk); margin-bottom:.4rem }
.form-sub { font-size:.92rem; color:var(--chalk-mute); margin-bottom:2rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0 }
.form-group { margin-bottom:1rem }
.form-group label {
  display:block; font-family:var(--ff-display); font-size:.8rem; font-weight:800;
  color:var(--amber); margin-bottom:.4rem; letter-spacing:.1em; text-transform:uppercase;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.85rem 1rem;
  background: var(--asphalt-3); border: 1.5px solid var(--asphalt-4);
  color:var(--chalk); font-family:var(--ff-body); font-size:.98rem;
  transition: border-color .15s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--chalk-mute) }
.form-group select option { background:var(--asphalt-3) }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--amber);
}
.form-group textarea { resize:vertical; min-height:90px }
.radio-group { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1rem }
.radio-card {
  display:flex; align-items:flex-start; gap:.7rem;
  padding:1rem; border:1.5px solid var(--asphalt-4);
  background:var(--asphalt-3); cursor:pointer; transition:all .15s;
}
.radio-card:hover { border-color:var(--amber-dim) }
.radio-card input { margin-top:.2rem; cursor:pointer; accent-color:var(--amber) }
.radio-card:has(input:checked) { border-color:var(--amber); background:rgba(212,137,10,.1) }
.radio-content strong { display:block; font-family:var(--ff-display); font-weight:800; color:var(--chalk); font-size:1rem; margin-bottom:.15rem; letter-spacing:.04em }
.radio-content span { font-size:.82rem; color:var(--chalk-mute); line-height:1.4 }
.form-submit {
  width:100%; background:var(--amber); color:var(--asphalt);
  border:none; padding:1.1rem; font-family:var(--ff-display); font-size:1.1rem; font-weight:900;
  cursor:pointer; letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s; margin-top:.5rem;
}
.form-submit:hover { background:var(--amber-lt) }
.form-submit:disabled { opacity:.6; cursor:not-allowed }
.form-disclaimer { font-size:.78rem; color:var(--chalk-mute); margin-top:1rem; text-align:center; line-height:1.5 }
.form-success {
  display:none; background:rgba(42,122,74,.2); color:#6ee89e;
  padding:1.2rem; border-left:4px solid var(--green); margin-bottom:1rem; font-size:.95rem;
}
.form-success.show { display:block }

/* ─── FINAL CTA ─────────────────────────────────────────────── */
.final-cta {
  background: var(--rust);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 20px,
    rgba(0,0,0,.07) 20px, rgba(0,0,0,.07) 40px
  );
  color:var(--white); text-align:center; padding:5rem 0;
  position:relative;
}
.final-cta h2 { color:var(--white); margin-bottom:1rem }
.final-cta p { font-size:1.15rem; color:rgba(255,255,255,.8); max-width:580px; margin:0 auto 2.5rem }
.final-cta .btn { background:var(--chalk); color:var(--rust); font-size:1rem }
.final-cta .btn:hover { background:var(--asphalt); color:var(--chalk) }

/* ─── TRUCK IMAGES ──────────────────────────────────────────── */
.hero-truck img { width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) }
.program-truck img, .fleet-truck img, .oo-truck img, .cpm-truck img {
  width:100%; height:220px; object-fit:cover; display:block;
}
.fleet-truck img { height:200px }
.oo-truck img { height:300px; max-height:300px }
.cpm-truck img { height:180px }
.program-truck img { height:200px }
@media (max-width:600px) {
  .program-truck img, .fleet-truck img, .oo-truck img, .cpm-truck img { height:160px }
}

/* ─── MOBILE ────────────────────────────────────────────────── */
@media (max-width:960px) {
  .container { padding:0 1.25rem }
  .nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--asphalt-2); flex-direction:column; align-items:stretch;
    padding:1rem; border-top:2px solid var(--amber);
    box-shadow:var(--shadow-lg); gap:0; z-index:200;
  }
  .nav.open { display:flex }
  .nav a { padding:1rem .5rem; border-bottom:1px solid var(--asphalt-4) }
  .nav a.cta { margin-top:.5rem; text-align:center }
  .menu-toggle { display:block }
  .header { position:relative }
  section { padding:3rem 0 }
  .section-cut, .section-cut-rev { clip-path:none; padding-top:3rem }
  .trust-inner { grid-template-columns:1fr 1fr; gap:1rem }
  .trust-label { grid-column:1/-1; border-right:none; border-bottom:1px solid var(--asphalt-4); padding-right:0; padding-bottom:1rem }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem }
  .topbar { font-size:.75rem }
  .topbar-left { gap:.8rem }
  h2 { font-size:1.9rem }
  .form-row, .radio-group { grid-template-columns:1fr }
}
@media (max-width:520px) {
  .footer-grid { grid-template-columns:1fr }
}