:root {
  --ref-forest: #0e3327;
  --ref-charcoal: #111713;
  --ref-cream: #fffaf0;
  --ref-line: rgba(14, 51, 39, 0.14);
}

header.sticky {
  background: rgba(17, 23, 19, 0.78) !important;
  border-bottom-color: rgba(255, 250, 240, 0.1) !important;
  box-shadow: none !important;
}

header .leading-tight > span:last-child {
  display: none !important;
}

header .display-type.block.text-2xl {
  font-size: 1.28rem !important;
}

header nav {
  padding-bottom: 0.85rem !important;
  padding-top: 0.85rem !important;
}

header a[href="/contact/"],
header a[href="/contact"] {
  background: #d8c7a1 !important;
  color: var(--ref-charcoal) !important;
}

main section:not(:first-child) {
  padding-bottom: clamp(3.5rem, 6vw, 5.75rem) !important;
  padding-top: clamp(3.5rem, 6vw, 5.75rem) !important;
}

main h1.display-type {
  font-size: clamp(42px, 4.2vw, 64px) !important;
  line-height: 1.06 !important;
}

main h2.display-type {
  font-size: clamp(36px, 3vw, 44px) !important;
  line-height: 1.08 !important;
}

main h3.display-type {
  font-size: clamp(20px, 1.55vw, 24px) !important;
  line-height: 1.16 !important;
}

.rounded-sm.border.border-line.bg-white.p-7,
.rounded-sm.border.border-line.bg-white.p-8,
.bg-white.p-7,
.bg-charcoal.p-8 {
  box-shadow: none !important;
}

footer.bg-forest {
  background: var(--ref-forest) !important;
}

.platform-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.1);
  border-radius: 2px;
  background: radial-gradient(circle at 48% 42%, rgba(216, 199, 161, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(15, 22, 19, 0.92), rgba(0, 0, 0, 0.96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
  perspective: 1100px;
}

.platform-perspective {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.28s ease;
  will-change: transform;
}

.platform-shell:hover .platform-perspective {
  transition-duration: 90ms;
}

.platform-vignette {
  inset: 0;
  background: radial-gradient(circle at 48% 52%, transparent 0 34%, rgba(0, 0, 0, 0.28) 68%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 30%, transparent 72%, rgba(0, 0, 0, 0.36));
}

.platform-scan,
.platform-vignette {
  position: absolute;
  pointer-events: none;
}

.platform-scan {
  inset: -30%;
  background: linear-gradient(110deg, transparent 0 42%, rgba(216, 199, 161, 0.18) 47%, transparent 53% 100%);
  opacity: 0.8;
  transform: translateX(-42%);
  animation: engineScan 7s ease-in-out infinite;
}

.platform-hotspot {
  position: absolute;
  height: 2.25rem;
  width: 2.25rem;
  translate: -50% -50%;
  border: 1px solid rgba(216, 199, 161, 0.68);
  border-radius: 999px;
  background: rgba(216, 199, 161, 0.08);
  box-shadow: 0 0 28px rgba(216, 199, 161, 0.24);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.platform-hotspot span {
  position: absolute;
  inset: 0.72rem;
  border-radius: 999px;
  background: #d8c7a1;
}

.platform-hotspot::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 1px solid rgba(216, 199, 161, 0.22);
  border-radius: 999px;
  animation: hotspotPulse 3s ease-out infinite;
}

.platform-hotspot-active,
.platform-hotspot:focus-visible,
.platform-hotspot:hover {
  border-color: #efe6d2;
  background: rgba(216, 199, 161, 0.18);
  transform: scale(1.12);
}

.platform-panel {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  background: rgba(9, 12, 10, 0.72);
  padding: 1rem;
  backdrop-filter: blur(14px);
}

@media (max-width: 640px) {
  .platform-hotspot {
    height: 1.75rem;
    width: 1.75rem;
  }

  .platform-hotspot span {
    inset: 0.55rem;
  }

  .platform-panel {
    position: static;
    margin: 0 1rem 1rem;
  }
}

/* MkulimaScore design-system final pass */
:root {
  --ms-ink-950: #07130f;
  --ms-forest-900: #0d2018;
  --ms-forest-800: #14372a;
  --ms-moss-600: #2e6b52;
  --ms-ivory-50: #f7f4ea;
  --ms-parchment-100: #ece6d8;
  --ms-sand-300: #d9c79f;
  --ms-gold-500: #c69a4b;
  --ms-slate-600: #52645b;
  --ms-sage-300: #aeb8b2;
  --ms-line-200: #d8d4c8;
}

html,
body {
  background: var(--ms-ivory-50) !important;
  color: var(--ms-ink-950);
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
.display-type {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

header.sticky,
body:has(.ms-home) header.sticky,
body:has(.ms-design-home) header.sticky {
  background: rgba(247, 244, 234, 0.94) !important;
  border-bottom: 1px solid rgba(7, 19, 15, 0.1) !important;
  box-shadow: none !important;
  color: var(--ms-ink-950) !important;
  margin-bottom: 0 !important;
  min-height: 72px;
  position: sticky !important;
}

header.sticky nav,
body:has(.ms-design-home) header nav {
  min-height: 72px;
  padding-block: 0 !important;
}

header.sticky a,
header.sticky .display-type,
header.sticky .leading-tight span,
body:has(.ms-design-home) header a,
body:has(.ms-design-home) header .display-type {
  color: var(--ms-ink-950) !important;
}

header.sticky nav .lg\:flex a {
  color: rgba(7, 19, 15, 0.76) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

header.sticky nav .lg\:flex a:hover {
  color: var(--ms-ink-950) !important;
}

header img[src*="mkulimascore-logo"] {
  border-radius: 16px;
  height: 42px !important;
  width: 42px !important;
}

header .leading-tight > span:first-child {
  font-size: 1.08rem !important;
  line-height: 1 !important;
}

header .leading-tight > span:last-child {
  display: none !important;
}

header.sticky > nav > a[href="/work-with-us/"],
header.sticky > nav > a[href="/contact/"],
header.sticky > nav > a[href="/contact"],
body:has(.ms-design-home) header.sticky > nav > a[href="/work-with-us/"] {
  align-items: center !important;
  background: var(--ms-ink-950) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--ms-ivory-50) !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  padding: 0 1.35rem !important;
}

header button {
  background: rgba(7, 19, 15, 0.04) !important;
  border-color: rgba(7, 19, 15, 0.14) !important;
  border-radius: 10px !important;
}

header button span {
  background: var(--ms-ink-950) !important;
}

main section:not(:first-child) {
  padding-block: clamp(4.5rem, 8vw, 7.5rem) !important;
}

main h1.display-type,
.ms-hero-evidence h1 {
  font-size: clamp(2.5rem, 4.6vw, 4rem) !important;
  line-height: 1.04 !important;
  max-width: 45rem !important;
}

main h2.display-type,
.ms-heading {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  line-height: 1.1 !important;
  max-width: 48rem;
}

main h3.display-type {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important;
  line-height: 1.25 !important;
}

a.rounded-full,
.premium-button,
.dark-button,
.ms-btn {
  border-radius: 10px !important;
}

.ms-btn,
a.rounded-full.bg-sand,
header.sticky > nav > a {
  min-height: 3rem;
  padding-inline: 1.5rem;
}

footer.bg-forest,
footer {
  background: var(--ms-forest-900) !important;
}

footer img[src*="mkulimascore-logo"] {
  border-radius: 18px;
  height: 64px !important;
  width: 64px !important;
}

.ms-partners-section {
  background: #ffffff;
  border-top: 1px solid var(--ms-line-200);
  color: var(--ms-ink-950);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.ms-partners-section .ms-wrap {
  margin-inline: auto;
  max-width: 90rem;
  padding-inline: 1.25rem;
  width: 100%;
}

.ms-partners-head {
  align-items: end;
  display: grid;
  gap: 1.5rem;
}

.ms-partners-head h2 {
  color: var(--ms-ink-950);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.18;
  max-width: 46rem;
}

.ms-partner-grid {
  background: var(--ms-line-200);
  border: 1px solid rgba(7, 19, 15, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  overflow: hidden;
}

.ms-partner-logo {
  align-items: center;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  min-height: 9.5rem;
  padding: 1.5rem;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.ms-partner-logo img {
  filter: grayscale(1) saturate(0) contrast(1.05) !important;
  max-height: 4rem;
  max-width: min(13rem, 82%);
  object-fit: contain;
  opacity: 0.84;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.ms-partner-logo:hover,
.ms-partner-logo:focus-within {
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(198, 154, 75, 0.24);
}

.ms-partner-logo:hover img,
.ms-partner-logo:focus-within img {
  filter: grayscale(0) saturate(1.04) contrast(1.02) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

.ms-partner-logo span {
  color: var(--ms-slate-600);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (min-width: 48rem) {
  .ms-partners-section .ms-wrap {
    padding-inline: 2.5rem;
  }

  .ms-partners-head {
    grid-template-columns: 0.36fr 0.64fr;
  }

  .ms-partner-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .ms-partners-section .ms-wrap {
    padding-inline: 4rem;
  }
}

@media (max-width: 48rem) {
  main h1.display-type,
  .ms-hero-evidence h1 {
    font-size: clamp(2.35rem, 12vw, 3.25rem) !important;
    line-height: 1.03 !important;
  }

  main h2.display-type,
  .ms-heading {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
  }

  header.sticky,
  body:has(.ms-design-home) header.sticky {
    min-height: 64px;
  }

  header.sticky nav,
  body:has(.ms-design-home) header nav {
    min-height: 64px;
  }

  header img[src*="mkulimascore-logo"] {
    height: 38px !important;
    width: 38px !important;
  }

  header.sticky > nav > a[href="/work-with-us/"],
  header.sticky > nav > a[href="/contact/"],
  header.sticky > nav > a[href="/contact"] {
    display: none !important;
  }

  footer .grid,
  footer [class*="grid-cols"] {
    gap: 2rem !important;
  }
}