/* praza.pl — style strony (z makiety Opcji 2) + podstrony */
/* Układ: katalog z cienkich linii (komórki jak w katalogu), zdjęcia na całą szerokość, logo PRAZA w osi nagłówka. */
:root{
  --bg:#F4F2ED;      /* ciepła biel */
  --surface:#ECE9E2; /* tło zdjęć i komórek */
  --fg:#121212;      /* czerń */
  --fg-2:#66645E;    /* opisy */
  --line:#D8D3C9;    /* linie katalogu */
  --accent:#7C473C;  /* brąz z bookletu — tylko detale */
  --btn:#121212; --on-btn:#F4F2ED;
  --on-photo:#FFFFFF; --scrim:rgba(0,0,0,.42);
  --app-bg:#333333; --app-band:#4A4A4A; --app-fg:#FFFFFF; --app-fg-2:#C9C9C9; --app-line:#5A5A5A;
  --f-display:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;
  --f-body:"Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
/* Świadomie jeden, jasny motyw — decyzja właściciela 02.11.2026 („w wersji białej”). */
:root{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:300 17px/1.6 var(--f-body);padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:0;overflow-x:hidden}
@media (min-width:900px){body{--gutter:max(32px, env(safe-area-inset-left, 0px));--gutter-r:max(32px, env(safe-area-inset-right, 0px))}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
h1,h2,h3{font-family:var(--f-display);font-weight:300;margin:0;text-wrap:balance}
p{margin:0}
.bleed{margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r))}
.label{font:400 11px/1.4 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.sq{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;background:var(--btn);color:var(--on-btn);border:1px solid var(--btn);padding:14px 22px;border-radius:0;cursor:pointer;white-space:nowrap}
.sq.ghost{background:transparent;color:var(--fg)}
.sq.light{background:var(--on-photo);color:#121212;border-color:var(--on-photo)}
.sq:hover{opacity:.85}

/* pasek informacyjny */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface);padding-left:var(--gutter);padding-right:var(--gutter-r)}
.ticker div{display:flex;gap:48px;white-space:nowrap;padding-block:8px;width:max-content;animation:tick 40s linear infinite}
.ticker span{font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase}
@keyframes tick{to{transform:translateX(-50%)}}
/* notowania budowlane jak na giełdzie: koszt budowy 1 m² i ceny materiałów; ▲ zielony, ▼ czerwony (źródła w ostatniej pozycji paska) */
.ticker div{gap:26px;align-items:center}
.ticker .tk-g{background:var(--fg);color:var(--bg);padding:2px 8px}
.ticker .tk b{font-weight:500}
.ticker .tk .v,.ticker .tk em{margin-left:7px;font-variant-numeric:tabular-nums}
.ticker .tk em{font-style:normal;font-weight:500}
.ticker .up{color:#1F6B3F}.ticker .dn{color:#A8322D}
.ticker .tk-src{text-transform:none;letter-spacing:.02em;color:var(--fg-2)}
.ticker .nu{text-transform:none} /* „m²” nie może zmienić się w „M²” */
/* „news”: w dniu nowych danych z ostrym spadkiem — czerwona plakietka stoi na początku paska, a pozycja w pasku jest podświetlona */
.ticker.has-news{display:flex;padding-inline-start:0}
.ticker .tk-news{flex:none;position:relative;z-index:1;margin:0;display:flex;align-items:center;gap:10px;padding-block:8px;padding-inline:var(--gutter) 16px;background:#A8322D;color:#fff;font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker .tk-news i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s steps(2) infinite}
.ticker .tk-news b{font-weight:600}
.ticker .tk-news .tk-demo{border:1px solid rgba(255,255,255,.6);padding:0 6px}
.ticker .tk.hot{background:#A8322D;color:#fff;padding:2px 8px}
.ticker .tk.hot em{color:#fff}
@media (max-width:699px){.ticker .tk-news .nl{display:none}}

/* nagłówek */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-left:var(--gutter);padding-right:var(--gutter-r)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:68px;gap:16px}
.top nav{display:flex;gap:26px}
.top nav a,.top .right a{font:400 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.top .brand{display:block;color:var(--fg)}
.top .brand svg{display:block;height:22px;width:auto}
.right{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.mode{display:flex;gap:4px;align-items:center}
.mode button{font:400 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:4px 2px;color:var(--fg-2);cursor:pointer;border-bottom:1px solid transparent}
.mode button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.mode i{color:var(--line);font-style:normal}
.mode button{white-space:nowrap}
@media (max-width:899px){.top-in{grid-template-columns:auto 1fr}.top nav,.right .hide-m{display:none}.top .brand svg{height:14px}.mode button{font-size:10px;letter-spacing:.08em}}
/* języki: PL · EN · AR */
.lang{display:flex;gap:10px;align-items:center}
.top .right .lang a{font-size:11px;letter-spacing:.1em;color:var(--fg-2);border-bottom:1px solid transparent;padding:2px 0}
.top .right .lang a[aria-current="true"]{color:var(--fg);border-bottom-color:var(--fg)}
@media (max-width:899px){.right{gap:12px}.lang{gap:7px}.top .right .lang a{font-size:10px;letter-spacing:.04em}}
/* wersja arabska: krój z arabskimi znakami, bez rozstrzelenia liter (rozrywa połączenia liter) */
:root[lang="ar"]{--f-display:"IBM Plex Sans Arabic","Jost",sans-serif;--f-body:"IBM Plex Sans Arabic","Roboto Condensed",sans-serif}
:root[lang="ar"] *{letter-spacing:0!important}
:root[lang="ar"] body{line-height:1.75}

/* wejście — 4 warianty */
.hero{position:relative}
.v-photo{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.v-photo img{display:block;width:100%;height:100%;object-fit:cover}
.over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;text-align:center;padding:24px;color:var(--on-photo)}
.over h1{font-size:clamp(20px,2.2vw,30px);letter-spacing:.18em;text-transform:uppercase;font-weight:300;max-width:28ch}
.over .label{color:var(--on-photo)}
.scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--scrim));pointer-events:none}
.cap{position:absolute;left:var(--gutter);bottom:14px;color:var(--on-photo);font:400 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase;z-index:2}
/* 1 sygnatura */
.v1 .v-photo{aspect-ratio:16/8.4;max-width:100%}
.v1 .word{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:clamp(38px,4.5vw,64px);color:var(--on-photo);z-index:2}
.v1 .word svg{display:block;width:100%;height:auto}
.v1 .over{place-content:start center;padding-top:clamp(28px,7vw,110px);z-index:2}
@media (max-width:899px){.v1 .v-photo{aspect-ratio:4/5}.v1 .over h1{font-size:18px}}
/* 0 film sterowany przewijaniem */
.fstage{position:relative;height:calc(100svh - 69px - env(safe-area-inset-top,0px));min-height:520px;overflow:hidden;background:var(--surface)}
.fstage img,.fstage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fstage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--scrim),transparent 38%,transparent 60%,var(--scrim))}
.fband .band-txt{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:clamp(56px,6vw,90px);z-index:2;color:var(--on-photo);display:grid;gap:12px}
.fband .band-txt p{font:300 clamp(30px,4.4vw,64px)/1.05 var(--f-display);max-width:20ch}
.fband .band-txt .label{color:var(--on-photo)}
#filmStage::before{display:none} /* wejście: sam film, bez napisów i przyciemnienia */
/* filmy i klatki w oryginalnych kolorach — bez nakładki (decyzja właściciela 03.11: „bez koloru nałożonego na zdjęcia”) */
.frame-media .tagw{z-index:2}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.film-ui{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:16px;z-index:3;display:none;justify-content:space-between;gap:12px}
.fstage.on .film-ui{display:flex}
.film-ui .label{color:var(--on-photo)}
.film-bar{position:absolute;left:0;right:0;top:-10px;height:1px;background:rgba(255,255,255,.35)}
.film-bar i{position:absolute;inset:0;background:var(--on-photo);transform-origin:left;transform:scaleX(0)}
/* 5 manifest */
.v5 .v-photo{aspect-ratio:16/8.4;max-width:100%}
.v5-txt{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:clamp(24px,4vw,56px);color:var(--on-photo);z-index:2;display:grid;gap:16px}
.v5-txt h1{font:300 clamp(36px,5.6vw,86px)/1.02 var(--f-display);letter-spacing:-.01em}
.v5-txt .label{color:var(--on-photo)}
@media (max-width:899px){.v5 .v-photo{aspect-ratio:4/5}}
/* pas ze zdaniem */
.band{position:relative;margin-block:0}
.band figure{margin:0;aspect-ratio:16/7;overflow:hidden;background:var(--surface);max-width:100%}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band p{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:clamp(20px,4vw,56px);color:var(--on-photo);font:300 clamp(30px,4.4vw,64px)/1.05 var(--f-display);z-index:2;max-width:18ch}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--scrim))}
@media (max-width:899px){.band figure{aspect-ratio:4/5}}
/* logo w nagłówku skraca się po przewinięciu */
.top .brand .short{display:none}
.v1 .v-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--scrim),transparent 42%);z-index:1;pointer-events:none}
.top.scrolled .brand .full{display:none}
.top.scrolled .brand .short{display:block}
@media (max-width:899px){.top .brand .full{display:none}.top .brand .short{display:block}} /* telefon: zawsze krótkie logo — mieści się przełącznik języka */
/* 2 dyptyk */
.v2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.v2 .v-photo{aspect-ratio:4/5;max-width:100%}
.v2 .over{grid-column:1/-1;grid-row:1}
.v2-wrap{position:relative}
.v2-wrap .over{position:absolute;inset:0;z-index:2}
@media (max-width:899px){.v2 .v-photo{aspect-ratio:3/5}}
/* 3 kreska */
.v3{padding-block:40px 64px;display:grid;justify-items:center;gap:30px;text-align:center}
.v3 .bubbles{position:relative;width:100%;height:28px}
.v3 .bubble{position:absolute;top:0;width:26px;height:26px;margin-left:-13px;border:1px solid var(--fg-2);border-radius:50%;display:grid;place-items:center;font:400 11px var(--f-display);color:var(--fg-2)}
.v3 .drawing{width:100%;height:auto;max-width:100%}
.v3 .drawing *{fill:none;stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke}
.v3 .drawing .ax{stroke:var(--line);stroke-dasharray:6 6}
.v3 .drawing .dim{stroke:var(--accent)}
.v3 .drawing text{fill:var(--accent);stroke:none;font:400 11px var(--f-display);letter-spacing:.1em}
.v3 .logo-v{width:min(260px,60vw);height:auto;color:var(--fg)}
.v3 h1{font-size:clamp(22px,2.4vw,34px);max-width:30ch}
/* 4 przesłona */
.v4 .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.v4 figure{position:relative;margin:0;aspect-ratio:3/5.2;overflow:hidden;background:var(--surface);max-width:100%}
.v4 figure img{width:100%;height:100%;object-fit:cover;display:block}
.v4 .glyph{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:46%;color:var(--on-photo);z-index:2}
.v4 .glyph svg{display:block;width:100%;height:auto}
.v4 .below{display:grid;grid-template-columns:3fr 2fr;gap:24px;align-items:end;padding-block:30px 10px}
.v4 h1{font-size:clamp(24px,2.6vw,38px);max-width:26ch}
.v4 .ctas{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:899px){.v4 figure{aspect-ratio:1/3}.v4 .below{grid-template-columns:1fr}.v4 .ctas{justify-content:flex-start}}

/* sekcje */
section{position:relative}
.sec{padding-block:120px;border-top:1px solid var(--line)}
@media (max-width:899px){.sec{padding-block:72px}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.005em}
.manifest{padding-block:110px;text-align:center;display:grid;gap:22px;justify-items:center}
.manifest p.big{font:300 clamp(22px,2.4vw,34px)/1.35 var(--f-display);max-width:34ch}
@media (max-width:899px){.manifest{padding-block:64px}}

/* ujęcia do zrobienia */
.shot{display:none;margin-top:12px;border:1px dashed var(--accent);padding:10px 12px;font-size:14px;line-height:1.45;color:var(--fg);text-align:left}
.shot b{display:block;font:400 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.show-shots .shot{display:block}

/* oś */
.os-frames{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.frame{display:grid;grid-template-columns:3fr 2fr;border-bottom:1px solid var(--line)}
.frame-media{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface);max-width:100%}
.frame-media img{width:100%;height:100%;object-fit:cover;display:block}
.frame-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface)}
.frame-media.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg)}
.duo video{position:relative;inset:auto;min-height:0}
@media (max-aspect-ratio:4/5){.duo{grid-template-columns:1fr}.duo video+video{display:none}}
/* film tylko pionowy na szerokim kadrze: cały film na środku, po bokach ten sam film rozmyty */
.frame-media.tall video.fg{object-fit:contain;background:transparent}
.frame-media.tall video.bgv{filter:blur(28px) brightness(.82);transform:scale(1.15)}
@media (max-aspect-ratio:4/5){.tall video.bgv{display:none}.tall video.fg{object-fit:cover}}
.frame-text{border-left:1px solid var(--line);padding:clamp(20px,3vw,48px);display:grid;gap:14px;align-content:center;min-width:0}
.frame-no{font:300 13px var(--f-display);letter-spacing:.16em;color:var(--fg-2)}
.frame-text h3{font-size:clamp(26px,2.6vw,40px)}
.frame-text p{color:var(--fg-2);max-width:40ch}
/* dopisek przy etapie (dawniej linijka pod ofertą): nadzór autorski, charakterystyka energetyczna, adaptacje */
.frame-text p.frame-plus{color:var(--fg);border-top:1px solid var(--line);padding-top:12px}
.tagw{position:absolute;left:12px;bottom:12px;font:400 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase;background:var(--bg);color:var(--fg);padding:4px 8px}
.rec{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--fg-2);text-align:center;padding:24px}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.draw{position:absolute;inset:0;width:100%;height:100%}
.draw *{fill:none;stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke}
.draw .dim{stroke:var(--accent)}
.draw-over{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.os-bar{display:none}
@media (max-width:899px){.frame{grid-template-columns:1fr}.frame-text{border-left:0;border-top:1px solid var(--line)}}
.pinned .os-stage{position:relative;height:calc(100svh - 92px - env(safe-area-inset-top,0px));min-height:520px;display:grid;grid-template-rows:minmax(0,1fr) auto}
.pinned .os-frames{display:block;position:relative;height:auto;min-height:0;border:0}
/* oś etapów z bookletu: wszystkie kroki zawsze widoczne, pogrubione (z kropką w brązie bookletu) te, których dotyczy bieżący film */
.os-axis{display:grid;grid-template-columns:118px repeat(3,minmax(0,1fr)) 128px;gap:5px 22px;padding:12px 0 2px;border-top:1px solid var(--line)}
.os-axis .ax-h,.os-axis .ax-who{font:400 10px/1.5 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.os-axis .ax-h{display:flex;gap:8px;align-items:baseline;transition:color .35s}
.os-axis .ax-h i{font:300 11px var(--f-body);letter-spacing:0;text-transform:none;color:var(--fg-2)}
.os-axis .ax-h.on{color:var(--fg)}
.os-axis .ax-h .sh{display:none}
.os-axis .ax-who b{display:block;font-weight:500;color:var(--fg)}
.os-axis ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:start;font:300 12.5px/1.45 var(--f-body);color:var(--fg-2)}
.os-axis li{transition:color .35s}
.os-axis li:not(:last-child)::after{content:"·";margin:0 7px;color:var(--line);font-weight:300}
.os-axis li.on{color:var(--fg);font-weight:600}
.os-axis li.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 6px 2px 0;vertical-align:middle}
@media (max-width:899px){
  .os-axis{grid-template-columns:52px minmax(0,1fr);gap:2px 10px;padding-top:8px}
  .os-axis .c0,.os-axis .ax-h i,.os-axis .rw.c4{display:none}
  .os-axis .ax-h{font-size:9px;letter-spacing:.1em}
  .os-axis .ax-h .lg{display:none}.os-axis .ax-h .sh{display:inline}
  .os-axis ul{font-size:10.5px;line-height:1.4}
  .os-axis li:not(:last-child)::after{margin:0 4px}
  .os-axis .rw::before{content:attr(data-lbl);margin-right:5px;color:var(--fg-2);font-weight:400}
  .os-axis .ax-h.c1{grid-area:1/1}.os-axis .ra.c1{grid-area:1/2}.os-axis .rw.c1{grid-area:2/2}
  .os-axis .ax-h.c2{grid-area:3/1}.os-axis .ra.c2{grid-area:3/2}.os-axis .rw.c2{grid-area:4/2}
  .os-axis .ax-h.c3{grid-area:5/1}.os-axis .ra.c3{grid-area:5/2}.os-axis .rw.c3{grid-area:6/2}
  .os-axis .ax-h.c4{grid-area:7/1}.os-axis .ra.c4{grid-area:7/2}
}
.pinned .frame{position:absolute;inset:0;border:1px solid var(--line)}
.pinned .frame-media{aspect-ratio:auto;height:100%}
@media (min-width:900px){.pinned .frame{grid-template-columns:7fr 3fr}} /* szerszy kadr — film mniej przycięty */
.pinned .frame:not(:first-child){opacity:0;visibility:hidden}
.pinned .os-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;position:absolute;right:0;bottom:-18px;width:40%}
.os-bar span{height:1px;background:var(--line);position:relative;overflow:hidden}
.os-bar span i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
@media (max-width:899px){.pinned .frame{grid-template-rows:minmax(0,1fr) var(--ft-h,auto)} /* tekst etapu zawsze cały (wysokość najdłuższego), film zajmuje resztę */.pinned .frame-text{padding:16px;gap:8px;align-content:start}.pinned .frame-text p{font-size:15px;line-height:1.5}.pinned .frame-text p.frame-plus{font-size:10px;padding-top:8px}}

/* oferta — rząd kafli */
.tiles-nav{display:flex;gap:8px}
.tiles-nav button{width:40px;height:40px;border:1px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;font:300 18px var(--f-display)}
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,340px);gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--line);border:1px solid var(--line);scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;scroll-snap-align:start;background:var(--surface);cursor:pointer;border:0;padding:0;text-align:left;color:var(--on-photo)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.tile:hover img{transform:scale(1.04)}
.tile .t{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(180deg,transparent,var(--scrim));display:grid;gap:6px;z-index:1}
.tile .t b{font:300 22px/1.15 var(--f-display)}
.tile .t span{font:400 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.svc-detail{display:grid;grid-template-columns:2fr 3fr;gap:24px;border:1px solid var(--line);border-top:0;padding:24px}
.svc-detail h3{font-size:26px}
.svc-detail p{color:var(--fg-2);max-width:60ch}
@media (max-width:899px){.svc-detail{grid-template-columns:1fr}}

/* projekty — katalog */
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin-bottom:22px}
.chip{font:400 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;color:var(--fg-2);cursor:pointer}
.chip[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.chip[disabled]{opacity:.45;cursor:not-allowed}
.chip sup{font-size:9px;margin-left:3px}
.view{margin-left:auto;display:flex;gap:16px}
.cat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--bg);display:grid;grid-template-rows:auto 1fr auto;text-decoration:none;min-width:0}
.cell figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface);max-width:100%}
.cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.cell:hover img{transform:scale(1.03)}
.cell .info{padding:14px 16px 18px;display:grid;gap:4px}
.cell .info b{font:400 13px var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.cell .info span{font-size:14px;color:var(--fg-2)}
.cell .go{border-top:1px solid var(--line);text-align:center;padding:12px;font:400 11px var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.cell:hover .go{background:var(--btn);color:var(--on-btn)}
@media (max-width:1099px){.cat{grid-template-columns:repeat(3,1fr)}}
@media (max-width:699px){.cat{grid-template-columns:repeat(2,1fr)}.cell .info{padding:10px}.cell .info b{font-size:11px}.cell .info span{font-size:12px}}
.more{display:flex;justify-content:center;margin-top:28px}
.idx{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.idx th{font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--fg)}
.idx td{padding:14px 10px 14px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.idx .nm a{font:300 clamp(18px,1.6vw,22px) var(--f-display);text-decoration:none}
.idx .muted{color:var(--fg-2)}
.idx .sub{display:none}
@media (max-width:899px){.idx .c-kat,.idx .c-pow,.idx .c-msc{display:none}.idx .sub{display:block;font-size:13px;color:var(--fg-2)}}
.preview{position:fixed;left:0;top:0;width:280px;aspect-ratio:4/3;pointer-events:none;z-index:30;opacity:0;transition:opacity .2s;overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover;display:block}
.note{margin-top:16px;font-size:14px;color:var(--fg-2);max-width:75ch}

/* warstwy */
.layers-wrap{display:grid;grid-template-columns:3fr 2fr;border:1px solid var(--line)}
.lv-media{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);min-width:0}
.lv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lv-media .tagw{z-index:2}
.layers-note{border-left:1px solid var(--line);padding:clamp(20px,3vw,44px);display:grid;gap:16px;align-content:center}
.layers-note p{color:var(--fg-2)}
@media (max-width:899px){.layers-wrap{grid-template-columns:1fr}.layers-note{border-left:0;border-top:1px solid var(--line)}}

/* proces */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s}
.steps li{background:var(--bg);padding:22px 18px 26px;display:grid;gap:10px;align-content:start;counter-increment:s;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:300 13px var(--f-display);letter-spacing:.16em;color:var(--fg-2)}
.steps b{font:300 22px/1.2 var(--f-display)}
.steps p{color:var(--fg-2);font-size:15px}
@media (max-width:899px){.steps{grid-template-columns:1fr}}
.app-row{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:center;margin-top:56px}
.app-row .txt{display:grid;gap:14px}
.app-row .txt p.big{font:300 clamp(22px,2.2vw,30px)/1.35 var(--f-display);max-width:28ch}
.app-row .txt p{color:var(--fg-2);max-width:52ch}
.phone{justify-self:center;width:min(280px,100%);aspect-ratio:9/19.5;border-radius:40px;padding:9px;background:#151515;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.phone .app-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:31px;background:var(--app-bg)} /* zrzut ekranu aplikacji — nieklikalny */
@media (max-width:899px){.app-row{grid-template-columns:1fr}}
.app-mini{height:100%;border-radius:31px;background:var(--app-bg);color:var(--app-fg);padding:24px 14px 0;display:flex;flex-direction:column;gap:11px;font-family:var(--f-body);overflow:hidden;position:relative}
.am-top{font:400 12px var(--f-display);letter-spacing:.32em}.am-top span{font-weight:200;letter-spacing:.1em}
.am-hi{font:300 21px var(--f-display)}
.am-card{border:1px solid var(--app-line);border-radius:14px;padding:11px;display:grid;gap:6px;font-size:14px}
.am-card b{font-weight:400;font-size:16px}
.am-card ul{margin:0;padding-left:16px;display:grid;gap:4px}
.am-l{font:400 9px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--app-fg-2)}
.am-bar{height:3px;background:var(--app-line);border-radius:2px}.am-bar i{display:block;height:100%;background:var(--app-fg);border-radius:2px}
.am-nav{position:absolute;left:0;right:0;bottom:0;background:var(--app-band);display:flex;justify-content:space-around;padding:12px 4px 16px;font-size:10px;color:var(--app-fg-2)}
.am-nav span:first-child{color:var(--app-fg)}

/* zespół */
.team-group{margin-bottom:48px}
.team-group .gh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.team-group h3{font-size:22px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.person{background:var(--bg);display:grid;min-width:0}
.person .ph{aspect-ratio:4/5;background:var(--surface);overflow:hidden;display:grid;place-items:center;max-width:100%}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.person:hover img{filter:none}
.person .ini{font:200 40px var(--f-display);color:var(--fg-2)}
.person .nm{padding:12px 14px 16px;display:grid;gap:2px}
.person b{font:400 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.person span{font-size:14px;color:var(--fg-2)}

/* biura */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.office{background:var(--bg);padding:26px 22px 28px;display:grid;gap:10px;align-content:start}
.office h3{font-size:28px}
.office address{font-style:normal}
.office a{font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:899px){.offices{grid-template-columns:1fr}}
.contact-line{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 32px}

/* kontakt: etykieta z lewej, duże hasło, e-mail i krótki formularz (wzór: moomoo.pl, wskazanie właściciela) */
.cta{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:24px 48px;align-items:start}
.cta > .label{padding-top:1.1em}
.cta-big{font:300 clamp(34px,3.8vw,58px)/1.08 var(--f-display);letter-spacing:-.015em;max-width:22ch}
.cta-main{grid-column:2;max-width:780px;margin-top:clamp(48px,7vw,110px);display:grid;gap:22px}
.cta-lead{font:300 clamp(28px,3vw,44px)/1.12 var(--f-display);letter-spacing:-.01em;max-width:22ch}
.cta-links{display:flex;flex-wrap:wrap;gap:14px 40px}
.cta-links a{font:300 clamp(19px,1.7vw,24px) var(--f-display);text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:8px}
.cta-links a span{display:inline-block;margin-left:10px;font-size:.8em;transition:transform .3s}
.cta-links a:hover span{transform:translate(2px,-2px)}
.cta hr{border:0;border-top:1px solid var(--line);margin:22px 0 10px;width:100%}
.cta-sub{font:400 clamp(18px,1.5vw,21px) var(--f-display)}
form.qf{display:grid;gap:20px}
.qf .row{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end}
.qf .hint{font-size:13px;color:var(--fg-2);margin-top:-12px}
.qf .err:empty{display:none}
.qf .err{margin-top:-10px}
.f{display:grid;gap:6px;min-width:0}
label{font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
label small{font:400 11px var(--f-body);letter-spacing:0;text-transform:none}
input,select,textarea{font:300 17px var(--f-body);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--fg);padding:10px 2px;border-radius:0;width:100%}
input::placeholder,textarea::placeholder{color:#8A867E}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23121212'/%3E%3C/svg%3E") no-repeat right 4px center}
textarea{min-height:76px;resize:vertical}
.qf .chk{display:flex;gap:12px;align-items:center}
.qf .chk input{width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--fg);cursor:pointer}
.qf .chk label{font:300 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--fg-2);cursor:pointer}
.err{font-size:13px;color:var(--accent);min-height:1em}
.rodo{font-size:12px;color:var(--fg-2);max-width:75ch}
.sent{border:1px solid var(--fg);padding:14px 16px}
@media (max-width:899px){.cta{grid-template-columns:1fr}.cta > .label{padding-top:0}.cta-main{grid-column:1;margin-top:28px}
  .qf .row{grid-template-columns:1fr}.qf .row .sq{justify-self:start}}

/* stopka */
footer{padding-block:80px 120px;border-top:1px solid var(--line)}
/* logo w stopce: niewidoczne; „światło” pod kursorem odsłania litery wokół niego (wzór: film właściciela, 03.11.2026) */
.foot-logo{display:block;width:100%;height:auto;color:var(--fg);--mx:-9999px;--my:-9999px;--r:clamp(170px,22vw,400px);opacity:0;transition:opacity .6s;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,rgba(0,0,0,.8) 22%,rgba(0,0,0,.3) 58%,transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,rgba(0,0,0,.8) 22%,rgba(0,0,0,.3) 58%,transparent 100%)}
footer.lit .foot-logo{opacity:1}
footer.still .foot-logo{opacity:.14;-webkit-mask-image:none;mask-image:none}
.foot{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px;font-size:15px}
.foot>div{background:var(--bg);padding:18px;display:grid;gap:4px;align-content:start;min-width:0}
.foot .label{margin-bottom:6px}
@media (max-width:899px){.foot{grid-template-columns:1fr 1fr}}

/* panel makiety */
.mock{position:fixed;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--btn);color:var(--on-btn);padding:6px 6px 6px 14px;font:400 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase;max-width:calc(100vw - 24px)}
.mock button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:transparent;color:var(--on-btn);border:1px solid color-mix(in srgb,var(--on-btn) 35%,transparent);padding:6px 9px;cursor:pointer}
.mock button[aria-pressed="true"]{background:var(--on-btn);color:var(--btn)}
.mock.min > :not(#mockMin){display:none} /* zwinięty panel nie zasłania osi etapów i formularza */
/* układ od prawej do lewej (arabski): lustrzane odbicie reguł z fizycznymi stronami; siatki i flex odwracają się same */
[dir="rtl"] .frame-text,[dir="rtl"] .layers-note{border-left:0;border-right:1px solid var(--line)}
@media (max-width:899px){[dir="rtl"] .frame-text,[dir="rtl"] .layers-note{border-right:0}}
[dir="rtl"] .frame-no{direction:ltr;text-align:right}
[dir="rtl"] .tagw{left:auto;right:12px}
[dir="rtl"] .tile,[dir="rtl"] .idx th{text-align:right}
[dir="rtl"] .idx th{padding:0 0 10px 10px}
[dir="rtl"] .idx td{padding:14px 0 14px 10px}
[dir="rtl"] .chip sup{margin-left:0;margin-right:3px}
[dir="rtl"] .view{margin-left:0;margin-right:auto}
[dir="rtl"] .am-card ul{padding-left:0;padding-right:16px}
[dir="rtl"] .cta-links a span{margin-left:0;margin-right:10px}
[dir="rtl"] select{padding-right:2px;padding-left:24px;background-position:left 4px center}
[dir="rtl"] .os-axis .rw::before{margin-right:0;margin-left:5px}
[dir="rtl"] .os-axis li.on::before{margin:0 0 2px 6px}
[dir="rtl"] .ticker div{direction:ltr}
[dir="rtl"] .ticker .tk,[dir="rtl"] .ticker .tk-g,[dir="rtl"] .ticker .tk-src{direction:rtl;unicode-bidi:isolate}
[dir="rtl"] .ticker .tk .v,[dir="rtl"] .ticker .tk em{margin-left:0;margin-right:7px}
@media (max-width:699px){.mock .lbl-long,.mock .vn{display:none}.mock{padding:5px;gap:4px}.mock button{padding:5px 8px}}

@media (prefers-reduced-motion: reduce){.ticker div,.ticker .tk-news i{animation:none}.rec i{animation:none}.tile img,.cell img,.person img{transition:none}}

/* ===== strona docelowa: dodatki dla podstron (doklejane przez budowa_strony/buduj.py do assets/strona.css) ===== */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* pole-pułapka formularza na boty */
.foot .lnk{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;text-decoration:underline}
#e-wysylka a{color:inherit}

/* podstrona projektu — układ jak w moomoo: ścieżka, nagłówek, linijka danych, wstęp, duże zdjęcie, opis + dane, galeria, zapytanie, „Zobacz też” */
.pp{padding-block:28px 0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--fg)}
.pp-head{display:grid;gap:16px;max-width:1100px;margin-bottom:clamp(28px,4vw,56px)}
.pp-head h1{font-size:clamp(36px,6vw,84px);line-height:1.02;letter-spacing:-.01em}
.pp-head .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--fg);max-width:62ch}
.pp-hero{margin:0 0 clamp(36px,5vw,72px);background:var(--surface)}
.pp-hero img{display:block;width:100%;height:auto;max-height:92svh;object-fit:cover}
.pp-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,96px);align-items:start;margin-bottom:clamp(48px,6vw,96px)}
.pp-body.solo{grid-template-columns:minmax(0,640px)} /* projekt bez opisu: same dane */
.pp-body.solo .pp-data{position:static}
.pp-txt{display:grid;gap:18px}
.pp-txt p{max-width:66ch;color:var(--fg)}
.pp-data{border-top:1px solid var(--fg);padding-top:14px;position:sticky;top:96px}
.pp-data dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:0}
.pp-data dt,.pp-data dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.pp-data dt{color:var(--fg-2);padding-right:18px}
.pp-gal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,12px);margin-bottom:clamp(56px,7vw,120px)}
.pp-gal figure{margin:0;background:var(--surface);overflow:hidden}
.pp-gal figure.w{grid-column:1/-1}
.pp-gal img{display:block;width:100%;height:100%;object-fit:cover}
.pp-gal figure:not(.w){aspect-ratio:4/5}
.pp-cta{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,96px);display:grid;gap:22px}
.pp-cta .cta-big{font-size:clamp(30px,4.4vw,64px);line-height:1.05;max-width:18ch}
.pp-cta p{max-width:52ch;color:var(--fg-2)}
.pp-cta .row{display:flex;flex-wrap:wrap;gap:10px}
.pp-more{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,72px)}
.pp-more h2{font-size:clamp(24px,2.4vw,34px);margin-bottom:22px}
.pp-more .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pp-more a{display:grid;gap:10px;background:var(--bg);padding:12px 12px 16px;text-decoration:none}
.pp-more a figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.pp-more a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.pp-more a:hover img{transform:scale(1.04)}
.pp-more a b{font:300 20px/1.2 var(--f-display)}
@media (max-width:899px){
  .pp-body{grid-template-columns:1fr}.pp-data{position:static}
  .pp-gal{grid-template-columns:1fr}.pp-gal figure:not(.w){aspect-ratio:auto}
  .pp-more .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.pp-more a img{transition:none}}

/* polityka prywatności i strona 404 */
.doc{max-width:880px;padding-block:40px 80px;display:grid;gap:18px}
.doc h1{font-size:clamp(36px,5vw,64px);line-height:1.05;margin-bottom:6px}
.doc h2{font-size:clamp(21px,2vw,27px);margin-top:26px}
.doc .lead{font-size:19px;color:var(--fg)}
.doc p,.doc li{max-width:72ch}
.doc ul{margin:0;padding-left:20px;display:grid;gap:8px}
.doc .tbl{overflow-x:auto;border:1px solid var(--line)}
.doc table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5;min-width:640px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.doc th{font:400 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);background:var(--surface)}
.doc tr:last-child td{border-bottom:0}
.e404{min-height:60svh;display:grid;align-content:center;gap:20px;padding-block:60px}
.e404 h1{font-size:clamp(40px,7vw,96px);line-height:1}
.e404 .row{display:flex;flex-wrap:wrap;gap:10px}