/* VERTO — arkusz stron publicznych.
   Wyciągnięty z jednoplikowej wersji strony, żeby wszystkie podstrony dzieliły
   jeden, raz pobrany plik. Fonty serwujemy z własnego serwera: dwa mniej
   połączeń do obcych domen przed pierwszym renderem i CSP bez wyjątków. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--navy:#0F2A52;
--navy-deep:#07172F;
/* Granat o stopień jaśniejszy od podstawowego. Był wpisany na sztywno
   w gradiencie karty asystenta jako surowy hex — jedyna wartość barwna
   w tym pliku poza blokiem tokenów. */
--navy-mid:#123A63;
--ink:#101720;
--bone:#F5F2EC;
--bone-2:#EBE6DC;
--paper:#FFFFFF;
--brass:#9C7440;
--brass-soft:#C4A375;
/* Ten sam mosiądz, przyciemniony do progu czytelności. --brass przy 11-13 px
   daje 3,78:1 na --bone, czyli poniżej AA dla małego tekstu; --brass-deep daje
   5,4:1 na --bone i 4,9:1 na --bone-2. Używamy go wszędzie tam, gdzie mosiądz
   niesie drobny tekst (nadtytuły sekcji, numery, liczniki) — duże elementy
   dekoracyjne zostają na --brass i --brass-soft. */
--brass-deep:#7D5C2C;
/* Przyciemniony o ~3 pkt jasności przy zachowanej barwie: na --bone-2
   (sekcje „O nas” i pytania) poprzednia wartość dawała 4,45:1, tuż pod progiem
   AA. Teraz 5,04:1 na tincie i 5,61:1 na bone. */
--muted:#63605A;
/* Dwa stopnie tekstu drugorzędnego (akapity, odpowiedzi, zgody) i barwa błędu —
   wcześniej wpisane na sztywno w kilkunastu miejscach, więc każda z nich mogła
   się rozjechać osobno. */
--ink-2:#2C3239;
--ink-3:#3A4048;
--danger:#A3423A;
--danger-soft:#C4695F;
--danger-light:#E8A49C;
--line:rgba(16,23,32,.13);
--line-soft:rgba(16,23,32,.07);
--line-light:rgba(255,255,255,.18);
--font-display:'Newsreader',Georgia,'Times New Roman',serif;
--font-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
/* Skala o jeden stopień niższa niż pierwotna. Poprzednia była kalibrowana
   pod jedną ofertę na całą stronę — przy sześciu kaflach, liście usług
   i pytaniach te same rozmiary zaczynały krzyczeć. Proporcje zostały (1,25),
   zmieniła się podstawa i sufit. */
--step--2:clamp(.66rem,.648rem + .05vw,.7rem);
--step--1:clamp(.78rem,.762rem + .08vw,.83rem);
--step-0:clamp(.95rem,.928rem + .13vw,1rem);
--step-1:clamp(1.05rem,1.005rem + .24vw,1.22rem);
--step-2:clamp(1.3rem,1.16rem + .62vw,1.7rem);
--step-3:clamp(1.68rem,1.4rem + 1.28vw,2.5rem);
--step-4:clamp(2.05rem,1.6rem + 2.2vw,3.4rem);
--step-5:clamp(2.3rem,1.35rem + 4.1vw,4.5rem);
/* Tekst elementów sterujących: przyciski, pozycje paska, zakładki, pola filtrów.
   step--1 (ok. 13 px) był stopniem podpisów, nie rzeczy do klikania — przy tej
   samej skali reszty strony przyciski czytały się jak drobny druk. */
--ui:clamp(.82rem,.79rem + .14vw,.9rem);
--ease-out:cubic-bezier(.23,1,.32,1);
--shadow-1:0 1px 2px rgba(15,42,82,.06),0 4px 14px rgba(15,42,82,.05);
--shadow-2:0 2px 6px rgba(15,42,82,.08),0 18px 44px -12px rgba(15,42,82,.18);
--gutter:clamp(1.15rem,3.6vw,3.75rem);
/* Wysokość paska nawigacji w jednym miejscu: odwołuje się do niej wcięcie
   kotwic, zapas pod paskiem i przyklejony nagłówek pytań. */
--nav-h:clamp(56px,5.4vw,68px);
/* Szerokość kolumny treści. Blok ceny na stronie oferty liczy z niej swoje
   wcięcie, żeby cena stała w tej samej pionowej linii co reszta strony —
   wcześniej miał tam wpisane 1440 px przy kontenerze 1320 px i na szerokich
   ekranach uciekał o ok. 60 px w prawo. */
--wrap-max:1320px;
--r-sm:10px;
--r-md:14px;
--r-lg:20px;
--r-xl:26px;
}
*{box-sizing:border-box}
/* Strona ma jeden wariant: jasny. Bez tej deklaracji przeglądarka
   w systemowym trybie ciemnym maluje po swojemu pola formularzy, listy
   rozwijane, paski przewijania i tło autouzupełnienia — ciemne kontrolki
   na kremowym papierze. */
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
margin:0;
background:var(--bone);
color:var(--ink);
font-family:var(--font-sans);
font-size:var(--step-0);
line-height:1.7;
font-feature-settings:'kern' 1,'liga' 1;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body::before{
content:'';
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
opacity:.55;
background-image:radial-gradient(circle at 1px 1px,rgba(16,23,32,.05) 1px,transparent 0);
background-size:3px 3px;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy);color:var(--bone)}
/* Powierzchnie, których nie rysujemy sami, a które i tak niosą paletę:
   pasek przewijania i kursor tekstowy w polach. */
html{scrollbar-color:rgba(15,42,82,.38) var(--bone)}
input,textarea{caret-color:var(--navy)}
.wrap{width:100%;max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.eyebrow{
font-size:var(--step--2);
letter-spacing:.22em;
text-transform:uppercase;
font-weight:500;
color:var(--muted);
display:flex;
align-items:center;
gap:.7em;
}
.eyebrow::before{content:'';width:1.9em;height:1px;background:var(--brass);flex:none}
.eyebrow--light{color:rgba(245,242,236,.7)}
.eyebrow--light::before{background:var(--brass-soft)}
.lede{font-size:var(--step-1);line-height:1.62;max-width:60ch;color:var(--ink);text-wrap:pretty}
.prose{max-width:64ch;color:var(--ink-2);text-wrap:pretty}
.prose p + p{margin-top:1.15em}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:var(--bone);padding:.8rem 1.2rem}
.skip:focus{left:1rem;top:1rem}


.nav{position:fixed;top:0;left:0;right:0;z-index:70;opacity:0;pointer-events:none;transform:translateY(-10px);transition:background-color 320ms var(--ease-out),box-shadow 320ms var(--ease-out),opacity 340ms var(--ease-out),transform 340ms var(--ease-out)}
.nav[data-stuck='true']{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity 320ms var(--ease-out)}
.nav[data-stuck='true']{background:rgba(245,242,236,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.nav[data-stuck='true']::after{opacity:1}
.brand{display:flex;align-items:center;gap:.75rem}
/* Znak marki: jeden plik od klienta w każdym rozmiarze. <picture> jest inline,
   więc bez display:block ramka i cień siadałyby na linii bazowej tekstu. */
.brand__mark,.ai__fab-mark,.ai__head-mark{display:block;flex:none;border-radius:50%}
.brand__mark img,.ai__fab-mark img,.ai__head-mark img{width:100%;height:100%;display:block;border-radius:50%}
.brand__mark{width:34px;height:34px;box-shadow:0 0 0 1px rgba(15,42,82,.18)}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-size:1.12rem;letter-spacing:.16em;color:var(--navy)}
.brand__sub{font-size:.58rem;letter-spacing:.26em;color:var(--muted);text-transform:uppercase;margin-top:.26rem}
.nav__links{display:none;gap:clamp(1.3rem,2.4vw,2.6rem);align-items:center}
.nav__links a{font-size:var(--ui);letter-spacing:.03em;color:var(--ink-3);position:relative;padding-block:.35rem}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
.nav__links a[aria-current='true']{color:var(--navy)}
.nav__links a[aria-current='true']::after,.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:none}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6em;
/* Wysokość, nie samo wypełnienie: przy step--1 (~13 px) poprzednie .62em dawało
   przycisk ok. 38 px, poniżej minimum wygodnego kliknięcia kciukiem. */
padding:.7em 1.55em;
min-height:44px;
font-family:var(--font-sans);
font-size:var(--ui);
font-weight:500;
letter-spacing:.02em;
border-radius:999px;
border:1px solid transparent;
background:transparent;
cursor:pointer;
transition:transform 180ms var(--ease-out),background-color 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}}
/* Przycisk w trakcie wysyłki formularza ma wyglądać na wyłączony, a nie tylko
   przestać reagować — inaczej klikający nie wie, czy zadziałało. */
.btn:disabled,.btn[aria-disabled='true']{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn--solid{background:var(--navy);color:var(--bone);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.09)}
.btn--solid:hover{background:var(--navy-deep);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.12)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--navy);background:rgba(15,42,82,.05)}
/* Jasny przycisk na zdjęciu: bez cienia w spoczynku uniesienie na hover nie ma
   czego pogłębić i ruch czyta się jak drgnięcie, nie jak reakcja. */
.btn--light{background:var(--bone);color:var(--navy);box-shadow:var(--shadow-1)}
.btn--light:hover{background:var(--paper);box-shadow:var(--shadow-2)}
/* Obramowanie na 18% krycia ginęło na każdym jaśniejszym kadrze zdjęcia hero.
   Własne, lekko przyciemnione tło trzyma przycisk niezależnie od tego, co pod nim. */
.btn--outline-light{border-color:rgba(245,242,236,.5);color:var(--bone);background:rgba(7,23,47,.22);backdrop-filter:blur(6px)}
.btn--outline-light:hover{border-color:rgba(245,242,236,.75);background:rgba(7,23,47,.34)}
.burger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;transition:transform 160ms var(--ease-out),border-color 200ms var(--ease-out),background-color 200ms var(--ease-out)}
.burger:active{transform:scale(.94)}
/* Grid z auto-wierszami rozciągał wiersze na całą wysokość przycisku i kreski
   rozjeżdżały się na 20 px — z bliska wyglądało to jak dwie przypadkowe kreski
   w pierścieniu, nie jak przycisk menu. Kolumna z jawnym odstępem trzyma je razem. */
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform 260ms var(--ease-out),opacity 180ms var(--ease-out)}
.menu{
position:fixed;
inset:0;
z-index:90;
background:var(--navy-deep);
background-image:
  radial-gradient(38rem 26rem at 108% -6%,rgba(196,163,117,.14),transparent 62%),
  radial-gradient(32rem 24rem at -14% 104%,rgba(15,42,82,.55),transparent 66%);
color:var(--bone);
display:flex;
flex-direction:column;
justify-content:space-between;
/* Poziomy margines daje .wrap w środku. Gdy stał też tutaj, treść menu miała
   dwa gutter-y i wisiała nienaturalnie daleko od lewej krawędzi, a przyklejony
   pasek u góry rysował tło węższe od ekranu. */
padding:1.1rem 0 calc(2rem + env(safe-area-inset-bottom));
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:opacity 300ms var(--ease-out),transform 340ms var(--ease-out),visibility 0s linear 340ms;
}
.menu[data-open='true']{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:clamp(64px,7vw,84px)}
.menu .brand__name{color:var(--bone)}
.menu .brand__sub{color:rgba(245,242,236,.55)}
.menu .brand__mark{box-shadow:0 0 0 1px rgba(245,242,236,.3)}
.menu__close{width:44px;height:44px;border-radius:999px;border:1px solid var(--line-light);background:rgba(245,242,236,.06);color:var(--bone);cursor:pointer;font-size:1.1rem;line-height:1;transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out)}
.menu__close:active{transform:scale(.94)}
/* Menu ma dwa poziomy i musi je pokazywać samą typografią, nie wcięciem.
   Wcześniej każda pozycja — działowa i podrzędna — dostawała ten sam krój,
   tę samą kreskę pod spodem i inne wcięcie, więc lewa krawędź szła schodkami,
   a lista czytała się jak spis treści. Teraz dział to szeryfowy nagłówek,
   podpozycje to bezszeryfowa kolumna przy mosiężnej szynie, a kreska oddziela
   działy — jedna na dział, nie jedna na wiersz. */
.menu__links{display:flex;flex-direction:column;gap:0}
.menu__links > a{
font-family:var(--font-display);
font-size:clamp(1.7rem,7.2vw,2.4rem);
letter-spacing:-.03em;
line-height:1.05;
padding-block:.42em .3em;
opacity:0;transform:translateY(14px);
}
.menu__links > a:not(:first-child){border-top:1px solid var(--line-light);padding-top:.62em}
.menu[data-open='true'] .menu__links > a{opacity:1;transform:translateY(0);transition:opacity 380ms var(--ease-out),transform 460ms var(--ease-out)}
.menu[data-open='true'] .menu__links > a:nth-child(1){transition-delay:60ms}
.menu[data-open='true'] .menu__links > a:nth-child(3){transition-delay:105ms}
.menu[data-open='true'] .menu__links > a:nth-child(5){transition-delay:150ms}
.menu[data-open='true'] .menu__links > a:nth-child(6){transition-delay:195ms}
.menu[data-open='true'] .menu__links > a:nth-child(7){transition-delay:240ms}

.menu__cta{justify-self:start;width:100%;margin-bottom:1.1rem}
.menu__foot{
position:relative;
display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
margin-top:1.2rem;padding-top:1.2rem;
font-size:var(--step--1);color:rgba(245,242,236,.72);
}
/* Kreska nad stopką menu musi kończyć się tam, gdzie kreski działów — border
   na .wrap objąłby też jego wewnętrzny margines i szedłby od krawędzi ekranu. */
.menu__foot::before{
content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);
height:1px;background:var(--line-light);
}
.menu__foot a:not(.btn){color:var(--bone)}
.menu__foot a:hover{color:var(--brass-soft)}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--navy-deep)}
.hero__media{position:absolute;inset:-8% 0 -8% 0;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:contrast(1.07) saturate(1.06) brightness(1.05)}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,18,38,.96) 0%,rgba(6,18,38,.8) 22%,rgba(6,18,38,.34) 52%,rgba(6,18,38,.12) 100%)}
.hero__brand{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(.4rem,1.5vh,1rem)}
.hero__brand .brand__mark{width:44px;height:44px;box-shadow:0 0 0 1px rgba(245,242,236,.34)}
.hero__brand .brand__name{color:var(--bone);font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.16em}
.hero__brand .brand__sub{color:rgba(245,242,236,.62);font-size:clamp(.55rem,.8vw,.68rem);letter-spacing:.34em}
.hero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(2rem,5.5vh,3.6rem);display:grid;gap:clamp(.7rem,1.8vh,1.15rem);justify-items:start}
.hero__title{color:var(--bone);font-size:var(--step-4);font-weight:300;max-width:16ch;text-wrap:balance;text-shadow:0 2px 30px rgba(4,12,26,.35)}
.hero__title em{font-style:italic;color:var(--brass-soft)}
.hero__lede{color:rgba(245,242,236,.82);font-size:var(--step-0);max-width:46ch;line-height:1.65}
.hero__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 1.15rem;color:var(--bone);font-variant-numeric:tabular-nums}
.hero__meta strong{font-family:var(--font-display);font-weight:300;font-size:var(--step-2);letter-spacing:-.03em}
.hero__meta strong span{font-size:.46em;color:var(--brass-soft);margin-left:.22em;letter-spacing:.04em}
.hero__meta span.sep{width:1px;height:1.1em;background:var(--line-light);align-self:center}
.hero__meta em{font-style:normal;font-size:var(--step--1);color:rgba(245,242,236,.62);letter-spacing:.06em}
.hero__title--brand{display:grid;gap:clamp(.3rem,1vh,.7rem);max-width:none;font-size:var(--step-5,var(--step-4));letter-spacing:.14em;text-transform:uppercase}
/* Podpis pod wordmarkiem stoi na zdjęciu, więc nie może być jednocześnie mały,
   mocno rozstrzelony i półprzezroczysty — przy .6 krycia znikał na jaśniejszych
   kadrach. (--font-body nie istniało w tokenach; poprawne jest --font-sans.) */
.hero__title--brand em{font-style:normal;font-family:var(--font-sans);font-size:clamp(.72rem,1.25vw,.95rem);letter-spacing:.28em;color:rgba(245,242,236,.92);text-shadow:0 1px 18px rgba(4,12,26,.6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem}

.facts{background:var(--paper);border-bottom:1px solid var(--line-soft);position:relative;z-index:2}
.facts__in{display:grid;gap:0}
.facts__price{
background:var(--navy);
color:var(--bone);
padding:clamp(1.6rem,3.5vw,2.6rem) var(--gutter);
display:flex;
flex-direction:column;
gap:.15rem;
}
.facts__price .label{font-size:var(--step--2);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,242,236,.6)}
/* `nowrap` trzyma kwotę i walutę w jednej linii, ale przy długiej cenie na
   telefonie nie ma jej gdzie zmieścić — rozpychała komórkę siatki, a skutek
   chował `body{overflow-x:hidden}`. Poniżej 640 px pozwalamy złamać wiersz
   (`balance` łamie go w sensownym miejscu), wyżej zostaje jak było. */
.facts__price strong{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.5rem);letter-spacing:-.035em;line-height:1.08;margin-top:.35rem;font-variant-numeric:tabular-nums;text-wrap:balance;display:block}
@media (min-width:640px){.facts__price strong{white-space:nowrap;text-wrap:auto}}
.facts__price strong span{font-size:.44em;letter-spacing:.02em;color:var(--brass-soft);margin-left:.18em}
.facts__price .sub{font-size:var(--step--1);color:rgba(245,242,236,.62);margin-top:.5rem}
.facts__list{display:grid;grid-template-columns:repeat(2,1fr)}
.facts__list div{padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,3vw,1.8rem);border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.facts__list dt{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts__list dd{margin:.3rem 0 0;font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.section{padding-block:clamp(3.25rem,6.4vw,5.75rem);position:relative}
section[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
.section--paper{background:var(--paper)}
.section--navy{background:var(--navy-deep);color:var(--bone)}
.section--tint{background:var(--bone-2)}
.section__head{display:grid;gap:clamp(.7rem,1.7vw,1.2rem);margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
.section__num{font-size:var(--step--2);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-deep);font-weight:500}
/* Na granacie przyciemniony mosiądz spada do 2,99:1 — tam pracuje jaśniejszy
   wariant tej samej barwy (7,46:1). */
.section--navy .section__num{color:var(--brass-soft)}
.section h2{font-size:var(--step-3);text-wrap:balance}
.section--navy h2{color:var(--bone)}
.section--navy .prose{color:rgba(245,242,236,.76)}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem)}
.split__aside{align-self:start}
.split__aside--fill{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;height:100%}
.split__aside--fill > a.btn{align-self:flex-start}
.meta{display:grid;gap:.9rem;margin-top:2rem;font-size:var(--step--1)}
.meta div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line)}
.meta dt{color:var(--muted);letter-spacing:.04em}
.meta dd{margin:0;font-weight:500;text-align:right}
.spec{display:grid;gap:0;border-top:1px solid var(--line)}
.spec > div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding-block:.95rem;border-bottom:1px solid var(--line-soft)}
.spec dt{color:var(--muted);font-size:var(--step--1);letter-spacing:.03em}
.spec dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.callout{
border-radius:var(--r-xl);
background:var(--navy);
color:var(--bone);
padding:clamp(1.6rem,3.5vw,2.4rem);
display:grid;
gap:1rem;
position:relative;
overflow:hidden;
box-shadow:var(--shadow-2);
}
.callout::after{content:'';position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(196,163,117,.22),transparent 68%)}
.callout h3{font-size:var(--step-2);color:var(--bone)}
.callout p{color:rgba(245,242,236,.74);font-size:var(--step--1)}
.callout__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem;position:relative}

.strip{position:relative}
.strip__track{
display:grid;
grid-auto-flow:column;
grid-auto-columns:min(84vw,720px);
grid-auto-rows:clamp(260px,34vw,480px);
gap:clamp(.75rem,1.6vw,1.25rem);
overflow-x:auto;
scroll-snap-type:none;
padding-inline:var(--gutter);
padding-bottom:1.2rem;
scrollbar-width:none;
-ms-overflow-style:none;
}
.strip__track::-webkit-scrollbar{display:none;width:0;height:0}
.shot{position:relative;margin:0;scroll-snap-align:center;cursor:zoom-in;overflow:hidden;background:var(--bone-2)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out),filter 400ms var(--ease-out)}
.shot::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(7,23,47,.5),transparent 46%);opacity:0;transition:opacity 320ms var(--ease-out)}
.shot figcaption{
position:absolute;
left:0;
right:0;
bottom:0;
z-index:2;
padding:1.1rem 1.25rem;
color:var(--bone);
font-size:var(--step--1);
letter-spacing:.03em;
transform:translateY(8px);
opacity:0;
transition:opacity 320ms var(--ease-out),transform 380ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
.shot:hover img{transform:scale(1.035)}
.shot:hover::after,.shot:hover figcaption{opacity:1;transform:translateY(0)}
}
.shot:focus-visible::after,.shot:focus-visible figcaption{opacity:1;transform:translateY(0)}
.strip__hint{margin-top:.4rem;font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.subhead{font-size:var(--step-1);font-weight:400}
.subhead--gap{margin-top:2.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chips li{
list-style:none;
font-size:var(--step--1);
padding:.5em 1em;
border:1px solid var(--line);
border-radius:999px;
background:var(--paper);
transition:border-color 200ms var(--ease-out),transform 200ms var(--ease-out);
}
.section--tint .chips li{background:var(--bone)}
@media (hover:hover) and (pointer:fine){.chips li:hover{border-color:var(--brass-soft);transform:translateY(-2px)}}

.map{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bone-2);overflow:hidden;min-height:340px}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.32) contrast(1.02)}
.map__tag{position:absolute;left:1rem;top:1rem;border-radius:999px;background:rgba(245,242,236,.94);padding:.5rem .9rem;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);box-shadow:var(--shadow-1)}

/* Zaslepka mapy: to, co widac, dopoki nie ma zgody na osadzenie Google Maps.
   Stoi w tym samym pudelku, co ramka, i ma te sama wysokosc — po kliknieciu
   „Pokaz mape" nic sie nie przesuwa i uklad nie skacze (CLS). */
.map__zaslepka{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.85rem;
height:100%;
min-height:inherit;
padding:clamp(1.6rem,4vw,2.6rem);
text-align:center;
background-image:linear-gradient(135deg,rgba(15,42,82,.05),transparent 55%),radial-gradient(circle at 1px 1px,rgba(16,23,32,.07) 1px,transparent 0);
background-size:auto,7px 7px;
}
.map__ikona{width:34px;height:34px;color:var(--brass);flex:none}
.map__adres{font-family:var(--font-display);font-size:var(--step-1);line-height:1.25;color:var(--ink)}
.map__info{max-width:44ch;font-size:var(--step--1);line-height:1.6;color:var(--muted)}
.map__btn{border-color:var(--line);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-1)}
.map__male{font-size:var(--step--2);color:var(--muted)}
.map__male a{text-decoration:underline;text-underline-offset:.2em}
/* W sekcji kontaktu mapa lezy na granacie — zaslepka musi sie przelaczyc
   na jasny tekst, inaczej znika w tle. */
.kontakt__mapa .map__zaslepka{background-image:radial-gradient(circle at 1px 1px,rgba(245,242,236,.08) 1px,transparent 0);background-size:7px 7px}
.kontakt__mapa .map__adres{color:var(--bone)}
.kontakt__mapa .map__info,.kontakt__mapa .map__male{color:rgba(245,242,236,.62)}
.kontakt__mapa .map__male a{color:var(--bone)}
.kontakt__mapa .map__btn{background:var(--bone);border-color:var(--bone);color:var(--navy)}

/* <ul> zachowuje domyślne wcięcie przeglądarki (40 px), więc rząd znaczników
   stał wsunięty względem eyebrow i akapitu nad nim — wyglądało to na przypadkowe
   wyśrodkowanie, a było niewyzerowanym paddingiem listy. */
.areas{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0 0;padding:0}
.areas li{list-style:none;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--bone);border:1px solid var(--line-light);border-radius:999px;padding:.45em 1.05em}
.areas--dark li{color:var(--ink);border-color:var(--line)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding-block:.35rem}
.faq summary{
list-style:none;
cursor:pointer;
padding-block:1.15rem;
display:flex;
justify-content:space-between;
align-items:center;
gap:1.5rem;
font-family:var(--font-display);
font-size:var(--step-1);
letter-spacing:-.02em;
transition:color 200ms var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy)}
.faq summary i{flex:none;width:22px;height:22px;position:relative}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;inset:50% 0 auto 0;height:1px;background:var(--ink);transition:transform 260ms var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq__body{padding-bottom:1.4rem;max-width:70ch;color:var(--ink-3);text-wrap:pretty}
/* Odpowiedź nie ma się pojawiać skokiem: <details> otwiera się natychmiast,
   więc treść dostaje krótkie wejście od góry — ten sam ruch co reszta strony. */
@keyframes rozwin-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.faq details[open] .faq__body,.legal details[open] .legal__body{animation:rozwin-in 380ms var(--ease-out) both}

.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
width:100%;
min-height:64px;
padding:1.55rem 1.15rem .55rem;
font:inherit;
font-size:var(--step-0);
color:var(--ink);
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--r-md);
transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;padding-top:1.85rem}
.field--float{position:relative;display:block}
.field--float label{
position:absolute;
left:1.15rem;
top:1.22rem;
max-width:calc(100% - 2.3rem);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:var(--step-0);
letter-spacing:0;
text-transform:none;
color:var(--muted);
pointer-events:none;
transform-origin:left top;
transition:transform 180ms var(--ease-out),color 180ms var(--ease-out);
}
.field--area label{top:1.5rem}
.field--float input:focus + label,
.field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label,
.field--float textarea:not(:placeholder-shown) + label{
transform:translateY(-.72rem) scale(.72);
}
.field--area textarea:focus + label,
.field--area textarea:not(:placeholder-shown) + label{transform:translateY(-1rem) scale(.72)}
.field--float input:focus + label,.field--float textarea:focus + label{color:var(--navy)}
.section--navy .field--float input:focus + label,.section--navy .field--float textarea:focus + label{color:var(--navy)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(15,42,82,.12)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(163,66,58,.1)}
.form[data-validated] input:invalid,.form[data-validated] textarea:invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(163,66,58,.12)}
.form[data-validated] .consent input:invalid{outline:2px solid var(--danger-soft);outline-offset:2px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:.8rem;align-items:start;font-size:var(--step--1);color:var(--ink-3);line-height:1.55;cursor:pointer;text-wrap:pretty}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--navy);border-radius:7px;flex:none;cursor:pointer}
.consent a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brass-soft)}
.form__status{font-size:var(--step--1);min-height:1.5em;color:var(--navy)}
.form__status[data-state='error']{color:var(--danger)}
.section--navy .field label{color:rgba(245,242,236,.62)}
.section--navy .field--float label{color:var(--muted)}
.section--navy .consent{color:rgba(245,242,236,.72)}
.section--navy .consent input{accent-color:var(--brass)}
.section--navy .consent a{text-decoration-color:var(--brass-soft)}
.section--navy .form__status{color:var(--brass-soft)}
.section--navy .form__status[data-state='error']{color:var(--danger-light)}
.form__note{font-size:var(--step--2);letter-spacing:.06em;color:var(--muted)}
.section--navy .form__note{color:rgba(245,242,236,.5)}
.form .btn{justify-self:start;padding-inline:2.2em}
.req{color:var(--brass-soft)}
.contact-card{display:grid;gap:1.6rem;align-content:start}
.contact-card__mark{display:block;width:clamp(84px,8vw,112px);justify-self:start;margin-bottom:.6rem;border-radius:50%;box-shadow:0 0 0 5px var(--bone),0 18px 44px -20px rgba(4,12,26,.9)}
.split__head{margin-bottom:0}
.split__aside--fill > div > .meta:first-child{margin-top:0}
.contact-card .section__head{margin-bottom:0}
.contact-card a.big{font-family:var(--font-display);font-size:var(--step-2);letter-spacing:-.02em;display:inline-block;transition:color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.contact-card a.big:hover{color:var(--navy);transform:translateX(3px)}

.legal{background:var(--bone-2);border-top:1px solid var(--line);padding-block:1.6rem}
.legal details{max-width:74ch}
.legal summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-size:var(--step--1);letter-spacing:.06em;color:var(--muted);padding-block:.5rem;transition:color 200ms var(--ease-out)}
.legal summary::-webkit-details-marker{display:none}
.legal summary:hover{color:var(--navy)}
.legal summary i{flex:none;width:16px;height:16px;position:relative}
.legal summary i::before,.legal summary i::after{content:'';position:absolute;inset:50% 0 auto 0;height:1px;background:currentColor;transition:transform 260ms var(--ease-out)}
.legal summary i::after{transform:rotate(90deg)}
.legal details[open] summary i::after{transform:rotate(0)}
.legal__body{padding:1rem 0 1.4rem;font-size:var(--step--1);color:var(--ink-3)}
.legal__body p + p{margin-top:.85em}
.legal__body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brass-soft)}
/* Sekcja kontaktu ma to samo tło co stopka, więc bez tej kreski styk obu czytał
   się jako kilkaset pikseli nierozdzielonego granatu — jak pomyłka w składzie,
   nie jak oddech. Krawędź mówi, gdzie kończy się strona, a zaczyna metryczka. */
.foot{background:var(--navy-deep);color:rgba(245,242,236,.68);border-top:1px solid rgba(245,242,236,.12);padding-block:clamp(2rem,4vw,3rem) 1.75rem}
.foot__mast{display:grid;justify-items:start;gap:clamp(.9rem,2.2vw,1.5rem);margin-bottom:clamp(1.6rem,3.6vw,2.4rem)}
/* Pierścień w kolorze kości odcinał logo od tła jak naklejkę. Półprzezroczysty
   trzyma krążek na granacie, nie wycinając go z niego. */
.foot__mark{display:block;width:clamp(80px,7.2vw,108px);border-radius:50%;box-shadow:0 0 0 1px rgba(245,242,236,.28)}
.foot__grid{display:grid;gap:2.2rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line-light)}
.foot__naglowek{font-size:var(--step--2);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,242,236,.62);margin-bottom:.9rem;font-family:var(--font-sans);font-weight:500}
/* <address> ma domyślną kursywę przeglądarki — nikt jej tu nie zadeklarował,
   a adres biura pochylony obok prostych linków wyglądał na przypadek. */
.foot address{font-style:normal;line-height:1.9}
.foot a:hover{color:var(--brass-soft)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--step--1)}
/* Zapas z prawej: przycisk asystenta jest przyklejony do dolnego rogu okna
   i przy krótkiej stopce zasłaniał ostatnie pozycje tego paska. */
.foot__base{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.6rem;padding-inline-end:clamp(0px,14vw,15rem);font-size:var(--step--2);letter-spacing:.1em;color:rgba(245,242,236,.6)}

.dock{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:65;
display:grid;
grid-template-columns:1fr 1fr;
gap:.6rem;
padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
background:rgba(245,242,236,.92);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-top:1px solid var(--line);
transform:translateY(110%);
transition:transform 340ms var(--ease-out);
}
.dock[data-show='true']{transform:translateY(0)}
.dock .btn{width:100%}

.lightbox{
position:fixed;
inset:0;
z-index:100;
/* Krycie musi być pełne. Przy .975 przez tło prześwitywał pasek nawigacji,
   dok na telefonie i przycisk asystenta — rozmycie tego nie zakrywało, bo
   filtr działa na to, co widać, a nie na to, co ma zniknąć. Skoro tło jest
   nieprzezroczyste, backdrop-filter nie ma czego rozmywać i tylko kosztuje
   klatki na słabszym sprzęcie. */
background:#040C18;
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
opacity:0;
visibility:hidden;
transition:opacity 260ms var(--ease-out),visibility 0s linear 260ms;
}
.lightbox[data-open='true']{opacity:1;visibility:visible;transition-delay:0s}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--gutter);color:rgba(245,242,236,.7);font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase}
.lightbox__stage{display:grid;place-items:center;padding:0 clamp(.75rem,3vw,3rem);min-height:0;overflow:hidden;touch-action:pan-y}
.lightbox__stage img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(.97);opacity:0;transition:transform 340ms var(--ease-out),opacity 260ms var(--ease-out)}
.lightbox[data-open='true'] .lightbox__stage img{transform:scale(1);opacity:1}
/* Podmiana zdjęcia strzałkami: kadr gaśnie na czas dekodowania nowego pliku
   (strona.js ustawia data-zmiana), zamiast ciąć z klatki na klatkę. Krócej
   niż wejście lightboksa, bo tło już stoi i widać sam ruch obrazu. */
.lightbox__stage img[data-zmiana='true']{opacity:0;transform:scale(.99);transition:transform 160ms var(--ease-out),opacity 140ms var(--ease-out)}
.lightbox__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));color:rgba(245,242,236,.72);font-size:var(--step--1)}
.lb-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line-light);background:transparent;color:var(--bone);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.lb-btn:hover{background:rgba(245,242,236,.1);border-color:rgba(245,242,236,.45)}
.lb-btn:active{transform:scale(.94)}
.lb-btn svg{width:16px;height:16px}
.lightbox__nav{display:flex;gap:.6rem}

/* Klasę `js-anim` niesie sam dokument (worker/site/uklad.js). Wcześniej dopisywał
   ją mikroskopijny /wczesnie.js z <head> — ale skrypt bez `defer` wstrzymuje
   malowanie strony i Lighthouse liczył za niego 487 ms doliczone wprost do FCP,
   a przez to i do LCP. Atrybut w HTML kosztuje zero żądań i zero milisekund.

   Bezpiecznik po 0,6 s: gdy strona.js nie dojdzie (blokada, padnięty CDN),
   animacja odsłania treść dokładnie tak, jak przy wyłączonym JS. strona.js
   zdejmuje klasę od razu, gdy przejmuje wejścia (ok. 50 ms po pobraniu pliku),
   więc przy sprawnym skrypcie ten bezpiecznik nigdy nie zdąży wystartować
   i nie ma jak nadpisać `opacity` ustawianego przez GSAP. Krótsze opóźnienie
   to krótsze okno pustej treści przy zablokowanym JavaScripcie. */
.js-anim [data-reveal]{opacity:0;animation:anim-bezpiecznik 1ms .6s forwards}
@keyframes anim-bezpiecznik{to{opacity:1}}

/* ——— Wejście pierwszego ekranu ———————————————————————
   Robi to arkusz, nie GSAP. gsap.from() gasi element dopiero w chwili, gdy
   biblioteka dojedzie z CDN — tekst hero był namalowany po 2,2 s, znikał
   po ~2,5 s i wracał po ~3,5 s, a Lighthouse liczył jako LCP dopiero ten
   ostatni powrót. Te same krzywe i te same odstępy, tyle że start jest w
   pierwszej klatce dokumentu. Bez klasy `js-anim`: nic tu nie zależy od
   tego, czy skrypt w ogóle dojdzie. */
/* Wejście treści hero to samo przesunięcie — bez gaszenia przezroczystością.
   Element o `opacity:0` nie jest kandydatem na LCP, więc Chrome liczył LCP
   dopiero na końcu przenikania: pomiar na produkcji dawał 1068 ms odstępu
   między FCP a LCP, a ten sam przebieg z wyłączoną animacją — 0 ms.
   Ruch na ekranie zostaje (tekst wjeżdża kaskadą, zdjęcie schodzi ze
   zbliżenia), znika tylko to, co kosztowało sekundę wyniku. */
@keyframes hero-in{from{transform:translateY(18px)}to{transform:none}}
@keyframes znak-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.06)}to{transform:none}}
/* `backwards`, nie `both`: po zakończeniu animacja nie zostawia po sobie
   żadnej wartości. Przy `both` finalne `opacity:1` biłoby w kaskadzie regułę
   `body[data-przewiniete='true'] .znak-gora{opacity:0}` (animacja wygrywa ze
   zwykłą deklaracją), a zostawiony `transform` na przodku łamie
   `position:sticky` — dokładnie ten problem, przed którym ostrzega
   `clearProps` przy wejściach ScrollTriggera w strona.js.

   Odstępy są krótsze niż w wersji na GSAP (0 / .06 / .12 s zamiast .22 + .09):
   element z `opacity:0` nie liczy się do LCP, więc każde 100 ms opóźnienia
   akapitu `.hero__lede` to 100 ms doliczone do wyniku. */
@media (prefers-reduced-motion:no-preference){
[data-hero-in] > *{animation:hero-in .9s var(--ease-out) backwards}
[data-hero-in] > *:nth-child(2){animation-delay:.06s}
[data-hero-in] > *:nth-child(3){animation-delay:.12s}
[data-hero-in] > *:nth-child(4){animation-delay:.18s}
[data-hero-in] > *:nth-child(n+5){animation-delay:.24s}
[data-znak-gora]{animation:znak-in .8s var(--ease-out) backwards;animation-delay:.1s}
.hero__media img{animation:hero-zoom 1.7s var(--ease-out) backwards}
}

/* ——— Asystent VERTO ——————————————————————————————— */
.ai{
position:fixed;
z-index:90;
right:clamp(.9rem,3vw,2.2rem);
bottom:calc(5.1rem + env(safe-area-inset-bottom));
display:flex;
flex-direction:column;
align-items:flex-end;
gap:.7rem;
opacity:0;
visibility:hidden;
transform:translateY(18px);
transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out),visibility 0s linear 620ms;
}
.ai[data-ready="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1024px){.ai{bottom:clamp(1.3rem,3vw,2.2rem)}}
.ai__fab{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:.7rem;
padding:.45rem 1.15rem .45rem .45rem;
border:0;
border-radius:999px;
background:var(--navy-deep);
color:var(--bone);
font-family:var(--font-sans);
text-align:left;
cursor:pointer;
box-shadow:0 14px 38px -12px rgba(7,23,47,.62),0 0 0 1px rgba(196,163,117,.34);
transition:transform 220ms var(--ease-out),box-shadow 260ms var(--ease-out);
}
.ai__fab-mark{width:38px;height:38px;box-shadow:0 0 0 1px rgba(196,163,117,.45)}
.ai__fab-txt{display:grid;gap:.15rem}
.ai__fab-label{font-size:var(--step--1);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.ai__fab-sub{display:flex;align-items:center;gap:.4em;font-size:var(--step--2);letter-spacing:.04em;color:rgba(245,242,236,.62);line-height:1.2}
@media (max-width:560px){
.ai__fab{padding:.4rem;gap:0}
.ai__fab-txt{display:none}
}
/* Była tu zielona kropka ze świecącą obwódką, udająca wskaźnik „online”.
   Nie była podpięta pod żaden stan (data-ready steruje tylko lazy-initem
   panelu), a jej zieleń nie występowała nigdzie indziej w palecie. Tekst obok
   i tak mówi wszystko, co kropka próbowała zasugerować. */
@media (hover:hover) and (pointer:fine){
.ai__fab:hover{transform:translateY(-3px);box-shadow:0 22px 48px -14px rgba(7,23,47,.7),0 0 0 1px var(--brass-soft)}
}
/* Menu mobilne i asystent stoją na tym samym piętrze (z-index 90), a asystent
   jest w arkuszu niżej, więc jego przycisk lądował na wierzchu otwartego menu
   i przykrywał ostatnią pozycję listy. Znacznik na <body> ustawia strona.js. */
body[data-menu="true"] .ai{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms var(--ease-out),visibility 0s linear 160ms}
.ai[data-open="true"] .ai__fab{opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
.ai__panel{
position:fixed;
z-index:91;
right:clamp(.9rem,3vw,2.2rem);
bottom:calc(5.6rem + env(safe-area-inset-bottom));
width:min(27rem,calc(100vw - 1.8rem));
height:min(38rem,calc(100svh - 8rem));
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
background:var(--bone);
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:0 32px 80px -24px rgba(7,23,47,.55),0 0 0 1px rgba(16,23,32,.1);
transform-origin:100% 100%;
opacity:0;
visibility:hidden;
transform:translateY(16px) scale(.96);
transition:opacity 260ms var(--ease-out),transform 340ms var(--ease-out),visibility 0s linear 340ms;
}
.ai__panel[data-open="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1024px){.ai__panel{bottom:clamp(1.5rem,3vw,2.4rem);height:min(40rem,calc(100svh - 5rem))}}
@media (max-width:479px){
.ai__panel{left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));width:auto;height:min(85svh,40rem)}
}
.ai__head{
display:flex;
align-items:center;
gap:.9rem;
padding:1.15rem 1.2rem;
background:var(--navy-deep);
color:var(--bone);
border-bottom:1px solid rgba(196,163,117,.28);
}
.ai__head-mark{width:48px;height:48px;box-shadow:0 0 0 1px rgba(196,163,117,.45)}
.ai__head-txt{display:grid;gap:.15rem;line-height:1.3;min-width:0}
.ai__head-txt b{font-weight:500;font-size:var(--step-0);letter-spacing:.02em}
.ai__head-txt span{font-size:var(--step--1);letter-spacing:.04em;color:rgba(245,242,236,.6);display:flex;align-items:center;gap:.4em}
.ai__x{
margin-left:auto;
width:38px;
height:38px;
flex:none;
display:grid;
place-items:center;
border:1px solid rgba(245,242,236,.2);
border-radius:999px;
background:transparent;
color:var(--bone);
cursor:pointer;
transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out);
}
.ai__x:hover{background:rgba(245,242,236,.1);border-color:rgba(245,242,236,.45)}
.ai__x svg{width:17px;height:17px}
.ai__body{overflow-y:auto;overscroll-behavior:contain;padding:1.25rem 1.1rem;display:flex;flex-direction:column;gap:.85rem;scrollbar-width:thin}
.ai__body::-webkit-scrollbar{width:6px}
.ai__body::-webkit-scrollbar-thumb{background:rgba(16,23,32,.16);border-radius:999px}
.ai__msg{
max-width:88%;
padding:.85rem 1.05rem;
font-size:var(--step-0);
line-height:1.6;
border-radius:var(--r-md);
animation:ai-in 420ms var(--ease-out) both;
white-space:pre-wrap;
}
.ai__msg--bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line-soft);border-bottom-left-radius:5px;box-shadow:var(--shadow-1);color:var(--ink-2)}
.ai__msg--user{align-self:flex-end;background:var(--navy);color:var(--bone);border-bottom-right-radius:5px}
.ai__msg--note{align-self:center;max-width:100%;text-align:center;background:transparent;color:var(--muted);font-size:var(--step--2);letter-spacing:.04em;padding:.2rem 0}
@keyframes ai-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai__typing{align-self:flex-start;display:flex;gap:4px;padding:.9rem 1rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);border-bottom-left-radius:5px}
.ai__typing i{width:6px;height:6px;border-radius:999px;background:var(--brass);opacity:.4;animation:ai-blink 1.1s infinite}
.ai__typing i:nth-child(2){animation-delay:.16s}
.ai__typing i:nth-child(3){animation-delay:.32s}
@keyframes ai-blink{0%,100%{opacity:.28;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
.ai__chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.1rem .9rem}
.ai__chip{
border:1px solid var(--line);
background:var(--paper);
color:var(--ink);
border-radius:999px;
padding:.6em 1.05em;
font-family:var(--font-sans);
font-size:var(--step--1);
letter-spacing:.02em;
cursor:pointer;
transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out),transform 160ms var(--ease-out);
}
.ai__chip:hover{background:var(--navy);color:var(--bone);border-color:var(--navy);transform:translateY(-1px)}
.ai__chip--accent{border-color:var(--brass-soft);color:var(--navy);background:rgba(196,163,117,.12)}
.ai__foot{border-top:1px solid var(--line);background:var(--paper);padding:.85rem .9rem calc(.85rem + env(safe-area-inset-bottom))}
.ai__composer{display:flex;align-items:flex-end;gap:.55rem}
.ai__composer textarea{
flex:1;
resize:none;
border:1px solid var(--line);
border-radius:var(--r-md);
background:var(--bone);
color:var(--ink);
font-family:var(--font-sans);
font-size:var(--step-0);
line-height:1.5;
padding:.75rem .95rem;
max-height:7rem;
transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out);
}
.ai__composer textarea:focus{outline:0;border-color:var(--brass-soft);box-shadow:0 0 0 3px rgba(196,163,117,.16)}
.ai__composer textarea,.ai__form input,.ai__form textarea{caret-color:var(--brass)}
.ai__send{
width:48px;height:48px;flex:none;
display:grid;place-items:center;
border:0;border-radius:999px;
background:var(--navy);color:var(--bone);
cursor:pointer;
transition:background-color 200ms var(--ease-out),transform 160ms var(--ease-out),opacity 200ms var(--ease-out);
}
.ai__send svg{width:19px;height:19px}
.ai__send:hover{background:var(--navy-deep);transform:translateY(-2px)}
.ai__send:disabled{opacity:.35;cursor:default;transform:none}
.ai__disclaimer{margin-top:.5rem;font-size:var(--step--2);line-height:1.5;letter-spacing:.04em;color:var(--muted);text-align:center}
.ai__disclaimer a{text-decoration:underline;text-underline-offset:2px}
.ai__card{
align-self:stretch;
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
padding:1rem;
display:grid;
gap:.75rem;
animation:ai-in 420ms var(--ease-out) both;
}
.ai__card-h{display:grid;gap:.15rem}
.ai__card-h b{font-family:var(--font-display);font-weight:400;font-size:var(--step-1);letter-spacing:-.02em}
.ai__card-h span{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ai__form{display:grid;gap:.5rem}
.ai__form textarea{resize:vertical;min-height:4.4rem;line-height:1.5}
.ai__form input,.ai__form textarea{
width:100%;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--bone);
font-family:var(--font-sans);
font-size:var(--step--1);
color:var(--ink);
padding:.66rem .8rem;
transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out);
}
.ai__form input:focus,.ai__form textarea:focus{outline:0;border-color:var(--brass-soft);box-shadow:0 0 0 3px rgba(196,163,117,.16)}
.ai__form input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,70,47,.12)}
.ai__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--2);line-height:1.55;color:var(--muted);cursor:pointer}
.ai__consent input{margin:.15rem 0 0;width:16px;height:16px;flex:none;accent-color:var(--navy)}
.ai__consent a{text-decoration:underline;text-underline-offset:2px}
.ai__err{font-size:var(--step--2);color:var(--danger)}
.ai__actions{display:flex;flex-wrap:wrap;gap:.45rem}
.ai__btn{
flex:1 1 auto;
border:1px solid var(--navy);
border-radius:999px;
background:var(--navy);
color:var(--bone);
font-family:var(--font-sans);
font-size:var(--step-0);
font-weight:500;
padding:.75em 1.2em;
cursor:pointer;
text-align:center;
transition:background-color 200ms var(--ease-out),transform 160ms var(--ease-out),color 200ms var(--ease-out);
}
.ai__btn:hover{background:var(--navy-deep);transform:translateY(-2px)}
.ai__btn--ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.ai__btn--ghost:hover{background:rgba(15,42,82,.06);color:var(--navy)}
.ai__btn[disabled]{opacity:.5;cursor:default;transform:none}
.ai__done{display:grid;gap:.15rem;justify-items:center;text-align:center;padding:.4rem 0 .2rem}
.ai__done .tick{width:42px;height:42px;border-radius:999px;background:var(--navy);color:var(--brass-soft);display:grid;place-items:center;margin-bottom:.5rem}
.ai__done .tick svg{width:19px;height:19px}
.ai__done b{font-family:var(--font-display);font-weight:400;font-size:var(--step-1);letter-spacing:-.02em}
.ai__done time{font-size:var(--step--1);color:var(--brass);letter-spacing:.05em}
.ai__done p{font-size:var(--step--2);color:var(--muted);line-height:1.6;margin-top:.35rem;max-width:34ch}
@media (max-width:1023px){
/* Zapas pod stopką musi zmieścić dwie rzeczy przyklejone do dołu okna: dok
   („Zadzwoń / Napisz do nas", ok. 67 px) i stojący nad nim przycisk asystenta,
   którego górna krawędź wypada 132 px nad dolną krawędzią ekranu. Przy 5,5 rem
   przycisk siadał na zastrzeżeniu prawnym w ostatnim wierszu stopki i zjadał
   z niego pół zdania. */
.foot{padding-bottom:calc(8.75rem + env(safe-area-inset-bottom))}
}
@media (max-width:639px){
.hero__scrim{background:linear-gradient(to top,rgba(6,18,38,.95) 0%,rgba(6,18,38,.84) 26%,rgba(6,18,38,.5) 58%,rgba(6,18,38,.3) 76%,rgba(6,18,38,.56) 100%)}
.hero__media img{object-position:34% 52%}
}
@media (min-width:640px){
.facts__list{grid-template-columns:repeat(3,1fr)}
.dock{grid-template-columns:auto auto;justify-content:end}
.dock .btn{width:auto}
}
@media (min-width:768px){
.foot__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1024px){
.nav__links,.nav__cta{display:flex}
.burger{display:none}

.facts__in{grid-template-columns:minmax(320px,.9fr) 2fr}
.facts__price{padding-left:calc(var(--gutter) + (100vw - min(var(--wrap-max),100vw)) / 2)}
.split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.split--head-full{row-gap:clamp(1.6rem,3vw,2.8rem)}
.split--head-full > .split__head{grid-column:1/-1}
.split--wide-left{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.split__aside--sticky{position:sticky;top:calc(clamp(64px,7vw,84px) + 2.5rem)}
.spec-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.spec-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.5rem)}
.dock{display:none}
.map,.map iframe,.map__zaslepka{min-height:520px}
.kontakt__mapa .map__zaslepka{min-height:clamp(250px,30vw,360px)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-delay:0s !important;transition-duration:.01ms !important}
/* Selektor musi być tak samo mocny jak `.js-anim [data-reveal]` wyżej, inaczej
   przegrywa na specyficzności i treść zostaje niewidoczna do czasu, aż
   zadziała bezpiecznik. Samo `[data-reveal]{opacity:1}` tego nie robiło. */
.js-anim [data-reveal],[data-reveal]{opacity:1;animation:none}
}

/* ============================================================================
   Komponenty serwisu wielostronicowego.
   Dopisane do arkusza wyciągniętego z jednostronicowej wersji strony; korzystają
   wyłącznie z tokenów z :root powyżej, żeby paleta miała jedno źródło.
   ========================================================================== */

/* --- nawigacja: telefon i rozwijane działy --- */
.nav__tel{display:none;font-size:var(--ui);letter-spacing:.02em;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color 200ms var(--ease-out)}
.nav__tel:hover{color:var(--brass-deep)}
.drop{position:relative;display:inline-flex;align-items:center}
.drop>a{display:inline-flex;align-items:center;gap:.4em}
.drop__i{width:.42em;height:.42em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-.1em);opacity:.6;transition:transform 220ms var(--ease-out)}
.drop[data-open='true'] .drop__i{transform:rotate(225deg) translateY(-.1em)}
.drop__list{
position:absolute;top:100%;left:-1rem;min-width:14rem;display:flex;flex-direction:column;
padding:.6rem;margin-top:.55rem;border:1px solid var(--line);border-radius:var(--r-md);
background:var(--paper);box-shadow:var(--shadow-2);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity 200ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s linear 220ms;
}
.drop[data-open='true'] .drop__list{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.drop__list a{padding:.5rem .75rem;border-radius:8px;font-size:var(--step--1);color:var(--ink-3)}
.drop__list a::after{display:none}
.drop__list a:hover,.drop__list a[aria-current='page']{background:var(--bone);color:var(--navy)}
.menu__sub{
display:grid;gap:0;
margin:.35rem 0 .55rem;
padding-left:.95rem;
border-left:1px solid rgba(196,163,117,.4);
}
.menu__sub a{
font-family:var(--font-sans);
font-size:var(--step--1);
letter-spacing:.03em;
line-height:1.2;
padding-block:.5rem;
color:rgba(245,242,236,.68);
}
.menu__sub a:hover,.menu__sub a[aria-current='page']{color:var(--brass-soft)}
/* Od tabletu podpozycje idą w dwie kolumny — w jednej zostawiały dwie trzecie
   rzędu pustych, a przycisk na całą szerokość ekranu przestaje być przyciskiem. */
@media (min-width:640px){
.menu__sub{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
.menu__cta{width:auto;min-width:17rem}
}

/* --- nagłówek podstrony --- */
.czolo{position:relative;padding-block:clamp(5.5rem,10vw,8rem) clamp(2rem,4vw,3.2rem);background:var(--bone);overflow:hidden}
.czolo__in{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start;max-width:56rem}
.czolo h1{font-size:var(--step-4)}
.czolo .lede{color:var(--ink-2)}
.czolo__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}
.czolo--foto{color:var(--bone);background:var(--navy-deep);padding-block:clamp(7rem,13vw,11rem) clamp(2.8rem,5.5vw,4.6rem)}
.czolo--foto .lede{color:rgba(245,242,236,.82)}
.czolo--foto .eyebrow{color:rgba(245,242,236,.7)}
.czolo--foto .eyebrow::before{background:var(--brass-soft)}
.czolo__foto{position:absolute;inset:0;z-index:0}
.czolo__foto img,.czolo__foto picture{width:100%;height:100%;object-fit:cover}
.czolo--foto::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,23,47,.92) 8%,rgba(7,23,47,.55) 55%,rgba(7,23,47,.35))}
.czolo--blad h1{max-width:18ch}

/* --- okruszki --- */
.crumbs{padding-block:.9rem;border-bottom:1px solid var(--line-soft);background:var(--bone)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;font-size:var(--step--2);letter-spacing:.06em;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.45}
.crumbs a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink)}

/* --- karty ofert --- */
.karty{display:grid;gap:clamp(.9rem,1.9vw,1.4rem);grid-template-columns:1fr}
.karta__link{display:flex;flex-direction:column;height:100%;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-1);transition:transform 200ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.karta__link:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(15,42,82,.22)}}
.karta__foto{position:relative;display:block;background:var(--bone-2)}
.karta__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karta__brak{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,var(--bone-2),var(--bone))}
.karta__status{position:absolute;top:.85rem;left:.85rem;padding:.34em .8em;border-radius:999px;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;background:var(--paper);color:var(--navy);box-shadow:var(--shadow-1)}
.karta__status[data-status='sprzedane']{background:var(--navy);color:var(--bone)}
/* flex:1 jest tu warunkiem działania `margin-top:auto` przy cenie niżej.
   Karta rozciąga się do wysokości najwyższej w rzędzie, ale bez tego zapas
   zostawał pod treścią zamiast w niej — ceny stały na trzech różnych
   wysokościach, zależnie od tego, czy tytuł zawinął się w drugi wiersz. */
.karta__tresc{display:flex;flex-direction:column;gap:.4rem;padding:1.15rem 1.25rem 1.3rem;flex:1}
.karta__rodzaj{font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.karta__tytul{font-family:var(--font-display);font-size:var(--step-1);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.karta__cena{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;margin-top:auto;padding-top:.15rem;font-size:var(--step-1);font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.karta__cena em{font-style:normal;font-size:var(--step-0);font-weight:400;color:var(--ink);opacity:.72}
.karta__fakty{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.35rem;font-size:var(--step--1);color:var(--muted)}
.karta__fakty span+span{position:relative;padding-left:.9rem}
.karta__fakty span+span::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--brass)}

/* --- pusty stan --- */
.pusto{padding:clamp(2.5rem,6vw,4.5rem) 0;border:1px dashed var(--line);border-radius:var(--r-lg);text-align:center;color:var(--muted)}
.pusto__akcja{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.3rem}

/* --- zakładki kategorii --- */
.zakladki{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.zakladki a{display:inline-flex;align-items:baseline;gap:.5em;padding:.42em 1em;border:1px solid var(--line);border-radius:999px;font-size:var(--ui);color:var(--ink-3);transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.zakladki a span{font-size:var(--step--2);color:var(--muted)}
.zakladki a:hover{border-color:var(--navy)}
.zakladki a[aria-current='page']{background:var(--navy);border-color:var(--navy);color:var(--bone)}
.zakladki a[aria-current='page'] span{color:rgba(245,242,236,.65)}

/* --- filtry --- */
.filtry{display:grid;gap:.7rem;grid-template-columns:1fr;margin-bottom:2.2rem;padding:1rem;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper)}
.filtry__pole{display:flex;gap:.5rem}
.filtry__pole--cena{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.filtry input,.filtry select{width:100%;padding:.62em .85em;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--ui);transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.filtry input::placeholder{color:var(--muted);opacity:1}
@media (hover:hover) and (pointer:fine){.filtry input:hover,.filtry select:hover{border-color:rgba(15,42,82,.32)}}
.filtry input:focus-visible,.filtry select:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.filtry__reset{border:0;background:none;color:var(--muted);font:inherit;font-size:var(--step--1);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --- kafle usług i kategorii --- */
.kafle{display:grid;gap:clamp(.75rem,1.6vw,1.1rem);grid-template-columns:1fr}
.kafel{display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper);box-shadow:var(--shadow-1);transition:transform 200ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.kafel:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(15,42,82,.2)}}
.kafel__tytul{font-family:var(--font-display);font-size:var(--step-1);line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
.kafel__opis{font-size:var(--step--1);line-height:1.65;color:var(--muted)}
.kafel__licznik{font-size:var(--step--1);color:var(--brass-deep)}
.kafel__nr{font-family:var(--font-display);font-size:var(--step--1);letter-spacing:.16em;color:var(--brass-deep)}
.kafel__wiecej{margin-top:.35rem;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.kafel__licencja{font-size:var(--step--2);color:var(--muted)}
.kafel--kat{gap:.3rem}
.kafel--duzy{padding:clamp(1.5rem,3vw,2.2rem)}
.kafel--osoba a{color:var(--navy)}

/* --- treść strony redakcyjnej --- */
.blok{max-width:68ch;color:var(--ink-2);font-size:var(--step-0);line-height:1.8}
.blok--prawne{font-size:var(--step--1);line-height:1.75}
.blok h2{margin:2.4em 0 .7em;font-size:var(--step-2)}
.blok h3{margin:1.9em 0 .55em;font-size:var(--step-1)}
.blok h2:first-child,.blok h3:first-child{margin-top:0}
.blok p+p,.blok ul+p,.blok ol+p{margin-top:1.15em}
.blok ul,.blok ol{margin:1em 0;padding-left:1.35em}
.blok li{margin-bottom:.45em}
.blok ul li::marker{color:var(--brass)}
.blok blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid var(--brass);font-family:var(--font-display);font-size:var(--step-1);color:var(--ink)}
.blok a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--brass-soft);transition:text-decoration-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.blok a:hover,.legal__body a:hover{text-decoration-color:currentColor}
.blok__cta{margin-top:2em}
.blok__data,.oferta__data{margin-top:2.5rem;font-size:var(--step--2);letter-spacing:.04em;color:var(--muted)}
.oferta__data{padding-block:2.5rem}

/* --- oferta wyróżniona na stronie głównej --- */
.wyroz{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bone)}
.wyroz__in{display:grid;gap:clamp(1.6rem,4vw,3.2rem);grid-template-columns:1fr;align-items:center}
.wyroz__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.wyroz__tresc{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.wyroz__tresc h2{font-size:var(--step-3)}
/* Jeden przewymiarowany element na ekranie — cena. Reszta jej nie kontruje. */
.wyroz__cena{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7em;font-family:var(--font-display);font-size:var(--step-3);line-height:1;letter-spacing:-.035em;color:var(--navy)}
.wyroz__cena em{font-style:normal;font-family:var(--font-sans);font-size:var(--step--1);letter-spacing:0;color:var(--muted)}
.wyroz__fakty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.6rem;width:100%;margin:0}
.wyroz__fakty dt{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wyroz__fakty dd{margin:.2rem 0 0;font-size:var(--step-0);color:var(--ink)}

/* --- drobne --- */
.hero__akcje{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.lede--light{color:rgba(245,242,236,.85)}
.srodek{text-align:center}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .eyebrow,.section__head--center .section__num{justify-content:center}
.foot__note{margin-top:1.4rem;font-size:var(--step--2);line-height:1.7;color:rgba(245,242,236,.5);max-width:70ch;padding-inline-end:clamp(0px,14vw,15rem)}
.hero--oferta .hero__title{font-size:var(--step-3);max-width:20ch}

/* --- formularze --- */
/* Pułapka na roboty. Nie display:none — część automatów pomija ukryte pola. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field--select select{width:100%;padding:1.15em .95em .5em;border:1px solid var(--line-light);border-radius:var(--r-sm);background:transparent;color:inherit;font:inherit;font-size:var(--ui)}
/* Listy rozwijane bez strzałki systemowej: własny znak w mosiądzu, tej samej
   grubości co ikony obok. Na granacie (formularze) — w kości. */
.filtry select,.field--select select{
appearance:none;-webkit-appearance:none;
padding-right:2.4em;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239C7440' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right .9em center;
background-size:.7em;
}
.section--navy .field--select select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23C4A375' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E")}
.field--select select option{color:var(--ink)}
.form__done{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.6rem,4vw,2.6rem);border:1px solid var(--line-light);border-radius:var(--r-md);color:var(--bone)}
.form__done h3{font-size:var(--step-2)}
.form__done a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.form__done:focus-visible{outline:2px solid var(--brass-soft);outline-offset:4px}

@media (min-width:640px){
  .karty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kafle{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .karty{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kafle{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kafle--duze{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wyroz__in{grid-template-columns:1.15fr .85fr}
}
@media (min-width:1024px){
  .nav__tel{display:inline-block}
  .nav__cta{display:flex;align-items:center;gap:1.5rem}
}

/* --- nawigacja na podstronach bez pełnoekranowego zdjęcia --------------------
   Pasek jest position:fixed i domyślnie ukryty, bo na stronie głównej wjeżdża
   dopiero po zejściu z hero. Na podstronach nie ma z czego wjeżdżać: bez tego
   nawigacja byłaby niewidoczna, dopóki ktoś nie przewinie. */
.nav[data-zawsze='true']{
opacity:1;pointer-events:auto;transform:none;
background:rgba(245,242,236,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.nav[data-zawsze='true']::after{opacity:1}
.nav-luz{height:var(--nav-h)}

/* Nagłówek podstrony ma szerokość strony, a ograniczamy dopiero wiersze tekstu.
   Zwężanie samego .wrap zepchnęłoby całą sekcję na środek i rozjechało ją
   z resztą stron, które trzymają się lewej krawędzi siatki. */
.czolo__in{max-width:none}
.czolo h1{max-width:22ch}
.czolo .lede{max-width:58ch}

/* [hidden] to zwykłe display:none, więc każdy komponent z własnym display —
   flex, grid — musi je przywrócić jawnie. Bez tego potwierdzenie wysyłki
   widać pod formularzem, zanim ktokolwiek go wyśle. */
[hidden]{display:none!important}

/* Przycisk „zobacz więcej" zamykający sekcję na stronie głównej. Pełna treść
   siedzi na podstronie — sekcja ma tylko doprowadzić do niej wzrok. */
.wiecej{margin-top:clamp(1.8rem,4vw,3rem)}

/* ==========================================================================
   Znak marki nad hero
   Na samej górze strony z pełnoekranowym zdjęciem nie ma paska nawigacji —
   jest sam znak w rogu. Gaśnie dokładnie wtedy, gdy wjeżdża pasek (znacznik
   data-przewiniete na <body> ustawia strona.js), więc nigdy nie widać dwóch
   logotypów naraz.
   ========================================================================== */
.znak-gora{
position:absolute;
top:clamp(1.1rem,3vw,2rem);
left:var(--gutter);
z-index:60;
display:flex;
align-items:center;
gap:.8rem;
opacity:1;
transition:opacity 280ms var(--ease-out),transform 320ms var(--ease-out);
}
body[data-przewiniete='true'] .znak-gora{opacity:0;transform:translateY(-8px);pointer-events:none}
.znak-gora__mark{display:block;flex:none;width:clamp(40px,4.2vw,50px);height:clamp(40px,4.2vw,50px);border-radius:50%;box-shadow:0 0 0 1px rgba(245,242,236,.32),0 14px 34px -18px rgba(4,12,26,.9)}
.znak-gora__mark img{width:100%;height:100%;border-radius:50%;display:block}
.znak-gora__type{display:none;flex-direction:column;line-height:1}
.znak-gora__name{font-family:var(--font-display);font-size:1.08rem;letter-spacing:.17em;color:var(--bone)}
.znak-gora__sub{font-size:.5rem;letter-spacing:.34em;color:rgba(245,242,236,.6);text-transform:uppercase;margin-top:.3rem}
@media (min-width:640px){.znak-gora__type{display:flex}}

/* Hero nie ma już bloku marki w treści — znak stoi w rogu, a napis VERTO jest
   nagłówkiem. Odsuwamy treść od dolnej krawędzi, żeby oddech był widoczny. */
.hero__in{padding-bottom:clamp(3rem,9vh,6rem)}

/* ==========================================================================
   Sekcja ofert na stronie głównej
   ========================================================================== */
.oferty__head{max-width:none}
.oferty__head .prose{max-width:56ch}
.section__head--wide h2{max-width:22ch}

.zakladki{margin-bottom:1rem}
.zakladki a{cursor:pointer}

/* Dwa jawne rzędy zamiast siatki, która sama zawija: na szerokim ekranie pasek
   ma zajmować dokładnie dwie linie, nie tyle, ile wyjdzie. Rzędy dzielą tę samą
   proporcję (2 : 1 : 1 : 1 oraz 2 : 1 : 2), więc mimo różnej liczby pól ich
   krawędzie się pokrywają i blok czyta się jak jedna tabela. */
.filtry{
display:flex;
flex-direction:column;
gap:.7rem;
margin-bottom:clamp(1.8rem,4vw,2.6rem);
padding:clamp(.85rem,2vw,1.15rem);
border:1px solid var(--line-soft);
border-radius:var(--r-md);
background:var(--paper);
box-shadow:var(--shadow-1);
}
.section--paper .filtry{background:var(--bone)}
.filtry__rzad{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.filtry__pole{flex:1 1 100%}
.filtry__akcje{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;flex:1 1 100%}
.filtry__akcje .btn{padding-block:.6em}
.oferty__licznik{color:var(--brass-deep);white-space:nowrap}
.oferty__licznik:empty{display:none}
.filtry__reset[hidden]{display:none}
/* Alternatywna droga do ofert, nie konkurent przycisku „Filtruj” obok.
   Wcześniej cały przycisk był w kolorze akcentu — obrys, tekst i świecąca
   kropka — więc przyciągał więcej uwagi niż akcja główna, a sama kropka
   udawała wskaźnik stanu, którego ten przycisk nie ma. Teraz to zwykły
   przycisk drugorzędny w języku reszty strony, a ikona mówi to, co kropka
   próbowała udawać: że otwiera rozmowę, a nie wysyła formularz. */
.btn--ai{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ai svg{width:1.1em;height:1.1em;flex:none;opacity:.7;transition:opacity 180ms var(--ease-out)}
.btn--ai:hover{border-color:var(--navy);background:rgba(15,42,82,.05)}
.btn--ai:hover svg{opacity:1}

/* Po dwa pola w rzędzie — więcej się nie mieści bez ucinania etykiet. */
@media (min-width:640px){
  .filtry__pole{flex:1 1 calc(50% - .35rem)}
  .filtry__pole--szukaj{flex-basis:100%}
  .filtry__akcje{flex-basis:100%}
}
/* Od tabletu drugi rząd mieści się w jednej linii. Przyciski dostają dokładnie
   tyle, ile mierzą, a widełki cenowe i sortowanie oddają resztę — gdyby to one
   trzymały szerokość, pojawienie się „Wyczyść" po pierwszym filtrze zrzucałoby
   przyciski do kolejnej linii. */
@media (min-width:768px){
  .filtry__rzad:last-child .filtry__pole{flex:1 1 0;min-width:0}
  .filtry__rzad:last-child .filtry__pole--cena{flex-grow:2}
  .filtry__akcje{flex:0 0 auto;flex-wrap:nowrap}
  .filtry__akcje .btn,.filtry__reset{white-space:nowrap}
}
/* Tablet: cztery pola w jednym rzędzie ucięłyby etykiety list, więc szukajka
   dostaje całą szerokość, a listy dzielą się po równo pod nią. */
@media (min-width:768px) and (max-width:1023px){
  .filtry__rzad:first-child .filtry__pole{flex:1 1 calc(33.333% - .47rem)}
  .filtry__rzad:first-child .filtry__pole--szukaj{flex-basis:100%}
}
/* Docelowy układ: pierwszy rząd to czym szukasz, drugi to czym zawężasz
   i potwierdzasz. Razem dwie linie. */
@media (min-width:1024px){
  .filtry__pole{flex:1 1 0;min-width:0}
  .filtry__pole--szukaj{flex-grow:2;flex-basis:0}
  .filtry__pole--cena{flex-grow:2}
}

/* Karta wyróżniona — zajmuje miejsce po trzech zwykłych. Na szerokim ekranie
   kładzie się poziomo: zdjęcie z lewej, cena i fakty z prawej. Jeden
   przewymiarowany element (cena) na sekcję, reszta mu nie kontruje. */
.karta--wyroz{grid-column:1/-1}
.karta--wyroz .karta__foto img{aspect-ratio:16/10}
.karta__wyroz-tag{
position:absolute;
top:.85rem;
right:.85rem;
padding:.36em .9em;
border-radius:999px;
font-size:var(--step--2);
letter-spacing:.16em;
text-transform:uppercase;
background:var(--navy);
color:var(--bone);
box-shadow:var(--shadow-1);
}
.karta__lede{font-size:var(--step--1);line-height:1.7;color:var(--muted);max-width:52ch}
.karta--wyroz .karta__cena{margin-top:.15rem;padding-top:0}
@media (min-width:900px){
  .karta--wyroz .karta__link{flex-direction:row;align-items:stretch}
  .karta--wyroz .karta__foto{flex:0 0 56%}
  .karta--wyroz .karta__foto img{height:100%;aspect-ratio:auto;min-height:360px}
  .karta--wyroz .karta__tresc{flex:1;justify-content:center;gap:.7rem;padding:clamp(1.8rem,3.5vw,3rem)}
  .karta--wyroz .karta__tytul{font-size:var(--step-2)}
  .karta--wyroz .karta__cena{font-family:var(--font-display);font-size:var(--step-3);line-height:1;letter-spacing:-.035em}
  .karta--wyroz .karta__cena em{font-family:var(--font-sans);font-size:var(--step-0)}
}
.pusto--filtr{display:block;margin-top:1rem}
.pusto--filtr[hidden]{display:none!important}

/* Duże przejście na pełną listę. Nie przycisk — napis: to ostatnia rzecz
   w sekcji i ma być widoczna z drugiego końca ekranu. */
.wiecej--duzy{margin-top:clamp(2.2rem,5vw,3.6rem);text-align:center}
.wiecej__link{
display:inline-flex;
align-items:center;
gap:.6em;
font-family:var(--font-display);
font-size:var(--step-2);
letter-spacing:-.02em;
color:var(--navy);
padding-bottom:.18em;
border-bottom:1px solid var(--line);
transition:border-color 240ms var(--ease-out),gap 240ms var(--ease-out),color 240ms var(--ease-out);
}
.wiecej__link i{
width:1.1em;height:1.1em;flex:none;position:relative;
}
.wiecej__link i::before,.wiecej__link i::after{content:'';position:absolute;background:currentColor}
.wiecej__link i::before{left:0;right:.15em;top:50%;height:1px}
.wiecej__link i::after{right:.15em;top:50%;width:.45em;height:1px;transform-origin:100% 50%;transform:rotate(45deg) translateY(-.5px)}
@media (hover:hover) and (pointer:fine){
  .wiecej__link:hover{gap:1em;border-color:var(--brass);color:var(--brass)}
}
.section--navy .wiecej__link{color:var(--bone);border-color:var(--line-light)}

/* ==========================================================================
   O nas
   ========================================================================== */
.onas{display:grid;gap:clamp(1.8rem,4.5vw,3rem)}
.onas__head{margin-bottom:0}
.onas__tresc{display:grid;gap:1.25rem;justify-items:start}
.onas__akcja{margin-top:.35rem}
/* Dane kontaktowe jako pas pod tekstem: nazwa nad wartością, cztery pozycje
   w jednym rzędzie. Jako druga kolumna kończyły się w połowie wysokości
   akapitów i zostawiały ćwiartkę sekcji pustą. */
.onas__dane{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.4rem clamp(1.5rem,4vw,3.5rem);
margin:0;
padding-top:clamp(1.5rem,3vw,2.2rem);
border-top:1px solid var(--line);
}
.onas__dane dt{
font-size:var(--step--2);
letter-spacing:.18em;
text-transform:uppercase;
font-weight:500;
color:var(--brass-deep);
}
.onas__dane dd{
margin:.5rem 0 0;
font-family:var(--font-display);
font-size:var(--step-1);
line-height:1.3;
letter-spacing:-.015em;
color:var(--ink);
}
.onas__dane a{
color:var(--navy);
border-bottom:1px solid rgba(15,42,82,.22);
padding-bottom:.08em;
transition:border-color 180ms var(--ease-out),color 180ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .onas__dane a:hover{color:var(--brass-deep);border-bottom-color:var(--brass)}
}
@media (min-width:700px){
  /* Kolumny nierówne z rozmysłem: adres i e‑mail są dłuższe od pozostałych
     dwóch wartości, przy czterech równych szpaltach adres łamał się na dwa
     wiersze, a pod „Obszarem" zostawało puste pół szpalty. */
  .onas__dane{grid-template-columns:1.2fr .85fr 1.15fr .8fr}
}
@media (min-width:1000px){
  /* Nagłówek trzyma wąską szpaltę, tekst szerszą — symetryczne pół na pół
     robiło z tytułu i akapitu dwa równorzędne bloki bez hierarchii.
     Przycisk siada na dole lewej szpalty, równo z ostatnim wierszem tekstu:
     inaczej pod tytułem zostawała pusta ćwiartka, a pod przyciskiem druga. */
  .onas{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(3rem,7vw,7rem);row-gap:0;align-items:start}
  .onas__head{grid-column:1;grid-row:1}
  .onas .onas__head h2{max-width:11ch}
  .onas__tresc{grid-column:2;grid-row:1/3;padding-top:.3rem}
  .onas__akcja{grid-column:1;grid-row:2;align-self:end;margin:1.5rem 0 0}
  .onas__dane{grid-column:1/-1;grid-row:3;margin-top:clamp(2rem,4vw,3rem)}
}

/* ==========================================================================
   Dlaczego my
   ========================================================================== */
.wartosci{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-light)}
.wartosc{
display:grid;
grid-template-columns:auto 1fr;
gap:.4rem clamp(1rem,3vw,2.4rem);
padding-block:clamp(1.5rem,3.5vw,2.4rem);
border-bottom:1px solid var(--line-light);
}
.wartosc__nr{
grid-row:1/3;
font-family:var(--font-display);
font-size:var(--step-2);
line-height:1;
letter-spacing:.04em;
color:var(--brass-soft);
font-variant-numeric:tabular-nums;
}
.wartosc h3{font-size:var(--step-1);color:var(--bone);letter-spacing:-.02em}
.wartosc p{color:rgba(245,242,236,.72);font-size:var(--step--1);line-height:1.75;max-width:60ch}
@media (min-width:900px){
  .wartosci{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4.5rem)}
  .wartosc{border-bottom:1px solid var(--line-light)}
  .wartosc:nth-child(-n+2){border-top:0}
}

/* ==========================================================================
   Usługi — lista redakcyjna zamiast sześciu jednakowych kafelków
   ========================================================================== */
.uslugi-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.usluga{border-bottom:1px solid var(--line)}
.usluga__link{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:clamp(.9rem,3vw,2.6rem);
padding-block:clamp(1.4rem,3.2vw,2.2rem);
transition:background-color 260ms var(--ease-out);
}
.usluga__nr{
font-family:var(--font-display);
font-size:var(--step--1);
letter-spacing:.18em;
color:var(--brass-deep);
font-variant-numeric:tabular-nums;
align-self:start;
padding-top:.35em;
}
.usluga__tresc{display:grid;gap:.4rem}
.usluga__tytul{font-family:var(--font-display);font-size:var(--step-2);line-height:1.14;letter-spacing:-.025em;color:var(--ink)}
.usluga__opis{font-size:var(--step--1);line-height:1.75;color:var(--muted);max-width:70ch}
.usluga__strzalka{
flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);
position:relative;align-self:center;
transition:background-color 240ms var(--ease-out),border-color 240ms var(--ease-out),transform 240ms var(--ease-out);
}
.usluga__strzalka::before,.usluga__strzalka::after{content:'';position:absolute;background:var(--navy);transition:background-color 240ms var(--ease-out)}
.usluga__strzalka::before{left:50%;top:50%;width:.85rem;height:1px;transform:translate(-50%,-50%)}
.usluga__strzalka::after{left:50%;top:50%;width:.42rem;height:1px;transform:translate(.02rem,-50%) rotate(45deg);transform-origin:100% 50%}
@media (hover:hover) and (pointer:fine){
  .usluga__link:hover{background:var(--bone)}
  .usluga__link:hover .usluga__tytul{color:var(--navy)}
  .usluga__link:hover .usluga__strzalka{background:var(--navy);border-color:var(--navy);transform:translateX(3px)}
  .usluga__link:hover .usluga__strzalka::before,.usluga__link:hover .usluga__strzalka::after{background:var(--bone)}
}
.usluga__link:focus-visible{background:var(--bone)}
@media (max-width:639px){
  .usluga__link{grid-template-columns:auto 1fr;gap:.7rem 1rem}
  .usluga__strzalka{display:none}
  .usluga__tytul{font-size:var(--step-1)}
}

/* ==========================================================================
   Pytania i odpowiedzi
   ========================================================================== */
.faq-wrap{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
.faq-wrap__head{margin-bottom:0}
.faq-wrap .faq{border-top-color:var(--line)}
@media (min-width:1024px){
  .faq-wrap{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
  .faq-wrap__head{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}

/* ==========================================================================
   Kontakt — dane, formularz i mapa w jednej sekcji
   ========================================================================== */
.kontakt__in{display:grid;gap:clamp(2.2rem,5vw,4rem)}
.kontakt__dane{display:grid;gap:1.6rem;align-content:start}
.kontakt__dane .section__head{margin-bottom:0}
.kontakt__linie{display:grid;gap:1.4rem}
.kontakt__zaproszenie{
margin:0 0 1.6rem;
font-family:var(--font-display);
font-size:var(--step-1);
line-height:1.42;
color:rgba(245,242,236,.86);
max-width:40ch;
}
.kontakt__mapa{display:grid;gap:1.2rem}
.kontakt__mapa .map{border-color:var(--line-light);background:rgba(245,242,236,.06);min-height:clamp(250px,30vw,360px)}
.kontakt__mapa .map iframe{min-height:clamp(250px,30vw,360px);filter:grayscale(.18) contrast(1.02)}
.kontakt__pod-mapa{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1rem 1.6rem;
}
.kontakt__adres{font-size:var(--step--1);letter-spacing:.04em;color:rgba(245,242,236,.82)}
.kontakt__rejestr{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:var(--step--2);color:rgba(245,242,236,.55);letter-spacing:.06em}
@media (min-width:900px){
  .kontakt__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .kontakt__mapa{grid-column:1/-1}
}

/* ==========================================================================
   Dopracowanie — druga warstwa nad skalą
   ========================================================================== */

/* Hero: górna część kadru bywa jasna (niebo, woda), a stoi na niej znak marki.
   Scrim dostaje więc drugi koniec — delikatne przyciemnienie od góry, żeby
   logotyp i pasek nawigacji miały na czym stać niezależnie od zdjęcia. */
.hero__scrim{
background:
  linear-gradient(to bottom,rgba(6,18,38,.42) 0%,rgba(6,18,38,.14) 14%,transparent 30%),
  linear-gradient(to top,rgba(6,18,38,.96) 0%,rgba(6,18,38,.8) 22%,rgba(6,18,38,.34) 52%,rgba(6,18,38,.06) 100%);
}
.hero__title--brand em{color:rgba(245,242,236,.92)}
.znak-gora__sub{color:rgba(245,242,236,.85)}

/* Nagłówki i akapity dostają węższą miarę. Wiersz na 80 znaków czyta się
   gorzej niż na 55, a przy mniejszym stopniu pisma różnica jest odczuwalna. */
.section__head h2{max-width:24ch}
.section__head--wide h2{max-width:20ch}
.lede{max-width:54ch}
.prose{max-width:58ch}

/* „Dlaczego my”: nagłówek jest wąski z założenia (20ch), więc w układzie
   jednokolumnowym zostawiał dwie trzecie rzędu pustych, a siatka 2×2 pod nim
   czytała się jak gotowiec. Nagłówek idzie więc do własnej kolumny i zostaje
   przy niej podczas przewijania, a powody schodzą w jedną kolumnę obok —
   tym samym rytmem, co lista usług niżej. Pustka znika, bo wypełnia ją treść. */
@media (min-width:900px){
  .dlaczego .wrap{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:clamp(2.5rem,6vw,6rem);
    align-items:start;
  }
  .dlaczego .section__head{position:sticky;top:calc(var(--nav-h) + 2.5rem);margin-bottom:0}
  .dlaczego .wartosci{grid-template-columns:minmax(0,1fr);column-gap:0}
  .dlaczego .wartosc p{max-width:58ch}
}

/* Karty: cienki rozjaśniony rant u góry zamiast płaskiej krawędzi. Daje
   głębię, której nie da rzucany cień, i nie rozmywa kształtu. */
/* Sekcja ofert jest biała i karta też — przy krawędzi na 7% alfy (1,16:1)
   karta w ogóle nie czytała się jako karta. Wyraźniejszy rant i realny cień
   odklejają ją od tła, nadal bez wprowadzania nowej barwy. */
.karta__link{
border-color:rgba(15,42,82,.16);
box-shadow:0 1px 2px rgba(15,42,82,.07),0 12px 30px -16px rgba(15,42,82,.26),inset 0 1px 0 rgba(255,255,255,.7);
}
.karta__foto img{transition:transform 620ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .karta__link:hover{transform:translateY(-4px);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.85);border-color:rgba(156,116,64,.35)}
  .karta__link:hover .karta__foto img{transform:scale(1.035)}
}
.karta__foto{overflow:hidden}
.karta__tytul{transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.karta__link:hover .karta__tytul{color:var(--navy)}}

/* Oferta wyróżniona zajmuje cały rząd, więc jej zdjęcie nie potrzebuje już
   dodatkowej wysokości — po zmniejszeniu reszty strony zaczynało przytłaczać. */
/* Wysokość karty ustala karta, nie proporcja pliku. Zdjęcia ofert idą z panelu
   (R2), a picture() wypisuje im wtedy aspect-ratio stylem inline — arkusz tego
   nie przebije. Zdjęcie ustawione bezwzględnie ma określoną szerokość i wysokość
   naraz, więc proporcja przestaje cokolwiek znaczyć, a object-fit dokańcza kadr.
   Wcześniej to zdjęcie dyktowało wysokość karty i panel obok zostawał z ~40%
   pustego pola. */
@media (min-width:900px){
  .karta--wyroz .karta__link{min-height:clamp(320px,26vw,400px)}
  .karta--wyroz .karta__foto{flex:0 0 52%;position:relative;align-self:stretch;overflow:hidden}
  .karta--wyroz .karta__foto picture{position:absolute;inset:0;display:block}
  .karta--wyroz .karta__foto img{
    position:absolute;inset:0;
    width:100%;height:100%;min-height:0;
    object-fit:cover;object-position:50% 45%;
  }
  /* To samo dla oferty bez zdjęć. Zastępnik ma proporcję 4/3, więc przy
     szerokości 52% karty rozciągał ją do ~475 px: pół ekranu beżu, a obok
     treść rozjechana na całą tę wysokość. Tutaj wypełnia panel, zamiast go
     rozpychać. */
  .karta--wyroz .karta__brak{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  /* Treść rozkłada się na całą wysokość, a przejście dalej domyka panel kreską
     zamiast urywać się w połowie zdjęcia. */
  .karta--wyroz .karta__tresc{justify-content:space-between;padding:clamp(1.5rem,3vw,2.4rem)}
  .karta--wyroz .karta__cta{width:100%;margin-top:0;padding-top:1.1rem;border-top:1px solid var(--line)}
}

/* Kafelki i pola: ten sam rant co na kartach, dla spójności. */
.kafel{box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.6)}
.filtry{box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.55)}

/* Pasek nawigacji: podkreślenie wjeżdża z lewej i ma grubość włosa, nie kreski. */
.nav__links a::after{height:1.5px;background:var(--brass)}
.nav__links a{transition:color 200ms var(--ease-out)}
.nav__links a:hover{color:var(--navy)}

/* Zakładki kategorii: aktywna dostaje cień zamiast samego wypełnienia —
   inaczej przy mniejszym stopniu pisma ginie w rzędzie. */
.zakladki a[aria-current='page']{box-shadow:0 6px 16px -8px rgba(15,42,82,.55)}
.zakladki a{transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out),color 200ms var(--ease-out),transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.zakladki a:hover{transform:translateY(-1px)}}

/* Obramowanie ostrości: własne, nie domyślne niebieskie, i bliżej elementu.
   Bez border-radius: ta reguła nadawała każdemu elementowi w fokusie 6 px
   zaokrąglenia, więc pigułkowe przyciski i pola po dojściu klawiszem Tab
   zmieniały kształt. Obrys i tak idzie po zaokrągleniu elementu. */
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* Wiersze danych: linia rozdzielająca cieńsza niż obramowania kart. */
.meta div{border-bottom-color:var(--line-soft)}

.kontakt__zaproszenie{font-size:var(--step-1);max-width:36ch}

/* Duże przejście dalej: kreska pod napisem pojawia się dopiero pod kursorem,
   a strzałka wyjeżdża. W spoczynku to sam napis — jeden element, nie widżet. */
.wiecej__link{border-bottom-color:transparent}
@media (hover:hover) and (pointer:fine){
  .wiecej__link:hover{border-bottom-color:var(--brass)}
}
.wiecej__link:focus-visible{border-bottom-color:var(--brass)}

/* Lenis: dopóki płynne przewijanie jest włączone, przeglądarka nie może
   dokładać własnego. Reguły przepisane z dist/lenis.css wersji 1.3.11 — tej
   samej, która leży w public/js. Po podbiciu wersji biblioteki trzeba tu
   zajrzeć ponownie.

   Dwie świadome różnice wobec oryginału. `overscroll-behavior:contain` na
   [data-lenis-prevent] zostaje, bo od niego zależy przewijanie wewnątrz
   rozmowy z asystentem, menu i lightboksa. Reguły `.lenis.lenis-smooth
   iframe{pointer-events:none}` nie przepisujemy: wyłączyłaby obsługę
   osadzonej mapy Google, a to jedyna ramka w serwisie i ma być klikalna. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}

/* Pola formularza: etykieta unosi się nad wpisywanym tekstem, więc pole musi
   być wyższe niż zwykły input — ale nie o tyle, co przy poprzedniej skali.
   Wysokość schodzi razem z resztą strony, przesunięcie etykiety też. */
.field input,.field textarea{min-height:56px;padding:1.35rem 1.05rem .5rem}
.field textarea{min-height:118px;padding-top:1.6rem}
.field--float label{left:1.05rem;top:1.05rem}
.field--area label{top:1.3rem}
.field--float input:focus + label,
.field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label,
.field--float textarea:not(:placeholder-shown) + label{transform:translateY(-.62rem) scale(.74)}
.field--area textarea:focus + label,
.field--area textarea:not(:placeholder-shown) + label{transform:translateY(-.88rem) scale(.74)}
.form{gap:.85rem}
.consent{gap:.6rem}

/* Siatka ofert schodzi do dwóch kolumn, dopóki agencja ma mało nieruchomości.
   Trzecia kolumna obok jednego kafla to nie oddech, tylko dziura. */
@media (min-width:900px){
  .karty[data-kolumny="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   Dopracowanie — trzecia warstwa: wyrównania, gęstość, pasek filtrów
   ========================================================================== */

/* Znak w rogu zdjęcia stał na samym marginesie okna, a wszystko pod nim —
   pasek nawigacji, nagłówki sekcji, stopka — na kolumnie tekstu. Sześćdziesiąt
   pikseli różnicy widać na pierwszym ekranie, zanim cokolwiek się przewinie.
   max() bierze kolumnę tam, gdzie ona istnieje, i margines na wąskim ekranie. */
.znak-gora{left:max(var(--gutter),calc(50% - 660px + var(--gutter)))}

/* --------------------------------------------------------------------------
   Pasek filtrów zwijany na telefonie
   -------------------------------------------------------------------------- */
/* Siedem pól jedno pod drugim to na telefonie cały ekran między nagłówkiem
   sekcji a pierwszą ofertą — czyli tyle przewijania, ile trwa cierpliwość.
   Zakładki kategorii zostają na wierzchu (nimi zawęża się najczęściej),
   reszta chowa się za jeden przycisk. Panel jest w HTML otwarty, więc bez JS
   nic nie znika; skrypt zwija go dopiero, gdy wie, że ekran jest wąski. */
.filtry__panel{display:contents}
.filtry[data-zwiniete='true'] .filtry__panel{display:none}
.filtry__przelacz{display:none}
.filtry__ile[hidden]{display:none}

@media (max-width:639px){
  .filtry__przelacz:not([hidden]){
    display:flex;
    align-items:center;
    gap:.6rem;
    width:100%;
    padding:.55rem .35rem;
    border:0;
    background:none;
    color:var(--ink);
    font:inherit;
    font-size:var(--step--1);
    letter-spacing:.02em;
    text-align:left;
    cursor:pointer;
  }
  .filtry__przelacz-txt{flex:1 1 auto}
  .filtry__ile{
    flex:none;
    min-width:1.5em;
    padding:.1em .5em;
    border-radius:999px;
    background:var(--navy);
    color:var(--bone);
    font-size:var(--step--2);
    font-variant-numeric:tabular-nums;
    text-align:center;
  }
  /* Ptaszek rysowany dwiema krawędziami — bez pliku i bez biblioteki ikon,
     grubość dobrana do stopnia pisma obok. */
  .filtry__ptaszek{
    flex:none;
    width:.5rem;
    height:.5rem;
    margin-right:.25rem;
    border-right:1.5px solid var(--muted);
    border-bottom:1.5px solid var(--muted);
    transform:translateY(1px) rotate(-135deg);
    transition:transform 240ms var(--ease-out);
  }
  .filtry[data-zwiniete='true'] .filtry__ptaszek{transform:translateY(-2px) rotate(45deg)}
  .filtry:has(.filtry__przelacz:not([hidden])){padding:.35rem .5rem}
  .filtry[data-zwiniete='false'] .filtry__panel{padding-top:.35rem}
}

/* --------------------------------------------------------------------------
   Usługi — opis obok tytułu, nie pod nim
   -------------------------------------------------------------------------- */
/* Na szerokim ekranie tytuł i opis stały w jednej wąskiej kolumnie po lewej,
   a strzałka przy prawej krawędzi — środek wiersza zostawał pusty na jedną
   trzecią szerokości. Rozbicie treści na dwie kolumny (display:contents robi
   z nich elementy tej samej siatki) rozciąga wiersz na całą miarę. */
@media (min-width:1024px){
  .usluga__link{
    grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;
    align-items:center;
    column-gap:clamp(1.6rem,3vw,3rem);
  }
  .usluga__tresc{display:contents}
  .usluga__nr{align-self:center;padding-top:0}
  .usluga__opis{max-width:52ch}
}

/* --------------------------------------------------------------------------
   Oferta wyróżniona — widoczne, że kafel prowadzi dalej
   -------------------------------------------------------------------------- */
/* Prawa strona karty wyróżnionej mieściła rodzaj, tytuł, cenę i fakty, po czym
   kończyła się w połowie wysokości zdjęcia. Zamiast domykać ją niczym, domyka
   ją to, co karta i tak robi po kliknięciu. */
.karta__cta{
display:none;
align-items:center;
gap:.55em;
margin-top:.9rem;
font-size:var(--step--1);
letter-spacing:.1em;
text-transform:uppercase;
color:var(--navy);
}
.karta__cta::after{
content:'';
width:2.4em;
height:1px;
background:currentColor;
transform:scaleX(.62);
transform-origin:0 50%;
transition:transform 260ms var(--ease-out);
}
@media (min-width:900px){
  .karta--wyroz .karta__cta{display:inline-flex}
}
@media (hover:hover) and (pointer:fine){
  .karta--wyroz .karta__link:hover .karta__cta{color:var(--brass)}
  .karta--wyroz .karta__link:hover .karta__cta::after{transform:scaleX(1)}
}

/* Znak w sekcji kontaktu: pieczęć, nie naklejka. Grubszy rant i większa
   średnica przeciągały uwagę z nagłówka, który jest tam treścią. */
.contact-card__mark{width:clamp(72px,6vw,92px);box-shadow:0 0 0 3px var(--bone),0 16px 40px -22px rgba(4,12,26,.9)}

/* ---------------------------------------------------------------- zgody */
/* Baner zgody na osadzona mape Google. Stoi w lewym dolnym rogu, bo prawy
   nalezy do asystenta, a caly dol na telefonie do paska „Zadzwon / Napisz".
   Dopoki baner czeka na decyzje, oba te elementy sa schowane — jeden ruch
   kciuka ma trafiac w jedna rzecz, nie w trzy nalozone na siebie. */
.zgody{
position:fixed;
z-index:100;
left:clamp(.6rem,3vw,2.2rem);
right:clamp(.6rem,3vw,2.2rem);
bottom:calc(clamp(.6rem,3vw,2.2rem) + env(safe-area-inset-bottom));
max-width:34rem;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--paper);
box-shadow:var(--shadow-2);
opacity:0;
transform:translateY(14px);
transition:opacity 380ms var(--ease-out),transform 460ms var(--ease-out);
}
.zgody[data-widoczny="true"]{opacity:1;transform:none}
.zgody__in{display:grid;gap:1.05rem;padding:clamp(1.15rem,3vw,1.6rem)}
.zgody__tytul{font-size:var(--step-1);letter-spacing:-.02em}
.zgody__opis{font-size:var(--step--1);line-height:1.65;color:var(--muted)}
.zgody__akcje{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem}
/* Oba przyciski maja ten sam rozmiar i ten sam kontur. Odmowa nie moze byc
   trudniejsza od zgody — art. 7 ust. 3 RODO. */
.zgody__btn{flex:1 1 8.5rem;justify-content:center;border-color:var(--navy);color:var(--navy);background:transparent}
.zgody__link{margin-left:auto;font-size:var(--step--2);letter-spacing:.08em;color:var(--muted);text-decoration:underline;text-underline-offset:.25em}
@media (hover:hover) and (pointer:fine){
.zgody__btn:hover{background:var(--navy);color:var(--bone)}
.zgody__link:hover{color:var(--ink)}
}
body[data-zgody-pyta="true"] .ai,
body[data-zgody-pyta="true"] .dock{opacity:0;visibility:hidden;pointer-events:none}

/* Powrot do decyzji: przycisk w stopce, wygladem rowny sasiednim odnosnikom.
   Pokazuje go skrypt — bez JS nie ma czego przestawiac. */
.foot__zgody{
border:0;
padding:0;
background:none;
font:inherit;
letter-spacing:inherit;
color:inherit;
cursor:pointer;
text-decoration:underline;
text-underline-offset:.25em;
transition:color 180ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.foot__zgody:hover{color:var(--bone)}}

/* ---------- galeria oferty: duże zdjęcie + miniatury ---------- */
.section--tight{padding-block:clamp(2rem,4vw,3.25rem)}
/* Opis i parametry siedzą na tym samym tle — nie dublujemy odstępu między nimi. */
.section--bez-dolu{padding-bottom:0}
.galeria{
position:relative;
display:grid;
grid-template-columns:1fr;
gap:clamp(.6rem,1.4vw,1rem);
}
.galeria .shot{aspect-ratio:4/3;border:1px solid var(--line)}
.galeria .shot--duze{aspect-ratio:3/2}
/* Na wąskim ekranie miniatury idą w jeden rząd pod dużym zdjęciem — tyle,
   ile ich jest, bez pustych kratek i bez jednej rozciągniętej na całą szerokość. */
.galeria__mini{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(.5rem,1.4vw,1rem)}
.galeria__mini .shot{aspect-ratio:1}
.galeria .shot--poza{display:none}
.galeria__all{
position:absolute;
left:clamp(.75rem,1.6vw,1.25rem);
bottom:clamp(.75rem,1.6vw,1.25rem);
z-index:2;
display:inline-flex;
align-items:center;
gap:.6rem;
/* Ta sama wysokość co reszta przycisków — przy step--2 samo wypełnienie
   dawało ok. 33 px, poniżej wygodnego celu dotykowego. */
padding:.65em 1.35em;
min-height:44px;
border:1px solid var(--line);
border-radius:999px;
background:var(--bone);
color:var(--navy);
font-size:var(--step--2);
letter-spacing:.14em;
text-transform:uppercase;
cursor:pointer;
box-shadow:0 14px 34px -18px rgba(4,12,26,.7);
transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out);
}
.galeria__all span{
display:inline-grid;
place-items:center;
min-width:1.7em;
padding:.15em .4em;
border-radius:999px;
background:var(--navy);
color:var(--bone);
letter-spacing:0;
}
.galeria__all:hover{transform:translateY(-2px);box-shadow:0 20px 44px -18px rgba(4,12,26,.85)}
@media (max-width:899px){
.galeria__all{position:static;justify-self:start;box-shadow:none}
}
@media (min-width:900px){
/* Wysokość mozaiki jest zadana, a nie wyliczana z proporcji trzech miniatur —
   inaczej blok rósł na dwa ekrany i zdjęcia zjadały całą stronę. */
.galeria{grid-template-columns:1.4fr 1fr;align-items:stretch;height:clamp(420px,62vh,640px)}
.galeria .shot{aspect-ratio:auto;height:100%;min-height:0}
.galeria__mini{grid-auto-flow:row;grid-auto-rows:1fr;grid-template-columns:1fr;min-height:0}
}

/* Parametry w siatce zamiast jednej długiej kolumny. */
.meta--grid{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));column-gap:clamp(1.5rem,3vw,3rem)}

/* Na stronie oferty zdjęcie ma się bronić samo — scrim tylko tyle, żeby
   utrzymać czytelny tytuł u dołu i logo u góry. */
.hero--oferta .hero__scrim{
background:
  linear-gradient(to bottom,rgba(6,18,38,.34) 0%,rgba(6,18,38,.1) 16%,transparent 34%),
  linear-gradient(to top,rgba(6,18,38,.9) 0%,rgba(6,18,38,.6) 20%,rgba(6,18,38,.14) 46%,transparent 68%);
}
@media (min-width:900px){
.hero--oferta .hero__title{font-size:var(--step-4);max-width:16ch}
}

/* --- oferta: dopięcie typografii i odstępów --- */
/* Podpisy zdjęć zostają dla lightboxa, ale nie kładą się na kafle mozaiki,
   gdzie wchodziły pod przycisk galerii. */
.galeria .shot figcaption{display:none}
.galeria .shot::after{display:none}

/* Wyróżnienia oferty to zdania („Pompa ciepła Viessmann 6 kW"), a nie etykiety —
   wersaliki z rozstrzeleniem robiły z nich nieczytelny płot. */
#opis .areas li{text-transform:none;letter-spacing:.01em;font-size:var(--step--1);padding:.5em 1.1em}

/* Specyfikacja: nazwa nad wartością. Przy wartościach w rodzaju „Po kompleksowej
   aranżacji wnętrz, wolne od zaraz" układ nazwa-obok-wartości się zderzał. */
.meta--grid div{display:block;padding-bottom:.7rem}
.meta--grid dt{font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase}
.meta--grid dd{margin-top:.25rem;text-align:left;font-weight:400;line-height:1.5}

.oferta-cta{display:grid;gap:.85rem;justify-items:start;padding:clamp(1.3rem,2.4vw,1.9rem);border:1px solid var(--line);border-radius:var(--r-md,14px);background:var(--bone)}
.oferta-cta p{font-size:var(--step--1);line-height:1.7;color:var(--muted);max-width:34ch;margin:0}
.oferta-cta .eyebrow{margin:0}
.oferta-cta__tel{font-family:var(--font-display);font-size:var(--step-2);letter-spacing:-.02em;color:var(--navy);transition:transform 180ms var(--ease-out)}
.oferta-cta__tel:hover{transform:translateX(3px)}

/* ==========================================================================
   Telefon — dopracowanie
   Trzy rzeczy, które na małym ekranie realnie przeszkadzały: brak dojścia do
   menu na samej górze strony, prześwitujący pasek nawigacji i skok widoku
   przy wejściu w pole formularza.
   ========================================================================== */
@media (max-width:899px){

/* iOS powiększa całą stronę, gdy pole ma mniej niż 16 px, i po takim skoku
   widok trzeba cofać palcem. Na telefonie każde pole ma dokładnie 16 px. */
.field input,.field textarea,
.filtry input,.filtry select,
.field--select select,
.ai__form input,.ai__composer textarea{font-size:16px}

/* Nad hero nie było czym otworzyć menu: pasek wjeżdżał dopiero po przewinięciu,
   więc na pierwszym ekranie nawigacja była nieosiągalna. Na telefonie pasek
   stoi od razu — nad zdjęciem jest przezroczysty, z samym przyciemnieniem,
   które trzyma znak i przycisk czytelnymi na każdym kadrze. */
.znak-gora{display:none}
.nav{opacity:1;pointer-events:auto;transform:none}
.nav:not([data-stuck='true']):not([data-zawsze='true']){
background:linear-gradient(to bottom,rgba(6,18,38,.5),rgba(6,18,38,0));
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav:not([data-stuck='true']):not([data-zawsze='true']) .brand__name{color:var(--bone)}
.nav:not([data-stuck='true']):not([data-zawsze='true']) .brand__sub{color:rgba(245,242,236,.72)}
.nav:not([data-stuck='true']):not([data-zawsze='true']) .brand__mark{box-shadow:0 0 0 1px rgba(245,242,236,.35)}
.nav:not([data-stuck='true']):not([data-zawsze='true']) .burger{border-color:rgba(245,242,236,.45)}
.nav:not([data-stuck='true']):not([data-zawsze='true']) .burger span{background:var(--bone)}

/* Przy 86 % krycia tekst spod paska prześwitywał wszędzie tam, gdzie
   przeglądarka nie zdąży rozmyć tła — a na telefonie pasek stoi nad treścią
   przez całe przewijanie. */
.nav[data-stuck='true'],.nav[data-zawsze='true']{background:rgba(245,242,236,.96)}

/* Numer w osobnej kolumnie zjadał na telefonie szóstą część szerokości, a to,
   co zostawało, łamało się po dwa słowa. Numer wchodzi więc nad tytuł jako
   krótki podpis — tekst dostaje całą miarę, a lista przestaje wyglądać jak
   układ z szerokiego ekranu wciśnięty w telefon. */
.usluga__link{grid-template-columns:minmax(0,1fr);gap:.3rem}
.usluga__nr,.wartosc__nr{
font-family:var(--font-sans);
font-size:var(--step--2);
letter-spacing:.12em;
padding-top:0;
}
.wartosc{grid-template-columns:minmax(0,1fr);gap:.3rem}
.wartosc__nr{grid-row:auto;color:var(--brass-soft)}
.usluga__tytul,.wartosc h3{font-size:var(--step-1);line-height:1.2}

/* Znak zwijania stał w pionowym środku pytania, więc przy pytaniu łamiącym się
   na dwie linijki wisiał w powietrzu między nimi. Ma stać przy pierwszej. */
.faq summary{align-items:flex-start;gap:1rem;font-size:var(--step-0);line-height:1.35;padding-block:1rem}
.faq summary i{margin-top:.12em;width:20px;height:20px}
.faq__body{font-size:var(--step--1);line-height:1.7;padding-bottom:1.1rem}

/* Stopka: dwie listy po kilka jednowyrazowych pozycji szły jedna pod drugą
   przez półtora ekranu. Obok siebie zajmują tyle, ile mają treści. */
.foot__grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem}
.foot__grid > *:first-child{grid-column:1/-1}
.foot ul{gap:.62rem;font-size:var(--step--1)}
.foot address{line-height:1.75;font-size:var(--step--1)}
/* Znak w stopce miał 108 px i stał sam nad nazwą — na telefonie zjadał pół
   ekranu, zanim zaczęły się jakiekolwiek treści. */
.foot__mark{width:64px}
.foot__mast{gap:.8rem;margin-bottom:1.6rem}

/* Zaślepka mapy: wyśrodkowana ikona, wyśrodkowany adres i wyśrodkowany akapit
   pod nim to trzy rzeczy na jednej osi i zero hierarchii. Do lewej, jak reszta. */
.map__zaslepka{align-items:flex-start;text-align:left;gap:.7rem}
.map__info{max-width:none}

/* Pola formularza: 64 px wysokości przy pustym wnętrzu robiły z sekcji kontaktu
   pas białych pigułek. Tyle, ile potrzebuje etykieta i wpisany tekst. */
.field input{min-height:54px;padding:1.25rem 1rem .45rem;border-radius:var(--r-sm)}
.field textarea{min-height:112px;padding-top:1.6rem;border-radius:var(--r-sm)}
.form{gap:.75rem}

/* Specyfikacja oferty: nazwa nad wartością zajmowała 66 px na wiersz, także
   przy wartości „2". Dwadzieścia parametrów to było 1300 px samego przewijania.
   Układ zostaje (długie wartości nadal się nie zderzają), schodzą odstępy. */
.meta--grid{gap:.55rem}
.meta--grid div{padding-bottom:.5rem}
.meta--grid dt{font-size:var(--step--2)}
.meta--grid dd{margin-top:.12rem;font-size:var(--step--1);line-height:1.45}

/* Przycisk menu. Sam kontur na zdjęciu czytał się jak duch: pierścień szerszy
   od znaku marki po drugiej stronie, w środku dwie długie kreski i nic poza
   tym. Teraz to krążek o tej samej średnicy co logo, z własnym przyciemnionym
   tłem — trzyma się każdego kadru i wygląda na rzecz do naciśnięcia. */
.burger{
width:42px;height:42px;
background:rgba(7,23,47,.28);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.nav[data-stuck='true'] .burger,.nav[data-zawsze='true'] .burger{
background:rgba(15,42,82,.05);border-color:rgba(15,42,82,.18);
backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* Menu miało pozycje wysokości nagłówka, więc na telefonie z podpozycjami
   nie mieściło się na ekranie — a że stoi na inset:0 bez przewijania, dolna
   część (telefon, e-mail, „Umów rozmowę") była nieosiągalna. Teraz menu
   przewija się jak zwykła strona, a pozycje są na tyle mniejsze, że w komplecie
   mieszczą się na typowym ekranie. */
.menu{overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;gap:1.2rem}
.menu__top{position:sticky;top:0;z-index:2;background:var(--navy-deep);flex:none}
.menu__foot{margin-top:auto}

}

/* ==========================================================================
   Usługi na stronie głównej — talia kart zamiast płaskiej listy
   ==========================================================================
   Sześć usług o różnym ciężarze czytało się jak spis treści: sześć wierszy
   jednakowej wagi, żaden nie wygrywał. Karta, która akurat mija linię
   czytania, robi się granatowa i pełnowymiarowa, reszta cofa się o pół kroku
   w papier. W każdej chwili uwaga ma jedno miejsce, a przewijanie samo
   prowadzi po kolejnych usługach.

   Ciemne tło wchodzi warstwą ::before z krycia 0 → 1, bo gradientów nie da
   się przenikać wprost. Wersja bez skryptu zostawia pierwszą kartę aktywną
   (znacznik jest w HTML), więc sekcja nigdy nie jest sama biel. */
.uslugi-deck{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:clamp(.5rem,1.3vw,.85rem);
}
.deck__karta{
position:relative;
isolation:isolate;
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:.55rem 1rem;
padding:clamp(1.05rem,3.4vw,1.55rem) clamp(1.05rem,3.4vw,1.9rem);
border-radius:clamp(20px,5vw,34px);
border:1px solid rgba(16,23,32,.09);
background:linear-gradient(176deg,var(--paper),var(--bone-2));
box-shadow:0 1px 2px rgba(15,42,82,.04),inset 0 1px 0 rgba(255,255,255,.75);
transition:box-shadow 420ms var(--ease-out),border-color 420ms var(--ease-out),transform 520ms var(--ease-out);
}
.deck__karta::before{
content:'';
position:absolute;
inset:0;
z-index:-1;
border-radius:inherit;
opacity:0;
background:
  radial-gradient(130% 190% at 4% 50%,rgba(196,163,117,.26),rgba(196,163,117,0) 52%),
  linear-gradient(112deg,var(--navy-deep) 0%,var(--navy) 62%,var(--navy-mid) 100%);
transition:opacity 520ms var(--ease-out);
}
.deck__nr{
grid-row:1;
width:clamp(2.5rem,9vw,3.1rem);
aspect-ratio:1;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid var(--line);
font-family:var(--font-sans);
font-size:var(--step--2);
letter-spacing:.14em;
text-indent:.14em;
color:var(--brass-deep);
font-variant-numeric:tabular-nums;
transition:color 420ms var(--ease-out),border-color 420ms var(--ease-out),background-color 420ms var(--ease-out);
}
.deck__tytul{
font-family:var(--font-display);
font-size:var(--step-2);
line-height:1.14;
letter-spacing:-.025em;
color:var(--ink);
transition:color 420ms var(--ease-out);
}
.deck__opis{
grid-column:1/-1;
font-size:var(--step--1);
line-height:1.7;
color:var(--muted);
max-width:56ch;
transition:color 420ms var(--ease-out);
}
/* Rozwijanie pod przewijanie: opis jest zwinięty, dopóki karta nie stanie
   w linii czytania (JS liczy to samo miejsce, które i tak decyduje o kolorze
   karty — patrz komentarz w strona.js). Bez skryptu klasa „.js-deck" nigdy nie
   dochodzi i opis zostaje w pełni widoczny, jak w wersji bez tego zachowania.

   Wysokość animuje się przez „grid-template-rows: 0fr → 1fr", nie przez
   max-height na sztywną wartość: opisy usług mają różną długość, a sztywny
   limit albo obcinałby najdłuższe, albo zostawiał pustą przestrzeń pod
   krótszymi. Grid liczy naturalną wysokość sam, więc każda karta rozwija się
   dokładnie na tyle, ile potrzebuje jej własny tekst. */
.js-deck .deck__opis{
display:grid;
grid-template-rows:0fr;
opacity:0;
transition:grid-template-rows 560ms var(--ease-out),opacity 320ms var(--ease-out),color 420ms var(--ease-out);
}
/* Odstęp od tytułu siedzi w środku zwijanego wiersza (padding, nie margin na
   zewnątrz): w stanie 0fr znika razem z treścią, więc nic nie trzeba osobno
   animować — a margin przy zmianie uruchamiał przeliczenie układu. */
.js-deck .deck__opis-in{
overflow:hidden;
min-height:0;
padding-top:.5rem;
}
.js-deck li[data-aktywna='true'] .deck__opis{
grid-template-rows:1fr;
opacity:1;
}
@media (min-width:900px){
  .js-deck .deck__opis-in{padding-top:0}
}
.deck__strzalka{
display:none;
flex:none;
width:2.6rem;
height:2.6rem;
border-radius:50%;
border:1px solid var(--line);
position:relative;
transition:border-color 420ms var(--ease-out),transform 240ms var(--ease-out);
}
.deck__strzalka::before,.deck__strzalka::after{content:'';position:absolute;background:var(--navy);transition:background-color 420ms var(--ease-out)}
.deck__strzalka::before{left:50%;top:50%;width:.85rem;height:1px;transform:translate(-50%,-50%)}
.deck__strzalka::after{left:50%;top:50%;width:.42rem;height:1px;transform:translate(.02rem,-50%) rotate(45deg);transform-origin:100% 50%}

/* --- karta w polu czytania --- */
.uslugi-deck li[data-aktywna='true'] .deck__karta{
border-color:transparent;
box-shadow:var(--shadow-2);
}
.uslugi-deck li[data-aktywna='true'] .deck__karta::before{opacity:1}
.uslugi-deck li[data-aktywna='true'] .deck__tytul{color:var(--bone)}
.uslugi-deck li[data-aktywna='true'] .deck__opis{color:rgba(245,242,236,.74)}
.uslugi-deck li[data-aktywna='true'] .deck__nr{
color:var(--brass-soft);
border-color:rgba(196,163,117,.45);
background:rgba(196,163,117,.08);
}
.uslugi-deck li[data-aktywna='true'] .deck__strzalka{border-color:rgba(245,242,236,.34);transform:translateX(2px)}
.uslugi-deck li[data-aktywna='true'] .deck__strzalka::before,
.uslugi-deck li[data-aktywna='true'] .deck__strzalka::after{background:var(--bone)}

.deck__karta:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

@media (min-width:900px){
  .deck__karta{
    grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr) auto;
    column-gap:clamp(1.4rem,3vw,2.8rem);
    padding-block:clamp(1.5rem,2.6vw,2.05rem);
    padding-inline:clamp(1.4rem,2.8vw,2.4rem);
  }
  .deck__opis{grid-column:auto;max-width:44ch}
  .deck__strzalka{display:block}
}

/* Cofnięcie nieaktywnych kart o pół kroku to jedyny ruch w tej sekcji —
   pod wyłączonym ruchem zostaje sama zmiana barwy, która niesie tę samą
   informację. */
@media (prefers-reduced-motion:no-preference){
  .uslugi-deck li .deck__karta{transform:scale(.978)}
  .uslugi-deck li[data-aktywna='true'] .deck__karta{transform:scale(1)}
}

@media (hover:hover) and (pointer:fine){
  .deck__karta:hover{box-shadow:var(--shadow-2)}
  .deck__karta:hover .deck__strzalka{transform:translateX(3px)}
  .uslugi-deck li:not([data-aktywna='true']) .deck__karta:hover .deck__tytul{color:var(--navy)}
}

/* ==========================================================================
   Strona główna — więcej treści nad zgięciem i dwie nowe sekcje
   ========================================================================== */

/* Hero. Wordmark rośnie do rangi jedynego dużego elementu na ekranie, motto
   z logo („Land and Home") stoi nad nim jak nadtytuł, a pod spodem jedno
   zdanie mówi, czym agencja jest — na pierwszym ekranie było dotąd samo hasło. */
.hero__motto{
font-size:var(--step--2);
letter-spacing:.34em;
text-transform:uppercase;
color:var(--brass-soft);
display:flex;align-items:center;gap:.8em;
text-shadow:0 1px 14px rgba(4,12,26,.6);
}
.hero__motto::before{content:'';width:2.2em;height:1px;background:var(--brass-soft);flex:none}
.hero__title--brand{font-size:clamp(2.6rem,1.4rem + 6.4vw,6.4rem);line-height:.95}
.hero__lede{max-width:50ch;font-size:var(--step-0);line-height:1.65;color:rgba(245,242,236,.86);text-shadow:0 1px 18px rgba(4,12,26,.7);text-wrap:pretty}
.hero__akcje{margin-top:.6rem}

/* --------------------------------------------------------------------------
   Z czym przychodzisz — trzy ścieżki
   -------------------------------------------------------------------------- */
/* Nie karty: trzy szpalty na wspólnej kresce, jak łamy w gazecie. Karta
   sugerowałaby produkt do wyboru, a to trzy opisy tej samej pracy z różnych
   stron stołu. Numer i kreska u góry wystarczą, żeby oko rozdzieliło kolumny. */
.sciezki__head{max-width:none}
.sciezki__head .prose{max-width:60ch}
.sciezki__siatka{display:grid;gap:clamp(2rem,4vw,3rem) clamp(2rem,4.5vw,4.5rem)}
.sciezka{
display:grid;
gap:.85rem;
align-content:start;
padding-top:clamp(1.2rem,2.4vw,1.7rem);
border-top:1px solid var(--line);
}
.sciezka__nr{font-size:var(--step--2);letter-spacing:.2em;color:var(--brass-deep);font-variant-numeric:tabular-nums}
.sciezka__tytul{font-size:var(--step-3);letter-spacing:-.03em;color:var(--ink)}
.sciezka__lede{font-size:var(--step-0);line-height:1.65;color:var(--ink-2);max-width:38ch;text-wrap:pretty}
.sciezka__lista{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.55rem}
.sciezka__lista li{
position:relative;
padding-left:1.35rem;
font-size:var(--step--1);
line-height:1.55;
color:var(--muted);
}
.sciezka__lista li::before{
content:'';
position:absolute;left:0;top:.68em;
width:.55rem;height:1px;
background:var(--brass);
}
.sciezka__lista a{
color:var(--ink);
border-bottom:1px solid rgba(15,42,82,.18);
transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out);
}
.sciezka__akcja{
display:inline-flex;align-items:center;gap:.55em;
margin-top:.6rem;
justify-self:start;
font-size:var(--step--1);
letter-spacing:.1em;
text-transform:uppercase;
color:var(--navy);
transition:color 200ms var(--ease-out),gap 200ms var(--ease-out);
}
.sciezka__akcja i{width:1.2em;height:1em;position:relative;flex:none}
.sciezka__akcja i::before,.sciezka__akcja i::after{content:'';position:absolute;background:currentColor}
.sciezka__akcja i::before{left:0;right:.15em;top:50%;height:1px}
.sciezka__akcja i::after{right:.15em;top:50%;width:.4em;height:1px;transform-origin:100% 50%;transform:rotate(45deg) translateY(-.5px)}
@media (hover:hover) and (pointer:fine){
  .sciezka__lista a:hover{color:var(--navy);border-bottom-color:var(--brass)}
  .sciezka__akcja:hover{color:var(--brass-deep);gap:.9em}
}
@media (min-width:640px) and (max-width:899px){
  .sciezki__siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Trzy szpalty w dwóch kolumnach: ostatnia bierze cały rząd, więc jej treść
     rozkładamy na dwie kolumny — inaczej zdanie i lista stały w lewej połowie,
     a prawa zostawała pusta na wysokość całej karty. */
  .sciezka:last-child{grid-column:1/-1;column-gap:clamp(2rem,4.5vw,4.5rem);grid-template-columns:repeat(2,minmax(0,1fr))}
  .sciezka:last-child .sciezka__nr,
  .sciezka:last-child .sciezka__tytul{grid-column:1/-1}
  .sciezka:last-child .sciezka__lede{grid-column:1;grid-row:3;max-width:none}
  .sciezka:last-child .sciezka__lista{grid-column:2;grid-row:3;margin-top:0}
  /* Przejście zostaje w lewej szpalcie, w jednej linii pionowej z „Zapytaj
     o wycenę" i „Zobacz oferty" z rzędu wyżej. */
  .sciezka:last-child .sciezka__akcja{grid-column:1;grid-row:4}
}
@media (min-width:900px){
  .sciezki__siatka{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sciezki__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    column-gap:clamp(2rem,4.5vw,4.5rem);
  }
  .sciezki__head .section__num{grid-column:1/-1}
  .sciezki__head h2{grid-column:1}
  .sciezki__head .prose{grid-column:2;padding-bottom:.3em}
}

/* --------------------------------------------------------------------------
   Finansowanie — trzy etapy w jednym pasie
   -------------------------------------------------------------------------- */
.finanse__in{display:grid;gap:clamp(2rem,4.5vw,3.5rem)}
.finanse__head{margin-bottom:0}
.finanse__akcja{margin-top:.5rem}
.finanse__etapy{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:etap}
.etap{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:.35rem 1.2rem;
padding-block:clamp(1.2rem,2.4vw,1.6rem);
border-top:1px solid var(--line);
}
.etap:last-child{border-bottom:1px solid var(--line)}
.etap__nr{
grid-row:1/3;
width:2.6rem;height:2.6rem;
display:grid;place-items:center;
border-radius:50%;
border:1px solid var(--line);
background:var(--paper);
font-size:var(--step--2);
letter-spacing:.14em;
text-indent:.14em;
color:var(--brass-deep);
font-variant-numeric:tabular-nums;
}
.etap h3{font-size:var(--step-1);letter-spacing:-.02em;color:var(--ink);align-self:center}
.etap p{font-size:var(--step--1);line-height:1.7;color:var(--muted);max-width:48ch}
@media (min-width:1000px){
  .finanse__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(3rem,7vw,7rem);align-items:start}
  .finanse__head{position:sticky;top:calc(var(--nav-h) + 2rem)}
}

/* --------------------------------------------------------------------------
   Drobne poprawki
   -------------------------------------------------------------------------- */
/* <address> w sekcji kontaktu miał domyślną kursywę przeglądarki — jedyny
   pochylony tekst na stronie, obok prostego telefonu i e-maila. */
.kontakt address{font-style:normal;line-height:1.7}

/* Oferta bez zdjęć: napis na środku zamiast pustego beżu, który wyglądał jak
   niedoładowany obrazek. Znak wodny — nie komunikat błędu. */
.karta__brak{
display:grid;place-items:center;
background:
  radial-gradient(circle at 1px 1px,rgba(16,23,32,.06) 1px,transparent 0),
  linear-gradient(135deg,var(--bone-2),var(--bone));
background-size:11px 11px,auto;
}
.karta__brak span{
font-size:var(--step--2);
letter-spacing:.22em;
text-transform:uppercase;
color:var(--muted);
padding:.5em 1.1em;
border:1px solid var(--line);
border-radius:999px;
background:rgba(255,255,255,.55);
}

/* ==========================================================================
   Dopracowanie — więcej oddechu tam, gdzie było ciasno
   ========================================================================== */

/* Nagłówek sekcji: trochę więcej odstępu do treści pod nim. Przy gęstszych
   sekcjach (ścieżki, finansowanie) 1,6–2,6rem czytało się jak brak przerwy,
   nie jak pauza przed nowym akapitem myśli. */
.section__head{margin-bottom:clamp(1.85rem,3.6vw,3rem)}
.contact-card .section__head,
.kontakt__dane .section__head{margin-bottom:0}

/* Hero: odstępy między mottem, tytułem, zdaniem i przyciskami rosły razem
   ze skalą kroju, więc przy dużym tytule zlewały się w jeden ciasny blok
   tekstu na zdjęciu. Rozdzielone osobno — każdy przeskok ma teraz swoją wagę,
   a przyciski kończą hero wyraźną przerwą, nie kolejną linią akapitu. */
.hero__in{row-gap:clamp(.85rem,2.2vh,1.3rem)}
.hero__lede{margin-top:.15rem}
.hero__akcje{margin-top:clamp(1rem,2.4vh,1.6rem)}

/* Ścieżki: karta miała jeden, płaski odstęp (.85rem) między numerem, tytułem,
   opisem, listą i linkiem — lista zlewała się z opisem nad nią, a link z
   listą pod spodem. Trzy różne przejścia dostają trzy różne wielkości: nr→
   tytuł zostaje ciasny (to jedna etykieta), tytuł→opis i opis→lista rosną,
   a lista→link dostaje najwięcej, bo zamyka całą kartę. */
.sciezka{row-gap:.5rem}
.sciezka__tytul{margin-top:.15rem}
.sciezka__lede{margin-top:.3rem}
.sciezka__lista{margin-top:.9rem;gap:.7rem}
.sciezka__akcja{margin-top:1.1rem}
.sciezki__siatka{gap:clamp(2.4rem,4.5vw,3.25rem) clamp(2rem,4.5vw,4.5rem)}

/* Finansowanie: kolumna z nagłówkiem i przyciskiem miała mniej powietrza niż
   sąsiednie sekcje, a krok w liście etapów był węższy niż jego własna treść
   (dwuwierszowy opis dotykał kreski pod spodem). */
/* row-gap, nie gap: przy min-width:1000px sekcja przechodzi na dwie kolumny
   z własnym, szerszym column-gap (3–7rem) — skrót „gap" nadpisałby go tu,
   bo ta reguła stoi w pliku niżej niż zapytanie o media dla tamtej wartości. */
.finanse__in{row-gap:clamp(2.5rem,5vw,4rem)}
.finanse__akcja{margin-top:.9rem}
.etap{padding-block:clamp(1.4rem,2.8vw,1.95rem);row-gap:.4rem}
.etap p{margin-top:.1rem}

/* ==========================================================================
   Równowaga szpalt — koniec z pustą połową ekranu
   ==========================================================================
   Kilka sekcji stało na tym samym schemacie: wąska kolumna z nagłówkiem po
   lewej i długa treść po prawej. Nagłówek zajmował trzy wiersze, treść obok
   trzydzieści — pod tytułem zostawało pół ekranu pustego tła. To nie był
   oddech, tylko dziura, i widać ją było w każdej sekcji tak samo.

   Rozwiązanie jest wszędzie to samo i celowo nie polega na rozciąganiu
   tekstu: pusta kolumna dostaje treść, której ktoś w tym miejscu i tak
   szuka — spis treści długiego artykułu, telefon i mail. Miary wierszy
   zostają węższe niż kolumny, bo o czytelności decyduje długość wiersza,
   a nie szerokość siatki. */

/* --- nagłówek sekcji: tytuł po lewej, zdanie wprowadzające po prawej ------ */
/* Nagłówek z jednym akapitem kończył się w połowie szerokości strony i prawa
   połowa pasa nad treścią była pusta. Akapit idzie do drugiej kolumny i siada
   na tej samej linii bazowej, co ostatni wiersz tytułu. */
@media (min-width:900px){
  .section__head--split{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    align-items:start;
    column-gap:clamp(2rem,4.5vw,4.5rem);
  }
  .section__head--split .section__num{grid-column:1/-1}
  .section__head--split h2{grid-column:1;grid-row:2;margin:0;max-width:20ch}
  /* Akapit zaczyna się w tym samym wierszu co tytuł, tylko odsunięty o pół
     kratki w dół: pierwsza linia tekstu siada wtedy na linii bazowej pierwszego
     wiersza tytułu, a nie nad jego wersalikami. */
  .section__head--split .prose,
  .section__head--split .lede{grid-column:2;grid-row:2;padding-top:.5em;max-width:52ch}
}

/* --- „Dlaczego my”: kolumna nagłówka dostaje kontakt ----------------------- */
.dlaczego__lewa{display:grid;gap:clamp(2rem,4vw,3rem);align-content:start}
.dlaczego__kontakt{
display:grid;
justify-items:start;
gap:.55rem;
padding-top:clamp(1.4rem,2.6vw,1.9rem);
border-top:1px solid var(--line-light);
}
.dlaczego__zdanie{
max-width:34ch;
font-size:var(--step--1);
line-height:1.7;
color:rgba(245,242,236,.72);
margin-bottom:.5rem;
text-wrap:pretty;
}
.dlaczego__tel{
font-family:var(--font-display);
font-size:var(--step-2);
letter-spacing:-.02em;
color:var(--bone);
font-variant-numeric:tabular-nums;
transition:color 200ms var(--ease-out);
}
.dlaczego__mail{
font-size:var(--step--1);
color:rgba(245,242,236,.78);
border-bottom:1px solid rgba(245,242,236,.24);
transition:color 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.dlaczego__akcja{
display:inline-flex;align-items:center;gap:.55em;
margin-top:.9rem;
font-size:var(--step--1);
letter-spacing:.1em;
text-transform:uppercase;
color:var(--brass-soft);
transition:color 200ms var(--ease-out),gap 200ms var(--ease-out);
}
.dlaczego__akcja i{width:1.2em;height:1em;position:relative;flex:none}
.dlaczego__akcja i::before,.dlaczego__akcja i::after{content:'';position:absolute;background:currentColor}
.dlaczego__akcja i::before{left:0;right:.15em;top:50%;height:1px}
.dlaczego__akcja i::after{right:.15em;top:50%;width:.4em;height:1px;transform-origin:100% 50%;transform:rotate(45deg) translateY(-.5px)}
@media (hover:hover) and (pointer:fine){
  .dlaczego__tel:hover{color:var(--brass-soft)}
  .dlaczego__mail:hover{color:var(--bone);border-bottom-color:var(--brass-soft)}
  .dlaczego__akcja:hover{color:var(--bone);gap:.9em}
}
/* Nagłówek już się nie przykleja do góry: teraz w tej kolumnie stoi pod nim
   treść, więc przyklejanie odrywałoby ją od tytułu i wracała ta sama pustka,
   tylko niżej. */
@media (min-width:900px){
  .dlaczego .section__head{position:static}
  .dlaczego__lewa{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
}

/* --- Pytania i odpowiedzi: to samo w kolumnie nagłówka --------------------- */
.faq-wrap__lewa{display:grid;gap:clamp(1.8rem,3.6vw,2.6rem);align-content:start}
.faq-wrap__pomoc{
display:grid;
justify-items:start;
gap:.5rem;
padding-top:clamp(1.3rem,2.4vw,1.8rem);
border-top:1px solid var(--line);
}
.faq-wrap__zdanie{
max-width:34ch;
font-size:var(--step--1);
line-height:1.7;
color:var(--ink-3);
margin-bottom:.45rem;
text-wrap:pretty;
}
.faq-wrap__tel{
font-family:var(--font-display);
font-size:var(--step-2);
letter-spacing:-.02em;
color:var(--navy);
font-variant-numeric:tabular-nums;
transition:color 200ms var(--ease-out);
}
.faq-wrap__mail{
font-size:var(--step--1);
color:var(--ink-2);
border-bottom:1px solid rgba(15,42,82,.2);
transition:color 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.section--navy .faq-wrap__zdanie{color:rgba(245,242,236,.72)}
.section--navy .faq-wrap__tel{color:var(--bone)}
.section--navy .faq-wrap__mail{color:rgba(245,242,236,.78);border-bottom-color:rgba(245,242,236,.24)}
.section--navy .faq-wrap__pomoc{border-top-color:var(--line-light)}
@media (hover:hover) and (pointer:fine){
  .faq-wrap__tel:hover{color:var(--brass-deep)}
  .faq-wrap__mail:hover{color:var(--navy);border-bottom-color:var(--brass)}
}
@media (min-width:1024px){
  .faq-wrap__head{position:static}
  .faq-wrap__lewa{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}

/* --- Strony redakcyjne: tekst i kolumna obok ------------------------------ */
/* Artykuł usługi ma po kilka tysięcy znaków i szedł jedną szpaltą przy lewej
   krawędzi — po prawej zostawało ponad pół ekranu papieru na całej długości
   przewijania. Kolumna obok niesie spis śródtytułów tej strony i kontakt,
   więc wypełnia ją informacja, a nie rozciągnięty do 100 znaków wiersz. */
.blok-uklad{display:grid;gap:clamp(2.4rem,5vw,3.5rem)}
.blok-aside{display:grid;gap:clamp(1.6rem,3vw,2.2rem);align-content:start}
.aside__etykieta{
font-size:var(--step--2);
letter-spacing:.2em;
text-transform:uppercase;
color:var(--brass-deep);
margin-bottom:.9rem;
}
.aside__spis ol{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.aside__spis li{border-top:1px solid var(--line)}
.aside__spis li:last-child{border-bottom:1px solid var(--line)}
.aside__spis a{
display:block;
padding:.62rem 0;
font-size:var(--step--1);
line-height:1.45;
color:var(--ink-2);
transition:color 180ms var(--ease-out),padding-left 200ms var(--ease-out);
}
.aside__kontakt{
display:grid;
justify-items:start;
gap:.45rem;
padding:clamp(1.3rem,2.6vw,1.7rem);
border:1px solid var(--line);
border-radius:var(--r-lg);
background:linear-gradient(176deg,var(--paper),var(--bone-2));
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.7);
}
.aside__zdanie{
font-size:var(--step--1);
line-height:1.65;
color:var(--ink-3);
margin-bottom:.5rem;
text-wrap:pretty;
}
.aside__tel{
font-family:var(--font-display);
font-size:var(--step-1);
letter-spacing:-.02em;
color:var(--navy);
font-variant-numeric:tabular-nums;
transition:color 200ms var(--ease-out);
}
.aside__mail{
font-size:var(--step--1);
color:var(--ink-2);
border-bottom:1px solid rgba(15,42,82,.2);
word-break:break-word;
transition:color 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.aside__btn{margin-top:.9rem}
.aside__data{font-size:var(--step--2);letter-spacing:.04em;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .aside__spis a:hover{color:var(--navy);padding-left:.4rem}
  .aside__tel:hover{color:var(--brass-deep)}
  .aside__mail:hover{color:var(--navy);border-bottom-color:var(--brass)}
}
@media (min-width:1000px){
  .blok-uklad{
    grid-template-columns:minmax(0,1fr) minmax(240px,22rem);
    column-gap:clamp(3rem,6vw,6rem);
    align-items:start;
  }
  /* Miara wiersza rośnie, ale nie do końca kolumny — 74 znaki to górna granica,
     powyżej której oko gubi początek następnego wiersza. */
  .blok{max-width:74ch}
  .blok-aside{position:sticky;top:calc(var(--nav-h) + 2rem)}
}

/* --- Nagłówek podstrony: tytuł po lewej, wprowadzenie po prawej ----------- */
.czolo__meta{font-size:var(--step--1)}
.czolo__meta a{
color:var(--ink-2);
border-bottom:1px solid rgba(15,42,82,.2);
transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out);
}
.czolo--foto .czolo__meta a{color:rgba(245,242,236,.8);border-bottom-color:rgba(245,242,236,.3)}
@media (hover:hover) and (pointer:fine){
  .czolo__meta a:hover{color:var(--navy);border-bottom-color:var(--brass)}
  .czolo--foto .czolo__meta a:hover{color:var(--bone);border-bottom-color:var(--brass-soft)}
}
.czolo__obok{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
@media (min-width:1000px){
  .czolo--split .czolo__in{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    column-gap:clamp(2.5rem,5vw,5rem);
    align-items:start;
    max-width:var(--wrap-max);
  }
  .czolo--split .czolo__in > .eyebrow{grid-column:1/-1;grid-row:1;margin-bottom:.9rem}
  .czolo--split .czolo__in > h1{grid-column:1;grid-row:2;margin:0;max-width:16ch}
  /* Zdanie startuje pół kratki niżej niż tytuł: pierwsza linia tekstu siada
     wtedy na linii bazowej pierwszego wiersza nagłówka. */
  .czolo--split .czolo__obok{grid-column:2;grid-row:2;padding-top:.55em}
  .czolo--split .czolo__obok .lede{max-width:46ch}
}

/* --- Usługi na stronie głównej: opisy nie chowają się na dużym ekranie ---- */
/* Zwijanie opisu pod przewijanie ma sens w jednej kolumnie na telefonie, gdzie
   sześć rozwiniętych kart to ekran i pół samego tekstu. Na szerokim ekranie
   opis stoi w OSOBNEJ kolumnie obok tytułu, więc jego zwinięcie niczego nie
   skracało — zostawiało pięć wierszy z tytułem i pustym pasem do strzałki.
   Kolor karty w linii czytania nadal prowadzi uwagę; informacja zostaje. */
@media (min-width:900px){
  .js-deck .deck__opis{grid-template-rows:1fr;opacity:1}
  .js-deck .deck__opis-in{overflow:visible}
}

/* Nagłówki, które siedzą w kolumnie razem z inną treścią, nie mogą nieść
   własnego marginesu dolnego — odstęp ustala już siatka kolumny. Bez tego
   między tytułem a kreską pod nim rosła druga, niepotrzebna przerwa. */
.faq-wrap__head,
.finanse__head,
.onas__head,
.dlaczego .section__head{margin-bottom:0}

/* „O nas”: przycisk trzymał się dołu kolumny i wisiał sam pod nagłówkiem,
   z pustym pasem między nimi. Idzie tuż pod tytuł — nagłówek, zdanie i
   przejście czytają się wtedy jako jeden blok, a wolne miejsce zostaje tam,
   gdzie nikomu nie przeszkadza: pod nim. */
@media (min-width:900px){
  .onas__akcja{align-self:start;margin:1.4rem 0 0}
}

/* Nagłówek podstrony ze zdjęciem: tekst stoi teraz w dwóch kolumnach, więc
   wchodzi w środek kadru — a tam w banerze marki siedzi jasny znak wodny
   „VERTO". Przyciemnienie było liczone pod tekst przy dolnej krawędzi (0,35
   u góry) i zdanie po prawej czytało się na nim z trudem. Środek kadru
   dostaje realne przyciemnienie, dół zostaje ciemny jak był. */
.czolo--foto::after{
background:
  linear-gradient(to top,rgba(7,23,47,.94) 6%,rgba(7,23,47,.78) 40%,rgba(7,23,47,.66) 72%,rgba(7,23,47,.5) 100%);
}

/* Na wąskim ekranie kolumny nie ma — wszystko idzie jedną szpaltą, więc blok
   z telefonem wchodziłby między tytuł a treść, którą ten tytuł zapowiada.
   Schodzi pod treść: „display:contents" wypuszcza dzieci kolumny wprost do
   szpalty, a kolejność ustawia order. Powyżej 900/1024 px reguły nie ma i
   kolumna wraca jako kolumna (razem z przyklejaniem, którego contents by nie
   przepuścił). */
@media (max-width:899px){
  .dlaczego .wrap{display:flex;flex-direction:column}
  .dlaczego__lewa{display:contents}
  .dlaczego .section__head{order:1;margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
  .dlaczego .wartosci{order:2}
  .dlaczego__kontakt{order:3;margin-top:clamp(2rem,6vw,2.6rem)}
}
@media (max-width:1023px){
  .faq-wrap{display:flex;flex-direction:column}
  .faq-wrap__lewa{display:contents}
  .faq-wrap__head{order:1;margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
  .faq-wrap .faq{order:2}
  .faq-wrap__pomoc{order:3;margin-top:clamp(2rem,6vw,2.6rem)}
}

/* Spis treści na wąskim ekranie stoi dopiero pod artykułem — czyli tam, gdzie
   nikomu już nie pomoże skoczyć do rozdziału. To narzędzie kolumny bocznej,
   więc bez kolumny go nie ma. Kontakt zostaje: pod przeczytanym tekstem jest
   dokładnie na miejscu. */
@media (max-width:999px){
  .aside__spis{display:none}
}

/* Skok ze spisu treści musi zostawić miejsce na przyklejony pasek nawigacji —
   inaczej śródtytuł ląduje dokładnie pod nim. */
.blok h2,.blok h3{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}