/* Podstrona portfolio (bez ciezkiego main.js, menu i przewijanie ekranow w skrypcie na stronie) */
.strona-pf .head{position:fixed}
.pf-hero{padding:clamp(130px,18vh,190px) var(--pad,20px) clamp(30px,6vh,60px)}
.pf-hero__crumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taro-d);margin-bottom:14px}
.pf-hero__crumb a{color:inherit}
.pf-lista{display:grid;gap:clamp(60px,10vh,120px);padding:0 var(--pad,20px) clamp(60px,10vh,120px)}
.pf{display:grid;gap:44px;align-items:center;padding-top:clamp(40px,7vh,70px);border-top:1px solid var(--line)}
@media (min-width:900px){
  .pf{grid-template-columns:repeat(12,1fr);column-gap:20px}
  .pf__phones{grid-column:1/7}
  .pf__body{grid-column:7/13}
  .pf:nth-child(even) .pf__phones{grid-column:7/13;grid-row:1}
  .pf:nth-child(even) .pf__body{grid-column:1/7;grid-row:1}
}
.pf__phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,34px);padding-top:30px}
.pf__phones .phone{width:min(62vw,270px);margin:0;position:relative}
.pf--duo .pf__phones .phone{width:min(42vw,250px)}
.pf__phones .phone__frame{transform:rotate(-2deg)}
.pf:nth-child(even) .pf__phones .phone__frame{transform:rotate(2deg)}
.pf--duo .phone--stara .phone__frame{transform:rotate(-3deg)}
.pf--duo .phone:not(.phone--stara) .phone__frame{transform:rotate(2deg)}
.pf__no{color:var(--taro-d)}
.pf__title{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(30px,4.4vw,66px);line-height:.95;margin:10px 0 14px}
.pf__meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px}
.pf__meta li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pf__link{margin-top:24px}

/* ekran telefonu przewija zrzut strony */
@keyframes pf-jazda{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--dyst,0))}}
.phone__screen.jedzie img{animation:pf-jazda 40s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.phone__screen.jedzie img{animation:none}}

.pf-kontakt{display:grid;gap:26px;justify-items:start;padding:clamp(60px,10vh,110px) var(--pad,20px);background:var(--ink);color:var(--paper)}
.pf-kontakt__akcje{display:flex;flex-wrap:wrap;gap:14px}
.pf-kontakt .btn{border-color:var(--paper);box-shadow:4px 4px 0 var(--paper)}
@media (max-width:599px){.pf__title{font-size:clamp(24px,7.4vw,40px);overflow-wrap:anywhere}}
.strona-pf .head{background:rgba(233,228,218,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:599px){.pf__title{overflow-wrap:normal;hyphens:manual}}

/* blog */
.blog__intro{max-width:46ch;margin-top:16px;font-size:clamp(17px,1.3vw,20px)}
.blog-lista{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:0 var(--pad,20px) clamp(60px,10vh,110px)}
.blog-lista .post{flex:none;width:auto}
.blog-lista--male{padding:0}
.wpis{max-width:760px;margin:0 auto;padding:clamp(120px,16vh,170px) var(--pad,20px) 40px}
.wpis__data{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taro-d);margin:6px 0 14px}
.wpis__t{font-weight:900;font-stretch:118%;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0 0 28px}
.wpis__img{margin:0 0 34px;border:1.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:var(--paper-3)}
.wpis__img img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.wpis__tresc{font-size:18px;line-height:1.7}
.wpis__tresc p{margin:0 0 18px}
.wpis__lead{font-size:clamp(19px,1.6vw,22px);font-weight:600;line-height:1.5}
.wpis__tresc h2{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);line-height:1.1;margin:38px 0 12px}
.wpis__tresc ul{margin:0 0 20px;padding-left:22px}
.wpis__tresc li{margin-bottom:8px}
.wpis__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.blog-inne{padding:20px var(--pad,20px) clamp(60px,10vh,110px)}
.blog-inne__t{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);margin:0 0 22px}

/* runda 26: mniejsze litery */
.pf__title{font-size:clamp(26px,3.6vw,50px)}
.pf__meta li{font-size:10.5px}
.pf .case__story dd{font-size:clamp(14px,1vw,15.5px)}
@media (max-width:599px){.pf__title{font-size:clamp(22px,6.8vw,34px)}}