/* =====================================================================
   TWINMAX — tokens.css  (właściciel: A)
   Jedyne źródło kolorów, krojów, kegli, siatki i komponentów.
   W stronach: zero hex-ów i zero font-family poza tym plikiem.
   Fonty (w <head> każdej strony):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   Breakpointy: 900px (tablet/zwijanie siatki), 600px (telefon, cel 390).
   ===================================================================== */

/* ---------- 1. TOKENY ---------- */
:root{
  /* PŁASZCZYZNY — podstawa jasna (arkusz techniczny); ciemny tylko navy, max 1–2 sekcje/stronę */
  --paper:#F2F3F2;          /* główne tło: arkusz */
  --sheet:#FBFBFA;          /* jaśniejszy arkusz: karty, tabele, sekcje naprzemienne */
  --steel:#E3E7EA;          /* chłodna szarość: pasy, tło zdjęć */
  --navy:#0B2A4A;           /* marka: jedyny ciemny kolor (formularz, stopka), tekst nagłówków, linie rysunku */
  /* akcent */
  --red:#C8102E;            /* tylko główne CTA, linie wymiarowe, zaślepki */
  --red-l:#FF4560;          /* to samo na navy */
  /* tekst */
  --text:#0E1B2A;
  --head:var(--navy);       /* główny ton nagłówków */
  --mute:#5D6B79;           /* opisy */
  --tone2:#7C8FA3;          /* drugi ton nagłówków na jasnym */
  --mute-d:#9DB0C3;         /* opisy na navy */
  --tone2-d:#8FA9C4;        /* drugi ton na navy */
  --on-dark:#FFFFFF;
  --on-dark-2:#C5D2DE;
  /* linie */
  --hair:rgba(11,42,74,.14);
  --hair-2:rgba(11,42,74,.07);
  --rule:var(--navy);
  --hair-d:rgba(255,255,255,.16);
  --rule-d:rgba(255,255,255,.45);
  /* rysunek techniczny: navy na jasnym, biel na navy */
  --dwg:var(--navy); --dwg-hi:var(--navy); --dwg-dim:var(--red);

  /* kroje */
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wd-display:110%;        /* font-stretch nagłówków */
  --wd-text:100%;

  /* skala kegli (desktop; niżej nadpisania 1180 / 900 / 600) */
  --fs-h1:80px;   --lh-h1:.98;   /* hero: H1+CTA+role+liczby mieszczą się w 1440×900 */
  --fs-d1:64px;   /* zdanie-manifest */
  --fs-h2:56px;   --lh-h2:1.02;
  --fs-h3:28px;
  --fs-h4:21px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-sm:14.5px;
  --fs-mono:12px;
  --fs-mono-s:11px;
  --fs-stat:60px;
  --fs-price:32px;          /* cena na stronie głównej: max 32 px */

  /* odstępy */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px; --sp-7:128px;
  --sec:var(--sp-7);

  /* siatka */
  --max:1440px; --margin:64px; --gutter:24px; --cols:12;
  --header-h:84px; --util-h:36px;
  --tap:44px;
}

/* ---------- 2. BAZA ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font:400 var(--fs-body)/1.55 var(--sans);font-stretch:var(--wd-text);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red-l);outline-offset:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.g12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
/* pomocnicze rozpięcia kolumn */
.c-1-13{grid-column:1/13}.c-1-7{grid-column:1/7}.c-1-8{grid-column:1/8}.c-1-6{grid-column:1/6}.c-1-5{grid-column:1/5}
.c-7-13{grid-column:7/13}.c-8-13{grid-column:8/13}.c-9-13{grid-column:9/13}.c-5-13{grid-column:5/13}

/* płaszczyzny: paper (domyślna) / sheet / steel — jasne; navy — rzadki akcent (formularz, stopka) */
.plane-paper{background:var(--paper);color:var(--text)}
.plane-sheet{background:var(--sheet);color:var(--text)}
.plane-steel{background:var(--steel);color:var(--text)}
.plane-navy{background:var(--navy);color:var(--on-dark);--dwg:var(--on-dark);--dwg-hi:var(--on-dark);--dwg-dim:var(--red-l);--rule:var(--rule-d);--hair:var(--hair-d)}
/* granice sekcji jak na arkuszu */
.ruled{border-top:1px solid var(--hair)}
.sec{padding:var(--sec) 0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-bottom:var(--sp-5)}
.sec-head .eyebrow{grid-column:1/13;margin-bottom:var(--sp-3)}
.sec-head .h2{grid-column:1/9}
.sec-head .lead{grid-column:9/13}
.grid-bg{background-image:
  repeating-linear-gradient(90deg,var(--hair-2) 0 1px,transparent 1px 120px),
  repeating-linear-gradient(0deg,var(--hair-2) 0 1px,transparent 1px 120px)}

/* ---------- 3. TYPOGRAFIA ---------- */
.h1,.h2,.h3,.h4,.d1{color:var(--head);font-family:var(--sans);font-stretch:var(--wd-display);font-weight:600;letter-spacing:-.025em}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.h3{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em}
.h4{font-size:var(--fs-h4);line-height:1.2;letter-spacing:-.01em}
.d1{font-size:var(--fs-d1);line-height:1.06;font-weight:500}
/* dwutonowy nagłówek: <h2 class="h2">Główny ton. <em>Drugi ton.</em></h2> */
.h1 em,.h2 em,.h3 em,.d1 em{font-style:normal;font-weight:400;color:var(--tone2)}
.plane-navy :is(.h1,.h2,.h3,.h4,.d1){color:var(--on-dark)}
.plane-navy :is(.h1,.h2,.h3,.d1) em{color:var(--tone2-d)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--mute)}
.plane-navy .lead{color:var(--on-dark-2)}
.small{font-size:var(--fs-sm);line-height:1.55;color:var(--mute)}
.plane-navy .small{color:var(--mute-d)}
.mono{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.num{font-family:var(--sans);font-stretch:var(--wd-display);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* eyebrow-indeks: <div class="eyebrow"><b>[ 01 ]</b> Systemy</div> */
.eyebrow{display:flex;gap:14px;align-items:center;font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.eyebrow b{font-weight:500;color:var(--red)}
.plane-navy .eyebrow{color:var(--mute-d)}
.plane-navy .eyebrow b{color:var(--red-l)}

/* zaślepka: <span class="ph">[miasto]</span> */
.ph{font-family:var(--mono);font-size:.82em;font-weight:400;letter-spacing:0;text-transform:none;color:var(--red);border-bottom:1px dashed var(--red);white-space:nowrap}
.plane-navy .ph{color:var(--red-l);border-bottom-color:var(--red-l)}

/* ---------- 4. NAROŻNIKI-NAWIASY (logo jako system) ---------- */
/* .frame — narożnik lewy-górny w kolorze tekstu, prawy-dolny czerwony */
.frame{position:relative}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--navy);pointer-events:none}
.frame::before{left:-8px;top:-8px;border-right:0;border-bottom:0}
.frame::after{right:-8px;bottom:-8px;border-left:0;border-top:0;border-color:var(--red)}
.plane-navy .frame::before{border-color:var(--on-dark)}
.plane-navy .frame::after{border-color:var(--red-l)}
/* .frame--in — narożniki wewnątrz (np. na zdjęciu) */
.frame--in::before{left:16px;top:16px;border-color:var(--on-dark)}
.frame--in::after{right:16px;bottom:16px}

/* ---------- 5. LOGO ---------- */
.logo{position:relative;display:inline-block;color:var(--navy);font:700 25px/1 var(--sans);font-stretch:115%;letter-spacing:.02em;padding:9px 12px 8px 14px;white-space:nowrap}
.logo::before,.logo::after{content:"";position:absolute;width:13px;height:13px;border:2.5px solid currentColor}
.logo::before{left:0;top:0;border-right:0;border-bottom:0}
.logo::after{right:0;bottom:0;border-left:0;border-top:0;border-color:var(--red)}
.plane-navy .logo{color:var(--on-dark)}
.plane-navy .logo::after{border-color:var(--red-l)}

/* ---------- 6. GÓRNA LINIA + NAGŁÓWEK ---------- */
.util{background:var(--paper);border-bottom:1px solid var(--hair);color:var(--mute);font:400 var(--fs-mono-s)/1 var(--mono);letter-spacing:.06em}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:var(--util-h);gap:var(--sp-3)}
.util__l,.util__r{display:flex;align-items:center;white-space:nowrap}
.util span+span::before{content:"·";margin:0 12px;color:var(--tone2)}
.util b{color:var(--navy);font-weight:500}
.util .star{color:var(--navy)}

.site-header{background:var(--sheet);color:var(--navy);border-bottom:1px solid var(--rule);position:relative;z-index:5}
.site-header .wrap{display:flex;align-items:center;height:var(--header-h)}
.nav{display:flex;gap:30px;margin-left:56px;font-size:15px;font-weight:500;color:var(--text)}
.nav a{display:flex;align-items:center;min-height:var(--tap)}
.nav a:hover,.nav a[aria-current]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:28px}
.hd-tel{font-weight:600;font-size:15px;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.hd-tel small{display:block;font:400 var(--fs-mono-s)/1 var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin-bottom:5px}
.burger{display:none;width:var(--tap);height:var(--tap);border:1px solid var(--rule);background:none;cursor:pointer;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--navy)}
.burger::before{top:16px}.burger::after{bottom:16px}

/* ---------- 7. PRZYCISKI I LINKI ---------- */
/* Jeden .btn (czerwony) na ekran. Reszta: .btn--line albo .lnk. */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 24px;background:var(--red);color:var(--on-dark);font:600 15px/1.2 var(--sans);letter-spacing:.01em;border:0;border-radius:0;cursor:pointer;white-space:nowrap}
.btn i,.lnk i{font-style:normal;font-family:var(--mono)}
.btn--sm{min-height:var(--tap);padding:0 18px;font-size:14px}
.btn--lg{min-height:60px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn--line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.plane-navy .btn--line{color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--on-dark)}
.btn--light{background:var(--on-dark);color:var(--navy)}
.lnk{color:var(--navy);display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font:600 15px/1.2 var(--sans);border-bottom:1px solid currentColor;padding-top:12px;padding-bottom:6px}

/* ---------- 8. HERO (szkielet; rysunek w .hero__dwg) ---------- */
.hero{position:relative;overflow:hidden}
.hero>.wrap{position:relative;min-height:640px;padding-top:var(--sp-5);padding-bottom:var(--sp-4)}
.hero__txt{position:relative;z-index:1;max-width:900px}
.hero .h1{margin:var(--sp-3) 0 var(--sp-3)}
.hero .lead{max-width:540px}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3) 32px;align-items:center;margin-top:var(--sp-4)}
.hero__dwg{position:absolute;right:calc(-40px * min(100vw,var(--max)) / 1440px);top:16px;width:calc(680px * min(100vw,var(--max)) / 1440px);z-index:0;pointer-events:none}
.hero__note{position:absolute;right:var(--margin);bottom:var(--sp-3);z-index:1;font:400 var(--fs-mono-s)/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;border-top:1px solid var(--rule);padding-top:10px}
.hero__note b{color:var(--navy);font-weight:500}

/* „Kupujesz jako” — wejścia po rolach */
.roles{margin-top:36px;border-top:1px solid var(--rule);padding-top:14px;max-width:760px}
.roles__l{display:block;font:400 var(--fs-mono-s)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.roles__list{display:flex;flex-wrap:wrap;column-gap:32px}
.roles__list a{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-weight:600;font-size:16px;color:var(--navy)}
.roles__list a i{font-style:normal;font-family:var(--mono);color:var(--navy)}

/* ---------- 9. POLOSA LICZB (6 komórek) ---------- */
.stats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--sheet)}
.stats__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.stat{padding:28px 20px 30px 0;border-right:1px solid var(--hair)}
.stat+.stat{padding-left:24px}
.stat:last-child{border-right:0}
.stat__v{font-family:var(--sans);font-stretch:var(--wd-display);font-weight:500;font-size:var(--fs-stat);line-height:1;letter-spacing:-.04em;white-space:nowrap;color:var(--navy)}
.stat__v small{font-size:.42em;letter-spacing:-.01em;color:var(--tone2);margin-left:4px}
.stat__v sup{font:500 12px var(--mono);color:var(--red);vertical-align:2.6em;margin-left:2px;letter-spacing:0}
.stat__l{margin-top:12px;font:400 var(--fs-mono-s)/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.stat__l b{display:block;color:var(--text);font-weight:500}
.stats__fn{font:400 var(--fs-mono-s)/1.5 var(--mono);letter-spacing:.04em;color:var(--mute);padding:10px 0 12px}
.stats__fn b{color:var(--red);font-weight:500}

/* ---------- 10. TABELA SPECYFIKACJI ---------- */
/* <dl class="spec"><div><dt>Oczko</dt><dd>50–200 mm</dd></div>…</dl> */
.spec{font:400 13px/1.4 var(--mono);letter-spacing:.02em;border-top:1px solid var(--rule)}
.spec>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:var(--sp-2);padding:13px 0;border-bottom:1px solid var(--hair)}
.spec dt{color:var(--mute);text-transform:uppercase;font-size:var(--fs-mono-s);letter-spacing:.08em;padding-top:2px}
.spec{background:transparent}
.spec dd{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--text);letter-spacing:0}
.spec .spec__price dd{color:var(--navy);font-stretch:var(--wd-display);font-size:var(--fs-price);line-height:1;letter-spacing:-.03em}
.spec .spec__price dd small{display:block;margin-top:8px;font-size:14px;font-weight:400;color:var(--mute);letter-spacing:0}
.plane-navy .spec dt,.plane-navy .spec .spec__price dd small{color:var(--mute-d)}
.plane-navy .spec dd{color:var(--on-dark)}

/* ---------- 11. KARTA OBIEKTU (archiwum R-001) ---------- */
/* Zdjęcie w rozmiarze naturalnym: karta max 424 px. */
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,424px));justify-content:space-between;gap:var(--sp-5) var(--gutter)}
.ref{max-width:424px}
.ref__img{position:relative;aspect-ratio:424/254;overflow:hidden;background:var(--steel)}
.ref__img img{width:100%;height:100%;object-fit:cover}
.ref__tag{position:absolute;left:0;top:0;background:var(--sheet);color:var(--navy);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 9px}
.ref__head{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.ref__no{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.06em;color:var(--red)}
.ref__name{color:var(--navy);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.ref__meta{display:grid;grid-template-columns:64px 1fr;gap:6px 12px;margin-top:12px;font:400 12.5px/1.45 var(--mono)}
.ref__meta dt{color:var(--mute);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:2px}
.ref__meta dd{color:var(--text)}

/* licznik nad siatką: <div class="count"><span class="num">500+</span> …</div> */
.count{display:flex;align-items:flex-end;gap:var(--sp-3)}
.count .num{font-size:104px;line-height:.8;color:var(--navy)}


/* ---------- 12. KARTA KRS + REJESTR DOKUMENTÓW + OPINIA ---------- */
.krs{background:var(--sheet);color:var(--text);border:1px solid var(--navy);padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.krs__t{color:var(--navy);font-stretch:var(--wd-display);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em;margin:12px 0 var(--sp-3)}
.krs dl>div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--hair);font:400 13.5px/1.5 var(--mono)}
.krs dt{color:var(--mute);text-transform:uppercase;font-size:var(--fs-mono-s);letter-spacing:.08em;padding-top:2px}
.krs__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);border-top:1px solid var(--rule);margin-top:4px;padding-top:6px;font-size:var(--fs-sm);color:var(--mute)}

.reg{border-top:1px solid var(--rule)}
.reg a{display:grid;grid-template-columns:56px 1fr auto 24px;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);min-height:var(--tap)}
.reg__c{font:500 var(--fs-mono)/1 var(--mono);color:var(--mute);letter-spacing:.06em}
.reg__n{color:var(--navy);font-weight:600;font-size:18px;line-height:1.3}
.reg__n small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--mute);margin-top:3px}
.reg__f{font:500 10.5px/1 var(--mono);letter-spacing:.08em;border:1px solid var(--hair);padding:5px 7px;color:var(--mute)}
.reg__a{font-family:var(--mono);text-align:right}

.review{border-top:1px solid var(--rule);padding-top:var(--sp-3)}
.review__stars{color:var(--navy);letter-spacing:.15em;font-size:14px}
.review blockquote{font-size:18px;line-height:1.45;margin:14px 0 14px}
.review cite{font:normal 400 var(--fs-mono-s)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.score{font-stretch:var(--wd-display);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--navy)}

/* ---------- 13. FORMULARZ (na .plane-navy) ---------- */
.form{border:1px solid var(--hair-d);padding:var(--sp-4)}
.form__hd{display:flex;justify-content:space-between;gap:var(--sp-2);font:500 var(--fs-mono)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d);padding-bottom:20px;border-bottom:1px solid var(--hair-d)}
.form__hd b{color:var(--on-dark);font-weight:500}
.fgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.field{display:block;padding-top:20px}
.field--w{grid-column:1/3}
.field__l{display:block;font:400 var(--fs-mono-s)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d);margin-bottom:10px}
.field__l b{color:var(--red-l);font-weight:500}
.input{width:100%;min-height:48px;background:transparent;border:0;border-bottom:1px solid var(--rule-d);border-radius:0;padding:8px 0;font-size:18px;color:var(--on-dark);outline:0;appearance:none}
.input::placeholder{color:var(--mute-d);opacity:.8}
.input:focus{border-bottom-color:var(--on-dark)}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--mute-d) 50%),linear-gradient(-45deg,transparent 50%,var(--mute-d) 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
select.input option{color:var(--text)}
/* wybór roli: radio jako segmenty */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border:1px solid var(--rule-d);font-weight:500;font-size:14px;color:var(--on-dark-2);cursor:pointer}
.seg input:checked+label{background:var(--on-dark);color:var(--navy);border-color:var(--on-dark)}
.seg input:focus-visible+label{outline:2px solid var(--red-l);outline-offset:2px}
/* załącznik */
.form .field__l,.form .input{}
.file{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);border:1px dashed var(--rule-d);padding:18px 20px;min-height:60px;cursor:pointer;color:var(--on-dark-2)}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file b{color:var(--on-dark);font-weight:600}
.file span{font:400 var(--fs-mono-s)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute-d);text-align:right}
.form .btn{margin-top:var(--sp-3)}
.form__fine{margin-top:14px;font:400 var(--fs-mono-s)/1.5 var(--mono);letter-spacing:.03em;color:var(--mute-d)}
/* kroki zamówienia (obok formularza) */
.steps{border-top:1px solid var(--hair-d)}
.steps li{list-style:none;display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair-d)}
.steps__n{font:500 var(--fs-mono)/1 var(--mono);color:var(--red-l)}
.steps__t{font-weight:600;font-size:17px}
.steps__v{font:400 var(--fs-mono)/1 var(--mono);letter-spacing:.06em;color:var(--mute-d);white-space:nowrap}
.contact-line{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4)}
.contact-line a{display:block;min-height:var(--tap)}
.contact-line small{display:block;font:400 var(--fs-mono-s)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d);margin-bottom:8px}
.contact-line strong{font-stretch:var(--wd-display);font-weight:600;font-size:24px;letter-spacing:-.01em}

/* ---------- 14. STOPKA z gigantycznym [TWINMAX] ---------- */
/* stopka jasna (arkusz); ciemny akcent strony = formularz */
.site-footer{background:var(--sheet);color:var(--text);padding:var(--sp-6) 0 var(--sp-4);overflow:hidden;border-top:1px solid var(--navy)}
.ft-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;gap:var(--gutter);padding-bottom:var(--sp-5)}
.ft-cols h5{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.ft-cols a,.ft-cols p{display:block;font-size:15px;line-height:1.9}
.ft-lead{font-stretch:var(--wd-display);font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:var(--navy);max-width:340px}
.giant{position:relative;display:block;color:var(--navy);font:700 calc((min(100vw,var(--max)) - 2 * var(--margin)) * .186)/.8 var(--sans);font-stretch:100%;letter-spacing:-.01em;text-align:center;white-space:nowrap;padding:.2em .1em .18em}
.giant::before,.giant::after{content:"";position:absolute;width:.28em;height:.28em;border:.036em solid var(--navy)}
.giant::before{left:0;top:0;border-right:0;border-bottom:0}
.giant::after{right:0;bottom:0;border-left:0;border-top:0;border-color:var(--red)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);border-top:1px solid var(--rule);margin-top:var(--sp-5);padding-top:var(--sp-3);font:400 var(--fs-mono-s)/1.4 var(--mono);letter-spacing:.06em;color:var(--mute)}

/* ---------- 15. RESPONSYWNOŚĆ ---------- */
@media (max-width:1180px){
  :root{--fs-h1:80px;--fs-h2:48px;--fs-d1:52px;--fs-stat:48px}
  .nav{gap:20px;margin-left:32px;font-size:14px}
  .stat+.stat{padding-left:16px}
}
@media (max-width:900px){
  :root{--margin:32px;--sec:var(--sp-6);--fs-h1:64px;--fs-h2:42px;--fs-d1:44px}
  .nav,.hd-r .btn,.util__r{display:none}
  .burger{display:block}
  .hd-r{gap:16px}
  .g12>*{grid-column:1/-1}
  .sec-head .h2,.sec-head .lead{grid-column:1/13}
  .sec-head .lead{margin-top:var(--sp-3)}
  .stats__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{border-bottom:1px solid var(--hair)}
  .stat:nth-child(3n){border-right:0}
  .stat:nth-child(3n+1){padding-left:0}
  .refs{grid-template-columns:repeat(2,minmax(0,424px))}
  .hero>.wrap{display:flex;flex-direction:column}
  .hero__dwg{position:relative;left:auto;top:auto;width:100%;max-width:640px;margin:var(--sp-4) 0 0;order:2}
  .hero__note{position:static;text-align:left;margin-top:var(--sp-2);order:3}
  .ft-cols{grid-template-columns:1fr 1fr}
  .ft-cols>:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  :root{--margin:20px;--gutter:16px;--sec:72px;--header-h:64px;--util-h:32px;
        --fs-h1:46px;--lh-h1:1;--fs-h2:34px;--fs-d1:30px;--fs-h3:23px;--fs-h4:19px;
        --fs-lead:17px;--fs-body:16px;--fs-stat:38px;--fs-price:28px}
  .util{font-size:10px;letter-spacing:.03em}
  .util span+span::before{margin:0 7px}
  .logo{font-size:20px;padding:8px 10px 7px 12px}
  .logo::before,.logo::after{width:11px;height:11px;border-width:2px}
  .hd-tel small{display:none}
  .hd-tel{font-size:14px}
  .h1{letter-spacing:-.03em}
  .hero>.wrap{min-height:0;padding-top:var(--sp-4)}
  .hero__cta{flex-direction:column;align-items:stretch;gap:var(--sp-1)}
  .hero__cta .btn{width:100%}
  .hero__cta .lnk{align-self:flex-start}
  .roles__list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-2)}
  .roles__list a{font-size:14px;gap:6px;justify-self:start}
  .stats__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat,.stat+.stat{padding:20px 12px 20px 0}
  .stat:nth-child(3n){border-right:1px solid var(--hair)}
  .stat:nth-child(odd){padding-left:0}
  .stat:nth-child(2n){border-right:0;padding-left:16px}
  .refs{grid-template-columns:1fr;gap:var(--sp-4)}
  .ref{max-width:none}
  .sec-head{margin-bottom:var(--sp-4)}
  .spec>div{grid-template-columns:1fr;gap:4px}
  .reg a{grid-template-columns:44px 1fr 20px}
  .reg__f{display:none}
  .krs{padding:var(--sp-3) 20px}
  .krs dl>div{grid-template-columns:84px 1fr}
  .krs__foot{flex-direction:column;align-items:flex-start}
  .form{padding:var(--sp-3) 0;border-left:0;border-right:0;border-bottom:0}
  .fgrid{grid-template-columns:1fr}
  .field--w{grid-column:1}
  .seg{display:grid;grid-template-columns:1fr 1fr}
  .seg label{justify-content:center}
  .file{flex-direction:column;align-items:flex-start}
  .file span{text-align:left}
  .steps li{grid-template-columns:36px 1fr}
  .steps__v{grid-column:2}
  .ft-cols{grid-template-columns:1fr 1fr;row-gap:var(--sp-4)}
  .count .num{font-size:72px}
}

/* ---------- 16. RYSUNEK TECHNICZNY (klasy dla inline SVG) ---------- */
/* Domyślnie navy na jasnym arkuszu; w .plane-navy automatycznie białe linie. Czerwone = wymiary. */
.dwg line,.dwg polyline,.dwg path{fill:none;stroke-linecap:round}
.dwg .dw-t{stroke:var(--dwg);stroke-width:.75;opacity:.5}
.dwg .dw-b{stroke:var(--dwg);stroke-width:.6;opacity:.18}
.dwg .dw-e{stroke:var(--dwg-hi);stroke-width:1.2}
.dwg .dw-hi{stroke:var(--dwg-hi);stroke-width:.9}
.dwg .dw-hib{stroke:var(--dwg-hi);stroke-width:.7;opacity:.35}
.dwg .dw-acc{stroke:var(--dwg-dim);stroke-width:1.5}
.dwg .dw-rod{stroke:var(--dwg);stroke-width:.8;opacity:.55}
.dwg .dw-anchor{fill:var(--dwg);opacity:.7}
.dwg .dw-car{stroke:var(--dwg-hi);stroke-width:1.2;opacity:.75}
.dwg .dw-car2{stroke:var(--dwg-hi);stroke-width:.7;opacity:.3}
.dwg .dw-hole{fill:none;stroke:var(--dwg-dim);stroke-width:1;stroke-dasharray:4 4}
.dwg .dw-guide{stroke:var(--dwg-dim);stroke-width:.7;stroke-dasharray:2 5;opacity:.8}
.dwg .dw-dim{stroke:var(--dwg-dim);stroke-width:1}
.dwg .dw-ext{stroke:var(--dwg-dim);stroke-width:.6;opacity:.7}
.dwg .dw-dimt{fill:var(--dwg-dim);font:500 12px var(--mono);letter-spacing:.04em}
.dwg .dw-dot{fill:var(--dwg-hi)}
.dwg .dw-lead{stroke:var(--dwg-hi);stroke-width:.8;opacity:.5}
.dwg .dw-cn{fill:var(--dwg-dim);font:500 11px var(--mono);letter-spacing:.08em}
.dwg .dw-cl{fill:var(--dwg-hi);font:500 11px var(--mono);letter-spacing:.08em}
.hero__dwg .dw-cn,.hero__dwg .dw-cl{font-size:15px}
.hero__dwg .dw-dimt{font-size:16px}
.dwg .dw-fill{fill:var(--sheet);stroke:var(--dwg);stroke-width:.9}

/* ---------- 17. DODATKI (krok 2, tylko dopisane) ---------- */
/* karty archiwum w szer. 388 px: każde zdjęcie z assets ≤ 1,0× (lam 390, r7 425×235) */
.refs--388{grid-template-columns:repeat(3,minmax(0,388px))}
/* pole formularza na jasnym tle */
.input--light{color:var(--navy);border-bottom-color:var(--navy)}
.input--light::placeholder{color:var(--tone2)}
/* numer arkusza po prawej w eyebrow: <div class="eyebrow"><b>[ 03 ]</b> Systemy <span class="sheetno">Ark. 03 / 08</span></div> */
.eyebrow .sheetno{margin-left:auto;color:var(--tone2);letter-spacing:.1em}
.plane-navy .eyebrow .sheetno{color:var(--mute-d)}
/* lista punktów z kreską (kolumny ról) */
.ticks{list-style:none;border-top:1px solid var(--hair)}
.ticks li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--hair);font-size:var(--fs-sm);line-height:1.45}
.ticks li::before{content:"—";position:absolute;left:0;top:11px;color:var(--navy)}
@media (max-width:900px){ .refs--388{grid-template-columns:repeat(2,minmax(0,388px))} }
@media (max-width:600px){ .refs--388{grid-template-columns:1fr} .eyebrow .sheetno{display:none} }
/* próbnik kolorów rastra (kolory produktu, nie interfejsu) */
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 10px}
.sw{font:400 10px/1.35 var(--mono);letter-spacing:.03em;color:var(--mute)}
.sw i{display:block;aspect-ratio:1;margin-bottom:6px;position:relative;box-shadow:inset 0 0 0 1px var(--hair)}
.sw i::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 8px)}
.sw b{display:block;color:var(--text);font-weight:500}
.ral-9005{background:#0E0E10}.ral-7016{background:#383E42}.ral-7024{background:#474A50}.ral-9007{background:#8F8F8C}
.ral-9006{background:#A5A8A6}.ral-9003{background:#F1EEE6}.ral-1015{background:#E6D2B5}.ral-8017{background:#45322E}
.ok-sonoma{background:linear-gradient(100deg,#C8A880,#D9BE97 40%,#BF9C72 70%,#D2B48B)}
.ok-dab{background:linear-gradient(100deg,#8C6A48,#A27C55 35%,#7E5E3F 65%,#9A7650)}
@media (max-width:600px){ .swatches{grid-template-columns:repeat(5,minmax(0,1fr))} }
/* opis w polu załącznika (krojem tekstu, nie mono) */
.file .file__t{font:inherit;font-size:15px;text-transform:none;letter-spacing:0;color:var(--on-dark-2);text-align:left}

/* ---------- 18. RYSUNKI NA TELEFONIE (krok 3, tylko dopisane) ---------- */
/* <svg class="dwg dwg--compact">: na ≤600 px opisy (.dw-cl, tspan.lab) znikają,
   numery i wymiary rosną do czytelnego kegla; opisy pokazuje .dwg-legend pod rysunkiem. */
.dwg-legend{display:none}
@media (max-width:600px){
  .dwg--compact .dw-cl,.dwg--compact .lab{display:none}
  .dwg--compact .dw-cn{font-size:28px;font-weight:500}
  .dwg--compact .dw-dimt{font-size:26px}
  .dwg-legend{display:block;list-style:none;margin-top:var(--sp-2);border-top:1px solid var(--rule)}
  .dwg-legend li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--hair);font:400 var(--fs-mono-s)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
  .dwg-legend li b{font-weight:500;color:var(--red)}
}

/* ---------- 19. MOBILNA ŚCIEŻKA DO WYCENY W NAGŁÓWKU (krok 4, tylko dopisane) ---------- */
/* <div class="hd-r hd-r--m"> + <a class="btn btn--sm hd-wyc" href="#wycena">Wycena</a>:
   na ≤900 px zostaje kompaktowy przycisk; na ≤600 px telefon zwija się do kwadratu „TEL” 44×44. */
.hd-wyc{display:none}
@media (max-width:900px){
  .hd-r--m .hd-wyc{display:inline-flex;min-height:var(--tap);padding:0 14px;gap:8px}
}
@media (max-width:600px){
  .hd-r--m{gap:8px}
  .hd-r--m .hd-tel{display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);font-size:0;line-height:0;box-shadow:inset 0 0 0 1px var(--navy)}
  .hd-r--m .hd-tel small{display:none}
  .hd-r--m .hd-tel::before{content:"TEL";font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--navy)}
}

/* ---------- 20. POPRAWKI ODBIORU (tylko dopisane) ---------- */
.nw{white-space:nowrap}
@media (min-width:901px) and (max-width:1439px){ :root{--fs-h1:clamp(64px,5.56vw,80px)} }
@media (max-width:600px){
  .ft-cols a{display:flex;align-items:center;min-height:var(--tap);line-height:1.3}
  .ft-bot a{display:inline-flex;align-items:center;min-height:var(--tap)}
}

/* ---------- Menu mobilne (rozwijane burgerem) ---------- */
@media (max-width:900px){
  .site-header{position:relative}
  .nav.is-open{display:flex;flex-direction:column;gap:0;margin:0;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--sheet);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:0 var(--margin,20px);font-size:17px}
  .nav.is-open a{border-bottom:1px solid var(--hair);min-height:52px}
}
.util a,.ft-bot a{color:inherit}