/* The homepage projects keep their original copy and assets in a new composition. */
.vda-showcase { width: calc(100% - 80px); max-width: 1408px; margin: 0 auto; color: #f7f8f6; font-family: Manrope, Arial, sans-serif; border-radius: 4px; overflow: hidden; background: #142022; outline-offset: 6px; }
.vda-showcase *, .vda-showcase *::before, .vda-showcase *::after { box-sizing: border-box; }
.vda-showcase .vda-showcase__stage { position: relative; }
.vda-showcase .vda-showcase__slide { display: grid; grid-template-columns: 45% 55%; min-height: 510px; overflow: hidden; }
.vda-showcase .vda-showcase__slide[hidden] { display: none; }
.vda-showcase .vda-showcase__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 40px 48px; z-index: 2; }
.vda-showcase .vda-showcase__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 33px; color: #a4b5b4; font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.vda-showcase .vda-showcase__eyebrow > span { width: 29px; height: 1px; background: #63d0ce; }
.vda-showcase .vda-showcase__logo { width: 174px; max-width: 72%; height: auto; margin-bottom: 29px; filter: brightness(0) invert(1); }
.vda-showcase .vda-showcase__title { max-width:390px; margin: 0; padding: 0; color: #fff; font: 500 clamp(68px, 6.4vw, 102px)/1.03 Manrope, Arial, sans-serif; letter-spacing: -.055em; text-transform: none; }
.vda-showcase .vda-showcase__slide--trump .vda-showcase__title { max-width: 450px; font-size: clamp(35px, 3.3vw, 58px); line-height: 1.06; letter-spacing: -.052em; text-transform: lowercase; }
.vda-showcase .vda-showcase__slide--trump .vda-showcase__title::first-letter { text-transform: uppercase; }
.vda-showcase .vda-showcase__description { max-width: 370px; margin: 25px 0 0; color: #b3c1c0; font: 400 15px/1.8 Manrope, Arial, sans-serif; letter-spacing: -.015em; }
.vda-showcase .vda-showcase__link { display: inline-flex; align-items: center; gap: 31px; margin-top: auto; padding-top: 42px; color: #f2fbfa; font: 600 10px/1.5 Manrope, Arial, sans-serif; letter-spacing: .105em; text-decoration: none; }
.vda-showcase .vda-showcase__link svg { width: 40px; height: 40px; padding: 10px; border: 1px solid #617274; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.2; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.vda-showcase .vda-showcase__link:hover { color: #78e0dd; }
.vda-showcase .vda-showcase__link:hover svg { background: #16b8cf; border-color: #16b8cf; color: #142022; transform: translateX(3px); }
.vda-showcase .vda-showcase__visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: #bceee9; }
.vda-showcase .vda-showcase__visual::before { position: absolute; content: ''; width: 510px; height: 510px; border: 1px solid rgba(20,32,34,.08); border-radius: 50%; }
.vda-showcase .vda-showcase__visual::after { position: absolute; content: ''; width: 650px; height: 650px; border: 1px solid rgba(20,32,34,.05); border-radius: 50%; }
.vda-showcase .vda-showcase__image { position: relative; display: block; max-width: none; height: auto; object-fit: contain; z-index: 1; pointer-events: none; }
.vda-showcase .vda-showcase__image--project { width: 112%; max-height: 470px; margin-left: 8%; filter: drop-shadow(0 28px 25px rgba(20,32,34,.1)); }
.vda-showcase .vda-showcase__slide--trump .vda-showcase__image--project { width: 118%; max-height: 470px; margin-left: 2%; }
.vda-showcase .vda-showcase__slide--prins .vda-showcase__visual { background: #d7e9ef; }
.vda-showcase .vda-showcase__slide--prins .vda-showcase__image--project { width: 94%; margin-left: 20%; margin-top: -25px; }
.vda-showcase .vda-showcase__image--car { position: absolute; width: 74%; left: -14%; bottom: 47px; z-index: 3; }
.vda-showcase .vda-showcase__image--backdrop { position: absolute; width: 100%; left: 0; bottom: 0; z-index: 0; opacity: .35; }
.vda-showcase .vda-showcase__navigation { display: flex; justify-content: space-between; align-items: center; min-height: 78px; padding: 0 32px 0 60px; border-top: 1px solid #354243; }
.vda-showcase .vda-showcase__projects { display: flex; gap: 30px; align-self: stretch; }
.vda-showcase .vda-showcase__project { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; color: #819392; background: transparent; cursor: pointer; font: 500 12px/1.5 Manrope, Arial, sans-serif; white-space: nowrap; }
.vda-showcase .vda-showcase__project > span { font-size: 9px; color: #657e7d; }
.vda-showcase .vda-showcase__project[aria-current="true"] { color: #fff; }
.vda-showcase .vda-showcase__project[aria-current="true"]::before { content: ''; position: absolute; height: 2px; top: -1px; left: 0; right: 0; background: #63d0ce; }
.vda-showcase .vda-showcase__project:hover { color: #a9eee9; }
.vda-showcase .vda-showcase__controls { display: flex; align-items: center; gap: 8px; padding-left: 18px; }
.vda-showcase .vda-showcase__control { display: flex; justify-content: center; align-items: center; flex: 0 0 37px; width: 37px; height: 37px; margin: 0; padding: 9px; color: #e8f4f2; border: 1px solid #415353; border-radius: 50%; background: transparent; cursor: pointer; }
.vda-showcase .vda-showcase__control:hover { color: #142022; background: #bceee9; border-color: #bceee9; }
.vda-showcase .vda-showcase__control svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.vda-showcase .vda-showcase__control--previous svg { transform: rotate(180deg); }
.vda-showcase .vda-showcase__control--pause { border-color: transparent; }
.vda-showcase .vda-showcase__play-icon { display: none; }
.vda-showcase .vda-showcase__control--pause[aria-pressed="true"] .vda-showcase__play-icon { display: block; }
.vda-showcase .vda-showcase__control--pause[aria-pressed="true"] .vda-showcase__pause-icon { display: none; }
.vda-showcase .vda-showcase__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vda-showcase :focus-visible { outline: 2px solid #16b8cf; outline-offset: 5px; }
@media (min-width: 1650px) { .vda-showcase .vda-showcase__slide { min-height: 700px; } .vda-showcase .vda-showcase__copy { padding: 65px 85px 75px; } .vda-showcase .vda-showcase__image--project { max-height: 630px; } }
@media (max-width: 1150px) { .vda-showcase { width: calc(100% - 48px); } .vda-showcase .vda-showcase__copy { padding: 42px 38px; } .vda-showcase .vda-showcase__slide { min-height: 555px; } .vda-showcase .vda-showcase__title { font-size: 68px; } .vda-showcase .vda-showcase__slide--trump .vda-showcase__title { font-size: 42px; } .vda-showcase .vda-showcase__navigation { padding-left: 35px; padding-right: 20px; } .vda-showcase .vda-showcase__projects { gap: 20px; } .vda-showcase .vda-showcase__project { gap: 7px; font-size: 10px; } }
@media (max-width: 760px) { .vda-showcase { width: calc(100% - 32px); border-radius: 3px; } .vda-showcase .vda-showcase__slide { grid-template-columns: 1fr; min-height: 0; } .vda-showcase .vda-showcase__copy { min-height: 400px; padding: 30px; } .vda-showcase .vda-showcase__eyebrow { margin-bottom: 28px; } .vda-showcase .vda-showcase__title { max-width: 450px; font-size: clamp(54px, 12vw, 80px); } .vda-showcase .vda-showcase__slide--trump .vda-showcase__title { max-width: 440px; font-size: clamp(37px, 8.4vw, 58px); } .vda-showcase .vda-showcase__logo { width: 135px; margin-bottom: 25px; } .vda-showcase .vda-showcase__description { font-size: 14px; } .vda-showcase .vda-showcase__link { padding-top: 30px; } .vda-showcase .vda-showcase__visual { min-height: 340px; max-height: 400px; } .vda-showcase .vda-showcase__image--project, .vda-showcase .vda-showcase__slide--trump .vda-showcase__image--project { width: 94%; max-height: 360px; margin: 15px 0 0; } .vda-showcase .vda-showcase__image--car { bottom: 20px; } .vda-showcase .vda-showcase__navigation { padding: 0 20px; flex-wrap: wrap; min-height: 100px; } .vda-showcase .vda-showcase__projects { width: 100%; min-height: 57px; gap: 19px; justify-content: space-between; } .vda-showcase .vda-showcase__project { font-size: 10px; gap: 6px; white-space: normal; text-align: left; } .vda-showcase .vda-showcase__project > span { display: none; } .vda-showcase .vda-showcase__controls { margin-left: auto; padding: 4px 0 10px; } .vda-showcase .vda-showcase__control { width: 34px; height: 34px; flex-basis: 34px; } }
@media (prefers-reduced-motion: reduce) { .vda-showcase * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }