/* ==========================================================================
   SKANDOM — komponenty podstron
   Rozszerza css/style.css (tokeny, typografia, przyciski, header, stopka).
   Ładowane po style.css na każdej podstronie (nie na stronie głównej).
   ========================================================================== */

/* ---------- Narzędzia ---------- */
/* Stany startowe reveali GSAP (x: ±64) przesuwają sekcje w bok, zanim
   trigger odpali — bez klipa strona łapie poziomy scroll (zwłaszcza mobile).
   overflow-x: CLIP (nie hidden!) nie tworzy scroll containera, więc
   position: sticky wewnątrz działa dalej. Obejmuje też nadmiar --bleed. */
main { overflow-x: clip; }

/* Justowanie opisów na podstronach (kontynuacja reguły ze style.css) */
.prose p,
.page-hero .lead,
.project-card-body > p,
.split-copy p,
.editorial-grid p,
.doc-notice p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.cta-band .lead, .cta-band p { text-align: center; hyphens: none; }

/* Treść dla czytników ekranu — poza ekranem, ale w drzewie dostępności. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero podstrony ----------
   Kompaktowy, ciemny odpowiednik kinowego hero ze strony głównej. */
.page-hero {
  position: relative;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding-block: clamp(9rem, 20vh, 13rem) clamp(3.5rem, 8vh, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.18 0.01 220 / 0.9) 0%, oklch(0.18 0.01 220 / 0.72) 55%, oklch(0.18 0.01 220 / 0.94) 100%);
}
.page-hero-watermark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38rem, 55%);
  color: var(--brand);
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
}
.page-hero .breadcrumbs { margin-bottom: 1.75rem; }
.page-hero-kicker {
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 520;
  color: var(--brand-bright);
  margin-bottom: 1rem;
}
.page-title {
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  color: var(--ink-on-dark);
  max-width: 20ch;
}
.page-title em { font-style: italic; font-weight: 640; color: var(--brand-bright); }
.page-hero .lead {
  color: var(--muted-on-dark);
  margin-top: 1.5rem;
  line-height: 1.7;
}
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }

/* Pasek faktów pod hero (np. metraż / sypialnie / łazienki) */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-dark);
}
.hero-fact strong {
  display: block;
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--brand-bright);
  line-height: 1.1;
}
.hero-fact span { font-size: 0.9219rem; color: var(--muted-on-dark); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 0.875rem; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-on-dark); }
.breadcrumbs li:not(:last-child)::after {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}
.breadcrumbs a {
  color: var(--muted-on-dark);
  transition: color 180ms ease;
  /* cel dotykowy ≥24px bez zmiany layoutu */
  display: inline-block;
  padding-block: 0.1875rem;
  margin-block: -0.1875rem;
}
.breadcrumbs [aria-current='page'] { color: var(--brand-bright); font-weight: 540; }
@media (hover: hover) and (pointer: fine) {
  .breadcrumbs a:hover { color: var(--ink-on-dark); }
}
/* Wariant na jasnym tle */

/* ---------- Sekcje jasne/ciemne ---------- */
.section-light { background: var(--bg-light); }
.section-light-2 { background: var(--bg-light-2); }
.section-dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.section-dark .h2, .section-dark .h3 { color: var(--ink-on-dark); }
.section-dark .h2 em, .section-dark .h3 em { color: var(--brand-bright); }
.section-dark .lead, .section-dark p { color: var(--muted-on-dark); }

/* ---------- Proza / artykuł ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.375rem; }
.prose p { color: var(--muted-on-light); line-height: 1.75; text-wrap: pretty; }
.prose h2 {
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vh, 4rem);
  color: var(--ink-on-light);
}
.prose h3 {
  font-size: 1.25rem;
  font-weight: 660;
  margin-top: 2.25rem;
  color: var(--ink-on-light);
}
.prose ul, .prose ol { display: grid; gap: 0.75rem; padding-left: 1.25rem; }
.prose li { color: var(--muted-on-light); line-height: 1.7; }
.prose ul li { list-style: none; position: relative; padding-left: 1.625rem; margin-left: -1.25rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.9375rem;
  height: 0.5rem;
  border-left: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(-45deg);
}
.prose ol li { list-style: decimal; padding-left: 0.375rem; }
.prose ol li::marker { color: var(--brand-deep); font-weight: 660; }
.prose strong { font-weight: 640; color: var(--ink-on-light); }
.prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }

/* Układ edytorski: treść + boczna kolumna */
.editorial-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.editorial-aside { position: sticky; top: 7rem; }

/* ---------- Karty projektów (katalog) ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.project-card {
  display: flex;
  flex-direction: column;
  background: oklch(1 0 0 / 0.5);
  border: 1px solid var(--hairline-light);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.project-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-light-2);
}
.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.project-card-area {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--bg-dark);
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}
.project-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.375rem, 2.5vw, 1.875rem);
}
.project-card-name {
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--ink-on-light);
}
.project-card-version {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--brand-deep);
}
.project-card-body > p {
  margin-top: 0.875rem;
  font-size: 0.9531rem;
  line-height: 1.65;
  color: var(--muted-on-light);
  text-wrap: pretty;
}
.project-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.125rem;
}
.spec-chip {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--muted-on-light);
  background: oklch(1 0 0 / 0.6);
}
.project-card .link-arrow { margin-top: auto; padding-top: 1.5rem; color: var(--brand-deep); }
@media (hover: hover) and (pointer: fine) {
  .project-card:hover { border-color: var(--brand); transform: translateY(-4px); }
  .project-card:hover .project-card-media img { transform: scale(1.05); }
  .project-card:hover .link-arrow .ico { transform: translateX(4px); }
}

/* ---------- Galeria ---------- */
/* Równe rzędy: wysokość wiersza ustala siatka (grid-auto-rows), nie
   aspect-ratio kafelka — dzięki temu kafel szeroki (span 2) ma IDENTYCZNĄ
   wysokość jak sąsiedzi i żaden rząd nie jest poszarpany. dense domyka dziury. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: clamp(11rem, 21vw, 14.5rem);
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-light-2);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  isolation: isolate;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.gallery-item-wide { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.05); }
}
.gallery-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }


/* Natywny select ze spójną strzałką (zamiast systemowej) */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23586165' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.75rem;
  padding-right: 2.5rem;
}
.section-dark .field select,
.konf-form .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23C7C2B0' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Plakietka zoom na kaflach galerii — afordancja widoczna też bez hovera */
.gallery-zoom-hint {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: oklch(0.13 0.01 220 / 0.55);
  color: var(--ink-on-dark);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.gallery-zoom-hint .ico { width: 0.9375rem; height: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover .gallery-zoom-hint { opacity: 1; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: oklch(0.13 0.01 220 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-out), visibility 280ms;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox-caption {
  margin-top: 1rem;
  text-align: center;
  color: var(--muted-on-dark);
  font-size: 0.9219rem;
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  background: oklch(1 0 0 / 0.08);
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: background 200ms ease;
}
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-close .ico, .lightbox-nav .ico { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .lightbox-close:hover, .lightbox-nav:hover { background: oklch(1 0 0 / 0.18); }
}

/* ---------- Parametry / dane techniczne ---------- */
.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline-light);
}
.param {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--hairline-light);
  padding-right: 1.5rem;
}
.param dt { font-size: 0.8594rem; color: var(--muted-on-light); margin-bottom: 0.375rem; }
.param dd {
  font-stretch: 80%;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1.375rem;
  color: var(--ink-on-light);
  font-variant-numeric: tabular-nums;
}

/* Lista pomieszczeń */
.rooms-list { display: grid; gap: 0; border-top: 1px solid var(--hairline-light); }
.room-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--hairline-light);
}
.room-row dt { color: var(--ink-on-light); font-weight: 480; }
.room-row dd {
  color: var(--brand-deep);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rooms-total {
  margin-top: 1.25rem;
  font-size: 0.9531rem;
  color: var(--muted-on-light);
}

/* ---------- Warianty / pakiety energetyczne ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline-light);
  border-radius: 6px;
  background: oklch(1 0 0 / 0.5);
}
.tier-featured { border-color: var(--brand); background: oklch(1 0 0 / 0.8); }
.tier-name {
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.015em;
  font-size: 1.5rem;
  color: var(--brand-deep);
}
.tier-subtitle { margin-top: 0.25rem; font-size: 0.875rem; font-style: italic; color: var(--muted-on-light); }
.tier-prices { margin-top: 1.5rem; display: grid; gap: 0.625rem; }
.tier-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--hairline-light);
}
.tier-price span { font-size: 0.875rem; color: var(--muted-on-light); }
.tier-price strong {
  font-stretch: 80%;
  font-weight: 720;
  font-size: 1.25rem;
  color: var(--ink-on-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tier-params { margin-top: 1.375rem; display: grid; gap: 0.5rem; }
.tier-params li {
  font-size: 0.875rem;
  color: var(--muted-on-light);
  padding-left: 1.125rem;
  position: relative;
  line-height: 1.55;
}
.tier-params li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--brand);
}
.tier .btn { margin-top: auto; }
.price-note { margin-top: 1.5rem; font-size: 0.8594rem; color: var(--muted-on-light); }

/* Wycena indywidualna — gdy brak cen wariantu */

/* ---------- Rzuty kondygnacji ---------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.plan figure { margin: 0; }
.plan img {
  width: 100%;
  /* height:auto jest konieczne — bez niego atrybut height="…" (wymagany dla CLS)
     wygrywa z aspect-ratio i rzut rozjeżdża kartę na pełną wysokość pliku. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: oklch(1 0 0 / 0.75);
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  padding: 1rem;
  cursor: zoom-in;
}
.plan figcaption {
  margin-top: 0.875rem;
  font-size: 0.9219rem;
  font-weight: 540;
  color: var(--ink-on-light);
}

/* ---------- Zalety / cechy ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.feature { border-top: 2px solid var(--brand); padding-top: 1.25rem; }
.feature-ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: oklch(0.62 0.038 102 / 0.14);
  color: var(--brand-deep);
  margin-bottom: 1rem;
}
.feature-ico .ico { width: 1.25rem; height: 1.25rem; }
.feature h3 { font-size: 1.125rem; font-weight: 660; margin-bottom: 0.625rem; color: var(--ink-on-light); }
.feature p { font-size: 0.9219rem; color: var(--muted-on-light); line-height: 1.65; }

/* ---------- Kroki procesu ---------- */
.step { border-top: 2px solid var(--hairline-light); padding-top: 1.5rem; }
.step-no {
  font-stretch: 80%;
  font-weight: 720;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--brand);
  line-height: 1;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.1875rem; font-weight: 660; margin-bottom: 0.75rem; }
.step p { font-size: 0.9531rem; color: var(--muted-on-light); line-height: 1.65; }

/* ---------- Formularze ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 540; color: var(--ink-on-light); }
.field .req { color: var(--brand-deep); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 420;
  color: var(--ink-on-light);
  background: oklch(1 0 0 / 0.7);
  border: 1px solid oklch(0.24 0.012 220 / 0.5);
  border-radius: 4px;
  padding: 0.8125rem 0.9375rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  min-height: 44px;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px oklch(0.62 0.038 102 / 0.22);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: oklch(0.55 0.16 25);
}
.field-hint { font-size: 0.8594rem; color: var(--muted-on-light); }

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  grid-column: 1 / -1;
}
.consent input[type='checkbox'] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.1875rem;
  accent-color: var(--brand-deep);
  cursor: pointer;
}
.consent label {
  cursor: pointer; font-size: 0.8594rem; color: var(--muted-on-light); font-weight: 420; line-height: 1.6; }
.consent a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }

/* Grupa wyboru (radio) — używana w formularzu po katalog PDF.
   Wygląda jak reszta pól: ta sama wysokość, obrys i promień co input. */
.choice-group { display: flex; flex-direction: column; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group legend { font-size: 0.875rem; font-weight: 540; color: var(--ink-on-light); padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1rem;
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  font-size: 0.9219rem;
  color: var(--ink-on-light);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.choice input[type='radio'] { accent-color: var(--brand-deep); cursor: pointer; margin: 0; }
.choice:has(input:checked) { border-color: var(--brand); background: oklch(0.62 0.038 102 / 0.12); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: var(--brand); }
}

/* Wariant na ciemnym tle — jak pozostałe pola formularza */
.section-dark .choice-group legend { color: var(--ink-on-dark); }
.section-dark .choice {
  border-color: oklch(1 0 0 / 0.35);
  background: oklch(1 0 0 / 0.06);
  color: var(--ink-on-dark);
}
.section-dark .choice input[type='radio'] { accent-color: var(--brand-bright); }
.section-dark .choice:has(input:checked) {
  border-color: var(--brand-bright);
  background: oklch(0.68 0.04 102 / 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .section-dark .choice:hover { border-color: var(--brand-bright); }
}

.form-status {
  grid-column: 1 / -1;
  padding: 0.9375rem 1.125rem;
  border-radius: 4px;
  font-size: 0.9219rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-ok { background: oklch(0.62 0.038 102 / 0.16); color: var(--brand-deep); border: 1px solid var(--brand); }
.form-status.is-error { background: oklch(0.55 0.16 25 / 0.1); color: oklch(0.45 0.17 25); border: 1px solid oklch(0.55 0.16 25 / 0.4); }

/* Formularz na ciemnym tle */
.section-dark .field label { color: var(--ink-on-dark); }
.section-dark .field input, .section-dark .field select, .section-dark .field textarea {
  background: oklch(1 0 0 / 0.06);
  border-color: oklch(1 0 0 / 0.35);
  color: var(--ink-on-dark);
}
.section-dark .field .req { color: var(--brand-bright); }
.section-dark .consent label {
  cursor: pointer; color: var(--muted-on-dark); }
.section-dark .consent a { color: var(--brand-bright); }
.section-dark .field-hint { color: var(--muted-on-dark); }

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-block + .contact-block { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--hairline-light); }
.contact-block h3 { font-size: 1.0625rem; font-weight: 660; margin-bottom: 0.875rem; }
.contact-block p, .contact-block address { font-style: normal; color: var(--muted-on-light); line-height: 1.75; }
.contact-block a { color: var(--ink-on-light); font-weight: 540; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .contact-block a:hover { color: var(--brand-deep); }
}
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-light-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Realizacje ---------- */
@media (hover: hover) and (pointer: fine) {
  }

/* ---------- Kariera ---------- */
.jobs { display: grid; gap: 1rem; }
.job {
  border: 1px solid var(--hairline-light);
  border-radius: 6px;
  background: oklch(1 0 0 / 0.5);
  overflow: hidden;
}
.job-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.125rem, 2.5vw, 1.625rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 200ms ease;
}
.job-title { font-size: 1.1875rem; font-weight: 660; color: var(--ink-on-light); }
.job-meta { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-on-light); }
.job-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-light);
  color: var(--brand-deep);
  transition: transform 260ms var(--ease-out);
}
.job-toggle .ico { width: 1rem; height: 1rem; }
.job[open] .job-toggle, .job.is-open .job-toggle { transform: rotate(180deg); }
.job-body { padding: 0 clamp(1.125rem, 2.5vw, 1.625rem) clamp(1.375rem, 2.5vw, 1.875rem); }
@media (hover: hover) and (pointer: fine) {
  .job-head:hover { background: oklch(0.62 0.038 102 / 0.08); }
}

/* ---------- Band CTA ---------- */
.cta-band { background: var(--bg-dark); color: var(--ink-on-dark); }
.cta-band-inner { text-align: center; display: grid; justify-items: center; }
.cta-band .h2 { color: var(--ink-on-dark); max-width: 18ch; }
.cta-band .h2 em { color: var(--brand-bright); }
.cta-band .lead { color: var(--muted-on-dark); margin-top: 1.375rem; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-top: 2.25rem; }

/* ---------- Media pełnokadrowe (jak sekcja Technologia na SG) ---------- */
.split-media {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: stretch;
  min-height: clamp(26rem, 58vh, 38rem);
}
.split-copy { align-self: center; }
/* Pełny kadr do prawej krawędzi ekranu — odsunięcie liczone od kontenera
   przez --bleed (patrz style.css). Procentów użyć tu NIE MOŻNA: w marginesie
   elementu siatki liczą się od obszaru siatki, nie od kontenera. */
.split-figure {
  position: relative;
  align-self: stretch;
  margin-right: calc(var(--bleed) * -1);
  margin-block: 0;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  isolation: isolate;
}
.split-figure img { width: 100%; height: 100%; object-fit: cover; }
.split-figure figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 0.8906rem;
  color: var(--ink-on-dark);
  background: linear-gradient(to top, oklch(0.13 0.01 220 / 0.85), oklch(0.13 0.01 220 / 0));
}
/* Lustrzane odbicie — zdjęcie do lewej krawędzi */
.split-media-rev { grid-template-columns: 6fr 5fr; }
.split-media-rev .split-figure { margin-right: 0; margin-left: calc(var(--bleed) * -1); border-radius: 0 4px 4px 0; order: -1; }
/* 100vw nie uwzględnia pionowego paska przewijania — drobną nadwyżkę przycinamy,
   zamiast dopuścić poziomy scroll (tak samo jak .section-technologia na SG). */
.section:has(.split-media) { overflow-x: clip; }

/* ---------- Responsywność ---------- */
@media (max-width: 980px) {
  .editorial-grid, .contact-grid { grid-template-columns: 1fr; }
  .editorial-aside { position: static; }
  }

@media (max-width: 860px) {
  .page-hero { padding-block: clamp(7.5rem, 16vh, 9.5rem) clamp(2.5rem, 6vh, 3.5rem); }
  .page-hero-watermark { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery-item-wide { grid-column: span 1; }
  .split-media, .split-media-rev { grid-template-columns: 1fr; min-height: 0; gap: 2rem; }
  .split-figure {
    order: -1;
    margin-right: 0;
    margin-inline: calc(var(--bleed) * -1);
    align-self: stretch;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
  .split-media-rev .split-figure { margin-left: 0; margin-inline: calc(var(--bleed) * -1); border-radius: 0; }
  .hero-facts { gap: 1.5rem 2rem; }
}

@media (max-width: 540px) {
    .page-hero-cta .btn, .cta-band-actions .btn { width: 100%; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .project-card, .project-card-media img, .gallery-item img,   .lightbox { transition: opacity 200ms ease; }
}

/* ---------- Zestaw chipów poza kartą projektu ----------
   Kontener dla .spec-chip użytego samodzielnie (np. zakres specyfikacji
   na podstronie projektu). .project-card-specs jest związany z kartą. */

/* Odnośnik/akcja pod blokiem treści (poza rytmem .prose > * + *) */
.block-foot { margin-top: 2rem; }

/* ---------- Bloki wewnątrz sekcji ----------
   Drobniejszy rytm niż .section-head — dla podnagłówków i kolejnych bloków
   w obrębie jednej sekcji (np. „Plan domu" / „Rzut 3D" nad .plans-grid). */
.block-head { margin-bottom: 1.5rem; }
.section-block { margin-top: clamp(3rem, 6vh, 4.5rem); }

/* ---------- Kafelki-odnośniki (np. zakres specyfikacji → technologia) ----------
   Rząd chipów, które są linkami. Korzysta z wyglądu .spec-chip. */
.spec-links { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.spec-links .spec-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .spec-links .spec-chip:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
    background: oklch(1 0 0 / 0.9);
  }
}
.spec-links-foot { margin-top: 2rem; }

/* ---------- Dane kontaktowe w bandzie CTA ---------- */
.cta-band-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin-top: 1.25rem;
}
.cta-band-contact a {
  font-weight: 620;
  color: var(--brand-bright);
  transition: color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cta-band-contact a:hover { color: var(--ink-on-dark); }
}

/* ---------- Rytm pionowy w kolumnie tekstu splitu ----------
   Dopisane przy budowie indywidualne-projekty.html: .split-copy nie miał
   własnych odstępów, więc nagłówek, lead i link-arrow sklejały się ze sobą.
   Konwencja jak w .prose > * + *. */
.split-copy > * + * { margin-top: 1.5rem; }

/* ---------- Karta projektu: wariant szeroki ----------
   Domyślna .projects-grid daje na desktopie 3 kolumny — przy 5 projektach
   ostatni rząd zostawiałby dziurę. Karta akcentowa zajmuje 2 kolumny
   i układa się poziomo (media | treść), co domyka siatkę i wprowadza
   zamierzoną asymetrię. Poniżej 62rem zachowuje się jak zwykła karta. */
@media (min-width: 62rem) {
  .project-card-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
  }
  .project-card-wide .project-card-media {
    flex: 1 1 48%;
    aspect-ratio: auto;
    min-height: 24rem;
  }
  .project-card-wide .project-card-body {
    flex: 1 1 52%;
    justify-content: center;
    padding: clamp(1.875rem, 3vw, 2.75rem);
  }
  .project-card-wide .project-card-name { font-size: 2rem; }
  .project-card-wide .link-arrow { margin-top: 1.75rem; padding-top: 0; }
}

/* ---------- Rząd przycisków pod treścią sekcji ---------- */
.section-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: clamp(1.75rem, 3vh, 2.25rem); }

/* ---------- Lista chipów poza kartą projektu (np. zakres specyfikacji) ---------- */

@media (max-width: 540px) {
  .section-actions .btn { width: 100%; }
}

/* ---------- Stopka karty wariantu cennika ----------
   Dociąga CTA do dołu .tier, żeby warianty o różnej liczbie parametrów
   miały wyrównane przyciski (nadpisuje bazowy margin-top z .tier-foot). */
.tier-foot {
  margin-top: auto;
  padding-top: clamp(1.5rem, 3vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
}
.tier-foot .btn { margin-top: 0; }

/* ==========================================================================
   Uzupełnienia — dopisane przy budowie strony „Technologia"
   ========================================================================== */

/* ---------- Rytm pionowy rzędów w obrębie jednej sekcji ----------
   Dla stron o długiej treści: kolejne rzędy (.editorial-grid / .split-media /
   .prose) rozdzielone jednym, spójnym odstępem. */
.section-rows { display: grid; gap: clamp(3.5rem, 8vh, 6rem); }

/* Proza nie zaczyna się pustym marginesem (.prose h3 ma stałe margin-top) */
.prose > :first-child { margin-top: 0; }

/* ---------- Proza na ciemnym tle ----------
   .prose zakłada jasne tło i wygrywa specyficznością z .section-dark p —
   tutaj przywracamy kolory dla ciemnych sekcji. */
.section-dark .prose p,
.section-dark .prose li { color: var(--muted-on-dark); }
.section-dark .prose h2,
.section-dark .prose h3,
.section-dark .prose strong { color: var(--ink-on-dark); }
.section-dark .prose ul li::before { border-color: var(--brand-bright); }
.section-dark .prose ol li::marker { color: var(--brand-bright); }
.section-dark .prose a { color: var(--brand-bright); }

/* ---------- Siatka zdjęć z podpisem ----------
   Materiał poglądowy (zdjęcia z budowy, warianty elewacji). Kolumny mają
   górny limit szerokości — pliki źródłowe są niewielkie (380–700 px)
   i nie znoszą powiększania. Lightbox podpina [data-lightbox] z js/site.js. */
.media-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 21rem));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  justify-content: start;
}
.media-figures figure { margin: 0; }
.media-figures img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  background: var(--bg-light-2);
  cursor: zoom-in;
}
.media-figures figcaption {
  margin-top: 0.75rem;
  font-size: 0.8906rem;
  line-height: 1.6;
  color: var(--muted-on-light);
}

/* ---------- Dopisek przy parametrze (np. wartość sprzed zmiany przepisów) ---------- */
.param-note {
  display: block;
  margin-top: 0.25rem;
  font-stretch: 100%;
  font-size: 0.8125rem;
  font-weight: 420;
  letter-spacing: 0;
  color: var(--muted-on-light);
}

/* ---------- Lista chipów (np. marki, materiały) ----------
   Wrapper dla istniejącego .spec-chip poza kartą projektu. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* ---------- Zabezpieczenie pełnokadrowego wykadrowania ----------
   .split-figure wychodzi poza kontener przez ujemny margines
   (margin-right: calc(50% - 50vw)). Procent w marginesie liczony jest od
   OBSZARU SIATKI, nie od .container, więc bleed przestrzeliwuje i pojawia się
   poziomy pasek przewijania. `overflow-x: clip` na sekcji przycina nadmiar do
   krawędzi ekranu (efekt wizualny bez zmian) i — inaczej niż `hidden` —
   nie tworzy kontekstu przewijania, więc `position: sticky` nadal działa. */

/* ---------- Podtytuł grupy rzutów (np. „Plan domu” / „Rzut 3D”) ---------- */
.plans-subhead {
  margin-bottom: clamp(1.25rem, 2.5vh, 1.75rem);
  color: var(--ink-on-light);
}
.plans-grid + .plans-subhead { margin-top: clamp(3rem, 6vh, 4.5rem); }

/* ---------- Osoba kontaktowa ----------
   Wizytówka opiekuna: zdjęcie (span 2 wiersze) + nazwisko + lokalizacja,
   pod spodem kanały kontaktu. Działa na jasnym i ciemnym tle. */
.contact-person {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin-top: clamp(2rem, 4vh, 2.75rem);
  padding-top: clamp(2rem, 4vh, 2.75rem);
  border-top: 1px solid var(--hairline-light);
}
.contact-person img {
  grid-row: span 2;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-light-2);
}
.contact-person-name {
  align-self: end;
  font-stretch: 80%;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.1875rem;
  color: var(--ink-on-light);
}
.contact-person-meta {
  align-self: start;
  font-size: 0.875rem;
  color: var(--muted-on-light);
}
.contact-person-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.75rem;
  margin-top: 1.125rem;
}
.contact-person-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9219rem;
  font-weight: 540;
  color: var(--ink-on-light);
  transition: color 180ms ease;
}
.contact-person-links .ico { width: 1rem; height: 1rem; color: var(--brand-deep); }
@media (hover: hover) and (pointer: fine) {
  .contact-person-links a:hover { color: var(--brand-deep); }
}
.section-dark .contact-person { border-top-color: var(--hairline-dark); }
.section-dark .contact-person-name { color: var(--ink-on-dark); }
.section-dark .contact-person-meta { color: var(--muted-on-dark); }
.section-dark .contact-person-links a { color: var(--ink-on-dark); }
.section-dark .contact-person-links .ico { color: var(--brand-bright); }
@media (hover: hover) and (pointer: fine) {
  .section-dark .contact-person-links a:hover { color: var(--brand-bright); }
}

/* ---------- Komunikat formularza na ciemnym tle ----------
   .form-status ma kolory dobrane pod jasną sekcję (ciemna czerwień / khaki
   „deep"). Na .section-dark tekst wypadał w kontraście ok. 2,5:1 — czyli
   nieczytelnie. Tu odwracamy jasności: tło ciemniejsze, tekst jaśniejszy. */
.section-dark .form-status.is-ok {
  background: oklch(0.62 0.038 102 / 0.16);
  color: var(--brand-bright);
  border-color: var(--brand);
}
.section-dark .form-status.is-error {
  background: oklch(0.55 0.16 25 / 0.18);
  color: oklch(0.8 0.11 25);
  border-color: oklch(0.6 0.16 25 / 0.55);
}

/* ---------- <select> w formularzu na ciemnym tle ----------
   Rozwijana lista natywnego <select> dziedziczy kolory po polu. Na ciemnym
   tle pole ma prawie przezroczyste białe tło (oklch(1 0 0 / 0.06)) i jasny
   tekst — przeglądarka rysowałaby popup jako biały tekst na białym tle.
   `color-scheme: dark` + jawne kolory <option> to naprawiają. */
.section-dark .field select { color-scheme: dark; }
.section-dark .field select option {
  background: var(--bg-dark-2);
  color: var(--ink-on-dark);
}

/* ---------- Lista kanałów kontaktu w bloku ---------- */
.contact-links { display: grid; gap: 0.5rem; }
.contact-links a { display: inline-flex; align-items: center; gap: 0.625rem; }
.contact-links .ico { width: 1rem; height: 1rem; flex: none; color: var(--brand-deep); }

/* ==========================================================================
   Uzupełnienia — dopisane przy budowie strony „Przewodnik"
   ========================================================================== */

/* ---------- Długa sekwencja kroków (przewodnik po procesie) ----------
   .step-flow > li {
  display: grid;
  grid-template-columns: minmax(4rem, 7rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vh, 2.75rem);
  border-bottom: 1px solid var(--hairline-light);
}
.step-flow .step-no { margin-bottom: 0; }
.step-flow h3 {
  font-size: 1.1875rem;
  font-weight: 660;
  margin-bottom: 0.625rem;
  color: var(--ink-on-light);
}
.step-flow p {
  color: var(--muted-on-light);
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}
.step-flow a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 640px) {
  .step-flow > li { grid-template-columns: 1fr; gap: 0.5rem; }
  .step-flow .step-no { font-size: 2.25rem; }
}

/* ---------- Dokumenty prawne (polityki) ----------
   Treść polityk dostarcza administrator danych — to dokument prawny, więc do
   czasu jej otrzymania strona pokazuje notkę o statusie (.doc-notice) oraz
   szkielet dokumentu (.doc-outline): nagłówki sekcji z jednozdaniowym opisem
   tego, co się w nich znajdzie. .doc-notice-ico { width: 2rem; height: 2rem; flex: none; color: var(--brand-deep); }
.doc-notice-body > * + * { margin-top: 1rem; }
.doc-notice h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 660;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-on-light);
}
.doc-notice p { color: var(--muted-on-light); line-height: 1.75; max-width: 64ch; }
.doc-notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.75rem;
  margin-top: 1.5rem;
}

/* Szkielet sekcji dokumentu */
.doc-outline { display: grid; }
.doc-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hairline-light);
}
.doc-item:last-child { border-bottom: 1px solid var(--hairline-light); }
.doc-item-no {
  font-stretch: 80%;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.doc-item-body > * + * { margin-top: 1rem; }
.doc-item h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 660;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink-on-light);
}
.doc-item-note { color: var(--muted-on-light); line-height: 1.75; max-width: 62ch; }
.doc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--hairline-light);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.01em;
  color: var(--brand-deep);
  white-space: nowrap;
}
.doc-status .ico { width: 0.85rem; height: 0.85rem; }
.doc-admin-name { color: var(--ink-on-light); font-weight: 620; }

@media (max-width: 860px) {
  .doc-notice { grid-template-columns: 1fr; }
  .doc-item { grid-template-columns: 1fr; gap: 0.625rem; }
}

/* ==========================================================================
   Uzupełnienia — dopisane przy budowie strony „Kariera"
   ========================================================================== */

/* ---------- Nagłówek oferty pracy w strukturze dokumentu ----------
   Tytuł oferty jest nagłówkiem (h3), ale klikalny jest cały .job-head, czyli
   <button> — a ten przyjmuje wyłącznie treść frazową, więc etykiety muszą być
   <span>ami owiniętymi w <h3 class="job-hd">. Grid blokuje spany (element
   siatki jest zawsze blokowy), dzięki czemu margin-top .job-meta działa tak,
   jak zakłada komponent .job. */
.job-hd { font: inherit; }
.job-title-group { display: grid; justify-items: start; }

/* ---------- Czwarty poziom nagłówka w prozie ----------
   Treść ogłoszenia jest zagnieżdżona pod tytułem oferty (h3), więc jej sekcje
   („Kogo szukamy?", „Wymagania") to h4 — .prose stylowało dotąd tylko h2/h3.
   Rytm o stopień drobniejszy niż .prose h3. */
.prose h4 {
  font-size: 1.0625rem;
  font-weight: 660;
  margin-top: 2rem;
  color: var(--ink-on-light);
}
.prose h4 + p, .prose h4 + ul, .prose h4 + ol { margin-top: 0.875rem; }
.section-dark .prose h4 { color: var(--ink-on-dark); }

/* ---------- Rząd akcji pod blokiem treści ----------
   .block-foot mieści pojedynczy odnośnik; tutaj obok siebie stoją dwa
   przyciski (np. „Aplikuj" + „Zobacz, co oferujemy" pod treścią oferty),
   więc potrzebny jest odstęp i zawijanie. Rytm jak .page-hero-cta. */
.block-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
@media (max-width: 540px) {
  .block-actions .btn { width: 100%; }
}

/* ---------- Cecha na dwie kolumny ----------
   Dopisane przy budowie „O nas": źródłowa lista zalet ma jedną pozycję
   wielokrotnie dłuższą od pozostałych (energooszczędność — kilka zdań o izolacji
   i paroizolacji). W równej siatce pierwszy rząd rozciągał się do jej wysokości,
   a pod krótkimi cechami zostawało kilkaset pikseli pustki. Szersza kolumna
   skraca ten blok i zamienia go w świadomy akcent — jak .project-card-wide
   domyka siatkę projektów. Poniżej 62rem siatka ma i tak jedną kolumnę. */
@media (min-width: 62rem) {
  .features-grid .feature-wide { grid-column: span 2; }
}

/* Cecha bywa teraz wieloakapitowa (.feature p nie miał własnego odstępu,
   więc kolejne akapity sklejały się w jeden blok). Rytm jak w .prose. */
.feature p + p { margin-top: 0.875rem; }

/* ---------- Równe kolumny formularza ----------
   .form-grid ma `1fr 1fr`, a `1fr` to `minmax(auto, 1fr)` — pole o szerokiej
   treści min-content (np. <select> z długą opcją „Majster z doświadczeniem
   ogólnobudowlanym") rozpycha swoją kolumnę i łamie symetrię siatki
   (211px vs 405px). min-width: 0 pozwala kolumnom zjechać do równych 1fr. */
.form-grid > * { min-width: 0; }