/*
 * /sl/o-nas/ body styles.
 *
 * Transcribed verbatim from the design source, in SOURCE ORDER, and limited to
 * what this page needs and the theme does not already have. The gap was
 * measured rather than guessed: of the 147 source rules that match something
 * inside <main> on this page, 107 are already in the shell and service bundles
 * -- .section, .section-soft, .grid-3, .feature-list, .feature, .check,
 * .cta-band, .btn and the rest -- so only the remainder is here.
 *
 * Nothing in this file is a redesign and nothing is tidied. Where the source
 * groups a selector with one this page does not use (.content-image beside
 * .image-card, .outcome-card beside .value-card) only the applicable half is
 * kept; dropping a selector that matches nothing here changes no cascade.
 *
 * .cta-section WAS in this file because the services CTA sits in a plain
 * .section while this page's sits in .section.cta-section, which the source
 * gives its own padding. Slice 8 found the same seven rules byte-identical in
 * five page stylesheets and moved them to shared.css, which this bundle now
 * loads before this file. The one rule that stayed is
 * `.cta-band .cta-actions .btn { margin: 0 }`: it exists here and nowhere else,
 * and one file is not a shared primitive.
 */

.image-card {
	position: relative; min-height: 520px; overflow: hidden; border-radius: 42px; box-shadow: var(--shadow);
}
.image-card img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.image-card::after {
	position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(4,12,28,.72));
}
@media (max-width: 680px) {
	.image-card {
		min-height: 380px;
	}
}
.image-card::before {
	position: absolute;
	z-index: 3;
	inset: 18px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 30px;
	pointer-events: none;
	content: "";
}
.brand-layout {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(55px, 7vw, 95px);
	align-items: center;
}
.brand-layout.reverse {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.image-caption {
	position: absolute;
	z-index: 5;
	right: 28px;
	bottom: 28px;
	left: 28px;
	padding: 24px;
	display: grid;
	gap: 5px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 22px;
	color: #fff;
	background: rgba(5,13,31,.66);
	backdrop-filter: blur(16px);
}
.image-caption span {
	color: #77e7f7;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.image-caption strong {
	font-family: "Google Sans", Inter, sans-serif;
	font-size: clamp(17px, 2vw, 22px);
}
.brand-copy h2 {
	margin-bottom: 28px;
}
.brand-copy .lead strong {
	color: var(--ink);
}
.cta-band .cta-actions .btn {
	margin: 0;
}
.story-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(55px, 8vw, 110px);
	align-items: start;
}
.story-lead {
	position: sticky;
	top: 130px;
}
.story-copy {
	padding-top: 36px;
	color: #536176;
	font-size: clamp(17px, 1.7vw, 20px);
}
.story-copy p {
	margin: 0 0 26px;
}
.story-copy strong {
	color: var(--ink);
}
.values-grid {
	align-items: stretch;
}
.value-card {
	min-height: 330px;
	padding: 42px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 30px;
	background:
	radial-gradient(circle at 100% 0, rgba(40,117,255,.1), transparent 14rem),
	#fff;
	box-shadow: 0 18px 50px rgba(11,20,40,.065);
	transition: transform .3s, box-shadow .3s, border-color .3s;
}
.value-card:hover {
	border-color: rgba(40,117,255,.22);
	box-shadow: 0 30px 75px rgba(11,20,40,.12);
	transform: translateY(-7px);
}
.value-card > span {
	color: transparent;
	background: var(--gradient);
	background-clip: text;
	font-size: 54px;
	font-weight: 900;
	letter-spacing: -0.036em;
}
.value-card h3 {
	margin: auto 0 14px; font-size: 24px;
}
.value-card p {
	margin: 0; color: var(--muted);
}
@media (max-width: 1020px) {
	.brand-layout,
	.brand-layout.reverse,
	.story-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 1020px) {
	.story-lead {
		position: static;
	}
}
@media (max-width: 1020px) {
	.story-copy {
		padding-top: 0;
	}
}
@media (max-width: 680px) {
	.image-caption {
		right: 18px; bottom: 18px; left: 18px; padding: 18px;
	}
}
@media (max-width: 680px) {
	.value-card {
		min-height: 285px; padding: 34px 28px;
	}
}
.image-card {
	border: 0;
	border-radius: 26px;
	box-shadow: 0 24px 60px rgba(8,24,52,.13);
}
.image-card::before {
	display: none;
}
.image-caption {
	border-radius: 16px;
}
.value-card {
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 12px 38px rgba(8,24,52,.065);
}
.value-card:hover {
	box-shadow: 0 22px 52px rgba(8,24,52,.11);
	transform: translateY(-4px);
}
@media (max-width: 1020px) {
	.brand-layout,
	.brand-layout.reverse {
		gap: 42px;
	}
}
@media (max-width: 680px) {
	.brand-layout,
	.brand-layout.reverse {
		gap: 34px;
	}
}