/**
 * Client Impact — Figma artboard 1920, card 662×616.
 * Sizes: value / 1920 × 100vw.
 */

.home-v2 .v2-section--client-impact,
.v2-section--client-impact {
  --impact-card-w: var(--v2-grid-col-1, calc(100vw * 662 / 1920));
  --impact-card-h: calc(100vw * 616 / 1920);
  --impact-card-gap: var(--v2-grid-gap, calc(100vw * 20 / 1920));
  --impact-portrait: calc(100vw * 422 / 1920);
  padding-block: calc(100vw * 120 / 1920);
  overflow: visible;
}

.v2-client-impact-wrap {
  overflow: visible;
}

/* Full-width stage — cards are not clipped by .container (1800px) */
.v2-client-impact-stage {
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(var(--container-pad), calc((100vw - var(--layout-width)) / 2));
}

.v2-client-impact__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 2.083vw, 40px);
  margin-bottom: clamp(32px, 3.125vw, 60px);
}

.v2-client-impact__intro {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 20 / 1920);
  min-width: 0;
}

.v2-client-impact__intro .v2-descriptor {
  margin: 0;
  gap: 15px;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1;
  color: rgba(32, 32, 32, 0.4);
}

.v2-client-impact__intro .v2-descriptor__dot {
  width: 10px;
  height: 10px;
  background: #64db69;
}

.v2-client-impact__heading {
  margin: 0;
  font-size: clamp(36px, 4.688vw, 90px);
  font-weight: 500;
  line-height: 1;
  text-transform: none;
}

.v2-client-impact__heading-main {
  color: #202020;
}

.v2-client-impact__heading-accent {
  color: #64db69;
}

.v2-client-impact__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.042vw, 20px);
  flex-shrink: 0;
}

.v2-client-impact__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 4.167vw, 80px);
  height: clamp(56px, 4.167vw, 80px);
  padding: 0;
  border: 1px solid #202020;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.v2-client-impact__arrow:hover,
.v2-client-impact__arrow:focus-visible,
.v2-client-impact__arrow:active {
  background: #202020;
  border-color: #202020;
}

.v2-client-impact__arrow img {
  display: block;
  width: clamp(12px, 0.833vw, 16px);
  height: clamp(20px, 1.406vw, 27px);
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0);
  transition: filter 0.5s ease;
}

.v2-client-impact__arrow:hover img,
.v2-client-impact__arrow:focus-visible img,
.v2-client-impact__arrow:active img {
  filter: none;
}

.v2-client-impact__arrow--prev img {
  transform: translateX(-1px);
}

.v2-client-impact__arrow--next img {
  transform: rotate(180deg) translateX(-1px);
}

.v2-client-impact {
  overflow: visible;
  margin-inline: 0;
}

.v2-client-impact.swiper {
  overflow: visible;
}

.v2-client-impact .swiper-wrapper {
  align-items: stretch;
}

.v2-client-impact .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .v2-client-impact__head {
    position: relative;
  }

  .v2-client-impact__nav {
    position: absolute;
    left: var(--v2-grid-side-start, calc(var(--impact-card-w) + var(--impact-card-w) + var(--impact-card-gap) + var(--impact-card-gap)));
    bottom: 0;
    gap: calc(100vw * 10 / 1920);
  }

  .v2-client-impact.is-impact-desktop.swiper,
  .v2-client-impact.is-impact-desktop {
    overflow: visible !important;
  }

  .v2-client-impact.is-impact-desktop {
    width: max-content;
  }

  .v2-client-impact.is-impact-desktop .swiper-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--impact-card-gap);
    width: max-content;
    align-items: stretch;
    will-change: transform;
  }

  .v2-client-impact.is-impact-desktop .swiper-slide {
    width: var(--impact-card-w);
    flex-shrink: 0;
    height: auto;
    margin: 0;
    backface-visibility: hidden;
  }

  .v2-client-impact.is-impact-desktop .v2-impact-card {
    width: var(--impact-card-w);
    height: var(--impact-card-h);
  }

  .v2-client-impact.is-impact-desktop .v2-impact-card__video-portrait {
    width: var(--impact-portrait);
    height: var(--impact-portrait);
  }

  .v2-client-impact.is-impact-desktop .v2-impact-card.is-video-active {
    z-index: 2;
  }
}

.v2-impact-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--impact-card-h);
  border-radius: 20px;
  background: #ebebeb;
  overflow: hidden;
}

.v2-impact-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.083vw, 40px) clamp(24px, 2.083vw, 40px) calc(100vw * 30 / 1920);
}

/* Logo + title in one row */
.v2-impact-card__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.563vw, 30px);
  margin-bottom: clamp(24px, 2.604vw, 50px);
  flex-shrink: 0;
}

.v2-impact-card__brand {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(80px, 5.208vw, 100px);
  height: clamp(80px, 5.208vw, 100px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
}

.v2-impact-card__logo {
  display: block;
  width: 100%;
  height: 100%;
}

.v2-impact-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.v2-impact-card__thumb {
  position: absolute;
  right: clamp(-18px, -0.938vw, -10px);
  bottom: clamp(-10px, -0.521vw, -4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.604vw, 50px);
  height: clamp(40px, 2.604vw, 50px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #202020;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.v2-impact-card__thumb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-impact-card__thumb-play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.v2-impact-card__thumb-play img {
  display: block;
  width: clamp(12px, 0.885vw, 17px);
  height: auto;
}

.v2-impact-card__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: clamp(20px, 1.771vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  color: #202020;
}

.v2-impact-card__title-line,
.v2-impact-card__text-line {
  display: inline;
}

.v2-impact-card__title-line + .v2-impact-card__title-line::before,
.v2-impact-card__text-line + .v2-impact-card__text-line::before {
  content: " ";
}

/* Situation | Our Impact — 250 : 295 from Figma */
.v2-impact-card__cols {
  display: grid;
  grid-template-columns: minmax(0, 0.459fr) minmax(0, 0.541fr);
  gap: clamp(12px, 1.042vw, 20px);
  flex-shrink: 0;
  padding-top: calc(100vw * 30 / 1920);
  padding-bottom: calc(100vw * 30 / 1920);
  border-top: 1px dotted rgba(32, 32, 32, 0.2);
  border-bottom: 1px dotted rgba(32, 32, 32, 0.2);
}

.v2-impact-card__label {
  margin: 0 0 clamp(8px, 0.625vw, 12px);
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.2;
  color: rgba(32, 32, 32, 0.3);
}

.v2-impact-card__text {
  margin: 0;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.22;
  color: #202020;
}

/* Result — full width below */
.v2-impact-card__result {
  margin-top: auto;
}

.v2-impact-card__results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-impact-card__result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 0.521vw, 10px);
  padding-block: clamp(10px, 0.833vw, 16px);
  border-top: 1px dotted rgba(32, 32, 32, 0.2);
}

.v2-impact-card__result-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.v2-impact-card__result-row:last-child {
  padding-bottom: 0;
}

.v2-impact-card__result-text {
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.22;
  color: #202020;
}

.v2-impact-card__result-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64db69;
}

/* Active center slide — video overlay */
.v2-impact-card__video {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  visibility: hidden;
  pointer-events: none;
}

.v2-impact-card.is-video-active:not(.is-video-dismissed) .v2-impact-card__video {
  visibility: visible;
  pointer-events: auto;
}

.v2-impact-card__video-blur {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(235, 235, 235, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.v2-impact-card.is-video-active.is-video-reveal:not(.is-video-dismissed) .v2-impact-card__video-blur,
.v2-impact-card.is-video-active.is-video-reveal:not(.is-video-dismissed) .v2-impact-card__video-portrait,
.v2-impact-card.is-video-active.is-video-reveal:not(.is-video-dismissed) .v2-impact-card__video-el,
.v2-impact-card.is-video-active.is-video-reveal:not(.is-video-dismissed) .v2-impact-card__video-mute,
.v2-impact-card.is-video-active.is-video-reveal:not(.is-video-dismissed) .v2-impact-card__video-close {
  opacity: 1;
}

.v2-impact-card__video-portrait {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: var(--impact-portrait);
  height: var(--impact-portrait);
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.v2-impact-card__video-mute,
.v2-impact-card__video-close {
  position: absolute;
  top: clamp(16px, 1.563vw, 30px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 1.563vw, 30px);
  height: clamp(24px, 1.563vw, 30px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.v2-impact-card__video-close {
  right: clamp(16px, 1.563vw, 30px);
}

.v2-impact-card__video-mute {
  right: clamp(52px, 3.646vw, 70px);
}

.v2-impact-card__video-close img {
  display: block;
  width: 100%;
  height: auto;
}

.v2-impact-card__video-mute-icon {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
}

.v2-impact-card__video-mute-icon--on {
  display: block;
}

.v2-impact-card__video-mute.is-muted .v2-impact-card__video-mute-icon--on {
  display: none;
}

.v2-impact-card__video-mute.is-muted .v2-impact-card__video-mute-icon--off {
  display: block;
}

.v2-impact-card__video-el {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--impact-portrait);
  height: var(--impact-portrait);
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 1024px) {
  .v2-client-impact__head {
    gap: calc(100vw * 40 / 1920);
    margin-bottom: calc(100vw * 60 / 1920);
  }

  .v2-client-impact__intro .v2-descriptor {
    gap: calc(100vw * 15 / 1920);
    font-size: calc(100vw * 20 / 1920);
  }

  .v2-client-impact__intro .v2-descriptor__dot {
    width: calc(100vw * 10 / 1920);
    height: calc(100vw * 10 / 1920);
  }

  .v2-client-impact__heading {
    font-size: calc(100vw * 90 / 1920);
  }

  .v2-client-impact__nav {
    gap: calc(100vw * 10 / 1920);
  }

  .v2-client-impact__arrow {
    width: calc(100vw * 80 / 1920);
    height: calc(100vw * 80 / 1920);
  }

  .v2-client-impact__arrow img {
    width: calc(100vw * 16 / 1920);
    height: calc(100vw * 27 / 1920);
  }

  .v2-impact-card {
    border-radius: calc(100vw * 20 / 1920);
  }

  .v2-impact-card__body {
    padding: calc(100vw * 40 / 1920) calc(100vw * 40 / 1920) calc(100vw * 30 / 1920);
  }

  .v2-impact-card__head {
    gap: calc(100vw * 30 / 1920);
    margin-bottom: calc(100vw * 50 / 1920);
  }

  .v2-impact-card__brand {
    width: calc(100vw * 100 / 1920);
    height: calc(100vw * 100 / 1920);
  }

  .v2-impact-card__thumb {
    right: calc(100vw * -18 / 1920);
    bottom: calc(100vw * -10 / 1920);
    width: calc(100vw * 50 / 1920);
    height: calc(100vw * 50 / 1920);
  }

  .v2-impact-card__thumb-play img {
    width: calc(100vw * 17 / 1920);
  }

  .v2-impact-card__title {
    font-size: calc(100vw * 34 / 1920);
  }

  .v2-impact-card__cols {
    gap: calc(100vw * 20 / 1920);
    padding-top: calc(100vw * 30 / 1920);
    padding-bottom: calc(100vw * 30 / 1920);
  }

  .v2-impact-card__label {
    margin-bottom: calc(100vw * 12 / 1920);
    font-size: calc(100vw * 18 / 1920);
  }

  .v2-impact-card__result {
    margin-top: calc(100vw * 30 / 1920);
  }

  .v2-impact-card__text,
  .v2-impact-card__result-text {
    font-size: calc(100vw * 18 / 1920);
    line-height: calc(100vw * 22 / 1920);
  }

  .v2-impact-card__result-row {
    gap: calc(100vw * 10 / 1920);
    padding-block: calc(100vw * 16 / 1920);
  }

  .v2-impact-card__result-dot {
    width: calc(100vw * 6 / 1920);
    height: calc(100vw * 6 / 1920);
  }

  .v2-impact-card__video-mute,
  .v2-impact-card__video-close {
    top: calc(100vw * 30 / 1920);
    width: calc(100vw * 30 / 1920);
    height: calc(100vw * 30 / 1920);
  }

  .v2-impact-card__video-close {
    right: calc(100vw * 30 / 1920);
  }

  .v2-impact-card__video-mute {
    right: calc(100vw * 70 / 1920);
  }
}

@media (max-width: 1023px) {
  .home-v2 .v2-section--client-impact,
  .v2-section--client-impact {
    --impact-card-w: 100%;
    --impact-card-h: calc(100vw * 512 / 390);
    --impact-card-gap: calc(100vw * 16 / 390);
    --impact-portrait: calc(100vw * 320 / 390);
    padding-top: var(--v2-section-gap);
    padding-bottom: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .v2-client-impact-wrap {
    overflow-x: clip;
    overflow-y: visible;
    min-width: 0;
  }

  .v2-client-impact-stage {
    padding-inline: var(--container-pad);
    overflow-x: hidden;
  }

  .v2-client-impact.swiper {
    overflow: hidden;
  }

  .v2-client-impact__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(100vw * 12 / 390);
    margin-bottom: calc(100vw * 28 / 390);
  }

  .v2-client-impact__intro {
    gap: calc(100vw * 15 / 390);
  }

  .v2-section--client-impact .v2-client-impact__intro .v2-descriptor {
    gap: calc(100vw * 10 / 390);
    font-size: calc(100vw * 12 / 390);
  }

  .v2-section--client-impact .v2-client-impact__intro .v2-descriptor__dot {
    width: calc(100vw * 6 / 390);
    height: calc(100vw * 6 / 390);
  }

  .v2-client-impact__heading {
    font-size: calc(100vw * 36 / 390);
    text-transform: none;
  }

  .v2-client-impact__nav {
    gap: calc(100vw * 5 / 390);
    margin-bottom: calc(100vw * 4 / 390);
  }

  .v2-client-impact__arrow {
    width: calc(100vw * 40 / 390);
    height: calc(100vw * 40 / 390);
  }

  .v2-client-impact__arrow img {
    width: calc(100vw * 10 / 390);
    height: calc(100vw * 17 / 390);
    object-fit: contain;
  }

  .v2-client-impact .swiper-slide {
    width: 100%;
    max-width: none;
  }

  .v2-impact-card {
    width: 100%;
    height: var(--impact-card-h);
    min-height: 0;
    border-radius: calc(100vw * 20 / 390);
  }

  .v2-impact-card__body {
    padding-block: 20px;
    padding-inline: calc(100vw * 20 / 390);
  }

  .v2-impact-card__head {
    gap: calc(100vw * 16 / 390);
    margin-bottom: calc(100vw * 24 / 390);
  }

  .v2-impact-card__brand {
    width: calc(100vw * 60 / 390);
    height: calc(100vw * 60 / 390);
  }

  .v2-impact-card__thumb {
    width: calc(100vw * 30 / 390);
    height: calc(100vw * 30 / 390);
    right: calc(100vw * -4 / 390);
    bottom: calc(100vw * -3 / 390);
  }

  .v2-impact-card__thumb-play img {
    width: calc(100vw * 10 / 390);
  }

  .v2-impact-card__title {
    font-size: calc(100vw * 22 / 390);
  }

  .v2-impact-card__cols {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
    padding-bottom: calc(100vw * 14 / 390);
  }

  .v2-impact-card__col {
    padding-block: calc(100vw * 14 / 390);
    border-top: 1px dotted rgba(32, 32, 32, 0.2);
  }

  .v2-impact-card__col:last-child {
    padding-bottom: 0;
  }

  .v2-impact-card__title-line,
  .v2-impact-card__text-line {
    display: block;
  }

  .v2-impact-card__title-line + .v2-impact-card__title-line::before,
  .v2-impact-card__text-line + .v2-impact-card__text-line::before {
    content: "";
  }

  .v2-impact-card__label {
    margin-bottom: calc(100vw * 8 / 390);
    font-size: calc(100vw * 14 / 390);
  }

  .v2-impact-card__text,
  .v2-impact-card__result-text {
    font-size: calc(100vw * 14 / 390);
  }

  .v2-impact-card__result {
    margin-top: calc(100vw * 14 / 390);
  }

  .v2-impact-card__result-row {
    gap: calc(100vw * 8 / 390);
    padding-block: calc(100vw * 14 / 390);
  }

  .v2-impact-card__result-row:first-child {
    padding-top: calc(100vw * 14 / 390);
  }

  .v2-impact-card__result-row:last-child {
    padding-bottom: 0;
  }

  .v2-impact-card__result-row:last-child {
    padding-bottom: 0;
  }

  .v2-impact-card__result-dot {
    width: calc(100vw * 6 / 390);
    height: calc(100vw * 6 / 390);
  }

  .v2-impact-card__video-portrait {
    width: var(--impact-portrait);
    height: var(--impact-portrait);
  }

  .v2-impact-card__video-mute,
  .v2-impact-card__video-close {
    top: calc(100vw * 20 / 390);
    width: calc(100vw * 24 / 390);
    height: calc(100vw * 24 / 390);
  }

  .v2-impact-card__video-close {
    right: calc(100vw * 20 / 390);
  }

  .v2-impact-card__video-mute {
    right: calc(100vw * 56 / 390);
  }
}