:root {
	--ribbon-0: #625180;
	--ribbon-1: #8c5c8d;
	--ribbon-2: #b46788;
	--ribbon-3: #cf7a82;
	--ribbon-4: #d99a88;
	--ribbon-5: #9b6f96;
	--ribbon-6: #5f5687;
	--ribbon-7: #383d68;
	--ribbon-shadow: rgba(46, 43, 55, 0.45);
	--ribbon-gradient-x: linear-gradient(
		90deg,
		var(--ribbon-0) 0%,
		var(--ribbon-1) 18%,
		var(--ribbon-2) 34%,
		var(--ribbon-3) 48%,
		var(--ribbon-4) 60%,
		var(--ribbon-5) 73%,
		var(--ribbon-6) 87%,
		var(--ribbon-7) 100%
	);
	--ribbon-gradient-y: linear-gradient(
		180deg,
		var(--ribbon-0) 0%,
		var(--ribbon-1) 18%,
		var(--ribbon-2) 34%,
		var(--ribbon-3) 48%,
		var(--ribbon-4) 60%,
		var(--ribbon-5) 73%,
		var(--ribbon-6) 87%,
		var(--ribbon-7) 100%
	);
}


#wrapper {
	isolation: isolate;
	background: var(--ribbon-gradient-x);
}

#wrapper:before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../../images/overlay.png");
	background-size: 128px 128px;
	opacity: 0.5;
}

#wrapper > .panel,
#wrapper > .copyright,
#wrapper > .scrollZone {
	position: relative;
	z-index: 1;
}

.panel.banner .content.color0,
.panel.color0,
.panel.color1,
.panel.color2,
.panel.color3,
.panel.color4,
.panel.color1-alt,
.panel.color2-alt,
.panel.color3-alt,
.panel.color4-alt,
.panel > .color0,
.panel > .color1,
.panel > .color2,
.panel > .color3,
.panel > .color4,
.panel > .color1-alt,
.panel > .color2-alt,
.panel > .color3-alt,
.panel > .color4-alt,
.panel.color2-alt > .intro.color2 {
	background-color: transparent;
	background-image: none;
}

.panel.banner .content.color0,
#experience .content {
	background-image: none;
}

.work-experience .content,
.previous-work-experience .content {
	background-image: none !important;
}

.panel.spotlight.left .content {
	background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(30, 22, 58, 0.035) 54%, rgba(30, 22, 58, 0.065));
	background-size: auto;
	background-repeat: no-repeat;
}

.panel.spotlight.right .content {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(30, 22, 58, 0.035) 54%, rgba(30, 22, 58, 0.065));
	background-size: auto;
	background-repeat: no-repeat;
}

#experience .content {
	background-image: none;
}

.panel.banner .content h1.major {
	font-size: 1.72em;
}

.panel.banner .content p {
	font-size: 0.95em;
}

.job-dates {
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.82;
}

.kpi-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.4rem;
}

.kpi-grid strong {
	display: block;
	font-size: 1.35em;
	line-height: 1.1;
}

.kpi-grid span {
	display: block;
	font-size: 0.72em;
	opacity: 0.85;
	line-height: 1.35;
}

#experience,
#foss,
#contact {
	position: relative;
}

#experience:after,
#foss:after,
#contact:after {
	display: none;
}

#experience > *,
#foss > *,
#contact > * {
	position: relative;
	z-index: 1;
}

#services .grid-icons .icon:before {
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	font-size: 1.55rem;
	border-radius: 4rem;
	background-color: rgba(255, 255, 255, 0.08);
}

.service-list,
.proof-list {
	list-style: none;
	padding-left: 0;
}

.service-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
}

.service-list li {
	padding-left: 0;
}

#services > .inner.columns.divided > *:before,
#skills > .inner.columns.divided > *:before {
	display: none !important;
}

.service-list strong,
.proof-list strong {
	display: block;
	margin-bottom: 0.25rem;
}

.service-list span,
.proof-list span {
	display: block;
	font-size: 0.86em;
	opacity: 0.9;
	line-height: 1.45;
}

.work-experience p,
.previous-work-experience p,
.proof-list li {
	font-size: 0.9em;
}

.proof-list {
	margin: 0;
}

.proof-list li + li {
	margin-top: 1rem;
}

.services-background {
	opacity: 0.045;
	background-image:
		linear-gradient(90deg, rgba(99, 80, 130, 0.12), rgba(213, 113, 130, 0.08)),
		url("../../images/gallery/fulls/shapelined-_JBKdviweXI-unsplash.jpg");
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
	mix-blend-mode: soft-light;
}

.work-experience .image,
.previous-work-experience .image {
	opacity: 0.045;
	mix-blend-mode: soft-light;
}

.work-experience .image.filtered:after,
.previous-work-experience .image.filtered:after {
	opacity: 0.16;
}

.contact-summary {
	max-width: 24rem;
}

.contact-icons li {
	margin-bottom: 0.9rem;
}

.copyright {
	font-size: 0.75em;
}

@media screen and (min-width: 737px) {
	#contact {
		margin-right: 14rem;
	}
}

@media screen and (max-width: 980px) {
	.service-list,
	.kpi-grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 736px) {
	#wrapper {
		background: var(--ribbon-gradient-y);
	}

	#services .grid-icons,
	#experience:after,
	#foss:after,
	#contact:after {
		display: none;
	}

	.panel.banner h1 br {
		display: block;
	}
}

@media screen and (orientation: landscape) and (max-height: 520px) {
	html,
	body {
		height: auto;
		min-height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
	}

	body {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}

	#wrapper {
		background: var(--ribbon-gradient-x);
	}

	#page-wrapper {
		height: auto;
		width: max-content;
		min-width: 100%;
		padding: 0;
		align-items: flex-start;
		flex-shrink: 0;
	}

	#wrapper {
		flex-direction: row;
		flex: 0 0 auto;
		height: 100vh;
		height: 100svh;
		margin: 0;
		box-shadow: none;
	}

	#wrapper > .scrollZone {
		display: none;
	}

	#wrapper > .copyright {
		position: absolute;
		bottom: 0.75rem;
		right: 1rem;
		display: block;
		width: auto;
		text-align: right;
	}

	.panel,
	.panel.small,
	.panel.medium,
	.panel.large {
		flex-direction: row;
		height: 100%;
		width: auto !important;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.panel.medium {
		width: 50rem !important;
	}

	.panel.large {
		width: 65rem !important;
	}

	.panel.banner.right {
		flex-direction: row-reverse;
	}

	.panel.banner.left {
		flex-direction: row;
	}

	.panel.banner .content {
		flex-basis: auto;
		width: 31rem;
		padding: 2.35rem 2.4rem 1.4rem;
		justify-content: flex-start;
	}

	.panel.banner .image {
		flex-basis: auto;
		width: 14rem;
		height: auto;
	}

	.panel.banner .content h1.major {
		font-size: 1.45rem;
		margin-bottom: 1.35rem;
	}

	.panel.banner .content p {
		font-size: 0.84rem;
		line-height: 1.5;
	}

	.panel.banner .content > .actions:last-child {
		margin-bottom: 0;
	}

	.panel.spotlight .content {
		width: 34rem;
		min-height: 0;
		padding: 1.75rem 2.25rem 1.1rem;
	}

	#experience .content {
		width: 31rem;
	}

	#experience .content h2.major {
		font-size: 1.22rem;
		margin-bottom: 1rem;
	}

	#experience .content p {
		font-size: 0.72rem;
		line-height: 1.45;
		margin-bottom: 0;
	}

	#experience .kpi-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.65rem;
		margin-top: 0.7rem;
	}

	#experience .kpi-grid strong {
		font-size: 1.05rem;
	}

	#experience .kpi-grid span {
		font-size: 0.56rem;
		line-height: 1.18;
	}

	.panel.spotlight .image {
		position: absolute;
	}

	.panel > .intro {
		width: 17rem !important;
		padding: 2rem 2rem 1.4rem;
	}

	.panel > .intro.joined {
		padding-right: 0;
	}

	.panel > .intro.joined + .inner {
		padding-left: 2rem;
	}

	.panel > .inner {
		padding: 2rem 2rem 1.4rem;
	}

	.panel > .inner.columns {
		flex-direction: row;
	}

	.panel > .inner.columns > * {
		margin-top: 0;
	}

	.panel > .inner.columns.divided > * {
		margin-top: 0;
		margin-left: 3rem;
	}

	.panel > .inner.columns.divided > *:before {
		top: 0;
		left: -1.5rem;
		width: 2px;
		height: 100%;
		margin-top: 0;
	}

	.panel > .inner.columns.divided > :first-child {
		margin-left: 0;
	}

	.panel > .inner.columns.divided > :first-child:before {
		display: none;
	}

	.panel .span-1-75 {
		width: 14rem;
	}

	.panel .span-2,
	.panel.medium .span-2,
	.panel.large .span-2 {
		width: 14rem;
	}

	.panel .span-2-5,
	.panel.medium .span-2-5,
	.panel.large .span-2-5 {
		width: 19rem;
	}

	.panel .span-3,
	.panel.medium .span-3,
	.panel.large .span-3 {
		width: 20rem;
	}

	.panel .span-3-75 {
		width: 31rem;
	}

	.panel .span-4,
	.panel.medium .span-4,
	.panel.large .span-4 {
		width: 28rem;
	}

	.panel .span-5,
	.panel.medium .span-5,
	.panel.large .span-5 {
		width: 34rem;
	}

	.panel .span-7,
	.panel.medium .span-7,
	.panel.large .span-7 {
		width: 34rem;
	}

	.service-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	.service-list span,
	.proof-list span,
	.work-experience p,
	.previous-work-experience p {
		font-size: 0.82rem;
	}
}