.team-section { padding: 4rem 0; width:100%; }
.team-section-container { max-width:1250px; margin:auto; padding: 0 2rem; }

.team-section-title {
  text-align:center; text-transform:uppercase; font-weight:800; margin-bottom:3rem;
  font-family:'proxima-nova',sans-serif; color:#f36d24;
}

.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
@media (max-width:1224px){ .team-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .team-grid { grid-template-columns:1fr; } }

/* Card */
.team-card-wrapper { position: relative;transition:box-shadow .3s ease; }
.team-card-wrapper:hover {box-shadow:0 12px 25px rgba(0,0,0,.2);} 
.team-card {
  background:#fff; border-radius:6px; overflow:visible; display:flex; flex-direction:column;
  height:100%; min-width:200px; transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow:0 0 0 rgba(0,0,0,0); filter:brightness(1) contrast(1);
}
.team-card:hover { transform:translateY(-6px); filter:brightness(1.03) contrast(1.03); border-radius:6px;}

/* Image becomes the anchor for the banner */
.team-image { position:relative; overflow:visible; aspect-ratio: 4 / 5; }   /* keeps a consistent box */
.team-image img { width:100%; height:100%; object-fit:cover; border-top-right-radius:4px; border-top-left-radius:4px; }
.team-card:hover .team-image img {  }

/* Banner: anchored to the image bottom, no hard-coded tops */
.team-name-banner{
  position:absolute; left:-10px; bottom:-27px; /* slight overlap onto the white panel */
  background-color:#F36d24; color:#fff; font-weight:700;
  font-size: clamp(1.65rem, 3.5vw, 2rem);
  padding:.6rem 1.8rem; text-transform:uppercase; font-family:'trumpsoftpro',sans-serif;
  border-top-right-radius:4px; border-bottom-right-radius:4px; z-index:2;
}

/* Content */
.team-info { padding:2rem 1.25rem 1rem; font-family:'Proxima Nova',sans-serif; position:relative; z-index:1; }
@media (max-width:640px){ .team-info { padding:2rem 1.25rem 1rem; } }

.team-title { font-weight:700; font-size:1.1rem !important; color:#f35d24; text-transform:uppercase; margin:.5rem 0 1rem; }
.team-info p { font-size:1rem; margin:1rem 0; line-height:1.2; }
.team-info p strong { display:block; font-weight:700; margin-bottom:.2rem; }
.team-info h6 {font-family:'proxima-nova', sans-serif;font-size:1rem;}
/* remove ALL old .team-name-banner { top: ... } rules */
/* touch devices: no hover movement */
@media (hover: none) {
  .team-card-wrapper:hover { box-shadow:none; }
  .team-card:hover { transform:none; filter:none; }
}
/* clip anything that leaks outside the card box */
.team-card { overflow: visible; }

/* keep the banner inside the card's width */
.team-name-banner{
  left: 0;                 /* anchor at the card edge */
  transform: translateX(-10px); /* visually offset without changing layout */
  max-width: calc(100% + 10px); /* never exceed the card width */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* default: NO transitions during first paint */


/* once ready, allow hover/scroll-in transitions */
.ready .team-card {
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
@media (hover: none), (max-width: 768px) {
  .team-section .slide-in-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
	.team-card .slide-in-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* Desktop-only hover/active effects */
@media (hover: hover) and (pointer: fine) {
  .team-card-wrapper:hover { box-shadow:0 12px 25px rgba(0,0,0,.2); }
  .team-card:hover { transform: translateY(-6px); filter: brightness(1.03) contrast(1.03); }
  .gradient-button:hover { transform: translateY(-3px) scale(1.03); }
  .gradient-button:active { transform: translateY(0) translateX(-0.6em) scale(0.98); }
}

/* Touch: no transform changes on tap */
@media (hover: none) {
  .team-card-wrapper:hover,
  .team-card:hover,
  .gradient-button:hover,
  .gradient-button:active { transform: none !important; }
}