/* Additional case-study variants -----------------------------------------
 * Built from the approved FedEx template. All overrides are scoped to
 * .case-template-variant so the approved FedEx page and shared pages remain
 * byte-for-byte unchanged.
 */

body.case-template-variant .case-scope-title {
  width: min(1312px, 100%);
  height: 90px;
  overflow: visible;
  color: #fff;
  font-size: 60px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -3px;
  text-align: right;
  text-transform: uppercase;
}

body.case-template-variant .case-scope-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 310px;
  justify-content: start;
  overflow: visible;
}

body.case-template-variant .case-showcase-collage {
  position: relative;
  width: min(1280px, 100%);
  margin: 0 auto;
}

body.case-template-variant .case-showcase-collage img,
body.case-template-variant .case-showcase-collage video {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

body.case-template-variant .case-showcase-mobile {
  display: none;
}

body.case-template-variant .fallback-case-icon {
  filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(5253%) hue-rotate(358deg) brightness(74%) contrast(112%);
}

/* Enterprise Rent-A-Car Egypt */
body.case-enterprise .case-scope,
body.case-rafa .case-scope,
body.case-lmd .case-scope,
body.case-park-st .case-scope {
  min-height: 513px;
  padding: 95px 64px 40px;
}

body.case-enterprise .case-showcase { min-height: 1110px; padding: 128px 32px 140px; }
body.case-enterprise .case-enterprise-collage { height: 672px; }
body.case-enterprise .case-enterprise-collage .asset-1 { left: 0; top: 0; width: 350px; height: 376px; }
body.case-enterprise .case-enterprise-collage .asset-2 { left: 0; top: 400px; width: 807px; height: 272px; }
body.case-enterprise .case-enterprise-collage .asset-3 { left: 831px; top: 0; width: 436px; height: 672px; }
body.case-enterprise .case-enterprise-collage .asset-4 { left: 374px; top: 0; width: 433px; height: 376px; }
body.case-enterprise .case-enterprise-collage video.asset-4,
body.case-enterprise .case-enterprise-collage .asset-4 > .case-video-media { object-fit: fill; }
body.case-enterprise .case-results { min-height: 490px; }
body.case-enterprise .case-scope { margin-top: 32px; }
body.case-enterprise .case-showcase,
body.case-enterprise .case-results { margin-top: 32px; }
body.case-enterprise .case-cta { margin: 32px 0 131px; }

/* Rafa Nadal Academy Kuwait */
body.case-rafa .case-scope { margin-top: -19px; }
body.case-rafa .case-showcase { min-height: 1146px; margin-top: 60px; padding: 128px 32px 108px; }
body.case-rafa .case-rafa-collage { height: 740px; }
body.case-rafa .case-rafa-collage .asset-1 { left: 0; top: 0; width: 365px; height: 200px; }
body.case-rafa .case-rafa-collage .asset-2 { left: 0; top: 224px; width: 365px; height: 515px; }
body.case-rafa .case-rafa-collage .asset-3 { left: 389px; top: 0; width: 416px; height: 740px; }
body.case-rafa .case-rafa-collage video.asset-3 {
  position: absolute;
  display: block;
  max-width: none;
  border-radius: 16px;
  object-fit: cover;
  opacity: 0.8;
}
body.case-rafa .rafa-showcase-sound {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #e6da78;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
body.case-rafa .rafa-showcase-sound:hover,
body.case-rafa .rafa-showcase-sound:focus-visible {
  border-color: #e6da78;
  background: rgba(0, 0, 0, 0.82);
}
body.case-rafa .rafa-showcase-sound:focus-visible {
  outline: 2px solid #e6da78;
  outline-offset: 3px;
}
body.case-rafa .rafa-showcase-sound svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}
body.case-rafa .rafa-sound-speaker { fill: currentColor; }
body.case-rafa .rafa-sound-waves,
body.case-rafa .rafa-sound-slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
body.case-rafa .rafa-sound-waves { display: none; }
body.case-rafa .rafa-showcase-sound[aria-pressed="true"] .rafa-sound-waves { display: block; }
body.case-rafa .rafa-showcase-sound[aria-pressed="true"] .rafa-sound-slash { display: none; }
body.case-rafa .rafa-showcase-sound-desktop { left: 745px; top: 680px; }
body.case-rafa .case-rafa-collage .asset-4 { left: 829px; top: 0; width: 434px; height: 739px; }
body.case-rafa .case-results { min-height: 476px; margin-top: 96px; }
body.case-rafa .case-cta { margin: 109px 0; }

/* LMD */
body.case-lmd .case-scope,
body.case-lmd .case-showcase,
body.case-lmd .case-results { margin-top: 32px; }
body.case-lmd .case-showcase { min-height: 1507px; padding: 128px 32px 140px; }
body.case-lmd .case-lmd-collage { height: 1069px; }
body.case-lmd .case-lmd-collage .asset-1 { left: 0; top: 223px; width: 365px; height: 522px; }
body.case-lmd .case-lmd-collage .asset-2 { left: 0; top: 0; width: 365px; height: 200px; }
body.case-lmd .case-lmd-collage .asset-3 { left: 389px; top: 0; width: 357px; height: 415px; }
body.case-lmd .case-lmd-collage .asset-4 { left: 770px; top: 1px; width: 510px; height: 414px; }
body.case-lmd .case-lmd-collage .asset-5 { left: 389px; top: 439px; width: 891px; height: 306px; }
body.case-lmd .case-lmd-collage .asset-6 { left: 0; top: 769px; width: 571px; height: 300px; }
body.case-lmd .case-lmd-collage .asset-7 { left: 595px; top: 769px; width: 685px; height: 300px; }
body.case-lmd .case-results { min-height: 540px; }
body.case-lmd .case-cta { margin: 32px 0 85px; }

/* Park St. */
body.case-park-st .case-scope,
body.case-park-st .case-showcase,
body.case-park-st .case-results { margin-top: 32px; }
body.case-park-st .case-showcase { min-height: 1183px; padding: 128px 32px 131px; }
body.case-park-st .case-park-collage { height: 754px; }
body.case-park-st .case-park-collage .asset-1 { left: 0; top: 0; width: 308px; height: 457px; }
body.case-park-st .case-park-collage .asset-2 { left: 0; top: 482px; width: 807px; height: 272px; }
body.case-park-st .case-park-collage .asset-3 { left: 831px; top: 0; width: 436px; height: 754px; }
body.case-park-st .case-park-collage .asset-4 { left: 331px; top: 0; width: 476px; height: 458px; }
body.case-park-st .case-results { min-height: 476px; }
body.case-park-st .case-cta { margin: 32px 0 125px; }

@media (min-width: 768px) and (max-width: 1099px) {
  body.case-template-variant .case-scope {
    min-height: 0;
    margin-top: 0;
    padding: 72px 40px 88px;
  }

  body.case-template-variant .case-scope-title {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 40px;
    clip: auto;
    color: #fff;
    font-size: 46px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  body.case-template-variant .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  body.case-template-variant .case-showcase,
  body.case-template-variant .case-results {
    min-height: 0;
    margin-top: 0;
  }

  body.case-template-variant .case-cta { margin: 72px 0; }

  body.case-template-variant .case-showcase-collage {
    transform-origin: top left;
    width: 1280px;
  }

  body.case-enterprise .case-enterprise-collage,
  body.case-rafa .case-rafa-collage,
  body.case-lmd .case-lmd-collage,
  body.case-park-st .case-park-collage {
    --collage-scale: calc((100vw - 80px) / 1280);
    transform: scale(var(--collage-scale));
  }

  body.case-enterprise .case-showcase { padding-bottom: 72px; }
  body.case-enterprise .case-enterprise-collage { height: calc((100vw - 80px) * 672 / 1280); }
  body.case-rafa .case-showcase { padding-bottom: 72px; }
  body.case-rafa .case-rafa-collage { height: calc((100vw - 80px) * 740 / 1280); }
  body.case-lmd .case-showcase { padding-bottom: 72px; }
  body.case-lmd .case-lmd-collage { height: calc((100vw - 80px) * 1069 / 1280); }
  body.case-park-st .case-showcase { padding-bottom: 72px; }
  body.case-park-st .case-park-collage { height: calc((100vw - 80px) * 754 / 1280); }
}

@media (min-width: 768px) {
  body.case-enterprise .case-results-heading p { width: 351px; }
  body.case-lmd .case-results-heading p { width: 388px; }
  body.case-park-st .case-results-heading p { width: 311px; }
  body.case-lmd .result-positioning { order: 1; }
  body.case-lmd .result-awareness { order: 2; }
  body.case-lmd .result-luxury { order: 3; }
}

@media (max-width: 767px) {
  body.case-template-variant .case-intro {
    height: 830px;
    padding: 150px 25px 47px;
  }

  body.case-template-variant .case-intro-copy { min-height: 221px; }

  body.case-template-variant .case-scope,
  body.case-template-variant .case-showcase,
  body.case-template-variant .case-results {
    margin-top: 0;
  }

  body.case-template-variant .case-scope {
    height: 382px;
    min-height: 382px;
    padding: 16px 19px 17px;
  }

  body.case-template-variant .case-scope-title {
    width: auto;
    height: 53px;
    margin: 0 auto 16px;
    color: #fff;
    font-size: clamp(30px, 8.372vw, 36px);
    line-height: 53px;
    letter-spacing: -2.4px;
    text-align: center;
  }

  body.case-template-variant .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  body.case-template-variant .case-showcase-desktop { display: none; }
  body.case-template-variant .case-showcase-mobile { display: block; }
  body.case-template-variant .case-showcase-track figure:first-child img { object-fit: contain; }

  body.case-enterprise .case-showcase,
  body.case-park-st .case-showcase { height: 418px; min-height: 418px; padding: 0; }
  body.case-lmd .case-showcase { height: 429px; min-height: 429px; padding: 0; }

  body.case-enterprise .case-showcase-track figure,
  body.case-park-st .case-showcase-track figure { height: 325px; }
  body.case-lmd .case-showcase-track figure { height: 336px; }

  body.case-enterprise .case-results { height: 630px; min-height: 630px; padding-bottom: 39px; }
  body.case-park-st .case-results { height: 598px; min-height: 598px; padding-bottom: 39px; }
  body.case-lmd .case-results { height: 614px; min-height: 614px; padding-bottom: 39px; }

  body.case-template-variant .case-cta { margin: 0; }

  body.case-rafa .case-intro {
    height: 782px;
    padding: 113px 25px 24px;
  }

  body.case-rafa .case-intro-copy { min-height: 233px; }
  body.case-rafa .case-scope { height: 504px; min-height: 504px; padding-bottom: 15px; }
  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card { height: 124px; }

  body.case-lmd .case-scope { height: 504px; min-height: 504px; padding-bottom: 15px; }

  body.case-rafa .case-showcase {
    height: 424px;
    min-height: 424px;
    padding: 0;
  }

  body.case-rafa .case-showcase-heading { margin-bottom: 16px; }

  body.case-rafa .case-results { height: 597px; min-height: 597px; padding-bottom: 39px; }
  body.case-rafa .case-result-card {
    grid-template-columns: 30px 125px minmax(0, 1fr);
    gap: 16px;
    padding-inline: 32px 24px;
  }

  body.case-template-variant .case-showcase {
    height: auto;
    min-height: 0;
  }

  body.case-template-variant .case-showcase-track figure:first-child {
    height: auto;
  }

  /* Rafa mobile: Figma uses a two-card slider followed by a full-width video. */
  body.case-rafa .case-showcase-track .rafa-showcase-primary {
    flex: 0 0 min(365px, calc(100vw - 50px));
    width: min(365px, calc(100vw - 50px));
    height: auto;
    aspect-ratio: 365 / 398;
    display: flex;
    flex-direction: column;
    gap: clamp(11px, 3.023vw, 13px);
    overflow: visible;
    border-radius: 0;
  }

  body.case-rafa .rafa-showcase-primary > span {
    position: relative;
    width: 100%;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: 16px;
  }

  body.case-rafa .rafa-showcase-athlete { flex: 228 1 0; }
  body.case-rafa .rafa-showcase-logo { flex: 157 1 0; }

  body.case-rafa .rafa-showcase-primary img {
    position: absolute;
    display: block;
    max-width: none;
  }

  body.case-rafa .rafa-showcase-athlete img {
    top: 0.02%;
    left: 0.26%;
    width: 100%;
    height: 106.54%;
  }

  body.case-rafa .rafa-showcase-logo img {
    top: -156.59%;
    left: 0.26%;
    width: 100%;
    height: 413.31%;
  }

  body.case-rafa .case-showcase-track .rafa-showcase-event {
    position: relative;
    flex: 0 0 329px;
    width: 329px;
    height: auto;
    aspect-ratio: 329 / 398;
    background: transparent;
  }

  body.case-rafa .rafa-showcase-event img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  body.case-rafa .rafa-showcase-video {
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 778;
    display: block;
    margin-top: 64px;
    object-fit: cover;
    opacity: 0.8;
  }

  body.case-rafa .case-showcase-mobile { position: relative; }
  body.case-rafa .rafa-showcase-sound-mobile { right: 16px; bottom: 16px; }

  /* Leave Enterprise's first slide untouched; size the remaining slides to it. */
  body.case-enterprise .case-showcase-track figure:not(:first-child) {
    flex: 0 0 min(365px, calc(100vw - 50px));
    width: min(365px, calc(100vw - 50px));
    aspect-ratio: 350 / 376;
    height: auto;
  }

  body.case-enterprise .case-showcase-track figure:not(:first-child) img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
  }

  body.case-enterprise .enterprise-showcase-vehicle { background: #0b1128; }
  body.case-enterprise .enterprise-showcase-partnership { background: #83654c; }
  body.case-enterprise .enterprise-showcase-logo { background: #100b0d; }

  /* Leave LMD's first slide untouched; fit every following export in its frame. */
  body.case-lmd .case-showcase-track figure:not(:first-child) {
    flex: 0 0 min(365px, calc(100vw - 50px));
    width: min(365px, calc(100vw - 50px));
    aspect-ratio: 357 / 415;
    height: auto;
  }

  body.case-lmd .case-showcase-track figure:not(:first-child) img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
  }

  body.case-lmd .case-showcase-track figure:nth-child(2),
  body.case-lmd .case-showcase-track figure:nth-child(4),
  body.case-lmd .case-showcase-track figure:nth-child(5) { background: #f5f6f8; }

  body.case-lmd .case-showcase-track figure:nth-child(3) {
    background: linear-gradient(180deg, #0d2530 0 33%, #f7f7f7 33% 100%);
  }

  /* Keep Park St.'s first mobile slide unchanged; fit the remaining exports
     inside that same frame so no campaign artwork is cropped. */
  body.case-park-st .case-showcase-track figure:not(:first-child) {
    flex: 0 0 min(365px, calc(100vw - 50px));
    width: min(365px, calc(100vw - 50px));
    aspect-ratio: 308 / 457;
    height: auto;
  }

  body.case-park-st .case-showcase-track figure:not(:first-child) img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
  }

  body.case-park-st .case-showcase-track figure:nth-child(2),
  body.case-park-st .case-showcase-track figure:nth-child(3) { background: #f3f4f5; }

  body.case-park-st .case-showcase-track figure:nth-child(4) { background: #301b16; }
}

@media (max-width: 389px) {
  body.case-template-variant .case-intro { padding-inline: 20px; }
  body.case-template-variant .case-scope { padding-inline: 16px; }
  body.case-template-variant .case-scope-card { padding: 20px; }
}

/* Figma 430px Project Showcase rails ------------------------------------ */
@media (max-width: 767px) {
  body.case-template-variant .case-showcase-viewport {
    width: min(380px, calc(100vw - 40px));
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  body.case-template-variant .case-showcase-viewport::-webkit-scrollbar { display: none; }
  body.case-template-variant .case-showcase-viewport:focus-visible { outline: 2px solid #e6da78; outline-offset: 2px; }
  body.case-template-variant .case-showcase-viewport span { position: absolute; display: block; overflow: hidden; }
  body.case-template-variant .case-showcase-viewport img,
  body.case-template-variant .case-showcase-viewport video { position: absolute; display: block; max-width: none; margin: 0; border-radius: inherit; }
  body.case-template-variant .case-showcase-viewport .tile-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  body.case-lmd .case-showcase-viewport,
  body.case-lmd .lmd-mobile-rail { height: 336px; }
  body.case-lmd .lmd-mobile-rail { position: relative; width: 823px; }
  body.case-lmd .lmd-mobile-column { position: absolute; top: 0; display: flex; flex-direction: column; gap: 8px; height: 336px; }
  body.case-lmd .lmd-mobile-column span { position: relative; width: 100%; border-radius: 8px; }
  body.case-lmd .lmd-mobile-column-a { left: 0; width: 212px; }
  body.case-lmd .lmd-mobile-column-a span:first-child { height: 119px; }
  body.case-lmd .lmd-mobile-column-a span:last-child { height: 209px; }
  body.case-lmd .lmd-mobile-column-a span:first-child img { left: -.05%; top: -21.96%; width: 100%; height: 122.22%; }
  body.case-lmd .lmd-mobile-column-a span:last-child img { left: 0; top: -.19%; width: 100%; height: 276.41%; }
  body.case-lmd .lmd-mobile-tile { top: 0; height: 336px; border-radius: 8px; }
  body.case-lmd .lmd-mobile-tile-b { left: 220px; width: 185px; }
  body.case-lmd .lmd-mobile-tile-b img:not(.tile-bg) { left: .32%; top: .02%; width: 100%; height: 127.1%; }
  body.case-lmd .lmd-mobile-column-c { left: 413px; width: 217px; }
  body.case-lmd .lmd-mobile-column-c span:nth-child(1) { height: 114px; }
  body.case-lmd .lmd-mobile-column-c span:nth-child(2) { height: 85px; }
  body.case-lmd .lmd-mobile-column-c span:nth-child(3) { height: 121px; }
  body.case-lmd .lmd-mobile-column-c img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.case-lmd .lmd-mobile-tile-d { left: 638px; width: 185px; }
  body.case-lmd .lmd-mobile-tile-d img:not(.tile-bg) { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  body.case-park-st .case-showcase-viewport,
  body.case-park-st .park-mobile-rail,
  body.case-enterprise .case-showcase-viewport,
  body.case-enterprise .enterprise-mobile-rail { height: 325px; }
  body.case-park-st .park-mobile-rail { position: relative; width: 542px; }
  body.case-park-st .park-mobile-rail span,
  body.case-enterprise .enterprise-mobile-rail span { border-radius: 16px; }
  body.case-park-st .park-mobile-social { left: 0; top: 0; width: 133px; height: 197px; }
  body.case-park-st .park-mobile-social img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.case-park-st .park-mobile-brand { left: 0; top: 205px; width: 346px; height: 120px; }
  body.case-park-st .park-mobile-brand img { left: 0; top: -197.2%; width: 100%; height: 297.24%; }
  body.case-park-st .park-mobile-development { left: 141px; top: 0; width: 205px; height: 197px; }
  body.case-park-st .park-mobile-development img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.case-park-st .park-mobile-video { left: 354px; top: 0; width: 188px; height: 325px; }
  body.case-park-st .park-mobile-video img:not(.tile-bg) { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  body.case-enterprise .enterprise-mobile-rail { position: relative; width: 562px; }
  body.case-enterprise .enterprise-mobile-primary { left: 0; top: 0; width: 157px; height: 183px; }
  body.case-enterprise .enterprise-mobile-logo { left: 0; top: 191px; width: 359px; height: 131px; }
  body.case-enterprise .enterprise-mobile-vehicle { left: 165px; top: 0; width: 194px; height: 183px; }
  body.case-enterprise .enterprise-mobile-partnership { left: 367px; top: 0; width: 195px; height: 322px; }
  body.case-enterprise .enterprise-mobile-rail img,
  body.case-enterprise .enterprise-mobile-rail video { inset: 0; width: 100%; height: 100%; object-fit: cover; }
}