/* Shared project visualisation-to-realisation editorial component. */
.page-city-walk-apartment .city-walk-project-details,
.page-mirdif-villa .tp-project-details-area {
  padding-bottom: 0 !important;
}

.project-detail-page .city-walk-realisation {
  --city-walk-realisation-bg: #24221e;
  --city-walk-realisation-media: #191815;
  --city-walk-realisation-ink: #f2eee6;
  --city-walk-realisation-copy: #c8c1b7;
  --city-walk-realisation-muted: #999289;
  --city-walk-realisation-line: rgba(242, 238, 230, .18);
  position: relative;
  width: 100%;
  padding: clamp(82px, 7vw, 118px) clamp(28px, 6vw, 96px) clamp(92px, 8vw, 132px);
  overflow: hidden;
  color: var(--city-walk-realisation-copy);
  background: var(--city-walk-realisation-bg);
  font-family: Qanelas-Regular, Arial, sans-serif;
}

.project-detail-page .city-walk-realisation__inner {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
}

.project-detail-page .city-walk-realisation__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .55fr);
  grid-template-rows: auto auto;
  column-gap: clamp(64px, 8vw, 132px);
  row-gap: clamp(20px, 2vw, 28px);
  align-items: start;
  margin: 0;
  padding-bottom: clamp(48px, 5vw, 68px);
  border-bottom: 1px solid var(--city-walk-realisation-line);
}

.project-detail-page .city-walk-realisation__eyebrow,
.project-detail-page .city-walk-realisation__title,
.project-detail-page .city-walk-realisation__introduction,
.project-detail-page .city-walk-realisation__media-label,
.project-detail-page .city-walk-realisation__story-caption,
.project-detail-page .city-walk-realisation__detail-title,
.project-detail-page .city-walk-realisation__detail-introduction {
  margin: 0;
}

.project-detail-page .city-walk-realisation__eyebrow {
  grid-column: 1 / -1;
  font-family: Qanelas-Medium, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--city-walk-realisation-muted);
}

.project-detail-page .city-walk-realisation__title {
  max-width: 16ch;
  font-family: Qanelas-UltraLight, Qanelas-Regular, Arial, sans-serif;
  font-size: clamp(46px, 4.2vw, 68px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
  color: var(--city-walk-realisation-ink);
}

.project-detail-page .city-walk-realisation__introduction {
  max-width: 46ch;
  padding-top: .25em;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--city-walk-realisation-copy);
}

.project-detail-page .city-walk-realisation__stories {
  display: grid;
  gap: 0;
}

.project-detail-page .city-walk-realisation__story {
  margin: 0;
  padding-block: clamp(62px, 6vw, 92px);
  border-bottom: 1px solid var(--city-walk-realisation-line);
}

.project-detail-page .city-walk-realisation__pair {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(22px, 2.4vw, 38px);
  align-items: end;
}

.project-detail-page .city-walk-realisation__media {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.project-detail-page .city-walk-realisation__media-label {
  font-family: Qanelas-Medium, Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--city-walk-realisation-muted);
}

.project-detail-page .city-walk-realisation__image-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--city-walk-realisation-media);
}

/* The completed view is slightly wider, so use a wider crop to keep both
   comparison frames exactly the same height. */
.project-detail-page .city-walk-realisation__media + .city-walk-realisation__media .city-walk-realisation__image-frame {
  aspect-ratio: 28 / 19;
}

.project-detail-page .city-walk-realisation__media + .city-walk-realisation__media .city-walk-realisation__image-frame img {
  object-position: 50% 100%;
}

.project-detail-page .city-walk-realisation__image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--city-walk-realisation-position, 50% 50%);
}

/* The Mirdif media-wall photographs and the portrait coffee-station pair are
   close visual matches at their natural proportions. Keep them uncropped. */
.page-mirdif-villa .city-walk-realisation__story--natural-landscape .city-walk-realisation__pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.page-mirdif-villa .city-walk-realisation__story--portrait-pair .city-walk-realisation__pair {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}

.page-mirdif-villa :is(.city-walk-realisation__story--natural-landscape, .city-walk-realisation__story--portrait-pair) .city-walk-realisation__image-frame,
.page-mirdif-villa :is(.city-walk-realisation__story--natural-landscape, .city-walk-realisation__story--portrait-pair) .city-walk-realisation__media + .city-walk-realisation__media .city-walk-realisation__image-frame {
  display: block;
  aspect-ratio: auto;
}

.page-mirdif-villa :is(.city-walk-realisation__story--natural-landscape, .city-walk-realisation__story--portrait-pair) .city-walk-realisation__image-frame img,
.page-mirdif-villa :is(.city-walk-realisation__story--natural-landscape, .city-walk-realisation__story--portrait-pair) .city-walk-realisation__media + .city-walk-realisation__media .city-walk-realisation__image-frame img {
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
}

.project-detail-page .city-walk-realisation__story-caption {
  max-width: 86ch;
  margin-top: clamp(24px, 2.4vw, 34px);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--city-walk-realisation-copy);
}

.project-detail-page .city-walk-realisation__story-caption::before {
  content: attr(data-comparison);
  display: inline-block;
  margin-right: 18px;
  font-family: Qanelas-Medium, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--city-walk-realisation-muted);
}

.project-detail-page .city-walk-realisation__detail-gallery.residence-gallery {
  --residence-gallery-bg: transparent;
  --residence-gallery-ink: var(--city-walk-realisation-ink);
  --residence-gallery-copy: var(--city-walk-realisation-copy);
  --residence-gallery-muted: var(--city-walk-realisation-muted);
  --residence-gallery-line: var(--city-walk-realisation-line);
  --residence-gallery-gap: clamp(18px, 1.8vw, 28px);
  padding: clamp(66px, 6vw, 94px) 0 0;
  overflow: visible;
  color: var(--city-walk-realisation-copy);
  background: transparent;
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__inner {
  max-width: none;
}

.project-detail-page .city-walk-realisation__detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: clamp(46px, 7vw, 112px);
  align-items: end;
  padding-bottom: clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--city-walk-realisation-line);
}

.project-detail-page .city-walk-realisation__detail-title {
  max-width: 16ch;
  font-family: Qanelas-UltraLight, Qanelas-Regular, Arial, sans-serif;
  font-size: clamp(38px, 3.6vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--city-walk-realisation-ink);
}

.project-detail-page .city-walk-realisation__detail-introduction {
  max-width: 42ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.68;
  color: var(--city-walk-realisation-copy);
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__rooms {
  display: none !important;
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__viewport {
  margin-top: clamp(30px, 3vw, 44px);
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__image-button {
  background: var(--city-walk-realisation-media);
}

.project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--landscape {
  flex-basis: 78%;
}

.project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--portrait {
  flex-basis: clamp(390px, 42%, 590px);
}

.project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__image-button {
  height: auto;
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__slide--landscape .residence-gallery__image-button {
  aspect-ratio: 4 / 3;
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__slide--portrait .residence-gallery__image-button {
  aspect-ratio: 3 / 4;
}

.project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__image-button img {
  object-fit: cover;
  object-position: var(--residence-gallery-position-desktop, 50% 50%);
}

/* Keep Mirdif's mixed landscape and portrait photographs on one visual baseline.
   The full, uncropped source remains available through the image lightbox. */
.page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button {
  height: clamp(560px, 72vh, 820px);
  aspect-ratio: auto;
}

.page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--residence-gallery-position-desktop, 50% 50%);
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__drag-cue {
  background: rgba(36, 34, 30, .86);
  color: var(--city-walk-realisation-ink);
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__fallback-label,
.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__room-label,
.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__counter {
  color: var(--city-walk-realisation-ink);
}

.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__fallback-caption > span:last-child,
.project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__caption {
  color: var(--city-walk-realisation-copy);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .project-detail-page .city-walk-realisation {
    padding: clamp(70px, 8vw, 94px) clamp(30px, 5vw, 58px) clamp(78px, 8vw, 100px);
  }

  .project-detail-page .city-walk-realisation__masthead {
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
    column-gap: clamp(42px, 6vw, 72px);
  }

  .project-detail-page .city-walk-realisation__title {
    font-size: clamp(42px, 6vw, 58px);
  }

  .project-detail-page .city-walk-realisation__detail-gallery.residence-gallery {
    padding-right: 0;
    padding-left: 0;
  }

  .project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--landscape {
    flex-basis: 84%;
  }

  .project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--portrait {
    flex-basis: clamp(350px, 48%, 500px);
  }

  .page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button {
    height: clamp(470px, 62vh, 680px);
  }

  .page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button img {
    object-position: var(
      --residence-gallery-position-tablet,
      var(--residence-gallery-position-desktop, 50% 50%)
    );
  }
}

@media (max-width: 767.98px) {
  .project-detail-page .city-walk-realisation {
    padding: 62px 20px 76px;
  }

  .project-detail-page .city-walk-realisation__masthead,
  .project-detail-page .city-walk-realisation__detail-header {
    display: block;
  }

  .project-detail-page .city-walk-realisation__eyebrow {
    margin-bottom: 17px;
    font-size: 10px;
  }

  .project-detail-page .city-walk-realisation__title {
    max-width: 18ch;
    font-size: clamp(29px, 8vw, 34px);
    line-height: 1.12;
    letter-spacing: -.025em;
  }

  .project-detail-page .city-walk-realisation__introduction {
    max-width: 42ch;
    margin-top: 24px;
    padding-top: 0;
    font-size: 14px;
    line-height: 1.62;
  }

  .project-detail-page .city-walk-realisation__story {
    padding-block: 46px;
  }

  .project-detail-page .city-walk-realisation__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .page-mirdif-villa .city-walk-realisation__story--natural-landscape .city-walk-realisation__pair,
  .page-mirdif-villa .city-walk-realisation__story--portrait-pair .city-walk-realisation__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-detail-page .city-walk-realisation__media {
    gap: 10px;
  }

  .project-detail-page .city-walk-realisation__image-frame {
    aspect-ratio: 4 / 3;
  }

  .project-detail-page .city-walk-realisation__media + .city-walk-realisation__media .city-walk-realisation__image-frame {
    aspect-ratio: 4 / 3;
  }

  .project-detail-page .city-walk-realisation__story-caption {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.6;
  }

  .project-detail-page .city-walk-realisation__story-caption::before {
    display: block;
    margin: 0 0 9px;
  }

  .project-detail-page .city-walk-realisation__detail-gallery.residence-gallery {
    padding: 54px 0 0;
  }

  .project-detail-page .city-walk-realisation__detail-title {
    max-width: 18ch;
    font-size: clamp(27px, 7vw, 31px);
  }

  .project-detail-page .city-walk-realisation__detail-introduction {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
  }

  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__viewport {
    width: calc(100vw - 20px);
    margin-top: 24px;
  }

  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  .project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--landscape,
  .project-detail-page .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide--portrait {
    flex-basis: 86%;
  }

  .page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button {
    height: clamp(410px, 118vw, 540px);
    aspect-ratio: auto;
  }

  .page-mirdif-villa .city-walk-realisation__detail-gallery.is-enhanced .residence-gallery__slide .residence-gallery__image-button img {
    object-position: var(
      --residence-gallery-position-mobile,
      var(--residence-gallery-position-tablet, var(--residence-gallery-position-desktop, 50% 50%))
    );
  }

  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__details {
    gap: 16px;
  }
}

@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .page-city-walk-apartment [data-gallery-hide-mobile-tablet] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-detail-page .city-walk-realisation__image-frame img,
  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__track,
  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__progress-fill,
  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__arrow,
  .project-detail-page .city-walk-realisation__detail-gallery .residence-gallery__arrow svg {
    transition-duration: 1ms !important;
  }
}