/* Rijschool Oude Maas – Contactpagina (hero, kanalen, formulier + info, FAQ, footer) */

.rom-contactpagina {
	background: #ffffff;
	overflow: hidden;
}

/* ==========================================================
 * 1) HERO
 * ======================================================= */
.rom-cp2__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	color: #fff;
	overflow: hidden;
	background: var(--rom-cp2-hero-bg, #0f1b2d);
}

.rom-cp2__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
}

.rom-cp2__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		var(--rom-cp2-hero-overlay-1, rgba(15, 27, 45, .7)) 0%,
		var(--rom-cp2-hero-overlay-2, rgba(15, 27, 45, .85)) 60%,
		var(--rom-cp2-hero-overlay-3, #0f1b2d) 100%);
}

/* Titel */
.rom-cp2__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 72px) clamp(72px, 9vw, 120px);
	animation: rom-fadein .8s cubic-bezier(.2, .8, .2, 1) both;
}

.rom-cp2__hero-title {
	margin: 0 0 26px;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(50px, 7.5vw, 112px);
	line-height: .92;
	letter-spacing: -.04em;
	max-width: 14ch;
	color: var(--rom-cp2-hero-title, #ffffff);
}

.rom-cp2__hero-subtitle {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	max-width: 48ch;
	color: var(--rom-cp2-hero-subtitle, rgba(255, 255, 255, .82));
}

/* ==========================================================
 * 2) KANAALKAARTEN
 * ======================================================= */
.rom-cp2__channels {
	position: relative;
	background: #ffffff;
	padding: 0 clamp(24px, 5vw, 72px);
	/* flow-root voorkomt margin-collapse: zo trekt de negatieve marge van het grid
	   de kaarten óver de banner, in plaats van de hele witte sectie omhoog te schuiven. */
	display: flow-root;
}

.rom-cp2__channels-grid {
	max-width: 1400px;
	margin: -56px auto 0;
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.rom-cp2__chan {
	background: var(--rom-cp2-chan-bg, #ffffff);
	border: 1px solid var(--rom-cp2-chan-border, #e1e8ef);
	border-radius: 24px;
	padding: 28px;
	color: #0f1b2d;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-shadow: 0 24px 56px -24px rgba(15, 27, 45, .25);
	transition: transform .25s;
}

.rom-cp2__chan:hover {
	transform: translateY(-4px);
	color: #0f1b2d;
}

.rom-cp2__chan-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--rom-cp2-chan-ico-1, #0091d5), var(--rom-cp2-chan-ico-2, #0b68a0));
	flex-shrink: 0;
}

.rom-cp2__chan-klein {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rom-cp2-chan-klein, #8a94a6);
	font-weight: 600;
	margin-bottom: 6px;
}

.rom-cp2__chan-groot {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -.02em;
	color: var(--rom-cp2-chan-groot, #0f1b2d);
	word-break: break-word;
}

.rom-cp2__chan-sub {
	font-size: 14px;
	color: var(--rom-cp2-chan-sub, #4a5568);
}

/* ==========================================================
 * 3) FORMULIER + INFO
 * ======================================================= */
.rom-cp2__form-section {
	background: #ffffff;
	padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 72px);
}

.rom-cp2__form-grid {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(40px, 6vw, 100px);
	align-items: start;
}

/* Linkerkolom */
.rom-cp2__info {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.rom-cp2__kicker {
	display: block;
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--rom-cp2-kicker, #e5007d);
	margin-bottom: 20px;
}

.rom-cp2__form-title {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 4.5vw, 64px);
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--rom-cp2-form-title, #0f1b2d);
}

.rom-cp2__form-text {
	margin: 24px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--rom-cp2-form-text, #4a5568);
	max-width: 42ch;
}

.rom-cp2__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--rom-cp2-cta-bg, #e5007d);
	color: var(--rom-cp2-cta-text, #ffffff);
	font-weight: 700;
	padding: 16px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-family: 'Outfit', sans-serif;
	transition: background .2s;
}

.rom-cp2__cta:hover {
	background: var(--rom-cp2-cta-bg-hover, #c4006a);
	color: var(--rom-cp2-cta-text, #ffffff);
}

.rom-cp2__info-grid {
	border-top: 1px solid var(--rom-cp2-info-border, #e1e8ef);
	padding-top: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	font-size: 14px;
	color: var(--rom-cp2-info-value, #4a5568);
}

.rom-cp2__info-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	color: var(--rom-cp2-info-label, #0f1b2d);
	margin-bottom: 4px;
}

.rom-cp2__info-value {
	color: var(--rom-cp2-info-value, #4a5568);
}

/* Rechterkolom: kaart met formulier / succes */
.rom-cp2__card {
	position: relative;
	background: var(--rom-cp2-card-bg, #f6f9fc);
	border-radius: 28px;
	padding: clamp(24px, 3vw, 40px);
}

.rom-cp2__form-wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rom-cp2__form-wrap[hidden] {
	display: none;
}

.rom-cp2__error {
	background: var(--rom-cp2-error-bg, #fff0f6);
	color: var(--rom-cp2-error-text, #e5007d);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
}

.rom-cp2__error[hidden] {
	display: none;
}

.rom-cp2__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.rom-cp2__field {
	position: relative;
	display: block;
}

.rom-cp2__field > span {
	position: absolute;
	left: 16px;
	top: 9px;
	font-size: 11px;
	font-weight: 700;
	color: var(--rom-cp2-input-label, #0b68a0);
	pointer-events: none;
}

.rom-cp2__field input,
.rom-cp2__field textarea {
	width: 100%;
	background: var(--rom-cp2-input-bg, #ffffff);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 24px 16px 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--rom-cp2-input-text, #0f1b2d);
	outline: none;
	font-family: inherit;
}

.rom-cp2__field input:focus,
.rom-cp2__field textarea:focus {
	border-color: var(--rom-cp2-input-focus, #0091d5);
}

.rom-cp2__field.is-error input,
.rom-cp2__field.is-error textarea {
	border-color: var(--rom-cp2-input-error, #e5007d);
}

.rom-cp2__field--textarea textarea {
	padding: 26px 16px 12px;
	font-weight: 500;
	resize: vertical;
	line-height: 1.5;
}

.rom-cp2__topics {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.rom-cp2__topic {
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	border: 1.5px solid var(--rom-cp2-chip-border, #d6dee8);
	border-radius: 999px;
	padding: 9px 16px;
	background: var(--rom-cp2-chip-bg, #ffffff);
	color: var(--rom-cp2-chip-text, #0f1b2d);
	transition: all .2s;
}

.rom-cp2__topic:hover {
	border-color: var(--rom-cp2-input-focus, #0091d5);
}

.rom-cp2__topic.is-selected {
	background: var(--rom-cp2-chip-bg-selected, #0f1b2d);
	color: var(--rom-cp2-chip-text-selected, #ffffff);
	border-color: var(--rom-cp2-chip-border-selected, #0f1b2d);
}

.rom-cp2__submit {
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	width: 100%;
	border: 0;
	border-radius: 14px;
	padding: 17px 22px;
	background: linear-gradient(135deg, var(--rom-cp2-submit-bg-1, #e5007d), var(--rom-cp2-submit-bg-2, #c4006a));
	color: var(--rom-cp2-submit-text, #ffffff);
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-shadow: 0 14px 30px rgba(229, 0, 125, .3);
	transition: transform .2s;
}

.rom-cp2__submit:hover {
	transform: translateY(-2px);
}

.rom-cp2__submit[disabled] {
	opacity: .5;
	cursor: default;
	transform: none;
}

.rom-cp2__privacy {
	margin: 0;
	font-size: 12px;
	color: var(--rom-cp2-privacy-text, #8a94a6);
	text-align: center;
}

/* Succes-panel */
.rom-cp2__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 40px 0;
}

.rom-cp2__success[hidden] {
	display: none;
}

.rom-cp2__success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--rom-cp2-success-icon-bg, rgba(0, 145, 213, .15));
	color: var(--rom-cp2-success-icon, #0091d5);
	display: grid;
	place-items: center;
	font-size: 28px;
	font-weight: 800;
}

.rom-cp2__success-title {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -.02em;
	color: var(--rom-cp2-success-title, #0f1b2d);
}

.rom-cp2__success-text {
	margin: 0;
	font-size: 15px;
	color: var(--rom-cp2-success-text, #4a5568);
	max-width: 38ch;
}

.rom-cp2__success-reset {
	cursor: pointer;
	margin-top: 12px;
	background: none;
	border: 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--rom-cp2-success-reset, #5a6b7a);
	transition: color .2s;
}

.rom-cp2__success-reset:hover {
	color: var(--rom-cp2-success-reset-hover, #0f1b2d);
}

/* ==========================================================
 * 4) FOOTER
 * ======================================================= */
.rom-cp2__footer {
	background: var(--rom-cp2-footer-bg, #ffffff);
	border-top: 1px solid var(--rom-cp2-footer-border, #e1e8ef);
	padding: 28px clamp(24px, 5vw, 72px);
}

.rom-cp2__footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--rom-cp2-footer-text, #8a94a6);
}

.rom-cp2__footer-links {
	display: flex;
	gap: 16px;
}

.rom-cp2__footer-link {
	color: var(--rom-cp2-footer-link, #8a94a6);
	transition: color .2s;
}

.rom-cp2__footer-link:hover {
	color: var(--rom-cp2-footer-link-hover, #0f1b2d);
}

/* ==========================================================
 * Responsive
 * ======================================================= */
@media (max-width: 900px) {
	.rom-cp2__form-grid {
		grid-template-columns: 1fr;
	}
	.rom-cp2__info {
		position: static;
		top: auto;
	}
}

@media (max-width: 640px) {
	.rom-cp2__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.rom-cp2__channels {
		padding: 0 20px;
	}
	.rom-cp2__form-section {
		padding-left: 20px;
		padding-right: 20px;
	}
}