/* Static homepage hero, replaces Slider Revolution "slider-1".
   Mirrors the original slide: 1240x900 grid, layers at y=200/400/600, scaled down proportionally. */
.ar-hero {
	position: relative;
	width: 100%;
	height: min(900px, 72.58vw);
	background: #fff url("/wp-content/uploads/2019/10/2-%E2%80%93-1.jpg") center / cover no-repeat;
	overflow: hidden;
}

.ar-hero__inner {
	position: relative;
	max-width: 1240px;
	height: 100%;
	margin: 0 auto;
}

.ar-hero__title,
.ar-hero__text,
.ar-hero__btn {
	position: absolute;
	left: 0;
	margin: 0;
	color: #000;
}

.ar-hero__title {
	top: min(200px, 16.13vw);
	width: min(701px, 56.53vw);
	font: 700 min(48px, 3.871vw) / 1.21 Raleway, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ar-hero__title span {
	color: #f03c03;
}

.ar-hero__text {
	top: min(400px, 32.26vw);
	width: min(632px, 50.97vw);
	font: 400 min(24px, 1.935vw) / 1.333 "Open Sans", sans-serif;
	letter-spacing: 2px;
}

.ar-hero__btn {
	top: min(600px, 48.39vw);
	padding: min(8px, 0.645vw) min(60px, 4.839vw);
	border-radius: 40px;
	background: #f26132;
	box-shadow: 4px 4px 15px 4px #afafaf;
	color: #fff;
	font: 400 min(24px, 1.935vw) / min(44px, 3.548vw) Roboto, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.ar-hero__btn:hover,
.ar-hero__btn:focus-visible {
	color: #fff;
	filter: brightness(120%);
}

/* Below 1240px the grid hugs the viewport edge; give the copy some breathing room. */
@media (max-width: 1280px) {
	.ar-hero__inner {
		margin: 0 20px;
	}
}

/* Phones: proportional scaling makes text unreadable, so switch to a stacked layout. */
@media (max-width: 777px) {
	.ar-hero {
		height: auto;
		background-position: 70% bottom;
		background-size: auto 100%;
	}

	.ar-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.82);
	}

	.ar-hero__inner {
		margin: 0;
		padding: 40px 16px 48px;
	}

	.ar-hero__title,
	.ar-hero__text,
	.ar-hero__btn {
		position: relative;
		top: auto;
		width: auto;
	}

	.ar-hero__title {
		font-size: 28px;
		line-height: 1.25;
	}

	.ar-hero__text {
		margin-top: 16px;
		font-size: 17px;
		line-height: 1.5;
		letter-spacing: 1px;
	}

	.ar-hero__btn {
		display: inline-block;
		margin-top: 24px;
		padding: 8px 40px;
		font-size: 18px;
		line-height: 36px;
	}
}