/* ==========================================================================
   bricks-classes.css

   Every component class of the site lives here, and each one becomes a
   Bricks global class. Empty on purpose: this is the starter for Zinergo.

   THIS file is the one you edit. bricks-classes.json (the Bricks Global
   Classes import) is generated from it, never edited by hand. After every
   change run:
     python3 tools/build_bricks_classes.py   regenerate the JSON
     python3 tools/check_bricks_sync.py      must report 0 differences

   Rules for every class you add, or the converter drops it:
     - Every selector starts with a class that exists in the HTML. No bare
       tags (h2, button, *), no #id, no tag-qualified classes (a.btn), no
       selector starting with :where() or :is().
     - Flat CSS only, no nesting (&).
     - Conflicts are solved with specificity (.btn.btn--primary), never with
       order in the file. Order does not survive conversion.
     - Flex containers declare all four: display, flex-direction,
       align-items, justify-content. Grid containers always declare
       align-items: stretch. Text classes declare display: block.
     - Layout children holding text get min-width: 0. No fixed px widths.
     - Every value is var(--token) from bricks-variables.css. No raw
       colours, paddings, gaps or radii.
     - Animate transform and opacity only. Anything hidden before JS runs
       sits behind .has-js, or it disappears in the Bricks editor.
     - Media queries at the end, desktop first: 991px, 767px, 478px.

   Naming: BEM, no client prefix (.hero, .hero__title, .hero--dark).
   Rules that cannot be a Bricks class go to core-classes.css instead.
   ========================================================================== */

/* ==========================================================================
   ZINERGO: CABLE SCHEDULE
   The page is one cable route. Every section holds one .run: a gutter with
   the cable (track, lit current, heat-shrink tag) and the content beside it.
   shared.js sets --cable-progress / --cable-head on each .run and toggles
   .is-lit / .is-flowing. Without JS every cable renders fully lit.
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--color-amber);
  color: var(--color-on-amber);
  font-family: var(--label-font-family);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: var(--button-height);
  padding: var(--space-xs) var(--space-l);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-s);
  font-family: var(--label-font-family);
  font-size: var(--text-s);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(var(--press-offset)); }

.btn__label {
  display: block;
  min-width: 0;
}

.btn__meta {
  display: block;
  min-width: 0;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  opacity: var(--meta-opacity);
}

.btn__icon {
  display: block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(var(--nudge-s)); }

.btn.btn--primary {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-on-amber);
}

.btn.btn--primary:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
}

.btn.btn--secondary {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-paper);
}

.btn.btn--secondary:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
}

.btn.btn--ink {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-amber);
}

.btn.btn--ink:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.btn.btn--outline-ink {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn.btn--outline-ink:hover {
  background: var(--color-ink);
  color: var(--color-amber);
}

/* --- Text link with arrow -------------------------------------------------- */
.link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  font-family: var(--label-font-family);
  font-size: var(--text-s);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-paper);
}

.link:hover { color: var(--color-amber); }

.link__text {
  display: block;
  min-width: 0;
}

.link__icon {
  display: block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-amber);
  transition: transform var(--duration-fast) var(--ease-out);
}

.link:hover .link__icon { transform: translateX(var(--nudge-m)); }

/* --- Run: content beside the cable ---------------------------------------- */
.run {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3xl);
  padding-left: var(--cable-gutter);
}

.cable {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(-1 * var(--padding-section-y));
  bottom: calc(-1 * var(--padding-section-y));
  width: var(--cable-gutter);
  pointer-events: none;
}

.cable__track {
  position: absolute;
  left: var(--cable-x);
  top: 0;
  bottom: 0;
  width: var(--border-cable);
  background: var(--color-line);
  transform: translateX(-50%);
}

.cable__current {
  position: absolute;
  left: var(--cable-x);
  top: 0;
  bottom: 0;
  width: var(--border-cable);
  margin-left: calc(var(--border-cable) / -2);
  background: var(--color-amber);
  transform-origin: 50% 0;
  transform: scaleY(var(--cable-progress, 1));
}

.cable__head {
  position: absolute;
  left: var(--cable-x);
  top: 0;
  width: var(--terminal-size);
  height: var(--terminal-size);
  margin-left: calc(var(--terminal-size) / -2);
  margin-top: calc(var(--terminal-size) / -2);
  background: var(--color-amber);
  border-radius: var(--radius-s);
  opacity: 0;
  transform: translateY(var(--cable-head, 0px));
}

.has-js .run.is-flowing .cable__head { opacity: 1; }

.cable__tag {
  position: absolute;
  left: var(--cable-x);
  top: var(--padding-section-y);
  width: var(--cable-tag-width);
  margin-left: calc(var(--cable-tag-width) / -2);
  padding: var(--space-s) 0;
  background: var(--color-amber);
  color: var(--color-on-amber);
  border-radius: var(--radius-m);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.has-js .run .cable__tag {
  background: var(--color-ink);
  color: var(--color-paper-dim);
  box-shadow: inset 0 0 0 var(--border-hair) var(--color-line-strong);
}

.has-js .run.is-lit .cable__tag {
  background: var(--color-amber);
  color: var(--color-on-amber);
  box-shadow: none;
}

.cable__tag-text {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-condensed);
  letter-spacing: var(--tracking-label);
  line-height: var(--line-height-solid);
  text-transform: uppercase;
  white-space: nowrap;
}

.run.run--start .cable { top: 0; }

.run.run--start .cable__tag { top: var(--space-xs); }

/* Heading tapped off the cable: a branch line with a terminal at its end. */
.run__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-l);
}

.run__tap {
  position: absolute;
  top: var(--tap-offset);
  right: calc(100% + var(--space-s));
  width: calc(var(--cable-gutter) - var(--cable-x) - var(--space-s));
  height: var(--border-terminal);
  background: var(--color-line-strong);
  font-size: var(--text-4xl);
}

.has-js .run.is-lit .run__tap { background: var(--color-amber); }

/* Reveal: content beside the cable switches on, sliding out from the wire.
   Hidden only behind .has-js; shared.js sets .is-on on each item once,
   when its own top passes 90% of the viewport, and never removes it. Sibling order sets a short stagger, capped at three steps.
   prefers-reduced-motion (core-classes.css) makes it an instant cut. */
.has-js .run .reveal {
  opacity: 0;
  transform: translateX(calc(var(--space-l) * -1));
  transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.has-js .run .reveal.is-on {
  opacity: 1;
  transform: translateX(0);
}

.has-js .run .reveal.is-on:nth-child(3) { transition-delay: 90ms; }

.has-js .run .reveal.is-on:nth-child(n+4) { transition-delay: 180ms; }

/* Stagger: items of a list or a grid (hero lines, schedule, services,
   process steps, works) arrive one by one, 80ms apart, capped at 240ms.
   Same per-item .is-on trigger and reduced-motion cut as .reveal; the
   delays only show when several items enter together. */
.has-js .run .reveal-item {
  opacity: 0;
  transform: translateX(calc(var(--space-m) * -1));
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.has-js .run .reveal-item.is-on {
  opacity: 1;
  transform: translateX(0);
}

.has-js .run .reveal-item.is-on:nth-child(2) { transition-delay: 80ms; }

.has-js .run .reveal-item.is-on:nth-child(3) { transition-delay: 160ms; }

.has-js .run .reveal-item.is-on:nth-child(n+4) { transition-delay: 240ms; }

.run__tap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--space-xs);
  height: var(--space-xs);
  background: inherit;
  transform: translateY(-50%);
}

/* --- Shared type ---------------------------------------------------------- */
.heading {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-4xl);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  max-width: var(--heading-measure);
}

.text {
  display: block;
  max-width: var(--text-measure);
  font-size: var(--text-l);
  color: var(--color-paper-dim);
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--content-gap);
  min-width: 0;
}

/* --- Header ---------------------------------------------------------------- */
.section.site-header {
  position: relative;
  z-index: 50;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--color-ink);
  border-bottom: var(--border-hair) solid var(--color-line);
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: var(--header-height);
}

.header__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.header__logo-img {
  display: block;
  width: auto;
  height: var(--space-xl);
}

.header__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xl);
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-l);
}

.nav__item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.nav__link {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
  min-height: var(--header-height);
  font-family: var(--label-font-family);
  font-size: var(--text-s);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-paper);
}

.nav__link:hover { color: var(--color-amber); }

.nav__link[aria-current="page"] {
  color: var(--color-amber);
}

.nav__link-text {
  display: block;
}

.nav__chevron {
  display: block;
  width: var(--space-m);
  height: var(--space-m);
  color: var(--color-amber);
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: calc(var(--space-l) * -1);
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: var(--submenu-width);
  padding: var(--space-xs) 0;
  background: var(--color-ink-raised);
  border: var(--border-hair) solid var(--color-line);
  border-top: var(--border-terminal) solid var(--color-amber);
}

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  display: flex;
}

.nav__sublink {
  display: block;
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-s);
  color: var(--color-paper);
}

.nav__sublink:hover {
  background: var(--color-amber);
  color: var(--color-on-amber);
}

.lang {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding-left: var(--space-l);
  border-left: var(--border-hair) solid var(--color-line);
}

.lang__link {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--color-paper-dim);
}

.lang__link:hover { color: var(--color-paper); }

.lang__link.lang__link--current { color: var(--color-amber); }

.lang__sep {
  display: block;
  width: var(--border-hair);
  height: var(--space-s);
  background: var(--color-line-strong);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: var(--button-height);
  height: var(--button-height);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-s);
}

.nav-toggle__bar {
  display: block;
  width: var(--space-ml);
  height: var(--border-terminal);
  background: var(--color-paper);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(var(--toggle-bar-offset)) rotate(45deg); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(calc(var(--toggle-bar-offset) * -1)) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.section.hero {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-xl) var(--space-l);
}

.hero__title {
  display: block;
  grid-column: 1 / 13;
  max-width: var(--hero-measure);
  font-family: var(--heading-font-family);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--display-line-height);
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
}

.hero__lead {
  display: block;
  grid-column: 1 / 7;
  max-width: var(--text-measure);
  font-size: var(--text-l);
  color: var(--color-paper-dim);
}

.hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: end;
  grid-column: 7 / 13;
  gap: var(--space-s);
}

.hero__band {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  margin-left: calc((var(--cable-gutter) + var(--bleed-offset)) * -1);
  margin-right: calc(var(--bleed-offset) * -1);
  background: var(--color-ink-raised);
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
  filter: var(--photo-filter);
}

/* --- Liczby: four rows of the cable schedule ---------------------------- */
.schedule {
  position: relative;
}

.schedule__bus {
  position: absolute;
  top: 0;
  right: 0;
  left: calc((var(--cable-gutter) - var(--cable-x)) * -1);
  height: var(--border-cable);
  background: var(--color-line-strong);
}

.has-js .run.is-lit .schedule__bus { background: var(--color-amber); }

.schedule__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.schedule__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 7fr);
  align-items: baseline;
  gap: var(--space-l);
  padding: var(--space-l) var(--space-l) var(--space-l) 0;
  border-bottom: var(--border-hair) solid var(--color-line-strong);
}

.schedule__id {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-condensed);
  letter-spacing: var(--tracking-label);
  color: var(--color-amber);
}

.schedule__value {
  display: block;
  justify-self: end;
  font-family: var(--heading-font-family);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--display-line-height);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-paper);
  white-space: nowrap;
}

.schedule__unit {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--heading-line-height);
  color: var(--color-amber);
}

.schedule__label {
  display: block;
  max-width: var(--text-measure);
  font-size: var(--text-l);
  color: var(--color-paper-dim);
}

/* --- Jeden zespół -------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-2xl) var(--space-l);
}

.team__media {
  position: relative;
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  overflow: hidden;
  min-height: 100%;
  border-radius: var(--radius-s);
  background: var(--color-ink-raised);
}

.team__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  filter: var(--photo-filter);
}

.team__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  grid-column: 7 / 13;
  gap: var(--space-2xl);
  min-width: 0;
}

.team__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--content-gap);
}

.team__statement {
  display: block;
  grid-column: 7 / 13;
  padding-top: var(--space-l);
  border-top: var(--border-terminal) solid var(--color-amber);
  font-family: var(--heading-font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--heading-line-height);
  color: var(--color-paper);
}

/* The team heading sits beside the photo, away from the cable: no branch. */
.team__body .run__tap { display: none; }

/* --- Usługi: the circuit list --------------------------------------------- */
.service-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-top: var(--border-hair) solid var(--color-line-strong);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr);
  align-items: baseline;
  gap: var(--space-l);
  padding: var(--space-xl) var(--space-l);
  border-bottom: var(--border-hair) solid var(--color-line-strong);
  color: var(--color-paper);
}

.service:hover {
  background: var(--color-amber);
  color: var(--color-on-amber);
}

.service__code {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-condensed);
  letter-spacing: var(--tracking-label);
  color: var(--color-amber);
}

.service:hover .service__code { color: var(--color-on-amber); }

.service__title {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-tight);
}

.service__text {
  display: block;
  max-width: var(--service-measure);
  font-size: var(--text-base);
  color: var(--color-paper-dim);
}

.service:hover .service__text { color: var(--color-on-amber); }

.service__link {
  justify-self: end;
  position: static;
}

.service__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service:hover .service__link { color: var(--color-on-amber); }

.service:hover .link__icon { color: var(--color-on-amber); }

.services__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* --- Jak pracujemy: the flow between four terminals ------------------------ */
.flow {
  position: relative;
}

.flow__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-xl);
}

.flow__track {
  position: absolute;
  top: calc(var(--button-height) / 2);
  left: 0;
  right: 0;
  height: var(--border-cable);
  margin-top: calc(var(--border-cable) / -2);
  background: var(--color-line);
}

.flow__current {
  position: absolute;
  top: calc(var(--button-height) / 2);
  left: 0;
  right: 0;
  height: var(--border-cable);
  margin-top: calc(var(--border-cable) / -2);
  background: var(--color-amber);
  transform-origin: 0 50%;
  transform: scaleX(var(--flow-progress, 1));
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-m);
  min-width: 0;
}

.flow__terminal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
  margin-bottom: var(--space-s);
  background: var(--color-amber);
  color: var(--color-on-amber);
  border-radius: var(--radius-m);
}

.has-js .flow__step .flow__terminal {
  background: var(--color-ink);
  color: var(--color-paper-dim);
  box-shadow: inset 0 0 0 var(--border-terminal) var(--color-line-strong);
}

.has-js .flow__step.is-lit .flow__terminal {
  background: var(--color-amber);
  color: var(--color-on-amber);
  box-shadow: none;
}

.flow__num {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-solid);
}

.flow__title {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--heading-line-height);
  color: var(--color-paper);
}

.flow__text {
  display: block;
  font-size: var(--text-base);
  color: var(--color-paper-dim);
}

/* --- Realizacje ------------------------------------------------------------ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-s);
  aspect-ratio: 2 / 1;
}

.works-grid__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-s);
  background: var(--color-ink-raised);
}

.works-grid__item.works-grid__item--lead {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.works-grid__item.works-grid__item--wide {
  grid-column: 3 / 5;
}

.works-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform var(--duration-medium) var(--ease-out);
}

.works-grid__item:hover .works-grid__img { transform: scale(var(--hover-zoom)); }

.works-grid__note {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-ink);
  color: var(--color-paper-dim);
  font-family: var(--label-font-family);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.works__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* --- Stała współpraca ------------------------------------------------------ */
.clients {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-2xl) var(--space-l);
}

.clients__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  grid-column: 1 / 8;
  gap: var(--space-l);
  min-width: 0;
}

.contact__head .run__tap { font-size: var(--text-5xl); }

.clients__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  grid-column: 8 / 13;
  gap: var(--space-l);
  min-width: 0;
}

.clients__label {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-s);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-paper);
}

.client-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border-left: var(--border-cable) solid var(--color-amber);
}

.client-list__item {
  position: relative;
  display: block;
  padding: var(--space-m) 0 var(--space-m) var(--space-xl);
  font-size: var(--text-l);
  color: var(--color-paper);
}

.client-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-m) + var(--bullet-offset));
  width: var(--space-l);
  height: var(--border-terminal);
  background: var(--color-amber);
}

.placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  grid-column: 1 / 13;
  min-height: var(--placeholder-min-height);
  padding: var(--space-l);
  border: var(--border-hair) dashed var(--color-line-strong);
  border-radius: var(--radius-s);
}

.placeholder__text {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-s);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-paper-dim);
}

/* --- Kontakt: the circuit closes on amber ---------------------------------- */
.section.contact {
  background: var(--color-amber);
  color: var(--color-on-amber);
}

.contact .cable__track { background: var(--color-amber-line); }

.contact .cable__current { background: var(--color-ink); }

.contact .cable__head { background: var(--color-ink); }

.contact .run.run--end .cable { bottom: auto; height: calc(var(--padding-section-y) + var(--tap-offset)); }

.has-js .contact .run.run--end .cable__tag,
.contact .cable__tag {
  background: var(--color-ink);
  color: var(--color-amber);
  box-shadow: none;
}

.contact .run__tap,
.has-js .contact .run.is-lit .run__tap {
  background: var(--color-ink);
}

.contact__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-xl) var(--space-l);
}

.contact__title {
  display: block;
  font-family: var(--heading-font-family);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--display-line-height);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-amber);
  max-width: var(--hero-measure);
}

.contact__head {
  grid-column: 1 / 11;
  max-width: none;
}

.contact__text {
  display: block;
  grid-column: 1 / 8;
  max-width: var(--text-measure);
  font-size: var(--text-l);
  color: var(--color-on-amber);
}

.contact__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  grid-column: 1 / 13;
  gap: var(--space-s);
}

/* --- Footer ---------------------------------------------------------------- */
.section.site-footer {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-xl);
  background: var(--color-ink);
  border-top: var(--border-hair) solid var(--color-line);
}

.footer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  gap: var(--space-2xl) var(--space-l);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-l);
  min-width: 0;
}

.footer__logo {
  display: block;
  width: auto;
  height: var(--space-2xl);
}

.footer__about {
  display: block;
  max-width: var(--footer-measure);
  font-size: var(--text-base);
  color: var(--color-paper-dim);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-m);
  min-width: 0;
}

.footer__heading {
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-amber);
}

.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-s);
}

.footer__item {
  display: block;
}

.footer__link {
  display: block;
  font-size: var(--text-s);
  color: var(--color-paper);
}

.footer__link:hover { color: var(--color-amber); }

.footer__placeholder {
  display: block;
  font-size: var(--text-s);
  color: var(--color-paper-dim);
}

.footer__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  margin-top: var(--space-3xl);
  padding-top: var(--space-l);
  border-top: var(--border-hair) solid var(--color-line);
}

.footer__legal {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-paper-dim);
}

.footer__credit {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-paper-dim);
}

.footer__credit:hover { color: var(--color-amber); }

/* ==========================================================================
   Breakpoints, desktop first
   ========================================================================== */

/* Header switches to the menu button below 1180px: the five Polish menu
   labels, language switch and CTA do not fit one line under that width.
   Not a Bricks breakpoint, so it stays plain custom CSS on these classes. */
@media (max-width: 1180px) {
  .hero__lead { grid-column: 1 / 13; }

  .hero__actions {
    grid-column: 1 / 13;
    justify-content: flex-start;
  }

  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-l);
    padding: var(--space-l) var(--padding-section-x) var(--space-2xl);
    background: var(--color-ink);
    border-bottom: var(--border-hair) solid var(--color-line);
  }

  .has-js .header__nav { display: none; }

  .has-js .header__nav.is-open { display: flex; }

  .nav {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .nav__item {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-bottom: var(--border-hair) solid var(--color-line);
  }

  .nav__link {
    min-height: var(--button-height);
    font-size: var(--text-base);
  }

  .nav__chevron { display: none; }

  .nav__sub {
    position: static;
    display: flex;
    min-width: 0;
    padding: 0 0 var(--space-s) var(--space-m);
    background: transparent;
    border: 0;
  }

  .nav__sublink { padding: var(--space-xs) 0; color: var(--color-paper-dim); }

  .lang {
    padding-left: 0;
    border-left: 0;
  }

  .nav-toggle { display: flex; }
}

@media (max-width: 991px) {
  .hero__band { aspect-ratio: 16 / 9; }


  .team__media { grid-column: 1 / 13; grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; }

  .team__body { grid-column: 1 / 13; }

  .team__statement { grid-column: 1 / 13; }

  .service { grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 3fr); padding: var(--space-l) var(--space-s); }

  .service__text { grid-column: 2 / 4; grid-row: 2; }

  .flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }

  .flow__track { display: none; }

  .flow__current { display: none; }

  .clients__body { grid-column: 1 / 13; }

  .clients__aside { grid-column: 1 / 13; }

  .contact__head { grid-column: 1 / 13; }

  .contact__text { grid-column: 1 / 13; }

  .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .run { gap: var(--space-2xl); }

  .schedule__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-2xs) var(--space-m);
    padding-right: 0;
  }

  .schedule__id { grid-row: 1 / 3; }

  .schedule__value { justify-self: start; }

  .schedule__unit { grid-column: 2; }

  .schedule__label { grid-column: 2; }

  .hero__img { object-position: 82% 30%; }


  .cable__tag { top: calc(var(--padding-section-y) + var(--space-3xl)); }

  .contact .run.run--end .cable { height: var(--contact-cable-mobile); }

  .run__tap {
    right: calc(100% + var(--space-2xs));
    width: calc(var(--cable-gutter) - var(--cable-x) - var(--space-2xs));
  }


  .service { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }

  .service__text { grid-column: 1; grid-row: auto; }

  .service__link { justify-self: start; margin-top: var(--space-xs); }

  .flow__list { grid-template-columns: minmax(0, 1fr); }

  .flow__step { padding-left: 0; }

  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    aspect-ratio: auto;
  }

  .works-grid__item { aspect-ratio: 4 / 3; }

  .works-grid__item.works-grid__item--lead { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }

  .works-grid__item.works-grid__item--wide { grid-column: 1 / 3; aspect-ratio: 16 / 10; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (max-width: 478px) {
  .header__logo-img { height: var(--space-l); }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .hero__band { aspect-ratio: 4 / 3; }




  .contact__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .btn { white-space: normal; text-align: center; }

  .footer { grid-template-columns: minmax(0, 1fr); }
}