.ak-projecten { overflow: clip; background: var(--ak-white); }
.ak-projecten-container { width: min(100% - (2 * var(--ak-gutter)), 80rem); margin-inline: auto; }
.ak-projecten-eyebrow { margin: 0 0 1rem; color: var(--ak-brand); font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.ak-projecten-eyebrow--light { color: #c8b28c; }
.ak-projecten h1, .ak-projecten h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; }
.ak-projecten h1 { max-width: 11ch; font-size: clamp(4rem, 8vw, 7rem); letter-spacing: -.048em; line-height: .9; text-wrap: balance; }
.ak-projecten h2 { font-size: clamp(2.7rem, 5vw, 4.8rem); letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.ak-projecten p { color: #4c555e; line-height: 1.75; }
.ak-projecten-hero { padding-block: clamp(5rem, 10vw, 9rem); background: var(--ak-warm); }
.ak-projecten-hero .ak-projecten-container { max-width: 64rem; margin-inline: max(var(--ak-gutter), calc((100vw - 80rem) / 2)); }
.ak-projecten-hero p:last-child { max-width: 48rem; margin: 2rem 0 0; font-size: clamp(1.08rem, 1.5vw, 1.3rem); }
.ak-projecten-gallery { padding-block: clamp(5rem, 10vw, 9rem); }
.ak-projecten-gallery__heading { max-width: 52rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.ak-project-gallery__toolbar { display: flex; gap: 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ak-border); }
.ak-project-gallery__filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.ak-project-gallery__filters button { padding: .65rem .85rem; border: 1px solid var(--ak-border); background: transparent; color: var(--ak-ink); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ak-project-gallery__filters button span { margin-left: .35rem; color: #737a80; font-size: .65rem; }
.ak-project-gallery__filters button:hover, .ak-project-gallery__filters button.is-active { border-color: var(--ak-brand); background: var(--ak-brand); color: #fff; }
.ak-project-gallery__filters button.is-active span { color: #f1ede7; }
.ak-project-gallery__filters button:focus-visible, .ak-project-gallery__link:focus-visible, .ak-project-dialog__close:focus-visible { outline: 2px solid var(--ak-brand); outline-offset: 3px; }
.ak-project-gallery__status { flex: 0 0 auto; margin: 0; color: #737a80 !important; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ak-project-gallery__grid { columns: 3 20rem; column-gap: 1rem; }
.ak-project-gallery__item { margin: 0 0 1rem; break-inside: avoid; }
.ak-project-gallery__item[hidden] { display: none; }
.ak-project-gallery__link { display: block; color: inherit; text-decoration: none; }
.ak-project-gallery figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--ak-border); background: var(--ak-warm); }
.ak-project-gallery figure img { display: block; width: 100%; height: auto; transition: transform 480ms cubic-bezier(.22,1,.36,1); }
.ak-project-gallery figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: .3rem; padding: 3.5rem 1.1rem 1rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(10,14,18,.82)); transform: translateY(.15rem); transition: transform .25s ease; }
.ak-project-gallery figcaption span { font-size: .64rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.ak-project-gallery figcaption strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.05; }
.ak-project-gallery__link:hover img { transform: scale(1.018); }
.ak-project-gallery__link:hover figcaption { transform: translateY(0); }
.ak-project-dialog { width: min(92vw, 76rem); max-height: 92vh; padding: 0; border: 0; background: var(--ak-ink); color: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,.4); }
.ak-project-dialog::backdrop { background: rgba(9,13,17,.82); }
.ak-project-dialog__close { position: absolute; z-index: 2; top: .8rem; right: .8rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.45); background: rgba(17,24,32,.74); color: #fff; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.ak-project-dialog__media { display: grid; max-height: 72vh; place-items: center; background: #0b0f12; }
.ak-project-dialog__media img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; }
.ak-project-dialog__copy { padding: 1.25rem 1.5rem 1.5rem; }
.ak-project-dialog__copy span { color: #c8b28c; font-size: .65rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.ak-project-dialog__copy h2 { margin-top: .4rem; color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.ak-project-dialog__copy p { max-width: 52rem; margin: .8rem 0 0; color: #c7cbd0; }
.ak-projecten-final { padding-block: clamp(5rem, 10vw, 8rem); background: var(--ak-brand); text-align: center; }
.ak-projecten-final .ak-projecten-container { max-width: 58rem; }
.ak-projecten-final h2 { color: #fff; }
.ak-projecten-final .ak-button { margin-top: 2rem; }
.ak-projecten-final .ak-button--light { border-color: #fff; background: #fff; color: var(--ak-ink); }
.ak-projecten-empty { padding: 2rem 0; border-top: 1px solid var(--ak-border); }
@media (max-width: 800px) {
  .ak-project-gallery__toolbar { align-items: flex-start; flex-direction: column; }
  .ak-project-gallery__filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
  .ak-project-gallery__filters button { flex: 0 0 auto; }
  .ak-project-gallery__grid { columns: 2 14rem; }
}
@media (max-width: 540px) {
  .ak-projecten-hero { padding-block: 4rem 4.5rem; }
  .ak-projecten h1 { font-size: clamp(3.4rem, 17vw, 4.8rem); }
  .ak-project-gallery__grid { columns: 1; }
  .ak-project-gallery figcaption { position: static; padding: 1rem; color: var(--ak-ink); background: var(--ak-warm); transform: none; }
  .ak-project-gallery figcaption span { color: var(--ak-brand); }
  .ak-project-dialog { width: calc(100vw - 1rem); max-height: 94vh; }
  .ak-project-dialog__copy { padding: 1rem; }
  .ak-projecten-final .ak-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ak-project-gallery figure img, .ak-project-gallery figcaption { transition: none; }
}