@font-face {
  font-family: "Northwell";
  src: url("./Northwell.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


.st-carousel {
  width: 100%;
  background-color: var(--background-primary) !important;
}

.st-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.st-carousel__track {
  display: flex;
  gap: 18px;   
  padding: 12px 6px;
  align-items: stretch;
  will-change: transform;
}

.st-carousel__static {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.st-carousel__card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  min-width: 280px; /* controls how many cards are visible */
  max-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 380px;
}

.st-carousel__logo {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  /*background: #f2f2f8;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*overflow: hidden;*/
}

.st-carousel__logoImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-carousel__logoPlaceholder {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
  display: inline-block;
}

.st-carousel__text {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 14px 0;
}

.st-carousel__footer {
  margin-top: 12px;
}

.st-carousel__name {
  font-family: "Northwell", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 51px;
  line-height: 1;
  margin-bottom: 6px;
}

.st-carousel__role {
  font-size: 16px;
  color: #6b7280;
  margin-top: 8px;
}


.st-carousel {
  background: none !important;   /* kills gradients + images */
  background-color: transparent; /* explicit reset */
}

.wp-block-group .st-carousel,
.wp-block-cover .st-carousel {
  background: none !important;
  background-color: #F8F8F8 !important
}

.st-carousel__body {
  display: block;
}


.st-clientstrip {
  background: #E8E8F2;
  border-radius: 14px;
  padding: 26px 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}

.st-clientstrip__divider {
  width: 2px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  justify-self: center;
}

.st-clientstrip__header {
  margin-bottom: 10px;
  padding: 10px
}

.st-clientstrip__title {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  color: #0f172a;
}

.st-clientstrip__title span{
  background: linear-gradient(
    90deg,
    #7079FA 0%,
    #E87DFA 50%,
    #25DBE3 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* future support */
}

.st-clientstrip__text {
  margin: 4px 0 0 0;
  font-size: 24px;
  color: rgba(15, 23, 42, 0.65);
}

.st-clientstrip__logos {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
}

.st-clientstrip__logoWrap {
  /*background: rgba(0,0,0,0.06);*/
  /*background-color: #DFDFF0;*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.st-clientstrip__logoWrap--client {
  /*width: 66px;
  height: 66px;*/
  width: 164px;
  height: 164px;  
 /* border-radius: 999px; /* round like left side */
}

.st-clientstrip__logoWrap--partner {
  width: 164px;
  height: 164px;
  border-radius: 8px; /* pill/rounded-rect like right side */
}

.st-clientstrip__logoImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-clientstrip__placeholder {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(0,0,0,0.14);
  display: inline-block;
}

@media (max-width: 640px) {
  .st-clientstrip {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "divider"
      "right";
    gap: 16px;
  }

  .st-clientstrip__col--left {
    grid-area: left;
  }

  .st-clientstrip__divider {
    grid-area: divider;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.08);
    justify-self: stretch;
  }

  .st-clientstrip__col--right {
    grid-area: right;
  }

  .st-clientstrip__logos {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .st-carousel__viewport {
    overflow-x: auto;                 /* allow proper horizontal scrolling */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5vw;         /* helps centering with snap */
    scroll-padding-right: 5vw;
    padding: 0;                       /* remove previous padding approach */
  }

  .st-carousel__track {
    display: flex;
    gap: 16px;
    padding: 0 5vw;                   /* gutters live on the track instead */
    align-items: stretch;
    width: max-content;               /* prevents flex from compressing */
  }

  .st-carousel__card {
    flex: 0 0 auto;                   /* DO NOT shrink */
    width: 90vw;                      /* key: based on viewport width */
    max-width: 420px;                 /* prevents huge cards on phablets */
    scroll-snap-align: center;
  }
}

.st-carousel__card {
  display: flex;
  flex-direction: column;
  height: 485px;
}

.st-carousel__footer {
  margin-top: auto;
}



@media (max-width: 640px) {

  .st-clientstrip__title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
  }
  
  .st-clientstrip__text {
    margin: 4px 0 0 0;
    font-size: 24px;
    color: rgba(15, 23, 42, 0.65);
    text-align: center;
  }
  
  .st-clientstrip__logos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
  }

  .st-clientstrip__logos--partners {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

}

/* Desktop-only moving logo strips (keeps existing mobile layout intact) */
@media (min-width: 641px) {
  .st-clientstrip__logosViewport {
    overflow: hidden;
    width: 100%;
  }

  .st-clientstrip__logosTrack {
    width: max-content;          /* prevents flex from compressing */
    flex-wrap: nowrap;           /* force single row on desktop */
    will-change: transform;
  }

  .st-clientstrip__logosTrack .st-clientstrip__logoWrap {
    flex: 0 0 auto;              /* do not shrink */
  }
}

/* Mobile: explicitly preserve current behavior */
@media (max-width: 640px) {
  .st-clientstrip__logosViewport {
    overflow: visible;
  }

  .st-clientstrip__logosTrack {
    width: auto;
  }
}


/* Fix: allow grid columns to actually split evenly (desktop) */
@media (min-width: 641px) {
  .st-clientstrip__col {
    min-width: 0;            /* key: allows content to shrink in grid */
  }

  .st-clientstrip__logosViewport {
    min-width: 0;            /* prevents the viewport from forcing column width */
    width: 100%;
    overflow: hidden;        /* ensures clipping within each half */
  }

  .st-clientstrip__logosTrack {
    display: flex;           /* defensive: ensure it's a flex row */
    flex-wrap: nowrap;
    width: max-content;
  }
}


@media (min-width: 641px) {
  .st-clientstrip__col {
    justify-self: stretch;
  }
}


@media (min-width: 641px) {
  .st-clientstrip__logosViewport {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  .st-clientstrip__logosTrack {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;            /* keep consistent with .st-clientstrip__logos */
    width: max-content;   /* make the row as wide as its contents */
    will-change: transform;
  }

  /* KEY: prevent flex items from shrinking to fit */
  .st-clientstrip__logosTrack .st-clientstrip__logoWrap {
    flex: 0 0 auto;
  }

  /* Also ensure grid columns can shrink with overflowing content */
  .st-clientstrip__col {
    min-width: 0;
  }
}

/* Desktop marquee only: keeps existing mobile layout intact */
@media (min-width: 641px) {
  .st-clientstrip__logosViewport {
    overflow: hidden;
    width: 100%;
  }

  .st-clientstrip__logosTrack {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    /*animation: st-marquee 28s linear infinite;*/
  }

  .st-clientstrip__logosTrack .st-clientstrip__logoWrap {
    flex: 0 0 auto;
  }

  /* Slightly different speed for partners if you want */
  .st-clientstrip__logos--partners {
    animation-duration: 34s;
  }

  @keyframes st-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    /*.st-clientstrip__logosTrack { animation: none; transform: none; }*/
  }
}


/* Mobile: stacked layout stays, but logos marquee vertically */
@media (max-width: 640px) {
  /* make each logo area a "window" so you can see movement */
  .st-clientstrip__logosViewport {
    overflow: hidden;                /* was visible; we need hidden for marquee */
    /*height: 220px;                   /* tweak to taste */
    width: 100%;
  }

  /* vertical track */
  .st-clientstrip__logosTrack {
    display: flex;
    flex-direction: column;          /* vertical */
    flex-wrap: nowrap;               /* no wrapping */
    align-items: center;
    will-change: transform;
  }

  /* ensure items don't shrink */
  .st-clientstrip__logosTrack .st-clientstrip__logoWrap {
    flex: 0 0 auto;
  }
}


/* Mobile: keep logos in a single row and marquee horizontally */
@media (max-width: 640px) {
  .st-clientstrip__logosViewport {
    overflow: hidden;         /* must be hidden for marquee */
    width: 100%;
  }

  .st-clientstrip__logosTrack,
  .st-clientstrip__logos {
    display: flex;
    flex-direction: row;      /* ensure horizontal */
    flex-wrap: nowrap;        /* prevent stacking/wrapping */
    align-items: center;
    width: max-content;       /* allow it to be wider than viewport */
    will-change: transform;
  }

  .st-clientstrip__logosTrack .st-clientstrip__logoWrap {
    flex: 0 0 auto;           /* prevent shrink */
  }
}
@media (max-width: 640px) {
  .st-clientstrip__logos { flex-wrap: wrap; }
}


/* MOBILE: stacked columns, BUT logos stay in a single row and marquee horizontally */
@media (max-width: 640px) {
  .st-clientstrip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "divider"
      "right";
    gap: 16px;
  }

  .st-clientstrip__col--left { grid-area: left; }
  .st-clientstrip__col--right { grid-area: right; }

  .st-clientstrip__divider {
    grid-area: divider;
    width: 100%;
    height: 1px;
    justify-self: stretch;
  }

  .st-clientstrip__title,
  .st-clientstrip__text {
    text-align: center;
  }

  /* marquee window */
  .st-clientstrip__logosViewport {
    overflow: hidden;   /* important */
    width: 100%;
  }

  /* single horizontal strip */
  .st-clientstrip__logosTrack,
  .st-clientstrip__logos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important; /* important: never wrap on mobile */
    align-items: center;
    width: max-content;
    will-change: transform;
  }

  .st-clientstrip__logoWrap {
    flex: 0 0 auto;
  }

  /* scale logos down for mobile so you can actually see movement */
  .st-clientstrip__logoWrap--client {
    width: 92px;
    height: 92px;
  }

  .st-clientstrip__logoWrap--partner {
    width: 120px;
    height: 164px;
  }
}


/* Mobile: prevent logo strip from pushing outside its column */
@media (max-width: 640px) {
  .st-clientstrip__col {
    min-width: 0;          /* allow children to shrink inside grid */
    overflow: hidden;      /* clip any animated track overflow */
  }

  .st-clientstrip__logosViewport {
    min-width: 0;
    overflow: hidden;      /* ensure viewport clips */
  }
}


/* Marquee animation (works on mobile + desktop) */
.st-clientstrip__logosViewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.st-clientstrip__logosTrack {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  /*animation: st-marquee 28s linear infinite;*/
}

.st-clientstrip__logosTrack .st-clientstrip__logoWrap {
  flex: 0 0 auto;
}

/* Optional: different speed for partners */
.st-clientstrip__logos--partners {
  animation-duration: 34s;
}

@keyframes st-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /*.st-clientstrip__logosTrack { animation: none; transform: none; }*/
}



.st-clientstrip__logosTrack{
  animation: none !important;
  transform: none; /* JS will set transform */
}

.st-clientstrip__logosViewport.marquee3k {
  overflow: hidden;
}

.st-clientstrip__logosTrack,
.st-clientstrip__logos {
  display: flex;
  align-items: center;
  gap: 30px;
}


/* Marquee3000 sets display:inline-block inline — override it */
.st-clientstrip__logosTrack,
.st-clientstrip__logos {
  display: inline-flex !important;  /* key line */
  align-items: center;
  flex-wrap: nowrap;
  gap: 30px;                        /* your gap works again */
}

/* Hide overflow like a marquee window */
.st-carousel__viewport.marquee3k {
  overflow: hidden;
}

/* Marquee3k may set inline-block; keep it flex so gap/row layout works */
.st-carousel__track {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;              /* keep your spacing */
}

/* Prevent cards from shrinking weirdly */
.st-carousel__card {
  flex: 0 0 auto;
}


/* Marquee3k sets nowrap on the marquee element — undo it inside cards */
.st-carousel__viewport.marquee3k { white-space: nowrap; } /* keep marquee behavior */

.st-carousel__card,
.st-carousel__card * {
  white-space: normal;
}

.st-carousel__text {
  white-space: normal;
  overflow-wrap: anywhere; /* prevents long words from busting layout */
}