/* Remaining Case Studies --------------------------------------------------
 * Scoped to the five new pages. Approved pages and their styles are not
 * changed by this file.
 */

body.case-remaining .case-scope,
body.case-remaining .case-showcase,
body.case-remaining .case-results {
  margin-top: 32px;
}

body.case-remaining .case-scope {
  min-height: 513px;
  padding: 95px 64px 40px;
}

body.case-sipes .case-scope,
body.case-venti .case-scope {
  min-height: 549px;
}

body.case-remaining .case-scope-card {
  flex: 0 0 310px;
}

body.case-time-square .case-scope-grid {
  grid-auto-columns: 310px;
}

body.case-middle-east-security .case-scope-grid {
  grid-auto-columns: 450px;
  justify-content: center;
}

body.case-middle-east-security .case-scope-card {
  flex-basis: 450px;
}

body.case-sipes .case-scope-card {
  height: 284px;
}

body.case-remaining .case-showcase {
  padding: 128px 80px 0;
}

body.case-lhh .case-showcase,
body.case-time-square .case-showcase {
  height: 1483px;
  min-height: 1483px;
}

body.case-middle-east-security .case-showcase,
body.case-sipes .case-showcase {
  height: 1507px;
  min-height: 1507px;
}

body.case-venti .case-showcase {
  height: 1454px;
  min-height: 1454px;
}

body.case-remaining .case-showcase-composite {
  position: static;
  display: block;
  width: min(1280px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  object-fit: fill;
}

body.case-lhh .case-showcase-composite,
body.case-time-square .case-showcase-composite {
  height: 1049px;
}

body.case-middle-east-security .case-showcase-composite,
body.case-sipes .case-showcase-composite,
body.case-venti .case-showcase-composite {
  height: 1104px;
}

body.case-remaining .case-video-showcase {
  position: relative;
  display: block;
  width: min(1280px, 100%);
  aspect-ratio: 1280 / 1104;
  margin: 0 auto;
}

body.case-remaining .case-video-showcase > img,
body.case-remaining .case-video-showcase > video {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
  border-radius: 16px;
}

body.case-sipes .sipes-showcase-collage .sipes-showcase-palette { left: 0; top: 0; width: 48.984375%; height: 58.152174%; }
body.case-sipes .sipes-showcase-collage .sipes-showcase-poppy { left: 51.015625%; top: 0; width: 48.984375%; height: 58.152174%; }
body.case-sipes .sipes-showcase-collage .sipes-showcase-logo { left: 0; top: 60.326087%; width: 100%; height: 39.673913%; }

body.case-venti .venti-showcase-collage .venti-showcase-left { left: 5.78125%; top: 0; width: 28.203125%; height: 58.152174%; }
body.case-venti .venti-showcase-collage .venti-showcase-middle { left: 35.859375%; top: 0; width: 28.203125%; height: 58.152174%; }
body.case-venti .venti-showcase-collage .venti-showcase-right { left: 65.9375%; top: 0; width: 28.203125%; height: 58.152174%; }
body.case-venti .venti-showcase-collage .venti-showcase-logo { left: 5.78125%; top: 60.326087%; width: 88.359375%; height: 31.793478%; }

body.case-lhh .case-results,
body.case-time-square .case-results {
  height: 476px;
  min-height: 476px;
}

body.case-middle-east-security .case-results,
body.case-sipes .case-results,
body.case-venti .case-results {
  height: 540px;
  min-height: 540px;
}

body.case-lhh .case-results-heading p { width: 388px; }
body.case-time-square .case-results-heading p { width: 350px; }
body.case-middle-east-security .case-results-heading p { width: 450px; }
body.case-sipes .case-results-heading p { width: 411px; }
body.case-venti .case-results-heading p { width: 520px; }

body.case-lhh .case-cta,
body.case-time-square .case-cta { margin: 32px 0 91px; }
body.case-middle-east-security .case-cta { margin: 32px 0 98px; }
body.case-sipes .case-cta { margin: 32px 0 62px; }
body.case-venti .case-cta { margin: 32px 0 115px; }

.mobile-only-label { display: none; }

@media (min-width: 768px) {
  body.case-venti .scope-management { order: 1; }
  body.case-venti .scope-reel { order: 2; }
  body.case-venti .scope-creative { order: 3; }
}

@media (min-width: 768px) and (max-width: 1099px) {
  body.case-remaining .case-scope,
  body.case-sipes .case-scope,
  body.case-venti .case-scope {
    min-height: 0;
  }

  body.case-remaining .case-scope-card,
  body.case-sipes .case-scope-card,
  body.case-middle-east-security .case-scope-card {
    height: 210px;
  }

  body.case-remaining .case-showcase {
    height: auto;
    min-height: 0;
    padding: 96px 40px 72px;
  }

  body.case-remaining .case-showcase-composite {
    width: 100%;
    height: auto;
  }

  body.case-remaining .case-results {
    height: auto;
    min-height: 0;
  }

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

@media (max-width: 767px) {
  body.case-remaining .case-showcase-desktop {
    display: none;
  }

  body.case-remaining .case-intro {
    height: 830px;
    min-height: 830px;
    padding: 150px 25px 47px;
  }

  body.case-remaining .case-intro-copy { min-height: 221px; }
  body.case-time-square .case-intro { padding-top: 143px; padding-bottom: 39px; }
  body.case-time-square .case-intro-copy { min-height: 236px; }

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

  body.case-remaining .case-scope {
    min-height: 0;
    padding: 0 19px;
  }

  body.case-lhh .case-scope { height: 349px; }
  body.case-time-square .case-scope { height: 504px; padding-top: 4px; padding-bottom: 3px; }
  body.case-middle-east-security .case-scope { height: 201px; }
  body.case-sipes .case-scope,
  body.case-venti .case-scope { height: 400px; padding-bottom: 13px; }

  body.case-remaining .case-scope-grid,
  body.case-time-square .case-scope-grid,
  body.case-middle-east-security .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  body.case-remaining .case-scope-card,
  body.case-middle-east-security .case-scope-card {
    width: auto;
    height: 132px;
    min-height: 0;
    flex-basis: auto;
  }

  body.case-sipes .case-scope-card,
  body.case-venti .case-scope-card {
    height: 151px;
  }

  body.case-sipes .case-scope-card:last-child,
  body.case-venti .case-scope-card:last-child {
    width: 188px;
    grid-column: 1 / -1;
    justify-self: center;
  }

  body.case-time-square .scope-digital-management { order: 5; }
  body.case-time-square .scope-brand-strategy { order: 6; }

  body.case-remaining .case-showcase {
    padding: 0;
  }

  body.case-lhh .case-showcase,
  body.case-middle-east-security .case-showcase { height: 429px; min-height: 429px; }
  body.case-time-square .case-showcase { height: 431px; min-height: 431px; }
  body.case-sipes .case-showcase { height: 568px; min-height: 568px; }
  body.case-venti .case-showcase { height: 1217px; min-height: 1217px; }

  body.case-remaining .case-showcase-mobile {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  body.case-remaining .case-showcase-mobile img,
  body.case-remaining .case-showcase-mobile video {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
  }

  body.case-lhh .case-showcase-mobile img,
  body.case-time-square .case-showcase-mobile img,
  body.case-middle-east-security .case-showcase-mobile img {
    margin-left: 25px;
  }

  body.case-sipes .case-showcase-mobile img { margin-left: 24px; }
  body.case-venti .case-showcase-mobile img { margin: 0 auto; }

  body.case-venti .venti-mobile-collage {
    position: relative;
    width: min(412px, calc(100% - 18px));
    aspect-ratio: 412 / 1124;
    margin: 0 auto;
  }

  body.case-venti .venti-mobile-collage > img,
  body.case-venti .venti-mobile-collage > video {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 16px;
  }

  body.case-venti .venti-mobile-left { left: 0; top: 0; width: 49.029126%; height: 32.384342%; }
  body.case-venti .venti-mobile-middle { left: 50.970874%; top: 0; width: 49.029126%; height: 32.384342%; }
  body.case-venti .venti-mobile-logo { left: 0; top: 33.096085%; width: 100%; height: 11.3879%; }
  body.case-venti .venti-mobile-bottom { left: 0; top: 45.19573%; width: 100%; height: 54.80427%; }

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

  body.case-remaining .case-showcase-mobile img {
    width: calc(100% - 50px);
    max-width: none;
    height: auto;
    margin: 0 auto;
  }

  body.case-remaining .case-showcase-track {
    --remaining-slide-width: min(365px, calc(100vw - 50px));
  }

  body.case-remaining .case-showcase-track figure {
    position: relative;
    flex: 0 0 var(--remaining-slide-width);
    width: var(--remaining-slide-width);
    height: auto;
  }

  body.case-remaining .case-showcase-track img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  body.case-remaining .case-desktop-crop img {
    position: absolute;
    inset: 0 auto auto 0;
    border-radius: 0;
  }

  body.case-lhh .lhh-slide-form { aspect-ratio: 434 / 741; }
  body.case-lhh .lhh-slide-form img { width: 294.930876%; }
  body.case-lhh .lhh-slide-services { aspect-ratio: 822 / 416; }
  body.case-lhh .lhh-slide-services img { width: 155.717762%; transform: translate(-35.78125%, 0); }
  body.case-lhh .lhh-slide-testimonials { aspect-ratio: 822 / 309; }
  body.case-lhh .lhh-slide-testimonials img { width: 155.717762%; transform: translate(-35.78125%, -41.182078%); }
  body.case-lhh .lhh-slide-contact { aspect-ratio: 571 / 284; }
  body.case-lhh .lhh-slide-contact img { width: 224.168126%; transform: translate(0, -72.926597%); }
  body.case-lhh .lhh-slide-video { aspect-ratio: 685 / 284; }
  body.case-lhh .lhh-slide-video img { width: 186.861314%; transform: translate(-46.484375%, -72.926597%); }

  body.case-middle-east-security .mes-slide-products { aspect-ratio: 365 / 522; }
  body.case-middle-east-security .mes-slide-products img { width: 350.684932%; transform: translate(0, -20.199275%); }
  body.case-middle-east-security .mes-slide-worker { aspect-ratio: 571 / 335; }
  body.case-middle-east-security .mes-slide-worker img { width: 224.168126%; transform: translate(0, -69.655797%); }
  body.case-middle-east-security .mes-slide-members { aspect-ratio: 685 / 335; }
  body.case-middle-east-security .mes-slide-members img { width: 186.861314%; transform: translate(-46.484375%, -69.655797%); }
  body.case-middle-east-security .mes-slide-landing { aspect-ratio: 365 / 200; }
  body.case-middle-east-security .mes-slide-landing img { width: 350.684932%; }
  body.case-middle-east-security .mes-slide-uniforms { aspect-ratio: 357 / 415; }
  body.case-middle-east-security .mes-slide-uniforms img { width: 358.543417%; transform: translate(-30.390625%, 0); }
  body.case-middle-east-security .mes-slide-services { aspect-ratio: 510 / 415; }
  body.case-middle-east-security .mes-slide-services img { width: 250.980392%; transform: translate(-60.15625%, 0); }
  body.case-middle-east-security .mes-slide-logo { aspect-ratio: 891 / 306; }
  body.case-middle-east-security .mes-slide-logo img { width: 143.658810%; transform: translate(-30.390625%, -39.764493%); }

  /* Middle East Security: each desktop asset is a mobile slide. Preserve the
     first crop and centre every other complete asset in its same-sized frame. */
  body.case-middle-east-security .case-showcase-track figure:not(:first-child) {
    display: grid;
    place-items: center;
    aspect-ratio: 365 / 522;
    height: auto;
  }

  body.case-middle-east-security .case-showcase-track figure:not(:first-child) .case-desktop-crop {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
  }

  body.case-middle-east-security .mes-slide-worker .case-desktop-crop { aspect-ratio: 571 / 335; }
  body.case-middle-east-security .mes-slide-members .case-desktop-crop { aspect-ratio: 685 / 335; }
  body.case-middle-east-security .mes-slide-landing .case-desktop-crop { aspect-ratio: 365 / 200; }
  body.case-middle-east-security .mes-slide-uniforms .case-desktop-crop { aspect-ratio: 357 / 415; }
  body.case-middle-east-security .mes-slide-services .case-desktop-crop { aspect-ratio: 510 / 415; }
  body.case-middle-east-security .mes-slide-logo .case-desktop-crop { aspect-ratio: 891 / 306; }

  body.case-middle-east-security .mes-slide-worker { background: #183a46; }
  body.case-middle-east-security .mes-slide-members,
  body.case-middle-east-security .mes-slide-landing,
  body.case-middle-east-security .mes-slide-logo { background: #f4f6f6; }
  body.case-middle-east-security .mes-slide-uniforms { background: #18262c; }
  body.case-middle-east-security .mes-slide-services { background: #06191c; }

  body.case-sipes .case-showcase-track {
    --sipes-slide-width: min(365px, calc(100vw - 50px));
  }

  body.case-sipes .case-showcase-track figure {
    flex: 0 0 var(--sipes-slide-width);
    width: var(--sipes-slide-width);
    height: auto;
  }

  body.case-sipes .case-showcase-track img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  body.case-sipes .sipes-showcase-top { aspect-ratio: 406 / 282; }
  body.case-sipes .sipes-showcase-logo { aspect-ratio: 406 / 185; }
  body.case-sipes .sipes-showcase-logo img { transform: translateY(-61.052632%); }

  /* Sipes: make the three desktop artworks individual mobile slides, all in
     the first artwork's frame, without trimming the individual artwork. */
  body.case-sipes .case-showcase-track figure {
    aspect-ratio: 627 / 642;
    height: auto;
  }

  body.case-sipes .case-showcase-track figure:not(:first-child) {
    display: grid;
    place-items: center;
  }

  body.case-sipes .case-showcase-track figure:not(:first-child) .case-desktop-crop {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
  }

  body.case-sipes .sipes-slide-palette img { width: 204.146731%; }
  body.case-sipes .sipes-slide-poppy .case-desktop-crop { aspect-ratio: 628 / 642; }
  body.case-sipes .sipes-slide-poppy img { width: 203.821656%; transform: translate(-50.9375%, 0); }
  body.case-sipes .sipes-slide-logo .case-desktop-crop { aspect-ratio: 1280 / 438; }
  body.case-sipes .sipes-slide-logo img { width: 100%; transform: translateY(-60.326087%); }

  body.case-sipes .sipes-slide-poppy { background: #a77031; }
  body.case-sipes .sipes-slide-logo { background: #fff; }

  body.case-remaining .case-results {
    padding-bottom: 39px;
  }

  body.case-lhh .case-results,
  body.case-middle-east-security .case-results,
  body.case-sipes .case-results { height: 614px; min-height: 614px; }
  body.case-time-square .case-results { height: 598px; min-height: 598px; }
  body.case-venti .case-results { height: 630px; min-height: 630px; }

  body.case-remaining .case-results-heading p { width: min(362px, 100%); }
  body.case-remaining .case-cta { margin: 0; }

  body.case-lhh .site-footer {
    flex-basis: 705px;
    height: 705px;
    min-height: 705px;
  }

  body.case-time-square .site-footer {
    flex-basis: 733px;
    height: 733px;
    min-height: 733px;
  }

  body.case-sipes .site-footer {
    flex-basis: 684px;
    height: 684px;
    min-height: 684px;
  }

  .desktop-only-label { display: none; }
  .mobile-only-label { display: inline; }
}

@media (max-width: 389px) {
  body.case-remaining .case-intro { padding-inline: 20px; }
  body.case-remaining .case-scope { padding-inline: 16px; }
  body.case-sipes .case-scope-card:last-child,
  body.case-venti .case-scope-card:last-child { width: calc(50% - 8px); }

  body.case-lhh .case-showcase-mobile img,
  body.case-time-square .case-showcase-mobile img,
  body.case-middle-east-security .case-showcase-mobile img { margin-left: 20px; }
  body.case-sipes .case-showcase-mobile img { margin-left: 20px; }
  body.case-venti .case-showcase-mobile img { width: calc(100% - 18px); height: auto; }

  body.case-remaining .case-showcase-mobile img {
    width: calc(100% - 40px);
    margin: 0 auto;
  }

  body.case-remaining .case-showcase-track {
    --remaining-slide-width: calc(100vw - 40px);
  }

  body.case-remaining .case-showcase-track img {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.case-sipes .case-showcase-track {
    --sipes-slide-width: calc(100vw - 40px);
  }

  body.case-sipes .case-showcase-track img {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* Exact 430px showcase compositions from the mobile Figma frames. */
@media (max-width: 767px) {
  body.case-remaining .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-remaining .case-showcase-viewport::-webkit-scrollbar { display: none; }
  body.case-remaining .case-showcase-viewport:focus-visible { outline: 2px solid #e6da78; outline-offset: 2px; }
  body.case-remaining .case-showcase-viewport span { position: absolute; display: block; overflow: hidden; border-radius: 16px; }
  body.case-remaining .case-showcase-viewport img,
  body.case-remaining .case-showcase-viewport video {
    position: absolute;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: inherit;
  }
  body.case-remaining .case-showcase-viewport .tile-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  body.case-lhh .case-showcase-viewport,
  body.case-lhh .lhh-mobile-rail { height: 336px; }
  body.case-lhh .lhh-mobile-rail { position: relative; width: 946px; }
  body.case-lhh .lhh-mobile-form { left: 0; top: 0; width: 197px; height: 336px; }
  body.case-lhh .lhh-mobile-services { left: 204px; top: 0; width: 374px; height: 189px; }
  body.case-lhh .lhh-mobile-testimonials { left: 204px; top: 196px; width: 374px; height: 140px; }
  body.case-lhh .lhh-mobile-contact { left: 585px; top: 0; width: 361px; height: 189px; }
  body.case-lhh .lhh-mobile-video { left: 585px; top: 200px; width: 361px; height: 136px; }
  body.case-lhh .lhh-mobile-form img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.case-lhh .lhh-mobile-services img:not(.tile-bg) { left: .03%; top: 0; width: 99.94%; height: 100%; }
  body.case-lhh .lhh-mobile-testimonials img { left: 0; top: -.02%; width: 100%; height: 148.35%; }
  body.case-lhh .lhh-mobile-contact img { left: .01%; top: .05%; width: 106.3%; height: 113.5%; }
  body.case-lhh .lhh-mobile-video img { left: 0; top: -.51%; width: 100%; height: 145.02%; }

  body.case-time-square .case-showcase-viewport,
  body.case-time-square .time-square-mobile-rail { height: 338px; }
  body.case-time-square .time-square-mobile-rail { position: relative; width: 495px; }
  body.case-time-square .time-square-mobile-billboard { left: 0; top: 0; width: 175px; height: 234px; }
  body.case-time-square .time-square-mobile-man { left: 185px; top: 0; width: 151px; height: 155px; }
  body.case-time-square .time-square-mobile-family { left: 344px; top: 0; width: 151px; height: 155px; }
  body.case-time-square .time-square-mobile-identity { left: 185px; top: 163px; width: 309px; height: 175px; }
  body.case-time-square .time-square-mobile-mark { left: 0; top: 242px; width: 175px; height: 96px; }
  body.case-time-square .time-square-mobile-rail img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.case-time-square .time-square-mobile-mark img { left: -51.71%; top: -133.33%; width: 203.43%; height: 370.83%; }

  body.case-middle-east-security .case-showcase-viewport,
  body.case-middle-east-security .mes-mobile-rail { height: 336px; }
  body.case-middle-east-security .mes-mobile-rail { position: relative; width: 1297px; }
  body.case-middle-east-security .mes-mobile-products { left: 0; top: 0; width: 233px; height: 336px; }
  body.case-middle-east-security .mes-mobile-worker { left: 243px; top: 0; width: 316px; height: 175px; }
  body.case-middle-east-security .mes-mobile-members { left: 243px; top: 183px; width: 316px; height: 153px; }
  body.case-middle-east-security .mes-mobile-uniforms { left: 567px; top: 0; width: 233px; height: 336px; }
  body.case-middle-east-security .mes-mobile-services { left: 808px; top: 0; width: 248px; height: 202px; }
  body.case-middle-east-security .mes-mobile-logo { left: 808px; top: 210px; width: 248px; height: 126px; }
  body.case-middle-east-security .mes-mobile-landing { left: 1064px; top: 0; width: 233px; height: 332px; }
  body.case-middle-east-security .mes-mobile-products img { left: .27%; top: -19.78%; width: 100%; height: 125.28%; }
  body.case-middle-east-security .mes-mobile-worker img { left: -38.37%; top: -63.95%; width: 176.74%; height: 247.32%; }
  body.case-middle-east-security .mes-mobile-members img { left: 0; top: -.11%; width: 100%; height: 165.93%; }
  body.case-middle-east-security .mes-mobile-uniforms img { left: -143.84%; top: -53.84%; width: 287.3%; height: 153.98%; }
  body.case-middle-east-security .mes-mobile-services img { left: .09%; top: .05%; width: 100%; height: 111.3%; }
  body.case-middle-east-security .mes-mobile-logo img { left: .04%; top: .33%; width: 100%; height: 134.73%; }
  body.case-middle-east-security .mes-mobile-landing img { left: .08%; top: -8.57%; width: 100%; height: 161.53%; }

  body.case-sipes .case-showcase-viewport,
  body.case-sipes .sipes-mobile-rail { height: 475px; }
  body.case-sipes .sipes-mobile-rail { position: relative; width: 572px; }
  body.case-sipes .sipes-mobile-palette { left: 0; top: 0; width: 282px; height: 282px; }
  body.case-sipes .sipes-mobile-poppy { left: 290px; top: 0; width: 282px; height: 282px; }
  body.case-sipes .sipes-mobile-logo { left: 0; top: 290px; width: 572px; height: 185px; }
  body.case-sipes .sipes-mobile-palette video,
  body.case-sipes .sipes-mobile-poppy video,
  body.case-sipes .sipes-mobile-logo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  body.case-venti .venti-mobile-collage > .venti-mobile-left { width: 49.029126%; height: 32.384342%; }
  body.case-venti .venti-mobile-collage > .venti-mobile-middle { width: 49.029126%; height: 32.384342%; }
  body.case-venti .venti-mobile-collage > .venti-mobile-logo { width: 100%; height: 11.3879%; margin: 0; }
  body.case-venti .venti-mobile-collage > .venti-mobile-bottom { width: 100%; height: 54.80427%; }
}