/* Header Nav */
body {
	background-color: rgba(79, 124, 94, 1) !important;
}
#content {
 margin-top: 0 !important; /* remove margin that moved main content below masthead */
}
#masthead {
	display: none; /* hide masthead, but not header icons */
}
.header-phone-number,
.nav-icon-wrapper svg {
	color: black !important;
}
#open-mobile-menu .bar {
	background-color: black !important;
}

:root {
  --hero-scale: 1; /* default = mobile */
}
@media (min-width: 992px) {
  :root {
    --hero-scale: 0.8; 
  }
}

/* Page Content */
.page-header {
	height: 100dvh;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	background: rgba(79, 124, 94, 1);
}

/* ── DESKTOP (910px and above) ── */
.top-section {
	flex: 6;
	display: flex;
	align-items: stretch;
}
.top-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.logo-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-wrap img {
	height: calc(18vh * var(--hero-scale));
	width: auto;
}
.title-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	text-transform: uppercase;
	gap: calc(1.2vh * var(--hero-scale));
	letter-spacing: calc(0.18vh * var(--hero-scale));
	color: white;
}
.title-wrap h1 {
	margin: 0;
	font-size: calc(6.5vh * var(--hero-scale));
	font-weight: 400;
	line-height: 0.85;
	color: white;
}
.title-wrap p {
	margin: 0;
	font-weight: 500;
	font-size: calc(2.8vh * var(--hero-scale));
}
.buttons-wrap {
	display: flex;
	justify-content: center;
	gap: calc(6.4vh * var(--hero-scale));
}
.header-btn {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18vh;
	background-color: white;
	border: none;
	border-radius: 100px;
	text-decoration: none !important;
	color: black;
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	text-align: center;
	transition: .3s ease-in-out;
	padding: calc(1.75vh * var(--hero-scale)) 0;
	width: calc(45vh * var(--hero-scale));
	font-size: calc(2.48vh * var(--hero-scale));
}
.header-btn:hover {
	background-color: #1e592c;
	color: white;
}
.bottom-section {
	flex: 4;
	background: linear-gradient(
		0deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 1) 45%,
		rgba(79, 124, 94, 1) 55%,
		rgba(79, 124, 94, 1) 100%
	);
	overflow: hidden;
	padding-bottom: 3.125vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.watch-slideshow {
    position: relative;
    height: 100%;
    width: calc(100% * (1784 / 931)); /* aspect ratio of the images */
    max-width: 100%;
}

.watch-slideshow img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    transition: opacity 0.8s ease-in-out;
}

/* ── MOBILE (under 768px width) ── */
@media (max-width: 991px) {
	.top-section {
		flex: 67;
	}
	.bottom-section {
		flex: 33;
	}
	.title-wrap h1 {
		font-size: max(20.8px, 5.47vw);
	}
	.header-btn, .title-wrap p {
		font-size: 16px
	}
	.buttons-wrap {
		flex-direction: column;
		align-items: center;
		gap: 2.5vh;
	}
	.header-btn {
		width: clamp(335px, 124.4px + 50vw, 425px);
	}
}

/* ── MOBILE (under 481px width) ── */
@media (max-width: 481px) {

	.bottom-section {
		align-items: center;
		background: linear-gradient(
			0deg,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 1) 48%,
			rgba( 79, 124,  94, 1) 55%,
			rgba( 79, 124,  94, 1) 100%
		);
	}

	/* Logo fixed at 100x100 */
	.logo-wrap img {
		height: 100px;
		width: 100px;
	}

	/* Title: scale with vw, floor at 20.8px */
	.title-wrap {
		gap: 1vh;
		letter-spacing: 0.15vw;
	}
	.title-wrap h1 {
		font-size: max(20.8px, 5.5vw);
		line-height: 1; /* allow natural line breaks at small sizes */
		white-space: normal;
	}

	/* Buttons stacked, full-ish width */
	.header-btn {
		font-size: 16px;
		white-space: nowrap;
		width: clamp(300px, 124.4px + 26.13vw, 325px);
	}
}
@media (max-width: 350px) {
.header-btn {
		width: clamp(200px, 124.4px + 26.13vw, 325px);
	}
}