@font-face {
	font-family: "BourtonLineMedium";
	src: url('../../MyWebfontsKit/webFonts/BourtonLineMedium/font.woff2') format('woff2'),
	     url('../../MyWebfontsKit/webFonts/BourtonLineMedium/font.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.font-headings,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5 {
	font-family: "BourtonLineMedium", serif;
}

.font-bodytext,
.paragraph, .text-block p,
.text-block.small-paragraph p {
	font-family: "Source Serif 4", serif;
	font-weight: 300;
}

.text-block h1,
.text-block h2,
.text-block .heading-3 p, .text-block h3,
.text-block h4,
.text-block h5 {
	font-family: "Source Serif 4", serif;
}

.heading-2:after,
h3.heading-2:after {
	content: none;
}

.title-treatment svg {
	color: #fff;
	width: 112.5%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* Each letter of the wordmark is its own <path>; fade them in individually
   with a fixed but non-sequential (shuffled) set of delays so the reveal
   reads as random rather than a left-to-right sweep. */
.letter-fade-group path {
	opacity: 0;
	filter: blur(20px);
	animation: blurIn 1s ease-out forwards;
}

.letter-fade-group path:nth-child(1) { animation-delay: 0.6s; }
.letter-fade-group path:nth-child(2) { animation-delay: 0.24s; }
.letter-fade-group path:nth-child(3) { animation-delay: 1.08s; }
.letter-fade-group path:nth-child(4) { animation-delay: 0.48s; }
.letter-fade-group path:nth-child(5) { animation-delay: 0.84s; }
.letter-fade-group path:nth-child(6) { animation-delay: 0s; }
.letter-fade-group path:nth-child(7) { animation-delay: 0.96s; }
.letter-fade-group path:nth-child(8) { animation-delay: 0.36s; }
.letter-fade-group path:nth-child(9) { animation-delay: 0.72s; }
.letter-fade-group path:nth-child(10) { animation-delay: 0.12s; }

.tagline .paragraph {
	color: #fff;
	font-size: 18.98px;
	margin-top: calc(8.8px + 2vh);
}

@media (min-width: 768px) {
	.tagline .paragraph {
		font-size: 20.7px;
		margin-top: calc(17.6px + 2vh);
	}
}

@media (min-width: 1300px) {
	.tagline .paragraph {
		font-size: 22.43px;
	}
}

@media (min-width: 1536px) {
	.tagline .paragraph {
		font-size: 23.29px;
	}
}

body.home .landing-wrapper .button {
	border-color: #fff;
	color: #fff;
}

body.home .landing-wrapper .button.uk-button svg path {
	fill: #fff;
}

.teaser-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.teaser-button .teaser-label {
	font-family: "EB Garamond", serif;
	font-weight: 600 !important;
	font-style: normal;
	text-transform: none;
	letter-spacing: .02em;
	font-size: 17.08px;
}

@media (min-width: 768px) {
	.teaser-button .teaser-label {
		font-size: 18.63px;
	}
}

@media (min-width: 1300px) {
	.teaser-button .teaser-label {
		font-size: 20.19px;
	}
}

@media (min-width: 1536px) {
	.teaser-button .teaser-label {
		font-size: 20.96px;
	}
}

.header-laurels {
	position: absolute;
	top: 19.3vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.header-laurels img {
	width: 4.5rem;
	height: auto;
}

.header-laurels img:nth-child(2) {
	width: 5.445rem;
}

.header-laurels img:nth-child(3) {
	position: relative;
	top: -0.4rem;
}

@media (min-width: 640px) {
	.header-laurels {
		top: 20.3vh;
		gap: 1.5rem;
	}
	.header-laurels img {
		width: 5.5rem;
	}
	.header-laurels img:nth-child(2) {
		width: 6.655rem;
	}
}

/* Below lg the fixed mobile menu button sits top-right, but the laurels are
   already well clear of it by this point since they sit near the heading. */
@media (min-width: 1024px) {
	.header-laurels {
		top: 17.6vh;
		gap: 2rem;
	}
	.header-laurels img {
		width: 7rem;
	}
	.header-laurels img:nth-child(2) {
		width: 8.47rem;
	}
}

/* Large breathing room between the "those who don't" intro copy and the
   footer image below it, matching the site's existing section-padding scale. */
#about {
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	#about {
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	#about {
		padding-bottom: 5rem;
	}
}

@media (min-width: 1300px) {
	#about {
		padding-bottom: 6rem;
	}
}

@media (min-width: 1536px) {
	#about {
		padding-bottom: 7rem;
	}
}

/* Match the hero vignette's dark, warm-tinted colour so the transition into
   the intro copy feels continuous rather than a hard cut back to navy. */
#allie-intro {
	background-color: #140900;
	color: #fff;
}

#allie-intro .justify-text {
	text-align: center !important;
}

/* Dark orange vignette over the footer photo, matching the hero video's
   radial + bottom-weighted gradient treatment (not a flat tint). */
.footer-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse at center, rgba(20, 9, 0, 0) 60%, rgba(20, 9, 0, 0.55) 100%),
		linear-gradient(to bottom, rgba(20, 9, 0, 0) 94%, rgba(20, 9, 0, 0.45) 100%);
	z-index: 1;
}

/* Kill the navy bg-darkblue.svg tile at the source so no dark blue can show
   through any gap, lazy-load flash, or section on the home page. */
body.home {
	background: #140900;
}

.social-above-billing-block {
	display: flex;
	justify-content: center;
	margin-top: 6rem;
	fill: #fff;
}

.billing-block {
	margin-top: 1.5rem;
	width: 135%;
	position: relative;
	left: 53%;
	transform: translateX(-50%);
}

@media (min-width: 768px) {
	.billing-block {
		margin-top: 2rem;
	}
}