/* FastMove v6
   Kolory z logo klienta: zolty, blekit nieba, granatowa czern.
   Zolty jako powierzchnia = marka (hero, wycena). Na papierze i czerni zolty = akcja.
   Kroj: Sofia Sans Extra Condensed (naglowki, numery) + Sofia Sans (tekst). OFL, self-host. */

@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:700 900;font-display:block;
  src:url("fonts/sofia-sans-xc-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:700 900;font-display:block;
  src:url("fonts/sofia-sans-xc-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:1 1000;font-display:swap;
  src:url("fonts/sofia-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:1 1000;font-display:swap;
  src:url("fonts/sofia-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@property --pos{syntax:"<percentage>";inherits:true;initial-value:50%}

:root{
  --yellow:#F8D300;
  --yellow-hi:#FFE033;
  --ink:#0C1822;
  --ink-2:#162532;
  --ink-3:#253747;
  --paper:#F5F5F1;
  --paper-2:#EAEAE3;
  --white:#FDFDFB;
  --sky:#7AC4EA;
  --muted:#46535E;
  --line:rgba(12,24,34,.15);
  --line-2:rgba(12,24,34,.3);
  --on-ink:#EDF1F3;
  --on-ink-2:#A9B6C0;
  --line-ink:rgba(237,241,243,.16);
  --bad:#9B1C14;
  --f-d:"Sofia Sans Extra Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-t:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m:clamp(1rem, 4.2vw, 5rem);
  --maxw:94rem;
  --hdr:4rem;
  --sec:clamp(4rem, 2.4rem + 6vw, 8.5rem);
  --r:8px;
  --r-img:6px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:900px){:root{--hdr:4.75rem}}
@media (max-width:639px){:root{--sec:3rem}}
/* Duze monitory: cala kompozycja rosnie razem z ekranem (rem idzie za min. szerokoscia
   i wysokoscia okna), zeby 2560 i 3440 wygladaly jak 1920, a nie jak waski pasek. */
@media (min-width:1900px){
  html{font-size:clamp(100%, min(.8333vw, 1.4815vh), 137.5%)}
  :root{--maxw:max(94rem, min(170vh, 86vw))}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-t);font-size:1.0625rem;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (min-width:1024px){body{font-size:1.125rem}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.sec-ink :focus-visible,.foot :focus-visible,.bar :focus-visible{outline-color:var(--yellow)}
[id]{scroll-margin-top:1rem}
@media (min-width:900px){[id]{scroll-margin-top:calc(var(--hdr) + .5rem)}}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.25em;height:1.25em;flex:none}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--paper);padding:.75rem 1rem;border-radius:var(--r);font-weight:800;text-decoration:none}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--m), var(--maxw));margin-inline:auto}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.7rem 1.35rem;border:2px solid transparent;border-radius:var(--r);font-family:var(--f-t);font-weight:800;font-size:1.0625rem;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-yel{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.btn-lg{min-height:3.75rem;padding:.85rem 1.6rem;font-size:1.125rem}
.btn-sm{min-height:2.75rem;padding:.45rem 1.05rem;font-size:1rem}
.btn-wide{width:100%}
.btn .ic-go{transition:transform .2s var(--ease)}
@media (hover:hover){
  .btn-ink:hover{background:var(--ink-3);border-color:var(--ink-3)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .btn-yel:hover{background:var(--yellow-hi)}
  .btn:hover .ic-go{transform:translateX(3px)}
}

/* ---------- naglowek ---------- */
.top{position:relative;z-index:50;background:var(--yellow)}
.top::before{content:"";position:absolute;inset:0;background:var(--paper);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .25s var(--ease)}
.top.is-past::before{opacity:1}
@media (min-width:900px){.top{position:sticky;top:0}}
.top-in{position:relative;display:flex;align-items:center;gap:1rem;min-height:var(--hdr)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none;border-radius:4px}
.brand img{width:2.75rem;height:2.75rem;border-radius:50%}
.brand-t{font-family:var(--f-d);font-weight:900;font-size:1.75rem;line-height:1;letter-spacing:.01em;white-space:nowrap}
.nav{display:none;gap:clamp(1rem, 1.6vw, 2rem)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;font-size:1rem;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.top-act{display:flex;align-items:center;gap:.5rem}
.top-tel{display:none;align-items:center;gap:.45rem;min-height:2.75rem;padding:.25rem .6rem;font-weight:800;font-size:1.0625rem;text-decoration:none;white-space:nowrap;border-radius:4px}
.top-go{display:none}
.top-ico{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:2px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
.top-ico .ic{width:1.35rem;height:1.35rem}
@media (min-width:900px){
  .top-tel,.top-go{display:inline-flex}
  .top-call{display:none}
}
@media (min-width:1180px){
  .nav{display:flex;margin-right:1rem}
  .top-menu{display:none}
}

/* ---------- menu mobilne ---------- */
.menu{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--yellow);color:var(--ink)}
.menu::backdrop{background:rgba(12,24,34,.55)}
.menu-in{display:flex;flex-direction:column;min-height:100%;padding:.625rem var(--m) calc(1.5rem + env(safe-area-inset-bottom,0px))}
.menu-top{display:flex;align-items:center;justify-content:space-between;min-height:2.75rem}
.menu-nav{display:grid;margin-top:1.25rem;border-top:2px solid var(--ink)}
.menu-nav a{padding:.55rem 0;border-bottom:1px solid var(--line-2);font-family:var(--f-d);font-weight:900;font-size:2.25rem;line-height:1.1;text-decoration:none}
.menu-cta{display:grid;gap:.75rem;margin-top:auto;padding-top:2rem}
body:has(.menu[open]){overflow:hidden}
@media (prefers-reduced-motion:no-preference){.menu[open]{animation:menu-in .3s var(--ease)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-.75rem)}}

/* ---------- hero ---------- */
.hero{background:var(--yellow);padding-block:clamp(1.25rem, .5rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem)}
.hero-in{display:grid;gap:2.5rem}
.hero-txt{container-type:inline-size;min-width:0}
.hero-kick{font-family:var(--f-t);font-weight:800;font-size:clamp(1rem, .94rem + .3vw, 1.25rem);line-height:1.35;max-width:34ch;text-wrap:balance}
/* 15cqi: najdluzsza linia ("Reszte wyniesiemy.") ma ok. 6,3 wysokosci kroju,
   wiec zawsze miesci sie w kolumnie, od 320 px do ultrawide. */
.hero-big{margin-top:1.1rem;font-family:var(--f-d);font-weight:900;font-size:clamp(2.5rem, 15cqi, 9.5rem);line-height:.9;letter-spacing:-.004em}
.hero-big span{display:block}
.hero-lead{margin-top:1.5rem;font-size:clamp(1.0625rem, 1rem + .35vw, 1.3125rem);line-height:1.5;max-width:40ch}
.hero-act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-act .btn{flex:1 1 100%}
@media (min-width:520px){.hero-act .btn{flex:0 0 auto}}
.hero-wa{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-top:.5rem;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.hero-facts{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;margin-top:1.5rem;padding-top:1.1rem;border-top:2px solid var(--ink);font-weight:700;font-size:.9375rem;line-height:1.4}
.hero-media{min-width:0;width:min(100%, 30rem)}
.hero-media figcaption{margin-top:.75rem;font-size:.9375rem;line-height:1.45;max-width:46ch}
/* Telefon: kwadrat zamiast 4:5. Gora kadru to dach garazu, wiec kadr jedzie w dol, do gratow. */
@media (max-width:639px){
  .hero .cmp{aspect-ratio:1}
  .hero .cmp-img{object-position:50% 72%}
}
@media (min-width:1024px){
  .hero-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2.5rem, 4.5vw, 6rem)}
  .hero-media{width:min(36vw, 44rem, calc((100svh - var(--hdr) - 10rem) * .8))}
}
@media (prefers-reduced-motion:no-preference){
  .hero-big span{animation:rise .75s var(--ease) both}
  .hero-big span+span{animation-delay:.08s}
}
@keyframes rise{from{opacity:0;transform:translateY(.3em)}}

/* ---------- porownanie przed / po ----------
   Sam transform: warstwa "po" jedzie w prawo o --pos, a jej zdjecie o tyle samo w lewo,
   wiec obraz stoi, a przesuwa sie tylko okno. Zero layoutu i repaintu przy przeciaganiu. */
.cmp{position:relative;aspect-ratio:var(--ar, 4/5);overflow:hidden;border-radius:var(--r-img);background:var(--ink-2);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;isolation:isolate}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-po{position:absolute;inset:0;overflow:hidden;transform:translateX(var(--pos))}
.cmp-po-in{position:absolute;inset:0;transform:translateX(calc(var(--pos) * -1))}
.cmp-handle{position:absolute;inset:0;transform:translateX(var(--pos));pointer-events:none}
.cmp-line{position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--yellow);box-shadow:0 0 0 1px rgba(12,24,34,.35)}
.cmp-knob{position:absolute;top:50%;left:0;display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;border-radius:50%;background:var(--ink);color:var(--yellow);box-shadow:0 0 0 3px var(--yellow);pointer-events:auto;cursor:grab;touch-action:none}
.cmp-knob .ic{width:1.5rem;height:1.5rem}
.cmp-knob:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.cmp.is-drag,.cmp.is-drag .cmp-knob{cursor:grabbing}
.cmp.is-hint{transition:--pos .8s var(--ease)}
.cmp-tag{position:absolute;top:.75rem;left:.75rem;padding:.3rem .6rem;border-radius:4px;background:var(--ink);color:var(--paper);font-weight:800;font-size:.875rem;line-height:1.2;pointer-events:none}
.cmp-tag-po{left:auto;right:.75rem;background:var(--yellow);color:var(--ink)}

/* ---------- sekcje ---------- */
.sec{padding-block:var(--sec)}
.sec-alt{background:var(--paper-2)}
.sec-join{padding-top:0}
.sec-ink{background:var(--ink);color:var(--on-ink)}
.sec-yellow{background:var(--yellow)}
h2{font-family:var(--f-d);font-weight:900;font-size:clamp(2.5rem, 1.55rem + 3.1vw, 4.75rem);line-height:.95;letter-spacing:-.003em;max-width:18ch;text-wrap:balance}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem, 1.4rem + 2.2vw, 3.75rem)}
.sec-lead{font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5;max-width:50ch;color:var(--muted)}
.sec-ink .sec-lead{color:var(--on-ink-2)}
@media (min-width:1024px){
  .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:1.5rem clamp(2rem, 5vw, 6rem)}
  .sec-head:has(> :only-child){grid-template-columns:1fr}
}

/* ---------- uslugi ---------- */
.svc-grid{display:grid;gap:3.5rem}
.svc{display:grid;align-content:start}
.svc-ph{max-width:36rem;margin-bottom:1.5rem;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-img);background:var(--paper-2)}
.svc-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.svc h3{font-family:var(--f-d);font-weight:900;font-size:clamp(2rem, 1.5rem + 1.5vw, 3rem);line-height:1}
.rows{margin-top:1.5rem;border-top:2px solid var(--ink)}
.rows li{padding:.8rem 0;border-bottom:1px solid var(--line);line-height:1.4}
.svc .btn{justify-self:start;align-self:start;margin-top:1.75rem}
@media (max-width:639px){
  .svc-grid{gap:2.75rem}
  .svc-ph{aspect-ratio:2/1;margin-bottom:1.1rem}
  .rows{margin-top:1.1rem}
  .rows li{padding:.6rem 0}
  .svc .btn{margin-top:1.25rem}
}
/* Dwie kolumny na subgridzie: zdjecie, tytul, opis, lista i przycisk w obu stoja na tej
   samej wysokosci, nawet gdy jeden opis ma linijke wiecej. */
@media (min-width:900px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem, 4.5vw, 6rem);row-gap:0}
  .svc{grid-row:span 4;grid-template-rows:subgrid}
  .svc-body{display:contents}
}
.more.things{margin-top:clamp(2.5rem, 2rem + 2vw, 4rem)}
.things .more-in p{max-width:68ch;line-height:1.6}

/* ---------- kroki ---------- */
.steps{display:grid;gap:1.25rem}
.steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;padding-top:1.1rem;border-top:2px solid var(--ink)}
.step-n{grid-row:span 2;font-family:var(--f-d);font-weight:900;font-size:3.5rem;line-height:.8}
.steps h3{font-weight:800;font-size:1.25rem;line-height:1.25}
.steps p{margin-top:.4rem;max-width:40ch;color:var(--muted)}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem, 3vw, 4rem)}
  .steps li{display:block;padding-top:1.4rem}
  .step-n{display:block;font-size:clamp(4rem, 2.6rem + 3vw, 6.5rem)}
  .steps h3{margin-top:1.1rem}
}

/* ---------- cena ---------- */
.price{display:grid;gap:2.5rem;padding-top:clamp(2.5rem, 2rem + 2vw, 4rem);border-top:1px solid var(--line-2)}
@media (min-width:1024px){.price{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(3rem, 5.5vw, 7rem);align-items:start}}
.price-lead{margin-top:1.1rem;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);max-width:44ch}
.promise{margin-top:1.1rem;max-width:46ch;color:var(--muted)}
.promise strong{color:var(--ink)}
.price-main .btn{margin-top:1.75rem}
/* Skala ceny: kazdy czynnik jako pasek od "taniej" do "drozej" z przykladami na koncach. */
.scale-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:2px solid var(--ink)}
.scale-h{font-weight:800;font-size:1.0625rem}
.scale-legend{display:flex;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--muted)}
.scale-legend span+span::before{content:"";display:inline-block;width:2.25rem;height:2px;margin:0 .5rem .28em 0;vertical-align:middle;background:linear-gradient(90deg,#9FCFEA,var(--ink))}
.scale-list li{padding:1.05rem 0 1.1rem;border-bottom:1px solid var(--line)}
.scale-name{font-weight:800;font-size:1.0625rem;line-height:1.3}
.scale-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:.7rem}
.scale-bar i{height:.5rem;background:var(--c)}
.scale-bar i:nth-child(1){--c:#D4EBF7;border-radius:4px 0 0 4px}
.scale-bar i:nth-child(2){--c:#A4D2EC}
.scale-bar i:nth-child(3){--c:#6FA3C0}
.scale-bar i:nth-child(4){--c:#3A6178}
.scale-bar i:nth-child(5){--c:var(--ink);border-radius:0 4px 4px 0}
.scale-ends{display:flex;justify-content:space-between;gap:1rem;margin-top:.55rem;font-size:.9375rem;line-height:1.35}
.scale-ends span{max-width:48%;color:var(--muted)}
.scale-ends span+span{text-align:right;color:var(--ink);font-weight:700}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- realizacje ---------- */
.pairs{display:grid;gap:2.5rem}
/* Telefon: jedna para przed/po i cztery kadry. Druga para i dwa kadry podobne do innych
   zdjec zostaja od tabletu wzwyz (skracanie strony, prosba bossa 24.09). */
@media (max-width:767px){.pair+.pair{display:none}}
@media (max-width:639px){.shots li:nth-child(2),.shots li:nth-child(4){display:none}}
@media (min-width:768px){
  .pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem, 3vw, 3.5rem);max-width:calc((100svh - 9rem) * 1.5 + 3.5rem)}
}
/* Szeroki ekran: opis z lewej, dwie pary z prawej. Szerokosc pary liczona z wysokosci okna,
   zeby pionowe zdjecie 3:4 zawsze miescilo sie w kadrze razem z podpisem. */
@media (min-width:1280px){
  .real-top{--g1:clamp(2.5rem, 4vw, 6rem);--g2:clamp(1.25rem, 3vw, 3.5rem);display:grid;grid-template-columns:minmax(17rem,1fr) auto;gap:var(--g1);align-items:start}
  .real-top .sec-head{display:grid;grid-template-columns:1fr;align-items:start;margin:0;padding-top:.25rem}
  /* para: z wysokosci okna, ale nigdy tak szeroka, zeby opis z lewej zszedl ponizej 17rem */
  .real-top .pairs{--pw:min(calc((100svh - var(--hdr) - 8.5rem) * .75), 36rem, calc((min(100vw - 2 * var(--m), var(--maxw)) - 17rem - var(--g1) - var(--g2)) / 2));grid-template-columns:repeat(2,var(--pw));gap:var(--g2);max-width:none}
}
.pair figcaption,.shots figcaption{margin-top:.75rem;font-size:.9375rem;line-height:1.45;color:var(--on-ink-2)}
.pair figcaption strong{color:var(--on-ink)}
.shots-h{margin-top:clamp(3rem, 2.4rem + 2.4vw, 5rem);font-family:var(--f-d);font-weight:900;font-size:clamp(1.75rem, 1.4rem + 1vw, 2.5rem);line-height:1}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem;margin-top:1.25rem}
@media (min-width:640px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.shots{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem}}
.shots img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--fx,50%) 50%;border-radius:var(--r-img);background:var(--ink-2)}
.shots figcaption{margin-top:.55rem;font-size:.875rem}
@media (max-width:639px){.shots img{aspect-ratio:1}}

/* ---------- o nas + zasieg ---------- */
.about{display:grid;gap:3rem}
@media (min-width:1024px){.about{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem, 6vw, 8rem);align-items:start}}
.about-txt>p{margin-top:1rem;max-width:52ch}
.about-txt h2+p{margin-top:1.5rem}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem, 3vw, 2rem);margin-top:2rem;border-top:2px solid var(--ink)}
.facts>div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:800;line-height:1.3}
.facts dd{margin:.3rem 0 0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
@media (min-width:640px){.facts dd{font-size:1rem}}
/* Fakty powtarzaja hero, cene i FAQ. Na desktopie wypelniaja kolumne obok mapy, ponizej 1024 tylko wydluzaja. */
@media (max-width:1023px){.facts{display:none}}
.area-lead{margin-top:1.1rem;max-width:46ch}
.map-fig{margin-top:1.5rem;max-width:36rem}
.map-fig img{width:100%;height:auto;border-radius:var(--r-img);box-shadow:0 0 0 1px var(--line)}
.map-fig figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.45;color:var(--muted)}
.map-fig figcaption a{color:inherit}
.more{margin-top:1.5rem;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;font-weight:800;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary .ic,.faq summary .ic{transition:transform .25s var(--ease)}
.more[open] summary .ic,.faq details[open] summary .ic{transform:rotate(180deg)}
.more-in{padding-bottom:1.25rem}
.more-in h3{margin-top:.75rem;font-size:1rem;font-weight:800}
.more-in p{margin-top:.25rem;font-size:1rem;color:var(--muted);max-width:62ch}

/* ---------- wycena ---------- */
.quote{display:grid;gap:2rem}
/* Na telefonie kolejnosc: naglowek, formularz, inne drogi. Na desktopie formularz z prawej. */
@media (min-width:1024px){
  .quote{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;column-gap:clamp(3rem, 5.5vw, 7rem);row-gap:0;align-items:start}
  .quote-head{grid-column:1;grid-row:1}
  .quote-alt{grid-column:1;grid-row:2}
  .quote-box{grid-column:2;grid-row:1 / span 2}
}
.quote-lead{margin-top:1.1rem;max-width:44ch}
.channels{margin-top:2rem;border-top:2px solid var(--ink)}
@media (max-width:1023px){.channels{margin-top:.5rem}}
.ch{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line-2);text-decoration:none}
.ch .ic{width:1.75rem;height:1.75rem}
.ch-t{display:grid;gap:.1rem}
.ch-l{font-weight:700;font-size:.9375rem;line-height:1.3}
.ch-v{font-family:var(--f-d);font-weight:900;font-size:2.125rem;line-height:1}
@media (hover:hover){.ch:hover .ch-v{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}}
/* Ponizej 1024 kanaly stoja pod formularzem: dwa obok siebie zamiast dwoch wielkich wierszy. */
@media (max-width:1023px){
  .channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .ch{gap:.6rem}
  .ch .ic{width:1.5rem;height:1.5rem}
  .ch-v{font-size:1.5rem}
}
.quote-box{min-width:0;padding:clamp(1.25rem, .9rem + 1.6vw, 2.5rem);border:2px solid var(--ink);border-radius:12px;background:var(--white)}

/* ---------- formularz ---------- */
.prog{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.prog-t{font-weight:800;font-size:.9375rem}
.prog-bar{display:flex;gap:.35rem}
.prog-bar i{width:2.25rem;height:.375rem;border-radius:3px;background:rgba(12,24,34,.14)}
.prog-bar i.on{background:var(--ink)}
.pane{min-width:0;margin:0;padding:0;border:0}
/* Bez JS: wszystkie kroki naraz, bez przyciskow Dalej/Wstecz i paska postepu. */
html:not([data-js="ok"]) .prog,html:not([data-js="ok"]) .pane-nav [data-go]{display:none}
html:not([data-js="ok"]) .pane+.pane{margin-top:2.5rem}
.pane:focus{outline:none}
.pane legend{padding:0;font-family:var(--f-d);font-weight:900;font-size:clamp(1.875rem, 1.6rem + 1vw, 2.375rem);line-height:1.02}
.pane-sub{margin-top:.5rem;color:var(--muted)}
.grp-l{margin-top:1.5rem;font-weight:800;font-size:.9375rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .95rem;border:2px solid rgba(12,24,34,.22);border-radius:var(--r);background:var(--white);font-weight:700;font-size:.9375rem;line-height:1.2}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
@media (hover:hover){.chip:hover span{border-color:var(--ink)}}
.drop{position:relative;display:grid;justify-items:center;gap:.3rem;margin-top:1.25rem;padding:1.4rem 1rem;border:2px dashed rgba(12,24,34,.38);border-radius:var(--r);background:var(--paper);text-align:center;cursor:pointer}
.drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.drop:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.drop.is-over{border-color:var(--ink);background:#FFF4B8}
.drop .ic{width:2rem;height:2rem}
.drop-t{font-weight:800}
.drop-s{font-size:.9375rem;color:var(--muted)}
.drop-n{margin-top:.5rem;font-size:.9375rem;font-weight:700}
.drop-n:empty{display:none}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.5rem;margin-top:.6rem}
.thumbs:empty{display:none}
.thumbs li{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--paper-2)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:.25rem;right:.25rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:rgba(12,24,34,.82);color:var(--paper);cursor:pointer}
.thumbs button::after{content:"";position:absolute;inset:-.4rem}
.thumbs button .ic{width:1rem;height:1rem}
.field{display:grid;gap:.4rem;min-width:0;margin-top:1.25rem}
.field label{font-weight:800;font-size:.9375rem;line-height:1.3}
.opt{font-weight:500;color:var(--muted)}
.req{color:var(--bad)}
.field-row{display:grid;column-gap:1rem}
@media (min-width:560px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea,.form select{width:100%;min-height:3.25rem;padding:.7rem .9rem;border:2px solid rgba(12,24,34,.28);border-radius:var(--r);background:var(--white);color:var(--ink);font-size:1rem;line-height:1.4}
.form textarea{min-height:6rem;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230C1822' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.15rem}
.form input::placeholder,.form textarea::placeholder{color:#7A858E}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field.is-bad input{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.err{font-size:.875rem;font-weight:700;color:var(--bad)}
.err:empty{display:none}
.agree{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.2rem;padding:.25rem 0;font-size:.9375rem;line-height:1.45;cursor:pointer}
.agree input{flex:none;width:1.375rem;height:1.375rem;margin:.05rem 0 0;accent-color:var(--ink);cursor:pointer}
.agree a{font-weight:700}
.agree+.err{margin-top:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pane-nav{display:flex;gap:.75rem;margin-top:1.75rem}
.pane-nav .btn{flex:1 1 auto}
.pane-nav .btn-line{flex:0 0 auto}
.note{margin-top:.9rem;font-size:.875rem;color:var(--muted)}
.msg{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r);background:#FBE9E7;color:#7A1510;font-weight:700;font-size:.9375rem;line-height:1.45}
.msg:empty{display:none}
.spin{display:none;width:1.1rem;height:1.1rem;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%}
#send.is-busy .spin{display:inline-block;animation:spin .8s linear infinite}
#send.is-busy{cursor:progress;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.done:focus{outline:none}
.done-ic{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--ink);color:var(--yellow)}
.done-ic .ic{width:1.6rem;height:1.6rem}
.done h3{margin-top:1.1rem;font-family:var(--f-d);font-weight:900;font-size:2.5rem;line-height:1}
.done p{margin-top:.6rem;max-width:40ch}
.done .btn{margin-top:1.5rem}

/* ---------- pytania ---------- */
.faq-grid{display:grid;gap:2rem}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem, 6vw, 8rem);align-items:start}
  .faq-head{position:sticky;top:calc(var(--hdr) + 2rem)}
}
.faq-head p{margin-top:1rem;color:var(--muted)}
.faq-head a{font-weight:800;color:var(--ink);white-space:nowrap}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem;padding:.9rem 0;font-weight:800;font-size:1.125rem;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 2.5rem 1.25rem 0;max-width:62ch;color:var(--muted)}

/* ---------- stopka ---------- */
.foot{padding-block:clamp(2.5rem, 1.5rem + 4vw, 6rem) 1rem;background:var(--ink);color:var(--on-ink)}
.foot-call{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k logo" "tel logo";align-items:end;column-gap:1.5rem}
.foot-k{grid-area:k;font-weight:700;color:var(--on-ink-2);text-wrap:balance}
.foot-tel{grid-area:tel;justify-self:start;margin-top:.6rem;font-family:var(--f-d);font-weight:900;font-size:clamp(3.5rem, 19vw, 11rem);line-height:.85;letter-spacing:-.006em;color:var(--yellow);text-decoration:none;white-space:nowrap;border-radius:4px}
@media (hover:hover){.foot-tel:hover{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.08em}}
.foot-logo{grid-area:logo;align-self:center;width:clamp(4.5rem, 2.5rem + 8vw, 11rem);height:auto;border-radius:50%}
@media (max-width:639px){
  .foot-call{grid-template-columns:1fr auto;grid-template-areas:"k logo" "tel tel";align-items:center}
}
/* Kontakty: na telefonie dwa numery obok siebie i mail pod nimi, od 640 px jeden wiersz. */
.foot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;margin-top:clamp(1.75rem, 1.2rem + 2vw, 3.5rem);padding-top:.75rem;border-top:1px solid var(--line-ink)}
.foot-list li:last-child{grid-column:1 / -1}
.foot-list span{display:block;font-size:.875rem;line-height:1.3;color:var(--on-ink-2)}
.foot-list a{display:flex;align-items:center;min-height:2.75rem;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
@media (min-width:640px){
  .foot-list{grid-template-columns:repeat(3,max-content);column-gap:clamp(2rem, 6vw, 6rem)}
  .foot-list li:last-child{grid-column:auto}
}
@media (hover:hover){.foot-list a:hover{text-decoration:underline}}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;margin-top:1rem;padding-top:.25rem;border-top:1px solid var(--line-ink);font-size:.9375rem;color:var(--on-ink-2)}
.foot-bot a{padding:.7rem 0;color:var(--on-ink)}
.foot-bot .made{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-left:auto;padding:0;color:var(--on-ink-2);text-decoration:none}
.made img{width:auto;height:1.125rem;opacity:.75;transition:opacity .2s var(--ease)}
@media (hover:hover){.foot-bot .made:hover{color:var(--on-ink)}.made:hover img{opacity:1}}

/* ---------- pasek mobilny ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--ink-3);transform:translateY(105%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
.bar.is-on{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:3.75rem;background:var(--ink);color:var(--paper);font-weight:800;font-size:.875rem;text-decoration:none}
.bar .ic{width:1.35rem;height:1.35rem}
.bar .bar-go{background:var(--yellow);color:var(--ink)}
@media (min-width:900px){.bar{display:none}}

/* ---------- podstrony (polityka, 404) ---------- */
.doc{padding-block:clamp(2.5rem, 2rem + 3vw, 5rem) var(--sec)}
.doc h1{font-family:var(--f-d);font-weight:900;font-size:clamp(2.75rem, 1.8rem + 3.5vw, 5rem);line-height:.95;max-width:16ch}
.doc .doc-lead{margin-top:1rem;font-size:1.1875rem;max-width:52ch;color:var(--muted)}
.doc h2{margin-top:2.5rem;font-size:clamp(1.75rem, 1.4rem + 1vw, 2.25rem);max-width:none}
.doc p,.doc ul{margin-top:.75rem;max-width:65ch}
.doc ul{list-style:disc;padding-left:1.25rem}
.doc li{margin-top:.35rem}
.doc .btn{margin-top:2.5rem}
.doc .doc-date{margin-top:2rem;font-size:.9375rem;color:var(--muted)}
.foot-mini{padding-block:1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
.foot-mini .foot-bot{margin-top:0;padding-top:0;border-top:0}
.nf{background:var(--yellow)}
.nf-main{display:grid;align-items:center;min-height:calc(100svh - var(--hdr))}
.nf-main .wrap{container-type:inline-size}
.nf-main .hero-big{margin-top:.75rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}