/* ============================================================
   O.WE — Theme styles
   Odwzorowanie projektu (Claude Design handoff) w klasach CSS.
   ============================================================ */

html, body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  font-family: var(--owe-font);
  color: var(--owe-text);
}
* { box-sizing: border-box; }
img { max-width: 100%; }
/* Blokada przewijania tła, gdy pełnoekranowe menu mobilne jest otwarte. */
html.owe-noscroll, html.owe-noscroll body { overflow: hidden; }

/* Keyframes for the hero placeholder film */
@keyframes owe-sweep { 0% { transform: translate(-60%,0) rotate(9deg); } 100% { transform: translate(160%,0) rotate(9deg); } }
@keyframes owe-kb    { 0% { transform: scale(1.04); } 100% { transform: scale(1.15); } }
/* Ograniczenie ruchu: wyłącz animacje ORAZ transity (nie tylko keyframes).
   Auto-karuzela i przenikanie zdjęć są dodatkowo wyłączane w JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dostępność: treść tylko dla czytników ekranu */
.owe-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link — widoczny dopiero po sfokusowaniu */
.owe-skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--owe-onyx); color: #fff;
  font-size: 12px; font-weight: var(--owe-w-semi); letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: 12px 18px; border-radius: 2px;
  transition: transform .2s var(--owe-ease);
}
.owe-skip:focus { transform: translateY(0); }

/* Widoczny wskaźnik fokusu — dwutonowy, czytelny na jasnym i ciemnym tle */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--owe-onyx);
  border-radius: 2px;
}

/* ------------------------------------------------------------------
   Scroller — przewija się cały DOKUMENT (nie wewnętrzny kontener),
   dzięki czemu Safari na iOS chowa pasek adresu przy przewijaniu w dół.
   overflow-x: clip przycina poziome wystawki bez tworzenia pionowego
   kontenera przewijania (w przeciwieństwie do overflow-x: hidden).
------------------------------------------------------------------ */
#owe-scroller { overflow-x: clip; }

/* ------------------------------------------------------------------
   Navigation
------------------------------------------------------------------ */
#owe-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 74px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 54px);
}
#owe-nav .owe-nav-bg {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(27,24,25,.74);
  border-bottom: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  opacity: 0;
  transition: opacity .5s ease;
}
#owe-nav[data-theme="light"] .owe-nav-bg {
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* Logo w pasku nawigacji — statyczne (nie „przylatuje” z hero), powiększone,
   wyśrodkowane w pionie przez align-items:center rodzica (#owe-nav). Dołącza
   do tego samego wygaszania/pojawiania co reszta paska (patrz navShow w JS). */
#navSlot {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s;
}
#navSlot img { display: block; height: 44px; width: auto; }
#owe-nav nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  pointer-events: none;
}
.owe-navlink {
  cursor: pointer;
  font-size: 11px;
  font-weight: var(--owe-w-semi);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  opacity: 0;
  transition: opacity .35s;
}
#owe-nav[data-theme="light"] .owe-navlink { color: var(--owe-onyx); }
/* Instagram w pasku — tylko ikona (cicha, bez etykiety); etykieta wraca
   w pełnoekranowym panelu mobilnym, razem z resztą linków. */
.owe-navlink-ig { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.owe-navlink-ig-label { display: none; }

/* Hamburger — ukryty na desktopie, gdzie <nav> pokazuje linki wprost. */
.owe-nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 26px; height: 18px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s;
}
.owe-nav-toggle span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #fff;
  transition: transform .35s var(--owe-ease), opacity .35s var(--owe-ease), top .35s var(--owe-ease);
}
#owe-nav[data-theme="light"] .owe-nav-toggle span { background: var(--owe-onyx); }
.owe-nav-toggle span:nth-child(1) { top: 0; }
.owe-nav-toggle span:nth-child(2) { top: 8px; }
.owe-nav-toggle span:nth-child(3) { top: 16px; }
/* Panel otwarty: krzyżyk zachowuje ten sam kolor co zamknięty hamburger
   (zależny od data-theme) — zmienia się tylko kształt (morph w X). */
#owe-nav.is-open .owe-nav-toggle span:nth-child(1) { top: 8px; transform: rotate(45deg); }
#owe-nav.is-open .owe-nav-toggle span:nth-child(2) { opacity: 0; }
#owe-nav.is-open .owe-nav-toggle span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ------------------------------------------------------------------
   Section shared
------------------------------------------------------------------ */
/* Sekcje mogą rosnąć z treścią — minimalna wysokość to punkt wyjścia, nie
   sztywny limit. Obniżone ze 100vh: przy treści krótszej niż jeden ekran
   (Oferta, Portfolio, Opinie, Blog, Kontakt) zostawiało to sporo pustego
   miejsca pod treścią (sekcje wyrównane do góry przez justify-content). */
.owe-section { min-height: 70vh; }
.owe-eyebrow {
  font-size: 11px;
  font-weight: var(--owe-w-semi);
  letter-spacing: .46em;
  text-transform: uppercase;
}
.owe-split { display: grid; grid-template-columns: 1fr 1fr; }
.owe-split .owe-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 110px);
}
.owe-media { position: relative; overflow: hidden; }
.owe-h2 {
  font-weight: var(--owe-w-bold);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 20px 0 0;
}
.owe-rule { height: 1px; }

/* fade-and-rise reveal */
.reveal { transform: translateY(20px); transition: transform .9s var(--owe-ease); }
.reveal.is-in { transform: none; }

/* Cross-fade image slots */
.owe-xfade { position: absolute; inset: 0; }
.owe-xfade .owe-xfade-item {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.owe-xfade .owe-xfade-item:first-child { opacity: 1; }
.owe-xfade img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Wideo w kadrze split-section (Proces) — te same wymiary co .owe-xfade img */
/* contain, nie cover: film jest dynamiczny (dużo ruchu w kadrze) — wolimy
   puste pasy w kadrze split-section niż ucinanie akcji. */
.owe-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.owe-slot-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1a1718;
}
.owe-slot-empty[data-tone="light"] { background: var(--owe-pearl); }
.owe-slot-empty img { width: min(40%, 160px); height: auto; object-fit: contain; opacity: .18; }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
#sec-hero {
  position: relative;
  height: 100vh;          /* hero zawsze dokładnie jeden ekran */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
}
#heroFilm { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 1.9s var(--owe-ease); overflow: hidden; }
#heroFilm .owe-film-grad { position: absolute; inset: -8%; background: radial-gradient(120% 90% at 50% 40%, #2b2627 0%, #151213 60%, #000 100%); animation: owe-kb 18s ease-in-out infinite alternate; }
#heroFilm .owe-film-sweep { position: absolute; top: -30%; left: 0; width: 36%; height: 160%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); filter: blur(6px); animation: owe-sweep 9s linear infinite; }
#heroFilm .owe-film-symbol { position: absolute; top: 50%; left: 50%; width: min(46vh, 380px); transform: translate(-50%,-50%); opacity: .05; }
#heroFilm .owe-film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28) 45%, rgba(0,0,0,.6)); }
/* Wideo w tle: pełny ekran, wyśrodkowane w poziomie, górna krawędź zawsze
   widoczna (object-position: top) — okno przeglądarki dyktuje kadr. */
#heroFilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#heroFrame { position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.16); pointer-events: none; opacity: 0; transition: opacity 1.9s ease; }
#heroSlot {
  position: relative; z-index: 2; width: min(400px, 38vw);
  opacity: 0;
  transition: opacity 1.9s var(--owe-ease);
}
#heroSlot img { display: block; width: 100%; height: auto; }
#heroSlogan { position: relative; z-index: 2; margin-top: 8px; text-align: center; opacity: 0; transition: opacity 1.9s var(--owe-ease); }
#heroSlogan .owe-slogan-text { font-size: clamp(11px, 1.4vw, 13px); font-weight: var(--owe-w-light); letter-spacing: .46em; text-transform: uppercase; color: rgba(255,255,255,.82); }
#heroSlogan .owe-slogan-rule { width: 52px; height: 1px; background: rgba(255,255,255,.3); margin: 24px auto 0; }
#heroHint { position: absolute; z-index: 2; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; opacity: 0; transition: opacity 1.9s ease; }
#heroHint .owe-hint-text { font-size: 9px; font-weight: var(--owe-w-semi); letter-spacing: .4em; text-transform: uppercase; color: rgba(255,255,255,.6); }
#heroHint .owe-hint-line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.5), transparent); }

/* .is-lit toggles the darkened hero + revealed logo/slogan/hint/frame.
   #heroSlot ma też własny, scroll-zależny fade-out (JS, site.js) — inline
   opacity ustawiany tam nadpisuje tę wartość 1 w miarę przewijania. */
#sec-hero.is-lit #heroFilm,
#sec-hero.is-lit #heroFrame,
#sec-hero.is-lit #heroSlogan,
#sec-hero.is-lit #heroHint,
#sec-hero.is-lit #heroSlot { opacity: 1; }

/* ------------------------------------------------------------------
   O nas / Założyciel / Współpraca (split sections)
------------------------------------------------------------------ */
#sec-kim   { background: var(--owe-onyx); color: #fff; }
#sec-krzys { background: var(--owe-white); }
#sec-wspol { background: var(--owe-onyx); color: #fff; }

/* Sekcje dzielone: treść wyśrodkowana w pionie, a zdjęcie wypełnia całą swoją
   połowę sekcji — pełna szerokość kolumny i pełna wysokość (min. jeden ekran). */
.owe-split { align-items: stretch; }
.owe-split .owe-copy { align-self: center; }
.owe-split .owe-media {
  align-self: stretch;
  width: 100%;
  height: auto;                      /* rozciąga się na wysokość wiersza siatki */
  min-height: 100vh;
  margin: 0;
}

.owe-copy .owe-lead {
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  font-weight: var(--owe-w-light);
  line-height: 1.95;
}
.owe-copy .owe-lead + .owe-lead { margin-top: 20px; }
.owe-on-dark .owe-eyebrow { color: var(--owe-ash); }
.owe-on-dark .owe-lead    { color: var(--owe-mist); }
.owe-on-dark .owe-rule    { background: var(--owe-hair-dk); }
.owe-on-light .owe-eyebrow { color: var(--owe-silver); }
.owe-on-light .owe-lead    { color: var(--owe-mut); }
.owe-on-light .owe-rule    { background: var(--owe-hair); }

#sec-kim .owe-h2, #sec-wspol .owe-h2 { font-size: clamp(30px, 3.6vw, 48px); }
#sec-krzys .owe-h2 { color: var(--owe-onyx); font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 6px; }
.owe-role { font-size: 11px; font-weight: var(--owe-w-semi); letter-spacing: .3em; text-transform: uppercase; color: var(--owe-mut); }

/* Proces — akordeon etapów (jedno rozwinięcie naraz) */
.owe-acc { max-width: 46ch; }
.owe-acc-item { border-top: 1px solid var(--owe-hair-dk); }
.owe-acc-item:last-child { border-bottom: 1px solid var(--owe-hair-dk); }
.owe-acc-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.owe-acc-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px 2px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.owe-acc-n { font-size: 11px; font-weight: var(--owe-w-semi); letter-spacing: .2em; color: var(--owe-ash); }
.owe-acc-t {
  font-size: 14px;
  font-weight: var(--owe-w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--owe-mist);
  transition: color .4s var(--owe-ease);
}
.owe-acc-btn:hover .owe-acc-t,
.owe-acc-item.is-open .owe-acc-t { color: #fff; }
/* Ikona plus → minus */
.owe-acc-ico { position: relative; width: 13px; height: 13px; flex: none; }
.owe-acc-ico::before,
.owe-acc-ico::after {
  content: '';
  position: absolute;
  background: var(--owe-ash);
  transition: transform .4s var(--owe-ease), opacity .4s var(--owe-ease);
}
.owe-acc-ico::before { top: 6px; left: 0; width: 13px; height: 1px; }
.owe-acc-ico::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.owe-acc-item.is-open .owe-acc-ico::after { transform: scaleY(0); opacity: 0; }
.owe-acc-item.is-open .owe-acc-ico::before { background: #fff; }
/* Rozwijany panel — płynna wysokość (0fr → 1fr) */
.owe-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--owe-ease);
}
.owe-acc-item.is-open .owe-acc-panel { grid-template-rows: 1fr; }
.owe-acc-panel-inner { overflow: hidden; min-height: 0; padding-left: 58px; }
/* Opis etapu = zwykły tekst z treści (akapity edytora) */
.owe-acc-panel-inner p {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: var(--owe-w-light);
  line-height: 1.8;
  color: var(--owe-mist);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.owe-acc-panel-inner > *:first-child { margin-top: 0; }
.owe-acc-panel-inner > *:last-child { margin-bottom: 24px; }

/* ------------------------------------------------------------------
   Oferta
------------------------------------------------------------------ */
#sec-oferta {
  display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--owe-white);
  padding: clamp(70px,9vh,120px) clamp(22px,5vw,72px) clamp(40px,6vh,80px);
}
#sec-oferta .owe-inner { max-width: 1160px; margin: 0 auto; width: 100%; }
#sec-oferta .owe-eyebrow { color: var(--owe-silver); }
#sec-oferta h2 { margin: 16px 0 0; font-size: clamp(26px,3.2vw,42px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; color: var(--owe-onyx); }
.owe-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: clamp(28px,4vh,52px); }
.owe-tile {
  border: 1px solid var(--owe-hair);
  border-radius: 2px;
  padding: clamp(26px,2.4vw,38px);
  display: flex; flex-direction: column;
  transition: transform .3s var(--owe-ease), box-shadow .3s;
}
.owe-tile:hover { transform: translateY(-4px); box-shadow: var(--owe-shadow-hover); }
.owe-tile .owe-tags { display: flex; gap: 8px; flex-wrap: wrap; }
/* Strefa tytułu ma stałą, zarezerwowaną wysokość (2 wiersze) — niezależnie od
   długości tytułu poszczególnych kafli, linijka i opis zawsze zaczynają się
   na tej samej wysokości, więc różnice w długości tekstu nie rzucają się w oczy. */
.owe-tile h3 {
  margin: 14px 0 0;
  min-height: calc(1.3em * 2);
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--owe-w-bold);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--owe-onyx);
  display: flex;
  align-items: flex-end;
}
.owe-tile .owe-tile-rule { width: 40px; height: 1px; background: var(--owe-hair); margin: 20px 0; flex: none; }
.owe-tile p { margin: 0; font-size: 14px; font-weight: var(--owe-w-light); line-height: 1.85; color: var(--owe-mut); }
.owe-chip { font-size: 9px; font-weight: var(--owe-w-semi); letter-spacing: .24em; text-transform: uppercase; color: var(--owe-mut); border: 1px solid var(--owe-hair); padding: 6px 12px; border-radius: 2px; }
.owe-oferta-cta { margin-top: 20px; background: var(--owe-onyx); border-radius: 2px; padding: clamp(24px,2.4vw,34px) clamp(26px,3vw,44px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.owe-oferta-cta p { margin: 0; max-width: 60ch; font-size: 15px; font-weight: var(--owe-w-light); line-height: 1.7; color: var(--owe-mist); }
.owe-oferta-cta .owe-btn-solid { flex: none; }

/* ------------------------------------------------------------------
   Portfolio
------------------------------------------------------------------ */
#sec-portfolio {
  display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--owe-pearl); overflow: hidden;
  /* Ta sama pionowa rezerwa co Oferta/Opinie. justify-content:flex-start
     (zamiast center) celowo — przy centrowaniu wysokość treści (pasek zdjęć)
     zjadała część odstępu, więc mimo identycznego paddingu nad nadtytułem
     zostawało mniej miejsca niż w innych sekcjach. */
  padding: clamp(70px,9vh,120px) 0 clamp(40px,6vh,80px);
}
#sec-portfolio .owe-pf-head { padding: 0 clamp(22px,5vw,72px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#sec-portfolio .owe-eyebrow { color: var(--owe-silver); }
#sec-portfolio h2 { margin: 16px 0 0; font-size: clamp(26px,3.2vw,42px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; color: var(--owe-onyx); }
.owe-arrows { display: flex; gap: 12px; }
.owe-arrow { width: 48px; height: 48px; border: 1px solid var(--owe-onyx); background: transparent; border-radius: 2px; cursor: pointer; font-size: 18px; color: var(--owe-onyx); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.owe-arrow:hover { background: var(--owe-onyx); color: #fff; }
#pfStrip { margin-top: clamp(24px,4vh,44px); display: flex; align-items: center; gap: 26px; overflow-x: auto; padding: 6px clamp(22px,5vw,72px) 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
#pfStrip::-webkit-scrollbar { height: 0; }
.owe-pf-item { flex: none; margin: 0; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; }
.owe-pf-item figure { margin: 0; }
.owe-pf-item .owe-pf-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
/* Subtelny hover: lekkie przybliżenie kadru + delikatne przyciemnienie — sygnał,
   że kafelek jest klikalny i prowadzi do osobnej strony realizacji. */
.owe-pf-item .owe-pf-media img { transition: transform .6s var(--owe-ease); }
.owe-pf-item:hover .owe-pf-media img,
.owe-pf-item:focus-visible .owe-pf-media img { transform: scale(1.04); }
.owe-pf-item .owe-pf-media::after {
  content: ''; position: absolute; inset: 0;
  background: var(--owe-onyx); opacity: 0;
  transition: opacity .5s var(--owe-ease); pointer-events: none;
}
.owe-pf-item:hover .owe-pf-media::after,
.owe-pf-item:focus-visible .owe-pf-media::after { opacity: .06; }
.owe-pf-item figcaption { margin-top: 14px; }
.owe-pf-item .owe-pf-name { font-size: 13px; font-weight: var(--owe-w-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--owe-onyx); transition: opacity .3s; }
.owe-pf-item:hover .owe-pf-name { opacity: .62; }
.owe-pf-item .owe-pf-meta { margin-top: 5px; font-size: 10px; font-weight: var(--owe-w-light); letter-spacing: .26em; text-transform: uppercase; color: var(--owe-mut); }

.owe-pf-instagram { margin-top: clamp(24px,4vh,44px); padding: 0 clamp(22px,5vw,72px); }
.owe-pf-instagram a {
  font-size: 12px; font-weight: var(--owe-w-semi); letter-spacing: .18em; text-transform: uppercase;
  color: var(--owe-onyx); text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 3px; transition: opacity .3s;
}
.owe-pf-instagram a:hover { opacity: .6; }

/* ------------------------------------------------------------------
   Portfolio — pojedyncza realizacja (single-owe_portfolio.php)
------------------------------------------------------------------ */
.owe-pf-single { background: var(--owe-white); color: var(--owe-onyx); }
.owe-pf-single .owe-pf-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px,3vw,34px) clamp(22px,6vw,72px);
  border-bottom: 1px solid var(--owe-hair);
}
.owe-pf-single .owe-pf-brand { display: inline-flex; }
.owe-pf-single .owe-pf-brand img { height: 34px; width: auto; display: block; }
.owe-pf-single .owe-back {
  font-size: 10px; font-weight: var(--owe-w-semi); letter-spacing: .2em;
  text-transform: uppercase; color: var(--owe-mut); text-decoration: none;
  transition: color .3s;
}
.owe-pf-single .owe-back:hover { color: var(--owe-onyx); }
.owe-pf-single .owe-pf-cover { width: 100%; max-height: 72vh; overflow: hidden; background: var(--owe-pearl); }
.owe-pf-single .owe-pf-cover img { width: 100%; height: 100%; max-height: 72vh; object-fit: cover; display: block; }
.owe-pf-single .owe-pf-single-inner { max-width: 1080px; margin: 0 auto; width: 100%; padding: clamp(46px,7vw,90px) clamp(22px,6vw,72px) clamp(70px,11vh,140px); }
.owe-pf-single .owe-pf-single-head { margin-bottom: clamp(30px,5vw,54px); }
.owe-pf-single .owe-pf-single-meta { font-size: 11px; font-weight: var(--owe-w-semi); letter-spacing: .3em; text-transform: uppercase; color: var(--owe-silver); }
.owe-pf-single h1 {
  margin: 12px 0 0; font-size: clamp(30px,5vw,58px); font-weight: var(--owe-w-bold);
  letter-spacing: -.01em; line-height: 1.04; text-transform: uppercase;
  overflow-wrap: break-word; text-wrap: balance;
}
.owe-pf-single .owe-pf-single-content { font-size: 16px; font-weight: var(--owe-w-light); line-height: 1.9; color: var(--owe-mut); }
.owe-pf-single .owe-pf-single-content > * { margin-top: 26px; }
.owe-pf-single .owe-pf-single-content > *:first-child { margin-top: 0; }
.owe-pf-single .owe-pf-single-content figure { margin-left: 0; margin-right: 0; }
.owe-pf-single .owe-pf-single-content img { border-radius: 2px; }
.owe-pf-single .owe-pf-single-content h2 { font-size: clamp(22px,2.6vw,30px); font-weight: var(--owe-w-bold); text-transform: uppercase; color: var(--owe-onyx); letter-spacing: -.005em; }
.owe-pf-single .owe-pf-single-content h3 { font-size: 18px; font-weight: var(--owe-w-semi); text-transform: uppercase; letter-spacing: .06em; color: var(--owe-onyx); }
.owe-pf-single .owe-pf-single-content a { color: var(--owe-onyx); }
.owe-pf-single .owe-pf-single-foot { margin-top: clamp(40px,6vw,72px); padding-top: clamp(28px,4vw,40px); border-top: 1px solid var(--owe-hair); }

/* ------------------------------------------------------------------
   Opinie
------------------------------------------------------------------ */
#sec-opinie { display: flex; flex-direction: column; justify-content: flex-start; background: var(--owe-onyx); color: #fff; padding: clamp(70px,9vh,110px) clamp(22px,5vw,72px) clamp(40px,6vh,80px); }
#sec-opinie .owe-inner { max-width: 1160px; margin: 0 auto; width: 100%; }
#sec-opinie .owe-op-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#sec-opinie .owe-eyebrow { color: var(--owe-ash); }
#sec-opinie h2 { margin: 16px 0 0; font-size: clamp(26px,3.2vw,42px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; }
#sec-opinie .owe-arrow { border-color: var(--owe-hair-dk); color: #fff; }
#sec-opinie .owe-arrow:hover { background: #fff; color: var(--owe-onyx); }
.owe-op-viewport { margin-top: clamp(24px,4vh,44px); overflow: hidden; }
.owe-op-track { display: flex; transition: transform .7s var(--owe-ease); }
.owe-op-slide { flex: none; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,60px); align-items: center; }
.owe-op-photo { position: relative; overflow: hidden; background: #1a1718; aspect-ratio: 1 / 1; height: clamp(300px, 48vh, 540px); width: auto; border-radius: 2px; align-self: center; }
.owe-op-body { display: flex; flex-direction: column; justify-content: center; }
.owe-op-quote-mark { font-size: 40px; font-weight: var(--owe-w-bold); line-height: 0; color: var(--owe-hair-dk); }
.owe-op-body p { margin: 14px 0 0; font-size: 15px; font-weight: var(--owe-w-light); line-height: 1.9; color: var(--owe-mist); }
.owe-op-body p + p { margin-top: 16px; }
.owe-op-name { margin-top: 26px; font-size: 13px; font-weight: var(--owe-w-semi); letter-spacing: .16em; text-transform: uppercase; }
.owe-op-meta { margin-top: 6px; font-size: 10px; font-weight: var(--owe-w-light); letter-spacing: .26em; text-transform: uppercase; color: var(--owe-ash); }
.owe-op-dots { margin-top: 26px; display: flex; gap: 10px; }
.owe-op-dot { cursor: pointer; width: 26px; height: 2px; background: #fff; opacity: .28; border: 0; padding: 0; transition: opacity .4s; }
.owe-op-dot.is-active { opacity: 1; }

/* ------------------------------------------------------------------
   Blog — karuzela na stronie głównej (jasna sekcja — rozdziela ciemne
   Opinie i czarny Kontakt, zamiast trzech ciemnych sekcji pod rząd).
------------------------------------------------------------------ */
#sec-blog {
  display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--owe-pearl); overflow: hidden;
  padding: clamp(70px,9vh,120px) 0 clamp(40px,6vh,80px);
}
#sec-blog .owe-blog-head { padding: 0 clamp(22px,5vw,72px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#sec-blog .owe-eyebrow { color: var(--owe-silver); }
#sec-blog h2 { margin: 16px 0 0; font-size: clamp(26px,3.2vw,42px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; color: var(--owe-onyx); }

#blogStrip { margin-top: clamp(24px,4vh,44px); display: flex; align-items: stretch; gap: 26px; overflow-x: auto; padding: 6px clamp(22px,5vw,72px) 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
#blogStrip::-webkit-scrollbar { height: 0; }
.owe-blog-item { flex: none; width: clamp(260px,26vw,340px); margin: 0; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; }
.owe-blog-item figure { margin: 0; }
.owe-blog-item .owe-blog-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.owe-blog-item .owe-blog-media img { transition: transform .6s var(--owe-ease); }
.owe-blog-item:hover .owe-blog-media img,
.owe-blog-item:focus-visible .owe-blog-media img { transform: scale(1.04); }
.owe-blog-item .owe-blog-media::after {
  content: ''; position: absolute; inset: 0;
  background: var(--owe-onyx); opacity: 0;
  transition: opacity .5s var(--owe-ease); pointer-events: none;
}
.owe-blog-item:hover .owe-blog-media::after,
.owe-blog-item:focus-visible .owe-blog-media::after { opacity: .06; }
.owe-blog-item figcaption { margin-top: 14px; }
.owe-blog-item .owe-blog-meta { font-size: 10px; font-weight: var(--owe-w-light); letter-spacing: .26em; text-transform: uppercase; color: var(--owe-mut); }
.owe-blog-item .owe-blog-title { margin-top: 6px; font-size: 15px; font-weight: var(--owe-w-semi); letter-spacing: .01em; color: var(--owe-onyx); transition: opacity .3s; }
.owe-blog-item:hover .owe-blog-title { opacity: .62; }
.owe-blog-item .owe-blog-excerpt {
  margin-top: 8px; font-size: 13px; font-weight: var(--owe-w-light); line-height: 1.6; color: var(--owe-mut);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.owe-blog-more { margin-top: clamp(24px,4vh,44px); padding: 0 clamp(22px,5vw,72px); }
.owe-blog-more a {
  font-size: 12px; font-weight: var(--owe-w-semi); letter-spacing: .18em; text-transform: uppercase;
  color: var(--owe-onyx); text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 3px; transition: opacity .3s;
}
.owe-blog-more a:hover { opacity: .6; }

/* ------------------------------------------------------------------
   Blog — pojedynczy wpis (single-owe_blog.php) i archiwum (archive-owe_blog.php)
------------------------------------------------------------------ */
.owe-blog-page { background: var(--owe-white); color: var(--owe-onyx); }
.owe-blog-page .owe-blog-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px,3vw,34px) clamp(22px,6vw,72px);
  border-bottom: 1px solid var(--owe-hair);
}
.owe-blog-page .owe-blog-brand { display: inline-flex; }
.owe-blog-page .owe-blog-brand img { height: 34px; width: auto; display: block; }
.owe-blog-page .owe-back {
  font-size: 10px; font-weight: var(--owe-w-semi); letter-spacing: .2em;
  text-transform: uppercase; color: var(--owe-mut); text-decoration: none;
  transition: color .3s;
}
.owe-blog-page .owe-back:hover { color: var(--owe-onyx); }

.owe-blog-single .owe-blog-cover { width: 100%; max-height: 72vh; overflow: hidden; background: var(--owe-pearl); }
.owe-blog-single .owe-blog-cover img { width: 100%; height: 100%; max-height: 72vh; object-fit: cover; display: block; }
.owe-blog-single .owe-blog-single-inner { max-width: 1080px; margin: 0 auto; width: 100%; padding: clamp(46px,7vw,90px) clamp(22px,6vw,72px) clamp(70px,11vh,140px); }
.owe-blog-single .owe-blog-single-head { margin-bottom: clamp(30px,5vw,54px); }
.owe-blog-single .owe-blog-single-meta { font-size: 11px; font-weight: var(--owe-w-semi); letter-spacing: .3em; text-transform: uppercase; color: var(--owe-silver); }
.owe-blog-single h1 {
  margin: 12px 0 0; font-size: clamp(30px,5vw,58px); font-weight: var(--owe-w-bold);
  letter-spacing: -.01em; line-height: 1.04; text-transform: uppercase;
  overflow-wrap: break-word; text-wrap: balance;
}
.owe-blog-single .owe-blog-single-content { font-size: 16px; font-weight: var(--owe-w-light); line-height: 1.9; color: var(--owe-mut); }
.owe-blog-single .owe-blog-single-content > * { margin-top: 26px; }
.owe-blog-single .owe-blog-single-content > *:first-child { margin-top: 0; }
.owe-blog-single .owe-blog-single-content figure { margin-left: 0; margin-right: 0; }
.owe-blog-single .owe-blog-single-content img { border-radius: 2px; }
.owe-blog-single .owe-blog-single-content h2 { font-size: clamp(22px,2.6vw,30px); font-weight: var(--owe-w-bold); text-transform: uppercase; color: var(--owe-onyx); letter-spacing: -.005em; }
.owe-blog-single .owe-blog-single-content h3 { font-size: 18px; font-weight: var(--owe-w-semi); text-transform: uppercase; letter-spacing: .06em; color: var(--owe-onyx); }
.owe-blog-single .owe-blog-single-content a { color: var(--owe-onyx); }
.owe-blog-single .owe-blog-single-foot { margin-top: clamp(40px,6vw,72px); padding-top: clamp(28px,4vw,40px); border-top: 1px solid var(--owe-hair); }

.owe-blog-archive .owe-blog-archive-inner { max-width: 1160px; margin: 0 auto; width: 100%; padding: clamp(46px,7vw,90px) clamp(22px,6vw,72px) clamp(70px,11vh,140px); }
.owe-blog-archive .owe-blog-archive-head { margin-bottom: clamp(30px,5vw,54px); }
.owe-blog-archive h1 { margin: 12px 0 0; font-size: clamp(28px,4vw,50px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; }
.owe-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(30px,4vw,48px); }
.owe-blog-grid .owe-blog-item { width: 100%; }
.owe-blog-empty { font-size: 15px; font-weight: var(--owe-w-light); color: var(--owe-mut); }

/* Paginacja archiwum (the_posts_pagination) */
.owe-blog-archive .navigation.pagination { margin-top: clamp(48px,7vh,80px); display: flex; justify-content: center; }
.owe-blog-archive .nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.owe-blog-archive .page-numbers {
  font-size: 11px; font-weight: var(--owe-w-semi); letter-spacing: .18em; text-transform: uppercase;
  color: var(--owe-mut); text-decoration: none; transition: color .3s;
}
.owe-blog-archive a.page-numbers:hover { color: var(--owe-onyx); }
.owe-blog-archive .page-numbers.current { color: var(--owe-onyx); border-bottom: 1px solid var(--owe-onyx); padding-bottom: 2px; }
.owe-blog-archive .page-numbers.dots { color: var(--owe-hair-dk); }

/* ------------------------------------------------------------------
   Kontakt
------------------------------------------------------------------ */
#sec-kontakt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; background: var(--owe-black); color: var(--owe-pearl); overflow: hidden; padding: clamp(70px,9vh,110px) clamp(22px,5vw,72px); }
#sec-kontakt .owe-kontakt-ghost { position: absolute; bottom: -4%; right: -2%; pointer-events: none; }
#sec-kontakt .owe-kontakt-ghost img { width: min(40vh,360px); opacity: .05; }
#sec-kontakt .owe-inner { position: relative; max-width: 1080px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px,6vw,88px); align-items: start; }
#sec-kontakt .owe-eyebrow { color: var(--owe-ash); }
#sec-kontakt h2 { margin: 22px 0 0; font-size: clamp(28px,4vw,50px); font-weight: var(--owe-w-thin); letter-spacing: .05em; line-height: 1.18; text-transform: uppercase; }
#sec-kontakt .owe-kontakt-intro { margin: 28px 0 0; max-width: 36ch; font-size: 15px; font-weight: var(--owe-w-light); line-height: 1.9; color: var(--owe-mist); }
.owe-kontakt-details { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.owe-kontakt-details a, .owe-kontakt-details span { font-size: 12px; font-weight: var(--owe-w-light); letter-spacing: .06em; color: var(--owe-mist); text-decoration: none; }
.owe-kontakt-details a:hover { color: var(--owe-pearl); }
.owe-kontakt-details a.owe-kontakt-ig {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 20px;
  border: 1px solid var(--owe-mist); border-radius: 2px;
  color: var(--owe-pearl); font-size: 10px; font-weight: var(--owe-w-semi);
  letter-spacing: .2em; text-transform: uppercase;
  transition: background var(--owe-dur-fast) var(--owe-ease), color var(--owe-dur-fast) var(--owe-ease), border-color var(--owe-dur-fast) var(--owe-ease);
}
.owe-kontakt-details a.owe-kontakt-ig:hover { background: var(--owe-pearl); color: var(--owe-onyx); border-color: var(--owe-pearl); }
.owe-kontakt-sign { margin-top: 12px; font-size: 9px; font-weight: var(--owe-w-semi); letter-spacing: .4em; text-transform: uppercase; color: var(--owe-ash); }

/* Form (matches DS Input/Textarea/Button) */
.owe-form { display: flex; flex-direction: column; gap: 26px; }
.owe-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.owe-field label { display: block; font-family: var(--owe-font); }
.owe-field .owe-flabel { display: block; font-size: 10px; font-weight: var(--owe-w-semi); letter-spacing: .24em; text-transform: uppercase; color: var(--owe-ash); margin-bottom: 10px; }
.owe-field input, .owe-field textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--owe-hair-dk);
  background: transparent; padding: 8px 0;
  font-family: var(--owe-font); font-size: 15px; font-weight: var(--owe-w-light);
  letter-spacing: .02em; color: var(--owe-pearl);
  transition: border-color var(--owe-dur-fast) var(--owe-ease);
}
.owe-field textarea { line-height: 1.7; resize: vertical; }
.owe-field input:focus, .owe-field textarea:focus { border-bottom-color: var(--owe-pearl); }
.owe-field input::placeholder, .owe-field textarea::placeholder { color: var(--owe-ash); }
.owe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.owe-form-thanks { padding: 36px 0; }
.owe-form-thanks .owe-thanks-t { font-size: 12px; font-weight: var(--owe-w-semi); letter-spacing: .24em; text-transform: uppercase; }
.owe-form-thanks p { margin-top: 14px; font-size: 14px; font-weight: var(--owe-w-light); line-height: 1.9; color: var(--owe-mist); }
.owe-form-error { color: var(--owe-pearl); font-size: 12px; font-weight: var(--owe-w-medium); letter-spacing: .04em; line-height: 1.7; padding-bottom: 14px; border-bottom: 1px solid var(--owe-hair-dk); }

/* Buttons (DS Button) */
.owe-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; font-family: var(--owe-font); font-size: 10px;
  font-weight: var(--owe-w-semi); letter-spacing: .2em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; white-space: nowrap; text-decoration: none;
  line-height: 1; border: 1px solid transparent;
  transition: background var(--owe-dur-fast) var(--owe-ease), color var(--owe-dur-fast) var(--owe-ease), border-color var(--owe-dur-fast) var(--owe-ease);
}
.owe-btn-solid { background: #fff; color: var(--owe-onyx); }
.owe-btn-solid:hover { background: #e7e2e2; }
.owe-btn-primary-dark { background: #fff; color: var(--owe-onyx); border: 1px solid transparent; width: 200px; justify-content: center; }
.owe-btn-primary-dark:hover { background: #e7e2e2; }

/* ------------------------------------------------------------------
   Strony ogólne / 404 (poza stroną główną)
------------------------------------------------------------------ */
.owe-doc { min-height: 100vh; background: var(--owe-white); color: var(--owe-onyx); padding: clamp(90px,14vh,160px) clamp(22px,7vw,72px) clamp(60px,10vh,120px); }
.owe-doc .owe-doc-inner { max-width: 760px; margin: 0 auto; }
.owe-doc .owe-back { display: inline-block; margin-bottom: 34px; font-size: 10px; font-weight: var(--owe-w-semi); letter-spacing: .2em; text-transform: uppercase; color: var(--owe-mut); text-decoration: none; }
.owe-doc .owe-back:hover { color: var(--owe-onyx); }
.owe-doc h1 { font-size: clamp(28px,4vw,44px); font-weight: var(--owe-w-bold); letter-spacing: -.005em; text-transform: uppercase; line-height: 1.06; margin: 0 0 28px; }
.owe-doc .owe-content { font-size: 16px; font-weight: var(--owe-w-light); line-height: 1.95; color: var(--owe-mut); }
.owe-doc .owe-content a { color: var(--owe-onyx); }
.owe-doc .owe-content h2 { font-size: 22px; font-weight: var(--owe-w-bold); text-transform: uppercase; color: var(--owe-onyx); margin: 40px 0 12px; }
.owe-doc .owe-lead { max-width: none; }

/* ------------------------------------------------------------------
   Stopka (globalna, wszystkie szablony)
------------------------------------------------------------------ */
.owe-footer { background: var(--owe-black); }
.owe-footer-inner { max-width: 1160px; margin: 0 auto; padding: clamp(20px,3vh,32px) clamp(22px,5vw,72px); }
.owe-footer-copy { font-size: 11px; font-weight: var(--owe-w-light); letter-spacing: .06em; color: var(--owe-ash); }

/* ------------------------------------------------------------------
   Hardening — łamanie długiego tekstu, brak przepełnień
------------------------------------------------------------------ */
.owe-h2, .owe-tile h3, #sec-oferta h2, #sec-portfolio h2, #sec-opinie h2,
#sec-kontakt h2, .owe-doc h1 { overflow-wrap: break-word; text-wrap: balance; }
.owe-lead, .owe-op-body p, .owe-tile p, .owe-oferta-cta p, .owe-kontakt-intro { overflow-wrap: break-word; text-wrap: pretty; }
.owe-copy > .reveal, .owe-op-body, .owe-tile,
#sec-kontakt .owe-inner > div { min-width: 0; }
.owe-pf-name, .owe-pf-meta, .owe-op-name, .owe-kontakt-details a { overflow-wrap: break-word; }
/* Slogan hero: węższy tracking na wąskich ekranach, by nie przepełniał kadru */
@media (max-width: 560px) {
  #heroSlogan .owe-slogan-text { letter-spacing: .28em; }
}

/* ------------------------------------------------------------------
   Responsive — collapse split/grid layouts
------------------------------------------------------------------ */
@media (max-width: 900px) {
  .owe-section { height: auto; min-height: 70vh; }
  .owe-split { grid-template-columns: 1fr; }
  .owe-split .owe-media { min-height: 52vh; }
  .owe-split .owe-copy { padding: clamp(56px,10vw,90px) clamp(24px,7vw,60px); }
  #sec-kim  { grid-template-areas: "media" "copy"; }
  #sec-kim  .owe-media { grid-row: 1; }
  /* Proces: na mobile film pełnej szerokości pod etapami, nie nad nimi.
     Kontener dostaje proporcje natywnego kadru filmu (9:16), więc film
     wypełnia całą szerokość ekranu bez przycinania i bez pustych marginesów
     po bokach (min-height:0 kasuje ogólny próg 52vh z reguły niżej). */
  #sec-wspol .owe-copy { order: 1; }
  #sec-wspol .owe-media { order: 2; min-height: 0; aspect-ratio: 9 / 16; }
  .owe-tiles { grid-template-columns: 1fr; }
  #sec-kontakt .owe-inner { grid-template-columns: 1fr; }
  .owe-op-slide { grid-template-columns: 1fr; }
  .owe-op-photo { height: 40vh; }
  /* Zdjęcia w sekcjach dzielonych i w karuzeli Opinii mieszczą się w całości
     (bez ucinania góry/dołu) — puste marginesy wypełnia tło sekcji, już
     monochromatyczne. Portfolio (siatka 1:1) zostaje bez zmian — to celowy
     układ redakcyjny, nie przypadkowe kadrowanie. */
  .owe-split .owe-media .owe-xfade img,
  .owe-op-photo .owe-xfade img { object-fit: contain; }
  #owe-nav nav { gap: 14px; }
}
@media (max-width: 640px) {
  .owe-field-row { grid-template-columns: 1fr; gap: 22px; }

  /* Odrobina powietrza nad nadtytułem sekcji na wąskich ekranach — samo
     ucinanie pod paskiem nawigacji naprawia już offset w goTo() (site.js),
     to tylko delikatna korekta rytmu. */
  .owe-eyebrow { margin-top: 10px; }

  /* Menu hamburger: #navMenu (<nav>) przestaje być poziomym rzędem linków
     i staje się pełnoekranowym panelem, otwieranym/zamykanym przez #navToggle
     (klasa .is-open na #owe-nav). Domyślnie ukryty i niedostępny dla wskaźnika. */
  .owe-nav-toggle { display: block; }
  #owe-nav nav {
    position: fixed;
    inset: 74px 0 0 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px clamp(24px,8vw,56px) 40px;
    /* Tło panelu dopasowane do motywu nawigacji, żeby ikona (hamburger/X)
       i linki mogły mieć spójny, zawsze czytelny kolor w obu stanach. */
    background: var(--owe-onyx);
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s var(--owe-ease), visibility 0s linear .35s;
  }
  #owe-nav[data-theme="light"] nav { background: var(--owe-white); }
  #owe-nav.is-open nav {
    visibility: visible;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity .35s var(--owe-ease);
  }
  #owe-nav nav .owe-navlink {
    display: block;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--owe-hair-dk);
    text-align: left;
    font-size: 20px;
    letter-spacing: .03em;
    color: #fff !important;
    opacity: 1 !important;
  }
  #owe-nav[data-theme="light"] nav .owe-navlink {
    border-bottom-color: var(--owe-hair);
    color: var(--owe-onyx) !important;
  }
  /* Nadpisuje ogólną regułę .owe-navlink{display:block} powyżej — ikona +
     etykieta mają zostać obok siebie, nie w kolumnie. */
  #owe-nav nav .owe-navlink-ig { display: inline-flex; align-items: center; gap: 8px; }
  .owe-navlink-ig-label { display: inline; }
}