:root {
	--applied-research-indent: 4rem;
	--service-indent: var(--applied-research-indent);
}

#services {
	margin-bottom: 4rem;
}

.service {
	width: 100%;
	height: auto;
	position: relative;
	border-bottom: 0.75px solid var(--color-primary);
	padding-bottom: 3rem;
	margin-bottom: 3rem;

	&:last-of-type, &:only-of-type {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.service__content {
	}

	.service__header {
		display: grid;
		grid-template-areas:
		    "serviceLogo serviceTitle";
		grid-template-columns: fit-content(100%) 1fr;
		font-family: "Oswald", sans-serif;
		height: fit-content;
		align-items: center;
		text-align: center;
		margin-bottom: 2rem;
		border: 0.75px solid var(--color-primary);
	}

	.service__logo {
		grid-area: serviceLogo;
		align-self: stretch;
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 0.75px solid var(--color-primary);

		img {
			width: 16vh;
			object-fit: contain;
		}
	}

	.service__logo--burvo {
		background-color: var(--color-burvo);
	}

	.service__logo--tellerline {
		background-color: var(--color-tellerline);
	}

	.service__title {
		grid-area: serviceTitle;
		width: 100%;
		font-size: 2rem;
		font-weight: 400;
		text-transform: none;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 0 1rem;
	}
}

.pricing {
	margin-top: 2rem;

	.pricing__block {
		border-top: 1px solid color-mix(in oklch, var(--color-primary) 35%, transparent);
		margin-top: 1rem;
		padding-top: 1rem;
	}

	.pricing__block--projects {
		border-top: none;
		margin-top: 1.5rem;
		padding-top: 0;
	}

	.pricing__block-title {
		font-family: "Oswald", sans-serif;
		font-size: 1.5rem;
		font-weight: 400;
		margin: 0 0 0.5rem;
		text-transform: none;
	}

	&.pricing--tellerline {
		.pricing__block-title {
			font-family: inherit;
			font-size: inherit;
			font-weight: 400;
			margin-bottom: 0.5rem;
		}

		.pricing__block--projects .pricing__row {
			padding-left: 1rem;
		}

		.pricing__block--projects + .pricing__block {
			border-top: none;
			margin-top: 0;
			padding-top: 0;
		}
	}

	.pricing__label {
		border-top: 3px solid var(--color-primary);
		font-family: "Oswald", sans-serif;
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0.1em;
		margin: 0;
		padding-top: 0.5rem;
		text-transform: uppercase;
	}

	.pricing__list {
		margin: 0;
	}

	.pricing__note {
		color: color-mix(in oklch, var(--color-primary) 68%, transparent);
		font-size: 0.95rem;
		margin: 0.85rem 0 0;
	}

	.pricing__note::before {
		color: var(--color-accent);
		content: "*";
		font-weight: 700;
		margin-right: 0.25rem;
	}

	.pricing__note--plain::before {
		content: none;
		margin-right: 0;
	}

	.pricing__row {
		align-items: baseline;
		border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);
		display: grid;
		gap: 1rem;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 0.55rem 0;
	}

	.pricing__row dt,
	.pricing__row dd {
		margin: 0;
	}

	.pricing__row sup {
		color: var(--color-accent);
		font-size: 0.7em;
		line-height: 0;
		margin-left: 0.1rem;
	}

	.pricing__row dd {
		font-family: "Oswald", sans-serif;
		font-size: 1.5rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.pricing__row dd.pricing__value--text {
		font-family: "Google Sans Flex", sans-serif;
		font-size: 1rem;
		line-height: 1.25;
		max-width: 15rem;
		text-align: right;
		white-space: normal;
	}

	.pricing__row--stacked {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(8rem, clamp(8rem, 28vw, 15rem));
	}

	.pricing__row--stacked dd.pricing__value--text {
		margin-top: 0;
		max-width: 15rem;
		overflow-wrap: break-word;
		text-align: right;
	}

	.pricing__unit {
		font-family: "Google Sans Flex", sans-serif;
		font-size: 0.85rem;
		font-weight: 400;
		margin-left: 0.15rem;
	}
}

.pricing + .button {
	margin-top: 2rem;
}

#applied-research {
	margin-bottom: 4rem;
}

.applied-research {
	width: 100%;
	height: auto;
	position: relative;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 2rem;

	&:last-of-type, &:only-of-type {
		border-bottom: none;
	}

	.applied-research__description {
		margin-left: var(--applied-research-indent);
	}

	.applied-research__header {
		display: grid;
		grid-template-columns: var(--applied-research-indent) 1fr;
		align-items: center;
		font-family: "Oswald", sans-serif;
	}

	.applied-research__number {
		text-transform: none;
		font-size: 2rem;
		color: var(--color-accent);
		letter-spacing: 15%;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.applied-research__title {
		font-size: 2rem;
		padding-bottom: 0;
		font-weight: 400;
		margin-bottom: 0;
		text-transform: none;
	}

	.applied-research__menu {

		--applied-research__menu--padding: 1rem;

		list-style: none;
		padding: 0;
		margin-top: 0.5rem;
		margin-bottom: 0;
		margin-left: calc(var(--applied-research-indent) - var(--applied-research__menu--padding));

		li {
			display: grid;
			grid-template-areas:
			    "label logo"
			    "description logo";
			grid-template-columns: minmax(0, 1fr) min-content;
			margin-bottom: 1rem;
			margin-left: var(--applied-research__menu--padding);
			border: 1px solid var(--color-primary);
		}

		.applied-research__description {
			grid-area: description;
			padding-left: var(--applied-research__menu--padding);
			padding-right: var(--applied-research__menu--padding);
			font-size: 1rem;
			margin: 0;
			padding-bottom: 0.5rem;
		}

		.applied-research__label {
			padding-left: var(--applied-research__menu--padding);
			padding-right: var(--applied-research__menu--padding);
			margin: 0;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			font-family: "Oswald", sans-serif;
			font-size: 1.5rem;

			svg {
				width: 1.5rem;
				height: 1.5rem;
				margin-left: 0.5rem;
			}
		}

		.applied-research__logo {
			grid-area: logo;
			cursor: pointer;
			border-left: 1px solid var(--color-primary);
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 5rem;
				height: auto;
			}

		}

		.applied-research__logo--burvo {
			background-color: var(--color-burvo);
		}

		.applied-research__logo--piggy {
			background-color: var(--color-piggy-plus);
		}

		.applied-research__logo--tellerline {
			background-color: var(--color-tellerline);
		}

		.applied-research__logo--titlesheet {
			background-color: var(--color-titlesheet);
		}
	}
}

/* See below @supports for how we're doing the headline's noise effect. */
#headline {
	position: relative;
	text-align: left;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto; /* Use the optically aligned version */
	font-size: clamp(4.7rem, 14vw, 9rem);
	font-weight: 400;
	line-height: 1;
	margin-bottom: 1rem;
	margin-top: 0rem;
	padding: 0;
	color: var(--color-primary);
	z-index: 2;
}

#headline-dot {
	color: var(--color-accent);
	z-index: inherit;
	display: inline-block;
	animation: headline-dot-drop-in 1.4s cubic-bezier(0.45, 0, 0.55, 1) both;
}

/*
Grain texture for the hero headline: layers the noise tile over a solid
color and clips both to the glyphs. Kept behind an @supports guard because
`color: transparent` would render the headline invisible in browsers
without background-clip: text support, which would fall back to flat text.
The accent dot sets its own color and intentionally stays flat for contrast.

IMPORTANT: This SVG is also used for the noise in the section header backgrounds.
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	#headline {
		color: transparent;
		background-image:
			url("/assets/images/noise.svg"),
			linear-gradient(var(--color-primary), var(--color-primary));
		background-clip: text;
		-webkit-background-clip: text;
	}
}

/*
Drops in from the top of the viewport, squashes on impact, then bounces
a couple of times with diminishing height before settling.
*/
@keyframes headline-dot-drop-in {
	0%   { transform: translateY(-100vh) scale(1, 1); opacity: 0; }
	3%   { opacity: 1; }
	40%  { transform: translateY(0)     scale(1.6, 0.5); }   /* first impact */
	50%  { transform: translateY(-22vh) scale(1.1, 0.9); }  /* bounce up */
	66%  { transform: translateY(0)     scale(1.35, 0.65); } /* second impact */
	76%  { transform: translateY(-7vh)  scale(1.08, 0.92); } /* small bounce */
	88%  { transform: translateY(0)     scale(1.15, 0.85); } /* settle impact */
	100% { transform: translateY(0)     scale(1, 1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#headline-dot {
		animation: none;
	}
}

#hello {
	position: relative;
	font-size: clamp(var(--font-size-base), 6vw, 1.6rem);
	width: 100%;
	margin-top: 0rem;
	padding: 1rem 0rem 1rem 0rem;
	background-color: color-mix(in oklch, var(--color-off-white) 80%, transparent); /* translucent so the blurred backdrop shows through */
	z-index: 2;
	-webkit-backdrop-filter: blur(8px); /* Safari / iOS */
	backdrop-filter: blur(8px);
}

#painting {
	width: 100%;
	height: auto;
	aspect-ratio: 3160 / 2000;
	background-color: transparent;
	padding: 0;
	position: relative;
	overflow: visible;
	z-index: 1;

	img {
		position: absolute;
		bottom: 0;
		left: 0;
		height: auto;
		width: 100%;
		transform-origin: bottom left;
		transform: scale(1.65);
		animation: painting-fade-in 0.8s ease-out both;
	}
}

/* On mobile the body fills the viewport, so the scaled painting would push the page width out. Clip horizontally at the painting box; keep vertical overflow visible. */
@media (max-width: 768px) {
	#painting {
		overflow-x: clip;
		overflow-y: visible;
	}
}

@keyframes painting-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#painting img {
		animation: none;
	}
}