/* Montochem — arkusz stylów strony (tokeny + komponenty + style stron) */

:root {
  --color-bg: #ffffff;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-900: #2d2b2b;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --brand-blue: #0091d5;
  --brand-blue-700: #00679a;
  --brand-blue-900: #003f5e;
}

/* — reset / base — */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; text-wrap: pretty; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
a { color: var(--brand-blue-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.grayscale { filter: grayscale(1) contrast(1.08); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — przyciski — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* — obrazek zastępczy (miejsce na zdjęcie) — */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; padding: var(--space-3);
  background: linear-gradient(135deg, var(--color-neutral-900), #4a4645);
  color: color-mix(in srgb, #fff 70%, transparent);
  font-size: 13px; line-height: 1.4;
}

/* — masthead — */
.nav {
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  padding-block: var(--space-3);
  position: sticky; top: 0; z-index: 20; background: var(--color-bg);
  display: flex; align-items: center; gap: var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav a { white-space: nowrap; }
.nav a[aria-current='page'] { color: var(--color-accent); }
.nav-brand { margin-right: auto; }
.nav-brand img { display: block; height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .nav-links { display: none; } }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-800);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}
.kicker-blue { color: var(--brand-blue-700); }

/* — hero: pełnoekranowe zdjęcie, nakładka, tytuł do lewej — */
.hero { position: relative; min-height: 80vh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  background: var(--color-neutral-900); overflow: hidden; }
.hero-figure { position: absolute; inset: 0; margin: 0; }
.hero-figure .img-placeholder { width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, #0b0a0a 84%, transparent) 0%,
    color-mix(in srgb, #0b0a0a 62%, transparent) 46%,
    color-mix(in srgb, #0b0a0a 28%, transparent) 100%);
}
.hero-body { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding-block: calc(5 * var(--leading)) calc(4.5 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: clamp(40.3px, 5.51vw, 76.3px);
  letter-spacing: -0.02em; margin: 0; color: #fff;
  margin-left: -0.058em;
  max-width: 22ch;
}
.display .line { display: block; }
.display .line em { font-style: normal; color: var(--brand-blue); }
.hero .sub { font-size: 18px; line-height: var(--leading); max-width: 54ch;
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, #fff 82%, transparent); }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.hero .btn-ghost { color: #fff; border-color: #fff; }
.hero .btn-ghost:hover { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; }

/* — pasek zaufania — */
.trust { position: relative; z-index: 5; margin-top: calc(-2 * var(--leading));
  background: var(--color-bg); border-top: 2px solid var(--color-accent); }
.trust .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust .cell { padding: calc(1.5 * var(--leading)) clamp(16px, 2.4vw, 32px); }
.trust .cell + .cell { border-left: 2px solid var(--color-divider); }
.trust svg { display: block; width: 26px; height: 26px; stroke: var(--brand-blue); }
.trust .t-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: var(--leading); margin: var(--leading) 0 0;
  min-height: calc(2 * var(--leading)); }
.trust .t-copy { font-size: 14px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; }
@media (max-width: 880px) {
  .trust { margin-top: 0; }
  .trust .grid { grid-template-columns: repeat(2, 1fr); }
  .trust .cell:nth-child(odd) { border-left: 0; }
  .trust .cell:nth-child(n+3) { border-top: 2px solid var(--color-divider); }
}

/* — o firmie: układ asymetryczny — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(3.5 * var(--leading)) 0; }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0; }
.split-copy .note { font-size: 16px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 46ch; }
.split-copy .row { margin-top: var(--leading); }
.split-figure { margin: 0; }
.split-figure .img-placeholder { width: 100%; aspect-ratio: 4 / 3; }
.hq-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: #162522;
}
.hq-carousel-track {
  position: relative;
  aspect-ratio: 16 / 10;
}
.hq-carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 560ms ease;
}
.hq-carousel-slide.is-active { opacity: 1; z-index: 1; }
.hq-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hq-carousel-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - 32px, 480px);
}
.hq-carousel-arrow,
.hq-carousel-dots button {
  border: 1px solid rgb(255 255 255 / 28%);
  color: #fff;
  background: rgb(12 25 23 / 68%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hq-carousel-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}
.hq-carousel-arrow:hover { background: var(--color-accent-700); }
.hq-carousel-dots { display: flex; gap: 8px; }
.hq-carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}
.hq-carousel-dots button[aria-pressed="true"] {
  width: 28px;
  border-radius: 8px;
  background: #8fd8f7;
}
.hq-carousel-arrow:focus-visible,
.hq-carousel-dots button:focus-visible {
  outline: 3px solid #8fd8f7;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hq-carousel-slide { transition: none; }
}

/* — oferta — */
.offer { padding: calc(3 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.offer-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--leading); flex-wrap: wrap; }
.offer-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0; }
.offer-note { font-size: 15.5px; line-height: var(--leading); max-width: 40ch; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.offer .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px); margin-top: calc(2 * var(--leading)); }
.o-card { display: block; border-top: 2px solid var(--color-divider); padding-top: var(--leading);
  color: inherit; text-decoration: none; transition: border-color 140ms linear; }
.o-card .img-placeholder { width: 100%; aspect-ratio: 4 / 3; transition: transform 320ms cubic-bezier(.2,.7,.3,1); }
.o-card figure { margin: 0 0 var(--leading); overflow: hidden; }
.o-card:hover { border-color: var(--color-accent); }
.o-card:hover .img-placeholder { transform: scale(1.03); }
.o-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: var(--leading); margin: 0; }
.o-copy { font-size: 14.5px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent); }
.o-more { display: inline-block; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-blue-700);
  margin: var(--leading) 0 0; }
.o-card:hover .o-more { color: var(--color-accent); }
.offer .row { margin-top: calc(2 * var(--leading)); }
@media (max-width: 980px) { .offer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* — wartości / diagram — */
.values { padding: calc(3.5 * var(--leading)) 0 calc(4 * var(--leading)); }
.values-head { max-width: 52ch; }
.values-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0; }
.values-note { font-size: 16px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch; }
.values figure, .values-diagram { margin: calc(3 * var(--leading)) auto 0; max-width: 760px; }
.values figure img { display: block; width: 100%; height: auto; }

.values-diagram {
  /* Kolory zmierzone pipetą na uploads/montochem diagram.png */
  --diagram-cyan: #00a5dd;
  --diagram-crimson: #dd0037;
  --diagram-ink: #2b2a29;
}
/* Grubości linii, wielkość fontu i rozstrzelina są ustawiane atrybutami w
   includes/values-diagram.php (jednostki układu oryginalnego obrazka) — tutaj
   tylko kolory, font i animacja, żeby geometria została w jednym miejscu. */
.values-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.hex-outline { fill: none; stroke: var(--diagram-cyan); stroke-linejoin: round; }
.value-spoke { stroke: var(--diagram-cyan); stroke-linecap: round; }
.value-accent { stroke: var(--diagram-crimson); stroke-linecap: round; }
.hex-center, .value-label {
  font-family: 'Science Gothic Caps', 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  fill: var(--diagram-ink);
}
.value-dot { fill: var(--diagram-crimson); opacity: 0; transform-origin: center; transform: scale(0.4); }
.value-node { cursor: default; outline-offset: 6px; }
.value-node .value-spoke,
.value-node .value-dot {
  transition: stroke .25s ease, opacity .25s ease, transform .25s ease;
}
.value-node:hover .value-spoke, .value-node:focus-visible .value-spoke { stroke: var(--diagram-crimson); }
.value-node:hover .value-label, .value-node:focus-visible .value-label { fill: var(--diagram-crimson); }
.value-node:hover .value-dot, .value-node:focus-visible .value-dot { opacity: 1; transform: scale(1); }

/* Animacja "rysowania": heksagon i wąsy wyjeżdżają po swojej długości
   (stroke-dashoffset zdejmowany z wartości --len podanej przez PHP), potem
   wchodzą napisy i karmazynowe akcenty. Stany startowe są pod .js-enabled,
   więc bez JS diagram jest od razu w całości widoczny. */
/* Sama figura nie ma się wygaszać — animację niesie jej wnętrze, a wygaszony
   kontener zasłaniałby rysowanie. Z decorate() zostaje tylko klasa "active". */
.js-enabled .values-diagram.reveal { opacity: 1; transition: none; will-change: auto; }
.js-enabled .values-diagram .draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.1s var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}
.js-enabled .values-diagram .value-label,
.js-enabled .values-diagram .hex-center {
  opacity: 0;
  transition: opacity .7s ease, fill .25s ease;
  transition-delay: var(--delay, 0ms), 0ms;
}
.js-enabled .values-diagram.active .draw { stroke-dashoffset: 0; }
.js-enabled .values-diagram.active .value-label,
.js-enabled .values-diagram.active .hex-center { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .value-node .value-spoke, .value-node .value-dot { transition: none; }
  .js-enabled .values-diagram .draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .js-enabled .values-diagram .value-label,
  .js-enabled .values-diagram .hex-center { opacity: 1; transition: none; }
}

/* — CTA przed stopką — */
.cta { background: var(--brand-blue); color: #fff; }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--leading) clamp(24px, 4vw, 64px);
  padding-top: calc(2.5 * var(--leading)); padding-bottom: calc(2.5 * var(--leading)); }
.cta h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.2vw, 42px); line-height: clamp(27.6px, 3.39vw, 44.5px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em; max-width: 26ch; }
.cta h3 .line { display: block; }
.cta .btn { background: #fff; color: var(--brand-blue-900); border-color: #fff; }
.cta .btn:hover { background: var(--color-bg); color: var(--color-accent); border-color: var(--color-bg); }
@media (max-width: 780px) { .cta .wrap { grid-template-columns: 1fr; } }

/* — stopka — */
footer.site { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading));
  font-size: 14px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: calc(1.5 * var(--leading)) clamp(24px, 3vw, 48px); }
.foot-grid img { display: block; height: 54px; width: auto; margin-bottom: var(--leading); }
.foot-grid h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text); margin: 0 0 var(--half); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-grid a { color: inherit; }
.foot-grid a:hover { color: var(--color-accent); }
.foot-legal { display: flex; justify-content: space-between; gap: var(--leading);
  flex-wrap: wrap; margin-top: calc(2 * var(--leading));
  padding-top: var(--leading); border-top: 2px solid var(--color-divider);
  font-size: 13px; }
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--color-accent); }
.foot-legal .footer-link-button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  margin: 0; cursor: pointer; text-decoration: none;
}
.foot-legal .footer-link-button:hover { color: var(--color-accent); }
@media (max-width: 780px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* — odświeżony, jasny kierunek wizualny — */
:root {
  --color-bg: #fdfdfc;
  --color-surface: #f4f5f4;
  --color-text: #17201f;
  --color-accent: #d92d1c;
  --color-accent-600: #bc2415;
  --color-accent-700: #971e13;
  --color-accent-800: #71170e;
  --color-divider: #dce2e0;
  --color-neutral-900: #17201f;
  --brand-blue: var(--color-accent);
  --brand-blue-700: var(--color-accent-700);
  --brand-blue-900: #62150d;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-lg: 0 20px 55px rgb(23 32 31 / 14%);
}

body { font-size: 16px; line-height: 1.6; }
a { color: inherit; }
.wrap { max-width: 1280px; }

.btn {
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 8px 22px rgb(217 45 28 / 20%); }
.btn-secondary { border-color: #b7c2bf; background: rgb(255 255 255 / 80%); }
.btn-ghost { color: #fff; border: 1px solid rgb(255 255 255 / 72%); padding-inline: 20px; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid rgb(220 226 224 / 80%);
}
.nav {
  max-width: 1424px; min-height: 72px; margin: 0 auto; padding: 12px var(--edge);
  position: relative; background: transparent; border: 0; gap: 28px;
}
.nav-brand img { height: 54px; }
.nav-links { gap: clamp(18px, 2vw, 30px); }
.nav-links a {
  position: relative; padding: 10px 0; color: #42504d; font-size: 14px; font-weight: 600;
}
.nav-links a::after {
  content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px;
  transform: scaleX(0); transform-origin: right; background: var(--color-accent);
  transition: transform 180ms ease;
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--color-text); }
.nav-links a:hover::after, .nav-links a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav-mobile { display: none; margin-left: auto; }
.nav-mobile summary { display: grid; gap: 4px; list-style: none; cursor: pointer; padding: 10px 4px; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary span { display: block; width: 24px; height: 2px; background: var(--color-text); }
.nav-mobile-panel {
  position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 4px;
  padding: 20px var(--edge) 24px; background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 18px 30px rgb(23 32 31 / 8%);
}
.nav-mobile-panel a:not(.btn) { padding: 12px 0; font-weight: 700; border-bottom: 1px solid var(--color-divider); }
.nav-mobile-panel .btn { margin-top: 12px; justify-self: start; }

.nav-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.nav-lang-switch a { color: #8a9491; padding: 4px 2px; }
.nav-lang-switch a.is-active { color: var(--color-text); }
.nav-lang-switch a:hover { color: var(--color-text); }
.nav-lang-switch-mobile { margin-top: 12px; }

.hero { min-height: min(720px, calc(100dvh - 73px)); align-items: center; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  background: linear-gradient(90deg, rgb(10 18 17 / 88%) 0%, rgb(10 18 17 / 64%) 43%, rgb(10 18 17 / 16%) 100%);
}
.hero-body { padding-top: 96px; padding-bottom: 96px; }
.display { max-width: 15ch; font-size: clamp(42px, 5vw, 76px); line-height: .99; letter-spacing: -.045em; }
.display .line em { color: #ff6252; }
.hero .sub { max-width: 48ch; margin-top: 28px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
.hero .row { margin-top: 32px; }

.trust { margin-top: 0; border-top: 0; background: var(--color-surface); }
.trust .wrap { padding-top: 12px; padding-bottom: 12px; }
.trust .grid { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-bg); overflow: hidden; }
.trust .cell { padding: 28px clamp(20px, 2.3vw, 32px); }
.trust .cell + .cell { border-left: 1px solid var(--color-divider); }
.trust svg { width: 28px; height: 28px; stroke: var(--color-accent); }
.trust .t-title { min-height: auto; margin-top: 18px; font-size: 16px; }
.trust .t-copy { line-height: 1.5; color: #61706c; }

.rule2 { height: 1px; background: var(--color-divider); }
.split { padding: 130px 0; gap: 56px clamp(40px, 7vw, 120px); }
.split-title, .offer-title, .values-title { font-size: clamp(32px, 3.4vw, 51px); line-height: 1.04; letter-spacing: -.04em; }
.kicker { margin-bottom: 20px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--color-accent-700); }
.split-copy .note, .values-note, .offer-note { color: #53615e; }
.split-figure { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.split-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 500ms ease; }
.split-figure:hover img { transform: scale(1.025); }
.split-copy .row { margin-top: 32px; }

.offer { padding: 120px 0 130px; }
.offer-head { display: block; max-width: 640px; }
.offer-note { margin-top: 20px; max-width: 54ch; }
.offer .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); margin-top: 52px; }
.o-card { border-top: 1px solid var(--color-divider); padding-top: 16px; }
.o-card figure { border-radius: var(--radius-md); background: var(--color-surface); }
.o-card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms ease; }
.o-card:hover { border-color: var(--color-accent); color: var(--color-text); }
.o-card:hover figure img { transform: scale(1.04); }
.o-name { margin-top: 22px; font-size: 20px; }
.o-copy { color: #61706c; line-height: 1.55; }
.o-more { color: var(--color-accent-700); font-weight: 800; letter-spacing: .04em; text-transform: none; }
.offer .row { margin-top: 48px; }

.values { padding: 120px 0 138px; }
.values figure, .values-diagram { max-width: 840px; padding: 24px; border-radius: var(--radius-lg); background: var(--color-surface); }
.cta { background: #1b2826; }
.cta .wrap { padding-top: 82px; padding-bottom: 82px; }
.cta h3 { font-size: clamp(33px, 4vw, 54px); line-height: 1.03; letter-spacing: -.04em; }
.cta .btn { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.cta .btn:hover { color: #fff; background: var(--color-accent-600); border-color: var(--color-accent-600); }
footer.site { padding-top: 78px; }
.foot-grid h4 { color: var(--color-text); }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  header.site-header > .nav > .nav-lang-switch { display: none; }
  .nav-mobile { display: block; }
  .split { grid-template-columns: 1fr; padding: 86px 0; }
  .split-copy { max-width: 620px; }
  .offer, .values { padding: 86px 0; }
  .trust .grid { grid-template-columns: repeat(2, 1fr); }
  .trust .cell:nth-child(odd) { border-left: 0; }
  .trust .cell:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
}
@media (max-width: 640px) {
  .nav { min-height: 64px; }
  .nav-brand img { height: 42px; }
  .foot-grid img { height: 42px; }
  .hero { min-height: 620px; }
  .hero::after { background: linear-gradient(0deg, rgb(10 18 17 / 88%) 0%, rgb(10 18 17 / 50%) 70%, rgb(10 18 17 / 22%) 100%); }
  .hero-body { align-self: end; padding-top: 160px; padding-bottom: 48px; }
  .display { font-size: clamp(40px, 12vw, 56px); }
  .hero .sub { font-size: 16px; }
  .hero .row { gap: 10px; }
  .hero .btn { width: 100%; }
  .trust .wrap { padding-top: 8px; padding-bottom: 8px; }
  .trust .cell { padding: 22px 18px; }
  .trust .t-title { font-size: 15px; line-height: 1.35; }
  .trust .t-copy { display: none; }
  .offer .grid { grid-template-columns: 1fr; gap: 30px; margin-top: 38px; }
  .values figure, .values-diagram { margin-top: 42px; padding: 12px; }
  .cta .wrap { padding-top: 62px; padding-bottom: 62px; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* — korekty kierunku: wyraźniejsza marka, bez pastelowych akcentów — */
:root {
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --color-accent: #e52813;
  --color-accent-600: #c91f0d;
  --color-accent-700: #9f190c;
  --color-accent-800: #791307;
  --brand-blue: #008dd2;
  --brand-blue-700: #0077b5;
  --brand-blue-900: #00547f;
}

.btn {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 8px;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms cubic-bezier(.16, 1, .3, 1), background-position 320ms cubic-bezier(.16, 1, .3, 1), border-color 240ms ease;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(112deg, var(--color-accent) 0%, var(--color-accent) 48%, #a91b0d 52%, #a91b0d 100%);
  background-size: 220% 100%;
  background-position: left center;
  box-shadow: 0 10px 22px rgb(229 40 19 / 22%);
}
.btn-primary:hover, .btn-primary:focus-visible {
  color: #fff; background-position: right center; box-shadow: 0 15px 30px rgb(169 27 13 / 28%);
  transform: translateY(-2px);
}
.btn-secondary {
  overflow: visible; border-color: #aebbb7; color: var(--color-text);
  box-shadow: inset 0 0 0 0 var(--color-text);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  color: #fff; background: var(--color-text); border-color: var(--color-text);
  box-shadow: inset 0 -3.1em 0 0 var(--color-text), 0 10px 20px rgb(23 32 31 / 14%);
}
.btn-ghost { border-radius: 8px; }
.btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; border-color: #fff; background: rgb(255 255 255 / 14%); }

.display { font-weight: 800; letter-spacing: -.05em; }
.display .line em { color: #ff4029; }

.values figure, .values-diagram {
  max-width: 840px; padding: 0; border-radius: 0; background: transparent;
}

/* — profil firmy: zakres działalności zamiast powtórzonego diagramu — */
.company-profile {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
  gap: clamp(48px, 9vw, 148px);
  align-items: center;
  padding: clamp(92px, 11vw, 148px) 0;
}
.company-profile-intro {
  position: sticky;
  top: 112px;
  max-width: 470px;
}
.company-profile-intro h2 {
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.01;
  letter-spacing: -.05em;
}
.company-profile-intro > p {
  margin-top: 22px;
  color: #53615e;
  font-size: 17px;
  line-height: 1.65;
}
.company-profile-list {
}
.company-profile-list article {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 22px;
  padding: 31px 0 35px;
}
.company-profile-list article:not(:last-child) {
  border-bottom: 1px solid var(--color-divider);
}
.company-profile-list article > span {
  color: var(--brand-blue-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
}
.company-profile-list h3 {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.company-profile-list p {
  max-width: 48ch;
  margin-top: 11px;
  color: #53615e;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .company-profile {
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 86px 0;
  }
  .company-profile-intro { position: static; max-width: 620px; }
}
@media (max-width: 560px) {
  .company-profile { gap: 38px; padding: 70px 0; }
  .company-profile-list article { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 25px 0 29px; }
  .company-profile-intro > p { font-size: 16px; }
}

.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: #17201f;
}
.cta::before {
  content: ""; position: absolute; z-index: -1; width: min(52vw, 760px); aspect-ratio: 1;
  right: -16%; bottom: -72%; border-radius: 50%; background: var(--color-accent);
}
.cta::after {
  content: ""; position: absolute; z-index: -1; width: min(24vw, 360px); aspect-ratio: 1;
  right: 13%; top: -40%; border: 1px solid rgb(255 255 255 / 26%); border-radius: 50%;
}
.cta .wrap {
  position: relative; grid-template-columns: minmax(0, 1fr) auto; min-height: 350px;
  align-items: center; padding-top: 72px; padding-bottom: 72px;
}
.cta .wrap::after {
  content: ""; position: absolute; right: clamp(154px, 18vw, 260px); bottom: 64px; width: 116px; height: 2px;
  background: var(--color-accent);
}
.cta .cta-copy { position: relative; z-index: 1; max-width: 660px; }
.cta .kicker { color: #ff8c80; margin-bottom: 16px; }
.cta h3 { max-width: 13ch; }
.cta p { max-width: 48ch; margin: 22px 0 0; color: rgb(255 255 255 / 78%); }
.cta .btn {
  z-index: 1; color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / 68%);
  box-shadow: none;
}
.cta .btn:hover, .cta .btn:focus-visible {
  color: #17201f; background: #fff; border-color: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

@media (max-width: 780px) {
  .cta .wrap { grid-template-columns: 1fr; min-height: 0; }
  .cta .wrap::after { display: none; }
  .cta .btn { justify-self: start; margin-top: 28px; }
  .cta::before { width: 430px; right: -195px; bottom: -250px; }
  .cta::after { width: 220px; right: -90px; top: -180px; }
}

/* — realizacje — */
.page-hero-wide { padding-bottom: 38px; }
.project-list { padding: 38px 0 118px; }
.project-story {
  display: grid; grid-template-columns: minmax(260px, .82fr) minmax(420px, 1.18fr);
  gap: clamp(38px, 7vw, 116px); align-items: center; padding: 82px 0;
  border-top: 1px solid var(--color-divider);
}
.project-story:first-child { border-top: 0; padding-top: 18px; }
.project-story-reverse .project-copy { order: 2; }
.project-story-reverse .project-media { order: 1; }
.project-copy { max-width: 510px; }
.project-partner { margin: 0 0 11px; font-size: 14px; font-weight: 800; color: var(--color-accent-700); }
.project-copy .kicker { margin-bottom: 16px; color: #63716e; }
.project-copy h2 { font-size: clamp(29px, 3vw, 46px); line-height: 1.06; letter-spacing: -.042em; }
.project-copy > p:not(.project-partner) { margin-top: 20px; color: #53615e; }
.project-scope { display: grid; gap: 9px; padding: 0; margin: 28px 0; list-style: none; color: #344440; font-size: 14px; }
.project-scope li { display: flex; gap: 10px; align-items: baseline; }
.project-scope li::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--color-accent-700); }
.text-link span { transition: transform 180ms ease; }
.text-link:hover { color: var(--color-accent-700); }
.text-link:hover span { transform: translateX(4px); }
.project-media { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; align-items: end; }
.project-image { margin: 0; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-lg); background: var(--color-surface); }
.project-image-1 { grid-row: span 2; }
.project-image-2 { margin-bottom: 25px; }
.project-image img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.project-image-1 img { aspect-ratio: 4 / 5; }
.project-image-2 img { aspect-ratio: 1 / 1; }
.project-story:hover .project-image img { transform: scale(1.025); }

.references { padding: 40px 0 74px; overflow: hidden; background: var(--color-bg); }
.references-head { max-width: 600px; }
.references-head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.04em; }
.references-head p { margin-top: 18px; color: #53615e; }
.logo-marquee { margin-top: 54px; overflow: hidden; }
.logo-track { display: flex; width: max-content; animation: reference-marquee 56s linear infinite; }
.logo-set { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(48px, 8vw, 120px); padding-right: clamp(48px, 8vw, 120px); }
.logo-set img { display: block; width: 132px; max-height: 52px; object-fit: contain; }
.logo-set img[src*="henkel"] { width: 98px; }
.logo-set img[src*="synthos"] { width: 150px; }
.logo-wordmark { color: #4f5e5a; font-size: 28px; font-weight: 800; letter-spacing: -.055em; }
.trademark-note, .project-disclaimer { max-width: 760px; margin: 36px 0 0; color: #63716e; font-size: 13px; }
.project-disclaimer { margin: 28px 0 96px; }
@keyframes reference-marquee { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; }
  .logo-track { width: auto; animation: none; }
  .logo-set[aria-hidden="true"] { display: none; }
}
@media (max-width: 900px) {
  .project-story, .project-story-reverse { grid-template-columns: 1fr; }
  .project-story-reverse .project-copy, .project-story-reverse .project-media { order: initial; }
  .project-copy { max-width: 620px; }
}
@media (max-width: 560px) {
  .project-list { padding-bottom: 70px; }
  .project-story { padding: 62px 0; }
  .project-media { gap: 10px; }
  .project-image-2 { margin-bottom: 12px; }
  .references { padding: 70px 0 56px; }
  .logo-set { gap: 56px; padding-right: 56px; }
  .logo-set img { width: 108px; }
  .logo-wordmark { font-size: 24px; }
}

/* — rozszerzony zakres oferty — */
.service-scope { padding: 112px 0 128px; }
.service-scope-intro { max-width: 660px; }
.service-scope-intro h2 { font-size: clamp(31px, 3.5vw, 49px); line-height: 1.06; letter-spacing: -.04em; }
.service-scope-intro p { margin-top: 20px; color: #53615e; }
.service-scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--color-divider); }
.service-scope-grid article {
  min-height: 240px;
  padding: 40px 24px 38px 24px;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  background: transparent;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, border-radius 0.3s ease;
  display: flex;
  flex-direction: column;
}
.service-scope-grid article:nth-child(3n + 2) { border-left: 1px solid var(--color-divider); }
.service-scope-grid article:nth-child(3n + 3) { border-left: 1px solid var(--color-divider); }
.service-scope-grid article:hover,
.service-scope-grid article.is-active {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgb(23 32 31 / 9%);
  transform: translateY(-6px);
  z-index: 5;
  border-color: transparent;
}
.service-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  color: #53615e;
  stroke-width: 1.5;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.service-scope-grid article:hover .service-icon,
.service-scope-grid article.is-active .service-icon {
  color: var(--color-accent);
  transform: scale(1.1) rotate(5deg);
}
.service-scope-grid article:nth-child(2):hover .service-icon,
.service-scope-grid article:nth-child(2).is-active .service-icon {
  transform: scale(1.1) rotate(45deg); /* playful rotation for the gear icon */
}
.service-scope-grid h3 { font-size: 19px; line-height: 1.18; transition: color 0.3s ease; }
.service-scope-grid article:hover h3,
.service-scope-grid article.is-active h3 { color: var(--color-text); }
.service-scope-grid p { margin-top: 13px; color: #63716e; font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .service-scope { padding: 84px 0; }
  .service-scope-grid { grid-template-columns: repeat(2, 1fr); }
  .service-scope-grid article:nth-child(n) { padding: 36px 24px; border-left: 0; }
  .service-scope-grid article:nth-child(even) { border-left: 1px solid var(--color-divider); }
  .service-scope-grid article:hover,
  .service-scope-grid article.is-active { border-radius: var(--radius-lg); border-color: transparent; }
}
@media (max-width: 560px) {
  .service-scope-grid { grid-template-columns: 1fr; margin-top: 38px; }
  .service-scope-grid article:nth-child(n) { min-height: 0; padding: 28px 24px; border-left: 0; }
  .service-scope-grid article:hover,
  .service-scope-grid article.is-active { transform: translateY(-3px); }
}

/* — kariera — */
.career-hero { padding: 62px 0 108px; background: linear-gradient(180deg, #f7f9f8 0%, var(--color-bg) 100%); }
.career-hero-grid { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr); gap: clamp(40px, 8vw, 128px); align-items: center; }
.career-hero h1 { max-width: 10ch; font-size: clamp(42px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.career-hero p { max-width: 47ch; margin-top: 25px; color: #53615e; font-size: 18px; }
.career-hero .btn { margin-top: 32px; }
.career-hero figure { margin: 0; overflow: hidden; border-radius: 0; box-shadow: var(--shadow-lg); }
.career-hero figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.career-jobs { padding: 112px var(--edge) 126px; }
.career-jobs-head { max-width: 640px; }
.career-jobs-head h2, .career-application h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.045em; }
.career-jobs-head > p { margin-top: 18px; color: #53615e; }
.job-list { display: grid; gap: 0; margin-top: 52px; border-top: 1px solid var(--color-divider); }
.job-card { display: grid; grid-template-columns: 180px minmax(180px, .65fr) minmax(330px, 1.2fr) auto; gap: 30px; align-items: start; padding: 38px 0; border-bottom: 1px solid var(--color-divider); }
.job-photo { margin: 0; overflow: hidden; border-radius: 10px; background: var(--color-surface); }
.job-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 450ms cubic-bezier(.16, 1, .3, 1); }
.job-card:hover .job-photo img { transform: scale(1.035); }
.job-card h3 { font-size: 27px; line-height: 1.08; letter-spacing: -.035em; }
.job-intro > p { margin-top: 12px; color: #63716e; font-size: 14px; }
.job-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px !important; }
.job-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  font-size: 12px; font-weight: 600; color: #42504d;
}
.job-details { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.job-details h4 { margin: 0; color: var(--color-accent-700); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.job-details ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; color: #53615e; font-size: 14px; }
.job-details li { position: relative; padding-left: 15px; }
.job-details li::before { content: ""; position: absolute; top: .55em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.job-card .text-link { align-self: center; white-space: nowrap; font-size: 14px; }
.career-application {
  position: relative; isolation: isolate; overflow: hidden; padding: 108px 0;
  background:
    radial-gradient(circle at 6% 52%, rgb(0 141 210 / 18%), transparent 30%),
    radial-gradient(circle at 96% 18%, rgb(229 40 19 / 13%), transparent 25%),
    repeating-linear-gradient(90deg, rgb(0 141 210 / 5%) 0 1px, transparent 1px 76px),
    #f3fafc;
  border-top: 1px solid #cfe2e9; border-bottom: 1px solid #cfe2e9;
}
.career-application::before {
  content: ""; position: absolute; z-index: -1; top: -180px; right: 18%; width: 410px; aspect-ratio: 1;
  border: 1px solid rgb(0 141 210 / 22%); border-radius: 50%;
}
.career-application::after {
  content: ""; position: absolute; z-index: -1; bottom: -230px; left: 26%; width: 510px; aspect-ratio: 1;
  border: 1px solid rgb(229 40 19 / 18%); border-radius: 50%;
}
.career-application-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(400px, 1.25fr); gap: clamp(42px, 9vw, 140px); align-items: start; }
.career-application-copy { max-width: 440px; }
.career-application-copy > p { margin-top: 20px; color: #53615e; }
.career-application-copy .file-note { font-size: 14px; color: #63716e; }
.recruitment-steps { display: grid; gap: 22px; padding: 0; margin: 42px 0 0; list-style: none; }
.recruitment-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 15px; align-items: start; }
.recruitment-steps li > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--brand-blue); color: #fff; font-size: 13px; font-weight: 800; }
.recruitment-steps li:nth-child(even) > span { background: var(--color-accent); }
.recruitment-steps strong { display: block; color: var(--color-text); font-size: 15px; }
.recruitment-steps p { margin: 4px 0 0; color: #63716e; font-size: 13px; line-height: 1.5; }
.application-help { margin-top: 40px; padding: 24px; border: 1px solid rgb(0 141 210 / 22%); border-radius: 10px; background: rgb(255 255 255 / 68%); }
.application-help h3 { font-size: 16px; }
.application-help ul { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 18px; color: #63716e; font-size: 13px; }
.career-form { padding: 32px; border: 1px solid rgb(255 255 255 / 88%); border-radius: 14px; background: rgb(255 255 255 / 94%); box-shadow: 0 22px 56px rgb(0 84 127 / 14%); backdrop-filter: blur(8px); }
select.input { appearance: auto; background: #fff; }
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-drop { position: relative; }
.file-drop-label { display: flex; min-height: 122px; gap: 16px; align-items: center; padding: 20px; border: 1.5px dashed #aebbb7; border-radius: 10px; background: #fbfcfb; color: #53615e; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.file-drop-label:hover, .file-drop.is-dragging .file-drop-label { border-color: var(--brand-blue); background: #f0faff; box-shadow: inset 0 0 0 1px var(--brand-blue); }
.file-drop:focus-within .file-drop-label { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.file-drop-mark { display: grid; flex: 0 0 48px; width: 48px; height: 56px; place-items: center; border: 1px solid #ccd6d3; border-radius: 6px; background: #fff; color: var(--color-accent-700); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.file-drop-label strong { display: block; color: var(--color-text); font-size: 15px; }
.file-drop-label small { display: block; margin-top: 4px; color: #63716e; font-size: 13px; }
.file-drop.has-file .file-drop-label { border-style: solid; border-color: #8bb6a3; background: #f2faf6; }
.file-drop.has-file .file-drop-mark { border-color: #8bb6a3; color: #14633b; }
.honeypot { position: absolute; left: -9999px; }
.consent-field { display: flex; gap: 11px; align-items: flex-start; color: #53615e; font-size: 13px; line-height: 1.5; }
.consent-field input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--color-accent); }
.consent-field a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; }
.privacy-note { padding-top: 72px; padding-bottom: 112px; max-width: 900px; }
.privacy-note h2 { font-size: 23px; }
.privacy-note p { max-width: 72ch; color: #63716e; }
@media (max-width: 1050px) {
  .job-card { grid-template-columns: 180px 1fr; }
  .job-details { grid-column: span 2; }
  .job-card .text-link { grid-column: span 2; justify-self: start; }
}
@media (max-width: 900px) {
  .career-hero-grid, .career-application-grid { grid-template-columns: 1fr; }
  .career-hero { padding: 54px 0 78px; }
  .career-hero h1 { max-width: 13ch; }
  .career-hero figure { max-width: 720px; }
  .career-jobs { padding-top: 84px; padding-bottom: 84px; }
  .job-card { grid-template-columns: 1fr; gap: 24px; }
  .job-details, .job-card .text-link { grid-column: auto; }
}
@media (max-width: 560px) {
  .career-hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .career-hero p { font-size: 16px; }
  .job-photo { max-width: 280px; }
  .job-details { grid-template-columns: 1fr; gap: 22px; }
  .career-application { padding: 72px 0; }
  .career-form { padding: 21px; }
  .privacy-note { padding-top: 58px; padding-bottom: 76px; }
}

/* ══════════════════ podstrony ══════════════════ */

/* — nagłówek podstrony (o-firmie, oferta, realizacje, kontakt) — */
.page-hero { padding: 72px 0 0; }
.page-hero .kicker { margin-bottom: 16px; }
.page-hero h1 { max-width: 20ch; font-size: clamp(34px, 4vw, 56px); line-height: 1.03; letter-spacing: -.04em; }
.page-hero .lead { max-width: 62ch; margin-top: 22px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: #53615e; }

/* — split odwrócony (obraz po lewej) — */
/* kolumny odwrócone symetrycznie do .split, żeby zdjęcie po lewej było tej
   samej wielkości co zdjęcie po prawej w wariancie domyślnym */
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.reverse .split-copy { order: 2; }
.split.reverse .split-figure { order: 1; }
@media (max-width: 900px) {
  .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-copy, .split.reverse .split-figure { order: initial; }
}

/* — lista filarów / etapów współpracy — */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px); margin-top: 52px; }
.steps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step {
  position: relative;
  border-top: 2px solid var(--color-divider);
  padding: 32px 16px 24px 0;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.step:hover {
  border-top-color: var(--color-accent);
}
.step .num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-text) 5%, transparent);
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}
.step:hover .num {
  transform: scale(1.1) translateY(-6px);
  color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.step h3 {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  font-size: 20px;
  transition: color 0.3s ease;
}
.step:hover h3 {
  color: var(--color-accent-700);
}
.step p {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  color: #53615e;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .steps, .steps.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step .num { font-size: 72px; }
}
@media (max-width: 560px) {
  .steps, .steps.cols-3 { grid-template-columns: 1fr; }
  .step { padding-block: 24px 18px; }
  .step .num { font-size: 64px; top: 12px; }
  .step h3 { margin-top: 24px; }
}

/* — pełne karty oferty (oferta.php) — */
.offer-detail { padding: 90px 0; }
.offer-detail:first-of-type { padding-top: 8px; }
.offer-detail + .offer-detail { border-top: 1px solid var(--color-divider); }
.offer-detail .split-figure { aspect-ratio: 16 / 10; }
.offer-detail .split-figure img { height: 100%; aspect-ratio: auto; }
@media (max-width: 900px) { .offer-detail { padding: 64px 0; } }

/* — dofinansowanie UE (oferta.php) — */
.funding-note {
  max-width: 1080px; margin: 64px auto 0; padding: 0 0 68px; text-align: center;
  border-bottom: 1px solid var(--color-divider); background: #fff;
}
.funding-logos { display: block; width: 100%; max-width: 470px; height: auto; margin: 0 auto 38px; }
.funding-note h2 { max-width: 31ch; margin: 0 auto; font-size: clamp(25px, 2.8vw, 38px); line-height: 1.14; letter-spacing: -.04em; }
.funding-note > p:not(.funding-meta) { max-width: 64ch; margin: 24px auto 0; color: #53615e; line-height: 1.6; }
.funding-note ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; max-width: 790px;
  margin: 32px auto 0; padding: 0; text-align: left; list-style: none; color: #40504c; line-height: 1.55;
}
.funding-note li { position: relative; padding-left: 20px; }
.funding-note li::before {
  content: ""; position: absolute; top: .56em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
}
.funding-note li:nth-child(even)::before { background: var(--brand-blue); }
.funding-note .funding-meta { margin: 38px auto 0; font-size: 14px; color: #63716e; max-width: 76ch; }
.funding-note .text-link { margin-top: 26px; color: var(--brand-blue-700); }
@media (max-width: 700px) {
  .funding-note { margin-top: 48px; padding-bottom: 52px; }
  .funding-note ul { grid-template-columns: 1fr; gap: 11px; max-width: 520px; }
}
@media (max-width: 560px) {
  .funding-note { margin-top: 40px; padding-bottom: 44px; }
  .funding-logos { margin-bottom: 30px; }
}

/* — strona projektu EFRR (efrr.php) — */
.efrr-hero {
  position: relative; max-width: 840px; margin: 0 auto; padding: 88px 0 10px; text-align: center;
}
.efrr-hero::before {
  content: ""; position: absolute; z-index: -1; top: 30px; left: 50%; width: min(68vw, 730px); height: 215px;
  transform: translateX(-50%); background: radial-gradient(ellipse, rgb(0 141 210 / 10%), transparent 68%);
}
.efrr-hero .kicker { color: var(--brand-blue-700); }
.efrr-hero h1 { max-width: none; font-size: clamp(40px, 5vw, 64px); }
.efrr-hero .lead { margin-right: auto; margin-left: auto; color: #53615e; }
.efrr-project { max-width: 1120px; margin: 0 auto; padding: 74px 0 112px; text-align: center; }
.efrr-project > .kicker { margin-bottom: 14px; color: var(--color-accent-700); }
.efrr-project .project-name {
  max-width: 22ch; margin: 0 auto; font-size: clamp(30px, 4vw, 48px); line-height: 1.07; letter-spacing: -.045em;
}
.efrr-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 58px;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); text-align: left;
}
.efrr-cards article {
  min-height: 330px; padding: 38px clamp(28px, 4vw, 54px) 42px;
  background: linear-gradient(135deg, #fff7f5 0%, #fff 68%);
}
.efrr-cards article + article {
  padding: 38px clamp(28px, 4vw, 54px) 42px; border-left: 1px solid var(--color-divider);
  background: linear-gradient(225deg, #f1f9fc 0%, #fff 68%);
}
.efrr-icon {
  display: grid; width: 58px; height: 58px; margin-bottom: 30px; place-items: center; border-radius: 50%;
}
.efrr-icon svg { width: 29px; height: 29px; }
.efrr-icon-goal { color: var(--color-accent-700); background: #ffe3dd; }
.efrr-icon-results { color: var(--brand-blue-700); background: #d9f1fa; }
.efrr-cards h3 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -.035em; text-transform: none; color: var(--color-text); }
.efrr-cards p { max-width: 48ch; margin-top: 14px; color: #53615e; line-height: 1.68; }
.efrr-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; overflow: hidden;
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); text-align: left;
  box-shadow: 0 20px 46px rgb(23 32 31 / 10%);
}
.efrr-stats article { position: relative; padding: 42px clamp(28px, 4vw, 54px) 46px; background: #fff5f2; }
.efrr-stats article + article { background: #eff9fc; border-left: 1px solid var(--color-divider); }
.efrr-stat-icon {
  display: grid; width: 46px; height: 46px; margin-bottom: 32px; place-items: center; color: var(--color-accent-700);
  border: 1px solid rgb(229 40 19 / 26%); border-radius: 50%; background: #fff;
}
.efrr-stat-icon svg { width: 21px; height: 21px; }
.efrr-stats article + article .efrr-stat-icon { color: var(--brand-blue-700); border-color: rgb(0 141 210 / 28%); }
.efrr-stats .value { font-family: var(--font-heading); font-weight: 800; font-size: clamp(31px, 3.4vw, 46px); line-height: 1.04; letter-spacing: .01em; word-spacing: 0.18em; font-variant-numeric: tabular-nums; color: var(--color-accent-700); }
.efrr-stats article + article .value { color: var(--brand-blue-700); }
.efrr-stats .label { margin-top: 16px; color: #5c6663; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.efrr-logos-wrap { display: flex; justify-content: center; margin-top: 70px; padding-top: 42px; border-top: 1px solid var(--color-divider); }
.efrr-logos { width: 100%; max-width: 560px; height: auto; }
@media (max-width: 900px) {
  .efrr-cards, .efrr-stats { grid-template-columns: 1fr; }
  .efrr-cards article, .efrr-cards article + article { min-height: 0; padding: 32px 24px; border-left: 0; }
  .efrr-cards article + article { border-top: 1px solid var(--color-divider); }
  .efrr-stats article + article { border-top: 1px solid var(--color-divider); border-left: 0; }
}
@media (max-width: 560px) {
  .efrr-hero { padding-top: 58px; }
  .efrr-project { padding-top: 56px; padding-bottom: 72px; }
  .efrr-cards { margin-top: 42px; }
  .efrr-stats { margin-top: 42px; border-radius: 12px; }
  .efrr-stats article { padding: 30px 24px 32px; }
  .efrr-stat-icon { margin-bottom: 24px; }
  .efrr-logos-wrap { margin-top: 54px; padding-top: 30px; }
}

/* — galeria realizacji — */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); margin-top: 52px; }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 500ms ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-caption { padding: 18px 20px 22px; }
.gallery-caption .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-700); }
.gallery-caption h3 { margin-top: 8px; font-size: 18px; }
.gallery-caption p { margin-top: 6px; color: #61706c; font-size: 14px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* — kontakt — */
.contact-section { padding: 90px 0 48px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); margin-top: 52px; align-items: start; }
.contact-info { display: grid; gap: 28px; }
.contact-card { padding: 24px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.contact-card h3 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: #53615e; }
.contact-card p, .contact-card a { margin-top: 8px; font-size: 16px; color: var(--color-text); }
.contact-card a:hover { color: var(--color-accent); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: #42504d; }
.field .req { color: var(--color-accent); }
.input {
  width: 100%; min-height: 48px; padding: 10px 16px; font: inherit; font-size: 15px;
  color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: 8px;
}
.input:hover { border-color: #aebbb7; }
.input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 1px; }
textarea.input { min-height: 140px; resize: vertical; padding-top: 12px; }
.form-actions { margin-top: 6px; }
.form-note { font-size: 13px; color: #61706c; margin-top: 4px; }
.alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; }
.alert-success { background: #e4f4ea; color: #1c6b3c; border: 1px solid #bfe4cd; }
.alert-error { background: #fbe8e6; color: #9f190c; border: 1px solid #f3c3bd; }
.submission-success {
  position: relative; overflow: hidden; padding: clamp(30px, 5vw, 52px);
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.submission-success::after {
  content: ""; position: absolute; width: 220px; aspect-ratio: 1; right: -118px; bottom: -132px;
  border: 1px solid rgb(229 40 19 / 22%); border-radius: 50%; pointer-events: none;
}
.submission-success-mark {
  display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 25px;
  color: #fff; background: var(--color-accent); border-radius: 50%; box-shadow: 0 10px 20px rgb(229 40 19 / 22%);
  font-size: 26px; font-weight: 800; line-height: 1;
}
.submission-success-kicker { margin: 0 0 9px; color: var(--color-accent-700); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.submission-success h2 { max-width: 18ch; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.045em; }
.submission-success > p:not(.submission-success-kicker) { max-width: 50ch; margin: 17px 0 0; color: #53615e; font-size: 16px; line-height: 1.65; }
.submission-success-next {
  display: grid; gap: 5px; max-width: 54ch; margin-top: 30px; padding: 17px 0;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); color: #53615e; font-size: 14px; line-height: 1.55;
}
.submission-success-next strong { color: var(--color-text); font-size: 14px; }
.submission-success-next a { color: var(--color-accent-700); font-weight: 800; }
.submission-success-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.submission-success-link { color: var(--color-accent-700); font-size: 14px; font-weight: 800; }
.submission-success-link:hover { color: var(--color-accent); }
.application-success { background: rgb(255 255 255 / 94%); border-color: rgb(255 255 255 / 94%); }
.application-success .submission-success-mark { background: var(--brand-blue); box-shadow: 0 10px 20px rgb(0 141 210 / 20%); }
.application-success .submission-success-kicker, .application-success .submission-success-link, .application-success .submission-success-next a { color: var(--brand-blue-700); }
.application-success::after { border-color: rgb(0 141 210 / 24%); }

/* — mapka kontaktowa — */
.contact-map-section {
  margin-top: 40px;
  margin-bottom: 90px;
}
.contact-map-intro {
  margin-bottom: 24px;
}
.contact-map-intro h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -.035em;
  margin: 0;
}
.contact-map-container {
  position: relative;
  width: 100%;
  height: 480px;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
}
.contact-map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .contact-map-section {
    margin-top: 24px;
    margin-bottom: 60px;
  }
  .contact-map-intro {
    margin-bottom: 16px;
  }
  .contact-map-container {
    height: 350px;
  }
}

/* — kontakt: wyraźniejszy rytm i drugi kolor marki — */
.contact-section {
  position: relative;
  isolation: isolate;
  padding-top: 72px;
  background: #fff;
  border-top: 1px solid var(--color-divider);
}
.contact-grid { margin-top: 42px; }
.contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-card {
  min-height: 146px;
  padding: 26px;
  border-color: #d4e5ec;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 14px 28px rgb(0 84 127 / 7%);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgb(0 119 181 / 55%);
  box-shadow: 0 20px 34px rgb(0 84 127 / 13%);
}
.contact-card:first-child {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  color: var(--color-text);
  background: #f1f9fc;
  border-color: #c5e3ef;
  box-shadow: inset 0 4px 0 var(--brand-blue), 0 14px 28px rgb(0 84 127 / 8%);
}
.contact-card:first-child::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -70px;
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid rgb(0 141 210 / 20%);
  border-radius: 50%;
}
.contact-card:first-child h3,
.contact-card:first-child p,
.contact-card:first-child a { color: var(--color-text); }
.contact-card:first-child h3 { color: var(--brand-blue-700); }
.contact-card h3 { color: #49615f; }
.contact-card p, .contact-card a { font-weight: 700; }
.contact-card:first-child p { font-size: clamp(20px, 2vw, 26px); }
.contact-card a:hover { color: var(--brand-blue-700); }
.contact-card:first-child a:hover { color: var(--brand-blue-700); text-decoration: underline; text-underline-offset: 4px; }

.contact-form-panel {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #cfe2e9;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgb(0 141 210 / 10%), transparent 15rem),
    #f4fafc;
  box-shadow: none;
}
.contact-form-panel::before { content: none; }
.contact-form-intro {
  max-width: 44ch;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #c9dde5;
}
.contact-form-intro .kicker { margin-bottom: 12px; }
.contact-form-intro h2 { font-size: clamp(27px, 3vw, 39px); letter-spacing: -.04em; }
.contact-form-intro p { margin-top: 12px; color: #53615e; }
.contact-form-panel .form { gap: 22px; }
.contact-form-panel .field { gap: 8px; }
.contact-form-panel .field label { color: #344440; font-weight: 700; }
.contact-form-panel .input {
  padding: 11px 14px;
  background: rgb(255 255 255 / 88%);
  border: 1px solid #c7d9df;
  border-radius: 10px;
}
.contact-form-panel .input:hover { border-color: var(--brand-blue-700); }
.contact-form-panel .input:focus-visible {
  background: #fff;
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}
.contact-form-panel .btn-primary { background: var(--brand-blue); box-shadow: none; }
.contact-form-panel .btn-primary:hover,
.contact-form-panel .btn-primary:focus-visible { background: var(--brand-blue-700); box-shadow: none; }
.contact-form-panel .input:focus-visible { border-color: var(--brand-blue); outline-color: var(--brand-blue); }
.contact-map-container {
  border-color: #c7dfe8;
  box-shadow: 0 20px 48px rgb(0 84 127 / 11%);
}

/* — CTA: niebieski z identyfikacji, czerwony akcent — */
.cta {
  color: #fff;
  background: var(--brand-blue);
  border-top: 0;
}
.cta::before {
  right: -13%;
  bottom: -75%;
  background: var(--color-accent);
}
.cta::after {
  right: 13%;
  border-width: 5px;
  border-color: rgb(255 255 255 / 55%);
}
.cta .wrap::after { background: #fff; }
.cta .kicker { color: #fff; }
.cta p { color: rgb(255 255 255 / 78%); }
.cta .btn {
  color: var(--brand-blue-900);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 22px rgb(0 0 0 / 12%);
}
.cta .btn:hover, .cta .btn:focus-visible {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 15px 30px rgb(0 0 0 / 28%);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible { box-shadow: none; }

@media (max-width: 900px) {
  .contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .contact-section { padding-top: 58px; padding-bottom: 24px; }
  .contact-info { grid-template-columns: 1fr; }
  .contact-card:first-child { grid-column: auto; }
  .contact-card { min-height: 0; padding: 22px; }
  .contact-form-panel { padding: 28px 22px; }
}

/* — dane kontaktowe: lista kanałów zamiast zestawu kart — */
.contact-info { display: block; }
.contact-info-intro { max-width: 38ch; }
.contact-info-intro .kicker { margin-bottom: 12px; }
.contact-info-intro h2 { font-size: clamp(28px, 3vw, 41px); letter-spacing: -.04em; }
.contact-info-intro p { margin-top: 14px; color: #53615e; }
.contact-list { margin-top: 32px; border-top: 1px solid #cfe1e8; }
.contact-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 17px;
  align-items: start;
  padding: 22px 0;
  color: var(--color-text);
  border-bottom: 1px solid #cfe1e8;
}
a.contact-item {
  transition: color 180ms ease, padding-left 180ms cubic-bezier(.16, 1, .3, 1);
}
a.contact-item:hover {
  padding-left: 8px;
  color: var(--brand-blue-700);
}
.contact-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--brand-blue-700);
  background: #edf8fc;
  border-radius: 50%;
}
.contact-icon svg { width: 20px; height: 20px; }
.contact-item-email .contact-icon { color: var(--color-accent-700); background: #fff0ed; }
.contact-item-address .contact-icon { color: #53615e; background: #f1f4f3; }
.contact-item-copy { display: grid; gap: 4px; padding-top: 1px; color: #53615e; font-size: 15px; line-height: 1.55; }
.contact-item-copy strong { color: var(--color-text); font-size: 17px; line-height: 1.35; }
.contact-item-label {
  color: var(--brand-blue-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-item-email .contact-item-label { color: var(--color-accent-700); }
.contact-item-address .contact-item-label,
.contact-item-company .contact-item-label { color: #53615e; }
@media (max-width: 560px) {
  .contact-item { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 19px 0; }
  .contact-icon { width: 38px; height: 38px; }
  .contact-item-copy strong { font-size: 16px; overflow-wrap: anywhere; }
}

.career-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, calc(100dvh - 72px), 720px);
  padding: 0;
  background: var(--color-neutral-900);
  border: 0;
}
.career-hero-grid {
  display: block;
  position: relative;
  min-height: inherit;
  max-width: none;
  margin: 0;
  padding: 0;
}
.career-hero-grid > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: clamp(36px, 5vw, 74px) clamp(20px, 5vw, 78px);
}
.career-hero-grid > div:first-child > * {
  max-width: 54ch;
}
.career-hero-grid figure {
  position: absolute;
  z-index: 0;
  inset: 0;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.career-hero-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(10 18 17 / 88%) 0%, rgb(10 18 17 / 64%) 43%, rgb(10 18 17 / 16%) 100%);
}
.career-hero-grid figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.career-hero .kicker { color: #8fd8f7; }
.career-hero h1 {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(46px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -.04em;
}
.career-hero p { color: rgb(255 255 255 / 82%); }
.career-hero .btn { min-height: 40px; padding: 0 18px; font-size: 13px; }
@media (max-width: 760px) {
  .career-hero {
    min-height: min(680px, calc(100dvh - 64px));
    padding: 0;
  }
  .career-hero-grid figure {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .career-hero-grid figure::after {
    background: linear-gradient(0deg, rgba(11, 10, 10, 0.86) 0%, rgba(11, 10, 10, 0.5) 60%, rgba(11, 10, 10, 0.28) 100%);
  }
  .career-hero-grid > div:first-child {
    display: block;
    position: static;
    width: 100%;
    padding: 0 var(--edge);
  }
  .career-hero-grid > div:first-child > * {
    max-width: none;
  }
  .career-hero h1 { max-width: 13ch; font-size: clamp(39px, 11vw, 54px); }
}

/* — dziennik realizacji: dokumentacyjne kadry zamiast kopiowanego marquee — */
.project-journal {
  padding: clamp(82px, 11vw, 158px) 0 clamp(40px, 5vw, 64px);
}
.project-journal-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(280px, .62fr);
  column-gap: clamp(40px, 10vw, 150px);
  align-items: end;
  max-width: 1080px;
}
.project-journal-intro .kicker { grid-column: 1 / -1; margin-bottom: 18px; }
.project-journal-intro h2 {
  max-width: 13ch;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: .98;
  letter-spacing: -.05em;
}
.project-journal-intro p {
  max-width: 38ch;
  margin: 0 0 4px;
  color: #53615e;
  font-size: 17px;
  line-height: 1.65;
}
.project-journal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(12px, 1.8vw, 26px);
  margin-top: clamp(48px, 7vw, 96px);
}
.project-journal-card {
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  background: #1a2423;
}
.project-journal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease;
}
.project-journal-card::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgb(10 18 17 / 78%));
  pointer-events: none;
}
.project-journal-card figcaption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 19px;
  left: 22px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: #fff;
}
.project-journal-card figcaption span {
  color: #8fd8f7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.project-journal-card figcaption strong { font-size: 16px; letter-spacing: -.01em; }
.project-journal-card:hover img { transform: scale(1.045); }
.project-journal-card--1 { grid-column: span 7; min-height: clamp(390px, 43vw, 620px); }
.project-journal-card--2 { grid-column: span 5; min-height: clamp(390px, 43vw, 620px); }
.project-journal-card--3 { grid-column: span 4; }
.project-journal-card--4 { grid-column: span 4; }
.project-journal-card--5 { grid-column: span 4; }
.project-journal-card--6 { grid-column: span 5; }
.project-journal-card--7 { grid-column: span 4; }
.project-journal-card--8 { grid-column: span 3; }
.project-journal-link { margin-top: 40px; }
@media (max-width: 760px) {
  .project-journal { padding-top: 76px; }
  .project-journal-intro { display: block; }
  .project-journal-intro p { margin-top: 22px; font-size: 16px; }
  .project-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .project-journal-card[class] { grid-column: span 1; min-height: 245px; }
  .project-journal-card--1[class],
  .project-journal-card--2[class] { grid-column: span 2; min-height: 355px; }
  .project-journal-card figcaption { right: 16px; bottom: 14px; left: 16px; gap: 9px; }
  .project-journal-card figcaption strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-journal-card img { transition: none; }
}

/* — Custom select dropdown — */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-wrapper select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.custom-select-trigger:hover,
.custom-select-trigger:focus-visible {
  border-color: #aebbb7;
}
.custom-select.is-open .custom-select-trigger {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
  outline: none;
}
.custom-select-arrow {
  width: 16px;
  height: 16px;
  color: #53615e;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}
.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--brand-blue);
}
.custom-select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgb(23 32 31 / 10%);
  max-height: 240px;
  overflow-y: auto;
  
  /* Animation setup */
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-select.is-open .custom-select-options {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.custom-select-option {
  padding: 11px 16px;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.custom-select-option:hover {
  background-color: #f0faff;
  color: var(--brand-blue-700);
  padding-left: 22px; /* Cool slight shift to the right */
}
.custom-select-option.selected {
  background-color: var(--brand-blue);
  color: #ffffff;
  font-weight: 600;
}
.custom-select-option.selected:hover {
  background-color: var(--brand-blue-700);
  color: #ffffff;
  padding-left: 16px; /* Reset shift for selected item to look solid */
}

/* — Google reCAPTCHA v3 — */
.recaptcha-disclosure {
  font-size: 11px;
  color: #63716e;
  line-height: 1.4;
  margin-top: 16px;
  max-width: 52ch;
}
.recaptcha-disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.recaptcha-disclosure a:hover {
  color: var(--brand-blue-700);
}
.grecaptcha-badge {
  visibility: hidden;
}

/* ==========================================================================
   Montochem Animation System
   ========================================================================== */

/* Define the cubic bezier easing */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-speed: 0.95s;
}

/* 1. Global JS enabled styles */
.js-enabled .reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity var(--anim-speed) var(--ease-out-expo),
              transform var(--anim-speed) var(--ease-out-expo);
}

/* 2. Entrance styles */
.js-enabled .reveal-up {
  transform: translateY(28px);
}
.js-enabled .reveal-down {
  transform: translateY(-28px);
}
.js-enabled .reveal-left {
  transform: translateX(-35px);
}
.js-enabled .reveal-right {
  transform: translateX(35px);
}
.js-enabled .reveal-scale {
  transform: scale(0.96);
}
.js-enabled .reveal-fade {
  transform: none; /* Just opacity */
}

/* 3. Active (revealed) states */
.js-enabled .reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* 4. Hero & Subpages Hero - Premium Load Entrance Animations
   These run as CSS-only autoplay animations (not gated behind a JS "active"
   class) so the LCP element paints immediately instead of waiting for
   scroll-animations.js to load, parse and execute. */
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroImgScaleIn { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes heroUp22 { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroUp18 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroUp20 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes careerImgScaleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Homepage Hero */
.hero .hero-figure img {
  animation: heroFadeIn 1.6s var(--ease-out-expo) both,
             heroImgScaleIn 1.8s var(--ease-out-expo) both;
}
.hero .display .line {
  animation: heroUp22 0.9s var(--ease-out-expo) both;
}
.hero .display .line:nth-child(1) { animation-delay: 0.1s; }
.hero .display .line:nth-child(2) { animation-delay: 0.2s; }
.hero .display .line:nth-child(3) { animation-delay: 0.3s; }

.hero .sub {
  animation: heroUp18 0.9s var(--ease-out-expo) both;
  animation-delay: 0.4s;
}
.hero .row {
  animation: heroUp18 0.9s var(--ease-out-expo) both;
  animation-delay: 0.5s;
}

/* Career Hero & Page Hero (Subpages) */
.career-hero .career-hero-grid > div > * {
  animation: heroUp22 0.9s var(--ease-out-expo) both;
}
.career-hero .career-hero-grid > div > .kicker { animation-delay: 0.08s; }
.career-hero .career-hero-grid > div > h1 { animation-delay: 0.18s; }
.career-hero .career-hero-grid > div > p { animation-delay: 0.28s; }
.career-hero .career-hero-grid > div > .btn { animation-delay: 0.38s; }

.career-hero figure img {
  animation: careerImgScaleIn 1.3s var(--ease-out-expo) both;
  animation-delay: 0.15s;
}

.page-hero > * {
  animation: heroUp20 0.9s var(--ease-out-expo) both;
}
.page-hero > .kicker { animation-delay: 0.08s; }
.page-hero > h1 { animation-delay: 0.18s; }
.page-hero > .lead { animation-delay: 0.28s; }