/* Rules shared by the ranking page and the leader profile, which load
   different design stylesheets. Kept out of both so those stay
   byte-identical to the mockups and can be re-synced. */
/* When a ranking supplies its own banner artwork, that artwork already carries
   the title, so the design's overlay heading would repeat it. The heading is
   removed from sight without being removed from the document — search engines
   and screen readers still get it. Not display:none, which would hide it from
   both. */
.page_wrap .top_banner .banner_sronly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Headshots arrive at whatever ratio the editor had — this ranking alone mixes
   1:1 and 3:4 — and the design's CSS sets only width, so each card sized to its
   own image. Cards in a flex row stretch to the tallest, so the rows came out
   ragged with a different gap above every name. Pinning the box to the design's
   3:4 makes every card identical whatever gets uploaded.
   Anchored to the top because these are portraits: if anything is trimmed it
   should be below the subject, never their head. */
.page_wrap .section2 .custom_container .teambox .imgbox {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #fff;
}
.page_wrap .section2 .custom_container .teambox .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* With the image box pinned, the only thing left that could make one card
   taller than another is the text wrapping. The company line is secondary, so
   it is held to one line and elided; the name may take two before it is capped,
   since truncating a person's name is worse than an uneven row. */
/* Both lines of the name are reserved whether or not the second is used, so a
   card is the same height no matter how long the name is or how narrow the
   column gets. Clamping alone still left the grid ragged on mobile, where the
   longer names wrap and the shorter ones do not. */
.page_wrap .section2 .custom_container .teambox .textbox h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}
.page_wrap .section2 .custom_container .teambox .textbox p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── leader profile: the "more to explore" panel ────────────────────────────
   Industry context, peers and the onward ranking are secondary to the profile
   above them, so they sit together on one tinted panel rather than reading as
   three more page sections of equal weight. Built from the design's own
   vocabulary — Outfit headings, #2459A3 blue, #C8001F red, #EEF3F9 fill. */
.page_wrap .leader_more {
  background-color: #F6F9FC;
  border: 1px solid #E7EEF6;
  border-radius: 8px;
  padding: 26px 28px 30px;
  margin-top: 34px;
}
@media (max-width: 767px) { .page_wrap .leader_more { padding: 20px 16px 24px; } }

/* Deliberately smaller than the profile's own headings: these introduce
   supporting material, they do not compete with it. */
.page_wrap .leader_h {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: #2459A3;
  font-family: "Outfit", sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page_wrap .leader_h:before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, #C8001F 50%, #2459A3 50%);
}

.page_wrap .leader_industry + .leader_related,
.page_wrap .leader_related + .leader_next {
  border-top: 1px solid #E7EEF6;
  margin-top: 26px;
  padding-top: 24px;
}
.page_wrap .leader_industry p,
.page_wrap .leader_next p {
  font-size: 14px;
  line-height: 24px;
  color: #6F6F6F;
  font-family: "Outfit", sans-serif;
  margin: 12px 0 0;
}

/* Five peers across, halving down rather than stranding one on its own row. */
.page_wrap .leader_related_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 1199px) { .page_wrap .leader_related_grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .page_wrap .leader_related_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .page_wrap .leader_related_grid { grid-template-columns: 1fr; } }

.page_wrap .leader_card {
  background-color: #fff;
  border: 1px solid #E7EEF6;
  border-radius: 6px;
  padding: 14px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.page_wrap .leader_card:hover {
  border-color: #C8001F;
  box-shadow: 0 6px 18px rgba(36, 89, 163, 0.12);
  transform: translateY(-2px);
}
.page_wrap .leader_card_top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The portrait plates are white-backed, so the circle carries a soft fill and
   ring of its own — otherwise it disappears into the card. */
.page_wrap .leader_thumb {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
}
.page_wrap .leader_thumb img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background-color: #EEF3F9;
  box-shadow: 0 0 0 1px #E1E9F3;
}
.page_wrap .leader_thumb_rank {
  position: absolute;
  left: -3px;
  bottom: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background-color: #C8001F;
  color: #FDC424;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.page_wrap .leader_card strong {
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: #2459A3;
  font-family: "Outfit", sans-serif;
  transition: color .25s ease;
}
.page_wrap .leader_card:hover strong { color: #C8001F; }

/* Roles run long here ("Promoter Director & Executive Chairperson, Apollo
   HealthCo"), so they are capped to keep every card the same height. */
.page_wrap .leader_role {
  font-size: 12px;
  line-height: 17px;
  color: #6F6F6F;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}
.page_wrap .leader_view {
  font-size: 11px;
  font-weight: 600;
  color: #C8001F;
  letter-spacing: .2px;
}
.page_wrap .leader_next .c_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 0 22px;
  min-height: 42px;
  background-color: #2459A3;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
.page_wrap .leader_next .c_btn:hover { background-color: #C8001F; color: #fff; }