:root{
  color-scheme:light;
  --gold:#c46e28; --gold-l:#dc8f4e;   /* kolor budynków JDDC: RGB(196,110,40) */
  --gold-h:#a37f3c;                   /* przyciski przy najechaniu */
  --ink:#1c1c1a; --ink-2:#3d3d39;
  --muted:#6e6e68; --line:#e3e0d9;
  --bg:#ffffff; --bg-2:#faf8f4;
  --max:1180px;

  /* powierzchnie: wypełniona (karty w siatce) i obrysowana (karty projektów,
     filtry, pola formularza) — w trybie nocnym ta druga traci wypełnienie */
  --pow:#ffffff; --pow-2:#eceae5; --pow-obrys:#ffffff;
  --naglowek:rgba(255,255,255,.92);
  --logo-filtr:none;
  --hatch:rgba(196,110,40,.16);       /* miedziana powłoka na wizualizacjach */

  /* stopka z tabelką rysunkową */
  --stopka:var(--ink); --stopka-linia:transparent;
  --stopka-tekst:#b6b4ad; --stopka-link:#d8d5cd;
  --metryka-linia:var(--metryka-linia);
  --metryka-etykieta:#8d8a82; --metryka-wartosc:#e6e3db;

  /* komunikaty formularza */
  --zle:#c0392b; --zle-tlo:#fdf1ef; --zle-txt:#96271a;
  --dobrze:#5a8f42; --dobrze-tlo:#f4f7f2; --dobrze-txt:#3d6b2e;

  /* znak przełącznika: podświetlona jest połówka opisująca stan bieżący */
  --ikona-noc:var(--muted); --ikona-dzien:var(--gold);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- nagłówek ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--naglowek); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:86px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand .mark{height:52px; width:auto; display:block; filter:var(--logo-filtr)}
@media(max-width:820px){.brand .mark{height:46px}}
.menu{display:flex; gap:32px; list-style:none; margin:0; padding:0}
.menu a{
  text-decoration:none; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:.2s;
}
.menu a:hover{color:var(--gold); border-color:var(--gold)}
.menu .jezyk a{color:var(--gold); font-weight:600}
.menu .jezyk a:hover{border-color:var(--gold)}
.burger{display:none; background:none; border:0; font-size:24px; cursor:pointer; color:var(--ink)}
@media(max-width:820px){
  .menu{
    position:absolute; top:86px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 20px; display:none;
  }
  .menu.open{display:flex}
  .menu a{padding:12px 0; border-bottom:1px solid var(--line)}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(78vh,640px); display:flex; align-items:flex-end; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
         opacity:0; transition:opacity 1.4s ease}
.hero img:first-of-type{opacity:1}
@media(prefers-reduced-motion:reduce){.hero img{transition:none}}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,20,18,.30) 0%,rgba(20,20,18,.78) 100%)}
.hero .wrap{position:relative; z-index:2; color:#fff; padding-top:90px; padding-bottom:64px}
.kicker{font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-l); margin:0 0 18px}
.hero h1{
  font-weight:300; font-size:clamp(31px,5.6vw,58px); line-height:1.14;
  margin:0 0 20px; letter-spacing:-.01em; max-width:19ch;
}
.hero p{margin:0 0 30px; max-width:56ch; color:#efece5; font-size:clamp(16px,2vw,19px)}
.btns{display:flex; flex-wrap:wrap; gap:14px; max-width:520px}
.btn{
  display:inline-block; padding:14px 30px; text-decoration:none; text-align:center;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; transition:.2s;
}
.btns .btn{flex:1 1 200px}   /* obie kafelki równej szerokości: obok siebie lub jedna pod drugą */
.btn-p{background:var(--gold); color:#fff; border:1px solid var(--gold)}
.btn-p:hover{background:transparent; color:var(--gold-l)}
.btn-s{border:1px solid rgba(255,255,255,.55); color:#fff}
.btn-s:hover{border-color:var(--gold-l); color:var(--gold-l)}

/* ---------- sekcje ---------- */
section{padding:88px 0}
section.alt{background:var(--bg-2)}
.lead{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
h2{font-weight:300; font-size:clamp(26px,3.6vw,38px); line-height:1.2; margin:0 0 26px; letter-spacing:-.01em}
h2::after{content:""; display:block; width:52px; height:2px; background:var(--gold); margin-top:20px}
.cols{display:grid; grid-template-columns:1.25fr .85fr; gap:56px; align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr; gap:34px}}
.cols p{margin:0 0 16px; color:var(--ink-2)}
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{padding:15px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; font-size:15px}
.facts b{font-weight:500}
.facts span{color:var(--muted); text-align:right}

/* ---------- usługi ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{background:var(--pow); padding:34px 30px}
.card .no{font-size:12px; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:14px}
.card h3{font-weight:500; font-size:19px; margin:0 0 12px}
.card p{margin:0; font-size:15.5px; color:var(--ink-2)}

/* ---------- galeria ---------- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:14px}
.tile{position:relative; margin:0; overflow:hidden; background:var(--pow-2); cursor:zoom-in; aspect-ratio:4/3}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.tile:hover img{transform:scale(1.045)}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px; color:#fff;
  font-size:13.5px; letter-spacing:.03em;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.68) 100%);
}
.note{margin:26px 0 0; font-size:13.5px; color:var(--muted)}

/* ---------- lightbox ---------- */
#lb{position:fixed; inset:0; background:rgba(16,16,14,.95); display:none; z-index:100; align-items:center; justify-content:center}
#lb.on{display:flex}
#lb img{max-width:94vw; max-height:84vh; object-fit:contain}
#lb .cap{position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#ddd; font-size:14px}
#lb button{position:absolute; background:none; border:0; color:#fff; font-size:34px; cursor:pointer; padding:14px; line-height:1; opacity:.8}
#lb button:hover{opacity:1; color:var(--gold-l)}
#lbX{top:8px; right:12px} #lbP{left:6px; top:50%; transform:translateY(-50%)} #lbN{right:6px; top:50%; transform:translateY(-50%)}

/* ---------- kontakt ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:56px}
@media(max-width:860px){.contact{grid-template-columns:1fr; gap:34px}}
.cl{list-style:none; margin:0; padding:0}
.cl li{padding:14px 0; border-bottom:1px solid var(--line)}
.cl small{display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.cl a{text-decoration:none; font-size:19px; color:var(--ink)}
.cl a:hover{color:var(--gold)}


/* ---------- formularz ---------- */
.form{display:grid; gap:14px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:600px){.f2{grid-template-columns:1fr}}
.fld label{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line); background:var(--pow-obrys);
  font:inherit; font-size:15.5px; color:var(--ink); border-radius:0; -webkit-appearance:none; appearance:none;
}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px}
.fld textarea{min-height:158px; resize:vertical; line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--gold)}
.fld.err input,.fld.err select,.fld.err textarea{border-color:var(--zle); background:var(--zle-tlo)}
.form button{
  justify-self:start; padding:14px 32px; border:1px solid var(--gold); background:var(--gold); color:#fff;
  font:inherit; font-size:13px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:.2s;
}
.form button:hover{background:var(--gold-h); border-color:var(--gold-h)}
.msg{font-size:14px; padding:11px 13px; display:none}
.msg.bad{display:block; background:var(--zle-tlo); color:var(--zle-txt); border-left:2px solid var(--zle)}
.msg.good{display:block; background:var(--dobrze-tlo); color:var(--dobrze-txt); border-left:2px solid var(--dobrze)}
.rodo{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0}
.cl b.val{font-size:19px; font-weight:400; display:block}
.cl a.val{cursor:pointer}

footer{background:var(--stopka); color:var(--stopka-tekst); padding:44px 0; font-size:14px;
       border-top:1px solid var(--stopka-linia)}
.fx{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
footer a{color:var(--stopka-link); text-decoration:none}
footer a:hover{color:var(--gold-l)}

/* ================= podstrony: realizacje ================= */

/* nagłówek podstrony */
.subhead{padding:52px 0 0}
.crumbs{font-size:12.5px; color:var(--muted); margin:0 0 24px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--ink-2)}
.subhead h1{font-weight:300; font-size:clamp(27px,4.2vw,42px); line-height:1.18; margin:0 0 18px; letter-spacing:-.01em; max-width:22ch}
.subhead h1::after{content:""; display:block; width:52px; height:2px; background:var(--gold); margin-top:20px}
.subhead .intro{margin:0; max-width:62ch; font-size:17.5px; color:var(--ink-2)}

/* filtry typu projektu */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 30px}
.filters button{
  padding:9px 18px; border:1px solid var(--line); background:var(--pow-obrys); color:var(--ink-2);
  font:inherit; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:.2s;
}
.filters button:hover{border-color:var(--gold); color:var(--gold)}
.filters button[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#fff}
.filters button[aria-pressed="true"]:hover{color:#fff}

/* siatka kart projektów */
.prjs{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px}
@media(max-width:700px){.prjs{grid-template-columns:1fr}}
.prj{display:flex; flex-direction:column; text-decoration:none; background:var(--pow-obrys); border:1px solid var(--line); transition:border-color .2s}
.prj:hover{border-color:var(--gold)}
.prj .ph{aspect-ratio:4/3; overflow:hidden; background:var(--pow-2)}
.prj .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.prj:hover .ph img{transform:scale(1.045)}
.prj .bd{padding:21px 22px 24px; display:flex; flex-direction:column; flex:1}
.prj .tag{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.prj h3{font-weight:500; font-size:18.5px; line-height:1.3; margin:10px 0 9px; color:var(--ink)}
.prj p{margin:0; font-size:14.5px; color:var(--ink-2)}
.prj .more{margin-top:16px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.prj:hover .more{color:var(--gold)}
.prj.hide{display:none}
.empty{margin:0; color:var(--muted); font-size:15px; display:none}
.empty.on{display:block}

/* karta projektu — treść */
.prj-body{margin-top:34px; max-width:64ch}
.prj-body p{margin:0 0 16px; color:var(--ink-2); font-size:18.5px; line-height:1.72}
.prj-body p:last-child{margin-bottom:0}

/* strony tekstowe (polityka prywatności) */
.tekst{max-width:70ch}
.tekst h2{font-size:clamp(19px,2.2vw,23px); margin:38px 0 14px}
.tekst h2:first-child{margin-top:0}
.tekst h2::after{margin-top:14px}
.tekst p{margin:0 0 14px; color:var(--ink-2)}
.tekst ul{margin:0 0 18px; padding-left:20px; color:var(--ink-2)}
.tekst li{margin-bottom:8px}
.tekst .note{margin-top:34px}

/* pasek danych projektu — ten sam język co tabelka rysunkowa w stopce */
.paski{display:grid; grid-template-columns:2fr 1fr; border:1px solid var(--line); margin-top:34px}
@media(max-width:760px){.paski{grid-template-columns:1fr}}
.paski div{padding:15px 18px; border-right:1px solid var(--line); min-width:0}
.paski div:last-child{border-right:0}
@media(max-width:760px){
  .paski div{border-right:0; border-bottom:1px solid var(--line)}
  .paski div:last-child{border-bottom:0}
}
.paski small{display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
             color:var(--gold); margin-bottom:6px}
.paski b{font-weight:400; font-size:15.5px; color:var(--ink-2)}

/* galeria projektu */
.gal figcaption{padding:26px 16px 13px}
.shots{display:flex; flex-direction:column; gap:16px}
.shots .tile{aspect-ratio:auto; width:100%; cursor:zoom-in}
.shots .tile img{width:100%; height:auto; object-fit:contain}
.shots .tile.tall{max-width:min(100%,640px); margin-left:auto; margin-right:auto}

/* nawigacja między projektami */
.pager{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:56px; padding-top:26px}
.pager a{text-decoration:none; font-size:14px; color:var(--ink-2); max-width:46%}
.pager a:hover{color:var(--gold)}
.pager small{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.pager .nx{text-align:right; margin-left:auto}

/* pasek CTA na dole podstrony */
.cta{background:var(--bg-2); border-top:1px solid var(--line); padding:56px 0}
.cta .wrap{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center}
.cta h2{margin:0; font-size:clamp(22px,2.8vw,28px)}
.cta h2::after{display:none}
.cta .btn-p{color:#fff}
.cta .btn-p:hover{background:var(--gold-h)}

/* ============ standard JDDC-DESIGN ============ */

/* kreskowanie wizualizacji — miedziana powłoka schodzi przy najechaniu
   (odpowiednik hatchu na budynkach i DRAWORDER _Back pod obrysem) */
.tile, .prj .ph{position:relative}
.tile::after, .prj .ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--hatch); transition:opacity .35s ease;
}
.tile:hover::after, .prj:hover .ph::after{opacity:0}
.tile figcaption{z-index:2}

/* logo w stopce — ten sam znak w negatywie */
.brand-foot{margin-bottom:9px}
.brand-foot .mark{height:44px; width:auto; display:block; filter:invert(1)}

/* tabelka rysunkowa w stopce: pracownia | inwestycja | wariant | skala | data | nr ark. */
footer{padding:0}
footer .fx{max-width:var(--max); margin:0 auto; padding:26px 24px;
           border-bottom:1px solid var(--stopka-linia)}
.metryka{display:grid; grid-template-columns:repeat(6,1fr); max-width:var(--max); margin:0 auto;
         border-top:1px solid var(--metryka-linia);
         border-bottom:1px solid var(--stopka-linia)}
@media(max-width:820px){.metryka{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.metryka{grid-template-columns:repeat(2,1fr)}}
.metryka div{padding:11px 14px; border-right:1px solid var(--metryka-linia); min-width:0}
.metryka div:nth-child(6n){border-right:0}
@media(max-width:820px){
  .metryka div:nth-child(6n){border-right:1px solid var(--metryka-linia)}
  .metryka div:nth-child(3n){border-right:0}
  .metryka div:nth-child(-n+3){border-bottom:1px solid var(--metryka-linia)}
}
@media(max-width:480px){
  .metryka div:nth-child(3n){border-right:1px solid var(--metryka-linia)}
  .metryka div:nth-child(2n){border-right:0}
  .metryka div:nth-child(-n+4){border-bottom:1px solid var(--metryka-linia)}
}
.metryka small{display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
               color:var(--metryka-etykieta); margin-bottom:3px}
.metryka b{display:block; font-size:15px; font-weight:400; color:var(--metryka-wartosc);
           font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.metryka .m-jddc b{color:var(--gold-l); letter-spacing:.12em; font-weight:600}
.metryka .m-nr b{color:var(--gold-l)}

/* ============ tryb nocny ============
   Wariant „kalka nocna": tło ciemnoszare, nie czarne; karty, filtry i pola
   formularza tracą wypełnienie i zostają na samym obrysie — jak na rysunku.
   Tabelka w stopce przestaje być wypełniona i zamyka się w ramce z kreski.

   Paleta jest zdefiniowana DWA RAZY, bo dwa są powody jej włączenia:
   automatycznie (ustawienie systemu) i ręcznie (przełącznik w menu).
   Zmieniając kolor, zmień go w OBU blokach.                                  */

@media (prefers-color-scheme: dark){
  :root:not([data-motyw="jasny"]){
    color-scheme:dark;
    --gold:#ce8038; --gold-l:#e0a066; --gold-h:#e0a066;
    --ink:#e8e4da; --ink-2:#b7b2a6;
    --muted:#8a8577; --line:#34302a;
    --bg:#191816; --bg-2:#1f1e1b;
    --pow:#191816; --pow-2:#1f1e1b; --pow-obrys:transparent;
    --naglowek:rgba(25,24,22,.93);
    --logo-filtr:invert(1);
    --hatch:rgba(206,128,56,.26);
    --stopka:transparent; --stopka-linia:var(--line);
    --stopka-tekst:var(--ink-2); --stopka-link:var(--ink);
    --metryka-linia:var(--line);
    --metryka-etykieta:var(--muted); --metryka-wartosc:var(--ink-2);
    --zle:#d2664f; --zle-tlo:rgba(210,102,79,.12); --zle-txt:#e79680;
    --dobrze:#6da87c; --dobrze-tlo:rgba(109,168,124,.12); --dobrze-txt:#8dc39c;
    --ikona-noc:var(--gold); --ikona-dzien:var(--muted);
  }
}

:root[data-motyw="ciemny"]{
  color-scheme:dark;
  --gold:#ce8038; --gold-l:#e0a066; --gold-h:#e0a066;
  --ink:#e8e4da; --ink-2:#b7b2a6;
  --muted:#8a8577; --line:#34302a;
  --bg:#191816; --bg-2:#1f1e1b;
  --pow:#191816; --pow-2:#1f1e1b; --pow-obrys:transparent;
  --naglowek:rgba(25,24,22,.93);
  --logo-filtr:invert(1);
  --hatch:rgba(206,128,56,.26);
  --stopka:transparent; --stopka-linia:var(--line);
  --stopka-tekst:var(--ink-2); --stopka-link:var(--ink);
  --metryka-linia:var(--line);
  --metryka-etykieta:var(--muted); --metryka-wartosc:var(--ink-2);
  --zle:#d2664f; --zle-tlo:rgba(210,102,79,.12); --zle-txt:#e79680;
  --dobrze:#6da87c; --dobrze-tlo:rgba(109,168,124,.12); --dobrze-txt:#8dc39c;
  --ikona-noc:var(--gold); --ikona-dzien:var(--muted);
}

/* ---------- przełącznik dnia i nocy w menu ----------
   Sam znak: półksiężyc i słońce przedzielone miedzianym ukośnikiem. Podświetlona
   jest ta połowa, która opisuje stan bieżący — jak w legendzie rysunku. O tym,
   która to, decyduje wyłącznie CSS, więc przy pierwszym malowaniu strony znak
   jest już właściwy, bez mignięcia.                                           */
.motyw{display:none}
:root[data-js] .motyw{display:block}
.menu .motyw button{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:flex; align-items:center; line-height:0;
}
.znak{display:block; overflow:visible}
.znak .ks,.znak .sc{fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease}
.znak .ks{stroke:var(--ikona-noc)}
.znak .sc{stroke:var(--ikona-dzien)}
.znak .sl{stroke:var(--gold); stroke-width:1.2; stroke-linecap:round}
.menu .motyw button:hover .ks,
.menu .motyw button:hover .sc{stroke:var(--gold-l)}
.menu .motyw button:focus-visible{outline:1px solid var(--gold); outline-offset:4px}

@media(max-width:820px){
  .menu .motyw button{padding:14px 0 13px; border-bottom:1px solid var(--line); width:100%}
}

/* ---------- trzy obszary pracy (sekcja Zakres) ---------- */
.sciezki .card{display:flex; flex-direction:column}
.sciezki .pkt{list-style:none; margin:14px 0 18px; padding:0; font-size:14.5px; color:var(--ink-2)}
.sciezki .pkt li{padding:7px 0 7px 18px; border-bottom:1px solid var(--line); position:relative}
.sciezki .pkt li:last-child{border-bottom:0}
.sciezki .pkt li::before{content:""; position:absolute; left:0; top:14px; width:8px; height:2px; background:var(--gold)}
.card .dalej{margin-top:auto; text-decoration:none; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold)}
.card .dalej:hover{color:var(--gold-l)}