/* ==========================================================================
   "Wie ik ben" — de brief
   ========================================================================== */

.wieikben {
	position: relative;
}

.letter {
	width: calc(80% - 50px);
	position: relative;
	z-index: 3;
}
.letter h2 {
	font-family: var(--ms-font-display);
	font-size: 70px;
	line-height: 1;
	margin: 0 0 30px;
}
.letter p {
	font-size: 25px;
	line-height: 1.5;
	opacity: 0.85;
}
.letter p strong {
	font-weight: bold;
}

/* Scroll animatie — foto verplaatsen */
.callme { position: relative; }
.callme figure { flex-shrink: 0; }

.callme figure.is-animating {
	position: fixed;
	margin: 0;
	z-index: 100;
	transition: none;
	will-change: transform, width, height, top, left, border-radius;
}

.callme__content {
	transition: opacity 0.2s ease-out;
}

.callme.is-figure-detached:hover figure {
	transform: none;
}

.callme__status {
	transition: opacity 0.3s ease-out;
}

/* Foto-target rechts naast brief */
.letter-photo-target { width: 100%; }
.letter-photo-target__placeholder {
	width: 100%;
	height: 250px;
}
.letter-photo-target__caption {
	margin-top: 20px;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	text-align: left;
}
.letter-photo-target__caption.is-visible { opacity: 1; }

.letter-photo-target__caption__name {
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 10px;
}
.letter-photo-target__caption__phone {
	font-size: 20px;
	color: var(--ms-green);
	display: flex;
	align-items: center;
	gap: 5px;
}
.letter-photo-target__caption__phone svg {
	width: 10px;
	height: 10px;
}
.letter-photo-target__caption__phone svg path { fill: var(--ms-green); }

.letter-photo-target__trigger {
	width: 250px;
	position: absolute;
	top: 0;
	right: 132px;
	visibility: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
}
.letter-photo-target__trigger * { pointer-events: none; }
.letter-photo-target__trigger.is-positioned { visibility: visible; }

@media (max-width: 999px) {
	.letter-photo-target__trigger { display: none; }
}

@media (max-width: 768px) {
	.letter { width: 100%; }
	.letter h2 { font-size: 36px; margin: 0 0 20px; }
	.letter p { font-size: 17px; }
}