.lotarch-contact {
	background: var( --lotarch-bg-primary );
	color: var( --lotarch-fg-primary );
}

.lotarch-contact__container {
	display: grid;
	/* Herordering per 2025-09: formulier LINKS (7fr) en trust-blok RECHTS
	   (5fr) in row 1; werkwijze LINKS en adres+kaart RECHTS in row 2.
	   Formulier krijgt meer breedte omdat de inputs anders krap worden. */
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	column-gap: clamp( 2rem, 5vw, 5rem );
	row-gap: clamp( 3rem, 7vw, 6rem );
	/* Zelfde max-width als vd-hero/vd-row op andere pagina's — zo staat
	   de titel op EXACT dezelfde x-positie als op verduurzamen. */
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	/* Zelfde top-offset als alle andere page-titles → uniforme y-positie. */
	padding: var( --lotarch-page-title-top ) clamp( 1.5rem, 4vw, 3rem ) clamp( 3rem, 6vw, 5rem );
	align-items: start;
}

/* Als [contact] binnen .lot-editorial-content staat (default editorial
   template), regelt de parent al de horizontale padding + max-width.
   Zonder deze override krijgen de contact-rijen dubbele padding en
   staan ze zichtbaar verder naar rechts dan de page-title erboven. */
.lot-editorial-content .lotarch-contact__container {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/* Idem voor het losse [contactformulier] shortcode op editorial pagina's. */
.lot-editorial-content .lotarch-form-section {
	padding-left: 0;
	padding-right: 0;
}

.lot-editorial-content .lotarch-form-section__inner {
	max-width: none;
}

.lotarch-contact__info {
	font-family: var( --lotarch-font-sans );
}

/* Title/subtitle sizing komt uit de gedeelde .lotarch-page-title en
   .lotarch-page-subtitle blokken hieronder. */

/* Intro: body-tekst, staat 'subtitle→intro' afstand onder de subtitel. */
.lotarch-contact__intro {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #333;
	margin: var( --lotarch-subtitle-intro-gap ) 0 2rem;
}

.lotarch-contact__details {
	margin: 0 0 2rem;
	padding: 0;
}

.lotarch-contact__detail {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid rgba( 26, 26, 26, 0.1 );
}

/* ============================================================
   [contact_gegevens] — combined contactgegevens-blok
   Compacte lijst, geen borders tussen rijen. Blok neemt alleen
   z'n natuurlijke hoogte, wordt niet verticaal uitgerekt naast
   het formulier (dat mag hoger blijven).
   ============================================================ */

.lotarch-contact-gegevens {
	/* --- Tweakbare spacing (via [contact_gegevens row_gap="0.5rem"
	       padding="1.75rem"] etc). Beide kunnen per shortcode of via CSS
	       overschreven worden. --- */
	--gegevens-row-gap: 0.65rem;
	--gegevens-padding: clamp( 1.35rem, 2.5vw, 1.75rem );

	font-family: var( --lotarch-font-sans );
	min-width: 0;
	position: relative;

	/* Premium kader — warme off-white bg-tint (past bij de --lotarch-bg-primary
	   creamy palette), zeer subtiele hairline border, sharp corners voor
	   editorial gevoel (geen "app-card" feel), gelaagde soft shadow voor
	   diepte, en een inset light-rim voor die extra premium touch. Padding
	   is UNIFORM alle vier kanten — combineer met first/last row padding-0
	   zodat de afstand kader-top→eerste-regel exact gelijk is aan de
	   afstand laatste-regel→kader-bottom. */
	background: rgba( 253, 250, 244, 0.85 );
	border: 1px solid rgba( 26, 26, 26, 0.16 );
	border-radius: 2px;
	padding: var( --gegevens-padding );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.7 ),
		0 1px 2px rgba( 26, 26, 26, 0.04 ),
		0 20px 50px rgba( 26, 26, 26, 0.07 );

	/* Blok neemt niet de volle kolom — max-width + margin auto centreert
	   'm horizontaal binnen z'n parent (dus in de linker helft van een
	   [vd_split ratio="1/1" align="center"]). */
	max-width: 30rem;
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
}

/* Elegante corner-accenten: dunne serif-achtige lijnen in de tegenoverliggende
   hoeken. Subtiel editorial detail dat het kader van "gewoon boxje" naar
   "designed piece" tilt. */
.lotarch-contact-gegevens::before,
.lotarch-contact-gegevens::after {
	content: "";
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	pointer-events: none;
}

.lotarch-contact-gegevens::before {
	top: -1px;
	left: -1px;
	border-top: 1px solid var( --lotarch-fg-primary );
	border-left: 1px solid var( --lotarch-fg-primary );
}

.lotarch-contact-gegevens::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 1px solid var( --lotarch-fg-primary );
	border-right: 1px solid var( --lotarch-fg-primary );
}

/* Logo bovenaan het kaartje — visitekaartje-stijl. Gecentreerd,
   met margin-bottom die de rest van de content ademruimte geeft. */
.lotarch-contact-gegevens__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 1.25rem;
}

.lotarch-contact-gegevens__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.lotarch-contact-gegevens__title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: var( --lotarch-fg-primary );
}

/* LinkedIn row: klikbare tekst + icoontje ernaast. Inline-flex zodat het
   SVG icoon rechts van de tekst uitgelijnd blijft, met een klein gap. */
.lotarch-contact-gegevens__linkedin-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.lotarch-contact-gegevens__linkedin-icon {
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.lotarch-contact-gegevens__linkedin-link:hover .lotarch-contact-gegevens__linkedin-icon {
	opacity: 1;
}

/* Socials-rij onderaan het kaartje. LinkedIn icoontje (en toekomstig meer)
   gecentreerd, subtiele hover-opacity zoals bij andere links. */
.lotarch-contact-gegevens__socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0 0;
}

.lotarch-contact-gegevens__social {
	color: var( --lotarch-fg-primary );
	opacity: 0.6;
	transition: opacity 0.2s ease, transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.lotarch-contact-gegevens__social:hover {
	opacity: 1;
	transform: translateY( -1px );
}

.lotarch-contact-gegevens__social svg {
	display: block;
}

.lotarch-contact-gegevens__intro {
	font-family: var( --lotarch-font-sans );
	font-size: 1.05rem;
	line-height: 1.6;
	color: #444;
	margin: 0 0 2.5rem;
	max-width: 32rem;
}

.lotarch-contact-gegevens__list {
	margin: 0;
	padding: 0;
}

.lotarch-contact-gegevens__row {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1.25rem;
	padding: var( --gegevens-row-gap ) 0;
	align-items: baseline;
}

.lotarch-contact-gegevens__row:first-child {
	padding-top: 0;
}

.lotarch-contact-gegevens__row:last-child {
	padding-bottom: 0;
}

.lotarch-contact-gegevens__row dt {
	font-family: var( --lotarch-font-sans );
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #888;
	margin: 0;
	line-height: 1.5;
}

.lotarch-contact-gegevens__row dd {
	font-family: var( --lotarch-font-sans );
	font-size: 1.2rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	margin: 0;
	font-weight: 400;
}

.lotarch-contact-gegevens__row dd strong {
	font-weight: 500;
}

.lotarch-contact-gegevens__row dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: rgba( 26, 26, 26, 0.3 );
	transition: text-decoration-color 0.2s ease;
}

.lotarch-contact-gegevens__row dd a:hover {
	text-decoration-color: var( --lotarch-fg-primary );
}

@media ( max-width: 600px ) {
	.lotarch-contact-gegevens__row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
		padding: 1.25rem 0;
	}
	.lotarch-contact-gegevens__row dd {
		font-size: 1.1rem;
	}
}

/* ============================================================
   [contact_werkwijze] — PREMIUM FLOW
   Verticale timeline met circle-markers verbonden door een
   dunne guide-line. Serif nummering, gulle whitespace, subtiele
   hover-lift op elke stap. Bedoeld om klanten door het proces
   te leiden op een editorial manier.
   ============================================================ */

.lotarch-flow {
	font-family: var( --lotarch-font-sans );
	color: var( --lotarch-fg-primary );
	/* Ademruimte boven+onder zodat de flow visueel niet plakt aan
	   voorgaande/volgende blokken (gegevens, formulier, etc). */
	margin: clamp( 2.5rem, 5vw, 4rem ) 0;
}

.lotarch-flow__title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-flow__intro {
	font-size: 1rem;
	line-height: 1.6;
	color: #555;
	margin: 0 0 2.5rem;
	max-width: 42rem;
}

.lotarch-flow__list {
	--flow-gap: clamp( 1.5rem, 3vw, 3rem );
	--flow-count: 3;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-inline-start: 0 !important;
	position: relative;
	counter-reset: none;
	display: flex;
	flex-direction: row;
	gap: var( --flow-gap );
	align-items: stretch;
}

/* Horizontale connecting line: van CENTER van eerste marker naar CENTER
   van laatste marker. Zit achter de markers via z-index — markers hebben
   opaque bg en breken 'm visueel zoals bij een railway-map. Lijn steekt
   NIET buiten de eerste/laatste marker uit, dus het "01"-rondje staat
   helemaal aan de linkerkant (uitgelijnd met titel) en het laatste rondje
   helemaal aan de rechterkant. */
.lotarch-flow__list::before {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	top: 1.5rem;
	height: 1px;
	background: rgba( 26, 26, 26, 0.25 );
	z-index: 0;
	pointer-events: none;
}

.lotarch-flow__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	list-style: none !important;
	margin: 0 !important;
	position: relative;
	text-align: left;
}

.lotarch-flow__step::before {
	content: none !important;
}

/* Eerste stap: marker + tekst LINKS uitgelijnd (default). Marker staat op
   x=0, tekst begint daaronder — samen uitgelijnd met "Hoe werken wij" titel. */
.lotarch-flow__step:first-child {
	align-items: flex-start;
	text-align: left;
}

/* Middelste stap(pen): marker + tekst gecentreerd binnen hun kolom voor
   een symmetrische flow (01 links, 02 midden, 03 rechts). */
.lotarch-flow__step:not( :first-child ):not( :last-child ) {
	align-items: center;
	text-align: center;
}

/* Laatste stap: marker + tekst RECHTS uitgelijnd. Marker's rechter-rand
   ligt tegen de rechter-marge, tekst eronder rechts uitgelijnd zodat 'ie
   met z'n rechter-kant tegen dezelfde marge grenst. */
.lotarch-flow__step:last-child {
	align-items: flex-end;
	text-align: right;
}

/* Circle marker: dubbele ring (buiten hairline, binnen gevuld) geeft
   een editorial 'ge-stempeld' gevoel. Achtergrond dekt de guide-line af. */
.lotarch-flow__marker {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var( --lotarch-bg-primary );
	border: 1px solid rgba( 26, 26, 26, 0.4 );
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	margin-bottom: 1.5rem;
	transition: transform 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
	            border-color 0.35s ease,
	            box-shadow 0.35s ease;
}

.lotarch-flow__marker::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	border: 1px solid rgba( 26, 26, 26, 0.12 );
	pointer-events: none;
	transition: border-color 0.35s ease, background 0.35s ease;
}

/* Hover-state: alleen border + inner ring + shadow oranje. Achtergrond
   BLIJFT var(--lotarch-bg-primary) opaque zodat de horizontale timeline-
   lijn die achter de circle langs loopt netjes gemaskt blijft. Een
   rgba background-tint zou de lijn er ineens doorheen laten schemeren,
   wat visueel storend is. */
.lotarch-flow__step:hover .lotarch-flow__marker {
	transform: scale( 1.08 );
	border-color: #FD9606;
	box-shadow: 0 6px 20px rgba( 253, 150, 6, 0.28 );
}

.lotarch-flow__step:hover .lotarch-flow__marker::before {
	border-color: rgba( 253, 150, 6, 0.5 );
}

.lotarch-flow__num {
	font-family: var( --lotarch-font-serif );
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var( --lotarch-fg-primary );
	font-variation-settings: 'opsz' 12;
	position: relative;
	z-index: 2;
}

.lotarch-flow__body {
	min-width: 0;
	width: 100%;
}

.lotarch-flow__step-title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.15rem, 1.75vw, 1.4rem );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-flow__desc {
	font-family: var( --lotarch-font-sans );
	font-size: 0.975rem;
	line-height: 1.65;
	color: #444;
	margin: 0;
}

/* Mobile fallback: horizontale flow wordt te krap onder ~780px viewport.
   Klap naar verticale stack; connecting line draait mee (verticaal, links
   door het midden van de markers). */
@media ( max-width: 780px ) {
	.lotarch-flow__list {
		flex-direction: column;
	}
	/* Override desktop per-step alignment (first=left, mid=center, last=right)
	   — op mobiel klappen alle stappen naar links-uitgelijnde rows. */
	.lotarch-flow__step,
	.lotarch-flow__step:first-child,
	.lotarch-flow__step:not( :first-child ):not( :last-child ),
	.lotarch-flow__step:last-child {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: clamp( 1rem, 3vw, 1.5rem );
		padding-bottom: clamp( 1.5rem, 4vw, 2rem );
	}
	.lotarch-flow__step:last-child {
		padding-bottom: 0;
	}
	.lotarch-flow__marker {
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.lotarch-flow__body {
		width: auto;
		flex: 1;
	}
	/* Verticale line: van marker 1 center tot marker N center (via ::before
	   op de list — die stond horizontaal op desktop, nu verticaal). */
	.lotarch-flow__list::before {
		left: 1.5rem;
		right: auto;
		top: 1.5rem;
		bottom: 1.5rem;
		width: 1px;
		height: auto;
	}
}

/* ============================================================
   Losse single-line contact-shortcodes ([contact_adres] etc)
   ============================================================ */

/* Losse contact-shortcodes: [contact_adres], [contact_email], [contact_telefoon],
   [contact_openingstijden], [contact_kvk]. Elke row is standalone met eigen
   top+bottom border zodat 'ie ook los in een [vd_kolom] of tussen andere content
   werkt. Bij directe siblings dubbele borders vermijden via adjacent-sibling. */
.lotarch-contact-row {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid rgba( 26, 26, 26, 0.1 );
	border-bottom: 1px solid rgba( 26, 26, 26, 0.1 );
	font-family: var( --lotarch-font-sans );
}

.lotarch-contact-row + .lotarch-contact-row {
	border-top: 0;
	margin-top: -1px;
}

.lotarch-contact-row__label {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin: 0;
	line-height: 1.5;
}

.lotarch-contact-row__value {
	font-size: 1rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	margin: 0;
}

.lotarch-contact-row__value a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba( 26, 26, 26, 0.3 );
	transition: text-decoration-color 0.2s ease;
}

.lotarch-contact-row__value a:hover {
	text-decoration-color: var( --lotarch-fg-primary );
}

@media ( max-width: 600px ) {
	.lotarch-contact-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

.lotarch-contact__detail:last-child {
	border-bottom: 1px solid rgba( 26, 26, 26, 0.1 );
}

.lotarch-contact__detail dt {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin: 0;
	line-height: 1.5;
}

.lotarch-contact__detail dd {
	font-size: 1rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	margin: 0;
}

.lotarch-contact__detail dd a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba( 26, 26, 26, 0.3 );
	transition: text-decoration-color 0.2s ease;
}

.lotarch-contact__detail dd a:hover {
	text-decoration-color: var( --lotarch-fg-primary );
}

.lotarch-contact__maplink {
	font-family: var( --lotarch-font-serif );
	font-size: 1rem;
	color: var( --lotarch-fg-primary );
	text-decoration: none;
	border-bottom: 1px solid rgba( 26, 26, 26, 0.3 );
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.lotarch-contact__maplink:hover {
	border-color: var( --lotarch-fg-primary );
}

/* Map canvas + wrapper */
.lotarch-contact__map-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: rgba( 0, 0, 0, 0.05 );
	overflow: hidden;
	/* Nieuwe stacking context zodat Leaflet's z-index 1000 controls
	   (zoom, attribution) niet buiten deze map-wrap lekken en over de
	   site-header komen. Zie projecten.css .lotarch-projecten__map-full
	   voor achtergrond. */
	isolation: isolate;
	z-index: 0;
}

.lotarch-contact__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lotarch-contact__map .leaflet-container {
	background: var( --lotarch-bg-primary );
	font-family: var( --lotarch-font-sans );
}

/* Standalone map (via [lotarch_kaart] shortcode). Overschrijft het
   absolute-inset positioning zodat de kaart z'n eigen hoogte (via inline
   style op de shortcode-output) volgt en niet in een aspect-ratio
   wrapper zit. */
.lotarch-map-standalone {
	position: relative;
	width: 100%;
	background: rgba( 0, 0, 0, 0.05 );
	overflow: hidden;
	/* Nieuwe stacking context tegen z-index-lekkage van Leaflet controls
	   (default z-index 1000) over de site-header heen. */
	isolation: isolate;
	z-index: 0;
}

.lotarch-map-standalone .lotarch-map,
.lotarch-map-standalone .lotarch-contact__map {
	position: relative;
	inset: auto;
	width: 100%;
	/* height komt uit inline style op de shortcode-output */
}

.lotarch-map-standalone .leaflet-container {
	background: var( --lotarch-bg-primary );
	font-family: var( --lotarch-font-sans );
}

/* Custom map marker: pulse + ring + dot in fg-primary color. */

.lotarch-marker-wrap { pointer-events: auto; }

.lotarch-marker {
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
}

/* LOTarchitectuur kantoor-marker — orange bullseye (pulse + ring + dot).
   Voorheen zwart (--lotarch-fg-primary), nu #FD9606 zodat het kantoor-
   pin visueel opvalt tussen de zwarte particulier/zakelijk projectpinnen
   op de kaart. Matcht ook de rest van het site-accent (nav, CTA, streep,
   modal knoppen). */
.lotarch-marker__pulse {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	margin-top: -18px;
	border-radius: 50%;
	background: #FD9606;
	opacity: 0.35;
	animation: lotarch-marker-pulse 2s ease-out infinite;
}

.lotarch-marker__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
	border-radius: 50%;
	border: 1.5px solid #FD9606;
	background: transparent;
}

.lotarch-marker__dot {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	margin-top: -5px;
	border-radius: 50%;
	background: #FD9606;
}

@keyframes lotarch-marker-pulse {
	0%   { transform: scale( 0.6 ); opacity: 0.4; }
	80%  { transform: scale( 1.4 ); opacity: 0; }
	100% { transform: scale( 1.4 ); opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.lotarch-marker__pulse { animation: none; }
}

.lotarch-popup .leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper {
	background: var( --lotarch-bg-primary );
	color: var( --lotarch-fg-primary );
	font-family: var( --lotarch-font-sans );
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.1 );
}

.leaflet-popup-content {
	margin: 12px 16px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.leaflet-popup-tip {
	background: var( --lotarch-bg-primary );
}

/* Hover-tooltip op de marker.
   Zonder logo: donkere pill met Fraunces "LOTarchitectuur" tekst.
   Met logo (WordPress Site Logo of shortcode-override): licht rondje met
   het logo binnenin, transparante randen. */
.leaflet-tooltip.lotarch-marker-tooltip {
	background: var( --lotarch-fg-primary );
	color: var( --lotarch-bg-primary );
	border: 0 !important;
	border-radius: 6px;
	padding: 0.5rem 0.95rem;
	font-family: var( --lotarch-font-serif );
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
}

.leaflet-tooltip.lotarch-marker-tooltip::before {
	border-top-color: var( --lotarch-fg-primary ) !important;
}

/* Logo-variant: witte pill met logo, geen dark bg (logo bepaalt kleur zelf). */
.leaflet-tooltip.lotarch-marker-tooltip--logo {
	background: #ffffff;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
}

.leaflet-tooltip.lotarch-marker-tooltip--logo::before {
	border-top-color: #ffffff !important;
}

.lotarch-marker-label {
	font-family: var( --lotarch-font-serif );
	color: inherit;
}

.lotarch-marker-logo {
	display: block;
	max-height: 44px;
	max-width: 180px;
	width: auto;
	height: auto;
}

/* --- Project pins: smaller dots for past LOTarchitectuur projects. --- */

.lotarch-project-marker-wrap {
	pointer-events: auto;
}

/* Klikbare project-pin: pointer-cursor + iets sterker hover-effect voor
   visuele affordance. Wordt gezet door de shortcode-JS als er een URL is.
   De marker binnenin is een echte <a> zodat browsers ctrl+klik etc kunnen. */
.lotarch-project-marker-wrap--link {
	cursor: pointer;
}

.lotarch-project-marker-wrap--link .lotarch-project-marker {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.lotarch-project-marker-wrap--link:hover .lotarch-project-marker {
	transform: scale( 1.4 );
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 1 ),
	            0 4px 14px rgba( 0, 0, 0, 0.35 );
}

/* Marker per project-type — shape maakt onderscheid, niet kleur:
      Particulier : zwart CIRKEL (woonhuizen / prive opdrachten)
      Zakelijk    : zwart VIERKANT (kantoren / hotels / instellingen)
   Type via het 5e veld in projects="..." (Naam,lat,lng,URL,type).
   Default = particulier. Legacy waarde "utilitair" wordt door de JS
   genormaliseerd naar "zakelijk" — bestaande content werkt door zonder
   aanpassing. Zelfde style hier via een class-alias hieronder. */
:root {
	--lotarch-marker-particulier: var( --lotarch-fg-primary );
	--lotarch-marker-zakelijk:    var( --lotarch-fg-primary );
	--lotarch-marker-utilitair:   var( --lotarch-marker-zakelijk ); /* backward-compat alias */
}

.lotarch-project-marker {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --lotarch-marker-particulier );
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.95 ),
	            0 2px 6px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Zakelijk = vierkant met vrijwel geen ronde hoeken. Class-alias
   --utilitair blijft voor bestaande content die nog niet gemigreerd
   is naar de "zakelijk" type-string. */
.lotarch-project-marker--zakelijk,
.lotarch-project-marker--utilitair {
	background: var( --lotarch-marker-zakelijk );
	border-radius: 1px;
}

/* ---------- Map legenda ----------
   Premium minimalistische legend rechtsboven op de kaart. Alleen actief
   als er MINSTENS 1 utilitair pin bestaat (check in contact.php JS).
   Semi-transparant wit met backdrop-blur, dunne serif-titel + sans-labels,
   pins zijn dezelfde .lotarch-project-marker classes als op de kaart zelf
   -> altijd exact dezelfde kleuren, één bron van waarheid. */
.leaflet-control.lotarch-map-legend {
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	padding: 0.9rem 1.1rem;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 ),
	            0 8px 24px rgba( 0, 0, 0, 0.08 );
	border: 1px solid rgba( 26, 26, 26, 0.06 );
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 1rem 1rem 0 0 !important;
	min-width: 130px;
	pointer-events: auto;
	user-select: none;
}

.lotarch-map-legend__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var( --lotarch-font-sans );
	font-size: 0.85rem;
	line-height: 1;
	color: var( --lotarch-fg-primary );
}

/* Dot in de legenda gebruikt dezelfde .lotarch-project-marker classes
   als de pins op de kaart. Position: static override zodat 'ie in de
   flex-flow past ipv absolute te staan; hover-scale uit. */
.lotarch-map-legend .lotarch-map-legend__dot {
	position: static;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	box-shadow: 0 0 0 1.5px #ffffff,
	            0 1px 3px rgba( 0, 0, 0, 0.18 );
	transition: none;
}

.lotarch-map-legend .lotarch-map-legend__dot:hover {
	transform: none;
	box-shadow: 0 0 0 1.5px #ffffff,
	            0 1px 3px rgba( 0, 0, 0, 0.18 );
}

/* Office-type in de legenda: oranje bullseye-look — matcht de nieuwe
   oranje LOTarchitectuur pulse-marker op de kaart. Specificiteit 0,3,0
   wint van de generieke __dot styling hierboven. */
.lotarch-map-legend .lotarch-map-legend__dot.lotarch-project-marker--office {
	background: #FD9606;
	box-shadow: 0 0 0 1.5px #ffffff,
	            0 0 0 3.5px rgba( 253, 150, 6, 0.35 ),
	            0 1px 3px rgba( 0, 0, 0, 0.18 );
}

.lotarch-project-marker-wrap:hover .lotarch-project-marker {
	transform: scale( 1.25 );
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 1 ),
	            0 3px 10px rgba( 0, 0, 0, 0.3 );
}

.leaflet-tooltip.lotarch-project-tooltip {
	background: var( --lotarch-fg-primary );
	color: var( --lotarch-bg-primary );
	border: 0 !important;
	border-radius: 4px;
	padding: 0.3rem 0.65rem;
	font-family: var( --lotarch-font-sans );
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}

.leaflet-tooltip.lotarch-project-tooltip::before {
	border-top-color: var( --lotarch-fg-primary ) !important;
}

/* --- Row 2 left: "Hoe werken wij" numbered steps --- */

.lotarch-contact__werkwijze {
	font-family: var( --lotarch-font-sans );
}

.lotarch-contact__werkwijze-title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.5rem, 2.5vw, 2rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 2rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-werkwijze,
ol.lotarch-werkwijze {
	list-style: none !important;
	padding: 0 !important;
	padding-inline-start: 0 !important;
	margin: 0 !important;
	counter-reset: none;
}

.lotarch-werkwijze__step {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid rgba( 26, 26, 26, 0.12 );
}

.lotarch-werkwijze__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.lotarch-werkwijze__step:last-child {
	border-bottom: 1px solid rgba( 26, 26, 26, 0.12 );
}

.lotarch-werkwijze__num {
	font-family: var( --lotarch-font-serif );
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba( 26, 26, 26, 0.4 );
	font-variation-settings: 'opsz' 96;
}

.lotarch-werkwijze__body {
	min-width: 0;
}

.lotarch-werkwijze__name {
	font-family: var( --lotarch-font-serif );
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-werkwijze__desc {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
	margin: 0;
}

/* --- Row 2 right: embedded form (no section wrapper, inherits grid cell) --- */

.lotarch-contact__form {
	min-width: 0;
}

.lotarch-contact__form .lotarch-form-section__title {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	margin: 0 0 0.5rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-contact__form .lotarch-form-section__intro {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
	margin: 0 0 1.5rem;
}

@media ( max-width: 900px ) {
	.lotarch-contact__container {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
	}
	.lotarch-contact__map-wrap {
		aspect-ratio: 3 / 2;
	}
	.lotarch-contact__detail {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* ---------------------------------------------------------
   Contact form shortcode [contactformulier].
   Minimal, editorial styling matching Fraunces + Inter.
--------------------------------------------------------- */

/* Form section aligns to the left column of the [contact] block above,
   matching the container's max-width and padding, then within that
   constrains the form to a comfortable reading/typing width. */
.lotarch-form-section {
	background: var( --lotarch-bg-primary );
	padding: 0 clamp( 1.5rem, 4vw, 3rem ) clamp( 3rem, 6vw, 5rem );
}

.lotarch-form-section__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

.lotarch-form-section__title,
.lotarch-form-section__intro,
.lotarch-form {
	max-width: 620px;
	margin-left: 0;
	margin-right: 0;
}

.lotarch-form-section__title {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	margin: 0 0 0.75rem;
	color: var( --lotarch-fg-primary );
	position: relative;
}

/* Oranje streepje onder "Stuur een bericht" — zelfde look als op de
   editorial pagina's (verduurzamen, over-lotarchitectuur). */
.lotarch-form-section__title::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: #FD9606;
	margin-top: 0.6rem;
}

.lotarch-form-section__intro {
	font-family: var( --lotarch-font-sans );
	font-size: 1.05rem;
	line-height: 1.6;
	color: #444;
	margin: 0 0 2.5rem;
}

.lotarch-form {
	font-family: var( --lotarch-font-sans );
}

.lotarch-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lotarch-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.lotarch-form__field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
	position: relative;
}

.lotarch-form__row .lotarch-form__field {
	margin-bottom: 0;
}

.lotarch-form__field label {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin-bottom: 0.4rem;
}

.lotarch-form__field label span[aria-hidden="true"] {
	color: #999;
	margin-left: 2px;
}

.lotarch-form__field input,
.lotarch-form__field textarea,
.lotarch-form__field select {
	font-family: var( --lotarch-font-sans );
	font-size: 1rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	background: #ffffff;
	border: 1px solid rgba( 26, 26, 26, 0.15 );
	border-radius: 8px;
	padding: 0.85rem 1.05rem;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.lotarch-form__field textarea {
	resize: vertical;
	min-height: 9rem;
}

.lotarch-form__field input:focus,
.lotarch-form__field textarea:focus,
.lotarch-form__field select:focus {
	border-color: var( --lotarch-fg-primary );
	box-shadow: 0 0 0 3px rgba( 26, 26, 26, 0.08 );
}

.lotarch-form__field input::placeholder,
.lotarch-form__field textarea::placeholder {
	color: rgba( 26, 26, 26, 0.4 );
}

.lotarch-form__field.is-invalid input,
.lotarch-form__field.is-invalid textarea,
.lotarch-form__field.is-invalid select {
	border-color: #c04040;
}

.lotarch-form__field.is-invalid input:focus,
.lotarch-form__field.is-invalid textarea:focus,
.lotarch-form__field.is-invalid select:focus {
	box-shadow: 0 0 0 3px rgba( 192, 64, 64, 0.15 );
}

/* --- Custom select: fully styled trigger + dropdown list.
       Hidden native <select> stays behind for form submission + a11y. --- */

.lotarch-form__select-wrap.lotarch-select {
	position: relative;
}

.lotarch-select__native {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.lotarch-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	font-family: var( --lotarch-font-sans );
	font-size: 1rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	background: #ffffff;
	border: 1px solid rgba( 26, 26, 26, 0.15 );
	border-radius: 8px;
	padding: 0.85rem 1.05rem;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

/* Kadence + browser default button-focus/hover styling (donkerblauwe
   achtergrond + witte tekst) killen — trigger is een <button> dus erft
   die anders. Op alle interactieve states: witte achtergrond behouden,
   tekst-kleur dark blijven, geen outline. */
.lotarch-select__trigger,
.lotarch-select__trigger:hover,
.lotarch-select__trigger:focus,
.lotarch-select__trigger:focus-visible,
.lotarch-select__trigger:active,
.lotarch-select[ data-open="true" ] .lotarch-select__trigger {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: var( --lotarch-fg-primary ) !important;
	outline: none !important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Zichtbare label-tekst en chevron ook expliciet dark op alle states —
   want als Kadence op een parent hover een color: white cascade doet,
   erven de spans die anders. */
.lotarch-select__trigger .lotarch-select__value,
.lotarch-select__trigger:hover .lotarch-select__value,
.lotarch-select__trigger:focus .lotarch-select__value,
.lotarch-select__trigger:active .lotarch-select__value,
.lotarch-select[ data-open="true" ] .lotarch-select__trigger .lotarch-select__value {
	color: var( --lotarch-fg-primary ) !important;
}

.lotarch-select__trigger:hover {
	border-color: #FD9606 !important;
}

/* Focus / open state: oranje accent-border + subtiele oranje glow,
   matcht de hover-kleur van header/footer links. */
.lotarch-select__trigger:focus,
.lotarch-select__trigger:focus-visible,
.lotarch-select__trigger:active,
.lotarch-select[ data-open="true" ] .lotarch-select__trigger {
	border-color: #FD9606 !important;
	box-shadow: 0 0 0 3px rgba( 253, 150, 6, 0.18 ) !important;
	color: var( --lotarch-fg-primary ) !important;
}

.lotarch-select__value {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc( 100% - 1.5rem );
}

.lotarch-select__chevron {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var( --lotarch-fg-primary );
	border-bottom: 1.5px solid var( --lotarch-fg-primary );
	transform: translateY( -25% ) rotate( 45deg );
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: 0.5rem;
}

.lotarch-select[ data-open="true" ] .lotarch-select__chevron {
	transform: translateY( 20% ) rotate( -135deg );
}

.lotarch-select__options,
ul.lotarch-select__options {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid rgba( 26, 26, 26, 0.1 );
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.08 ), 0 2px 8px rgba( 0, 0, 0, 0.04 );
	/* Nuke browser + Kadence ul defaults die anders padding-left toevoegen. */
	padding: 0.35rem 0 !important;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	z-index: 50;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	transform: translateY( -6px );
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.lotarch-select[ data-open="true" ] .lotarch-select__options {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.lotarch-select__option,
ul.lotarch-select__options li.lotarch-select__option {
	/* Padding matcht trigger exact (1.05rem left). Full-width span, geen
	   horizontale ul padding = highlight edge-to-edge. */
	padding: 0.7rem 1.05rem !important;
	padding-inline-start: 1.05rem !important;
	margin: 0 !important;
	border-radius: 0;
	cursor: pointer;
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	line-height: 1.4;
	color: var( --lotarch-fg-primary );
	transition: background-color 0.15s ease;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none !important;
	text-indent: 0 !important;
}

/* Kill any browser or Kadence-injected list-marker/pseudo that adds left-space. */
.lotarch-select__options li::marker {
	content: '' !important;
	display: none !important;
}
.lotarch-select__options li::before {
	content: none !important;
	display: none !important;
}

.lotarch-select__option:hover,
.lotarch-select__option:focus,
.lotarch-select__option:focus-visible,
.lotarch-select__option:active {
	background: rgba( 26, 26, 26, 0.05 );
	outline: none !important;
	box-shadow: none !important;
	font-weight: 400;
}

/* Selected item: geen bold, geen sterke bg. Alleen een subtiele checkmark
   rechts zodat de gebruiker weet welke actief is zonder visuele schreeuw. */
.lotarch-select__option[ aria-selected="true" ] {
	background: transparent;
	font-weight: 400;
}

.lotarch-select__option[ aria-selected="true" ]:hover,
.lotarch-select__option[ aria-selected="true" ]:focus,
.lotarch-select__option[ aria-selected="true" ]:active {
	background: rgba( 26, 26, 26, 0.05 );
}

.lotarch-select__option[ aria-selected="true" ]::after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 6px;
	border-left: 1.5px solid var( --lotarch-fg-primary );
	border-bottom: 1.5px solid var( --lotarch-fg-primary );
	transform: rotate( -45deg );
	margin-top: -2px;
	opacity: 0.5;
	flex-shrink: 0;
}

.lotarch-select__trigger {
	-webkit-tap-highlight-color: transparent;
}

.lotarch-form__error {
	font-size: 0.85rem;
	color: #c04040;
	margin-top: 0.4rem;
	min-height: 1rem;
}

.lotarch-form__submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.lotarch-form__submit {
	font-family: var( --lotarch-font-serif );
	font-size: 1.05rem;
	font-weight: 500;
	color: var( --lotarch-bg-primary );
	background: var( --lotarch-fg-primary );
	border: 0;
	padding: 0.9rem 1.85rem;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	border-radius: 8px;
	letter-spacing: -0.005em;
}

.lotarch-form__submit:hover:not(:disabled) {
	background: #333;
}

.lotarch-form__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.lotarch-form__privacy {
	font-size: 0.85rem;
	color: #777;
	margin: 0 0 0.9rem;
	line-height: 1.4;
}

.lotarch-form__result {
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	display: none;
	border-radius: 8px;
}

.lotarch-form__result.is-success,
.lotarch-form__result.is-error {
	display: block;
}

.lotarch-form__result.is-success {
	background: rgba( 60, 130, 90, 0.12 );
	color: #2a5a3e;
	border-left: 3px solid #3c825a;
}

.lotarch-form__result.is-error {
	background: rgba( 192, 64, 64, 0.1 );
	color: #8a2828;
	border-left: 3px solid #c04040;
}

@media ( max-width: 600px ) {
	.lotarch-form__row {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.lotarch-form__submit-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Leaflet attribution — subtieler ----------
   OSM + Stadia + OpenMapTiles attribution moet legaal zichtbaar blijven,
   maar we kunnen 'm afzwakken zodat 'ie geen visueel gewicht steelt:
   kleiner font, halftransparant achtergrond, licht-grijze tekst met
   dezelfde tint links. De "Leaflet"-prefix is uit-gezet via JS
   (setPrefix('') in contact.php); die is een BSD-license library-credit,
   geen data-attribution-verplichting. */
.lotarch-map .leaflet-control-attribution,
.leaflet-container .leaflet-control-attribution {
	background: rgba( 255, 255, 255, 0.55 ) !important;
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	color: rgba( 26, 26, 26, 0.55 ) !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	padding: 2px 6px !important;
	font-family: var( --lotarch-font-sans );
	letter-spacing: 0.01em;
}

.lotarch-map .leaflet-control-attribution a,
.leaflet-container .leaflet-control-attribution a {
	color: rgba( 26, 26, 26, 0.7 ) !important;
	text-decoration: none;
}

.lotarch-map .leaflet-control-attribution a:hover,
.leaflet-container .leaflet-control-attribution a:hover {
	color: rgba( 26, 26, 26, 0.95 ) !important;
	text-decoration: underline;
}

/* ============================================================
   Contactpagina herordering per 2025-09.
   Row 1: formulier (7fr LINKS) | trust-blok (5fr RECHTS)
   Row 2: werkwijze (LINKS)     | adres + kaart (RECHTS)
   Row 3: meta-strook (KVK, openingstijden) — small, footer-achtig
   ============================================================ */

/* --- Trust-blok naast het formulier: bel/mail chips, response-belofte,
       social proof. Rustige premium look, warm accent alleen op de
       chip-icons zodat de attention naar het formulier gaat en niet
       naar deze secundaire kolom. --- */
.lotarch-contact__trust {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 0.25rem;
}

.lotarch-contact__trust-title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.25rem, 2vw, 1.5rem );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.25rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-contact__chips {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Grote klikbare chip — hoge affordance voor de "ik wil niet typen"-
   bezoeker. Full-width binnen de trust-kolom voor tap-target op mobile.
   Hover lift subtiel + oranje accent op de icon zodat het klikbare
   karakter direct duidelijk is. */
.lotarch-contact__chip,
.lotarch-contact__chip:link,
.lotarch-contact__chip:visited {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #ffffff;
	border: 1px solid rgba( 26, 26, 26, 0.1 );
	border-radius: 12px;
	text-decoration: none;
	color: var( --lotarch-fg-primary ) !important;
	font-family: var( --lotarch-font-sans );
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s cubic-bezier( 0.22, 1, 0.36, 1 ),
		background 0.2s ease;
	will-change: transform;
}

/* Kind spans (label + value) blijven bij :visited state ook hun eigen
   kleur behouden (browser default zou anders paars/blauw overrulen). */
.lotarch-contact__chip:visited .lotarch-contact__chip-label,
.lotarch-contact__chip:visited .lotarch-contact__chip-value {
	color: inherit !important;
}

.lotarch-contact__chip:hover,
.lotarch-contact__chip:focus-visible {
	border-color: #FD9606;
	box-shadow: 0 8px 20px -8px rgba( 253, 150, 6, 0.35 );
	transform: translateY( -2px );
	outline: none;
}

.lotarch-contact__chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba( 253, 150, 6, 0.12 );
	color: #FD9606;
	transition: background 0.2s ease, color 0.2s ease;
}

.lotarch-contact__chip:hover .lotarch-contact__chip-icon,
.lotarch-contact__chip:focus-visible .lotarch-contact__chip-icon {
	background: #FD9606;
	color: #ffffff;
}

.lotarch-contact__chip-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.lotarch-contact__chip-label {
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #666;
}

.lotarch-contact__chip-value {
	font-size: 1.05rem;
	font-weight: 500;
	color: var( --lotarch-fg-primary );
	line-height: 1.2;
	word-break: break-word;
}

/* Response-belofte onder de chips. Groene dot + kort statement — leest
   als een "we zijn actief" signaal (à la SaaS "operational" badges).
   Verlaagt drempel: bezoeker weet direct wat te verwachten. */
.lotarch-contact__promise {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-family: var( --lotarch-font-sans );
	font-size: 0.92rem;
	line-height: 1.4;
	color: #333;
}

.lotarch-contact__promise-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4a9d5f;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba( 74, 157, 95, 0.15 );
	animation: lotarch-promise-pulse 2.5s ease-in-out infinite;
}

@keyframes lotarch-promise-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba( 74, 157, 95, 0.15 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 74, 157, 95, 0.05 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.lotarch-contact__promise-dot {
		animation: none;
	}
}

/* Social proof: groot cijfer + korte label. Fraunces serif voor
   editorial autoriteit. */
.lotarch-contact__proof {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: rgba( 26, 26, 26, 0.03 );
	border-left: 3px solid #FD9606;
	border-radius: 0 8px 8px 0;
}

.lotarch-contact__proof-number {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --lotarch-fg-primary );
	flex-shrink: 0;
}

.lotarch-contact__proof-label {
	font-family: var( --lotarch-font-sans );
	font-size: 0.88rem;
	line-height: 1.4;
	color: #444;
}

/* --- Adres + kaart als één blok (row 2 right). Adres boven, kaart
       onder — bewijst dat je bestaat maar pakt niet meer het above-fold
       vastgoed. --- */
.lotarch-contact__location {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lotarch-contact__address {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
}

.lotarch-contact__address strong {
	font-family: var( --lotarch-font-serif );
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var( --lotarch-fg-primary );
}

/* --- Row 3: bureaucratische meta-strook (KVK, openingstijden). Klein,
       subtiel, aan de onderkant van de sectie. --- */
.lotarch-contact__meta {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: 0 clamp( 1.5rem, 4vw, 3rem ) clamp( 2rem, 4vw, 3rem );
	border-top: 1px solid rgba( 26, 26, 26, 0.08 );
}

/* Binnen editorial content: parent regelt al horizontale padding. */
.lot-editorial-content .lotarch-contact__meta {
	padding-left: 0;
	padding-right: 0;
}

.lotarch-contact__meta-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	padding-top: 1.25rem;
	font-family: var( --lotarch-font-sans );
	font-size: 0.82rem;
	color: #888;
}

.lotarch-contact__meta-item {
	display: inline-flex;
	gap: 0.35rem;
}

.lotarch-contact__meta-label {
	color: #aaa;
}

/* --- Placeholder-styling voor de subject-dropdown: value tekst grijzer
       zodat 't leest als "kies iets" en niet als een echte selectie.
       Class wordt door JS verwijderd zodra user een echte optie kiest. --- */
.lotarch-select__trigger.lotarch-select__trigger--placeholder .lotarch-select__value {
	color: #999 !important;
}

/* Formulier-veld error-state ook op de subject select-wrap tonen. */
.lotarch-form__field.is-invalid .lotarch-select__trigger {
	border-color: #d94040 !important;
}

/* --- Verstuur-knop: groter + oranje hover met scale, matcht de
       [vd_cta] "Neem contact op" button op Verduurzamen. Consistente
       primaire actie-styling over de hele site. --- */
.lotarch-form__submit {
	font-size: 1.1rem;
	padding: 1.1rem 2.25rem;
	transform: translateY( 0 ) scale( 1 );
	box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
	will-change: transform;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		transform 0.25s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.25s ease,
		opacity 0.2s ease;
}

.lotarch-form__submit:hover:not(:disabled),
.lotarch-form__submit:focus-visible:not(:disabled) {
	background: #FD9606;
	color: #ffffff;
	transform: translateY( -2px ) scale( 1.03 );
	box-shadow: 0 10px 24px -8px rgba( 253, 150, 6, 0.45 );
	outline: none;
}

.lotarch-form__submit:active:not(:disabled) {
	transform: translateY( 0 ) scale( 1.01 );
	box-shadow: 0 2px 6px -2px rgba( 253, 150, 6, 0.4 );
	transition-duration: 0.08s;
}

@media ( prefers-reduced-motion: reduce ) {
	.lotarch-form__submit,
	.lotarch-form__submit:hover,
	.lotarch-form__submit:focus-visible,
	.lotarch-form__submit:active,
	.lotarch-contact__chip,
	.lotarch-contact__chip:hover,
	.lotarch-contact__chip:focus-visible {
		transform: none;
	}
}

/* --- Response-belofte onder de submit knop (op het beslissende moment).
       Dezelfde groene-dot styling als de trust-blok belofte voor
       coherentie. --- */
.lotarch-form__promise {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	font-family: var( --lotarch-font-sans );
	font-size: 0.88rem;
	line-height: 1.4;
	color: #555;
}

.lotarch-form__promise-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4a9d5f;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba( 74, 157, 95, 0.15 );
	animation: lotarch-promise-pulse 2.5s ease-in-out infinite;
}

/* --- Mobile stacking voor de nieuwe layout. --- */
@media ( max-width: 900px ) {
	.lotarch-contact__trust {
		gap: 1.25rem;
	}
	.lotarch-contact__chip {
		padding: 0.85rem 1rem;
	}
	.lotarch-contact__chip-icon {
		width: 40px;
		height: 40px;
	}
	.lotarch-contact__meta-inner {
		gap: 0.6rem 1.5rem;
	}
}