.machno-cases { --cases-count-top: 11%; --cases-count-size: clamp(22px, 2.5vw, 45px); position: relative; background: #1C1C1C; color: #f1f0ef; font-family: "Unbounded", Arial, sans-serif; outline-offset: -4px; }
.machno-cases__stage { position: relative; }
.machno-cases__heading { position: absolute; z-index: 4; top: 9%; right: 5%; margin: 0; font: 300 clamp(42px, 5.6vw, 105px)/1 "Unbounded", Arial, sans-serif; color: inherit; }
.machno-cases__counter { position: absolute; top: var(--cases-count-top); left: 5%; z-index: 4; font-size: var(--cases-count-size); font-weight: 300; line-height: 1; white-space: nowrap; }
.machno-cases__counter-space { visibility: hidden; }
.machno-case { position: relative; height: max(100svh, 720px); }
.machno-case__copy { position: absolute; margin: 0; color: inherit; }
.machno-case__number { top: var(--cases-count-top); left: calc(5% + .85em); font-size: var(--cases-count-size); font-weight: 300; line-height: 1; }
.machno-case__subtitle { top: 34%; left: 5%; width: 18%; font-size: clamp(11px, 1vw, 20px); line-height: 1.5; font-weight: 500; }
.machno-case__description { top: 47%; left: 5%; width: 17%; font-size: 25px; line-height: 1.5; font-weight: 400; }
.machno-case__area { top: 28%; left: 26%; font-size: 20px; font-weight: 500; }
.machno-case__location { top: 28%; right: 5%; font-size: 20px; font-weight: 300; text-align: right; }
.machno-case__media { position: absolute; top: 34%; left: 26%; right: 0; bottom: 0; overflow: hidden; background: #252820; }
.machno-case__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.machno-cases .machno-case__playback { position: absolute; left: auto; top: auto; right: 22px; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / .7); border-radius: 50%; background: rgb(0 0 0 / .3); color: #fff; pointer-events: auto; }
.machno-cases .machno-case__playback[hidden], .machno-case__pause-icon { display: none; }
.machno-case.is-playing .machno-case__pause-icon { display: inline; }
.machno-case.is-playing .machno-case__play-icon { display: none; }
.machno-case__error, .machno-case__watch { position: absolute; left: 20px; bottom: 20px; color: #fff; font-size: 12px; }
.machno-case__link, .machno-cases__current { position: absolute; bottom: 4%; left: 17%; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #f1f0ef; letter-spacing: 3.5px; }
.machno-cases__current { display: none; z-index: 4; }
.machno-cases a:hover { color: #fff; }
.machno-cases__arrow { position: absolute; left: 6%; bottom: 5%; width: 4vw; height: 4vw; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; transform: rotate(45deg) skew(10deg, 10deg); pointer-events: none; }
.machno-cases.is-animated .machno-cases__stage { height: 100svh; }
.machno-cases.is-animated .machno-case { position: absolute; inset: 0; height: 100%; pointer-events: none; }
.machno-cases.is-animated .machno-case__link { display: none; }
.machno-cases.is-animated .machno-cases__current { display: block; }
.machno-cases:not(.is-animated) .machno-cases__counter { display: none; }
.machno-cases:not(.is-animated) .machno-case__number { left: 5%; }
@media (max-width: 1024px) {
  .machno-cases { --cases-count-size: 22px; --cases-count-top: 12%; }
  .machno-cases__heading { top: 10%; font-size: 38px; }
  .machno-case { height: max(100svh, 740px); }
  .machno-case__subtitle { top: 23%; width: 90%; font-size: 11px; }
  .machno-case__description { top: 29%; width: 90%; font-size: 13px; }
  .machno-case__area, .machno-case__location { top: 43%; font-size: 11px; }
  .machno-case__area { left: 5%; }
  .machno-case__media { top: 49%; left: 5%; right: 5%; bottom: 12%; }
  .machno-case__link, .machno-cases__current { bottom: 5%; left: auto; right: 5%; }
  .machno-cases__arrow { width: 25px; height: 25px; left: 8%; bottom: 6%; }
  .machno-cases .machno-case__playback { right: 12px; bottom: 12px; width: 34px; min-height: 34px; }
  body:has(.wd-toolbar) .machno-cases.is-animated .machno-cases__stage { height: calc(100svh - 55px); }
}
.machno-cases .machno-case__playback:hover, .machno-cases .machno-case__playback:focus-visible { background: rgb(0 0 0 / .6); color: #fff; }

/* Keep the same shared destination for the arrow and its label. */
.machno-cases .machno-case__playback { display: none !important; }
.machno-cases__arrow { pointer-events: auto; transition: translate .3s ease; }
.machno-cases:has(.machno-cases__current:hover, .machno-cases__current:focus-visible, .machno-cases__arrow:hover, .machno-cases__arrow:focus-visible) .machno-cases__arrow { translate: 0 8px; }
@media (prefers-reduced-motion: reduce) { .machno-cases__arrow { transition: none; } }
/* Static cards have their own project links instead of a shared current arrow. */
.machno-cases:not(.is-animated) .machno-cases__arrow { display: none; }

/* Mobile Cases: full-width inset video with project information below it. */
@media (max-width: 1024px) {
 .machno-cases { --cases-count-top: 40px; --cases-count-size: clamp(18px, 5.1282vw, 24px); --case-video-top: 170px; --case-video-height: clamp(205px, 64.1026vw, 280px); --case-video-bottom: calc(var(--case-video-top) + var(--case-video-height)); color: #F1F0EF; }
 .machno-cases__heading { top: 30px; right: 11px; font-size: clamp(26px, 7.6923vw, 36px); font-weight: 400; }
 .machno-cases__counter { left: 16px; font-weight: 300; }
 .machno-case__number { left: calc(16px + .85em); font-weight: 300; }
 .machno-cases:not(.is-animated) .machno-case__number { left: 16px; }
 .machno-case__subtitle { top: 140px; left: 16px; width: calc(100% - 27px); font-size: clamp(12px, 3.5897vw, 16px); font-weight: 500; line-height: 1.4; }
 .machno-case__media { top: var(--case-video-top); left: 7px; right: 7px; bottom: auto; height: var(--case-video-height); }
 .machno-case__area, .machno-case__location { top: calc(var(--case-video-bottom) + 12px); font-size: clamp(12px, 3.5897vw, 16px); line-height: 1.4; }
 .machno-case__area { left: 16px; font-weight: 500; max-width: 45%; }
 .machno-case__location { right: 11px; font-weight: 300; max-width: 45%; }
 .machno-case__description { top: calc(var(--case-video-bottom) + 70px); left: 16px; width: calc(100% - 32px); font-size: clamp(14px, 4.1026vw, 18px); font-weight: 300; line-height: 1.5; }
 .machno-case__link, .machno-cases__current { left: 0; right: auto; bottom: 50px; padding-left: 32px; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; line-height: 1.4; color: #F1F0EF; }
 .machno-case__link::before, .machno-cases__current::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: currentColor; }
 .machno-cases__arrow { left: auto; right: 16px; bottom: 50px; width: 64px; height: 48px; border: 0; transform: none; color: #F1F0EF; background: currentColor; mask: url('../images/cases-arrow-mobile.svg') center / contain no-repeat; -webkit-mask: url('../images/cases-arrow-mobile.svg') center / contain no-repeat; }
}
/* Fit the pinned composition to both viewport dimensions, including tall phones. */
@media (max-width: 1024px) {
 .machno-cases.is-animated {
  --cases-stage-height: 100svh;
  --cases-extra-height: clamp(0px, calc(var(--cases-stage-height) - 704px), 300px);
  --case-video-top: calc(170px + var(--cases-extra-height) * .12);
  --case-video-height: min(clamp(205px, calc(64.1026vw + var(--cases-extra-height) * .5), 390px), calc(var(--cases-stage-height) - var(--case-video-top) - 280px));
 }
 body:has(.wd-toolbar) .machno-cases.is-animated { --cases-stage-height: calc(100svh - 55px); }
 .machno-cases.is-animated .machno-case__subtitle { top: calc(var(--case-video-top) - 30px); }
}
@media (max-width: 1024px) {
 .machno-cases.is-animated { --cases-count-top: 90px; }
 .machno-cases.is-animated .machno-cases__heading { top: 80px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
 .machno-cases.is-animated { --case-video-height: min(clamp(340px, 45svh, 560px), calc(var(--cases-stage-height) - var(--case-video-top) - 310px)); }
 .machno-cases__heading { font-size: 42px; }
 .machno-case__subtitle, .machno-case__area, .machno-case__location { font-size: 18px; }
 .machno-case__description { font-size: 20px; }
 .machno-case__link, .machno-cases__current { font-size: 11px; }
}