/*
 * Hero slider.
 *
 * Rebuilds the old page heroes exactly: a grid of 1270, 1024, 778 or 480 pixels (picked by the window
 * width) that scales down with the page, layers placed on that grid, and the same timeline of slide
 * transitions and layer animations. --u is one grid pixel at the current scale. Each slide's layout
 * (data-layout) sets the grid values of its layers per level; hero_slider.js reads --x, --y and --v to
 * place them, and runs the slides.
 */

.ctwb-hero {
	--gw: 1270;
	--gh: 950;
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	container-type: inline-size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/* GSAP's power curves; browsers without linear() get the nearest cubic-bezier. */
	--ctwb-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
	--ctwb-power3-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ctwb-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@supports (animation-timing-function: linear(0, 1)) {
	.ctwb-hero {
		--ctwb-power2-in-out: linear(0, 0.00013 3.19%, 0.000556 5.18%, 0.00128 6.84%, 0.002304 8.32%, 0.003628 9.68%, 0.005252 10.95%, 0.007174 12.15%, 0.009389 13.29%, 0.011919 14.39%, 0.014752 15.45%, 0.017871 16.47%, 0.021291 17.46%, 0.024999 18.42%, 0.029025 19.36%, 0.033363 20.28%, 0.038005 21.18%, 0.042941 22.06%, 0.048162 22.92%, 0.053654 23.76%, 0.059475 24.59%, 0.065626 25.41%, 0.072021 26.21%, 0.078732 27%, 0.085754 27.78%, 0.093085 28.55%, 0.100718 29.31%, 0.108649 30.06%, 0.116872 30.8%, 0.125381 31.53%, 0.134168 32.25%, 0.143226 32.96%, 0.152683 33.67%, 0.162405 34.37%, 0.172384 35.06%, 0.182763 35.75%, 0.193392 36.43%, 0.204259 37.1%, 0.215527 37.77%, 0.227024 38.43%, 0.238922 39.09%, 0.25104 39.74%, 0.263366 40.38%, 0.276088 41.02%, 0.289005 41.65%, 0.302319 42.28%, 0.316035 42.91%, 0.329933 43.53%, 0.344233 44.15%, 0.358699 44.76%, 0.373565 45.37%, 0.388583 45.97%, 0.403998 46.57%, 0.419815 47.17%, 0.435766 47.76%, 0.452116 48.35%, 0.468869 48.94%, 0.485738 49.52%, 0.516319 50.55%, 0.53314 51.13%, 0.549845 51.72%, 0.566148 52.31%, 0.582052 52.9%, 0.597822 53.5%, 0.61319 54.1%, 0.628161 54.7%, 0.642981 55.31%, 0.657402 55.92%, 0.671656 56.54%, 0.685509 57.16%, 0.69918 57.79%, 0.71245 58.42%, 0.725525 59.06%, 0.738197 59.7%, 0.750661 60.35%, 0.762724 61%, 0.774568 61.66%, 0.78601 62.32%, 0.797224 62.99%, 0.808038 63.66%, 0.818614 64.34%, 0.828941 65.03%, 0.838868 65.72%, 0.848539 66.42%, 0.857944 67.13%, 0.867076 67.85%, 0.875808 68.57%, 0.884262 69.3%, 0.892431 70.04%, 0.900309 70.79%, 0.90789 71.55%, 0.915168 72.32%, 0.92214 73.1%, 0.9288 73.89%, 0.935223 74.7%, 0.941319 75.52%, 0.947088 76.35%, 0.952591 77.2%, 0.957756 78.06%, 0.962638 78.94%, 0.967226 79.84%, 0.971511 80.76%, 0.975486 81.7%, 0.979181 82.67%, 0.982581 83.67%, 0.985674 84.7%, 0.98845 85.76%, 0.990925 86.86%, 0.993105 88.01%, 0.994989 89.22%, 0.996571 90.5%, 0.997858 91.88%, 0.99884 93.38%, 0.999524 95.08%, 0.999907 97.15%, 1);
		--ctwb-power3-in-out: linear(0, 0.000106 6.03%, 0.000473 8.77%, 0.001109 10.85%, 0.00201 12.59%, 0.00318 14.12%, 0.004618 15.5%, 0.006327 16.77%, 0.008305 17.95%, 0.010536 19.05%, 0.013032 20.09%, 0.015797 21.08%, 0.018843 22.03%, 0.022155 22.94%, 0.025712 23.81%, 0.029536 24.65%, 0.033614 25.46%, 0.037985 26.25%, 0.042641 27.02%, 0.047577 27.77%, 0.05278 28.5%, 0.058239 29.21%, 0.06394 29.9%, 0.069958 30.58%, 0.076196 31.24%, 0.082739 31.89%, 0.089473 32.52%, 0.096494 33.14%, 0.103797 33.75%, 0.111377 34.35%, 0.119229 34.94%, 0.127345 35.52%, 0.135718 36.09%, 0.14434 36.65%, 0.153201 37.2%, 0.162292 37.74%, 0.171782 38.28%, 0.181495 38.81%, 0.191419 39.33%, 0.201745 39.85%, 0.212273 40.36%, 0.222989 40.86%, 0.234106 41.36%, 0.245398 41.85%, 0.256852 42.33%, 0.268702 42.81%, 0.280698 43.28%, 0.293091 43.75%, 0.305613 44.21%, 0.318533 44.67%, 0.331563 45.12%, 0.34499 45.57%, 0.35882 46.02%, 0.372741 46.46%, 0.387063 46.9%, 0.401454 47.33%, 0.416243 47.76%, 0.431437 48.19%, 0.446676 48.61%, 0.462315 49.03%, 0.477974 49.44%, 0.494027 49.85%, 0.513854 50.35%, 0.529714 50.76%, 0.545555 51.18%, 0.560993 51.6%, 0.576034 52.02%, 0.591029 52.45%, 0.605623 52.88%, 0.620149 53.32%, 0.634269 53.76%, 0.647993 54.2%, 0.661624 54.65%, 0.674856 55.1%, 0.687977 55.56%, 0.700697 56.02%, 0.713288 56.49%, 0.725477 56.96%, 0.73752 57.44%, 0.749162 57.92%, 0.760643 58.41%, 0.771726 58.9%, 0.782633 59.4%, 0.793351 59.91%, 0.803667 60.42%, 0.813783 60.94%, 0.823686 61.47%, 0.833189 62%, 0.842471 62.54%, 0.851521 63.09%, 0.860329 63.65%, 0.868885 64.22%, 0.877182 64.8%, 0.885079 65.38%, 0.892715 65.97%, 0.900203 66.58%, 0.907405 67.2%, 0.914317 67.83%, 0.920935 68.47%, 0.927256 69.12%, 0.933366 69.79%, 0.939166 70.47%, 0.944733 71.17%, 0.95005 71.89%, 0.955106 72.63%, 0.959888 73.39%, 0.964389 74.17%, 0.9686 74.97%, 0.972562 75.8%, 0.976259 76.66%, 0.979679 77.55%, 0.982842 78.48%, 0.985733 79.45%, 0.988361 80.47%, 0.99071 81.54%, 0.992801 82.68%, 0.994625 83.9%, 0.996182 85.22%, 0.997474 86.67%, 0.998501 88.3%, 0.999262 90.2%, 0.999755 92.56%, 0.999982 96.12%, 1);
		--ctwb-power3-out: linear(0, 0.022999 0.58%, 0.045599 1.16%, 0.068184 1.75%, 0.090366 2.34%, 0.112149 2.93%, 0.133898 3.53%, 0.155245 4.13%, 0.176195 4.73%, 0.197092 5.34%, 0.217589 5.95%, 0.238017 6.57%, 0.258042 7.19%, 0.277671 7.81%, 0.297214 8.44%, 0.316358 9.07%, 0.335403 9.71%, 0.354047 10.35%, 0.372578 11%, 0.390707 11.65%, 0.40871 12.31%, 0.426312 12.97%, 0.443775 13.64%, 0.460836 14.31%, 0.477748 14.99%, 0.494259 15.67%, 0.510609 16.36%, 0.526559 17.05%, 0.542339 17.75%, 0.557721 18.45%, 0.572924 19.16%, 0.587937 19.88%, 0.60255 20.6%, 0.616967 21.33%, 0.631176 22.07%, 0.644987 22.81%, 0.658585 23.56%, 0.671962 24.32%, 0.68511 25.09%, 0.697859 25.86%, 0.710374 26.64%, 0.72265 27.43%, 0.734679 28.23%, 0.746455 29.04%, 0.757973 29.86%, 0.769228 30.69%, 0.780213 31.53%, 0.790926 32.38%, 0.801361 33.24%, 0.811514 34.11%, 0.821384 34.99%, 0.830966 35.88%, 0.840359 36.79%, 0.849453 37.71%, 0.858244 38.64%, 0.866821 39.59%, 0.875087 40.55%, 0.883122 41.53%, 0.890915 42.53%, 0.898384 43.54%, 0.905598 44.57%, 0.912551 45.62%, 0.919233 46.69%, 0.925639 47.78%, 0.931816 48.9%, 0.9377 50.04%, 0.943334 51.21%, 0.948706 52.41%, 0.953807 53.64%, 0.958628 54.9%, 0.963196 56.2%, 0.967497 57.54%, 0.971521 58.92%, 0.975284 60.35%, 0.978773 61.83%, 0.981997 63.37%, 0.984959 64.98%, 0.987659 66.67%, 0.990092 68.45%, 0.992261 70.34%, 0.994155 72.35%, 0.995785 74.52%, 0.997153 76.9%, 0.998251 79.55%, 0.999083 82.6%, 0.999649 86.31%, 0.999947 91.47%, 1);
	}
}

.ctwb-hero[data-height="short"] {
	--gh: 450;
}

@media (max-width: 1023px) {
	.ctwb-hero {
		--gw: 1024;
		--gh: 768;
	}

	.ctwb-hero[data-height="short"] {
		--gh: 368;
	}
}

@media (max-width: 777px) {
	.ctwb-hero {
		--gw: 778;
		--gh: 600;
	}

	.ctwb-hero[data-height="short"] {
		--gh: 300;
	}
}

@media (max-width: 479px) {
	.ctwb-hero {
		--gw: 480;
		--gh: 500;
	}

	.ctwb-hero[data-height="short"] {
		--gh: 300;
	}
}

.ctwb-hero-stage {
	/* The grid height scaled to the width and rounded, never more than the grid height. */
	--h: min(var(--gh) * 1px, round(100cqw * var(--gh) / var(--gw), 1px));
	/* One grid pixel: the smaller of the two scales, never more than 1px. */
	--u: min(1px, 100cqw / var(--gw), var(--h) / var(--gh));
	position: relative;
	height: var(--h);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}

.ctwb-hero-slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	visibility: hidden;
}

.ctwb-hero-slide.is-active {
	z-index: 20;
	visibility: visible;
}

.ctwb-hero-slide.is-leaving {
	z-index: 18;
	visibility: visible;
}

.ctwb-hero-bg,
.ctwb-hero-bg img,
.ctwb-hero-bg canvas,
.ctwb-hero-overlay {
	position: absolute;
	inset: 0;
}

.ctwb-hero-bg img,
.ctwb-hero-bg canvas {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

.ctwb-hero-bg img {
	object-fit: cover;
}

/* As before: the canvas gets its own compositing layer, and so do the layers drawn over it. */
.ctwb-hero-bg canvas {
	backface-visibility: hidden;
}

.ctwb-hero-overlay {
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.5);
}

/*
 * Layers. hero_slider.js sets the wrapper's left and top. As in the old slider the wrapper has no size
 * and a 601px perspective, and the box inside it is positioned: that box is what the browser composites,
 * which decides how its text and images are drawn (greyscale text smoothing, image filtering).
 */

.ctwb-hero-layer {
	--x: 0;
	--v: t;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	perspective: 601px;
	color: #fff;
	font-family: Poppins;
	font-weight: 400;
	letter-spacing: 0;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ctwb-hero-box {
	position: absolute;
	top: 0;
	left: 0;
}

.ctwb-hero-anim {
	display: block;
	transform: translate(0, 0);
}

/* Text and the button are revealed through their box. */
.ctwb-hero-text .ctwb-hero-box,
.ctwb-hero-text-phone .ctwb-hero-box,
.ctwb-hero-button .ctwb-hero-box {
	overflow: hidden;
	transform: translate(0, 0);
}

.ctwb-hero-logo {
	z-index: 5;
}

.ctwb-hero-logo .ctwb-hero-anim {
	width: calc(var(--iw) * var(--u));
	height: calc(var(--ih) * var(--u));
}

.ctwb-hero-logo img {
	position: relative;
	width: 100%;
	max-width: none;
	height: 100%;
	vertical-align: top;
}

.ctwb-hero-heading,
.ctwb-hero-text,
.ctwb-hero-text-phone {
	font-size: round(var(--fs) * var(--u), 1px);
	line-height: round(var(--lh) * var(--u), 1px);
	text-align: var(--ta, left);
}

/* --fw is a fixed width in grid pixels; where a layout leaves it out the layer is as wide as its text. */
.ctwb-hero-heading .ctwb-hero-anim,
.ctwb-hero-text .ctwb-hero-anim,
.ctwb-hero-text-phone .ctwb-hero-anim {
	width: calc(var(--fw) * var(--u));
}

.ctwb-hero-heading {
	z-index: 4;
	font-weight: 900;
	text-transform: uppercase;
}

.ctwb-hero-text,
.ctwb-hero-text-phone {
	--v: m;
	z-index: 3;
}

.ctwb-hero-text-phone {
	display: none;
}

.ctwb-hero-button {
	--v: m;
}

.ctwb-hero-button a {
	display: block;
	padding: 16px 40px;
	/* The old button carried a 3px transparent border that its hover state removed. */
	border: 3px solid transparent;
	outline: none;
	background-color: #1da4d4;
	box-shadow: none;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: none;
}

.ctwb-hero-button a:hover,
.ctwb-hero-button a:focus {
	color: #fff;
	text-decoration: none;
}

.ctwb-hero-button a:hover {
	border-width: 0;
	border-color: #fff;
	background-color: #000;
}

/* Arrows: shown a second after the pointer enters the slider, hidden 0.2 seconds after it leaves. */

.ctwb-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 1000;
	display: none;
	min-width: 55px;
	min-height: 55px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	outline: none;
	background: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 1000ms var(--ctwb-power3-in-out) 200ms;
}

@media (hover: hover) and (min-width: 767px) {
	.ctwb-hero-arrow {
		display: block;
	}
}

.ctwb-hero.is-pointer-over .ctwb-hero-arrow,
.ctwb-hero-arrow:focus-visible {
	opacity: 1;
	transition-delay: 1000ms;
}

.ctwb-hero-arrow::before {
	position: relative;
	z-index: 2;
	display: block;
	color: #021b79;
	font-family: slider-arrows;
	font-size: 15px;
	line-height: 55px;
	text-align: center;
}

.ctwb-hero-prev {
	left: 0;
	transform: translate(20px, -27px);
}

.ctwb-hero-next {
	left: 100%;
	transform: translate(-75px, -27px);
}

.ctwb-hero-prev::before {
	content: "\e824";
}

.ctwb-hero-next::before {
	content: "\e825";
}

.ctwb-hero-arrow-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s;
}

.ctwb-hero-arrow-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-size: cover;
	transform: translateX(-100%);
	transition: all 0.3s;
}

.ctwb-hero-next .ctwb-hero-arrow-thumb {
	transform: translateX(100%);
}

.ctwb-hero-arrow:hover .ctwb-hero-arrow-thumb {
	opacity: 1;
	transform: translateX(0);
}

.ctwb-hero-arrow:hover .ctwb-hero-arrow-wrap {
	opacity: 1;
	transform: scale(1);
}

/*
 * Layouts: the grid values of each layer, per level, copied from the old slides. Values are grid pixels.
 * --y top offset (from the top, or from the middle where --v is m), --x horizontal offset from the centre,
 * --fs font size, --lh line height, --fw fixed width, --iw and --ih logo size, --ta text alignment.
 * --round-left: the old slider rounded these two headings' left edge to a whole pixel; the rest keep fractions.
 * Each level only lists what changes from the level above it.
 */

/* Desktop grid: 1270 x 950 (short: 450), windows 1024 pixels and wider. */

.ctwb-hero-logo { --iw: 321; --ih: 46; --y: 312; }
.ctwb-hero-heading { --lh: 90; --y: 383; --ta: center; }
.ctwb-hero-text, .ctwb-hero-text-phone { --fs: 25; --lh: 30; --ta: left; }

[data-layout="home-1"] .ctwb-hero-heading { --y: 384; --fs: 90; --ta: left; }
[data-layout="home-1"] .ctwb-hero-text { --y: 41; }
[data-layout="home-1"] .ctwb-hero-button { --y: 114; }

[data-layout="home-2"] .ctwb-hero-heading { --fs: 83; }
[data-layout="home-2"] .ctwb-hero-text { --y: 123; }
[data-layout="home-2"] .ctwb-hero-button { --y: 187; }

[data-layout="home-3"] .ctwb-hero-heading { --fs: 83; }
[data-layout="home-3"] .ctwb-hero-text { --y: 123; }
[data-layout="home-3"] .ctwb-hero-button { --y: 187; }

[data-layout="home-4"] .ctwb-hero-heading { --fs: 80; --fw: 1266; white-space: normal; }
[data-layout="home-4"] .ctwb-hero-text { --y: 22; }
[data-layout="home-4"] .ctwb-hero-button { --y: 85; }

[data-layout="print"] .ctwb-hero-heading { --fs: 83; --round-left: 1; }
[data-layout="print"] .ctwb-hero-text { --y: 18; }
[data-layout="print"] .ctwb-hero-button { --y: 87; }

[data-layout="promotional"] .ctwb-hero-heading { --fs: 74; --round-left: 1; }
[data-layout="promotional"] .ctwb-hero-text { --y: 18; }
[data-layout="promotional"] .ctwb-hero-button { --y: 87; }

[data-layout="landing"] .ctwb-hero-heading { --y: 205; --fs: 90; --ta: left; }
[data-layout="landing"] .ctwb-hero-text { --y: 90; --delay: 66ms; }

/* Notebook grid: 1024 x 768 (short: 368), windows 778 to 1023 pixels wide. */

@media (max-width: 1023px) {
	.ctwb-hero-logo { --iw: 258; --ih: 37; --y: 251; }
	.ctwb-hero-heading { --lh: 72; --y: 308; }
	.ctwb-hero-text, .ctwb-hero-text-phone { --fs: 20; --lh: 43; --ta: center; }
	.ctwb-hero-button a { padding: 10px 35px; font-size: 15px; font-weight: 400; }

	[data-layout="home-1"] .ctwb-hero-heading { --y: 309; --fs: 72; }
	[data-layout="home-1"] .ctwb-hero-text { --y: 36; }
	[data-layout="home-1"] .ctwb-hero-button { --y: 102; }

	[data-layout="home-2"] .ctwb-hero-heading { --fs: 66; }
	[data-layout="home-2"] .ctwb-hero-text { --y: 93; }
	[data-layout="home-2"] .ctwb-hero-button { --y: 153; }

	[data-layout="home-3"] .ctwb-hero-heading { --fs: 66; }
	[data-layout="home-3"] .ctwb-hero-text { --y: 106; }
	[data-layout="home-3"] .ctwb-hero-button { --y: 182; }

	[data-layout="home-4"] .ctwb-hero-heading { --fs: 64; --fw: 1020; }
	[data-layout="home-4"] .ctwb-hero-text { --y: 0; }
	[data-layout="home-4"] .ctwb-hero-button { --y: 71; }

	[data-layout="print"] .ctwb-hero-heading { --fs: 66; }
	[data-layout="print"] .ctwb-hero-text { --y: 0; }
	[data-layout="print"] .ctwb-hero-button { --y: 71; }

	[data-layout="promotional"] .ctwb-hero-heading { --fs: 59; }
	[data-layout="promotional"] .ctwb-hero-text { --y: 0; }
	[data-layout="promotional"] .ctwb-hero-button { --y: 71; }

	[data-layout="landing"] .ctwb-hero-heading { --y: 163; --fs: 72; }
	[data-layout="landing"] .ctwb-hero-text { --y: 71; }
}

/* Tablet grid: 778 x 600 (short: 300), windows 480 to 777 pixels wide. */

@media (max-width: 777px) {
	.ctwb-hero-logo { --iw: 196; --ih: 28; --y: 190; }
	.ctwb-hero-heading { --lh: 54; --y: 234; }
	.ctwb-hero-text, .ctwb-hero-text-phone { --fs: 19; --lh: 31; }
	.ctwb-hero-button { --v: t; }
	.ctwb-hero-button a { padding: 14px 30px; font-size: 16px; line-height: 17px; }

	[data-layout="home-1"] .ctwb-hero-heading { --y: 234; --fs: 54; }
	[data-layout="home-1"] .ctwb-hero-text { --y: 41; --fs: 16; --lh: 26; }
	[data-layout="home-1"] .ctwb-hero-button { --y: 387; }

	[data-layout="home-2"] .ctwb-hero-heading { --fs: 50; }
	[data-layout="home-2"] .ctwb-hero-text { --y: 68; }
	[data-layout="home-2"] .ctwb-hero-button { --y: 407; }

	[data-layout="home-3"] .ctwb-hero-logo { --iw: 255; --ih: 36; --y: 185; }
	[data-layout="home-3"] .ctwb-hero-heading { --fs: 64; --lh: 69; }
	[data-layout="home-3"] .ctwb-hero-text { --y: 101; --fs: 17; --lh: 28; }
	[data-layout="home-3"] .ctwb-hero-button { --y: 436; }

	[data-layout="home-4"] .ctwb-hero-heading { --fs: 48; --fw: 774; }
	[data-layout="home-4"] .ctwb-hero-text { --y: 41; }
	[data-layout="home-4"] .ctwb-hero-button { --y: 387; }

	[data-layout="print"] .ctwb-hero-heading { --fs: 50; }
	[data-layout="print"] .ctwb-hero-text { --y: 41; }
	[data-layout="print"] .ctwb-hero-button { --y: 387; }

	[data-layout="promotional"] .ctwb-hero-heading { --fs: 44; }
	[data-layout="promotional"] .ctwb-hero-text { --y: 41; }
	[data-layout="promotional"] .ctwb-hero-button { --y: 387; }

	[data-layout="landing"] .ctwb-hero-heading { --y: 123; --fs: 54; }
	[data-layout="landing"] .ctwb-hero-text { --y: 43; --fs: 16; --lh: 26; }
}

/* Phone grid: 480 x 500 (short: 300), windows under 480 pixels wide. A slide with phone text shows it here instead of its text. */

@media (max-width: 479px) {
	.ctwb-hero-button { --v: m; }
	.ctwb-hero-button a { font-size: 14px; }
	.ctwb-hero-text-phone { display: block; }
	.has-phone-text .ctwb-hero-text { display: none; }

	[data-layout="home-1"] .ctwb-hero-logo { --iw: 253; --ih: 36; --y: 147; }
	[data-layout="home-1"] .ctwb-hero-heading { --y: 198; --fs: 34; --lh: 35; --fw: 445; --ta: center; white-space: normal; }
	[data-layout="home-1"] .ctwb-hero-text { --y: -15; --x: -4; --fs: 15; --lh: 35; --fw: 670; }
	[data-layout="home-1"] .ctwb-hero-text-phone { --y: 19; --fs: 15; --lh: 18; --fw: 420; }
	[data-layout="home-1"] .ctwb-hero-button { --y: 82; }

	[data-layout="home-2"] .ctwb-hero-logo { --iw: 211; --ih: 30; --y: 132; }
	[data-layout="home-2"] .ctwb-hero-heading { --y: 191; --fs: 36; --lh: 33; }
	[data-layout="home-2"] .ctwb-hero-text { --y: 25; --fs: 17; --lh: 40; --fw: 593; }
	[data-layout="home-2"] .ctwb-hero-text-phone { --y: 45; --fs: 17; --lh: 18; --fw: 438; }
	[data-layout="home-2"] .ctwb-hero-button { --y: 104; }

	[data-layout="home-3"] .ctwb-hero-logo { --iw: 233; --ih: 33; --y: 113; }
	[data-layout="home-3"] .ctwb-hero-heading { --y: 164; --x: 4; --fs: 48; --lh: 53; }
	[data-layout="home-3"] .ctwb-hero-text { --y: 63; --x: -1; --fs: 17; --lh: 40; }
	[data-layout="home-3"] .ctwb-hero-text-phone { --y: 63; --x: -1; --fs: 17; --lh: 18; }
	[data-layout="home-3"] .ctwb-hero-button { --y: 133; --x: 2; }

	[data-layout="home-4"] .ctwb-hero-logo { --iw: 217; --ih: 31; --y: 172; --x: 1; }
	[data-layout="home-4"] .ctwb-hero-heading { --y: 220; --x: -3; --fs: 29; --lh: 33; --fw: 477; }
	[data-layout="home-4"] .ctwb-hero-text, [data-layout="home-4"] .ctwb-hero-text-phone { --y: 32; --fs: 17; --lh: 40; }
	[data-layout="home-4"] .ctwb-hero-button { --y: 85; --x: -1; }

	[data-layout="print"] .ctwb-hero-logo { --iw: 240; --ih: 34; --y: 117; }
	[data-layout="print"] .ctwb-hero-heading { --y: 174; --fs: 44; --lh: 49; }
	[data-layout="print"] .ctwb-hero-text { --y: 25; --fs: 17; --lh: 40; }
	[data-layout="print"] .ctwb-hero-text-phone { --y: 8; --fs: 17; --lh: 18; }
	[data-layout="print"] .ctwb-hero-button { --y: 75; }

	[data-layout="promotional"] .ctwb-hero-logo { --iw: 245; --ih: 35; --y: 131; }
	[data-layout="promotional"] .ctwb-hero-heading { --y: 180; --fs: 29; --lh: 36; }
	[data-layout="promotional"] .ctwb-hero-text, [data-layout="promotional"] .ctwb-hero-text-phone { --y: -10; --fs: 18; --lh: 43; }
	[data-layout="promotional"] .ctwb-hero-button { --y: 38; }

	[data-layout="landing"] .ctwb-hero-heading { --y: 130; --fs: 34; --lh: 35; --fw: 445; --ta: center; white-space: normal; }
	[data-layout="landing"] .ctwb-hero-text { --y: -15; --x: -4; --fs: 15; --lh: 35; --fw: 670; }
	[data-layout="landing"] .ctwb-hero-text-phone { --y: 40; --fs: 15; --lh: 18; --fw: 420; }
}

/*
 * Timeline, in milliseconds from the moment a slide is called (hero_slider.js adds is-active to it and
 * is-leaving to the slide before). Background: fades in from 16 for 1000. Logo, heading and overlay:
 * fade in from 66 for 300. Text: slides in from the right through its mask from 1706 for 1000. Button:
 * rises and fades in from 1956 for 1200. The leaving slide's layers go out from 0: fades for 300, text
 * slides left for 1000, button drops for 1200. Every second showing of a slide uses the parallax
 * transition instead of the fade: it drops in from the top while the old slide moves down 60%.
 * Entrances end on the layer's own style, so they fill backwards only; exits hold their end state.
 */

@keyframes ctwb-hero-fade-in { from { opacity: 0; } }
@keyframes ctwb-hero-fade-out { to { opacity: 0; } }
@keyframes ctwb-hero-drop-in { from { transform: translateY(-100%); } }
@keyframes ctwb-hero-drop-out { to { transform: translateY(60%); } }
@keyframes ctwb-hero-text-in { from { transform: translateX(175%); } }
@keyframes ctwb-hero-text-out { to { transform: translateX(-175%); } }
@keyframes ctwb-hero-mask-in { from { transform: translateX(-100%); } }
@keyframes ctwb-hero-mask-out { to { transform: translateX(100%); } }
@keyframes ctwb-hero-rise-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes ctwb-hero-rise-out { to { opacity: 0; transform: translateY(100%); } }

.is-active .ctwb-hero-bg {
	animation: ctwb-hero-fade-in 1000ms var(--ctwb-power2-in-out) 16ms backwards;
}

.is-active.is-parallax .ctwb-hero-bg {
	animation-name: ctwb-hero-drop-in;
}

.is-leaving.is-parallax-out .ctwb-hero-bg {
	animation: ctwb-hero-drop-out 1000ms var(--ctwb-power2-in-out) 16ms both;
}

.is-active .ctwb-hero-overlay,
.is-active .ctwb-hero-logo .ctwb-hero-anim,
.is-active .ctwb-hero-heading .ctwb-hero-anim {
	animation: ctwb-hero-fade-in 300ms var(--ctwb-power3-in-out) 66ms backwards;
}

.is-active :is(.ctwb-hero-text, .ctwb-hero-text-phone) .ctwb-hero-anim {
	animation: ctwb-hero-text-in 1000ms var(--ctwb-power3-out) var(--delay, 1706ms) backwards;
}

.is-active :is(.ctwb-hero-text, .ctwb-hero-text-phone) .ctwb-hero-box {
	animation: ctwb-hero-mask-in 1000ms var(--ctwb-power3-out) calc(var(--delay, 1706ms) + 1ms) backwards;
}

.is-active .ctwb-hero-button .ctwb-hero-anim {
	animation: ctwb-hero-rise-in 1200ms var(--ctwb-power3-in-out) 1956ms backwards;
}

.is-leaving .ctwb-hero-overlay,
.is-leaving .ctwb-hero-logo .ctwb-hero-anim,
.is-leaving .ctwb-hero-heading .ctwb-hero-anim {
	animation: ctwb-hero-fade-out 300ms var(--ctwb-power3-in-out) both;
}

.is-leaving :is(.ctwb-hero-text, .ctwb-hero-text-phone) .ctwb-hero-anim {
	animation: ctwb-hero-text-out 1000ms var(--ctwb-power3-in-out) both;
}

.is-leaving :is(.ctwb-hero-text, .ctwb-hero-text-phone) .ctwb-hero-box {
	animation: ctwb-hero-mask-out 1000ms var(--ctwb-power3-in-out) 1ms both;
}

.is-leaving .ctwb-hero-button .ctwb-hero-anim {
	animation: ctwb-hero-rise-out 1200ms var(--ctwb-power3-in-out) both;
}