/* HSBL Huta Szkła Biaglass Łużyce · demo. Character A "Box": the hall from inside.
   Near-black hall, warm paper for the two product sections, one accent from the orange of their logo.
   Mobile first: base is 390 px, wider screens through min-width only. kit.css gives mechanics, the look is here. */
:root {
  --bg: #0e0c0b; --bg2: #191512; --hot: #150f0c; --fg: #f2ede6; --mute: #a89f96;
  --line: rgb(242 237 230 / .15); --line2: rgb(242 237 230 / .34);
  --acc: #e65221; --acc-hi: #f0663a; --acc-ink: #170b06;
  --paper: #eee9e1; --paper2: #e2dcd2; --ink: #16120f; --ink-mute: #5f574f; --ink-line: rgb(22 18 15 / .16);
  --h: "Inter Tight", "Arial Narrow", system-ui, sans-serif;
  --t: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gut: max(16px, 4vw);
  --kit-fg: var(--fg); --kit-bg: var(--bg); --kit-accent: var(--acc); --kit-line: var(--line); --kit-radius: 0px;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 60px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--fg); font: 400 17px/1.5 var(--t); text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gut); }
section { scroll-margin-top: 56px; }
.h2 { margin: 0; font: 800 clamp(30px, 8.2vw, 60px)/1.06 var(--h); font-size: clamp(30px, 8.2vw, 60px); letter-spacing: -.012em; text-wrap: balance; }
.paper { background: var(--paper); color: var(--ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; font: 700 16px/1.1 var(--t); text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 0; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg { min-height: 52px; }
.btn--acc { background: var(--acc); color: var(--acc-ink); }
.btn--acc:hover { background: var(--acc-hi); }
.btn--line { color: var(--fg); background: none; border-color: var(--line2); }
.btn--line:hover { border-color: var(--fg); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #2a231e; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 20px; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.more svg { width: 18px; height: 18px; }

/* header */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: 56px; padding-inline: var(--gut); background: var(--bg); border-bottom: 1px solid var(--line); }
.top__name { display: grid; gap: 1px; min-height: 44px; align-content: center; text-decoration: none; }
.top__mark { font: 600 22px/1 var(--s); text-transform: uppercase; letter-spacing: 0; }
.top__full { font: 400 14px/1.2 var(--t); color: var(--mute); white-space: nowrap; }
.top__demo { padding: 3px 8px; font: 500 12px/1.4 var(--t); color: var(--mute); border: 1px solid var(--line); }
.top__nav, .top__tel, .top__ask { display: none; }
.top__menu { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; background: none; border: 0; }
.top__menu svg { width: 24px; height: 24px; }
.top__panel { position: absolute; top: 56px; left: 0; right: 0; display: grid; padding: 4px var(--gut) 12px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.top__panel[hidden] { display: none; }
.top__panel a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .top { gap: 18px; }
  .top__tel { display: block; margin-left: auto; font: 500 15px/1.4 var(--t); text-decoration: none; white-space: nowrap; }
  .top__ask { display: inline-flex; min-height: 40px; padding-inline: 16px; font-size: 15px; }
  .top__menu { margin-left: 0; }
}
@media (min-width: 1200px) {
  .top__nav { display: flex; align-items: center; gap: 20px; margin-left: 28px; font-size: 15px; white-space: nowrap; }
  .top__nav a { text-decoration: none; color: var(--mute); }
  .top__nav a:hover { color: var(--fg); }
  .top__menu, .top__panel { display: none; }
}

/* hero: the pour, full screen on the phone, right half on desktop */
.hero { position: relative; display: grid; align-items: end; min-height: min(calc(100svh - 56px), 860px); overflow: clip; }
.hero__media { position: absolute; inset: 0; background: var(--hot); }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(14 12 11 / .35) 0, rgb(14 12 11 / 0) 22%, rgb(14 12 11 / .5) 55%, rgb(14 12 11 / .95) 100%); }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__pause { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--fg); background: rgb(14 12 11 / .6); border: 1px solid var(--line); }
.hero__pause svg { width: 20px; height: 20px; }
.hero__pause .i-play, .hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__text { position: relative; z-index: 1; padding: 0 var(--gut) 20px; }
.hero h1 { margin: 0; font: 800 clamp(34px, 9.6vw, 48px)/1.04 var(--h); font-size: clamp(34px, 9.6vw, 48px); letter-spacing: -.012em; text-wrap: balance; }
.hero__sub { margin: 12px 0 0; max-width: 36ch; color: #ddd6cd; text-wrap: pretty; }
.hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.hero__cta .btn { padding-inline: 8px; font-size: 15.5px; }
.hero__cat { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font-weight: 500; text-underline-offset: 4px; }
.hero__cat svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: stretch; height: min(calc(100svh - 56px), 860px); min-height: 560px; }
  .hero__media { position: relative; grid-column: 2; grid-row: 1; }
  .hero__video { position: absolute; inset: 0; }
  .hero__media::after { display: none; }
  .hero__pause { top: auto; bottom: 20px; right: 20px; }
  .hero__text { grid-column: 1; grid-row: 1; align-self: center; padding: 32px 56px 32px max(32px, calc((100vw - 1320px) / 2 + 32px)); }
  .hero h1 { font-size: clamp(50px, 5vw, 76px); line-height: 1.04; }
  .hero__sub { margin-top: 22px; font-size: 20px; }
  .hero__cta { grid-template-columns: auto auto; justify-content: start; gap: 12px; margin-top: 28px; }
  .hero__cta .btn { padding-inline: 24px; font-size: 16px; }
.hero__cat { margin-top: 14px; }
}

/* Wersje (signature): one black stage the size of the globe, glass tiles under it */
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.ws { padding: 28px 0 24px; border-top: 1px solid var(--line); }
.ws__in { display: grid; gap: 12px; }
.ws__lead { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--mute); }
.ws__stage { position: relative; width: min(100%, calc(100svh - 360px)); aspect-ratio: 1; margin-inline: auto; overflow: hidden; background: #000; }
.ws__pane { position: absolute; inset: 0; }
.ws__pane[hidden] { display: none; }
.ws__pane img { width: 100%; height: 100%; object-fit: cover; }
/* light filling the glass: the new globe appears through a circle growing from its centre */
.ws__pane:not([hidden]) img { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--r), transparent calc(var(--r) + 8%)); mask-image: radial-gradient(circle at 50% 50%, #000 var(--r), transparent calc(var(--r) + 8%)); animation: ws-fill .28s ease-out; }
@keyframes ws-fill { from { --r: 0%; } to { --r: 100%; } }
.ws__cap { position: absolute; inset: auto 0 0; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 40px 14px 12px; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .85) 70%); pointer-events: none; }
.ws__glass { font: 600 22px/1.1 var(--s); text-transform: uppercase; letter-spacing: 0; }
.ws__nr { font-size: 14px; color: var(--mute); }
.ws__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ws__tile { position: relative; display: grid; align-content: center; gap: 1px; min-height: 56px; padding: 8px 10px; text-align: left; text-decoration: none; color: var(--mute); background: none; border: 1px solid var(--line); }
.ws__tile::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease-out; }
.ws__tile[aria-pressed="true"] { color: var(--fg); border-color: var(--line2); }
.ws__tile[aria-pressed="true"]::before { transform: scaleX(1); }
.ws__n { font: 700 16px/1.2 var(--t); color: inherit; }
.ws__tile[aria-pressed="true"] .ws__n, .ws__tile--pdf .ws__n { color: var(--fg); }
.ws__m { font-size: 14px; line-height: 1.3; }
.ws__d { display: none; }
.ws__tile--pdf { border-style: dashed; }
.ws__tile--pdf:hover { border-color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .ws__pane:not([hidden]) img { animation: none; } .ws__tile::before { transition: none; } }
@media (min-width: 900px) {
  .ws { padding: 88px 0 96px; }
  .ws__in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); row-gap: 28px; align-items: start; }
  .ws__head { grid-column: 1; grid-row: 1; }
  .ws__lead { font-size: 18px; margin-top: 14px; }
  .ws__stage { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
  .ws__tiles { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 0; align-content: start; }
  .ws__tile { grid-template-columns: minmax(150px, 34%) 90px 1fr; align-items: baseline; gap: 16px; min-height: 64px; padding: 16px 8px 16px 22px; border: 0; border-top: 1px solid var(--line); }
  .ws__tile:last-child { border-bottom: 1px solid var(--line); }
  .ws__tile::before { left: 0; right: auto; top: 0; bottom: 0; width: 4px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .ws__tile[aria-pressed="true"]::before { transform: scaleY(1); }
  .ws__tile--pdf { border-style: solid; }
  .ws__n { font-size: clamp(22px, 2vw, 28px); font-family: var(--h); font-weight: 800; letter-spacing: -.015em; }
  .ws__m { font-size: 14px; }
  .ws__d { display: block; font-size: 15px; color: var(--mute); }
  .ws__cap { padding: 56px 22px 18px; }
  .ws__glass { font-size: 30px; }
  .ws__nr { font-size: 16px; }
}

/* Produkty: paper, families as rows with their PDF */
.pr { padding: 32px 0 28px; }
.pr__lead { margin: 10px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.45; color: var(--ink-mute); }
.pr__list { margin-top: 16px; border-bottom: 1px solid var(--ink-line); }
.pr__h { margin: 0; border-top: 1px solid var(--ink-line); }
.pr__btn { display: grid; grid-template-columns: 1fr 28px; grid-template-areas: "name chev" "meta chev"; align-items: center; column-gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; text-align: left; color: var(--ink); background: none; border: 0; }
.pr__name { grid-area: name; font: 600 clamp(17px, 4.6vw, 28px)/1.2 var(--s); font-size: clamp(17px, 4.6vw, 28px); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; }
.pr__meta { grid-area: meta; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-mute); }
.pr__btn svg { grid-area: chev; width: 24px; height: 24px; transition: rotate .2s ease; }
.pr__btn[aria-expanded="true"] svg { rotate: 180deg; }
.pr__in { display: grid; gap: 12px; }
.pr__in::after { content: ""; height: 6px; }
.pr__plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pr__plates li { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper2); }
.pr__plates img { width: 100%; height: 100%; object-fit: cover; }
.is-white { mix-blend-mode: multiply; }
.pr__nr { position: absolute; left: 6px; bottom: 4px; font-size: 14px; line-height: 1.3; color: var(--ink-mute); }
.pr__nr--dark { color: #b9b1a8; }
.pr__txt { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.45; }
.pr__pdf { justify-self: start; }
.pr__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.pr__up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }
.pr__up svg { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .pr { padding: 88px 0 96px; }
  .pr__lead { font-size: 18px; margin-top: 14px; }
  .pr__list { margin-top: 32px; }
  .pr__btn { grid-template-columns: 1fr auto 28px; grid-template-areas: "name meta chev"; min-height: 80px; }
  .pr__meta { margin: 0; font-size: 15px; }
  .pr__in { grid-template-columns: repeat(3, 240px) minmax(0, 1fr); column-gap: 12px; row-gap: 16px; align-items: start; }
  .pr__plates { grid-column: 1 / span 3; grid-template-columns: repeat(3, 240px); gap: 12px; }
  .pr__in > .pr__txt, .pr__in > .pr__pdf, .pr__in > .pr__acts { grid-column: 4; padding-left: 28px; }
  .pr__in:has(.pr__plates) > .pr__txt { grid-row: 1; align-self: start; }
  .pr__in:has(.pr__plates) > .pr__pdf { grid-row: 1; align-self: end; }
  .pr__in:not(:has(.pr__plates)) > * { grid-column: 1 / -1; padding-left: 0; }
  .pr__nr { left: 10px; bottom: 8px; font-size: 14px; }
  .pr__in::after { grid-column: 1 / -1; height: 10px; }
}

/* Produkcja: the hot band, six one-word steps over their own clips */
.pd { padding: 28px 0 24px; background: var(--hot); border-top: 1px solid var(--line); }
.pd__in { display: grid; gap: 12px; }
.pd__lead { margin: 8px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.45; color: var(--mute); text-wrap: pretty; }
.pd__frame { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; }
.pd__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd__v[hidden] { display: none; }
.pd__v:not([hidden]) { animation: pd-in .35s ease both; }
@keyframes pd-in { from { opacity: 0; } to { opacity: 1; } }
.pd__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pd__s { position: relative; display: block; min-height: 48px; padding: 12px 2px 8px 0; text-align: left; color: var(--mute); background: none; border: 0; }
.pd__s::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line2); }
.pd__s::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--acc); }
.pd__s.is-on::after { width: 100%; }
.pd.is-auto .pd__s.is-on::after { animation: pd-run var(--run, 5s) linear both; }
@keyframes pd-run { from { width: 0; } to { width: 100%; } }
.pd__s[aria-pressed="true"] { color: var(--fg); }
.pd__n { display: block; font: 700 16px/1.25 var(--t); white-space: nowrap; }
.pd__d { display: none; }
@media (prefers-reduced-motion: reduce) { .pd__v:not([hidden]) { animation: none; } }
@media (min-width: 1024px) {
  .pd { padding: 96px 0 104px; }
  .pd__in { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); grid-template-rows: auto 1fr; column-gap: 88px; row-gap: 28px; align-items: start; }
  .pd__head { grid-column: 1; grid-row: 1; }
  .pd__lead { font-size: 18px; margin-top: 14px; }
  .pd__frame { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; position: sticky; top: 80px; }
  .pd__steps { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .pd__s { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 20px; align-items: baseline; min-height: 64px; padding: 18px 0 14px; }
  .pd__n { font: 800 24px/1.2 var(--h); letter-spacing: -.01em; }
  .pd__d { display: block; font-size: 16px; color: var(--mute); }
  .pd__s[aria-pressed="true"] .pd__d { color: var(--fg); }
}

/* Zdobienia: paper mosaic with no holes, technique names on the tiles */
.zd { padding: 32px 0 28px; }
.zd__lead { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-mute); }
.zd__grid { --cols: 2; --gap: 6px; --u: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--u); grid-auto-flow: dense; gap: var(--gap);
  margin: 16px 0 0; padding: 0; list-style: none; }
.zd .wrap { container-type: inline-size; }
.zt { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper2); }
.zt--tall { grid-row: span 2; }
.zt--pwide { grid-column: span 2; }
.zt--dark { background: #000; }
.zt__b { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 8% 8% 2%; background: none; border: 0; cursor: zoom-in; }
.zt__b img { width: 100%; height: 100%; object-fit: contain; }
.zt__t { margin: 0; padding: 4px 8px 8px; font: 500 clamp(13px, 3.6vw, 14px)/1.3 var(--t); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.zt--dark .zt__t { color: var(--fg); }
@media (min-width: 900px) {
  .zd { padding: 88px 0 96px; }
  .zd__lead { font-size: 18px; margin-top: 14px; }
  .zd__grid { --cols: 4; --gap: 10px; margin-top: 32px; }
  .zt--big { grid-column: span 2; grid-row: span 2; }
  .zt--pwide { grid-column: auto; }
  .zt--dwide { grid-column: span 2; }
  .zt__t { padding: 6px 14px 12px; font-size: 15px; }
}

/* Współpraca: short text and two photos from the factory table */
.co { padding: 32px 0 28px; border-top: 1px solid var(--line); }
.co__in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co__text { grid-column: 1 / -1; margin-bottom: 8px; }
.co__lines { margin: 14px 0 0; padding: 0; list-style: none; }
.co__lines li { padding: 8px 0; font-size: 15.5px; line-height: 1.4; border-top: 1px solid var(--line); text-wrap: pretty; }
.co__ph { margin: 0; overflow: hidden; background: var(--bg2); }
.co__ph img { width: 100%; height: 100%; object-fit: cover; }
.co__ph--a { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.co__ph--b { aspect-ratio: 4 / 3; }
.co__shop { align-self: center; margin: 0; padding-left: 6px; font-size: 14px; line-height: 1.45; color: var(--mute); }
.co__shop a { color: var(--fg); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .co { padding: 96px 0 104px; }
  .co__in { grid-template-columns: 5fr 5fr 3fr; grid-template-rows: auto auto; column-gap: 24px; row-gap: 24px; align-items: start; }
  .co__text { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding-right: 24px; }
  .co .h2 { font-size: clamp(32px, 3.2vw, 46px); }
  .co__lines li { font-size: 18px; padding: 14px 0; }
  .co__ph--a { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
  .co__ph--b { grid-column: 3; grid-row: 1; aspect-ratio: 3 / 4; }
  .co__shop { grid-column: 3; grid-row: 2; padding: 0; font-size: 15px; }
}

/* Historia: five years in one row, tap only */
.hi { padding: 32px 0 28px; border-top: 1px solid var(--line); }
.hi__in { display: grid; gap: 12px; }
.hi__ph { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg2); }
.hi__ph img { width: 100%; height: 100%; object-fit: cover; }
.hi__years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hi__y { position: relative; min-height: 52px; padding: 12px 0 6px; text-align: left; font: 600 clamp(19px, 5.4vw, 34px)/1.1 var(--s); color: var(--mute); background: none; border: 0; border-top: 1px solid var(--line2); }
.hi__y::before { content: ""; position: absolute; left: 0; right: 6px; top: -1px; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease-out; }
.hi__y[aria-pressed="true"] { color: var(--fg); }
.hi__y[aria-pressed="true"]::before { transform: scaleX(1); }
.hi__facts { min-height: 6.6em; }
.hi__f { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.hi__f:not([hidden]) { animation: pd-in .3s ease both; }
@media (prefers-reduced-motion: reduce) { .hi__f:not([hidden]) { animation: none; } .hi__y::before { transition: none; } }
@media (min-width: 1024px) {
  .hi { padding: 96px 0 104px; }
  .hi__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 72px; row-gap: 24px; }
  .hi__in > .h2 { grid-column: 1; grid-row: 1; }
  .hi__ph { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 4 / 3; }
  .hi__years { grid-column: 1; grid-row: 2; align-self: end; }
  .hi__y { min-height: 72px; padding-top: 18px; }
  .hi__facts { grid-column: 1; grid-row: 3; min-height: 0; }
  .hi__f { font-size: 22px; }
}

/* label/value lists (Praca, Kontakt) */
.dl { margin: 16px 0 0; }
.dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.dl dt { font-size: 14px; line-height: 1.25; color: var(--mute); }
.dl dd { display: grid; justify-items: start; margin: 0; font-size: 16px; line-height: 1.35; }
.dl dd a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -4px; text-underline-offset: 3px; overflow-wrap: break-word; }
.dl dd.dl__row { display: flex; flex-wrap: wrap; column-gap: 16px; }

/* Praca */
.jb { padding: 32px 0 28px; border-top: 1px solid var(--line); }
.jb .jb__list > div { grid-template-columns: 112px minmax(0, 1fr); }
@media (min-width: 1024px) {
  .jb { padding: 80px 0 88px; }
  .jb__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .jb__list { margin: 0; }
  .jb .jb__list > div { grid-template-columns: 220px minmax(0, 1fr); padding: 14px 0; }
  .jb__list dt { font-size: 16px; color: var(--fg); }
  .jb .jb__list dd { display: flex; flex-wrap: wrap; column-gap: 24px; }
}

/* Opinie: cards sideways on the phone */
.rv { padding: 32px 0 28px; border-top: 1px solid var(--line); }
.rv__list { display: flex; gap: 10px; margin: 18px calc(-1 * var(--gut)) 0; padding: 0 var(--gut); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.rv__list::-webkit-scrollbar { display: none; }
.rv__list li { flex: 0 0 86%; display: grid; align-content: space-between; gap: 14px; padding: 18px; border: 1px solid var(--line2); scroll-snap-align: start; }
.rv__list p { margin: 0; font: 500 clamp(18px, 4.8vw, 22px)/1.38 var(--t); text-wrap: pretty; }
.rv__by { font-size: 14px; color: var(--mute); }
@media (min-width: 900px) {
  .rv { padding: 88px 0 96px; }
  .rv__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: 32px 0 0; padding: 0; overflow: visible; }
  .rv__list li { padding: 22px 0; border: 0; border-top: 1px solid var(--line); }
  .rv__list li:first-child { grid-column: 1 / -1; }
  .rv__list li:first-child p { font-size: 30px; max-width: 36ch; }
  .rv__list p { font-size: 22px; max-width: 36ch; }
}

/* Zapytanie: a real e-mail built from the five inputs */
.eq { padding: 28px 0 28px; background: var(--bg2); border-top: 1px solid var(--line); }
.eq__in { display: grid; gap: 14px; }
.eq__lead { margin: 6px 0 0; font-size: 15px; color: var(--mute); }
.eq__form { display: grid; gap: 8px; }
.eq__mkt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.eq__m { position: relative; display: grid; gap: 1px; min-height: 54px; padding: 8px 12px; color: var(--mute); border: 1px solid var(--line2); cursor: pointer; }
.eq__m input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eq__m::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease-out; }
.eq__m:has(input:checked) { color: var(--fg); border-color: rgb(242 237 230 / .55); }
.eq__m:has(input:checked)::before { transform: scaleX(1); }
.eq__m:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.eq__mn { font: 700 16px/1.2 var(--t); }
.eq__mp { font-size: 14px; line-height: 1.3; }
.eq__fields { display: grid; gap: 6px; }
.eq__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.fl { position: relative; display: block; background: rgb(0 0 0 / .28); border: 1px solid rgb(242 237 230 / .26); cursor: text; }
.fl:focus-within { border-color: var(--fg); }
.fl__l { position: absolute; left: 12px; right: 8px; top: 5px; overflow: hidden; font-size: 14px; line-height: 1.3; color: var(--mute); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.fl input { display: block; width: 100%; min-width: 0; min-height: 50px; padding: 24px 12px 4px; font-size: 16px; color: var(--fg); background: none; border: 0; border-radius: 0; outline: none; color-scheme: dark; }
.fl input::placeholder { color: rgb(242 237 230 / .56); }
.fl.is-bad { border-color: var(--acc); }
.eq__note { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--mute); }
.eq__go { width: 100%; }
.eq__to { margin: 0; font-size: 14px; color: var(--mute); }
.eq__to a { color: var(--fg); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .eq__m::before { transition: none; } }
@media (min-width: 1024px) {
  .eq { padding: 96px 0 104px; }
  .eq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .eq__lead { font-size: 18px; margin-top: 14px; }
  .eq__form { gap: 10px; }
  .eq__fields { gap: 8px; }
  .eq__pair { gap: 8px; }
  .eq__go { width: auto; justify-self: start; padding-inline: 28px; }
  .fl__l { left: 14px; top: 7px; }
  .fl input { min-height: 60px; padding: 27px 14px 8px; }
}

/* Kontakt */
.ct { padding: 28px 0 28px; border-top: 1px solid var(--line); }
.ct__in { display: grid; gap: 14px; }
.ct__list { margin-top: 12px; }
.ct__list > div { grid-template-columns: 76px minmax(0, 1fr); }
.ct__list dd { font-size: 15px; }
.ct__line, .dl dd.ct__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.ct__line .ct__sep { margin-left: -10px; }
.ct__line--2 { margin-top: 8px; }
.dl dd a.ct__short { min-width: 48px; justify-content: center; }
.ct__who { white-space: nowrap; }
.ct__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ct__side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct__map { height: 160px; aspect-ratio: auto; background: var(--bg2); }
.ct__map > a { color: var(--fg); }
.ct__vid { margin: 0; height: 160px; overflow: hidden; background: var(--bg2); }
.ct__vid video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .ct { padding: 88px 0 96px; }
  .ct__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .ct__list { margin-top: 24px; }
  .dl > div, .ct__list > div { grid-template-columns: 140px minmax(0, 1fr); padding: 10px 0; }
  .ct__list dd { font-size: 17px; }
  .dl dt { font-size: 14px; }
  .dl dd { font-size: 17px; }
  .ct__cta { grid-template-columns: auto auto; justify-content: start; margin-top: 20px; }
  .ct__side { grid-template-columns: 3fr 2fr; gap: 12px; position: sticky; top: 80px; }
  .ct__map { height: auto; aspect-ratio: auto; min-height: 520px; }
  .ct__vid { height: auto; aspect-ratio: 2 / 5; max-height: 520px; }
}

/* footer */
.ft { padding: 28px 0 calc(92px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ft__in { display: grid; gap: 12px; }
.ft__name { display: grid; gap: 4px; justify-self: start; margin: 0; padding: 18px 22px 16px; background: var(--acc); }
.ft__mark { font: 600 34px/1 var(--s); text-transform: uppercase; letter-spacing: 0; color: #fff; }
.ft__full { font-size: 14px; font-weight: 500; color: var(--acc-ink); }
.ft__legal { margin: 0; max-width: 80ch; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.ft__demo { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mute); }
.ft__demo b { color: var(--fg); font-weight: 500; }
.ft__fb { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .ft { padding: 48px 0 40px; }
  .ft__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; row-gap: 8px; align-items: start; }
  .ft__name { grid-row: 1 / span 3; justify-self: stretch; padding: 28px 32px 26px; }
  .ft__mark { font-size: 44px; }
  .ft__fb { min-height: 32px; }
}

/* sticky bar on the phone */
.bar { background: var(--bg); }
.bar a { font: 700 16px/1 var(--t); }
.bar__call { color: var(--fg); border: 1px solid var(--line2); }
.bar__ask { background: var(--acc); color: var(--acc-ink); }

/* fix batch R1 (23.10): utilities, hero family list, recipient block, Praca lead */
.nowrap { white-space: nowrap; }
.hero__in { display: none; }
.eq__who { display: none; }
.jb__lead { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--mute); }
@media (min-width: 1024px) {
  .hero__in { display: grid; max-width: 480px; margin: 32px 0 0; padding: 0; list-style: none; }
  .hero__in a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 46px; padding: 10px 0; text-decoration: none; font-weight: 500; border-top: 1px solid var(--line); }
  .hero__in li:last-child a { border-bottom: 1px solid var(--line); }
  .hero__in a:hover { color: #fff; }
  .hero__in-m { flex: none; font-size: 14px; color: var(--mute); }
  .eq__who { display: grid; gap: 2px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
  .eq__wn { margin: 0; font: 800 26px/1.2 var(--h); letter-spacing: -.01em; }
  .eq__wr { margin: 0; font-size: 15px; color: var(--mute); }
  .eq__wt { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; text-underline-offset: 3px; }
  .jb__lead { font-size: 18px; margin-top: 14px; }
}