/* ===== CSS VARIABLES ===== */

  :root {
    --primary-default: #272828;
    --primary-text-on-default: #e8e4db;
    --primary-text-on-light: #272828;
    --primary-container-border: #e8e4db;
    --primary-icon-on-default: #e8e4db;
    --light-beige-400: #e8e4db;
    --light-beige-100: #fdfcfb;
    --light-grey-400: #dadada;
    --medium-beige-600: #b6aea6;
    --primary-photo-filter: #504c45;

    --font-title: 'Sora', sans-serif;
    --font-body: 'Schibsted Grotesk', sans-serif;
    --font-tiny: 'Anek Latin', sans-serif;

    --text-6lx: 64px;
    --text-lg: 18px;
    --text-base: 16px;
    --text-tiny: 12px;

    --s4: 16px;
    --s6: 24px;
    --s8: 32px;
    --s12: 48px;
    --s24: 96px;
    --s32: 128px;

    --max-content: 1440px;
    --full-width: 1660px;

    --light-beige-200: var(--light-beige-200);
    --arch-bg: #bfb9b3;
    --faq-bg: #f3f2f1;
  }

  /* ===== RESET ===== */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--primary-default);
    color: var(--primary-text-on-default);
    overflow-x: hidden;
  }

  img { display: block; max-width: 100%; }

  a { text-decoration: none; color: inherit; }

  p { margin: 0; }

  /* ===== LAYOUT HELPERS ===== */

  .text-go-to-end {text-align:right;}

  .container {
    max-width: var(--max-content);
    margin: 0 auto;
  
  }

  /* ===== SHARED SECTION INNER CONTAINER ===== */

  .arch-inner,
  .story-inner,
  .filozofia-inner,
  .realizacje-inner,
  .opinie-inner {
    max-width: var(--max-content);
    margin: 0 auto;
  }

  /* ===== SHARED PHOTO OVERLAYS ===== */

  .realizacje-photo__filter,
  .opinie-photo__filter,
  .blog-card__photo-filter {
    position: absolute;
    inset: 0;
    background: var(--primary-photo-filter);
    mix-blend-mode: color;
    pointer-events: none;
  }

  .realizacje-photo__noise,
  .opinie-photo__noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    pointer-events: none;
  }

  /* ===== NAVIGATION ===== */

  .nav__logo {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--light-beige-400);
  }

  .nav__links a {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--light-beige-400);
    opacity: 0.75;
    transition: opacity 0.2s;
  }

  .nav__links a:hover { opacity: 1; }

  .nav__cta {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--light-beige-400);
    border: 1px solid rgba(232,228,219,0.4);
    padding: 10px 24px;
    transition: background 0.2s, color 0.2s;
  }

  .nav__cta:hover {
    background: var(--light-beige-400);
    color: var(--primary-default);
  }

  /* ===== HERO / HEADER_HOME ===== */
	.hero {
		position: relative;
		width: 100%;
		height: 100vh;
		min-height: 834px;
		background: var(--primary-default);
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		padding-top: 111px;
	}

.hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    pointer-events: auto;
}

/* Pierwsze zdjęcie widoczne od razu */
.hero__img:first-child {
    opacity: 1;
    z-index: 2;
}

/* Animacja przenikania – 5 zdjęć */
@keyframes crossfade {
    0%    { opacity: 0; }
    16%   { opacity: 1; }
    20%   { opacity: 1; }   /* czas widoczności jednego zdjęcia */
    36%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* Opóźnienia dla 5 zdjęć (cały cykl = 20s) */
.hero__img:nth-child(1) { animation: crossfade 20s infinite; }
.hero__img:nth-child(2) { animation: crossfade 20s infinite 4s; }
.hero__img:nth-child(3) { animation: crossfade 20s infinite 8s; }
.hero__img:nth-child(4) { animation: crossfade 20s infinite 12s; }
.hero__img:nth-child(5) { animation: crossfade 20s infinite 16s; }

.hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 568px;
  height: 697px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero__photo-overlay {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.hero__photo:hover .hero__photo-overlay {
  opacity: 0;
}

  .hero__grid {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 398px;
    height: 528px;
    background: url('assets/kratka_header_home.svg') no-repeat;
    pointer-events: none;
    z-index: 3;
    transform-origin: left center;
    animation: heroPulseLeft 14s ease-in-out infinite;
  }
  
  .hero__squares {
    position: absolute;
    bottom: 0; right: 0;
	width: 616px;
	height: 355px;
    opacity: 0.35;
    background: url('assets/ciemny noise 10-2 copy.png') no-repeat;
    pointer-events: none;
  }

  .hero__content {
	  position: relative;
	  z-index: 2;
	  margin: auto;
	height: 100%;
	padding-top: 110px;
    width: 100%;           /* zamiast 1440px */
    max-width: var(--max-content);     /* dodaj to */
    margin: 0 auto;
}
	
  .hero__title {
    font-family: var(--font-title);
    font-size: 101px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--light-beige-400);
    margin-bottom: 32px;
	position:relative;
	z-index:2;
	display: initial;
  }
  


  .hero__title span.line-2 {
	padding-left:250px;
  }

  .hero__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--light-beige-400);
    max-width: 386px;
    margin-bottom: 40px;
  }

  .hero__circles {
    display: flex;
	opacity:0.8;
	position: absolute;
	bottom: 100px;
  }

  .hero__circle {
    width: 171px; height: 171px;
    margin-right: -65px;
  }

  .hero__circle--dark {
    background: url('assets/kolo3-3.png') no-repeat;
    position: relative;
    z-index: 2;
    animation: darkRotate 25s linear infinite, moveRightDark 18s ease-in-out infinite;
  }

  .hero__circle--light {
    background: url('assets/kolo2-2.png') no-repeat;
    position: relative;
    z-index: 1;
    animation: lightRotate 30s linear infinite reverse, moveRightLight 22s ease-in-out infinite, lightScale 22s ease-in-out infinite;
  }

  .hero__scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
	background: url('assets/arrow.svg') no-repeat;
	height:100px;
	width:100px;
  }
  
@keyframes heroPulseLeft {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);   /* powiększenie o 5% */
  }
}


@keyframes darkRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes lightRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Przesunięcie w prawo i powrót do startu */
@keyframes moveRightDark {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(30px); }   /* max przesunięcie ciemnego */
}

@keyframes moveRightLight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }   /* max przesunięcie jasnego */
}

/* Pomniejszanie jasnego (bez zmian) */
@keyframes lightScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.85); }
}

  /* ===== SECTION: ARCHITEKTURA NARZĘDZIEM ===== */

  .section-arch {
    position: relative;
    background: var(--arch-bg);
    padding: var(--s32) 0;
    overflow: hidden;
  }

  .section-arch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/css-bg-b9a4dcbc-d2af-41b5-a742-ae4cb0f908e8.jpg') center/cover;
    opacity: 0.2;
    pointer-events: none;
  }

  .arch-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 80px;
    align-items: center;
  }

  .arch-title {
	  font-size: var(--text-6lx);
	  color: var(--primary-text-on-light);
	  text-transform: uppercase;
	  font-family: var(--font-title);
  }

  .arch-left {
    flex-shrink: 0;
    width: 661px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
  }

  .arch-text-block {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
    width: 100%;
  }

  /* staggered layout matching Figma */

  .arch-title span { display: block; }

  .arch-title span:nth-child(2) { margin-left: 218px; }

  .arch-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-text-on-light);
    padding-left: 200px;
  }

  .arch-btns {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .btn--outline-dark {
    background: transparent;
    border: 1px solid var(--primary-default);
    color: var(--primary-text-on-light);
  }

  .btn--outline-dark:hover {
    background: rgba(39,40,40,0.08);
  }

  .arch-photo {
    flex: 1;
    position: relative;
    aspect-ratio: 580/477;
    overflow: hidden;
  }

  .arch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .arch-circle {
    position: absolute;
	width: 90px;
	height: 90px;
	top: 12%;
    right: 4%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #6b6560, #3a3632);
    opacity: 0.82;
    pointer-events: none;
	
	animation: moveLeftAndBackCircle 44s ease-in-out infinite;
  }
  
	@keyframes moveLeftAndBackCircle {
	  0%   { transform: translate(0);}
	  50%  { transform: translate(-60px,20px); }
	  100% { transform: translate(0); }
	}
  
  
  /* ===== SECTION: OFERTA ===== */

  .section-oferta {
    background: var(--primary-default);
    padding: var(--s32) 0;
	max-width: var(--max-content);
	margin: auto;
  }

  .section-header {
    display: flex;
    gap: 29px;
    align-items: flex-end;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-header__title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    flex: 1;
  }

  .section-header__desc {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--light-beige-400);
	width: 600px;
	flex-shrink: 0;
	padding-bottom: 34px;
  }

  .offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
  
  }

  .offer-item {
    border-left: 1px solid var(--primary-container-border);
    border-right: 1px solid var(--primary-container-border);
    padding: var(--s12) var(--s4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 628px;
	position: relative;
	overflow: hidden;
  }

	.offer-item::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-size: cover;
	  background-position: center;
	  opacity: 0;
	  transition: opacity 0.45s ease;
	  z-index: 0;
	}

	/* Przypisanie zdjęć do poszczególnych kart */
	.offer-item:nth-child(1)::before { background-image: url('assets/offer-1.png'); }
	.offer-item:nth-child(2)::before { background-image: url('assets/offer-2.png'); }
	.offer-item:nth-child(3)::before { background-image: url('assets/offer-3.png'); }
	.offer-item:nth-child(4)::before { background-image: url('assets/offer-4.png'); }

	/* Pojawianie się tła */
	.offer-item:hover::before {
	  opacity: 1;
	}

  .offer-item:not(:first-child) { border-left: none; }

  .offer-item__top {position:relative; z-index:2;}

  .offer-item__num {
    font-family: var(--font-title);
    font-size: 80px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    margin-bottom: 32px;
  }

  .offer-item__title {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    margin-bottom: 12px;
  }

  .offer-item__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--light-beige-400);
    margin-bottom: 12px;
  }

  .text-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-tiny);
    font-size: var(--text-tiny);
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-icon-on-default);
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .text-btn:hover { opacity: 0.7; }

  .text-btn svg { width: 20px; height: 20px; fill: var(--primary-icon-on-default); }

  .offer-item__img {
    width: 100%;
    aspect-ratio: 243/178;
    object-fit: contain;
	position:relative;
	z-index:2;
  }

  .section-btn-wrap {
    display: flex;
    justify-content: flex-end;
    max-width: var(--max-content);
    margin: 60px 0 0 0;   
  }

  .btn {
    display: inline-flex;
    align-items: center;
    padding: 16px var(--s6);
    border: 1px solid var(--primary-container-border);
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .btn--light {
    background: var(--light-beige-400);
    color: var(--primary-text-on-light);
    border-color: var(--primary-container-border);
  }

  .btn--light:hover { 
	  background: none transparent;
	  color: #fff;
  }

  .btn--dark {
    background: var(--primary-default);
    color: var(--light-beige-100);
    border-color: var(--primary-default);
  }

  .btn--dark:hover { 
	background: none transparent;
	color: var(--primary-text-on-light);
  }

  /* ===== SECTION: STORY ===== */

  .section-story {
    position: relative;
    background: var(--primary-default);
    padding: var(--s24) 0;
    overflow: hidden;
  }

  .section-story::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/css-bg-ea1cb69a-001b-480c-93cc-3a5dc9c4e01f.jpg') center/cover;
    opacity: 0.5;
    pointer-events: none;
  }

  .story-inner {
    position: relative;
    z-index: 1;
  }

  .story-text-block {
    margin-bottom: 33px;
  }

  .story-line {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-grey-400);
	max-width:655px;
  }

  .story-line--right { text-align: right; }

  .story-line--row {
    display: flex;
    align-items: center;
    gap: 38px;
  }

  .story-arrow {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--light-grey-400);
    position: relative;
    flex-shrink: 0;
  }

  .story-arrow::after {
    content: '';
    position: absolute;
    right: -1px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    border-top: 2px solid var(--light-grey-400);
    border-right: 2px solid var(--light-grey-400);
  }

  .story-bottom {
    display: flex;
    gap: 80px;
    align-items: flex-start;
  }

  .story-desc {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.2;
    color: var(--light-beige-400);
  }

  .story-img {
    flex-shrink: 0;
    width: 65%;
    aspect-ratio: 814/348;
    overflow: hidden;
    position: relative;
    display: inline-block;
  }

  .story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

	.base-img {
	  display: block;
	  width: 100%;               /* dostosuj do potrzeb */
	}

	.overlay-img {
	  position: absolute;
	  top: 0;                    /* lub inna wartość, np. 20px */
	  left: 0;
	  opacity: 0.6;              /* przezroczystość 60% – dostosuj */
	  pointer-events: none;      /* żeby nie blokowało kliknięć */
	  
	  animation: moveLeftAndBack 22s ease-in-out infinite;
	}

	@keyframes moveLeftAndBack {
	  0%   { transform: translateX(0); }
	  50%  { transform: translateX(-120px); }
	  100% { transform: translateX(0); }
	}

	img.ellipse-overlay-img {
		position: absolute;
		top: 90px;
		right: 50px;
		width: 90px;
		height: 90px;
		opacity: 1;
		pointer-events: none;
	}

  /* ===== SECTION: FILOZOFIA ===== */

  .section-filozofia {
    background: var(--medium-beige-600);
    padding: var(--s32) 0;
    color: var(--primary-text-on-light);
  }

  .filozofia-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s24);
  }

  .filozofia-header {
    display: flex;
    gap: var(--s8);
    align-items: flex-end;
    width: 100%;
  }

  .filozofia-header__title {
    flex: 1;
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
  }

  .filozofia-header__desc {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--primary-text-on-light);
    width: 441px;
    flex-shrink: 0;
    padding-bottom: 4px;
  }

  .tiles-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 290px;
  }

  .tile__img {
    width: 100%;
    aspect-ratio: 1083/794;
    object-fit: contain;
  }

  .tile__text {
    padding: 0 32px;
  }

  .tile__title {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
    margin-bottom: 4px;
  }

  .tile__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

  /* ===== SECTION: ARCHITEKTURA JEST ===== */

  .section-arch-jest {
    position: relative;
    width: 100%;
    height: 618px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-default);
  }

  .arch-jest__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .arch-jest__bg-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .arch-jest__bg-photo img {
    position: absolute;
    width: 93.43%;
    height: 191.57%;
    left: -8.12%;
    top: -37.03%;
    object-fit: cover;
    max-width: none;
  }

  .arch-jest__bg-gradient {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(55,49,40,0.2) 0%, rgba(55,49,40,0.2) 100%),
      linear-gradient(99.25deg, rgba(0,0,0,0) 8.8%, #272828 53.9%);
  }

  .arch-jest__bg-noise {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 0.4;
    width: 100%;
    height: 100%;
  }

  /* kółka i kratka */

  /* Animacje */
.arch-jest__circles {
  position: absolute;
  left: 25%; 
  top: 50%;
  width: 703px;
  height: 424px;
  transform: translateY(-50%) rotate(180deg);
  overflow: hidden;
  pointer-events: none;
  animation: circlesAnim 24s ease-in-out infinite;
}

.arch-jest__circles img {
  position: absolute;
  width: 112.39%;
  height: 158.95%;
  left: -5.11%;
  top: -26.72%;
  max-width: none;
}

.arch-jest__kratka {
  position: absolute;
  right: -9.56%;
  bottom: -6%;
  left: 82.37%;
  pointer-events: none;
  opacity: 0.5;
  animation: kratkaAnim 24s ease-in-out infinite;
}

.arch-jest__kratka img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.arch-jest__dot {
  position: absolute;
  right: 10%;
  bottom: 60%;
  width: 90px;
  height: 90px;
  pointer-events: none;
  animation: dotAnim 24s ease-in-out infinite;
}

.arch-jest__content {
  position: relative;
  z-index: 1;
  width: 635px;
  margin-left: calc(297px + 703px - 635px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: contentAnim 24s ease-in-out infinite;
}

/* === ANIMACJE === */

@keyframes circlesAnim {
  0%, 100% {
    transform: translateY(-50%) rotate(180deg) scale(1);
  }
  50% {
    transform: translateY(-50%) rotate(180deg) scale(1.06);
  }
}

@keyframes contentAnim {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);        /* przesunięcie w prawo – dostosuj */
  }
}

@keyframes dotAnim {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-30px, -30px) rotate(-30deg);   /* w górę + obrót w lewo */
  }
}

@keyframes kratkaAnim {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 40px) scale(1.02);   /* w lewo + w dół + delikatne powiększenie */
  }
}

  .arch-jest__line {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
  }

  .arch-jest__line--right { text-align: right; }

  .arch-jest__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .arch-jest__arrow {
	  display: inline-flex;
	  align-items: center;
	  gap: 0;
	  flex-shrink: 0;
	  background: url('assets/arrow.svg') no-repeat;
	  height: 100px;
	  width: 100px;
	  rotate: -90deg;
	  position: relative;
	  top: -20px;
  }

  /* ===== SECTION: KONSULTACJE (kontakt) ===== */

  #konsultacje-form {width:100%;}
  .konsultacje-form-box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;        /* wyśrodkowuje wszystko w poziomie */
	}

	.konsultacje-form-box button.btn {
	  margin-top: 25px;
	  width: fit-content;
	}
	
	.konsultacje-form-box button.btn--dark {
	  display: block;
	  margin: 30px auto 0 auto;
	  width: fit-content;
	  min-width: 240px;
	}

  .dark-band__highlight {
    color: var(--light-beige-400);
  }

  /* ===== NAVIGATION ===== */

  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 111px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35,36,36,0.92);
    backdrop-filter: blur(16.5px);
    -webkit-backdrop-filter: blur(16.5px);
  }

  .nav__inner {
    width: 1240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__logo img {
    height: 53px;
    width: 136.683px;
    display: block;
  }

  .nav__right {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav__links {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
  }

  .nav__links li a {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--light-beige-400);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    position: relative;
    white-space: nowrap;
  }

  .nav__links li a::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 2px; right: 2px;
    height: 3px;
    background: var(--light-beige-400);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .nav__links li a:hover::after { opacity: 1; }

  .nav__divider {
    width: 1px;
    height: 40px;
    background: rgba(232,228,219,0.3);
    flex-shrink: 0;
  }

  .nav__social {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .nav__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
  }

  .nav__social img { width: 100%; height: 100%; object-fit: contain; }

  /* ===== SECTION: REALIZACJE ===== */

  .section-realizacje {
    background: var(--primary-default);
    padding: 64px 0 96px;
  }

  .realizacje-inner {
    display: flex;
    flex-direction: column;
    gap: 54px;
    align-items: flex-end;
  }

  .realizacje-header {
    display: flex;
    gap: 29px;
    align-items: flex-end;
    width: 100%;
  }

  .realizacje-header__title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    flex: 1;
  }

  .realizacje-header__desc {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--light-beige-400);
    flex: 1;
    padding-bottom: 4px;
  }

 .realizacje-grid {
  display: flex;
  gap: 35px;
  width: 100%;
  align-items: stretch;
  overflow:hidden;
}

.realizacje-photo {
  position: relative;
  overflow: hidden;
  height: 348px;
  flex-shrink: 0;
  min-width: 0;
}

	.realizacje-photo--wide   { flex: 0 0 45%; }
	.realizacje-photo--narrow { flex: 0 0 25%; }

	/* Zdjęcia zawsze wypełniają cały kontener */
	.realizacje-photo__img {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;           /* najważniejsze – zdjęcie zawsze się mieści i wypełnia */
	}
	
	.realizacje-photo__filter,
	.realizacje-photo__noise {
	  transition: opacity 0.4s ease;
	}

	.realizacje-photo:hover .realizacje-photo__filter,
	.realizacje-photo:hover .realizacje-photo__noise {
	  opacity: 0;
	}


  /* ===== SECTION: OPINIE ===== */

  .section-opinie {
    background: var(--primary-default);
    padding: var(--s32) 0;
  }

  .opinie-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .opinie-title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    width: 392px;
  }

  .opinie-layout {
    display: flex;
    gap: 80px;
    align-items: normal;
  }

  .opinie-photo {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    height: 444px;
  }

  .opinie-photo--figma { flex: 1; }

  .opinie-photo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

	.opinie-photo__filter,
	.opinie-photo__noise {
	  transition: opacity 0.4s ease;
	}

	.opinie-photo:hover .opinie-photo__filter,
	.opinie-photo:hover .opinie-photo__noise {
	  opacity: 0;
	}

  .opinie-quote {
    flex: 0 0 768px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .opinie-quote__text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--light-beige-400);
  }

  .opinie-quote__author {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--light-beige-400);
  }

  .opinie-slider-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .opinie-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--light-beige-400);
    opacity: 0.3;
  }

  .dot--active { opacity: 1; }

  .slider-btns { display: flex; gap: 16px; }

  .slider-btn {
    width: 48px; height: 48px;
    border-radius: 50px;
    border: 1px solid var(--light-beige-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: background 0.2s;
  }

  .slider-btn:hover { background: rgba(232,228,219,0.1); }

  .slider-btn svg { width: 24px; height: 24px; fill: var(--light-beige-400); }

  /* ===== SECTION: FAQ ===== */

  .section-faq {
    position: relative;
    background: var(--faq-bg);
    padding: var(--s32) 64px;
    overflow: hidden;
  }

  .section-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/css-bg-3e9c3df0-0cdb-4f68-bc08-b02d56dee9d3.jpg') center/cover;
    opacity: 0.4;
    pointer-events: none;
  }

  .faq-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-content);
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
  }

  .faq-left {
    flex-shrink: 0;
    width: 384px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .faq-left__title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
  }

  .faq-left__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

  .faq-list {
    flex: 1;
    border-bottom: 1px solid var(--primary-default);
  }

  .faq-item {
    border-top: 1px solid var(--primary-default);
  }

  .faq-item__question {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
  }

  .faq-item__question::-webkit-details-marker { display: none; }

  .faq-item__q-text {
    flex: 1;
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
  }

  .faq-item__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s;
  }

  details[open] .faq-item__icon { transform: rotate(180deg); }

  .faq-item__icon svg { width: 24px; height: 24px; fill: var(--primary-default); }

  .faq-item__answer {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--primary-text-on-light);
    padding-bottom: 24px;
  }

  /* ===== SECTION: BLOG ===== */

  .section-blog {
    background: var(--primary-default);
    padding: var(--s32) 64px;
  }

  .blog-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 32px 0;
    display: flex;
    gap: 80px;
    align-items: flex-start;
  }

  .blog-left {
    flex-shrink: 0;
    width: 384px;
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .blog-left__head { display: flex; flex-direction: column; gap: 32px; }

  .blog-left__title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
  }

  .blog-left__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--light-beige-400);
  }

  .blog-cards {
    flex: 1;
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .blog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .blog-card__photo {
    position: relative;
    height: 245px;
    overflow: hidden;
  }

  .blog-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-card__title {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    margin-bottom: 8px;
  }

  .blog-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--light-beige-400);
    margin-bottom: 16px;
  }

  /* ===== SECTION: KONSULTACJE (kontakt) ===== */

  .section-konsultacje {
    position: relative;
    background: var(--light-beige-400);
    padding: var(--s32) 0;
    overflow: hidden;
  }

  .section-konsultacje::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/css-bg-404f4923-4ad5-49a2-8264-99a54dbebad5.jpg') center/cover;
    opacity: 0.15;
    pointer-events: none;
  }

  .konsultacje-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 32px 0;
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .konsultacje-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
    border-bottom: 1px solid var(--primary-default);
    padding-bottom: 48px;
    align-self: stretch;
    justify-content: space-between;
  }

  .konsultacje-left__top { display: flex; flex-direction: column; gap: 64px; }

  .konsultacje-left__title-block { display: flex; flex-direction: column; gap: 32px; }

  .konsultacje-left__title {
    font-family: var(--font-title);
    font-size: var(--text-6lx);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
  }

  .konsultacje-left__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

  .konsultacje-avatar {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .konsultacje-avatar__row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .konsultacje-avatar__img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .konsultacje-avatar__name {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--primary-text-on-light);
  }

  .konsultacje-avatar__role {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

  .konsultacje-avatar__email {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

  .konsultacje-left__btns { display: flex; gap: 32px; align-items: center; }

  .konsultacje-form-box {
    flex-shrink: 0;
    width: 604px;
    background: var(--light-beige-400);
    border: 1px solid var(--primary-default);
    padding: var(--s12) var(--s8);
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .konsultacje-form-title {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-text-on-light);
    text-align: center;
    width: 100%;
  }

  .konsultacje-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .konsultacje-field {
    display: flex;
    flex-direction: column;
  }

  .konsultacje-field label {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary-text-on-light);
    padding: 8px 0 4px;
  }

  .konsultacje-field input,
  .konsultacje-field textarea {
    border: 1px solid var(--primary-default);
    background: transparent;
    padding: 12px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--primary-text-on-light);
    outline: none;
    resize: none;
    opacity: 0.75;
    transition: opacity 0.2s;
  }

  .konsultacje-field input:focus,
  .konsultacje-field textarea:focus { opacity: 1; }

  .konsultacje-field textarea { height: 200px; }

  .konsultacje-checkbox {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
	margin-top:6px;
  }

  .konsultacje-checkbox input[type=checkbox] {
    flex-shrink: 0;
    width: 24px; height: 24px;
    margin-top: 2px;
    accent-color: var(--primary-default);
  }

  .konsultacje-checkbox label {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--primary-text-on-light);
  }

/* ===== FOOTER ===== */
.footer {
  background: var(--primary-default);
  color: var(--light-beige-400);
}

.footer-main {
  padding: 48px 0 24px;
}

.footer-content-wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ====================== DESKTOP ====================== */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  border-bottom: 1px solid var(--light-beige-400);
  padding-bottom: 64px;
}

.footer-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 30px;
}

.footer-addr-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-addr-line--big {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.footer-addr-line--small {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
}

.footer-phone {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-web {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  text-align: right;
}

.footer-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 400px;
  gap: 32px;
}

.footer-logo-img {
  position: relative;
  width: 330px;
  height: 190px;
}

.footer-logo-img__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 266px;
  height: 103px;
}

.footer-logo-img__bottom {
  position: absolute;
  top: 113px;
  left: 140px;
  width: 187px;
  height: 74px;
}

.footer-main .footer-logo-img.mobile {display:none; margin: auto;}
.footer-main .footer-logo-img.desktop {display:flex;}

.footer-additional {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  color: var(--light-beige-200);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.footer-social img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer-services {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--light-beige-200);
  padding-bottom: 24px;
}

.footer-service {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-service__title {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--light-beige-200);
}

.footer-service__desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--light-beige-200);
}

.footer-copy-line p {
  font-size: 14px;
  text-align: center;
  color: var(--light-beige-200);
  padding: 16px 0;
}

/* ====================== MOBILE ====================== */
@media (max-width: 991px) {
  .footer-content-wrap {
    padding: 0 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 48px;
    padding-bottom: 48px;
  }

  .footer-details {
    min-height: unset;
    width: 100%;
  }

  .footer-address {
    gap: 8px;
  }

  .footer-addr-line {
    gap: 4px 12px;
  }

  .footer-addr-line--big {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .footer-addr-line--small {
    font-size: 14px;
  }

  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-phone {
    font-size: 28px;
  }

  .footer-web {
    font-size: 16px;
    text-align: left;
  }

  .footer-right {
    width: 100%;
    align-items: flex-start;
    min-height: unset;
  }

  .footer-logo-img {
    width: 266px;
    height: 190px;
  }

  .footer-logo-img__bottom {
    left: 110px;           /* lekkie dopasowanie na mobile */
  }

  .footer-additional {
    align-items: flex-start;
  }

  .footer-tagline {
    text-align: left;
  }

  .footer-services {
    flex-wrap: wrap;
    gap: 24px 16px;
    padding: 32px 0;
  }

  .footer-service {
    flex: 0 0 calc(50% - 8px);
  }
}

  /* ===== PASEK DOLNY ===== */

  .pasek-dolny {
    width: 100%;
    height: 136px;
    overflow: hidden;
    position: relative;
    background: var(--primary-default);
	width: 50%;
	margin: auto;
	
  }

  .pasek-dolny img {
    position: absolute;
    width: 128.07%;
    height: 361.45%;
    left: 0;
    top: -122.59%;
    max-width: none;
    object-fit: cover;
  }

  /* ===================================================
     MOBILE NAV — hamburger button + dropdown panel
     =================================================== */

  /* Hamburger button — hidden on desktop */

  .nav__mobile-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .nav__mobile-btn img { width: 24px; height: 24px; display: block; }

  .nav__mobile-btn span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--light-beige-400);
    line-height: 1.5;
    white-space: nowrap;
  }

  /* Dropdown panel — positioned inside nav, slides from right */

  .nav__dropdown {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(39, 40, 40, 0.95);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    z-index: 200;
    flex-direction: column;
    padding: 30px 24px 30px 24px;
    gap: 32px;
  }

  .nav__dropdown.is-open { display: flex; }

  /* Close button */

  .nav__dropdown-close {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
	padding: 9px 4px 4px 4px;
	align-self: flex-end;
  }

  .nav__dropdown-close img { width: 24px; height: 24px; display: block; }

  /* Links list */

  .nav__dropdown-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }

  .nav__dropdown-links li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav__dropdown-links li a {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--light-beige-400);
    text-decoration: none;
    text-align: center;
    padding: 20px 0;
    white-space: nowrap;
    display: block;
    width: 100%;
    transition: opacity 0.2s;
  }

  .nav__dropdown-links li a:hover { opacity: 0.7; }

  .nav__dropdown-links li .nav__dropdown-sep {
    width: 100%;
    height: 1px;
    background: rgba(232,228,219,0.2);
    flex-shrink: 0;
  }

  /* ===================================================
     BREAKPOINTS
     =================================================== */

  @media (max-width: 1199px) {
    :root {
      --text-6lx: 48px;
      --max-content: 100%;
    }
    .nav__inner { width: 100%; padding: 0 32px; }
    .hero__title { font-size: 72px; }
    .hero__photo { width: 50%; }
    .section-header { flex-direction: column; gap: 16px; }
    .section-header__desc { width: 100%; }
    .offer-grid { grid-template-columns: repeat(2, 1fr); padding: 0 32px; }
    .offer-item { height: auto; min-height: 400px; }
    .arch-inner { flex-direction: column; gap: 48px; padding: 0 32px; }
    .arch-left { width: 100%; }
    .arch-photo { width: 100%; }
    .arch-title span:nth-child(2) { margin-left: 0; }
    .story-bottom { flex-direction: column; gap: 32px; }
    .story-img { width: 100%; }
    .filozofia-header { flex-direction: column; gap: 24px; }
    .filozofia-header__desc { width: 100%; }
    .tiles-grid { flex-wrap: wrap; gap: 32px; }
    .tile { width: calc(50% - 16px); }
    .realizacje-grid { flex-wrap: wrap; }
    .realizacje-photo--wide { flex: 0 0 100%; }
    .realizacje-photo--narrow { flex: 1; }
    .opinie-layout { flex-direction: column; }
    .opinie-quote { flex: none; width: 100%; }
    .faq-inner { flex-direction: column; gap: 48px; }
    .faq-left { width: 100%; }
    .blog-inner { flex-direction: column; gap: 48px; }
    .blog-left { width: 100%; }
    .konsultacje-inner { flex-direction: column; }
    .konsultacje-form-box { width: 100%; }
    .footer-top { flex-direction: column; gap: 48px; }
    .footer-details { width: 100%; }
    .footer-addr-line--big { font-size: 40px; }
    .footer-phone { font-size: 40px; }
    .arch-jest__content { margin-left: 0; width: 100%; padding: 0 32px; }
  }

  /* ---- MOBILE: max 767px ---- */

  @media (max-width: 767px) {
    :root {
      --text-6lx: 32px;
      --s32: 64px;
      --s24: 48px;
    }

    /* Nav */
    .nav {
      height: 70px;
      padding: 0 24px;
      justify-content: space-between;
      border-bottom: 1px solid rgba(232,228,219,0.15);
    }
    .nav__inner { display: contents; }
    .nav__logo img { height: 41px; }
    .nav__right { display: none; }
    .nav__mobile-btn { display: flex; }
	
	div.nav__inner a.nav__logo {display:none; }

    /* Hero */
    .hero {
      height: auto;
      min-height: 100svh;
      padding-top: 70px;
      flex-direction: column;
      justify-content: flex-start;
    }
   
	.hero__photo {
		position: absolute;
		width: 70%;
		height: 45%;
		bottom: 160px;
		right: 20px;
		top: initial;
		z-index: auto;
	}
	
    .hero__grid {
	  right: -76px;
	  width: 300px;
	  height: 300px;
	  background-size: cover;
	}
    .hero__title {
      font-size: 43px;
      line-height: 1.15;
      margin-bottom: 24px;
      padding-top: 16px;
    }
    .hero__content {
      padding: 30px 24px 24px 30px;
      max-width: 100%;
      order: 2;
	  height: calc(100vh - 48px);
	  position:relative;
    }
	.hero__title span.line-2 {
		text-align: right;
		padding-left: initial;
		width: 100%;
		display: block;
	}
    .hero__desc { max-width: 100%; font-size: 16px; }
    .hero__scroll {
		top: 70%;
		left: 78px;
		right: initial;
		bottom: initial;
	}

	.hero__circles {
		top: 30%;
		z-index: 2;
		left: 0;
	}


    /* Arch narzędziem */
    .section-arch { padding: 32px 0; }
    .arch-inner {
      flex-direction: column;
      gap: 0;
      padding: 0;
    }
    .arch-photo {
      width: 100%;
      aspect-ratio: 390/321;
      order: -1;
    }
    .arch-left {
      width: 100%;
      padding: 32px 32px 48px;
      gap: 32px;
    }
    .arch-title {
      font-size: 32px;
    }
    .arch-title span:nth-child(2) { margin-left: 0; }
    .arch-circle {  }
    .arch-btns { flex-direction: column; width: 100%; }
    .arch-btns .btn { width: 100%; justify-content: center; }
	
	.arch-desc {
	  padding-left: initial;
	}
	
	.arch-jest__arrow {
	  height: 38px;
	  width: 60px;
	  background-size: 31px;
	}

    /* Oferta */
    .section-oferta { padding: 64px 0; }
    .section-header {
      flex-direction: column;
      gap: 16px;
      padding: 0 32px;
      margin-bottom: 40px;
	  align-items: flex-start;
    }
    .section-header__desc { width: 100%; }
    .offer-grid {
      grid-template-columns: 1fr;
      padding: 0 32px;
      gap: 0;
    }
    .offer-item {
      height: auto;
      min-height: unset;
      padding: 32px 0;
      border-left: none;
      border-right: none;
      border-top: 1px solid var(--primary-container-border);
    }
    .offer-item:last-child { border-bottom: 1px solid var(--primary-container-border); }
    .offer-item__num { font-size: 56px; }
    .offer-item__img { width: 100%; aspect-ratio: 243/178; }
    .section-btn-wrap { padding: 0 32px; justify-content: center; margin-top: 40px; margin: auto;}

    /* Story */
    .section-story { padding: 64px 0; }
    .story-inner { padding: 0 32px; }
    .story-line { font-size: 32px; }
    .story-bottom { flex-direction: column; gap: 32px; }
    .story-img { width: calc(100% + 64px); margin-left: -32px; }
    .story-desc { font-size: 16px; }
	.section-story img.ellipse-overlay-img {
		top: 40px;
		right: 35px;
		width: 75px;
		height: 75px;
	}
	
	.overlay-img { animation: moveLeftAndBack 8s ease-in-out infinite; }

	@keyframes moveLeftAndBack {
	  0%   { transform: translateX(0); }
	  50%  { transform: translateX(-60px); }
	  100% { transform: translateX(0); }
	}

    /* Filozofia */
    .section-filozofia { padding: 64px 0; }
    .filozofia-inner { padding: 0 32px; gap: 48px; }
    .filozofia-header { flex-direction: column; gap: 16px;  align-items: flex-start;}
    .filozofia-header__desc { width: 100%; }
	
    .tiles-grid { flex-direction: column; gap: 0; }
    .tile {
      width: 100%;
      flex-direction: row;
      gap: 24px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(39,40,40,0.15);
    }
    .tile__img { width: 120px; height: auto; flex-shrink: 0; aspect-ratio: auto; }
    .tile__text { padding: 0; }

    /* Realizacje */
    .section-realizacje { padding: 64px 0; }
    .realizacje-inner { padding: 0 32px; gap: 32px; }
    .realizacje-header { flex-direction: column; gap: 16px; align-items: flex-start;}
    .realizacje-grid { flex-direction: column; gap: 16px; }
    .realizacje-photo--wide { flex: none; width: 100%; height: 191px; }
    .realizacje-photo--narrow { flex: none; width: 100%; height: 191px; }
    .realizacje-grid { flex-wrap: wrap; }

    /* Architektura jest */
    .section-arch-jest { height: auto; padding: 64px 32px; }
    .arch-jest__circles { display: none; }
    .arch-jest__content {
      position: relative;
      width: 100%;
      margin-left: 0;
      padding: 0;
    }
    .arch-jest__line { font-size: 32px; }
    .arch-jest__dot { right: 0; top: auto; bottom: 20px; width: 60px; height: 60px; }
    .arch-jest__kratka { opacity: 0.3; }

    /* Opinie */
    .section-opinie { padding: 64px 0; }
    .opinie-inner { padding: 0 32px; gap: 32px; }
    .opinie-title { width: 100%; font-size: 32px; }
    .opinie-layout { display:initial; }
    .opinie-photo--figma {
      width: 100%;
      height: 371px;
    }
    .opinie-quote { width: 100%; padding-top:20px;}
    .opinie-slider-bar { margin-top: 32px; }

    /* FAQ */
    .section-faq { padding: 64px 32px; }
    .faq-inner { flex-direction: column; gap: 48px; }
    .faq-left { width: 100%; }
    .faq-left__title { font-size: 36px; }
    .faq-list { width: 100%; }

    /* Blog */
    .section-blog { padding: 64px 32px; }
    .blog-inner { flex-direction: column; gap: 48px; }
    .blog-left { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 24px; }
    .blog-left__head { width: 100%; }
    .blog-cards { flex-direction: column; gap: 48px; }
    .blog-card__photo { height: 217px; }

    /* Konsultacje */
    .section-konsultacje { padding: 64px 0; }
    .konsultacje-inner { flex-direction: column; padding: 32px 24px; gap: 32px; }
    .konsultacje-left { border-bottom: none; padding-bottom: 0; gap: 32px; flex: 1; }
    .konsultacje-left__top { gap: 24px; }
    .konsultacje-left__title { font-size: 32px; }
    .konsultacje-left__btns { flex-direction: column; width: 100%; }
    .konsultacje-left__btns .btn { width: 100%; justify-content: center; }
	.section-konsultacje .btn--outline-dark {
		border: 1px solid var(--primary-default);
	}
	
    .konsultacje-form-box { flex: 1; width: 100%; padding: 32px 24px; }

    /* Footer */
    .footer-main { padding: 32px 0; }
    .footer-content-wrap { width: 100%; padding: 0 24px; }
    .footer-top { flex-direction: column; gap: 48px; padding-bottom: 48px; }
    .footer-details { width: 100%; min-height: unset; }
    .footer-addr-line { flex-direction: column; gap: 4px; white-space: normal; align-items: flex-start;}
    .footer-addr-line--big { font-size: 28px; }
    .footer-phone { font-size: 28px; }
    .footer-contact { flex-direction: column; gap: 16px; align-items: flex-start; }
    .footer-right { width: 100%; align-items: center; min-height: unset; border-top: solid 1px; padding-top: 30px; }
	.footer-additional {
		align-items: center;
	}
    .footer-logo-img { width: 220px; height: 130px; }
    .footer-logo-img__top { width: 177px; height: 69px; }
    .footer-logo-img__bottom { top: 76px; left: 93px; width: 125px; height: 49px; }
    .footer-services { flex-direction: column; gap: 24px; }

	.footer-main .footer-logo-img.mobile {display:flex;}
	.footer-main .footer-logo-img.desktop {display:none;}

    /* Pasek dolny */
    .pasek-dolny { height: 80px; }
  
  }

  /* ---- LARGE / 4K: min 1600px ---- */

  @media (min-width: 1600px) {
    :root { --text-6lx: 64px; --max-content: 1440px; }
    .nav__inner { width: 1440px; }
    .hero__title { font-size: 116px; }
  }






/* ===== SEKCJA 1: HERO O MNIE ===== */
.section-hero-omnie {
  position: relative;
  background: var(--primary-default);
  height: 544px;
  margin-top: 111px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-omnie__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.hero-omnie__text { flex-shrink: 0; width: 600px; }
.hero-omnie__title {
  font-family: var(--font-title);
  font-size: 96px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  margin-bottom: 40px;
}
.hero-omnie__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  max-width: 536px;
}
.hero-omnie__photo-area {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
}
.hero-omnie__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-omnie__deco-kolo3 {
  position: absolute;
  left: -8px;
  top: -18px;
  width: 102px;
  height: 102px;
  object-fit: cover;
  opacity: 0.82;
  pointer-events: none;
  transform: rotate(35deg);
  animation: heroKolo3Anim 20s ease-in-out infinite;
}
.hero-omnie__deco-kolo2 {
  position: absolute;
  right: -56px;
  bottom: -50px;
  width: 189px;
  height: 190px;
  object-fit: cover;
  opacity: 0.91;
  pointer-events: none;
  animation: heroKolo2Anim 26s ease-in-out infinite;
}
@keyframes heroKolo3Anim {
  0%, 100% { transform: rotate(35deg) translate(0,0); }
  50%       { transform: rotate(35deg) translate(-15px, 10px); }
}
@keyframes heroKolo2Anim {
  0%, 100% { transform: translate(0,0); }
  50%       { transform: translate(20px, -15px); }
}

/* ===== SEKCJA 2: WARTOŚCI ===== */
.section-wartosci {
  position: relative;
  background: #bfb9b3;
  padding: var(--s32) 0;
  overflow: hidden;
}
.section-wartosci::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-b9a4dcbc-d2af-41b5-a742-ae4cb0f908e8.jpg') center/cover;
  opacity: 0.2;
  pointer-events: none;
}
.wartosci-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  
}
.wartosci-row {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--primary-default);
}
.wartosci-row:first-child { border-top: 1px solid var(--primary-default); }
.wartosci-row__name {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
  flex: 1;
}
.wartosci-row__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-text-on-light);
  width: 441px;
  flex-shrink: 0;
}

/* ===== SEKCJA 3: CYTAT ===== */
.section-cytat {
  position: relative;
  background: var(--primary-default);
  height: 615px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.section-cytat__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.section-cytat__bg-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}
.section-cytat__circles {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 697px;
  pointer-events: none;
  overflow: hidden;
}

.section-cytat__circles-mobile {
	display:none;
}


.section-cytat__circles img {
  position: absolute;
  height: 100.94%;
  top: -0.71%;
  right: 0;
  max-width: none;
  width: auto;
  opacity: 0.9;
}
.section-cytat__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  margin: 0 auto;

  width: 100%;
}
.section-cytat__text {
  font-family: var(--font-title);
  font-size: 69px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  max-width: 1100px;
}

/* ===== SEKCJA 4: FILOZOFIA + MISJA ===== */
.section-filozofia-omnie {
  position: relative;
  background: #dadada;
  padding: var(--s32) 0;
  overflow: hidden;
  color: var(--primary-text-on-light);
}
.section-filozofia-omnie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-b9a4dcbc-d2af-41b5-a742-ae4cb0f908e8.jpg') center/cover;
  opacity: 0.15;
  pointer-events: none;
}
.filozofia-omnie__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: flex-end;
}
.filozofia-omnie__header {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  width: 100%;
}
.filozofia-omnie__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
  flex: 1;
}
.filozofia-omnie__subtitle {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-text-on-light);
  width: 441px;
  flex-shrink: 0;
}
.filozofia-omnie__tiles {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.filozofia-omnie__tile {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 290px;
}
.filozofia-omnie__tile-img {
  width: 100%;
  aspect-ratio: 1083/794;
  object-fit: contain;
}
.filozofia-omnie__tile-text { padding: 0 32px; }
.filozofia-omnie__tile-title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
  margin-bottom: 4px;
}
.filozofia-omnie__tile-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--primary-text-on-light);
}
.filozofia-omnie__divider {
  width: 100%;
  height: 1px;
  background: rgba(39,40,40,0.25);
}
.filozofia-omnie__misja {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.filozofia-omnie__misja-label {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
  flex-shrink: 0;
  width: 441px;
}
.filozofia-omnie__misja-text {
  flex: 1;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-text-on-light);
}
.filozofia-omnie__cele {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}
.filozofia-omnie__cele-text {
  flex: 1;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-text-on-light);
}
.filozofia-omnie__cele-label {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
  flex-shrink: 0;
  width: 441px;
  text-align: right;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .section-cytat__text { font-size: 48px; }
  .wartosci-row__name { font-size: 48px; }
  .filozofia-omnie__title { font-size: 48px; }
  .filozofia-omnie__misja-label, .filozofia-omnie__cele-label { font-size: 48px; }
  .filozofia-omnie__tiles { flex-wrap: wrap; gap: 32px; }
  .filozofia-omnie__tile { width: calc(50% - 16px); }
}
@media (max-width: 767px) {
  .section-wartosci { padding: 32px 0; }
  .wartosci-inner { padding: 32px 24px; }
  .wartosci-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wartosci-row__name { font-size: 32px; }
  .wartosci-row__desc { width: 100%; font-size: 16px; }
  .section-cytat { height: auto; padding: 32px 0; }
  .section-cytat__content { padding: 0 24px; }
  .section-cytat__text { font-size: 32px; }
  .section-cytat__circles { display: none; }
  .section-filozofia-omnie { padding: 32px 0; }
  .filozofia-omnie__inner { padding: 32px 24px; gap: 32px; }
  .filozofia-omnie__header { flex-direction: column; gap: 16px; align-items: flex-start;}
  .filozofia-omnie__subtitle { width: 100%; }
  .filozofia-omnie__title { font-size: 32px; }
  .filozofia-omnie__tiles { flex-direction: column; gap: 0; }
  .filozofia-omnie__tile { width: 100%; flex-direction: column; gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(39,40,40,0.15); }
  .filozofia-omnie__tile-img { width: 80%; margin:auto; height: auto; flex-shrink: 0; aspect-ratio: auto; }
  .filozofia-omnie__tile-text { padding: 0; }
  .filozofia-omnie__misja { flex-direction: column; gap: 16px; }
  .filozofia-omnie__misja-label { width: 100%; font-size: 32px; }
  .filozofia-omnie__cele { flex-direction: column; gap: 16px; }
  .filozofia-omnie__cele-label { width: 100%; font-size: 32px; text-align: left; }
}

@media (max-width: 767px) {
  .section-hero-omnie {
    height: auto;
    margin-top: 70px;
    padding: 0;
    overflow: hidden;
  }

  .hero-omnie__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 0;
    height: auto;
    position: relative;
	padding: 20px;
  }

  .hero-omnie__text {
    width: 100%;
    padding: 48px 32px 32px;
    min-height: unset;
    position: relative;
    z-index: 2;
  }

  .hero-omnie__title {
    font-size: 48px;
    margin-bottom: 32px;
  }

  .hero-omnie__photo-area {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 256px;
    height: 256px;
    margin-left: 0;
    flex-shrink: 0;
    z-index: 1;
  }

  .hero-omnie__deco-kolo3 {
    display: block;
    width: 65px;
    height: 65px;
    left: -6px;
    top: -8px;
  }

  .hero-omnie__deco-kolo2 {
    display: block;
    width: 121px;
    height: 121px;
    right: -30px;
    bottom: -30px;
    left: auto;
    top: auto;
  }

  .hero-omnie__kratka {
    display: block;
    position: absolute;
    width: 190px;
    height: 185px;
    right: 0;
    bottom: 0;
    left: auto;
    bottom: 0;
    z-index: 1;
    opacity: 0.6;
	top:unset !important;
  }
}

/* ===== SECTION: W MEDIACH — żaluzje pionowe ===== */

:root {
  --mediach-tab-w: 50px;
}

.section-mediach {
  background: var(--primary-default);
  padding: var(--s32) 0;
}

.mediach-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.mediach-header {
  display: flex;
  gap: var(--s8);
  align-items: flex-end;
}

.mediach-header__title {
  flex: 1;
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-default);
}

.mediach-header__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-text-on-default);
  width: 441px;
  flex-shrink: 0;
}

/* ── Kontener żaluzji ── */

.mediach-blinds {
  display: flex;
  width: 100%;
  height: 720px;
  border: 1px solid var(--primary-container-border);
  overflow: hidden;
}

/* ── Pojedynczy panel ── */

.mediach-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.55s cubic-bezier(0.77, 0, 0.18, 1);
  border-right: 1px solid var(--primary-container-border);
  background: var(--primary-default);
  flex-shrink: 0;
}

.mediach-panel:last-child {
  border-right: none;
}

.mediach-panel.open {
  flex: 1 0 var(--mediach-open-w, 640px);
  cursor: default;
}

.mediach-panel.closed {
  flex: 0 0 var(--mediach-tab-w);
}

/* ── Tab: numer u góry + tytuł pionowo u dołu ── */

.mediach-tab {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mediach-tab-w, 70px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--s8) 0;
  z-index: 5;
  pointer-events: none;
}

.mediach-tab__num {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-default);
}

.mediach-tab__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex: 1;
  overflow: visible;
}

.mediach-tab__title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-default);
  white-space: nowrap;
  transform: rotate(90deg);
  display: block;
}

/* ── Treść otwartego panelu ── */

.mediach-content {
  position: absolute;
  top: 0;
  left: var(--mediach-tab-w, 70px);
  bottom: 0;
  width: calc(var(--mediach-open-w, 640px) - var(--mediach-tab-w, 70px));
  padding: 64px var(--s12);
  display: flex;
  flex-direction: column;
  gap: var(--s12);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}

.mediach-panel.open .mediach-content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.15s;
}

.mediach-content__img {
  width: 151px;
  height: 100px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.mediach-content__header {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  color: var(--primary-text-on-default);
}

.mediach-content__title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.mediach-content__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary-text-on-default);
  max-width: 544px;
}

/* przycisk — korzysta z .btn z style.css, tu tylko nadpisanie koloru border */
.mediach-content .btn {
  border-color: var(--primary-container-border);
  color: var(--primary-text-on-default);
  background: transparent;
  flex-shrink: 0;
  width: fit-content;
}

.mediach-content .btn:hover {
  background: var(--primary-container-border);
  color: var(--primary-text-on-light);
}

/* scrollbar */
.mediach-content::-webkit-scrollbar { width: 2px; }
.mediach-content::-webkit-scrollbar-thumb { background: var(--primary-container-border); }

/* ── Responsive ── */

@media (max-width: 1199px) {
  .mediach-blinds {
    height: 600px;
    --mediach-open-w: 520px;
  }
  .mediach-header {
    flex-direction: column;
    gap: 16px;
  }
  .mediach-header__desc { width: 100%; }
}

@media (max-width: 767px) {
  .mediach-blinds {
    height: 480px;
    --mediach-open-w: 75vw;
  }
  .mediach-content {
    padding: 32px 24px;
  }
  .mediach-content__title { font-size: 28px; }
  .mediach-header__title { font-size: var(--text-6lx); }
}

/* ===== SEKCJA 1: HEADER PORTFOLIO ===== */
.section-header-portfolio {
  position: relative;
  background: var(--primary-default);
  padding: 64px;
  overflow: hidden;
  margin-top: 111px;
}

.header-portfolio__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.header-portfolio__left {
  flex-shrink: 0;
  width: 438px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}

.header-portfolio__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.header-portfolio__bottom {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.header-portfolio__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.header-portfolio__btns {
  display: flex;
  gap: 32px;
  align-items: center;
}

.header-portfolio__image-area {
  flex: 1;
  position: relative;
  min-height: 480px;
}

.header-portfolio__photo {
  position: relative;
  width: 666px;
  height: 666px;
  border: 1px solid var(--primary-container-border);
  overflow: hidden;
  flex-shrink: 0;
}

.header-portfolio__photo img.hp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: portfolioCrossfade 30s infinite;
}

.header-portfolio__photo img.hp__img:nth-child(1) { animation-delay: 0s; }
.header-portfolio__photo img.hp__img:nth-child(2) { animation-delay: 5s; }
.header-portfolio__photo img.hp__img:nth-child(3) { animation-delay: 10s; }
.header-portfolio__photo img.hp__img:nth-child(4) { animation-delay: 15s; }
.header-portfolio__photo img.hp__img:nth-child(5) { animation-delay: 20s; }
.header-portfolio__photo img.hp__img:nth-child(6) { animation-delay: 25s; }

@keyframes portfolioCrossfade {
  0%        { opacity: 0; }
  3%        { opacity: 1; }
  17%       { opacity: 1; }
  20%       { opacity: 0; }
  100%      { opacity: 0; }
}

.hp__filter,
.hp__noise {
  transition: opacity 0.4s ease;
}

.header-portfolio__photo:hover .hp__filter,
.header-portfolio__photo:hover .hp__noise {
  opacity: 0;
}

.header-portfolio__photo .hp__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
}

.header-portfolio__photo .hp__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

.header-portfolio__deco-dot {
  position: absolute;
  right: 160px;
  top: 50%;
  width: 90px;
  height: 90px;
  pointer-events: none;
}

.header-portfolio__deco-dot2 {
  position: absolute;
  right: 359px;
  top: 74%;
  width: 90px;
  height: 90px;
  pointer-events: none;
}

.header-portfolio__deco-kratka {
  position: absolute;
  right: 7px;
  bottom: 50px;
  width: 400px;
  opacity: 0.5;
  pointer-events: none;
}


@media (max-width: 767px) {
	.header-portfolio__image-area {
		width:100%;
		min-height:inherit;
	}
	
	.header-portfolio__deco-dot2 {
	  right: 10px;
	  top: 100px;
	  width:40px;
	  height:40px;
	}

	.section-header-portfolio {
		border-bottom:solid 1px #fff;
	}
	
	.header-portfolio__deco-kratka {
	  right: -150px;
	  bottom: -15px;
	  width: 230px;
	}

}

.case-study-btn--mobile { display: none; }

@media (max-width: 767px) {
  .case-study-btn--desktop { display: none; }
  .case-study-btn--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
  }
  .case-study-btn--mobile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* ===== SEKCJA 2: CASE STUDIES (lista projektów) ===== */
.section-case-studies {
  background: var(--primary-default);
  padding: var(--s32) 0;
}

.case-studies__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

.case-study-item {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  padding: var(--s12) 0;
  border-bottom: 1px solid var(--primary-container-border);
}

.case-study-item:first-child {

}

.case-study-item__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  justify-content: center;
}

.case-study-item__title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.case-study-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.case-study-item__photo {
  position: relative;
  width: 600px;
  height: 392px;
  flex-shrink: 0;
  overflow: hidden;
}

.case-study-item__photo img.cs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-item__photo .cs__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
}

.case-study-item__photo .cs__noise {
  position: absolute;
  inset: 0;
  background: rgba(80,76,69,0.33);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ===== SEKCJA 3: GALERIA ===== */
.section-galeria {
  background: var(--primary-default);
  padding: var(--s32) 0;
}

.galeria__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}

.galeria__header {
  display: flex;
  gap: 29px;
  align-items: flex-end;
  width: 100%;
}

.galeria__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  flex: 1;
}

.galeria__subtitle {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--light-beige-400);
  flex: 1;
}

/* Filtry */
.galeria__filters {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--primary-container-border);
  border-bottom: 1px solid var(--primary-container-border);
  padding: 16px 0;
  gap: 8px;
}

.galeria__filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.galeria__filter-btn:hover,
.galeria__filter-btn.active {
  opacity: 0.6;
}

/* Grid kafelek */
.galeria__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

.galeria__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
}

/* Kafelek ze zdjęciem */
.gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  display: block;
  cursor: pointer;
}

.gallery-item__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-item__img { transform: scale(1.04); }

.gallery-item__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
}

.gallery-item__multiply {
  position: absolute;
  inset: 0;
  background: rgba(80,76,69,0.33);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.gallery-item__arrow {
  position: absolute;
  right: 16px;
  bottom: 40px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item__arrow svg {
  width: 18px;
  height: 15px;
  fill: var(--light-beige-400);
  stroke: var(--light-beige-400);
  stroke-width: 1.5;
  fill: none;
}

/* Kafelek tekstowy */
.gallery-item--text {
  background: var(--primary-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.gallery-item--text .gi-text__label {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Logo kafelek */
.gallery-item--logo {
  background: var(--primary-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.gallery-item--logo img {
  width: 60%;
  object-fit: contain;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .section-header-portfolio { padding: var(--s32) 32px; }
  .header-portfolio__inner { flex-direction: column; gap: 48px; }
  .header-portfolio__left { width: 100%; }
  .header-portfolio__photo { width: 100%; max-width: 500px; height: 400px; }
  .case-study-item { flex-direction: column; gap: 32px; }
  .case-study-item__photo { width: 100%; height: 280px; }
  .galeria__header { flex-direction: column; gap: 16px; }
  .galeria__row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .section-header-portfolio { padding: var(--s32) 24px; margin-top: 70px; }
  .header-portfolio__title { font-size: 40px; }
  .header-portfolio__btns { flex-direction: column; width: 100%; }
  .header-portfolio__btns .btn { width: 100%; justify-content: center; }
  .header-portfolio__photo { max-width: 100%; height: 280px; }
  .header-portfolio__deco-dot { display: none; }
  .section-case-studies { padding: 32px 0; }
  .case-studies__inner { padding: 0 24px; }
  .case-study-item { flex-direction: column; gap: 24px; }
  .case-study-item__title { font-size: 28px; }
  .case-study-item__photo { width: 100%; height: 220px; }
  .section-galeria { padding: 32px 0; }
  .galeria__inner { padding: 0 24px; gap: 32px; }
  .galeria__row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gallery-item { width: 100%; height: auto; }
  .gallery-item--text .gi-text__label { font-size: 28px; }
  .galeria__filters { flex-wrap: wrap; }
}




/* ===== SECTION: BLOG LISTING ===== */
/* Reużywamy z style.css: .btn, .text-btn, .blog-card, .blog-card__photo,
   .blog-card__photo-filter, .blog-card__title, .blog-card__desc,
   .galeria__filters, .galeria__filter-btn */

.section-blog-listing {
  background: var(--primary-default);
  padding: 32px 0;
  margin-top: 111px;
}

.blog-listing__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ── Featured post ── */
.blog-featured {
  display: flex;
  gap: 32px;
  align-items: center;
}

.blog-featured__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-featured__category {
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.blog-featured__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-featured__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.blog-featured__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.blog-featured__photo {
  position: relative;
  width: 600px;
  height: 400px;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-featured__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Filtry — reużywa .galeria__filters / .galeria__filter-btn z style.css ── */

/* ── Grid kart ── */
.blog-grid-section {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.blog-grid-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Karty — rozszerzamy istniejące .blog-card z style.css */
.blog-card--listing {
  flex: 0 0 368px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-card--listing .blog-card__photo {
  height: 245px;
  width: 100%;
}

.blog-card--listing .blog-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__category {
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* Czytaj więcej — reużywa .text-btn z style.css */

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .blog-featured { flex-direction: column; gap: 32px; }
  .blog-featured__photo { width: 100%; height: 280px; }
  .blog-grid-row { flex-wrap: wrap; gap: 32px; }
  .blog-card--listing { flex: 0 0 calc(50% - 16px); }
}

@media (max-width: 767px) {
  .section-blog-listing { margin-top: 70px; padding: 32px 0; }
  .blog-listing__inner { gap: 48px; }
  .blog-featured__title { font-size: 32px; }
  .blog-featured__photo { height: 220px; }
  .blog-grid-row { flex-direction: column; gap: 48px; }
  .blog-card--listing { flex: none; width: 100%; }
}


/* ===== KONTAKT — tylko style których nie ma w style.css ===== */

.section-kontakt {
  background: var(--primary-default);
  padding: var(--s24) 0;
  margin-top: 111px;
}

.kontakt-inner {
  max-width: var(--max-content);
  margin: 0 auto;

  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* ── Lewa kolumna: dane ── */
.kontakt-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--primary-container-border);
  align-self: stretch;
}

.kontakt-left__name {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.kontakt-left__company {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--light-beige-400);
  margin-top: 16px;
}

/* Wiersze danych (adres, tel, e-mail) */
.kontakt-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kontakt-detail-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--primary-container-border);
  padding-bottom: 0;
}

.kontakt-detail-row__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kontakt-detail-row__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kontakt-detail-row__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  padding: 12px 0;
}

/* Social media */
.kontakt-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kontakt-social__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  white-space: nowrap;
}

.kontakt-social__icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.kontakt-social__icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.kontakt-social__icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Formularz — reużywa .konsultacje-form-box z style.css ──
   Nadpisujemy tylko kolor border (ciemny tło zamiast beżowego) */
.kontakt-form-box {
  flex-shrink: 0;
  width: 604px;
  border: 1px solid var(--primary-container-border);
  padding: var(--s12) var(--s8);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* Label e-mail — kolor na jasny (ciemne tło) */
.kontakt-form-box .konsultacje-field label {
  color: var(--light-beige-400);
}

.kontakt-form-box .konsultacje-field input,
.kontakt-form-box .konsultacje-field textarea {
  border-color: #dfdfdf;
  color: var(--light-beige-400);
  background: transparent;
}

.kontakt-form-box .konsultacje-checkbox label {
  color: var(--light-beige-400);
}

.kontakt-form-box .konsultacje-form-title {
  color: var(--light-beige-400);
}

/* ── Mapa ── */
.section-kontakt-mapa {
  width: 100%;
  height: 608px;
  background: #e9eaea;
  overflow: hidden;
  position: relative;
}

.kontakt-mapa__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kontakt-mapa__filter {
  position: absolute;
  inset: 0;
  background: rgba(80,76,69,0.5);
  mix-blend-mode: color;
  pointer-events: none;
}

.kontakt-mapa__marker {
  position: absolute;
  /* Al. Karkonoska 10 — pozycja wizualna z Figmy */
  left: 50%;
  top: 70%;
  transform: translate(-50%, -100%);
  width: 33px;
  height: 48px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .kontakt-inner { flex-direction: column; gap: 48px; }
  .kontakt-form-box { width: 100%; }
  .kontakt-left { border-bottom: none; padding-bottom: 0; }
  .kontakt-left__name { font-size: 36px; }
}

@media (max-width: 767px) {
  .section-kontakt { margin-top: 70px; padding: 32px 0; }
  .kontakt-inner { padding: 0 24px; gap: 32px; }
  .kontakt-left__name { font-size: 28px; }
  .section-kontakt-mapa { height: 340px; }
}


/* ===== OFERTA — tylko nowe klasy, nie ma ich w style.css ===== */

/* ── SEKCJA 1: HERO OFERTA ── */
.section-oferta-hero {
  position: relative;
  height: 618px;
  margin-top: 111px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(55,49,40,.2) 0%, rgba(55,49,40,.2) 100%),
              linear-gradient(99.25deg, rgba(0,0,0,0) 8.8%, var(--primary-default) 53.9%);
  display: flex;
  align-items: center;
}

.section-oferta-hero .section-oferta-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.oferta-hero__deco-circles {
  position: absolute;
  right: 0;
  top: 0;
  width: 1025px;
  height: 618px;
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
  rotate: 180deg;	
}

.oferta-hero__deco-circles img {
  position: absolute;
  width: 101%;
  height: 100.94%;
  left: -1.28%;
  top: -0.71%;
  max-width: none;
}

.oferta-hero__deco-sketch {
  position: absolute;
  right: 0;
  top: 0;
  width: 786px;
  height: 579px;
  overflow: hidden;
  pointer-events: none;
}

.oferta-hero__deco-sketch img {
  position: absolute;
  width: 93.64%;
  height: 104.62%;
  left: 2.29%;
  top: -2.48%;
  max-width: none;
}

.oferta-hero__content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--light-beige-400);
  max-width: 560px;
}

.oferta-hero__title {
  font-family: var(--font-title);
  font-size: 101px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.oferta-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  max-width: 441px;
}

/* ── SEKCJA 2: ŻALUZJE OFERTY ── */
.section-oferta-blinds {
  background: var(--primary-default);
  border-top: 1px solid var(--primary-container-border);
  padding: 64px 0;
}

.oferta-blinds__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

.oferta-blinds {
  display: flex;
  height: 680px;
  align-items: center;
  gap: 0;
  width: 100%;
}

.oferta-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.77, 0, 0.18, 1);
  flex-shrink: 0;
}

.oferta-panel.open  { flex: 1 0 540px; cursor: default; }
.oferta-panel.closed { flex: 0 0 67px; }

.oferta-panel__tab {
  position: absolute;
  top: 0; left: 0;
  width: 67px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.oferta-panel__tab-title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  white-space: nowrap;
  transform: rotate(90deg);
}

.oferta-sep {
  flex: 0 0 1px;
  height: 100%;
  background: var(--primary-container-border);
  flex-shrink: 0;
}

.oferta-panel__content {
  position: absolute;
  top: 0;
  left: 67px;
  bottom: 0;
  width: calc(540px - 67px);
  padding: 16px 32px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--light-beige-400);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 0.45s ease;
}

.oferta-panel.open .oferta-panel__content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}

.oferta-panel__name {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.oferta-panel__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.oferta-panel__text ul {
  padding-left: 20px;
  margin-top: 8px;
}

.oferta-panel__text li {
  margin-bottom: 4px;
}

.oferta-panel__illus {
  width: 302px;
  height: 222px;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: auto;
}

/* ── SEKCJA 3: PROCES PROJEKTOWY — intro baner ── */
.section-proces-header {
  position: relative;
  height: 618px;
  overflow: hidden;
  border-top: 1px solid var(--primary-container-border);
  border-bottom: 1px solid var(--primary-container-border);
  background: linear-gradient(90deg, rgba(55,49,40,.2) 0%, rgba(55,49,40,.2) 100%),
              linear-gradient(99.25deg, rgba(0,0,0,0) 8.8%, var(--primary-default) 53.9%);
  display: flex;
  align-items: center;
}

.section-proces-header .section-proces-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.proces-header__deco {
  position: absolute;
  right: 0;
  top: 0;
  width: 1025px;
  height: 618px;
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
  rotate: 180deg;
}

.proces-header__deco img {
  position: absolute;
  width: 101%;
  height: 100.94%;
  left: -1.28%;
  top: -0.71%;
  max-width: none;
}

.proces-header__content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 560px;
}

.proces-header__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.proces-header__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--light-beige-400);
  max-width: 441px;
}

/* ── SEKCJA 4: KAFELKI PROCESU ── */
.section-proces-tiles {
  background: var(--primary-default);
  padding: var(--s24) 0;
}

.proces-tiles__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  justify-content: center;
}

.proces-tile {
  background: var(--primary-default);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 64px 16px 32px;
  width: calc(50% - 32px);
  min-width: 280px;
}

.proces-tile__name {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.proces-tile__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-direction: column;
  flex: 1 1 auto;
}

.proces-tile__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  flex: 1;
}

.proces-tile__illus {
  width: 302px;
  height: 222px;
  object-fit: cover;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.proces-tile__illus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proces-tile__num {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  text-align: right;
  border-bottom: 1px solid var(--primary-container-border);
  padding: 0 32px 32px;
  width: 100%;
}

/* ── SEKCJA 5: CYTAT ── reużywa .section-cytat z style.css ── */
/* .section-cytat, .section-cytat__* już w style.css */

/* ── SEKCJA 6: FORMULARZ KONSULTACJI (ciemna wersja) ── */
.section-oferta-konsultacje {
  background: var(--primary-default);
  padding: var(--s24) 0;
}

.oferta-konsultacje__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.oferta-konsultacje__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  border-bottom: 1px solid var(--primary-container-border);
  padding-bottom: 48px;
  align-self: stretch;
  justify-content: space-between;
}

.oferta-konsultacje__title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.oferta-konsultacje__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.oferta-form-box {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--primary-container-border);
  padding: var(--s12) var(--s8);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.oferta-form-box .konsultacje-form-title { color: var(--light-beige-400); }
.oferta-form-box .konsultacje-field label { color: var(--light-beige-400); }
.oferta-form-box .konsultacje-field input,
.oferta-form-box .konsultacje-field textarea {
  background: var(--light-beige-400);
  border-color: var(--light-beige-400);
  color: var(--primary-default);
}
.oferta-form-box .konsultacje-checkbox label { color: var(--light-beige-400); }
.oferta-form-box .konsultacje-checkbox input[type=checkbox] { accent-color: var(--light-beige-400); }

/* ── SEKCJA 8: PARTNERZY ── */
.section-partnerzy {
  background: var(--primary-default);
  padding: 64px 0;
  border-top: 1px solid var(--primary-container-border);
}

.partnerzy__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 84px;
}

.partnerzy__header {
  display: flex;
  gap: 32px;
  align-items: flex-end;
}

.partnerzy__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  flex: 1;
}

.partnerzy__subtitle {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--light-beige-400);
  width: 441px;
  flex-shrink: 0;
}

.partnerzy__grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.partnerzy__row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: flex-end;
}

.partner-item {
  background: var(--primary-default);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 16px 56px;
  width: calc(33.333% - 24px);
  min-width: 280px;
}

.partner-item__icon {
  width: 156px;
  height: 114px;
  position: relative;
  overflow: hidden;
}

.partner-item__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-item__body {
  border-left: 1px solid var(--primary-container-border);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.partner-item__name {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.partner-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* ── SEKCJA 9: NEWSLETTER ── */
.section-newsletter {
  position: relative;
  background: var(--primary-default);
  border-top: 1px solid var(--primary-container-border);
  border-bottom: 1px solid var(--primary-container-border);
  padding: var(--s24) 0;
  overflow: hidden;
}

.newsletter__bg-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 373.57%;
  top: -198.84%;
  left: 0.37%;
  object-fit: cover;
  mix-blend-mode: soft-light;
  opacity: 0.2;
  pointer-events: none;
}

.newsletter__deco-circles {
  position: absolute;
  right: 0;
  top: 60px;
  width: 839px;
  height: 839px;
  pointer-events: none;
}

.newsletter__deco-circles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s6);
}

.newsletter__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 498px;
}

.newsletter__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.newsletter__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-beige-400);
}

.newsletter__input-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newsletter__input {
  width: 100%;
  height: 58px;
  background: var(--light-beige-400);
  border: 1px solid var(--primary-container-border);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--primary-default);
  outline: none;
}

.newsletter__disclaimer {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--light-beige-400);
}

.newsletter__disclaimer strong { font-weight: 700; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .oferta-hero__title { font-size: 64px; }
  .oferta-hero__content { right: 32px; }
  .proces-header__content { right: 32px; }
  .proces-header__title { font-size: 48px; }
  .oferta-blinds { height: auto; min-height: 500px; flex-wrap: wrap; }
  .oferta-panel.open  { flex: 1 0 400px; }
  .partnerzy__header { flex-direction: column; gap: 16px; }
  .partnerzy__subtitle { width: 100%; }
  .partner-item { width: calc(50% - 18px); }
  .oferta-realizacje__header { flex-direction: column; gap: 16px; }
}

@media (max-width: 767px) {
  .section-oferta-hero { height: auto; padding: 80px 24px 48px; margin-top: 70px; }
  .oferta-hero__deco-sketch, .oferta-hero__deco-circles { display: none; }
  .oferta-hero__content { position: relative; right: auto; top: auto; transform: none; padding-right: 0; }
  .oferta-hero__title { font-size: 40px; }
  .section-oferta-blinds { padding: 48px 0; }
  .oferta-blinds { flex-direction: column; height: auto; }
  .oferta-panel { flex: none !important; width: 100%; }
  .oferta-panel.closed { height: 56px; }
  .oferta-panel.open  { height: auto; min-height: 400px; }
  .oferta-panel__content { position: relative; left: 0; width: 100%; opacity: 1 !important; pointer-events: auto !important; }
  .oferta-panel.closed .oferta-panel__content { display: none; }
  .oferta-sep { display: none; }
  .section-proces-header { height: auto; padding: 48px 24px; }
  .proces-header__deco { display: none; }
  .proces-header__content { position: relative; right: auto; top: auto; transform: none; }
  .proces-header__title { font-size: 36px; }
  .section-proces-tiles { padding: 48px 0; }
  .proces-tiles__inner { gap: 32px; padding: 0 24px; }
  .proces-tile { width: 100%; }
  .proces-tile__body { flex-direction: column; }
  .proces-tile__illus { width: 100%; height: 180px; }
  .oferta-konsultacje__inner { flex-direction: column; padding: 32px 24px; }
  .oferta-konsultacje__left { border-bottom: none; padding-bottom: 0; }
  .oferta-konsultacje__title { font-size: 32px; }
  .section-partnerzy { padding: 48px 0; }
  .partnerzy__inner { padding: 0 24px; }
  .partnerzy__title { font-size: 32px; }
  .partner-item { width: 100%; }
  .partnerzy__row { justify-content: flex-start; }
  .newsletter__deco-circles { display: none; }
  .newsletter__title { font-size: 36px; }
}

/* ===== PORTFOLIO PROJEKT — tylko nowe klasy (nie ma ich w style.css) ===== */

.section-project {
  background: var(--primary-default);
  padding: 64px 0 var(--s24);
  margin-top: 111px;
}

.project__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Nagłówek */
.project__header {
  display: flex;
  gap: 32px;
  align-items: flex-end;
}

.project__title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  flex: 0 0 auto;
  white-space: pre-line;
}

.project__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  flex: 1;
}

/* ── Slider główny ── */
.project-gallery { display: flex; flex-direction: column; gap: 32px; }

.project-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.project-slider__main {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

.project-slider__main-img {
  display: block;
  width: 100%;
  height: 576px;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

/* Strzałki prev/next slidera */
.project-slider__btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(39,40,40,.7);
  border: 1px solid var(--primary-container-border);
  cursor: pointer;
  transition: background 0.2s;
  color: var(--light-beige-400);
}

.project-slider__btn:hover { background: rgba(232,228,219,.15); }
.project-slider__btn svg  { width: 24px; height: 24px; fill: var(--light-beige-400); }

/* ── Rząd miniaturek ze scrollem i strzałkami ── */
.project-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-thumbs-scroll-btn {
  flex-shrink: 0;
  width: 32px;
  height: 107px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(39,40,40,.6);
  border: 1px solid rgba(232,228,219,.25);
  cursor: pointer;
  transition: background 0.2s;
}

.project-thumbs-scroll-btn:hover { background: rgba(232,228,219,.12); }
.project-thumbs-scroll-btn svg { width: 18px; height: 18px; fill: var(--light-beige-400); }
.project-thumbs-scroll-btn.hidden { visibility: hidden; pointer-events: none; }

.project-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
}

.project-thumbs::-webkit-scrollbar { display: none; }

.project-thumb {
  flex-shrink: 0;
  position: relative;
  width: 160px;
  height: 107px;
  overflow: hidden;
  cursor: pointer;
  transition: outline 0.15s;
}

.project-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-thumb__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.2s;
}

.project-thumb:hover .project-thumb__filter,
.project-thumb.active .project-thumb__filter { opacity: 0; }

.project-thumb.active {
  outline: 2px solid var(--light-beige-400);
  outline-offset: -2px;
}

/* ── Footer: dots (≤8) lub licznik (>8) + link ── */
.project-slider__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dots */
.project-dots { display: flex; gap: 8px; align-items: center; }

.project-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--light-beige-400);
  opacity: 0.3;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: opacity 0.2s;
}

.project-dot.active { opacity: 1; }

/* Licznik (fallback dla >8 zdjęć) */
.project-counter {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: rgba(232,228,219,.55);
}

.project-counter strong { color: var(--light-beige-400); }

/* Link wróć */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-tiny);
  font-size: var(--text-base);
  line-height: 1.5;
  color: #c4c4c4;
  padding: 8px;
  transition: color 0.2s;
}

.project-back:hover { color: var(--light-beige-400); }
.project-back svg { width: 20px; height: 20px; fill: currentColor; }

/* ═══════════════════════
   LIGHTBOX
═══════════════════════ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.88);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.lightbox.is-open { display: flex; }

.lightbox__img-wrap {
  max-width: 90vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}

.lightbox__close {
  position: fixed;
  top: 24px; right: 32px;
  background: none; border: none;
  color: var(--light-beige-400);
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  padding: 8px;
  z-index: 1001;
}

.lightbox__prev,
.lightbox__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(39,40,40,.75);
  border: 1px solid rgba(232,228,219,.3);
  color: var(--light-beige-400);
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 1001;
  transition: background 0.2s;
}

.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(232,228,219,.15); }

.lightbox__counter {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(232,228,219,.55);
}

/* ═══════════════════════
   RESPONSIVE
═══════════════════════ */
@media (max-width: 767px) {
  .section-project { margin-top: 70px; padding: 48px 0; }
  .project__inner { padding: 0 24px; gap: 24px; }
  .project__header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .project__title { font-size: 32px; }
  .project-slider__main-img { height: 260px; }
  .project-slider { gap: 12px; }
  .project-slider__btn { width: 36px; height: 36px; }
  .project-thumb { width: 80px; height: 54px; }
  .project-thumbs-scroll-btn { height: 54px; width: 28px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ════════════════════════════════════════════════════
   PORTFOLIO 2 — delta styles
   Wszystko co wspólne z portfolio-1 jest tu pominięte.
   Reużywane klasy z style.css: .btn, .btn--light, zmienne
════════════════════════════════════════════════════ */

/* ── Wrapper strony ── */
.section-project2 {
  background: var(--primary-default);
  margin-top: 111px;
  padding-bottom: var(--s24);
}

.project2__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══ HEADER PROJEKTU ═══ */
.p2-header {
  border-bottom: 1px solid var(--primary-container-border);
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Górny rząd: tytuł + tagi po lewej, metadata po prawej */
.p2-header__top {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.p2-header__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p2-header__title {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

/* Tagi */
.p2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p2-tag {
  border: 1px solid var(--primary-container-border);
  border-radius: 32px;
  padding: 10px 12px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  color: var(--light-beige-400);
  white-space: nowrap;
}

/* Siatka metadanych (Klient/Data/Zadanie/Rola) */
.p2-meta {
  flex: 0 0 auto;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p2-meta__row {
  display: flex;
  gap: 32px;
}

.p2-meta__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p2-meta__label {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.p2-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* ═══ SLIDER v2 ═══
   Brak thumb-strip. Główne zdjęcie pełna szerokość,
   dots po lewej + okrągłe ← → po prawej poniżej.          */
.p2-slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p2-slider__main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

.p2-slider__main-img {
  display: block;
  width: 100%;
  height: 698px;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

/* Footer slidera */
.p2-slider__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dots (≤8) */
.p2-dots { display: flex; gap: 8px; align-items: center; }

.p2-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--light-beige-400);
  opacity: 0.3;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: opacity 0.2s;
}

.p2-dot.active { opacity: 1; }

/* Licznik (>8) */
.p2-counter {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(232,228,219,.55);
}

.p2-counter strong { color: var(--light-beige-400); }

/* Okrągłe przyciski ← → */
.p2-slider__arrows {
  display: flex;
  gap: 16px;
}

.p2-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--primary-container-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s;
}

.p2-arrow:hover { background: rgba(232,228,219,.12); }

.p2-arrow svg {
  width: 24px; height: 24px;
  fill: var(--light-beige-400);
}

/* ═══ ACCORDION / ŻALUZJE ═══ */
.p2-accordion-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--primary-container-border);
}

.p2-accordion-wrap {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* Lista akordeonu */
.p2-accordion {
  flex: 1;
  border-bottom: 1px solid var(--primary-container-border);
}

.p2-accordion__item {
  border-top: 1px solid var(--primary-container-border);
  cursor: pointer;
}

.p2-accordion__question {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.p2-accordion__q-text {
  flex: 1;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.p2-accordion__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.p2-accordion__icon svg {
  width: 24px; height: 24px;
  fill: var(--light-beige-400);
}

/* Otwarta pozycja — ikona obrócona */
.p2-accordion__item.open .p2-accordion__icon {
  transform: rotate(180deg);
}

.p2-accordion__answer {
  display: none;
  padding-bottom: 24px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.p2-accordion__item.open .p2-accordion__answer {
  display: block;
}

/* Foto case-study obok akordeonu */
.p2-case-photo {
  flex-shrink: 0;
  width: 600px;
  height: 392px;
  position: relative;
  overflow: hidden;
}

.p2-case-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-case-photo__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
}

/* ═══ FOOTER z przyciskami ═══ */
.p2-footer-btns {
  display: flex;
  gap: 32px;
  justify-content: center;
  padding: 64px 0;
}

/* ═══ LIGHTBOX (identyczny jak portfolio-1) ═══ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.88);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.lightbox.is-open { display: flex; }

.lightbox__img-wrap {
  max-width: 90vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}

.lightbox__close {
  position: fixed;
  top: 24px; right: 32px;
  background: none; border: none;
  color: var(--light-beige-400);
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  padding: 8px;
  z-index: 1001;
}

.lightbox__prev,
.lightbox__next {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(39,40,40,.75);
  border: 1px solid rgba(232,228,219,.3);
  color: var(--light-beige-400);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 24px;
  z-index: 1001;
  transition: background 0.2s;
}

.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(232,228,219,.15); }

.lightbox__counter {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(232,228,219,.55);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1199px) {
  .p2-accordion-wrap { flex-direction: column; gap: 32px; }
  .p2-case-photo { width: 100%; height: 280px; }
  .p2-header__top { flex-direction: column; gap: 32px; }
}

@media (max-width: 767px) {
  .section-project2 { margin-top: 70px; }
  .p2-header { padding: 48px 0 32px; }
  .p2-header__title { font-size: 32px; }
  .p2-slider__main-img { height: 260px; }
  .p2-accordion__q-text { font-size: 28px; }
  .p2-footer-btns { flex-direction: column; align-items: center; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}


/* ═══════════════════════════════════════════════
   BLOG-1 — nowe klasy (nie ma ich w style.css)
   Reużywamy: .btn, .blog-card*, .text-btn, zmienne CSS
═══════════════════════════════════════════════ */

/* ── Wrapper strony ── */
.section-article {
  background: var(--primary-default);
  margin-top: 111px;
  padding: 48px 0 0;
}

.article__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* ═══ LEWA KOLUMNA — treść artykułu ═══ */
.article__body {
  flex: 0 0 816px;
  min-width: 0;
  border-bottom: 1px solid var(--primary-container-border);
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tytuł + lead */
.article__title-block {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--primary-container-border);
}

.article__h1 {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  margin-bottom: 16px;
}

.article__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* Treść artykułu — typografia dla #article-content */
#article-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#article-content h2 {
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  padding: 24px 0 20px;
  scroll-margin-top: 130px;
}

#article-content h3 {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  padding: 24px 0 20px;
  scroll-margin-top: 130px;
}

#article-content p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  padding-bottom: 16px;
}

#article-content ul,
#article-content ol {
  padding-left: 24px;
  padding-bottom: 16px;
  color: var(--light-beige-400);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}

#article-content li { margin-bottom: 4px; }

/* Zdjęcie z podpisem */
.article__img-wrap {
  padding: 48px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article__img-wrap img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.article__img-wrap img.square { aspect-ratio: 1/1; }
.article__img-wrap img.landscape { height: 428px; object-fit: cover; }

.article__caption {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.article__caption-bar {
  width: 2px;
  background: var(--primary-container-border);
  flex-shrink: 0;
}

.article__caption-text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* Wyróżniony cytat */
.article__pullquote {
  padding: 36px 0;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

/* Ramka „Czy wiesz, że..." */
.article__factbox {
  border-top: 1px solid var(--primary-container-border);
  border-bottom: 1px solid var(--primary-container-border);
  padding: 24px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article__factbox-title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.article__factbox-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* Share + tagi (stopka artykułu) */
.article__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 64px;
  gap: 32px;
}

.article__share {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article__share-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.article__tags-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
}

.article__tags-label {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.article__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.article__tag {
  border: 1px solid var(--primary-container-border);
  border-radius: 32px;
  padding: 10px 12px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  color: var(--light-beige-400);
}

/* ═══ PRAWA KOLUMNA — sticky sidebar ═══ */
.article__sidebar {
  flex: 1;
  min-width: 0;
  position: sticky;
  top: 130px; /* wysokość nava */
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Spis treści — generowany przez JS */
.article__toc-label {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  margin-bottom: 8px;
}

/* Kontenery generowane przez createTableOfContents() */
.table-of-contents {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Wszystkie linki TOC */
.toc-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
  text-decoration: none;
  padding: 12px 16px;
  transition: opacity 0.2s, background 0.2s;
}

.toc-link:hover { opacity: 0.65; }

/* H2 — normalny */
.toc-h2 {
  font-weight: 400;
}

/* H2 aktywny (JS doda klasę) */
.toc-h2.toc-active {
  font-weight: 600;
  background: rgba(232,228,219,.06);
}

/* H3 — wcięcie z pionową kreską */
.toc-h3 {
  font-size: 14px;
  font-weight: 400;
  padding-left: 32px;
  border-left: 1px solid var(--primary-container-border);
  margin-left: 16px;
}

.toc-h3.toc-active { font-weight: 600; }

/* H4 — głębsze wcięcie */
.toc-h4 {
  font-size: 14px;
  font-weight: 400;
  padding-left: 32px;
  border-left: 1px solid rgba(232,228,219,.35);
  margin-left: 24px;
}

/* H1 w artykule — traktujemy jak H2 w TOC */
.toc-h1 {
  font-weight: 600;
}

/* Separator pod TOC */
.article__toc-sep {
  width: 100%;
  height: 1px;
  background: var(--primary-container-border);
  margin: 8px 0;
}

/* Autor */
.article__author {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
}

.article__author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article__author-img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article__author-name {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--light-beige-400);
}

.article__author-role {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-beige-400);
}

.article__author-bio {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.article__author-link {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--light-beige-400);
  text-decoration: none;
  cursor: pointer;
}

.article__author-link:hover { opacity: 0.7; }

/* ═══ PODOBNE ARTYKUŁY ═══ */
.section-similar {
  background: var(--primary-default);
  padding: var(--s24) 0;
}

.similar__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.similar__header {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
}

.similar__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.similar__grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Karty — rozszerza .blog-card z style.css */
.similar-card {
  flex: 0 0 368px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.similar-card__photo {
  position: relative;
  height: 245px;
  width: 100%;
  overflow: hidden;
}

.similar-card__photo img {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

.similar-card__filter {
  position: absolute;
  inset: 0;
  background: var(--primary-default);
  mix-blend-mode: color;
  pointer-events: none;
}

.similar-card__content { display: flex; flex-direction: column; gap: 16px; }

.similar-card__title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.similar-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1199px) {
  .article__inner { flex-direction: column; gap: 32px; }
  .article__body  { flex: none; width: 100%; }
  .article__sidebar { position: static; }
  .similar__grid { flex-wrap: wrap; gap: 32px; }
  .similar-card { flex: 0 0 calc(50% - 16px); }
}

@media (max-width: 767px) {
  .section-article { margin-top: 70px; padding: 32px 0 0; }
  .article__inner { padding: 0 24px; gap: 24px; }
  .article__h1 { font-size: 32px; }
  #article-content h2 { font-size: 28px; }
  .article__pullquote { font-size: 28px; }
  .article__img-wrap img.landscape { height: 220px; }
  .article__img-wrap img.square { height: 300px; }
  .article__footer { flex-direction: column; gap: 32px; }
  .article__tags-section { align-items: flex-start; }
  .article__tags { justify-content: flex-start; }
  .similar__grid { flex-direction: column; }
  .similar-card { flex: none; width: 100%; }
  .section-similar { padding: 48px 0; }
  .similar__header { flex-direction: column; gap: 16px; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════
   OFERTA — DELTA STYLES (doklejić na końcu style.css)
   Wszystkie klasy poniżej są NOWE — nie ma ich w style.css
═══════════════════════════════════════════════════════ */

/* ── MOBILE HERO (widoczny tylko ≤767px) ── */
.section-oferta-hero-mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Chowamy desktop hero, pokazujemy mobile */
  .section-oferta-hero { display: none; }
  .section-oferta-hero-mobile {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--primary-default);
    margin-top: 70px;
    padding: 48px 0 0;
    overflow: hidden;
  }

  .oferta-hero-mobile__text {
    padding: 0 32px 32px;
  }

  .oferta-hero-mobile__title {
    font-family: var(--font-title);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    margin-bottom: 16px;
  }

  .oferta-hero-mobile__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--light-beige-400);
  }

  .oferta-hero-mobile__photo-wrap {
    position: relative;
    width: 100%;
    height: 324px;
    flex-shrink: 0;
    margin-left: 32px; /* offset jak w Figmie */
  }

  .oferta-hero-mobile__photo {
    position: relative;
    width: 324px;
    height: 324px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .oferta-hero-mobile__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .oferta-hero-mobile__photo-filter {
    position: absolute;
    inset: 0;
    background: var(--primary-photo-filter);
    mix-blend-mode: color;
    pointer-events: none;
  }

  .oferta-hero-mobile__photo-label {
    position: absolute;
    bottom: 16px;
    right: 8px;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--light-beige-400);
    text-align: right;
  }

  .oferta-hero-mobile__kratka {
    position: absolute;
    right: -40px;
    bottom: -20px;
    width: 160px;
    opacity: 0.5;
    pointer-events: none;
    transform: scaleY(-1);
  }

  .oferta-hero-mobile__kolo {
    position: absolute;
    bottom: 30px;
    right: 50px;
    width: 69px;
    height: 69px;
    opacity: 0.8;
    pointer-events: none;
  }
}


/* ── ŻALUZJE desktop/mobile visibility ── */
.section-oferta-blinds--desktop { display: block; }
.section-oferta-blinds--mobile  { display: none; }

@media (max-width: 767px) {
  .section-oferta-blinds--desktop { display: none; }
  .section-oferta-blinds--mobile  { display: block; }
}


/* ── ACCORDION MOBILNY (sekcja blinds na mobile) ── */
.oferta-acc-mobile {
  background: var(--primary-default);
  border-top: 1px solid var(--primary-container-border);
}

.oferta-acc-item {
  border-bottom: 1px solid var(--primary-container-border);
}

.oferta-acc-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  gap: 16px;
}

.oferta-acc-item__header::-webkit-details-marker { display: none; }

.oferta-acc-item__title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.oferta-acc-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--light-beige-400);
  transition: transform 0.3s;
}

.oferta-acc-item__icon svg {
  width: 100%;
  height: 100%;
}

details[open] .oferta-acc-item__icon {
  transform: rotate(180deg);
}

.oferta-acc-item__body {
  padding: 0 24px 24px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

.oferta-acc-item__body ul {
  margin-top: 12px;
  padding-left: 20px;
}

.oferta-acc-item__body li {
  margin-bottom: 4px;
}


/* ── SEKCJA: DOBRA ARCHITEKTURA ── */
.section-dobra-arch {
  position: relative;
  background: #bfb9b3;
  padding: var(--s32) 0;
  overflow: hidden;
}

.section-dobra-arch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-b9a4dcbc-d2af-41b5-a742-ae4cb0f908e8.jpg') center/cover;
  opacity: 0.2;
  pointer-events: none;
}

.dobra-arch__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: center;
}

.dobra-arch__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--primary-text-on-light);
}

.dobra-arch__title-block {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
}

.dobra-arch__title-right {
  text-align: right;
}

.dobra-arch__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--primary-text-on-light);
  max-width: 460px;
  margin-left: auto;
}

.dobra-arch__btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top:40px;
}

.dobra-arch__btns .btn--dark {
  background: var(--primary-default);
  color: var(--light-beige-400);
  border-color: var(--primary-default);
}

.dobra-arch__btns .btn {
  border-color: var(--primary-default);
}

.dobra-arch__photo {
  flex-shrink: 0;
  width: 520px;
  position: relative;
}

.dobra-arch__photo img:first-child {
  width: 100%;
  display: block;
}

.dobra-arch__photo-overlay {
  position: absolute;
  bottom: -40px;
  left: 97px;
  width: 330px;
  opacity: 0.7;
  pointer-events: none;
}

.dobra-arch__photo-kolo {
  position: absolute;
  bottom: 80px;
  left: 10px;
  width: 240px;
  height: 240px;
  opacity: 0.91;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@media (max-width: 1199px) {
  .dobra-arch__inner { flex-direction: column; gap: 48px; padding: 0 32px; }
  .dobra-arch__photo { width: 100%; max-width: 480px; }
}

@media (max-width: 767px) {
  .section-dobra-arch { padding: 48px 0; }
  .dobra-arch__inner { padding: 0 24px; gap: 32px; }
  .dobra-arch__title-block { font-size: 32px; }
  .dobra-arch__btns { flex-direction: column; }
  .dobra-arch__btns .btn { width: 100%; justify-content: center; }
  .dobra-arch__photo { width: 100%; max-width: 100%; }
  .dobra-arch__photo-overlay { width: 160px; }
  .dobra-arch__photo-kolo { 
	width: 120px;
    height: 120px;
    bottom: 130px;
  }
}


/* ── KAFELKI PROCESU — sublabele i blok intro ── */
.proces-tiles__intro {
  width: 100%;
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.proces-tiles__intro-p {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--light-beige-400);
  flex:1;
}

.proces-tile__desc-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proces-tile__sublabel {
  font-family: var(--font-title);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--light-beige-400);
  margin-top: 8px;
}

.proces-tile__sublabel:first-child { margin-top: 0; }

@media (max-width: 767px) {
  .proces-tiles__intro { padding: 0 24px; }
  .proces-tile__body { flex-direction: column; }
}


/* ── PARTNERZY — desktop/mobile visibility ── */
.section-partnerzy--desktop { display: block; }
.section-partnerzy-mobile   { display: none; }

@media (max-width: 767px) {
  .section-partnerzy--desktop { display: none; }
  .section-partnerzy-mobile   { display: block; }
}

/* ── PARTNERZY MOBILE ── */
.section-partnerzy-mobile {
  background: #f3f2f1;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.section-partnerzy-mobile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-3e9c3df0-0cdb-4f68-bc08-b02d56dee9d3.jpg') center/cover;
  opacity: 0.4;
  pointer-events: none;
}

.partnerzy-mobile__inner {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.partnerzy-mobile__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.partnerzy-mobile__title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
}

.partnerzy-mobile__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--primary-text-on-light);
}

.partnerzy-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.partnerzy-mobile__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 16px 48px;
  border-top: 1px solid rgba(39,40,40,0.2);
}

.partnerzy-mobile__item:last-child {
  border-bottom: 1px solid rgba(39,40,40,0.2);
}

.partnerzy-mobile__icon {
  width: 156px;
  height: 114px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.partnerzy-mobile__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.partnerzy-mobile__body {
  border-left: 1px solid var(--primary-text-on-light);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partnerzy-mobile__name {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-text-on-light);
}

.partnerzy-mobile__desc-item {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--primary-text-on-light);
}








/* ================================================================
   OFERTA — DELTA CSS (dołączyć na końcu style.css)
   Nowe sekcje: oferta-hero2, dobra-architektura (indent),
   proces-jasny, nasi-partnerzy
================================================================ */

/* ─────────────────────────────────────────────
   SEKCJA: HERO OFERTA v2 (node 19013-15981)
   Układ wg Figmy (1440px wide):
     - ciemne tło z gradientem
     - kurtyny:  left:-179px top:0   w:799px  h:333px  opacity:.5
     - kratka L: left:23px   top:-2px w:364px  h:354px
     - zdjęcie:  left:295px  top:63px size:484px (w kontenerze 1440)
     - tekst:    left:~1001px → w kontenerze 1240px = prawa 1/3
                 na screenshocie tekst jest po LEWEJ strony zdjęcia
                 (left ~70px od lewej krawędzi viewport)
     - kratka R: prawy górny
     - kółko:    prawy środek-dół, scaleX(-1)
───────────────────────────────────────────── */
.section-oferta-hero2 {
  position: relative;
  height: 618px;
  margin-top: 111px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(55,49,40,.2) 0%, rgba(55,49,40,.2) 100%),
    linear-gradient(99.25deg, rgba(0,0,0,0) 8.8%, var(--primary-default) 53.9%);
  background-color: var(--primary-default);
}

/* kurtyny — wychodzą poza lewą krawędź */
.oferta-hero2__kurtyny {
  position: absolute;
  right: -179px;
  top: 0;
  width: 799px;
  height: 333px;
  opacity: 0.5;
  pointer-events: none;
  overflow: hidden;
}
.oferta-hero2__kurtyny img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(180deg) scaleY(-1);
}

/* kratka lewa górna */
.oferta-hero2__kratka {
  position: absolute;
  rotate:180deg;
  top: 0;
  width: 364px;
  height: 354px;
  pointer-events: none;
  opacity: 0.6;
  right: -179px;
  z-index:2;
}
.oferta-hero2__kratka img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
}

.oferta-hero2__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: ofertaCrossfade 20s infinite;
}

.oferta-hero2__slide:nth-child(1) { animation-delay: 0s; }
.oferta-hero2__slide:nth-child(2) { animation-delay: 5s; }
.oferta-hero2__slide:nth-child(3) { animation-delay: 10s; }
.oferta-hero2__slide:nth-child(4) { animation-delay: 15s; }

@keyframes ofertaCrossfade {
  0%        { opacity: 0; }
  5%        { opacity: 1; }
  25%       { opacity: 1; }
  30%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes koloRollRight {
  0%   { transform: scaleX(-1) translateX(0) rotate(0deg); }
  50%  { transform: scaleX(-1) translateX(-100px) rotate(-360deg); }
  100% { transform: scaleX(-1) translateX(0) rotate(-720deg); }
}

.oferta-hero2__kolo {
  position: absolute;
  right: -63px;
  bottom: 56px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  opacity: 0.85;
  transform: scaleX(-1);
  z-index: 2;
  animation: koloRollRight 28s ease-in-out infinite;
}

.oferta-hero2__kolo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* zdjęcie 484×484 z filtrem i etykietą
   Figma: left:295px top:63px w kontenerze 1440px
   → ~20% od lewej krawędzi sekcji */
.oferta-hero2__photo-wrap {
  position: absolute;
  right: 90px;
  top: 63px;
  width: 484px;
  height: 484px;
  z-index:1;
}

.oferta-hero2__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.oferta-hero2__photo > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oferta-hero2__photo-filter {
  position: absolute;
  inset: 0;
  background: var(--primary-photo-filter);
  mix-blend-mode: color;
  pointer-events: none;
}

.oferta-hero2__photo-noise-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

/* etykieta "PROJEKTY BUDOWLANE" — prawy dolny róg zdjęcia */
.oferta-hero2__photo-label {
  position: absolute;
  /* Figma: inset 64% top / 5% right / 17% bottom / 26% left
     → text zajmuje prawy dolny kwadrant */
  bottom: 17%;
  right: 5%;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light-beige-400);
  text-align: right;
  pointer-events: none;
}

/* tekst hero — lewa strona, wyśrodkowany w pionie
   Figma: left:1001px w sekcji 1440px
   Kontener max-width:1240px zaczyna się od (1440-1240)/2=100px
   Więc 1001-100=901px od lewej krawędzi kontenera → prawa część
   ALE na screenshocie tekst jest po LEWEJ strony zdjęcia (~70px od lewej)
   → left:1001px to pozycja w pełnym 1440 viewport,
     ale w layoucie figmy kontener zaczyna się od lewej krawędzi (bez marginesu)
   → zatem ~70px od lewej sekcji */
.oferta-hero2__content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 441px;
  color: var(--light-beige-400);
  z-index: 2;
}

.oferta-hero2__title {
  font-family: var(--font-title);
  font-size: 101px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--light-beige-400);
}

.oferta-hero2__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--light-beige-400);
}

/* ─────────────────────────────────────────────
   SEKCJA: DOBRA ARCHITEKTURA (node 18928-7578)
   Klasy .section-dobra-arch, .dobra-arch__* już są
   w style.css — tylko brakujący indent tytułu
───────────────────────────────────────────── */
.dobra-arch__title-indent {
  margin-left: 222px;
}

/* ─────────────────────────────────────────────
   SEKCJA: PROCES PROJEKTOWY JASNY (node 18836-7128)
   Tło: #b6aea6 (medium-beige-600), dekoracja kół po lewej
───────────────────────────────────────────── */
.section-proces-jasny {
  position: relative;
  height: 618px;
  overflow: hidden;
  background-color: var(--medium-beige-600);
  display: flex;
  align-items: center;
}

.section-proces-jasny::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-b9a4dcbc-d2af-41b5-a742-ae4cb0f908e8.jpg') center/cover;
  opacity: 0.2;
  pointer-events: none;
}

/* dekoracja kół — lewa połowa, mix-blend-mode: multiply */
.proces-jasny__deco {
  position: absolute;
  right: 0;
  top: 0;
  width: 1025px;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.proces-jasny__deco img {
  position: absolute;
  width: 128%;
  height: 128%;
  left: -17%;
  top: -19%;
  max-width: none;
  object-fit: cover;
}

/* tekst — prawa część (Figma: left:969px w 1440 = right ~1/3) */
.proces-jasny__content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  padding-right: var(--s6);
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--primary-default);
  z-index: 2;
}

.proces-jasny__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-default);
}

.proces-jasny__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-default);
  max-width: 441px;
}

/* ─────────────────────────────────────────────
   SEKCJA: NASI PARTNERZY (node 18836-7154)
   Tło jasne #f3f2f1, header: tytuł L + długi desc R
───────────────────────────────────────────── */
.section-nasi-partnerzy {
  position: relative;
  background: #f3f2f1;
  padding: var(--s32) 0;
  overflow: hidden;
}

.section-nasi-partnerzy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/css-bg-3e9c3df0-0cdb-4f68-bc08-b02d56dee9d3.jpg') center/cover;
  opacity: 0.4;
  pointer-events: none;
}

.nasi-partnerzy__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  flex-direction: column;
  gap: 84px;
}

/* header — tytuł po lewej, długi opis po prawej (flex-1) */
.nasi-partnerzy__header {
  display: flex;
  gap: var(--s8);
  align-items: flex-end;
  color: var(--primary-default);
}

.nasi-partnerzy__title {
  font-family: var(--font-title);
  font-size: var(--text-6lx);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-default);
  flex-shrink: 0;
}

.nasi-partnerzy__desc {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-default);
  flex: 1;
  min-width: 0;
}

/* siatka: 2 rzędy × 3 karty */
.nasi-partnerzy__grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.nasi-partnerzy__row {
  display: flex;
  gap: 36px;
}

/* karta partnera */
.nasi-partner-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px var(--s4) 56px;
}

.nasi-partner-item__icon {
  width: 156px;
  height: 114px;
  flex-shrink: 0;
  overflow: hidden;
}

.nasi-partner-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.nasi-partner-item__body {
  border-left: 1px solid var(--primary-default);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--primary-default);
}

.nasi-partner-item__name {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-default);
}

.nasi-partner-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--primary-default);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* hero */
  .section-oferta-hero2 { height: auto; min-height: 500px; padding: 80px 32px 60px; }
  .oferta-hero2__photo-wrap {
    position: relative;
    left: auto; top: auto;
    width: 100%; max-width: 400px; height: 400px;
    margin: 0 auto 40px;
    display: block;
  }
  .oferta-hero2__content {
    position: relative;
    left: auto; top: auto;
    transform: none;
    max-width: 100%;
  }
  .oferta-hero2__title { font-size: 64px; }
  .oferta-hero2__kurtyny { display: none; }
  /* proces jasny */
  .section-proces-jasny { height: auto; padding: 64px 32px; }
  .proces-jasny__content { position: relative; right: auto; top: auto; transform: none; width: 100%; padding-right: 0; }
  /* partnerzy */
  .nasi-partnerzy__header { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 767px) {
  /* hero */
  .section-oferta-hero2 { margin-top: 70px; padding: 48px 24px; }
  .oferta-hero2__title { font-size: 48px; }
  .oferta-hero2__photo-wrap { max-width: 100%; height: 260px; }
  .oferta-hero2__photo-label { font-size: 24px; }
  .oferta-hero2__kratka,
  .oferta-hero2__kratka-right,
  .oferta-hero2__kolo { display: none; }
  /* dobra architektura */
  .dobra-arch__title-indent { margin-left: 0; }
  /* proces jasny */
  .section-proces-jasny { height: auto; padding: 48px 24px; }
  .proces-jasny__deco { display: none; }
  .proces-jasny__title { font-size: 36px; }
  /* partnerzy */
  .section-nasi-partnerzy { padding: 48px 0; }
  .nasi-partnerzy__inner { padding: 0 24px; gap: 48px; }
  .nasi-partnerzy__title { font-size: 36px; }
  .nasi-partnerzy__row { flex-direction: column; gap: 0; }
  .nasi-partner-item {
    padding: 24px 0 40px;
    border-top: 1px solid rgba(39,40,40,.2);
  }
  .nasi-partner-item:last-child { border-bottom: 1px solid rgba(39,40,40,.2); }
}


.hero-oferta__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.proces-jasny__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}




/* ═══════════════════════════════════════════════════════════
   OFFER OVERLAY — panel szczegółów wewnątrz .offer-grid
   Dokleić na końcu style.css
═══════════════════════════════════════════════════════════ */

/* offer-grid musi być position:relative żeby overlay się w nim zawierał */
.offer-grid {
  position: relative;
}

/* kursor sygnalizujący klikalność kart */
.offer-item {
  cursor: pointer;
}

/* ── Overlay: absolute, pokrywa cały offer-grid ── */
.offer-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--primary-default);
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.offer-overlay.is-open {
  display: flex;
}

/* ── Pionowe kreski ── */
.offer-overlay__line {
  flex-shrink: 0;
  width: 1px;
  background: var(--primary-container-border);
  position: relative;
}

.offer-overlay__line--left  {  }
.offer-overlay__line--right {  }

/* ── X na prawej kresce ── */
.offer-overlay__close {
  position: absolute;
  top: 24px;
  right: 0;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: var(--light-beige-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.offer-overlay__close:hover { opacity: 0.65; }

/* ── Scrollowalna treść ── */
.offer-overlay__body {
  flex: 1;
  padding: 48px var(--s8) 48px var(--s8);
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.offer-overlay__body::-webkit-scrollbar { width: 2px; }
.offer-overlay__body::-webkit-scrollbar-thumb { background: var(--primary-container-border); }

/* ── Numer ── */
.offer-overlay__num {
  font-family: var(--font-title);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--light-beige-400);
}

/* ── Tytuł ── */
.offer-overlay__title {
  font-family: var(--font-title);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--light-beige-400);
}

/* ── Treść HTML ── */
.offer-overlay__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}

.offer-overlay__text p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--light-beige-400);
}

.offer-overlay__text ul {
  padding-left: 20px;
  margin-top: 4px;
}

.offer-overlay__text li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--light-beige-400);
  margin-bottom: 4px;
}

/* ── Ilustracja — prawy dolny róg ── */
.offer-overlay__illus {
  position: absolute;
  right: var(--s8);
  bottom: var(--s8);
  width: clamp(100px, 13vw, 190px);
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .offer-overlay__line { display: none; }
  .offer-overlay__body { padding: 48px var(--s6); }
}

@media (max-width: 767px) {
  .offer-overlay__body {
    padding: 48px 24px 80px;
    gap: 14px;
  }

  .offer-overlay__num { font-size: 48px; }

  /* X na mobile: fixed w prawym górnym rogu widocznej karty */
  .offer-overlay__close {
    position: fixed;
    top: 80px; /* pod navem */
    right: 80px;
    left: auto;
    transform: none;
    font-size: 20px;
    z-index: 11;
  }

  .offer-overlay__illus {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100px;
    margin-top: 8px;
    align-self: flex-end;
  }
}

/* ═══════════════════════════════════════════════════════
   HERO O MNIE — crossfade slider
   Dokleić na końcu style.css
═══════════════════════════════════════════════════════ */

/* Kontener tekstu — relative żeby warstwy się nakładały */
.hero-omnie__text {
  position: relative;
  /* zachowuje oryginalny flex: 0 0 600px z istniejącego CSS */
}

/* Obie warstwy tekstu siedzą w tym samym miejscu */
.hero-omnie__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;              /* tyle co był margin-bottom na tytule */
  transition: opacity 1.2s ease;
}

/* Warstwa A startuje widoczna, B ukryta — JS nadpisuje inline */
.hero-omnie__layer--a { opacity: 1; }
.hero-omnie__layer--b { opacity: 0; }

/* Wysokość kontenera tekstu — trzyma układ podczas crossfade.
   Dopasowana do najdłuższego desc (~4 linijki przy 536px max-width).
   Przy zmianie fontu/rozmiaru można podnieść. */
.section-hero-omnie .hero-omnie__text {
  min-height: 400px;
}

/* Zdjęcia — obie warstwy nakładają się przez position:absolute */
.hero-omnie__photo--a,
.hero-omnie__photo--b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.2s ease;
}

/* br w desc — wizualny odstęp między akapitami */
.hero-omnie__desc br {
  display: block;
  content: '';
  margin-top: 12px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .hero-omnie__layer {
    gap: 16px;
  }
}


.hero-omnie__kratka {
  position: absolute;
  top: 0;
  width: 364px;
  height: 354px;
  pointer-events: none;
  opacity: 0.6;
  right: -179px;
  z-index: 2;


}


@media (max-width: 767px) {
  .offer-overlay {
    position: relative;
    inset: auto;
    height: fit-content;
    flex-direction: row;
    align-items: flex-start;
  }

  .offer-overlay__line--left {
    display: none;
  }

  .offer-overlay__line--right {
    display: block;
    width: 1px;
    flex-shrink: 0;
    background: var(--primary-container-border);
    height: calc(100% - 48px);
    align-self: flex-start;
    margin-top: 0;
    position: relative;
  }

  .offer-overlay__close {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    z-index: 11;
    white-space: nowrap;
	width: 30px;
  }

  .offer-overlay__body {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 16px);
    padding: 24px 16px 24px 0;
    gap: 14px;
    overflow-y: visible;
  }

  .offer-overlay__illus {
    position: relative;
    right: auto;
    bottom: auto;
    width: 70%;
    margin: 16px auto 0;
    display: block;
  }

  .offer-overlay__num { font-size: 48px; margin-bottom: 16px;}
  
  .offer-overlay .border-right {border-right:solid 1px #fff; padding-right: 10px;}
}
  
  
@media (max-width: 767px) {
	.section-cytat__circles-mobile {
		display:block;
	}
	
	.section-cytat__circles-mobile img {
		margin:auto;
	}
	
	.section-cytat__inner {
		display:block;
	}
}

.nav__links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: none;
  border: none;
  opacity: 0;
  transition: opacity 0.2s;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: var(--light-beige-400);
}

.nav__links li a.active::after {
  opacity: 1;
  width: 92%;
  margin: auto;
}

.nav__links li a:hover::after {
  opacity: 0;
}

@media (max-width: 767px) {
  .mediach-inner {
    padding: 0 32px;
    gap: 32px;
  }

  .mediach-header {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }

  .mediach-header__desc {
    width: 100%;
    font-size: var(--text-base);
  }

  .mediach-blinds {
    flex-direction: column;
    height: auto;
    border: 1px solid var(--primary-container-border);
  }

  .mediach-panel {
    flex: none !important;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--primary-container-border);
    cursor: pointer;
  }

  .mediach-panel:last-child {
    border-bottom: none;
  }

  .mediach-panel.closed {
    height: 64px;
    overflow: hidden;
  }

  .mediach-panel.open {
    height: auto;
    cursor: default;
  }

  /* Tab poziomy na mobile: numer + tytuł w rzędzie */
  .mediach-tab {
    position: relative;
    width: 100%;
    height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24px;
    gap: 16px;
    pointer-events: none;
  }

  .mediach-tab__title-wrap {
    width: auto;
    flex: 1;
  }

  .mediach-tab__title {
    transform: none;
    white-space: nowrap;
    font-size: var(--text-lg);
  }

  /* Treść otwartego panelu */
  .mediach-content {
    position: relative;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    padding: 16px 24px 32px;
    transition: opacity 0.3s ease;
  }

  .mediach-panel.open .mediach-content {
    opacity: 1;
    pointer-events: auto;
  }
}

.proces-jasny__deco-mobile {
	display:none;
}

@media (max-width: 767px) {
	.proces-jasny__deco-mobile {
		display:block;
		margin-top:30px;
	}
	
	.proces-jasny__deco-mobile img {
		margin:auto;
	}
	
	.section-proces-jasny {
		display:block;
	}
	  
	.proces-tiles__intro {
		display:block;
		
	}  
	
	.proces-tiles__intro-p {
		padding-bottom:30px;
	}
}






@media (max-width: 767px) {
  .section-oferta-hero2 {
    height: auto;
    margin-top: 70px;
    padding: 64px 0 0;
    min-height: 720px;
  }

  .hero-oferta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .oferta-hero2__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding: 0 32px 32px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    order: 1;
  }

  .oferta-hero2__title {
    font-size: 48px;
  }

  .oferta-hero2__photo-wrap {
    position: relative;
    left: 0;
    top: auto;
    width: 100%;
    height: 324px;
    order: 2;
    flex-shrink: 0;
    padding: 0 30px;
  }

  .oferta-hero2__photo-label {
    font-size: 32px;
    bottom: 16px;
    right: 8px;
  }

  .oferta-hero2__kratka {
    position: absolute;
    right: -88px;
    bottom: 0;
    left: auto;
    width: 250px;
    height: auto;
    z-index: 2;
    order: 3;
    display: block;
    top: unset !important;
  }

  .oferta-hero2__kolo {
    position: absolute;
    right: 199px;
    bottom: -12px;
    left: auto;
    width: 69px;
    height: 69px;
    transform: rotate(180deg);
    order: 3;
    z-index: 2;
    display: block;
    top: unset !important;
  }

  .oferta-hero2__kurtyny {
    display: none;
  }
}

.gallery-item--archimetria img {
    pointer-events: none;
	width:70%;
}

.gallery-item--archimetria {
    display: flex;
    align-items: center;
    justify-content: center;
}

#form-message {
  color: #333 !important;
  margin: auto;
  padding: 22px 0;
  text-align: center;
}

.nav__links li a:hover::after {
    opacity: 1;
    width: 92%;
}

.gi-archimetria__logo {
    max-width: 60%;
    height: auto;
    display: block;
}