body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: #fbfcf8;
  color: #0d3d3a;
}

.portfolio-detail-page {
  background: #fbfcf8;
  color: #0d3d3a;
}

.portfolio-container {
  width: min(90%, 1280px);
  margin: 0 auto;
}

.portfolio-hero {
  background:
    radial-gradient(circle at 68% 34%, rgba(0, 216, 220, 0.22), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(201, 145, 58, 0.13), transparent 24%),
    linear-gradient(135deg, #001d25 0%, #00323a 54%, #001a21 100%);
  color: #fff;
  min-height: 430px;
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}

.portfolio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 216, 220, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 216, 220, 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent, black 26%, black 82%, transparent);
  opacity: 0.28;
}

.portfolio-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.portfolio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(0, 173, 156, 0.34);
  border: 1px solid rgba(74, 238, 230, 0.32);
  color: #cffffb;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.portfolio-hero h1 {
  color: #fff;
  font-size: 3.25rem;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 22px;
  max-width: 760px;
}

.portfolio-hero-subtitle {
  color: #4debe2;
  font-size: 1.16rem;
  line-height: 1.55;
  font-weight: 800;
  max-width: 720px;
  margin: 0 0 24px;
}

.portfolio-hero-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
  line-height: 1.72;
  max-width: 720px;
  margin: 0;
}

.portfolio-hero-art {
  min-height: 330px;
  position: relative;
}

.africa-network {
  position: absolute;
  inset: 0 80px 0 30px;
  background:
    radial-gradient(circle at 45% 42%, rgba(49, 236, 231, 0.98), rgba(0, 127, 139, 0.28) 45%, transparent 66%),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.35) 1px, transparent 2px);
  background-size: auto, 18px 18px;
  filter: drop-shadow(0 0 22px rgba(45, 231, 229, 0.42));
  opacity: 0.92;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151 26C128 28 101 41 83 59C64 79 55 103 48 129C40 159 45 184 59 207C73 231 97 245 110 266C121 283 125 294 144 297C166 301 188 288 199 268C212 244 208 219 226 198C245 176 272 164 279 137C286 111 277 82 255 64C234 47 207 45 187 32C174 23 166 24 151 26Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151 26C128 28 101 41 83 59C64 79 55 103 48 129C40 159 45 184 59 207C73 231 97 245 110 266C121 283 125 294 144 297C166 301 188 288 199 268C212 244 208 219 226 198C245 176 272 164 279 137C286 111 277 82 255 64C234 47 207 45 187 32C174 23 166 24 151 26Z' fill='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.africa-network::before,
.africa-network::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(71, 236, 231, 0.22);
  border-radius: 50%;
  inset: 12%;
}

.africa-network::after {
  inset: 22%;
  border-style: dashed;
}

.hero-card-stack {
  position: absolute;
  right: 0;
  top: 18px;
  width: 250px;
  display: grid;
  gap: 14px;
}

.hero-card {
  border: 1px solid rgba(112, 237, 233, 0.35);
  border-radius: 8px;
  background: rgba(2, 35, 43, 0.78);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  padding: 18px 18px 17px;
}

.hero-card strong {
  display: block;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-card span {
  color: rgba(255, 255, 255, 0.78);
  display: block;
  font-size: 0.82rem;
  line-height: 1.48;
}

.portfolio-section {
  padding: 48px 0;
}

.portfolio-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
  gap: 56px;
  align-items: start;
}

.portfolio-section-label {
  color: #006a71;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.portfolio-heading {
  color: #0d3d3a;
  font-size: 1.72rem;
  line-height: 1.13;
  font-weight: 900;
  margin: 0 0 18px;
}

.portfolio-copy p {
  color: #263e43;
  font-size: 0.96rem;
  line-height: 1.75;
  margin: 0 0 18px;
}

.portfolio-focus-panel {
  border-left: 1px solid rgba(13, 61, 58, 0.16);
  padding-left: 46px;
}

.focus-list {
  display: grid;
  gap: 0;
}

.focus-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(13, 61, 58, 0.1);
}

.focus-icon,
.project-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #00666f;
  color: #eafffb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 900;
  flex-shrink: 0;
}

.focus-item h3 {
  color: #0d3d3a;
  font-size: 0.92rem;
  font-weight: 900;
  margin: 0 0 4px;
}

.focus-item p {
  color: #2c464a;
  font-size: 0.84rem;
  line-height: 1.48;
  margin: 0;
}

.portfolio-panel {
  border: 1px solid rgba(13, 61, 58, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13, 61, 58, 0.06);
  padding: 26px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.project-card {
  min-width: 0;
  border-right: 1px solid rgba(13, 61, 58, 0.1);
  padding-right: 22px;
}

.project-card:last-child {
  border-right: none;
  padding-right: 0;
}

.project-media {
  border-radius: 8px;
  height: 178px;
  overflow: hidden;
  border: 1px solid rgba(13, 61, 58, 0.12);
  background: #0d3d3a;
  margin-bottom: 18px;
  position: relative;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 34, 40, 0), rgba(0, 34, 40, 0.34));
}

.project-title-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.project-card h3 {
  color: #0d3d3a;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 900;
  margin: 0 0 8px;
}

.project-card p {
  color: #2d484b;
  font-size: 0.86rem;
  line-height: 1.58;
  margin: 0 0 18px;
}

.project-link {
  color: #00666f;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.project-link:hover {
  color: #c9913a;
}

.impact-section {
  padding: 22px 0 46px;
}

.impact-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(13, 61, 58, 0.1);
  border-bottom: 1px solid rgba(13, 61, 58, 0.1);
}

.impact-item {
  min-height: 108px;
  padding: 22px 18px;
  border-right: 1px solid rgba(13, 61, 58, 0.1);
}

.impact-item:last-child {
  border-right: none;
}

.impact-item strong {
  color: #00666f;
  display: block;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 7px;
}

.impact-item span {
  color: #243d42;
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 700;
}

.portfolio-two-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border: 1px solid rgba(13, 61, 58, 0.12);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(13, 61, 58, 0.05);
}

.partner-panel,
.why-panel {
  padding: 28px;
}

.partner-panel {
  border-right: 1px solid rgba(13, 61, 58, 0.1);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
}

.partner-item {
  text-align: center;
  color: #102d33;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.3;
}

.partner-symbol {
  width: 44px;
  height: 44px;
  margin: 0 auto 9px;
  border-radius: 8px;
  border: 1px solid rgba(0, 102, 111, 0.18);
  color: #00666f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
}

.why-panel p {
  color: #263f43;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  color: #263f43;
  font-size: 0.88rem;
  line-height: 1.5;
  padding-left: 26px;
  position: relative;
}

.check-list li::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #00666f;
  position: absolute;
  left: 0;
  top: 0.28em;
}

.check-list li::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #00666f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  left: 5px;
  top: 0.38em;
}

.roadmap-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(13, 61, 58, 0.1);
}

.roadmap-item {
  color: #243d42;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 20px 16px;
  border-right: 1px solid rgba(13, 61, 58, 0.1);
}

.roadmap-item:last-child {
  border-right: none;
}

.portfolio-cta {
  padding: 10px 0 64px;
}

.portfolio-cta-inner {
  background:
    radial-gradient(circle at 18% 40%, rgba(0, 216, 220, 0.24), transparent 24%),
    linear-gradient(135deg, #00242d 0%, #00323a 100%);
  color: #fff;
  border-radius: 8px;
  padding: 30px 38px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.cta-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0, 173, 156, 0.26);
  color: #bffefa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
}

.portfolio-cta h2 {
  color: #fff;
  font-size: 1.72rem;
  font-weight: 900;
  margin: 0 0 7px;
}

.portfolio-cta p {
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
  margin: 0;
}

.portfolio-btn {
  background: #c9913a;
  color: #082f2d;
  border-radius: 5px;
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
}

.portfolio-btn:hover {
  color: #082f2d;
  background: #d9a344;
}

.site-nav,
.mobile-menu,
.site-footer {
  font-family: 'Open Sans', Arial, sans-serif;
}

@media (max-width: 1120px) {
  .portfolio-hero-layout,
  .portfolio-overview-grid,
  .portfolio-two-panel {
    grid-template-columns: 1fr;
  }

  .portfolio-focus-panel,
  .partner-panel {
    border-left: none;
    border-right: none;
    padding-left: 0;
  }

  .project-grid,
  .impact-row,
  .roadmap-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-card,
  .impact-item,
  .roadmap-item {
    border-right: none;
  }

  .hero-card-stack {
    right: 20px;
  }

  .portfolio-hero h1 {
    font-size: 2.75rem;
  }
}

@media (max-width: 768px) {
  .portfolio-hero {
    padding: 46px 0 42px;
  }

  .portfolio-hero h1 {
    font-size: 2.05rem;
  }

  .portfolio-heading {
    font-size: 1.45rem;
  }

  .portfolio-cta h2 {
    font-size: 1.35rem;
  }

  .portfolio-hero-layout,
  .project-grid,
  .impact-row,
  .roadmap-strip,
  .partner-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-hero-art {
    min-height: 280px;
  }

  .africa-network {
    inset: 10px 0;
  }

  .hero-card-stack {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    padding-top: 230px;
  }

  .portfolio-panel,
  .partner-panel,
  .why-panel {
    padding: 22px;
  }

  .portfolio-cta-inner {
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 28px 24px;
  }
}