:root {
	--color-bg: #fff;
	--color-text: #000;
	--page-bg: #74022a;
	--accent: #d3ad7f;
	--header-height: 14.5rem;
}

* {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	transition: .2s linear;
}

html {
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-padding-top: 14.5rem;
	scroll-behavior: smooth;
}

body {
	background: var(--page-bg);
	color: var(--color-text);
}

/* General inline text links (phone numbers in body copy, etc.) -- the
   browser default blue/purple reads poorly against the maroon page
   background. Nav links, buttons, and the footer credit link all have
   their own more specific color rules further down, so they're
   unaffected by this. */
a {
	color: var(--accent);
}

a:visited {
	color: var(--accent);
}

section {
	padding: 2rem 7%;
}

.heading {
	text-align: center;
	color: #fff;
	padding-bottom: 3.5rem;
	font-size: 4rem;
}

.btn {
	margin-top: 1rem;
	display: inline-block;
	padding: .9rem 3rem;
	font-size: 1.7rem;
	color: var(--color-bg);
	background: var(--color-text);
	cursor: pointer;
}

.header {
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 1.5rem 7%;
	border-bottom: .1rem solid var(--color-text);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* Forces the ticker onto its own full-width row below the logo/nav/
   icons row -- a flex item with flex-basis 100% always wraps onto a
   new line in a flex-wrap container, same trick used without an extra
   wrapper element around the rest of the header's children (which
   would otherwise change what .header .navbar's position:absolute;
   top:100% (mobile menu) is measured against). */
.header .ticker {
	flex: 1 0 100%;
	margin: 1rem -7% 0;
}

.header .logo img {
	height: 6rem;
}

.header .navbar a {
	margin: 0 1rem;
	font-size: 1.6rem;
	color: var(--color-text);
}

.header .icons a,
.header .icons button {
	color: var(--color-text);
	background: none;
	cursor: pointer;
	font-size: 1.6rem;
	margin-left: 2rem;
}

#menu-btn {
	display: none;
}

.home {
	padding-top: var(--header-height);
	text-align: center;
}

/* Seasonal scrolling ticker, living in the fixed header (see
   ".header .ticker" above) so it stays visible while the page scrolls,
   rather than living in .home and scrolling out of view with the rest
   of the page. Two identical copies of the message sit side by side
   and the track scrolls left by exactly one copy's width (-50%), so
   the moment the first copy scrolls fully offscreen the second is
   sitting in its exact starting position -- a seamless, gap-free
   loop. */
.ticker {
	overflow: hidden;
	white-space: nowrap;
	background: var(--accent);
}

.ticker-track {
	display: inline-flex;
	width: max-content;
	animation: ticker-scroll 18s linear infinite;
}

.ticker-text {
	display: inline-block;
	padding: 1rem 4rem;
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--page-bg);
}

@keyframes ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ticker-track {
		animation: none;
	}
}

.home .hero-image {
	width: 100%;
	display: block;
}

.home .content {
	max-width: 60rem;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.home .content h3 {
	font-size: 6rem;
	color: #fff;
}

.home .content p {
	font-size: 2rem;
	font-weight: lighter;
	line-height: 1.8;
	padding: 1rem 0;
	color: #fff;
}

.about .row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: var(--color-bg);
}

.about .row .image {
	flex: 1 1 35rem;
}

.about .row .image img {
	width: 100%;
	display: block;
}

.about .row .content {
	flex: 1 1 55rem;
	padding: 2rem;
}

.about .row .content h3 {
	font-size: 3rem;
}

.about .row .content p {
	font-size: 1.6rem;
	padding: 1rem 0;
	line-height: 1.8;
}

.packages-note {
	text-align: center;
	font-size: 1.6rem;
	color: #fff;
	opacity: .7;
	padding-bottom: 3rem;
}

.carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.carousel-track {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding: 1rem;
}

.carousel-card {
	flex: 0 0 30rem;
	scroll-snap-align: start;
	background: var(--color-bg);
	border-radius: .5rem;
	padding: 2rem;
}

/* Invisible, non-snapping. Without it, the browser physically can't
   scroll far enough to make the last card (or its clone) the leftmost
   visible one whenever the track shows more than one card at a time --
   there's nothing after it to fill the rest of the viewport, so the
   scroll position needed just doesn't exist. This reserves that
   trailing space so it does. */
.carousel-spacer {
	flex: 0 0 auto;
	width: calc(100% - 30rem);
}

.carousel-card h3 {
	font-size: 2.2rem;
	padding-bottom: 1rem;
	text-align: center;
}

.carousel-card ul {
	list-style: none;
	font-size: 1.5rem;
	line-height: 1.9;
}

.carousel-btn {
	flex: 0 0 auto;
	background: var(--color-bg);
	border: .1rem solid var(--color-text);
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	font-size: 1.6rem;
	cursor: pointer;
}

.carousel-btn:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

@media (max-width: 600px) {
	.carousel-btn {
		display: none;
	}
}

.footer {
	text-align: center;
	background: var(--color-bg);
	border-top: .1rem solid var(--color-text);
}

.footer-sign {
	display: block;
	height: 10rem;
	width: auto;
	margin: 2rem auto 0;
}

.footer-info {
	padding-top: 1rem;
	font-size: 1.6rem;
	line-height: 1.8;
}

.footer .share {
	padding: 1rem 0;
}

.footer .share a {
	display: inline-block;
	padding: .5rem 1.5rem;
	font-size: 1.6rem;
	color: var(--color-text);
	border: .1rem solid var(--color-text);
	margin: .3rem;
	border-radius: 5rem;
}

.footer .links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 2rem 0;
	gap: 1rem;
}

.footer .links a {
	padding: .7rem 2rem;
	color: var(--color-text);
	border: .1rem solid var(--color-text);
	font-size: 2rem;
}

.footer .credit {
	font-size: 1.6rem;
	font-weight: lighter;
	padding: 1.5rem;
}

.footer .credit a {
	color: var(--color-text);
	font-weight: bolder;
}

@media (max-width: 991px) {

	html {
		font-size: 55%;
	}

	.header {
		padding: 1.5rem 2rem;
	}

	section {
		padding: 2rem;
	}

	.header .ticker {
		margin: 1rem -2rem 0;
	}

	.about .row .image,
	.about .row .content {
		flex: 1 1 100%;
	}

	.about .row .image img {
		width: 75%;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {

	#menu-btn {
		display: inline-block;
	}

	.header .navbar {
		position: absolute;
		top: 100%;
		right: -100%;
		background: var(--color-bg);
		border: .1rem solid var(--color-text);
		width: 30rem;
		height: calc(100vh - var(--header-height) - 0.5rem);
	}

	.header .navbar.active {
		right: 0;
	}

	.header .navbar a {
		color: var(--color-text);
		display: block;
		margin: 1.5rem;
		padding: .5rem;
		font-size: 2rem;
	}

	.home .content h3 {
		font-size: 4.5rem;
	}

	.home .content p {
		font-size: 1.5rem;
	}
}

@media (max-width: 450px) {

	html {
		font-size: 55%;
	}
}