/* ══════════════════════════════════════════════
   ZMIENNE
══════════════════════════════════════════════ */
:root {
  --white:       #FFFFFF;
  --cream:       #FAF8F5;
  --cream-deep:  #F2EEE7;
  --mocha:       #B8956A;
  --mocha-deep:  #9C7A52;
  --ink:         #1A1A1A;
  --ink-soft:    #2A2520;
  --muted:       #8A8A8A;
  --line:        #E8E4DD;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}

section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }

/* ══════════════════════════════════════════════
   TYPOGRAPHY HELPERS
══════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: 0.01em; line-height: 1.05; color: var(--ink); }
h1 { font-size: clamp(48px, 8vw, 120px); }
h2 { font-size: clamp(48px, 7.5vw, 104px); font-weight: 300; }
h3 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 400; }
h4 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; }
p  { font-weight: 300; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 80px);
  flex-wrap: wrap;
}
.section-head h2 { font-style: italic; max-width: 800px; }
.section-head .lead { max-width: 380px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.section-eyebrow { display: inline-block; margin-bottom: 20px; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 18px 36px;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-radius: 0;
}
.btn-solid { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.btn-solid:hover { background: var(--mocha-deep); border-color: var(--mocha-deep); }
.btn-ghost { color: var(--ink); border: 1px solid var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn .arrow { display: inline-block; transition: transform 0.35s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════
   NAVIGATION — centered logo, 3-column grid
══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  padding: 32px clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: background-color 0.4s ease, padding 0.3s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
  color: var(--cream);
}

.nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px clamp(24px, 5vw, 64px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

.nav-inner { display: contents; }

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  list-style: none;
}
.nav-right { justify-content: flex-end; }

.nav-left a, .nav-right a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: currentColor;
  position: relative;
  padding: 6px 0;
  transition: opacity 0.3s ease;
}
.nav-left a::after, .nav-right a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.35s ease;
}
.nav-left a:hover::after, .nav-right a:hover::after { width: 100%; }

.logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: clamp(36px, 3.2vw, 48px);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

.nav.scrolled .logo-img {
  filter: none;
}

.logo-img--footer {
  filter: brightness(0) invert(1);
}

.nav-cta {
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.nav-cta:hover { background: rgba(255,255,255,0.15); }
.nav.scrolled .nav-cta:hover { background: var(--ink); color: var(--white); }

/* burger */
.nav-toggle {
  display: none;
  width: 28px; height: 18px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  grid-column: 3;
  justify-self: end;
}
.nav-toggle span {
  display: block;
  width: 100%; height: 1px;
  background: currentColor;
  position: absolute; left: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 8px; }
.nav-toggle span:nth-child(3) { top: 16px; }
.nav-toggle.open span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--white);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--serif);
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.mobile-menu a:hover { color: var(--mocha); }

/* ══════════════════════════════════════════════
   HERO — dark warm gradient, split 50/50
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(148deg, #2e1e16 0%, #4e3830 32%, #7a6559 62%, #a08a7c 100%);
  color: var(--cream);
  overflow: hidden;
}

.hero-wrap {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* text column — right side */
.hero-text {
  grid-column: 2;
  position: relative;
  z-index: 3;
  padding: 0 clamp(40px, 7vw, 120px) clamp(80px, 10vw, 140px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 4px 50px rgba(0,0,0,0.18);
}
.hero-title .hero-name {
  display: block;
  white-space: nowrap;
}
.hero-title em {
  font-style: normal;
  font-weight: 300;
  display: block;
  color: var(--cream);
  font-size: 0.68em;
  white-space: nowrap;
}

.hero-sub {
  margin-top: 36px;
  color: rgba(246,242,235,0.78);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.8;
  max-width: 440px;
  font-weight: 300;
}

.hero-link {
  margin-top: 44px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.hero-link:hover { gap: 28px; color: var(--mocha); border-color: var(--mocha); }
.hero-link .arr { display: inline-block; transition: transform 0.4s ease; }
.hero-link:hover .arr { transform: translateX(6px); }

/* photo — absolute bottom-left, above marquee */
.hero-photo {
  position: absolute;
  bottom: 0;
  left: -33%;
  width: 140%;
  z-index: 2;
  pointer-events: none;
}
.hero-svg {
  width: 100%;
  height: auto;
  max-height: 96svh;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  filter: drop-shadow(8px 0 40px rgba(0,0,0,0.22));
}

/* marquee strip */
.hero-marquee {
  position: relative;
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  padding: 28px 0;
  z-index: 2;
  border-top: 1px solid var(--line);
}
.hero-marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.hero-marquee-track span {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 36px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  padding: 0 clamp(40px, 5vw, 80px);
  display: inline-flex;
  align-items: center;
}
.hero-marquee-track span::before {
  content: "·";
  color: var(--mocha);
  margin-right: clamp(40px, 5vw, 80px);
  font-weight: 400;
  font-size: 1.4em;
  line-height: 0;
}

/* ══════════════════════════════════════════════
   SIGNATURE BREAK
══════════════════════════════════════════════ */
.signature {
  background: var(--cream);
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.signature .sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 300;
  color: var(--mocha);
  line-height: 0.9;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.signature .sig.in { opacity: 1; }
.signature .sub {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */
.about { padding-top: 40px; padding-bottom: 40px; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.about-left .eyebrow { margin-bottom: 32px; display: inline-block; }
.about-left h2 { font-style: italic; margin-bottom: 36px; line-height: 0.95; }
.about-left p {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 20px;
  font-weight: 300;
  max-width: 540px;
}
.about-ctas { display: flex; gap: 16px; margin-top: 48px; flex-wrap: wrap; }
.about-img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  overflow: visible;
}
.about-svg {
  width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  transform: scale(0.95);
  transform-origin: center center;
}

/* ══════════════════════════════════════════════
   STATS GLASS WIDGET
══════════════════════════════════════════════ */
.stats-glass {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex;
  align-items: center;
  background: #7a6559;
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(60,40,28,0.18);
  padding: clamp(28px, 3.5vw, 44px) clamp(32px, 5vw, 72px);
}
.sg-item {
  flex: 1;
  text-align: center;
  padding: 0 clamp(16px, 2.5vw, 40px);
}
.sg-num {
  font-family: var(--serif);
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1;
  font-weight: 300;
  color: var(--white);
}
.sg-num em { font-style: italic; color: #f0d8c0; }
.sg-label {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}
.sg-div {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   OFERTA TILES
══════════════════════════════════════════════ */
.oferta { padding-top: 40px; }

.offer-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.offer-tile {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #edddd0;
  color: var(--ink);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  text-decoration: none;
}
.offer-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.13);
}

.ot-photo {
  aspect-ratio: 1/1;
  width: calc(100% - 72px);
  background-size: cover;
  background-position: center top;
  border-radius: 20px;
  margin: 36px 36px 0;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.offer-tile:hover .ot-photo { transform: scale(1.03); }

.ot-body {
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.5vw, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: space-between;
}

.ot-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.ot-cta {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 10px 24px;
  transition: background 0.25s ease, color 0.25s ease;
}
.offer-tile:hover .ot-cta {
  background: var(--ink);
  color: var(--white);
}

.carousel {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * clamp(24px, 5vw, 80px));
  padding: 0 clamp(24px, 5vw, 80px);
}
.carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.carousel-controls {
  display: flex;
  gap: 16px;
  margin-top: 48px;
  align-items: center;
}
.ctl {
  width: 56px; height: 56px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}
.ctl:hover { background: var(--ink); color: var(--white); }
.ctl svg { width: 18px; height: 18px; }
.ctl-progress {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--line);
  position: relative;
  margin-left: 16px;
}
.ctl-progress::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--p, 16.6%);
  background: var(--mocha);
  transition: width 0.5s ease;
}
.ctl-count {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.05em;
  margin-left: 20px;
}
.ctl-count em { color: var(--ink); font-style: italic; }

/* ══════════════════════════════════════════════
   PORTFOLIO — MASONRY GRID
══════════════════════════════════════════════ */
.collage { background: var(--white); padding: clamp(80px, 11vw, 160px) 0; }

/* filter pills */
.pf-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.pf-btn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 10px 22px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  border-radius: 0;
}
.pf-btn:hover { border-color: var(--ink); color: var(--ink); }
.pf-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* masonry via CSS columns */
.pf-grid {
  columns: 3;
  column-gap: 14px;
}
.pf-item {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.pf-item img {
  width: 100%;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pf-item:hover img { transform: scale(1.06); }

.pf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26,18,12,0.75) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 18px;
  gap: 4px;
}
.pf-item:hover .pf-overlay { opacity: 1; }

.pf-cat {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mocha);
  font-weight: 500;
}
.pf-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--white);
}

/* hide/show filtered items */
.pf-item.pf-hidden { display: none; }
.pf-item.pf-over-limit { display: none; }

/* curtain + gradient fade */
.pf-curtain { position: relative; }
.pf-curtain.is-limited::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--white) 100%);
  pointer-events: none;
}

/* "Zobacz więcej" button */
.pf-more {
  text-align: center;
  margin-top: 40px;
}
.pf-more.pf-more-hidden { display: none; }
.pf-more-btn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 40px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
.pf-more-btn:hover { background: var(--ink); color: var(--white); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
.lb-close {
  position: absolute;
  top: 24px; right: 32px;
  color: var(--white);
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
}
.lb-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════
   TRUSTED NAMES
══════════════════════════════════════════════ */
.trusted { background: var(--cream-deep); }
.trusted-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: flex-start;
}
.trusted-left .eyebrow { margin-bottom: 20px; display: inline-block; }
.trusted-left h2 { font-style: italic; max-width: 360px; }
.trusted-left p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 32px; max-width: 360px; }

.trusted-names {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.trusted-names span { display: inline; transition: color 0.3s ease; }
.trusted-names span:hover { color: var(--mocha); }
.trusted-names .sep {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--mocha);
  border-radius: 50%;
  margin: 0 12px;
  vertical-align: middle;
}
.trusted-names .end {
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 20px);
  font-style: italic;
  display: block;
  margin-top: 32px;
  line-height: 1.6;
  max-width: 640px;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════
   REFERENCES CAROUSEL
══════════════════════════════════════════════ */
.references { background: var(--cream); }
.references .carousel-track { gap: 20px; }
.ref-card { flex: 0 0 clamp(260px, 25vw, 360px); cursor: pointer; }
.ref-photo {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}
.ref-photo .img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ref-card:hover .img { transform: scale(1.05); }
.ref-name {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.ref-tag {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   SPECIAL OFFERS — dark section
══════════════════════════════════════════════ */
.gradient-zone {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f5efe8 40%,
    #ddc9b4 75%,
    #7a6559 100%
  );
}

.about  { background: transparent; padding-top: 40px; padding-bottom: 40px; }
.oferta { background: transparent; padding-top: 40px; }

/* ══════════════════════════════════════════════
   VIDEO STRIP
══════════════════════════════════════════════ */
.video-strip {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 45vw, 600px);
}
.video-strip-video {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.special { background: #7a6559; color: var(--white); }
.special h2 { color: var(--white); font-style: italic; }
.special .lead { color: rgba(255,255,255,0.6); }
.special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.special-card {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink-soft);
  cursor: pointer;
  display: block;
}
.special-card .photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.special-card:hover .photo { opacity: 0.75; transform: scale(1.04); }
.special-card .content {
  position: absolute; inset: 0;
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.special-card .label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mocha);
}
.special-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 52px);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 12px;
}
.special-card .desc { color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.6; max-width: 320px; }
.special-card .cta {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--white);
  padding-bottom: 6px;
  align-self: flex-start;
  transition: gap 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.special-card:hover .cta { gap: 20px; color: var(--mocha); border-bottom-color: var(--mocha); }

/* ══════════════════════════════════════════════
   TESTIMONIALS — infinite auto-scroll
══════════════════════════════════════════════ */
.testimonials { background: var(--cream); padding: clamp(80px, 11vw, 160px) 0 clamp(40px, 6vw, 80px); }

.testi-strip {
  overflow: hidden;
  margin: 56px 0 0;
  position: relative;
}
.testi-strip::before,
.testi-strip::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 3;
  pointer-events: none;
}
.testi-strip::before { left: 0;  background: linear-gradient(90deg,  var(--cream), transparent); }
.testi-strip::after  { right: 0; background: linear-gradient(-90deg, var(--cream), transparent); }

.testi-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.testi-card {
  flex: 0 0 clamp(220px, 20vw, 300px);
  background: var(--white);
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.testi-card .qm {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  line-height: 0.7;
  color: var(--mocha);
  height: 20px;
}
.testi-text {
  font-family: var(--serif);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  flex: 1;
}
.testi-meta { border-top: 1px solid var(--line); padding-top: 20px; }
.testi-meta::before {
  content: '★★★★★';
  display: block;
  color: #c9a070;
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.testi-name { font-family: var(--serif); font-size: 18px; margin-bottom: 4px; font-style: italic; }
.testi-tag  { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 100px 0 40px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer .logo { color: var(--white); display: block; margin-bottom: 24px; }
.footer-tag { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 32px; display: block; }
.footer-desc { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.75; max-width: 380px; }
.footer-col-title { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-family: var(--serif); font-size: 20px; color: var(--white); font-style: italic; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--mocha); }
.footer-bottom {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 16px;
}

/* ══════════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav { grid-template-columns: auto auto; padding: 22px 24px; }
  .nav-left, .nav-right { display: none; }
  .logo { justify-self: start; }
  .nav-toggle { display: block; grid-column: 2; }
  .mobile-menu { display: flex; }

  .hero       { display: flex; flex-direction: column; }
  .hero-wrap  { display: block; min-height: auto; }
  .hero-photo { position: relative; left: auto; width: 300%; margin-left: -100%; margin-top: -40px; margin-bottom: 0; transform: translateY(0); }
  .hero-svg   { object-fit: cover; object-position: top center; max-height: 147vw; display: block; }
  .hero-text  { padding: 90px 24px 8px; justify-content: flex-start; text-align: center; align-items: center; grid-column: auto; }
  .hero-link  { align-self: center; }

  .about-grid    { grid-template-columns: 1fr; }
  .stats-grid    { grid-template-columns: 1fr; }
  .special-grid  { grid-template-columns: 1fr; }
  .trusted-grid  { grid-template-columns: 1fr; }
  .footer-top    { grid-template-columns: 1fr; }
  .offer-tiles   { grid-template-columns: 1fr; }
  .pf-grid       { columns: 2; }

}

@media (max-width: 560px) {
  .about-ctas  { flex-direction: column; align-items: stretch; }
  .btn         { justify-content: center; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .pf-grid     { columns: 1; }
  .pf-filters  { gap: 8px; }
  .stats-glass { flex-direction: column; gap: 24px; }
  .sg-div      { width: 60px; height: 1px; }
}

/* ══════════════════════════════════════════════
   PORTFOLIO SCROLL ANIMATION
══════════════════════════════════════════════ */
.pfx-outer {
  background: var(--white);
  min-height: 260vh;
}

@media (max-width: 640px) {
  .pfx-outer   { min-height: auto; }
  .pfx-content { position: relative; top: 0; }
}

.pfx-content {
  position: sticky;
  top: 140px;
  min-height: calc(100vh - 140px);
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pfx-grid {
  --pfx-gap: clamp(8px, 4vw, 56px);

  width: min(
    1400px,
    calc(100% - clamp(12px, 1.5vw, 24px) * 2),
    calc((100vh - 140px + var(--pfx-gap)) / 3 * 4)
  );
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--pfx-gap);
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  align-content: center;
}

.pfx-grid > .pfx-layer {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

/* Layer 1: skrajne kolumny */
.pfx-grid > .pfx-layer:nth-of-type(1) div:nth-of-type(odd)  { grid-column: 1; }
.pfx-grid > .pfx-layer:nth-of-type(1) div:nth-of-type(even) { grid-column: -2; }

/* Layer 2: wewnętrzne kolumny */
.pfx-grid > .pfx-layer:nth-of-type(2) div:nth-of-type(odd)  { grid-column: 2; }
.pfx-grid > .pfx-layer:nth-of-type(2) div:nth-of-type(even) { grid-column: -3; }

/* Layer 3: środek góra i dół */
.pfx-grid > .pfx-layer:nth-of-type(3) div:first-of-type { grid-column: 3; grid-row: 1; }
.pfx-grid > .pfx-layer:nth-of-type(3) div:last-of-type  { grid-column: 3; grid-row: -2; }

.pfx-grid img:not(.pfx-hero) {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.pfx-scaler {
  grid-area: 2 / 3;
  position: relative;
  z-index: 5;
  aspect-ratio: 4 / 5;
}

.pfx-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 640px) {
  .pfx-scaler { grid-area: 2 / 2; }

  .pfx-grid { grid-template-columns: repeat(3, 1fr); }
  .pfx-grid > .pfx-layer:nth-of-type(1) { display: none; }
  .pfx-grid > .pfx-layer:nth-of-type(2) div:nth-of-type(odd)  { grid-column: 1; }
  .pfx-grid > .pfx-layer:nth-of-type(2) div:nth-of-type(even) { grid-column: -2; }
  .pfx-grid > .pfx-layer:nth-of-type(3) div:first-of-type { grid-column: 2; }
  .pfx-grid > .pfx-layer:nth-of-type(3) div:last-of-type  { grid-column: 2; }
}

/* ── Portfolio CTA button ─────────────────────────────── */
.pfx-cta {
  background: var(--white);
  padding: clamp(64px, 9vw, 120px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pfx-cta-btn {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 30px);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: clamp(16px, 2vw, 24px) clamp(36px, 5vw, 64px);
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 0.35s ease, color 0.35s ease;
}

.pfx-cta-btn:hover { background: var(--ink); color: var(--white); }

.pfx-cta-btn .arr {
  display: inline-block;
  transition: transform 0.35s ease;
  font-style: normal;
}

.pfx-cta-btn:hover .arr { transform: translateX(5px); }

/* ── Portfolio subpage header ─────────────────────────── */
.pf-page-hero {
  background: var(--white);
  padding: clamp(120px, 14vw, 180px) 0 clamp(48px, 6vw, 72px);
}




/* ══════════════════════════════════════════════
   PORTFOLIO SCROLL-DRIVEN ANIMATION
   Supported: Chrome 115+, Safari 18+, Firefox 114+
   Fallback: static centered grid (looks good too)
══════════════════════════════════════════════ */

:root {
  --gutter: 2rem;
  --pfx-power1-out: linear(0 0%,0.0027 3.64%,0.0106 7.29%,0.0425 14.58%,0.0957 21.87%,0.1701 29.16%,0.2477 35.19%,0.3401 41.23%,0.5982 55.18%,0.7044 61.56%,0.7987 68.28%,0.875 75%,0.9297 81.25%,0.9687 87.5%,0.9922 93.75%,1 100%);
  --pfx-power2-out: linear(0 0%,0.0036 9.62%,0.0185 16.66%,0.0489 23.03%,0.0962 28.86%,0.1705 34.93%,0.269 40.66%,0.3867 45.89%,0.5833 52.95%,0.683 57.05%,0.7829 62.14%,0.8621 67.46%,0.8991 70.68%,0.9299 74.03%,0.9545 77.52%,0.9735 81.21%,0.9865 85%,0.9949 89.15%,1 100%);
  --pfx-power3-out: linear(0 0%,0.0029 13.8%,0.0184 21.9%,0.0339 25.51%,0.0551 28.81%,0.0827 31.88%,0.1168 34.76%,0.1962 39.57%,0.3005 44.02%,0.4084 47.53%,0.6242 53.45%,0.7493 57.93%,0.8495 62.97%,0.8888 65.67%,0.9213 68.51%,0.9629 73.9%,0.9876 80.16%,0.998 87.5%,1 100%);
  --pfx-power4-out: linear(0 0%,0.0012 14.95%,0.0089 22.36%,0.0297 28.43%,0.0668 33.43%,0.0979 36.08%,0.1363 38.55%,0.2373 43.07%,0.3675 47.01%,0.5984 52.15%,0.7121 55.23%,0.8192 59.21%,0.898 63.62%,0.9297 66.23%,0.9546 69.06%,0.9733 72.17%,0.9864 75.67%,0.9982 83.73%,1 100%);
  --pfx-sine: linear(0 0%,0.2861 18.47%,0.4829 32.08%,0.6437 44.52%,0.7712 56.07%,0.8722 67.47%,0.9115 73.02%,0.9434 78.49%,0.9682 83.91%,0.9859 89.3%,0.9965 94.66%,1 100%);
}

@keyframes pfx-fade   { 0%, 55% { opacity: 0; } }
@keyframes pfx-reveal { 0%, 30% { scale: 0; } }
@keyframes pfx-scale-x { 0%, 10% { width: 72vw; } }
@keyframes pfx-scale-y { 0%, 10% { height: 72vh; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (animation-range: 0 100%) {

    .pfx-outer {
      view-timeline: --pfx-runner;
    }

    /* Hero: shrinks from viewport-filling to cell size */
    .pfx-hero {
      animation-name: pfx-scale-x, pfx-scale-y;
      animation-fill-mode: both;
      animation-timing-function: var(--pfx-power2-out), var(--pfx-power1-out);
      animation-timeline: --pfx-runner, --pfx-runner;
      animation-range: entry 100% exit -20%;
    }

    /* Layers: scale + fade from center, staggered ranges */
    .pfx-grid .pfx-layer {
      animation-name: pfx-fade, pfx-reveal;
      animation-fill-mode: both;
      animation-timeline: --pfx-runner, --pfx-runner;
    }
    .pfx-grid .pfx-layer:nth-of-type(1) {
      animation-timing-function: var(--pfx-sine), var(--pfx-power1-out);
      animation-range: entry 100% exit 0%;
    }
    .pfx-grid .pfx-layer:nth-of-type(2) {
      animation-timing-function: var(--pfx-sine), var(--pfx-power1-out);
      animation-range: entry 100% exit -10%;
    }
    .pfx-grid .pfx-layer:nth-of-type(3) {
      animation-timing-function: var(--pfx-sine), var(--pfx-power1-out);
      animation-range: entry 100% exit -20%;
    }

  }
}

/* ══════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .signature .sig { opacity: 1 !important; transform: none !important; }
}