/* JagClinic. Paleta wzięta ze zdjęć auta: oliwka nadwozia, ciemny las, chrom, bursztyn reflektorów. */

:root{
  --noc:      #12160F;
  --kora:     #1A2016;
  --mech:     #2E3826;
  --wierzba:  #9AA083;
  --chrom:    #D2D1C8;
  --kosc:     #EFEDE3;
  --bursztyn: #E3A44B;
  --kamien:   #E3E1D7;
  --kamien-2: #D6D4C8;
  --tusz:     #161A11;
  --tusz-2:   #4A5140;

  --mar: clamp(1.25rem, 5vw, 5.5rem);
  --pion: clamp(4.5rem, 9vw, 8.5rem);
  --max: 1240px;

  --tekst: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glos: "Newsreader", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--noc);
  color:var(--chrom);
  font-family:var(--tekst);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-underline-offset:.22em;
}

img,picture,video{ display:block; max-width:100%; }

h1,h2,h3{
  font-family:var(--tekst);
  color:var(--kosc);
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
h2{
  font-variation-settings:"wdth" 118,"wght" 640;
  font-size:clamp(1.85rem,1.2rem + 2.3vw,3.1rem);
  letter-spacing:-.005em;
}
h3{
  font-variation-settings:"wdth" 106,"wght" 620;
  font-size:1.09rem;
  line-height:1.3;
}
p{ margin:0 0 1.05em; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--bursztyn); outline-offset:3px; border-radius:2px; }

.omin{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--bursztyn); color:var(--noc); padding:.7rem 1.1rem; font-weight:600;
}
.omin:focus{ left:.5rem; top:.5rem; }

/* ---------- pasek ---------- */
.pasek{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--mar);
  background:rgba(18,22,15,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mech);
}
.znak{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.znak__grill{ width:32px; height:auto; flex:none; }
.znak__grill .znak__ramka{ fill:none; stroke:var(--chrom); stroke-width:1.4; }
.znak__grill rect{ fill:var(--chrom); }
.znak__grill .znak__slupki rect{ fill:var(--wierzba); }
.znak__nazwa{
  font-variation-settings:"wdth" 122,"wght" 700;
  font-size:1.06rem; letter-spacing:.055em; color:var(--kosc);
}
.pasek__nawigacja{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); font-size:.94rem; }
.pasek__nawigacja a{ text-decoration:none; color:var(--wierzba); }
.pasek__nawigacja a:hover{ color:var(--kosc); }
.pasek__nawigacja a:not(.pasek__tel){ display:none; }
.pasek__nawigacja .pasek__tel{
  color:var(--noc); background:var(--bursztyn);
  padding:.5rem 1.05rem; border-radius:999px;
  font-variation-settings:"wdth" 104,"wght" 620;
}
.pasek__nawigacja .pasek__tel:hover{ color:var(--noc); background:#f0b45f; }
@media (min-width:900px){ .pasek__nawigacja a:not(.pasek__tel){ display:inline; } }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; display:flex; flex-direction:column; }
.hero__media{
  position:relative; order:-1; overflow:hidden;
  height:min(56svh,28rem);
  background:#0b0e09 url("img/hero.webp") center 24% / cover no-repeat;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,15,9,.28) 0%,rgba(12,15,9,0) 40%,rgba(12,15,9,.72) 88%,var(--noc) 100%);
}
.hero__film{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.hero__film.gra{ opacity:1; }

.hero__slowo{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(2rem,5vw,3rem) var(--mar) clamp(2.6rem,7vh,4rem);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__nadpis{
  color:var(--wierzba); font-size:.95rem; letter-spacing:.02em;
  margin:0 0 1.1rem; padding-left:1.05rem; position:relative;
}
.hero__nadpis::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.55rem; height:1px; background:var(--bursztyn);
}
.hero h1{
  font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(2.9rem,1.3rem + 7.4vw,6.4rem);
  letter-spacing:-.012em; margin:0 0 1.15rem;
}
.hero__obietnica{
  display:block; margin-top:.85rem; min-height:2.6em;
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:clamp(1.1rem,.85rem + 1.1vw,1.65rem);
  letter-spacing:0; color:var(--kosc); line-height:1.3;
}
.hero__lead{
  max-width:34ch; font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--kosc); margin-bottom:1.9rem;
}
.hero__akcje{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.6rem; }
.btn{
  display:inline-block; text-decoration:none; padding:.85rem 1.7rem;
  border-radius:999px; font-variation-settings:"wdth" 104,"wght" 620;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn--pelny{ background:var(--bursztyn); color:var(--noc); }
.btn--pelny:hover{ background:#f0b45f; }
.btn--pusty{ border:1px solid var(--wierzba); color:var(--kosc); }
.btn--pusty:hover{ border-color:var(--kosc); background:rgba(239,237,227,.08); }

.hero__dane{
  display:grid; gap:1.1rem 2.6rem; margin:0;
  border-top:1px solid var(--mech); padding-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.hero__dane div{ display:flex; flex-direction:column; gap:.15rem; }
.hero__dane dt{ color:var(--wierzba); font-size:.85rem; letter-spacing:.02em; }
.hero__dane dd{ margin:0; color:var(--kosc); font-variation-settings:"wdth" 100,"wght" 500; }

@media (min-width:1000px){
  .hero{ display:grid; grid-template-columns:1.04fr .96fr; align-items:stretch; }
  .hero__media{ order:0; grid-column:2; height:auto; min-height:100svh;
    background-position:center 18%; }
  .hero__media::after{
    background:linear-gradient(90deg,rgba(12,15,9,.75) 0%,rgba(12,15,9,0) 32%);
  }
  .hero__slowo{
    grid-column:1; grid-row:1; margin:0; max-width:none; min-height:100svh;
    padding-inline:var(--mar) clamp(2rem,4vw,4rem);
    padding-block:clamp(5rem,10vh,8rem) clamp(3.5rem,7vh,6rem);
  }
  .hero__lead{ max-width:30ch; }
}

/* wejście na starcie */
@media (prefers-reduced-motion: no-preference){
  .hero__nadpis,.hero h1,.hero__lead,.hero__akcje,.hero__dane{
    animation:wjazd .85s cubic-bezier(.2,.7,.25,1) both;
  }
  .hero h1{ animation-delay:.08s; }
  .hero__lead{ animation-delay:.18s; }
  .hero__akcje{ animation-delay:.26s; }
  .hero__dane{ animation-delay:.34s; }
  .hero__media{ animation:przyslona 1.4s cubic-bezier(.2,.7,.25,1) both; }
}
@keyframes wjazd{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes przyslona{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- sekcje ---------- */
.teza,.zakres,.modele,.usterki,.proces,.realizacje,.opinia,.pytania{
  padding-block:var(--pion);
  padding-inline:var(--mar);
}
.teza > *,.zakres > *,.usterki > *,.proces > *,.realizacje > *,.opinia > *,.pytania > *{
  max-width:var(--max); margin-inline:auto;
}

.teza{ padding-block:clamp(3.5rem,7vw,6rem); border-top:1px solid var(--mech); }
.teza p{
  font-family:var(--glos); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,1rem + 1.7vw,2.35rem);
  line-height:1.38; color:var(--kosc); max-width:26ch; margin:0;
}

.zakres h2{ margin-bottom:2.8rem; max-width:16ch; }
.zakres__siatka{
  display:grid; gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
}
.karta{ border-top:1px solid var(--mech); padding-top:1.3rem; }
.karta__liczby{
  display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap;
  margin:0 0 .9rem; color:var(--wierzba);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:2.1rem; line-height:1;
}
.karta__he{
  font-size:.82rem; letter-spacing:.14em;
  font-variation-settings:"wdth" 98,"wght" 500;
  color:var(--bursztyn);
}
.karta h3{ margin-bottom:.55rem; }
.karta p:last-child{ margin:0; color:var(--chrom); max-width:34ch; }

/* pas ze zdjęciem grilla */
.pas{ margin:0; }
.pas img{
  width:100%; height:clamp(9rem,22vw,17rem); object-fit:cover; object-position:center 42%;
  border-block:1px solid var(--mech);
}

/* ---------- blok jasny ---------- */
.modele,.usterki{ background:var(--kamien); color:var(--tusz-2); }
.modele h2,.modele h3,.usterki h2,.usterki h3{ color:var(--tusz); }
.modele{ padding-bottom:clamp(3rem,6vw,4.5rem); }
.modele__wstep{ display:grid; gap:1rem 3.5rem; margin-bottom:2.6rem; }
.modele__wstep p{ margin:0; max-width:44ch; }
@media (min-width:820px){
  .modele__wstep{ grid-template-columns:1fr 1fr; align-items:end; }
  .modele__wstep h2{ max-width:12ch; }
}
.modele__lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--kamien-2); }
.modele__lista li{
  display:grid; gap:.15rem .5rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--kamien-2);
  grid-template-columns:1fr;
}
.modele__rok{
  color:var(--tusz-2); font-size:.9rem;
  font-variation-settings:"wdth" 92,"wght" 500; letter-spacing:.04em;
}
.modele__nazwa{
  color:var(--tusz); font-size:clamp(1.1rem,1rem + .55vw,1.45rem);
  font-variation-settings:"wdth" 112,"wght" 620;
}
.modele__silnik{ color:var(--tusz-2); font-size:.95rem; }
@media (min-width:720px){
  .modele__lista li{ grid-template-columns:11rem 1fr auto; padding:1.25rem 0; }
  .modele__silnik{ text-align:right; }
}
.modele__dopisek{ margin:1.8rem 0 0; max-width:56ch; }

.usterki{ padding-top:clamp(3rem,6vw,4.5rem); }
.usterki h2{ margin-bottom:2.4rem; max-width:18ch; }
.usterki__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.9rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.usterki__lista h3{ margin-bottom:.4rem; }
.usterki__lista p{ margin:0; max-width:38ch; }

/* ---------- proces ---------- */
.proces{ border-top:1px solid var(--mech); }
.proces h2{ margin-bottom:2.6rem; max-width:16ch; }
.proces__kroki{
  list-style:none; counter-reset:krok; margin:0; padding:0;
  display:grid; gap:2rem 2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.proces__kroki li{ counter-increment:krok; position:relative; padding-top:2.5rem; }
.proces__kroki li::before{
  content:counter(krok); position:absolute; top:0; left:0;
  color:var(--bursztyn); font-variation-settings:"wdth" 118,"wght" 600;
  font-size:1.15rem; line-height:1;
}
.proces__kroki li::after{
  content:""; position:absolute; top:.35rem; left:1.5rem; right:0; height:1px;
  background:var(--mech);
}
.proces__kroki h3{ margin-bottom:.45rem; }
.proces__kroki p{ margin:0; max-width:32ch; }

/* ---------- realizacje ---------- */
.realizacje h2{ margin-bottom:2.4rem; }
.realizacje__siatka{ display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.robota img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 45%;
  border-radius:3px;
}
.robota__opis{ padding-top:1.1rem; border-top:1px solid var(--mech); margin-top:1.1rem; }
.robota__opis h3{ margin-bottom:.45rem; }
.robota__opis p{ margin:0; max-width:34ch; }
.realizacje__dopisek{ margin:2.2rem 0 0; color:var(--wierzba); max-width:48ch; }
.realizacje__dopisek a{ color:var(--kosc); }

/* ---------- opinia ---------- */
.opinia{ padding-block:clamp(4rem,8vw,7rem); border-top:1px solid var(--mech); }
.opinia figure{ margin:0; max-width:var(--max); margin-inline:auto; }
.opinia blockquote{ margin:0; }
.opinia blockquote p{
  font-family:var(--glos); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,.95rem + 1.6vw,2.15rem); line-height:1.42;
  color:var(--kosc); max-width:30ch; margin:0 0 1.4rem;
}
.opinia figcaption{
  color:var(--wierzba); font-size:.95rem;
  padding-left:1.05rem; position:relative;
}
.opinia figcaption::before{
  content:""; position:absolute; left:0; top:.62em; width:.55rem; height:1px; background:var(--bursztyn);
}

/* ---------- pytania ---------- */
.pytania{ background:var(--kamien); color:var(--tusz-2); }
.pytania h2{ color:var(--tusz); margin-bottom:2.2rem; max-width:16ch; }
.pytania__lista{ border-top:1px solid var(--kamien-2); }
.pytania details{ border-bottom:1px solid var(--kamien-2); }
.pytania summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  color:var(--tusz); font-variation-settings:"wdth" 106,"wght" 600;
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
}
.pytania summary::-webkit-details-marker{ display:none; }
.pytania summary::after{
  content:""; position:absolute; right:.35rem; top:1.55rem;
  width:.72rem; height:.72rem;
  border-right:1.5px solid var(--tusz-2); border-bottom:1.5px solid var(--tusz-2);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform .25s ease;
}
.pytania details[open] summary::after{ transform:rotate(225deg); }
.pytania summary:hover{ color:#000; }
.pytania details p{ margin:0 0 1.3rem; max-width:62ch; }
@media (prefers-reduced-motion: no-preference){
  .pytania details[open] p{ animation:wjazd .3s ease both; }
}

/* ---------- stopka ---------- */
.stopka{
  border-top:1px solid var(--mech);
  padding:var(--pion) var(--mar) 2rem;
}
.stopka__glowna{
  max-width:var(--max); margin-inline:auto;
  display:grid; gap:2.8rem;
}
@media (min-width:800px){ .stopka__glowna{ grid-template-columns:1.15fr .85fr; gap:4rem; } }
.stopka h2{ margin-bottom:1.4rem; }
.stopka h3{ margin-bottom:.7rem; color:var(--wierzba); font-variation-settings:"wdth" 96,"wght" 500; font-size:.9rem; letter-spacing:.06em; }
.stopka__duze{ margin:0 0 .35rem; }
.stopka__duze a{
  color:var(--kosc); text-decoration:none;
  font-variation-settings:"wdth" 112,"wght" 620;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);
  border-bottom:1px solid var(--mech);
}
.stopka__duze a:hover{ color:var(--bursztyn); border-color:var(--bursztyn); }
.stopka__wsk{ margin:1.3rem 0 0; color:var(--wierzba); max-width:38ch; }
.stopka__adres p{ margin:0 0 .8rem; }
.stopka__dojazd{ color:var(--wierzba); max-width:30ch; }
.stopka__adres a{ color:var(--kosc); }
.stopka__dol{
  max-width:var(--max); margin:clamp(3rem,6vw,5rem) auto 0;
  padding-top:1.3rem; border-top:1px solid var(--mech);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  color:var(--wierzba); font-size:.9rem;
}
.stopka__dol a{ color:var(--wierzba); }
.stopka__dol a:hover{ color:var(--kosc); }

/* ================= bajery ================= */

/* pasek postępu przewijania */
.postep{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:40; pointer-events:none;
  background:rgba(46,56,38,.55);
}
.postep span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--wierzba),var(--bursztyn));
  transform-origin:left;
}

/* rotator w nagłówku */
.rot{
  display:inline-block; color:var(--bursztyn);
  transition:opacity .32s ease,transform .32s ease;
  will-change:opacity,transform;
}
.rot.zmiana{ opacity:0; transform:translateY(-.28em); }
@media (prefers-reduced-motion: reduce){ .rot{ transition:none; } .rot.zmiana{ opacity:1; transform:none; } }

/* pasek liczb */
.liczby{
  padding:clamp(2.2rem,4vw,3.2rem) var(--mar);
  border-top:1px solid var(--mech);
  background:var(--kora);
}
.liczby ul{
  list-style:none; margin:0 auto; padding:0; max-width:var(--max);
  display:grid; gap:1.8rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.liczby li{ display:flex; flex-direction:column; gap:.3rem; }
.liczby__duza{
  color:var(--kosc); font-variation-settings:"wdth" 122,"wght" 640;
  font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem); line-height:1;
  font-variant-numeric:tabular-nums;
}
.liczby__opis{ color:var(--wierzba); font-size:.95rem; line-height:1.45; max-width:20ch; }

/* odsłanianie przy przewijaniu */
@media (prefers-reduced-motion: no-preference){
  .zjawia{ opacity:0; transform:translateY(18px); }
  .zjawia.widac{
    opacity:1; transform:none;
    transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1);
  }
}

/* pas ze zdjęciem grilla, delikatna paralaksa */
.pas{ overflow:hidden; }
.pas img{ will-change:transform; }

/* realizacje: stały kadr i najazd */
.robota picture{
  display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px;
  background:var(--kora); cursor:zoom-in;
}
.robota picture img{
  width:100%; height:100%; object-fit:cover; border-radius:0;
  transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
.robota picture:hover img{ transform:scale(1.045); }
@media (prefers-reduced-motion: reduce){ .robota picture img{ transition:none; } .robota picture:hover img{ transform:none; } }

/* podgląd zdjęcia */
.lupa{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(9,12,7,.94);
}
.lupa[hidden]{ display:none; }
.lupa img{ max-width:100%; max-height:100%; border-radius:3px; }
.lupa__zamknij{
  position:absolute; top:1rem; right:1rem;
  background:none; border:1px solid var(--wierzba); color:var(--kosc);
  border-radius:999px; padding:.5rem 1.1rem; cursor:pointer;
  font:inherit; font-size:.9rem;
}
.lupa__zamknij:hover{ border-color:var(--kosc); }

/* pływające CTA */
.plywak{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:35;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--bursztyn); color:var(--noc); text-decoration:none;
  padding:.85rem 1.35rem; border-radius:999px;
  font-variation-settings:"wdth" 104,"wght" 640;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.plywak.widac{ opacity:1; visibility:visible; transform:none; }
.plywak svg{ width:1.05rem; height:1.05rem; fill:currentColor; }
.plywak:hover{ background:#f0b45f; }
@media (prefers-reduced-motion: reduce){ .plywak{ transition:none; } }

/* Nagłówki sekcji mają ograniczoną szerokość, ale zostają przy lewej krawędzi,
   a nie na środku, co robiło z nimi reguła margin-inline:auto dla dzieci sekcji. */
.zakres h2,.usterki h2,.proces h2,.pytania h2,.realizacje h2,.opinia figure,.teza p{
  margin-inline:0 auto;
}

/* ================= wersja 3: cytaty na zdjęciu, filmy, formularz ================= */

/* TEZA na zdjęciu, tekst na środku */
.teza{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(5rem,12vw,9rem);
  display:grid; place-items:center;
  border-top:1px solid var(--mech);
}
.teza__tlo{
  position:absolute; inset:0; z-index:-1;
  background:#0b0e09 url("img/teza.webp") center 38% / cover no-repeat;
}
.teza__tlo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,13,8,.9) 0%,rgba(10,13,8,.72) 45%,rgba(10,13,8,.92) 100%);
}
.teza p{
  margin:0 auto; text-align:center; max-width:24ch;
  font-family:var(--glos); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,1rem + 1.8vw,2.45rem); line-height:1.36;
  color:var(--kosc);
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}

/* OPINIA na środku */
.opinia figure{ margin-inline:auto; text-align:center; }
.opinia blockquote p{ margin-inline:auto; max-width:32ch; }
.opinia figcaption{ padding-left:0; }
.opinia figcaption::before{
  position:static; display:block; margin:0 auto .8rem; width:2.2rem;
}

/* HERO: cztery pozycje, dwie kolumny, bez wiszącej luki */
.hero__dane{ grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }
@media (min-width:560px){ .hero__dane{ grid-template-columns:repeat(2,1fr); } }

/* SIATKI bez wiszących luk */
.zakres__siatka{ grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); }
@media (min-width:700px) and (max-width:1023px){
  .zakres__siatka,.usterki__lista,.proces__kroki{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .usterki__lista{ grid-template-columns:repeat(3,1fr); }
  .proces__kroki{ grid-template-columns:repeat(4,1fr); }
}

/* REALIZACJE: kafle wideo i zdjęć */
.realizacje__wstep{ color:var(--wierzba); margin:-1.4rem 0 2.4rem; max-width:46ch; }
.realizacje__siatka{ grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
@media (min-width:700px) and (max-width:1099px){ .realizacje__siatka{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .realizacje__siatka{ grid-template-columns:repeat(3,1fr); } }

.film,.robota .zdjecie{
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  border-radius:3px; background:var(--kora);
}
.film img,.robota .zdjecie img{
  width:100%; height:100%; object-fit:cover; border-radius:0;
  transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
.robota .zdjecie{ cursor:zoom-in; }
.robota .zdjecie:hover img,.film:hover img{ transform:scale(1.045); }
.film video{ width:100%; height:100%; object-fit:cover; background:#000; }

.film__graj{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(180deg,rgba(10,13,8,.12),rgba(10,13,8,.5));
  border:0; padding:0;
}
.film__graj span{
  width:4rem; height:4rem; border-radius:999px;
  background:rgba(227,164,75,.94);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  display:block; position:relative;
  transition:transform .25s ease,background-color .25s ease;
}
.film__graj span::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:1.1rem solid var(--noc);
  border-top:.68rem solid transparent; border-bottom:.68rem solid transparent;
}
.film__graj:hover span{ transform:scale(1.08); background:#f0b45f; }
@media (prefers-reduced-motion: reduce){
  .film img,.robota .zdjecie img,.film__graj span{ transition:none; }
}

/* STOPKA: kontakt i formularz */
.stopka__naglowek{
  margin:2.2rem 0 .7rem; color:var(--wierzba);
  font-variation-settings:"wdth" 96,"wght" 500; font-size:.9rem; letter-spacing:.06em;
}
.stopka__kontakt .stopka__naglowek:first-of-type{ margin-top:2.6rem; }

.form{ display:grid; gap:1rem; }
.form__pole{ display:grid; gap:.35rem; margin:0; }
.form__pole label{ color:var(--wierzba); font-size:.9rem; }
.form input[type="text"],.form textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--kosc);
  background:rgba(255,255,255,.045);
  border:1px solid var(--mech); border-radius:3px;
  padding:.7rem .85rem; resize:vertical;
}
.form input[type="text"]::placeholder,.form textarea::placeholder{ color:rgba(154,160,131,.6); }
.form input[type="text"]:focus,.form textarea:focus{ border-color:var(--wierzba); outline:none; }
.form input[type="text"]:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--bursztyn); outline-offset:1px; }
.form__zgoda{
  display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start;
  margin:0; color:var(--wierzba); font-size:.88rem; line-height:1.5;
}
.form__zgoda input{ margin-top:.28rem; accent-color:var(--bursztyn); }
.form__ukryte{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form button{ justify-self:start; cursor:pointer; border:0; font:inherit; }
.form__stan{ margin:0; min-height:1.4em; font-size:.92rem; color:var(--wierzba); }
.form__stan.ok{ color:var(--bursztyn); }
.form__stan.zle{ color:#e08b6b; }

@media (min-width:800px){
  .stopka__glowna{ grid-template-columns:1fr 1fr; gap:4rem; }
}

.stopka__dol{ align-items:center; }
.stopka__autor a{ color:var(--chrom); }
.stopka__autor a:hover{ color:var(--bursztyn); }

/* Tło cytatu musi iść przez całą szerokość, a nie łapać ograniczenia treści sekcji. */
.teza__tlo{ max-width:none; margin:0; }
.teza__tlo::after{
  background:linear-gradient(180deg,rgba(10,13,8,.72) 0%,rgba(10,13,8,.42) 45%,rgba(10,13,8,.8) 100%);
}

/* Cytat: kadr poziomy, żeby auto było widoczne, plus efekt przesuwania tła na dużych ekranach. */
.teza{ padding-block:clamp(6rem,14vw,10rem); }
.teza__tlo{
  background-image:url("img/teza.webp");
  background-position:center 46%;
}
@media (min-width:900px) and (hover:hover){
  .teza__tlo{ background-attachment:fixed; background-size:cover; }
}
.teza__tlo::after{
  background:linear-gradient(180deg,rgba(10,13,8,.78) 0%,rgba(10,13,8,.5) 42%,rgba(10,13,8,.84) 100%);
}

/* Pas z grillem: wyższy, żeby zdjęcie miało czym oddychać. */
.pas img{ height:clamp(13rem,30vw,24rem); object-position:center 52%; }

/* Tekst cytatu leży na jasnej masce auta, więc potrzebuje mocniejszej podkładki. */
.teza__tlo::after{
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(10,13,8,.62) 0%, rgba(10,13,8,0) 100%),
    linear-gradient(180deg,rgba(10,13,8,.8) 0%,rgba(10,13,8,.52) 42%,rgba(10,13,8,.86) 100%);
}
.teza p{ text-shadow:0 2px 10px rgba(0,0,0,.7), 0 1px 34px rgba(0,0,0,.5); }

/* Kadr cytatu: auto siedzi w górnej części zdjęcia, więc tło zaczepiamy wysoko,
   inaczej przy background-attachment:fixed auto ucieka pod dolną krawędź sekcji. */
.teza__tlo{ background-position:center 22%; }
@media (min-width:900px) and (hover:hover){
  .teza__tlo{ background-position:center 26%; }
}

/* Bez background-attachment:fixed. Przy fixed tło jest przypięte do okna, więc widoczny
   wycinek zdjęcia zmieniał się z pozycją przewijania i auto potrafiło zniknąć poza kadrem.
   Stałe tło daje ten sam kadr zawsze. */
@media (min-width:900px) and (hover:hover){
  .teza__tlo{ background-attachment:scroll; }
}
.teza__tlo{ background-position:center center; }
.teza{ padding-block:clamp(5rem,11vw,8rem); }

/* Plik ma nową nazwę, bo obrazy też siedzą w cache na 7 dni i podmiana samej zawartości
   nie dociera do osób, które były na stronie wcześniej. */
.teza__tlo{
  background-image:url("img/teza2.webp");
  background-position:center 58%;
}