/* WiA bilingual toggle (English / Swahili). All translated text is wrapped
   in <span data-en> / <span data-sw> pairs inside the same parent element,
   so this stays simple: only spans are ever shown/hidden. */
[data-sw]{display:none}
html[lang="sw"] [data-en]{display:none}
html[lang="sw"] [data-sw]{display:inline}
.lang-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;height:2.25rem;padding:0 .75rem;margin-left:.5rem;
  border-radius:9999px;border:1px solid rgb(232 226 216);
  background:#fff;color:#0a2748;font-weight:700;font-size:.75rem;
  letter-spacing:.03em;cursor:pointer;
}
.lang-toggle-btn:hover{background:#faf7f2}
.lang-note{font-size:.75rem;color:#98958c;font-style:italic}

/* Mobile navigation menu */
.mobile-nav-panel{
  display:none;
  position:fixed;top:80px;left:0;right:0;
  background:#fff;border-bottom:1px solid rgb(232 226 216);
  box-shadow:0 12px 24px -8px rgba(10,39,72,.15);
  z-index:49;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}
.mobile-nav-panel.open{display:block}
.mobile-nav-panel a{
  display:block;padding:.85rem 1.5rem;font-weight:600;
  color:#0a2748;border-bottom:1px solid rgb(232 226 216 / .6);
}
.mobile-nav-panel a.mobile-nav-cta{
  margin:1rem 1.5rem;padding:.85rem 1rem;text-align:center;
  background:#0a2748;color:#fff;border-radius:9999px;border:none;
}
@media (min-width:1024px){ .mobile-nav-panel{ display:none !important; } }

/* Slider puzzle verification (contact form) */
.slider-captcha{
  position:relative;width:100%;max-width:320px;height:46px;
  background:#F2F0EA;border:1px solid rgb(232 226 216);border-radius:9999px;
  overflow:hidden;user-select:none;touch-action:none;
}
.slider-captcha-target{
  position:absolute;top:0;bottom:0;width:46px;
  background:rgba(101,163,13,.18);border-left:2px dashed #65A30D;border-right:2px dashed #65A30D;
}
.slider-captcha-track-fill{
  position:absolute;top:0;bottom:0;left:0;width:0;background:rgb(101 163 13 / .12);
}
.slider-captcha-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:#667085;font-weight:600;pointer-events:none;
}
.slider-captcha-handle{
  position:absolute;top:2px;left:2px;width:42px;height:42px;border-radius:9999px;
  background:#fff;border:1px solid rgb(232 226 216);box-shadow:0 2px 6px rgba(10,39,72,.18);
  display:flex;align-items:center;justify-content:center;cursor:grab;
}
.slider-captcha-handle:active{cursor:grabbing}
.slider-captcha.verified{background:#e9f5df}
.slider-captcha.verified .slider-captcha-handle{background:#65A30D;border-color:#65A30D;color:#fff}
.slider-captcha.shake{animation:captcha-shake .35s}
@keyframes captcha-shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}

/* Custom hero heading sizing — the compiled Tailwind bundle only
   contains utility classes actually used in the original build, so
   new responsive text sizes need real rules here rather than
   arbitrary Tailwind classes that won't have been compiled in. */
.hero-h1-home{
  font-weight:900;color:#fff;line-height:1.08;margin-bottom:1.25rem;
  font-size:1.85rem;
}
@media (min-width:640px){ .hero-h1-home{ font-size:2.4rem; } }
@media (min-width:1024px){ .hero-h1-home{ font-size:2.5rem; white-space:nowrap; } }
@media (min-width:1280px){ .hero-h1-home{ font-size:2.85rem; } }
@media (min-width:1536px){ .hero-h1-home{ font-size:3.25rem; } }

.hero-h1-page{
  font-weight:900;color:#fff;line-height:1.1;margin-bottom:1rem;
  font-size:1.9rem;
}
@media (min-width:640px){ .hero-h1-page{ font-size:2.5rem; } }
@media (min-width:1024px){ .hero-h1-page{ font-size:3rem; white-space:nowrap; } }

/* Real photography: shown at full frame, exactly as supplied.
   No cropping (no object-fit:cover, no fixed aspect box) — the
   container simply wraps the image at its own natural proportions. */
.photo-card.uncropped{ min-height:0; background:#f2f0ea; }
.photo-card.uncropped img{
  width:100%; height:auto; min-height:0; object-fit:contain; display:block;
}
.feature-photo.uncropped{ min-height:0; background:#f2f0ea; }
.feature-photo.uncropped img{
  width:100%; height:auto; min-height:0; object-fit:contain; display:block;
}
.image-proof-grid.uncropped img{ height:auto; object-fit:contain; background:#f2f0ea; }

.hero-h1-long{
  font-weight:900;color:#fff;line-height:1.15;margin-bottom:1rem;
  font-size:1.5rem;
}
@media (min-width:640px){ .hero-h1-long{ font-size:1.85rem; } }
@media (min-width:1024px){ .hero-h1-long{ font-size:1.8rem; white-space:nowrap; } }
@media (min-width:1280px){ .hero-h1-long{ font-size:2.1rem; } }

/* Text-on-top, two-photos-below layout (used where a heading and
   intro paragraph should span the full width above a level pair
   of images, e.g. the TAC page). Photos are shown uncropped; they
   line up naturally when both share the same aspect ratio. */
.text-top-photos-section{ padding:5rem 0; background:#f7f4ee; }
.text-top-photos-wrap{ max-width:80rem; margin:0 auto; padding:0 1rem; }
.text-top-photos-copy{ max-width:none; margin-bottom:2.5rem; }
.text-top-photos-copy h2{ font-size:2.25rem; line-height:1.05; color:#102845; font-weight:900; margin:.5rem 0 1rem; }
.text-top-photos-copy p{ color:#667085; line-height:1.75; }
.two-photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.two-photo-row img{ width:100%; height:auto; display:block; border-radius:1.75rem; box-shadow:0 22px 60px rgba(16,40,69,.18); }
@media (max-width:768px){ .two-photo-row{ grid-template-columns:1fr; } }