/* Strona /o-nas wg projektu „O nas.dc.html". Bazuje na kontakt.css (wk-*);
   tu tylko układy wo-*. Zamiast slotów na zdjęcia z makiety — dekoracyjny
   panel warstw (motyw logo); podmienimy na realne fotki warsztatu. */

.onas-landing .ws-page__head { display: none; }

/* ---------- Hero ---------- */
.wo-hero__body { padding: 24px 0 4px; }
.wo .wk-hero__in { padding-bottom: 40px; }
.wo .wk-h1 { font-size: clamp(32px, 4vw, 48px); }
.wo .wk-lead { max-width: none; line-height: 1.6; margin-top: 18px; }
.wo .wk-lead + .wk-lead { margin-top: 12px; }
.wo .wk-lead b { color: #fff; }
.wo-hero__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.wo-btn--outline {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}
.wo-btn--outline:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Pasek liczb pod hero. */
.wo-stats {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 24px 40px;
}
.wo-stat__value {
	font-family: var(--font-display, sans-serif);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wk-peach);
}
.wo-stat__label { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }

/* ---------- Czym się zajmujemy ---------- */
.wo-h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 12px; }
.wo-text { font-size: 16.5px; line-height: 1.65; color: #564d44; margin: 16px 0 0; }
.wo-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
	margin-top: 52px;
}
.wo-areas { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.wo-area {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--wk-line);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04);
}
.wo-area__icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--wk-tint);
	color: var(--wk-acc);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.wo-area__title { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 17.5px; }
.wo-area__desc { font-size: 14.5px; line-height: 1.55; color: var(--wk-mut); margin-top: 4px; }

.wo-brands { border-radius: 18px; }
.wo-eyebrow--faint { color: var(--wk-faint); }
.wo-brands__list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.wo-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--wk-line);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--wk-paper);
}
.wo-brand__name {
	font-family: var(--font-display, sans-serif);
	font-weight: 700;
	font-size: 17px;
	min-width: 96px;
}
.wo-brand__desc { flex: 1; font-size: 14px; line-height: 1.5; color: var(--wk-mut); }
.wo-brand__tag {
	flex: none;
	font-family: var(--font-mono, monospace);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--wk-mut);
	background: #f4f0ea;
	border-radius: 999px;
	padding: 5px 11px;
}
.wo-brand__tag--imp { color: var(--wk-acc-dark); background: var(--wk-tint); }

/* ---------- Jak działamy ---------- */
.wo-rules-wrap { margin-top: 52px; }
.wo-rules__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}
.wo-rules__note { font-size: 15px; color: var(--wk-mut); margin: 0; max-width: 360px; text-align: right; }
.wo-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wo-rule {
	background: #fff;
	border: 1px solid var(--wk-line);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wo-rule:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(26, 22, 20, 0.1);
	border-color: #f2a76b;
}
.wo-rule__nr { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.14em; color: #b9afa4; }
.wo-rule__key {
	font-family: var(--font-display, sans-serif);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wk-acc);
}
.wo-rule__title { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 17px; }
.wo-rule__desc { font-size: 14.5px; line-height: 1.6; color: var(--wk-mut); }

/* ---------- Dlaczego u nas (ciemna sekcja) ---------- */
.wo-why {
	margin-top: 56px;
	background: var(--wk-ink);
	color: #fff;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	padding: 44px 40px 48px;
}
.wo-why::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(180deg, transparent 0 17px, rgba(255, 255, 255, 0.03) 17px 18px);
	pointer-events: none;
}
.wo-why > * { position: relative; }
.wo-why__title { font-size: clamp(26px, 3vw, 34px); color: #fff; margin-top: 12px; }
.wo-why__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-auto-rows: auto;
	gap: 18px;
	margin-top: 28px;
	align-items: stretch;
}
.wo-why__big {
	grid-row: span 3;
	background: linear-gradient(120deg, var(--wk-acc-dark), var(--wk-acc));
	border-radius: 20px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}
.wo-why__big-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wo-why__big-title {
	font-family: var(--font-display, sans-serif);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	margin-top: 18px;
}
.wo-why__big p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 10px 0 0; }
.wo-why__item {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 24px 26px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.wo-why__item-icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(242, 84, 27, 0.2);
	color: var(--wk-peach);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.wo-why__item-title { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 20px; color: #fff; }
.wo-why__item-desc { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin-top: 6px; }

/* ---------- Dane firmy + kontakt ---------- */
.wo-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 52px;
}
.wo-duo__card { border-radius: 20px; padding: 30px; }
.wo-duo__card--cta { display: flex; flex-direction: column; }
.wo-duo__name {
	font-family: var(--font-display, sans-serif);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 12px 0 0;
}
.wo-duo__addr { font-size: 16px; line-height: 1.75; color: #564d44; margin-top: 10px; }
.wo-duo__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wo-duo__badges span {
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	color: #3d362f;
	background: #f4f0ea;
	border-radius: 9px;
	padding: 8px 14px;
}
.wo-duo__note {
	border-top: 1px solid #f4f0ea;
	margin-top: 20px;
	padding-top: 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wk-mut);
}
.wo-duo__text { font-size: 15.5px; line-height: 1.6; color: #564d44; margin: 10px 0 0; }
.wo-duo__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 20px; }
.wo-duo__tel {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	border: 1px solid var(--wk-line);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--wk-paper);
}
.wo-duo__tel:hover { border-color: #f2a76b; background: var(--wk-tint-soft); }
.wo-duo__tel-icon { color: var(--wk-acc); display: flex; flex: none; }
.wo-duo__tel-num { font-family: var(--font-mono, monospace); font-size: 15px; color: var(--wk-ink); }
.wo-duo__tel-note { margin-left: auto; font-size: 13px; color: var(--wk-faint); }

/* ---------- Responsywność ---------- */
@media (max-width: 980px) {
	.wo-stats { grid-template-columns: 1fr 1fr; padding: 22px 26px; }
	.wo-about { grid-template-columns: minmax(0, 1fr); }
	.wo-rules { grid-template-columns: 1fr 1fr; }
	.wo-why__grid { grid-template-columns: 1fr; }
	.wo-why__big { grid-row: auto; }
	.wo-duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.wo-stats { grid-template-columns: 1fr; gap: 16px; }
	.wo-rules { grid-template-columns: 1fr; }
	.wo-rules__head { flex-direction: column; align-items: flex-start; }
	.wo-rules__note { text-align: left; }
	.wo-why { padding: 28px 22px 32px; }
	.wo-brand { flex-wrap: wrap; gap: 4px 12px; }
	.wo-brand__name { min-width: 0; flex: 1; }
	.wo-brand__desc { flex-basis: 100%; order: 3; }
}