/* KOPIA 1:1 wzorca z https://redford-sub-strony.vercel.app/v6/sub/strony/css/strony-r2.css (pobrane 20.10.2026 13:03, karta R9-B). Nie edytować; zmiany dla Taxi w taxi.css / taxi.js. */
/* REDFORD V6 · strony-r2.css: RUNDA 2 podstrony /strony-internetowe-warszawa/ (sub/strony, 20.10.2026).
 * Ładowany PO strony.css. Mechaniki ruchu mkvision (diensten) w naszych kolorach i jednym kroju:
 * A3+A1+A2 zakres jako seria scen (numer, okno-łuk z wektorem, tytuł z liter w wachlarzu), A4 poziomy pin "Technologie",
 * A6 przycisk z literami, licznik-rolka numerów "Jak pracujemy", wachlarz liter nagłówka "Najpierw ustalamy problem".
 * Stan bez JS i przy prefers-reduced-motion = stan końcowy (litery proste, wektory narysowane, tor przewijany natywnie). */

.sp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- ZAKRES: seria scen ---------- */
.sp-zk{padding-bottom:calc(var(--fl-r) + clamp(40px,4vw,72px))}
.zs-head{margin-bottom:0}
.zs-list{margin:0;padding:0;list-style:none}
.zs{--zw:clamp(260px,26vw,420px);--zs-c:var(--red);--zs-w:var(--ink);--zs-s:var(--paper);--zs-a:var(--red);
  --zs-fs:min(clamp(64px,9.4vw,172px),calc((100vw - 2 * var(--m)) * .86 / (var(--len) * .6)));
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;
  padding:clamp(64px,7vw,120px) 0 clamp(24px,3vw,48px)}
.zs:nth-child(even){--zs-c:var(--ink);--zs-w:var(--red);--zs-a:var(--ink)}
.zs-side{grid-row:1;grid-column:1/span 4;padding-top:4px}
.zs--r .zs-side{grid-column:9/-1}
.zs-n{display:block;font:700 clamp(64px,7.2vw,112px)/.86 var(--f-text);letter-spacing:-.045em;color:var(--zs-c);font-variant-numeric:tabular-nums}
.zs-d{margin:clamp(20px,2.2vw,32px) 0 0;max-width:22em;font-size:clamp(18px,1.5vw,22px);line-height:1.42;color:#3A3A37}
.zs-d::first-letter,.zs-d>.sw:first-child::first-letter{text-transform:uppercase}
.zs-win{grid-row:1;grid-column:1/-1;justify-self:center;position:relative;z-index:2;width:var(--zw);height:calc(var(--zw) * 1.24);
  border-radius:calc(var(--zw) / 2) calc(var(--zw) / 2) 28px 28px;overflow:hidden;background:var(--zs-w)}
.zs-media{position:absolute;inset:0;transform-origin:50% 50%}
.zs-t{grid-row:2;grid-column:1/-1;justify-self:center;margin:calc(-.6 * var(--zs-fs)) 0 0;font:700 var(--zs-fs)/1 var(--f-text);
  letter-spacing:-.035em;white-space:nowrap;color:var(--zs-c)}
.zs-chars{display:block}
.zs-t .ch{display:inline-block;position:relative;z-index:1;white-space:pre;transform-origin:-50vw 50%}
.zs-t .ch--f{z-index:3}
.zs--r .zs-t .ch{transform-origin:50vw 50%}

/* wektory w oknach scen i panelach Technologii: kontury (pathLength=1, rysowane stroke-dashoffset przez JS) */
.zs-svg,.tp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zs-svg .d,.tp-svg .d{fill:none;stroke:var(--zs-s);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.zs-svg .c,.tp-svg .c{stroke-opacity:.38}
.zs-svg .a,.tp-svg .a{stroke:var(--zs-a)}
.zs-svg .o,.tp-svg .o{fill:var(--zs-w)}
.zs-svg .f,.tp-svg .f{fill:var(--zs-a)}

/* ---------- TECHNOLOGIE: poziomy tor paneli (pin na desktopie: klasa .tp--pin z JS) ---------- */
.sp-tech{padding:0}
.tp-pin{padding:clamp(96px,9vw,136px) 0 calc(var(--fl-r) + clamp(80px,8vw,112px))}
.tp-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(32px,3.3vw,48px)}
.tp-head .sp-h2{grid-column:1/span 4}
.tp-lead{grid-column:5/span 4;margin:0;max-width:20em;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:rgba(243,243,239,.72)}
.tp-meta{grid-column:9/-1;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.tp-ct{font:700 clamp(22px,2vw,28px)/1 var(--f-text);letter-spacing:-.01em;color:rgba(243,243,239,.45);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-ct b{color:var(--paper)}
.tp-bar{position:relative;flex:none;width:clamp(120px,14vw,220px);height:2px;background:rgba(243,243,239,.16);overflow:hidden}
.tp-bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.tp-vp{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none}
.tp-vp::-webkit-scrollbar{display:none}
.tp-vp:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tp-track{display:flex;gap:var(--gap);width:max-content;margin:0;padding:0 var(--m);list-style:none}
.tp{--zs-w:var(--ink);--zs-s:var(--paper);--zs-a:var(--red);flex:none;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  width:min(76vw,1180px);height:clamp(400px,calc(100vh - 320px),620px);border-radius:24px;overflow:hidden;background:var(--paper);color:var(--ink)}
.tp-txt{display:flex;flex-direction:column;padding:clamp(28px,3vw,48px)}
.tp-n{font:700 clamp(44px,4.4vw,64px)/1 var(--f-text);letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums}
.tp-t{margin:auto 0 18px;font:700 clamp(40px,4.4vw,72px)/1 var(--f-text);letter-spacing:-.03em}
.tp-d{margin:0;max-width:20em;font-size:clamp(18px,1.5vw,22px);line-height:1.42;color:#3A3A37}
.tp-d::first-letter{text-transform:uppercase}
.tp-media{position:relative;margin:clamp(10px,1vw,14px);border-radius:18px;overflow:hidden;background:var(--ink)}
.tp-par{position:absolute;inset:0 -6%;transform:scale(1.06)}
/* pin (desktop z ruchem): sekcja na pełną wysokość okna, tor przesuwany transformacją */
.tp--pin .tp-pin{box-sizing:border-box;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--fl-r) + 40px) 0 40px;overflow:hidden}
.tp--pin .tp-vp{overflow:visible;scroll-snap-type:none}
.tp--pin .tp-track{will-change:transform}

/* ---------- A6: przycisk z literami (rolka liter po hover; dotyk bez efektu) ---------- */
.bl{display:inline-flex;overflow:hidden;line-height:1.3;margin-block:-.15em}
.bl-c{display:inline-block;position:relative;white-space:pre;transition:transform .55s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * 16ms)}
.bl-c::after{content:attr(data-t);position:absolute;left:0;top:100%}
@media (hover:hover) and (pointer:fine){
  .bp--bl:hover .bl-c{transform:translateY(-100%)}
}
.bp--bl:focus-visible .bl-c{transform:translateY(-100%)}

/* ---------- JAK PRACUJEMY: numer jako rolka cyfr (znaczniki dodaje JS) ---------- */
.od{display:inline-flex}
.od-w{display:inline-block;height:1em;overflow:hidden}
.od-s{display:block;will-change:transform}
.od-s>span{display:block;height:1em;line-height:1}

/* ---------- NAJPIERW USTALAMY PROBLEM: litery nagłówka (wachlarz, JS) ---------- */
.sp-pb-h .fc{display:inline-block;will-change:transform}

/* ---------- R2: ruch w istniejących sekcjach ---------- */
/* hero: paralaksa przy wyjeździe (transform z JS) */
.sp-hero .sp-h1,.sp-hero .sp-sk,.sp-hero-txt{will-change:transform}
/* inne usługi: linia wiersza rysowana od lewej (tylko gdy działa ruch: klasa .sp-in--m z JS) */
.sp-in-a{position:relative}
.sp-in-ln{display:none;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(14,14,14,.14);transform-origin:0 50%}
.sp-in--m .sp-in-a{border-bottom-color:transparent}
.sp-in--m .sp-in-ln{display:block}

/* ---------- poniżej desktopu ---------- */
@media (max-width:1023px){
  .zs{--zw:min(64vw,300px);--zs-fs:min(76px,calc((100vw - 2 * var(--m)) * .94 / (var(--len) * .6)));display:flex;flex-direction:column;align-items:stretch;padding:56px 0 8px}
  .zs-side{display:contents}
  .zs-n{order:1;margin-bottom:20px;font-size:56px}
  .zs--r .zs-n{text-align:right}
  .zs-win{order:2;align-self:center;border-radius:calc(var(--zw) / 2) calc(var(--zw) / 2) 20px 20px}
  .zs-t{order:3;align-self:center;margin-top:calc(-.46 * var(--zs-fs))}
  .zs-d{order:4;margin-top:64px;font-size:18px}
  .tp-pin{padding:96px 0 calc(var(--fl-r) + 72px)}
  .tp-head{display:block}
  .tp-lead{margin-top:20px}
  .tp-meta{justify-content:flex-start;margin-top:24px}
  .tp{width:min(84vw,520px);height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;border-radius:20px}
  .tp-media{order:-1;height:min(56vw,300px);margin:10px 10px 0}
  .tp-txt{padding:24px}
  .tp-n{font-size:40px}
  .tp-t{margin:28px 0 12px;font-size:34px}
  .tp-d{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .bl-c{transition:none}
  .bp--bl:hover .bl-c,.bp--bl:focus-visible .bl-c{transform:none}
}