/* Closed sprint: the light "Co robimy" section between Hero and Realizacje. */
.cd-services{
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:var(--bone);
  color:var(--ink);
  border-top:1px solid var(--rule);
  padding-block:clamp(76px,4.5vw,86px) clamp(72px,4.1vw,80px);
}
.cd-services__layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(360px,1fr);
  grid-template-areas:
    "intro visual"
    "list visual"
    "cta visual";
  column-gap:clamp(40px,4vw,72px);
  align-items:start;
}
.cd-services__intro{grid-area:intro;min-width:0}
.cd-services__eyebrow{
  margin-bottom:clamp(25px,2vw,34px);
  color:#5f544e;
  letter-spacing:.18em;
}
.cd-services__eyebrow:before{
  content:"";
  width:5px;
  height:5px;
  margin-right:14px;
  border-radius:50%;
  background:var(--cherry);
}
.cd-services__title{
  max-width:12.7em;
  font:500 clamp(50px,3.8vw,72px)/.99 var(--font-display);
  letter-spacing:-.068em;
  text-wrap:initial;
}
.cd-services__title span,.cd-services__title em{display:block;font-style:normal}
.cd-services__title em{color:var(--cherry)}
.cd-services__lead{
  max-width:66ch;
  margin-top:clamp(28px,2.4vw,42px);
  color:#655c56;
  font-size:clamp(16px,1.1vw,19px);
  line-height:1.72;
}
.cd-services__visual{
  grid-area:visual;
  position:relative;
  align-self:end;
  width:100%;
  max-height:820px;
  aspect-ratio:2/3;
  margin:0;
  overflow:hidden;
  background:#eee8df;
  clip-path:inset(0);
}
.cd-services__visual picture,.cd-services__visual img{display:block;width:100%;height:100%}
.cd-services__visual img{object-fit:cover;object-position:66% 56%;will-change:transform}
.cd-services__visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(243,240,233,.25),transparent 22%),linear-gradient(180deg,transparent 72%,rgba(73,17,30,.04));
}
.cd-services__light{
  position:absolute;
  z-index:2;
  inset:-20% 35% -20% -40%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-35%) skewX(-15deg);
  background:linear-gradient(90deg,transparent,rgba(255,231,220,.2),transparent);
  mix-blend-mode:screen;
}
.cd-services__visual.is-inview .cd-services__light{animation:services-light 12s 1.2s ease-in-out infinite}
@keyframes services-light{0%,68%{opacity:0;transform:translateX(-35%) skewX(-15deg)}78%{opacity:.42}92%,100%{opacity:0;transform:translateX(190%) skewX(-15deg)}}
.cd-services__list{
  grid-area:list;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(48px,4vw,68px);
}
.cd-service{
  position:relative;
  min-width:0;
  padding-right:clamp(20px,2vw,34px);
}
.cd-service+.cd-service{
  border-left:1px solid #d4ccc2;
  padding-left:clamp(20px,2vw,34px);
}
.cd-service+.cd-service:before{
  content:"";
  position:absolute;
  top:0;
  left:-1px;
  width:1px;
  height:0;
  background:var(--cherry);
  transition:height .55s var(--ease);
}
.cd-service__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:21px;color:var(--cherry)}
.cd-service__top span{font-size:10px;letter-spacing:.16em;transition:opacity .35s ease}
.cd-service__top svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:color .35s ease,filter .35s ease}
.cd-service h3{
  max-width:13ch;
  margin-bottom:15px;
  font:500 clamp(20px,1.5vw,27px)/1.13 var(--font-display);
  letter-spacing:-.043em;
  transition:transform .45s var(--ease),color .35s ease;
}
.cd-service p{max-width:29ch;color:#685f59;font-size:clamp(13px,.85vw,15px);line-height:1.66}
.cd-services__cta{grid-area:cta;margin-top:clamp(38px,3vw,52px);color:var(--ink);font-size:14px}
.cd-services__signal{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;fill:none;pointer-events:none}
.cd-services__signal path{vector-effect:non-scaling-stroke;stroke-width:.75}
.cd-services__signal-track{stroke:#8f2e45;opacity:.05}
.cd-services__signal-active{stroke:#a33851;opacity:.2}

@media(min-width:901px) and (pointer:fine){
  .cd-service:hover:before{height:54px}
  .cd-service:hover .cd-service__top span{opacity:.58}
  .cd-service:hover .cd-service__top svg{color:#9a2741;filter:drop-shadow(0 2px 5px rgba(112,26,48,.14))}
  .cd-service:hover h3{transform:translateX(3px);color:var(--cherry)}
}
@media(max-width:1100px) and (min-width:701px){
  .cd-services__layout{
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
    grid-template-areas:"intro visual" "list list" "cta cta";
  }
  .cd-services__title{font-size:clamp(48px,5.5vw,62px)}
  .cd-services__visual{max-height:560px}
  .cd-services__list{margin-top:58px}
}
@media(max-width:700px){
  .cd-services{padding-block:66px 70px}
  .cd-services__layout{display:grid;grid-template-columns:1fr;grid-template-areas:"intro" "visual" "list" "cta"}
  .cd-services__eyebrow{margin-bottom:25px}
  .cd-services__title{max-width:none;font-size:clamp(39px,11.25vw,50px);line-height:1.02;letter-spacing:-.062em}
  .cd-services__lead{margin-top:27px;font-size:15px;line-height:1.72}
  .cd-services__visual{width:100%;max-height:none;aspect-ratio:1.05;margin-top:38px}
  .cd-services__visual img{object-position:70% 68%}
  .cd-services__list{display:block;margin-top:42px}
  .cd-service{padding:0 0 29px}
  .cd-service+.cd-service{padding:29px 0;border-left:0;border-top:1px solid #d4ccc2}
  .cd-service+.cd-service:before{top:-1px;left:0;width:0;height:1px}
  .cd-service__top{justify-content:flex-start;gap:18px;margin-bottom:15px}
  .cd-service__top svg{width:25px;height:25px}
  .cd-service h3{max-width:none;font-size:25px;margin-bottom:12px}
  .cd-service p{max-width:42ch;font-size:14px}
  .cd-services__cta{margin-top:38px}
  .cd-services__signal{opacity:.65}
}
@media(prefers-reduced-motion:reduce){
  .cd-services__eyebrow,.cd-services__title span,.cd-services__title em,.cd-services__lead,.cd-services__visual,.cd-services__visual img,.cd-service,.cd-services__cta{clip-path:none!important;transform:none!important;opacity:1!important}
  .cd-services__light{display:none!important;animation:none!important}
  .cd-services__signal-active{display:none!important}
  .cd-service:before,.cd-service h3,.cd-service__top span,.cd-service__top svg{transition:none!important}
}
@media(forced-colors:active){.cd-services__signal,.cd-services__light{display:none}.cd-service__top svg{stroke:CanvasText}}