/* =============================================================================
   REIWA — subpagina's: Werk, Case en Contact
   Vertaling van de artboards "REIWA Werk/Case/Contact.dc.html". Laadt na reiwa.css.
   ========================================================================== */
.reiwa-h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-meta-tags--wrap { flex-wrap: wrap; overflow: visible; margin-top: 0; padding-top: 0; }

/* ------------------------------------------------------------- werkoverzicht */
/* De filterbalk volgt de lezer de lijst in, gedockt onder de sticky header. De lijnen lopen
   over de volle paginabreedte; de bovenlijn hoort bij de balk in de flow en vervalt zodra hij
   onder de header hangt (artboard). */
.reiwa-filter-sentinel { height: 1px; }
.reiwa-filter-bar {
  position: sticky; top: var(--header-height); z-index: 40;
  margin-top: var(--hero-gap); background: var(--surface-page);
  border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider);
  transition: border-top-color var(--motion-fast) var(--ease-standard);
}
.reiwa-filter-bar.is-stuck { border-top-color: transparent; }
.reiwa-filter-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-4); }
.reiwa-filter-bar__label, .reiwa-filter-bar__count { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-filter-bar__label { margin-right: var(--space-3); }
.reiwa-filter-bar__count { margin-left: auto; }
/* Filters zijn tags, geen knoppen: geen radius, een lichte grijze haarlijn in plaats van de
   inktlijn van een knop. Alleen de actieve tag vult, een stap naast de inkt. */
.reiwa-tag {
  appearance: none; background: none; border: 1px solid rgba(30, 30, 30, 0.14); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px var(--space-3);
  font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh);
  color: var(--body-ink); cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.reiwa-tag:hover { background: rgba(30, 30, 30, 0.05); border-color: rgba(30, 30, 30, 0.24); color: var(--text-primary); }
.reiwa-tag.is-active { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-on-ink); }
.reiwa-tag.is-active:hover { background: var(--reiwa-ink-hover); border-color: var(--reiwa-ink-hover); }
.reiwa-work-row[hidden] { display: none; }
.reiwa-work__intro { margin-top: var(--hero-gap); }
/* Elke case is een omlijnde, volledig klikbare kaart (design 16-09): beeld 7/12 naast tekst 5/12,
   vaste verhouding 12/5 zodat alle kaarten even hoog zijn; de kanten wisselen per rij. */
.reiwa-work-row { margin-top: clamp(40px, 4vw, 64px); }
.reiwa-work-card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch;
  aspect-ratio: 12 / 5; overflow: hidden;
  border: 1px solid var(--border-divider); text-decoration: none; color: inherit;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.reiwa-work-card:hover, .reiwa-work-card:focus-visible { border-color: var(--border-primary); }
.reiwa-work-card__media { display: block; grid-column: 1; grid-row: 1; width: 100%; min-width: 0; height: 100%; overflow: hidden; }
.reiwa-work-card__img { display: block; width: 100%; height: 100%; background: var(--reiwa-ink) center / cover no-repeat; transition: transform var(--motion-slow) var(--ease-standard); }
.reiwa-work-card:hover .reiwa-work-card__img { transform: scale(1.04); }
.reiwa-work-card__text { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: stretch; padding: var(--space-7); min-width: 0; }
.reiwa-work-card__copy { display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 auto; min-width: 0; justify-content: center; align-items: flex-start; }
.reiwa-work-card__client { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--type-eponym-size); line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-ink); }
.reiwa-work-card__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-work-card__teaser { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }
.reiwa-work-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); }
.reiwa-work-card:hover .reiwa-work-card__cta { color: var(--reiwa-gold-deep); }
.reiwa-work-card .reiwa-case__chevron { display: flex; transition: transform var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-work-card .reiwa-case__chevron .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.reiwa-work-card:hover .reiwa-case__chevron { transform: translateX(3px); color: var(--reiwa-gold-deep); }
.reiwa-work-card.reiwa-work-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.reiwa-work-card.reiwa-work-row--flip .reiwa-work-card__media { grid-column: 2; }
.reiwa-work-card.reiwa-work-row--flip .reiwa-work-card__text { grid-column: 1; }
@media (max-width: 1024px) {
  .reiwa-work-card { aspect-ratio: auto; }
  .reiwa-work-card__media { aspect-ratio: 16 / 9; height: auto; }
  .reiwa-work-card__text { padding: var(--space-6); }
}
@media (max-width: 768px) {
  .reiwa-work-card, .reiwa-work-card.reiwa-work-row--flip { grid-template-columns: minmax(0, 1fr); }
  .reiwa-work-card__media, .reiwa-work-card.reiwa-work-row--flip .reiwa-work-card__media { grid-column: 1; grid-row: 1; }
  .reiwa-work-card__text, .reiwa-work-card.reiwa-work-row--flip .reiwa-work-card__text { grid-column: 1; grid-row: 2; padding: var(--space-5); }
}
/* Paginering: dezelfde vierkante knoppen als de filtertags, met twee pijlknoppen ernaast; de
   paginaduiding hangt rechts zonder de centrering te verschuiven. Alleen bij >1 pagina. */
.reiwa-pager-section { margin-top: var(--space-8); }
.reiwa-pager-section[hidden] { display: none; }
.reiwa-pager { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.reiwa-pager__nums { display: contents; }
.reiwa-pager__num, .reiwa-pager__step {
  appearance: none; background: none; cursor: pointer; border: 1px solid rgba(30, 30, 30, 0.14); border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding-inline: var(--space-3);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink);
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.reiwa-pager__step .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.reiwa-pager__num:hover, .reiwa-pager__step:hover:not([disabled]) { background: rgba(30, 30, 30, 0.05); border-color: rgba(30, 30, 30, 0.24); color: var(--text-primary); }
.reiwa-pager__num.is-active { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-on-ink); }
.reiwa-pager__num.is-active:hover { background: var(--reiwa-ink-hover); border-color: var(--reiwa-ink-hover); }
.reiwa-pager__step[disabled] { opacity: 0.35; cursor: default; }
.reiwa-pager__label { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
@media (max-width: 640px) { .reiwa-pager__label { position: static; transform: none; width: 100%; text-align: center; } }

/* ------------------------------------------------------------------ case */
.reiwa-case-hero { position: relative; width: 100%; aspect-ratio: 1920 / 800; max-height: 70vh; min-height: 220px; }
.reiwa-case-hero__img { display: block; width: 100%; height: 100%; background: var(--reiwa-ink) center / cover no-repeat; }
.reiwa-case-titles { margin-top: var(--space-6); row-gap: var(--space-8); }
/* Terugverwijzing boven de titel (design 16-09): linkstijl als elders, pijl schuift naar links bij hover. */
.reiwa-case-back-section { margin-top: var(--space-9); }
.reiwa-case-back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); transition: color var(--motion-fast) var(--ease-standard); }
.reiwa-case-back:hover, .reiwa-case-back:focus-visible { color: var(--reiwa-gold-deep); }
.reiwa-case-back__arrow { display: flex; transition: transform var(--motion-base) var(--ease-standard); }
.reiwa-case-back__arrow .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-case-back:hover .reiwa-case-back__arrow { transform: translateX(-3px); }
/* Leesmaten (design 16-09): Het inzicht en De uitwerking volledig op 20px; bij Onze aanpak alleen de openingsalinea. */
.reiwa-case-body--lead20 p, .reiwa-case-lead-para { font-size: 20px !important; line-height: 1.6 !important; }
/* Resultaatcijfers naast de uitwerking: gouden display-cijfers, gecentreerd in een zachte gouden gloed. */
.reiwa-stats { align-self: center; display: flex; flex-direction: column; gap: var(--space-7); align-items: center; text-align: center; padding: var(--space-8) var(--space-6); background-image: radial-gradient(42% 58% at 50% 50%, rgba(187, 139, 0, 0.22) 0%, rgba(187, 139, 0, 0.09) 44%, rgba(250, 248, 242, 0) 74%); }
.reiwa-stat { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.reiwa-stat__value { font-family: var(--font-display); font-size: var(--type-hero-size); line-height: 1; color: var(--reiwa-gold-deep); }
.reiwa-stat__label { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }
.reiwa-case-body { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.reiwa-case-body p { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-case-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); color: var(--text-primary); margin: 0 0 var(--space-4); text-wrap: pretty; }
.reiwa-case-titles .reiwa-case-body p, .reiwa-case-body--lead p, .reiwa-case-lead, .reiwa-case-pull { font-size: var(--type-h5-size) !important; line-height: var(--type-h5-lh) !important; }
.reiwa-case-pull strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.reiwa-facts-col { grid-row: 1; }
.reiwa-facts { border: 1px solid rgba(30, 30, 30, 0.14); padding-inline: var(--space-5); }
.reiwa-facts > div { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-4); }
.reiwa-facts > div + div { border-top: 1px solid rgba(30, 30, 30, 0.14); }
/* Het label in de feitenkaart houdt de 12px van het eyebrow (artboard: 16 + 22 + 12 + 4 + waarde + 16). */
.reiwa-fact-wordmark { font-family: var(--font-display); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-fact-logo { display: block; height: 72px; width: 100%; max-width: 260px; align-self: flex-start; margin-block: var(--space-3); background-repeat: no-repeat; background-position: left center; background-size: contain; }
.reiwa-fact-logo--klein { height: 48px; max-width: 150px; }
.reiwa-fact-line { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }
.reiwa-case-gallery-section { margin-top: var(--section-gap); row-gap: var(--space-6); }
.reiwa-case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.reiwa-case-gallery__shot { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--reiwa-ink) center / cover no-repeat; }
.reiwa-case-section { margin-top: var(--section-gap); row-gap: var(--space-7); --media-h: clamp(320px, 34vw, 540px); }
.reiwa-case-section--center { align-items: center; }
.reiwa-case-section__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-case-shot { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--reiwa-ink) center / cover no-repeat; }
.reiwa-case-body--gap { padding-inline-start: var(--space-7); }
.reiwa-case-body--gap-end { padding-inline-end: var(--space-7); }
.reiwa-media-col { display: flex; flex-direction: column; gap: var(--space-3); }
.reiwa-media-cell { display: block; width: 100%; height: var(--media-h); overflow: hidden; background: var(--reiwa-ink) center / cover no-repeat; }
.reiwa-case-media { row-gap: var(--space-5); }
.reiwa-case-media .reiwa-video-caption { text-align: center; }
.reiwa-video-caption { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-phone { position: relative; height: var(--media-h); aspect-ratio: 1058 / 1890; margin-inline: auto; }
.reiwa-phone__device { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("../assets/reiwa/mockups/iphone-frame.webp") center / contain no-repeat; }
.reiwa-phone__screen { position: absolute; left: 13.14%; top: 4.18%; width: 73.53%; height: 84.97%; z-index: 1; border-radius: 5% / 3%; }
.reiwa-case-video { position: relative; overflow: hidden; background: var(--surface-inverse); }
.reiwa-case-video video { position: absolute; top: 0; left: 50%; transform: translateX(-48.7%); width: 175%; height: 100%; object-fit: cover; }
.reiwa-case-video__play { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--reiwa-gold-lighter); color: var(--text-primary); border: none; cursor: pointer; z-index: 3; transition: background var(--motion-fast) var(--ease-standard); }
.reiwa-case-video__play:hover { background: var(--reiwa-gold-deep); color: var(--surface-page); }
.reiwa-case-video__play .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; }
/* Quote naast de uitwerking: links uitgelijnd, gouden gloed om het tekstblok. */
.reiwa-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); border: none; padding-block: var(--space-8); }
.reiwa-quote--inline { position: relative; align-items: flex-start; text-align: left; align-self: center; justify-content: center; padding-inline: var(--space-7); }
.reiwa-quote--inline::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: -22% -18%; background-image: radial-gradient(52% 56% at 46% 48%, rgba(187, 139, 0, 0.26) 0%, rgba(187, 139, 0, 0.10) 44%, rgba(250, 248, 242, 0) 74%); }
.reiwa-quote--inline > * { position: relative; z-index: 1; }
.reiwa-quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--reiwa-ink); text-wrap: pretty; }
.reiwa-quote blockquote::before { content: "\201C"; }
.reiwa-quote blockquote::after { content: "\201D"; }
.reiwa-quote figcaption { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.reiwa-quote-name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); }
.reiwa-quote-role { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); }
/* Het resultaat */
.reiwa-case-result { row-gap: var(--space-9); }
.reiwa-case-result__head { display: flex; flex-direction: column; gap: var(--space-5); }
.reiwa-case-result__head .reiwa-eyebrow { margin-bottom: calc(var(--space-5) * -1 + 4px); }
.reiwa-result-intro { font-family: var(--font-display); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-outcomes { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-divider); }
.reiwa-outcome { position: relative; display: flex; align-items: baseline; gap: var(--space-6); border-top: 1px solid transparent; padding-block: var(--space-5); padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1); transition: background var(--motion-fast) var(--ease-standard); }
.reiwa-outcome::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border-divider); transform-origin: left center; transition: transform 400ms var(--ease-standard); transition-delay: var(--reveal-delay, 0ms); }
.reiwa-outcome.reiwa-reveal:not(.is-visible)::before { transform: scaleX(0); }
.reiwa-outcome:hover { background: var(--hover-wash); }
.reiwa-outcome__n { flex: 0 0 auto; min-width: 2.4ch; font-family: var(--font-display); font-size: var(--type-h4-size); line-height: 1; color: var(--reiwa-slate-blue); }
.reiwa-outcome__text { display: block; font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-delivered { display: flex; flex-direction: column; gap: var(--space-6); }
.reiwa-deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.reiwa-deliver-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: 1px solid var(--border-divider); padding: var(--space-6); min-height: 148px; text-align: left; }
.reiwa-deliver-card__text { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-deliver-card__text strong { font-weight: var(--fw-semibold); color: var(--text-primary); }
.reiwa-deliver-card--link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard); }
.reiwa-deliver-card--link:hover, .reiwa-deliver-card--link:focus-visible { border-color: var(--border-ink); color: inherit; }
.reiwa-deliver-card__arrow { flex: 0 0 auto; display: flex; align-self: center; color: var(--body-ink); transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-deliver-card__arrow .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-deliver-card--link:hover .reiwa-deliver-card__arrow { transform: translate(2px, -2px); }
@media (max-width: 1024px) {
  .reiwa-case-section > *, .reiwa-case-titles > * { grid-column: 1 / -1 !important; }
  .reiwa-facts-col { grid-row: auto; }
  .reiwa-case-section { row-gap: var(--space-8); --media-h: min(78vw, 560px); }
  .reiwa-outcomes { gap: var(--space-5); }
  .reiwa-case-body--gap { padding-inline-start: 0; }
  .reiwa-case-body--gap-end { padding-inline-end: 0; }
  .reiwa-quote--inline { padding-inline: 0; }
  .reiwa-case-hero { aspect-ratio: 3 / 2; }
  .reiwa-case-titles { margin-top: var(--space-8); }
  .reiwa-deliver-card { min-height: 96px; padding: var(--space-5); }
}
@media (max-width: 768px) {
  .reiwa-case-hero { aspect-ratio: 4 / 5; max-height: 68vh; }
  .reiwa-case-titles { margin-top: var(--space-6); }
  .reiwa-case-shot, .reiwa-media-cell, .reiwa-case-gallery__shot { width: 100% !important; height: var(--media-h, 320px) !important; aspect-ratio: auto !important; }
  .reiwa-phone { width: min(100%, 340px); height: auto; aspect-ratio: 1058 / 1890; }
}
@media (max-width: 640px) { .reiwa-deliver-card { min-height: 0; padding: var(--space-4); } }
@media (max-width: 480px) { .reiwa-case-gallery { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- contact */
.reiwa-contact-section { margin-top: var(--hero-gap); row-gap: var(--space-9); }
.reiwa-contact-section__intro { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.reiwa-contact-lines { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-divider); }
.reiwa-contact-lines li { border-top: 1px solid var(--border-divider); padding-block: var(--space-4); }
.reiwa-contact-lines a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-display); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); }
.reiwa-contact-lines a:hover { color: var(--reiwa-gold-deep); }
.reiwa-line-arrow { display: flex; flex: 0 0 auto; transition: transform var(--motion-base) var(--ease-standard); }
.reiwa-line-arrow .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.reiwa-contact-lines a:hover .reiwa-line-arrow, .reiwa-contact-lines a:focus-visible .reiwa-line-arrow { transform: translateX(3px); }
.reiwa-form-panel { border: 1px solid var(--border-divider); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.reiwa-form-panel--sent { gap: var(--space-5); align-items: flex-start; }
.reiwa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.reiwa-field { display: flex; flex-direction: column; gap: var(--space-2); }
.reiwa-field > label { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); font-weight: var(--fw-regular); color: var(--text-primary); }
.reiwa-field > label .reiwa-optional { color: var(--body-ink); font-weight: var(--fw-regular); }
.reiwa-field input, .reiwa-field textarea, .reiwa-field select {
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); background: var(--reiwa-white);
  border: 1px solid var(--border-divider); border-radius: 0; padding: 12px var(--space-4); width: 100%; height: 48px;
  transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.reiwa-field textarea { height: auto; min-height: 144px; resize: vertical; }
.reiwa-field select { padding-right: 44px; appearance: none; -webkit-appearance: none; }
.reiwa-select { position: relative; display: block; }
.reiwa-select__caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--text-primary); }
.reiwa-select__caret .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-field input::placeholder, .reiwa-field textarea::placeholder { color: rgba(30, 30, 30, 0.4); }
.reiwa-field input:hover, .reiwa-field textarea:hover, .reiwa-field select:hover { border-color: rgba(30, 30, 30, 0.38); }
.reiwa-field input:focus-visible, .reiwa-field textarea:focus-visible, .reiwa-field select:focus-visible { border-color: var(--border-primary); outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; }
.reiwa-field input:user-invalid, .reiwa-field textarea:user-invalid, .reiwa-field .input-validation-error { border-color: var(--reiwa-rose); }
.reiwa-field .reiwa-hint, .reiwa-field .field-validation-error { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-field .field-validation-error { color: var(--reiwa-rose); }
.reiwa-consent { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-consent input { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; }
.reiwa-check { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--reiwa-white); border: 1px solid var(--border-divider); color: transparent; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-check .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; }
.reiwa-consent:hover .reiwa-check { border-color: rgba(30, 30, 30, 0.38); }
.reiwa-consent input:checked + .reiwa-check { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--reiwa-parchment); }
.reiwa-consent input:focus-visible + .reiwa-check { outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; }
.reiwa-consent a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.reiwa-form-actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.reiwa-form-actions__note { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
@media (max-width: 560px) {
  .reiwa-form-panel { padding: var(--space-6); }
  .reiwa-form-grid { grid-template-columns: minmax(0, 1fr); }
  .reiwa-form-actions .reiwa-btn { width: 100%; }
}
/* Vestigingen */
.reiwa-offices-section { margin-top: var(--section-gap); row-gap: var(--space-7); }
.reiwa-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.reiwa-office-card { border: 1px solid rgba(30, 30, 30, 0.14); padding: var(--space-5); font-style: normal; display: flex; flex-direction: column; gap: var(--space-2); }
.reiwa-office-card__city { font-family: var(--font-display); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); }
.reiwa-office-card__line { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); }
.reiwa-office-card__tel { color: inherit; }
.reiwa-office-card__tel:hover { color: var(--reiwa-gold-deep); }
.reiwa-office-route { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); }
.reiwa-office-route:hover, .reiwa-office-route:focus-visible { color: var(--reiwa-gold-deep); }
.reiwa-office-route__arrow { display: flex; transition: transform var(--motion-base) var(--ease-standard); }
.reiwa-office-route__arrow .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-office-route:hover .reiwa-office-route__arrow { transform: translateX(3px); }
@media (max-width: 768px) { .reiwa-offices { grid-template-columns: minmax(0, 1fr); } }
/* Formulierpaneel (EvolveCMS.Forms, thema "reiwa") */
.reiwa-form-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.reiwa-form-legend { font-family: var(--font-display); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); margin-bottom: var(--space-4); }
.reiwa-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.reiwa-form-fields > .reiwa-field { grid-column: 1 / -1; }
.reiwa-form-fields > .reiwa-field.reiwa-half { grid-column: auto; }
.reiwa-field--consent { display: block; }
.reiwa-form-actions { margin-top: 0; }
.validation-summary-errors { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--reiwa-rose); }
.validation-summary-errors ul { margin: 0; padding-left: 1.25em; }
@media (max-width: 560px) { .reiwa-form-fields > .reiwa-field.reiwa-half { grid-column: 1 / -1; } }
/* Lege validatie-spans van ASP.NET tellen niet mee in de kolomafstand; de textarea houdt de vaste hoogte uit het artboard. */
.reiwa-field .field-validation-valid { display: none; }
.reiwa-field .field-validation-error { display: block; }
.reiwa-field textarea { height: 144px; }

/* ------------------------------------------------------------- over reiwa */
.reiwa-about { margin-top: var(--hero-gap); row-gap: var(--space-8); }
.reiwa-about__head { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
/* Illustratie als achtergrond met multiply op het crème (zelfde truc als het gouacheblob: een
   eigen mix-blend-mode zou door de reveal-transform in een stacking context vallen). */
.reiwa-about__art { width: 100%; aspect-ratio: 896 / 900; max-height: 320px; background-color: var(--surface-page); background-repeat: no-repeat; background-position: left center; background-size: contain; background-blend-mode: multiply; }
.reiwa-about__body { display: flex; flex-direction: column; gap: var(--space-5); }
.reiwa-list-row__text { display: flex; flex-direction: column; gap: var(--space-2); }
.reiwa-list-row__title { font-family: var(--font-display); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); }
.reiwa-list-row__body { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }

/* reCAPTCHA v3: badge verborgen; de verplichte kennisgeving staat onder de verzendknop. */
.grecaptcha-badge { visibility: hidden; }
.reiwa-form-recaptcha-note { margin: 0; font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); opacity: 0.8; }
.reiwa-form-recaptcha-note a { color: inherit; text-decoration: underline; }
.reiwa-form-error { margin: var(--space-3) 0 0 0; font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: #9C2A2A; }
.reiwa-form-error.field-validation-valid { display: none; }
.reiwa-form-panel { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }

/* --------------------------------------------------------- volgende case */
.reiwa-next-section { margin-top: var(--section-gap); row-gap: var(--space-6); }
.reiwa-next-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; border: 1px solid var(--border-divider); overflow: hidden; color: inherit; transition: border-color var(--motion-fast) var(--ease-standard); }
.reiwa-next-card:hover, .reiwa-next-card:focus-visible { border-color: var(--border-primary); }
.reiwa-next-card__media { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.reiwa-next-card__img { display: block; width: 100%; height: 100%; background: var(--reiwa-ink) center / cover no-repeat; transition: transform var(--motion-slow) var(--ease-standard); }
.reiwa-next-card:hover .reiwa-next-card__img { transform: scale(1.04); }
.reiwa-next-card__body { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-5); padding: var(--space-7); }
.reiwa-next-card__copy { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.reiwa-next-card__client { font-family: var(--font-body); font-weight: var(--fw-regular); text-transform: uppercase; font-size: var(--type-eponym-size); line-height: 1.6; letter-spacing: 0.1em; color: var(--body-ink); }
.reiwa-next-card__title { font-family: var(--font-display); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-next-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-6); }
.reiwa-next-card__chevron { display: flex; flex: 0 0 auto; align-self: center; color: var(--text-primary); transition: transform var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-next-card__chevron .material-symbols-outlined { font-size: 28px; width: 28px; height: 28px; }
.reiwa-next-card:hover .reiwa-next-card__chevron { transform: translateX(3px); color: var(--reiwa-gold-deep); }
@media (max-width: 1024px) {
  .reiwa-next-card { grid-template-columns: 1fr; }
  .reiwa-next-card__body { padding: var(--space-5); }
}

/* ------------------------------------------- tekstpagina's (privacy e.d.) */
/* Een tekstsectie met tussenkoppen (h2/h3 in de RTE) is een leesartikel: bredere kolom, koppen
   met lucht erboven, lijsten met ruimte tussen de regels. Korte teksten houden de 48ch-kolom. */
.reiwa-text-section--long { margin-top: var(--section-gap); }
.reiwa-text-section--long .reiwa-text-section__inner { gap: var(--space-7); }
.reiwa-text-section--long .reiwa-text-section__text { max-width: 68ch; }
.reiwa-text-section--long .reiwa-text-section__text > p:first-child { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
.reiwa-text-section__text h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); margin: var(--space-10, 64px) 0 0 0; padding-top: var(--space-6); border-top: 1px solid var(--border-divider); text-wrap: pretty; }
.reiwa-text-section__text h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); margin: var(--space-7) 0 0 0; }
.reiwa-text-section__text h2 + p, .reiwa-text-section__text h2 + ul { margin-top: var(--space-4); }
.reiwa-text-section__text h3 + p, .reiwa-text-section__text h3 + ul { margin-top: var(--space-3); }
.reiwa-text-section__text ul, .reiwa-text-section__text ol { padding-left: 1.25em; margin: 24px 0 0 0; }
.reiwa-text-section__text li + li { margin-top: var(--space-3); }
.reiwa-text-section__text li::marker { color: var(--reiwa-gold-deep); }
.reiwa-text-section__text p + ul, .reiwa-text-section__text ul + p { margin-top: var(--space-4); }
.reiwa-text-section__text a:not(.reiwa-link) { color: var(--reiwa-gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Cookiebanner (eigen component; Views/Shared/Reiwa/_CookieConsent.cshtml) */
.reiwa-footer-link--button { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; text-align: left; }
.reiwa-cookies { position: fixed; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); z-index: 70; display: flex; justify-content: flex-start; pointer-events: none; }
.reiwa-cookies[hidden] { display: none; }
.reiwa-cookies__card {
  pointer-events: auto; width: min(100%, 560px); max-height: calc(100vh - var(--space-12)); overflow: auto;
  background: var(--reiwa-canvas); color: var(--text-primary); border: 1px solid var(--border-primary);
  box-shadow: 0 24px 48px -24px rgba(30, 30, 30, 0.35); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
  animation: reiwa-cookies-in var(--motion-slow) var(--ease-standard) both;
}
@keyframes reiwa-cookies-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reiwa-cookies__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.reiwa-cookies__close { background: none; border: none; padding: 0; margin: -4px -4px 0 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer; }
.reiwa-cookies__close[hidden] { display: none; }
.reiwa-cookies__close:hover, .reiwa-cookies__close:focus-visible { background: var(--surface-ghost-hover); }
.reiwa-cookies__close .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-cookies__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--text-primary); }
.reiwa-cookies__text { margin: 0; font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-cookies__text a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.reiwa-cookies__text a:hover { color: var(--reiwa-gold-deep); }
.reiwa-cookies__prefs { display: flex; flex-direction: column; border-top: 1px solid var(--border-divider); }
.reiwa-cookies__prefs[hidden] { display: none; }
.reiwa-cookies__cat { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-divider); cursor: pointer; }
.reiwa-cookies__cat-body { display: flex; flex-direction: column; gap: var(--space-1); }
.reiwa-cookies__cat-title { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.reiwa-cookies__cat-always { font-weight: var(--fw-regular); font-size: 0.75rem; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--body-ink); border: 1px solid var(--border-divider); padding: 1px 6px; }
.reiwa-cookies__cat-text { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); }
.reiwa-switch { position: relative; flex: 0 0 auto; width: 44px; height: 24px; }
.reiwa-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.reiwa-switch input:disabled { cursor: default; }
.reiwa-switch__track { position: absolute; inset: 0; background: var(--reiwa-white); border: 1px solid var(--border-divider); border-radius: 999px; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.reiwa-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--reiwa-ink); opacity: 0.4; transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
.reiwa-switch input:checked + .reiwa-switch__track { background: var(--surface-inverse); border-color: var(--surface-inverse); }
.reiwa-switch input:checked + .reiwa-switch__track .reiwa-switch__knob { transform: translateX(20px); opacity: 1; background: var(--reiwa-parchment); }
.reiwa-switch input:disabled + .reiwa-switch__track { opacity: 0.55; }
.reiwa-switch input:focus-visible + .reiwa-switch__track { outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; }
.reiwa-cookies__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.reiwa-cookies__actions .reiwa-btn[hidden] { display: none; }
.reiwa-cookies__more { background: none; border: none; padding: 0 var(--space-2); margin-left: auto; height: var(--control-height-sm); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-sm-size); line-height: var(--type-label-sm-lh); color: var(--text-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.reiwa-cookies__more:hover, .reiwa-cookies__more:focus-visible { color: var(--reiwa-gold-deep); }
@media (max-width: 560px) {
  .reiwa-cookies { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .reiwa-cookies__card { padding: var(--space-5); }
  .reiwa-cookies__actions .reiwa-btn { width: 100%; }
  .reiwa-cookies__more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .reiwa-cookies__card { animation: none; } }

/* 404-pagina (artboard REIWA 404): omlijnd kader in het midden, daaronder de meest bezochte pagina's. */
.reiwa-notfound { margin-top: var(--space-6); }
.reiwa-notfound__box { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; border: 1px solid rgba(30, 30, 30, 0.14); padding: var(--space-7); }
.reiwa-notfound__box .reiwa-body { text-wrap: pretty; }
.reiwa-notfound__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.reiwa-eyebrow--italic { font-family: var(--font-display); font-style: italic; font-size: var(--type-eyebrow-size); line-height: 1.6; letter-spacing: 0.06em; text-transform: none; color: var(--text-primary); }
.reiwa-notfound-links { margin-top: var(--section-gap); margin-bottom: var(--section-gap); row-gap: var(--space-6); }
.reiwa-notfound-links__head { display: flex; justify-content: center; text-align: center; }
.reiwa-notfound-links__list { max-width: 640px; margin-inline: auto; }
@media (max-width: 768px) {
  .reiwa-notfound__box { grid-column: 1 / -1; padding: var(--space-6); }
}

/* ============================================================ Vacatures (design 16-09) */
/* Overzicht: elke rol één omlijnd, vierkant vlak dat in zijn geheel aanklikbaar is. Eén grid
   in plaats van een stapel, zodat elke kaart de hoogte van de langste krijgt. */
.reiwa-vacancies { margin-top: var(--space-8); }
.reiwa-vacancies__intro { margin-bottom: var(--space-8); }
.reiwa-vac-cards { display: grid; grid-auto-rows: 1fr; gap: var(--space-5); }
.reiwa-vac-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-7); row-gap: var(--space-5); align-items: center;
  padding: var(--space-6); border: 1px solid rgba(30, 30, 30, 0.14); border-radius: 0;
  background: var(--surface-page); color: var(--text-primary); text-decoration: none;
  transition: border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.reiwa-vac-card[hidden] { display: none; }
.reiwa-vac-card:hover, .reiwa-vac-card:focus-visible { border-color: var(--border-primary); }
.reiwa-vac-card__text { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.reiwa-vac-card__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-vac-card__teaser { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }
.reiwa-vac-card__meta { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-end; text-align: right; }
.reiwa-vac-card__hours { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--type-eponym-size); line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-ink); }
.reiwa-vac-card__meta .reiwa-meta-tags { width: auto; margin-top: 0; padding-top: 0; flex-wrap: wrap; overflow: visible; justify-content: flex-end; }
/* Eén pijl als affordance, precies zoals op de casekaarten: 3px opschuiven en goud bij hover. */
.reiwa-vac-card__chevron { display: flex; color: var(--text-primary); transition: transform var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-vac-card__chevron .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.reiwa-vac-card:hover .reiwa-vac-card__chevron, .reiwa-vac-card:focus-visible .reiwa-vac-card__chevron { transform: translateX(3px); color: var(--reiwa-gold-deep); }
@media (max-width: 768px) {
  .reiwa-vac-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); row-gap: var(--space-4); }
  .reiwa-vac-card__meta { align-items: flex-start; text-align: left; order: -1; }
  .reiwa-vac-card__meta .reiwa-meta-tags { justify-content: flex-start; }
  .reiwa-vac-card__chevron { align-self: flex-start; }
}

/* Detailpagina: terugverwijzing boven de hero, feitenkaart rechts naast de aanzet, de
   vacaturetekst eronder over de volle breedte (twee secties naast elkaar). */
.reiwa-vac-back-section { padding-top: var(--space-9); margin-bottom: calc(var(--space-7) * -1); }
.reiwa-vac-back-wrap { display: flex; justify-content: center; }
.reiwa-vac-back, .reiwa-vac-jump { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
.reiwa-vac-back:hover, .reiwa-vac-jump:hover { color: var(--reiwa-gold-deep); }
.reiwa-vac-back__arrow, .reiwa-vac-jump__arrow { display: flex; transition: transform var(--motion-base) var(--ease-standard); }
.reiwa-vac-back__arrow .material-symbols-outlined, .reiwa-vac-jump__arrow .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-vac-back:hover .reiwa-vac-back__arrow { transform: translateX(-3px); }
.reiwa-vac-jump:hover .reiwa-vac-jump__arrow { transform: translateY(3px); }
.reiwa-vac-main { margin-top: 64px; row-gap: 72px; }
.reiwa-vac-intro-col { grid-column: 1 / span 7; grid-row: 1; }
.reiwa-vac-aside-col { grid-column: 9 / span 4; grid-row: 1; }
.reiwa-vac-body-col { grid-column: 1 / span 12; grid-row: 2; }
.reiwa-vac-aside {
  position: sticky; top: calc(var(--header-height) + var(--space-9)); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start;
  border: 1px solid rgba(30, 30, 30, 0.14); border-radius: 0; padding: var(--space-2) var(--space-5) var(--space-5); background: var(--surface-page);
}
.reiwa-vac-aside dl { margin: 0; display: flex; flex-direction: column; width: 100%; }
.reiwa-vac-aside dl > div { padding-block: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.reiwa-vac-aside dl > div + div { border-top: 1px solid rgba(30, 30, 30, 0.14); }
.reiwa-vac-aside dd { margin: 0; font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; }
/* Ritme: blokken onder elkaar ruimer dan de kolommen naast elkaar, dichter dan de sprong vanaf de intro. */
.reiwa-vac-body { display: flex; flex-direction: column; gap: 72px; }
.reiwa-vac-section { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.reiwa-vac-section h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-vac-section h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--text-primary); margin: 0; }
.reiwa-vac-section p { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-vac-section p strong { color: var(--text-primary); }
/* De aanzet leest als een aanzet, niet als lopende tekst: één regel per gedachte, een stap groter. */
.reiwa-vac-open__kop { font-family: var(--font-display); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-vac-open p { font-size: 20px; line-height: 1.6; }
/* Opsomming als de lijst op de homepage: vouwlijnen, display-letter op 16px, klein vierkant als
   opsommingsteken en een hover-wash die tot in de rijmarge doorloopt. */
.reiwa-vac-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-divider); }
.reiwa-vac-list li { display: flex; gap: var(--space-4); align-items: flex-start; border-top: 1px solid var(--border-divider); padding: var(--space-4); margin-inline: calc(var(--space-4) * -1); font-family: var(--font-display); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); text-wrap: pretty; transition: background var(--motion-fast) var(--ease-standard); }
.reiwa-vac-list li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: calc((var(--type-body-lh) - 6px) / 2); background: rgba(30, 30, 30, 0.3); }
.reiwa-vac-list li:hover { background: var(--hover-wash); }
/* Opsomming tussen alinea's: geen vouwlijnen, geen hover, alleen bullets. */
.reiwa-vac-list--inline { border-bottom: none; gap: var(--space-2); }
.reiwa-vac-list--inline li { border-top: none; padding: 0; margin-inline: 0; font-family: var(--font-body); }
.reiwa-vac-list--inline li:hover { background: none; }
.reiwa-vac-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--space-9); align-items: start; width: 100%; }
.reiwa-vac-split { width: 100%; }
.reiwa-vac-split__content { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; width: 100%; }
/* Wat bieden wij: elk punt een omlijnde kaart, twee per rij; niet klikbaar, dus alleen een wash bij hover. */
.reiwa-vac-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); width: 100%; }
.reiwa-vac-offer { border: 1px solid rgba(30, 30, 30, 0.14); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); transition: background var(--motion-base) var(--ease-standard); }
.reiwa-vac-offer:hover { background: var(--hover-wash); }
/* Uitnodiging op inkt: één gecentreerd blok, cream op zwart. */
.reiwa-vac-note { width: 100%; background: var(--surface-inverse); color: var(--text-on-ink); padding: var(--space-9) var(--space-7); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); letter-spacing: var(--tracking-on-ink); }
.reiwa-vac-note__kop { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-on-ink); margin: 0; text-wrap: pretty; }
.reiwa-vac-note__tekst { display: flex; flex-direction: column; gap: var(--space-4); max-width: 60ch; }
.reiwa-vac-note__tekst p { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-on-ink); margin: 0; text-wrap: pretty; }
/* Solliciteren: links de kop, tekst en contactregels, rechts het formulier. */
.reiwa-vac-apply { margin-top: var(--section-gap); row-gap: var(--space-9); scroll-margin-top: var(--header-height); }
.reiwa-vac-apply__intro { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.reiwa-vac-apply__intro .reiwa-contact-lines { width: 100%; }
.reiwa-vac-apply__note { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-offices-col { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 1024px) {
  .reiwa-vac-aside { position: static; }
  .reiwa-vac-intro-col { grid-column: 1 / span 4; }
  .reiwa-vac-aside-col { grid-column: 5 / span 2; }
  .reiwa-vac-body-col { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .reiwa-vac-main { margin-top: var(--space-9); row-gap: var(--space-10); }
  .reiwa-vac-intro-col, .reiwa-vac-aside-col, .reiwa-vac-body-col { grid-column: 1 / -1; grid-row: auto; }
  .reiwa-vac-body { gap: var(--space-10); }
  .reiwa-vac-duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .reiwa-vac-note { padding: var(--space-7) var(--space-5); }
}
@media (max-width: 640px) { .reiwa-vac-offers { grid-template-columns: minmax(0, 1fr); } }

/* Bestandsveld (sollicitatieformulier): de browserknop draagt Engelse tekst die we niet kunnen
   zetten; het echte veld is onzichtbaar, knop en bestandsnaam tonen we zelf. */
.reiwa-field .reiwa-file { position: relative; display: flex; align-items: center; gap: var(--space-4); height: 48px; padding: 0 var(--space-4) 0 8px; border: 1px solid var(--border-divider); background: var(--reiwa-white); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard); }
.reiwa-field .reiwa-file:hover { border-color: rgba(30, 30, 30, 0.38); }
.reiwa-field .reiwa-file:focus-within { border-color: var(--border-primary); outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; }
.reiwa-field .reiwa-file.is-invalid, .reiwa-field .reiwa-file:has(input:user-invalid) { border-color: var(--reiwa-rose); }
.reiwa-field .reiwa-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.reiwa-field .reiwa-file__btn { flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border-ink); background: none; font-family: var(--font-body); font-size: var(--type-body-sm-size); color: var(--text-primary); transition: background var(--motion-fast) var(--ease-standard); }
.reiwa-field .reiwa-file:hover .reiwa-file__btn { background: rgba(30, 30, 30, 0.06); }
.reiwa-field .reiwa-file__naam { font-family: var(--font-body); font-size: var(--type-body-size); color: var(--text-muted, var(--body-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Vooraf gevuld en alleen-lezen (de rol op een vacaturepagina). */
.reiwa-field .reiwa-input--readonly { background: rgba(30, 30, 30, 0.04); color: var(--body-ink); cursor: default; }
.reiwa-field .reiwa-input--readonly:hover { border-color: var(--border-divider); }

/* Motion-test (designer, 16-09): de reikende handen bewegen naar elkaar toe en tussen de
   vingertoppen ontstaat kort een gouden gloed. Twee kopieën van dezelfde illustratie, elk met een
   clip-path op één hand; multiply op het crème zoals het stilstaande beeld. Zet het veld "Beeld in
   beweging" op het blok Over ons uit om terug te vallen op het stilstaande beeld. */
.reiwa-about__art--motion { position: relative; aspect-ratio: 1311 / 800; max-height: none; overflow: hidden; isolation: isolate; background-image: none; }
.reiwa-hands__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; mix-blend-mode: multiply; will-change: transform; }
.reiwa-hands__layer--left { clip-path: polygon(0 0, 56% 0, 53% 27%, 48.5% 44%, 48.4% 64%, 45% 83%, 42% 100%, 0 100%); animation: reiwa-reach-left 9s infinite; }
.reiwa-hands__layer--right { clip-path: polygon(56% 0, 100% 0, 100% 100%, 42% 100%, 45% 83%, 48.4% 64%, 48.5% 44%, 53% 27%); animation: reiwa-reach-right 9s infinite; }
.reiwa-hands__flare { position: absolute; left: 48%; top: 59.5%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; mix-blend-mode: multiply; background: radial-gradient(ellipse, #d8ac3466 0%, #ddb74630 26%, #ddbc5010 49%, transparent 70%); animation: reiwa-glow 9s infinite; }
.reiwa-hands__flare::before, .reiwa-hands__flare::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, #fff8d6 0%, #e7bd49 24%, #d5a51b55 48%, transparent 73%); }
.reiwa-hands__flare::before { width: 42%; height: 5%; filter: blur(1px); }
.reiwa-hands__flare::after { width: 5%; height: 29%; filter: blur(1.5px); }
@keyframes reiwa-reach-left { 0%, 12%, 100% { transform: translate(-2.2%, .7%) rotate(-.4deg); } 42%, 59% { transform: translate(.55%, -1.35%) rotate(0deg); } 82% { transform: translate(-2.2%, .7%) rotate(-.4deg); } }
@keyframes reiwa-reach-right { 0%, 12%, 100% { transform: translate(2.2%, -.7%) rotate(.4deg); } 42%, 59% { transform: translate(-.55%, 1.35%) rotate(0deg); } 82% { transform: translate(2.2%, -.7%) rotate(.4deg); } }
@keyframes reiwa-glow { 0%, 35%, 76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.65); } 45% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 55% { opacity: .5; transform: translate(-50%, -50%) scale(1.12); } 66% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
/* Eén keer afspelen: de lus start pas als het beeld in beeld komt (reiwa.js zet is-playing) en
   blijft daarna op het laatste frame staan. */
.reiwa-hands__layer, .reiwa-hands__flare { animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.reiwa-about__art--motion.is-playing .reiwa-hands__layer, .reiwa-about__art--motion.is-playing .reiwa-hands__flare { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .reiwa-hands__layer, .reiwa-hands__flare { animation: none; } .reiwa-hands__flare { opacity: .25; } }

/* ============================================= Promopagina (artboard "REIWA Promo landing") */
/* Eén tekstkolom van 720px, geen navigatie: deze pagina heeft maar één uitgang. */
/* De lander is korter dan een gemiddeld scherm. Zonder dit staat alles bovenaan met een gat
   eronder; nu hangt het geheel in het midden. Is de inhoud toch hoger dan het scherm (kleine
   telefoon, grote letters), dan scrollt de pagina gewoon. */
.reiwa-page:has(.reiwa-promo) {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
.reiwa-promo {
  /* 720px tekst met de paginamarge ernaast (in het artboard staat de kolom in het grid, hier
     staat hij los); de titel leest hier een maat kleiner dan de hero op de site. Sinds de kop een
     hele zin is (18-09) nog een maat kleiner: op 4rem liep hij over drie regels met "ziet." alleen
     op de laatste. */
  --type-hero-size: clamp(2.25rem, 4.6vw, 3.25rem);
  width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto;
  padding-block: clamp(32px, 4vw, 56px) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-11);
}
/* Woordmerk opent de pagina, gecentreerd boven de titel. */
.reiwa-promo__logo { display: block; height: 28px; width: auto; max-width: 100%; align-self: center; margin-bottom: clamp(28px, 4vw, 44px); }
.reiwa-promo__head { display: flex; flex-direction: column; align-items: center; }
.reiwa-promo h1 {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: var(--type-hero-size); line-height: 1.1; text-align: center;
  color: var(--text-primary); margin: 0;
  /* balance in plaats van pretty: bij een kop van een hele zin verdeelt dat de regels gelijk,
     zodat er geen los woord op de laatste regel achterblijft. */
  text-wrap: balance;
}
.reiwa-promo p { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-promo p strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.reiwa-promo p.reiwa-promo__lead { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
/* Alles op de lander staat gecentreerd. Het artboard had hier een links uitgelijnd tekstblok,
   maar dat hoorde bij de lange lopende copy van toen; de tekst van Catelijne (18-09) bestaat
   uit korte strofen en stond links uitgelijnd scheef onder de gecentreerde kop. */
.reiwa-promo__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); text-align: center; }
.reiwa-promo__body > p { max-width: 46ch; }
/* De kern van het verhaal staat in een omlijnd kader in plaats van tussen twee lijnen. */
.reiwa-promo__frame {
  border: 1px solid rgba(30, 30, 30, 0.14); border-radius: 0;
  padding: var(--space-7); margin-block: var(--space-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  align-self: stretch;
}
.reiwa-promo p.reiwa-promo__quote { font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); }
/* De slotzin leidt de knop in: gecentreerd, en dicht op de actie. */
.reiwa-promo__close { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.reiwa-promo__close p { text-align: center; max-width: 52ch; font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
/* Eén knop, primair goud zoals elders op de site. */
.reiwa-promo__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  align-self: center; min-height: 48px; padding-inline: var(--space-6);
  background: var(--reiwa-gold-light); color: var(--reiwa-ink);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size);
  text-decoration: none; border-radius: 0;
  transition: background var(--motion-fast) var(--ease-standard);
}
.reiwa-promo__cta:hover { background: var(--reiwa-gold-lighter); color: var(--reiwa-ink); }
.reiwa-promo__cta:active { transform: translateY(1px); }
.reiwa-promo__cta-arrow { display: inline-flex; transition: transform var(--motion-fast) var(--ease-standard); }
.reiwa-promo__cta-arrow .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.reiwa-promo__cta:hover .reiwa-promo__cta-arrow { transform: translateX(3px); }
/* Slot: de plaatsen en het mailadres, klein onder de knop. */
.reiwa-promo-foot {
  width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto;
  padding-block: var(--space-7) clamp(48px, 8vw, 96px);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center;
}
.reiwa-promo-foot__offices {
  width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink);
}
.reiwa-promo-foot a { color: var(--body-ink); text-decoration: none; }
.reiwa-promo-foot a:hover { color: var(--reiwa-gold-deep); text-decoration: underline; }
/* Vaste balk onderaan: alleen op een telefoon. Daar verdwijnt de knop uit de tekstkolom. */
.reiwa-promo__bar { display: none; }
@media (max-width: 768px) {
  .reiwa-promo__cta-inline { display: none; }
  .reiwa-page:has(.reiwa-promo) { padding-bottom: 104px; }
  .reiwa-promo__bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-page); border-top: 1px solid var(--border-divider);
  }
  .reiwa-promo__bar .reiwa-promo__cta { width: 100%; align-self: stretch; }
}
@media print { .reiwa-promo__bar { display: none; } }