/* ==========================================================================
   critical.css — Above-the-fold styles
   Ongwacho Cherop Associates & Advocates

   This file is loaded as a blocking <link> (it is NOT inlined); its rules must not use raw colours except the documented .nav skeleton values.
   It contains only the styles needed to render the visible viewport
   before any deferred CSS loads (preloader + nav skeleton).

   Keep this file small. Do NOT add below-the-fold styles here.
   ========================================================================== */

/* Preloader */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-cream);font-family:var(--ff-body)}

.preloader{
  position:fixed;inset:0;z-index:var(--z-preloader);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  background:var(--color-cream);
  transition:opacity 0.5s ease,visibility 0.5s ease;
  animation:preloaderFailsafe 0.5s ease 6s forwards;
}
.preloader.preloader--hidden{opacity:0;visibility:hidden;pointer-events:none}

.preloader__emblem{display:block;height:90px;width:auto;opacity:0;animation:preloaderEmblemIn 0.5s ease 0.05s forwards}
.preloader__bar{
  width:180px;height:2px;background:color-mix(in srgb,var(--color-primary) 15%,transparent);border-radius:1px;overflow:hidden;
}
.preloader__bar-fill{
  height:100%;width:0;background:var(--color-primary);
  animation:preloaderFill 1.6s ease forwards;
}
.preloader__text{
  margin:0;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-ink) 55%,transparent);
}

@keyframes preloaderFill{to{width:100%}}
@keyframes preloaderEmblemIn{to{opacity:1}}
@keyframes preloaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Nav skeleton — prevents layout shift */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:72px;padding:0 1.5rem;
  display:flex;align-items:center;
}

@media (prefers-reduced-motion: reduce) { .preloader__emblem { animation: none; opacity: 1; } }