.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border: 1px solid transparent; font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s, border-color .2s; }
.button--primary { color: #fff; background: var(--red); border-color: var(--red); }
.button--primary:hover { color: var(--black); background: var(--white); border-color: var(--white); }
.button--ghost { color: var(--white); border-color: var(--line-strong); }
.button--ghost:hover { color: var(--white); border-color: var(--white); background: rgba(250, 250, 248, .08); }
.button--small { min-height: 40px; padding: 10px 16px; }
.menu-button { display: none; }
.language-switcher { display: flex; border: 1px solid var(--line-strong); }
.language-switcher button { min-width: 38px; padding: 8px 9px; border: 0; color: var(--grey-2); background: transparent; font: .7rem var(--mono); letter-spacing: .08em; }
.language-switcher button[aria-pressed="true"] { color: var(--black); background: var(--white); }

project-card { display: block; height: 100%; }
.project-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; color: var(--white); background: var(--black); }
.project-card__media { position: relative; aspect-ratio: 1.4; overflow: hidden; background: var(--carbon-2); }
.project-card__slides, .project-card__slide { width: 100%; height: 100%; }
.project-card__slide[hidden] { display: none; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.project-card:hover .project-card__media img { transform: scale(1.035); }
.project-card__arrow { position: absolute; top: 50%; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255, 255, 255, .45); color: var(--white); background: rgba(10, 10, 11, .66); font-size: 1.1rem; transform: translateY(-50%); }
.project-card__arrow:hover { border-color: var(--white); background: var(--red); }
.project-card__arrow--prev { left: 12px; }
.project-card__arrow--next { right: 12px; }
.project-card__dots { position: absolute; right: 14px; bottom: 13px; left: 14px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.project-card__dot { width: 7px; height: 7px; padding: 0; border: 1px solid var(--white); border-radius: 50%; background: rgba(10, 10, 11, .35); }
.project-card__dot.is-active { background: var(--red); border-color: var(--red); }
.project-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 21px; }
.project-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--red); font-size: .65rem; }
.project-card h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: .98; }
.project-card p { color: var(--grey); }
.project-card__video { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; color: var(--white); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project-card__video:hover { color: var(--red); }

body.has-video-modal { overflow: hidden; }
.video-modal { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: clamp(20px, 4vw, 64px); border: 0; color: var(--white); background: transparent; color-scheme: dark; }
.video-modal::backdrop { background: rgba(10, 10, 11, .94); }
.video-modal__shell { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; width: min(100%, var(--container)); height: 100%; margin-inline: auto; }
.video-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.video-modal__title { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.video-modal__close { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); color: var(--white); background: rgba(10, 10, 11, .6); font-size: 1.7rem; line-height: 1; }
.video-modal__close:hover { border-color: var(--white); color: var(--black); background: var(--white); }
.video-modal__player { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: var(--black); border: 1px solid var(--line-strong); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }