:root{--ink:#2D2D30;--mut:#6B6B70;--red:#B5342A;--line:#E0E0E2;--panel:#F4F4F5;--head:'Montserrat',sans-serif;--body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 var(--body)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.container{width:min(1160px,calc(100% - 96px));margin-inline:auto}.site-header{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #eeeeef}.header-inner{height:78px;display:flex;align-items:center;gap:36px}.brand{width:160px;flex:none;overflow:hidden}.brand img{width:155px;height:auto;clip-path:inset(0 0 0 0)}.nav{display:flex;align-items:center;gap:30px;margin-left:auto}.nav a{font-size:12px;font-weight:600;white-space:nowrap;position:relative}.nav a.active:after{content:'';height:2px;background:var(--red);position:absolute;bottom:-17px;left:0;right:0}.btn{background:var(--red);color:white;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-radius:2px;font-family:var(--head);font-size:12px;font-weight:700;white-space:nowrap;transition:background .2s}.btn:hover{background:#8f291f}.btn-header{margin-left:0}.nav-toggle,.nav-hamburger{display:none}.eyebrow{margin:0 0 22px;font:800 11px/1.4 var(--head);letter-spacing:1.9px;text-transform:uppercase;color:var(--red)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--head);letter-spacing:-.035em;line-height:1.18}h2{font-size:30px}p{color:var(--mut)}.hero{position:relative;overflow:hidden}.hero-inner{min-height:550px;display:grid;grid-template-columns:49% 51%;align-items:stretch;position:relative}.hero-text{position:relative;z-index:2;padding:80px 0 56px}.hero h1{font-size:clamp(35px,3.65vw,54px);font-weight:800;max-width:590px;margin:0 0 22px}.hero h1 span{display:block;color:var(--red)}.hero-text>p{font-size:17px;max-width:420px;line-height:1.45;color:#4b4b4f}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:30px}.text-link{font-size:13px;font-weight:700;color:var(--ink)}.text-link span{font-size:23px;font-weight:400;color:var(--red);margin-left:8px;vertical-align:-2px}.hero-photo{align-self:stretch;margin-right:calc((min(1160px,100vw - 96px) - 100vw)/2);background-image:linear-gradient(to right,#fff 0%,rgba(255,255,255,.65) 12%,rgba(255,255,255,0) 35%),url('img/Widzicki-Wojciech-440-kwadrat.jpg');background-repeat:no-repeat;background-size:cover;background-position:53% 35%;min-height:550px}.diagnostic{padding-top:52px;padding-bottom:35px}.diagnostic h2{font-size:32px;max-width:800px;margin-bottom:27px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:var(--panel);border:1px solid var(--line);padding:25px 26px 17px;min-height:314px;display:flex;flex-direction:column;border-radius:4px}.card-accent{width:30px;height:4px;background:var(--red);margin-bottom:18px}.card-label{font:800 11px var(--head);color:var(--mut);letter-spacing:2px;text-transform:uppercase;margin-bottom:19px}.card h3{font-size:21px;margin-bottom:14px}.card p{font-size:14px;line-height:1.48;margin-bottom:24px}.card>a{border-top:1px solid var(--line);margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px;font-size:13px;font-weight:700}.card>a span{color:var(--red);font-size:23px;line-height:1}.split{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:48px;padding-top:26px;padding-bottom:26px}.split-photo{overflow:hidden}.split-photo img{width:100%;height:300px;object-fit:cover}.about-photo img{object-position:35% center}.split-copy{padding:14px 0}.split-copy .eyebrow{margin-bottom:20px}.split-copy h2{font-size:29px;margin-bottom:18px}.split-copy>p:not(.eyebrow){font-size:15px;max-width:470px;line-height:1.65;margin-bottom:17px}.approach{grid-template-columns:1fr 1.12fr}.chess-photo img{height:272px}.case{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:24px;padding-bottom:18px;gap:30px}.case .eyebrow{margin-bottom:7px}.case h2{font-size:25px;margin-bottom:8px}.case p:not(.eyebrow){font-size:15px}.case-photo{width:280px;height:90px;overflow:hidden;opacity:.85}.case-photo img{width:100%;height:100%;object-fit:cover;object-position:center 36%}.closing{background:var(--panel);margin-top:24px;margin-bottom:24px;padding:27px 30px;display:flex;justify-content:space-between;align-items:center;gap:25px}.closing .eyebrow{margin-bottom:8px}.closing h2{font-size:24px;margin-bottom:0}.footer{border-top:1px solid var(--line);padding-top:22px}.footer-main{display:flex;justify-content:space-between;gap:38px;align-items:flex-start;padding-bottom:20px}.footer-brand img{width:145px}.footer-brand p{font-size:12px;line-height:1.65;margin:10px 0;color:var(--mut)}.footer-main nav{display:flex;align-items:center;flex-wrap:wrap;gap:26px;padding-top:22px}.footer-main nav a{font-size:12px;color:var(--mut)}.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--mut);padding:12px 0 20px}@media(max-width:1050px){.container{width:min(100% - 56px,1160px)}.header-inner{gap:18px}.nav{gap:14px}.nav a{font-size:11px}.btn-header{padding-inline:14px}.hero h1{font-size:40px}.hero-photo{margin-right:-28px}.split{gap:28px}}@media(max-width:760px){.container{width:calc(100% - 36px)}.header-inner{height:68px}.brand{width:145px}.brand img{width:140px}.nav-hamburger{display:flex;margin-left:auto;width:34px;height:32px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.nav-hamburger span{width:24px;height:2px;background:var(--ink)}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:14px 18px 22px;box-shadow:0 14px 20px #00000015;flex-direction:column;align-items:stretch;gap:0}.nav a{font-size:14px;padding:10px 0}.nav a.active:after{display:none}.nav-toggle:checked~.nav{display:flex}.btn-header{display:none}.hero-inner{display:flex;flex-direction:column;min-height:0}.hero-text{padding:32px 0 20px}.hero h1{font-size:clamp(31px,7.2vw,44px)}.hero-text>p{font-size:16px}.hero-actions{gap:17px;flex-wrap:wrap}.hero-photo{margin:0 -18px;min-height:350px;background-position:center 32%;background-image:linear-gradient(to top,#fff 0%,transparent 22%),url('img/Widzicki-Wojciech-440-kwadrat.jpg')}.diagnostic{padding-top:34px}.diagnostic h2{font-size:26px}.diagnostic h2 br{display:none}.cards{grid-template-columns:1fr;gap:12px}.card{min-height:0;padding:22px}.card h3{font-size:20px}.split,.approach{grid-template-columns:1fr;gap:14px;padding-top:20px;padding-bottom:20px}.split-photo img{height:245px}.approach .split-copy{order:1}.approach .split-photo{order:2}.split-copy h2{font-size:27px}.case{gap:12px}.case-photo{width:38%;height:90px}.closing{margin-top:16px;flex-direction:column;align-items:flex-start}.closing h2{font-size:22px}.footer-main{flex-direction:column;gap:10px}.footer-main nav{padding-top:0;gap:16px}}
/* Dopasowanie proporcji do zatwierdzonej pierwszej makiety Start. */
.container{width:min(1180px,calc(100% - 128px))}
.header-inner{height:82px;gap:26px}
.brand{width:178px}
.brand img{width:175px}
.nav{gap:32px}
.hero{isolation:isolate;background:#fff}
.hero-inner{min-height:585px;display:block}
.hero-text{width:49%;padding:53px 0 60px;position:relative;z-index:3}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(38px,3.6vw,54px);line-height:1.16;max-width:530px;margin-bottom:24px;letter-spacing:-.04em}
.hero-text>p{font-size:16px;line-height:1.43;max-width:445px}
.hero-actions{margin-top:30px}
.hero-photo{position:absolute;z-index:1;top:0;bottom:0;right:0;width:64%;min-height:0;margin:0;background-image:url('img/Widzicki-Wojciech-440-kwadrat.jpg');background-repeat:no-repeat;background-size:cover;background-position:50% 43%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 14%,#000 36%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 14%,#000 36%)}
.diagnostic{padding-top:38px;padding-bottom:24px}
.diagnostic .eyebrow{margin-bottom:12px}
.diagnostic h2{font-size:31px;line-height:1.23;margin-bottom:26px}
.cards{gap:18px}
.card{min-height:308px;padding:23px 24px 18px}
.card-label{margin-bottom:15px}
.card h3{font-size:21px}
.split{grid-template-columns:1.09fr 1fr;gap:54px;padding-top:24px;padding-bottom:20px}
.split-photo img{height:320px;object-fit:cover}
.about-photo img{object-position:50% center}
.split-copy h2{font-size:29px}
.approach{grid-template-columns:1fr 1.09fr}
.chess-photo img{height:280px}
.case{margin-top:0;min-height:130px}
.case-photo{display:none}
.closing{min-height:108px;margin-top:25px;margin-bottom:20px}
.footer-main{align-items:center}
@media(max-width:1050px){.container{width:calc(100% - 80px)}.hero-text{width:52%}.hero-photo{width:62%}.hero h1{font-size:42px}.nav{gap:15px}.brand{width:155px}.brand img{width:155px}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.header-inner{height:68px}.hero-inner{display:flex;flex-direction:column;min-height:0}.hero-text{width:100%;padding:32px 0 15px}.hero h1{font-size:clamp(32px,7vw,43px)}.hero-photo{position:relative;right:auto;top:auto;bottom:auto;margin:0 -18px;width:calc(100% + 36px);height:370px;min-height:0;background-position:center 35%;-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 15%);mask-image:linear-gradient(to top,transparent 0%,#000 15%)}.diagnostic{padding-top:20px}.cards{gap:12px}.card{min-height:0}.split,.approach{grid-template-columns:1fr;gap:15px}.split-photo img{height:250px}.footer-main{align-items:flex-start}}

/* Rozszerzenia dla podstron, referencji i formularza. Reguły Start powyżej pozostają bez zmian. */
.inner-intro{padding-top:64px;padding-bottom:36px}.inner-intro>h1{font-size:clamp(34px,4.2vw,54px);max-width:880px;margin-bottom:28px}.page-lead{font-size:19px;color:var(--ink);max-width:720px}.inner-section{padding-top:38px;padding-bottom:40px}.inner-split{padding-top:0;padding-bottom:0}.inner-split h1{font-size:clamp(34px,4vw,53px)}.inner-split .split-photo img{height:450px}.fact-grid,.value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.fact-card{padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:4px;font-family:var(--head);font-weight:700}.statement{margin:38px 0 0;border-left:4px solid var(--red);padding:20px 28px;background:var(--panel);font:700 clamp(23px,2.5vw,34px)/1.3 var(--head)}.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.offer-card{min-height:430px}.offer-card h2,.layer-card h2,.stage-card h2{font-size:20px;margin-bottom:18px}.offer-card .btn{margin-top:auto;align-self:flex-start}.clean-list{list-style:none;padding:0;margin:0}.clean-list li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--ink)}.clean-list li:before{content:'';position:absolute;left:0;top:23px;background:var(--red);width:9px;height:3px}.stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.stage-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:28px}.stage-number{font:800 14px var(--head);color:var(--red);margin-bottom:17px}.stage-card p,.layer-card p{font-size:15px}.layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.layer-card{min-height:240px}.method-close{padding-top:20px;color:var(--ink)}.short-page{min-height:340px}.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:62px}.contact-form{background:var(--panel);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:10px;border-radius:4px}.contact-form label{font-size:13px;font-weight:700;color:var(--ink)}.contact-form input,.contact-form select,.contact-form textarea{font:16px var(--body);background:#fff;border:1px solid var(--line);border-radius:3px;padding:12px;width:100%;margin-bottom:12px}.contact-form button{border:0;cursor:default;align-self:flex-start}.contact-details{padding:20px 0}.contact-details p{overflow-wrap:anywhere}.references{padding-top:32px;padding-bottom:32px}.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.reference-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:28px;margin:0;display:flex;flex-direction:column}.reference-card blockquote{margin:0 0 25px;color:var(--ink);font-size:15px;line-height:1.65}.reference-card figcaption{margin-top:auto;font:700 12px/1.5 var(--head);color:var(--mut)}
@media(max-width:760px){.inner-intro{padding-top:34px}.fact-grid,.value-grid,.offer-grid,.stage-grid,.layer-grid,.contact-grid,.reference-grid{grid-template-columns:1fr}.offer-card{min-height:0}.inner-split .split-photo img{height:310px}.contact-grid{gap:20px}.contact-form{padding:20px}.references{padding-top:22px;padding-bottom:22px}}

/* =====================================================================
   DOPISANE 09.10.2026. Reguly powyzej pozostaja bez zmian.
   Zakres: szerokosc hasla na Start, formy zdjec, szachy jako tlo,
   listy na stronie O mnie, dane kontaktowe, ruch przy przewijaniu.
   Kolory, fonty i komponenty wylacznie te, ktore juz byly w arkuszu.
   ===================================================================== */

/* A3. Na 1440 px slowo "szybciej" stalo samo w linii. Poszerzamy blok
   tekstu i samo haslo, tresci nie ruszamy. */
@media (min-width: 1200px) {
  .hero-text { width: 54%; }
  .hero h1 { max-width: 640px; }
  .hero-photo { width: 60%; }
}

/* I1. Trzy formy zdjecia. Zadne nie stoi jako goly prostokat. */

/* a) wtopienie krawedzi w biel, przejscie okolo 20 procent szerokosci */
.photo-fade { overflow: visible; }
.photo-fade img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 9%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 9%, #000 22%);
  object-position: 50% 38%;
}

/* b) zdjecie do krawedzi ekranu z jednej strony */
.photo-bleed { overflow: visible; }
.photo-bleed img {
  width: calc(100% + ((100vw - min(1180px, 100vw - 128px)) / 2));
  max-width: none;
  object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 8%, #000 20%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 8%, #000 20%);
}

/* c) ramka z bardzo miekkim cieniem */
.photo-frame { overflow: hidden; border-radius: 4px; box-shadow: 0 20px 50px rgba(31,31,35,.10); }
.photo-frame img { object-position: 50% 30%; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.photo-frame:hover img { transform: scale(1.03); }

/* Miejsce na zdjecie, ktorego jeszcze nie ma w katalogu img. */
.photo-slot {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  min-height: 320px; display: flex; align-items: center; justify-content: center;
}
.photo-slot span, .map-slot span {
  font: 700 12px/1.5 var(--head); letter-spacing: 1.4px; color: var(--mut); text-align: center;
}
.map-slot {
  margin-top: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  min-height: 260px; display: flex; align-items: center; justify-content: center;
}

/* I2. Szachy jako tlo, w szarosci i niskim kryciu. Dwa miejsca:
   hero metodyki oraz pasek zamykajacy na Start. Nigdzie wiecej. */
.method-hero, .closing { position: relative; isolation: isolate; }
.method-hero::before, .closing.has-chess::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url('img/AdobeStock_178463865.jpeg');
  background-size: cover; background-position: center 55%;
  filter: grayscale(1); opacity: .07;
}
.closing.has-chess::before { opacity: .06; }

/* C. Fakty i wartosci przestaja byc siatka szarych kafelkow. */
.fact-list, .value-list { list-style: none; margin: 0; padding: 0; }
.fact-list li, .value-list li {
  position: relative; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line);
  font-family: var(--head); font-weight: 700; font-size: 16px; color: var(--ink);
}
.fact-list li::before, .value-list li::before {
  content: ""; position: absolute; left: 0; top: 25px; width: 16px; height: 3px; background: var(--red);
}
.value-list { columns: 2; column-gap: 54px; }
.value-list li { break-inside: avoid; }

/* E. Dane kontaktowe. Nie formularz, tylko wizytowka. */
.contact-block { margin-top: 6px; }
.contact-block p { margin: 0 0 7px; font-size: 15px; color: var(--mut); overflow-wrap: anywhere; }
.contact-block .contact-name { font: 700 20px/1.3 var(--head); color: var(--ink); margin-bottom: 2px; }
.contact-block .contact-firm { font: 700 13px/1.4 var(--head); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.contact-block a:hover { color: var(--red); }

/* I3. Ruch. Elementy wjezdzaja raz, przy pierwszym pokazaniu sie. */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.widoczny { opacity: 1; transform: none; }
/* Bez JavaScriptu cala tresc jest widoczna od razu. */
.bez-js .reveal { opacity: 1; transform: none; }

/* Hero przy wejsciu: eyebrow, haslo, podtytul i przyciski po kolei. */
.hero .eyebrow, .hero h1, .hero-text > p, .hero-actions {
  animation: wejscie .62s cubic-bezier(.2,.7,.2,1) both; }
.hero .eyebrow { animation-delay: .04s; }
.hero h1 { animation-delay: .16s; }
.hero-text > p { animation-delay: .34s; }
.hero-actions { animation-delay: .48s; }
@keyframes wejscie { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Karty i pozycje list pojawiaja sie kolejno. */
.reveal-grupa > * { opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal-grupa.widoczny > * { opacity: 1; transform: none; }
.reveal-grupa.widoczny > *:nth-child(1) { transition-delay: 0s; }
.reveal-grupa.widoczny > *:nth-child(2) { transition-delay: .1s; }
.reveal-grupa.widoczny > *:nth-child(3) { transition-delay: .2s; }
.reveal-grupa.widoczny > *:nth-child(4) { transition-delay: .3s; }
.reveal-grupa.widoczny > *:nth-child(5) { transition-delay: .4s; }
.reveal-grupa.widoczny > *:nth-child(6) { transition-delay: .5s; }
.bez-js .reveal-grupa > * { opacity: 1; transform: none; }

/* Hover: karta unosi sie lekko, strzalka w linku przesuwa sie w prawo. */
.card, .stage-card, .reference-card, .offer-card {
  transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s cubic-bezier(.2,.7,.2,1); }
.card:hover, .stage-card:hover, .reference-card:hover, .offer-card:hover {
  transform: translateY(-4px); box-shadow: 0 14px 34px rgba(31,31,35,.09); }
.text-link span, .card > a span { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.text-link:hover span, .card > a:hover span { transform: translateX(4px); }
/* Przyciski: tylko kolor i lekki cien, bez skakania. */
.btn { transition: background .22s, box-shadow .22s; }
.btn:hover { box-shadow: 0 8px 20px rgba(181,52,42,.22); }

@media (max-width: 760px) {
  .value-list { columns: 1; }
  .photo-slot { min-height: 220px; }
  .map-slot { min-height: 200px; }
  .photo-bleed img { width: 100%; }
  /* Na waskim ekranie tlo szachow psuje czytelnosc, wiec znika. */
  .method-hero::before, .closing.has-chess::before { display: none; }
}

/* Kto prosi o mniej ruchu, dostaje tresc bez animacji. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-grupa > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .eyebrow, .hero h1, .hero-text > p, .hero-actions { animation: none !important; }
  .card:hover, .stage-card:hover, .reference-card:hover, .offer-card:hover { transform: none; }
  .photo-frame:hover img { transform: none; }
  html { scroll-behavior: auto; }
}

/* A3, dopelnienie. Przegladarka sama wyrownuje dlugosci linii naglowka,
   dzieki czemu pojedyncze slowo nie zostaje samo w ostatniej linii.
   Tresc hasla pozostaje bez zmian. */
.hero h1, .inner-split h1 { text-wrap: balance; }

/* =====================================================================
   DOPISANE 09.10.2026, druga tura. Format WebP dla tel w CSS oraz
   stonowanie ruchu zgodnie z zasada: gdy watpliwosc, mniej.
   ===================================================================== */

/* Tla sa obrazami CSS, wiec format wybiera image-set. Przegladarka,
   ktora go nie rozumie, dostaje JPG z reguly powyzej. */
@supports (background-image: image-set(url("img/wojtek-225.webp") type("image/webp"))) {
  .hero-photo {
    background-image: image-set(url('img/Widzicki-Wojciech-440-kwadrat.webp') type('image/webp'),
                                url('img/Widzicki-Wojciech-440-kwadrat.jpg') type('image/jpeg'));
  }
  .method-hero::before, .closing.has-chess::before {
    background-image: image-set(url('img/AdobeStock_178463865.webp') type('image/webp'),
                                url('img/AdobeStock_178463865.jpeg') type('image/jpeg'));
  }
}

/* Ruch ma byc ledwo zauwazalny. Mniejsze przesuniecie, krotszy czas,
   gestsze nastepstwo elementow. */
.reveal { transform: translateY(14px); transition-duration: .52s; }
.reveal-grupa > * { transform: translateY(14px); transition-duration: .52s; }
.reveal-grupa.widoczny > *:nth-child(2) { transition-delay: .08s; }
.reveal-grupa.widoczny > *:nth-child(3) { transition-delay: .16s; }
.reveal-grupa.widoczny > *:nth-child(4) { transition-delay: .24s; }
.reveal-grupa.widoczny > *:nth-child(5) { transition-delay: .32s; }
.reveal-grupa.widoczny > *:nth-child(6) { transition-delay: .40s; }
@keyframes wejscie { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero-text > p, .hero-actions { animation-duration: .54s; }
.hero .eyebrow { animation-delay: .03s; }
.hero h1 { animation-delay: .14s; }
.hero-text > p { animation-delay: .30s; }
.hero-actions { animation-delay: .42s; }

/* Uniesienie karty o 3 px zamiast 4, cien delikatniejszy. */
.card:hover, .stage-card:hover, .reference-card:hover, .offer-card:hover {
  transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31,31,35,.08);
}

/* I1 na stronie Start. Uklad sekcji zostaje, zmienia sie wylacznie forma
   zdjecia, zeby zadne nie stalo jako goly prostokat. Formy przeplataja sie:
   hero ma wtopienie, sekcja O mnie ramke, szachy znowu wtopienie,
   tym razem od strony prawej, bo zdjecie stoi po prawej stronie ukladu. */
.about-photo.photo-frame img { object-position: 42% 28%; }
.photo-fade-left { overflow: visible; }
.photo-fade-left img {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 9%, #000 22%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 9%, #000 22%);
  object-position: 50% 48%;
}

/* Bardzo waskie ekrany. Dlugie slowa w naglowkach, na przyklad
   "Zarzadzania" i "Architektura", nie miescily sie w 390 px i rozpychaly
   strone w poziomie. Naglowki schodza nizej i moga sie lamac. */
@media (max-width: 430px) {
  html, body { overflow-x: hidden; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .hero h1 { font-size: clamp(25px, 7.4vw, 32px); letter-spacing: -.03em; }
  .inner-split h1, .inner-intro > h1 { font-size: clamp(25px, 7.4vw, 33px); }
  .diagnostic h2, .split-copy h2, .closing h2 { font-size: clamp(20px, 6vw, 25px); }
  .page-lead { font-size: 16px; }
  .card h3, .offer-card h2, .stage-card h2, .layer-card h2 { font-size: 18px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .hero-actions { gap: 12px; }
  .btn { padding: 11px 18px; font-size: 11px; }
}

/* Twarde ograniczenie szerokosci naglowkow. Bez tego dlugie slowa
   wychodzily poza kontener na waskich ekranach. */
@media (max-width: 760px) {
  .hero h1, .inner-split h1, .inner-intro > h1, h2, h3 {
    max-width: 100%; overflow-wrap: break-word; word-break: normal;
  }
  .hero-text, .split-copy, .container > * { max-width: 100%; }
  .hero h1 { text-wrap: wrap; }
}

/* =====================================================================
   DOPISANE 09.10.2026. Kadrowanie nowych zdjec. Dla kazdego ustawione
   recznie object-position, zeby twarz nigdy nie byla ucieta.
   ===================================================================== */
.inner-split .split-photo img { height: 450px; object-fit: cover; }

/* portret pionowy, twarz w gornej trzeciej czesci kadru */
.o-mnie-foto img { object-position: 50% 26%; }
/* kadr przy tablicy, postac po lewej stronie kadru */
.oferta-foto img { object-position: 32% 30%; }
/* pelna sylwetka na kanapie, duzo powietrza nad glowa */
.case-foto img { object-position: 50% 34%; }
/* fotel z laptopem, postac po prawej, zielone rozmycie po lewej */
.kontakt-foto img { object-position: 64% 38%; }
/* plansza szachowa, srodek ciezkosci kompozycji nieco ponizej osi */
.szachy-foto img { object-position: 50% 56%; height: 360px; }

@media (max-width: 760px) {
  .inner-split .split-photo img { height: 310px; }
  .szachy-foto img { height: 240px; }
}