/* ════════════════════════════════════════════
   PABISIAK STUDIOS - shared stylesheet
   Editorial-bento: flat colour fields · radius 0 ·
   oversized Bricolage · yellow punch · lots of air
   ════════════════════════════════════════════ */

/* ── FONTY - hostowane lokalnie (assets/fonts, woff2 variable pobrane z Google Fonts: Space Grotesk v22 wght 300-700, DM Sans v17 opsz 9-40 / wght 300-700).
   Strony NIE ładują już fonts.googleapis.com - to były 2 blokujące żądania do obcej domeny (PageSpeed, 13.10.2026). Podzbiór vietnamese pominięty. ── */
/* DM Sans - latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans - latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk - latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

:root{
  --white:#ffffff;
  --paper:#f3f5f7;
  --black:#0c2336;
  --ink:#0c2336;
  --text:#41525f;
  --muted:#7d8b97;
  --light-border:#e2e7ec;

  --navy:#0c2a42;
  --navy-deep:#06151f;
  --blue:#1577b8;
  --bright:#1c93dd;
  --yellow:#fbb200;
  --accent:#1577b8;
  --accent2:#0f5e93;
  --bg-dark:#06151f;

  --nav-h:110px;
  --radius:0px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-acc:cubic-bezier(.1,.72,.32,1);
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-ui:'DM Sans', system-ui, sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --wrap:1440px;
  --hero-pad-b:clamp(80px,11vh,118px);
  --hero-actbox:clamp(72px,9vh,96px);
  --hero-top:clamp(20px,3.2vh,56px);
  --hero-meta:107px;
}

body{ font-family:var(--font-body); color:var(--text); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body.no-scroll{ overflow:hidden; }
html:has(body.no-scroll){ overflow:hidden; }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }
html,body{ overflow-x:clip; }
*{ min-width:0; }
::selection{ background:var(--yellow); color:var(--ink); }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,64px); }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-ui); font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:19px 36px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--bright); transform:translateY(-3px); }
.btn-yellow{ background:var(--yellow); color:var(--ink); }
.btn-yellow:hover{ filter:brightness(1.05); transform:translateY(-3px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-3px); }
.btn-ghost{ background:transparent; border-color:currentColor; }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-3px); }
.btn .arr{ width:18px; height:18px; transition:transform .25s var(--ease); }
.btn .arr svg{ width:100%; height:100%; display:block; }
.btn:hover .arr{ transform:translateX(5px); }

/* ════ HEADER / NAV ════ */
header{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h); padding:0 clamp(22px,4vw,68px);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s, box-shadow .4s;
}
#site-header::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); transition:opacity .4s;
}
#site-header.solid::before{ opacity:0; }
#nav-logo img{ height:72px; width:151px; object-fit:contain; object-position:left center; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.55)); transition:filter .4s; }
header.solid #nav-logo img{ filter:none; }
header.solid{ background:var(--white); box-shadow:0 1px 0 var(--light-border); }
.nav-links{ display:flex; align-items:center; gap:0; list-style:none; }
.nav-link .ext{ display:inline-flex; width:11px; height:11px; margin-left:6px; vertical-align:-1px; opacity:.55; transition:opacity .2s ease; }
.nav-link:hover .ext{ opacity:1; }
.nav-link .ext svg{ width:100%; height:100%; }
.nav-link{
  padding:10px 20px; font-family:var(--font-ui); font-weight:600; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82);
  transition:color .2s; position:relative; cursor:pointer;
}
.nav-link::after{ content:''; position:absolute; left:20px; right:20px; bottom:6px; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.nav-link:hover::after, .nav-link.current::after{ transform:scaleX(1); }
.nav-link:hover{ color:#fff; }
header.solid .nav-link{ color:var(--ink); }
header.solid .nav-link:hover{ color:var(--blue); }
.nav-link.is-trigger{ cursor:pointer; display:inline-flex; align-items:center; }
.nav-link .chev{ width:10px; height:10px; margin-left:8px; display:inline-block; transition:transform .4s var(--ease); }
.nav-link .chev svg{ width:100%; height:100%; display:block; }
body.mm-open .nav-link.is-trigger .chev{ transform:rotate(180deg); }
body.mm-open .nav-link.is-trigger{ color:#fff; }
.menu-btn{
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.85);
  font-family:var(--font-ui); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  display:none; align-items:center; gap:14px; padding:0; margin-left:20px; transition:color .4s;
}
header.solid .menu-btn{ color:var(--ink); }
.menu-btn-lines{ display:flex; flex-direction:column; gap:5px; }
.menu-btn-lines span{ display:block; width:22px; height:2px; background:rgba(255,255,255,.85); transition:background .4s; }
header.solid .menu-btn-lines span{ background:var(--ink); }

/* ════ BENTO MEGA-MENU ════ */
#mega-menu{
  --m-navy:#0c2a42; --m-blue:#1577b8; --m-bright:#1c93dd; --m-yellow:#fbb200;
  --m-ink:#0c2336; --m-hover:#f2f6fa; --m-bg:#06151f;
  --m-radius:var(--radius,0px);
  --m-ease:cubic-bezier(.16,1,.3,1);
  --m-display:'Space Grotesk','DM Sans',sans-serif;
  --m-body:'DM Sans',system-ui,sans-serif;
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column;
  padding:24px clamp(20px,3vw,46px) clamp(18px,2.2vw,32px);
  background:
    radial-gradient(ellipse 70% 60% at 82% -5%, rgba(28,147,221,.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 8% 105%, rgba(251,178,0,.07) 0%, transparent 55%),
    var(--m-bg);
  opacity:0; pointer-events:none; transition:opacity .4s var(--m-ease);
}
#mega-menu.open{ opacity:1; pointer-events:auto; }
.mm-top{
  display:flex; align-items:center; justify-content:space-between;
  flex:0 0 auto; margin-bottom:clamp(14px,1.8vw,24px);
  opacity:0; transform:translateY(-12px);
  transition:opacity .5s var(--m-ease) .04s, transform .5s var(--m-ease) .04s;
}
#mega-menu.open .mm-top{ opacity:1; transform:none; }
.mm-eyebrow{ display:flex; flex-direction:column; gap:8px; }
.mm-eyebrow .lbl{ font-family:var(--m-display); font-weight:700; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--m-yellow); }
.mm-eyebrow .ttl{ font-family:var(--m-display); font-weight:800; font-size:clamp(22px,2.4vw,34px); letter-spacing:-.01em; color:#fff; }
.mm-close{
  display:inline-flex; align-items:center; gap:13px; cursor:pointer; background:none; border:none;
  font-family:var(--m-display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.mm-close .x{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:2px solid currentColor; opacity:.5; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; transition:opacity .25s, transform .4s var(--m-ease); }
.mm-primary{ display:none; }
.mm-corner{ display:none; }   /* ikona w rogu kafelka - tylko mobile */
.mm-gridwrap{ flex:1 1 auto; min-height:0; position:relative; overflow-y:auto; overflow-x:hidden; display:flex; overscroll-behavior:contain; container-type:size; }
.mm-grid{ display:grid; width:100%; gap:clamp(10px,1vw,16px); grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:calc((100cqh - clamp(10px,1vw,16px)) / 2); min-height:100%; align-content:start; }
.mm-tile{
  position:relative; overflow:hidden; border-radius:var(--m-radius);
  padding:clamp(15px,1.4vw,26px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  cursor:pointer; color:#fff; text-align:left; background:var(--m-blue); font-family:var(--m-body);
  transition:background .28s var(--m-ease), color .28s var(--m-ease), box-shadow .28s var(--m-ease);
}
#mega-menu.open .mm-grid .mm-tile{ animation:mmTileIn .52s var(--m-ease) backwards; animation-delay:var(--d,0ms); }
@keyframes mmTileIn{ from{opacity:0; transform:translateY(26px) scale(.96);} to{opacity:1; transform:none;} }
.mm-tile.t-navy{ background:var(--m-navy); }
.mm-tile.t-blue{ background:var(--m-blue); }
.mm-tile.t-bright{ background:var(--m-bright); }
.mm-tile.t-yellow{ background:var(--m-yellow); color:var(--m-ink); }
#mega-menu.open .mm-tile:focus-visible{ background:var(--m-hover); color:var(--m-ink); box-shadow:inset 0 0 0 2px rgba(12,35,54,.08); outline:none; }
@media (hover:hover){
  #mega-menu.open .mm-tile:hover{ background:var(--m-hover); color:var(--m-ink); box-shadow:inset 0 0 0 2px rgba(12,35,54,.08); outline:none; }
  #mega-menu.open .mm-tile:hover .mm-meta{ opacity:.7; color:var(--m-ink); }
  .mm-close:hover .x{ opacity:1; transform:rotate(90deg); }
}
.mm-title{ font-family:var(--m-display); font-weight:800; text-transform:uppercase; font-size:clamp(16px,1.45vw,26px); line-height:1.0; letter-spacing:.004em; margin-top:0; min-height:calc(var(--mm-title-lines,1) * 1em); }
.mm-meta{ font-family:var(--m-body); font-weight:600; font-size:clamp(10.5px,.74vw,12.5px); letter-spacing:.02em; margin-top:10px; opacity:.62; display:flex; align-items:center; gap:7px; transition:opacity .28s, color .28s; }
.mm-meta .ico{ display:inline-flex; width:15px; height:15px; }
.mm-meta .ico svg{ width:100%; height:100%; }
.mm-sublayer{ position:absolute; inset:0; z-index:5; display:grid; gap:clamp(10px,1vw,16px); overflow-y:auto; overscroll-behavior:contain; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:calc((100cqh - clamp(10px,1vw,16px)) / 2); align-content:start; opacity:0; pointer-events:none; transition:opacity .3s var(--m-ease); }
.mm-sublayer.in{ opacity:1; pointer-events:auto; }
#mega-menu.sub-open .mm-grid{ opacity:0; pointer-events:none; position:absolute; inset:0; height:100%; min-height:0; transition:opacity .3s var(--m-ease); }
#mega-menu.sub-open .mm-gridwrap{ overflow:hidden; }
.mm-sublayer .mm-tile{ opacity:0; transform:scale(.985); }
.mm-sublayer.in .mm-tile{ animation:mmSubIn .44s var(--m-ease) forwards; animation-delay:var(--d,0ms); }
@keyframes mmSubIn{ to{opacity:1; transform:none;} }
.mm-back{ background:rgba(255,255,255,.05); color:#fff; border:2px dashed rgba(255,255,255,.34); cursor:pointer; text-align:left; font-family:var(--m-body); }
#mega-menu.open .mm-back:focus-visible{ background:var(--m-hover); color:var(--m-ink); border-color:transparent; outline:none; }
@media (hover:hover){ #mega-menu.open .mm-back:hover{ background:var(--m-hover); color:var(--m-ink); border-color:transparent; outline:none; } }
.mm-back .mm-title{ white-space:nowrap; }
.mm-back-arrow{ display:inline-flex; vertical-align:middle; color:inherit; }
.mm-back-arrow svg{ width:auto; height:.9em; margin-bottom:.08em; }
.mm-foot{ flex:0 0 auto; margin-top:clamp(12px,1.4vw,20px); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; opacity:0; transform:translateY(12px); transition:opacity .5s var(--m-ease) .22s, transform .5s var(--m-ease) .22s; }
#mega-menu.open .mm-foot{ opacity:1; transform:none; }
.mm-social{ display:flex; gap:24px; }
.mm-social a{ font-family:var(--m-display); font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); transition:color .2s; }
.mm-social a:hover{ color:var(--m-yellow); }
.mm-meta-foot{ font-size:11.5px; letter-spacing:.12em; color:rgba(255,255,255,.4); font-family:var(--m-body); }
@media (max-width:820px){
  /* ── MENU MOBILNE (telefon + tablet, ≤820 px) ──
     Górny pasek = tylko „Zamknij" (nagłówek „Co robimy / Nasze usługi" i „Kategoria" nie są pokazywane).
     Poziom 1: linki O nas / Portfolio / Blog / Kontakt + usługi jako kafelki (decyzja klienta 11.10.2026; widok „lista" usunięty).
     Poziom 2: lista jednokolumnowa o równych wierszach; linki główne schowane.
     Kolory (3: granat / jasny niebieski / żółty) nadaje menu.js klasami .mc-0/.mc-1/.mc-2 tak, by sąsiednie pola nigdy nie miały tej samej barwy. */
  /* Przewija się CAŁY widok menu (pasek „Zamknij" + linki + kafelki/lista), nie sam kontener z kafelkami:
     #mega-menu jest scrollerem, .mm-gridwrap ma naturalną wysokość (container-type:normal - size containment zerowałoby ją),
     a podmenu (poziom 2) po otwarciu wchodzi do przepływu (position:relative), żeby też liczyło się do wysokości. */
  #mega-menu{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .mm-gridwrap{ flex:0 0 auto; min-height:0; overflow:visible; display:block; container-type:normal; }
  #mega-menu.sub-open .mm-gridwrap{ overflow:visible; }
  #mega-menu.sub-open .mm-sublayer{ position:relative; inset:auto; overflow:visible; }
  .mm-foot{ display:none; }
  .mm-eyebrow{ display:none; }
  .mm-top{ align-items:center; justify-content:space-between; min-height:32px; margin-bottom:clamp(28px,5vh,44px); }
  .mm-close{ flex:0 0 auto; margin-left:auto; white-space:nowrap; font-size:11.5px; letter-spacing:.14em; gap:9px; padding:0; }
  .mm-close .x{ width:32px; height:32px; font-size:13px; border-width:1.5px; }
  /* O nas / Portfolio / Blog / Kontakt: duże linki jeden pod drugim, kreski tylko MIĘDZY nimi */
  .mm-primary{ display:flex; flex-direction:column; gap:0; flex:0 0 auto; margin:0 0 clamp(22px,3.5vh,32px); }
  .mm-primary a{ display:flex; align-items:center; justify-content:space-between; font-family:var(--m-display); font-weight:800; font-size:clamp(19px,5.2vw,22px); letter-spacing:.01em; text-transform:uppercase; color:#fff; padding:13px 4px 13px 2px; border-bottom:1px solid rgba(255,255,255,.12); transition:color .2s; }
  .mm-primary a:last-child{ border-bottom:none; }
  .mm-primary a::after{ content:''; width:9px; height:9px; border-right:2px solid var(--m-yellow); border-bottom:2px solid var(--m-yellow); transform:rotate(-45deg); flex:0 0 auto; }
  #mega-menu.sub-open .mm-primary{ display:none; }
  /* kolory pozycyjne (klasy nadaje menu.js) */
  .mm-tile.mc-0{ background:var(--m-navy); color:#fff; }
  .mm-tile.mc-1{ background:var(--m-bright); color:#fff; }
  .mm-tile.mc-2{ background:var(--m-yellow); color:var(--m-ink); }
  /* poziom 1 - kafelki: 2 kolumny, tytuł w lewym górnym rogu (z rezerwą miejsca na ikonę po prawej), bez licznika podstron, ikona w prawym górnym rogu (+ = ma podstrony, › = link) */
  .mm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; gap:10px; height:auto; min-height:0; }
  .mm-grid .mm-tile{ aspect-ratio:16/10; padding:12px 13px; justify-content:flex-start; }
  .mm-grid .mm-title{ padding-right:2.4em; }   /* rezerwa na ikonę w em: skaluje się z fontem, więc „PROJEKTOWANIE" łamie się (miękki łącznik) na każdym telefonie, a sklejone „I REBRANDING" zawsze się mieści */
  .mm-grid .mm-meta{ display:none; }
  .mm-title{ font-size:clamp(12px,3.75vw,16px); line-height:1.1; min-height:0; overflow-wrap:normal; hyphens:manual; text-wrap:balance; }
  .mm-corner{ display:inline-flex; position:absolute; top:11px; right:11px; width:16px; height:16px; opacity:.8; }
  .mm-corner svg{ width:100%; height:100%; }
  /* poziom 2 - lista o identycznych wierszach (wysokość jak pierwszy wiersz z linijką „Przejdź do strony") */
  .mm-sublayer{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; gap:8px; align-content:start; overflow-y:auto; }
  .mm-sublayer .mm-tile{ aspect-ratio:auto; height:64px; padding:0 44px 0 16px; justify-content:center; }
  .mm-sublayer .mm-title{ font-size:clamp(13px,4vw,15px); }
  .mm-sublayer .mm-meta{ display:none; }
  .mm-sublayer .mm-cat .mm-meta{ display:flex; margin-top:5px; font-size:11.5px; opacity:.8; }
  .mm-sublayer .mm-corner{ top:50%; right:14px; transform:translateY(-50%); }
  .mm-sublayer .mm-back{ padding-right:16px; }
}
/* od 440 px (szerokie telefony + tablet) „PROJEKTOWANIE" mieści się w kafelku z zapasem ≥14 px - miękkie łączniki wyłączone, bo text-wrap:balance łamałby je „dla równowagi" */
@media (min-width:440px) and (max-width:820px){
  .mm-grid .mm-title{ hyphens:none; }
}
/* tablet (561-820 px): kafelki usług w 3 kolumnach */
@media (min-width:561px) and (max-width:820px){
  .mm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mm-grid .mm-tile{ aspect-ratio:3/2; padding:14px 15px; }
}
@media (prefers-reduced-motion:reduce){
  #mega-menu,.mm-top,.mm-foot,.mm-sublayer,.mm-grid,.mm-tile{ transition:none !important; }
  #mega-menu.open .mm-grid .mm-tile,.mm-sublayer.in .mm-tile{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* anchor offset under fixed header */
.anchor{ scroll-margin-top:var(--nav-h); }

/* ════════════════════════════════════════════
   PAGE HERO - oversized, full-bleed, navy
   ════════════════════════════════════════════ */
.phero{
  position:relative; overflow:hidden;
  min-height:clamp(520px,68vh,720px);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--nav-h) + var(--hero-top)) 0 clamp(56px,8vh,96px);
  color:#fff; background:var(--bg-dark);
}
.phero.h-navy{ background:var(--navy); }
.phero.h-blue{ background:var(--blue); }
.phero .pgrid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 95% 90% at 65% 25%, #000 20%, transparent 82%);
  mask-image:radial-gradient(ellipse 95% 90% at 65% 25%, #000 20%, transparent 82%);
}
.phero .wrap{ position:relative; z-index:1; }
/* ── Tło hero na podstronach (13.10.2026): <section class="phero has-bg"> + <img class="phero-bg" srcset 960/1920> + <div class="phero-scrim">.
   Grafiki: images/hero-bg/bg_<strona>.webp (1920×1080) + bg_<strona>_960.webp (telefon); generator i renderer: _tools/hero-bg/. Portfolio = ai_mesh („Mgławica", wybór klienta). ── */
.phero .phero-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.phero .phero-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.phero.has-bg .phero-scrim{ background:linear-gradient(90deg, rgba(6,21,31,.86) 0%, rgba(6,21,31,.5) 46%, rgba(6,21,31,.2) 100%); }
.breadcrumb{ display:flex; align-items:center; gap:11px; font-family:var(--font-ui); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:30px; }
.breadcrumb a:hover{ color:var(--yellow); }
.breadcrumb .sep{ opacity:.45; }
.breadcrumb .cur{ color:#fff; }
.kicker{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--yellow); padding:9px 16px; margin-bottom:26px; }
.phero h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(56px, min(8.8vw, 11.5vh), 128px); line-height:.9; color:#fff; max-width:15ch; text-wrap:balance;
}
.phero h1 em{ font-style:normal; color:var(--yellow); }
.phero .lead{ margin-top:30px; max-width:46ch; font-size:clamp(17px,1.45vw,23px); line-height:1.5; color:rgba(255,255,255,.82); min-height:3em; }

/* ════ STATEMENT - big editorial intro on white ════ */
.statement{ padding:clamp(80px,14vh,190px) 0; }
.statement.on-dark{ background:var(--bg-dark); }
.statement .big{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(28px,4.6vw,66px); line-height:1.04; color:var(--ink); max-width:18ch;
}
.statement.on-dark .big{ color:#fff; }
.statement .big em{ font-style:normal; color:var(--blue); }
.statement.on-dark .big em{ color:var(--yellow); }
.statement .sub{ margin-top:30px; max-width:62ch; font-size:clamp(16px,1.3vw,20px); line-height:1.7; color:var(--text); }
.statement.on-dark .sub{ color:rgba(255,255,255,.72); }

/* ════ FEATURE BANDS - full-bleed alternating colour blocks ════ */
/* minmax(0,1fr) = kolumny dzielą się po równo i żadna nie rozpycha drugiej;
   wysokość pasma wynika z kadru mediów (4:3), a rośnie tylko gdy tekst jest wyższy */
.feat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; min-height:0; }
.feat-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(44px,6vw,118px) clamp(34px,5vw,96px); }
.feat-no{ font-family:var(--font-display); font-weight:800; font-size:clamp(52px,6.5vw,116px); line-height:.78; letter-spacing:-.04em; margin-bottom:26px; }
.feat h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,4.1vw,64px); line-height:.96; letter-spacing:-.01em; text-wrap:balance; }
.feat p{ margin-top:24px; max-width:44ch; font-size:clamp(16px,1.2vw,19px); line-height:1.7; }
.feat-link{ margin-top:38px; display:inline-flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; align-self:flex-start; text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
.feat-link .arr{ width:30px; height:18px; }
.feat-link .arr svg{ width:100%; height:100%; }
.feat-link:hover .arr{ transform:translateX(6px); transition:transform .25s var(--ease); }
/* Kadr mediów ma stałą proporcję 4:3 - dzięki temu wszystkie karuzele mają
   identyczny rozmiar niezależnie od proporcji zdjęć i nic nie przeskakuje przy ładowaniu. */
/* --mc-inset = odstęp karuzeli od krawędzi pasma (żeby nie dotykała brzegu ekranu) */
.feat-media{ --mc-inset:clamp(16px,2.6vw,44px); position:relative; width:100%; max-width:100%; min-height:0; aspect-ratio:4/3; align-self:center; padding:var(--mc-inset); }
.feat.flip .feat-media{ order:-1; }

/* ── media carousel (przykłady realizacji przy każdej usłudze) ── */
/* touch-action:pan-y - ruch w poziomie obsługuje karuzela, pionowy zostaje przewijaniem strony */
.mediacar{ position:absolute; inset:var(--mc-inset,0); overflow:hidden; width:auto; height:auto; min-height:0; background:var(--navy-deep); touch-action:pan-y; }
.mc-track{ display:flex; width:100%; height:100%; transition:transform .55s var(--ease); }
.mc-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; min-width:0; }
.mc-slide .panel{ width:100%; height:100%; min-height:0; }
.mc-slide img, .mc-slide video{ width:100%; height:100%; min-height:0; object-fit:contain; display:block; background:var(--navy-deep); }
/* podpis slajdu także poza .panel (np. przy wideo) */
.mc-slide > .ptag{ position:absolute; left:0; bottom:0; z-index:2; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(6,21,31,.55); padding:9px 16px; }
.mediacar.dragging .mc-track{ transition:none; }
/* cień i kontur, żeby strzałki i kropki były widoczne także na jasnych zdjęciach */
.mc-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:54px; height:64px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#fff; filter:drop-shadow(0 1px 2px rgba(6,21,31,.9)) drop-shadow(0 3px 12px rgba(6,21,31,.6)); transition:transform .25s var(--ease), opacity .2s; opacity:.9; }
.mc-btn:hover{ opacity:1; }
.mc-prev{ left:6px; } .mc-next{ right:6px; }
.mc-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.mc-next:hover{ transform:translateY(-50%) translateX(3px); }
.mc-btn svg{ width:30px; height:30px; }
.mc-dots{ position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; gap:9px; justify-content:center; }
.mediacar.single .mc-btn, .mediacar.single .mc-dots{ display:none; }   /* karuzela z 1 zdjęciem (np. projektowanie graficzne): bez sterowania */
.feat-media.sq{ aspect-ratio:1/1; }   /* pojedynczy kwadratowy obraz: kadr 1:1 zamiast 4:3 (klasę nadaje menu.js po wczytaniu obrazu) */
.mc-dot{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.6); cursor:pointer; padding:0; box-shadow:0 0 0 1px rgba(6,21,31,.45), 0 1px 3px rgba(6,21,31,.45); transition:background .2s, transform .2s; }
.mc-dot:hover{ background:#fff; }
.mc-dot.active{ background:var(--yellow); transform:scale(1.15); }
/* themes */
.feat.b-white{ background:var(--white); color:var(--ink); }
.feat.b-white .feat-no{ color:var(--blue); }
.feat.b-white .feat-link{ color:var(--blue); }
.feat.b-paper{ background:var(--paper); color:var(--ink); }
.feat.b-paper .feat-no{ color:var(--blue); }
.feat.b-paper .feat-link{ color:var(--blue); }
.feat.b-navy{ background:var(--navy); color:#fff; }
.feat.b-navy .feat-no{ color:var(--yellow); }
.feat.b-navy .feat-link{ color:var(--yellow); }
.feat.b-blue{ background:var(--blue); color:#fff; }
.feat.b-blue .feat-no{ color:#fff; }
.feat.b-blue .feat-link{ color:#fff; }
.feat.b-deep{ background:var(--bg-dark); color:#fff; }
.feat.b-deep .feat-no{ color:var(--yellow); }
.feat.b-deep .feat-link{ color:var(--yellow); }


/* ════ SERVICE INDEX - editorial list ════ */
.svc-index{ border-top:2px solid var(--ink); }
.svc-row{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(18px,4vw,56px); padding:clamp(20px,3vw,38px) 4px; border-bottom:2px solid var(--ink); color:var(--ink); transition:padding .35s var(--ease), color .3s; }
.svc-row > *{ position:relative; z-index:1; }
.svc-row::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--blue); transform:scaleY(0); transform-origin:bottom; transition:transform .42s var(--ease); }
.svc-row .svc-no{ font-family:var(--font-display); font-weight:800; font-size:clamp(14px,1vw,18px); color:var(--blue); letter-spacing:.04em; transition:color .3s; }
.svc-row .svc-nm{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(25px,4.3vw,60px); line-height:.95; letter-spacing:-.012em; }
.svc-row .svc-ar{ width:clamp(32px,3vw,50px); height:clamp(18px,2vw,28px); color:var(--blue); transition:transform .35s var(--ease), color .3s; }
.svc-row .svc-ar svg{ width:100%; height:100%; display:block; }
.svc-row:hover{ color:#fff; padding-left:clamp(16px,2vw,30px); padding-right:clamp(16px,2vw,30px); }
.svc-row:hover::before{ transform:scaleY(1); }
.svc-row:hover .svc-no, .svc-row:hover .svc-ar{ color:#fff; }
.svc-row:hover .svc-ar{ transform:translateX(10px); }
@media (max-width:560px){ .svc-row{ grid-template-columns:auto 1fr; } .svc-row .svc-ar{ display:none; } }

/* ════ CLIENTS strip ════ */
.clients{ padding:clamp(50px,8vh,96px) 0; background:var(--white); }
.clients .lab{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.2em; color:var(--muted); text-align:center; margin-bottom:38px; }
.clients-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--light-border); border:1px solid var(--light-border); }
.client-cell{ background:var(--white); aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; transition:background .25s; }
.client-cell:hover{ background:var(--paper); }
.client-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(15px,1.3vw,21px); letter-spacing:.02em; color:#b9c2cb; transition:color .25s; }
.client-cell:hover .client-name{ color:var(--ink); }
@media (max-width:820px){ .clients-grid{ grid-template-columns:repeat(2,1fr); } }

/* ════ MATERIAŁY 18+ - rozmycie i potwierdzenie pełnoletności ════
   Element z klasą .is-adult ma rozmyte media i nakładkę z przyciskiem (buduje ją menu.js).
   Po potwierdzeniu <body> dostaje klasę .adult-ok i wszystkie takie zdjęcia się odsłaniają. */
.is-adult{ position:relative; }
.is-adult img, .is-adult video{ filter:blur(26px) saturate(.75); transform:scale(1.1); transition:filter .35s var(--ease), transform .35s var(--ease); }
.adult-gate{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:clamp(16px,3vw,30px); text-align:center; background:rgba(6,21,31,.62); backdrop-filter:blur(2px); }
.adult-gate .ag-lbl{ font-family:var(--font-display); font-weight:800; font-size:clamp(13px,1.2vw,16px); letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); }
.adult-gate .ag-sub{ font-family:var(--font-body); font-size:clamp(12.5px,1vw,14.5px); line-height:1.5; max-width:34ch; color:rgba(255,255,255,.8); }
.adult-gate .ag-btn{ margin-top:4px; font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--yellow); border:none; padding:12px 20px; cursor:pointer; transition:filter .2s, transform .25s var(--ease); }
.adult-gate .ag-btn:hover{ filter:brightness(1.06); transform:translateY(-2px); }
body.adult-ok .is-adult img, body.adult-ok .is-adult video{ filter:none; transform:none; }
body.adult-ok .adult-gate{ display:none; }

/* ════ PARTNERZY - przewijany pasek logotypów ════ */
.partners{ position:relative; background:var(--white); padding:clamp(30px,4.6vh,54px) 0 clamp(30px,4.6vh,54px); }
/* etykieta w rozmiarze eyebrow z sekcji „Co robimy" (.crobimy-head .eyebrow) */
.partners .partners-lbl{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:#5f6f7c; /* nie --muted: kontrast 5.2:1 na bieli (WCAG AA) */ text-align:center; margin-bottom:clamp(16px,2.2vh,28px); }
.pmarquee{ display:flex; flex-direction:column; gap:clamp(10px,1.6vh,22px); }
.pm-row{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; touch-action:pan-x; cursor:grab; }
.pm-row::-webkit-scrollbar{ display:none; }
.pm-row.dragging{ cursor:grabbing; }
.pm-track{ display:flex; align-items:center; gap:clamp(40px,5.4vw,86px); width:max-content; padding:0 clamp(20px,2.7vw,43px); }
.pm-item{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:clamp(60px,6.2vw,88px); }
.pm-item img{ height:100%; width:auto; max-width:none; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .3s var(--ease), opacity .3s var(--ease); -webkit-user-drag:none; user-select:none; }
.pm-item:hover img{ filter:none; opacity:1; }
.partners[data-rows="1"] .pm-row.pm-row-2{ display:none; }
/* przełącznik roboczy - do usunięcia przed publikacją */

/* ════ FLAT PANEL placeholder (hero-style) ════ */
.panel{ position:relative; overflow:hidden; width:100%; height:100%; min-height:320px; display:flex; align-items:center; justify-content:center; background:var(--navy); }
.panel.ratio{ height:auto; aspect-ratio:4/3; }
.panel.wide{ height:auto; aspect-ratio:16/9; }
.panel.square{ height:auto; aspect-ratio:1/1; }
.panel.v-navy{ background:var(--navy); }
.panel.v-deep{ background:var(--navy-deep); }
.panel.v-gray{ background:#8b96a1; }   /* szary = brakująca ilustracja (np. Chata Walichnowska na strony-www) */
.panel.v-blue{ background:var(--blue); }
.panel.v-bright{ background:var(--bright); }
.panel.v-yellow{ background:var(--yellow); }
.panel .pgrid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:46px 46px; }
.panel.v-yellow .pgrid{ background-image:linear-gradient(rgba(12,35,54,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(12,35,54,.07) 1px,transparent 1px); }
.panel .pico{ position:relative; width:clamp(64px,9vw,128px); height:clamp(64px,9vw,128px); color:rgba(255,255,255,.42); }
.panel.v-yellow .pico{ color:rgba(12,35,54,.4); }
.panel .pico svg{ width:100%; height:100%; }
.panel .ptag{ position:absolute; left:0; bottom:0; z-index:2; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(6,21,31,.55); padding:9px 16px; }
.panel.v-yellow .ptag{ color:var(--ink); background:rgba(255,255,255,.5); }

/* ════ STAT BAND - full-bleed numbers ════ */
.statband{ background:var(--navy); color:#fff; padding:clamp(56px,9vh,120px) 0; }
.statband .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px); }
.statband .stat .n{ font-family:var(--font-display); font-weight:800; font-size:clamp(46px,6vw,96px); line-height:.9; color:#fff; letter-spacing:-.03em; }
.statband .stat .n sup{ color:var(--yellow); font-size:.45em; top:-.55em; margin-left:.02em; }
.statband .stat .l{ margin-top:14px; font-family:var(--font-ui); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ════ GALLERY (portfolio) ════ */
.section{ padding:clamp(72px,11vh,150px) 0; }
.section.paper{ background:var(--paper); }
.section-title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3.6vw,52px); line-height:.98; letter-spacing:-.01em; color:var(--ink); margin-bottom:clamp(34px,5vh,60px); text-wrap:balance; }
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vh,46px); }
.chip{ font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:.04em; padding:13px 24px; border:2px solid var(--light-border); color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s; background:var(--white); }
.chip:hover{ border-color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.gallery{ columns:3; column-gap:clamp(10px,1vw,16px); }
.g-item{ position:relative; overflow:hidden; cursor:pointer; display:block; break-inside:avoid; margin-bottom:clamp(10px,1vw,16px); }
.g-loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; opacity:0; transition:opacity .35s ease; }
.g-item.playing .g-loop{ opacity:1; }
.g-item.playing .g-play{ opacity:0; }
.g-play{ transition:opacity .3s ease, transform .3s var(--ease); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:64px; height:64px; border-radius:50%; background:rgba(251,178,0,.94); color:#0c2336; display:flex; align-items:center; justify-content:center; pointer-events:none; transition:transform .3s var(--ease); }
.g-play svg{ width:30px; height:30px; margin-left:3px; }
.g-item:hover .g-play{ transform:translate(-50%,-50%) scale(1.12); }
.g-item .panel{ transition:transform .55s var(--ease); }
.g-item:hover .panel{ transform:scale(1.05); }
.g-item .g-img{ display:block; width:100%; height:auto; transition:transform .55s var(--ease); }
.g-item:hover .g-img{ transform:scale(1.05); }
.g-ext{ position:absolute; top:16px; right:16px; z-index:3; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(6,21,31,.55); color:#fff; backdrop-filter:blur(4px); opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s; }
.g-item:hover .g-ext{ opacity:1; transform:none; }
.g-ext:hover{ background:var(--blue); }
.g-ext svg{ width:17px; height:17px; }
.g-item .g-ext{ display:none; }

/* ════ LIGHTBOX - portfolio preview ════ */
.lightbox{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,60px); background:rgba(4,12,20,.93); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lb-stage{ margin:0; max-width:1200px; width:100%; display:flex; flex-direction:column; gap:16px; transform:scale(.97); transition:transform .35s var(--ease); }
.lightbox.open .lb-stage{ transform:none; }
.lb-img{ width:100%; height:auto; max-height:76vh; object-fit:contain; display:block; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); background:#0a1722; }
.lb-cap{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.lb-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,26px); color:#fff; }
.lb-ext{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--yellow); padding:12px 20px; transition:transform .25s var(--ease), filter .2s; }
.lb-ext:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.lb-ext svg{ width:17px; height:17px; }
.lb-close{ position:absolute; top:clamp(14px,2.5vw,28px); right:clamp(14px,2.5vw,28px); width:50px; height:50px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .35s var(--ease); }
.lb-close:hover{ background:var(--blue); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-nav:hover{ background:var(--blue); }
.lb-prev{ left:clamp(10px,2vw,30px); }
.lb-next{ right:clamp(10px,2vw,30px); }
@media (max-width:560px){ .lb-nav{ width:44px; height:44px; font-size:24px; } .lb-cap{ flex-direction:column; align-items:flex-start; gap:12px; } .lb-ext{ width:100%; justify-content:center; } }
.g-item.span2{ grid-column:span 2; }
.g-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; background:linear-gradient(to top, rgba(6,21,31,.9) 0%, rgba(6,21,31,.1) 55%, transparent 80%); opacity:0; transition:opacity .35s var(--ease); }
.g-item:hover .g-overlay{ opacity:1; }
.g-cat{ font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); }
.g-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,1.8vw,28px); color:#fff; margin-top:8px; line-height:1; }

/* ════ CARD GRID (blog / kampanie) ════ */
.bcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,26px); }
.bcard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--light-border); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.bcard:hover{ transform:translateY(-7px); box-shadow:0 28px 60px -32px rgba(12,35,54,.5); }
.bcard .panel{ height:auto; aspect-ratio:16/10; }
.bcard-body{ padding:clamp(22px,1.8vw,30px); display:flex; flex-direction:column; gap:14px; flex:1; }
.bcard-meta{ display:flex; gap:14px; align-items:center; font-family:var(--font-ui); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.bcard-meta .cat{ color:var(--blue); font-weight:700; }
.bcard h2{ /* h2 (było h3): heading-order - na blogu po h1 idą od razu tytuły kart */ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,1.6vw,26px); line-height:1.08; color:var(--ink); letter-spacing:-.01em; text-wrap:balance; }
.bcard p{ font-size:15px; line-height:1.6; color:var(--text); }
.bcard-link{ margin-top:auto; font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); display:inline-flex; gap:10px; align-items:center; }
.bcard-link .arr{ width:22px; height:14px; transition:transform .25s var(--ease); }
.bcard:hover .bcard-link .arr{ transform:translateX(6px); }
.bcard .result{ display:flex; gap:24px; }
.bcard .result .rn{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,2.4vw,40px); color:var(--ink); line-height:.9; letter-spacing:-.02em; }
.bcard .result .rn sup{ color:var(--yellow); font-size:.5em; top:-.5em; }
.bcard .result .rl{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* ════ CONTACT ════ */
.contact{ display:grid; grid-template-columns:1.15fr .85fr; min-height:60vh; }
.contact-form-wrap{ padding:clamp(60px,8vh,120px) clamp(34px,5vw,90px); }
.contact-form-wrap .ct-h{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3.4vw,52px); line-height:.96; color:var(--ink); margin-bottom:36px; letter-spacing:-.01em; }
.form{ display:flex; flex-direction:column; gap:20px; }
.form .field{ display:flex; flex-direction:column; gap:9px; }
.form .field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form label{ font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.form input, .form textarea, .form select{ font-family:var(--font-body); font-size:16px; color:var(--ink); padding:16px 18px; border:2px solid var(--light-border); background:var(--white); border-radius:var(--radius); transition:border-color .2s, box-shadow .2s; width:100%; }
.form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,119,184,.12); }
.form textarea{ min-height:150px; resize:vertical; }
/* formularz kontaktowy (13.10.2026): honeypot antyspamowy (ukryty dla ludzi, boty go wypełniają), komunikat po wysyłce, notka RODO */
.form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form button[disabled]{ opacity:.6; cursor:wait; }
.form-status{ font-size:15px; line-height:1.5; padding:14px 18px; border-left:4px solid var(--blue); background:var(--paper); color:var(--ink); }
.form-status.ok{ border-color:#1f9d55; }
.form-status.err{ border-color:#d64545; }
.form-note{ font-size:13px; line-height:1.5; color:var(--text); }
.form-note a{ color:var(--blue); text-decoration:underline; }
.contact-side{ background:var(--navy); color:#fff; padding:clamp(60px,8vh,120px) clamp(34px,4vw,72px); display:flex; flex-direction:column; }
.contact-side .ct-h{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,2vw,30px); margin-bottom:30px; }
.info-block{ padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.info-block:first-of-type{ padding-top:0; }
.info-block .il{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:10px; }
.info-block .il svg{ width:17px; height:17px; }
.info-block .iv{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,1.7vw,25px); color:#fff; line-height:1.25; }
.info-block .is{ font-size:14px; color:rgba(255,255,255,.6); margin-top:6px; }
.map-ph{ margin-top:auto; padding-top:30px; }
/* mapa Google na kontakcie (iframe „output=embed", bez klucza API) - 11.10.2026 */
.map-embed{ position:relative; aspect-ratio:4/3; background:var(--navy-deep); overflow:hidden; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(.85); }
.map-link{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); /* było --blue: za mały kontrast na granacie (Lighthouse) */ text-decoration:underline; text-underline-offset:4px; }

/* ════ CTA - yellow punch ════ */
.cta{ position:relative; overflow:hidden; background:var(--yellow); color:var(--ink); padding:clamp(72px,12vh,160px) 0; }
.cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,5vw,82px); line-height:.92; letter-spacing:-.02em; max-width:16ch; }
.cta .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ════ FOOTER ════ */
.site-footer{ background:#04101a; color:rgba(255,255,255,.7); padding:clamp(60px,9vh,100px) 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:66px; width:auto; margin-bottom:22px; }
.footer-brand p{ font-size:14.5px; line-height:1.7; max-width:34ch; color:rgba(255,255,255,.55); }
.footer-social{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.footer-social a{ font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); transition:color .2s; }
.footer-social a:hover{ color:var(--yellow); }
.footer-col h3{ /* h3 (było h5): Lighthouse heading-order - przed stopką są h2 */ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14.5px; color:rgba(255,255,255,.62); transition:color .2s; }
.footer-col .footer-addr{ font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.62); }
.footer-col .footer-lbl{ font-size:14.5px; color:rgba(255,255,255,.62); } /* .38 nie przechodziło kontrastu WCAG AA */
.footer-col a:hover{ color:var(--yellow); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:28px; }
.footer-bottom .copy{ font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.45); }
.footer-bottom .legal{ display:flex; gap:24px; }
.footer-bottom .legal a{ font-size:12.5px; color:rgba(255,255,255,.5); transition:color .2s; }
.footer-bottom .legal a:hover{ color:#fff; }

/* ════ reveal ════ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; }
.reveal.d2{ transition-delay:.2s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ════ responsive ════ */
@media (max-width:980px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .gallery, .bcards{ grid-template-columns:repeat(2,1fr); }
  .statband .grid{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .contact{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  :root{ --nav-h:84px; --hero-top:clamp(26px,5vh,48px); }
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
  #nav-logo img{ height:48px; }
  .feat{ grid-template-columns:1fr; margin-bottom:clamp(18px,5vw,30px); }
  .feat.flip .feat-media{ order:0; }
  .feat-media{ min-height:0; aspect-ratio:4/3; }
  .cta .wrap{ flex-direction:column; align-items:flex-start; }
  /* nagłówek podstrony: na telefonie bez pustego granatowego pola pod tekstem */
  .phero{ min-height:0; padding-bottom:clamp(44px,7vh,72px); }
  .phero .phero-bg{ object-position:68% 50%; }   /* rozbłysk grafiki siedzi w prawej części, na wąskim kadrze ma zostać widoczny */
  .phero.has-bg .phero-scrim{ background:linear-gradient(180deg, rgba(6,21,31,.7) 0%, rgba(6,21,31,.58) 50%, rgba(6,21,31,.8) 100%); }   /* na telefonie tekst idzie na całą szerokość - równomierne przyciemnienie */
  .phero .lead{ min-height:0; margin-top:22px; }
  .breadcrumb{ margin-bottom:22px; }
  /* większe kropki karuzeli - wygodniejszy cel dla palca */
  .mc-dot{ width:12px; height:12px; }
  .mc-dots{ gap:12px; bottom:14px; }
}
@media (max-width:560px){
  /* filtry (portfolio: 22 przyciski) w jednym przewijanym palcem wierszu zamiast całego ekranu przycisków */
  .filter-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; gap:8px; padding-bottom:6px; margin-left:calc(-1 * clamp(20px,4vw,64px)); margin-right:calc(-1 * clamp(20px,4vw,64px)); padding-left:clamp(20px,4vw,64px); padding-right:clamp(20px,4vw,64px); scroll-padding-left:clamp(20px,4vw,64px); -webkit-overflow-scrolling:touch; }
  .filter-row::-webkit-scrollbar{ display:none; }
  .filter-row .chip{ flex:0 0 auto; white-space:nowrap; padding:11px 16px; font-size:13px; }
  .gallery, .bcards{ grid-template-columns:1fr; }
  .g-item.span2{ grid-column:span 1; }
  .statement{ padding:clamp(60px,10vh,96px) 0; }
  .form .field.row2{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .statband .grid{ grid-template-columns:1fr 1fr; }
  .cta .cta-actions{ width:100%; }
  .cta .cta-actions .btn{ flex:1 1 auto; justify-content:center; }
}
@media (max-width:430px){
  .statband .grid{ grid-template-columns:1fr; row-gap:30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .breadcrumb{ flex-wrap:wrap; }
  .phero h1{ font-size:clamp(38px,11vw,58px); }
  /* nagłówki pasm usług: skalują się z ekranem, bo przy stałych 30 px „I ARCHITEKTONICZNA" (jeden nierozrywalny człon) wystawało poza kadr na 320 px */
  .feat h2{ font-size:clamp(22px,7.6vw,30px); }
  /* żółte CTA: „TWOJEGO PROJEKTU." (nbsp) nie mieściło się w 16ch na 320 px */
  .cta h2{ font-size:clamp(26px,8.6vw,34px); max-width:100%; }
  .phero .lead{ font-size:15px; margin-top:18px; }
}

/* ════ "CO ROBIMY" - panoramic accordion (homepage) ════ */
.crobimy{ width:100%; padding:clamp(56px,7vh,100px) 0 0; background:var(--bg-dark); }
.crobimy-head{ text-align:center; margin-bottom:clamp(34px,5vh,64px); padding:0 clamp(20px,4vw,60px); }
.crobimy-head .eyebrow{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
.crobimy-head h2{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(40px,6vw,84px); line-height:.96; letter-spacing:-.01em; color:#fff; }
.acc{ display:flex; flex-direction:column; height:clamp(1584px,202vh,2464px); width:100%; gap:0; background:var(--bg-dark); }
.acc-tile{ position:relative; overflow:hidden; flex:1 1 0; flex-grow:1; min-height:0; display:block; color:#fff; text-decoration:none; transition:flex-grow .52s var(--ease-acc); will-change:flex-grow; }
/* soft shadow under each panel - tiles are stacked top-over-bottom (z-index set in index.html) so it falls onto the next one */
.acc-tile{ box-shadow:0 10px 24px -6px rgba(0,0,0,.5); }
.acc-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, var(--navy) 0%, var(--blue) 120%); transition:transform .56s var(--ease-acc), filter .5s var(--ease-acc); }
.acc-tile.c-navy   .acc-bg{ background:linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 110%); }
.acc-tile.c-blue   .acc-bg{ background:linear-gradient(100deg, var(--navy) 0%, var(--blue) 130%); }
.acc-tile.c-bright .acc-bg{ background:linear-gradient(100deg, var(--blue) 0%, var(--bright) 130%); }
.acc-tile.c-yellow .acc-bg{ background:linear-gradient(100deg, var(--navy) 0%, var(--yellow) 175%); }
.acc-bg::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:54px 54px; opacity:.7; }
.acc-tile:hover .acc-bg{ transform:scale(1.04); }
.acc-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,21,31,.66) 0%, rgba(6,21,31,.30) 45%, rgba(6,21,31,.05) 100%); transition:background .6s var(--ease-acc); }
.acc-tile:hover .acc-scrim{ background:linear-gradient(90deg, rgba(6,21,31,.72) 0%, rgba(6,21,31,.40) 55%, rgba(6,21,31,.12) 100%); }
/* photo (panorama) tiles - keep text readable over real imagery */
.acc-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; background:var(--bg-dark); }
.acc-tile.has-img .acc-bg::after{ opacity:0; }
.acc-tile.has-img .acc-scrim{ background:linear-gradient(90deg, rgba(6,17,26,.86) 0%, rgba(6,17,26,.55) 42%, rgba(6,17,26,.22) 78%, rgba(6,17,26,.12) 100%); }
.acc-tile.has-img:hover .acc-scrim{ background:linear-gradient(90deg, rgba(6,17,26,.88) 0%, rgba(6,17,26,.60) 52%, rgba(6,17,26,.30) 100%); }
.acc-row{ position:absolute; inset:0; display:flex; align-items:center; gap:clamp(18px,2.5vw,40px); padding-left:max(clamp(26px,5vw,84px), calc((100% - 1440px)/2 + 40px)); padding-right:clamp(26px,5vw,84px); }
.acc-no{ font-family:var(--font-display); font-weight:700; font-size:clamp(13px,1vw,17px); letter-spacing:.06em; color:var(--yellow); opacity:.85; flex:0 0 auto; width:2.4em; transition:font-size .52s var(--ease-acc), color .3s; }
.acc-name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.4vw,34px); line-height:1; letter-spacing:-.01em; transition:font-size .52s var(--ease-acc), letter-spacing .52s var(--ease-acc); }
.acc-tile:hover .acc-name{ font-size:clamp(28px,3.4vw,50px); }
.acc-tile:hover .acc-no{ font-size:clamp(14px,1.15vw,19px); }
@media (max-width:820px){
  .acc{ height:auto; }
  .acc-tile{ min-height:clamp(120px,20vh,200px); }
  .acc-tile:hover .acc-name{ font-size:clamp(22px,5vw,30px); }
}

@media (max-width:980px){ .gallery{ columns:2; } }
@media (max-width:560px){ .gallery{ columns:1; } }

/* ═══ MINI-PORTFOLIO na home (11.10.2026) ═══ */
.minipf{ background:var(--white); color:var(--ink); padding:clamp(56px,8vh,110px) 0; }
.minipf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,36px); }
.minipf-head h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,4.2vw,58px); line-height:.95; letter-spacing:-.01em; }
.minipf-head h2 em{ font-style:normal; color:var(--blue); }
.minipf .feat-link{ color:var(--blue); }
.minipf-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.minipf-item{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--navy); }
.minipf-item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease-acc); }
.minipf-item:hover img{ transform:scale(1.05); }
.minipf-item span{ position:absolute; left:12px; bottom:12px; font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(6,21,31,.72); padding:6px 10px; }
@media (max-width:820px){ .minipf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .minipf-head{ margin-bottom:18px; } }
/* linki w tekście pasm usług (np. telefon w Marketingu zapachu) - widoczne na ciemnym i jasnym tle */
.feat-text p a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.feat-text p + p{ margin-top:12px; }