/* ============================================================
   STOLBASZ — premium, architektoniczny B2B fit-out
   Jasna paleta, zero brązu. System wg premium-web-craft.
   Projekt strony: Krzysztof Brzeziński
   ============================================================ */

:root{
  /* PALETA — jasna, architektoniczna, chłodna */
  --paper:#FBF6EE;          /* główne tło */
  --paper-2:#F0E5D6;        /* sekcje alternatywne (chłodny jasny szary) */
  --paper-3:#F0E5D6;        /* delikatne wypełnienia */
  --ink:#2A201A;            /* tekst główny — chłodny grafit */
  --ink-soft:#4A3B2F;       /* nagłówki drugorzędne */
  --muted:#8C8175;          /* tekst poboczny */
  --line:rgba(42,32,26,.12);/* hairline */
  --accent:#B84A28;         /* stonowany petrol-slate — jedyny akcent */
  --accent-d:#97381C;
  --accent-soft:rgba(184,74,40,.10);
  --dark:#2A201A;           /* sekcje ciemne (stopka/CTA) */

  /* ODSTĘPY — skala 4/8 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* TYPOGRAFIA — fluid clamp() */
  --text-sm:clamp(.82rem,.8rem + .1vw,.9rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.1rem);
  --text-lg:clamp(1.12rem,1.05rem + .3vw,1.3rem);
  --text-h3:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --text-h2:clamp(1.9rem,1.5rem + 1.9vw,2.8rem);
  --text-h1:clamp(2.6rem,1.9rem + 3.6vw,4.6rem);

  /* PROMIENIE — architektoniczne, raczej ostre */
  --r-sm:3px; --r-md:6px; --r-lg:10px;

  /* RUCH */
  --ease:cubic-bezier(.25,.46,.45,.94); --dur:.24s;

  /* CIENIE — miękkie, warstwowe */
  --sh-sm:0 1px 2px rgba(16,24,32,.04), 0 2px 8px rgba(16,24,32,.05);
  --sh-md:0 2px 6px rgba(16,24,32,.05), 0 12px 28px -8px rgba(16,24,32,.12);
  --sh-lg:0 6px 14px rgba(16,24,32,.07), 0 26px 56px -18px rgba(16,24,32,.22);

  --hairline:1px solid var(--line);

  --font-display:'Bodoni Moda',serif;
  --font-body:'Hanken Grotesk',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(92%,1180px);margin-inline:auto}
section{padding-block:clamp(52px,6.5vw,96px)}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:var(--text-h1);letter-spacing:-.035em}
h2{font-size:var(--text-h2);letter-spacing:-.025em}
h3{font-size:var(--text-h3)}
p{max-width:65ch}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block}

.muted{color:var(--muted)}
.lead{font-size:var(--text-lg);line-height:1.55;color:var(--ink-soft);max-width:50ch}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-weight:600;font-size:var(--text-sm);letter-spacing:.02em;
  padding:var(--space-4) var(--space-6);
  border-radius:var(--r-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
  cursor:pointer;border:1px solid transparent;
}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-sm)}
.btn-accent:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-accent:active{transform:translateY(0);box-shadow:var(--sh-sm)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--hairline);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.04em}
.brand .sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);position:relative;padding-block:4px;transition:color var(--dur) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links .btn{padding:var(--space-2) var(--space-5)}
/* przyciski w nav: właściwy kolor (przebij .nav-links a) + bez podkreślenia */
.nav-links a.btn-accent{color:#fff}
.nav-links a.btn-ghost,.nav-links a.btn-light{color:var(--ink)}
.nav-links a.btn::after{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:var(--dur)}

/* ---------- HERO (split) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:var(--hairline)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;
  padding-block:clamp(36px,4.5vw,64px)}
.hero-copy .eyebrow{margin-bottom:var(--space-5)}
.hero-copy h1{margin-bottom:var(--space-5)}
.hero-copy .lead{margin-bottom:var(--space-7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero-art{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,24,28,.28))}
.hero-badge{position:absolute;left:var(--space-5);bottom:var(--space-5);z-index:2;
  background:rgba(252,252,251,.94);backdrop-filter:blur(4px);
  border-radius:var(--r-md);padding:var(--space-4) var(--space-5);box-shadow:var(--sh-md);max-width:78%}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em}
.hero-badge span{font-size:var(--text-sm);color:var(--muted)}

/* ---------- HERO duży / kinowy (strona główna) ---------- */
.hero-cine{position:relative;min-height:clamp(560px,82vh,840px);min-height:clamp(560px,82svh,840px);display:flex;align-items:center;overflow:hidden;border-bottom:var(--hairline)}
.hero-cine>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-cine::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(13,18,23,.86) 0%,rgba(13,18,23,.64) 32%,rgba(13,18,23,.24) 62%,rgba(13,18,23,.04) 100%)}
.hero-cine .wrap{position:relative;z-index:2;padding-block:var(--space-8)}
.hero-cine .hero-copy{max-width:660px}
.hero-cine .eyebrow{color:#fff;margin-bottom:var(--space-5)}
.hero-cine .eyebrow::before{background:#fff}
.hero-cine h1{color:#fff;margin-bottom:var(--space-5);font-size:clamp(2.9rem,2rem + 4.4vw,5.2rem)}
.hero-cine .lead{color:rgba(255,255,255,.92);max-width:48ch;margin-bottom:var(--space-7)}
.hero-cine .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
@media(max-width:680px){
  .hero-cine{min-height:clamp(520px,76vh,640px);min-height:clamp(520px,76svh,640px);align-items:flex-end}
  .hero-cine::after{background:linear-gradient(0deg,rgba(13,18,23,.9) 6%,rgba(13,18,23,.45) 55%,rgba(13,18,23,.25) 100%)}
  .hero-cine .wrap{padding-bottom:var(--space-9)}
}

/* full-bleed hero variant (podstrony) */
.pagehead{position:relative;min-height:46vh;min-height:46svh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:var(--hairline)}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,28,.25),rgba(18,24,28,.62))}
.pagehead .wrap{position:relative;z-index:2;padding-block:var(--space-9);color:#fff}
.pagehead h1{color:#fff;max-width:18ch}
.pagehead .eyebrow{color:#fff}
.pagehead .eyebrow::before{background:#fff}
.pagehead p{color:rgba(255,255,255,.86);margin-top:var(--space-4);max-width:54ch}

/* ---------- STRIP (pasek skrótów / liczby) ---------- */
.strip{background:var(--dark);color:#fff}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);padding-block:var(--space-8)}
.strip .item .k{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:#fff}
.strip .item .v{font-size:var(--text-sm);color:rgba(255,255,255,.66);margin-top:var(--space-2);line-height:1.45}
.strip .item{border-left:2px solid var(--accent);padding-left:var(--space-5)}

/* ---------- SECTION HEAD ---------- */
.head{max-width:48rem;margin-bottom:var(--space-8)}
.head.center{margin-inline:auto;text-align:center}
.head .eyebrow{margin-bottom:var(--space-4)}
.head h2{margin-bottom:var(--space-4)}
.head p{color:var(--muted);font-size:var(--text-lg);line-height:1.55}
.head.center p{margin-inline:auto}

/* ---------- INTRO SPLIT ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:1.08fr .92fr}
.split.rev .split-art{order:-1}
.split-art{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.split-art img{width:100%;height:100%;object-fit:cover}
.split-copy h2{margin-bottom:var(--space-5)}
.split-copy p+p{margin-top:var(--space-4)}
.split-copy .btn{margin-top:var(--space-6)}

/* ---------- SERVICES (zakres) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.svc{background:#fff;border:var(--hairline);border-radius:var(--r-md);padding:var(--space-7) var(--space-6);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--accent);transition:height var(--dur) var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.svc:hover::before{height:100%}
.svc .ic{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--space-4)}
.svc h3{margin-bottom:var(--space-3);font-size:1.22rem}
.svc p{color:var(--muted);font-size:var(--text-base);line-height:1.6}

/* big detailed service rows */
.svc-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,60px);align-items:center;padding-block:var(--space-8)}
.svc-row+.svc-row{border-top:var(--hairline)}
.svc-row.rev{grid-template-columns:1.2fr .8fr}
.svc-row.rev .svc-row-art{order:-1}
.svc-row-art{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.svc-row-art img{width:100%;height:100%;object-fit:cover}
.svc-row h3{font-size:1.5rem;margin-bottom:var(--space-4)}
.svc-row .num{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:var(--space-3)}
.svc-row ul{list-style:none;margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.svc-row li{position:relative;padding-left:var(--space-5);color:var(--muted);font-size:var(--text-base)}
.svc-row li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}

/* ---------- GALLERY (realizacje) ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4);grid-auto-rows:200px}
/* GALERIA MASONRY — pionowe zdjęcia (portrety beauty/wellness) bez przycinania: kolumny, height auto */
.gallery-masonry{column-count:3;column-gap:var(--space-4)}
@media(max-width:900px){.gallery-masonry{column-count:2}}
@media(max-width:560px){.gallery-masonry{column-count:1}}
.gallery-masonry .m-tile{break-inside:avoid;margin:0 0 var(--space-4);padding:0;position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line)}
.gallery-masonry .m-tile img{width:100%;height:auto;display:block}
.gallery-masonry .m-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);font-size:var(--text-sm)}
.tile{position:relative;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover{box-shadow:var(--sh-md)}
.tile:hover img{transform:scale(1.05)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5) var(--space-4) var(--space-4);
  background:linear-gradient(transparent,rgba(18,24,28,.78));color:#fff;
  font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateY(8px);transition:var(--dur) var(--ease)}
.tile:hover .cap{opacity:1;transform:translateY(0)}
.tile .cap small{display:block;font-weight:400;opacity:.78;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;margin-top:3px}
/* bento spans */
.t-wide{grid-column:span 6}
.t-tall{grid-column:span 6;grid-row:span 2}
.t-std{grid-column:span 6}
.t-third{grid-column:span 4}
.t-two3{grid-column:span 8}

/* ---------- TRUST / WIARYGODNOŚĆ ---------- */
.trust{background:var(--paper-2)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.trust-card{background:#fff;border-radius:var(--r-md);padding:var(--space-7) var(--space-6);box-shadow:var(--sh-sm);border-top:3px solid var(--accent)}
.trust-card .big{font-family:var(--font-display);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.trust-card h3{font-size:1.12rem;margin:var(--space-3) 0 var(--space-2)}
.trust-card p{color:var(--muted);font-size:var(--text-base);line-height:1.55}

/* ---------- CTA band ---------- */
.cta{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--space-7);align-items:center;position:relative;z-index:2}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.74);margin-top:var(--space-4)}
.cta-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.cta::before{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.info-list{display:flex;flex-direction:column;gap:var(--space-2)}
.info-row{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-4);border-bottom:var(--hairline)}
.info-row .ic{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:1.05rem}
.info-row .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.info-row .val{font-weight:600;font-size:var(--text-base);margin-top:2px}
.info-row a.val:hover{color:var(--accent)}
.map{border:none;border-radius:var(--r-lg);box-shadow:var(--sh-md);width:100%;height:100%;min-height:380px;filter:grayscale(.2) contrast(1.02)}
.form{background:#fff;border:var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--sh-sm)}
.form .fld{margin-bottom:var(--space-5)}
.form label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.form input,.form textarea{width:100%;font-family:inherit;font-size:var(--text-base);color:var(--ink);
  padding:var(--space-4);border:var(--hairline);border-radius:var(--r-sm);background:var(--paper);transition:border-color var(--dur)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.form textarea{resize:vertical;min-height:120px}
.form .note{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-3)}

/* ---------- FOOTER ---------- */
footer{background:var(--dark);color:#fff;padding-block:var(--space-9) var(--space-6)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-7);margin-bottom:var(--space-8)}
.foot-brand .name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.04em}
.foot-brand p{color:rgba(255,255,255,.62);margin-top:var(--space-4);font-size:var(--text-base);max-width:38ch}
.foot-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--space-4)}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.82);font-size:var(--text-base);margin-bottom:var(--space-3)}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--space-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
  font-size:var(--text-sm);color:rgba(255,255,255,.55)}
.foot-bot a:hover{color:#fff}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-grid,.split,.split.rev,.svc-row,.svc-row.rev,.cta .wrap,.contact-grid,.foot-grid{grid-template-columns:1fr}
  .split.rev .split-art,.svc-row.rev .svc-row-art{order:0}
  .hero-art{aspect-ratio:16/10;max-height:420px}
  .strip .wrap{grid-template-columns:repeat(2,1fr);gap:var(--space-7)}
  .gallery{grid-auto-rows:180px}
  .t-wide,.t-tall,.t-std,.t-third,.t-two3{grid-column:span 6}
  .t-tall{grid-row:span 1}
  .cta-actions{flex-direction:row;flex-wrap:wrap}
  .foot-grid{gap:var(--space-6)}
}
@media(max-width:680px){
  .nav-links{position:fixed;inset:72px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--space-4) 6%;border-bottom:var(--hairline);box-shadow:var(--sh-md);
    transform:translateY(-120%);transition:transform var(--dur) var(--ease)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding-block:var(--space-4);border-bottom:var(--hairline)}
  .nav-links .btn{margin-top:var(--space-3);justify-content:center}
  .nav-toggle{display:flex}
  .strip .wrap{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(6,1fr)}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   PREMIUM LAYER — destylat deep-researchu branż (anty-AI, spokój).
   Zmienne STOLBASZ (--accent/--ink/--paper/--line/--dark). Ruch ledwo
   zauważalny, krzywa cubic-bezier(.16,.84,.44,1); prefers-reduced-motion
   pokryte blanketem wyżej. Karty hairline zamiast cieni = #1 sygnał „nie-AI".
   ============================================================ */

/* więcej oddechu między sekcjami (liderzy: 110-130px) */
section{padding-block:clamp(64px,8vw,128px)}

/* 1) Aksamitny reveal — dłuższa, miękka krzywa zamiast „skoku" */
.reveal{transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1);will-change:opacity,transform}
/* stagger TYLKO w galerii (tam pozycja = porządek dzieci) */
.gallery .reveal:nth-child(2){transition-delay:.07s}
.gallery .reveal:nth-child(3){transition-delay:.14s}
.gallery .reveal:nth-child(4){transition-delay:.21s}
.gallery .reveal:nth-child(5){transition-delay:.28s}
.gallery .reveal:nth-child(6){transition-delay:.35s}

/* 2) Hero STATYCZNY na .hero-cine — Ken Burns CAŁKIEM WYŁĄCZONY 26.06 (3. zgłoszenie Szymona).
   GENEZA: animowanie scale na <img> hero z teksturami (cegły/framugi) re-samplinguje obraz
   klatka po klatce → na części ekranów drobne drganie/shimmer = „heroshot się trzęsie".
   translateY usunięto wcześniej, scale-only + will-change/GPU NIE wystarczyły do GWARANCJI gładkości.
   Krzysztof zażądał pewności („make sure, że błąd się nie pojawi") > efekt. Zero animacji = 0% drgania.
   Delikatny zoom zostaje TYLKO w pełnoekranowych hero gastro/studio (hg-bg/hs-bg — tło, inny
   mechanizm, chwalone, nigdy nie zgłaszane). NIE wracać do KB na .hero-cine bez realnego testu
   na sprzęcie klienta — to ryzyko regresji „trzęsienia”. */
/* BEZPIECZNY "wow" na hero = jednorazowy FADE-IN (opacity), nie zoom.
   opacity nie dotyka bitmapy → gładkie na KAŻDYM zdjęciu/ekranie/GPU, zero ryzyka migotania.
   Geometryczny ruch (scale/translate) na .hero-cine jest ZAKAZANY (bramka pilnuje). */
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.hero-cine>img{transform:none;animation:heroFade 1.1s ease-out both}

/* 3) Akcentowy hairline pod nagłówkiem sekcji, który „rysuje się" przy wejściu */
.head h2{position:relative;padding-bottom:18px}
.head h2::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width 1s cubic-bezier(.16,.84,.44,1) .15s}
.head.center h2::after{left:50%;transform:translateX(-50%)}
.head.reveal.in h2::after,.head.center.reveal.in h2::after{width:54px}

/* 4) Karty HAIRLINE zamiast cieni/zaokrągleń (najmocniejszy anty-AI detal) */
.svc{background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none}
.svc:hover{box-shadow:none;border-color:var(--accent);transform:translateY(-3px)}
.trust-card{background:transparent;box-shadow:none;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--r-sm)}
.tile{box-shadow:none;border-radius:var(--r-sm)}
.tile:hover{box-shadow:none}

/* 5) Sticky-nav kondensuje się po przewinięciu (sygnał dopracowania) */
.nav{transition:box-shadow .4s ease,background .4s ease}
.nav.is-stuck{box-shadow:0 1px 0 var(--line),0 14px 30px -24px rgba(0,0,0,.45)}
.nav-inner{transition:height .35s var(--ease)}
.nav.is-stuck .nav-inner{height:60px}

/* 6) MANIFESTO — pełnoekranowy cytat-bohater (zastępuje generyczne „Dlaczego my") */
.manifesto{background:var(--paper-2);text-align:center}
.manifesto .wrap{max-width:60rem}
.manifesto p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,1rem + 2.4vw,2.8rem);line-height:1.32;color:var(--ink-soft);margin-inline:auto;max-width:26ch;position:relative;padding-top:var(--space-8)}
.manifesto p::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:1px;background:var(--accent)}
.manifesto p span{color:var(--accent);font-style:italic}

/* 7) GATEWAYS — 3 duże bramy-zdjęcia (zamiast paska menu usług) */
.gateways{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.gateway{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-sm);display:block}
.gateway img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease)}
.gateway::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(18,24,28,.74))}
.gateway:hover img{transform:scale(1.05);filter:brightness(1.05)}
.gateway .g-ttl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-6) var(--space-5);color:#fff;font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.01em;line-height:1.15}
.gateway .g-ttl small{display:block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;opacity:.82;letter-spacing:.03em;margin-top:5px}
@media(max-width:760px){.gateways{grid-template-columns:1fr}.gateway{aspect-ratio:16/10}}

/* 8) LOGO klienta w nagłówku (gdy podane --logo) */
.brand-logo{height:40px;width:auto;max-width:220px;object-fit:contain;display:block}
.nav.is-stuck .brand-logo{height:34px}
@media(max-width:680px){.brand-logo{height:32px}}

/* === rodzina: gastro === */
/* ============================================================
   RODZINA: GASTRO (restauracja / kawiarnia / bar / pizzeria)
   Doklejane NA WIERZCH base.css. Dziedziczy paletę/fonty skórki gastro (Bodoni Moda + terakota).
   Filozofia: APETYT + REZERWACJA STOLIKA (nie zaufanie/wycena jak u fachowca).
   Menu = kategorie BEZ zmyślonych dań/cen (uczciwość); godziny tylko z reconu.
   ============================================================ */

/* --- Galeria atmosfery: gutterless, ostre rogi (food/wnętrze, nie "dokumentacja") --- */
.gallery{gap:3px}
.tile{border-radius:2px;box-shadow:none}
.tile:hover{box-shadow:none}

/* --- MENU: kategorie (nazwa serif + opis, hairline) - BEZ wymyslonych dań i cen --- */
.menu-sec{background:var(--paper-2)}
.menu-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-7) var(--space-8);max-width:62rem;margin:0 auto}
.menu-cat{border-top:1px solid var(--accent);padding-top:var(--space-4)}
.menu-cat h3{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.02em;margin-bottom:var(--space-3)}
.menu-cat p{color:var(--muted);font-size:var(--text-base);line-height:1.6}
.menu-note{text-align:center;color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-8);max-width:50ch;margin-inline:auto}
@media(max-width:760px){.menu-cats{grid-template-columns:1fr;gap:var(--space-6)}}

/* --- KARTA GODZIN (renderowana tylko z realnych danych) --- */
.godz{max-width:30rem}
.godz-row{display:flex;justify-content:space-between;gap:var(--space-5);border-bottom:1px solid var(--line);padding-block:var(--space-3)}
.godz-row b{font-weight:600;color:var(--ink)}
.godz-row span{color:var(--muted)}

/* --- STICKY-RESERVE: dolny pasek mobile (gastro-odpowiednik sticky-call) --- */
.sticky-reserve{display:none}
@media(max-width:820px){
  .sticky-reserve{display:grid;grid-template-columns:1fr auto;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--line);box-shadow:0 -6px 20px -10px rgba(0,0,0,.4)}
  .sticky-reserve a{padding:15px 8px;text-align:center;font-weight:700;font-size:.95rem;letter-spacing:.01em}
  .sr-book{background:var(--accent);color:#fff}
  .sr-call{background:var(--paper);color:var(--ink);padding-inline:22px}
  body{padding-bottom:56px}
}

/* ============================================================
   FAZA 3 - OSOBNY UKŁAD GASTRO (wzór: topowe restauracje - Noma/Disfrutar/Septime/Alchemist; research wf_c20bffea).
   Hero MINIMALNY: samo pełnoekranowe zdjęcie + 1 krótka linijka w DOLNYM-LEWYM rogu. Reszta = oddech.
   Nazwa pada RAZ - jako logo w navie, NIGDY dublowana wielkim tytułem (to #1 tell taniej strony).
   Nav: logo z LEWEJ (split), przezroczysty nad zdjęciem, lity po scrollu. CTA "Rezerwacja" = obrys w navie, nie guzik na środku.
   ============================================================ */
.hero-gastro{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-gastro .hg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:hgKen 28s ease-out infinite alternate}
@keyframes hgKen{from{transform:scale(1.05)}to{transform:scale(1.13)}}
/* overlay: ciemny TYLKO u dołu (pod linijkę), góra/środek zdjęcia oddychają */
.hero-gastro .hg-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,6,4,0) 0%,rgba(8,6,4,0) 52%,rgba(8,6,4,.68) 100%)}
.hg-tagline{position:relative;z-index:2;margin:0 0 clamp(2.6rem,7vh,5rem) clamp(1.4rem,5vw,4rem);
  font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.08;letter-spacing:.005em;
  color:#f5f1ea;max-width:24ch;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hg-since{font-family:var(--font-display);font-weight:500;font-size:.62em;letter-spacing:.01em;
  color:rgba(245,241,234,.86);white-space:nowrap}
@media(max-width:640px){.hg-tagline{font-size:clamp(2rem,8vw,2.6rem);margin-bottom:clamp(2rem,9vh,3.4rem)}}

/* ============================================================
   NAWIGACJA GASTRO - styl NOBU (research wf_d6d990de + wf_a8c0864c, żywy kod noburestaurants.com).
   3 strefy, STAŁA wysokość 64px (jak Nobu). JEDEN kontroler gastro.js steruje stanami kierunkowo:
   .nav-hidden (chowanie w dół) + .nav-solid (lity krem przy scrollu w górę). Histereza = brak migania.
   is-stuck (base.js, twardy próg 24px) NEUTRALIZOWANE wizualnie - inaczej base walczyło z gastro i krem migał przy górze.
   ============================================================ */
.nav{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;z-index:100;
  transition:transform .35s var(--ease),background .35s ease,box-shadow .35s ease}
.nav.nav-hidden{transform:translateY(-100%)}
/* NEUTRALIZACJA base is-stuck dla gastro (gastro.js używa nav-solid; base.js dalej rusza is-stuck, ale bez efektu wizualnego) */
.nav.is-stuck{background:transparent;box-shadow:none;border-bottom-color:transparent}
.nav.is-stuck .nav-inner{height:76px}
/* SCRIM: ciemny gradient pod navem -> biały tekst czytelny nad zdjęciem; znika gdy nav lity */
.nav::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;
  transition:opacity .35s ease;background:linear-gradient(180deg,rgba(8,6,4,.55) 0%,rgba(8,6,4,0) 100%)}
.nav.nav-solid::after{opacity:0}
/* WORDMARK: nazwa Bodoni wersaliki + miasto obok (kreska akcentu) */
.nav .brand{flex-direction:row;align-items:baseline;gap:.6rem;line-height:1}
.nav .brand .name{color:#f5f1ea;font-family:var(--font-display);font-weight:600;font-size:1.5rem;text-transform:uppercase;letter-spacing:.14em}
.nav .brand .sub{margin-top:0;padding-left:.65rem;border-left:1px solid currentColor;
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,234,.82)}
/* LINKI: sans wersaliki, cienki animowany underline */
.nav .nav-links a{color:rgba(245,241,234,.9);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding-block:6px}
.nav .nav-links a:hover,.nav .nav-links a.active{color:#fff}
.nav .nav-links a::after{background:#fff;height:1px}
.nav .nav-toggle span{background:#f5f1ea}
/* CTA "Rezerwacja": bazowo pełna terakota (czytelna na kremowym menu mobilnym) */
.nav .nav-links a.btn-accent{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:.5rem 1.1rem;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:none}
.nav .nav-links a.btn-accent:hover{transform:none;box-shadow:none}
/* STAN LITY (nav-solid - gastro.js dodaje przy scrollu w GÓRĘ): krem + ciemny tekst + terakota */
.nav.nav-solid{background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:var(--hairline)}
.nav.nav-solid .brand .name{color:var(--ink)}
.nav.nav-solid .brand .sub{color:var(--accent)}
.nav.nav-solid .nav-links a{color:var(--ink-soft)}
.nav.nav-solid .nav-links a:hover,.nav.nav-solid .nav-links a.active{color:var(--ink)}
.nav.nav-solid .nav-links a::after{background:var(--accent)}
.nav.nav-solid .nav-toggle span{background:var(--ink)}
/* chowany nav ZAWSZE przezroczysty (nie mignie kremem zjeżdżając w górę) */
.nav.nav-solid.nav-hidden{background:transparent;box-shadow:none;border-bottom-color:transparent}
/* ===== DESKTOP (>=681px): 3 strefy, STAŁA wysokość 64px ===== */
@media(min-width:681px){
  .nav .nav-inner{position:relative;height:74px}
  .nav .nav-links{flex:1;justify-content:center;gap:clamp(1rem,2.2vw,1.9rem);padding-right:9.5rem}
  .nav .nav-links a.btn-accent{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
  .nav:not(.nav-solid) .nav-links a.btn-accent{background:transparent;border-color:rgba(245,241,234,.55);color:#f5f1ea}
  .nav:not(.nav-solid) .nav-links a.btn-accent:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-50%)}
}
/* ===== MOBILE (<=680px): dropdown na kremie - ciemny tekst, pełne CTA (fix kontrastu) ===== */
@media(max-width:680px){
  .nav .nav-links{background:var(--paper)}
  .nav .nav-links a{color:var(--ink-soft)}
  .nav .nav-links a:hover,.nav .nav-links a.active{color:var(--ink)}
  .nav .nav-links a.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
  /* zamknięty dropdown w pełni schowany (base -120% przy krótkim menu zostawiał terakotowe CTA wystające górą) */
  .nav .nav-links:not(.open){transform:translateY(-160%);visibility:hidden}
  .nav .nav-links.open{visibility:visible}
  /* brand mniejszy + bez miasta (jak Nobu na telefonie = sama nazwa) - żeby nie wypychał hamburgera */
  .nav .brand .name{font-size:1.12rem;letter-spacing:.1em}
  .nav .brand .sub{display:none}
  .nav .nav-toggle{flex:0 0 auto}
  .nav .brand{min-width:0;overflow:hidden}
}

/* === PAKIET ZAUFANIA (audyt 02.07): dyskretna plakietka oceny w rogu hero + karty realnych opinii === */
.hg-rate{position:absolute;right:clamp(1.4rem,5vw,4rem);bottom:clamp(2.6rem,7vh,5rem);z-index:2;margin:0;
  font-size:.92rem;font-weight:600;letter-spacing:.02em;color:#f5f1ea;white-space:nowrap;
  background:rgba(8,6,4,.5);border:1px solid rgba(245,241,234,.28);border-radius:999px;padding:.5rem 1.05rem}
@media(max-width:640px){.hg-rate{right:1rem;bottom:.9rem;font-size:.8rem;padding:.4rem .8rem}}
.opinie{background:var(--cream-2,var(--paper))}
.opinie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-6);margin-top:var(--space-8)}
.op-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.op-star{color:var(--accent-d,var(--accent));letter-spacing:.1em;font-size:.95rem}
.op-card blockquote{margin:0;color:var(--ink-soft);font-size:var(--text-base);line-height:1.6}
.op-autor{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.95rem}

/* === LOGO klienta (Capone): badge w nav - czarny rysunek na białym tle,
   czytelny i na ciemnym scrimie nad hero, i na kremowym nav-solid === */
.nav .brand.brand-has-logo{align-items:center;gap:.75rem}
.brand-logo{height:72px;width:auto;border-radius:12px;box-shadow:0 1px 8px rgba(8,6,4,.28)}
.nav.is-stuck .brand-logo{height:62px}
@media(max-width:680px){.brand-logo{height:52px}}

/* === MENU DOCELOWE (pełna karta z cenami) === */
.menu2{max-width:940px;margin:0 auto}
.menu2-legend{background:var(--paper-2);border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);margin:0 auto var(--space-8);color:var(--ink-soft);font-size:.92rem;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center;justify-content:center;max-width:940px}
.menu2-legend b{color:var(--accent);font-weight:700}
.menu2-block{margin-bottom:var(--space-9)}
.menu2-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);border-bottom:2px solid var(--accent);padding-bottom:var(--space-3);margin-bottom:var(--space-4)}
.menu2-head h3{font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);color:var(--ink);margin:0;letter-spacing:.01em}
.menu2-head .sz{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.5;white-space:nowrap}
.menu2-intro{color:var(--muted);margin:0 0 var(--space-4);max-width:64ch}
.mitem{display:grid;grid-template-columns:1fr auto;gap:1px var(--space-5);padding:var(--space-3) 0;border-bottom:1px solid var(--line);align-items:baseline}
.mitem:last-child{border-bottom:none}
.mitem .mn{font-weight:600;color:var(--ink-soft);font-size:1.03rem}
.mitem .md{grid-column:1;color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:2px}
.mitem .mp{grid-row:1;grid-column:2;align-self:baseline;font-weight:700;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.mitem .mp-pz i{color:var(--muted);font-style:normal;margin:0 4px;font-weight:400}
.mextras{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);color:var(--muted);font-size:.84rem}
.mextras b{color:var(--ink-soft);font-weight:600}
.menu2-dowoz{margin-top:var(--space-8);background:var(--dark);color:#f5f1ea;border-radius:var(--r-lg);padding:var(--space-6) var(--space-6);text-align:center}
.menu2-dowoz h3{font-family:var(--font-display);color:#fff;margin:0 0 var(--space-2);font-size:var(--text-h3)}
.menu2-dowoz p{color:rgba(245,241,234,.85);margin:0}
@media(max-width:600px){
  .menu2-head h3{font-size:1.5rem}
  .mitem .mp{font-size:.96rem}
}

/* === Facebook w pływającym dymku === */
.sr-fb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:#1877F2;color:#fff;flex:0 0 auto;box-shadow:0 4px 14px rgba(8,6,4,.28);transition:transform .2s var(--ease)}
.sr-fb:hover{transform:translateY(-2px)}

@media (max-width:560px){:root{--text-h1:clamp(1.9rem, 1.15rem + 4.4vw, 2.7rem);--text-h2:clamp(1.5rem, 1rem + 3vw, 2.1rem)}h1,h2{overflow-wrap:break-word}}

/* ===== WARSTWA AUTORSKA CAPONE v2 - strona docelowa ===== */
:root{
  --accent:#B3272D; --accent-d:#8E1E23; --accent-soft:rgba(179,39,45,.10);
  --cap-dark:#241812; --cap-dark-2:#2B1D14;
  --cap-cream:#F4EBDD; --cap-cream-mut:rgba(244,235,221,.72);
  --cap-gold:#D9A05B;
}

/* — hero: czytelna hierarchia — */
.hero-gastro .hg-veil{background:linear-gradient(180deg,rgba(18,11,7,.42) 0%,rgba(18,11,7,.18) 42%,rgba(18,11,7,.82) 100%)}
.hg-over{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:clamp(.78rem,.72rem + .3vw,.95rem);font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cap-gold);margin-bottom:16px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hg-sub{display:block;font-size:.42em;font-weight:500;letter-spacing:.02em;margin-top:.6em;color:rgba(245,241,234,.95);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hg-tagline{text-shadow:0 2px 24px rgba(0,0,0,.45)}

/* — karty z jedzeniem na stronie głównej — */
.kcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-7)}
@media(max-width:980px){.kcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kcards{grid-template-columns:1fr}}
.kcard{display:block;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(42,32,26,.05),0 14px 34px -14px rgba(42,32,26,.16);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.kcard:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(42,32,26,.06),0 26px 52px -16px rgba(42,32,26,.26)}
.kcard-img{aspect-ratio:4/3;overflow:hidden;background:var(--cap-dark)}
.kcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.kcard:hover .kcard-img img{transform:scale(1.055)}
.kcard-body{padding:var(--space-5) var(--space-5) var(--space-6)}
.kcard-body h3{margin-bottom:var(--space-2)}
.kcard-body p{color:var(--muted);font-size:var(--text-sm);line-height:1.6}
.kcard-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-4);color:var(--accent);font-weight:600;font-size:.9rem}
.kcard:hover .kcard-link .arr{transform:translateX(4px)}
.kcard-link .arr{transition:transform .3s}

/* — pasek zaufania (liczby) — */
.statband{background:linear-gradient(180deg,var(--cap-dark),var(--cap-dark-2));padding-block:var(--space-8)}
.statband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
@media(max-width:860px){.statband-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-7)}}
.statband .n{font-family:"Bodoni Moda",serif;font-weight:600;font-size:clamp(2.2rem,1.8rem + 2vw,3.4rem);color:var(--cap-gold);line-height:1}
.statband .l{margin-top:10px;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cap-cream-mut)}

/* — menu (oferta): karta z prowadnicami — */
.mitem{display:grid;grid-template-columns:max-content 1fr max-content;column-gap:12px;align-items:baseline}
.mitem::after{content:"";grid-column:2;grid-row:1;border-bottom:2px dotted rgba(42,32,26,.30);transform:translateY(-4px)}
.mitem .mn{grid-column:1;grid-row:1}
.mitem .mp{grid-column:3;grid-row:1}
.mitem .md{grid-column:1/-1;grid-row:2}
.menu2-head{border-bottom:2px solid var(--accent);padding-bottom:10px}
.menu2-head h3{color:var(--accent-d)}

/* — kontakt: karta + mapa w prawej kolumnie — */
.contact-side{display:flex;flex-direction:column;gap:var(--space-5)}
.contact-side .map-side{flex:1;width:100%;min-height:360px;border:0;border-radius:14px;filter:saturate(.92)}
.contact-grid{align-items:stretch}

/* — godziny + mapa na głównej — */
.trust-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:stretch}
.map-mini{width:100%;height:100%;min-height:420px;border:0;border-radius:14px;filter:saturate(.92)}
@media(max-width:900px){.trust-cols{grid-template-columns:1fr}.map-mini{min-height:300px}}

/* — opinie — */
.opinie figure{border-left:3px solid var(--accent)}

/* — godziny: karta z "Dziś" — */
.godz-col .godz{background:#fff;border-radius:16px;padding:var(--space-5) var(--space-6);box-shadow:0 1px 2px rgba(42,32,26,.05),0 14px 34px -14px rgba(42,32,26,.14)}
.godz-row{display:flex;align-items:baseline;gap:10px}
.godz-row .hrs{margin-left:auto;font-variant-numeric:tabular-nums}
.today-badge{display:none;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:99px;padding:3px 10px 2px;transform:translateY(-2px)}
.godz-row.is-today{position:relative}
.godz-row.is-today b{color:var(--accent-d)}
.godz-row.is-today .hrs{font-weight:700;color:var(--accent-d)}
.godz-row.is-today .today-badge{display:inline-block}
.map-wrap{display:flex}
.trust-cols{margin-top:var(--space-6)}

/* — marquee — */
.marq{overflow:hidden;background:var(--cap-dark);padding-block:14px;border-block:1px solid rgba(244,235,221,.08)}
.marq-track{display:flex;width:max-content;animation:marq 28s linear infinite}
.marq-track span{white-space:nowrap;font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(1rem,.9rem + .5vw,1.3rem);letter-spacing:.06em;color:var(--cap-gold);padding-right:.5em}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marq-track{animation:none}}

/* — opinie: karty z cudzysłowem i Google — */
.op-card{position:relative;background:#fff;border-left:0 !important;border-radius:16px;padding:var(--space-6) var(--space-6) var(--space-5);box-shadow:0 1px 2px rgba(42,32,26,.05),0 14px 34px -14px rgba(42,32,26,.14)}
.op-card::before{content:"\201E";position:absolute;top:-6px;right:22px;font-family:"Bodoni Moda",serif;font-size:5.5rem;line-height:1;color:var(--accent);opacity:.16}
.op-card .op-star{color:var(--cap-gold) !important}
.op-card blockquote{font-size:1.02rem;line-height:1.65}
.op-card .op-autor{display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-4);font-weight:600}
.op-card .op-autor::before{content:attr(data-initial);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d);font-weight:700;font-size:.9rem}
.op-card .op-src{display:block;margin-top:4px;font-size:.78rem;color:var(--muted);font-weight:500}

/* — galeria: hover + kursor lupy — */
.gallery .tile{border-radius:14px;overflow:hidden;cursor:zoom-in}
.gallery .tile img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery .tile:hover img{transform:scale(1.045)}

/* — lightbox — */
.lb{border:0;padding:0;background:rgba(16,10,7,.92);width:100vw;height:100vh;max-width:100vw;max-height:100vh;display:none;align-items:center;justify-content:center}
.lb[open]{display:flex}
.lb img{max-width:min(92vw,1200px);max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb .lb-x{position:fixed;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;opacity:.8}
.lb .lb-x:hover{opacity:1}
.lb::backdrop{background:transparent}

/* — płynne przewijanie + kotwice pod sticky nav — */
html{scroll-behavior:smooth}
.menu2-block{scroll-margin-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* — dymek FB (lewy dół, desktop) — */
.fb-float{position:fixed;left:22px;bottom:22px;z-index:80;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;background:#1877F2;color:#fff;
  box-shadow:0 3px 8px rgba(24,119,242,.35),0 14px 30px -10px rgba(24,119,242,.45);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .25s}
.fb-float:hover{transform:translateY(-4px);background:#1266d6;box-shadow:0 5px 12px rgba(24,119,242,.4),0 20px 40px -10px rgba(24,119,242,.55)}
.fb-float .fb-tip{position:absolute;left:calc(100% + 12px);white-space:nowrap;background:var(--cap-dark);color:var(--cap-cream);
  font-size:.8rem;font-weight:600;padding:8px 13px;border-radius:9px;opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .25s,transform .25s}
.fb-float:hover .fb-tip{opacity:1;transform:translateX(0)}
@media(max-width:820px){.fb-float{display:none}} /* na mobile FB jest w dolnym pasku */

/* — pasek mobilny: naprawa siatki (3 elementy) — */
@media(max-width:820px){.sticky-reserve{grid-template-columns:auto 1fr auto}.sr-fb{background:var(--paper);color:#1877F2;padding-inline:20px !important;display:flex;align-items:center}}

/* — chip "Otwarte teraz" w nawigacji — */
.open-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 16px;margin-right:6px;line-height:1}
.open-chip .oc-txt{white-space:nowrap}
.open-chip .dot{width:8px;height:8px;border-radius:50%;background:#2E9E44;box-shadow:0 0 0 3px rgba(46,158,68,.18);animation:ocpulse 2.2s ease-in-out infinite}
.open-chip.closed .dot{background:#B3272D;box-shadow:0 0 0 3px rgba(179,39,45,.15);animation:none}
@keyframes ocpulse{50%{box-shadow:0 0 0 6px rgba(46,158,68,.05)}}
@media(max-width:1080px){.open-chip{display:none}}
/* hero-gastro nav ma jasny tekst na przezroczystym pasku - chip zostaje bialy, OK */

/* — pasek kategorii menu (oferta) — */
.mnav{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--line);
  transition:box-shadow .3s}
.mnav.stuck{box-shadow:0 12px 28px -18px rgba(42,32,26,.4)}
.mnav::before,.mnav::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:2}
.mnav::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(251,246,238,0))}
.mnav::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(251,246,238,0))}
.mnav-in{max-width:1200px;margin-inline:auto;display:flex;gap:8px;overflow-x:auto;padding:14px 42px;scrollbar-width:none}
@media(min-width:1180px){.mnav-in{justify-content:safe center}}
.mnav-in::-webkit-scrollbar{display:none}
.mnav a{flex:0 0 auto;white-space:nowrap;font-size:.85rem;font-weight:600;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;transition:all .25s}
.mnav a:hover{border-color:var(--accent);color:var(--accent-d)}
.mnav a.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* — przycisk "do góry" — */
.to-top{position:fixed;right:22px;bottom:22px;z-index:80;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cap-dark);color:var(--cap-cream);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent)}
@media(max-width:820px){.to-top{bottom:74px;right:14px}}

/* — lightbox: strzałki + licznik — */
.lb .lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .25s}
.lb .lb-nav:hover{background:rgba(255,255,255,.2)}
.lb .lb-prev{left:22px}.lb .lb-next{right:22px}
.lb .lb-count{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.9rem;letter-spacing:.08em}
@media(max-width:640px){.lb .lb-nav{width:42px;height:42px}.lb .lb-prev{left:10px}.lb .lb-next{right:10px}}

/* — mikrodetale — */

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}
.btn{transition:transform .2s,background .25s,border-color .25s,color .25s,box-shadow .25s}
.btn:active{transform:scale(.97)}

/* — nav: oddech dla logo — */
.nav-inner{height:108px}
.brand-logo{height:78px}
.nav.is-stuck .nav-inner{height:80px}
.nav.is-stuck .brand-logo{height:60px}
@media(max-width:680px){.nav-inner{height:80px}.brand-logo{height:52px}}

/* — navbar w duchu Nobu: wersaliki, oddech, rysująca się linia — */
.nav-links{gap:clamp(22px,2.6vw,40px)}
.nav-links a:not(.btn){position:relative;font-size:.92rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.96;transition:opacity .3s}
.nav-links a:not(.btn):hover{opacity:1;color:inherit}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:2px;background:currentColor;border-radius:2px;transition:left .32s cubic-bezier(.25,.8,.25,1),right .32s cubic-bezier(.25,.8,.25,1)}
.nav-links a:not(.btn):hover::after{left:0;right:0}
.nav-links a:not(.btn).current{opacity:1}
.nav-links a:not(.btn).current::after{left:0;right:0;background:var(--cap-gold)}
.nav-links .btn{letter-spacing:.14em;text-transform:uppercase;font-size:.86rem;font-weight:700}
/* mocniejszy kontrast linków na kremowym pasku (uwaga Sebastiana: za drobne) */
.nav.nav-solid .nav-links a:not(.btn){color:var(--ink)}
@media(max-width:920px){
  .nav-links a:not(.btn){font-size:.95rem;letter-spacing:.14em}
  .nav-links a:not(.btn)::after{display:none}
}

/* — logo bez kafla: przezroczysty PNG + cień kształtu — */
.brand-logo{border-radius:0;box-shadow:none;background:none;filter:drop-shadow(0 2px 7px rgba(8,6,4,.4))}

/* — FIX hover: napis MA zostać widoczny (nie dziedzicz ciemnego koloru z rodzica) — */
.nav:not(.nav-solid) .nav-links a:not(.btn):hover{color:#fff}
.nav.nav-solid .nav-links a:not(.btn):hover{color:var(--ink)}
/* linia rozwija się od środka na boki (Nobu) — kolor idzie za tekstem, więc zawsze widoczna */
.nav-links a:not(.btn):hover::after{left:0;right:0}

/* — CTA "Zamów": ZAWSZE pełna czerwień + biały tekst (koniec znikania nad zdjęciem i słabego kontrastu) — */
.nav .nav-links a.btn-accent,
.nav.nav-solid .nav-links a.btn-accent,
.nav:not(.nav-solid) .nav-links a.btn-accent{
  background:var(--accent);border:1px solid var(--accent);color:#fff !important;
  box-shadow:0 4px 14px rgba(179,39,45,.28)}
.nav .nav-links a.btn-accent:hover,
.nav.nav-solid .nav-links a.btn-accent:hover,
.nav:not(.nav-solid) .nav-links a.btn-accent:hover{
  background:var(--accent-d);border-color:var(--accent-d);color:#fff !important;box-shadow:0 6px 18px rgba(179,39,45,.34)}

/* — FIX rozjazdu: poziomy nav (duże bold linki) mieści się wygodnie dopiero od 1025px.
     Poniżej chowamy go w schludne menu (hamburger) — koniec łamania „O NAS" i chipa na 2 linie. — */
@media(max-width:1024px){
  .nav .nav-inner{height:auto;min-height:88px}
  .nav .brand-logo{height:60px}
  .nav.is-stuck .brand-logo{height:52px}
  .nav .nav-toggle{display:flex;flex:0 0 auto;z-index:60}
  .nav .nav-links{position:fixed;inset:88px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;padding:14px 6% 20px!important;background:var(--paper);border-bottom:var(--hairline);box-shadow:var(--sh-md);
    transform:translateY(-135%);visibility:hidden;transition:transform .35s var(--ease);flex:none}
  .nav .nav-links.open{transform:translateY(0);visibility:visible}
  .nav .nav-links a:not(.btn){position:static;color:var(--ink-soft);opacity:1;font-size:1.02rem;letter-spacing:.1em;
    padding:15px 2px;border-bottom:1px solid rgba(42,32,26,.10);width:100%}
  .nav .nav-links a:not(.btn):hover{color:var(--ink)}
  .nav .nav-links a:not(.btn)::after{display:none}
  .nav .nav-links a.btn-accent{position:static!important;transform:none!important;top:auto!important;right:auto!important;
    margin-top:16px;width:100%;justify-content:center;display:flex;font-size:.95rem;padding-block:.75rem}
  .nav .nav-links .open-chip{display:none}       /* status pill nie pasuje do pionowego menu */
  .nav .nav-toggle span{background:var(--ink)}    /* hamburger zawsze ciemny, czytelny na kremie */
}

/* — DESKTOP (≥1025px): czysty układ logo⟵→menu+CTA, gwarantowane przerwy, zero łamania — */
@media(min-width:1025px){
  .nav .nav-inner{display:flex;align-items:center;gap:clamp(1.6rem,3.5vw,3.4rem);position:static}
  .nav .brand{flex:0 0 auto}
  .nav .brand .name{white-space:nowrap}
  .nav .brand .sub{white-space:nowrap}
  /* menu dosunięte w prawo, własne równe odstępy, nic się nie łamie */
  .nav .nav-links{flex:1 1 auto;justify-content:flex-end;align-items:center;
    gap:clamp(1.15rem,1.9vw,2.1rem);padding-right:0}
  .nav .nav-links a:not(.btn){white-space:nowrap}
  .nav .nav-links a:not(.btn)::after{bottom:-6px}
  /* chip statusu tylko gdy naprawdę jest miejsce (poniżej 1280 chowamy, by nic nie ściskać) */
  .nav .nav-links .open-chip{flex:0 0 auto;white-space:nowrap;margin-left:.4rem}
  /* CTA w normalnym flow na końcu (koniec pozycjonowania absolutnego, które kolidowało) */
  .nav .nav-links a.btn-accent{position:static;transform:none;top:auto;right:auto;margin:0 0 0 .6rem;flex:0 0 auto}
  .nav .nav-links a.btn-accent:hover{transform:none}
}
@media(min-width:1025px) and (max-width:1279px){
  .nav .nav-links .open-chip{display:none!important}   /* mniej miejsca → chowamy pasek statusu, menu oddycha */
}