@charset "UTF-8";
/* ==========================================================================
   BSL — page-level layouts
   Section geometry transcribed from the Figma artboards (1800px wide).
   Values are design-px / 10 in rem; see assets/css/style.css for the model.
   ========================================================================== */

/* ==========================================================================
   HOME — Figma frame "home-page-section" #1:186 (1800×10848)
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.home-hero {
  position: relative;
  height: 87.5rem;
  background-color: #fff;
  background-image: linear-gradient(180deg, #fdecf3 0%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 100% 77.3rem;
  overflow: hidden;
}

.home-hero__stage {
  position: relative;
  width: 180rem;
  height: 87.5rem;
  margin-inline: auto;
}

.home-hero__stage>* {
  position: absolute;
  margin: 0;
}

.home-hero__banner {
  left: 19.6rem;
  top: 7.1rem;
  width: 148.5rem;
  height: 63.7rem;
}

.home-hero__tri-dark {
  left: 25.4rem;
  top: 13.1rem;
  width: 30.9rem;
  height: 25rem;
}

.home-hero__tri-light {
  left: 12.9rem;
  top: 41rem;
  width: 39.5rem;
  height: 37.2rem;
}

.home-hero__wedge {
  left: 123.3rem;
  top: 7.1rem;
  width: 44.9rem;
  height: 54.4rem;
}

.home-hero__eyebrow {
  left: 46.8rem;
  top: 19rem;
  width: 84.2rem;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 3.8rem;
  letter-spacing: -.144rem;
  text-align: center;
  text-transform: capitalize;
  color: #fff;
}

.home-hero__title {
  left: 41.1rem;
  top: 32.3rem;
  width: 91.1rem;
  font-weight: 600;
  font-size: 4rem;
  line-height: 4.8rem;
  letter-spacing: -.18rem;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.home-hero__strap {
  left: 90.6rem;
  top: 72.7rem;
  width: 77.5rem;
  font-weight: 500;
  font-size: 3rem;
  line-height: 3.2rem;
  letter-spacing: .03rem;
  text-align: right;
  color: var(--bsl-grey-600);
  white-space: nowrap;
}

.home-hero__strap strong {
  font-weight: 500;
  color: var(--bsl-maroon);
}

/* -------------------------------------------------------------- services */
.home-services {
  position: relative;
  padding: 3.5rem 0 13.1rem;
  background: #fff;
  overflow: hidden;
}

.home-services__bg {
  /* Figma: image fill @24% + node @46%, saturation -1, exposure +0.13
     => 11% effective opacity over white, fully desaturated. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .11;
  z-index: 0;
  filter: grayscale(1) brightness(1.13) contrast(1.03);
}

.home-services>.bsl-container {
  position: relative;
  z-index: 1;
}

.home-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 8.4rem;
}

.home-services__title {
  margin-top: 2.8rem;
  font-size: 6rem;
  line-height: 6.4rem;
  letter-spacing: -.15rem;
}

.home-services__title .light {
  font-weight: 300;
  color: var(--bsl-maroon);
}

.home-services__title strong {
  font-weight: 500;
  color: #000;
}

.home-services__more {
  flex: none;
  margin-bottom: 4.4rem;
  font-family: var(--bsl-font-alt);
  font-weight: 500;
  font-size: 2rem;
  line-height: 3.2rem;
  color: #000;
  border-bottom: .1rem solid #000;
  padding-inline: .3rem;
}

.home-services__more:hover {
  color: var(--bsl-maroon);
  border-color: var(--bsl-maroon);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 48.8rem);
  gap: 4.6rem;
  justify-content: center;
}

.svc-card {
  position: relative;
  height: 64.5rem;
  overflow: hidden;
  background: #0d1b2a;
}

.svc-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma "Bg" groups #1:255 / #1:257 / #1:226 — navy washes, not black. */
.svc-card__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44.2rem;
  background: linear-gradient(180deg, rgba(0, 66, 107, 0) 0%, #2b467d 100%);
}

.svc-card__scrim--alt {
  height: 44.4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #203e7c 100%);
}

.svc-card__scrim--navy {
  inset: 0;
  height: auto;
  background: linear-gradient(180deg, #2b467d 0%, rgba(43, 70, 125, .87) 100%);
}

.svc-card__cta {
  position: absolute;
  right: 3.4rem;
  top: 3.1rem;
  z-index: 3;
}

.svc-card__cta--light {
  background: #fff;
  color: var(--bsl-maroon);
}

.svc-card__cta--light:hover {
  background: #fff;
  color: var(--bsl-maroon-dark);
}

.svc-card__body {
  position: absolute;
  left: 6.5rem;
  right: 4rem;
  bottom: 6rem;
  z-index: 2;
  color: #fff;
}

.svc-card__body .t-kicker {
  margin-bottom: 1.5rem;
  color: #fff;
}

.svc-card__title {
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 4.4rem;
  text-transform: capitalize;
}

.svc-card--feature .svc-card__body {
  /* relative (not static) so z-index still lifts it above the navy scrim */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6.5rem 5.1rem 5rem;
  left: auto;
  right: auto;
  bottom: auto;
}

.svc-card--feature .svc-card__icon {
  width: 11.4rem;
  height: 9.6rem;
  object-fit: contain;
  margin-bottom: 3.7rem;
}

.svc-card--feature .svc-card__title {
  margin-bottom: 4.8rem;
}

.svc-card__text {
  font-size: 2rem;
  line-height: 2.5rem;
  color: rgba(245, 245, 245, .83);
  margin-bottom: auto;
}

.svc-card--feature .link-explore {
  align-self: flex-start;
  margin-top: 3rem;
}

/* -------------------------------------------------------- accreditations */
.home-accred {
  padding: 10.8rem 0 10.4rem;
  background: linear-gradient(180deg, #f9f9f9 0%, #e3e3e3 100%);
  overflow: hidden;
}

.home-accred__title {
  margin-bottom: 8rem;
  text-align: center;
  font-family: var(--bsl-font-alt);
  font-size: 4.2rem;
  line-height: 5.6rem;
  letter-spacing: -.126rem;
}

.home-accred__title .light {
  font-weight: 300;
  color: var(--bsl-grey-400);
}

.home-accred__title strong {
  font-weight: 600;
  color: var(--bsl-maroon);
}

.accred-grid {
  display: grid;
  grid-template-columns: repeat(5, 29.5rem);
  gap: 2rem;
  justify-content: center;
}

.accred-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27.5rem;
  padding: 3.2rem;
  background: #fff;
  border: .1rem solid #dddddd;
}

.accred-tile {
  overflow: hidden;
}

/* Each mark is placed at its exact Figma size rather than fitted to the tile. */
.accred-tile img {
  width: auto;
  height: auto;
  object-fit: contain;
  flex: none;
  max-width: none;
}

.accred-grid>li:nth-child(1) img {
  width: 17.3rem;
  height: 8.7rem;
}

.accred-grid>li:nth-child(2) img {
  width: 39.8rem;
  height: 15.3rem;
}

.accred-grid>li:nth-child(3) img {
  width: 18.9rem;
  height: 8.5rem;
}

.accred-grid>li:nth-child(4) img {
  width: 12.5rem;
  height: 12.1rem;
}

.accred-grid>li:nth-child(5) img {
  width: 8.7rem;
  height: 17.8rem;
}

/* --------------------------------------------------------------- numbers */
.home-numbers {
  position: relative;
  padding: 9.1rem 0 14.1rem;
  background: var(--bsl-maroon);
  overflow: hidden;
}

.home-numbers::before,
.home-numbers::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .58;
}

.home-numbers::before {
  right: 0;
  top: 28%;
  width: 60rem;
  height: 47rem;
  background: linear-gradient(225deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.home-numbers::after {
  left: 0;
  bottom: 0;
  width: 72rem;
  height: 58rem;
  background: linear-gradient(45deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 70%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.home-numbers>.bsl-container {
  position: relative;
  z-index: 1;
}

.home-numbers__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 6.1rem;
}

.home-numbers__strap {
  text-align: right;
  font-size: 6rem;
  line-height: 6.4rem;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
}

.home-numbers__strap .light {
  font-weight: 300;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 49.9rem);
  gap: 2.8rem 2.4rem;
  justify-content: center;
}

/* ------------------------------------------------------------------- ICV */
.home-icv {
  position: relative;
  background: #fff;
  /* Figma 1:12149: hairline at y2408, title at y2575, closing hairline at
     y2880 -- the closing one is .svc-sectors__rule on the band below. */
  padding: 0 0 4.3rem;
}

.home-icv__deco {
  position: absolute;
  left: 50%;
  margin-left: 48.8rem;
  top: 3rem;
  width: 36.6rem;
  height: 31.1rem;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

.home-icv>.bsl-container {
  position: relative;
  z-index: 1;
}

.home-icv__inner {
  display: grid;
  grid-template-columns: 40.5rem 23.7rem minmax(0, 74rem);
  align-items: start;
}

.home-icv__title {
  font-weight: 400;
  font-size: 6rem;
  line-height: 7.5rem;
  letter-spacing: -.18rem;
  color: rgba(0, 0, 0, .65);
}

.home-icv__title strong {
  display: block;
  font-weight: 600;
  color: var(--bsl-maroon);
}

.home-icv__arrow {
  display: block;
  width: 7.2rem;
  opacity: .5;
  margin-top: 2.4rem;
  color: #c4c4c4;
}

.home-icv__arrow svg {
  width: 100%;
  height: auto;
}

.home-icv__arrow svg path {
  stroke-width: 0.85px;
}

.home-icv__body {
  font-family: var(--bsl-font-alt);
  font-size: 2.4rem;
  line-height: 2.6rem;
  letter-spacing: -.012rem;
  color: rgba(0, 0, 0, .69);
  text-transform: capitalize;
  padding-top: 1.2rem;
}

.home-icv__body p+p {
  margin-top: 2.6rem;
}

.home-icv__body .is-accent {
  font-weight: 500;
  color: var(--bsl-maroon);
}

.home-icv__rule {
  margin-top: 8rem;
  width: 154.1rem;
  margin-inline: auto;
}

.home-icv-new {
  background-image: url("../images/icv-bg.png") !important;
  background-repeat: no-repeat !important;
  background-size: 230px 200px !important;
  background-position: 93% 30% !important;
}

/* -------------------------------------------------------- global presence */
.home-global {
  padding: 6.1rem 0 0;
  background: #fff;
}

.split-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 6rem;
}

.split-head__strap {
  flex: none;
  text-align: right;
  font-size: 4rem;
  line-height: 4.4rem;
  letter-spacing: -.12rem;
  color: #787878;
}

.country-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.country-panel {
  position: relative;
  height: 66.1rem;
  overflow: hidden;
  flex: none;
}

.country-panel:nth-child(1) {
  width: 35.4rem;
}

.country-panel:nth-child(2) {
  width: 47.8rem;
  height: 73.3rem;
  margin-top: -7.2rem;
  z-index: 2;
}

.country-panel:nth-child(3) {
  width: 36.5rem;
  margin-left: -1.1rem;
}

.country-panel:nth-child(4) {
  width: 41.9rem;
  margin-left: -5.5rem;
  z-index: 2;
}

.country-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-panel__label {
  position: absolute;
  right: 3.4rem;
  top: 4.7rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 500;
  font-size: 4.8rem;
  line-height: 5.6rem;
  letter-spacing: -.048rem;
  color: #000;
}

.country-panel--tall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(130, 20, 69, .1) 0%, rgba(130, 20, 69, .88) 100%);
}

.country-panel--tall .country-panel__label {
  color: #fff;
  font-size: 7rem;
  letter-spacing: -.07rem;
  right: 11.5rem;
  top: 3.9rem;
  z-index: 2;
}

.home-global .split-head {
  margin-bottom: 21.3rem;
}

.home-global__rule {
  margin-top: 6.7rem;
  width: 154.1rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- values */
.home-values {
  padding: 14.1rem 0 0;
  background: #fff;
  overflow: hidden;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.65rem;
  margin-top: 8.5rem;
}

.value-card {
  position: relative;
  padding: 5.4rem 4rem 3.3rem 5.3rem;
  height: 59.5rem;
  background: rgba(25, 25, 25, .06);
  color: rgba(69, 69, 69, .8);
}

.value-card__icon {
  width: auto;
  height: 10.8rem;
  max-width: 10.4rem;
  object-fit: contain;
  object-position: left bottom;
  margin-bottom: 2.5rem;
}

.value-card__title {
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 2.4rem;
  color: #000;
  margin-bottom: 6.3rem;
}

.value-card__text {
  font-weight: 300;
  font-size: 2rem;
  line-height: 2.4rem;
}

.value-card:nth-child(4) .value-card__text {
  font-size: 1.8rem;
}

.value-card--accent {
  background: var(--bsl-maroon);
  color: #fff;
}

.value-card--accent .value-card__title {
  color: #fff;
  font-weight: 600;
}

.value-card--accent .value-card__icon {
  filter: brightness(0) invert(1);
}

/* ------------------------------------------------------ vision & mission */
.home-vm {
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

.vm-panel {
  position: relative;
  min-height: 47.8rem;
  padding: 11rem 11.5rem 6rem;
  overflow: hidden;
}

.vm-panel--navy {
  padding-top: 9rem;
}

.vm-panel--maroon {
  background: var(--bsl-maroon);
}

.vm-panel--navy {
  background: var(--bsl-navy);
}

.vm-panel__deco {
  position: absolute;
  pointer-events: none;
  opacity: .55;
}

.vm-panel--maroon .vm-panel__deco {
  left: 52.3rem;
  top: 19.4rem;
  width: 29rem;
  height: 23.5rem;
}

.vm-panel--navy .vm-panel__deco {
  left: 58.3rem;
  top: 5.1rem;
  width: 23.5rem;
  height: 29rem;
}

.vm-panel__text {
  margin-top: 6rem;
  max-width: 46.2rem;
  font-weight: 300;
  font-size: 2rem;
  line-height: 2.4rem;
  color: #fff;
}

.vm-panel--navy .vm-panel__text {
  margin-top: 9.2rem;
  max-width: 50.8rem;
}

/* --------------------------------------------------------------- sectors */
.home-sectors {
  padding: 10rem 0 11.3rem;
  background: #fff;
}

.home-sectors .split-head {
  margin-bottom: 22.9rem;
}

.sector-list {
  margin: 0;
}

/* --------------------------------------------------------------- journey */
.home-journey {
  padding: 15.4rem 0 0;
  background: #fff;
  overflow: hidden;
}

.home-journey__title {
  margin-bottom: 4.9rem;
}

.home-journey__title .light,
.home-certs__title .light {
  font-weight: 300;
  color: var(--bsl-maroon);
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 38.35rem);
  justify-content: center;
}

.journey-card {
  position: relative;
  height: 61rem;
  overflow: hidden;
}

.journey-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-card:nth-child(1) img {
  filter: brightness(.81) contrast(.77) saturate(.33);
}

.journey-card:nth-child(2) img {
  filter: brightness(.42) saturate(.65);
}

.journey-card:nth-child(3) img {
  filter: brightness(.55) contrast(1.07) saturate(1.29);
}

.journey-card:nth-child(4) img {
  filter: brightness(.46);
}

.journey-card__scrim {
  position: absolute;
  inset: 0;
}

.journey-card--active .journey-card__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(32, 5, 17, .22) 45%, rgba(130, 20, 69, .9) 100%);
}

.journey-card__body {
  position: absolute;
  left: 8.8rem;
  right: 2rem;
  top: 27.4rem;
  color: #fff;
}

.journey-card--active .journey-card__body {
  left: 1.8rem;
  right: 1.8rem;
  top: 28.8rem;
  text-align: center;
}

.journey-card__year {
  font-family: var(--bsl-font-alt);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: -.016rem;
  text-transform: capitalize;
}

.journey-card--active .journey-card__year {
  font-family: var(--bsl-font-ubuntu);
  font-size: 4rem;
  letter-spacing: -.16rem;
}

.journey-card__items {
  margin-top: 4.5rem;
  text-align: left;
  padding-left: 1.6rem;
  font-family: var(--bsl-font-alt);
  font-size: 1.8rem;
  line-height: 2.3rem;
  text-transform: capitalize;
}

/* ---------------------------------------------------------- certificates */
.home-certs {
  padding: 2.5rem 0 3.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  overflow: hidden;
}

.home-certs__title {
  margin-bottom: 4.2rem;
}

.home-certs .cert-grid {
  grid-template-columns: repeat(5, 29.8rem);
  gap: 1.6rem;
  justify-content: center;
}

.home-certs .cert-tile {
  aspect-ratio: 298 / 422;
  padding: 2rem;
  border-color: var(--bsl-maroon);
}

.home-certs+.cta-band-wrap {
  background: linear-gradient(180deg, #ececec 0%, #e8e8e8 100%);
}

/* ==========================================================================
   HOME — responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .home-hero {
    height: auto;
    padding: 0;
    background: #fff;
  }

  .home-hero__stage {
    position: static;
    width: 100%;
    height: auto;
    background: var(--bsl-maroon);
    padding: 5.6rem var(--bsl-gutter);
  }

  .home-hero__stage>svg {
    display: none;
  }

  .home-hero__stage>* {
    position: static;
    width: auto;
  }

  .home-hero__eyebrow {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 2.4rem;
  }

  .home-hero__title {
    font-size: 2.6rem;
    line-height: 1.3;
    letter-spacing: -.06rem;
  }

  .home-hero__strap {
    margin-top: 3.2rem;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.5;
    white-space: normal;
    color: rgba(255, 255, 255, .8);
  }

  .home-hero__strap strong {
    color: #fff;
  }

  .home-services {
    padding: 5.6rem 0;
  }

  .home-services__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .home-services__title {
    font-size: 3rem;
    line-height: 1.2;
    margin-top: 1.2rem;
  }

  .home-services__more {
    margin-bottom: 0;
    font-size: 1.6rem;
  }

  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .svc-card {
    height: 46rem;
  }

  .svc-card--feature {
    height: auto;
  }

  .svc-card__body {
    left: 3.2rem;
    right: 3.2rem;
    bottom: 3.2rem;
  }

  .svc-card__title {
    font-size: 3rem;
    line-height: 1.1;
  }

  .svc-card--feature .svc-card__body {
    padding: 3.2rem;
  }

  .svc-card--feature .svc-card__title {
    margin-bottom: 2rem;
  }

  .svc-card__text {
    font-size: 1.6rem;
    line-height: 1.55;
  }

  .svc-card__cta {
    right: 2rem;
    top: 2rem;
  }

  .home-accred {
    padding: 5.6rem 0;
  }

  .home-accred__title {
    font-size: 2.6rem;
    line-height: 1.3;
    margin-bottom: 3.2rem;
  }

  .accred-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .accred-tile {
    height: 16rem;
    padding: 2rem;
  }

  .home-numbers {
    padding: 5.6rem 0;
  }

  .home-numbers__head {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .home-numbers__head #numbers-title,
  .home-numbers__strap {
    text-align: left !important;
    font-size: 2.6rem;
    line-height: 1.2;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .home-icv {
    padding: 5.6rem 0 0;
  }

  .home-icv__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .home-icv__title {
    font-size: 3.2rem;
    line-height: 1.2;
  }

  .home-icv__arrow,
  .home-icv__deco,
  .vm-panel__deco {
    display: none;
  }

  .home-icv__body {
    font-size: 1.7rem;
    line-height: 1.5;
    padding-top: 0;
  }

  .home-icv__rule,
  .home-global__rule {
    width: 100%;
    margin-top: 4.8rem;
  }

  .home-global {
    padding-top: 4.8rem;
  }

  .split-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 3.2rem;
  }

  .split-head__strap {
    text-align: left;
    font-size: 2rem;
    line-height: 1.3;
  }

  .country-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
  }

  .country-panel,
  .country-panel:nth-child(n) {
    width: auto;
    height: 30rem;
    margin: 0;
    z-index: auto;
  }

  .country-panel__label,
  .country-panel--tall .country-panel__label {
    right: 1.6rem;
    top: 1.6rem;
    font-size: 2.4rem;
    line-height: 1;
  }

  .home-values {
    padding-top: 5.6rem;
  }

  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.4rem;
  }

  .value-card {
    height: auto;
    padding: 3.2rem 2.8rem;
  }

  .value-card__icon {
    height: 6.4rem;
    margin-bottom: 2.4rem;
  }

  .value-card__title {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
  }

  .value-card__text {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .vm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .vm-panel {
    min-height: 0;
    padding: 4rem 3.2rem;
  }

  .vm-panel__text {
    font-size: 1.6rem;
    line-height: 1.55;
  }

  .home-sectors {
    padding: 5.6rem 0;
  }

  .home-sectors .split-head {
    margin-bottom: 3.2rem;
  }

  .home-journey {
    padding-top: 5.6rem;
  }

  .journey-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
  }

  .journey-card {
    height: 32rem;
  }

  .journey-card__body,
  .journey-card--active .journey-card__body {
    left: 2rem;
    right: 2rem;
    top: auto;
    bottom: 2.4rem;
    text-align: left;
  }

  .journey-card__year,
  .journey-card--active .journey-card__year {
    font-size: 2rem;
  }

  .journey-card__items {
    margin-top: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .home-certs {
    padding: 5.6rem 0;
  }

  .home-certs .cert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 767.98px) {

  .accred-grid,
  .home-certs .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid,
  .value-grid,
  .country-grid,
  .journey-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-services__title {
    font-size: 2.4rem;
  }

  .home-hero__title {
    font-size: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   HOME · desktop section geometry locked to the Figma artboard.
   Each block height equals the Figma section height (design px / 10) so the
   cumulative vertical rhythm stays pixel-identical down the whole page.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .home-hero {
    height: 87.5rem;
  }

  .home-services {
    height: 109.7rem;
  }

  .home-accred {
    height: 61.1rem;
  }

  .home-numbers {
    height: 122.8rem;
  }

  .home-icv {
    height: 48.2rem;
  }

  .home-global {
    height: 115.4rem;
  }

  .home-values {
    height: 99.1rem;
  }

  .home-vm {
    height: 47.8rem;
  }

  .home-sectors {
    height: 118.4rem;
  }

  .home-journey {
    height: 109.2rem;
  }

  .home-certs {
    height: 62.4rem;
  }

  .home-icv__inner {
    min-height: 22.5rem;
  }
}

/* ==========================================================================
   SHARED — section title used across the inner pages
   Figma: Outfit 500 · 56/60 · -2.52 · capitalize, accent word in #821445
   ========================================================================== */
.section-title {
  font-weight: 500;
  font-size: 5.6rem;
  line-height: 6rem;
  letter-spacing: -.252rem;
  color: #000;
  text-transform: capitalize;
}

.section-title .accent {
  color: var(--bsl-maroon);
}

/* Maroon pill button — Figma "Button" 176x44 #821445 */
.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  height: 4.4rem;
  padding: 0 2.4rem;
  font-family: var(--bsl-font-jakarta);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: -.048rem;
  color: #fff;
  background: var(--bsl-maroon);
  border: .1rem solid var(--bsl-maroon);
  transition: background-color .25s ease, gap .25s ease;
}

.btn-explore:hover {
  background: var(--bsl-maroon-dark);
  gap: 2.2rem;
  color: #fff;
}

.btn-explore svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

/* Black brochure button — Figma "Button" 262x66 #000 with #821445 hairline */
.btn-brochure {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  height: 6.6rem;
  padding: 0 2.4rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.4rem;
  letter-spacing: -.084rem;
  color: #fff;
  background: #000;
  border: .1rem solid var(--bsl-maroon);
  transition: background-color .25s ease, gap .25s ease;
}

.btn-brochure:hover {
  background: var(--bsl-maroon);
  gap: 2.2rem;
  color: #fff;
}

.btn-brochure svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

/* Figma watermark treatment: bsl-texture-*.png, exported with Figma's
   own opacity and tone already baked in -- no filter needed. */
.wm-tint {
  opacity: .1;
  filter: contrast(1.03) sepia(.29) saturate(1.2);
  pointer-events: none;
}

/* ==========================================================================
   SERVICES — Figma frame "services" #1:34717 (1800×4964)
   ========================================================================== */
.svc-intro {
  position: relative;
  /* Figma: rows close on the y2408 hairline */
  padding: 11.3rem 0 15.7rem;
  background: #fff;
  overflow: hidden;
}

.svc-intro__wm {
  position: absolute;
  object-fit: fill;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

/* Pulled up so the motif sits behind the heading rather than starting
   level with the body copy. The --r accent keeps top:0 -- it is a separate
   right-edge decoration, not the heading motif. */
.svc-intro__wm--l {
  left: 0;
  top: 0;
  width: 87.1rem;
  height: 106.6rem;
  object-fit: fill;
  transform: rotate(-180deg);
}

/* 180deg flip on the right-hand watermark so its triangles point away from
   the page edge instead of mirroring the left one. */
.svc-intro__wm--r {
  /* right:0 rather than the old left:138.5rem -- that offset was measured off
     the 1800px canvas and drifted at other widths. Figma runs this one 23px
     past the frame edge, so anchoring right is both accurate and fluid. */
  right: 0;
  left: auto;
  top: -1.9rem;
  width: 43.8rem;
  height: 53.6rem;
  object-fit: fill;
}

.svc-intro>.bsl-container {
  position: relative;
  z-index: 1;
}

/* Title and strap share one row, so the strap's first line sits level with
   "Our Services" instead of dropping below it. The strap is placed in a fixed
   second column rather than pushed by justify-content, so its left edge lands
   on an exact offset regardless of how wide the title renders. */
.svc-intro__head {
  display: grid;
  grid-template-columns: 94.1rem minmax(0, 1fr);
  align-items: start;
  margin-bottom: 8.6rem;
}

.svc-intro__strap {
  /* 94.1rem = the row's 2.1rem padding-left + its 79rem media column + the
     13rem grid gap, so this starts on the same vertical line as
     .svc-row__title ("HR Outsourcing") below. */
  max-width: 58.2rem;
  padding-top: 0;
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 4.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-ink);
}

.svc-rows {
  display: grid;
  gap: 9.4rem;
}

.svc-row {
  display: grid;
  grid-template-columns: 79rem minmax(0, 1fr);
  gap: 13rem;
  padding-left: 2.1rem;
}

/* Hover: zoom the photo behind a maroon wash and lift the big number, so
   each service row responds the way the sector tiles do.
   overflow:hidden is deliberately NOT used here -- the "01" is a sibling of
   the img inside this box and would be clipped. clip-path on the img alone
   contains the zoom while leaving the number fully visible. */
.svc-row__media {
  position: relative;
  width: 79rem;
  height: 42rem;
}

.svc-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: inset(0);
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}

.svc-row__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(130, 20, 69, .72) 100%);
  transition: opacity .5s ease;
}

.svc-row:hover .svc-row__media img,
.svc-row:focus-within .svc-row__media img {
  transform: none;
}

.svc-row:hover .svc-row__media::after,
.svc-row:focus-within .svc-row__media::after {
  opacity: 1;
}

.svc-row:hover .svc-row__title,
.svc-row:focus-within .svc-row__title {
  color: var(--bsl-maroon);
}

.svc-row__title {
  transition: color .35s ease;
}

.svc-row__num {
  position: absolute;
  left: 0;
  bottom: 1.4rem;
  font-weight: 700;
  font-size: 20rem;
  line-height: 1;
  letter-spacing: -1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.svc-row:hover .svc-row__num,
.svc-row:focus-within .svc-row__num {
  transform: translateY(-1.2rem);
}

@media (prefers-reduced-motion: reduce) {

  .svc-row__media img,
  .svc-row__num {
    transition: none;
  }

  .svc-row:hover .svc-row__media img {
    transform: none;
  }

  .svc-row:hover .svc-row__num {
    transform: none;
  }
}

.svc-row__body {
  padding-top: 7.3rem;
}

.svc-row__title {
  font-weight: 500;
  font-size: 6rem;
  line-height: 1;
  color: #111111;
  margin-bottom: 2.5rem;
}

.svc-row__text {
  max-width: 58.2rem;
  margin-bottom: 3.7rem;
  font-size: 2rem;
  line-height: 2.9rem;
  letter-spacing: -.06rem;
  color: var(--bsl-ink);
}

/* ==========================================================================
   SERVICES — "Why ICV matters?" band
   Moved here from the home page. The home copy is styled in new-home.css at
   the 16px root that page uses; this page runs the 1rem = 10px Figma model,
   so the section is restated here on that scale instead of inheriting sizes
   that would render at roughly half.
   ========================================================================== */
.icv {
  position: relative;
  padding: 7.2rem 0 8.6rem;
  padding-top: 10rem;
  background: #fff;
}

.icv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 4.8rem;
}

.icv__left {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}

/* Two lines, "Why" light over the maroon phrase -- matches the Figma block. */
.icv__title {
  font-weight: 400;
  font-size: 5.4rem;
  line-height: 1.15;
  letter-spacing: -.132rem;
  color: #555;
}

.icv__title-bold {
  display: block;
  font-weight: 600;
  color: var(--bsl-maroon);
}

.icv__arrow {
  flex: none;
  width: 7.2rem;
  color: #c4c4c4;
  align-self: flex-start;
  margin-top: 1.8rem;
}

.icv__arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

.icv__arrow svg path {
  stroke-width: 0.85px;
}

.icv__right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Body copy tracks .svc-row__text (20/29) so the band sits in the same
   typographic key as the service rows directly above it. */
.icv__desc {
  font-size: 2.3rem;
  line-height: 2.9rem;
  letter-spacing: -.06rem;
  color: #5c5b5b;
}

.icv__highlight {
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 3rem;
  letter-spacing: -.063rem;
  color: var(--bsl-maroon);
}

@media (max-width: 991.98px) {

  .icv {
    padding: 4.8rem 0 5.6rem;
  }

  .icv__rule {
    margin-bottom: 3.2rem;
  }

  .icv__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem;
  }

  .icv__left {
    justify-content: space-between;
    gap: 2rem;
  }

  .icv__title {
    font-size: 3.6rem;
  }

  .icv__arrow {
    width: 4.4rem;
  }

  .icv__desc {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .icv__highlight {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  .icv__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }

  .icv__arrow {
    transform: rotate(90deg);
  }
}

/* Figma: "Line 23" (1539x1 #C4C4C4) sits at y=2586, 79px above the
   "Our Sectors" title; tiles start y=2815, i.e. 90px under the title. The
   old 15rem title margin left a large dead band, and there was no rule. */
.svc-sectors {
  padding: 5.4rem 0 4rem;
  background: #fff;
  overflow: hidden;
}

/* Shared hairline. The ICV band is bracketed by one of these top and bottom:
   its own opening rule, and the one that opens "Our Sectors" below it. */
.svc-sectors__rule,
.icv__rule {
  display: block;
  height: .1rem;
  background: #3f3f3f;
  margin: 0 0 7.9rem;
  border: 0;
}

/* The ICV rule opens its own band, so it sits above the content it heads.
   The extra margin balances .icv's asymmetric padding (7.2rem / 8.6rem) so the
   band sits optically centred between its two hairlines. */
.icv__rule {
  margin-bottom: 9.7rem;
}

/* Figma 1:12149: hairline y2408 -> title y2575 */
.home-icv .icv__rule {
  margin-bottom: 15.9rem;
}

.svc-sectors .section-title {
  margin-bottom: 9rem;
}

.sector-tiles {
  display: grid;
  /* Figma: 490 tiles at x130 / x656 / x1177, rows at y3116 and y3635 */
  grid-template-columns: repeat(3, minmax(0, 49rem));
  gap: 2.9rem 3.3rem;
  justify-content: center;
  margin-bottom: 90px;
}

.sector-tile {
  position: relative;
  /* square whatever width the track resolves to */
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sector-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Resting state -- Figma "Rectangle 4255/4256/4257": a near-white wash over
   the greyscale photo (#FAFAFA transparent -> #F3F3F3). */
.sector-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .73) 100%);
  transition: opacity .5s ease;
}

/* Active/hover -- Figma "Rectangle 4237": transparent black -> solid #821445,
   with the photo restored to full colour. */
.sector-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #821445 100%);
  transition: opacity .5s ease;
}

.sector-tile:hover img,
.sector-tile:focus-within img {
  filter: none;
  transform: none;
}

.sector-tile:hover::after,
.sector-tile:focus-within::after {
  opacity: 0;
}

.sector-tile:hover::before,
.sector-tile:focus-within::before {
  opacity: 1;
}

.sector-tile img.sector-tile__icon {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  width: 6.8rem;
  height: 6.8rem;
  object-fit: contain;
  z-index: 3;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.sector-tile__label {
  position: absolute;
  left: 6rem;
  bottom: 4rem;
  right: 3rem;
  z-index: 3;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 3.8rem;
  color: #fff;
  transition: color .4s ease;
}

.sector-tile:hover .sector-tile__label,
.sector-tile:focus-within .sector-tile__label {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sector-tile img {
    transition: filter .5s ease;
  }

  .sector-tile:hover img {
    transform: none;
  }
}

/* ==========================================================================
   DETAIL PAGES (HR Outsourcing · Procurement Outsourcing)
   Figma frames #1:34828 / #1:35390
   ========================================================================== */
.detail-intro {
  position: relative;
  padding: 10rem 0 0;
  background: #fff;
  overflow: hidden;
}

/* Figma "Rectangle 4286" (1:35394): x=727 y=779, 1074x1315, rotation NONE.
   bsl-texture-detail.png is that node exported directly -- its artwork is
   already weighted to the right, so no rotation is needed. (The earlier
   bsl-texture-light.png is weighted to the LEFT, which is why rotating it
   never lined up.) Right-anchored: it ends 1px past the 1800px frame edge. */
.detail-intro__wm {
  /* bsl-texture-light.png carries ink across only its left 60%; the right 40%
     of the file is blank. With object-fit:fill that dead band was stretched
     inside the box, so the pattern visibly stopped about two-thirds across and
     left an empty gap beside it. Rotating does not help -- it only moves the
     void to the other edge.
     object-fit:cover with object-position:left crops the blank band off
     instead, so ink fills the whole box; overflow:hidden on .detail-intro
     clips whatever cover pushes past the edge. */
  position: absolute;
  right: 0;
  left: auto;
  /* Figma "Rectangle 4286" (1:12356): 1074x1315 at x727, y779 */
  top: 26rem;
  width: 107.4rem;
  height: 131.5rem;
  object-fit: fill;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

.detail-intro>.bsl-container {
  position: relative;
  z-index: 1;
}

.detail-intro__head {
  display: grid;
  grid-template-columns: 81.1rem minmax(0, 67.2rem);
  gap: 3.2rem;
  align-items: start;
}

.detail-intro__title {
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 3.9rem;
  letter-spacing: -.096rem;
  color: #000;
}

.detail-intro__strap {
  padding-top: 1.3rem;
  font-size: 2.1rem;
  line-height: 2.8rem;
  letter-spacing: -.063rem;
  color: var(--bsl-grey-600);
}

.detail-intro__figure {
  width: 152.9rem;
  max-width: 100%;
  height: 50.8rem;
  object-fit: cover;
  margin: 7.6rem 0 0 1.1rem;
}

.detail-intro__copy {
  max-width: 86.9rem;
  margin-top: 8.6rem;
  padding-bottom: 8.6rem;
  font-size: 2.1rem;
  line-height: 2.8rem;
  letter-spacing: -.063rem;
  color: var(--bsl-grey-600);
}

.detail-intro__copy p+p {
  margin-top: 2.1rem;
}

.detail-intro__copy .btn-brochure {
  margin-top: 4.6rem;
}

/* Procurement runs a taller intro strap, so the figure and copy sit tighter */
.detail-intro--pr .detail-intro__figure {
  /* Figma 1:12357: 1529 x 710 at x131, y900 (HR's figure is the 508 crop) */
  /*height: 71rem;*/
  margin-top: 9.4rem;
  margin-left: .7rem;
}

.detail-intro--pr .detail-intro__copy {
  /* Figma 1:12360: Outfit 400 22/30 ls 1.0 on an 869 measure */
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: .1rem;
  margin-top: 6.6rem;
  /* button bottom y2094 -> banner top y2266 */
  padding-bottom: 1.2rem;
}

.detail-intro--pr .detail-intro__head {
  /* Figma: heading 701 wide at x138, strap 672 wide at x929 */
  grid-template-columns: 77.3rem minmax(0, 67.2rem);
}

/* ------------------------------------------------------------------- PEO */
/* Figma: banner image 1806x858 from the section top, then a 1533x913 panel
   overlapping it from y+539, with the heading and the three cards inside.
   The cards are navy photo tiles. One is open at a time: the open card drops
   its photo back to a near-flat navy and shows the service list, the closed
   ones show only the badge and the title over the photo. */
.peo {
  position: relative;
  padding: 0 0 13.9rem;
  background: #fff;
}

.peo__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 85.8rem;
  object-fit: cover;
  z-index: 0;
}

.peo>.bsl-container {
  position: relative;
  z-index: 1;
}

.peo__panel {
  position: relative;
  margin-top: 53.9rem;
  padding: 5.5rem 0 7.7rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.peo__title {
  padding-left: 9.7rem;
  margin-bottom: 6.8rem;
}

.peo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  padding: 0 8.7rem 0 9.5rem;
}

/* --open carries the whole open/closed difference: 0 = closed, 1 = open.
   Everything that changes between the two states reads it through calc(),
   so moving the state around (hover, focus, the stacked layout) is a
   one-line override instead of a second copy of the card styles. */
.peo-card {
  --open: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 70rem;
  padding: 4.5rem 3.6rem 4.5rem 4.7rem;
  background: linear-gradient(180deg, #02235fcf 0%, #042561e8 100%);
  transition: background-color .45s ease;
}

/* The row rests closed -- badge and title over the photo -- and only the
   card under the pointer (or the keyboard focus) opens its list. */
@media (min-width: 1200px) {
  .peo__grid .peo-card:focus-within {
    --open: 1;
  }
}

@media (min-width: 1200px) and (hover: hover) {
  .peo__grid .peo-card:hover {
    --open: 1;
  }
}

/* Touch screens at desktop widths never produce a hover, so nothing would
   ever open -- give them the full row instead. The cards are tall enough to
   hold the longest list without clipping. */
@media (min-width: 1200px) and (hover: none) {
  .peo__grid .peo-card {
    --open: 1;
  }
}

/* The cards carry tabindex so the lists are reachable without a pointer. */
.peo-card:focus-visible {
  outline: .2rem solid #fff;
  outline-offset: -1.2rem;
}

.peo-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: calc(1 - var(--open) * 0.93);
  transition: opacity .5s ease;
}

/* Bottom scrim: exact Figma linear gradient (0% #122C62 @ 0% opacity to 100% #1F3F7C @ 100% opacity) */
.peo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 44, 98, 0) 0%, #1F3F7C 100%);
  opacity: calc(1 - var(--open));
  transition: opacity .5s ease;
}

.peo-card__body {
  position: relative;
  z-index: 1;
}

.peo-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 50%;
  margin-bottom: 3.2rem;
  background-color: var(--bsl-maroon);
  border: 0;
  transition: background-color .45s ease, transform .45s ease;
}

.peo-card__badge img {
  width: auto;
  height: auto;
  max-width: 6.9rem;
  max-height: 6.8rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter .45s ease;
}

/* On hover / open state: white circle badge + maroon icon inside */
@media (min-width: 1200px) {

  .peo-card:hover .peo-card__badge,
  .peo-card:focus-within .peo-card__badge {
    background-color: #ffffff;
  }

  .peo-card:hover .peo-card__badge img,
  .peo-card:focus-within .peo-card__badge img {
    filter: none;
  }
}

.peo-card__title {
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 3.2rem;
  letter-spacing: -.078rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.peo-card__list {
  color: rgba(255, 255, 255, .92);
  margin-top: calc(var(--open) * 2.6rem);
  max-height: calc(var(--open) * 50rem);
  opacity: var(--open);
  overflow: hidden;
  transition: max-height .5s ease, margin-top .5s ease, opacity .35s ease;
}

.peo-card__list li {
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: -.05rem;
  padding-left: 2rem;
}

.peo-card__list li::before {
  top: 1.05rem;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {

  .peo-card__media,
  .peo-card::after,
  .peo-card__badge,
  .peo-card__list {
    transition: none;
  }
}

/* ==========================================================================
   SERVICES / DETAIL — responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .section-title {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -.08rem;
  }

  .svc-intro {
    padding: 5.6rem 0;
  }

  .svc-intro__wm {
    display: none;
  }

  /* the fixed 94.1rem first column tracks the desktop media column, which
     collapses at this breakpoint -- stack the title and strap instead */
  .svc-intro__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    margin-bottom: 4rem;
  }

  /* the desktop indent tracks the 79rem media column, which collapses here */
  .svc-intro__strap {
    margin-left: 0;
    max-width: none;
    padding-top: 0;
    font-size: 2.2rem;
    line-height: 1.45;
  }

  .svc-rows {
    gap: 4.8rem;
  }

  .svc-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    padding-left: 0;
  }

  /* the media box is a fixed 79x42rem on desktop; let it flow here */
  .svc-row__media {
    width: 100%;
    height: auto;
    aspect-ratio: 790 / 420;
  }

  .svc-row__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 790 / 420;
  }

  .svc-row__num {
    font-size: 9rem;
    letter-spacing: -.4rem;
    bottom: .6rem;
    left: 1.6rem;
  }

  .svc-row__body {
    padding-top: 0;
  }

  .svc-row__title {
    font-size: 3rem;
    margin-bottom: 1.4rem;
  }

  .svc-row__text {
    font-size: 1.6rem;
    line-height: 1.55;
    margin-bottom: 2.4rem;
  }

  .svc-sectors {
    padding: 5.6rem 0;
  }

  .svc-sectors .section-title {
    margin-bottom: 3.2rem;
  }

  .sector-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .sector-tile {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .sector-tile__label {
    font-size: 2.2rem;
    line-height: 1.2;
    left: 2rem;
    bottom: 2rem;
    right: 2rem;
  }

  .detail-intro {
    padding: 4rem 0 0;
  }

  .detail-intro__wm {
    display: none;
  }

  /* Training page bands follow the same convention: no texture on mobile. */
  .courses__wm,
  .partners__wm {
    display: none;
  }

  .detail-intro__head,
  .detail-intro--pr .detail-intro__head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.6rem;
  }

  .detail-intro__title {
    font-size: 2.4rem;
    line-height: 1.3;
  }

  .detail-intro__strap {
    font-size: 1.7rem;
    line-height: 1.5;
    padding-top: 0;
  }

  .detail-intro__figure,
  .detail-intro--pr .detail-intro__figure {
    width: 100%;
    height: auto;
    aspect-ratio: 1529 / 508;
    margin: 2.4rem 0 0;
    margin-left: 0;
  }

  .detail-intro__copy,
  .detail-intro--pr .detail-intro__copy {
    margin-top: 2.4rem;
    padding-bottom: 4rem;
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .peo {
    padding-bottom: 5.6rem;
  }

  .peo__bg {
    height: 34rem;
  }

  .peo__panel {
    margin-top: 24rem;
    padding: 3.2rem 0;
  }

  .peo__title {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .peo__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    padding: 0 2.4rem;
  }

  /* Stacked cards have the room for every list, and there is no hover to
     open them with, so they all sit open -- with the resting maroon badge,
     not the pointed-at card's white ring. */
  .peo__grid .peo-card {
    --open: 1;
  }

  .peo-card__badge {
    background: #ffffff;
    border-color: transparent;
  }

  .peo-card__badge img {
    filter: none;
  }

  .peo-card {
    min-height: 0;
    padding: 3.2rem 2.8rem;
  }

  .peo-card__list {
    max-height: none;
  }

  .peo-card__badge {
    width: 9rem;
    height: 9rem;
    margin-bottom: 2.4rem;
  }

  .peo-card__badge img {
    max-width: 5rem;
    max-height: 5rem;
  }

  .peo-card__title {
    font-size: 2rem;
    line-height: 1.3;
  }

  .peo-card__list li {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .peo-card__list li::before {
    top: .9rem;
  }
}

@media (max-width: 767.98px) {
  .sector-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-row__title {
    font-size: 2.6rem;
  }
}

/* ==========================================================================
   ABOUT US — Figma frame "about-us" #1:34598 (1800×7601)
   ========================================================================== */
.about-lead {
  padding: 11.7rem 0 0;
  background: #fff;
}

.about-lead__grid {
  display: grid;
  grid-template-columns: 76.9rem minmax(0, 1fr);
  gap: 11.8rem;
  align-items: start;
}

.about-lead__img {
  width: 76.9rem;
  height: 72.9rem;
  object-fit: cover;
}

.about-lead__body {
  padding-top: 10.5rem;
}

.about-lead__eyebrow {
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: -.072rem;
  color: var(--bsl-maroon);
}

.about-lead__rule {
  display: block;
  width: 10.1rem;
  height: .1rem;
  background: var(--bsl-maroon);
  margin-top: .8rem;
}

.about-lead__title {
  margin-top: 1.2rem;
  font-weight: 500;
  font-size: 7.2rem;
  line-height: 7.7rem;
  letter-spacing: -.324rem;
  text-transform: capitalize;
  color: #000;
}

.about-lead__title .accent {
  color: var(--bsl-maroon);
}

.about-lead__hook {
  margin-top: 4.1rem;
  max-width: 63.3rem;
  font-weight: 300;
  font-size: 3rem;
  line-height: 2.9rem;
  letter-spacing: -.09rem;
  color: var(--bsl-ink);
}

.about-lead__text {
  margin-top: 5.4rem;
  max-width: 63.3rem;
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-ink);
}

/* --------------------------------------------------------- what sets us */
.about-apart {
  padding: 11.6rem 0 0;
  background: #fff;
}

.about-apart__grid {
  display: grid;
  grid-template-columns: 77.6rem 76.9rem;
  gap: 2.4rem;
  justify-content: center;
}

.about-apart__panel {
  position: relative;
  height: 65rem;
  padding: 7.7rem 4rem 0 7.8rem;
  background: var(--bsl-maroon);
  overflow: hidden;
}

/* bsl-texture-maroon.png is derived from Figma's fully composited render of
   this panel (group 1:34622) and then re-expressed as an overlay over
   #821445, so dropping it on the maroon reproduces Figma to within 1/255 per
   channel. The SOFT_LIGHT result is already in the pixels: adding opacity or
   a blend mode here would double it and give the heavy, high-contrast
   triangles this replaced. Covers the full 776x590 panel. */
.about-apart__wm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.about-apart__panel> :not(.about-apart__wm) {
  position: relative;
  z-index: 1;
}

.about-apart__title {
  font-weight: 300;
  font-size: 6.4rem;
  line-height: 6.8rem;
  letter-spacing: -.288rem;
  text-transform: capitalize;
  color: #fff;
}

.about-apart__title strong {
  font-weight: 500;
}

.about-apart__text {
  max-width: 95%;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-grey-200);
  margin-top: 20px;
}

.about-apart__media {
  height: 65rem;
  overflow: hidden;
}

.about-apart__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- ethics */
/* Figma: the ethics band (Rect 4292) is y=2485..2891 -- 406px tall with the
   text starting 46px in. The old 20.2/18.6rem padding wrapped a short text
   block in ~388px of dead space.
   Its fill is a LEFT-TO-RIGHT gradient (handles 0,.5 -> 1,.5) from opaque
   white to transparent white -- it veils the left of the photo band behind
   it and lets the right show through, so a flat white is wrong here. */
/* Figma rhythm: apart panel ends y=2329, Line 17 at y=2419 (90px below it),
   band starts y=2485 (66px, carried by .about-ethics__rule), title y=2531
   (46px in), band ends y=2891 -- 192px of air under the copy. */
.about-ethics {
  position: relative;
  padding: 9rem 0 19.2rem;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* Figma "Rectangle 4284" (1:34621): 644x787 flush to the right frame edge.
   Sized to the section rather than bled upward: the section clips with
   overflow:hidden, and a texture that starts above it gets sliced off at the
   section's top edge, which reads as a hard rectangular box on the page.
   The PNG's own top/bottom are feathered so it fades out instead. */
.about-ethics__wm {
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  /* Figma's 644x787 aspect, not stretched to the section height -- forcing
     height:100% distorted the triangles and made them read far heavier than
     the design. fill (not cover) keeps the feathered edges intact. */
  width: 64.4rem;
  height: 78.7rem;
  max-height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

.about-ethics>.bsl-container {
  position: relative;
  z-index: 1;
}

/* Figma "Line 17": 1570x1 #C4C4C4 sitting 66px above the ethics band. On the
   container (not the grid) so the grid's row gap cannot add to the spacing. */
.about-ethics__rule {
  display: block;
  height: .2rem;
  background: #000000;
  margin: 0 0 6.6rem;
  border: 0;
}

.about-ethics__grid {
  display: grid;
  grid-template-columns: 76.7rem minmax(0, 63.3rem);
  gap: 5.2rem;
  align-items: start;
}

.about-ethics__title {
  font-weight: 500;
  font-size: 5.6rem;
  line-height: 6rem;
  letter-spacing: -.252rem;
  text-transform: capitalize;
  color: #000;
}

.about-ethics__title .accent {
  color: var(--bsl-maroon);
}

.about-ethics__text {
  padding-top: .8rem;
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-ink);
}

/* ---------------------------------------------------------- vision 2030 */
/* min-height, not height: the plate sits 46.6rem down and must be able to
   grow with its copy instead of being cut off by a fixed section box. */
.about-vision {
  position: relative;
  min-height: 85.8rem;
  background: #111;
}

.about-vision__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-vision>.bsl-container {
  position: relative;
  z-index: 1;
}

.about-vision__plate {
  margin-top: 46.6rem;
  min-height: 32.2rem;
  display: grid;
  grid-template-columns: 56.5rem minmax(0, 56.1rem);
  gap: 20rem;
  /* Bottom padding matters: the copy column is taller than the 322px plate
     in Figma, so without it the last lines run past the plate edge. */
  padding: 5.1rem 4rem 5.1rem 6.8rem;
  background: rgba(255, 255, 255, .87);
  backdrop-filter: blur(1.1rem);
  -webkit-backdrop-filter: blur(1.1rem);
}

.about-vision__title {
  margin-top: 4.4rem;
  font-weight: 500;
  font-size: 5.6rem;
  line-height: 6rem;
  letter-spacing: -.252rem;
  text-transform: capitalize;
  color: #000;
}

.about-vision__title .accent {
  color: var(--bsl-maroon);
}

.about-vision__text {
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-ink);
}

/* ------------------------------------------------------- proud partners */
.about-partners {
  position: relative;
  padding: 13.5rem 0 0;
  background: #fff;
  overflow: hidden;
}

.about-partners__wm {
  /* Pulled up so the motif sits behind the heading rather than starting
     level with the body copy. */
  position: absolute;
  left: 0;
  top: -36rem;
  width: 64.4rem;
  height: 78.7rem;
  object-fit: fill;
  pointer-events: none;
}

.about-partners>.bsl-container {
  position: relative;
  z-index: 1;
}

.about-partners__grid {
  display: grid;
  grid-template-columns: 76.9rem minmax(0, 1fr);
  gap: 12.6rem;
  align-items: start;
}

.about-partners__img {
  width: 76.9rem;
  height: 67.3rem;
  object-fit: cover;
}

.about-partners__body {
  padding-top: 13.3rem;
}

.about-partners__title {
  font-weight: 500;
  font-size: 6rem;
  line-height: 6.4rem;
  letter-spacing: -.27rem;
  text-transform: capitalize;
  color: #000;
}

.about-partners__title .accent {
  color: var(--bsl-maroon);
}

.about-partners__text {
  margin-top: 4.8rem;
  max-width: 63.3rem;
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: -.066rem;
  color: var(--bsl-ink);
}

/* ==========================================================================
   AMIR PANEL — shared by About Us and Leadership
   Figma "Group 427320515": 1533x762, grey slab inset 92px from the top
   ========================================================================== */
/* Figma: partners ends y=4503, amir group starts y=4639 -> 136px. */
.amir {
  padding: 13.6rem 0 0;
  background: #fff;
}

.amir--top {
  padding-top: 7.2rem;
}

.amir__panel {
  position: relative;
  height: 76.2rem;
}

.amir__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9.2rem;
  width: 153.2rem;
  max-width: 100%;
  height: 67rem;
  background: #f3f3f3;
}

.amir__wm {
  position: absolute;
  left: 0;
  top: 9.2rem;
  width: 54.7rem;
  height: 67rem;
  object-fit: fill;
  pointer-events: none;
}

.amir__deco {
  position: absolute;
  left: 123.5rem;
  top: 26rem;
  width: 25.1rem;
  height: 31.1rem;
  opacity: .8;
}

.amir__portrait {
  position: absolute;
  left: 86.9rem;
  top: 0;
  width: 66.4rem;
  height: 76.2rem;
  display: block;
}

.amir__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amir__body {
  position: absolute;
  left: 14.8rem;
  top: 23.1rem;
  width: 60rem;
  z-index: 2;
}

.amir__title {
  font-weight: 500;
  font-size: 6rem;
  line-height: 6.4rem;
  letter-spacing: -.06rem;
  text-transform: capitalize;
  color: var(--bsl-maroon);
}

.amir__role {
  margin-top: 4.4rem;
  font-size: 2.4rem;
  line-height: 2.6rem;
  letter-spacing: -.024rem;
  text-transform: capitalize;
  color: #606060;
}

.amir__text {
  margin-top: 6rem;
  max-width: 53.9rem;
  font-size: 2rem;
  line-height: 3.1rem;
  letter-spacing: -.02rem;
  color: #000;
}

/* ==========================================================================
   TEAM — shared by About Us and Leadership
   The Figma row runs off the right edge of the artboard, so it is built as a
   horizontally scrollable rail: same look, but usable at every width.
   ========================================================================== */
/* Figma: amir ends y=5401, team title y=5565 -> 16.4rem top; captions end
   y=6418, footer group starts y=6633 -> 21.5rem bottom. */
/* Padding was set for the old card rail. The leadership panels carry their
   own internal spacing, so the band no longer needs the deep tail. */
.team {
  position: relative;
  padding: 12rem 0 12rem;
  background: #fff;
  overflow: hidden;
}

.team__wm {
  position: absolute;
  right: 0;
  top: 0;
  width: 68.6rem;
  height: 84rem;
  object-fit: fill;
  pointer-events: none;
}

.team__wm--left {
  right: auto;
  left: 0;
}

.team>.bsl-container {
  position: relative;
  z-index: 1;
}

.team__title {
  /* Figma: title baseline box ends y=5639, cards start y=5730 -> ~9rem.
     The old 16.5rem left a large dead band under the heading. */
  margin-bottom: 9rem;
  font-weight: 500;
  font-size: 7.2rem;
  line-height: 7.7rem;
  letter-spacing: -.324rem;
  text-transform: capitalize;
  color: #000;
}

.team__title--center {
  text-align: center;
}

.team__title .accent {
  color: var(--bsl-maroon);
}

/* --- Leadership profiles -------------------------------------------------
   Figma about-us #1:23179. Two panels rather than the old card rail: the
   Chairman sits on a grey plate with the portrait bleeding off its right
   edge, the CEO pairs an offset maroon block behind the portrait with a
   three-paragraph biography. */
.leader {
  position: relative;
}

/* Chairman is .leader-panel, CEO is .leader -- cover both adjacencies. */
.leader+.leader,
.leader-panel+.leader,
.leader+.leader-panel {
  margin-top: 12rem;
}

.leader-panel {
  position: relative;
  /* Figma 1:23218 plate 1532x717. Copy occupies the left 52.9%; the portrait
     COMPONENT 1:23230 (721x802) is layered over the right 47.1% and its
     bottom aligns with the plate, so the head clears the grey by 85/717. */
  background: #f3f3f3;
  /* Figma: the portrait clears the plate top by 85px. A percentage here would
     resolve against the container WIDTH, so use the design value directly. */
  margin-top: 8.5rem;
  /* padding-right: 47.1%; */
  margin-bottom: 100px;
}

.leader-panel__wm {
  position: absolute;
  left: 0;
  top: 0;
  width: 54.7rem;
  max-width: 60%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: .5;
}

.leader-panel__deco {
  position: absolute;
  right: 34%;
  top: 22%;
  width: 25.1rem;
  height: auto;
  opacity: .8;
  pointer-events: none;
}

.leader-panel__body {
  position: relative;
  z-index: 2;
  /* This centers the text horizontally */
  text-align: center; 
  padding: 0;
}

/* Cutout portrait: bottom-aligned to the plate, overhanging its top edge.
   Absolute so the overhang never inflates the plate's own height. */
.leader-panel__portrait {
  /* position: absolute;
  right: 0;
  bottom: 70px;
  z-index: 1;
  width: 47.1%; */
  height: auto;
  display: none;
  margin-left: 33%;
  margin-top: -130px;
}

.leader__role {
  /* Figma 1:23221 CHAIRMAN 24px w400 #821445 */
  margin: 0 0 1.6rem;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--bsl-maroon);
}

.leader__name {
  /* Figma 1:23220 33px w500 #000, two lines at 106px tall */
  margin: 0 0 4.8rem;
  font-weight: 500;
  font-size: 3.3rem;
  line-height: 4.2rem;
  text-transform: uppercase;
  color: #000;
}

.leader__name--sm {
  text-transform: uppercase;
}

/* Pull-quote. Figma draws the marks as vectors: the opener above the copy
   (1:23227) and the closer below-right of it (1:23224). */
.leader__quote {
  position: relative;
  margin: 0;
  max-width: 61.4rem;
  padding: 4.4rem 0 5.2rem;
}

.leader__quote::before,
.leader__quote::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 5.3rem;
  height: 4.4rem;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Figma 1:23227 (opening, above the copy) and 1:23224 (closing, below-right)
   are squared slabs with a straight tail, not the font's curly quotes. */
.leader__quote::before {
  left: 0;
  top: 0;
  background-image: url("../images/quote-open.svg");
}

.leader__quote::after {
  right: 14%;
  bottom: 0;
  background-image: url("../images/quote-close.svg");
}

.leader__quote p {
  /* Figma 1:23223 27px w400 #000 @ 54% */
  margin: 0;
  font-weight: 400;
  font-size: 2.7rem;
  line-height: 3.8rem;
  color: rgba(0, 0, 0, .54);
}

/* CEO ---------------------------------------------------------------------
   Figma: photo 1:23183 476x478 at x=176; maroon square 1:23182 218x218 at
   x=126,y=5553 -- 46% of the photo, offset up-and-left ~50px. Copy column
   1:23237 starts at x=765 (42.5% across) and runs 903 wide. */
.leader--ceo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 11.3rem;
  align-items: start;
}

/* Figma 1:23181: geometric texture behind the portrait, bleeding off the
   left edge of the container. Decorative only. */
.leader--ceo::before {
  /* Decorative only: bound it to the section box (plus a small bleed) rather
     than the Figma node's raw 1219px, which overhung the content by ~400px
     and left a dead band above the Amir panel. */
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  margin-left: -50vw;
  top: -7.6rem;
  bottom: -7.6rem;
  width: 99.5rem;
  max-width: 60vw;
  background: url("../images/leader-ceo-bg.png") left top / cover no-repeat;
  pointer-events: none;
}

.leader--ceo>* {
  position: relative;
  z-index: 1;
}

.leader__figure {
  position: relative;
  padding: 2.8rem 0 0 2.8rem;
}

.leader__figure::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: 46%;
  height: 46%;
  background: var(--bsl-maroon);
  opacity: .57;
}

.leader__figure img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.leader__bio {
  /* Figma 1:23237 22px w400 #575757 */
  margin: 0 0 2.4rem;
  font-size: 2.2rem;
  line-height: 3.2rem;
  color: #575757;
}

.leader__cta {
  margin-top: 1.2rem;
}

/* Flex, not grid: the auto-scroll appends cloned cards to make the rail
   loop, and grid-auto-flow:column would keep re-fitting them into the same
   track sizing instead of extending the scrollable width. */
.team-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 3.5rem;
  list-style: none;
  margin: 0;
  /* overflow-x:auto makes the y axis compute to auto as well, so the
     name/role captions under each photo are inside this scroll box and need
     room rather than being allowed to spill out of it. */
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* The captions live inside this scroll box, so it must be tall enough for
     them: 59.4rem photo (42.4rem at the Figma 424:594 ratio) + 3.1rem
     lead-in + 3 caption lines so a wrapping name still clears. Using
     padding rather than min-height keeps the box honest when a card grows. */
  padding-block-end: 1.6rem;
  /* Auto-scrolled by initTeamAutoScroll(); the scrollbar would read as
     chrome on a marquee, so hide it while keeping the rail scrollable. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-grid::-webkit-scrollbar {
  display: none;
}

.team-grid {
  cursor: grab;
}

.team-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Suppress the native image drag ghost while swiping the rail. */
.team-grid.is-dragging img {
  pointer-events: none;
}

.team-grid:focus-visible {
  outline: .2rem solid var(--bsl-maroon);
  outline-offset: .4rem;
}

/* ---- rail + arrow controls ---- */
/* Figma runs the 4th card past the right frame edge (x=1511+424=1935 > 1800),
   so the rail bleeds out of the container's right gutter -- a gap there is
   wrong. Negative margin + matching padding keeps the first card aligned to
   the container while the track continues to the viewport edge. */
.team-rail {
  position: relative;
  /* Bleed to the right viewport edge: the container is centred, so the
     distance from its right edge to the viewport is (100vw - width)/2, and
     the gutter sits inside that. max(0px, ...) keeps it from pulling inward
     once the viewport is narrower than the container. */
  margin-right: calc(0px - max(0px, (100vw - var(--bsl-container)) / 2) - var(--bsl-gutter));
}

.team-nav {
  position: absolute;
  top: 29.7rem;
  /* half the 59.4rem photo, so arrows sit on the image */
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  padding: 0;
  border: .1rem solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background: #fff;
  color: var(--bsl-maroon);
  cursor: pointer;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .14);
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

.team-nav svg {
  width: 2.4rem;
  height: 2.4rem;
}

.team-nav:hover {
  background: var(--bsl-maroon);
  color: #fff;
}

.team-nav:focus-visible {
  outline: .2rem solid var(--bsl-maroon);
  outline-offset: .3rem;
}

/* Inside the rail, not outside it: at -2.2rem the prev button sat beyond the
   container's left edge and was cut off by the page. */
.team-nav--prev {
  left: 1.6rem;
}

.team-nav--next {
  right: 1.6rem;
}

/* Hidden from pointer users only when JS says there is nothing further that
   way; the auto-scroll loops, so normally both stay live. */
.team-nav[hidden] {
  display: none;
}

.team-grid>.team-card {
  flex: 0 0 42.4rem;
  width: 42.4rem;
}

/* Snap points fight the rAF drift, so they are only enabled where the
   animation is off (reduced motion) and the rail is purely manual. */
@media (prefers-reduced-motion: reduce) {
  .team-grid {
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .team-grid>.team-card {
    scroll-snap-align: start;
  }
}

/* Cards are flex items: without min-width:0 the long role strings refuse to
   wrap and get clipped by the rail's overflow instead. */
.team-grid>.team-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Hover: lift the card and slowly zoom the portrait. Shared by "Our Team"
   (leadership) and "Meet our leadership" (about-us) -- same component. */
.team-card {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.team-card__photo {
  aspect-ratio: 424 / 594;
  overflow: hidden;
  background: var(--bsl-grey-100);
  position: relative;
}

.team-card__photo img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(130, 20, 69, 0) 45%, rgba(130, 20, 69, .55) 100%);
  transition: opacity .45s ease;
}

.team-card:hover {
  transform: translateY(-.8rem);
}

.team-card:hover .team-card__photo img {
  transform: scale(1.06);
}

.team-card:hover .team-card__photo::after {
  opacity: 1;
}

.team-card:hover .team-card__name {
  color: var(--bsl-maroon);
}

.team-card__name {
  transition: color .3s ease;
}

@media (prefers-reduced-motion: reduce) {

  .team-card,
  .team-card__photo img {
    transition: none;
  }

  .team-card:hover {
    transform: none;
  }

  .team-card:hover .team-card__photo img {
    transform: none;
  }
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma: name 30px/36 ls -0.90 at 31px below the photo; role 18px/36. */
.team-card__name {
  margin-top: 3.1rem;
  font-weight: 500;
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.09rem;
  color: var(--bsl-ink);
  text-transform: capitalize;
  overflow-wrap: break-word;
}

.team-card__role {
  margin-top: 0;
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: -.018rem;
  color: #647380;
  overflow-wrap: break-word;
}

/* ==========================================================================
   SUPPLIERS — Figma frame "suppliers" #1:34928 (1800×4286)
   ========================================================================== */
/* Figma "Rectangle 4313": 1533x913 linear #FFFFFF -> #F5F5F5, top to bottom */
.sup-principles {
  position: relative;
  padding: 13.7rem 0 0;
  /* Figma 1:12350 -- this band sits on the frame's plain white ground; the
     grey ramp that used to be here does not exist on the board. */
  background: #fff;
  /* overflow: hidden; */
}

.sup-principles__wm {
  /* Figma "Rectangle 4327" (1:12367): 734 x 870 at x-31, y2464 -- which is
     719 above this band's own top edge. */
  position: absolute;
  left: -3.1rem;
  top: -77.9rem;
  width: 73.4rem;
  height: 87rem;
  object-fit: fill;
  opacity: .1;
  /* Figma 1:12367 carries rotation = pi, which is what throws the motif's ink
     against the left page edge instead of into the middle of the column. */
  transform: rotate(180deg);
  pointer-events: none;
}

.sup-principles>.bsl-container {
  position: relative;
  z-index: 1;
}

.sup-principles__figure {
  width: 151.6rem;
  max-width: 100%;
  height: 46.8rem;
  object-fit: cover;
  margin-left: 1.2rem;
}

.sup-principles__title {
  /* Figma: strap foot y3256 -> heading y3422 */
  margin: 1.8rem 0 0 1.3rem;
  font-weight: 400;
  font-size: 6.4rem;
  line-height: 3.9rem;
  letter-spacing: -.192rem;
  color: var(--bsl-maroon);
}

.sup-principles__copy {
  margin: 6rem 0 0 1.3rem;
  max-width: 146.9rem;
  padding-bottom: 16.6rem;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: .1rem;
  color: rgba(0, 0, 0, .7);
}

.sup-principles__copy p+p {
  margin-top: 2.5rem;
}

.sup-principles__link {
  margin-top: 2.5rem;
}

.sup-principles__link a {
  color: var(--bsl-maroon);
  text-decoration: underline;
}

/* ------------------------------------------------------ suppliers-banner */
.suppliers-banner {
  position: relative;
  /* Figma 1:12362: 1719 wide, inset from both page edges */
  max-width: 171.9rem;
  margin-inline: auto;
  overflow: hidden;
}

.suppliers-banner__media {
  display: block;
  width: 100%;
  /* Figma "Group 427320461" (1:12362): 1719 x 787 */
  height: 78.7rem;
}

.suppliers-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suppliers-banner__inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.72) 100%);
  display: flex;
  align-items: flex-end;
  padding-bottom: 6rem;
}

.suppliers-banner__title {
  /* Figma 1:12366: Outfit 500, 90/96.32, ls -4.05 */
  font-size: 9rem;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -.045em;
  color: #fff;
  margin: 0;
}

/* ------------------------------------------------------ suppliers-strap */
.suppliers-strap {
  background: #fff;
  /* Figma: banner ends at y3053, strap text starts y3174 -> 121px */
  padding: 12.1rem 0 0;
}

.suppliers-strap__text {
  /* Figma 1:12430: 1229 wide, #000, Outfit 500 32/41 */
  max-width: 122.9rem;
  font-weight: 500;
  font-size: 3rem;
  line-height: 4.1rem;
  color: #000;
  letter-spacing: -.05rem;
}

/* ------------------------------------------------------ portal */
.portal {
  position: relative;
  /* Figma: panel ends y5064, footer group opens y5180 -> 116px tail */
  padding: 0 0 11.6rem;
  background: #fff;
}

.portal__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 85.8rem;
  object-fit: cover;
  z-index: 0;
}

.portal>.bsl-container {
  position: relative;
  z-index: 1;
}

.portal__panel {
  position: relative;
  max-width: 153.3rem;
  margin-top: 13.9rem;
  padding: 8.6rem 8.2rem 11.6rem 10.2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.portal__deco {
  position: absolute;
  left: 63.8rem;
  top: 48.9rem;
  width: 8.5rem;
  height: 7.2rem;
  opacity: .55;
}

.portal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49.6rem;
  gap: 4rem;
  align-items: start;
}

.portal__strap {
  padding-top: .6rem;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: .1rem;
  color: rgba(0, 0, 0, .7);
}

.portal__copy {
  margin-top: 12.6rem;
  max-width: 130.4rem;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: .1rem;
  color: rgba(0, 0, 0, .7);
}

.portal__copy p+p {
  margin-top: 0;
}

.portal__closing {
  margin-top: 3rem;
  font-weight: 600;
  color: #000;
}

.portal__cta {
  margin-top: 5.2rem;
  height: 6.6rem;
  min-width: 23.7rem;
  background: #000;
  border-color: #000;
}

/* ==========================================================================
   ABOUT / LEADERSHIP / SUPPLIERS — responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .about-lead {
    padding-top: 5.6rem;
  }

  .about-lead__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem;
  }

  .about-lead__img {
    width: 100%;
    height: auto;
    aspect-ratio: 769 / 729;
  }

  .about-lead__body {
    padding-top: 0;
  }

  .about-lead__title {
    font-size: 3.6rem;
    line-height: 1.1;
    letter-spacing: -.12rem;
  }

  .about-lead__hook {
    font-size: 2rem;
    line-height: 1.3;
    margin-top: 2.4rem;
  }

  .about-lead__text {
    font-size: 1.7rem;
    line-height: 1.55;
    margin-top: 2rem;
  }

  .about-apart {
    padding-top: 5.6rem;
  }

  .about-apart__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .about-apart__panel {
    height: auto;
    padding: 3.2rem 2.8rem;
  }

  .about-apart__wm {
    display: none;
  }

  .about-apart__title {
    font-size: 3rem;
    line-height: 1.15;
  }

  .about-apart__text {
    margin: 2.4rem 0 0;
    font-size: 1.7rem;
    line-height: 1.55;
  }

  .about-apart__media {
    height: auto;
    aspect-ratio: 769 / 590;
  }

  .about-ethics {
    padding: 5.6rem 0;
  }

  .about-ethics__wm,
  .about-partners__wm,
  .team__wm,
  .sup-principles__wm {
    display: none;
  }

  .about-ethics__rule {
    margin-bottom: 2.8rem;
  }

  .about-ethics__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-ethics__title {
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .about-ethics__text {
    font-size: 1.7rem;
    line-height: 1.55;
    padding-top: 0;
  }

  .about-vision {
    height: auto;
  }

  .about-vision__bg {
    height: 32rem;
    inset: 0 0 auto 0;
  }

  .about-vision__plate {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 24rem;
    min-height: 0;
    padding: 3.2rem 2.4rem;
  }

  .about-vision__title {
    margin-top: 0;
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .about-vision__text {
    font-size: 1.7rem;
    line-height: 1.55;
  }

  .about-partners {
    padding-top: 5.6rem;
  }

  .about-partners__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem;
  }

  .about-partners__img {
    width: 100%;
    height: auto;
    aspect-ratio: 769 / 673;
  }

  .about-partners__body {
    padding-top: 0;
  }

  .about-partners__title {
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .about-partners__text {
    font-size: 1.7rem;
    line-height: 1.55;
    margin-top: 2rem;
  }

  .amir,
  .amir--top {
    padding-top: 5.6rem;
  }

  .amir__panel {
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    background: #f3f3f3;
  }

  .amir__panel::before,
  .amir__wm,
  .amir__deco {
    display: none;
  }

  .amir__portrait {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 664 / 762;
  }

  .amir__portrait img {
    aspect-ratio: 664 / 762;
  }

  .amir__body {
    position: static;
    width: auto;
    padding: 3.2rem 2.8rem;
  }

  .amir__title {
    font-size: 2.8rem;
    line-height: 1.15;
  }

  .amir__role {
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .amir__text {
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .team {
    padding: 5.6rem 0;
  }

  .team__title {
    margin-bottom: 3.2rem;
    font-size: 3rem;
    line-height: 1.15;
    letter-spacing: -.08rem;
  }

  /* Leadership panels stack at narrow widths. */
  .leader-panel {
    display: flex !important;
    flex-direction: column !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 4rem !important;
  }

  .leader-panel__body {
    padding: 3.2rem 2rem 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .leader-panel__portrait {
    margin-left: 13%;
  }

  .leader__quote p {
    font-size: 2.2rem;
    padding: 21px 0;
  }

  .leader-panel__deco {
    display: none !important;
  }

  .leader__role {
    font-size: 1.8rem !important;
    letter-spacing: 0.05rem !important;
    word-break: normal !important;
  }

  .leader__name {
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 2rem !important;
    word-break: normal !important;
  }

  .leader__quote {
    padding: 2rem 0 2.4rem !important;
  }

  .leader__figure {
    padding: 1.6rem 0 0 1.6rem;
    max-width: 32rem;
  }

  .leader+.leader,
  .leader-panel+.leader {
    margin-top: 4rem;
  }

  /* Our Team rail (re-added below the leadership profiles). */
  .team-grid {
    gap: 1.6rem;
  }

  .team-grid>.team-card {
    flex-basis: 26rem;
    width: 26rem;
  }

  /* Inside the gutter at this width, so keep the arrows over the cards. */
  .team-nav {
    top: 18.2rem;
    width: 4.4rem;
    height: 4.4rem;
  }

  .team-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .team-nav--prev {
    left: .4rem;
  }

  .team-nav--next {
    right: .4rem;
  }

  .team-card__name {
    margin-top: 1.6rem;
    font-size: 2rem;
    line-height: 1.3;
  }

  .team-card__role {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .sup-principles {
    padding-top: 5.6rem;
  }

  .sup-principles__figure {
    width: 100%;
    height: auto;
    aspect-ratio: 1516 / 468;
    margin-left: 0;
  }

  .sup-principles__title {
    margin: 3.2rem 0 0;
    font-size: 3rem;
    line-height: 1.2;
  }

  .sup-principles__copy {
    margin: 2.4rem 0 0;
    padding-bottom: 5.6rem;
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .portal {
    padding-bottom: 5.6rem;
  }

  .portal__bg {
    height: 30rem;
  }

  .portal__panel {
    margin-top: 22rem;
    padding: 3.2rem 2.4rem;
  }

  .portal__deco {
    display: none;
  }

  .portal__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .portal__strap {
    font-size: 1.7rem;
    line-height: 1.5;
  }

  .portal__copy {
    margin-top: 2.8rem;
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .portal__cta {
    margin-top: 3.2rem;
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   TRAINING — Figma frame "training" #1:532 (1800×5058)
   ========================================================================== */
.courses {
  position: relative;
  padding: 13.8rem 0 16.9rem;
  background: #fff;
  /* overflow: hidden; */
}

/* Background texture motifs: left-anchored (.courses__wm-left) and right-anchored (.courses__wm) */
.courses__wm-left {
  position: absolute;
  left: 0;
  top: -36rem;
  width: 93.7rem;
  height: 114.7rem;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

.courses__wm {
  position: absolute;
  right: 0;
  top: -190px;
  width: 37.4rem;
  height: 51.5rem;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
  z-index: 0;
}

.courses>.bsl-container {
  position: relative;
  z-index: 1;
}

.courses__layout {
  display: grid;
  grid-template-columns: 42.9rem minmax(0, 1fr);
  column-gap: 14.7rem;
  align-items: start;
}

.courses__tabs {
  position: relative;
  display: grid;
}

.courses__tabs::after {
  content: "";
  position: absolute;
  right: -7.3rem;
  top: 0;
  width: .1rem;
  /*height: 110.8rem;*/
  height: 110%;
  background: linear-gradient(180deg, rgba(192, 192, 192, 0) 0%, #c0c0c0 18%, #c0c0c0 82%, rgba(192, 192, 192, 0) 100%);
}

.course-tab {
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2.1rem 2.4rem 2.1rem 3.7rem;
  min-height: 9.3rem;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 3.6rem;
  letter-spacing: -.028rem;
  color: #000;
  border-bottom: .1rem solid #c0c0c0;
  transition: color .25s ease, background .35s ease;
}

.course-tab:last-child {
  border-bottom: 0;
}

.course-tab:hover {
  color: var(--bsl-maroon);
}

.course-tab.is-active {
  min-height: 10.3rem;
  color: #fff;
  border-bottom-color: transparent;
  background: linear-gradient(180deg, #821445 0%, #63002c 100%);
  font-size: 2.8rem;
  line-height: 2.8rem;
  letter-spacing: -.084rem;
}

.courses__title {
  font-weight: 500;
  font-size: 5.1rem;
  line-height: 5.5rem;
  letter-spacing: -.153rem;
  color: #000;
}

.courses__intro {
  margin: 2.7rem 0 0 .7rem;
  max-width: 91.4rem;
  font-size: 2.4rem;
  line-height: 3.1rem;
  letter-spacing: -.072rem;
  color: var(--bsl-grey-500);
}

/* Figma "Block 1" paints this permanently blue, but it is presented here as
   the same interaction as the .course-row list below it: grey at rest, and
   the blue panel plus its description on hover only. */
.course-feature {
  position: relative;
  display: grid;
  grid-template-columns: 20.2rem minmax(0, 1fr) 8.2rem;
  align-items: center;
  gap: 4.5rem;
  margin-top: 5.4rem;
  padding: .7rem;
  min-height: 9rem;
  background: linear-gradient(180deg, #e6e6e6 0%, #fbfbfb 100%);
  border: .1rem solid var(--bsl-grey-150);
  color: var(--bsl-grey-800);
  transition: background .35s ease, border-color .3s ease,
    min-height .35s ease, color .3s ease;
}

@media (hover: hover) {
  .course-feature:hover {
    background: linear-gradient(90deg, #3c5fa8 0%, #203e7c 100%);
    border-color: #203e7c;
    color: #fff;
    min-height: 20.5rem;
  }
}

.course-feature:focus-visible {
  background: linear-gradient(90deg, #3c5fa8 0%, #203e7c 100%);
  border-color: #203e7c;
  color: #fff;
  min-height: 20.5rem;
}

.course-feature__img {
  width: 20.2rem;
  height: 7.7rem;
  object-fit: cover;
  transition: height .35s ease;
}

@media (hover: hover) {
  .course-feature:hover .course-feature__img {
    height: 19rem;
  }
}

.course-feature:focus-visible .course-feature__img {
  height: 19rem;
}

.course-feature__title {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: -.048rem;
}

/* Hidden at rest; revealed with the blue panel. */
.course-feature__text {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  max-width: 43.8rem;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: -.036rem;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}

@media (hover: hover) {
  .course-feature:hover .course-feature__text {
    max-height: 9rem;
    opacity: 1;
    margin-top: 1.4rem;
  }
}

.course-feature:focus-visible .course-feature__text {
  max-height: 9rem;
  opacity: 1;
  margin-top: 1.4rem;
}

/* Figma: white ring (#09456A hairline) around a solid #821445 disc. At rest
   the row is grey, so the badge starts as a plain outline and fills in with
   the blue panel. */
.course-feature__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: transparent;
  border: .1rem solid var(--bsl-grey-200);
  color: var(--bsl-grey-500);
  transition: transform .3s ease, width .3s ease, height .3s ease,
    background-color .3s ease, border-color .3s ease, color .3s ease;
}

@media (hover: hover) {
  .course-feature:hover .course-feature__badge {
    width: 5.3rem;
    height: 5.3rem;
    background: #fff;
    border-color: #09456a;
    color: #fff;
  }
}

.course-feature:focus-visible .course-feature__badge {
  width: 5.3rem;
  height: 5.3rem;
  background: #fff;
  border-color: #09456a;
  color: #fff;
}

.course-feature__badge::before {
  content: "";
  position: absolute;
  width: 4.02rem;
  height: 4.02rem;
  border-radius: 50%;
  background: var(--bsl-maroon);
  opacity: 0;
  transition: opacity .3s ease;
}

@media (hover: hover) {
  .course-feature:hover .course-feature__badge::before {
    opacity: 1;
  }
}

.course-feature:focus-visible .course-feature__badge::before {
  opacity: 1;
}

.course-feature__badge svg {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
}

.course-feature:hover .course-feature__badge {
  transform: rotate(45deg);
}

.course-list {
  margin-top: 1.1rem;
  display: grid;
  gap: .6rem;
}

/* Resting: Figma "Rectangle 4235" -- 966x90, #E6E6E6 -> #FBFBFB.
   Hover: the row expands into the navy panel (#1A3568, the same blue as the
   course-details "Key Learning Outcomes" card) and reveals the summary. */
.course-row {
  display: grid;
  grid-template-columns: 20.2rem minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 3.8rem;
  min-height: 9rem;
  padding: .7rem 2rem .7rem .7rem;
  background: linear-gradient(180deg, #e6e6e6 0%, #fbfbfb 100%);
  border: .1rem solid var(--bsl-grey-150);
  transition: background .35s ease, border-color .3s ease, min-height .35s ease;
}

@media (hover: hover) {
  .course-row:hover {
    background: linear-gradient(90deg, #3C5FA8 0%, #203E7C 100%);
    border-color: #203E7C;
    min-height: 14.6rem;
  }

  .course-row:hover .course-row__media {
    height: auto;
  }
}

.course-row:focus-visible {
  background: linear-gradient(90deg, #3C5FA8 0%, #203E7C 100%);
  border-color: #203E7C;
  min-height: 14.6rem;
}

.course-row__media {
  position: relative;
  width: 20.2rem;
  height: 7.7rem;
  overflow: hidden;
}

.course-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) {
  .course-row:hover .course-row__media img {
    transform: scale(1.06);
  }
}

.course-row:focus-visible .course-row__media img {
  transform: scale(1.06);
}

.course-row__media::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 7rem;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.course-row__tag {
  position: absolute;
  right: 1.1rem;
  bottom: 1.6rem;
  z-index: 2;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 2.4rem;
  letter-spacing: -.024rem;
  color: #fff;
}

.course-row__body {
  min-width: 0;
}

.course-row__title {
  display: block;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 2.4rem;
  letter-spacing: -.044rem;
  color: var(--bsl-grey-800);
  transition: color .3s ease;
}

/* Collapsed at rest, revealed on hover. Height is driven off max-height
   rather than grid-template-rows: the row uses align-items:center, so the
   body cell is auto-height and an 0fr track still left the text taking up
   space. max-height:0 + overflow:hidden collapses it reliably. */
.course-row__text {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 1.6rem;
  line-height: 2.2rem;
  letter-spacing: -.016rem;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}

.course-row__text>span {
  display: block;
}

@media (hover: hover) {
  .course-row:hover .course-row__title {
    color: #fff;
  }
}

.course-row:focus-visible .course-row__title {
  color: #fff;
}

@media (hover: hover) {
  .course-row:hover .course-row__text {
    max-height: 9rem;
    opacity: 1;
    margin-top: 1rem;
  }
}

.course-row:focus-visible .course-row__text {
  max-height: 9rem;
  opacity: 1;
  margin-top: 1rem;
}

.course-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: .1rem solid var(--bsl-grey-200);
  color: var(--bsl-grey-500);
  background: transparent;
  transition: width .3s ease, height .3s ease, background-color .3s ease,
    border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.course-row__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  transition: width .3s ease, height .3s ease;
}

/* Hover: a maroon disc sitting inside a thick white ring. The ring is drawn
   with a white border rather than an outer element, so the disc stays
   perfectly concentric as the button grows. */
@media (hover: hover) {
  .course-row:hover .course-row__icon {
    width: 5.2rem;
    height: 5.2rem;
    background: var(--bsl-maroon);
    border: .4rem solid #fff;
    color: #fff;
  }
}

.course-row:focus-visible .course-row__icon {
  width: 5.2rem;
  height: 5.2rem;
  background: var(--bsl-maroon);
  border: .4rem solid #fff;
  color: #fff;
}

@media (hover: hover) {
  .course-row:hover .course-row__icon svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}

.course-row:focus-visible .course-row__icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

@media (prefers-reduced-motion: reduce) {

  .course-row,
  .course-row__text {
    transition: background .2s ease, opacity .2s ease;
  }
}

/* -------------------------------------------------- advancing excellence */
.advancing {
  position: relative;
  padding: 17rem 0 0;
  height: 91.4rem;
  background: var(--bsl-maroon);
  overflow: hidden;
}

.advancing__wm {
  position: absolute;
  left: 94.1rem;
  top: 0;
  width: 85.7rem;
  height: 92.3rem;
  object-fit: fill;
  pointer-events: none;
}

.advancing>.bsl-container {
  position: relative;
  z-index: 1;
}

.advancing__grid {
  display: grid;
  grid-template-columns: minmax(0, 70.9rem) 65.8rem;
  gap: 12.7rem;
  align-items: start;
}

.advancing__title {
  font-weight: 400;
  font-size: 6.4rem;
  line-height: 6.4rem;
  letter-spacing: -.192rem;
  color: rgba(255, 255, 255, .65);
}

.advancing__title strong {
  font-weight: 500;
  color: #fff;
}

.advancing__copy {
  margin-top: 3.9rem;
  font-family: var(--bsl-font-alt);
  font-size: 2rem;
  line-height: 2.7rem;
  letter-spacing: -.01rem;
  color: #fff;
  /*text-transform: capitalize;*/
}

.advancing__copy p+p {
  margin-top: 2.7rem;
}

.advancing__img {
  width: 65.8rem;
  height: 65.8rem;
  object-fit: cover;
  margin-top: -2.8rem;
}

/* -------------------------------------------------------- partnerships */
.partners {
  position: relative;
  padding: 13.2rem 0 9.3rem;
  background: #fff;
  overflow: hidden;
}

/* Left-anchored counterpart so the page alternates rather than repeating the
   same right-hand band twice. bsl-texture-left.png is already weighted left. */
.partners__wm {
  position: absolute;
  left: 0;
  top: 0;
  width: 68.6rem;
  height: 84rem;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}

.partners>.bsl-container {
  position: relative;
  z-index: 1;
}

.partners__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  margin-bottom: 8.7rem;
}

.partners__title {
  font-weight: 500;
  font-size: 6.4rem;
  line-height: 5.6rem;
  letter-spacing: -.192rem;
  color: #000;
}

.partners__title .accent {
  color: var(--bsl-maroon);
}

.partners__strap {
  flex: none;
  max-width: 51rem;
  padding-top: .8rem;
  font-family: var(--bsl-font-alt);
  font-size: 2rem;
  line-height: 2.7rem;
  letter-spacing: -.01rem;
  color: rgba(0, 0, 0, .69);
  /*text-transform: capitalize;*/
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(6, 25.4rem);
  gap: .3rem;
  justify-content: center;
}

.partners__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25.5rem;
  background: var(--bsl-grey-050);
  position: relative;
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.partners__tile img {
  max-width: 20.4rem;
  max-height: 20.4rem;
  width: auto;
  object-fit: contain;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* Partner logos sit muted in the grid and come forward under the pointer, the
   same lift-and-shadow the service cards use. The maroon underline keeps the
   hovered tile keyed to the brand accent rather than just floating.
   Pointer devices only -- a touch screen has no hover state to leave, so the
   tiles stay in their resting (full-colour) look there. */
@media (hover: hover) {
  .partners__tile img {
    /* filter: grayscale(1); */
    opacity: .75;
  }

  .partners__tile:hover {
    background: #fff;
    transform: translateY(-.4rem);
    box-shadow: 0 1.2rem 3.2rem rgba(130, 20, 69, .12);
  }

  .partners__tile:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
  }

  .partners__tile::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: .3rem;
    background: var(--bsl-maroon);
    transition: left .35s ease, right .35s ease;
  }

  .partners__tile:hover::after {
    left: 0;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .partners__tile,
  .partners__tile img,
  .partners__tile::after {
    transition: none;
  }

  .partners__tile:hover {
    transform: none;
  }

  .partners__tile:hover img {
    transform: none;
  }
}

/* ==========================================================================
   OVERLAY HEADER ON INNER PAGES
   The header floats transparent over the first section (see
   .nh-inner--overlay in new-home.css). Two things have to hold for the white
   nav to stay legible against the photo behind it:
     1. the first section must be tall enough to sit under the fixed header
     2. the dark top gradient must reach past the header's ~92px
   The full-height heroes (777px) already satisfy both. The 322px `--short`
   banner does not: its plate sits flush at the bottom, so it gains header-
   height padding and a gradient that covers the nav band.
   ========================================================================== */
/* Both conditions are now satisfied by the shared --bsl-hero-h banner (half
   the viewport, floor 38rem) plus the full-height top gradient, so the
   `--short` banner needs no height compensation of its own. The crumb bar is
   anchored to the bottom of the banner and so clears the nav on every page. */

/* ==========================================================================
   COURSE DETAILS — Figma frame "course-details" #1:35466 (1800×5521)
   ========================================================================== */
/* Figma: hero band ends y=322, BSL kicker starts y=387 -> 6.5rem. */
.course-intro {
  position: relative;
  padding: 6.5rem 0 0;
  background: #fff;
  overflow: hidden;
}

/* Figma "Rectangle 4286" (1:35465): x=0 y=315, 937x1147, rotation = pi,
   IMAGE fill at 53%. The rotation is what turns the triangles to face into
   the page; without it the motif reads mirrored against the design. */
.course-intro__wm {
  /* Pulled up so the motif sits behind the heading rather than starting
     level with the body copy. */
  position: absolute;
  left: 0;
  top: -36rem;
  width: 128rem;
  height: 156.7rem;
  object-fit: fill;
  pointer-events: none;
  /* bsl-texture-maroon-l.png is weighted to its left, so no flip is needed to
     keep the dense triangles against the page edge. Scaled up from the Figma
     937x1147 so the motif reads at full-width viewports. */
  opacity: .53;
}

.course-intro>.bsl-container {
  position: relative;
  z-index: 1;
}

/* Figma: title col x=144 w=649, strap x=912 w=655 -> 11.9rem gap. */
.course-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

/* Figma: 26/26 wt600 with a wide +2.6 tracking. */
.course-intro__kicker {
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 2.6rem;
  letter-spacing: .26rem;
  color: var(--bsl-grey-600);
}

.course-intro__title {
  margin-top: 2.6rem;
  /* Figma: kicker box ends y=413, title starts y=451 */
  font-weight: 600;
  font-size: 7.8rem;
  line-height: 8rem;
  letter-spacing: -.312rem;
  color: var(--bsl-maroon);
  /* Figma 78/80 ls -3.12 */
}

.course-intro__strap {
  padding-top: 2rem;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: -.072rem;
  color: var(--bsl-grey-600);
  /* Figma 24/32 ls -0.72 */
}

.course-intro__media {
  display: grid;
  grid-template-columns: repeat(2, 73rem);
  gap: 4.1rem;
  justify-content: start;
  margin-top: 11.7rem;
}

.course-intro__media img {
  width: 73rem;
  height: 48.7rem;
  object-fit: cover;
}

.course-intro__media .is-crop-right {
  object-position: 72% center;
}

.course-intro__note {
  margin: 10.1rem auto 0;
  max-width: 95.9rem;
  text-align: center;
  font-size: 2.8rem;
  line-height: 3.1rem;
  letter-spacing: -.084rem;
  color: #000;
}

/* ---------------------------------------------------------- benefits */
.course-benefits {
  padding: 15.9rem 0 0;
  background: #fff;
}

/* Figma: cards 739 / 742 with a 40px gutter. */
.benefit-grid {
  display: grid;
  grid-template-columns: 73.9rem 74.2rem;
  gap: 4rem;
  justify-content: center;
}

.benefit-card {
  position: relative;
  overflow: hidden;
  min-height: 67.6rem;
  padding: 8.8rem 5.6rem 5rem 7.9rem;
  /* Figma title inset 79/88 */
  /* Warm pink gradient deepening toward the foot. The hairline is drawn with
     border-image so it can fade out down the card -- a plain `border` colour
     is flat and looked wrong against the fading fill. */
  background: linear-gradient(180deg, #fdf6f9 0%, #f7e6ee 100%);
  border: .1rem solid transparent;
  border-image: linear-gradient(180deg,
      rgba(130, 20, 69, .4) 0%,
      rgba(130, 20, 69, .18) 55%,
      rgba(130, 20, 69, 0) 100%) 1;
}

.benefit-card>*:not(.benefit-card__deco) {
  position: relative;
  z-index: 1;
}

/* Sliding triangle motif, reusing the home page's .arrow technique: CSS
   border triangles that slide in, hold, then fade out. Tinted maroon so it
   reads as the pale pink wash the Figma frame shows. */
/* Reuses the home page banner pattern verbatim (.stage > .arrow + .arrow--2
   plus .shape-top-right, see new-home.css). Those rules already load on this
   page, so only the card-specific size and tint are overridden here. */
.benefit-card .stage {
  position: absolute;
  left: 3.8rem;
  top: 3.2rem;
  z-index: 0;
  width: 26.8rem;
  height: 20rem;
  transform: scaleX(-1);
  pointer-events: none;
}

/* Right card: stage anchored to the RIGHT edge and unmirrored, so the
   triangles point the opposite way and the slide travels rightward. */
.benefit-card--right .stage {
  left: auto;
  right: 3.8rem;
  transform: none;
}

.benefit-card--right .arrow {
  animation-name: arrow-move-right;
}

@keyframes arrow-move-right {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

  35% {
    opacity: 1;
    transform: translateX(0);
  }

  65% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* Offset pair, as on the home page banner: the small triangle sits up and to
   the left of the larger one so the two overlap rather than align. */
.benefit-card .arrow {
  border-bottom-width: 7rem;
  border-right-width: 7rem;
  border-right-color: rgba(130, 20, 69, .16);
  right: 2%;

}

.benefit-card .arrow--2 {
  top: 2rem;
  right: 3rem;
  border-bottom-width: 9.5rem;
  border-right-width: 9.5rem;
  border-right-color: rgba(130, 20, 69, .16);
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card .arrow {
    animation: none;
    opacity: 1;
  }
}

.benefit-card__title {
  font-weight: 500;
  font-size: 3.9rem;
  line-height: 3.2rem;
  letter-spacing: -.117rem;
  color: var(--bsl-maroon);
}

.benefit-card__list {
  margin-top: 5.7rem;
}

.benefit-card__list li {
  font-size: 2.2rem;
  line-height: 3.1rem;
  letter-spacing: -.022rem;
  color: var(--bsl-grey-900);
  padding-left: 3rem;
}

.benefit-card__list li+li {
  margin-top: 1.4rem;
}

.benefit-card__list strong {
  font-weight: 600;
}

.benefit-card__list--bold li {
  font-weight: 600;
}

.benefit-card__list--bold li strong {
  font-weight: 700;
}

/* Figma: panels 745 wide, 38px gutter; benefits group ends y=2223,
   panels start y=2261 -> 3.8rem. */
.outcome-grid {
  display: grid;
  grid-template-columns: 74.5rem 74.5rem;
  gap: 3.8rem;
  justify-content: center;
  margin-top: 3.8rem;
}

/* Figma "Group 427320446" (maroon, x+47/y+495) and "Group 427320460"
   (navy, x+476/y+39) -- the real overlapping-triangle artwork, 250x202,
   positioned at the insets measured off the frame. */
.outcome-card {
  position: relative;
  overflow: hidden;
  min-height: 73.4rem;
  padding: 8.7rem 6rem 6rem 6.9rem;
  color: #fff;
  /* Figma title inset 69/87 */
}

.outcome-card>*:not(.outcome-card__deco) {
  position: relative;
  z-index: 1;
}

.outcome-card__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 25rem;
  height: 20.2rem;
  animation: bsl-drift 14s ease-in-out infinite;
}

.outcome-card--maroon {
  background: var(--bsl-maroon);
}

.outcome-card--navy {
  background: #1a3568;
}

.outcome-card--maroon .outcome-card__deco {
  left: 4.7rem;
  top: 49.5rem;
}

.outcome-card--navy .outcome-card__deco {
  left: 47.6rem;
  top: 3.9rem;
  animation-delay: -7s;
}

/* Shared slow drift for the decorative shapes. */
@keyframes bsl-drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(1.2rem, -1.6rem, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-card__deco {
    animation: none;
  }
}

.outcome-card__title {
  font-weight: 500;
  font-size: 3.9rem;
  line-height: 3.2rem;
  letter-spacing: -.117rem;
  color: #fff;
}

/* Figma: title box ends y=2417, list starts y=2470 -> 5.3rem; list is
   indented a further 16px relative to the title. */
.outcome-card__list {
  margin-top: 5.3rem;
  margin-left: 1.6rem;
}

.outcome-card__list li {
  font-size: 2.2rem;
  line-height: 3.1rem;
  letter-spacing: -.022rem;
  padding-left: 3rem;
}

.outcome-card__list li+li {
  margin-top: 1.4rem;
}

/* --------------------------------------------------------- next step */
/* Figma "Rectangle 4323": 1543x357 linear gradient running bottom-to-top,
   so #F0F0F0 sits at the BOTTOM of the band and fades up to #FFFFFF. */
.next-step {
  padding: 4.5rem 0 0;
  background: linear-gradient(0deg, #f0f0f0 0%, #ffffff 100%);
}

.next-step__panel {
  /* Figma: title col starts 121px in, text col at 798px -> 677px track. */
  display: grid;
  grid-template-columns: minmax(0, 67.7rem) 62.3rem;
  gap: 0;
  min-height: 35.7rem;
  padding: 7.4rem 0 0 12.1rem;
  background: linear-gradient(180deg, #f0f0f0 0%, #f7f6f6 100%);
}

.next-step__title {
  font-weight: 400;
  font-size: 6rem;
  line-height: 7.1rem;
  letter-spacing: -.18rem;
  color: rgba(0, 0, 0, .65);
}

.next-step__title strong {
  font-weight: 500;
  color: var(--bsl-maroon);
}

.next-step__body {
  padding-top: .4rem;
}

.next-step__text {
  font-family: var(--bsl-font-alt);
  font-size: 2.4rem;
  line-height: 3.1rem;
  letter-spacing: -.012rem;
  color: rgba(0, 0, 0, .69);
  text-transform: capitalize;
}

.next-step__cta {
  margin-top: 3rem;
  min-width: 26.2rem;
}

/* ------------------------------------------------------ related courses */
/* Related courses carry the home page service-card hover
   (.services-section__card in new-home.css): a navy tile showing only the
   eyebrow and title at rest, then on hover a lighter blue wash rises, the
   blurb and EXPLORE MORE unfold from zero height, and the corner button
   flips from maroon to white. The navy values are lifted from that card so
   the two components read as one. */
.related {
  padding-top: 14.4rem;
}

.related .partners__title {
  margin-bottom: 8.5rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 51rem);
  gap: 3rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width:1600px) {
  .related-grid {
    grid-template-columns: repeat(3, 46.2rem);
  }
}

.related-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 49.1rem;
  padding: 3.2rem 3rem;
  overflow: hidden;
  border-radius: .4rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .05);
  color: #fff;
  text-decoration: none;
}

.related-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.related-card__link:hover .related-card__media {
  transform: scale(1.04);
}

/* Resting wash: transparent at the top so the photo reads, navy at the foot
   so the title always has something to sit on. */
.related-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 66, 107, 0) 0%, #2b467d 100%);
}

/* Hover wash: covers the whole tile, since the open blurb reaches higher up
   than the resting gradient does. */
.related-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(35, 72, 128, .92) 0%, rgba(30, 60, 110, .97) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}

.related-card__link:hover::after,
.related-card__link:focus-visible::after {
  opacity: 1;
}

.related-card__btn {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--bsl-maroon);
  color: #fff;
  transition: background-color .4s ease, color .4s ease, transform .3s ease;
}

.related-card__btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

.related-card__link:hover .related-card__btn,
.related-card__link:focus-visible .related-card__btn {
  background: #fff;
  color: #234880;
  transform: scale(1.1);
}

.related-card__content {
  position: relative;
  z-index: 2;
}

.related-card__eyebrow {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: .3rem;
  text-transform: uppercase;
  opacity: .8;
}

.related-card__title {
  margin: 0 0 .8rem;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: -.017rem;
  color: #fff;
  text-transform: capitalize;
}

/* Both fold out of zero height, so the title rides up as they open. */
.related-card__desc,
.related-card__action {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}

.related-card__desc {
  font-size: 1.4rem;
  line-height: 1.55;
}

.related-card__action {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.related-card__link:hover .related-card__desc,
.related-card__link:focus-visible .related-card__desc {
  max-height: 15rem;
  opacity: .85;
  margin-bottom: 1.5rem;
}

.related-card__link:hover .related-card__action,
.related-card__link:focus-visible .related-card__action {
  max-height: 3rem;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {

  .related-card__media,
  .related-card__link::after,
  .related-card__btn,
  .related-card__desc,
  .related-card__action {
    transition: opacity .2s ease;
  }
}

/* ==========================================================================
   TRAINING / COURSE DETAILS — responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .courses {
    padding: 5.6rem 0;
  }

  .courses__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.2rem;
  }

  .courses__tabs::after {
    display: none;
  }

  .course-tab {
    min-height: 0;
    padding: 1.6rem 2rem;
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .course-tab.is-active {
    min-height: 0;
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .courses__title {
    font-size: 2.8rem;
    line-height: 1.15;
  }

  .courses__intro {
    margin: 1.6rem 0 0;
    font-size: 1.7rem;
    line-height: 1.5;
  }

  .course-feature {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.6rem;
    min-height: 0;
    margin-top: 2.4rem;
  }

  .course-feature__img {
    width: 10rem;
    height: 10rem;
  }

  .course-feature__badge {
    display: none;
  }

  .course-feature__title {
    font-size: 1.8rem;
  }

  .course-feature__text {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: .8rem;
  }

  .course-row {
    grid-template-columns: 10rem minmax(0, 1fr) 3rem;
    gap: 1.6rem;
    min-height: 0;
  }

  /* No room for the expanding blue panel at this width, and :hover is not a
     real state on touch -- keep the rows compact and grey. */
  .course-row:hover,
  .course-row:focus-visible {
    min-height: 0;
  }

  .course-row__text {
    display: none;
  }

  .course-row__media {
    width: 10rem;
    height: 6rem;
  }

  .course-row__title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .advancing {
    height: auto;
    padding: 5.6rem 0;
  }

  .advancing__wm {
    display: none;
  }

  .advancing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }

  .advancing__title {
    font-size: 3rem;
    line-height: 1.15;
  }

  .advancing__copy {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 2.4rem;
  }

  .advancing__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: 0;
  }

  .partners {
    padding: 5.6rem 0;
  }

  .partners__head {
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .partners__title {
    font-size: 3rem;
    line-height: 1.15;
  }

  .partners__strap {
    font-size: 1.6rem;
    line-height: 1.5;
    padding-top: 0;
  }

  .partners__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
  }

  .partners__tile {
    height: 14rem;
  }

  .partners__tile img {
    max-width: 10rem;
    max-height: 10rem;
  }

  .course-intro {
    padding-top: 5.6rem;
  }

  .course-intro__wm {
    display: none;
  }

  .course-intro__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .course-intro__title {
    font-size: 3.4rem;
    line-height: 1.1;
    margin-top: 1.6rem;
  }

  .course-intro__strap {
    font-size: 1.7rem;
    line-height: 1.5;
    padding-top: 0;
  }

  .course-intro__media {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    margin-top: 3.2rem;
  }

  .course-intro__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 730 / 487;
  }

  .course-intro__note {
    margin-top: 3.2rem;
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .course-benefits {
    padding-top: 5.6rem;
  }

  .benefit-grid,
  .outcome-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    margin-top: 1.6rem;
  }

  .benefit-card,
  .outcome-card {
    min-height: 0;
    padding: 3.2rem 2.8rem;
  }

  .benefit-card__title,
  .outcome-card__title {
    font-size: 2.4rem;
    line-height: 1.2;
  }

  .benefit-card__list,
  .outcome-card__list {
    margin-top: 2.4rem;
  }

  .benefit-card__list li,
  .outcome-card__list li {
    font-size: 1.6rem;
    line-height: 1.5;
    padding-left: 2.4rem;
  }

  .next-step {
    padding-top: 3.2rem;
  }

  .next-step__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    min-height: 0;
    padding: 3.2rem 2.8rem;
  }

  .next-step__title {
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .next-step__text {
    font-size: 1.7rem;
    line-height: 1.5;
  }

  .next-step__cta {
    min-width: 0;
    width: 100%;
  }

  .related {
    padding-top: 5.6rem;
  }

  .related .partners__title {
    margin-bottom: 3.2rem;
  }

  .related-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .related-card__link {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 2.8rem 2.4rem;
  }

  .related-card__title {
    font-size: 2.4rem;
  }

  /* No hover on touch, so the card sits open -- and the full wash has to come
     with it, or the blurb would sit unreadable on the bare photo. */
  .related-card__link::after {
    opacity: 1;
  }

  .related-card__btn {
    background: #fff;
    color: #234880;
  }

  .related-card__desc {
    max-height: 15rem;
    opacity: .85;
    margin-bottom: 1.5rem;
  }

  .related-card__action {
    max-height: 3rem;
    opacity: .9;
  }
}

@media (max-width: 767.98px) {
  .partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-row {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .course-row__icon {
    display: none;
  }
}

/* ==========================================================================
   INSIGHTS — Figma frame "insight" #1:35107 (1800×3232)
   ========================================================================== */
.insights {
  padding: 7.5rem 0 0;
  background: #fff;
  overflow: hidden;
}

.filter-pills {
  gap: 3.4rem;
  margin: 0 0 8.5rem 1.5rem;
}

.filter-pill {
  padding: 1.4rem 2.8rem;
  border-radius: 6rem;
  font-size: 2.4rem;
  line-height: 3.1rem;
  letter-spacing: -.072rem;
  color: #000;
  background: transparent;
}

.filter-pill.is-active {
  background: #000;
  color: #fff;
  font-weight: 500;
  min-width: 22.7rem;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 47.9rem);
  gap: 4rem 4.7rem;
  justify-content: start;
  padding-left: 2.4rem;
}

.post-card__media {
  aspect-ratio: 479 / 273;
}

.post-card__tag {
  left: 2rem;
  bottom: 20px;
  padding: .4rem 1.2rem;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: -.042rem;
  text-transform: uppercase;
}

.post-card__date {
  margin: 1.3rem 0 .6rem;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: .056rem;
  color: #000;
}

.post-card__title {
  max-width: 37.7rem;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.8rem;
  letter-spacing: -.024rem;
  color: #000;
}

.post-card__more {
  margin-top: 1.8rem;
  gap: 5.1rem;
  font-family: var(--bsl-font-jakarta);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: -.048rem;
  color: var(--bsl-maroon);
}

.post-card__more svg {
  width: 2.4rem;
  height: 1.2rem;
  color: #000;
}

/* Figma "Line 24": 1538x1 #E2E2E2 sitting 63px above the pager. */
.bsl-pagination__rule {
  display: block;
  height: .1rem;
  background: #e2e2e2;
  margin: 5.6rem 0 0;
  border: 0;
}

/* Figma group 427320505: numbers on a ~51px pitch, active tile 43x43 #821445
   with NO corner radius, and bare 45x45 arrow glyphs (no ring, no border). */
.bsl-pagination {
  gap: 0;
  margin-top: 6.3rem;
  padding-bottom: 12rem;
}

.bsl-pagination a,
.bsl-pagination span {
  min-width: 5.1rem;
  height: 4.3rem;
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 2.8rem;
  letter-spacing: -.117rem;
  color: #8c8c8c;
  transition: color .25s ease, background-color .25s ease;
}

.bsl-pagination a:hover {
  color: var(--bsl-maroon);
}

.bsl-pagination .is-current {
  min-width: 4.3rem;
  width: 4.3rem;
  height: 4.3rem;
  background: var(--bsl-maroon);
  color: #fff;
  border-radius: 0;
  /* Figma has no radius on this tile */
}

/* Bare arrows: Figma draws these as plain glyphs, not circled buttons. */
.bsl-pagination__nav {
  width: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bsl-grey-600);
}

.bsl-pagination__nav svg {
  width: 2.6rem;
  height: 1.6rem;
}

.bsl-pagination__nav:hover {
  color: var(--bsl-maroon);
}

.bsl-pagination__nav--prev {
  margin-right: 4.5rem;
}

.bsl-pagination__nav--next {
  margin-left: 4.5rem;
}

/* ==========================================================================
   BLOG DETAILS — Figma frame "blog" #1:35259 (1800×4015)
   ========================================================================== */
.article {
  position: relative;
  background: #fff;
}

.article__banner {
  position: relative;
  height: 77.7rem;
  overflow: hidden;
  background: #111;
}

.article__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50.8rem;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: .64;
}

.article__panel {
  position: relative;
  z-index: 2;
  margin-top: -22.2rem;
  display: grid;
  grid-template-columns: 32.3rem minmax(0, 1fr);
  padding: 8.3rem 6rem 9rem 10.6rem;
  /* Figma "Rectangle 4313": 1533x1652 linear #F5F5F5 -> #FFFFFF, top to bottom */
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}

.article__meta-label {
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: var(--bsl-grey-500);
}

.article__meta-date {
  margin-top: .8rem;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.7rem;
  color: #000;
}

.article__share {
  margin-top: 5.2rem;
}

.article__share a {
  font-size: 1.5rem;
  line-height: 1.7rem;
  letter-spacing: .04rem;
  text-transform: uppercase;
  color: #000;
  border-bottom: .1rem solid #000;
  padding-bottom: .4rem;
}

.article__tag {
  display: inline-block;
  padding: .4rem 1.2rem;
  margin-bottom: 2.6rem;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: -.042rem;
  text-transform: uppercase;
  color: #fff;
  background: var(--bsl-maroon);
}

.article__title {
  max-width: 80.4rem;
  margin-bottom: 4.6rem;
  font-weight: 400;
  font-size: 5.3rem;
  line-height: 5.5rem;
  letter-spacing: -.159rem;
  color: #000;
}

.article__body {
  font-size: 2.1rem;
  line-height: 3rem;
  letter-spacing: -.063rem;
  color: #000;
}

.article__body p {
  max-width: 96rem;
}

.article__body p+p {
  margin-top: 2.4rem;
}

/* Figma: 960x476 for the lead figure, 960x359 for the second */
.article__figure {
  display: block;
  width: 96rem;
  height: 47.6rem;
  object-fit: cover;
  margin: 0 0 4.4rem;
}

.article__figure+p {
  margin-top: 0;
}

.article__body p+.article__figure {
  margin-top: 4rem;
  height: 35.9rem;
}

.related-posts {
  padding: 7.5rem 0 12rem;
  background: #fff;
}

/* Figma closes the section with a hairline under the cards. */
.related-posts>.bsl-container {
  padding-bottom: 6.4rem;
  border-bottom: .1rem solid var(--bsl-grey-150);
}

/* Three slots: title | dots | arrows. The dots take the middle column and
   centre inside it, rather than sitting beside the arrows. */
.related-posts__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4rem;
  margin-bottom: 7.5rem;
}

.related-posts__title {
  font-weight: 500;
  font-size: 9rem;
  line-height: 9.6rem;
  letter-spacing: -.405rem;
  color: var(--bsl-maroon);
  text-transform: capitalize;
}

.related-posts__dots {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.related-posts__dots button {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e2c6d3;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.related-posts__dots button[aria-selected="true"] {
  background: var(--bsl-maroon);
  transform: scale(1.15);
}

.related-posts__nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.related-posts__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: 0;
  color: var(--bsl-grey-800);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
}

.related-posts__btn svg {
  width: 2.2rem;
  height: 1.4rem;
}

/* Figma draws the previous control as a bare arrow with no ring, and the next
   one as a large filled maroon disc. */
.related-posts__btn--prev {
  width: 4.6rem;
  height: 4.6rem;
}

.related-posts__btn--prev:hover {
  color: var(--bsl-maroon);
}

.related-posts__btn--next {
  width: 6.4rem;
  height: 6.4rem;
  background: var(--bsl-maroon);
  color: #fff;
}

.related-posts__btn--next:hover {
  background: var(--bsl-maroon-dark);
}

.related-posts__btn:disabled {
  opacity: .35;
  cursor: default;
}

.related-posts__btn--next:disabled:hover {
  background: var(--bsl-maroon);
}

/* Carousel: the track is the existing grid laid out in a single row and slid
   horizontally one page at a time. Slide width follows the same 3 / 2 / 1
   progression the static .insight-grid uses at each breakpoint, so the number
   of cards on screen never disagrees with the dots. */
.related-posts__viewport {
  overflow: hidden;
}

.insight-grid.related-posts__track {
  grid-auto-flow: column;
  grid-auto-columns: 47.9rem;
  grid-template-columns: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

/* Percentages are no use here: grid-auto-columns resolves against the grid's
   own content box, which in a column-flow track is unconstrained, so a % width
   collapses the slides to zero. Size them from the viewport instead, matching
   .bsl-container's gutters. */
@media (max-width: 1199.98px) {

  /* two up. grid-template-columns must be re-cleared at every breakpoint that
     restyles .insight-grid: its `repeat(2, minmax(0,1fr))` would otherwise
     survive as two zero-width explicit columns ahead of the auto ones. */
  .insight-grid.related-posts__track {
    grid-template-columns: none;
    grid-auto-columns: calc((100vw - 2 * var(--bsl-gutter) - 2.4rem) / 2);
  }
}

@media (max-width: 767.98px) {
  .about-vision {
    min-height: inherit;
    padding-bottom: 40px;
  }

  .credentials-section__header {
    align-items: start !important;
  }

  /* one up */
  .insight-grid.related-posts__track {
    grid-template-columns: none;
    grid-auto-columns: calc(100vw - 2 * var(--bsl-gutter));
  }
}

@media (prefers-reduced-motion: reduce) {
  .insight-grid.related-posts__track {
    transition: none;
  }
}

/* ==========================================================================
   LOCATIONS — Figma frame "location" #1:35583 (1800×4263)
   ========================================================================== */
.loc-intro {
  position: relative;
  padding: 12.9rem 0 0;
  background: #fff;
  padding-top: 80px;
}

.loc-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  text-align: center;
}

.loc-intro__title {
  font-weight: 600;
  font-size: 7.8rem;
  line-height: 8rem;
  letter-spacing: -.312rem;
  color: var(--bsl-maroon);
}

.loc-intro__strap {
  padding-top: 2rem;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: -.072rem;
  color: #575757;
  text-align: center;
  margin: 0 auto;
  max-width: 100rem;
  margin-bottom: 40px;
}

.loc-intro__hero {
  width: 100%;
  max-width: 1737px;
  height: auto;
  object-fit: cover;
  margin: 5.6rem auto 0;
  display: block;
}

.loc-intro__panel {
  position: relative;
  margin-top: -42.3rem;
  min-height: inherit;
  margin-bottom: 90px;
  padding: 10.3rem 8.5rem 8rem 11.3rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.loc-intro__h2 {
  font-weight: 500;
  font-size: 5.2rem;
  line-height: 6.4rem;
  letter-spacing: -.1rem;
  color: #000;
}

.loc-intro__h2 .accent {
  color: var(--bsl-maroon);
}

/* A heading and its paragraph are one block, so the gap between them must be
   clearly smaller than the gap to the next heading. They were 39px and 44px --
   near enough identical that the two blocks read as four loose items.
   The h2 also carries 64px line-height on 52px text, adding 6px of half-leading
   below the glyphs, so the optical gap was ~45px against a 44px separator.
   2.2rem here lands the optical gap at ~28px, well inside the 6.4rem below. */
.loc-intro__h2+.loc-intro__text {
  margin-top: 2.2rem;
}

.loc-intro__text {
  max-width: 130.3rem;
  margin-bottom: 6.4rem;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: .1rem;
  color: rgba(0, 0, 0, .7);
}

.loc-intro__text:last-child {
  margin-bottom: 0;
}

.loc-others {
  position: relative;
  padding: 8.8rem 0 11.4rem;
  background: #fff;
  overflow: hidden;
}

.loc-others__wm {
  /* Pulled up so the motif sits behind the heading rather than starting
     level with the body copy. */
  position: absolute;
  left: 0;
  top: -36rem;
  width: 93.7rem;
  height: 114.7rem;
  object-fit: fill;
  pointer-events: none;
}

.loc-others>.bsl-container {
  position: relative;
  z-index: 1;
}

.loc-others__title {
  margin-bottom: 5.9rem;
  font-weight: 500;
  font-size: 6.4rem;
  line-height: 5.6rem;
  letter-spacing: -.192rem;
  color: #000;
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 49.1rem);
  gap: 3rem;
  justify-content: center;
}

.loc-card {
  position: relative;
  height: 68.6rem;
  overflow: hidden;
}

.loc-card__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.loc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.loc-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
  transition: opacity .45s ease;
}

/* Hover wash: the brand maroon graded up from the foot of the card, over a
   slow image push-in. Its own layer rather than a change to __scrim so the
   two can cross-fade instead of one replacing the other. */
.loc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(130, 20, 69, 0) 20%, rgba(130, 20, 69, .82) 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.loc-card__label {
  position: absolute;
  left: 6.5rem;
  bottom: 4.5rem;
  z-index: 2;
  font-family: var(--bsl-font-alt);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 5.5rem;
  letter-spacing: -.021rem;
  color: #fff;
  text-transform: uppercase;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
  .loc-card:hover img {
    transform: scale(1.06);
  }

  .loc-card:hover::after {
    opacity: 1;
  }

  .loc-card:hover .loc-card__scrim {
    opacity: 0;
  }

  .loc-card:hover .loc-card__label {
    transform: translateY(-.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .loc-card img,
  .loc-card__label {
    transition: none;
  }

  .loc-card:hover img {
    transform: none;
  }

  .loc-card:hover .loc-card__label {
    transform: none;
  }
}

/* ==========================================================================
   CONTACT — Figma frame #1:12036 ("contact2"), now the only contact layout

   Rebuilt as a fluid two-column layout. The original block pinned every
   value to Figma pixels (fixed 58.2rem + 81.5rem tracks, an 11.9rem gap and
   a -32rem pull on the form), which overflowed the 160rem container and left
   the form floating over dead space. Tracks are now fractional, the overlap
   is a clamped variable, and every card sizes to its content.
   ========================================================================== */
.contact {
  position: relative;
  width: 100%;
  padding: 0;
  /* Figma "Rectangle 4297": the right-hand ground is a white ramp, not grey */
  background: linear-gradient(180deg, #e9e9e9 0%, #ffffff 100%);
  /* Keeps the two ::before bleeds from adding a horizontal scroll -- they run
     50vw to the left and are meant to stop at the page edge. */
  overflow: hidden;
}

.contact__map {
  display: none;
}

.contact>.bsl-container {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 89.4fr) minmax(0, 65.8fr);
  gap: 0;
  align-items: stretch;
}

.contact__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  width: 100%;
}

.office-locations-block:after {
  background-image: url(../images/contact-bg-1.png);
  content: "";
  position: absolute;
  top: -10px;
  bottom: 0;
  left: -90px;
  width: 120%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 113%;
  mix-blend-mode: color-burn;
  opacity: 0.5;
  z-index: 0;
}

/* Top Left Block: Maroon with pseudo-element extension to left screen edge */
.office-locations-block {
  position: relative;
  background-color: var(--bsl-maroon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 8.7rem 3.2rem 8.4rem .9rem;
  width: 100%;
}

.office-locations-block::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 50vw;
  background-color: var(--bsl-maroon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.office-locations-block__title {
  /* Figma 1:11908: Outfit 600 42/33 */
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 3.3rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8.9rem 3.5rem;
  letter-spacing: 0;
  margin-left: 0;
  position: relative;
  z-index: 5;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 37.7rem));
  gap: 2.1rem 1.5rem;
  position: relative;
  z-index: 5;
}

.office-grid__card {
  min-height: 17rem;
  padding: 4.1rem 4.4rem 3.6rem;
  /* Figma "Rectangle 4370": a dark wash on the left fading out to the panel
     maroon on the right (sampled #5C0E32 -> #781240 across the tile). */
  background: linear-gradient(90deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all .25s ease;
  cursor: default;
}

.office-grid__pin {
  display: block;
  width: 2.6rem;
  height: 3.4rem;
  color: #fff;
  margin-bottom: 1.8rem;
}

.office-grid__pin svg {
  width: 100%;
  height: 100%;
}

.office-grid__name {
  font-weight: 700;
  font-size: clamp(1.9rem, 1.6vw, 2.4rem);
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.office-grid__addr {
  margin: .6rem 0 0;
  font-size: clamp(1.3rem, 1.1vw, 1.5rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* Active Card (UK in Figma design) */
.office-grid__card--active,
.office-grid__card:hover {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 .4rem 2rem rgba(0, 0, 0, 0.15);
}

.office-grid__card--active .office-grid__pin,
.office-grid__card:hover .office-grid__pin {
  color: var(--bsl-maroon);
}

.office-grid__card--active .office-grid__name,
.office-grid__card:hover .office-grid__name {
  color: #000;
}

.office-grid__card--active .office-grid__addr,
.office-grid__card:hover .office-grid__addr {
  color: #555;
}

/* Bottom Left Block: Light Off-White */
.contact-mails-section {
  position: relative;
  padding: clamp(5rem, 6vw, 8rem) clamp(3.2rem, 4vw, 5.6rem);
  padding-left: 0;
  background: #f2f2f2;
  flex: 1;
  width: 100%;
}

.contact-mails-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  /* 50vw always clears the gutter between the container and the page edge */
  width: 50vw;
  background: #f2f2f2;
}

.contact__section-title--mails {
  color: var(--bsl-maroon);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 2.9rem;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4.1rem;
}

/* Contact Mails Card: Gradient from white on left to no background on right, no shadow */
.contact-mails-card {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 3vw, 3.8rem);
  padding: clamp(2.8rem, 3.2vw, 4.4rem);
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  border: none;
  box-shadow: none;
}

.contact-mails-card__icon {
  display: block;
  width: 6rem;
  height: 4.4rem;
  flex: none;
}

.contact-mails-card__icon svg {
  width: 100%;
  height: 100%;
}

.contact-mails-card__list {
  display: grid;
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-mails-card__link {
  display: inline-block;
  font-size: clamp(1.5rem, 1.25vw, 1.9rem);
  line-height: 1.5;
  color: #444;
  text-decoration: none;
  transition: color .25s ease;
}

.contact-mails-card__link--primary {
  color: var(--bsl-maroon);
  font-weight: 600;
  text-decoration: underline;
}

.contact-mails-card__link:hover,
.contact-mails-card__link:focus-visible {
  color: var(--bsl-maroon);
}

.contact--alt .contact-note {
  margin-top: clamp(2.4rem, 2.8vw, 3.6rem);
  padding: 0;
  background: none;
  border: none;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 1.05vw, 1.5rem);
  line-height: 1.6;
  color: #666;
}

/* Right Column: GET IN TOUCH Form with pseudo-element extension to right screen edge */
.contact-form {
  position: relative;
  background: #ffffff;
  padding: 8.7rem 0 8.4rem 7.7rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-form::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100vw;
  background: #ffffff;
}

.contact-form__title {
  margin-bottom: 8.4rem;
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 2.9rem;
  text-transform: uppercase;
  color: var(--bsl-maroon);
  letter-spacing: 0;
}

.contact-form .bsl-field {
  margin-bottom: 4.8rem;
}

.contact-form .bsl-input,
.contact-form .bsl-textarea {
  padding: 0 0 1.6rem;
  font-size: 2rem;
  line-height: 1.5;
  color: #000;
  border: 0;
  border-bottom: .1rem solid #e0e0e0;
  border-radius: 0;
  width: 100%;
}

.contact-form .bsl-textarea {
  min-height: 12rem;
}

.contact-form .bsl-input::placeholder,
.contact-form .bsl-textarea::placeholder {
  color: #777;
}

.contact-form__row {
  display: grid;
  grid-template-columns: minmax(13rem, 1.3fr) minmax(0, 2.7fr);
  gap: 2.8rem;
}

.contact-form__captcha {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  min-height: 9.7rem;
  padding: 0 2.8rem;
  background: #f6f4f4;
  margin-top: 1.2rem;
}

.contact-form__check {
  width: 2.8rem;
  height: 2.8rem;
  flex: none;
  margin: 0;
  accent-color: var(--bsl-maroon);
  cursor: pointer;
}

.contact-form__captcha label {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: .12rem;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
}

.contact-form__badge {
  width: 4.8rem;
  height: 4.8rem;
  background: #e2e2e2;
  margin-left: auto;
  flex: none;
}

.contact-form__submit-wrapper {
  position: relative;
  margin-top: clamp(3rem, 3.5vw, 4.8rem);
}


.contact-form__submit {
  position: relative;
  width: 100%;
  min-height: 8.3rem;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: .288rem;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--bsl-maroon) 85%, #630c32 100%);
  border: 0;
  cursor: pointer;
  transition: opacity .25s ease;
  overflow: hidden;
}

.contact-form__submit::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 6.8rem solid rgba(0, 0, 0, 0.15);
  border-left: 6.8rem solid transparent;
  pointer-events: none;
}

.contact-form__submit:hover {
  opacity: 0.94;
}

@media (max-width: 991.98px) {
  .office-locations-block:after {
    width: 140%;
  }

  .contact__grid {
    grid-template-columns: 100%;
  }

  .office-locations-block,
  .contact-mails-section,
  .contact-form {
    padding: 4rem 2.4rem;
  }

  .office-locations-block__inner,
  .contact-mails-section__inner,
  .contact-form__inner {
    max-width: 100%;
  }
}

.offices {
  position: relative;
  padding: 0 0 clamp(6.4rem, 10vw, 14rem);
  background: linear-gradient(180deg, #e9e9e9 0%, #ffffff 100%);
  overflow: hidden;
}

.offices__title {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin: 0 0 clamp(3.2rem, 4vw, 5.6rem);
  font-weight: 600;
  font-size: clamp(2.2rem, 2vw, 3.2rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bsl-maroon);
}

.offices__title--sm {
  font-size: clamp(2rem, 1.7vw, 2.6rem);
  margin-bottom: 2.4rem;
}

.offices__pin {
  display: block;
  width: 3.4rem;
  height: 4.4rem;
  color: var(--bsl-maroon);
  flex: none;
}

.offices__title--sm .offices__pin {
  width: 2.8rem;
  height: 3.6rem;
}

.offices__pin svg {
  width: 100%;
  height: 100%;
}

.offices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1.5rem;
}

.office-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(2.8rem, 3vw, 4.4rem);
  background: #fff;
  border-bottom: .3rem solid transparent;
  transition: border-color .25s ease, transform .25s ease;
}

.office-card__flag {
  height: clamp(4.4rem, 4vw, 6rem);
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.office-card__name {
  margin-top: auto;
  padding-top: 3.2rem;
  font-weight: 600;
  font-size: clamp(2rem, 1.8vw, 2.8rem);
  line-height: 1.2;
  color: #000;
}

.office-card__addr {
  margin: 0;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  line-height: 1.5;
  color: var(--bsl-grey-700);
}

@media (hover: hover) {
  .office-card:hover {
    border-bottom-color: var(--bsl-maroon);
    transform: translateY(-.4rem);
  }
}

/* Offices are listed in the aside rather than a separate band below the form.
   The .contact--alt / .office-card rules are retained: the former is still the
   class on the live section, the latter styles the four-flag grid kept for
   reuse if a standalone offices band is reinstated. */

/* Figma 1:722: the maroon panel is 1018 of the 1800 board (so 894 inside the
   container plus the 124 bleed), and the form column runs 1095 -> 1726. */
.contact--alt .contact__grid {
  grid-template-columns: minmax(0, 89.4fr) minmax(0, 65.8fr);
}

/* ---- Dark Maroon Block for Office Locations ---- */
.office-locations-block {
  background: var(--bsl-maroon);
  /* Figma: title baseline box at y606 (block top 519) and x143; the card grid
     opens at x133, i.e. 9px inside the container edge. */
  padding: 8.7rem 3.2rem 8.4rem .9rem;
}

.office-locations-block__title {
  /* Figma 1:11908: Outfit 600 42/33 */
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 3.3rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8.9rem 3.5rem;
  letter-spacing: 0;
  margin-left: 0;
}

/* ---- 2×2 Office Card Grid ---- */
/* Figma "Rectangle 4370-4373": 377 x 170 tiles, 15px apart across, 21px down */
.office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 37.7rem));
  gap: 2.1rem 1.5rem;
}

.office-grid__card {
  min-height: 17rem;
  padding: 4.1rem 4.4rem 3.6rem;
  /* Figma "Rectangle 4370": a dark wash on the left fading out to the panel
     maroon on the right (sampled #5C0E32 -> #781240 across the tile). */
  background: linear-gradient(90deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all .25s ease;
  cursor: default;
}

.office-grid__pin {
  display: block;
  width: 2.4rem;
  height: 3.2rem;
  color: #fff;
  margin-bottom: 1.6rem;
}

.office-grid__pin svg {
  width: 100%;
  height: 100%;
}

.office-grid__name {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.office-grid__addr {
  margin: .6rem 0 0;
  font-size: clamp(1.3rem, 1.1vw, 1.6rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* Active / Hover Card (White Card in Figma design) */
.office-grid__card--active,
.office-grid__card:hover {
  background: #ffffff;
  border-color: #ffffff;
}

.office-grid__card--active .office-grid__pin,
.office-grid__card:hover .office-grid__pin {
  color: var(--bsl-maroon);
}

.office-grid__card--active .office-grid__name,
.office-grid__card:hover .office-grid__name {
  color: #000;
}

.office-grid__card--active .office-grid__addr,
.office-grid__card:hover .office-grid__addr {
  color: #555;
}

/* ---- Contact Mails Section ---- */
/* Figma "Rectangle 4366": #F2F2F2, opening 1182 on the board -- directly under
   the maroon panel, no gap. */
.contact-mails-section {
  margin-top: 0;
  padding-top: 7.4rem;
}

.contact__section-title--mails {
  /* Figma 1:11910: Outfit 600 32/29 */
  color: var(--bsl-maroon);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 2.9rem;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4.1rem;
}

.contact-mails-card {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 2.5vw, 3.2rem);
  padding: clamp(2.4rem, 3vw, 4rem);
  /* background: #fff; */
  /* border: 1px solid #eaeaea; */
}

.contact-mails-card__icon {
  display: block;
  width: 5.6rem;
  height: 4.2rem;
  flex: none;
}

.contact-mails-card__icon svg {
  width: 100%;
  height: 100%;
}

.contact-mails-card__list {
  display: grid;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-mails-card__link {
  display: inline-block;
  font-size: clamp(1.5rem, 1.2vw, 1.8rem);
  line-height: 1.5;
  color: #333;
  text-decoration: none;
  transition: color .25s ease;
}

.contact-mails-card__link--primary {
  color: var(--bsl-maroon);
  font-weight: 600;
  text-decoration: underline;
}

.contact-mails-card__link:hover,
.contact-mails-card__link:focus-visible {
  color: var(--bsl-maroon);
}

/* ---- Updated Contact Note ---- */
.contact--alt .contact-note {
  margin-top: clamp(1.8rem, 2vw, 2.8rem);
  padding: 0;
  background: none;
  border: none;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 1.05vw, 1.5rem);
  line-height: 1.6;
  color: #555;
}

/* ---- Nature of Enquiry Select ---- */
.bsl-select {
  display: block;
  width: 100%;
  padding: 0 0 1.4rem;
  font-family: inherit;
  font-size: clamp(1.6rem, 1.3vw, 2rem);
  line-height: 1.5;
  color: rgba(0, 0, 0, .7);
  background: transparent;
  border: 0;
  border-bottom: .1rem solid var(--bsl-grey-200);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .4rem center;
  background-size: 1.2rem .8rem;
  transition: border-color .25s ease;
}

.bsl-select:focus {
  border-bottom-color: var(--bsl-maroon);
}

.bsl-select option {
  color: #000;
}


/* ==========================================================================
   TERMS OF USE — Figma frame "privacy-terms-page" #1:35672
   ========================================================================== */
.terms {
  position: relative;
  padding: 11.7rem 0 12rem;
  background: #fff;
  overflow: hidden;
}

.terms__wm {
  /* Pulled up so the motif sits behind the heading rather than starting
     level with the body copy. */
  position: absolute;
  left: 0;
  top: -36rem;
  width: 93.7rem;
  height: 114.7rem;
  object-fit: fill;
  pointer-events: none;
}

.terms>.bsl-container {
  position: relative;
  z-index: 1;
}

.terms__kicker {
  margin-left: 17rem;
  font-weight: 600;
  font-size: 4rem;
  line-height: 2.6rem;
  color: #020202;
}

.terms__title {
  margin: 1.4rem 0 0 17rem;
  font-weight: 600;
  font-size: 7.2rem;
  line-height: 8rem;
  letter-spacing: -.288rem;
  color: var(--bsl-maroon);
}

/* Figma 72/80 ls -2.88 */
.terms__body {
  margin: 3.2rem 0 0 17.7rem;
  max-width: 120.6rem;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2.4rem;
  color: #000;
}

.terms__body h2 {
  margin: 2.8rem 0 .6rem;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-transform: none;
  color: #000;
}

.terms__body h2:first-child {
  margin-top: 0;
}

.terms__body p {
  margin-bottom: 0;
}

.terms__body a {
  color: #000;
  text-decoration: underline;
}

.terms__body a:hover {
  color: var(--bsl-maroon);
}

.terms__updated {
  margin-top: 2.4rem;
  font-weight: 700;
}

/* ==========================================================================
   DOWNLOAD BROCHURE — Figma frame #1:35744
   ========================================================================== */
.brochure {
  position: relative;
  padding: 8.1rem 0 12rem;
  background: #fff;
  overflow: hidden;
}

.brochure__wm {
  /* Pulled up so the motif sits behind the heading rather than starting
     level with the body copy. */
  position: absolute;
  left: 0;
  top: -36rem;
  width: 93.7rem;
  height: 114.7rem;
  object-fit: fill;
  pointer-events: none;
}

.brochure>.bsl-container {
  position: relative;
  z-index: 1;
}

/* --- Brochure library grid ------------------------------------------------
   A card per brochure. At rest each cover sits under a black gradient so the
   set reads as one calm grid; on hover that gradient becomes the BSL maroon
   and the View / Download actions fade up. Both states use the same gradient
   geometry, so only the colour animates and the card never shifts. */
.broch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.8rem 3.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.broch-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 404 / 283;
  background: var(--bsl-grey-900);
}

.broch-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* Resting scrim (black) and hover scrim (maroon) are two stacked layers
   rather than one animated gradient: cross-fading opacity is compositor-only,
   where animating gradient colour stops would repaint every frame. */
.broch-card__media::before,
.broch-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.broch-card__media::before {
  /* A flat wash plus a bottom ramp: the wash is what makes a bright cover
     read as "resting" at all (a bottom-only ramp leaves pale photos looking
     untouched), the ramp keeps the maroon hover a change of colour rather
     than a change of darkness. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .72) 100%),
    rgba(0, 0, 0, .42);
  opacity: 1;
}

.broch-card__media::after {
  background: linear-gradient(180deg, rgba(130, 20, 69, .55) 0%, rgba(130, 20, 69, .95) 100%);
  opacity: 0;
}

.broch-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.6rem;
  padding: 0 2rem 2.8rem;
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.broch-card__act {
  color: #fff;
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}

.broch-card__act::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.5rem;
  height: .1rem;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}

.broch-card__act:hover::after,
.broch-card__act:focus-visible::after {
  transform: scaleX(1);
}

/* Pointer devices only: a touch screen cannot hover, so the actions must be
   visible at rest there -- see the coarse-pointer block below. */
@media (hover: hover) {
  .broch-card:hover .broch-card__media::before {
    opacity: 0;
  }

  .broch-card:hover .broch-card__media::after {
    opacity: 1;
  }

  .broch-card:hover .broch-card__media img {
    transform: scale(1.05);
  }

  .broch-card:hover .broch-card__actions {
    opacity: 1;
    transform: translateY(0);
  }

  .broch-card:hover .broch-card__title {
    color: var(--bsl-maroon);
  }
}

/* Keyboard parity: tabbing to either action lights the whole card. */
.broch-card:focus-within .broch-card__media::before {
  opacity: 0;
}

.broch-card:focus-within .broch-card__media::after {
  opacity: 1;
}

.broch-card:focus-within .broch-card__actions {
  opacity: 1;
  transform: translateY(0);
}

.broch-card__act:focus-visible {
  outline: .2rem solid #fff;
  outline-offset: .4rem;
}

/* Touch and narrow screens: there is no hover, so the actions must always be
   visible or the card has no reachable controls. Width is checked alongside
   `hover: none` because a narrow window on a laptop is the phone layout too,
   and the coarse-pointer query alone would leave it with hidden buttons. */
@media (hover: none),
(max-width: 991.98px) {
  .broch-card__actions {
    opacity: 1;
    transform: none;
  }

  .broch-card__media::before {
    opacity: 1;
  }
}

.broch-card__meta {
  padding: 1.8rem 0 0;
  border-bottom: .1rem solid var(--bsl-grey-200, #e0e0e0);
  padding-bottom: 1.8rem;
}

.broch-card__title {
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 2.4rem;
  color: #000;
  transition: color .3s ease;
}

.broch-card__sub {
  font-size: 2.3rem;
  line-height: 2.2rem;
  color: var(--bsl-grey-600);
  margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {

  .broch-card__media img,
  .broch-card__media::before,
  .broch-card__media::after,
  .broch-card__actions {
    transition: none;
  }

  .broch-card:hover .broch-card__media img {
    transform: none;
  }
}

/* ==========================================================================
   REMAINING PAGES — responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .insights {
    padding-top: 4.8rem;
  }

  .filter-pills {
    gap: 1.2rem;
    margin: 0 0 3.2rem;
  }

  .filter-pill {
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 1rem 2rem;
  }

  .filter-pill.is-active {
    min-width: 0;
  }

  .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 2.4rem;
  }

  .post-card__title {
    font-size: 1.9rem;
    line-height: 1.3;
  }

  .bsl-pagination__rule {
    margin-top: 4.8rem;
  }

  .bsl-pagination {
    margin-top: 3.2rem;
    padding-bottom: 5.6rem;
  }

  .bsl-pagination a,
  .bsl-pagination span {
    font-size: 1.8rem;
    min-width: 3.6rem;
    height: 3.2rem;
  }

  .bsl-pagination .is-current {
    min-width: 3.2rem;
    width: 3.2rem;
    height: 3.2rem;
  }

  .bsl-pagination__nav {
    width: 3.2rem;
    height: 3.2rem;
  }

  .bsl-pagination__nav svg {
    width: 2rem;
    height: 1.2rem;
  }

  .bsl-pagination__nav--prev {
    margin-right: 1.6rem;
  }

  .bsl-pagination__nav--next {
    margin-left: 1.6rem;
  }

  .article__banner {
    height: 32rem;
  }

  .article__panel {
    margin-top: -6rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    padding: 3.2rem 2.4rem;
  }

  .article__title {
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 2.4rem;
  }

  .article__body {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .article__figure {
    width: 100%;
    margin-bottom: 2.4rem;
  }

  .article__meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .article__share {
    margin-top: 0;
  }

  .related-posts {
    padding: 4.8rem 0 5.6rem;
  }

  .related-posts__head {
    margin-bottom: 3.2rem;
  }

  .related-posts__title {
    font-size: 3.4rem;
    line-height: 1.1;
  }

  .related-posts__dots {
    display: none;
  }

  .loc-intro {
    padding-top: 4.8rem;
  }

  .loc-intro__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .loc-intro__title {
    font-size: 3.4rem;
    line-height: 1.1;
  }

  .loc-intro__strap {
    font-size: 1.7rem;
    line-height: 1.5;
    padding-top: 0;
  }

  .loc-intro__hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1737 / 848;
    margin-top: 2.8rem;
  }

  .loc-intro__panel {
    margin-top: 0;
    min-height: 0;
    padding: 3.2rem 2.4rem;
  }

  .loc-intro__h2 {
    font-size: 2.4rem;
    line-height: 1.2;
  }

  .loc-intro__h2+.loc-intro__text {
    margin-top: 1.2rem;
  }

  .loc-intro__text {
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 3.6rem;
  }

  .loc-others {
    padding: 4.8rem 0 5.6rem;
  }

  .loc-others__wm {
    display: none;
  }

  .loc-others__title {
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 2.8rem;
  }

  .loc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .loc-card {
    height: 36rem;
  }

  .loc-card__label {
    left: 2.4rem;
    bottom: 2.4rem;
    font-size: 2.4rem;
    line-height: 1.2;
  }

  /* Below the two-column breakpoint the aside stacks above the form and the
     overlap is dropped — the form no longer has a hero to tuck under. */
  .contact {
    padding-top: 4rem;
  }

  .contact__map {
    display: none;
  }

  .contact__grid,
  .contact--alt .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .contact-form,
  .contact--alt .contact-form {
    margin-top: 0;
    padding: 3.2rem 2.4rem;
  }

  .contact-card {
    padding: 3.2rem 2.4rem;
  }

  .contact-note {
    padding: 2.4rem;
  }

  .contact-form__captcha {
    gap: 1.2rem;
  }

  .offices {
    padding: 4.8rem 0 5.6rem;
  }

  .offices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .office-card {
    padding: 2.8rem 2.4rem;
  }

  .office-card__name {
    padding-top: 2.4rem;
  }

  .terms {
    padding: 4.8rem 0 5.6rem;
  }

  .terms__wm {
    display: none;
  }

  .terms__kicker,
  .terms__title {
    margin-left: 0;
  }

  .terms__title {
    font-size: 3.4rem;
    line-height: 1.1;
  }

  .terms__body {
    margin: 3.2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.7;
  }

  .brochure {
    padding: 4rem 0 5.6rem;
  }

  .brochure__wm {
    display: none;
  }

  .broch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 2rem;
  }

  .broch-card__actions {
    gap: 2.4rem;
    padding-bottom: 2rem;
  }

  .broch-card__act {
    font-size: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .broch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-grid,
  .loc-grid,
  .offices__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem;
  }

  .contact-form__captcha {
    flex-wrap: wrap;
  }

  .contact-form__badge {
    margin-left: 0;
  }
}

/* ==========================================================================
   ABOUT US — modals
   "get-in-touch" (#1:23300) opens once per session on load; the supplier
   register (#1:23336) slides in from the left on demand.
   ========================================================================== */
/* position:fixed would otherwise beat the `hidden` attribute's UA
   display:none, leaving an invisible backdrop over the page swallowing
   clicks. Keep [hidden] authoritative for both layers. */
.bslm[hidden],
.bslm-backdrop[hidden] {
  display: none !important;
}

.bslm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s ease;
}

.bslm-backdrop.is-open {
  opacity: 1;
}

.bslm {
  position: fixed;
  z-index: 1401;
  background: #fff;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 2.4rem 6.4rem rgba(0, 0, 0, .3);
}

.bslm__close {
  position: absolute;
  right: 1.6rem;
  top: 1.2rem;
  width: 4rem;
  height: 4rem;
  font-size: 3.2rem;
  line-height: 1;
  color: #000;
  background: none;
  border: 0;
  cursor: pointer;
}

.bslm__close:hover {
  color: var(--bsl-maroon);
}

.bslm__title {
  margin: 0 0 clamp(2.4rem, 3vw, 3.6rem);
  font-weight: 600;
  font-size: clamp(2.6rem, 2.6vw, 4.2rem);
  line-height: 1.1;
  text-transform: capitalize;
  color: var(--bsl-maroon);
}

.bslm__intro {
  margin: -1.6rem 0 2.8rem;
  font-size: clamp(1.5rem, 1.2vw, 1.8rem);
  line-height: 1.6;
  color: var(--bsl-grey-700);
}

/* Centred form dialog (Get in Touch) */
.bslm--form {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  overscroll-behavior: contain;
  width: min(68rem, calc(100vw - 4rem));
  padding: clamp(3.2rem, 4vw, 5.6rem);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}

.bslm--form.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Left drawer (Supplier Register) */
.bslm--drawer {
  right: 0;
  top: 0;
  bottom: 0;
  width: min(46rem, 100vw);
  /* Full-height drawer: it owns the whole viewport column, so let its own
     overflow-y do the scrolling rather than capping height. */
  max-height: 100vh;
  overscroll-behavior: contain;
  padding: clamp(3.2rem, 4vw, 5.6rem) clamp(2.4rem, 3vw, 4rem);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.bslm--drawer.is-open {
  transform: translateX(0);
}

.bslm .bsl-input,
.bslm .bsl-textarea {
  padding: 0 0 1.4rem;
  font-size: clamp(1.5rem, 1.2vw, 1.8rem);
  color: #000;
  border-bottom-color: var(--bsl-grey-200);
}

.bslm .bsl-input::placeholder,
.bslm .bsl-textarea::placeholder {
  color: rgba(0, 0, 0, .7);
}

.bslm .bsl-field {
  margin-bottom: clamp(2rem, 2.4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {

  .bslm-backdrop,
  .bslm--form,
  .bslm--drawer {
    transition: none;
  }
}

/* --- Supplier Register drawer form ---------------------------------------
   Figma "supplier-register" #1:23336: pill-shaped bordered inputs (unlike
   the underline inputs used elsewhere), two radio groups and five required
   file rows. */
.sup-form .bsl-field {
  margin-bottom: 1.6rem;
}

.sup-input {
  width: 100%;
  padding: 1.2rem 1.8rem;
  font-family: var(--bsl-font);
  font-size: 1.5rem;
  line-height: 1.4;
  color: #000;
  background: #fff;
  border: .1rem solid var(--bsl-grey-200);
  border-radius: 2.4rem;
  transition: border-color .25s ease;
}

.sup-input::placeholder {
  color: var(--bsl-grey-500);
}

.sup-input:focus {
  outline: none;
  border-color: var(--bsl-maroon);
}

.sup-input--area {
  border-radius: 1.6rem;
  resize: vertical;
  min-height: 9rem;
}

.sup-form__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1.2rem;
}

.sup-form__row>span {
  display: block;
  min-width: 0;
}

.sup-group {
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}

.sup-group__legend {
  padding: 0;
  margin-bottom: .8rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #000;
}

.sup-radio {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-right: 2.4rem;
  font-size: 1.4rem;
  color: #000;
  cursor: pointer;
}

.sup-radio input {
  width: 1.6rem;
  height: 1.6rem;
  accent-color: var(--bsl-maroon);
  cursor: pointer;
}

.sup-file {
  margin-bottom: 1.4rem;
}

.sup-file__label {
  display: block;
  margin-bottom: .6rem;
  font-size: 1.4rem;
  color: #000;
}

.sup-file__label em {
  font-style: normal;
  color: var(--bsl-maroon);
}

.sup-file__input {
  width: 100%;
  padding: .8rem 1.2rem;
  font-size: 1.3rem;
  background: #f1f1f1;
  border: 0;
  border-radius: 2rem;
  cursor: pointer;
}

.sup-file__input::file-selector-button {
  margin-right: 1rem;
  padding: .5rem 1.2rem;
  font: inherit;
  color: #000;
  background: #e4e4e4;
  border: 0;
  border-radius: 1.6rem;
  cursor: pointer;
}



@media (max-width: 991px) {
  .leader--ceo {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 8rem !important;
    padding-top: 40px !important;
  }

  .leader__bio {
    font-size: 1.8rem;
  }

  .leader__quote p {
    font-size: 1.8rem;
    padding-top: 50px;
  }

}

@media (max-width: 768px) {
  .leader-panel__portrait {
    margin-top: 20px;
    margin-left: 0;
  }

  .leader-panel__body {
    padding: 0 !important;
  }
}

/* ==========================================================================
   COURSE DETAILS REDESIGN (Figma Pixel Perfect Match)
   ========================================================================== */

.course-details-intro {
  position: relative;
  padding: 12.3rem 0 14.5rem;
  background: #ffffff;
  overflow: hidden;
}

/* Figma "Rectangle 4286" (1:12448): 839x1027 at x1, level with the banner
   foot. Same asset and 10% opacity as every other motif on the board. */
.course-details-intro__wm {
  position: absolute;
  left: .1rem;
  top: 0;
  width: 83.9rem;
  height: 102.7rem;
  object-fit: fill;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-180deg);
}

.course-details-intro>.bsl-container {
  position: relative;
  z-index: 1;
}

.course-details-intro__lead {
  font-weight: 500;
  font-size: 3.3rem;
  line-height: 4.3rem;
  letter-spacing: -.165rem;
  color: #000;
  max-width: 105.2rem;
  margin-bottom: 9.2rem;
}

.course-details-intro__hero-img {
  width: 151.8rem;
  max-width: 100%;
  height: 58.8rem;
  margin-left: 1.1rem;
  overflow: hidden;
  border-radius: 0;
}

.course-details-intro__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Maroon Section with Stacked Cards */
.cd-maroon-section {
  position: relative;
  background-color: var(--bsl-maroon);
  background-image: url('../images/bsl-texture-maroon-l.png');
  background-repeat: no-repeat;
  /* Figma "Group 427320514": the motif is anchored to the left of the band */
  background-position: top left;
  background-size: cover;
  padding: 8.1rem 0 11.1rem;
}

.cd-maroon-section__intro {
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 3.1rem;
  letter-spacing: -.084rem;
  color: #ffffff;
  max-width: 95.9rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.cd-cards-stack {
  display: flex;
  flex-direction: column;
  /* Figma: cards at y1760/2128/2496/2864 -- a 368 pitch on 350-tall cards */
  gap: 1.8rem;
}

/* Stacked White Card */
.cd-card {
  display: flex;
  align-items: flex-start;
  min-height: 35rem;
  /* Figma: thumbnail inset 24 from the left and 26/30 top and bottom */
  padding: 2.6rem 2.4rem 3rem;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .52) 0%,
      rgba(255, 255, 255, .99) 18%,
      #ffffff 100%);
  overflow: hidden;
}

/* Figma "Rectangle 4355" -- the Key Learning Outcomes card is solid white. */
.cd-card--solid {
  background: #ffffff;
}

.cd-card__media {
  width: 25rem;
  height: 29.4rem;
  flex: none;
  position: relative;
  background: #f0f0f0;
}

.cd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cd-card__body {
  flex: 1;
  align-self: stretch;
  padding: 4.7rem 0 0 4.2rem;
  position: relative;
  background: url('../images/cd-card-deco.png') no-repeat right 1.4rem top .2rem / 29.8rem 24.1rem;
}

.cd-card__title {
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 3.2rem;
  letter-spacing: -.042rem;
  color: var(--bsl-maroon);
  margin-bottom: 3.4rem;
}

.cd-card__list {
  margin: 0;
  padding-left: 2.8rem;
  list-style: decimal outside;
}

.cd-card__list li {
  display: list-item;
  font-size: 2rem;
  line-height: 1.45;
  color: #000;
  margin-top: 1.2rem;
}

.cd-card__list li+li {
  margin-top: 1.2rem;
}

.cd-card__list li::marker {
  font-weight: 400;
  color: #000;
}

.cd-card__list li strong {
  font-weight: 600;
  color: #000;
}

.cd-card__cols {
/*  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3vw, 4rem)*/;
}

/* Next Step Callout */
.cd-next-step {
  padding: 11.5rem 0 0;
  background: #ffffff;
  border-bottom: 0;
}

.cd-next-step__panel {
  /* Figma "Rectangle 4323" (1:12499): 1543 x 357, 90deg #F0F0F0 -> #FFFFFF */
  min-height: 35.7rem;
  padding: 7.4rem 0 0;
  background: linear-gradient(90deg, #f0f0f0 0%, #ffffff 100%);
}

.cd-next-step__grid {
  display: grid;
  /* Figma: title col opens at panel+121, the copy column at panel+798 */
  grid-template-columns: 67.7rem minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0 0 0 11rem;
}

.cd-next-step__title {
  font-weight: 400;
  font-size: 6rem;
  line-height: 7.1rem;
  letter-spacing: -.18rem;
  color: rgba(0, 0, 0, .65);
  text-transform: none;
  margin: 0;
}

.cd-next-step__title .accent {
  color: var(--bsl-maroon);
  display: block;
}

.cd-next-step__sub {
  font-family: var(--bsl-font-alt);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3.14rem;
  letter-spacing: -.012rem;
  color: rgba(0, 0, 0, .69);
  text-transform: capitalize;
  max-width: 62.3rem;
  margin-bottom: 4.9rem;
}

.cd-next-step__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.cd-btn {
  /* Figma "Button" instances: 262 x 66, Outfit 500 28/24 ls -.84, white */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  min-width: 26.2rem;
  height: 6.6rem;
  padding: 0 2.4rem;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: -.084rem;
  text-transform: none;
  text-decoration: none;
  transition: all .25s ease;
}

.cd-btn--dark {
  background: #000000;
  color: #ffffff;
}

.cd-btn--dark:hover {
  background: #333333;
  color: #ffffff;
}

.cd-btn--maroon {
  background: var(--bsl-maroon);
  color: #ffffff;
}

.cd-btn--maroon:hover {
  background: #610c31;
  color: #ffffff;
}

/* Other Courses */
.cd-other-courses {
  padding: 11.6rem 0 10.7rem;
  background: #ffffff;
}

.cd-other-courses__title {
  font-weight: 500;
  font-size: 6.4rem;
  line-height: 5.6rem;
  letter-spacing: -.192rem;
  color: #000;
  margin-bottom: 4.1rem;
}

.cd-other-courses__title .accent {
  color: var(--bsl-maroon);
}

.cd-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 49.1rem));
  gap: 3rem;
  justify-content: start;
}

.cd-course-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cd-course-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Figma: tile bottom y4541, title box top y4566 */
  margin-bottom: 2.5rem;
  background: #eee;
}

.cd-course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.cd-course-card__link:hover .cd-course-card__media img {
  transform: none;
}

/* Hover wash -- same ramp as .services-section__card::after on the home page */
.cd-course-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(35, 72, 128, .92) 0%, rgba(30, 60, 110, .97) 100%);
  transition: opacity .4s ease;
}

.cd-course-card__link:hover .cd-course-card__media::after,
.cd-course-card__link:focus-visible .cd-course-card__media::after {
  opacity: 1;
}

/* Circular arrow, matching .services-section__icon-btn. It fades in rather
   than sitting there permanently, so the resting tile stays the plain photo
   the board specifies. */
.cd-course-card__arrow {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 1.4rem;
  border-radius: 50%;
  background-color: #821445;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s ease, transform .3s ease, background-color .4s ease;
}

.cd-course-card__arrow img {
  width: 100%;
  height: auto;
  display: block;
}

.cd-course-card__link:hover .cd-course-card__arrow,
.cd-course-card__link:focus-visible .cd-course-card__arrow {
  opacity: 1;
  transform: scale(1.1);
  background-color: #ffffff;
}

.cd-course-card__link:hover .cd-course-card__arrow img,
.cd-course-card__link:focus-visible .cd-course-card__arrow img {
  filter: invert(1);
}

/* Revealed action, matching .services-section__card-action */
.cd-course-card__action {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 2rem 2.25rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .2rem;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .4s ease, max-height .4s ease;
}

.cd-course-card__link:hover .cd-course-card__action,
.cd-course-card__link:focus-visible .cd-course-card__action {
  opacity: .9;
  max-height: 6rem;
}

.cd-course-card__title {
  font-family: var(--bsl-font-alt);
  font-weight: 600;
  font-size: 3.3rem;
  line-height: 4.32rem;
  letter-spacing: -.017rem;
  color: #000;
  margin: 0;
  transition: color .25s ease;
}

.cd-course-card__title--maroon,
.cd-course-card__link:hover .cd-course-card__title {
  color: var(--bsl-maroon);
}

/* Figma "Line 26/27/28": a hairline closes each card, maroon under the
   highlighted one. */
.cd-course-card__rule {
  display: block;
  height: .1rem;
  margin-top: 4.5rem;
  background: #3f3f3f;
}

.cd-course-card--highlight .cd-course-card__rule {
  background: var(--bsl-maroon);
}

/* Responsiveness */
@media (max-width: 991px) {
  .cd-card {
    flex-direction: column;
  }

  .cd-card__media {
    width: 100%;
    height: 240px;
  }

  .cd-next-step__grid {
    grid-template-columns: 1fr;
  }

  .cd-courses-grid {
    grid-template-columns: 1fr;
  }

  .cd-card__cols {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Responsive fallbacks for the Figma-exact metrics
   --------------------------------------------------------------------------
   Below 1200px the root font stops tracking the viewport (it pins at 10px),
   so every value taken straight off the 1800px board is a hard pixel size
   from there down. These are the mobile/tablet counterparts for the ones
   that would otherwise overflow their column.
   ========================================================================== */
@media (max-width: 1199.98px) {

  /* --- procurement / hr --- */
  .detail-intro--pr .detail-intro__figure {
    aspect-ratio: 1529 / 710;
  }

  .detail-intro--pr .detail-intro__copy {
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: 0;
    padding-bottom: 5.6rem;
  }

  .suppliers-banner {
    max-width: none;
  }

  .suppliers-banner__media {
    height: 32rem;
  }

  .suppliers-banner__title {
    font-size: 4rem;
    line-height: 1.1;
    letter-spacing: -.1rem;
  }

  .suppliers-strap {
    padding-top: 4rem;
  }

  .suppliers-strap__text {
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .sup-principles__wm {
    display: none;
  }

  /* --- services --- */
  .svc-intro {
    padding-bottom: 5.6rem;
  }

  .home-icv {
    padding-bottom: 3.2rem;
  }

  .home-icv .icv__rule {
    margin-bottom: 4.8rem;
  }

  /* --- course details --- */
  .course-details-intro {
    padding: 4.8rem 0 5.6rem;
  }

  .course-details-intro__wm {
    display: none;
  }

  .course-details-intro__lead {
    font-size: 2.2rem;
    line-height: 1.35;
    letter-spacing: -.05rem;
    max-width: none;
    margin-bottom: 3.2rem;
  }

  .course-details-intro__hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1518 / 588;
    margin-left: 0;
  }

  .cd-maroon-section__intro {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .cd-card {
    min-height: 0;
    padding: 1.6rem;
  }

  .cd-card__media {
    height: auto;
    aspect-ratio: 250 / 294;
  }

  .cd-card__body {
    padding: 2.4rem 0 .8rem;
  }

  .cd-card__title {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 1.8rem;
  }

  .cd-card__list li {
    font-size: 1.6rem;
  }

  .cd-card__list li+li {
    margin-top: .8rem;
  }

  .cd-card__body {
    background-size: 16rem auto;
  }

  .cd-next-step {
    padding: 5.6rem 0 0;
  }

  .cd-next-step__panel {
    min-height: 0;
    padding: 4rem 2.4rem;
  }

  .cd-next-step__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    padding-left: 0;
  }

  .cd-next-step__title {
    font-size: 3.6rem;
    line-height: 1.12;
    letter-spacing: -.1rem;
  }

  .cd-next-step__sub {
    font-size: 1.7rem;
    line-height: 1.5;
    max-width: none;
    margin-bottom: 2.8rem;
  }

  .cd-btn {
    min-width: 0;
    height: 5.2rem;
    padding: 0 2rem;
    font-size: 1.8rem;
    letter-spacing: -.02rem;
  }

  .cd-other-courses {
    padding: 5.6rem 0;
  }

  .cd-other-courses__title {
    font-size: 3.6rem;
    line-height: 1.12;
    letter-spacing: -.1rem;
    margin-bottom: 3.2rem;
  }

  .cd-course-card__title {
    font-size: 2rem;
    line-height: 1.35;
  }

  .cd-course-card__rule {
    margin-top: 2rem;
  }

  .cd-course-card__arrow {
    top: 1.2rem;
    left: 1.2rem;
    width: 4rem;
    height: 4rem;
    padding: 1.1rem;
  }

  .cd-course-card__action {
    padding: 0 1.6rem 1.6rem;
  }

  /* --- contact --- */
  .office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .office-grid__card {
    min-height: 0;
    padding: 2.8rem 2.4rem;
  }

  .office-locations-block__title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 0 0 3.2rem;
  }

  .contact__section-title--mails {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 2.4rem;
  }

  .contact-mails-section {
    padding-top: 4rem;
  }

  .contact-form__title {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 3.2rem;
  }

  .contact-form .bsl-field {
    margin-bottom: 2.8rem;
  }

  .contact-form .bsl-input,
  .contact-form .bsl-textarea {
    font-size: 1.6rem;
  }

  .contact-form__captcha {
    min-height: 0;
    padding: 2rem 2.4rem;
  }

  .contact-form__submit {
    min-height: 5.6rem;
    font-size: 1.8rem;
    letter-spacing: .2rem;
  }

  .contact-form__submit::after {
    border-bottom-width: 5.6rem;
    border-left-width: 5.6rem;
  }
}

@media (max-width: 575.98px) {
  .office-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cd-next-step__actions {
    gap: 1.2rem;
  }
}


/*my style*/


.cd-maroon-section .cd-card__list ol,.cd-maroon-section .cd-card__list ul{
  margin: 0;
    padding-left: 2.8rem;
    list-style: decimal outside;
}

.cd-maroon-section .cd-card__cols .cd-card__list ol li{
  width: 50%;
  float: left;
}
.ceo-message p{
  margin: 0 0 2.4rem;
    font-size: 2.2rem;
    line-height: 3.2rem;
    color: #575757
}

.insight-linkedin{
  width: 320% !important;
}

@media (max-width: 1199.98px) {
  .insight-linkedin{
    width: 200% !important;
  }
}



.sk-ww-linkedin-page-post{
  width: 100% !important;
}
.banner-card .banner-description{
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.8px;
    max-width: 950px;
    margin: 0 auto;
    text-transform: capitalize;
    line-height: normal;
    color: #fff;
    margin-top: 25px;
}
.hr-arrow-line {
    position: relative;
    width: 95%;
    height: 3px;
    background-color: #821445;
    margin: 30px auto;
}
.hr-arrow {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-top: 3px solid #821445;
    border-right: 3px solid #821445;
    background: transparent;
    transform: translateY(-50%);
}
.hr-arrow-left {
    left: 3px;
    transform: rotate(-135deg) translateY(-50%);
    transform-origin: center;
    margin-top: -17px;
    margin-left: 5px;
}
.hr-arrow-right {
    right: 3px;
    transform: rotate(45deg) translateY(-50%);
    transform-origin: center;
    margin-top: -4px;
    margin-right: 5px;
}


@media (max-width: 768px) {
  .insight-linkedin{
    width: 100% !important;
  }
  .office-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .office-grid__card { min-height: 0; padding: 0.8rem 1.4rem; }
  .office-grid__name{font-size: 16px;}
  .sector-tiles { grid-template-columns: 1fr 1fr; }
   .sector-tile__label {font-size: 16px;}
   .sector-tile img.sector-tile__icon{top: 1.4rem; left: 1.4rem; width: 5.8rem; height: 3.8rem;}
   .course-row { grid-template-columns: 100px 1fr; }
   .course-row__media{height: 10rem;}
   .bslm__title{font-size: 20px;}
   .contact-form__captcha{padding: 5px;}
   .contact-form__captcha label{font-size: 12px;}
   .contact-form__row{gap: 10px;}
   .bslm .bsl-input, .bslm .bsl-textarea { padding: 2px 0;}
  .contact-form__captcha { min-height: 0; padding: 5px; margin-top: -15px; margin-bottom: 12px; }
  .ceo-message p{font-size: 1.5rem;}
  .hr-arrow-line { position: absolute; width: 3px; height: 88%; right: 12px; background-color: #821445; margin: 30px auto; margin-top: -40px; }
  .hr-arrow-left { left: -1px; top: 25px; transform: rotate(-45deg) translateY(-50%); transform-origin: center; margin-top: -17px; margin-left: 0px; }
  .hr-arrow-right { right: -7px; transform: rotate(135deg) translateY(-50%); transform-origin: center; margin-top: -4px; margin-right: 5px; bottom: 7px; top: inherit; }
  .filter-pill{padding: 1rem 1rem;}
  .filter-pills { gap: 0.2rem;}
  .insight-grid, .loc-grid, .offices__grid{padding-left: 0;}
}

/* ==========================================================================
   About-Us :: Senior Leadership Team
   ========================================================================== */
   
.slt-section {
	background-color: #fbfcfd;
	position: relative;
	overflow: hidden;
}

/* Angular faceted background graphic in the top right */
.slt-section::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 380px;
	height: 120px;
	background: linear-gradient(135deg, transparent 70%, rgba(226, 232, 240, 0.6) 70%);
	pointer-events: none;
	z-index: 1;
}

/* Section Title */
.slt-header-wrap {
	padding: 0 1.25rem 1.25rem 1.25rem;
}

.slt-title {
	font-size: 7rem;
	font-weight: 500;
	color: #111827;
	letter-spacing: -0.5px;
	margin: 0 0 3rem 0;
	line-height: 6rem;
}

.slt-title span {
	color: #821445;
	font-weight: 500;
}

/* Card Layout - Squarer ratio matching original */
.slt-card {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.08;
	overflow: hidden;
	cursor: pointer;
	background-color: #e5e7eb;
}

.slt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.4s ease;
}

.slt-card:hover .slt-card__img {
	transform: scale(1.03);
}

/* Default Overlay: Light shadow just behind the text at bottom */
.slt-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: 1.5rem 1.25rem 1.5rem 1.25rem;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 15, 25, 0.5) 80%, rgba(10, 15, 25, 0.8) 100%);
	transition: all 0.35s ease;
}

.slt-card__name {
font-size: 2.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.2rem;
    line-height: 1.2;
    letter-spacing: .7px;
}

.slt-card__role {
	font-size: 1.4rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0.35rem;
	letter-spacing: 0.2px;
}

/* Small decorative accent underline seen under the role */
.slt-card__line {
	width: 22px;
	height: 1.5px;
	background-color: rgba(230, 60, 115, 0.85);
	margin: 0 auto;
	transition: opacity 0.3s ease;
}

/* Hidden Description by Default */
.slt-card__desc {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 1.3rem;
	line-height: 1.5;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.95);
	margin-top: 0;
	transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.3s ease;
}

/* HOVER EFFECT: Maroon tint + Display Description */
.slt-card:hover .slt-card__overlay {
	background: linear-gradient(180deg,
			rgba(130, 20, 69, 0.15) 0%,
			rgba(130, 20, 69, 0.65) 45%,
			rgba(110, 15, 55, 0.94) 100%);
	padding-bottom: 1.25rem;
}

.slt-card:hover .slt-card__line {
	display: none;
}

.slt-card:hover .slt-card__desc {
	max-height: 100%;
	opacity: 1;
	margin-top: 0.65rem;
}

.eh-team-blk{
  padding: 0px 3px;
}


@media (max-width: 1199.98px) {
    .slt-title {
        margin-bottom: 3rem;
        font-size: 3.2rem;
        line-height: 1.15;
        letter-spacing: -.08rem;
    }

@media (max-width: 600px) {
    .slt-title {
        margin-bottom: 2.5rem;
        font-size: 3rem;
        line-height: 1.15;
        letter-spacing: -.08rem;
    }
}

 
.article__body ol,.article__body ul {
  list-style: revert; 
}