/* Hero flexible-content block. */
.hero-block { --hero-accent: var(--fa-color-primary); --hero-visual-shift: 0px; --hero-card-shift: 0px; padding: 96px 0; background: var(--fa-color-surface); }
.hero-block--has-card { padding-bottom: 128px; }
.hero-block__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 96px; align-items: center; }
.hero-block__content { position: relative; z-index: 2; max-width: 36rem; }
.hero-block__eyebrow { margin: 0 0 1rem; color: var(--hero-accent); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-block__title { margin: 0; color: var(--fa-color-text); font-family: var(--fa-font-body); font-size: 64px; font-weight: 500; letter-spacing: -.035em; line-height: .99; text-shadow: 2px 2px 0 #fff; }
html[lang^="nl"] .hero-block__title { font-size: 58px; line-height: 1; }
.hero-block__title em { color: var(--hero-accent); font-style: normal; white-space: nowrap; text-decoration-line: line-through; text-decoration-thickness: .075em; text-decoration-color: currentColor; }
.hero-block__text { max-width: 31rem; margin-top: 1.5rem; font-size: 17px; line-height: 1.65; }
.hero-block__text > :first-child, .hero-block__card-text > :first-child { margin-top: 0; }
.hero-block__text > :last-child, .hero-block__card-text > :last-child { margin-bottom: 0; }
.hero-block__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-block__button { display: inline-flex; gap: .8rem; align-items: center; min-height: 3rem; padding: .3rem .35rem .3rem 1.15rem; color: var(--fa-color-surface); background: var(--hero-accent); border: 1px solid var(--hero-accent); border-radius: 999px; font-size: .95rem; font-weight: 600; text-decoration: none; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.hero-block__button:hover { color: var(--fa-color-surface); filter: brightness(.92); text-decoration: none; transform: translateY(-2px); }
.hero-block__button--secondary { color: var(--hero-accent); background: transparent; }
.hero-block__button--secondary .hero-block__arrow { color: var(--fa-color-surface); background: var(--hero-accent); }
.hero-block__button--secondary:hover { color: var(--hero-accent); border-color: var(--hero-accent); background: var(--fa-color-primary-very-light); }
.hero-block__arrow, .hero-block__card-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--hero-accent); background: var(--fa-color-surface); border-radius: 50%; text-decoration: none; }
.hero-block__arrow-icon { display: block; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("../../images/right-arrow.svg") center / contain no-repeat; mask: url("../../images/right-arrow.svg") center / contain no-repeat; transform: rotate(-45deg); transition: transform .25s ease; }
.hero-block__button:hover .hero-block__arrow-icon, .hero-block__card-link:hover .hero-block__arrow-icon { transform: rotate(0deg); }
.hero-block__visual { position: relative; min-height: 640px; transform: translate3d(var(--hero-visual-shift), 0, 0); will-change: transform; }
.hero-block__image-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 1.5rem 4rem rgba(32, 39, 45, .12); }
.hero-block__image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hero-block__image { object-position: center; }
.hero-block__card { position: absolute; right: 64px; bottom: -64px; left: 48px; z-index: 2; max-width: 31rem; padding: 1.55rem 1.75rem 1.75rem; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .25)); border: 1px solid rgba(255, 255, 255, .7); border-radius: 1.25rem; box-shadow: 0 1.5rem 3.75rem rgba(0, 38, 68, .2), inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); transform: translate3d(0, var(--hero-card-shift), 0); will-change: transform; }
.hero-block__card::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 18% 0, rgba(255, 255, 255, .82), transparent 48%), linear-gradient(115deg, rgba(255, 255, 255, .2), transparent 55%); opacity: .8; }
.hero-block__card > * { position: relative; z-index: 1; }
.hero-block__card-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.hero-block__card-title { margin: 0; font-family: var(--fa-font-body); font-size: 28px; font-weight: 600; line-height: 1.15; }
.hero-block__card-link { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; color: var(--hero-accent); background: transparent; border: 1px solid currentColor; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.hero-block__card-link:hover { color: var(--fa-color-surface); background: var(--hero-accent); text-decoration: none; transform: translateY(-2px); }
.hero-block__card-text { margin-top: .85rem; font-size: .95rem; line-height: 1.6; }
@media (max-width:900px) {
	.hero-block { padding-top: 3rem; }
	.hero-block__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.hero-block__content { max-width: 43rem; }
	.hero-block__visual { min-height: 520px; }
	html[lang^="nl"] .hero-block__title { font-size: 52px; }
}
@media (min-width:901px) {
	.hero-block__title { position: relative; z-index: 3; width: 720px; }
}
@media (max-width:600px) {
	.hero-block--has-card { padding-bottom: 6rem; }
	.hero-block__title { font-size: 44px; line-height: 1.02; }
	html[lang^="nl"] .hero-block__title { font-size: 38px; line-height: 1.03; }
	.hero-block__title em { white-space: normal; }
	.hero-block__actions { flex-direction: column; align-items: stretch; }
	.hero-block__button { justify-content: space-between; width: 100%; min-height: 52px; padding-left: 20px; }
	.hero-block__visual { min-height: 23rem; }
	.hero-block__card { right: .75rem; bottom: -3rem; left: .75rem; max-width: none; padding: 1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
	.hero-block__button, .hero-block__card-link { transition: none; }
	.hero-block__arrow-icon { transition: none; }
	.hero-block__visual, .hero-block__card { transform: none; will-change: auto; }
}