/* =====================================================
   ITALFROST · Premium edition v3 — hajster-direction
   Heavy sans typography, rounded boxes everywhere,
   outline pills with ink-fill (inversion) on hover.
   White/gray-only palette. No mono, no hairlines.
   ===================================================== */

:root{
  /* ========== COLOR — cool blue-grey palette: light cyan paper → jet black ink, blue slate accent ========== */
  --paper:        #F8F9FA;     /* bright snow — page bg */
  --paper-2:      #E9ECEF;     /* platinum — inner panels (stats, ft__top, hero overlay) */
  --paper-3:      #DEE2E6;     /* alabaster grey — lines, image bg */
  --white:        #FFFFFF;     /* pure white (text on dark sections) */

  --ink:          #212529;     /* shadow grey — primary text & outlines */
  --ink-2:        #1A1D20;     /* deeper */
  --card-dark:    #212529;     /* dark cards */
  --card-dark-2:  #343A40;     /* gunmetal — dark-card hover / inner panel */

  --smoke:        #6C757D;     /* slate grey — body sub-text */
  --mist:         #ADB5BD;     /* pale slate — placeholder / sub-text */
  --mist-2:       #CED4DA;     /* lighter pale slate — soft sub */
  --line:         #DEE2E6;     /* matches paper-3 (alabaster) */

  /* ========== ACCENT — Iron Grey. Mid-dark blue-green-tinted gray, distinct from ink and smoke ========== */
  --accent:       #495057;
  --accent-deep:  #343A40;     /* gunmetal — hover / pressed */
  --accent-soft:  #CED4DA;     /* pale slate — soft accent backgrounds */

  /* ========== TYPE ========== */
  --f-sans:       'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:         13px;
  --t-s:          15px;
  --t-m:          17px;
  --t-l:          20px;
  --t-xl:         24px;

  --h3:           clamp(18px, 1.6vw, 22px);
  --h2:           clamp(32px, 4vw, 56px);
  --h1:           clamp(40px, 5.6vw, 88px);
  --h-mega:       clamp(48px, 7vw, 112px);

  /* ========== SPACE — section-level rytm ========== */
  --gutter:       clamp(16px, 3vw, 40px);
  --w:            1480px;
  --container-w:  calc(var(--w) + 2 * var(--gutter));   /* max-width kontenera contentu */
  --section-pad:  clamp(96px, 12vw, 184px);   /* odstęp między sekcjami */
  --inset-pad-y:  clamp(56px, 7vw, 104px);    /* inner vertical padding boxed sections */
  --inset-pad-x:  clamp(28px, 4vw, 72px);     /* inner horizontal padding boxed sections */

  /* ========== SPACE SCALE — component-level gapy/paddings ========== */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;

  --hd-h:         100px;
  --ft-h:         clamp(640px, 85vh, 880px);

  /* ========== CONTROLS ========== */
  --ctrl-h:       52px;        /* standardowy rozmiar buttona/pilla */
  --ctrl-h-sm:    44px;        /* mobile / mniejsze konteksty */

  /* ========== RADIUS ========== */
  --r-card:       clamp(20px, 2.2vw, 32px);
  --r-inner:      clamp(14px, 1.5vw, 20px);
  --r-pill:       999px;

  /* ========== Z-INDEX SCALE ========== */
  --z-bg:         0;
  --z-content:    1;
  --z-overlay:    2;       /* hero overlay, path arrow tab nad obrazkiem */
  --z-sticky:    5;       /* sticky bary wewnątrz sekcji */
  --z-tooltip:   60;      /* tooltipy mapy — nad pinami, pod nawigacją */
  --z-drawer:    70;
  --z-header:    80;
  --z-mega:      90;       /* megamenu nad headerem */

  /* ========== BORDERS ========== */
  --border:         1px solid var(--paper-3);
  --border-strong:  1px solid var(--ink);
  --border-on-dark: 1px solid rgba(255,255,255,.15);

  /* ========== SHADOWS ========== */
  --shadow-sm:    0 1px 2px rgba(33,37,41,.04), 0 1px 3px rgba(33,37,41,.06);
  --shadow-md:    0 4px 8px rgba(33,37,41,.06), 0 8px 16px rgba(33,37,41,.08);
  --shadow-lg:    0 12px 24px rgba(33,37,41,.08), 0 24px 48px rgba(33,37,41,.10);

  /* ========== EFFECTS ========== */
  --blur-bg:      saturate(180%) blur(20px);  /* header, drawer, proc counter glass effect */

  /* ========== MOTION ========== */
  --ease:         cubic-bezier(.2,.6,.2,1);             /* generic UI easing */
  --ease-card:    cubic-bezier(.32,.72,.24,1);          /* card hover - slower, more elegant */
  --t1:           .22s var(--ease);
  --t2:           .42s var(--ease);
  --t-prod:       .65s var(--ease-card);
}

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

/* Chrome/Safari rounded-clip hairline fix.
   `border-radius` + `overflow:hidden` + child z `transform:scale` rysuje clip
   osobno od composite-owanego dziecka — AA łuku nie jest zsynchronizowany z AA
   transformowanej zawartości i widać 1px "włosek" wokół zaokrąglonego narożnika.
   Fix: webkit-mask wymusza wspólny composite layer (canonical Safari fix),
   isolation:isolate to cross-browser fallback, clip-path zastępuje overflow:hidden
   inną ścieżką renderowania, która nie ma tego bug-a. */
.hero__card,
.path,
.prod__media,
.why__media,
.post__media,
.case__media{
  isolation:isolate;
  -webkit-mask-image:linear-gradient(#000, #000);
  mask-image:linear-gradient(#000, #000);
}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t-m);
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
  background:var(--ink);                  /* matches footer color (visible during scroll-reveal gap) */
  padding-bottom:var(--ft-h);             /* scroll runway equal to footer height */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* page wrapper — sits ON TOP of fixed footer; covers it until user scrolls past.
   padding-bottom adds a paper "tail" after the last section so finale (which has its own
   dark card) doesn't visually merge into the dark footer being revealed underneath. */
.page{
  position:relative;
  z-index:var(--z-content);
  background:var(--paper);
  padding-bottom:var(--section-pad);
}
img,svg,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; padding:0; }
ul,ol{ list-style:none; padding:0; margin:0; }
[hidden]{ display:none !important; }

h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-sans);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.022em;
  color:var(--ink);
}

/* ============== UTILITIES — gotowe pod kolejne podstrony ============== */
.container{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* sekcja jako block z auto-rytmiką: kolejna sekcja zawsze ma section-pad od poprzedniej */
.section + .section{ margin-top:var(--section-pad); }
.section--tight + .section{ margin-top:clamp(48px, 6vw, 96px); }   /* dla blisko siebie ułożonych bloków (np. manifesto + paths) */
/* visually-hidden — accessible labels */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ========== PILL — outline default, INK fill (inversion) on hover.
   Arrow rotates -45° (external-link style) for premium feel. ========== */
/* SECONDARY (default) — outline, fills on hover */
.pill{
  display:inline-flex;
  align-items:center;
  gap:14px;
  height:var(--ctrl-h);
  padding:0 22px;
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--accent);
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  flex-shrink:0;        /* na narrow viewportcie pill nie spłaszcza się w owal */
  transition:background var(--t2), color var(--t2), border-color var(--t2);
  cursor:pointer;
}
.pill:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}

/* PRIMARY — filled by default, deepens on hover */
.pill--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.pill--primary:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:var(--white);
}
.pill__arrow{
  display:inline-flex;
  align-items:center; justify-content:center;
  font-size:16px;
  line-height:1;
  flex-shrink:0;        /* zawartość pill-a nigdy się nie spłaszcza */
  transition:transform var(--t2);
}
.pill:hover .pill__arrow{ transform:rotate(-45deg); }

/* on dark backgrounds — inverted: outline white default, white fill on hover */
.pill--on-dark{
  border-color:rgba(255,255,255,.4);
  color:var(--white);
}
.pill--on-dark:hover{
  background:var(--white);
  border-color:var(--white);
  color:var(--ink);
}

/* link with arrow — text + arrow, arrow rotates on hover */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--accent);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--t2);
}
.link-arrow:hover{ border-color:var(--accent); }
.link-arrow:hover .pill__arrow{ transform:rotate(-45deg); }

/* ============== HEADER — auto-hide on scroll down, slide back on scroll up ============== */
.hd{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(248,249,250,.55);   /* paper z niskim opacity = mocniejszy frost effect */
  backdrop-filter:var(--blur-bg);
  -webkit-backdrop-filter:var(--blur-bg);
  transform:translateY(0);
  transition:background var(--t1), transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.hd.is-scrolled{
  background:rgba(248,249,250,.7);
}
.hd.is-hidden{
  transform:translateY(-100%);
}

/* main row — logo left, nav + actions right */
.hd__row{
  position:relative;     /* anchor for megamenu */
  height:var(--hd-h);
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:clamp(28px, 3.5vw, 56px);
}
/* logo + odznaka wyróżnienia jako jedna grupa po lewej; reszta wypchnięta w prawo */
.hd__brand{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.6vw, 22px);
  margin-right:auto;
}
.hd__logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;         /* logo strony nigdy się nie zwęża */
  font-family:var(--f-sans);
  color:var(--ink);
  line-height:1;
}
.hd__logo-img{
  display:block;
  height:12px;
  width:auto;
  max-width:none;        /* globalne img{max-width:100%} nie może go ściskać */
  flex:0 0 auto;
}
/* odznaka „Rzetelni w Biznesie" obok logo — mniejsza niż wersja z hero */
.hd__award{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding-left:clamp(14px, 1.6vw, 22px);
  border-left:1px solid var(--line);
}
.hd__award img{
  display:block;
  height:24px;
  width:auto;
  max-width:none;   /* globalne img{max-width:100%} zwężało logo do rodzica */
}
a.hd__award{ transition:opacity var(--t1); }
a.hd__award:hover{ opacity:.7; }

.hd__nav{
  display:flex;
  gap:clamp(24px, 2.6vw, 40px);
  align-items:center;
}

/* nav top-level links — both plain and mega-trigger */
.hd__nav > a,
.hd__nav-item > a{
  position:relative;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--smoke);
  letter-spacing:-.005em;
  padding:10px 0;
  transition:color var(--t2);
}
.hd__nav > a::after,
.hd__nav-item > a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:4px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t2);
}
.hd__nav > a:hover,
.hd__nav-item:hover > a{ color:var(--ink); }
.hd__nav > a:hover::after,
.hd__nav-item:hover > a::after{ transform:scaleX(1); }
.hd__nav > a.is-active,
.hd__nav-item > a.is-active{ color:var(--ink); }
.hd__nav > a.is-active::after,
.hd__nav-item > a.is-active::after{ transform:scaleX(1); }

/* nav-item is a wrapper that holds the trigger link + megamenu.
   position:static so the megamenu inside positions against .hd__row. */
.hd__nav-item{
  position:static;
}

/* invisible bridge that extends the link's hoverable area down to the megamenu top.
   Uses ::before so we don't collide with the existing ::after underline on the link. */
.hd__nav-item--mega > a::before{
  content:"";
  position:absolute;
  top:100%;
  left:-12px;
  right:-12px;
  height:40px;
  background:transparent;
}
.hd__nav:not(:hover) .hd__nav-item--mega > a::before{
  pointer-events:none;
}

/* ============== MEGAMENU ============== */
.hd__megamenu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:var(--z-mega);
  background:var(--paper);
  border-bottom:1px solid var(--paper-3);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--t1), transform var(--t1), visibility var(--t1);
}
.hd__nav-item--mega:hover .hd__megamenu,
.hd__nav-item--mega:focus-within .hd__megamenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.hd__megamenu-grid{
  width:100%;
  padding:clamp(40px, 4.5vw, 64px) var(--gutter) clamp(44px, 5vw, 72px);
  display:grid;
  /* uklad: kolumny kategorii (1fr kazdy) po lewej + visual card po prawej (stala szerokosc
     przez clamp() - dzieki temu karta ma identyczny wymiar niezaleznie od liczby kolumn
     kategorii w mega-menu) */
  grid-template-columns:1fr 1fr 1fr clamp(280px, 26vw, 400px);
  gap:clamp(32px, 4vw, 64px);
  align-items:start;
}
/* mega-menu z 2 kolumnami kategorii + card (np. Wyposazenie magazynow) */
.hd__megamenu--3col .hd__megamenu-grid{
  grid-template-columns:1fr 1fr clamp(280px, 26vw, 400px);
}

/* ----------------- VISUAL CARD W MEGA-MENU -----------------
   Po prawej w siatce mega-menu - pelnoekranowy obrazek z tekstem na overlay (wzorzec
   .prod card z homepage). Klikalna calosc, arrow w rogu, gradient na dole pod tekst.
   Jezykiem wizualnym pasuje do produktowych kart na homepage i kategorii. */
.hd__mega-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:#fff;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:4 / 3;
  background:var(--paper);
  align-self:start;
}
.hd__mega-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.hd__mega-card:hover > img{ transform:scale(1.04); }
/* gradient pod tekstem - czytelnosc tytulu na dole karty */
.hd__mega-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
/* overlay z tekstem na dole zdjecia */
.hd__mega-card-body{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px);
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* eyebrow w stylu .prod__sub z homepage - subtelny, sentence-case, bez upper-letter-spacingu */
.hd__mega-card-eyebrow{
  font-size:var(--t-s);
  font-weight:500;
  color:rgba(255,255,255,.7);
}
.hd__mega-card-title{
  display:block;              /* span zamiast h4 */
  font-family:var(--f-sans);
  font-size:clamp(20px, 1.5vw, 24px);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.15;
  color:#fff;
  margin:0;
}

.hd__mega-col{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1vw, 14px);
}
.hd__mega-col-title{
  display:block;              /* span zamiast h4 */
  font-family:var(--f-sans);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist);
  margin:0 0 8px;
}
.hd__mega-col > a{
  font-size:var(--t-m);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
  transition:color var(--t1), padding-left var(--t1);
}
.hd__mega-col > a:hover{
  color:var(--accent);
  padding-left:4px;
}

/* featured column — bigger items with arrow on the right */
.hd__mega-col--featured > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:clamp(20px, 1.8vw, 26px);
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink);
  padding:14px 0;
  border-bottom:1px solid var(--paper-3);
  transition:color var(--t1), padding-left var(--t1);
}
.hd__mega-col--featured > a:first-child{ padding-top:0; }
.hd__mega-col--featured > a:last-child{ border-bottom:0; }
.hd__mega-col--featured > a:hover{
  color:var(--accent);
  padding-left:6px;
}
.hd__mega-col--featured .hd__mega-arrow{
  display:inline-flex;
  font-size:18px;
  font-weight:600;
  color:var(--mist);
  transition:transform var(--t1), color var(--t1);
}
.hd__mega-col--featured > a:hover .hd__mega-arrow{
  transform:translateX(4px);
  color:var(--accent);
}

.hd__right{ display:flex; align-items:center; gap:18px; }
.hd__burger{
  display:none;
  width:var(--ctrl-h); height:var(--ctrl-h);
  flex:0 0 var(--ctrl-h);   /* match pill, nie spłaszcza się we flexbox parent */
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  border:1px solid var(--ink);
  border-radius:var(--r-pill);
  background:transparent;
  padding:0;
}
.hd__burger span{
  width:14px; height:1.5px;
  background:var(--ink);
  transition:transform var(--t1), opacity var(--t1);
}
.hd__burger.is-open span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.hd__burger.is-open span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* nawigacja zwija się do hamburgera wcześniej — logo + odznaka zajmują lewą stronę */
@media (max-width:1180px){
  .hd__nav{ display:none; }
  .hd__burger{ display:flex; }
}
@media (max-width:720px){
  :root{ --hd-h:72px; }   /* niższy header na mobile dla lepszych proporcji */
}
/* poniżej 1345px zostaje samo logo Italfrost — odznaka „Rzetelni" znika razem
   z kreską (kreska to border-left tej odznaki) */
@media (max-width:1345px){
  .hd__award{ display:none; }
}
@media (max-width:560px){
  .hd__right .pill > span:first-child{ display:none; }
  /* po ukryciu textu zostaje sama strzałka — wymuszamy kwadrat ctrl-h, żeby pill był kółkiem */
  .hd__right .pill{
    width:var(--ctrl-h);
    padding:0;
    justify-content:center;
  }
}

/* drawer (mobile) — accordion mirror desktop megamenu */
.drawer{
  position:fixed; top:var(--hd-h); left:0; right:0; bottom:0; z-index:var(--z-drawer);
  background:var(--paper);
  padding:8px var(--gutter) 40px;
  display:flex; flex-direction:column;
  height:calc(100vh - var(--hd-h));
  height:calc(100dvh - var(--hd-h));      /* dvh dla mobilnych browserów z dynamic viewport */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;            /* nie chainuj scrolla do body */
}
/* shared row look — top-level link i summary mają jednakowe paddingi i border */
.drawer__top-link,
.drawer__group > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  font-size:var(--t-l);
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--paper-3);
  cursor:pointer;
  list-style:none;       /* ukrywa default summary marker */
}
.drawer__group > summary::-webkit-details-marker{ display:none; }
.drawer__chev{
  width:10px; height:10px;
  flex-shrink:0;
  border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);     /* ▼ chevron down */
  margin-right:6px;            /* żeby chevron był wcięty od krawędzi summary */
  margin-bottom:4px;           /* offset bo rotate przesuwa visual centroid */
  transition:transform var(--t1);
}
.drawer__group[open] > summary .drawer__chev{
  transform:rotate(-135deg);   /* ▲ chevron up */
}

.drawer__sub{
  display:flex;
  flex-direction:column;
  gap:32px;                  /* większe oddechy między grupami */
  padding:20px 0 32px;
}
.drawer__sub-block{
  display:flex;
  flex-direction:column;
}
.drawer__sub-block__title{
  display:block;              /* span zamiast h4 */
  margin:0 0 14px;
  font-size:var(--t-s);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--smoke);
}
.drawer__sub-block a{
  padding:12px 0;            /* więcej luzu między linkami */
  font-size:var(--t-m);
  font-weight:500;
  color:var(--ink);
}

.drawer__contact{
  margin-top:auto;            /* push to bottom (drawer ma flex column) */
  padding-top:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.drawer__cta{
  align-self:stretch;          /* pełna szerokość pill-a */
  justify-content:space-between;
  height:60px;
  padding:0 24px;
  font-size:var(--t-l);
}
.drawer__phone-line{
  margin:0;
  text-align:center;
  font-size:var(--t-m);
  font-weight:500;
  color:var(--smoke);
}
.drawer__phone-line a{
  color:var(--ink);
  font-weight:600;
  white-space:nowrap;
}

/* ============== HERO ============== */
.hero{
  padding:var(--gutter);
  display:flex;
  flex-direction:column;
  gap:var(--inset-pad-y);
  min-height:calc(100vh - var(--hd-h) - 16px);
  max-width:var(--container-w);
  margin:0 auto;
}
.hero__top{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr);
  align-items:start;
  gap:clamp(32px, 5vw, 80px);
}
.hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:.98;
  color:var(--ink);
  margin:-.22em 0 0;       /* lift to optically align cap-top with the lead column on the right */
  max-width:14ch;
}
.hero__title-line{
  display:block;
}
/* anti-FOUC for hero entrance — initial hidden state applied only when JS is active and motion isn't reduced.
   Without JS or with reduced-motion, hero shows normally. GSAP animates from these states to default. */
@media (prefers-reduced-motion: no-preference){
  [data-js="on"] .hero__title-line{ opacity:0; transform:translateY(30px); }
  [data-js="on"] .hero__lead,
  [data-js="on"] .hero__overlay{ opacity:0; transform:translateY(24px); }
  [data-js="on"] .hero__card{ opacity:0; transform:scale(.96); }
  [data-js="on"] .hero__card img{ transform:scale(1.18); }
}
.hero__lead{
  margin:0;
  font-size:clamp(20px, 1.7vw, 26px);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.4;
  color:var(--ink);
  max-width:34ch;
}

.hero__card{
  position:relative;
  flex:1;
  display:block;
  border-radius:var(--r-card) var(--r-card) 0 var(--r-card);   /* BR=0 by overlay mógł szczelnie wypełnić róg bez hairline */
  overflow:hidden;
  background:var(--paper);
  min-height:clamp(280px, 44vh, 520px);
}
.hero__card img,
.hero__card .hero__media{
  position:absolute;
  inset:-1px;                     /* nadpisanie AA hairline — media wystaje 1px za klip */
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
}
/* hero overlay - wciśnięte w BR rogu obrazu. Diagonalne radii (TL + BR) + inverse-fillet
   pseudo-elementy (TR i BL) sprawiają, że obraz "owija się" wokół karty. */
.hero__overlay{
  position:absolute;
  right:0;
  bottom:0;
  z-index:var(--z-overlay);
  max-width:clamp(360px, 40vw, 560px);
  padding:clamp(24px, 2.4vw, 36px) clamp(28px, 2.8vw, 40px);
  background:var(--paper);
  border-radius:var(--r-card) 0 0 0;   /* tylko TL rounded - BR=0 by uniknąć hairline na styku z hero card */
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.4vw, 20px);
}
/* Inverse fillet: solid paper square z wymaskowaną ćwiartką koła.
   CSS mask daje crisp edge (anty-aliasing tylko na kanale alpha), nie ma RGB blendu. */
.hero__overlay::before,
.hero__overlay::after{
  content:"";
  position:absolute;
  width:var(--r-card);
  height:var(--r-card);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at top left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at top left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.hero__overlay::before{ bottom:100%; right:0; }
.hero__overlay::after{ right:100%; bottom:0; }

.hero__overlay p{
  margin:0;
  font-size:var(--t-l);
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  letter-spacing:-.012em;
}
.hero__overlay .pill{
  align-self:flex-start;
}

/* CTA + phone w jednej linii (lub kolumna na mobile) - pill po lewej, numer telefonu po prawej */
.hero__overlay-cta{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  flex-wrap:wrap;
}

@media (max-width:600px){
  .hero__overlay{
    left:0;
    max-width:none;
    padding:clamp(18px, 4.5vw, 24px) clamp(20px, 5vw, 28px);
    border-radius:var(--r-card);
  }
  .hero__overlay::before,
  .hero__overlay::after{ display:none; }   /* na mobile karta full-width, bez fillets */
}

@media (max-width:880px){
  .hero__top{
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero__lead{ max-width:none; }
  .hero__card{ min-height:clamp(280px, 50vh, 480px); }
}

/* ============== BRANDS — logo strip pod hero; jednolita szarość, kolor on hover ============== */
.brands{
  padding:clamp(36px, 4.5vw, 64px) var(--gutter) 0;
  max-width:var(--container-w);
  margin:0 auto;
}
.brands__row{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(28px, 5vw, 88px);
  flex-wrap:wrap;
}
.brands__logo{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* logo owinięte w odnośnik do podstrony marki — link wypełnia kafelek */
.brands__logo a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.brands__logo img{
  width:auto;
  max-width:100%;
  /* brightness(0) spłaszcza każde logo do jednej sylwetki; opacity ustala odcień szarości */
  filter:brightness(0);
  opacity:.38;
  transition:filter var(--t2), opacity var(--t2);
}
.brands__logo:hover img{
  filter:none;
  opacity:1;
}
/* criocabin (pierwsze logo w rzędzie) — logotyp jest monochromatyczny (szary), więc
   saturate() nic nie daje. „Większe nasycenie" = mocniejszy, ciemniejszy wordmark:
   na hover zostaje pełna sylwetka (brightness(0)) przy pełnym kryciu, więc wyróżnia
   się bardziej niż pozostałe, które wracają do naturalnej szarości.
   Ta sama specyficzność co reguła wyżej → musi być PO niej. */
.brands__logo--criocabin:hover img{
  filter:brightness(0);
  opacity:1;
}
/* per-logo wysokości — optyczne wyrównanie ciężaru (znaki vs. szerokie logotypy) */
.brands__logo--gs img{        max-height:52px; }
.brands__logo--epta img{      max-height:48px; }
.brands__logo--criocabin img{ max-height:22px; }
.brands__logo--costan img{    max-height:26px; }
@media (max-width:600px){
  .brands__row{ gap:32px 40px; }
  .brands__logo{ flex:1 1 40%; }
}

/* ============== MANIFESTO — short intro + display headline (under hero) ============== */
.manifesto{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.manifesto__container{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2.4fr);
  gap:clamp(40px, 6vw, 120px);
  align-items:start;
}
.manifesto__intro{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2vw, 28px);
  max-width:32ch;
}
.manifesto__intro p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}
.manifesto__intro .pill{
  align-self:flex-start;
}
.manifesto__headline{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--ink);
  margin:0;
}
@media (max-width:880px){
  .manifesto__container{
    grid-template-columns:1fr;
    gap:24px;
  }
  /* mobile order: big headline first, small intro second (then paths grid below the section) */
  .manifesto__headline{ order:1; }
  .manifesto__intro{ order:2; max-width:none; }
}

/* ============== TWO PATHS — flows directly under the manifesto, tighter top gap ============== */
.paths{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.manifesto + .paths{
  margin-top:clamp(48px, 6vw, 96px);   /* tighter — manifesto + paths read as one block */
}

.paths__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px, 2vw, 32px);
}
.path{
  position:relative;
  display:block;
  border-radius:var(--r-card) var(--r-card) 0 var(--r-card);   /* BR=0 by path__arrow mógł szczelnie wypełnić róg bez hairline */
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--paper);
}
.path img{
  position:absolute;
  inset:-1px;                     /* nadpisanie AA hairline — obraz wystaje 1px za klip */
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.path:hover img{ transform:scale(1.04); }
.path::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.path__label{
  position:absolute;
  bottom:clamp(20px, 2.4vw, 36px);
  left:clamp(20px, 2.4vw, 36px);
  font-size:clamp(22px, 2.4vw, 36px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--white);
  z-index:var(--z-content);
}

/* paper "tab" wciśnięty w BR rogu obrazu. TL rounded + inverse fillets (TR i BL)
   sprawiają, że obraz "owija się" wokół tabu. CSS mask daje crisp edges. */
.path__arrow{
  position:absolute;
  bottom:0;
  right:0;
  z-index:var(--z-overlay);
  padding:14px;
  background:var(--paper);
  border-radius:var(--r-card) 0 0 0;
}
.path__arrow::before,
.path__arrow::after{
  content:"";
  position:absolute;
  width:var(--r-card);
  height:var(--r-card);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at top left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at top left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.path__arrow::before{ bottom:100%; right:0; }
.path__arrow::after{ right:100%; bottom:0; }

/* the actual button — primary filled circle */
.path__arrow-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ctrl-h);
  height:var(--ctrl-h);
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
  color:var(--white);
  font-size:16px;
  font-weight:600;
  line-height:1;
  transition:background var(--t-prod), transform var(--t-prod);
}
.path:hover .path__arrow-glyph{
  background:var(--accent-deep);
  transform:rotate(-45deg);
}

@media (max-width:720px){
  .paths__grid{ grid-template-columns:1fr; }
  .path{ aspect-ratio:4/3; }
  .path__arrow{ padding:10px; }
  .path__arrow-glyph{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); font-size:14px; }
}

/* ============== CATEGORIES — rounded product cards in container ============== */
.cat{
  background:var(--paper-2);
  border-radius:var(--r-card);
  width:calc(100% - 2 * var(--gutter));
  max-width:var(--w);
  margin:var(--section-pad) auto 0;
  padding:var(--inset-pad-y) var(--inset-pad-x);
}
/* tighter gap when two boxed cat sections sit back-to-back */
.cat + .cat{
  margin-top:clamp(10px, 1.5vw, 22px);
}
.cat--dark{
  background:var(--ink);
  color:var(--white);
}
.cat--dark .cat__head h2{ color:var(--white); }
.cat--dark .cat__head p{ color:rgba(255,255,255,.65); }

.cat__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:var(--space-6) clamp(40px, 6vw, 96px);
  margin-bottom:clamp(40px, 5vw, 64px);
}
.cat__head-copy{
  display:flex; flex-direction:column;
  gap:18px;
  max-width:720px;
}
.cat__head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
}
.cat__head p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.45;
  max-width:54ch;
}
.cat__head .link-arrow{ white-space:nowrap; }
.cat--dark .cat__head .link-arrow{ color:var(--white); }
.cat--dark .cat__head .link-arrow:hover{ border-color:var(--white); }

@media (max-width:720px){
  .cat__head{ grid-template-columns:1fr; align-items:start; }
}

.cat__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 32px);
}

/* karta szeroka — zajmuje 2 kolumny; szerszy aspect-ratio media, żeby wysokość
   zgrała się z sąsiednimi kartami 1/1 */
.prod--wide{
  grid-column:span 2;
}
.prod--wide .prod__media{
  aspect-ratio:2.1 / 1;
}

@media (max-width:720px){
  .cat__grid{ grid-template-columns:1fr; gap:16px; }
  .prod--wide{ grid-column:auto; }
  .prod--wide .prod__media{ aspect-ratio:1 / 1; }
}

/* product card — bg expands on hover, outline pill collapses to circle.
   Fixed cta-wrap height = no CLS. */
.prod{
  display:flex;
  flex-direction:column;
  color:inherit;
}

.prod__media{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper);
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(20px, 2vw, 28px);
  transition:border-bottom-left-radius var(--t-prod), border-bottom-right-radius var(--t-prod);
}
.prod:hover .prod__media{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.prod__media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.prod:hover .prod__media img{ transform:scale(1.04); }
.prod__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.prod__info{
  position:relative;
  z-index:var(--z-content);
}
.prod__sub{
  display:block;
  font-size:var(--t-s);
  font-weight:500;
  color:rgba(255,255,255,.7);
  margin-bottom:4px;
}
.prod__info h3{
  font-size:var(--h3);
  font-weight:600;
  color:var(--white);
  letter-spacing:-.018em;
  line-height:1.1;
  margin:0;
}

/* CTA wrap — fixed 80px height (no CLS) — gets dark bg on hover.
   Bottom corners always rounded (forms card bottom). Top corners flatten on hover to merge with media above. */
.prod__cta-wrap{
  height:80px;
  padding:14px;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  background:transparent;
  border-radius:var(--r-card);
  overflow:hidden;
  transition:background var(--t-prod), border-top-left-radius var(--t-prod), border-top-right-radius var(--t-prod);
}
.prod:hover .prod__cta-wrap{
  background:var(--paper-3);                  /* alabaster grey — subtle on light page, doesn't clash */
  border-top-left-radius:0;
  border-top-right-radius:0;
}

/* outline pill default → accent circle on hover (text fades + pill collapses around the arrow slot) */
.prod__cta{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  padding:0 50px 0 22px;
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--accent);
  font-size:var(--t-m);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  transition:
    width var(--t-prod),
    padding var(--t-prod),
    background var(--t-prod),
    border-color var(--t-prod),
    color var(--t-prod),
    border-radius var(--t-prod);
}
.prod:hover .prod__cta{
  width:var(--ctrl-h);
  padding:0;
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
  border-radius:50%;
}

.prod__cta-text{
  display:inline-block;
  max-width:200px;
  overflow:hidden;
  transition:opacity var(--t1), max-width var(--t-prod);
}
.prod:hover .prod__cta-text{
  opacity:0;
  max-width:0;
}

.prod__cta-arrow{
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  pointer-events:none;
}

/* dark section variant */
.cat--dark .prod__cta{
  border-color:rgba(255,255,255,.35);
  color:var(--white);
}
.cat--dark .prod:hover .prod__cta-wrap{
  background:var(--card-dark-2);
}
.cat--dark .prod:hover .prod__cta{
  background:var(--white);
  border-color:var(--white);
  color:var(--ink);
}

/* ============== WHY ITALFROST — obrazek po lewej, tekst po prawej ============== */
.why{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.why__container{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 112px);
  align-items:center;
}
.why__media{
  margin:0;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:5/4;
  background:var(--paper-2);
}
.why__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.why__media:hover img{ transform:scale(1.04); }
.why__copy{
  display:flex; flex-direction:column;
  gap:clamp(20px, 2vw, 28px);
  max-width:42ch;
}
.why__copy h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.1;
  color:var(--ink);
  margin:0;
}
.why__copy p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}

@media (max-width:880px){
  .why__container{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }
  .why__media{ aspect-ratio:16/10; }
}

/* ============== SHOWCASE — krótki intro + CTA po lewej, duży nagłówek po prawej ============== */
.show{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.show__container{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2.4fr);
  gap:clamp(40px, 6vw, 120px);
  align-items:start;
}
.show__intro{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2vw, 28px);
  max-width:32ch;
}
.show__intro p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}
.show__intro .pill{
  align-self:flex-start;
}
.show__headline{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--ink);
  margin:0;
}
@media (max-width:880px){
  .show__container{
    grid-template-columns:1fr;
    gap:24px;
  }
  .show__headline{ order:1; }
  .show__intro{ order:2; max-width:none; }
}

/* ============== STATS — each stat in its own rounded box ============== */
.stats{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.stats__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px, 1.4vw, 20px);
}
.stats__list li{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(28px, 3vw, 40px);
  background:var(--paper-2);
  border-radius:var(--r-card);
  min-height:clamp(200px, 18vw, 240px);
}

.stats__num{
  font-size:clamp(40px, 4.4vw, 64px);
  font-weight:700;
  letter-spacing:-.038em;
  line-height:.92;
  color:var(--accent);
}
.stats__num sup{
  font-size:.32em;
  font-weight:500;
  color:var(--mist-2);
  vertical-align:top;
  margin-left:2px;
  letter-spacing:0;
  position:relative;
  top:.22em;
}

.stats__label{
  font-size:var(--t-l);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.012em;
  line-height:1.2;
  margin-top:auto;  /* push label+desc to bottom of box */
}

.stats__desc{
  margin:0;
  font-size:var(--t-s);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}

@media (max-width:1080px){
  .stats__list{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .stats__list{ grid-template-columns:1fr; }
  .stats__list li{ min-height:0; }
}

/* ============== MAP — realizations across Europe + Canada ============== */
.map{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.map__container{
  background:var(--paper-2);
  border-radius:var(--r-card);
  padding:var(--inset-pad-y) var(--inset-pad-x);
}
.map__head{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2.4fr);
  gap:clamp(40px, 6vw, 120px);
  align-items:start;
  margin-bottom:clamp(48px, 6vw, 80px);
}
.map__lead{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
  max-width:32ch;
}
.map__title{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.1;
  color:var(--ink);
  margin:0;
}
@media (max-width:880px){
  .map__head{ grid-template-columns:1fr; gap:var(--space-6); }
}

/* visual: realna mapa świata — inline SVG + piny pozycjonowane procentowo.
   aspect-ratio == viewBox SVG (2000 / 857), więc procentowe piny (HTML) idealnie pokrywają się z geometrią SVG. */
.map__visual{
  position:relative;
  width:100%;
  aspect-ratio:2000 / 857;
}
.map__svg{
  width:100%;
  height:100%;
  display:block;
  /* miękkie wygaszanie krawędzi — kontynenty rozpływają się w tle karty
     zamiast być twardo ucięte przez viewBox (szczególnie w zoomie mobilnym) */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite:intersect;
}
.map__land path{
  fill:var(--paper-3);
  stroke:var(--paper-2);
  stroke-width:.6;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* piny — wrapper o zerowych wymiarach pozycjonowany %, kropka jako ::before wycentrowana na punkcie */
.map__pins{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
}
.map__pin{
  position:absolute;
  width:0;
  height:0;
}
.map__pin:hover{
  z-index:var(--z-tooltip);
}
.map__pin::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:14px;
  height:14px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--ink);
  border:3px solid var(--paper-2);
  box-shadow:var(--shadow-sm);
  transition:background var(--t1), width var(--t1), height var(--t1);
}
.map__pin:hover::before{
  background:var(--accent);
  width:18px;
  height:18px;
}

/* HQ pin — Oświęcim: accent + pulsujący ring */
@keyframes map-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(73,80,87,.45); }
  50%      { box-shadow:0 0 0 10px rgba(73,80,87,0); }
}
.map__pin--hq::before{
  background:var(--accent);
  animation:map-pulse 2.4s ease-in-out infinite;
}

/* tooltip — paper card w ink, nad pinem, czysty CSS hover */
.map__pin-tip{
  position:absolute;
  left:0;
  bottom:0;
  z-index:var(--z-tooltip);
  margin-bottom:14px;
  transform:translate(-50%, 6px);
  padding:8px 14px;
  background:var(--ink);
  color:var(--white);
  font-size:var(--t-s);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.2;
  white-space:nowrap;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t1), transform var(--t1);
}
.map__pin:hover .map__pin-tip{
  opacity:1;
  transform:translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce){
  .map__pin--hq::before{ animation:none; }
}


/* lista miast pod mapką - dla accessibility i jako lekka legenda */
.map__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-4) var(--space-8);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--paper-3);
}
.map__list li{
  font-size:var(--t-m);
  color:var(--smoke);
  line-height:1.4;
}
.map__list strong{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:4px;
}
@media (max-width:720px){
  .map__list{ grid-template-columns:repeat(2, 1fr); }
  .map__pin-label{ font-size:var(--t-xs); }
}
@media (max-width:480px){
  .map__list{ grid-template-columns:1fr; }
}

/* ============== PROCESS — sticky big counter + scrolling steps ============== */
.proc{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.proc__head{
  display:flex; flex-direction:column;
  gap:18px;
  margin-bottom:clamp(40px, 5vw, 64px);
  max-width:720px;
}
.proc__head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
}
.proc__head p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.45;
  max-width:48ch;
}

.proc__container{
  display:grid;
  grid-template-columns:minmax(180px, 1fr) minmax(0, 2.4fr);
  column-gap:clamp(40px, 6vw, 120px);
  align-items:start;
}

/* sticky big counter — left column on desktop, sticky bar on mobile */
.proc__counter{
  position:sticky;
  top:calc(var(--hd-h) + 56px);
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2.4vw, 32px);
  user-select:none;
}

/* counter row — number stack + total separator */
.proc__counter-row{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-feature-settings:"tnum";
}

/* stack numbers — only one visible at a time, crossfade between */
.proc__counter-stack{
  position:relative;
  display:grid;
  grid-template-areas:"stack";
}
.proc__counter-num{
  grid-area:stack;
  font-size:clamp(56px, 7vw, 96px);
  font-weight:700;
  letter-spacing:-.042em;
  line-height:.94;
  color:var(--accent);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.proc__counter-num.is-active{
  opacity:1;
}

.proc__counter-total{
  font-size:clamp(16px, 1.6vw, 22px);
  font-weight:600;
  color:var(--mist);
  letter-spacing:-.02em;
}

/* progress track — visual indicator of step position */
.proc__counter-track{
  position:relative;
  width:100%;
  max-width:clamp(160px, 18vw, 280px);
  height:2px;
  background:var(--paper-3);
  overflow:hidden;
  border-radius:2px;
}
.proc__counter-fill{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:0;
  background:var(--accent);
  border-radius:2px;
  transition:width .55s var(--ease);
}

/* steps list — right column */
.proc__list{
  position:relative;
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
}

/* sliding indicator — vertical bar on the left of the active step, position animated by GSAP */
.proc__indicator{
  position:absolute;
  top:0;
  left:calc(-1 * clamp(20px, 2vw, 32px));
  width:3px;
  height:48px;
  background:var(--accent);
  border-radius:3px;
  pointer-events:none;
  will-change:transform;
}

.proc__step{
  padding-block:clamp(36px, 5vw, 64px);
  border-top:1px solid var(--line);
  transition:opacity .5s var(--ease);
  opacity:.45;
}
.proc__step:first-child{
  border-top:none;
  padding-top:0;
}
.proc__step:last-child{ border-bottom:1px solid var(--line); }
.proc__step.is-active{ opacity:1; }

.proc__step-meta{
  display:block;
  font-size:var(--t-s);
  font-weight:500;
  color:var(--smoke);
  margin-bottom:12px;
  letter-spacing:-.005em;
}
.proc__name{
  font-size:clamp(24px, 2.6vw, 36px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.1;
  margin:0 0 14px;
  color:var(--ink);
}
.proc__desc{
  margin:0;
  font-size:var(--t-l);
  color:var(--smoke);
  line-height:1.5;
  max-width:56ch;
}

@media (max-width:880px){
  .proc__container{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:0;
  }

  /* mobile: thin sticky bar at top of section, sits below page header */
  .proc__counter{
    position:sticky;
    top:var(--hd-h);
    z-index:var(--z-sticky);
    flex-direction:column;
    gap:10px;
    padding:12px var(--gutter);
    margin-inline:calc(-1 * var(--gutter));
    background:rgba(248, 249, 250, .85);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
    transition:top var(--t1);
  }
  /* gdy header ukryty (scroll w dół), counter doczepia się do top:0 zamiast zostawiać gap */
  .hd-hidden .proc__counter{
    top:0;
  }
  .proc__counter-num{
    font-size:clamp(32px, 8vw, 48px);
    line-height:1;
  }
  .proc__counter-total{
    font-size:clamp(15px, 4vw, 20px);
  }
  .proc__counter-track{
    max-width:none;
    width:100%;
  }

  .proc__list{
    padding-top:24px;
  }
  .proc__step{
    padding-block:clamp(28px, 5vw, 48px);
    opacity:1;
  }
  .proc__indicator{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .proc__counter-num,
  .proc__step{
    transition:none;
  }
  .proc__step{ opacity:1; }
}

/* ============== SLIDERS — blog + realizacje (identyczna mechanika, różna liczba kolumn) ============== */
.blog,
.real{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  --slider-gap: clamp(20px, 2.4vw, 36px);
  --slider-cols: 3;
}
.real{ --slider-cols: 4; }

.blog__head,
.real__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.blog__head h2,
.real__head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
}
.blog__head-actions,
.real__head-actions{
  display:flex;
  align-items:center;
  gap:clamp(20px, 2.4vw, 36px);
}

/* nav buttons — circular outline pills, ink-fill on hover */
.blog__nav,
.real__nav{
  display:flex;
  gap:10px;
}
.blog__nav-btn,
.real__nav-btn{
  width:var(--ctrl-h); height:var(--ctrl-h);
  border:1px solid var(--accent);
  border-radius:50%;
  background:transparent;
  color:var(--accent);
  font-size:18px;
  font-weight:600;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background var(--t2), color var(--t2), border-color var(--t2), opacity var(--t2);
}
.blog__nav-btn:hover:not(:disabled),
.real__nav-btn:hover:not(:disabled){
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.blog__nav-btn:disabled,
.real__nav-btn:disabled{
  opacity:.25;
  cursor:not-allowed;
}

/* viewport — clips overflow so cards bleed cleanly past edges */
.blog__viewport,
.real__viewport{
  overflow:hidden;
}
.blog__track,
.real__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--slider-cols) - 1) * var(--slider-gap)) / var(--slider-cols));
  column-gap:var(--slider-gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:0;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:6px;     /* room for snap, hides any sub-pixel scrollbar artifact */
  margin-bottom:-6px;
}
.blog__track::-webkit-scrollbar,
.real__track::-webkit-scrollbar{ display:none; }

/* progress track — mirror of proc__counter-track for visual rhyme */
.blog__progress,
.real__progress{
  margin-top:clamp(28px, 3vw, 40px);
  width:100%;
  height:2px;
  background:var(--paper-3);
  overflow:hidden;
  border-radius:2px;
}
.blog__progress-fill,
.real__progress-fill{
  height:100%;
  width:0;
  background:var(--accent);
  border-radius:2px;
  transition:width .35s var(--ease);
}

@media (max-width:1080px){
  .blog{ --slider-cols: 2.4; }
  .real{ --slider-cols: 3; }
}
@media (max-width:720px){
  .blog{ --slider-cols: 1.6; }
  .real{ --slider-cols: 1.8; }
  .blog__head,
  .real__head{ flex-direction:column; align-items:flex-start; }
  .blog__head-actions,
  .real__head-actions{ width:100%; justify-content:space-between; }
}
@media (max-width:480px){
  .blog{ --slider-cols: 1.15; }
  .real{ --slider-cols: 1.2; }
  .blog__nav-btn,
  .real__nav-btn{ width:46px; height:46px; }
}

.post,
.case{
  display:flex; flex-direction:column;
  gap:14px;
  color:inherit;
  scroll-snap-align:start;
  min-width:0;
}
.post__media,
.case__media{
  aspect-ratio:4/3;
  background:var(--paper-2);
  border-radius:var(--r-card);
  overflow:hidden;
}
.post__media img,
.case__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.post:hover .post__media img,
.case:hover .case__media img{ transform:scale(1.04); }
.post__date,
.case__meta{
  display:block;
  font-size:var(--t-s);
  font-weight:500;
  color:var(--mist-2);
  margin-top:4px;
}
.post h3,
.case h3{
  font-size:var(--t-l);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.25;
  margin:0;
  transition:color var(--t1);
}
.post:hover h3,
.case:hover h3{ color:var(--smoke); }

/* ============== FAQ — left heading + right numbered accordion ============== */
.faq{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  --faq-num-w:    clamp(36px, 3.4vw, 56px);
  --faq-col-gap:  clamp(20px, 2vw, 32px);
  /* treść odpowiedzi = proza strony (jak .proc__desc w sekcji krokowej) */
  --faq-text:     var(--t-l);
}
.faq__container{
  display:grid;
  grid-template-columns:minmax(240px, 1fr) minmax(0, 2fr);
  column-gap:clamp(40px, 6vw, 120px);
  align-items:start;
}
.faq__head{
  display:flex; flex-direction:column;
  gap:18px;
  max-width:36ch;
}
.faq__head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
}
.faq__head p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.45;
}

.faq__list{
  width:100%;
}

.faq__item{
  border-top:1px solid var(--line);
}
.faq__item:first-child{ border-top:none; }
.faq__item:last-child{ border-bottom:1px solid var(--line); }

.faq__summary{
  display:flex;
  align-items:center;
  gap:var(--faq-col-gap);
  width:100%;
  padding:clamp(24px, 2.4vw, 36px) 0;
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  font:inherit;
  color:var(--ink);
  transition:color var(--t1);
}
.faq__summary:hover{ color:var(--smoke); }
.faq__summary:hover .faq__num{ color:var(--ink); }

.faq__num{
  flex:0 0 var(--faq-num-w);
  font-size:var(--t-s);
  font-weight:600;
  color:var(--mist);
  letter-spacing:.04em;
  font-feature-settings:"tnum";
  line-height:1;
  transition:color var(--t1);
}
.faq__item[data-open="true"] .faq__num{ color:var(--ink); }

/* Pytanie i odpowiedź mają ten sam, stały rozmiar var(--t-l) — tekst nie zmienia
   wielkości po rozwinięciu i nie skaluje się z szerokością ekranu.
   Hierarchię niesie waga i kolor (600/ink kontra 500/smoke), nie rozmiar. */
.faq__q{
  flex:1;
  font-size:var(--t-l);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.35;
}

.faq__icon{
  position:relative;
  width:22px; height:22px;
  flex-shrink:0;
  color:var(--ink);
}
.faq__icon::before, .faq__icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.faq__icon::before{ width:22px; height:1.5px; }
.faq__icon::after{ width:1.5px; height:22px; transition:transform var(--t2); }
.faq__item[data-open="true"] .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); }

/* body — collapses via grid-template-rows: 0fr → 1fr (smooth, no reflow per frame).
   Custom <div> structure (no native <details>) so browser content-visibility hiding doesn't interfere. */
.faq__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq__body-inner{
  overflow:hidden;
  min-height:0;
}
.faq__item[data-open="true"] .faq__body{
  grid-template-rows:1fr;
}
.faq__body p{
  padding:0 0 clamp(28px, 2.6vw, 40px) calc(var(--faq-num-w) + var(--faq-col-gap));
  margin:0;
  max-width:64ch;
  font-size:var(--faq-text);
  color:var(--smoke);
  line-height:1.55;
}
/* listy w odpowiedzi (pole WYSIWYG): to samo wcięcie co akapit, plus odtworzone
   punktory i numery — globalny reset ul,ol{list-style:none} z góry pliku je zdejmuje,
   więc bez tego pozycje listy wyglądają jak zwykłe akapity. */
.faq__body ul,
.faq__body ol{
  padding:0 0 clamp(28px, 2.6vw, 40px) calc(var(--faq-num-w) + var(--faq-col-gap));
  margin:0;
  max-width:64ch;
  list-style:none;
  display:flex; flex-direction:column;
  gap:clamp(11px, 1.1vw, 15px);
}
.faq__body li{
  font-size:var(--faq-text);
  color:var(--smoke);
  line-height:1.55;
}
.faq__body ul li{ position:relative; padding-left:30px; }
.faq__body ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.faq__body ol{ counter-reset:li; }
.faq__body ol li{
  counter-increment:li;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline;
}
.faq__body ol li::before{
  content:counter(li) ".";
  font-size:var(--faq-text); font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums;
}

@media (max-width:880px){
  .faq__container{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:clamp(32px, 5vw, 48px);
  }
  .faq__head{ max-width:none; }
  .faq__body{ padding-left:0; }
}
@media (max-width:560px){
  .faq__num{ flex-basis:32px; }
  /* bez nadpisania rozmiaru pytania — ma zostać var(--t-l), tak jak odpowiedź */
}

/* ============== FINALE — big rounded dark CTA card ============== */
.finale{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.finale__card{
  background:var(--ink);
  color:var(--white);
  border-radius:var(--r-card);
  padding:var(--inset-pad-y) var(--inset-pad-x);
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2.4vw, 32px);
}
.finale__card h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--white);
}
.finale__card > p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:rgba(255,255,255,.7);
  line-height:1.45;
  max-width:48ch;
}

.finale__actions{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.6vw, 22px);
  flex-wrap:wrap;
}
.finale__or{
  font-size:var(--t-m);
  font-weight:500;
  color:rgba(255,255,255,.5);
}
.finale__phone{
  display:inline-block;
  font-size:var(--t-m);
  font-weight:700;
  letter-spacing:-.005em;
  line-height:1.0;
  color:var(--white);
  border-bottom:2px solid transparent;
  transition:border-color var(--t2), opacity var(--t2);
}
.finale__phone:hover{ border-color:rgba(255,255,255,.5); opacity:.8; }

.finale__meta{
  margin:clamp(8px, 1.4vw, 16px) 0 0;
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:clamp(28px, 4vw, 64px); flex-wrap:wrap;
}
.finale__meta div{ display:flex; flex-direction:column; gap:6px; }
.finale__meta dt{
  font-size:var(--t-xs);
  font-weight:600;
  color:rgba(255,255,255,.5);
  margin:0;
}
.finale__meta dd{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--white);
  line-height:1.4;
}

/* ============== FOOTER — fixed at bottom, revealed as page scrolls up ============== */
.ft{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:var(--z-bg);
  min-height:var(--ft-h);
  background:var(--ink);
  color:var(--white);
  border-top-left-radius:var(--r-card);
  border-top-right-radius:var(--r-card);
}
.ft__inner{
  height:100%;
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(56px, 6vw, 96px) var(--gutter) clamp(28px, 3vw, 40px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(48px, 6vw, 80px);
}

/* statement — top of footer, big editorial typography */
.ft__statement{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2vw, 32px);
}
.ft__statement h2{
  font-size:clamp(32px, 3.6vw, 52px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.1;
  color:var(--white);
}
.ft__statement p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:rgba(255,255,255,.65);
  line-height:1.45;
  max-width:46ch;
}

/* link columns — pełna szerokość kontenera. Wcześniej siatka była dociśnięta do prawej
   (justify-self:end + width:720px), przez co kolumny miały ~150px i pozycje menu łamały
   się na dwie linie („Lady chłodnicze", numer telefonu). auto-fit + minmax = kolumny
   zwężają się dopiero, gdy naprawdę brakuje miejsca. */
.ft__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(24px, 3vw, 56px);
  align-self:end;
  width:100%;
}
.ft__cols > div{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}
.ft__h{
  font-family:var(--f-sans);
  font-size:var(--t-xs);
  font-weight:600;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:8px;
}
.ft__cols a, .ft__cols p{
  font-size:var(--t-l);
  font-weight:500;
  color:rgba(255,255,255,.85);
  line-height:1.4;
  letter-spacing:-.012em;
  margin:0;
  transition:color var(--t1);
}
.ft__cols a:hover{ color:var(--white); }

/* „Zobacz wszystkie" pod kolumną menu — ten sam .link-arrow co na całej stronie,
   w wariancie na ciemnym tle (akcent jest słabo czytelny na --ink).
   Selektor musi być .ft__cols a.ft__more, żeby przebić .ft__cols a (0,1,1). */
.ft__cols a.ft__more{
  margin-top:6px;
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:normal;
  color:var(--white);
  border-bottom-color:transparent;
}
.ft__cols a.ft__more:hover{ color:var(--white); border-bottom-color:var(--white); }

/* bottom row — logo + copyright + certs */
.ft__bot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  padding-top:clamp(24px, 2.4vw, 36px);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--t-xs);
  font-weight:500;
  color:rgba(255,255,255,.5);
}
.ft__bot .ft__logo{
  display:block;
  height:11px;
  width:auto;
  filter:brightness(0) invert(1);     /* force any color to pure white for the dark footer */
}

@media (max-width:980px){
  .ft__inner{ grid-template-rows:auto auto auto; }
  .ft__cols{ grid-template-columns:repeat(2, 1fr); justify-self:stretch; width:100%; }
  .ft__statement{ max-width:none; }
}
@media (max-width:600px){
  .ft__bot{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ============== REVEAL (subtle on-scroll) ============== */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}