/* =========================================================
   SC KUCHNIE — KOMPONENTY  v1.0
   Klasy przypisujesz w Bricks w polu "CSS classes" elementu.
   ========================================================= */

/* =========================================================
   ZGODNOSC Z BRICKS
   Bricks nadaje kontenerom display:flex + flex-direction:column
   i wysrodkowuje zawartosc. Ponizsze przywraca zachowanie z projektu.
   ========================================================= */

.sc-container{
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Bricks nadaje kontenerom max-width 1100px i margin auto — nasze bloki
   ukladowe musza byc pelnej szerokosci rodzica, inaczej wpadaja w inset. */
.sc-nav,
.sc-footer__cols,
.sc-footer__col,
.sc-footer__bottom,
.sc-footer__legal,
.sc-hero__in,
.sc-hero__meta,
.sc-split,
.sc-split__col,
.sc-sec-head,
.sc-sec-head__l,
.sc-works,
.sc-work,
.sc-work__body,
.sc-work__side,
.sc-works__foot,
.sc-intro,
.sc-mats,
.sc-mat,
.sc-story,
.sc-story__body,
.sc-steps,
.sc-step,
.sc-sec-foot,
.sc-prod,
.sc-prod__body,
.sc-prod__grid,
.sc-arch,
.sc-arch__body,
.sc-arch__grid,
.sc-facts,
.sc-btn-row,
.sc-cta,
.sc-cta__contact,
.sc-arch-head,
.sc-arch-head__l,
.sc-arch-head__r,
.sc-filters,
.sc-filters__group,
.sc-list,
.sc-more,
.sc-hero-case,
.sc-hero-case__body,
.sc-spec,
.sc-spec__col,
.sc-case-text,
.sc-case-text__body,
.sc-quote,
.sc-next,
.sc-next__body,
.sc-cta-band,
.sc-cta-band__l,
.sc-cta-band__r,
.sc-hero-band,
.sc-hero-band__body,
.sc-tabs,
.sc-tabs__group,
.sc-panel,
.sc-tiles,
.sc-tile,
.sc-inuse,
.sc-inuse__body,
.sc-inuse__grid,
.sc-shot,
.sc-feats,
.sc-feat,
.sc-touch,
.sc-touch__body,
.sc-facts-row,
.sc-fact,
.sc-intro-3,
.sc-intro-3__col,
.sc-values,
.sc-value,
.sc-founder,
.sc-founder__body,
.sc-step-row,
.sc-step-row__body,
.sc-step-row__media,
.sc-mosaic,
.sc-bring,
.sc-bring__grid,
.sc-bring__item,
.sc-track,
.sc-track__step,
.sc-matcards,
.sc-matcard,
.sc-prodsteps,
.sc-prodstep,
.sc-done,
.sc-time,
.sc-time__left,
.sc-time__track,
.sc-tstep,
.sc-time__cta,
.sc-faq,
.sc-faq__item,
.sc-block,
.sc-block__split,
.sc-flow,
.sc-flow__item,
.sc-offer,
.sc-offer__item,
.sc-swatches,
.sc-swatch,
.sc-details,
.sc-libr,
.sc-steps4,
.sc-step4,
.sc-collabs,
.sc-collab,
.sc-arch-bottom,
.sc-arch-bottom__col,
.sc-arch-cta,
.sc-arch-cta__list,
.sc-kontakt-band,
.sc-kbox,
.sc-kontakt-split,
.sc-kontakt-split__l,
.sc-kontakt-split__r,
.sc-mapa__karta,
.sc-kdirect,
.sc-visit,
.sc-visit__card,
.sc-visit__list,
.sc-hero-warstwa,
.sc-form,
.sc-sekcja,
.sc-pola,
.sc-opcje,
.sc-kafle,
.sc-chipy,
.sc-drop,
.sc-nawigacja,
.sc-karta-adres,
.sc-modal__korzysci,
.sc-proza,
.sc-cta-band__foto,
.sc-grid{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* elementy Bricks nie maja narzucac wlasnych marginesow w naszych blokach */
.sc-header__inner > .brxe-button,
.sc-nav > .brxe-button,
.sc-footer__col > *{ margin: 0; }

/* =========================================================
   LOGO
   Logo jest tlem elementu <a>, wiec nie zalezy od biblioteki mediow.
   Tekst w srodku zostaje dla dostepnosci i SEO, ale jest ukryty.
   ========================================================= */

.sc-logo{
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-logo:hover{ opacity: .78; }

/* proporcje z plikow zrodlowych: poziome 618x176, pelne 1000x356.77 */
.sc-logo--h-light{ background-image: url('../img/sc-logo-poziome-przezroczyste-biale.svg');  width: 155px; height: 44px; }
.sc-logo--h-dark { background-image: url('../img/sc-logo-poziome-przezroczyste-czarne.svg'); width: 155px; height: 44px; }
.sc-logo--full   { background-image: url('../img/sc-logo-pelne-biale-przezroczyste.svg');    width: 250px; height: 89px; }
.sc-logo--mark   { background-image: url('../img/sc-sygnet-czerwony.svg');                   width: 44px;  height: 44px; }

@media (max-width: 767px){
  .sc-logo--h-light,
  .sc-logo--h-dark{ width: 130px; height: 37px; }
  .sc-logo--full  { width: 200px; height: 71px; }
}

/* =========================================================
   HEADER
   ========================================================= */

/* Stan bazowy — podstrony.
   position:sticky, nie fixed: naglowek zostaje w przeplywie,
   wiec tresc nie podskakuje w momencie przyklejenia. */
.sc-header{
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--sc-bg);
  border-bottom: 1px solid var(--sc-border);
  transition: background-color var(--sc-dur) var(--sc-ease),
              border-color var(--sc-dur) var(--sc-ease),
              padding var(--sc-dur) var(--sc-ease);
  padding-top: 26px;
  padding-bottom: 26px;
}

/* .sc-header__inner nosi rowniez .sc-container — limit szerokosci bierze stamtad,
   dzieki czemu logo w naglowku stoi w jednej linii z trescia sekcji nizej. */
.sc-header__inner{
  display: flex;
  flex-direction: row;      /* Bricks ustawia kontenerom column — nadpisujemy jawnie */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s5);
  width: 100%;
  text-align: left;
}
.sc-header__inner > *{ flex-shrink: 0; }

/* --- naglowek nakladany na hero (strona glowna) ---
   Bricks opakowuje szablon w <header id="brx-header">. Wyciagamy z przeplywu
   wrapper, jesli istnieje, a sama sekcje w przeciwnym razie. */
body.home #brx-header,
body.sc-header-overlay #brx-header{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}
body.home #brx-header .sc-header:not(.is-sticky),
body.sc-header-overlay #brx-header .sc-header:not(.is-sticky){
  position: relative;
  top: auto;
}
body.home .sc-header:not(.is-sticky),
body.sc-header-overlay .sc-header:not(.is-sticky){
  position: absolute;
  top: 0; left: 0;
  background: transparent;
  border-bottom-color: transparent;
}
body.home .sc-header .sc-logo--h-dark,
body.sc-header-overlay .sc-header .sc-logo--h-dark{ display: none; }
body:not(.home):not(.sc-header-overlay) .sc-header .sc-logo--h-light{ display: none; }

body.home .sc-header .sc-nav__item,
body.home .sc-header .sc-btn--outline,
body.sc-header-overlay .sc-header .sc-nav__item,
body.sc-header-overlay .sc-header .sc-btn--outline{
  color: var(--sc-on-dark);
  border-color: rgba(255,255,255,.45);
}
body.home .sc-header .sc-nav__item::after,
body.sc-header-overlay .sc-header .sc-nav__item::after{ background: var(--sc-on-dark); }

/* --- naglowek przyklejony po przewinieciu --- */
/* --- stan przyklejony ---
   Tlo: kremowe z palety, przepuszczajace 6% obrazu pod spodem.
   Chcesz mocniejszej przezroczystosci? zmniejsz ostatnia wartosc (.94 -> .82).
   Chcesz czystej bieli? podmien na rgba(255,255,255,.94). */
body.home #brx-header .sc-header.is-sticky,
body.sc-header-overlay #brx-header .sc-header.is-sticky,
body.home .sc-header.is-sticky,
body.sc-header-overlay .sc-header.is-sticky,
.sc-header.is-sticky{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: rgba(245,243,239,.94);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom-color: var(--sc-border);
  padding-top: 16px;
  padding-bottom: 16px;
  animation: sc-drop .35s var(--sc-ease) both;
}
@keyframes sc-drop{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }

/* sekcja tuz pod naglowkiem na podstronach — bez podwojnej linii */
body:not(.home):not(.sc-header-overlay) .sc-header.is-sticky{ border-bottom-color: var(--sc-border); }

#brx-header .sc-header.is-sticky .sc-logo--h-light,
.sc-header.is-sticky .sc-logo--h-light{ display: none !important; }
#brx-header .sc-header.is-sticky .sc-logo--h-dark,
.sc-header.is-sticky .sc-logo--h-dark { display: block !important; }
.sc-header.is-sticky .sc-nav__item,
.sc-header.is-sticky .sc-btn--outline{
  color: var(--sc-text) !important;
  border-color: var(--sc-text) !important;
}
.sc-header.is-sticky .sc-nav__item::after{ background: var(--sc-text) !important; }

/* =========================================================
   NAWIGACJA
   ========================================================= */

.sc-nav{
  display: flex;
  flex-direction: row;      /* jw. — bez tego Bricks ustawia pionowa liste */
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: nowrap;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  flex-shrink: 1;
}

.sc-nav__item{
  position: relative;
  display: inline-block;
  font-family: var(--sc-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-nav);
  text-transform: uppercase;
  color: var(--sc-text);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-nav__item::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sc-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-nav__item:hover::after,
.sc-nav__item.is-current::after{ transform: scaleX(1); }

@media (max-width: 1200px){ .sc-nav{ gap: 20px; } .sc-nav__item{ font-size: 11px; } }

/* --- przelacznik menu mobilnego ---
   z-index wyzszy niz warstwa menu (90), inaczej pelnoekranowe menu
   zakrywa wlasny przycisk zamykania i logo. */
.sc-header .sc-logo{ position: relative; z-index: 95; }

.sc-burger{
  position: relative;
  z-index: 95;
  display: none;
  width: 40px; height: 40px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}
.sc-burger::before,
.sc-burger::after{
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 1px;
  background: var(--sc-text);
  transition: transform var(--sc-dur) var(--sc-ease), top var(--sc-dur) var(--sc-ease);
}
.sc-burger::before{ top: 16px; }
.sc-burger::after { top: 24px; }
body.home .sc-burger::before, body.home .sc-burger::after{ background: var(--sc-on-dark); }
.sc-header.is-sticky .sc-burger::before,
.sc-header.is-sticky .sc-burger::after{ background: var(--sc-text) !important; }

/* stan otwarty — krzyzyk, zawsze w kolorze tekstu na kremowym tle menu */
body.sc-menu-open .sc-burger::before{ top: 20px; transform: rotate(45deg); }
body.sc-menu-open .sc-burger::after { top: 20px; transform: rotate(-45deg); }
body.sc-menu-open .sc-burger::before,
body.sc-menu-open .sc-burger::after{ background: var(--sc-text) !important; }
/* logo na czas otwartego menu przechodzi na wersje ciemna */
body.sc-menu-open .sc-header .sc-logo--h-light{ display: none !important; }
body.sc-menu-open .sc-header .sc-logo--h-dark { display: block !important; }

@media (max-width: 991px){
  .sc-burger{ display: block; }
  .sc-header__inner > .sc-nav,
  .sc-header__inner > .sc-btn{ display: none; }

  /* pelnoekranowe menu */
  body.sc-menu-open .sc-header__inner > .sc-nav{
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sc-s4);
    background: var(--sc-bg);
    padding: 0 var(--sc-pad);
  }
  body.sc-menu-open .sc-header__inner > .sc-nav .sc-nav__item{
    font-family: var(--sc-serif);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--sc-text) !important;
  }
  body.sc-menu-open .sc-header__inner > .sc-nav .sc-nav__item::after{ display: none; }
  body.sc-menu-open{ overflow: hidden; }
}

/* =========================================================
   PRZYCISKI
   ========================================================= */

.sc-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sc-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-btn);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  padding: 18px 32px;
  border: 1px solid var(--sc-text);
  border-radius: 0;
  background: var(--sc-text);
  color: var(--sc-white);
  cursor: pointer;
  transition: background-color var(--sc-dur) var(--sc-ease),
              color var(--sc-dur) var(--sc-ease),
              border-color var(--sc-dur) var(--sc-ease);
}
.sc-btn:hover{ background: transparent; color: var(--sc-text); }

.sc-btn--outline{
  background: transparent;
  color: var(--sc-text);
}
.sc-btn--outline:hover{ background: var(--sc-text); color: var(--sc-white); }

.sc-btn--on-dark{
  background: var(--sc-white);
  border-color: var(--sc-white);
  color: var(--sc-text);
}
.sc-btn--on-dark:hover{ background: transparent; color: var(--sc-white); }

.sc-btn--outline-dark{
  background: transparent;
  border-color: var(--sc-border-dark);
  color: var(--sc-on-dark);
}
.sc-btn--outline-dark:hover{ background: var(--sc-white); border-color: var(--sc-white); color: var(--sc-text); }

.sc-btn--sm{ padding: 14px 24px; font-size: 12px; }

/* strzalka: dopisywana automatycznie, przesuwa sie w hoverze */
.sc-btn::after,
.sc-link::after{
  content: '\2192';
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-btn:hover::after,
.sc-link:hover::after{ transform: translateX(4px); }
.sc-btn--no-arrow::after{ content: none; }

/* =========================================================
   LINK STRZALKOWY
   ========================================================= */

.sc-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sc-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--sc-text) !important;
  padding: 0 0 10px !important;
  line-height: 1.2;
}
.sc-link:hover{ opacity: .72; }

.sc-link--dark{
  color: var(--sc-on-dark);
  border-bottom-color: var(--sc-border-dark) !important;
}

/* =========================================================
   MEDIA
   ========================================================= */

.sc-media{ overflow: hidden; display: block; }
.sc-media img,
.sc-media--zoom img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-media--zoom:hover img{ transform: scale(1.02); }

/* placeholder na czas przed wgraniem zdjec */
.sc-media--placeholder{
  background: var(--sc-bg-alt);
  border: 1px solid var(--sc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  font-size: var(--sc-label);
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  text-align: center;
}

/* =========================================================
   FORMULARZE
   ========================================================= */

.sc-field input[type=text],
.sc-field input[type=email],
.sc-field input[type=tel],
.sc-field select,
.sc-field textarea,
input.sc-field, textarea.sc-field, select.sc-field{
  width: 100%;
  border: 1px solid var(--sc-border);
  border-radius: 0;
  background: transparent;
  padding: 16px 18px;
  font-family: var(--sc-sans);
  font-size: var(--sc-small);
  color: var(--sc-text);
  outline: none;
  transition: border-color var(--sc-dur) var(--sc-ease);
}
.sc-field input:focus, .sc-field textarea:focus, .sc-field select:focus,
input.sc-field:focus, textarea.sc-field:focus{ border-color: var(--sc-text); }

/* =========================================================
   STOPKA
   ========================================================= */

.sc-footer{
  background: var(--sc-dark);
  color: var(--sc-on-dark);
  padding-top: var(--sc-s7);
  padding-bottom: var(--sc-s4);
}
.sc-footer .sc-label{ color: var(--sc-on-dark-2); margin-bottom: var(--sc-s3); width: 100%; }

.sc-footer__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: left;
}

.sc-footer__cols{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
  gap: var(--sc-s6) var(--sc-s5);
  align-items: start;      /* bez tego Bricks centruje kolumny w pionie */
  justify-items: stretch;
  width: 100%;
}
@media (max-width: 991px){ .sc-footer__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: left;
}

.sc-footer__cols{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .sc-footer__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: left;
}

.sc-footer__cols{ grid-template-columns: 1fr; gap: var(--sc-s5); } }

.sc-footer__link{
  display: block;
  font-family: var(--sc-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  padding: 6px 0 !important;
  line-height: 1.7;
  transition: color var(--sc-dur) var(--sc-ease);
}
.sc-footer__link::after{ content: none; }
.sc-footer__link:hover{ color: var(--sc-white); }

.sc-footer__text{
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,.82);
}
.sc-footer__note{
  font-size: var(--sc-tiny);
  line-height: 1.75;
  color: var(--sc-on-dark-2);
  max-width: 34ch;
}

.sc-footer__bottom{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s4);
  flex-wrap: wrap;
  width: 100%;
  padding-top: var(--sc-s4);
}
.sc-footer__bottom > *{ width: auto; flex: 0 0 auto; }
.sc-footer__bottom .sc-footer__link{ display: inline-block; padding: 0 !important; font-size: var(--sc-tiny); }
.sc-footer__bottom .sc-footer__note{ max-width: none; }
.sc-footer__legal{ display: flex; flex-direction: row; align-items: center; gap: var(--sc-s4); flex-wrap: wrap; width: auto; max-width: none; padding: 0; }

/* =========================================================
   WEJSCIE SEKCJI
   ========================================================= */

.sc-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--sc-ease), transform .7s var(--sc-ease);
  will-change: opacity, transform;
}
.sc-reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .sc-reveal{ opacity: 1; transform: none; transition: none; }
  .sc-media--zoom:hover img{ transform: none; }
  .sc-header.is-sticky{ animation: none; }
}

/* =========================================================
   HOME — PACZKA 1
   Hero / Brand statement / Wybrane realizacje
   ========================================================= */

/* ---------- HERO ---------- */

.sc-hero{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  /* gorny padding rezerwuje miejsce na naglowek nakladany — bez tego
     przy wysokiej tresci (mobile) tekst wchodzi pod logo */
  padding: calc(var(--sc-header-h) + var(--sc-s5)) 0 var(--sc-sec);
  background-color: var(--sc-dark);   /* widoczne, zanim wgrasz fotografie */
  background-size: cover;
  background-position: center 42%;
  overflow: hidden;
}

/* przyciemnienie pod tekstem — czytelnosc niezalezna od zdjecia */
.sc-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(0,0,0,.60) 0%,
              rgba(0,0,0,.10) 40%,
              rgba(0,0,0,.48) 100%);
  pointer-events: none;
}
.sc-hero > *{ position: relative; z-index: 2; }

.sc-hero__in{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--sc-on-dark);
}
.sc-hero__in .sc-label{ color: rgba(255,255,255,.78); }
.sc-hero__in .sc-h1,
.sc-hero__in h1{
  color: var(--sc-on-dark);
  margin: 22px 0 0;
  max-width: 26ch;   /* naglowek nie rozlewa sie na cala szerokosc ekranu */
}
.sc-hero__in .sc-body{ color: rgba(255,255,255,.86); margin: 28px 0 40px; }

.sc-hero__meta{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sc-s3);
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--sc-s7);
  padding-top: var(--sc-s3);
  border-top: 1px solid rgba(255,255,255,.22);
}
.sc-hero__meta .sc-label{ color: rgba(255,255,255,.72); margin: 0; }

@media (max-width: 767px){
  .sc-hero{
    min-height: 88vh;
    padding-top: calc(var(--sc-header-h) + var(--sc-s4));
    padding-bottom: var(--sc-s7);
  }
  .sc-hero__meta{ margin-top: var(--sc-s5); }
  .sc-hero__in .sc-body{ margin: var(--sc-s3) 0 var(--sc-s5); }
}

/* ---------- UKLAD DWUKOLUMNOWY ---------- */

.sc-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-s7);
  align-items: start;
  width: 100%;
  max-width: none;
}
.sc-split--narrow-left{ grid-template-columns: 6fr 5fr; }
.sc-split__col .sc-h2{ max-width: 20ch; }
.sc-split__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s4);
  width: 100%;
  max-width: none;
  padding: 0;
}
/* link odsuwamy mocniej — inaczej cisnie sie do akapitu */
.sc-split__col > .sc-link{ margin-top: var(--sc-s2); }
.sc-split__col > .sc-btn{ margin-top: var(--sc-s2); }
@media (max-width: 991px){
  .sc-split,
  .sc-split--narrow-left{ grid-template-columns: 1fr; gap: var(--sc-s5); }
}

/* ---------- WYBRANE REALIZACJE ----------
   Mozaika editorial: kolumna tekstu + duza fotografia + dwie mniejsze.
   Rytm jak w projekcie 01-home-desktop. */

.sc-works{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
}

.sc-work{
  display: grid;
  grid-template-columns: 2.4fr 6.2fr 3.4fr;
  gap: var(--sc-s1);
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* kolumna opisu — wyrownana do gory fotografii */
.sc-work__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--sc-s4) 0 0;
}

.sc-work__index{
  font-family: var(--sc-serif);
  font-weight: 300;
  font-size: 40px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--sc-text);
  margin: 0 0 var(--sc-s3);
}
.sc-work__title{ margin: 0 0 var(--sc-s3); max-width: 16ch; }
.sc-work__meta{ margin: 0 0 var(--sc-s5); }
.sc-work__meta p{ margin: 0; }

/* fotografia glowna — to ona wyznacza wysokosc calego wiersza,
   dzieki czemu kolumna z dwoma mniejszymi dopasowuje sie idealnie */
.sc-work__main{
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-work__main img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-work__main:hover img{ transform: scale(1.02); }

/* dwie mniejsze, jedna pod druga */
/* height:0 + min-height:100% — kolumna nie wplywa na wysokosc wiersza,
   tylko dopasowuje sie do fotografii glownej. Bez tego wiersze rozjezdzaja sie
   na roznej wysokosci, zaleznie od proporcji wgranych zdjec. */
.sc-work__side{
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  height: 0;
  min-height: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
}
.sc-work__side .sc-work__thumb{
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-work__side .sc-work__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-work__side .sc-work__thumb:hover img{ transform: scale(1.02); }

/* stopka sekcji realizacji */
.sc-works__foot{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  margin-top: var(--sc-s6);
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-border);
}

@media (max-width: 1240px){
  .sc-work{ grid-template-columns: 2.6fr 5.8fr 3.6fr; }
  .sc-work__index{ font-size: 34px; }
}

@media (max-width: 991px){
  .sc-works{ gap: var(--sc-sec); }
  .sc-work{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "body body"
      "main main"
      "side side";
    gap: var(--sc-s1);
  }
  .sc-work__body{ grid-area: body; padding: 0 0 var(--sc-s4); }
  .sc-work__main{ grid-area: main; }
  .sc-work__side{
    grid-area: side;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
  }
  .sc-work__side .sc-work__thumb{ aspect-ratio: 4 / 3; }
  .sc-works__foot{ justify-content: flex-start; }
}

/* naglowek sekcji z linkiem po prawej */
.sc-sec-head{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sc-s5);
  width: 100%;
  max-width: none;
}
.sc-sec-head__l{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-sec-head > *{ margin-top: 0; margin-bottom: 0; }
.sc-sec-head h2{ margin: 0; }
@media (max-width: 767px){
  .sc-sec-head{ flex-direction: column; align-items: flex-start; gap: var(--sc-s4); }
}

/* =========================================================
   HOME — PACZKA 2
   Materialy / Dobrodzien / Proces
   ========================================================= */

/* ---------- WSTEP SEKCJI (label + H2 + opis) ---------- */

.sc-intro{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-intro .sc-body{ margin-top: var(--sc-s2); }

/* ---------- MATERIALY ---------- */

.sc-mats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-gutter);
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
}

.sc-mat{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  min-height: 520px;
  margin: 0;
  padding: var(--sc-s5);
  overflow: hidden;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}

/* zdjecie jako tlo kafla — wypelnia caly obszar */
.sc-mat .sc-mat__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.sc-mat .sc-mat__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-mat:hover .sc-mat__media img{ transform: scale(1.02); }

/* przyciemnienie od dolu — tekst czytelny na kazdym zdjeciu */
.sc-mat::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}
.sc-mat > *:not(.sc-mat__media){ position: relative; z-index: 2; }

.sc-mat__index{
  font-family: var(--sc-serif);
  font-size: 22px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  margin: 0 0 var(--sc-s2);
}
.sc-mat__name{
  font-family: var(--sc-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-on-dark);
  margin: 0 0 var(--sc-s2);
}
.sc-mat__desc{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 30ch;
}
.sc-mat__desc p{ margin: 0; }

@media (max-width: 991px){
  .sc-mats{ grid-template-columns: 1fr; }
  .sc-mat{ min-height: 380px; padding: var(--sc-s4); }
}

/* ---------- DOBRODZIEN — uklad editorial ---------- */

.sc-story{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-story--reverse{ grid-template-columns: 5fr 7fr; }

.sc-story__media{
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-story__media img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-story__media:hover img{ transform: scale(1.02); }

.sc-story__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-story__body .sc-body{ margin-top: var(--sc-s2); }
.sc-story__body > .sc-link{ margin-top: var(--sc-s3); }

@media (max-width: 991px){
  .sc-story,
  .sc-story--reverse{ grid-template-columns: 1fr; gap: var(--sc-s5); }
}

/* ---------- PROCES ---------- */

.sc-steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sc-s5) var(--sc-gutter);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
}

.sc-step{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-s3) 0 0;
  border-top: 1px solid var(--sc-border);
}
.sc-section--dark .sc-step{ border-top-color: var(--sc-border-dark); }

.sc-step__num{
  font-family: var(--sc-serif);
  font-weight: 300;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: var(--sc-numeral);
  line-height: .9;
  color: var(--sc-tan);
  margin: 0 0 var(--sc-s2);
}
.sc-step__name{
  font-family: var(--sc-sans);
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
}
.sc-step__desc{
  font-size: 14px;
  line-height: 1.6;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-step__desc p{ margin: 0; }

@media (max-width: 991px){
  .sc-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .sc-steps{ grid-template-columns: 1fr; gap: var(--sc-s4); }
  .sc-step__num{ font-size: 56px; }
}

/* stopka sekcji z pojedynczym CTA */
.sc-sec-foot{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
}
.sc-sec-foot--center{ justify-content: center; }
.sc-sec-foot--right { justify-content: flex-end; }

/* =========================================================
   HOME — PACZKA 3
   Produkcja / Dla architektow / Showroom / Final CTA
   ========================================================= */

/* ---------- PRODUKCJA (sekcja ciemna) ---------- */

.sc-prod{
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-prod__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-prod__body .sc-body{ margin-top: var(--sc-s2); color: rgba(255,255,255,.78); }

.sc-prod__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-prod__shot{
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: #1a1a1a;
}
.sc-prod__shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-prod__shot:hover img{ transform: scale(1.02); }

@media (max-width: 991px){
  .sc-prod{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-prod__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- DLA ARCHITEKTOW ---------- */

.sc-arch{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-arch__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-arch__body .sc-body{ margin-top: var(--sc-s2); }
.sc-arch__body > .sc-link{ margin-top: var(--sc-s3); }

.sc-arch__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-arch__shot{
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-arch__shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-arch__shot:hover img{ transform: scale(1.02); }

.sc-arch__note{
  font-size: var(--sc-tiny);
  line-height: 1.7;
  color: var(--sc-text-2);
  margin: 0;
  padding-top: var(--sc-s3);
  border-top: 1px solid var(--sc-border);
  max-width: 44ch;
}
.sc-arch__note p{ margin: 0; }

@media (max-width: 991px){
  .sc-arch{ grid-template-columns: 1fr; gap: var(--sc-s5); }
}

/* ---------- SHOWROOM ---------- */

.sc-facts{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: var(--sc-s2) 0 0;
  padding: var(--sc-s4) 0 0;
  border-top: 1px solid var(--sc-border);
}
.sc-section--dark .sc-facts{ border-top-color: var(--sc-border-dark); }
.sc-facts__row{
  font-size: var(--sc-small);
  line-height: 1.8;
  color: var(--sc-text);
  margin: 0;
}
.sc-facts__row p{ margin: 0; }

.sc-btn-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sc-s5);
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  max-width: none;
  margin: var(--sc-s4) 0 0;
  padding: 0;
}

/* ---------- FINAL CTA ---------- */

.sc-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-cta .sc-h2{ max-width: none; margin: var(--sc-s2) 0 var(--sc-s4); }
.sc-cta .sc-btn{ margin-bottom: var(--sc-s6); }

.sc-cta__contact{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s6);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-border-dark);
}
.sc-cta__link{
  font-family: var(--sc-sans);
  font-size: var(--sc-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-on-dark);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-cta__link::after{ content: none; }
.sc-cta__link:hover{ opacity: .7; }

@media (max-width: 767px){
  .sc-cta__contact{ flex-direction: column; gap: var(--sc-s3); }
  .sc-btn-row{ gap: var(--sc-s3); }
}

/* =========================================================
   POPRAWKA KOLEJNOSCI
   .sc-btn--no-arrow::after{content:none} kasowalo druga kreske burgera,
   bo regula przyciskow stoi w pliku nizej niz regula nawigacji.
   Dlatego przywracamy ja tutaj, na samym koncu.
   ========================================================= */
.sc-burger::before,
.sc-burger::after{ content: '' !important; }

/* =========================================================
   LINIA ROZDZIELAJACA SEKCJE
   Klasa pomocnicza: dopisz .sc-section--rule do sekcji, ktora ma
   zaczynac sie cienka linia. Linia trzyma szerokosc kontenera,
   wiec konczy sie rowno z trescia, a nie na krawedzi ekranu.
   ========================================================= */

.sc-section--rule{ padding-top: 0; }
.sc-section--rule > .sc-container{
  position: relative;
  padding-top: var(--sc-sec);
}
/* linia rysowana pseudoelementem, nie ramka — dzieki temu zaczyna sie
   i konczy rowno z tekstem, a nie na krawedzi okna */
.sc-section--rule > .sc-container::before{
  content: '';
  position: absolute;
  top: 0;
  left: var(--sc-pad);
  right: var(--sc-pad);
  height: 1px;
  background: var(--sc-border);
}
.sc-section--dark.sc-section--rule > .sc-container::before{
  background: var(--sc-border-dark);
}
.sc-section--rule.sc-section--lg > .sc-container{ padding-top: var(--sc-sec-lg); }


/* wariant na pelna szerokosc okna, gdyby gdzies byl potrzebny */
.sc-section--rule-full{
  padding-top: var(--sc-sec);
  border-top: 1px solid var(--sc-border);
}

/* =========================================================
   REALIZACJE — LISTA (podstrona /realizacje/)
   ========================================================= */

.sc-arch-head{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sc-s7);
  align-items: end;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-arch-head__l{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-arch-head__r{ width: 100%; max-width: none; margin: 0; padding: 0; }
@media (max-width: 991px){
  .sc-arch-head{ grid-template-columns: 1fr; gap: var(--sc-s4); align-items: start; }
}

/* pasek filtrow — minimalistyczny, jeden wiersz, wloskowe belki */
.sc-filters{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s4);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
  padding: 0 0 var(--sc-s3);
  border-bottom: 1px solid var(--sc-border);
}
.sc-filters__group{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* belka rozdzielajaca — cienka i niska, nie na cala wysokosc paska */
.sc-filters__group .sc-filter + .sc-filter{
  margin-left: var(--sc-s4);
  padding-left: var(--sc-s4);
  border-left: 1px solid var(--sc-border);
}

.sc-filter{
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  font-family: var(--sc-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--sc-text);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 18px 4px 0;
  margin: 0;
  height: auto;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* strzalka: dwie kreski zamiast trojkata — lzejsza w rysunku */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px center, right 1px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-filter:hover{ opacity: .6; }
.sc-filter:focus,
.sc-filter:focus-visible{ outline: 0; opacity: .6; }
.sc-filter option{
  font-family: var(--sc-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-text);
  background: var(--sc-bg);
}
.sc-filter--sort{ margin-left: auto; }

@media (max-width: 767px){
  .sc-filters{ align-items: flex-start; gap: var(--sc-s3); padding-bottom: var(--sc-s3); }
  .sc-filters__group{ gap: 0; }
  .sc-filters__group .sc-filter + .sc-filter{
    margin-left: var(--sc-s3);
    padding-left: var(--sc-s3);
  }
  .sc-filter{ font-size: 10px; }
  .sc-filter--sort{ margin-left: 0; }
}

/* lista realizacji — ten sam rytm co na stronie glownej */
.sc-list{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
}
.sc-list .sc-work__index{ margin-bottom: var(--sc-s3); }
.sc-list .sc-work__index::after{
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--sc-border);
  margin-top: var(--sc-s2);
}

/* doladowanie — sama strzalka w dol, bez ramki i napisu */
.sc-more{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
}
.sc-more__btn{
  display: block;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  transition: transform var(--sc-dur) var(--sc-ease), opacity var(--sc-dur) var(--sc-ease);
}
.sc-more__btn::before{
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -7px;
  border-right: 1px solid var(--sc-text);
  border-bottom: 1px solid var(--sc-text);
  transform: rotate(45deg);
}
.sc-more__btn:hover{ transform: translateY(3px); opacity: .6; }
.sc-more__btn:focus-visible{ outline: 1px solid var(--sc-border); outline-offset: 4px; }

/* =========================================================
   REALIZACJA — POJEDYNCZA
   ========================================================= */

/* ekran otwierajacy: ciemny panel z tekstem + fotografia */
.sc-hero-case{
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-height: 60vh;
  margin: 0;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-hero-case__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-sec) var(--sc-s7) var(--sc-sec) var(--sc-pad);
}
.sc-hero-case__body .sc-h1{ color: var(--sc-on-dark); margin: 0; max-width: 14ch; }
.sc-hero-case__meta{
  font-size: var(--sc-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.sc-hero-case__lead{
  font-size: var(--sc-body);
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  max-width: 40ch;
  margin: var(--sc-s3) 0 0;
}
.sc-hero-case__lead p{ margin: 0; }
.sc-hero-case__media{ width: 100%; height: 100%; margin: 0; overflow: hidden; }
.sc-hero-case__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-back{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-on-dark);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  padding: 0 0 10px !important;
  margin: 0 0 var(--sc-s6);
}
.sc-back::after{ content: none; }
.sc-back::before{
  content: '\2190';
  display: inline-block;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-back:hover::before{ transform: translateX(-4px); }

@media (max-width: 991px){
  .sc-hero-case{ grid-template-columns: 1fr; }
  .sc-hero-case__body{ padding: calc(var(--sc-header-h) + var(--sc-s5)) var(--sc-pad) var(--sc-sec); }
  .sc-hero-case__media img{ aspect-ratio: 4 / 3; height: auto; }
}

/* metryka projektu */
.sc-spec{
  display: grid;
  grid-template-columns: 3fr 5fr 4fr;
  gap: var(--sc-s7);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-spec__col{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-spec__col + .sc-spec__col{ padding-left: var(--sc-s5); border-left: 1px solid var(--sc-border); }

/* bez rysunku technicznego metryka zwezalaby sie do dwoch kolumn
   z dziura po prawej — zamiast tego rozkladamy ja na dwie rowne */
.sc-spec--bez-rysunku{ grid-template-columns: 4fr 8fr; }
.sc-spec--bez-rysunku.sc-spec--bez-materialow{ grid-template-columns: 1fr; }
.sc-spec--bez-materialow .sc-spec__col + .sc-spec__col{ padding-left: 0; border-left: 0; }
.sc-spec__row{ margin: 0 0 var(--sc-s4); }
.sc-spec__row .sc-label{ margin: 0 0 6px; }
.sc-spec__val{
  font-family: var(--sc-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--sc-text);
  margin: 0;
}
.sc-spec__list{ width: 100%; border-collapse: collapse; }
.sc-spec__list td{ padding: 9px 0; vertical-align: top; font-size: var(--sc-small); }
.sc-spec__list td:first-child{
  width: 32%;
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  padding-right: var(--sc-s3);
}
.sc-spec__draw{ width: 100%; margin: 0; }
.sc-spec__draw img{ width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

@media (max-width: 991px){
  .sc-spec{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-spec__col + .sc-spec__col{ padding-left: 0; border-left: 0; padding-top: var(--sc-s5); border-top: 1px solid var(--sc-border); }
}

/* galeria realizacji — uklad dobiera sie do liczby zdjec.
   Zalozenie: kazdy wiersz ma byc wypelniony do konca. Przy 2-3 kadrach
   siatka ma wygladac na zamierzona, a nie na niedokonczona. */
.sc-gal{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sc-s1);
  width: 100%;
}
.sc-gal__item{
  margin: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
  grid-column: span 3;      /* domyslnie polowa szerokosci */
}
.sc-gal__item img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-gal__item:hover img{ transform: scale(1.02); }

/* 1 zdjecie — pelna szerokosc, kadr panoramiczny */
.sc-gal--n1 .sc-gal__item{ grid-column: span 6; }
.sc-gal--n1 .sc-gal__item img{ aspect-ratio: 16 / 9; }

/* 2 zdjecia — dwie rowne polowy */
.sc-gal--n2 .sc-gal__item{ grid-column: span 3; }

/* 3 zdjecia — jeden szeroki kadr i dwa pod nim */
.sc-gal--n3 .sc-gal__item:first-child{ grid-column: span 6; }
.sc-gal--n3 .sc-gal__item:first-child img{ aspect-ratio: 16 / 9; }

/* 4 zdjecia — siatka 2x2 */
.sc-gal--n4 .sc-gal__item{ grid-column: span 3; }

/* 5 zdjec — szeroki kadr, potem dwa razy po dwa */
.sc-gal--n5 .sc-gal__item:first-child{ grid-column: span 6; }
.sc-gal--n5 .sc-gal__item:first-child img{ aspect-ratio: 16 / 9; }

/* 6 i wiecej — rytm editorial: wiersz 4+2, wiersz 2+2+2 */
.sc-gal--n6 .sc-gal__item{ grid-column: span 2; }
.sc-gal--n6 .sc-gal__item:nth-child(5n+1){ grid-column: span 4; }
.sc-gal--n6 .sc-gal__item:nth-child(5n+1) img{ aspect-ratio: 16 / 10; }

@media (max-width: 767px){
  .sc-gal{ grid-template-columns: repeat(2, 1fr); }
  .sc-gal .sc-gal__item,
  .sc-gal--n1 .sc-gal__item,
  .sc-gal--n3 .sc-gal__item:first-child,
  .sc-gal--n5 .sc-gal__item:first-child,
  .sc-gal--n6 .sc-gal__item,
  .sc-gal--n6 .sc-gal__item:nth-child(5n+1){ grid-column: span 2; }
  .sc-gal__item img,
  .sc-gal--n6 .sc-gal__item:nth-child(5n+1) img{ aspect-ratio: 4 / 3; }
}

/* opis + cytat */
.sc-case-text{
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--sc-s7);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-case-text__body{ width: 100%; max-width: none; margin: 0; padding: 0; }
.sc-case-text__body p{ margin: 0 0 var(--sc-s3); }

.sc-quote{
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 var(--sc-s5);
}
.sc-quote::before{
  content: '\201D';
  position: absolute;
  left: 0; top: -14px;
  font-family: var(--sc-serif);
  font-size: 56px;
  line-height: 1;
  color: var(--sc-tan);
}
.sc-quote__text{
  font-family: var(--sc-serif);
  font-size: 26px;
  line-height: 1.45;
  color: var(--sc-text);
  margin: 0 0 var(--sc-s4);
}
.sc-quote__text p{ margin: 0; }
.sc-quote__author{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
}
.sc-quote__role{
  font-size: var(--sc-label);
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  margin: 4px 0 0;
}
/* brak cytatu — tekst nie rozciaga sie na cala szerokosc,
   tylko trzyma czytelna dlugosc wiersza */
.sc-case-text--solo{ grid-template-columns: 1fr; }
.sc-case-text--solo .sc-case-text__body{ max-width: 62ch; }

@media (max-width: 991px){
  .sc-case-text{ grid-template-columns: 1fr; gap: var(--sc-s5); }
}

/* nastepny projekt */
.sc-next{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--sc-bg-alt);
}
.sc-next__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-sec) var(--sc-s7) var(--sc-sec) var(--sc-pad);
}
.sc-next__media{ width: 100%; height: 100%; margin: 0; overflow: hidden; }
.sc-next__media img{
  width: 100%; height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-next:hover .sc-next__media img{ transform: scale(1.02); }
@media (max-width: 991px){
  .sc-next{ grid-template-columns: 1fr; }
  .sc-next__body{ padding: var(--sc-sec) var(--sc-pad); }
}

/* lista realizacji — elementy sterujace */
.sc-realizacje{ width: 100%; }
.sc-list__pusto{ margin: var(--sc-s6) 0 0; }
.sc-list .sc-work[hidden]{ display: none; }
.sc-list .sc-work__title a{ color: inherit; text-decoration: none; }
.sc-list .sc-work__title a:hover{ opacity: .7; }
.sc-list .sc-work__main a,
.sc-list .sc-work__thumb a{ display: block; width: 100%; height: 100%; }
.sc-filter--sort{ padding-right: 26px; }

/* =========================================================
   BANER "POROZMAWIAJMY" — poziomy wariant CTA
   Domykajacy pasek podstron. Rozni sie od final CTA na stronie
   glownej: tam uklad wysrodkowany, tutaj poziomy i nizszy.
   ========================================================= */

.sc-cta-band{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-cta-band__l{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-cta-band__l .sc-h2{ margin: 0; max-width: 16ch; color: var(--sc-on-dark); }

.sc-cta-band__r{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s4);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-cta-band__r .sc-body{
  color: rgba(255,255,255,.72);
  max-width: 46ch;
  margin: 0;
}
.sc-cta-band__r .sc-body p{ margin: 0; }

@media (max-width: 991px){
  .sc-cta-band{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-cta-band__l .sc-h2{ max-width: none; }
}

/* sekcje generowane przez shortcode [sc_realizacja] nie sa opakowane
   w kontenery Bricksa — daja sobie rade same, ale pilnujemy marginesow */
.sc-realizacja-wrap > .sc-hero-case:first-child{ margin-top: 0; }
.sc-hero-case + .sc-section{ padding-top: var(--sc-sec); }
.sc-section--flush-top + .sc-section{ padding-top: var(--sc-sec); }


/* =========================================================
   MATERIALY — podstrona
   ========================================================= */

/* ---------- BANER NAGLOWKOWY PODSTRONY ----------
   Fotografia panoramiczna jako tlo calej sekcji, tekst po lewej
   w pustym polu kadru. Zdjecie ustawiasz w Bricks:
   sekcja -> Style -> Background -> Image.

   Delikatna poswiata po lewej gwarantuje czytelnosc niezaleznie od tego,
   jakie zdjecie wgrasz — na jasnym kadrze jest niewidoczna, na ciemnym
   ratuje tekst. */

.sc-hero-band{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
  padding: var(--sc-sec) 0;
  background-color: var(--sc-bg-alt);
  /* !important, bo Bricks generuje wlasny CSS z ID sekcji o wyzszej
     specyficznosci. Kadrowanie ma byc sterowane stad, nie z panelu —
     inaczej na wezszych ekranach obcina probki zamiast pustego kamienia. */
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  /* warstwa nakladana (.sc-hero-warstwa) czyta te zmienna i kadruje sie
     identycznie jak tlo — takze po zmianie progu responsywnego */
  --sc-warstwa-poz: right center;
  overflow: hidden;
}
.sc-hero-band::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
              rgba(245,243,239,.88) 0%,
              rgba(245,243,239,.55) 34%,
              rgba(245,243,239,0) 62%);
  pointer-events: none;
}
.sc-hero-band > *{ position: relative; z-index: 2; }

.sc-hero-band__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: 46%;
  margin: 0;
  padding: 0;
}
.sc-hero-band__body .sc-h1{
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0;
}
.sc-hero-band__body .sc-body{ margin-top: var(--sc-s2); max-width: 40ch; }
.sc-hero-band__body > .sc-link{ margin-top: var(--sc-s3); }

/* wariant na ciemnym zdjeciu */
.sc-hero-band--dark::before{
  background: linear-gradient(90deg,
              rgba(0,0,0,.72) 0%,
              rgba(0,0,0,.35) 38%,
              rgba(0,0,0,0) 66%);
}
.sc-hero-band--dark .sc-h1,
.sc-hero-band--dark .sc-label{ color: var(--sc-on-dark); }
.sc-hero-band--dark .sc-body{ color: rgba(255,255,255,.85); }
.sc-hero-band--dark .sc-link{ color: var(--sc-on-dark); border-bottom-color: rgba(255,255,255,.4) !important; }

@media (max-width: 1240px){
  .sc-hero-band__body{ max-width: 56%; }
}
@media (max-width: 1240px){
  /* ponizej ~1420 px kadr zaczyna byc przycinany w poziomie —
     kotwiczymy go tak, by probki zostaly w kadrze */
  .sc-hero-band{ background-position: 88% center !important; --sc-warstwa-poz: 88% center; }
}
@media (max-width: 991px){
  .sc-hero-band{ min-height: 460px; background-position: 72% center !important; --sc-warstwa-poz: 72% center; }
  .sc-hero-band__body{ max-width: 100%; }
  .sc-hero-band .sc-h1{ max-width: 16ch; }
  .sc-hero-band::before{
    background: linear-gradient(90deg,
                rgba(245,243,239,.94) 0%,
                rgba(245,243,239,.78) 60%,
                rgba(245,243,239,.55) 100%);
  }
  .sc-hero-band--dark::before{
    background: linear-gradient(90deg,
                rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 100%);
  }
}

/* ---------- pasek zakladek ---------- */

.sc-tabs{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s5);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-tabs__group{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sc-s6);
  flex-wrap: wrap;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-tab{
  position: relative;
  font-family: var(--sc-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-nav);
  text-transform: uppercase;
  color: var(--sc-text-2);
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 22px 0 !important;
  cursor: pointer;
  transition: color var(--sc-dur) var(--sc-ease);
}
.sc-tab::after{
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--sc-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-tab:hover{ color: var(--sc-text); }
.sc-tab.is-active{ color: var(--sc-text); }
.sc-tab.is-active::after{ transform: scaleX(1); }

.sc-tabs__side{ margin-left: auto; }

/* panele */
.sc-panel{ width: 100%; max-width: none; margin: 0; padding: 0; }
.sc-panel[hidden]{ display: none; }

@media (max-width: 767px){
  .sc-tabs__group{ gap: var(--sc-s4); }
  .sc-tab{ font-size: 11px; padding: 16px 0 !important; }
  .sc-tabs__side{ display: none; }
}

/* ---------- kafle materialow ---------- */

.sc-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
}
.sc-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  min-height: 420px;
  margin: 0;
  padding: var(--sc-s5);
  overflow: hidden;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-tile__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.sc-tile__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-tile:hover .sc-tile__media img{ transform: scale(1.02); }
.sc-tile::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 35%, rgba(0,0,0,.68) 100%);
  pointer-events: none;
}
.sc-tile > *:not(.sc-tile__media){ position: relative; z-index: 2; }

.sc-tile__index{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  margin: 0 0 var(--sc-s2);
}
.sc-tile__name{
  font-family: var(--sc-serif);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--sc-on-dark);
  margin: 0 0 var(--sc-s3);
  max-width: 12ch;
}
.sc-tile__desc{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  margin: 0;
  max-width: 26ch;
  padding-right: 56px;   /* miejsce na okragla strzalke */
}
.sc-tile__desc p{ margin: 0; }

/* okragla strzalka w prawym dolnym rogu */
/* selektor z .sc-tile, bo ".sc-tile > *:not(...)" ma wyzsza specyficznosc
   i bez tego wymusza position:relative — strzalka ladowala po lewej */
.sc-tile .sc-tile__go{
  position: absolute;
  right: var(--sc-s5);
  bottom: var(--sc-s5);
  z-index: 3;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--sc-on-dark);
  text-indent: -9999px;
  overflow: hidden;
  padding: 0 !important;
  transition: background-color var(--sc-dur) var(--sc-ease);
}
.sc-tile .sc-tile__go::after{ content: none; }
.sc-tile .sc-tile__go::before{
  content: '';
  position: absolute;
  top: 18px; left: 15px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-tile .sc-tile__go:hover{ background: rgba(255,255,255,.14) !important; }
.sc-tile .sc-tile__go:hover::before{ transform: rotate(45deg) translate(2px,-2px); }

@media (max-width: 991px){
  .sc-tiles{ grid-template-columns: 1fr; }
  .sc-tile{ min-height: 340px; }
}

/* ---------- material w realizacji ---------- */

.sc-inuse{
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
}
.sc-inuse__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-inuse__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-shot{
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-shot img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-shot:hover img{ transform: scale(1.02); }
.sc-shot__cap{
  position: absolute;
  left: var(--sc-s3);
  bottom: var(--sc-s3);
  z-index: 2;
  font-size: var(--sc-tiny);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  margin: 0;
}
@media (max-width: 991px){
  .sc-inuse{ grid-template-columns: 1fr; gap: var(--sc-s5); }
}
@media (max-width: 600px){
  .sc-inuse__grid{ grid-template-columns: 1fr; }
}

/* ---------- cztery cechy z ikonami ---------- */

.sc-feats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-s6);
  width: 100%;
  max-width: none;
  margin: var(--sc-s7) 0 0;
  padding: var(--sc-s5) 0 0;
  border-top: 1px solid var(--sc-border);
}
.sc-feat{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 38px;   /* miejsce na ikone po lewej */
}
.sc-feat::before{
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}
/* kreska rozdzielajaca rysowana w polowie odstepu, nie na krawedzi bloku */
.sc-feat + .sc-feat::after{
  content: '';
  position: absolute;
  left: calc(-1 * var(--sc-s6) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sc-border);
}
.sc-feat__name{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sc-text);
  margin: 0;
}
.sc-feat__desc{
  font-size: var(--sc-tiny);
  line-height: 1.65;
  color: var(--sc-text-2);
  margin: 0;
  max-width: 26ch;
}
.sc-feat__desc p{ margin: 0; }

.sc-feat--pochodzenie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5%204.5%205.5v6c0%204.4%203.1%208.4%207.5%2010%204.4-1.6%207.5-5.6%207.5-10v-6L12%202.5z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-feat--stabilnosc::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202.8%207.5%2012%2012l9.2-4.5L12%203z%22%2F%3E%3Cpath%20d%3D%22M2.8%2012%2012%2016.5%2021.2%2012%22%2F%3E%3Cpath%20d%3D%22M2.8%2016.5%2012%2021l9.2-4.5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-feat--dopasowanie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018c1%200%201.7-.8%201.7-1.7%200-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.1%200-.9.8-1.7%201.7-1.7h2A4.6%204.6%200%200%200%2021%2010.6C21%206.4%2016.9%203%2012%203z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2210.5%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.5%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2210.5%22%20r%3D%221.1%22%2F%3E%3C%2Fsvg%3E"); }
.sc-feat--ponadczasowy::before{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.2%209c-2%200-3.7%201.3-3.7%203s1.7%203%203.7%203c3.6%200%204.2-6%207.8-6%202%200%203.7%201.3%203.7%203s-1.7%203-3.7%203c-3.6%200-4.2-6-7.8-6z%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 991px){
  .sc-feats{ grid-template-columns: repeat(2, 1fr); gap: var(--sc-s5); }
  .sc-feat + .sc-feat::after{ display: none; }
}
@media (max-width: 600px){
  .sc-feats{ grid-template-columns: 1fr; }
}

/* ---------- ciemny baner "Dotknij, zobacz, doswiadcz" ---------- */

.sc-touch{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-touch__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-sec) var(--sc-s7) var(--sc-sec) var(--sc-pad);
}
.sc-touch__body .sc-h2{ margin: 0; color: var(--sc-on-dark); max-width: 16ch; }
.sc-touch__body .sc-body{ color: rgba(255,255,255,.75); max-width: 42ch; margin: var(--sc-s2) 0 var(--sc-s3); }
.sc-touch__media{ width: 100%; height: 100%; margin: 0; overflow: hidden; }
.sc-touch__media img{
  width: 100%; height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
@media (max-width: 991px){
  .sc-touch{ grid-template-columns: 1fr; }
  .sc-touch__body{ padding: var(--sc-sec) var(--sc-pad); }
}


/* =========================================================
   O NAS — podstrona
   ========================================================= */

/* ---------- liczby ---------- */

.sc-facts-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sc-s5);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-fact{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-fact + .sc-fact{
  padding-left: var(--sc-s5);
  border-left: 1px solid var(--sc-border);
}
.sc-fact__num{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  font-size: clamp(38px, 3.6vw, 56px);
  line-height: 1;
  color: var(--sc-text);
  margin: 0;
}
.sc-fact__label{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-fact__label p{ margin: 0; }

/* uklad: naglowek | tekst | liczby */
.sc-intro-3{
  display: grid;
  grid-template-columns: 4fr 4fr 5fr;
  gap: var(--sc-s7);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-intro-3__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1240px){
  .sc-intro-3{ grid-template-columns: 1fr 1fr; gap: var(--sc-s6); }
  .sc-intro-3__col--facts{ grid-column: 1 / -1; }
}
@media (max-width: 767px){
  .sc-intro-3{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-fact + .sc-fact{ padding-left: 0; border-left: 0; padding-top: var(--sc-s4); border-top: 1px solid var(--sc-border); }
}

/* ---------- wartosci ---------- */

.sc-values{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sc-s5);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
}
.sc-value{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-value + .sc-value{
  padding-left: var(--sc-s5);
  border-left: 1px solid var(--sc-border);
}
.sc-value::before{
  content: '';
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 0 var(--sc-s4);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: .85;
}
.sc-value__name{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
}
.sc-value__desc{
  font-size: var(--sc-tiny);
  line-height: 1.75;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-value__desc p{ margin: 0; }

.sc-value--podejscie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%205.5h23v21h-23z%22%2F%3E%3Cpath%20d%3D%22M4.5%205.5%2027.5%2026.5%22%2F%3E%3Cpath%20d%3D%22M27.5%205.5%204.5%2026.5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-value--materialy::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204c2.6%203.4%202.6%2020.6%200%2024%22%2F%3E%3Cpath%20d%3D%22M12%204c2.6%203.4%202.6%2020.6%200%2024%22%2F%3E%3Cpath%20d%3D%22M17%204c2.6%203.4%202.6%2020.6%200%2024%22%2F%3E%3Cpath%20d%3D%22M22%204c2.6%203.4%202.6%2020.6%200%2024%22%2F%3E%3Cpath%20d%3D%22M26.5%206.5c1.4%202.6%201.4%2016.4%200%2019%22%2F%3E%3C%2Fsvg%3E"); }
.sc-value--rzemioslo::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2019.5h25l-2.5%205.5h-20z%22%2F%3E%3Cpath%20d%3D%22M8%2019.5v-4.2h13.5v4.2%22%2F%3E%3Cpath%20d%3D%22M12%2015.3l1.6-4.8h4.6l1.4%204.8%22%2F%3E%3C%2Fsvg%3E"); }
.sc-value--precyzja::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M16%202.5v5%22%2F%3E%3Cpath%20d%3D%22M16%2024.5v5%22%2F%3E%3Cpath%20d%3D%22M2.5%2016h5%22%2F%3E%3Cpath%20d%3D%22M24.5%2016h5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-value--odpowiedz::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2027S4.5%2020%204.5%2012.6A6.1%206.1%200%200%201%2016%209.6a6.1%206.1%200%200%201%2011.5%203c0%207.4-11.5%2014.4-11.5%2014.4z%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 991px){
  .sc-values{ grid-template-columns: repeat(2, 1fr); gap: var(--sc-s5); }
  .sc-value + .sc-value{ padding-left: 0; border-left: 0; }
}
@media (max-width: 560px){
  .sc-values{ grid-template-columns: 1fr; }
}

/* ---------- zalozyciel ---------- */

.sc-founder{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-founder__media{ width: 100%; height: 100%; margin: 0; overflow: hidden; }
.sc-founder__media img{
  width: 100%; height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}
.sc-founder__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-sec) var(--sc-pad) var(--sc-sec) var(--sc-s7);
}
.sc-founder__body .sc-h2{ margin: 0; color: var(--sc-on-dark); max-width: 18ch; }
.sc-founder__body .sc-body{ color: rgba(255,255,255,.78); max-width: 46ch; margin: var(--sc-s2) 0 0; }
.sc-founder__sign{
  width: 220px;
  margin: var(--sc-s4) 0 var(--sc-s2);
}
.sc-founder__sign img{ width: 100%; height: auto; display: block; }
.sc-founder__name{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-on-dark);
  margin: 0;
}
.sc-founder__role{
  font-size: var(--sc-label);
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 4px 0 0;
}
@media (max-width: 991px){
  .sc-founder{ grid-template-columns: 1fr; }
  .sc-founder__body{ padding: var(--sc-sec) var(--sc-pad); }
  .sc-founder__media img{ min-height: 0; aspect-ratio: 4 / 3; }
}

/* wariant jasny ukladu "zalozyciel" — uzywany w sekcji o Dobrodzieniu */
.sc-founder--light{ background: var(--sc-bg); color: var(--sc-text); }
.sc-founder--light .sc-founder__body .sc-h2{ color: var(--sc-text); }
.sc-founder--light .sc-founder__body .sc-body{ color: var(--sc-text-2); }

/* =========================================================
   POWROT NA GORE
   Zastepuje wtyczke smooth-back-to-top-button, ktora ladowala
   trzy pliki blokujace render plus wlasny font ikon.
   ========================================================= */

.sc-top{
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 120;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--sc-border);
  border-radius: 50%;
  background: rgba(245,243,239,.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--sc-dur) var(--sc-ease),
              transform var(--sc-dur) var(--sc-ease),
              visibility var(--sc-dur) var(--sc-ease),
              background-color var(--sc-dur) var(--sc-ease);
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}
.sc-top.is-shown{ opacity: 1; visibility: visible; transform: none; }
.sc-top::before{
  content: '';
  position: absolute;
  top: 19px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -6px;
  border-left: 1px solid var(--sc-text);
  border-top: 1px solid var(--sc-text);
  transform: rotate(45deg);
}
.sc-top:hover{ background: var(--sc-white); }
.sc-top:focus-visible{ outline: 1px solid var(--sc-text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .sc-top{ transition: none; }
}


/* =========================================================
   PROCES — podstrona
   ========================================================= */

/* ---------- wiersz etapu ---------- */

.sc-step-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-s7);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-step-row--media-left .sc-step-row__body{ order: 2; }
.sc-step-row--media-left .sc-step-row__media{ order: 1; }

.sc-step-row__body{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sc-s6);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-step-row__media{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* wielka numeracja */
.sc-bignum{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  font-size: clamp(76px, 8vw, 128px);
  line-height: .82;
  color: var(--sc-tan);
  margin: 0;
  grid-row: 1 / span 9;
  align-self: start;
}
.sc-section--dark .sc-bignum{ color: var(--sc-tan); }

.sc-step-row__body > *:not(.sc-bignum){ grid-column: 2; width: 100%; }
.sc-step-row__body .sc-label{ margin: 8px 0 var(--sc-s3); }
.sc-step-row__body .sc-h2{ margin: 0 0 var(--sc-s3); max-width: 18ch; }
.sc-step-row__body .sc-body{ margin: 0; max-width: 44ch; }
.sc-step-row__body > .sc-btn,
.sc-step-row__body > .sc-link{ margin-top: var(--sc-s4); justify-self: start; width: auto; }

@media (max-width: 991px){
  .sc-step-row{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-step-row--media-left .sc-step-row__body{ order: 1; }
  .sc-step-row--media-left .sc-step-row__media{ order: 2; }
  .sc-step-row__body{ column-gap: var(--sc-s4); }
}
@media (max-width: 560px){
  .sc-step-row__body{ grid-template-columns: 1fr; }
  .sc-bignum{ grid-row: auto; margin-bottom: var(--sc-s3); }
  .sc-step-row__body > *:not(.sc-bignum){ grid-column: 1; }
}

/* fotografia etapu */
.sc-step-row__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-step-row__media:hover img{ transform: scale(1.02); }

/* mozaika 4 zdjec przy etapie 02 */
.sc-mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-s1);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-mosaic figure{ margin: 0; overflow: hidden; background: var(--sc-bg-alt); }
.sc-mosaic img{
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-mosaic figure:hover img{ transform: scale(1.02); }

/* ---------- "na pierwsze spotkanie warto zabrac" ---------- */

.sc-bring{
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
  padding: var(--sc-s4);
  border: 1px solid var(--sc-border);
}
.sc-bring__title{
  font-size: var(--sc-tiny);
  color: var(--sc-text-2);
  text-align: center;
  margin: 0 0 var(--sc-s4);
}
.sc-bring__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-bring__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 30px;
  font-size: var(--sc-tiny);
  line-height: 1.5;
  color: var(--sc-text-2);
}
.sc-bring__item::before{
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  opacity: .8;
}
.sc-bring__item p{ margin: 0; }
.sc-bring__item--rzut::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h24v22H4z%22%2F%3E%3Cpath%20d%3D%22M4%2017h11%22%2F%3E%3Cpath%20d%3D%22M15%2017V5%22%2F%3E%3Cpath%20d%3D%22M15%2022h13%22%2F%3E%3C%2Fsvg%3E"); }
.sc-bring__item--projekt::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h13l5%205v21H7z%22%2F%3E%3Cpath%20d%3D%22M20%203v5h5%22%2F%3E%3Cpath%20d%3D%22M11%2015h10%22%2F%3E%3Cpath%20d%3D%22M11%2020h10%22%2F%3E%3Cpath%20d%3D%22M11%2025h6%22%2F%3E%3C%2Fsvg%3E"); }
.sc-bring__item--insp::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h24v20H4z%22%2F%3E%3Cpath%20d%3D%22M4%2021l7-7%205%205%204-4%208%208%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.sc-bring__item--agd::before{     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204h20v24H6z%22%2F%3E%3Cpath%20d%3D%22M6%2013h20%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%228.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228.5%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M11%2018h10%22%2F%3E%3Cpath%20d%3D%22M11%2022h6%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 767px){ .sc-bring__grid{ grid-template-columns: 1fr 1fr; gap: var(--sc-s4); } }

/* ---------- sciezka postepu (etap 02) ---------- */

.sc-track{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
  padding: 0;
}
.sc-track::before{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  height: 1px;
  background: var(--sc-border);
}
.sc-track__step{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 16px;
  text-align: center;
}
.sc-track__step::after{
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
}
.sc-track__step.is-done::after{ background: var(--sc-text); border-color: var(--sc-text); }
.sc-track__label{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  margin: 0;
  line-height: 1.4;
}
.sc-track__step.is-done .sc-track__label{ color: var(--sc-text); }

@media (max-width: 560px){
  .sc-track{ grid-auto-flow: row; gap: var(--sc-s3); }
  .sc-track::before{ display: none; }
  .sc-track__step{ align-items: flex-start; text-align: left; padding-bottom: 0; padding-left: 22px; }
  .sc-track__step::after{ left: 0; top: 3px; bottom: auto; margin-left: 0; }
}

/* ---------- karty materialow (etap 03) ---------- */

.sc-matcards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s3);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-matcard{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-matcard figure{ margin: 0; width: 100%; overflow: hidden; background: var(--sc-bg-alt); }
.sc-matcard img{
  display: block; width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-matcard:hover img{ transform: scale(1.02); }
.sc-matcard__name{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
}
.sc-matcard__list{
  font-size: var(--sc-tiny);
  line-height: 1.8;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-matcard__list p{ margin: 0; }
@media (max-width: 767px){ .sc-matcards{ grid-template-columns: 1fr; gap: var(--sc-s5); } }

/* ---------- pasek etapow produkcji (etap 04) ---------- */

.sc-prodsteps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sc-s4);
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
  padding: var(--sc-s4) 0 0;
  border-top: 1px solid var(--sc-border-dark);
}
.sc-prodstep{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 28px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}
.sc-prodstep::before{
  content: '';
  position: absolute;
  left: 0; top: -2px;
  width: 20px; height: 20px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  opacity: .85;
}
.sc-prodstep--ciecie::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18l6-6%22%2F%3E%3Cpath%20d%3D%22M3%2020l4%205h12%22%2F%3E%3Cpath%20d%3D%22M21%2020l-4-8%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2225%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
.sc-prodstep--fornir::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%204%203%2011l13%207%2013-7z%22%2F%3E%3Cpath%20d%3D%22M3%2017l13%207%2013-7%22%2F%3E%3Cpath%20d%3D%22M3%2023l13%206%2013-6%22%2F%3E%3C%2Fsvg%3E"); }
.sc-prodstep--lakier::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%208h9v20h-9z%22%2F%3E%3Cpath%20d%3D%22M12%2013h9%22%2F%3E%3Cpath%20d%3D%22M9%205h3%22%2F%3E%3Cpath%20d%3D%22M6%208l3-3%22%2F%3E%3Cpath%20d%3D%22M4%2012h2%22%2F%3E%3Cpath%20d%3D%22M5%2017h2%22%2F%3E%3C%2Fsvg%3E"); }
.sc-prodstep--skladanie::before{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%206h10v10H5z%22%2F%3E%3Cpath%20d%3D%22M17%2016h10v10H17z%22%2F%3E%3Cpath%20d%3D%22M15%2011h4v5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-prodstep--kontrola::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M21%2021l6%206%22%2F%3E%3Cpath%20d%3D%22M10.5%2014l2.5%202.5%205-5%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 767px){ .sc-prodsteps{ grid-template-columns: 1fr 1fr; gap: var(--sc-s4); } }

/* ---------- karta "gotowe" (etap 05) ---------- */

.sc-done{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 200px;
  margin: 0;
  padding: var(--sc-s4);
  background: var(--sc-bg-alt);
  text-align: center;
}
.sc-done::before{
  content: '';
  width: 34px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M11%2016.5l3.5%203.5L21%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat left top / contain;
  opacity: .55;
}
.sc-done__label{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-done__text{
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: var(--sc-text);
  margin: 0;
  max-width: 18ch;
}
.sc-done__text p{ margin: 0; }

/* ---------- ile trwa caly proces ---------- */

.sc-time{
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--sc-s7);
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: var(--sc-s5) 0 0;
}
/* lewa kolumna: os czasu + podsumowanie pod nia */
.sc-time__left{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s5);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-time__sum{
  font-size: var(--sc-small);
  line-height: 1.6;
  color: var(--sc-text);
  margin: 0;
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-border);
}
.sc-time__sum p{ margin: 0; }
.sc-time__sum strong{ font-weight: 600; }

.sc-time__track{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-tstep{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.sc-tstep::before{
  content: '';
  width: 28px; height: 28px;
  margin-bottom: var(--sc-s2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .8;
}
.sc-tstep__no{
  font-size: 10px;
  letter-spacing: var(--sc-ls-label);
  color: var(--sc-text-2);
  margin: 0;
}
.sc-tstep__name{
  font-size: var(--sc-small);
  color: var(--sc-text);
  margin: 0;
  line-height: 1.4;
  min-height: 2.8em;   /* dwa wiersze — kropki ustawiaja sie w rownej linii */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Kropka wraz z odcinkiem linii. Linia jest tlem tego samego elementu,
   wiec zawsze biegnie dokladnie przez srodek kropek — niezaleznie od tego,
   ile wierszy zajmie nazwa etapu wyzej. */
.sc-tstep__dot{
  position: relative;
  display: block;
  height: 9px;
  width: calc(100% + var(--sc-s3));
  margin: var(--sc-s3) calc(-1 * var(--sc-s3) / 2);
  background: linear-gradient(var(--sc-border), var(--sc-border)) center center / 100% 1px no-repeat;
}
.sc-tstep__dot::before{
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--sc-text);
}
/* skrajne odcinki koncza sie na kropce, nie wystaja poza os */
.sc-tstep:first-child .sc-tstep__dot{
  background-size: 50% 1px;
  background-position: right center;
}
.sc-tstep:last-child .sc-tstep__dot{
  background-size: 50% 1px;
  background-position: left center;
}
.sc-tstep__time{
  font-size: var(--sc-tiny);
  color: var(--sc-text-2);
  margin: 0;
}
.sc-tstep--spotkanie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2026c0-4%203-7%207-7s7%203%207%207%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2212%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M19.5%2026c0-3.4%202.3-6%205-6%202%200%203.5%201.4%203.5%203.4%22%2F%3E%3C%2Fsvg%3E"); }
.sc-tstep--wycena::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204h13l5%205v19H7z%22%2F%3E%3Cpath%20d%3D%22M20%204v5h5%22%2F%3E%3Cpath%20d%3D%22M12%2014h8%22%2F%3E%3Cpath%20d%3D%22M12%2019h8%22%2F%3E%3Cpath%20d%3D%22M16%2011v11%22%2F%3E%3C%2Fsvg%3E"); }
.sc-tstep--pomiar::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h26v8H3z%22%2F%3E%3Cpath%20d%3D%22M8%2012v4%22%2F%3E%3Cpath%20d%3D%22M13%2012v6%22%2F%3E%3Cpath%20d%3D%22M18%2012v4%22%2F%3E%3Cpath%20d%3D%22M23%2012v6%22%2F%3E%3C%2Fsvg%3E"); }
.sc-tstep--produkcja::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2027V13l7%204V13l7%204V13l7%204v10z%22%2F%3E%3Cpath%20d%3D%22M4%2027h21%22%2F%3E%3Cpath%20d%3D%22M9%2022h3%22%2F%3E%3Cpath%20d%3D%22M16%2022h3%22%2F%3E%3C%2Fsvg%3E"); }
.sc-tstep--montaz::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204l8%208-4%204-8-8z%22%2F%3E%3Cpath%20d%3D%22M16%2012L5%2023a2.8%202.8%200%201%200%204%204l11-11%22%2F%3E%3C%2Fsvg%3E"); }

.sc-time__cta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-s5);
  background: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-time__cta .sc-h3{ margin: 0; color: var(--sc-on-dark); max-width: 14ch; }
.sc-time__cta .sc-body{ color: rgba(255,255,255,.72); font-size: var(--sc-small); margin: 0; max-width: 30ch; }

@media (max-width: 991px){
  .sc-time{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-time__track{ grid-auto-flow: row; gap: var(--sc-s5); }
  .sc-time__track::before{ display: none; }
  .sc-tstep{ flex-direction: row; align-items: center; text-align: left; gap: var(--sc-s3); }
  .sc-tstep::before{ margin-bottom: 0; flex: 0 0 auto; }
  .sc-tstep__dot{ display: none; }
  .sc-tstep__name{ min-height: 0; display: block; }
  .sc-tstep__time{ margin-left: auto; }
}

/* ---------- FAQ ---------- */

.sc-faq{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sc-s5);
  width: 100%;
  max-width: none;
  margin: var(--sc-s5) 0 0;
  border-top: 1px solid var(--sc-border);
}
.sc-faq__item{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--sc-border);
}
.sc-faq__q{
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sc-sans);
  font-size: var(--sc-small);
  line-height: 1.5;
  color: var(--sc-text);
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--sc-s4) 34px var(--sc-s4) 0 !important;
  cursor: pointer;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-faq__q::after{ content: none; }
.sc-faq__q:hover{ opacity: .65; }
.sc-faq__q::before{
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--sc-text), var(--sc-text)) center/13px 1px no-repeat,
    linear-gradient(var(--sc-text), var(--sc-text)) center/1px 13px no-repeat;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-faq__item.is-open .sc-faq__q::before{ transform: rotate(45deg); }
.sc-faq__a{
  font-size: var(--sc-tiny);
  line-height: 1.75;
  color: var(--sc-text-2);
  margin: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--sc-ease), opacity .35s var(--sc-ease), padding .35s var(--sc-ease);
  padding: 0 34px 0 0;
}
.sc-faq__item.is-open .sc-faq__a{
  max-height: 460px;
  opacity: 1;
  padding-bottom: var(--sc-s4);
}
.sc-faq__a p{ margin: 0 0 var(--sc-s2); }
.sc-faq__a p:last-child{ margin-bottom: 0; }

@media (max-width: 991px){ .sc-faq{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .sc-faq{ grid-template-columns: 1fr; } }


/* =========================================================
   DLA ARCHITEKTOW — podstrona
   ========================================================= */

/* ---------- naglowek bloku z numerem po lewej ---------- */

.sc-block{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sc-s6);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-block__no{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: .85;
  color: var(--sc-tan);
  margin: 0;
  grid-row: 1 / span 12;
}
.sc-block > *:not(.sc-block__no){ grid-column: 2; width: 100%; }
.sc-block .sc-label{ margin: 6px 0 var(--sc-s3); }
.sc-block .sc-h2,
.sc-block .sc-h3{ margin: 0 0 var(--sc-s3); max-width: 26ch; }
.sc-block > .sc-btn,
.sc-block > .sc-link{ margin-top: var(--sc-s4); justify-self: start; width: auto; }

@media (max-width: 560px){
  .sc-block{ grid-template-columns: 1fr; }
  .sc-block__no{ grid-row: auto; margin-bottom: var(--sc-s3); }
  .sc-block > *:not(.sc-block__no){ grid-column: 1; }
}

/* naglowek dwukolumnowy: tytul + akapit obok */
.sc-block__split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-s7);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 991px){ .sc-block__split{ grid-template-columns: 1fr; gap: var(--sc-s4); } }

/* ---------- 01 sciezka: koncepcja -> opracowanie -> realizacja ---------- */

.sc-flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--sc-s4);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: var(--sc-s6) 0 0;
}
.sc-flow__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-flow__item figure{ margin: 0; width: 100%; overflow: hidden; background: var(--sc-bg-alt); }
.sc-flow__item img{
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-flow__item:hover img{ transform: scale(1.02); }
.sc-flow__cap{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  margin: 0;
  padding-top: var(--sc-s2);
  border-top: 1px solid var(--sc-border);
  width: 100%;
}
.sc-flow__arrow{
  width: 26px; height: 26px;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23B9A99A%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2016h20%22%2F%3E%3Cpath%20d%3D%22M20%2010l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  align-self: center;
  flex: 0 0 auto;
}
@media (max-width: 991px){
  .sc-flow{ grid-template-columns: 1fr; gap: var(--sc-s5); }
  .sc-flow__arrow{ transform: rotate(90deg); justify-self: center; }
}

/* ---------- 02 co dajemy architektom ---------- */

.sc-offer{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sc-s4);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s5) 0 0;
}
.sc-offer__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-offer__item + .sc-offer__item{
  padding-left: var(--sc-s4);
  border-left: 1px solid var(--sc-border);
}
.sc-offer__item::before{
  content: '';
  display: block;
  width: 34px; height: 34px;
  margin-bottom: var(--sc-s3);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: .85;
}
.sc-offer__name{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
  line-height: 1.5;
}
.sc-offer__desc{
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-offer__desc p{ margin: 0; }

.sc-offer__item--konsult::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h11v8H4z%22%2F%3E%3Cpath%20d%3D%22M17%206h11v8H17z%22%2F%3E%3Cpath%20d%3D%22M4%2018h11v8H4z%22%2F%3E%3Cpath%20d%3D%22M17%2018h11v8H17z%22%2F%3E%3Cpath%20d%3D%22M15%2010h2%22%2F%3E%3Cpath%20d%3D%22M15%2022h2%22%2F%3E%3Cpath%20d%3D%22M9.5%2014v4%22%2F%3E%3Cpath%20d%3D%22M22.5%2014v4%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--probki::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h16v4H4z%22%2F%3E%3Cpath%20d%3D%22M6%2015h16v4H6z%22%2F%3E%3Cpath%20d%3D%22M8%2021h16v4H8z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--wycena::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h18v26H7z%22%2F%3E%3Cpath%20d%3D%22M11%208h10v4H11z%22%2F%3E%3Cpath%20d%3D%22M11%2017h2%22%2F%3E%3Cpath%20d%3D%22M15%2017h2%22%2F%3E%3Cpath%20d%3D%22M19%2017h2%22%2F%3E%3Cpath%20d%3D%22M11%2022h2%22%2F%3E%3Cpath%20d%3D%22M15%2022h2%22%2F%3E%3Cpath%20d%3D%22M19%2022h2%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--pomiar::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2026%2026%206l-4-4L2%2022z%22%2F%3E%3Cpath%20d%3D%22M9%2019l3%203%22%2F%3E%3Cpath%20d%3D%22M13%2015l3%203%22%2F%3E%3Cpath%20d%3D%22M17%2011l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--produkcja::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2027V13l7%204V13l7%204V13l7%204v10z%22%2F%3E%3Cpath%20d%3D%22M4%2027h21%22%2F%3E%3Cpath%20d%3D%22M9%2022h3%22%2F%3E%3Cpath%20d%3D%22M16%2022h3%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--montaz::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204l8%208-4%204-8-8z%22%2F%3E%3Cpath%20d%3D%22M16%2012L5%2023a2.8%202.8%200%201%200%204%204l11-11%22%2F%3E%3C%2Fsvg%3E"); }
.sc-offer__item--partner::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2211%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M6%2028c0-5.5%204.5-10%2010-10s10%204.5%2010%2010%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 1240px){ .sc-offer{ grid-template-columns: repeat(4, 1fr); gap: var(--sc-s5) var(--sc-s4); } }
@media (max-width: 767px){
  .sc-offer{ grid-template-columns: repeat(2, 1fr); }
  .sc-offer__item + .sc-offer__item{ padding-left: 0; border-left: 0; }
}

/* ---------- 03 probki materialow ---------- */

.sc-swatches{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
}
.sc-swatch{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-swatch figure{ margin: 0; overflow: hidden; background: var(--sc-bg-alt); }
.sc-swatch img{
  display: block; width: 100%;
  aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-swatch:hover img{ transform: scale(1.02); }
.sc-swatch__name{
  font-size: var(--sc-tiny);
  line-height: 1.5;
  color: var(--sc-text);
  margin: 0;
}

/* ---------- 04 detale ---------- */

.sc-details{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 2.1fr) minmax(0, 1fr);
  aspect-ratio: 100 / 74;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
}
.sc-details > *{ margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--sc-bg-alt); }
.sc-details > *:nth-child(1){ grid-column: 1; grid-row: 1 / span 2; }
.sc-details > *:nth-child(2){ grid-column: 2; grid-row: 1; }
.sc-details > *:nth-child(3){ grid-column: 3; grid-row: 1 / span 2; }
.sc-details > *:nth-child(4){ grid-column: 2; grid-row: 2; }
.sc-details img{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-details > *:hover img{ transform: scale(1.02); }
@media (max-width: 560px){
  .sc-details{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .sc-details > *{ grid-column: auto !important; grid-row: auto !important; height: auto; }
  .sc-details img{ height: auto; aspect-ratio: 4 / 3; }
}

/* ---------- 05 biblioteka projektanta ---------- */

.sc-libr{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
  border-top: 1px solid var(--sc-border);
}
.sc-libr__row{
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
  padding: var(--sc-s4) 34px var(--sc-s4) 44px !important;
  text-decoration: none;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-libr__row::after{ content: none; }
.sc-libr__row:hover{ opacity: .65; }
.sc-libr__row::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: .8;
}
.sc-libr__row .sc-libr__t{
  display: block;
  font-family: var(--sc-sans);
  font-size: var(--sc-small);
  color: var(--sc-text);
  line-height: 1.4;
}
.sc-libr__row .sc-libr__d{
  display: block;
  font-size: var(--sc-tiny);
  color: var(--sc-text-2);
  line-height: 1.5;
  margin-top: 3px;
}
.sc-libr__row .sc-libr__go{
  position: absolute;
  right: 4px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%236D6A65%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%208l8%208-8%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.sc-libr__row--karty::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2211%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M4%2024c0-3.4%202.7-6%206-6s6%202.6%206%206%22%2F%3E%3Cpath%20d%3D%22M20%2010h8%22%2F%3E%3Cpath%20d%3D%22M20%2016h8%22%2F%3E%3Cpath%20d%3D%22M20%2022h5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-libr__row--detale::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h12l5%205v21H8z%22%2F%3E%3Cpath%20d%3D%22M20%203v5h5%22%2F%3E%3Cpath%20d%3D%22M12%2015h9%22%2F%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M12%2025h5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-libr__row--inspi::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h24v20H4z%22%2F%3E%3Cpath%20d%3D%22M4%2021l7-7%205%205%204-4%208%208%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }

/* ---------- 06 jak wyglada wspolpraca ---------- */

.sc-steps4{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: var(--sc-s3);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s5) 0 0;
}
.sc-step4{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-step4::before{
  content: '';
  display: block;
  width: 32px; height: 32px;
  margin-bottom: var(--sc-s3);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: .85;
}
.sc-step4__no{
  font-size: 10px;
  letter-spacing: var(--sc-ls-label);
  color: var(--sc-text-2);
  margin: 0;
}
.sc-step4__name{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 0;
  line-height: 1.5;
}
.sc-step4__desc{
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-step4__desc p{ margin: 0; }
.sc-step4--przeslij::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h12l5%205v21H8z%22%2F%3E%3Cpath%20d%3D%22M20%203v5h5%22%2F%3E%3Cpath%20d%3D%22M16%2022V13%22%2F%3E%3Cpath%20d%3D%22M12.5%2016.5%2016%2013l3.5%203.5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-step4--konsultacja::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18v12H10l-7%206z%22%2F%3E%3Cpath%20d%3D%22M14%2012h15v11h-4l-4%204v-4h-7z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-step4--wycena::before{      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h12l5%205v21H8z%22%2F%3E%3Cpath%20d%3D%22M20%203v5h5%22%2F%3E%3Cpath%20d%3D%22M12.5%2019l2.5%202.5%205-5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-step4--montaz::before{      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204l8%208-4%204-8-8z%22%2F%3E%3Cpath%20d%3D%22M16%2012L5%2023a2.8%202.8%200%201%200%204%204l11-11%22%2F%3E%3C%2Fsvg%3E"); }

.sc-steps4__arrow{
  width: 22px; height: 22px;
  margin: 34px 0 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23B9A99A%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2016h20%22%2F%3E%3Cpath%20d%3D%22M20%2010l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  flex: 0 0 auto;
}
@media (max-width: 991px){
  .sc-steps4{ grid-template-columns: 1fr 1fr; gap: var(--sc-s5) var(--sc-s4); }
  .sc-steps4__arrow{ display: none; }
}
@media (max-width: 520px){ .sc-steps4{ grid-template-columns: 1fr; } }

/* ---------- 07 wybrane wspolprace ---------- */

.sc-collabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s3);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
}
.sc-collab{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-collab figure{ margin: 0; overflow: hidden; background: var(--sc-bg-alt); }
.sc-collab img{
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--sc-dur-img) var(--sc-ease);
}
.sc-collab:hover img{ transform: scale(1.02); }
.sc-collab__title{
  font-family: var(--sc-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--sc-text);
  margin: 0;
}
.sc-collab__credits{
  font-size: var(--sc-tiny);
  line-height: 1.7;
  color: var(--sc-text-2);
  margin: 0;
}
.sc-collab__credits p{ margin: 0; }
@media (max-width: 767px){ .sc-collabs{ grid-template-columns: 1fr; gap: var(--sc-s5); } }

/* ---------- dolne pasmo: 07 | 08 | 09 ---------- */

.sc-arch-bottom{
  display: grid;
  grid-template-columns: 5fr 3fr 4fr;
  gap: var(--sc-s6);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
.sc-arch-bottom--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 991px){ .sc-arch-bottom--2{ grid-template-columns: 1fr; } }
.sc-arch-bottom__col{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-arch-bottom__col + .sc-arch-bottom__col{
  padding-left: var(--sc-s6);
  border-left: 1px solid var(--sc-border);
}
@media (max-width: 1240px){
  .sc-arch-bottom{ grid-template-columns: 1fr 1fr; gap: var(--sc-s6); }
  .sc-arch-bottom__col--form,
  .sc-arch-bottom__col--cta{ grid-column: 1 / -1; }
  .sc-arch-bottom__col + .sc-arch-bottom__col{ padding-left: var(--sc-s6); }
  .sc-arch-bottom__col--form,
  .sc-arch-bottom__col--cta{ padding-left: 0 !important; border-left: 0 !important; padding-top: var(--sc-s6); border-top: 1px solid var(--sc-border); }
}
@media (max-width: 767px){
  .sc-arch-bottom{ grid-template-columns: 1fr; }
  .sc-arch-bottom__col + .sc-arch-bottom__col{
    padding-left: 0; border-left: 0;
    padding-top: var(--sc-s6); border-top: 1px solid var(--sc-border);
  }
}


/* ---------- 09 kolumna CTA (formularz wielokrokowy dodamy pozniej) ---------- */

.sc-arch-cta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-s3);
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
  padding: 0;
}
.sc-arch-cta .sc-body{ margin: 0; }
.sc-arch-cta .sc-btn{ margin-top: var(--sc-s2); }
.sc-arch-cta__list{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  width: 100%;
  margin: var(--sc-s2) 0 0;
  padding-top: var(--sc-s3);
  border-top: 1px solid var(--sc-border);
}
.sc-arch-cta__li{
  position: relative;
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: var(--sc-text-2);
  margin: 0;
  padding-left: 18px;
}
.sc-arch-cta__li::before{
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 1px;
  background: var(--sc-tan);
}

.sc-collab{ text-decoration: none; color: inherit; }
.sc-collab:hover .sc-collab__title{ opacity: .7; }
.sc-collabs-pusto{
  font-size: var(--sc-tiny);
  line-height: 1.7;
  color: var(--sc-text-2);
  margin: var(--sc-s4) 0 0;
  padding: var(--sc-s3);
  border: 1px dashed var(--sc-border);
}

/* ---------- Dla architektow: hero szerszy niz na pozostalych podstronach ---------- */

.sc-hero-band--arch .sc-hero-band__body{ max-width: 56%; }
.sc-hero-band--arch .sc-hero-band__body .sc-h1{ max-width: 24ch; }
.sc-hero-band--arch .sc-hero-band__body .sc-body{ max-width: 58ch; }
@media (max-width: 991px){
  .sc-hero-band--arch .sc-hero-band__body{ max-width: 100%; }
}

/* naglowki w blokach numerowanych — mniejsze niz standardowe .sc-h2 */
.sc-block .sc-h2{ font-size: clamp(28px, 2.9vw, 44px); line-height: 1.15; }
.sc-block .sc-h3{ font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; }
.sc-block__split{ grid-template-columns: 1.15fr 1fr; gap: var(--sc-s6); }
@media (max-width: 991px){ .sc-block__split{ grid-template-columns: 1fr; gap: var(--sc-s4); } }

/* ---------- korekty gestosci w pasmach wielokolumnowych ---------- */

/* 05 + 06: blok "jak wyglada wspolpraca" potrzebuje wiecej miejsca */
.sc-arch-bottom--w2{ grid-template-columns: 1fr 1.35fr; }
@media (max-width: 991px){ .sc-arch-bottom--w2{ grid-template-columns: 1fr; } }

@media (min-width: 992px){
  .sc-steps4{ grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: var(--sc-s3); }
}
.sc-steps4__arrow{ width: 18px; height: 18px; }

/* 07 | 08 | 09: numer i naglowek mniejsze, zeby kolumny oddychaly */
.sc-arch-bottom .sc-block{ column-gap: var(--sc-s4); }
.sc-arch-bottom .sc-block__no{ font-size: clamp(34px, 3vw, 50px); }
.sc-arch-bottom--3 .sc-block .sc-h2,
.sc-arch-bottom--3 .sc-block .sc-h3{
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.25;
  max-width: none;
}
.sc-arch-bottom--3{ grid-template-columns: 5fr 3.2fr 3.8fr; }
@media (max-width: 1240px){ .sc-arch-bottom--3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px){ .sc-arch-bottom--3{ grid-template-columns: 1fr; } }

/* =========================================================
   PODSTRONA KONTAKT
   ========================================================= */

/* ---------- pasmo z danymi kontaktowymi (4 kolumny) ---------- */

.sc-kontakt-band{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-kbox{
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--sc-s5) 0 52px;
}
.sc-kbox + .sc-kbox{
  border-left: 1px solid var(--sc-border);
  padding-left: calc(var(--sc-s5) + 52px);
}
.sc-kbox::before{
  content: '';
  position: absolute;
  top: 2px;
  width: 30px; height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sc-kbox::before{ left: 0; }
.sc-kbox + .sc-kbox::before{ left: var(--sc-s5); }
.sc-kbox__name{
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text);
  margin: 4px 0 var(--sc-s2);
}
.sc-kbox__val{
  font-size: var(--sc-small);
  line-height: 1.8;
  color: var(--sc-text);
  margin: 0;
}
.sc-kbox__val p{ margin: 0; }
.sc-kbox__val a{ color: inherit; text-decoration: none; }
.sc-kbox__val a:hover{ opacity: .65; }
.sc-kbox__note{
  font-size: var(--sc-small);
  line-height: 1.8;
  color: var(--sc-text-2);
  margin: var(--sc-s2) 0 0;
}
.sc-kbox__note p{ margin: 0; }

.sc-kbox--adres::before{   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2029s10-9.2%2010-16A10%2010%200%200%200%206%2013c0%206.8%2010%2016%2010%2016z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%223.4%22%2F%3E%3C%2Fsvg%3E"); }
.sc-kbox--tel::before{     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204l4%206-3%203c1.6%203.4%204.6%206.4%208%208l3-3%206%204-2.5%204.6c-.6%201-1.7%201.6-2.9%201.4C13.6%2026.4%205.6%2018.4%204%209.4c-.2-1.2.4-2.3%201.4-2.9z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-kbox--mail::before{    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2226%22%20height%3D%2218%22%2F%3E%3Cpath%20d%3D%22M3%208l13%2010L29%208%22%2F%3E%3C%2Fsvg%3E"); }
.sc-kbox--godziny::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M16%208v8l5%203%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 991px){
  .sc-kontakt-band{ grid-template-columns: 1fr 1fr; row-gap: var(--sc-s5); }
  .sc-kbox,
  .sc-kbox + .sc-kbox{ padding: 0 var(--sc-s4) 0 52px; border-left: 0; }
  .sc-kbox::before,
  .sc-kbox + .sc-kbox::before{ left: 0; }
  .sc-kbox:nth-child(2n)::before{ left: 0; }
}
@media (max-width: 560px){
  .sc-kontakt-band{ grid-template-columns: 1fr; }
}

/* ---------- formularz + mapa ---------- */

.sc-kontakt-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-kontakt-split__l{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-sec) var(--sc-s7) var(--sc-sec) var(--sc-pad);
  background: var(--sc-bg);
}
.sc-kontakt-split__r{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-kontakt-split__l .sc-h2{ margin: var(--sc-s2) 0 var(--sc-s3); max-width: 22ch; }

/* karta z danymi na mapie */
.sc-mapa__media{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.sc-mapa__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-mapa__karta{
  position: absolute;
  right: var(--sc-s5);
  top: var(--sc-s5);
  z-index: 2;
  width: min(300px, 62%);
  margin: 0;
  padding: var(--sc-s3);
  background: var(--sc-white);
  box-shadow: 0 10px 40px rgba(0,0,0,.10);
}
.sc-mapa__karta .sc-kbox__name{ margin-top: 0; }
.sc-mapa__go{
  position: absolute;
  left: var(--sc-s5);
  bottom: var(--sc-s5);
  z-index: 2;
  margin: 0;
}
@media (max-width: 991px){
  .sc-kontakt-split{ grid-template-columns: 1fr; }
  .sc-kontakt-split__l{ padding: var(--sc-sec) var(--sc-pad); }
  .sc-kontakt-split__r{ min-height: 380px; }
  .sc-mapa__karta{ right: var(--sc-s3); top: var(--sc-s3); }
  .sc-mapa__go{ left: var(--sc-s3); bottom: var(--sc-s3); }
}

/* skroty kontaktowe pod naglowkiem formularza */
.sc-kdirect{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  width: 100%;
  max-width: none;
  margin: var(--sc-s4) 0 0;
  padding-top: var(--sc-s3);
  border-top: 1px solid var(--sc-border);
}
.sc-kdirect__row{
  position: relative;
  display: block;
  font-size: var(--sc-small);
  line-height: 1.7;
  color: var(--sc-text);
  text-decoration: none;
  margin: 0;
  padding: var(--sc-s1) 0 var(--sc-s1) 34px;
  background: none !important;
  border: 0 !important;
  transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-kdirect__row::after{ content: none; }
.sc-kdirect__row:hover{ opacity: .65; }
.sc-kdirect__row::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sc-kdirect__row--tel::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204l4%206-3%203c1.6%203.4%204.6%206.4%208%208l3-3%206%204-2.5%204.6c-.6%201-1.7%201.6-2.9%201.4C13.6%2026.4%205.6%2018.4%204%209.4c-.2-1.2.4-2.3%201.4-2.9z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-kdirect__row--mail::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2226%22%20height%3D%2218%22%2F%3E%3Cpath%20d%3D%22M3%208l13%2010L29%208%22%2F%3E%3C%2Fsvg%3E"); }

/* ---------- dolne pasmo: zdjecie + dwie karty ---------- */

.sc-visit{
  display: grid;
  grid-template-columns: 5fr 4fr 4fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.sc-visit__media{ width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--sc-bg-alt); }
.sc-visit__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-visit__card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sc-s6) var(--sc-s5);
  background: var(--sc-bg);
}
.sc-visit__card + .sc-visit__card{ border-left: 1px solid var(--sc-border); }
.sc-visit__card .sc-h3{ margin: var(--sc-s2) 0 var(--sc-s3); max-width: 18ch; }
.sc-visit__card .sc-body{ margin: 0 0 var(--sc-s4); }
.sc-visit__card .sc-btn{ margin-top: auto; }

.sc-visit__list{
  display: flex;
  flex-direction: column;
  gap: var(--sc-s3);
  width: 100%;
  margin: 0;
}
.sc-visit__li{
  position: relative;
  font-size: var(--sc-small);
  line-height: 1.6;
  color: var(--sc-text);
  margin: 0;
  padding-left: 42px;
}
.sc-visit__li::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sc-visit__li--spotkanie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%2224%22%20height%3D%2222%22%2F%3E%3Cpath%20d%3D%22M4%2013h24%22%2F%3E%3Cpath%20d%3D%22M10%203v6%22%2F%3E%3Cpath%20d%3D%22M22%203v6%22%2F%3E%3Cpath%20d%3D%22M16%2017v7%22%2F%3E%3Cpath%20d%3D%22M12.5%2020.5%2016%2017l3.5%203.5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-visit__li--kawa::before{     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h17v8a6%206%200%200%201-6%206h-5a6%206%200%200%201-6-6z%22%2F%3E%3Cpath%20d%3D%22M22%2014h3a3%203%200%200%201%200%206h-3%22%2F%3E%3Cpath%20d%3D%22M10%208c0-1.5%201.5-2%201.5-3.5%22%2F%3E%3Cpath%20d%3D%22M16%208c0-1.5%201.5-2%201.5-3.5%22%2F%3E%3C%2Fsvg%3E"); }
.sc-visit__li--parking::before{  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Cpath%20d%3D%22M12%2023V10h5a4%204%200%200%201%200%208h-5%22%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 1240px){
  .sc-visit{ grid-template-columns: 1fr 1fr; }
  .sc-visit__media{ grid-column: 1 / -1; aspect-ratio: 21 / 9; height: auto; }
}
@media (max-width: 767px){
  .sc-visit{ grid-template-columns: 1fr; }
  .sc-visit__card + .sc-visit__card{ border-left: 0; border-top: 1px solid var(--sc-border); }
  .sc-visit__media{ aspect-ratio: 4 / 3; }
}

.sc-hero-band__rule{
  width: 64px;
  height: 1px;
  margin: var(--sc-s3) 0 var(--sc-s1);
  background: rgba(255,255,255,.5);
}

/* Bricks centruje zawartosc kontenerow — nasze bloki kontaktu wyrownujemy do lewej */
.sc-kontakt-split__l,
.sc-mapa__karta,
.sc-kbox{
  align-items: flex-start;
  text-align: left;
}
.sc-kontakt-split__l{ display: flex; flex-direction: column; }
.sc-kontakt-split__l > *{ width: 100%; }
.sc-kontakt-split__l > .sc-btn{ width: auto; align-self: flex-start; }
.sc-mapa__karta{ display: block; }

/* szerszy wariant baneru naglowkowego (Dla architektow, Kontakt) */
.sc-hero-band--szer .sc-hero-band__body{ max-width: 56%; }
.sc-hero-band--szer .sc-hero-band__body .sc-h1{ max-width: 24ch; }
.sc-hero-band--szer .sc-hero-band__body .sc-body{ max-width: 58ch; }
@media (max-width: 991px){
  .sc-hero-band--szer .sc-hero-band__body{ max-width: 100%; }
}

.sc-kdirect,
.sc-visit__list,
.sc-arch-cta__list,
.sc-swatch,
.sc-collab,
.sc-flow__item,
.sc-step4,
.sc-offer__item{
  align-items: flex-start;
  text-align: left;
}
.sc-kdirect > *,
.sc-visit__list > *,
.sc-arch-cta__list > *{ width: 100%; }

/* =========================================================
   FORMULARZ "UMÓW SPOTKANIE" — okno modalne
   ========================================================= */

body.sc-modal-otwarty{ overflow: hidden; }

.sc-modal{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 48px);
  opacity: 0;
  transition: opacity .26s var(--sc-ease);
}
.sc-modal.is-otwarty{ opacity: 1; }
.sc-modal[hidden]{ display: none; }

.sc-modal__tlo{
  position: absolute;
  inset: 0;
  background: rgba(12,11,10,.72);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.sc-modal__okno{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5fr 7fr;
  width: 100%;
  max-width: 1280px;
  max-height: 100%;
  background: var(--sc-bg);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  transform: translateY(14px);
  transition: transform .3s var(--sc-ease);
  overflow: hidden;
}
.sc-modal.is-otwarty .sc-modal__okno{ transform: none; }
.sc-modal__okno:focus{ outline: none; }

/* ---------- lewy panel ze zdjęciem ---------- */

.sc-modal__lewy{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sc-s6) var(--sc-s5);
  background: var(--sc-dark) no-repeat center / cover;
  color: var(--sc-on-dark);
  isolation: isolate;
}
.sc-modal__lewy::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,11,10,.45) 0%, rgba(12,11,10,.82) 100%);
}
.sc-modal__lewy .sc-h2{
  color: var(--sc-on-dark);
  margin: 0 0 var(--sc-s3);
  font-size: clamp(24px, 2.2vw, 34px);
  max-width: 16ch;
}
.sc-modal__lewy .sc-body{ color: rgba(255,255,255,.82); margin: 0; }
.sc-modal__lewy-tresc{ margin: auto 0; }

.sc-modal__logo{ flex: 0 0 auto; }
.sc-modal__adres{
  position: relative;
  margin: 0;
  padding-left: 34px;
  font-size: var(--sc-tiny);
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}
.sc-modal__adres::before{
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2029s10-9.2%2010-16A10%2010%200%200%200%206%2013c0%206.8%2010%2016%2010%2016z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%223.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* ---------- prawy panel ---------- */

.sc-modal__prawy{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sc-bg);
}
.sc-modal__tresc{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sc-s6) var(--sc-s6) var(--sc-s5);
  scrollbar-width: thin;
}
.sc-modal__mobile-bar{ display: none; }

.sc-modal__x{
  position: absolute;
  top: var(--sc-s3);
  right: var(--sc-s3);
  z-index: 5;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 0;
}
.sc-modal__x::before,
.sc-modal__x::after{
  content: '';
  position: absolute;
  left: 11px; top: 19px;
  width: 18px; height: 1px;
  background: var(--sc-text);
  transition: background var(--sc-dur) var(--sc-ease);
}
.sc-modal__x::before{ transform: rotate(45deg); }
.sc-modal__x::after{ transform: rotate(-45deg); }
.sc-modal__x:hover::before,
.sc-modal__x:hover::after{ background: var(--sc-tan); }

/* pasek korzyści na dole */
.sc-modal__korzysci{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-s4);
  padding: var(--sc-s4) var(--sc-s6);
  background: var(--sc-bg-alt);
  border-top: 1px solid var(--sc-border);
}
.sc-korzysc{
  position: relative;
  padding-left: 40px;
  font-size: var(--sc-tiny);
  line-height: 1.6;
}
.sc-korzysc strong{ display: block; font-weight: 500; color: var(--sc-text); margin-bottom: 3px; }
.sc-korzysc span{ color: var(--sc-text-2); }
.sc-korzysc::before{
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sc-korzysc--podejscie::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%2224%22%20height%3D%2222%22%2F%3E%3Cpath%20d%3D%22M4%2013h24%22%2F%3E%3Cpath%20d%3D%22M10%203v6%22%2F%3E%3Cpath%20d%3D%22M22%203v6%22%2F%3E%3Cpath%20d%3D%22M10%2018h4%22%2F%3E%3Cpath%20d%3D%22M18%2018h4%22%2F%3E%3Cpath%20d%3D%22M10%2023h4%22%2F%3E%3C%2Fsvg%3E"); }
.sc-korzysc--materialy::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2217%22%20height%3D%2213%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2213%22%20width%3D%2217%22%20height%3D%2213%22%2F%3E%3C%2Fsvg%3E"); }
.sc-korzysc--kawa::before{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h17v8a6%206%200%200%201-6%206h-5a6%206%200%200%201-6-6z%22%2F%3E%3Cpath%20d%3D%22M22%2014h3a3%203%200%200%201%200%206h-3%22%2F%3E%3Cpath%20d%3D%22M10%208c0-1.5%201.5-2%201.5-3.5%22%2F%3E%3Cpath%20d%3D%22M16%208c0-1.5%201.5-2%201.5-3.5%22%2F%3E%3C%2Fsvg%3E"); }

/* =========================================================
   FORMULARZ — kroki, pola, opcje
   ========================================================= */

.sc-form{ width: 100%; max-width: none; margin: 0; }
.sc-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- pasek kroków ---------- */

.sc-kroki{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 0 0 var(--sc-s6);
  padding: 0;
  counter-reset: none;
}
.sc-krok{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.sc-krok::after{
  content: '';
  position: absolute;
  top: 19px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 1px;
  background: var(--sc-border);
}
.sc-krok:last-child::after{ content: none; }

.sc-krok__no{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--sc-border);
  border-radius: 50%;
  background: var(--sc-bg);
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 15px;
  color: var(--sc-text-2);
  transition: all var(--sc-dur) var(--sc-ease);
}
.sc-krok__nazwa{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  transition: color var(--sc-dur) var(--sc-ease);
}
.sc-krok.is-aktywny .sc-krok__no{
  background: var(--sc-text);
  border-color: var(--sc-text);
  color: var(--sc-white);
}
.sc-krok.is-aktywny .sc-krok__nazwa{ color: var(--sc-text); }
.sc-krok.is-zrobiony .sc-krok__no{ border-color: var(--sc-tan); color: var(--sc-tan); }

/* ---------- nagłówek sekcji ---------- */

.sc-sekcja{ width: 100%; }
.sc-sekcja[hidden]{ display: none; }
.sc-sekcja__head{ margin: 0 0 var(--sc-s4); }
.sc-sekcja__tytul{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  color: var(--sc-text);
  margin: 0;
}
.sc-sekcja__lead{
  font-size: var(--sc-small);
  line-height: 1.7;
  color: var(--sc-text-2);
  margin: var(--sc-s1) 0 0;
}

/* ---------- pola ---------- */

.sc-pola{ display: grid; gap: var(--sc-s3); margin: 0 0 var(--sc-s3); }
.sc-pola--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 620px){ .sc-pola--2{ grid-template-columns: 1fr; } }

.sc-pole{ position: relative; margin: 0 0 var(--sc-s3); }
.sc-pole label{
  display: block;
  font-size: var(--sc-tiny);
  font-weight: 500;
  color: var(--sc-text);
  margin-bottom: 8px;
}
.sc-pole input,
.sc-form textarea,
.sc-form select{
  width: 100%;
  padding: 15px 16px;
  font-family: var(--sc-sans);
  font-size: var(--sc-small);
  line-height: 1.5;
  color: var(--sc-text);
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  border-radius: 0;
  transition: border-color var(--sc-dur) var(--sc-ease);
  -webkit-appearance: none;
  appearance: none;
}
.sc-pole input::placeholder,
.sc-form textarea::placeholder{ color: #A9A29A; }
.sc-pole input:focus,
.sc-form textarea:focus,
.sc-form select:focus{ outline: none; border-color: var(--sc-text); }

/* ikony w polach kroku 01 */
.sc-pole--osoba input,
.sc-pole--tel input,
.sc-pole--mail input{ padding-left: 48px; }
.sc-pole--osoba::after,
.sc-pole--tel::after,
.sc-pole--mail::after{
  content: '';
  position: absolute;
  left: 16px; bottom: 17px;
  width: 20px; height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: .55;
}
.sc-pole--osoba::after{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2211%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M6%2028c0-5.5%204.5-10%2010-10s10%204.5%2010%2010%22%2F%3E%3C%2Fsvg%3E"); }
.sc-pole--tel::after{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204l4%206-3%203c1.6%203.4%204.6%206.4%208%208l3-3%206%204-2.5%204.6c-.6%201-1.7%201.6-2.9%201.4C13.6%2026.4%205.6%2018.4%204%209.4c-.2-1.2.4-2.3%201.4-2.9z%22%2F%3E%3C%2Fsvg%3E"); }
.sc-pole--mail::after{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2226%22%20height%3D%2218%22%2F%3E%3Cpath%20d%3D%22M3%208l13%2010L29%208%22%2F%3E%3C%2Fsvg%3E"); }

.sc-pole.ma-blad input,
.sc-grupa.ma-blad .sc-opcje,
.sc-drop.ma-blad{ border-color: #B4443F; }
.sc-pole.ma-blad input{ background: #FDF7F6; }

/* ---------- grupy opcji ---------- */

.sc-grupa{
  border: 0;
  margin: 0 0 var(--sc-s4);
  padding: 0;
}
.sc-grupa legend{
  font-size: var(--sc-tiny);
  font-weight: 500;
  color: var(--sc-text);
  padding: 0;
  margin-bottom: 10px;
}
.sc-grupa__hint{
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--sc-text-2);
  margin: -4px 0 12px;
}
.sc-opcje{ display: flex; flex-direction: column; gap: 2px; }

.sc-radio,
.sc-zgoda{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--sc-small);
  line-height: 1.6;
  color: var(--sc-text);
  cursor: pointer;
}
.sc-radio input,
.sc-zgoda input{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--sc-text);
  cursor: pointer;
}
.sc-zgoda{ margin: var(--sc-s2) 0 var(--sc-s3); align-items: flex-start; }
.sc-zgoda span{ font-size: var(--sc-tiny); line-height: 1.6; color: var(--sc-text-2); }
.sc-zgoda a{ color: var(--sc-text); text-decoration: underline; text-underline-offset: 3px; }
.sc-zgoda.ma-blad span{ color: #B4443F; }

/* ---------- kafle stylów ---------- */

.sc-kafle{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-s2); }
@media (max-width: 760px){ .sc-kafle{ grid-template-columns: 1fr 1fr; } }

.sc-kafel{
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 12px;
  background: var(--sc-bg-alt) no-repeat center / cover;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.sc-kafel::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}
.sc-kafel input{ position: absolute; opacity: 0; pointer-events: none; }
.sc-kafel__nazwa{
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.sc-kafel::after{
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: transparent no-repeat center / 12px;
  transition: all var(--sc-dur) var(--sc-ease);
}
.sc-kafel:has(input:checked){ outline: 2px solid var(--sc-text); outline-offset: -2px; }
.sc-kafel:has(input:checked)::after{
  background-color: var(--sc-text);
  border-color: var(--sc-text);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5%209.5%2017%2019%207%22%2F%3E%3C%2Fsvg%3E");
}
.sc-kafel:has(input:focus-visible){ outline: 2px solid var(--sc-tan); outline-offset: 2px; }

/* ---------- chipy materiałów ---------- */

.sc-chipy{ display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip{
  display: inline-flex;
  cursor: pointer;
}
.sc-chip input{ position: absolute; opacity: 0; pointer-events: none; }
.sc-chip span{
  display: block;
  padding: 9px 15px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sc-text);
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  transition: all var(--sc-dur) var(--sc-ease);
}
.sc-chip:hover span{ border-color: var(--sc-text-2); }
.sc-chip:has(input:checked) span{
  background: var(--sc-text);
  border-color: var(--sc-text);
  color: var(--sc-white);
}
.sc-chip:has(input:focus-visible) span{ outline: 2px solid var(--sc-tan); outline-offset: 2px; }

/* ---------- pliki ---------- */

.sc-drop{
  position: relative;
  border: 1px dashed var(--sc-border);
  background: var(--sc-white);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-drop input[type="file"]{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.sc-drop__etykieta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--sc-s5) var(--sc-s3);
  text-align: center;
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: var(--sc-text-2);
  cursor: pointer;
}
.sc-drop__ikona{
  width: 34px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2022a5.5%205.5%200%201%201%201.2-10.9A7.5%207.5%200%200%201%2023.6%2012%204.9%204.9%200%200%201%2023%2022%22%2F%3E%3Cpath%20d%3D%22M16%2027V14%22%2F%3E%3Cpath%20d%3D%22M12%2018l4-4%204%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: .55;
}
.sc-drop.nad-strefa{ border-color: var(--sc-text); background: var(--sc-bg-alt); }
.sc-drop__lista{ list-style: none; margin: 0; padding: 0; }
.sc-drop.ma-pliki .sc-drop__lista{ padding: 0 var(--sc-s3) var(--sc-s3); }
.sc-drop__plik{
  display: flex;
  justify-content: space-between;
  gap: var(--sc-s2);
  padding: 9px 0;
  font-size: 12px;
  color: var(--sc-text);
  border-top: 1px solid var(--sc-border);
}
.sc-drop__waga{ color: var(--sc-text-2); flex: 0 0 auto; }
.sc-drop__nazwa{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- karta adresu w kroku 05 ---------- */

.sc-karta-adres{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sc-s4);
  margin: var(--sc-s4) 0 0;
  padding: var(--sc-s3);
  background: var(--sc-bg-alt);
  font-size: var(--sc-tiny);
  line-height: 1.7;
  color: var(--sc-text-2);
}
.sc-karta-adres p{ margin: 0; }
.sc-karta-adres strong{ color: var(--sc-text); font-weight: 500; }
@media (max-width: 560px){ .sc-karta-adres{ grid-template-columns: 1fr; gap: var(--sc-s2); } }

/* ---------- nawigacja i komunikaty ---------- */

.sc-nawigacja{
  display: flex;
  justify-content: flex-end;
  gap: var(--sc-s2);
  margin-top: var(--sc-s5);
}
.sc-nawigacja .sc-wstecz{ margin-right: auto; }
.sc-nawigacja .sc-btn.is-zajety{ opacity: .6; pointer-events: none; }
.sc-wstecz::after{ content: none; }
.sc-wstecz::before{
  content: '';
  display: inline-block;
  width: 20px; height: 10px;
  margin-right: 10px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2016%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%208H2%22%2F%3E%3Cpath%20d%3D%22M9%202%202%208l7%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.sc-form__info,
.sc-form__stopka{
  font-size: 12px;
  line-height: 1.6;
  color: var(--sc-text-2);
  margin: var(--sc-s3) 0 0;
}
.sc-form__stopka{ text-align: center; margin-top: var(--sc-s4); }
.sc-form__stopka--klodka::before{
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%238A857E%22%20stroke-width%3D%221.6%22%3E%3Crect%20x%3D%227%22%20y%3D%2214%22%20width%3D%2218%22%20height%3D%2214%22%2F%3E%3Cpath%20d%3D%22M11%2014v-4a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.sc-form__blad{
  margin-top: var(--sc-s3);
  padding: 12px 16px;
  font-size: var(--sc-tiny);
  line-height: 1.6;
  color: #8E2F2A;
  background: #FBF1F0;
  border-left: 2px solid #B4443F;
}
.sc-form__blad[hidden]{ display: none; }

/* =========================================================
   FORMULARZ — mobile (wg makiety 09-meeting-modal-mobile)
   ========================================================= */

@media (max-width: 991px){

  .sc-modal{ padding: 0; }

  .sc-modal__okno{
    grid-template-columns: 1fr;
    max-width: none;
    height: 100%;
    max-height: none;
    box-shadow: none;
  }

  /* lewy panel ze zdjęciem zastępuje ciemny pasek u góry */
  .sc-modal__lewy{ display: none; }

  .sc-modal__prawy{ height: 100%; }

  .sc-modal__mobile-bar{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 18px var(--sc-pad);
    background: var(--sc-dark);
  }
  .sc-modal__x{
    top: 16px;
    right: 12px;
  }
  .sc-modal__x::before,
  .sc-modal__x::after{ background: var(--sc-on-dark); }
  .sc-modal__x:hover::before,
  .sc-modal__x:hover::after{ background: var(--sc-tan); }

  .sc-modal__tresc{ padding: 0; }
  .sc-modal__korzysci{ display: none; }

  /* pasek kroków — same numery, aktywny podkreślony */
  .sc-modal .sc-kroki,
  .sc-form-inline .sc-kroki{
    margin: 0;
    padding: var(--sc-s3) var(--sc-pad) 0;
    background: var(--sc-dark);
  }
  .sc-modal .sc-krok::after,
  .sc-form-inline .sc-krok::after{ content: none; }
  .sc-modal .sc-krok__nazwa,
  .sc-form-inline .sc-krok__nazwa{ display: none; }
  .sc-modal .sc-krok__no,
  .sc-form-inline .sc-krok__no{
    width: 100%;
    height: auto;
    padding-bottom: 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-size: 16px;
    color: rgba(255,255,255,.42);
  }
  .sc-modal .sc-krok.is-aktywny .sc-krok__no,
  .sc-form-inline .sc-krok.is-aktywny .sc-krok__no{
    background: none;
    color: var(--sc-on-dark);
    border-bottom-color: var(--sc-on-dark);
  }
  .sc-modal .sc-krok.is-zrobiony .sc-krok__no,
  .sc-form-inline .sc-krok.is-zrobiony .sc-krok__no{ color: rgba(255,255,255,.65); }

  /* ciemny blok z tytułem kroku */
  .sc-modal .sc-sekcja__head,
  .sc-form-inline .sc-sekcja__head{
    margin: 0;
    padding: var(--sc-s4) var(--sc-pad) var(--sc-s5);
    background: var(--sc-dark);
  }
  .sc-modal .sc-sekcja__tytul,
  .sc-form-inline .sc-sekcja__tytul{ color: var(--sc-on-dark); font-size: 30px; }
  .sc-modal .sc-sekcja__lead,
  .sc-form-inline .sc-sekcja__lead{ color: rgba(255,255,255,.72); margin-top: var(--sc-s2); }

  /* treść kroku na jasnym tle */
  .sc-modal .sc-sekcja,
  .sc-form-inline .sc-sekcja{ background: var(--sc-bg); }
  .sc-modal .sc-sekcja > *:not(.sc-sekcja__head),
  .sc-form-inline .sc-sekcja > *:not(.sc-sekcja__head){
    margin-left: var(--sc-pad);
    margin-right: var(--sc-pad);
  }
  .sc-modal .sc-sekcja > *:first-of-type:not(.sc-sekcja__head),
  .sc-form-inline .sc-sekcja > *:first-of-type:not(.sc-sekcja__head){ margin-top: var(--sc-s5); }
  .sc-modal .sc-sekcja > .sc-form__stopka,
  .sc-form-inline .sc-sekcja > .sc-form__stopka{ padding-bottom: var(--sc-s5); }

  /* przyciski na całą szerokość */
  .sc-nawigacja{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-s2);
    margin-top: var(--sc-s5);
  }
  .sc-nawigacja > .sc-btn{ width: 100%; justify-content: center; text-align: center; }
  .sc-nawigacja > .sc-btn:only-child{ grid-column: 1 / -1; }
  .sc-nawigacja .sc-wstecz{ margin-right: 0; }
}

@media (max-width: 991px) and (min-width: 561px){
  .sc-modal .sc-sekcja > *:not(.sc-sekcja__head),
  .sc-form-inline .sc-sekcja > *:not(.sc-sekcja__head){ max-width: 560px; }
}

/* =========================================================
   FORMULARZ NA STAŁE (podstrona /umow-spotkanie/)
   ========================================================= */

.sc-form-inline{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 991px){
  .sc-form-inline{ max-width: none; }
}

/* =========================================================
   KOMUNIKAT PO WYSŁANIU
   ========================================================= */

.sc-flash{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9500;
  width: min(560px, calc(100% - 32px));
  animation: sc-flash-in .4s var(--sc-ease) both;
}
@keyframes sc-flash-in{ from{ opacity: 0; transform: translate(-50%, 14px); } }

.sc-flash__in{
  position: relative;
  padding: 18px 52px 18px 22px;
  font-size: var(--sc-tiny);
  line-height: 1.6;
  background: var(--sc-dark);
  color: var(--sc-on-dark);
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
}
.sc-flash--blad .sc-flash__in{ background: #8E2F2A; }
.sc-flash__in strong{ display: block; font-weight: 500; margin-bottom: 4px; }
.sc-flash__in a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sc-flash__x{
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.sc-flash__x::before,
.sc-flash__x::after{
  content: '';
  position: absolute;
  left: 8px; top: 13px;
  width: 12px; height: 1px;
  background: rgba(255,255,255,.8);
}
.sc-flash__x::before{ transform: rotate(45deg); }
.sc-flash__x::after{ transform: rotate(-45deg); }

/* zapasowo dla przeglądarek bez :has() — kafle i chipy nadal działają */
@supports not (selector(:has(*))){
  .sc-kafel input:checked ~ .sc-kafel__nazwa{ text-decoration: underline; }
  .sc-chip input:checked + span{ background: var(--sc-text); color: var(--sc-white); }
}

/* Elementy siatki/flexa domyślnie nie kurczą się poniżej treści (min-height:auto),
   przez co okno wychodziło poza ekran. Wymuszamy możliwość skurczenia. */
.sc-modal__okno{ grid-template-rows: minmax(0, 1fr); }
.sc-modal__lewy,
.sc-modal__prawy{ min-height: 0; min-width: 0; }
.sc-modal__tresc{ min-height: 0; }
.sc-modal__lewy{ overflow-y: auto; }

/* Pasek korzyści — kompaktowo, żeby na niższych ekranach nie zjadał formularza. */
.sc-modal__korzysci{ padding: var(--sc-s3) var(--sc-s6); gap: var(--sc-s4); }
.sc-korzysc{ padding-left: 32px; font-size: 11.5px; line-height: 1.5; }
.sc-korzysc::before{ width: 22px; height: 22px; top: 1px; }
.sc-modal__tresc{ padding: var(--sc-s5) var(--sc-s6) var(--sc-s4); }

/* Na niskich ekranach formularz jest ważniejszy niż pasek korzyści. */
@media (max-height: 780px){
  .sc-modal__korzysci{ display: none; }
  .sc-modal__tresc{ padding-top: var(--sc-s4); }
  .sc-kroki{ margin-bottom: var(--sc-s4); }
}

/* Mobile: treść okna bez własnego paddingu — ciemne pasy mają sięgać krawędzi.
   (Reguła musi być po korektach desktopowych, żeby je nadpisać.) */
@media (max-width: 991px){
  .sc-modal__tresc{ padding: 0; }
  .sc-modal__korzysci{ display: none; }
}

/* =========================================================
   DŁUGI TEKST PRAWNY (polityka prywatności, regulaminy)
   ========================================================= */

.sc-proza{
  width: 100%;
  max-width: 78ch;
  margin: 0;
  font-size: var(--sc-small);
  line-height: 1.8;
  color: var(--sc-text-2);
}
.sc-proza > *:first-child{ margin-top: 0; }
.sc-proza p{ margin: 0 0 var(--sc-s3); }
.sc-proza strong{ color: var(--sc-text); font-weight: 500; }

.sc-proza h2{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  color: var(--sc-text);
  margin: var(--sc-s6) 0 var(--sc-s3);
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-border);
}
.sc-proza h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.sc-proza h3{
  font-size: var(--sc-small);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--sc-text);
  margin: var(--sc-s5) 0 var(--sc-s2);
}

.sc-proza ul,
.sc-proza ol{ margin: 0 0 var(--sc-s3); padding-left: 20px; }
.sc-proza li{ margin-bottom: 8px; }
.sc-proza li::marker{ color: var(--sc-tan); }

.sc-proza a{ color: var(--sc-text); text-decoration: underline; text-underline-offset: 3px; }
.sc-proza a:hover{ color: var(--sc-tan); }

.sc-proza blockquote{
  margin: 0 0 var(--sc-s3);
  padding: var(--sc-s3);
  background: var(--sc-bg-alt);
  border-left: 2px solid var(--sc-tan);
  font-size: var(--sc-tiny);
  line-height: 1.7;
}
.sc-proza blockquote p{ margin: 0; }

.sc-proza hr{
  height: 1px;
  margin: var(--sc-s5) 0;
  background: var(--sc-border);
  border: 0;
}

/* tabele — na wąskich ekranach przewijają się same, strona nie */
.sc-proza .sc-tabela{ width: 100%; overflow-x: auto; margin: 0 0 var(--sc-s4); }
.sc-proza table{
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--sc-tiny);
  line-height: 1.6;
}
.sc-proza th,
.sc-proza td{
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--sc-border);
}
.sc-proza th{
  font-weight: 500;
  color: var(--sc-text);
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  font-size: 10px;
  border-bottom-color: var(--sc-text);
}
.sc-proza code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  color: var(--sc-text);
  background: var(--sc-bg-alt);
  padding: 2px 6px;
}
@media (max-width: 767px){
  .sc-proza{ max-width: none; }
}

/* =========================================================
   PASMO CTA Z ROZMOWĄ — wariant jasny ze zdjęciem
   Trzy części: nagłówek | tekst z przyciskiem | zdjęcie do krawędzi.
   Włączasz go, dopisując klasę .sc-cta-band--foto obok .sc-cta-band
   (sekcja: .sc-section--flush, kontener: .sc-container--wide).
   ========================================================= */

.sc-cta-band--foto{
  grid-template-columns: 1fr 1.25fr 1.6fr;
  gap: 0;
  align-items: stretch;
  background: var(--sc-bg-alt);
  min-height: clamp(240px, 20vw, 340px);
}

/* kolumny tekstowe — wyrównane w pionie do środka, z oddechem od krawędzi */
.sc-cta-band--foto > .sc-cta-band__l,
.sc-cta-band--foto > .sc-cta-band__r{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--sc-s5);
  padding-bottom: var(--sc-s5);
}
.sc-cta-band--foto > .sc-cta-band__l{
  padding-left: var(--sc-pad);
  padding-right: var(--sc-s5);
}
.sc-cta-band--foto > .sc-cta-band__r{
  padding-right: var(--sc-s6);
  gap: var(--sc-s3);
}

/* na jasnym tle tekst wraca do koloru podstawowego */
.sc-cta-band--foto .sc-h2{ color: var(--sc-text); max-width: 14ch; }
.sc-cta-band--foto .sc-body{ color: var(--sc-text-2); max-width: 40ch; }

/* zdjęcie wypełnia całą wysokość pasma i dochodzi do krawędzi ekranu */
.sc-cta-band__foto{
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sc-bg-alt);
}
.sc-cta-band__foto img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1240px){
  .sc-cta-band--foto{ grid-template-columns: 1fr 1.4fr; }
  .sc-cta-band__foto{ grid-column: 1 / -1; height: auto; aspect-ratio: 21 / 8; }
  .sc-cta-band--foto > .sc-cta-band__r{ padding-right: var(--sc-pad); }
}
@media (max-width: 767px){
  .sc-cta-band--foto{ grid-template-columns: 1fr; }
  .sc-cta-band--foto > .sc-cta-band__l{ padding-right: var(--sc-pad); padding-bottom: 0; }
  .sc-cta-band--foto > .sc-cta-band__r{ padding-left: var(--sc-pad); padding-top: var(--sc-s3); }
  .sc-cta-band__foto{ aspect-ratio: 16 / 9; }
}

/* proporcje i skala pisma dopasowane do makiety — nagłówek w dwóch wierszach */
.sc-cta-band--foto{ grid-template-columns: 1.15fr 1.2fr 1.55fr; }
.sc-cta-band--foto > .sc-cta-band__l{ padding-right: var(--sc-s4); }
.sc-cta-band--foto .sc-h2{
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.18;
  max-width: 16ch;
}
.sc-cta-band--foto .sc-body{ max-width: 34ch; }
@media (max-width: 1240px){ .sc-cta-band--foto{ grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 767px){ .sc-cta-band--foto{ grid-template-columns: 1fr; } }
.sc-cta-band--foto .sc-body{ max-width: 46ch; }

/* =========================================================
   ZABEZPIECZENIE SIATEK
   Bricks pomija elementy o pustej treści, więc dekoracyjne strzałki
   mogą nie trafić do kodu strony. Wtedy siatka o stałej liczbie torów
   źle rozdziela pozycje, a duże zdjęcie rozpycha tor "auto".
   Rozwiązanie: liczba kolumn zależy od tego, czy strzałki istnieją,
   a min-width:0 nie pozwala zdjęciu rozepchać kolumny.
   ========================================================= */

.sc-flow{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-flow:has(.sc-flow__arrow){
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}
.sc-steps4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-steps4:has(.sc-steps4__arrow){
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}

/* żadne zdjęcie nie może rozepchać swojej kolumny ponad przydział */
.sc-flow > *,
.sc-steps4 > *,
.sc-swatches > *,
.sc-details > *,
.sc-collabs > *,
.sc-offer > *,
.sc-visit > *,
.sc-arch-bottom > *,
.sc-block__split > *,
.sc-cta-band > *,
.sc-work > *,
.sc-gal > *,
.sc-values > *,
.sc-kontakt-band > *{ min-width: 0; }

/* elementy dekoracyjne mają treść tylko po to, żeby Bricks ich nie pominął */
.sc-flow__arrow,
.sc-steps4__arrow,
.sc-hero-band__rule,
.sc-tstep__dot{
  font-size: 0;
  line-height: 0;
  color: transparent;
}

@media (max-width: 991px){
  .sc-flow,
  .sc-flow:has(.sc-flow__arrow){ grid-template-columns: 1fr; }
  .sc-steps4,
  .sc-steps4:has(.sc-steps4__arrow){ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .sc-steps4,
  .sc-steps4:has(.sc-steps4__arrow){ grid-template-columns: 1fr; }
}

/* =========================================================
   ZAPAS DLA STRON JUŻ ZBUDOWANYCH
   Strony wstawione przed poprawką nie mają w kodzie elementów
   dekoracyjnych (Bricks pominął je, bo były puste). Poniższe reguły
   dorysowują je z CSS, więc NIE trzeba wczytywać szablonów od nowa.
   Gdy element istnieje — te reguły się nie włączają.
   ========================================================= */

/* --- oś czasu na Procesie: kropka z odcinkiem linii --- */
.sc-tstep:not(:has(.sc-tstep__dot))::after{
  content: '';
  order: 2;
  display: block;
  height: 9px;
  width: calc(100% + var(--sc-s3));
  margin: var(--sc-s3) calc(-1 * var(--sc-s3) / 2);
  background-image:
    radial-gradient(circle at 50% 50%, var(--sc-text) 0 4.5px, transparent 4.6px),
    linear-gradient(var(--sc-border), var(--sc-border));
  background-size: 100% 100%, 100% 1px;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}
.sc-tstep:not(:has(.sc-tstep__dot)) .sc-tstep__time{ order: 3; }

/* skrajne odcinki kończą się na kropce, nie wystają poza oś */
.sc-tstep:first-child:not(:has(.sc-tstep__dot))::after{
  background-size: 100% 100%, 50% 1px;
  background-position: center center, right center;
}
.sc-tstep:last-child:not(:has(.sc-tstep__dot))::after{
  background-size: 100% 100%, 50% 1px;
  background-position: center center, left center;
}

/* --- kreska pod nagłówkiem w banerze (Kontakt, Umów spotkanie) --- */
.sc-hero-band--szer .sc-hero-band__body:not(:has(.sc-hero-band__rule)) .sc-h1::after{
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: var(--sc-s4) 0 0;
  background: rgba(255,255,255,.5);
}

/* =========================================================
   PASMO 07 | 08 | 09 — numer nad treścią
   W wąskich kolumnach numer ustawiony z boku zabierał ~110 px i tekst
   łamał się na trzy wiersze. Zgodnie z makietą numer idzie nad etykietę,
   a treść dostaje pełną szerokość kolumny.
   ========================================================= */

.sc-arch-bottom--3{ grid-template-columns: 4.6fr 3.4fr 4fr; }

.sc-arch-bottom--3 .sc-block{
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.sc-arch-bottom--3 .sc-block__no{
  grid-row: auto;
  grid-column: 1;
  margin-bottom: var(--sc-s2);
}
.sc-arch-bottom--3 .sc-block > *:not(.sc-block__no){ grid-column: 1; }

.sc-arch-bottom--3 .sc-block .sc-h2,
.sc-arch-bottom--3 .sc-block .sc-h3{
  font-size: clamp(21px, 1.75vw, 30px);
  line-height: 1.25;
  max-width: none;
}
.sc-arch-bottom--3 .sc-body{ max-width: 40ch; }

@media (max-width: 1240px){
  .sc-arch-bottom--3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .sc-arch-bottom--3{ grid-template-columns: 1fr; }
}


/* =========================================================
   WEJŚCIE ELEMENTU — animacja po otwarciu strony

   Dopisz elementowi w Bricksie dwie klasy, np.:
       sc-anim sc-anim--z-prawej

   Element jest niewidoczny przez czas zwłoki, potem wjeżdża na miejsce.

   Stan końcowy = dokładnie to, co ustawisz w panelu:
   - `animation-fill-mode: backwards` — po zakończeniu animacja nie
     nadpisuje już niczego, element wraca do swoich własnych stylów;
   - ruch idzie przez `translate`, nie przez `transform`, więc nie kasuje
     pozycjonowania ustawionego w Bricksie;
   - warianty ruchu NIE zmieniają rozmiaru — zdjęcie nigdy nie jest większe
     niż docelowo (wyjątkiem jest świadomy wariant --zoom).

   Zwłoka i tempo:
       sc-anim--zwloka-0 / -1 / -3   (domyślnie 2 s)
       sc-anim--szybko / --wolno     (domyślnie 1,1 s)
   ========================================================= */

.sc-anim{
  --sc-anim-zwloka: 2s;
  --sc-anim-czas: 1.1s;
}
.sc-anim--zwloka-0{ --sc-anim-zwloka: 0s; }
.sc-anim--zwloka-1{ --sc-anim-zwloka: 1s; }
.sc-anim--zwloka-3{ --sc-anim-zwloka: 3s; }
.sc-anim--szybko{ --sc-anim-czas: .7s; }
.sc-anim--wolno{ --sc-anim-czas: 1.7s; }

@media (prefers-reduced-motion: no-preference){
  .sc-anim{
    animation-duration: var(--sc-anim-czas);
    animation-delay: var(--sc-anim-zwloka);
    animation-fill-mode: backwards;
    animation-timing-function: cubic-bezier(.22, .68, .3, 1);
  }
  .sc-anim--z-prawej{ animation-name: sc-wjazd-prawo; }
  .sc-anim--z-lewej{  animation-name: sc-wjazd-lewo; }
  .sc-anim--z-dolu{   animation-name: sc-wjazd-dol; }
  .sc-anim--z-gory{   animation-name: sc-wjazd-gora; }
  .sc-anim--zanik{    animation-name: sc-wjazd-zanik; }
  .sc-anim--zoom{     animation-name: sc-wjazd-zoom; }
}

/* wyłącznie przesunięcie i przezroczystość — rozmiar bez zmian */
@keyframes sc-wjazd-prawo{
  from{ opacity: 0; translate: 10% 0; }
  to  { opacity: 1; translate: 0 0; }
}
@keyframes sc-wjazd-lewo{
  from{ opacity: 0; translate: -10% 0; }
  to  { opacity: 1; translate: 0 0; }
}
@keyframes sc-wjazd-dol{
  from{ opacity: 0; translate: 0 10%; }
  to  { opacity: 1; translate: 0 0; }
}
@keyframes sc-wjazd-gora{
  from{ opacity: 0; translate: 0 -10%; }
  to  { opacity: 1; translate: 0 0; }
}
@keyframes sc-wjazd-zanik{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
/* jedyny wariant zmieniający rozmiar — startuje powiększony i siada do 100% */
@keyframes sc-wjazd-zoom{
  from{ opacity: 0; scale: 1.08; }
  to  { opacity: 1; scale: 1; }
}

/* Opcjonalnie: przycięcie kadru, gdyby animowany element wyjeżdżał poza
   sekcję i powodował poziomy pasek przewijania. Baner hero przycina już
   sam z siebie — tę klasę dodajesz tylko tam, gdzie faktycznie trzeba. */
.sc-anim-kadr{ overflow: hidden; }

/* ---------- warstwa nakładana na zdjęcie banera ----------
   Element Obraz wstawiony jako BEZPOŚREDNIE dziecko sekcji banera.
   Kadruje się dokładnie tak samo jak tło sekcji (cover + ta sama pozycja),
   więc na każdej szerokości ekranu leży idealnie na swoim miejscu.
   Jeśli zmienisz pozycję tła sekcji, ustaw tę samą wartość w zmiennej:
       --sc-warstwa-poz: 100% 50%;
   ---------------------------------------------------------- */
.sc-hero-warstwa{
  position: absolute;
  inset: 0;
  /* z-index 0: nad tłem sekcji, ale POD woalką rozjaśniającą (::before ma 1).
     Dzięki temu warstwa jest przyciemniana/rozjaśniana dokładnie tak samo jak
     wcześniej całe zdjęcie — wygląd banera nie zmienia się względem oryginału. */
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: var(--sc-warstwa-poz, 100% 50%);
  pointer-events: none;
}

/* Telefon: baner z warstwą próbników pokazujemy bez zdjęcia — zgodnie
   z makietą mobilną (sam nagłówek na jasnym tle). W pionowym kadrze
   próbniki i tak zasłaniałyby tekst, a tekst jest tu ważniejszy.
   Reguła dotyczy wyłącznie banera, który ma warstwę — pozostałe
   banery na ciemnym zdjęciu zostają bez zmian. */
@media (max-width: 767px){
  .sc-hero-band:has(.sc-hero-warstwa){
    background-image: none !important;
    min-height: 0;
  }
  .sc-hero-band:has(.sc-hero-warstwa)::before{ content: none; }
  .sc-hero-warstwa{ display: none; }
}

/* Tabele w tekście prawnym na telefonie.
   Edytor Bricks usuwa opakowanie <div class="sc-tabela">, więc szerokie
   tabele wypychały całą stronę w poziomie. Poniżej 700 px rezygnujemy
   z minimalnej szerokości i pozwalamy komórkom łamać wyrazy. */
@media (max-width: 700px){
  .sc-proza table{ min-width: 0; width: 100%; table-layout: fixed; }
  .sc-proza th,
  .sc-proza td{ padding-right: 10px; word-break: break-word; hyphens: auto; }
  .sc-proza th{ font-size: 9px; }
}