/* Landing polish: one drawing system for the home page illustrations, and the About cards evened out.
   Loaded after landing-tidy.css. The drawings (landing-tidy.js for the four audience cards, index.html for
   Mission, Vision, Values) all use the classes below, so they share one look:
     panels      glass: faint fill, 1.5 outline
     accent      the card's colour (--a), solid for the one thing that matters, softer for the rest
     ink         white strokes 2.5 wide, round ends
   No loose decorations: every shape belongs to the scene. */

/* ── the drawing system ── */
:is(.lp-aud-art, #about .mvv-art) svg { display: block; width: 100%; height: 100%; overflow: visible; }
:is(.lp-aud-art, #about .mvv-art) .ilx-panel { fill: rgba(255,255,255,.055); stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
:is(.lp-aud-art, #about .mvv-art) .ilx-soft { fill: rgba(255,255,255,.26); }
:is(.lp-aud-art, #about .mvv-art) .ilx-faint { fill: rgba(255,255,255,.1); }
:is(.lp-aud-art, #about .mvv-art) .ilx-acc { fill: var(--a); }
:is(.lp-aud-art, #about .mvv-art) .ilx-acc2 { fill: var(--a); opacity: .5; }
:is(.lp-aud-art, #about .mvv-art) .ilx-tint { fill: var(--a); opacity: .16; }
:is(.lp-aud-art, #about .mvv-art) .ilx-ring { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; }
:is(.lp-aud-art, #about .mvv-art) .ilx-ring.w2 { opacity: .6; } :is(.lp-aud-art, #about .mvv-art) .ilx-ring.w3 { opacity: .3; }
:is(.lp-aud-art, #about .mvv-art) .ilx-dash { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; }
:is(.lp-aud-art, #about .mvv-art) .ilx-ink { fill: rgba(255,255,255,.9); }
:is(.lp-aud-art, #about .mvv-art) .ilx-inkl { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.5; stroke-linecap: round; }
:is(.lp-aud-art, #about .mvv-art) .ilx-tick { fill: none; stroke: #1a0b0e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.lp-aud-art, #about .mvv-art) .ilx-hole { fill: #171113; }
:is(.lp-aud-art, #about .mvv-art) .ilx-shield { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linejoin: round; }
:is(.lp-aud-art, #about .mvv-art) .ilx-check { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
:is(.lp-aud-art, #about .mvv-art) .ilx-txt { fill: var(--a); font: 800 9.5px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-panel { fill: rgba(0,0,0,.035); stroke: rgba(0,0,0,.14); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-soft { fill: rgba(0,0,0,.22); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-faint { fill: rgba(0,0,0,.08); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-ink { fill: rgba(0,0,0,.72); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-inkl { stroke: rgba(0,0,0,.72); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-check { stroke: var(--a); }
[data-theme="light"] :is(.lp-aud-art, #about .mvv-art) .ilx-hole { fill: #fff; }

/* one calm movement per drawing, never more */
@media (prefers-reduced-motion: no-preference) {
  :is(.lp-aud-art, #about .mvv-art) .ilx-dash { animation: ilxDash 1.4s linear infinite; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-pop { animation: ilxPop 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-bars rect { animation: ilxGrow 4s cubic-bezier(.3,.9,.3,1) infinite; transform-box: fill-box; transform-origin: bottom; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-bars rect:nth-child(2) { animation-delay: .15s; } :is(.lp-aud-art, #about .mvv-art) .ilx-bars rect:nth-child(3) { animation-delay: .3s; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-waves path { animation: ilxWave 2.6s ease-in-out infinite; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-waves path.w2 { animation-delay: .3s; } :is(.lp-aud-art, #about .mvv-art) .ilx-waves path.w3 { animation-delay: .6s; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-bob { animation: ilxBob 4s ease-in-out infinite; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-glow { animation: ilxGlow 3.2s ease-in-out infinite; }
  :is(.lp-aud-art, #about .mvv-art) .ilx-beam { animation: ilxBeam 3.2s ease-in-out infinite; }
}
@keyframes ilxDash { to { stroke-dashoffset: -16; } }
@keyframes ilxPop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(.97); } }
@keyframes ilxGrow { 0% { transform: scaleY(.35); } 35%, 100% { transform: scaleY(1); } }
@keyframes ilxWave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ilxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ilxGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ilxBeam { 0%, 100% { opacity: .16; } 50% { opacity: .26; } }

/* ── the four audience cards: drawings centred in the same box, arrow centred in its circle ── */
.lp-aud-art { height: 136px !important; padding: 14px 18px 2px !important; display: grid !important; place-items: center; }
.lp-aud-go i { width: 28px !important; height: 28px !important; flex: none; }
.lp-aud-go i svg { display: block; width: 15px; height: 15px; }
@media (max-width: 520px) { .lp-aud-art { height: 100px !important; padding: 10px 10px 0 !important; } }

/* ── Mission, Vision, Values: three equal cards, the summary bar lined up under them ── */
#about {
  background: linear-gradient(180deg, rgba(20,16,17,.97) 0%, rgba(20,16,17,.93) 45%, rgba(20,16,17,.98) 100%),
    url('/images/africa/culture-addis-ababa-celebration.jpg') center / cover no-repeat !important;
}
[data-theme="light"] #about {
  background: linear-gradient(180deg, rgba(250,245,242,.98) 0%, rgba(250,245,242,.94) 45%, rgba(250,245,242,.99) 100%),
    url('/images/africa/culture-addis-ababa-celebration.jpg') center / cover no-repeat !important;
}
#about .mvv-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; padding: 0 !important; margin: 40px 0 16px !important; }
#about .mvv-card, #about .mvv-red, #about .mvv-gold, #about .mvv-green {
  margin: 0 !important; padding: 0 !important; z-index: auto !important; border-radius: 20px !important; transform: none;
  border: 1px solid rgba(255,255,255,.09) !important; box-shadow: none !important;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--a) 16%, transparent), transparent 62%), linear-gradient(180deg, #1c1416, #141011) !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
#about .mvv-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a) 45%, transparent) !important; box-shadow: 0 22px 46px -22px color-mix(in srgb, var(--a) 60%, transparent) !important; }
#about .mvv-disc { height: 100%; justify-content: flex-start !important; align-items: center !important; text-align: center !important; padding: 22px 24px 26px !important; gap: 8px !important; }
#about .mvv-art { width: calc(100% + 48px) !important; margin: -22px -24px 6px !important; height: 136px !important; padding: 14px 24px 0; box-sizing: border-box; }
#about .mvv-title { color: var(--a) !important; font-size: 1.5rem !important; margin: 2px 0 0 !important; }
#about .mvv-desc, #about .mvv-gold .mvv-desc { color: rgba(255,255,255,.78) !important; font-weight: 500 !important; font-size: .95rem !important; line-height: 1.6 !important; max-width: 32ch; text-wrap: balance; }
#about .mvv-bar { max-width: none !important; margin: 0 0 36px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.09) !important; padding: 15px 22px !important;
  background: linear-gradient(90deg, rgba(255,58,92,.12), rgba(244,176,0,.14), rgba(90,169,255,.12)), #161113 !important; }
[data-theme="light"] #about .mvv-card, [data-theme="light"] #about .mvv-gold {
  border-color: rgba(0,0,0,.08) !important; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--a) 12%, transparent), transparent 62%), #fff !important; }
[data-theme="light"] #about .mvv-desc, [data-theme="light"] #about .mvv-gold .mvv-desc { color: #2a1a1e !important; }
[data-theme="light"] #about .mvv-bar { background: linear-gradient(90deg, rgba(255,58,92,.08), rgba(244,176,0,.1), rgba(90,169,255,.08)), #fff !important; border-color: rgba(0,0,0,.08) !important; }
@media (max-width: 760px) {
  #about .mvv-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin: 24px 0 12px !important; }
  #about .mvv-red, #about .mvv-gold, #about .mvv-green { border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; }
  #about .mvv-art { height: 108px !important; }
  #about .mvv-disc { padding: 18px 18px 22px !important; }
  #about .mvv-art { width: calc(100% + 36px) !important; margin: -18px -18px 4px !important; }
  #about .mvv-title { font-size: 1.3rem !important; }
  #about .mvv-bar { margin-bottom: 26px !important; }
}