/* ==========================================================================
   Moduł „Serwis instalacji HVAC” – template-serwis-hub.php / template-serwis-usluga.php
   Osobny plik (bez kompilacji SASS). Ładowany tylko na tych szablonach (functions/serwis.php).

   Wykorzystane istniejące klasy motywu (NIE duplikujemy ich stylów):
   .l-container--small, .heading2, .regular-text(--black/--white), .button1 + svg('arrow.svg'),
   partials/form-oferta.php, AOS (data-aos), GLightbox (.glightbox).
   Skala jak w motywie: html { font-size: 0.52085vw } → 1rem = 10px przy 1920px (wartości z Figmy / 10).
   ========================================================================== */

.srv {
  --srv-blue: #003f9a;
  --srv-navy: #002d6e;
  --srv-navy-dark: #001e48;
  --srv-accent: #d2eb3a;
  --srv-gray: #f4f6f8;
  --srv-text: #10161e;
  --srv-muted: #444444;
  --srv-placeholder: #dfdfdf;
  --srv-line: rgba(16, 22, 30, 0.1);
  --srv-gutter: 16rem;
  --srv-gap: 6rem;
  color: var(--srv-text);
}

/* Bootstrap (sf-bootstrap) dokłada marginesy – zerujemy je tylko w module */
/* :where() = zerowa specyficzność, żeby klasy bloków mogły nadpisać marginesy */
:where(.srv) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.srv) :where(ul, ol) { list-style: none; }
:where(.srv) img { display: block; max-width: 100%; height: auto; }
.srv .regular-text--white { font-weight: 400; }

/* Kontener: istniejący .l-container--small (14rem) → w Figmie 16rem */
@media screen and (min-width: 993px) {
  .srv .l-container--small { padding: 0 var(--srv-gutter); }
}

/* --------------------------------------------------------------------------
   Typografia – rozszerzenia istniejącego .heading2 (48/60, bold, #003f9a)
   -------------------------------------------------------------------------- */
.srv .srv-h { text-transform: uppercase; }
.srv .srv-h--bar { position: relative; padding-left: 4.3rem; }
.srv .srv-h--bar::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 1.7rem;
  height: 3.6rem;
  background-color: var(--srv-blue);
}
.srv .srv-h--center { text-align: center; }
.srv .srv-h--blue { color: var(--srv-blue); }
.srv .srv-h--accent,
.srv .srv-accent { color: var(--srv-accent); }
.srv-hero .srv-accent { color: var(--srv-accent); }

.srv .srv-wysiwyg > * + * { margin-top: 1.5rem; }
.srv .srv-wysiwyg strong { font-weight: 700; }
.srv .srv-wysiwyg a { color: var(--srv-blue); text-decoration: underline; }
.srv .srv-wysiwyg ul { padding-left: 2.2rem; list-style: square; }

.srv-lead {
  max-width: var(--srv-lead-w, 115.7rem);
  margin: 3rem auto 0;
  text-align: center;
}
.srv-lead--wide { max-width: 121.7rem; }

/* --------------------------------------------------------------------------
   Sekcje – wspólny rytm pionowy
   -------------------------------------------------------------------------- */
.srv-block { padding: var(--srv-gap) 0; }
.srv-block--tight { padding: calc(var(--srv-gap) * 0.6) 0; }
.srv-block--gray { background-color: var(--srv-gray); }
.srv-block--dark { background-color: var(--srv-navy); }
.srv-block--gray + .srv-block--gray { padding-top: 0; }

/* --------------------------------------------------------------------------
   Okruszki (Yoast) – granatowa „pigułka”
   -------------------------------------------------------------------------- */
.srv-breadcrumbs {
  display: inline-flex;
  padding: 0.9rem 1.7rem;
  margin-bottom: 5.2rem;
  background-color: var(--srv-navy);
  color: #fff;
  font-size: 1.7rem;
  line-height: 2.6rem;
}
.srv-breadcrumbs > span { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.srv-breadcrumbs span { display: inline-flex; align-items: center; gap: 1.6rem; }
.srv-breadcrumbs a { color: #fff; }
.srv-breadcrumbs a:hover { color: var(--srv-accent); }
.srv-breadcrumbs__sep svg { width: 0.9rem; height: auto; }
/* jedna linia jak w Figmie – długi tytuł bieżącej strony skracany wielokropkiem */
.srv-breadcrumbs { max-width: 100%; }
.srv-breadcrumbs > span { flex-wrap: nowrap; min-width: 0; }
.srv-breadcrumbs span { flex-shrink: 0; }
.srv-breadcrumbs .breadcrumb_last { display: block; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Przyciski – bazują na istniejącym .button1 (flex, gap, animacja strzałki)
   -------------------------------------------------------------------------- */
.srv-buttons { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 5.5rem; }
.srv .srv-btn {
  min-height: 7.8rem;
  padding: 2.4rem 4.1rem;
  justify-content: center;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  text-transform: uppercase;
  border: 0.4rem solid transparent;
}
.srv .srv-btn svg { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.srv .srv-btn--primary { background-color: var(--srv-blue); color: #fff; }
.srv .srv-btn--primary:hover { background-color: var(--srv-navy); color: #fff; }
.srv .srv-btn--outline { background-color: var(--srv-gray); border-color: var(--srv-accent); color: var(--srv-navy); }
.srv .srv-btn--outline svg path { fill: var(--srv-navy); }
.srv .srv-btn--outline:hover { background-color: var(--srv-accent); color: var(--srv-navy); }

/* --------------------------------------------------------------------------
   Lista z żółtymi kropkami
   -------------------------------------------------------------------------- */
.srv-dots li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 2rem;
  line-height: 3rem;
  color: var(--srv-navy);
}
.srv-dots li + li { margin-top: 0.5rem; }
.srv-dots li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0.05rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--srv-accent);
}
.srv-dots--white li { color: #fff; }

/* --------------------------------------------------------------------------
   Linki ze strzałką / akapity ze strzałką
   -------------------------------------------------------------------------- */
.srv-links { margin-top: 3rem; }
.srv-links li { display: flex; align-items: flex-start; gap: 1.4rem; }
.srv-links li + li { margin-top: 1.5rem; }
.srv-links a { display: inline-flex; align-items: flex-start; gap: 1.4rem; font-size: 2rem; line-height: 3rem; font-weight: 700; color: var(--srv-text); }
.srv-links a:hover { color: var(--srv-blue); }
.srv-links svg { flex-shrink: 0; width: 2rem; height: 2rem; margin-top: 0.5rem; transition: transform 0.2s ease-in-out; }
.srv-links a:hover svg { transform: translateX(0.5rem); }

/* --------------------------------------------------------------------------
   HERO – podstrona
   -------------------------------------------------------------------------- */
.srv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 78.5rem;
}
.srv-hero--narrow { grid-template-columns: 1fr 88rem; }
.srv-hero__content { padding: 2.9rem 1.2rem 7.5rem var(--srv-gutter); }
.srv-hero__title { max-width: 79rem; }
.srv-hero__text { max-width: 67.7rem; margin-top: 4.4rem; margin-left: 4.3rem; }
.srv-hero .srv-buttons { margin-left: 4.3rem; }
.srv-hero--narrow .srv-hero__text { max-width: 75.7rem; }
.srv-hero__image {
  position: relative;
  overflow: hidden;
  background-color: var(--srv-placeholder);
  border-bottom-left-radius: 20rem;
}
.srv-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   HERO – strona nadrzędna (hub)
   -------------------------------------------------------------------------- */
.srv-hero-hub {
  position: relative;
  min-height: 78.5rem;
  overflow: hidden;
  background-color: var(--srv-navy);
  border-bottom: 3rem solid var(--srv-accent);
  color: #fff;
}
.srv-hero-hub__image { position: absolute; top: 0; right: 0; bottom: 0; left: 21.25%; }
.srv-hero-hub__image img { width: 100%; height: 100%; object-fit: cover; }
.srv-hero-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--srv-navy) 0%, var(--srv-navy) 21%, rgba(0, 45, 110, 0) 49%);
  pointer-events: none;
}
.srv-hero-hub__inner { position: relative; z-index: 2; padding: 2.9rem var(--srv-gutter) 8rem; }
.srv-hero-hub .srv-breadcrumbs { background-color: transparent; margin-bottom: 6.6rem; }
.srv-hero-hub__content { max-width: 94.5rem; }
.srv-hero-hub__content .srv-dots { max-width: 59.5rem; }
.srv-hero-hub__tagline,
.srv-hero-hub__title {
  font-size: 3.6rem;
  line-height: 4.6rem;
  font-weight: 600;
}
.srv-hero-hub__tagline { position: relative; color: var(--srv-accent); }
.srv-hero-hub__tagline::after { content: ""; position: absolute; left: 0; bottom: -0.15rem; width: 54.2rem; max-width: 100%; height: 0.3rem; background-color: var(--srv-accent); }
.srv-hero-hub__tagline--sub { margin-top: 2.65rem; }
.srv-hero-hub__tagline--sub::after { bottom: -0.5rem; width: 58.1rem; }
.srv-hero-hub__tagline--sub + .srv-dots { margin-top: 2rem; }
.srv-hero-hub__title { margin-top: 1.85rem; color: #fff; text-transform: uppercase; }
.srv-hero-hub__title + .srv-dots { margin-top: 1.25rem; }
.srv-hero-hub__shout {
  position: absolute;
  top: 14.5rem;
  right: 12.1rem;
  font-size: 9rem;
  line-height: 6rem;
  font-weight: 700;
  color: #fff;
}
.srv-hero-hub__cta {
  position: absolute;
  right: -2.4rem;
  bottom: -1rem;
  z-index: 3;
  width: 54rem;
  min-height: 36rem;
  padding: 6.2rem 4rem 3rem 8.1rem;
  background-color: var(--srv-navy);
  border: 0.8rem solid var(--srv-accent);
  border-top-left-radius: 5rem;
}
.srv-hero-hub__cta-link {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 3.6rem;
  line-height: 4.6rem;
  font-weight: 600;
  color: #fff;
}
.srv-hero-hub__cta-link + .srv-hero-hub__cta-link { margin-top: 1rem; }
.srv-hero-hub__cta-link:hover { color: var(--srv-accent); }
.srv-hero-hub__cta-link svg { width: 3rem; height: 3rem; flex-shrink: 0; transition: transform 0.2s ease-in-out; }
.srv-hero-hub__cta-link:hover svg { transform: translateX(0.6rem); }
.srv-hero-hub__cta-logo { margin-top: 2.6rem; margin-left: -1.5rem; }
.srv-hero-hub__logo { width: 35rem; height: auto; }

/* --------------------------------------------------------------------------
   WSTĘP (hub)
   -------------------------------------------------------------------------- */
.srv-intro__title {
  font-size: 7rem;
  line-height: 8.5rem;
  font-weight: 700;
  color: var(--srv-accent);
}
.srv-intro { padding-top: 8.5rem; }
.srv-intro .srv-dots { max-width: 59.5rem; }
.srv-intro__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8rem; margin-top: 7.5rem; }
.srv .srv-intro__text { color: var(--srv-navy); max-width: 72rem; }
.srv-intro__list-title { font-size: 2rem; line-height: 3rem; font-weight: 700; color: var(--srv-navy); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   BOX Z IKONAMI (granat + żółta ramka)
   -------------------------------------------------------------------------- */
.srv-features { padding: 7.5rem 0 1.5rem; }
.srv-features__intro {
  max-width: 153.8rem;
  margin: 0 auto 6rem;
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
}
.srv-features__box {
  max-width: 159.4rem;
  padding: 6.8rem 7rem 7rem;
  background-color: var(--srv-navy);
  border: 0.9rem solid var(--srv-accent);
  border-radius: 2rem;
}
.srv-features__box:has(.heading2) { padding-top: 5.8rem; }
.srv-features__box .heading2 { margin-bottom: 5.8rem; }
.srv-features__items {
  display: grid;
  grid-template-columns: repeat(var(--srv-cols, 6), minmax(0, 1fr));
  gap: 4rem 0;
}
.srv-features__item { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.srv-features__icon { display: flex; align-items: flex-end; justify-content: center; height: 11.3rem; }
.srv-features__icon img { width: auto; max-height: 11.8rem; }
.srv-features__title { max-width: 23rem; margin-top: 3.5rem; font-size: 2rem; line-height: 3rem; font-weight: 700; }
.srv-features__desc { max-width: 26rem; margin-top: 1.5rem; font-size: 1.7rem; line-height: 2.6rem; }

/* --------------------------------------------------------------------------
   SIATKA IKON
   -------------------------------------------------------------------------- */
.srv-grid__items {
  display: grid;
  grid-template-columns: repeat(var(--srv-cols, 6), minmax(0, 1fr));
  gap: 4rem 2rem;
  margin-top: 6rem;
}
.srv-grid__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.srv-grid__icon { display: flex; align-items: flex-end; justify-content: center; height: 12.6rem; }
.srv-grid__icon img { width: auto; max-height: 12.6rem; }
.srv-grid__title { display: flex; align-items: center; justify-content: center; min-height: 6rem; max-width: 26rem; margin-top: 3.2rem; font-size: 2rem; line-height: 3rem; font-weight: 700; color: var(--srv-text); }
.srv-grid__desc { max-width: 40rem; margin-top: 1.5rem; font-size: 1.7rem; line-height: 2.6rem; }
.srv-grid--dividers .srv-grid__items { gap: 4rem 0; }
.srv-grid--dividers .srv-grid__item { padding: 0 3rem; }
.srv-grid--dividers .srv-grid__item + .srv-grid__item { border-left: 1px solid var(--srv-line); }
.srv-grid--dividers .srv-grid__title { color: var(--srv-navy); }
/* Wariant „duże” (np. oddymianie): ikony ~18rem, tytuł 36/46 semibold, opis 20/30 */
.srv-grid--large .srv-grid__items { gap: 6rem 6.7rem; margin-top: 8rem; }
.srv-grid--large .srv-grid__icon { height: 18.3rem; }
.srv-grid--large .srv-grid__icon img { max-height: 18.3rem; }
.srv-grid--large .srv-grid__title { min-height: 9.2rem; max-width: none; margin-top: 4.3rem; font-size: 3.6rem; line-height: 4.6rem; font-weight: 600; color: var(--srv-blue); }
.srv-grid--large .srv-grid__desc { max-width: 49rem; margin-top: 4.3rem; font-size: 2rem; line-height: 3rem; }

/* --------------------------------------------------------------------------
   KROKI
   -------------------------------------------------------------------------- */
.srv-steps__items {
  display: grid;
  grid-template-columns: repeat(var(--srv-cols, 5), minmax(0, 1fr));
  gap: 4rem 3rem;
  margin-top: 4rem;
}
.srv-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.srv-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--srv-accent);
  color: var(--srv-navy);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
}
.srv-steps__icon { display: flex; align-items: flex-end; justify-content: center; height: 13.3rem; margin-top: 1.7rem; }
.srv-steps__icon img { width: auto; max-height: 13.3rem; }
.srv-steps__title { margin-top: 3rem; font-size: 2rem; line-height: 3rem; font-weight: 700; color: var(--srv-text); }
.srv-steps__desc { max-width: 27.5rem; margin-top: 1.2rem; font-size: 1.7rem; line-height: 2.6rem; }
.srv-steps__title + .srv-steps__desc { margin-top: 1.2rem; }
.srv-steps__icon + .srv-steps__desc { margin-top: 3rem; }
.srv-steps__arrow {
  position: absolute;
  top: 14.4rem;
  right: 0;
  width: 6.5rem;
  transform: translateX(calc(50% + 1.5rem)) rotate(180deg);
}
.srv-steps__arrow svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   ZDJĘCIE + TEKST
   -------------------------------------------------------------------------- */
/* odstępy jak w Figmie: między „zdjęcie + tekst” 120px, po banerze/boxie ~90-105px */
.srv-banner + .srv-it,
.srv-features + .srv-it { padding-top: 9rem; }
.srv-it__head { margin-bottom: 7.5rem; }
.srv-it__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 3rem; }
.srv-it__media {
  position: relative;
  align-self: start;
  height: var(--srv-it-h, 50.5rem);
  overflow: visible;
  background-color: var(--srv-placeholder);
}
.srv-it__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.srv-it__body { padding-top: var(--srv-it-offset, 9rem); }
/* Jak w Figmie: tekst wcięty o szerokość belki (4.3rem), nagłówek 677px + belka */
.srv-it__body > * { max-width: 67.7rem; margin-left: 4.3rem; }
.srv-it--w-narrow .srv-it__body > * { max-width: 76.2rem; }
.srv-it__body > .srv-h { max-width: 78rem; margin-left: 0; }
.srv-it__body > .srv-it__items { margin-left: 0; max-width: 80rem; }

.srv-it--w-narrow.srv-it--img-left .srv-it__row { grid-template-columns: 87.8rem 1fr; }
.srv-it--w-narrow.srv-it--img-right .srv-it__row { grid-template-columns: 1fr 87.8rem; }
.srv-it--w-narrow .srv-it__media::before { width: 27.1rem !important; }
.srv-it--attach { padding-top: 0; }
.srv-it--attach .srv-it__row { margin-top: 0; }
.srv-block:has(+ .srv-it--attach) { padding-bottom: 0; }
.srv-it--img-left .srv-it__body { padding-left: 8rem; padding-right: var(--srv-gutter); }
.srv-it--img-right .srv-it__media { order: 2; }
.srv-it--img-right .srv-it__body { padding-left: var(--srv-gutter); padding-right: 8rem; justify-self: start; }

/* Duży zaokrąglony róg – zawsze od strony tekstu */
.srv-it--img-left.srv-it--corner-bottom .srv-it__media { border-bottom-right-radius: 20rem; }
.srv-it--img-right.srv-it--corner-bottom .srv-it__media { border-bottom-left-radius: 20rem; }
.srv-it--img-left.srv-it--corner-top .srv-it__media { border-top-right-radius: 20rem; }
.srv-it--img-right.srv-it--corner-top .srv-it__media { border-top-left-radius: 20rem; }

/* Gruba belka nad zdjęciem: krótka (przy krawędzi ekranu) lub na całą szerokość */
.srv-it--line-short .srv-it__media::before {
  content: "";
  position: absolute;
  top: -3rem;
  width: 29.6rem;
  height: 3rem;
  background-color: var(--srv-blue);
}
.srv-it--img-left.srv-it--line-short .srv-it__media::before { left: 0; }
.srv-it--img-right.srv-it--line-short .srv-it__media::before { right: 0; }
.srv-it--line-full .srv-it__row::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: 0;
  right: 0;
  height: 3rem;
  background-color: var(--srv-blue);
}
.srv-it--line-none .srv-it__row { margin-top: 0; }
/* Jak w Figmie: zdjęcie dochodzi do belki separatora pod sekcją */
@media screen and (min-width: 993px) {
  .srv-it:has(+ .srv-separator) { padding-bottom: 0; }
  .srv-it:has(+ .srv-separator) .srv-it__media { align-self: end; }
  .srv-it:has(+ .srv-separator) .srv-it__body { padding-bottom: var(--srv-gap); }
}

.srv-it__body .srv-h + .srv-wysiwyg { margin-top: 4rem; }
.srv-it__items { margin-top: 4rem; }
.srv-it__items li + li { margin-top: 4rem; }
.srv .srv-it__item-title { margin-bottom: 1rem; }

/* Box informacyjny pod tekstem */
.srv-info {
  max-width: 75.3rem;
  margin-top: 3rem;
  padding: 1.6rem 1.8rem;
  background-color: var(--srv-gray);
  border-left: 0.4rem solid #1560a8;
  border-radius: 0.4rem;
  font-size: 1.7rem;
  line-height: 2.6rem;
}
.srv-info--link p { font-weight: 700; }
.srv-info__link {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.2rem;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
  color: var(--srv-blue);
}
.srv-info__link:hover { color: var(--srv-navy); }
.srv-info__link svg { width: 2rem; height: 2rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   LISTA Z AKCENTEM (żółty tytuł + opis)
   -------------------------------------------------------------------------- */
.srv-accent-list__item {
  display: grid;
  grid-template-columns: 64rem 1fr;
  padding: 5rem 0;
}
.srv-accent-list__item:first-child { padding-top: 0; }
.srv-accent-list__item:last-child { padding-bottom: 0; }
.srv-accent-list__item + .srv-accent-list__item { border-top: 1px solid var(--srv-line); }
.srv-accent-list__title {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding-right: 4rem;
  font-size: 3.6rem;
  line-height: 4.6rem;
  font-weight: 600;
  color: var(--srv-accent);
}
.srv-accent-list__title span { max-width: 44.4rem; }
.srv-accent-list__title svg { width: 3.9rem; height: 3.9rem; flex-shrink: 0; margin-top: 0.4rem; }
.srv-accent-list__item .srv-wysiwyg { max-width: 96rem; }

/* --------------------------------------------------------------------------
   AKAPITY ZE STRZAŁKAMI
   -------------------------------------------------------------------------- */
.srv-bullets__items { margin-top: 3rem; }
.srv-bullets__items li { gap: 3.8rem; }
.srv-bullets__items svg { margin-top: 0.5rem; }
.srv .srv-bullets .regular-text { color: var(--srv-muted); }

/* --------------------------------------------------------------------------
   GRANATOWA SEKCJA – 2 KOLUMNY
   -------------------------------------------------------------------------- */
.srv-dark { padding: 10.6rem 0 7rem; border-top: 3rem solid var(--srv-accent); color: #fff; }
.srv-dark__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem 16rem; margin-top: 9rem; }
.srv-dark__title {
  max-width: 55.5rem;
  min-height: 9.2rem;
  margin-bottom: 3.6rem;
  font-size: 3.6rem;
  line-height: 4.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}
.srv-dark__image {
  margin-top: 4.6rem;
  overflow: hidden;
  border-radius: 10rem;
  aspect-ratio: 722 / 450;
  background-color: var(--srv-placeholder);
}
.srv-dark__image img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   BANER (tekst + zdjęcie wtapiające się gradientem)
   -------------------------------------------------------------------------- */
.srv-banner {
  --srv-banner-bg: var(--srv-navy);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 48rem;
  padding: 6.8rem 0 8rem;
  background-color: var(--srv-banner-bg);
}
.srv-banner--light { --srv-banner-bg: var(--srv-gray); }
/* po białej sekcji – odstęp jak w Figmie; po szarej (kroki) baner przylega */
.srv-block:not(.srv-block--gray):not(.srv-block--dark) + .srv-banner { margin-top: 6rem; }
.srv-bullets { padding-bottom: var(--srv-gap); }
.srv-banner__image { position: absolute; top: 0; right: 0; bottom: 0; width: 66.7%; }
.srv-banner__image img { width: 100%; height: 100%; object-fit: cover; }
.srv-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--srv-banner-bg) 0%, var(--srv-banner-bg) 8%, rgba(255, 255, 255, 0) 70%);
}
.srv-banner--dark .srv-banner__image::after {
  background: linear-gradient(90deg, var(--srv-navy) 0%, var(--srv-navy) 8%, rgba(0, 45, 110, 0) 70%);
}
.srv-banner--light .srv-banner__image::after {
  background: linear-gradient(90deg, var(--srv-gray) 0%, var(--srv-gray) 8%, rgba(244, 246, 248, 0) 70%);
}
.srv-banner__inner { position: relative; z-index: 1; width: 100%; }
.srv-banner__content { max-width: 80rem; }
.srv-banner .srv-banner__title { margin-bottom: 4rem; }
.srv-banner--dark .srv-banner__title { color: #fff; }

/* --------------------------------------------------------------------------
   PAS ZDJĘĆ
   -------------------------------------------------------------------------- */
.srv-gallery {
  display: grid;
  grid-template-columns: repeat(var(--srv-cols, 4), minmax(0, 1fr));
  border-top: 3rem solid var(--srv-accent);
  border-bottom: 3rem solid var(--srv-accent);
  margin: var(--srv-gap) 0;
}
.srv-gallery__item { display: block; overflow: hidden; height: var(--srv-gallery-h, 56rem); background-color: var(--srv-placeholder); }
.srv-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-in-out; }
.srv-gallery__item:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.srv-faq__heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.srv-faq__heading .heading2 { text-transform: uppercase; }
.srv-faq__subtitle {
  font-size: 3.6rem;
  line-height: 4.6rem;
  font-weight: 600;
  color: var(--srv-navy);
}
.srv-faq__items { margin-top: 5.5rem; }
.srv-faq__item { border-bottom: 1px solid #707070; }
.srv-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 12rem;
  padding: 2rem 0;
  font-size: 2.4rem;
  line-height: 3rem;
  color: var(--srv-navy);
  cursor: pointer;
  list-style: none;
}
.srv-faq__q::-webkit-details-marker { display: none; }
.srv-faq__q:hover { color: var(--srv-blue); }
.srv-faq__q:focus-visible { outline: 2px solid var(--srv-blue); outline-offset: 0.4rem; }
.srv-faq__icon { flex-shrink: 0; margin-left: 8rem; transition: transform 0.3s ease-in-out; }
.srv-faq__icon svg { display: block; width: 3.2rem; height: 3.2rem; }
.srv-faq__item[open] .srv-faq__icon { transform: rotate(180deg); }
.srv-faq__item.is-closing .srv-faq__icon { transform: none; }
.srv-faq__a { max-width: 156.2rem; padding-bottom: 4.2rem; overflow: hidden; }

/* --------------------------------------------------------------------------
   SEPARATOR (gruba belka na całą szerokość)
   -------------------------------------------------------------------------- */
.srv .srv-separator {
  display: block;
  height: 3rem;
  margin: 0;
  border: 0;
  opacity: 1;
  background-color: var(--srv-blue);
}
.srv .srv-separator--accent { background-color: var(--srv-accent); }

/* --------------------------------------------------------------------------
   Formularz (istniejący partial) + zdjęcie nad stopką
   -------------------------------------------------------------------------- */
/* Istniejący formularz (partials/form-oferta.php) – tylko odstępy i nagłówek wg Figmy */
.srv .form-offer { margin-bottom: 0; }
.srv .form-offer__container { padding-top: 8.5rem; padding-bottom: 14.7rem; }
.srv .form-offer__container > svg { display: none; }
.srv .form-offer__container > h3 { font-size: 4.8rem; line-height: 6rem; font-weight: 700; }
.srv-bottom-photo { position: relative; height: 65.8rem; overflow: hidden; background-color: var(--srv-placeholder); }
.srv-bottom-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.srv-bottom-photo--flip img { transform: scaleX(-1); }
.srv-bottom-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--srv-navy) 0%, rgba(0, 45, 110, 0) 50%);
}

/* ==========================================================================
   RWD – breakpointy jak w motywie (992 / 576). Uwaga: przy ≤992 motyw ustawia
   html font-size 1vw, a przy ≤576 2vw, więc rem dalej skaluje się z ekranem.
   ========================================================================== */
@media screen and (max-width: 1200px) {
  .srv-features__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srv-grid__items,
  .srv-steps__items { grid-template-columns: repeat(min(var(--srv-cols, 3), 3), minmax(0, 1fr)); }
  .srv-steps__arrow { display: none; }
  .srv-grid--dividers .srv-grid__item + .srv-grid__item { border-left: 0; }
}

@media screen and (max-width: 992px) {
  /* MOBILE FIX 1: okruszki zawijają się (na desktopie 1 linia jak w Figmie) */
  .srv-hero__content,
  .srv-it__body { min-width: 0; }
  .srv-breadcrumbs > span { flex-wrap: wrap; row-gap: 0.4rem; }
  .srv-breadcrumbs span { flex-shrink: 1; }
  .srv-breadcrumbs .breadcrumb_last { white-space: normal; overflow: visible; }
  .srv-hero__title { overflow-wrap: anywhere; }

  /* MOBILE FIX 3: sekcje „dosunięte” (schodek z Figmy) – na mobile zwykły odstęp */
  .srv-it--attach { padding-top: var(--srv-gap); }
  .srv-it--attach .srv-it__row { margin-top: 3rem; }
  .srv-block:has(+ .srv-it--attach) { padding-bottom: var(--srv-gap); }
  .srv-it { padding-bottom: var(--srv-gap); }

  .srv { --srv-gutter: 5rem; --srv-gap: 7rem; }

  /* rem = 1vw/2vw – pilnujemy minimalnej czytelnej wielkości tekstu */
  .srv .regular-text,
  .srv-dots li,
  .srv-links a,
  .srv-features__intro,
  .srv-faq__q { font-size: max(2rem, 15px); line-height: 1.5; }
  .srv-grid__desc,
  .srv-steps__desc,
  .srv-features__desc,
  .srv-info,
  .srv-breadcrumbs { font-size: max(1.7rem, 13px); line-height: 1.5; }
  .srv-grid__title,
  .srv-steps__title,
  .srv-features__title { font-size: max(2rem, 14px); line-height: 1.4; }

  .srv-hero { grid-template-columns: minmax(0, 1fr); }
  /* na mobile pasek kontaktu z nagłówka (.lhb-contact) nachodzi na treść */
  .srv-hero__content { padding: 9rem var(--srv-gutter) 6rem; }
  .srv-hero-hub__inner { padding-top: 9rem; }
  .srv-hero__image { min-height: 50rem; border-bottom-left-radius: 12rem; }

  .srv-hero-hub__inner { padding-bottom: 4rem; }
  .srv-hero-hub__image { left: 0; }
  .srv-hero-hub::before { background: linear-gradient(90deg, rgba(0, 45, 110, 0.95) 0%, rgba(0, 45, 110, 0.75) 100%); }
  .srv-hero-hub__shout { position: static; margin-top: 4rem; font-size: 7rem; }
  .srv-hero-hub__cta { position: relative; right: auto; bottom: auto; width: auto; min-height: 0; margin: 0 var(--srv-gutter) 6rem; padding: 5rem; }

  .srv-intro__row { grid-template-columns: 1fr; gap: 5rem; margin-top: 5rem; }

  .srv-it__row { grid-template-columns: minmax(0, 1fr); }
  .srv-it--w-narrow.srv-it--img-left .srv-it__row,
  .srv-it--w-narrow.srv-it--img-right .srv-it__row { grid-template-columns: minmax(0, 1fr); }
  .srv-it--img-right .srv-it__media { order: 0; }
  .srv-it__media { height: min(var(--srv-it-h, 50.5rem), 50rem); min-height: 0; }
  .srv-it--img-left .srv-it__media,
  .srv-it--img-right .srv-it__media { margin-right: var(--srv-gutter); }
  .srv-it__body,
  .srv-it--img-left .srv-it__body,
  .srv-it--img-right .srv-it__body { max-width: none; padding: 6rem var(--srv-gutter) 0; }
  .srv-it--img-right.srv-it--corner-bottom .srv-it__media,
  .srv-it--img-left.srv-it--corner-bottom .srv-it__media { border-radius: 0 0 12rem 0; }
  .srv-it--img-right.srv-it--corner-top .srv-it__media,
  .srv-it--img-left.srv-it--corner-top .srv-it__media { border-radius: 0 12rem 0 0; }
  .srv-it--img-right.srv-it--line-short .srv-it__media::before { left: 0; right: auto; }

  .srv-accent-list__item { grid-template-columns: 1fr; gap: 2.5rem; }
  .srv-grid--large .srv-grid__title { font-size: 3rem; line-height: 3.8rem; }

  .srv-dark__cols { grid-template-columns: 1fr; }
  .srv-dark__title { min-height: 0; }

  .srv-banner__image { width: 100%; }
  .srv-banner--dark .srv-banner__image::after { background: rgba(0, 45, 110, 0.85); }
  .srv-banner--light .srv-banner__image::after { background: rgba(244, 246, 248, 0.9); }

  .srv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-bottom-photo { height: 45rem; }
}

@media screen and (max-width: 576px) {
  /* MOBILE FIX 2: box z ikonami – mniejsze wcięcia, tytuły się nie nachodzą */
  .srv-features__box { padding: 4.5rem 2rem 5rem; }
  .srv-features__items { gap: 4.5rem 2rem; }
  .srv-features__icon { height: 9rem; }
  .srv-features__icon img { max-height: 9rem; }
  .srv-features__title { max-width: none; margin-top: 2.2rem; overflow-wrap: anywhere; hyphens: auto; }

  .srv { --srv-gutter: 2.5rem; }

  .srv .heading2 { font-size: 3.6rem; line-height: 4.6rem; }
  .srv .srv-h--bar { padding-left: 3.2rem; }
  .srv .srv-h--bar::before { top: 0.6rem; width: 1.4rem; height: 3.2rem; }
  /* wcięcie tekstu = szerokość belki nagłówka na mobile */
  .srv-it__body > *,
  .srv-hero__text,
  .srv-hero .srv-buttons { margin-left: 3.2rem; }
  .srv-it__body > .srv-h,
  .srv-it__body > .srv-it__items { margin-left: 0; }
  .srv-intro__title { font-size: 5rem; line-height: 6rem; }
  .srv-hero-hub__shout { font-size: 5.4rem; }
  .srv-hero-hub__tagline,
  .srv-hero-hub__title,
  .srv-hero-hub__cta-link,
  .srv-accent-list__title,
  .srv-dark__title,
  .srv-faq__subtitle { font-size: 2.8rem; line-height: 3.6rem; }

  .srv-buttons { flex-direction: column; }
  .srv .srv-btn { width: 100%; }

  .srv-features__items,
  .srv-grid__items,
  .srv-steps__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-grid--dividers .srv-grid__items { grid-template-columns: 1fr; }
  /* MOBILE FIX 5: pas zdjęć – jedno pod drugim */
  .srv-gallery { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .srv-gallery__item { height: auto; aspect-ratio: 4 / 3; }
  /* MOBILE FIX 4: siatka „duże ikony” (oddymianie) – jedna kolumna, mniejsze tytuły */
  .srv-grid--large .srv-grid__items { grid-template-columns: minmax(0, 1fr); gap: 7rem; margin-top: 6rem; }
  .srv-grid--large .srv-grid__icon { height: 15rem; }
  .srv-grid--large .srv-grid__icon img { max-height: 15rem; }
  .srv-grid--large .srv-grid__title { min-height: 0; margin-top: 3rem; font-size: 3.2rem; line-height: 4rem; }
  .srv-grid--large .srv-grid__desc { margin-top: 2rem; }
  .srv-grid--dividers .srv-grid__item { padding: 0; }

  .srv-faq__q { font-size: 2.2rem; }
  .srv-faq__icon { margin-left: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .srv *,
  .srv *::before,
  .srv *::after { transition: none !important; }
}