/* ========================================================
	HSP KINDERCOACHING RESPONSIVE
	PRAKTIJK ROZENHART © FORWARD
======================================================== */



/* ============================
	EXTRA LARGE DESKTOP
============================ */

@media (max-width: 1199.98px) {
	.hsp-step--arrow {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.hsp-steps--grid {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 1.5rem;
	}
}



/* ============================
	LARGE DESKTOP
============================ */

@media (max-width: 1399.98px) {
	.hsp-hero--title {
		font-size: 4.55rem;
	}

	.hsp-paragraph .text--inner h3 {
		font-size: 2.4rem;
	}
}



/* ============================
	TABLET LANDSCAPE
============================ */

@media (max-width: 1199.98px) {

	.hsp-contact--content h2,
	.hsp-intro h2,
	.hsp-section--title {
		font-size: 2.55rem;
	}

	.hsp-hero--title {
		font-size: 3.8rem;
	}

	.hsp-paragraph .row,
	.hsp-about .row,
	.hsp-faq .row,
	.hsp-contact>.container>.row {
		row-gap: 3rem;
	}

	.hsp-step--column::after {
		display: none;
	}
}



/* ============================
	TABLET + MOBILE
============================ */

@media (max-width: 991.98px) {

	.hsp-lander section,
	.hsp-lander header {
		scroll-margin-top: 86px;
	}

	.hsp-lander .navbar.sticky--top,
	.hsp-lander .navbar.sticky--top.scrolled {
		background-color: #FFFFFF;
		padding: .65rem 0;
	}

	.hsp-lander .navigation--section {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.hsp-lander .logo--box.logo--mobile img {
		height: 52px;
	}

	.hsp-about,
	.hsp-faq,
	.hsp-intro,
	.hsp-paragraph {
		padding-bottom: 5rem;
		padding-top: 5rem;
	}

	.hsp-button {
		width: 100%;
	}

	.hsp-button--ghost {
		background-color: transparent;
		border-color: #000000;
		color: #000000;
	}

	.hsp-button--light {
		background-color: #3ED9D0;
		border-color: #3ED9D0;
		box-shadow: none;
	}

	.hsp-cardblock,
	.hsp-contact,
	.hsp-pricing,
	.hsp-steps {
		padding: 5rem 0;
	}

	.hsp-contact--content h2,
	.hsp-intro h2,
	.hsp-section--title {
		font-size: 2.25rem;
	}

	.hsp-contact--signature img {
		height: 60px;
	}

	.hsp-faq .faq--block--title {
		font-size: 2.25rem;
	}

	.hsp-faq .faq--question h3 {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.hsp-formbox {
		padding: 2rem;
	}

	.hsp-hero {
		background: var(--hsp-surface-gradient);
		display: block;
		min-height: auto;
		padding: 0;
	}

	.hsp-hero--actions {
		flex-direction: column;
		width: 100%;
	}

	.hsp-hero--brand {
		display: none;
	}

	.hsp-hero--container {
		display: block;
		min-height: auto;
		padding-bottom: 2.75rem;
		padding-top: 0;
	}

	.hsp-hero--content {
		background: var(--hsp-surface-gradient);
		padding: 2rem 1.25rem 0 1.25rem;
	}

	.hsp-hero--eyebrow {
		color: #8D5FA4;
		font-size: .82rem;
	}

	.hsp-hero--glow,
	.hsp-hero--overlay {
		display: none;
	}

	.hsp-hero--labels {
		gap: .7rem;
		margin-top: 1.6rem;
	}

	.hsp-hero--labels li {
		backdrop-filter: none;
		background-color: rgba(255, 255, 255, .72);
		border-color: rgba(97, 64, 138, .08);
		box-shadow: none;
		color: #000000;
		text-align: center;
		width: 100%;
	}

	.hsp-hero--media {
		position: relative;
	}

	.hsp-hero--media img,
	.hsp-hero--media picture {
		height: auto;
		width: 100%;
	}

	.hsp-hero--media img {
		max-height: 520px;
		object-fit: cover;
		object-position: center center;
		transform: none;
	}

	.hsp-hero--subtitle,
	.hsp-hero--text,
	.hsp-hero--title {
		color: #000000;
		text-shadow: none;
	}

	.hsp-hero--subtitle {
		font-size: 1.45rem;
	}

	.hsp-hero--text {
		font-size: 1.08rem;
		line-height: 1.72;
		max-width: none;
	}

	.hsp-hero--title {
		font-size: 3rem;
		letter-spacing: -.04rem;
		max-width: none;
	}

	.hsp-intro p,
	.hsp-section--intro {
		font-size: 1.1rem;
		line-height: 1.7;
	}

	.hsp-lander .cta--block {
		padding: 5rem 0;
	}

	.hsp-lander .review--block {
		padding: 5rem 0;
	}

	.hsp-lander .review--block .row {
		row-gap: 2rem;
	}

	.hsp-lander .review--block .widget--item--body {
		padding: 1.9rem;
	}

	.hsp-paragraph .text--inner h3 {
		font-size: 2.25rem;
	}

	.hsp-signal {
		min-height: 88px;
		padding: 1.35rem 2rem;
	}

	.hsp-signalblock {
		padding-bottom: 5rem;
	}

	.hsp-signalblock--intro br {
		display: none;
	}

	.hsp-steps--action {
		margin-top: 2.75rem;
	}
}



/* ============================
	MOBILE LANDSCAPE
============================ */

@media (max-width: 767.98px) {
	.hsp-contact--inline-links {
		align-items: flex-start;
		flex-direction: column;
		gap: .5rem;
	}

	.hsp-contact--content>p {
		font-size: 1.1rem;
	}

	.hsp-faq .faq--answer p {
		font-size: 1.05rem;
		padding-right: 0;
	}

	.hsp-hero--eyebrow {
		align-items: flex-start;
		flex-direction: column;
		gap: .45rem;
	}

	.hsp-hero--eyebrow span:not(:last-child)::after {
		display: none;
	}

	.hsp-hero--media img {
		max-height: 430px;
	}

	.hsp-image--soft,
	.hsp-faq .img--box {
		border-radius: 3.5rem;
	}

	.hsp-intro {
		padding-left: .25rem;
		padding-right: .25rem;
	}

	.hsp-lander .cta--block p {
		font-size: 1.1rem;
	}

	.hsp-signal {
		border-radius: 3rem;
		min-height: 80px;
		padding: 1.25rem 1.5rem;
	}
}



/* ============================
	MOBILE PORTRAIT
============================ */

@media (max-width: 575.98px) {

	.hsp-card,
	.hsp-formbox,
	.hsp-price,
	.hsp-step {
		border-radius: 2rem;
		padding: 1.5rem;
	}

	.hsp-contact--content h2,
	.hsp-intro h2,
	.hsp-section--title {
		font-size: 2rem;
	}

	.hsp-contact--signature img {
		height: 54px;
		max-width: 100%;
	}

	.hsp-faq .faq--block--title {
		font-size: 2rem;
	}

	.hsp-faq .faq--icon {
		font-size: 1.3rem;
	}

	.hsp-faq .faq--question h3 {
		font-size: 1.12rem;
		padding-right: 1rem;
	}

	.hsp-formbox {
		box-shadow: 0 18px 42px rgba(50, 20, 96, .09);
	}

	.hsp-hero--content {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.hsp-hero--media img {
		max-height: 360px;
	}

	.hsp-hero--subtitle {
		font-size: 1.3rem;
	}

	.hsp-hero--title {
		font-size: 2.55rem;
	}

	.hsp-lander .review--block .review__widget--item {
		border-radius: 2rem;
	}

	.hsp-lander .review--block .widget--item--body {
		padding: 1.5rem;
	}

	.hsp-paragraph .text--inner h3 {
		font-size: 2rem;
	}

	.hsp-price--icon {
		font-size: 1.8rem;
	}

	.hsp-signal span {
		font-size: 1.08rem;
	}
}



/* ============================
	REDUCED MOTION
============================ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hsp-lander *,
	.hsp-lander *::after,
	.hsp-lander *::before {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}