* { box-sizing: border-box; }
:root {
  --bg: #0b1320;
  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --panel: #f7f9fc;
  --yellow: #f5c542;
  --yellow-dark: #dcae22;
  --white: #fff;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}
a { color: inherit; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11,19,32,.96);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { min-height: 72px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; margin-right:auto; }
.bolt { color:var(--yellow); font-size:1.35rem; }
.desktop-nav { display:flex; gap:26px; }
.desktop-nav a { text-decoration:none; color:#d0d5dd; font-size:.95rem; font-weight:600; }
.desktop-nav a:hover { color:white; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--yellow);
  color:#111827;
  padding:14px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  border:1px solid var(--yellow);
  cursor:pointer;
  font:inherit;
}
.btn:hover { background:var(--yellow-dark); border-color:var(--yellow-dark); }
.btn-small { padding:10px 15px; }
.btn-outline { background:transparent; color:white; border-color:rgba(255,255,255,.45); }
.btn-outline:hover { background:white; color:#111827; border-color:white; }
.full { width:100%; }

.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(245,197,66,.16), transparent 28%),
    linear-gradient(135deg, #0b1320 0%, #111d30 100%);
  color:white;
  padding:92px 0;
}
.hero-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:70px; align-items:center; }
.eyebrow { color:#b7791f; letter-spacing:.14em; font-size:.78rem; font-weight:800; margin-bottom:12px; }
.hero .eyebrow { color:var(--yellow); }
h1 { font-size:clamp(2.7rem, 6vw, 5rem); line-height:1.03; margin:0 0 22px; max-width:760px; }
h2 { font-size:clamp(2rem, 4vw, 3rem); line-height:1.12; margin:0 0 18px; }
h3 { margin:0 0 9px; }
.hero-copy { color:#d0d5dd; font-size:1.15rem; max-width:690px; margin-bottom:30px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.trust-row { display:flex; gap:22px; flex-wrap:wrap; color:#e4e7ec; margin-top:30px; font-size:.92rem; }
.hero-card {
  background:white;
  color:var(--ink);
  border-radius:20px;
  padding:34px;
  box-shadow:0 26px 70px rgba(0,0,0,.28);
}
.panel-icon { font-size:2.2rem; margin-bottom:16px; }
.hero-card p { color:var(--muted); }
.small { font-size:.85rem; text-align:center; margin-bottom:0; }

.section { padding:86px 0; }
.alt { background:var(--panel); }
.section-heading { max-width:720px; margin-bottom:40px; }
.section-heading p { color:var(--muted); font-size:1.05rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card {
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
  background:white;
  box-shadow:0 8px 24px rgba(16,24,40,.04);
}
.card .icon { font-size:1.8rem; margin-bottom:14px; }
.card p { color:var(--muted); margin-bottom:0; }

.about-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
.about-grid p { color:var(--muted); }
.feature-box { background:#111d30; color:white; padding:34px; border-radius:18px; }
.feature-box ul { margin:18px 0 0; padding-left:22px; color:#e4e7ec; }
.feature-box li { margin:10px 0; }
.text-link { font-weight:800; text-decoration:none; }

.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
blockquote {
  margin:0;
  padding:26px;
  background:var(--panel);
  border-radius:16px;
  border:1px solid var(--line);
}
blockquote footer { margin-top:16px; font-weight:700; color:#344054; }
.stars { color:#b7791f; letter-spacing:.12em; margin-bottom:12px; }
.review-note { color:var(--muted); font-size:.86rem; margin-top:18px; }

.contact-section { background:#0b1320; color:white; }
.light { color:var(--yellow); }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.contact-grid > div > p { color:#d0d5dd; }
.contact-details { display:grid; gap:12px; margin-top:28px; }
.contact-details a { text-decoration:none; color:white; }
.contact-form { background:white; color:var(--ink); border-radius:18px; padding:28px; display:grid; gap:16px; }
.contact-form label { display:grid; gap:7px; font-size:.9rem; font-weight:700; }
input, textarea {
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:9px;
  padding:12px 13px;
  font:inherit;
}
input:focus, textarea:focus { outline:3px solid rgba(245,197,66,.25); border-color:#c59b1c; }
.form-note { margin:0; color:var(--muted); font-size:.8rem; }

.site-footer { padding:30px 0 90px; background:#070d16; color:#98a2b3; font-size:.88rem; }
.footer-row { display:flex; justify-content:space-between; gap:30px; }
.site-footer strong { color:white; }
.mobile-call { display:none; }

@media (max-width: 820px) {
  .desktop-nav { display:none; }
  .hero { padding:66px 0; }
  .hero-grid, .about-grid, .contact-grid { grid-template-columns:1fr; gap:38px; }
  .cards, .reviews { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .container { width:min(100% - 28px, 1120px); }
  .site-header .btn-small { display:none; }
  .nav { min-height:64px; }
  .brand { font-size:.93rem; }
  .hero { padding:54px 0; }
  h1 { font-size:2.65rem; }
  .cards, .reviews { grid-template-columns:1fr; }
  .section { padding:66px 0; }
  .hero-card, .contact-form { padding:23px; }
  .footer-row { flex-direction:column; }
  .mobile-call {
    display:flex;
    position:fixed;
    bottom:14px;
    left:14px;
    right:14px;
    z-index:30;
    justify-content:center;
    align-items:center;
    background:var(--yellow);
    color:#111827;
    text-decoration:none;
    font-weight:800;
    border-radius:12px;
    padding:14px 16px;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
  }
}


.van-photo {
  margin-bottom: 28px;
  border-radius: 18px;
  overflow: hidden;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.van-photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.van-photo p {
  color: #475467;
  padding: 16px 20px;
  margin: 0;
  font-size: .95rem;
}

.quick-actions {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 18px 0;
}
.quick-action {
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  font-weight: 800;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16,24,40,.08);
  border-color: #d4a91d;
}
.qa-icon { font-size: 1.35rem; }
.nfc-note { font-size: .95rem; color: #d0d5dd; }

.mobile-action-bar {
  display: none;
}

@media (max-width: 980px) {
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-action {
    min-height: 82px;
  }
  .mobile-call {
    display: none;
  }
  .mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #0b1320;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -8px 24px rgba(0,0,0,.2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-action-bar a {
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 8px;
    font-size: .76rem;
    font-weight: 700;
  }
  .mobile-action-bar a:first-child {
    color: var(--yellow);
  }
  body {
    padding-bottom: 68px;
  }
}

.kme-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: inset 0 0 0 2px rgba(245,197,66,.12);
}
.brand-words {
  letter-spacing: .02em;
}
.hero-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 22px;
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .84rem;
}
.hero-kme {
  width: 72px;
  height: 72px;
  border: 5px solid var(--yellow);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  letter-spacing: -.06em;
  box-shadow: 0 0 0 3px rgba(245,197,66,.12);
}
.license-line {
  color: var(--yellow);
  font-weight: 700;
  font-size: .9rem;
  margin: 24px 0 0;
}
@media (max-width: 600px) {
  .brand-words { font-size: .82rem; }
  .hero-logo-lockup { align-items: center; font-size: .72rem; }
  .hero-kme { width: 62px; height: 62px; flex: 0 0 62px; }
}

/* ===== KME HERO REDESIGN ===== */

.hero {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(90deg,

      rgba(7,13,22,.98) 0%,

      rgba(11,19,32,.94) 48%,

      rgba(11,19,32,.76) 100%),

    repeating-linear-gradient(

      0deg,

      rgba(178,34,52,.10) 0px,

      rgba(178,34,52,.10) 28px,

      rgba(255,255,255,.035) 28px,

      rgba(255,255,255,.035) 56px

    );

}

.hero::before {

  content: "";

  position: absolute;

  inset: 0 auto auto 0;

  width: 46%;

  height: 54%;

  background:

    radial-gradient(circle, rgba(255,255,255,.14) 1.5px, transparent 2px);

  background-size: 22px 22px;

  opacity: .22;

  pointer-events: none;

}

.hero .container {

  position: relative;

  z-index: 2;

}

.hero-grid {

  grid-template-columns: 1.05fr 1fr;

  gap: 38px;

  align-items: center;

}

.van-photo {

  background: transparent;

  border-radius: 0;

  box-shadow: none;

  overflow: visible;

  margin: 0;

  transform: scale(1.12);

}

.van-photo img {

  width: 118%;

  max-width: none;

  margin-left: -8%;

  display: block;

  object-fit: contain;

  filter: drop-shadow(0 22px 28px rgba(0,0,0,.45));

  -webkit-mask-image:

    radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);

  mask-image:

    radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);

}

.van-photo p {

  display: none;

}

.hero h1 {

  text-shadow: 0 3px 18px rgba(0,0,0,.45);

}

.hero-actions .btn {

  box-shadow: 0 10px 26px rgba(245,197,66,.18);

}

@media (max-width: 820px) {

  .hero-grid {

    grid-template-columns: 1fr;

  }

  .van-photo {

    transform: none;

    margin-top: 18px;

  }

  .van-photo img {

    width: 108%;

    margin-left: -4%;

  }

  .hero::before {

    width: 100%;

    height: 44%;

    opacity: .15;

  }

}



/* ===== PROJECT GALLERY ===== */
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.project-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,24,40,.06);
}
.project-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  aspect-ratio:16/9;
  background:#0b1320;
}
.project-pair img, .project-single {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.project-single {
  aspect-ratio:16/9;
}
.project-copy { padding:22px 24px 24px; }
.project-copy h3 { margin-bottom:8px; }
.project-copy p { color:var(--muted); margin:0; }
@media (max-width:820px) {
  .project-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .project-pair { aspect-ratio:auto; grid-template-columns:1fr; }
  .project-pair img { aspect-ratio:4/3; }
}
.hero-kme-logo {
  display: block;
  width: min(260px, 80%);
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.kme-logo-img {
display: block;
width: 58px;
height: 58px;
object-fit: contain;
flex-shrink: 0;
}
/* FINAL KME LOGO SIZE FIX */
.kme-logo-img {
width: 58px !important;
max-width: 58px !important;
height: 58px !important;
max-height: 58px !important;
object-fit: contain !important;
}

.hero-kme-logo {
width: 150px !important;
max-width: 150px !important;
height: auto !important;
margin: 0 0 12px 0 !important;
object-fit: contain !important;
}

@media (max-width: 820px) {
.hero-kme-logo {
width: 110px !important;
max-width: 110px !important;
}
}

@media (max-width: 600px) {
  .hero-kme-logo {
    width: 70px !important;
    max-width: 70px !important;
  }
}