/* Carnis Koło: arkusz strony.
   Kierunek: „premiera produktu” (seed 1874941238), Red Hat Display / Red Hat Text,
   kolory marki w płaskich polach. Wersja z 27.10.2026 (popołudnie): sekcje przebudowane pod funkcję
   (karta firmy, katalog elementów, proces na zdjęciach, mapa eksportu, certyfikat, działy w kontakcie). */

/* ---------- fonty (własne pliki, bez Google Fonts) ---------- */
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(../fonts/red-hat-display-latin-ext-wght.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(../fonts/red-hat-display-latin-wght.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(../fonts/red-hat-text-latin-ext-wght.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(../fonts/red-hat-text-latin-wght.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- tokeny ---------- */
:root {
  --ground: #edeeec;      /* kafel w zimnym świetle */
  --paper: #ffffff;       /* etykieta: czysta biel, nie krem */
  --ink: #131416;
  --muted: #55595c;
  --coral: #e8553f;       /* kolor marki (logo na chłodni) */
  --coral-text: #b8361f;  /* koral do tekstu na jasnym tle */
  --black: #121315;
  --black-2: #1c1e21;
  --steel: #c6cfd4;       /* stal i lód */
  --pink: #f0d2c9;        /* jasna wieprzowina */
  --white: #ffffff;
  --row: #f2f2f0;         /* co drugi wiersz na etykiecie: krok tonu zamiast linii */

  --bg: var(--ground);
  --accent: var(--coral);
  --accent-ink: var(--ink);

  --font-display: 'Red Hat Display', system-ui, sans-serif;
  --font-text: 'Red Hat Text', system-ui, sans-serif;

  /* pięć stopni pisma */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-sub: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);   /* nazwy elementów, numery w szybkim kontakcie, stanowiska */
  --step-lead: clamp(1.25rem, 0.95rem + 1.1vw, 2rem);
  --step-head: clamp(2.5rem, 1.4rem + 3vw, 4rem);
  --step-display: clamp(6rem, 23vw, 22rem);

  --margin: clamp(20px, 2.8vw, 44px);
  --strip: 40px;          /* pasek firmowy na górze pierwszego ekranu */
  --gutter: clamp(14px, 1.7vw, 28px);
  --section: clamp(96px, 9vw, 150px);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
.pic { display: contents; }  /* <picture> z wariantami WebP nie zmienia układu: obrazek zachowuje się jak bezpośrednie dziecko */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--coral); color: var(--ink); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.field-steel :focus-visible, .field-coral :focus-visible, .field-pink :focus-visible { outline-color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
/* pasek postępu przewijania: 3 px przy prawej krawędzi, sam koral bez tła, rośnie od góry */
.progress { position: fixed; top: 0; right: 0; bottom: 0; width: 3px; z-index: 40; pointer-events: none; }
.progress__fill { position: absolute; inset: 0; background: var(--coral); transform: scaleY(0); transform-origin: 50% 0; will-change: transform; }
html:not(.js) .progress { display: none; }
@media print { .progress { display: none; } }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 10px; }
.nowrap { white-space: nowrap; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
p { text-wrap: pretty; max-width: 62ch; }
.years__year { max-width: none; }
.head { font-size: var(--step-head); }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.wrap { padding-inline: var(--margin); }
.frame { overflow: clip; }  /* kadr dla zdjęć, które powoli się przybliżają przy przewijaniu */
/* jedna siatka 12 kolumn dla wszystkich sekcji */
.grid12, .brief__inner, .offer__inner, .offer__head, .process__inner, .proof__inner, .export__inner, .story__inner, .jobs__inner, .contact__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* pola koloru */
.field-coral { background: var(--coral); color: var(--ink); }
.field-black { background: var(--black); color: var(--white); }
.field-steel { background: var(--steel); color: var(--ink); }
.field-ground { background: var(--ground); color: var(--ink); }
.field-pink { background: var(--pink); color: var(--ink); }
.field-paper { background: var(--paper); color: var(--ink); }

/* ---------- kontrolki ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--coral); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--radius); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--wide { min-width: 15rem; }
.button--small { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--step-small); }
.button--ink { background: var(--ink); color: var(--white); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--ink); color: var(--white); }
  .button--ink:hover { background: var(--coral); color: var(--ink); }
  .link:hover { text-decoration-color: currentColor; }
  .link-plain:hover { text-decoration-thickness: 0.14em; }
}

/* ---------- pasek nawigacji (po pierwszym ekranie) ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: var(--gutter); height: 64px; padding-inline: var(--margin); background: var(--ground); color: var(--ink); transform: translateY(-100%); visibility: hidden; transition: transform 420ms var(--ease-out), visibility 0s linear 420ms; }
.bar.is-shown, .bar.is-static { transform: none; visibility: visible; transition: transform 420ms var(--ease-out), visibility 0s; }
html:not(.js) .bar { position: sticky; transform: none; visibility: visible; }
.bar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.bar__mark .logo-bar { height: 34px; width: auto; color: var(--coral); }
.bar__nav { display: flex; gap: clamp(14px, 2vw, 32px); margin-left: auto; font-size: var(--step-small); font-weight: 500; }
.bar__nav a { text-decoration: none; padding: 8px 0; }
.bar__nav a[aria-current="true"] { color: var(--coral-text); }
@media (hover: hover) { .bar__nav a:hover { color: var(--coral-text); } }
.menu { display: none; }

/* ---------- przełącznik języka PL | EN: pasek firmowy, pasek nawigacji, menu na telefonie, stopka ----------
   bieżący język to zwykły tekst (pogrubiony, aria-current), drugi to link; pole kliknięcia co najmniej 28 × 28 px */
.lang { display: inline-flex; align-items: center; font-size: var(--step-small); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.lang__on, .lang__to { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding-inline: 4px; }
.lang__on { font-weight: 800; }
.lang__to { color: var(--muted); text-decoration: none; }
.lang__sep { width: 1px; height: 0.95em; margin-inline: 2px; background: currentColor; opacity: 0.45; }
@media (hover: hover) { .lang__to:hover { color: var(--coral-text); } }
.hero__strip .lang__to, .menu .lang__to { color: #c9cdd0; }
@media (hover: hover) { .hero__strip .lang__to:hover, .menu .lang__to:hover { color: var(--coral); } }
.hero__strip .lang__to:focus-visible, .menu .lang__to:focus-visible { outline-color: var(--coral); }
.hero__reach { align-items: center; }           /* przełącznik ma wyższe pole kliknięcia: pozostałe pozycje paska równo z nim */
.hero__reach .lang { margin-right: -4px; }      /* tekst „EN” równo z prawym marginesem paska */
.postcard__lang { margin-top: 14px; margin-left: -4px; }
.menu__lang { margin: 6px 0 0 -4px; }
.menu .lang__on, .menu .lang__to { min-width: 40px; min-height: 40px; }  /* telefon: większe pole dotyku */
.doc__note { max-width: 60ch; font-weight: 600; }  /* podstrony EN: „wiążąca jest wersja polska” pod opisem dokumentu */
@media (max-width: 767px) {
  .bar__lang { display: none; }                 /* na telefonie przełącznik jest w menu i w pasku firmowym */
  .hero__reach { flex: 1; }                     /* pasek firmowy: telefon przy lewym marginesie, PL | EN przy prawym (nad „Menu”) */
  .hero__reach .lang { margin-left: auto; }
}

/* ================= HERO ================= */
.hero { background: var(--ground); }
.hero__stage { position: relative; min-height: 100svh; overflow: clip; }
.hero__top { position: absolute; z-index: 5; top: calc(var(--strip) + var(--margin)); left: var(--margin); right: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.hero__title { grid-column: 1 / 6; margin: 0; line-height: 0; }
/* zdanie, czym jest firma, pod logo (czytniki słyszą je w h1, stąd aria-hidden na widocznym tekście) */
.hero__claim { grid-column: 1 / 4; grid-row: 2; margin-top: clamp(18px, 2vw, 28px); font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); max-width: 15ch; }
/* pasek firmowy: nazwa i adres po lewej, kontakt po prawej (jak nagłówek listu) */
.hero__strip { position: absolute; z-index: 6; inset: 0 0 auto 0; height: var(--strip); display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); padding-inline: var(--margin); background: var(--ink); color: var(--white); font-size: var(--step-small); font-weight: 500; }
.hero__firm { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.hero__addr { font-weight: 500; color: #c9cdd0; }
.hero__reach { display: flex; gap: clamp(14px, 1.8vw, 28px); white-space: nowrap; }
.hero__reach a { text-decoration: none; }
@media (hover: hover) { .hero__reach a:hover { color: var(--coral); } }
.hero__reach a:focus-visible { outline-color: var(--coral); }
.wordmark { width: clamp(220px, 28vw, 500px); height: auto; color: var(--coral); overflow: visible; }
.hero__aside { grid-column: 7 / 13; grid-row: 1; display: grid; gap: 22px; justify-items: end; }
.hero__nav { display: flex; gap: clamp(16px, 2vw, 30px); font-size: var(--step-small); font-weight: 500; }
.hero__nav a { position: relative; text-decoration: none; padding: 6px 0; }
.hero__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) { .hero__nav a:hover::after { transform: scaleX(1); } }
.hero__nav a:focus-visible::after { transform: scaleX(1); }
.hero__lead { max-width: 34ch; font-size: var(--step-body); line-height: 1.45; }
/* zdanie „co to jest” stoi 32 px pod nazwą (zasada domu), a nie w przeciwnym rogu */
.hero__top > .hero__lead { grid-column: 1 / 4; grid-row: 3; margin-top: 14px; max-width: 30ch; }

.specimen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--gutter); padding: calc(var(--strip) + clamp(150px, 21vh, 230px)) var(--margin) clamp(96px, 13vh, 130px); pointer-events: none; }
.specimen > * { pointer-events: auto; }
.specimen__tile { grid-column: 4 / 10; grid-row: 1; align-self: stretch; background: var(--black); position: relative; z-index: 1; overflow: clip;
  --swinia-wys: 0.9; --swinia-dol: 0.14;  /* świnia mniejsza niż kafel: oddech nad uszami i pod płytą (js/swinia.js czyta te zmienne) */
  --luk-x: 50%; --luk-y: 22%; border-radius: var(--luk-x) var(--luk-x) 0 0 / var(--luk-y) var(--luk-y) 0 0; }
  /* łuk u góry jak brama stodoły; przy rozbiorze --luk-y maleje do 0 i kafel wraca do prostokąta (carnis.js) */
/* tło kafla: stodoła w porannym słońcu, obraz wygenerowany pod kafel (Codex): środek pusty na świnię, ciepłe światło
   przy krawędziach; lekko rozmyta, podłoga przy świni ostrzejsza, ciemniejsze brzegi, żeby świnia odcinała się od tła
   (zrodlo/generowane/2026-10-27-tla-pierwszy-ekran/, skrypt zrodlo/skrypty/tla_pierwszego_ekranu.py) */
.specimen__mood { position: absolute; inset: 0; background: url(../media/foto/tlo-stodola-glebia-1200.webp?v=2) 50% 60% / cover no-repeat; opacity: 0.75; pointer-events: none; }
@media (min-width: 1200px), (min-resolution: 2dppx) { .specimen__mood { background-image: url(../media/foto/tlo-stodola-glebia-1536.webp?v=2); } }
.specimen__canvas { grid-column: 2 / 12; grid-row: 1; position: relative; z-index: 2; min-height: 0; }
.stage3d { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stage3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero.is-pick .hero__stage { cursor: pointer; }
.specimen__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: none; }
.is-3d .specimen__fallback { opacity: 0; transition: opacity 600ms ease; }
/* lista elementów po prawej stronie kafla, jak legenda części na rysunku złożeniowym */
.names { grid-column: 10 / 13; grid-row: 1; align-self: center; position: relative; z-index: 4; justify-self: start; padding: 0 0 0 clamp(8px, 2vw, 32px); }
.names__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-small); letter-spacing: -0.005em; color: var(--ink); margin-bottom: 10px; }
.names__list { display: grid; justify-items: start; gap: 2px; }
.names__list li { cursor: pointer; font-family: var(--font-text); font-weight: 500; font-size: var(--step-small); line-height: 1.25; color: #666a6e; padding: 4px 0; text-align: left; transition: color var(--t-ui) ease; outline-offset: 4px; }
.names__list li[data-d="1"] { font-size: var(--step-body); color: #3b3e41; }
.names__list li[data-d="2"] { color: var(--muted); }
.names__list li[aria-selected="true"], html:not(.js) .names__list li:first-child { font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); letter-spacing: -0.02em; color: var(--ink); padding: 6px 0; }
@media (hover: hover) { .names__list li:hover { color: var(--ink); } }
.specimen__foot { grid-column: 4 / 10; grid-row: 2; display: grid; justify-items: center; gap: 16px; padding-top: 22px; text-align: center; position: relative; z-index: 4; }
.specimen__fact { max-width: 46ch; font-size: var(--step-body); min-height: 3em; }  /* zawsze miejsce na dwa wiersze: kafel nad opisem nie zmienia wysokości */
.specimen__en { margin-top: -8px; font-size: var(--step-small); font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
.ekran-bez-en .specimen__en { display: none; }  /* na niskich ekranach brak miejsca: lista elementów weszłaby na napis (klasa z 100svh, index.html) */
@media (max-height: 880px) { html:not(.js) .specimen__en { display: none; } }
/* strzałki w dół: sam znak, że strona ciągnie się dalej (klik płynnie wjeżdża w rozbiór) */
.scroll-hint { display: inline-grid; place-items: center; width: 48px; height: 48px; color: var(--coral); }
.scroll-hint svg { width: 22px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; overflow: visible; }
.scroll-hint path { opacity: 0.5; }
@media (hover: hover) { .scroll-hint:hover { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint path { animation: hint-wave 1.8s var(--ease-in-out) infinite; }
  .scroll-hint .scroll-hint__c2 { animation-delay: 0.2s; }
  .scroll-hint .scroll-hint__c3 { animation-delay: 0.4s; }
}
@keyframes hint-wave { 0%, 100% { opacity: 0.15; transform: translateY(-2px); } 45% { opacity: 1; transform: translateY(2px); } }

/* fakty w lewym dolnym rogu: to, co odbiorca sprawdza najpierw */
.hero__facts { position: absolute; z-index: 5; left: var(--margin); bottom: var(--margin); display: grid; gap: 6px; font-size: var(--step-small); font-weight: 600; }
.hero__facts li { position: relative; padding-left: 18px; }
.hero__facts li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 8px; height: 8px; background: var(--coral); }
/* zestaw znaków KPO: pełny kolor, na białym polu (plik ma białe tło), w prawym dolnym rogu pierwszego ekranu */
.hero__eu { position: absolute; z-index: 5; right: var(--margin); bottom: var(--margin); display: block; width: clamp(260px, 25vw, 400px); background: var(--white); }
.hero__eu img { width: 100%; height: auto; }

/* rozbiór: plansza */
.explode { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; }
.explode__say { position: absolute; left: var(--margin); bottom: var(--margin); max-width: 22ch; font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); line-height: 1.08; letter-spacing: -0.02em; color: var(--white); }
.explode__tags li { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-body); color: var(--white); white-space: nowrap; transform: translate(-50%, -50%); }
.explode__tags li span { display: inline-block; background: var(--black); padding: 2px 8px; }

/* bez ruchu / bez skryptu: hero jako zwykła sekcja, plansza rozbioru pod spodem */
.hero.is-rest .explode, html:not(.js) .explode { position: relative; inset: auto; opacity: 1; visibility: visible; display: none; }

/* ================= W SKRÓCIE: karta firmy ================= */
.brief__inner { padding-top: var(--section); row-gap: clamp(48px, 5vw, 72px); align-items: start; }
.brief__lead { grid-column: 1 / 6; display: grid; gap: 28px; }
.brief__say { font-family: var(--font-display); font-weight: 700; font-size: var(--step-sub); line-height: 1.25; letter-spacing: -0.015em; max-width: 32ch; }
.brief__photo { margin-top: 12px; }
.brief__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--black); }
.brief__photo figcaption { font-size: var(--step-small); font-weight: 500; padding-top: 8px; }
/* karta firmy: biała etykieta z czarną głową, jak etykieta kartonu */
.sheet { grid-column: 7 / 13; background: var(--paper); color: var(--ink); }
.sheet__head { display: flex; align-items: center; gap: 18px; background: var(--ink); color: var(--white); padding: 14px 22px; }
.sheet__logo { width: 116px; height: auto; color: var(--coral); }
.sheet__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-body); letter-spacing: -0.01em; margin-right: auto; }
.sheet__oval { width: 74px; height: auto; color: var(--white); }
.sheet__rows { display: grid; }
.sheet__rows div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 16px; padding: 11px 22px; }
.sheet__rows div:nth-child(even) { background: var(--row); }
.sheet__rows dt { font-size: var(--step-small); font-weight: 600; color: var(--muted); padding-top: 0.2em; }
.sheet__rows dd { font-size: var(--step-body); line-height: 1.4; font-weight: 500; }
/* wiersze pod „Więcej danych firmy”: na komputerze zawsze widoczne i bez przycisku (carnis.js trzyma otwarte), pasy dalej co drugi wiersz */
.sheet__more > summary { display: none; }
.sheet__more:not([open]) > .sheet__rows { display: none; }  /* zwinięte wiersze nie zostawiają w układzie starych pozycji */
.sheet__rows--more div:nth-child(odd) { background: var(--row); }
.sheet__rows--more div:nth-child(even) { background: none; }
/* szybki kontakt: czarny pas na dole sekcji */
.quick { grid-column: 1 / -1; margin-inline: calc(var(--margin) * -1); background: var(--ink); color: var(--white); padding: clamp(26px, 2.8vw, 40px) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.quick__title { grid-column: 1 / -1; font-size: var(--step-body); font-weight: 800; letter-spacing: -0.01em; color: var(--coral); }
.quick__list { grid-column: 1 / 11; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 18px; }
.quick__list li { display: grid; gap: 4px; }
.quick__list span { font-size: var(--step-small); font-weight: 600; color: #b9bdc0; }
.quick__list a { font-family: var(--font-display); font-weight: 800; font-size: var(--step-sub); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.quick__all { grid-column: 11 / 13; justify-self: end; font-size: var(--step-small); font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; text-align: right; }
@media (hover: hover) { .quick__list a:hover { color: var(--coral); } .quick__all:hover { color: var(--coral); } }

/* ================= OFERTA: okazy + katalog ================= */
.offer { background: var(--ground); }
.offer__inner { padding-block: var(--section); row-gap: clamp(48px, 5vw, 80px); }
.offer__head { grid-column: 1 / -1; align-items: start; }
.offer__head h2 { grid-column: 1 / 6; }
.offer__text { grid-column: 7 / 13; display: grid; gap: 16px; }
.offer__lead { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); line-height: 1.18; letter-spacing: -0.015em; }
.offer__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.offer__act .link-plain { font-weight: 600; }
/* trzy okazy na kaflach, jak okaz w hero */
.specimens { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.specimen-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 6% 12%; }
.specimen-tile--black img { background: var(--black); }
.specimen-tile--steel img { background: var(--steel); }
.specimen-tile p { padding-top: 10px; font-size: var(--step-body); }
.specimen-tile b { font-family: var(--font-display); font-weight: 800; }
/* katalog: rysunek świni z logo, wybrany element w koralu */
.cuts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(76px, 6vw, 92px); }
.cut { display: grid; grid-template-columns: clamp(96px, 9vw, 136px) minmax(0, 1fr); column-gap: clamp(18px, 2vw, 28px); align-items: start; }
.cut__pig { width: 100%; height: auto; color: #c9ced1; overflow: visible; }
.cut__on { fill: var(--coral); }
.cut__pig--all { color: var(--coral); }
.cut__text { display: grid; gap: 6px; justify-items: start; }
.cut h3 { font-size: var(--step-sub); letter-spacing: -0.02em; line-height: 1.05; }
.cut__en { font-size: var(--step-small); font-weight: 500; color: var(--muted); margin-top: -2px; }
.cut__spec { font-size: var(--step-small); font-weight: 600; }
.cut__ask { margin-top: 4px; font-size: var(--step-small); font-weight: 700; color: var(--coral-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: text-decoration-color var(--t-hover) ease; }
.cut__ask::after { content: ' →'; }
@media (hover: hover) { .cut__ask:hover { text-decoration-color: currentColor; } }
.cut__ask:focus-visible { text-decoration-color: currentColor; }

/* ================= OD PÓŁTUSZY DO PALETY: zdjęcia po przekątnej ================= */
.process__inner { padding-block: var(--section); align-items: start; }
.process__head { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(48px, 5vw, 80px); }
.process__head h2 { grid-column: 1 / 7; }
.process__head p { grid-column: 7 / 13; font-size: var(--step-body); color: #d9dcde; }
.stage { display: contents; }
.stage__pic { position: relative; overflow: clip; background: var(--black-2); }
.stage__pic img, .stage__pic video { width: 100%; height: 100%; object-fit: cover; }
.stage__text { display: grid; gap: 10px; }
.stage__text h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.05; }
.stage__text p { max-width: 36ch; }
.stage__note { font-size: var(--step-small); color: #c4c8cb; }
.stage--1 .stage__pic { grid-column: 1 / 5; grid-row: 2 / span 2; aspect-ratio: 3 / 4; }
.stage--1 .stage__text { grid-column: 5 / 8; grid-row: 2; }
.stage--2 .stage__pic { grid-column: 6 / 9; grid-row: 3 / span 2; aspect-ratio: 1 / 1; margin-top: clamp(32px, 4vw, 64px); }
.stage--2 .stage__text { grid-column: 9 / 12; grid-row: 3; margin-top: clamp(32px, 4vw, 64px); }
.stage--3 .stage__pic { grid-column: 5 / 13; grid-row: 5; aspect-ratio: 16 / 9; margin-top: clamp(24px, 2.4vw, 40px); }
.stage--3 .stage__text { grid-column: 1 / 5; grid-row: 5; margin-top: clamp(24px, 2.4vw, 40px); padding-right: var(--gutter); }
.film__pause { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(18, 19, 21, 0.72); color: var(--white); }
.film__pause[hidden] { display: none; }
.film__pause svg { width: 16px; height: 16px; fill: currentColor; }
.film__pause .film__icon-play, .film__pause.is-paused .film__icon-pause { display: none; }
.film__pause.is-paused .film__icon-play { display: inline; }

/* ================= JAKOŚĆ: certyfikat, standardy, wyróżnienia ================= */
.proof { background: var(--pink); color: var(--ink); overflow-x: clip; }
.proof__inner { padding-block: var(--section); row-gap: clamp(48px, 5vw, 72px); align-items: start; }
.proof__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.proof__head h2 { grid-column: 1 / 7; }
.proof__lead { grid-column: 7 / 13; font-size: var(--step-body); }
.proof__doc { grid-column: 1 / 5; grid-row: 2; }
.proof__doc a { display: block; background: var(--paper); padding: clamp(10px, 1.2vw, 18px); transition: transform var(--t-ui) var(--ease-out); }
.proof__doc img { width: 100%; aspect-ratio: 1240 / 1753; object-fit: cover; }
@media (hover: hover) { .proof__doc a:hover { transform: translateY(-4px); } }
.proof__doc figcaption { font-size: var(--step-small); font-weight: 500; padding-top: 10px; }
.standards { grid-column: 6 / 13; grid-row: 2; display: grid; gap: 4px; }
.standards__row { position: relative; display: grid; grid-template-columns: 13em minmax(0, 1fr); column-gap: var(--gutter); padding: 18px 0; }
.standards__row dt { font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; }
.standards__row dd { font-size: var(--step-body); }
.standards__row--mark { padding-right: clamp(110px, 11vw, 160px); }
.standards__oval { position: absolute; right: 0; top: 14px; width: clamp(92px, 9vw, 140px); height: auto; color: var(--coral-text); }
.awards { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 16px; }
.awards__title { font-size: var(--step-lead); letter-spacing: -0.02em; }
.awards__table { width: 100%; border-collapse: collapse; font-size: var(--step-body); table-layout: fixed; }
.awards__table th:first-child { width: 34%; }
.awards__table td:nth-child(2) { width: 38%; }
.awards__table th, .awards__table td { text-align: left; vertical-align: baseline; padding: 12px 14px; }
.awards__table tbody tr:nth-child(odd) { background: #e9c4b9; }
.awards__table th { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.awards__table td:last-child { text-align: right; white-space: nowrap; }

/* ================= EKSPORT: mapa + lista ================= */
.export__inner { padding-block: var(--section); row-gap: clamp(40px, 4.4vw, 64px); align-items: start; }
.export__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.export__head h2 { grid-column: 1 / 7; }
.export__lead { grid-column: 7 / 13; font-size: var(--step-body); }
.map { grid-column: 1 / 9; grid-row: 2; position: relative; }
.map__img { width: 100%; height: auto; }
.map__pins { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1000 / 439; pointer-events: none; }
.map__pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.map__pin::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: transform var(--t-ui) var(--ease-out); }
.map__pin span { position: absolute; left: 10px; top: -12px; white-space: nowrap; background: var(--ink); color: var(--white); font-size: var(--step-small); font-weight: 700; padding: 2px 8px; opacity: 0; transform: translateY(4px); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.map__pin.is-on::before { transform: scale(1.6); }
.map__pin--left span { left: auto; right: 10px; }  /* punkty przy prawej krawędzi mapy: podpis w lewo od kropki, żeby nie wystawał poza ekran telefonu */
.map__pin.is-on span { opacity: 1; transform: none; }
.map__pin--home::before { background: var(--white); box-shadow: 0 0 0 3px var(--ink); } /* taste-skill-ignore: kropka na mapie, obwódka zamiast linii */
.map__pin--home span { opacity: 1; transform: none; left: -10px; top: -36px; }
.map__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 14px; font-size: var(--step-small); font-weight: 500; }
.map__sw { display: inline-block; width: 14px; height: 14px; margin-left: 8px; }
.map__sw:first-child { margin-left: 0; }
.map__sw--pl { background: var(--ink); }
.map__sw--ue { background: #f4f5f3; }
.map__sw--x { background: var(--coral); }
.markets { grid-column: 9 / 13; grid-row: 2 / span 2; display: grid; gap: 12px; align-content: start; }
.markets h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.05; }
.markets h3 + p { margin-bottom: 18px; }
.markets__list { columns: 2; column-gap: var(--gutter); font-size: var(--step-body); }
.markets__list li { break-inside: avoid; padding: 3px 0 7px; cursor: default; }
.markets__list li.is-on { color: var(--coral-text); }
.markets__src { display: block; font-size: var(--step-small); font-weight: 600; color: var(--ink); }
.markets__note { font-size: var(--step-small); color: #3d4246; }
.markets__contact { margin-top: 18px; background: var(--ink); color: #b9bdc0; padding: 18px 22px; font-size: var(--step-small); font-weight: 600; max-width: none; }
.markets__contact a { display: block; margin-top: 4px; color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); letter-spacing: -0.01em; text-decoration: none; }
@media (hover: hover) { .markets__contact a:hover { color: var(--coral); } }

/* ================= ZACHODNIA 5: lata z lotu ptaka ================= */
.years { background: var(--black); color: var(--white); }
.years__stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 100svh; }
.years__photos { position: relative; overflow: clip; min-height: 56svh; background: var(--black); }
.years__img, .years__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.years__img img { object-fit: cover; object-position: 50% 46%; background: var(--black); }
.years__img { opacity: 0; }
.years__img:last-child { opacity: 1; }
.years__band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding: clamp(22px, 3vw, 40px) var(--margin) var(--margin); background: var(--black); }
.years__year { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 900; font-size: min(var(--step-display), 30svh); line-height: 0.78; letter-spacing: -0.05em; color: var(--white); margin-left: -0.05em; }
.years__text { grid-column: 7 / 13; display: grid; gap: 14px; align-content: end; }
.years__title { font-size: var(--step-head); }
.years__text p { max-width: 46ch; }
.years__list { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--font-display); font-weight: 700; font-size: var(--step-body); }
.years__list li { opacity: 0.5; transition: opacity var(--t-ui) ease; }
.years__list li.is-on { opacity: 1; }
.years__credit { font-size: var(--step-small); color: #a9aeb2; }
html.js .years.is-live .years__stage { min-height: 0; }
@media (max-width: 1023px) {
  /* rok nad tekstem (na 768 w dwóch kolumnach wchodził na listę lat) */
  .years__band { grid-template-columns: 1fr; row-gap: 16px; }
  .years__year, .years__text { grid-column: 1; }
  .years__year { font-size: min(30vw, 22svh); }
  /* rok stoi tuż pod zdjęciem, a przy interlinii 0,78 wierzch cyfr wystawał ponad wiersz i zdjęcie go przykrywało */
  .years__year { position: relative; z-index: 1; padding-top: 0.14em; }
  .years__photos { min-height: 48svh; }
}
/* telefon: dłuższy tekst (np. po angielsku) nie może wypchnąć zdjęcia na rok */
@media (max-width: 767px) { .years__photos { min-height: 42svh; } }

/* ================= O NAS ================= */
.story { background: var(--ground); }
.story__inner { padding-block: var(--section); row-gap: clamp(40px, 4vw, 64px); align-items: start; }
.story__title { grid-column: 1 / 5; grid-row: 1; }
.story__photo { grid-column: 1 / 5; grid-row: 2 / span 2; align-self: start; }
.story__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--steel); }
.story__photo figcaption { font-size: var(--step-small); font-weight: 500; padding-top: 8px; }
.story__text { grid-column: 5 / 13; grid-row: 1 / span 2; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.story__text p { max-width: none; font-size: var(--step-body); line-height: 1.5; break-inside: avoid; }
.story__text p + p { margin-top: 0.8em; }
.story__text b { font-weight: 700; }
.story__plus { grid-column: 5 / 13; grid-row: 3; display: grid; gap: 16px; }
.story__plus h3 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.plus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--gutter); }
.plus li { position: relative; padding-left: 26px; font-size: var(--step-body); font-weight: 600; line-height: 1.35; }
.plus li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; background: var(--coral); }
/* projekty z dofinansowaniem UE: dwie białe karty, znaki w pełnym kolorze */
.grants { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); padding-top: clamp(16px, 2vw, 32px); scroll-margin-top: 80px; }
.grants__title { grid-column: 1 / -1; font-size: var(--step-lead); letter-spacing: -0.02em; }
.grant { background: var(--paper); padding: clamp(22px, 2.6vw, 40px); display: grid; gap: 14px; align-content: start; }
.grant__marks { width: 100%; max-width: 520px; height: auto; }
.grant__board { width: 100%; max-width: 520px; height: auto; }
.grant h4 { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-top: 6px; }
.grant p { font-size: var(--step-small); line-height: 1.5; }
.grant__facts { display: grid; gap: 8px; font-size: var(--step-small); }
.grant__facts div { display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 14px; }
.grant__facts dt { font-weight: 700; }
.grant__tags { font-weight: 700; color: var(--muted); }

/* ================= PRACA ================= */
.jobs { background: var(--paper); }
.jobs__inner { padding-block: var(--section); row-gap: 40px; align-items: start; }
.jobs__main { grid-column: 1 / 7; display: grid; gap: 22px; justify-items: start; }
.jobs__lead { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); line-height: 1.18; letter-spacing: -0.015em; max-width: 28ch; }
.jobs__sub { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.01em; margin-top: 8px; }
.jobs__list { display: grid; gap: 16px; width: 100%; }
.jobs__list li { position: relative; display: grid; gap: 4px; padding-left: 26px; }
.jobs__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--coral); }
.jobs__list b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-sub); letter-spacing: -0.015em; line-height: 1.1; }
.jobs__list span { font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.jobs__apply { grid-column: 8 / 13; display: grid; gap: 16px; justify-items: start; }
.clause { background: var(--pink); padding: 16px 18px; font-size: var(--step-small); line-height: 1.5; max-width: 62ch; }
.clause__copy { font-size: var(--step-small); font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; padding: 6px 0; }
.clause__copy[hidden] { display: none; }
.clause__status { font-size: var(--step-small); font-weight: 600; }
.clause__status:empty { display: none; }
.jobs__who { display: grid; gap: 4px; margin-top: 6px; }
.jobs__who a { text-decoration: none; font-weight: 600; }
@media (hover: hover) { .jobs__who a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* ================= KONTAKT ================= */
.contact { background: var(--black); color: var(--white); padding-bottom: clamp(80px, 9vw, 140px); }
.contact__inner { padding-block: var(--section) clamp(64px, 7vw, 110px); row-gap: clamp(40px, 4vw, 64px); }
.contact__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.contact__head h2 { grid-column: 1 / 7; }
.contact__lead { grid-column: 7 / 13; font-size: var(--step-body); }
.depts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(40px, 4vw, 60px); }
.dept { display: grid; gap: 12px; align-content: start; }
.dept h3 { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--coral); }
.dept p { display: grid; gap: 2px; font-size: var(--step-body); line-height: 1.45; }
.dept p + p { margin-top: 8px; }
.dept a { text-decoration: none; overflow-wrap: anywhere; }
.dept b { font-weight: 700; }
@media (hover: hover) { .dept a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* etykieta-zapytanie */
.label { position: relative; width: min(100% - 2 * var(--margin), 1240px); margin-inline: auto; display: grid; grid-template-columns: 46fr 54fr; background: var(--paper); color: var(--ink); scroll-margin-top: 80px;
  clip-path: polygon(0 0, calc(46% + -15.00px) 0.00px, calc(46% + -14.62px) 3.34px, calc(46% + -13.51px) 6.51px, calc(46% + -11.73px) 9.35px, calc(46% + -9.35px) 11.73px, calc(46% + -6.51px) 13.51px, calc(46% + -3.34px) 14.62px, calc(46% + 0.00px) 15.00px, calc(46% + 3.34px) 14.62px, calc(46% + 6.51px) 13.51px, calc(46% + 9.35px) 11.73px, calc(46% + 11.73px) 9.35px, calc(46% + 13.51px) 6.51px, calc(46% + 14.62px) 3.34px, calc(46% + 15.00px) 0.00px, 100% 0, 100% 100%, calc(46% + 15.00px) calc(100% - 0.00px), calc(46% + 14.62px) calc(100% - 3.34px), calc(46% + 13.51px) calc(100% - 6.51px), calc(46% + 11.73px) calc(100% - 9.35px), calc(46% + 9.35px) calc(100% - 11.73px), calc(46% + 6.51px) calc(100% - 13.51px), calc(46% + 3.34px) calc(100% - 14.62px), calc(46% + 0.00px) calc(100% - 15.00px), calc(46% + -3.34px) calc(100% - 14.62px), calc(46% + -6.51px) calc(100% - 13.51px), calc(46% + -9.35px) calc(100% - 11.73px), calc(46% + -11.73px) calc(100% - 9.35px), calc(46% + -13.51px) calc(100% - 6.51px), calc(46% + -14.62px) calc(100% - 3.34px), calc(46% + -15.00px) calc(100% - 0.00px), 0 100%); }
.label:focus { outline: none; }
.label__left { padding: clamp(24px, 3.4vw, 48px); display: grid; align-content: start; gap: 18px; }
.label__title { font-size: var(--step-lead); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98; max-width: 10ch; }
.label__lead { max-width: 38ch; }
.label__right { padding: clamp(24px, 3.4vw, 48px); display: grid; gap: 14px; align-content: start; }
.label legend, .fieldwrap > span { display: block; font-size: var(--step-small); font-weight: 600; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: #e7e8e5; font-size: var(--step-small); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.chip input:checked + span { background: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg legend { width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: #e7e8e5; font-size: var(--step-small); font-weight: 600; }
.seg input:checked + span { background: var(--ink); color: var(--white); }
/* zaznaczenie widać nie tylko po kolorze: znak „ptaszka” (rysunek SVG jako maska, w kolorze tekstu) */
.chip input:checked + span::before, .seg input:checked + span::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.4em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { width: 100%; min-height: 52px; padding: 0 14px; background: #e7e8e5; border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); }
.field::placeholder { color: #5f6367; }
.field:focus-visible { outline: 2px solid var(--coral); outline-offset: 0; background: var(--white); }
.submit { min-height: 56px; width: 100%; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: var(--step-body); letter-spacing: -0.01em; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.submit:active { transform: scale(0.99); }
@media (hover: hover) { .submit:hover { background: var(--coral); color: var(--ink); } }
.label__note { font-size: var(--step-small); color: var(--muted); }
.label__status { font-size: var(--step-small); font-weight: 600; }
.label__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* podgląd etykiety */
.ticket { margin-top: 8px; background: var(--ground); padding: 0 0 16px; }
.ticket__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); padding: 12px 16px; margin-bottom: 12px; }
.ticket__logo { width: 110px; height: auto; color: var(--coral); }
.ticket__oval { width: 70px; height: auto; color: var(--white); }
.ticket__rows { display: grid; gap: 4px; margin: 0; padding: 0 16px; }
.ticket__rows div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; font-size: var(--step-small); }
.ticket__rows dt { color: var(--muted); }
.ticket__rows dd { font-weight: 700; overflow-wrap: anywhere; }

/* ================= STOPKA: rewers karty ================= */
.foot { padding: 0 var(--margin) var(--margin); }
.postcard { position: relative; width: min(100%, 1240px); margin-inline: auto; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); row-gap: 36px; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px) 28px; }
.postcard__title { font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 16px; }
.postcard__left p { max-width: 40ch; }
.postcard__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: var(--step-small); font-weight: 600; }
.postcard__right { position: relative; display: grid; align-content: end; justify-items: start; padding-top: 120px; }
.postcard__stamp { position: absolute; right: 0; top: 0; width: 104px; }
.postcard__stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--steel); }
.postcard__address { display: grid; gap: 10px; font-size: var(--step-body); }
.postcard__address a { text-decoration: none; }
@media (hover: hover) { .postcard__address a:hover { color: var(--coral-text); } }
.postcard__eu { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 12px; align-items: center; padding-top: 8px; }
.postcard__marks img { width: 100%; height: auto; }
.postcard__eu p { font-size: var(--step-small); color: var(--muted); max-width: 62ch; }
.postcard__credits { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); max-width: 64ch; }  /* było 110ch, ok. 145 znaków w wierszu */
.postcard__imprint { grid-column: 1 / -1; justify-self: center; font-size: var(--step-small); color: var(--muted); text-align: center; max-width: 66ch; padding-top: 4px; }  /* było 92ch, ok. 120 znaków w wierszu; teraz ok. 85 */

/* ================= PODSTRONY (dokumenty) ================= */
.bar.is-static { position: sticky; transform: none; }
.doc { padding: clamp(64px, 9vw, 140px) var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(40px, 5vw, 72px); }
.doc__head { grid-column: 1 / 9; display: grid; gap: 22px; }
.doc__title { font-size: var(--step-head); }
.doc__lead { font-size: var(--step-lead); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; max-width: 34ch; }
.doc__body { grid-column: 4 / 11; display: grid; gap: 18px; }
.doc__body h2 { font-size: var(--step-lead); letter-spacing: -0.02em; margin-top: 36px; }
.doc__body h3 { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.01em; margin-top: 18px; }
.doc__body p, .doc__list li { max-width: 68ch; }
.doc__list { display: grid; gap: 10px; padding-left: 1.2em; list-style: disc; }
.doc__list li::marker { color: var(--coral-text); }
.foot--short { padding-top: clamp(64px, 7vw, 110px); }
.postcard--short { padding-top: clamp(32px, 4vw, 56px); }
@media (max-width: 767px) {
  .doc__head, .doc__body { grid-column: 1 / -1; }
}

/* ================= RUCH (wejścia) ================= */
/* Treść jest widoczna od początku (bez skryptu, przy skoku z menu, w narzędziach mierzących stronę).
   Skrypt „uzbraja” element dopiero, gdy podjeżdża od dołu, a odsłania, gdy wejdzie na ekran. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal].is-armed { opacity: 0; transform: translateY(24px); }
  .js [data-reveal].is-armed.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
}

/* wejście pierwszego ekranu: cztery grupy, koniec przed 1,1 s; nawigacja stoi (motion.md, reguła 1) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title, .js .hero__top > .hero__lead, .js .names, .js .specimen__foot, .js .hero__facts, .js .hero__eu { animation: ad-rise 800ms var(--ease-expo) backwards; }
  .js .hero__top > .hero__lead { animation-name: ad-rise-text; }
  .js .specimen__tile { animation: ad-tile 900ms var(--ease-expo) backwards; transform-origin: 50% 100%; }
  .js .hero__title, .js .hero__top > .hero__lead { animation-delay: 60ms; }
  .js .names, .js .specimen__foot { animation-delay: 200ms; }
  .js .hero__facts, .js .hero__eu { animation-delay: 300ms; }
}
@keyframes ad-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ad-rise-text { from { transform: translateY(18px); } to { transform: none; } }
@keyframes ad-tile { from { opacity: 0; transform: scaleY(0.82); } to { opacity: 1; transform: none; } }

/* ================= TABLET ================= */
@media (max-width: 1023px) {
  .hero__aside { grid-column: 6 / 13; }
  .hero__nav { gap: 14px; }
  .hero__top > .hero__lead, .hero__claim { grid-column: 1 / 7; }
  .specimen { padding-top: calc(var(--strip) + var(--margin) + 28vw * 0.462 + 230px); }  /* pod logo, zdaniem i opisem */
  .specimen__tile, .specimen__foot { grid-column: 1 / 10; }
  .hero__eu { width: 240px; }
  .hero__addr, .hero__alldepts { display: none; }

  .brief__lead, .sheet { grid-column: 1 / -1; }
  .brief__lead { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .brief__lead h2, .brief__say { grid-column: 1 / -1; }
  .brief__photo { grid-column: 1 / -1; }
  .quick__list { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick__all { grid-column: 1 / -1; justify-self: start; text-align: left; }

  .offer__head h2, .offer__text { grid-column: 1 / -1; }
  .offer__text { margin-top: 20px; }
  .cuts { grid-template-columns: 1fr; }

  .process__head { margin-bottom: 40px; }
  .process__head h2, .process__head p { grid-column: 1 / -1; }
  .process__head p { margin-top: 16px; }
  .stage--1 .stage__pic, .stage--2 .stage__pic, .stage--3 .stage__pic { grid-row: auto; margin-top: 0; }
  .stage--1 .stage__text, .stage--2 .stage__text, .stage--3 .stage__text { grid-row: auto; margin-top: 0; align-self: center; }
  .stage--1 .stage__pic { grid-column: 1 / 7; }
  .stage--1 .stage__text { grid-column: 7 / 13; }
  .stage--2 .stage__pic { grid-column: 7 / 13; margin-top: 48px; }
  .stage--2 .stage__text { grid-column: 1 / 7; grid-row: 3; margin-top: 48px; }
  .stage--3 .stage__pic { grid-column: 1 / 13; margin-top: 48px; }
  .stage--3 .stage__text { grid-column: 1 / 13; margin-top: 20px; }

  .proof__head h2, .proof__lead { grid-column: 1 / -1; }
  .proof__lead { margin-top: 16px; }
  .proof__doc { grid-column: 1 / 6; grid-row: auto; align-self: start; }
  .standards { grid-column: 6 / 13; grid-row: auto; }
  .standards__row { grid-template-columns: 1fr; row-gap: 6px; }
  .awards { grid-column: 1 / -1; grid-row: auto; }
  .awards__table td:last-child { white-space: normal; }

  .export__head h2, .export__lead { grid-column: 1 / -1; }
  .export__lead { margin-top: 16px; }
  .map, .markets { grid-column: 1 / -1; grid-row: auto; }
  .markets__list { columns: 3; }

  .story__title, .story__text, .story__plus, .story__photo, .grants { grid-column: 1 / -1; grid-row: auto; }
  .story__photo { width: min(100%, 520px); }
  .plus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depts { row-gap: 36px; }
  .grants { grid-template-columns: 1fr; }

  .jobs__main, .jobs__apply { grid-column: 1 / -1; }

  .contact__head h2, .contact__lead { grid-column: 1 / -1; }
  .contact__lead { margin-top: 16px; }
  .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= TELEFON ================= */
@media (max-width: 767px) {
  :root { --margin: 20px; --strip: 36px; }
  .bar__nav { display: none; }
  .bar .button { margin-left: auto; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 700; font-size: var(--step-small); padding: 10px 0 10px 12px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; right: 0; top: 48px; display: grid; gap: 4px; background: var(--ink); color: var(--white); padding: 16px 20px; min-width: 200px; }
  .menu nav a { text-decoration: none; padding: 8px 0; font-weight: 600; }
  .menu summary { min-height: 44px; display: flex; align-items: center; }
  .menu--hero { position: absolute; top: 0; right: 0; }
  .menu--hero nav { z-index: 6; }

  .hero__top { grid-template-columns: 1fr; row-gap: 14px; }
  .hero__title { grid-column: 1 / -1; }
  .hero__title { justify-self: start; }  /* pudełko nagłówka tylko na szerokość napisu, obok mieści się „Menu” */
  .wordmark { width: 52vw; }
  .hero__aside { display: none; }
  .hero__lead { justify-self: start; font-size: var(--step-body); max-width: 30ch; }
  .hero__top > .hero__lead { grid-column: 1 / -1; margin-top: 0; }
  .specimen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 0 var(--margin) 24px; padding-top: calc(var(--strip) + var(--margin) + 52vw * 0.462 + 150px); align-content: start; row-gap: 14px; }
  .hero__claim { grid-column: 1 / -1; font-size: 1.375rem; margin-top: 12px; max-width: none; }
  .hero__strip { justify-content: space-between; }
  .hero__firm, .hero__mail, .hero__alldepts { display: none; }
  .names__title { display: none; }
  .hero.is-rest .specimen, html:not(.js) .specimen { position: relative; inset: auto; }
  .specimen__en { display: none; }
  /* kwadratowy kafel wyznacza wysokość rzędu (kolumna minmax(0, 1fr): proporcje nie rozpychają jej poza ekran) */
  .specimen__tile, .specimen__canvas { grid-column: 1; grid-row: 1; }
  .specimen__tile { aspect-ratio: 1 / 1; align-self: start; }
  .specimen__canvas { margin-inline: calc(var(--margin) * -1); }
  /* telefon: cała lista widoczna (zawija się w dwa wiersze), wybrany element tylko pogrubiony */
  .names { grid-column: 1; grid-row: 2; justify-self: stretch; padding: 0; overflow: visible; scroll-snap-type: none; }
  .names__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; width: auto; padding-inline: 0; align-items: baseline; }
  .names__list li { text-align: center; font-size: var(--step-body); }
  .names__list li[aria-selected="true"] { font-size: inherit; font-weight: 800; padding: 4px 0; }
  .specimen__foot { grid-column: 1; grid-row: 3; padding-top: 4px; }
  .specimen__foot .button { width: 100%; }
  .hero__facts { display: none; }
  /* KPO na telefonie: wyśrodkowane pod przyciskiem, na pierwszym ekranie */
  .hero__eu { left: 0; right: 0; margin-inline: auto; bottom: 12px; width: min(300px, calc(100vw - 40px)); }
  .hero.is-rest .hero__eu, html:not(.js) .hero__eu { position: relative; inset: auto; margin: 0 var(--margin) 20px; }

  .brief__lead { grid-template-columns: 1fr; }
  .brief__say { font-size: 1.125rem; line-height: 1.35; }
  .sheet__head { padding: 12px 16px; gap: 12px; }
  .sheet__logo { width: 92px; }
  .sheet__oval { width: 58px; }
  .sheet__rows div { grid-template-columns: 1fr; row-gap: 2px; padding: 10px 16px; }
  /* telefon: najważniejsze wiersze, reszta pod przyciskiem (wiersz w pasie, plus i minus jak przy rozwijaniu) */
  .sheet__more > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer; background: var(--row); color: var(--coral-text); font-weight: 700; }
  .sheet__more > summary::-webkit-details-marker { display: none; }
  .sheet__more > summary::after { content: '+'; font-size: 1.5em; line-height: 0.8; font-weight: 500; }
  .sheet__more[open] > summary::after { content: '\2212'; }
  .sheet__rows--more div:nth-child(odd) { background: none; }
  .sheet__rows--more div:nth-child(even) { background: var(--row); }
  .quick { padding: 22px 20px; margin-inline: calc(var(--margin) * -1); }
  .quick__list { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .quick__list a { white-space: normal; overflow-wrap: anywhere; }

  .specimens { grid-template-columns: 1fr 1fr; }
  .specimens li:first-child { grid-column: 1 / -1; }
  .specimen-tile p { font-size: var(--step-small); }
  .cut { grid-template-columns: 88px minmax(0, 1fr); }
  .cut__spec { font-size: 0.9375rem; }  /* telefon: stan i pakowanie to treść, nie przypis; 13 px było za drobne */

  .process__head { margin-bottom: 32px; }
  .stage--1 .stage__pic, .stage--1 .stage__text, .stage--2 .stage__pic, .stage--2 .stage__text, .stage--3 .stage__pic, .stage--3 .stage__text { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .stage__text { margin-top: 16px !important; margin-bottom: 8px; }
  .stage--1 .stage__pic { aspect-ratio: 4 / 3; }
  .stage--2 .stage__pic { width: 62%; justify-self: end; margin-top: 40px !important; }
  .stage--3 .stage__pic { width: 78%; margin-top: 40px !important; }

  .proof__doc { grid-column: 1 / -1; width: 72%; }
  .standards { grid-column: 1 / -1; }
  .standards__row--mark { padding-right: 96px; }
  .awards__table, .awards__table tbody, .awards__table tr, .awards__table th, .awards__table td { display: block; }
  .awards__table tr { padding: 12px 14px; }
  .awards__table th, .awards__table td { padding: 0; text-align: left !important; }
  .awards__table td { font-size: var(--step-small); }
  .awards__table th:first-child, .awards__table td:nth-child(2) { width: auto; }  /* wiersz jako karta: nazwa na całą szerokość (było 34%) */

  .map__pin--home span { font-size: 0.75rem; top: -30px; }
  .markets__list { columns: 2; }

  .story__text { columns: 1; }
  .plus { grid-template-columns: 1fr; }
  .grant__facts div { grid-template-columns: 1fr; }

  .depts { grid-template-columns: 1fr; }

  .label { grid-template-columns: 1fr; grid-template-rows: auto auto; width: calc(100% - 24px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.00px) calc(52% + -15.00px), calc(100% - 3.34px) calc(52% + -14.62px), calc(100% - 6.51px) calc(52% + -13.51px), calc(100% - 9.35px) calc(52% + -11.73px), calc(100% - 11.73px) calc(52% + -9.35px), calc(100% - 13.51px) calc(52% + -6.51px), calc(100% - 14.62px) calc(52% + -3.34px), calc(100% - 15.00px) calc(52% + 0.00px), calc(100% - 14.62px) calc(52% + 3.34px), calc(100% - 13.51px) calc(52% + 6.51px), calc(100% - 11.73px) calc(52% + 9.35px), calc(100% - 9.35px) calc(52% + 11.73px), calc(100% - 6.51px) calc(52% + 13.51px), calc(100% - 3.34px) calc(52% + 14.62px), calc(100% - 0.00px) calc(52% + 15.00px), 100% 100%, 0 100%, 0.00px calc(52% + 15.00px), 3.34px calc(52% + 14.62px), 6.51px calc(52% + 13.51px), 9.35px calc(52% + 11.73px), 11.73px calc(52% + 9.35px), 13.51px calc(52% + 6.51px), 14.62px calc(52% + 3.34px), 15.00px calc(52% + 0.00px), 14.62px calc(52% + -3.34px), 13.51px calc(52% + -6.51px), 11.73px calc(52% + -9.35px), 9.35px calc(52% + -11.73px), 6.51px calc(52% + -13.51px), 3.34px calc(52% + -14.62px), 0.00px calc(52% + -15.00px)); }
  .pair { grid-template-columns: 1fr; }

  .postcard { grid-template-columns: 1fr; }
  .postcard__right { padding-top: 0; }
  .postcard__stamp { position: relative; width: 84px; margin: 0 0 24px 40px; }
  .postcard__eu { grid-template-columns: 1fr; }
}

/* telefony: kafel okazu dopasowany do wysokości ekranu, żeby opis, przycisk „Zapytaj o ofertę” i znaki KPO
   mieściły się na pierwszym ekranie */
@media (max-width: 767px) {
  .specimen__tile, .specimen__canvas { aspect-ratio: auto; height: clamp(160px, calc(100svh - 566px), calc(100vw - 40px)); }
  .specimen__tile { --swinia-wys: 0.86; --swinia-dol: 0.14; }
}
/* niskie telefony (375×667, 360×640): bez zdania pod nagłówkiem (fakty są zaraz niżej, w karcie firmy) */
/* niski telefon: klasa .ekran-niski liczona ze 100svh w index.html (nie przeskakuje, gdy Safari chowa pasek); bez skryptu @media */
@media (max-width: 767px) {
  .ekran-niski .hero__top > .hero__lead { display: none; }
  .ekran-niski .specimen { padding-top: calc(var(--strip) + var(--margin) + 52vw * 0.462 + 64px); }
  .ekran-niski .specimen__tile, .ekran-niski .specimen__canvas { height: clamp(140px, calc(100svh - 476px), calc(100vw - 40px)); }
}
@media (max-width: 767px) and (max-height: 740px) {
  html:not(.js) .hero__top > .hero__lead { display: none; }
  html:not(.js) .specimen { padding-top: calc(var(--strip) + var(--margin) + 52vw * 0.462 + 64px); }
  html:not(.js) .specimen__tile, html:not(.js) .specimen__canvas { height: clamp(140px, calc(100svh - 476px), calc(100vw - 40px)); }
}

/* tryb wysokiego kontrastu (Windows): pola i zaznaczenia widoczne */
@media (forced-colors: active) {
  .chip span, .seg span, .field, .submit, .button { border: 1px solid CanvasText; } /* taste-skill-ignore: tylko w trybie wysokiego kontrastu, gdzie tła znikają */
  .chip input:checked + span, .seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}