.offer-selector {
  margin-top: 52px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #080d10;
}

.offer-selector__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.offer-selector__tabs button {
  min-height: 78px;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #a8b0b5;
  display: flex;
  align-items: center;
  gap: 24px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 320ms ease, color 320ms ease, box-shadow 420ms cubic-bezier(.22, 1, .36, 1);
}

.offer-selector__tabs button:last-child { border-right: 0; }
.offer-selector__tabs button span { font-family: var(--font-mono); font-size: 10px; }
.offer-selector__tabs button b { font-size: 16px; }
.offer-selector__tabs button[aria-selected="true"] {
  background: rgba(18, 183, 239, .1);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--cyan);
}
.offer-selector__tabs button[aria-selected="true"] span { color: var(--cyan); }

.offer-selector__panel {
  position: relative;
  height: 720px;
  min-height: 720px;
  max-height: 720px;
  overflow: hidden;
  background: #0b1115;
}

.offer-selector__scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 14px, 0);
  transition: opacity 540ms ease, transform 660ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.offer-selector__scene.is-current {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.offer-selector__scene.is-leaving {
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, -9px, 0);
}

.offer-selector__photo { height: 720px; min-height: 0; margin: 0; overflow: hidden; }
.offer-selector__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--offer-position, 50% 50%);
  filter: saturate(.82) contrast(1.02);
  transform: scale(calc(var(--offer-zoom, 1) * 1.045));
  transform-origin: var(--offer-position, 50% 50%);
  transition: filter 760ms ease, transform 1100ms cubic-bezier(.22, 1, .36, 1);
}
.offer-selector__scene.is-current .offer-selector__photo img { filter: saturate(.94) contrast(1.02); transform: scale(var(--offer-zoom, 1)); }
.offer-selector__content { box-sizing: border-box; height: 720px; overflow: hidden; background: #0b1115; padding: clamp(46px, 4.5vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.offer-selector__content > span { color: var(--cyan); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.offer-selector__content h3 { margin: 30px 0 20px; max-width: 570px; color: #fff; font-size: clamp(38px, 4.4vw, 68px); line-height: .96; letter-spacing: -.055em; }
.offer-selector__content p { max-width: 510px; color: #a8b0b5; font-size: 16px; line-height: 1.7; }
.offer-selector__content ul { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; color: #eef2f4; }
.offer-selector__content li::before { content: "✓"; margin-right: 14px; color: var(--cyan-dark, #00aee8); }
.offer-selector__content .button { align-self: flex-start; }

.offer-selector__content > span,
.offer-selector__content > h3,
.offer-selector__content > p,
.offer-selector__content > ul,
.offer-selector__content > .button {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 440ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1);
}
.offer-selector__scene.is-current .offer-selector__content > * { opacity: 1; transform: translate3d(0, 0, 0); }
.offer-selector__scene.is-current .offer-selector__content > span { transition-delay: 90ms; }
.offer-selector__scene.is-current .offer-selector__content > h3 { transition-delay: 130ms; }
.offer-selector__scene.is-current .offer-selector__content > p { transition-delay: 175ms; }
.offer-selector__scene.is-current .offer-selector__content > ul { transition-delay: 215ms; }
.offer-selector__scene.is-current .offer-selector__content > .button { transition-delay: 255ms; }

/* Portfolio: ruch pozostaje powiązany z gestem i nie blokuje kliknięć. */
.album-card {
  --rail-scale: 1;
  --rail-lift: 0px;
  --rail-opacity: 1;
  opacity: var(--rail-opacity);
  transform: translate3d(0, var(--rail-lift), 0) scale(var(--rail-scale));
  transform-origin: 50% 45%;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.album-rail.is-dragging .album-card,
.album-rail.is-scrolling .album-card { transition-duration: 90ms; }
.album-rail.is-filtering .album-card { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }

/*
 * Do not animate every gallery tile. Large albums can exceed the browser's
 * compositor budget and leave decoded images in an unpainted layer until a
 * hover forces a repaint. The modal itself still provides the opening motion.
 */
.album-modal.is-open .album-shot {
  opacity: 1;
  transform: none;
  animation: none;
}

.lightbox figure { position: relative; overflow: hidden; }
.lightbox figure img[data-lightbox-image] {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 190ms ease, transform 250ms cubic-bezier(.4, 0, 1, 1);
  will-change: opacity, transform;
}
.lightbox figure img[data-lightbox-image].is-exiting {
  opacity: 0;
  transform: translate3d(var(--lightbox-exit-x, -14px), 0, 0) scale(.992);
}
.lightbox figure img[data-lightbox-image].is-entering {
  opacity: 0;
  transform: translate3d(var(--lightbox-enter-x, 14px), 0, 0) scale(.992);
}
.lightbox figure img[data-lightbox-image].is-swapping {
  transition: none !important;
}

/* Wspolne, filmowe przejscie: Hero -> Podejscie */
.hero {
  background: #071118;
}

.hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .94) 0%, rgba(3, 5, 6, .7) 36%, rgba(3, 5, 6, .12) 72%),
    linear-gradient(0deg, rgba(7, 17, 24, .82) 0%, rgba(7, 17, 24, .66) 4%, rgba(6, 14, 19, .4) 10%, rgba(4, 9, 12, .16) 20%, transparent 34%, rgba(3, 5, 6, .38) 100%);
}

/* Podejście i „O mnie” jako jedna płynna kompozycja */
.approach-story {
  --story-overlap: clamp(70px, 5vw, 96px);
  --story-seam-mid: clamp(28px, 2.4vw, 44px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  z-index: 1;
  min-height: calc(clamp(760px, 56vw, 840px) + var(--story-overlap));
  margin-top: calc(-1 * var(--story-overlap));
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0, rgba(7, 17, 24, .2) var(--story-seam-mid), #071118 var(--story-overlap), #071118 100%);
}

.approach-story::before {
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  background:
    linear-gradient(90deg, transparent 0%, transparent 35%, rgba(7, 17, 24, .04) 39%, rgba(7, 17, 24, .14) 44%, rgba(7, 17, 24, .34) 49%, rgba(7, 17, 24, .62) 55%, rgba(7, 17, 24, .84) 61%, #071118 69%, #071118 100%),
    linear-gradient(180deg, transparent 0%, transparent 74%, rgba(7, 17, 24, .18) 86%, rgba(7, 17, 24, .72) 95%, #071118 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .42) 22px, rgba(0, 0, 0, .78) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .42) 22px, rgba(0, 0, 0, .78) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
  pointer-events: none;
  content: "";
}

.approach-story::after {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  height: clamp(130px, 14vw, 220px);
  background: linear-gradient(180deg, transparent 0%, rgba(8, 13, 16, .54) 48%, var(--bg-soft) 100%);
  pointer-events: none;
  content: "";
}

.approach-story__content {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  grid-column: 2;
  width: 100%;
  margin: 0;
  padding: calc(var(--story-overlap) + clamp(68px, 5vw, 82px)) max(5vw, calc((100vw - 1760px) / 2)) clamp(62px, 5vw, 80px) clamp(42px, 3.5vw, 66px);
  background: transparent;
}

.approach-story__content > .section-index { margin: 0 0 clamp(28px, 3vw, 44px); }

.approach-story .manifest__body .display {
  width: min(100%, 760px);
  max-width: 14ch;
  font-size: clamp(44px, 3vw, 60px);
  line-height: .96;
  text-wrap: balance;
}
.approach-story .manifest__copy { grid-template-columns: 1fr; max-width: 560px; margin-left: 0; }

.approach-story__photos {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  inset: auto;
  width: 70vw;
  min-height: 0;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .42) 22px, rgba(0, 0, 0, .78) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .42) 22px, rgba(0, 0, 0, .78) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
}

.approach-story__photos::before,
.approach-story__photos::after {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  content: "";
}

.approach-story__photos::before {
  display: block;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 74%, rgba(7, 17, 24, .24) 86%, rgba(7, 17, 24, .78) 95%, #071118 100%),
    linear-gradient(90deg, rgba(7, 17, 24, .14) 0%, transparent 10%, transparent 62%, rgba(7, 17, 24, .16) 70%, rgba(7, 17, 24, .5) 80%, rgba(7, 17, 24, .82) 91%, #071118 100%);
}

.approach-story__photos::after {
  display: none;
}

.approach-story__photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.approach-story__photo img {
  width: 100%;
  height: 100%;
  object-fit: var(--cms-fit, cover);
  object-position: var(--cms-position, 50% 50%);
  transform: scale(var(--cms-zoom, 1));
  transform-origin: var(--cms-position, 50% 50%);
}

.approach-story__photo--main { inset: 0 0 0 0; }
.approach-story__photo--small {
  right: auto;
  left: calc(50vw - clamp(220px, 13vw, 270px));
  bottom: 7%;
  z-index: 2;
  width: clamp(190px, 12vw, 230px);
  height: auto;
  aspect-ratio: 2 / 3;
  border: 6px solid #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.approach-story__about {
  position: relative;
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(24px, 2.5vw, 34px) 0 0;
  border: 0;
  border-top: 1px solid rgba(18, 183, 239, .28);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.approach-story__about .eyebrow { margin-bottom: 14px; font-size: 10px; }
.approach-story__about .display { max-width: 14ch; font-size: clamp(46px, 3.4vw, 64px); line-height: .94; }
.approach-story__about .eyebrow,
.approach-story__about .display em,
.approach-story__about .about__values span { color: var(--cyan); }
.approach-story__about .about__copy,
.approach-story__about .about__values p { color: #a8b0b5; }
.approach-story__about .about__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 24px; font-size: clamp(15px, .9vw, 16px); line-height: 1.65; }
.approach-story__about .about__copy p { margin: 0; }
.approach-story__about .about__values { margin-top: 26px; border-color: rgba(255, 255, 255, .1); }
.approach-story__about .about__values div,
.approach-story__about .about__values div:last-child { padding-block: 17px; border-color: rgba(255, 255, 255, .09); }
.approach-story__about .about__values strong { font-size: 15px; line-height: 1.25; }
.approach-story__about .about__values p { margin-top: 8px; font-size: 13px; line-height: 1.55; }

.portfolio.section {
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding-top: clamp(82px, 7vw, 112px);
  background: linear-gradient(180deg, #071118 0%, #07141b 180px, #080d10 360px, #080d10 100%);
}

.portfolio.section::before {
  display: none;
}

/* Każda szeroka sekcja ma własną scenę optyczną. Wspólny pozostaje język
   światła, ale nie geometria, barwa ani trajektoria ruchu. */
.section--ambient {
  --ambient-x: 0px;
  --ambient-y: 0px;
  --ambient-r: 0deg;
  --ambient-scale: 1;
  --ambient-opacity: .72;
  --ambient-side-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 15%, transparent 34%, transparent 66%, rgba(0, 0, 0, .92) 85%, #000 100%);
  position: relative;
  isolation: isolate;
}

.section--ambient > :not(.ambient-scene) {
  position: relative;
  z-index: 2;
}

.ambient-scene {
  position: absolute;
  z-index: 1;
  /* Dodatkowy zapas pozostaje poza ekranem, dzięki czemu rozmycie i obracane
     smugi wygasają zanim dotrą do granicy obszaru renderowania. */
  inset-block: -24%;
  inset-inline: calc((100vw - 100%) / -2 - 12vw);
  overflow: hidden;
  opacity: var(--ambient-opacity);
  pointer-events: none;
  contain: paint;
  transition: opacity 240ms linear;
  -webkit-mask-image: var(--ambient-side-mask);
  mask-image: var(--ambient-side-mask);
}

.ambient-scene i {
  position: absolute;
  display: block;
  border-radius: 0;
  mix-blend-mode: screen;
  backface-visibility: hidden;
  will-change: transform, translate, rotate, scale, opacity, filter;
}

/* Portfolio: kolorowa mgła i smugi światła. Bez pierścieni, bokeh i punktowych
   flar — rytm budują wyłącznie niebiesko-pomarańczowe pasma. */
.ambient--aperture .ambient-scene {
  inset-block: -18%;
  --aperture-edge-mask: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, .7) 27%, #000 36%, #000 78%, rgba(0, 0, 0, .72) 88%, transparent 100%);
  -webkit-mask-image: var(--ambient-side-mask), var(--aperture-edge-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--ambient-side-mask), var(--aperture-edge-mask);
  mask-composite: intersect;
}
.ambient--aperture .ambient-scene i:nth-child(1) {
  left: -13%; top: 13%; width: 46%; height: 31%;
  border-radius: 46% 54% 61% 39%;
  background: radial-gradient(ellipse at 58% 52%, rgba(20, 184, 248, .17), rgba(4, 102, 145, .055) 48%, transparent 73%);
  filter: blur(18px);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-1), 0) rotate(var(--ambient-r-1)) scale(var(--ambient-scale));
  animation: ambient-bloom 17s cubic-bezier(.45, 0, .35, 1) infinite alternate;
}
.ambient--aperture .ambient-scene i:nth-child(2) {
  right: -11%; top: 27%; width: 39%; height: 43%;
  border-radius: 58% 42% 36% 64%;
  background: radial-gradient(ellipse at 34% 55%, rgba(255, 145, 66, .13), rgba(190, 57, 105, .035) 48%, transparent 74%);
  filter: blur(22px);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-2), 0) rotate(var(--ambient-r-2));
  animation: halation-drift-b 19s -6s cubic-bezier(.45, 0, .35, 1) infinite alternate-reverse;
}
.ambient--aperture .ambient-scene i:nth-child(3) {
  left: -5%; top: 23%; width: 38%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .08) 15%, rgba(20, 184, 248, .5) 48%, rgba(141, 230, 255, .09) 77%, transparent);
  box-shadow: 0 0 20px rgba(20, 184, 248, .1);
  transform: translate3d(var(--ambient-x-3), var(--ambient-y-3), 0) rotate(-10deg);
  transform-origin: left center;
  animation: aperture-ray 11s -2s ease-in-out infinite alternate;
}
.ambient--aperture .ambient-scene i:nth-child(4) {
  right: -7%; bottom: 17%; width: 43%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 149, 68, .03) 16%, rgba(255, 154, 75, .4) 52%, rgba(255, 202, 147, .06) 79%, transparent);
  box-shadow: 0 0 18px rgba(255, 139, 61, .07);
  transform: translate3d(var(--ambient-x-4), var(--ambient-y-4), 0) rotate(12deg);
  animation: streak-glide-b 14s -7s ease-in-out infinite alternate-reverse;
}
.ambient--aperture .ambient-scene i:nth-child(5) {
  left: 4%; bottom: 8%; width: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .34), rgba(20, 184, 248, .025), transparent);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-4), 0) rotate(-17deg);
  animation: streak-glide-a 13s -5s ease-in-out infinite alternate;
}
.ambient--aperture .ambient-scene i:nth-child(6) {
  right: 2%; top: 15%; width: 21%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 166, 86, .025), rgba(255, 166, 86, .3), transparent);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-3), 0) rotate(7deg);
  animation: aperture-ray 16s -9s ease-in-out infinite alternate-reverse;
}

/* Oferta: miękka mgła oraz rozszczepione niebiesko-pomarańczowe smugi. */
.ambient--prism .ambient-scene {
  inset-block: 0 -28%;
  --ambient-edge-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .14) 4%, rgba(0, 0, 0, .58) 12%, #000 24%, #000 69%, rgba(0, 0, 0, .72) 83%, rgba(0, 0, 0, .18) 95%, transparent 100%);
  -webkit-mask-image: var(--ambient-side-mask), var(--ambient-edge-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--ambient-side-mask), var(--ambient-edge-mask);
  mask-composite: intersect;
}
.ambient--prism .ambient-scene::before,
.ambient--prism .ambient-scene::after {
  position: absolute;
  left: -5%;
  top: 34%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(27, 196, 245, .05) 12%, rgba(27, 196, 245, .42) 38%, rgba(98, 222, 255, .12) 72%, transparent 100%);
  box-shadow: 0 0 24px rgba(20, 184, 248, .1);
  transform: translate3d(var(--ambient-x-3), var(--ambient-y-3), 0) rotate(calc(-13deg + var(--ambient-r-3)));
  transform-origin: left center;
  content: "";
  animation: prism-ray 10s -3s ease-in-out infinite alternate;
}
.ambient--prism .ambient-scene::after {
  left: auto;
  right: -4%;
  top: 68%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 158, 75, .04) 14%, rgba(255, 158, 75, .38) 52%, rgba(255, 207, 157, .06) 78%, transparent);
  box-shadow: 0 0 20px rgba(255, 139, 61, .07);
  transform: translate3d(var(--ambient-x-4), var(--ambient-y-4), 0) rotate(calc(12deg + var(--ambient-r-4)));
  transform-origin: right center;
  animation: streak-glide-b 15s -8s ease-in-out infinite alternate-reverse;
}
.ambient--prism .ambient-scene i:nth-child(1) {
  left: -15%; top: 4%; width: 44%; height: 29%;
  border-radius: 42% 58% 64% 36%;
  background: radial-gradient(ellipse at 66% 45%, rgba(23, 190, 246, .2), rgba(5, 96, 136, .065) 46%, transparent 72%);
  filter: blur(7px);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-1), 0) rotate(calc(-18deg + var(--ambient-r-1))) scale(var(--ambient-scale));
  animation: prism-pulse-a 13s ease-in-out infinite alternate;
}
.ambient--prism .ambient-scene i:nth-child(2) {
  right: -12%; top: 21%; width: 34%; height: 44%;
  border-radius: 60% 40% 35% 65%;
  background: radial-gradient(ellipse at 34% 55%, rgba(255, 152, 72, .14), rgba(187, 64, 115, .04) 46%, transparent 72%);
  filter: blur(13px);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-2), 0) rotate(calc(21deg + var(--ambient-r-2)));
  animation: prism-pulse-b 16s -5s ease-in-out infinite alternate-reverse;
}
.ambient--prism .ambient-scene i:nth-child(3) {
  left: 1%; top: 56%; width: 31%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .4), rgba(20, 184, 248, .025), transparent);
  transform: translate3d(var(--ambient-x-3), var(--ambient-y-3), 0) rotate(calc(-6deg + var(--ambient-r-3)));
  animation: streak-glide-a 14s -6s ease-in-out infinite alternate;
}
.ambient--prism .ambient-scene i:nth-child(4) {
  right: 1%; top: 18%; width: 27%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 158, 75, .03), rgba(255, 158, 75, .32), transparent);
  transform: translate3d(var(--ambient-x-4), var(--ambient-y-4), 0) rotate(calc(8deg + var(--ambient-r-4)));
  animation: aperture-ray 17s -7s ease-in-out infinite alternate-reverse;
}
.ambient--prism .ambient-scene i:nth-child(5) {
  left: -4%; bottom: 13%; width: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .32), rgba(20, 184, 248, .02), transparent);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-4), 0) rotate(-16deg);
  animation: streak-glide-a 18s -11s ease-in-out infinite alternate;
}
.ambient--prism .ambient-scene i:nth-child(6) {
  right: 7%; bottom: 31%; width: 19%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 166, 86, .02), rgba(255, 166, 86, .3), transparent);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-2), 0) rotate(17deg);
  animation: streak-glide-b 12s -4s ease-in-out infinite alternate-reverse;
}

/* Współpraca: kinowe smugi biegnące po skosie na rozmytej mgle. */
.ambient--streaks .ambient-scene {
  inset-block: -34%;
  inset-inline: calc((100vw - 100%) / -2 - 16vw);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 7%, #000 17%, #000 83%, rgba(0, 0, 0, .3) 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .42) 9%, #000 19%, #000 81%, rgba(0, 0, 0, .42) 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 7%, #000 17%, #000 83%, rgba(0, 0, 0, .3) 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .42) 9%, #000 19%, #000 81%, rgba(0, 0, 0, .42) 91%, transparent 100%);
  mask-composite: intersect;
}
.ambient--streaks .ambient-scene i:nth-child(1) {
  left: 1%; top: 22%; width: 38%; height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .42), rgba(20, 184, 248, .03), transparent);
  box-shadow: 0 10px 32px rgba(20, 184, 248, .14);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-1), 0) rotate(calc(-17deg + var(--ambient-r-1))) scaleX(var(--ambient-scale));
  animation: streak-glide-a 9s ease-in-out infinite alternate;
}
.ambient--streaks .ambient-scene i:nth-child(2) {
  right: 0; top: 55%; width: 42%; height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 151, 76, .025), rgba(255, 161, 82, .36), transparent);
  box-shadow: 0 10px 28px rgba(255, 135, 61, .08);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-2), 0) rotate(calc(14deg + var(--ambient-r-2)));
  animation: streak-glide-b 13s -4s ease-in-out infinite alternate-reverse;
}
.ambient--streaks .ambient-scene i:nth-child(3) {
  left: 0; bottom: 7%; width: 44%; height: 34%;
  border-radius: 48% 52% 57% 43%;
  background: radial-gradient(ellipse, rgba(20, 184, 248, .13), rgba(4, 102, 145, .035) 48%, transparent 72%);
  filter: blur(19px);
  transform: translate3d(var(--ambient-x-3), var(--ambient-y-3), 0);
  animation: ambient-bloom 18s -8s ease-in-out infinite alternate;
}
.ambient--streaks .ambient-scene i:nth-child(4) {
  right: 1%; top: 9%; width: 42%; height: 39%;
  border-radius: 53% 47% 41% 59%;
  background: radial-gradient(ellipse, rgba(255, 151, 76, .1), rgba(180, 50, 98, .025) 48%, transparent 73%);
  filter: blur(22px);
  transform: translate3d(var(--ambient-x-4), var(--ambient-y-4), 0) rotate(var(--ambient-r-4));
  animation: halation-drift-b 21s -9s ease-in-out infinite alternate;
}
.ambient--streaks .ambient-scene i:nth-child(5) {
  left: 9%; top: 61%; width: 27%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .34), rgba(20, 184, 248, .02), transparent);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-4), 0) rotate(-9deg);
  animation: streak-glide-a 15s -7s ease-in-out infinite alternate;
}
.ambient--streaks .ambient-scene i:nth-child(6) {
  right: 5%; top: 31%; width: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 161, 82, .02), rgba(255, 161, 82, .31), transparent);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-3), 0) rotate(21deg);
  animation: streak-glide-b 17s -10s ease-in-out infinite alternate-reverse;
}

/* Kontakt: miękka halacja jak światło rozlane na kliszy, bez rywalizacji z formularzem. */
.ambient--halation .ambient-scene { z-index: 1; inset: -5% 0; opacity: var(--ambient-opacity-soft); mask-image: none; -webkit-mask-image: none; }
.ambient--halation .contact__inner { z-index: 3; }
.ambient--halation .contact__media { z-index: 0; }
.ambient--halation .ambient-scene i:nth-child(1) {
  left: -8%; top: 8%; width: 36%; height: 64%;
  background: radial-gradient(ellipse at 30% 40%, rgba(20, 184, 248, .17), rgba(4, 91, 133, .045) 48%, transparent 73%);
  filter: blur(17px);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-1), 0) rotate(var(--ambient-r-1));
  animation: halation-drift-a 15s ease-in-out infinite alternate;
}
.ambient--halation .ambient-scene i:nth-child(2) {
  right: -4%; bottom: -5%; width: 31%; height: 48%;
  background: radial-gradient(ellipse, rgba(255, 139, 66, .12), rgba(181, 45, 102, .035) 50%, transparent 74%);
  filter: blur(21px);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-2), 0) rotate(var(--ambient-r-2));
  animation: halation-drift-b 18s -6s ease-in-out infinite alternate-reverse;
}
.ambient--halation .ambient-scene i:nth-child(3) {
  left: -3%; bottom: 27%; width: 34%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .38), rgba(20, 184, 248, .025), transparent);
  transform: translate3d(var(--ambient-x-3), var(--ambient-y-3), 0) rotate(-12deg);
  animation: streak-glide-a 14s -5s ease-in-out infinite alternate;
}
.ambient--halation .ambient-scene i:nth-child(4) {
  right: -3%; top: 19%; width: 31%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 154, 75, .025), rgba(255, 154, 75, .34), transparent);
  transform: translate3d(var(--ambient-x-4), var(--ambient-y-4), 0) rotate(13deg) scaleX(var(--ambient-scale));
  animation: streak-glide-b 16s -8s ease-in-out infinite alternate-reverse;
}
.ambient--halation .ambient-scene i:nth-child(5) {
  left: 12%; top: 16%; width: 23%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .3), rgba(20, 184, 248, .02), transparent);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-4), 0) rotate(7deg);
  animation: aperture-ray 18s -11s ease-in-out infinite alternate;
}
.ambient--halation .ambient-scene i:nth-child(6) {
  right: 9%; bottom: 14%; width: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 166, 86, .02), rgba(255, 166, 86, .28), transparent);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-2), 0) rotate(-8deg);
  animation: streak-glide-b 19s -12s ease-in-out infinite alternate-reverse;
}

/* Stopka: dyskretna niebiesko-pomarańczowa poświata i cienkie pasma. */
.ambient--film .ambient-scene { inset-block: -75%; }
.ambient--film .ambient-scene i:nth-child(1) {
  left: -4%; top: 34%; width: 29%; height: 40%;
  background: radial-gradient(ellipse, rgba(20, 184, 248, .14), transparent 70%);
  filter: blur(12px);
  transform: translate3d(var(--ambient-x-1), var(--ambient-y-1), 0);
  animation: film-drift-a 17s ease-in-out infinite alternate;
}
.ambient--film .ambient-scene i:nth-child(2) {
  right: -5%; bottom: 28%; width: 25%; height: 34%;
  background: radial-gradient(ellipse, rgba(255, 166, 85, .08), transparent 72%);
  filter: blur(16px);
  transform: translate3d(var(--ambient-x-2), var(--ambient-y-2), 0);
  animation: film-drift-b 20s -8s ease-in-out infinite alternate-reverse;
}
.ambient--film .ambient-scene i:nth-child(3) {
  left: -2%; top: 43%; width: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .3), rgba(20, 184, 248, .02), transparent);
  transform: rotate(-9deg);
  animation: streak-glide-a 15s -6s ease-in-out infinite alternate;
}
.ambient--film .ambient-scene i:nth-child(4) {
  right: -3%; top: 54%; width: 28%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 166, 85, .02), rgba(255, 166, 85, .26), transparent);
  transform: rotate(8deg);
  animation: streak-glide-b 18s -9s ease-in-out infinite alternate-reverse;
}
.ambient--film .ambient-scene i:nth-child(5) {
  left: 14%; bottom: 29%; width: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 248, .24), transparent);
  transform: rotate(13deg);
  animation: aperture-ray 17s -4s ease-in-out infinite alternate;
}
.ambient--film .ambient-scene i:nth-child(6) {
  right: 13%; top: 30%; width: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 166, 85, .2), transparent);
  transform: rotate(-14deg);
  animation: aperture-ray 20s -13s ease-in-out infinite alternate-reverse;
}

/* Ciągły ruch optyczny składa się z animacji CSS oraz parallaxu liczonego
   ze scrolla w app.js. Różne trajektorie zapobiegają efektowi kopiuj-wklej. */
@keyframes aperture-ray {
  0% { translate: -24px 10px; scale: .72 1; opacity: .18; }
  55% { translate: 28px -14px; scale: 1.08 1; opacity: .68; }
  100% { translate: 10px 16px; scale: .9 1; opacity: .34; }
}
@keyframes ambient-bloom {
  0% { translate: 0 20px; scale: .88 .94; opacity: .48; }
  52% { translate: -24px -16px; scale: 1.08 1.04; opacity: .86; }
  100% { translate: 16px 4px; scale: .98 1.08; opacity: .58; }
}
@keyframes prism-ray {
  0% { translate: -34px 18px; scale: .68 1; opacity: .12; }
  50% { translate: 24px -15px; scale: 1.12 1; opacity: .74; }
  100% { translate: 52px 8px; scale: .84 1; opacity: .28; }
}
@keyframes prism-pulse-a {
  0% { translate: -14px 18px; rotate: -1.5deg; scale: .94 .98; opacity: .54; }
  58% { translate: 30px -18px; rotate: 2deg; scale: 1.08 1.03; opacity: .9; }
  100% { translate: 6px 26px; rotate: -.5deg; scale: 1.01 1.09; opacity: .65; }
}
@keyframes prism-pulse-b {
  0% { translate: 18px -24px; rotate: 1deg; scale: 1.06 .96; opacity: .48; }
  47% { translate: -26px 14px; rotate: -2deg; scale: .95 1.08; opacity: .82; }
  100% { translate: 12px 28px; rotate: .7deg; scale: 1.04 1; opacity: .6; }
}
@keyframes streak-glide-a {
  0% { translate: -44px 24px; scale: .7 1; opacity: .24; }
  52% { translate: 24px -16px; scale: 1.16 1; opacity: .78; }
  100% { translate: 58px 10px; scale: .88 1; opacity: .42; }
}
@keyframes streak-glide-b {
  0% { translate: 38px -18px; scale: 1.08 1; opacity: .2; }
  50% { translate: -32px 18px; scale: .76 1; opacity: .68; }
  100% { translate: -62px -8px; scale: 1.02 1; opacity: .36; }
}
@keyframes halation-drift-a {
  0% { translate: -18px 22px; rotate: -2deg; scale: .92 1.04; opacity: .48; }
  52% { translate: 28px -18px; rotate: 1.5deg; scale: 1.1 .96; opacity: .88; }
  100% { translate: 8px 26px; rotate: -.8deg; scale: 1 1.08; opacity: .62; }
}
@keyframes halation-drift-b {
  0% { translate: 20px -18px; rotate: 1.5deg; scale: 1.08 .94; opacity: .42; }
  48% { translate: -24px 16px; rotate: -1.6deg; scale: .94 1.1; opacity: .8; }
  100% { translate: 12px 28px; rotate: .6deg; scale: 1.04 1; opacity: .56; }
}
@keyframes film-drift-a {
  0% { translate: -20px 12px; scale: .92 1.03; opacity: .38; }
  55% { translate: 26px -13px; scale: 1.1 .96; opacity: .76; }
  100% { translate: 4px 19px; scale: 1 1.08; opacity: .52; }
}
@keyframes film-drift-b {
  0% { translate: 18px -10px; scale: 1.05 .95; opacity: .32; }
  50% { translate: -25px 17px; scale: .94 1.08; opacity: .68; }
  100% { translate: 8px 23px; scale: 1.08 1; opacity: .46; }
}
@media (max-width: 1179px) {
  .ambient-scene { display: none; }
}

@media (min-width: 1900px) {
  .approach-story .manifest__body .display { font-size: 60px; max-width: 14ch; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .offer-selector__panel { height: 680px; min-height: 680px; max-height: 680px; }
  .offer-selector__photo,
  .offer-selector__content { height: 680px; }
  .offer-selector__content { padding: 42px; }
  .offer-selector__content h3 { font-size: clamp(42px, 5vw, 56px); }
}

@media (max-width: 760px) {
  .approach-story {
    --story-overlap: 52px;
    --story-seam-mid: 28px;
    display: block;
    min-height: 0;
    margin-top: calc(-1 * var(--story-overlap));
    padding: 0 5vw;
    background: linear-gradient(180deg, transparent 0, rgba(7, 17, 24, .28) var(--story-seam-mid), #071820 var(--story-overlap), #071820 100%);
  }
  .approach-story::before { display: none; }
  .approach-story__photos {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 528px;
    margin-inline: -5vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 18px, rgba(0, 0, 0, .82) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 18px, rgba(0, 0, 0, .82) var(--story-seam-mid), #000 var(--story-overlap), #000 100%);
  }
  .approach-story__photos::before {
    display: block;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 0%, transparent 68%, rgba(7, 17, 24, .22) 80%, rgba(7, 24, 32, .78) 93%, #071820 100%),
      linear-gradient(90deg, rgba(7, 17, 24, .1), transparent 16%, transparent 78%, rgba(7, 17, 24, .42) 100%);
  }
  .approach-story__photos::after { display: none; }
  .approach-story__photo--main { inset: 0; }
  .approach-story__photo--small { right: 3vw; left: auto; bottom: 14%; width: clamp(150px, 38vw, 210px); height: auto; border-width: 5px; }
  .approach-story__content { width: auto; margin-left: 0; padding: 48px 0 62px; background: #071820; }
  .approach-story .manifest__body .display { width: auto; max-width: 13ch; font-size: clamp(38px, 10.5vw, 48px); }
  .approach-story__content > .section-index { margin-bottom: 28px; }
  .approach-story__about { margin-top: 26px; padding: 24px 0 0; }
  .approach-story__about .display { font-size: clamp(42px, 11.5vw, 54px); }
  .approach-story__about .about__copy { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; font-size: 15px; line-height: 1.65; }
  .approach-story__about .about__values { grid-template-columns: 1fr; margin-top: 32px; }
  .approach-story__about .about__values div { padding: 17px 12px; }
  .portfolio.section { margin-top: 0; padding-top: 76px; }
  .offer-selector { margin-top: 34px; }
  .offer-selector__tabs { grid-template-columns: repeat(2, 1fr); }
  .offer-selector__tabs button { min-height: 66px; padding: 0 14px; gap: 12px; }
  .offer-selector__tabs button:nth-child(2) { border-right: 0; }
  .offer-selector__tabs button:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .offer-selector__panel { height: 880px; min-height: 880px; max-height: 880px; }
  .offer-selector__scene { grid-template-columns: 1fr; grid-template-rows: 300px 580px; }
  .offer-selector__photo { width: 100%; height: 300px; min-height: 300px; aspect-ratio: auto; }
  .offer-selector__photo img {
    object-position: var(--offer-position-mobile, var(--offer-position, 50% 50%));
    transform-origin: var(--offer-position-mobile, var(--offer-position, 50% 50%));
  }
  .offer-selector__scene.is-current .offer-selector__photo img {
    transform: scale(var(--offer-zoom-mobile, var(--offer-zoom, 1)));
  }
  .offer-selector__content { height: 580px; min-height: 580px; overflow: hidden; padding: 34px 24px 38px; justify-content: center; }
  .offer-selector__content h3 { margin: 18px 0 14px; font-size: clamp(34px, 9.5vw, 46px); }
  .offer-selector__content p { font-size: 14px; line-height: 1.55; }
  .offer-selector__content ul { margin: 18px 0 22px; gap: 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-selector__tabs button,
  .offer-selector__scene,
  .offer-selector__photo img,
  .offer-selector__content > *,
  .album-card,
  .lightbox figure img[data-lightbox-image] { transition: none !important; }
  .album-modal.is-open .album-shot { animation: none !important; }
  .ambient-scene i { animation: none !important; }
  .ambient--prism .ambient-scene::before { animation: none !important; }
}