/* About page: "Meet the team" (people, personally) and "How we're organised"
   (the hierarchy). Colours, type and radii are the site's own tokens.

   Photos are never cropped in the files: each person's class below sets
   where their face is (--fx/--fy) and how far to zoom, for the square team
   photo (--zoom, nudged with --cx/--cy) and the round organogram photo
   (--azoom, which also centres the face). */

/* --------------------------------------------------------------- photos */
.person-photo img, .og-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 40%);
  transform-origin: var(--fx, 50%) var(--fy, 40%);
}
.person-photo img {
  transform: translate(var(--cx, 0%), var(--cy, 0%)) scale(var(--zoom, 1));
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.og-photo img { transform: translate(calc(50% - var(--fx, 50%)), calc(44% - var(--fy, 40%))) scale(var(--azoom, 1.12)); }

.photo--digamela { --fx: 54%; --fy: 40%; --zoom: 1.1; --azoom: 1.5; }
.photo--dikutle { --fx: 52%; --fy: 50%; --azoom: 1.2; }
.photo--tshabalala { --fx: 62%; --fy: 19%; --zoom: 2.3; --cx: -12%; --cy: 19%; --azoom: 3.3; }
.photo--nage { --fx: 50%; --fy: 54%; --azoom: 1.15; }
.photo--malete { --fx: 50%; --fy: 40%; --azoom: 1.4; }   /* the round photo shows the figure, not the small caption */
.photo--smith { --fx: 73%; --fy: 30%; --zoom: 1.4; --cx: -10%; --cy: 10%; --azoom: 2.4; }
.photo--masango { --fx: 48%; --fy: 45%; --zoom: 1.9; --azoom: 1.32; }

/* --------------------------------------------------------- meet the team */
/* Chairperson and CEO side by side, then the five members in one row. */
.people {
  --people-gap: clamp(1rem, .55rem + 1.3vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--people-gap);
}
.people > li { grid-column: span 2; display: flex; min-width: 0; }
.people > li:nth-child(-n+2) { grid-column: span 5; }
.person-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--cream-card); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 40, 31, .05), 0 8px 24px rgba(12, 40, 31, .06);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
.person-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 2px 4px rgba(12, 40, 31, .06), 0 20px 44px rgba(12, 40, 31, .14); }
.person-card:hover .person-photo img { transform: translate(var(--cx, 0%), var(--cy, 0%)) scale(calc(var(--zoom, 1) * 1.05)); }
.person-photo { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper); flex: none; }
.person-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem 1.35rem; min-width: 0; }
html body .people .person-name {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.22;
  letter-spacing: -.005em; color: var(--pine-dark); overflow-wrap: anywhere;
}
.person-role {
  position: relative; margin: 0; padding-bottom: .6rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink);
}
.person-role::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px;
  background: var(--gold); transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.person-card:hover .person-role::after { width: 64px; }
.person-bio { margin: .2rem 0 0; font-size: .93rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 84%, transparent); }
/* The two leaders: photo beside the words. */
.people > li:nth-child(-n+2) .person-card { flex-direction: row; }
.people > li:nth-child(-n+2) .person-photo { width: 44%; }
.people > li:nth-child(-n+2) .person-body { justify-content: center; padding: 1.5rem 1.6rem; }
html body .people > li:nth-child(-n+2) .person-name { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.65rem); }

@media (max-width: 1180px) {
  .people { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .people > li { grid-column: span 2; }
  .people > li:nth-child(-n+2) { grid-column: span 3; }
  .people > li:nth-child(6) { grid-column: 2 / span 2; }
  .people > li:nth-child(7) { grid-column: 4 / span 2; }
}
@media (max-width: 860px) {
  .people > li:nth-child(-n+2) .person-card { flex-direction: column; }
  .people > li:nth-child(-n+2) .person-photo { width: 100%; }
  .people > li:nth-child(-n+2) .person-body { padding: 1.1rem 1.2rem 1.35rem; }
}
/* Phones: one column of compact cards, photo beside the words. */
@media (max-width: 640px) {
  .people { grid-template-columns: minmax(0, 1fr); }
  .people > li, .people > li:nth-child(n) { grid-column: 1 / -1; }
  .person-card, .people > li:nth-child(-n+2) .person-card { flex-direction: row; align-items: flex-start; }
  .person-photo, .people > li:nth-child(-n+2) .person-photo { width: 104px; margin: 1rem 0 1rem 1rem; border-radius: 12px; }
  .person-body, .people > li:nth-child(-n+2) .person-body { padding: 1rem 1rem 1.1rem; justify-content: flex-start; }
  html body .people .person-name, html body .people > li:nth-child(-n+2) .person-name { font-size: 1.15rem; }
}

/* ------------------------------------------------------------ organogram */
.og {
  --og-line: var(--gold); --og-w: 2px; --og-gap: clamp(.75rem, .35rem + 1vw, 1.25rem);
  --og-stem: 2.25rem; --og-drop: 1.5rem; --og-head: 3.75rem; --og-tuck: 6px;
  --og-ease: cubic-bezier(.16, 1, .3, 1);
  margin-top: .5rem;
}
:where(.og) ul { list-style: none; margin: 0; padding: 0; }   /* :where keeps this weaker than the layout rules below */
.og li { position: relative; min-width: 0; }
.og-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.1rem .85rem 1.05rem; text-align: center;
  background: var(--cream-card); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(12, 40, 31, .05), 0 6px 18px rgba(12, 40, 31, .07);
  transition: transform .3s var(--og-ease), box-shadow .3s ease, border-color .3s ease;
}
.og-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 2px 4px rgba(12, 40, 31, .06), 0 16px 36px rgba(12, 40, 31, .14); }
.og-photo {
  width: 72px; aspect-ratio: 1; flex: none; margin-bottom: .45rem; border-radius: 50%; overflow: hidden;
  background: var(--paper); box-shadow: 0 0 0 3px var(--cream-card), 0 0 0 5px var(--gold);
}
.og-role { margin: 0; font-size: .7rem; font-weight: 700; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); }
html body .og .og-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; line-height: 1.25; color: var(--pine-dark); overflow-wrap: anywhere; }
.og-card--chair, .og-card--ceo { width: min(100%, 300px); margin-inline: auto; padding: 1.4rem 1.2rem 1.3rem; }
.og-card--chair .og-photo, .og-card--ceo .og-photo { width: 92px; }
html body .og .og-card--chair .og-name, html body .og .og-card--ceo .og-name { font-size: 1.3rem; }
.og-card--ceo { background: linear-gradient(160deg, var(--pine) 0%, var(--pine-dark) 100%); border-color: color-mix(in srgb, var(--gold) 65%, transparent); }
html body .og .og-card--ceo .og-name { color: var(--text-on-dark); }
.og-card--ceo .og-role { color: var(--gold); }
.og-card--ceo .og-photo { box-shadow: 0 0 0 3px var(--pine-dark), 0 0 0 5px var(--gold); }
.og-group-label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 1.75rem; margin: 0; padding: 0 .95rem;
  border: 1px solid var(--og-line); border-radius: 999px; background: var(--cream-card);
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap;
}
/* Every line is a pseudo-element under the cards; each one tucks a few pixels
   behind the card it meets, so a lifted card never shows a gap. */
.og-level::before, .og-branches::before, .og-branches::after, .og-branch::before, .og-branch::after,
.og-group-label::after, .og-members::before, .og-member::before, .og-member::after {
  content: ""; position: absolute; background: var(--og-line);
}
.og-level { position: relative; padding-top: var(--og-stem); }
.og-level::before { top: calc(-1 * var(--og-tuck)); left: 50%; width: var(--og-w); margin-left: -1px; height: calc(var(--og-stem) + 2 * var(--og-tuck)); transform-origin: top; }

/* Wide screens: chairperson, CEO, then one row of five equal cards. */
@media (min-width: 1000px) {
  .og-branches {
    position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--og-gap);
    max-width: 1120px; margin: 0 auto; padding-top: calc(var(--og-stem) + var(--og-drop));
  }
  /* Left half: down from the CEO, then out to the first branch (a box whose right and bottom edges are the lines). */
  .og-branches::before {
    top: calc(-1 * var(--og-tuck)); height: calc(var(--og-stem) + var(--og-tuck) + 1px);
    left: calc((100% - 4 * var(--og-gap)) / 10); right: calc(50% - 1px);
    background: none; border-right: var(--og-w) solid var(--og-line); border-bottom: var(--og-w) solid var(--og-line);
  }
  /* Right half: out to the centre of the additional members. */
  .og-branches::after { top: calc(var(--og-stem) - 1px); height: var(--og-w); left: 50%; right: calc((100% - 4 * var(--og-gap)) / 5 + var(--og-gap) / 2); transform-origin: left; }
  .og-branch { display: flex; flex-direction: column; }
  .og-branch:not(.og-group) { padding-top: var(--og-head); }
  .og-branch::before { top: calc(-1 * var(--og-drop)); left: 50%; width: var(--og-w); margin-left: -1px; height: calc(var(--og-drop) + var(--og-head) + var(--og-tuck)); transform-origin: top; }
  .og-group::before { height: calc(var(--og-drop) + var(--og-tuck)); }
  .og-branch > .og-card { flex: 1; }
  .og-group { grid-column: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; }
  .og-group-label { grid-column: 1 / -1; justify-self: center; }
  .og-group-label::after { top: 100%; left: 50%; width: var(--og-w); margin-left: -1px; height: calc(.875rem + 1px); transform-origin: top; }
  .og-members { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; position: relative; padding-top: 2rem; }
  .og-members::before { top: calc(.875rem - 1px); height: var(--og-w); left: calc((100% - var(--og-gap)) / 4); right: calc((100% - var(--og-gap)) / 4); transform-origin: center; }
  .og-member { display: flex; flex-direction: column; }
  .og-member::before { top: -1.125rem; left: 50%; width: var(--og-w); margin-left: -1px; height: calc(1.125rem + var(--og-tuck)); transform-origin: top; }
  .og-member > .og-card { flex: 1; }
  .og-branch::after, .og-member::after { display: none; }
}

/* Tablets and phones: a vertical tree. The CEO's line turns to a spine on the
   left, and each card hangs off it; the additional members branch once more. */
@media (max-width: 999px) {
  .og { --og-stem: 1.75rem; --og-step: .75rem; --og-tick: 2.6rem; }
  .og-card--chair, .og-card--ceo { width: min(100%, 340px); }
  .og-branches { position: relative; max-width: 480px; margin: 0 auto; padding: var(--og-stem) 0 0 1.75rem; }
  /* Down from the CEO, then left to the spine. */
  .og-branches::before {
    top: calc(-1 * var(--og-tuck)); height: calc(var(--og-stem) + var(--og-tuck) + 1px);
    left: calc(.75rem - 1px); right: calc(50% - 1px);
    background: none; border-right: var(--og-w) solid var(--og-line); border-bottom: var(--og-w) solid var(--og-line);
  }
  .og-branches::after { display: none; }
  .og-branch + .og-branch, .og-member + .og-member { margin-top: var(--og-step); }
  .og-branch::before, .og-member::before { top: var(--og-tick); left: -1rem; width: calc(1rem + var(--og-tuck)); height: var(--og-w); margin-top: -1px; transform-origin: left; }
  .og-branch::after, .og-member::after { top: calc(-1 * var(--og-step)); bottom: 0; left: calc(-1rem - 1px); width: var(--og-w); transform-origin: top; }
  .og-branch:first-child::after { top: 0; }
  .og-group::before { top: .875rem; }
  .og-member:last-child::after { bottom: auto; height: calc(var(--og-step) + var(--og-tick)); }
  .og-members { position: relative; margin-top: var(--og-step); padding-left: 1.75rem; }
  .og-members::before { display: none; }
  .og-group-label::after { display: none; }
  /* Compact cards: photo beside role and name. */
  .og-branch > .og-card, .og-member > .og-card {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center;
    column-gap: .9rem; row-gap: .1rem; padding: .8rem 1rem; text-align: left;
  }
  .og-branch > .og-card .og-photo, .og-member > .og-card .og-photo { width: 56px; grid-row: 1 / 3; margin: 0; }
  .og-branch > .og-card .og-role, .og-member > .og-card .og-role { align-self: end; }
  .og-branch > .og-card .og-name, .og-member > .og-card .og-name { align-self: start; }
}
/* The last branch (the additional members) ends the spine at its label. */
@media (max-width: 999px) {
  .og-branch:last-child::after { bottom: auto; height: calc(var(--og-step) + .875rem); }
}

/* --------------------------------------------------------------- motion */
/* organogram.js adds .is-ready to a section below the fold and .is-in when a
   fifth of it is visible. Without the script, nothing is ever hidden. */
@keyframes og-drop-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes og-rise-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes og-grow-y { from { transform: scaleY(0); } }
@keyframes og-grow-x { from { transform: scaleX(0); } }
@keyframes og-reveal-elbow {
  from { clip-path: inset(0 0 100% calc(100% - 3px)); }
  45% { clip-path: inset(0 0 0 calc(100% - 3px)); }
  to { clip-path: inset(0 0 0 0); }
}
.og.is-ready:not(.is-in) :is(.og-card, .og-group-label) { opacity: 0; }
.og.is-ready:not(.is-in) :is(.og-level, .og-branch, .og-member)::before,
.og.is-ready:not(.is-in) :is(.og-branch, .og-member)::after,
.og.is-ready:not(.is-in) .og-group-label::after { transform: scaleY(0); }
.og.is-ready:not(.is-in) .og-branches::after, .og.is-ready:not(.is-in) .og-members::before { transform: scaleX(0); }
.og.is-ready:not(.is-in) .og-branches::before { clip-path: inset(0 0 100% calc(100% - 3px)); }

.og.is-in .og-card--chair { animation: og-drop-in .6s var(--og-ease) backwards; }
.og.is-in .og-level::before { animation: og-grow-y .4s var(--og-ease) .45s backwards; }
.og.is-in .og-card--ceo { animation: og-drop-in .6s var(--og-ease) .75s backwards; }
.og.is-in .og-branches::before { animation: og-reveal-elbow .85s ease-in-out 1.2s backwards; }
.og.is-in .og-branches::after { animation: og-grow-x .45s var(--og-ease) 1.6s backwards; }
.og.is-in .og-branch::before { animation: og-grow-y .35s var(--og-ease) 2s backwards; }
.og.is-in .og-branch::after, .og.is-in .og-member::after { animation: og-grow-y .35s var(--og-ease) 1.95s backwards; }
.og.is-in .og-branch > .og-card { animation: og-rise-in .55s var(--og-ease) calc(2.15s + var(--og-i, 0) * 110ms) backwards; }
.og.is-in .og-group-label { animation: og-rise-in .45s var(--og-ease) 2.3s backwards; }
.og.is-in .og-group-label::after { animation: og-grow-y .3s var(--og-ease) 2.55s backwards; }
.og.is-in .og-members::before { animation: og-grow-x .4s var(--og-ease) 2.7s backwards; }
.og.is-in .og-member::before { animation: og-grow-y .3s var(--og-ease) 2.9s backwards; }
.og.is-in .og-member > .og-card { animation: og-rise-in .55s var(--og-ease) calc(3s + var(--og-i, 0) * 110ms) backwards; }
.og-branch:nth-child(2) { --og-i: 1; }
.og-branch:nth-child(3) { --og-i: 2; }
.og-member:nth-child(2) { --og-i: 1; }

.people.is-ready:not(.is-in) > li { opacity: 0; }
.people.is-in > li { animation: og-rise-in .6s var(--og-ease, ease) calc(var(--p-i, 0) * 90ms) backwards; }
.people > li:nth-child(2) { --p-i: 1; }
.people > li:nth-child(3) { --p-i: 2; }
.people > li:nth-child(4) { --p-i: 3; }
.people > li:nth-child(5) { --p-i: 4; }
.people > li:nth-child(6) { --p-i: 5; }
.people > li:nth-child(7) { --p-i: 6; }

/* Reduced motion (system setting or the accessibility panel): everything still, everything shown. */
@media (prefers-reduced-motion: reduce) {
  .og *, .og *::before, .og *::after, .people *, .people > li { animation: none !important; transition: none !important; }
  .og-card:hover, .person-card:hover { transform: none; }
}
html.pref-motion .og *, html.pref-motion .og *::before, html.pref-motion .og *::after,
html.pref-motion .people *, html.pref-motion .people > li { animation: none !important; transition: none !important; }
html.pref-motion :is(.og-card, .person-card):hover { transform: none; }

/* ------------------------------------------------- contrast and printing */
body.accessibility-contrast .og { --og-line: #000; }
body.accessibility-contrast :is(.og-card, .og-card--ceo, .person-card, .og-group-label) { background: #fff; color: #000; border-color: #000; box-shadow: none; }
body.accessibility-contrast :is(.og-role, .person-role, .og-card--ceo .og-role) { color: #000; }
body.accessibility-contrast .og .og-name, body.accessibility-contrast .og .og-card--ceo .og-name, body.accessibility-contrast .people .person-name { color: #000; }
@media print {
  .og { --og-line: #000; }
  :is(.og-card, .og-card--ceo, .person-card) { background: #fff; color: #000; box-shadow: none; break-inside: avoid; }
  .og-card--ceo .og-name, .og-card--ceo .og-role { color: #000; }
}