@charset "UTF-8";
/* Opróżniamy Gdańsk — design-system normalisation layer.
   Loaded last, site-wide. It does NOT redesign sections: it standardises the shared scales
   (container width, vertical rhythm, radii, shadows, button/icon sizes, form + accordion styling)
   and adds restrained micro-interactions. Brand colours unchanged. */

:root {
  /* One content width for every section */
  --ogp-max: 1320px;
  /* Vertical rhythm: 64px at 390 → 112px at 1440 */
  --ogp-sec-y: clamp(4rem, 2.2rem + 5vw, 7rem);
  --og-section-y: clamp(4rem, 2.2rem + 5vw, 7rem);
  /* Radius scale */
  --ogp-r-xs: 8px; --ogp-r-sm: 12px; --ogp-r-md: 16px; --ogp-r-lg: 20px; --ogp-r-pill: 999px;
  /* Elevation scale (cool ink, never black) */
  --ogp-sh-1: 0 1px 2px rgba(7, 39, 59, 0.05), 0 10px 24px -18px rgba(7, 39, 59, 0.3);
  --ogp-sh-2: 0 2px 4px rgba(7, 39, 59, 0.06), 0 22px 44px -28px rgba(7, 39, 59, 0.45);
  --ogp-sh-3: 0 30px 60px -34px rgba(7, 39, 59, 0.55);
  /* Control sizes */
  --ogp-btn: 3.5rem; --ogp-btn-sm: 3rem; --ogp-tap: 2.75rem;
  --ogp-ease: cubic-bezier(0.22, 1, 0.36, 1); --ogp-dur: 0.32s;
}

/* ---------------------------------------------------------------
   1. Container widths — one measure across old and new sections
   --------------------------------------------------------------- */
/* Sections that carry their own side padding: inner is measured only. */
.us-section .e-con.us-inner,
.ps-section .e-con.ps-inner,
.pr-section .e-con.pr-inner,
.ek-section .e-con.ek-inner,
.zk-section .e-con.zk-inner,
.cn-section .e-con.cn-inner,
.sv-section .e-con.sv-inner,
.cw-section .e-con.cw-inner {
  width: 100% !important;
  max-width: var(--ogp-max) !important;
  margin-inline: auto !important;
}
/* .og-container has no section padding around it: keep the gutter inside its own width. */
.e-con.og-container { width: min(100% - 2 * var(--og-gutter, 20px), var(--ogp-max)) !important; max-width: none !important; margin-inline: auto !important; }

/* The closing split stays full-bleed; only its copy column is measured. */
.ko-section .e-con.ko-copy { max-width: calc(var(--ogp-max) / 2 + 3rem); margin-left: auto; }

/* ---------------------------------------------------------------
   2. Section rhythm — same vertical beat everywhere
   --------------------------------------------------------------- */
.e-con.us-section, .e-con.ek-section, .e-con.ps-section, .e-con.zk-section, .e-con.sv-section {
  padding-top: var(--ogp-sec-y) !important;
  padding-bottom: var(--ogp-sec-y) !important;
}
.e-con.cn-section { padding-top: var(--ogp-sec-y) !important; padding-bottom: calc(var(--ogp-sec-y) * 0.7) !important; }
.e-con.pr-section { padding-top: var(--ogp-sec-y) !important; padding-bottom: calc(var(--ogp-sec-y) * 0.55) !important; }
/* Area + contact read as one dark block: keep the seam tight, match the outer edges. */
.e-con.og-area { padding-bottom: calc(var(--ogp-sec-y) * 0.6) !important; }
.e-con.og-contact { padding-top: calc(var(--ogp-sec-y) * 0.45) !important; }

/* ---------------------------------------------------------------
   3. Radii — xs/sm/md/lg + pill, nothing in between
   --------------------------------------------------------------- */
.us-section .e-con.us-card, .zk-section .e-con.zk-card, .sv-section .e-con.sv-card,
.ek-section .e-con.ek-tier, .cw-section .e-con.cw-card, .og-situations .og-situation,
.pr-section .e-con.pr-card, .og-form-panel { border-radius: var(--ogp-r-md) !important; }
.cn-section .e-con.cn-factor, .pr-section .e-con.pr-factor, .sv-section .sv-note,
.ps-section .ps-img, .cn-section .cn-photo, .zk-section .e-con.zk-media { border-radius: var(--ogp-r-sm) !important; }
.us-section .e-con.us-card__media { border-radius: 0 !important; }
.ek-section .e-con.ek-media, .og-area__map, .e-con.ps-bar, .e-con.pr-bar, .cw-section .e-con.cw-contact { border-radius: var(--ogp-r-lg) !important; }
.us-section .us-card__link a::after, .zk-section .zk-link .elementor-button::after, .sv-section .sv-link .elementor-button::after { border-radius: var(--ogp-r-md); }
.og-text-link .elementor-button { border-radius: var(--ogp-r-sm) !important; }
.og-btn .elementor-button, .og-callbar__btn .elementor-button, .solaceform-form-button,
.us-cta .elementor-button, .ek-call .elementor-button, .ps-call .elementor-button,
.pr-call .elementor-button, .cn-call .elementor-button, .ko-cta .elementor-button { border-radius: var(--ogp-r-pill) !important; }

/* ---------------------------------------------------------------
   4. Elevation — one scale, applied consistently
   --------------------------------------------------------------- */
.us-section .e-con.us-card, .zk-section .e-con.zk-card, .sv-section .e-con.sv-card,
.ek-section .e-con.ek-tier, .cn-section .e-con.cn-factor, .pr-section .e-con.pr-card { box-shadow: var(--ogp-sh-1) !important; }
.ek-section .e-con.ek-media, .cn-section .cn-photo, .og-form-panel, .og-area__map { box-shadow: var(--ogp-sh-2) !important; }
.e-con.ps-bar, .e-con.pr-bar, .ko-section .ko-badge .elementor-icon { box-shadow: var(--ogp-sh-3) !important; }

/* ---------------------------------------------------------------
   5. Controls — 56px primary, 48px secondary, 44px minimum tap
   --------------------------------------------------------------- */
.og-btn--solid .elementor-button, .og-btn--light .elementor-button, .og-btn--brass .elementor-button,
.og-btn--ghost-light .elementor-button, .us-cta .elementor-button, .ek-call .elementor-button,
.ps-call .elementor-button, .pr-call .elementor-button, .cn-call .elementor-button,
.ko-cta .elementor-button, .solaceform-form-button, .cw-section .cw-full .elementor-button {
  min-height: var(--ogp-btn) !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important;
}
.ko-section .ko-cta .elementor-button { min-height: var(--ogp-btn) !important; }
.og-link-arrow .elementor-button, .og-text-link .elementor-button, .ek-write .elementor-button,
.ps-write .elementor-button, .pr-write .elementor-button, .cn-more .elementor-button,
.zk-link .elementor-button, .sv-link .elementor-button, .cw-ask .elementor-button {
  min-height: var(--ogp-tap) !important;
}
.og-callbar__btn .elementor-button { min-height: var(--ogp-btn-sm) !important; }
/* Icon-only controls keep a 44px hit area */
.cw-section .cw-arrow .elementor-button, .us-card__btn .elementor-icon { min-width: 2.75rem; min-height: 2.75rem; }

/* ---------------------------------------------------------------
   6. Icon sizing — 3 steps: inline 20, control 24, feature 48–52
   --------------------------------------------------------------- */
.og-btn .elementor-button-icon svg, .us-cta .elementor-button-icon svg, .ek-call .elementor-button-icon svg,
.ps-call .elementor-button-icon svg, .pr-call .elementor-button-icon svg, .cn-call .elementor-button-icon svg {
  width: 1.25rem !important; height: 1.25rem !important;
}
.og-link-arrow .elementor-button-icon svg, .og-text-link .elementor-button-icon svg,
.ek-write .elementor-button-icon svg, .ps-write .elementor-button-icon svg,
.pr-write .elementor-button-icon svg, .cn-more .elementor-button-icon svg { width: 1.125rem !important; height: 1.125rem !important; }
.cn-section .cn-factor__icon .elementor-icon svg, .pr-section .pr-factor__icon .elementor-icon svg { width: 3rem !important; height: 3rem !important; }
.cn-section .cn-note__icon .elementor-icon svg, .pr-section .pr-note__icon .elementor-icon svg { width: 2.5rem !important; height: 2.5rem !important; }
.zk-section .zk-link .elementor-button-icon, .sv-section .sv-link .elementor-button-icon { width: 3rem !important; height: 3rem !important; }

/* ---------------------------------------------------------------
   7. Type hierarchy — steady eyebrow + lead; display sizes stay per-section
   --------------------------------------------------------------- */
.og-eyebrow .elementor-heading-title, .us-eyebrow .elementor-heading-title, .ps-eyebrow .elementor-heading-title,
.pr-eyebrow .elementor-heading-title, .zk-eyebrow .elementor-heading-title, .sv-eyebrow .elementor-heading-title,
.cn-eyebrow .elementor-heading-title, .ko-eyebrow .elementor-heading-title {
  font-size: 0.8125rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; line-height: 1.4 !important;
}
.og-lead p, .us-lead p, .ps-intro-sub p, .zk-lead p, .sv-note p {
  font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem) !important;
  line-height: 1.6 !important;
}
/* Measure: long paragraphs never exceed a comfortable reading width */
.og-lead p, .og-copy p, .us-card__text p, .zk-card__text p, .sv-card__text p, .ps-step-text p, .cn-text p { max-width: 62ch; }
.og-title .elementor-heading-title, .us-title .elementor-heading-title, .ps-title .elementor-heading-title,
.zk-title .elementor-heading-title, .sv-title .elementor-heading-title, .cn-title .elementor-heading-title { text-wrap: balance; }

/* ---------------------------------------------------------------
   8. Images — same crop behaviour, capped hover scale
   --------------------------------------------------------------- */
.us-card__img img, .zk-photo img, .sv-card__img img, .ek-photo img, .cn-photo img,
.ko-photo img, .ps-img img, .cw-photo img, .og-service__media img { object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .us-section .e-con.us-card:hover .us-card__img img,
  .ps-section .e-con.ps-step:hover .ps-img img,
  .cw-section .e-con.cw-card:hover .cw-photo img,
  .e-con.ek-media:hover .ek-photo img,
  .e-con.ko-section:hover .ko-photo img,
  .cn-section .e-con.cn-aside:hover .cn-photo img { transform: scale(1.03); }

  /* Card elevation — same lift everywhere */
  .us-section .e-con.us-card:hover,
  .ek-section .e-con.ek-tier:hover, .cn-section .e-con.cn-factor:hover, .cw-section .e-con.cw-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ogp-sh-2) !important;
  }
  /* Buttons — one motion language */
  .og-btn .elementor-button:hover, .us-cta .elementor-button:hover, .ek-call .elementor-button:hover,
  .ps-call .elementor-button:hover, .pr-call .elementor-button:hover, .cn-call .elementor-button:hover,
  .ko-cta .elementor-button:hover, .solaceform-form-button:hover { transform: translateY(-2px); }
  .og-btn .elementor-button:active, .solaceform-form-button:active { transform: translateY(0) scale(0.99); }
}
.og-btn .elementor-button, .solaceform-form-button { transition: transform var(--ogp-dur) var(--ogp-ease), background-color var(--ogp-dur) var(--ogp-ease), color var(--ogp-dur) var(--ogp-ease), box-shadow var(--ogp-dur) var(--ogp-ease) !important; }

/* ---------------------------------------------------------------
   9. Contact form — branded fields instead of default browser chrome
   --------------------------------------------------------------- */
.og-form .solaceform-input:not([type="checkbox"]):not([type="file"]),
.og-form input[type="text"], .og-form input[type="tel"], .og-form input[type="email"], .og-form textarea {
  min-height: 3.25rem !important;
  padding: 0.85rem 1.1rem !important;
  border: 1px solid rgba(14, 59, 87, 0.18) !important;
  border-radius: var(--ogp-r-sm) !important;
  background: #fff !important;
  color: var(--og-slate, #0e3b57) !important;
  font-size: 1rem !important;
  transition: border-color 0.25s var(--ogp-ease), box-shadow 0.25s var(--ogp-ease) !important;
}
.og-form textarea { min-height: 7.5rem !important; line-height: 1.55 !important; }
.og-form .solaceform-input:hover:not(:focus), .og-form textarea:hover:not(:focus) { border-color: rgba(14, 59, 87, 0.38) !important; }
.og-form .solaceform-input:focus, .og-form textarea:focus {
  outline: none !important;
  border-color: var(--og-brass, #0eaef2) !important;
  box-shadow: 0 0 0 3px rgba(14, 174, 242, 0.3) !important;
}
.og-form input[type="file"] { padding: 0.75rem 1rem !important; border: 1px dashed rgba(14, 59, 87, 0.28) !important; border-radius: var(--ogp-r-sm) !important; background: rgba(14, 59, 87, 0.03) !important; }
.og-form input[type="checkbox"] { width: 1.15rem !important; height: 1.15rem !important; accent-color: var(--og-brass, #0eaef2); }
.og-form .solaceform-form-button { box-shadow: var(--ogp-sh-1) !important; }

/* ---------------------------------------------------------------
   10. FAQ accordion — smooth, quiet, keyboard-visible
   --------------------------------------------------------------- */
.og-faq .elementor-tab-title {
  transition: color 0.25s var(--ogp-ease), background-color 0.25s var(--ogp-ease) !important;
  border-radius: var(--ogp-r-sm);
}
.og-faq .elementor-tab-title:hover { color: var(--og-brass-ink, #0e76aa) !important; }
.og-faq .elementor-tab-title .elementor-accordion-icon { transition: transform 0.35s var(--ogp-ease), background-color 0.25s var(--ogp-ease) !important; }
.og-faq .elementor-tab-content { animation: ogp-fade 0.4s var(--ogp-ease) both; }
@keyframes ogp-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   11. Map + focus states
   --------------------------------------------------------------- */
.og-area__map { overflow: hidden !important; border: 1px solid rgba(247, 245, 240, 0.14) !important; }
:where(a, button, [role="button"], input, textarea, summary):focus-visible { outline-offset: 3px; }

/* ---------------------------------------------------------------
   12. Responsive tightening (1024 / 768 / 390)
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .us-section .e-con.us-card__body, .zk-section .e-con.zk-body, .sv-section .e-con.sv-card__body { padding-inline: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem) !important; }
}
@media (max-width: 768px) {
  :root { --ogp-sec-y: clamp(3.5rem, 2.5rem + 3vw, 4.75rem); --og-section-y: clamp(3.5rem, 2.5rem + 3vw, 4.75rem); }
  .og-eyebrow .elementor-heading-title, .us-eyebrow .elementor-heading-title, .ps-eyebrow .elementor-heading-title,
  .pr-eyebrow .elementor-heading-title, .zk-eyebrow .elementor-heading-title, .sv-eyebrow .elementor-heading-title,
  .cn-eyebrow .elementor-heading-title, .ko-eyebrow .elementor-heading-title { font-size: 0.75rem !important; letter-spacing: 0.18em !important; }
}
@media (max-width: 599px) {
  /* Full-width primary actions, consistent 56px height */
  .og-btn--call .elementor-button, .us-cta .elementor-button, .ek-call .elementor-button,
  .ps-call .elementor-button, .pr-call .elementor-button, .cn-call .elementor-button,
  .ko-cta .elementor-button, .solaceform-form-button { width: 100% !important; justify-content: center !important; }
  .og-form .solaceform-input:not([type="checkbox"]):not([type="file"]) { min-height: 3rem !important; }
}

/* ---------------------------------------------------------------
   13. Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .og-faq .elementor-tab-content { animation: none !important; }
  [data-reveal], .us-reveal, .cw-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   14. Overrides for values stored per-element in Elementor
   --------------------------------------------------------------- */
.e-con.og-section, .e-con.og-situations, .e-con.og-faq-section, .e-con.og-crew, .e-con.og-uslugi, .e-con.og-pricing, .e-con.og-callout {
  padding-top: var(--ogp-sec-y) !important;
  padding-bottom: var(--ogp-sec-y) !important;
}
.e-con.og-area { padding-top: var(--ogp-sec-y) !important; }
.og-area__map { border-radius: var(--ogp-r-lg) !important; }
.og-form-panel { border-radius: var(--ogp-r-md) !important; }

/* ---------------------------------------------------------------
   15. Specificity top-ups (rules the base sheet sets with .e-con)
   --------------------------------------------------------------- */
.e-con.og-area__map { border-radius: var(--ogp-r-lg) !important; }
.e-con.og-contact { padding-bottom: var(--ogp-sec-y) !important; }
.og-form .solaceform-form-button { min-height: var(--ogp-btn) !important; height: auto !important; padding-block: 0.9rem !important; }

/* The open FAQ icon rotates 45deg; its rotated box needs room or it pushes past the edge. */
.og-faq .elementor-tab-title { padding-right: 0.5rem !important; }

/* Equal field heights across the form (one field shipped taller than the rest). */
.og-form input[type="text"], .og-form input[type="tel"], .og-form input[type="email"] { height: 3.25rem !important; }
@media (max-width: 599px) { .og-form input[type="text"], .og-form input[type="tel"], .og-form input[type="email"] { height: 3rem !important; } }

/* ---------------------------------------------------------------
   16. Mobile polish (audited at 320 / 360 / 390)
   Touch targets, readable copy, one gutter. Layout unchanged.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* --- Touch targets: nothing interactive below 44px --- */
  .og-header .elementor-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    margin-left: -0.5rem !important;
    border-radius: var(--ogp-r-sm) !important;
  }
  .og-phone-link, .og-contact__dd--phone a, .og-footer a[href^="tel:"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 2.75rem !important;
  }
  .cw-section .cw-more .elementor-button, .cw-section .cw-full .elementor-button,
  .og-text-link .elementor-button, .og-link-arrow .elementor-button { min-height: 2.75rem !important; }
  .us-section .us-card__link a, .zk-section .zk-link .elementor-button, .sv-section .sv-link .elementor-button { min-height: 2.75rem; }
  /* Consent row: bigger box and a comfortable row height */
  .og-form input[type="checkbox"] { width: 1.375rem !important; height: 1.375rem !important; flex: none; }
  .og-form .solaceform-checkbox-field, .og-form label:has(input[type="checkbox"]) { align-items: flex-start !important; gap: 0.75rem !important; min-height: 2.75rem; }

  /* --- Readability: body copy never below 16px on a phone --- */
  .og-copy p, .og-lead p, .og-situation__text p, .og-form__hint p, .og-form__hint,
  .cw-section .cw-intro p, .cw-section .cw-trust__text p, .cw-section .cw-contact__text p,
  .ek-section .ek-tier__text p, .ps-section .ps-step-text p, .pr-section .pr-factor__text p,
  .pr-section .pr-note__text p, .pr-section .pr-bar__text p, .cn-section .cn-factor__text p,
  .zk-section .zk-card__text p, .sv-section .sv-card__text p, .og-footer-utility__copy p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  /* Small caps labels keep a 12px floor */
  .us-section .us-pill .elementor-heading-title, .us-section .us-pill__num,
  .cw-section .cw-card__sub .elementor-heading-title, .cw-section .cw-keywords li { font-size: 0.75rem !important; }

  /* --- One gutter down the page --- */
  .e-con.cw-section { padding-inline: var(--og-gutter, 20px) !important; }
  .cw-section .e-con.cw-inner::before { inset: 0 calc(-1 * var(--og-gutter, 20px)); }
}

@media (max-width: 380px) {
  /* Narrow phones: keep the pill rows from crowding the edges */
  .us-section .us-tags li, .zk-section .zk-tags li, .sv-section .sv-tags li { font-size: 0.875rem !important; }
}

/* ---------------------------------------------------------------
   17. Mobile follow-ups (second audit pass)
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Consent box is sized by a more specific rule in the form stylesheet */
  .og-form .box input[type="checkbox"], .og-form input[type="checkbox"].solaceform-input,
  .og-form input[type="checkbox"] { width: 1.375rem !important; height: 1.375rem !important; }
  /* Card footer links: give the text itself a full-height tap area */
  .us-section .us-card__link a, .us-section .us-card__link .elementor-heading-title {
    display: inline-flex !important; align-items: center !important; min-height: 2.75rem !important;
  }
  /* Remaining 11px labels come up to the 12px floor */
  .cw-section .cw-contact__eyebrow .elementor-heading-title,
  .cw-section .cw-closing .elementor-heading-title { font-size: 0.75rem !important; }
}

@media (max-width: 767px) {
  /* The form hides its consent label, so the box itself is the only target: enlarge it. */
  .og-form .box input[type="checkbox"], .og-form input[type="checkbox"] { width: 1.75rem !important; height: 1.75rem !important; margin-right: 0.35rem !important; }
}

/* Breadcrumb list keeps the default indent, which offsets it from the page gutter. */
.og-breadcrumb ol, .og-breadcrumb ul { padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; }

/* ---------------------------------------------------------------
   9. Intro note — one pattern for the lead beside a section title
   Gold rule, no filled box, same measure, same colour, same offset.
   --------------------------------------------------------------- */
.zk-section .e-con.zk-head, .sv-section .e-con.sv-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  align-items: end;
  padding-inline: clamp(0rem, 1.5vw, 1.5rem);
}
.sv-section .e-con.sv-head__main { padding: 0 !important; }

.zk-section .zk-lead, .sv-section .sv-note, .sv-section .sv-note--plain {
  max-width: 32rem;
  padding: 0.35rem 0 0.35rem clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.zk-section .zk-lead { border-left: 3px solid var(--zk-gold) !important; }
.sv-section .sv-note, .sv-section .sv-note--plain { border-left: 3px solid var(--sv-gold) !important; }

.zk-section .zk-lead p, .sv-section .sv-note p { margin: 0 !important; padding: 0 !important; max-width: none; color: #44555f; }
.sv-section .sv-note strong { display: block; margin-bottom: 0.2rem; font-weight: 800; color: #0e3b57; }
.zk-section .zk-lead a { color: #0e3b57; }
.zk-section .zk-lead a:hover { color: var(--zk-gold); }

@media (max-width: 1199px) {
  .zk-section .e-con.zk-head, .sv-section .e-con.sv-head { grid-template-columns: minmax(0, 1fr); align-items: start; padding-inline: 0; }
  .zk-section .zk-lead, .sv-section .sv-note, .sv-section .sv-note--plain { max-width: 40rem; }
}
/* ---------------------------------------------------------------
   10. Closing split — copy shares the footer's left edge
   The footer container is min(100% - 2*gutter, 1360px), centred. The split
   is full-bleed, so its copy starts at the same x on wide screens.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .e-con.ko-section { container-type: inline-size; }
  .ko-section .e-con.ko-copy {
    max-width: none;
    margin-left: 0;
    padding-left: max(clamp(1.25rem, 5.5vw, 5.5rem), calc((100cqw - 1360px) / 2)) !important;
  }
}
/* ---------------------------------------------------------------
   11. Buttons — one size, one hover, one press
   Pills (solid + outline): 3.5rem tall, fully round, 16px/700. On hover a fill
   grows from where the pointer entered (og-site.js sets --x/--y), the icon tilts,
   the label swaps colour. Same mechanics as .og-btn; colourways stay per section.
   Text links: same arrow nudge and easing.
   --------------------------------------------------------------- */
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button {
  --btn-fill: #f7f5f0; --btn-fg-hover: #093653; --btn-ring: transparent;
  position: relative !important; isolation: isolate; overflow: hidden !important;
  min-height: var(--ogp-btn) !important;
  padding: 0.75rem 1.75rem !important;
  border: 1.5px solid var(--btn-ring) !important;
  border-radius: var(--ogp-r-pill) !important;
  font-size: 1rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important;
  text-transform: none !important;
  transition: color 0.45s var(--ogp-ease), border-color 0.3s var(--ogp-ease), translate 0.7s cubic-bezier(0.34, 1.35, 0.64, 1) !important;
}
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button.is-magnet {
  transition: color 0.45s var(--ogp-ease), border-color 0.3s var(--ogp-ease), translate 0.18s ease-out !important;
}
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button::before {
  content: ""; position: absolute; top: var(--y, 50%); left: var(--x, 50%); z-index: -1;
  width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0); transition: transform 0.6s var(--ogp-ease); pointer-events: none;
}
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button-content-wrapper { gap: 0.75rem; align-items: center; justify-content: center; }
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button-icon svg { width: 1.125rem; height: 1.125rem; transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1); }
/* Icons follow the label colour, so they stay visible when the fill arrives */
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button-icon svg * { stroke: currentColor !important; }

/* Outline pill sits on dark: gold ring, gold fill */
.pr-more .elementor-button { --btn-fill: var(--pr-gold-2, #0eaef2); --btn-ring: var(--pr-gold, #0eaef2); }
/* Petrol pills sit on light: white fill, petrol ring */
.ek-call .elementor-button { --btn-fill: #fff; --btn-fg-hover: var(--ek-teal, #0e3b57); --btn-ring: var(--ek-teal, #0e3b57); }
.us-call .elementor-button, .us-cta .elementor-button { --btn-fill: #fff; --btn-fg-hover: var(--us-ink-2, #0e3b57); --btn-ring: var(--us-ink-2, #0e3b57); }
.pz-cta .elementor-button { --btn-fill: #fff; --btn-fg-hover: var(--pz-ink, #0e3b57); --btn-ring: var(--pz-ink, #0e3b57); }

:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button:focus-visible { color: var(--btn-fg-hover) !important; }
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
:is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more, .og-btn) .elementor-button:active { transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button:hover {
    transform: none !important; filter: none !important; color: var(--btn-fg-hover) !important;
  }
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button:hover::before { transform: translate(-50%, -50%) scale(1); }
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button:hover svg { transform: rotate(-10deg) scale(1.1) !important; }
  /* The old hovers repainted the background; the fill does that job now */
  .pr-more .elementor-button:hover { background: transparent !important; }
  .ek-call .elementor-button:hover { background: var(--ek-teal) !important; }
  .us-cta .elementor-button:hover { background: var(--us-ink-2) !important; }
  .pz-cta .elementor-button:hover { background: var(--pz-ink) !important; }
}

/* Text links: same arrow nudge and easing everywhere */
:is(.zk-link, .sv-link) .elementor-button-icon { transition: transform 0.4s var(--ogp-ease), background 0.3s var(--ogp-ease); }
:is(.zk-link, .sv-link) .elementor-button:hover .elementor-button-icon,
:is(.zk-link, .sv-link) .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); }
:is(.cn-more, .pr-write, .ps-write, .ek-write, .cw-ask) .elementor-button svg { transition: transform 0.4s var(--ogp-ease) !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button,
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button::before,
  :is(.cn-call, .pr-call, .ps-call, .ek-call, .ko-cta, .us-cta, .pz-cta, .pr-more) .elementor-button svg,
  :is(.zk-link, .sv-link) .elementor-button-icon { transition: none !important; }
}
/* Every pill shares one type size (was 15px, 16px and 17px) and one height (home Co wywozimy CTA was 4.25rem) */
.og-btn.og-btn.og-btn.og-btn .elementor-button { font-size: 1rem !important; }
.og-co__cta .og-btn.og-btn--solid .elementor-button { min-height: var(--ogp-btn) !important; }

/* cw-full pill: keeps its own size (it is fitted to the card), takes the shared fill + press */
.cw-section .cw-full .elementor-button {
  --btn-fill: var(--cw-gold, #0eaef2); --btn-fg-hover: #062639;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ogp-r-pill);
  transition: color 0.45s var(--ogp-ease), translate 0.7s cubic-bezier(0.34, 1.35, 0.64, 1) !important;
}
.cw-section .cw-full .elementor-button::before {
  content: ""; position: absolute; top: var(--y, 50%); left: var(--x, 50%); z-index: -1;
  width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0); transition: transform 0.6s var(--ogp-ease); pointer-events: none;
}
.cw-section .cw-full .elementor-button-icon svg { transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1); }
.cw-section .cw-full .elementor-button-icon svg * { stroke: currentColor !important; }
.cw-section .cw-full .elementor-button:focus-visible { color: var(--btn-fg-hover) !important; }
.cw-section .cw-full .elementor-button:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .cw-section .cw-full .elementor-button:hover { background: rgba(3, 24, 28, 0.45) !important; color: var(--btn-fg-hover) !important; }
  .cw-section .cw-full .elementor-button:hover::before { transform: translate(-50%, -50%) scale(1); }
  .cw-section .cw-full .elementor-button:hover svg { transform: rotate(-10deg) scale(1.1) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-section .cw-full .elementor-button, .cw-section .cw-full .elementor-button::before, .cw-section .cw-full .elementor-button-icon svg { transition: none !important; }
}
/* us-lead intro note: same gold rule, colour and measure as .zk-lead / .sv-note (section 9) */
/* The title is long (two lines need ~830px at full size), so this lead column stays narrow */
.us-section .e-con.us-head { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: 3rem; }
.us-section .us-lead {
  max-width: 24rem;
  padding: 0.35rem 0 0.35rem clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
  border-left: 3px solid #0e76aa !important;
}
.us-section .us-lead p { margin: 0 !important; color: #44555f; }
@media (max-width: 1199px) {
  .us-section .e-con.us-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .us-section .us-lead { max-width: 40rem; }
}
/* ---------------------------------------------------------------
   12. Brand lockup — open-door ring mark + wordmark
   The mark is two SVG masks (assets/brand) filled with gold gradients, so it takes
   the header state: deep gold on the white header, bright gold over the hero and in
   the footer. Wordmark stays live text (Nunito Sans) for SEO and crisp rendering.
   --------------------------------------------------------------- */
@property --brand-p { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

.og-brand {
  --brand-name: #0e3b57; --brand-city: #b98542;
  --brand-ring: linear-gradient(135deg, #f2c67c 0%, #dba75a 48%, #c08a45 100%);
  --brand-door: #c08a45;
}
.home .og-header:not(.is-solid) .og-brand,
.og-fhero-page .og-header:not(.is-solid) .og-brand,
.og-brand--footer {
  --brand-name: #f7f2e8; --brand-city: #e8b96b;
}

.og-brand .elementor-heading-title, .og-brand .elementor-heading-title a { gap: 0.8rem !important; }
.og-brand--footer .elementor-heading-title, .og-brand--footer .elementor-heading-title a { gap: 1.1rem !important; }

.og-brand .og-brand__mark, .og-header .og-brand__mark, .og-brand--footer .og-brand__mark,
.home .og-header:not(.is-solid) .og-brand__mark, .og-fhero-page .og-header:not(.is-solid) .og-brand__mark {
  position: relative; display: block; flex: none; width: 2.75rem !important; height: 2.75rem !important;
  border: 0 !important; outline: 0 !important; background: none !important;
  color: transparent !important; font-size: 0 !important; line-height: 0;
}
.og-brand--footer .og-brand__mark { width: 4rem !important; height: 4rem !important; }

.og-brand__mark::before, .og-brand__mark::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.og-brand__mark::before {
  background: var(--brand-ring); background-size: 220% 220%; background-position: 0% 0%;
  -webkit-mask: url("../brand/mark.svg") center / contain no-repeat;
  mask: url("../brand/mark.svg") center / contain no-repeat;
  transition: background-position 0.9s var(--ogp-ease);
}
.og-brand__mark::after {
  background: var(--brand-door);
  -webkit-mask: url("../brand/door.svg") center / contain no-repeat;
  mask: url("../brand/door.svg") center / contain no-repeat;
  transform-origin: 51% 50%;
  transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.og-brand.og-brand .og-brand__name, .og-brand.og-brand .og-brand__city { transition: color 0.35s var(--ogp-ease); }
.og-brand.og-brand .og-brand__name {
  font-family: "Nunito Sans", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3125rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1 !important;
  color: var(--brand-name) !important;
}
.og-brand.og-brand .og-brand__city {
  margin-top: 0.4rem !important; font-size: 0.625rem !important; font-weight: 800 !important; letter-spacing: 0.44em !important; line-height: 1 !important;
  color: var(--brand-city) !important;
}
.og-brand--footer.og-brand .og-brand__name { font-size: 2rem !important; }
.og-brand--footer.og-brand .og-brand__city { margin-top: 0.55rem !important; font-size: 0.75rem !important; letter-spacing: 0.5em !important; }
.og-brand--footer .og-brand__text { margin-left: 0 !important; }

@media (max-width: 599px) {
  .og-header .og-brand__mark { width: 2.5rem !important; height: 2.5rem !important; }
  .og-brand.og-brand .og-brand__name { font-size: 1.1875rem !important; }
  .og-brand.og-brand .og-brand__city { font-size: 0.5625rem !important; letter-spacing: 0.4em !important; }
}

/* City line: centred under the name; text-indent equals the letter-spacing so the trailing tracking gap does not push the glyphs left */
.og-brand.og-brand .og-brand__city { text-align: center !important; text-indent: 0.44em; }
.og-brand--footer.og-brand .og-brand__city { text-indent: 0.5em; }
@media (max-width: 599px) { .og-brand.og-brand .og-brand__city { text-indent: 0.4em; } }

@media (hover: hover) and (pointer: fine) {
  .og-brand:hover .og-brand__mark::before { background-position: 100% 100%; }
  .og-brand:hover .og-brand__mark::after { transform: scaleX(0.55); }
}

/* Entrance: the ring draws itself clockwise from 12 o'clock, then the door opens and the wordmark settles in */
@keyframes brand-draw { from { --brand-p: 0deg; } to { --brand-p: 360deg; } }
@keyframes brand-door { from { opacity: 0; scale: 0 1; } to { opacity: 1; scale: 1 1; } }
@keyframes brand-text { from { opacity: 0; translate: -0.5rem 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .og-brand__mark::before {
    -webkit-mask: url("../brand/mark.svg") center / contain no-repeat, conic-gradient(from 0deg, #000 var(--brand-p), transparent 0);
    mask: url("../brand/mark.svg") center / contain no-repeat, conic-gradient(from 0deg, #000 var(--brand-p), transparent 0);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    animation: brand-draw 1.1s var(--ogp-ease) 0.15s both;
  }
  .og-brand__mark::after { animation: brand-door 0.6s var(--ogp-ease) 0.85s both; }
  .og-brand__name { animation: brand-text 0.7s var(--ogp-ease) 0.35s both; }
  .og-brand__city { animation: brand-text 0.7s var(--ogp-ease) 0.5s both; }
}
/* ---------------------------------------------------------------
   13. Footer CTA video — the photo stays underneath as the poster; the video (added by
   og-site.js on desktop only) fades in over it, beneath the existing text-legibility gradient.
   --------------------------------------------------------------- */
.og-footer-cta__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 78%;
  scale: 1.015; opacity: 0; pointer-events: none;
  transition: opacity 1.4s var(--ogp-ease);
}
.og-footer-cta__video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .og-footer-cta__video { display: none; } }
/* ---------------------------------------------------------------
   14. Kontakt — "Kto do Ciebie przyjedzie"
   Replaces the generic services grid at the foot of /kontakt/. Answers the one
   question a contact page should: who actually turns up at your door. Light ivory
   between the dark map band and the dark footer CTA.
   --------------------------------------------------------------- */
.e-con.kt-crew__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem) !important;
}

.e-con.kt-crew__media {
  position: relative;
  min-height: 26rem;
  border-radius: var(--ogp-r-lg) !important;
  overflow: hidden;
  background: #dcd7cf;
  box-shadow: var(--ogp-sh-2);
}
.kt-crew__photo { position: absolute; inset: 0; margin: 0 !important; }
.kt-crew__photo img {
  display: block; width: 100% !important; height: 100% !important; max-width: none;
  object-fit: cover; object-position: 50% 45%;
  transition: transform 0.9s var(--ogp-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .e-con.kt-crew__media:hover .kt-crew__photo img { transform: scale(1.03); }
}

.e-con.kt-crew__body { display: flex !important; flex-direction: column; justify-content: center; max-width: 40rem; }
.kt-crew .og-eyebrow .elementor-heading-title { color: #0e76aa !important; }
.kt-crew__title .elementor-heading-title {
  margin: 0.8rem 0 0 !important;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem) !important;
  font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.025em !important;
  color: #0e3b57 !important;
}
.kt-crew__title .elementor-heading-title span:not(.split-word) { color: #0e76aa; }
.kt-crew__lead p { margin: 1.4rem 0 0 !important; max-width: 34rem; color: #44555f !important; }

.e-con.kt-crew__facts {
  display: grid !important; gap: 0 !important;
  margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
}
.kt-fact { padding: 1.15rem 0; border-top: 1px solid rgba(14, 59, 87, 0.12); }
.kt-fact:first-child { padding-top: 0; border-top: 0; }
.kt-fact:last-child { padding-bottom: 0; }
.kt-fact .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 1rem; text-align: start; }
.kt-fact .elementor-icon-box-icon { flex: none; margin: 0 !important; }
.kt-fact .elementor-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: rgba(14, 118, 170, 0.12);
  color: #0e76aa !important; font-size: inherit;
}
.kt-fact .elementor-icon svg { width: 1.25rem; height: 1.25rem; }
.kt-fact .elementor-icon svg, .kt-fact .elementor-icon svg * { fill: none !important; stroke: currentColor; }
.kt-fact .elementor-icon-box-title { margin: 0 !important; color: #0e3b57 !important; }
.kt-fact .elementor-icon-box-description { margin: 0 !important; }

@media (max-width: 1023px) {
  .e-con.kt-crew__inner { grid-template-columns: minmax(0, 1fr); }
  .e-con.kt-crew__media { aspect-ratio: 16 / 10; min-height: 0; }
  .e-con.kt-crew__body { max-width: none; }
}
@media (max-width: 599px) {
  .e-con.kt-crew__media { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--ogp-r-md) !important; }
  .kt-fact .elementor-icon { width: 2.5rem; height: 2.5rem; }
  .kt-fact .elementor-icon-box-wrapper { gap: 0.85rem; }
}

/* ---------------------------------------------------------------
   13. Semantic hero H1 + footer service area
   The H1 is plain text now (no per-line span wrappers); it enters as one block and wraps by balance.
   --------------------------------------------------------------- */
.og-hero__title .elementor-heading-title { text-wrap: balance; animation: og-rise 0.9s var(--ease) 0.45s both; }
@media (prefers-reduced-motion: reduce) { .og-hero__title .elementor-heading-title { animation: none; } }
.og-footer-nav__area p { margin: 0 !important; max-width: 20rem; }
.og-footer-area__label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--footer-brass); }

/* Sytuacje lead: same gold rule as the Usługi lead (.us-lead) */
#sytuacje .og-lead { padding: 0.35rem 0 0.35rem clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; border-left: 3px solid #0e76aa !important; }
#sytuacje .og-lead p { margin: 0 !important; }

/* Footer utility row: legal link between the copyright and 'Do góry' */
.og-footer-utility__legal { padding-block: 0.5rem; }
.og-footer-utility__legal p { font-size: 1rem !important; line-height: 1.6 !important; }
.og-footer-utility__legal a { color: rgba(244, 240, 231, 0.82) !important; text-decoration: underline !important; text-decoration-color: rgba(14, 174, 242, 0.55) !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.25em; transition: color var(--ogp-dur, 0.32s) var(--ogp-ease), text-decoration-color var(--ogp-dur, 0.32s) var(--ogp-ease); }
.og-footer-utility__legal a:hover, .og-footer-utility__legal a:focus-visible { color: #f4f0e7 !important; text-decoration-color: #0eaef2 !important; }
@media (min-width: 600px) { .og-footer-utility__legal { margin-right: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem); } }

/* ---------------------------------------------------------------
   Footer balance: equal-height columns, area strip, symmetric bottom row
   --------------------------------------------------------------- */
.og-footer-nav__note { margin-top: 1rem !important; }
.og-footer-nav__note p { margin: 0 !important; max-width: 15rem; font-size: 1rem !important; line-height: 1.55 !important; }
.e-con.og-footer .og-footer-area { margin: 0 !important; padding: 1.5rem 0 !important; border-top: 1px solid var(--footer-rule); }
.og-footer-area p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 1.1rem; margin: 0 !important; max-width: none !important; text-align: center; font-size: 1rem !important; line-height: 1.55 !important; }
.og-footer-area .og-footer-area__label { display: inline; margin: 0 !important; }
.e-con.og-footer .og-footer-utility { padding-block: 1.5rem !important; }
@media (min-width: 768px) { .e-con.og-footer .og-footer-nav { padding-bottom: 3.5rem !important; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .e-con.og-footer .og-footer-nav__brand { grid-column: auto !important; order: 1; }
  .e-con.og-footer .og-footer-nav__contact { order: 2; }
  .e-con.og-footer .og-footer-nav > .og-footer-nav__col:not(.og-footer-nav__brand):not(.og-footer-nav__contact) { order: 3; }
}
@media (max-width: 767px) {
  /* Body reserves room for the sticky call bar: paint it footer-dark instead of a white strip */
  .e-con.og-footer { box-shadow: 0 76px 0 0 #093653; }
  .e-con.og-footer .og-footer-utility .og-footer-top .elementor-button { margin-top: 0.5rem; }
}
@media (max-width: 767px) {
  /* Two link columns: fixed row height so wrapped labels do not push the columns out of line */
  .e-con.og-footer .og-footer-menu .elementor-nav-menu > li { min-height: 3rem !important; }
  .e-con.og-footer .og-footer-menu .elementor-item { font-size: 1rem !important; line-height: 1.25 !important; text-align: center; }
}

/* ---------------------------------------------------------------
   Cennik factor cards (all variants): centred content, icon in a gold halo
   --------------------------------------------------------------- */
.cn-section.e-con .e-con.cn-factor {
  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  position: relative; overflow: hidden; padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) clamp(1.25rem, 1rem + 0.8vw, 1.75rem) !important;
  border: 1px solid rgba(14, 118, 170, 0.22); background: linear-gradient(180deg, #faf7f1 0%, var(--cn-card, #f5f2eb) 100%);
}
.cn-section.e-con .e-con.cn-factor::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--cn-gold, #0eaef2) 50%, transparent); opacity: 0; transition: opacity 0.4s var(--cn-ease, ease);
}
.cn-section.e-con .e-con.cn-factor:hover::before { opacity: 1; }

.cn-section.e-con .cn-factor__icon { width: auto; margin: 0 auto clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); }
.cn-section.e-con .cn-factor__icon .elementor-icon-wrapper { display: flex; justify-content: center; }
.cn-section.e-con .cn-factor__icon .elementor-icon {
  display: grid; place-items: center; width: 6.25rem; height: 6.25rem; border-radius: 50%; font-size: 0;
  border: 1px solid rgba(14, 118, 170, 0.38);
  background: radial-gradient(circle at 30% 24%, rgba(14, 174, 242, 0.34), rgba(14, 118, 170, 0.1) 72%);
  transition: background-color 0.4s var(--cn-ease, ease), border-color 0.4s var(--cn-ease, ease), transform 0.5s var(--cn-ease, ease);
}
.cn-section.e-con .cn-factor__icon .elementor-icon svg { width: 3.5rem !important; height: 3.5rem !important; transition: transform 0.5s var(--cn-ease, ease); }
.cn-section.e-con .cn-factor__icon .elementor-icon svg * { stroke-width: 1.5 !important; transition: stroke 0.3s var(--cn-ease, ease); }

.cn-section.e-con .e-con.cn-factor__copy { display: block; width: 100%; max-width: 19rem; margin-inline: auto; }
.cn-section.e-con .cn-factor__title .elementor-heading-title { margin: 0 0 0.5rem !important; text-align: center; }
.cn-section.e-con .cn-factor__text p { text-align: center; text-wrap: balance; }

@media (hover: hover) and (pointer: fine) {
  .cn-section.e-con .e-con.cn-factor:hover .cn-factor__icon .elementor-icon {
    background: var(--cn-gold-deep, #0e76aa); border-color: var(--cn-gold-deep, #0e76aa); transform: translateY(-2px);
  }
  .cn-section.e-con .e-con.cn-factor:hover .cn-factor__icon .elementor-icon svg * { stroke: #fffaf0 !important; }
  .cn-section.e-con .e-con.cn-factor:hover .cn-factor__icon .elementor-icon svg { transform: scale(1.06); }
}

@media (max-width: 679px) {
  .cn-section.e-con .cn-factor__icon .elementor-icon { width: 5rem; height: 5rem; }
  .cn-section.e-con .cn-factor__icon .elementor-icon svg { width: 2.75rem !important; height: 2.75rem !important; }
  .cn-section.e-con .e-con.cn-factor { padding: 1.5rem 1.25rem 1.6rem !important; }
}
@media (min-width: 1280px) {
  /* five cards in a row on the wide variant: slightly smaller halo */
  .cn-section--wide.e-con .cn-factor__icon .elementor-icon { width: 5.25rem; height: 5.25rem; }
  .cn-section--wide.e-con .cn-factor__icon .elementor-icon svg { width: 2.9rem !important; height: 2.9rem !important; }
}
.cn-section.e-con .e-con.cn-factors { grid-auto-rows: 1fr; }

/* Cennik with photo (default variant): the aside is taller than the copy, so pin the copy to the top
   and let it ride along while the photo + cards scroll past. */
@media (min-width: 1024px) and (min-height: 700px) {
  .cn-section.e-con:not(.cn-section--flat):not(.cn-section--wide) .e-con.cn-grid { align-items: start; }
  .cn-section.e-con:not(.cn-section--flat):not(.cn-section--wide) .e-con.cn-main {
    position: sticky; top: calc(var(--og-header-h, 64px) + var(--og-admin, 0px) + 1.5rem); align-self: start;
  }
}

/* "Nie widzisz czegoś na liście?" panel: centred on phones */
@media (max-width: 767px) {
  .cw-section .e-con.cw-contact { align-items: center; text-align: center; padding: 28px 20px 30px; }
  .cw-section .cw-contact__box { align-self: center; }
  .cw-section .e-con.cw-contact__copy { width: 100%; text-align: center; }
  .cw-section .cw-contact__eyebrow .elementor-heading-title, .cw-section .cw-contact__title .elementor-heading-title, .cw-section .cw-contact__text p { text-align: center; }
  .cw-section .cw-contact__text p { text-wrap: balance; }
  .cw-section .cw-contact .cw-ask { align-self: center; }
  .cw-section .cw-contact .cw-ask .elementor-button-content-wrapper { justify-content: center; }
}

/* "Jak działamy" on phones: one card per step — full-width photo with the number pinned on it, copy underneath.
   Replaces the cramped number | 92px thumbnail | text row. */
@media (max-width: 599px) {
  .e-con.ps-section .e-con.ps-steps { gap: 1.25rem; }
  .e-con.ps-section .e-con.ps-step {
    display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none; grid-template-rows: none;
    position: relative; overflow: hidden; padding: 0 !important;
    border: 1px solid rgba(14, 59, 87, 0.1); border-radius: var(--ogp-r-md, 16px); background: #fff; box-shadow: var(--ogp-sh-1);
  }
  .e-con.ps-section .e-con.ps-step:not(:last-child)::before, .e-con.ps-section .e-con.ps-step:not(:last-child)::after { display: none !important; }
  .e-con.ps-section .e-con.ps-step .ps-img { order: 1; display: block !important; grid-column: auto; grid-row: auto; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .e-con.ps-section .e-con.ps-step .ps-img img { aspect-ratio: 16 / 11 !important; }
  .e-con.ps-section .e-con.ps-step .ps-num { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; width: auto; margin: 0 !important; grid-column: auto; grid-row: auto; align-self: auto; }
  .e-con.ps-section .e-con.ps-step .ps-num .elementor-heading-title { width: 2.75rem; height: 2.75rem; font-size: 1rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92); }
  .e-con.ps-section .e-con.ps-step .ps-step-title { order: 2; grid-column: auto; grid-row: auto; align-self: stretch; padding: 1.25rem 1.25rem 0; }
  .e-con.ps-section .e-con.ps-step .ps-step-title .elementor-heading-title { margin: 0 0 0.4rem !important; font-size: 1.3125rem; line-height: 1.22; }
  .e-con.ps-section .e-con.ps-step .ps-step-text { order: 3; grid-column: auto; grid-row: auto; padding: 0 1.25rem 1.5rem; }
  .e-con.ps-section .e-con.ps-step .ps-step-text p { font-size: 1rem !important; line-height: 1.55 !important; }
}

/* Quote form: the widget adds its own red required mark after labels that already carry an asterisk; it sat on its own line and pushed the phone field down */
.og-form .solaceform-field-column > label + span[style*="red"], .solaceform-form .solaceform-field-column > label + span[style*="red"] { display: none !important; }
.solaceform-checkbox-warp .box > span a { color: var(--og-slate, #0e3b57) !important; font-weight: 700; text-decoration: underline; text-decoration-color: #0eaef2; text-underline-offset: 0.2em; }
.e-con.og-footer .og-footer-utility__legal { padding-block: 0; }
.og-footer-utility__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Footer link lists always use the plain list layout. Solace forces every nav dropdown copy to position:fixed; inset:0; z-index:999, so on phones the footer menus' hidden dropdown copies sat full-screen and bled through the open burger menu. */
body .og-footer .elementor-widget-solace-extra-nav-menu .elementor-nav-menu--dropdown.solace-elementor-nav-menu--dropdown, body .og-footer .elementor-widget-solace-extra-nav-menu .elementor-menu-toggle { display: none !important; }
body .og-footer .elementor-widget-solace-extra-nav-menu .elementor-nav-menu--main { display: block !important; }
/* Solace gives every nav-menu widget z-index:999; in the footer that lifted the link lists above the fixed header and its open burger menu. */
body .og-footer .elementor-widget-solace-extra-nav-menu { z-index: auto !important; }

/* Subpage hero facts card: the small azure label sits on a translucent dark panel; a lighter azure keeps it above 4.5:1. */
.og-fhero .og-fhero__facts-label.elementor-widget-heading .elementor-heading-title { color: #5cc8f6 !important; }

/* Form select matches the other fields (theme default was a black square border) */
.solaceform-form select.solaceform-style-field, .og-form select { border: 1px solid rgba(14, 59, 87, 0.18) !important; border-radius: 12px !important; background-color: #fff !important; }
.solaceform-form select.solaceform-style-field:focus, .og-form select:focus { border-color: #0e76aa !important; }

/* cw-tick-centre: Elementor's icon-list gap and the tick's high-set path left the check off-centre in its circle */
.cw-section .elementor-icon-list-icon svg { margin: 0 !important; transform: translateY(7.14%); }

/* cw-dialog-gap: breathing room between the popup note and its buttons */
.cw-dialog .cw-dialog__note { margin-bottom: 24px !important; }

/* pr-bar-frame: the Cennik call bar is a rounded card, so give it a full border and equal padding; actions hug their buttons */
.pr-section .e-con.pr-bar { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) clamp(1.5rem, 1rem + 1.8vw, 2.75rem) !important; border: 1px solid var(--pr-line); }
.pr-section .e-con.pr-bar__actions { flex: 0 0 auto; width: auto; }

/* cw-cards-still: 'Co wywozimy' tiles stay put. No slide-up on scroll, no lift on hover; hover keeps only the photo zoom and the blue outline */
.og-reveal-ready .cw-section .e-con.cw-card[data-reveal] { translate: none !important; }
.cw-section .e-con.cw-card, .cw-section .e-con.cw-card:hover { transform: none !important; translate: none !important; }
.cw-section .e-con.cw-card:hover { box-shadow: none !important; }