/* START COLORS */

:root {

	--taupe-mono-01            : #483C32; /* Base Taupe */
	--taupe-mono-02            : #635345;
	--taupe-mono-03            : #7E6958;
	--taupe-mono-04            : #98806B;
	--taupe-mono-05            : #AB9786;
	--taupe-mono-06            : #BEAEA1;
	--taupe-mono-07            : #D1C6BD;

	--taupe-complimentary-01   : #8B7D71;
	--taupe-complimentary-02   : #74665B;
	--taupe-complimentary-03   : #5D5146;
	--taupe-complimentary-04   : #483C32; /* Base Taupe */
	--taupe-complimentary-05   : #31404A;
	--taupe-complimentary-06   : #1D2C36;
	--taupe-complimentary-07   : #0A1A23;

	/*
	--taupe-triad-01           : oklch(0.3671 0.0254 336.5);  #483A44;
	--taupe-triad-02           : oklch(0.3669 0.0276 4.48);  #4C393D;
	--taupe-triad-03           : oklch(0.3669 0.0266 32.73);  #4C3A36;
	--taupe-triad-04           : oklch(0.3657 0.0237 61.78);  #483C32; Base Taupe
	--taupe-triad-05           : oklch(0.3638 0.0221 92.96);  #423E31;
	--taupe-triad-06           : oklch(0.3616 0.0232 127.72);  #3A4033;
	 */
	--taupe-triad-07           : oklch(0.3628 0.0248 158.56);  /* #334239 */;

	--taupe-triad-darker-01    : oklch(29% 0.0254 336.5); /* #483A44; */
	--taupe-triad-darker-02    : oklch(29% 0.0276 4.48); /* #4C393D; */
	--taupe-triad-darker-03    : oklch(29% 0.0266 32.73); /* #4C3A36; */
	--taupe-triad-darker-04    : oklch(29% 0.0237 61.78); /* #483C32; */
	--taupe-triad-darker-05    : oklch(29% 0.0221 92.96); /* #423E31; */
	--taupe-triad-darker-06    : oklch(29% 0.0232 127.72); /* #3A4033; */
	--taupe-triad-darker-07    : oklch(29% 0.0248 158.56); /* #334239; */

	--color-burnt-orange-01    : oklch(0.5675 0.1577 46.26); /* #BE5103; */
	--color-burnt-orange-02    : oklch(0.4856 0.1039 52.39); /* #8C4C1F; */

	--color-black              : oklch(10% 0.01 0);
	/*
	--color-white              : oklch(98% 0 0);
    */

	--linear-gradient          : linear-gradient(
			90deg,
			var(--taupe-triad-darker-01),
			var(--taupe-triad-darker-02),
			var(--taupe-triad-darker-03),
			var(--taupe-triad-darker-04),
			var(--taupe-triad-darker-05),
			var(--taupe-triad-darker-06),
			var(--taupe-triad-darker-07)
	);

	--linear-gradient-reversed : linear-gradient(
			90deg,
			var(--taupe-triad-darker-07),
			var(--taupe-triad-darker-06),
			var(--taupe-triad-darker-05),
			var(--taupe-triad-darker-04),
			var(--taupe-triad-darker-03),
			var(--taupe-triad-darker-02),
			var(--taupe-triad-darker-01)
	);

	/*
	--conic-gradient           : conic-gradient( from 144deg,
			var(--taupe-triad-darker-01),
			var(--taupe-triad-darker-02),
			var(--taupe-triad-darker-03),
			var(--taupe-triad-darker-04),
			var(--taupe-triad-darker-05),
			var(--taupe-triad-darker-06),
	        var(--taupe-triad-darker-07),
			var(--taupe-triad-darker-07),
			var(--taupe-triad-darker-06),
			var(--taupe-triad-darker-05),
			var(--taupe-triad-darker-04),
			var(--taupe-triad-darker-03),
			var(--taupe-triad-darker-02),
			var(--taupe-triad-darker-01)
	);
	*/

}

/* END COLORS */

/* START VARS */

:root {

	--color-font                     : var(--taupe-mono-06);
	--color-font-heading             : var(--color-font);
	--color-link                     : var(--color-burnt-orange-02);
	--color-link-hover               : var(--color-burnt-orange-02);
	--color-hover                    : transparent;
	--color-button-text              : var(--color-font);
	--color-outline                  : var(--color-burnt-orange-01);
	--color-box-shadow               : oklch(0% 0 0 / 18%);
	--color-header-name              : var(--color-burnt-orange-02);

	--background-color-body          : var(--color-black);
	--background-color-nav           : var(--color-black);
	--background-image-nav           : var(--linear-gradient-reversed);
	--background-color-nav-item      : var(--taupe-complimentary-03);
	--background-color-nav-item-text : var(--color-button-text);
	--background-color-slide-show    : var(--taupe-complimentary-03);
	--background-color-section       : transparent;
	--background-color-button        : var(--taupe-complimentary-03);

	--border-color                   : transparent;
	--border-button                  : 1px solid oklch(0% 0 0 / 33%);
	--border-radius                  : 12px;
	--corner-shape                   : squircle;

	--box-shadow                     : 0 3px 13px var(--color-box-shadow);
	--box-shadow-menu                : 0 3px 7px var(--color-box-shadow);
	--box-shadow-nav                 : 0 0 48px 0 oklch(0% 0 0 / 100%);
	--box-shadow-button              : 0 0 10px 0 oklch(0% 0 0 / 60%);

	--outline                        : none;
	--outline-offset                 : 0;
	--outline-section                : none;
	--outline-offset-section         : 0;

	--font-family                    : Tahoma;
	--font-family-mobile             : var(--font-family);
	--font-size                      : 1rem;
	--font-size-mobile               : 1.125rem;
	--font-size-h1-mobile            : 1.9rem;
	--font-size-h2-mobile            : 1.4rem;
	--font-size-h3-mobile            : 1.25rem;
	--font-size-h4-mobile            : 1rem;

	--line-height                    : 1.6;
	--line-height-headings           : 1.3;

	--height-target                  : 50px;
	--height-button                  : var(--height-target);

	--padding-universal-page         : 25px;
	--padding-heading                : 0 var(--padding-universal-page);
	--margin-heading-nav             : 5px;
	--margin-block-start-page        : .6rlh;
	--margin-block-end-page          : 1.5rlh;
	--margin-block-start-section     : 1.5rlh;
	--max-width-universal            : 768px;
	--scroll-margin-block-start      : 49px;
	--bounce                         : linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
	--length-transform               : .8s;
	--length-opacity                 : .4s;
	--lightness                      : 100%;
	--chroma                         : 1;

	--breakpoint-sm                  : 360px;
	--breakpoint-md                  : 768px;
	--breakpoint-lg                  : 1024px;
	--breakpoint-xl                  : 1366px;
	--breakpoint-hd                  : 1920px;

	--scrollbar-thumb-background-color : var(--taupe-triad-07);
	--scrollbar-thumb-border           : 1px solid var(--taupe-triad-darker-07);
	--scrollbar-track-background-color : var(--taupe-triad-darker-07);

	/*--arrow-right        : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eclosed%3C/title%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='var(--taupe-mono-06)' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-270.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
	/*--arrow-down-white   : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='var(--taupe-mono-06)' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-180.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/

}

@media ( max-width : 768px ) {

	:root {
		--padding-universal-page : 21px;
	}
}

/* END VARS */

/* START GLOBAL */

html {
	font-size        : 100%;
	padding          : 0;
	margin           : 0;
	background-color : var(--background-color-body);
	background-image : var(--linear-gradient);
}

body {
	position                 : relative;
	height                   : 100%;
	padding                  : 0;
	margin                   : 0;
	font-family              : var(--font-family), sans-serif;
	font-size                : var(--font-size);
	color                    : var(--color-font);
	line-height              : var(--line-height);
	-webkit-text-size-adjust : 100%;
	background-color         : transparent;
	overflow-y               : scroll;
}

h1, h2, h3, h4, h5, h6 {
	line-height  : var(--line-height-headings);
	margin-block : 1rlh;
}

p {
	margin-block : 1rlh 1rlh;
	text-wrap    : pretty;
	max-width    : 75ch;
}

a:not(.button):not(.button-nav) {
	&:link, &:visited, &:hover, &:active {
		color          : var(--color-link);
		border-radius  : var(--border-radius);
		corner-shape   : var(--corner-shape);
		outline-offset : 1px;
	}
}

a, button, input {
	&:focus-visible {
		outline        : 4px solid var(--color-outline);
		outline-offset : 1px;
	}
}

ul {
	list-style-type : square;
	padding         : 0 0 0 1rlh;
	margin-block    : 1rlh 0;

	li::marker {
		color : var(--color-burnt-orange-02);
	}
}

main {
	display                   : flow-root;
	max-width                 : var(--max-width-universal);
	margin-inline             : auto;
	margin-block              : 0;
	scroll-margin-block-start : var(--scroll-margin-block-start);
	background-color          : var(--background-color-section);
}

section {
	display        : flow-root;
	/*margin-block-start : var(--margin-block-start-section);*/
	padding        : 0 var(--padding-universal-page) 0 var(--padding-universal-page);
	margin-bottom  : 2rlh;
	outline        : var(--outline-section);
	outline-offset : var(--outline-offset-section);

	&:first-of-type {
		margin-block-start : 0;
	}

	&:last-of-type {
		margin-block-end : 1rlh;
	}

	p:last-child {
		margin-block-end : 0;
	}

	a {
		margin-block-start : 1.5rlh;
		margin-block-end   : .3rlh;
	}
}

/*
details {
	display      : flow-root;
	padding      : 0 var(--padding-universal-page) 0 var(--padding-universal-page);
	margin-block : 1rlh 0;

	text-wrap    : pretty;
	max-width    : 75ch;

	summary {
		display     : list-item;
		margin      : unset;
		font-size   : 1.1em;
		font-weight : bold;
	}

	summary::marker {
		padding-inline : 8px;
	}
}
details[open] {
	margin-block : 1rlh 2rlh;
}
summary > * {
	display : inline;
}
summary::-webkit-details-marker, summary::marker {
	 display : none;
}
details > summary::before {
	content       : var( --arrow-right );
	line-height   : 0;
	align-self    : center;
	justify-self  : center;
	padding       : 0;
	width         : 38px;
	height        : 38px;
	place-content : center;
}
details > summary:dir(rtl)::before {
	rotate : 180deg;
}
details[open] > summary::before {
	content     : var( --arrow-down-white );
	line-height : 0;
}
*/

header, main, footer {
	max-width     : calc(768px + 6px);
	margin-inline : auto;
}

/* Apply the custom animation to the old and new page states */
/*
::view-transition-old(root) {
	animation : 0.5s ease-in both move-out;
}

::view-transition-new(root) {
	animation : 0.5s ease-in both move-in;
}
*/

[popover] {
	opacity             : 0;
	transform           : scale(0.8);
	transition-property : opacity, transform, overlay, display;
	transition-duration : 0.3s;
	transition-behavior : allow-discrete;
}

[popover]:popover-open {
	opacity   : 1;
	transform : scale(1);
}

::-webkit-scrollbar {
	width  : 9px;
	height : 9px;
}

::-webkit-scrollbar-thumb {
	background-color : var(--scrollbar-thumb-background-color);
	border           : var(--scrollbar-thumb-border);
	border-radius    : 3px;
}

::-webkit-scrollbar-track {
	background : var(--scrollbar-track-background-color);
}

@starting-style {
	[popover]:popover-open {
		opacity   : 0;
		transform : scale(0.8);
	}
}

@media ( max-width : 768px ) {

	body {
		font-size : var(--font-size-mobile);
	}

	h1 {
		font-size : var(--font-size-h1-mobile);
	}

	h2 {
		font-size : var(--font-size-h2-mobile);
	}

	h3 {
		font-size : var(--font-size-h3-mobile);
	}

	body {
		font-family : var(--font-family-mobile), sans-serif;
	}

	html, .background-conic-gradient {
		border-radius : var(--border-radius);
	}

}

/* END GLOBAL */

/* START CLASSES */

.none {
	display : none !important;
}

.capitalize {
	text-transform : uppercase;
}

.responsive {
	width     : 100%;
	height    : auto;
	max-width : 400px;
}

.aspect-ratio {
	object-fit : cover;
}

.inline-block {
	display : inline-block;
}

.footnote {
	margin-block-end : 0;
}

.red {
	color       : firebrick !important;
	font-weight : bold;
}

.price {
	font-weight : normal;
}

.button {
	display          : block;
	min-height       : var(--height-target);
	align-content    : center;
	margin           : auto;
	color            : var(--color-button-text);
	font-size        : 1.1em;
	font-weight      : bold;
	text-align       : center;
	text-decoration  : none;
	appearance       : none;
	width            : fit-content;
	min-width        : 300px;
	background-color : var(--background-color-button);
	border-radius    : var(--border-radius);
	corner-shape     : var(--corner-shape);
	cursor           : pointer;
	overflow         : hidden;
}

.hide {
	display : none !important;
}

.transparent {
	color : transparent;
}

.copied {
	color : firebrick;
}

/*
.background-conic-gradient {
	position              : fixed;
	z-index               : -1;
	top                   : 0;
	left                  : 0;
	width                 : 100vw;
	height                : 100vh;
	background-color      : var(--background-color-body);
	background-image      : var(--linear-gradient);
	background-position   : center;
	background-size       : cover;
	background-repeat     : no-repeat;
	background-attachment : fixed;
}
*/

@media ( max-width : 768px ) {

	.button {
		width   : 100%;
		padding : 0;
	}
}

/* END CLASSES */

/* START HEADER */

header {
	max-width : var(--max-width-universal);
	padding   : 0;
	margin    : 6px auto 0 auto;

	.main {
		display               : grid;
		grid-area             : div;
		grid-template-areas   : 'heading button';
		grid-template-columns : 1fr 69px;
		grid-template-rows    : auto;
		width                 : -moz-available;
		width                 : -webkit-fill-available;
		max-width             : var(--max-width-universal);
		height                : var(--height-target);
		padding               : 0;
		background-color      : transparent;

		.enso {
			grid-area : logo;
		}

		.company {
			grid-area : heading;
		}

		a {
			display         : inline-flex;
			min-width       : 0;
			text-decoration : none;
			border-radius   : var(--border-radius);
			corner-shape    : var(--corner-shape);
			align-self      : center;
			margin-block    : 0;
			margin-inline   : 5px 0;
			padding-inline  : 18px 24px;
			font-size       : 1.25em;
			font-weight     : bold;
			/*text-transform  : capitalize;*/
			line-height     : var(--height-target);
			align-items     : center;
			outline-offset  : 0 !important;

			&:link, &:visited, &:hover, &:active {
				color : var(--color-header-name);
			}

			&:focus-visible {
				position       : relative;
				z-index        : 1;
			}

			svg {
				width        : 28px;
				height       : 28px;
				margin-right : 8px;
			}
		}

		button {
			grid-area             : button;
			display               : grid;
			grid-template-columns : auto;
			grid-template-rows    : 4px 4px 4px;
			grid-gap              : 3px;
			align-content         : center;
			justify-content       : center;
			margin                : 0;
			padding               : 0 var(--padding-universal-page);
			appearance            : none;
			background-color      : transparent;
			border                : none;
			corner-shape          : var(--corner-shape);
			border-radius         : var(--border-radius);

			span {
				background-color : var(--color-link);
				width            : 28px;
				height           : 4px;

				corner-shape     : var(--corner-shape);
			}

			span:first-child {
				border-radius : 2px 2px 0 0;
			}

			span:last-child {
				border-radius : 0 0 2px 2px;
			}

			&:hover {
				background-color : var(--color-hover);
			}

			&:focus-visible {
				outline-offset : 0;
			}
		}
	}

	nav {
		width            : 310px;
		padding          : 2rlh 1rlh;
		margin-top       : 4rlh;
		background-color : var(--background-color-nav);
		background-image : var(--background-image-nav);
		border           : none;
		border-radius    : var(--border-radius);
		corner-shape     : var(--corner-shape);
		box-shadow       : var(--box-shadow-nav);

		menu {
			display          : grid;
			grid-gap         : 3px;
			align-items      : center;
			list-style-type  : none;
			max-width        : var(--breakpoint-md);
			padding          : 0;
			margin           : auto;
			background-color : transparent;

			li {
				height        : var(--height-target);
				font-weight   : bold;
				text-align    : center;
				align-content : center;

				a {
					display          : flow-root;
					height           : var(--height-target);
					text-decoration  : none;
					line-height      : var(--height-target);
					font-size        : 1.1em;
					color            : var(--background-color-nav-item-text);
					corner-shape     : var(--corner-shape);
					background-color : var(--background-color-nav-item);

					&:link, &:active, &:visited {
						color : var(--background-color-nav-item-text);
					}

					&:focus-visible {
						position       : relative;
						z-index        : 1;
						outline-offset : 1px;
					}
				}

				&:first-child a {
					border-radius : var(--border-radius) var(--border-radius) 0 0;
				}

				&:last-child a {
					border-radius : 0 0 var(--border-radius) var(--border-radius);
				}
			}
		}
	}
}

/*
.enso {
	display          : flex;
	width            : 26px;
	height           : 26px;
	border-radius    : 50%;
	margin           : 0 0 0 0;
	box-sizing       : border-box;
	transform        : rotate(200deg);
	background-color : var(--taupe-complimentary-02);
	background-image : conic-gradient(oklch(0 0 0 / 0%), oklch(0 0 0 / 60%));
	align-items      : center;
	justify-content  : center;
	aspect-ratio     : 1 / 1;

	span {
		display          : flex;
		width            : 15px;
		height           : 15px;
		border-radius    : 50%;
		background-color : var(--taupe-triad-darker-01);
	}
}
*/

@media ( max-width : 768px ) {

	header {

		.main {

			button {
				margin-right : 5px;

				&:hover {
					background-color : transparent;
				}
			}
		}

		.menu {
			padding-right         : 0;
			grid-template-columns : 1fr 64px;

			a {
				margin-inline : 0;
			}
		}
	}
}

/* END HEADER */

/* START FOOTER */

footer {
	display         : block;
	justify-content : center;
	max-width       : var(--max-width-universal);
	padding         : 0 0 2rlh 0;
	margin          : 2rlh auto 0 auto;
	text-align      : center;

	menu {
		display             : grid;
		grid-template-areas : 'solutions' 'tech-support' 'pricing' 'portfolio' 'contact';
		grid-gap            : 0;
		width               : fit-content;
		list-style-type     : none;
		padding             : 0;
		margin              : 0 auto;

		li {
			padding : 0;
			margin  : 0;

			&:nth-child(1) {
				grid-area : solutions;
			}

			&:nth-child(2) {
				grid-area : tech-support;
			}

			&:nth-child(3) {
				grid-area : pricing;
			}

			&:nth-child(4) {
				grid-area : portfolio;
			}

			&:nth-child(5) {
				grid-area : contact;
			}
		}
	}

	a {
		position         : relative;
		display          : inline-block;
		width            : -moz-available;
		width            : -webkit-fill-available;
		min-height       : var(--height-button);
		align-content    : center;
		padding          : 0 var(--padding-universal-page);
		margin           : 0;
		font-weight      : bolder;
		border-radius    : var(--border-radius);
		corner-shape     : var(--corner-shape);
		background-color : transparent;

		&:focus-visible {
			z-index        : 5;
			outline-offset : 0 !important;
		}

		&:hover {
			background-color : var(--color-hover);
		}
	}

	small {
		display     : block;
		margin-top  : 1.25lh;
	}

	.logo {
		display            : none;
		width              : 60px;
		height             : 60px;
		margin-block-start : 1rlh;
	}
}

#solutions .link-footer.solutions,
#tech-support .link-footer.tech-support,
#pricing .link-footer.pricing,
#portfolio .link-footer.portfolio,
#resume .link-footer.resume,
#contact .link-footer.contact {
	cursor          : default;
	color           : var(--color-font);
	text-decoration : none;

	&:hover {
		background-color : transparent;
	}
}

@media (min-width : 768px) {
	footer {

		menu {
			grid-template-areas : 'solutions tech-support pricing portfolio contact';
			width               : calc(100% - var(--padding-universal-page) * 2);
		}
	}
}

/* END FOOTER */

/* START SOLUTIONS */

.solutions {

	.grid-solutions {
		display               : grid;
		grid-template-columns : 1fr 1fr 1fr;
		grid-template-rows    : auto;
		grid-gap              : calc(var(--padding-universal-page) * .5);
	}

	.solution-types {
		width           : 100%;
		max-width       : var(--breakpoint-md);
		min-height      : 196px;
		position        : relative;
		overflow        : hidden;
		list-style-type : none;
		padding         : 0;
		margin          : 0 auto;
		align-content   : center;
		text-align      : center;

		li {
			position    : relative;
			display     : block;
			padding     : 0;
			margin      : 0;
			text-align  : center;
			font-weight : bold;
			font-size   : 1.3rem;

			&:nth-child(1) {
				transition : transform var(--length-transform) var(--bounce) .5s, opacity var(--length-opacity) ease .5s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(2) {
				transition : transform var(--length-transform) var(--bounce) .6s, opacity var(--length-opacity) ease .6s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(3) {
				transition : transform var(--length-transform) var(--bounce) .7s, opacity var(--length-opacity) ease .7s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(4) {
				transition : transform var(--length-transform) var(--bounce) .8s, opacity var(--length-opacity) ease .8s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(5) {
				transition : transform var(--length-transform) var(--bounce) .9s, opacity var(--length-opacity) ease .9s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(6) {
				transition : transform var(--length-transform) var(--bounce) 1s, opacity var(--length-opacity) ease 1s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(7) {
				transition : transform var(--length-transform) var(--bounce) 1.1s, opacity var(--length-opacity) ease 1.1s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(8) {
				transition : transform var(--length-transform) var(--bounce) 1.2s, opacity var(--length-opacity) ease 1.2s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}
		}
	}
}

/* END SOLUTIONS */

/* START TECH SUPPORT */

main.tech-support {

	display             : block;
	grid-template-areas :
		'support-01 support-01'
		'support-02 support-03'
		'support-04 support-05'
		'support-06 support-07'
		'support-08 support-09'
		'support-10 support-11';

	section {
		display               : grid;
		grid-template-columns : 1fr 1fr;
		margin-bottom         : 1.75rlh;


		&:nth-child(1) {
			grid-area     : support-01;
			margin-bottom : 1.25rlh;

			h1 {
				margin-bottom : 0;
			}
		}

		&:nth-child(2) {
			grid-area : support-02;
		}

		&:nth-child(3) {
			grid-area : support-03
		}

		&:nth-child(4) {
			grid-area : support-04
		}

		&:nth-child(5) {
			grid-area : support-05
		}

		&:nth-child(6) {
			grid-area : support-06
		}

		&:nth-child(7) {
			grid-area : support-07
		}

		&:nth-child(8) {
			grid-area : support-08
		}

		&:nth-child(9) {
			grid-area : support-09
		}

		&:nth-child(10) {
			grid-area : support-10
		}

		&:nth-child(11) {
			grid-area : support-11
		}
	}

	hr {
		margin-inline : var(--padding-universal-page);
		border-width  : 1px 0 0 0;
		border-style  : solid;
		border-color  : var(--taupe-complimentary-03);
	}
}

@media ( max-width : 768px ) {

	main.tech-support {
		grid-template-areas :
		'support-01'
		'support-02'
		'support-03'
		'support-04'
		'support-05'
		'support-06'
		'support-07'
		'support-08'
		'support-09'
		'support-10'
		'support-11';
		margin    : auto;
		min-width : fit-content;

		section {
			display: block;
		}
	}
}

/* END TECH SUPPORT */

/* START PRICING */

.pricing {

	section {

		a {
			margin-block-start : 1.5rlh;
			margin-block-end   : .3rlh;
		}
	}
}

/* END PRICING */

/* START PORTFOLIO */

.portfolio {

	section:first-child {
		margin-block : 0;
	}

	figure {
		display               : grid;
		grid-template-columns : 300px auto;
		grid-gap              : 1.5rlh;
		margin                : 0 0 1rlh 0;
		padding               : 0;

		a {
			border             : 0 solid currentColor;
			border-radius      : var(--border-radius);
			corner-shape       : var(--corner-shape);
			height             : fit-content;
			margin-block-start : 0;
			margin-block-end   : 0;

			img {
				display          : flex;
				margin           : 0 auto;
				justify-content  : center;
				line-break       : anywhere;
				background-color : var(--taupe-mono-01);
				border-radius    : var(--border-radius);
				corner-shape     : var(--corner-shape);
				opacity          : 85%;
			}
		}

		svg {
			opacity : 85%;
		}

		.aspect-ratio-01 {
			aspect-ratio : 300 / 391;
		}

		.aspect-ratio-02 {
			aspect-ratio : 300 / 346;
		}

		.aspect-ratio-03 {
			aspect-ratio : 300 / 291;
		}

		.aspect-ratio-04 {
			aspect-ratio : 300 / 346.12;
		}

		.aspect-ratio-05 {
			aspect-ratio : 300 / 200;
		}

		.aspect-ratio-06 {
			aspect-ratio : 300 / 185;
		}

		.svg {
			max-height       : 200px;
			padding          : 0;
			box-shadow       : none;
			background-color : transparent;
		}

		figcaption {
			display      : flow-root;
			width        : -webkit-fill-available;
			padding      : 0;
			margin       : 0 auto;
			border-width : 0;
			border-style : solid;
			border-color : #ccc;

			a {
				display : inline-block;
				border  : none;
			}
		}

		&.last {
			margin-block-end : 0;
		}
	}
}

.clock {
	position       : relative;
	z-index        : 0;
	display        : block;
	margin         : 0 auto;
	width          : 222px;
	height         : 222px;
	border-radius  : 50%;
	box-shadow     : 0 0 5px 2px #ccc inset;
	outline        : 1px solid #bbb;
	outline-offset : 1px;
}

.clock svg {
	position : absolute;
	z-index  : 0;
	top      : 0;
	left     : 0;
}

.hand-minutes, .hand-hours, .hand-seconds {
	transform : rotate(0deg);
}

.face, .pin, .hand-minutes, .hand-hours, .hand-seconds {
	width  : 222px;
	height : 222px;
}

@media ( max-width : 768px ) {

	.portfolio {
		figure {
			display   : block;
			max-width : 400px;
			width     : unset;
			margin    : 0 auto 1rlh auto;
			padding   : 0;

			img {
				max-width : 400px;

				&.svg {
					margin-inline-end   : auto;
					margin-inline-start : auto;
					display             : flex;
				}
			}

			figcaption {
				margin-block-start : .4rem;

				p {
					margin-block-end : 0;
				}
			}

			& > a {
				display       : block;
				border-radius : var(--border-radius)
			}
		}
	}
}

/* END PORTFOLIO */

/* START CONTACT */

.contact {

	section {

		h2 {
			text-align : center;

			&:first-of-type {
				margin-top : 2rlh;
			}
		}

		.button {
			/*font-size : 1rem;*/

			&.phone {
				margin-block-end: 2rlh;
			}
		}

		a {
			display            : block;
			margin-block-start : 1rlh;
			margin-block-end   : 0;
			padding            : 0;
			text-align         : center;

			&:hover {

			}
		}

		.button.transparent {
			appearance       : none;
			background-color : transparent;
			background-image : none;
			color            : var(--color-link) !important;
			text-decoration  : underline;
			font-family      : var(--font-family), sans-serif;
			font-weight      : normal;
			font-size        : 1rem;
			border           : none;
			box-shadow       : none;
		}
	}
}

/* END CONTACT */