/* =========================================================
   TABLET / KLEIN DESKTOP
   ========================================================= */

@media (max-width: 1120px) {

	.site-header__logo-strip {
		display: none;
	}

	.site-branding {
		display: block;

		margin-right: auto;
	}

	.site-navigation--desktop,
	.site-header__mail,
	.site-header__phone,
	.site-header__cta {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	.home-hero__grid {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(360px, 0.8fr);

		gap: 50px;
	}

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

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

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

}


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

@media (max-width: 900px) {

	.home-hero {
		min-height: auto;
	}

	.home-hero__grid {
		grid-template-columns: 1fr;

		padding-block: 70px;
	}

	.home-hero__content {
		max-width: 760px;
	}

	.home-hero__visual {
		max-width: 560px;

		margin-inline: auto;
	}

	.road-illustration {
		margin-inline: auto;
	}

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

	.trust-item:nth-child(2) {
		border-right:
			1px solid
			var(--joyce-border);
	}

	.trust-item:nth-child(3) {
		border-top:
			1px solid
			var(--joyce-border);

		border-left:
			1px solid
			var(--joyce-border);
	}

	.trust-item:nth-child(4) {
		border-top:
			1px solid
			var(--joyce-border);
	}

	.guidance-section__grid,
	.about-section__grid,
	.contact-cta__panel {
		grid-template-columns: 1fr;
	}

	.guidance-section__content {
		max-width: 760px;
	}

	.guidance-card {
		max-width: 650px;
	}

	.about-section__visual {
		max-width: 620px;
	}

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

	.site-footer__grid {
		gap: 50px;
	}

}


/* =========================================================
   WORDPRESS ADMINBAR
   ========================================================= */

@media (max-width: 782px) {

	.admin-bar .site-header {
		top: 46px;
	}

	.admin-bar .mobile-navigation {
		top:
			calc(
				var(--joyce-header-height)
				+
				46px
			);
	}

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 680px) {

	:root {
		--joyce-header-height: 78px;
	}

	body {
		font-size: 16px;
	}

	.joyce-container {
		width:
			min(
				calc(100% - 30px),
				var(--joyce-container)
			);
	}

	.joyce-section {
		padding-block: 72px;
	}

	.site-header__inner {
		gap: 15px;
	}

	.site-branding {
		flex-basis: 220px;
	}

	.site-branding img {
		max-width: 215px;
		max-height: 62px;
	}

	.home-hero__grid {
		padding-block:
			55px
			68px;
	}

	.home-hero__title {
		font-size:
			clamp(
				2.45rem,
				12vw,
				3.35rem
			);
	}

	.home-hero__actions {
		display: grid;
	}

	.home-hero__actions
	.joyce-button {
		width: 100%;
	}

	.home-hero__benefits {
		display: grid;
	}

	.road-illustration {
		border-width: 7px;
		border-radius: 29px;
	}

	.road-illustration__badge {
		right: 14px;
		bottom: 14px;
	}

	.trust-bar__grid,
	.service-grid,
	.approach-steps,
	.about-section__highlights,
	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.trust-item {
		min-height: 100px;

		border-right:
			1px solid
			var(--joyce-border);

		border-bottom:
			1px solid
			var(--joyce-border);

		border-left:
			1px solid
			var(--joyce-border);
	}

	.trust-item:nth-child(2),
	.trust-item:nth-child(3),
	.trust-item:nth-child(4) {
		border-top: 0;
	}

	.service-card {
		min-height: 315px;
	}

	.approach-step {
		min-height: auto;
	}

	.approach-step__number {
		margin-bottom: 28px;
	}

	.about-section__visual {
		min-height: 420px;
	}

	.about-monogram {
		width: 92%;
		height: 350px;
	}

	.about-section__quote {
		width: 88%;
	}

	.contact-cta {
		padding-top: 0;
	}

	.contact-cta__panel {
		gap: 35px;

		padding:
			36px
			24px;

		border-radius: 22px;
	}

	.contact-cta__actions {
		grid-template-columns: 1fr;
	}

	.site-footer__main {
		padding-block:
			60px
			50px;
	}

	.site-footer__bottom-inner {
		flex-direction: column;

		justify-content: center;

		padding-block: 22px;

		text-align: center;
	}

}


/* =========================================================
   ZEER KLEIN MOBIEL
   ========================================================= */

@media (max-width: 390px) {

	.site-branding img {
		max-width: 185px;
	}

	.menu-toggle {
		width: 44px;
		height: 44px;
	}

	.road-illustration__badge-text {
		display: none;
	}

	.road-illustration__badge {
		padding: 8px;
	}

}


/* =========================================================
   MOBIEL HAMBURGERMENU
   ========================================================= */

.mobile-navigation[hidden] {
	display: none !important;
}


@media (max-width: 1120px) {

	body.menu-open {
		overflow: hidden;
	}

	.mobile-navigation.is-open {
		position: fixed;

		top:
			var(--joyce-header-height);

		right: 0;
		bottom: 0;
		left: 0;

		z-index: 9999;

		display: block !important;

		height:
			calc(
				100dvh -
				var(--joyce-header-height)
			);

		overflow-x: hidden;
		overflow-y: auto;

		border-top:
			1px solid
			var(--joyce-border);

		background:
			var(--joyce-white);

		box-shadow:
			0 22px 45px
			rgba(
				32,
				41,
				77,
				0.14
			);
	}

	.admin-bar
	.mobile-navigation.is-open {
		top:
			calc(
				var(--joyce-header-height)
				+
				32px
			);

		height:
			calc(
				100dvh -
				var(--joyce-header-height)
				-
				32px
			);
	}

	.mobile-navigation__inner {
		display: flex;

		min-height: 100%;

		flex-direction: column;

		padding-top: 22px;
		padding-bottom: 35px;
	}

	.mobile-navigation__nav,
	.mobile-navigation__list {
		width: 100%;
	}

	.mobile-navigation__list {
		display: block;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.mobile-navigation__list > li {
		display: block;

		width: 100%;

		border-bottom:
			1px solid
			var(--joyce-border);
	}

	.mobile-navigation__list a {
		display: flex;

		width: 100%;

		align-items: center;

		padding:
			15px
			12px;

		color:
			var(--joyce-heading);

		font-size: 1.05rem;
		font-weight: 750;

		text-decoration: none;
	}

	.mobile-navigation .sub-menu {
		position: static !important;

		display: block !important;

		min-width: 0 !important;

		margin:
			0
			0
			8px !important;

		padding:
			0
			0
			0
			18px !important;

		border: 0 !important;
		border-radius: 0 !important;

		background:
			transparent !important;

		box-shadow:
			none !important;

		list-style:
			none !important;

		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;

		transform:
			none !important;
	}

	.mobile-navigation
	.sub-menu::before {
		display: none !important;
	}

	.mobile-navigation
	.sub-menu li {
		border: 0;
	}

	.mobile-navigation
	.sub-menu a {
		padding:
			11px
			13px;

		color:
			var(--joyce-muted);

		font-size: 0.94rem;
		font-weight: 650;
	}

	.mobile-navigation__actions {
		display: grid;

		gap: 12px;

		margin-top: auto;

		padding-top: 26px;
	}

}


/* =========================================================
   ADMINBAR MOBIEL MENU
   ========================================================= */

@media (max-width: 782px) {

	.admin-bar
	.mobile-navigation.is-open {
		top:
			calc(
				var(--joyce-header-height)
				+
				46px
			);

		height:
			calc(
				100dvh -
				var(--joyce-header-height)
				-
				46px
			);
	}

}