/* ==========================================================================
   PROJEKT 2 — "MASZYNOWNIA"
   Zupełnie inna filozofia niż Projekt 1: brak klasycznego nagłówka (boczna
   nawigacja), hero pełnoekranowy, usługi jako liniowa oś z wielkimi numerami,
   galeria edge-to-edge. Baza grafitowa, akcent pomarańczowy ze znaku MOMA.
   ========================================================================== */
.p2 {
  --k: #0C0F12; --k2: #14191E; --k3: #1D242B;
  /* --w3 bylo #6B7883: 3,46-4,25:1 na tlach projektu, ponizej normy 4,5.
     Dotyczylo 27 elementow (nawigacja boczna, opisy uslug, kroki, stopka). */
  --w1: #FFFFFF; --w2: #A8B3BC; --w3: #8B97A3;
  --acc: #EF7F1A; --acc2: #FF9A42; --cold: #00A0E3;
  --line: rgba(255,255,255,.1);
  --gut: clamp(20px, 5vw, 72px);
  --sec: clamp(64px, 9vw, 140px);
  --nav: 84px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--k); color: var(--w2);
}
.p2 *, .p2 *::before, .p2 *::after { box-sizing: border-box; }
.p2 img { max-inline-size: 100%; display: block; }
.p2 a { text-decoration: none; }
.p2 :where(a:not([class])) { color: inherit; }  /* :where() zeruje specyficznosc — [class] w :not() podbijal ja do (0,2,1)
   i regula biла klasy komponentow (box Uslugi mial ciemny tekst na granacie) */
.p2 :where(h1, h2, h3) { margin: 0; color: var(--w1); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.p2 :where(p, ul, ol, figure) { margin: 0; }
.p2 :where(p) { line-height: 1.65; text-wrap: pretty; }
.p2 :where([class^="p2-"]:is(section), section[class*=" p2-"]) { padding-block: var(--sec); }
.p2 .in { inline-size: 100%; padding-inline: var(--gut); }
@media (min-width: 1100px) { .p2 .in { padding-inline-start: calc(var(--nav) + var(--gut)); } }

/* ---------- boczna nawigacja (zamiast nagłówka) ---------- */
.p2-side { display: none; }
@media (min-width: 1100px) {
  .p2-side {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
    position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: var(--nav);
    padding-block: 26px; background: var(--k2); border-inline-end: 1px solid var(--line); z-index: 90;
  }
}
.p2-side__logo img { inline-size: 46px; block-size: auto; }
.p2-side nav { display: flex; flex-direction: column; gap: 4px; margin-block: auto; }
.p2-side nav a {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--w3); transition: color .2s ease;
}
.p2-side nav a:hover, .p2-side nav a[aria-current] { color: var(--acc); }
.p2-side__tel {
  inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--w1); transition: .2s;
}
.p2-side__tel:hover { border-color: var(--acc); color: var(--acc); }
.p2-side__tel svg { inline-size: 19px; block-size: 19px; }

/* pasek mobilny */
.p2-bar {
  position: sticky; inset-block-start: 0; z-index: 95;
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gut);
  block-size: 68px; background: rgba(12,15,18,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 1100px) { .p2-bar { display: none; } }
.p2-bar__logo img { block-size: 38px; inline-size: auto; }
.p2-bar__tel { margin-inline-start: auto; inline-size: 46px; block-size: 46px; display: grid;
  place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--w1); }
.p2-bar__tel svg { inline-size: 19px; block-size: 19px; }
.p2-burger { inline-size: 46px; block-size: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.p2-burger span { inline-size: 24px; block-size: 2px; background: var(--w1); transition: .2s; }
body.mm-menu-open .p2-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.mm-menu-open .p2-burger span:nth-child(2) { opacity: 0; }
body.mm-menu-open .p2-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero pełnoekranowy ---------- */
.p2-hero { position: relative; min-block-size: 92svh; display: flex; align-items: flex-end;
  padding-block: 0 clamp(40px, 7vw, 90px); overflow: hidden; }
.p2-hero__bg { position: absolute; inset: 0; }
.p2-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.p2-hero::after { content: ""; position: absolute; inset: 0;
  /* przyciemnienie mocniejsze w pasie, gdzie lezy tresc — eyebrow mial 3,39:1
     na jasnym fragmencie maszynowni. Dol i gora bez zmian, zdjecie nadal czytelne. */
  background: linear-gradient(180deg, rgba(12,15,18,.80) 0%, rgba(12,15,18,.62) 34%,
    rgba(12,15,18,.58) 52%, rgba(12,15,18,.96) 92%); }
.p2-hero .in { position: relative; z-index: 2; }
.p2-hero__tag { display: inline-flex; align-items: center; gap: 10px; margin-block-end: 26px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  /* jasniejszy wariant akcentu: --acc na zdjeciu dawal 4,2:1 przy normie 4,5 */
  color: var(--acc2); }
.p2-hero__tag::before { content: ""; inline-size: 34px; block-size: 1px; background: var(--acc); }
.p2-hero h1 { font-size: clamp(38px, 7.4vw, 116px); letter-spacing: -.045em; }
.p2-hero h1 em { font-style: normal; color: var(--acc); }
.p2-hero__foot { display: flex; flex-wrap: wrap; gap: 28px 60px; align-items: flex-end;
  margin-block-start: clamp(28px, 4vw, 52px); }
.p2-hero__foot p { max-inline-size: none; font-size: clamp(15px, 1.35vw, 19px); color: var(--w2); }
.p2-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.p2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 54px; padding: 0 32px; font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: .2s; }
.p2-btn svg { inline-size: 16px; block-size: 16px; }
.p2-btn--a { background: var(--acc); color: #10130F; }
.p2-btn--a:hover { background: var(--acc2); }
.p2-btn--g { border-color: var(--line); color: var(--w1); }
.p2-btn--g:hover { border-color: var(--w1); }

/* ---------- pas danych ---------- */
.p2-facts { border-block: 1px solid var(--line); padding-block: 0; background: var(--k2); }
.p2-facts__g { display: grid; }
@media (min-width: 640px) { .p2-facts__g { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .p2-facts__g { grid-template-columns: repeat(4, 1fr); } }
.p2-fact { padding: clamp(26px, 3vw, 44px) var(--gut); border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line); }
@media (min-width: 1100px) { .p2-fact { border-block-end: 0; } .p2-fact:last-child { border-inline-end: 0; } }
.p2-fact b { font-size: clamp(24px, 2.5vw, 34px); color: var(--w1); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; min-block-size: 2.3em;
  /* do gory, nie do dolu: przy wyrownaniu do dolu jednoliniowe "2010" wisialo nizej
     niz dwuliniowe "Stiebel Eltron" i caly rzad wygladal na rozjechany */
  display: flex; align-items: flex-start; }
.p2-fact span { display: block; margin-block-start: 10px; font-size: 13px; color: var(--w3); line-height: 1.5; }

/* ---------- oś usług (bez kart) ---------- */
.p2-head { margin-block-end: clamp(36px, 5vw, 72px); }
.p2-head span { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.p2-head span::before { content: ""; inline-size: 34px; block-size: 1px; background: var(--acc); }
.p2-head h2 { margin-block-start: 20px; font-size: clamp(28px, 4.4vw, 62px); }
.p2-head p { margin-block-start: 20px; font-size: clamp(15px, 1.2vw, 18px); }

.p2-svc { border-block-start: 1px solid var(--line); }
.p2-svc__i { display: block; border-block-end: 1px solid var(--line); transition: background .25s ease; }
.p2-svc__i:hover { background: var(--k2); }
.p2-svc__row { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding-block: clamp(20px, 2.6vw, 34px); }
@media (min-width: 900px) { .p2-svc__row { grid-template-columns: 108px 1fr 1.1fr auto; gap: 30px; } }
.p2-svc__n { font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; color: var(--w3);
  letter-spacing: -.02em; transition: color .25s ease; }
.p2-svc__i:hover .p2-svc__n { color: var(--acc); }
.p2-svc__t { font-size: clamp(19px, 2.3vw, 34px); color: var(--w1); letter-spacing: -.03em; }
.p2-svc__d { display: none; font-size: 14.5px; color: var(--w3); }
@media (min-width: 900px) { .p2-svc__d { display: block; } }
.p2-svc__go { inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--w1); transition: .25s; }
.p2-svc__i:hover .p2-svc__go { background: var(--acc); border-color: var(--acc); color: #10130F; transform: rotate(-45deg); }
.p2-svc__go svg { inline-size: 17px; block-size: 17px; }
.p2-svc__i--heat .p2-svc__n { color: rgba(239,127,26,.45); }

/* ---------- galeria edge-to-edge ---------- */
.p2-gal { display: grid; gap: 2px; }
@media (min-width: 700px) { .p2-gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .p2-gal { grid-template-columns: repeat(3, 1fr); } }
.p2-shot { position: relative; margin: 0; overflow: hidden; background: var(--k3); }
.p2-shot img { inline-size: 100%; aspect-ratio: 3/2; object-fit: cover;
  filter: grayscale(.35); transition: transform .6s ease, filter .4s ease; }
.p2-shot:hover img { transform: scale(1.05); filter: none; }
.p2-shot figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 46px 22px 20px;
  background: linear-gradient(transparent, rgba(12,15,18,.95)); color: var(--w1);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.p2-shot figcaption em { display: block; font-style: normal; margin-block-start: 4px;
  font-size: 12.5px; font-weight: 400; color: var(--w2);
  /* Dokladnie dwie linie dla kazdego opisu. 2,8em nie wystarczalo (opis "Petle ulozone
     w stalym rozstawie..." mial 41px zamiast 35) i tytul tego kadru siedzial 7px wyzej
     niz sasiednie. Clamp gwarantuje, ze dluzszy tekst nie zrobi trzeciej linii. */
  min-block-size: 3.35em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 699.98px) { .p2-shot figcaption em { min-block-size: 0; } }

/* ---------- blok firmowy (podział 50/50) ---------- */
.p2-about { display: grid; align-items: stretch; }
@media (min-width: 1000px) { .p2-about { grid-template-columns: 1fr 1fr; } }
.p2-about__t { padding: clamp(48px, 7vw, 110px) var(--gut); background: var(--k2); }
@media (min-width: 1100px) { .p2-about__t { padding-inline-start: calc(var(--nav) + var(--gut)); } }
.p2-about__t h2 { font-size: clamp(26px, 3.4vw, 46px); margin-block: 20px 22px; }
.p2-about__t > p { font-size: 16px; }
.p2-about__l { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; }
.p2-about__l li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  padding-block: 18px; border-block-start: 1px solid var(--line); }
.p2-about__l li:last-child { border-block-end: 1px solid var(--line); }
.p2-about__l i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--acc);
  letter-spacing: .1em; padding-block-start: 3px; }
.p2-about__l b { display: block; color: var(--w1); font-size: 16px; font-weight: 600; margin-block-end: 4px; }
.p2-about__l span { font-size: 14px; color: var(--w3); line-height: 1.55; }
.p2-about__m { position: relative; min-block-size: 340px; }
.p2-about__m img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- marki ---------- */
.p2-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 56px; }
.p2-brands a, .p2-brands span { display: inline-flex; align-items: center; min-block-size: 44px; }
.p2-brands img { block-size: 26px; inline-size: auto; filter: grayscale(1) invert(1) brightness(1.7); opacity: .55; transition: .25s; }
.p2-brands img.sq { block-size: 42px; }
.p2-brands a:hover img { opacity: 1; }

/* ---------- kroki jako oś pozioma ---------- */
.p2-steps__g { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
@media (min-width: 900px) { .p2-steps__g { grid-template-columns: repeat(4, 1fr); } }
.p2-step { padding: clamp(24px, 2.6vw, 38px) 0; border-block-end: 1px solid var(--line); }
@media (min-width: 900px) { .p2-step { padding-inline-end: 28px; border-block-end: 0; border-inline-end: 1px solid var(--line); padding-inline-start: 28px; }
  .p2-step:first-child { padding-inline-start: 0; } .p2-step:last-child { border-inline-end: 0; } }
.p2-step b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--acc); }
.p2-step h3 { font-size: 18px; margin-block: 14px 10px; letter-spacing: -.02em;
  /* dwie linie dla kazdego tytulu — inaczej krok z krotszym tytulem ("Rozmowa
     i wizja lokalna") zaczyna opis wyzej niz sasiednie i rzad sie rozjezdza */
  min-block-size: 2.4em; }
@media (max-width: 899.98px) { .p2-step h3 { min-block-size: 0; } }
.p2-step p { font-size: 14px; color: var(--w3); }

/* ---------- kontakt ---------- */
.p2-quote { background: var(--k2); }
.p2-quote__g { display: grid; gap: 40px; }
@media (min-width: 980px) { .p2-quote__g { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.p2-quote h2 { font-size: clamp(28px, 3.6vw, 52px); margin-block: 20px 20px; }
.p2-ct { display: grid; gap: 0; margin-block-start: 34px; }
.p2-ct div { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding-block: 18px; border-block-start: 1px solid var(--line); }
.p2-ct div:last-child { border-block-end: 1px solid var(--line); }
.p2-ct small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--w3); margin-block-end: 6px; }
.p2-ct b { font-size: 19px; color: var(--w1); font-weight: 600; }
.p2-ct a { display: inline-flex; align-items: center; min-block-size: 44px; }
.p2-ct i { display: grid; place-items: center; inline-size: 42px; block-size: 42px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--acc); }
.p2-ct i svg { inline-size: 18px; block-size: 18px; }

/* formularz na ciemnym — karta jasna dla czytelności pól */
.p2 [data-mm-form] { background: #fff; padding: clamp(22px, 3vw, 34px); border-radius: 2px; }

/* stopka projektu 2 */
.p2-foot { background: var(--k); border-block-start: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); }
.p2-foot__g { display: grid; gap: 34px; }
@media (min-width: 800px) { .p2-foot__g { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }
.p2-foot img { block-size: 40px; inline-size: auto; margin-block-end: 18px; }
.p2-foot h4 { margin: 0 0 16px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--w3); font-weight: 600; }
.p2-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.p2-foot ul a { display: inline-flex; align-items: center; min-block-size: 40px; font-size: 14.5px; color: var(--w2); }
.p2-foot ul a:hover { color: var(--acc); }
.p2-foot p { font-size: 14px; color: var(--w3); }
.p2-foot__bar { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
  margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid var(--line);
  font-size: 12.5px; color: var(--w3); }
.p2-foot__bar a { min-block-size: 40px; display: inline-flex; align-items: center; }
.p2-foot__bar a:hover { color: var(--acc); }

/* ==========================================================================
   POPRAWKI PO POMIARACH — cele dotykowe
   ========================================================================== */
@media (max-width: 1099px), (pointer: coarse) {
  .p2-bar__logo { min-block-size: 44px; display: inline-flex; align-items: center; }
  .p2-foot ul a, .p2-foot__bar a, .p2-brands a, .p2-ct a { min-block-size: 44px; }
}
.p2-foot ul a { min-block-size: 44px; }
.p2-foot__bar a { min-block-size: 44px; }

/* Baner producenta — ten sam material co w Projekcie 1, ale w jezyku P2:
   pelna szerokosc, zero zaokraglen, cienka linia zamiast cienia. */
.p2-banner { padding-block: 0 var(--sec); }
.p2-banner__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 2px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-block: 1px solid var(--line);
}
.p2-banner__track::-webkit-scrollbar { display: none; }
.p2-banner__i { scroll-snap-align: center; display: block; background: var(--k2); }
.p2-banner__i img { inline-size: 100%; block-size: auto; aspect-ratio: 1920 / 595; object-fit: cover; }
.p2-banner__dots { display: flex; gap: 10px; margin-block-start: 20px; padding-inline: var(--gut); }
.p2-banner__dots button {
  inline-size: 40px; block-size: 2px; padding: 0; border: 0; cursor: pointer;
  background: var(--w3); transition: background .2s ease, inline-size .2s ease;
}
.p2-banner__dots button[aria-current="true"] { background: var(--acc); inline-size: 64px; }
.p2-banner__dots button:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .p2-banner__track { scroll-behavior: smooth; } }

/* Szyna nawigacji jest position:fixed nad trescia. Offset pod nia dostawal tylko
   .in — kontenery pelnej szerokosci (pasek faktow, galeria, baner) wchodzily POD
   nawigacje i pierwsza kolumna byla ucieta ("2010" widoczne jako "010"). */
/* Ta sama krawedz co reszta tresci na KAZDEJ szerokosci (zasada Pawla: strona ta
   sama szerokoscia od lewej do prawej). Wczesniej te bloki szly od krawedzi ekranu,
   a naglowki nad nimi od --gut — krawedzie sie nie zgadzaly na tablecie i telefonie,
   a na desktopie zaczynaly sie zaraz za szyna zamiast rowno z trescia. */
.p2-facts__g,
.p2-gal,
.p2-banner__track,
.p2-banner__dots { margin-inline: var(--gut); }
@media (min-width: 1100px) {
  .p2-facts__g,
  .p2-gal,
  .p2-banner__track,
  .p2-banner__dots { margin-inline: calc(var(--nav) + var(--gut)) var(--gut); }
}

/* Formularz w Projekcie 2 to BIALA karta wewnatrz ciemnego motywu. Kolory tekstu
   dziedziczyly z .p2 (jasnoszary #A8B3BC na ciemne tlo) i na bieli dawaly kontrast
   2,13:1 przy normie 4,5 — 27 elementow praktycznie nieczytelnych.
   Karta dostaje wlasna, ciemna palete tekstu. */
.p2 .mm-form {
  --w1: #101418;
  --w2: #3F4A55;
  --w3: #5A6672;
  color: #101418;
}
.p2 .mm-form :is(label, legend, p, span, strong, b) { color: #2C3540; }
.p2 .mm-form :is(input, textarea, select) { color: #101418; background: #fff; border-color: #C6CED6; }
.p2 .mm-form :is(input, textarea)::placeholder { color: #6B7883; opacity: 1; }
.p2 .mm-form :is(input, textarea, select):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--acc); }
.p2 .mm-form .mm-chip { color: #2C3540; border-color: #C6CED6; }
.p2 .mm-form .mm-chip:hover { border-color: var(--acc); color: #101418; }
.p2 .mm-form .mm-chip:has(input:checked) { border-color: var(--acc); background: rgba(239,127,26,.10); color: #101418; font-weight: 600; }
.p2 .mm-form a { color: #0F5E86; text-decoration: underline; }

/* Obszar dotyku 44px wokol cienkiego wskaznika — sam pasek ma 2-4px wysokosci
   i palcem nie dalo sie w niego trafic. Wyglad bez zmian. */
.p2-banner__dots button { position: relative; }
.p2-banner__dots button::after {
  content: ""; position: absolute; inset-inline: 0; inset-block: -20px;
  min-block-size: 44px;
}