/* Prototyp B "Jasny gabinet" - adwokatklodzko.pl (strona glowna). Czysty CSS, bez bibliotek.
   Tokeny i kontrasty: _harvest/adwokatklodzko/koncepcje/B/KONCEPCJA.md (liczone skryptem kontrast_palety.py). */

:root {
  --piasek: #f7efe4;          /* tlo strony: krem naglowka oryginalu #f2dbbc wyciszony */
  --piasek-2: #f0e4d4;        /* pas sekcji Zakres */
  --brzoskwinia: #f2dbbc;     /* krem naglowka oryginalu 1:1: zakreslenia, kafel Dziedziny */
  --biel: #ffffff;            /* karty */
  --grafit: #2a2623;          /* tekst */
  --grafit-2: #5f5650;        /* tekst drugorzedny */
  --miedz: #9a4d22;           /* jedyny akcent: rdzawy braz ksiegi #82430f rozjasniony ku terakocie */
  --miedz-ciemna: #82430f;    /* braz-rdzawy-ksiegi z oryginalu: hover, tekst akcentu na brzoskwini */
  --miedz-jasna: #e4bc98;     /* tylko dekoracja (plamy, poswiata), nigdy tekst */
  --zakreslacz: #f0d0aa;      /* zakreslenia pod tekstem (grafit na nim 10,3:1) */
  --linia: #e3d4c1;           /* linie i tor osi (dekoracja) */
  --espresso: #2a221d;        /* stopka */
  --krem: #f3e8da;            /* tekst na espresso */
  --krem-2: #c9b8a4;          /* tekst drugorzedny na espresso */
  --miedz-noc: #e3a877;       /* linki i fokus na espresso */

  --cien-s: 0 1px 2px rgba(74, 46, 22, .06), 0 8px 24px -14px rgba(74, 46, 22, .22);
  --cien: 0 1px 2px rgba(74, 46, 22, .06), 0 24px 48px -24px rgba(74, 46, 22, .32);
  --promien: 1.25rem;
  --promien-xl: 1.75rem;
  --szer: 76rem;
  --margines: clamp(1.25rem, 4vw, 2.5rem);
  --rytm: clamp(4.5rem, 8vw, 8rem);
  --ease: cubic-bezier(.16, .84, .3, 1);

  --szeryf: "Fraunces", "Iowan Old Style", Georgia, serif;
  --grotesk: "Manrope", "Segoe UI", system-ui, sans-serif;
}

/* rem rosnie od 1440 px: przy 2400-3840 px uklad jest proporcjonalnie wiekszy, nie waska kolumna w morzu pustki */
/* scroll-padding (zamiast scroll-margin na [id]): kotwice ORAZ przewijanie do fokusu z klawiatury laduja pod
   przyklejonym naglowkiem (5,25rem), a nie za nim */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
@media (min-width: 90.0625em) {
  html { font-size: calc(1rem + (100vw - 90rem) * .0065); }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--grafit);
  background-color: var(--piasek);
  background-image: url("img/ziarno.png");
  font-family: var(--grotesk);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure { margin: 0; }   /* figure: domyslny margines 1em 40px wcinal zdjecia (B-K03) */
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
/* cel kotwicy z app.js (tabindex=-1) po wyborze z szuflady: bez obwodki wokol calej sekcji */
[tabindex="-1"]:focus { outline: none; }

.nw { white-space: nowrap; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--miedz); outline-offset: 3px; border-radius: .25rem; }
.stopka :focus-visible { outline-color: var(--miedz-noc); }

.kontener { width: min(100% - 2 * var(--margines), var(--szer)); margin-inline: auto; }

/* ---------- skrot do tresci ---------- */
.skrot {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  background: var(--grafit); color: var(--biel); padding: .75rem 1.1rem; border-radius: .6rem;
  font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skrot:focus { transform: none; }

/* ---------- naglowek ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 239, 228, .96);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.naglowek--przewiniety {
  background: rgba(255, 252, 247, .98);
  box-shadow: 0 1px 0 var(--linia), 0 12px 30px -22px rgba(74, 46, 22, .45);
}
/* wysokosc NIE zmienia sie przy przewijaniu (B-K02): zmiana ukladu w przyklejonym naglowku + scroll anchoring
   dawaly petle 5-24 px od gory (klasa przelaczala sie co klatke); po przewinieciu zmienia sie tylko tlo i cien */
.naglowek__wnetrze { display: flex; align-items: center; gap: 1rem; min-height: 5.25rem; }

.marka { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; text-decoration: none; margin-right: auto; min-width: 0; }
.marka__znak { flex: none; width: 2.75rem; height: 2.75rem; color: var(--miedz); transition: transform .6s var(--ease); }
.marka:hover .marka__znak { transform: rotate(-8deg); }
.marka__tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; white-space: nowrap; }
.marka__gora { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--grafit-2); }
.marka__dol { font-family: var(--szeryf); font-size: 1.3125rem; font-weight: 450; font-variation-settings: "SOFT" 30; letter-spacing: -.005em; }

.menu ul { list-style: none; display: flex; gap: .25rem; }
.menu a {
  display: block; padding: .6rem .8rem; border-radius: 999px;
  font-size: .9688rem; font-weight: 550; text-decoration: none;
  background-image: linear-gradient(var(--miedz), var(--miedz));
  background-size: 0 2px; background-position: 50% calc(100% - .35rem); background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .2s;
}
.menu a:hover { background-size: calc(100% - 1.6rem) 2px; }
.menu a[aria-current="page"] { color: var(--miedz); background-size: calc(100% - 1.6rem) 2px; }

.naglowek__tel {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  padding: .55rem 1.05rem .55rem .6rem; border-radius: 999px;
  border: 1.5px solid var(--miedz); color: var(--miedz); text-decoration: none;
  font-weight: 650; font-size: .9375rem; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.naglowek__tel svg { width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: 50%; background: var(--miedz); color: var(--biel); transition: background-color .25s, color .25s; }
.naglowek__tel:hover { background: var(--miedz); color: var(--biel); }
.naglowek__tel:hover svg { background: var(--biel); color: var(--miedz); }

.menu-przycisk {
  display: inline-flex; align-items: center; gap: .6rem; flex: none;
  min-height: 2.75rem; padding: .5rem 1rem .5rem .85rem; border-radius: 999px;
  border: 1.5px solid var(--grafit); background: transparent; color: var(--grafit);
  font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
}
.menu-przycisk__kreski { position: relative; width: 1.1rem; height: .7rem; }
.menu-przycisk__kreski::before, .menu-przycisk__kreski::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--ease);
}
.menu-przycisk__kreski::before { top: 0; }
.menu-przycisk__kreski::after { bottom: 0; right: .3rem; }
.menu-przycisk:hover .menu-przycisk__kreski::after { transform: translateX(.3rem); }

/* telefon w naglowku na waskich ekranach: sama okragla ikona (numer w sr-only) */
@media (max-width: 74.9375em) {
  .naglowek__tel { padding: 0; border: 0; gap: 0; }
  .naglowek__tel svg { width: 2.75rem; height: 2.75rem; padding: .75rem; }
  .naglowek__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 67.4375em) { .menu { display: none; } }
@media (min-width: 67.5em) { .menu-przycisk { display: none; } }
/* B-K01: nazwisko w naglowku nie moze wejsc pod ikone telefonu. Pomiar (skrypty/test_naglowek.py, 320-1300 px co 1 px):
   odstep tekstu marki od telefonu i telefonu od Menu >= 6 px na kazdej szerokosci. */
@media (max-width: 31.9375em) {      /* do 511 px: Menu jako sama ikona 44 px, napis tylko dla czytnikow ekranu */
  .menu-przycisk { width: 2.75rem; padding: 0; justify-content: center; }
  .menu-przycisk__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 29.9375em) {
  .naglowek__wnetrze { gap: .625rem; min-height: 4.5rem; }
  .marka { gap: .55rem; }
  .marka__znak { width: 2.375rem; height: 2.375rem; }
  .marka__gora { font-size: .75rem; letter-spacing: .04em; }     /* 12 px, nie mniej */
  .marka__dol { font-size: 1.0625rem; }
}
@media (max-width: 24.3125em) { .marka__znak { display: none; } }      /* ponizej 390 px: sam tekst marki */
@media (max-width: 22.4375em) { .marka__dol { font-size: .9375rem; } } /* ponizej 360 px */

/* ---------- szuflada (dialog modalny: tlo inert z definicji, Esc, pulapka fokusu w app.js) ---------- */
.szuflada {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(27rem, 100%); height: 100%; max-width: 100%; max-height: none;
  background: var(--piasek); color: var(--grafit);
  box-shadow: -24px 0 60px -30px rgba(42, 34, 29, .6);
  overflow-y: auto; overscroll-behavior: contain;
}
.szuflada::backdrop { background: rgba(42, 34, 29, .45); }
.szuflada__wnetrze { min-height: 100%; display: flex; flex-direction: column; padding: 1rem var(--margines) 2rem; }
.szuflada__gora { display: flex; justify-content: flex-end; min-height: 3.25rem; align-items: center; }
.szuflada__zamknij {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem;
  padding: .5rem 1rem .5rem .8rem; border-radius: 999px; border: 1.5px solid var(--grafit);
  background: transparent; color: var(--grafit); font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
}
.szuflada__zamknij svg { width: 1rem; height: 1rem; }
.szuflada nav { margin-top: clamp(1.5rem, 6vh, 3rem); }
.szuflada nav ul { list-style: none; display: grid; gap: .25rem; }
.szuflada nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--linia); text-decoration: none;
  font-family: var(--szeryf); font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.15;
  font-variation-settings: "SOFT" 30;
}
.szuflada nav a::after { content: ""; flex: none; width: .6rem; height: .6rem; border-top: 2px solid var(--miedz); border-right: 2px solid var(--miedz); transform: rotate(45deg); transition: transform .3s var(--ease); }
.szuflada nav a:hover::after { transform: translateX(.3rem) rotate(45deg); }
.szuflada nav a[aria-current="page"] { color: var(--miedz); }
.szuflada__kontakt { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.szuflada__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.25rem; border-radius: 999px; background: var(--miedz); color: var(--biel);
  text-decoration: none; font-weight: 700; font-size: 1.0625rem;
}
.szuflada__tel svg { width: 1.25rem; height: 1.25rem; }
.szuflada__adres { color: var(--grafit-2); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .szuflada[open] { animation: szuflada-wjazd .5s var(--ease); }
  .szuflada[open]::backdrop { animation: tlo-wjazd .35s ease; }
  .szuflada.zamyka { animation: szuflada-zjazd .3s ease-in forwards; }
  .szuflada.zamyka::backdrop { animation: tlo-zjazd .3s ease-in forwards; }
  .szuflada[open] nav li { animation: pozycja-wjazd .6s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
}
@keyframes szuflada-wjazd { from { transform: translateX(100%); } }
@keyframes szuflada-zjazd { to { transform: translateX(100%); } }
@keyframes tlo-wjazd { from { opacity: 0; } }
@keyframes tlo-zjazd { to { opacity: 0; } }
@keyframes pozycja-wjazd { from { transform: translateX(2.5rem); } }
html.szuflada-otwarta { overflow: hidden; }

/* ---------- elementy wspolne ---------- */
.przycisk {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .55rem 1.6rem .55rem .55rem; border-radius: 999px;
  background: var(--miedz); color: var(--biel); text-decoration: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  box-shadow: 0 14px 30px -14px rgba(130, 67, 15, .65);
  transition: background-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.przycisk__ikona {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--biel); color: var(--miedz);
}
.przycisk__ikona svg { width: 1.3rem; height: 1.3rem; }
.przycisk:hover { background: var(--miedz-ciemna); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(130, 67, 15, .7); }
@media (prefers-reduced-motion: no-preference) {
  .przycisk:hover .przycisk__ikona svg { animation: dzwonek .9s ease-in-out; }
}
@keyframes dzwonek {
  0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); }
  45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}

.link-strzalka {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 650; color: var(--miedz);
  padding: .8rem 1.25rem; border-radius: 999px; border: 1.5px solid currentColor; line-height: 1.35;
  transition: background-color .25s, color .25s;
}
.link-strzalka svg { flex: none; width: 1.1rem; height: 1.1rem; transition: transform .35s var(--ease); }
.link-strzalka:hover { background: var(--miedz); color: var(--biel); }
@media (max-width: 39.9375em) {
  .link-strzalka { border-radius: 1rem; font-size: .9688rem; padding: .75rem 1rem; }
}
.link-strzalka:hover svg { transform: translate(2px, -2px); }

.tekst-link { color: var(--miedz); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; font-weight: 600; }
.tekst-link:hover { text-decoration-thickness: 2px; }

.sekcja__h2 {
  font-family: var(--szeryf); font-weight: 400; font-variation-settings: "SOFT" 30;
  font-size: clamp(2rem, 1.15rem + 2.5vw, 3.25rem); line-height: 1.08; letter-spacing: -.012em;
  text-wrap: balance;
}

/* overflow: clip (nie hidden): ramka nie jest wtedy kontenerem przewijania, wiec os view() paralaksy idzie za
   przewijaniem strony (B-K07; z hidden postep stal na 0,5, translate 0); zaokraglenie rogow dziala tak samo */
.ramka { position: relative; margin: 0; border-radius: var(--promien-xl); overflow: hidden; overflow: clip; background: var(--brzoskwinia); isolation: isolate; }
.ramka img { position: absolute; left: 0; top: -3%; width: 100%; height: 106%; object-fit: cover; transition: scale 1.2s var(--ease); }
.ramka::after {
  content: ""; position: absolute; inset: .75rem; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: calc(var(--promien-xl) - .55rem);
}
.ramka:hover img { scale: 1.03; }

/* plywajace ksztalty tla: radialne plamy o bardzo niskim kontrascie, w kontenerze z overflow hidden;
   maska wygasza plamy przy krawedzi sekcji, zeby przyciecie plamy nie rysowalo poziomego "szwu" (widoczny przy 2560) */
.tlo-plamy {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
}
.hero .tlo-plamy {    /* gora hero styka sie z naglowkiem: wygaszamy tylko dol */
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.plama { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--k), rgba(247, 239, 228, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .plama { animation: dryf var(--t, 24s) ease-in-out infinite alternate; }
}
@keyframes dryf {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--dx, 4%), var(--dy, 6%)) scale(1.08); }
  100% { transform: translate(calc(var(--dx, 4%) * -.6), calc(var(--dy, 6%) * .8)) scale(.96); }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(1.25rem, 3.5vw, 3rem) clamp(5.5rem, 9vw, 8rem); overflow: clip; }
.hero .plama--1 { --k: rgba(242, 219, 188, .95); width: 52rem; height: 52rem; top: 0; right: 0; transform-origin: 70% 30%; translate: 34% -42%; --t: 26s; }
.hero .plama--2 { --k: rgba(228, 188, 152, .42); width: 34rem; height: 34rem; top: 46%; left: 0; translate: -38% 0; --t: 31s; --dx: 8%; --dy: -6%; }
.hero .plama--3 { --k: rgba(255, 255, 255, .85); width: 28rem; height: 28rem; top: 8%; left: 30%; --t: 21s; --dx: -6%; --dy: 8%; }
.hero__siatka { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.hero__powitanie {
  display: inline-flex; align-items: center; gap: .75rem;
  color: var(--miedz); font-weight: 650; font-size: 1rem; letter-spacing: .01em;
}
.hero__powitanie::before { content: ""; width: 2.25rem; height: 1.5px; background: currentColor; flex: none; }
.hero__h1 {
  margin: .9rem 0 1.4rem;
  font-family: var(--szeryf); font-weight: 340; font-variation-settings: "SOFT" 30;
  font-size: clamp(2.5rem, 1rem + 4.1vw, 4.3rem); line-height: 1.02; letter-spacing: -.018em;
  text-wrap: balance;
}
.hero__h1 .linia { display: block; }
/* B-K06: na telefonie lamanie H1 jest takie samo we Fraunces i w kroju zastepczym, wiec podmiana fontow nie dodaje
   ani nie zabiera wiersza (wczesniej hero skakalo o 26-41 px). Wiersz 1 "Adwokat Klodzko -" miesci sie zawsze
   (budzet 9em; zmierzone: Fraunces 8,25em, DejaVu Serif 8,75em), wiersz 2 zawsze w dwoch liniach (max-width 6.5em). */
@media (max-width: 29.9375em) {
  .hero__h1 { font-size: min(2.5rem, (100vw - 2 * var(--margines)) / 9); }
  .hero__h1 .linia + .linia { max-width: 6.5em; }
}
.akcent { font-style: italic; color: var(--miedz); font-weight: 330; }
.hero__lead { max-width: 34rem; font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); line-height: 1.6; color: var(--grafit); }
.hero__akcje { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.hero__adres { display: flex; align-items: flex-start; gap: .6rem; color: var(--grafit-2); font-size: .9688rem; line-height: 1.45; }
.hero__adres svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--miedz); }
.hero__adres span { display: block; }
.hero__foto { justify-self: center; width: min(100%, 960px); }
/* "zywe swiatlo dzienne": bardzo miekki, wolny refleks przesuwajacy sie po zdjeciu (zdjecie widoczne od poczatku) */
.hero__foto .ramka::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 246, 230, 0) 30%, rgba(255, 246, 230, .28) 46%, rgba(255, 246, 230, 0) 62%);
  mix-blend-mode: screen; transform: translateX(-110%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__foto .ramka::before { animation: swiatlo 15s ease-in-out 2.4s infinite; }
}
@keyframes swiatlo { 0% { transform: translateX(-110%); } 42%, 100% { transform: translateX(110%); } }
.hero__foto .ramka { aspect-ratio: 5 / 4; box-shadow: var(--cien); }
.hero__foto img { object-position: 35% 72%; }

@media (min-width: 60em) {
  .hero__siatka { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2.5rem, 4.5vw, 5rem); }
  .hero__foto { justify-self: end; }
  .hero__foto .ramka { aspect-ratio: 4 / 5; }
  .hero__foto img { object-position: 40% 60%; }
}
@media (max-width: 29.9375em) {
  .hero__akcje .przycisk { width: 100%; }
}

/* wejscie hero przy wczytaniu: samo przesuniecie (tekst caly czas widoczny), bramkowane klasa .js */
@media (prefers-reduced-motion: no-preference) {
  html.js .wejscie { animation: wejscie 1.1s var(--ease) both; animation-delay: var(--d, 0ms); }
}
@keyframes wejscie { from { translate: 0 1.6rem; } }

/* ---------- pas zaufania ---------- */
.zaufanie { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -6vw, -3rem); }
.zaufanie__karta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; align-items: center;
  background: var(--biel); border-radius: var(--promien-xl); box-shadow: var(--cien);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.2vw, 2.5rem);
}
.zaufanie__odznaki { display: flex; gap: .5rem; }
.zaufanie__odznaki a { display: block; border-radius: 1rem; transition: transform .45s var(--ease); }
.zaufanie__odznaki a:hover { transform: translateY(-3px) rotate(-4deg); }
.zaufanie__odznaki a + a:hover { transform: translateY(-3px) rotate(4deg); }
.zaufanie__odznaki img { width: clamp(5.25rem, 4rem + 3vw, 7rem); max-width: 180px; aspect-ratio: 1; }
.zaufanie__tekst { color: var(--grafit-2); font-size: 1rem; line-height: 1.6; max-width: 52rem; }
.zaufanie__opis { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 40em) {
  .zaufanie__karta { grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 2.5rem; }
}


/* ---------- O kancelarii ---------- */
.o-nas { position: relative; padding-block: var(--rytm); }
.o-nas__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 3rem); align-items: center; }
.o-nas__foto { width: min(100%, 960px); justify-self: center; }
.o-nas__foto .ramka { aspect-ratio: 4 / 3; box-shadow: var(--cien-s); }
.o-nas__foto img { object-position: 50% 70%; }
.o-nas__h2 { display: grid; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.o-nas__h2-gora { font-family: var(--grotesk); font-size: 1rem; font-weight: 650; color: var(--miedz); letter-spacing: .01em; }
.o-nas__h2-dol {
  font-family: var(--szeryf); font-weight: 380; font-variation-settings: "SOFT" 30;
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em;
}
.o-nas__list {
  font-family: var(--szeryf); font-variation-settings: "SOFT" 30; font-weight: 400;
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); line-height: 1.62; color: var(--grafit);
}
.zakreslenie {
  background-image: linear-gradient(var(--zakreslacz), var(--zakreslacz));
  background-repeat: no-repeat; background-size: 100% .5em; background-position: 0 86%;
  padding-inline: .06em; border-radius: .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.podpis {
  display: block; width: min(19rem, 78%); aspect-ratio: 3072 / 414; margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  background: var(--grafit);
  -webkit-mask: url("img/podpis.svg") no-repeat 0 50% / contain; mask: url("img/podpis.svg") no-repeat 0 50% / contain;
}
.o-nas__oferta { color: var(--grafit-2); max-width: 36rem; padding-top: 1.25rem; border-top: 1px solid var(--linia); }

@media (min-width: 60em) {
  .o-nas__siatka { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(3rem, 6vw, 6.5rem); }
  .o-nas__foto .ramka { aspect-ratio: 4 / 5; }
}

/* ---------- Zakres (bento) ---------- */
.zakres { position: relative; padding-block: var(--rytm); background-color: var(--piasek-2); background-image: url("img/ziarno.png"); }
.zakres__glowa { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.875rem, 1.5vw, 1.25rem); }
.bento__lista { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: inherit; }
.bento__bok { display: grid; grid-template-columns: minmax(0, 1fr); gap: inherit; }

.kafel {
  --t-hover: transform .45s var(--ease), box-shadow .45s var(--ease);
  position: relative; display: flex; flex-direction: column;
  background: var(--biel); border-radius: var(--promien); box-shadow: var(--cien-s);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  transition: var(--t-odslon, translate 0s), var(--t-hover);
}
.kafel:hover { transform: translateY(-5px); box-shadow: var(--cien); }
.kafel__tresc { margin-top: 1.25rem; }
/* znacznik pozycji: miedziana kreska (echo wypunktowania "- " oryginalu), bez tekstu. Numery 01-04 byly naszym
   napisem spoza listy zamknietej i sugerowaly kolejnosc, ktorej w oryginale nie ma (B-K08). */
.bento__lista .kafel::before {
  content: ""; flex: none; align-self: flex-start; width: 2.5rem; height: 2px; margin-top: .35rem;
  border-radius: 2px; background: var(--miedz); transition: width .45s var(--ease);
}
.bento__lista .kafel:hover::before { width: 4rem; }
/* B-K04: pozycja z samym tytulem ("sporzadzanie opinii prawnych,") = niski pasek na cala szerokosc, kreska i tytul
   w jednym wierszu; 03 i 04 stoja obok siebie. Zadnej pustej plamy nad tytulem. */
.kafel--pasek { flex-direction: row; align-items: center; gap: 1.25rem; }
.bento__lista .kafel--pasek::before { align-self: center; margin-top: 0; }
.kafel--pasek .kafel__tresc { margin-top: 0; }
.kafel--pasek h3 { margin: 0; }
.kafel h3 {
  margin: 0 0 .65rem;
  font-family: var(--szeryf); font-weight: 420; font-variation-settings: "SOFT" 30;
  font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); line-height: 1.18; letter-spacing: -.01em;
}
.kafel p { color: var(--grafit-2); }
.kafel--duzy h3 { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem); }

.kafel--foto { padding: 0; min-height: 17rem; overflow: hidden; background: var(--brzoskwinia); }
.kafel--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: scale 1.2s var(--ease); }
.kafel--foto:hover img { scale: 1.04; }
.kafel--foto::after {
  content: ""; position: absolute; inset: .75rem; border: 1px solid rgba(255, 255, 255, .6);
  border-radius: calc(var(--promien) - .5rem); pointer-events: none;
}

.kafel--dziedziny { background: var(--brzoskwinia); box-shadow: none; }
.kafel--dziedziny h3 { margin-bottom: 1rem; }
.chipy { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chipy li {   /* promien 1.1rem: pojedynczy wiersz dalej jest pigulka, dwuwierszowy chip to zaokraglony prostokat */
  padding: .45rem .9rem; border-radius: 1.1rem; text-wrap: balance; background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(130, 67, 15, .18); font-size: .9375rem; font-weight: 550; line-height: 1.35; color: var(--grafit);
  transition: background-color .25s, transform .35s var(--ease);
}
.chipy li:hover { background: var(--biel); transform: translateY(-2px); }

@media (min-width: 40em) {
  .bento__lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bento__lista .kafel:not(.kafel--pasek) { min-height: 13.5rem; }
  .kafel--szeroki { grid-column: 1 / -1; }
}
@media (min-width: 48em) and (max-width: 63.9375em) {
  .bento__bok { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .bento { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bento__bok { grid-template-rows: minmax(17rem, 1fr) auto; }
}

/* ---------- Kroki (porady przez internet) ---------- */
.kroki { position: relative; padding-block: var(--rytm); overflow: clip; }
.kroki .plama--1 { --k: rgba(242, 219, 188, .8); width: 44rem; height: 44rem; top: 20%; right: 0; translate: 40% 0; --t: 28s; }
.kroki .plama--2 { --k: rgba(255, 255, 255, .8); width: 30rem; height: 30rem; top: 0; left: 0; translate: -30% -20%; --t: 23s; --dx: 6%; --dy: 10%; }
.kroki__siatka { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
.nowosc {
  display: inline-block; padding: .35rem .85rem; border-radius: 999px;
  background: var(--miedz); color: var(--biel); font-weight: 750; font-size: .875rem; letter-spacing: .06em;
}
.kroki__h2 { margin-top: 1rem; font-size: clamp(1.85rem, 1.1rem + 2.1vw, 2.9rem); line-height: 1.12; letter-spacing: .005em; }
.kroki__foto { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.kroki__foto .ramka { aspect-ratio: 5 / 4; box-shadow: var(--cien-s); }
.kroki__foto img { object-position: 50% 78%; }

.os {
  --postep: 1; --wezel: clamp(3rem, 2.2rem + 2.4vw, 3.9rem); --odstep: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  position: relative; list-style: none; counter-reset: krok;
}
.os::before, .os::after {
  content: ""; position: absolute; left: calc(var(--wezel) / 2 - 1px);
  top: var(--os-gora, calc(.9rem + var(--wezel) / 2)); height: var(--os-wys, calc(100% - 7rem));
  width: 2px; border-radius: 2px; background: var(--linia);
}
.os::after { background: var(--miedz); transform-origin: 50% 0; transform: scaleY(var(--postep)); }
.os__krok {
  position: relative; display: grid; grid-template-columns: var(--wezel) minmax(0, 1fr); column-gap: var(--odstep);
  counter-increment: krok; padding-bottom: clamp(1.25rem, 3.2vw, 3.25rem);
}
.os__krok:last-child { padding-bottom: 0; }
.os__krok::before {
  content: counter(krok);
  grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 1; margin-top: .9rem;
  display: grid; place-items: center; width: var(--wezel); height: var(--wezel); border-radius: 50%;
  background: var(--miedz); color: var(--biel); border: 2px solid var(--miedz);
  font-family: var(--szeryf); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1;
  transition: background-color .45s, color .45s, border-color .45s, transform .6s var(--ease);
}
.os--ruch .os__krok:not(.aktywny)::before { background: var(--biel); color: var(--miedz); border-color: var(--linia); transform: scale(.88); }
.os__karta {
  grid-column: 2; grid-row: 1;
  background: var(--biel); border-radius: var(--promien); box-shadow: var(--cien-s);
  padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.6vw, 2.1rem);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6;
  transition: var(--t-odslon, translate 0s), box-shadow .45s var(--ease);
}
.os__krok.aktywny .os__karta { box-shadow: var(--cien); }

@media (min-width: 60em) {
  .kroki__siatka { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(3rem, 6vw, 6rem); }
  .kroki__bok { position: sticky; top: 7rem; }
  .os { margin-top: 3.25rem; }
}

/* ---------- Kontakt (karta lokalizacji) ---------- */
.kontakt { position: relative; padding-block: var(--rytm) calc(var(--rytm) * 1.05); overflow: clip; }
.kontakt .plama--1 { --k: rgba(242, 219, 188, .75); width: 40rem; height: 40rem; top: 0; left: 0; translate: -35% -10%; --t: 27s; }
.kontakt__karta {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--biel); border-radius: var(--promien-xl); box-shadow: var(--cien); overflow: hidden;
}
.kontakt__tekst { padding: clamp(1.75rem, 4.5vw, 3.75rem); display: flex; flex-direction: column; gap: 1.25rem; }
.kontakt__h2 { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.25rem); font-style: italic; font-weight: 330; color: var(--miedz); line-height: 1; }
.kontakt__lead { font-family: var(--szeryf); font-variation-settings: "SOFT" 30; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.45; max-width: 30rem; }
.kontakt__adres {
  display: flex; gap: .85rem; align-items: flex-start; margin-top: .5rem;
  padding: 1.1rem 1.25rem; border-radius: var(--promien); background: var(--piasek);
  font-size: 1.0625rem; line-height: 1.6;
}
.kontakt__adres svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--miedz); }
.kontakt__adres a { color: var(--miedz); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.kontakt__mapa { position: relative; min-height: 20rem; overflow: hidden; background: var(--piasek-2); }
.kontakt__mapa-link { position: absolute; inset: 0; display: block; }
.kontakt__mapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: scale 1.2s var(--ease); }
.kontakt__mapa-link:hover img { scale: 1.04; }
.kontakt__mapa-link:focus-visible { outline-offset: -6px; }
/* B-K05: atrybucja ODbL tekstem w DOM, poza linkiem mapy (w obrazie ucinal ja object-fit: cover);
   link OSM ma >= 24 px wysokosci (WCAG 2.5.8), tlo 88% bieli: grafit-2 na nim > 5:1 nad kazdym fragmentem mapy */
.kontakt__osm {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
  padding: 0 .55rem; border-radius: .4rem; background: rgba(255, 255, 255, .88);
  color: var(--grafit-2); font-size: .75rem; font-weight: 500; line-height: 1.35;
}
.kontakt__osm a { display: inline-block; padding-block: .3rem; color: inherit; text-underline-offset: .15em; }
@media (min-width: 56em) {
  .kontakt__karta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .kontakt__mapa { min-height: 100%; }
}

/* ---------- stopka ---------- */
.stopka { background: var(--espresso); color: var(--krem); padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.1rem; }
.stopka a { color: var(--krem); }
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.stopka__napis {
  display: block; width: min(23rem, 100%); aspect-ratio: 3072 / 744; background: var(--krem);
  -webkit-mask: url("img/napis.svg") no-repeat 0 50% / contain; mask: url("img/napis.svg") no-repeat 0 50% / contain;
}
/* justify-items: start - link telefonu mial szerokosc calej kolumny i kreske pod pustym miejscem (361 px przy 183 px tekstu) */
.stopka__dane { display: grid; justify-items: start; gap: .35rem; color: var(--krem-2); line-height: 1.6; }
.stopka__dane a { text-decoration: none; border-bottom: 1px solid rgba(243, 232, 218, .35); transition: border-color .25s, color .25s; }
.stopka__dane a:hover { color: var(--miedz-noc); border-color: currentColor; }
.stopka__tel { font-family: var(--szeryf); font-size: 1.5rem; color: var(--krem); }
/* cele dotyku w stopce: menu i Facebook >= 44 px wysokosci (bylo 28-34 px) */
.stopka nav ul { list-style: none; display: grid; gap: 0; }
.stopka nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; transition: color .25s, transform .35s var(--ease); }
.stopka nav a:hover { color: var(--miedz-noc); transform: translateX(4px); }
.stopka__fb { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-top: .75rem; text-decoration: none; font-weight: 600; }
.stopka__fb svg { width: 1.5rem; height: 1.5rem; color: var(--miedz-noc); }
.stopka__fb:hover { color: var(--miedz-noc); }
.stopka__dol {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: .85rem; border-top: 1px solid rgba(243, 232, 218, .14);
  display: flex; justify-content: flex-end; font-size: .875rem; color: var(--krem-2);
}
.stopka__dol a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--krem-2); text-decoration: none; }
.stopka__dol a:hover { color: var(--krem); text-decoration: underline; }
@media (min-width: 56em) {
  .stopka__siatka { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .8fr); }
}

/* ---------- odslanianie przy przewijaniu: SAMO przesuniecie, klase .czeka dokleja app.js
   tylko elementom ponizej ekranu przy wczytaniu; bez JS / reduced-motion = brak ruchu ---------- */
[data-odslon] { --t-odslon: translate .95s var(--ease) calc(var(--i, 0) * 90ms); }
[data-odslon]:not(.kafel):not(.os__karta) { transition: var(--t-odslon); }
.czeka { translate: 0 2.5rem; }
.kafel.czeka { translate: 0 3.25rem; }
.os__karta.czeka { translate: 2rem 0; }
.zakreslenie { transition: background-size 1s var(--ease) calc(.25s + var(--i, 0) * 140ms); }
.zakreslenia-czekaja .zakreslenie { background-size: 0 .5em; }
.podpis { transition: clip-path 1.5s cubic-bezier(.65, .05, .36, 1) .2s; clip-path: inset(0 0 0 0); }
.podpis.czeka-podpis { clip-path: inset(0 100% 0 0); }

/* paralaksa zdjec przy przewijaniu (tylko przegladarki z scroll-driven animations; translate, bez skalowania) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .paralaksa img { animation: paralaksa linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes paralaksa { from { translate: 0 -2.6%; } to { translate: 0 2.6%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ==========================================================================================================
   PODSTRONY (09.10.2026): Zakres uslug, Dziedziny prawa, Kontakt. Ten sam naglowek, szuflada, stopka i tokeny co
   strona glowna; zamiast okladki nizsze pasmo z H1; typografia i rytm (linie z miedzianym poczatkiem = echo
   wypunktowania "- " oryginalu) zamiast kart, chipow i pigulek. Ruch jak na stronie glownej: wejscie pasma samym
   przesunieciem, reszta [data-odslon]; zdjecia bez animacji wejscia (tylko paralaksa); plamy tla stoja (bez petli).
   Ponizsze reguly dotycza tylko klas podstron: wyglad strony glownej sie nie zmienia.
   ========================================================================================================== */

/* plamy tla na podstronach stoja: zadnej animacji bez konca (WCAG 2.2.2, uwaga sedziow) */
.tlo-plamy--stale .plama { animation: none; }

/* ---------- pasmo z H1 (nizsze niz okladka strony glownej) ---------- */
.pasmo { position: relative; padding-top: clamp(2.5rem, 5.5vw, 5.25rem); overflow: clip; }
.pasmo .tlo-plamy {   /* gora pasma styka sie z naglowkiem: wygaszamy tylko dol */
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.pasmo .plama--1 { --k: rgba(242, 219, 188, .9); width: 44rem; height: 44rem; top: 0; right: 0; translate: 28% -46%; }
.pasmo .plama--2 { --k: rgba(255, 255, 255, .8); width: 26rem; height: 26rem; top: 0; left: 0; translate: -30% -30%; }
.pasmo__siatka {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--linia);
}
.pasmo__h1 {
  font-family: var(--szeryf); font-weight: 340; font-variation-settings: "SOFT" 30;
  font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.25rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance;
}
.pasmo__h1::before {   /* miedziana kreska bez tekstu, jak przy powitaniu na stronie glownej */
  content: ""; display: block; width: 2.25rem; height: 1.5px; margin-bottom: clamp(1rem, 2vw, 1.5rem); background: var(--miedz);
}
.pasmo__wstep {
  max-width: 34rem; font-family: var(--szeryf); font-variation-settings: "SOFT" 30; font-weight: 400;
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); line-height: 1.55; color: var(--grafit); text-wrap: pretty;
}
.pasmo__akcje { display: grid; justify-items: start; gap: 1rem; }
.pasmo--kontakt .przycisk { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); padding-right: 1.9rem; }
.pasmo--kontakt .przycisk__ikona { width: 3.25rem; height: 3.25rem; }
.pasmo__mail, .pas-kontaktu__mail { font-size: 1.0625rem; line-height: 1.5; }
.pasmo__mail { color: var(--grafit-2); }
.pasmo__mail a, .pas-kontaktu__mail a {
  display: inline-block; padding-block: .15rem; font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.pasmo__mail a { color: var(--miedz); }
.pasmo__mail a:hover, .pas-kontaktu__mail a:hover { text-decoration-thickness: 2px; }
@media (min-width: 60em) {
  .pasmo__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pasmo__wstep, .pasmo__akcje { justify-self: end; }
}
@media (max-width: 29.9375em) {
  .pasmo__akcje, .pasmo__akcje .przycisk { width: 100%; }
}
/* wejscie pasma krotsze niz okladki (0,9 s); zakreslenie we wstepie rysuje sie raz przy wczytaniu (bez JS: stoi) */
@media (prefers-reduced-motion: no-preference) {
  html.js .pasmo .wejscie { animation-duration: .9s; }
  html.js .pasmo .zakreslenie { animation: zakresl .9s var(--ease) .45s both; }
}
@keyframes zakresl { from { background-size: 0 .5em; } }

/* ---------- sekcje podstron ---------- */
.sekcja { position: relative; padding-block: var(--rytm); }
.sekcja--po-pasmie { padding-top: clamp(2.75rem, 5.5vw, 5rem); }
.sekcja--pas { background-color: var(--piasek-2); background-image: url("img/ziarno.png"); }

/* tresc + zdjecie z boku (Zakres uslug, Dziedziny prawa); na telefonie zdjecie w kadrze 4:3 (Zakres uslug: zaraz pod pasmem) */
.uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }
.uklad__foto { order: -1; }
.uklad__foto--ksiegi { order: 0; }   /* Dziedziny prawa: wstep konczy sie dwukropkiem, lista idzie zaraz po nim, zdjecie po liscie */
.uklad__foto .ramka { aspect-ratio: 4 / 3; box-shadow: var(--cien-s); }
.uklad__foto--teczka img { object-position: 42% 80%; }
.uklad__foto--ksiegi img { object-position: 60% 66%; }
/* naglowki sekcji podstron to dlugie zdania oryginalu ("... oferujemy m.in.:"): stopien nizszy niz krotkie H2 strony glownej */
.sekcja__h2--zdanie { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem); line-height: 1.12; }
.uklad__h2 { max-width: 40rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 60em) {
  .uklad { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .uklad__foto { order: 0; position: sticky; top: 7rem; }
  .uklad__foto .ramka { aspect-ratio: 4 / 5; }
  .uklad__foto img { object-position: 50% 50%; }
}

/* lista z liniami: miedziany poczatek linii = echo wypunktowania "- " oryginalu (bez tekstu), jak kreska kart */
.spis { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linia); }
.spis > li {
  position: relative; padding-block: clamp(1.05rem, 2vw, 1.45rem) clamp(1.15rem, 2.2vw, 1.6rem); border-top: 1px solid var(--linia);
  font-family: var(--szeryf); font-variation-settings: "SOFT" 30; font-weight: 400;
  font-size: clamp(1.3rem, 1.12rem + .55vw, 1.625rem); line-height: 1.3; letter-spacing: -.006em; text-wrap: pretty;
}
.spis > li::before, .opisy > li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 2px; border-radius: 2px;
  background: var(--miedz); transition: width .45s var(--ease);
}
.spis > li:hover::before, .opisy > li:hover::before { width: 4rem; }
.spis--dziedziny .spis__nazwa { display: block; font-size: clamp(1.45rem, 1.15rem + .85vw, 2rem); line-height: 1.2; }
.spis__opis {
  display: block; max-width: 38rem; margin-top: .45rem;
  font-family: var(--grotesk); font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; color: var(--grafit-2);
}

/* uslugi dla podmiotow gospodarczych: dlugie pozycje z wyroznionym poczatkiem (ten sam tekst, inny krój) */
/* naglowek na cala szerokosc, pod nim dwie pozycje obok siebie (od 960 px): inny rytm niz sekcja ze zdjeciem wyzej */
.firmy { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.75rem); }
.firmy__h2 { max-width: 58rem; }
.opisy { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5rem); }
.opisy > li { position: relative; padding-block: clamp(1.25rem, 2.4vw, 1.9rem); border-top: 1px solid rgba(130, 67, 15, .16); }
@media (min-width: 60em) {
  .opisy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.opisy p { max-width: 42rem; color: var(--grafit-2); font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.72; }
.opisy__glowa {   /* line-height 1: wiekszy krój nie podnosi pierwszego wiersza */
  font-family: var(--szeryf); font-variation-settings: "SOFT" 30; font-weight: 450;
  font-size: 1.32em; line-height: 1; letter-spacing: -.008em; color: var(--grafit);
}

/* ---------- pas kontaktu na koncu podstron: napisy klientki + telefon i e-mail ---------- */
.pas-kontaktu { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); background-color: var(--brzoskwinia); background-image: url("img/ziarno.png"); }
.pas-kontaktu__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; }
.pas-kontaktu__h2 {
  font-family: var(--szeryf); font-style: italic; font-weight: 330; font-variation-settings: "SOFT" 30;
  font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.25rem); line-height: 1; letter-spacing: -.01em; color: var(--miedz-ciemna);
}
.pas-kontaktu__tekst { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
.pas-kontaktu__wstep {
  max-width: 30rem; font-family: var(--szeryf); font-variation-settings: "SOFT" 30;
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); line-height: 1.5; color: var(--grafit);
}
.pas-kontaktu__akcje { display: grid; justify-items: start; gap: 1rem; }
.pas-kontaktu__mail { color: var(--grafit); }
.pas-kontaktu__mail a { color: var(--miedz-ciemna); }
@media (min-width: 48em) {
  .pas-kontaktu__siatka { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 29.9375em) {
  .pas-kontaktu__akcje, .pas-kontaktu__akcje .przycisk { width: 100%; }
}

/* ---------- Kontakt: dane + mapa statyczna ---------- */
.kontakt-strona { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem) clamp(3rem, 6vw, 6rem); align-items: center; }
@media (min-width: 60em) {
  .kontakt-strona { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.kontakt-strona__tekst { display: grid; justify-items: start; gap: clamp(1rem, 2vw, 1.4rem); }
.kontakt-strona__h2 { display: grid; gap: .5rem; margin-bottom: .25rem; }
.kontakt-strona__h2-gora { font-family: var(--grotesk); font-size: 1rem; font-weight: 650; letter-spacing: .01em; color: var(--miedz); }
.kontakt-strona__h2-dol {
  font-family: var(--szeryf); font-weight: 380; font-variation-settings: "SOFT" 30;
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance;
}
.kontakt-strona__adres { display: flex; align-items: flex-start; gap: .7rem; font-size: 1.125rem; line-height: 1.5; }
.kontakt-strona__adres svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1rem; color: var(--miedz); }
.kontakt-strona__adres > span > span { display: block; }
.kontakt-strona__wstep {
  max-width: 30rem; font-family: var(--szeryf); font-variation-settings: "SOFT" 30;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.45;
}
.kontakt-strona__url { display: inline-block; padding-block: .15rem; overflow-wrap: anywhere; }
.kontakt-strona__mapa {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--promien-xl); overflow: hidden; overflow: clip;
  background: var(--piasek-2); box-shadow: var(--cien); isolation: isolate;
}
.kontakt-strona__mapa-link { position: absolute; inset: 0; display: block; }
.kontakt-strona__mapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.kontakt-strona__mapa-link:hover img { scale: 1.04; }
.kontakt-strona__mapa-link:focus-visible { outline-offset: -6px; }