/* House of Architects — homepage. Mobiel eerst; 768 / 1024 / 1440 als breekpunten. 8px-grid. */

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--kalk); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pan); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--ink); color: var(--kalk); }

section, footer { background: var(--bg); color: var(--fg); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 300; padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--kalk); font: 400 var(--fs-meta)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono);
  transform: translateY(-160%); transition: transform var(--dur-ui) var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- typografie ---------- */
.h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.accent { font-family: var(--font-accent); font-weight: 800; letter-spacing: -0.012em; }
.meta, .eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400; line-height: 1.5;
  text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--fg-3);
}
/* eyebrow + hairline tot de rand: de horizon van elke sectie, steeds op dezelfde hoogte */
.eyebrow { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-8); color: var(--fg-2); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform-origin: left; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; flex: 1; height: 1px; background: var(--rule); }
.eyebrow::after, .eyebrow--center::before { transition: transform var(--dur-horizon) var(--ease-inout); }
.eyebrow--center::before { transform-origin: right; }
.eyebrow--center::after { transform-origin: left; }
.js .eyebrow[data-hz-pending]::after, .js .eyebrow[data-hz-pending]::before { transform: scaleX(0); }

/* ---------- knoppen + links (één hoverpatroon: vulling van onder naar boven) ---------- */
.btn {
  --btn-fg: var(--fg); --btn-bd: var(--rule-strong); --btn-bg: color-mix(in srgb, var(--fg) 7%, transparent); --btn-fill: var(--fg); --btn-fg-h: var(--bg);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 26px;
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg);
  font: 400 var(--fs-meta)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono); white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--btn-fill);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--dur-ui) var(--ease-out);
}
.btn__label { display: inline-flex; align-items: center; gap: 12px; }
/* primair: gevuld in dakpan (donkere tint voor 5,3:1 contrast), met pijl in een rondje; hover vult van onder met inkt */
.btn--fill { --btn-bg: var(--pan-d); --btn-bd: var(--pan-d); --btn-fg: var(--kalk); --btn-fill: var(--ink); --btn-fg-h: var(--kalk); padding-right: 10px; }
.t-dark .btn--fill, .t-polder .btn--fill { --btn-fill: var(--kalk); --btn-fg-h: var(--ink); }
.btn--fill .btn__label::after {
  content: "\2192" / ""; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border-radius: 50%;
  background: rgba(243, 241, 236, .16); font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0;
  transition: background-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { color: var(--btn-fg-h); border-color: var(--btn-fill); }
  .btn:hover::before { transform: scaleY(1); }
  .t-dark .btn--fill:hover .btn__label::after, .t-polder .btn--fill:hover .btn__label::after { background: rgba(20, 21, 22, .1); }
}
.btn:focus-visible { color: var(--btn-fg-h); border-color: var(--btn-fill); }
.btn:focus-visible::before { transform: scaleY(1); }
.btn:active::before { transform: scaleY(1); opacity: .86; }

.tlink, .ulink { position: relative; }
.tlink {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px;
  font: 400 var(--fs-meta)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--fg);
}
.tlink::after, .ulink::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-ui) var(--ease-out);
}
.tlink::after { bottom: 10px; }
.ulink::after { bottom: -2px; }
@media (hover: hover) {
  .tlink:hover::after, .ulink:hover::after { transform: scaleX(1); transform-origin: left; }
}
.tlink:focus-visible::after, .ulink:focus-visible::after { transform: scaleX(1); }
.ulink { display: inline-block; }

/* ---------- chips ---------- */
.status {
  position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-1); padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill); background: rgba(243, 241, 236, .94); color: var(--ink);
  font: 400 var(--fs-meta)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-done); }
.status--live::before { background: var(--status-live); }
.todo {
  display: inline-flex; align-items: center; padding: 1px 8px; border: 1px dashed currentColor; border-radius: var(--r-pill);
  color: #9E4524; font: 400 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: 0; text-transform: none; white-space: nowrap; /* 5,6:1 op kalk */
}

/* ---------- beeldframe ---------- */
.frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-media); background: var(--kalk-2); }
.t-dark .frame { background: var(--ink-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- horizonlijn ---------- */
.hz { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: left; pointer-events: none; }

/* =========================================================
   INTRO
   ========================================================= */
.intro { display: none; }
.is-intro .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none; }
/* het doek met een raam erin: het raam (tussen --l/--r en --t/--b) groeit van niets tot het hele scherm */
.intro__veil {
  --l: 50%; --r: 50%; --t: 50%; --b: 50%;
  position: absolute; inset: 0; background: var(--ink); pointer-events: auto;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--l) var(--t), var(--r) var(--t), var(--r) var(--b), var(--l) var(--b), var(--l) var(--t));
}
.intro__mark { position: relative; z-index: 1; width: min(42vw, 360px); display: flex; flex-direction: column; color: var(--kalk); }
.intro__row { display: block; overflow: hidden; }
.intro__row svg { width: 100%; height: auto; transform: translateY(105%); }
.intro__gap { display: block; height: calc(min(42vw, 360px) * 29 / 601); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--kalk);
  transition: transform 480ms var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.nav::before { /* leesbaarheid boven de hero */
  content: ""; position: absolute; inset: 0 0 -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 21, 22, .45), transparent);
  transition: opacity var(--dur-ui) var(--ease-out);
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: rgba(243, 241, 236, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); transition: opacity var(--dur-ui) var(--ease-out);
}
.nav.is-solid { color: var(--ink); }
.nav.is-solid::before { opacity: 0; }
.nav.is-solid::after { opacity: 1; }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav__logo svg { width: 112px; height: auto; }
.nav__links { display: none; }
.nav__meta { display: flex; align-items: center; gap: var(--s-1); }
.lang { display: inline-flex; align-items: center; gap: 2px; font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); }
.lang a { display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; opacity: .64; transition: opacity var(--dur-ui) var(--ease-out); }
.lang a[aria-current] { opacity: 1; }
@media (hover: hover) { .lang a:hover { opacity: 1; } }
.lang span { opacity: .4; }
.icon-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: opacity var(--dur-ui) var(--ease-out); }
.icon-link svg { width: 20px; height: 20px; }
@media (hover: hover) { .icon-link:hover { opacity: .64; } }
.nav__cta { display: none; min-height: 44px; padding: 6px 6px 6px 20px; margin-left: var(--s-1); }
.nav__cta .btn__label::after { width: 30px; height: 30px; }
.nav__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.nav__burger-lines, .nav__burger-lines::before { display: block; width: 24px; height: 1px; background: currentColor; position: relative; }
.nav__burger-lines { box-shadow: none; transform: translateY(-4px); }
.nav__burger-lines::before { content: ""; position: absolute; top: 8px; }
@media (min-width: 1024px) {
  .nav__logo svg { width: 128px; }
  .nav__links { display: flex; gap: var(--s-4); }
  .nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 450; }
  .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-ui) var(--ease-out); }
  .nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .nav__meta { gap: var(--s-2); }
  .nav__burger { display: none; }
  /* logo links, alles anders rechts; Contact als pil-CTA helemaal rechts */
  .nav__links { margin-left: auto; margin-right: var(--s-2); }
  .nav__cta { display: inline-flex; }
}

/* mobiel menu */
.menu { position: fixed; inset: 0; z-index: 120; background: var(--ink); color: var(--kalk); display: flex; flex-direction: column; padding: 0 var(--margin) max(var(--s-4), env(safe-area-inset-bottom)); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__top { height: var(--nav-h); flex: none; display: flex; align-items: center; justify-content: space-between; }
.menu__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.menu__x { position: relative; width: 24px; height: 24px; }
.menu__x::before, .menu__x::after { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu__x::after { transform: rotate(-45deg); }
.menu__links { display: flex; flex-direction: column; padding-block: var(--s-6); border-top: 1px solid var(--line-inv); margin-top: var(--s-2); }
.menu__links a { font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--track-head); line-height: 1.15; padding-block: 4px; min-height: 48px; display: flex; align-items: center; }
.menu__foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-inv); font-size: .9375rem; line-height: 1.6; color: rgba(243, 241, 236, .78); }
.menu__foot .meta { display: block; margin-bottom: var(--s-1); color: rgba(243, 241, 236, .64); }
.menu__foot a[href^="tel"] { display: inline-flex; min-height: 44px; align-items: center; color: var(--kalk); }
.menu__row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.menu__mail { display: inline-flex; min-height: 44px; align-items: center; color: var(--kalk); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero__video.is-playing { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: rgba(20, 21, 22, .22); }
.hero__body { position: relative; z-index: 2; display: grid; gap: var(--s-4); padding-top: calc(var(--nav-h) + var(--s-4)); padding-bottom: var(--s-8); }
.hero__title {
  font-size: min(var(--fs-hero), 11.4svh); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-display);
  text-wrap: balance; hyphens: manual; overflow-wrap: normal; max-width: 15ch; color: var(--kalk);
}
.hero__title .accent { letter-spacing: -0.02em; }
.hero__sub { max-width: 36ch; color: rgba(243, 241, 236, .8); font-size: var(--fs-body); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.hero__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--s-3); padding-bottom: var(--s-2); }
.hero__foot .meta { color: rgba(243, 241, 236, .78); }
.hero__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); }
.hero__label .tlink { color: var(--kalk); }
.hero__clocks { display: flex; gap: var(--s-1); min-height: 44px; align-items: center; font-variant-numeric: tabular-nums; }
html:not(.js) .hero__clocks { visibility: hidden; }
@media (max-width: 767px) {
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__clocks { display: none; }
}
/* ≥ 1024: H1 over de volle breedte, daaronder subregel en knoppen op één rij */
@media (min-width: 1024px) {
  .hero__title { max-width: 16ch; }
  .hero__aside { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-8); }
  .hero__sub { max-width: 44ch; }
  .hero__ctas { margin-top: 0; flex-wrap: nowrap; }
}

/* =========================================================
   VISIE
   ========================================================= */
.visie { padding-block: calc(var(--section-y) * 1.5); } /* groen vlak: meer lucht boven en onder (Niek) */
.statement { font-size: var(--fs-h2); font-weight: 500; line-height: 1.12; letter-spacing: var(--track-head); max-width: 20ch; text-wrap: pretty; }
.statement .word { display: inline-block; }
.principes { display: grid; gap: var(--s-6); margin-top: var(--s-10); }
.principe h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: var(--s-3) 0 var(--s-1); }
.principe p { color: var(--fg-2); max-width: 34ch; }
/* nummerdevice: mono in dunne cirkel, hairlines naar beide kanten (lopen door tot een horizon over de drie principes) */
.num { display: flex; align-items: center; }
.num::before, .num::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.num::before { flex: 0 0 0; }
.num span { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule-strong); border-radius: 50%; font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0; color: var(--fg); }
.visie__link { margin-top: var(--s-8); }

/* principes: laden in als drie stappen. Per stap: cirkel → lijn → kop → tekst; de volgende stap begint pas als de vorige staat.
   Eenmalig bij binnenkomst (klasse .is-in via IntersectionObserver, als het blok half in beeld is), geen scrub. */
@media (prefers-reduced-motion: no-preference) {
  .js .principes .num span { opacity: 0; transform: scale(.4); transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
  .js .principes .num::before, .js .principes .num::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease-inout); }
  .js .principes h3, .js .principes p { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .principe + .principe::before { transform: scaleY(0); transition: transform 700ms var(--ease-inout); }
  .js .principes.is-in .num span, .js .principes.is-in h3, .js .principes.is-in p { opacity: 1; transform: none; }
  .js .principes.is-in .num::before, .js .principes.is-in .num::after { transform: none; }
  .js .principes.is-in .principe + .principe::before { transform: none; }
  .principes .principe:nth-child(1) { --d: 0ms; }
  .principes .principe:nth-child(2) { --d: 900ms; }
  .principes .principe:nth-child(3) { --d: 1800ms; }
  .js .principe + .principe::before { transition-delay: var(--d); }
  .js .principes .num::before { transition-delay: var(--d); }
  .js .principes .num span { transition-delay: calc(var(--d) + 100ms); }
  .js .principes .num::after { transition-delay: calc(var(--d) + 250ms); }
  .js .principes h3 { transition-delay: calc(var(--d) + 300ms); }
  .js .principes p { transition-delay: calc(var(--d) + 450ms); }
}
@media (min-width: 768px) {
  .statement { max-width: 22ch; }
  .principes { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .principe { padding-right: var(--s-4); }
  .principe { position: relative; }
  .principe + .principe { padding-left: var(--s-4); }
  .principe + .principe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); transform-origin: 50% 0; }
  .principe + .principe .num { margin-left: calc(var(--s-4) * -1); }
  .principe + .principe .num::before { flex: 0 0 var(--s-4); }
  .principe .num { margin-right: calc(var(--s-4) * -1); }
  .principe:last-child .num { margin-right: 0; }
}
@media (min-width: 1024px) {
  .statement { max-width: none; width: calc(8 / 12 * 100%); }
}

/* =========================================================
   UITGELICHT
   ========================================================= */
.featured { padding-block: var(--section-y); }
.featured__title { max-width: 18ch; margin-bottom: var(--s-10); }
.case { display: grid; gap: var(--s-4); }
.case + .case { margin-top: var(--s-12); }
.case__media { aspect-ratio: 3 / 2; cursor: pointer; }
.case__media img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) { .case__media:hover img { transform: scale(1.03); } }
.case__text { display: flex; flex-direction: column; align-items: flex-start; }
.case__text .h3 { margin: var(--s-1) 0 var(--s-2); }
.case__lead { max-width: 34ch; color: var(--fg-2); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); width: 100%; margin: var(--s-4) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.facts dt { font: 400 var(--fs-meta)/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--fg-3); }
.facts dd { font-size: .9375rem; line-height: 1.5; margin-top: 2px; }
@media (min-width: 1024px) {
  .case { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
  .case__media { grid-column: 1 / span 8; grid-row: 1; }
  .case__text { grid-column: 10 / -1; grid-row: 1; }
  .case--right .case__media { grid-column: 6 / -1; aspect-ratio: 4 / 3; }
  .case--right .case__text { grid-column: 1 / span 4; }
}

/* cursor-label (alleen op klikbare beelden, alleen fijne pointer) */
.cursor-label { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ease-out); }
.cursor-label span { display: block; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: var(--r-pill); background: var(--kalk); color: var(--ink); font: 400 var(--fs-meta)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono); box-shadow: var(--shadow-hover); }
.cursor-label.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }

/* =========================================================
   PROJECTINDEX
   ========================================================= */
.index { position: relative; padding-block: var(--section-y); }
.index__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font: 400 var(--fs-meta)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--fg);
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.chip__n { color: var(--fg-3); transition: color var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--kalk); }
.chip[aria-pressed="true"] .chip__n { color: rgba(243, 241, 236, .7); }
.chip:active { background: var(--kalk); }
.chip[aria-pressed="true"]:active { background: var(--ink-2); }

.index__list { border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); transition: opacity 320ms var(--ease-out); }
.row[hidden] { display: none; }
.row__link {
  display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "thumb title" "thumb meta";
  column-gap: var(--s-2); align-items: center; min-height: 56px; padding-block: var(--s-2);
}
.row__thumb { grid-area: thumb; width: 64px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--kalk); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.row__title { grid-area: title; font-size: 1.375rem; font-weight: 500; letter-spacing: var(--track-head); line-height: 1.1; align-self: end; }
.row__place, .row__year, .row__cat { grid-area: meta; align-self: start; margin-top: 6px; color: var(--fg-3); }
.row__year, .row__cat { display: none; }
.row__vis { display: none; }
/* ≥ 768: compact; naam met daaronder plaats · jaar · soort. ≥ 1440: alles op één regel */
@media (min-width: 768px) {
  .row__link { grid-template-columns: auto auto 1fr; grid-template-areas: "title title title" "place year cat"; column-gap: var(--s-3); row-gap: 2px; min-height: 64px; padding-block: 14px 16px; }
  .row__thumb { display: none; }
  .row__title { font-size: clamp(1.25rem, .95rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
  .row__place { grid-area: place; }
  .row__year { grid-area: year; display: block; }
  .row__cat { grid-area: cat; display: flex; gap: 0 var(--s-2); }
  .row__place, .row__year, .row__cat { margin: 0; white-space: nowrap; }
  .row__vis { display: inline; color: var(--fg-3); }
  .row__year:empty { display: none; }
}
@media (min-width: 1440px) {
  .row__link {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.4fr); grid-template-areas: "title place year cat";
    align-items: baseline; padding-block: 18px;
  }
  .row__place, .row__year, .row__cat { align-self: baseline; }
  .row__year:empty { display: block; }
}
@media (min-width: 1024px) {
  .index__head { grid-template-columns: auto 1fr; align-items: end; }
  .filters { justify-content: flex-end; }
}
/* viewer: één vast punt naast de lijst (sticky, midden van het scherm); alleen bij muis en ≥ 1024 */
.viewer { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .index__body { display: grid; grid-template-columns: 1fr 320px; column-gap: var(--s-8); align-items: start; }
  .viewer { display: block; position: sticky; top: calc(50svh - 200px + var(--nav-h) / 2); }
  .viewer__frame { aspect-ratio: 4 / 5; background: var(--kalk); }
  .viewer__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .viewer__cap { margin-top: var(--s-1); min-height: 1.5em; }
  .index__more { grid-column: 1; }
}
/* hover: andere rijen dimmen, geen verschuiving */
@media (hover: hover) and (pointer: fine) {
  .index__list.is-hovering .row { opacity: .35; }
  .index__list.is-hovering .row.is-active { opacity: 1; }
}
.row__link:focus-visible { outline-offset: -2px; }
.index__more { margin-top: var(--s-6); display: flex; justify-content: center; }
.index__more[hidden] { display: none; }


/* =========================================================
   HET KADER
   ========================================================= */
.kader { position: relative; }
.kader__stage { position: relative; overflow: hidden; background: var(--ink); }
.kader__head { text-align: center; }
.kader__head .h2 { color: var(--kalk); }
.kader__lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 40ch; color: var(--kalk); margin: var(--s-2) 0 var(--s-2); text-wrap: pretty; }
.kader__text .meta { color: rgba(243, 241, 236, .78); }
.kader__text .tlink { color: var(--kalk); }
/* mobiel en tablet-portret: drie ramen gestapeld, elk een eigen clip */
@media (max-width: 1023px) {
  .kader__stage { padding-block: var(--section-y) calc(var(--section-y) / 2); display: flex; flex-direction: column; }
  .kader + .now { padding-top: calc(var(--section-y) / 2); }
  .kader__head { order: -1; }
  .kader__head { padding-inline: var(--margin); margin-bottom: var(--s-6); }
  .kader__windows { display: grid; gap: var(--s-2); padding-inline: var(--margin); }
  .kader__win { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; }
  .kader__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .kader__win[data-win="0"] .kader__img { object-position: 8% 50%; }
  .kader__win[data-win="1"] .kader__img { object-position: 50% 50%; }
  .kader__win[data-win="2"] .kader__img { object-position: 92% 50%; }
  .kader__text { margin-top: var(--s-6); }
  .kader__shade { display: none; }
}
/* desktop: één podium van 100svh; eindbeeld = één volledig open landschap (ook bij reduced motion en zonder JS) */
@media (min-width: 1024px) {
  .kader__stage { height: 100svh; min-height: 640px; }
  .kader__windows, .kader__win { position: absolute; inset: 0; }
  .kader__win { clip-path: inset(0 0 0 0); }
  .kader__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .kader__win[data-win="0"], .kader__win[data-win="1"] { visibility: hidden; }
  .kader__shade { position: absolute; inset: 0; z-index: 1; background: rgba(20, 21, 22, .5); pointer-events: none; }
  .kader__head { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; padding-inline: var(--margin); opacity: 0; }
  .kader__head .eyebrow { width: min(560px, 80vw); margin-inline: auto; margin-bottom: var(--s-4); }
  .kader__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding-bottom: var(--s-8); }
  .is-kader-anim .kader__win { visibility: visible; will-change: clip-path; }
  .is-kader-anim .kader__head { opacity: 1; }
  .is-kader-anim .kader__shade { opacity: 0; }
}

/* =========================================================
   NU OP DE TEKENTAFEL
   ========================================================= */
.now { padding-block: var(--section-y); }
.now .h2 { margin-bottom: var(--s-8); }
.now__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--s-2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
  margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); padding-bottom: var(--s-2); scrollbar-width: none;
}
.now__list::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; }
.card__link {
  display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line-inv); border-radius: var(--r-media); overflow: hidden;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.card__media { aspect-ratio: 4 / 3; border-radius: 0; }
.card__media img { transition: transform 600ms var(--ease-out); }
.card__meta { padding: var(--s-3) var(--s-3) 0; }
.card__title { display: block; padding: var(--s-1) var(--s-3) 0; color: var(--kalk); text-wrap: balance; }
.card__text { display: block; padding: var(--s-2) var(--s-3) var(--s-4); color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
@media (hover: hover) {
  .card__link:hover { border-color: rgba(243, 241, 236, .4); }
  .card__link:hover .card__media img { transform: scale(1.04); }
}
.card__link:focus-visible { border-color: rgba(243, 241, 236, .4); }
@media (min-width: 768px) { .now__list { grid-auto-columns: 45%; gap: var(--gutter); } }
@media (min-width: 1024px) {
  .now__list { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
}

/* =========================================================
   WERKWIJZE
   ========================================================= */
.werkwijze { padding-block: var(--section-y); }
.werkwijze__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.werkwijze__head .h2 { max-width: 16ch; }
.werkwijze__intro { max-width: 46ch; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.45; }
.steps { position: relative; display: grid; gap: var(--s-5); padding-left: var(--s-6); margin-bottom: var(--s-8); }
.steps__track { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--rule); }
.steps__fill { position: absolute; inset: 0; background: var(--fg); transform-origin: top; }
.js .steps__fill { transform: scaleY(0); }
.step { position: relative; }
.step__dot { position: absolute; left: calc(var(--s-6) * -1); top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--rule-strong); transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 300ms var(--ease-out); }
.step.is-past .step__dot { background: var(--fg); border-color: var(--fg); }
.step.is-active .step__dot { background: var(--pan); border-color: var(--pan); transform: scale(1.23); }
.step__n { display: block; margin-bottom: var(--s-1); }
.step__title { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.step p { color: var(--fg-2); font-size: 1rem; line-height: 1.5; margin-top: 4px; max-width: 30ch; }
@media (min-width: 1024px) {
  .werkwijze__head { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
  .werkwijze__head .h2 { grid-column: 1 / span 7; }
  .werkwijze__intro { grid-column: 9 / -1; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--gutter); padding-left: 0; padding-top: var(--s-6); }
  .steps__track { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
  .steps__fill { transform-origin: left; }
  .js .steps__fill { transform: scaleX(0); }
  .step__dot { left: 0; top: calc(var(--s-6) * -1); }
  .step p { max-width: 24ch; }
}

/* =========================================================
   STUDIO
   ========================================================= */
.studio { padding-block: var(--section-y); }
.studio__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.studio__intro { color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; }
.team { min-width: 0; }
/* slider: native scroll-snap + slepen (muis) + pijlknoppen + pijltjestoetsen; voortgang als horizonlijn */
.team__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76vw; gap: var(--s-2);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  cursor: grab;
  margin-inline: calc(50% - 50vw); /* tot de randen van het scherm, links en rechts */
}
.team__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.team__track.is-marquee { scroll-snap-type: none; }
.team__track::-webkit-scrollbar { display: none; }
.team__track:focus-visible { outline-offset: 4px; }
.member { scroll-snap-align: start; }
.member__media { aspect-ratio: 4 / 5; }
.member__media img { filter: grayscale(1); pointer-events: none; -webkit-user-drag: none; transition: filter 600ms var(--ease-out); }
@media (hover: hover) { .member:hover .member__media img { filter: grayscale(0); } }
.member__name { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; margin-top: var(--s-2); }
.member .meta { margin-top: 2px; }
.member__bio { color: var(--fg-2); font-size: .9375rem; line-height: 1.5; margin-top: var(--s-1); max-width: 36ch; }
.team__bar { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.team__progress { position: relative; flex: 1; height: 1px; background: var(--rule); overflow: hidden; }
.team__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(.2); transition: transform 300ms var(--ease-out); }
.team__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.team__nav { display: flex; gap: var(--s-1); }
.round { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-strong); font-size: 1rem; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), opacity var(--dur-ui); }
@media (hover: hover) { .round:hover:not(:disabled) { background: var(--ink); color: var(--kalk); border-color: var(--ink); } }
.round:active:not(:disabled) { background: var(--ink-2); color: var(--kalk); }
.round:disabled { opacity: .32; cursor: default; }
@media (min-width: 768px) { .team__track { grid-auto-columns: 40vw; gap: var(--gutter); } }
@media (min-width: 1024px) {
  .studio__head { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
  .studio__title { grid-column: 1 / span 6; }
  .studio__intro { grid-column: 8 / -1; }
  .team__track { grid-auto-columns: 25vw; }
}
.offices { display: grid; gap: var(--s-2); margin-block: var(--s-10) var(--s-4); }
.office { padding: var(--s-4); border-radius: var(--r-media); background: var(--riet-l); --fg-3: #55584F; --rule: #C3C5B8; display: grid; gap: var(--s-1); align-content: start; }
.office__city { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.office__coord { margin-bottom: var(--s-2); }
.office a[href^="tel"] { display: inline-flex; min-height: 44px; align-items: center; }
.office a[href^="tel"]::after { bottom: 10px; }
.office__time { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .offices { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

/* =========================================================
   ERKENNING
   ========================================================= */
.erkenning { padding-block: var(--section-y); }
.t-polder .todo, .t-dark .todo { color: #E9A182; }
.erk { display: grid; gap: var(--s-8); }
.quote { max-width: 30ch; }
.quote blockquote p { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty; }
.quote blockquote p::before { content: "“"; margin-left: -0.45em; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.press__h { margin-bottom: var(--s-2); color: var(--fg-2); }
.press { border-top: 1px solid var(--rule); }
.press li { border-bottom: 1px solid var(--rule); transition: opacity 320ms var(--ease-out); }
.press a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kind arrow" "name arrow" "proj arrow"; column-gap: var(--s-2); align-items: center; min-height: 56px; padding-block: var(--s-2); }
.press__kind { grid-area: kind; color: var(--fg-3); }
.press__name { grid-area: name; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.press__proj { grid-area: proj; color: var(--fg-2); font-size: .9375rem; }
.press__arrow { grid-area: arrow; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong); font-size: .9375rem; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
@media (hover: hover) {
  .press:hover li:not(:hover) { opacity: .4; }
  .press a:hover .press__arrow { background: var(--fg); border-color: var(--fg); color: var(--bg); }
}
.press a:focus-visible .press__arrow { background: var(--fg); border-color: var(--fg); color: var(--bg); }
@media (min-width: 768px) {
  .press a { grid-template-columns: 112px 1fr auto auto; grid-template-areas: "kind name proj arrow"; column-gap: var(--s-3); min-height: 72px; }
  .press__proj { text-align: right; }
}
@media (min-width: 1024px) {
  .erk { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
  .quote { grid-column: 1 / span 5; }
  .press-wrap { grid-column: 7 / -1; }
}

/* =========================================================
   SLOT-CTA — typografisch; de horizonlijn is het enige beeld
   ========================================================= */
.cta { padding-block: var(--section-y); }
.cta .eyebrow { margin-bottom: var(--s-6); }
.cta__title { font-size: var(--fs-hero); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--kalk); text-wrap: balance; max-width: 14ch; }
.cta__line { position: relative; height: 1px; margin-block: var(--s-8); }
.cta__hz { top: 0; background: rgba(243, 241, 236, .32); }
.cta__grid { display: grid; gap: var(--s-6); }
.cta__sub { color: rgba(243, 241, 236, .8); font-size: var(--fs-lead); line-height: 1.45; max-width: 38ch; }
.cta__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.cta__studios { display: grid; gap: var(--s-3); }
.cta__studio dt { color: rgba(243, 241, 236, .64); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.cta__studio dd { color: var(--kalk); font-size: 1rem; line-height: 1.6; }
.cta__studio a { color: var(--kalk); }
@media (pointer: coarse) { .cta__studio a { display: inline-flex; min-height: 44px; align-items: center; } .cta__studio a::after { bottom: 10px; } }
@media (min-width: 768px) { .cta__studios { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } .cta__studio--mail { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
  .cta__main { grid-column: 1 / span 6; }
  .cta__studios { grid-column: 8 / -1; }
}

/* =========================================================
   FOOTER — kolommen, daarna het woordmerk over de volle breedte, oprijzend uit de horizon
   ========================================================= */
.footer { padding-block: var(--s-12) var(--s-3); font-size: 1rem; line-height: 1.6; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--gutter); }
.footer__col { display: grid; align-content: start; gap: var(--s-2); color: var(--fg-2); }
.footer__brand { grid-column: 1 / -1; }
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; color: rgba(243, 241, 236, .72); transition: color var(--dur-ui) var(--ease-out); }
.footer__logo svg { width: 104px; height: auto; }
@media (hover: hover) { .footer__logo:hover { color: var(--kalk); } }
.footer__brand p { max-width: 30ch; color: var(--fg-2); }
.footer__body { display: grid; gap: var(--s-1); }
.footer__h { color: var(--fg-3); }
.footer__col a { color: var(--kalk); }
.footer__nav { display: grid; }
.footer__col p a.ulink, .footer__nav a { display: inline-flex; min-height: 32px; align-items: center; }
.footer__nav a::after, .footer__col p a.ulink::after { bottom: 4px; }
.footer__nav a[aria-current="page"]::after { transform: scaleX(1); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--s-3); margin-top: var(--s-10); padding-top: var(--s-2); border-top: 1px solid var(--line-inv); color: var(--fg-3); }
.footer__bottom p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 44px; }
.footer__bottom .ulink { color: var(--fg-2); display: inline-flex; align-items: center; min-height: 44px; }
.footer__bottom .ulink::after { bottom: 12px; }
.footer__bottom .lang a { color: var(--fg-2); opacity: 1; }
.footer__bottom .lang a:not([aria-current]) { color: var(--fg-3); }
.credit a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; color: var(--kalk);
  text-decoration: underline; text-decoration-color: rgba(243, 241, 236, .35); text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) { .credit a:hover { text-decoration-color: var(--pan); } }
.credit a:focus-visible { text-decoration-color: var(--pan); }
@media (pointer: coarse) {
  .footer__col p a.ulink, .footer__nav a { min-height: 44px; }
  .footer__nav a::after, .footer__col p a.ulink::after { bottom: 10px; }
}
@media (min-width: 1024px) {
  /* basislijnen gelijk: rij 1 = kopjes, rij 2 = inhoud */
  .footer__cols { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; row-gap: var(--s-2); }
  .footer__col { grid-row: 1 / span 2; grid-template-rows: subgrid; gap: 0; }
  .footer__brand { grid-column: 1 / span 4; }
  .footer__col:nth-child(2) { grid-column: 5 / span 2; }
  .footer__col:nth-child(3) { grid-column: 7 / span 2; }
  .footer__col:nth-child(4) { grid-column: 9 / span 2; }
  .footer__col:nth-child(5) { grid-column: 11 / span 2; }
}

/* =========================================================
   TOAST (links naar pagina's van fase 2)
   ========================================================= */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 150; transform: translate(-50%, 16px);
  padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--kalk); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .hero__video { display: none; }
}