/**
 * Shared company-page presentation primitives.
 */

.rg-about-page {
	--rg-company-navy: #031127;
	--rg-company-navy-deep: #010918;
	--rg-company-panel: #081a37;
	--rg-company-panel-strong: #0c2349;
	--rg-company-border: rgba(117, 211, 255, .18);
	--rg-company-border-strong: rgba(108, 225, 255, .42);
	--rg-company-cyan: var(--cyan, #62e6ff);
	--rg-company-blue: #63a4ff;
	--rg-company-violet: #9077ff;
	--rg-company-magenta: #ed6adf;
	--rg-company-ink: #f7fbff;
	--rg-company-muted: #a5b5cf;
	--rg-company-muted-strong: #c8d5e8;
	background: var(--rg-company-navy-deep);
	color: var(--rg-company-ink);
}

.rg-about-page *,
.rg-about-page *::before,
.rg-about-page *::after {
	box-sizing: border-box;
}

.rg-about-site {
	min-width: 0;
	overflow: clip;
	background:
		radial-gradient(circle at 88% 7%, rgba(92, 77, 215, .13), transparent 25%),
		var(--rg-company-navy-deep);
}

.rg-company-container {
	width: min(calc(100% - (var(--rg-page-gutter) * 2)), var(--rg-content-max));
	margin-inline: auto;
}

.rg-company-section {
	position: relative;
	padding-block: var(--rg-section-space);
}

.rg-company-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	color: var(--rg-company-cyan);
	font-size: var(--rg-type-eyebrow);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.rg-company-eyebrow svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
}

.rg-company-heading {
	max-width: 900px;
	margin-bottom: 64px;
}

.rg-company-heading--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(330px, .65fr);
	align-items: end;
	gap: 72px;
	max-width: none;
}

.rg-company-heading h2,
.rg-company-conversion h2 {
	margin: 0;
	color: var(--rg-company-ink);
	font-size: var(--rg-type-display-h2);
	font-weight: 600;
	line-height: var(--rg-leading-display-h2);
	letter-spacing: var(--rg-tracking-display-h2);
}

.rg-company-heading__intro {
	max-width: 590px;
	margin: 0 0 5px;
	color: var(--rg-company-muted-strong);
	font-size: var(--rg-type-body-lg);
	line-height: 1.62;
}

.rg-company-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.rg-about-page .s6-cta {
	min-height: 56px;
	justify-content: center;
	padding-inline: 24px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 750;
}

.rg-about-page .s6-cta-ghost {
	border-color: rgba(157, 185, 224, .34);
	background: rgba(8, 23, 48, .58);
	color: #f5f9ff;
}

.rg-company-text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--rg-company-cyan);
	font-size: 15px;
	font-weight: 750;
	text-decoration: none;
}

.rg-company-text-link svg {
	width: 17px;
	height: 17px;
	transition: transform var(--rg-hover-duration) ease;
}

.rg-company-text-link:is(:hover, :focus-visible) {
	color: #fff;
}

.rg-company-text-link:is(:hover, :focus-visible) svg {
	transform: translate3d(3px, -3px, 0);
}

.rg-company-media {
	position: relative;
	min-width: 0;
	margin: 0;
}

.rg-company-media__viewport {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--rg-company-border);
	border-radius: 28px;
	background: #06162f;
	box-shadow: 0 34px 90px rgba(0, 4, 17, .5), inset 0 1px rgba(255, 255, 255, .08);
}

.rg-company-media__viewport::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 20%, transparent 72%, rgba(111, 77, 245, .17)),
		linear-gradient(0deg, rgba(2, 10, 27, .62), transparent 35%);
}

.rg-company-media__viewport img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms cubic-bezier(.2, .7, .2, 1), filter 500ms ease;
}

.rg-company-media:hover .rg-company-media__viewport img {
	transform: scale(1.025);
	filter: saturate(1.07) contrast(1.02);
}

.rg-company-media__glass {
	position: absolute;
	z-index: 3;
	top: 10%;
	right: 8%;
	width: 42%;
	height: 56%;
	border: 1px solid rgba(166, 227, 255, .2);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(210, 240, 255, .08), rgba(92, 78, 223, .03));
	box-shadow: inset 0 1px rgba(255, 255, 255, .09);
	transform: skewY(-5deg);
	pointer-events: none;
}

.rg-company-media__nodes {
	position: absolute;
	z-index: 4;
	inset: 0;
	pointer-events: none;
}

.rg-company-media__nodes i {
	position: absolute;
	width: 7px;
	height: 7px;
	border: 1px solid #b6f4ff;
	border-radius: 50%;
	background: var(--rg-company-cyan);
	box-shadow: 0 0 0 6px rgba(98, 230, 255, .09), 0 0 24px rgba(98, 230, 255, .85);
}

.rg-company-media__nodes i:nth-child(1) { top: 19%; right: 23%; }
.rg-company-media__nodes i:nth-child(2) { right: 12%; bottom: 28%; }
.rg-company-media__nodes i:nth-child(3) { right: 48%; bottom: 16%; }

.rg-company-media figcaption {
	position: absolute;
	z-index: 6;
	right: 20px;
	bottom: 20px;
	display: grid;
	gap: 5px;
	max-width: 310px;
	padding: 15px 18px;
	border: 1px solid rgba(137, 216, 255, .22);
	border-radius: 13px;
	background: rgba(3, 14, 35, .76);
	box-shadow: 0 16px 46px rgba(0, 4, 18, .35);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.rg-company-media figcaption small {
	color: var(--rg-company-cyan);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.rg-company-media figcaption strong {
	color: #fff;
	font-size: 16px;
	line-height: 1.35;
}

.rg-company-conversion {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 112px 72px;
	border-top: 1px solid rgba(116, 206, 255, .2);
	background:
		radial-gradient(circle at 80% 38%, rgba(113, 71, 230, .23), transparent 28%),
		linear-gradient(118deg, #061a35, #0a1740 52%, #130d39);
}

.rg-company-conversion::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: linear-gradient(rgba(92, 184, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 184, 255, .05) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
	mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
}

.rg-company-conversion__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
	align-items: end;
	gap: 88px;
}

.rg-company-conversion__content > p {
	max-width: 590px;
	margin: 0 0 30px;
	color: var(--rg-company-muted-strong);
	font-size: 20px;
	font-weight: 650;
	line-height: 1.55;
}

.rg-company-conversion__content > small {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 20px;
	color: var(--rg-company-muted);
	font-size: 14px;
	line-height: 1.45;
}

.rg-company-conversion__content > small svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--rg-company-cyan);
}

.rg-company-conversion__orbit {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -5vw;
	width: 460px;
	aspect-ratio: 1;
	border: 1px solid rgba(101, 211, 255, .12);
	border-radius: 50%;
	transform: translateY(-50%);
}

.rg-company-conversion__orbit i {
	position: absolute;
	inset: 14%;
	border: inherit;
	border-radius: inherit;
}

.rg-company-conversion__orbit i:nth-child(2) { inset: 28%; }
.rg-company-conversion__orbit i:nth-child(3) { inset: 42%; background: rgba(123, 93, 240, .1); box-shadow: 0 0 80px rgba(116, 86, 239, .28); }

@media (max-width: 1180px) {
	.rg-company-heading--split,
	.rg-company-conversion__grid {
		grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
		gap: 48px;
	}
}

@media (max-width: 900px) {
	.rg-company-section { padding-block: 92px; }
	.rg-company-heading { margin-bottom: 48px; }
	.rg-company-heading--split,
	.rg-company-conversion__grid { grid-template-columns: 1fr; gap: 30px; }
	.rg-company-heading__intro { max-width: 720px; }
	.rg-company-conversion { padding-block: 88px 64px; }
}

@media (max-width: 640px) {
	.rg-company-container { width: calc(100% - 36px); }
	.rg-company-section { padding-block: 72px; }
	.rg-company-eyebrow { margin-bottom: 18px; }
	.rg-company-heading { margin-bottom: 38px; }
	.rg-company-heading h2,
	.rg-company-conversion h2 { font-size: clamp(38px, 11vw, 50px); }
	.rg-company-heading__intro { font-size: 17px; }
	.rg-company-actions { display: grid; grid-template-columns: 1fr; }
	.rg-about-page .s6-cta { width: 100%; }
	.rg-company-media__viewport { border-radius: 19px; }
	.rg-company-media figcaption { right: 12px; bottom: 12px; left: 12px; max-width: none; }
	.rg-company-media__glass { display: none; }
	.rg-company-conversion { padding-block: 72px 54px; }
	.rg-company-conversion__content > p { font-size: 18px; }
}
