@font-face {
	font-family: 'Dolce Vita Heavy Bold';
	src: url('../fonts/Dolce Vita Heavy Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Dolce Vita Light';
	src: url('../fonts/Dolce Vita Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Dolce Vita';
	src: url('../fonts/Dolce Vita.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@keyframes slide-up-in {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

:root {
	/* Page */
	--p-min: 360;
	--p-max: 1600;
	/* Spacing */
	--s: 6px;
	--s-xs: calc(var(--s) * 2);
	--s-sm: calc(var(--s) * 4);
	--s-md: calc(var(--s) * 8);
	--s-lg: calc(var(--s) * 16);
	--s-xl: calc(var(--s) * 32);
	--s-icon-sm: 18px;
	--s-icon-md: 24px;
	--s-icon-lg: 32px;
	--s-icon-xl: 40px;
	/* Width */
	--w: 111px;
	--w-xs: calc(var(--w) * 3);
	--w-sm: calc(var(--w) * 4);
	--w-md: calc(var(--w) * 5);
	--w-lg: calc(var(--w) * 7);
	--w-xl: calc(var(--w) * 10);
	/* height */
	--h-header: var(--s-lg);
	/* Whole header incl. the masthead; heroes subtract this. JS measures both. */
	--h-header-full: var(--s-xl);
	/* Color */
	--c-white: #FFF;
	--c-black: #000;
	--c-blue-lt: #b2ccd8;
	--c-blue-dk: rgba(87, 133, 167, 1);
	--c-link: #588fab;
	--c-beige: rgba(255, 250, 214, 1);
	--c-rose: rgba(255, 230, 245, 1);
	--c-peach: rgba(255, 237, 214, 1);
	--c-bg-lt: #F1F1F9;
	--c-bg-md: rgba(223, 236, 244, 1);
	--c-fg-md: #55575D;
	--c-fg-dk: #1A1D24;
	--c-br-lt: #C5D4DC;
	--c-br-dk: #252F3D;
	/* Font */
	--f-h-bd: "Dolce Vita Heavy Bold", sans-serif;
	--f-h: "Dolce Vita", sans-serif;
	--f-h-lt: "Dolce Vita Light", sans-serif;
	--f-b: "Roboto", sans-serif;
	--f-l: "Montserrat", sans-serif;
	/* Animation */
	--a-s-xs: 160ms;
	--a-s-sm: 240ms;
	--a-s-md: 360ms;
	--a-s-lg: 666ms; /* The Devil's speed */
	--a-s-xl: 999ms;
	--a-xs: var(--a-s-xs) ease-in-out;
	--a-sm: var(--a-s-sm) ease-in-out;
	--a-md: var(--a-s-md) ease-in-out;
	--a-lg: var(--a-s-lg) ease-in-out;
	--a-xl: var(--a-s-xl) ease-in-out;
}

@media screen and (min-width: 1600px) {
	:root {
		--p-screen: calc(var(--p-max) * 1px);
	}
}

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	position: relative;
	/* WordPress used to supply the base typography; without it, anything not
	   carrying a btw-b-* / btw-h-* utility falls back to the UA serif at 16px.
	   18 of the component stylesheets declare no family of their own. The sizes
	   below are the theme's: 13px below 960, 15px above. */
	font-family: var(--f-b);
	font-size: 0.8125rem;
	line-height: 1.55;
	overflow-x: hidden;
	min-width: calc(var(--p-min) * 1px);
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;

	@media (min-width: 960px) {
		font-size: 0.9375rem;
		line-height: 1.73;
	}
}

dialog {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* The UA italicises <address>; the theme's reset did not, so the footer address
   read upright on the live site. */
address {
	font-style: normal;
}

/* Lists are structural by default — nav items, card grids, feature rows. Markers
   and the UA's 40px indent belong only to prose, which .btw-rich opts back into. */
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

[id] {
	scroll-margin-top: var(--h-header);
}

/* Inline links in body copy. WordPress supplied these globally, so removing it left
   every link that is not a button or a nav item at the browser default blue. The
   colour and the hover-only underline match what the theme was applying.
   Betheme also set outline:0 here; that is deliberately not carried over — it
   removes the focus ring for keyboard users. */
a {
	color: var(--c-link);
	cursor: pointer;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}

	&[name] {
		display: inline-block;
		height: 0;
		line-height: 0;
	}
}

sub {
	vertical-align: sub;
	font-size: 0.5em;
}

sup {
	vertical-align: super;
	font-size: 0.5em;
}

img {
	display: block;
	max-width: 100%;
}

hr {
	border: 0;
	border-bottom: 1px solid var(--c-br-dk);
}

img {
	display: block;
}

svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Remove search close button from input */
[type=text]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

[type=text]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
	display: none;
}

[type="text"],
[type="number"],
[type="search"],
[type="password"],
[type="email"],
[type="tel"],
[type="radio"],
[type="checkbox"],
[type="reset"],
[type="submit"],
select,
textarea {
	appearance: none;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	outline: 0;

	&:-ms-expand {
		display: none;
	}
}

[type="checkbox"],
[type="radio"] {
	display: inline-block;
	width: var(--s-xs);
	height: var(--s-xs);
	margin: 0 3px 0 0;
	vertical-align: middle;
}

[type="radio"] {
	border-radius: 50%;
}

[type="file"],
[type="reset"],
[type="submit"],
label {
	cursor: pointer;
}

button {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;

	&:disabled {
		cursor: inherit;
	}
}

details summary{
	list-style-type: none;

	&::-webkit-details-marker {
		display: none;
	}
}

.btw-h-xl {
	margin: 0;
	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 1em;
	font-family: var(--f-h-lt);
	font-weight: light;
	text-wrap: balance;
	color: var(--c-fg-dk);
}

.btw-h-lg {
	margin: 0;
	font-size: clamp(2.75rem, 5vw, 4.75rem);
	line-height: 1.1em;
	font-family: var(--f-h);
	font-weight: normal;
	letter-spacing: 1px;
	text-wrap: balance;
	color: var(--c-fg-dk);
}

.btw-h-md {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.1em;
	font-family: var(--f-h-bd);
	font-weight: bold;
	letter-spacing: 1px;
	text-wrap: balance;
	color: var(--c-fg-dk);
}

.btw-h-sm {
	margin: 0;
	font-size: clamp(1rem, 3vw, 1.5rem);
	line-height: 1.1em;
	font-family: var(--f-h-bd);
	font-weight: bold;
	letter-spacing: 1px;
	text-wrap: balance;
}

.btw-h-xs {
	margin: 0;
	font-size: clamp(0.875rem, 2.5vw, 1.25rem);
	line-height: 1.1em;
	font-family: var(--f-h-bd);
	font-weight: bold;
	letter-spacing: 1px;
	text-wrap: balance;
	color: var(--c-fg-dk);
}

.btw-b-xl {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.5em;
	font-family: var(--f-b);
	color: var(--c-fg-md);
}

.btw-b-lg {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	line-height: 1.5em;
	font-family: var(--f-b);
	color: var(--c-fg-md);
}

.btw-b-md {
	margin: 0;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	line-height: 1.6em;
	font-family: var(--f-b);
	color: var(--c-fg-md);
}

.btw-b-sm {
	margin: 0;
	font-size: clamp(0.875rem, 2vw, 1rem);
	line-height: 1.25em;
	font-family: var(--f-b);
	color: var(--c-fg-md);
}

.btw-b-xs {
	margin: 0;
	font-size: clamp(0.75rem, 1.5vw, 0.875rem);
	line-height: 1.15em;
	font-family: var(--f-b);
	font-style: italic;
	color: var(--c-fg-md);
}

.btw-rich {
	& ol,
	& ul {
		margin: 0 0 0 var(--s-xs);
		padding-left: var(--s-sm);

		> li {
			padding-left: var(--s-xs);

			&:not(:first-child) {
				margin-top: var(--s-xs);
			}
		}
	}

	& ol { list-style-type: decimal; }
	& ul { list-style-type: disc; }

	/* Rich text arrives as bare markup, so headings inside it carry no utility
	   class and would otherwise render at UA sizes. */
	& :is(h2, h3, h4) {
		font-family: var(--f-h-bd);
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: 1px;
		color: var(--c-fg-dk);
		text-wrap: balance;
	}

	& h2 { font-size: clamp(1rem, 3vw, 1.5rem); }
	& h3 { font-size: clamp(0.875rem, 2.5vw, 1.25rem); }
	& h4 { font-size: 1em; }

	/* Headings need more air above them than the generic sibling rule gives. */
	> * + :is(h2, h3, h4) {
		margin-top: var(--s-sm);
	}

	& strong {
		font-weight: bold;
	}

	& a {
		color: var(--c-blue-dk);
	}

	> * + * {
		margin-top: var(--s-xs);
	}
}

@keyframes scale-in {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

.btw-highlight {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: -0.15em;
		left: 0;
		width: 100%;
		height: 0.65em;
		transform: scaleX(0);
		transform-origin: right;
		background: linear-gradient(90deg, var(--c-blue-dk), color-mix(in srgb, var(--c-blue-dk), transparent 50%) 35%);
		animation: scale-in var(--a-lg) forwards;
		animation-delay: var(--a-s-lg);
	}

	> span {
		position: relative;
	}
}

.btw-link {
	color: var(--c-blue-dk);
	font-size: clamp(0.85rem, 2vw, 1rem);
	font-family: var(--f-l);
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--a-sm);

	&:hover {
		color: var(--c-blue-lt);
		text-decoration: underline;
	}

	&.size-lg {
		font-size: clamp(1rem, 2.5vw, 1.25rem);
	}
}

.btw-btn {
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: var(--s-md);
	padding: 0 var(--s-sm);
	outline: calc(var(--s) * 0.5) solid var(--c-blue-lt);
	border-radius: var(--s-sm);
	text-decoration: none;
	font-size: clamp(0.85rem, 2vw, 1rem);
	font-family: var(--f-l);
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color var(--a-sm), background-color var(--a-sm);

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(-1 * var(--s-md));
		display: block;
		width: calc(100% + (var(--s-md) * 2));
		height: 100%;
		transform-origin: right;
		transform: scaleX(0);
		clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
		transition: transform var(--a-md);
	}

	&:hover{
		text-decoration: none;

		&:before {
			transform-origin: left;
			transform: scaleX(1);
		}
	}

	> span {
		position: relative;
	}

	&.type-primary {
		background-color: var(--c-black);
		color: var(--c-white) !important;
		outline-color: var(--c-blue-lt);

		&:before {
			background-color: var(--c-blue-lt);
		}

		&:hover {
			color: var(--c-white) !important;
		}

		&.inverted {
			background-color: var(--c-white);
			color: var(--c-black) !important; /* beat .type-primary's !important white */
			outline-color: var(--c-blue-lt);

			&:before {
				background-color: var(--c-blue-lt);
			}

			&:hover {
				color: var(--c-white) !important;
			}
		}
	}

	&.type-secondary {
		background-color: transparent;
		color: var(--c-black);
		outline-color: var(--c-blue-lt);

		&:before {
			background-color: var(--c-blue-lt);
		}

		&:hover {
			color: var(--c-white) !important;
		}

		&.inverted {
			color: var(--c-white);
		}
	}

	&.long {
		white-space: normal;
		line-height: 1.5;
		padding-top: var(--s-xs);
		padding-bottom: var(--s-xs);
		text-align: center;
	}
}

.btw-card {
	position: relative;
	overflow: hidden;
	padding: calc(var(--s-sm) * 1.5);
	background-color: var(--c-white);
	box-shadow: var(--s) var(--s) var(--s) rgba(0, 0, 0, 0.25);
	border: 1px solid var(--c-br-lt);
	border-top-left-radius: var(--s-sm);
	border-bottom-right-radius: var(--s-sm);
}

.btw-reviews {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: calc(2 * var(--w));
	border: 1px solid var(--c-br-lt);
	border-radius: var(--s-xs);
	transition: box-shadow var(--a-sm);

	> svg {
		padding: var(--s) var(--s-xs);
	}

	> span {
		width: 100%;
		padding: var(--s) var(--s-xs);
		border-top: 1px solid var(--c-br-lt);
		text-align: center;
		transition: background-color var(--a-sm), color var(--a-sm);
	}

	&:hover {
		text-decoration: none;
		box-shadow: 0 0 var(--s) rgba(0, 0, 0, 0.25);

		> span {
			background-color: var(--c-blue-lt);
			color: var(--c-white);
		}
	}
}

.btw-s-md {
	padding: var(--s-md) var(--s-sm);

	@media (min-width: 768px) {
		padding: var(--s-lg) var(--s-md);
	}

	@media (min-width: 1600px) {
		padding: var(--s-lg) max(var(--s-lg), calc(100vw - (var(--p-max) * 1px)) / 2);
	}
}

.btw-s-lg {
	padding: var(--s-md) var(--s-sm);

	@media (min-width: 768px) {
		padding: var(--s-xl) var(--s-md);
	}

	@media (min-width: 1600px) {
		padding: var(--s-xl) max(var(--s-lg), calc(100vw - (var(--p-max) * 1px)) / 2);
	}
}

@property --reveal-position {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

.btw-view-watch {
	opacity: 0;
	transform: translateY(calc(0.5 * var(--s)));
	/*
	mask-image: linear-gradient(
		to right,
		#000 calc(var(--reveal-position) - 30%),
		#0000 var(--reveal-position)
	);
	*/
	transition:
		--reveal-position var(--a-lg),
		opacity var(--a-sm),
		transform var(--a-md);

	&.is-in-view {
		--reveal-position: calc(100% + 30%);
		opacity: 1;
		transform: translateY(0);
	}
}

/* Skip link — first focusable element on the page, visible only when focused */
.btw-skip {
	position: absolute;
	z-index: 200;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	padding: var(--s-xs) var(--s-sm);
	background-color: var(--c-white);
	color: var(--c-black);
	font-family: var(--f-l);
	font-size: 0.8125rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;

	&:focus {
		transform: translateY(0);
	}
}