.mp-projects {
    --mp-ink: #222936;
    --mp-link: #101936;
    --mp-heading-font: 'Julius Sans One', sans-serif;
    color: var(--mp-ink);
    font-family: 'Roboto', sans-serif;
    background: #fff;
    width: 100%;
}
.mp-projects *, .mp-projects *::before, .mp-projects *::after { box-sizing: border-box; }
.mp-projects img { display: block; max-width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.mp-projects a { color: var(--mp-link); text-decoration: none; }
.mp-projects a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.mp-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 1.7vw, 36px); }
.mp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; border: 2px solid var(--mp-ink); min-width: 0; min-height: clamp(280px, 23vw, 520px); }
.mp-card__copy { padding: clamp(18px, 1.25vw, 30px); display: flex; flex-direction: column; min-height: 0; }
.mp-projects .mp-card__title { font-family: var(--mp-heading-font); font-size: clamp(20px, 1.8vw, 34px); line-height: 1.25; font-weight: 300; letter-spacing: .045em; text-transform: uppercase; margin: 0; color: var(--mp-ink); overflow-wrap: anywhere; }
.mp-projects .mp-card__excerpt { font-family: var(--mp-heading-font); margin: auto 0; padding-block: clamp(24px, 2.3vw, 48px); transform: none; font-size: clamp(12px, .7vw, 15px); font-weight: 300; line-height: 1.15; text-transform: uppercase; letter-spacing: .045em; overflow-wrap: anywhere; }
.mp-card__link { grid-column: 1; padding: clamp(24px, 2vw, 42px) clamp(18px, 1.25vw, 30px); border-top: 2px solid var(--mp-ink); display: flex; align-items: center; gap: 1.1em; font-size: clamp(14px, .85vw, 18px); line-height: 1.2; text-transform: uppercase; }
.mp-card__link span { transition: transform .2s ease; }
.mp-card__link:hover span { transform: translateX(6px); }
.mp-card__image { grid-column: 2; grid-row: 1 / 3; min-width: 0; position: relative; }
.mp-projects .mp-card .mp-card__image > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; }
.mp-card--no-image { grid-template-columns: minmax(0, 1fr); }
.mp-card--no-image .mp-card__copy { min-height: 350px; }
.mp-card--no-image .mp-card__excerpt { transform: none; }
.mp-single { padding: calc(150px + clamp(45px, 6.2vw, 130px)) 4.6vw clamp(48px, 5vw, 105px); }
.mp-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6.6vw; max-width: 2200px; margin-inline: auto; align-items: center; }
.mp-detail__copy { min-width: 0; }
.mp-projects .mp-detail__label { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.mp-projects .mp-detail__title { font-family: var(--mp-heading-font); font-size: clamp(34px, 3.8vw, 64px); font-weight: 400; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; margin: 0 0 24px; color: var(--mp-ink); overflow-wrap: anywhere; }
.mp-detail__body { font-size: 14px; line-height: 1.55; font-weight: 300; overflow-wrap: anywhere; }
.mp-detail__body p { margin: 0 0 1.15em; }
.mp-detail__body a { text-decoration: underline; }
.mp-projects .mp-back { display: inline-flex; align-items: center; gap: 18px; margin-top: 22px; font-size: 16px; text-transform: uppercase; }
.mp-gallery { min-width: 0; }
.mp-gallery__main { display: block; aspect-ratio: 1.56; background: #f2f2ef; }
.mp-gallery__main .mp-gallery__image { width: 100%; height: 100%; object-fit: cover; }
.mp-gallery__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .8vw, 18px); margin-top: clamp(8px, .8vw, 18px); }
.mp-gallery__thumb { display: block; aspect-ratio: 1.78; background: #111; }
.mp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .65; transition: opacity .2s; }
.mp-gallery__thumb[aria-current="true"] img, .mp-gallery__thumb:hover img, .mp-gallery__thumb:focus-visible img { opacity: 1; }
.mp-detail--no-image { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
.mp-pagination { margin-block: 32px; }
.mp-pagination ul { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; }
.mp-pagination .page-numbers a, .mp-pagination .page-numbers span { display: inline-block; padding: 10px 14px; border: 1px solid var(--mp-ink); }
.mp-pagination .current { background: var(--mp-ink); color: #fff; }
.mp-archive { padding: clamp(32px, 4vw, 80px) 4.6vw; }
.mp-auto-overview { padding: 0 4.6vw clamp(40px, 4vw, 80px); }
.mp-archive__title { font-size: clamp(32px, 4vw, 64px); font-weight: 300; text-transform: uppercase; margin: 0 0 40px; }
.mp-projects .mp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1024px) {
    .mp-project-grid { grid-template-columns: minmax(0, 1fr); }
    .mp-projects .mp-card__title { font-size: clamp(26px, 3.2vw, 36px); }
    .mp-projects .mp-card__excerpt { font-size: 14px; }
}
@media (max-width: 900px) {
    .mp-detail { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mp-detail__title { max-width: 100%; }
    .mp-detail__copy { max-width: 760px; }
}
@media (max-width: 700px) {
    .mp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
    .mp-card__copy { padding: 24px; }
    .mp-projects .mp-card__excerpt { margin-top: 26px; padding: 0; transform: none; line-height: 1.4; }
    .mp-card__image { grid-column: 1; grid-row: 2; aspect-ratio: 1.1; }
    .mp-card__link { grid-row: 3; padding: 24px; }
    .mp-card--no-image .mp-card__copy { min-height: 0; }
    .mp-single { padding-inline: 5vw; }
    .mp-projects .mp-detail__title { font-size: clamp(30px, 7.8vw, 45px); }
    .mp-gallery__thumbs { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-card__link span, .mp-gallery__thumb img { transition: none; }
}

/* Preserve the pre-carousel gallery proportions at every viewport width. */
.mp-gallery--carousel { container-type: inline-size; }
.mp-gallery--carousel .elementor-main-swiper:not(.elementor-thumbnails-swiper) { height: auto !important; aspect-ratio: 1.56; }
.mp-gallery--carousel .elementor-thumbnails-swiper { margin-top: 14px; height: calc((100cqw - 28px) * .1875) !important; }
.mp-gallery--carousel .swiper-wrapper,
.mp-gallery--carousel .swiper-slide { height: 100% !important; }
.mp-gallery--carousel .elementor-carousel-image { position: absolute; inset: 0; height: 100%; background-size: cover; background-position: center; }