/* ==========================================================================
   Strony usług (agencja/usluga.php, /technologia/{slug}/ z plikiem agencja/uslugi/{slug}.php) — od 01.10.2026.
   Korzysta z kontakt.css (.g2c-wrap, moduł kontaktowy) i agencja.css (.g2c-seo__*, .g2c-pills, .g2c-facts,
   .g2c-process, .g2c-acc, .g2c-btn); tutaj tylko nowe elementy: hero z obietnicą i zdjęciem, nagłówki sekcji,
   tabele (na telefonie wiersze jako karty) i karty zakresu. Linie podziału wszędzie te same: 1 px #e0e0e0 (jak karty,
   proces i FAQ ze stron agencji) — bez grubszych czarnych.
   ========================================================================== */

/* --- Hero --- */
.g2u-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 5vw, 104px);
	padding-top: 110px; /* było 150 px — treść hero za nisko na ekranie (użytkownik, 01.10.2026) */
	padding-bottom: 144px;
}

.g2u .g2u-hero__eyebrow {
	margin: 0 0 28px;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.g2u .g2u-hero__claim {
	margin: 0 0 32px;
	color: #111;
	font-size: clamp(44px, 4.6vw, 92px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.g2u .g2u-hero__lead {
	max-width: 34em;
	margin: 0 0 30px;
	color: #555;
	font-size: 19px;
	line-height: 1.7;
}

.g2u-hero__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.g2u-hero__points li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 30px;
	color: #111;
	font-size: 17px;
	line-height: 1.5;
}

/* Znacznik: krótka kreska w kształcie „✓” rysowana ramką — ostra jak reszta strony, bez ikony z fontu. */
.g2u-hero__points li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 2px;
	width: 7px;
	height: 12px;
	border-right: 2px solid #111;
	border-bottom: 2px solid #111;
	transform: rotate(45deg);
}

.g2u-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.g2u .g2u-btn--ghost,
.g2u .g2u-btn--ghost:visited {
	background-color: #fff;
	color: #000;
}

.g2u .g2u-btn--ghost:hover,
.g2u .g2u-btn--ghost:focus {
	background-color: #000;
	color: #fff;
}

.g2u-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Nagłówki i teksty sekcji --- */
.g2u .g2u-title {
	max-width: 18em;
	margin: 0 0 56px;
	color: #111;
	font-size: clamp(32px, 3.6vw, 64px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.g2u .g2u-intro,
.g2u .g2u-note,
.g2u .g2u-related {
	max-width: 46em;
	color: #555;
	font-size: 17px;
	line-height: 1.7;
}

.g2u .g2u-intro {
	margin: -24px 0 40px;
}

.g2u .g2u-note {
	margin: 28px 0 0;
}

/* --- Tabele --- */
.g2u-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
	line-height: 1.6;
}

.g2u-table thead th {
	padding: 0 32px 18px 0;
	border-bottom: 1px solid #e0e0e0;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

.g2u-table tbody th,
.g2u-table tbody td {
	padding: 26px 32px 26px 0;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
}

.g2u-table tbody th {
	width: 30%;
	color: #111;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.45;
}

.g2u-table tbody td {
	color: #555;
}

/* --- Karty zakresu --- */
.g2u-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(32px, 4vw, 72px);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e0e0e0;
}

.g2u-cards--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 4 w rzędzie (technologie: 8 kart = 2 pełne rzędy), węższe kolumny — mniejszy tytuł */
.g2u-cards--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.g2u .g2u-cards--four .g2u-card__title {
	font-size: 24px;
}

@media (max-width: 1279px) {
	.g2u-cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.g2u-card {
	padding: 44px 0 52px;
	border-bottom: 1px solid #e0e0e0;
}

.g2u-card__icon {
	display: block;
	width: auto;
	height: 30px;
}

.g2u-card__num {
	display: block;
	color: #d5d5d5;
	font-size: clamp(28px, 2.2vw, 40px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.g2u .g2u-card__title {
	margin: 22px 0 14px;
	color: #111;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.g2u .g2u-card__text {
	margin: 0 0 24px;
	color: #666;
	font-size: 16px;
	line-height: 1.7;
}

/* --- Tablet --- */
@media (max-width: 1024px) {
	.g2u-hero {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 120px;
		padding-bottom: 96px;
	}

	/* Jedna kolumna (telefon, tablet): najpierw zdjęcie, potem tekst hero (prośba użytkownika 02.10.2026);
	   mniejszy odstęp nad zdjęciem — duży był pod tekst (zdjęcie ~24 px pod paskiem menu). */
	.g2u-hero__media {
		order: -1;
	}

	.g2u-hero:has(> .g2u-hero__media) {
		padding-top: 32px;
	}

	.g2u-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Telefon: tabele jako karty, jedna kolumna kart --- */
@media (max-width: 768px) {
	.g2u-hero {
		padding-top: 104px;
		padding-bottom: 72px;
	}

	.g2u-hero:has(> .g2u-hero__media) {
		padding-top: 28px;
	}

	.g2u .g2u-hero__lead {
		font-size: 17px;
	}

	.g2u-hero__actions .g2c-btn {
		flex: 1 1 100%;
	}

	.g2u .g2u-title {
		margin-bottom: 36px;
	}

	.g2u-cards,
	.g2u-cards--two,
	.g2u-cards--four {
		grid-template-columns: minmax(0, 1fr);
	}

	.g2u-card {
		padding: 32px 0 36px;
	}

	.g2u .g2u-card__title {
		margin-top: 16px;
		font-size: 24px;
	}

	.g2u-table table,
	.g2u-table tbody,
	.g2u-table tr,
	.g2u-table th,
	.g2u-table td {
		display: block;
		width: auto;
	}

	.g2u-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.g2u-table tbody tr {
		padding: 26px 0 12px;
		border-top: 1px solid #e0e0e0;
	}

	.g2u-table tbody tr:last-child {
		border-bottom: 1px solid #e0e0e0;
	}

	.g2u-table tbody th,
	.g2u-table tbody td {
		padding: 0 0 14px;
		border: 0;
	}

	.g2u-table tbody th {
		width: auto;
		font-size: 20px;
	}

	.g2u-table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: #888;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
}

/* --- Kafle wybranych realizacji (zdjęcia 581×436 z portfolio strony głównej) --- */
.g2u-works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px clamp(24px, 3vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.g2u .g2u-work__link,
.g2u .g2u-work__link:hover,
.g2u .g2u-work__link:focus {
	display: block;
	color: #111;
	text-decoration: none;
}

.g2u-work__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 581 / 436;
	background-color: #f2f2f2;
}

.g2u-work__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.g2u-work__cat {
	display: block;
	margin-top: 18px;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.g2u-work__title {
	display: block;
	margin-top: 8px;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* .g2u w selektorze: reguła akapitów sekcji SEO stron agencji (.g2c-seo p) zerowała margines i przycisk dotykał kafli. */
.g2u .g2u-works__more {
	margin: 64px 0 0;
	text-align: center;
}

/* „Zobacz całe portfolio” jak „Zobacz więcej” pod portfolio na stronie głównej (.promoted-realisations__link a;
   17.10.2026, prośba użytkownika): 16 px, 500, bez wersalików i rozstrzelenia, bez podkreślenia z reguły linków
   .g2c-seo a, ramka 1 px, wysokość 47 px; po najechaniu czarne tło. */
.g2u .g2u-works__more .g2c-btn,
.g2u .g2u-works__more .g2c-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 186px;
	height: 47px;
	padding: 0 40px;
	border: 1px solid #000;
	background-color: transparent;
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.g2u .g2u-works__more .g2c-btn:hover,
.g2u .g2u-works__more .g2c-btn:focus {
	background-color: #000;
	color: #fff;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.g2u-work__link:hover .g2u-work__media img {
		transform: scale(1.06);
		filter: brightness(0.95);
	}
}

@media (max-width: 1024px) {
	.g2u-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.g2u-works {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.g2u-work__title {
		font-size: 20px;
	}
}

/* Trzy kafle bez nagłówka między modułami (16.10.2026, /strony-internetowe/; odstępy jak między sekcjami — 144/80 px):
   w rzędzie także na tablecie (bez samotnego trzeciego kafla w drugim wierszu), na telefonie jeden pod drugim. */
@media (min-width: 768px) and (max-width: 1024px) {
	.g2u-works--top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.g2u-works--top .g2u-work__title {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.g2u-works--top {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* --- Plansza z opisem realizacji po kliknięciu kafla (17.10.2026) — jak .hp-realisation-hover na stronie głównej
   (#111, wsuwa się z góry w 0,75 s; nazwa, opis, typ, tagi #2B2B2B/#5C5C5C, przycisk z białą ramką), ale mniejsza, bo
   kafle są tu węższe (403 px przy 1440 zamiast 581 px). Zakrywa cały kafel — zdjęcie i podpis; dłuższa treść się przewija. */
.g2u-work {
	position: relative;
	overflow: hidden;
}

.g2u .g2u-work__link:focus-visible {
	outline: 2px solid #111;
	outline-offset: -2px;
}

.g2u-work__panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	padding: 26px 26px 24px;
	overflow-y: auto;
	background-color: #111;
	color: #fff;
	transform: translateY(-105%);
	visibility: hidden;
	transition: transform 0.75s ease-in-out, visibility 0s linear 0.75s;
}

.g2u-work.is-open .g2u-work__panel {
	transform: none;
	visibility: visible;
	transition: transform 0.75s ease-in-out, visibility 0s;
}

/* Zamykana plansza jeszcze się wysuwa (0,75 s) — kliknięcia mają od razu trafiać w kafel pod spodem. */
.g2u-work:not(.is-open) .g2u-work__panel {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.g2u-work__panel,
	.g2u-work.is-open .g2u-work__panel {
		transition: none;
	}
}

.g2u .g2u-work__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.g2u-work__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.g2u .g2u-work__panel-title {
	margin: 0 36px 0 0;
	color: #fff;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

.g2u .g2u-work__panel-text {
	margin: 14px 0 18px;
	color: #fff;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

.g2u .g2u-work__panel-type {
	margin: 0 0 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.g2u .g2u-work__panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.g2u .g2u-work__panel-tags li {
	display: flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	background-color: #2b2b2b;
	color: #5c5c5c;
	font-size: 10.4px;
	font-weight: 700;
	line-height: 1.2;
}

.g2u .g2u-work__panel-btn,
.g2u .g2u-work__panel-btn:visited {
	display: inline-flex;
	flex: none;
	align-self: flex-start;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 12.8px;
	font-weight: 500;
	line-height: 17px;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fokus po kliknięciu w kafel (dla klawiatury): obrys jak bez fokusu — reguła linków .g2c-seo a:focus dawała ciemny
   tekst na czarnej planszy. Wypełnienie tylko po najechaniu i przy nawigacji klawiaturą (:focus-visible). */
.g2u .g2u-work__panel-btn:focus {
	color: #fff;
	text-decoration: none;
}

.g2u .g2u-work__panel-btn:hover,
.g2u .g2u-work__panel-btn:focus-visible {
	background-color: #fff;
	color: #111;
	text-decoration: none;
}

/* Laptopy i tablet (kafle 357–400 px, poniżej 1440 px): mniejsze litery i odstępy — najdłuższy opis (Sitescope)
   mieści się bez przewijania. */
@media (max-width: 1439px) {
	.g2u-work__panel {
		padding: 18px 18px 16px;
	}

	.g2u .g2u-work__panel-title {
		font-size: 20px;
	}

	.g2u .g2u-work__panel-text {
		margin: 8px 0 12px;
		font-size: 14px;
		line-height: 1.5;
	}

	.g2u .g2u-work__panel-type {
		margin-bottom: 10px;
	}

	.g2u .g2u-work__panel-tags {
		margin-bottom: 14px;
	}

	.g2u .g2u-work__panel-tags li {
		height: 24px;
	}

	.g2u .g2u-work__panel-btn {
		height: 36px;
	}
}

/* Tablet, pas trzech kafli (~230–290 px): sama nazwa, opis i przycisk. */
@media (min-width: 768px) and (max-width: 1024px) {
	.g2u-works--top .g2u-work__panel {
		padding: 14px 14px 12px;
	}

	.g2u .g2u-works--top .g2u-work__close {
		top: 10px;
		right: 10px;
		width: 26px;
		height: 26px;
	}

	.g2u .g2u-works--top .g2u-work__panel-title {
		margin-right: 30px;
		font-size: 16px;
	}

	.g2u .g2u-works--top .g2u-work__panel-text {
		margin: 6px 0 10px;
		font-size: 12.5px;
		line-height: 1.45;
	}

	.g2u .g2u-works--top .g2u-work__panel-btn {
		height: 34px;
		padding: 0 12px;
		font-size: 12px;
	}

	.g2u .g2u-works--top .g2u-work__panel-type,
	.g2u .g2u-works--top .g2u-work__panel-tags {
		display: none;
	}
}

/* Telefon (kafel na całą szerokość, ok. 350 × 340 px): bez tagów — treść mieści się bez przewijania. */
@media (max-width: 767px) {
	.g2u-work__panel {
		padding: 22px 20px 20px;
	}

	.g2u .g2u-work__panel-title {
		font-size: 22px;
	}

	.g2u .g2u-work__panel-text {
		margin: 10px 0 14px;
		font-size: 14.5px;
		line-height: 1.55;
	}

	.g2u .g2u-work__panel-tags {
		display: none;
	}
}

/* Belka technologii pod hero (01.10.2026, na próbę: Headless CMS, WordPress, aplikacje): ciemne ikony z nazwą. */
.g2u-hero:has(+ .g2u-logos) {
	padding-bottom: 64px; /* belka przy hero, nie w połowie drogi do treści */
}

/* Belka technologii bez linii — ikony blisko siebie, wyśrodkowane (prośby użytkownika 01.10.2026). */
.g2u-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g2u-logos__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.g2u-logos__item img {
	display: block;
	width: auto;
	height: 18px;
	opacity: 0.85;
}

/* Komputer (hero w dwóch kolumnach): pierwszy ekran ma wysokość okna, a belka stoi pośrodku wolnego miejsca między
   dołem hero (przyciski) a dolną krawędzią ekranu — prośba użytkownika 01.10.2026. Przy niskim oknie co najmniej 40 px. */
@media (min-width: 1025px) {
	.g2u-first:has(> .g2u-logos) {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 80px);   /* treść zaczyna się pod 80-pikselowym paskiem menu */
		min-height: calc(100svh - 80px);
	}

	.g2u-first > .g2u-hero:has(+ .g2u-logos) {
		padding-bottom: 0;
	}

	.g2u-first > .g2u-logos {
		display: flex;
		flex: 1 0 auto;
		align-items: center;
		padding-block: 40px;
	}

	.g2u-first > .g2u-logos > .g2u-logos__list {
		width: 100%;
	}
}

/* Laptopy (1280–1366 px): ciaśniej, żeby 10 pozycji zmieściło się w jednym wierszu. */
@media (max-width: 1366px) {
	.g2u-logos__list {
		gap: 14px 26px;
	}
}

@media (max-width: 768px) {
	.g2u-hero:has(+ .g2u-logos) {
		padding-bottom: 40px;
	}

	.g2u-logos__list {
		gap: 12px 22px;
	}

	.g2u-logos__item {
		font-size: 13px;
	}
}

/* FAQ: dłuższa odpowiedź w kilku akapitach (pusta linia w danych) — odstęp jak w akordeonach agencji (.g2c-seo p zeruje marginesy). */
.g2u .g2c-acc--faq .g2c-acc__body p + p {
	margin-top: 16px;
}

.g2u-hero__h1-m {
	display: none;
}

/* --- Telefon: góra strony jak na stronie głównej (17.10.2026, /strony-internetowe/; klucz 'hero' => ['mobile' => …]) ---
   Pod menu jeden duży nagłówek (h1), zdjęcie na czarnym pasie z dołem na białym tle — wymiary jak na stronie głównej
   (.nex-hero-home: 90% szerokości, proporcje 660:755, 40 px czarnego nad zdjęciem, dolne 55 px na białym), opis,
   przyciski, przesuwająca się belka technologii i od razu kafle realizacji. Hasło i punkty hero tylko od 768 px;
   kafle realizacji na komputerze i tablecie zostają niżej, między modułami (.g2u-strip--d). */
.g2u-strip--m,
.g2u-logos__list--dup {
	display: none;
}

@keyframes g2u-marquee {
	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 767px) {
	/* Treść strony zaczyna się 80 px od góry (pasek menu), na stronie głównej 90 px — 36 px daje nagłówek na tej samej
	   wysokości co hasło strony głównej (116 px od góry ekranu; 18.10.2026 o 14 px wyżej, było 50 / 130 px). */
	.g2u-first--m > .g2u-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* hero ma align-items: center z siatki — bez tego czarny pas zwężał się do szerokości zdjęcia */
		gap: 0;
		padding-top: 36px;
		padding-bottom: 0;
	}

	/* Tekst hero układany na przemian ze zdjęciem — opakowanie bez znaczenia semantycznego, więc display: contents. */
	.g2u-first--m .g2u-hero__text {
		display: contents;
	}

	.g2u-first--m .g2u-hero__claim,
	.g2u-first--m .g2u-hero__points,
	.g2u-first--m .g2u-hero__h1-d {
		display: none;
	}

	/* Własny nagłówek na telefonie ('mobile' => ['title' => …]) — w tym samym h1, druga część widoczna tylko tutaj. */
	.g2u-first--m .g2u-hero__h1-m {
		display: inline;
	}

	/* Wielkość, grubość i odstępy jak hasło strony głównej (.nex-hero-home-mobile: 30 px, 600, 40 px pod menu, 54 px do
	   czarnego pasa — 17.10.2026 najpierw o 10%, potem o kolejne 15% bliżej, jak na stronie głównej i Google Ads). */
	.g2u .g2u-first--m .g2u-hero__eyebrow {
		order: 1;
		margin: 0 0 54px;
		color: #111;
		font-size: 30px;
		font-weight: 600;
		line-height: 1.1;
		letter-spacing: 0;
		text-align: center;
		text-transform: none;
		text-wrap: balance;
	}

	/* Czarny pas na całą szerokość ekranu (mimo marginesów .g2c-wrap), dolne 55 px zdjęcia na białym tle. W tle grafika
	   z hero strony głównej (--g2u-hero-bg z usluga.php) z przyciemnieniem jak na stronie głównej (30% od 20.10.2026,
	   wcześniej 10%), cover i środek — pas ma te same wymiary co .nex-hero-home na telefonie, więc kadr tła jest ten sam
	   (17.10.2026). */
	.g2u-first--m .g2u-hero__media {
		order: 2;
		margin-inline: calc(50% - 50vw);
		padding: 40px 0 0;
		background:
			linear-gradient(transparent calc(100% - 55px), #fff 0),
			linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
			var(--g2u-hero-bg, none) center / cover no-repeat #000;
	}

	.g2u-first--m .g2u-hero__media picture {
		display: block;
	}

	/* Zdjęcie jak slajder strony głównej (#slider w .nex-hero-home__inner: 90vw, 660:755, maks. 755 px wysokości). */
	.g2u-first--m .g2u-hero__media img {
		width: 90vw;
		max-height: 755px;
		height: auto;
		margin-inline: auto;
		aspect-ratio: 660 / 755;
		object-fit: cover;
	}

	/* Opis jak tekst pod zdjęciem na stronie głównej: 20 px, interlinia 1,7, wyśrodkowany, 70 px pod zdjęciem. */
	.g2u .g2u-first--m .g2u-hero__lead {
		order: 3;
		max-width: none;
		margin: 70px 0 0;
		color: #171717;
		font-size: 20px;
		line-height: 1.7;
		text-align: center;
	}

	.g2u-first--m .g2u-hero__actions {
		order: 4;
		margin-top: 40px;
	}

	/* Na telefonie w tym hero tylko „Zapytaj o wycenę” (19.10.2026, prośba użytkownika: „będzie czyściej”); numer jest
	   w menu i w panelu „Porozmawiajmy”. Od 768 px oba przyciski bez zmian. */
	.g2u-first--m .g2u-hero__actions a[href^="tel:"] {
		display: none;
	}

	/* Belka technologii jako pas przesuwający się w lewo: dwie identyczne listy obok siebie, każda przesuwa się o własną
	   szerokość, więc po pełnym cyklu druga stoi tam, gdzie zaczynała pierwsza. Brzegi wygaszone maską. */
	.g2u-first--m > .g2u-logos {
		display: flex;
		overflow: hidden;
		margin-top: 56px;
		padding-inline: 0;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	}

	.g2u-first--m .g2u-logos__list {
		flex: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0 30px;
		padding-right: 30px; /* odstęp między końcem jednej listy a początkiem drugiej = odstęp między pozycjami */
		animation: g2u-marquee 34s linear infinite;
	}

	.g2u-first--m .g2u-logos__list--dup {
		display: flex;
	}

	.g2u-first--m .g2u-logos__item {
		font-size: 14px;
	}

	.g2u-first--m > .g2u-strip--m {
		display: block;
		margin-top: 64px;
	}

	/* Jak nagłówek portfolio na stronie głównej na telefonie (.hp-realisations h2: 30 px, 700, 1.12, środek, 52 px niżej). */
	.g2u .g2u-first--m .g2u-strip__title {
		margin: 0 0 52px;
		color: #111;
		font-size: 30px;
		font-weight: 700;
		line-height: 1.12;
		letter-spacing: 0;
		text-align: center;
	}

	.g2u-strip--d {
		display: none;
	}
}

/* Bez animacji (ustawienie systemu): belka przewijana palcem, jedna lista. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.g2u-first--m > .g2u-logos {
		overflow-x: auto;
		padding-inline: 20px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.g2u-first--m .g2u-logos__list {
		animation: none;
	}

	.g2u-first--m .g2u-logos__list--dup {
		display: none;
	}
}