html, body { background: #090b0c; color-scheme: dark; }
.site-header { position: fixed; inset: 0 0 auto; margin: 0; padding: 0 var(--pad); background: #090b0cb8; backdrop-filter: blur(14px); opacity: var(--header-reveal, 0); visibility: hidden; }
.site-header.header-visible { visibility: visible; }
.site-header > .brand { opacity: var(--header-brand-reveal, 0); visibility: hidden; transform: translateY(calc((1 - var(--header-brand-reveal, 0)) * -5px)); }
.site-header.brand-visible > .brand { visibility: visible; }
.mobile-nav { position: fixed; }
.project-meta h3 { overflow-wrap: anywhere; }
.projects { padding-top: 42px; }
.projects .section-heading { margin-bottom: 26px; }
.projects .project-filters { margin-bottom: 22px; }
.projects .project-photo { width: 100%; }
@media (min-width: 900px) {
  .projects .project-photo { max-height: max(180px, calc(100svh - 588px)); }
}
@media (min-width: 900px) and (max-height: 850px) {
  .intro-band { min-height: 100px; padding-top: 18px; padding-bottom: 18px; }
  .projects { padding-top: 24px; }
  .projects .section-heading { margin-bottom: 18px; }
  .projects .section-heading h2 { font-size: 34px; }
  .projects .section-heading .eyebrow { margin-bottom: 14px; }
  .projects .project-filters { margin-bottom: 14px; }
  .projects .filter { padding-bottom: 12px; }
  .projects .project-photo { max-height: max(260px, calc(100svh - 488px)); }
  .projects .project-photo img { object-position: center 65%; }
}
.film { height: 390svh; position: relative; }
.film-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
#kitchen-stage { position: fixed; inset: 0; z-index: 0; height: 100svh; overflow: hidden; touch-action: pan-y; opacity: var(--scene-opacity, 1); }
.cinema-scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .7; }
.scene-ready .scene-fallback { visibility: hidden; }
.assembly-video, .assembly-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.assembly-video, .assembly-still { opacity: 0; }
[data-media="video"] .assembly-video, [data-media="poster"] .assembly-still { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  .assembly-video, .assembly-still { object-fit: contain; }
}
.film-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #090b0c55, transparent 26%, transparent 76%, #090b0ced); }
.story-copy { position: absolute; z-index: 2; pointer-events: none; }
.story-copy a { pointer-events: auto; }
.film-intro { inset: 0 var(--pad); display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; text-align: center; }
.film-intro .eyebrow { align-self: end; color: #ccd0cb; font-size: 11px; margin-bottom: 23px; text-transform: uppercase; }
.hero-brand { position: relative; width: 460px; max-width: 100%; height: 184px; margin: 0 auto; overflow: hidden; background: transparent; border: 0; }
.hero-brand img { position: absolute; width: 100%; max-width: none; height: auto; top: 50%; left: 0; transform: translateY(-50%); filter: brightness(0) invert(1); }
.film-intro-footer { align-self: start; }
.film-intro-footer > p { font-size: 15px; color: #d1d4ce; margin-top: 24px; }
.round-link { display: grid; place-items: center; border: 1px solid #ffffff55; width: 46px; height: 46px; border-radius: 50%; margin: 28px auto 0; transition: background .3s, transform .3s; }
.round-link:hover { background: #ffffff14; transform: translateY(3px); }
.chapter-copy { left: var(--pad); top: 25%; max-width: 520px; opacity: 0; visibility: hidden; }
.chapter-copy .eyebrow { font-size: 11px; text-transform: uppercase; color: #c4c8c2; }
.chapter-copy h2 { font-size: 47px; line-height: 1.18; margin-top: 18px; }
.final-copy { left: var(--pad); top: 20%; max-width: 500px; }
.final-copy .text-link { margin-top: 18px; min-height: 44px; }
.film-bottom { position: absolute; inset: auto var(--pad) 33px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; z-index: 5; }
.film-location { font-size: 11px; line-height: 1.7; color: #a8afa9; transition: opacity .65s ease; }
.film-chapters { display: flex; gap: 28px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease, visibility .7s; }
.film-chapters.chapters-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.film-chapters a { font-size: 12px; min-height: 44px; padding: 14px 0 10px; color: #89928a; border-top: 1px solid #ffffff2b; min-width: 105px; transition: color .3s, border-color .3s; }
.film-chapters a.active { color: #f0f1ee; border-color: var(--accent); }
.film-chapters a span { font-size: 10px; margin-right: 9px; }
.film-actions { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }
.gallery-ready .film-actions, .controls-ready .film-actions { opacity: 1; visibility: visible; pointer-events: auto; }
.opening-active .film-actions { opacity: 0; visibility: hidden; pointer-events: none; }
.film-actions .icon-button { width: 42px; height: 42px; }
.film-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff10; }
.film-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); }
.story-marker { position: absolute; width: 1px; height: 1px; pointer-events: none; scroll-margin-top: 0; }
#korpusy { top: 22%; } #fronty { top: 43%; } #swiatlo { top: 75%; }
.film.static-film { height: 100svh; }
.static-film .film-chapters, .film .icon-button[hidden] { display: none; }
@media (min-width: 1700px) {
  .hero-brand { width: 520px; height: 208px; }
  .chapter-copy h2 { font-size: 56px; }
}
@media (max-width: 1050px) {
  .chapter-copy h2 { font-size: 41px; }
  .film-location { display: none; }
  .film-chapters { margin-right: auto; }
}
@media (max-width: 899px) {
  .site-header { opacity: var(--header-reveal, 0); visibility: hidden; transform: translateY(calc((1 - var(--header-reveal, 0)) * -12px)); }
  .site-header.header-visible { visibility: visible; }
  .site-header > .brand { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 760px) {
  .projects { padding-top: 30px; }
  .projects .section-heading { margin-bottom: 22px; }
  .projects .section-heading > .text-link { margin-top: 16px; }
  .projects .project-photo { max-height: max(160px, calc(100svh - 578px)); }
  .film { height: 320svh; }
  #swiatlo { top: 70%; }
  .film-intro { bottom: 0; grid-template-rows: minmax(0, 1.04fr) auto minmax(0, 1fr); }
  .film-intro .eyebrow { font-size: 10px; margin-bottom: 19px; }
  .hero-brand { width: 320px; height: 128px; }
  .film-intro-footer > p { font-size: 13px; margin-top: clamp(50px, 7svh, 68px); }
  .round-link { margin-top: 32px; }
  .chapter-copy { left: var(--pad); right: var(--pad); top: 19%; max-width: none; }
  .chapter-copy h2 { font-size: 34px; }
  .chapter-copy .eyebrow { font-size: 10px; }
  .final-copy { top: 16%; bottom: auto; text-align: left; }
  .final-copy h2 { font-size: 36px; }
  .final-copy .text-link { font-size: 11px; margin-top: 9px; }
  .film-bottom { bottom: 20px; gap: 8px; flex-wrap: wrap; }
  .film-chapters { width: 100%; justify-content: space-between; gap: 12px; }
  .film-chapters a { font-size: 11px; min-width: 0; flex: 1; }
  .film-actions { margin-left: auto; height: 36px; }
  .film-actions .icon-button { height: 36px; width: 40px; }
}
@media (max-width: 360px) {
  .hero-brand { width: 272px; height: 109px; }
  .film-intro-footer > p { font-size: 12px; }
  .chapter-copy h2, .final-copy h2 { font-size: 31px; }
}
@media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  .film-intro { grid-template-rows: minmax(0, .82fr) auto minmax(0, 1fr); }
  .film-intro .eyebrow { font-size: 10px; margin-bottom: 8px; }
  .hero-brand { width: 224px; height: 90px; }
  .film-intro-footer > p { font-size: 12px; margin-top: 12px; }
  .round-link { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .site-header { transform: none; }
  .site-header > .brand { transform: none; }
  .film { height: 100svh; }
  .chapter-copy, .story-marker, .film-chapters { display: none; }
  .film-actions { margin-left: auto; }
}
@media (max-width: 899px) {
  .final-copy { inset: 0 var(--pad); max-width: none; padding-top: 20svh; }
  .final-copy > .button[data-service-link="Kuchnia na wymiar"] {
    position: absolute;
    top: calc(50svh + min(34.85vw, 49.2svh) + 24px);
    left: 50%;
    transform: translate(-50%, var(--quote-exit-y, 0px));
    opacity: var(--quote-exit-opacity, 1);
    display: inline-flex;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding-inline: 20px;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .final-copy { padding-top: 16svh; }
  .film-bottom { bottom: 16px; }
  .film-actions { display: none; }
  .gallery-ready .film-actions, .controls-ready .film-actions { display: flex; }
}