.œPage.-about
{
	& > .__cover
	{
		grid-row: 1;
		height: clamp(25.6rem, 40lvh,64rem);
		z-index: 0;

		& :is(img,video)
		{
			height: 100%;
			object-fit: cover;
			width: 100%;
		}

	}

	& > .__header
	{
		grid-row: 1;
		z-index: 2;
	}
	
}

.œSection.-hero
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 64lvh auto auto;
	isolation: isolate;
	margin-block-end: var(--gap-two-thirds-width);

	& figure
	{
		align-self: stretch;
		grid-column: 1 / -1;
		grid-row: 1 / -1;
		min-height: 100lvh;
		position: relative;
		z-index:0;
	}

	& figure :is(img,video)
	{
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	& figure:after
	{
		background: linear-gradient(135deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
		content: '';
		inset: 0;
		opacity: .6;
		position: absolute;
	}

	& .__header
	{
		align-self:center;
		grid-column: 1 / -1;
		grid-row: 2;
		padding-block: var(--gap-width);
		padding-inline: var(--gap-threefold-width);
		z-index:1;

		& .__heading
		{
			color: #FFFFFF;
			font-size: var(--font-size-xxl);
			font-weight: 800;
			justify-self: start;
			line-height: 0.8em;
		}

	}

	& .__main
	{
		color: #FFFFFF;
		font-size: var(--font-size);
		font-weight: 600;
		grid-column: 1 / -1;
		grid-row: 3;
		line-height: 1.5em;
		padding-block-end: var(--gap-threefold-width);
		padding-inline: var(--gap-threefold-width);
		z-index:1;

		& p + p {
			margin-block-start: var(--gap-half-width);
		}
	}

}



#sb
{
	backdrop-filter: blur(8px);
	background-color: color-mix(in oklab,var(--color-primary-background) 88%, transparent);
	display: grid;
	inset: auto 0 0 0;
	padding: var(--gap-width);
	position: fixed;
	z-index: 999;

	& .__cta
	{
		justify-self: end;

		& .__label
		{
			animation: pulsate 10s infinite ease-in-out;
		}

		& svg
		{
			animation: ring 10s infinite ease-in-out;
		}
	}
}

#also
{
	padding-block: var(--gap-fourfold-width);

	& a {
		aspect-ratio: 1;
		background-color: var(--color-secondary-background);
		border-radius: .8rem;
		display: block;

		width: 64cqi;
	}

	& .__heading
	{
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		background-image: var(--gradient-brand-green);
		font-size: var(--font-size-xxl);
		font-weight: 800;
		line-height: 0.8em;
		justify-self: start;
		margin-block-end: var(--gap-double-width);
		padding-inline: var(--gap-threefold-width);
		text-fill-color: transparent;

		& span {
			display: block;
		}

	}

	& .œScroller
	{
		padding-inline-start: var(--gap-threefold-width);
	}

}