/* Africarai Advisory — shared brand tokens
   Design language: editorial (warm ivory paper, fine serif + clean grotesk)
   Color DNA pulled from the logo: coral/clay, gold, olive-green "ADVISORY". */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces — warm ivory paper */
  --paper: #F0EEE6;
  /* primary canvas (Anthropic cloud) */
  --paper-2: #E9E6DB;
  /* recessed panel */
  --paper-3: #FAF8F2;
  /* lifted card */

  /* Ink */
  --ink: #211F1A;
  /* warm near-black */
  --ink-2: #5C574C;
  /* secondary text */
  --ink-3: #8B8576;
  /* muted / captions */
  --line: #D7D2C4;
  /* hairline borders */
  --line-soft: #E2DDD0;

  /* Brand accents (from logo) */
  --clay: #C2613B;
  /* deep coral — primary accent */
  --coral: #EE9A5F;
  /* logo coral, lighter */
  --gold: #EDC24A;
  /* logo gold, slightly muted */
  --gold-soft: #F4D77E;
  --olive: #4C5320;
  /* "ADVISORY" green — quiet tie-in */

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1240px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

/* Shared micro-elements ------------------------------------------------ */

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 0 rgba(194, 97, 59, 0.45);
  animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(194, 97, 59, 0.40);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(194, 97, 59, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(194, 97, 59, 0);
  }
}

/* Language toggle ------------------------------------------------------ */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}

.lang button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.lang button.active {
  background: var(--ink);
  color: var(--paper);
}

/* Contact + social links ---------------------------------------------- */
.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.link-underline:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .status .dot {
    animation: none;
  }
}