/* Serwis Dachowy 24: arkusz motywu sd-theme. Wykonanie: Arlek.pl
   Barwy z jego znaku i busa (czerwień #BF1B1A/#D92315, szarość koła „24” #959096),
   ciemne sekcje w barwie papy. Kroje z naszego serwera (tools/fonty-lokalne.py). */

/* ---------- KROJE ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  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: 'Archivo zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.4%;
  ascent-override: 89.23%;
  descent-override: 21.34%;
  line-gap-override: 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%;
}

/* ---------- TOKENY ---------- */
:root {
  --sd-red: #C01D17;
  --sd-red-ciemny: #9C1611;
  --sd-red-jasny: #F0635A; /* czerwień na ciemnym: 5,0:1 na papie, małe litery nadtytułów przechodzą AA */
  --sd-ink: #1A1B1E;
  --sd-asfalt: #202226;
  --sd-asfalt-2: #2A2C31;
  --sd-noc: #141518;
  --sd-stal: #8F8B91;
  --sd-kreska: #858188;
  --sd-szary: #565961;
  --sd-papier: #F2F0EC;
  --sd-linia: #DCD8D1;
  --sd-bialy: #FFFFFF;
  --sd-jasny-tekst: #F4F2EF;
  --sd-jasny-drugi: #BDBAC0;

  --font: 'Archivo', 'Archivo zapasowy', system-ui, sans-serif;
  --waski: 80%;

  /* h1 50 px jak wzorzec, h2 34 px: stosunek 1,47, nagłówki sekcji nie krzyczą jak pierwszy ekran */
  --fs-h1: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  --fs-h2: clamp(1.625rem, 1.4rem + 0.75vw, 2.125rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-maly: 0.9375rem;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --sekcja: clamp(4rem, 2.9rem + 4.4vw, 6.5rem);
  --px: clamp(1rem, 0.6rem + 2.2vw, 2.5rem);
  --w-content: 76rem;
  /* ile zostaje od kontenera do krawędzi okna: zdjęcia wychodzą o tyle w bok */
  --wyjscie: calc((100vw - min(100vw - 2 * var(--px), var(--w-content))) / 2);

  --promien: 3px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 220ms;
  --naglowek-h: 4.75rem;

  /* Skośne prążki zostają tylko na czerwonym pasie pogotowia i karcie telefonu (ślepy krytyk:
     prążki na każdej ciemnej powierzchni czytają się jak gotowy motyw). Ciemne sekcje: barwa papy i światło. */
  --tlo-papy: none;
  --ikona-ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ikona-daszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 11 11 2l10 9' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --ikona-w-dol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- PODSTAWA ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--sd-ink);
  background: var(--sd-bialy);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--sd-red); outline-offset: 3px; }

.sd-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sd-pomin {
  position: fixed; left: var(--space-4); top: -4rem; z-index: 10000;
  background: var(--sd-ink); color: var(--sd-bialy); padding: var(--space-3) var(--space-4);
  font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease);
}
.sd-pomin:focus { top: var(--space-4); }

.sd-kontener { width: min(100% - 2 * var(--px), var(--w-content)); margin-inline: auto; }
.sd-ikona { flex: none; }

/* ---------- TYPOGRAFIA ---------- */
.sd-h2, .sd-hero__tytul, .sd-h3, .sd-wkrotce__tytul, .sd-naglowek-strony__tytul, .sd-karta__tytul, .sd-galeria__tytul {
  font-stretch: var(--waski);
  font-weight: 760;
  letter-spacing: -0.012em;
  line-height: 1.08;
}
.sd-hero__tytul, .sd-naglowek-strony__tytul { font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.04; }
/* Numery telefonu: cyfry równej szerokości, „723 588 988” nie skacze między przyciskami. */
.sd-tel__numer, .sd-przycisk--tel, .sd-karta__numer, .sd-bok__numer, .sd-kontakt__wartosc, .sd-szuflada__numer, .sd-fakty__poz strong { font-variant-numeric: tabular-nums; }
body { font-kerning: normal; }
.sd-h2 { font-size: var(--fs-h2); }
.sd-h3 { font-size: var(--fs-h3); line-height: 1.18; }
.sd-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--sd-szary); }

.sd-nadtytul {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sd-red);
}
.sd-nadtytul::before {
  content: ""; width: 1.375rem; height: 0.75rem; flex: none; background: currentColor;
  -webkit-mask: var(--ikona-daszek) center / contain no-repeat; mask: var(--ikona-daszek) center / contain no-repeat;
}
.sd-nadtytul:has(.sd-ikona)::before { display: none; }
.sd-nadtytul--jasny { color: var(--sd-red-jasny); }

.sd-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; color: var(--sd-red); text-decoration: none; min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.sd-link .sd-ikona { transition: transform var(--dur) var(--ease); }
.sd-link:hover { color: var(--sd-red-ciemny); }
.sd-link:hover .sd-ikona { transform: translateX(4px); }

/* ---------- PRZYCISKI ---------- */
.sd-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 3.5rem; padding: 0 var(--space-6);
  border: 2px solid transparent; border-radius: var(--promien);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sd-przycisk .sd-ikona { transition: transform var(--dur) var(--ease); }
.sd-przycisk:hover .sd-ikona { transform: translateX(3px); }
.sd-przycisk--tel {
  background: var(--sd-red); color: var(--sd-bialy);
  font-stretch: var(--waski); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em;
  padding-inline: var(--space-6) var(--space-8);
  box-shadow: 0 10px 24px -12px rgba(192, 29, 23, 0.8);
}
.sd-przycisk--tel:hover { background: var(--sd-red-ciemny); }
.sd-przycisk--tel:hover .sd-ikona { transform: rotate(-12deg); }
.sd-przycisk--obrys { border-color: var(--sd-ink); color: var(--sd-ink); background: transparent; }
.sd-przycisk--obrys:hover { background: var(--sd-ink); color: var(--sd-bialy); }
.sd-przycisk--jasny { border-color: rgba(244, 242, 239, 0.7); color: var(--sd-jasny-tekst); background: transparent; }
.sd-przycisk--jasny:hover { background: var(--sd-jasny-tekst); color: var(--sd-asfalt); border-color: var(--sd-jasny-tekst); }

/* ---------- ZNAK ---------- */
.sd-znak { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--sd-ink); }
.sd-znak__dach { width: 2.6rem; height: auto; color: var(--sd-red); flex: none; margin-top: -0.35rem; }
.sd-znak__nazwa { font-stretch: 78%; font-weight: 800; font-size: 1.4rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.sd-znak__nazwa b { font-weight: 800; color: var(--sd-red); }
.sd-znak__24 {
  display: inline-grid; place-items: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--sd-stal);
  font-stretch: 78%; font-weight: 800; font-size: 0.95rem; color: var(--sd-ink); line-height: 1;
}
.sd-znak--jasny { color: var(--sd-jasny-tekst); }
.sd-znak--jasny .sd-znak__nazwa b, .sd-znak--jasny .sd-znak__dach { color: var(--sd-red-jasny); }
.sd-znak--jasny .sd-znak__24 { color: var(--sd-jasny-tekst); }
.sd-znak--logo img { max-height: 3rem; width: auto; }

/* ---------- NAGŁÓWEK I MENU ---------- */
.sd-naglowek {
  position: sticky; top: 0; z-index: 900;
  background: var(--sd-bialy); border-bottom: 1px solid var(--sd-linia);
  transition: box-shadow var(--dur) var(--ease);
}
.sd-naglowek.przewiniety { box-shadow: 0 10px 30px -18px rgba(20, 21, 24, 0.35); }
.sd-naglowek__wiersz { display: flex; align-items: center; gap: var(--space-6); min-height: var(--naglowek-h); }
.sd-naglowek__znak, .sd-stopka__znak { text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.sd-naglowek__znak { margin-right: auto; }
.sd-znak__dach { transition: transform var(--dur) var(--ease); }
.sd-naglowek__znak:hover .sd-znak__dach, .sd-stopka__znak:hover .sd-znak__dach { transform: translateY(-3px); }
.sd-naglowek__znak:hover .sd-znak__nazwa { color: var(--sd-red); }
.sd-stopka__znak:hover .sd-znak__nazwa { color: var(--sd-bialy); }

.sd-menu__lista { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.4vw, 2rem); }
.sd-menu__lista > li { position: relative; }
.sd-menu__lista a {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-weight: 600; font-size: 1rem; color: var(--sd-ink); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.sd-menu__lista a:hover, .sd-menu__lista .current-menu-item > a, .sd-menu__lista .current-menu-ancestor > a { color: var(--sd-red); }
.sd-menu__lista .menu-item-has-children > a::after {
  content: ""; width: 0.7rem; height: 0.45rem; background: currentColor;
  -webkit-mask: var(--ikona-w-dol) center / contain no-repeat; mask: var(--ikona-w-dol) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.sd-menu__lista .menu-item-has-children:hover > a::after, .sd-menu__lista .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
.sd-menu__lista .sub-menu {
  position: absolute; left: -1.25rem; top: 100%; z-index: 10;
  display: grid; min-width: 20rem; padding: var(--space-2);
  background: var(--sd-bialy); border: 1px solid var(--sd-linia); border-top: 3px solid var(--sd-red);
  box-shadow: 0 24px 48px -24px rgba(20, 21, 24, 0.4);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility var(--dur);
}
.sd-menu__lista li:hover > .sub-menu, .sd-menu__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: none; }
.sd-menu__lista .sub-menu a { display: flex; width: 100%; padding: 0 var(--space-4); border-radius: var(--promien); }
.sd-menu__lista .sub-menu a:hover { background: var(--sd-papier); }

.sd-tel {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 3.25rem; padding: 0.375rem var(--space-6) 0.375rem var(--space-4);
  background: var(--sd-red); color: var(--sd-bialy); border-radius: var(--promien); text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.sd-tel:hover { background: var(--sd-red-ciemny); }
.sd-tel__ikona { display: grid; place-items: center; }
.sd-tel__tekst { display: grid; line-height: 1.1; }
.sd-tel__podpis { font-size: 0.875rem; font-weight: 600; }
.sd-tel__numer { font-stretch: var(--waski); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; }

.sd-burger { display: none; width: 3rem; height: 3rem; padding: 0; border: 0; background: transparent; cursor: pointer; place-items: center; }
.sd-burger__kreski { display: grid; gap: 5px; width: 1.625rem; }
.sd-burger__kreski span { display: block; height: 3px; background: var(--sd-ink); border-radius: 1px; }
.sd-burger__kreski span:nth-child(2) { width: 72%; justify-self: end; }

@media (max-width: 1023px) {
  :root { --naglowek-h: 4rem; }
  .sd-menu { display: none; }
  .sd-burger { display: grid; }
  .sd-naglowek__wiersz { gap: var(--space-3); }
  .sd-tel { padding: 0.375rem var(--space-4) 0.375rem var(--space-3); min-height: 2.875rem; }
  .sd-tel__podpis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sd-tel__numer { font-size: 1.125rem; }
  .sd-znak__nazwa { font-size: 1.25rem; }
  .sd-znak__dach { width: 2.25rem; }
}
@media (max-width: 459px) {
  .sd-tel { width: 3rem; height: 3rem; min-height: 0; padding: 0; justify-content: center; }
  .sd-tel__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sd-naglowek .sd-znak__24 { display: none; }
  .sd-znak__nazwa { font-size: 1.1875rem; }
}

/* ---------- MENU NA TELEFONIE ---------- */
.sd-szuflada {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-4) var(--px) var(--space-8);
  background: var(--sd-asfalt); background-image: var(--tlo-papy); color: var(--sd-jasny-tekst);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 320ms var(--ease);
}
.sd-szuflada[hidden] { display: none; }
.sd-szuflada.otwarta { transform: translateX(0); }
.sd-szuflada__gora { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--naglowek-h) - var(--space-4)); }
.sd-szuflada__zamknij { width: 3rem; height: 3rem; border: 0; background: transparent; color: var(--sd-jasny-tekst); display: grid; place-items: center; cursor: pointer; }
.sd-szuflada__lista { display: grid; }
.sd-szuflada__lista > li > a {
  display: flex; align-items: center; min-height: 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-stretch: var(--waski); font-weight: 760; font-size: 1.625rem; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.sd-szuflada__lista .sub-menu { display: grid; padding: var(--space-2) 0 var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.sd-szuflada__lista .sub-menu a { display: flex; align-items: center; min-height: 2.75rem; font-weight: 600; font-size: 1.0625rem; color: var(--sd-jasny-drugi); text-decoration: none; }
.sd-szuflada__lista a:hover { color: var(--sd-red-jasny); }
.sd-szuflada__tel {
  margin-top: auto; display: grid; gap: var(--space-1);
  padding: var(--space-4) var(--space-6); background: var(--sd-red); color: var(--sd-bialy);
  border-radius: var(--promien); text-decoration: none;
}
.sd-szuflada__podpis { font-size: 0.9375rem; font-weight: 600; }
.sd-szuflada__numer { display: flex; align-items: center; gap: var(--space-3); font-stretch: var(--waski); font-weight: 800; font-size: 1.875rem; }
body.menu-otwarte { overflow: hidden; }

/* ---------- CIEMNY PAS: HERO I NAGŁÓWEK PODSTRONY ---------- */
.sd-hero, .sd-naglowek-strony {
  position: relative; overflow-x: clip;
  background-color: var(--sd-asfalt);
  background-image: radial-gradient(48rem 32rem at 8% 0%, rgba(192, 29, 23, 0.18), transparent 62%), var(--tlo-papy);
  color: var(--sd-jasny-tekst);
}
.sd-hero { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem); }
.sd-hero__siatka, .sd-naglowek-strony__siatka { display: grid; gap: var(--space-10); }
.sd-hero__tytul { color: var(--sd-bialy); margin-bottom: var(--space-6); }
.sd-hero .sd-lead, .sd-naglowek-strony .sd-lead { color: var(--sd-jasny-drugi); margin-bottom: var(--space-8); }
.sd-hero .sd-lead { margin-bottom: var(--space-6); }
/* Sześć jego usług na pierwszym ekranie: gość widzi swój przypadek, zanim cokolwiek przewinie. */
/* Spis w dwóch kolumnach z kreską pod spodem, nie sześć ramek: ramki zawijały się w cztery rzędy. */
.sd-hero__uslugi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); margin: var(--space-8) 0 0; border-top: 1px solid rgba(244, 242, 239, 0.16); }
.sd-hero__uslugi li { border-bottom: 1px solid rgba(244, 242, 239, 0.16); }
.sd-hero__uslugi a {
  display: flex; align-items: center; gap: var(--space-3); min-height: 46px;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--sd-jasny-tekst); text-decoration: none;
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.sd-hero__uslugi a::before { content: ""; width: 0.8rem; height: 0.45rem; flex: none; background: var(--sd-red-jasny); -webkit-mask: var(--ikona-daszek) center / contain no-repeat; mask: var(--ikona-daszek) center / contain no-repeat; }
.sd-hero__uslugi a:hover { color: var(--sd-bialy); padding-left: 0.25rem; }
@media (max-width: 459px) { .sd-hero__uslugi { grid-template-columns: 1fr; } }
.sd-hero__dzialania { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.sd-hero__podpis { display: grid; margin: 0; font-size: var(--fs-maly); color: var(--sd-jasny-drugi); line-height: 1.35; padding-left: var(--space-4); border-left: 3px solid var(--sd-red-jasny); }
.sd-hero__podpis strong { color: var(--sd-bialy); font-weight: 700; }

.sd-hero__foto, .sd-naglowek-strony__foto { position: relative; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--px)); }
.sd-hero__foto picture, .sd-hero__foto img, .sd-naglowek-strony__foto picture, .sd-naglowek-strony__foto img { width: 100%; height: 100%; }
/* Ścięty róg = skos dachu z jego logo; czerwona kreska biegnie równolegle do cięcia. */
.sd-hero__foto img, .sd-naglowek-strony__foto img { object-fit: cover; clip-path: polygon(0 30%, 21% 0, 100% 0, 100% 100%, 0 100%); }
.sd-hero__skos { position: absolute; inset: 0; width: 100%; height: 100%; translate: -0.75rem -0.75rem; overflow: visible; pointer-events: none; }
.sd-hero__skos path { stroke: var(--sd-red-jasny); stroke-width: 6px; fill: none; stroke-linecap: square; }

/* Plakietka „24h”: czerwone koło w szarym pierścieniu, jak koło „24” w jego logo. */
.sd-plakietka {
  position: absolute; right: 1rem; top: 1rem; margin: 0;
  display: grid; place-content: center; text-align: center;
  width: 7rem; height: 7rem; border-radius: 50%;
  background: var(--sd-red); color: var(--sd-bialy);
  box-shadow: 0 0 0 5px var(--sd-asfalt), 0 0 0 8px var(--sd-stal), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  line-height: 1;
}
.sd-plakietka__24 { font-stretch: 75%; font-weight: 800; font-size: 2.375rem; letter-spacing: -0.02em; }
.sd-plakietka__opis { font-size: 0.875rem; font-weight: 600; line-height: 1.15; padding-inline: 1rem; margin-top: 0.2rem; }

@media (min-width: 1024px) {
  .sd-hero__siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
  .sd-naglowek-strony__siatka { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
  /* Do prawej krawędzi okna, ale nigdy szerzej niż 4:3 przy ustalonej wysokości: szerokość
     z sufitem zamiast max-height, bo max-height przy nadanej szerokości zmienia proporcję
     pola i cover docina kadr (kadry.py, 1920 px). */
  .sd-hero__foto { justify-self: end; width: min(100% + var(--wyjscie), 48rem); margin-inline: 0 calc(-1 * var(--wyjscie)); }
  .sd-naglowek-strony__foto { justify-self: end; width: min(100% + var(--wyjscie), 46rem); margin-inline: 0 calc(-1 * var(--wyjscie)); }
  .sd-hero__skos { translate: -1.125rem -1.125rem; }
  .sd-plakietka { right: auto; top: auto; left: -3.5rem; bottom: 2.5rem; width: 8.75rem; height: 8.75rem; }
  .sd-plakietka__24 { font-size: 3rem; }
}

.sd-fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); }
.sd-fakty__poz { display: grid; gap: 0.2rem; padding-top: var(--space-4); border-top: 3px solid var(--sd-stal); }
.sd-fakty__poz:first-child { border-top-color: var(--sd-red-jasny); }
.sd-fakty__poz strong { font-stretch: var(--waski); font-weight: 780; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.1; color: var(--sd-bialy); }
.sd-fakty__poz span { font-size: var(--fs-maly); color: var(--sd-jasny-drugi); line-height: 1.4; }
@media (min-width: 768px) { .sd-fakty { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Nagłówek podstrony */
.sd-naglowek-strony { padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); }
.sd-naglowek-strony__tytul { font-size: var(--fs-h1); color: var(--sd-bialy); margin-bottom: var(--space-6); }
.sd-sciezka { margin-bottom: var(--space-6); }
.sd-sciezka ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: 0.875rem; color: var(--sd-jasny-drugi); }
.sd-sciezka li { display: inline-flex; align-items: center; gap: var(--space-2); }
.sd-sciezka li + li::before { content: "/"; color: var(--sd-stal); }
.sd-sciezka a { color: var(--sd-jasny-tekst); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; transition: color var(--dur) var(--ease); }
.sd-sciezka a:hover { color: var(--sd-red-jasny); }

/* ---------- POGOTOWIE ---------- */
.sd-pogotowie {
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
  background-color: var(--sd-red);
  background-image: repeating-linear-gradient(-34deg, transparent 0 26px, rgba(255, 255, 255, 0.045) 26px 28px);
  color: var(--sd-bialy);
}
.sd-pogotowie__dach { position: absolute; right: -4%; bottom: -12%; width: min(46rem, 70%); height: auto; pointer-events: none; }
.sd-pogotowie__dach path { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 14; stroke-linecap: square; }
.sd-pogotowie__siatka { position: relative; display: grid; gap: var(--space-8); align-items: center; }
.sd-pogotowie .sd-nadtytul, .sd-pogotowie .sd-nadtytul .sd-ikona { color: var(--sd-bialy); }
.sd-pogotowie .sd-h2 { margin-bottom: var(--space-4); }
.sd-pogotowie__opis { font-size: var(--fs-lead); line-height: 1.55; }
.sd-pogotowie__tel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-6) var(--space-8);
  background: var(--sd-bialy); color: var(--sd-ink); border-radius: var(--promien); text-decoration: none;
  box-shadow: 0 24px 48px -24px rgba(40, 6, 4, 0.7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sd-pogotowie__tel:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -24px rgba(40, 6, 4, 0.8); }
.sd-pogotowie__tel:focus-visible { outline-color: var(--sd-bialy); }
.sd-pogotowie__tel-tekst { display: grid; gap: var(--space-2); }
.sd-pogotowie__ikona { color: var(--sd-ink); --sd-ikona-tlo: var(--sd-bialy); }
.sd-pogotowie__wezwanie { font-weight: 700; font-size: 1.0625rem; }
.sd-pogotowie__numer { display: flex; align-items: center; gap: var(--space-3); font-stretch: 76%; font-weight: 800; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); line-height: 1; color: var(--sd-red); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 459px) { .sd-pogotowie__tel { grid-template-columns: 1fr; padding: var(--space-6); } .sd-pogotowie__ikona { width: 64px; height: 64px; } }
@media (min-width: 1024px) { .sd-pogotowie__siatka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }

/* Oś kroków pogotowia: kwadratowe znaczniki na jednej kresce, nie cztery kafle. */
.sd-kroki { position: relative; display: grid; gap: var(--space-6); margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); counter-reset: krok; }
.sd-kroki__krok { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-content: start; }
.sd-kroki__nr {
  grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  background: var(--sd-bialy); color: var(--sd-red); font-stretch: 76%; font-weight: 800; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 0 0 4px var(--sd-red), 0 0 0 6px rgba(255, 255, 255, 0.45);
  position: relative; z-index: 1;
}
.sd-kroki__tytul { font-stretch: var(--waski); font-weight: 760; font-size: 1.3125rem; line-height: 1.2; align-self: end; }
.sd-kroki__opis { font-size: var(--fs-maly); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.sd-kroki::before { content: ""; position: absolute; left: 1.4375rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: rgba(255, 255, 255, 0.4); }
@media (min-width: 900px) {
  .sd-kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
  .sd-kroki__krok { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .sd-kroki__nr { grid-row: auto; margin-bottom: var(--space-3); }
  .sd-kroki__tytul { align-self: auto; }
  .sd-kroki::before { left: 1.5rem; right: 0; top: 1.4375rem; bottom: auto; width: auto; height: 2px; }
}

/* Ikona usługi z Magnific w białym kole na zdjęciu (kreska grafitowa, akcent czerwony). */
.sd-ikona-uslugi { --sd-ikona-akcent: var(--sd-red); display: block; }
.sd-odznaka {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: var(--sd-bialy); color: var(--sd-ink); --sd-ikona-tlo: var(--sd-bialy);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 14px 30px -14px rgba(20, 21, 24, 0.55);
  transition: transform var(--dur) var(--ease);
}
/* Ikona prawie do krawędzi koła: kadr ikony ma już własny margines (viewBox ×1,06). */
.sd-odznaka svg { width: 82%; height: 82%; }
.sd-odznaka--duza { width: 7rem; height: 7rem; right: 1.5rem; bottom: 1.5rem; }
.sd-karta__link:hover .sd-odznaka, .sd-wyrozniona:hover .sd-odznaka { transform: translateY(-4px) rotate(-4deg); }
.sd-odznaka--naglowek { width: 6.5rem; height: 6.5rem; right: 1rem; bottom: 1rem; box-shadow: 0 0 0 5px var(--sd-asfalt), 0 0 0 8px var(--sd-stal), 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
@media (min-width: 1024px) { .sd-odznaka--naglowek { right: auto; left: -3.25rem; bottom: 2.5rem; width: 8rem; height: 8rem; } }
.sd-pogotowie__ikona { width: 96px; height: 96px; }

/* ---------- GŁÓWKA SEKCJI ---------- */
.sd-glowka { display: grid; gap: var(--space-2); margin-bottom: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); }
.sd-glowka__tekst { margin-top: var(--space-4); font-size: var(--fs-lead); line-height: 1.55; color: var(--sd-szary); }
@media (min-width: 1024px) {
  .sd-glowka { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sd-glowka > * { grid-column: 1 / span 8; }
}
.sd-glowka--wiersz { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.sd-glowka--wiersz > * { grid-column: auto; }

/* ---------- USŁUGI ---------- */
.sd-uslugi { padding-block: var(--sekcja); background: var(--sd-bialy); }
.sd-numer { font-stretch: 76%; font-weight: 800; font-size: 1.125rem; line-height: 1; color: var(--sd-red); letter-spacing: 0.02em; }
.sd-numer--na-zdjeciu {
  position: absolute; left: 0; bottom: 0; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; background: var(--sd-red); color: var(--sd-bialy); font-size: 1.375rem;
}
.sd-usluga__dopisek { font-stretch: 100%; font-weight: 500; font-size: 0.62em; letter-spacing: 0; color: var(--sd-szary); }

.sd-wyrozniona { display: grid; gap: var(--space-8); align-items: center; margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.sd-wyrozniona__foto { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sd-wyrozniona__foto picture, .sd-wyrozniona__foto img { width: 100%; height: 100%; }
.sd-wyrozniona__foto img { object-fit: cover; clip-path: polygon(0 0, 84% 0, 100% 28%, 100% 100%, 0 100%); transition: transform 600ms var(--ease); }
.sd-wyrozniona:hover .sd-wyrozniona__foto img { transform: scale(1.03); }
.sd-wyrozniona .sd-numer--na-zdjeciu { width: 4.25rem; height: 4.25rem; font-size: 1.75rem; }
.sd-wyrozniona__tekst .sd-h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-bottom: var(--space-4); }
.sd-pokrycia { display: grid; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 var(--space-8); }
.sd-pokrycia li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.sd-pokrycia .sd-ikona { color: var(--sd-red); }
@media (min-width: 600px) { .sd-pokrycia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .sd-wyrozniona { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
}

.sd-karty { display: grid; gap: var(--space-10) var(--space-8); }
.sd-karta__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.sd-karta__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sd-karta__foto picture, .sd-karta__foto img { width: 100%; height: 100%; }
.sd-karta__foto img { object-fit: cover; clip-path: polygon(0 0, 84% 0, 100% 22%, 100% 100%, 0 100%); transition: transform 700ms var(--ease); }
.sd-karta__link:hover .sd-karta__foto img { transform: scale(1.05); }
/* Kolumna z „Więcej” dosuniętym do dołu: odnośniki w jednym rzędzie stoją na jednej wysokości. */
.sd-karta__tresc { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); }
.sd-karta__tytul { font-size: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem); line-height: 1.14; transition: color var(--dur) var(--ease); }
.sd-karta__tytul .sd-usluga__dopisek { display: block; margin-top: 0.3rem; font-size: 0.65em; }
.sd-karta__tresc .sd-karta__wiecej { margin-top: auto; padding-top: var(--space-2); }
.sd-karta__link:hover .sd-karta__tytul { color: var(--sd-red); }
.sd-karta__opis { color: var(--sd-szary); }
.sd-karta__wiecej { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-weight: 700; color: var(--sd-red); }
.sd-karta__wiecej .sd-ikona { transition: transform var(--dur) var(--ease); }
.sd-karta__link:hover .sd-karta__wiecej .sd-ikona { transform: translateX(4px); }
/* Karta pogotowia: kontur dachu z komina jak na pasie pogotowia, żeby górna połowa nie stała pusta. */
.sd-karta--wezwanie .sd-karta__link {
  grid-template-rows: none; align-content: end; gap: var(--space-3);
  padding: 7rem var(--space-8) var(--space-8);
  background-color: var(--sd-asfalt);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cpath d='M10 230 200 40l190 190M285 125V30h45v140' fill='none' stroke='%23F0635A' stroke-opacity='.22' stroke-width='12' stroke-linecap='square'/%3E%3C/svg%3E"),
    var(--tlo-papy);
  background-repeat: no-repeat, repeat;
  background-position: right -2.5rem top 1.5rem, 0 0;
  background-size: 78% auto, auto;
  color: var(--sd-jasny-tekst);
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 1024px) { .sd-karta--wezwanie .sd-karta__link { min-height: 20rem; } }
.sd-karta--wezwanie .sd-karta__link:hover { background-color: var(--sd-noc); }
.sd-karta__nad { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sd-red-jasny); }
.sd-karta--wezwanie .sd-karta__tytul { color: var(--sd-bialy); }
.sd-karta--wezwanie .sd-karta__link:hover .sd-karta__tytul { color: var(--sd-bialy); }
.sd-karta__numer { display: flex; align-items: center; gap: var(--space-3); font-stretch: 76%; font-weight: 800; font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 1.05; color: var(--sd-bialy); white-space: nowrap; }
.sd-karta__numer .sd-ikona { color: var(--sd-red-jasny); }
@media (min-width: 600px) { .sd-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sd-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- O NAS ---------- */
.sd-onas { position: relative; overflow: hidden; padding-block: var(--sekcja); background-color: var(--sd-asfalt); background-image: radial-gradient(60rem 30rem at 0% 0%, rgba(192, 29, 23, 0.14), transparent 60%), var(--tlo-papy); color: var(--sd-jasny-tekst); }
.sd-onas__siatka { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); align-items: center; }
.sd-onas__liczba { display: grid; margin: 0 0 var(--space-6); }
.sd-onas__rok { font-stretch: 75%; font-weight: 800; line-height: 0.86; letter-spacing: -0.02em; font-size: clamp(5rem, 3.3rem + 6.4vw, 9.5rem); color: var(--sd-red-jasny); }
.sd-onas__podpis { margin-top: var(--space-3); font-size: var(--fs-maly); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sd-jasny-drugi); }
.sd-onas .sd-h2 { margin-bottom: var(--space-6); }
.sd-onas__proza p { color: var(--sd-jasny-drugi); }
.sd-onas__proza p:first-child { color: var(--sd-jasny-tekst); font-size: var(--fs-lead); line-height: 1.55; }
.sd-cytat { margin: var(--space-8) 0 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--sd-red-jasny); }
.sd-cytat__zdanie { font-stretch: var(--waski); font-weight: 740; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; color: var(--sd-bialy); margin-bottom: var(--space-3); }
.sd-cytat__dopisek { color: var(--sd-jasny-drugi); }
.sd-cytat--jasne { border-left-color: var(--sd-red); }
.sd-cytat--jasne .sd-cytat__zdanie { color: var(--sd-ink); }
.sd-cytat--jasne .sd-cytat__dopisek { color: var(--sd-szary); }
.sd-budynki { display: grid; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.sd-budynki li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; line-height: 1.3; }
.sd-budynki .sd-ikona { box-sizing: content-box; padding: 0.625rem; border: 2px solid rgba(143, 139, 145, 0.7); border-radius: var(--promien); color: var(--sd-red-jasny); transition: border-color var(--dur) var(--ease); }
.sd-budynki li:hover .sd-ikona { border-color: var(--sd-red-jasny); }
@media (min-width: 520px) { .sd-budynki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-budynki--jasne { margin-top: 0; }
.sd-budynki--jasne .sd-ikona { border-color: var(--sd-linia); color: var(--sd-red); }
.sd-budynki--jasne li:hover .sd-ikona { border-color: var(--sd-red); }
.sd-onas__wiecej { margin-top: var(--space-10); }
.sd-onas__zdjecia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sd-onas__foto picture, .sd-onas__foto img { width: 100%; height: 100%; }
.sd-onas__foto img { object-fit: cover; }
.sd-onas__foto--ekipa { grid-column: 3 / 13; grid-row: 1; aspect-ratio: 4 / 3; }
.sd-onas__foto--bus { grid-column: 1 / 9; grid-row: 2; aspect-ratio: 16 / 9; margin-top: -18%; border: 0.5rem solid var(--sd-asfalt); box-sizing: content-box; position: relative; }
@media (min-width: 1024px) {
  .sd-onas__siatka { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .sd-onas__zdjecia { margin-right: calc(-1 * var(--wyjscie)); }
}

/* ---------- GALERIA ---------- */
.sd-galeria { padding-block: var(--sekcja); background: var(--sd-papier); }
.sd-galeria--uslugi, .sd-galeria--firma { border-top: 2px solid var(--sd-kreska); }
.sd-galeria--pelna { background: var(--sd-bialy); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.sd-mozaika { display: grid; gap: 0.75rem; }
.sd-mozaika__wiersz { display: flex; gap: 0.75rem; }
.sd-mozaika__kafel { position: relative; flex: var(--r) 1 0%; aspect-ratio: var(--r); min-width: 0; padding: 0; border: 0; background: var(--sd-linia); overflow: hidden; cursor: zoom-in; }
.sd-mozaika__kafel picture, .sd-mozaika__kafel img { width: 100%; height: 100%; }
.sd-mozaika__kafel img { object-fit: cover; transition: transform 700ms var(--ease); }
.sd-mozaika__kafel:hover img { transform: scale(1.045); }
.sd-mozaika__lupa {
  position: absolute; right: 0.75rem; top: 0.75rem; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(20, 21, 24, 0.72); color: var(--sd-bialy);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sd-mozaika__kafel:hover .sd-mozaika__lupa, .sd-mozaika__kafel:focus-visible .sd-mozaika__lupa { opacity: 1; transform: none; }
.sd-mozaika__kafel:focus-visible { outline-offset: -3px; }
@media (max-width: 599px) {
  .sd-mozaika__wiersz { flex-wrap: wrap; }
  .sd-mozaika__wiersz > .sd-mozaika__kafel:first-child { flex: 1 1 100%; }
}
.sd-spis { position: sticky; top: var(--naglowek-h); z-index: 5; margin-inline: calc(-1 * var(--px)); padding: var(--space-3) var(--px); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sd-linia); }
.sd-spis ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Na telefonie spis w jednym rzędzie przewijanym w bok: zawinięty w cztery rzędy przyklejał się
   nad zdjęciami i łapał dotknięcia przeznaczone dla kafli (stany.py, 390 px). */
@media (max-width: 1023px) {
  .sd-spis ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .sd-spis ul::-webkit-scrollbar { display: none; }
  .sd-spis li { flex: none; }
}
.sd-spis a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 2px solid var(--sd-linia); border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sd-spis a span { font-size: 0.875rem; color: var(--sd-szary); }
.sd-spis a:hover { border-color: var(--sd-red); color: var(--sd-red); }
.sd-galeria__grupa { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); scroll-margin-top: calc(var(--naglowek-h) + 5rem); }
.sd-galeria__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem); margin-bottom: var(--space-6); }
.sd-galeria__tytul span { font-stretch: 100%; font-weight: 700; font-size: 1rem; color: var(--sd-red); }

/* ---------- PRZEGLĄDARKA ZDJĘĆ ---------- */
.sd-przegladarka { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 13, 15, 0.97); color: var(--sd-jasny-tekst); overflow: hidden; }
.sd-przegladarka[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sd-przegladarka::backdrop { background: rgba(12, 13, 15, 0.9); }
.sd-przegladarka__gora { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) 0 var(--px); }
.sd-przegladarka__licznik { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sd-przegladarka__zamknij { width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--sd-jasny-tekst); cursor: pointer; transition: color var(--dur) var(--ease); }
.sd-przegladarka__zamknij:hover { color: var(--sd-red-jasny); }
.sd-przegladarka__tor { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.sd-przegladarka__tor::-webkit-scrollbar { display: none; }
.sd-przegladarka__tor:focus { outline: none; }
.sd-przegladarka__slajd { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: var(--space-3); padding: var(--space-2) clamp(0.5rem, 5vw, 5.5rem); }
.sd-przegladarka__slajd img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sd-przegladarka__slajd figcaption { font-size: var(--fs-maly); color: var(--sd-jasny-drugi); text-align: center; }
.sd-przegladarka__strzalka { position: absolute; top: 50%; translate: 0 -50%; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--sd-bialy); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.sd-przegladarka__strzalka:hover { background: var(--sd-red); }
.sd-przegladarka__strzalka:disabled { opacity: 0.3; cursor: default; background: rgba(255, 255, 255, 0.1); }
.sd-przegladarka__strzalka--wstecz { left: var(--space-4); }
.sd-przegladarka__strzalka--dalej { right: var(--space-4); }
@media (hover: none) { .sd-przegladarka__strzalka { display: none; } }
.sd-przegladarka__miniatury { display: flex; gap: 0.5rem; overflow-x: auto; padding: var(--space-3) var(--px) var(--space-4); scrollbar-width: thin; }
.sd-przegladarka__miniatury button { flex: 0 0 4.5rem; height: 3.375rem; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: 0.55; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sd-przegladarka__miniatury button:hover { opacity: 0.9; }
.sd-przegladarka__miniatury button[aria-current="true"] { opacity: 1; border-color: var(--sd-red-jasny); }
.sd-przegladarka__miniatury img { width: 100%; height: 100%; object-fit: cover; }
html.galeria-otwarta { overflow: hidden; }

/* ---------- OBSZAR DZIAŁANIA ---------- */
.sd-obszar { position: relative; overflow-x: clip; padding-block: var(--sekcja); background-color: var(--sd-asfalt); background-image: var(--tlo-papy); color: var(--sd-jasny-tekst); }
.sd-obszar__siatka { display: grid; gap: var(--space-10); align-items: center; }
.sd-obszar .sd-h2 { margin-bottom: var(--space-4); }
.sd-obszar__opis { color: var(--sd-jasny-drugi); }
.sd-miejscowosci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 var(--space-8); }
.sd-miejscowosci li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; line-height: 1.3; }
.sd-miejscowosci li::before { content: ""; width: 0.875rem; height: 0.5rem; flex: none; background: var(--sd-red-jasny); -webkit-mask: var(--ikona-daszek) center / contain no-repeat; mask: var(--ikona-daszek) center / contain no-repeat; }
.sd-obszar__dzialania { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.sd-obszar__foto { position: relative; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--px)); }
.sd-obszar__foto picture, .sd-obszar__foto img { width: 100%; height: 100%; }
.sd-obszar__foto img { object-fit: cover; }
@media (min-width: 640px) { .sd-miejscowosci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .sd-obszar__siatka { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
  .sd-miejscowosci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-obszar__foto { justify-self: end; width: min(100% + var(--wyjscie), 50rem); margin-inline: 0 calc(-1 * var(--wyjscie)); }
}

/* ---------- PODSTRONA: TREŚĆ I BOK ---------- */
.sd-cialo { padding-block: var(--sekcja); background: var(--sd-bialy); }
.sd-cialo__siatka { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 1024px) { .sd-cialo__siatka { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); } }
.sd-proza { font-size: 1.0625rem; line-height: 1.72; }
.sd-proza > :first-child { margin-top: 0; }
.sd-proza h2 { font-stretch: var(--waski); font-weight: 760; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; margin: 2.2em 0 0.7em; }
.sd-proza h2::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--space-4); background: var(--sd-red); }
.sd-proza p { margin-bottom: 1.1em; }
.sd-proza ul { display: grid; gap: var(--space-2); margin: 0 0 1.4em; padding: var(--space-6) var(--space-6); background: var(--sd-papier); border-left: 4px solid var(--sd-red); }
.sd-proza li { position: relative; padding-left: 1.875rem; font-weight: 500; }
.sd-proza li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 1.2rem; height: 1.2rem; background: var(--sd-red); -webkit-mask: var(--ikona-ptaszek) center / contain no-repeat; mask: var(--ikona-ptaszek) center / contain no-repeat; }
.sd-proza a { color: var(--sd-red); }
.sd-bok { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .sd-bok { position: sticky; top: calc(var(--naglowek-h) + 1.5rem); } }
.sd-bok__tel {
  display: grid; gap: var(--space-2); padding: var(--space-8);
  background-color: var(--sd-red); background-image: repeating-linear-gradient(-34deg, transparent 0 26px, rgba(255, 255, 255, 0.05) 26px 28px);
  color: var(--sd-bialy); border-radius: var(--promien); text-decoration: none; transition: background-color var(--dur) var(--ease);
}
.sd-bok__tel:hover { background-color: var(--sd-red-ciemny); }
.sd-bok__tel:focus-visible { outline-color: var(--sd-ink); }
.sd-bok__nad { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.sd-bok__wezwanie { font-size: 1.0625rem; }
.sd-bok__numer { display: flex; align-items: center; gap: var(--space-3); font-stretch: 76%; font-weight: 800; font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 1.05; white-space: nowrap; }
.sd-bok__uslugi { padding: var(--space-6) var(--space-6) var(--space-4); background: var(--sd-papier); border-radius: var(--promien); }
.sd-bok__tytul { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sd-red); margin-bottom: var(--space-2); }
.sd-bok__uslugi li + li { border-top: 1px solid var(--sd-linia); }
.sd-bok__uslugi a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3rem; font-weight: 600; text-decoration: none; transition: color var(--dur) var(--ease); }
.sd-bok__uslugi a .sd-ikona { color: var(--sd-stal); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.sd-bok__uslugi a:hover, .sd-bok__uslugi a[aria-current="page"] { color: var(--sd-red); }
.sd-bok__uslugi a:hover .sd-ikona { transform: translateX(3px); color: var(--sd-red); }
.sd-bok__rok { display: grid; padding: var(--space-8); background: var(--sd-asfalt); background-image: var(--tlo-papy); border-radius: var(--promien); }

/* ---------- KONTAKT (strona Kontakt) ---------- */
.sd-kontakt { padding-block: var(--sekcja); background: var(--sd-papier); }
.sd-kontakt__karty { display: grid; gap: var(--space-6); }
.sd-kontakt__karta > a, .sd-kontakt__karta > div {
  display: grid; gap: var(--space-2); height: 100%; padding: var(--space-8);
  background: var(--sd-bialy); border-top: 4px solid var(--sd-ink); border-radius: var(--promien);
  color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sd-kontakt__karta > a:hover { border-top-color: var(--sd-red); transform: translateY(-3px); }
.sd-kontakt__ikona { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--sd-papier); color: var(--sd-red); }
.sd-kontakt__podpis { font-size: var(--fs-maly); font-weight: 600; color: var(--sd-szary); }
.sd-kontakt__wartosc { font-stretch: var(--waski); font-weight: 780; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.sd-kontakt__podpis--odstep { margin-top: var(--space-4); }
.sd-kontakt__godzina { font-weight: 600; }
.sd-kontakt__karta--tel > a { background-color: var(--sd-red); color: var(--sd-bialy); border-top-color: var(--sd-red-ciemny); }
.sd-kontakt__karta--tel > a:hover { border-top-color: var(--sd-noc); }
.sd-kontakt__karta--tel .sd-kontakt__ikona { background: rgba(255, 255, 255, 0.16); color: var(--sd-bialy); }
.sd-kontakt__karta--tel .sd-kontakt__podpis { color: var(--sd-bialy); }
.sd-kontakt__karta--tel .sd-kontakt__wartosc { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
@media (min-width: 900px) { .sd-kontakt__karty { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- STOPKA ---------- */
.sd-stopka { background: var(--sd-noc); color: var(--sd-jasny-tekst); border-top: 2px solid var(--sd-stal); padding-top: clamp(3rem, 2.5rem + 2vw, 4rem); }
.sd-stopka__siatka { display: grid; gap: var(--space-10); padding-bottom: var(--space-10); }
.sd-stopka__znak { display: inline-flex; text-decoration: none; margin-bottom: var(--space-4); }
.sd-stopka__opis { color: var(--sd-jasny-drugi); }
.sd-stopka__tytul { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sd-red-jasny); margin-bottom: var(--space-4); }
.sd-stopka__lista { display: grid; gap: var(--space-1); }
.sd-stopka__lista a, .sd-stopka__lista span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none; color: var(--sd-jasny-drugi); transition: color var(--dur) var(--ease); }
.sd-stopka__lista a:hover { color: var(--sd-bialy); }
.sd-stopka__lista--kontakt .sd-ikona { color: var(--sd-red-jasny); }
.sd-stopka__tytul--odstep { margin-top: var(--space-6); }
.sd-stopka__godziny { display: grid; gap: var(--space-1); color: var(--sd-jasny-drugi); }
.sd-stopka__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-maly); color: var(--sd-jasny-drugi); }
.sd-stopka__dol p { margin: 0; }
.sd-stopka__dol a { color: var(--sd-jasny-tekst); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; transition: color var(--dur) var(--ease); }
.sd-stopka__dol a:hover { color: var(--sd-red-jasny); }
@media (min-width: 768px) { .sd-stopka__siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); } }
/* Na komórce przycisk telefonu stoi w prawym dolnym rogu: stopka kończy się nad nim, nie pod nim. */
@media (max-width: 1023px) { .sd-stopka__dol { padding-bottom: 6rem; } }

/* ---------- TELEFON PŁYWAJĄCY (komórka) ---------- */
.sd-plywajacy {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: var(--sd-red); color: var(--sd-bialy); box-shadow: 0 12px 28px -10px rgba(120, 14, 10, 0.8);
  opacity: 0; translate: 0 1rem; pointer-events: none;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sd-plywajacy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sd-red); animation: sd-puls 2.6s var(--ease) infinite; }
.sd-plywajacy.widoczny { opacity: 1; translate: none; pointer-events: auto; }
.sd-plywajacy:hover { background: var(--sd-red-ciemny); }
@keyframes sd-puls { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
@media (min-width: 1024px) { .sd-plywajacy { display: none; } }

/* ---------- PODSTRONA W PRZYGOTOWANIU / 404 ---------- */
.sd-wkrotce { position: relative; overflow: hidden; min-height: calc(100svh - var(--naglowek-h)); display: grid; align-items: center; padding-block: var(--space-16); background-color: var(--sd-asfalt); background-image: var(--tlo-papy); color: var(--sd-jasny-tekst); }
.sd-wkrotce__dach { position: absolute; right: -6%; bottom: -10%; width: min(44rem, 80%); height: auto; pointer-events: none; }
.sd-wkrotce__dach path { fill: none; stroke: rgba(232, 71, 59, 0.16); stroke-width: 14; stroke-linecap: square; }
.sd-wkrotce__wnetrze { position: relative; }
.sd-wkrotce__tytul { font-size: var(--fs-h1); color: var(--sd-bialy); margin-bottom: var(--space-6); }
.sd-wkrotce__powod { font-size: var(--fs-lead); line-height: 1.55; color: var(--sd-jasny-drugi); }
.sd-wkrotce__punkty { display: grid; gap: var(--space-3); margin: var(--space-8) 0; }
.sd-wkrotce__punkty li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.sd-wkrotce__punkty .sd-ikona { color: var(--sd-red-jasny); }
.sd-wkrotce__dzialania { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- ZWYKŁA PODSTRONA (polityka) ---------- */
.sd-strona__glowka { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); background: var(--sd-papier); border-bottom: 1px solid var(--sd-linia); }
.sd-strona .sd-proza { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--sekcja); }

/* ---------- WEJŚCIA SEKCJI ----------
   translate, nie transform (memory: lekcja-fill-mode-both-przykrywa-transform);
   po wejściu nie zostaje nic przypiętego. Bez JS treść stoi od razu. */
.sd-js .sd-wejscie:not(.widoczne) { opacity: 0; translate: 0 14px; }
.sd-wejscie.widoczne { opacity: 1; translate: none; animation: sd-wejscie 520ms var(--ease) backwards; }
@keyframes sd-wejscie { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
  .sd-js .sd-wejscie:not(.widoczne) { opacity: 1; translate: none; }
  .sd-wejscie.widoczne { animation: none; }
  .sd-plywajacy::after { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}