.heading, .hero-inner-media__desc .heading {
  display: none;
}
.hero-media-section {
  padding: 0;
}
.hero-inner-media__desc {
  margin: 0 -15px 10px;
}
.team-media {
  margin-top: inherit;
}
.verse {
  float: right;
}

.greyBKG {
  background-color: #ebebeb;
  padding: 20px 20px 7px 25px;
  border-radius: 20px;
}

.padd {
  margin: 20px 20px 7px 25px;
}

.hero-inner-media .container {
  width: 100% !important;
}
.intro-carousel-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  grid-template-rows: auto auto; /* scroller + controls row */
  align-items: center;
  gap: 8px;
  max-width: 1244px;
  margin: 0 auto;
}
.intro-controls {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
.intro-showall {
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: #50636f;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.promo-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}
.promo-modal[aria-hidden="false"] {
  display: block;
}
.promo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}
.promo-modal__dialog {
  position: relative;
  max-width: 860px;
  width: calc(100% - 32px);
  margin: 30vh auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  max-height: 90vh;
  overflow: auto;
}
.promo-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.promo-modal__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.card {
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Buttons */
.intro-nav {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #50636f;
  color: #fff;
  font-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  padding-bottom: 6px;
}
.intro-nav:hover {
  opacity: 0.8;
  cursor: pointer;
}
.intro-nav:disabled {
  opacity: .4;
  cursor: default;
}
/* Scroller */
.intro-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.intro-carousel::-webkit-scrollbar {
  height: 0;
} /* hide scrollbar (optional) */
/* Track and items */
.intro-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 8px;
  margin: 0;
  list-style: none;
  scroll-padding-inline: 8px;
}
.intro-track > li {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 270px; /* matches your .card max-width */
}
/* Your existing card styles (add/keep these) */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* or flex-end if you prefer */
  position: relative;
  min-height: 200px;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  color: #404040;
  text-align: center;
  background: none;
  mix-blend-mode: multiply;
  transition: background .3s linear;
  max-width: 270px;
  margin: 0 auto;
  cursor: pointer;
}
.card__info {
  width: 100%;
  padding: 13px 5px;
}
.card__info .title {
  font-size: 17px;
  line-height: 1.1;
}
.card__info .title p {
  font-weight: 400;
  margin-bottom: 0px;
}
/* Circle */
.blueCircle {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #316997;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 12px;
  background-size: cover;
}
.blueCircle h1 {
  font-size: 40px;
  color: #fff;
  margin: 0;
}
.card:hover, .card:focus {
  color: #404040;
}
/* Collapse the 3-col wrapper when showing all */
.intro-carousel-wrap.show-all {
  display: block; /* was: grid */
}
/* Keep the grid on the list itself */
.intro-carousel-wrap.show-all .intro-carousel {
  overflow: visible;
  scroll-snap-type: none;
}
.intro-carousel-wrap.show-all .intro-nav {
  display: none;
}
.intro-carousel-wrap.show-all .intro-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  padding: 8px;
}
.intro-carousel-wrap.show-all .intro-track > li {
  width: auto;
  flex: none;
  scroll-snap-align: none;
}
.intro-carousel-wrap.show-all .card {
  max-width: none;
  width: 100%;
  margin: 0;
}
/* make each slide a positioning context */
.swiper .swiper-slide {
  position: relative;
}
/* make the empty <a> cover the entire slide */
.swiper .swiper-slide > a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 10; /* above images/headings/overlays */
}
/* if any overlays sit above it, disable their click capture */
.slider-overlay, .hero-inner-media__image .heading {
  pointer-events: none; /* so clicks pass through to the link */
}
@media (min-width: 1024px) {
  .image-slider .swiper-slide {
    padding: 0;
    position: static;
    display: block;
    min-height: 710px;
    max-height: 710px;
    margin: 0;
  }
  .hero-inner-media__image {
    width: 100%;
  }
  .discovery-media {
    margin: 60px 0 172px 100px;
  }
  .hero-inner-media__desc {
    padding: 40px 15px 0px 15px;
    margin: 0 -15px 0px;
  }
  .team-media__info {
    padding-top: 0px;
  }
  .team-media-section {
    padding: 0 0 66px;
  }
  .slider-overlay {
    color: #ffffff;
    padding: 0px;
    width: 70%;
    position: absolute;
    padding-top: calc(20%);
    padding-left: calc(15%);
    bottom: auto;
  }
  .has-grad::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% black */
    pointer-events: none; /* so clicks pass through to the image if needed */
  }
}
/* Force grid view at 570px and below */
@media (max-width: 570px) {
  /* Hide the "Show Carousel" button */
  .intro-showall {
    display: none !important;
  }

  /* Force "show-all" grid mode */
  .intro-carousel-wrap {
    display: block;
  }

  .intro-carousel-wrap .intro-carousel {
    overflow: visible !important;
  }

  .intro-carousel-wrap .intro-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 across */
    gap: 16px;
  }

  .intro-carousel-wrap .intro-track > li {
    flex: none !important;   /* prevent flex sizing from carousel */
    width: auto !important;
  }

  /* Optional: hide nav arrows on small screens */
  .intro-carousel-wrap .intro-nav {
    display: none !important;
  }
}