/* ========================================================
	B&K HOUTCONSTRUCTIE 2026
	RESPONSIVE CSS
======================================================== */



/* ============================
	WIDE SCREENS
============================ */

@media (min-width: 2000px) {
	.hero {
		min-height: 920px;
	}

	.site--container {
		max-width: 1920px;
	}

	.subhero {
		min-height: 620px;
	}
}



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

@media (max-width: 1599px) {
	.navigation--link {
		font-size: .98rem;
		padding-left: .65rem;
		padding-right: .65rem;
	}

	.site--container {
		padding-left: 1.35rem;
		padding-right: 1.35rem;
	}
}

@media (max-width: 1399px) {
	.navigation--link {
		font-size: .92rem;
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.topbar--button {
		font-size: .9rem;
		padding-left: .85rem;
		padding-right: .85rem;
	}

	.topbar--link {
		font-size: .98rem;
	}
}



/* ============================
	LAPTOP
============================ */

@media (max-width: 1199px) {

	.about,
	.contentsections,
	.cta,
	.intro,
	.pageintro,
	.process,
	.products,
	.projects,
	.reviews,
	.statement {
		padding: 5.75rem 0;
	}

	.about--badge {
		bottom: 1.25rem;
		left: 1.25rem;
	}

	.companysections {
		padding: 5.75rem 0;
	}

	.companysection {
		margin-bottom: 5rem;
	}

	.companysection--visual {
		position: relative;
		top: auto;
	}

	.contentsection {
		margin-bottom: 4.5rem;
	}

	.contentsection--benefits {
		padding: 2rem;
	}

	.contentsection--title {
		font-size: clamp(1.75rem, 3vw, 2.25rem);
		letter-spacing: -.025rem;
	}

	.header {
		padding: 1rem 0;
	}

	.header--logo,
	.header.is-scrolled .header--logo {
		height: 62px;
	}

	.hero {
		min-height: 700px;
	}

	.hero--content {
		padding: 6.5rem 0;
	}

	.products--card {
		aspect-ratio: 1 / .78;
	}

	.projectstories {
		padding: 5.75rem 0;
	}

	.projectstory {
		margin-bottom: 4rem;
	}

	.projectstory--inner {
		padding: 2rem;
	}

	.subhero {
		min-height: 460px;
	}

	.subhero--content {
		padding: 5rem 0;
	}

	.topbar--actions {
		justify-content: flex-start;
	}

	.topbar--contact {
		gap: .9rem;
	}

	.values {
		margin-top: 0;
		padding-bottom: 4.75rem;
		padding-top: 4.75rem;
	}
}



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

@media (max-width: 991px) {
	.about--imagebox--large {
		aspect-ratio: 1.35 / .9;
	}

	.companysection--grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.companysection--imagebox {
		aspect-ratio: 1.35 / .9;
	}

	.contentsection--aside {
		margin-top: 1.5rem;
		position: relative;
		top: auto;
	}

	.contentsection--benefits {
		height: auto;
	}

	.contentsection--imagebox {
		aspect-ratio: 1.25 / .78;
	}

	.cta--box,
	.cta--panel {
		padding: 2rem;
	}

	.footer--bottomlinks {
		justify-content: center;
	}

	.footer--content {
		gap: 2rem;
		padding-top: 3.5rem;
	}

	.hero {
		min-height: 640px;
	}

	.hero--overlay {
		background: linear-gradient(90deg, rgba(7, 17, 31, .88) 0%, rgba(7, 17, 31, .64) 100%);
	}

	.products--summary {
		margin-top: .5rem;
	}

	.process--imagebox {
		aspect-ratio: 1.3 / .86;
	}

	.section--lead,
	.section--text {
		max-width: none;
	}

	.subhero--overlay {
		background: linear-gradient(90deg, rgba(7, 17, 31, .9) 0%, rgba(7, 17, 31, .68) 100%);
	}
}



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

@media (max-width: 767px) {

	.about,
	.contentsections,
	.cta,
	.intro,
	.pageintro,
	.process,
	.products,
	.projects,
	.reviews,
	.statement {
		padding: 4.75rem 0;
	}

	.about--actions,
	.cta--actions,
	.hero--actions,
	.process--actions,
	.products--actions {
		align-items: stretch;
		flex-direction: column;
	}

	.about--badge {
		border-radius: .85rem;
		bottom: 1rem;
		left: 1rem;
		max-width: 230px;
		padding: 1rem;
	}

	.about--badge strong {
		font-size: 1.2rem;
	}

	.button {
		width: 100%;
	}

	.companysections {
		padding: 4.75rem 0;
	}

	.companysection {
		margin-bottom: 4rem;
	}

	.companysection--caption,
	.companysection--card,
	.companysection--tile {
		border-radius: .95rem;
		padding: 1.4rem;
	}

	.companysection--card h3 {
		font-size: 1.22rem;
	}

	.companysection--card p {
		font-size: 1.02rem;
		line-height: 1.68;
	}

	.companysection--imagebox {
		aspect-ratio: 1 / .76;
		border-radius: .95rem;
	}

	.companysection--title {
		font-size: clamp(1.9rem, 8vw, 2.65rem);
		letter-spacing: -.03rem;
		margin-bottom: 1.5rem;
	}

	.contentsection {
		margin-bottom: 3.75rem;
	}

	.contentsection--aside {
		gap: .85rem;
		margin-top: 1.25rem;
	}

	.contentsection--badge {
		border-radius: .55rem;
	}

	.contentsection--benefits,
	.contentsection--content {
		border-radius: .95rem;
	}

	.contentsection--benefits {
		padding: 1.45rem;
	}

	.contentsection--benefits h3 {
		font-size: 1.25rem;
		letter-spacing: -.02rem;
		line-height: 1.18;
		margin-bottom: .75rem;
	}

	.contentsection--benefits p {
		font-size: 1rem;
		line-height: 1.62;
		margin-bottom: 1.2rem;
	}

	.contentsection--benefits li {
		font-size: .98rem;
		line-height: 1.48;
	}

	.contentsection--benefits li span {
		font-size: .98rem;
		line-height: 1.48;
	}

	.contentsection--imagebox {
		aspect-ratio: 1 / .72;
	}

	.contentsection--inner {
		padding: 1.45rem;
	}

	.contentsection--paragraph {
		font-size: 1.04rem;
		line-height: 1.7;
	}

	.contentsection--title {
		font-size: clamp(1.65rem, 7vw, 2.15rem);
		letter-spacing: -.025rem;
	}

	.cta--box,
	.cta--panel,
	.reviews--card {
		padding: 1.45rem;
	}

	.footer--bottom {
		margin-top: 3rem;
	}

	.footer--bottomlinks {
		align-items: center;
		flex-direction: column;
		gap: .4rem;
	}

	.footer--main {
		padding-left: 0;
		padding-right: 0;
	}

	.footer--watermark {
		opacity: .05;
		width: min(70vw, 420px);
	}

	.hero {
		min-height: 600px;
	}

	.hero--content {
		padding: 5.5rem 0;
	}

	.hero--text {
		font-size: 1.08rem;
		line-height: 1.65;
	}

	.products--card {
		aspect-ratio: 1 / .72;
	}

	.products--content {
		padding: 1.25rem;
	}

	.projects--container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.projects--intro,
	.reviews--intro {
		margin-bottom: 2.25rem;
	}

	.projectstories {
		padding: 4.75rem 0;
	}

	.projectstory {
		margin-bottom: 3.5rem;
		padding: 1rem;
	}

	.projectstory--gallery {
		gap: .75rem;
	}

	.projectstory--imagebox {
		border-radius: .85rem;
	}

	.projectstory--inner {
		border-radius: 1rem;
		padding: 0.25rem;
	}

	.projectstory--list li,
	.projectstory--list li span {
		font-size: .98rem;
		line-height: 1.48;
	}

	.projectstory--meta span {
		width: 100%;
	}

	.projectstory--text {
		font-size: 1.02rem;
		line-height: 1.68;
	}

	.projectstory--title {
		font-size: clamp(1.65rem, 7vw, 2.2rem);
		letter-spacing: -.025rem;
	}

	.section--lead {
		font-size: 1.25rem;
		line-height: 1.4;
	}

	.section--text {
		font-size: 1.05rem;
		line-height: 1.7;
	}

	.section--title {
		font-size: clamp(2rem, 8vw, 2.65rem);
		letter-spacing: -.025rem;
	}

	.statement--quote {
		font-size: clamp(1.45rem, 7vw, 2.1rem);
	}

	.subhero {
		min-height: 420px;
	}

	.subhero--content {
		padding: 4.25rem 0;
	}

	.subhero--text {
		font-size: 1.05rem;
		line-height: 1.65;
	}

	.subhero--title {
		font-size: clamp(2.35rem, 11vw, 3.3rem);
	}

	.topbar--actions {
		align-items: stretch;
		flex-direction: column;
	}

	.topbar--button {
		width: 100%;
	}

	.values--card {
		padding: 1.35rem;
	}
}



/* ============================
	SMALL MOBILE
============================ */

@media (max-width: 575px) {

	.about--imagebox,
	.contentsection--benefits,
	.contentsection--content,
	.cta--box,
	.cta--panel,
	.products--card,
	.projects--slide,
	.reviews--card,
	.values--card {
		border-radius: .95rem;
	}

	.companysection--caption,
	.companysection--card,
	.companysection--imagebox,
	.companysection--tile {
		border-radius: .9rem;
	}

	.companysection--caption,
	.companysection--card,
	.companysection--tile {
		padding: 1.2rem;
	}

	.companysection--kicker {
		font-size: .82rem;
		letter-spacing: .1rem;
	}

	.contentsection--badge {
		font-size: .82rem;
		letter-spacing: .08rem;
		padding: .65rem .8rem .7rem .8rem;
	}

	.contentsection--benefits {
		padding: 1.2rem;
	}

	.contentsection--benefits h3 {
		font-size: 1.12rem;
	}

	.contentsection--benefits p {
		font-size: .96rem;
		line-height: 1.58;
	}

	.contentsection--benefits li,
	.contentsection--benefits li span {
		font-size: .95rem;
		line-height: 1.45;
	}

	.contentsection--inner {
		padding: 1.2rem;
	}

	.contentsection--kicker {
		font-size: .82rem;
		letter-spacing: .1rem;
	}

	.contentsection--paragraph {
		font-size: 1rem;
		line-height: 1.68;
	}

	.contentsection--title {
		font-size: clamp(1.55rem, 8vw, 2rem);
		letter-spacing: -.02rem;
	}

	.footer--backtotop {
		height: 46px;
		width: 46px;
	}

	.header--logo,
	.header.is-scrolled .header--logo {
		height: 54px;
	}

	.hero {
		min-height: 570px;
	}

	.hero--content {
		padding: 4.75rem 0;
	}

	.hero--title {
		font-size: clamp(2.25rem, 10vw, 3.35rem);
		letter-spacing: -.04rem;
		line-height: 1.05;
	}

	.offcanvas--body {
		padding: 1.15rem;
	}

	.offcanvas--header {
		padding: 1.15rem;
	}

	.offcanvas--link {
		font-size: 1.12rem;
	}

	.process--step {
		grid-template-columns: 1fr;
	}

	.process--step p {
		grid-column: auto;
	}

	.process--step span {
		grid-row: auto;
	}

	.projectstory--gallery {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.projectstory--imagebox,
	.projectstory--imagebox--large {
		aspect-ratio: 1 / .72;
		grid-row: auto;
	}

	.site--container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.subhero {
		min-height: 390px;
	}

	.subhero--title {
		letter-spacing: -.035rem;
	}

	.topbar--contact {
		align-items: flex-start;
		flex-direction: column;
	}
}



/* END CSS */