/* ===== Base ===== */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f9fa;
}

/* in-page anchor safety for fixed navbar */
section[id] { scroll-margin-top: 90px; }

/* keep any overlays from previous sections from leaking down */
.hero-section,
#proven-results { position: relative; overflow: hidden; }

/* ===== Proven Results ===== */
#proven-results h2 { letter-spacing: 1px; }

#proven-results .card:hover {
  background-color: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

#proven-results .card-body { padding: 1.25rem 0.5rem; }

.result-line{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:.75rem; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.06);
}
.result-label{
  color:#cfd2d6; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; font-size:.9rem;
}
.result-value{
  color:#ffcc00; font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
@media (max-width: 575.98px){
  .result-line{flex-direction:column; align-items:flex-start;}
  .result-value{white-space:normal;}
}

/* ===== Services ===== */
#services h2{ letter-spacing:1px; }

.svc-tile{
  background:#fff; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06); overflow:hidden;
}
.svc-h{
  background:linear-gradient(180deg,#0f2f2a,#0b201d);
  color:#ffcc00; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; padding:.9rem 1rem;
}
.svc-b{ padding:1rem 1rem 1.1rem; }
.svc-ul{ margin:0; padding-left:1.1rem; }
.svc-ul li{ margin:.25rem 0; }
.svc-meta{ margin-top:.6rem; font-size:.9rem; color:#6c757d; font-weight:600; }

/* panels for GIS & Managed IT */
.svc-panel{
  background:#fff; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06); min-height:320px;
}
.svc-tag{
  display:inline-block; margin-top:.5rem; padding:.25rem .6rem;
  border-radius:999px; background:rgba(255,204,0,.18);
  color:#6a5400; font-weight:700; font-size:.85rem;
}

/* hover */
.svc-tile:hover, .svc-panel:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:all .2s ease;
}

/* Leaflet map background inside a panel */
.gis-map{
  position:absolute; inset:0; border-radius:12px;
  pointer-events:none; filter:grayscale(100%); opacity:.3; z-index:1;
}

.bg-gradient {
  background: linear-gradient(180deg, #0e1a1a 0%, #141c1c 80%, #1a1a1a 100%);
}

/* ===== Process (simple, opaque, high contrast) ===== */
.process-band{
  background: linear-gradient(180deg,#0e1a1a 0%, #141c1c 80%, #1a1a1a 100%);
  color:#e9edf1;
  position:relative;
}

.process-band h2{ letter-spacing:.6px; }

/* grid keeps cards equal height */
.process-grid > [class*="col-"]{ display:flex; }

/* card */
.process-card{
  display:flex; flex-direction:column;
  background:#23282e;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  overflow:visible;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* header strip */
.process-strip{
  position:relative;
  height:22px;
  background:linear-gradient(180deg,#ffd44a,#ffbf22);
  box-shadow:0 3px 10px rgba(255,191,34,.35) inset, 0 2px 6px rgba(0,0,0,.25);
}

/* number badge */
.process-num{
  top: 11px;
  transform: translateY(-50%);
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:#ffcc00; color:#111; font-weight:900;
  box-shadow:0 0 0 3px rgba(0,0,0,.25), 0 6px 14px rgba(255,204,0,.35);
}

/* body */
.process-body{ padding:1.25rem 1.1rem 1.35rem; display:flex; flex-direction:column; gap:.4rem; }
.process-title{
  margin:0; font-weight:800; color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.process-text{
  margin:0; color:#d9dde2; line-height:1.55;
  text-shadow:none;
}

/* interactive */
.process-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.22);
}

/* mobile spacing: let the badge breathe */
@media (max-width: 575.98px){
  .process-num{ left:12px; width:38px; height:38px; }
  .process-body{ padding:1.1rem .95rem 1.2rem; }
}