/* The CYB Wear case study: the rules the shared case-study*.css does not cover. Scoped under .cs-cyb (data 'class'). */
.cs-cyb .cy-logo { width: 96px !important; height: auto !important; }
.cs-cyb .hz-client > span { display: block; }
.cs-cyb .cs-stagecap { text-wrap: pretty; }
.cs-cyb .cs-stagecap + .tw3-client { margin-top: 12px; }
.cs-cyb .tw7-hero .cs-browser img { object-position: left top; }   /* keep the store's logo and menu in view when the frame crops */
@media (min-width: 1024px) { .cs-cyb .cs-chain.cy-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cs-cyb .cy-shots li { display: flex; flex-direction: column; } .cs-cyb .cy-shots li > span { margin-top: auto; } }
.cs-cyb .cy-zoom { cursor: zoom-in; }
.cs-cyb .cy-zoom:focus-visible { outline: 3px solid #00B26B; outline-offset: -3px; }
.cs-cyb .cy-shot-phone { background: #F6F7F9 !important; }
.cs-cyb .cy-shot-phone .cy-zoom { padding: 20px 0 16px; display: flex; justify-content: center; }
.cs-cyb .cy-shot-phone .cs-phone { width: 240px; }
@media (min-width: 768px) {
  .cs-cyb .cy-shot-phone .cs-phone { width: 160px; }
  .cs-cyb .cy-shots li:nth-child(-n+2) .cy-zoom { aspect-ratio: 1200 / 1017; overflow: hidden; }
  .cs-cyb .cy-shots li:nth-child(-n+2) .cy-zoom img { height: 100%; object-fit: cover; object-position: top; }
}
.cs-cyb [aria-labelledby="cs-live"] > .tw13-after { margin-top: 0; }   /* the card carries the heading itself */
/* the review sits after the screens here, with the reference's plainer pull-quote */
.cs-cyb [aria-label="What the client says"] { padding-top: 48px; }
.cs-cyb [aria-label="What the client says"] .cs-quote p { font-size: 18px; font-weight: 500; line-height: 1.625; }
@media (min-width: 768px) { .cs-cyb [aria-label="What the client says"] { padding-top: 80px; } .cs-cyb [aria-label="What the client says"] .cs-quote p { font-size: 20px; line-height: 1.6; } }