/*
 * UBG Coming Soon.
 *
 * Measurements are taken from the old Squarespace page so it looks the same:
 * - Layout grid: 24 columns with 11px gaps from 768px (8 columns below),
 *   2vw side gutter (6vw on phones), content capped at 2000px. Row height
 *   scales with width; rows grow to fit text, like Squarespace's "fluid engine".
 * - Type: 1rem + n x 1vw on desktop (capped at 2000px), 1rem + n x 1vh on phones.
 * - Section padding: 3.3 x the larger of 1vw and 1vh.
 */

@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-tight-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ubgcs-coral: #fc6d6d;
	--ubgcs-line: rgba(255, 255, 255, 0.55);
	--ubgcs-body: "Helvetica Neue", Arial, sans-serif;
	--ubgcs-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--ubgcs-vu: 1vh;
	--ubgcs-small: calc(1rem - 0.12vh);
	--ubgcs-pad: max(3.3vw, 3.3vh);
	--ubgcs-header: calc(2vw + 36.98px);
}
@media (min-width: 768px) {
	:root {
		--ubgcs-vu: min(1vw, 20px);
		--ubgcs-small: min(14.4px, calc(1rem - 0.12vw));
	}
}
@media (min-width: 800px) {
	:root {
		--ubgcs-header: clamp(24.27px, calc(0.19vw + 22.75px), 25.36px);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body.ubgcs {
	margin: 0;
	background: #000;
	color: #fff;
	font-family: var(--ubgcs-body);
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.02em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ubgcs h1,
.ubgcs h2,
.ubgcs p {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.ubgcs a {
	color: inherit;
}

/* Sections ---------------------------------------------------------------- */

.ubgcs-hero {
	position: relative;
	z-index: 1;
	background: #fff;
	padding-top: var(--ubgcs-header);
}
/* Thin coral line where the white section meets the black one. An SVG stroke
   rather than a box, so it is anti-aliased across the edge like Squarespace's. */
.ubgcs-divider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: rgba(252, 109, 109, 0.66);
	stroke-width: 2px;
	pointer-events: none;
}
.ubgcs-hero .ubgcs-grid {
	padding: var(--ubgcs-pad) 0;
}
.ubgcs-submit {
	background: #000;
	padding: calc(var(--ubgcs-pad) * 2) 0;
}

/* Grid -------------------------------------------------------------------- */

.ubgcs-grid {
	--gutter: calc(6vw - 11px);
	--cell: calc((2000px - 11px * 7) / 8);
	display: grid;
	grid-template-columns: minmax(var(--gutter), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
	row-gap: 11px;
	column-gap: 11px;
	overflow-x: hidden;
	overflow-x: clip;
}
.ubgcs-grid--hero {
	grid-template-rows: repeat(14, minmax(24px, auto));
}
.ubgcs-grid--submit {
	grid-template-rows: repeat(39, minmax(24px, auto));
}
@media (min-width: 768px) {
	.ubgcs-grid {
		--gutter: calc(2vw - 11px);
		--cell: calc((2000px - 11px * 23) / 24);
		--row: calc(min(2000px, 96vw) * 0.0215);
		grid-template-columns: minmax(var(--gutter), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
	}
	.ubgcs-grid--hero {
		grid-template-rows: repeat(23, minmax(var(--row), auto));
	}
	.ubgcs-grid--submit {
		grid-template-rows: repeat(29, minmax(var(--row), auto));
	}
}

.ubgcs-block {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

/* Grid positions: phone first, then desktop. row-start / col-start / row-end / col-end. */
.ubgcs-block--image        { grid-area: 1 / 4 / 14 / 8;   z-index: 1; }
.ubgcs-block--heading      { grid-area: 2 / 3 / 10 / 5;   z-index: 4; }
.ubgcs-block--blurb        { grid-area: 2 / 7 / 15 / 9;   z-index: 2; }
.ubgcs-block--tagline      { grid-area: 14 / 3 / 15 / 9;  z-index: 3; }
.ubgcs-block--form-heading { grid-area: 1 / 2 / 3 / 10;   z-index: 4; }
.ubgcs-block--form-text    { grid-area: 3 / 2 / 6 / 10;   z-index: 5; }
.ubgcs-block--form         { grid-area: 6 / 2 / 36 / 10;  z-index: 1; }
.ubgcs-block--social       { grid-area: 35 / 2 / 37 / 10; z-index: 2; }
.ubgcs-block--email        { grid-area: 37 / 2 / 40 / 10; z-index: 6; }
.ubgcs-block--copyright    { grid-area: 39 / 4 / 40 / 8;  z-index: 3; }
@media (min-width: 768px) {
	.ubgcs-block--image        { grid-area: 1 / 9 / 23 / 19; }
	.ubgcs-block--heading      { grid-area: 5 / 9 / 14 / 12; }
	.ubgcs-block--blurb        { grid-area: 5 / 16 / 11 / 18; }
	.ubgcs-block--tagline      { grid-area: 23 / 10 / 24 / 18; }
	.ubgcs-block--form-heading { grid-area: 1 / 9 / 2 / 19; }
	.ubgcs-block--form-text    { grid-area: 2 / 10 / 4 / 18; }
	.ubgcs-block--form         { grid-area: 5 / 9 / 27 / 19; }
	.ubgcs-block--social       { grid-area: 27 / 12 / 28 / 16; }
	.ubgcs-block--email        { grid-area: 28 / 12 / 29 / 16; }
	.ubgcs-block--copyright    { grid-area: 29 / 12 / 30 / 16; }
}

/* Hero -------------------------------------------------------------------- */

/* Out of the flow so the picture never stretches the rows, as on Squarespace. */
.ubgcs-block--image picture,
.ubgcs-block--image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Phones: fills the narrow column, as on Squarespace. */
}
@media (min-width: 768px) {
	.ubgcs-block--image img {
		object-fit: contain;
	}
}
.ubgcs h1 {
	font-family: var(--ubgcs-display);
	font-size: calc(1rem + 3.6 * var(--ubgcs-vu));
	font-weight: 700;
	line-height: 1.056;
	letter-spacing: -0.02em;
	color: var(--ubgcs-coral);
}
.ubgcs-block--blurb p {
	color: var(--ubgcs-coral);
}
/* Same nesting as Squarespace's scaled text: a 22px line holding an inline-block, so it sits at the same height. */
.ubgcs-block--tagline {
	container-type: inline-size;
}
.ubgcs-block--tagline p {
	color: #000;
	white-space: nowrap;
	letter-spacing: -0.32px;
}
.ubgcs-fit {
	display: inline-block;
	font-size: 2.4cqw; /* Replaced by the exact fit in coming-soon.js. */
}
.ubgcs-fit > span {
	display: block;
	line-height: 1;
	text-align: center;
	white-space: pre;
}

/* Submit section ---------------------------------------------------------- */

.ubgcs h2 {
	font-family: var(--ubgcs-display);
	font-size: calc(1rem + 0.24 * var(--ubgcs-vu));
	font-weight: 700;
	line-height: 1.1904;
	letter-spacing: -0.02em;
	color: var(--ubgcs-coral);
	text-align: center;
}
.ubgcs-block--form-text p,
.ubgcs-block--email p,
.ubgcs-block--copyright p {
	text-align: center;
}
.ubgcs-small {
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.32px;
}
.ubgcs-block--copyright p {
	color: #575555;
}
.ubgcs-block--email a {
	display: inline-block;
	text-decoration: underline 1px;
	text-underline-offset: 0.2em;
}
.ubgcs-block--social {
	flex-direction: row;
	justify-content: center;
}
.ubgcs-ig {
	display: block;
	width: 36px;
	height: 36px;
	box-shadow: inset 0 0 0 1px #fff;
	fill: #fff;
	transition: background-color 0.1s linear, fill 0.1s linear;
}
.ubgcs-ig svg {
	display: block;
	width: 36px;
	height: 36px;
}
.ubgcs-ig:hover,
.ubgcs-ig:focus-visible {
	background: #fff;
	fill: #000;
}

/* Form -------------------------------------------------------------------- */

.ubgcs-form,
.ubgcs-done {
	width: 100%;
}
.ubgcs-done p {
	white-space: pre-wrap;
}
:where(.ubgcs) fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.ubgcs legend {
	padding: 0;
}
.ubgcs-item {
	display: grid;
	align-items: start;
	margin: 0 0 20px;
}
fieldset.ubgcs-item {
	display: block;
}
.ubgcs-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.517em;
	padding-bottom: 4px;
	line-height: 22px;
}
.ubgcs-req {
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.02em;
	opacity: 0.7;
}

/* First / last name side by side. */
.ubgcs-name {
	display: flex !important;
	align-items: flex-end;
	gap: 0 10px;
	margin: 0;
}
.ubgcs-name__part {
	display: grid;
	align-items: start;
	flex: 1 1 0;
	min-width: 0;
	margin: 0 0 20px;
}
.ubgcs-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.517em;
	margin-top: 4px;
	padding-bottom: 2px;
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.02em;
}
.ubgcs-caption .ubgcs-req {
	line-height: 1;
}

.ubgcs input[type="text"],
.ubgcs input[type="email"],
.ubgcs textarea {
	display: block;
	width: 100%;
	height: 33px;
	margin: 0;
	padding: 5px 0;
	border: 0;
	border-bottom: 1px solid var(--ubgcs-line);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	letter-spacing: inherit;
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
}
.ubgcs textarea {
	height: 100px;
	resize: vertical;
}
.ubgcs input[type="text"]:focus,
.ubgcs input[type="email"]:focus,
.ubgcs textarea:focus {
	border-bottom-color: #fff;
	box-shadow: inset 0 -1px 0 #fff;
}
.ubgcs [aria-invalid="true"] {
	border-bottom-color: var(--ubgcs-coral) !important;
}

.ubgcs-desc {
	margin: 0 0 4px !important;
	padding: 0.5em 0;
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.02em;
	opacity: 0.7;
}
.ubgcs-prefixed {
	position: relative;
}
.ubgcs-prefix {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 33px;
	padding: 5px 10px 5px 0;
	opacity: 0.55;
	pointer-events: none;
}
.ubgcs-prefixed input[type="text"] {
	padding-left: 51.33px;
}

/* Small tick box ("Sign up for news and updates"). */
.ubgcs-option {
	margin: 6px 0 4px;
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.02em;
}
fieldset .ubgcs-option {
	margin: 6px 0 0;
}
.ubgcs-check {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding-right: 4px;
	cursor: pointer;
}
.ubgcs-check input {
	display: grid;
	place-items: center;
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid var(--ubgcs-line);
	border-radius: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.ubgcs-check input::before {
	content: "";
	width: 8.25px;
	height: 8.25px;
	background: #fff;
	clip-path: polygon(13.29% 49.19%, 3.89% 59.8%, 40.98% 90%, 96.95% 21.23%, 86.94% 13.08%, 85.97% 12.29%, 38.95% 70.07%);
	opacity: 0;
}
.ubgcs-check input:checked {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.4);
}
.ubgcs-check input:checked::before {
	opacity: 1;
}
.ubgcs-check input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* "Check Here" button-style tick box. */
.ubgcs-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-right: 4px;
	cursor: pointer;
}
.ubgcs-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}
.ubgcs-chip span {
	display: block;
	padding: 1px 10px;
	border: 1px solid var(--ubgcs-line);
	transition: background-color 0.1s linear, color 0.1s linear;
}
/* Squarespace turned the box solid white and hid the words; keep them readable. */
.ubgcs-chip input:checked + span {
	border-color: #fff;
	background: #fff;
	color: #000;
}
.ubgcs-chip input:focus-visible + span {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* File upload box. The real file input covers it, so dropping files works too. */
.ubgcs-drop {
	position: relative;
	display: block;
	border: 1px dashed #fff;
	cursor: pointer;
}
.ubgcs-drop input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.ubgcs-drop:focus-within {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.ubgcs-drop__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 22px 0;
	pointer-events: none;
}
.ubgcs-drop__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin-bottom: 11px;
	border-radius: 50%;
	background: #fff;
}
/* The plus is white on the white circle on Squarespace too, so it shows as a plain disc. */
.ubgcs-drop__icon svg {
	display: block;
	fill: #fff;
}
.ubgcs-drop__text {
	display: block;
	align-self: stretch;
	height: 22px;
	line-height: normal;
	text-align: center;
}
.ubgcs-filelist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ubgcs-filelist li {
	margin-top: 11px;
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.ubgcs-error {
	display: block;
	margin-top: 6px;
	color: var(--ubgcs-coral);
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	letter-spacing: -0.02em;
}
.ubgcs-error[hidden] {
	display: none;
}
.ubgcs-notice {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--ubgcs-coral);
	color: var(--ubgcs-coral);
	font-size: var(--ubgcs-small);
	line-height: 1.375;
	outline: 0;
}
.ubgcs-notice ul {
	margin: 6px 0 0;
	padding-left: 1.2em;
}
.ubgcs-hp {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ubgcs-form .cf-turnstile {
	display: flex;
	justify-content: center;
	margin-bottom: 11px;
}

.ubgcs-actions {
	text-align: center;
}
.ubgcs-actions button {
	display: inline-block;
	margin: 0;
	padding: 24px 2.2em;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	line-height: 1.3;
	letter-spacing: inherit;
	cursor: pointer;
	transition: background-color 0.1s linear, color 0.1s linear;
}
.ubgcs-actions button:hover,
.ubgcs-actions button:focus-visible {
	background: #fff;
	color: #000;
	outline: 0;
}