/* FENSTRA, koncepcja "wzornik": wachlarz probek i karta pomiaru */

/* ---------- Fonty z wlasnego serwera ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonty/schibsted-grotesk-400-900-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonty/schibsted-grotesk-400-900-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: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonty/onest-300-700-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: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonty/onest-300-700-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;
}

/* ---------- Zmienne ---------- */
:root {
  --biel: #fff;
  --czern: #101312;
  --granat: #16254a;
  --zielen: #0f3d2e;
  --szary: #565b5a;
  --linia: #d6dad8;

  --naglowki: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  --tekst: "Onest", "Segoe UI", Arial, sans-serif;

  /* przykladowa paleta wachlarza */
  --k-biel: #c4a67c;
  --k-antracyt: #3a3c3f;
  --k-dab: #8f5d2d;
  --k-orzech: #5b3e24;
  --k-zielen: #a67430;
  --k-granat: #3d2e27;

  /* stan: wybrana probka (domyslnie antracyt) */
  --probka: var(--k-antracyt);
  --probka-linia: #e9eaea;
  --sloje: 0;

  --czas: .6s;
}

/* Wybor probki. Bez JS dziala przez :has, z JS przez data-probka na <html>.
   Reguly sa rozdzielone, zeby przegladarka bez :has nie odrzucila calej listy. */
:root:has(#probka-biel:checked) { --probka: var(--k-biel); --probka-linia: #3a2a14; --sloje: 1; }
:root[data-probka="biel"] { --probka: var(--k-biel); --probka-linia: #3a2a14; --sloje: 1; }
:root:has(#probka-antracyt:checked) { --probka: var(--k-antracyt); --probka-linia: #e9eaea; --sloje: 0; }
:root[data-probka="antracyt"] { --probka: var(--k-antracyt); --probka-linia: #e9eaea; --sloje: 0; }
:root:has(#probka-dab:checked) { --probka: var(--k-dab); --probka-linia: #f6ead8; --sloje: 1; }
:root[data-probka="dab"] { --probka: var(--k-dab); --probka-linia: #f6ead8; --sloje: 1; }
:root:has(#probka-orzech:checked) { --probka: var(--k-orzech); --probka-linia: #f1e4d3; --sloje: 1; }
:root[data-probka="orzech"] { --probka: var(--k-orzech); --probka-linia: #f1e4d3; --sloje: 1; }
:root:has(#probka-zielen:checked) { --probka: var(--k-zielen); --probka-linia: #2b1a08; --sloje: 1; }
:root[data-probka="zielen"] { --probka: var(--k-zielen); --probka-linia: #2b1a08; --sloje: 1; }
:root:has(#probka-granat:checked) { --probka: var(--k-granat); --probka-linia: #efe4da; --sloje: 1; }
:root[data-probka="granat"] { --probka: var(--k-granat); --probka-linia: #efe4da; --sloje: 1; }

/* Nazwa wybranego koloru: w podpisie rysunku, pod wachlarzem i w karcie */
.nazwa-koloru [data-k] { display: none; }
:root:has(#probka-biel:checked) .nazwa-koloru [data-k="biel"] { display: inline; }
:root[data-probka="biel"] .nazwa-koloru [data-k="biel"] { display: inline; }
:root:has(#probka-antracyt:checked) .nazwa-koloru [data-k="antracyt"] { display: inline; }
:root[data-probka="antracyt"] .nazwa-koloru [data-k="antracyt"] { display: inline; }
:root:has(#probka-dab:checked) .nazwa-koloru [data-k="dab"] { display: inline; }
:root[data-probka="dab"] .nazwa-koloru [data-k="dab"] { display: inline; }
:root:has(#probka-orzech:checked) .nazwa-koloru [data-k="orzech"] { display: inline; }
:root[data-probka="orzech"] .nazwa-koloru [data-k="orzech"] { display: inline; }
:root:has(#probka-zielen:checked) .nazwa-koloru [data-k="zielen"] { display: inline; }
:root[data-probka="zielen"] .nazwa-koloru [data-k="zielen"] { display: inline; }
:root:has(#probka-granat:checked) .nazwa-koloru [data-k="granat"] { display: inline; }
:root[data-probka="granat"] .nazwa-koloru [data-k="granat"] { display: inline; }

/* ---------- Podstawa ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
body {
  margin: 0;
  background: var(--biel);
  color: var(--czern);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: var(--naglowki);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
svg { display: block; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 3px solid var(--granat);
  outline-offset: 3px;
}

.kontener {
  width: 100%;
  max-width: 82.5rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3.5rem);
}

.ukryte {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.definicje { position: absolute; }

.pomin {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 50;
  background: var(--czern);
  color: var(--biel);
  padding: .75rem 1rem;
}
.pomin:focus { top: 1rem; }

/* Placeholder danych, ktorych nie ma w tresc.md: ma byc widoczny */
.brak {
  display: inline;
  padding: .08em .35em;
  border: 1px dashed var(--granat);
  color: var(--granat);
  font-size: .92em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .5rem 1.4rem;
  border: 1.5px solid var(--czern);
  border-radius: 0;
  background: transparent;
  color: var(--czern);
  font-family: var(--naglowki);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.przycisk--pelny { background: var(--zielen); border-color: var(--zielen); color: var(--biel); }
.przycisk--pelny:hover { background: var(--czern); border-color: var(--czern); }
.przycisk--kontur:hover { background: var(--czern); color: var(--biel); }
.przycisk--jasny { background: var(--biel); border-color: var(--biel); color: var(--zielen); }
.przycisk--jasny:hover { background: transparent; color: var(--biel); }

.lacze-strzalka {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-weight: 500;
}
.lacze-strzalka::after {
  content: "";
  width: .5rem; height: .5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}
.lacze-strzalka:hover::after { transform: translateX(.25rem) rotate(45deg); }

/* ---------- Naglowek ---------- */
.pasek-gorny {
  border-bottom: 1px solid var(--linia);
  font-size: .875rem;
}
.pasek-gorny-uklad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.5rem;
  padding-block: .55rem;
}
.pasek-gorny p { margin: 0; }
.pasek-adres { font-weight: 600; margin-right: auto !important; }

.naglowek-uklad {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}
.logo {
  font-family: var(--naglowki);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--czern);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.nawigacja { margin-left: auto; }
.nawigacja ul { display: flex; gap: .25rem; }
.nawigacja a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .7rem;
  text-decoration: none;
  font-size: 1rem;
}
.nawigacja a:hover { text-decoration: underline; }
.naglowek-akcje { display: flex; gap: .6rem; }
.menu { display: none; }

@media (max-width: 71.99rem) {
  .nawigacja, .naglowek-akcje { display: none; }
  .naglowek-uklad { flex-wrap: wrap; gap: 0 1rem; padding-block: .6rem; }
  .menu { display: block; margin-left: auto; }
  .menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 4.5rem;
    padding: 0 1rem;
    border: 1.5px solid var(--czern);
    font-family: var(--naglowki);
    font-weight: 600;
    cursor: pointer;
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--czern); color: var(--biel); }
  .menu nav {
    position: absolute;
    left: 0; right: 0;
    z-index: 30;
    margin-top: .6rem;
    background: var(--biel);
    border-block: 1px solid var(--czern);
    padding: .5rem clamp(1rem, 4vw, 3.5rem) 1rem;
  }
  .menu a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    border-bottom: 1px solid var(--linia);
    text-decoration: none;
    font-family: var(--naglowki);
    font-weight: 600;
    font-size: 1.25rem;
  }
  .naglowek { position: relative; }
}

/* ---------- Pierwszy ekran ---------- */
.pierwszy { padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3.5rem, 7vw, 6.5rem); }
.pierwszy h1 {
  font-size: clamp(2.6rem, 6.1vw, 5.5rem);
  letter-spacing: -.035em;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.wstep {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  max-width: 30em;
  margin: 0;
}
.pierwszy-siatka { display: grid; gap: 1.75rem; }

.elewacja { margin: 0; min-width: 0; }
.elewacja svg { width: 100%; height: auto; overflow: visible; }
.elewacja figcaption {
  margin-top: .9rem;
  font-size: .9375rem;
  color: var(--szary);
}
.elewacja figcaption strong { color: var(--czern); font-weight: 600; }

.el-kontekst { fill: none; stroke: var(--czern); stroke-width: 1.2; }
.el-kontekst * , .barwa *, .el-linie *, .szyba { vector-effect: non-scaling-stroke; }
.el-cokol { stroke-opacity: .32; }
.el-stopien { fill: var(--biel); }
.szyba { fill: #e7ebf1; stroke: var(--czern); stroke-width: 1; }
.barwa * {
  fill: var(--probka);
  stroke: var(--czern);
  stroke-width: 1;
  transition: fill var(--czas) ease;
}
.sloje-warstwa {
  opacity: var(--sloje);
  transition: opacity var(--czas) ease;
}
.el-linie {
  fill: none;
  stroke: var(--probka-linia);
  stroke-width: 1;
  transition: stroke var(--czas) ease;
}
.el-linie * { stroke-opacity: .7; }
.el-linie .el-uchwyt { stroke-width: 3.5; stroke-opacity: 1; }

/* ---------- Wachlarz probek ---------- */
.wzornik {
  --dl: min(20rem, 100vw - 4.5rem);   /* dlugosc paska */
  --gr: 3.5rem;                       /* szerokosc paska, cel dotykowy 56 px */
  --krok: 11deg;
  min-width: 0;
}
.wachlarz-przelacz {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--naglowki);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}
.wachlarz-przelacz::before {
  content: "";
  width: .9rem; height: .9rem;
  border: 1.5px solid var(--czern);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--biel), inset 0 0 0 9px var(--czern);
}
.wachlarz legend {
  font-size: .9375rem;
  color: var(--szary);
  margin-bottom: .25rem;
}
.wachlarz-pole {
  position: relative;
  width: calc(var(--dl) + 2.25rem);
  max-width: 100%;
  height: calc(var(--dl) * 1.02 + 3.75rem);
  transition: height var(--czas) ease;
}
.probka {
  --kat: calc((var(--i) - 2.5) * var(--krok));
  --unies: 0deg;
  position: absolute;
  left: .75rem;
  top: calc(50% - var(--gr) / 2);
  width: var(--dl);
  height: var(--gr);
  transform-origin: calc(var(--gr) / 2) 50%;
  transform: rotate(calc(var(--kat) + var(--unies)));
  transition: transform var(--czas) cubic-bezier(.3, .9, .3, 1);
  transition-delay: calc(var(--i) * 22ms);
  cursor: pointer;
}
.probka:hover { --unies: -1.5deg; }
.probka:has(input:checked) { --unies: -3deg; }
.probka:has(input:focus-visible) { z-index: 5; }
.probka input {
  position: absolute;
  left: calc(var(--gr) / 2);
  top: 50%;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.probka-lico {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 19, 18, .55);
  border-radius: calc(var(--gr) / 2) 3px 3px calc(var(--gr) / 2);
  background: var(--kolor);
  color: var(--napis);
}
.probka input:focus-visible + .probka-lico {
  outline: 3px solid var(--granat);
  outline-offset: 2px;
}
.probka[data-k="zielen"] input:focus-visible + .probka-lico,
.probka[data-k="granat"] input:focus-visible + .probka-lico,
.probka[data-k="antracyt"] input:focus-visible + .probka-lico {
  outline-color: var(--czern);
  box-shadow: inset 0 0 0 2px var(--biel);
}
.probka-sloje { position: absolute; inset: 0; width: 100%; height: 100%; }
.probka-nazwa {
  position: absolute;
  right: .8rem;
  top: .34rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.probka input:checked + .probka-lico .probka-nazwa { text-decoration: underline; text-underline-offset: .2em; }
.probka input:checked + .probka-lico .probka-nazwa::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
}
.probka[data-k="biel"] { --kolor: var(--k-biel); --napis: #101312; }
.probka[data-k="antracyt"] { --kolor: var(--k-antracyt); --napis: #fff; }
.probka[data-k="dab"] { --kolor: var(--k-dab); --napis: #1c1206; }
.probka[data-k="orzech"] { --kolor: var(--k-orzech); --napis: #fff; }
.probka[data-k="zielen"] { --kolor: var(--k-zielen); --napis: #1d1206; }
.probka[data-k="granat"] { --kolor: var(--k-granat); --napis: #fff; }

.nit {
  position: absolute;
  left: calc(.75rem + var(--gr) / 2);
  top: 50%;
  width: 1rem; height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border-radius: 50%;
  background: var(--biel);
  border: 1.5px solid var(--czern);
  box-shadow: inset 0 0 0 3px var(--biel), inset 0 0 0 8px var(--czern);
  z-index: 6;
  pointer-events: none;
}

/* Zlozony wachlarz: tylko gdy dziala JS i mozna go rozlozyc klikiem */
.js .wachlarz:not(.rozlozony) .wachlarz-pole { height: 6rem; cursor: pointer; }
.js .wachlarz:not(.rozlozony) .probka { --krok: 1.6deg; pointer-events: none; }
.js .wachlarz:not(.rozlozony) .probka:not(:has(input:checked)) .probka-nazwa { opacity: 0; }
.probka-nazwa { transition: opacity .3s; }

.wybrana { margin: .5rem 0 .35rem; font-size: 1.0625rem; }
.wybrana strong { font-family: var(--naglowki); font-weight: 600; }
.dopisek { margin: 0; font-size: .9375rem; color: var(--szary); max-width: 26em; }

.pierwszy-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}
.pierwszy-akcje .lacze-strzalka { flex-basis: 100%; }

@media (min-width: 62rem) {
  .pierwszy-siatka {
    grid-template-columns: minmax(23.5rem, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "wstep elewacja"
      "wzornik elewacja"
      "akcje elewacja";
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .wstep { grid-area: wstep; }
  .elewacja { grid-area: elewacja; align-self: center; }
  .wzornik { grid-area: wzornik; }
  .pierwszy-akcje { grid-area: akcje; }
}

/* ---------- Sekcje ---------- */
.sekcja { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }
.sekcja h2 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}
.sekcja-wstep { max-width: 34em; font-size: 1.125rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.duzy {
  font-family: var(--naglowki);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.sekcja--linia { border-top: 1px solid var(--linia); }

/* Oferta: wiersze, nie kafle */
.oferta { border-bottom: 1px solid var(--czern); }
.oferta li {
  display: grid;
  gap: .5rem 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--czern);
}
.oferta h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.025em; }
.oferta p { margin: 0; max-width: 34em; }
@media (min-width: 48rem) {
  .oferta li { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: baseline; padding-block: 1.9rem; }
}

/* Jak pracujemy: zielona plaszczyzna */
.sekcja--zielona { background: var(--zielen); color: var(--biel); overflow: hidden; }
.sekcja--zielona .kontener { position: relative; }
.sekcja--zielona :focus-visible { outline-color: var(--biel); }
.sekcja--zielona .brak { border-color: rgba(255, 255, 255, .8); color: var(--biel); }
.lisc {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, .075);
  stroke-width: 1.5;
  pointer-events: none;
}
.lisc path { vector-effect: non-scaling-stroke; }

.etapy { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.etap { border-top: 1px solid rgba(255, 255, 255, .4); }
.etap summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding-block: clamp(.9rem, 2vw, 1.5rem);
  cursor: pointer;
  color: rgba(255, 255, 255, .7);
  transition: color .2s;
}
.etap summary::-webkit-details-marker { display: none; }
.etap summary:hover, .etap[open] summary { color: var(--biel); }
.etap-nazwa {
  font-family: var(--naglowki);
  font-weight: 600;
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.etap-znak { position: relative; flex: none; width: 1.75rem; height: 1.75rem; }
.etap-znak::before, .etap-znak::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid currentColor;
  transition: transform .25s;
}
.etap-znak::after { transform: rotate(90deg); }
.etap[open] .etap-znak::after { transform: rotate(0deg); }
.etap-tresc { max-width: 40rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: 1.125rem; }
.etap-tresc p:last-child { margin-bottom: 0; }
.etapy-akcja { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* O nas */
.onas { display: grid; gap: 2.5rem; }
.onas p { max-width: 34em; }
@media (min-width: 56rem) {
  .onas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: end; }
}

/* Puste ramki na zdjecia */
.ramka {
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--czern);
  aspect-ratio: 16 / 10;
  padding: 1rem;
  text-align: center;
}
.ramka--biuro { aspect-ratio: 4 / 5; }
.ramka-napis { font-size: .9375rem; color: var(--szary); }

.realizacje { display: grid; gap: 2rem; }
.realizacja { margin: 0; }
.realizacja figcaption { margin-top: .75rem; font-size: .9375rem; }
@media (min-width: 48rem) {
  .realizacje { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem 2.5rem; align-items: end; }
  .realizacja--a { grid-column: 1 / span 7; }
  .realizacja--b { grid-column: 9 / span 4; }
  .realizacja--b .ramka { aspect-ratio: 4 / 5; }
  .realizacja--c { grid-column: 2 / span 4; }
  .realizacja--c .ramka { aspect-ratio: 4 / 5; }
  .realizacja--d { grid-column: 7 / span 6; }
}

/* Obszar */
.obszar { display: grid; gap: 1rem; }
.wojewodztwa {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--naglowki);
  font-weight: 600;
  font-size: 1.375rem;
}
@media (min-width: 56rem) {
  .obszar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
}

/* Kontakt */
.kontakt { display: grid; gap: 2.5rem; }
.dane { margin: 0; border-bottom: 1px solid var(--czern); }
.dane > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--czern);
}
.dane dt { color: var(--szary); font-size: .9375rem; }
.dane dd { margin: 0; font-size: 1.125rem; font-weight: 500; }
.mapa {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  padding: 1.5rem;
  border: 1px solid var(--czern);
}
.mapa p { margin: 0; }
.mapa-napis { color: var(--szary); font-size: .9375rem; margin-bottom: auto !important; }
.mapa-adres { font-family: var(--naglowki); font-weight: 600; font-size: 1.5rem; }
@media (min-width: 56rem) {
  .kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

/* ---------- Karta pomiaru: papierowy druk ---------- */
.sekcja--karta { padding-top: 0; }
.karta-otoczka {
  position: relative;
  isolation: isolate;
  margin-right: 7px;
}
/* kopia pod spodem, jak w bloczku samokopiujacym */
.karta-otoczka::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--biel);
  border: 1.5px solid var(--czern);
  transform: translate(7px, 7px);
}
.karta {
  background: var(--biel);
  border: 1.5px solid var(--czern);
}
.rubryka-nazwa {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--czern);
  margin-bottom: .15rem;
}
.odreczne { color: var(--granat); font-weight: 500; }
.drobne { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--szary); }

.karta-naglowek,
.rubryki,
.otwory,
.otwor-siatka {
  display: grid;
  gap: 1px;
  background: var(--czern);
}
.karta-naglowek, .rubryki { border-bottom: 1px solid var(--czern); }
.karta-naglowek > *, .rubryka { background: var(--biel); padding: .7rem .9rem; min-width: 0; }

.karta-firma { display: flex; flex-direction: column; justify-content: center; font-size: .875rem; }
.logo--karta { font-size: 1.25rem; min-height: 0; }
.karta-tytul { display: flex; flex-direction: column; justify-content: center; }
.karta-tytul h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.karta-tytul p { margin: .3rem 0 0; font-size: .875rem; }
.karta-meta { display: grid; gap: .5rem; align-content: center; }
.karta-meta p { margin: 0; }
.karta-meta .odreczne { display: block; border-bottom: 1px dotted var(--czern); padding-bottom: .15rem; }

.pole {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px dotted var(--czern);
  border-radius: 0;
  background: transparent;
  color: var(--granat);
  font-size: 1.0625rem;
  font-weight: 500;
}
.pole:focus-visible { outline-offset: 2px; }
.pole--uwagi { min-height: 6rem; resize: vertical; border: 0; line-height: 1.6; }

.kratki { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.kratki--pion { flex-direction: column; }
.kratka {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.kratka input {
  position: absolute;
  left: 0; top: 50%;
  width: 1.25rem; height: 1.25rem;
  margin: -.625rem 0 0;
  opacity: 0;
}
.kratka-pole {
  position: relative;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  border: 1.5px solid var(--czern);
  background: var(--biel);
}
.kratka-pole::before, .kratka-pole::after {
  content: "";
  position: absolute;
  left: -15%; top: 50%;
  width: 130%;
  border-top: 2.5px solid var(--granat);
  margin-top: -1.25px;
  opacity: 0;
}
.kratka-pole::before { transform: rotate(45deg); }
.kratka-pole::after { transform: rotate(-45deg); }
.kratka input:checked + .kratka-pole::before,
.kratka input:checked + .kratka-pole::after { opacity: 1; }
.kratka input:checked ~ * , .kratka:has(input:checked) { color: var(--granat); }
.kratka input:focus-visible + .kratka-pole { outline: 3px solid var(--granat); outline-offset: 3px; }

.karta-kolor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: .2rem 0 0;
  min-height: 2.75rem;
}
.karta-kolor .nazwa-koloru { font-size: 1.25rem; font-family: var(--naglowki); font-weight: 600; }
.karta-kolor a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; }
.karta-probka {
  position: relative;
  width: 4.5rem; height: 1.75rem;
  border: 1px solid var(--czern);
  background: var(--probka);
  transition: background-color var(--czas) ease;
  overflow: hidden;
}
.karta-probka svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: var(--sloje);
  transition: opacity var(--czas) ease;
}

.karta-pas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .9rem;
  background: var(--czern);
  color: var(--biel);
}
.karta-pas h4 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.karta-pas .drobne { color: var(--biel); }

.otwory { border-bottom: 1px solid var(--czern); }
.otwor { background: var(--biel); }
.otwor + .otwor { border-top: 3px solid var(--czern); }
.otwor-nr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.otwor-etykieta { font-family: var(--naglowki); font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.otwor-usun {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.otwor-usun:hover { color: var(--granat); text-decoration-thickness: 2px; }

.schematy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.schemat { position: relative; display: block; cursor: pointer; }
.schemat input {
  position: absolute;
  left: 50%; top: 1.5rem;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.schemat-pole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  height: 100%;
  min-height: 5.75rem;
  padding: .5rem .2rem .45rem;
  border: 1px dotted transparent;
  font-size: .8125rem;
  line-height: 1.2;
  text-align: center;
}
.schemat-pole svg {
  width: 3rem; height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: miter;
}
.schemat:hover .schemat-pole { border-color: var(--czern); }
.schemat input:checked + .schemat-pole {
  border: 1px solid var(--granat);
  box-shadow: inset 0 0 0 1.5px var(--granat);
  color: var(--granat);
  font-weight: 700;
}
.schemat input:checked + .schemat-pole svg { stroke-width: 2.4; }
.schemat input:focus-visible + .schemat-pole { outline: 3px solid var(--granat); outline-offset: 1px; }

.wymiary {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin: 0 0 .35rem;
  min-height: 2.25rem;
}
.puste { flex: 1 1 0; max-width: 5rem; border-bottom: 1px dotted var(--czern); height: 1.75rem; }

.karta-dodaj { padding: .9rem; border-bottom: 1px solid var(--czern); }
.podpis { height: 3.25rem; margin: 0 0 .3rem; border-bottom: 1px dotted var(--czern); }
.rubryki--podpisy { border-bottom: 0; }
.rubryka--wyslij { display: grid; gap: .8rem; align-content: start; }
.karta-akcje { display: flex; flex-wrap: wrap; gap: .6rem; }
.karta-stan {
  margin: 0;
  padding: .7rem .9rem;
  border: 1.5px solid var(--granat);
  color: var(--granat);
  font-weight: 500;
}

@keyframes nowy-wiersz {
  from { opacity: 0; transform: translateY(-.5rem); }
  to { opacity: 1; transform: none; }
}
.otwor--nowy { animation: nowy-wiersz .35s ease both; }

@media (min-width: 40rem) {
  .karta-naglowek { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
  .rubryki--dane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubryki--kolor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rubryki--podpisy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .schematy { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kratki--pion { flex-direction: row; }
}
@media (min-width: 62rem) {
  .rubryki--dane { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .otwor-siatka { grid-template-columns: 5.75rem minmax(0, 1fr) minmax(0, 2.7fr) minmax(0, 1.05fr) minmax(0, 1fr); }
  .otwor + .otwor { border-top-width: 1px; }
  .otwor-nr { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .kratki--pion { flex-direction: column; }
  .karta-otoczka { margin-right: 0; }
}

/* ---------- Stopka ---------- */
.stopka { border-top: 1px solid var(--czern); padding-block: 3rem; font-size: .9375rem; }
.stopka-uklad { display: grid; gap: 2rem; }
.stopka p { margin: 0 0 .5rem; }
.logo--stopka { font-size: 1.25rem; min-height: 0; margin-bottom: .75rem !important; }
.stopka nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.stopka nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48rem) {
  .stopka-uklad { grid-template-columns: 1fr 1fr 1.4fr; }
  .stopka nav ul { justify-content: flex-end; }
}

/* ---------- Przyklejone przyciski na telefonie ---------- */
.pasek-dolny { display: none; }
@media (max-width: 47.99rem) {
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
  .pasek-dolny {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--zielen);
    border-top: 1px solid var(--biel);
  }
  .pasek-dolny a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0 .5rem;
    font-family: var(--naglowki);
    font-weight: 600;
    font-size: 1rem;
    color: var(--biel);
    text-decoration: none;
    text-align: center;
  }
  .pasek-dolny a:first-child { background: var(--biel); color: var(--zielen); border-top: 1px solid var(--zielen); margin-top: -1px; }
  .pasek-dolny a:focus-visible { outline-offset: -5px; outline-color: currentColor; }
  .pasek-godziny { display: none; }
  .pierwszy-akcje .przycisk { flex: 1 1 9rem; }
  html { scroll-padding-bottom: 4rem; }
}

/* ---------- Mniej ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* ---------- Druk: sama karta ---------- */
@media print {
  .naglowek, .stopka, .pasek-dolny, .pomin,
  main > section:not(#wycena),
  #wycena h2, #wycena .sekcja-wstep,
  .karta-dodaj, .karta-akcje, .otwor-usun, .karta-kolor a, .karta-stan { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .sekcja, .kontener { padding: 0; max-width: none; }
  .karta-otoczka { margin: 0; }
  .karta-otoczka::before { display: none; }
  .karta-probka, .karta-pas, .karta-naglowek, .rubryki, .otwory, .otwor-siatka {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .otwor { break-inside: avoid; }
}

/* Znak z logo klienta obok napisu */
.logo-znak { height: 2.75rem; width: auto; margin-right: .6rem; flex: none; }

/* Legenda rubryki w srodku pola, nie na jego gornej krawedzi */
fieldset.rubryka > legend { float: left; width: 100%; }
fieldset.rubryka > legend + * { clear: both; }

/* Dlugi adres e-mail lamie sie na waskim ekranie */
a[href^="mailto:"] { overflow-wrap: anywhere; }
dd { min-width: 0; }