@media (max-width:900px) {
	brand {
		display: flex;
		align-items: center;
		gap: 0px;
	}

	.brand img {
		height: 35px;
		width: auto;
	}

	.logotext {
		margin-left: 0px;
		font-weight: 800;
		font-size: 20px;
		letter-spacing: 0.06em;
		color: var(--brand);
	}

	img.logotext {
		height: 20px;
		width: auto;
		object-fit: contain;
	}

	select, input[type=number] {
		padding: 6px;
		border-radius: 10px;
	}
}

/* Phone */
@media (max-width:768px) {

	.mobileonly {
		display: block;
	}

	/*	.menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		z-index: 1000;
	}
		.menu-overlay.hide {
			display: none;
		}

		.menu-overlay.show {
			display: block;
		}

			.menu-overlay.show .menu-panel {
				transform: translateX(0);
			}*/

	.menu-serve {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: transparent;
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	}

		.menu-serve.show {
			/*display: block;*/
			opacity: 1;
			visibility: visible;
		}

		.menu-serve.hide {
			/*display: none;*/
			opacity: 0;
			visibility: hidden;
		}

	.mobile-menu {
		/*display: none;*/
		flex-direction: column;
		background-color: white;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		padding: 1rem;
		position: absolute;
		height: 100vh;
		top: 0px;
		right: 0px;
		z-index: 1000;
		font-size: 1.5em;
		box-shadow: -6px 0 16px rgba(0, 0, 0, 0.2);
		/* border-left: 1px solid #e0d7cf; soft beige or comfort tone */
		/*box-shadow: -6px 0 16px rgba(50, 30, 20, 0.25);*/
	}


	h1 {
		font-size: 2.1em;
	}

	body {
		font-size: 0.8em;
		padding: 8px;
	}

	section {
		padding: 20px 0
	}


	.nav, .sidebar {
		display: none;
	}

	.hero {
		padding: 5px 0;
		background: radial-gradient(800px 400px at 15% -10%, rgba(46,19,94,.08), transparent 60%), radial-gradient(700px 320px at 95% 0%, rgba(255,106,0,.10), transparent 55%);
	}

	.main-content {
		width: 100%;
	}

	input[type=number] {
		width: 100px;
	}

	.btn {
		padding: 7px 10px;
	}
}

@media (max-width:600px) {
	h1 {
		font-size: 2em;
	}

	.xgrid-2 {
		grid-template-columns: 1fr;
	}
}