/* ===========================================================================
   Blachonix — "Terminal Widokowy".
   Arkusz przeniesiony 1:1 z aplikacji React (client/src/index.css,
   public-pages.css, gallery.css, contact.css, watermark-logo.css).
   Usunięte: import Tailwinda (strony publiczne go nie używają) oraz blok
   @theme inline — zmienne fontów są zadeklarowane niżej wprost w :root.
   Czcionki wczytuje HTML nieblokująco, dlatego nie ma tu @import.
   =========================================================================== */
/* COOLVETICA (11.09.2026, na życzenie właściciela — ta sama rodzina, co w logo). Pliki własne
   w assets/font/ (Typodermic, paczka z dafont: Regular + Italic). Zakres wag 100–900 na JEDNYM
   kroju: style proszą o 600/700, a bez tego zakresu przeglądarka dorabiałaby sztuczne pogrubienie
   i rozmazywała litery — Coolvetica jest z natury ciężka i ciasna, ma iść w naturalnej wadze.
   Zapas: Arial/Helvetica (te same proporcje, bez skoku układu przy ładowaniu). */
@font-face{font-family:"Coolvetica";src:url("font/coolvetica-rg.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Coolvetica";src:url("font/coolvetica-rg-it.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --font-display:"Coolvetica",Arial,Helvetica,sans-serif;
  --font-body:"Coolvetica",Arial,Helvetica,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Consolas,monospace;
}
:root {
  --ink: #111719;
  --ink-soft: #202a2b;
  --mist: #eff0eb;
  --mist-deep: #dfe2dc;
  --paper: #f7f7f3;
  --red: #ff4e2f;
  --cyan: #b7dce0;
  --line-dark: rgba(17, 23, 25, 0.22);
  --line-light: rgba(247, 247, 243, 0.25);
  --background: var(--mist);
  --foreground: var(--ink);
  --primary: var(--red);
  --primary-foreground: #ffffff;
  --border: rgba(17, 23, 25, 0.17);
  --radius: 0;
  /* Wariant wermilionu do TEKSTU na jasnym tle: 4,85:1 na --mist, 4,72:1 na --paper. */
  --red-ink: #c62d10;
  /* Akcent dobierany do tła: sekcje ciemne nadpisują go niżej na jasny wermilion. */
  --accent: var(--red-ink);
}

.hero, .about-section, .services-hero, .services-process, .public-hero, .public-cta,
.gallery-page-hero, .contact-card-primary, .service-card, .album-directory-card,
.managed-album-card, .section-index.light, .site-header, .lightbox { --accent: var(--red); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--mist); color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.terminal-shell { overflow: clip; background: var(--mist); }
.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 3.2vw; color: #fff; border-bottom: 1px solid rgba(255,255,255,.22); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; object-fit: contain; }
.brand-wordmark, .footer-brand span { font: 600 15px/1 var(--font-display); letter-spacing: .12em; }
.main-nav { display: flex; gap: 30px; align-items: center; }
.main-nav button, .main-nav a { border: 0; background: transparent; color: inherit; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; padding: 8px 0; transition: opacity .18s var(--ease-out, ease-out); }
.main-nav button:hover, .main-nav a:hover { opacity: .64; }
.main-nav span { color: var(--red); margin-right: 7px; }
.header-cta { display: flex; align-items: center; gap: 8px; color: var(--ink); background: var(--mist); padding: 11px 15px 11px 17px; border: 0; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: transform .18s cubic-bezier(.23,1,.32,1), background .18s; }
.header-cta:hover { transform: translateY(-2px); background: #fff; }
.header-cta:active, .filter-chip:active, .gallery-image-button:active { transform: scale(.97); }
.menu-button { display: none; color: #fff; border: 0; background: transparent; }

.hero { position: relative; min-height: 760px; height: 100svh; isolation: isolate; display: flex; align-items: flex-end; color: #fff; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% 50%; z-index: -3; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,13,15,.88) 0%, rgba(6,13,15,.55) 35%, rgba(6,13,15,.1) 74%), linear-gradient(0deg, rgba(6,13,15,.56) 0%, transparent 42%); }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .38; background-image: linear-gradient(90deg, transparent 0, transparent calc(25% - .5px), rgba(255,255,255,.26) 25%, transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(255,255,255,.22) 50%, transparent calc(50% + .5px)), linear-gradient(0deg, transparent 0, transparent calc(33.333% - .5px), rgba(255,255,255,.18) 33.333%, transparent calc(33.333% + .5px)); }
.hero-content { width: min(1120px, 100%); margin: 0 12vw 13vh; }
.eyebrow { margin: 0 0 23px; display: flex; align-items: center; gap: 8px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(17,23,25,.66); }
.eyebrow.inverse { color: rgba(255,255,255,.78); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255,78,47,.14); flex: 0 0 auto; }
.status-dot.dark { box-shadow: 0 0 0 4px rgba(255,78,47,.15); }
.hero h1, .gallery-heading h2, .about-copy h2, .contact-main h2 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.065em; line-height: .86; }
.hero h1 { max-width: 720px; font-size: clamp(65px, 8.3vw, 136px); text-wrap: balance; }
h1 em, h2 em { color: var(--accent); font-style: normal; font-weight: 400; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 34px; max-width: 860px; }
.hero-bottom p { max-width: 390px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.7; }
.play-reel { padding: 0; border: 0; background: transparent; color: #fff; display: flex; align-items: center; gap: 11px; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.play-disc { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: var(--red); transition: transform .2s cubic-bezier(.23,1,.32,1); }
.play-reel:hover .play-disc { transform: rotate(20deg) scale(1.08); }
.hero-coordinate { position: absolute; right: 3.2vw; bottom: 30px; display: flex; gap: 14px; font: 10px/1 var(--font-mono); letter-spacing: .06em; color: rgba(255,255,255,.58); }
.scroll-cue { position: absolute; right: 3.2vw; bottom: 84px; display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.5); cursor: pointer; animation: cue-bob 1.9s cubic-bezier(.77,0,.175,1) infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 48% { transform: translateY(8px); } }

.gallery-section { position: relative; display: grid; grid-template-columns: 18vw 1fr; min-height: 1000px; padding: 155px 5.2vw 140px 3.2vw; background: var(--mist); }
.section-index { padding-top: 3px; display: flex; align-items: flex-start; gap: 12px; height: max-content; color: var(--ink); font: 500 10px/1 var(--font-mono); letter-spacing: .11em; }
.index-number { color: var(--accent); }
.index-line { display: block; margin-top: 5px; width: min(4vw, 50px); height: 1px; background: currentColor; opacity: .55; }
.index-label { writing-mode: vertical-rl; margin-top: 16px; }
.gallery-main { min-width: 0; }
.gallery-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 67px; border-bottom: 1px solid var(--line-dark); }
.gallery-heading h2, .about-copy h2, .contact-main h2 { font-size: clamp(58px, 7vw, 108px); color: var(--ink); }
.gallery-intro { width: min(330px, 35%); margin: 0 0 5px; font-size: 14px; line-height: 1.7; color: rgba(17,23,25,.68); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 27px 0 38px; }
.filter-chip { border: 1px solid rgba(17,23,25,.25); background: transparent; color: var(--ink); padding: 10px 12px; font: 500 10px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .18s, background .18s, transform .18s; }
.filter-chip:hover, .filter-chip.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.image-count { margin-left: auto; font: 500 11px/1 var(--font-mono); color: rgba(17,23,25,.52); }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 58px; align-items: start; }
.gallery-card { min-width: 0; }
.gallery-card.card-1, .gallery-card.card-3 { grid-column: span 8; }
.gallery-card.card-2, .gallery-card.card-4 { grid-column: span 4; }
.gallery-card.card-5, .gallery-card.card-6, .gallery-card.card-7, .gallery-card.card-8 { grid-column: span 3; }
.gallery-card.card-1 { margin-top: 29px; }.gallery-card.card-2 { margin-top: 0; }.gallery-card.card-3 { margin-top: 26px; }.gallery-card.card-4 { margin-top: -40px; }.gallery-card.card-5 { margin-top: 0; }.gallery-card.card-6 { margin-top: 37px; }.gallery-card.card-7 { margin-top: -10px; }.gallery-card.card-8 { margin-top: 52px; }
.gallery-image-button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; color: #fff; background: var(--ink); cursor: zoom-in; text-align: left; }
.wide .gallery-image-button { aspect-ratio: 1.58 / 1; }.tall .gallery-image-button { aspect-ratio: .79 / 1; }.square .gallery-image-button { aspect-ratio: 1 / 1; }
.gallery-image-button img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .54s cubic-bezier(.23,1,.32,1), filter .54s; }
.gallery-image-button:hover img { transform: scale(1.045); filter: saturate(.9) contrast(1.04); }
.image-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,12,14,.64) 0%, transparent 44%); pointer-events: none; }
.card-meta-top { position: absolute; top: 13px; left: 14px; font: 10px/1 var(--font-mono); letter-spacing: .08em; color: rgba(255,255,255,.84); }
.expand-control { position: absolute; right: 13px; top: 13px; width: 31px; height: 31px; display: grid; place-items: center; background: rgba(17,23,25,.64); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s cubic-bezier(.23,1,.32,1); }
.gallery-image-button:hover .expand-control { opacity: 1; transform: translateY(0); }
.card-footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 13px; }
.origin-label { display: block; margin-bottom: 7px; font: 500 9px/1 var(--font-mono); color: var(--accent); letter-spacing: .09em; text-transform: uppercase; }
.card-footer h3 { margin: 0; font: 500 18px/1.1 var(--font-display); letter-spacing: -.045em; }.card-subtitle { max-width: 120px; padding-top: 5px; font: 400 10px/1.4 var(--font-mono); color: rgba(17,23,25,.58); text-align: right; }

.about-section { display: grid; grid-template-columns: 18vw minmax(0, 1fr) minmax(280px, .72fr); gap: 0; position: relative; min-height: 750px; padding: 135px 5.2vw 110px 3.2vw; overflow: hidden; background: var(--ink); color: var(--mist); }
.section-index.light { color: var(--mist); }.about-copy { position: relative; z-index: 1; }.about-copy h2 { color: var(--mist); max-width: 850px; }.about-copy h2 em { color: var(--cyan); }.about-lead { width: min(540px, 85%); margin: 36px 0 72px; font-size: 16px; line-height: 1.8; color: rgba(239,240,235,.76); }.about-facts { display: flex; gap: 45px; }.about-facts > div { display: flex; gap: 10px; align-items: baseline; }.about-facts strong { font: 500 12px/1 var(--font-mono); color: var(--red); }.about-facts span { font-size: 12px; line-height: 1.35; color: rgba(239,240,235,.67); }
.about-graphic { position: relative; align-self: center; justify-self: end; width: min(31vw, 430px); aspect-ratio: 1; border: 1px solid var(--line-light); border-radius: 50%; display: grid; place-items: center; overflow: visible; }.orbit { position: absolute; display: block; z-index: 2; border: 1px solid var(--line-light); border-radius: 50%; }.orbit-one { inset: 12%; }.orbit-two { inset: 31%; border-color: rgba(183,220,224,.55); }.signal-core { position: relative; z-index: 5; width: 10px; height: 10px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,78,47,.1), 0 0 0 42px rgba(255,78,47,.045); animation: radar-pulse 2.25s ease-out infinite; }.about-graphic p { position: absolute; z-index: 6; left: -25px; bottom: 15%; margin: 0; padding: 6px; background: var(--ink); font: 10px/1.6 var(--font-mono); letter-spacing: .08em; color: rgba(239,240,235,.63); }
.radar-display { isolation: isolate; background: radial-gradient(circle at center, rgba(255,78,47,.07) 0 13%, transparent 14% 100%); }.radar-grid { position: absolute; z-index: 1; inset: 0; overflow: hidden; border-radius: inherit; opacity: .42; background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(183,220,224,.12) 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgba(183,220,224,.1) 25px); mask-image: radial-gradient(circle, #000 0 58%, transparent 87%); }.radar-sweep { position: absolute; z-index: 3; inset: -1px; border-radius: 50%; background: conic-gradient(from 215deg, rgba(183,220,224,.42), rgba(183,220,224,.14) 12deg, transparent 43deg 360deg); animation: radar-rotate 4.8s linear infinite; mix-blend-mode: screen; }.radar-arm { position: absolute; z-index: 4; top: 50%; left: 50%; width: 47%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(183,220,224,.9), rgba(183,220,224,.08)); box-shadow: 0 0 10px rgba(183,220,224,.25); animation: radar-arm-rotate 4.8s linear infinite; }.radar-contact { position: absolute; z-index: 5; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(183,220,224,.1), 0 0 10px rgba(183,220,224,.75); animation: radar-contact-flash 4.8s linear infinite; }.contact-north { top: 21%; left: 55%; animation-delay: .45s; }.contact-east { top: 55%; right: 16%; animation-delay: 1.8s; }.contact-south { bottom: 17%; left: 35%; animation-delay: 3.4s; }.radar-display::after { content: ""; position: absolute; z-index: 2; inset: 50% 0 auto; height: 1px; background: rgba(183,220,224,.22); }.radar-display::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 50%; width: 1px; background: rgba(183,220,224,.22); }.radar-display .orbit { pointer-events: none; }.radar-display p { box-shadow: 0 0 0 8px var(--ink); }.radar-display:hover .radar-sweep, .radar-display:hover .radar-arm { animation-duration: 3.2s; }@keyframes radar-rotate { to { transform: rotate(360deg); } }@keyframes radar-arm-rotate { to { transform: rotate(360deg); } }@keyframes radar-pulse { 0%, 100% { box-shadow: 0 0 0 14px rgba(255,78,47,.1), 0 0 0 42px rgba(255,78,47,.045); } 50% { box-shadow: 0 0 0 20px rgba(255,78,47,.08), 0 0 0 58px rgba(255,78,47,.015); } }@keyframes radar-contact-flash { 0%, 15%, 100% { opacity: .25; transform: scale(.72); } 19%, 26% { opacity: 1; transform: scale(1.35); } 30% { opacity: .55; transform: scale(1); } }

.contact-section { position: relative; display: grid; grid-template-columns: .55fr 1.5fr .55fr; gap: 30px; align-items: end; padding: 120px 5.2vw 47px 3.2vw; min-height: 580px; background: var(--paper); }.contact-section::before { content:""; position:absolute; top: 0; left:0; height: 10px; width: 100%; background: repeating-linear-gradient(90deg, var(--red) 0 12px, transparent 12px 20px); }.contact-kicker { align-self: start; padding-top: 7px; font: 500 10px/1.55 var(--font-mono); letter-spacing: .09em; color: rgba(17,23,25,.58); }.contact-main h2 { margin-bottom: 38px; }.contact-link { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font: 500 15px/1 var(--font-display); letter-spacing: -.03em; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid var(--ink); transition: color .2s, border .2s; }.contact-link:hover { color: var(--red); border-color: var(--red); }.contact-info { display: flex; flex-direction: column; gap: 44px; align-items: flex-end; font: 400 10px/1.6 var(--font-mono); color: rgba(17,23,25,.65); }.contact-info > div:first-child { display: flex; align-items: flex-start; gap: 9px; }.socials { display: flex; gap: 7px; }.socials a { display: grid; place-items: center; width: 35px; height: 35px; color: var(--ink); border: 1px solid rgba(17,23,25,.3); transition: color .18s, background .18s; }.socials a:hover { background: var(--ink); color: #fff; }

.managed-albums { padding: 130px 7.5vw 135px; background: var(--paper); border-top: 1px solid var(--line-dark); }.managed-albums-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 50px; }.managed-albums-head p:last-child { min-width: 0; }.managed-albums-head h2 { margin: 0; font: 600 clamp(52px, 6.6vw, 96px)/.87 var(--font-display); letter-spacing: -.065em; }.managed-albums-head p:last-child { width: min(370px, 36%); margin: 0; color: rgba(17,23,25,.64); font-size: 14px; line-height: 1.7; }.managed-albums-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }.managed-album-card { min-height: 245px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: var(--ink); color: var(--mist); text-decoration: none; overflow: hidden; transition: transform .24s cubic-bezier(.23,1,.32,1), background .24s; }.managed-album-card::before { content:""; position:absolute; inset:-40% 50% auto -20%; height: 150%; border:1px solid rgba(183,220,224,.25); border-radius:50%; transition: transform .4s cubic-bezier(.23,1,.32,1); }.managed-album-card:hover { transform: translateY(-5px); background: #202a2b; }.managed-album-card:hover::before { transform: translate(25px, 18px) scale(1.1); }.managed-album-no, .managed-album-link { position: relative; z-index: 1; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; }.managed-album-no { position: absolute; top: 22px; left: 22px; color: var(--red); }.managed-album-icon { position: absolute; top: 62px; left: 22px; width: 38px; height: 38px; color: var(--cyan); }.managed-album-card h3 { position: relative; z-index:1; max-width: 240px; margin:0 0 16px; font: 500 28px/1 var(--font-display); letter-spacing:-.06em; }.managed-album-link { display:flex; align-items:center; gap:7px; color: rgba(239,240,235,.7); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 3.2vw; background: var(--paper); color: rgba(17,23,25,.58); border-top: 1px solid var(--line-dark); font: 500 9px/1 var(--font-mono); letter-spacing: .08em; }.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }.footer-brand img { width: 24px; height: 24px; }.footer-brand span { font-size: 11px; }.site-footer button { display: flex; align-items:center; gap: 7px; padding: 0; color: var(--ink); border: 0; background: transparent; font: inherit; cursor: pointer; }

.lightbox { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 3.5vh 5vw; color: var(--mist); }.lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,8,9,.94); cursor: zoom-out; }.lightbox-content { position: relative; width: min(1060px, 100%); max-height: 93vh; animation: lightbox-in .23s cubic-bezier(.23,1,.32,1); }.lightbox-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font: 10px/1 var(--font-mono); letter-spacing: .1em; }.lightbox-head button, .lightbox-controls button { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); color: var(--mist); background: transparent; cursor: pointer; transition: background .18s, color .18s; }.lightbox-head button:hover, .lightbox-controls button:hover { background: var(--mist); color: var(--ink); }.lightbox-image-wrap { height: min(70vh, 700px); overflow: hidden; background: #090e0f; }.lightbox-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }.lightbox-foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 15px; }.lightbox-foot p, .lightbox-foot span { margin: 0; font: 10px/1.5 var(--font-mono); color: rgba(239,240,235,.63); }.lightbox-foot h3 { margin: 6px 0 4px; font: 500 25px/1 var(--font-display); letter-spacing: -.05em; }.lightbox-controls { display: flex; gap: 7px; }@keyframes lightbox-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) { .site-header { height: 70px; padding: 0 20px; }.brand-mark { width: 34px; height: 34px; }.main-nav { position: absolute; top: 69px; left: 0; right: 0; padding: 18px 20px 22px; background: var(--ink); border-top: 1px solid var(--line-light); display: none; flex-direction: column; align-items: flex-start; gap: 17px; }.main-nav.is-open { display: flex; }.main-nav button, .main-nav a { font-size: 11px; }.header-cta { display: none; }.menu-button { display: grid; place-items: center; }.hero { min-height: 700px; }.hero-content { margin: 0 24px 10vh; }.hero h1 { font-size: clamp(58px, 12vw, 94px); }.hero-bottom { align-items: flex-start; flex-direction: column; }.hero-coordinate { display: none; }.scroll-cue { right: 24px; bottom: 28px; }.gallery-section { grid-template-columns: 1fr; padding: 88px 24px; }.section-index { margin-bottom: 54px; }.index-label { writing-mode: initial; margin-top: 0; }.gallery-heading { padding-bottom: 43px; }.gallery-heading h2, .about-copy h2, .contact-main h2 { font-size: clamp(56px, 11vw, 90px); }.gallery-intro { width: 42%; }.gallery-grid { column-gap: 14px; row-gap: 38px; }.gallery-card.card-1, .gallery-card.card-3 { grid-column: span 8; }.gallery-card.card-2, .gallery-card.card-4 { grid-column: span 4; }.gallery-card.card-5, .gallery-card.card-6, .gallery-card.card-7, .gallery-card.card-8 { grid-column: span 3; }.about-section { grid-template-columns: 1fr; padding: 88px 24px; }.about-copy h2 { max-width: 680px; }.about-graphic { width: min(52vw, 350px); margin-top: 58px; justify-self: end; }.contact-section { grid-template-columns: .6fr 1.4fr; padding: 90px 24px 36px; }.contact-info { grid-column: 2; align-items: flex-start; flex-direction: row; justify-content: space-between; }.contact-kicker { grid-column: 1; }.contact-main { grid-column: 2; }.site-footer { padding: 18px 24px; }.footer-brand span { display: none; } }
@media (max-width: 600px) { .brand-wordmark { font-size: 12px; }.hero { min-height: 670px; }.hero-image { object-position: 68% 50%; }.hero-shade { background: linear-gradient(90deg, rgba(6,13,15,.81), rgba(6,13,15,.25)), linear-gradient(0deg, rgba(6,13,15,.7), transparent 48%); }.hero-content { margin-bottom: 94px; }.hero h1 { font-size: clamp(53px, 15.8vw, 75px); }.hero-bottom p { font-size: 12px; line-height: 1.6; max-width: 290px; }.gallery-heading { display: block; }.gallery-intro { width: auto; max-width: 320px; margin: 25px 0 0; font-size: 12px; }.filter-bar { gap: 6px; padding: 24px 0 29px; }.filter-chip { padding: 9px 10px; font-size: 9px; }.image-count { display: none; }.gallery-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }.gallery-card.card-1, .gallery-card.card-3, .gallery-card.card-2, .gallery-card.card-4, .gallery-card.card-5, .gallery-card.card-6, .gallery-card.card-7, .gallery-card.card-8 { grid-column: span 1; margin-top: 0; }.gallery-card.card-1, .gallery-card.card-3 { grid-column: span 2; }.gallery-card.card-2, .gallery-card.card-4 { margin-top: 26px; }.card-footer { display: block; }.card-subtitle { display: block; text-align: left; max-width: 170px; padding-top: 7px; }.expand-control { opacity: 1; transform: none; background: rgba(17,23,25,.43); }.about-lead { width: 100%; margin: 28px 0 42px; font-size: 14px; }.about-facts { flex-wrap: wrap; gap: 23px; }.about-facts > div { width: 40%; }.about-graphic { width: 72vw; }.about-graphic p { left: -5px; bottom: 8%; }.contact-section { display: block; min-height: auto; padding: 77px 24px 30px; }.contact-kicker { margin-bottom: 62px; }.contact-main h2 { margin-bottom: 28px; }.contact-info { margin-top: 62px; }.site-footer > span:not(.footer-brand span) { display: none; }.lightbox { padding: 18px; }.lightbox-image-wrap { height: 63vh; }.lightbox-foot h3 { font-size: 20px; }.lightbox-controls button { width: 35px; height: 35px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

.hero-video-portfolio { background: #0b1214; }
.services-page { min-height: 100vh; min-height: 100svh; background: var(--paper); color: var(--ink); }.services-header { position: absolute; }.services-hero { position: relative; min-height: 780px; height: 100svh; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; color: var(--mist); }.services-hero-video { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--ink); }.services-hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(8,15,16,.92), rgba(8,15,16,.6) 41%, rgba(8,15,16,.2) 74%), linear-gradient(0deg, rgba(8,15,16,.48), transparent 46%); }.services-hero-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, transparent 0, transparent calc(25% - .5px), rgba(239,240,235,.22) 25%, transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(239,240,235,.2) 50%, transparent calc(50% + .5px)); }.services-hero-content { max-width: 1050px; margin: 0 12vw 14vh; }.services-hero-index { margin: 0 0 34px; color: var(--cyan); font: 500 10px/1 var(--font-mono); letter-spacing: .13em; }.services-hero h1, .services-list-heading h2, .services-process h2, .services-cta h2 { margin: 0; font: 600 clamp(66px, 8vw, 132px)/.86 var(--font-display); letter-spacing: -.07em; }.services-hero-lead { max-width: 430px; margin: 34px 0 0; color: rgba(239,240,235,.78); font-size: 15px; line-height: 1.75; }.services-scroll { position: absolute; right: 5.2vw; bottom: 42px; display: grid; width: 42px; height: 42px; place-items: center; color: var(--mist); border: 1px solid rgba(239,240,235,.5); border-radius: 50%; animation: cue-bob 1.9s cubic-bezier(.77,0,.175,1) infinite; }
.services-list { padding: 145px 8vw; }.services-list-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12vw; align-items: end; padding-bottom: 72px; border-bottom: 1px solid var(--line-dark); }.services-list-heading .eyebrow { grid-column: 1 / -1; }.services-list-heading h2 { font-size: clamp(55px, 6.8vw, 104px); }.services-list-heading > p:last-child { margin: 0 0 8px; color: rgba(17,23,25,.64); font-size: 15px; line-height: 1.8; }.services-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 14px; }.service-card { display: flex; min-height: 430px; flex-direction: column; padding: 25px; background: var(--ink); color: var(--mist); transition: transform .24s cubic-bezier(.23,1,.32,1), background .24s; }.service-card:hover { transform: translateY(-7px); background: #202b2d; }.service-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--cyan); font: 500 11px/1 var(--font-mono); }.service-card-top span { color: var(--red); }.service-card h3 { margin: auto 0 20px; font: 500 clamp(28px, 3vw, 48px)/.96 var(--font-display); letter-spacing: -.06em; }.service-card > p { margin: 0; color: rgba(239,240,235,.68); font-size: 14px; line-height: 1.75; }.service-output { display: flex; gap: 8px; align-items: flex-start; margin-top: 28px; padding-top: 15px; border-top: 1px solid rgba(239,240,235,.18); color: var(--cyan); font: 10px/1.5 var(--font-mono); }.service-output svg { flex: 0 0 auto; color: var(--red); }
.services-process { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; padding: 130px 8vw; background: var(--ink); color: var(--mist); }.services-process h2 { font-size: clamp(57px, 6.8vw, 108px); }.services-process h2 em { color: var(--cyan); }.services-process-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }.services-process-list li { display: grid; grid-template-columns: 68px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line-light); }.services-process-list li:last-child { border-bottom: 1px solid var(--line-light); }.services-process-list li > span { color: var(--red); font: 500 11px/1 var(--font-mono); }.services-process-list strong { font: 500 22px/1.1 var(--font-display); letter-spacing: -.04em; }.services-process-list p { margin: 10px 0 0; color: rgba(239,240,235,.65); font-size: 14px; line-height: 1.65; }.services-cta { display: flex; min-height: 590px; flex-direction: column; justify-content: center; align-items: center; padding: 120px 24px; text-align: center; background: var(--paper); }.services-cta h2 { margin-bottom: 36px; font-size: clamp(56px, 7vw, 112px); }.services-cta > a:not(.services-back) { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ink); color: var(--mist); text-decoration: none; font: 500 11px/1 var(--font-mono); letter-spacing: .07em; transition: transform .18s cubic-bezier(.23,1,.32,1); }.services-cta > a:not(.services-back):hover { transform: translateY(-4px); }.services-panel { margin-top: 18px; background: var(--red) !important; color: #fff !important; }.services-back { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 13px 7px; margin: 9px 0 0 -7px; color: rgba(17,23,25,.64); font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-decoration: none; }
@media (max-width: 900px) { .services-hero { min-height: 700px; }.services-hero-content { margin: 0 24px 12vh; }.services-list, .services-process { padding: 90px 24px; }.services-list-heading, .services-process { grid-template-columns: 1fr; gap: 42px; }.services-list-heading > p:last-child { max-width: 480px; }.services-list-grid { grid-template-columns: 1fr; }.service-card { min-height: 310px; }.services-cta { min-height: 500px; }.services-scroll { right: 24px; bottom: 28px; } }
@media (max-width: 600px) { .services-hero { min-height: 680px; }.services-hero-video { object-position: 62% 50%; }.services-hero-content { margin-bottom: 92px; }.services-hero h1 { font-size: clamp(54px, 15.6vw, 78px); }.services-hero-lead { font-size: 13px; }.services-list-heading { display: block; padding-bottom: 46px; }.services-list-heading h2 { margin-top: 30px; }.services-list-heading > p:last-child { margin-top: 27px; font-size: 13px; }.service-card { min-height: 290px; }.service-card h3 { font-size: 36px; }.services-process-list li { grid-template-columns: 42px 1fr; gap: 12px; }.services-cta { min-height: 450px; }.services-cta h2 { font-size: clamp(51px, 15vw, 74px); } }

.service-card{position:relative;isolation:isolate;overflow:hidden;background:#111a1c}.service-card-visual{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.86;filter:saturate(.78) contrast(1.08)}.service-card-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(7,13,15,.46) 0%,rgba(7,13,15,.83) 48%,rgba(7,13,15,.97) 100%)}.service-card>*:not(.service-card-visual):not(.service-card-shade){position:relative;z-index:1}.service-card:hover .service-card-visual{transform:scale(1.045);filter:saturate(.92) contrast(1.08)}

/* ---------- public-pages.css ---------- */
.public-page{min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink)}.public-page .site-header{position:absolute;z-index:10}.public-hero{position:relative;display:flex;min-height:720px;height:100svh;align-items:flex-end;overflow:hidden;color:var(--mist);isolation:isolate}.public-hero>video{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;background:#10191b}.public-hero-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(8,14,16,.91),rgba(8,14,16,.5) 55%,rgba(8,14,16,.12)),linear-gradient(0deg,rgba(8,14,16,.35),transparent 50%)}.public-hero-grid{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 24.9%,rgba(239,240,235,.16) 25%,transparent 25.1%,transparent 49.9%,rgba(239,240,235,.11) 50%,transparent 50.1%)}.public-hero-copy{max-width:830px;margin:0 12vw 14vh}.public-hero-index{margin:0 0 25px;color:var(--cyan);font:500 10px/1 var(--font-mono);letter-spacing:.14em}.public-hero h1,.public-intro h2,.public-cta h2{margin:0;font:600 clamp(66px,8vw,130px)/.86 var(--font-display);letter-spacing:-.07em}.public-hero-copy>p:last-child{max-width:520px;margin:30px 0 0;color:rgba(239,240,235,.82);font-size:15px;line-height:1.7}.public-intro{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding:140px 12vw}.public-intro h2{margin-top:30px;font-size:clamp(55px,6.5vw,98px)}.public-copy{display:grid;gap:20px;align-content:end;color:rgba(17,23,25,.68);font-size:16px;line-height:1.8}.public-copy p{margin:0}.about-values{display:grid;grid-template-columns:repeat(3,1fr);background:#142023;color:var(--mist)}.about-values article{position:relative;min-height:340px;padding:42px;border-right:1px solid rgba(239,240,235,.16)}.about-values article:last-child{border:0}.about-values svg{color:var(--cyan)}.about-values span{position:absolute;right:32px;top:38px;color:var(--red);font:500 12px/1 var(--font-mono)}.about-values h3{margin:74px 0 12px;font:500 38px/1 var(--font-display);letter-spacing:-.05em}.about-values p{max-width:290px;margin:0;color:rgba(239,240,235,.64);font-size:14px;line-height:1.7}.public-cta{display:flex;min-height:490px;flex-direction:column;align-items:center;justify-content:center;padding:100px 24px;background:#10191b;color:var(--mist);text-align:center}.public-cta h2{margin:0 0 32px;font-size:clamp(58px,7vw,112px)}.public-cta a,.contact-card-primary>a{display:inline-flex;gap:10px;align-items:center;padding:14px 18px;background:var(--red);color:#111719;font:500 11px/1 var(--font-mono);letter-spacing:.07em;text-decoration:none}.contact-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1px;background:var(--line-dark)}.contact-card{min-height:360px;padding:44px;background:var(--paper)}.contact-card>svg{color:var(--red)}.contact-card-primary{background:#142023;color:var(--mist)}.contact-card h2{margin:34px 0;font:500 clamp(38px,4vw,62px)/.92 var(--font-display);letter-spacing:-.06em}.contact-label{margin:76px 0 10px;color:var(--red);font:500 10px/1 var(--font-mono);letter-spacing:.1em}.contact-card h3{margin:0 0 18px;font:500 28px/1.08 var(--font-display);letter-spacing:-.045em}.contact-card>span,.contact-note{display:block;max-width:270px;margin:0;color:rgba(17,23,25,.62);font-size:14px;line-height:1.7}.contact-note{margin-top:28px;color:rgba(239,240,235,.62)}.public-footer{background:var(--paper)}@media(max-width:800px){.public-hero-copy{margin:0 24px 12vh}.public-intro{grid-template-columns:1fr;gap:45px;padding:90px 24px}.about-values{grid-template-columns:1fr}.about-values article{min-height:260px;border-right:0;border-bottom:1px solid rgba(239,240,235,.16)}.contact-grid{grid-template-columns:1fr}.contact-card{min-height:280px;min-width:0;padding:26px 22px}.public-footer{flex-wrap:wrap}}@media(max-width:600px){.public-hero{min-height:680px}.public-hero h1{font-size:clamp(55px,15vw,78px)}.public-hero-copy>p:last-child{font-size:13px}.public-intro h2{font-size:clamp(52px,15vw,76px)}.public-cta{min-height:420px}.public-cta h2{font-size:clamp(50px,14vw,74px)}}

/* ---------- gallery.css ---------- */
.portfolio-gallery-page{min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink)}
.gallery-header{position:absolute;z-index:10}.gallery-page-hero{position:relative;display:flex;min-height:760px;height:100svh;align-items:flex-end;overflow:hidden;color:var(--mist);isolation:isolate}.gallery-page-hero>video{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}.gallery-page-hero-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(8,15,16,.92),rgba(8,15,16,.54) 48%,rgba(8,15,16,.1) 78%),linear-gradient(0deg,rgba(8,15,16,.45),transparent 52%)}.gallery-page-hero-grid{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent calc(25% - .5px),rgba(239,240,235,.18) 25%,transparent calc(25% + .5px),transparent calc(50% - .5px),rgba(239,240,235,.14) 50%,transparent calc(50% + .5px))}.gallery-page-hero-copy{max-width:800px;margin:0 12vw 14vh}.gallery-page-index{margin:0 0 28px;color:var(--cyan);font:500 10px/1 var(--font-mono);letter-spacing:.14em}.gallery-page-hero h1,.gallery-archive-heading h2,.gallery-page-cta h2{margin:0;font:600 clamp(66px,8vw,130px)/.86 var(--font-display);letter-spacing:-.07em}.gallery-page-hero-copy>p:last-child{max-width:500px;margin:32px 0 0;color:rgba(239,240,235,.8);font-size:15px;line-height:1.7}.gallery-page-scroll{position:absolute;right:5.2vw;bottom:42px;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(239,240,235,.52);border-radius:50%;color:var(--mist);animation:gallery-cue 1.9s ease-in-out infinite}
.gallery-archive{padding:145px 8vw}.gallery-archive-heading{display:grid;grid-template-columns:1fr 1fr;gap:12vw;align-items:end;padding-bottom:55px;border-bottom:1px solid var(--line-dark)}.gallery-archive-heading .eyebrow{grid-column:1/-1}.gallery-archive-heading h2{font-size:clamp(55px,6.8vw,104px)}.gallery-archive-heading>p{max-width:460px;margin:0 0 7px;color:rgba(17,23,25,.64);font-size:15px;line-height:1.8}.gallery-search{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding:14px 16px;border:1px solid var(--line-dark);background:#f8f8f4}.gallery-search svg{color:var(--red)}.gallery-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 16px/1 var(--font-display)}.gallery-search input::placeholder{color:rgba(17,23,25,.45)}.gallery-search span{white-space:nowrap;color:rgba(17,23,25,.55);font:500 9px/1 var(--font-mono);letter-spacing:.1em}
.gallery-mode-tabs{display:flex;gap:8px;align-items:center;padding:22px 0}.gallery-mode-tabs button{display:inline-flex;gap:9px;align-items:center;padding:10px 12px;border:1px solid var(--line-dark);background:transparent;color:rgba(17,23,25,.7);font:500 10px/1 var(--font-mono);letter-spacing:.05em;transition:background .18s,color .18s}.gallery-mode-tabs button:hover,.gallery-mode-tabs button.active{border-color:var(--ink);background:var(--ink);color:var(--mist)}.gallery-mode-tabs span{color:var(--red)}
.album-directory-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.album-directory-card{grid-column:span 6;min-width:0}.album-directory-card:nth-child(3n+1){grid-column:span 7}.album-directory-card:nth-child(3n+2){grid-column:span 5}.album-directory-cover{position:relative;display:block;width:100%;min-height:385px;padding:0;overflow:hidden;border:0;background:var(--ink);color:var(--mist);text-align:left;cursor:pointer}.album-directory-cover img,.album-directory-cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.23,1,.32,1)}.album-directory-cover:hover img,.album-directory-cover:hover video{transform:scale(1.045)}.album-cover-fallback{position:absolute;inset:0;background:linear-gradient(145deg,#0f1d21,#314d57)}.album-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,11,.08),rgba(4,9,11,.8) 90%)}.album-directory-top,.album-directory-count,.album-open{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;font:500 10px/1 var(--font-mono);letter-spacing:.08em}.album-directory-top{top:18px;left:18px;color:var(--cyan)}.album-directory-count{right:18px;bottom:18px;color:rgba(239,240,235,.8)}.album-open{bottom:18px;left:18px;padding:10px 12px;background:var(--mist);color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s cubic-bezier(.23,1,.32,1)}.album-directory-cover:hover .album-open{opacity:1;transform:translateY(0)}.album-watermark{position:absolute;z-index:1;pointer-events:none;user-select:none;color:rgba(239,240,235,.48);font:600 11px/1 var(--font-mono);letter-spacing:.18em;text-shadow:0 1px 4px rgba(0,0,0,.5)}.watermark-cover{right:-28px;bottom:72px;transform:rotate(-28deg);white-space:nowrap}.album-directory-info{padding-top:15px}.album-directory-info>span{color:var(--red-ink);font:500 10px/1 var(--font-mono);letter-spacing:.08em}.album-directory-info h3{margin:10px 0 8px;font:500 clamp(29px,3.2vw,48px)/.95 var(--font-display);letter-spacing:-.06em}.album-directory-info p{max-width:500px;margin:0;color:rgba(17,23,25,.67);font-size:14px;line-height:1.65}
/* Atrybut hidden przegrywał z display:grid, więc komunikat „nie znaleziono”
   wisiał pod siatką albumów na każdej wizycie. */
.gallery-empty[hidden]{display:none}
.gallery-empty{display:grid;justify-items:center;gap:12px;min-height:290px;place-content:center;padding:44px;text-align:center;border:1px dashed var(--line-dark)}.gallery-empty h3{margin:0;font:500 30px/1 var(--font-display);letter-spacing:-.05em}.gallery-empty p{max-width:450px;margin:0;color:rgba(17,23,25,.65);font-size:14px;line-height:1.6}.gallery-empty a{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:11px 14px;background:var(--ink);color:var(--mist);font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-decoration:none}.gallery-loader{width:18px;height:18px;border:2px solid rgba(17,23,25,.16);border-top-color:var(--red);border-radius:50%;animation:gallery-spin .7s linear infinite}
.gallery-page-cta{display:flex;min-height:540px;flex-direction:column;align-items:center;justify-content:center;padding:110px 24px;text-align:center}.gallery-page-cta h2{margin:0 0 34px;font-size:clamp(58px,7vw,112px)}.gallery-page-cta>a{display:inline-flex;gap:10px;align-items:center;padding:14px 18px;background:var(--ink);color:var(--mist);font:500 11px/1 var(--font-mono);letter-spacing:.07em;text-decoration:none}.gallery-footer{gap:20px}.footer-panel,.footer-gallery-back{display:inline-flex;gap:8px;align-items:center;color:inherit;font:500 10px/1 var(--font-mono);letter-spacing:.07em;text-decoration:none}.footer-panel{padding:10px 12px;color:#111719;background:var(--red)}.footer-gallery-back{margin-left:auto;opacity:.72}
.album-overlay{position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:4vh 5vw;color:var(--mist)}.album-overlay-backdrop{position:absolute;inset:0;border:0;background:rgba(4,8,10,.94);cursor:zoom-out}.album-overlay-shell{position:relative;width:min(1120px,100%);max-height:92vh}.album-overlay-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}.album-overlay-head p{margin:0 0 7px;color:var(--cyan);font:10px/1 var(--font-mono);letter-spacing:.08em}.album-overlay-head h2{margin:0;font:500 clamp(28px,4vw,54px)/.95 var(--font-display);letter-spacing:-.06em}.album-overlay-head button,.album-overlay-controls button{display:grid;width:39px;height:39px;place-items:center;border:1px solid rgba(239,240,235,.35);background:transparent;color:var(--mist);cursor:pointer}.album-overlay-media{position:relative;height:min(67vh,660px);overflow:hidden;background:#060b0d}.album-overlay-media img,.album-overlay-media video{display:block;width:100%;height:100%;object-fit:contain}.watermark-overlay{right:50%;top:50%;transform:translate(50%,-50%) rotate(-22deg);white-space:nowrap;color:rgba(239,240,235,.42);font-size:clamp(12px,2vw,22px);letter-spacing:.24em}.album-overlay-foot{display:flex;justify-content:space-between;align-items:center;padding-top:15px}.album-overlay-foot>div:first-child{display:grid;gap:6px}.album-overlay-foot span{display:flex;align-items:center;gap:7px;color:rgba(239,240,235,.65);font:10px/1 var(--font-mono);letter-spacing:.08em}.album-overlay-foot strong{font:500 22px/1 var(--font-display);letter-spacing:-.04em}.album-overlay-controls{display:flex;gap:7px}.portfolio-gallery-page [data-protected-media] img,.portfolio-gallery-page [data-protected-media] video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.portfolio-gallery-page [data-protected-media] img{pointer-events:none}
@keyframes gallery-spin{to{transform:rotate(360deg)}}@keyframes gallery-cue{50%{transform:translateY(6px)}}
@media(max-width:900px){.gallery-page-hero{min-height:700px}.gallery-page-hero-copy{margin:0 24px 12vh}.gallery-archive{padding:90px 24px}.gallery-archive-heading{grid-template-columns:1fr;gap:40px}.album-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-directory-card,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 1}.album-directory-card:nth-child(3n+1){grid-column:span 2}.album-directory-cover{min-height:320px}.gallery-page-scroll{right:24px;bottom:28px}}
@media(max-width:600px){.gallery-page-hero{min-height:680px}.gallery-page-hero-copy{margin-bottom:92px}.gallery-page-hero h1{font-size:clamp(54px,15.6vw,78px)}.gallery-page-hero-copy>p:last-child{font-size:13px}.gallery-archive-heading{display:block;padding-bottom:36px}.gallery-archive-heading h2{margin-top:28px}.gallery-archive-heading>p{margin-top:26px;font-size:13px}.gallery-search{padding:12px}.gallery-search span{display:none}.gallery-mode-tabs{overflow-x:auto;padding-bottom:20px}.gallery-mode-tabs button{white-space:nowrap}.album-directory-grid{grid-template-columns:1fr}.album-directory-card,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 1}.album-directory-cover{min-height:300px}.album-open{opacity:1;transform:none}.gallery-page-cta{min-height:440px}.gallery-page-cta h2{font-size:clamp(51px,15vw,74px)}.gallery-footer{flex-wrap:wrap}.album-overlay{padding:18px}.album-overlay-media{height:58vh}.album-overlay-head h2{font-size:32px}.album-overlay-foot strong{font-size:18px}}

/* ---------- contact.css ---------- */
@media (max-width: 600px) {
  .contact-page .public-hero h1 {
    max-width: 340px;
    font-size: clamp(46px, 12.6vw, 56px);
    line-height: .9;
  }
}

/* ---------- watermark-logo.css ---------- */
.album-watermark-image {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  display: block;
  width: min(37%, 180px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .78);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  pointer-events: none;
  user-select: none;
}

.album-watermark-image.watermark-cover {
  inset: auto;
  right: 14px;
  bottom: 14px;
  transform: none;
}

.album-watermark-image.watermark-overlay {
  inset: auto;
  right: 22px;
  bottom: 22px;
  transform: none;
}

.album-overlay-media .album-watermark-image {
  width: min(31%, 240px);
  max-height: 88px;
  background: rgba(255, 255, 255, .84);
}

.album-watermark-tile {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: 4px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.album-watermark-tile-image {
  display: block;
  height: auto;
  max-width: 90%;
  object-fit: contain;
  padding: 4px 5px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}

.album-watermark-tile-text {
  display: block;
  max-width: 90%;
  overflow: hidden;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
  transform: rotate(-24deg);
}

@media (max-width: 600px) {
  .album-watermark-image.watermark-cover { right: 12px; bottom: 12px; }
  .album-watermark-image.watermark-overlay { right: 12px; bottom: 12px; }
  .album-watermark-image { width: min(44%, 150px); padding: 6px 8px; }
  .album-overlay-media .album-watermark-image { width: min(45%, 170px); }
}

/* ---------- widok pojedynczego albumu ----------------------------------- */
/* W wersji React ta strona była zbudowana na Tailwindzie, którego tutaj nie ma.
   Odtworzona w tym samym języku wizualnym: mono-etykiety, zero zaokrągleń, ink/mist. */
.album-page { min-height: 100vh; min-height: 100svh; background: var(--mist); color: var(--ink); }
.album-page .site-header { position: relative; background: var(--ink); }
.album-page-head { padding: 118px 8vw 0; }
.album-page-head h1 { max-width: 15ch; margin: 22px 0 0; font: 600 clamp(52px, 7vw, 108px)/.88 var(--font-display); letter-spacing: -.07em; }
.album-page-head h1 em { font-style: normal; color: var(--accent); }
.album-page-lead { max-width: 60ch; margin: 26px 0 0; color: rgba(17,23,25,.68); font-size: 16px; line-height: 1.8; }
.album-page-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 44px; padding: 16px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); color: rgba(17,23,25,.6); font: 500 10px/1 var(--font-mono); letter-spacing: .1em; }
.album-page-strip svg { color: var(--red); flex: 0 0 auto; }
.album-page-strip span { margin-left: auto; color: var(--red); }
.album-page-film { padding: 42px 8vw 0; }
.album-page-film video, .album-page-film iframe { display: block; width: 100%; max-height: 74vh; aspect-ratio: 16/9; border: 0; background: var(--ink); }
.album-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 44px 8vw 110px; }
.album-page-grid figure { margin: 0; overflow: hidden; background: var(--ink); }
.album-page-grid img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; user-select: none; transition: transform .5s cubic-bezier(.23,1,.32,1); }
.album-page-grid figure:hover img { transform: scale(1.04); }
.album-page-empty { grid-column: 1 / -1; padding: 60px 24px; border: 1px dashed var(--line-dark); text-align: center; color: rgba(17,23,25,.6); font-size: 14px; }
@media (max-width: 900px) {
  .album-page-head { padding: 60px 24px 0; }
  .album-page-film { padding: 32px 24px 0; }
  .album-page-grid { grid-template-columns: repeat(2, 1fr); padding: 32px 24px 80px; }
}
@media (max-width: 600px) {
  .album-page-grid { grid-template-columns: 1fr; }
  .album-page-strip span { margin-left: 0; width: 100%; }
}

/* Atrybut hidden musi wygrać z display:grid — inaczej lightbox wisi otwarty. */
.lightbox[hidden] { display: none; }

/* ---------- cele dotykowe i czytelność mikro-etykiet -------------------- */
/* Oryginalny projekt był robiony pod kursor: przycisk menu miał 32×27 px,
   a odnośniki w stopce 15 px wysokości. Palec potrzebuje ok. 44 px.
   Zmieniamy WYŁĄCZNIE obszar klikalny — typografia i układ zostają. */
.menu-button { width: 44px; height: 44px; margin-right: -8px; }
.site-footer a, .site-footer button { min-height: 44px; padding-block: 6px; }
.footer-panel { padding: 12px 14px; }

/* Najdłuższe polskie słowa w nagłówkach wyświetlaniowych — „Porozmawiajmy”,
   „rozpoznanie.”, „jednostkę”, „wysokości.” — są przy DOLNEJ granicy clamp()
   szersze niż ekran 320 px i wypychają całą sekcję w bok. Ponieważ granica
   dolna wygrywała z częścią vw, samo zmniejszanie vw nic nie dawało.
   Poniżej 420 px każdy z tych nagłówków dostaje własną, niższą granicę.
   Wartości policzone z pomiaru szerokości najszerszego słowa, zapas ~10%. */
@media (max-width: 420px) {
  .contact-page .public-hero h1 { font-size: clamp(32px, 11vw, 53px); }
  .services-process h2 { font-size: clamp(36px, 13vw, 57px); }
  .services-cta h2     { font-size: clamp(32px, 11vw, 54px); }
  .gallery-page-cta h2 { font-size: clamp(36px, 12.5vw, 63px); }
  .contact-main h2     { font-size: clamp(40px, 15vw, 63px); }
}

/* Filtry galerii to przyciski, nie podpisy — na telefonie muszą dać się trafić. */
@media (max-width: 600px) {
  .filter-chip { font-size: 10px; padding: 11px 12px; min-height: 44px; }
  .origin-label { font-size: 10px; }
  .gallery-mode-tabs button { min-height: 44px; }
}

/* Widoczny fokus klawiatury na wszystkim, co klikalne w stopce i nawigacji. */
.site-footer a:focus-visible, .site-footer button:focus-visible,
.menu-button:focus-visible, .filter-chip:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* Rozwinięte menu mobilne: linki miały 27 px wysokości. Powiększamy obszar
   klikalny do 44 px i zmniejszamy odstęp, żeby wysokość listy została podobna. */
@media (max-width: 900px) {
  .main-nav { gap: 6px; }
  .main-nav a, .main-nav button { display: flex; align-items: center; min-height: 44px; padding: 8px 0; width: 100%; }
}

/* Linki menu na desktopie miały 26 px wysokości. Nagłówek ma 84 px, więc 40 px
   mieści się bez zmiany układu, a na tablecie z dotykiem da się w nie trafić. */
.main-nav a, .main-nav button { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- utrudnienie kopiowania zdjęć -------------------------------- */
/* -webkit-touch-callout wyłącza menu „Zapisz obraz” po długim przytrzymaniu
   na iOS — bez tego całe blokowanie prawego przycisku nic na telefonie nie daje. */
.gallery-card img,
.album-page-grid img,
.album-directory-cover img,
.lightbox-image-wrap img,
.managed-album-card img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Przezroczysta warstwa nad zdjęciem: „Zapisz obraz jako…” trafia w nią,
   a nie w plik. Klikalność zostaje, bo warstwa nie łapie zdarzeń wskaźnika. */
/* W siatce BEZ powiększania warstwa może leżeć na całym kafelku. */
.album-page-grid:not(.is-zoomable) figure { position: relative; }
.album-page-grid:not(.is-zoomable) figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}
/* W siatce Z powiększaniem warstwa musi być WEWNĄTRZ przycisku. Umieszczona na
   figure przechwytywała kliknięcie i lightbox nigdy się nie otwierał — pod
   kursorem zamiast przycisku był pseudoelement figure. Jako dziecko przycisku
   nadal przejmuje „Zapisz obraz jako…”, a kliknięcie bąbelkuje do przycisku. */
.album-page-grid.is-zoomable .album-zoom { position: relative; }
.album-page-grid.is-zoomable .album-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

/* Powiększanie zdjęć w albumie — przycisk musi być niewidoczny jako przycisk. */
.album-page-grid .album-zoom { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.album-page-grid .album-zoom img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.album-page-grid .album-zoom:focus-visible { outline:2px solid var(--red); outline-offset:3px; }


/* ==========================================================================
   Poprawki mobilne — wszystkie z pomiaru w przeglądarce, nie z oceny na oko.
   ========================================================================== */

/* --- Telefon w orientacji poziomej ---------------------------------------
   Nagłówki mają min-height 670–780 px, a ekran w poziomie ma ~360 px. Stała
   w pikselach wygrywa z height:100svh, więc obraz zajmował dwa ekrany, zanim
   pojawiła się jakakolwiek treść: H1 strony głównej kończył się na 513 px.
   Przy niskim oknie wysokość ma wynikać z okna. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero,
  .public-hero,
  .services-hero,
  .gallery-page-hero { min-height: 340px; }
  .hero-content,
  .public-hero-copy,
  .services-hero-content,
  .gallery-page-hero-copy { margin-bottom: 30px; }
  .scroll-cue,
  .services-scroll,
  .gallery-page-scroll { bottom: 14px; }

  /* Lightbox jest position:fixed, więc treść, która nie mieści się w oknie,
     jest nieosiągalna — nie ma czego przewinąć. Zmierzone przy 740x360:
     tytuł zdjęcia i OBIE strzałki leżały na 375–413 px, czyli poza ekranem,
     a strzałki to jedyny sposób przechodzenia między zdjęciami.
     Zdjęcie ustępuje miejsca sterowaniu, a całość może się przewinąć. */
  .lightbox { padding: 10px 14px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  .lightbox-image-wrap { height: 46svh; }
  .lightbox-foot { padding-top: 8px; }
  .album-overlay { padding: 10px 14px; align-content: start; overflow-y: auto; }
  .album-overlay-media { height: 46svh; }
}

/* --- Ekran dotykowy -------------------------------------------------------
   Reguły oparte na szerokości nie obejmowały tabletów: przy 700 px przycisk
   „Otwórz album” i lupa powiększenia miały opacity:0 i pojawiały się dopiero
   po najechaniu myszą, której na tablecie nie ma. Warunek (hover: none)
   trafia w każde urządzenie dotykowe niezależnie od szerokości. */
@media (hover: none) {
  .album-open,
  .expand-control { opacity: 1; transform: none; }
}

/* --- Cele dotykowe --------------------------------------------------------
   Zmierzone przy 390 px. Wszystkie poniżej zalecanych 44 px; ikony społeczne
   i strzałki lightboxa dodatkowo dzieliło tylko 6–7 px. Powiększany jest
   wyłącznie obszar klikalny — położenie i wygląd zostają.
   Warunek jest podwójny: szerokość łapie stare przeglądarki bez (hover),
   a (hover: none) łapie tablety, które przy 768–1024 px w regułę szerokości
   już nie wchodzą, a palec mają dokładnie ten sam. */
@media (max-width: 900px), (hover: none) {
  .brand { min-height: 44px; }
  .filter-chip { min-height: 44px; }
  .gallery-mode-tabs button { min-height: 44px; }
  .play-reel { min-height: 44px; }
  .contact-link { min-height: 44px; }
  .socials { gap: 10px; }
  .socials a { width: 44px; height: 44px; }
  .scroll-cue,
  .services-scroll,
  .gallery-page-scroll { width: 44px; height: 44px; }
  .lightbox-head button,
  .lightbox-controls button { width: 44px; height: 44px; }
  .lightbox-controls { gap: 10px; }
  .main-nav a,
  .main-nav button { min-height: 44px; }
  .filter-bar { gap: 8px; }
  .gallery-mode-tabs { gap: 8px; }
}

/* Trzy zakładki rodzaju albumu nie mieszczą się w 320 px i trzecia chowa się
   w przewijaniu poziomym bez żadnej zapowiedzi. Przy najwęższych ekranach
   lepiej, żeby się zawinęły — wtedy widać wszystkie. */
@media (max-width: 420px) {
  .gallery-mode-tabs { flex-wrap: wrap; overflow-x: visible; padding-bottom: 12px; }
  .gallery-mode-tabs button { white-space: normal; }
}

/* Adres e-mail i nazwa marki pochodzą z ustawień w panelu, więc mogą być dowolnie
   długie, a to jeden ciąg bez spacji — bez zgody na łamanie w środku wypchnąłby
   kartę kontaktową poza ekran. */
.contact-card a,
.contact-card > span,
.contact-note { overflow-wrap: anywhere; }

/* Tytuł albumu pochodzi z panelu, więc może być dowolnie długi. Bez zejścia
   na wąskim ekranie jedno dłuższe słowo wypycha całą stronę albumu w bok. */
@media (max-width: 420px) {
  .album-page-head h1 { font-size: clamp(30px, 11vw, 52px); }
}


/* Na ekranie dotykowym cursor:zoom-in jest niewidzialny, więc nic nie zapowiada,
   że zdjęcie w albumie się powiększa. Pseudoelement ::after trzyma już warstwę
   antykopiującą, dlatego znacznik siada na ::before. */
@media (hover: none) {
  .album-page-grid.is-zoomable .album-zoom::before {
    content: "";
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10, 16, 17, .58) center / 15px 15px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eff0eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  }
}


/* ==========================================================================
   Uwagi właściciela: sygnet, PL/EN, dane firmy, Aktualności, zdjęcie w tle
   ========================================================================== */

/* Zdjęcie wybrane w panelu zamiast filmu — te same reguły co dla <video>,
   żeby arkusz nie musiał wiedzieć, które z nich wylądowało w nagłówku. */
.public-hero > img,
.gallery-page-hero > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #10191b; }

/* Sygnet 3×3 ze znaków kodu sygnałowego na białej podkładce z białym marginesem —
   sam SVG nie ma tła, a na ciemnym nagłówku znak ma czytać się jak plakietka. */
.brand-mark { box-sizing: border-box; padding: 3px; border-radius: 5px; background: #fff; }
/* LOGO (11.09.2026): plik właściciela 1:1 (czarna plakieta 976×284, biel i lazur) — bez przeróbek,
   ta sama plakieta na każdej stronie i w stopce; skalujemy tylko wysokość. */
.brand-logo { display: block; height: var(--logo-h, 46px); width: auto; transform: translate(var(--logo-dx, 0px), var(--logo-dy, 0px)); }   /* wysokość i przesunięcie z Ustawień → Logo (zmienne wstrzykuje sk_blx_logo) */
/* LOGO „SYGNET + NAPIS" (12.09.2026): sygnet z pliku + dwie linie tekstu w wybranej czcionce. Napis bierze
   kolor nagłówka (biały na hero, tusz na papierze i w stopce), rozmiary liter liczone z wysokości logo. */
.brand-logo--zestaw { display: flex; align-items: center; gap: calc(var(--logo-h, 46px) * .26); width: auto; }
.brand-logo__sygnet { display: block; height: 100%; width: auto; }
.brand-logo__napis { display: flex; flex-direction: column; justify-content: center; font-family: var(--logo-font, inherit); color: currentColor; line-height: 1.05; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.brand-logo__napis b { font-size: calc(var(--logo-h, 46px) * .43); font-weight: 700; }
.brand-logo__napis small { font-size: calc(var(--logo-h, 46px) * .235); font-weight: 400; opacity: .85; margin-top: .14em; }
.footer-brand .brand-logo { width: auto; height: var(--logo-stopka-h, calc(var(--logo-h, 46px) * .74)); padding: 0; border-radius: 0; background: none; transform: none; }   /* nadpisuje 24×24 i białą ramkę sygnetu; bez przesunięcia — to ustawienie nagłówka; własna wysokość stopki z Ustawień */
.footer-brand .brand-logo--zestaw { gap: calc(var(--logo-h, 46px) * .2); }
.footer-brand .brand-logo__napis b { font-size: calc(var(--logo-h, 46px) * .32); }
.footer-brand .brand-logo__napis small { font-size: calc(var(--logo-h, 46px) * .18); }
/* SOCIAL W STOPCE (11.09.2026): okrągłe ikony w kolorze tuszu, na najechaniu wermilion jak numery w menu.
   Kółka 36 px = wygodny cel dotyku; SVG dziedziczy kolor, więc jeden zestaw ścieżek na oba stany. */
.footer-social { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--ink); background: transparent; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); outline: 0; }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
/* PRZYCISK „ODTWÓRZ FILM" (18.09.2026): tylko przy prefers-reduced-motion — zamiast po cichu wyłączonego filmu w tle. */
.blx-play { position: absolute; right: max(20px, 3.2vw); bottom: 22px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(6,13,15,.72); color: #fff; font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); }
.blx-play:hover, .blx-play:focus-visible { background: var(--red); border-color: var(--red); outline: 0; }
.blx-play span { font-size: 10px; }
@media (max-width: 900px) { .brand-logo { height: calc(var(--logo-h, 46px) * .87); } .footer-brand .brand-logo { height: calc(var(--logo-stopka-h, calc(var(--logo-h, 46px) * .74)) * .88); } }
@media (max-width: 600px) { .brand-logo { height: calc(var(--logo-h, 46px) * .74); transform: translate(calc(var(--logo-dx, 0px) * .5), calc(var(--logo-dy, 0px) * .5)); } }
.footer-brand img { box-sizing: border-box; padding: 2px; border-radius: 4px; background: #fff; }

/* Przełącznik PL/EN w nagłówku — PRZYCISK DWUSTANOWY (24.09.2026, „zrób aktywny przycisk"). Wcześniej był to sam tekst
   „PL / EN" z drugim językiem przygaszonym do 62 % — na jasnym niebie zdjęcia EN wyglądało jak wyłączone. Teraz:
   bieżący język = podświetlony segment (mgła + atrament, jak „Wejdź na pokład", kontrast ~16:1), drugi = biały napis
   na przyciemnionym tle (≥ 5:1 także na jasnym zdjęciu) z podświetleniem po najechaniu. Całość 44 px wysokości. */
.lang-switch { display: inline-flex; align-items: stretch; gap: 0; padding: 2px; border: 1px solid rgba(247, 247, 243, .55); background: rgba(17, 23, 25, .55); font: 600 11px/1 var(--font-mono); letter-spacing: .1em; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; padding: 0 8px; color: #fff; text-decoration: none; cursor: pointer; transition: background .18s, color .18s; }
.lang-switch a:hover { background: rgba(247, 247, 243, .2); }
.lang-switch a[aria-current] { background: var(--mist); color: var(--ink); cursor: default; }
.lang-switch span { display: none; }
@media (max-width: 900px) {
  .lang-switch { margin-left: auto; margin-right: 4px; }
}

/* NAGŁÓWEK W JEDNEJ LINII (24.09.2026). Pozycje menu, PL/EN i „Wejdź na pokład" nigdy się nie łamią — między 901
   a ~1200 px „STRONA GŁÓWNA", „O NAS", „NASZE USŁUGI" szły na dwie linie, a CTA na trzy (przełącznik PL/EN zabrał
   ~100 px, ale łamało się już wcześniej, od ~1080 px w dół). Pomiar pasa w jednej linii: strona główna 1185 px
   układu, pozostałe 1130, angielskie ~1040; + pasek przewijania Windows ~17 px → do 1240 px hamburger, ten sam co na
   telefonie (reguły z @media ≤900 px w linii 132), a CTA zostaje widoczne obok przełącznika. site.js zamyka menu
   od (min-width: 1241px). */
.main-nav a, .header-cta, .lang-switch { white-space: nowrap; }
.brand, .header-cta, .lang-switch { flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1240px) {
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; padding: 18px 3.2vw 22px; background: var(--ink); border-top: 1px solid var(--line-light); display: none; flex-direction: column; align-items: flex-start; gap: 17px; }
  .main-nav.is-open { display: flex; }
  .main-nav button, .main-nav a { font-size: 11px; }
  .menu-button { display: grid; place-items: center; order: 2; margin-left: 12px; }
  .header-cta { order: 1; }
  .lang-switch { margin-left: auto; margin-right: 12px; }
}

/* Dane rejestrowe firmy i partner w stopce — osobny wiersz pod paskiem. */
.site-footer { flex-wrap: wrap; }
.footer-legal { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.28); font: 500 9px/1.6 var(--font-mono); letter-spacing: .06em; opacity: .78; }
.footer-legal a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: inherit; text-decoration: none; }
/* Telefon i e-mail w stopce to cele dotykowe — na ekranie dotykowym rosna do 44 px. */
@media (max-width: 900px), (hover: none) {
  .footer-legal a { min-height: 44px; }
  .footer-legal { gap: 0 14px; }
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* Partner na stronie O nas. */
/* Blok, nie flex: w rzedzie flex fragmenty zdania (tekst, odsylacz, tekst) sa osobnymi
   elementami i nie lamia sie do nowej linii — przy 320 px wystawaly 34 px poza ekran. */
.public-partner { position: relative; display: block; margin-top: 8px; padding: 14px 16px 14px 44px; border: 1px solid var(--line-dark); font-size: 14px; line-height: 1.6; }
.public-partner svg { position: absolute; left: 16px; top: 16px; color: var(--red-ink); }
.public-partner a { color: var(--red-ink); font-weight: 700; }
/* Odsylacz w zdaniu ma 19 px wysokosci — obszar dotyku rosnie bez zmiany ukladu. */
.public-partner a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }

/* Aktualności: opis po lewej, oś czasu Facebooka po prawej. Wtyczka ma
   sztywne 500 px szerokości i sama dopasowuje się do węższego kontenera. */
.news-feed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 8vw; align-items: start; padding: 120px 12vw; background: var(--paper); }
.news-feed-copy h2 { margin: 22px 0 18px; font: 600 clamp(44px, 5vw, 84px)/.9 var(--font-display); letter-spacing: -.06em; }
.news-feed-copy h2 em { color: var(--red-ink); font-style: normal; font-weight: 400; }
.news-feed-copy > p { max-width: 460px; margin: 0; color: rgba(17,23,25,.68); font-size: 16px; line-height: 1.8; }
.news-feed-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 14px 18px; background: var(--ink); color: var(--mist); font: 500 11px/1 var(--font-mono); letter-spacing: .07em; text-decoration: none; }
.news-feed-extra { margin-top: 28px; }
.news-feed-embed { width: 100%; max-width: 520px; justify-self: end; }
.news-feed-embed iframe { display: block; width: 100%; max-width: 500px; background: #fff; }
.news-feed-note { margin: 12px 0 0; color: rgba(17,23,25,.55); font-size: 12px; line-height: 1.6; }
@media (max-width: 900px) {
  .news-feed { grid-template-columns: 1fr; gap: 40px; padding: 80px 24px; }
  .news-feed-embed { justify-self: start; }
}

/* ==========================================================================
   Kłódka w stopce — wejście w edycję tej strony (wzorzec z silnika Reactor)
   ==========================================================================
   Dyskretna, dopóki nikt nie jest zalogowany; dla administratora w pełnym
   kryciu, bo dla niego jest to codzienny przycisk, a nie ozdoba. */
/* Stały kwadrat, nie padding wokół ikony: stopka narzuca własną wysokość i kłódka
   wychodziła owalna (32x44). 44 px to zarazem cel dotykowy. */
.blx-klodka{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;
  border:0;border-radius:50%;background:transparent;color:inherit;opacity:.4;cursor:pointer;
  transition:opacity .15s,background-color .15s,color .15s}
.blx-klodka:hover,.blx-klodka:focus-visible{opacity:1;background:var(--red);color:#111719}
.blx-klodka.is-admin{opacity:1;background:var(--red);color:#111719}
.blx-klodka.is-admin:hover{filter:brightness(1.12)}
/* Cel dotykowy: palec potrzebuje więcej niż kursor. */

.blx-klodka-tlo{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:20px;
  background:rgba(8,12,13,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.blx-klodka-tlo[hidden]{display:none}
.blx-klodka-okno{position:relative;width:100%;max-width:340px;padding:26px;background:#101718;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:left}
.blx-klodka-naglowek{display:flex;align-items:center;gap:9px;margin:0 0 6px;color:var(--red);
  font:600 15px/1.2 var(--font-mono);letter-spacing:.04em}
.blx-klodka-lead{margin:0 0 18px;color:#93a3a2;font-size:13px;line-height:1.5}
.blx-klodka-okno label{display:block;margin-bottom:12px}
.blx-klodka-okno label span{display:block;margin-bottom:6px;color:#8fa0a0;font:500 10px/1 var(--font-mono);letter-spacing:.1em}
.blx-klodka-okno input{width:100%;min-height:44px;padding:11px 13px;box-sizing:border-box;background:#0c1213;
  border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#eff0eb;font-size:14px}
.blx-klodka-okno input:focus{outline:2px solid var(--red);outline-offset:-2px}
.blx-klodka-wejdz{width:100%;min-height:46px;margin-top:6px;border:0;border-radius:9px;background:var(--red);
  color:#111719;font:600 12px/1 var(--font-mono);letter-spacing:.08em;cursor:pointer}
.blx-klodka-wejdz:hover{filter:brightness(1.12)}
.blx-klodka-zamknij{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;
  padding:0;border:0;border-radius:8px;background:transparent;color:#8fa0a0;cursor:pointer}
.blx-klodka-zamknij:hover{background:#16211f;color:#eff0eb}

/* Odsłanianie kart albumów na stronie Galeria (9.09.2026). Ukrycie działa tylko pod html.blx-js
   (dokłada site.js, gdy ruch jest dozwolony); --i = numer karty w rzędzie → schodkowe opóźnienie. */
html.blx-js .album-directory-card:not(.blx-in){opacity:0;transform:translateY(22px)}
.album-directory-card{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.album-directory-card.blx-in{opacity:1;transform:none}
.album-directory-cover img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.album-directory-cover:hover img{transform:scale(1.04)}
.album-open{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}

/* POPRAWKI Z PRZEGLĄDU (10.09.2026) */

/* `[hidden]` musi wygrywać z `display:grid`. Wyszukiwarka statków ustawia `directory.hidden`,
   gdy nic nie pasuje, ale reguła klasy `.album-directory-grid{display:grid}` bije domyślne
   `[hidden]{display:none}` z arkusza przeglądarki — pusta siatka zostawała i wpychała pudełko
   „nie znaleziono statku” półtora ekranu w dół. Ta sama pułapka co w panelu. */
[hidden]{display:none!important}

/* WYDRUK I OGRANICZONY RUCH. Odsłanianie kart opiera się na obserwatorze przecięcia, a ten nie
   zgłasza niczego, co jest poza widokiem — przy drukowaniu strony Galeria wszystkie karty poniżej
   pierwszego ekranu wyszłyby PUSTE. Tu i przy „ogranicz ruch” pokazujemy wszystko od razu. */
@media print{
  html.blx-js .album-directory-card:not(.blx-in){opacity:1!important;transform:none!important}
  .album-directory-card{transition:none!important}
}
@media (prefers-reduced-motion: reduce){
  html.blx-js .album-directory-card:not(.blx-in){opacity:1;transform:none}
  .album-directory-card,.album-directory-cover img,.album-open{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   GALERIA: WĄSKI HERO, MOZAIKA CZTERECH ALBUMÓW W RZĘDZIE, ZAKŁADKI KATEGORII (10.09.2026)
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── HERO STRONY GALERIA: pas ze zdjęciem, bez tekstu ──
   Pełnoekranowy hero (100svh) spychał listę albumów pod zgięcie: wchodząc na „Galerię" widziało
   się wszystko poza galerią. Tu hero ma zapowiadać, nie zajmować ekran — zostaje sam kadr.
   Napisy zdejmuje sk_blx_hero_galerii() w modules/gallery.php (usuwa je z HTML, a nie chowa:
   ukryty nagłówek zostawałby w drzewie dostępności i w wynikach wyszukiwania). */
.gallery-page-hero--pas{min-height:0;height:clamp(200px,26vh,320px);align-items:stretch}
.gallery-page-hero--pas>img,.gallery-page-hero--pas>video{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;background:var(--ink)}
.gallery-page-hero--pas .gallery-page-hero-shade{background:linear-gradient(0deg,rgba(8,15,16,.55),rgba(8,15,16,.12) 60%)}
@media(max-width:900px){.gallery-page-hero--pas{min-height:0;height:clamp(150px,22vh,220px)}}

/* ── ZAKŁADKI KATEGORII ──
   Zakładek bywa teraz kilka (kategorie klienta), więc pasek musi się łamać zamiast rozpychać
   stronę, a licznik przy nazwie mówi, ile albumów kryje się pod zakładką. */
.gallery-mode-tabs{flex-wrap:wrap}
.gallery-mode-tabs button span{margin-left:7px;color:var(--red-ink);font-variant-numeric:tabular-nums}
.gallery-mode-tabs button.active span{color:inherit;opacity:.72}

/* ── MOZAIKA ALBUMÓW: cztery w rzędzie + co piąty szeroki ──
   Dwie karty w rzędzie dawały okładki wysokie na pół ekranu: przewijało się album po albumie
   zamiast widzieć archiwum. Cztery kolumny pokazują cały zestaw naraz, a co piąta karta szeroka
   na dwie kolumny łamie rytm, żeby siatka nie wyglądała jak arkusz kalkulacyjny.
   Klasę `is-wide` nadaje site.js PO odfiltrowaniu — `nth-child` liczyłby także karty ukryte
   filtrem i rytm rozjeżdżałby się przy każdym kliknięciu w kategorię.
   `dense` domyka dziury, gdy szeroka karta nie mieści się w resztce rzędu. */
.album-directory-grid{grid-auto-flow:dense;gap:14px 14px}
.album-directory-card,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 3}
.album-directory-card.is-wide{grid-column:span 6}
.album-directory-cover{min-height:0;aspect-ratio:4/5}
.album-directory-card.is-wide .album-directory-cover{aspect-ratio:16/9}
.album-directory-info{padding-top:13px}
.album-directory-info h3{margin:9px 0 7px;font-size:clamp(21px,1.7vw,29px);letter-spacing:-.05em}
.album-directory-card.is-wide .album-directory-info h3{font-size:clamp(27px,2.5vw,42px)}
/* Opis do dwóch wierszy: przy czterech kolumnach różne długości opisów rozjeżdżały dolną krawędź
   rzędu i karty przestawały trzymać wspólną linię. */
.album-directory-info p{font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.album-directory-card.is-wide .album-directory-info p{-webkit-line-clamp:3;font-size:14px}
.album-directory-top,.album-directory-count{font-size:9.5px}
.album-open{padding:9px 11px;font-size:9.5px}
@media(max-width:1400px){
  .album-directory-card,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 4}
  .album-directory-card.is-wide{grid-column:span 8}
}
@media(max-width:1080px){
  .album-directory-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .album-directory-card,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 6}
  .album-directory-card.is-wide{grid-column:span 12}
  .album-directory-cover{aspect-ratio:3/2}
}
@media(max-width:640px){
  .album-directory-card,.album-directory-card.is-wide,.album-directory-card:nth-child(3n+1),.album-directory-card:nth-child(3n+2){grid-column:span 12}
  .album-directory-cover,.album-directory-card.is-wide .album-directory-cover{aspect-ratio:4/3}
}
/* Tytuł archiwum awansował z h2 na h1 (patrz sk_blx_hero_galerii) — styl musi iść za znacznikiem,
   inaczej największy nagłówek strony spadłby do domyślnego kroju przeglądarki. */
.gallery-archive-heading h1{margin:0;font:600 clamp(66px,8vw,130px)/.86 var(--font-display);letter-spacing:-.07em;color:var(--ink)}
.gallery-archive-heading h1 em{color:var(--accent);font-style:normal;font-weight:400}
@media(max-width:900px){.gallery-archive-heading h1{font-size:clamp(56px,11vw,90px)}}
@media(max-width:600px){.gallery-archive-heading h1{font-size:clamp(46px,13vw,72px);margin-top:28px}}

/* ═══════════════ POPRAWKI Z PRZEGLĄDU STRONY (10.09.2026, druga tura) ═══════════════ */

/* ── MENU NA STRONIE ALBUMU ──
   Nagłówek jest pomyślany jako warstwa NA CIEMNYM kadrze: biały tekst, przezroczyste tło,
   pozycjonowanie absolutne. Strona albumu nie ma hero — biały nagłówek lądował na papierowym
   tle i po prostu znikał (menu było na stronie, tylko niewidoczne). Tutaj przestaje być
   warstwą i staje się zwykłym paskiem w kolorze atramentu na papierze. */
/* CIEMNY PASEK MENU NA STRONACH GALERII (12.09.2026, na życzenie właściciela): ten sam atrament,
   co pod nagłówkiem na stronie głównej — logo z białym napisem (przezroczyste tło) jest wtedy
   czytelne tak samo w galerii i w albumach, a witryna ma jeden kolor paska na każdej stronie.
   Pasek nadal jest zwykłym elementem w przepływie (nie warstwą nad hero), więc treść zaczyna się pod nim. */
.portfolio-gallery-page>.site-header{position:relative;height:auto;min-height:72px;padding:0 max(24px,3.2vw);color:var(--mist);background:var(--ink);border-bottom:1px solid var(--line-light)}
.portfolio-gallery-page .brand,.portfolio-gallery-page .menu-button{color:var(--mist)}
.portfolio-gallery-page .main-nav a{color:var(--mist)}
.portfolio-gallery-page .main-nav a:hover{opacity:.7}
.portfolio-gallery-page .main-nav span{color:var(--red)}
/* Przycisk kontaktu na ciemnym pasku jest jasny — odwrotność tła, jak na stronie głównej. */
.portfolio-gallery-page .header-cta{background:var(--mist);color:var(--ink)}
.portfolio-gallery-page .header-cta:hover{background:#fff}
@media(max-width:900px){
  /* Szuflada mobilna w tym samym atramencie, co pasek — jasny tekst na ciemnym. */
  .portfolio-gallery-page .main-nav{top:100%;background:var(--ink);border-top:1px solid var(--line-light)}
  .portfolio-gallery-page .main-nav a{color:var(--mist)}
}

/* ── NAGŁÓWEK NAD LISTĄ ALBUMÓW: MNIEJ MIEJSCA NA NAPISY ──
   „Każda podróż. Osobny album." w skali hero (do 130 px) zjadało cały ekran przed pierwszą
   okładką — na stronie, po którą przychodzi się OGLĄDAĆ, tytuł ma zapowiadać, nie zasłaniać. */
.gallery-archive{padding:clamp(56px,6vw,88px) 8vw}
.gallery-archive-heading{padding-bottom:34px;align-items:end}
.gallery-archive-heading h1{font-size:clamp(34px,3.6vw,58px);letter-spacing:-.05em;line-height:.94}
.gallery-archive-heading>p{max-width:420px;font-size:14px;line-height:1.7}
.gallery-archive-heading .eyebrow{margin-bottom:14px}
@media(max-width:900px){
  .gallery-archive{padding:56px 24px}
  .gallery-archive-heading h1{font-size:clamp(30px,7vw,44px)}
}

/* ── ZDJĘCIA POD OCHRONĄ NA CAŁEJ STRONIE ──
   Bez przeciągania do pulpitu, bez zaznaczania, bez menu „Zapisz obrazek" z długiego
   przytrzymania na telefonie (to ostatnie to `-webkit-touch-callout`, najczęstsza droga
   do pobrania zdjęcia na komórce — i jedyna, której wcześniej nic nie blokowało).
   Uczciwie: to bariera przed wygodnym pobraniem, nie ochrona przed kimś zdeterminowanym.
   Realną ochroną są znak wodny wypalony w pliku i zamknięty katalog z czystymi oryginałami. */
img,video{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* COOLVETICA — korekta tracku (11.09.2026). Ujemne odstępy liter (−.045…−.07em) były strojone pod
   Space Grotesk; Coolvetica ma ciasny track wbudowany w krój i przy tych wartościach litery się
   sklejały („trzymają" w hero). Jedna korekta na końcu arkusza zamiast przepisywania 23 reguł —
   po ewentualnym powrocie do poprzedniej rodziny wystarczy usunąć ten blok. */
.hero h1, .gallery-heading h2, .about-copy h2, .contact-main h2, .managed-albums-head h2, .services-hero h1,
.services-list-heading h2, .services-process h2, .services-cta h2, .public-hero h1, .public-intro h2, .public-cta h2,
.gallery-page-hero h1, .gallery-archive-heading h1, .gallery-archive-heading h2, .gallery-page-cta h2, .album-page-head h1,
.news-feed-copy h2, .album-overlay-head h2, .contact-card h2 { letter-spacing: -.02em; }
.card-footer h3, .managed-album-card h3, .lightbox-foot h3, .service-card h3, .about-values h3, .contact-card h3,
.album-directory-info h3, .gallery-empty h3, .services-process-list strong, .album-overlay-foot strong, .contact-link { letter-spacing: -.01em; }

/* ══════════════ AKTUALNOŚCI (18.09.2026) — przegląd zamiast jednej cudzej ramki ══════════════
   Kolejność na stronie: hero (niższy) → czerwony pas haseł → kanały (ciemne) → oś czasu Facebooka
   (jasna, z opisem przyklejonym przy przewijaniu) → „Nowe w galerii" (mgła) → wezwanie do kontaktu.
   Sekcje kanałów i albumów dokłada w renderze sk_blx_aktualnosci (modules/gallery.php); hero i oś
   czasu to sekcje z bazy — ich nowy wygląd trzyma sam arkusz, zakres `.news-page`. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hero: strona z aktualnościami ma pokazać treść, nie cały ekran filmu. */
.news-page .public-hero{height:auto;min-height:clamp(520px,66svh,760px);padding-top:clamp(120px,22vh,180px)}
.news-page .public-hero-copy{margin:0 8vw clamp(64px,9vh,96px)}   /* jedna lewa krawędź z sekcjami niżej (8vw) */
.news-page .public-hero h1{font-size:clamp(52px,7vw,112px)}

/* Pas haseł: czerwony, ciągły, jedna prędkość niezależnie od szerokości okna. Dwie identyczne
   „połowy" i przesunięcie o dokładnie połowę toru — bez skoku na złączeniu. */
.news-pas{overflow:hidden;background:var(--red);color:var(--ink);border-block:1px solid rgba(17,23,25,.18)}
.news-pas__tor{display:flex;width:max-content;animation:news-pas 42s linear infinite}
.news-pas__polowa{display:flex;align-items:center;gap:34px;padding:15px 34px 15px 0;font:500 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.news-pas__polowa i{display:block;width:6px;height:6px;background:var(--ink);transform:rotate(45deg)}
@keyframes news-pas{to{transform:translateX(-50%)}}
.news-pas:hover .news-pas__tor{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.news-pas__tor{animation:none}}

/* Kanały: ciemny pas z kartami — każda to jeden odnośnik w całości. */
.news-kanaly{padding:clamp(72px,8vw,120px) 8vw;background:#10191b;color:var(--mist);--accent:var(--red)}
.news-kanaly__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 10vw;align-items:end;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line-light)}
.news-kanaly__head h2{margin:0;font:600 clamp(40px,5vw,84px)/.9 var(--font-display);letter-spacing:-.02em}
.news-kanaly__head h2 em,.news-albumy__head h2 em{font-style:normal;font-weight:400}
.news-kanaly__head h2 em{color:var(--red)}
.news-kanaly__head>p{max-width:440px;margin:0;color:rgba(239,240,235,.72);font-size:15px;line-height:1.75}
.news-kanaly__head .eyebrow{margin-bottom:16px}
.news-kanaly__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.news-kanal{position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:26px 26px 24px;border:1px solid var(--line-light);color:var(--mist);text-decoration:none;background:linear-gradient(180deg,rgba(239,240,235,.04),transparent 60%);transition:border-color .25s,background-color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.news-kanal:hover,.news-kanal:focus-visible{border-color:var(--red);background-color:rgba(255,78,47,.08);transform:translateY(-4px);outline:0}
.news-kanal__nr{color:var(--cyan);font:500 10px/1 var(--font-mono);letter-spacing:.14em}
.news-kanal__ikona{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-top:6px;border:1px solid var(--line-light);border-radius:50%;transition:background-color .25s,border-color .25s,color .25s}
.news-kanal__ikona svg{width:22px;height:22px;fill:currentColor}
.news-kanal:hover .news-kanal__ikona,.news-kanal:focus-visible .news-kanal__ikona{background:var(--red);border-color:var(--red);color:#111719}
.news-kanal strong{margin-top:auto;font:500 clamp(26px,2.2vw,36px)/1 var(--font-display);letter-spacing:-.02em}
.news-kanal__opis{max-width:340px;color:rgba(239,240,235,.68);font-size:14px;line-height:1.7}
.news-kanal__link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.news-kanal__link svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.news-kanal:hover .news-kanal__link svg,.news-kanal:focus-visible .news-kanal__link svg{transform:translate(3px,-3px)}

/* Oś czasu Facebooka: opis przyklejony przy przewijaniu długiej ramki, ramka w „oknie" z adresem profilu. */
.news-page .news-feed{grid-template-columns:minmax(0,1fr) minmax(0,526px);gap:6vw;padding:clamp(72px,8vw,120px) 8vw}   /* 526 = wtyczka 500 + ramka */
.news-page .news-feed-copy{position:sticky;top:96px}
.news-page .news-feed-copy h2{font-size:clamp(40px,5vw,84px)}
.news-page .news-feed-embed{position:relative;max-width:526px;padding:52px 12px 12px;border:1px solid var(--line-dark);background:#fff;box-shadow:0 30px 60px -40px rgba(17,23,25,.45)}
.news-page .news-feed-embed::before{content:attr(data-kanal);position:absolute;top:0;left:0;right:0;height:40px;display:flex;align-items:center;padding:0 16px 0 34px;border-bottom:1px solid var(--line-dark);background:var(--mist);color:rgba(17,23,25,.66);font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-page .news-feed-embed::after{content:"";position:absolute;top:16px;left:16px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,78,47,.14)}
.news-page .news-feed-embed iframe{max-width:none}
.news-page .news-feed-note{margin:12px 4px 2px}

/* Nowe w galerii: trzy ostatnio dodane albumy — karty z katalogu, siatka trzech równych kolumn. */
.news-albumy{padding:clamp(72px,8vw,120px) 8vw;background:var(--mist);border-top:1px solid var(--line-dark)}
.news-albumy__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 10vw;align-items:end;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line-dark)}
.news-albumy__head h2{margin:0;font:600 clamp(40px,5vw,84px)/.9 var(--font-display);letter-spacing:-.02em}
.news-albumy__head h2 em{color:var(--red-ink)}
.news-albumy__head .eyebrow{margin-bottom:16px}
.news-albumy__side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.news-albumy__side p{max-width:440px;margin:0;color:rgba(17,23,25,.68);font-size:15px;line-height:1.75}
.news-albumy__wszystkie{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;background:var(--ink);color:var(--mist);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .25s}
.news-albumy__wszystkie span{color:rgba(239,240,235,.6)}
.news-albumy__wszystkie:hover,.news-albumy__wszystkie:focus-visible{background:var(--red);color:#111719;outline:0}
.news-albumy__wszystkie:hover span,.news-albumy__wszystkie:focus-visible span{color:rgba(17,23,25,.6)}
.news-albumy__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-albumy__grid .album-directory-card,.news-albumy__grid .album-directory-card:nth-child(3n+1),.news-albumy__grid .album-directory-card:nth-child(3n+2){grid-column:auto}
.news-albumy__grid .album-directory-cover{aspect-ratio:4/5}

@media(max-width:1080px){
  .news-page .news-feed{grid-template-columns:1fr;gap:40px}
  .news-page .news-feed-copy{position:static}
  .news-page .news-feed-embed{justify-self:start}
}
@media(max-width:900px){
  .news-kanaly,.news-albumy,.news-page .news-feed{padding:64px 24px}
  .news-kanaly__head,.news-albumy__head{grid-template-columns:1fr;gap:18px;padding-bottom:26px;margin-bottom:26px}
  .news-kanal{min-height:0}
  .news-page .public-hero-copy{margin:0 24px 56px}
}
@media(max-width:760px){
  .news-albumy__grid{grid-template-columns:1fr}
  .news-albumy__grid .album-directory-cover{aspect-ratio:4/3}
  .news-page .public-hero{min-height:clamp(480px,60svh,640px);padding-top:110px}
  /* Oś czasu na telefonie: 1400 px białej ramki to trzy ekrany — wtyczka i tak przewija się w środku. */
  .news-page .news-feed-embed iframe{height:960px}
}

/* ── AKTUALNOŚCI: KAFELKI Z POSTÓW (22.09.2026) ──
   Kafelek to NASZA karta: zdjęcie z posta wypełnia całą powierzchnię (object-fit:cover), tekst leży na
   gradiencie u dołu, cała karta jest odnośnikiem. Do 21.09 stało tu osadzenie z Facebooka — ramka z cudzej
   domeny z białym tłem i marginesami wokół zdjęcia (nie do ostylowania spoza tej domeny).
   Wysokość karty trzyma aspect-ratio, więc rząd jest równy bez liczenia czegokolwiek w JS. */
.news-posty{padding:clamp(72px,8vw,120px) 6vw;background:var(--paper)}
.news-posty__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px 8vw;align-items:end;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line-dark)}
.news-posty__head .eyebrow{grid-area:1/1;margin:0;align-self:end}
.news-posty__head h2{grid-area:2/1;margin:0;font:600 clamp(40px,5vw,84px)/.9 var(--font-display);letter-spacing:-.02em}
.news-posty__head h2 em{color:var(--red-ink);font-style:normal;font-weight:400}
.news-posty__head>p:not(.eyebrow){grid-area:1/2;align-self:end;max-width:440px;margin:0;color:rgba(17,23,25,.68);font-size:15px;line-height:1.75}
.news-posty__head .news-feed-link{grid-area:2/2;justify-self:start;align-self:start;margin:0}
.news-posty__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-post{position:relative;margin:0;overflow:hidden;background:var(--ink);isolation:isolate}
.news-post__l{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;min-height:0;padding:20px;color:var(--mist);text-decoration:none}
.news-post__foto{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Przyciemnienie pod tekstem liczone tak, żeby napis był czytelny także na jasnym niebie i białej
   burcie: od 42% w dół gradient szybko dochodzi do .93, a sam tekst ma jeszcze cień. Zmierzone na
   kafelkach z tej strony — najjaśniejszy piksel pod napisem nie przekracza ~90/255. */
.news-post__cien{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,13,15,.5) 0,rgba(6,13,15,.08) 26%,rgba(6,13,15,.3) 70%,rgba(6,13,15,.55) 100%)}
.news-post--tekst .news-post__cien{background:linear-gradient(180deg,rgba(255,78,47,.16),rgba(6,13,15,.5) 60%,rgba(6,13,15,.85))}
.news-post__gora{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:center;gap:10px}
.news-post__ikona{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;border:1px solid rgba(239,240,235,.45);border-radius:50%;background:rgba(6,13,15,.45);backdrop-filter:blur(6px);transition:background-color .25s,border-color .25s,color .25s}
.news-post__ikona svg{width:14px;height:14px;fill:currentColor}
.news-post__nr{font:500 10px/1 var(--font-mono);letter-spacing:.14em;color:rgba(239,240,235,.82);text-shadow:0 1px 6px rgba(6,13,15,.6)}
/* PRZYCIEMNIENIE PRZY TEKŚCIE, NIE PRZY KARCIE. Gradient rozciągnięty na całą kartę wystarczał przy
   proporcji 4:5, ale na telefonie (4:3) blok tekstu sięga wyżej, w jasne niebo — zmierzone: najjaśniejszy
   piksel pod napisem 145/255, kontrast 3,1:1. Tu przyciemnienie rośnie RAZEM z tekstem, więc trzyma się
   każdej wysokości karty (po zmianie: maks. 52/255, kontrast ≥ 12:1). */
.news-post__dol{position:relative;display:flex;flex-direction:column;gap:12px;margin:0 -20px -20px;padding:30px 20px 20px}
.news-post__dol::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,13,15,0),rgba(6,13,15,.62) 22%,rgba(6,13,15,.88) 46%,rgba(6,13,15,.95) 76%,rgba(6,13,15,.97))}
.news-post__txt{font:500 clamp(15px,1.25vw,17px)/1.45 var(--font-display);letter-spacing:-.01em;text-shadow:0 1px 10px rgba(6,13,15,.75),0 1px 2px rgba(6,13,15,.5);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.news-post--tekst .news-post__txt{-webkit-line-clamp:8;font-size:clamp(17px,1.5vw,21px)}
.news-post__cta{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);text-shadow:0 1px 8px rgba(6,13,15,.7)}
.news-post__cta svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.news-post__l:hover .news-post__foto,.news-post__l:focus-visible .news-post__foto{transform:scale(1.05)}
.news-post__l:hover .news-post__cta svg,.news-post__l:focus-visible .news-post__cta svg{transform:translate(3px,-3px)}
.news-post__l:hover .news-post__ikona,.news-post__l:focus-visible .news-post__ikona{background:var(--red);border-color:var(--red);color:#111719}
.news-post__l:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.news-post__foto,.news-post__cta svg{transition:none}}
@media(max-width:1180px){.news-posty__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .news-posty{padding:64px 24px}
  .news-posty__head{grid-template-columns:1fr;grid-template-rows:none;gap:14px;padding-bottom:26px;margin-bottom:26px}
  .news-posty__head .eyebrow,.news-posty__head h2,.news-posty__head>p:not(.eyebrow),.news-posty__head .news-feed-link{grid-area:auto}
}
@media(max-width:760px){.news-posty__grid{grid-template-columns:1fr;gap:14px}.news-post__l{aspect-ratio:4/3;padding:18px}.news-post__dol{margin:0 -18px -18px;padding:26px 18px 18px}.news-post__txt{-webkit-line-clamp:3}}

/* ── SYGNAŁY ZAUFANIA (19.09.2026): „w liczbach" na O nas, FAQ na Usługach ──
   Sekcje dokładane w renderze (sk_blx_seo_sekcje): liczby z galerii i pól „Sygnały zaufania", partnerzy
   z profilu Schema.org; FAQ jako <details> — ten sam tekst idzie do schematu FAQPage. */
.blx-liczby{padding:clamp(72px,8vw,120px) 8vw;background:var(--mist);color:var(--ink);border-top:1px solid var(--line-dark)}   /* jasny: pod nim ciemne wezwanie do kontaktu */
.blx-liczby__head{max-width:720px;margin-bottom:38px}
.blx-liczby__head h2{margin:0;font:600 clamp(40px,5vw,84px)/.9 var(--font-display);letter-spacing:-.02em}
.blx-liczby__head h2 em{color:var(--red-ink);font-style:normal;font-weight:400}
.blx-liczby__head .eyebrow{margin-bottom:16px}
.blx-liczby__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.blx-liczby__k{padding:24px 24px 22px;border:1px solid var(--line-dark);background:#fff;box-shadow:0 24px 48px -40px rgba(17,23,25,.4)}
.blx-liczby__k strong{display:block;font:600 clamp(40px,4.4vw,72px)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.blx-liczby__k span{display:block;margin-top:10px;font:500 10px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.blx-liczby__partnerzy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-dark)}
.blx-liczby__partnerzy>span{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(17,23,25,.6)}
.blx-liczby__partnerzy ul{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none}
.blx-liczby__partnerzy li{font:500 clamp(18px,1.6vw,24px)/1.2 var(--font-display);letter-spacing:-.01em}
.blx-liczby__partnerzy a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-dark)}
.blx-liczby__partnerzy a:hover,.blx-liczby__partnerzy a:focus-visible{color:var(--red-ink);border-color:var(--red-ink);outline:0}

.blx-faq{padding:clamp(72px,8vw,120px) 8vw;background:var(--paper);color:var(--ink)}
.blx-faq__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 10vw;align-items:end;padding-bottom:34px;margin-bottom:10px;border-bottom:1px solid var(--line-dark)}
.blx-faq__head h2{margin:0;font:600 clamp(40px,5vw,84px)/.9 var(--font-display);letter-spacing:-.02em}
.blx-faq__head h2 em{color:var(--red-ink);font-style:normal;font-weight:400}
.blx-faq__head .eyebrow{margin-bottom:16px}
.blx-faq__head>p{max-width:440px;margin:0;color:rgba(17,23,25,.68);font-size:15px;line-height:1.75}
.blx-faq__p{border-bottom:1px solid var(--line-dark)}
.blx-faq__p summary{display:flex;align-items:baseline;gap:18px;padding:22px 0;cursor:pointer;list-style:none;font:500 clamp(19px,1.7vw,26px)/1.25 var(--font-display);letter-spacing:-.01em}
.blx-faq__p summary::-webkit-details-marker{display:none}
.blx-faq__p summary::after{content:"+";margin-left:auto;flex:0 0 auto;font:400 26px/1 var(--font-display);color:var(--red-ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.blx-faq__p[open] summary::after{transform:rotate(45deg)}
.blx-faq__nr{flex:0 0 auto;font:500 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--red-ink)}
.blx-faq__p p{max-width:760px;margin:0 0 24px 46px;color:rgba(17,23,25,.75);font-size:15px;line-height:1.75}
.blx-faq__p summary:hover span:last-child,.blx-faq__p summary:focus-visible span:last-child{color:var(--red-ink)}
.blx-faq__p summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
@media(max-width:900px){
  .blx-liczby,.blx-faq{padding:64px 24px}
  .blx-faq__head{grid-template-columns:1fr;gap:18px;padding-bottom:26px}
  .blx-faq__p p{margin-left:0}
}

/* ── STRONA GŁÓWNA: ALBUMY Z BAZY (23.09.2026) ──
   Karty buduje sk_blx_polecane_albumy (albumy wybrane w panelu albo najnowsze). Karta z okładką:
   zdjęcie na całej powierzchni, przyciemnienie u dołu pod tytułem (liczone przy tekście — jak kafelki
   Aktualności, żeby napis był czytelny także na jasnym niebie), numer i odnośnik bez zmian względem
   importu. Karta bez okładki zostaje taka jak dotąd (ciemny kafel z ikoną folderu). */
.managed-albums-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.managed-album-card--foto{min-height:340px;isolation:isolate;background:#10191b}
.managed-album-card--foto::before{display:none}
.managed-album-foto{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Przyciemnienie tylko u góry (pod numer) — dół przyciemnia blok tekstu (.managed-album-dol) i rośnie razem
   z nim. Gradient na całą kartę zaciemniał środek zdjęcia: panorama z ciemną wodą u dołu (FORTALEZA
   KNUTSEN, 1993×1000) wyglądała jak zdjęcie „tylko w górnej połowie".
   Narastanie cienia w PIKSELACH, nie w procentach: tekst zaczyna się 44 px od góry bloku i tam cień ma
   już .74 bez względu na długość tytułu. Przy procentach trzywierszowy tytuł (wyższy blok) zaczynał się
   na cieniu ~.5 i na jasnym niebie kontrast spadał do 4,3:1 (zmierzone na produkcji 23.09.2026). */
.managed-album-card--foto::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,13,15,.45) 0,rgba(6,13,15,0) 26%)}
.managed-album-dol{display:flex;flex-direction:column;position:relative;z-index:1}
.managed-album-card--foto .managed-album-dol{margin:0 -22px -22px;padding:44px 22px 22px}
.managed-album-card--foto .managed-album-dol::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,13,15,0) 0,rgba(6,13,15,.74) 40px,rgba(6,13,15,.9) 65%,rgba(6,13,15,.95))}
.managed-album-card--foto:hover{background:#10191b}
.managed-album-card--foto:hover .managed-album-foto{transform:scale(1.05)}
.managed-album-card--foto .managed-album-no{top:18px;left:18px;padding:6px 8px;background:rgba(6,13,15,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}   /* numer czytelny na każdym zdjęciu, także na jasnym niebie i na wypalonym sygnecie */
.managed-album-card--foto h3{text-shadow:0 1px 10px rgba(6,13,15,.6)}
.managed-album-meta{position:relative;z-index:1;margin:-8px 0 14px;font:500 10px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(239,240,235,.72)}
.managed-album-card--foto .managed-album-link{color:var(--mist)}
.managed-albums-more{margin:22px 0 0}
.managed-albums-more a{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;background:var(--ink);color:var(--mist);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .25s}
.managed-albums-more a span{color:rgba(239,240,235,.6)}
.managed-albums-more a:hover,.managed-albums-more a:focus-visible{background:var(--red);color:#111719;outline:0}
.managed-albums-more a:hover span,.managed-albums-more a:focus-visible span{color:rgba(17,23,25,.6)}
.managed-albums-pusto{grid-column:1/-1;margin:0;padding:28px;border:1px dashed var(--line-dark);color:rgba(17,23,25,.6);font-size:14px}
@media(prefers-reduced-motion:reduce){.managed-album-foto{transition:none}}
@media(max-width:600px){.managed-album-card--foto{min-height:280px}}

/* ── WRÓĆ DO GALERII (strona albumu, 23.09.2026) ──
   Był zwykłym przyciskiem-obrysem ze strzałką z klawiatury. Teraz pigułka w barwach witryny: czerwone kółko
   ze strzałką (odjeżdża w lewo po najechaniu), etykieta w DM Mono jak „ALBUM / 01" na kartach, napis w kroju
   nagłówków. Strzałka w kolorze atramentu na czerwieni: 6,1:1 (biała dawałaby tylko 3,2:1). */
.album-powrot{display:inline-flex;align-items:center;gap:14px;padding:6px 22px 6px 6px;border-radius:999px;background:var(--ink);color:var(--mist);text-decoration:none;box-shadow:0 10px 28px -14px rgba(17,23,25,.55);transition:background-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.album-powrot:hover{background:#1b2629;box-shadow:0 14px 34px -14px rgba(17,23,25,.7);transform:translateY(-1px)}
.album-powrot:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.album-powrot__kolo{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--red);color:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.album-powrot__kolo svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.album-powrot:hover .album-powrot__kolo{transform:translateX(-3px)}
.album-powrot:hover .album-powrot__kolo svg{transform:translateX(-2px)}
.album-powrot__tekst{display:flex;flex-direction:column;gap:6px;line-height:1}
.album-powrot__tekst small{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,240,235,.62)}
.album-powrot__tekst b{font:500 17px/1 var(--font-display);letter-spacing:-.02em}
@media(max-width:600px){.album-powrot{gap:12px;padding-right:18px}.album-powrot__kolo{width:38px;height:38px}.album-powrot__tekst b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.album-powrot,.album-powrot__kolo,.album-powrot__kolo svg{transition:none}.album-powrot:hover{transform:none}}
/* Kafel siatki albumu, zanim dojdzie miniatura: ciepła szarość witryny zamiast fioletu z motywu bloków
   (jak szare pola w Google Photos). */
.sk-album{--sk-soft:#e4e5de}