/* Serya v4, tryb jasny: arkusz rysunku technicznego.
   Zasady: cienkie linie w kolorze tuszu zamiast kart, zero cieni i zaokraglen, zero gradientow.
   Kobalt tylko w logo, glownym przycisku, wymiarach i stanach aktywnych. */
:root{
  --paper:#FFFFFF;
  --ink:#0C1522;
  --ink-2:#2B3542;
  --muted:#5A6675;
  --faint:#8A94A4;
  --fine:#DCE3EC;
  --wash:#F4F6F9;
  --cobalt:#2A43F0;
  --cobalt-deep:#1C2ED0;
  --signal:#0E7F74;
  --bad:#B3361F;
  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1240px;
  --pad:clamp(18px,3.2vw,44px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.only-retro{display:none!important}
html{scroll-padding-top:84px}
body{margin:0;background:var(--wash);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
img,svg{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{top:12px;color:#fff}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- arkusz: ramka, pola u gory, znaczniki na krawedziach ---------- */
.page{max-width:var(--maxw);margin:28px auto 40px;background:var(--paper);border:1px solid var(--ink);position:relative}
.page::before,.page::after{content:"";position:absolute;top:0;bottom:0;width:10px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 179px,var(--ink) 179px 180px)}
.page::before{left:-11px}
.page::after{right:-11px}
.sheet-top{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--ink);font:500 11px/1 var(--mono);color:var(--muted);text-align:center}
/* linijka: liczba nad dluga kreska, miedzy liczbami 10 dzialek, granica pola wypada w polowie */
.sheet-top span{padding:5px 0 13px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 50%) 0 100%/100% 9px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10%) 0 100%/100% 4px no-repeat}
.sheet-top span+span{border-left:1px solid var(--ink);background-origin:border-box}
.sheet-top span:first-child{background-position:-1px 100%,-1px 100%}

/* ---------- naglowek ---------- */
.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;padding:0 var(--pad);height:68px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--ink)}
.masthead{display:contents}
.brand{order:1;display:block;flex:0 0 auto}
.brand svg{height:28px;width:auto;display:block}
.nav{order:2;margin-left:auto}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);padding:6px 0;background:linear-gradient(var(--cobalt),var(--cobalt)) 0 100%/0 2px no-repeat}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background-size:100% 2px}
.nav a.go{background:var(--cobalt);color:#fff;padding:10px 16px;font-weight:600}
.nav a.go:hover{background:var(--cobalt-deep)}
.mode-switch{order:3;display:inline-flex;border:1px solid var(--ink);flex:0 0 auto}
.mode-switch button{width:38px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:0}
.mode-switch button+button{border-left:1px solid var(--ink)}
.mode-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.mode-switch button:hover:not([aria-pressed=true]){color:var(--cobalt)}
.mode-switch button:focus-visible{outline-offset:-4px;outline-color:var(--cobalt)}

/* ---------- przyciski ---------- */
.btn{font:600 15px/1 var(--body);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer}
.btn b{font-weight:600}
.btn:hover{background:var(--ink);color:#fff}
.btn.default{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.default::after{content:"\2192";font-weight:400}
.btn.default:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- hero ---------- */
main{counter-reset:sec}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--pad);align-items:start;padding:64px var(--pad) 72px;border-bottom:1px solid var(--ink)}
.hero-text{display:contents}
.hero-heading{grid-column:1/-1;font-family:var(--display);text-wrap:balance;font-weight:800;font-size:clamp(44px,7.6vw,108px);line-height:1.02;letter-spacing:-.04em;max-width:13.5ch;margin-bottom:56px}
.hero-heading > h1,.hero-heading > p{display:inline;font:inherit;letter-spacing:inherit;margin:0}
/* display:contents keeps text-wrap:balance working across the <h1> and the <p>; the heading role is kept */
.hero-heading > h1{display:contents}
.hero-heading em{font-style:normal;position:relative;white-space:nowrap}
/* linia wymiarowa pod slowem "serii", miesci sie w strefie wydluzen dolnych */
.hero-heading em::after{content:"";position:absolute;left:.02em;right:.32em;bottom:.07em;height:.12em;border-left:2px solid var(--cobalt);border-right:2px solid var(--cobalt);background:linear-gradient(var(--cobalt),var(--cobalt)) 0 50%/100% 2px no-repeat}
.hero .sub{grid-column:1;font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:40ch}
.hero .ctas{grid-column:1;display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 36px}
.hero .facts{grid-column:1;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);font:400 14px/1.4 var(--mono)}
.hero .facts li{padding:11px 0;border-bottom:1px solid var(--fine);display:flex;gap:14px}
.hero .facts li::before{counter-increment:fact;content:"0" counter(fact);color:var(--faint)}
.hero .facts{counter-reset:fact}
.viewer{grid-column:2;grid-row:2/span 3;margin:0;border:1px solid var(--ink)}
.win-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--ink);font:500 12.5px/1.3 var(--mono);color:var(--ink)}
.win-title .t i{display:none}
.viewer .win-title::after{content:"SKALA 1:1";color:var(--faint)}
.win-body{margin:0}
.stage{position:relative;aspect-ratio:4/3;background:var(--wash);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stage .still{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16%}
.stage .still img{width:100%;height:auto}
.stage.live .still{display:none}
.win-status{display:flex;align-items:stretch;border-top:1px solid var(--ink);font:400 12.5px/1.3 var(--mono)}
.win-status span{flex:1;padding:10px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.stage-btn{font:500 12.5px var(--mono);background:var(--paper);color:var(--ink);border:0;border-left:1px solid var(--ink);padding:0 18px;cursor:pointer}
.stage-btn:hover{background:var(--ink);color:#fff}

/* ---------- sekcje: tytul w lewej kolumnie, tresc w prawej ---------- */
main > section:not(.hero){display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--pad);padding:72px var(--pad) 80px;border-bottom:1px solid var(--ink)}
main > section:not(.hero) > :not(.sec-title){grid-column:2}
.sec-title{grid-column:1;grid-row:1/span 20;align-self:start;position:sticky;top:96px}
.sec-title h2{font-weight:800;font-size:clamp(26px,2.4vw,32px);line-height:1.08;letter-spacing:-.02em}
/* oznaczenie widoku jak na rysunku: litera w kolku */
.sec-title::before{counter-increment:sec;content:counter(sec,upper-alpha);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;font:600 13px var(--mono);margin-bottom:18px}
.lead{font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink);max-width:46ch;margin-bottom:40px}
.subhead{font-size:20px;font-weight:800;margin:56px 0 4px}

/* uslugi jako lista czesci */
.svc{width:100%;border-collapse:collapse;display:block}
.svc thead,.svc tbody,.svc tr{display:block}
.svc thead tr,.svc td{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.45fr) auto;column-gap:28px;align-items:baseline}
.svc th{font:500 11.5px/1 var(--mono);color:var(--muted);text-align:left;padding:0 0 12px;text-transform:uppercase;letter-spacing:.06em}
.svc td{padding:26px 0;border-top:1px solid var(--ink)}
.svc tr:last-child td:last-child{border-bottom:1px solid var(--ink)}
.svc .ico{font:500 14px var(--mono);color:var(--cobalt)}
.svc h3{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.svc p{font-size:16px;color:var(--ink-2);margin:0}
.svc .more,.farm .more{font:500 13px var(--mono);white-space:nowrap;text-decoration:none}
.svc .more::after,.farm .more::after{content:" \2192"}
.svc .more:hover,.farm .more:hover{text-decoration:underline}

.balls{list-style:none;margin:0;padding:0}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.cols2 li{padding:13px 0;border-bottom:1px solid var(--fine);font-size:16.5px}
.note{margin-top:36px;padding:18px 22px;border:1px solid var(--ink);font-size:16px;color:var(--ink-2);max-width:66ch;position:relative}
.note::before{content:"UWAGA";position:absolute;top:-8px;left:16px;background:var(--paper);padding:0 6px;font:600 11px/16px var(--mono);letter-spacing:.08em;color:var(--ink)}
.note b{color:var(--ink)}

/* proces jako lancuch wymiarowy */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:k}
.steps li{position:relative;padding:46px 22px 0 0}
.steps li::before{counter-increment:k;content:"0" counter(k);position:absolute;top:2px;left:calc(50% - 11px);transform:translateX(-50%);background:var(--paper);padding:0 8px;font:600 13px/20px var(--mono);color:var(--cobalt);z-index:1}
.steps li::after{content:"";position:absolute;left:0;right:22px;top:0;height:24px;
  background:
    linear-gradient(var(--cobalt),var(--cobalt)) 0 12px/100% 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 0/1px 24px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/1px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 4L8 1v6z' fill='%232A43F0'/%3E%3C/svg%3E") 1px 8px/8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8 4L0 1v6z' fill='%232A43F0'/%3E%3C/svg%3E") calc(100% - 1px) 8px/8px 8px no-repeat}
.steps h3{font-size:20px;font-weight:800;margin-bottom:8px}
.steps p{font-size:15.5px;color:var(--ink-2)}

/* realizacje */
.figure{margin:0}
.frame{border:1px solid var(--ink);padding:44px 28px 28px;position:relative;background:var(--paper)}
.frame::before{content:"DETAL " attr(data-detal);position:absolute;top:10px;left:12px;font:600 11px var(--mono);letter-spacing:.08em}
.frame::after{content:"SKALA 1:2";position:absolute;top:10px;right:12px;font:500 11px var(--mono);color:var(--faint)}
.frame[data-skala]::after{content:"SKALA " attr(data-skala)}
.frame svg,.frame img{display:block;width:100%;height:auto}
.figure figcaption{font:400 12.5px/1.5 var(--mono);color:var(--muted);margin-top:10px}
.kv{border-collapse:collapse;width:100%;margin:24px 0;font-size:15px}
.kv th,.kv td{text-align:left;padding:10px 0;border-top:1px solid var(--fine)}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:1px solid var(--fine)}
.kv th{font-weight:400;color:var(--muted)}
.kv td{font:500 15px var(--mono);text-align:right}
.all a::after{content:" \2192"}
/* realizacje na stronie glownej: karty jak na blogu, wspolne linie jak pola arkusza */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.cards li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}
.card{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px 20px 22px;text-decoration:none;color:var(--ink)}
.card .frame{display:block;padding:34px 18px 18px;margin-bottom:6px}
.card .meta{font:500 12.5px var(--mono);color:var(--muted)}
.card .no{color:var(--cobalt)}
.card .t{font:800 21px/1.2 var(--display);letter-spacing:-.01em}
.card .d{font-size:15.5px;color:var(--ink-2)}
.card .go{margin-top:auto;padding-top:6px;font:500 13px var(--mono)}
.card .go::after{content:" \2192"}
.card:hover .t{color:var(--cobalt)}
.card:hover .frame{border-color:var(--cobalt)}
.card:hover .go{text-decoration:underline}
/* farma: blok na koncu uslug */
.farm{margin-top:56px;border:1px solid var(--ink)}
.farm-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.farm-plan{margin:0;padding:22px;border-right:1px solid var(--ink);display:flex;align-items:center;background:var(--wash)}
.farm-plan img{display:block;width:100%;height:auto}
.farm-info{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px}
.farm-info h3{font-size:22px;font-weight:800;line-height:1.15}
.farm-info p{font-size:16px;color:var(--ink-2)}
.stats.farm-stats{grid-column:1/-1;margin:0;border-top:0;border-bottom:1px solid var(--ink);grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.farm-stats div{padding:16px 24px 18px}
.reg{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.reg li{border-bottom:1px solid var(--fine)}
.reg li:last-child{border-bottom-color:var(--ink)}
.reg a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.2fr) auto;column-gap:28px;align-items:baseline;padding:20px 0;text-decoration:none;color:var(--ink)}
.reg .no{font:500 13px var(--mono);color:var(--cobalt)}
.reg .t{font:800 19px/1.25 var(--display);letter-spacing:-.005em}
.reg .d{font-size:15.5px;color:var(--ink-2)}
.reg .go{font:500 13px var(--mono);white-space:nowrap}
.reg .go::after{content:" \2192"}
.reg a:hover .t{color:var(--cobalt)}
.reg a:hover .go{text-decoration:underline}
.all{margin-top:24px;font:500 13.5px var(--mono)}
.all a{text-decoration:none}
.all a:hover{text-decoration:underline}

/* materialy */
.tbl.mats{width:100%;border-collapse:collapse;font-size:16px}
.mats th{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
.mats td{padding:16px 16px 16px 0;border-bottom:1px solid var(--fine);vertical-align:top;color:var(--ink-2)}
.mats td.mono{font:500 14px var(--mono);color:var(--muted);white-space:nowrap;width:110px}
.mats td:first-child{font-weight:600;color:var(--ink);width:30%}
.mats tr:last-child td{border-bottom:1px solid var(--ink)}

/* ---------- wycena ---------- */
main > section#wycena{display:block}
.quote{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--pad);align-items:start}
.quote .sec-title{position:static;margin-bottom:22px}
.quote-side{position:sticky;top:96px}
.quote-side .lead{font-size:19px;margin-bottom:26px}
.quote-side .balls li{padding:11px 0 11px 26px;border-top:1px solid var(--fine);position:relative;font-size:15.5px}
.quote-side .balls li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:6px;border-left:1.5px solid var(--cobalt);border-bottom:1.5px solid var(--cobalt);transform:rotate(-45deg)}
.construction{margin:28px 0 22px;padding:16px 18px;border:1px dashed var(--ink);font-size:15px;color:var(--ink-2)}
.construction .stripes{display:none}
.construction b{font:600 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cobalt)}
.direct{font-size:15px;color:var(--muted)}
.direct a{font-family:var(--mono);color:var(--ink)}

.form-win{border:1px solid var(--ink)}
.form-win .win-title{font-size:12.5px;padding:12px 18px}
.form-win .win-title::after{content:"KARTA 01";color:var(--faint)}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:8px 26px 26px;counter-reset:fs}
.form fieldset{border:0;margin:0;padding:22px 0 26px;border-bottom:1px solid var(--fine);min-width:0}
.form legend{float:left;width:100%;padding:0;margin-bottom:18px;font:800 18px/1.2 var(--display);display:flex;align-items:baseline;gap:12px}
.form legend::before{counter-increment:fs;content:counter(fs) ".";font:600 13px var(--mono);color:var(--cobalt)}
.form fieldset > *{clear:both}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:16px}
.field label,.field .lbl{font-size:14px;font-weight:600;color:var(--ink)}
.field .opt{font-weight:400;color:var(--faint)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--faint);border-radius:0;padding:11px 12px;width:100%;min-width:0}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cobalt);outline-offset:-1px;border-color:var(--cobalt)}
.field .hint{font-size:13px;color:var(--muted)}
.field .err{display:none;font-size:13px;color:var(--bad)}
.field[aria-invalid=true] .err{display:block}
.field[aria-invalid=true] input:not([type=checkbox]),.field[aria-invalid=true] textarea{border-color:var(--bad)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
.radios,.checks{display:flex;flex-wrap:wrap;gap:8px}
.radios label,.checks label{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--faint);font-weight:400;font-size:15px;cursor:pointer}
.radios label:has(input:checked),.checks label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.radios input,.checks input,.consent input{accent-color:var(--cobalt);width:16px;height:16px;margin:0}
.consent-wrap{margin:22px 0 4px}
.field .consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{margin-top:2px;flex:0 0 auto}
.consent-wrap[aria-invalid=true] .consent{color:var(--bad)}
.consent-wrap .err{margin-left:27px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.submit-row .note-s{margin-right:auto;font:400 12.5px var(--mono);color:var(--muted)}
.status{display:none;margin-top:16px;padding:12px 14px;font-size:15px;border:1px solid}
.status.ok{display:block;color:var(--signal);border-color:var(--signal)}
.status.bad{display:block;color:var(--bad);border-color:var(--bad)}
.done{display:none;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 0 6px}
.done .ok-ico{width:40px;height:40px;border:1.5px solid var(--cobalt);border-radius:50%;color:var(--cobalt);display:flex;align-items:center;justify-content:center;font-size:18px}
.done h3{font-size:26px;font-weight:800}
.done p{color:var(--ink-2)}
.form.sent > :not(.done){display:none}
.form.sent .done{display:flex}

/* ---------- FAQ jako uwagi ---------- */
.faq{border-top:1px solid var(--ink);counter-reset:q}
.faq details{border-bottom:1px solid var(--fine)}
.faq details:last-child{border-bottom-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:baseline;padding:20px 0;font:700 19px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{counter-increment:q;content:counter(q) ".";font:500 13px var(--mono);color:var(--muted)}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--cobalt);text-align:right}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--cobalt)}
.faq details p{padding:0 24px 22px 44px;color:var(--ink-2);max-width:72ch}

/* ---------- stopka: tabliczka rysunkowa ---------- */
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));grid-template-areas:"brand a d c" "brand k k c" "l l l s";font-size:14px}
.foot > *,.tb > div{margin:0;padding:16px 18px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.tb{display:contents}
.fb-brand{grid-area:brand}
.fb-brand img{height:30px;width:auto;display:block;margin-bottom:12px}
.fb-brand p{color:var(--ink-2);max-width:34ch}
.tb-a{grid-area:a}.tb-d{grid-area:d}.tb-k{grid-area:k}
.tb dt,.counter .lbl{display:block;font:500 10.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.tb dd{margin:0;font:500 14.5px var(--mono)}
.counter{grid-area:c;border-right:0!important}
.counter .digits{font:500 26px/1 var(--mono);letter-spacing:.04em;color:var(--cobalt);font-variant-numeric:tabular-nums}
.links{grid-area:l;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;border-bottom:0!important}
.links .sep{display:none}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline}
.foot .small{grid-area:s;border-right:0!important;border-bottom:0!important;font:400 12px/1.5 var(--mono);color:var(--muted);align-self:stretch}

/* ---------- podstrony realizacji: wykaz i studium przypadku ---------- */
.page-head,.art-head{padding:40px var(--pad) 64px;border-bottom:1px solid var(--ink)}
.crumbs{font:500 12.5px/1.4 var(--mono);color:var(--muted);margin-bottom:44px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cobalt);text-decoration:underline}
.page-head h1{font-weight:800;font-size:clamp(44px,7.6vw,108px);line-height:1.02;letter-spacing:-.04em;margin-bottom:32px}
.page-head .sub,.art-head .sub{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:52ch}
.art-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--pad);align-items:start}
.art-head > *{grid-column:1/-1}
.art-head .meta{font:500 12.5px var(--mono);color:var(--muted);margin-bottom:14px}
.art-head h1{font-weight:800;font-size:clamp(38px,5.6vw,80px);line-height:1.03;letter-spacing:-.035em;max-width:16ch;margin-bottom:48px}
.art-head .sub,.art-head .kv,.art-head .stats{grid-column:1}
.art-head .kv{margin:32px 0 0}
/* farma: liczby pod leadem i rysunkiem, na pelna szerokosc */
.farm-head .figure{grid-row:4}
.art-head.farm-head .stats.farm-stats{grid-column:1/-1;margin:48px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.art-head .stats.farm-stats div{padding:16px 20px 18px 0}
.art-head .stats.farm-stats div+div{padding-left:20px}
.art-head .figure{grid-column:2;grid-row:4/span 2}
.prose{max-width:66ch}
.prose p{font-size:17px;color:var(--ink-2)}
.prose p+p{margin-top:14px}
.steps + .prose{margin-top:48px}
.prose + .steps{margin-top:40px}
.ticks{margin-top:32px;max-width:66ch;border-bottom:1px solid var(--fine)}
.ticks li{padding:12px 0 12px 28px;border-top:1px solid var(--fine);position:relative;font-size:16.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:6px;border-left:1.5px solid var(--cobalt);border-bottom:1.5px solid var(--cobalt);transform:rotate(-45deg)}
.sec-fig{margin-top:48px;max-width:620px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:40px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stats div{padding:16px 20px 18px 0}
.stats div+div{padding-left:20px;border-left:1px solid var(--fine)}
.stats dt{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stats dd{margin:8px 0 0;font:800 34px/1.1 var(--display);letter-spacing:-.02em}
.stats dd.s{font:400 14.5px/1.4 var(--body);color:var(--muted);margin-top:4px;letter-spacing:0}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.reg-full a{grid-template-columns:220px minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:28px 0}
.reg-full .th{display:block;border:1px solid var(--ink);background:var(--paper);padding:10px}
.reg-full .th img{display:block;width:100%;height:auto}
.reg-full .body{display:flex;flex-direction:column;gap:8px}
.reg-full .meta{font:500 12.5px var(--mono);color:var(--muted)}
.reg-full .t{font-size:24px;line-height:1.15;letter-spacing:-.01em}
.reg-full a:hover .th{border-color:var(--cobalt)}
.pager{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.pager a{display:flex;flex-direction:column;gap:6px;padding:24px var(--pad);text-decoration:none;color:var(--ink)}
.pager a+a{border-left:1px solid var(--ink)}
.pager .l{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pager .t{font:800 18px/1.25 var(--display)}
.pager a:hover .t{color:var(--cobalt)}
.pager .mid{text-align:center}
.pager .next{text-align:right}

/* galeria zdjec (farma): pole z krzyzem jak puste miejsce na rysunku */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.gallery .frame{padding:34px 14px 14px}
.ph{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:
  linear-gradient(to top right,transparent calc(50% - .6px),var(--fine) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
  linear-gradient(to bottom right,transparent calc(50% - .6px),var(--fine) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),var(--wash)}
.ph::before{content:"ZDJĘCIE";font:500 11px var(--mono);letter-spacing:.08em;color:var(--muted);background:var(--wash);padding:2px 6px}

/* strona tekstowa */
.doc{padding:56px var(--pad) 80px;max-width:820px}
.doc h1{font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
.doc h2{font-size:21px;font-weight:800;margin:36px 0 10px}
.doc p,.doc li{color:var(--ink-2)}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
.doc .todo{background:#FFF6D6;font-family:var(--mono);font-size:14px;padding:0 4px}
.doc .balls{margin:12px 0 16px}
.doc .balls li{position:relative;padding-left:22px;margin:8px 0}
.doc .balls li::before{content:"";position:absolute;left:4px;top:.68em;width:6px;height:6px;background:var(--cobalt)}

/* ---------- mniejsze ekrany ---------- */
@media (max-width:1300px){.page::before,.page::after{display:none}}
@media (max-width:1000px){
  .nav ul{gap:18px}
  .nav li:nth-child(6){display:none}
}
@media (max-width:900px){
  .page{margin:0;border-left:0;border-right:0;border-top:0}
  .site-head{position:static;height:auto;flex-wrap:wrap;gap:12px 16px;padding-top:14px;padding-bottom:14px}
  .nav{order:4;margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .nav ul{gap:18px;width:max-content}
  .nav li:nth-child(6){display:list-item}
  .mode-switch{margin-left:auto}
  .hero{grid-template-columns:minmax(0,1fr);padding-top:44px;padding-bottom:52px}
  .hero-heading{margin-bottom:28px}
  .viewer{grid-column:1;grid-row:auto;margin-top:36px}
  main > section:not(.hero){grid-template-columns:minmax(0,1fr);padding-top:52px;padding-bottom:60px}
  main > section:not(.hero) > :not(.sec-title){grid-column:1}
  .sec-title{position:static;grid-row:auto;margin-bottom:22px;display:flex;align-items:center;gap:14px}
  .sec-title::before{margin:0;flex:0 0 auto}
  .lead{margin-bottom:28px}
  .svc thead{display:none}
  .svc td{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .svc td > p,.svc td > .more{grid-column:2}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .quote{grid-template-columns:minmax(0,1fr)}
  .farm-body{grid-template-columns:minmax(0,1fr)}
  .farm-plan{border-right:0;border-bottom:1px solid var(--ink)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reg a{grid-template-columns:40px minmax(0,1fr);row-gap:6px}
  .reg .d,.reg .go{grid-column:2}
  .reg-full a{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .reg-full .th{max-width:320px}
  .reg-full .body,.reg-full .go{grid-column:1}
  .art-head{grid-template-columns:minmax(0,1fr)}
  .art-head .sub,.art-head .kv,.art-head .figure{grid-column:1}
  .art-head .figure{grid-row:auto;margin-top:36px}
  .crumbs{margin-bottom:28px}
  .art-head h1{margin-bottom:28px}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a+a{border-left:0;border-top:1px solid var(--ink)}
  .pager .mid,.pager .next{text-align:left}
  .quote-side{position:static;margin-bottom:32px}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"brand brand" "a d" "k k" "c c" "l l" "s s"}
  .foot > *,.tb > div{border-right:0}
  .tb-a{border-right:1px solid var(--ink)!important}
}
@media (max-width:560px){
  .cols2,.grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats div+div{padding-left:0;border-left:0;border-top:1px solid var(--fine)}
  .stats.farm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats.farm-stats div{padding:14px 12px}
  .stats.farm-stats div+div{border-top:0;border-left:1px solid var(--fine)}
  .art-head .stats.farm-stats div{padding:14px 10px 14px 0}
  .art-head .stats.farm-stats div+div{padding-left:10px}
  .farm-stats dd{font-size:28px}
  .cards,.gallery{grid-template-columns:minmax(0,1fr)}
  .form{padding:4px 16px 20px}
  .submit-row .note-s{width:100%}
  .faq summary{grid-template-columns:32px minmax(0,1fr) 20px;font-size:17.5px}
  .faq details p{padding-left:32px;padding-right:0}
  .hero .ctas .btn{flex:1 1 auto;padding-left:16px;padding-right:16px}
}

/* Pasek zgody na cookies (Google Analytics + Google Ads), src/components/CookieConsent.astro */
.cookie-bar{position:fixed;left:16px;bottom:16px;z-index:60;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);border:1px solid var(--ink)}
.cookie-bar .cookie-body{padding:16px 18px 18px}
.cookie-bar p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.cookie-bar .cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-bar .btn{padding:11px 18px}
.cookie-bar .btn[hidden]{display:none}
.cookie-prefs{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px}
.cookie-prefs legend{padding:0;margin:0 0 8px;font:500 12.5px/1.3 var(--mono);color:var(--ink)}
.cookie-prefs label{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border:1px solid var(--faint);cursor:pointer}
.cookie-prefs label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cookie-prefs input{accent-color:var(--cobalt);width:16px;height:16px;margin:2px 0 0;flex:0 0 auto}
.cookie-prefs b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.cookie-prefs small{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:2px}
@media (max-width:600px){.cookie-bar{right:16px;max-width:none}.cookie-bar .btn{flex:1 1 auto;padding-left:14px;padding-right:14px}}

/* ---------- wpis na blogu: tresc + boczny panel (src/layouts/BlogPost.astro) ---------- */
.post-head .post-card{grid-column:2;grid-row:4;margin:6px 0 0;max-width:440px;justify-self:end}
.post-head .post-card td{white-space:normal}
.post-head:has(.figure) .post-card{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;margin-top:32px}
.post-head{padding-bottom:56px}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:calc(var(--pad) * 1.5);align-items:start;padding:56px var(--pad) 88px;border-bottom:1px solid var(--ink)}
.post-body{max-width:68ch;--anchor-offset:92px}
.post-body > :first-child{margin-top:0}
.post-body h2{font:800 clamp(24px,2.4vw,30px)/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
.post-body h3{font:800 20px/1.3 var(--display);color:var(--ink)}
.post-body a{color:var(--cobalt)}
.post-body table{border-color:var(--fine)}
.post-body th{font:500 12.5px var(--mono);color:var(--muted);background:var(--wash)}
.post-body th,.post-body td{border-color:var(--fine)!important}
.post-aside{align-self:stretch;display:flex;flex-direction:column;gap:20px}
.aside-sticky{position:sticky;top:92px;display:grid;gap:20px;max-height:calc(100vh - 112px);overflow-y:auto}
.post-aside .win{border:1px solid var(--ink);background:var(--paper)}
.post-aside .win-title{padding:10px 16px}
.post-aside .kv{margin:0;font-size:14px}
.post-aside .kv th,.post-aside .kv td{padding:9px 16px}
.post-aside .kv tr:first-child th,.post-aside .kv tr:first-child td{border-top:0}
.post-aside .kv tr:last-child th,.post-aside .kv tr:last-child td{border-bottom:0}
.post-aside .kv td{font-size:13.5px;white-space:normal}
.post-toc ol{list-style:none;margin:0;padding:6px 0;counter-reset:toc}
.post-toc li{counter-increment:toc}
.post-toc a{display:grid;grid-template-columns:28px minmax(0,1fr);padding:7px 16px;font-size:14px;line-height:1.4;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font:500 12px/1.6 var(--mono);color:var(--faint)}
.post-toc a:hover{color:var(--cobalt)}
.post-toc a[aria-current]{color:var(--ink);border-left-color:var(--cobalt);background:var(--wash)}
.post-toc a[aria-current]::before{color:var(--cobalt)}
.aside-cta .aside-body{padding:16px}
.aside-cta p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.aside-cta .btn{width:100%;padding:13px 18px}
@media (max-width:1000px){
  .post-head .post-card{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;margin-top:32px}
  .post-layout{grid-template-columns:minmax(0,1fr);padding-top:40px}
  .post-aside{align-self:start;display:grid;order:-1;margin-bottom:40px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
  .aside-sticky{position:static;max-height:none;overflow:visible}
  .aside-cta{display:none}
}

/* Hero: glowna fraza SEO jako pierwsza, mniejsza linia H1 (src/components/home/Hero.astro) */
.hero-heading .kicker{display:block;font:500 15px/1.4 var(--mono);letter-spacing:.01em;color:var(--muted);margin-bottom:22px}
.hero-heading{max-width:15ch}
.hero .sub p + p{margin-top:12px}