:root{--bg:#050505;--fg:#f4f4ef;--muted:#aaa9a4;--red:#d9151d;--pad:clamp(18px,3.5vw,60px);--header-h:124px;--ease:cubic-bezier(.76,0,.24,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--fg)}a{color:inherit;text-decoration:none}button{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app-bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 78% 40%,#17080a 0,#080707 38%,#030303 78%);z-index:0}.app-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.02) 55%,rgba(0,0,0,.25));pointer-events:none}#bg-canvas{position:absolute;inset:0;width:100%;height:100%}.bg-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15}.glow-a{width:38vw;height:38vw;background:#e31b23;right:-10vw;top:5vh}.glow-b{width:28vw;height:28vw;background:#76202a;left:28vw;bottom:-18vw}.site-header{position:fixed;z-index:60;left:0;right:0;top:0;height:var(--header-h);display:flex;align-items:flex-start;justify-content:space-between;padding:12px var(--pad) 0;pointer-events:none}.brand,.main-nav,.menu-btn{pointer-events:auto}.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.brand img{display:block;width:clamp(220px,23vw,360px);height:auto}.brand span{margin-left:54px;font-size:7.5px;font-weight:700;letter-spacing:.14em;white-space:nowrap}.brand b{color:var(--red);margin:0 4px}.main-nav{display:flex;align-items:center;gap:24px;margin-top:4px;padding:7px 9px 7px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(3,3,3,.42);backdrop-filter:blur(12px);font-size:14px}.main-nav a{opacity:.78}.main-nav a:hover{opacity:1}.nav-cta{padding:10px 16px;border:1px solid rgba(255,255,255,.65);border-radius:999px}.menu-btn{display:none}.deck{position:relative;z-index:5;width:100%;height:100svh}.deck-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(100%);pointer-events:none;transition:transform .7s var(--ease),opacity .4s ease,visibility 0s linear .7s}.deck-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:transform .7s var(--ease),opacity .4s ease,visibility 0s}.deck-slide.is-leaving{opacity:0;visibility:visible;transform:translateY(-100%)}.slide-inner{height:100%;padding:calc(var(--header-h) + 8px) var(--pad) 34px;display:flex;align-items:stretch}.hero-inner{align-items:flex-end}.hero-copy{width:min(100%,1440px);margin:0 auto 28px}.hero-copy h1{margin:0;text-transform:uppercase;font-size:clamp(58px,9.7vw,150px);line-height:.84;letter-spacing:-.065em;overflow-wrap:break-word;word-break:break-word}.hero-copy h1 span{display:block}.hero-copy .outline{color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.72)}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:36px}.hero-bottom p{max-width:560px;margin:0;font-size:clamp(16px,1.3vw,21px);line-height:1.5;color:#dadad5}.round-cta{width:148px;height:148px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.03);color:#fff;text-align:left;padding:28px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.round-cta:hover{background:var(--red);border-color:var(--red)}.round-cta b{align-self:flex-end;font-size:26px}.content-card{width:min(100%,1440px);height:100%;margin:auto;border-radius:30px;overflow:hidden;position:relative}.card-light{background:#efefea;color:#090909}.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:800;margin:0 0 18px;color:#c9c9c4}.eyebrow.dark{color:#64645f}.statement-card{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,84px)}.statement-card h2{font-size:clamp(46px,6.7vw,104px);line-height:.93;letter-spacing:-.055em;margin:0;max-width:1260px}.meta-row{display:flex;justify-content:space-between;border-top:1px solid #bdbdb7;margin-top:44px;padding-top:18px;font-size:11px;letter-spacing:.18em}.work-card-shell{background:rgba(7,7,7,.76);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:26px 30px 24px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}.work-head{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:end}.work-head h2{font-size:clamp(36px,4.1vw,62px);letter-spacing:-.05em;line-height:.92;margin:0}.work-head h2 em{color:#777;font-weight:400}.work-head>p{margin:0;color:#aaa;font-size:14px;line-height:1.45;max-width:500px}.project-stage{position:relative;min-height:0;overflow:hidden;border-radius:22px}.project-card{position:absolute;inset:0;border-radius:22px;display:grid;grid-template-columns:54px .75fr 1.25fr;gap:22px;padding:26px;opacity:0;visibility:hidden;transform:translateY(105%);pointer-events:none;transition:transform .55s var(--ease),opacity .3s ease,visibility 0s linear .55s}.project-card.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:transform .55s var(--ease),opacity .3s ease}.project-card.is-leaving{opacity:0;visibility:visible;transform:translateY(-105%)}.project-dark{background:#171717}.project-red{background:#ba0e17}.project-light{background:#e7e7e1;color:#0a0a0a}.project-index{font-size:11px;opacity:.55}.project-content{align-self:center}.project-tags{display:flex;gap:7px;flex-wrap:wrap}.project-tags span{border:1px solid currentColor;border-radius:999px;padding:6px 9px;font-size:9px;letter-spacing:.08em}.project-content h3{font-size:clamp(38px,4.6vw,72px);line-height:.86;letter-spacing:-.055em;margin:18px 0 14px}.project-content p{font-size:14px;line-height:1.45;opacity:.78;max-width:470px}.project-content a{display:inline-block;margin-top:14px;padding-bottom:5px;border-bottom:1px solid currentColor;font-size:14px}.project-visual{height:100%;min-height:0;border-radius:18px;overflow:hidden;position:relative;align-self:stretch}.visual-specbud{background:radial-gradient(circle at 20% 10%,#35412c,#1d201b 45%,#0d0e0c)}.mock-window{position:absolute;width:91%;height:78%;left:8%;top:11%;background:#fff;border-radius:14px;overflow:hidden;transform:rotate(-4deg);box-shadow:0 24px 70px rgba(0,0,0,.35)}.mock-bar{height:32px;background:#e8e8e8;display:flex;align-items:center;gap:6px;padding:0 12px}.mock-bar i{width:7px;height:7px;border-radius:50%;background:#aaa}.mock-screen{height:calc(100% - 32px);padding:26px;background:linear-gradient(135deg,#f7f7f3,#dbdfd4);color:#111}.spec-logo{font-weight:900;font-size:18px}.spec-logo span{color:#547b31}.spec-heading{font-size:clamp(26px,3vw,46px);font-weight:900;line-height:.9;letter-spacing:-.055em;margin-top:34px}.spec-pill{display:inline-block;margin-top:20px;background:#111;color:#fff;padding:9px 12px;border-radius:999px;font-size:9px}.visual-rent{background:linear-gradient(135deg,#161616,#2d080b);display:flex;align-items:center;justify-content:center}.road-line{position:absolute;left:8%;right:8%;bottom:17%;height:1px;background:rgba(255,255,255,.28)}.car-silhouette{font-size:clamp(110px,14vw,220px);font-weight:900;letter-spacing:-.12em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32);transform:skewX(-9deg)}.rent-copy{position:absolute;left:8%;top:9%;font-size:clamp(38px,4.7vw,70px);font-weight:800;line-height:.8;letter-spacing:-.06em}.visual-next{background:#d5ff33;display:flex;align-items:center;justify-content:center}.next-ring{position:absolute;border:1px solid rgba(0,0,0,.35);border-radius:50%}.r1{width:70%;aspect-ratio:1}.r2{width:52%;aspect-ratio:1}.r3{width:34%;aspect-ratio:1}.next-word{font-size:clamp(58px,7.5vw,120px);font-weight:900;letter-spacing:-.08em}.project-step{position:absolute;left:10px;bottom:10px;border:0;background:none;color:currentColor;writing-mode:vertical-rl;display:flex;align-items:center;gap:8px;font-size:7px;font-weight:700;letter-spacing:.12em;cursor:pointer}.project-step span{width:1px;height:28px;background:currentColor;opacity:.65}.project-dots{display:flex;justify-content:center;gap:7px}.project-dots button{width:24px;height:3px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.22);cursor:pointer}.project-dots button.is-active{width:42px;background:rgba(255,255,255,.82)}.services-card{background:rgba(7,7,7,.80);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:32px 36px;display:grid;grid-template-rows:auto 1fr}.services-head{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;margin-bottom:16px}.services-head h2{font-size:clamp(44px,5vw,76px);line-height:.88;letter-spacing:-.05em;margin:0}.services-head>p{color:#aaa;font-size:15px;line-height:1.5;margin:0}.service-list{border-top:1px solid rgba(255,255,255,.14)}.service-row{display:grid;grid-template-columns:54px 1fr 1.15fr;gap:24px;align-items:center;padding:clamp(12px,1.6vh,20px) 0;border-bottom:1px solid rgba(255,255,255,.14)}.service-row>span{font-size:10px;color:#777}.service-row h3{font-size:clamp(24px,2.4vw,38px);margin:0;letter-spacing:-.035em}.service-row p{font-size:14px;line-height:1.4;color:#999;margin:0}.process-card{padding:clamp(34px,4vw,62px);display:grid;grid-template-columns:.72fr 1.28fr;gap:58px;align-items:center}.process-intro h2{font-size:clamp(48px,6vw,88px);line-height:.84;letter-spacing:-.055em;margin:0}.process-intro em{font-weight:400;color:#858585}.steps{border-top:1px solid #bdbdb7}.steps article{display:grid;grid-template-columns:42px .65fr 1fr;gap:20px;padding:clamp(14px,2vh,22px) 0;border-bottom:1px solid #bdbdb7;align-items:start}.steps span{font-size:10px;color:#777}.steps h3{font-size:clamp(23px,2.2vw,34px);margin:0}.steps p{font-size:14px;line-height:1.45;margin:0;color:#555}.contact-card{background:#b70811;padding:clamp(38px,5vw,76px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}.contact-card:before{content:"";position:absolute;width:65vw;height:65vw;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-22vw;top:-28vw;box-shadow:0 0 0 10vw rgba(255,255,255,.018),0 0 0 20vw rgba(255,255,255,.014)}.contact-card>*{position:relative;z-index:2}.contact-card h2{font-size:clamp(54px,7.8vw,118px);letter-spacing:-.06em;line-height:.83;margin:0}.contact-card h2 em{font-weight:400;color:rgba(255,255,255,.57)}.contact-actions{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:40px}.contact-actions>a:first-child{font-size:clamp(22px,2.4vw,36px);border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:7px}.contact-circle{width:142px;height:142px;border-radius:50%;background:#fff;color:#111;display:flex;flex-direction:column;justify-content:space-between;padding:26px}.contact-circle b{align-self:flex-end;font-size:24px}.contact-card footer{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.3);padding-top:18px;margin-top:42px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.slide-step{position:absolute;z-index:30;left:16px;bottom:20px;border:0;background:none;color:#fff;writing-mode:vertical-rl;display:flex;align-items:center;gap:9px;font-size:8px;font-weight:700;letter-spacing:.15em;cursor:pointer}.slide-step span{width:1px;height:38px;background:currentColor;opacity:.75;animation:pulse 1.8s ease-in-out infinite}.light-step{color:#222}.slide-count{position:absolute;right:18px;bottom:20px;z-index:30;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.55)}#statement .slide-count,#process .slide-count{color:rgba(0,0,0,.5)}@keyframes pulse{0%,100%{transform:scaleY(.55);opacity:.4}50%{transform:scaleY(1);opacity:1}}.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:120;transform:translate(-50%,-50%)}.cursor-dot{width:6px;height:6px;background:#fff}.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.48);transition:width .2s,height .2s}@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
@media(max-height:800px) and (min-width:901px){:root{--header-h:104px}.brand img{width:300px}.brand span{font-size:6.6px}.hero-copy h1{font-size:clamp(54px,9vw,118px)}.hero-copy{margin-bottom:10px}.hero-bottom{margin-top:22px}.round-cta{width:120px;height:120px;padding:22px}.slide-inner{padding-bottom:28px}.statement-card{padding:46px}.statement-card h2{font-size:clamp(42px,6vw,78px)}.work-card-shell{padding:20px 24px 18px}.work-head h2{font-size:48px}.project-card{padding:20px}.services-card{padding:24px 30px}.services-head h2{font-size:58px}.service-row{padding:10px 0}.process-card{padding:38px 46px}.process-intro h2{font-size:64px}.steps article{padding:12px 0}.contact-card{padding:48px}.contact-card h2{font-size:82px}.contact-actions{margin-top:28px}.contact-card footer{margin-top:30px}}
@media(max-width:900px){:root{--header-h:92px}.brand img{width:245px}.brand span{margin-left:35px;font-size:5.2px;letter-spacing:.08em}.main-nav{display:none}.menu-btn{display:block;margin-top:6px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;border-radius:999px;padding:9px 12px}.slide-inner{padding:calc(var(--header-h) + 8px) 18px 42px}.hero-copy h1{font-size:clamp(40px,12vw,76px)}.hero-bottom{display:grid;grid-template-columns:1fr auto;gap:20px}.hero-bottom p{font-size:15px}.round-cta{width:104px;height:104px;padding:18px;font-size:12px}.content-card{border-radius:20px}.statement-card{padding:28px}.statement-card h2{font-size:clamp(38px,9vw,64px)}.meta-row{gap:14px;flex-wrap:wrap}.work-card-shell{padding:18px}.work-head{grid-template-columns:1fr;gap:8px}.work-head h2{font-size:38px}.work-head>p{font-size:12px}.project-card{grid-template-columns:1fr;padding:20px}.project-index{position:absolute;right:18px;top:16px}.project-content{padding-right:30px}.project-content h3{font-size:42px}.project-visual{grid-row:2;height:220px}.project-step{left:5px;bottom:6px}.services-card{padding:22px}.services-head{grid-template-columns:1fr;gap:8px}.services-head h2{font-size:42px}.services-head>p{font-size:12px}.service-row{grid-template-columns:30px 1fr;gap:10px;padding:10px 0}.service-row p{grid-column:2;font-size:12px}.service-row h3{font-size:25px}.process-card{padding:26px;grid-template-columns:1fr;gap:18px;align-content:center}.process-intro h2{font-size:48px}.steps article{grid-template-columns:30px 1fr;gap:10px;padding:10px 0}.steps p{grid-column:2;font-size:12px}.steps h3{font-size:24px}.contact-card{padding:28px}.contact-card h2{font-size:clamp(46px,11vw,70px)}.contact-actions{align-items:flex-start}.contact-circle{width:110px;height:110px;padding:20px;font-size:12px}.contact-card footer{margin-top:28px}.slide-count{right:12px}.slide-step{left:9px}}
@media(max-width:560px){.brand span{display:none}.hero-bottom{grid-template-columns:1fr}.round-cta{width:90px;height:90px}.project-stage{min-height:0}.project-visual{height:190px}.services-card{padding:18px}.service-row{padding:7px 0}.process-card{padding:20px}.steps article{padding:8px 0}.contact-actions{flex-direction:column}.contact-circle{width:92px;height:92px;padding:16px}.contact-card footer{font-size:8px}}


/* v23 — TYLKO widoczność kontrolek przewijania.
   Główna kontrolka .slide-step leży poza jasną kartą, na stałym ciemnym tle,
   więc zawsze musi być jasna. Wewnętrzna kontrolka projektu zachowuje kontrast z kartą. */
.slide-step{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.slide-step span{
  background:#ffffff !important;
  opacity:1 !important;
  box-shadow:0 0 4px rgba(0,0,0,.55);
}
#work .project-dark .project-step,
#work .project-red .project-step{
  color:#ffffff !important;
}
#work .project-dark .project-step span,
#work .project-red .project-step span{
  background:#ffffff !important;
  opacity:1 !important;
}
#work .project-light .project-step{
  color:#000000 !important;
}
#work .project-light .project-step span{
  background:#000000 !important;
  opacity:1 !important;
}


/* v24 — WYŁĄCZNIE zachowanie logo.
   Na starcie pełne logo zostaje bez zmian.
   Na kolejnych kartach pełne logo składa się do wąskiego pionowego paska przy lewej krawędzi,
   poza obszarem kart, więc ich nie zasłania. */
.brand{
  transform-origin:top left;
  transition:opacity .34s ease, transform .46s var(--ease), visibility 0s linear 0s;
}
.brand-rail{
  position:fixed;
  z-index:75;
  left:8px;
  top:50%;
  width:42px;
  min-height:220px;
  transform:translate(-58px,-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:10px 6px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(3,3,3,.66);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:opacity .34s ease, transform .46s var(--ease), visibility 0s linear .46s;
}
.brand-rail-mark{
  position:relative;
  width:28px;
  height:76px;
  display:block;
  overflow:visible;
}
.brand-rail-mark img{
  position:absolute;
  width:72px;
  height:auto;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  display:block;
}
.brand-rail-name{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:8px;
  font-weight:700;
  letter-spacing:.22em;
  color:#fff;
  white-space:nowrap;
}
body.logo-rail-active .brand{
  opacity:0;
  transform:translateX(-28px) scale(.9);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, transform .42s var(--ease), visibility 0s linear .42s;
}
body.logo-rail-active .brand-rail{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(0,-50%);
  transition:opacity .34s ease .08s, transform .46s var(--ease) .04s, visibility 0s linear 0s;
}
.brand-rail:hover{
  border-color:rgba(255,255,255,.32);
  background:rgba(5,5,5,.82);
}

/* Na mniejszych ekranach pasek staje się małym poziomym znakiem w nagłówku,
   aby nie nachodził na kartę ani na kontrolkę PRZEWIŃ. */
@media(max-width:900px){
  .brand-rail{
    left:10px;
    top:10px;
    width:auto;
    min-height:0;
    height:44px;
    transform:translateY(-70px);
    flex-direction:row;
    gap:8px;
    padding:6px 10px 6px 7px;
    border-radius:999px;
  }
  .brand-rail-mark{width:58px;height:28px;overflow:hidden}
  .brand-rail-mark img{width:82px;transform:translate(-50%,-50%) rotate(0deg)}
  .brand-rail-name{writing-mode:horizontal-tb;font-size:7px;letter-spacing:.16em}
  body.logo-rail-active .brand-rail{transform:translateY(0)}
}


/* v25 — SPEC-BUD case study. Reszta v24 bez zmian. */
.project-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.project-links .project-live-link{margin-top:0;border-bottom-color:rgba(255,255,255,.45);opacity:.82}
.project-case-link{border:0;border-bottom:1px solid currentColor;background:none;color:inherit;padding:0 0 5px;cursor:pointer;font:inherit;font-size:14px}
.project-case-link b,.project-live-link b{font-weight:400}
.case-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(18px,3vw,46px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.case-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
.case-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.case-modal-panel{position:relative;width:min(1180px,94vw);max-height:min(760px,90svh);overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(18,18,18,.98),rgba(7,7,7,.98));box-shadow:0 35px 100px rgba(0,0,0,.55);padding:clamp(28px,4vw,60px);color:#f5f5f1}
.case-modal-close{position:absolute;right:22px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.03);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.case-modal-kicker{font-size:10px;font-weight:800;letter-spacing:.22em;color:#aaa;margin-bottom:18px}
.case-modal-panel h2{max-width:940px;margin:0 0 36px;font-size:clamp(34px,4.3vw,66px);line-height:.95;letter-spacing:-.045em}
.case-modal-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(34px,6vw,84px);align-items:start}
.case-modal-copy{font-size:clamp(15px,1.3vw,18px);line-height:1.58;color:#cfcfca}
.case-modal-copy p{margin:0 0 18px}.case-modal-copy strong{color:#fff}
.case-modal-punch{margin-top:28px!important;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:clamp(18px,1.7vw,24px);line-height:1.35;color:#fff!important}
.case-modal-side{border-left:1px solid rgba(255,255,255,.14);padding-left:28px}
.case-modal-label{font-size:9px;letter-spacing:.2em;color:#777;margin-bottom:14px}
.case-live-button{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:14px 16px;font-size:16px;transition:.2s}
.case-live-button:hover{background:#fff;color:#111;border-color:#fff}
.case-modal-stack{margin-top:24px;font-size:10px;line-height:1.7;letter-spacing:.14em;color:#777}
body.case-open{overflow:hidden}
@media(max-width:760px){.case-modal-panel{border-radius:20px;padding:28px 22px}.case-modal-grid{grid-template-columns:1fr;gap:26px}.case-modal-side{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:22px 0 0}.case-modal-panel h2{margin-bottom:28px}.project-links{gap:12px}.project-case-link,.project-links .project-live-link{font-size:12px}}


/* v26 — delikatne dopracowanie tylko karty SPEC-BUD */
.specbud-tags span{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.project-dark .project-content h3{
  position:relative;
}
.project-dark .project-content h3::after{
  content:"";
  display:block;
  width:90px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(90,140,55,.95),rgba(90,140,55,0));
}
.project-dark .project-content p{
  color:rgba(255,255,255,.88);
  max-width:500px;
}
.project-links{
  gap:18px;
}
.project-case-link{
  border-bottom:0;
  padding:11px 16px;
  border-radius:999px;
  background:#f3f3ef;
  color:#0c0c0c;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.project-case-link:hover{
  transform:translateY(-1px);
  background:#ffffff;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.project-links .project-live-link{
  border-bottom:1px solid rgba(255,255,255,.55);
  opacity:.92;
  padding-bottom:4px;
}
.project-links .project-live-link:hover{
  opacity:1;
}
.visual-specbud{
  background:
    radial-gradient(circle at 24% 16%, rgba(111,150,70,.38), rgba(111,150,70,0) 26%),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.04), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 20% 10%, #35412c, #1d201b 45%, #0d0e0c);
}
.visual-specbud::before{
  content:"";
  position:absolute;
  inset:10% 6% 12% 7%;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(114,156,69,.16), rgba(255,255,255,0));
  filter:blur(16px);
  pointer-events:none;
}
.spec-logo span{
  color:#6b9d43;
}
.spec-pill{
  background:#121212;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
@media(max-width:760px){
  .project-case-link{padding:10px 14px;font-size:12px}
}


/* v28 — tylko dopracowanie karty SD RENT */
.project-red .project-tags span{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.06);
}
.project-red .project-content h3{
  position:relative;
}
.project-red .project-content h3::after{
  content:"";
  display:block;
  width:90px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));
}
.project-red .project-content p{
  color:rgba(255,255,255,.92);
  max-width:510px;
}
.sdrent-case-link{
  background:#fff;
  color:#a40b13;
}
.sdrent-case-link:hover{
  background:#fff;
  color:#85080f;
}
.project-red .project-live-link{
  border-bottom-color:rgba(255,255,255,.72);
  color:#fff;
}


/* v31 — tylko dolne PRZEWIŃ; jedna strzałka zmienia kierunek góra/dół */
.slide-step span{
  position:relative;
  overflow:visible;
}
.slide-step span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  animation:scrollArrowPingPong 2.2s ease-in-out infinite;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
@keyframes scrollArrowPingPong{
  0%{
    transform:translate(-50%,-12px) rotate(45deg);
    opacity:.65;
  }
  22%{
    transform:translate(-50%,8px) rotate(45deg);
    opacity:1;
  }
  48%{
    transform:translate(-50%,8px) rotate(225deg);
    opacity:1;
  }
  72%{
    transform:translate(-50%,-12px) rotate(225deg);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-12px) rotate(45deg);
    opacity:.65;
  }
}


/* v32 — jedna dolna kontrolka: napis nad strzałką, klik zgodny z kierunkiem */
.slide-step{
  gap:8px;
}
.slide-step .slide-step-label{
  font-style:normal;
  display:block;
}
.slide-step span{
  position:relative;
  overflow:visible;
}
.slide-step span::after{
  content:"";
  position:absolute;
  left:50%;
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.slide-step.dir-down span::after{
  bottom:-1px;
  transform:translateX(-50%) rotate(45deg);
  animation:smartArrowDown 1.25s ease-in-out infinite;
}
.slide-step.dir-up span::after{
  top:-1px;
  transform:translateX(-50%) rotate(225deg);
  animation:smartArrowUp 1.25s ease-in-out infinite;
}
@keyframes smartArrowDown{
  0%,100%{transform:translate(-50%,-1px) rotate(45deg);opacity:.75}
  50%{transform:translate(-50%,7px) rotate(45deg);opacity:1}
}
@keyframes smartArrowUp{
  0%,100%{transform:translate(-50%,1px) rotate(225deg);opacity:.75}
  50%{transform:translate(-50%,-7px) rotate(225deg);opacity:1}
}


/* v33 — napis PRZEWIŃ nad i pod strzałką */
.slide-step .slide-step-label{
  font-style:normal;
  display:block;
}
.slide-step .slide-step-label-top{
  margin-bottom:2px;
}
.slide-step .slide-step-label-bottom{
  margin-top:2px;
}


/* v34 — prawdziwe logotypy SPEC-BUD i SD RENT */
.project-company-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:18px 0 14px;
  padding:10px 16px;
  width:fit-content;
  max-width:min(100%,430px);
  border-radius:15px;
  background:#f7f8f8;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.project-company-logo img{
  display:block;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.project-company-logo-specbud img{
  height:clamp(64px,7.2vw,100px);
}
.project-company-logo-sdrent img{
  height:clamp(58px,6.5vw,88px);
}
.project-company-logo + p{
  margin-top:12px;
}

/* v34 — jedna dolna kontrolka; kierunek kliknięcia jest stały.
   Górne PRZEWIŃ = poprzedni ekran, dolne PRZEWIŃ = następny ekran.
   Strzałka tylko animuje się góra/dół i nie steruje kierunkiem kliknięcia. */
.slide-step{
  position:absolute;
  z-index:30;
  left:12px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  writing-mode:horizontal-tb;
  border:0;
  background:none;
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.slide-step-action{
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  padding:2px 3px;
  margin:0;
  cursor:pointer;
  font:inherit;
  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.slide-step-action:hover{
  opacity:.72;
}
.slide-step-arrow{
  position:relative;
  display:block;
  width:1px;
  height:44px;
  background:#fff !important;
  box-shadow:0 0 4px rgba(0,0,0,.55);
  opacity:1 !important;
  animation:none !important;
}
.slide-step-arrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:9px;
  height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  animation:v34ArrowTravel 2.4s ease-in-out infinite;
}
@keyframes v34ArrowTravel{
  0%{
    top:0;
    transform:translateX(-50%) rotate(45deg);
    opacity:.7;
  }
  42%{
    top:34px;
    transform:translateX(-50%) rotate(45deg);
    opacity:1;
  }
  50%{
    top:34px;
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  92%{
    top:0;
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  100%{
    top:0;
    transform:translateX(-50%) rotate(45deg);
    opacity:.7;
  }
}
@media(max-width:900px){
  .project-company-logo{
    padding:8px 12px;
    border-radius:12px;
  }
  .project-company-logo-specbud img{height:72px}
  .project-company-logo-sdrent img{height:62px}
  .slide-step{left:8px;bottom:10px;gap:5px}
  .slide-step-arrow{height:36px}
  @keyframes v34ArrowTravel{
    0%{top:0;transform:translateX(-50%) rotate(45deg);opacity:.7}
    42%{top:26px;transform:translateX(-50%) rotate(45deg);opacity:1}
    50%{top:26px;transform:translateX(-50%) rotate(225deg);opacity:1}
    92%{top:0;transform:translateX(-50%) rotate(225deg);opacity:1}
    100%{top:0;transform:translateX(-50%) rotate(45deg);opacity:.7}
  }
}

/* v41 — lepsze wyrównanie podpisu pod logo */
.brand{
  align-items:center;
  gap:4px;
}
.brand img{
  margin:0 auto;
}
.brand span{
  margin-left:0;
  display:block;
  width:100%;
  text-align:center;
  font-size:7.2px;
  letter-spacing:.15em;
  white-space:nowrap;
}
.brand b{
  display:inline-block;
  margin:0 7px;
}
@media(max-width:900px){
  .brand{
    align-items:center;
  }
  .brand span{
    margin-left:0;
    width:100%;
    text-align:center;
    font-size:5.2px;
    letter-spacing:.11em;
  }
  .brand b{
    margin:0 6px;
  }
}


/* v42 — formularz kontaktowy otwierany z e-maila i koła */
.contact-email-link{
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.6);
  background:none;
  color:#fff;
  padding:0 0 7px;
  font:inherit;
  font-size:clamp(22px,2.4vw,36px);
  cursor:pointer;
}
.contact-email-link:hover{opacity:.82}
.contact-circle{
  border:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.contact-modal{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,44px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.contact-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,visibility 0s;
}
.contact-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(12px);
}
.contact-modal-panel{
  position:relative;
  width:min(1050px,94vw);
  max-height:92svh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(18,18,18,.99),rgba(6,6,6,.99));
  box-shadow:0 36px 110px rgba(0,0,0,.62);
  padding:clamp(28px,4vw,58px);
  color:#f5f5f1;
}
.contact-modal-close{
  position:absolute;
  right:20px;
  top:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.contact-modal-kicker{
  margin:0 0 16px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  color:#aaa;
}
.contact-modal-panel h2{
  max-width:780px;
  margin:0 0 34px;
  font-size:clamp(36px,4.6vw,68px);
  line-height:.94;
  letter-spacing:-.05em;
}
.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 22px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-form label>span{
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#aaa;
}
.contact-form label>span em{
  font-style:normal;
  font-weight:400;
  color:#666;
  text-transform:none;
  letter-spacing:0;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:14px 15px;
  font:inherit;
  outline:none;
  transition:border-color .18s ease,background .18s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07);
}
.contact-form select option{color:#111}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form-message{margin-top:18px}
.contact-form-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:22px;
}
.contact-form-footer p{
  margin:0;
  color:#777;
  font-size:12px;
}
.contact-submit{
  border:0;
  border-radius:999px;
  background:#fff;
  color:#111;
  padding:14px 20px;
  cursor:pointer;
  font-weight:700;
}
.contact-submit:disabled{
  opacity:.6;
  cursor:wait;
}
.contact-form-status{
  min-height:22px;
  margin-top:16px;
  font-size:13px;
}
.contact-form-status.is-success{color:#b8ff6a}
.contact-form-status.is-error{color:#ff8d94}
.contact-hp{
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.contact-open{overflow:hidden}
@media(max-width:720px){
  .contact-modal-panel{
    border-radius:20px;
    padding:28px 20px;
  }
  .contact-form-grid{grid-template-columns:1fr}
  .contact-form-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* v44 — strzałka dochodzi do samej góry i dołu, a obrót idzie płynnie w kółko */
.slide-step-arrow::after{
  animation:v44ArrowLoop 2.45s linear infinite !important;
}

@keyframes v44ArrowLoop{
  0%{
    top:-1px;
    transform:translateX(-50%) rotate(45deg);
    opacity:.78;
  }
  42%{
    top:calc(100% - 9px);
    transform:translateX(-50%) rotate(45deg);
    opacity:1;
  }
  50%{
    top:calc(100% - 9px);
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  92%{
    top:-1px;
    transform:translateX(-50%) rotate(405deg);
    opacity:1;
  }
  100%{
    top:-1px;
    transform:translateX(-50%) rotate(405deg);
    opacity:.78;
  }
}

@media(max-width:900px){
  .slide-step-arrow::after{
    animation:v44ArrowLoopMobile 2.45s linear infinite !important;
  }

  @keyframes v44ArrowLoopMobile{
    0%{
      top:-1px;
      transform:translateX(-50%) rotate(45deg);
      opacity:.78;
    }
    42%{
      top:calc(100% - 9px);
      transform:translateX(-50%) rotate(45deg);
      opacity:1;
    }
    50%{
      top:calc(100% - 9px);
      transform:translateX(-50%) rotate(225deg);
      opacity:1;
    }
    92%{
      top:-1px;
      transform:translateX(-50%) rotate(405deg);
      opacity:1;
    }
    100%{
      top:-1px;
      transform:translateX(-50%) rotate(405deg);
      opacity:.78;
    }
  }
}


/* v45 — spokojniejszy i bardziej naturalny ruch strzałki */
.slide-step-arrow::after{
  animation:v45ArrowMotion 2.8s ease-in-out infinite !important;
  top:-1px;
}

@keyframes v45ArrowMotion{
  0%{
    top:-1px;
    transform:translateX(-50%) rotate(45deg);
    opacity:.78;
  }
  35%{
    top:calc(100% - 9px);
    transform:translateX(-50%) rotate(45deg);
    opacity:1;
  }
  45%{
    top:calc(100% - 9px);
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  50%{
    top:calc(100% - 9px);
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  85%{
    top:-1px;
    transform:translateX(-50%) rotate(225deg);
    opacity:1;
  }
  95%{
    top:-1px;
    transform:translateX(-50%) rotate(405deg);
    opacity:1;
  }
  100%{
    top:-1px;
    transform:translateX(-50%) rotate(405deg);
    opacity:.78;
  }
}

@media(max-width:900px){
  .slide-step-arrow::after{
    animation:v45ArrowMotionMobile 2.8s ease-in-out infinite !important;
    top:-1px;
  }

  @keyframes v45ArrowMotionMobile{
    0%{
      top:-1px;
      transform:translateX(-50%) rotate(45deg);
      opacity:.78;
    }
    35%{
      top:calc(100% - 9px);
      transform:translateX(-50%) rotate(45deg);
      opacity:1;
    }
    45%{
      top:calc(100% - 9px);
      transform:translateX(-50%) rotate(225deg);
      opacity:1;
    }
    50%{
      top:calc(100% - 9px);
      transform:translateX(-50%) rotate(225deg);
      opacity:1;
    }
    85%{
      top:-1px;
      transform:translateX(-50%) rotate(225deg);
      opacity:1;
    }
    95%{
      top:-1px;
      transform:translateX(-50%) rotate(405deg);
      opacity:1;
    }
    100%{
      top:-1px;
      transform:translateX(-50%) rotate(405deg);
      opacity:.78;
    }
  }
}


/* v46 — kółko na starcie prowadzi bezpośrednio do realizacji */
.round-cta{
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.round-cta b{
  transition:transform .22s ease;
}
.round-cta:hover{
  transform:scale(1.035);
}
.round-cta:hover b{
  transform:translate(4px,4px);
}


/* v48 — tylko mocniejszy kolor ramki w sekcji realizacji */
.work-card-shell{
  border:1px solid rgba(215,21,29,.34) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}


/* v49 — tylko mocniejsza i bardziej premium ramka sekcji realizacji */
.work-card-shell{
  border:1.5px solid rgba(255,42,58,.72) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 0 1px rgba(255,42,58,.18),
    0 0 28px rgba(255,42,58,.10) !important;
}


/* v50 — taka sama mocniejsza ramka także w sekcji usług */
.services-card{
  border:1.5px solid rgba(255,42,58,.72) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 0 1px rgba(255,42,58,.18),
    0 0 28px rgba(255,42,58,.10) !important;
}


/* v51 — subtelna premium ramka tylko dla jasnej karty "Nie robimy szablonów" */
.statement-card{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    0 18px 50px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.55) inset;
}


/* v52 — wyraźniejsza, ale nadal elegancka ramka tylko jasnej karty */
.statement-card{
  border:1.5px solid rgba(20,20,20,.28) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
}


/* v53 — widoczna elegancka ramka także dla białej karty "Jak pracujemy" */
.process-card{
  border:1.5px solid rgba(20,20,20,.28) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
}


/* v54 — tylko sekcja "Jak pracujemy": wyraźna widoczna ramka */
.process-card{
  position: relative;
  border: 2px solid rgba(58,58,58,.36) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.70) inset !important;
}

.process-card::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  pointer-events:none;
}


/* v55 — poprawa wyłącznie ramki sekcji "Jak pracujemy" */
.process-card{
  border: 1.5px solid rgba(0,0,0,.16) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.82) inset !important;
}

.process-card::after{
  inset: 14px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 20px !important;
}


/* v56 — tylko zmiana koloru ramki sekcji "Jak pracujemy" */
.process-card{
  border: 2px solid rgba(190,18,28,.78) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.16),
    0 0 0 1px rgba(190,18,28,.18) inset,
    0 0 24px rgba(190,18,28,.12) !important;
}

.process-card::after{
  border: 1px solid rgba(190,18,28,.22) !important;
}


/* v57 — tylko sekcja "Jak pracujemy": jeszcze mocniejsza i czytelniejsza ramka */
.process-card{
  border: 3px solid rgba(190,18,28,.96) !important;
  box-shadow:
    0 0 0 1px rgba(190,18,28,.40),
    0 18px 48px rgba(0,0,0,.18),
    0 0 30px rgba(190,18,28,.18),
    0 0 0 1px rgba(255,255,255,.45) inset !important;
}

.process-card::after{
  border: 1px solid rgba(190,18,28,.34) !important;
}


/* v58 — tylko druga biała karta: wyraźna ramka sekcji "Budujemy strony..." */
.statement-card{
  border: 3px solid rgba(190,18,28,.92) !important;
  box-shadow:
    0 0 0 1px rgba(190,18,28,.42),
    0 18px 48px rgba(0,0,0,.12),
    0 0 28px rgba(190,18,28,.14),
    0 0 0 1px rgba(255,255,255,.48) inset !important;
}


/* v59 — tylko czerwona karta kontaktowa: wyraźna ramka */
.contact-card{
  border: 3px solid rgba(255,255,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 0 1px rgba(0,0,0,.12),
    0 22px 48px rgba(0,0,0,.16),
    0 0 24px rgba(255,255,255,.08) !important;
}

/* v68 — wyłącznie animacja białego koła „Napisz do nas” i jego strzałki.
   Usunięto nakładające się reguły z v61–v67, które powodowały konflikt. */
.contact-circle{
  --contact-arrow-radius:54px;
  position:relative;
  overflow:hidden;
  animation:contactCircleFloat 3.4s ease-in-out infinite;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}
.contact-circle b{
  position:absolute;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:22px;
  height:22px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  animation:none;
  transform:translate(-50%,-50%) rotate(135deg)
            translateY(calc(-1 * var(--contact-arrow-radius)))
            rotate(-135deg);
  transform-origin:center;
  will-change:transform;
}
.contact-circle:hover{
  animation-play-state:paused;
  transform:translateY(-2px) scale(1.035);
  box-shadow:0 18px 42px rgba(0,0,0,.20);
}
.contact-circle:hover b{
  animation:contactArrowRimV68 12s linear infinite;
  animation-play-state:running;
}
.contact-circle:active{
  transform:translateY(0) scale(.985);
}
@keyframes contactCircleFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.018)}
}
@keyframes contactArrowRimV68{
  from{
    transform:translate(-50%,-50%) rotate(135deg)
              translateY(calc(-1 * var(--contact-arrow-radius)))
              rotate(-135deg);
  }
  to{
    transform:translate(-50%,-50%) rotate(495deg)
              translateY(calc(-1 * var(--contact-arrow-radius)))
              rotate(-495deg);
  }
}
@media(max-width:900px){
  .contact-circle{--contact-arrow-radius:40px}
}
@media(max-width:560px){
  .contact-circle{--contact-arrow-radius:32px}
}
@media (prefers-reduced-motion: reduce){
  .contact-circle{animation:none}
  /* Ruch strzałki po hoverze pozostaje aktywny, bo jest uruchamiany świadomie przez użytkownika. */
}


/* v69 — tylko strzałka w białym kole: pewny ruch zgodnie z ruchem zegara.
   Start: dół-prawo. Po hoverze: dół -> lewo -> góra -> prawo -> dół-prawo.
   Strzałka cały czas pozostaje ustawiona ↗. */
.contact-circle{
  --contact-arrow-diag:38px;
}
.contact-circle b{
  left:calc(50% + var(--contact-arrow-diag)) !important;
  top:calc(50% + var(--contact-arrow-diag)) !important;
  transform:translate(-50%,-50%) !important;
  animation:none !important;
}
.contact-circle:hover b{
  animation:contactArrowClockwiseV69 12s linear infinite !important;
}
@keyframes contactArrowClockwiseV69{
  0%,100%{
    left:calc(50% + var(--contact-arrow-diag));
    top:calc(50% + var(--contact-arrow-diag));
    transform:translate(-50%,-50%);
  }
  12.5%{
    left:50%;
    top:calc(50% + var(--contact-arrow-radius));
    transform:translate(-50%,-50%);
  }
  25%{
    left:calc(50% - var(--contact-arrow-diag));
    top:calc(50% + var(--contact-arrow-diag));
    transform:translate(-50%,-50%);
  }
  37.5%{
    left:calc(50% - var(--contact-arrow-radius));
    top:50%;
    transform:translate(-50%,-50%);
  }
  50%{
    left:calc(50% - var(--contact-arrow-diag));
    top:calc(50% - var(--contact-arrow-diag));
    transform:translate(-50%,-50%);
  }
  62.5%{
    left:50%;
    top:calc(50% - var(--contact-arrow-radius));
    transform:translate(-50%,-50%);
  }
  75%{
    left:calc(50% + var(--contact-arrow-diag));
    top:calc(50% - var(--contact-arrow-diag));
    transform:translate(-50%,-50%);
  }
  87.5%{
    left:calc(50% + var(--contact-arrow-radius));
    top:50%;
    transform:translate(-50%,-50%);
  }
}
@media(max-width:900px){
  .contact-circle{--contact-arrow-diag:28px}
}
@media(max-width:560px){
  .contact-circle{--contact-arrow-diag:23px}
}


/* v70 — TYLKO białe koło "Napisz do nas".
   Tor zgodny z rysunkiem użytkownika:
   start dół-prawo -> w górę prawą stroną -> góra -> lewa strona -> dół -> powrót.
   Strzałka jedzie po wewnętrznym rancie i obraca się zgodnie z kierunkiem jazdy. */
.contact-circle{
  --contact-orbit-radius:52px;
}

.contact-circle > .contact-arrow-orbit{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  font-size:inherit !important;
  line-height:1 !important;
  transform:rotate(45deg) !important;
  transform-origin:0 0 !important;
  animation:none !important;
  pointer-events:none;
  z-index:3;
}

.contact-circle > .contact-arrow-orbit > span{
  position:absolute;
  left:var(--contact-orbit-radius);
  top:0;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  line-height:1;
  transform:translate(-50%,-50%) rotate(-45deg);
  transform-origin:center;
}

.contact-circle:hover > .contact-arrow-orbit{
  animation:contactArrowOrbitV70 14s linear infinite !important;
}

/* Ujemny obrót = z pozycji dół-prawo strzałka jedzie NAJPIERW W GÓRĘ prawym bokiem,
   dokładnie jak na narysowanym niebieskim torze. */
@keyframes contactArrowOrbitV70{
  from{ transform:rotate(45deg); }
  to{ transform:rotate(-315deg); }
}

@media(max-width:900px){
  .contact-circle{--contact-orbit-radius:39px}
}

@media(max-width:560px){
  .contact-circle{--contact-orbit-radius:31px}
}

@media (prefers-reduced-motion: reduce){
  .contact-circle:hover > .contact-arrow-orbit{
    animation:none !important;
  }
}


/* v71 — FINALNA korekta WYŁĄCZNIE toru strzałki w białym kole.
   Start: dół-prawo. Po hoverze strzałka idzie NAJPIERW W GÓRĘ prawym bokiem,
   potem górą, lewym bokiem, dołem i wraca do startu — zgodnie z rysunkiem użytkownika.
   Ruch jest wolny: pełne okrążenie 18 s. */
.contact-circle{
  --contact-track-r:55px;
  --contact-track-d:39px;
}

/* Zerujemy tylko stare transformacje/animacje tego jednego elementu, żeby nie kolidowały. */
.contact-circle > .contact-arrow-orbit{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  animation:none !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.contact-circle > .contact-arrow-orbit > span{
  position:absolute !important;
  left:var(--contact-track-d);
  top:var(--contact-track-d);
  width:24px !important;
  height:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1 !important;
  transform:translate(-50%,-50%) !important;
  rotate:0deg;
  animation:none !important;
  will-change:left, top, rotate;
}

.contact-circle:hover > .contact-arrow-orbit > span{
  animation:contactArrowDrawnTrackV71 18s linear infinite !important;
}

@keyframes contactArrowDrawnTrackV71{
  0%,100%{
    left:var(--contact-track-d);
    top:var(--contact-track-d);
    rotate:0deg;
  }
  12.5%{
    left:var(--contact-track-r);
    top:0px;
    rotate:-45deg;
  }
  25%{
    left:var(--contact-track-d);
    top:calc(-1 * var(--contact-track-d));
    rotate:-90deg;
  }
  37.5%{
    left:0px;
    top:calc(-1 * var(--contact-track-r));
    rotate:-135deg;
  }
  50%{
    left:calc(-1 * var(--contact-track-d));
    top:calc(-1 * var(--contact-track-d));
    rotate:-180deg;
  }
  62.5%{
    left:calc(-1 * var(--contact-track-r));
    top:0px;
    rotate:-225deg;
  }
  75%{
    left:calc(-1 * var(--contact-track-d));
    top:var(--contact-track-d);
    rotate:-270deg;
  }
  87.5%{
    left:0px;
    top:var(--contact-track-r);
    rotate:-315deg;
  }
}

@media(max-width:900px){
  .contact-circle{--contact-track-r:42px;--contact-track-d:30px}
}
@media(max-width:560px){
  .contact-circle{--contact-track-r:35px;--contact-track-d:25px}
}
@media (prefers-reduced-motion: reduce){
  .contact-circle:hover > .contact-arrow-orbit > span{animation:none !important}
}


/* v72 — naprawa techniczna: left/top strzałki nie są już !important,
   dzięki czemu keyframes faktycznie przesuwają ją po narysowanym torze. */


/* v73 — WYŁĄCZNIE przeniesienie bocznych elementów.
   Pionowe logo SD CREATIVE + PRZEWIŃ przechodzą z lewej na prawą stronę.
   Licznik slajdów przechodzi z prawego do lewego dołu, żeby elementy się nie nakładały. */
.brand-rail{
  left:auto !important;
  right:8px !important;
  transform:translate(58px,-50%) !important;
}
body.logo-rail-active .brand-rail{
  transform:translate(0,-50%) !important;
}

.slide-step{
  left:auto !important;
  right:12px !important;
}

.slide-count{
  right:auto !important;
  left:18px !important;
}

@media(max-width:900px){
  .brand-rail{
    left:auto !important;
    right:10px !important;
    transform:translateY(-70px) !important;
  }
  body.logo-rail-active .brand-rail{
    transform:translateY(0) !important;
  }

  .slide-step{
    left:auto !important;
    right:8px !important;
  }

  .slide-count{
    right:auto !important;
    left:12px !important;
  }
}


/* =========================================================
   v74 — MOBILE / TOUCH
   Tylko urządzenia mobilne. Desktop bez zmian.
   ========================================================= */

.deck{overscroll-behavior:none}

@media (pointer:coarse){
  a,button,input,select,textarea{touch-action:manipulation}
}

@media(max-width:900px){
  html,body{
    width:100%;
    min-height:100%;
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%;
  }

  .deck{
    height:100svh;
    min-height:100svh;
    touch-action:pan-y;
  }

  .site-header{
    padding-top:max(10px,env(safe-area-inset-top));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }

  .slide-inner{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:max(38px,calc(env(safe-area-inset-bottom) + 28px));
  }

  /* Działające menu mobilne — wykorzystuje istniejące linki. */
  .menu-btn{
    position:relative;
    z-index:92;
    min-width:48px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:0;
    cursor:pointer;
    touch-action:manipulation;
  }

  .main-nav{
    display:flex !important;
    position:fixed;
    z-index:91;
    top:max(62px,calc(env(safe-area-inset-top) + 54px));
    right:max(12px,env(safe-area-inset-right));
    width:min(250px,calc(100vw - 24px));
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    margin:0;
    padding:10px;
    border-radius:20px;
    background:rgba(3,3,3,.94);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 18px 50px rgba(0,0,0,.38);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.98);
    transform-origin:top right;
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }

  .main-nav.is-mobile-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:opacity .2s ease,transform .2s ease,visibility 0s;
  }

  .main-nav a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 12px;
    border-radius:12px;
    opacity:1;
  }

  .main-nav .nav-cta{
    justify-content:center;
    margin-top:4px;
  }

  /* Prawy pasek logo nie nachodzi już na przycisk Menu. */
  .brand-rail{
    top:max(66px,calc(env(safe-area-inset-top) + 58px)) !important;
    right:max(10px,env(safe-area-inset-right)) !important;
  }

  body.mobile-menu-open .brand-rail{
    opacity:0 !important;
    pointer-events:none !important;
  }

  .slide-step{
    right:max(7px,env(safe-area-inset-right)) !important;
    bottom:max(9px,env(safe-area-inset-bottom)) !important;
  }

  .slide-step-action{
    min-width:34px;
    min-height:34px;
    padding:5px 4px;
  }

  .slide-count{
    left:max(12px,env(safe-area-inset-left)) !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }

  .project-case-link,
  .project-live-link,
  .project-step,
  .contact-email-link,
  .contact-circle{
    touch-action:manipulation;
  }
}

/* Małe telefony — kompresja istniejącego układu bez usuwania treści. */
@media(max-width:600px){
  :root{--header-h:82px}

  .brand img{width:min(210px,58vw)}

  .hero-copy{margin-bottom:10px}
  .hero-copy h1{font-size:clamp(34px,10.5vw,52px)}
  .hero-bottom{gap:12px;margin-top:18px}
  .hero-bottom p{font-size:13px;line-height:1.4}
  .round-cta{width:86px;height:86px;padding:15px;font-size:11px}

  .statement-card{padding:22px}
  .statement-card h2{font-size:clamp(34px,9vw,52px)}
  .meta-row{margin-top:26px;padding-top:12px;font-size:9px}

  .work-card-shell{padding:13px;gap:7px}
  .work-head{gap:4px}
  .work-head h2{font-size:30px}
  .work-head>p{font-size:10.5px;line-height:1.3}
  .project-card{padding:13px;gap:8px}
  .project-content{padding-right:18px}
  .project-tags span{padding:4px 7px;font-size:8px}
  .project-company-logo{margin:8px 0 7px;padding:6px 9px}
  .project-company-logo-specbud img{height:54px}
  .project-company-logo-sdrent img{height:46px}
  .project-content p{margin:7px 0;font-size:11px;line-height:1.3}
  .project-links{margin-top:8px;gap:9px}
  .project-case-link,
  .project-links .project-live-link{font-size:10.5px}
  .project-visual{height:132px}
  .rent-copy{font-size:34px}

  .services-card{padding:14px 16px}
  .services-head{margin-bottom:7px;gap:5px}
  .services-head h2{font-size:34px}
  .services-head>p{font-size:10.5px;line-height:1.3}
  .service-row{grid-template-columns:24px 1fr;gap:5px 8px;padding:5px 0}
  .service-row h3{font-size:20px}
  .service-row p{font-size:10px;line-height:1.2}

  .process-card{padding:19px;gap:12px}
  .process-intro h2{font-size:40px}
  .steps article{padding:7px 0}
  .steps h3{font-size:21px}
  .steps p{font-size:10.5px;line-height:1.25}

  .contact-card{padding:22px}
  .contact-card h2{font-size:clamp(40px,10.5vw,56px)}
  .contact-actions{gap:14px;margin-top:22px}
  .contact-email-link{font-size:clamp(19px,5.5vw,26px)}
  .contact-card footer{margin-top:20px}

  .case-modal,
  .contact-modal{
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  .case-modal-panel,
  .contact-modal-panel{
    max-height:calc(100svh - 20px);
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:600px) and (max-height:700px){
  .slide-inner{
    padding-top:calc(var(--header-h) + 2px);
    padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 22px));
  }

  .project-visual{height:105px}
  .project-company-logo-specbud img{height:46px}
  .project-company-logo-sdrent img{height:40px}

  .services-head h2{font-size:30px}
  .service-row{padding:3px 0}
  .service-row h3{font-size:18px}
  .service-row p{font-size:9.5px}

  .process-intro h2{font-size:35px}
  .steps article{padding:5px 0}
  .steps h3{font-size:19px}

  .contact-circle{
    width:82px;
    height:82px;
    padding:14px;
  }
}


/* v75 — wyłącznie linki do polityki prywatności */
.contact-card footer .privacy-footer-link{
  color:inherit;
  text-decoration:none;
  opacity:.84;
}
.contact-card footer .privacy-footer-link:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px;
}
.privacy-form-link{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:600px){
  .contact-card footer{
    gap:8px;
    flex-wrap:wrap;
  }
}


/* =========================================================
   v77 — MOBILE UX
   Tylko telefony/tablety. Desktop pozostaje bez zmian.
   ========================================================= */
@media(max-width:600px){
  :root{--header-h:70px}

  .site-header{
    height:70px;
    align-items:flex-start;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }

  .brand img{width:min(195px,52vw)}

  /* Na kolejnych ekranach znak SD stoi w nagłówku po lewej, Menu po prawej.
     Nie nachodzi już na kartę. */
  .brand-rail{
    left:max(12px,env(safe-area-inset-left)) !important;
    right:auto !important;
    top:max(10px,env(safe-area-inset-top)) !important;
    height:44px !important;
    max-width:160px;
    transform:translateY(-70px) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.26);
  }
  body.logo-rail-active .brand-rail{transform:translateY(0) !important}
  .brand-rail-mark{width:50px;height:27px}
  .brand-rail-mark img{width:76px}
  .brand-rail-name{font-size:6.7px;letter-spacing:.13em}

  .menu-btn{
    min-width:72px;
    height:44px;
    padding:0 16px;
    font-size:15px;
    background:rgba(5,5,5,.78);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  .slide-inner{
    padding-top:calc(var(--header-h) + 10px);
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(62px,calc(env(safe-area-inset-bottom) + 54px));
  }

  .content-card{border-radius:22px}

  /* Zamiast pionowego napisu nachodzącego na kartę — kompaktowe sterowanie
     w dolnym ciemnym marginesie. */
  .slide-step,
  .light-step{
    left:50% !important;
    right:auto !important;
    bottom:max(9px,env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    writing-mode:horizontal-tb !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    min-height:38px;
    padding:4px 7px;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px;
    background:rgba(4,4,4,.72) !important;
    color:#fff !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 22px rgba(0,0,0,.24);
  }
  .slide-step-arrow{display:none !important}
  .slide-step-action{
    writing-mode:horizontal-tb !important;
    min-width:72px !important;
    min-height:28px !important;
    padding:4px 8px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-size:8px !important;
    letter-spacing:.13em !important;
    line-height:1 !important;
    border-radius:999px;
  }
  .slide-step-up::before{content:"↑";font-size:14px;margin-right:6px;letter-spacing:0}
  .slide-step-down::after{content:"↓";font-size:14px;margin-left:6px;letter-spacing:0}
  .slide-count{
    left:max(12px,env(safe-area-inset-left)) !important;
    right:auto !important;
    bottom:max(19px,calc(env(safe-area-inset-bottom) + 10px)) !important;
    z-index:31;
  }

  /* Biała karta — czytelniejszy skład na telefonie. */
  .statement-card{padding:28px 24px}
  .statement-card h2{
    font-size:clamp(31px,8.2vw,40px);
    line-height:.96;
    letter-spacing:-.048em;
  }
  .statement-card .eyebrow{margin-bottom:20px;font-size:9px;letter-spacing:.22em}
  .meta-row{
    gap:10px 18px;
    margin-top:32px;
    padding-top:14px;
    font-size:8.5px;
    line-height:1.35;
  }

  /* REALIZACJE — karta przystosowana do telefonu i gestu lewo/prawo. */
  .work-card-shell{
    padding:12px;
    gap:8px;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .work-head{gap:4px}
  .work-head .eyebrow{margin-bottom:7px;font-size:8px}
  .work-head h2{font-size:28px;line-height:.9}
  .work-head>p{font-size:10px;line-height:1.25;max-width:95%}

  .project-stage{
    min-height:0;
    border-radius:16px;
    touch-action:pan-y;
    overscroll-behavior:contain;
  }
  .project-card{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(105px,1fr);
    align-content:stretch;
    gap:7px;
    padding:12px;
    border-radius:16px;
    transform:translateX(105%);
    transition:transform .46s var(--ease),opacity .25s ease,visibility 0s linear .46s;
  }
  .project-stage.project-back .project-card:not(.is-active):not(.is-leaving){transform:translateX(-105%)}
  .project-card.is-active{
    transform:translateX(0);
    transition:transform .46s var(--ease),opacity .25s ease;
  }
  .project-stage.project-forward .project-card.is-leaving{transform:translateX(-105%)}
  .project-stage.project-back .project-card.is-leaving{transform:translateX(105%)}

  .project-index{right:11px;top:10px;font-size:9px}
  .project-content{padding-right:20px;align-self:start}
  .project-tags{gap:4px;padding-right:24px}
  .project-tags span{padding:4px 6px;font-size:7px}
  .project-company-logo{margin:6px 0;padding:5px 8px;border-radius:10px}
  .project-company-logo-specbud img{height:44px}
  .project-company-logo-sdrent img{height:39px}
  .project-content h3{font-size:34px;margin:8px 0 7px}
  .project-content p{margin:6px 0;font-size:10.5px;line-height:1.28;max-width:none}
  .project-links{margin-top:7px;gap:10px}
  .project-case-link,
  .project-links .project-live-link,
  .project-content>a{font-size:10px;margin-top:0;padding-bottom:3px}
  .project-visual{height:auto;min-height:105px;border-radius:12px}
  .mock-window{height:80%;top:10%;border-radius:10px}
  .mock-bar{height:22px}
  .mock-screen{height:calc(100% - 22px);padding:14px}
  .spec-logo{font-size:12px}
  .spec-heading{font-size:22px;margin-top:18px}
  .spec-pill{margin-top:10px;padding:6px 8px;font-size:7px}
  .rent-copy{font-size:30px}
  .car-silhouette{font-size:100px}
  .next-word{font-size:54px}

  .project-step{
    left:auto !important;
    right:8px !important;
    bottom:8px !important;
    writing-mode:horizontal-tb !important;
    min-height:32px;
    padding:6px 9px !important;
    gap:0 !important;
    border:1px solid currentColor !important;
    border-radius:999px;
    background:rgba(0,0,0,.24) !important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    font-size:6.8px !important;
    letter-spacing:.1em !important;
  }
  .project-light .project-step{background:rgba(255,255,255,.52) !important}
  .project-step span{display:none !important}
  .project-step::after{content:"  →";font-size:12px;letter-spacing:0;margin-left:5px}

  .project-dots{
    min-height:24px;
    gap:2px;
    align-items:center;
  }
  .project-dots button{
    position:relative;
    width:40px;
    height:24px;
    padding:0;
    background:transparent !important;
  }
  .project-dots button::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:24px;height:3px;
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:rgba(255,255,255,.24);
    transition:width .2s ease,background .2s ease;
  }
  .project-dots button.is-active::after{width:36px;background:rgba(255,255,255,.9)}

  /* Pozostałe karty — mniej ścisku przy zachowaniu wszystkich treści. */
  .services-card{padding:16px 17px}
  .services-head{margin-bottom:8px}
  .services-head h2{font-size:32px}
  .services-head>p{font-size:10.5px}
  .service-row{padding:5px 0;gap:5px 8px}
  .service-row h3{font-size:19px}
  .service-row p{font-size:9.8px;line-height:1.22}

  .process-card{padding:22px 20px;gap:14px}
  .process-intro h2{font-size:38px}
  .steps article{padding:7px 0}
  .steps h3{font-size:20px}
  .steps p{font-size:10px;line-height:1.25}

  .contact-card{padding:24px 22px}
  .contact-card h2{font-size:clamp(38px,10vw,52px)}
  .contact-actions{margin-top:22px;gap:15px}
  .contact-email-link{font-size:clamp(18px,5.2vw,24px)}
  .contact-card footer{margin-top:20px}
}

/* Bardzo wąskie telefony. */
@media(max-width:380px){
  .brand-rail{max-width:145px}
  .brand-rail-name{display:none}
  .statement-card{padding:24px 19px}
  .statement-card h2{font-size:30px}
  .slide-step-action{min-width:62px !important;font-size:7px !important}
  .project-company-logo-specbud img{height:40px}
  .project-company-logo-sdrent img{height:35px}
  .project-content p{font-size:10px}
}

/* Krótkie ekrany telefonów. */
@media(max-width:600px) and (max-height:700px){
  .slide-inner{padding-top:74px;padding-bottom:56px}
  .work-head>p{display:none}
  .project-company-logo-specbud img{height:38px}
  .project-company-logo-sdrent img{height:34px}
  .project-content p{font-size:9.7px;line-height:1.2}
  .project-visual{min-height:82px}
  .services-head>p{display:none}
  .service-row{padding:3px 0}
  .process-intro h2{font-size:34px}
  .steps article{padding:5px 0}
}


/* 2026-10-01 v2 — wyłącznie istniejący przycisk zmiany projektu. */
#work .project-step{
 left:24px !important;right:auto !important;bottom:18px !important;
 writing-mode:horizontal-tb !important;min-height:44px;
 padding:12px 18px !important;gap:10px !important;
 border:1px solid rgba(255,255,255,.75) !important;border-radius:999px;
 background:var(--red) !important;color:#fff !important;
 font-size:12px !important;line-height:18px;font-weight:700;letter-spacing:.08em !important;
 cursor:pointer;
}
#work .project-step span{display:none !important;}
#work .project-step::after{content:"→";font-size:22px;line-height:18px;margin-left:4px;}
#work .project-step:hover{background:#fff !important;color:var(--red) !important;border-color:#fff !important;}
#work .project-step:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@media(max-width:900px){
 #work .project-step{left:auto !important;right:12px !important;bottom:12px !important;min-height:44px;padding:10px 14px !important;font-size:10px !important;gap:8px !important;}
}