@font-face { font-family: 'Benzin-Bold'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/Benzin-Bold.ttf') format('truetype'); }
body.sps-cases-page.custom-background { background: #fff; }
.sps-cases-page .footer { background: transparent; }
.sps-cases-page .header__brand, .sps-cases-page .header__nav,
.sps-cases-page .footer__brand, .sps-cases-page .footer__email { background: #f2f2f2; }
.case-layout { width: 100%; padding-inline: 60px; }
.case-page { background: #fff; }
.case-scroll { overflow: hidden; }
.case-track { display: flex; width: max-content; align-items: stretch; }
.case-panel { position: relative; flex: 0 0 auto; width: 100vw; min-height: 100svh; padding-block: 150px 100px; }
.case-title { margin: 0; max-width: 821px; font-size: 128px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.case-description { width: 541px; max-width: 100%; margin: 32px 0 0; font-size: 16px; font-weight: 400; line-height: 22px; }
.case-description p { margin: 0; }
ul.case-description { padding-left: 40px; }
.case-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.case-badges > span { display: inline-flex; align-items: center; gap: 10px; padding: 25px 20px; border-radius: 7px; background: #f2f2f2; font-size: 16px; font-weight: 600; line-height: 16px; text-transform: uppercase; transition: background-color .3s ease; }
.case-badges > span:hover { background: #ebebeb; }
.case-badges img { width: 24px; height: 24px; }
.case-actions { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; }
.case-actions a, .case-actions a:visited { display: inline-flex; align-items: center; gap: 15px; padding-inline: 20px; color: #ff4f0b; font-size: 16px; font-weight: 600; line-height: 16px; text-transform: uppercase; text-decoration: underline; }
.case-actions a:hover, .case-actions a:focus-visible { color: #1a1818; }
.case-actions img { width: 24px; height: 24px; }
.case-stages { padding-bottom: 40px; }
.case-stages > .case-title { max-width: 1254px; }
.case-notes { display: flex; justify-content: center; gap: 70px; margin-top: 20px; }
.case-note { display: flex; flex-direction: column; flex: 0 0 382.44px; min-height: 391.34px; padding: 17px 110px 25px 25px; background: url('../../images/cases/note.svg?v=2') no-repeat center / 100% 100%; transform: rotate(-5deg); }
.case-note:nth-child(2) { transform: rotate(5deg); }
.case-note:nth-child(3) { transform: rotate(-3deg); }
.case-note h3 { margin: 0; font-family: 'Benzin-Bold', sans-serif; font-size: 13.84px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.case-note > div { margin-top: 35px; }
.case-note p { margin: 0; font-size: 19.76px; line-height: 1; }
.case-note p:first-child { font-family: 'Benzin-Bold', sans-serif; font-weight: 400; margin-bottom: 14px; text-transform: uppercase; }
.case-note p:last-child { font-size: 19px; font-weight: 400; line-height: 19px; }
/* Reserve room for the last hover preview (the tallest cover is 892 × 500). */
.case-related { padding-block: 100px max(100px, calc(15.56vw + 40px)); }
.case-related h2 { margin: 0 0 35px; font-size: 20px; font-weight: 600; line-height: 20px; text-transform: uppercase; }
/* The source reveals a fixed-size, masked image through an expanding viewport. */
.case-related__item { position: relative; padding: 24px 0; border-bottom: 1px solid #d4d4d4; }
.case-related__item:last-child { border-bottom: 0; }
.case-related__link { position: relative; display: block; width: 100%; max-width: 100%; color: #1a1818; font-size: 5vw; font-weight: 600; line-height: 1; text-decoration: none; text-transform: uppercase; transition: color .4s ease; }
.case-related__link::after { content: ''; position: absolute; z-index: 4; inset: -24px 0; }
.case-related__link:visited { color: #1a1818; }
.case-related__link > span:first-child { position: relative; z-index: 1; }
.case-related__highlight { position: absolute; z-index: 2; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; background: linear-gradient(to left, #c2b587, #c09c94, #bd5bb5, #ba12dc, #af1fd7, #9242cc, #647aba, #16da9c, #7357d4, #7357d4, #d4e1ea, #e8eff4, #fff, #edf5998c, #07ef9300, #7b5ec400); transition: opacity .4s ease; }
.case-related__preview { position: absolute; z-index: 3; top: 24px; right: 0; width: 36.67vw; pointer-events: none; }
.case-related__reveal { display: flex; flex-direction: column; align-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .4s ease, opacity .4s ease; }
.case-related__reveal > img { display: block; flex-shrink: 0; width: 36.67vw; max-width: none; height: auto; mask: url('../../images/cases/related-mask.svg') center / cover no-repeat; -webkit-mask: url('../../images/cases/related-mask.svg') center / cover no-repeat; }
.case-related__link:hover, .case-related__link:focus-visible { color: #ff4f0b; }
.case-related__link:hover .case-related__highlight, .case-related__link:focus-visible .case-related__highlight { opacity: .4; }
.case-related__link:hover ~ .case-related__preview .case-related__reveal,
.case-related__link:focus-visible ~ .case-related__preview .case-related__reveal { width: 36.67vw; opacity: 1; }
.case-fallback { padding-block: 140px 80px; }
.cases-index { padding: 110px max(20px, 2.75vw) 150px; background: #fff; }
.cases-breadcrumbs { display: flex; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1; }
.cases-breadcrumbs a, .cases-breadcrumbs a:visited { color: #a2a2a2; text-decoration: none; }
.cases-breadcrumbs a:hover, .cases-breadcrumbs a:focus-visible { color: #ff4f0b; }
.cases-index > h1 { margin: 40px 0 60px; font-size: 40px; font-weight: 600; line-height: 1; }
.cases-index__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.case-preview:first-child .case-preview__image { width: 66.666667%; }
.case-preview { min-width: 0; }
.case-preview__image { display: block; overflow: hidden; border-radius: 7px; }
.case-preview__image img { display: block; width: 100%; height: auto; transition: transform .45s ease; }
.case-preview__image:hover img, .case-preview__image:focus-visible img { transform: scale(1.025); }
.case-preview h2 { margin: 20px 0 12px; font-size: 20px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.case-preview h2 a, .case-preview h2 a:visited { color: inherit; text-decoration: none; }
.case-preview h2 a:hover, .case-preview h2 a:focus-visible { color: #ff4f0b; }
.case-preview p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
@media (min-width: 1025px) {
  .case-scroll:not(.is-horizontal) .case-track { display: block; width: 100%; }
  .case-page > .case-related { padding-top: 48px; }
  .case-scroll.is-horizontal .case-panel:last-child { height: 100svh; min-height: 100svh; }
}
@media (max-width: 1400px) and (min-width: 1025px) {
  .case-note { flex-basis: 25vw; min-height: 26vw; padding-right: 5vw; }
  .case-notes { gap: 4vw; }
}
/* A pinned panel must fit the viewport: adapt height as well as width. */
@media (min-width: 1025px) and (max-height: 1079px) {
  .case-scroll.is-horizontal .case-panel { height: 100svh; min-height: 0; padding-block: max(125px, 14vh) 32px; }
  .case-scroll.is-horizontal .case-title { font-size: clamp(64px, 11.85vh, 128px); }
  .case-scroll.is-horizontal .case-description { margin-top: 24px; }
  .case-scroll.is-horizontal .case-stages { display: flex; flex-direction: column; padding-bottom: 50px; }
  .case-scroll.is-horizontal .case-stages > .case-title,
  .case-scroll.is-horizontal .case-stages > .case-description { flex-shrink: 0; }
  .case-scroll.is-horizontal .case-notes { flex: 1; min-height: 0; max-height: 391.34px; gap: 4vw; }
  .case-scroll.is-horizontal .case-note { flex-basis: min(382.44px, 35.4vh); height: 100%; min-height: 0; padding-right: min(110px, 10.2vh); }
  .case-scroll.is-horizontal .case-note > div { margin-top: 24px; }
}
@media (max-width: 1024px) {
  .case-layout { padding-inline: 20px; }
  .case-track { display: block; width: 100%; }
  .case-panel { width: 100vw; min-height: 0; padding-block: 80px 30px; }
  .case-title { font-size: 68px; line-height: 68px; }
  .case-notes { flex-wrap: wrap; gap: 30px; margin-top: 40px; }
  .case-note { flex-basis: 220px; min-height: 225px; padding: 20px; }
  .case-note p:first-child { font-family: 'Benzin-Bold', sans-serif; font-weight: 400; margin-bottom: 14px; }
  .case-related { padding-block: 70px; }
  .case-related__link { font-size: 48px; }
  .case-related__preview, .case-related__highlight { display: none; }
  .cases-index { padding-top: 100px; padding-bottom: 100px; }
  .cases-index__grid { grid-template-columns: minmax(0, 1fr); }
  .case-preview:first-child .case-preview__image { width: 100%; }
}
@media (max-width: 767px) {
  .case-layout { padding-inline: 15px; }
  .case-panel { margin-top: 40px; padding-block: 0 20px; }
  .case-title { font-size: 36px; line-height: 36px; }
  .case-description { width: 333px; margin-top: 32px; font-size: 14px; line-height: 18px; }
  .case-badges { align-items: flex-start; flex-direction: column; }
  .case-badges > span { padding: 20px; font-size: 16px; line-height: 16px; }
  .case-actions { flex-direction: column; gap: 20px; }
  .case-actions a { padding-inline: 0; font-size: 16px; }
  .case-note { flex-basis: 79.58vw; min-height: 81.5vw; }
  .case-note h3, .case-note p:first-child { font-size: 16px; line-height: 16px; }
  .case-note p:last-child { font-size: 14px; line-height: 18px; }
  .case-related { padding-block: 40px; }
  .case-related__item { padding-block: 20px; }
  .case-related__link::after { inset-block: -20px; }
  .case-related h2 { font-size: 16px; line-height: 16px; }
  .case-related__link { font-size: 28px; }
  .cases-index { padding: 95px 15px 60px; }
  .cases-breadcrumbs { font-size: 14px; }
  .cases-index > h1 { margin: 30px 0; font-size: 28px; }
  .cases-index__grid { gap: 40px; }
  .case-preview h2 { margin: 15px 0; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-related__link, .case-related__highlight, .case-related__reveal, .case-preview__image img { transition: none; }
}