:root{--bg:#f8fafc;--card:#ffffff;--text:#1e293b;--muted:#64748b;--primary:#0ea5e9;--primary-deep:#0284c7;--line:#e2e8f0;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--radius:0.7rem}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit}img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;gap:1.2rem;padding:.85rem 0}
.brand{font-weight:800;font-size:1.1rem;text-decoration:none}.brand span{color:var(--primary)}
.main-nav{display:flex;gap:.3rem;margin-left:auto}
.main-nav a{padding:.45rem .75rem;border-radius:var(--radius);text-decoration:none;font-weight:500;font-size:.92rem;color:var(--muted);transition:all .15s}
.main-nav a:hover,.main-nav a.active{color:var(--primary);background:rgba(14,165,233,.12)}
.btn{display:inline-block;border:1px solid transparent;border-radius:var(--radius);padding:.6rem 1.1rem;font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;transition:all .15s}
.btn-lg{padding:.8rem 1.6rem;font-size:1rem}
.btn-primary{background:var(--primary);color:#ffffff}.btn-primary:hover{background:var(--primary-deep)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--text)}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.hero{position:relative;min-height:560px;display:flex;align-items:center;padding:6rem 0 4rem;overflow:hidden}
.hero-bg{position:absolute;inset:0}.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.28)}
.hero-content{position:relative;z-index:1;max-width:720px}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;margin-bottom:1rem;color:#ffffff}
.hero-content p{color:#f1f5f9}
.page-hero{padding:4rem 0 2.5rem;background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.88rem}
.lead{color:var(--muted);max-width:65ch;font-size:1.05rem}
.section{padding:3.5rem 0}.section-muted{background:rgba(241,245,249,.8)}
h2{font-size:clamp(1.4rem,2.5vw,2rem);margin-bottom:.6rem}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;perspective:1000px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1rem;transition:transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;transform-style:preserve-3d;will-change:transform}
.stat:hover{box-shadow:0 15px 35px rgba(0,0,0,0.5);border-color:var(--primary)}
.stat strong{display:block;font-size:2.4rem;color:var(--primary);text-shadow:0 4px 10px rgba(245,158,11,0.3);transform:translateZ(30px)}.stat span{display:block;color:var(--muted);font-size:.9rem;transform:translateZ(15px);text-transform:uppercase;letter-spacing:0.05em}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.5rem}
.feature-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.feature-card img{width:100%;height:190px;object-fit:cover}
.feature-card h3{padding:.9rem 1rem 0;font-size:1.05rem}.feature-card p{padding:.3rem 1rem 1rem;color:var(--muted);font-size:.9rem}
.cta-banner{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#0ea5e9,#0284c7);border:1px solid var(--line);border-radius:1rem}
.cta-banner h2{margin-bottom:.5rem;color:#ffffff !important;background:none;-webkit-text-fill-color:unset;-webkit-background-clip:unset;background-clip:unset;}.cta-banner p{color:#e0f2fe;margin-bottom:1.2rem}
.service-block{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:2.5rem 0;border-bottom:1px solid var(--line)}
.service-img img{width:100%;border-radius:var(--radius)}
.service-text h2{margin-bottom:.5rem}.service-text p{color:var(--muted);margin-bottom:.8rem}
.service-text ul{color:var(--muted);padding-left:1.2rem;margin-bottom:1.2rem}.service-text li{margin-bottom:.3rem}
.contact-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:.3rem;background:#ffffff;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:.65rem .8rem;font-size:.9rem;font-family:inherit}
.site-footer{border-top:1px solid var(--line);background:#f1f5f9;padding-top:2.5rem}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.footer-brand p{color:var(--muted);font-size:.9rem;margin-top:.5rem}
.footer-links h4,.footer-contact h4{color:var(--primary);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.footer-links a{display:block;color:var(--muted);text-decoration:none;font-size:.9rem;padding:.2rem 0}.footer-links a:hover{color:var(--primary-deep)}
.footer-contact p{color:var(--muted);font-size:.9rem}

/* --- PREMIUM CAREERS SECTION STYLES --- */
#careers {
  text-align: center;
  padding: 5rem 0;
}

#careers .eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

#careers h2 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: #0f172a;
}

#careers .lead {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.15rem;
}

.btn-pill {
  background: #003366; /* Deep blue from image */
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  font-size: 1rem;
}

.btn-pill:hover {
  background: #002244;
  transform: translateY(-2px);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #f8fafc;
  width: min(700px, 95%);
  max-height: 85vh;
  border-radius: 1.5rem;
  padding: 2.5rem;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.job-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  transition: box-shadow 0.2s;
}

.job-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.job-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.job-badge {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.95rem;
}

.job-commitment {
  color: #1d4ed8; /* Blue from image */
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  display: block;
}

.job-description {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.5;
}

.contact-box {
  background: #ecfdf5; /* Light mint/teal from image */
  border: 1px dashed #10b981;
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  margin-top: 2rem;
}

.contact-box p {
  color: #064e3b;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.contact-box a {
  color: #059669;
  font-weight: 700;
  text-decoration: none;
}
/* --- PRODUCT CATALOG STYLES --- */
.catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.catalog-stats {
  display: flex;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.catalog-stats span {
  font-weight: 600;
  color: var(--text);
}

.toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.toolbar input, .toolbar select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
  min-height: 400px;
}

.product-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.product-image {
  height: 200px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image .placeholder {
  color: #94a3b8;
  font-size: 3rem;
  opacity: 0.3;
}

.product-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-in-stock { background: #dcfce7; color: #166534; }
.badge-low-stock { background: #fef9c3; color: #854d0e; }
.badge-backorder { background: #fee2e2; color: #991b1b; }

.product-details {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-sku {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.product-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
  line-height: 1.3;
}

.product-category {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.product-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .toolbar {
    grid-template-columns: 1fr;
  }
}