/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 100.17%;
  ascent-override: 87.65%;
  descent-override: 20.96%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Archivo zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 103.69%;
  ascent-override: 84.68%;
  descent-override: 20.25%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Instrument Sans zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 100.78%;
  ascent-override: 96.25%;
  descent-override: 24.81%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Instrument Sans zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 98.32%;
  ascent-override: 98.66%;
  descent-override: 25.43%;
  line-gap-override: 0.0%;
}

/* ============================================================
   STAEL — arkusz główny (wersja 5 „Firmowa 2026")

   Normalna, profesjonalna strona firmowa współczesnego kroju:
   jasne tło, karty z łagodnym promieniem i miękkim cieniem,
   granat z logo jako kolor akcji, czerwień tylko w drobiazgach.
   Ikony usług w barwach firmowych. Zero ekstrawagancji — porządek,
   czytelność, zaufanie. Kontrasty zmierzone (najniższa para 5,16:1).
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 2. Zmienne ---------- */
:root {
  --ink:        #14151F;   /* 18,15:1 na bieli */
  --ink-2:      #575B6E;   /* 6,72:1 na bieli */
  --tlo:        #FFFFFF;
  --tlo-2:      #F5F6F9;   /* chłodne, jasne tło sekcji */
  --granat:     #183883;   /* z wizytówki klienta; 10,87:1 na bieli */
  --granat-c:   #132C66;   /* hover przycisku */
  --granat-2:   #14509B;   /* górny pasek i stopka: jaśniejszy, z dolnej części wizytówki */
  --granat-5:   #EFF1F6;   /* pastelowe tło plakietek */
  --granat-txt: #D5DCEC;   /* jasny tekst na niebieskim: 5,76:1 przy #14509B */
  --granat-lin: #4B649E;
  --czerwien:   #DA251C;   /* z wizytówki: kropka, drobne akcenty */
  --czerwien-t: #AE1E16;   /* 7,01:1 na bieli */
  --zolc:       #FFF500;   /* z wizytówki: marker i detale */
  --tint-1:     #EEEDF6;   /* pastele pod ikony usług */
  --tint-2:     #FBEAE7;
  --tint-3:     #FCF3D9;
  --tint-4:     #E9F4EC;
  --tint-5:     #E8F1F8;
  --tricolor:   linear-gradient(90deg, var(--granat) 0 34%, var(--czerwien) 34% 67%, var(--zolc) 67% 100%);

  --linia:      #E7E8EE;
  --linia-2:    #D6D8E2;

  --cien-s: 0 1px 2px rgba(24, 56, 131, .05), 0 2px 8px rgba(24, 56, 131, .05);
  --cien-m: 0 12px 32px -12px rgba(24, 56, 131, .18), 0 2px 6px rgba(20, 21, 31, .05);
  --cien-l: 0 26px 60px -24px rgba(24, 56, 131, .28), 0 4px 12px rgba(20, 21, 31, .06);

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  --w-strona: 1320px;
  --px-m: 1.25rem;
  --px-t: 2rem;
  --px-d: 2.5rem;

  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-8: 3rem;   --s-10: 4rem;
  --s-12: 5rem;  --s-14: 6rem;

  --sekcja: clamp(3.25rem, 5.6vw, 5.5rem);
  --sekcja-s: clamp(2.5rem, 4.2vw, 4rem);

  --font: "Instrument Sans", "Instrument Sans zapasowy", Arial, sans-serif;
  --font-naglowki: "Archivo", "Archivo zapasowy", Arial, sans-serif;

  /* skala 1,25 — H1 48 / H2 34 / H3 22 / tekst 17 px na 1440 px */
  --fs-h1:    clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --fs-h2:    clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --fs-h3:    clamp(1.125rem, 1.06rem + 0.28vw, 1.375rem);
  --fs-h4:    clamp(1.0625rem, 1.02rem + 0.16vw, 1.1875rem);
  --fs-lead:  clamp(1.0625rem, 1.02rem + 0.24vw, 1.25rem);
  --fs-body:  clamp(1rem, .985rem + .1vw, 1.0625rem);
  --fs-maly:  .9375rem;
  --fs-mini:  .875rem;
  --etykieta: .75rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-1: 160ms;
  --t-2: 300ms;
  --t-3: 520ms;

  --naglowek-h: 84px;   /* na mobile nizszy, patrz regula ponizej */
}

/* ---------- 3. Typografia ---------- */
body {
  overflow-x: clip;
  background: var(--tlo);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0 0 var(--s-5); color: var(--ink); text-wrap: balance;
  font-family: var(--font-naglowki); }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.18; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
p  { margin: 0 0 var(--s-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.stl-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); }
.stl-ciemna .stl-lead { color: var(--granat-txt); }

/* Plakietka nad nagłówkiem sekcji — pastylka z kropką w kolorze logo */
.stl-etykieta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--granat-5); color: var(--granat);
  font-size: var(--etykieta); font-weight: 700; letter-spacing: .02em;
  margin: 0 0 var(--s-5);
}
.stl-etykieta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--czerwien); }
.stl-ciemna .stl-etykieta { background: rgba(255,255,255,.1); color: #fff; }

::selection { background: var(--granat); color: #fff; }

/* ---------- 4. Siatka ---------- */
.stl-kontener { max-width: var(--w-strona); margin-inline: auto; padding-inline: var(--px-m); }
@media (min-width: 768px)  { .stl-kontener { padding-inline: var(--px-t); } }
@media (min-width: 1200px) { .stl-kontener { padding-inline: var(--px-d); } }

.stl-sekcja { padding-block: var(--sekcja); position: relative; }
.stl-sekcja--s { padding-block: var(--sekcja-s); }
.stl-szara { background: var(--tlo-2); }
.stl-ciemna { background: var(--granat); color: #fff; }
.stl-ciemna h1, .stl-ciemna h2, .stl-ciemna h3, .stl-ciemna h4 { color: #fff; }

.stl-naglowek-sekcji { margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
@media (min-width: 960px) {
  .stl-naglowek-sekcji--dwie {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-8); align-items: end;
  }
  .stl-naglowek-sekcji--dwie > div:last-child { padding-bottom: .4rem; }
}

/* ---------- 5. Przyciski ---------- */
.stl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 1rem 1.75rem; min-height: 56px;
  background: var(--granat); color: #fff;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em;
  text-decoration: none; border: 1.5px solid var(--granat); border-radius: var(--r-s);
  cursor: pointer; box-shadow: var(--cien-s);
  transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease),
              color var(--t-1) var(--ease), transform var(--t-1) var(--ease),
              box-shadow var(--t-2) var(--ease);
}
.stl-btn .stl-ikona { transition: transform var(--t-2) var(--ease); }
.stl-btn:active { transform: translateY(1px); }
.stl-btn--obrys { background: #fff; color: var(--ink); border-color: var(--linia-2); box-shadow: none; }
.stl-ciemna .stl-btn--obrys { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.stl-btn--maly { padding: .625rem 1.25rem; min-height: 46px; font-size: .9375rem; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .stl-btn:hover { background: var(--granat-c); border-color: var(--granat-c); box-shadow: var(--cien-m); }
  .stl-btn:hover .stl-ikona { transform: translateX(4px); }
  .stl-btn--obrys:hover { background: var(--tlo-2); color: var(--ink); border-color: var(--linia-2); box-shadow: none; }
  .stl-ciemna .stl-btn--obrys:hover { background: rgba(255,255,255,.1); }
}

.stl-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; text-decoration: none; color: var(--granat);
  transition: gap var(--t-2) var(--ease), color var(--t-1) var(--ease);
}
.stl-link:hover, .stl-link:focus-visible { gap: var(--s-3); color: var(--czerwien-t); }
.stl-ciemna .stl-link { color: #fff; }

/* ---------- 6. Stan skupienia ---------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--czerwien); outline-offset: 3px; border-radius: 4px;
}
.stl-pomin { position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--granat); color: #fff; padding: var(--s-3) var(--s-5); }
.stl-pomin:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- 7. Nagłówek ---------- */
.stl-pasek-gorny { background: var(--granat-2); color: var(--granat-txt); font-size: .875rem; }
.stl-pasek-gorny .stl-kontener {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6);
  align-items: center; justify-content: space-between; min-height: 42px; padding-block: .25rem;
}
.stl-pasek-gorny__adres { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.stl-pasek-gorny__prawa { display: inline-flex; align-items: center; gap: var(--s-6); }
.stl-pasek-gorny a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: #fff; text-decoration: none; font-weight: 600; padding-block: .25rem;
  transition: color var(--t-1) var(--ease);
}
.stl-pasek-gorny a:hover { color: var(--zolc); }
.stl-pasek-gorny__ocena svg { color: var(--zolc); }
@media (max-width: 699px) {
  .stl-pasek-gorny__adres { display: none; }
  .stl-pasek-gorny .stl-kontener { justify-content: center; flex-wrap: nowrap; }
  .stl-pasek-gorny__prawa { gap: var(--s-4); min-width: 0; }
  .stl-pasek-gorny a { white-space: nowrap; }
}
/* Ponizej 420 px mail i ocena nie mieszcza sie obok siebie i ocena lamala
   sie na dwie linie. Mail zostaje w menu, w sekcji kontaktu i w stopce,
   wiec tutaj ustepuje miejsca ocenie, ktora jest dowodem dla nowego goscia. */
@media (max-width: 419px) {
  .stl-pasek-gorny__prawa > a:not(.stl-pasek-gorny__ocena) { display: none; }
  .stl-pasek-gorny { font-size: .8125rem; }
}

.stl-naglowek {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--linia);
  transition: box-shadow var(--t-2) var(--ease);
}
/* Safari na iOS wymaga prefiksu do dzis. Bez niego naglowek nie ma
   rozmycia na iPhonie, a tresc przewija sie pod nim czytelnie widoczna. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .stl-naglowek { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
}
.stl-naglowek::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 172px; background: var(--tricolor); }
.stl-naglowek.jest-przewiniety { box-shadow: 0 14px 34px -26px rgba(20, 21, 31, .5); }
.stl-naglowek__rzad {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--naglowek-h);
}
/* Sticky naglowek nie moze zjadac zbyt duzo ekranu telefonu: 84 px naglowka
   plus 42 px paska gornego to bylo 126 px z 844 px, czyli 15% widoku. */
@media (max-width: 767px) {
  :root { --naglowek-h: 68px; }
  .stl-naglowek__rzad { gap: var(--s-3); }
  .stl-naglowek .stl-logo img, .stl-naglowek .stl-logo svg { height: 42px; }
  .stl-pasek-gorny .stl-kontener { min-height: 36px; }
}


}

.stl-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none;
  transition: transform var(--t-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .stl-logo:hover { transform: scale(1.04); }
  .stl-stopka__logo:hover { transform: scale(1.04); }
  .stl-hero__zaufanie a:hover { color: var(--czerwien-t); }
}
.stl-logo svg, .stl-logo img { height: 54px; width: auto; aspect-ratio: 2048 / 640; border-radius: 6px; }
@media (max-width: 559px) { .stl-logo svg, .stl-logo img { height: 44px; } }
.stl-logo__dopisek { display: none; }

.stl-menu { display: none; }
@media (min-width: 1200px) {
  .stl-menu { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .stl-menu > ul { display: flex; align-items: center; gap: clamp(2px, .6vw, 14px); list-style: none; margin: 0; padding: 0; }
  .stl-menu > ul > li { position: relative; }
  .stl-menu a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .75rem 1rem; font-size: 1rem; font-weight: 600;
    text-decoration: none; color: var(--ink); border-radius: var(--r-s); white-space: nowrap;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
  }
  .stl-menu a:hover { color: var(--granat); }
  .stl-menu .current-menu-item > a,
  .stl-menu .current_page_item > a { color: var(--ink); }

  /* rozwijany panel Oferty */
  .stl-menu__rozwijane > a svg { transition: transform var(--t-2) var(--ease); }
  .stl-menu__rozwijane:hover > a svg,
  .stl-menu__rozwijane:focus-within > a svg { transform: rotate(180deg); }
  .stl-podmenu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 420px;
    background: #fff; border: 1px solid var(--linia); border-radius: var(--r-l);
    box-shadow: var(--cien-l); padding: var(--s-3);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), visibility var(--t-2);
  }
  /* mostek nad panelem, zeby kursor nie gubil hoveru w szczelinie */
  .stl-menu__rozwijane::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
  .stl-menu__rozwijane:hover .stl-podmenu,
  .stl-menu__rozwijane:focus-within .stl-podmenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .stl-podmenu__poz {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4);
    align-items: center; padding: .75rem .875rem; border-radius: var(--r-s);
    text-decoration: none; color: var(--ink);
    transition: background var(--t-1) var(--ease);
  }
  .stl-podmenu__poz:hover { background: var(--tlo-2); }
  .stl-podmenu__ikona {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: var(--granat-5); border-radius: var(--r-s); padding: 8px;
  }
  .stl-podmenu__poz:nth-child(5n+1) .stl-podmenu__ikona { background: var(--tint-1); }
  .stl-podmenu__poz:nth-child(5n+2) .stl-podmenu__ikona { background: var(--tint-2); }
  .stl-podmenu__poz:nth-child(5n+3) .stl-podmenu__ikona { background: var(--tint-3); }
  .stl-podmenu__poz:nth-child(5n+4) .stl-podmenu__ikona { background: var(--tint-4); }
  .stl-podmenu__poz:nth-child(5n+5) .stl-podmenu__ikona { background: var(--tint-5); }
  .stl-podmenu__ikona svg { width: 100%; height: 100%; }
  .stl-podmenu__poz b { display: block; font-size: .9375rem; font-weight: 700; }
  .stl-podmenu__poz small { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 1px; }
}
.stl-naglowek__akcje { display: flex; align-items: center; gap: var(--s-5); flex: 0 0 auto; margin-left: auto; }
.stl-naglowek__tel, .stl-naglowek__cta { display: none; }
@media (min-width: 1200px) {
  .stl-naglowek__tel {
    display: inline-flex; align-items: center; gap: var(--s-3);
    text-decoration: none; color: var(--ink); line-height: 1.2; white-space: nowrap;
  }
  .stl-naglowek__tel-ikona {
    width: 46px; height: 46px; display: grid; place-items: center; flex: none;
    background: var(--granat-5); color: var(--granat); border-radius: 50%;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
  }
  .stl-naglowek__tel b { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; }
  .stl-naglowek__tel small { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-top: 1px; }
  .stl-naglowek__tel:hover b { color: var(--granat); }
  .stl-naglowek__tel:hover .stl-naglowek__tel-ikona { background: var(--granat); color: #fff; }
  .stl-naglowek__cta { display: inline-flex; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .stl-naglowek__tel small { display: none; }
}

.stl-hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 52px; height: 52px; padding: 0 13px;
  background: var(--granat); border: 0; border-radius: var(--r-s); cursor: pointer;
}
@media (min-width: 1200px) { .stl-hamburger { display: none; } }
.stl-hamburger span { display: block; height: 2.5px; width: 100%; background: #fff; border-radius: 2px;
  transition: transform var(--t-2) var(--ease), opacity var(--t-1) var(--ease); }
.stl-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.stl-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.stl-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.stl-menu-mobilne {
  position: fixed; inset: 0; z-index: 200; background: #fff; color: var(--ink);
  clip-path: inset(0 0 0 100%); visibility: hidden;
  transition: clip-path var(--t-3) var(--ease), visibility var(--t-3);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.stl-menu-mobilne.jest-otwarte { clip-path: inset(0 0 0 0); visibility: visible; }
body.menu-otwarte { overflow: hidden; }
.stl-menu-mobilne__gora {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--px-m); border-bottom: 1px solid var(--linia); min-height: 84px;
}
.stl-menu-mobilne__gora svg, .stl-menu-mobilne__gora img { height: 46px; width: auto; aspect-ratio: 2048 / 640; border-radius: 6px; }
.stl-menu-mobilne__zamknij {
  width: 52px; height: 52px; background: var(--tlo-2); border: 0;
  border-radius: var(--r-s); color: var(--ink); cursor: pointer; font-size: 1.6rem; line-height: 1;
}
.stl-menu-mobilne ul { list-style: none; margin: 0; padding: var(--s-4) var(--px-m); display: grid; gap: var(--s-1); }
/* Tylko POZYCJE LISTY. Bez `ul` ta regula przejmowala takze przyciski
   .stl-btn w stopce menu: ikona ladowala po lewej, napis przy prawej
   krawedzi, a w srodku zostawala dziura
   (memory: lekcja-wlasny-selektor-potomka-przejmuje-komponent). */
.stl-menu-mobilne ul a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .75rem 1rem; min-height: 56px; border-radius: var(--r-m);
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em;
  text-decoration: none; color: var(--ink);
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.stl-menu-mobilne ul a:active { background: var(--tlo-2); }
.stl-menu-mobilne .current-menu-item > a,
.stl-menu-mobilne .current_page_item > a,
.stl-menu-mobilne .current-menu-ancestor > a { background: var(--granat-5); color: var(--granat); }
.stl-menu-mobilne ul a .stl-ikona { color: var(--granat); flex: 0 0 auto; }
/* Przyciski w stopce menu maja wlasne wyrownanie: napis na srodku. */
.stl-menu-mobilne__stopka .stl-btn { justify-content: center; width: 100%; }
.stl-menu-mobilne__stopka { margin-top: auto; padding: var(--s-6) var(--px-m) var(--s-8); display: grid; gap: var(--s-3);
  border-top: 1px solid var(--linia); }

/* ---------- 8. Hero ---------- */
.stl-hero { background: linear-gradient(180deg, var(--tlo-2) 0%, #fff 100%); overflow: clip; position: relative; }
/* dwie miękkie plamy w barwach logo — dają światło, nie krzyczą */
.stl-hero::before {
  content: ""; position: absolute; top: -180px; right: -140px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 56, 131, .07), transparent 65%);
  pointer-events: none;
}
.stl-hero::after {
  content: ""; position: absolute; bottom: -220px; left: -180px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 0, .12), transparent 62%);
  pointer-events: none;
}
.stl-hero .stl-kontener { position: relative; z-index: 1; }
/* wyróżnienie w nagłówku — żółty marker, znak z logo */
.stl-marker {
  background-image: linear-gradient(0deg, var(--zolc), var(--zolc));
  background-size: 100% .34em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  /* Bez tego zawinięty nagłówek dostaje JEDEN pas ciągnięty przez oba
     wiersze i wychodzą schodki (pomiar na 375 px). */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Podkreślona fraza musi zaczynać się od nowego wiersza. Inaczej na wąskim
   ekranie żółty pas startuje w połowie drugiej linii i nagłówek robi schodki
   (pomiar na 375 px). Na szerokim ekranie łamie się tu i tak, więc reguła
   dotyczy tylko węższych. `\A` łamie wiersz, nie zmieniając span na blok —
   blok dostałby jeden pas pod ostatnią linią zamiast pasa pod każdą. */
@media (max-width: 959px) {
  .stl-hero h1 .stl-marker::before { content: "\A"; white-space: pre; }
}

.stl-hero__rzad { display: grid; gap: var(--s-8); padding-block: clamp(2rem, 4.4vw, 3.75rem); align-items: center; }
/* stopień H1 dobrany do szerokości kolumny: przy 4,375rem „Instalacje
   elektryczne" nie mieściło się w wierszu i nagłówek łamał się na cztery
   linie (pomiar: 22 znaki × ~0,52 em > 640 px kolumny) */
.stl-hero h1 { font-size: clamp(1.9375rem, 1.5rem + 1.9vw, 2.75rem); }
@media (min-width: 980px) {
  .stl-hero__rzad { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(2.5rem, 5vw, 5rem); }
}
.stl-hero h1 { margin-bottom: var(--s-5); }
.stl-hero__lead { margin-bottom: var(--s-6); }
.stl-hero__akcje { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* zaufanie pod przyciskami: ocena Google */
.stl-hero__punkty {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.stl-hero__punkty li {
  display: inline-flex; align-items: flex-start; gap: var(--s-2);
  font-size: .9375rem; font-weight: 600; color: var(--ink-2);
}
.stl-hero__punkty .stl-ikona { color: var(--granat); margin-top: 3px; flex: none; }
.stl-hero__rzad { align-items: center; }
.stl-gwiazdki { display: inline-flex; gap: 2px; color: #F5A623; }
.stl-hero__zaufanie b { color: var(--ink); font-weight: 800; }

.stl-hero__fakty {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.stl-fakt {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m);
  padding: var(--s-5); box-shadow: var(--cien-s);
}
@media (max-width: 559px) { .stl-hero__fakty { grid-template-columns: minmax(0, 1fr); } }
.stl-fakt__wartosc {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--granat);
  display: flex; align-items: baseline; gap: .05em;
}
.stl-fakt__wartosc sup { font-size: .58em; top: -.42em; color: var(--czerwien-t); font-weight: 800; }
.stl-fakt__podpis { margin-top: var(--s-2); font-size: .875rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }

/* kolaż: duży kadr, mniejszy nachodzi od lewego dołu, ocena na dużym */
.stl-hero__panel { position: relative; }
.stl-hero__kadr { position: relative; }
.stl-hero__kadr img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-l); box-shadow: var(--cien-l);
}
@media (min-width: 980px) { .stl-hero__kadr img { aspect-ratio: 15 / 13; } }
/* drugi, mniejszy kadr z białą ramą nachodzi na duży */
.stl-hero__kadr2 {
  position: absolute; left: clamp(-1.25rem, -1.5vw, -.75rem); bottom: clamp(-1.25rem, -1.5vw, -.75rem);
  width: clamp(170px, 18vw, 250px);
  border: 6px solid #fff; border-radius: var(--r-m);
  box-shadow: var(--cien-l); overflow: hidden; background: var(--tlo-2);
  z-index: 2;
}
.stl-hero__kadr2 img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
/* żółty akcent za dużym kadrem */
.stl-hero__kadr::before {
  content: ""; position: absolute; right: -14px; top: 34px; bottom: 34px; width: 26px;
  background: var(--zolc); border-radius: var(--r-l); z-index: -1;
}
.stl-hero__ocena {
  position: absolute; right: clamp(.875rem, 1.5vw, 1.5rem); bottom: clamp(.875rem, 1.5vw, 1.5rem);
  z-index: 3;
  display: flex; align-items: center; gap: var(--s-3);
  background: #fff; border-radius: var(--r-m);
  padding: .75rem 1.125rem; box-shadow: var(--cien-m);
  text-decoration: none; color: var(--ink);
  max-width: calc(100% - 2rem);
}
.stl-hero__ocena b { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; font-family: var(--font-naglowki); }
.stl-hero__ocena small { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .stl-hero__ocena { transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
  .stl-hero__ocena:hover { transform: translateY(-3px); box-shadow: var(--cien-l); }
}
/* karta-podpis na zdjęciu */
.stl-podpis {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: rgba(255, 255, 255, .94); color: var(--ink);
  padding: .75rem 1.125rem; border-radius: var(--r-s);
  font-size: .8125rem; font-weight: 700; box-shadow: var(--cien-m);
  max-width: calc(100% - var(--s-8));
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .stl-podpis { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(255,255,255,.86); }
}
.stl-podpis::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--czerwien); }

/* ---------- 9. Nagłówek podstrony ---------- */
.stl-naglowek-strony { background: var(--tlo-2); padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.stl-okruszki { font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-5); }
.stl-okruszki a { text-decoration: none; }
.stl-okruszki a:hover { color: var(--granat); }
.stl-okruszki span { opacity: .45; margin-inline: var(--s-2); }
.stl-naglowek-strony h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.375rem); }

/* ---------- 10. Karty usług ---------- */
.stl-oferta { display: grid; gap: var(--s-4); }
@media (min-width: 640px)  { .stl-oferta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stl-oferta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stl-karta {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--r-l);
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
  text-decoration: none; color: inherit; min-height: 100%;
  box-shadow: var(--cien-s);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.stl-karta__ikona {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  background: var(--granat-5); border-radius: var(--r-m);
  padding: 12px;
  transition: transform var(--t-2) var(--ease);
}
/* każda usługa ma własny pastel — spójna paleta, żywszy rytm */
.stl-oferta > :nth-child(5n+1) .stl-karta__ikona { background: var(--tint-1); }
.stl-oferta > :nth-child(5n+2) .stl-karta__ikona { background: var(--tint-2); }
.stl-oferta > :nth-child(5n+3) .stl-karta__ikona { background: var(--tint-3); }
.stl-oferta > :nth-child(5n+4) .stl-karta__ikona { background: var(--tint-4); }
.stl-oferta > :nth-child(5n+5) .stl-karta__ikona { background: var(--tint-5); }
.stl-karta__ikona svg { width: 100%; height: 100%; }
.stl-karta h3 { margin: 0; font-size: var(--fs-h4); }
.stl-karta__opis { color: var(--ink-2); font-size: var(--fs-maly); line-height: 1.65; margin: 0; }
.stl-karta__wiecej {
  margin-top: auto; padding-top: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--fs-maly); color: var(--granat);
}
.stl-karta__wiecej .stl-ikona { transition: transform var(--t-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .stl-karta:hover { transform: translateY(-5px); box-shadow: var(--cien-m); border-color: rgba(24, 56, 131, .25); }
  .stl-karta:hover .stl-karta__wiecej .stl-ikona { transform: translateX(4px); }
  .stl-karta:hover .stl-karta__ikona { transform: scale(1.06) rotate(-2deg); }
}
.stl-karta:focus-visible { transform: translateY(-4px); box-shadow: var(--cien-m); }

/* karta CTA domykająca siatkę */
.stl-karta--zacheta { background: var(--granat); border-color: var(--granat); color: #fff; }
.stl-karta--zacheta h3 { color: #fff; }
.stl-karta--zacheta p { color: var(--granat-txt); font-size: var(--fs-maly); margin: 0; }
.stl-karta--zacheta .stl-karta__tel {
  margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .stl-karta--zacheta:hover { background: var(--granat-c); }
}

/* ---------- 11. O firmie ---------- */
.stl-para { display: grid; gap: var(--s-8); align-items: stretch; }
@media (min-width: 960px) {
  .stl-para { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
}
.stl-para__obraz { position: relative; }
.stl-para__obraz::before {
  content: ""; position: absolute; inset: 16px -10px -10px 16px;
  background: var(--zolc); border-radius: var(--r-xl); z-index: 0;
}
.stl-para__obraz img { position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--cien-m); }

/* Kolaż trzech kadrów: duży u góry, dwa mniejsze pod nim. Naturalne
   proporcje zamiast jednego zdjęcia rozciągniętego na wysokość kolumny. */
.stl-kolaz-firmowy {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.stl-kolaz-firmowy figure { margin: 0; overflow: hidden; border-radius: var(--r-m); box-shadow: var(--cien-m); }
.stl-kolaz-firmowy figure:first-child { grid-column: 1 / -1; border-radius: var(--r-l); }
.stl-kolaz-firmowy img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stl-kolaz-firmowy figure:first-child img { aspect-ratio: 16 / 10; }
.stl-kolaz-firmowy figure:not(:first-child) img { aspect-ratio: 1 / 1; }
@media (max-width: 559px) {
  .stl-kolaz-firmowy figure:not(:first-child) img { aspect-ratio: 4 / 3; }
}
@media (min-width: 960px) {
  .stl-para__obraz img { aspect-ratio: 5 / 4; }
  /* Kolaż wypełnia całą wysokość kolumny, żeby żółty podkład kończył się
     równo ze zdjęciami. Pomiar przed poprawką: 103 px gołej żółci pod
     ostatnim kadrem. */
  .stl-para__obraz:has(.stl-kolaz-firmowy) { display: grid; }
  .stl-kolaz-firmowy { height: 100%; grid-template-rows: 1.28fr 1fr; }
  .stl-kolaz-firmowy img { aspect-ratio: auto; height: 100%; }
}

.stl-atuty { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 620px) { .stl-atuty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); } }
.stl-atuty li { display: flex; align-items: flex-start; gap: var(--s-3); font-weight: 600; }
.stl-atuty .stl-ikona {
  flex: none; margin-top: 2px;
  width: 26px; height: 26px; padding: 5px;
  color: var(--granat); background: var(--granat-5); border-radius: 50%;
}

.stl-tagi { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.stl-tagi span {
  padding: .5rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--linia);
  font-size: .8125rem; font-weight: 700; color: var(--ink-2);
}
.stl-tagi span:nth-child(5n+1) { background: var(--tint-1); border-color: transparent; color: var(--granat); }
.stl-tagi span:nth-child(5n+2) { background: var(--tint-2); border-color: transparent; color: var(--czerwien-t); }
.stl-tagi span:nth-child(5n+3) { background: var(--tint-3); border-color: transparent; color: #7A5A00; }
.stl-tagi span:nth-child(5n+4) { background: var(--tint-4); border-color: transparent; color: #1F6B3A; }
.stl-tagi span:nth-child(5n+5) { background: var(--tint-5); border-color: transparent; color: #175E8F; }

/* ---------- 12. Proces ---------- */
.stl-proces__rzad { display: grid; gap: var(--s-4); counter-reset: krok; }
@media (min-width: 700px)  { .stl-proces__rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stl-proces__rzad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stl-proces {
  padding-block: var(--sekcja-s);
  position: relative; overflow: clip;
  /* głębia zamiast płaskiej plamy: gradient + techniczna siatka + światła */
  background:
    radial-gradient(640px 420px at 88% -10%, rgba(255, 245, 0, .16), transparent 64%),
    radial-gradient(520px 380px at -6% 110%, rgba(218, 37, 28, .22), transparent 62%),
    linear-gradient(140deg, #0F2657 0%, var(--granat) 52%, #0D2050 100%);
}
.stl-proces::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(85% 90% at 50% 40%, #000 30%, transparent 100%);
}
.stl-proces::after {
  content: ""; position: absolute; top: -180px; right: -140px;
  width: 480px; height: 480px; border: 2px dashed rgba(255, 245, 0, .35);
  border-radius: 50%; pointer-events: none;
  animation: stl-obrot 60s linear infinite;
}
@keyframes stl-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stl-proces::after { animation: none; } }
.stl-proces .stl-kontener { position: relative; z-index: 1; }
.stl-proces h2 { color: #fff; }
.stl-proces .stl-etykieta { background: rgba(255, 255, 255, .12); color: #fff; }
.stl-proces .stl-etykieta::before { background: var(--zolc); }
.stl-krok {
  counter-increment: krok;
  background: rgba(255, 255, 255, .06);
  font-size: var(--fs-maly);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-m);
  padding: var(--s-6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.stl-proces .stl-krok h3 { color: #fff; }
.stl-proces .stl-krok p { color: var(--granat-txt); }
.stl-krok::before {
  content: counter(krok, decimal-leading-zero);
  display: inline-grid; place-items: center;
  min-width: 46px; height: 46px; padding-inline: .5rem;
  background: var(--granat); color: #fff; border-radius: var(--r-s);
  font-weight: 800; font-size: 1rem; letter-spacing: .04em;
  margin-bottom: var(--s-4);
}
.stl-krok h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.stl-krok { transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .stl-krok:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
}
/* numery kroków: żółć logo z granatowym numerem — czytelne na granacie */
.stl-proces__rzad .stl-krok::before { background: var(--zolc); color: var(--granat); }
.stl-proces__rzad > :nth-child(2)::before { background: #fff; }
.stl-proces__rzad > :nth-child(4)::before { background: #fff; }
.stl-krok p { color: var(--ink-2); font-size: var(--fs-maly); margin: 0; }

/* ---------- 13. Realizacje ---------- */
.stl-galeria { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.stl-galeria__kafel, .stl-kolaz__kafel {
  position: relative; display: block; overflow: hidden; padding: 0; border: 0;
  background: var(--tlo-2); border-radius: var(--r-m); cursor: pointer; box-shadow: var(--cien-s);
}
.stl-galeria__kafel img, .stl-kolaz__kafel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .stl-galeria__kafel, .stl-kolaz__kafel { transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
  .stl-galeria__kafel:hover, .stl-kolaz__kafel:hover { transform: translateY(-4px); box-shadow: var(--cien-m); }
  .stl-galeria__kafel:hover img, .stl-kolaz__kafel:hover img { transform: scale(1.045); }
}
.stl-kolaz { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .stl-kolaz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .stl-kolaz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stl-zestaw + .stl-zestaw { margin-top: var(--s-12); }
.stl-zestaw__gora { margin-bottom: var(--s-6); }
.stl-zestaw__miejsce { font-size: var(--etykieta); font-weight: 700; color: var(--granat); margin-bottom: var(--s-2); }

.stl-podglad {
  position: fixed; inset: 0; z-index: 300; background: rgba(16, 14, 34, .95);
  display: grid; place-items: center; padding: var(--s-5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-2) var(--ease), visibility var(--t-2);
}
.stl-podglad.jest-otwarty { opacity: 1; visibility: visible; }
.stl-podglad img { max-width: min(96vw, 1400px); max-height: 86vh; width: auto; object-fit: contain; border-radius: var(--r-s); }
.stl-podglad__zamknij, .stl-podglad__strzalka {
  position: absolute; min-width: 52px; min-height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-s); color: #fff; font-size: 1.6rem; cursor: pointer;
}
.stl-podglad__zamknij { top: var(--s-5); right: var(--s-5); }
.stl-podglad__strzalka--wstecz { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.stl-podglad__strzalka--dalej  { right: var(--s-4); top: 50%; transform: translateY(-50%); }
.stl-podglad__licznik { position: absolute; bottom: var(--s-5); left: 50%; transform: translateX(-50%);
  font-weight: 600; font-size: var(--fs-maly); color: rgba(255,255,255,.75); }

/* ---------- 14. Zakres prac / FAQ (podstrony) ---------- */
.stl-zakres { display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .stl-zakres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.stl-zakres__poz {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m);
  padding: var(--s-5) var(--s-6);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start;
  box-shadow: var(--cien-s);
}
.stl-zakres__nr {
  display: grid; place-items: center; min-width: 40px; height: 40px;
  background: var(--granat-5); color: var(--granat); border-radius: var(--r-s);
  font-weight: 800; font-size: .9375rem;
}
.stl-zakres__poz h3 { font-size: var(--fs-h4); margin: 0 0 var(--s-2); }
.stl-zakres__poz p { color: var(--ink-2); font-size: var(--fs-maly); margin: 0; }

.stl-faq { display: grid; gap: var(--s-3); }
.stl-faq details { background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); box-shadow: var(--cien-s); }
.stl-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); min-height: 64px; cursor: pointer; list-style: none;
  font-size: var(--fs-h4); font-weight: 700; line-height: 1.3;
}
.stl-faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stl-faq summary:hover { color: var(--granat); }
  .stl-faq details:hover { border-color: var(--linia-2); }
  /* aktywna pozycja też odpowiada na kursor — samą barwą napisu */
  .stl-menu .current-menu-item > a:hover,
  .stl-menu .current_page_item > a:hover { color: var(--granat); }
}
.stl-faq summary .stl-ikona { flex: none; color: var(--granat); transition: transform var(--t-2) var(--ease); }
.stl-faq details[open] summary .stl-ikona { transform: rotate(45deg); }
.stl-faq__odp { padding: 0 var(--s-6) var(--s-6); color: var(--ink-2); }

/* ---------- 15. Kontakt ---------- */
.stl-kontakt {
  position: relative;
  background:
    radial-gradient(720px 420px at 100% 0%, rgba(24, 56, 131, .06), transparent 60%),
    radial-gradient(560px 420px at 0% 100%, rgba(255, 245, 0, .1), transparent 55%),
    var(--tlo-2);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--granat) 0 34%, var(--czerwien) 34% 67%, var(--zolc) 67% 100%) 1;
}
.stl-kontakt__rzad { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) {
  .stl-kontakt__rzad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 5vw, 5rem); align-items: start; }
}
.stl-dane { display: grid; gap: var(--s-3); margin: 0; padding: 0; }
.stl-dane__poz {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start;
  background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m);
  padding: var(--s-5); box-shadow: var(--cien-s);
}
/* Tylko ikona wiodaca karty, czyli BEZPOSREDNIE dziecko. Bez `>` regula
   lapala takze strzalke wewnatrz linku "Zobacz na mapie" i robila z niej
   szary kwadrat 44x44 wygladajacy jak osobny przycisk (pomiar na 320 px)
   — memory: lekcja-wlasny-selektor-potomka-przejmuje-komponent. */
.stl-dane__poz > .stl-ikona {
  width: 44px; height: 44px; padding: 11px;
  color: var(--granat); background: var(--granat-5); border-radius: var(--r-s);
}
.stl-dane dt { font-size: var(--etykieta); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-1); }
.stl-dane dd { margin: 0; font-size: 1.125rem; font-weight: 700; }
/* Na waskich ekranach dlugi adres e-mail wychodzil poza karte (pomiar na
   320 px: prawa krawedz linku 301 px, karta konczy sie na 300). Pierwsza
   proba z `overflow-wrap: anywhere` byla gorsza od choroby: lamala adres
   na "biuro.stael@gmail.co" i samotne "m" w nowej linii. Mniejszy stopien
   pisma miesci caly adres w jednej linii, a `break-word` lamie dopiero
   wtedy, gdy naprawde nie ma wyjscia. */
@media (max-width: 419px) {
  .stl-dane dd { font-size: .9375rem; }
  .stl-dane dd a { overflow-wrap: break-word; }
  .stl-dane__poz { padding: var(--s-4); gap: var(--s-3); }
}
.stl-dane a { text-decoration: none; }
.stl-dane a:hover { color: var(--granat); }
.stl-dane__adres { font-style: normal; overflow-wrap: anywhere; }
/* `overflow-wrap: anywhere` chroni uklad przed dlugim adresem, ale lamie tez
   kod pocztowy: pomiar na 390 px pokazal "44-" w jednej linii i "217 Rybnik"
   w nastepnej. Kod i miejscowosc trzymamy razem. */
.stl-dane__miejscowosc { white-space: nowrap; overflow-wrap: normal; }

.stl-formularz {
  background: #fff; color: var(--ink);
  border: 1px solid var(--linia); border-radius: var(--r-l);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: var(--cien-m);
}
.stl-formularz h3 { margin-bottom: var(--s-2); }
.stl-pola { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .stl-pola--dwa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stl-pole { display: grid; gap: var(--s-2); }
.stl-pole label { font-size: var(--etykieta); font-weight: 700; color: var(--ink); }
.stl-pole input, .stl-pole textarea, .stl-pole select {
  width: 100%; padding: .875rem 1.125rem; min-height: 54px;
  background: var(--tlo-2); border: 1.5px solid var(--linia); border-radius: var(--r-s);
  font-size: 1.0625rem;
  transition: border-color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.stl-pole textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.stl-pole input:hover, .stl-pole textarea:hover { border-color: var(--linia-2); }
.stl-pole input:focus, .stl-pole textarea:focus, .stl-pole select:focus {
  background: #fff; border-color: var(--granat); outline: none; box-shadow: 0 0 0 4px var(--granat-5);
}
.stl-pole.jest-blad input, .stl-pole.jest-blad textarea { border-color: var(--czerwien); background: #FFF6F5; }
.stl-pole__blad { font-size: .84rem; color: var(--czerwien-t); font-weight: 600; }

.stl-zgoda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.stl-zgoda input { width: 22px; height: 22px; min-height: 22px; margin-top: 2px; accent-color: var(--granat); }
.stl-zgoda label { font-size: .875rem; line-height: 1.55; color: var(--ink-2); font-weight: 400; }
.stl-zgoda a { color: var(--granat); }

.stl-pulapka { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.stl-komunikat { display: none; padding: var(--s-4) var(--s-5); border-radius: var(--r-s);
  border: 1.5px solid var(--czerwien); background: #FFF6F5; font-size: var(--fs-maly); }
.stl-komunikat.jest-widoczny { display: block; }
.stl-komunikat--ok { border-color: #1A7F37; background: #EEF8F0; }

.stl-mapa { margin-top: var(--s-8); overflow: hidden; line-height: 0;
  border-radius: var(--r-l); border: 1px solid var(--linia); box-shadow: var(--cien-s); }
.stl-mapa iframe { width: 100%; height: clamp(280px, 38vw, 420px); border: 0; }
/* mapa pełnej szerokości okna, pod treścią sekcji kontaktu */
/* Mapa domyka sekcję kontaktu — dolny padding sekcji zostawiał pod nią
   130 px pustki przed stopką (pomiar: luka 129 px). */
.stl-kontakt:has(.stl-mapa--pelna) { padding-bottom: 0; }
.stl-mapa--pelna {
  position: relative; margin-top: var(--sekcja-s); line-height: 0;
  border-top: 1px solid var(--linia);
}
.stl-mapa--pelna iframe { width: 100%; height: clamp(320px, 34vw, 460px); border: 0; display: block; }
.stl-mapa__dojazd {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: #fff; color: var(--ink);
  padding: .875rem 1.375rem; min-height: 52px;
  border-radius: var(--r-s); box-shadow: var(--cien-m);
  font-weight: 700; text-decoration: none; line-height: 1.2;
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.stl-mapa__dojazd .stl-ikona { color: var(--czerwien); }
@media (hover: hover) and (pointer: fine) {
  .stl-mapa__dojazd:hover { transform: translateY(-2px); box-shadow: var(--cien-l); }
}

/* ---------- 16. Pasek zachęty ---------- */
.stl-zacheta { background: var(--granat); color: #fff; }
.stl-zacheta .stl-kontener { display: grid; gap: var(--s-6); align-items: center; padding-block: var(--sekcja-s); }
@media (min-width: 900px) { .stl-zacheta .stl-kontener { grid-template-columns: minmax(0, 1fr) auto; } }
.stl-zacheta h2 { margin: 0 0 var(--s-2); color: #fff; }
.stl-zacheta p { margin: 0; color: var(--granat-txt); }
.stl-zacheta .stl-btn { background: #fff; color: var(--granat); border-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .stl-zacheta .stl-btn:hover { background: var(--granat-5); border-color: var(--granat-5); color: var(--granat); }
}

/* ---------- 17. Stopka ---------- */
.stl-stopka {
  color: var(--granat-txt); padding-block: var(--sekcja-s) var(--s-5);
  font-size: var(--fs-maly);
  position: relative; overflow: clip;
  background:
    radial-gradient(760px 420px at 8% 0%, rgba(255, 255, 255, .07), transparent 58%),
    radial-gradient(560px 400px at 100% 100%, rgba(218, 37, 28, .18), transparent 55%),
    linear-gradient(160deg, var(--granat) 0%, var(--granat-2) 55%, #1258A5 100%);
}
.stl-stopka::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tricolor); }
/* znak wodny: wielka błyskawica z ikony firmowej */
.stl-stopka::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 440px; height: 440px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M58 6 22 56h20l-8 38 40-56H54l4-32Z"/></svg>') no-repeat center / contain;
  opacity: .04; pointer-events: none;
}
.stl-stopka .stl-kontener { position: relative; z-index: 1; }
.stl-stopka__siatka { display: grid; gap: var(--s-8); }
@media (min-width: 760px)  { .stl-stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .stl-stopka__siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--s-10); } }
.stl-stopka h2, .stl-stopka h3 { color: #fff; }
.stl-stopka__tytul {
  font-size: var(--etykieta); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--granat-txt); margin: 0 0 var(--s-4);
}
.stl-stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.stl-stopka a { color: #fff; text-decoration: none; display: inline-block; padding-block: .25rem;
  font-size: var(--fs-maly); transition: color var(--t-1) var(--ease); }
.stl-stopka a:hover { color: var(--zolc); }
.stl-stopka__tel {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}

.stl-stopka__logo { display: inline-flex; margin-bottom: var(--s-5); transition: transform var(--t-2) var(--ease); }
.stl-stopka__logo svg, .stl-stopka__logo img { height: 52px; width: auto; aspect-ratio: 2048 / 640; border-radius: 6px; }
.stl-stopka__meta {
  margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--granat-lin);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: center; font-size: .84rem;
}
.stl-stopka__meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-mini); }

/* ---------- 18. Telefon pływający ---------- */
.stl-telefon-plywajacy {
  position: fixed; right: 16px; z-index: 96;
  /* Podnosi sie nad pasek ciasteczek. Dzieki temu pasek nie musi
     rezerwowac 88 px z prawej, ktore na 320 px zwezaly tekst
     do dziesieciu linii. Zmienna ustawia main.js po pomiarze. */
  /* `safe-area-inset-bottom` odsuwa przycisk od paska gestu na iPhonie
     z wycieciem. Na pozostalych urzadzeniach zmienna wynosi 0. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--pasek-ciasteczek, 0px));
  transition: bottom var(--t-2) var(--ease);
  width: 62px; height: 62px; display: grid; place-items: center;
  background: var(--granat); color: #fff; border-radius: 50%;
  box-shadow: 0 14px 34px -10px rgba(24, 56, 131, .55);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.stl-telefon-plywajacy.jest-widoczny { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1200px) { .stl-telefon-plywajacy { display: none; } }
.stl-telefon-plywajacy::before {
  content: ""; position: absolute; inset: -6px; border: 2px solid var(--granat);
  border-radius: 50%; animation: stl-puls 2.6s var(--ease) infinite; pointer-events: none;
}
@keyframes stl-puls {
  0%   { transform: scale(.92); opacity: .7; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ---------- 19. Ciasteczka ---------- */
.stl-ciasteczka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--ink); color: rgba(255,255,255,.82);
  /* Dolny padding uwzglednia pasek gestu na iPhonie z wycieciem. */
  padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform var(--t-3) var(--ease);
}
.stl-ciasteczka.jest-widoczny { transform: none; }
.stl-ciasteczka .stl-kontener { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 900px) {
  .stl-ciasteczka .stl-kontener { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); }
}
.stl-ciasteczka p { margin: 0; font-size: .84rem; line-height: 1.5; }
.stl-ciasteczka a { color: #fff; }
.stl-ciasteczka__akcje { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.stl-ciasteczka .stl-btn--maly { background: #fff; color: var(--ink); border-color: #fff; }
.stl-ciasteczka .stl-btn--maly.stl-btn--obrys { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
/* Na mobile pasek byl wysoki na 125 px (390 px) i 209 px (320 px), czyli
   cwierc ekranu, bo trzymal uklad dwukolumnowy plus 88 px rezerwy na
   sluchawke: tekstowi zostawalo ~150 px i lamal sie na dziesiec linii.
   Sluchawka podnosi sie teraz sama, wiec rezerwa jest zbedna.

   Decyzja Pawla 21.08.2026: pasek ma byc jak najnizszy, nawet kosztem
   zejscia ponizej 44 px na przyciskach. Przyciski maja 36 px wysokosci
   i po ~150 px szerokosci, wiec spelniaja kryterium 2.5.8 z WCAG 2.2
   (24x24 px), a nie spelniaja tylko zalecenia AAA 2.5.5 (44x44).
   To pasek systemowy pokazywany raz, nie element nawigacji. */
@media (max-width: 899px) {
  .stl-ciasteczka { padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); }
  .stl-ciasteczka .stl-kontener { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stl-ciasteczka p { font-size: .78125rem; line-height: 1.4; }
  .stl-ciasteczka__akcje { flex-direction: row; gap: 6px; flex-wrap: nowrap; }
  .stl-ciasteczka__akcje .stl-btn--maly { flex: 1 1 0; min-width: 0; }
  .stl-ciasteczka .stl-btn--maly {
    min-height: 36px; padding: .35rem .5rem; font-size: .78125rem;
    justify-content: center; white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .stl-ciasteczka p { font-size: .75rem; }
  .stl-ciasteczka .stl-btn--maly { font-size: .71875rem; padding: .35rem .35rem; min-height: 34px; }
}
/* Od 600 px tekst miesci sie obok przyciskow, wiec pasek schodzi do jednego
   rzedu i zajmuje polowe wysokosci. */
@media (min-width: 600px) and (max-width: 899px) {
  .stl-ciasteczka .stl-kontener { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); }
  .stl-ciasteczka__akcje .stl-btn--maly { flex: 0 0 auto; }
}

/* ---------- 20. Treść redakcyjna ---------- */
.stl-tresc > :first-child { margin-top: 0; }
.stl-tresc h2 { margin-top: var(--s-10); font-size: var(--fs-h3); }
.stl-tresc h3 { margin-top: var(--s-8); font-size: var(--fs-h4); }
.stl-tresc ul, .stl-tresc ol { margin: 0 0 var(--s-5); padding-left: 1.4rem; display: grid; gap: var(--s-2); }
.stl-tresc a { color: var(--granat); text-underline-offset: 3px; font-weight: 600; }
.stl-tresc table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); }
.stl-tresc th, .stl-tresc td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--linia); }

/* ---------- 21. 404 ---------- */
.stl-404 { min-height: 58vh; display: grid; place-items: center; }
.stl-404__kod { font-size: clamp(5rem, 16vw, 11rem); font-weight: 800; line-height: .9;
  letter-spacing: -0.04em; color: var(--granat-5); margin-bottom: var(--s-6);
  text-shadow: 0 1px 0 var(--linia-2); }

/* ---------- 22. Wejścia ---------- */
.stl-wejscie { opacity: 0; transform: translateY(18px); }
.stl-wejscie.jest-widoczny {
  opacity: 1; transform: none;
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.no-js .stl-wejscie { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .stl-wejscie { opacity: 1; transform: none; }
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 16px); }

/* ---------- 23. Pasek przewijania ---------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--tlo-2); }
  ::-webkit-scrollbar-thumb { background: var(--linia-2); border: 3px solid var(--tlo-2); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
}

/* ---------- 24. Pola dotyku (pomiar stany.py: linki 15–38 px, palec 44) ---------- */
@media (max-width: 1199px) {
  .stl-stopka a, .stl-dane a, .stl-okruszki a, .stl-menu-mobilne a, .stl-link, .stl-logo {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .stl-stopka ul { gap: var(--s-2); }
  .stl-stopka__meta { gap: var(--s-2) var(--s-5); }
  .stl-tresc a, .stl-zgoda a, .stl-ciasteczka a { padding-block: 13px; }
  .stl-hero__zaufanie a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* zdanie w osobnym wierszu tylko tam, gdzie całe się mieści (pomiar lamanie.py) */
.stl-zdanie { display: inline; }
@media (min-width: 1200px) { .stl-zdanie { display: block; } }

/* ---------- 25. Druk ---------- */
@media print {
  .stl-naglowek, .stl-ciasteczka, .stl-telefon-plywajacy,
  .stl-menu-mobilne, .stl-zacheta, .stl-formularz, .stl-mapa { display: none !important; }
  body { background: #fff; color: #000; }
  .stl-ciemna, .stl-kontakt { background: #fff !important; color: #000 !important; }
}

/* Dopisek "(serwis)" nie miescil sie obok dlugiego adresu e-mail i spadal
   do nowej linii wygladajac na osierocony. Na waskich ekranach jest wiec
   celowa, mniejsza linia pod adresem. */
.stl-dane__dopisek { color: var(--ink-2); font-weight: 500; margin-left: .35rem; }
@media (max-width: 599px) {
  .stl-dane__dopisek { display: block; margin-left: 0; margin-top: .1rem; font-size: .875rem; }
}

.stl-formularz__tytul { margin-bottom: var(--s-2); }
.stl-formularz__wstep {
  margin-bottom: var(--s-6);
  color: var(--ink-2);
  font-size: var(--fs-maly);
}

/* Mapa ładuje się leniwie i jest ostatnia na stronie — do czasu wczytania
   zostawał pusty prostokąt wyglądający na błąd. Tło w barwach strony. */
.stl-mapa--pelna {
  background:
    radial-gradient(600px 300px at 30% 40%, rgba(24, 56, 131, .05), transparent 60%),
    var(--tlo-2);
}

/* Nieparzysta liczba pozycji zostawiała dziurę w ostatnim wierszu: przy
   siedmiu kartach w dwóch kolumnach ostatnia stała sama, a obok świeciła
   pustka. Rozciągnięcie jej na obie kolumny zamyka blok równo.
   Zmierzone na czterech podstronach usług: 7, 5, 5 i 3 karty. */
@media (min-width: 760px) {
  .stl-zakres > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 25a. Obiekty na podstronie „Zaufali nam" -------------
   Zdjęcie obok opisu, na wąskim ekranie jedno pod drugim. */
.stl-zaufali { display: grid; gap: var(--s-8); }

.stl-obiekt { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 760px) {
  .stl-obiekt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .stl-obiekt:nth-child(even) .stl-obiekt__kadr { order: 2; }
}

.stl-obiekt__kadr { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--cien-m); }
.stl-obiekt__kadr img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.stl-obiekt h2 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }

.stl-obiekt__miejsce {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-4);
  color: var(--ink-2); font-size: var(--fs-maly); font-weight: 600;
}
.stl-obiekt__miejsce .stl-ikona { color: var(--czerwien-t); flex: none; }

.stl-obiekt__zakres {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.stl-obiekt__zakres li {
  padding: .4rem 1rem; border-radius: 999px;
  background: var(--granat-5); color: var(--granat);
  font-size: var(--fs-mini); font-weight: 700;
}

/* ---------- 25b. Częste pytania na stronie głównej ----------------
   Bez zwijania (memory: lekcja-details-nie-zwija) — odpowiedź ma być
   czytelna od razu i widoczna dla wyszukiwarek w treści, nie tylko
   w danych strukturalnych. Rozwijana lista `.stl-faq` na podstronach
   usług zostaje bez zmian, to inny kontekst. */
.stl-pytania { background: #fff; }

.stl-pytania__tytul { margin: 0 0 var(--s-6); text-wrap: balance; }

.stl-pytania__lista {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .stl-pytania__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
}

.stl-pytania__poz {
  padding-left: var(--s-5);
  border-left: 3px solid var(--zolc);
}

.stl-pytania__poz h3 {
  margin: 0 0 .4rem;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--granat);
}

.stl-pytania__poz p {
  margin: 0;
  font-size: .9688rem;
  line-height: 1.68;
  color: var(--ink-2);
}

/* ---------- 25c. Miejsce pod pasek ciasteczek --------------------
   Pasek jest przyklejony do dołu okna i zasłaniał dolny rząd stopki
   — razem z linkiem do polityki prywatności, czyli dokładnie tym,
   który ktoś czyta przy decyzji o ciasteczkach. Skrypt wpisuje realną
   wysokość paska do zmiennej, a strona odsuwa o tyle swój dół.
   Zmienna domyślnie 0, więc bez skryptu nic się nie zmienia. */
body { padding-bottom: var(--pasek-ciasteczek, 0px); }

/* ---------- 25d. Ekran „w budowie" ------------------------------
   Zamiast podstrony, dopóki klient nie zatwierdzi kierunku. Te same
   barwy i ten sam krój co reszta — ma wyglądać na część strony,
   a nie na komunikat serwera. */
.stl-budowa-strona { margin: 0; }

.stl-budowa {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--px-m);
  color: #fff;
  background:
    radial-gradient(720px 420px at 12% 0%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(560px 400px at 100% 100%, rgba(218, 37, 28, .2), transparent 55%),
    linear-gradient(160deg, var(--granat) 0%, var(--granat-2) 55%, #1258A5 100%);
}

.stl-budowa__karta {
  width: min(46rem, 100%);
  text-align: center;
}

.stl-budowa__logo {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  background: #fff;
  padding: .65rem 1rem;
  border-radius: var(--r-m);
  box-shadow: var(--cien-m);
}
.stl-budowa__logo svg, .stl-budowa__logo img { height: 56px; width: auto; aspect-ratio: 2048 / 640; }
@media (hover: hover) and (pointer: fine) {
  .stl-budowa__logo { transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
  .stl-budowa__logo:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--cien-l); }
}

.stl-budowa__etykieta {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: fit-content;
  margin: 0 auto var(--s-4);
  padding: .4rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--zolc);
}

.stl-budowa h1 {
  margin: 0 0 var(--s-4);
  color: #fff;
  text-wrap: balance;
}

.stl-budowa__tekst {
  margin: 0 0 var(--s-6);
  color: var(--granat-txt);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.stl-budowa__akcje {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}
.stl-budowa__akcje .stl-btn--obrys { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
@media (hover: hover) and (pointer: fine) {
  .stl-budowa__akcje .stl-btn--obrys:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
}

/* ---------- 26. Poprawki po pomiarze stanów (stany.py, v5.3) ----------
   Sekcja wejść deklaruje `transform: none` później niż komponenty, więc
   przy równej specyficzności zbijała hover-uniesienia kart i kafli.
   Te reguły mają wyższą specyficzność i stoją na końcu pliku. */
@media (hover: hover) and (pointer: fine) {
  .stl-karta.jest-widoczny:hover { transform: translateY(-5px); }
  .stl-krok.jest-widoczny:hover { transform: translateY(-4px); }
  .stl-kolaz__kafel.jest-widoczny:hover,
  .stl-galeria__kafel.jest-widoczny:hover { transform: translateY(-4px); }
  /* odpowiedź na najechanie mierzalna na samym elemencie */
  .stl-naglowek__tel:hover { color: var(--granat); }
  .stl-dane .stl-link:hover { color: var(--czerwien-t); }
  .stl-tresc a:hover {
    color: var(--czerwien-t);
    text-decoration-color: var(--czerwien-t);
    text-decoration-thickness: 2px;
  }
  .stl-zgoda a:hover {
    color: var(--czerwien-t);
    text-decoration-color: var(--czerwien-t);
    text-decoration-thickness: 2px;
  }
  .stl-ciasteczka a:hover { color: var(--zolc); text-decoration-color: var(--zolc); }
  .stl-stopka__meta a:hover { color: var(--zolc); }
}
/* pola dotyku w górnym pasku: 33 px przy progu 44 (pomiar) */
@media (max-width: 1199px) {
  .stl-pasek-gorny a { min-height: 44px; }
}

/* ---------- 27. Hero na telefonie ----------
   Pomiar (390 px): kadr 350×263, na nim kadr2 170 px i ocena 296 px —
   nachodziły na siebie. Na wąskim ekranie kolaż się nie mieści:
   drugi kadr znika, ocena wraca pod zdjęcie jako zwykły pasek.
   Metryki jedna pod drugą zajmowały 356 px — układ trzech kolumn. */
@media (max-width: 767px) {
  .stl-hero__kadr2 { display: none; }
  .stl-hero__ocena {
    position: static; margin-top: var(--s-4);
    width: 100%; max-width: none; justify-content: center;
  }
  .stl-hero__fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .stl-fakt { padding: var(--s-4) var(--s-3); }
  .stl-fakt__podpis { font-size: .8125rem; }
}

/* ==========================================================================
   MOBILE — dopracowanie 21.08.2026
   Blok stoi na KONCU arkusza celowo. Wczesniej lezal przy naglowku i przegrywal
   kaskade z regulami bazowymi o tej samej specyficznosci, ktore stoja nizej
   (pomiar: pole zgody dalej mialo 22 px zamiast 24)
   — memory: lekcja-kaskada-zmierz-ktora-regula-wygrywa.
   ========================================================================== */
/* Czytelnosc na telefonie. Pomiar na 390 px pokazal opisy kart po 15 px
   i etykiety sekcji po 12 px, czyli ponizej progu 16 px dla tresci
   i 14 px dla czegokolwiek. Na desktopie te rozmiary zostaja, bo tam
   buduja hierarchie, a linia tekstu jest krotsza. */
@media (max-width: 767px) {
  :root {
    --fs-maly: 1rem;        /* 15 -> 16 px: opisy kart, kroki, zakres uslug */
    --fs-mini: .9375rem;    /* 14 -> 15 px: metryki, stopka */
    --etykieta: .8125rem;   /* 12 -> 13 px: etykiety sekcji */
  }
  /* Pole zgody: samo pole ma 22 px, wiec obszar dotyku robi etykieta. */
  .stl-zgoda { align-items: center; }
  .stl-zgoda input { width: 24px; height: 24px; min-height: 24px; margin-top: 0; }
  .stl-zgoda label { min-height: 44px; display: flex; align-items: center; font-size: .9375rem; }
  .stl-pytania__poz p, .stl-faq p { font-size: 1rem; }
  /* Link w pasku ciasteczek zostaje w linii tekstu. Wymuszenie 44 px
     wysokosci rozdymalo caly pasek ze 106 do 131 px (pomiar), a link ma
     123 px szerokosci i 42 px wysokosci, wiec trafienie w niego nie jest
     problemem. Kryterium 2.5.8 z WCAG 2.2 (24x24) spelnia z zapasem. */
  .stl-ciasteczka a { display: inline; }