/* --> .GLOBAL / RESET. <-- */

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('fonts/Gilmer Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('fonts/Gilmer Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('fonts/Gilmer Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('fonts/Gilmer Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('fonts/Gilmer Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  /* SITE */
  --gutter: clamp(1 * 1rem, ((1 - ((2 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2 * 1rem);
  --_layout---site--gutter: var(--gutter);
  --site-padding: clamp(1 * 1rem, ((1 - ((3 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3 * 1rem);
  --column-count: 12;
  --column-width: calc((min(var(--max-width--main), 100% - var(--site--margin) * 2) - (var(--site--gutter) * (var(--site--column-count) - 1))) / var(--site--column-count))
  --max-width--small: 50rem;
  --max-width--main: calc(80 * 1rem);
  --full: 100%;

  /* BORDER */
  --border-width--main: 0.0625rem;
  --border-radius-main: var(--_spacing---space--0-5);
  --border-radius-big: var(--_spacing---space--1);
  --border-radius-round: 1000px;

 /* SECTION */
 --_layout---section--s-min: 4;
 --_layout---section--s-max: 6;
 --_layout---section--page-top-min: 12;
 --_layout---section--page-top-max: 8;
 --_layout---section--section-padding: clamp(var(--_layout---section--s-min) * 1rem, ((var(--_layout---section--s-min) - ((var(--_layout---section--s-max) - var(--_layout---section--s-min)) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((var(--_layout---section--s-max) - var(--_layout---section--s-min)) / (var(--fluid-max) - var(--fluid-min))) * 100vw), var(--_layout---section--s-max) * 1rem);
 --section-padding-page-top: clamp(var(--_layout---section--page-top-min) * 1rem, ((var(--_layout---section--page-top-min) - ((var(--_layout---section--page-top-max) - var(--_layout---section--page-top-min)) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((var(--_layout---section--page-top-max) - var(--_layout---section--page-top-min)) / (var(--fluid-max) - var(--fluid-min))) * 100vw), var(--_layout---section--page-top-max) * 1rem);

 /* COLORS */
  --light: hsl(100, 50%, 95%);
  --white: hsl(0, 0%, 100%);
  --off-white: hsla(0, 0%, 100%, 0.9);
  --main: var(--blue);
 /* blue scale */
  --blue--900: color-mix(in srgb, var(--blue), black 80%);
  --blue--800: color-mix(in srgb, var(--blue), black 60%);
  --blue--700: color-mix(in srgb, var(--blue), black 40%);
  --blue--600: color-mix(in srgb, var(--blue), black 20%);
  --blue: hsl(216, 100%, 63%);
  --blue--400: color-mix(in srgb, var(--blue), white 20%);
  --blue--300: color-mix(in srgb, var(--blue), white 40%);
  --blue--200: color-mix(in srgb, var(--blue), white 60%);
  --blue--150: color-mix(in srgb, var(--blue), white 70%);
  --blue--100: color-mix(in srgb, var(--blue), white 80%);
  --blue--50: color-mix(in srgb, var(--blue), white 90%);
 /* cream scale */
  --cream--900: color-mix(in srgb, var(--cream), black 80%);
  --cream--800: color-mix(in srgb, var(--cream), black 60%);
  --cream--700: color-mix(in srgb, var(--cream), black 40%);
  --cream--600: color-mix(in srgb, var(--cream), black 20%);
  --cream: hsl(43, 71%, 93%);
  --cream--400: color-mix(in srgb, var(--cream), white 20%);
  --cream--300: color-mix(in srgb, var(--cream), white 40%);
  --cream--200: color-mix(in srgb, var(--cream), white 60%);
  --cream--100: color-mix(in srgb, var(--cream), white 80%);
  --cream--50: color-mix(in srgb, var(--cream), white 90%);
 /* SPACING */
  --fluid-min: 20;
  --fluid-max: 90;
  --_spacing---space--0-25: 0.25rem;
  --_spacing---space--0-5: clamp(0.375 * 1rem, ((0.375 - ((0.5 - 0.375) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((0.5 - 0.375) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 0.5 * 1rem);
  --_spacing---space--0-75: clamp(0.625 * 1rem, ((0.625 - ((0.75 - 0.625) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((0.75 - 0.625) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 0.75 * 1rem);
  --_spacing---space--1: clamp(0.875 * 1rem, ((0.875 - ((1 - 0.875) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1 - 0.875) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1 * 1rem);
  --_spacing---space--1-25: clamp(1 * 1rem, ((1 - ((1.25 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1.25 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1.25 * 1rem);
  --_spacing---space--1-5: clamp(1.25 * 1rem, ((1.25 - ((1.5 - 1.25) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1.5 - 1.25) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1.5 * 1rem);
  --_spacing---space--2: clamp(1.75 * 1rem, ((1.75 - ((2 - 1.75) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2 - 1.75) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2 * 1rem);
  --_spacing---space--2-5: clamp(2 * 1rem, ((2 - ((2.5 - 2) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2.5 - 2) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2.5 * 1rem);
  --_spacing---space--3: clamp(2.25 * 1rem, ((2.25 - ((3 - 2.25) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3 - 2.25) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3 * 1rem);
  --_spacing---space--3-5: clamp(2.75 * 1rem, ((2.75 - ((3.5 - 2.75) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3.5 - 2.75) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3.5 * 1rem);
  --_spacing---space--4: clamp(2.5 * 1rem, ((2.5 - ((4 - 2.5) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((4 - 2.5) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 4 * 1rem);
  --_spacing---space--5: clamp(3 * 1rem, ((3 - ((5 - 3) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((5 - 3) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 5 * 1rem);
  --_spacing---space--6: clamp(4 * 1rem, ((4 - ((6 - 4) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((6 - 4) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 6 * 1rem);

 /* TYPOGRAHY */
  --_font---primary: 'Bebas Neue', 'Impact', 'Inter', sans-serif;
  --_font---secondary: 'Gilmer', 'Impact', 'Inter', sans-serif;
  --_layout---fluid--min: 20;
  --_layout---fluid--max: 90;

  --_typography---h1--font-size-min-rem: 3.5;
  --_typography---h1--font-size-max-rem: 6.5;
  --_typography---h1--font-size: clamp(var(--_typography---h1--font-size-min-rem) * 1rem, ((var(--_typography---h1--font-size-min-rem) - ((var(--_typography---h1--font-size-max-rem) - var(--_typography---h1--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h1--font-size-max-rem) - var(--_typography---h1--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h1--font-size-max-rem) * 1rem);

  --_typography---h2--font-size-min-rem: 1.75;
  --_typography---h2--font-size-max-rem: 3;
  --_typography---h2--font-size: clamp(var(--_typography---h2--font-size-min-rem) * 1rem, ((var(--_typography---h2--font-size-min-rem) - ((var(--_typography---h2--font-size-max-rem) - var(--_typography---h2--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h2--font-size-max-rem) - var(--_typography---h2--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h2--font-size-max-rem) * 1rem);

  --_typography---h3--font-size-min-rem: 1.15;
  --_typography---h3--font-size-max-rem: 1.35;
  --_typography---h3--font-size: clamp(var(--_typography---h3--font-size-min-rem) * 1rem, ((var(--_typography---h3--font-size-min-rem) - ((var(--_typography---h3--font-size-max-rem) - var(--_typography---h3--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h3--font-size-max-rem) - var(--_typography---h3--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h3--font-size-max-rem) * 1rem);

  /* --> .THEMES. <-- */
  /* base */
  --background: var(--cream--100);
  --primary: var(--main);
  --secondary: color-mix(in srgb, var(--primary) 10%, transparent);
  --text: var(--blue--800);
  --text-secondary: var(--blue--700);
  --border: var(--blue--150);
  --border-hover: var(--blue);
}

.t-blue {
  --background: var(--blue);
  --primary: var(--cream);
  --secondary: color-mix(in srgb, var(--cream) 15%, transparent);
  --text: var(--cream);
  --text-secondary: var(--cream);
  --border: var(--blue--100);
  --border-hover: var(--cream);
}

li {
  list-style: "";
}
html {
  scroll-behavior: smooth;
  background-color: var(--background);
}
body {
	-webkit-font-smoothing: antialiased;
  font-family: var(--_font---secondary);
  font-size: inherit;
  line-height: 1.5;
  background-color: var(--background);
  color: var(--text);
  display: block;
  margin: 0px;
}
.page-wrap {
  overflow-x: clip;
}

/* --> .TYPOGRAPHY. <-- */
p, .text-main {
  color: currentColor;
  max-width: 60ch;
  text-wrap: pretty;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
  margin: 0px;
  letter-spacing: 0.04em;
}
.text-small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.text-large {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  max-width: 45ch; margin-top: 0px;
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--_font---primary);
  font-size: var(--_typography---h1--font-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--_font---primary);
  font-size: var(--_typography---h2--font-size);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.1325rem;
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--_font---secondary);
  font-size: var(--_typography---h3--font-size);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.03em;
  margin-bottom: 0.3em;
}

h1 em, .h1 em,
h2 em, .h2 em,
h3 em, .h3 em {
  color: var(--blue--900);
}

/* primary trim */
:is([class*="bebas-trim"], h1, h2) {
	display: flow-root;
}
:is([class*="bebas-trim"], h1, h2)::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.4em);
}
:is([class*="bebas-trim"], h1, h2)::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.3em);
}
/* secondary trim */
:is([class*="gilmer-trim"], h3, h4, h5, h6, p, blockquote) {
	display: flow-root;
}
:is([class*="gilmer-trim"], h3, h4, h5, h6, p, blockquote)::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.34em);
}
:is([class*="gilmer-trim"], h3, h4, h5, h6, p, blockquote)::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.39em);
}

/* --> .UTILITY. <-- */
.u-justify-center {
  align-items: center;
} 
.u-no-margin {
  margin: 0px;
}

/* --> .BUTTONS & LINKS. <-- */

.btn-holder {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: var(--_spacing---space--1);
  flex-wrap: wrap;
}
a, button {
  background-color: var(--primary);
  padding: unset;
  letter-spacing: 0.03em;
  display: inline-flex;
  width: fit-content;
  background-color: var(--blue);
  color: var(--white);
  font-size: 0.875rem;
  font-family: var(--_font---secondary);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: var(--_spacing---space--1);
  padding-left: var(--_spacing---space--1-5);
  padding-right: var(--_spacing---space--1-5);
  border-radius: var(--border-radius-main);
  transition: all 500ms ease-in-out;
  cursor: pointer;
}

.button-white {
  color: var(--blue);
  background-color: var(--white);
}

.button-small {
  font-size: 0.75rem;
  padding-top: var(--_spacing---space--1);
  padding-bottom: var(--_spacing---space--1);
  padding-left: var(--_spacing---space--1-5);
  padding-right: var(--_spacing---space--1-5);
}
a:hover,
button:hover {
  color: var(--white);
  background-color: var(--blue--400);
}

/* --> .LAYOUT. <-- */

section, .section{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--full);
  padding-top: var(--_layout---section--section-padding);
  padding-bottom: var(--_layout---section--section-padding);
  position: relative;
  background-color: var(--background);
  color: var(--text);
}
.section-container {
  max-width: var(--max-width--main);
  width: calc(100% - var(--site-padding) * 2);
  margin-inline: auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
  gap: var(--_spacing---space--4);
  color: currentcolor;
}
.container {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  container-type: inline-size;
  gap: inherit;
  position: relative;
}
.auto-top {
  margin-top: auto;
}
svg {
	max-width: 100%;
}
.u-heading > *,
.u-text > * {
	width: 100%;
	max-width: inherit !important;
  margin-inline: 0 !important;
	margin-top: 0 !important;
}
/* Background Slot Children */
.u-background-slot > * {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}
/* Alignment */
.u-alignment-inherit > * {
	text-align: inherit;
	justify-content: inherit;
	align-items: inherit;
}
.u-align-center {
  align-items: center;
}
/* Hide */
.u-hide {display: none !important;}
.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-hide-if-empty:empty,
.u-hide-if-empty:has(> *):not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)) {
	display: none !important;
}
/* Section spacer */
.u-section:has(> .u-section-spacer) {
	padding-top: 0;
  padding-bottom: 0;
}
.bottom-margin {
  margin-bottom: var(--_spacing---space--4) !important;
}
/* --> .U-GRID (base). <-- */
.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  width: 100%;
  overflow: visible;
  position: relative;
  --_is-multi-col: initial;
}
.u-grid.stretch {
  height: 100%;
  grid-auto-rows: 1fr;
}
.u-grid.stretch > * {
  height: 100%;
}

/* --> .NAV. <-- */

header {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  color: var(--blue--700);
  z-index: 999;
  padding-top: var(--_spacing---space--1);
}

.header-container {
  width: calc(100% - 2 * var(--site-padding));
  max-width: var(--max-width--main);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: var(--_spacing---space--0-5);
  padding-left: var(--_spacing---space--1);
  padding-right: var(--_spacing---space--1);
  border-radius: var(--border-radius-big);
  background-color: var(--white);
  transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
}
.header-logo-akcji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9rem;
  height: 2rem;
  background-color: var(--blue);
  -webkit-mask-image: url('logo-akcji.svg');
  mask-image: url('logo-akcji.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  transition: background-color 500ms ease-in-out, opacity 500ms ease-in-out;
}
header.over-hero .header-logo-akcji {
  background-color: transparent;
  opacity: 0;
}

.nav-logo {
  background-color: white;
  display: flex;
  height: 100%;
  max-height: 3rem;
  position: relative;
  z-index: 1000;
  margin-right: auto;
  padding: var(--_spacing---space--0-25);
  border: 0;
}
.nav-img {
  width: 100%;  
  height: 100%;
}
.nav-logo:hover {
  padding: var(--_spacing---space--0-25);
  border: 0;
}
nav {
  color: currentColor;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
nav ul {
  color: currentColor;
  width: fit-content;
  display: flex;
  flex-direction: row;
  gap: var(--gutter);
  padding-right: 1rem;
}
.nav-link {
  width: fit-content;
  color: var(--text);
  background-color: transparent;
  padding: 0;
  font-size: 0.85rem;
  transition: all 500ms ease-in-out;
  border: 0;
}
.nav-link:hover {
  color: var(--blue);
  background-color: transparent;
  border: 0;
}

.menu-button {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: currentColor;
  position: relative;
  z-index: 1000;
}
.menu-button__bar {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background-color: var(--primary);
  border-radius: 2px;
  transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}
.menu-button[aria-expanded="true"] .menu-button__bar:nth-child(1) {
  transform: translateY(0.25rem) rotate(45deg);
}
.menu-button[aria-expanded="true"] .menu-button__bar:nth-child(2) {
  transform: translateY(-0.25rem) rotate(-45deg);
}
.menu-button:hover {
  background-color: transparent;
  border: transparent;
}
.mobile-nav {
  display: none;
  position: fixed;
  justify-content: center;
  top: var(--_spacing---space--1);
  left: var(--site-padding);
  width: 100%;
  height: 0;
  overflow: hidden;
  color: var(--text);
  transition: height 500ms ease-in-out;
  interpolate-size: allow-keywords;
  z-index: 998;
}
.mobile-nav.open {
  height: fit-content;
}
.mobile-nav .nav-links-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2 * var(--site-padding));
  height: 100%;
  margin: 0;
  background-color: white;
  gap: var(--_spacing---space--2);
  padding: var(--_spacing---space--2);
  padding-top: 6rem;
  border-radius: var(--border-radius-big);
}
.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 1rem;
}

/* --> .HERO. <-- */
#hero {
  justify-content: flex-start;
  padding-top: var(--section-padding-page-top);
  padding-bottom: var(--_layout---section--section-padding);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#hero .section-container {
  gap: var(--_spacing---space--3);
}
#hero .bg-img {
  position: absolute;
  top: 25vh;
  width: 90vw;
  z-index: 2;
  pointer-events: none;
}
#hero .bg-img img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-stack {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 40rem;
  place-items: center;
}
.hero-stack > * {
  grid-column: 1;
  grid-row: 1;
}
.hero-stack .logo-akcji,
.hero-stack .logo-akcji-outline {
  width: 100%;
  aspect-ratio: 524 / 148;
  background-color: var(--primary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}
.hero-stack .logo-akcji {
  position: relative;
  z-index: 1;
  -webkit-mask-image: url('logo-akcji.svg');
  mask-image: url('logo-akcji.svg');
}
.hero-stack .logo-akcji-outline {
  position: relative;
  z-index: 3;
  -webkit-mask-image: url('logo-akcji-outline.svg');
  mask-image: url('logo-akcji-outline.svg');
}
#hero .section-container > p,
#hero .section-container > .btn-holder {
  position: relative;
  z-index: 3;
}
.hero-p {
  color: var(--cream);
  font-weight: 450;
  padding: var(--_spacing---space--1-5);
  background-color: var(--blue);
  border-radius: var(--border-radius-round);
  max-width: none;
  text-align: center;
}
/* --> .LICZNIK. <-- */

#licznik{
  background-color: var(--off-white);
  padding-top: calc(1.5 * var(--_layout---section--section-padding));
  padding-bottom: calc(2 * var(--_layout---section--section-padding));
}
#licznik .section-container {
  gap: var(--_spacing---space--6);
}
#licznik .h1 span {
  color: var(--primary);
}

/* --> .MAPA. <-- */

.poland-map {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}
.poland-map svg {
  width: 100%;
  height: auto;
  display: block;
}

.slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--1);
  overflow: clip;
}
.slider-viewport {
  flex: 1;
  overflow: hidden;
}
.slider-track {
  display: flex;
  gap: var(--gutter);
  transition: transform 500ms ease-in-out;
  will-change: transform;
}
.slider-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--_spacing---space--0-75);
  padding: var(--_spacing---space--1-5);
  border-radius: var(--border-radius-big);
  border: var(--border-width--main) solid var(--text-secondary);
  background-color: transparent;
  color: var(--text);
}
.slider-slide h3 {
  margin: 0;
}
.slider-slide p {
  color: var(--text-secondary);
  margin: 0;
}
.slider-arrow {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--border-radius-round);
  border: var(--border-width--main) solid var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 500ms ease-in-out, border-color 500ms ease-in-out, color 500ms ease-in-out;
}
.slider-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}
.slider-arrow:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--blue--700);
}
.slider-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 62em) {
  .slider-slide {
    flex-basis: calc((100% - var(--gutter)) / 2);
  }
}
@media (max-width: 38em) {
  .slider-slide {
    flex-basis: 100%;
  }
}

/* --> .JAK-DOLACZYC. <-- */

#jak-dolaczyc .section-container {
  gap: var(--_spacing---space--6);
}
.u-grid:has(> .step) {
  grid-template-rows: auto auto 1fr;
  max-width: 60em;
}
[data-md]
.step {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  grid-row: span 3;
  justify-items: center;
  text-align: center;
  gap: var(--_spacing---space--3);
  padding: var(--_spacing---space--2);
  padding-top: var(--_spacing---space--4);
  border-radius: var(--border-radius-big);
  border: var(--border-width--main) solid var(--border);
  background-color: transparent;
  position: relative;
}
.step-number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--border-radius-round);
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
  margin: 0;
}
.step-number svg {
  width: 1.1rem;
  height: 1.1rem;
}
.step-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
}
.step-icon--pin {
  display: inline-block;
  background-color: var(--blue);
  -webkit-mask-image: url('pin-outline.svg');
  mask-image: url('pin-outline.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.step:last-child {
  color: var(--cream);
  background-color: var(--primary);
  border-color: var(--primary);
}
.step:last-child .step-number {
  color: var(--primary);
  background-color: var(--background);
  border: var(--border-width--main) solid var(--primary);
}
.step:last-child .step-icon {
  color: currentColor;
}
/* --> .INSPIRACJE. <-- */

.inspo-button h3 {
  font-size: 1.15rem;
  color: var(--primary);
  transition: color 500ms ease-in-out;
}

.inspo-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--_spacing---space--1);
  padding: var(--_spacing---space--1-5);
  border-radius: var(--border-radius-big);
  border: var(--border-width--main) solid var(--border);
  background-color: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 500ms ease-in-out;
}

.inspo-button svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--primary);
  transition: color 500ms ease-in-out;
}

.inspo-button:hover {
  background-color: var(--primary);
  border-color: var(--border-hover);
  color: var(--off-white);
}
.inspo-button:hover svg,
.inspo-button:hover h3 {
  color: var(--off-white);
}

/* --> .FORMULARZ. <-- */

#formularz {
  background-color: var(--primary);
}
#formularz div:has(> h2) {
  color: var(--cream);
}

.contact-form {
  width: min(100%, 50rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gutter);
  background-color: var(--off-white);
  padding: var(--_spacing---space--2);
  border-radius: var(--border-radius-big);
}
label {
  font-size: 0.85rem;
}
.form-input {
  width: 100%;
  font-family: var(--_font---secondary);
  font-size: 1rem;
  font-weight: 400;
  color: var(--dark);
  border: var(--border-width--main) solid var(--primary);
  border-radius: var(--border-radius-main);
  background-color: transparent;
  margin-top: 0.5rem;
  padding: var(--_spacing---space--1) var(--_spacing---space--1-5);
  outline: none;
  transition: background-color 500ms ease-in-out, border-color 500ms ease-in-out;
}
.form-input:focus {
  background-color: var(--white);
}
.form-input::placeholder {
  font-size: 0.85rem;
  color: var(--primary);
}
.form-textarea {
  resize: none;
  flex: 1;
  min-height: 8rem;
}
.contact-form .button {
  margin-top: var(--_spacing---space--2);
  border: none;
}
.contact-form input[type="checkbox"] {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border: var(--border-width--main) solid var(--primary);
  border-radius: 30%;
  background-color: transparent;
  flex-shrink: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 500ms ease-in-out;
}
.contact-form input[type="checkbox"] + label {
  cursor: pointer;
}
.contact-form input[type="checkbox"]:checked {
  background-color: var(--primary);
}
.contact-form a.nav-link {
  color: var(--blue--700);
}
.form-feedback {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--_spacing---space--1-5);
  padding: var(--_spacing---space--1-5) var(--_spacing---space--2);
  border-radius: var(--border-radius-main);
  text-align: center;
}
.form-feedback.is-visible {
  display: flex;
}
.form-feedback--success {
  color: var(--blue--700);
  background-color: var(--secondary);
  border: var(--border-width--main) solid var(--primary);
  margin-top: var(--_spacing---space--2);
}
.form-feedback--success p {
  color: inherit;
}
.form-feedback--error {
  color: white;
  background-color: var(--primary);
}

/* --> .DLACZEGO 800. <-- */

#dlaczego-800 .container {
  align-items: center;
}

#dlaczego-800 .text-large {
  text-transform: none;
  font-weight: 500;
}

/* --> .FAQ. <-- */

.question-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 50rem;
  gap: var(--_spacing---space--0-25);
}
.question-con {
  width: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: var(--_spacing---space--1-25) var(--_spacing---space--1-5);
  padding-bottom: 0;
  border-radius: var(--border-radius-main);
  border: var(--border-width--main) solid var(--border);
  background-color: transparent;
  color: var(--primary);
  gap: var(--_spacing---space--1-5) !important;
  transition: height 350ms ease, background-color 350ms ease, color 350ms ease, border-color 350ms ease;
  interpolate-size: allow-keywords;
}
.question-con.open {
  background-color: var(--blue);
  border: var(--border-width--main) solid var(--border);
  border-color: var(--primary);
  padding-bottom: var(--_spacing---space--1-25);
  color: var(--cream);
}
.question-con h3 {
  margin: 0;
}
.question-con p {
  height: 0;
  overflow: hidden;
  transition: height 150ms ease;
}
.question-con.open p {
  overflow: visible;
  height: fit-content;
}
/* --> .FOOTER. <-- */

.bg-img.footer {
  width: 100%;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: var(--full);
  padding-top: var(--_spacing---space--2);
  padding-bottom: var(--_spacing---space--2);
  position: relative;
  color: var(--text);
  background-color: var(--blue--500);
  border-top: var(--border-width--main) solid var(--border);
}
footer .section-container {
  z-index: 1;
}
footer .nav-logo {
  margin-right: 0;
}
footer .container {
  justify-content: center;
}

footer nav ul {
  width: 100%;  
  flex-wrap: wrap;
}

@media (width < 38em) {
  footer nav ul {
    flex-direction: column;
    align-items: center;
  }
  footer p {
    text-align: center;
  }
}
/* --> .DATA ATTRIBUTE UTILITIES. <-- */

/* Direction modifiers */
.section-container[data-direction="horizontal"] {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
}
.section-container[data-direction="vertical"] {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.container[data-direction="horizontal"] {
  flex-flow: row wrap;
  align-items: flex-start;
}
.container[data-direction="vertical"] {
  flex-flow: column;
  align-items: flex-start;
}

[data-txt-align="center"] { text-align: center;}

/* Gap utilities */
[data-gap="none"] { gap: 0px;}
[data-gap="0-25"] { gap: 0.25rem; }
[data-gap="0-5"]  { gap: var(--_spacing---space--0-5); }
[data-gap="1"]    { gap: var(--_spacing---space--1); }
[data-gap="1-25"] { gap: var(--_spacing---space--1-25);}
[data-gap="1-5"]  { gap: var(--_spacing---space--1-5); }
[data-gap="2"]    { gap: var(--_spacing---space--2); }
[data-gap="2-5"]  { gap: var(--_spacing---space--2-5); }
[data-gap="3"]    { gap: var(--_spacing---space--3); }
[data-gap="3-5"]  { gap: var(--_spacing---space--3-5); }
[data-gap="4"]    { gap: var(--_spacing---space--4); }
[data-gap="6"]    { gap: var(--_spacing---space--6); }
[data-gap="base"] { gap: var(--_layout---site--gutter); }

/* U-grid column counts — Large (default) */
.u-grid[data-lg="1"]  { --cols: 1; --_is-multi-col: ; }
.u-grid[data-lg="2"]  { --cols: 2; }
.u-grid[data-lg="3"]  { --cols: 3; }
.u-grid[data-lg="4"]  { --cols: 4; }
.u-grid[data-lg="5"]  { --cols: 5; }
.u-grid[data-lg="6"]  { --cols: 6; }
.u-grid[data-lg="7"]  { --cols: 7; }
.u-grid[data-lg="8"]  { --cols: 8; }
.u-grid[data-lg="9"]  { --cols: 9; }
.u-grid[data-lg="10"] { --cols: 10; }
.u-grid[data-lg="11"] { --cols: 11; }
.u-grid[data-lg="12"] { --cols: 12; }

/* Button disabled */
[data-button]:has(button:disabled) {
	opacity: 0.5;
  pointer-events: none;
}

/* Number attributes */
[data-number="-1"]{--number: initial;}[data-number="0"]{--number: 0;}[data-number="1"]{--number:1}[data-number="2"]{--number:2}[data-number="3"]{--number:3}[data-number="4"]{--number:4}[data-number="5"]{--number:5}[data-number="6"]{--number:6}[data-number="7"]{--number:7}[data-number="8"]{--number:8}[data-number="9"]{--number:9}
[data-number="10"]{--number:10}[data-number="11"]{--number:11}[data-number="12"]{--number:12}[data-number="13"]{--number:13}[data-number="14"]{--number:14}[data-number="15"]{--number:15}[data-number="16"]{--number:16}[data-number="17"]{--number:17}[data-number="18"]{--number:18}[data-number="19"]{--number:19}
[data-number="20"]{--number:20}[data-number="21"]{--number:21}[data-number="22"]{--number:22}[data-number="23"]{--number:23}[data-number="24"]{--number:24}[data-number="25"]{--number:25}[data-number="26"]{--number:26}[data-number="27"]{--number:27}[data-number="28"]{--number:28}[data-number="29"]{--number:29}
[data-number="30"]{--number:30}[data-number="31"]{--number:31}[data-number="32"]{--number:32}[data-number="33"]{--number:33}[data-number="34"]{--number:34}[data-number="35"]{--number:35}[data-number="36"]{--number:36}[data-number="37"]{--number:37}[data-number="38"]{--number:38}[data-number="39"]{--number:39}
[data-number="40"]{--number:40}[data-number="41"]{--number:41}[data-number="42"]{--number:42}[data-number="43"]{--number:43}[data-number="44"]{--number:44}[data-number="45"]{--number:45}[data-number="46"]{--number:46}[data-number="47"]{--number:47}[data-number="48"]{--number:48}[data-number="49"]{--number:49}
[data-number="50"]{--number:50}[data-number="51"]{--number:51}[data-number="52"]{--number:52}[data-number="53"]{--number:53}[data-number="54"]{--number:54}[data-number="55"]{--number:55}[data-number="56"]{--number:56}[data-number="57"]{--number:57}[data-number="58"]{--number:58}[data-number="59"]{--number:59}
[data-number="60"]{--number:60}[data-number="61"]{--number:61}[data-number="62"]{--number:62}[data-number="63"]{--number:63}[data-number="64"]{--number:64}[data-number="65"]{--number:65}[data-number="66"]{--number:66}[data-number="67"]{--number:67}[data-number="68"]{--number:68}[data-number="69"]{--number:69}
[data-number="70"]{--number:70}[data-number="71"]{--number:71}[data-number="72"]{--number:72}[data-number="73"]{--number:73}[data-number="74"]{--number:74}[data-number="75"]{--number:75}[data-number="76"]{--number:76}[data-number="77"]{--number:77}[data-number="78"]{--number:78}[data-number="79"]{--number:79}
[data-number="80"]{--number:80}[data-number="81"]{--number:81}[data-number="82"]{--number:82}[data-number="83"]{--number:83}[data-number="84"]{--number:84}[data-number="85"]{--number:85}[data-number="86"]{--number:86}[data-number="87"]{--number:87}[data-number="88"]{--number:88}[data-number="89"]{--number:89}
[data-number="90"]{--number:90}[data-number="91"]{--number:91}[data-number="92"]{--number:92}[data-number="93"]{--number:93}[data-number="94"]{--number:94}[data-number="95"]{--number:95}[data-number="96"]{--number:96}[data-number="97"]{--number:97}[data-number="98"]{--number:98}[data-number="99"]{--number:99}[data-number="100"]{--number:100}

/* --> .MEDIA QUERIES. <-- */
/* Mobile nav — activate at small screens */
@media (max-width: 37.5em) {
  header nav {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .mobile-nav {
    display: block;
  }
}

/* U-grid — Medium (< 60em) */
@media (max-width: 62em) {
  .u-grid[data-md="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-md="2"]  { --cols: 2; }
  .u-grid[data-md="3"]  { --cols: 3; }
  .u-grid[data-md="4"]  { --cols: 4; }
  .u-grid[data-md="5"]  { --cols: 5; }
  .u-grid[data-md="6"]  { --cols: 6; }
  .u-grid[data-md="7"]  { --cols: 7; }
  .u-grid[data-md="8"]  { --cols: 8; }
  .u-grid[data-md="9"]  { --cols: 9; }
  .u-grid[data-md="10"] { --cols: 10; }
  .u-grid[data-md="11"] { --cols: 11; }
  .u-grid[data-md="12"] { --cols: 12; }
}
/* U-grid — Small (< 38em) */
@media (max-width: 38em) {
  .u-grid[data-sm="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-sm="2"]  { --cols: 2; }
  .u-grid[data-sm="3"]  { --cols: 3; }
  .u-grid[data-sm="4"]  { --cols: 4; }
  .u-grid[data-sm="5"]  { --cols: 5; }
  .u-grid[data-sm="6"]  { --cols: 6; }
  .u-grid[data-sm="7"]  { --cols: 7; }
  .u-grid[data-sm="8"]  { --cols: 8; }
  .u-grid[data-sm="9"]  { --cols: 9; }
  .u-grid[data-sm="10"] { --cols: 10; }
  .u-grid[data-sm="11"] { --cols: 11; }
  .u-grid[data-sm="12"] { --cols: 12; }
}
/* U-grid — XSmall (< 20em) */
@media (max-width: 20em) {
  .u-grid[data-xs="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-xs="2"]  { --cols: 2; }
  .u-grid[data-xs="3"]  { --cols: 3; }
  .u-grid[data-xs="4"]  { --cols: 4; }
  .u-grid[data-xs="5"]  { --cols: 5; }
  .u-grid[data-xs="6"]  { --cols: 6; }
  .u-grid[data-xs="7"]  { --cols: 7; }
  .u-grid[data-xs="8"]  { --cols: 8; }
  .u-grid[data-xs="9"]  { --cols: 9; }
  .u-grid[data-xs="10"] { --cols: 10; }
  .u-grid[data-xs="11"] { --cols: 11; }
  .u-grid[data-xs="12"] { --cols: 12; }
}