.x-grid.trotter-stagger {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	margin: 0;
	pointer-events: none;
	background: transparent;
}

.x-grid.trotter-stagger > * {
	opacity: 0;
	transform: scale(0.94);
	animation: trotter-cell-in 0.55s ease forwards;
}

.x-grid.trotter-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.x-grid.trotter-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.x-grid.trotter-stagger > *:nth-child(3) { animation-delay: 0.18s; }
.x-grid.trotter-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.x-grid.trotter-stagger > *:nth-child(5) { animation-delay: 0.34s; }
.x-grid.trotter-stagger > *:nth-child(6) { animation-delay: 0.42s; }
.x-grid.trotter-stagger > *:nth-child(7) { animation-delay: 0.5s; }
.x-grid.trotter-stagger > *:nth-child(8) { animation-delay: 0.58s; }

.trotter-stagger.is-done {
	animation: trotter-stagger-out 0.4s ease forwards;
}

@keyframes trotter-cell-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes trotter-stagger-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.trotter-logo {
	transform-origin: left center;
	transition: transform 0.45s ease;
}

body.x-body-scroll-disabled .trotter-logo {
	transform: scale(0.72);
}

.trotter-squish img,
.trotter-squish video,
.trotter-squish .trotter-cell {
	transform-origin: center center;
	transition: transform 0.45s ease;
}

body.x-body-scroll-disabled .trotter-squish img,
body.x-body-scroll-disabled .trotter-squish video,
body.x-body-scroll-disabled .trotter-squish .trotter-cell {
	transform: scale(0.86);
}

.trotter-plus {
	display: inline-block;
	transform-origin: 50% 55%;
}

.trotter-menu-item:hover .trotter-plus,
.trotter-menu-item:focus-within .trotter-plus {
	animation: trotter-twirl 0.45s ease;
}

@keyframes trotter-twirl {
	0% { transform: rotate(0deg); }
	55% { transform: rotate(200deg); }
	100% { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
	.x-grid.trotter-stagger {
		display: none !important;
	}

	.trotter-plus,
	.trotter-logo,
	.trotter-squish img,
	.trotter-squish video,
	.trotter-squish .trotter-cell {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

@media (max-width: 700px) {
	.trotter-header.x-bar-outer-spacers:before,
	.trotter-header.x-bar-outer-spacers:after,
	.trotter-footer.x-bar-outer-spacers:before,
	.trotter-footer.x-bar-outer-spacers:after {
		flex-basis: 1.25rem !important;
		width: 1.25rem !important;
		height: auto !important;
	}

	.trotter-header .x-bar-content {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		row-gap: 0.85rem !important;
		min-width: 0 !important;
	}

	.trotter-header .trotter-logo {
		order: 1;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: calc(100% - 6rem) !important;
	}

	.trotter-header .trotter-menu-toggle {
		order: 2;
		flex: 0 0 auto !important;
		margin-left: 1.25rem !important;
	}

	.trotter-header .x-bar-content > .x-div {
		order: 3;
		flex: 1 1 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.35rem !important;
		min-width: 0 !important;
	}

	.trotter-header .x-bar-content > .x-div .x-text,
	.trotter-header .x-bar-content > .x-div .x-text-content-text-primary {
		text-align: left !important;
	}

	.trotter-header a[href^="mailto:"] {
		overflow-wrap: anywhere;
	}

	.x-off-canvas-content {
		padding: 1.5rem 1.25rem !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	.x-section {
		padding-top: 1.75rem !important;
		padding-right: 0 !important;
		padding-bottom: 2.5rem !important;
		padding-left: 0 !important;
	}

	.x-section .x-text {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		box-sizing: border-box;
	}

	.x-grid {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		gap: 0 !important;
		grid-template-columns: 1fr !important;
	}

	.trotter-cell,
	.trotter-project {
		border-width: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
		overflow: visible !important;
	}

	.trotter-cell .x-image,
	.trotter-cell img,
	.trotter-project img,
	.trotter-split img,
	.trotter-detail img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 72vw !important;
		object-fit: cover !important;
	}

	.trotter-cell .x-text,
	.trotter-project .x-text {
		padding-top: 0.75rem !important;
		padding-bottom: 1.15rem !important;
	}

	.trotter-split,
	.trotter-detail {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}

	.trotter-person {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}

	.x-grid.trotter-stagger {
		grid-template-columns: 1fr !important;
		grid-template-rows: 1fr !important;
		gap: 0 !important;
	}

	.x-grid.trotter-stagger > * {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		transform: none !important;
	}

	.x-grid.trotter-stagger > *:nth-child(1) { z-index: 1 !important; animation: none !important; opacity: 1 !important; }
	.x-grid.trotter-stagger > *:nth-child(2) { z-index: 2 !important; animation: trotter-phone-in 0.45s linear forwards !important; animation-delay: 0.7s !important; }
	.x-grid.trotter-stagger > *:nth-child(3) { z-index: 3 !important; animation: trotter-phone-in 0.3s linear forwards !important; animation-delay: 1.25s !important; }
	.x-grid.trotter-stagger > *:nth-child(4) { z-index: 4 !important; animation: trotter-phone-in 0.2s linear forwards !important; animation-delay: 1.65s !important; }
	.x-grid.trotter-stagger > *:nth-child(5) { z-index: 5 !important; animation: trotter-phone-in 0.14s linear forwards !important; animation-delay: 1.93s !important; }
	.x-grid.trotter-stagger > *:nth-child(6) { z-index: 6 !important; animation: trotter-phone-in 0.1s linear forwards !important; animation-delay: 2.13s !important; }
	.x-grid.trotter-stagger > *:nth-child(7) { z-index: 7 !important; animation: trotter-phone-in 0.07s linear forwards !important; animation-delay: 2.27s !important; }
	.x-grid.trotter-stagger > *:nth-child(8) { z-index: 8 !important; animation: trotter-phone-in 0.05s linear forwards !important; animation-delay: 2.37s !important; }

	.x-grid.trotter-stagger .x-text {
		display: none !important;
	}

	.x-grid.trotter-stagger .x-image,
	.x-grid.trotter-stagger img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
	}
}

@keyframes trotter-phone-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}