/* ==========================================================================
   WFL — Contact (contact.html) · brief §5.14 · scoped under body.page-contact
   ========================================================================== */
.page-contact .contact-hero__screen .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .5) 30%, rgba(7, 7, 10, 0) 60%), linear-gradient(to right, rgba(7, 7, 10, .7) 0%, rgba(7, 7, 10, 0) 50%), var(--vignet);
}
.page-contact .contact-hero__copy { gap: clamp(12px, 1.6vw, 20px); }
.page-contact .contact-hero__title { font-size: clamp(4rem, 13vw, 13rem); line-height: .8; }
.page-contact .contact-hero__serif { max-width: 26ch; }

.page-contact .contact-main { padding-top: clamp(var(--s-7), 6vw, var(--s-9)); padding-bottom: calc(var(--section-y) * .6); }
.page-contact .contact-grid { display: grid; gap: clamp(var(--s-8), 8vw, var(--s-9)); }
@media (max-width: 1023.98px) { .page-contact .contact-grid { row-gap: var(--s-8); } }
@media (min-width: 1024px) {
  .page-contact .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); row-gap: var(--s-8); align-items: start; }
}
.page-contact .contact-direct, .page-contact .contact-form { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.page-contact .contact-direct__h, .page-contact .contact-form .d2 { margin-bottom: var(--s-4); }

/* blocks set like credits: mono head, big display value */
.page-contact .cblocks { display: grid; border-top: 1px solid var(--touw); }
.page-contact .cblock { display: grid; gap: 10px; justify-items: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--touw); }
.page-contact .cblock__head { color: var(--rook); }
.page-contact .cblock__big {
  font: 900 clamp(1.5rem, 2.6vw, 2.25rem) / .95 var(--font-display); text-transform: uppercase; color: var(--bot);
  overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(var(--rood), var(--rood)) 0 100% / 0 2px no-repeat; padding-bottom: 4px;
  transition: background-size 400ms var(--ease-licht);
}
.page-contact .cblock__big:hover, .page-contact .cblock__big:focus-visible { background-size: 100% 2px; }
.page-contact .cblock__line { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1.3 var(--font-mono); letter-spacing: .04em; font-stretch: 87.5%; color: var(--bot); padding: 4px 0; }
.page-contact .cblock__line .icon { color: var(--rood-signaal); }
.page-contact .cblock__line:hover span { color: var(--wit); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blauw-signaal); }
/* onward links: the site's blue text link with → (no underlined small links, no second display value) */
.page-contact .cblock__more { margin-top: 2px; }
.page-contact .cblock__ph { font-size: 1.125rem; }

/* form panel on --doek */
.page-contact .contact-form__form, .page-contact .contact-form__success {
  padding: clamp(20px, 3.4vw, 48px); border-radius: var(--r-panel);
  background: var(--doek); box-shadow: inset 0 0 0 1px var(--touw);
}
.page-contact .contact-form__form { position: relative; isolation: isolate; overflow: hidden; }
.page-contact .contact-form__form::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--licht-blauw); mix-blend-mode: screen; opacity: .14; pointer-events: none; }
.page-contact .contact-form__form .field__input { background-color: var(--zaal); }
.page-contact .contact-form__privacy { max-width: 60ch; }
.page-contact .contact-form__success { padding-block: clamp(32px, 5vw, 64px); }
@media (max-width: 767.98px) { .page-contact .contact-form__form .btn--l { width: 100%; } }