:root {
	--font-geist: "Geist", ui-sans-serif, sans-serif;
	--font-onest: "Onest", ui-sans-serif, sans-serif;
	--color-off-white: oklch(99.703% 0.0001 271.152deg);
	--color-gray: oklch(97.14% 0.0024 46.981deg);
	--color-red: oklch(63.519% 0.2221 23.345deg);
	--color-red-100: oklch(91.192% 0.0426 12.44deg);
	--color-red-600: oklch(55.505% 0.1916 23.073deg);
	--color-rich-blue: oklch(18.567% 0.0158 236.227deg);
	--color-d-blue: oklch(33.098% 0.0359 232.124deg);
	--color-l-blue: oklch(70.893% 0.0882 232.329deg);
	--color-l-blue-100: oklch(94.072% 0.0177 229.242deg);
	--color-l-blue-600: oklch(61.89% 0.0759 232.407deg);
	--color-l-green: oklch(83.773% 0.0894 187.611deg);
	--color-l-green-100: oklch(96.39% 0.0211 189.867deg);
	--color-l-green-600: oklch(72.274% 0.0805 188.382deg);
}

body {
	position: relative;
	overflow-x: hidden;
	font-family: var(--font-onest);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: -1px;
}

a {
	text-decoration: none;
}

p {
	line-height: normal;
}

a,
p,
button {
	letter-spacing: -0.3px;
}

.font-geist {
	font-family: var(--font-geist);
}

.font-onest {
	font-family: var(--font-onest);
}

.max-w-contain {
	padding-inline: max(1rem, 50% - 40rem);
}

.btn {
	padding-inline: 1.25rem;
	font-family: var(--font-geist);
}

.btn-red {
	--bs-btn-hover-bg: var(--color-red);
	--bs-btn-hover-border-color: var(--color-red);
	--bs-btn-hover-color: var(--color-rich-blue);

	&.inverted {
		--bs-btn-color: var(--color-rich-blue);
		--bs-btn-bg: var(--color-red);
		--bs-btn-hover-bg: var(--color-rich-blue);
		--bs-btn-hover-border-color: var(--color-rich-blue);
		--bs-btn-hover-color: var(--color-red);
	}
}

.btn-red-600 {
	--bs-btn-color: var(--color-rich-blue);
	--bs-btn-bg: var(--color-red);
	--bs-btn-hover-bg: var(--color-red-600);
	--bs-btn-hover-border-color: var(--color-red-600);
	--bs-btn-hover-color: var(--color-off-white);
}

.btn-l-blue {
	--bs-btn-hover-bg: var(--color-l-blue);
	--bs-btn-hover-border-color: var(--color-l-blue);
	--bs-btn-hover-color: var(--color-d-blue);

	&.inverted {
		--bs-btn-hover-bg: var(--color-d-blue);
		--bs-btn-hover-border-color: var(--color-d-blue);
		--bs-btn-hover-color: var(--color-l-blue);
	}
}

.btn-l-green {
	--bs-btn-hover-bg: var(--color-l-green);
	--bs-btn-hover-border-color: var(--color-l-green);
	--bs-btn-hover-color: var(--color-d-blue);

	&.inverted {
		--bs-btn-hover-bg: var(--color-d-blue);
		--bs-btn-hover-border-color: var(--color-d-blue);
		--bs-btn-hover-color: var(--color-l-green);
	}
}

@media (width>=768px) and (prefers-reduced-motion: no-preference) {
	[data-animate] {
		&.is-active {
			animation: enter var(--duration, 1s) ease var(--delay, 0s) 1 normal none;
		}

		&:not(.no-fade) {
			opacity: 0%;
			transition: opacity var(--duration, 1s) ease var(--delay, 0s);

			&.is-active {
				opacity: 100%;
			}
		}
	}

	@keyframes enter {
		0% {
			transform: translate(var(--translate-x, 0), var(--translate-y, 0));
		}
	}
}

.swiper {
	mask-image: linear-gradient(90deg, #0000 0%, #000 3rem calc(100% - 3rem), #0000 100%);
}

.swiper-navigation button {
	padding: 0;
	background: 0 0;
	border: none;

	& svg {
		width: 2rem;
		height: 2rem;
	}

	&:active svg {
		fill: var(--color-red);
	}

	&:disabled {
		opacity: 50%;
	}
}

#site-header {
	background-color: var(--color-gray);
}

:is([data-page="search"], [data-page="404"], [data-page="500"]) .page-header {
	padding-block: 4rem;
	background-color: var(--color-gray);
	border-bottom-right-radius: 2rem;
	border-bottom-left-radius: 2rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& h1 {
		color: var(--color-d-blue);
	}
}

:is([data-page="404"], [data-page="500"]) {
	& section {
		gap: 2.5rem;
		padding-block: 5rem;
	}

	& p {
		max-width: 50ch;
	}
}

#site-footer {
	& .symbol {
		right: 0;
	}

	& .combination-mark {
		width: auto;
		height: 3.75rem;
	}

	& a {
		color: var(--color-d-blue);

		&:hover {
			text-decoration: underline;
		}
	}

	& ul {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		max-width: 14rem;
		padding-left: 0;
		margin-bottom: 0;
		list-style: none;

		& > li:first-child {
			font-weight: 700;
		}
	}
}

#mobile-nav-btn {
	background: 0 0;

	& svg {
		color: #000;
	}

	& .menu-close {
		display: none;
	}

	&.open {
		& .menu-open {
			display: none;
		}

		& .menu-close {
			display: block;
		}
	}
}

#mobile-nav {
	inset: 0;
	top: var(--header-height);
	display: none;
	background: var(--color-gray);

	&.open {
		display: block;
	}

	& > ul > li:last-child {
		border-bottom: 1px solid color-mix(in oklch, var(--color-gray) 90%, #000);
	}

	& li {
		background: var(--color-gray);
		border-top: 1px solid color-mix(in oklch, var(--color-gray) 90%, #000);
	}

	& .nav-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem 2rem;

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

		& a {
			width: 100%;
			color: inherit;
		}
	}
}

.mobile-nav-menu {
	padding-left: 0;
	list-style: none;
}

@scope (#site-header) to (#mobile-nav) {
	nav a:not(.btn) {
		color: var(--color-d-blue);

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

	details {
		position: relative;
	}

	summary {
		list-style: none;

		& svg {
			width: 0.75rem;
			height: 0.75rem;
			margin-left: 10px;
		}

		details[open] &,
		&:hover {
			color: var(--color-red);
		}
	}
}

#site-header .nav-menu {
	position: absolute;
	top: 2rem;
	width: max-content;
	min-width: 14rem;
	padding: 1rem;
	list-style: none;
	background: var(--color-off-white);
	border-radius: 1.25rem;
	box-shadow:
		0 62px 17px #22394400,
		0 40px 16px #22394405,
		0 22px 13px #22394412,
		0 10px 10px #22394421,
		0 2px 5px #22394424;

	& li {
		&:hover {
			color: var(--color-red);
		}

		&:not(:last-child) {
			padding-block-end: 0.75rem;
		}
	}
}

#get-started {
	padding-block: 4rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& .banner {
		background: var(--color-d-blue);
		border-radius: 1.25rem;

		& svg {
			top: -5%;
			right: 20%;

			@media (width<1200px) {
				opacity: 20%;
				filter: brightness(0.8);
			}
		}
	}

	& h2 {
		color: var(--color-red);
	}

	& p {
		max-width: 32rem;
		font-size: 1.25rem;
		color: var(--color-off-white);
	}
}

.blobs {
	rotate: 50deg;
}

:nth-child(1 of .blobs) {
	top: 13rem;
	left: -4.75rem;

	@media (width>=768px) {
		top: 11rem;
		left: -3.5rem;
	}
}

:nth-child(2 of .blobs) {
	top: 21rem;
	right: -6rem;

	@media (width>=768px) {
		top: 16.75rem;
		right: 8.75rem;
	}
}

.blob {
	position: absolute;
	width: 16rem;
	height: 16rem;
	border-radius: 9999px;
	filter: blur(9rem);

	&.blue {
		margin-top: 4rem;
		margin-right: 8rem;
		background: var(--color-l-blue);
	}

	&.green {
		margin-top: 5rem;
		margin-left: 8rem;
		background: var(--color-l-green);
	}

	&.red {
		width: 14rem;
		height: 14rem;
		background: var(--color-red);
	}
}

.page-header {
	padding-block: 4rem;
	color: var(--color-d-blue);
	background-color: var(--page-header-bg, var(--color-l-blue-100));
	border-bottom-right-radius: 2rem;
	border-bottom-left-radius: 2rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& nav {
		& a {
			color: inherit;
		}

		& svg {
			margin-inline: 0.75rem;
		}
	}

	& hgroup {
		& > * {
			width: 100%;
		}

		& p {
			margin-bottom: 0;
			font-size: 1.25rem;
		}
	}
}

.video-bg {
	inset: 0;
	max-height: 100%;
	opacity: 5%;
	filter: grayscale();
}

.image-card {
	border-radius: 1.25rem;

	& p,
	& ul {
		font-size: 1.25rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	@media (width>=768px) {
		& .left,
		& .right {
			width: 50%;
		}

		& img {
			width: 100%;
			height: 100%;
		}
	}
}

[data-page="approach"] {
	--page-header-bg: var(--color-l-green-100);

	& .img-card-list {
		& :nth-child(1 of .image-card) {
			background-color: var(--color-l-blue-100);
		}

		& :nth-child(2 of .image-card) {
			background-color: var(--color-l-green-100);
		}

		& :nth-child(3 of .image-card) {
			background-color: var(--color-red-100);
		}
	}
}

#hero {
	padding-block: 4rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& hgroup p {
		max-width: 32rem;
		font-size: 1.125rem;
	}

	& .right video {
		aspect-ratio: 7/5;
		border-radius: 1.25rem;
	}
}

#mission {
	background-color: var(--color-gray);

	& figure {
		max-width: 56rem;
		padding-block: 5rem;
	}

	& blockquote {
		font-size: calc(1.325rem + 0.9vw);
		color: var(--color-l-blue-600);
	}

	& svg {
		position: absolute;
		color: var(--color-gray);
		filter: brightness(0.95);
		scale: 0.9;

		&:first-of-type {
			bottom: 0;
			left: 0;
			transform-origin: bottom;
		}

		&:last-of-type {
			top: 0;
			right: 0;
			transform-origin: top;
		}
	}
}

#experts {
	padding-block: 4rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& hgroup {
		& h2 {
			color: var(--color-l-blue-600);
		}

		& p {
			font-size: 1.125rem;
			color: var(--color-rich-blue);
		}
	}

	& .portraits {
		grid-template-columns: repeat(2, 1fr);

		@media (width>=768px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (width>=992px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	& figure {
		& img {
			aspect-ratio: 4/5;
			border-radius: 1.5rem;
		}

		& p {
			color: var(--color-red-600);
		}
	}
}

[data-page="about"] #hero h1 {
	& .highlight {
		color: var(--color-l-green-600);
	}

	& > :not(.highlight) {
		color: var(--color-d-blue);
	}
}

#our-story {
	padding-block: 4rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& .banner {
		padding: 5rem;
		color: var(--color-d-blue);
		background-color: var(--color-l-green);
		border-radius: 1.25rem;

		& p {
			font-size: 1.125rem;
		}
	}
}

[data-page="about"] .banner {
	gap: 5rem;
	padding-block: 4rem;
	background-color: var(--color-l-blue);

	@media (width>=768px) {
		padding-block: 6rem;
	}

	&:last-child {
		color: var(--color-d-blue);
	}
}

[data-page="contact"] #hero h1 {
	& .highlight {
		color: var(--color-l-blue-600);
	}

	& > :not(.highlight) {
		color: var(--color-d-blue);
	}
}

#contact-form {
	gap: 3rem 8rem;
	color: var(--color-d-blue);

	& address {
		& a {
			color: inherit;

			&:hover {
				text-decoration: underline;
			}
		}

		& p {
			margin-bottom: 0;
		}

		& video {
			aspect-ratio: 5/4;
			border-radius: 1.25rem;
		}
	}

	& form {
		& input,
		& textarea {
			border: 1px solid #bebebe;

			&:focus-visible {
				border-color: var(--color-l-blue-600);
			}

			&::placeholder {
				color: var(--color-l-blue-600);
			}
		}

		& textarea {
			border-radius: 1rem;
		}
	}

	& #captcha {
		height: 4.5rem;
	}
}

#resources {
	& h2 {
		color: var(--color-d-blue);
	}

	& > div {
		grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));

		& article {
			border-radius: 1.5rem;

			&:nth-of-type(3n + 1) {
				background-color: var(--color-l-green);
			}

			&:nth-of-type(3n + 2) {
				background-color: var(--color-l-blue);
			}

			&:nth-of-type(3n + 3) {
				background-color: var(--color-red);
			}

			& img {
				aspect-ratio: 5/3;
				width: 100%;
			}

			& time {
				font-size: 0.875rem;
			}

			& svg {
				width: 1.5rem;
				height: 1.5rem;
				color: #000;
			}
		}

		& .card-body,
		& article footer {
			padding: 2.5rem;
		}

		& footer a {
			color: var(--color-d-blue);

			&:hover svg {
				transform: translate(6px);
			}
		}

		& footer svg {
			transition: transform 0.3s;
		}
	}
}

search {
	& #query {
		color: var(--color-d-blue);
	}

	& output article {
		background-color: var(--color-gray);
		border-radius: 1.5rem;

		& svg {
			transition: transform 0.3s;
		}

		& a {
			color: var(--color-d-blue);

			&:hover svg {
				transform: translate(6px);
			}
		}
	}
}

[data-page="advisory"] .img-card-list {
	padding-top: 3rem;

	@media (width>=768px) {
		grid-auto-rows: 1fr;
		padding-top: 6rem;
	}

	& .image-card:first-of-type {
		background-color: var(--color-l-green-100);
	}

	& .image-card:nth-of-type(2) {
		background-color: var(--color-red-100);
	}

	& .image-card:nth-of-type(3) {
		background-color: var(--color-l-blue-100);
	}
}

.carousel {
	& .swiper {
		@media (width<768px) {
			mask-image: none;
		}
	}

	& .swiper-slide {
		height: initial;
		min-height: 10rem;
		padding: 2rem;
		overflow: hidden;
		color: var(--color-rich-blue);
		background: var(--stat-color);
		border-radius: 1.25rem;

		&:nth-of-type(3n + 1) {
			--stat-color: var(--color-red);
		}

		&:nth-of-type(3n + 2) {
			--stat-color: var(--color-l-blue);
		}

		&:nth-of-type(3n + 3) {
			--stat-color: var(--color-l-green);
		}

		& svg {
			top: 0;
			left: 0.25rem;
			filter: brightness(0.9);
			fill: var(--stat-color);
			transform-origin: top;
			scale: 0.85;
			z-index: -1;
		}

		& p {
			margin-bottom: 0;
			font-size: 1.5rem;
			line-height: normal;
		}
	}
}

.card {
	padding: 3.5rem;
	color: var(--color-d-blue);
	border: none;
	border-radius: 1.5rem;

	& p {
		font-size: 1.125rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	&:nth-child(5n + 1) {
		background-color: var(--color-l-green-100);
	}

	&:nth-child(5n + 2) {
		background-color: var(--color-l-blue-100);
	}

	&:nth-child(5n + 3) {
		background-color: var(--color-red-100);
	}

	&:nth-child(5n + 4) {
		background-color: var(--color-l-green);
	}

	&:nth-child(5n + 5) {
		background-color: var(--color-l-blue);
	}
}

h2:has(+ .card-list) {
	color: var(--color-d-blue);
}

.card-list .card {
	flex: 20rem;
}

[data-page="ai-security-testing"],
[data-page="penetration-testing"] {
	& .image-card {
		background-color: var(--color-l-blue);
	}

	& .card {
		flex: 0 calc(33.33% - 1rem);
		min-width: min(100%, 20rem);
	}

	& .swiper-title {
		max-width: 20rem;
	}

	& .swiper-slide {
		max-width: 500px;
	}
}

#designed-for {
	gap: 5rem;

	& .left {
		color: var(--color-rich-blue);

		&:not(h2) {
			font-size: 1.125rem;
		}
	}

	& .right img {
		aspect-ratio: 5/4;
		border-radius: 1.5rem;
	}
}

[data-page="managed-security-services"] .image-card {
	color: var(--color-rich-blue);
	background-color: var(--color-red);
}

#methodologies {
	& h2 {
		color: var(--color-d-blue);
	}

	& .image-card {
		color: var(--color-rich-blue);

		&:first-of-type {
			background-color: var(--color-l-green);
		}

		&:last-of-type {
			background-color: var(--color-l-green-100);
		}
	}
}

#whats-included {
	& h2 {
		color: var(--color-d-blue);
	}

	& > div {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;

		@media (width>=768px) {
			grid-template-columns: 1fr 1fr;
		}
	}
}

#services {
	--stack-offset: calc(var(--header-height) + 2rem);

	padding-block: 4rem;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& h2 {
		position: sticky;
		top: var(--stack-offset);
		color: var(--color-l-blue-600);
	}
}

#services .service-card {
	position: sticky;
	top: calc(var(--header-height) + calc(var(--index) * 2rem) + 5rem);
	color: var(--color-d-blue);
	background: var(--service-card-color);
	border-radius: 1.25rem;

	&:first-of-type {
		--index: 1;
		--service-card-color: var(--color-l-blue);
	}

	&:nth-of-type(2) {
		--index: 2;
		--service-card-color: var(--color-l-blue-100);
	}

	&:nth-of-type(3) {
		--index: 3;
		--service-card-color: var(--color-l-green);
	}

	&:nth-of-type(4) {
		--index: 4;
		--service-card-color: var(--color-red-100);
	}

	&:nth-of-type(5) {
		--index: 5;
		--service-card-color: var(--color-l-green-100);
	}

	& .left {
		& svg {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&::after {
			position: absolute;
			inset: 0;
			content: "";
			background: color-mix(in oklch, var(--service-card-color) 80%, transparent);
		}
	}

	& p {
		font-size: 1.125rem;
	}

	@media (width>=768px) {
		& .left,
		& .right {
			width: 50%;
		}

		& img {
			width: 100%;
			height: 100%;
		}
	}
}

[data-page="services"] #hero h1 {
	& .highlight {
		color: var(--color-l-blue-600);
	}

	& > :not(.highlight) {
		color: var(--color-d-blue);
	}
}

#certifications {
	& h2 {
		color: var(--color-l-blue-600);
	}

	& .swiper {
		padding-inline: 3rem;

		@media (width>=768px) {
			padding-inline-end: 1rem;
		}
	}

	& .swiper-slide {
		place-items: center;
		max-width: 7.5rem;
	}
}

.logomark-bg {
	z-index: -2;
	max-height: 50rem;
	background: var(--color-gray);
	opacity: 40%;
	mask-image: url("./img/logomark.svg");
	mask-repeat: no-repeat;
	mask-size: contain;
}

[data-page="home"] #hero {
	padding-block: 4rem;
	overflow-x: clip;

	@media (width>=768px) {
		padding-block: 6rem;
	}

	& .left {
		& h1 .highlight {
			color: var(--color-l-blue-600);
		}

		& h1 > :not(.highlight) {
			color: var(--color-d-blue);
		}

		& p {
			max-width: 32rem;
			font-size: 1.125rem;
		}
	}

	& .right video {
		aspect-ratio: 4/3;
		border-radius: 1.25rem;
	}
}

[data-page="home"] #hero .circle {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 0.5rem;
	color: var(--color-d-blue);
	border-radius: 9999px;

	& svg {
		height: 3.5rem;

		@media (prefers-reduced-motion: no-preference) {
			animation: float 3s ease-in-out var(--delay) infinite;
		}
	}

	&:first-of-type {
		--delay: 0s;

		top: 0;
		left: 40%;
		background: var(--color-l-blue-100);
		transform: translateY(-50%);
	}

	&:nth-of-type(2) {
		--delay: 2s;

		top: 50%;
		right: 0;
		background: var(--color-l-green-100);
		transform: translate(50%, -75%);
	}

	&:nth-of-type(3) {
		--delay: 1s;

		bottom: 2rem;
		left: 2rem;
		background: var(--color-gray);
	}
}

#by-the-numbers {
	& .swiper-title {
		min-width: max-content;
	}

	& .swiper-slide {
		max-width: 20rem;
		text-align: center;
	}
}

@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}

	100% {
		transform: translateY(0);
	}
}

.sitemap-group {
	padding-left: 1.3rem;

	& li {
		& a {
			font-size: 1.125rem;
			color: var(--color-d-blue);

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

		& ul {
			padding-left: 1.3rem;
			margin-bottom: 1rem !important;
		}
	}
}

.pagination {
	margin-bottom: 0;

	& li {
		width: 22px;
		height: 22px;
		display: flex;
		align-items: center;
		justify-content: center;

		& a {
			color: var(--color-d-blue);
			font-size: 1rem;
		}

		&.active,
		&:hover {
			a {
				color: var(--color-red);
			}
		}

		& a .fa {
			font-size: 1.2rem;
		}
	}
}