/* mokomo.pl — ciepły motyw: piaskowe tło, głęboka zieleń i fotografia wnętrz */

:root {
  /* powierzchnie */
  --tlo:        #f4f1ec;   /* ciepły piasek */
  --tlo-cieply: #ebe4d9;
  --papier:     #ffffff;
  --grafit:     #2a2723;   /* ciepła czerń — tekst */
  --olowek:     #6b6459;
  --kreska:     #e5ded2;
  --kreska-mocna: #d3c9b8;

  /* akcenty */
  --akcent:     #3f6152;   /* głęboka zieleń — przyciski, linki, pasy */
  --akcent-cd:  #2d473b;
  --akcent-tlo: #e7ecE7;
  --terakota:   #b5652c;   /* ciepły detal: drewno, cegła */
  --terakota-tlo: #f6ece1;
  --zielen:     #00875f;
  --zielen-tlo: #e3f2ec;

  /* rampa sekwencyjna (jeden odcień, jasny → ciemny) */
  --r1: #e0ece5; --r2: #bedcd0; --r3: #8fc4b0; --r4: #5aa78b; --r5: #2a7d60; --r6: #1b6b52; --r7: #17513f;

  /* zaokrąglenia i cienie */
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --cien:       0 1px 2px rgba(42,39,35,.04), 0 10px 24px -16px rgba(42,39,35,.3);
  --cien-mocny: 0 2px 4px rgba(42,39,35,.05), 0 18px 38px -18px rgba(42,39,35,.34);

  /* skala typograficzna */
  --t-2: 0.75rem;  --t-1: 0.8125rem; --t0: 1.0625rem; --t1: 1.3125rem;
  --t2: 1.625rem;  --t3: 2.0625rem;  --t4: 2.625rem;  --t5: 3.5rem;

  --miara: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rytm: clamp(3rem, 6vw, 5.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--grafit);
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t0);
  line-height: 1.7;
  font-feature-settings: "onum" 1;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .sygn, .btn, th, .dane dt, nav a, .znak {
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.8vw, var(--t5)); }
h2 { font-size: clamp(1.7rem, 3.6vw, var(--t4)); }
h3 { font-size: var(--t1); letter-spacing: -0.012em; }
h4 { font-size: var(--t0); letter-spacing: 0; }
p  { margin: 0 0 1.05em; max-width: var(--miara); }
a  { color: var(--akcent-cd); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--akcent); }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }

/* ——— układ sekcji ——— */
.arkusz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--rytm) var(--gutter);
}
.sygn {
  font-size: var(--t-1);
  color: var(--olowek);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.sygn::before {
  content: "";
  width: 0.55rem; height: 0.55rem; flex: none;
  background: var(--terakota); border-radius: var(--r-pill);
}
@media (min-width: 62rem) {
  .arkusz { grid-template-columns: 10.5rem minmax(0, 1fr); }
  .sygn { position: sticky; top: 6.5rem; align-self: start; }
}

.wstep { font-size: var(--t1); line-height: 1.55; color: #3a3d45; max-width: 48ch; }
.mala { font-size: var(--t-1); color: var(--olowek); line-height: 1.6; }
.mala--zrodlo { max-width: 70ch; margin-top: 1rem; }

/* ——— nagłówek ——— */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,243,238,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(216,204,190,0.6);
}
.top__in {
  max-width: 1240px; margin: 0 auto; padding: 0.8rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.znak {
  font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--grafit); text-decoration: none; line-height: 1;
}
.znak span { color: var(--terakota); }
.znak small { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--olowek); margin-top: 0.22rem; }
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; font-size: var(--t-1); }
.top nav a {
  color: #3a3d45; text-decoration: none; font-weight: 500;
  padding: 0.42rem 0.75rem; border-radius: var(--r-pill);
  transition: background 130ms ease, color 130ms ease;
}
.top nav a:hover { background: var(--akcent-tlo); color: var(--akcent-cd); }
.top nav a[aria-current="page"] { background: var(--tlo-cieply); color: var(--grafit); }
@media (max-width: 55.99rem) {
  .top__in { flex-wrap: wrap; row-gap: 0.6rem; }
  .top nav { order: 3; width: 100%; margin-left: 0; padding-top: 0.15rem; }
}

.btn {
  display: inline-block; font-size: var(--t-1); font-weight: 600; line-height: 1;
  padding: 0.85rem 1.35rem; border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid transparent; background: var(--akcent); color: #fff;
  box-shadow: 0 1px 2px rgba(63,97,82,.22), 0 10px 20px -12px rgba(63,97,82,.55);
  transition: background 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}
.btn:hover { background: var(--akcent-cd); color: #fff; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(63,97,82,.26), 0 14px 26px -12px rgba(63,97,82,.6); }
.btn:active { transform: translateY(0); }
.btn--puste { background: var(--papier); color: var(--akcent-cd); border-color: var(--kreska-mocna);
  box-shadow: var(--cien); }
.btn--puste:hover { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent-cd); }
.btn--duzy { font-size: var(--t0); padding: 1.02rem 1.75rem; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; } }

/* ——— hero ——— */
.hero { padding-top: clamp(2.5rem, 5vw, 4rem); }
.hero__lead { max-width: 15ch; }
.hero p.wstep { margin-top: 1.2rem; }
.hero__akcje { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.7rem 0 0; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 68rem) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* przekrój ściany — rysunek */
.hero figure {
  background: var(--papier); border-radius: var(--r-l); box-shadow: var(--cien);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
}
.przekroj { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.przekroj text { font-family: "Figtree", sans-serif; }
.przekroj .etykieta { font-size: 13.5px; fill: var(--grafit); font-weight: 600; }
.przekroj .opis { font-size: 12px; fill: var(--olowek); font-family: "Figtree", sans-serif; }
.przekroj .wynos { stroke: #9a9ea6; stroke-width: 0.9; fill: none; }
.przekroj .obrys { stroke: #e7ded3; stroke-width: 1.2; fill: none; }
.rysuj .wynos { stroke-dasharray: var(--dl, 400); stroke-dashoffset: var(--dl, 400);
  animation: kresl 1.1s cubic-bezier(.5,.1,.2,1) forwards; }
@keyframes kresl { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rysuj .wynos { animation: none; stroke-dashoffset: 0; } }

/* ——— liczby ——— */
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.9rem; margin-top: 2.8rem; }
.liczby div { background: var(--papier); border-radius: var(--r-m); padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: var(--cien); }
.liczby div:nth-child(1) { background: var(--akcent-tlo); box-shadow: none; }
.liczby div:nth-child(2) { background: var(--zielen-tlo); box-shadow: none; }
.liczby div:nth-child(3) { background: var(--terakota-tlo); box-shadow: none; }
.liczby div:nth-child(4) { background: var(--tlo-cieply); box-shadow: none; }
.liczby b { display: block; font-family: "Figtree", sans-serif; font-weight: 700; font-size: var(--t3);
  letter-spacing: -0.03em; line-height: 1; }
.liczby span { display: block; font-size: var(--t-1); color: #4d5158; margin-top: 0.5rem; line-height: 1.45; }

/* ——— karty zakresu ——— */
.zakres { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 40rem) { .zakres { grid-template-columns: 1fr 1fr; } }
@media (min-width: 78rem) { .zakres { grid-template-columns: repeat(3, 1fr); } }
.pozycja { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--cien);
  padding: 1.6rem 1.6rem 1.75rem; }
.pozycja h3 { margin-bottom: 0.6rem; }
.pozycja p { font-size: 0.97rem; color: #43474e; margin-bottom: 1rem; }
.pozycja ul { margin: 0; padding: 0; list-style: none; font-size: 0.94rem; line-height: 1.5; }
.pozycja li { padding: 0.45rem 0 0.45rem 1.35rem; position: relative; color: #43474e; }
.pozycja li + li { border-top: 1px solid #f1ebe3; }
.pozycja li::before { content: ""; position: absolute; left: 0.1rem; top: 0.9em;
  width: 0.4rem; height: 0.4rem; border-radius: var(--r-pill); background: var(--akcent); }

/* ——— wykresy: wspólne ——— */
.karta-wykresu {
  background: var(--papier); border-radius: var(--r-l); box-shadow: var(--cien);
  padding: clamp(1.3rem, 2.6vw, 2.1rem); margin-top: 2rem;
}
.karta-wykresu h3 { margin-bottom: 0.25rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.2rem 0 1.5rem; font-size: var(--t-1); }
.legenda span { display: flex; align-items: center; gap: 0.45rem; color: #43474e;
  background: var(--tlo); border-radius: var(--r-pill); padding: 0.32rem 0.8rem 0.32rem 0.55rem; }
.probka { width: 0.75rem; height: 0.75rem; border-radius: var(--r-pill); flex: none; }

/* harmonogram */
.gantt { display: grid; grid-template-columns: minmax(9.5rem, 15rem) minmax(0, 1fr); gap: 0.2rem 1rem; align-items: center; }
.gantt__skala { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); font-size: var(--t-2);
  color: var(--olowek); padding-bottom: 0.45rem; margin-bottom: 0.5rem; }
.gantt__skala span { text-align: center; }
.gantt__etap { font-size: 0.93rem; padding: 0.35rem 0; line-height: 1.3; }
.gantt__etap i { font-style: normal; color: var(--akcent); font-weight: 700; font-family: "Figtree", sans-serif;
  margin-right: 0.45rem; font-size: 0.8rem; }
.gantt__tor { position: relative; display: grid; grid-template-columns: repeat(10, 1fr);
  background-color: var(--tlo); border-radius: var(--r-pill); padding: 0.32rem 0;
  background-image: linear-gradient(90deg, rgba(35,38,44,.07) 1px, transparent 1px);
  background-size: 10% 100%; background-position: 0 0; }
.gantt__pasek {
  grid-row: 1; height: 1.05rem; border-radius: var(--r-pill); background: var(--akcent);
  grid-column: var(--od) / var(--do); margin: 0 2px; position: relative; cursor: default;
  transform-origin: left center; animation: rosnij .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--zw, 0s);
}
.gantt__pasek--proj { background: var(--r3); }
.gantt__pasek:hover { filter: brightness(1.1); }
@keyframes rosnij { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .gantt__pasek { animation: none; } }

/* wykres słupkowy poziomy */
.slupki { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 3.2rem;
  gap: 0.7rem 1rem; align-items: center; }
.slupki dt { font-size: 0.93rem; line-height: 1.25; }
.slupki dd { margin: 0; }
.slupki dd:not(.wartosc) { background: var(--tlo); border-radius: var(--r-pill); }
.slupek { height: 1.45rem; border-radius: var(--r-pill); width: var(--w); min-width: 0.5rem;
  transform-origin: left; animation: rosnij .55s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--zw, 0s); }
.slupki .wartosc { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .slupek { animation: none; } }
@media (max-width: 34rem) { .slupki { grid-template-columns: minmax(0,1fr) 3rem; } .slupki dt { grid-column: 1 / -1; } }

/* wykres grupowany */
.grupy { display: grid; gap: 1.35rem; }
.grupa__tyt { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.45rem; font-family: "Figtree", sans-serif; }
.grupa__pas { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 4px; }
.grupa__pas .pasek { height: 0.9rem; border-radius: var(--r-pill); width: var(--w); min-width: 0.5rem;
  transform-origin: left; animation: rosnij .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--zw, 0s); }
.grupa__pas em { font-style: normal; font-family: "Figtree", sans-serif; font-size: 0.84rem; color: #4d5158; white-space: nowrap; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .grupa__pas .pasek { animation: none; } }

/* dymek */
#dymek {
  position: fixed; z-index: 80; pointer-events: none; opacity: 0;
  background: var(--grafit); color: #f7f4ef; font-size: 0.82rem; line-height: 1.4;
  padding: 0.55rem 0.75rem; border-radius: var(--r-s); max-width: 17rem;
  box-shadow: var(--cien-mocny);
  transition: opacity 90ms linear; font-family: "Figtree", sans-serif;
}
#dymek.jest { opacity: 1; }
#dymek b { display: block; font-weight: 700; }

/* tabela danych */
details.tabelka { margin-top: 1.6rem; }
details.tabelka summary { font-size: var(--t-1); color: var(--akcent-cd); cursor: pointer;
  font-family: "Figtree", sans-serif; font-weight: 600; background: var(--akcent-tlo);
  display: inline-block; padding: 0.5rem 1rem; border-radius: var(--r-pill); list-style: none; }
details.tabelka summary::-webkit-details-marker { display: none; }
details.tabelka summary:hover { background: #dde5f1; }
table { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: 0.9rem;
  border-radius: var(--r-s); overflow: hidden; }
th, td { text-align: left; padding: 0.6rem 0.8rem; vertical-align: top; }
thead th { font-weight: 600; font-size: 0.82rem; color: var(--olowek); background: var(--tlo-cieply); }
tbody tr:nth-child(odd) { background: #faf7f3; }
tbody tr:last-child th, tbody tr:last-child td { font-weight: 700; }
td.l, th.l { text-align: right; font-variant-numeric: tabular-nums; }

/* ——— pakiety ——— */
.pakiety { display: grid; gap: 1.1rem; margin-top: 2.2rem; align-items: stretch; }
@media (min-width: 54rem) { .pakiety { grid-template-columns: repeat(3, 1fr); } }
.pakiet { background: var(--papier); border-radius: var(--r-l); box-shadow: var(--cien);
  padding: 1.8rem 1.7rem 1.9rem; display: flex; flex-direction: column; position: relative; }
.pakiet h3 { margin-bottom: 0.25rem; }
.pakiet:nth-child(1) { background: linear-gradient(180deg, var(--zielen-tlo) 0, var(--zielen-tlo) 5.5rem, var(--papier) 8.5rem); }
.pakiet:nth-child(3) { background: linear-gradient(180deg, var(--terakota-tlo) 0, var(--terakota-tlo) 5.5rem, var(--papier) 8.5rem); }
.pakiet--wyroz { background: linear-gradient(180deg, var(--akcent-tlo) 0, var(--akcent-tlo) 5.5rem, var(--papier) 8.5rem);
  box-shadow: var(--cien-mocny); outline: 2px solid var(--akcent); outline-offset: 0; }
.pakiet__znak { position: absolute; top: -0.75rem; left: 1.7rem; background: var(--terakota); color: #fff;
  font-family: "Figtree", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.32rem 0.75rem; border-radius: var(--r-pill); margin: 0; }
.pakiet__cena { font-family: "Figtree", sans-serif; font-weight: 700; font-size: var(--t2); letter-spacing: -0.03em; margin: 0.5rem 0 0.15rem; }
.pakiet__cena i { font-style: normal; font-size: 0.9rem; font-weight: 500; color: var(--olowek); letter-spacing: 0; }
.pakiet ul { list-style: none; margin: 1.2rem 0 1.7rem; padding: 0; font-size: 0.94rem; }
.pakiet li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; }
.pakiet li + li { border-top: 1px solid #f1ebe3; }
.pakiet li::before { content: ""; position: absolute; left: 0.15rem; top: 0.85em; width: 0.45rem; height: 0.45rem;
  border-radius: var(--r-pill); background: var(--akcent); }
.pakiet:nth-child(1) li::before { background: var(--zielen); }
.pakiet:nth-child(3) li::before { background: var(--terakota); }
.pakiet .btn { margin-top: auto; text-align: center; }

/* ——— strona główna: skrót zakresu ——— */
.skrot { list-style: none; margin: 2.2rem 0 2rem; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .skrot { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .skrot { grid-template-columns: repeat(4, 1fr); } }
.skrot li { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--cien);
  padding: 1.3rem 1.35rem 1.45rem; font-size: 0.95rem; line-height: 1.55; color: #43474e; }
.skrot b { display: block; font-family: "Figtree", sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: -0.012em; color: var(--grafit); margin-bottom: 0.35rem; }

/* ——— strona główna: trzy kroki ——— */
.kroki { list-style: none; counter-reset: krok; margin: 2.2rem 0 2rem; padding: 0;
  display: grid; gap: 1rem; }
@media (min-width: 52rem) { .kroki { grid-template-columns: repeat(3, 1fr); } }
.kroki li { counter-increment: krok; background: var(--papier); border-radius: var(--r-m);
  box-shadow: var(--cien); padding: 1.5rem 1.5rem 1.6rem 1.5rem; }
.krok__gora { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.krok__nr { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff;
  background: var(--akcent); width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill);
  display: grid; place-items: center; }
.krok__gora .ikona { width: 1.75rem; height: 1.75rem; color: var(--terakota); }
.kroki h3 { margin-bottom: 0.35rem; }
.kroki p { font-size: 0.97rem; margin: 0; color: #43474e; }

/* ——— strona główna: skrót cennika ——— */
.ceny-skrot { display: grid; gap: 1rem; margin: 2.2rem 0 2rem; }
@media (min-width: 52rem) { .ceny-skrot { grid-template-columns: repeat(3, 1fr); } }
.ceny-skrot div { border-radius: var(--r-m); padding: 1.5rem 1.5rem 1.6rem; }
.ceny-skrot div:nth-child(1) { background: var(--zielen-tlo); }
.ceny-skrot div:nth-child(2) { background: var(--akcent-tlo); }
.ceny-skrot div:nth-child(3) { background: var(--terakota-tlo); }
.ceny-skrot b { display: block; font-family: "Figtree", sans-serif; font-weight: 700; font-size: var(--t2);
  letter-spacing: -0.03em; line-height: 1; }
.ceny-skrot span { display: block; font-size: 0.95rem; color: #43474e; margin-top: 0.7rem; line-height: 1.5; }

/* ——— pas kontaktowy na stronie głównej ——— */
.kontakt-pas { display: grid; gap: 1rem; margin-top: 1.8rem; }
@media (min-width: 52rem) { .kontakt-pas { grid-template-columns: repeat(3, 1fr); } }
.kontakt-pas > div { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--cien);
  padding: 1.5rem 1.5rem 1.6rem; }
.kontakt-pas p { margin-bottom: 0.4rem; }
.kontakt-pas p:last-child { margin-bottom: 0; }
.kontakt-pas__duze { font-family: "Figtree", sans-serif; font-weight: 700; font-size: var(--t1);
  letter-spacing: -0.02em; }
.kontakt-pas__duze a { text-decoration: none; }
.kontakt-pas__duze a:hover { text-decoration: underline; }

/* ——— proces / gwarancje ——— */
.kafle { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 48rem) { .kafle { grid-template-columns: 1fr 1fr; } }
@media (min-width: 74rem) { .kafle { grid-template-columns: repeat(3, 1fr); } }
.kafle > div { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--cien);
  padding: 1.5rem 1.5rem 1.6rem; }
.kafle h3 { margin-bottom: 0.4rem; }
.kafle p { font-size: 0.97rem; margin-bottom: 0; color: #43474e; }

/* ——— FAQ ——— */
.faq { margin-top: 2rem; display: grid; gap: 0.7rem; }
.faq details { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--cien);
  padding: 0 1.4rem; }
.faq summary { cursor: pointer; padding: 1.15rem 2.2rem 1.15rem 0; position: relative; font-weight: 700;
  font-family: "Figtree", sans-serif; font-size: 1.02rem; letter-spacing: -0.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--akcent-tlo);
  color: var(--akcent-cd); border-radius: var(--r-pill); font-size: 1.05rem; font-weight: 500; line-height: 1; }
.faq details[open] summary::after { content: "–"; background: var(--akcent); color: #fff; }
.faq summary:hover { color: var(--akcent-cd); }
.faq .odp { padding: 0 0 1.3rem; font-size: 0.99rem; color: #43474e; }
.faq .odp p:last-child { margin-bottom: 0; }

/* ——— obszar ——— */
.miasta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.miasta li { font-size: 0.88rem; background: var(--papier); border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem; color: #43474e; box-shadow: var(--cien); }

/* ——— kontakt ——— */
.kontakt-grid { display: grid; gap: 1.6rem; margin-top: 1.8rem; }
@media (min-width: 56rem) { .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
form { background: var(--papier); border-radius: var(--r-l); box-shadow: var(--cien); padding: 1.7rem; }
label { display: block; font-size: var(--t-1); font-weight: 600; font-family: "Figtree", sans-serif; margin: 0 0 0.35rem; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 0.97rem; padding: 0.7rem 0.85rem; margin-bottom: 1.05rem;
  border: 1px solid var(--kreska-mocna); border-radius: var(--r-s); background: #fdfbf9; color: var(--grafit);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(63,97,82,.16); outline: none; }
textarea { min-height: 6.5rem; resize: vertical; }
form .btn { width: 100%; border: 0; cursor: pointer; font-family: "Figtree", sans-serif; }
.dane { margin: 0; font-size: 0.97rem; background: var(--tlo-cieply); border-radius: var(--r-l); padding: 1.5rem 1.6rem; }
.dane dt { font-size: var(--t-2); color: var(--olowek); margin-top: 1.2rem; font-weight: 700; }
.dane dt:first-child { margin-top: 0; }
.dane dd { margin: 0.15rem 0 0; }

/* ——— pas z wezwaniem ——— */
.pas-cta__akcje { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

/* ——— stopka ——— */
.stopka { background: #262a31; color: #d9d5ce; margin-top: var(--rytm);
  border-radius: var(--r-l) var(--r-l) 0 0; }
.stopka a { color: #fff; }
.stopka__in { max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.8rem) var(--gutter) 2rem;
  display: grid; gap: 2rem; }
@media (min-width: 52rem) { .stopka__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.stopka h4 { color: #fff; font-size: var(--t-1); margin-bottom: 0.9rem; }
.stopka p, .stopka li { font-size: 0.92rem; line-height: 1.65; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { padding: 0.18rem 0; }
.stopka .znak { color: #fff; }
.stopka .znak span { color: #d4ac6a; }
.stopka .znak small { color: #9a9d98; }
.nota { border-top: 1px solid #363b43; max-width: 1240px; margin: 0 auto;
  padding: 1.3rem var(--gutter) 2.2rem; font-size: 0.82rem; color: #94978f; display: flex;
  flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.nota p { max-width: 70ch; margin: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; z-index: 99; background: #fff; padding: 0.7rem 1.1rem;
  border-radius: var(--r-s); box-shadow: var(--cien-mocny); }

/* animacje słupków startują dopiero, gdy wykres wjedzie na ekran (tylko przy włączonym JS) */
.js .karta-wykresu .slupek,
.js .karta-wykresu .pasek,
.js .karta-wykresu .gantt__pasek { animation-play-state: paused; }
.js .karta-wykresu.widoczne .slupek,
.js .karta-wykresu.widoczne .pasek,
.js .karta-wykresu.widoczne .gantt__pasek { animation-play-state: running; }

/* ——— formularz: komunikaty i zgody ——— */
.komunikat { border-radius: var(--r-m); padding: 1rem 1.2rem; margin: 0 0 1.2rem; font-size: 0.97rem; }
.komunikat p { margin: 0; max-width: none; }
.komunikat--ok { background: var(--zielen-tlo); color: #0a5c43; border: 1px solid #bfe3d6; }
.komunikat--blad { background: #fdeeee; color: #8a2020; border: 1px solid #f3cfcf; }
.komunikat--blad ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.komunikat--blad li { padding: 0.1rem 0; }
.pole-blad { color: #a22727; font-size: var(--t-1); margin: -0.75rem 0 1rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #d08282; background: #fffafa; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zgoda { margin: 0.2rem 0 1.1rem; }
.zgoda label { display: flex; gap: 0.6rem; align-items: flex-start; font-family: "Figtree", sans-serif;
  font-weight: 400; font-size: 0.93rem; line-height: 1.5; color: #43474e; cursor: pointer; }
.zgoda input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--akcent); }

/* ——— ilustracje ——— */
.ilustracja { width: 100%; height: auto; display: block; }
.hero__ilustracja { margin: 0; background: var(--papier); border-radius: var(--r-l);
  box-shadow: var(--cien); padding: clamp(1rem, 2.2vw, 1.6rem); }
.ikona { width: 1.5rem; height: 1.5rem; display: block; color: var(--akcent); flex: none; }

/* ——— kafle z ikoną ——— */
.kafel-ikona { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill); background: var(--akcent-tlo); color: var(--akcent);
  margin-bottom: 0.95rem; }
.pozycja .kafel-ikona, .kafle .kafel-ikona { background: var(--terakota-tlo); color: var(--terakota); }
.skrot li { display: flex; flex-direction: column; }

/* ——— rzut mieszkania ——— */
.rzut { max-width: 760px; margin: 1.6rem auto 0; }
.rzut__pok rect { transition: fill 140ms ease; }
.rzut__pok:hover rect { fill: var(--akcent-tlo); }
.rzut__nazwa { font-family: "Figtree", sans-serif; font-size: 17px; font-weight: 700; fill: var(--grafit); }
.rzut__metraz { font-family: "Figtree", sans-serif; font-size: 14px; fill: var(--olowek); }
.rzut__skala text { font-family: "Figtree", sans-serif; font-size: 13px; fill: var(--olowek); }
@media (prefers-reduced-motion: reduce) { .rzut__pok rect { transition: none; } }

/* ——— ilustracja kierownika i mapa obszaru ——— */
.ilustracja--kierownik { max-width: 260px; margin-left: auto; margin-right: auto; }
.wspolpraca-grid { display: grid; gap: 1.6rem 2.5rem; align-items: center; }
@media (min-width: 56rem) { .wspolpraca-grid { grid-template-columns: minmax(0, 1fr) 260px; } }
.mapa { max-width: 560px; margin: 1.6rem auto 0; }
.mapa text { font-family: "Figtree", sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3.5px;
  stroke-linejoin: round; }
.mapa__km text, .mapa__km { font-size: 13px; fill: var(--olowek); text-anchor: middle; }
.mapa__miasto { font-size: 20px; font-weight: 700; fill: var(--grafit); }
.mapa__punkt { font-size: 14px; fill: #43474e; }
.mapa__punkt--dalej { font-size: 13px; fill: var(--olowek); }
.mapa__legenda text { font-size: 13px; fill: var(--olowek); }

.ilustracja--narzedzia { max-width: 240px; margin-left: auto; margin-right: auto; }

/* ——— hero ze zdjęciem ——— */
.hero-foto {
  position: relative;
  min-height: min(82vh, 760px);
  display: grid;
  place-items: center;
  padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 9vh, 7rem);
  background: #2a2723 center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}
.hero-foto::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,28,25,.62) 0%, rgba(30,28,25,.42) 45%, rgba(30,28,25,.66) 100%);
}
.hero-foto__tresc { max-width: 46rem; margin: 0 auto; text-align: center; }
.hero-foto h1 {
  font-size: clamp(2.1rem, 5.2vw, var(--t5));
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.hero-foto p { font-size: clamp(1rem, 1.6vw, var(--t1)); color: rgba(255,255,255,.88);
  margin: 0 auto 1.9rem; max-width: 40rem; }
.hero-foto__akcje { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.hero-foto__stopka { position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center;
  font-size: var(--t-1); color: rgba(255,255,255,.75); }

/* nagłówek nad zdjęciem — tylko na stronie głównej */
.top--nad-foto { position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; backdrop-filter: none; border-bottom: 0; }
.top--nad-foto .znak, .top--nad-foto .znak small { color: #fff; }
.top--nad-foto .znak span { color: #e2c9a3; }
.top--nad-foto nav a { color: rgba(255,255,255,.88); }
.top--nad-foto nav a:hover, .top--nad-foto nav a[aria-current="page"] {
  background: rgba(255,255,255,.16); color: #fff; }
.top--nad-foto .btn { background: #fff; color: var(--grafit); box-shadow: none; }
.top--nad-foto .btn:hover { background: var(--tlo-cieply); color: var(--grafit); }
@media (max-width: 55.99rem) {
  .top--nad-foto { position: static; background: var(--akcent-cd); }
}

/* ——— zielony pas z liczbami ——— */
.pas-zielony { background: var(--akcent); color: #fff; }
.pas-zielony__in { max-width: 1240px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) var(--gutter); }
.pas-zielony__gora { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 56rem) { .pas-zielony__gora { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.pas-zielony h2 { color: #fff; font-size: clamp(1.6rem, 3vw, var(--t3)); font-weight: 600; margin: 0;
  max-width: 18ch; }
.pas-zielony p { color: rgba(255,255,255,.86); margin-bottom: 1.5rem; }
.btn--jasny { background: #fff; color: var(--grafit); box-shadow: none; }
.btn--jasny:hover { background: var(--tlo-cieply); color: var(--grafit); }
.pas-zielony .liczby { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem); gap: 1.5rem 2rem; }
.pas-zielony .liczby div { background: transparent !important; box-shadow: none; padding: 0; border-radius: 0;
  border-top: 1px solid rgba(255,255,255,.28); padding-top: 1rem; }
.pas-zielony .liczby b { color: #fff; font-weight: 600; font-size: clamp(1.7rem, 3vw, var(--t3)); }
.pas-zielony .liczby span { color: rgba(255,255,255,.78); }

/* ——— realizacje: siatka zdjęć ——— */
.realizacje { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 46rem) { .realizacje { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .realizacje { grid-template-columns: repeat(4, 1fr); } }
.realizacja { position: relative; margin: 0; border-radius: var(--r-m); overflow: hidden;
  box-shadow: var(--cien); background: var(--tlo-cieply); }
.realizacja img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; display: block;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1); }
.realizacja:hover img { transform: scale(1.04); }
.realizacja figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem;
  color: #fff; font-size: 0.95rem; font-weight: 500;
  background: linear-gradient(180deg, rgba(30,28,25,0), rgba(30,28,25,.78)); }
.realizacja figcaption small { display: block; font-weight: 400; font-size: 0.82rem;
  color: rgba(255,255,255,.8); margin-top: 0.15rem; }
@media (prefers-reduced-motion: reduce) { .realizacja img, .realizacja:hover img { transition: none; transform: none; } }

/* ——— zdjęcie w treści ——— */
.foto-pas { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--cien); margin-top: 2rem; }
.foto-pas img { display: block; width: 100%; height: clamp(14rem, 34vw, 24rem); object-fit: cover; }
.btn--kontur { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); box-shadow: none; }
.btn--kontur:hover { background: #fff; color: var(--grafit); border-color: #fff; }

/* ——— wizualizacje ——— */
.galeria-filtr { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.6rem 0 0.5rem; }
.galeria-filtr__p { font: inherit; font-size: var(--t-1); font-weight: 600; line-height: 1; cursor: pointer;
  padding: 0.6rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--kreska-mocna);
  background: var(--papier); color: var(--olowek); transition: background 130ms ease, color 130ms ease; }
.galeria-filtr__p:hover { background: var(--akcent-tlo); color: var(--akcent-cd); }
.galeria-filtr__p[aria-pressed="true"] { background: var(--akcent); border-color: var(--akcent); color: #fff; }
html:not(.js) .galeria-filtr { display: none; }
.galeria-grupa { margin-top: 2.4rem; }
.galeria-grupa h2 { font-size: var(--t2); }
.galeria-grupa[hidden] { display: none; }
.galeria { columns: 2; column-gap: 1rem; }
@media (max-width: 29.99rem) { .galeria { columns: 1; } }
@media (min-width: 72rem) { .galeria { columns: 3; } }
.galeria__kadr { position: relative; display: block; margin: 0 0 1rem; break-inside: avoid;
  border-radius: var(--r-m); overflow: hidden; box-shadow: var(--cien); background: var(--tlo-cieply); }
.galeria__kadr img { aspect-ratio: 3 / 2; }
.galeria__kadr--pion img { aspect-ratio: 2 / 3; }
.galeria__link { display: block; }
.galeria__kadr img { width: 100%; height: auto; object-fit: cover; display: block;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1); }
.galeria__kadr:hover img { transform: scale(1.04); }
.galeria__kadr figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem;
  display: flex; align-items: center; gap: 0.6rem; pointer-events: none;
  color: #fff; font-size: 0.95rem; font-weight: 500;
  background: linear-gradient(180deg, rgba(30,28,25,0), rgba(30,28,25,.78)); }
.galeria__std { font-size: var(--t-2); font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  padding: 0.35rem 0.6rem; border-radius: var(--r-pill); color: #fff; }
.galeria__std--podstawowy { background: var(--zielen); }
.galeria__std--optymalny { background: #2f5c99; }
.galeria__std--premium { background: var(--terakota); }
@media (prefers-reduced-motion: reduce) { .galeria__kadr img, .galeria__kadr:hover img { transition: none; transform: none; } }

.podglad { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; }
.podglad::backdrop { background: rgba(30,28,25,.86); backdrop-filter: blur(4px); }
.podglad img { display: block; max-width: min(96vw, 1400px); max-height: 84vh; width: auto; height: auto;
  margin: 0 auto; border-radius: var(--r-m); }
.podglad__opis { color: rgba(255,255,255,.85); text-align: center; font-size: var(--t-1); margin: 0.8rem auto 0; }
.podglad__zamknij { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.4rem; height: 2.4rem; cursor: pointer;
  border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--grafit);
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
.podglad__zamknij:hover { background: #fff; }