/* ============================== BAZA ============================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--orange);color:var(--on-orange)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
button{font-family:inherit}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:var(--maxw-narrow)}
.section{padding:var(--section-y) 0}

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--orange);color:var(--on-orange);padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:0}

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

/* ---------- FontAwesome 7 Pro (duotone) ----------
   Kit moze chodzic w dwoch trybach i motyw musi wygladac tak samo w obu:
     - Web Font (obecny)  -> element zostaje <i>, rozmiar daje font-size
     - SVG                -> Kit podmienia <i> na <svg class="svg-inline--fa">,
                             rozmiar daje width/height
   Dlatego kazdy kontener ikony ustawia --icon, a regulki `svg` nizej sa
   lustrzanym odpowiednikiem tych samych wartosci.
   Obie warstwy duotone dziedzicza `color`; druga dostaje przezroczystosc. */
:root{--fa-secondary-opacity:.42}
.svg-inline--fa{vertical-align:middle}
i[class*="fa-"]{
  font-size:var(--icon,1em);
  line-height:1;
  display:inline-block;
  vertical-align:middle;
}

/* Rozmiar (--icon) i kolor ikon dla trybu Web Font.
   Kolor siedzi na kontenerze, nie na ikonie — dziedzicza go i <i>, i <svg>. */
.btn{--icon:18px}
.nav-social{--icon:19px}
.mm-social{--icon:20px}
.widget .ic{--icon:34px}
.car-media-empty{--icon:56px}
.car-ingredients{--icon:19px}
.car-ingredients i{flex-shrink:0;margin-top:3px}
.btn-order .circ{--icon:16px;color:var(--orange)}
.btn-order-lg .circ{--icon:17px;color:#0d0d0f}
.car-arrow{--icon:22px}
.order-list .chk{--icon:15px;color:var(--orange)}
.sbadge .ic{--icon:20px}
.credits .to-top .ic{--icon:16px}
.order-fab{--icon:20px}
.order-fab i,.order-fab svg{flex-shrink:0}

/* Ikony pozycjonowane absolutnie w polach formularza (CF7 renderuje <i>). */
.field > i{
  position:absolute;left:16px;top:18px;
  font-size:19px;color:var(--orange);
  pointer-events:none;z-index:1;
}

.eyebrow{
  font-family:var(--font-hand);
  color:var(--orange);
  font-size:2rem;line-height:1;
  transform:rotate(-3deg);
  display:inline-block;
  margin-bottom:14px;
}
.accent-inline{color:var(--orange)}
.empty{color:var(--muted);padding:40px 0;text-align:center}

/* ============================== NAVBAR ============================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--nav-h);
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.nav.is-scrolled{background:rgba(6,6,8,.92);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav-inner{height:100%;display:flex;align-items:center;gap:32px}
.brand{flex-shrink:0;display:flex;align-items:center}
.brand img{height:74px;width:auto}
.brand span{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase}

/* auto z obu stron dzieli wolna przestrzen po rowno miedzy logo a nav-right,
   wiec linki siedza posrodku tego, co zostalo — bez sztywnych marginesow,
   ktore rozjezdzaja sie przy kazdej zmianie liczby pozycji w menu. */
.nav-links{
  display:flex;align-items:center;gap:28px;
  margin-left:auto;margin-right:auto;
  font-weight:600;font-size:.82rem;letter-spacing:.02em;
  text-transform:uppercase;
}
.nav-links a{color:var(--text);padding:6px 0;transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--orange)}

.nav-right{display:flex;align-items:center;gap:24px}

.nav-mail{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
  transition:color .2s var(--ease);
}
.nav-mail i,.nav-mail svg{color:var(--orange)}
.nav-mail:hover{color:var(--orange)}

.nav-social{display:flex;align-items:center;gap:20px;margin-right:8px}
.nav-social-link{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
  transition:color .2s var(--ease);
}
.nav-social-link i,.nav-social-link svg{color:var(--orange);transition:color .2s var(--ease)}
.nav-social-link:hover,.nav-social-link:hover i,.nav-social-link:hover svg{color:var(--orange)}
.nav-social-link:hover .nav-social-name{color:var(--orange)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;
  padding:13px 26px;border-radius:var(--radius-pill);cursor:pointer;border:none;
  transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-primary{background:var(--orange);color:var(--on-orange)}
.btn-primary:hover{background:var(--orange-600)}
.btn:active{transform:translateY(1px)}

/* z-index nad panelem mobilnym — burger ma zostac klikalny po otwarciu menu
   i tam zamienia sie w krzyzyk zamykajacy. */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:44px;height:44px;color:var(--text);margin-left:auto;
  position:relative;z-index:51;
}
/* Burger rysowany trzema paskami zamiast ikona z kitu — animacja w krzyzyk
   musi ruszyc w tej samej klatce co panel, a podmiana <i> na <svg> przez
   obserwatora kitu potrafi sie spoznic. */
.nav-toggle-box{display:block;position:relative;width:26px;height:18px;margin:0 auto}
.nav-toggle-box span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle-box span:nth-child(1){top:0}
.nav-toggle-box span:nth-child(2){top:8px}
.nav-toggle-box span:nth-child(3){top:16px}
.nav-toggle[aria-expanded="true"]{color:var(--orange)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{display:none}
/* Panel przykrywa ekran, wiec dokument pod spodem nie moze sie przewijac —
   inaczej po zamknieciu menu ladujemy w zupelnie innym miejscu strony. */
body.menu-open{overflow:hidden}
body.menu-open .nav{background:rgba(6,6,8,.98);box-shadow:none}

/* ============================== HERO ============================== */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:var(--nav-h);
  display:flex;align-items:center;
  background:var(--hero-bg, linear-gradient(120deg,#141417,#050506)) center right / cover no-repeat;
}
.hero .container{width:100%}

/* Warstwy hero, od dolu: [0] wideo -> [1] przyciemnienie -> [2] domkniecie
   dolu -> [3] tresc. Kolejnosc jest jawna, bo wideo jest ELEMENTEM, a tlo
   sekcji maluje sie pod dziecmi — bez tego film zaslonilby gradient. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* `cover` skaluje film tak, by wypelnil cala sekcje — im bardziej proporcje
   pliku odbiegaja od proporcji hero, tym mocniejsze przyblizenie. Dlatego kadr
   i dopasowanie sa sterowalne z ACF, a nie zabetonowane w CSS. */
.hero-video{
  width:100%;height:100%;display:block;
  object-fit:var(--hero-video-fit,cover);
  object-position:var(--hero-video-pos,center);
  /* filter na samym wideo zamiast backdrop-filter na warstwie nad nim —
     backdrop-filter przeliczalby rozmycie tla przy KAZDEJ klatce filmu. */
  filter:saturate(.62) contrast(1.04);
}
/* „Zmiesc calosc” zostawia puste marginesy — musza byc w kolorze tla,
   inaczej przy pionowym filmie widac biale pasy. */
.hero-media{background:var(--ink)}
/* Przyciemnienie siedzi TYLKO po lewej — prawa strona ma zostac czystym
   zdjeciem. Punkty gradientu licza sie od PRAWEJ KRAWEDZI BLOKU TEKSTU, nie
   w procentach ekranu: przy stalej szerokosci .hero-inner (760px) i ruchomym
   marginesie kontenera procenty przesuwalyby zalamanie w tekst na ~1200px. */
.hero{--hero-fade:calc(max(0px, (100% - var(--maxw))/2) + var(--gutter) + 760px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--ink) 0,
    rgba(5,5,6,.94) calc(var(--hero-fade) + 40px),
    rgba(5,5,6,.55) calc(var(--hero-fade) + 190px),
    rgba(5,5,6,.16) calc(var(--hero-fade) + 320px),
    transparent calc(var(--hero-fade) + 430px));
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg, var(--ink) 0%, transparent 22%);
}
.hero-inner{position:relative;z-index:3;padding:56px 0 70px;max-width:760px}

.hero h1{
  font-family:var(--font-display-alt);font-weight:400;
  line-height:.98;letter-spacing:.01em;
  font-size:clamp(2.9rem,7.4vw,7rem);
  margin-bottom:22px;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero h1 .kebab{color:var(--orange);display:block;font-size:12rem;line-height:.92;text-transform:uppercase}
.hero p.lead{color:var(--text-soft);font-size:clamp(1rem,1.4vw,1.18rem);max-width:520px;margin-bottom:34px}

.hero-cta{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hero-cta .btn-primary{padding:17px 30px;font-size:1rem}
.scribble{
  font-family:var(--font-hand);
  color:var(--text-soft);font-size:1.5rem;line-height:1.05;
  transform:rotate(-4deg);position:relative;padding-left:6px;
}
.scribble::before{
  content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F18A1B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='17' y1='7' x2='7' y2='17'/%3E%3Cpolyline points='17 17 7 17 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================== STRIP ============================== */
.strip{background:var(--ink-2);border-top:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.widget{
  display:flex;align-items:flex-start;gap:16px;
  padding:36px 26px;border-right:1px solid var(--line);
  transition:background .2s var(--ease);
}
.widget:last-child{border-right:none}
.widget:hover{background:rgba(255,255,255,.035)}
.widget .ic{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;color:var(--orange)}
.widget .ic svg{width:34px;height:34px}
.widget h3{font-size:1.02rem;font-weight:700;margin-bottom:4px}
.widget p{font-size:.85rem;color:var(--muted);line-height:1.45}

/* ============================== OFERTA ============================== */
.offer{padding:var(--section-y) 0 96px;background:var(--ink)}
.offer-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:40px 48px;margin-bottom:48px}
/* flex:1 1 auto + min-width:0 — bez tego naglowek Anton nie zwija sie ponizej
   swojej max-content i rozpycha dokument na waskich ekranach. */
.offer-title{flex:1 1 auto;min-width:0;max-width:620px}
.offer-title .eyebrow{font-size:1.75rem;margin-bottom:10px}
.offer-title h2{
  font-family:var(--font-display-alt);font-weight:400;text-transform:uppercase;
  line-height:1;letter-spacing:.01em;font-size:clamp(2.2rem,6.2vw,4.5rem);
}
.offer-title h2 .accent{color:var(--orange);display:block}
.offer-intro{margin-top:18px;color:var(--muted);font-size:.95rem;max-width:470px}
.offer-cta{flex:0 0 auto;margin-left:auto}
.offer-cta .btn-primary{padding:17px 30px;font-size:1rem}

/* badge Google */
.gbadge{
  flex:0 0 auto;max-width:300px;margin-left:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:22px 24px;border-radius:18px;background:var(--surface);
}
.gbadge-top{display:flex;align-items:center;gap:14px}
.glogo{
  width:46px;height:46px;flex-shrink:0;border-radius:13px;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.glogo svg{width:26px;height:26px}
.grate-line{display:flex;align-items:center;gap:10px}
.grate{font-family:var(--font-display);font-size:2.1rem;line-height:1;color:var(--text)}
.gstars{position:relative;display:inline-block;font-size:1.15rem;letter-spacing:2px;white-space:nowrap}
.gstars .base{color:rgba(255,255,255,.22)}
.gstars .fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--orange)}
.gcap{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:4px}
.gbadge-sub{font-size:.86rem;color:var(--muted);line-height:1.45;padding-top:13px;border-top:1px solid var(--line)}
.gbadge-sub b{color:var(--text);font-weight:700}

/* karuzela (Swiper) */
.carousel{position:relative}
/* Zapas na uniesienie karty w :hover — bez niego overflow Swipera obcina cien */
.car-swiper{overflow:hidden;padding:10px 6px 16px;margin:-10px -6px -16px}
.car-swiper .swiper-slide{height:auto;display:flex}

.car-card{
  display:flex;flex-direction:column;width:100%;
  background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.car-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.car-media{aspect-ratio:1/1;overflow:hidden;background:var(--ink);position:relative}
.car-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.car-card:hover .car-media img{transform:scale(1.05)}
.car-media-empty{display:grid;place-items:center;width:100%;height:100%;color:var(--line)}
.car-media-empty svg{width:56px;height:56px}
.car-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--orange);color:var(--on-orange);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);
}

.car-body{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px 22px 24px;flex:1}
.car-body h3{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:1.85rem;letter-spacing:.01em;line-height:1;
}
.car-body h3 a{transition:color .2s var(--ease)}
.car-body h3 a:hover{color:var(--orange)}
.car-ingredients{
  display:flex;align-items:flex-start;gap:9px;margin-top:11px;
  color:var(--orange);
  font-family:var(--font-hand);font-size:1.22rem;font-weight:700;line-height:1.15;
}
.car-ingredients svg{width:19px;height:19px;flex-shrink:0;margin-top:3px}
/* Na karcie zostaja dwie linijki skladnikow — dluzsze opisy (Gemuse ma
   dziesiec pozycji) rozpychaly karte na dwa razy wyzsza od sasiadow.
   Calosc klient przeczyta po wejsciu w danie, gdzie tego obciecia nie ma. */
.car-card .car-ingredients span{
  min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* Przerywnik miedzy skladnikami. Wielkosc w `em`, wiec skaluje sie razem
   z Caveatem, a nizsze krycie trzyma go w tle zamiast na rowni z tekstem. */
.car-ingredients .ing-sep{
  font-size:.4em;opacity:.6;vertical-align:middle;margin:0 .55em;
}
/* Tryb SVG kitu: rozmiar niesie width/height, a nie font-size. Wartosc 1em,
   bo regula wyzej zbila juz font-size tego elementu — .4em liczyloby sie
   drugi raz od zmniejszonej podstawy i rombik zszedlby do 2 px. */
.car-ingredients .ing-sep.svg-inline--fa{width:1em;height:1em}

.car-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;width:100%;margin-top:auto;padding-top:22px}
.car-price{font-family:var(--font-display);color:var(--orange);line-height:1;display:flex;align-items:baseline;gap:5px}
.car-price .amount{font-size:2.7rem}
.car-price .cur{font-size:1.05rem;color:var(--text)}
/* „od” przy cenie dania z rozmiarami — ma byc czytelne, ale nie odbierac
   uwagi samej liczbie, stad mniejszy stopien i kolor tekstu. */
.car-price .from{font-family:var(--font-body);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

.btn-order{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--orange);color:var(--on-orange);
  font-weight:800;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  padding:8px 8px 8px 20px;border-radius:var(--radius-pill);
  transition:transform .15s var(--ease),background .2s var(--ease);
}
.btn-order:hover{background:var(--orange-600)}
.btn-order:active{transform:translateY(1px)}
.btn-order .circ{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:var(--on-orange);
  transition:transform .2s var(--ease);
}
.btn-order:hover .circ{transform:translateX(2px)}
.btn-order .circ svg{width:16px;height:16px;color:var(--orange)}

.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(19,19,22,.85);color:var(--text);
  backdrop-filter:blur(6px);border:1px solid var(--line);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.car-arrow svg{width:22px;height:22px}
.car-arrow:hover{border-color:var(--orange);color:var(--orange)}
/* Domyslnie strzalki siedza W SRODKU karuzeli — poza kontener wychodza dopiero
   przy >=1780px, gdzie margines strony faktycznie na to pozwala (patrz responsive.css).
   Odwrotna kolejnosc obcinala je przez overflow-x:hidden na ekranach 1440–1680. */
.car-arrow.prev{left:8px}
.car-arrow.next{right:8px}
.car-arrow.swiper-button-disabled{opacity:.3;cursor:default;pointer-events:none}

.car-dots{display:flex;justify-content:center;gap:10px;margin-top:34px}
.car-dots .swiper-pagination-bullet{
  width:9px;height:9px;border-radius:50%;cursor:pointer;border:none;opacity:1;
  background:rgba(255,255,255,.22);margin:0;
  transition:background .2s var(--ease),width .2s var(--ease);
}
.car-dots .swiper-pagination-bullet-active{background:var(--orange);width:26px;border-radius:5px}

/* ============================== ABOUT ============================== */
.about{padding:90px 0 100px;background:var(--ink-2);border-top:1px solid var(--line);position:relative;overflow:hidden}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  position:relative;z-index:1;
  padding-left:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter)));
}
.about-story .eyebrow{font-size:1.6rem;margin-bottom:8px}
.about-story h2{
  font-family:var(--font-display-alt);font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.01em;
  font-size:clamp(2rem,6.2vw,4.5rem);margin-bottom:22px;
}
.about-story h2 .accent{color:var(--orange);display:block}
.about-story p{color:var(--muted);font-size:1.02rem;max-width:85%;margin-bottom:30px}

.loc-head{font-family:var(--font-hand);font-size:1.5rem;color:var(--muted);margin-bottom:24px;font-weight:700}

.loc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;border-top:1px solid var(--line)}
.loc-row{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 4px;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .2s var(--ease);
}
.loc-row::before{
  content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;background:var(--orange);border-radius:2px;
  transition:transform .2s var(--ease);
}
.loc-row:hover{padding-left:16px}
.loc-row:hover::before{transform:translateY(-50%) scaleY(1)}
.loc-num{
  font-family:var(--font-display);font-size:1.05rem;line-height:1;
  color:var(--orange);opacity:.55;min-width:24px;letter-spacing:.02em;
  transition:opacity .2s var(--ease);
}
.loc-row:hover .loc-num{opacity:1}
.loc-info{flex:1;min-width:0}
.loc-city{
  display:block;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;font-size:1.18rem;line-height:1.05;
  transition:color .2s var(--ease);
}
.loc-row:hover .loc-city{color:var(--orange)}
.loc-addr{display:block;margin-top:4px;font-size:.82rem;color:var(--muted);line-height:1.3}
.loc-row .go{
  align-self:center;width:17px;height:17px;font-size:17px;color:var(--orange);flex-shrink:0;
  opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.loc-row:hover .go{opacity:1;transform:none}

.about-collage{display:flex;gap:14px;align-items:flex-start}
.about-collage .col{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.about-collage .col:nth-child(1){margin-top:40px}
.about-collage .col:nth-child(3){margin-top:20px}
.about-collage figure{
  margin:0;overflow:hidden;border-radius:var(--radius);position:relative;background:var(--ink-2);
  box-shadow:var(--shadow-soft);transition:box-shadow .3s var(--ease);
}
/* Bez aspect-ratio i object-fit — proporcje niesie para atrybutow width/height
   z <img>, wiec pion zostaje pionem, a nic nie jest przycinane. */
.about-collage img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.about-collage figure:hover{z-index:2;box-shadow:0 20px 42px rgba(0,0,0,.6)}
.about-collage figure:hover img{transform:scale(1.06)}

/* ============================== ZAMOW / FORMULARZ ============================== */
.order{padding:90px 0 100px;background:var(--ink)}
.order-grid{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:stretch}

.order-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:44px 40px;color:var(--on-orange);
  display:flex;flex-direction:column;
  background:
    linear-gradient(160deg, rgba(241,138,27,.94) 0%, rgba(224,124,14,.82) 46%, rgba(201,109,9,.7) 100%),
    var(--order-bg, linear-gradient(160deg,#f18a1b,#c96d09)) center/cover no-repeat;
}
.order-banner .eyebrow{color:var(--on-orange);font-size:1.7rem;transform:rotate(-3deg);opacity:.9}
.order-banner h2{
  font-family:var(--font-display-alt);font-weight:400;text-transform:uppercase;
  line-height:1;letter-spacing:.01em;font-size:clamp(2.3rem,6.2vw,4.5rem);
  margin:6px 0 16px;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.28);
}
.order-banner p{color:rgba(15,15,17,.86);font-size:.98rem;font-weight:500;margin-bottom:24px;max-width:340px}
.order-list{display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.order-list li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1rem}
.order-list .chk{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--on-orange)}
.order-list .chk svg{width:15px;height:15px;color:var(--orange)}

.btn-order-lg{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  background:#0d0d0f;color:#fff;
  font-weight:800;font-size:.98rem;letter-spacing:.03em;text-transform:uppercase;
  padding:16px 16px 16px 26px;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.3);margin-top:auto;
  transition:transform .15s var(--ease),background .2s var(--ease);
}
.btn-order-lg:hover{background:#000;transform:translateY(-2px)}
.btn-order-lg .circ{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--orange)}
.btn-order-lg .circ svg{width:17px;height:17px;color:#0d0d0f}

.order-form{border-radius:var(--radius-xl);padding:44px 44px 40px;background:var(--surface)}
.order-form .eyebrow{font-size:1.6rem;margin-bottom:6px}
.order-form h2{
  font-family:var(--font-display-alt);font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.01em;font-size:clamp(1.9rem,6.2vw,4.5rem);margin-bottom:12px;
}
.order-form .form-sub{color:var(--muted);font-size:1rem;margin-bottom:28px;max-width:520px}
.form-missing{color:var(--orange);font-size:.9rem;padding:16px;border:1px dashed var(--orange);border-radius:var(--radius)}

.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field{position:relative}
.field.full{grid-column:1 / -1}
.field > svg{position:absolute;left:16px;top:18px;width:19px;height:19px;color:var(--orange);pointer-events:none;z-index:1}
.field .chev{position:absolute;right:16px;top:19px;left:auto;width:16px;height:16px;font-size:16px;color:var(--muted);pointer-events:none}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface-2);border:1px solid transparent;border-radius:12px;
  padding:15px 16px 15px 46px;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{padding-top:15px;min-height:130px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px}
.field select option{background:var(--surface-2);color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(241,138,27,.16)}

/* CF7 opakowuje kontrolki w <span class="wpcf7-form-control-wrap"> — musi byc przezroczysty dla layoutu */
.wpcf7-form-control-wrap{display:block}
.wpcf7-not-valid-tip{display:block;margin-top:7px;font-size:.78rem;color:#ff8a6b}
.wpcf7-response-output{
  grid-column:1 / -1;margin:18px 0 0;padding:14px 18px;
  border:1px solid var(--line);border-radius:12px;font-size:.9rem;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(120,220,120,.5);color:#a9e6a9}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:rgba(255,120,90,.5);color:#ff8a6b}
.wpcf7-spinner{margin:0 0 0 12px}

.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.consent{display:flex;align-items:flex-start;gap:11px;font-size:.82rem;color:var(--muted);max-width:520px;line-height:1.45;cursor:pointer}
.consent .wpcf7-list-item{margin:0}
.consent .wpcf7-list-item-label{display:none}
.consent input[type=checkbox]{
  flex-shrink:0;appearance:none;-webkit-appearance:none;margin-top:1px;
  width:20px;height:20px;border:1.5px solid rgba(255,255,255,.28);border-radius:6px;
  background:var(--surface-2);cursor:pointer;position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.consent input[type=checkbox]:checked{background:var(--orange);border-color:var(--orange)}
.consent input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-orange);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consent a{color:var(--orange)}
.form-foot .btn-primary{padding:16px 28px}

/* ============================== SOCIAL ============================== */
.social{padding:92px 0 76px;background:var(--ink-2);border-top:1px solid var(--line);text-align:center;overflow:hidden}
.social .eyebrow{font-size:1.6rem;margin-bottom:6px}
.social h2{
  font-family:var(--font-display-alt);font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.01em;font-size:clamp(2rem,6.2vw,4.5rem);margin-bottom:16px;
}
.social-intro{color:var(--muted);font-size:1.05rem;max-width:620px;margin:0 auto 30px}

.social-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:12px}
.sbadge{
  display:inline-flex;align-items:center;gap:12px;text-align:left;
  padding:10px 20px 10px 12px;border-radius:var(--radius-pill);
  background:var(--surface);transition:transform .2s var(--ease),background .2s var(--ease);
}
.sbadge:hover{transform:translateY(-2px);background:var(--surface-2)}
.sbadge .ic{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}
.sbadge .ic svg{width:20px;height:20px}
.sbadge.fb .ic{background:rgba(24,119,242,.16);color:#3b82f6}
.sbadge.ig .ic{background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#bc1888 90%);color:#fff}
/* TikTok nie ma jednego koloru tla — znak marki jest czarny na bialym, wiec
   na ciemnej karcie odwracamy kolko, zamiast wymyslac tint pod glify. */
.sbadge.tt .ic{background:#fff;color:#010101}
.sbadge b{display:block;font-size:.9rem;font-weight:700;line-height:1.1}
.sbadge > span > span{font-size:.76rem;color:var(--muted)}

.ig-rows{margin-top:48px;display:flex;flex-direction:column;gap:16px}
.ig-row{overflow:hidden}
.ig-track{display:flex;gap:16px;width:max-content}
.ig-row.left .ig-track{animation:igLeft 46s linear infinite}
.ig-row.right .ig-track{animation:igRight 46s linear infinite}
.ig-rows:hover .ig-track{animation-play-state:paused}
.ig-tile{flex:0 0 auto;width:230px;height:230px;border-radius:16px;overflow:hidden;position:relative;background:var(--ink-2);display:block}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.ig-tile::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease);
  background:linear-gradient(0deg,rgba(220,39,67,.35),rgba(0,0,0,0) 60%);
}
.ig-tile:hover img{transform:scale(1.06)}
.ig-tile:hover::after{opacity:1}
.ig-tile .ig-mark{
  position:absolute;top:12px;right:12px;width:24px;height:24px;font-size:24px;color:#fff;
  opacity:0;transition:opacity .3s var(--ease);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.ig-tile:hover .ig-mark{opacity:1}
@keyframes igLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
@keyframes igRight{from{transform:translateX(calc(-50% - 8px))}to{transform:translateX(0)}}

/* ============================== STOPKA ============================== */
.footer{
  position:relative;overflow:hidden;
  background:var(--ink);border-top:1px solid var(--line);padding:70px 0 0;
  --footer-bg:url('https://www.sonovi.pl/wp-content/uploads/2026/08/SM-04.jpg');
}
/* Zdjecie w tle stopki. Krycie i maska sa rozdzielone celowo: opacity ustala
   PULAP widocznosci (20%), maska wygasza go do zera po lewej, gdzie siedza
   logo i dane firmy. Jedno bez drugiego albo zabija zdjecie, albo tekst. */
.footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--footer-bg) center right / cover no-repeat;
  filter:grayscale(1) contrast(1.06);
  opacity:.2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 40%,#000 74%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 40%,#000 74%);
}
.footer > .container{position:relative;z-index:1}
.foot-cols{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.foot-logo{height:66px;width:auto;margin-bottom:16px}
.foot-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:16px}
.foot-about p{font-size:.9rem;color:var(--muted);line-height:1.7}
.foot-about b{color:var(--text);font-weight:600}
.foot-list li{margin-bottom:14px}
.foot-list a{display:block;transition:color .2s var(--ease)}
.foot-list a:hover .fl-city{color:var(--orange)}
.fl-city{display:block;font-weight:700;font-size:.95rem}
.fl-addr{display:block;font-size:.8rem;color:var(--muted);margin-top:1px}
.foot-col .gbadge{max-width:none;margin-left:0}

.credits{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px 0;font-size:.82rem;color:var(--muted)}
.credits .mid{text-align:center}
.credits .mid a{color:var(--text)}
.credits a:hover{color:var(--orange)}
.credits .to-top{justify-self:end;display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.credits .to-top .ic{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:border-color .2s var(--ease),color .2s var(--ease)}
.credits .to-top:hover .ic{border-color:var(--orange);color:var(--orange)}
.credits .to-top .ic svg{width:16px;height:16px}

/* pływający przycisk */
.order-fab{
  position:fixed;right:24px;bottom:24px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;
  padding:14px 24px 14px 22px;border-radius:var(--radius-pill);
  background:var(--orange);color:var(--on-orange);font-weight:800;font-size:.92rem;
  letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:background .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease),visibility .2s var(--ease);
}
.order-fab:hover{background:var(--orange-600);transform:translateY(-2px)}
.order-fab svg{width:20px;height:20px}
/* Na samym dole FAB nachodzi na „Do gory" w stopce. Chowamy go tam zamiast
   odsuwac — w zasiegu wzroku jest juz sekcja zamowienia i przycisk w pasku. */
.order-fab.is-hidden{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
/* FAB ma z-index wyzszy niz panel — przy otwartym menu musi zniknac, bo inaczej
   wisi nad lista i dubluje przycisk zamowienia, ktory panel ma na dole. */
body.menu-open .order-fab{opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}