/* =============================================
   O NAS — Used on: o-nas
   Sections: .about-hero, .about-values, .about-story
   ============================================= */
.about-hero {
  padding: 160px 40px 50px;
  /* Plaskie kremowe tlo — pomaranczowa poswiata w prawym gornym rogu usunieta
     2026-08-08 na WSZYSTKICH szerokosciach (patrz hero.css). Razem z nia wypadl
     `linear-gradient(to top, var(--white), transparent 40%)`, ktory istnial
     wylacznie po to, zeby ja wygaszac ku dolowi — bez poswiaty malowal krem
     na kremie. */
  background: var(--white);
  position: relative;
}

.about-hero__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.about-hero__heading {
  font-family: var(--font-family);
  font-size: 71px;
  font-weight: 400;
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.18;
  text-align: left;
  position: relative;
  top: 28px;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.15s forwards;
}

.about-hero__accent {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Two copy variants live in the same <h1>; only one renders per breakpoint.
   The mobile one is swapped in inside the ≤768px block. */
.about-hero__copy--mobile {
  display: none;
}

/* Keep "i dbałości o każdy detal." on a single line on desktop */
@media (min-width: 1025px) {
  .about-hero__accent {
    white-space: nowrap;
  }
}

/* ---- Hero Photo Marquee ---- */
.about-hero__marquee {
  --mq-h: 529;
  --mq-w: 423;
  --mq-gap: 28;
  position: relative;
  margin: 136px -40px 0;
  /* Wysokosc pasa i wymiary kafla licza sie z TYCH SAMYCH zmiennych, ktore
     czyta inline JS (`--mq-w/h/gap` sa unitless, bo `parseFloat` musi je
     odczytac). Wczesniej kazdy breakpoint powtarzal te liczby jeszcze raz
     jako `height`/`width` w px — trzy miejsca na jeden rozmiar i latwy rozjazd
     kafla z JS-em (skala i pozycje licza sie z `--mq-*`, wiec rozjazd daje
     przyciete zdjecia). NIE wpisuj tu z powrotem pikseli. */
  height: calc(var(--mq-h) * 1px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.35s forwards;
}

.about-hero__marquee:active {
  cursor: grabbing;
}

/* KAZDY KAFEL MA TEN SAM ROZMIAR — `--mq-w` x `--mq-h`, proporcja 0.80.
   Byla przez chwile wersja ze stala wysokoscia pasa i szerokoscia liczona
   z proporcji zdjecia (nic nie bylo przycinane), ale zostala COFNIETA na
   zyczenie klienta: zdjecia sa w dwoch proporcjach (14 kwadratow 1.00 i
   6 pionow 0.563), wiec kafle wychodzily rozne — piony 298 px przy kwadratach
   529 px — i czytalo sie to jako „niektore zdjecia sa male".
   Rownosc kafli i pelny kadr wykluczaja sie, dopoki pliki maja rozne proporcje;
   klient wybral rownosc. Kadruje wiec `object-fit: cover` (kwadraty traca 20%
   szerokosci, piony 29,7% wysokosci). OBIE zmienne sa wiazace — sprawdz, czy
   `--mq-w / --mq-h` = 0.80 przy kazdej zmianie rozmiaru. */
.about-hero__marquee-item {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--mq-w) * 1px);
  height: calc(var(--mq-h) * 1px);
  transform-origin: center center;
  will-change: transform;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* `cover`, a nie `contain` — kafel ma stala proporcje 0.80, a zdjecia 1.00
   albo 0.563, wiec `contain` zostawialby wokol nich puste pasy tla (czyli
   znowu „zdjecia roznej wielkosci", tyle ze w rownych pudelkach). */
.about-hero__marquee-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- Marquee Navigation ---- */
.marquee-nav {
  position: absolute;
  right: 10px;
  bottom: -136px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 0.25s forwards;
}

.marquee-nav__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--dark-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}

.marquee-nav__btn:hover {
  background: rgba(0, 0, 0, 0.10);
}

.marquee-nav__btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.marquee-nav__toggle {
  width: 44px;
  height: 44px;
  background: transparent;
  position: relative;
}

.marquee-nav__toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.marquee-nav__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.marquee-nav__icon {
  position: relative;
  z-index: 1;
}


/* =============================================
   O NAS — WARTOŚCI (VALUES)
   ============================================= */
.about-values {
  padding: 100px 24px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.about-values::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 50%, rgba(var(--orange-rgb), 0.06) 0%, rgba(var(--orange-rgb), 0.02) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.about-values__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Left: Image ---- */
.about-values__image-wrapper {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
}

.about-values__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.25) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
}

.about-values__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Right: Text content ---- */
.about-values__content {
  display: flex;
  flex-direction: column;
}

.about-values__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  align-self: flex-start;
}

.about-values__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-values__subheading {
  font-family: var(--font-family);
  /* 18px — wspolny rozmiar subheadingu sekcji na desktopie i tablecie
     (tu bez override'u ≤1024, wiec tablet rowna sie do `.memories__subheading`,
     ktory juz mial 18px). Telefon zostaje na 16px — blok ≤768 nizej. */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 44px;
  max-width: 520px;
}

/* ---- Feature list ---- */
.about-values__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-values__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.about-values__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  /* v296: te same wartosci co `.why-us__feature-icon` (why-us.css) — jasny,
     plaski kafel zamiast gradientu 0.4/0.4, ktory czytal sie jako ciemniejszy
     od reszty ikon w serwisie. Ta sama para tla/koloru: showroom, door-types,
     process, worry-free, karta szczegolow realizacji. */
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
}

.about-values__feature-icon svg {
  width: 24px;
  height: 24px;
}

.about-values__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.about-values__feature-title {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.about-values__feature-desc {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray-500);
}

/* =============================================
   O NAS — HISTORIA (TIMELINE)
   ============================================= */
.about-story {
  /* LEWA krawędź sekcji = lewa krawędź STANDARDOWEGO kontenera treści serwisu
     (`--max-width-wide` wyśrodkowany, przy węższych oknach 24px gutter) — czyli
     ta sama linia, na której zaczyna się każda inna sekcja strony. To ten sam
     wzór, którym v290 dosunęło PRAWĄ krawędź nagłówka, więc obie strony sekcji
     stoją teraz na kontenerze i `.about-story__header` ma symetryczny padding.
     Wcześniej było tu `clamp(20px, 6.2vw, 120px)` — własny, pełnobleedowy gutter
     wzorca (wisniowski.pl), przez który sekcja jako JEDYNA w serwisie zaczynała
     się ~140px na lewo od reszty strony (zmierzone @1920: 119 vs 260).
     Pas slajdów dalej biegnie do PRAWEJ krawędzi okna — full-bleed jest tylko
     z prawej strony.
     UWAGA: `--sw` liczy się od tej krawędzi, więc slajdy i zdjęcia są o tyle
     samo węższe (1920: sw 1800 → 1660, ~8%). Matematyka przewijania się NIE
     zmienia — `maxScroll` i cel ostatniego roku wychodzą 510px niezależnie
     od `--sw` (bufor `padding-right` skaluje się razem z nim). */
  --edge: max(24px, calc((100vw - var(--max-width-wide)) / 2));
  --sw: calc(100vw - var(--edge));
  /* czas + krzywa zmierzone na wzorcu — CAŁE otwarcie roku (szerokość slajdu,
     font-size roku, odsłonięcie treści, fade zdjęcia) biegnie tymi samymi
     wartościami, żeby był to JEDEN ruch, a nie sekwencja etapów */
  --story-dur: 0.4s;
  --story-ease: cubic-bezier(0.29, 0.06, 0.52, 1);
  padding: 100px 0;
  background: var(--white);
}

.about-story__container {
  max-width: none;
  margin: 0;
}

.about-story__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.about-story__header {
  display: grid;
  /* Kolumna 1 = label + sterowanie (jedno pod drugim), kolumna 2 = nagłówek +
     intro. Grid-areas trzymają układ niezależnie od kolejności w DOM (nav jest
     w markupie PO divie z nagłówkiem). Nagłówek rozpięty na oba wiersze, więc
     zajmuje przestrzeń po dawnej kolumnie sterowania (v285). */
  grid-template-columns: 1fr 3.5fr;
  grid-template-areas:
    "label heading"
    "nav   heading";
  gap: 24px 48px;
  align-items: start;
  margin-bottom: 76px;
  /* OBIE krawędzie na standardowym kontenerze treści serwisu — od v293 `--edge`
     JEST tym wzorem (patrz `.about-story`), więc padding jest symetryczny:
     lewa strona (label + sterowanie, w jednej linii z pasem slajdów pod spodem)
     i prawa (nagłówek + intro, dosunięte tam od v290) kończą się dokładnie tam,
     gdzie zaczynają się i kończą karty logotypów w „Markach partnerskich".
     NIE wpisuj tu z powrotem osobnej wartości dla prawej strony — rozjazd obu
     krawędzi tej sekcji był naprawiany trzykrotnie (v288–v291). */
  padding: 0 var(--edge);
}

/* tylko bezklasowy wrapper nagłówka+intro — NIE `.about-story__nav`, który też
   jest divem bezpośrednim i inaczej przejąłby ten obszar (wyższa specyficzność) */
.about-story__header > div:not(.about-story__nav) {
  grid-area: heading;
}

/* sterowanie autoprzewijaniem timeline'u — te same klasy przycisków co marquee
   w hero (`.marquee-nav__btn/__toggle/__ring/__icon`), własny tylko kontener,
   bo `.marquee-nav` jest pozycjonowany absolutnie względem hero */
.about-story__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 8px;
  /* wyrównane do DOLNEJ krawędzi intro: nagłówek rozpięty na oba wiersze rozciąga
     drugi wiersz do dołu bloku nagłówek+intro, więc `align-self: end` sadza
     sterowanie równo z dolną linią subheadingu (v288) */
  align-self: end;
  justify-self: start;
}

.about-story__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: 500;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 18px;
  /* tekst DOSUNIĘTY do prawej krawędzi SEKCJI (gutter `var(--edge)` z paddingu
     `.about-story__header`). Samo rozciągnięcie boksu nie wystarcza, bo krótki
     nagłówek wyrównany do lewej zostawia lukę przy tej krawędzi (v289) */
  text-align: right;
}

.about-story__intro {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.65;
  /* 790px = szerokość, przy której ten konkretny tekst łamie się na DWA
     najbardziej wyrównane wiersze (748 / 785 px). Zmierzone sweepem 700–1000px;
     od 840px podział przeskakuje na 834/699, czyli dużo gorszy (v291). */
  max-width: 790px;
  /* boks dosunięty do prawej krawędzi kolumny */
  margin-left: auto;
  /* Justowanie: pierwsza linijka zaczyna się DOKŁADNIE tam, co druga (życzenie
     klienta). Przy `text-align: right` wiersze o różnej długości zawsze mają
     poszarpaną lewą krawędź — rozjazd wynosił tu 427px. Rozciągnięcie jest
     minimalne, bo `max-width` dobrany pod równy podział: 42px na całą pierwszą
     linijkę (~2,6px na odstęp międzywyrazowy przy foncie 18px).
     `text-align-last: right` to BEZPIECZNY DOMYŚLNY stan — poniżej ~1155px
     tekst łamie się na 3 wiersze i justowanie OSTATNIEGO rozciągnęłoby go
     o 688px (zmierzone @1100). Pełne justowanie ostatniej linijki włącza
     dopiero blok `min-width: 1200px` niżej, gdzie wiersze są zawsze dwa. */
  text-align: justify;
  text-align-last: right;
}

/* Od 1200px intro ma ZAWSZE dwa wiersze (próg zmierzony: 3 wiersze poniżej
   1155px, tu 45px zapasu na ewentualne przesunięcie łamania przy podmianie
   fontu), więc justowanie ostatniej linijki jest bezpieczne i daje idealnie
   równą lewą krawędź obu wierszy. NIE obniżaj tego progu bez ponownego pomiaru
   liczby wierszy — przy trzech ostatnia linijka to „domu." i rozjechałaby się
   na całą szerokość bloku. */
@media (min-width: 1200px) {
  .about-story__intro {
    text-align-last: justify;
  }
}

/* ---- Poziomy akordeon-timeline (aktywny rok rozwinięty, reszta zwinięta) ---- */
.about-story__slider {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  /* WAŻNE: margines strony jest MARGINESEM pasa, nie jego paddingiem (jak u wzorca).
     Padding-left przewijałby się razem z treścią, więc wyjechane lata wjeżdżałyby
     w margines i zostawały widoczne. Z margin-left pas zaczyna się dopiero za
     marginesem i jego własny overflow przycina wszystko, co wyjechało w lewo —
     dzięki temu przed aktywnym rokiem widać DOKŁADNIE jedną poprzednią datę. */
  margin-left: var(--edge);
  /* bufor z prawej: daje pasowi zapas przewijania, żeby OSTATNI rok też mógł
     dojechać na swoją pozycję (= szerokość pasa − aktywny slajd − jedna kolumna) */
  padding-right: calc(var(--sw) * 0.555 - 85px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.about-story__slider::-webkit-scrollbar { display: none; }

.about-story__slider.dragging { cursor: grabbing; }

.about-story__slide {
  flex: 0 0 auto;
  width: 85px;
  border-left: 1px solid rgba(21, 21, 21, 0.15);
  /* padding-right jest tu NIEZBĘDNY (wzorzec: 21→42.5px, animowany): to on
     odsuwa krawędź opisu od krawędzi slajdu, przez co tekst odsłania się przez
     cały ruch. Bez niego content-box = szerokość slajdu i tekst kończy się
     ~95ms za wcześnie. Szerokość opisu = content-box aktywnego slajdu (−88px). */
  padding: 21px 21px 140px 16px;
  /* overflow celowo NIE jest tu chowany (wzorzec też ma visible) — chowaniem
     treści zajmują się same dzieci: opis przez `__desc-clip`, zdjęcie przez
     własną animowaną szerokość. Gdyby slajd przełączał overflow na hidden przy
     zwijaniu, wystające zdjęcie ucinałoby się skokowo w pierwszej klatce
     zamiast zjeżdżać płynnie. */
  overflow: visible;
  cursor: pointer;
  transition: width var(--story-dur) var(--story-ease),
              padding var(--story-dur) var(--story-ease);
  -webkit-tap-highlight-color: transparent;
}

.about-story__slide:first-child { border-left: none; }

.about-story__slide.active {
  width: calc(var(--sw) * 0.445);
  padding-left: 44px;
  padding-right: 44px;
  cursor: default;
}


.about-story__slide:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.about-story__year {
  font-family: var(--font-family);
  font-size: 21px;
  font-weight: 400;
  color: var(--dark-gray);
  line-height: 1.5;
  white-space: nowrap;
  margin-bottom: 0;
  transition: font-size var(--story-dur) var(--story-ease), color 0.25s ease;
}

@media (hover: hover) {
  .about-story__slide:not(.active):hover .about-story__year { color: var(--orange); }
}

.about-story__slide:not(.active):active .about-story__year { color: var(--orange); }

.about-story__slide.active .about-story__year {
  /* wzorzec: 80px @1440, 85px @1854 — rośnie ~1.2px na 100px viewportu */
  font-size: clamp(64px, calc(63px + 1.2vw), 96px);
  letter-spacing: -0.02em;
}

/* `__body` to już tylko kontener wyznaczający docelową szerokość zdjęcia —
   niczego nie przycina. Odsłanianiem zajmuje się samo `__image-wrapper`,
   animując WŁASNĄ szerokość (patrz niżej). */
.about-story__body {
  width: calc(var(--sw) * 0.6);
  pointer-events: none;
}

/* Opis jest przycinany szerokością SLAJDU, a nie clipem `__body`. U wzorca
   szerokość opisu to 100% content-boxa slajdu, więc tekst odsłania się dokładnie
   w tempie rozsuwania — przez CAŁY ruch, do ~94%. Gdy wisiał na wspólnym clipie
   z (dużo szerszym) zdjęciem, kończył się w 150ms i druga połowa animacji stała.
   `max-width` przełącza się BEZ transition — dokładnie jak u wzorca: przy otwarciu
   od razu 100% (i dalej rośnie razem ze slajdem), przy zwijaniu natychmiast 0. */
.about-story__desc-clip {
  width: 100%;
  max-width: 0;
  overflow: hidden;
}

.about-story__slide.active .about-story__desc-clip {
  max-width: 100%;
}

.about-story__desc {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.65;
  /* stała szerokość = content-box aktywnego slajdu (jak u wzorca: 690 przy
     slajdzie 775). Stała, a nie 100%, żeby tekst nie przelewał się między
     liniami w trakcie animacji — u wzorca się przelewa, my tego nie chcemy */
  width: calc(var(--sw) * 0.445 - 88px);
  max-width: none;
  margin-bottom: 32px;
  min-height: 56px;
}

/* KLUCZOWE dla charakteru ruchu: zdjęcie NIE jest odsłaniane kurtyną — rozwija
   się. Wzorzec animuje szerokość samego obrazka 0 → pełna przy STAŁEJ wysokości
   i `object-fit: cover`, więc kadr się rozjeżdża: najpierw wąski pionowy pasek
   środka, potem coraz szerszy wycinek. Kurtyna nad gotowym zdjęciem (clip-path
   / overflow na rodzicu) wygląda zupełnie inaczej — nie wracaj do niej.
   Dlatego wysokość jest podana WPROST, a nie przez `aspect-ratio`: przy
   `width: 0` aspect-ratio dałoby wysokość 0 i zdjęcie zapadłoby się w punkt.
   Wartość odpowiada proporcji 1043/530 przy szerokości `__body` (0.6·sw). */
.about-story__image-wrapper {
  position: relative;
  width: 0;
  /* +20% wysokosci wzgledem proporcji wzorca (0.3049) — patrz o-nas.css v279 */
  height: calc(var(--sw) * 0.3659);
  border-radius: 11px;
  overflow: hidden;
  /* wzorzec: zdjęcie DODATKOWO przenika (opis już nie) — ten sam czas i krzywa,
     więc crossfade idzie w parze z rozwijaniem. Opacity 0 na zwiniętym ukrywa
     też cień, który przy szerokości 0 rysowałby się jako pionowa smuga. */
  opacity: 0;
  transition: width var(--story-dur) var(--story-ease),
              opacity var(--story-dur) var(--story-ease);
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
}

.about-story__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
}

.about-story__slide.active .about-story__image-wrapper {
  width: 100%;
  opacity: 1;
}

.about-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .about-story { --story-dur: 0.15s; }
}

/* =============================================
   O NAS — KULTURA PRACY (team culture)
   ============================================= */
.about-culture {
  padding: 138px 24px;
  background: #ECE8DF;
}

.about-culture__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.about-culture__label {
  display: block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  text-align: center;
}

.about-culture__label::before { content: "// "; }
.about-culture__label { text-transform: capitalize; }

.about-culture__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 104px;
  text-align: center;
}

.about-culture__accent {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-culture__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.about-culture__card {
  background: var(--white);
  border: none;
  border-radius: var(--radius-xl);
  padding: 36px 48px;
  position: relative;
  transition: border-color 0.3s ease;
}

.about-culture__card:hover,
.about-culture__card.touch-hover {
  border-color: var(--orange);
}

.about-culture__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 56px;
}

.about-culture__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.4), rgba(var(--orange-end-rgb), 0.4));
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
}

.about-culture__icon svg {
  width: 24px;
  height: 24px;
}

.about-culture__card:hover .about-culture__icon,
.about-culture__card.touch-hover .about-culture__icon {
  background: var(--orange-gradient);
  color: var(--white);
}

.about-culture__card-title {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 600;
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

.about-culture__card-text {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-gray);
  line-height: 1.7;
}

/* Kaskada kart NIE jest juz robiona `transition-delay`ami — kazda karta ma
   wlasny prog pozycyjny, a rozsuwanie kart wpadajacych w JEDNEJ klatce robi
   `eoStagger` (common.js). Nie przywracaj tu opoznien: nadpisalyby inline
   `transition-delay`, ktory ustawia modul revealu. */

/* =============================================
   O NAS — MAPA ZASIĘGU
   ============================================= */
.about-map {
  padding: 100px 24px;
  background: #ECE8DF;
}

.about-map__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  text-align: center;
}

.about-map__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.about-map__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 104px;
  text-align: center;
}

.about-map__accent {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-map__wrapper {
  border-radius: var(--radius-xl);
  border: 1px solid #ECE8DF;
  box-shadow:
    0 2px 16px rgba(var(--orange-rgb), 0.06),
    0 1px 4px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

/* === Tablet (≤1024px) — map section === */
@media (max-width: 1024px) {
  .about-map__heading {
    font-size: 40px;
  }
}

/* === Mobile (≤768px) — map section === */
@media (max-width: 768px) {
  .about-map {
    padding: 60px 16px;
  }

  .about-map__heading {
    font-size: 32px;
    margin-bottom: 52px;
  }
}

/* === Narrow mobile (≤480px) — map section === */
@media (max-width: 480px) {
  .about-map {
    padding: 48px 12px;
  }
}

/* =============================================
   SCROLL REVEAL — SYSTEM WEJSC CALEJ PODSTRONY "O NAS"

   Ten sam system co na stronie glownej, ale zapisany RAZ, deklaratywnie,
   zamiast szesciu kopii regul per sekcja:

     - kierunek deklaruje HTML atrybutem `data-reveal`
       (brak wartosci = z dolu, "left" = z lewej, "right" = z prawej),
     - stan ukryty jest zagniezdzony pod `.eo-reveal` — klase dodaje na
       KAZDA sekcje inline JS na koncu o-nas.html (bramka: brak/stary JS =
       tresc widoczna bez animacji, zamiast pustej strony — patrz
       montage.css v53),
     - odsloniecie to `.is-revealed` dodawane, gdy element SAM wjedzie
       w kadr; opoznien kaskadowych w CSS tu NIE MA i nie wolno ich dodawac
       (zasada: wyzwalaczem jest scroll, nigdy zegar — patrz `eoStagger`
       w common.js).

   Ruch jest przepisany 1:1 z hero strony glownej: 0.7s `ease-out`, 30px.
   NIE wracaj tu do `--reveal-ease` z base.css — to expo-out, ktory upycha
   ~90% drogi w ~20% czasu i czyta sie jak szarpniecie.

   Zasada klienta: NIC nie wjezdza z gory — zaden element nie startuje
   z ujemnego `translateY`.

   Ruch poziomy jest bezpieczny tylko tam, gdzie sekcja przycina wysuw:
   `.about-values` i `.about-brands` maja `overflow: hidden`, `.location`
   dostalo `overflow-x: clip` (location.css v34). `.about-story` jest
   full-bleed i liczy szerokosci ze `100vw`, `.about-culture` i `.about-map`
   nie przycinaja niczego — dlatego tam WSZYSTKO idzie pionowo.

   Specyficznosc: stan ukryty i reguly kierunkowe maja identyczne (0,2,0),
   wiec kierunek wygrywa WYLACZNIE kolejnoscia w zrodle — nie przenos go
   ponad regule bazowa. `.is-revealed` ma (0,3,0) i przebija obie.
   ============================================= */
.eo-reveal {
  --eo-reveal-dur: 0.7s;
  --eo-ease: ease-out;
  --eo-shift: 30px;
}

.eo-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

/* Kierunki — MUSZA zostac po regule wyzej (rowna specyficznosc). */
.eo-reveal [data-reveal="left"]  { transform: translateX(calc(-1 * var(--eo-shift))); }
.eo-reveal [data-reveal="right"] { transform: translateX(var(--eo-shift)); }

.eo-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Karta kultury ma wlasne przejscie hoveru (`border-color`) — dopisujemy je,
   bo generyczna regula wyzej (0,2,0) skasowalaby jej `transition` (0,1,0). */
.eo-reveal .about-culture__card[data-reveal] {
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease),
              border-color 0.3s ease;
}

/* Reduced motion: zerujemy dystans (zostaje sam fade) i skracamy czas —
   jedna regula, bo caly system stoi na tych dwoch zmiennych. */
@media (prefers-reduced-motion: reduce) {
  .eo-reveal {
    --eo-reveal-dur: 0.2s;
    --eo-shift: 0px;
  }
}


/* =============================================
   O NAS — MARKI PARTNERSKIE (vertical marquee)
   ============================================= */
.about-brands {
  padding: 80px 24px;
  background: var(--white);
  overflow: hidden;
}

.about-brands__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* BEZ własnego lewego wcięcia — cała kolumna stoi na linii treści serwisu
   (kontener 1400px). Było tu `padding-left: 22px`, sparowane z `margin-left: -22px`
   na `.about-brands__badge`, żeby pomarańczowa plakietka wystawała na krawędź
   kontenera. Efekt uboczny: TEKST tej sekcji był jedynym na stronie wciętym
   o 22px (zmierzone @1920: 282 przy 260 w hero, historii i kulturze), więc
   sąsiednie sekcje wyglądały na rozjechane. Teraz plakietka i tekst startują
   w tym samym miejscu i nie potrzeba żadnej kompensacji (v294). */
.about-brands__info {
  padding-right: 24px;
}

.about-brands__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.about-brands__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 48px;
}

.about-brands__text {
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.about-brands__badge {
  display: inline-block;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  /* `margin-left: -22px` USUNIĘTY razem z `padding-left` na `.about-brands__info`
     (v294) — kompensował tamto wcięcie; bez niego plakietka wyjechałaby 22px
     poza lewą krawędź kontenera */
}

.about-brands__desc {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.65;
  max-width: 420px;
}

.about-brands__names {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.7;
  max-width: 420px;
  margin-top: 24px;
}

.about-brands__names strong {
  font-weight: 600;
  color: var(--gray-500);
}

.about-brands__marquee {
  display: flex;
  gap: 16px;
  height: 640px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.about-brands__column {
  flex: 1;
  overflow: hidden;
}

.about-brands__track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: max-content;
  will-change: transform;
}

.about-brands__column--up .about-brands__track {
  animation: marqueeUp 30s linear infinite;
  animation-play-state: paused;
}

.about-brands__column--down .about-brands__track {
  animation: marqueeDown 30s linear infinite;
  animation-play-state: paused;
}

.about-brands.in-view .about-brands__track {
  animation-play-state: running;
}

.about-brands__card {
  background: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  flex-shrink: 0;
}

.about-brands__card img {
  max-width: 180px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Larger logos for brands that render small */
.about-brands__card img[title*="Agmar"],
.about-brands__card img[title*="Aluprof"] {
  max-width: 220px;
  max-height: 80px;
}

.about-brands__card img[title*="Wiśniowski"] {
  max-width: 264px;
  max-height: 96px;
}

.about-brands__card img[title*="Barański"] {
  max-width: 275px;
  max-height: 100px;
}

.about-brands__card img[title*="Ambasador"] {
  max-width: 374px;
  max-height: 136px;
}

.about-brands__card img[title*="Selt"] {
  max-width: 342px;
  max-height: 122px;
}

@keyframes marqueeUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes marqueeDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* =============================================
   KEYFRAMES — page-specific
   ============================================= */
/* fadeInUp keyframe moved to base.css */

/* Active navbar link */
.navbar__link--active {
  color: var(--orange) !important;
  opacity: 1 !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .about-hero {
    padding: 156px 40px 80px;
  }

  .about-hero__heading {
    font-size: 48px;
  }

  .about-hero__marquee {
    --mq-h: 378;
    --mq-w: 302;
    --mq-gap: 24;
    margin-top: 40px;
  }
  .marquee-nav {
    bottom: -40px;
  }

  .about-values {
    padding: 80px 24px;
  }

  .about-values__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-values__content {
    display: contents;
  }

  .about-values__label { order: 1; justify-self: start; }
  .about-values__heading { order: 2; text-align: left; font-size: 40px; margin-bottom: 20px; }
  .about-values__subheading { order: 3; text-align: left; margin-bottom: 32px; max-width: 560px; margin-left: 0; }
  .about-values__image-wrapper {
    order: 4;
    max-width: none;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
    width: 100%;
  }
  .about-values__features { order: 5; }

  .about-story__heading {
    font-size: 40px;
    /* układ jednokolumnowy — wracamy do wyrównania do lewej (desktopowe
       dosunięcie w prawo z v288b nie dotyczy zwiniętego układu) */
    text-align: left;
  }

  .about-story__intro {
    text-align: left;
    /* KONIECZNY reset — bez niego `text-align-last: right` z reguły bazowej
       zostawiłby ostatnią linijkę przy prawej krawędzi, gdy reszta jest już
       wyrównana do lewej */
    text-align-last: auto;
    margin-left: 0;
  }

  .about-story__header {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 16px;
    margin-bottom: 48px;
  }
  /* nazwane obszary z desktopu (`heading`/`nav`) muszą wrócić do auto, inaczej
     przy `grid-template-areas: none` tworzą niejawne kolumny i układ nie zwija
     się do jednej kolumny (v286) */
  .about-story__header > div:not(.about-story__nav),
  .about-story__nav {
    grid-area: auto;
  }

  .about-story__slide {
    width: 72px;
    padding-bottom: 72px;
  }

  .about-story__slide.active {
    width: calc(var(--sw) * 0.52);
    padding-left: 28px;
    padding-right: 28px;
  }

  .about-story__slider {
    padding-right: calc(var(--sw) * 0.48 - 72px);
  }

  .about-story__body {
    width: calc(var(--sw) * 0.72);
  }

  .about-story__desc {
    width: calc(var(--sw) * 0.52 - 56px);
  }

  /* proporcja 1043/530 przy szerokości `__body` = 0.72·sw */
  .about-story__image-wrapper {
    height: calc(var(--sw) * 0.4391);
  }

  .about-culture__heading {
    font-size: 40px;
  }

  .about-culture__card-header {
    gap: 8px;
  }

  .about-brands__heading {
    font-size: 40px;
  }

  .about-brands__card {
    height: 85px;
    padding: 20px 27px;
  }

  .about-brands__card img {
    max-width: 153px;
    max-height: 54px;
  }

  .about-brands__card img[title*="Agmar"],
  .about-brands__card img[title*="Aluprof"] {
    max-width: 187px;
    max-height: 68px;
  }

  .about-brands__card img[title*="Wiśniowski"] {
    max-width: 190px;
    max-height: 70px;
  }

  .about-brands__card img[title*="Barański"] {
    max-width: 234px;
    max-height: 85px;
  }

  .about-brands__card img[title*="Ambasador"] {
    max-width: 318px;
    max-height: 116px;
  }

  .about-brands__card img[title*="Selt"] {
    max-width: 291px;
    max-height: 103px;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .about-hero__heading {
    /* Skaluje sie z szerokoscia ekranu, bo LICZBA LINII zalezy tu od obu naraz
       — a uklad ma zostac CZTEROLINIJKOWY na kazdym telefonie (zyczenie
       klienta). Stala wartosc tego nie utrzyma: zmierzone, ze 42px daje 4 linie
       @390px, ale juz PIEC @360 i @320, a 36px daje 4 linie @390 i tez piec
       @320. `10.6vw` to nachylenie przechodzace przez oba punkty (42/390),
       wiec kazdy telefon dostaje najwiekszy font, ktory jeszcze trzyma 4 linie.
       Cap 42px wiaze od 390px w gore (wyzej i tak ubywa linii: 3 @600, 2 @768),
       podloga 34px chroni 320px — tam 34px daje 4 linie, a dotychczasowe
       36px dawalo PIEC, wiec najwezsze telefony wychodza na tym lepiej mimo
       nominalnie mniejszej czcionki. **Nachylenie MUSI zostac ponizej
       10.625vw (= 34/320), inaczej podloga nie zdazy zadzialac i 320px dostaje
       PIATA linie** — probowane `10.8vw` dawalo tam 34,6px i dokladnie ten blad.
       PO KAZDEJ ZMIANIE KOPII albo tych liczb przemierz liczbe linii na
       320/360/390/430 — to jedyny sprawdzian, ze uklad sie nie rozjechal. */
    font-size: clamp(34px, 10.6vw, 42px);
    font-weight: 400;
    top: 0;
    order: 1;
    /* Wysrodkowany, bo sterowanie pasa zdjec ponizej tez jest wysrodkowane
       (montage.css v60) — caly hero stoi wtedy na jednej osi. `.about-hero`
       jest flex-kolumna bez `align-items`, wiec h1 ma pelna szerokosc i sam
       `text-align` wystarcza; nie dodawaj tu `align-self`.
       `text-wrap: balance` USUWA SIEROTKE i jest tu glowna zmiana, nie ozdoba:
       przy zwyklym lamaniu ostatnia linia to bylo samo slowo „detal."
       (zmierzone @390px: 318/266/295/**92** px -> 164/283/295/**230**).
       Brak wsparcia przegladarki = dzisiejsze lamanie, czyli lagodny zjazd.
       ROZMIAR ZOSTAJE 36px SWIADOMIE: przy 38px telefony >=430px dostaja
       CZWARTA linie zamiast trzech (zmierzone), wiec wieksza czcionka wychodzi
       tu na dluzszy, nie mocniejszy naglowek. */
    text-align: center;
    text-wrap: balance;
  }

  .about-hero__copy--full {
    display: none;
  }
  .about-hero__copy--mobile {
    display: inline;
  }

  /* Reorder the hero so the controls sit under the photos.
     `display: contents` on the container lets the heading and the nav —
     which are nested inside it — flow as siblings of the marquee. */
  .about-hero {
    padding: 130px 20px 32px;
    display: flex;
    flex-direction: column;
  }

  .about-hero__container {
    display: contents;
  }

  /* Kafel jest tu ~1,5x wiekszy niz do 2026-08-08 (bylo 235x294, a ponizej
     600px jeszcze 185x231). Powod: na telefonie 390px srodkowy kafel zajmowal
     raptem 176px, czyli 45% szerokosci ekranu — pas czytal sie jak rzad
     miniatur, a nie jak zdjecia realizacji. Teraz 266px = 68% (zmierzone).
     Prog 600px zostal ZDJETY dla samego pasa: jedna wartosc obsluguje caly
     zakres do 768px, wiec ladder jest monotoniczny (280 -> 302 -> 423).
     Sprawdz `--mq-w / --mq-h` = 0.80 przy kazdej zmianie — te sama proporcje
     maja wszystkie zdjecia zrodlowe, wiec inna wartosc zaczyna je przycinac. */
  .about-hero__marquee {
    --mq-h: 350;
    --mq-w: 280;
    --mq-gap: 20;
    margin: 32px -20px 0;
    order: 2;
  }
  .marquee-nav {
    order: 3;
    position: static;
    /* wysrodkowane pod pasem zdjec — wzorzec sekcji „Nasz Montaz" (montage.css
       v60). Bylo `flex-end` + prawy margines 10px (sterowanie wisialo w prawym
       rogu). Kontener hero jest tu `display: contents`, wiec `.marquee-nav`
       jest bezposrednim dzieckiem flex-kolumny `.about-hero` i `align-self`
       decyduje o jego pozycji w poziomie. */
    align-self: center;
    margin: 18px 0 0;
    gap: 16px;
  }

  /* --- Sterowanie karuzelami: wspolny wzorzec mobilny (montage.css v60) ---
     Wypelniona ciemna pigulka + BRAK przycisku pauzy. Reguly celuja w same
     klasy przyciskow, wiec obejmuja OBA klastry na tej stronie: hero
     (`.marquee-nav`) i historie (`.about-story__nav`) — oba uzywaja tych samych
     `.marquee-nav__btn/__toggle`. Autoplay dalej dziala; pierwsza swiadoma
     interakcja zatrzymuje go na stale (inline JS w o-nas.html) — bez tego
     ukrycie pauzy odbieraloby uzytkownikowi jedyny sposob na jej wylaczenie. */
  .marquee-nav__btn {
    background: #151515;
    color: var(--white);
  }

  /* Nadpisanie hoveru jest KONIECZNE, nie kosmetyczne: regula bazowa daje
     `rgba(0,0,0,0.10)`, a przegladarki dotykowe zatrzaskuja `:hover` na ostatnio
     dotknietym elemencie — bez tego stuknieta strzalka zostawalaby jasnoszara
     na ciemnym tle. Ta sama specyficznosc (0,2,0) co baza, wiec wygrywa
     kolejnoscia w zrodle (blok media jest nizej). */
  .marquee-nav__btn:hover {
    background: #2a2a2a;
  }

  .marquee-nav__toggle {
    display: none;
  }

  /* sterowanie historii: wysrodkowane jak w hero (bylo `justify-self: start`
     z reguly bazowej — przy jednej kolumnie ladowalo przy lewej krawedzi) */
  .about-story__nav {
    justify-self: center;
    gap: 16px;
  }

  .about-values {
    padding: 72px 20px;
  }

  .about-values__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-values__content {
    display: contents;
  }

  .about-values__label {
    order: 1;
    justify-self: start;
  }

  .about-values__heading {
    order: 2;
    text-align: left;
  }

  .about-values__subheading {
    order: 3;
    margin-bottom: 0;
    text-align: left;
    /* 16px — was the only 17px subheading on mobile, which put it a step above
       its peers (15–16px) under an identically-sized 32px heading. */
    font-size: 16px;
  }

  .about-values__image-wrapper {
    order: 4;
    max-width: none;
    margin: 0 auto;
    margin-top: 44px;
    margin-bottom: 44px;
    width: 100%;
    aspect-ratio: 5 / 4;
  }

  .about-values__features {
    order: 5;
  }

  .about-values__heading {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .about-values__features {
    gap: 16px;
  }

  .about-values__feature-icon {
    width: 42px;
    height: 42px;
  }

  .about-values__feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .about-brands__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-brands__heading {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .about-brands__info {
    padding-right: 0;
    text-align: left;
  }

  .about-brands__desc {
    max-width: 100%;
  }

  .about-brands__names {
    text-align: left;
    max-width: 100%;
  }

  .about-brands__marquee {
    height: 480px;
  }

  .about-brands__card {
    height: 85px;
    padding: 20px 27px;
  }

  .about-brands__card img {
    max-width: 153px;
    max-height: 54px;
  }

  .about-brands__card img[title*="Agmar"],
  .about-brands__card img[title*="Aluprof"] {
    max-width: 187px;
    max-height: 68px;
  }

  .about-brands__card img[title*="Wiśniowski"] {
    max-width: 190px;
    max-height: 70px;
  }

  .about-brands__card img[title*="Drutex"],
  .about-brands__card img[title*="CAME"] {
    max-width: 138px;
    max-height: 49px;
  }

  .about-brands__card img[title*="Barański"] {
    max-width: 234px;
    max-height: 85px;
  }

  .about-brands__card img[title*="Ambasador"] {
    max-width: 318px;
    max-height: 116px;
  }

  .about-brands__card img[title*="Selt"] {
    max-width: 291px;
    max-height: 103px;
  }

  .about-culture {
    padding: 60px 20px;
  }

  .about-culture__heading {
    font-size: 32px;
    margin-bottom: 40px;
    text-align: left;
  }

  /* MOBILE = ten sam POZIOMY akordeon co na desktopie, tylko w proporcjach
     wzorca (zmierzone na wisniowski.pl @375×812, ich blok ≤576px, gdzie
     1rem = 2.244vw). Wzorzec NIE zamienia sekcji w pionową listę na telefonie
     — trzyma pas i mechanikę rozwijania, więc my też. Wartości podane w vw/vh,
     bo u wzorca skalują się z viewportem (ich rem jest liczony z vw). */
  .about-story {
    /* pas jest FULL-BLEED (wzorzec: margin-left zdjęty na ≤768px) — gutter ma
       tylko nagłówek, patrz niżej. --sw = pełne okno, bo nic już nie odejmujemy */
    --edge: 0px;
    --sw: 100vw;
    /* JEDNOSTKA odwzorowująca `rem` wzorca, który jest u nich liczony z vw
       (zmierzone: 1rem = 2.244vw, czyli 8.415px @375). Wszystkie mobilne
       rozmiary tej sekcji są jej wielokrotnościami — dokładnie jak u wzorca.
       `min()` zatrzymuje wzrost na 576px, bo TAM kończy się ich blok mobilny
       (powyżej przechodzą na zupełnie inny zestaw reguł). Bez tego capa przy
       768px opis dochodzi do 27px, a zawartość wylewa się poza stałą wysokość
       slajdu — zmierzone przepełnienie 136px. */
    --m-unit: min(2.244vw, 12.92px);
    padding: 80px 0;
  }

  .about-story__container {
    text-align: left;
  }

  .about-story__heading {
    font-size: 32px;
    margin-bottom: 14px;
    text-align: left;
  }

  .about-story__intro {
    font-size: 15px;
    /* mobile wraca do wyrównania do lewej (desktopowe dosunięcie w prawo z v288b
       nie dotyczy jednokolumnowego układu) */
    text-align: left;
    margin-left: 0;
  }

  /* nagłówek zachowuje standardowy mobilny gutter serwisu (wzorzec: 2rem ≈ 17px) */
  .about-story__header {
    padding: 0 20px;
  }

  .about-story__slider {
    /* bufor z prawej NIE jest tu potrzebny (wzorzec też go zdejmuje): przy
       aktywnym 68vw + 7 × 15.71vw pas ma 178vw, więc ostatni rok i tak dojeżdża
       w całości. Dotyk przewija natywnie (overflow-x: auto z reguły bazowej). */
    padding-right: 0;
    padding-bottom: calc(var(--m-unit) * 2);
  }

  .about-story__slide {
    width: calc(var(--m-unit) * 7);
    /* Wzorzec ma tu SZTYWNE `height: 65vh` i to jest celowe: dzięki temu pas ma
       zawsze tę samą wysokość i sekcja nie skacze w pionie przy przełączaniu
       lat. My dajemy to jako `min-height`, bo NASZE opisy są dłuższe od ich
       (zmierzone: przy 600×960 zawartość przekracza 65vh o 15px i wylewała się
       poza slajd). Przy typowych telefonach min-height wiąże, więc wysokość
       wychodzi identyczna jak u wzorca; dopiero gdy tekst faktycznie nie mieści
       się w 65vh, pas urośnie zamiast przyciąć zdjęcie.
       `height: auto` + `align-items: stretch` (reguła bazowa pasa) sprawia, że
       WSZYSTKIE slajdy dostają wysokość najwyższego — także zwinięte, bo ich
       treść jest tylko przycięta w poziomie, nie usunięta. */
    height: auto;
    min-height: 65vh;
    padding: var(--m-unit) var(--m-unit) 0;
  }

  .about-story__slide.active {
    /* jedyny wymiar podany u wzorca w vw, nie w rem — stąd osobny cap */
    width: min(68vw, 392px);
    padding: calc(var(--m-unit) * 2) var(--m-unit) 0;
  }

  .about-story__year {
    font-size: calc(var(--m-unit) * 2);
  }

  .about-story__slide.active .about-story__year {
    font-size: calc(var(--m-unit) * 3.6);
  }

  /* zdjęcie zajmuje całą szerokość slajdu — na mobile wzorzec rezygnuje
     z desktopowego wystawania pod sąsiednie kolumny (tam __body ma 0.6·sw) */
  .about-story__body,
  .about-story__slide.active .about-story__body {
    width: 100%;
  }

  .about-story__desc {
    /* content-box aktywnego slajdu */
    width: calc(min(68vw, 392px) - var(--m-unit) * 2);
    font-size: calc(var(--m-unit) * 1.6);
    line-height: 1.3;
    min-height: 0;
    padding: var(--m-unit) 0;
    margin-bottom: calc(var(--m-unit) * 2);
  }

  .about-story__image-wrapper {
    height: 48vh;
  }

  .ihb--hero {
    padding: 14px 32px;
    font-size: 16px;
  }

  .about-culture__grid {
    grid-template-columns: 1fr;
  }

  .about-culture__card {
    padding: 32px 24px;
  }

  .about-culture__card-header {
    gap: 16px;
    margin-bottom: 32px;
  }

  .about-culture__card-title {
    font-size: 22px;
    max-width: calc(100% - 80px);
  }
}

/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  /* `.about-hero__heading` NIE ma juz tu wlasnej reguly — powtarzala `36px`
     z bloku `≤768px` co do wartosci, wiec byla martwym duplikatem, ktory
     wygrywal tylko kolejnoscia w zrodle. Rozmiar ustawia teraz jedno miejsce. */
  .about-hero {
    padding-top: 114px;
    padding-bottom: 24px;
  }

  /* Pas zdjec NIE ma juz tu wlasnego rozmiaru — patrz komentarz w bloku
     `≤768px`. Zostaje sam margines, bo padding sekcji jest tu ciasniejszy. */
  .about-hero__marquee {
    margin-top: 24px;
  }

  .about-story__container {
    max-width: 100%;
  }
}

/* Section badge prefix "// " */
.about-values__label::before,
.about-story__label::before,
.about-map__label::before,
.about-brands__label::before { content: "// "; }
.about-values__label,
.about-story__label,
.about-map__label,
.about-brands__label { text-transform: capitalize; }

/* ---- TELEFON: etykiety + naglowki sekcji wjezdzaja Z LEWEJ ----
   Wspolna regula calego serwisu (2026-08-03, base.css v142): naglowek sekcji
   wchodzi Z BOKU, a tresc (karty, zdjecia, mapa, timeline) Z DOLU — klient
   poprosil, zeby ruch byl „i lewo/prawo, i z dolu". `.about-brands` i
   `.location` robily to juz wczesniej (maja `data-reveal="left"` w HTML);
   tutaj dolaczaja cztery sekcje, ktore byly w calosci pionowe.

   **Zmiana jest w CSS, a NIE przez podmiane `data-reveal` w HTML** — i to jest
   celowe: atrybut dziala na KAZDEJ szerokosci, wiec przestawilby takze
   desktop, ktory byl strojony osobno i nikt go nie kwestionowal.

   **`overflow-x: clip` na trzech sekcjach jest WYMOGIEM, nie kosmetyka** —
   zmierzone: `.about-story`, `.about-culture` i `.about-map` maja
   `overflow-x: visible`, wiec wysuw o 44px w lewo zrobilby realne poziome
   przewijanie strony. `.about-values` juz przycina (`overflow: hidden`), wiec
   go tu nie ma. `clip`, a NIE `hidden`: `hidden` zrobiloby z sekcji kontener
   przewijania, a `.about-story` ma w srodku WLASNY pas przewijany poziomo
   (`.about-story__slider`) — jego `overflow-x: auto` dziala dalej, bo `clip`
   nie tworzy scrollportu.

   Selektory maja te sama specyficznosc (0,2,0) co reguly kierunkowe wyzej i
   wygrywaja kolejnoscia w zrodle; `.is-revealed` (0,3,0) dalej przebija.
   `no-preference` jest konieczne — blok reduced-motion lezy wyzej w pliku. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .about-story,
  .about-culture,
  .about-map {
    overflow-x: clip;
  }

  .eo-reveal .about-values__label,
  .eo-reveal .about-values__heading,
  .eo-reveal .about-story__label,
  .eo-reveal .about-story__heading,
  .eo-reveal .about-culture__label,
  .eo-reveal .about-culture__heading,
  .eo-reveal .about-map__label,
  .eo-reveal .about-map__heading {
    transform: translateX(calc(-1 * var(--eo-shift)));
  }
}