/* /team/ "Growth Experience" — full grid of career highlights (design: Growth
   Experience Options.dc.html, concept 2A). Replaces the horizontal scroll rail;
   every card is visible at once, hover lift only. */

.growth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.growth-card {
  display: flex;
  flex-direction: column;
  background: #111D3B;
  box-shadow: 8px 8px 0 var(--accent, #35D0EE);
  transition: transform .28s ease, box-shadow .28s ease;
}
.growth-card:hover, .growth-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 11px 11px 0 var(--deep, var(--accent, #35D0EE));
  animation-play-state: paused;
}
/* Hover shadow swaps to a second brand colour (matches /pricing base->deep). */
.growth-card:nth-child(1) { --deep: #4B3FD6; }
.growth-card:nth-child(2) { --deep: #4B3FD6; }
.growth-card:nth-child(3) { --deep: #F45FC0; }
.growth-card:nth-child(4) { --deep: #F45FC0; }
.growth-card:nth-child(5) { --deep: #F45FC0; }
.growth-card:nth-child(6) { --deep: #4B3FD6; }

.growth-card__banner {
  position: relative;
  height: 88px;
  overflow: hidden;
  background: #0D1B2E;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.growth-card__banner img { width: 100%; height: 88px; object-fit: cover; }

.growth-card__body { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.growth-card__body h3 {
  margin: 0;
  font-family: 'Bakbak One', sans-serif;
  font-size: 30px; font-weight: 400; line-height: .95;
  text-transform: uppercase; color: #fff;
}
.growth-card__role {
  margin: 10px 0 18px;
  color: var(--accent, #35D0EE);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.growth-card__stats {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin-bottom: 20px; padding: 16px 0;
  border-block: 1px solid rgba(255, 255, 255, .13);
}
.growth-stat__num {
  display: block;
  font-family: 'Bakbak One', sans-serif; font-size: 24px; line-height: 1;
  color: var(--accent, #35D0EE);
}
.growth-stat__label {
  display: block; margin-top: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8FA0B2;
}
.growth-card__desc { margin: 0; color: #C8D2DD; font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.growth-card__desc a { color: var(--accent, #35D0EE); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) { .growth-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .growth-grid { grid-template-columns: 1fr; } }


/* /team/ "Our Values" — gradient cards with faded Material Symbols watermark
   (design: Team Values.dc.html). */
.tval-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tval-card {
  position: relative; overflow: hidden; min-height: 176px; padding: 26px 28px;
  color: #0A1018; background: var(--grad); box-shadow: 8px 8px 0 var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}
.tval-card:hover, .tval-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 11px 11px 0 var(--deep, var(--shadow));
  animation-play-state: paused;
}
.tval-card:nth-child(1) { --deep: #F45FC0; }
.tval-card:nth-child(2) { --deep: #35D0EE; }
.tval-card:nth-child(3) { --deep: #F45FC0; }
.tval-card:nth-child(4) { --deep: #4B3FD6; }
.tval-card:nth-child(5) { --deep: #F45FC0; }
.tval-card:nth-child(6) { --deep: #35D0EE; }
.tval-card--light { color: #fff; }
.tval-card__wm {
  position: absolute; right: -6px; bottom: -26px;
  font-variation-settings: 'FILL' 1;
  font-size: 180px; line-height: 1; color: #0A1018; opacity: .11; pointer-events: none;
  transition: transform .3s ease;
}
.tval-card--light .tval-card__wm { color: #fff; opacity: .16; }
.tval-card:hover .tval-card__wm { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) and (min-width:100000px) {
  .growth-card, .tval-card, .tval-card__wm { transition: none; animation: none; translate: none; }
  .growth-card:hover, .tval-card:hover { transform: none; }
  .tval-card:hover .tval-card__wm { transform: none; }
}
.tval-card h3 {
  position: relative; margin: 0 0 10px;
  font-family: 'Bakbak One', sans-serif; font-size: 27px; font-weight: 400; line-height: 1; text-transform: uppercase;
}
.tval-card p {
  position: relative; max-width: 30ch; margin: 0;
  color: rgba(10, 16, 24, .78); font-size: 15px; line-height: 1.6; text-wrap: pretty;
}
.tval-card--light p { color: rgba(255, 255, 255, .82); }
@media (max-width: 900px) { .tval-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tval-grid { grid-template-columns: 1fr; } }


/* Gentle continuous float (standard TapSocial card float, matching /pricing).
   Driven by the standalone `translate` property so it composes with the hover
   `transform: translateY(-7px)` lift. Staggered delays so cards don't bob in
   unison; the float pauses on hover. */
@keyframes ts-card-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
.growth-card, .tval-card { animation: ts-card-float 8s ease-in-out infinite; }
.growth-card:nth-child(2), .tval-card:nth-child(2) { animation-delay: -1.5s; }
.growth-card:nth-child(3), .tval-card:nth-child(3) { animation-delay: -3s; }
.growth-card:nth-child(4), .tval-card:nth-child(4) { animation-delay: -2.2s; }
.growth-card:nth-child(5), .tval-card:nth-child(5) { animation-delay: -4s; }
.growth-card:nth-child(6), .tval-card:nth-child(6) { animation-delay: -0.8s; }