@media (max-width:900px) {

	.header {
		padding: 4px;
	}

	.mobileonly {
		display: block;
	}

	.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);*/
	}

}

@media (max-width:600px) {

	.pullout {
		width: 100%;
		height: calc(100vh - var(--header-height));
		background: #fff;
		font-size: 0.85rem;
	}

	.hero-image {
		position: absolute;
		width: 100%; /* only take up right side */
		height: 100%;
		background-position: 60% center;
	}

	.hero-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%; /* stretch across the whole hero */
		height: 100%;
		background: none;
		background-color: rgba(214,203,192,0.75);
		z-index: 1;
		pointer-events: none;
	}

	.hero-overlay {
		width:100%;
		align-items: center; /* center horizontally in flexbox */
		text-align: center; /* center the text itself */
	}
		.hero-overlay h1,
		.hero-overlay h2 {
			text-shadow: 0 0 4px rgba(214,203,192,1), /* wide bright glow */
			0 0 5px rgba(214,203,192,0.8), /* secondary halo */
			0 0 7px rgba(214,203,192,0.6); /* softer outer glow */
		}
}