/* =====================================================================
   Where We Work page: Africa map, Kenya county map, offices.
   Everything is scoped under .www so nothing leaks into the rest of the site.
   ===================================================================== */

.www {
  --ink: #1F1B2D;
  --muted: #4A4458;
  --line: #ECE6DA;
  --ivory: #FBF8F2;
  --blue: #1466A6;
  --blue-dark: #0E4C7C;
  --gold: #F0B63F;
  --plum: #8A3A8C;
  --land: #E6DFCF;
  --land-hover: #D9CFBA;
  --water: #CFE3EF;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color: var(--ink);
}

/* Kenya regions (former provinces), shared by counties, chips, list rows and the info card */
.www [data-region="nairobi"]       { --rc: #1466A6; }
.www [data-region="central"]       { --rc: #3F8A3A; }
.www [data-region="coast"]         { --rc: #0F8B8D; }
.www [data-region="eastern"]       { --rc: #D99A1E; }
.www [data-region="north-eastern"] { --rc: #B4582A; }
.www [data-region="nyanza"]        { --rc: #C2416B; }
.www [data-region="rift-valley"]   { --rc: #8A3A8C; }
.www [data-region="western"]       { --rc: #4A5BB5; }


/* ---------------------------------------------------------------------
   Typography & shared pieces
   --------------------------------------------------------------------- */
.www-eyebrow {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--plum);
}
.www-eyebrow::before { content: ""; width: 2rem; height: 3px; background: var(--gold); }

.www-h2 {
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.2; font-weight: 800;
  letter-spacing: -.015em; text-wrap: balance;
}
.www-sub { max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

.www-head {
  display: grid; gap: 1rem; margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .www-head { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; margin-bottom: 3rem; }
}

/* Scroll reveal: only hidden once JS has marked the page ready. An animation (not a transition)
   with `backwards` fill, so it never fights the components' own hover/active transitions. */
.www.is-ready .www-reveal:not(.is-in) { opacity: 0; }
.www.is-ready .www-reveal.is-in { animation: www-rise .8s var(--ease-out) var(--reveal-delay, 0ms) backwards; }
@keyframes www-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* ---------------------------------------------------------------------
   Shared map chrome: tooltip, reset button, legend
   --------------------------------------------------------------------- */
.www-tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  padding: .4rem .65rem; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.94);
  transition: opacity .16s ease, transform .16s ease;
}
.www-tip small { display: block; margin-top: .1rem; font-size: 11px; font-weight: 600; color: #C9C4D3; }
.www-tip.is-muted { background: #fff; color: var(--muted); font-weight: 600; border: 1px solid var(--line); }
.www-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }

.www-reset {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
  background: #fff; border: 1px solid var(--line); color: var(--blue);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 16px -10px rgba(31,27,45,.45);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.www-reset svg { width: .95rem; height: .95rem; }
.www-reset:hover { background: #F5FAFD; }
.www-reset:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.has-active > .www-reset { opacity: 1; transform: none; pointer-events: auto; }

.www-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .75rem 1rem;
  background: #fff; border: 1px solid var(--line); border-top: 0;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.www-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.www-legend span { width: .7rem; height: .7rem; display: inline-block; }
.www-legend span.is-pin { border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ink); }


/* ---------------------------------------------------------------------
   1. Africa map
   --------------------------------------------------------------------- */
.wm-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  padding: 1.15rem 1.3rem 1.2rem;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-out);
}
.wm-item:hover, .wm-item.is-hot { background: var(--c-soft); border-left-color: var(--c); }
.wm-item.is-active {
  background: var(--c-soft); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); border-left-color: var(--c);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 75%, transparent);
}
@media (min-width: 1024px) { .www .wm-item.is-active { transform: translateX(6px); } }
.wm-item:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.wm-item__head { display: flex; align-items: center; gap: .75rem; }
.wm-item__dot {
  width: .7rem; height: .7rem; border-radius: 999px; background: var(--c); flex: none;
  transition: box-shadow .35s ease;
}
.wm-item.is-active .wm-item__dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
.wm-item__name { font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.wm-item__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c); border: 1px solid currentColor; padding: .15rem .45rem;
}
.wm-item__chev { width: 1.1rem; height: 1.1rem; margin-left: auto; color: var(--c); flex: none; transition: transform .35s var(--ease-out); }
.wm-item:hover .wm-item__chev { transform: translateX(3px); }
.wm-item.is-active .wm-item__chev { transform: rotate(90deg); }
.wm-item__body { display: block; padding: .6rem 0 0 1.45rem; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.wm-item__office {
  display: flex; align-items: center; gap: .4rem; margin: .75rem 0 0 1.45rem;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c);
}
.wm-item__office svg { width: .95rem; height: .95rem; flex: none; }

.wm-card {
  position: relative; overflow: hidden; aspect-ratio: 720 / 750;
  background: radial-gradient(110% 80% at 65% 45%, #FFFFFF 0%, #F7FAFC 55%, #EAF2F7 100%);
  border: 1px solid var(--line);
}
.wm-svg, .km-svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }

.wm-country {
  fill: var(--land); stroke: #FFFFFF; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transition: fill .35s ease, fill-opacity .5s ease, opacity .8s ease;
}
.wm-country:not(.is-focus):hover { fill: var(--land-hover); }
.wm-country.is-focus { fill: var(--c); cursor: pointer; stroke-width: 1.4; }
.wm-country[data-country="kenya"]    { --c: #1466A6; }
.wm-country[data-country="uganda"]   { --c: #F0B63F; }
.wm-country[data-country="tanzania"] { --c: #3F8A3A; }
.wm-country[data-country="ghana"]    { --c: #8A3A8C; }
.wm-country.is-focus.is-hot { filter: brightness(1.08) drop-shadow(0 4px 8px rgba(31,27,45,.28)); }
.wm-card.has-emph .wm-country.is-focus:not(.is-emph) { fill-opacity: .3; }
.wm-lake { fill: var(--water); stroke: #B7D3E5; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }

.wm-link {
  fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; pointer-events: none;
  transition: stroke-dashoffset 1.2s var(--ease-out) calc(1.4s + var(--d)), opacity .4s ease;
}
.wm-card:not([data-view="africa"]) .wm-link { opacity: .3; }

.wm-pin { cursor: pointer; transition: opacity .4s ease; }
.wm-pin__dot {
  fill: var(--ink); stroke: #fff; stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  transition: transform .55s var(--ease-spring) calc(1.9s + var(--d));
}
.wm-pin.is-hq .wm-pin__dot { fill: var(--blue); }
.wm-pin__pulse {
  fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: www-pulse 2.4s ease-out infinite; animation-delay: var(--d);
}
.wm-pin.is-hq .wm-pin__pulse { fill: var(--blue); }
.wm-pin__label, .km-label-text {
  font: 800 12px/1 system-ui, sans-serif; fill: var(--ink); letter-spacing: .02em;
  paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .3s ease;
}
/* On the whole-continent view the offices sit close together: label only the emphasised one */
.wm-card:not([data-view="africa"]) .wm-pin__label,
.wm-pin.is-emph .wm-pin__label { opacity: 1; }
.wm-card.has-emph .wm-pin:not(.is-emph) { opacity: .4; }

@keyframes www-pulse {
  0%        { transform: scale(.6); opacity: .45; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Intro choreography: the pre-reveal state is only applied once JS has loaded */
.wm-card.is-pending .wm-country { opacity: 0; }
.wm-card.is-pending .wm-country.is-focus { opacity: 1; fill-opacity: 0; }
.wm-card.is-pending .wm-link { stroke-dashoffset: 1; }
.wm-card.is-pending .wm-pin__dot { transform: scale(0); }
.wm-card.is-pending .wm-pin__pulse { animation: none; }
.wm-country.is-focus[data-country="kenya"]    { transition-delay: 0s, .7s, 0s; }
.wm-country.is-focus[data-country="uganda"]   { transition-delay: 0s, .85s, 0s; }
.wm-country.is-focus[data-country="tanzania"] { transition-delay: 0s, 1s, 0s; }
.wm-country.is-focus[data-country="ghana"]    { transition-delay: 0s, 1.15s, 0s; }
.wm-card.is-settled .wm-country.is-focus { transition-delay: 0s; }
.wm-card.is-settled .wm-link { transition-delay: 0s; }
.wm-card.is-settled .wm-pin__dot { transition-delay: 0s; }


/* ---------------------------------------------------------------------
   2. Kenya county map
   --------------------------------------------------------------------- */
.www-kenya { background: var(--ivory); }

.km-card {
  position: relative; overflow: hidden; aspect-ratio: 510 / 635;
  background: radial-gradient(100% 70% at 50% 45%, #FFFFFF 0%, #F7F3EA 100%);
  border: 1px solid var(--line);
}
@media (min-width: 1024px) { .km-card { aspect-ratio: auto; height: min(700px, calc(100vh - 8rem)); min-height: 560px; } }

.km-neighbour { fill: #EFE9DC; stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; pointer-events: none; }
.km-lake { fill: var(--water); stroke: #B7D3E5; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }

.km-county {
  fill: color-mix(in srgb, var(--rc) 34%, #fff); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; cursor: pointer;
  transition: fill .3s ease, opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transform-box: fill-box; transform-origin: center;
}
.km-county:hover, .km-county.is-hot { fill: var(--rc); }
.km-county.is-on { fill: var(--rc); stroke: var(--ink); stroke-width: 2; }
/* Region filter: everything outside the chosen region steps back */
.km-card.has-region .km-county:not(.in-region) { fill: #ECE6DA; }
.km-card.has-region .km-county.in-region { fill: color-mix(in srgb, var(--rc) 70%, #fff); }
.km-card.has-region .km-county.in-region:hover,
.km-card.has-region .km-county.in-region.is-hot,
.km-card.has-region .km-county.in-region.is-on { fill: var(--rc); }

.km-hq { pointer-events: none; }
.km-hq__dot { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.km-hq__pulse { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; animation: www-pulse 2.4s ease-out infinite; }

/* Counties cascade in north → south (delay is set per county in JS) */
.km-card.is-pending .km-county { opacity: 0; transform: translateY(-6px) scale(.97); }
.km-county { transition-delay: 0s, var(--in, 0ms), var(--in, 0ms); }
.km-card.is-settled .km-county { transition-delay: 0s; }

.km-info {
  position: relative; background: #fff; border: 1px solid var(--line); padding: 1.25rem 1.4rem 1.3rem 1.6rem;
  min-height: 7.5rem; overflow: hidden;
}
.km-info__swatch {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rc, var(--blue));
  transition: background-color .3s ease;
}
.km-info__meta { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rc, var(--muted)); }
.km-info__name { margin-top: .35rem; font-size: 1.3rem; font-weight: 800; line-height: 1.15; color: var(--ink); }
.km-info__detail { margin-top: .4rem; font-size: .875rem; color: var(--muted); }
.km-info.is-swap > :not(.km-info__swatch) { animation: www-swap .35s var(--ease-out); }
@keyframes www-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.km-label { margin-bottom: .6rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.km-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.km-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.km-chip[data-region]:not([data-region=""])::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 999px; background: var(--rc);
}
.km-chip:hover { border-color: var(--rc, var(--ink)); }
.km-chip.is-on { background: var(--rc, var(--ink)); border-color: var(--rc, var(--ink)); color: #fff; }
.km-chip.is-on::before { background: #fff !important; }
.km-chip:focus-visible { outline: 3px solid var(--rc, var(--blue)); outline-offset: 2px; }

.km-finder { background: #fff; border: 1px solid var(--line); }
.km-search { display: flex; align-items: center; gap: .6rem; padding: .2rem .9rem; border-bottom: 1px solid var(--line); }
.km-search svg { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: none; }
.km-search input {
  width: 100%; padding: .7rem 0; border: 0; outline: 0; background: transparent;
  font-size: .95rem; color: var(--ink);
}
.km-search:focus-within { box-shadow: inset 0 -2px 0 var(--blue); }
.km-list { position: relative; max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (min-width: 1024px) { .km-list { max-height: 20rem; } }
.km-list button {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .9rem;
  text-align: left; font-size: .9rem; color: var(--ink); cursor: pointer;
  border-left: 3px solid transparent; transition: background-color .15s ease, border-color .15s ease;
}
.km-list button:hover, .km-list button.is-hot { background: color-mix(in srgb, var(--rc) 10%, #fff); border-left-color: var(--rc); }
.km-list button.is-on { background: color-mix(in srgb, var(--rc) 16%, #fff); border-left-color: var(--rc); font-weight: 700; }
.km-list button:focus-visible { outline: 2px solid var(--rc); outline-offset: -2px; }
.km-list .km-code { width: 1.8rem; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.km-list .km-dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--rc); flex: none; }
.km-list .km-region { margin-left: auto; font-size: 11px; color: var(--muted); }
.km-empty { padding: 1rem .9rem; font-size: .875rem; color: var(--muted); }


/* ---------------------------------------------------------------------
   3. Offices
   --------------------------------------------------------------------- */
.www-office {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); padding: 1.5rem 1.5rem 1.3rem;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease;
}
.www-office::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--c); transform-origin: left; transition: transform .45s var(--ease-out); }
.www-office:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--c) 80%, transparent); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
.www-office__top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.www-office__country { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.www-office__tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--c); padding: .15rem .45rem; }
.www-office__city { margin-top: .5rem; font-size: 1.2rem; font-weight: 800; line-height: 1.15; color: var(--ink); }
.www-office__text { margin-top: .6rem; font-size: .875rem; line-height: 1.65; color: var(--muted); flex: 1; }
.www-office__link {
  margin-top: 1.1rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); cursor: pointer;
}
.www-office__link svg { width: .95rem; height: .95rem; transition: transform .3s var(--ease-out); }
.www-office__link:hover svg { transform: translateX(4px); }
.www-office__link:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }


/* ---------------------------------------------------------------------
   4. Continue exploring
   --------------------------------------------------------------------- */
.www-next { background: var(--ivory); border-top: 1px solid var(--line); }
.www-next .grid { background: var(--line); }
.www-next__link {
  display: flex; flex-direction: column; gap: .4rem; padding: 2rem 0; background: var(--ivory);
  transition: background-color .25s ease;
}
.www-next__link.is-next { text-align: right; align-items: flex-end; }
@media (min-width: 640px) { .www-next__link { padding: 2.5rem 2rem; } .www-next__link:first-child { padding-left: 0; } .www-next__link.is-next { padding-right: 0; } }
.www-next__dir { display: inline-flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.www-next__dir svg { width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.www-next__title { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 800; color: var(--blue); transition: color .25s ease; }
.www-next__link:hover .www-next__title { color: var(--blue-dark); }
.www-next__link:hover .www-next__dir svg { transform: translateX(-4px); }
.www-next__link.is-next:hover .www-next__dir svg { transform: translateX(4px); }


/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .www *, .www *::before { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}