:root{--teal:#008b8b;--teal-dark:#005b63;--teal-soft:#e8f7f6;--red:#c9252d;--red-dark:#a91d25;--red-soft:#fff0f1;--navy:#092c49;--ink:#172b3a;--muted:#5d6d79;--white:#fff;--line:#dce8eb;--shadow:0 14px 35px rgba(9,44,73,.10);--max:1180px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.65}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(var(--max),92%);margin:auto}
.topbar{background:var(--teal-dark);color:#fff;font-size:.86rem}.topbar-inner{min-height:38px;display:flex;justify-content:flex-end;align-items:center;gap:22px}.topbar a:hover{color:#ffd7d9}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.nav-wrap{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:13px;min-width:285px}.brand img{width:96px;height:auto}.brand-name{font-size:1.7rem;font-weight:800;letter-spacing:-.4px;line-height:1.05;color:var(--navy)}.brand-name span{display:block;font-size:.83rem;font-weight:500;letter-spacing:2.5px;margin-top:5px}.tagline{display:block;color:var(--red);font-size:.78rem;font-style:italic;font-weight:700;margin-top:4px}
.nav{display:flex;align-items:center;gap:5px}.nav a{padding:12px 11px;border-radius:10px;font-weight:700;font-size:.9rem;color:var(--navy)}.nav a:hover,.nav a.active{background:var(--teal-soft);color:var(--teal-dark)}.nav-cta{background:var(--red)!important;color:#fff!important}.nav-cta:hover{background:var(--red-dark)!important}.menu-btn{display:none;border:0;background:none;color:var(--navy);font-size:1.7rem;cursor:pointer}
.hero{background:radial-gradient(circle at 85% 30%,rgba(0,139,139,.18),transparent 35%),linear-gradient(120deg,#f8fbfc,#fff);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:510px;align-items:center;gap:35px}.hero-copy{padding:65px 0}.kicker{color:var(--red);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;margin-bottom:13px}.hero h1{font-size:clamp(2.8rem,5vw,4.5rem);line-height:1.02;letter-spacing:-2px;color:var(--navy)}.hero h1 span{color:var(--teal)}.hero p{font-size:1.1rem;color:var(--muted);max-width:620px;margin:22px 0 28px}.btn-row{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:9px;font-weight:800;border:2px solid transparent;transition:.25s}.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}.btn-secondary{border-color:var(--teal);color:var(--teal-dark);background:#fff}.btn-secondary:hover{background:var(--teal-soft);transform:translateY(-2px)}
.hero-visual{min-height:470px;display:flex;align-items:center;justify-content:center}.nexus-wheel{width:min(440px,90vw);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:conic-gradient(from -45deg,var(--teal) 0 25%,var(--red) 25% 50%,var(--teal) 50% 75%,var(--red) 75% 100%);box-shadow:0 25px 65px rgba(0,91,99,.2)}.nexus-wheel:before{content:"";width:42%;aspect-ratio:1;border-radius:50%;background:#fff;position:absolute}.nexus-core{z-index:2;text-align:center;color:var(--red);font-size:2.7rem;font-weight:900}.nexus-core small{display:block;color:var(--navy);font-size:.7rem;letter-spacing:1.5px}.wheel-label{position:absolute;z-index:3;color:#fff;font-weight:900;text-align:center;font-size:1.05rem}.wheel-label i{display:block;font-size:2rem;font-style:normal}.w1{top:18%;left:22%}.w2{top:18%;right:22%}.w3{bottom:18%;right:21%}.w4{bottom:18%;left:21%}
.core-strip{background:var(--navy);color:#fff}.core-grid{display:grid;grid-template-columns:repeat(4,1fr)}.core-item{display:flex;align-items:center;gap:13px;padding:22px 18px;border-right:1px solid rgba(255,255,255,.18)}.core-item:last-child{border-right:0}.icon-circle{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.55rem;font-weight:800;background:var(--teal)}.core-item:nth-child(even) .icon-circle{background:var(--red)}.core-item strong{display:block;text-transform:uppercase;letter-spacing:.8px}.core-item span{display:block;color:#d7e8eb;font-size:.83rem;line-height:1.35}
.section{padding:82px 0}.section.alt{background:#f7fbfc}.section-head{text-align:center;margin-bottom:38px}.section-label{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-size:1.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.section-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:1.35rem}.red-line{width:60px;height:4px;background:var(--red);margin:12px auto 0;border-radius:10px}.section-head p{max-width:720px;margin:10px auto 0;color:var(--muted)}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.who-visual{min-height:390px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#073d55,#008b8b);box-shadow:var(--shadow)}.who-visual img{width:100%;height:100%;object-fit:cover}.who-copy h3{font-size:2rem;color:var(--navy);margin:18px 0 15px}.who-copy p{color:var(--muted);margin-bottom:14px}.quote-box{margin-top:22px;background:var(--teal-soft);border-left:5px solid var(--teal);padding:17px 20px;border-radius:0 12px 12px 0;font-weight:800;color:var(--teal-dark)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 23px;text-align:center;box-shadow:0 8px 24px rgba(9,44,73,.06);transition:.25s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.service-icon{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:900;margin:0 auto 18px;background:var(--teal)}.service-card:nth-child(even) .service-icon{background:var(--red)}.service-card h3{font-size:1.08rem;color:var(--navy);margin-bottom:9px}.service-card p{font-size:.9rem;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 25px rgba(9,44,73,.07);transition:.25s}.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.project-img{height:205px;background:linear-gradient(135deg,var(--teal-dark),var(--teal));position:relative}.project-status{position:absolute;z-index:2;top:13px;left:13px;padding:5px 10px;border-radius:20px;color:#fff;font-size:.72rem;font-weight:900}.completed{background:var(--red)}.ongoing{background:var(--teal-dark)}.project-body{padding:22px}.project-body h3{font-size:1.08rem;line-height:1.35;color:var(--navy);margin-bottom:10px}.project-meta{font-size:.82rem;color:var(--muted);margin-bottom:12px}.project-meta strong{color:var(--teal-dark)}.project-body p{font-size:.88rem;color:var(--muted)}.project-link{display:inline-flex;margin-top:15px;color:var(--red);font-weight:900}
.academy-banner{background:linear-gradient(120deg,var(--navy),#073e5c);color:#fff}.academy-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:35px;align-items:center}.academy-banner h2{font-size:2.15rem;margin-bottom:10px}.academy-banner p{color:#d8e8ed}.module-count{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:25px;border-radius:18px}.module-count strong{font-size:2.4rem;color:#fff;display:block}.module-count span{color:#9fe5e1;font-weight:800}
.partner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.partner-card{min-height:105px;border-radius:14px;padding:18px 12px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;color:var(--navy);border:1px solid transparent;transition:.25s}.partner-card:nth-child(4n+1){background:#e9f7f6;border-color:#bde8e5}.partner-card:nth-child(4n+2){background:#fff0f1;border-color:#f4c6ca}.partner-card:nth-child(4n+3){background:#edf3fa;border-color:#cadbea}.partner-card:nth-child(4n){background:#fff8e8;border-color:#f0dfb6}.partner-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.footer{background:#063e49;color:#fff;padding:55px 0 18px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}.footer-brand img{width:170px;filter:brightness(0) invert(1)}.footer h4{margin-bottom:13px}.footer p,.footer a{color:#c9dfe3;font-size:.9rem}.footer a:hover{color:#fff}.footer ul{list-style:none}.footer li{margin:7px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:16px;text-align:center;color:#aac6cb;font-size:.8rem}
.page-hero{background:linear-gradient(120deg,var(--navy),var(--teal-dark));color:#fff;padding:78px 0}.page-hero h1{font-size:3.2rem;line-height:1.05;margin-bottom:13px}.page-hero p{max-width:760px;color:#d9eaed;font-size:1.05rem}.project-detail{padding:70px 0}.detail-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-bottom:35px}.detail-head{padding:28px 32px;background:linear-gradient(100deg,var(--teal-soft),#fff);border-bottom:1px solid var(--line)}.detail-head h2{color:var(--navy);font-size:1.65rem;line-height:1.3}.detail-head .status{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:20px;color:#fff;font-size:.72rem;font-weight:900}.detail-content{padding:30px 32px}.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:25px}.meta-box{background:#f7fbfc;border-radius:12px;padding:14px}.meta-box small{display:block;color:var(--muted);font-weight:700}.meta-box strong{color:var(--navy)}.detail-content p{color:var(--muted);margin-bottom:15px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}.gallery-item{height:180px;border-radius:12px;overflow:hidden;background:#e8f7f6}.gallery-item img{width:100%;height:100%;object-fit:cover}
.academy-page .section{padding-top:65px}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.module-card{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(9,44,73,.06);display:flex;gap:18px}.module-number{flex:0 0 48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-weight:900}.module-card:nth-child(even) .module-number{background:var(--red)}.module-card h3{color:var(--navy);margin-bottom:7px}.module-card p{color:var(--muted);font-size:.9rem}
@media(max-width:1050px){.nav{gap:2px}.nav a{padding:10px 8px;font-size:.83rem}.brand{min-width:245px}.brand img{width:82px}.brand-name{font-size:1.5rem}.service-grid{grid-template-columns:repeat(2,1fr)}.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.topbar{display:none}.nav-wrap{min-height:82px}.brand img{width:76px}.brand-name{font-size:1.4rem}.menu-btn{display:block}.nav{display:none;position:absolute;left:0;right:0;top:82px;background:#fff;border-bottom:1px solid var(--line);padding:12px 4%;box-shadow:var(--shadow)}.nav.open{display:flex;flex-direction:column;align-items:stretch}.nav a{text-align:center}.hero-grid,.who-grid,.academy-grid{grid-template-columns:1fr}.hero-copy{padding:55px 0 15px}.hero-visual{min-height:390px}.core-grid{grid-template-columns:repeat(2,1fr)}.core-item:nth-child(2){border-right:0}.core-item:nth-child(3){border-top:1px solid rgba(255,255,255,.18)}.project-grid{grid-template-columns:1fr}.partner-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.detail-meta{grid-template-columns:1fr}}
@media(max-width:560px){.brand img{width:67px}.brand-name{font-size:1.22rem}.brand-name span{font-size:.7rem;letter-spacing:1.7px}.tagline{font-size:.66rem}.hero h1{font-size:2.65rem}.hero p{font-size:1rem}.hero-visual{min-height:330px}.nexus-wheel{width:310px}.wheel-label{font-size:.85rem}.wheel-label i{font-size:1.5rem}.core-grid{grid-template-columns:1fr}.core-item{border-right:0!important;border-top:1px solid rgba(255,255,255,.18)}.core-item:first-child{border-top:0}.section{padding:60px 0}.section-label{font-size:1.3rem}.section-icon{width:42px;height:42px}.who-visual{min-height:310px}.service-grid,.module-grid{grid-template-columns:1fr}.partner-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery-item{height:145px}.page-hero h1{font-size:2.45rem}.detail-head,.detail-content{padding:22px}.footer-grid{grid-template-columns:1fr}}


/* =========================================================
   V3.1 UPPER-SECTION REFINEMENT
   Matches the approved mockup direction:
   - large standalone PRIME logo
   - no duplicate company-name/tagline text beside logo
   - icon-led navigation
   - mockup-style hero background
   - four-panel wheel with reliable SVG icons
   - actual PRIME red burst cropped from the logo at centre
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #e2eaed;
}

.nav-wrap{
  min-height:118px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
}

.brand-logo{
  display:block;
  flex:0 0 auto;
  line-height:0;
}

.brand-logo img{
  width:310px;
  max-width:none;
  height:auto;
  display:block;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  flex:1;
}

.nav-link{
  min-width:74px;
  padding:8px 5px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  color:var(--navy);
  border-radius:0;
  background:transparent !important;
  font-weight:800;
  font-size:.82rem;
  line-height:1.15;
  text-align:center;
  position:relative;
  transition:.2s ease;
}

.nav-link:hover{
  color:var(--teal-dark);
  transform:translateY(-1px);
}

.nav-link.active{
  color:var(--red);
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:19%;
  right:19%;
  bottom:0;
  height:3px;
  border-radius:3px;
  background:var(--red);
}

.nav-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
}

.nav-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-link:first-child .nav-icon svg{
  fill:currentColor;
  stroke:none;
}

.nav-text{
  white-space:nowrap;
}

.nav-contact{
  margin-left:4px;
  padding:15px 20px;
  border-radius:11px;
  background:var(--red);
  color:#fff;
  font-weight:900;
  transition:.2s ease;
}

.nav-contact:hover{
  background:var(--red-dark);
  transform:translateY(-2px);
}

.hero-mockup{
  position:relative;
  overflow:hidden;
  background:#fff url("images/general/hero-network.svg") center/cover no-repeat;
}

.hero-mockup::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 37%,rgba(255,255,255,.25) 68%,rgba(255,255,255,.08) 100%);
  pointer-events:none;
}

.hero-mockup .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:0.88fr 1.12fr;
  gap:48px;
  min-height:615px;
  align-items:center;
}

.hero-mockup .hero-copy{
  padding:62px 0 68px;
}

.hero-mockup .kicker{
  color:var(--red);
  font-size:.92rem;
  font-weight:900;
  letter-spacing:3.1px;
  margin-bottom:22px;
}

.hero-mockup h1{
  max-width:620px;
  color:var(--navy);
  font-size:clamp(3.8rem,5.2vw,5.75rem);
  line-height:1.01;
  letter-spacing:-3.5px;
  font-weight:900;
}

.hero-mockup h1 span{
  color:var(--teal);
}

.hero-rule{
  width:66px;
  height:3px;
  background:var(--teal-dark);
  margin:27px 0 22px;
}

.hero-mockup .hero-copy p{
  max-width:580px;
  color:#394957;
  font-size:1.08rem;
  line-height:1.72;
  margin:0 0 30px;
}

.hero-mockup .btn{
  min-height:58px;
  padding:15px 24px;
  border-radius:8px;
  font-size:1rem;
}

.hero-mockup .hero-visual{
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:10px;
}

.impact-wheel{
  width:min(545px,43vw);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  background:#fff;
  position:relative;
  box-shadow:0 28px 70px rgba(7,62,73,.16);
}

.wheel-quadrant{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  font-weight:900;
  font-size:1.26rem;
  text-align:center;
}

.wheel-research,
.wheel-learning{
  background:linear-gradient(145deg,#057f80,#006b73);
}

.wheel-data,
.wheel-impact{
  background:linear-gradient(145deg,#e31f2b,#c61f29);
}

.wheel-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
}

.wheel-icon svg{
  width:64px;
  height:64px;
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wheel-center{
  position:absolute;
  left:50%;
  top:50%;
  width:38%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 0 0 9px #fff;
  z-index:5;
}

.burst-crop{
  width:70%;
  aspect-ratio:1;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.burst-crop img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
  /* The full PRIME logo is horizontal. The crop window shows only its red burst. */
  transform:translateX(0);
}

/* Prevent the old wheel styling from influencing V3.1 */
.hero-mockup .nexus-wheel,
.hero-mockup .nexus-core,
.hero-mockup .wheel-label{
  display:none !important;
}

/* Large-screen tuning */
@media (min-width:1350px){
  .container{width:min(1420px,92%)}
  .brand-logo img{width:335px}
  .nav{gap:26px}
  .nav-link{font-size:.87rem;min-width:82px}
  .impact-wheel{width:570px}
}

/* Tablet */
@media (max-width:1100px){
  .brand-logo img{width:255px}
  .nav{gap:8px}
  .nav-link{min-width:64px;font-size:.73rem}
  .nav-icon{width:25px;height:25px}
  .nav-icon svg{width:24px;height:24px}
  .nav-contact{padding:13px 15px}
  .hero-mockup .hero-grid{grid-template-columns:1fr 1fr;gap:22px}
  .impact-wheel{width:min(470px,45vw)}
}

/* Mobile navigation */
@media (max-width:820px){
  .nav-wrap{min-height:92px}
  .brand-logo img{width:235px}
  .menu-btn{display:block}
  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:92px;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:18px 5% 22px;
    box-shadow:var(--shadow);
  }
  .nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .nav-link{
    min-width:0;
    flex-direction:row;
    justify-content:flex-start;
    gap:13px;
    padding:11px 8px;
    font-size:.9rem;
    text-align:left;
  }
  .nav-link.active::after{display:none}
  .nav-text br{display:none}
  .nav-contact{
    margin:8px 0 0;
    text-align:center;
  }
  .hero-mockup::after{
    background:rgba(255,255,255,.88);
  }
  .hero-mockup .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:0;
  }
  .hero-mockup .hero-copy{
    padding:54px 0 20px;
    text-align:left;
  }
  .hero-mockup .hero-visual{
    min-height:auto;
    justify-content:center;
    padding:22px 0 58px;
  }
  .impact-wheel{
    width:min(500px,84vw);
  }
}

/* Small phones */
@media (max-width:560px){
  .nav-wrap{min-height:80px}
  .brand-logo img{width:190px}
  .nav{top:80px}
  .hero-mockup .kicker{
    font-size:.76rem;
    letter-spacing:2.3px;
  }
  .hero-mockup h1{
    font-size:3.1rem;
    letter-spacing:-2px;
  }
  .hero-mockup .hero-copy p{
    font-size:1rem;
  }
  .hero-mockup .btn-row{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-mockup .btn{
    width:100%;
  }
  .impact-wheel{
    width:92vw;
    gap:9px;
  }
  .wheel-quadrant{
    font-size:1rem;
    gap:7px;
  }
  .wheel-icon{
    width:50px;
    height:50px;
  }
  .wheel-icon svg{
    width:48px;
    height:48px;
  }
}


/* =========================================================
   V3.2 — COMPACT MOCKUP-MATCHED UPPER SECTION
   ========================================================= */

/* Header proportions closely follow the approved mockup */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #edf1f2;
}
.nav-wrap{
  min-height:104px !important;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand-logo{
  flex:0 0 245px;
  width:245px;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.brand-logo img{
  width:245px !important;
  max-width:245px !important;
  height:auto !important;
  transform:none !important;
  object-fit:contain;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:27px;
  flex:1;
}
.nav-link{
  min-width:72px;
  padding:7px 2px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:none !important;
  color:#082d48;
  font-size:.78rem;
  font-weight:800;
  line-height:1.1;
  text-align:center;
  position:relative;
}
.nav-link:hover{color:var(--teal-dark);transform:none}
.nav-link.active{color:var(--red)}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:0;
  height:2px;
  background:var(--red);
}
.nav-icon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
}
.nav-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-link:first-child .nav-icon svg{
  fill:currentColor;
  stroke:none;
}
.nav-text{white-space:nowrap}

/* Hero uses compact proportions instead of full-screen scaling */
.hero-exact{
  position:relative;
  overflow:hidden;
  background:#fff url("images/general/hero-network.svg") center center/cover no-repeat;
}
.hero-exact::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 34%,
    rgba(255,255,255,.32) 61%,
    rgba(255,255,255,.12) 100%);
  pointer-events:none;
}
.hero-exact .hero-grid{
  position:relative;
  z-index:2;
  min-height:360px !important;
  height:360px;
  grid-template-columns:43% 57%;
  gap:25px;
  align-items:center;
}
.hero-exact .hero-copy{
  padding:25px 0 !important;
}
.hero-exact .hero-copy h1{
  font-size:3.35rem !important;
  line-height:1.00 !important;
  letter-spacing:-2.4px !important;
  margin:0;
  max-width:510px;
  color:var(--navy);
}
.hero-exact .hero-copy h1 span{color:var(--teal)}
.hero-exact .hero-rule{
  width:44px;
  height:2px;
  margin:17px 0 13px;
  background:var(--teal-dark);
}
.hero-exact .hero-copy p{
  max-width:490px;
  margin:0 0 17px !important;
  color:#233746;
  font-size:.93rem !important;
  line-height:1.55 !important;
}
.hero-exact .btn{
  min-height:0 !important;
  padding:10px 17px !important;
  border-radius:6px !important;
  font-size:.86rem !important;
}
.hero-exact .hero-visual{
  min-height:0 !important;
  height:360px;
  display:flex;
  justify-content:center !important;
  align-items:center;
  padding:0 !important;
}

/* Wheel deliberately sized like the mockup, not viewport-sized */
.compact-wheel{
  width:310px !important;
  height:310px !important;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:7px !important;
  position:relative;
  background:#fff;
  box-shadow:none !important;
}
.compact-wheel .wheel-quadrant{
  gap:5px !important;
  font-size:.92rem !important;
  font-weight:900;
}
.compact-wheel .wheel-icon{
  width:43px !important;
  height:43px !important;
}
.compact-wheel .wheel-icon svg{
  width:42px !important;
  height:42px !important;
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.compact-wheel .wheel-center{
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  height:36%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 7px #fff;
  display:grid;
  place-items:center;
  z-index:5;
}
.prime-burst{
  width:66px;
  height:66px;
  display:block;
}

/* Keep the information strip directly below hero, matching the mockup */
.core-strip{margin-top:0}

/* Desktop widening: only a modest increase */
@media (min-width:1300px){
  .container{width:min(1320px,92%)}
  .nav-wrap{height:108px;min-height:108px !important}
  .brand-logo,.brand-logo img{
    width:260px !important;
    max-width:260px !important;
  }
  .brand-logo{flex-basis:260px}
  .hero-exact .hero-grid{
    height:390px;
    min-height:390px !important;
  }
  .hero-exact .hero-visual{height:390px}
  .hero-exact .hero-copy h1{font-size:3.7rem !important}
  .hero-exact .hero-copy p{font-size:.98rem !important}
  .compact-wheel{
    width:340px !important;
    height:340px !important;
  }
}

/* Tablet */
@media (max-width:980px){
  .nav{gap:11px}
  .nav-link{font-size:.69rem;min-width:62px}
  .brand-logo{flex-basis:205px;width:205px}
  .brand-logo img{width:205px !important;max-width:205px !important}
  .hero-exact .hero-grid{grid-template-columns:48% 52%}
  .hero-exact .hero-copy h1{font-size:2.85rem !important}
  .compact-wheel{width:285px !important;height:285px !important}
}

/* Mobile */
@media (max-width:820px){
  .nav-wrap{height:82px;min-height:82px !important}
  .brand-logo{width:205px;flex-basis:205px;height:65px}
  .brand-logo img{width:205px !important;max-width:205px !important}
  .menu-btn{display:block}
  .nav{
    display:none;
    position:absolute;
    left:0;right:0;top:82px;
    padding:15px 5% 20px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .nav-link{
    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
    padding:10px 5px;
    font-size:.88rem;
    text-align:left;
  }
  .nav-link.active::after{display:none}
  .nav-text br{display:none}

  .hero-exact .hero-grid{
    height:auto;
    min-height:0 !important;
    grid-template-columns:1fr;
    gap:0;
  }
  .hero-exact .hero-copy{
    padding:42px 0 16px !important;
  }
  .hero-exact .hero-copy h1{
    font-size:3rem !important;
  }
  .hero-exact .hero-visual{
    height:auto;
    padding:12px 0 38px !important;
  }
  .compact-wheel{
    width:min(310px,82vw) !important;
    height:min(310px,82vw) !important;
  }
}

@media (max-width:520px){
  .brand-logo{width:180px;flex-basis:180px}
  .brand-logo img{width:180px !important;max-width:180px !important}
  .hero-exact .hero-copy h1{font-size:2.55rem !important}
  .hero-exact .hero-copy p{font-size:.9rem !important}
  .compact-wheel{
    width:285px !important;
    height:285px !important;
  }
}


/* =========================================================
   V3.3 — LOGO CONTAINMENT + PROJECT GALLERY LIGHTBOX
   ========================================================= */

/* ---- Header logo containment ---- */
.site-header{
  overflow:visible;
}

.nav-wrap{
  overflow:hidden;
}

.brand-logo{
  height:72px !important;
  max-height:72px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  background:#fff;
}

.brand-logo img{
  display:block !important;
  width:auto !important;
  max-width:245px !important;
  height:auto !important;
  max-height:64px !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---- Footer logo correction ---- */
.footer-brand{
  overflow:visible;
}

.footer-brand img{
  display:block !important;
  width:190px !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  background:#fff;
  padding:8px 10px;
  border-radius:8px;
  box-shadow:none !important;
}

.footer-brand p{
  margin-top:12px !important;
}

/* ---- Larger project galleries ---- */
.gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:20px !important;
  margin-top:28px !important;
}

.gallery-item{
  height:auto !important;
  aspect-ratio:4 / 3 !important;
  border-radius:15px !important;
  overflow:hidden !important;
  background:#edf5f5 !important;
  position:relative !important;
  cursor:zoom-in;
  box-shadow:0 8px 24px rgba(9,44,73,.08);
}

.gallery-item::after{
  display:none !important;
}

.gallery-item img{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center;
  transition:transform .28s ease, filter .28s ease;
}

.gallery-item:hover img{
  transform:scale(1.025);
  filter:brightness(.94);
}

.gallery-item::before{
  content:"↗";
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:4;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(9,44,73,.82);
  color:#fff;
  font-weight:900;
  font-size:1rem;
  opacity:0;
  transform:translateY(5px);
  transition:.22s ease;
  pointer-events:none;
}

.gallery-item:hover::before{
  opacity:1;
  transform:translateY(0);
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(3,18,28,.93);
  padding:28px 76px;
}

.lightbox.open{
  display:flex;
}

.lightbox-stage{
  width:min(1180px, 92vw);
  height:min(82vh, 850px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(82vh - 70px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  background:#fff;
}

.lightbox-caption{
  color:#e7f1f3;
  font-size:.92rem;
  text-align:center;
  max-width:850px;
  line-height:1.45;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.13);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.2s ease;
  backdrop-filter:blur(5px);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background:var(--red);
}

.lightbox-close{
  top:22px;
  right:25px;
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:1.7rem;
}

.lightbox-prev,
.lightbox-next{
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:64px;
  border-radius:10px;
  font-size:2rem;
}

.lightbox-prev{left:18px}
.lightbox-next{right:18px}

body.lightbox-open{
  overflow:hidden;
}

/* Tablet */
@media (max-width:820px){
  .brand-logo{
    height:60px !important;
    max-height:60px !important;
  }

  .brand-logo img{
    max-width:205px !important;
    max-height:54px !important;
  }

  .gallery{
    gap:15px !important;
  }

  .lightbox{
    padding:24px 55px;
  }

  .lightbox-prev,
  .lightbox-next{
    width:42px;
    height:56px;
  }
}

/* Mobile */
@media (max-width:600px){
  .gallery{
    grid-template-columns:1fr !important;
  }

  .gallery-item{
    aspect-ratio:4 / 3 !important;
  }

  .footer-brand img{
    width:175px !important;
  }

  .lightbox{
    padding:64px 12px 18px;
  }

  .lightbox-stage{
    width:100%;
    height:calc(100vh - 90px);
  }

  .lightbox-image{
    max-height:calc(100vh - 150px);
  }

  .lightbox-close{
    top:12px;
    right:12px;
  }

  .lightbox-prev,
  .lightbox-next{
    top:auto;
    bottom:18px;
    transform:none;
    width:48px;
    height:48px;
    border-radius:50%;
  }

  .lightbox-prev{left:calc(50% - 58px)}
  .lightbox-next{right:calc(50% - 58px)}
}


/* =========================================================
   V3.4 — SIZE RECALIBRATION
   Keeps all V3.3 functionality; adjusts only:
   1. Header logo visibility
   2. Project thumbnail scale
   ========================================================= */

/* Header logo: larger and readable, but still fully contained */
.brand-logo{
  width:285px !important;
  flex-basis:285px !important;
  height:78px !important;
  max-height:78px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.brand-logo img{
  display:block !important;
  width:285px !important;
  max-width:285px !important;
  height:auto !important;
  max-height:72px !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
}

/* Project gallery: retain 4:3 shape but reduce visual footprint by ~22% */
.gallery{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
  width:78% !important;
  max-width:920px !important;
  margin:26px auto 0 !important;
}

.gallery-item{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
}

/* Tablet */
@media (max-width:980px){
  .brand-logo{
    width:245px !important;
    flex-basis:245px !important;
    height:70px !important;
  }

  .brand-logo img{
    width:245px !important;
    max-width:245px !important;
    max-height:64px !important;
  }

  .gallery{
    width:88% !important;
  }
}

/* Mobile: keep logo useful without crowding menu; gallery returns to full width */
@media (max-width:820px){
  .brand-logo{
    width:225px !important;
    flex-basis:225px !important;
    height:62px !important;
  }

  .brand-logo img{
    width:225px !important;
    max-width:225px !important;
    max-height:57px !important;
  }

  .gallery{
    width:100% !important;
  }
}

@media (max-width:600px){
  .brand-logo{
    width:195px !important;
    flex-basis:195px !important;
  }

  .brand-logo img{
    width:195px !important;
    max-width:195px !important;
  }

  .gallery{
    width:100% !important;
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   V3.5 — TIGHT-CROPPED TRANSPARENT PRIME LOGO
   Uses images/prime-logo-cropped.png.
   The source JPG had very large white margins; this asset removes them.
   ========================================================= */

.brand-logo{
  width:270px !important;
  flex-basis:270px !important;
  height:78px !important;
  max-height:78px !important;
  overflow:visible !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.brand-logo img{
  width:270px !important;
  max-width:270px !important;
  height:auto !important;
  max-height:68px !important;
  object-fit:contain !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}

/* Footer now uses the same transparent logo without a white card. */
.footer-brand img{
  display:block !important;
  width:220px !important;
  max-width:220px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

@media (max-width:980px){
  .brand-logo{
    width:235px !important;
    flex-basis:235px !important;
  }
  .brand-logo img{
    width:235px !important;
    max-width:235px !important;
    max-height:61px !important;
  }
}

@media (max-width:820px){
  .brand-logo{
    width:215px !important;
    flex-basis:215px !important;
    height:62px !important;
  }
  .brand-logo img{
    width:215px !important;
    max-width:215px !important;
    max-height:55px !important;
  }
}

@media (max-width:600px){
  .brand-logo{
    width:185px !important;
    flex-basis:185px !important;
  }
  .brand-logo img{
    width:185px !important;
    max-width:185px !important;
  }
  .footer-brand img{
    width:190px !important;
    max-width:190px !important;
  }
}


/* =========================================================
   V3.6 — TEXT-ONLY NAVIGATION + 3-COLUMN PROJECT GALLERY
   ========================================================= */

/* ---------- Header navigation: remove icons, align text with logo ---------- */

.nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:26px !important;
  flex:1 !important;
}

.nav-link{
  min-width:auto !important;
  padding:9px 2px 10px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  background:transparent !important;
  color:var(--navy) !important;
  font-size:.80rem !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  text-align:center !important;
  position:relative !important;
  transform:none !important;
}

.nav-link:hover{
  color:var(--teal-dark) !important;
}

.nav-link.active{
  color:var(--red) !important;
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:2px;
  height:2px;
  border-radius:2px;
  background:var(--red);
}

.nav-icon{
  display:none !important;
}

.nav-text{
  white-space:nowrap !important;
}

.nav-text br{
  display:none !important;
}

.nav-wrap{
  align-items:center !important;
}

/* ---------- Project gallery: wider, 3 per row, less side whitespace ---------- */

.gallery{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
  max-width:none !important;
  margin:34px 0 0 !important;
}

.gallery-item{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.gallery-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Tablet */
@media (max-width:980px){
  .nav{
    gap:17px !important;
  }

  .nav-link{
    font-size:.78rem !important;
  }

  .gallery{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    width:100% !important;
    gap:16px !important;
  }
}

/* Mobile */
@media (max-width:820px){
  .nav{
    display:none !important;
  }

  .nav.open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
  }

  .nav-link{
    justify-content:flex-start !important;
    text-align:left !important;
    font-size:.90rem !important;
    padding:11px 7px !important;
  }

  .nav-link.active::after{
    display:none !important;
  }

  .gallery{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    width:100% !important;
  }
}

@media (max-width:600px){
  .gallery{
    grid-template-columns:1fr !important;
    width:100% !important;
  }
}


/* =========================================================
   V3.7 — EVIDENCE TO IMPACT ACADEMY
   Clickable course catalogue + accessible course-detail modal
   ========================================================= */

/* Keep "Academy" on a deliberate second line in the header */
.academy-nav-link .nav-text{
  white-space:normal !important;
  line-height:1.12 !important;
}
.academy-nav-link .nav-text br{
  display:initial !important;
}

/* Course cards */
.module-grid{
  align-items:stretch;
}

.module-card.course-card{
  position:relative;
  cursor:pointer;
  min-height:255px;
  align-items:flex-start;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.module-card.course-card:hover,
.module-card.course-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(9,44,73,.13);
  border-color:rgba(0,139,139,.42);
  outline:none;
}

.module-card.course-card:nth-child(even):hover,
.module-card.course-card:nth-child(even):focus-visible{
  border-color:rgba(201,37,45,.40);
}

.course-card-body{
  display:flex;
  flex-direction:column;
  min-height:202px;
  width:100%;
}

.course-card-body h3{
  font-size:1.13rem;
  line-height:1.3;
}

.course-card-body p{
  margin-bottom:14px;
}

.course-card-meta{
  margin-top:auto;
  padding-top:8px;
}

.course-duration{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:var(--teal-soft);
  color:var(--teal-dark);
  font-size:.76rem;
  font-weight:900;
}

.module-card:nth-child(even) .course-duration{
  background:var(--red-soft);
  color:var(--red-dark);
}

.course-details-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:var(--red);
  font-size:.84rem;
  font-weight:900;
}

.course-details-link span{
  transition:transform .2s ease;
}

.course-card:hover .course-details-link span{
  transform:translateX(4px);
}

/* Course modal */
.course-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  place-items:center;
  padding:24px;
}

.course-modal.open{
  display:grid;
}

.course-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,24,39,.76);
  backdrop-filter:blur(5px);
}

.course-modal-panel{
  position:relative;
  z-index:1;
  width:min(820px,96vw);
  max-height:min(86vh,820px);
  overflow:hidden;
  background:#fff;
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  animation:courseModalIn .22s ease-out;
}

@keyframes courseModalIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.course-modal-scroll{
  max-height:min(86vh,820px);
  overflow-y:auto;
  padding:38px 42px 36px;
}

.course-modal-close{
  position:absolute;
  z-index:3;
  top:14px;
  right:16px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#f1f6f7;
  color:var(--navy);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.course-modal-close:hover,
.course-modal-close:focus-visible{
  background:var(--red);
  color:#fff;
  outline:none;
}

.course-modal-number{
  display:inline-grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:50%;
  margin-bottom:15px;
  background:var(--teal);
  color:#fff;
  font-weight:900;
}

.course-modal-panel h2{
  max-width:690px;
  color:var(--navy);
  font-size:clamp(1.65rem,3vw,2.25rem);
  line-height:1.15;
  padding-right:40px;
  margin-bottom:20px;
}

.course-modal-meta{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:12px;
  margin-bottom:22px;
}

.course-modal-meta > div{
  background:#f6fafb;
  border:1px solid var(--line);
  border-radius:13px;
  padding:13px 15px;
}

.course-modal-meta span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:800;
  margin-bottom:2px;
}

.course-modal-meta strong{
  color:var(--navy);
  font-size:.9rem;
  line-height:1.4;
}

.course-modal-tagline{
  margin:20px 0 25px;
  padding:16px 19px;
  border-left:5px solid var(--red);
  border-radius:0 12px 12px 0;
  background:var(--red-soft);
  color:var(--navy);
  font-size:1.08rem;
  line-height:1.45;
  font-weight:900;
  font-style:italic;
}

.course-modal-copy h3{
  color:var(--teal-dark);
  font-size:.96rem;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:8px;
}

.course-modal-copy p{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.78;
}

.course-modal-actions{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

body.course-modal-open{
  overflow:hidden;
}

@media(max-width:700px){
  .module-card.course-card{
    min-height:auto;
  }

  .course-card-body{
    min-height:auto;
  }

  .course-modal{
    padding:12px;
  }

  .course-modal-panel,
  .course-modal-scroll{
    max-height:91vh;
  }

  .course-modal-scroll{
    padding:32px 22px 28px;
  }

  .course-modal-meta{
    grid-template-columns:1fr;
  }

  .course-modal-panel h2{
    padding-right:30px;
  }
}


/* =========================================================
   V3.8 — HOMEPAGE APPROACH, PORTFOLIO PROJECTS, LOGO-READY PARTNERS
   ========================================================= */

/* How We Work */
.approach-section{background:linear-gradient(180deg,#f7fbfb 0%,#fff 100%)}
.approach-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:34px}
.approach-card{height:100%;padding:30px 26px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(9,44,73,.07)}
.approach-card:nth-of-type(3){border-top:4px solid var(--red)}
.approach-card:nth-of-type(1),.approach-card:nth-of-type(5){border-top:4px solid var(--teal)}
.approach-step{font-size:.72rem;font-weight:900;letter-spacing:1.4px;color:var(--red)}
.approach-card h3{font-size:1.5rem;color:var(--navy);margin:8px 0 9px}
.approach-card p{margin:0;color:var(--muted);line-height:1.65}
.approach-arrow{font-size:1.8rem;font-weight:900;color:var(--red)}
.approach-principles{text-align:center;margin-top:25px;font-weight:800;color:var(--navy);letter-spacing:.25px}
.approach-principles span{color:var(--red);padding:0 10px}

/* Homepage project imagery */
.project-img{position:relative;overflow:hidden}
.project-img img{width:100%;height:100%;object-fit:cover;display:block}
.project-status{position:absolute;top:14px;left:14px}

/* Portfolio overview */
.project-portfolio{padding:54px 0 24px;background:#fff}
.portfolio-summary{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.portfolio-summary strong,.portfolio-summary span{padding:8px 14px;border-radius:999px;background:#f1f7f7;color:var(--navy);font-size:.82rem;font-weight:900}
.portfolio-summary strong{background:var(--navy);color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.portfolio-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(9,44,73,.08);transition:transform .2s ease,box-shadow .2s ease}
.portfolio-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(9,44,73,.13)}
.portfolio-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef5f5}
.portfolio-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.portfolio-card:hover .portfolio-image img{transform:scale(1.025)}
.portfolio-image .status{position:absolute;left:14px;top:14px}
.portfolio-body{padding:22px}
.portfolio-body h2{font-size:1.1rem;line-height:1.35;color:var(--navy);margin-bottom:8px}
.portfolio-body p{color:var(--muted);line-height:1.55}
.portfolio-meta{font-size:.8rem;font-weight:900;color:var(--teal-dark)!important;margin-bottom:10px}
.project-details-section{padding-top:34px}
.detail-card{scroll-margin-top:120px}

/* Project team block, ready once verified names are supplied */
.project-team{margin:22px 0;padding:20px;border-radius:15px;background:#f7fbfb;border:1px solid var(--line)}
.project-team h3{color:var(--navy);margin-bottom:12px}
.team-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.team-grid>div{padding:12px 14px;background:#fff;border-radius:10px}
.team-grid small{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;font-weight:800;margin-bottom:4px}
.team-grid strong{color:var(--navy);font-size:.88rem}

/* Partners: logo-ready presentation */
.partner-card.logo-ready{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:150px;padding:18px;text-align:center;background:#fff}
.partner-logo-slot{width:100%;height:68px;border:1px dashed #cad7da;border-radius:10px;display:grid;place-items:center;color:#a6b5b8;font-size:.65rem;font-weight:900;letter-spacing:1.2px;background:#fbfdfd}
.partner-card.logo-ready span{font-size:.78rem;line-height:1.35;font-weight:800;color:var(--navy)}

/* Final CTA */
.final-cta{background:var(--navy);color:#fff;padding:56px 0}
.final-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:32px}
.final-cta h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);margin:6px 0 8px}
.final-cta p{color:#d8e7ea;margin:0}
.cta-kicker{font-size:.72rem;letter-spacing:1.6px;font-weight:900;color:#ff9da2}

@media(max-width:900px){
  .approach-flow{grid-template-columns:1fr}
  .approach-arrow{transform:rotate(90deg);text-align:center}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .final-cta-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
  .portfolio-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
}

/* V4.0 — cleaner project cards and bottom-right status */
.card-status{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:7px 12px;border-radius:999px;color:#fff;font-size:.69rem;line-height:1;font-weight:900;letter-spacing:.65px;white-space:nowrap}
.card-status.ongoing{background:var(--teal)}
.card-status.completed{background:var(--red)}
.project-img .project-status{display:none!important}
.project-card-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px}
.project-card-footer a{margin:0!important}
.project-portfolio{padding-top:46px}
.portfolio-summary{display:none!important}
.portfolio-grid{align-items:stretch}
.portfolio-card{display:flex;flex-direction:column;min-height:315px;overflow:hidden;border-top:4px solid var(--teal)}
.portfolio-card:nth-child(2){border-top-color:var(--red)}
.portfolio-image{display:none!important}
.portfolio-body{display:flex;flex-direction:column;flex:1;padding:27px 25px 23px}
.portfolio-body h2{font-size:1.16rem;line-height:1.35;margin-bottom:11px}
.portfolio-body>p:not(.portfolio-meta){margin-bottom:16px}
.portfolio-meta{margin-top:auto;padding-top:10px}
.portfolio-card-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.portfolio-card-footer .project-link{margin:0;font-weight:900}
@media(max-width:520px){.card-status{font-size:.64rem;padding:6px 10px}}



/* =========================================================
   V4.1 CORRECTION — restore card layouts explicitly
   ========================================================= */
.approach-flow{
  display:grid!important;
  grid-template-columns:1fr auto 1fr auto 1fr!important;
  gap:18px!important;
  align-items:stretch!important;
  margin-top:34px!important;
}
.approach-card{
  display:block!important;
  padding:30px 26px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(9,44,73,.07)!important;
}
.approach-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:1.8rem!important;
  font-weight:900!important;
  color:var(--red)!important;
}
.approach-principles{
  text-align:center!important;
  margin-top:25px!important;
  font-weight:800!important;
}
.portfolio-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
}
.portfolio-card{
  display:flex!important;
  flex-direction:column!important;
  border:1px solid var(--line)!important;
  border-top:4px solid var(--teal)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(9,44,73,.08)!important;
  overflow:hidden!important;
}
.portfolio-card:nth-child(2){border-top-color:var(--red)!important}
.portfolio-image{display:none!important}
@media(max-width:900px){
  .approach-flow{grid-template-columns:1fr!important}
  .approach-arrow{transform:rotate(90deg)!important}
  .portfolio-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:620px){
  .portfolio-grid{grid-template-columns:1fr!important}
}

/* V4.2 Evidence & Outputs */
.portfolio-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.evidence-link{border:0;background:transparent;padding:0;cursor:pointer;color:var(--red);font:inherit;font-size:.78rem;font-weight:900;text-align:left}
.evidence-panel{margin:28px 0 8px;padding:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#f8fbfb 0%,#fff 100%);box-shadow:0 12px 32px rgba(9,44,73,.08)}
.evidence-panel[hidden]{display:none!important}
.evidence-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.evidence-panel-head h3{margin:5px 0 0;color:var(--navy);font-size:1.55rem}
.evidence-kicker{font-size:.7rem;font-weight:900;letter-spacing:1.4px;color:var(--red)}
.evidence-close{border:1px solid var(--line);background:#fff;color:var(--navy);width:34px;height:34px;border-radius:50%;font-size:1.35rem;cursor:pointer}
.evidence-panel h4{color:var(--navy);font-size:1.05rem;margin:24px 0 14px}
.result-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.result-stat{padding:20px 16px;border-radius:15px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);box-shadow:0 7px 20px rgba(9,44,73,.05)}
.result-stat:nth-child(even){border-top-color:var(--red)}.result-stat strong{display:block;color:var(--navy);font-size:1.65rem;margin-bottom:9px}.result-stat span{display:block;color:var(--navy);font-size:.82rem;font-weight:800}.result-stat small{display:block;color:var(--muted);font-size:.72rem;margin-top:8px}
.key-findings{margin-top:18px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:14px}.key-findings li{color:var(--muted);line-height:1.6;margin-bottom:10px}
.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.output-card{display:flex;flex-direction:column;padding:21px;border:1px solid var(--line);border-radius:14px;background:#fff}.output-status{align-self:flex-start;padding:6px 9px;border-radius:999px;background:#fff0f1;color:var(--red);font-size:.63rem;font-weight:900}.output-card h5{color:var(--navy);font-size:.94rem;line-height:1.45;margin:13px 0 18px}.output-card a{margin-top:auto;color:var(--teal-dark);font-size:.8rem;font-weight:900}
.evidence-implication{margin-top:22px;padding:23px 24px;border-radius:15px;background:var(--navy);color:#fff}.evidence-implication h4{color:#fff;margin:6px 0 8px}.evidence-implication p{color:#dce8ea;margin:0;line-height:1.65}
@media(max-width:900px){.result-stat-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.result-stat-grid,.output-grid{grid-template-columns:1fr}.evidence-panel{padding:20px}}


/* =========================================================
   V4.3 — SOCIAL MEDIA FOOTER
   ========================================================= */
.footer-social{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-left:10px;
  vertical-align:middle;
}
.footer-social a{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:inherit;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.footer-social svg{
  width:17px;
  height:17px;
  fill:currentColor;
}
.footer-social a:hover,
.footer-social a:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:currentColor;
}
@media(max-width:620px){
  .footer-social{
    margin-left:0;
    margin-top:10px;
  }
}


/* =========================================================
   V4.4 — FOOTER SOCIAL VISIBILITY FIX
   ========================================================= */
.footer-social-row{
  list-style:none;
  margin-top:12px;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}
.footer-social a{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.06);
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.footer-social svg{
  display:block;
  width:18px;
  height:18px;
  fill:currentColor;
}
.footer-social a:hover,
.footer-social a:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.16);
  border-color:#fff;
}


/* =========================================================
   V4.5 — GLOBAL & PUBLIC HEALTH POSITIONING
   ========================================================= */
.mission-box{
  margin-top:22px;
  padding:18px 20px;
  border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;
  background:#f7faf9;
}
.mission-box .mini-label{
  display:block;
  margin-bottom:7px;
  color:var(--teal-dark);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.mission-box p{margin:0}
.values-block{margin-top:34px}
.compact-head{margin-bottom:18px}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.value-card{
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(9,44,73,.05);
}
.value-card:nth-child(1){border-top:4px solid var(--teal)}
.value-card:nth-child(2){border-top:4px solid var(--red)}
.value-card:nth-child(3){border-top:4px solid var(--teal)}
.value-card h3{
  margin:0 0 9px;
  color:var(--navy);
  font-size:1rem;
}
.value-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
@media(max-width:760px){
  .values-grid{grid-template-columns:1fr}
}