/* Institutional editorial pages: About us, People, CSR and Rankings.
 *
 * The templates share the canonical JCI container, typography and horizontal
 * menu systems. This file owns only the editorial compositions specific to
 * these pages and remains mobile first.
 */

.jci-institutional-page {
  --jci-institutional-navy: var(--color-dark-blue, #041c40);
  --jci-institutional-blue: var(--color-blue, #487cff);
  --jci-institutional-coral: var(--color-coral, #eb5e4e);
  --jci-institutional-ink: #171b22;
  --jci-institutional-muted: #5f6470;
  --jci-institutional-rule: rgba(4, 28, 64, 0.16);
  --jci-institutional-soft: #eef3ff;
  color: var(--jci-institutional-navy);
  font-family: var(--font-family-body, "DM Sans", sans-serif);
  background: #fff;
}

.jci-institutional-page :where(img, svg) {
  max-width: 100%;
}

/* Shared typography and editorial primitives */
.jci-institutional-hero {
  position: relative;
  display: grid;
  min-height: clamp(280px, 58vw, 410px);
  overflow: hidden;
  isolation: isolate;
  background: var(--jci-institutional-navy);
}

.jci-institutional-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0.04) 100%);
}

.jci-institutional-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jci-institutional-hero__inner {
  display: flex;
  align-items: flex-end;
  padding-top: clamp(54px, 10vw, 104px);
  padding-bottom: clamp(54px, 10vw, 104px);
}

.jci-institutional-hero h1,
.jci-people-intro h1,
.jci-about-hero h1,
.jci-institutional-stacked-hero h1 {
  margin: 0;
  font-family: var(--font-family-display, "rama-slab-e", serif);
  font-size: clamp(40px, 8vw, 68px);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: 0;
  text-transform: uppercase;
}

.jci-institutional-hero h1 {
  max-width: 800px;
  color: #fff;
  text-wrap: balance;
}

/* Virtual Campus uses the approved editorial layout: page title above a
 * full-bleed hero image, followed by the introduction and benefits grid. */
.jci-virtual-campus-heading {
  padding-bottom: clamp(26px, 4vw, 42px);
  background: #fff;
}

.jci-virtual-campus-hero {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eef1f5;
}

.jci-virtual-campus-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jci-virtual-campus-page .jci-institutional-prose--lead {
  margin-inline: auto;
}

.jci-virtual-campus-page .jci-about-values__grid {
  margin-top: 0;
}

.jci-institutional-section {
  padding-block: clamp(58px, 9vw, 96px);
}

.jci-institutional-section--compact {
  padding-top: 0;
}

.jci-institutional-section--light {
  background: var(--jci-institutional-soft);
}

.jci-institutional-prose {
  color: inherit;
  font-size: 15px;
  line-height: 1.65;
}

/* Legacy global p/strong rules set an explicit body colour. Institutional prose
 * is a component boundary, so its text descendants must inherit the component
 * colour instead. More specific section rules can still specialise this. */
.jci-institutional-prose :where(p, li, strong) {
  color: inherit;
}

.jci-institutional-prose > :first-child {
  margin-top: 0;
}

.jci-institutional-prose > :last-child {
  margin-bottom: 0;
}

.jci-institutional-prose > * + * {
  margin-top: 1.08em;
}

.jci-institutional-prose :where(ul, ol) {
  padding-left: 1.35em;
}

.jci-institutional-prose li + li {
  margin-top: 0.42em;
}

.jci-institutional-prose a {
  color: var(--jci-institutional-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.jci-institutional-prose--lead {
  max-width: 960px;
}

.jci-institutional-prose--lead p:first-child {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.56;
}

.jci-institutional-media-grid {
  display: grid;
  gap: 34px;
  align-items: start;
}

.jci-institutional-media-grid h2,
.jci-rankings-section__title,
.jci-people-panel h2,
.jci-about-purpose h2,
.jci-about-values h2 {
  margin: 0 0 24px;
  color: var(--jci-institutional-navy);
  font-size: clamp(29px, 5vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.jci-institutional-media-grid__media {
  min-width: 0;
}

.jci-institutional-media-grid__image,
.jci-institutional-gallery__image,
.jci-rankings-subsection__image {
  display: block;
  width: 100%;
  height: auto;
}

.jci-institutional-gallery {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

.jci-institutional-gallery__item {
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f5f7;
}

.jci-institutional-gallery__item > .jci-institutional-gallery__image {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.jci-institutional-eyebrow,
.jci-people-panel__eyebrow {
  margin: 0 0 18px;
  color: var(--jci-institutional-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.jci-institutional-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(100%, 560px);
  margin-top: 34px;
  padding: 11px 2px 11px 0;
  border-top: 1px solid rgba(4, 28, 64, 0.62);
  border-bottom: 1px solid rgba(4, 28, 64, 0.62);
  color: var(--jci-institutional-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.jci-institutional-link::after {
  content: "↗";
  flex: 0 0 auto;
  color: var(--jci-institutional-blue);
  font-size: 18px;
  line-height: 1;
  transition: transform 180ms ease-out;
}

.jci-institutional-link:hover,
.jci-institutional-link:focus-visible {
  color: var(--jci-institutional-blue);
}

.jci-institutional-link:hover::after,
.jci-institutional-link:focus-visible::after {
  transform: translate(2px, -2px);
}

.jci-institutional-link:focus-visible,
.jci-people-local-nav__link:focus-visible {
  outline: 2px solid var(--jci-institutional-blue);
  outline-offset: 4px;
}

/* Corporate social responsibility */
.jci-csr-page {
  --jci-csr-light: #eaf0ff;
}

.jci-csr-hero {
  position: relative;
  display: grid;
  height: clamp(330px, 38vw, 470px);
  overflow: hidden;
  isolation: isolate;
  background: var(--jci-institutional-navy);
}

.jci-csr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.12) 100%);
}

.jci-csr-hero__media,
.jci-csr-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.jci-csr-hero__media {
  z-index: -2;
}

.jci-csr-hero__image {
  display: block;
  object-fit: cover;
  object-position: center 45%;
}

.jci-csr-hero__inner {
  display: flex;
  align-items: flex-start;
  padding-top: clamp(50px, 5.3vw, 72px);
  padding-bottom: 40px;
}

.jci-csr-hero h1 {
  max-width: 640px;
  margin: 0;
  color: #fff;
  font-family: var(--font-family-display, "rama-slab-e", serif);
  font-size: clamp(46px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.jci-csr-hero--no-media {
  height: auto;
  min-height: 260px;
}

.jci-csr-introduction {
  padding-block: clamp(54px, 5.6vw, 72px);
  background: #fff;
}

.jci-csr-introduction__inner {
  display: grid;
  gap: 34px;
  align-items: start;
}

.jci-csr-introduction h2 {
  max-width: 350px;
  margin: 0;
  color: #111;
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.jci-csr-introduction__prose,
.jci-csr-section__prose {
  color: #111;
  font-size: 15px;
  line-height: 1.48;
}

.jci-csr-introduction__prose > :first-child,
.jci-csr-section__prose > :first-child {
  margin-top: 0;
}

.jci-csr-introduction__prose > :last-child,
.jci-csr-section__prose > :last-child {
  margin-bottom: 0;
}

.jci-csr-introduction__prose > * + *,
.jci-csr-section__prose > * + * {
  margin-top: 1.2em;
}

.jci-csr-quote {
  background: #f1eff0;
}

.jci-csr-quote__inner {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.jci-csr-quote__content {
  display: flex;
  align-items: center;
  min-height: 245px;
  padding-block: 44px;
}

.jci-csr-quote blockquote {
  margin: 0;
}

.jci-csr-quote blockquote p {
  max-width: 610px;
  margin: 0;
  color: #111;
  font-size: clamp(27px, 3vw, 35px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.jci-csr-quote blockquote cite {
  display: block;
  margin-top: 24px;
  color: #111;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.jci-csr-quote__media {
  min-width: 0;
  min-height: 245px;
  overflow: hidden;
}

.jci-csr-quote__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 245px;
  object-fit: cover;
  object-position: center;
}

.jci-csr-section {
  padding-block: clamp(62px, 6vw, 84px);
  background: #fff;
}

.jci-csr-section--light {
  background: var(--jci-csr-light);
}

.jci-csr-section__inner {
  display: grid;
  gap: 36px;
  align-items: start;
}

.jci-csr-section__content,
.jci-csr-section__media {
  min-width: 0;
}

.jci-csr-section h2 {
  margin: 0;
  color: var(--jci-institutional-navy);
  font-size: clamp(31px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.jci-csr-section__subtitle {
  max-width: 630px;
  margin: 8px 0 24px;
  color: var(--jci-institutional-blue);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.jci-csr-section__image {
  display: block;
  width: 100%;
  height: auto;
}

.jci-csr-section .jci-institutional-link {
  width: 100%;
  max-width: none;
  margin-top: 28px;
}

.jci-csr-fund .jci-csr-section__media,
.jci-csr-social .jci-csr-section__media,
.jci-csr-code .jci-csr-section__media {
  width: min(100%, 400px);
}

.jci-csr-women .jci-csr-section__media,
.jci-csr-responsible .jci-csr-section__media {
  width: min(100%, 380px);
}

@media (min-width: 761px) {
  .jci-csr-introduction__inner {
    grid-template-columns: minmax(270px, 0.58fr) minmax(0, 1.42fr);
    gap: clamp(58px, 7vw, 104px);
  }

  .jci-csr-quote__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.72fr);
  }

  .jci-csr-quote__content {
    padding-right: clamp(40px, 5vw, 72px);
  }

  .jci-csr-section__inner {
    gap: clamp(50px, 6vw, 82px);
  }

  .jci-csr-section--media-left .jci-csr-section__inner {
    grid-template-columns: minmax(290px, 0.68fr) minmax(0, 1.32fr);
  }

  .jci-csr-section--media-left .jci-csr-section__media {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .jci-csr-section--media-left .jci-csr-section__content {
    grid-column: 2;
    grid-row: 1;
  }

  .jci-csr-section--media-right .jci-csr-section__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(290px, 0.68fr);
  }

  .jci-csr-section--media-right .jci-csr-section__content {
    grid-column: 1;
    grid-row: 1;
  }

  .jci-csr-section--media-right .jci-csr-section__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .jci-csr-hero {
    height: clamp(300px, 92vw, 430px);
  }

  .jci-csr-hero__inner {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .jci-csr-hero h1 {
    max-width: 96%;
    font-size: clamp(39px, 12vw, 54px);
  }

  .jci-csr-introduction,
  .jci-csr-section {
    padding-block: 48px;
  }

  .jci-csr-introduction h2 {
    max-width: 100%;
  }

  .jci-csr-quote__content {
    padding: 44px 16px;
  }

  .jci-csr-quote__media,
  .jci-csr-quote__image {
    min-height: 0;
  }

  .jci-csr-quote__image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .jci-csr-section__media {
    width: min(100%, 560px);
  }

  .jci-csr-section__subtitle {
    margin-bottom: 20px;
  }
}

/* Rankings */
.jci-rankings-higher-education-heading {
  padding-top: 0;
}

.jci-rankings-higher-education-heading h2 {
  margin: 0;
  color: var(--jci-institutional-navy);
  font-size: clamp(29px, 5vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.jci-rankings-higher-education-heading + .jci-rankings-section {
  padding-top: clamp(30px, 5vw, 48px);
}

.jci-rankings-section + .jci-rankings-section {
  border-top: 1px solid rgba(4, 28, 64, 0.08);
}

.jci-rankings-section__title {
  padding-bottom: 12px;
  border-bottom: 8px solid #f1eff0;
  color: var(--jci-institutional-blue);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
}

.jci-rankings-section__intro {
  display: grid;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.jci-rankings-section__intro .jci-institutional-prose {
  max-width: 760px;
}

.jci-rankings-section__logo-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.jci-rankings-section__aside {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  justify-items: start;
  align-content: start;
  min-width: 0;
}

.jci-rankings-section__aside .jci-rankings-section__logo-wrap {
  width: 100%;
}

.jci-rankings-section__aside .jci-rankings-partner-media {
  width: min(100%, 360px);
  margin: 0;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
}

.jci-rankings-section__aside .jci-rankings-partner-media__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.jci-rankings-section__logo {
  display: block;
  width: auto;
  max-width: min(220px, 65vw);
  max-height: 110px;
  object-fit: contain;
}

.jci-rankings-section__graphic-wrap,
.jci-rankings-section__banner-wrap {
  width: min(100%, 560px);
  margin-top: 32px;
}

.jci-rankings-section__banner-wrap .jci-ranking-banner-link {
  width: 100%;
}

.jci-rankings-section__graphic {
  display: block;
  width: 100%;
  height: auto;
}

.jci-rankings-partner-media {
  width: min(100%, 360px);
  margin: clamp(30px, 5vw, 48px) 0 0 auto;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f4f5f7;
}

.jci-rankings-partner-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jci-rankings-subsection,
.jci-rankings-advantages {
  margin-top: clamp(44px, 7vw, 70px);
}

.jci-rankings-subsection h3,
.jci-rankings-advantages > h3 {
  margin: 0 0 22px;
  color: var(--jci-institutional-navy);
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.jci-rankings-subsection__grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

.jci-rankings-subsection__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.jci-rankings-subsection__image {
  height: 100%;
  object-fit: cover;
}

.jci-rankings-advantages__grid {
  display: grid;
  gap: 30px;
}

.jci-rankings-advantage h4 {
  margin: 0 0 8px;
  color: var(--jci-institutional-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.jci-rankings-advantage .jci-institutional-prose {
  font-size: 14px;
  line-height: 1.58;
}

/* Our community / People */
.jci-people-intro {
  overflow: clip;
  background: #fff;
}

.jci-people-intro__top {
  padding-top: clamp(48px, 7vw, 74px);
}

.jci-people-intro h1 {
  color: var(--jci-institutional-navy);
}

.jci-people-intro__media {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  margin-top: 34px;
  margin-bottom: -54px;
}

.jci-people-intro__media-item {
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f5f7;
}

.jci-people-intro__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.jci-people-intro__body {
  background: var(--jci-institutional-navy);
  color: #fff;
}

.jci-people-intro__body-inner {
  display: grid;
  gap: 36px;
  padding-top: 102px;
  padding-bottom: clamp(66px, 9vw, 100px);
}

.jci-people-intro__copy {
  max-width: 760px;
}

.jci-people-intro__copy h2 {
  margin: 0 0 20px;
  color: var(--jci-institutional-blue);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.jci-people-intro__lead {
  margin-bottom: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.jci-people-intro__copy .jci-institutional-prose {
  color: #fff;
}

.jci-people-intro__side-media {
  align-self: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.jci-people-intro__side-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.jci-people-sections {
  padding-block: clamp(60px, 9vw, 100px);
}

.jci-people-sections__inner {
  display: grid;
  gap: 38px;
}

.jci-people-local-nav {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.jci-people-local-nav ul {
  display: flex;
  gap: 22px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 0 10px;
  list-style: none;
}

.jci-people-local-nav li {
  margin: 0;
}

.jci-people-local-nav__link {
  display: block;
  padding: 4px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.jci-people-local-nav__link:hover,
.jci-people-local-nav__link:focus-visible,
.jci-people-local-nav__link[aria-selected="true"] {
  color: var(--jci-institutional-blue);
}

.jci-people-local-nav__link[aria-selected="true"] {
  font-weight: 600;
}

.jci-people-panels {
  min-width: 0;
}

.jci-people-page.is-tabs-ready .jci-people-panel[hidden] {
  display: none !important;
}

.jci-people-page.is-tabs-ready .jci-people-panel:not([hidden]) {
  display: block;
}

.jci-people-panel {
  min-width: 0;
  max-width: 900px;
  scroll-margin-top: calc(var(--jci-header-visual-offset, var(--jci-header-offset, 90px)) + 30px + 64px + 24px);
}

.jci-people-panel + .jci-people-panel {
  margin-top: 84px;
  padding-top: 84px;
  border-top: 1px solid var(--jci-institutional-rule);
}

.jci-people-panel__eyebrow {
  color: var(--jci-institutional-ink);
  text-transform: none;
}

.jci-people-panel__lead {
  max-width: 800px;
  margin-bottom: 30px;
  font-size: 17px;
  line-height: 1.55;
}

.jci-people-panel__gallery {
  margin-block: 30px 36px;
}

.jci-people-talent {
  margin-top: 54px;
}

.jci-people-talent > h3 {
  margin: 0 0 22px;
  color: var(--jci-institutional-navy);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

/* Reuse the shared testimonial markup. Mobile uses the same horizontal browse
 * pattern already established elsewhere in the site, without adding JS. */
.jci-people-talent .jci-testimonial-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0 0 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.jci-people-talent .jci-testimonial--grid {
  flex: 0 0 min(78vw, 300px);
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.jci-people-talent .jci-testimonial--grid .jci-testimonial__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f5f7;
}

.jci-people-talent .jci-testimonial--grid .jci-testimonial__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.jci-people-talent .card-description {
  min-height: 118px;
  margin: -1px 12px 0;
  padding: 14px;
  background: #fff;
  color: #0d0d0d;
  box-shadow: 0 5px 18px rgba(4, 28, 64, 0.08);
}

.jci-people-benefits {
  display: grid;
  gap: 34px;
  margin-top: 44px;
}

.jci-people-benefit__number {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  border: 1.5px solid var(--jci-institutional-blue);
  border-radius: 50%;
  color: var(--jci-institutional-blue);
  font-size: 18px;
  line-height: 1;
}

.jci-people-benefit h3 {
  margin: 0 0 9px;
  color: var(--jci-institutional-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.jci-people-benefit .jci-institutional-prose {
  font-size: 14px;
  line-height: 1.58;
}

.jci-people-alumni__closing {
  max-width: 760px;
  margin-top: 54px;
  color: var(--jci-institutional-navy);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

.jci-people-team {
  margin-top: 50px;
}

.jci-people-team__department + .jci-people-team__department {
  margin-top: 58px;
}

.jci-people-team__department > h3 {
  margin: 0 0 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jci-institutional-rule);
  color: var(--jci-institutional-navy);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.jci-people-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 18px;
}

.jci-people-team-card {
  min-width: 0;
}

.jci-people-team-card__media {
  width: min(100%, 150px);
  margin-bottom: 12px;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f4f5f7;
}

.jci-people-team-card__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.jci-people-team-card h4 {
  margin: 0;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.jci-people-team-card p {
  max-width: 180px;
  margin: 5px 0 0;
  color: #50545d;
  font-size: 12px;
  line-height: 1.38;
}

/* Stacked institutional hero used when the title belongs above the image.
 * About us and CSR intentionally share this exact vertical rhythm. */
.jci-about-hero,
.jci-institutional-stacked-hero {
  padding-top: clamp(48px, 7vw, 76px);
  background: #fff;
}

.jci-about-hero__heading,
.jci-institutional-stacked-hero__heading {
  padding-bottom: 34px;
}

.jci-about-hero h1,
.jci-institutional-stacked-hero h1 {
  margin: 0;
  color: var(--jci-institutional-navy);
}

.jci-institutional-stacked-hero__media,
.jci-about-hero__media {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.jci-institutional-stacked-hero__image,
.jci-about-hero__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.jci-institutional-stacked-hero--no-media .jci-institutional-stacked-hero__heading {
  padding-bottom: 0;
}

/* About us */

.jci-about-hero__subtitle {
  max-width: 820px;
  margin: 18px 0 0;
  color: var(--jci-institutional-navy);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.jci-about-hero--no-media .jci-about-hero__heading {
  padding-bottom: 0;
}

.jci-about-hero--no-media + .jci-about-introduction {
  padding-top: 34px;
}

.jci-about-introduction {
  padding-bottom: clamp(46px, 7vw, 72px);
}

.jci-about-story__grid {
  display: grid;
  gap: 42px;
  align-items: start;
}

.jci-about-story__copy {
  max-width: 760px;
}

.jci-about-story__aside {
  min-width: 0;
}

.jci-about-story__standfirst {
  color: var(--jci-institutional-navy);
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.jci-about-story__standfirst > * + * {
  margin-top: 1em;
}

.jci-about-story__media {
  margin-top: 28px;
}

.jci-about-story__image {
  display: block;
  width: 100%;
  height: auto;
}

.jci-about-quote {
  margin-top: clamp(12px, 4vw, 36px);
  background: var(--jci-institutional-navy);
  color: #fff;
}

.jci-about-quote__inner {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.jci-about-quote__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  margin: 0;
  padding: clamp(52px, 8vw, 84px) 0;
}

.jci-about-quote__content > p {
  max-width: 720px;
  margin: 0;
  font-size: clamp(19px, 2.2vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.jci-about-quote__content cite {
  display: grid;
  gap: 2px;
  margin-top: 32px;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.jci-about-quote__content cite strong {
  font-weight: 700;
  text-transform: uppercase;
}

.jci-about-quote__media {
  min-width: 0;
  overflow: hidden;
}

.jci-about-quote__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.jci-about-purpose {
  padding-block: clamp(54px, 7vw, 78px);
  background: #f3f1f1;
}

.jci-about-purpose__mission {
  max-width: 900px;
}

.jci-about-purpose__lead {
  max-width: 800px;
  font-size: 17px;
}

.jci-about-purpose__vision {
  display: grid;
  gap: 34px;
  align-items: start;
}

.jci-about-purpose__media {
  display: flex;
  justify-content: flex-end;
}

.jci-about-purpose__image {
  display: block;
  width: min(100%, 300px);
  height: auto;
}

.jci-about-purpose__vision--no-media {
  display: block;
}

.jci-about-purpose__vision--no-media .jci-about-purpose__copy {
  max-width: 900px;
}

.jci-about-values__heading {
  max-width: 840px;
}

.jci-about-values__grid {
  display: grid;
  gap: 30px;
  margin-top: clamp(42px, 7vw, 66px);
}

.jci-about-value {
  --jci-about-value-icon-size: 48px;
  display: grid;
  grid-template-columns: var(--jci-about-value-icon-size) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  min-width: 0;
}

/* Base value icons are editorial artwork. As with Business Solutions and Rankings,
 * they remain unframed unless a template explicitly opts into the badged variant. */
.jci-about-value__icon-wrap {
  display: block;
  grid-row: 1 / span 2;
  width: var(--jci-about-value-icon-size);
  height: var(--jci-about-value-icon-size);
}

.jci-about-value__icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left top;
}

.jci-about-value h3 {
  margin: 0;
  padding-bottom: 0;
  color: var(--jci-institutional-navy);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.jci-about-value p {
  margin: 0;
  color: #40454f;
  font-size: 14px;
  line-height: 1.58;
}

.jci-about-value__content {
  display: grid;
  gap: 0;
  align-content: start;
  min-width: 0;
}

/* Shared institutional list treatment for compact, high-visibility accent bullets. */
.jci-institutional-list--accent ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jci-institutional-list--accent li {
  position: relative;
  margin: 0;
  padding-left: 20px;
}

.jci-institutional-list--accent li::before {
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jci-institutional-blue);
  transform: translateY(-50%);
  content: "";
}

/* Optional About-values variants. These extend the shared component without
 * changing About us or Virtual campus unless a template opts into them. */
.jci-about-values--compact .jci-about-values__heading {
  max-width: 760px;
  font-size: clamp(23px, 2.3vw, 28px);
  font-weight: 600;
  line-height: 1.18;
}

.jci-about-values--compact .jci-about-values__grid {
  margin-top: clamp(44px, 5vw, 56px);
}

.jci-about-values--centered .jci-about-values__heading {
  margin-inline: auto;
  text-align: center;
}

.jci-about-values--badged-icons .jci-about-value {
  --jci-about-value-icon-size: 56px;
  column-gap: 16px;
}

.jci-about-values--badged-icons .jci-about-value__icon-wrap {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(72 124 255 / 0.18);
}

.jci-about-values--badged-icons .jci-about-value__icon {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  object-position: center;
}

.jci-about-value--no-icon {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.jci-about-value--no-icon h3,
.jci-about-value--no-icon p {
  grid-column: 1;
}

.jci-about-closing-media {
  margin-bottom: clamp(10px, 3vw, 28px) !important;
}

.jci-about-closing-media__image {
  display: block;
  width: 100%;
  height: auto;
}

.jci-about-stats {
  padding-top: clamp(54px, 8vw, 84px);
}

.jci-about-stats h2 {
  margin: 0 0 26px;
  color: var(--jci-institutional-navy);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

.jci-about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jci-about-stat {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  background: #e8edf9;
  color: var(--jci-institutional-blue);
  text-align: center;
}

.jci-about-stat--3 {
  background: #ebecee;
  color: var(--jci-institutional-navy);
}

.jci-about-stat--4 {
  background: #f4e8e9;
  color: var(--jci-institutional-coral);
}

.jci-about-stat strong {
  display: block;
  margin: 0;
  color: inherit;
  font-family: var(--font-family-display, "rama-slab-e", serif);
  font-size: clamp(48px, 10vw, 72px);
  font-weight: 600;
  line-height: 0.9;
}

.jci-about-stat__subtitle {
  display: block;
  max-width: 190px;
  margin-top: 7px;
  color: inherit;
  font-family: var(--font-family-display, "rama-slab-e", serif);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
}

.jci-about-stat p {
  max-width: 200px;
  margin: 18px 0 0;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}


/* About us 2026 composition.
 * Scoped overrides preserve the shared institutional primitives used by
 * Virtual Campus, Pedagogical Model, CSR and the remaining About pages. */
.jci-about-page .jci-about-hero {
  padding-top: clamp(38px, 5vw, 58px);
}

.jci-about-page .jci-about-hero h1 {
  font-size: clamp(42px, 5.4vw, 64px);
  line-height: 0.96;
  text-transform: none;
}

.jci-about-page .jci-about-hero__heading {
  padding-bottom: clamp(24px, 3vw, 34px);
}

.jci-about-page .jci-about-hero__media {
  overflow: hidden;
  aspect-ratio: 2.82 / 1;
  background: #eef1f5;
}

.jci-about-page .jci-about-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.jci-about-page .jci-about-introduction {
  padding-top: clamp(62px, 7vw, 90px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.jci-about-page .jci-about-introduction__lead {
  max-width: 940px;
  color: var(--jci-institutional-navy);
}

.jci-about-page .jci-about-introduction__lead p:first-child {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
}

.jci-about-page .jci-about-story {
  padding-bottom: clamp(72px, 9vw, 112px);
}

.jci-about-page .jci-about-story__grid {
  align-items: start;
}

.jci-about-page .jci-about-story__main h2 {
  margin: 0 0 24px;
  color: var(--jci-institutional-navy);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.jci-about-page .jci-about-story__copy {
  max-width: none;
  color: #171b22;
  font-size: 16px;
  line-height: 1.52;
}

.jci-about-page .jci-about-story__copy h3 {
  margin: clamp(28px, 4vw, 42px) 0 14px;
  color: var(--jci-institutional-navy);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.jci-about-page .jci-about-story__copy ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.jci-about-page .jci-about-story__copy li {
  position: relative;
  margin: 0;
  padding-left: 17px;
}

.jci-about-page .jci-about-story__copy li + li {
  margin-top: 0;
}

.jci-about-page .jci-about-story__copy li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jci-institutional-blue);
  transform: translateY(-50%);
  content: "";
}

.jci-about-page .jci-about-story__standfirst {
  color: var(--jci-institutional-navy);
  font-size: clamp(23px, 2.25vw, 28px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.018em;
}

.jci-about-page .jci-about-story__gallery {
  display: grid;
  gap: clamp(18px, 2.3vw, 28px);
  margin-top: clamp(30px, 4vw, 48px);
}

.jci-about-page .jci-about-story__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #eef1f5;
}

.jci-about-page .jci-about-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jci-about-page .jci-about-purpose {
  padding-block: clamp(54px, 6.2vw, 78px);
  background: #f3f1f1;
}

.jci-about-page .jci-about-purpose__grid {
  display: grid;
  gap: clamp(46px, 5.5vw, 70px);
}

.jci-about-page .jci-about-purpose__item {
  min-width: 0;
}

.jci-about-page .jci-about-purpose h2 {
  margin-bottom: 18px;
  font-size: clamp(32px, 3.6vw, 42px);
}

.jci-about-page .jci-about-purpose__prose {
  color: #171b22;
  font-size: 15px;
  line-height: 1.48;
}

.jci-about-page .jci-about-purpose__media {
  justify-content: flex-start;
  margin-top: clamp(30px, 4vw, 44px);
}

.jci-about-page .jci-about-purpose__image {
  width: clamp(132px, 12vw, 184px);
}

.jci-about-page .jci-about-quote {
  margin-top: 0;
  background: #050505;
}

.jci-about-page .jci-about-quote__inner {
  display: grid;
  width: 100%;
  max-width: none;
}

.jci-about-page .jci-about-quote__copy {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  background: #050505;
}

.jci-about-page .jci-about-quote__content {
  width: min(100%, 630px);
  min-height: clamp(270px, 28vw, 380px);
  padding: clamp(44px, 5.2vw, 66px) clamp(34px, 4.5vw, 66px) clamp(44px, 5.2vw, 66px) 0;
}

.jci-about-page .jci-about-quote__content > p {
  max-width: 480px;
  font-size: clamp(23px, 2.45vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -0.02em;
}

.jci-about-page .jci-about-quote__content cite {
  gap: 1px;
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 14px;
}

.jci-about-page .jci-about-quote__content cite strong {
  font-size: 15px;
  font-weight: 600;
}

.jci-about-page .jci-about-quote__media {
  min-height: clamp(270px, 28vw, 380px);
  background: #050505;
}

.jci-about-page .jci-about-quote__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}

.jci-about-page .jci-about-values {
  padding-block: clamp(60px, 7vw, 88px);
}

.jci-about-page .jci-about-values__heading {
  max-width: 930px;
}

.jci-about-page .jci-about-values h2 {
  margin-bottom: 22px;
  font-size: clamp(32px, 3.6vw, 42px);
}

.jci-about-page .jci-about-values__heading .jci-institutional-prose {
  max-width: 850px;
  color: #30353e;
  font-size: 15px;
  line-height: 1.52;
}

.jci-about-page .jci-about-values__grid {
  gap: clamp(28px, 4vw, 44px) clamp(44px, 7vw, 88px);
  margin-top: clamp(38px, 4.8vw, 56px);
}

.jci-about-page .jci-about-value {
  --jci-about-value-icon-size: 60px;
  grid-template-columns: var(--jci-about-value-icon-size) minmax(0, 1fr);
  column-gap: 18px;
}

.jci-about-page .jci-about-value h3 {
  color: var(--jci-institutional-navy);
  font-size: 19px;
  font-weight: 700;
}

.jci-about-page .jci-about-value p {
  margin-top: 7px;
  color: #5a5f68;
  font-size: 14px;
  line-height: 1.45;
}

.jci-about-page .jci-about-johan {
  padding-top: clamp(54px, 6.2vw, 76px);
  background: #f3f1f1;
}

.jci-about-page .jci-about-johan__inner {
  padding-bottom: clamp(44px, 5vw, 62px);
}

.jci-about-page .jci-about-johan__heading {
  margin-bottom: clamp(26px, 3.8vw, 38px);
}

.jci-about-page .jci-about-johan__heading h2,
.jci-about-page .jci-about-johan__heading p {
  margin: 0;
  color: var(--jci-institutional-navy);
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

.jci-about-page .jci-about-johan__copy-grid {
  display: grid;
  gap: clamp(30px, 5vw, 58px);
}

.jci-about-page .jci-about-johan__copy {
  color: #171b22;
  font-size: 15px;
  line-height: 1.52;
}

.jci-about-page .jci-about-johan__world {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(30px, 4vw, 42px);
}

.jci-about-page .jci-about-johan__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--jci-institutional-navy);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.jci-about-page .jci-about-johan__link span:last-child {
  color: var(--jci-institutional-blue);
  font-size: 1.05em;
}

.jci-about-page .jci-about-johan__link:hover,
.jci-about-page .jci-about-johan__link:focus-visible {
  color: var(--jci-institutional-blue);
}

.jci-about-page .jci-about-johan__link:focus-visible {
  outline: 2px solid var(--jci-institutional-blue);
  outline-offset: 4px;
}

.jci-about-page .jci-about-johan__world-logo-wrap {
  display: block;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
}

.jci-about-page .jci-about-johan__world-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jci-about-page .jci-about-johan__gallery {
  display: grid;
  width: 100%;
  gap: 16px;
  background: #f3f1f1;
}

.jci-about-page .jci-about-johan__gallery-item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e6e7e9;
}

.jci-about-page .jci-about-johan__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jci-about-page .jci-about-stats {
  padding-block: clamp(58px, 7vw, 88px);
}

.jci-about-page .jci-about-stats h2 {
  margin-bottom: 28px;
  font-size: clamp(20px, 2vw, 24px);
}

.jci-about-page .jci-about-stat {
  min-height: 190px;
}

@media (min-width: 761px) {
  .jci-about-page .jci-about-story__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    gap: clamp(64px, 8vw, 116px);
  }

  .jci-about-page .jci-about-purpose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jci-about-page .jci-about-quote__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jci-about-page .jci-about-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jci-about-page .jci-about-johan__copy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jci-about-page .jci-about-johan__gallery {
    grid-template-columns: 1.16fr 1fr 0.54fr;
  }

  .jci-about-page .jci-about-johan__gallery-item {
    aspect-ratio: auto;
    min-height: clamp(190px, 21vw, 300px);
  }
}

@media (max-width: 760px) {
  .jci-about-page .jci-about-hero__media {
    aspect-ratio: 16 / 10;
  }

  .jci-about-page .jci-about-introduction {
    padding-top: 48px;
  }

  .jci-about-page .jci-about-story__standfirst {
    font-size: 22px;
  }

  .jci-about-page .jci-about-story__gallery {
    gap: 14px;
  }

  .jci-about-page .jci-about-purpose__grid {
    gap: 54px;
  }

  .jci-about-page .jci-about-quote__copy {
    justify-content: center;
  }

  .jci-about-page .jci-about-quote__content {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 54px 0;
  }

  .jci-about-page .jci-about-quote__content > p {
    max-width: 520px;
  }

  .jci-about-page .jci-about-quote__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .jci-about-page .jci-about-values__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .jci-about-page .jci-about-johan__gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .jci-about-page .jci-about-johan__gallery-item {
    aspect-ratio: 16 / 10;
  }

  .jci-about-page .jci-about-johan__world {
    align-items: flex-start;
  }
}

/* CSS-only progressive panel switching. Browsers without :has() keep all
 * sections visible, preserving access to every piece of content. */
@supports selector(.jci-people-panels:has(.jci-people-panel:target)) {
  .jci-people-panel {
    display: none;
  }

  .jci-people-panels:not(:has(.jci-people-panel:target)) .jci-people-panel:first-child,
  .jci-people-panel:target {
    display: block;
  }

  .jci-people-panel + .jci-people-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .jci-people-local-nav li:first-child .jci-people-local-nav__link {
    color: var(--jci-institutional-blue);
    font-weight: 600;
  }

  .jci-people-page:has(.jci-people-panel:target) .jci-people-local-nav li:first-child .jci-people-local-nav__link {
    color: #666;
    font-weight: 400;
  }

  .jci-people-page:has(#people-students:target) .jci-people-local-nav__link--students,
  .jci-people-page:has(#people-faculty:target) .jci-people-local-nav__link--faculty,
  .jci-people-page:has(#people-alumni:target) .jci-people-local-nav__link--alumni,
  .jci-people-page:has(#people-team:target) .jci-people-local-nav__link--team {
    color: var(--jci-institutional-blue);
    font-weight: 600;
  }
}

.jci-people-page.is-tabs-ready .jci-people-local-nav__link[aria-selected="false"] {
  color: #666;
  font-weight: 400;
}

.jci-people-page.is-tabs-ready .jci-people-local-nav__link[aria-selected="true"] {
  color: var(--jci-institutional-blue);
  font-weight: 600;
}


@media (prefers-reduced-motion: reduce) {
  .jci-institutional-link::after {
    transition: none;
  }
}

@media (min-width: 520px) {
  .jci-people-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .jci-institutional-gallery--two,
  .jci-people-intro__media,
  .jci-people-benefits,
  .jci-about-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jci-people-talent .jci-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .jci-people-talent .jci-testimonial--grid {
    width: 100%;
  }

  .jci-about-stats__grid {
    gap: 18px;
  }
}

@media (min-width: 761px) {
  .jci-virtual-campus-hero {
    aspect-ratio: 2.75 / 1;
  }

  .jci-institutional-hero {
    min-height: clamp(360px, 34vw, 500px);
  }

  .jci-institutional-hero__inner {
    align-items: flex-start;
  }

  .jci-institutional-media-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
    gap: clamp(50px, 7vw, 94px);
  }

  .jci-institutional-media-grid--balanced {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  }

  .jci-csr-quote__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.82fr);
  }

  .jci-csr-quote__content {
    padding: clamp(56px, 7vw, 86px) clamp(46px, 6vw, 84px) clamp(56px, 7vw, 86px) 0;
  }

  .jci-rankings-section__intro {
    grid-template-columns: minmax(0, 760px) 220px;
    justify-content: space-between;
    gap: 60px;
  }

  .jci-rankings-section__logo-wrap {
    justify-content: flex-end;
  }

  .jci-rankings-section__aside {
    grid-column: 2;
    justify-items: end;
  }

  .jci-rankings-subsection__grid {
    grid-template-columns: minmax(0, 720px) minmax(280px, 340px);
    justify-content: space-between;
    gap: 52px;
  }

  .jci-rankings-advantages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 52px;
  }

  .jci-people-intro__media {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 26px;
    margin-top: 44px;
    margin-bottom: -104px;
  }

  .jci-people-intro__media-item--small {
    margin-top: 10px;
  }

  .jci-people-intro__media-item--large {
    aspect-ratio: 16 / 10;
  }

  .jci-people-intro__body-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
    gap: clamp(58px, 8vw, 108px);
    padding-top: 164px;
  }

  .jci-people-sections__inner {
    grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr);
    gap: clamp(50px, 7vw, 92px);
    align-items: start;
  }

  .jci-people-local-nav {
    position: sticky;
    top: calc(var(--jci-header-visual-offset, var(--jci-header-offset, 90px)) + 30px + 64px + 24px);
    overflow: visible;
  }

  .jci-people-local-nav ul {
    display: grid;
    gap: 10px;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  .jci-people-local-nav__link {
    white-space: normal;
  }

  .jci-people-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .jci-about-hero__heading,
  .jci-institutional-stacked-hero__heading {
    padding-bottom: 42px;
  }

  .jci-about-story__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(56px, 8vw, 108px);
  }

  .jci-about-quote__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  }

  .jci-about-quote__content {
    padding-right: clamp(46px, 6vw, 82px);
  }

  .jci-about-purpose__vision {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: clamp(52px, 7vw, 92px);
  }

  .jci-about-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 70px;
  }

  .jci-about-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .jci-about-stat {
    min-height: 168px;
    padding: 22px 16px;
  }

  .jci-about-stat strong {
    font-size: clamp(54px, 5.3vw, 76px);
  }

  .jci-about-stat__subtitle {
    font-size: clamp(28px, 2.5vw, 37px);
  }
}

@media (min-width: 1080px) {
  .jci-people-talent .jci-testimonial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

}

@media (max-width: 760px) {
  .jci-csr-quote__content {
    min-height: 0;
  }

  .jci-csr-quote__inner,
  .jci-about-quote__inner {
    width: 100% !important;
  }

  .jci-csr-quote__content,
  .jci-about-quote__content {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .jci-people-intro__side-media {
    width: min(100%, 520px);
  }

  .jci-about-hero__heading,
  .jci-institutional-stacked-hero__heading {
    padding-bottom: 28px;
  }

  .jci-about-stat {
    min-height: 190px;
  }
}