.renova-team {
  --team-bg: #f2efe7;
  --team-card: #fff;
  --team-ink: #0a2633;
  --team-muted: #52616a;
  --team-accent: #f4c34d;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: var(--team-ink);
  background: var(--team-bg);
  font-family: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
}

.renova-team *,
.renova-team *::before,
.renova-team *::after { box-sizing: border-box; }

.renova-team::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -310px;
  right: -280px;
  width: 650px;
  height: 650px;
  border: 1px solid color-mix(in srgb, var(--team-ink) 10%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 92px color-mix(in srgb, var(--team-ink) 2.3%, transparent);
  pointer-events: none;
}

.renova-team__inner {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 118px 56px;
}

.renova-team__header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 34px 90px;
  align-items: end;
  margin-bottom: 46px;
}

.renova-team__eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #866a18;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .2em;
}

.renova-team__eyebrow span { width: 30px; height: 2px; background: var(--team-accent); }

.renova-team__heading {
  max-width: 850px;
  margin: 0;
  color: var(--team-ink);
  font-family: "DM Sans", "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: clamp(51px, 5.3vw, 93px);
  font-weight: 770;
  line-height: .94;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.renova-team__description {
  max-width: 520px;
  margin: 0;
  padding-top: 24px;
  border-top: 3px solid var(--team-accent);
  color: var(--team-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  letter-spacing: -.018em;
}

.renova-team__carousel { position: relative; }

.renova-team__viewport {
  position: relative;
  min-height: 620px;
  outline: none;
  perspective: 1100px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.renova-team__viewport:active,
.renova-team__viewport.is-dragging { cursor: grabbing; }

.renova-team__viewport:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--team-accent) 72%, transparent);
  outline-offset: 8px;
  border-radius: 34px;
}

.renova-team__featured {
  --team-x: 0px;
  --team-y: 0px;
  --team-rotate: 0deg;
  --team-scale: 1;
  --team-opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(370px, 30vw);
  aspect-ratio: 3 / 4.25;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 30px;
  color: #fff;
  background: var(--team-ink);
  box-shadow: 0 30px 80px rgba(10, 38, 51, .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.renova-team__featured.is-active { opacity: 1; visibility: visible; }

.renova-team.is-ready .renova-team__featured {
  z-index: var(--team-z, 1);
  opacity: var(--team-opacity);
  visibility: visible;
  transform: translate(-50%, -50%) translate3d(var(--team-x), var(--team-y), 0) rotate(var(--team-rotate)) scale(var(--team-scale));
  transition: transform .62s cubic-bezier(.22, .75, .2, 1), opacity .38s ease, filter .42s ease, box-shadow .42s ease;
  will-change: transform, opacity;
}

.renova-team.is-ready .renova-team__featured:not(.is-active) {
  filter: saturate(.72) brightness(.84);
  box-shadow: 0 22px 52px rgba(10, 38, 51, .16);
}

.renova-team.is-ready .renova-team__viewport.is-dragging .renova-team__featured { transition: none; }

.renova-team__featured-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--team-ink);
}

.renova-team__featured-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 18, 26, .05) 18%, rgba(3, 18, 26, .3) 52%, rgba(3, 18, 26, .96) 100%), linear-gradient(120deg, rgba(10, 38, 51, .18), transparent 52%);
  pointer-events: none;
}

.renova-team__featured-visual img,
.renova-team__member-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .75s cubic-bezier(.22, .75, .2, 1);
}

.renova-team__featured.is-active .renova-team__featured-visual img { transform: scale(1.025); }

.renova-team__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100%;
  padding: 42px;
  color: #fff;
  background-image: radial-gradient(circle, rgba(244, 195, 77, .34) 0 1px, transparent 1.3px);
  background-size: 14px 14px;
  text-align: center;
}

.renova-team__placeholder strong { color: var(--team-accent); font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(80px, 10vw, 144px); font-weight: 800; line-height: .8; letter-spacing: -.08em; }
.renova-team__placeholder span { margin-top: 32px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.renova-team__featured-content {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 30px 30px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
  opacity: .28;
  transform: translateY(8px);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, .75, .2, 1);
}

.renova-team__featured.is-active .renova-team__featured-content { opacity: 1; transform: translateY(0); }

.renova-team__featured-label {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--team-ink);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 26px rgba(3, 18, 26, .14);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
  text-shadow: none;
  backdrop-filter: blur(10px);
}

.renova-team__featured h3,
.renova-team__member h3 { margin: 0; color: #fff; font-family: "DM Sans", "Avenir Next", sans-serif; font-weight: 780; line-height: 1; letter-spacing: -.045em; }
.renova-team__featured h3 { font-size: clamp(25px, 2.35vw, 36px); text-wrap: balance; }
.renova-team__member h3 { font-size: clamp(26px, 2.4vw, 38px); }

.renova-team__role { margin: 10px 0 0; color: var(--team-accent); font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase; }
.renova-team__bio { display: -webkit-box; max-width: 100%; margin: 13px 0 0; overflow: hidden; color: rgba(255, 255, 255, .84); font-size: 13px; line-height: 1.48; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.renova-team__featured:not(.is-active) .renova-team__role,
.renova-team__featured:not(.is-active) .renova-team__bio { opacity: 0; }

.renova-team__navigation { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 8px; }
.renova-team__arrow { display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid color-mix(in srgb, var(--team-ink) 18%, transparent); border-radius: 50%; color: var(--team-ink); background: var(--team-card); box-shadow: 0 10px 24px rgba(10, 38, 51, .1); font: 700 1.25rem/1 "Manrope", sans-serif; cursor: pointer; transition: color .22s ease, background-color .22s ease, transform .22s ease; }
.renova-team__arrow:hover { color: var(--team-card); background: var(--team-ink); transform: translateY(-2px); }
.renova-team__arrow:focus-visible,
.renova-team__dot:focus-visible { outline: 3px solid color-mix(in srgb, var(--team-accent) 65%, transparent); outline-offset: 4px; }

.renova-team__dots { display: flex; align-items: center; gap: 9px; max-width: min(520px, calc(100vw - 190px)); padding: 8px 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.renova-team__dots::-webkit-scrollbar { display: none; }
.renova-team__dot { flex: 0 0 auto; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--team-ink) 30%, transparent); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.renova-team__dot.is-active { width: 32px; background: var(--team-accent); }

.renova-team__grid { display: none; }
.renova-team__member { padding: 16px 16px 30px; border: 1px solid color-mix(in srgb, var(--team-ink) 11%, transparent); border-radius: 30px; background: var(--team-card); }
.renova-team__member-visual { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 20px; color: var(--team-accent); background: var(--team-ink); font: 800 4rem/1 "DM Sans", sans-serif; }

@media (max-width: 1024px) {
  .renova-team__inner { padding: 96px 36px; }
  .renova-team__header { gap: 30px 54px; }
  .renova-team__viewport { min-height: 550px; }
  .renova-team__featured { width: min(340px, 39vw); }
  .renova-team__featured-content { padding: 30px 26px 26px; }
}

@media (max-width: 767px) {
  .renova-team__inner { padding: 82px 22px 88px; }
  .renova-team__header { grid-template-columns: 1fr; gap: 26px; margin-bottom: 34px; }
  .renova-team__eyebrow { grid-column: auto; font-size: 10px; }
  .renova-team__heading { font-size: clamp(45px, 12vw, 68px); }
  .renova-team__description { font-size: 16px; }
  .renova-team__viewport { min-height: 480px; }
  .renova-team__featured { width: min(306px, 78vw); border-radius: 24px; }
  .renova-team__featured-content { padding: 26px 22px 22px; }
  .renova-team__featured-label { top: 16px; right: 16px; }
  .renova-team__featured h3 { font-size: clamp(23px, 7vw, 30px); }
  .renova-team__role { margin-top: 8px; font-size: 10px; }
  .renova-team__bio { margin-top: 9px; font-size: 12px; line-height: 1.4; -webkit-line-clamp: 5; }
  .renova-team__navigation { gap: 18px; margin-top: 4px; }
  .renova-team__arrow { width: 46px; height: 46px; }
  .renova-team__dots { max-width: calc(100vw - 174px); }
}

@media (prefers-reduced-motion: reduce) {
  .renova-team *,
  .renova-team *::before,
  .renova-team *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
