/*
 * Sectie 09: Contact & about (Egg, anker #contact).
 * Maten uit Figma (tree.txt 519-620). Kop, lead (Light 22, regels 31.9 uit elkaar, 840px), twee personen (524px, gap 56; portret 200x267
 * radius 22, gap 24, tekst 300px). Daaronder een bovenrand Chocolate 14% met 168px lucht, dan een grid 430 / 602 met
 * gap 72: links titel, tekst, knop en het vak voor de boekingskalender (#afspraak), rechts de formulierkaart (Zand,
 * radius 28, padding 40) met het Gravity Forms-formulier (thema gravity-theme, opmaak hieronder).
 * In Figma valt de footer 10px over de onderpadding (128), maar de footer is transparant: de crème loopt door, dus bottom_padding 128.
 */

.fm-s09 { color: var(--fm-chocolate); }

/* ---------- kop ---------- */

.fm-s09 .fm-s09-kop .fm-eyebrow { margin-bottom: 12.25px; }
.fm-s09 .fm-s09-kop h2.fm-h2 { font-weight: 300; }
/* Figma geeft lh 34.1 op, maar zet de regels in de tekening 31.9px uit elkaar (eerste basislijn 23.65): die tekening
   volgen we. Het tekstvak blijft in Figma 239px hoog, vandaar de grotere marge naar de personen. */
.fm-s09 .fm-s09-kop p.fm-s09-lead {
	max-width: 840px;
	margin-top: 24.1px;
	font-weight: 300;
	font-size: 22px;
	line-height: 31.9px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
}

/* ---------- binnenrijen: eigen grid i.p.v. Salients kolommen ---------- */

.fm-s09 .fm-s09-team,
.fm-s09 .fm-s09-contact { padding: 0; }
.fm-s09 .fm-s09-team > .row_col_wrap_12_inner,
.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner {
	display: grid;
	align-items: start;
	float: none;
	width: 100%;
	margin: 0;
}
.fm-s09 .fm-s09-team > .row_col_wrap_12_inner::before,
.fm-s09 .fm-s09-team > .row_col_wrap_12_inner::after,
.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner::before,
.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner::after { content: none; display: none; }
.fm-s09 .fm-s09-team > .row_col_wrap_12_inner > .wpb_column,
.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner > .wpb_column {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}
.fm-s09 .fm-s09-team .vc_column-inner,
.fm-s09 .fm-s09-contact .vc_column-inner { padding: 0; }

/* ---------- personen ---------- */

.fm-s09 .fm-s09-team { margin: 71.7px 0 64px; }   /* onderaan was 10.35 (ontwerp, 2 personen); de langste bio stond dan tegen de lijn (15-10) */
/* Sinds 15-10-2026 drie personen (Elise erbij): drie kolommen met gap 48, portret (200x267 zoals in Figma) boven naam en bio.
   In Figma stonden er twee naast elkaar met het portret links van de tekst; dat past niet meer in 1104px. */
.fm-s09 .fm-s09-team > .row_col_wrap_12_inner {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 48px;
}
.fm-s09 .fm-s09-team .wpb_wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 24px;
	align-items: start;
}
@media (min-width: 1000px) {
	.fm-s09 .fm-s09-team .img-with-aniamtion-wrap { max-width: 200px; }
}
.fm-s09 .fm-s09-team .img-with-aniamtion-wrap,
.fm-s09 .fm-s09-team .img-with-aniamtion-wrap .inner,
.fm-s09 .fm-s09-team .img-with-aniamtion-wrap .hover-wrap,
.fm-s09 .fm-s09-team .img-with-aniamtion-wrap .hover-wrap-inner { display: block; width: 100%; margin: 0; }
body .fm-s09 img.fm-s09-portret {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 22px;
	background: var(--fm-zand);
	margin: 0 !important;
}
.fm-s09 .fm-s09-bio h3.fm-s09-naam {
	margin-bottom: 10.7px;
	font-weight: 500;
	font-size: 22px;
	line-height: 36.3px;
	letter-spacing: 0;
}
.fm-s09 .fm-s09-bio p {
	font-size: 15px;
	line-height: 24.75px;
	color: var(--fm-choc-74);
}
.fm-s09 .fm-s09-bio p + p { margin-top: 10.9px; }
.fm-s09 .fm-s09-kop p.fm-s09-lead + p.fm-s09-lead { margin-top: 16px; }

/* ---------- contact: bovenrand, grid 430 / 602 ---------- */

.fm-s09 .fm-s09-contact {
	margin: 0;
	padding-top: 168px;
	border-top: 1px solid var(--fm-choc-14);
}
.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner {
	grid-template-columns: minmax(0, 430fr) minmax(0, 602fr);
	column-gap: 72px;
	row-gap: 56px;
}

/* links */
.fm-s09 .fm-s09-start h3.fm-s09-start-titel {
	margin-bottom: 11.3px;
	font-weight: 300;
	font-size: 30px;
	line-height: 37.5px;
	letter-spacing: -.3px;
}
.fm-s09 .fm-s09-start p.fm-s09-klein {
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-choc-74);
}
.fm-s09 .fm-s09-start p.fm-s09-klein:first-of-type { margin-bottom: 28.3px; }
.fm-s09 .fm-s09-start p.fm-s09-knop { margin-bottom: 12.25px; }
.fm-s09 .fm-s09-kalender {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	min-height: 233px;
	margin-top: 11.6px;
	padding: 98px 24px 24px;
	border: 1px dashed rgba(43, 26, 18, .3);
	border-radius: 20px;
	text-align: center;
}
.fm-s09 .fm-s09-kalender p {
	font-size: 14px;
	line-height: 23.1px;
	color: var(--fm-choc-55);
}

/* ---------- formulierkaart ---------- */

.fm-s09 .fm-s09-formulier {
	padding: 40px;
	border-radius: 28px;
	background: var(--fm-zand);
}
.fm-s09 .fm-s09-formulier h3.fm-s09-form-titel {
	max-width: 522px;
	margin-bottom: 15.2px;
	font-weight: 400;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -.2px;
}

/* Gravity Forms (gravity-theme): wrapper, raster en verborgen delen */
.fm-s09 .gform_wrapper.gravity-theme { margin: 0; padding: 0; }
.fm-s09 .gform_wrapper .gform_heading,
.fm-s09 .gform_wrapper .gform_validation_container { display: none !important; }
.fm-s09 .gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 15.2px;
	column-gap: 0;
}
.fm-s09 .gform_wrapper.gravity-theme .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
/* 'verplicht' blijft voor schermlezers, maar is niet zichtbaar (zoals in het ontwerp) */
.fm-s09 .gform_wrapper .gfield_label .gfield_required {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* labels en legend */
.fm-s09 .gform_wrapper.gravity-theme .gfield_label,
.fm-s09 .gform_wrapper.gravity-theme legend.gfield_label {
	display: block;
	margin: 0 0 6.75px;
	padding: 0;
	font-family: var(--fm-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 23.1px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
}

/* velden */
body .fm-s09 .gform_wrapper.gravity-theme input[type="text"],
body .fm-s09 .gform_wrapper.gravity-theme input[type="email"],
body .fm-s09 .gform_wrapper.gravity-theme input[type="tel"],
body .fm-s09 .gform_wrapper.gravity-theme select,
body .fm-s09 .gform_wrapper.gravity-theme textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--fm-rand-veld);
	border-radius: 12px;
	background-color: #fff;
	box-shadow: none;
	font-family: var(--fm-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 22.5px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
	transition: border-color .2s ease, box-shadow .2s ease;
}
body .fm-s09 .gform_wrapper.gravity-theme select {
	height: 51px;
	padding-right: 48px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('../../svg/chevron.svg');
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
	cursor: pointer;
}
/* GF zet .gfield textarea.large op 288px */
body .fm-s09 .gform_wrapper.gravity-theme .gfield textarea {
	height: 110px;
	min-height: 110px;
	padding: 12px 18px;
	resize: vertical;
}
body .fm-s09 .gform_wrapper.gravity-theme input:focus,
body .fm-s09 .gform_wrapper.gravity-theme select:focus,
body .fm-s09 .gform_wrapper.gravity-theme textarea:focus {
	outline: none;
	border-color: var(--fm-burnt);
	box-shadow: 0 0 0 3px rgba(215, 101, 37, .18);
}

/* keuzerondjes naast elkaar, Burnt als aangevinkt */
.fm-s09 .gform_wrapper.gravity-theme .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	column-gap: 24px;
	row-gap: 4px;
}
.fm-s09 .gform_wrapper.gravity-theme .gfield_radio .gchoice {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}
body .fm-s09 .gform_wrapper.gravity-theme .gfield_radio input[type="radio"] {
	flex: none;
	width: 13px;
	height: 13px;
	margin: 7px 11px 0 5px;
	accent-color: var(--fm-burnt);
	cursor: pointer;
}
.fm-s09 .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input + label.gform-field-label--type-inline {
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--fm-font);
	font-weight: 400;
	font-size: 15px;
	line-height: 24.75px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
	max-width: none;
	white-space: nowrap;
	cursor: pointer;
}
body .fm-s09 .gform_wrapper.gravity-theme .gfield_radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--fm-burnt);
	outline-offset: 2px;
}

/* knop Send message (stijl van .fm-knop, 51px hoog zoals in het ontwerp).
   Salient zet padding en radius van button[type=submit] met !important (style.css, skin-material.css). */
.fm-s09 .gform_wrapper.gravity-theme .gform_footer {
	display: block;
	margin: 22px 0 0;
	padding: 0;
}
body .fm-s09 .gform_wrapper.gravity-theme .gform_footer button.gform_button,
body .fm-s09 .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14.5px 26px 15px !important;
	border: 0;
	border-radius: 999px !important;
	background: var(--fm-burnt);
	box-shadow: none;
	color: var(--fm-egg);
	font-family: var(--fm-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 21.5px;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color .2s ease;
}
body .fm-s09 .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover { background: #c2571b; color: var(--fm-egg); }
body .fm-s09 .gform_wrapper.gravity-theme .gform_footer button.gform_button:focus-visible { outline: 2px solid var(--fm-chocolate); outline-offset: 3px; }

/* foutmeldingen en bevestiging */
.fm-s09 .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 15.2px;
	padding: 12px 16px;
	border: 1px solid var(--fm-burnt);
	border-radius: 12px;
	background: rgba(215, 101, 37, .08);
	box-shadow: none;
}
.fm-s09 .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	margin: 0;
	font-family: var(--fm-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 24.75px;
	color: #9a3d10;
}
.fm-s09 .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }
body .fm-s09 .gform_wrapper.gravity-theme .gfield_error input,
body .fm-s09 .gform_wrapper.gravity-theme .gfield_error select,
body .fm-s09 .gform_wrapper.gravity-theme .gfield_error textarea { border-color: var(--fm-burnt); }
.fm-s09 .gform_wrapper.gravity-theme .gfield_error .gfield_label { color: var(--fm-chocolate); }
.fm-s09 .gform_wrapper.gravity-theme .gfield_validation_message,
.fm-s09 .gform_wrapper.gravity-theme .validation_message {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 23.1px;
	color: #9a3d10;
}
.fm-s09 .gform_confirmation_message {
	font-size: 17px;
	line-height: 28px;
	color: var(--fm-chocolate);
}

/* ---------- tablet ---------- */

@media (max-width: 999px) {
	.fm-s09 .fm-s09-kop p.fm-s09-lead { margin-top: 20px; font-size: 20px; line-height: 31px; }
	.fm-s09 .fm-s09-team { margin: 48px 0 48px; }
	.fm-s09 .fm-s09-team > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
	.fm-s09 .fm-s09-team .wpb_wrapper { grid-template-columns: minmax(0, 200px) minmax(0, 420px); column-gap: 24px; }
	.fm-s09 .fm-s09-contact { margin-top: 64px; padding-top: 72px; }
	.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- gsm ---------- */

@media (max-width: 690px) {
	.fm-s09 .fm-s09-kop p.fm-s09-lead { font-size: 18px; line-height: 28.8px; }
	.fm-s09 .fm-s09-team { margin: 40px 0 40px; }
	/* de vaste breuk na "contact" (15-10) laat op gsm "contact" alleen op een regel staan: hier loopt de zin door */
	.fm-s09 .fm-s09-formulier h3.fm-s09-form-titel br { display: none; }
	.fm-s09 .fm-s09-team > .row_col_wrap_12_inner { row-gap: 40px; }
	.fm-s09 .fm-s09-team .wpb_wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	body .fm-s09 img.fm-s09-portret { width: 160px !important; border-radius: 20px; }
	.fm-s09 .fm-s09-contact { margin-top: 48px; padding-top: 56px; }
	.fm-s09 .fm-s09-contact > .row_col_wrap_12_inner { row-gap: 40px; }
	.fm-s09 .fm-s09-start h3.fm-s09-start-titel { font-size: 26px; line-height: 32.5px; }
	.fm-s09 .fm-s09-kalender { min-height: 180px; padding-top: 66px; }
	.fm-s09 .fm-s09-formulier { padding: 28px 20px; border-radius: 22px; }
	.fm-s09 .fm-s09-formulier h3.fm-s09-form-titel { font-size: 19px; line-height: 26px; }
}

/* raakvlak van de keuzerondjes op touchschermen (minstens 44px hoog) */
@media (max-width: 999px), (pointer: coarse) {
	.fm-s09 .gform_wrapper.gravity-theme .gfield_radio .gchoice { min-height: 44px; display: flex; align-items: center; }
	body .fm-s09 .gform_wrapper.gravity-theme .gfield_radio input[type="radio"] { width: 20px; height: 20px; margin: 0 10px 0 2px; }
	body .fm-s09 .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input + label.gform-field-label--type-inline { padding: 10px 0; }
}

/* placeholders in de velden (15-10, vraag Dario): lichter dan de ingevulde tekst, het label erboven blijft de echte naam */
body .fm-s09 .gform_wrapper.gravity-theme input::placeholder,
body .fm-s09 .gform_wrapper.gravity-theme textarea::placeholder { color: var(--fm-choc-55); opacity: 1; }