.iu-mark {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: inherit;
	text-decoration: none;
	font-family: "Clash Grotesk", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	line-height: 1;
}

.iu-device {
	display: block;
	flex: 0 0 auto;
}

.iu-mark-line {
	font-weight: 600;
	letter-spacing: .18em;
	font-size: .82rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.navbar-brand .iu-mark {
	color: var(--phoenix-emphasis-color, #31374a);
	gap: .65rem;
}

/* Studio top bar: login-size mark, same 4rem bar, equal air top and to the hairline. */
#navbarDefault.navbar-top {
	height: var(--phoenix-navbar-top-height);
	min-height: var(--phoenix-navbar-top-height);
	box-sizing: border-box;
}

#navbarDefault.navbar-top .navbar-collapse,
#navbarDefault.navbar-top .navbar-logo {
	height: 100%;
	align-items: center;
}

#navbarDefault.navbar-top .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 0;
	display: inline-flex;
	align-items: center;
}

#navbarDefault.navbar-top .navbar-brand .iu-device,
#navbarDefault.navbar-top .navbar-brand svg {
	display: block;
	width: 48px;
	height: 48px;
}

.iu-mark-solo {
	gap: 0;
}

.navbar-brand .iu-mark-line {
	font-size: .72rem;
	letter-spacing: .16em;
}

.iu-logo-trials {
	--iu-graphite: #454c53;
	--iu-paper: #f3efe6;
	--iu-cyan: #c5dde3;
	--iu-mute: #d2ccc2;
	margin: 0;
	min-height: 100vh;
	background: var(--iu-graphite);
	color: var(--iu-paper);
	font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.iu-logo-trials-inner {
	max-width: 68rem;
	margin: 0 auto;
	padding: 4.5rem 1.5rem 5rem;
}

.iu-logo-trials h1 {
	margin: 0 0 .4rem;
	font-family: "Clash Grotesk", sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.iu-logo-trials .iu-logo-lede {
	margin: 0 0 2.4rem;
	max-width: 38rem;
	color: var(--iu-mute);
	font-size: .95rem;
	line-height: 1.45;
}

.iu-logo-field {
	margin-bottom: 1.25rem;
	padding: 1.7rem 1.5rem 1.5rem;
}

.iu-logo-field.is-graphite {
	background: #3a4046;
	color: var(--iu-paper);
}

.iu-logo-field.is-paper {
	background: var(--iu-paper);
	color: var(--iu-graphite);
}

.iu-logo-field.is-cyan {
	background: var(--iu-cyan);
	color: var(--iu-graphite);
}

.iu-logo-field-label {
	margin: 0 0 1.35rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .65;
}

.iu-logo-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.6rem 1.2rem;
	align-items: start;
}

.iu-logo-row-five {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.iu-logo-row-six {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iu-logo-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .85rem;
}

.iu-logo-option span.k {
	font-family: "IBM Plex Mono", monospace;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .55;
}

.iu-logo-lockups {
	display: flex;
	flex-direction: column;
	gap: 1.85rem;
}

.iu-logo-lockups .k,
.iu-logo-intros .k {
	display: block;
	margin-bottom: .75rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .55;
}

.iu-logo-lockup-lg .iu-mark {
	gap: 1.15rem;
}

.iu-logo-lockup-lg .iu-mark-line {
	font-size: 1.55rem;
	letter-spacing: .2em;
}

.iu-logo-lockup-md .iu-mark {
	gap: .85rem;
}

.iu-logo-lockup-md .iu-mark-line {
	font-size: .95rem;
	letter-spacing: .18em;
}

.iu-logo-lockup-nav .iu-mark {
	gap: .65rem;
}

.iu-logo-lockup-nav .iu-mark-line {
	font-size: .72rem;
	letter-spacing: .16em;
}

.iu-logo-compare,
.iu-logo-sizes {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2rem 2.2rem;
}

.iu-logo-sizes .iu-logo-option {
	align-items: center;
}

.iu-mark-stack {
	align-items: center;
	gap: .85rem;
}

.iu-mark-stack.is-tight {
	gap: .55rem;
}

.iu-mark-stack.is-air {
	gap: 1.15rem;
}

.iu-mark-stack-words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-family: "Clash Grotesk", "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 1.72rem;
	line-height: .9;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.iu-mark-stack.is-fill .iu-mark-stack-words {
	font-size: 2.05rem;
	line-height: .88;
	letter-spacing: .16em;
}

.iu-mark-stack.is-compact .iu-mark-stack-words {
	font-size: 1.28rem;
	line-height: .94;
	letter-spacing: .16em;
}

.iu-mark-stack.is-sm {
	gap: .5rem;
}

.iu-mark-stack.is-sm .iu-mark-stack-words {
	font-size: .78rem;
	line-height: .94;
	letter-spacing: .16em;
}

.iu-intro-replay {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "IBM Plex Mono", monospace;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
	opacity: .5;
	cursor: pointer;
}

.iu-intro-replay:hover {
	opacity: .9;
}

.iu-logo-intros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.8rem 2rem;
}

.iu-morph {
	--iu-morph-size: 96px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .9rem;
	overflow: hidden;
}

.iu-morph-stage {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--iu-morph-size);
	gap: 24px;
}

.iu-morph.is-short .iu-morph-stage {
	width: var(--iu-morph-size);
	gap: 0;
	overflow: hidden;
}

.iu-morph-mark {
	position: relative;
	z-index: 1;
	width: var(--iu-morph-size);
	height: var(--iu-morph-size);
	flex: 0 0 var(--iu-morph-size);
	overflow: hidden;
}

.iu-morph-device,
.iu-morph-svg {
	display: block;
	width: var(--iu-morph-size);
	height: var(--iu-morph-size);
}

.iu-morph-i,
.iu-morph-plus {
	transform-box: view-box;
}

.iu-morph-i { transform-origin: 18px 48px; }
.iu-morph-plus { transform-origin: 18px 22px; }

.iu-morph-plus {
	transform: translate(0, -42px);
}

.iu-morph-type {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-family: "Clash Grotesk", "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 2.55rem;
	line-height: .9;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

.iu-morph-line {
	display: flex;
	align-items: baseline;
}

.iu-morph-keep {
	position: relative;
	display: inline-block;
}

.iu-morph-glyph {
	display: inline-block;
}

.iu-morph-whites {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
	clip-path: inset(0 0 0 0);
}

.iu-morph-fly {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	color: inherit;
	left: var(--x0);
	top: var(--y0);
	width: var(--w0);
	height: var(--h0);
}

.iu-morph.is-short .iu-morph-fly.is-i {
	left: calc(var(--iu-morph-size) * 14 / 64);
	top: calc(var(--iu-morph-size) * 16 / 64);
	width: calc(var(--iu-morph-size) * 8 / 64);
	height: calc(var(--iu-morph-size) * 32 / 64);
}

.iu-morph.is-short .iu-morph-fly.is-u {
	left: calc(var(--iu-morph-size) * 28 / 64);
	top: calc(var(--iu-morph-size) * 16 / 64);
	width: calc(var(--iu-morph-size) * 24 / 64);
	height: calc(var(--iu-morph-size) * 32 / 64);
}

.iu-fly-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.iu-morph.is-down .iu-morph-device { transform: translateY(-100%); }
.iu-morph.is-left .iu-morph-device { transform: translateX(-100%); }
.iu-morph.is-up .iu-morph-device { transform: translateY(100%); }
.iu-morph.is-right .iu-morph-device { transform: translateX(100%); }

.iu-morph-go {
	display: inline-block;
	transform-origin: left center;
}

.iu-morph.is-words.is-run .iu-morph-glyph {
	animation: iu-glyph-off .01s linear .58s both;
}

.iu-morph.is-words.is-run .iu-morph-device {
	animation: iu-morph-device-down .38s cubic-bezier(.4, 0, .2, 1) 1.16s both;
}

.iu-morph.is-words.is-run .iu-morph-whites {
	animation: iu-mask-down .38s cubic-bezier(.4, 0, .2, 1) 1.16s both;
}

.iu-morph.is-words.is-run .iu-morph-fly {
	animation: iu-fly-place .55s cubic-bezier(.4, 0, .2, 1) .58s both;
}

.iu-morph.is-words.is-run.is-exit-sweep .iu-morph-go {
	animation: iu-go-sweep .5s cubic-bezier(.4, 0, .2, 1) .62s both;
}

.iu-morph.is-words.is-run.is-exit-suck .iu-morph-go {
	animation: iu-go-suck .45s cubic-bezier(.4, 0, .2, 1) .62s both;
}

.iu-morph.is-words.is-run.is-exit-split .iu-morph-line:first-child .iu-morph-go {
	animation: iu-go-up .5s cubic-bezier(.4, 0, .2, 1) .62s both;
}

.iu-morph.is-words.is-run.is-exit-split .iu-morph-line:last-child .iu-morph-go {
	animation: iu-go-down .5s cubic-bezier(.4, 0, .2, 1) .62s both;
}

.iu-morph.is-words.is-run.is-exit-slice .iu-morph-go {
	animation: iu-go-slice .45s cubic-bezier(.4, 0, .2, 1) .62s both;
}

.iu-morph.is-words.is-run .iu-morph-type {
	animation: iu-type-pack .2s cubic-bezier(.4, 0, .2, 1) 1.18s both;
}

.iu-morph.is-words.is-run .iu-morph-stage {
	animation: iu-stage-pack .2s cubic-bezier(.4, 0, .2, 1) 1.18s both;
}

.iu-morph.is-words.is-run .iu-morph-plus {
	animation: iu-morph-plus-screw .9s cubic-bezier(.2, .7, .2, 1) 1.8s both;
}

.iu-morph.is-words.is-run .iu-morph-i {
	animation: iu-morph-i-squash .9s cubic-bezier(.2, .7, .2, 1) 1.8s both;
}

.iu-morph.is-short.is-run .iu-morph-fly {
	animation: iu-fly-in .8s cubic-bezier(.22, 1, .36, 1) 0s both;
}

.iu-morph.is-short.is-run .iu-morph-device {
	animation: iu-morph-device-down .38s cubic-bezier(.4, 0, .2, 1) .52s both;
}

.iu-morph.is-short.is-run .iu-morph-whites {
	animation: iu-mask-down .38s cubic-bezier(.4, 0, .2, 1) .52s both;
}

.iu-morph.is-short.is-run .iu-morph-plus {
	animation: iu-morph-plus-screw .9s cubic-bezier(.2, .7, .2, 1) 1.1s both;
}

.iu-morph.is-short.is-run .iu-morph-i {
	animation: iu-morph-i-squash .9s cubic-bezier(.2, .7, .2, 1) 1.1s both;
}

.iu-morph.is-clip .iu-morph-reveal {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
}

.iu-morph.is-clip .iu-morph-reveal .iu-morph-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.iu-morph.is-clip .iu-morph-device {
	position: relative;
	z-index: 1;
}

.iu-morph.is-clip.is-run .iu-morph-reveal {
	animation: iu-clip-reveal-down .38s cubic-bezier(.4, 0, .2, 1) .52s both;
}

@keyframes iu-go-sweep {
	from { transform: translateX(0); }
	to { transform: translateX(16rem); }
}

@keyframes iu-go-suck {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@keyframes iu-go-up {
	from { transform: translateY(0); }
	to { transform: translateY(-5rem); }
}

@keyframes iu-go-down {
	from { transform: translateY(0); }
	to { transform: translateY(5rem); }
}

@keyframes iu-go-slice {
	from { clip-path: inset(0 0 0 0); }
	to { clip-path: inset(0 0 0 100%); }
}

@keyframes iu-type-pack {
	from { width: auto; overflow: visible; }
	to { width: 0; overflow: hidden; visibility: hidden; }
}

@keyframes iu-stage-pack {
	from { gap: 24px; }
	to { gap: 0; }
}

@keyframes iu-glyph-off {
	from { visibility: visible; }
	to { visibility: hidden; }
}

@keyframes iu-fly-in {
	from {
		visibility: visible;
		transform: translateY(40px);
	}
	to {
		visibility: visible;
		transform: translateY(0);
	}
}

@keyframes iu-fly-place {
	0% {
		visibility: hidden;
		left: var(--x0);
		top: var(--y0);
		width: var(--w0);
		height: var(--h0);
	}
	1% {
		visibility: visible;
		left: var(--x0);
		top: var(--y0);
		width: var(--w0);
		height: var(--h0);
	}
	100% {
		visibility: visible;
		left: var(--x1);
		top: var(--y1);
		width: var(--w1);
		height: var(--h1);
	}
}

@keyframes iu-morph-device-down {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@keyframes iu-clip-reveal-down {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes iu-mask-down {
	from { clip-path: inset(0 0 0 0); }
	to { clip-path: inset(100% 0 0 0); }
}

@keyframes iu-morph-device-left {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes iu-morph-device-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes iu-morph-device-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes iu-morph-clip-down {
	0%, 20% { clip-path: inset(0 0 0 0); }
	80%, 100% { clip-path: inset(100% 0 0 0); }
}

@keyframes iu-morph-clip-left {
	0%, 20% { clip-path: inset(0 0 0 0); }
	80%, 100% { clip-path: inset(0 0 0 100%); }
}

@keyframes iu-morph-clip-up {
	0%, 20% { clip-path: inset(0 0 0 0); }
	80%, 100% { clip-path: inset(0 0 100% 0); }
}

@keyframes iu-morph-clip-right {
	0%, 20% { clip-path: inset(0 0 0 0); }
	80%, 100% { clip-path: inset(0 100% 0 0); }
}

@keyframes iu-morph-i-squash {
	from { transform: scaleY(1); }
	to { transform: scaleY(.5); }
}

@keyframes iu-morph-plus-screw {
	from { transform: translate(0, -42px) rotate(0deg); }
	to { transform: translate(0, 0) rotate(720deg); }
}

@media (max-width: 860px) {
	.iu-logo-intros {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iu-morph .iu-morph-device,
	.iu-morph .iu-morph-i,
	.iu-morph .iu-morph-plus,
	.iu-morph .iu-morph-go,
	.iu-morph .iu-morph-keep,
	.iu-morph .iu-morph-whites,
	.iu-morph .iu-morph-fly {
		animation: none !important;
	}
	.iu-morph .iu-morph-device { transform: none; }
	.iu-morph .iu-morph-i { transform: scaleY(.5); }
	.iu-morph .iu-morph-plus { transform: none; }
	.iu-morph .iu-morph-type { visibility: hidden; }
	.iu-morph.is-clip .iu-morph-reveal {
		clip-path: none;
		animation: none !important;
	}
}