/* Shared Beyond Cases presentation.
   Homepage and Works use the same card proportions, rhythm, labels and states. */
.dv-beyond {
  background: transparent;
  color: #fff;
  padding: clamp(78px, 5.2vw, 100px) 0 clamp(120px, 8.5vw, 164px);
  overflow: hidden;
}

.dv-beyond__inner {
  width: min(78.39vw, 1505px);
  margin: 0 auto;
}

.dv-beyond__title {
  max-width: 38vw;
  margin: 0 0 clamp(52px, 4.2vw, 81px);
  color: #fff;
  font-family: var(--serif, DunbenSerif, Georgia, serif);
  font-size: clamp(52px, 3.75vw, 72px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.06vw;
}

.dv-beyond__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(46px, 5.9vw, 113px);
}

.dv-beyond__col {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: clamp(52px, 4.15vw, 80px);
}

.dv-beyond__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.dv-beyond__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 400 / 460;
  border-radius: 12px;
  background: #a3a3a3;
  box-shadow: 0 4px 36px rgba(0, 0, 0, .1);
}

.dv-beyond__img {
  --dv-beyond-y: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translate3d(0, var(--dv-beyond-y), 0) scale(1.14);
  transition: transform .6s var(--ease, cubic-bezier(.16, 1, .3, 1));
  will-change: transform;
}

.dv-beyond__label {
  margin: clamp(15px, 1.35vw, 26px) 0 0;
  color: #fff;
  font-family: var(--sans, DunbenSans, Helvetica, Arial, sans-serif);
  font-size: clamp(18px, 1.35vw, 26px);
  line-height: 1.1;
}

.dv-beyond__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(70px, 5.2vw, 100px);
}

.dv-beyond__card:focus-visible { outline: 1px solid #fff; outline-offset: 8px; }

@media (min-width: 1101px) {
  .dv-beyond__col .dv-beyond__card:first-child .dv-beyond__label { min-height: 2.2em; }
}

@media (min-width: 1101px) and (hover: hover) {
  .dv-beyond__card:hover .dv-beyond__img,
  .dv-beyond__card:focus-visible .dv-beyond__img {
    transform: translate3d(0, var(--dv-beyond-y), 0) scale(1.18);
  }
  .dv-beyond__card:hover .dv-beyond__label,
  .dv-beyond__card:focus-visible .dv-beyond__label { color: var(--orange, #ff8f29); }
}

@media (max-width: 1100px) {
  .dv-beyond { padding: clamp(72px, 10vw, 110px) 0 clamp(110px, 16vw, 160px); }
  .dv-beyond__inner { width: 88vw; }
  .dv-beyond__title {
    max-width: none;
    margin-bottom: clamp(52px, 9vw, 92px);
    font-size: clamp(48px, 8.5vw, 88px);
  }
  .dv-beyond__grid { flex-direction: column; gap: clamp(54px, 9vw, 96px); }
  .dv-beyond__col { width: 100%; gap: clamp(54px, 9vw, 96px); }
  .dv-beyond__label { font-size: clamp(18px, 4.4vw, 45px); margin-top: clamp(17px, 3.5vw, 36px); }
}

@media (max-width: 767px) {
  .dv-beyond { padding: 88px 0 110px; }
  .dv-beyond__inner { width: calc(100% - 40px); }
  .dv-beyond__title { margin-bottom: 52px; font-size: clamp(48px, 8.5vw, 68px); }
  .dv-beyond__grid,
  .dv-beyond__col { gap: 54px; }
  .dv-beyond__label { font-size: clamp(18px, 4.4vw, 26px); margin-top: 17px; }
  .dv-beyond__more-wrap { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-beyond__img { transform: none !important; transition: none; }
}