/* Podstrona: EN: Case studies (z makiety, tools/pages.py) */
.cs-page{--pc:#ff1f4b;--pct:#ff6b86;--brand:#0b6a5c}
.c-hero{padding-top:clamp(108px,12vw,150px);padding-bottom:0;position:relative;overflow:hidden;isolation:isolate}
.crumbs{margin-bottom:clamp(24px,3vw,40px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu-d)}
.crumbs li{display:flex;gap:8px}
.crumbs li + li::before{content:"/";opacity:.6}
.crumbs a{color:inherit;text-underline-offset:3px;display:inline-block;padding-block:5px}
.c-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.c-tag{font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:var(--p2l);color:#fff}
.c-tag.p1{background:#3a2bff}
.c-logo{height:30px;width:auto;filter:invert(1) brightness(1.6);opacity:.9}
.c-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px clamp(24px,5vw,80px);align-items:end;margin-top:22px}
.c-h1{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700;font-variation-settings:'opsz' 96,'wdth' 88;text-wrap:balance;margin:0}
.c-big{font-family:var(--k);font-size:clamp(96px,15vw,220px);line-height:.8;font-variation-settings:'wdth' 82,'wght' 900;color:var(--pct);margin:0;letter-spacing:-.02em}
.c-big small{display:block;font-family:var(--m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu-d);font-variation-settings:normal;margin-top:16px;letter-spacing:.06em}
.c-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(36px,4vw,56px) 0 0;border-top:1px solid var(--ln-d)}
.c-meta div{padding:16px 16px 0 0;display:grid;gap:4px;min-width:0}
.c-meta div + div{padding-left:16px;border-left:1px solid var(--ln-d)}
.c-meta dt{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu-d)}
.c-meta dd{margin:0;font-size:15.5px;line-height:1.45}
.c-shots{position:relative;margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:clamp(16px,2vw,28px);align-items:end}
.c-shots .browser{position:relative;border-radius:10px 10px 0 0;box-shadow:0 -20px 80px -30px rgba(0,0,0,.8)}
.phone{position:relative;border-radius:28px;overflow:hidden;border:8px solid #22262e;background:#22262e;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);margin-bottom:clamp(16px,3vw,40px);max-width:240px;justify-self:end;width:100%}
.phone img{display:block;width:100%;height:auto;border-radius:20px}
.c-cap{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:var(--mu-l);margin-top:14px}

/* wyniki */
.res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.res div{padding:24px 20px 0 0;display:grid;gap:8px;align-content:start;min-width:0}
.res div + div{padding-left:20px;border-left:1px solid var(--ln-l)}
.res b{font-family:var(--k);font-size:clamp(40px,4.6vw,64px);line-height:.9;font-variation-settings:'wdth' 90,'wght' 900;white-space:nowrap}
.res span{color:var(--mu-l);line-height:1.5;font-size:15.5px}
.res div:first-child b{color:var(--p2l)}
.res-note{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:var(--mu-l);margin-top:20px}

/* opowieść */
.story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);align-items:start}
.story-l{position:sticky;top:110px;display:grid;gap:14px}
.story-l .idx{width:max-content}
.story-r{display:grid;gap:clamp(40px,5vw,64px);min-width:0}
.blk{display:grid;gap:14px;max-width:66ch}
.blk h2{font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0;scroll-margin-top:100px}
.blk p{font-size:17.5px;line-height:1.7;margin:0}
.start{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.start li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:16.5px;line-height:1.55}
.start li::before{content:"✕";color:var(--p2l);font-weight:700}
.sol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.sol div{border:1px solid var(--ln-l);border-radius:12px;background:#fff;padding:18px;display:grid;gap:8px;align-content:start;min-width:0}
.sol b{font-size:17px}
.sol span{color:var(--mu-l);font-size:15px;line-height:1.55}
.tl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-left:2px solid var(--ln-l)}
.tl li{position:relative;padding:0 0 26px 26px;display:grid;gap:6px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--pc)}
.tl .k{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--p2l)}
.tl b{font-size:18px}
.tl p{font-size:16px;color:var(--mu-l);line-height:1.6;margin:0}
.d-stack{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0;padding:0}
.d-stack li{font-size:14px;padding:7px 12px;border-radius:99px;border:1px solid var(--ln-l);background:#fff}
.prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:center;border-radius:14px;background:#fff;border:1px solid var(--ln-l);padding:14px;margin-top:8px}
.prod img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
.prod p{font-size:15.5px;color:var(--mu-l);line-height:1.6}

/* cytat */
.d-quote{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:clamp(20px,4vw,64px);align-items:start}
.d-quote .mark{font-family:var(--i);font-size:clamp(120px,14vw,200px);line-height:.7;color:var(--pct)}
.d-quote blockquote{margin:0;display:grid;gap:22px}
.d-quote blockquote p{font-family:var(--i);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.38;letter-spacing:-.01em;font-variation-settings:'opsz' 48;max-width:40ch;margin:0}
.d-quote footer{display:flex;align-items:center;gap:14px}
.d-quote footer b{display:block;font-size:17px}
.d-quote footer span{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu-d)}

/* dalej */
.nxt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px}
.nxt a{display:grid;gap:10px;padding:clamp(22px,3vw,36px);border-radius:14px;text-decoration:none;align-content:start}
.nxt .a1{background:#3a2bff;color:#fff}
.nxt .a1 b{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.nxt .a1 span{color:rgba(255,255,255,.82);line-height:1.5}
.nxt .a2{border:1px solid var(--ln-l);color:var(--ink);background:#fff}
.nxt .a2 b{font-size:20px}
.nxt .a2 span{color:var(--mu-l);line-height:1.5}
.nxt .k{font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.nxt .go{font-weight:600;margin-top:6px}
.nxt a:hover .go{text-decoration:underline;text-underline-offset:4px}

@media (max-width:1100px){
  .res{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .res div:nth-child(3){padding-left:0;border-left:0}
  .c-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .c-meta div:nth-child(3){padding-left:0;border-left:0}
  .sol{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .c-top,.story,.d-quote,.nxt{grid-template-columns:minmax(0,1fr)}
  .story-l{position:static}
  .d-quote .mark{line-height:.5;font-size:110px}
  .c-shots{grid-template-columns:minmax(0,1fr)}
  .phone{display:none}
}
@media (max-width:560px){
  .res,.c-meta{grid-template-columns:minmax(0,1fr)}
  .res div,.res div + div,.c-meta div,.c-meta div + div{padding-left:0;border-left:0}
  .res div + div{border-top:1px solid var(--ln-l);padding-top:18px}
  .c-meta div + div{border-top:1px solid var(--ln-d);padding-top:12px}
  .prod{grid-template-columns:minmax(0,1fr)}
}

/* kolor case study = główny filar */
.cs-st{--pc:#3a2bff;--pct:#948bff;--pcr:58,43,255}
.cs-sk{--pc:#d10032;--pct:#ff6b86;--pcr:255,31,75}
.cs-sy{--pc:#007a4f;--pct:#3fe3a8;--pcr:0,194,127}
.cs-sn{--pc:#a14e00;--pct:#ffb04d;--pcr:255,138,0}
.c-tag.t-st{background:#3a2bff}.c-tag.t-sk{background:#d10032}.c-tag.t-sy{background:#007a4f}.c-tag.t-sn{background:#a14e00}
.cs-st .res div:first-child b,.cs-sk .res div:first-child b,.cs-sy .res div:first-child b,.cs-sn .res div:first-child b{color:var(--pc)}
.cs-st .start li::before,.cs-sk .start li::before,.cs-sy .start li::before,.cs-sn .start li::before{color:var(--pc)}
.cs-st .tl .k,.cs-sk .tl .k,.cs-sy .tl .k,.cs-sn .tl .k{color:var(--pc)}
.cs-st :focus-visible,.cs-sk :focus-visible,.cs-sy :focus-visible,.cs-sn :focus-visible{outline-color:var(--pc)}
.cs-st .dark :focus-visible,.cs-sk .dark :focus-visible,.cs-sy .dark :focus-visible,.cs-sn .dark :focus-visible{outline-color:var(--pct)}
.c-hero::before{content:"";position:absolute;top:-30%;right:0;width:min(70vw,900px);height:min(70vw,900px);background:radial-gradient(closest-side,rgba(var(--pcr,255,31,75),.22),transparent 70%);z-index:-1;pointer-events:none}
.cs-st .nxt .a1 span,.cs-sk .nxt .a1 span,.cs-sy .nxt .a1 span,.cs-sn .nxt .a1 span{color:#fff}
.c-big.txt{font-size:clamp(64px,10vw,150px)}
.c-shots.solo{grid-template-columns:minmax(0,1fr)}
.c-shots .pic{position:relative;border-radius:12px;overflow:hidden;margin-bottom:clamp(16px,3vw,40px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.c-shots .pic img{display:block;width:100%;height:auto}
.c-shots.wiz{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.c-shots.wiz .browser{border-radius:12px 12px 0 0}
.c-shots .browser img{display:block;width:100%;height:auto}
.c-note{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:var(--mu-d);margin:14px 0 0}
.ph{background:#fff3b0;color:#5a4a00;padding:0 4px;border-radius:3px}
.c-ph{border:2px dashed var(--ln-d);border-radius:12px;min-height:220px;display:grid;place-items:center;color:var(--mu-d);font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:clamp(16px,3vw,40px)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.gal figure{margin:0;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--ln-l)}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:var(--mu-l);padding:10px 12px}
.gal .w{grid-column:1 / -1}
@media (max-width:900px){.c-shots.wiz{grid-template-columns:minmax(0,1fr)}.c-shots.wiz .pic{display:none}}
@media (max-width:560px){.gal{grid-template-columns:minmax(0,1fr)}.c-big.txt{font-size:clamp(56px,18vw,96px)}}

.rl-hero{padding-bottom:clamp(40px,5vw,72px)}
.rl-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:#c8ccd4;max-width:60ch;margin:20px 0 0}
.rl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(32px,4vw,52px) 0 0;border-top:1px solid var(--ln-d)}
.rl-stats div{padding:18px 16px 0 0;display:grid;gap:6px;min-width:0}
.rl-stats div + div{padding-left:16px;border-left:1px solid var(--ln-d)}
.rl-stats b{font-family:var(--k);font-size:clamp(36px,4vw,56px);line-height:.9;font-variation-settings:'wdth' 90,'wght' 900;color:var(--pct);white-space:nowrap}
.rl-stats span{font-size:14.5px;color:var(--mu-d);line-height:1.45}
.rl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:24px}
.rl-fs{display:flex;flex-wrap:wrap;gap:8px}
.rl-f{min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--ln-l);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.rl-f[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rl-n{font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu-l)}
.rl-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rl[hidden]{display:none}
.rl a{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--ln-l);color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rl a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(14,15,18,.35)}
.rl-img{aspect-ratio:16/9;overflow:hidden;background:#e4e6e3;border-bottom:1px solid var(--ln-l)}
.rl-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rl a:hover .rl-img img{transform:scale(1.03)}
.rl-img.sq img{object-position:center}
.rl-none{display:grid;place-items:center;font-family:var(--k);font-size:clamp(28px,3vw,40px);font-variation-settings:'wdth' 90,'wght' 850;color:var(--mu-l);background:repeating-linear-gradient(135deg,#eceee9 0 12px,#e4e6e3 12px 24px)}
.rl-t{padding:clamp(18px,2vw,26px);display:grid;gap:12px;align-content:start}
.rl-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rl-y{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu-l);margin-left:4px}
.rl h2{font-size:clamp(21px,2vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0;font-weight:700}
.rl p{margin:0;color:var(--mu-l);line-height:1.55;font-size:15.5px}
.rl-big{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--ln-l);padding-top:12px;margin-top:4px!important}
.rl-big b{font-family:var(--k);font-size:30px;line-height:1;font-variation-settings:'wdth' 90,'wght' 900;color:var(--ink)}
.rl-big span{font-size:14px}
@media (prefers-reduced-motion:reduce){.rl a,.rl-img img{transition:none}.rl a:hover{transform:none}.rl a:hover .rl-img img{transform:none}}
@media (max-width:900px){.rl-g{grid-template-columns:minmax(0,1fr)}.rl-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}.rl-stats div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:480px){.rl-stats{grid-template-columns:minmax(0,1fr)}.rl-stats div,.rl-stats div + div{padding-left:0;border-left:0}}

.nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:6px}

.lang-s{font-family:var(--m);font-size:12px;letter-spacing:.08em;padding:6px 10px;border:1px solid currentColor;border-radius:99px;text-decoration:none}