/* ==========================================================================
   O nas. Wartości 1:1 z „Agencja GEO - O nas.dc.html".
   ========================================================================== */

.on-hero {
	background: var(--ag-ink);
	padding: 88px var(--ag-gutter);
	position: relative;
	overflow: hidden;
}
.on-hero .ag-badge { margin-bottom: 26px; }
.on-hero__title {
	font-size: 58px;
	line-height: 1.06;
	color: var(--ag-cream);
	letter-spacing: -.03em;
	max-width: 1000px;
	position: relative;
}
.on-hero__title em { color: var(--ag-mint); font-style: normal; }
.on-hero__lead {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--ag-on-dark);
	margin-top: 24px;
	max-width: 660px;
	position: relative;
}

/* ---------------------------------------------------------- zasady -------- */

.on-rules { padding-top: 96px; padding-bottom: 96px; }
.on-rules__title { font-size: 44px; line-height: 1.06; letter-spacing: -.03em; margin-bottom: 48px; }
.on-rules__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.on-rule {
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-r-card);
	padding: 32px;
}
.on-rule__num {
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 15px;
	color: var(--ag-green);
	margin-bottom: 16px;
}
.on-rule__title {
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.01em;
	margin-bottom: 10px;
}
.on-rule__text { font-size: 15.5px; line-height: 1.6; font-weight: 500; color: var(--ag-on-light); }

.on-rule--dark { background: var(--ag-ink); border-color: var(--ag-ink); }
.on-rule--dark .on-rule__num { color: var(--ag-mint); }
.on-rule--dark .on-rule__title { color: var(--ag-cream); }
.on-rule--dark .on-rule__text { color: var(--ag-on-dark); }

/* ------------------------------------------------------ dlaczego teraz ---- */

.on-why {
	background: var(--ag-ink);
	padding-top: 96px;
	padding-bottom: 96px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.on-why__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--ag-mint);
	margin-bottom: 18px;
}
.on-why__title { font-size: 40px; line-height: 1.1; color: var(--ag-cream); letter-spacing: -.03em; }
.on-why__lead {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--ag-on-dark);
	margin-top: 22px;
}

.on-why__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.on-num {
	background: rgba(242, 239, 231, .06);
	border: 1px solid rgba(61, 242, 176, .25);
	border-radius: var(--ag-r-card);
	padding: 28px;
}
.on-num__value {
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 36px;
	color: var(--ag-mint);
}
.on-num__label { font-size: 14px; font-weight: 600; color: var(--ag-cream); margin-top: 8px; }

.on-num--mint { background: var(--ag-mint); border-color: var(--ag-mint); }
.on-num--mint .on-num__value,
.on-num--mint .on-num__label { color: var(--ag-ink); }

/* ---------------------------------------------------------- zespół -------- */

.on-team { padding-top: 96px; padding-bottom: 96px; }
.on-team__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 44px;
	gap: 40px;
}
.on-team__title { font-size: 44px; line-height: 1.06; letter-spacing: -.03em; }
.on-team__lead { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ag-on-light); max-width: 400px; }

.on-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Dwie realne osoby — karty nie mogą się rozciągać na całą szerokość. */
.on-team__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.on-team__grid--1 { grid-template-columns: minmax(0, 440px); }

.on-member {
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-r-card);
	overflow: hidden;
	transition: border-color .15s ease;
}
.on-member:hover { border-color: var(--ag-green); }
.on-member__link { display: block; color: inherit; }
.on-member__link:hover { color: inherit; }

/* Portret: kadr pionowy, twarz w górnej części kadru. */
.on-member__img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 22%;
	background: var(--ag-ink);
}
.ag-ph.on-member__img { aspect-ratio: 4 / 3; font-size: 34px; font-family: var(--ag-display); }

.on-member__body { padding: 24px 28px; }
.on-member__role {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ag-green);
	margin-bottom: 8px;
}
.on-member__title {
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 21px;
	margin-bottom: 8px;
	letter-spacing: -.01em;
}
.on-member__text { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--ag-on-light); }
.on-member__more {
	display: inline-block;
	margin-top: 14px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ag-green);
}

/* ==========================================================================
   RWD
   ========================================================================== */

@media (max-width: 1100px) {
	.on-hero__title { font-size: 42px; }
	.on-rules__grid { grid-template-columns: 1fr; }
	.on-why { grid-template-columns: 1fr; gap: 40px; }
	.on-team__grid { grid-template-columns: 1fr; }
	.on-team__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 700px) {
	.on-hero { padding-top: 48px; padding-bottom: 48px; }
	.on-hero__title { font-size: 29px; line-height: 1.1; }
	.on-hero__lead { font-size: 15px; }

	.on-rules, .on-why, .on-team { padding-top: 56px; padding-bottom: 56px; }
	.on-rules__title, .on-team__title { font-size: 25px; margin-bottom: 28px; }
	.on-why__title { font-size: 24px; }
	.on-why__lead { font-size: 14.5px; }
	.on-num__value { font-size: 28px; }
	.on-num__label { font-size: 13px; }
	.on-rule { padding: 24px; }
	.on-rule__title { font-size: 19px; }
	.on-rule__text, .on-member__text { font-size: 14px; }
}