/* Homepage "Jak działamy" (#jak-dzialamy) — native Elementor elements; class hooks in Advanced > CSS Classes.
   Colours are also stored in each widget's Style settings so the editor matches the live page. */
.ps-section {
  --ps-bg: #f7f5f0; --ps-ink: #0e3b57; --ps-ink-2: #0b4264; --ps-muted: #44555f; --ps-gold: #0e76aa; --ps-gold-line: #0eaef2;
  --ps-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Nunito Sans", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; color: var(--ps-ink);
}
.ps-section *, .ps-section *::before, .ps-section *::after { box-sizing: border-box; }
.e-con.ps-section { display: block; padding: clamp(4rem, 2.8rem + 5vw, 6.5rem) var(--og-gutter, 24px) !important; background: var(--ps-bg); text-align: left; }
.ps-section .e-con.ps-inner { display: block; width: 100%; max-width: 1390px; margin: 0 auto; }
.ps-section .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: inherit; text-transform: none; }
.ps-section p { margin: 0 !important; }
.ps-section svg { display: block; }
.ps-section .elementor-button-icon svg, .ps-section .elementor-button-icon svg * { fill: none !important; }
.ps-section a:focus-visible { outline: 2px solid var(--ps-ink) !important; outline-offset: 4px; }

/* ---------- Header ---------- */
.ps-section .e-con.ps-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24.5rem); align-items: center; gap: 1.5rem 4rem; margin: 0 0 clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.ps-section .e-con.ps-head__main { display: block; }
.ps-section .ps-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 0.9rem; margin: 0 0 1.3rem !important; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ps-ink); }
.ps-section .ps-eyebrow .elementor-heading-title::before { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid var(--ps-gold); border-radius: 50%; }
.ps-section .ps-title .elementor-heading-title { font-size: clamp(2.5rem, 1.2rem + 3.9vw, 4.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; color: var(--ps-ink); }
.ps-section .ps-title .elementor-heading-title span:not(.split-word) { color: var(--ps-gold); }
.ps-section .e-con.ps-head__aside { display: block; padding-top: 1.25rem; }
.ps-section .ps-intro .elementor-heading-title { margin: 0 0 0.9rem !important; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.8rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--ps-ink); }
.ps-section .ps-intro-sub p { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem); line-height: 1.5; color: var(--ps-muted); }

/* ---------- Steps + connector timeline ---------- */
.ps-section .e-con.ps-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.ps-section .e-con.ps-step { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.ps-section .e-con.ps-step:not(:last-child)::after {
  content: ""; position: absolute; top: 1.75rem; left: calc(50% + 2.4rem); width: calc(100% + 1.4rem - 4.8rem); height: 14px; margin-top: -7px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230e76aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l4 4-4 4'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    linear-gradient(var(--ps-gold-line), var(--ps-gold-line)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(var(--ps-gold-line), var(--ps-gold-line)) right center / calc(50% - 16px) 1px no-repeat;
}
.ps-section .ps-num { align-self: center; width: auto; margin: 0 0 1.25rem; }
.ps-section .ps-num .elementor-heading-title { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ps-ink-2); font-size: 1.2rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: #fff; box-shadow: 0 0 0 6px var(--ps-bg); transition: background 0.35s var(--ps-ease), transform 0.35s var(--ps-ease); }
.ps-section .ps-img { overflow: hidden; border-radius: 12px; margin: 0 0 1.5rem; box-shadow: 0 20px 40px -30px rgba(14, 59, 87, 0.5); }
.ps-section .ps-img img { display: block; width: 100% !important; height: auto !important; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.9s var(--ps-ease); }
.ps-section .ps-step-title .elementor-heading-title { margin: 0 0 0.6rem !important; padding: 0 0.6rem !important; font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--ps-ink); }
.ps-section .ps-step-text p { padding: 0 0.6rem; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem); line-height: 1.5; color: var(--ps-muted); }

/* ---------- CTA bar ---------- */
.ps-section .e-con.ps-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) clamp(1.5rem, 1rem + 1.8vw, 2.75rem) !important; border-radius: 22px; background: linear-gradient(120deg, #0b4264, #093450); box-shadow: 0 24px 50px -32px rgba(7, 39, 59, 0.7); }
.ps-section .e-con.ps-bar__copy { display: block; }
.ps-section .ps-bar__title .elementor-heading-title { margin: 0 0 0.35rem !important; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: #fff; }
.ps-section .ps-bar__text p { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.ps-section .e-con.ps-bar__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.ps-section .ps-call .elementor-button { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 1rem 2.6rem; border: 0; border-radius: 999px; background: linear-gradient(180deg, #0e76aa, #0e76aa); box-shadow: 0 12px 26px -16px rgba(14, 118, 170, 0.9); font-family: inherit; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #fff; transition: transform 0.25s var(--ps-ease), filter 0.25s var(--ps-ease); }
.ps-section .ps-call .elementor-button-content-wrapper { gap: 1.1rem; align-items: center; }
.ps-section .ps-call .elementor-button-icon { margin: 0 !important; }
.ps-section .ps-call .elementor-button-icon svg { width: 1.6rem; height: 1.6rem; }
.ps-section .ps-call .elementor-button-icon svg * { stroke: #fff; }
.ps-section .ps-write .elementor-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0 !important; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 0; background: transparent; font-family: inherit; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; transition: border-color 0.25s var(--ps-ease), color 0.25s var(--ps-ease); }
.ps-section .ps-write .elementor-button-content-wrapper { gap: 1.4rem; align-items: center; }
.ps-section .ps-write .elementor-button-icon { margin: 0 !important; }
.ps-section .ps-write .elementor-button-icon svg { width: 1.3rem; height: 1.3rem; transition: transform 0.3s var(--ps-ease); }

/* ---------- Hover (fine pointers) ---------- */
@media (hover: hover) and (pointer: fine) {
  .ps-section .e-con.ps-step:hover .ps-img img { transform: scale(1.04); }
  .ps-section .e-con.ps-step:hover .ps-num .elementor-heading-title { background: var(--ps-gold); transform: translateY(-2px); }
  .ps-section .ps-call .elementor-button:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
  .ps-section .ps-write .elementor-button:hover { color: #0eaef2; border-bottom-color: #0eaef2; }
  .ps-section .ps-write .elementor-button:hover svg { transform: translate(2px, -2px); }
}
.ps-section .ps-call .elementor-button:active { transform: scale(0.985); }

/* ---------- Entrance (opt-in by us.js) ---------- */
.ps-section.us-motion .us-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ps-ease), transform 0.7s var(--ps-ease); }
.ps-section.us-motion .ps-step:nth-child(2).us-reveal { transition-delay: 80ms; }
.ps-section.us-motion .ps-step:nth-child(3).us-reveal { transition-delay: 160ms; }
.ps-section.us-motion .ps-step:nth-child(4).us-reveal { transition-delay: 240ms; }
.ps-section.us-motion .us-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .ps-section .e-con.ps-head { grid-template-columns: minmax(0, 1fr); }
  .ps-section .e-con.ps-head__aside { padding-top: 0; }
  .ps-section .e-con.ps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  .ps-section .e-con.ps-step::after { display: none !important; }
  .ps-section .e-con.ps-bar { flex-direction: column; align-items: flex-start; }
}
/* ---------- Mobile ---------- */
@media (max-width: 599px) {
  .ps-section .ps-title .elementor-heading-title br { display: none; }
  .ps-section .e-con.ps-steps { grid-template-columns: minmax(0, 1fr); }
  .ps-section .ps-num { align-self: flex-start; }
  .ps-section .ps-img img { aspect-ratio: 4 / 3; }
  .ps-section .ps-step-title .elementor-heading-title, .ps-section .ps-step-text p { padding: 0 !important; }
  .ps-section .e-con.ps-bar__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .ps-section .ps-call, .ps-section .ps-call .elementor-button { width: 100%; }
  .ps-section .ps-call .elementor-button { justify-content: center; padding: 1rem 1.5rem; }
  .ps-section .ps-write { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-section *, .ps-section *::before, .ps-section *::after { transition: none !important; animation: none !important; }
  .ps-section.us-motion .us-reveal { opacity: 1 !important; transform: none !important; }
}

.ps-section .ps-img { margin: 0 0 1.5rem !important; }
.ps-section .ps-num { margin: 0 0 1.25rem !important; }

/* ==========================================================================
   Mobile (<600px): compact vertical timeline instead of four full-width photo cards
   ========================================================================== */
@media (max-width: 599px) {
  .e-con.ps-section { padding: 3.25rem 1.25rem !important; }
  .ps-section .e-con.ps-head { gap: 0.9rem; margin: 0 0 2rem; }
  .ps-section .ps-eyebrow .elementor-heading-title { margin: 0 0 1rem !important; font-size: 12px; }
  .ps-section .ps-title .elementor-heading-title { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 2.5rem); line-height: 1.06; }
  .ps-section .ps-intro .elementor-heading-title { margin: 0 0 0.5rem !important; font-size: 1.15rem; }
  .ps-section .ps-intro-sub p { font-size: 0.95rem; }

  .ps-section .e-con.ps-steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ps-section .e-con.ps-step { display: grid; grid-template-columns: 2.75rem 5.75rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0.9rem; align-items: start; }
  .ps-section .e-con.ps-step:not(:last-child)::before { content: ""; position: absolute; top: 3.25rem; bottom: -1.25rem; left: calc(1.375rem - 0.75px); width: 1.5px; background: var(--ps-gold-line); }
  .ps-section .ps-num { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0 !important; }
  .ps-section .ps-num .elementor-heading-title { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; box-shadow: 0 0 0 4px var(--ps-bg); }
  .ps-section .ps-img { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; border-radius: 10px; box-shadow: 0 10px 22px -16px rgba(14, 59, 87, 0.55); }
  .ps-section .ps-img img { aspect-ratio: 1 / 1; }
  .ps-section .ps-step-title { grid-column: 3; grid-row: 1; align-self: end; }
  .ps-section .ps-step-title .elementor-heading-title { margin: 0.1rem 0 0.3rem !important; padding: 0 !important; font-size: 1.125rem; line-height: 1.25; }
  .ps-section .ps-step-text { grid-column: 3; grid-row: 2; }
  .ps-section .ps-step-text p { padding: 0; font-size: 0.9375rem; line-height: 1.5; }
  .ps-section.us-motion .ps-step.us-reveal { transition-delay: 0ms !important; }

  .ps-section .e-con.ps-bar { gap: 1.1rem; margin-top: 2.25rem; padding: 1.5rem 1.25rem !important; border-radius: 18px; }
  .ps-section .ps-bar__title .elementor-heading-title { font-size: 1.5rem; }
  .ps-section .ps-bar__text p { font-size: 1rem; }
  .ps-section .ps-call .elementor-button { min-height: 3.5rem; padding: 0.85rem 1.25rem; font-size: 1.05rem; }
  .ps-section .ps-call .elementor-button-icon svg { width: 1.3rem; height: 1.3rem; }
  .ps-section .ps-write .elementor-button { min-height: 3rem; }
}
/* Narrowest phones: drop the thumbnail so the step text keeps a readable measure */
@media (max-width: 359px) {
  .ps-section .e-con.ps-step { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.85rem; }
  .ps-section .e-con.ps-step:not(:last-child)::before { left: calc(1.25rem - 0.75px); top: 3rem; }
  .ps-section .ps-num .elementor-heading-title { width: 2.5rem; height: 2.5rem; }
  .ps-section .ps-img { display: none; }
  .ps-section .ps-step-title, .ps-section .ps-step-text { grid-column: 2; }
}