/* Focused accessibility and footer refinements, 2026-08-12. */

.btn--primary,
.btn--primary:visited,
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active {
  color: #07101f;
  -webkit-text-fill-color: #07101f;
  text-shadow: none;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: linear-gradient(135deg, #64b5f6 0%, #7ae5f0 100%);
}

@media (forced-colors: active) {
  .btn--primary {
    border-color: ButtonText;
    color: ButtonText;
    -webkit-text-fill-color: ButtonText;
  }
}

.analytics-consent {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: calc(var(--z-modal) + 1);
  display: grid;
  width: min(680px, calc(100vw - 2rem));
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--cid-cyan-30);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: var(--shadow-2xl);
  backdrop-filter: blur(18px) saturate(1.2);
}

.analytics-consent[hidden] {
  display: none;
}

.analytics-consent__copy strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.analytics-consent__copy p {
  margin-bottom: .35rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.analytics-consent__copy a {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.analytics-consent__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

.footer__credits {
  display: grid;
  gap: .35rem;
}

.footer__developer {
  margin: 0;
  color: #94a3b8;
  font-size: var(--text-xs);
}

.footer__developer a {
  color: var(--cid-cyan-light);
  font-weight: var(--font-semibold);
  text-underline-offset: .2em;
}

.footer__developer a:hover,
.footer__developer a:focus-visible {
  color: var(--cid-white);
}

.history-narrative {
  max-width: 820px;
  margin: 0 auto;
}

.history-narrative__lead {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

.orgchart__admin-badge {
  display: grid;
  max-width: 360px;
  gap: .35rem;
  border-radius: var(--radius-lg);
  text-align: left;
}

.orgchart__admin-badge strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.orgchart__admin-badge span {
  color: var(--cid-cyan);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

@media (min-width: 720px) {
  .analytics-consent {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .analytics-consent__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

/* Institutional pages: one editorial system, no extra runtime. */
.section--page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(300px, 38vw, 470px);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--cid-cyan-20);
  background:
    radial-gradient(circle at 78% 28%, rgb(77 217 232 / 16%), transparent 28%),
    radial-gradient(circle at 12% 82%, rgb(33 150 243 / 13%), transparent 32%),
    linear-gradient(145deg, #07101f 0%, #0d1b34 56%, #101f3b 100%);
}

.section--page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgb(77 217 232 / 18%);
  border-radius: 50%;
  top: 50%;
  right: -12%;
  box-shadow: 0 0 0 58px rgb(77 217 232 / 4%), 0 0 0 116px rgb(33 150 243 / 3%);
  transform: translateY(-50%);
  animation: institutional-orbit 14s ease-in-out infinite alternate;
}

.section--page-header::after {
  content: "CID";
  position: absolute;
  z-index: -1;
  right: clamp(1rem, 7vw, 7rem);
  bottom: -.18em;
  color: rgb(255 255 255 / 2.6%);
  font-family: var(--font-heading);
  font-size: clamp(8rem, 21vw, 19rem);
  font-weight: var(--font-extrabold);
  line-height: .8;
  letter-spacing: -.08em;
  pointer-events: none;
}

.section--page-header .container {
  position: relative;
  display: grid;
  max-width: 1180px;
  gap: 1.25rem;
}

.section--page-header .container > * {
  min-width: 0;
}

.section--page-header .page-title,
.section--page-header .page-header__title {
  max-width: 860px;
  margin: 0;
  color: var(--cid-cyan-light);
  font-size: clamp(2.7rem, 5vw, 5rem);
  letter-spacing: -.025em;
  line-height: .98;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.section--page-header .page-subtitle,
.section--page-header .page-header__subtitle {
  max-width: 680px;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--cid-cyan);
  color: #d6e0ed;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
}

.vision-detail,
.mission-detail {
  position: relative;
  display: grid;
  max-width: 980px;
  gap: 1.25rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--cid-cyan-20);
  border-radius: var(--radius-2xl);
  background: linear-gradient(145deg, rgb(77 217 232 / 7%), rgb(17 26 46 / 52%));
  box-shadow: 0 28px 80px rgb(0 0 0 / 18%);
}

.vision-detail::before,
.mission-detail::before {
  color: rgb(77 217 232 / 16%);
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 12vw, 9rem);
  font-weight: var(--font-extrabold);
  line-height: .8;
}

.vision-detail::before { content: "01"; }
.mission-detail::before { content: "02"; }

.vision-detail h2,
.mission-detail h2 {
  margin: 0;
  color: var(--cid-cyan);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.vision-detail__text,
.mission-detail__text {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.8;
}

.section--pillars .grid,
.section--values .grid,
.section--departments .grid,
.section--team .grid {
  counter-reset: editorial-card;
}

.section--pillars .card,
.section--values .card,
.section--departments .card,
.section--team .card--team {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cid-cyan-20);
  background: linear-gradient(150deg, rgb(77 217 232 / 7%), rgb(17 26 46 / 72%));
  box-shadow: 0 20px 55px rgb(0 0 0 / 16%);
  counter-increment: editorial-card;
}

.section--pillars .card::after,
.section--values .card::after,
.section--departments .card::after,
.section--team .card--team::after {
  content: counter(editorial-card, decimal-leading-zero);
  position: absolute;
  z-index: -1;
  top: .9rem;
  right: 1rem;
  color: rgb(77 217 232 / 14%);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: var(--font-extrabold);
  line-height: 1;
}

.section--pillars .card:hover,
.section--values .card:hover,
.section--departments .card:hover,
.section--team .card--team:hover {
  border-color: var(--card-accent, var(--cid-cyan));
  box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
  transform: translateY(-5px);
}

.section--team .card__team-photo {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  background: radial-gradient(circle at center, rgb(77 217 232 / 20%), transparent 42%), linear-gradient(135deg, rgb(33 150 243 / 12%), transparent 70%);
  overflow: hidden;
}

.section--team .team-card-wrapper,
.section--team .card--team {
  height: 100%;
}

.section--team .card--team {
  display: flex;
  flex-direction: column;
}

.section--team .card--team .card__body {
  flex: 1;
}

.section--team .card__team-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .55s var(--ease-out);
}

.section--team .card__team-image[src$="victor-maseka-studio.jpg"] {
  object-position: center 14%;
}

.section--team .card--team:hover .card__team-image {
  transform: scale(1.035);
}

.section--team .card__avatar-placeholder {
  display: grid;
  width: 86px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--cid-cyan-30);
  border-radius: 50%;
  color: var(--cid-cyan);
  background: rgb(7 16 31 / 58%);
  box-shadow: 0 0 42px rgb(77 217 232 / 15%);
}

.structure-org .orgchart {
  position: relative;
  display: grid;
  max-width: 1180px;
  gap: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--cid-cyan-20);
  border-radius: var(--radius-2xl);
  background: linear-gradient(90deg, rgb(77 217 232 / 3%) 1px, transparent 1px), linear-gradient(rgb(77 217 232 / 3%) 1px, transparent 1px), linear-gradient(155deg, rgb(77 217 232 / 5%), rgb(17 26 46 / 72%));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 30px 90px rgb(0 0 0 / 18%);
}

.structure-org {
  background: linear-gradient(180deg, transparent 0%, rgb(33 150 243 / 4%) 42%, transparent 100%);
}

.structure-org__eyebrow {
  margin: 0 0 .55rem;
  color: var(--cid-gold-light);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: var(--font-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.structure-org > .container > .section__title {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  color: var(--cid-white);
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.structure-org .orgchart__stage {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.4rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgb(77 217 232 / 16%);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgb(7 16 31 / 84%), rgb(17 26 46 / 76%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.structure-org .orgchart__stage::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cid-cyan), rgb(33 150 243 / 20%));
}

.structure-org .orgchart__stage--operations::before {
  background: linear-gradient(180deg, var(--cid-gold), rgb(245 181 68 / 20%));
}

.structure-org .orgchart__stage-heading {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(148 163 184 / 14%);
}

.structure-org .orgchart__stage-heading h3 {
  margin: 0;
  color: var(--cid-white);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  letter-spacing: -.01em;
}

.structure-org .orgchart__stage-index {
  display: grid;
  width: 2.4rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--cid-cyan-30);
  border-radius: 50%;
  color: var(--cid-cyan-light);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: var(--font-bold);
}

.structure-org .orgchart__node {
  position: relative;
  min-width: 0;
  border-color: var(--cid-cyan-20);
  background: linear-gradient(150deg, rgb(255 255 255 / 5%), rgb(33 150 243 / 4%));
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 46px rgb(0 0 0 / 15%);
}

.structure-org .orgchart__node:hover {
  border-color: var(--cid-cyan-30);
  box-shadow: 0 20px 52px rgb(0 0 0 / 25%), 0 0 0 1px rgb(77 217 232 / 12%);
}

.structure-org .orgchart__node--root {
  width: min(100%, 420px);
  max-width: 420px;
  border-color: rgb(245 181 68 / 34%);
  background: linear-gradient(145deg, rgb(245 181 68 / 10%), rgb(77 217 232 / 6%));
}

.structure-org .orgchart__node--root .orgchart__icon {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  place-items: center;
  border: 1px solid rgb(245 181 68 / 36%);
  border-radius: 50%;
  color: var(--cid-gold-light);
}

.structure-org .orgchart__level--bureau,
.structure-org .orgchart__level--exec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.structure-org .orgchart__node--bureau,
.structure-org .orgchart__node--exec {
  width: 100%;
  max-width: none;
}

.structure-org .orgchart__node h4 {
  color: var(--cid-white);
  font-size: clamp(.98rem, 1.6vw, 1.13rem);
  line-height: 1.35;
}

.structure-org .orgchart__avatar {
  width: 76px;
  height: 76px;
  border: 2px solid rgb(77 217 232 / 32%);
  box-shadow: 0 0 0 5px rgb(77 217 232 / 5%);
}

.structure-org .orgchart__name {
  margin: .75rem 0 0;
  color: var(--cid-cyan-light);
  font-size: .9rem;
  font-weight: var(--font-semibold);
}

.structure-org .orgchart__bio {
  color: #afbdd0;
  line-height: 1.6;
}

.structure-org .orgchart__section-title {
  margin: 0;
  color: var(--cid-gold-light);
  font-size: .78rem;
  font-weight: var(--font-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.structure-org .orgchart__admins {
  display: grid;
  gap: 1.25rem;
}

.structure-org .orgchart__admins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.structure-org .orgchart__admin-badge {
  position: relative;
  display: grid;
  max-width: none;
  min-width: 0;
  gap: .65rem;
  padding: 1.15rem;
  border: 1px solid rgb(77 217 232 / 16%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 3%);
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.structure-org .orgchart__admin-badge:hover {
  border-color: var(--cid-cyan-30);
  background: rgb(77 217 232 / 6%);
  transform: translateY(-3px);
}

.structure-org .orgchart__admin-badge .orgchart__avatar {
  width: 76px;
  height: 76px;
  margin: 0 0 .25rem;
}

.structure-org .orgchart__admin-badge strong {
  color: var(--cid-white);
  font-size: .84rem;
  line-height: 1.45;
}

.structure-org .orgchart__admin-badge > span:not(.orgchart__admin-index) {
  color: var(--cid-cyan-light);
  font-size: .78rem;
  font-weight: var(--font-semibold);
}

.structure-org .orgchart__admin-index {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: rgb(77 217 232 / 34%);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--font-bold);
}

.structure-org .orgchart__connector {
  height: 54px;
  background: linear-gradient(180deg, var(--cid-cyan-30), var(--cid-blue-20));
}

.structure-org .orgchart__connector--major {
  height: 72px;
}

.structure-org .orgchart__level--directions {
  display: grid;
  gap: 1.25rem;
}

.structure-org .orgchart__level--directions .grid {
  gap: 1rem;
}

.structure-org .orgchart__node--direction {
  height: 100%;
  border-top-width: 3px;
  text-align: left;
}

.structure-org .orgchart__dir-icon {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.network-provinces .impact-map-container,
.network-international #network-world-map,
.network-sustainer .sustainer-card,
.network-global-leaders .global-leaders-card {
  border: 1px solid var(--cid-cyan-20);
  box-shadow: 0 28px 80px rgb(0 0 0 / 20%);
}

.network-campus,
.network-international,
.network-global-leaders {
  background: linear-gradient(180deg, transparent, rgb(77 217 232 / 3%), transparent);
}

.network-campus .card,
.network-schools .card,
.network-reps__item {
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.network-campus .card:hover,
.network-schools .card:hover,
.network-reps__item:hover {
  border-color: var(--cid-cyan-30);
  box-shadow: 0 18px 48px rgb(0 0 0 / 22%);
  transform: translateY(-4px);
}

@keyframes institutional-orbit {
  from { transform: translateY(-50%) rotate(0deg) scale(.96); }
  to { transform: translateY(-50%) rotate(8deg) scale(1.04); }
}

@media (min-width: 760px) {
  .section--page-header .container {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: end;
  }

  .vision-detail,
  .mission-detail {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .vision-detail h2,
  .mission-detail h2,
  .vision-detail__text,
  .mission-detail__text { grid-column: 2; }

  .vision-detail::before,
  .mission-detail::before { grid-row: 1 / 3; }
}

@media (max-width: 759px) {
  .section--page-header { min-height: 300px; }
  .section--page-header::after { right: 1rem; }

  .section--page-header .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .section--page-header .container > * {
    min-width: 0;
    max-width: 100%;
  }

  .section--page-header .page-title,
  .section--page-header .page-header__title {
    font-size: clamp(2rem, 10vw, 2.55rem);
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .section--page-header .page-subtitle,
  .section--page-header .page-header__subtitle {
    overflow-wrap: anywhere;
  }

  .structure-org .orgchart {
    padding: 1rem;
    border-radius: var(--radius-xl);
  }

  .structure-org .orgchart__stage {
    padding: 1rem;
  }

  .structure-org .orgchart__level--bureau,
  .structure-org .orgchart__level--exec,
  .structure-org .orgchart__admins-grid,
  .structure-org .orgchart__level--directions .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .structure-org .orgchart__admin-badge {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .structure-org .orgchart__admin-badge .orgchart__avatar {
    grid-row: 1 / 3;
    margin: 0;
  }

  .structure-org .orgchart__admin-badge strong,
  .structure-org .orgchart__admin-badge > span:not(.orgchart__admin-index) {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--page-header::before { animation: none; }

  .section--pillars .card:hover,
  .section--values .card:hover,
  .section--departments .card:hover,
  .section--team .card--team:hover,
  .network-campus .card:hover,
  .network-schools .card:hover,
  .network-reps__item:hover { transform: none; }
}

/* Progressive enhancement: content stays readable when animation APIs fail. */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal.reveal--pending {
  opacity: 0;
  transform: translateY(30px);
}

.reveal.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Installable app experience. */
.pwa-install {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: calc(var(--z-modal) + 2);
  display: grid;
  grid-template-columns: auto 1fr;
  width: min(460px, calc(100vw - 2rem));
  gap: .9rem 1rem;
  padding: 1rem;
  border: 1px solid var(--cid-cyan-30);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: var(--shadow-2xl);
  backdrop-filter: blur(18px) saturate(1.2);
}

.pwa-install[hidden],
.pwa-network-status[hidden],
.pwa-install [hidden] {
  display: none;
}

.pwa-install > img {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

.pwa-install__copy strong {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-heading);
}

.pwa-install__copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.pwa-install__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85rem;
}

.pwa-install__dismiss {
  min-height: 44px;
  padding: .6rem .4rem;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.pwa-install__dismiss:hover,
.pwa-install__dismiss:focus-visible {
  color: var(--cid-cyan-light);
}

.pwa-network-status {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: calc(var(--z-modal) + 3);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .7rem 1rem;
  border: 1px solid var(--cid-cyan-30);
  border-radius: var(--radius-full);
  color: #07101f;
  background: var(--cid-cyan-light);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-align: center;
  transform: translateX(-50%);
}

.pwa-network-status--offline {
  border-color: rgb(251 191 36 / 55%);
  color: #fff;
  background: #7c2d12;
}

@media (display-mode: standalone) {
  body { min-height: 100dvh; }
  .header { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 560px) {
  .pwa-install {
    right: max(1rem, env(safe-area-inset-right));
    width: auto;
  }

  body.pwa-prompt-open .whatsapp-fab {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install,
  .pwa-network-status { transition: none; }
}

/* Navigation and footer hierarchy. */
.breadcrumb {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) + var(--container-padding));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.footer__links .footer__title {
  color: var(--cid-cyan-light);
}

.footer__newsletter .footer__title,
.footer__social .footer__title {
  color: var(--cid-gold-light);
}

@media (max-width: 767px) {
  .breadcrumb {
    padding-inline: max(1.25rem, env(safe-area-inset-left));
  }

  .footer__newsletter-input-group {
    width: 100%;
  }

  .footer__newsletter-input-group .form-input {
    width: 100%;
    min-width: 0;
    padding-inline: 1rem;
    font-size: .95rem;
  }

  .footer__social-links {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    max-width: 320px;
    gap: .75rem 0;
  }

  .footer__social-link {
    grid-column: span 2;
    justify-self: center;
  }

  .footer__social-link:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

/* CID motion language: restrained progress, depth and contextual light. */
body::before {
  content: "";
  position: fixed;
  z-index: calc(var(--z-header) + 2);
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cid-blue), var(--cid-cyan), var(--cid-gold));
  box-shadow: 0 0 18px rgb(77 217 232 / 45%);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

.hero__content,
.section--page-header .container {
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 0), 0);
  transition: transform 180ms var(--ease-out);
  will-change: transform;
}

.section__header {
  position: relative;
  padding-bottom: 1rem;
}

.section__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(84px, 22vw);
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--cid-cyan), var(--cid-gold));
  opacity: .9;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .7s var(--ease-out);
}

.reveal--visible .section__header::after,
.section__header:focus-within::after {
  transform: translateX(-50%) scaleX(1);
}

.has-spotlight.has-spotlight::after {
  display: none;
}

.has-spotlight > .cid-pointer-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgb(77 217 232 / 16%),
    transparent 58%
  );
  mix-blend-mode: screen;
  transition: opacity var(--duration-base) var(--ease-out);
}

.has-spotlight:hover > .cid-pointer-glow,
.has-spotlight:focus-within > .cid-pointer-glow {
  opacity: 1;
}

/* Editorial imagery and institutional content cards. */
.about-intro {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.about-intro__text {
  position: relative;
  z-index: 2;
}

.about-intro__text h2 {
  margin-bottom: 1.25rem;
  color: var(--cid-cyan-light);
}

.about-intro__text p,
.history-narrative p,
.vision-detail__text,
.mission-detail__text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.about-intro__text p {
  line-height: 1.85;
}

.about-intro__image {
  position: relative;
  z-index: 1;
  margin: 0;
}

.about-intro__image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1rem -1rem 1.25rem;
  border: 1px solid rgb(77 217 232 / 28%);
  border-radius: 2rem .5rem 2rem .5rem;
  background: linear-gradient(145deg, rgb(77 217 232 / 9%), rgb(245 181 68 / 5%));
}

.about-intro__image::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: -1rem;
  width: 4.5rem;
  height: .25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--cid-cyan), var(--cid-gold));
  box-shadow: 0 0 18px rgb(77 217 232 / 38%);
}

.about-intro__image picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: .5rem 2rem .5rem 2rem;
  box-shadow: 0 28px 70px rgb(0 0 0 / 32%);
}

.about-intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.015);
  transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
}

.about-intro__image:hover img {
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.045);
}

.card--pillar,
.card--value,
.card--department {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgb(77 217 232 / 17%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%)),
    var(--bg-card);
}

.card--pillar::before,
.card--value::before,
.card--department::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--card-accent), transparent 80%);
}

.card--pillar .card__icon,
.card--value .card__icon,
.card--department .card__icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.35rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 4%);
  color: var(--card-accent);
  box-shadow: inset 0 0 24px rgb(77 217 232 / 5%);
}

.card--pillar .card__icon svg,
.card--value .card__icon svg,
.card--department .card__icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.card--pillar .card__title,
.card--value .card__title,
.card--department .card__title {
  margin-bottom: .8rem;
  color: var(--cid-white);
}

.card--pillar .card__text,
.card--value .card__text,
.card--department .card__text {
  margin: 0;
  line-height: 1.75;
}

/* Real cartography, loaded lazily only on map pages. */
.cid-leaflet-map {
  width: 100%;
  height: 450px;
  overflow: hidden;
  border: 1px solid rgb(77 217 232 / 24%);
  border-radius: var(--radius-xl);
  background: #081426;
  box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
  font-family: var(--font-body);
  z-index: 0;
}

#network-world-map.cid-leaflet-map {
  height: 420px;
}

.cid-leaflet-map .leaflet-control-zoom a {
  border-color: #334155;
  background: #111a2e;
  color: var(--cid-white);
}

.cid-leaflet-map .leaflet-control-zoom a:hover,
.cid-leaflet-map .leaflet-control-zoom a:focus-visible {
  background: #16243d;
  color: var(--cid-cyan);
}

.cid-leaflet-map .leaflet-control-attribution {
  background: rgb(7 16 31 / 86%);
  color: #b8c6d8;
}

.cid-leaflet-map .leaflet-control-attribution a {
  color: var(--cid-cyan-light);
}

.leaflet-tooltip-cid {
  border: 1px solid rgb(77 217 232 / 32%);
  background: #0f1d33;
  color: var(--cid-white);
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
}

.leaflet-popup-cid-wrapper .leaflet-popup-content-wrapper,
.leaflet-popup-cid-wrapper .leaflet-popup-tip {
  border: 1px solid rgb(77 217 232 / 24%);
  background: #0f1d33;
  color: var(--cid-white);
}

.leaflet-popup-cid-wrapper .leaflet-popup-content-wrapper {
  border-radius: .85rem;
  box-shadow: 0 18px 40px rgb(0 0 0 / 38%);
}

.cid-map-popup {
  display: grid;
  min-width: 10rem;
  gap: .25rem;
  font-family: var(--font-body);
}

.cid-map-popup strong {
  color: var(--cid-cyan-light);
  font-size: .95rem;
}

.cid-map-popup span {
  color: #c5d1df;
  font-size: .8rem;
}

.cid-map-load-error {
  display: grid;
  min-height: 360px;
  place-items: center;
  margin: 0;
  padding: 2rem;
  border: 1px solid rgb(77 217 232 / 20%);
  border-radius: var(--radius-xl);
  background: #081426;
  color: #c5d1df;
  text-align: center;
}

/* Blog controls: compact, readable and separated from the editorial grid. */
.section--blog .blog-search {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
}

.section--blog .search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem;
  overflow: hidden;
  border: 1px solid rgb(77 217 232 / 32%);
  border-radius: 1rem;
  background: #111a2e;
  box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

.section--blog .search-form:focus-within {
  border-color: var(--cid-cyan);
  box-shadow: 0 0 0 3px rgb(77 217 232 / 16%), 0 14px 34px rgb(0 0 0 / 18%);
}

.section--blog .search-form__input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cid-white);
  padding: .95rem 1rem;
  font-size: 1rem;
}

.section--blog .search-form__input::placeholder {
  color: #9babc0;
  opacity: 1;
}

.section--blog .search-form__btn {
  display: grid;
  place-items: center;
  border-left: 1px solid rgb(77 217 232 / 20%);
  background: linear-gradient(135deg, var(--cid-blue), var(--cid-cyan));
  color: #07101f;
}

.section--blog .category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 2.5rem;
  padding: .25rem 0;
}

.section--blog .category-tabs__item {
  padding: .65rem 1rem;
  border: 1px solid rgb(148 163 184 / 24%);
  border-radius: 999px;
  background: rgb(17 26 46 / 70%);
  color: #c6d2e1;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
}

.section--blog .category-tabs__item:hover,
.section--blog .category-tabs__item:focus-visible,
.section--blog .category-tabs__item--active {
  border-color: var(--cid-cyan);
  background: rgb(77 217 232 / 12%);
  color: var(--cid-cyan-light);
}

@media (min-width: 900px) {
  .about-intro {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .about-intro__image {
    margin-right: 1rem;
  }

  .cid-leaflet-map {
    height: 500px;
  }

  #network-world-map.cid-leaflet-map {
    height: 460px;
  }
}

@media (max-width: 767px) {
  .about-intro__text p,
  .history-narrative p,
  .vision-detail__text,
  .mission-detail__text {
    text-align: left;
  }

  .about-intro__image::before {
    inset: .75rem -.5rem -.5rem .75rem;
  }

  .about-intro__image::after {
    right: -.5rem;
  }

  .cid-leaflet-map,
  #network-world-map.cid-leaflet-map {
    height: 380px;
  }

  .section--blog .category-tabs {
    gap: .55rem;
    margin-bottom: 2rem;
  }

  .section--blog .category-tabs__item {
    padding: .58rem .82rem;
    font-size: .82rem;
  }
}

@media (forced-colors: active) {
  body::before {
    background: Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .cid-pointer-glow {
    display: none;
  }

  .hero__content,
  .section--page-header .container {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .section__header::after {
    transform: translateX(-50%) scaleX(1);
    transition: none;
  }

  .about-intro__image img {
    animation: none;
    transition: none;
  }
}