/* ============================================================
   IndoConnect — main.css
   KV: grafitowa czerń / offwhite / ceglany pomarańcz
   Typografia: Montserrat (nagłówki) + Switzer (teksty)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --graphite: #202020;
  --graphite-2: #242424;
  --offwhite: #F3F3F0;
  --offwhite-2: #ECECE7;
  --offwhite-3: #E2E2DB; /* trzeci stopień skali neutralnej (mieszanka offwhite × gray) */
  --paper: #FBFBF9;      /* karty / formularze na jasnym tle */
  --brick: #CD5B31;
  --brick-light: #D97A57;
  --brick-ink: #B04A24; /* dostępny (AA) wariant cegły dla drobnego tekstu na jasnym tle */
  --brick-btn: #BF552E; /* cegła przyciemniona 7% — biały tekst na przycisku osiąga AA (4.61) */
  --error: #B3362F;
  --brown: #421F12; /* z brandbooka; po rezygnacji z kolorowych teł nieużywany w layoucie */
  --gray: #A2A2A2;

  --text: #202020;
  --text-soft: rgba(32, 32, 32, .74);
  --text-faint: rgba(32, 32, 32, .66);
  --line: rgba(32, 32, 32, .16);
  --line-strong: rgba(32, 32, 32, .32);

  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Switzer', 'Segoe UI', sans-serif;

  --container: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --sec: clamp(88px, 11vw, 160px);
  --radius: 0px; /* feedback: bez zaokrągleń */

  --ease: cubic-bezier(.22, .61, .21, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
html:focus-within { scroll-behavior: smooth; }

/* widoczny focus dla klawiatury (WCAG) */
:focus-visible { outline: 2px solid var(--brick-ink); outline-offset: 3px; }
.hero :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible, .site-header:not(.solid) :focus-visible { outline-color: var(--brick-light); }

/* skip link — widoczny tylko przy nawigacji klawiaturą */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  background: var(--graphite); color: var(--offwhite);
  padding: 12px 22px; font-size: .9rem; font-weight: 500;
  transform: translateY(-250%); transition: transform .2s;
}
.skip-link:focus-visible { transform: none; outline-color: var(--brick-light); }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
/* atrybut hidden wygrywa z display komponentu (np. .check { display: grid }) – presety formularza, galeria */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brick); color: #fff; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.12; letter-spacing: -0.005em; }
/* R8: mniejszy H1 na podstronach („jedno słowo w wierszu wygląda karykaturalnie");
   strona główna zachowuje duży rozmiar — patrz .hero .h1 */
.h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }
.h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; }

/* R9: lead w tej samej grubości co tekst (Light 300 rozjeżdżał się z Regular 400) */
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; font-weight: 400; color: var(--text-soft); }
.body-soft { color: var(--text-soft); }
/* R9: w nagłówku sekcji wszystkie akapity w jednym rozmiarze (lead) */
.sec-head p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: var(--text-soft); }
.small { font-size: .875rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 500;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brick-ink);
}
/* sygnet zamiast kreski (feedback) */
.eyebrow::before {
  content: ""; width: 24px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 36 101 51'%3E%3Cpath fill='%23CD5B31' fill-rule='evenodd' clip-rule='evenodd' d='M119.316 40.6474L96.4559 50.1649L72.8994 59.9723L26.7393 40.7543L26.7393 48.5013L69.0644 66.1227L69.0644 82.0969L76.5075 82.0969L76.5075 66.2171L119.316 48.3944L119.316 40.6474Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec); }
.section-tight { padding-block: calc(var(--sec) * .62); }

/* ---------- Powierzchnie sekcji ----------
   Feedback: koniec z kolorowymi tłami. Rytm buduje skala neutralnych
   z brandbooka (offwhite → szarości), ciemna zostaje tylko stopka. */
.surface-alt   { background: var(--offwhite-2); }
.surface-deep  { background: var(--offwhite-3); }
.surface-paper { background: var(--paper); }
/* granica włos zamiast zmiany koloru — dzieli sekcje na tym samym tle */
.surface-line { border-top: 1px solid var(--line); }

/* dyskretna warstwa wizualna: zdjęcie „za mgłą" pod treścią sekcji */
.veil { position: relative; isolation: isolate; overflow: hidden; }
.veil > .veil-media {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.veil > .veil-media img { width: 100%; height: 100%; object-fit: cover; }
.veil > .veil-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--offwhite) 0%, rgba(243,243,240,.9) 45%, var(--offwhite) 100%);
}
.surface-alt.veil > .veil-media::after {
  background: linear-gradient(180deg, var(--offwhite-2) 0%, rgba(236,236,231,.9) 45%, var(--offwhite-2) 100%);
}
/* wariant „szkic": rysunek techniczny jako bardzo delikatny podkład */
.veil-sketch > .veil-media img { opacity: .16; filter: grayscale(1) contrast(1.1); }
.veil-sketch > .veil-media::after { background: none; }

/* stały odstęp eyecatcher → nagłówek, także poza .sec-head (feedback r2) */
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + h1, .eyebrow + h2 { margin-top: 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  padding: 15px 30px; border-radius: 0; border: 1px solid transparent;
  cursor: pointer; transition: all .3s var(--ease); white-space: nowrap;
}
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(.985); }
}
/* strzałki i ikony lucide zamiast encji tekstowych (feedback R4) */
.arr { width: 18px; height: 18px; flex: none; }
.link-arrow .arr { width: 17px; height: 17px; }
.gv-nav .arr { width: 20px; height: 20px; }
.btn .btn-ico { width: 18px; height: 18px; flex: none; }
/* R11 (2026-09-15, druga tura): wszystkie przyciski CTA grafitowe #202020 z białym napisem
   (R10 chciał #A2A2A2 – klient zmienił zdanie tego samego dnia). Wyjątek: stały przycisk
   „Porozmawiajmy" w nagłówku (i jego odpowiednik w menu mobilnym) zostaje ceglany. */
.btn-primary { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.btn-primary:hover { background: #3a3a3a; border-color: #3a3a3a; }
.nav-cta .btn-primary, .mm-foot .btn-primary { background: var(--brick-btn); color: #fff; border-color: var(--brick-btn); }
.nav-cta .btn-primary:hover, .mm-foot .btn-primary:hover { background: #b84e28; border-color: #b84e28; }
.btn-ghost .btn-ico { color: var(--brick); }
.btn-ghost { border-color: var(--line-strong); color: inherit; background: transparent; }
.btn-ghost:hover { border-color: var(--brick); color: var(--brick); }
.on-media .btn-ghost { border-color: rgba(243,243,240,.45); }
.on-media .btn-ghost:hover { border-color: var(--brick-light); color: var(--brick-light); }

/* używane zarówno na <a>, jak i na <button> otwierającym panel formularza —
   dlatego zerujemy domyślne style przycisku */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  color: var(--brick-ink); text-align: left;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0; cursor: pointer;
}
/* animacja na samej strzałce, nie na `gap` rodzica — klasa .reveal nadpisywała
   `transition` linku i hover skakał bez animacji (feedback R5) */
.link-arrow .arr { transition: transform .3s var(--ease); }
.link-arrow:hover .arr { transform: translateX(5px); }
/* w stopce link-arrow siedzi na ciemnym tle */
.site-footer .link-arrow { color: rgba(243, 243, 240, .82); font-size: .95rem; }
.site-footer .link-arrow:hover { color: var(--brick-light); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; max-width: 1520px; margin-inline: auto; padding-inline: var(--pad);
}
.site-header .logo img { height: 30px; width: auto; }
.site-header .logo .logo-dark { display: none; }
.site-header .logo .logo-light { display: block; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.main-nav a.nav-link {
  font-size: .93rem; font-weight: 400; letter-spacing: .01em;
  color: rgba(243, 243, 240, .85); position: relative; padding-block: 12px;
  transition: color .25s;
}
.main-nav a.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--brick-light); transition: width .3s var(--ease);
}
.main-nav a.nav-link:hover::after, .main-nav a.nav-link[aria-current="page"]::after { width: 100%; }
.main-nav a.nav-link:hover { color: #fff; }
.main-nav a.nav-link[aria-current="page"] { color: #fff; }

/* R11: przełącznik języka jako dropdown (inline „PL / EN / CS" zajmował za dużo miejsca) */
.lang-dd { position: relative; font-size: .85rem; font-weight: 500; }
.lang-dd summary {
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 4px 8px 10px; cursor: pointer; letter-spacing: .04em;
  color: rgba(243, 243, 240, .85); transition: color .25s;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { color: #fff; }
.lang-dd summary svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.lang-dd[open] summary svg { transform: rotate(180deg); }
.lang-dd .lang-dd-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 172px;
  background: var(--offwhite); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(32, 32, 32, .14);
  padding: 6px 0;
}
.lang-dd .lang-dd-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 10px 16px; color: var(--text-soft); transition: background .2s, color .2s;
}
.lang-dd .lang-dd-list a:hover { background: var(--offwhite-2); color: var(--text); }
.lang-dd .ld-cur { display: inline-block; }
.lang-dd .ld-code { font-weight: 600; letter-spacing: .06em; }
.lang-dd .ld-name { font-weight: 400; font-size: .82rem; color: var(--text-faint); }
/* w menu mobilnym lista otwiera się do góry, na ciemnym tle */
.mobile-menu .lang-dd summary { padding-left: 0; color: rgba(243, 243, 240, .75); }
.mobile-menu .lang-dd .lang-dd-list {
  top: auto; bottom: calc(100% + 6px); right: auto; left: 0;
  background: var(--graphite-2); border-color: rgba(243, 243, 240, .18); box-shadow: none;
}
.mobile-menu .lang-dd .lang-dd-list a { color: rgba(243, 243, 240, .85); }
.mobile-menu .lang-dd .lang-dd-list a:hover { background: rgba(243, 243, 240, .06); color: #fff; }
.mobile-menu .lang-dd .ld-name { color: rgba(243, 243, 240, .5); }

.nav-cta { margin-left: 6px; }
.nav-cta .btn { padding: 11px 22px; font-size: .88rem; }

/* Header — stan nad hero: gradient + blur dla czytelności (feedback) */
.site-header:not(.solid) {
  background: linear-gradient(180deg, rgba(32, 32, 32, .55) 0%, rgba(32, 32, 32, .26) 60%, rgba(32, 32, 32, 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  /* bez mask-image: maska wygaszała cały nagłówek razem z przyciskiem „Porozmawiajmy",
     którego dolna część robiła się półprzezroczysta („dziwny gradient od dołu", 2026-09-04) */
}
.site-header:not(.solid) .btn-ghost { color: var(--offwhite); border-color: rgba(243, 243, 240, .55); }
.site-header:not(.solid) .btn-ghost:hover { border-color: var(--brick-light); color: var(--brick-light); }

/* Header — solid state (po scrollu / na podstronach jasnych) */
.site-header.solid { background: rgba(243, 243, 240, .92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-header.solid .logo .logo-dark { display: block; }
.site-header.solid .logo .logo-light { display: none; }
.site-header.solid .main-nav a.nav-link { color: var(--text-soft); }
.site-header.solid .main-nav a.nav-link:hover,
.site-header.solid .main-nav a.nav-link[aria-current="page"] { color: var(--text); }
.site-header.solid .main-nav a.nav-link::after { background: var(--brick); }
.site-header.solid .lang-dd summary { color: var(--text-soft); }
.site-header.solid .lang-dd summary:hover { color: var(--text); }
.site-header.solid .btn-ghost { border-color: var(--line-strong); }
.site-header.solid .btn-ghost:hover { border-color: var(--brick); color: var(--brick); }
.site-header.hidden-up { transform: translateY(-100%); }

/* Burger */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; z-index: 130;
}
.burger span { display: block; height: 1.5px; width: 26px; margin-inline: auto; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.site-header .burger { color: var(--offwhite); }
.site-header.solid .burger { color: var(--graphite); }
body.menu-open .site-header .burger { color: var(--offwhite); }
body.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120; background: var(--graphite); color: var(--offwhite);
  display: flex; flex-direction: column; justify-content: center; padding: var(--pad);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a.mnav {
  font-family: var(--font-head); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 500;
  padding-block: 12px; border-bottom: 1px solid rgba(243,243,240,.12);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu a.mnav .idx { font-family: var(--font-body); font-size: .8rem; color: var(--brick-light); }
.mobile-menu .mm-foot { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
/* R10: widoczny przycisk „X" w samym menu – burger z animowanym „X" leżał pod nakładką
   (nagłówek ma własny kontekst warstw, z-index 100 < 120 menu), więc menu nie dało się zamknąć */
.mm-close {
  position: absolute; top: 17px; right: var(--pad); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(243, 243, 240, .22); color: var(--offwhite); cursor: pointer;
  transition: border-color .25s, color .25s;
}
.mm-close:hover { border-color: var(--brick-light); color: var(--brick-light); }
.mm-close svg { width: 22px; height: 22px; }
body.menu-open .burger { visibility: hidden; }

/* ---------- Hero (homepage) ---------- */
/* R8: hero na jasnym tle (grafika „IndoConnect_hero" — kolekcja na szarym studiu).
   Tekst grafitowy, delikatny jasny woal po lewej i u góry podnosi czytelność
   tam, gdzie pod tekstem stoją meble. */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: stretch;
  color: var(--text); overflow: hidden; background: #F5F5F3;
}
/* R11: nowa grafika hero „Hero.jpeg" (szkic restauracji u góry po prawej, karta specyfikacji
   u dołu po lewej, próbki materiałów u dołu po prawej, jasne tło) – kadr lekko ku dołowi */
.hero video, .hero .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 60%;
}
/* R9: bez gradientu od góry — tylko woal z lewej pod tekstem */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(236,236,236,.78) 0%, rgba(236,236,236,.42) 46%, rgba(236,236,236,0) 72%);
}
.hero .hero-content {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column;
}
/* treść hero wyśrodkowana w pionie względem ekranu (feedback R4);
   większy padding u góry równoważy pasek zajmujący dół kadru */
.hero .hero-content > .container {
  width: 100%; /* w kolumnie flex poziome auto-marginesy zwężały blok do treści i centrowały go (R5) */
  margin-block: auto;
  padding-block: clamp(118px, 14vh, 172px) clamp(48px, 6vw, 92px);
}
/* R8: blok hero wyrównany do treści sekcji poniżej (kontener 1280) — R5 równał go do logo,
   nowy feedback wskazał sekcję poniżej; decyzja do potwierdzenia, zmiana = jedna linia */
/* R13: hasło 64 → 80 px, lead 20 → 24 px; R14: hasło 96 px; R15 (2026-09-22): hasło 112 px, lead 32 px
   na desktopie (mobile bez zmian – nadpisane w media ≤560) */
.hero .h1 { font-size: clamp(2.2rem, 7.8vw, 7rem); line-height: 1.06; }
.hero h1 { max-width: 17ch; }
.hero .lead { color: var(--text-soft); max-width: 50ch; margin-top: 28px; font-size: clamp(1.15rem, 2.25vw, 2rem); line-height: 1.5; }
.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* pasek pod hero („Produkcja · Dostawa" …) usunięty w R13 (2026-09-16) */

/* nagłówek nad jasnym hero (R8): przezroczysty, ale z ciemnym logo i tekstem —
   klasę .on-light dodaje main.js, gdy .hero ma klasę .hero-light.
   R9: bez ciemnego gradientu i rozmycia od góry (zostały po wideo-hero; robiły
   „przyciemnienie na samej górze" i dziwny gradient pod przyciskiem „Porozmawiajmy") */
.site-header.on-light:not(.solid) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.on-light .logo .logo-dark { display: block; }
.site-header.on-light .logo .logo-light { display: none; }
.site-header.on-light .main-nav a.nav-link { color: var(--text-soft); }
.site-header.on-light .main-nav a.nav-link:hover,
.site-header.on-light .main-nav a.nav-link[aria-current="page"] { color: var(--text); }
.site-header.on-light .main-nav a.nav-link::after { background: var(--brick); }
.site-header.on-light .lang-dd summary { color: var(--text-soft); }
.site-header.on-light .lang-dd summary:hover { color: var(--text); }
.site-header.on-light .burger { color: var(--text); }
.site-header.on-light :focus-visible { outline-color: var(--brick-ink); }

/* ---------- Wing media (motyw KV: ukośne cięcie + ceglana linia) ---------- */
.wing-media { position: relative; }
.wing-media img { width: 100%; height: 100%; object-fit: cover; }
/* rezerwacja miejsca pod obrazy (CLS) */
.section-tight .wing-media img { aspect-ratio: 16 / 9; }
.stack-media .wing-media img { aspect-ratio: 1 / 1; } /* R9: niższe zdjęcie, sekcja „Surowiec" bez sztucznego wydłużania */
.wing-media svg.wing-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wing-media svg.wing-lines * { fill: none; stroke: var(--brick); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.wing-a img { clip-path: polygon(0 16%, 30% 27%, 100% 2%, 100% 100%, 0 100%); }
.wing-b img { clip-path: polygon(0 2%, 70% 27%, 100% 16%, 100% 100%, 0 100%); }
/* zdjęcie w cięciu KV jako kolumna .split (homepage „Tek") – stały kadr 4:3 */
.split .wing-media img { aspect-ratio: 4 / 3; }

/* ---------- Ikony filarów (lucide) ---------- */
.pillar-icon { width: 44px; height: 44px; color: var(--brick); stroke-width: 1.1; }

/* ---------- Pillars (Sourcing / Produkcja / Dostawa) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.pillar {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 40px); background: transparent;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
  display: flex; flex-direction: column; gap: 22px; min-height: 340px;
}
.pillar:hover { border-color: var(--brick); transform: translateY(-4px); }
.pillar h3 { margin-top: auto; }
/* R10: teksty filarów mają różną długość – nagłówki wyrównane w jednej linii dzięki subgridowi
   (ikona | nagłówek | tekst w wspólnych wierszach); bez wsparcia zostaje wariant flex powyżej */
@supports (grid-template-rows: subgrid) {
  .pillars { grid-template-rows: 1fr auto auto; }
  .pillar { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 22px; align-items: start; }
  .pillar h3 { margin-top: 0; align-self: end; }
}
.pillar p { color: var(--text-soft); } /* R9: 1rem jak reszta tekstów w sekcji */

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split .col-text > * + * { margin-top: 22px; }
.split .col-text .eyebrow { margin-bottom: 12px; }
.split .h2 { max-width: 18ch; }

/* ---------- Split — wariant naprzemienny ---------- */
.split.flip .col-text { order: 2; }
.split.flip .col-media { order: 1; }
.split .col-media { border-radius: var(--radius); overflow: hidden; }
.split .col-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split .col-media.tall img { aspect-ratio: 3 / 4; }
/* kadr od górnej krawędzi zdjęcia (R6: „Marka produktu" — blat ma być widoczny) */
/* zdjęcie w naturalnej proporcji, bez przycinania do 4:3 (R9: przycięty kolaż na „O indoconnect") */
.split .col-media.natural img { aspect-ratio: auto; height: auto; }

/* ---------- Kolaż zdjęć (sekcja materiał) ---------- */

/* ---------- Galeria z podglądem (O IndoConnect) ---------- */
.gv-main { position: relative; overflow: hidden; }
.gv-main img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.gv-main img.gv-fade { animation: gvFade .45s var(--ease); }
@keyframes gvFade { from { opacity: 0; } }
.gv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: rgba(32, 32, 32, .55); color: var(--offwhite); border: 0; cursor: pointer;
  font-size: 1.25rem; line-height: 1; transition: background .25s;
}
.gv-nav:hover { background: var(--brick); }
.gv-prev { left: 0; }
.gv-next { right: 0; }
.gv-counter {
  position: absolute; right: 14px; bottom: 12px;
  background: rgba(32, 32, 32, .55); color: var(--offwhite);
  padding: 5px 14px; font-size: .8rem; letter-spacing: .1em;
}
.gv-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(12px, 1.6vw, 18px); }
.gv-thumb {
  padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
  opacity: .55; transition: opacity .25s, border-color .25s;
}
.gv-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gv-thumb:hover { opacity: .85; }
.gv-thumb.is-active { opacity: 1; border-color: var(--brick); }
@media (max-width: 820px) {
  .gv-thumbs { grid-template-columns: repeat(3, 1fr); }
  .gv-main img { aspect-ratio: 4 / 3; }
  .gv-nav { width: 44px; height: 44px; }
}

/* ---------- Para zdjęć (warianty materiałów) ---------- */

/* ---------- Karty zakresu / czynników ---------- */

.factor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.factor {
  border-top: 1px solid var(--line-strong); padding-top: 20px;
}
.factor h3 { font-size: 1.08rem; font-family: var(--font-body); font-weight: 600; }
.factor p { color: var(--text-soft); margin-top: 8px; }

/* ---------- Segmenty (homepage „Zastosowania") — R9: ikony w ramce zamiast zdjęć ---------- */

/* ---------- Osoby do kontaktu (Kontakt → „Z kim będziesz rozmawiać") ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.person { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.person .p-photo { width: 96px; aspect-ratio: 1; margin-bottom: 18px; background: var(--offwhite-3); }
.person .p-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; }
.person .p-role { color: var(--text-soft); margin-top: 10px; }
.person .p-tel { margin-top: 16px; }
.person .p-tel a { border-bottom: 1px solid var(--line-strong); transition: color .25s, border-color .25s; }
.person .p-tel a:hover { color: var(--brick-ink); border-color: var(--brick); }
.person .p-mail { margin-top: 8px; font-size: .95rem; }
.person .p-mail a { border-bottom: 1px solid var(--line-strong); transition: color .25s, border-color .25s; }
.person .p-mail a:hover { color: var(--brick-ink); border-color: var(--brick); }

/* ---------- Risk list (Jak zmniejszamy Twoje ryzyko) — bez numeracji (R4) ---------- */
.risk-item { padding-block: 22px; border-bottom: 1px solid var(--line); }
.risk-item h3 { font-size: 1.05rem; font-weight: 600; font-family: var(--font-body); }
.risk-item p { color: var(--text-soft); margin-top: 6px; }
.risk-item p + p { margin-top: 10px; }
/* R10: „Jak zmniejszamy Twoje ryzyko" i „Dopasowanie" – lista po lewej, zdjęcie klienta po prawej */
.risk-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.risk-split .rs-media img { width: 100%; height: auto; }
.risk-list .risk-item:first-child { border-top: 1px solid var(--line); }
.factor-list .factor + .factor { margin-top: 26px; }
@media (max-width: 900px) { .risk-split { grid-template-columns: 1fr; } }

/* ---------- Zespół — przełącznik osób (R8: interaktywnie + placeholdery portretów) ----------
   Lewa kolumna = lista osób (tablist), prawa = biogram wybranej osoby z miejscem na zdjęcie.
   Placeholder = ikona lucide „user" w kwadracie (--radius: 0 obowiązuje także tutaj). */
.team-switch {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
}
.ts-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ts-tab {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-items: center;
  text-align: left; padding: 18px 12px 18px 18px;
  border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  background: none; cursor: pointer; color: var(--text-soft);
  transition: color .25s, border-color .25s, background .25s;
}
.ts-tab:hover { color: var(--text); }
.ts-tab[aria-selected="true"] { color: var(--text); border-left-color: var(--brick); background: rgba(32, 32, 32, .035); }
.ts-avatar {
  grid-row: 1 / span 2; width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--offwhite-3); color: var(--text-faint); transition: background .25s, color .25s;
}
.ts-avatar svg { width: 26px; height: 26px; stroke-width: 1.1; }
/* R13: zdjęcia osób (placeholdery klienta) – kadr cover w kwadracie zakładki i w portrecie 3:4 */
.ts-avatar img, .ts-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ts-tab[aria-selected="true"] .ts-avatar { background: var(--brick); color: #fff; }
.ts-name { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.ts-role { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brick-ink); margin-top: 5px; line-height: 1.5; }
.ts-panels { min-width: 0; }
.ts-panel {
  display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px); align-items: start;
}
.ts-panel[hidden] { display: none; }
.ts-portrait {
  aspect-ratio: 1 / 1; /* R14: zdjęcia osób 1:1 wszędzie (było 3:4) */
  display: grid; place-items: center;
  background: var(--offwhite-3); color: rgba(32, 32, 32, .26);
}
.ts-portrait svg { width: 40%; height: 40%; stroke-width: .9; }
.ts-bio > * + * { margin-top: 16px; }
.ts-bio p { color: var(--text-soft); }
.ts-bio .tm-name { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.ts-bio .tm-role {
  margin-top: 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brick-ink); line-height: 1.7;
}
@media (prefers-reduced-motion: no-preference) {
  .ts-panel:not([hidden]) { animation: gvFade .45s var(--ease); }
}
@media (max-width: 900px) {
  /* R12: na mobile akordeon – biogram bezpośrednio pod wybraną osobą, bez placeholdera portretu
     (lista i panele stają się jedną kolumną, kolejność ustawia `order`) */
  .team-switch { grid-template-columns: 1fr; gap: 0; }
  .ts-list, .ts-panels { display: contents; }
  .ts-tab:nth-child(1) { order: 1; } .ts-panel:nth-child(1) { order: 2; }
  .ts-tab:nth-child(2) { order: 3; } .ts-panel:nth-child(2) { order: 4; }
  .ts-tab:nth-child(3) { order: 5; } .ts-panel:nth-child(3) { order: 6; }
  .ts-tab:nth-child(4) { order: 7; } .ts-panel:nth-child(4) { order: 8; }
  .ts-tab:first-child { border-top: 1px solid var(--line); }
  .ts-tab[aria-selected="true"] { border-bottom-color: transparent; }
  .ts-panel {
    grid-template-columns: 1fr; padding: 4px 18px 28px; border-bottom: 1px solid var(--line);
    background: rgba(32, 32, 32, .035); box-shadow: inset 2px 0 0 var(--brick);
  }
  .ts-portrait { display: none; }
  .ts-bio .tm-name, .ts-bio .tm-role { display: none; } /* nazwisko i rola są już na zakładce tuż wyżej */
  .ts-bio > * + * { margin-top: 14px; }
}

/* ---------- Proces — akordeon (dropdowny) ---------- */
.proc-list { display: flex; flex-direction: column; }
details.proc-item { border-top: 1px solid var(--line); }
details.proc-item:last-child { border-bottom: 1px solid var(--line); }
details.proc-item summary {
  display: grid; grid-template-columns: 120px 1fr auto;
  gap: clamp(20px, 3vw, 56px); align-items: center;
  padding-block: clamp(22px, 2.6vw, 34px);
  cursor: pointer; list-style: none;
}
.proc-item .p-num { font-family: var(--font-head); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 400; color: var(--brick); line-height: 1; }
.proc-item h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; font-family: var(--font-head); transition: color .25s; }
details.proc-item summary:hover h3 { color: var(--brick-ink); }
details.proc-item summary::after {
  content: ""; width: 11px; height: 11px; margin-right: 6px; justify-self: end;
  border-right: 1.5px solid var(--brick-ink); border-bottom: 1.5px solid var(--brick-ink);
  transform: rotate(45deg); transform-origin: 66% 66%;
  transition: transform .3s var(--ease);
}
details.proc-item[open] summary::after { transform: rotate(225deg); }
.proc-item .p-body {
  color: var(--text-soft); max-width: 72ch;
  padding: 0 0 clamp(26px, 3vw, 40px) calc(120px + clamp(20px, 3vw, 56px));
}
@media (prefers-reduced-motion: no-preference) {
  details.proc-item[open] .p-body { animation: accOpen .35s var(--ease); }
}
@keyframes accOpen { from { opacity: 0; transform: translateY(-6px); } }
/* R8: proces ma „żyć" — otwarty etap dostaje ceglaną krawędź i większy numer,
   numery zamkniętych etapów są wyciszone; zdjęcia etapów w cięciu KV (.wing-media) */
details.proc-item { transition: box-shadow .3s var(--ease); }
details.proc-item[open] { box-shadow: inset 2px 0 0 var(--brick); }
details.proc-item summary { padding-left: 16px; }
details.proc-item summary::-webkit-details-marker { display: none; }
details.proc-item .p-body { padding-left: calc(16px + 120px + clamp(20px, 3vw, 56px)); }
details.proc-item:not([open]) .p-num { color: var(--text-faint); }
.proc-item .p-num { transition: color .3s var(--ease); }
.p-body-grid .wing-media { display: block; }
.p-body-grid figure img { aspect-ratio: 4 / 3; }
/* R10: 8 etapów w 3 blokach (01–04 przygotowanie zamówienia · 05–07 produkcja, kontrola i zgodność · 08 logistyka) */
.proc-group {
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(20px, 3vw, 56px); align-items: baseline;
  padding: clamp(40px, 5vw, 64px) 16px 14px;
}
.proc-group.first { padding-top: 0; }
.proc-group .pg-range { font-family: var(--font-head); font-size: .95rem; letter-spacing: .06em; color: var(--brick-ink); }
.proc-group .pg-title { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text); }
@media (max-width: 1080px) { .proc-group { grid-template-columns: 72px 1fr; } }
@media (max-width: 560px) { .proc-group { grid-template-columns: 1fr; gap: 6px; padding-inline: 0; } }

/* ---------- Certyfikaty ---------- */

/* ---------- Formularze ---------- */
/* kolumna z obrazem dosuniętym do dołu (feedback: lookbook) */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 44px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 26px; }
.form-grid .wide { grid-column: 1 / -1; }
.field label { display: block; font-size: .82rem; font-weight: 500; letter-spacing: .04em; margin-bottom: 8px; color: var(--text-soft); }
.field .req { color: var(--brick-ink); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 1px solid var(--line-strong); border-radius: 0;
  padding: 13px 16px; font-size: .95rem; transition: border-color .25s;
}
/* select: własny chevron z oddechem od krawędzi (feedback) */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23202020' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brick); }
.field input.error, .field select.error { border-color: var(--error); }
.error-msg { font-size: .8rem; color: var(--error); margin-top: 6px; }
.field textarea { min-height: 110px; resize: vertical; }
.field input[type="file"] { padding: 9px 12px; font-size: .82rem; }
.field input[type="file"]::file-selector-button {
  font: inherit; font-size: .82rem; font-weight: 500; margin-right: 12px;
  padding: 6px 16px; border-radius: 0; border: 1px solid var(--line-strong);
  background: transparent; color: inherit; cursor: pointer; transition: border-color .25s;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--brick); }
.field .hint { font-size: .78rem; color: var(--text-faint); margin-top: 6px; }
/* przycisk na całą szerokość formularza, notka pod nim bez łamania (feedback) */
.form-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.form-actions .btn { width: 100%; }
.form-note { font-size: .8rem; color: var(--text-faint); text-align: center; }
.form-success { display: none; text-align: left; padding-block: 20px; }
.form-success .ok-mark { width: 52px; height: 52px; border: 1.5px solid var(--brick); display: flex; align-items: center; justify-content: center; color: var(--brick); font-size: 1.4rem; margin-bottom: 18px; }
form.submitted .form-body { display: none; }
form.submitted .form-success { display: block; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 80px); align-items: center; }
.cta-band h2 { max-width: 16ch; }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--graphite); color: var(--offwhite); }
.site-footer a:hover { color: var(--brick-light); }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 80px);
  padding-block: clamp(48px, 6vw, 80px);
}
.footer-top .f-brand { display: flex; flex-direction: column; }
.footer-top .f-brand img { height: 30px; }
.footer-top .f-brand p { margin-top: 20px; font-size: .95rem; color: rgba(243,243,240,.6); max-width: 34ch; }
.footer-col h4 { font-family: var(--font-body); font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,243,240,.5); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.footer-col a { color: rgba(243,243,240,.82); transition: color .25s; }
.footer-bottom {
  border-top: 1px solid rgba(243,243,240,.14); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: .82rem; color: rgba(243,243,240,.5);
}

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mt-4 { margin-top: clamp(40px, 6vw, 72px); } .mt-5 { margin-top: clamp(56px, 8vw, 104px); }
.sec-head { max-width: 780px; }
.sec-head .h2 { margin-top: 28px; }
.sec-head .lead { margin-top: 20px; }
/* nagłówek sekcji z linkiem po prawej (feedback) */
/* R9: wyróżnik w tym samym rozmiarze i kroju co tekst — różni go tylko ceglana krawędź */
.note-box {
  border-left: 2px solid var(--brick); padding: 6px 0 6px 24px;
  color: var(--text-soft);
}

/* ============================================================
   v2 — komponenty po feedbacku „wygląd strony"
   ============================================================ */

/* ---------- Hero podstron (nowy układ grida) ----------
   Zamiast zdjęcia za pionem Y na 48%: tekst na offwhite w lewej kolumnie,
   zdjęcie w prawej wychodzące poza krawędź okna, linia KV jako narożnik
   łączący blok tekstu z kolumną zdjęcia. */
/* R5: hero na tle --offwhite-2 (odcięcie od treści) i w tym samym pudle co pasek
   nagłówka (max 1520 + --pad) — tekst równa się do logo, zdjęcie do przycisku CTA */
.page-hero-kv {
  position: relative; overflow: hidden;
  padding-top: clamp(112px, 13vh, 160px);
  background: var(--offwhite-2);
}
.page-hero-kv .phk-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  column-gap: clamp(32px, 5vw, 76px);
  align-items: end;
  max-width: 1520px; margin-inline: auto;
  padding-inline: var(--pad);
}
.phk-text {
  position: relative;
  padding-block: clamp(28px, 5vh, 64px) clamp(56px, 8vh, 112px); /* R9: niższe hero podstron */
}
.phk-text .h1 { max-width: 22ch; }
.phk-text .lead { max-width: 46ch; margin-top: clamp(22px, 3vh, 32px); }
.phk-text .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vh, 40px); }
.phk-media { position: relative; align-self: stretch; min-height: clamp(300px, 40vh, 480px); }
.phk-media img {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
}
/* linia KV obrysowuje zdjęcie: lewa krawędź + ukos u góry (feedback R4 —
   dawna pozioma kreska pod tekstem została usunięta) */
.phk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phk-lines * { fill: none; stroke: var(--brick); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Hero minimalny (Kontakt): bez zdjęcia, mniejszy nagłówek — formularz ma być
   widoczny bez długiego scrollowania (feedback R5) */
/* R7: eyecatcher + H1 po lewej, lead po prawej (nad kartą formularza) —
   ta sama siatka co .contact-cols niżej, sekcja o ~80 px niższa */
@media (max-width: 900px) { .page-hero-min .phm-lead { margin-top: clamp(18px, 2.6vh, 26px); padding-bottom: 0; } }
@media (max-width: 900px) {
  .page-hero-kv { padding-top: 120px; }
  .page-hero-kv .phk-inner {
    grid-template-columns: 1fr; padding-inline: var(--pad); max-width: var(--container);
  }
  .phk-text { padding-block: 8px 40px; }
  .phk-media { min-height: 0; aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--pad)); }
  /* zdjęcie schodzi do obu krawędzi ekranu — pionowa linia po lewej zostaje ukryta */
  .phk-lines line { display: none; }
}

/* ---------- Panel formularza (slide-in z prawej + blur tła) ---------- */
.form-panel {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden; pointer-events: none;
}
.form-panel[data-open] { visibility: visible; pointer-events: auto; }
.form-panel .fp-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(32, 32, 32, .42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.form-panel[data-open] .fp-backdrop { opacity: 1; }
.form-panel .fp-sheet {
  position: absolute; inset-block: 0; right: 0;
  width: min(620px, 100%); max-width: 100%;
  background: var(--offwhite); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .48s var(--ease);
  box-shadow: -24px 0 60px rgba(32, 32, 32, .18);
}
.form-panel[data-open] .fp-sheet { transform: none; }
.fp-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px) 18px;
  background: var(--offwhite);
  border-bottom: 1px solid var(--line);
}
.fp-head .h3 { max-width: 22ch; }
.fp-close {
  flex: none; width: 44px; height: 44px; margin: -8px -10px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-soft); font-size: 1.1rem; line-height: 1;
  transition: color .25s, border-color .25s;
}
.fp-close:hover { color: var(--brick); border-color: var(--line); }
.fp-close svg { width: 20px; height: 20px; }
.fp-body { padding: clamp(22px, 3vw, 34px) clamp(24px, 3.4vw, 44px) clamp(32px, 4vw, 52px); }
.fp-body .form-card { background: none; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .form-panel .fp-sheet, .form-panel .fp-backdrop { transition: none; }
}
body.panel-open { overflow: hidden; }

/* ---------- Progressive disclosure w formularzu ---------- */
.form-more[hidden] { display: none; }
.form-consent { margin-top: 24px; display: grid; gap: 12px; }
.check {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: .86rem; line-height: 1.6; color: var(--text-soft); cursor: pointer;
}
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  display: grid; place-content: center; transition: border-color .25s, background .25s;
}
.check input[type="checkbox"]::before {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .18s var(--ease);
}
.check input[type="checkbox"]:checked { background: var(--brick); border-color: var(--brick); }
.check input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.check input[type="checkbox"].error { border-color: var(--error); }
.check a { color: var(--brick-ink); text-decoration: underline; text-underline-offset: 3px; }
.check .req { color: var(--brick-ink); }

/* ---------- Proces: akordeon ze zdjęciem (Jak działamy) ---------- */
.proc-item .p-body { max-width: none; }
.p-body-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3.4vw, 52px); align-items: start;
}
.p-body-grid .p-text { max-width: 62ch; }
.p-body-grid .p-text > * + * { margin-top: 16px; }
.p-body-grid figure { position: relative; }
.p-body-grid figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-body-grid figcaption {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 10px;
}
.p-list { margin-top: 16px; display: grid; gap: 9px; }
.p-list li { position: relative; padding-left: 22px; }
/* myślniki list: 2 px i pozycja w pełnych pikselach — 1,5 px na ułamkowej wysokości
   rasteryzowało się raz cieniej, raz grubiej (feedback R8) */
.p-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 9px; height: 2px; background: var(--brick);
}
@media (max-width: 900px) { .p-body-grid { grid-template-columns: 1fr; } }

/* ---------- Timeline (Ile trwa realizacja) ---------- */
.timeline { display: grid; gap: 0; }
.tl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px; align-items: baseline;
  padding-block: 20px; border-top: 1px solid var(--line);
}
.tl-row:last-of-type { border-bottom: 1px solid var(--line); }
.tl-row h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }
.tl-row .tl-when {
  font-family: var(--font-head); font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--brick-ink); white-space: nowrap;
}
.tl-total {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
  justify-content: space-between; /* suma trzyma się prawej, tak jak widełki w wierszach */
  margin-top: 28px; padding: 22px 26px; background: var(--offwhite-3);
  border-left: 2px solid var(--brick);
}
.tl-total .tl-when { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--text); }

/* ---------- Warianty (Współpraca) ---------- */
.variants { display: grid; gap: clamp(28px, 4vw, 56px); }
.variant {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line);
}
/* zdjęcia konsekwentnie w lewej, węższej kolumnie — stały rytm listy wariantów */
.variant .v-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.variant .v-text > * + * { margin-top: 18px; }
.variant .v-text .h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-family: var(--font-head); font-weight: 500; }
.variant .v-text .eyebrow + .h3 { margin-top: 22px; }
@media (max-width: 900px) {
  .variant { grid-template-columns: 1fr; }
}

/* ---------- Lookbook: samo pobranie (bez bramki formularza) ---------- */
.download-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.download-band .db-text > * + * { margin-top: 22px; }
.dl-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }
@media (max-width: 900px) { .download-band { grid-template-columns: 1fr; } }

/* ---------- Blok „mniej ryzyka" ---------- */
.risk-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.risk-band .rb-text > * + * { margin-top: 22px; }
/* zdjęcie klienta „bezpieczna realizacja 1" jest pionowe (9:16) – stały kadr 4:5 */
.risk-band .rb-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* lista z myślnikami — po R9 już nie na stronie głównej, ale nadal na „Współpracy" (dobór modelu) */
.risk-points { display: grid; gap: 14px; margin-top: 30px; }
.risk-points li { position: relative; padding-left: 26px; color: var(--text-soft); }
.risk-points li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 12px; height: 2px; background: var(--brick);
}
@media (max-width: 900px) { .risk-band { grid-template-columns: 1fr; } }

/* ---------- Wstawka partnerska (Otazen) ---------- */
.partner-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 64px); align-items: stretch; /* R11: kolumna tekstu na wysokość zdjęcia */
  padding: clamp(30px, 4vw, 56px);
  background: var(--paper); border: 1px solid var(--line);
}
/* R11: logo i tekst do góry, przyciski/link do dołu (space-between) */
.partner-card .pc-text { display: flex; flex-direction: column; }
.partner-card .pc-text > * + * { margin-top: 18px; }
.partner-card .pc-text > :last-child { margin-top: auto; padding-top: 18px; }
.partner-card .pc-media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
/* R10: logo Otazen (grafit na przezroczystym tle) zamiast nazwy tekstowej, zdjęcie pionowe od klienta */
.partner-card .pc-brand { line-height: 0; }
.otazen-logo { height: 40px; width: auto; max-width: 100%; display: block; }
/* R12: jako bezpośrednie dziecko kolumny flex logo rozciągało się na szerokość (align-items: stretch) */
.partner-card .pc-text > .otazen-logo { align-self: flex-start; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.partner-card .pc-media.portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .partner-card { grid-template-columns: 1fr; } }

/* ---------- Strony prawne / proza ---------- */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: clamp(38px, 5vw, 56px); }
.legal h3 { font-size: 1.08rem; font-family: var(--font-body); font-weight: 600; margin-top: 28px; }
.legal p, .legal li { color: var(--text-soft); }
.legal p + p { margin-top: 16px; }
.legal h2 + p, .legal h3 + p { margin-top: 14px; }
.legal ul { margin-top: 14px; display: grid; gap: 9px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 9px; height: 2px; background: var(--brick);
}
.legal .updated { font-size: .85rem; color: var(--text-faint); }
.legal a { color: var(--brick-ink); text-decoration: underline; text-underline-offset: 3px; }
.toc { margin-top: 34px; padding: 24px 26px; background: var(--offwhite-2); display: grid; gap: 10px; }
.toc a { color: var(--text); text-decoration: none; font-size: .95rem; }
.toc a:hover { color: var(--brick-ink); }

/* ---------- Kontakt ---------- */
.contact-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; } }
/* R10: Kontakt bez stałego formularza – dane firmy + karta „Zostaw kontakt do siebie" (panel, preset callback) */
.company-data { font-style: normal; margin-top: 18px; color: var(--text-soft); line-height: 1.85; }
.company-data a { border-bottom: 1px solid var(--line-strong); transition: color .25s, border-color .25s; }
.company-data a:hover { color: var(--brick-ink); border-color: var(--brick); }
.callback-card {
  background: var(--paper); border: 1px solid var(--line); padding: clamp(26px, 3.4vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.callback-card .eyebrow + .h3 { margin-top: 6px; }

/* ---------- Stopka: social + rząd prawny ---------- */
/* trzy kolumny — kolumna „Informacje" usunięta na życzenie klienta (R4);
   ostatnia kolumna na `auto`, żeby dane kontaktowe dochodziły do prawej krawędzi */
.footer-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
.footer-col .f-addr { color: rgba(243, 243, 240, .82); line-height: 1.65; } /* R5: kolor jak reszta wpisów */
.f-social { display: flex; gap: 12px; margin-top: auto; padding-top: 24px; } /* R5: do dolnej krawędzi kolumny */
/* <span> = kanał bez adresu (do uzupełnienia), <a> = kanał podlinkowany */
.f-social a, .f-social span {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243, 243, 240, .22); color: rgba(243, 243, 240, .82);
  transition: border-color .25s, color .25s, background .25s;
}
.f-social span { opacity: .5; }
.f-social a:hover { border-color: var(--brick); color: #fff; background: rgba(205, 91, 49, .18); }
.f-social svg { width: 18px; height: 18px; }
.footer-bottom .fb-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.footer-bottom .fb-legal a { color: rgba(243, 243, 240, .68); transition: color .25s; }
.footer-bottom .fb-legal a:hover { color: var(--brick-light); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .main-nav .nav-link, .main-nav .nav-cta { display: none; }
  .main-nav .lang-dd { margin-right: 4px; }
  .burger { display: flex; }
  details.proc-item summary { grid-template-columns: 72px 1fr auto; }
  /* R12: selektor musi wygrać z `details.proc-item .p-body` (R8) – wcześniej padding 120 px zostawał na mobile */
  details.proc-item .p-body { padding-left: calc(16px + 72px + clamp(20px, 3vw, 56px)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cta-band .inner { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  /* R12: kafelki filarów i kryteria jeden pod drugim (reguła zjedzona przy czyszczeniu CSS w sesji 5
     razem z martwym `.segments`); subgrid na jednej kolumnie wyłączony */
  .pillars, .factor-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .pillar { grid-template-rows: auto auto auto; grid-row: auto; }
  .split.flip .col-text { order: 1; }
  .split.flip .col-media { order: 2; }
  .people { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  .pillar h3 { margin-top: 8px; }
}
@media (max-width: 560px) {
  .people { grid-template-columns: 1fr; }
  /* R12: treść rozwiniętego etapu wyrównana do numeru, nie wciśnięta w prawą połowę;
     odstęp od ceglanej krawędzi otwartego etapu 40 px (było 16 – uwaga Patryka) */
  details.proc-item summary { padding-left: 40px; }
  details.proc-item .p-body { padding-left: 40px; padding-right: 16px; }
  .footer-top { grid-template-columns: 1fr; }
  /* R11: hero mobilne – nagłówek i podpis wyżej, przycisk przy dolnej krawędzi (nad paskiem),
     teksty delikatnie większe, zdjęcie przesunięte tak, by meble były w kadrze */
  /* R12 (makieta klienta): tekst i przycisk u góry, pod nimi osobna grafika mobilna
     (`hero-mobile.jpg` przez <picture>), pasek przy dolnej krawędzi */
  .hero .hero-content > .container {
    flex: 1; display: flex; flex-direction: column;
    margin-block: 0; padding-block: 148px 28px; /* nagłówek i podpis niżej (uwaga Patryka po R12) */
  }
  .hero .hero-ctas { margin-top: 28px; }
  .hero .hero-ctas .btn { width: auto; }
  .hero .h1 { font-size: clamp(2.5rem, 11.5vw, 3rem); }
  .hero .lead { font-size: 1.15rem; margin-top: 20px; max-width: 30ch; }
  /* kadr grafiki mobilnej równo z lewą krawędzią ekranu – jak na makiecie klienta */
  .hero .hero-img { object-position: 0% 50%; }
  .hero::after { background: linear-gradient(180deg, rgba(245,245,243,.55) 0%, rgba(245,245,243,.25) 40%, rgba(245,245,243,0) 58%); }
}