/* MarMi Kuchnie na wymiar: landing page
   Ciemny grafit marki z mosiężnym złotem; jasne „kamienne” sekcje na zdjęcia i formularz.
   Motyw przewodni: linie wymiarowe z rysunku stolarskiego (hero, cennik). */

/* ---------- Fonty (lokalne, bez zapytań zewnętrznych) ---------- */
@font-face{font-family:"Zodiak";src:url(../fonts/zodiak-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Archivo podzielony jak w Google Fonts: latin + polskie litery (zawsze) i reszta latin-ext (tylko gdy potrzebna) */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-pl.woff2) format("woff2");font-weight:400 700;font-stretch:62% 125%;font-style:normal;font-display:swap;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,U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-ext.woff2) format("woff2");font-weight:400 700;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-0103,U+0108-0117,U+011A-0140,U+0145-0159,U+015C-0178,U+017D-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* Fallbacki o metrykach dopasowanych do Zodiaka i Archivo (size-adjust z pomiaru szerokości tekstu):
   do czasu wczytania fontów tekst łamie się tak samo, więc podmiana nie przesuwa układu (CLS) */
@font-face{font-family:"Zodiak fallback";src:local("Georgia");size-adjust:113.2%;ascent-override:87.5%;descent-override:24.7%;line-gap-override:8%}
@font-face{font-family:"Archivo fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:98.6%;ascent-override:89%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700;size-adjust:95.5%;ascent-override:91.9%;descent-override:22%;line-gap-override:0%}

/* ---------- Tokeny ---------- */
:root{
  /* Paleta marki */
  --ink:#1E2023;        /* grafit, główne tło */
  --ink-2:#272A2E;      /* grafit-2, pasy sekcji */
  --ink-3:#34383D;
  --ink-4:#17191B;      /* stopka */
  --stone:#EDEBE7;      /* kamień, jasne sekcje i formularz */
  --stone-2:#E2DFDA;
  --field:#F8F7F5;
  --field-line:#C9C5BE;
  --text-dark:#1E2023;
  --text-light:#F2EFE9;
  --muted-dark:#5C5F63;
  --muted-light:#A9A7A2;
  --gold:#C39D5C;       /* złoto, akcent i linie wymiarowe */
  --gold-hi:#D6B57A;
  --gold-deep:#8E6E38;  /* złoto-ciemne: linie, ikony i obramowania na jasnym tle (≥3:1) */
  --gold-text:#7A5E2C;  /* drobny złoty tekst na jasnym tle: 5,1:1 na kamieniu, 4,6:1 na stone-2 (AA) */
  --line-light:rgba(242,239,233,.14);
  --line-dark:rgba(30,32,35,.14);
  --err:#A3261B;         /* błędy formularza, kontrast AA na kamieniu i polu */

  /* Role krojów
     Zodiak 500       – H1, H2, H3, pytania FAQ, cytat opinii, podpisy realizacji
     Archivo 100%     – tekst, lead, przyciski, nawigacja, formularz
     Archivo 125% 600 – liczby: pasek terminów, cennik, telefon, numery kroków (Expanded, cyfry tabelaryczne)
     Archivo 80%  600 – etykiety wersalikami (Condensed, światło +0,15em) */
  --f-head:"Zodiak","Zodiak fallback",Georgia,"Times New Roman",serif;
  --f-text:"Archivo","Archivo fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --head-w:500;
  --head-ls:-.02em;
  --lab-stretch:80%;
  --lab-ls:.15em;
  --num-stretch:125%;

  /* Skala typograficzna: 6 stopni, 360 → 1440 px */
  --fs-0:clamp(.8125rem,.79rem + .1vw,.875rem);      /* 13–14: etykiety, podpisy, przypisy */
  --fs-1:clamp(.9375rem,.91rem + .12vw,1rem);        /* 15–16: drobny tekst, nawigacja, przyciski */
  --fs-2:clamp(1.0625rem,1.03rem + .15vw,1.1875rem); /* 17–19: tekst, lead, pola */
  --fs-3:clamp(1.25rem,1.14rem + .45vw,1.5rem);      /* 20–24: H3, FAQ, cytat */
  --fs-4:clamp(1.875rem,1.5rem + 1.7vw,3rem);        /* 30–48: H2, duże liczby */
  --fs-5:clamp(2rem,1.35rem + 2.67vw,3.75rem);       /* 32–60: H1 */

  /* Odstępy */
  --sp-1:.375rem;
  --sp-2:.75rem;
  --sp-3:1.25rem;
  --sp-4:clamp(1.5rem,1.25rem + 1.1vw,2.25rem);
  --sp-5:clamp(2rem,1.45rem + 2.4vw,3.5rem);
  --sp-6:clamp(4rem,2.65rem + 6vw,7.5rem);

  /* Siatka */
  --wrap:75rem;
  --gutter:clamp(1.25rem,.55rem + 3vw,2.5rem);
  --col-gap:clamp(2rem,1rem + 4.4vw,4.5rem);
  --r:6px;
  --r-s:3px;
  --top-h:4.25rem;
  color-scheme:dark;
}

/* ---------- Podstawy ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--top-h);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--text-light);font-family:var(--f-text);font-size:var(--fs-2);line-height:1.6;-webkit-font-smoothing:antialiased;font-kerning:normal}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{font-family:var(--f-head);font-weight:var(--head-w);line-height:1.08;letter-spacing:var(--head-ls);margin:0;text-wrap:balance}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.band--stone :focus-visible,.form :focus-visible{outline-color:var(--gold-deep)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.band{padding-block:var(--sp-6)}
.band--stone{background:var(--stone);color:var(--text-dark);color-scheme:light}
.band--ink2{background:var(--ink-2)}

/* Etykiety wersalikami: jeden wzór dla całej strony */
.eyebrow,.dim,.ba .lbl,.step .when,.review .g,.foot-h{font-family:var(--f-text);font-size:var(--fs-0);font-weight:600;line-height:1.25;font-stretch:var(--lab-stretch);letter-spacing:var(--lab-ls);text-transform:uppercase}
.eyebrow{color:var(--gold)}
.band--stone .eyebrow{color:var(--gold-text)}

.h2{font-size:var(--fs-4);line-height:1.06}
.lede{font-size:var(--fs-2);color:var(--muted-light);max-width:60ch}
.band--stone .lede{color:var(--muted-dark)}
.sec-head{display:grid;gap:var(--sp-2);align-content:start;margin-bottom:var(--sp-5);max-width:46rem}
.sec-head .h2{margin-bottom:var(--sp-1)}
.sec-head--flush{margin-bottom:0}

/* ---------- Przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3rem;font-family:var(--f-text);font-weight:600;font-size:var(--fs-1);line-height:1.2;letter-spacing:.005em;text-decoration:none;border-radius:var(--r);padding:.875rem 1.375rem;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-hi)}
.btn--ghost{border-color:var(--line-light);color:var(--text-light);font-variant-numeric:tabular-nums}
.btn--ghost:hover{border-color:var(--gold)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Linia wymiarowa ---------- */
.dim{display:flex;align-items:center;gap:var(--sp-2);color:var(--gold)}
.dim::before,.dim::after{content:"";flex:1;min-width:var(--sp-3);height:1px;background:currentColor;opacity:.7}
.dim>span{position:relative;min-width:0;text-align:center;text-wrap:balance}
.dim-wrap{position:relative;padding-inline:1px}
.dim-wrap::before,.dim-wrap::after{content:"";position:absolute;top:50%;width:1px;height:14px;background:var(--gold);transform:translateY(-50%)}
.dim-wrap::before{left:0}.dim-wrap::after{right:0}

/* ---------- Nagłówek strony ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(30,32,35,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-light)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--top-h)}
.logo{display:block;flex:none}
.logo img{height:40px;width:auto}
.top-nav{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-1)}
.top-nav a{text-decoration:none;color:var(--muted-light)}
.top-nav a:hover{color:var(--text-light)}
.top-nav a.btn--gold,.top-nav a.btn--gold:hover{color:var(--ink)}
.top-phone{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-light)!important;white-space:nowrap}
.top .btn{min-height:2.75rem;padding:.625rem 1.125rem}
@media (max-width:980px){.top-nav .lnk{display:none}}
@media (max-width:900px){.top-nav .btn{display:none}}
@media (max-width:560px){:root{--top-h:3.75rem}.logo img{height:32px}.dim-long{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(48rem,calc(100svh - var(--top-h)));background:var(--ink)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);padding-block:var(--sp-5);padding-right:var(--sp-5);padding-left:max(var(--gutter),env(safe-area-inset-left,0px),calc((100vw - var(--wrap))/2 + var(--gutter)))}
.hero h1{font-size:var(--fs-5);line-height:1.04;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{font-size:var(--fs-2);color:var(--muted-light);max-width:44ch}
.hero-sub strong{color:var(--text-light)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.hero-trust{font-size:var(--fs-1);color:var(--muted-light);padding-top:var(--sp-3);border-top:1px solid var(--line-light)}
.hero-trust ul{display:grid;gap:var(--sp-1);margin:0;padding:0}
.hero-trust li{display:flex;align-items:center;gap:.5rem;list-style:none}
.hero-trust svg{width:16px;height:16px;color:var(--gold);flex:none}
.hero-media{position:relative;overflow:hidden}
.hero-media picture,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(30,32,35,0) 22%)}
.hero-tag{position:absolute;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:var(--sp-4);z-index:2;background:rgba(30,32,35,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line-light);border-radius:var(--r);padding:.625rem .875rem;font-size:var(--fs-0);line-height:1.4;color:var(--muted-light);max-width:19rem}
.hero-tag b{display:block;color:var(--text-light);font-family:var(--f-head);font-weight:var(--head-w);font-size:var(--fs-1)}
/* Podpis zdjęcia przełączany tym samym progiem co <picture> (900 px) */
.hero-tag--mob{display:none}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-tag--desk{display:none}
  .hero-tag--mob{display:block}
  .hero-media{order:-1;height:min(75vw,46svh)} /* 4:3, ale nie wyżej niż 46% ekranu */
  .hero-media::after{background:linear-gradient(0deg,var(--ink) 0%,rgba(30,32,35,0) 35%)}
  .hero-copy{gap:var(--sp-3);padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) var(--sp-5) max(var(--gutter),env(safe-area-inset-left,0px));margin-top:calc(-1 * var(--sp-5));position:relative;z-index:2}
  .hero-tag{top:var(--sp-3);bottom:auto;right:max(var(--gutter),env(safe-area-inset-right,0px))}
}
@media (max-width:560px){.hero-cta .btn{flex:1 1 100%}}
/* Szerokie ekrany (od 1441 px): całe hero w kontenerze strony (.wrap), tekst 51%, zdjęcie 49% (ok. 521 px), równe marginesy po obu
   stronach jak w pasku terminów. H1 o stopień mniejszy (--fs-4), „Projekt i wycena gratis.” w jednej linii (532 px przy 48 px),
   razem 3 linie. Zdjęcie odsunięte od menu i paska terminów, zaokrąglone na czterech rogach, bez gradientu
   (wtapianie w tło tylko w wariancie do 1440 px, gdzie zdjęcie dochodzi do krawędzi). Wysokość hero rośnie o odstępy, ale nie
   ponad wysokość ekranu. */
@media (min-width:1441px){
  .hero{grid-template-columns:minmax(0,51fr) minmax(0,49fr);column-gap:var(--sp-5);padding-block:var(--sp-5);padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));min-height:min(calc(48rem + 2 * var(--sp-5)),calc(100svh - var(--top-h)))}
  .hero-copy{padding:0}
  .hero h1{font-size:var(--fs-4)}
  .h1-nw{white-space:nowrap}
  .hero-media{border-radius:var(--r)}
  .hero-media::after{content:none}
}

/* ---------- Pasek terminów ---------- */
.facts{border-block:1px solid var(--line-light);background:var(--ink-2)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts li{padding:var(--sp-4) var(--sp-3);border-left:1px solid var(--line-light);display:grid;gap:var(--sp-2);align-content:start}
.facts li:first-child{border-left:0;padding-left:0}
.facts .n{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;font-family:var(--f-text);font-weight:600;font-stretch:var(--num-stretch);font-size:var(--fs-4);letter-spacing:-.02em;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.facts .n small{font-size:var(--fs-0);font-weight:600;font-stretch:var(--lab-stretch);letter-spacing:.14em;line-height:1.25;text-transform:uppercase;color:var(--gold-hi)}
.facts .t{font-size:var(--fs-1);line-height:1.45;color:var(--muted-light);max-width:24ch}
@media (max-width:760px){
  .facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(odd){border-left:0;padding-left:0}
  .facts li:nth-child(even){padding-right:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line-light)}
}

/* ---------- Realizacje ---------- */
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-3)}
.work{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--stone-2);grid-column:span 4}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.work:hover img{transform:scale(1.03)}
.work img[data-src]{visibility:hidden} /* do czasu podmiany przez js/main.js: bez tekstu alt na pustej ramce */
.work--wide{grid-column:span 8;aspect-ratio:16/10}
.work--tall{aspect-ratio:3/4.1}
.work--sq{aspect-ratio:4/4.1}
.works-more{margin-top:var(--sp-4)}
.works-more-n{font-weight:400;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.works-more-n::before{content:"·";margin-right:.625rem}

/* Galeria „Zobacz więcej realizacji” (lightbox na <dialog>): pasek, zdjęcie, nawigacja */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111214;color:var(--text-light);overscroll-behavior:contain}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:rgba(17,18,20,.9)}
.lb-bar,.lb-foot{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) max(var(--gutter),env(safe-area-inset-right,0px)) var(--sp-2) max(var(--gutter),env(safe-area-inset-left,0px))}
.lb-bar{padding-top:max(var(--sp-2),env(safe-area-inset-top,0px))}
.lb-foot{justify-content:center;padding-bottom:max(var(--sp-2),env(safe-area-inset-bottom,0px))}
.lb-h{font-size:var(--fs-3);margin-right:auto}
.lb-n{min-width:5.5rem;text-align:center;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;color:var(--muted-light)}
.lb-btn{flex:none;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line-light);background:transparent;color:var(--text-light);display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.lb-btn:hover{border-color:var(--gold)}
.lb-btn svg{width:1.375rem;height:1.375rem}
.lb-stage{position:relative;min-height:0;padding:0 max(var(--gutter),env(safe-area-inset-left,0px));touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lb-stage picture{display:block;width:100%;height:100%}
.lb-stage picture[hidden]{display:none}
.lb-stage img{width:100%;height:100%;object-fit:contain}
html.lb-lock{overflow:hidden}
@media (min-width:901px){.work--tall{aspect-ratio:auto}}
/* Na węższych ramkach kadr przesunięty w prawo (narożne półki w grafit-1) */
@media (max-width:900px){.work--focus-r img{object-position:81% 50%}}
@media (max-width:900px){.work,.work--wide{grid-column:span 6}.work--wide{aspect-ratio:4/3.4}.work--tall,.work--sq{aspect-ratio:4/4.4}}
@media (max-width:560px){.works{gap:var(--sp-2)}.work,.work--wide{grid-column:span 12;aspect-ratio:4/3.6}.work--tall{aspect-ratio:4/5}}

/* ---------- Przed i po ---------- */
.ba-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col-gap);align-items:center}
.ba{position:relative;aspect-ratio:16/10.5;border-radius:var(--r);overflow:hidden;user-select:none;touch-action:pan-y;background:var(--ink-3)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--gold);transform:translateX(-1px)}
.ba .knob{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--ink);transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.ba .knob svg{width:22px;height:22px}
.ba .lbl{position:absolute;top:var(--sp-2);padding:.3rem .6rem;border-radius:var(--r-s);background:rgba(20,21,23,.75)}
.ba .lbl--b{left:var(--sp-2)}.ba .lbl--a{right:var(--sp-2);color:var(--gold-hi)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:has(input:focus-visible){outline:2px solid var(--gold-hi);outline-offset:3px}
.ba-copy{display:grid;gap:var(--sp-3)}
.ba-copy .h2{margin-top:calc(-1 * var(--sp-1))}
.checks{list-style:none;padding:0;margin:var(--sp-1) 0 0;display:grid;gap:var(--sp-2)}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:var(--sp-2);color:var(--muted-light)}
.checks li b{color:var(--text-light)}
.checks svg{width:20px;height:20px;color:var(--gold);margin-top:.25rem}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr}}

/* ---------- Jak pracujemy ---------- */
/* Kroki na wspólnych wierszach (subgrid): tytuły i opisy zaczynają się na jednej linii */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.step{position:relative;padding:0 var(--sp-4) 0 0;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--sp-2);align-content:start}
.step-top{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.step-num{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-deep);display:grid;place-items:center;font-family:var(--f-text);font-weight:600;font-stretch:var(--num-stretch);font-size:var(--fs-1);font-variant-numeric:tabular-nums;color:var(--gold-text);background:var(--stone)}
.step-top::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.step:last-child .step-top::after{display:none}
.step h3{font-size:var(--fs-3);line-height:1.15}
.step p{color:var(--muted-dark);font-size:var(--fs-1);line-height:1.55}
.step .when{color:var(--gold-text)}
.process-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-3);margin-top:var(--sp-5)}
.process-media figure{margin:0;position:relative}
.process-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.process-media figure:first-child{aspect-ratio:3/4}
@media (min-width:901px){.process-media figure:first-child{aspect-ratio:auto}}
.process-media figure:last-child{aspect-ratio:16/10.6}
.process-media figcaption{position:absolute;left:var(--sp-2);bottom:var(--sp-2);font-size:var(--fs-0);line-height:1.35;background:rgba(20,21,23,.78);color:var(--text-light);padding:.3rem .625rem;border-radius:var(--r-s)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(-n+2){padding-bottom:var(--sp-5)}.step:nth-child(2) .step-top::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step,.step:nth-child(-n+2){padding:0 0 var(--sp-4)}.step:last-child{padding-bottom:0}.step-top::after{display:none}.process-media{grid-template-columns:1fr;gap:var(--sp-2)}.process-media figure:first-child{aspect-ratio:4/5}.process-media figure:last-child{order:-1}}

/* ---------- Cennik ---------- */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.price .sec-head > div{margin-top:var(--sp-2)}
.range{padding:var(--sp-4);border:1px solid var(--line-light);border-radius:var(--r);background:var(--ink)}
.range-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.range-big b{font-family:var(--f-text);font-weight:600;font-stretch:var(--num-stretch);font-size:var(--fs-4);letter-spacing:-.025em;color:var(--text-light);font-variant-numeric:tabular-nums lining-nums;line-height:1;white-space:nowrap}
.range-big span{color:var(--muted-light);font-size:var(--fs-1)}
.range-scale{position:relative;height:3.5rem;margin:var(--sp-3) 6px var(--sp-1)}
.range-scale .bar{position:absolute;left:0;right:0;top:26px;height:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
.range-scale .tick{position:absolute;top:18px;width:1px;height:18px;background:var(--gold)}
.range-scale .lab{position:absolute;top:44px;transform:translateX(-50%);font-size:var(--fs-0);font-stretch:var(--lab-stretch);line-height:1.2;color:var(--muted-light);white-space:nowrap;font-variant-numeric:tabular-nums}
.range-scale .lab:first-of-type{transform:none}
.incl{list-style:none;margin:var(--sp-4) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--line-light);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);font-size:var(--fs-1)}
.incl li{display:flex;gap:.625rem;align-items:flex-start}
.incl svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:.2rem}
@media (max-width:900px){.price{grid-template-columns:1fr}}
@media (max-width:480px){.incl{grid-template-columns:1fr}.range{padding:var(--sp-3)}}

/* ---------- Film i opinia ---------- */
/* Film pionowy (9:16): na desktopie kolumna z lewej; obok nagłówek równo z górą filmu i opinia równo z dołem filmu.
   Obie kolumny wyśrodkowane w kontenerze. Na telefonie pełna szerokość kolumny, ale nie wyżej niż ok. 80% wysokości ekranu. */
.vid-grid{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,36rem);grid-template-rows:auto 1fr auto;justify-content:center;column-gap:var(--col-gap);row-gap:var(--sp-4)}
.vid-head{grid-column:2;grid-row:1;max-width:34rem}
.vid-grid .review{grid-column:2;grid-row:3}
.vid{grid-column:1;grid-row:1/4;position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:9/16;width:min(100%,calc(80vh * 9 / 16));width:min(100%,calc(80svh * 9 / 16))}
.vid video{width:100%;height:100%;object-fit:cover}
/* Plakat (AVIF/WebP) nad filmem; znika, gdy film ruszy */
.vid-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.vid.is-playing .vid-poster img{opacity:0}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;border-radius:50%;border:0;background:var(--gold);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.vid-play[hidden]{display:none}
.vid-play:hover{background:var(--gold-hi)}
.vid-play svg{width:1.75rem;height:1.75rem}
.vid-play .i-pause,.vid.is-playing .vid-play .i-play{display:none}
.vid.is-playing .vid-play .i-pause{display:block}
.vid.is-playing .vid-play{opacity:0;transition:opacity .2s}
.vid.is-playing:hover .vid-play,.vid.is-playing .vid-play:focus-visible{opacity:1}
.review{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r);background:var(--stone);color:var(--text-dark)}
.stars{display:flex;gap:3px;color:var(--gold-deep)}
.stars svg{width:20px;height:20px}
.review q{font-family:var(--f-head);font-size:var(--fs-3);line-height:1.35;font-weight:var(--head-w);letter-spacing:-.01em;quotes:"„" "”";text-wrap:pretty}
.review .who{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-1);color:var(--muted-dark);flex-wrap:wrap}
@media (min-width:761px){.vid-grid{row-gap:0}.vid-grid .review{margin-top:var(--sp-4)}.review q{font-size:var(--fs-2);line-height:1.55}}
@media (max-width:760px){.vid-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;justify-content:normal}.vid-head,.vid-grid .review,.vid{grid-column:auto;grid-row:auto}.vid{justify-self:center}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--col-gap)}
.faq .sec-head{margin-bottom:0}
.faq details{border-top:1px solid var(--line-dark)}
.faq details:last-child{border-bottom:1px solid var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;font-family:var(--f-head);font-weight:var(--head-w);font-size:var(--fs-3);line-height:1.25;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--f-text);font-weight:400;font-size:var(--fs-3);line-height:1;color:var(--gold-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--sp-4);color:var(--muted-dark);max-width:62ch}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---------- Formularz ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--col-gap);align-items:start}
.contact-side{display:grid;gap:var(--sp-4)}
.phone-big{display:grid;gap:var(--sp-1);padding:var(--sp-4);border:1px solid var(--line-light);border-radius:var(--r)}
.phone-big a{font-family:var(--f-text);font-weight:600;font-stretch:var(--num-stretch);font-size:var(--fs-4);letter-spacing:-.02em;line-height:1.1;text-decoration:none;color:var(--gold);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.phone-big span{color:var(--muted-light);font-size:var(--fs-1)}
.form{position:relative;color-scheme:light;background:var(--stone);color:var(--text-dark);border-radius:var(--r);padding:var(--sp-4);display:grid;gap:var(--sp-3)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.fld{display:grid;gap:var(--sp-1);min-width:0}
.fld label,.fld legend{font-size:var(--fs-1);font-weight:600;line-height:1.35}
.fld legend{padding:0;margin-bottom:var(--sp-1)}
.fld .hint{font-size:var(--fs-0);color:var(--muted-dark);font-weight:400}
.fld input,.fld select,.fld textarea{font:inherit;font-size:var(--fs-2);line-height:1.4;color:var(--text-dark);background:var(--field);border:1px solid var(--field-line);border-radius:5px;padding:.75rem .8rem;width:100%;min-height:3rem}
.fld textarea{min-height:6.5rem;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold-deep)}
fieldset.fld{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:.6rem .9rem;border:1px solid var(--field-line);border-radius:999px;font-size:var(--fs-1);line-height:1.3;background:var(--field);transition:background-color .15s,color .15s,border-color .15s}
.chip input:checked+span{background:var(--ink);color:var(--text-light);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--gold-deep);outline-offset:2px}
.drop{border:1.5px dashed #B4AFA6;border-radius:var(--r);padding:var(--sp-3);display:flex;gap:var(--sp-2);align-items:center;background:var(--field);position:relative}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:has(input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:2px}
.drop svg{width:28px;height:28px;color:var(--gold-deep);flex:none}
.drop b{display:block;font-size:var(--fs-1)}
.drop span{font-size:var(--fs-0);color:var(--muted-dark)}
.consent{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-2);font-size:var(--fs-0);line-height:1.5;color:var(--muted-dark);align-items:start}
.consent input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--ink)}
.form .btn{width:100%;font-size:var(--fs-2);min-height:3.5rem;margin-top:var(--sp-1)}
.form-msg{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:5px;border-left:3px solid var(--err);background:var(--field);color:var(--err);font-size:var(--fs-1);font-weight:600;line-height:1.45}
.form-msg[hidden],.fld-err[hidden],.files-sum[hidden]{display:none}
.fld-err{margin:0;color:var(--err);font-size:var(--fs-0);font-weight:600;line-height:1.4}
.fld [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.consent:has([aria-invalid="true"]) input{outline:2px solid var(--err);outline-offset:2px}
.drop:has([aria-invalid="true"]){border-color:var(--err)}
.files-sum{margin:0;font-size:var(--fs-0);color:var(--muted-dark);font-variant-numeric:tabular-nums}
.files-sum.is-over{color:var(--err);font-weight:600}
.form .btn[aria-busy="true"]{cursor:progress;opacity:.85}
/* Pole-pułapka dla botów: poza ekranem, niewidoczne dla czytników */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Strona błędu bez JS (send.php) */
.err-list{margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 1rem);background:var(--field);border-left:3px solid var(--err);border-radius:5px;display:grid;gap:var(--sp-1);color:var(--text-dark)}
.page-err{background:var(--stone)}
.page-err main{min-height:100svh}
.btn--line{border-color:var(--line-dark);color:var(--text-dark)}
.btn--line:hover{border-color:var(--gold-deep)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.row{grid-template-columns:1fr}.form{padding:var(--sp-3)}}

/* ---------- Stopka ---------- */
.foot{background:var(--ink-4);color:var(--muted-light);font-size:var(--fs-1)}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-4);padding-block:var(--sp-5) calc(var(--sp-5) + 5rem)}
.foot img{height:44px;width:auto;margin-bottom:var(--sp-3)}
.foot p{max-width:36ch}
.foot .foot-h{margin:0 0 var(--sp-2);color:var(--gold)}
.foot p+p{margin-top:.25rem}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}
@media (min-width:901px){.foot .wrap{padding-block:var(--sp-5)}}

/* ---------- Pasek akcji na telefonie ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:var(--sp-2);padding:.625rem max(.75rem,env(safe-area-inset-right,0px)) calc(.625rem + env(safe-area-inset-bottom,0px)) max(.75rem,env(safe-area-inset-left,0px));background:rgba(23,25,27,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line-light)}
.mbar .btn{flex:1;padding:.75rem .625rem}
@media (max-width:900px){.mbar{display:flex}}

/* ---------- Strona podziękowania ---------- */
.thanks-hero .wrap{display:grid;gap:var(--sp-4);justify-items:start;max-width:calc(52rem + 2 * var(--gutter));margin-inline:0 auto;margin-left:max(0px,calc((100vw - var(--wrap))/2))}
.thanks-hero .dim-wrap{width:min(100%,28rem)}
.thanks-hero h1{font-size:var(--fs-5);line-height:1.04;letter-spacing:-.025em}
.thanks-hero .lede{font-size:var(--fs-2)}
.thanks-note{font-size:var(--fs-1);color:var(--muted-light)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.thanks .foot .wrap{padding-bottom:var(--sp-5)}
@media (max-width:900px){.steps--3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps--3{grid-template-columns:1fr}}

/* ---------- Stopka: dokumenty ---------- */
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line-light)}
.foot-legal a,.foot-btn{font:inherit;color:var(--muted-light);text-decoration:underline;text-decoration-color:var(--line-light);text-underline-offset:.25em;padding:.5rem 0;line-height:1.4}
.foot-btn{background:none;border:0;cursor:pointer}
.foot-legal a:hover,.foot-btn:hover{color:var(--text-light);text-decoration-color:var(--gold)}

/* ---------- Baner cookies ----------
   Nie blokuje strony (bez nakładki). Oba przyciski mają identyczny wygląd: równa waga wyboru. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink-2);color:var(--text-light);border-top:1px solid var(--gold);box-shadow:0 -12px 32px rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cookie.is-in{transform:none}
.cookie[hidden]{display:none}
.cookie-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-5);align-items:center;padding-block:var(--sp-4)}
.cookie-txt{display:grid;gap:var(--sp-1);max-width:64ch}
.cookie-h{font-size:var(--fs-3);line-height:1.15}
.cookie p{font-size:var(--fs-1);line-height:1.55;color:var(--muted-light)}
.cookie p a{color:var(--text-light);text-decoration-color:var(--gold);text-underline-offset:.2em}
.cookie-btns{display:flex;gap:var(--sp-2)}
.btn--choice{min-width:11rem;background:transparent;border-color:var(--gold);color:var(--text-light)}
.btn--choice:hover{background:var(--gold);color:var(--ink)}
.cookie-short{display:none}
/* Telefon: jedno zdanie bez nagłówka, niski pasek; przyciski bez zmian, min. 44 px */
@media (max-width:760px){
  .cookie-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);padding-block:var(--sp-2)}
  .cookie-h,.cookie-long{display:none}
  .cookie-short{display:inline}
  .cookie p{line-height:1.45}
  .cookie-btns .btn{flex:1 1 0;min-width:0;min-height:2.75rem;padding-block:.5rem;padding-inline:.5rem}
}

/* ---------- Polityka prywatności ---------- */
.legal-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--col-gap);align-items:start}
.legal-head{grid-column:1/-1;display:grid;gap:var(--sp-3);max-width:52rem}
.legal-head h1{font-size:var(--fs-5);line-height:1.04;letter-spacing:-.025em}
.toc{position:sticky;top:calc(var(--top-h) + var(--sp-4));font-size:var(--fs-1)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-dark)}
.toc a{display:block;padding:.4rem 0 .4rem var(--sp-3);margin-left:-1px;border-left:1px solid transparent;color:var(--muted-dark);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--text-dark);border-left-color:var(--gold-deep)}
.legal{max-width:66ch;color:var(--muted-dark)}
.legal section{padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);border-bottom:1px solid var(--line-dark)}
.legal section:last-child{border-bottom:0;margin-bottom:0}
.legal h2{font-size:var(--fs-3);line-height:1.15;color:var(--text-dark);margin-bottom:var(--sp-2);scroll-margin-top:calc(var(--top-h) + var(--sp-3))}
.legal h3{font-family:var(--f-text);font-size:var(--fs-2);font-weight:600;letter-spacing:0;color:var(--text-dark);margin:var(--sp-3) 0 var(--sp-1)}
.legal p+p,.legal p+ul,.legal ul+p{margin-top:var(--sp-2)}
.legal ul{margin:var(--sp-2) 0 0;padding-left:1.15rem;display:grid;gap:var(--sp-1)}
.legal li::marker{color:var(--gold-deep)}
.legal strong{color:var(--text-dark)}
.legal a{color:var(--text-dark);text-decoration-color:var(--gold-deep);text-underline-offset:.2em}
.legal .btn--line{margin-top:var(--sp-3)}
.tbl{overflow-x:auto;margin-top:var(--sp-3);border:1px solid var(--line-dark);border-radius:var(--r);background:var(--field)}
.tbl table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--fs-1);line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--line-dark)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font-weight:600;color:var(--text-dark);background:var(--stone-2)}
.tbl code{font-family:var(--f-text);font-weight:600;font-stretch:var(--num-stretch);color:var(--text-dark);white-space:nowrap}
.tbl+p{margin-top:var(--sp-3)}
@media (max-width:900px){.legal-wrap{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.legal-page .foot .wrap{padding-bottom:var(--sp-5)}