/* ============================================================
   KMI Engineering Pvt. Ltd. — style.css
   Bootstrap 5 Custom Theme
   ============================================================ */


/* ── CSS Custom Properties ── */
:root {
  --kmi-primary: #00366b;
  --kmi-primary-container: #1b4d89;
  --kmi-on-primary: #ffffff;
  --kmi-on-primary-container: #98bfff;
  --kmi-primary-fixed: #d5e3ff;
  --kmi-primary-fixed-dim: #a7c8ff;
  --kmi-secondary: #bb0014;
  --kmi-secondary-container: #e41f25;
  --kmi-on-secondary: #ffffff;
  --kmi-tertiary: #343637;
  --kmi-on-tertiary: #ffffff;
  --kmi-on-tertiary-container: #bdbebe;
  --kmi-background: #fcf9f8;
  --kmi-surface: #fcf9f8;
  --kmi-surface-container: #f0eded;
  --kmi-surface-container-low: #f6f3f2;
  --kmi-surface-container-high: #eae7e7;
  --kmi-surface-container-highest: #e5e2e1;
  --kmi-on-surface: #1c1b1b;
  --kmi-on-surface-variant: #424750;
  --kmi-outline: #737781;
  --kmi-outline-variant: #c3c6d1;
  --kmi-section-gap: 80px;
  --bs-primary: #00366b;
  --bs-primary-rgb: 0,54,107;
  --bs-secondary: #bb0014;
  --bs-secondary-rgb: 187,0,20;
  --bs-body-font-family: 'Hanken Grotesk', sans-serif;
  --bs-body-bg: #fcf9f8;
  --bs-body-color: #1c1b1b;
  --bs-border-radius: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-sm: 0;
}

/* ── Base ── */
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: var(--bs-body-font-family); background-color: var(--kmi-background); color: var(--kmi-on-surface); font-size: 18px; line-height: 1.5;}
::selection {background-color: var(--kmi-primary); color: var(--kmi-on-primary);}
a {text-decoration: none;}

/* ── Typography ── */
.font-mono {font-family: 'JetBrains Mono', monospace;}
.font-body {font-family: 'Hanken Grotesk', sans-serif;}
.display-hero {font-family: 'Hanken Grotesk', sans-serif; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em;}
.headline-lg {font-family: 'Hanken Grotesk', sans-serif; font-size: 32px; line-height: 1.25; font-weight: 700;}
.headline-md {font-family: 'Hanken Grotesk', sans-serif; font-size: 22px; line-height: 1.33; font-weight: 600;}
.label-md {font-family: 'JetBrains Mono', monospace; font-size: 16px; line-height: 1.4; letter-spacing: 0.05em; font-weight: 500;}
.label-sm {font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.33; font-weight: 500;}

.backend-link{color: var(--kmi-primary); text-decoration: none;}
.backend-link:hover{color: var(--kmi-secondary);}

/* ── Material Symbols ── */
.material-symbols-outlined {font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-style: normal; font-size: 24px; display: inline-block; vertical-align: middle; line-height: 1; user-select: none;}
.material-symbols-outlined.fill {font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;}

/* ── Color Utilities ── */
.text-primary {color: var(--kmi-primary) !important;}
.text-secondary {color: var(--kmi-secondary) !important;}
.text-on-surface {color: var(--kmi-on-surface) !important;}
.text-on-primary {color: var(--kmi-on-primary) !important;}
.text-on-secondary {color: var(--kmi-on-secondary) !important;}
.text-on-tertiary {color: var(--kmi-on-tertiary) !important;}
.text-on-tertiary-container {color: var(--kmi-on-tertiary-container) !important;}
.text-outline {color: var(--kmi-outline) !important;}
.text-primary-fixed {color: var(--kmi-primary-fixed) !important;}
.text-primary-fixed-dim {color: var(--kmi-primary-fixed-dim) !important;}
.text-on-primary-container {color: var(--kmi-on-primary-container) !important;}
.bg-primary {background-color: var(--kmi-primary) !important;}
.bg-secondary {background-color: var(--kmi-secondary) !important;}
.bg-surface {background-color: var(--kmi-surface) !important;}
.bg-surface-container {background-color: var(--kmi-surface-container) !important;}
.bg-surface-container-low {background-color: var(--kmi-surface-container-low) !important;}
.bg-surface-container-high {background-color: var(--kmi-surface-container-high) !important;}
.bg-surface-container-highest {background-color: var(--kmi-surface-container-highest) !important;}
.bg-tertiary {background-color: var(--kmi-tertiary) !important;}
.bg-primary-container {background-color: var(--kmi-primary-container) !important;}
.border-primary {border-color: var(--kmi-primary) !important;}
.border-secondary {border-color: var(--kmi-secondary) !important;}
.border-outline {border-color: var(--kmi-outline) !important;}
.border-outline-variant {border-color: var(--kmi-outline-variant) !important;}

/* ── NAVBAR ── */
header{background-color: var(--kmi-surface); border-bottom: 2px solid var(--kmi-primary); min-height: 80px;}
.kmi-navbar {}
.kmi-navbar .navbar-brand {color: var(--kmi-primary); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px;}
.kmi-navbar .navbar-brand .material-symbols-outlined {font-size: 32px; color: var(--kmi-primary);}
.kmi-navbar .nav-item{padding: 0 8px;}
.kmi-navbar .nav-link {font-family: 'JetBrains Mono', monospace; font-size: 16px; letter-spacing: 0.04em; font-weight: 500; color: var(--kmi-on-surface); padding: 0 4px; border-bottom: 4px solid transparent; transition: border-color 0.15s, color 0.15s; height: 80px; display: flex; align-items: center;}
.kmi-navbar .nav-link:hover {color: var(--kmi-primary); border-bottom-color: var(--kmi-outline-variant);}
.kmi-navbar .nav-link.active {color: var(--kmi-secondary); border-bottom-color: var(--kmi-secondary);}
.kmi-navbar .nav-link.active:hover {border-bottom-color: var(--kmi-secondary);}
.navbar {padding: 0;}
.navbar-brand img {width: 150px;}
.navbar-toggler {padding: 0; border: none; font-size: 26px; color: var(--kmi-primary);}
.navbar-toggler:focus, .navbar-toggler:active {box-shadow: none; border: none; outline: none;}
.nav-btn {margin-left: 16px;}
.btn-kmi-sm {background-color: var(--kmi-primary); color: var(--kmi-on-primary); border: none; border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 600; padding: 10px 24px; transition: background-color 0.15s, color 0.15s;}
.btn-kmi-sm:hover {background-color: var(--kmi-secondary); color: var(--kmi-on-primary);}
.kmi-offcanvas .nav-link {font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; color: var(--kmi-on-surface); padding: 14px 0; border-bottom: 1px solid var(--kmi-outline-variant); text-decoration: none; transition: color 0.15s;}
.kmi-offcanvas .nav-link:hover, .kmi-offcanvas .nav-link.active {color: var(--kmi-secondary);}
.btn-quote {background-color: var(--kmi-primary); color: var(--kmi-on-primary); border: none; border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 15px; padding: 10px 24px; transition: background-color 0.15s, color 0.15s; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center;}
.btn-quote:hover {background-color: var(--kmi-primary-container); color: var(--kmi-on-primary-container);}

/* ── FOOTER ── */
.kmi-footer {background-color: var(--kmi-primary); border-top: 4px solid var(--kmi-secondary);}
.kmi-footer .brand {font-size: 24px; font-weight: 800; color: var(--kmi-on-tertiary);}
.kmi-footer .nav-link {font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--kmi-on-tertiary-container); padding: 4px 0; transition: opacity 0.15s;}
.kmi-footer .nav-link:hover {color: var(--kmi-on-tertiary); opacity: 0.8;}
.kmi-footer .nav-link.underline {text-decoration: underline; color: var(--kmi-on-tertiary);}
.kmi-footer .copyright {font-size: 14px; color: var(--kmi-on-tertiary-container);}
.kmi-footer .tagline {font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kmi-on-tertiary); display: block; margin-top: 4px;}
.footer-logo img {width: 150px;}
.footer-nav ul {margin: 0; padding: 0; list-style-type: none; font-size: 16px;}
.footer-nav li {padding: 0 0 0 30px; display: inline-block;}
.footer-nav li a {color: #fff; text-decoration: none;}
.footer-nav li a:hover {color: #fff; opacity: 0.5;}
.footer-bottom {border-top: 1px solid rgba(0,0,0,.3); margin: 25px 0 0 0; padding: 15px 0 0 0; color: #fff; opacity: 0.7; font-size: 14px;}
.kmi-footer-contact {background-color: var(--kmi-surface-container); border-bottom: 1px solid var(--kmi-outline-variant); padding: 48px 0;}
.kmi-footer-contact .contact-card {background-color: var(--kmi-surface); border: 1px solid var(--kmi-outline-variant); padding: 16px; display: flex; align-items: center; gap: 16px; min-width: 240px;}
.kmi-footer-contact .contact-card .icon-wrap {background-color: var(--kmi-primary-container); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;}
.kmi-footer-contact .contact-card .icon-wrap .material-symbols-outlined {color: var(--kmi-on-primary-container); font-size: 22px;}
.kmi-footer-contact .contact-card a {font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--kmi-on-surface); text-decoration: none; transition: color 0.15s;}
.kmi-footer-contact .contact-card a:hover {color: var(--kmi-primary);}
.kmi-footer-contact .contact-card span.label {font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; color: var(--kmi-on-surface-variant); display: block; margin-bottom: 2px;}
.kmi-footer-main {padding: 24px 0;}
.kmi-footer-brand {font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; color: var(--kmi-on-tertiary); display: flex; align-items: center; gap: 8px;}
.kmi-footer-brand .material-symbols-outlined {color: var(--kmi-secondary);}
.kmi-footer-nav a {font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--kmi-on-tertiary-container); text-decoration: none; transition: opacity 0.15s; padding: 2px 0;}
.kmi-footer-nav a:hover {opacity: 0.8; color: var(--kmi-on-tertiary);}
.kmi-footer-nav a.underline {text-decoration: underline; color: var(--kmi-on-tertiary);}
.kmi-footer-copy {font-size: 13px; color: var(--kmi-on-tertiary-container);}
.kmi-footer-copy span {font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kmi-on-tertiary); display: block; margin-top: 2px;}

/* ── BUTTONS ── */
.btn-kmi-primary {background-color: var(--kmi-primary); color: var(--kmi-on-primary); border: 2px solid var(--kmi-primary); border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; font-weight: 600; padding: 14px 32px; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.15s, color 0.15s, border-color 0.15s; cursor: pointer;}
.btn-kmi-primary:hover {background-color: var(--kmi-secondary); color: var(--kmi-on-primary); border-color: var(--kmi-secondary);}
.btn-kmi-outline {background: transparent; color: var(--kmi-primary); border: 2px solid var(--kmi-primary); border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; font-weight: 600; padding: 14px 32px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s; cursor: pointer;}
.btn-kmi-outline:hover {color: var(--kmi-secondary); border: 2px solid var(--kmi-secondary);}
.btn-kmi-secondary {background-color: var(--kmi-secondary); color: var(--kmi-on-secondary); border: 2px solid var(--kmi-secondary); border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 600; padding: 14px 32px; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.15s, color 0.15s; text-decoration: none; cursor: pointer;}
.btn-kmi-secondary:hover {background-color: var(--kmi-secondary-container); color: var(--kmi-on-secondary);}
.btn-kmi-white-outline {background-color: transparent; color: #fff; border: 2px solid #fff; border-radius: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 600; padding: 14px 40px; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.15s, color 0.15s; text-decoration: none; cursor: pointer;}
.btn-kmi-white-outline:hover {background-color: #fff; color: var(--kmi-primary);}

/* ── SECTION UTILITIES ── */
.section-gap {padding-top: var(--kmi-section-gap); padding-bottom: var(--kmi-section-gap);}
.section-title {font-family: 'Hanken Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--kmi-on-surface); display: flex; align-items: center; gap: 16px;}
.section-title .title-line {width: 48px; height: 4px; background-color: var(--kmi-secondary); flex-shrink: 0;}
.section-accent {display: inline-block; border: 1px solid rgba(255,255,255,0.3); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;}

/* ── HERO ── */
.hero-section { }
.hero-tag {display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--kmi-secondary); padding-bottom: 8px; margin-bottom: 24px;}
.banner-text{font-size: 18px; max-width: 600px;}
.hero-banner-slide{position: relative; min-height: 650px; border-bottom: 1px solid var(--kmi-outline-variant); overflow: hidden; display: flex; align-items: center; background: url('../images/banner.jpg') no-repeat center/cover;}
.hero-banner-slide.banner-2{background: url('../images/banner-2.jpg') no-repeat center/cover;}
.hero-banner-slide.banner-3{background: url('../images/banner-3.jpg') no-repeat center/cover;}

/* ── PRODUCT CARDS ── */
.product-card {background-color: var(--kmi-surface); border: 1px solid var(--kmi-outline-variant); display: flex; flex-direction: column; height: 100%; transition: border-color 0.2s, box-shadow 0.2s;}
.product-card:hover {border-color: var(--kmi-primary); box-shadow: 4px 4px 0px 0px var(--kmi-primary);}
.product-card .card-img-wrap {height: 192px; border-bottom: 1px solid var(--kmi-outline-variant); background-color: #eceded; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; position: relative;}
.product-card .card-img-wrap img {width: 100%; height: 100%; object-fit: contain;  transition: transform 0.5s;}
.product-card:hover .card-img-wrap img {transform: scale(1.05);}
.product-card .card-badge {position: absolute; top: 8px; right: 8px; background-color: var(--kmi-surface); border: 1px solid var(--kmi-outline); padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--kmi-primary);}
.product-card .card-body {padding: 24px; display: flex; flex-direction: column; flex-grow: 1; gap: 16px;}
.product-card .card-title {font-family: 'Hanken Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--kmi-on-surface); line-height: 1.3;}
.product-card .card-list {list-style: none; padding: 0; margin: 0; flex-grow: 1;}
.product-card ul li{display: flex; align-items: flex-start; gap: 8px; font-size: 16px; color: var(--kmi-on-surface-var); padding: 4px 0 4px 16px; position: relative;}
.product-card ul li .material-symbols-outlined{width: 6px; height: 6px; background: var(--kmi-secondary); position: absolute; left: 0; top: 13px;}
.product-card .card-footer-link {border-top: 1px solid var(--kmi-outline-variant); padding-top: 16px; margin-top: auto;}
.product-card .card-footer-link a {font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--kmi-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s;}
.product-card:hover .card-footer-link a {color: var(--kmi-secondary);}

/* ── INDUSTRY CARDS ── */
.industry-card {background-color: var(--kmi-surface-container); border: 1px solid var(--kmi-outline-variant); padding: 24px; display: flex; align-items: flex-start; gap: 16px; transition: border-color 0.2s;}
.industry-card:hover {border-color: var(--kmi-primary);}
.industry-card .icon-box {background-color: var(--kmi-primary-container); padding: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; width: 40px; height: 40px; text-align: center;}
.industry-card .icon-box .material-symbols-outlined {color: var(--kmi-on-primary-container);}
.industry-card h4 {font-family: 'Hanken Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--kmi-on-surface); margin-bottom: 4px;}
.industry-card p {font-size: 16px; margin: 0;}

/* ── QUALITY PANEL ── */
.quality-panel {background-color: var(--kmi-primary); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; color: var(--kmi-on-primary); position: relative; overflow: hidden; height: 100%;}
.quality-panel .dot-bg {position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 20px 20px;}
.quality-panel .spec-item {border-left: 2px solid var(--kmi-secondary); padding: 4px 0 4px 16px;}
.quality-panel .spec-item h4 {font-size: 17px; font-weight: 600; margin-bottom: 2px; color: #fff;}
.quality-panel .spec-item p {font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--kmi-primary-fixed-dim); margin: 0;}
.quality-quote {font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--kmi-primary-fixed); border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; margin-top: 40px;}

/* ── ABOUT PAGE ── */
.stat-block {border-left: 2px solid var(--kmi-primary); padding-left: 12px;}
.stat-block.secondary {border-color: var(--kmi-secondary);}
.stat-block .stat-num {font-family: 'Hanken Grotesk', sans-serif; font-size: 24px; font-weight: 600; color: var(--kmi-primary); display: block;}
.stat-block.secondary .stat-num {color: var(--kmi-secondary);}
.stat-block .stat-label {font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; color: var(--kmi-on-surface-variant);}
.about-img-wrap {position: relative; padding: 16px;}
.about-img-wrap::before {content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-top: 4px solid var(--kmi-secondary); border-left: 4px solid var(--kmi-secondary); pointer-events: none;}
.about-img-wrap::after {content: ''; position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; border-bottom: 4px solid var(--kmi-primary); border-right: 4px solid var(--kmi-primary); pointer-events: none;}
.about-img-wrap .img-inner {background-color: var(--kmi-surface-container); border: 1px solid var(--kmi-outline-variant); padding: 8px; box-shadow: 8px 8px 0px 0px rgba(0,54,107,.1); position: relative; z-index: 1;}
.about-img-wrap .img-inner img {width: 100%; height: auto; display: block;}
.export-card {border: 1px solid var(--kmi-outline-variant); padding: 32px; transition: border-color 0.2s;}
.export-card:hover {border-color: var(--kmi-primary);}
.export-card i {font-size: 32px; color: var(--kmi-primary); margin-bottom: 16px; display: block; transition: transform 0.2s;}

/* ── QUALITY PAGE ── */
.industrial-border {border-left: 8px solid var(--kmi-secondary);}
.technical-grid-bg {background-image: linear-gradient(#f0eded 1px, transparent 1px), linear-gradient(90deg, #f0eded 1px, transparent 1px); background-size: 32px 32px;}
.process-step {border: 1px solid var(--kmi-outline-variant); padding: 32px; background-color: var(--kmi-surface); transition: border-color 0.2s, box-shadow 0.2s; position: relative;}
.process-step:hover {border-color: var(--kmi-secondary); box-shadow: 0 4px 0 0 var(--kmi-secondary);}
.process-step .step-num {position: absolute; top: -16px; left: 24px; background-color: var(--kmi-primary); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; padding: 4px 12px;}
.cert-card {aspect-ratio: 3/4; background-color: #fff; border: 1px solid var(--kmi-outline); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s;}
.cert-card:hover {border-color: var(--kmi-secondary);}
.cert-card .cert-inner {width: 100%; height: 100%; border: 1px dashed var(--kmi-outline-variant); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: background-color 0.2s;}
.cert-card:hover .cert-inner {background-color: rgba(187,0,20,.05);}
.cert-card i {font-size: 48px; color: var(--kmi-outline-variant); transition: color 0.2s;}
.cert-card:hover i {color: var(--kmi-secondary);}

/* ── INDUSTRIES PAGE ── */
.bento-card {border: 1px solid var(--kmi-outline-variant); background-color: var(--kmi-surface); padding: 32px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}
.bento-card:hover {transform: translateY(-4px); border-color: var(--kmi-primary); box-shadow: 0 8px 24px rgba(0,54,107,.1);}
.bento-card .material-symbols-outlined {font-size: 40px; color: var(--kmi-primary); margin-bottom: 12px; display: block;}
.bento-card ul li{padding: 4px 0 0 20px; position: relative; }
.bento-card ul li i{position: absolute; left: 0; top: 10px; color: var(--kmi-primary); font-size: 14px;}

/* ── CONTACT PAGE ── */
.industrial-grid-bg {background-image: linear-gradient(#d1d1d1 1px, transparent 1px), linear-gradient(90deg, #d1d1d1 1px, transparent 1px); background-size: 40px 40px;}
.contact-info-panel {background-color: var(--kmi-primary); color: var(--kmi-on-primary); padding: 40px 32px; position: relative; overflow: hidden;}
.contact-info-panel::after {content: ''; position: absolute; bottom: -40px; right: -40px; width: 160px; height: 160px; background-color: var(--kmi-secondary); opacity: 0.2; transform: rotate(45deg);}
.contact-info-item {display: flex; align-items: center; gap: 24px; margin-bottom: 32px;}
.contact-info-item .icon-sq {width: 56px; height: 56px; background-color: var(--kmi-on-primary-fixed-variant, #114783); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.contact-info-item .icon-sq .material-symbols-outlined {font-size: 28px; color: #fff;}

/* ── REQUEST QUOTE PAGE ── */
.quote-form-section {background-color: var(--kmi-surface); border: 2px solid var(--kmi-primary); padding: 40px;}
.quote-form-section .step-header {display: flex; align-items: center; gap: 16px; margin-bottom: 24px;}
.quote-form-section .step-num {background-color: var(--kmi-primary); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;}
.kmi-form-control {border: 1px solid var(--kmi-outline-variant); border-radius: 0 !important; background-color: var(--kmi-surface); color: var(--kmi-on-surface); font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; padding: 12px 16px; width: 100%; transition: border-color 0.15s; outline: none;}
.kmi-form-control:focus {border-color: var(--kmi-primary); box-shadow: none;}
.kmi-form-label {font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kmi-on-surface-variant); display: block; margin-bottom: 6px;}
.kmi-select {appearance: none; border: 1px solid var(--kmi-outline-variant); border-radius: 0 !important; background-color: var(--kmi-surface); color: var(--kmi-on-surface); font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; padding: 12px 16px; width: 100%; cursor: pointer;}
.kmi-select:focus {border-color: var(--kmi-primary); box-shadow: none; outline: none;}
.upload-zone {border: 2px dashed var(--kmi-outline-variant); padding: 40px; text-align: center; background-color: var(--kmi-surface-container-low); cursor: pointer; transition: border-color 0.2s;}
.upload-zone:hover {border-color: var(--kmi-primary);}
.sidebar-panel {background-color: var(--kmi-primary); color: var(--kmi-on-primary); padding: 32px;}
.sidebar-panel h3 {font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--kmi-primary-container); padding-bottom: 16px; margin-bottom: 24px;}
.sidebar-panel .sidebar-item {display: flex; gap: 16px; margin-bottom: 24px;}
.sidebar-panel .sidebar-item .material-symbols-outlined {color: var(--kmi-primary-fixed-dim); flex-shrink: 0;}
.sidebar-panel .sidebar-item h4 {font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--kmi-primary-fixed); margin-bottom: 4px;}
.sidebar-panel .sidebar-item p {font-size: 16px; color: var(--kmi-primary-fixed-dim); margin: 0;}

/* ── PAGE HERO BANNERS ── */
.page-hero { color: var(--kmi-on-primary); padding: 64px 0; position: relative; overflow: hidden;}
.page-hero:after{background-color: var(--kmi-primary); position: absolute; left: 0; top: 0; opacity: 0.90; height: 100%; content: ""; display: block; width: 100%;}
.page-hero .dot-bg {position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px; z-index: 1;}
.page-hero .breadcrumb-tag {font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--kmi-primary-fixed-dim); margin-bottom: 12px;}
.page-hero h1 {font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px;}
.page-hero p {font-size: 18px; color: var(--kmi-primary-fixed-dim); max-width: 640px; margin: 0;}
.page-hero .red-accent {height: 4px; width: 80px; background-color: var(--kmi-secondary); margin-top: 20px;}
.page-hero-container{z-index: 10; position: relative;}
.page-hero.industry-banner{background: url("../images/banner-industry.jpg") no-repeat left top/cover;}
.page-hero.quality-banner{background: url("../images/banner-quality.jpg") no-repeat left top/cover;}
.page-hero.about{background: url("../images/banner-about.jpg") no-repeat left top/cover;}
.page-hero.contact{background: url("../images/banner-contact.jpg") no-repeat left top/cover;}
.page-hero.quote{background: url("../images/banner-quote.jpg") no-repeat left top/cover;}
.page-hero.products{background: url("../images/banner-products.jpg") no-repeat left top/cover;}

/* ── CTA SECTION ── */
.cta-section {background-color: var(--kmi-primary); padding: 80px 0; text-align: center; color: var(--kmi-on-primary);}

/* ── TEAM ── */
.team-img-wrap {position: relative;}
.team-img-wrap .team-circle {position: relative; z-index: 1; border-radius: 50%; border: 12px solid var(--kmi-secondary); overflow: hidden; aspect-ratio: 1;}
.team-img-wrap .team-circle img {width: 100%; height: 100%; object-fit: cover;}
.team-img-wrap .bg-slant-1 {position: absolute; right: -20%; top: 50%; transform: translateY(-50%) skewX(-12deg); width: 120%; height: 300px; background-color: var(--kmi-primary); z-index: 0;}
.team-img-wrap .bg-slant-2 {position: absolute; right: -10%; top: 60%; transform: translateY(-50%) skewX(-12deg); width: 120%; height: 150px; background-color: var(--kmi-secondary); opacity: 0.5; z-index: 0;}

/* ── SCROLL REVEAL ── */
.reveal {opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease;}
.reveal.visible {opacity: 1; transform: translateY(0);}

/* ── TABLE ── */
.kmi-table {width: 100%; border-collapse: collapse; font-size: 15px;}
.kmi-table th {background-color: var(--kmi-primary); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 16px; text-align: left;}
.kmi-table td {padding: 14px 16px; border-bottom: 1px solid var(--kmi-outline-variant); color: var(--kmi-on-surface);}
.kmi-table tr:nth-child(even) td {background-color: var(--kmi-surface-container-low);}
.kmi-table td:first-child {font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--kmi-on-surface-variant);}
.kmi-table td:last-child {font-weight: 600;}

.title-border{border-bottom:1px solid var(--kmi-outline)}
.ind-symbol{color: var(--kmi-primary); font-size: 30px;}
.ind-blue-content{position: relative; padding: 0 0 0 48px;}
.ind-blue-content span{position: absolute; left: 0; top: 0; font-size: 28px;}
.leader-quote{font-size: 35px; font-style: italic; font-weight: 700;}
.quality-box i{font-size: 32px;}
.process-step i{font-size: 28px;}

.quality-cta{background: var(--kmi-secondary); position: relative; color: #fff;}
.quality-cta .dot-bg {position: absolute; inset: 0; opacity: 0.2; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 20px 20px;}
.about-cta .dot-bg {position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 20px 20px;}
.about-cta .cta-data{z-index: 10; position: relative;}
.f32{font-size: 32px; font-weight: 700;}
.f26{font-size: 26px;}
 .spec-pill{background: var(--surface-container, #f1f4f8); border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; height: 100%;}
.spec-label{font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary, #c0392b); line-height: 1.2;}
.spec-value{font-size: 0.95rem; font-weight: 500; color: var(--on-surface, #1a2840); line-height: 1.4;}

/* ── RESPONSIVE ── */

@media (max-width: 1200px) {
	.kmi-navbar .nav-item{padding: 0 0px;}
}

@media (max-width: 991px) {
		.kmi-navbar .nav-item{padding: 0;}
	.kmi-navbar .nav-link {border-bottom: none; height: auto; padding: 10px 0; text-align: center; width: 100%; display: block;}
	.nav-btn{margin-left: 0; margin-bottom: 15px; width: 100%;}
	.btn-kmi-sm{width: 100%; text-align: center; display: block;}

}

@media (max-width: 767.98px) {
  .display-hero {font-size: 26px;}
  .headline-lg {font-size: 24px;}
  .section-gap {padding-top: 48px; padding-bottom: 48px;}
  .kmi-footer-contact .contact-card {min-width: 0;}
  .quality-panel {min-height: auto;}
  .quote-form-section {padding: 24px;}
	
	.font-display {font-size: 32px; line-height: 40px;}
  	.font-headline {font-size: 24px; line-height: 32px;}
	.footer-logo{width: 100%; text-align: center;}
	.footer-nav{width: 100%; text-align: center; padding: 20px 0 0 0;}
	.footer-nav li{padding: 10px 15px 0 15px;}
	
	.leader-quote{font-size: 24px; line-height: 1.1;}
	
	.hero-img{margin-top: 50px;}
	.hero-banner-slide{background: url('../images/banner.jpg') no-repeat left/cover;}
.hero-banner-slide.banner-2{background: url('../images/banner-2.jpg') no-repeat left/cover;}
.hero-banner-slide.banner-3{background: url('../images/banner-3.jpg') no-repeat left/cover;}
	.banner-text{font-size: 16px;}

}