*{box-sizing:border-box}
:root{--red:#b52c38;--char:#222;--ink:#444;--stoic-yellow:rgba(255,208,0,.18);--white:#fff}
html,body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--char);background:var(--white)}
.container{width:min(1100px,92%);margin:0 auto}
body:before{content:'';position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60% 60% at 20% 10%, rgba(0,0,0,.04), transparent 60%),
  radial-gradient(40% 40% at 80% 30%, rgba(0,0,0,.035), transparent 60%),
  radial-gradient(30% 30% at 30% 80%, rgba(0,0,0,.03), transparent 60%),
  repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 8px, rgba(255,255,255,0) 8px 16px),
  var(--stoic-yellow);filter:contrast(1) saturate(1.05)}
/* Header: deep red background + light text */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #993333;         /* new header background */
  color: #C5C6C7;              /* default text color on header */
  border-bottom: none;
  backdrop-filter: none;       /* remove old blur */
}
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.4rem 0;
}

/* Logo chip: white block with a creative curved edge into the red */
.site-header .brand{
  position: relative;
  background: #fff;
  padding: .35rem 1rem .35rem .6rem;
  border-radius: 0 24px 24px 0;         /* rounded right side */
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  overflow: visible;
}

/* Curved intersection detail */
.site-header .brand::after{
  content: "";
  position: absolute;
  right: -18px;                /* nudges the curve into the red area */
  top: 0;
  width: 36px;
  height: 100%;
  background: radial-gradient(30px 50% at 0% 50%, #fff 98%, rgba(255,255,255,0) 100%);
  /* This radial “cap” makes a soft, creative curve where white meets #993333 */
}

/* Logo size */
.site-header .brand img{
  height: 44px;
  display:block;
}

/* Nav links: light gray on red */
.site-header nav a{
  margin: 0 .5rem;
  padding: .5rem .6rem;
  color: #C5C6C7;                       /* link color */
  text-decoration: none;
  border-radius: 10px;
}
.site-header nav a:hover{
  background: rgba(255,255,255,.12);    /* subtle hover on red */
}

/* Optional: keep the primary CTA style consistent elsewhere */
.btn.primary{ background: var(--red); border-color: var(--red); color:#fff; }

.hero {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.hero-inner {
  position: relative;
  z-index: 2;
  color: #993333;           /* custom color */
  text-shadow: none;        /* cleaner look */
  margin-top: 15vh;         /* push the text lower */
}

/* White card behind the hero text/buttons */
.hero-inner .hero-text-box {
  background: rgba(255, 255, 255, 0.9); /* semi-transparent white */
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* soft shadow */
  display: inline-block;
}

.hero h1 {
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.1;
  margin: 0;
}

.hero h1 span {
  background: linear-gradient(90deg, #993333, #841e1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 22px rgba(0,0,0,.5));
}

.hero p {
  font-size: clamp(16px, 2.2vw, 22px);
  opacity: .95;
}

.cta-row{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.btn{border:1px solid #fff;padding:.7rem 1rem;border-radius:14px;text-decoration:none;color:#993333;display:inline-block;background:rgba(255,255,255,.1)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;border-color:#993333}
.hero-mesh{position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 30%, rgba(181,44,56,.32), transparent 60%), radial-gradient(500px 300px at 80% 70%, rgba(0,0,0,.35), transparent 60%);z-index:1;mix-blend:multiply}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-bg .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.hero-bg .slide.active{opacity:1}
.section{padding:80px 0}
.section.alt{background:rgba(255,255,255,.6)}
h2{font-size:clamp(24px,4vw,36px);margin:0 0 16px}
.lead{opacity:.9;margin-bottom:14px}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.tab{border:1px solid rgba(0,0,0,.12);padding:.5rem .8rem;border-radius:10px;background:#fff;cursor:pointer}
.tab.active{background:var(--red);color:#fff;border-color:var(--red)}
.tab-panels .panel{display:none;position:relative}
.tab-panels .panel.show{display:block}
.video-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-bg .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.overlay-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;padding:0 6%}
.type-line{font-size:clamp(18px,3vw,28px);opacity:0;transform:translateY(10px);animation:show 1.2s forwards}
.type-line.delay{animation-delay:.9s}
@keyframes show{to{opacity:1;transform:translateY(0)}}
.slab{background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.05);margin-bottom:14px}
.slab.emphasis{border-left:6px solid var(--red)}
.legacy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.legacy-grid .card{background:#fff;border-radius:12px;padding:12px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.md-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.md-photo img {
  max-width: 220px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.md-text {
  flex: 1;
  min-width: 260px;
}

.md-quote {
  font-size: 18px;
  background: #fff;
  padding: 18px;
  border-left: 6px solid var(--red);
  border-radius: 12px;
  margin: 0;
}

.md-name {
  margin-top: 10px;
  font-weight: 600;
  color: #993333;
}

.values-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.value-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.brand-card {
  background: #fff;
  border-radius: 16px;                  /* rounded card edges */
  padding: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* placeholder (if no image is added) */
.brand-card .ph {
  height: 160px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  display: grid;
  place-items: center;
  color: #666;
  font-size: 14px;
}

/* actual uploaded image */
.brand-card img {
  width: 100%;
  height: 180px;         /* keeps all product images uniform */
  object-fit: cover;     /* crops nicely without stretching */
  border-radius: 16px;   /* rounded edges for images */
  margin-bottom: 10px;
}
/* --- Uganda Map Footprint --- */
.ug-map{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;                  /* Tall-ish, fits Uganda’s shape */
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 10% 10%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(120% 100% at 90% 30%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(145deg, rgba(255, 208, 0, .15), rgba(0,0,0,.03)); /* subtle textured field */
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.ug-outline{
  position: absolute;
  inset: 4% 8%;                          /* centers the outline nicely */
  width: 84%;
  height: 92%;
  object-fit: contain;
  opacity: .22;
  filter: contrast(1.1) saturate(0.9);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Glow layer dots (decor) */
.ug-lines{
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
}

/* Pins */
.pin{
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #b52c38;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(181,44,56,.55);
  animation: pulse 2s infinite;
}
.pin::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(181,44,56,.35);
}
.pin .label{
  position: absolute;
  top: -10px;
  left: 14px;
  white-space: nowrap;
  background: rgba(255,255,255,.92);
  color: #333;
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  font-size: 12px;
  transform: translateY(-100%);
}

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(181,44,56,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(181,44,56,0); }
  100%{ box-shadow: 0 0 0 0 rgba(181,44,56,0); }
}

/* Small stats under the map */
.footprint-notes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.footprint-notes .note{
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-align: center;
}
.footprint-notes .note strong{
  display: block;
  color: #993333;
  font-size: 18px;
  margin-bottom: 4px;
}

.footprint-viz{position:relative;height:420px;border-radius:18px;background:linear-gradient(145deg, rgba(255, 208, 0, .2), rgba(0,0,0,.05));overflow:hidden}
.node{position:absolute;padding:8px 10px;background:#fff;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.08);font-size:13px}
.node:before{content:'';position:absolute;left:10px;top:-18px;width:10px;height:10px;border-radius:50%;background:#b52c38;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(181,44,56,.6)}70%{box-shadow:0 0 0 12px rgba(181,44,56,0)}100%{box-shadow:0 0 0 0 rgba(181,44,56,0)}}
.node.jinja{left:340px;top:210px}
.node.kampala{left:380px;top:190px}
.node.mbale{left:470px;top:200px}
.node.gulu{left:250px;top:70px}
.node.mbarara{left:210px;top:320px}
.lines{position:absolute;inset:0;stroke:rgba(0,0,0,.25)}
.lines line{stroke-width:2}
.csr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.csr-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.media-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.media-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.media-video video {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.media-body {
  padding: 14px;
}

.media-body h3 {
  margin: 0 0 6px;
  color: #993333;
  font-weight: 700;
}

.media-body p {
  margin: 0;
  color: #444;
  line-height: 1.45;
}

.media-ph{height:160px;border-radius:12px;background:linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));display:grid;place-items:center;color:#666}
.contact-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.contact-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.contact-card input,.contact-card textarea{width:100%;padding:.8rem;border:1px solid rgba(0,0,0,.12);border-radius:10px;margin:.4rem 0}
.contact-info{background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.site-footer {
  border-top: none;                 /* optional: remove light border */
  padding: 22px 0;
  background: #993333;              /* new footer background */
  color: #C5C6C7;                   /* default text color */
}

.site-footer a {
  color: #C5C6C7;                   /* links inherit same color */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;       /* subtle hover effect */
}

.site-footer .foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer .links a {
  display: block;
  margin: .2rem 0;
}

#preloader{position:fixed;inset:0;background:#fff;display:grid;place-items:center;text-align:center;z-index:1000}
#preloader .gear{width:110px;animation:spin 1.8s linear infinite;filter:drop-shadow(0 8px 18px rgba(0,0,0,.2))}
#preloader .logo{position:absolute;width:min(520px,72vw);opacity:0;transition:opacity .9s ease}
#preloader .tagline{position:absolute;bottom:18%;font-weight:600;letter-spacing:2px;opacity:0;transition:opacity .9s ease .2s}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#preloader.hide{animation:fadeOut .8s .6s forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
@media (max-width:880px){
  .legacy-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
}