.executive-page {
  --executive-dark: #073f36;
  --executive-green: #2fa56f;
  --executive-mint: #e5f2ed;
  --executive-cream: #fbf8f0;
  --executive-gold: #d99a22;
  color: #16231f;
}

.executive-page .container {
  max-width: 1080px;
}

.executive-page h1,
.executive-page h2,
.executive-page h3 {
  font-family: var(--font-sans);
  font-weight: 700;
}

.executive-hero {
  background: var(--executive-dark);
  color: #fff;
  padding: 3.4rem 0 4.8rem;
}

.executive-breadcrumb {
  align-items: center;
  color: #d6a842;
  display: flex;
  font-size: .68rem;
  gap: .35rem;
  margin-bottom: 1.2rem;
}

.executive-breadcrumb a {
  color: #d7e5df;
}

.executive-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

.executive-hero p {
  color: #d1e0da;
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
  max-width: 650px;
}

.executive-tabs {
  background: #fff;
  border-bottom: 7px solid #dfece6;
}

.executive-tabs a {
  color: #18332c;
  display: block;
  font-size: .67rem;
  font-weight: 700;
  height: 73px;
  line-height: 1.25;
  padding: 1.35rem .35rem .8rem;
  position: relative;
}

.executive-tabs a:hover,
.executive-tabs a.active {
  color: var(--executive-green);
}

/* .executive-tabs a.active::after {
  background: var(--executive-green);
  bottom: 0;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  right: 12%;
} */

.executive-section {
  background: #fff;
  border-bottom: 7px solid #dfece6;
  padding: 4rem 0 5rem;
  scroll-margin-top: 80px;
}

.executive-cream {
  background: var(--executive-cream);
}

.executive-feature-photo {
  background: var(--executive-mint);
  border: 1px solid #c9ded6;
  border-radius: 19px;
  height: 420px;
  overflow: hidden;
}

.executive-feature-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.executive-pill {
  background: #dff1e8;
  border-radius: 999px;
  color: var(--executive-green);
  display: inline-block;
  font-size: .61rem;
  font-weight: 800;
  margin-bottom: 1rem;
  padding: .4rem .85rem;
}

.executive-section h2 {
  color: #17362f;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -.03em;
  margin-bottom: .45rem;
}

#secretary-general h3 {
  color: var(--executive-green);
  font-size: .69rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}

#secretary-general p {
  font-size: .77rem;
  line-height: 1.65;
  max-width: 620px;
}

.executive-label {
  color: var(--executive-gold);
  display: block;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.section-intro {
  color: #56635e;
  font-size: .7rem;
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 600px;
}

.executive-card-grid {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #d6e2dd;
  overflow: hidden;
}

.executive-card {
  background: #fff;
  border-right: 1px solid #d6e2dd;
  height: 100%;
}

.executive-card-grid > div:last-child .executive-card {
  border-right: 0;
}

.person-photo {
  align-items: center;
  background: var(--executive-mint);
  border: 7px solid #deebe5;
  color: #61736c;
  display: flex;
  font-size: .62rem;
  height: 185px;
  justify-content: center;
  overflow: hidden;
}

.person-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 94%;
}

.executive-card > div:last-child {
  min-height: 92px;
  padding: 1.05rem .85rem .8rem;
}

.executive-card h3,
.royal-card h3 {
  color: #152a24;
  font-size: .69rem;
  margin-bottom: .2rem;
}

.executive-card b,
.royal-card b {
  color: var(--executive-green);
  display: block;
  font-size: .58rem;
  line-height: 1.3;
}

.executive-card p,
.royal-card p {
  color: #66736e;
  font-size: .56rem;
  margin: .25rem 0 0;
}

.executive-card-solo {
  border: 1px solid #d6e2dd;
  border-radius: 12px;
  overflow: hidden;
}

/* This photo is a tall portrait shot; the shared "center top" crop used by
   every other card here cuts it off right at the forehead and pulls in the
   background doorway/lamp on the right. Nudge it down to frame the face. */
.executive-card-solo .person-photo img {
  object-position: center 10%;
}

.executive-grid-three {
  max-width: 720px;
}

.executive-grid-three .person-photo {
  height: 170px;
}

.executive-grid-five .person-photo {
  height: 205px;
}

.executive-grid-five .executive-card > div:last-child {
  min-height: 100px;
  padding: 1rem .8rem .85rem;
}

.executive-grid-five .executive-card h3 {
  font-size: .74rem;
}

.executive-grid-five .executive-card b {
  font-size: .62rem;
}

.executive-grid-five .executive-card p {
  font-size: .6rem;
}

.executive-royal {
  background-color: var(--executive-cream);
  background-image: radial-gradient(#d6dfda 1px, transparent 1px);
  background-size: 18px 18px;
  border-bottom: 0;
}

.royal-card {
  background: rgba(251, 248, 240, .96);
  border: 1px solid #d7e2dc;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.royal-photo {
  background: var(--executive-mint);
  height: 300px;
  overflow: hidden;
}

.royal-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.royal-photo-contain {
  background: #fff;
}

.royal-photo-contain img {
  object-fit: contain;
}

.royal-card-details {
  flex: 1;
  padding: 1.35rem;
}

@media (max-width: 767.98px) {
  .executive-hero {
    padding: 2.8rem 0 3.5rem;
  }

  .executive-tabs {
    overflow-x: auto;
  }

  .executive-tabs .row {
    flex-wrap: nowrap;
    min-width: 680px;
  }

  .executive-section {
    padding: 3.2rem 0;
  }

  .executive-card-grid {
    box-shadow: none;
    overflow: visible;
  }

  .executive-card {
    border: 1px solid #d6e2dd;
  }

  .person-photo {
    height: 145px;
  }

  .executive-grid-five .person-photo {
    height: 170px;
  }

  .royal-photo {
    height: 300px;
  }
}

@media (max-width: 575.98px) {
  .person-photo {
    height: 120px;
  }

  .executive-grid-five .person-photo {
    height: 150px;
  }

  .executive-card > div:last-child {
    min-height: 105px;
  }

  .royal-photo {
    height: 260px;
  }
}