/**
 * Exponent — Who We Help
 * Hero
 *
 * Compatible con Divi 5.
 * La fotografía es full width.
 * El contenido utiliza el mismo ancho visual del Home.
 */


/* =========================================================
   DIVI 5 — RESET DE WRAPPERS
   ========================================================= */

.exp-audience-hero-shell {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background-color: var(--exp-color-navy);
}

.exp-audience-hero-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-audience-hero-row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-audience-hero-code,
.exp-audience-hero-code.et_pb_module,
.exp-audience-hero-code .et_pb_code_inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

.exp-audience-hero {
  --exp-parallax-y: 0px;

  /*
   * 6.25vw produce:
   * 120px en una pantalla de 1920px.
   * 84px en una pantalla de 1344px.
   */
  --exp-hero-gutter: clamp(1.5rem, 6.25vw, 7.5rem);

  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: max(45rem, 100svh);
  margin: 0;
  padding: 0;

  color: var(--exp-color-white);
  background-color: var(--exp-color-navy);

  overflow: hidden;
  overflow: clip;
}

.exp-audience-hero,
.exp-audience-hero *,
.exp-audience-hero *::before,
.exp-audience-hero *::after {
  box-sizing: border-box;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.exp-audience-hero__media {
  position: absolute;
  z-index: 0;

  /*
   * El excedente vertical evita que aparezcan bordes
   * durante el movimiento parallax.
   */
  inset: -8% -3%;

  overflow: hidden;
  pointer-events: none;
}

.exp-audience-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.exp-audience-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  transform:
    translate3d(0, var(--exp-parallax-y), 0)
    scale(1.035);

  transform-origin: center center;
  backface-visibility: hidden;
}

.exp-audience-hero.is-parallax-active
  .exp-audience-hero__image {
  will-change: transform;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.exp-audience-hero__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.08) 30%,
      rgba(var(--exp-color-navy-rgb), 0.22) 58%,
      rgba(var(--exp-color-navy-rgb), 0.82) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.04) 48%,
      rgba(var(--exp-color-navy-rgb), 0.16) 100%
    );
}


/* =========================================================
   CONTAINER
   ========================================================= */

.exp-audience-hero__inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 5fr)
    minmax(24rem, 3fr);

  align-items: end;

  gap: clamp(3rem, 4.5vw, 5.5rem);

  /*
   * Este es el ancho real compartido con las secciones
   * del Home y el footer.
   */
  width: calc(
    100% -
    var(--exp-hero-gutter) -
    var(--exp-hero-gutter)
  ) !important;

  max-width: 105rem !important;
  min-height: inherit;

  margin: 0 auto !important;
  padding: clamp(8rem, 15vh, 11rem) 0
    clamp(6rem, 18vh, 12rem) !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.exp-audience-hero__title {
  width: 100%;
  max-width: 47rem;
  margin: 0;
  padding: 0;

  color: var(--exp-color-white);

  font-family: var(--exp-font-primary);
  font-size: clamp(3rem, 3.15vw, 4rem);
  font-weight: var(--exp-font-weight-light);
  font-style: var(--exp-font-style-regular);
  line-height: 0.98;
  letter-spacing: -0.04em;

  text-wrap: balance;
}

.exp-audience-hero__title-line {
  display: block;
}

.exp-audience-hero__title em {
  color: inherit;

  font-family: var(--exp-font-editorial);
  font-size: 1.03em;
  font-weight: var(--exp-font-weight-regular);
  font-style: var(--exp-font-style-italic);
  line-height: inherit;
  letter-spacing: -0.025em;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.exp-audience-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  justify-self: end;

  width: 100%;
  max-width: 33rem;
  margin: 0;
  padding: 0 0 0.35rem;

  gap: clamp(1.5rem, 2vw, 2rem);
}

.exp-audience-hero__copy {
  width: 100%;
  max-width: 32rem;
  margin: 0;
  padding: 0;

  color: rgba(var(--exp-color-white-rgb), 0.86);

  font-family: var(--exp-font-primary);
  font-size: clamp(0.9375rem, 0.95vw, 1.0625rem);
  font-weight: var(--exp-font-weight-light);
  line-height: 1.45;
  letter-spacing: -0.012em;
}


/* =========================================================
   CTA
   ========================================================= */

.exp-audience-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3.5rem;
  margin: 0;
  padding: 0.95rem clamp(1.5rem, 1.8vw, 2rem);

  color: var(--exp-color-navy) !important;
  background-color: var(--exp-color-gold);

  border: 1px solid var(--exp-color-gold);
  border-radius: 999px;

  font-family: var(--exp-font-primary);
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.exp-audience-hero__button span {
  display: block;
}

.exp-audience-hero__button:focus-visible {
  outline: 2px solid var(--exp-color-white);
  outline-offset: 4px;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .exp-audience-hero__button:hover {
    color: var(--exp-color-navy) !important;
    background-color: var(--exp-color-white);
    border-color: var(--exp-color-white);

    transform: translate3d(0, -2px, 0);

    box-shadow:
      0 0.75rem 2rem rgba(0, 0, 0, 0.16);
  }
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .exp-audience-hero.is-enhanced
    .exp-audience-hero__title {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  .exp-audience-hero.is-enhanced
    .exp-audience-hero__aside {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  .exp-audience-hero.is-enhanced.is-visible
    .exp-audience-hero__title {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 700ms ease,
      transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-audience-hero.is-enhanced.is-visible
    .exp-audience-hero__aside {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 700ms ease 120ms,
      transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
  }
}


/* =========================================================
   LAPTOP Y TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 74.99rem) {
  .exp-audience-hero__inner {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(20rem, 0.75fr);

    gap: clamp(2.5rem, 4vw, 4rem);
  }

  .exp-audience-hero__title {
    max-width: 42rem;
    font-size: clamp(2.75rem, 4vw, 3.5rem);
  }

  .exp-audience-hero__aside {
    max-width: 28rem;
  }

  .exp-audience-hero__copy {
    font-size: 0.9375rem;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 61.99rem) {
  .exp-audience-hero {
    min-height: max(44rem, 100svh);
  }

  .exp-audience-hero__inner {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(17rem, 0.85fr);

    gap: 2.5rem;

    padding-top: clamp(8rem, 15vh, 10rem) !important;
    padding-bottom: clamp(4rem, 12vh, 7rem) !important;
  }

  .exp-audience-hero__title {
    font-size: clamp(2.625rem, 4.8vw, 3.25rem);
  }

  .exp-audience-hero__aside {
    max-width: 23rem;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {
  .exp-audience-hero {
    --exp-hero-gutter: clamp(1.25rem, 6vw, 2rem);

    min-height: max(43rem, 100svh);
  }

  .exp-audience-hero__media {
    inset: -5% -4%;
  }

  .exp-audience-hero__image {
    object-position: center center;

    transform:
      translate3d(0, var(--exp-parallax-y), 0)
      scale(1.04);
  }

  .exp-audience-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(var(--exp-color-navy-rgb), 0.12) 32%,
        rgba(var(--exp-color-navy-rgb), 0.58) 62%,
        rgba(var(--exp-color-navy-rgb), 0.94) 100%
      );
  }

  .exp-audience-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    align-items: initial;

    gap: 1.5rem;

    padding-top: clamp(7.5rem, 16vh, 9rem) !important;
    padding-bottom: clamp(2.5rem, 7vh, 4rem) !important;
  }

  .exp-audience-hero__title {
    max-width: 12.5em;

    font-size: clamp(2.625rem, 11vw, 3.5rem);
    line-height: 0.98;
  }

  /*
   * En mobile quitamos los saltos rígidos para que
   * el navegador distribuya el título naturalmente.
   */

  .exp-audience-hero__title-line {
    display: inline;
  }

  .exp-audience-hero__title-line:not(:last-child)::after {
    content: " ";
  }

  .exp-audience-hero__aside {
    justify-self: start;

    max-width: 35rem;
    padding: 0;

    gap: 1.25rem;
  }

  .exp-audience-hero__copy {
    max-width: 34rem;

    color: rgba(var(--exp-color-white-rgb), 0.84);

    font-size: 0.9375rem;
    line-height: 1.48;
  }

  .exp-audience-hero__button {
    min-height: 3.25rem;
    padding: 0.875rem 1.5rem;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 29.99rem) {
  .exp-audience-hero__inner {
    gap: 1.25rem;
    padding-bottom: 2rem !important;
  }

  .exp-audience-hero__title {
    max-width: 11.5em;
    font-size: clamp(2.35rem, 10.75vw, 2.875rem);
  }

  .exp-audience-hero__copy {
    font-size: 0.875rem;
  }

  .exp-audience-hero__button {
    width: 100%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-audience-hero__image {
    transform: scale(1.035) !important;
  }

  .exp-audience-hero__title,
  .exp-audience-hero__aside,
  .exp-audience-hero__button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/**
 * Exponent — Who We Help
 * Qualification section
 */


/* =========================================================
   DIVI 5 — WRAPPERS
   ========================================================= */

.exp-qualification-shell {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--exp-color-white);
  overflow: hidden;
}

.exp-qualification-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-qualification-row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-qualification-code,
.exp-qualification-code.et_pb_module,
.exp-qualification-code .et_pb_code_inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   SECTION
   ========================================================= */

.exp-qualification {
  --exp-qualification-gutter:
    clamp(1.5rem, 6.25vw, 7.5rem);

  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(5.5rem, 8vw, 7.5rem) 0;

  color: var(--exp-color-navy);
  background-color: var(--exp-color-white);
}

.exp-qualification,
.exp-qualification *,
.exp-qualification *::before,
.exp-qualification *::after {
  box-sizing: border-box;
}


/* =========================================================
   SVG SPRITE
   ========================================================= */

.exp-qualification__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.exp-qualification__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 3fr)
    minmax(0, 4fr);

  align-items: stretch;

  column-gap: clamp(5rem, 12vw, 14rem);

  width: calc(
    100% -
    var(--exp-qualification-gutter) -
    var(--exp-qualification-gutter)
  ) !important;

  max-width: 105rem !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.exp-qualification__content {
  display: flex;
  flex-direction: column;
  align-self: stretch;

  width: 100%;
  min-width: 0;
}


/* =========================================================
   HEADER
   ========================================================= */

.exp-qualification__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  margin: 0;
  padding: 0;

  gap: clamp(0.875rem, 1.2vw, 1.125rem);
}

.exp-qualification__label {
  margin: 0;
  padding: 0;
}

.exp-qualification__title {
  max-width: 24rem;
  margin: 0;
  padding: 0;

  color: var(--exp-color-navy);
}

.exp-qualification__title span,
.exp-qualification__title em {
  display: block;
}

.exp-qualification__title em {
  color: inherit;
  font-family: var(--exp-font-editorial);
  font-weight: var(--exp-font-weight-regular);
  font-style: var(--exp-font-style-italic);
}


/* =========================================================
   QUALIFICATION LIST
   ========================================================= */

.exp-qualification__list {
  display: flex;
  flex-direction: column;

  width: 100%;
  margin: auto 0 0;
  padding: 0;

  list-style: none;

  gap: 0.5rem;
}

.exp-qualification__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;

  width: 100%;
  min-height: 4.125rem;
  margin: 0;
  padding: 0.75rem 1rem;

  color: var(--exp-color-navy);
  background-color: var(--exp-color-gray-light);
  background-color:
    rgba(var(--exp-color-navy-rgb), 0.045);

  border: 1px solid transparent;
  border-radius: 0.875rem;

  gap: 0.875rem;
}


/* =========================================================
   ICON
   ========================================================= */

.exp-qualification__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 2.375rem;
  height: 2.375rem;

  color: var(--exp-color-navy);
  background-color: var(--exp-color-gold);

  border-radius: 0.5rem;
}

.exp-qualification__icon svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   ITEM TEXT
   ========================================================= */

.exp-qualification__text {
  display: block;
  min-width: 0;

  color: var(--exp-color-navy);

  font-family: var(--exp-font-primary);
  font-size: clamp(0.8125rem, 0.75vw, 0.9375rem);
  font-weight: var(--exp-font-weight-regular);
  line-height: 1.35;
  letter-spacing: -0.01em;
}


/* =========================================================
   IMAGE
   ========================================================= */

.exp-qualification__media {
  position: relative;
  align-self: stretch;

  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;

  aspect-ratio: 7 / 8;

  border-radius: 1.5rem;

  overflow: hidden;
  background-color: var(--exp-color-gray-light);
}

.exp-qualification__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  backface-visibility: hidden;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .exp-qualification.is-enhanced
    .exp-qualification__header {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .exp-qualification.is-enhanced
    .exp-qualification__item {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }

  .exp-qualification.is-enhanced
    .exp-qualification__media {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .exp-qualification.is-enhanced
    .exp-qualification__image {
    transform: scale(1.025);
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__header {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 600ms ease,
      transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 500ms ease,
      transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__media {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 750ms ease 100ms,
      transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__image {
    transform: scale(1);

    transition:
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(1) {
    transition-delay: 80ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(2) {
    transition-delay: 125ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(3) {
    transition-delay: 170ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(4) {
    transition-delay: 215ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(5) {
    transition-delay: 260ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(6) {
    transition-delay: 305ms;
  }

  .exp-qualification.is-enhanced.is-visible
    .exp-qualification__item:nth-child(7) {
    transition-delay: 350ms;
  }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 74.99rem) {
  .exp-qualification__inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    column-gap: clamp(3.5rem, 7vw, 5.5rem);
  }

  .exp-qualification__item {
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }

  .exp-qualification__text {
    font-size: 0.8125rem;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 61.99rem) {
  .exp-qualification {
    padding: clamp(4.5rem, 9vw, 6rem) 0;
  }

  .exp-qualification__inner {
    grid-template-columns: minmax(0, 1fr);

    row-gap: clamp(3rem, 7vw, 4.5rem);
  }

  .exp-qualification__content {
    gap: clamp(2.75rem, 6vw, 4rem);
  }

  .exp-qualification__title {
    max-width: 30rem;
  }

  .exp-qualification__list {
    max-width: 48rem;
    margin-top: 0;
  }

  .exp-qualification__text {
    font-size: clamp(0.875rem, 1.6vw, 0.9375rem);
  }

  .exp-qualification__media {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }

  .exp-qualification__image {
    object-position: center 54%;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {
  .exp-qualification {
    --exp-qualification-gutter:
      clamp(1.25rem, 6vw, 2rem);

    padding: clamp(4rem, 14vw, 5rem) 0;
  }

  .exp-qualification__inner {
    row-gap: 2.75rem;
  }

  .exp-qualification__content {
    gap: 2.5rem;
  }

  .exp-qualification__header {
    gap: 0.75rem;
  }

  .exp-qualification__title {
    max-width: 19rem;
  }

  .exp-qualification__item {
    align-items: center;

    min-height: 4rem;
    padding: 0.75rem;

    border-radius: 0.75rem;

    gap: 0.75rem;
  }

  .exp-qualification__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .exp-qualification__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .exp-qualification__text {
    font-size: 0.875rem;
  }

  .exp-qualification__media {
    aspect-ratio: 4 / 3;
    border-radius: 1.125rem;
  }

  .exp-qualification__image {
    object-position: center center;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 29.99rem) {
  .exp-qualification__item {
    align-items: start;
  }

  .exp-qualification__icon {
    margin-top: 0.0625rem;
  }

  .exp-qualification__text {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .exp-qualification__media {
    aspect-ratio: 5 / 4;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-qualification__header,
  .exp-qualification__item,
  .exp-qualification__media,
  .exp-qualification__image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/**
 * Exponent — Who We Help
 * Where We Work
 */


/* =========================================================
   DIVI 5 — WRAPPERS
   ========================================================= */

.exp-where-work-shell {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--exp-color-white);
  background-color: var(--exp-color-navy);

  overflow: hidden;
}

.exp-where-work-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-where-work-row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-where-work-code,
.exp-where-work-code.et_pb_module,
.exp-where-work-code .et_pb_code_inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   SECTION
   ========================================================= */

.exp-where-work {
  --exp-where-work-gutter:
    clamp(1.5rem, 6.25vw, 7.5rem);

  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(6rem, 6.25vw, 7.5rem) 0;

  color: var(--exp-color-white);
  background-color: var(--exp-color-navy);
}

.exp-where-work,
.exp-where-work *,
.exp-where-work *::before,
.exp-where-work *::after {
  box-sizing: border-box;
}


/* =========================================================
   CONTAINER AND GRID
   ========================================================= */

.exp-where-work__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 4fr)
    minmax(0, 3fr);

  grid-template-areas:
    "header intro"
    "media list";

  align-items: stretch;

  column-gap: clamp(5rem, 12vw, 14rem);
  row-gap: clamp(6.5rem, 8vw, 8.5rem);

  width: calc(
    100% -
    var(--exp-where-work-gutter) -
    var(--exp-where-work-gutter)
  ) !important;

  max-width: 105rem !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.exp-where-work__header {
  grid-area: header;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  gap: clamp(0.875rem, 1.1vw, 1.125rem);
}

.exp-where-work__label {
  margin: 0;
  padding: 0;

  color: rgba(var(--exp-color-white-rgb), 0.88);
}

.exp-where-work__title {
  width: 100%;
  max-width: 37rem;
  margin: 0;
  padding: 0;

  color: var(--exp-color-white);
}

.exp-where-work__title > span,
.exp-where-work__title > em {
  display: block;
}

.exp-where-work__title em {
  color: inherit;

  font-family: var(--exp-font-editorial);
  font-weight: var(--exp-font-weight-regular);
  font-style: var(--exp-font-style-italic);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.exp-where-work__intro {
  grid-area: intro;
  align-self: end;

  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0 0 0.35rem;
}

.exp-where-work__intro .exp-section-copy {
  margin: 0;
  padding: 0;

  color: rgba(var(--exp-color-white-rgb), 0.72);
}


/* =========================================================
   DYNAMIC IMAGE
   ========================================================= */

.exp-where-work__media {
  grid-area: media;

  position: relative;
  align-self: stretch;

  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;

  aspect-ratio: 7 / 9;

  border-radius: 1.5rem;

  overflow: hidden;
  isolation: isolate;

  background-color:
    rgba(var(--exp-color-white-rgb), 0.06);
}

.exp-where-work__image {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  opacity: 1;
  filter: blur(0);

  transform: translate3d(0, 0, 0) scale(1);

  backface-visibility: hidden;

  transition:
    opacity 180ms ease,
    filter 220ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-where-work__image-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(var(--exp-color-navy-rgb), 0.52) 0%,
      rgba(var(--exp-color-navy-rgb), 0.2) 18%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(var(--exp-color-navy-rgb), 0.12) 100%
    );
}


/* Image transition state */

.exp-where-work__media.is-changing
  .exp-where-work__image {
  opacity: 0.4;
  filter: blur(3px);

  transform:
    translate3d(0, 0, 0)
    scale(1.018);
}


/* =========================================================
   INDUSTRY LIST
   ========================================================= */

.exp-where-work__list {
  grid-area: list;
  align-self: stretch;

  display: grid;
  grid-template-rows:
    repeat(10, minmax(0, 1fr));

  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  list-style: none;

  border-top:
    1px solid rgba(var(--exp-color-white-rgb), 0.14);
}

.exp-where-work__item {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;

  border-bottom:
    1px solid rgba(var(--exp-color-white-rgb), 0.14);
}


/* =========================================================
   INDUSTRY BUTTON
   ========================================================= */

.exp-where-work__button {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;

  width: 100%;
  height: 100%;
  min-height: 5rem;

  margin: 0;
  padding: 0 0.25rem;

  color: rgba(var(--exp-color-white-rgb), 0.74);
  background:
    linear-gradient(
      90deg,
      rgba(var(--exp-color-white-rgb), 0) 0%,
      rgba(var(--exp-color-white-rgb), 0) 100%
    );

  border: 0;
  border-radius: 0;

  font: inherit;
  text-align: left;

  cursor: pointer;

  gap: 0.5rem;

  transition:
    color 220ms ease,
    background-color 220ms ease;
}


/* Remove possible theme-generated content */

.exp-where-work__button::before,
.exp-where-work__button::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   NUMBER
   ========================================================= */

.exp-where-work__number {
  display: block;

  color: rgba(var(--exp-color-gold-rgb), 0.78);

  font-family: var(--exp-font-primary);
  font-size: clamp(0.6875rem, 0.65vw, 0.8125rem);
  font-weight: var(--exp-font-weight-medium);
  line-height: 1;
  letter-spacing: 0.025em;

  transition:
    color 220ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   INDUSTRY NAME
   ========================================================= */

.exp-where-work__name {
  display: block;
  min-width: 0;

  color: inherit;

  font-family: var(--exp-font-editorial);
  font-size: clamp(1.5rem, 1.65vw, 2rem);
  font-weight: var(--exp-font-weight-regular);
  font-style: var(--exp-font-style-regular);
  line-height: 1.1;
  letter-spacing: -0.025em;

  transition:
    color 220ms ease,
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.exp-where-work__button.is-active,
.exp-where-work__button[aria-pressed="true"] {
  color: var(--exp-color-white);

  background:
    linear-gradient(
      90deg,
      rgba(var(--exp-color-white-rgb), 0.035) 0%,
      rgba(var(--exp-color-white-rgb), 0) 72%
    );
}

.exp-where-work__button.is-active
  .exp-where-work__number,
.exp-where-work__button[aria-pressed="true"]
  .exp-where-work__number {
  color: var(--exp-color-gold);
}

.exp-where-work__button.is-active
  .exp-where-work__name,
.exp-where-work__button[aria-pressed="true"]
  .exp-where-work__name {
  transform: translate3d(0.375rem, 0, 0);
}


/* =========================================================
   HOVER AND KEYBOARD FOCUS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .exp-where-work__button:hover {
    color: var(--exp-color-white);

    background:
      linear-gradient(
        90deg,
        rgba(var(--exp-color-white-rgb), 0.035) 0%,
        rgba(var(--exp-color-white-rgb), 0) 72%
      );
  }

  .exp-where-work__button:hover
    .exp-where-work__number {
    color: var(--exp-color-gold);
    transform: translate3d(0.125rem, 0, 0);
  }

  .exp-where-work__button:hover
    .exp-where-work__name {
    transform: translate3d(0.375rem, 0, 0);
  }
}

.exp-where-work__button:focus-visible {
  color: var(--exp-color-white);

  outline: 1px solid var(--exp-color-gold);
  outline-offset: -0.25rem;

  background:
    linear-gradient(
      90deg,
      rgba(var(--exp-color-white-rgb), 0.045) 0%,
      rgba(var(--exp-color-white-rgb), 0) 72%
    );
}

.exp-where-work__button:focus-visible
  .exp-where-work__number {
  color: var(--exp-color-gold);
}

.exp-where-work__button:focus-visible
  .exp-where-work__name {
  transform: translate3d(0.375rem, 0, 0);
}


/* =========================================================
   SECTION ENTRANCE ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .exp-where-work.is-enhanced
    .exp-where-work__header,
  .exp-where-work.is-enhanced
    .exp-where-work__intro,
  .exp-where-work.is-enhanced
    .exp-where-work__media,
  .exp-where-work.is-enhanced
    .exp-where-work__item {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__header {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 600ms ease,
      transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__intro {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 600ms ease 100ms,
      transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__media {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 700ms ease 140ms,
      transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 450ms ease,
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(1) {
    transition-delay: 160ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(2) {
    transition-delay: 195ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(3) {
    transition-delay: 230ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(4) {
    transition-delay: 265ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(5) {
    transition-delay: 300ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(6) {
    transition-delay: 335ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(7) {
    transition-delay: 370ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(8) {
    transition-delay: 405ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(9) {
    transition-delay: 440ms;
  }

  .exp-where-work.is-enhanced.is-visible
    .exp-where-work__item:nth-child(10) {
    transition-delay: 475ms;
  }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 74.99rem) {
  .exp-where-work__inner {
    column-gap: clamp(3.5rem, 7vw, 5.5rem);
    row-gap: clamp(5rem, 7vw, 6.5rem);
  }

  .exp-where-work__button {
    grid-template-columns: 2rem minmax(0, 1fr);
    min-height: 4.5rem;
  }

  .exp-where-work__name {
    font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 61.99rem) {
  .exp-where-work {
    padding: clamp(4.5rem, 9vw, 6rem) 0;
  }

  .exp-where-work__inner {
    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:
      "header"
      "intro"
      "media"
      "list";

    column-gap: 0;
    row-gap: 2rem;
  }

  .exp-where-work__title {
    max-width: 34rem;
  }

  .exp-where-work__intro {
    align-self: auto;

    max-width: 42rem;
    padding-bottom: 0;
  }

  .exp-where-work__media {
    min-height: auto;
    margin-top: clamp(1rem, 3vw, 2rem);

    aspect-ratio: 16 / 10;
  }

  .exp-where-work__list {
    grid-template-rows: none;
    grid-auto-rows: minmax(4.75rem, auto);

    height: auto;
    margin-top: 0.5rem;
  }

  .exp-where-work__button {
    min-height: 4.75rem;
    padding: 0.75rem 0.5rem;
  }

  .exp-where-work__name {
    font-size: clamp(1.375rem, 3vw, 1.75rem);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {
  .exp-where-work {
    --exp-where-work-gutter:
      clamp(1.25rem, 6vw, 2rem);

    padding: clamp(4rem, 14vw, 5rem) 0;
  }

  .exp-where-work__inner {
    row-gap: 1.5rem;
  }

  .exp-where-work__header {
    gap: 0.75rem;
  }

  .exp-where-work__title {
    max-width: 21rem;
  }

  .exp-where-work__title > span {
    display: inline;
  }

  .exp-where-work__title > span::after {
    content: " ";
  }

  .exp-where-work__title > em {
    display: inline;
  }

  .exp-where-work__intro {
    max-width: 34rem;
  }

  .exp-where-work__media {
    margin-top: 1rem;

    aspect-ratio: 4 / 3;
    border-radius: 1.125rem;
  }

  .exp-where-work__image-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(var(--exp-color-navy-rgb), 0.34) 0%,
        transparent 52%
      ),
      linear-gradient(
        180deg,
        transparent 62%,
        rgba(var(--exp-color-navy-rgb), 0.14) 100%
      );
  }

  .exp-where-work__list {
    grid-auto-rows: minmax(4.375rem, auto);
  }

  .exp-where-work__button {
    grid-template-columns: 1.75rem minmax(0, 1fr);

    min-height: 4.375rem;
    padding: 0.75rem 0.25rem;

    gap: 0.5rem;
  }

  .exp-where-work__number {
    font-size: 0.6875rem;
  }

  .exp-where-work__name {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
    line-height: 1.15;
  }

  .exp-where-work__button.is-active
    .exp-where-work__name,
  .exp-where-work__button[aria-pressed="true"]
    .exp-where-work__name {
    transform: translate3d(0.25rem, 0, 0);
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 29.99rem) {
  .exp-where-work__media {
    aspect-ratio: 5 / 4;
  }

  .exp-where-work__list {
    grid-auto-rows: minmax(4.125rem, auto);
  }

  .exp-where-work__button {
    min-height: 4.125rem;
  }

  .exp-where-work__name {
    font-size: 1.25rem;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-where-work__header,
  .exp-where-work__intro,
  .exp-where-work__media,
  .exp-where-work__item,
  .exp-where-work__image,
  .exp-where-work__number,
  .exp-where-work__name {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/**
 * Exponent — Who We Help
 * Common Triggers
 */


/* =========================================================
   DIVI 5 — WRAPPERS
   ========================================================= */

.exp-triggers-shell {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--exp-color-navy);
  background-color: var(--exp-color-white);

  overflow: hidden;
}

.exp-triggers-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-triggers-row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exp-triggers-code,
.exp-triggers-code.et_pb_module,
.exp-triggers-code .et_pb_code_inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   SECTION
   ========================================================= */

.exp-triggers {
  --exp-triggers-gutter:
    clamp(1.5rem, 6.25vw, 7.5rem);

  --exp-triggers-gap: 0.875rem;
  --exp-triggers-half-gap: 0.4375rem;
  --exp-triggers-duration: 52s;

  position: relative;
  width: 100%;
  margin: 0;

  padding:
    clamp(5.5rem, 8vw, 7.5rem)
    0
    clamp(8rem, 12vw, 11rem);

  color: var(--exp-color-navy);
  background-color: var(--exp-color-white);

  overflow: hidden;
}

.exp-triggers,
.exp-triggers *,
.exp-triggers *::before,
.exp-triggers *::after {
  box-sizing: border-box;
}


/* =========================================================
   SVG SPRITE
   ========================================================= */

.exp-triggers__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}


/* =========================================================
   CONTAINED HEADER
   ========================================================= */

.exp-triggers__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: calc(
    100% -
    var(--exp-triggers-gutter) -
    var(--exp-triggers-gutter)
  ) !important;

  max-width: 105rem !important;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: clamp(0.875rem, 1.1vw, 1.125rem);
}

.exp-triggers__label {
  margin: 0;
  padding: 0;
}

.exp-triggers__title {
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0;

  color: var(--exp-color-navy);
}

.exp-triggers__title span,
.exp-triggers__title em {
  display: block;
}

.exp-triggers__title em {
  color: inherit;

  font-family: var(--exp-font-editorial);
  font-weight: var(--exp-font-weight-regular);
  font-style: var(--exp-font-style-italic);
}


/* =========================================================
   MARQUEE VIEWPORT
   ========================================================= */

.exp-triggers__marquee {
  position: relative;

  width: 100%;
  margin-top: clamp(4.5rem, 6.25vw, 6rem);
  padding: 0;

  /*
   * Sin JavaScript queda disponible como scroll
   * horizontal manual.
   */
  overflow-x: auto;
  overflow-y: hidden;

  cursor: grab;

  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.exp-triggers__marquee::-webkit-scrollbar {
  display: none;
}

.exp-triggers__marquee:active {
  cursor: grabbing;
}

.exp-triggers__marquee:focus-visible {
  outline: 2px solid var(--exp-color-gold);
  outline-offset: -2px;
}


/*
 * JavaScript agrega .is-ready después de duplicar
 * correctamente el grupo original.
 */

.exp-triggers__marquee.is-ready {
  overflow: hidden;
  touch-action: pan-y;
}


/* =========================================================
   MARQUEE TRACK
   ========================================================= */

.exp-triggers__track {
  display: flex;
  align-items: stretch;

  width: max-content;
  min-width: 100%;

  margin: 0;
  padding: 0;

  gap: var(--exp-triggers-gap);

  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}


/*
 * La animación se encuentra creada pero pausada.
 * JavaScript controla .is-running y .is-paused.
 */

.exp-triggers__marquee.is-ready
  .exp-triggers__track {
  animation-name: exp-triggers-marquee;
  animation-duration: var(--exp-triggers-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.exp-triggers__marquee.is-ready.is-running:not(.is-paused)
  .exp-triggers__track {
  animation-play-state: running;
  will-change: transform;
}


/* Pause on desktop hover */

@media (hover: hover) and (pointer: fine) {
  .exp-triggers__marquee:hover
    .exp-triggers__track {
    animation-play-state: paused;
  }
}


/* Pause while focused */

.exp-triggers__marquee:focus
  .exp-triggers__track,
.exp-triggers__marquee:focus-within
  .exp-triggers__track {
  animation-play-state: paused;
}


/* =========================================================
   GROUP
   ========================================================= */

.exp-triggers__group {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;

  width: max-content;
  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;

  gap: var(--exp-triggers-gap);
}


/* =========================================================
   CARD
   ========================================================= */

.exp-triggers__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  flex: 0 0 clamp(17.5rem, 21vw, 22rem);

  width: clamp(17.5rem, 21vw, 22rem);
  min-height: 12rem;

  margin: 0;
  padding: clamp(1.5rem, 2vw, 2rem)
    clamp(1.25rem, 1.8vw, 1.5rem);

  color: var(--exp-color-navy);
  background-color: var(--exp-color-gray-light);

  border: 1px solid transparent;
  border-radius: 1.375rem;

  contain: layout paint;
}


/* =========================================================
   ICON
   ========================================================= */

.exp-triggers__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  color: var(--exp-color-navy);
}

.exp-triggers__icon svg {
  display: block;
  width: 2.125rem;
  height: 2.125rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.exp-triggers__text {
  width: 100%;
  max-width: 16rem;

  margin: 0;
  padding: 0;

  color: var(--exp-color-navy);

  font-family: var(--exp-font-primary);
  font-size: clamp(0.8125rem, 0.8vw, 0.9375rem);
  font-weight: var(--exp-font-weight-regular);
  line-height: 1.35;
  letter-spacing: -0.01em;
}


/* =========================================================
   LOOP ANIMATION
   ========================================================= */

/*
 * La pista contiene dos grupos exactamente iguales.
 * El desplazamiento equivale al ancho de un grupo
 * más el espacio existente entre ambas copias.
 */

@keyframes exp-triggers-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(
        -50% -
        var(--exp-triggers-half-gap)
      ),
      0,
      0
    );
  }
}


/* =========================================================
   SECTION ENTRANCE
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .exp-triggers.is-enhanced
    .exp-triggers__header {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .exp-triggers.is-enhanced
    .exp-triggers__marquee {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .exp-triggers.is-enhanced.is-visible
    .exp-triggers__header {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 600ms ease,
      transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .exp-triggers.is-enhanced.is-visible
    .exp-triggers__marquee {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
      opacity 700ms ease 100ms,
      transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
  }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 74.99rem) {
  .exp-triggers {
    padding-bottom: clamp(7rem, 10vw, 9rem);
  }

  .exp-triggers__card {
    flex-basis: clamp(17rem, 22vw, 19rem);

    width: clamp(17rem, 22vw, 19rem);
    min-height: 11.5rem;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 61.99rem) {
  .exp-triggers {
    padding:
      clamp(4.5rem, 9vw, 6rem)
      0
      clamp(6rem, 10vw, 8rem);
  }

  .exp-triggers__marquee {
    margin-top: clamp(3.5rem, 7vw, 4.5rem);
  }

  .exp-triggers__card {
    flex-basis: 18rem;

    width: 18rem;
    min-height: 11.25rem;

    padding: 1.5rem 1.25rem;
  }

  .exp-triggers__text {
    font-size: 0.875rem;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {
  .exp-triggers {
    --exp-triggers-gutter:
      clamp(1.25rem, 6vw, 2rem);

    --exp-triggers-gap: 0.75rem;
    --exp-triggers-half-gap: 0.375rem;

    padding:
      clamp(4rem, 14vw, 5rem)
      0
      clamp(5rem, 16vw, 7rem);
  }

  .exp-triggers__header {
    gap: 0.75rem;
  }

  .exp-triggers__title {
    max-width: 21rem;
  }

  .exp-triggers__title span,
  .exp-triggers__title em {
    display: inline;
  }

  .exp-triggers__title span::after {
    content: " ";
  }

  .exp-triggers__marquee {
    margin-top: 3rem;
  }

  .exp-triggers__card {
    flex-basis: clamp(16rem, 78vw, 20rem);

    width: clamp(16rem, 78vw, 20rem);
    min-height: 10.75rem;

    padding: 1.375rem 1.125rem;

    border-radius: 1.125rem;
  }

  .exp-triggers__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .exp-triggers__icon svg {
    width: 1.875rem;
    height: 1.875rem;
  }

  .exp-triggers__text {
    max-width: 15rem;

    font-size: 0.875rem;
    line-height: 1.4;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-triggers__marquee,
  .exp-triggers__marquee.is-ready {
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: inline mandatory;
    touch-action: pan-x;
  }

  .exp-triggers__track,
  .exp-triggers__marquee.is-ready
    .exp-triggers__track {
    animation: none !important;
    transform: none !important;
  }

  .exp-triggers__card {
    scroll-snap-align: start;
  }

  .exp-triggers__header,
  .exp-triggers__marquee {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   EXPONENT — THE PROCESS
   How We Work
   ========================================================================== */

.exp-process {
  --exp-process-container: var(--exp-container-max, 105rem);
  --exp-process-gutter: clamp(1.25rem, 6.25vw, 7.5rem);
  --exp-process-marker-size: 3.25rem;
  --exp-process-marker-gap: clamp(2rem, 3.2vw, 3.75rem);
  --exp-process-content-offset:
    calc(
      var(--exp-process-marker-size) +
      var(--exp-process-marker-gap)
    );

  position: relative;
  width: 100%;
  overflow: clip;
  padding-block: clamp(6rem, 9vw, 10rem);
  color: var(--exp-color-navy, #04024d);
  background-color: var(--exp-color-gray-light, #edf1f3);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
}

.exp-process,
.exp-process *,
.exp-process *::before,
.exp-process *::after {
  box-sizing: border-box;
}

/* Divi resets limited to this component */

.exp-process h2,
.exp-process h3,
.exp-process p,
.exp-process ol,
.exp-process li,
.exp-process figure {
  margin: 0;
  padding: 0;
}

.exp-process img {
  max-width: 100%;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.exp-process__container {
  display: grid;
  grid-template-columns:
    minmax(17rem, 0.62fr)
    minmax(0, 1.38fr);
  align-items: start;
  column-gap: clamp(5rem, 10vw, 12rem);

  width: calc(
    100% -
    var(--exp-process-gutter) -
    var(--exp-process-gutter)
  );
  max-width: var(--exp-process-container);
  margin-inline: auto;
}

/* ==========================================================================
   INTRODUCTION
   ========================================================================== */

.exp-process__intro {
  position: sticky;
  top: clamp(6rem, 11vh, 9rem);
  align-self: start;
  max-width: 29rem;
}

/* Small global section label */

.exp-process__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  margin-bottom: clamp(1.25rem, 1.8vw, 1.75rem);

  color: var(--exp-color-navy, #04024d);
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.exp-process__eyebrow::before {
  flex: 0 0 auto;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background-color: var(--exp-color-gold, #d0a161);
  content: "";
}

/* Main section heading */

.exp-process__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.18em;

  max-width: 12ch;

  color: var(--exp-color-navy, #04024d);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: clamp(2.1rem, 3.15vw, 3.75rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 2;
  letter-spacing: -0.035em;
}

.exp-process__title em {
  color: inherit;
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    serif
  );
  font-size: 1.06em;
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  letter-spacing: -0.025em;
}

.exp-process__title span {
  font-family: inherit;
  font-style: normal;
}

.exp-process__description {
  max-width: 40ch;
  margin-top: clamp(1.75rem, 2.5vw, 2.75rem);

  color: rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.78);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.exp-process__timeline {
  position: relative;
  min-width: 0;
}

/* Timeline base */

.exp-process__rail {
  position: absolute;
  z-index: 0;
  top: calc(var(--exp-process-marker-size) / 2);
  bottom: calc(var(--exp-process-marker-size) / 2);
  left: calc(var(--exp-process-marker-size) / 2);

  width: 1px;
  overflow: hidden;

  background-color: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.14
  );
  pointer-events: none;
}

/* Timeline scroll progress */

.exp-process__rail-progress {
  position: absolute;
  inset: 0;
  display: block;

  background-color: var(--exp-color-gold, #d0a161);
  transform: scaleY(var(--exp-process-progress, 0));
  transform-origin: center top;
  will-change: transform;
}

/* Steps list */

.exp-process__steps {
  position: relative;
  z-index: 1;

  list-style: none;
  padding-left: var(--exp-process-content-offset);
}

/* Individual step */

.exp-process__step {
  position: relative;
  min-width: 0;
  scroll-margin-top: 24vh;
}

/* Separator between steps */

.exp-process__step:not(:last-child) .exp-process__step-content {
  margin-bottom: clamp(2.75rem, 4.5vw, 4.75rem);
  padding-bottom: clamp(2.75rem, 4.5vw, 4.75rem);
  border-bottom: 1px solid
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.1);
}

/* ==========================================================================
   STEP MARKER
   ========================================================================== */

.exp-process__marker {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(-1 * var(--exp-process-content-offset));

  display: grid;
  place-items: center;

  width: var(--exp-process-marker-size);
  height: var(--exp-process-marker-size);
  border: 1px solid
    rgba(var(--exp-color-gold-rgb, 208, 161, 97), 0.55);
  border-radius: 50%;

  color: var(--exp-color-navy, #04024d);
  background-color: var(--exp-color-gray-light, #edf1f3);

  font-size: clamp(0.75rem, 0.75vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1;

  transition:
    color 320ms ease,
    border-color 320ms ease,
    background-color 320ms ease,
    box-shadow 320ms ease,
    transform 320ms ease;
}

/* Reached markers */

.exp-process__step.is-revealed .exp-process__marker {
  border-color: var(--exp-color-gold, #d0a161);
  background-color: var(--exp-color-gold, #d0a161);
}

/* Step currently being viewed */

.exp-process__step.is-active .exp-process__marker {
  border-color: var(--exp-color-gold, #d0a161);
  background-color: var(--exp-color-gold, #d0a161);
  box-shadow:
    0 0 0 0.45rem
    rgba(var(--exp-color-gold-rgb, 208, 161, 97), 0.13);
  transform: scale(1.055);
}

/* ==========================================================================
   STEP TYPOGRAPHY
   ========================================================================== */

.exp-process__step-content {
  min-width: 0;
  opacity: 0.72;

  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.exp-process__step.is-revealed .exp-process__step-content,
.exp-process__step.is-active .exp-process__step-content {
  opacity: 1;
}

.exp-process__step-label {
  margin-bottom: 0.75rem;

  color: rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.43);
  font-size: clamp(0.6875rem, 0.72vw, 0.8125rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exp-process__step-title {
  max-width: 26ch;

  color: var(--exp-color-navy, #04024d);
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    serif
  );
  font-size: clamp(1.75rem, 2.15vw, 2.5rem);
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  line-height: 2;
  letter-spacing: -0.025em;
}

.exp-process__step-description {
  max-width: 58ch;
  margin-top: clamp(1rem, 1.35vw, 1.375rem);

  color: rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.76);
  font-size: clamp(0.9375rem, 0.95vw, 1.0625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.48;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   COLLAPSIBLE IMAGE
   ========================================================================== */

.exp-process__media {
  display: grid;
  grid-template-rows: 0fr;

  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;

  transition:
    grid-template-rows 700ms
      cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 700ms
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    visibility 0s linear 700ms;
}

.exp-process__media-inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(1.25rem, 1.8vw, 2rem);
  background-color: rgba(
    var(--exp-color-blue-gray-rgb, 165, 186, 194),
    0.22
  );
}

/* Revealed image container */

.exp-process__step.is-revealed .exp-process__media {
  grid-template-rows: 1fr;
  margin-top: clamp(2rem, 3vw, 3.5rem);
  opacity: 1;
  visibility: visible;

  transition:
    grid-template-rows 700ms
      cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 700ms
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity 500ms ease 100ms,
    visibility 0s linear 0s;
}

.exp-process__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;

  opacity: 0;
  filter: blur(10px);
  transform: scale(1.025);

  transition:
    opacity 650ms ease,
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Added by JavaScript when the image finishes loading */

.exp-process__image.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {
  .exp-process {
    --exp-process-marker-size: 3rem;
    --exp-process-marker-gap: 2rem;

    padding-block: clamp(5.5rem, 10vw, 7.5rem);
  }

  .exp-process__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(4rem, 8vw, 6rem);
  }

  .exp-process__intro {
    position: relative;
    top: auto;
    max-width: 39rem;
  }

  .exp-process__title {
    max-width: none;
  }

  .exp-process__description {
    max-width: 39ch;
  }

  .exp-process__timeline {
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .exp-process {
    --exp-process-gutter: clamp(1.25rem, 5.5vw, 1.75rem);
    --exp-process-marker-size: 2.5rem;
    --exp-process-marker-gap: 1.25rem;

    padding-block: clamp(4.75rem, 16vw, 6.5rem);
  }

  .exp-process__container {
    row-gap: 3.75rem;
  }

  .exp-process__title {
    display: block;
    max-width: 11ch;
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .exp-process__title em,
  .exp-process__title span {
    display: inline;
  }

  .exp-process__description {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
  }

  .exp-process__step:not(:last-child) .exp-process__step-content {
    margin-bottom: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .exp-process__marker {
    font-size: 0.6875rem;
  }

  .exp-process__step-label {
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
  }

  .exp-process__step-title {
    max-width: 18ch;
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .exp-process__step-description {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .exp-process__step.is-revealed .exp-process__media {
    margin-top: 1.75rem;
  }

  .exp-process__media-inner {
    border-radius: 1.25rem;
  }

  .exp-process__image {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {
  .exp-process {
    --exp-process-marker-size: 2.25rem;
    --exp-process-marker-gap: 1rem;
  }

  .exp-process__eyebrow {
    margin-bottom: 1rem;
  }

  .exp-process__container {
    row-gap: 3.25rem;
  }

  .exp-process__step:not(:last-child) .exp-process__step-content {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .exp-process__rail-progress,
  .exp-process__marker,
  .exp-process__step-content,
  .exp-process__media,
  .exp-process__image {
    transition: none !important;
  }

  .exp-process__image {
    filter: none;
    transform: none;
  }
}

/* ==========================================================================
   THE PROCESS — DIVI 5 TIMELINE ALIGNMENT FIX
   ========================================================================== */

.exp-process__timeline {
  position: relative;
  isolation: isolate;
}

/*
 * Divi aplica sus propios estilos a ol.
 * Recuperamos el espacio reservado para el rail y los marcadores.
 */
.exp-process ol.exp-process__steps {
  position: relative;
  z-index: 1;

  margin: 0 !important;
  padding:
    0
    0
    0
    var(--exp-process-content-offset) !important;

  list-style: none !important;
}

/*
 * Elimina completamente la numeración automática 1, 2, 3...
 * que Divi vuelve a aplicar a los elementos <li>.
 */
.exp-process
  ol.exp-process__steps
  > li.exp-process__step {
  position: relative;

  margin: 0;
  padding-left: 0;

  list-style: none !important;
}

.exp-process
  ol.exp-process__steps
  > li.exp-process__step::marker {
  content: "";
  font-size: 0;
}

/*
 * El rail permanece exclusivamente dentro de la columna
 * reservada para los marcadores.
 */
.exp-process__rail {
  z-index: 0;
  left: calc(
    var(--exp-process-marker-size) / 2
  );

  pointer-events: none;
}

/*
 * El centro del marcador coincide exactamente
 * con la posición del rail.
 */
.exp-process__marker {
  z-index: 3;
  left: calc(
    -1 * var(--exp-process-content-offset)
  );
}

/*
 * Textos e imágenes quedan en una capa superior,
 * sin que la línea pueda atravesarlos.
 */
.exp-process__step-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/*
 * Las imágenes mantienen su propio contexto visual.
 */
.exp-process__media,
.exp-process__media-inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   THE PROCESS — 50 / 50 COLUMNS
   ========================================================================== */

@media (min-width: 981px) {
  .exp-process__container {
    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr);

    column-gap: clamp(3.5rem, 6vw, 7rem);
  }

  .exp-process__intro {
    max-width: none;
  }

  .exp-process__title {
    max-width: none;
  }
}

/* ==========================================================================
   EXPONENT — COORDINATION
   How We Work
   ========================================================================== */

.exp-coordination {
  --exp-coordination-container:
    var(--exp-container-max, 105rem);

  --exp-coordination-gutter:
    clamp(1.25rem, 6.25vw, 7.5rem);

  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;

  padding-block: clamp(6rem, 8vw, 10rem);

  color: var(--exp-color-white, #ffffff);
  background-color: var(--exp-color-navy, #04024d);

  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
}

.exp-coordination,
.exp-coordination *,
.exp-coordination *::before,
.exp-coordination *::after {
  box-sizing: border-box;
}

/* Scoped Divi reset */

.exp-coordination :where(
  h2,
  p,
  figure
) {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.exp-coordination__container {
  display: grid;
  grid-template-columns:
    minmax(0, 45fr)
    minmax(0, 55fr);
  align-items: start;
  column-gap: clamp(4rem, 8vw, 10rem);

  width: calc(
    100% -
    var(--exp-coordination-gutter) -
    var(--exp-coordination-gutter)
  );

  max-width: var(--exp-coordination-container);
  margin-inline: auto;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.exp-coordination__content {
  min-width: 0;
  padding-top: clamp(0rem, 0.4vw, 0.5rem);
}

/* Eyebrow */

.exp-coordination__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  margin-bottom: clamp(1.5rem, 2vw, 2rem);

  color: var(--exp-color-white, #ffffff);

  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.exp-coordination__eyebrow::before {
  flex: 0 0 auto;

  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;

  background-color: var(--exp-color-gold, #d0a161);

  content: "";
}

/* Main heading */

.exp-coordination__title {
  max-width: 20ch;

  color: var(--exp-color-white, #ffffff);

  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );

  font-size: clamp(2.25rem, 2.7vw, 3.5rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.exp-coordination__title span,
.exp-coordination__title em {
  display: block;
}

.exp-coordination__title span {
  font-family: inherit;
  font-weight: var(--exp-font-weight-light, 300);
  font-style: normal;
}

.exp-coordination__title em {
  margin-top: 0.08em;

  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif
  );

  font-size: 1.04em;
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  letter-spacing: -0.025em;
}

/* Body copy */

.exp-coordination__body {
  display: grid;
  gap: clamp(1.5rem, 2vw, 2rem);

  max-width: 36rem;
  margin-top: clamp(2.75rem, 4vw, 4rem);
}

.exp-coordination__body p {
  color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.78
  );

  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.48;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   IMAGE
   ========================================================================== */

.exp-coordination__media {
  position: relative;
  min-width: 0;
  width: 100%;
}

.exp-coordination__media-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08 / 1;
  overflow: hidden;

  border-radius: clamp(1.5rem, 2vw, 2.25rem);

  background-color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.84
  );

  isolation: isolate;
}

.exp-coordination__image {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;
  filter: blur(10px);
  transform: scale(1.025);

  transition:
    opacity 650ms ease,
    filter 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Added by JavaScript after image load */

.exp-coordination__image.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Subtle color integration */

.exp-coordination__overlay {
  position: absolute;
  z-index: 2;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0) 55%,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.1) 100%
    );

  pointer-events: none;
}

/* ==========================================================================
   ENTRANCE ANIMATION
   Progressive enhancement: content remains visible without JavaScript
   ========================================================================== */

.exp-coordination.is-enhanced
.exp-coordination__eyebrow,
.exp-coordination.is-enhanced
.exp-coordination__title,
.exp-coordination.is-enhanced
.exp-coordination__body {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

.exp-coordination.is-enhanced
.exp-coordination__media {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0) scale(0.99);
}

/* Visible state */

.exp-coordination.is-enhanced.is-visible
.exp-coordination__eyebrow,
.exp-coordination.is-enhanced.is-visible
.exp-coordination__title,
.exp-coordination.is-enhanced.is-visible
.exp-coordination__body,
.exp-coordination.is-enhanced.is-visible
.exp-coordination__media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Individual timing */

.exp-coordination.is-enhanced
.exp-coordination__eyebrow {
  transition:
    opacity 500ms ease,
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-coordination.is-enhanced
.exp-coordination__title {
  transition:
    opacity 600ms ease 80ms,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}

.exp-coordination.is-enhanced
.exp-coordination__body {
  transition:
    opacity 600ms ease 160ms,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}

.exp-coordination.is-enhanced
.exp-coordination__media {
  transition:
    opacity 700ms ease 100ms,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {
  .exp-coordination {
    min-height: auto;
    padding-block: clamp(5.5rem, 11vw, 8rem);
  }

  .exp-coordination__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(4rem, 8vw, 6rem);
  }

  .exp-coordination__content {
    max-width: 44rem;
    padding-top: 0;
  }

  .exp-coordination__title {
    max-width: 15ch;
  }

  .exp-coordination__body {
    max-width: 40rem;
  }

  .exp-coordination__media {
    width: 100%;
  }

  .exp-coordination__media-inner {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .exp-coordination {
    --exp-coordination-gutter:
      clamp(1.25rem, 5.5vw, 1.75rem);

    padding-block: clamp(4.75rem, 16vw, 6.5rem);
  }

  .exp-coordination__container {
    row-gap: 3.5rem;
  }

  .exp-coordination__eyebrow {
    margin-bottom: 1.25rem;
  }

  .exp-coordination__title {
    max-width: none;

    font-size: clamp(2rem, 9.5vw, 3rem);
    line-height: 1.04;
  }

  .exp-coordination__title em {
    margin-top: 0.12em;
  }

  .exp-coordination__body {
    gap: 1.5rem;
    margin-top: 2.25rem;
  }

  .exp-coordination__body p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .exp-coordination__media-inner {
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
  }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {
  .exp-coordination__container {
    row-gap: 3rem;
  }

  .exp-coordination__title {
    font-size: clamp(2rem, 10vw, 2.625rem);
  }

  .exp-coordination__media-inner {
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .exp-coordination.is-enhanced
  .exp-coordination__eyebrow,
  .exp-coordination.is-enhanced
  .exp-coordination__title,
  .exp-coordination.is-enhanced
  .exp-coordination__body,
  .exp-coordination.is-enhanced
  .exp-coordination__media,
  .exp-coordination__image {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   EXPONENT — OUR ROLE
   About Us
   ========================================================================== */

.exp-role {
  --exp-role-container:
    var(--exp-container-max, 105rem);

  --exp-role-gutter:
    clamp(1.25rem, 6.25vw, 7.5rem);

  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;

  padding-block: clamp(6rem, 8vw, 10rem);

  color: var(--exp-color-navy, #04024d);
  background-color: var(--exp-color-gray-light, #edf1f3);

  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
}

.exp-role,
.exp-role *,
.exp-role *::before,
.exp-role *::after {
  box-sizing: border-box;
}

/* Scoped Divi reset */

.exp-role :where(
  h2,
  p,
  ul,
  li,
  svg
) {
  margin: 0;
  padding: 0;
}

.exp-role ul.exp-role__nodes,
.exp-role ul.exp-role__nodes > li {
  list-style: none !important;
}

.exp-role ul.exp-role__nodes > li::marker {
  content: "";
  font-size: 0;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.exp-role__container {
  display: grid;
  grid-template-columns:
    minmax(0, 45fr)
    minmax(0, 55fr);
  align-items: center;
  column-gap: clamp(4rem, 8vw, 10rem);

  width: calc(
    100% -
    var(--exp-role-gutter) -
    var(--exp-role-gutter)
  );

  max-width: var(--exp-role-container);
  margin-inline: auto;
}

/* ==========================================================================
   EDITORIAL CONTENT
   ========================================================================== */

.exp-role__content {
  min-width: 0;
}

/* Eyebrow */

.exp-role__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  margin-bottom: clamp(1.5rem, 2vw, 2rem);

  color: var(--exp-color-navy, #04024d);

  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.exp-role__eyebrow::before {
  flex: 0 0 auto;

  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;

  background-color: var(--exp-color-gold, #d0a161);

  content: "";
}

/* Main heading */

.exp-role__title {
  max-width: 44rem;

  color: var(--exp-color-navy, #04024d);

  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );

  font-size: clamp(2.25rem, 2.45vw, 3.125rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.exp-role__title span,
.exp-role__title em {
  display: inline;
}

.exp-role__title span {
  font-family: inherit;
  font-weight: var(--exp-font-weight-light, 300);
  font-style: normal;
}

.exp-role__title em {
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif
  );

  font-size: 1.04em;
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  letter-spacing: -0.025em;
}

/* Introductory body */

.exp-role__body {
  display: grid;
  gap: clamp(1.5rem, 2vw, 2rem);

  max-width: 37rem;
  margin-top: clamp(2.5rem, 3.5vw, 3.75rem);
}

.exp-role__body p {
  color: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.8
  );

  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.48;
  letter-spacing: -0.01em;
}

/* Emphasized statement */

.exp-role__statement {
  max-width: 36rem;
  margin-top: clamp(3rem, 4.25vw, 4.5rem);
  padding-block: clamp(0.875rem, 1.2vw, 1.25rem);
  padding-left: clamp(1.25rem, 1.8vw, 1.75rem);

  border-left: 2px solid
    var(--exp-color-gold, #d0a161);
}

.exp-role__statement p {
  color: var(--exp-color-navy, #04024d);

  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   DIAGRAM
   ========================================================================== */

.exp-role__diagram {
  min-width: 0;
  width: 100%;
}

.exp-role__board {
  --exp-role-node-size:
    clamp(5.5rem, 7vw, 8.5rem);

  --exp-role-center-size:
    clamp(5.75rem, 7.2vw, 8.5rem);

  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
  overflow: hidden;

  border: 1px solid
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.18);
  border-radius: clamp(1.5rem, 2vw, 2.25rem);

  background-color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.08
  );

  isolation: isolate;
}

/* ==========================================================================
   SVG NETWORK
   ========================================================================== */

.exp-role__network {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
  pointer-events: none;
}

.exp-role__rings {
  transform-box: view-box;
  transform-origin: center;
  transform: scaleX(1.12);
}

.exp-role__ring {
  fill: none;
  stroke: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.15
  );
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.exp-role__ring--outer {
  stroke: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.24
  );
}

.exp-role__ring--middle {
  stroke: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.17
  );
}

.exp-role__ring--inner {
  stroke: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.1
  );
}

/* Connector positioning is slightly expanded to meet the nodes */

.exp-role__spokes {
  transform-box: view-box;
  transform-origin: center;
  transform: scale(1.12, 1.18);
}

.exp-role__spoke {
  fill: none;
  stroke: rgba(
    var(--exp-color-navy-rgb, 4, 2, 77),
    0.84
  );
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   CENTRAL RELATIONSHIP
   ========================================================================== */

.exp-role__center {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);
}

.exp-role__owner,
.exp-role__exponent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: var(--exp-role-center-size);
  aspect-ratio: 1;
  border-radius: 50%;

  text-align: center;
}

.exp-role__owner {
  position: relative;
  z-index: 1;

  color: var(--exp-color-navy, #04024d);
  background-color: var(--exp-color-gold, #d0a161);

  font-size: clamp(0.8125rem, 0.95vw, 1.0625rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.08;
}

.exp-role__owner span {
  display: block;
}

.exp-role__exponent {
  position: relative;
  z-index: 2;

  margin-left: clamp(-1rem, -0.8vw, -0.625rem);

  color: var(--exp-color-white, #ffffff);
  background-color: var(--exp-color-navy, #04024d);
}

.exp-role__brand {
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    serif
  );

  font-size: clamp(1.25rem, 1.55vw, 1.875rem);
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  line-height: 1;
}

.exp-role__exponent sup {
  position: absolute;
  top: 33%;
  right: 17%;

  color: var(--exp-color-gold, #d0a161);

  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );

  font-size: clamp(0.5rem, 0.55vw, 0.6875rem);
  font-style: normal;
  line-height: 1;
}

.exp-role__connector {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;

  display: grid;
  place-items: center;

  width: clamp(1.875rem, 2.25vw, 2.5rem);
  aspect-ratio: 1;
  border-radius: 50%;

  color: var(--exp-color-white, #ffffff);
  background-color: #484675;

  font-size: clamp(1.125rem, 1.3vw, 1.5rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1;

  transform: translate(-50%, -50%);
}

/* ==========================================================================
   EXTERNAL NODES
   ========================================================================== */

.exp-role ul.exp-role__nodes {
  position: absolute;
  z-index: 3;
  inset: 0;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;
}

.exp-role__node {
  position: absolute;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.55vw, 0.625rem);

  width: var(--exp-role-node-size);
  aspect-ratio: 1;
  border: 1px solid
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.28);
  border-radius: 50%;

  color: var(--exp-color-navy, #04024d);
  background-color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.4
  );

  text-align: center;
  transform: translate(-50%, -50%);

  pointer-events: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Node positions */

.exp-role__node--cpa {
  top: 25%;
  left: 32%;
}

.exp-role__node--attorney {
  top: 25%;
  left: 68%;
}

.exp-role__node--wealth {
  top: 50%;
  left: 24%;
}

.exp-role__node--cfo {
  top: 50%;
  left: 76%;
}

.exp-role__node--leadership {
  top: 75%;
  left: 32%;
}

.exp-role__node--family {
  top: 75%;
  left: 68%;
}

/* Icons */

.exp-role__icon {
  display: block;

  width: clamp(2rem, 2.7vw, 3rem);
  height: clamp(2rem, 2.7vw, 3rem);

  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Labels */

.exp-role__node-label {
  color: inherit;

  font-size: clamp(0.75rem, 0.9vw, 1rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.exp-role__node-label span {
  display: block;
}

/* ==========================================================================
   ENTRANCE ANIMATION
   Content remains visible if JavaScript is unavailable
   ========================================================================== */

.exp-role.is-enhanced
.exp-role__eyebrow,
.exp-role.is-enhanced
.exp-role__title,
.exp-role.is-enhanced
.exp-role__body,
.exp-role.is-enhanced
.exp-role__statement {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

.exp-role.is-enhanced
.exp-role__diagram {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.exp-role.is-enhanced
.exp-role__center {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(0.92);
}

.exp-role.is-enhanced
.exp-role__node {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(0.9);
}

.exp-role.is-enhanced
.exp-role__ring {
  opacity: 0;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
}

.exp-role.is-enhanced
.exp-role__spoke {
  opacity: 0;
  stroke-dashoffset: 80;
}

/* Visible states */

.exp-role.is-enhanced.is-visible
.exp-role__eyebrow,
.exp-role.is-enhanced.is-visible
.exp-role__title,
.exp-role.is-enhanced.is-visible
.exp-role__body,
.exp-role.is-enhanced.is-visible
.exp-role__statement {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.exp-role.is-enhanced.is-visible
.exp-role__diagram {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.exp-role.is-enhanced.is-visible
.exp-role__center {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    scale(1);
}

.exp-role.is-enhanced.is-visible
.exp-role__node {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    scale(1);
}

.exp-role.is-enhanced.is-visible
.exp-role__ring {
  opacity: 1;
  stroke-dashoffset: 0;
}

.exp-role.is-enhanced.is-visible
.exp-role__spoke {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* Editorial animation timing */

.exp-role.is-enhanced
.exp-role__eyebrow {
  transition:
    opacity 450ms ease,
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-role.is-enhanced
.exp-role__title {
  transition:
    opacity 550ms ease 70ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 70ms;
}

.exp-role.is-enhanced
.exp-role__body {
  transition:
    opacity 550ms ease 140ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}

.exp-role.is-enhanced
.exp-role__statement {
  transition:
    opacity 550ms ease 210ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 210ms;
}

/* Diagram animation timing */

.exp-role.is-enhanced
.exp-role__diagram {
  transition:
    opacity 600ms ease 80ms,
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}

.exp-role.is-enhanced
.exp-role__ring {
  transition:
    opacity 450ms ease 150ms,
    stroke-dashoffset 1300ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}

.exp-role.is-enhanced
.exp-role__spoke {
  transition:
    opacity 400ms ease 400ms,
    stroke-dashoffset 850ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.exp-role.is-enhanced
.exp-role__center {
  transition:
    opacity 500ms ease 300ms,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.exp-role.is-enhanced
.exp-role__node {
  transition:
    opacity 450ms ease,
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-role.is-enhanced
.exp-role__node--cpa {
  transition-delay: 480ms;
}

.exp-role.is-enhanced
.exp-role__node--attorney {
  transition-delay: 540ms;
}

.exp-role.is-enhanced
.exp-role__node--wealth {
  transition-delay: 600ms;
}

.exp-role.is-enhanced
.exp-role__node--cfo {
  transition-delay: 660ms;
}

.exp-role.is-enhanced
.exp-role__node--leadership {
  transition-delay: 720ms;
}

.exp-role.is-enhanced
.exp-role__node--family {
  transition-delay: 780ms;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {
  .exp-role {
    min-height: auto;
    padding-block: clamp(5.5rem, 11vw, 8rem);
  }

  .exp-role__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(4rem, 8vw, 6rem);
  }

  .exp-role__content {
    max-width: 46rem;
  }

  .exp-role__title {
    max-width: 42rem;
  }

  .exp-role__body {
    max-width: 40rem;
  }

  .exp-role__statement {
    max-width: 39rem;
  }

  .exp-role__diagram {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
  }

  .exp-role__board {
    --exp-role-node-size:
      clamp(6rem, 15vw, 8.5rem);

    --exp-role-center-size:
      clamp(6.25rem, 15vw, 8.5rem);
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {
  .exp-role {
    --exp-role-gutter:
      clamp(1.25rem, 5.5vw, 1.75rem);

    padding-block: clamp(4.75rem, 16vw, 6.5rem);
  }

  .exp-role__container {
    row-gap: 3.5rem;
  }

  .exp-role__eyebrow {
    margin-bottom: 1.25rem;
  }

  .exp-role__title {
    max-width: none;

    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.04;
  }

  .exp-role__title span,
  .exp-role__title em {
    display: block;
  }

  .exp-role__title em {
    margin-top: 0.08em;
  }

  .exp-role__body {
    gap: 1.375rem;
    margin-top: 2.25rem;
  }

  .exp-role__body p,
  .exp-role__statement p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .exp-role__statement {
    margin-top: 2.75rem;
    padding-block: 0.75rem;
    padding-left: 1.25rem;
  }

  /* Mobile diagram becomes a readable grid */

  .exp-role__board {
    display: flex;
    flex-direction: column;

    width: 100%;
    aspect-ratio: auto;

    padding:
      clamp(2rem, 8vw, 3rem)
      clamp(1rem, 4vw, 1.5rem)
      clamp(1rem, 4vw, 1.5rem);

    border-radius: 1.5rem;
  }

  .exp-role__network {
    display: none;
  }

  .exp-role__center {
    position: relative;
    top: auto;
    left: auto;

    align-self: center;

    margin-bottom: clamp(2rem, 8vw, 3rem);

    transform: none;
  }

  .exp-role__owner,
  .exp-role__exponent {
    width: clamp(6rem, 27vw, 7.25rem);
  }

  .exp-role__owner {
    font-size: 0.8125rem;
  }

  .exp-role__brand {
    font-size: 1.375rem;
  }

  .exp-role__exponent sup {
    font-size: 0.5rem;
  }

  .exp-role__connector {
    width: 2rem;
    font-size: 1.125rem;
  }

  .exp-role ul.exp-role__nodes {
    position: relative;
    inset: auto;

    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 0.875rem;

    width: 100%;
  }

  .exp-role__node {
    position: relative;
    top: auto;
    left: auto;

    width: 100%;
    min-height: 8.75rem;
    aspect-ratio: auto;

    padding: 1rem 0.625rem;

    border-radius: 1.25rem;

    transform: none;
  }

  .exp-role__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .exp-role__node-label {
    font-size: 0.8125rem;
    line-height: 1.08;
  }

  /* Mobile animation coordinates */

  .exp-role.is-enhanced
  .exp-role__center {
    opacity: 0;
    transform:
      translate3d(0, 0.75rem, 0)
      scale(0.96);
  }

  .exp-role.is-enhanced
  .exp-role__node {
    opacity: 0;
    transform:
      translate3d(0, 0.75rem, 0)
      scale(0.97);
  }

  .exp-role.is-enhanced.is-visible
  .exp-role__center,
  .exp-role.is-enhanced.is-visible
  .exp-role__node {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {
  .exp-role ul.exp-role__nodes {
    gap: 0.75rem;
  }

  .exp-role__node {
    min-height: 8rem;
    padding-inline: 0.5rem;
  }

  .exp-role__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .exp-role__node-label {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .exp-role.is-enhanced
  .exp-role__eyebrow,
  .exp-role.is-enhanced
  .exp-role__title,
  .exp-role.is-enhanced
  .exp-role__body,
  .exp-role.is-enhanced
  .exp-role__statement,
  .exp-role.is-enhanced
  .exp-role__diagram,
  .exp-role.is-enhanced
  .exp-role__center,
  .exp-role.is-enhanced
  .exp-role__node,
  .exp-role.is-enhanced
  .exp-role__ring,
  .exp-role.is-enhanced
  .exp-role__spoke {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: none;
  }

  .exp-role.is-enhanced
  .exp-role__eyebrow,
  .exp-role.is-enhanced
  .exp-role__title,
  .exp-role.is-enhanced
  .exp-role__body,
  .exp-role.is-enhanced
  .exp-role__statement,
  .exp-role.is-enhanced
  .exp-role__diagram {
    transform: none;
  }

  .exp-role.is-enhanced
  .exp-role__center,
  .exp-role.is-enhanced
  .exp-role__node {
    transform: translate(-50%, -50%);
  }
}

@media
  (prefers-reduced-motion: reduce) and
  (max-width: 640px) {
  .exp-role.is-enhanced
  .exp-role__center,
  .exp-role.is-enhanced
  .exp-role__node {
    transform: none;
  }
}

/* =========================================================
   ABOUT US — OUR APPROACH
   ========================================================= */

.exp-approach {
  --exp-approach-border:
    rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.18);

  --exp-approach-border-active:
    rgba(var(--exp-color-gold-rgb, 208, 161, 97), 0.55);

  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--exp-color-navy, #04024d);
  color: var(--exp-color-white, #ffffff);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  padding:
    clamp(6rem, 7vw, 7.5rem)
    clamp(1.25rem, 6.25vw, 7.5rem)
    clamp(7rem, 10vw, 11rem);
}

/* Divi resets */

.exp-approach *,
.exp-approach *::before,
.exp-approach *::after {
  box-sizing: border-box;
}

.exp-approach h2,
.exp-approach p,
.exp-approach figure {
  margin: 0;
  padding: 0;
}

.exp-approach img {
  display: block;
  width: 100%;
  max-width: none;
}

/* Main container */

.exp-approach__container {
  width: min(100%, 105rem);
  margin-inline: auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.exp-approach__header {
  max-width: 48rem;
  margin-bottom: clamp(5.5rem, 8vw, 8.5rem);
}

/* Small section title */

.exp-approach__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: clamp(1.25rem, 1.8vw, 1.75rem);
  color: rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.76);
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.exp-approach__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--exp-color-gold, #d0a161);
}

/* Main title */

.exp-approach__title {
  max-width: 46rem;
  color: var(--exp-color-white, #ffffff);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: clamp(2.25rem, 2.6vw, 3.125rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.exp-approach__title span,
.exp-approach__title em {
  display: block;
}

.exp-approach__title em {
  margin-top: 0.1em;
  color: var(--exp-color-white, #ffffff);
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    serif
  );
  font-size: 1.04em;
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  line-height: 1.03;
  letter-spacing: -0.025em;
}

/* =========================================================
   GRID
   ========================================================= */

.exp-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.625rem);
  width: 100%;
}

/* =========================================================
   CARDS
   ========================================================= */

.exp-approach__card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: clamp(20rem, 26vw, 24rem);
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--exp-approach-border);
  border-radius: clamp(1.25rem, 1.8vw, 1.75rem);
  background-color: transparent;
  color: var(--exp-color-white, #ffffff);
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  translate: 0 0;
  transition:
    translate 450ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease,
    box-shadow 450ms ease;
}

/* Number */

.exp-approach__number {
  position: absolute;
  z-index: 2;
  top: clamp(1.75rem, 2.5vw, 2.5rem);
  left: clamp(1.75rem, 2.5vw, 2.5rem);
  display: block;
  color: var(--exp-color-gold, #d0a161);
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1;
  letter-spacing: -0.02em;
  transition:
    opacity 320ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Text area */

.exp-approach__content {
  position: absolute;
  z-index: 2;
  right: clamp(1.75rem, 2.5vw, 2.5rem);
  bottom: clamp(1.75rem, 2.5vw, 2.5rem);
  left: clamp(1.75rem, 2.5vw, 2.5rem);
  display: block;
  max-width: 29rem;
  transition:
    opacity 300ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-approach__card-title {
  display: block;
  margin-bottom: clamp(0.875rem, 1.2vw, 1.125rem);
  color: var(--exp-color-white, #ffffff);
  font-size: clamp(1.125rem, 1.45vw, 1.625rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.exp-approach__description {
  display: block;
  color: rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.72);
  font-size: clamp(0.9375rem, 0.95vw, 1.0625rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1.38;
  letter-spacing: -0.012em;
}

/* =========================================================
   CARD IMAGE
   ========================================================= */

.exp-approach__media {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background-color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.04
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}

.exp-approach__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.02) 0%,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.12) 100%
    );
  pointer-events: none;
}

.exp-approach__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(8px);
  transform: scale(1.06);
  transition:
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
}

/* =========================================================
   ACTIVE AND HOVER STATES
   ========================================================= */

/*
 * .is-active is added by JavaScript on touch devices
 * and when the card is activated with the keyboard.
 */

.exp-approach__card.is-active {
  border-color: var(--exp-approach-border-active);
  box-shadow:
    0 1.25rem 3rem
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.22);
}

.exp-approach__card.is-active .exp-approach__number,
.exp-approach__card.is-active .exp-approach__content {
  opacity: 0;
  transform: translateY(0.75rem);
}

.exp-approach__card.is-active .exp-approach__media {
  opacity: 1;
}

.exp-approach__card.is-active .exp-approach__media img {
  filter: blur(0);
  transform: scale(1);
}

/* Hover only on devices with a real pointer */

@media (hover: hover) and (pointer: fine) {
  .exp-approach__card:hover {
    z-index: 2;
    translate: 0 -0.35rem;
    border-color: var(--exp-approach-border-active);
    box-shadow:
      0 1.5rem 3.5rem
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.28);
  }

  .exp-approach__card:hover .exp-approach__number,
  .exp-approach__card:hover .exp-approach__content {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  .exp-approach__card:hover .exp-approach__media {
    opacity: 1;
  }

  .exp-approach__card:hover .exp-approach__media img {
    filter: blur(0);
    transform: scale(1);
  }
}

/* Keyboard focus */

.exp-approach__card:focus {
  outline: none;
}

.exp-approach__card:focus-visible {
  border-color: var(--exp-color-gold, #d0a161);
  outline: 2px solid var(--exp-color-gold, #d0a161);
  outline-offset: 0.25rem;
}

/* =========================================================
   EDITORIAL IMAGE — SIXTH GRID POSITION
   ========================================================= */

.exp-approach__visual {
  position: relative;
  width: 100%;
  min-height: clamp(20rem, 26vw, 24rem);
  overflow: hidden;
  border-radius: clamp(1.25rem, 1.8vw, 1.75rem);
  background-color: rgba(
    var(--exp-color-white-rgb, 255, 255, 255),
    0.06
  );
}

.exp-approach__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.14) 100%
    );
  pointer-events: none;
}

.exp-approach__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .exp-approach__visual:hover img {
    transform: scale(1.025);
  }
}

/* =========================================================
   ENTRANCE ANIMATION
   Activated later by JavaScript
   ========================================================= */

/*
 * Content remains visible if JavaScript is disabled.
 */

.exp-approach.is-enhanced .exp-approach__header,
.exp-approach.is-enhanced .exp-approach__card,
.exp-approach.is-enhanced .exp-approach__visual {
  opacity: 0;
}

.exp-approach.is-enhanced .exp-approach__header {
  transform: translateY(1.25rem);
}

.exp-approach.is-enhanced.is-visible .exp-approach__header {
  animation:
    expApproachReveal 700ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.exp-approach.is-enhanced.is-visible .exp-approach__card,
.exp-approach.is-enhanced.is-visible .exp-approach__visual {
  animation:
    expApproachCardReveal 700ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

/* Lightweight stagger */

.exp-approach.is-visible
.exp-approach__card:nth-child(1) {
  animation-delay: 80ms;
}

.exp-approach.is-visible
.exp-approach__card:nth-child(2) {
  animation-delay: 140ms;
}

.exp-approach.is-visible
.exp-approach__card:nth-child(3) {
  animation-delay: 200ms;
}

.exp-approach.is-visible
.exp-approach__card:nth-child(4) {
  animation-delay: 260ms;
}

.exp-approach.is-visible
.exp-approach__card:nth-child(5) {
  animation-delay: 320ms;
}

.exp-approach.is-visible .exp-approach__visual {
  animation-delay: 380ms;
}

@keyframes expApproachReveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes expApproachCardReveal {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
  .exp-approach {
    padding:
      clamp(5rem, 9vw, 7rem)
      clamp(1.5rem, 5vw, 3rem)
      clamp(6rem, 10vw, 8rem);
  }

  .exp-approach__header {
    margin-bottom: clamp(4rem, 8vw, 6rem);
  }

  .exp-approach__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .exp-approach__card,
  .exp-approach__visual {
    min-height: clamp(20rem, 42vw, 24rem);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
  .exp-approach {
    padding:
      4.75rem
      1.25rem
      5.5rem;
  }

  .exp-approach__header {
    margin-bottom: 3.5rem;
  }

  .exp-approach__eyebrow {
    margin-bottom: 1.125rem;
  }

  .exp-approach__title {
    max-width: 22rem;
    font-size: clamp(2rem, 10vw, 2.625rem);
    line-height: 1.03;
  }

  .exp-approach__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .exp-approach__card,
  .exp-approach__visual {
    min-height: 18.5rem;
    border-radius: 1.25rem;
  }

  .exp-approach__card {
    padding: 1.5rem;
  }

  .exp-approach__number {
    top: 1.5rem;
    left: 1.5rem;
  }

  .exp-approach__content {
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
  }

  .exp-approach__card-title {
    font-size: 1.25rem;
  }

  .exp-approach__description {
    max-width: 28rem;
    font-size: 0.9375rem;
  }

  /*
   * The final editorial image is kept visible on mobile,
   * but slightly shorter to avoid excessive vertical length.
   */

  .exp-approach__visual {
    min-height: 16rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-approach *,
  .exp-approach *::before,
  .exp-approach *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .exp-approach.is-enhanced .exp-approach__header,
  .exp-approach.is-enhanced .exp-approach__card,
  .exp-approach.is-enhanced .exp-approach__visual {
    opacity: 1;
    transform: none;
  }

  .exp-approach__card:hover,
  .exp-approach__card.is-active {
    translate: 0 0;
  }
}

/* =========================================================
   ABOUT US — THE TEAM
   ========================================================= */

.exp-team {
  --exp-team-gap: clamp(1.125rem, 1.6vw, 1.625rem);
  --exp-team-radius: clamp(1.125rem, 1.5vw, 1.5rem);

  position: relative;
  width: 100%;
  overflow: hidden;
  padding:
    clamp(6rem, 8vw, 8rem)
    clamp(1.25rem, 6.25vw, 7.5rem)
    clamp(7rem, 10vw, 11rem);
  background-color: var(--exp-color-gray-light, #edf1f3);
  color: var(--exp-color-navy, #04024d);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
}

/* Divi resets */

.exp-team *,
.exp-team *::before,
.exp-team *::after {
  box-sizing: border-box;
}

.exp-team h2,
.exp-team h3,
.exp-team p,
.exp-team figure {
  margin: 0;
  padding: 0;
}

.exp-team img {
  display: block;
  width: 100%;
  max-width: none;
}

/* Main container */

.exp-team__container {
  width: min(100%, 105rem);
  margin-inline: auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.exp-team__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(18rem, 1fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  margin-bottom: clamp(5.5rem, 8vw, 8.5rem);
}

.exp-team__heading {
  min-width: 0;
}

/* Eyebrow */

.exp-team__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: clamp(1.25rem, 1.8vw, 1.75rem);
  color: var(--exp-color-navy, #04024d);
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.exp-team__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--exp-color-gold, #d0a161);
}

/* Main heading */

.exp-team__title {
  max-width: 38rem;
  color: var(--exp-color-navy, #04024d);
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: clamp(2.25rem, 2.7vw, 3.25rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.exp-team__title span,
.exp-team__title em {
  display: block;
}

.exp-team__title em {
  margin-top: 0.08em;
  font-family: var(
    --exp-font-editorial,
    "Playfair Display",
    Georgia,
    serif
  );
  font-size: 1.04em;
  font-weight: var(--exp-font-weight-regular, 400);
  font-style: var(--exp-font-style-italic, italic);
  line-height: 1.03;
  letter-spacing: -0.025em;
}

/* Header description */

.exp-team__introduction {
  width: min(100%, 32rem);
  justify-self: end;
  color: rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.76);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1.42;
  letter-spacing: -0.012em;
}

/* =========================================================
   DESKTOP GRID
   ========================================================= */

.exp-team__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
}

.exp-team__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--exp-team-gap);
}

/* =========================================================
   TEAM CARD
   ========================================================= */

.exp-team__card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--exp-team-radius);
  background-color: var(--exp-color-blue-gray, #a5bac2);
  outline: none;
  isolation: isolate;
}

.exp-team__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--exp-color-blue-gray, #a5bac2);
}

/* Member photograph */

.exp-team__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.001);
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
}

/* Subtle lower gradient */

.exp-team__figure::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 45% 0 0;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.12) 100%
    );
  pointer-events: none;
}

/* Name and role panel */

.exp-team__information {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 1.5vw, 1.5rem);
  left: clamp(1rem, 1.5vw, 1.5rem);
  width: min(
    calc(100% - clamp(2rem, 4vw, 4rem)),
    24rem
  );
  padding:
    clamp(1.125rem, 1.5vw, 1.5rem)
    clamp(1.25rem, 1.8vw, 1.75rem);
  border: 1px solid
    rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.08);
  border-radius: clamp(1rem, 1.25vw, 1.25rem);
  background-color:
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.78);
  box-shadow:
    0 1rem 2.5rem
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.16);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 350ms ease,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.exp-team__name {
  color: var(--exp-color-white, #ffffff);
  font-size: clamp(1.25rem, 1.5vw, 1.625rem);
  font-weight: var(--exp-font-weight-regular, 400);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.exp-team__position {
  margin-top: 0.45rem !important;
  color: rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.7);
  font-size: clamp(0.875rem, 0.95vw, 1rem);
  font-weight: var(--exp-font-weight-light, 300);
  line-height: 1.3;
}

/* =========================================================
   CARD INTERACTIONS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .exp-team__card:hover .exp-team__image {
    transform: scale(1.035);
  }

  .exp-team__card:hover .exp-team__information {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * JavaScript will add tabindex="0" to every card
 * so keyboard users can reveal the information.
 */

.exp-team__card:focus-visible {
  outline: 2px solid var(--exp-color-gold, #d0a161);
  outline-offset: 0.3rem;
}

.exp-team__card:focus-visible .exp-team__image {
  transform: scale(1.035);
}

.exp-team__card:focus-visible .exp-team__information {
  opacity: 1;
  transform: translateY(0);
}

/*
 * Touch devices do not have a reliable hover state,
 * so names and roles remain visible.
 */

@media (hover: none) {
  .exp-team__information {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   VIEW MORE
   ========================================================= */

/*
 * Progressive enhancement:
 * without JavaScript all 14 members remain visible.
 */

.exp-team__expander {
  display: none;
  justify-content: center;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

/*
 * JavaScript adds .is-enhanced.
 * On desktop and tablet, cards 7–14 are then hidden.
 */

@media (min-width: 641px) {
  .exp-team.is-enhanced .exp-team__expander {
    display: flex;
  }

  .exp-team.is-enhanced:not(.is-expanded)
  .exp-team__card:nth-child(n + 7) {
    display: none;
  }
}

/* View more button */

.exp-team__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.375rem;
  margin: 0;
  padding: 0.875rem 1.75rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.18);
  border-radius: 999px;
  background-color: var(--exp-color-gold, #d0a161);
  color: var(--exp-color-navy, #04024d);
  box-shadow: none;
  font-family: var(
    --exp-font-primary,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: 0.8125rem;
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 250ms ease,
    box-shadow 350ms ease;
}

.exp-team__toggle-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-team__toggle[aria-expanded="true"]
.exp-team__toggle-icon {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .exp-team__toggle:hover {
    transform: translateY(-0.2rem);
    background-color: #ddb06f;
    box-shadow:
      0 0.875rem 2rem
      rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.12);
  }
}

.exp-team__toggle:focus {
  outline: none;
}

.exp-team__toggle:focus-visible {
  outline: 2px solid var(--exp-color-navy, #04024d);
  outline-offset: 0.25rem;
}

/* Additional cards reveal */

.exp-team.is-expanded
.exp-team__card:nth-child(n + 7) {
  animation:
    expTeamMemberReveal 650ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.exp-team.is-expanded
.exp-team__card:nth-child(7) {
  animation-delay: 40ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(8) {
  animation-delay: 80ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(9) {
  animation-delay: 120ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(10) {
  animation-delay: 160ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(11) {
  animation-delay: 200ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(12) {
  animation-delay: 240ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(13) {
  animation-delay: 280ms;
}

.exp-team.is-expanded
.exp-team__card:nth-child(14) {
  animation-delay: 320ms;
}

@keyframes expTeamMemberReveal {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   MOBILE CAROUSEL CONTROLS
   ========================================================= */

.exp-team__controls {
  display: none;
}

.exp-team__counter {
  color: rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.7);
  font-size: 0.8125rem;
  font-weight: var(--exp-font-weight-medium, 500);
  line-height: 1;
  letter-spacing: 0.05em;
}

.exp-team__navigation {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.exp-team__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid
    rgba(var(--exp-color-navy-rgb, 4, 2, 77), 0.12);
  border-radius: 50%;
  background-color:
    rgba(var(--exp-color-white-rgb, 255, 255, 255), 0.72);
  color: var(--exp-color-navy, #04024d);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    opacity 250ms ease,
    transform 300ms ease;
}

.exp-team__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exp-team__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.exp-team__arrow:focus {
  outline: none;
}

.exp-team__arrow:focus-visible {
  outline: 2px solid var(--exp-color-navy, #04024d);
  outline-offset: 0.2rem;
}

/* =========================================================
   SECTION ENTRANCE ANIMATION
   ========================================================= */

.exp-team.is-enhanced .exp-team__header,
.exp-team.is-enhanced .exp-team__viewport,
.exp-team.is-enhanced .exp-team__expander {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 700ms ease,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-team.is-enhanced.is-visible .exp-team__header,
.exp-team.is-enhanced.is-visible .exp-team__viewport,
.exp-team.is-enhanced.is-visible .exp-team__expander {
  opacity: 1;
  transform: translateY(0);
}

.exp-team.is-enhanced.is-visible .exp-team__viewport {
  transition-delay: 100ms;
}

.exp-team.is-enhanced.is-visible .exp-team__expander {
  transition-delay: 180ms;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
  .exp-team {
    padding:
      clamp(5rem, 9vw, 7rem)
      clamp(1.5rem, 5vw, 3rem)
      clamp(6rem, 10vw, 8rem);
  }

  .exp-team__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: clamp(4.5rem, 8vw, 6rem);
  }

  .exp-team__introduction {
    justify-self: start;
    max-width: 38rem;
  }

  .exp-team__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE CAROUSEL
   ========================================================= */

@media (max-width: 640px) {
  .exp-team {
    padding:
      4.75rem
      1.25rem
      5.5rem;
  }

  .exp-team__header {
    gap: 1.75rem;
    margin-bottom: 3.5rem;
  }

  .exp-team__eyebrow {
    margin-bottom: 1.125rem;
  }

  .exp-team__title {
    max-width: 22rem;
    font-size: clamp(2rem, 10vw, 2.625rem);
    line-height: 1.03;
  }

  .exp-team__introduction {
    max-width: 30rem;
    font-size: 0.9375rem;
  }

  /*
   * The viewport extends to the screen edges while
   * maintaining the section’s internal alignment.
   */

  .exp-team__viewport {
    width: auto;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 1.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .exp-team__viewport::-webkit-scrollbar {
    display: none;
  }

  .exp-team__track {
    display: flex;
    width: max-content;
    gap: 1rem;
    padding-right: 1.25rem;
  }

  /*
   * All 14 cards are available in the mobile carousel.
   */

  .exp-team.is-enhanced:not(.is-expanded)
  .exp-team__card:nth-child(n + 7) {
    display: block;
  }

  .exp-team__card {
    flex: 0 0 min(82vw, 22rem);
    width: min(82vw, 22rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .exp-team__figure {
    aspect-ratio: 5 / 6;
  }

  .exp-team__information {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
    padding: 1.125rem 1.25rem;
    border-radius: 1rem;
    opacity: 1;
    transform: none;
  }

  .exp-team__name {
    font-size: 1.25rem;
  }

  .exp-team__position {
    font-size: 0.875rem;
  }

  /* View more is unnecessary in the mobile carousel */

  .exp-team.is-enhanced .exp-team__expander,
  .exp-team__expander {
    display: none;
  }

  .exp-team__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .exp-team *,
  .exp-team *::before,
  .exp-team *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .exp-team.is-enhanced .exp-team__header,
  .exp-team.is-enhanced .exp-team__viewport,
  .exp-team.is-enhanced .exp-team__expander {
    opacity: 1;
    transform: none;
  }

  .exp-team__image {
    transform: none !important;
  }
}

/* =========================================================
   INSIGHTS — BLOG ARCHIVE
   ========================================================= */

.exp-insights {
  --exp-insights-navy: var(--exp-color-navy, #04024d);
  --exp-insights-gold: var(--exp-color-gold, #d0a161);
  --exp-insights-background: var(--exp-color-gray-light, #edf1f3);

  width: 100%;
  padding:
    clamp(3rem, 5vw, 5rem)
    clamp(1.25rem, 6.25vw, 7.5rem)
    clamp(5rem, 9vw, 9rem);
  background: var(--exp-insights-background);
  color: var(--exp-insights-navy);
  font-family:
    var(--exp-font-primary, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.exp-insights *,
.exp-insights *::before,
.exp-insights *::after {
  box-sizing: border-box;
}

.exp-insights__container {
  width: min(100%, 105rem);
  margin-inline: auto;
}

.exp-insights h2,
.exp-insights p {
  margin: 0;
  padding: 0;
}

.exp-insights a {
  color: inherit;
  text-decoration: none;
}

/* Topic filters */

.exp-insights__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-block: clamp(1.5rem, 2.2vw, 2.25rem);
  margin-bottom: clamp(3rem, 5vw, 5.5rem);
  border-block: 1px solid rgba(4, 2, 77, 0.08);
}

.exp-insights__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(4, 2, 77, 0.14);
  border-radius: 999px;
  background: transparent;
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.exp-insights__filter.is-active {
  border-color: var(--exp-insights-gold);
  background: var(--exp-insights-gold);
  font-weight: 500;
}

/* Articles */

.exp-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.4vw, 1.5rem);
  row-gap: clamp(3rem, 5vw, 5rem);
}

.exp-insights__card {
  min-width: 0;
}

.exp-insights__image-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(0.875rem, 1.1vw, 1.25rem);
  background: var(--exp-color-blue-gray, #a5bac2);
  isolation: isolate;
}

.exp-insights__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-insights__badge {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(4, 2, 77, 0.55);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.exp-insights .exp-insights__title {
  margin-top: clamp(1.125rem, 1.7vw, 1.75rem);
  color: var(--exp-insights-navy);
  font-family: inherit;
  font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.exp-insights__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--exp-insights-navy);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

/* Empty and loading states */

.exp-insights__empty {
  grid-column: 1 / -1;
  padding-block: 3rem !important;
  font-size: 1rem;
  line-height: 1.5;
}

.exp-insights__grid {
  transition: opacity 180ms ease;
}

.exp-insights__archive[aria-busy="true"] .exp-insights__grid {
  opacity: 0.45;
}

.exp-insights__grid.is-updated {
  animation: expInsightsReveal 350ms ease both;
}

@keyframes expInsightsReveal {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pagination */

.exp-insights__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(3rem, 5vw, 5rem);
}

.exp-insights__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(4, 2, 77, 0.14);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.2;
  transition: background-color 200ms ease;
}

.exp-insights__page-status {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Hover and keyboard */

@media (hover: hover) and (pointer: fine) {
  .exp-insights__filter:hover,
  .exp-insights__page-link:hover {
    background: rgba(208, 161, 97, 0.18);
  }

  .exp-insights__filter.is-active:hover {
    background: var(--exp-insights-gold);
  }

  .exp-insights__image-link:hover .exp-insights__image {
    transform: scale(1.025);
  }

  .exp-insights__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }
}

.exp-insights a:focus-visible,
.exp-insights__grid:focus-visible {
  outline: 2px solid var(--exp-insights-navy);
  outline-offset: 4px;
}

.exp-insights__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tablet */

@media (max-width: 980px) {
  .exp-insights {
    padding-inline: clamp(1.5rem, 5vw, 3rem);
  }

  .exp-insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */

@media (max-width: 640px) {
  .exp-insights {
    padding: 2.5rem 1.25rem 5rem;
  }

  .exp-insights__filters {
    flex-wrap: nowrap;
    gap: 0.625rem;
    overflow-x: auto;
    padding-block: 1.25rem;
    margin-bottom: 2.5rem;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }

  .exp-insights__filter {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding-inline: 1rem;
  }

  .exp-insights__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.75rem;
  }

  .exp-insights .exp-insights__title {
    margin-top: 1.125rem;
    font-size: 1.125rem;
  }

  .exp-insights__badge {
    top: 0.875rem;
    left: 0.875rem;
  }

  .exp-insights__pagination {
    gap: 0.875rem;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .exp-insights *,
  .exp-insights *::before,
  .exp-insights *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .exp-insights__image {
    transform: none !important;
  }
}