/* Works only. Shared typography, colors, widths and breakpoints follow common.css. */
.mast-works, .mast-works * { box-sizing: border-box; }
.mast-works { margin: 0; padding: 0; width: 100%; background: #fff; color: #3f4650; overflow-wrap: anywhere; }
.mast-works__inner { width: min(calc(100% - 48px), 1110px); margin: 0 auto; }
.mast-works__hero { padding: 80px 0 88px; }
.mast-works__hero-copy { width: min(100%, 960px); margin: 0 auto 40px; }
.mast-works__eyebrow, .mast-works__number { color: #0068b7; font-weight: 600; letter-spacing: .04em; margin: 0 0 16px; }
.mast-works__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 32px 0 24px; }
.mast-works__meta dt { font-size: .875rem; color: #565d66; font-weight: 500; }
.mast-works__meta dd { margin: 8px 0 0; font-size: 1rem; }
.mast-works__image { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border: 1px solid #dce2e6; border-radius: 2px; background: #f7f8f9; }
.mast-works__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; margin: 0; }
.mast-works__placeholder { display: flex; height: 100%; align-items: center; justify-content: center; color: #565d66; font-size: .875rem; }
.mast-works__section { border-top: 1px solid #edf0f2; padding: 88px 0; }
.mast-works__reading { max-width: 720px; }
.mast-works__heading, .mast-works__item-title, .mast-works__card-title { padding: 0; border: 0; background: none; box-shadow: none; color: #111; font-family: inherit; font-weight: 600; letter-spacing: .02em; }
.mast-works__heading::before, .mast-works__heading::after, .mast-works__item-title::before, .mast-works__item-title::after, .mast-works__card-title::before, .mast-works__card-title::after { display: none; content: none; }
.mast-works__heading { margin: 0 0 32px; font-size: clamp(1.65rem, 2.4vw, 2rem); line-height: 1.3; }
.mast-works__item-title, .mast-works__card-title { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.6; }
.mast-works__prose, .mast-works__lead, .mast-works__copy { font-size: 1rem; line-height: 1.9; }
.mast-works__prose p { margin: 0 0 16px; }
.mast-works__prose p:last-child { margin-bottom: 0; }
.mast-works__lead { max-width: 720px; margin: 0 0 48px; }
.mast-works__challenges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mast-works__challenge { min-width: 0; border-top: 1px solid #ccd1d5; padding-top: 24px; }
.mast-works__comparison + .mast-works__comparison { margin-top: 56px; }
.mast-works__pair, .mast-works__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.mast-works__pair { margin-bottom: 24px; }
.mast-works__pair figure { margin: 0; min-width: 0; }
.mast-works__pair figcaption { margin-bottom: 12px; font-weight: 600; color: #565d66; }
.mast-works__grid { row-gap: 48px; }
.mast-works__card { min-width: 0; }
.mast-works__card .mast-works__image img { object-fit: cover; object-position: center top; }
.mast-works__grid > .mast-works__card:only-child { grid-column: 1 / -1; width: 100%; max-width: 740px; }
.mast-works__card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.mast-works__card-link:hover { color: inherit; text-decoration: none; }
.mast-works__card-link:hover .mast-works__more { text-decoration: underline; }
.mast-works__card-link:focus-visible, .mast-works__website:focus-visible { outline: 2px solid #0068b7; outline-offset: 5px; }
.mast-works__card-body { padding: 24px 0; border-bottom: 1px solid #dce2e6; }
.mast-works__category, .mast-works__industry { font-size: .875rem; color: #565d66; margin: 0 0 12px; line-height: 1.8; }
.mast-works__category { color: #0068b7; }
.mast-works__copy { margin: 16px 0 24px; }
.mast-works__more, .mast-works__website { color: #0068b7; font-weight: 600; }
.mast-works .pagination { margin-top: 48px; }
/* Only single-page images opt into the screenshot viewer. */
.mast-works__image--viewer { aspect-ratio: auto; height: 450px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #929ca5 #edf0f2; }
.mast-works__image--project { height: 500px; }
.mast-works__image--viewer::-webkit-scrollbar { width: 8px; }
.mast-works__image--viewer::-webkit-scrollbar-track { background: #edf0f2; }
.mast-works__image--viewer::-webkit-scrollbar-thumb { background: #929ca5; border-radius: 4px; }
@media screen and (min-width: 768px) {
    .mast-works__image--viewer { overflow-y: scroll; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #7b8792 #edf0f2; }
    /* Explicit sizing keeps Chromium's scrollbar visible rather than overlaid. */
    @supports selector(::-webkit-scrollbar) {
        .mast-works__image--viewer { scrollbar-width: auto; scrollbar-color: auto; }
    }
    .mast-works__image--viewer::-webkit-scrollbar { display: block; width: 10px; }
    .mast-works__image--viewer::-webkit-scrollbar-track { background: #edf0f2; }
    .mast-works__image--viewer::-webkit-scrollbar-thumb { min-height: 32px; background: #7b8792; border: 2px solid #edf0f2; border-radius: 5px; }
    .mast-works__image--viewer::-webkit-scrollbar-thumb:hover,
    .mast-works__image--viewer::-webkit-scrollbar-thumb:active { background: #565d66; }
}
.mast-works__image-open { display: block; width: 100%; cursor: zoom-in; }
.mast-works__image--viewer img { width: 100%; height: auto; max-height: none; object-fit: initial; cursor: zoom-in; }
.mast-works__image--viewer:focus-visible { outline: 2px solid #0068b7; outline-offset: 3px; }
.mast-works__image-open:focus-visible { outline: 3px solid #0068b7; outline-offset: -3px; }
.mast-works-lightbox { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 64px 0 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.mast-works-lightbox::backdrop { background: rgba(0, 0, 0, .86); }
.mast-works-lightbox__close { position: absolute; top: 12px; right: 20px; min-height: 44px; padding: 8px 16px; border: 1px solid #ccd1d5; border-radius: 2px; background: #fff; color: #111; font: inherit; cursor: pointer; }
.mast-works-lightbox__viewport { box-sizing: border-box; width: 100%; height: 100%; padding: 0 24px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #929ca5 #222; }
.mast-works-lightbox__image { display: block; width: min(100%, 1440px); max-width: 100%; height: auto; max-height: none; margin: 0 auto; background: #fff; }
.mast-works-lightbox__close:focus-visible, .mast-works-lightbox__viewport:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media screen and (max-width: 1099px) {
    .mast-works__inner { width: min(calc(100% - 40px), 1110px); }
    .mast-works__hero { padding: 72px 0 80px; }
    .mast-works__section { padding: 80px 0; }
    .mast-works__challenges, .mast-works__pair, .mast-works__grid { gap: 24px; }
}
@media screen and (max-width: 767px) {
    .mast-works__image--viewer { height: 300px; overflow: hidden; overscroll-behavior: auto; }
    .mast-works__image--project { height: 340px; }
    .mast-works-lightbox__viewport { padding: 0 12px 20px; }
    .mast-works__inner { width: calc(100% - 40px); }
    .mast-works__hero { padding: 56px 0 64px; }
    .mast-works__hero-copy { margin-bottom: 32px; }
    .mast-works__section { padding: 64px 0; }
    .mast-works__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .mast-works__challenges, .mast-works__pair, .mast-works__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .mast-works__heading { margin-bottom: 24px; }
    .mast-works__comparison + .mast-works__comparison { margin-top: 40px; }
    .mast-works__lead { margin-bottom: 32px; }
}