{"id":3774,"date":"2026-09-16T17:15:05","date_gmt":"2026-09-16T17:15:05","guid":{"rendered":"https:\/\/michalplebaniak.com\/?page_id=3774"},"modified":"2026-09-17T12:09:49","modified_gmt":"2026-09-17T12:09:49","slug":"home","status":"publish","type":"page","link":"https:\/\/michalplebaniak.com\/en\/","title":{"rendered":"Micha\u0142 Plebaniak – Freelance Creative"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n \n \n\n \n \n \n \n \n \n Strategia, content, design i produkcja<\/title>\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23003BF3'\/%3E%3Cpath d='M15 46V18h8l9 14 9-14h8v28h-8V31L32 44 23 31v15z' fill='white'\/%3E%3C\/svg%3E\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\" rel=\"stylesheet\" media=\"print\" onload=\"this.media='all'\" \/>\n <noscript><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\" rel=\"stylesheet\" \/><\/noscript>\n \n<style>\n* {\n box-sizing: border-box;\n }\n\n :root {\n --bg: #fff;\n --text: #000029;\n --muted: #000051;\n --soft: #BABABA;\n --line: #DCDEE2;\n\n --serif: Georgia, \"Times New Roman\", Times, serif;\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n --inter: \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n\n --page-x: clamp(20px, 4vw, 48px);\n --main-top: clamp(72px, 10vw, 140px);\n --main-bottom: clamp(72px, 9vw, 120px);\n\n --logo-box-width: 116px;\n --logo-box-height: 38px;\n --logo-gap: clamp(24px, 3.4vw, 48px);\n --logo-gray: #BABABA;\n }\n\n html {\n min-height: 100%;\n background: var(--bg);\n }\n\n body {\n margin: 0;\n min-height: 100svh;\n background: var(--bg);\n color: var(--text);\n font-family: var(--sans);\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n text-rendering: geometricPrecision;\n }\n\n a {\n color: inherit;\n }\n\n .page {\n min-height: 100svh;\n display: grid;\n grid-template-rows: 1fr;\n }\n\n main {\n width: min(calc(100% - (var(--page-x) * 2)), 1320px);\n margin: 0 auto;\n align-self: start;\n padding: var(--main-top) 0 var(--main-bottom);\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(260px, 430px) minmax(500px, 620px);\n justify-content: space-between;\n gap: clamp(80px, 14vw, 220px);\n align-items: start;\n }\n\n .grid > *,\n .hero,\n .info,\n .services,\n .clients {\n min-width: 0;\n }\n\n .hero {\n padding-right: 0;\n max-width: 430px;\n }\n\n h1 {\n margin: 0;\n font-family: var(--serif);\n font-size: var(--scale-8);\n line-height: .98;\n font-weight: 400;\n letter-spacing: -.075em;\n }\n\n h1 span {\n display: block;\n font-style: italic;\n letter-spacing: -.085em;\n }\n\n .contact {\n width: min(100%, 320px);\n margin-top: clamp(38px, 5vw, 64px);\n padding-top: clamp(18px, 2.4vw, 28px);\n }\n\n .intro {\n margin: 0 0 26px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.68;\n letter-spacing: -.01em;\n }\n\n .socials {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .social-link {\n width: 22px;\n height: 22px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--muted);\n text-decoration: none;\n transition:\n color .18s ease,\n transform .18s ease;\n }\n\n .social-link:hover {\n color: var(--text);\n transform: translateY(-1px);\n }\n\n .social-link svg {\n width: 17px;\n height: 17px;\n display: block;\n fill: currentColor;\n }\n\n .info {\n align-self: start;\n justify-self: end;\n width: min(100%, 620px);\n overflow: hidden;\n }\n\n .panel {\n padding-top: clamp(18px, 2.4vw, 28px);\n }\n\n .section-title {\n margin: 0 0 24px;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 400;\n line-height: 1.4;\n letter-spacing: .14em;\n text-align: left;\n text-transform: uppercase;\n }\n\n .services__list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n column-gap: clamp(22px, 2.8vw, 40px);\n row-gap: clamp(24px, 2.6vw, 34px);\n }\n\n .service {\n display: grid;\n grid-template-columns: 24px 1fr;\n gap: 12px;\n align-items: baseline;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-0);\n line-height: 1.28;\n font-weight: 400;\n letter-spacing: -.035em;\n transition:\n color .18s ease,\n transform .18s ease;\n }\n\n .service::before {\n content: attr(data-no);\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n line-height: 1.3;\n letter-spacing: .08em;\n }\n\n .service:hover {\n color: #000029;\n transform: translateX(4px);\n }\n\n .clients {\n width: 100%;\n margin-top: clamp(56px, 6vw, 84px);\n padding: 28px 0 0;\n overflow: hidden;\n border-top: 1px solid var(--line);\n background: transparent;\n }\n\n .clients__label {\n margin: 0 0 24px;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 400;\n line-height: 1.4;\n letter-spacing: .14em;\n text-align: left;\n text-transform: uppercase;\n }\n\n .clients__marquee {\n width: 100%;\n overflow: hidden;\n -webkit-mask-image: none;\n mask-image: none;\n }\n\n .clients__track {\n display: flex;\n width: max-content;\n max-width: none;\n animation: logoScroll 64s linear infinite;\n will-change: transform;\n transform: translate3d(0, 0, 0);\n }\n\n .clients__group {\n display: flex;\n align-items: center;\n gap: var(--logo-gap);\n padding-right: var(--logo-gap);\n }\n\n .clients__logo {\n width: var(--logo-box-width);\n height: var(--logo-box-height);\n min-width: var(--logo-box-width);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--logo-gray);\n background: transparent;\n }\n\n .clients__logo img,\n .clients__logo svg {\n display: block;\n width: var(--logo-w, 92px);\n height: var(--logo-h, 26px);\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n background: transparent;\n opacity: .52;\n transform: none;\n transition: none;\n }\n\n .clients__logo img {\n filter: grayscale(1) saturate(0) brightness(.78) contrast(.9);\n }\n\n .clients__logo svg {\n color: var(--logo-gray);\n }\n\n .clients__logo--blend img {\n mix-blend-mode: multiply;\n }\n\n .clients__text-logo {\n width: var(--logo-w, 92px);\n height: var(--logo-h, 26px);\n display: flex;\n align-items: center;\n justify-content: center;\n color: currentColor;\n opacity: .52;\n text-align: center;\n white-space: nowrap;\n }\n\n .clients__logo--playboy {\n --logo-w: 48px;\n --logo-h: 25px;\n }\n\n .clients__logo--esquire {\n --logo-w: 84px;\n --logo-h: 23px;\n }\n\n .clients__logo--cosmo {\n --logo-w: 96px;\n --logo-h: 23px;\n }\n\n .clients__logo--arp {\n width: 142px;\n min-width: 142px;\n --logo-w: 132px;\n --logo-h: 38px;\n }\n\n .clients__logo--pes {\n width: 150px;\n min-width: 150px;\n --logo-w: 140px;\n --logo-h: 38px;\n }\n\n .clients__logo--pes .clients__text-logo {\n white-space: normal;\n font-size: var(--scale-minus-1);\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: .01em;\n text-transform: uppercase;\n }\n\n .clients__logo--nck {\n width: 154px;\n min-width: 154px;\n height: 48px;\n --logo-w: 146px;\n --logo-h: 44px;\n }\n\n .clients__logo--nck svg {\n overflow: visible;\n }\n\n .nck-mark,\n .nck-text {\n fill: currentColor;\n }\n\n .clients__logo--bit {\n --logo-w: 84px;\n --logo-h: 25px;\n }\n\n .clients__logo--btt {\n width: 138px;\n min-width: 138px;\n --logo-w: 128px;\n --logo-h: 38px;\n }\n\n .clients__logo--sans {\n --logo-w: 98px;\n --logo-h: 27px;\n }\n\n .clients__logo--crosscore {\n --logo-w: 78px;\n --logo-h: 31px;\n }\n\n .clients__logo--crosscore img {\n filter: grayscale(1) saturate(0) brightness(.68) contrast(.9);\n opacity: .58;\n }\n\n .clients__logo--agora {\n --logo-w: 84px;\n --logo-h: 25px;\n }\n\n .clients__logo--bok {\n width: 118px;\n min-width: 118px;\n --logo-w: 108px;\n --logo-h: 34px;\n }\n\n .clients__logo--medicover {\n width: 124px;\n min-width: 124px;\n --logo-w: 112px;\n --logo-h: 32px;\n }\n\n .clients__logo--bazaar {\n --logo-w: 118px;\n --logo-h: 26px;\n }\n\n .clients__logo--bazaar .clients__text-logo {\n font-family: var(--serif);\n font-size: var(--scale-0);\n font-weight: 400;\n line-height: 1.25;\n letter-spacing: .02em;\n text-transform: uppercase;\n }\n\n .project-contact {\n width: 100%;\n margin-top: clamp(64px, 8vw, 112px);\n padding-top: 30px;\n border-top: 1px solid var(--line);\n }\n\n .project-contact__layout {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: clamp(48px, 9vw, 140px);\n align-items: start;\n }\n\n .project-contact__intro {\n min-width: 0;\n max-width: 520px;\n }\n\n .project-contact__intro .section-title {\n margin-bottom: 24px;\n }\n\n .project-contact__title {\n margin: 0;\n font-family: var(--serif);\n font-size: var(--scale-7);\n font-weight: 400;\n line-height: .98;\n letter-spacing: -.07em;\n }\n\n .project-contact__title span {\n display: block;\n font-style: italic;\n letter-spacing: -.08em;\n }\n\n .project-contact__copy {\n max-width: 420px;\n margin: 24px 0 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.68;\n letter-spacing: -.01em;\n }\n\n .contact-form {\n min-width: 0;\n width: 100%;\n border-top: 1px solid var(--text);\n padding-top: 18px;\n }\n\n .contact-form .wpcf7,\n .contact-form .wpcf7-form {\n width: 100%;\n margin: 0;\n }\n\n .contact-form .wpcf7-form > p:empty,\n .contact-form .message-builder > p:empty {\n display: none;\n }\n\n .message-builder {\n width: 100%;\n padding: clamp(16px, 2.2vw, 22px);\n border: 1px solid var(--line);\n border-radius: 24px;\n background: var(--bg);\n display: grid;\n gap: 18px;\n }\n\n .builder-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding-bottom: 14px;\n border-bottom: 1px solid var(--line);\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.4;\n letter-spacing: .14em;\n text-transform: uppercase;\n }\n\n .builder-counter {\n flex: 0 0 auto;\n font-variant-numeric: tabular-nums;\n }\n\n .builder-progress {\n width: 100%;\n height: 1px;\n overflow: hidden;\n background: var(--line);\n }\n\n .builder-progress-bar {\n display: block;\n width: 20%;\n height: 100%;\n background: var(--text);\n transition: width .22s ease;\n }\n\n .builder-step {\n display: none;\n gap: 12px;\n }\n\n .builder-step.is-active {\n display: grid;\n }\n\n .builder-label {\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.4;\n letter-spacing: .14em;\n text-transform: uppercase;\n }\n\n .builder-hint {\n margin: -2px 0 2px;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n line-height: 1.5;\n }\n\n .builder-options {\n display: grid;\n gap: 8px;\n }\n\n .builder-option,\n .builder-nav,\n .builder-submit,\n .contact-form .wpcf7-submit {\n appearance: none;\n -webkit-appearance: none;\n outline: none;\n box-shadow: none;\n text-decoration: none;\n }\n\n .builder-option,\n .builder-nav {\n width: 100%;\n min-height: 44px;\n border: 1px solid var(--line);\n border-radius: 999px;\n background: transparent;\n color: var(--text);\n padding: 11px 16px;\n font-family: var(--sans);\n font-size: var(--scale-minus-1);\n line-height: 1.25;\n letter-spacing: .08em;\n text-align: center;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n opacity .16s ease;\n }\n\n .builder-option:hover,\n .builder-option:focus-visible,\n .builder-option.is-active,\n .builder-nav:hover,\n .builder-nav:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n }\n\n .builder-fields {\n display: grid;\n gap: 16px;\n }\n\n .builder-field {\n display: grid;\n gap: 7px;\n margin: 0;\n }\n\n .builder-field .wpcf7-form-control-wrap {\n display: block;\n width: 100%;\n }\n\n .builder-input,\n .builder-textarea,\n .builder-preview-text {\n width: 100%;\n margin: 0;\n padding: 11px 0;\n border: 0;\n border-bottom: 1px solid var(--line);\n border-radius: 0;\n outline: 0;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-minus-1);\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: 0;\n box-shadow: none;\n appearance: none;\n -webkit-appearance: none;\n transition: border-color .16s ease;\n }\n\n .builder-input:focus,\n .builder-textarea:focus,\n .builder-preview-text:focus {\n border-bottom-color: var(--text);\n }\n\n .builder-input::placeholder,\n .builder-textarea::placeholder {\n color: var(--soft);\n opacity: 1;\n }\n\n .builder-textarea {\n min-height: 112px;\n resize: vertical;\n }\n\n .builder-preview {\n display: grid;\n gap: 10px;\n padding-top: 14px;\n border-top: 1px solid var(--line);\n }\n\n .builder-preview-text {\n min-height: 190px;\n resize: vertical;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.58;\n }\n\n .builder-final-note {\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.5;\n }\n\n .builder-antirobot {\n min-height: 44px;\n padding: 10px 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background: transparent;\n transition:\n border-color .16s ease,\n background-color .16s ease;\n }\n\n .builder-antirobot .wpcf7-form-control-wrap,\n .builder-antirobot .wpcf7-form-control,\n .builder-antirobot .wpcf7-list-item {\n display: block;\n width: 100%;\n margin: 0;\n }\n\n .builder-antirobot label {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n color: var(--text);\n font-size: var(--scale-minus-1);\n line-height: 1.4;\n cursor: pointer;\n }\n\n .builder-antirobot input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n flex: 0 0 18px;\n margin: 0;\n accent-color: var(--text);\n cursor: pointer;\n }\n\n .message-builder.has-antirobot-confirmation .builder-antirobot {\n border-color: var(--text);\n }\n\n .builder-antirobot .wpcf7-not-valid-tip {\n margin-top: 7px;\n }\n\n .builder-hidden-fields {\n display: none !important;\n }\n\n .builder-captcha {\n min-height: 0;\n overflow: hidden;\n }\n\n .builder-captcha .cf-turnstile,\n .builder-captcha .wpcf7-turnstile,\n .builder-captcha [data-sitekey],\n .builder-captcha iframe {\n max-width: 100%;\n }\n\n .builder-actions {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 8px;\n padding-top: 14px;\n border-top: 1px solid var(--line);\n }\n\n .builder-actions > p,\n .builder-submit-wrap > p {\n display: contents;\n margin: 0;\n }\n\n .builder-prev:disabled {\n opacity: .28;\n pointer-events: none;\n }\n\n .builder-submit-wrap {\n display: none;\n min-width: 0;\n }\n\n .message-builder.is-final .builder-next {\n display: none;\n }\n\n .message-builder.is-final .builder-submit-wrap {\n display: block;\n }\n\n .contact-form .wpcf7-submit {\n width: 100%;\n min-height: 44px;\n margin: 0;\n padding: 11px 16px;\n border: 1px solid var(--text);\n border-radius: 999px;\n background: var(--text);\n color: var(--bg);\n font-family: var(--sans);\n font-size: var(--scale-minus-1);\n line-height: 1.25;\n letter-spacing: .08em;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n opacity .16s ease;\n }\n\n .contact-form .wpcf7-submit:hover,\n .contact-form .wpcf7-submit:focus-visible {\n background: transparent;\n color: var(--text);\n }\n\n .contact-form .wpcf7-submit:disabled {\n cursor: wait;\n opacity: .48;\n }\n\n .contact-form .wpcf7-spinner {\n position: absolute;\n margin: 12px 0 0 12px;\n }\n\n .contact-form .wpcf7-not-valid-tip {\n margin-top: 6px;\n color: #003BF3;\n font-size: var(--scale-minus-1);\n line-height: 1.45;\n }\n\n .contact-form .wpcf7 form .wpcf7-response-output {\n margin: 10px 0 0;\n padding: 11px 13px;\n border: 1px solid var(--line);\n border-radius: 14px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.5;\n }\n\n @media (max-width: 760px) {\n .project-contact__layout {\n grid-template-columns: 1fr;\n gap: 46px;\n }\n\n .project-contact__intro {\n max-width: 620px;\n margin: 0 auto;\n text-align: center;\n }\n\n .project-contact__intro .section-title {\n text-align: center;\n }\n\n .project-contact__copy {\n margin-right: auto;\n margin-left: auto;\n }\n\n .contact-form {\n max-width: 620px;\n margin: 0 auto;\n }\n }\n\n @media (max-width: 520px) {\n .project-contact {\n margin-top: 52px;\n padding-top: 24px;\n }\n\n .message-builder {\n padding: 14px;\n border-radius: 20px;\n }\n\n }\n\n @media (prefers-reduced-motion: reduce) {\n .builder-progress-bar,\n .builder-option,\n .builder-nav,\n .contact-form .wpcf7-submit {\n transition: none;\n }\n }\n\n .builder-spam-trap {\n position: absolute !important;\n left: -10000px !important;\n top: auto !important;\n width: 1px !important;\n height: 1px !important;\n overflow: hidden !important;\n opacity: 0 !important;\n pointer-events: none !important;\n }\n\n .contact-form .message-builder {\n min-height: 0 !important;\n padding: 14px !important;\n gap: 12px !important;\n }\n\n .contact-form .builder-head {\n padding-bottom: 10px !important;\n }\n\n .contact-form .builder-progress {\n margin: 0 !important;\n }\n\n .contact-form .builder-step,\n .contact-form .builder-step.is-active,\n .contact-form .builder-fields,\n .contact-form .builder-field {\n min-height: 0 !important;\n height: auto !important;\n }\n\n .contact-form .builder-step.is-active {\n gap: 9px !important;\n align-content: start !important;\n }\n\n .contact-form .builder-fields {\n display: grid !important;\n gap: 10px !important;\n align-items: start !important;\n }\n\n .contact-form .builder-step[data-step=\"4\"] .builder-fields {\n grid-template-columns: 1fr !important;\n }\n\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n\n .contact-form .builder-field {\n display: grid !important;\n align-content: start !important;\n gap: 5px !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .contact-form .builder-field br,\n .contact-form .builder-actions br,\n .contact-form .builder-forward-wrap br,\n .contact-form .builder-submit-wrap br {\n display: none !important;\n }\n\n .contact-form .builder-input {\n width: 100% !important;\n height: 40px !important;\n min-height: 40px !important;\n max-height: 40px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.3 !important;\n }\n\n .contact-form .builder-textarea {\n width: 100% !important;\n height: 76px !important;\n min-height: 76px !important;\n max-height: 120px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.4 !important;\n resize: vertical !important;\n }\n\n .contact-form .builder-preview {\n gap: 6px !important;\n padding-top: 10px !important;\n }\n\n .contact-form .builder-preview-text {\n width: 100% !important;\n height: 104px !important;\n min-height: 104px !important;\n max-height: 104px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.4 !important;\n resize: none !important;\n }\n\n .contact-form .builder-final-note {\n margin: 0 !important;\n }\n\n .contact-form .builder-antirobot,\n .contact-form .builder-captcha {\n margin: 0 !important;\n }\n\n .contact-form .builder-actions {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n align-items: stretch !important;\n margin: 0 !important;\n padding-top: 10px !important;\n }\n\n .contact-form .builder-forward-wrap {\n display: block !important;\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .contact-form .builder-nav,\n .contact-form .builder-submit-wrap,\n .contact-form .wpcf7-submit {\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n }\n\n .contact-form .builder-nav,\n .contact-form .wpcf7-submit {\n min-height: 40px !important;\n height: 40px !important;\n padding: 8px 12px !important;\n }\n\n .contact-form .builder-submit-wrap {\n display: none !important;\n }\n\n .contact-form .message-builder.is-final .builder-next {\n display: none !important;\n }\n\n .contact-form .message-builder.is-final .builder-submit-wrap {\n display: block !important;\n }\n\n .contact-form .wpcf7-spinner {\n position: absolute !important;\n margin: 9px 0 0 8px !important;\n }\n\n @media (max-width: 760px) {\n .project-contact__layout {\n grid-template-columns: 1fr !important;\n gap: 34px !important;\n }\n\n .contact-form .builder-step[data-step=\"4\"] .builder-fields,\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\n grid-template-columns: 1fr !important;\n }\n }\n\n @media (max-width: 420px) {\n .contact-form .message-builder {\n padding: 12px !important;\n }\n\n .contact-form .builder-actions {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 6px !important;\n }\n\n .contact-form .builder-nav,\n .contact-form .wpcf7-submit {\n min-height: 38px !important;\n height: 38px !important;\n padding: 7px 8px !important;\n font-size: var(--scale-minus-1) !important;\n }\n }\n\n .contact-form .builder-options,\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 16px !important;\n row-gap: 14px !important;\n width: 100% !important;\n }\n\n .contact-form .builder-option,\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\n width: 100% !important;\n min-width: 0 !important;\n min-height: 46px !important;\n height: auto !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n\n .contact-form .builder-actions {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 10px !important;\n }\n\n @media (max-width: 520px) {\n .contact-form .builder-options,\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n row-gap: 8px !important;\n }\n\n .contact-form .builder-option,\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: var(--scale-minus-1) !important;\n letter-spacing: .05em !important;\n }\n\n .contact-form .builder-actions {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n }\n }\n\n body .contact-form .builder-options,\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-auto-flow: row !important;\n column-gap: 18px !important;\n row-gap: 16px !important;\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body .contact-form .builder-options > p,\n body .contact-form .builder-options > span,\n body .contact-form .builder-options > div:not(.builder-option),\n body .contact-form .builder-options .wpcf7-form-control-wrap {\n display: contents !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body .contact-form .builder-options br,\n body .contact-form .builder-options > p > br,\n body .contact-form .builder-options > span > br {\n display: none !important;\n }\n\n body .contact-form .builder-options .builder-option,\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\n display: flex !important;\n grid-column: auto !important;\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 46px !important;\n height: auto !important;\n align-items: center !important;\n justify-content: center !important;\n margin: 0 !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n\n body .contact-form .builder-actions {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 12px !important;\n width: 100% !important;\n }\n\n body .contact-form .builder-actions > p,\n body .contact-form .builder-actions > span,\n body .contact-form .builder-forward-wrap {\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n }\n\n @media (max-width: 520px) {\n body .contact-form .builder-options,\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 10px !important;\n row-gap: 10px !important;\n }\n\n body .contact-form .builder-options .builder-option,\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: var(--scale-minus-1) !important;\n letter-spacing: .045em !important;\n }\n\n body .contact-form .builder-actions {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n }\n }\n\n @keyframes logoScroll {\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n transform: translate3d(-50%, 0, 0);\n }\n }\n\n @media (max-width: 1100px) {\n :root {\n --main-top: clamp(66px, 9vw, 104px);\n }\n\n .grid {\n grid-template-columns: minmax(240px, 380px) minmax(430px, 540px);\n gap: clamp(64px, 9vw, 120px);\n }\n\n .hero {\n max-width: 380px;\n }\n\n .info {\n width: min(100%, 540px);\n }\n }\n\n @media (max-width: 900px) {\n .grid {\n grid-template-columns: 1fr;\n justify-items: center;\n gap: 0;\n text-align: center;\n }\n\n .hero {\n width: 100%;\n max-width: 620px;\n padding-right: 0;\n }\n\n .contact {\n margin-right: auto;\n margin-left: auto;\n }\n\n .socials {\n justify-content: center;\n }\n\n .info {\n justify-self: center;\n width: 100%;\n max-width: 620px;\n margin-top: clamp(52px, 8vw, 72px);\n }\n\n .services {\n width: 100%;\n max-width: 620px;\n margin-right: auto;\n margin-left: auto;\n }\n\n .services__list {\n max-width: 620px;\n margin-right: auto;\n margin-left: auto;\n justify-items: center;\n }\n\n .section-title {\n text-align: center;\n }\n\n .service {\n display: inline-grid;\n grid-template-columns: auto auto;\n justify-content: center;\n gap: 12px;\n text-align: center;\n }\n\n .service:hover {\n transform: none;\n }\n\n .clients {\n margin-top: clamp(48px, 9vw, 68px);\n padding-top: 26px;\n }\n\n .clients__label {\n margin-bottom: 24px;\n text-align: center;\n }\n }\n\n @media (max-width: 720px) {\n :root {\n --page-x: 24px;\n --main-top: clamp(58px, 12vw, 84px);\n --main-bottom: clamp(60px, 12vw, 88px);\n }\n\n h1 {\n font-size: var(--scale-7);\n line-height: 1;\n }\n\n .contact {\n margin-top: clamp(34px, 9vw, 52px);\n padding-top: 18px;\n }\n\n .intro {\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 24px;\n line-height: 1.65;\n }\n\n .info {\n width: 100%;\n max-width: 100%;\n margin-top: clamp(58px, 12vw, 82px);\n overflow: hidden;\n }\n\n .section-title {\n margin-bottom: 24px;\n }\n\n .services__list {\n display: grid;\n width: 100%;\n max-width: 360px;\n margin-right: auto;\n margin-left: auto;\n grid-template-columns: 1fr 1fr;\n column-gap: 22px;\n row-gap: 24px;\n justify-items: start;\n }\n\n .service {\n display: grid;\n grid-template-columns: 18px 1fr;\n width: 100%;\n gap: 8px;\n font-size: var(--scale-minus-1);\n line-height: 1.32;\n letter-spacing: -.02em;\n text-align: left;\n }\n\n .service::before {\n font-size: var(--scale-minus-1);\n line-height: 1.4;\n }\n\n .clients {\n width: 100%;\n max-width: 100%;\n margin-top: 46px;\n padding-top: 26px;\n overflow: hidden;\n }\n\n .clients__label {\n margin-bottom: 24px;\n text-align: center;\n }\n\n .clients__track {\n max-width: none;\n }\n }\n\n @media (max-width: 720px) {\n .contact-form {\n margin-top: 46px;\n padding-top: 26px;\n }\n\n .contact-form__intro {\n margin-right: auto;\n margin-left: auto;\n text-align: center;\n }\n }\n\n @media (max-width: 520px) {\n :root {\n --page-x: 18px;\n --logo-box-width: 90px;\n --logo-box-height: 34px;\n --logo-gap: 18px;\n }\n\n main {\n padding-top: 56px;\n }\n\n h1 {\n font-size: var(--scale-6);\n line-height: 1;\n letter-spacing: -.065em;\n }\n\n h1 span {\n letter-spacing: -.075em;\n }\n\n .contact,\n .panel {\n padding-top: 16px;\n }\n\n .contact {\n margin-top: 34px;\n }\n\n .intro {\n margin-bottom: 24px;\n }\n\n .services__list {\n max-width: 330px;\n column-gap: 20px;\n row-gap: 22px;\n }\n\n .service {\n grid-template-columns: 16px 1fr;\n gap: 7px;\n font-size: var(--scale-minus-1);\n line-height: 1.34;\n }\n\n .clients {\n margin-top: 44px;\n padding-top: 24px;\n }\n\n .clients__track {\n animation-duration: 52s;\n }\n\n .clients__logo--playboy {\n --logo-w: 42px;\n --logo-h: 23px;\n }\n\n .clients__logo--esquire {\n --logo-w: 70px;\n --logo-h: 21px;\n }\n\n .clients__logo--cosmo,\n .clients__logo--sans,\n\n .clients__logo--arp {\n width: 112px;\n min-width: 112px;\n --logo-w: 104px;\n --logo-h: 31px;\n }\n\n .clients__logo--pes {\n width: 118px;\n min-width: 118px;\n --logo-w: 110px;\n --logo-h: 32px;\n }\n\n .clients__logo--pes .clients__text-logo {\n font-size: var(--scale-minus-1);\n }\n\n .clients__logo--nck {\n width: 126px;\n min-width: 126px;\n height: 42px;\n --logo-w: 120px;\n --logo-h: 38px;\n }\n\n .clients__logo--crosscore {\n --logo-w: 64px;\n --logo-h: 27px;\n }\n\n .clients__logo--agora,\n .clients__logo--bit {\n --logo-w: 70px;\n --logo-h: 21px;\n }\n\n .clients__logo--btt {\n width: 112px;\n min-width: 112px;\n --logo-w: 104px;\n --logo-h: 31px;\n }\n\n .clients__logo--bok {\n width: 96px;\n min-width: 96px;\n --logo-w: 88px;\n --logo-h: 28px;\n }\n\n .clients__logo--medicover {\n width: 98px;\n min-width: 98px;\n --logo-w: 88px;\n --logo-h: 26px;\n }\n\n .clients__logo--bazaar {\n --logo-w: 92px;\n --logo-h: 22px;\n }\n\n .clients__logo--bazaar .clients__text-logo {\n font-size: var(--scale-minus-1);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .clients__marquee {\n -webkit-mask-image: none;\n mask-image: none;\n }\n\n .clients__track {\n animation: none;\n width: 100%;\n transform: none;\n }\n\n .clients__group {\n width: 100%;\n flex-wrap: wrap;\n justify-content: center;\n row-gap: 24px;\n padding: 0 20px;\n }\n\n .clients__group[aria-hidden=\"true\"] {\n display: none;\n }\n\n .social-link,\n .service {\n transition: none;\n }\n }\n\n @media (min-width: 1200px) {\n main {\n width: 100vw;\n max-width: none;\n margin: 0;\n padding: var(--main-top) clamp(24px, 2.5vw, 48px) var(--main-bottom);\n }\n\n .grid {\n width: 100%;\n grid-template-columns: 430px 620px;\n justify-content: space-between;\n gap: 0;\n }\n\n .hero {\n max-width: 430px;\n justify-self: start;\n }\n\n .info {\n width: 620px;\n justify-self: end;\n }\n\n h1 {\n font-size: var(--scale-8);\n line-height: .96;\n }\n\n .contact {\n width: min(100%, 320px);\n }\n }\n\nbody .contact-form .builder-actions {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n align-items: stretch !important;\n gap: 10px !important;\n}\n\nbody .contact-form .builder-action-slot {\n display: flex !important;\n width: 100% !important;\n min-width: 0 !important;\n height: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n align-items: stretch !important;\n}\n\nbody .contact-form .builder-action-slot--forward {\n position: relative !important;\n}\n\nbody .contact-form .builder-action-slot .builder-nav,\nbody .contact-form .builder-action-slot .builder-submit-wrap,\nbody .contact-form .builder-action-slot .wpcf7-submit {\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n}\n\nbody .contact-form .builder-action-slot .builder-nav,\nbody .contact-form .builder-action-slot .wpcf7-submit {\n display: inline-flex !important;\n height: 40px !important;\n min-height: 40px !important;\n padding: 8px 12px !important;\n align-items: center !important;\n justify-content: center !important;\n line-height: 1 !important;\n}\n\nbody .contact-form .builder-submit-wrap {\n position: relative !important;\n height: 40px !important;\n}\n\nbody .contact-form .builder-submit-wrap > p {\n display: contents !important;\n}\n\nbody .contact-form .builder-submit-wrap .wpcf7-spinner {\n position: absolute !important;\n top: 50% !important;\n right: 12px !important;\n left: auto !important;\n margin: 0 !important;\n transform: translateY(-50%) !important;\n pointer-events: none !important;\n}\n\nbody .contact-form .message-builder:not(.is-final) .builder-submit-wrap {\n display: none !important;\n}\n\nbody .contact-form .message-builder.is-final .builder-next {\n display: none !important;\n}\n\nbody .contact-form .message-builder.is-final .builder-submit-wrap {\n display: block !important;\n}\n\n@media (max-width: 420px) {\n body .contact-form .builder-actions {\n gap: 8px !important;\n }\n\n body .contact-form .builder-action-slot .builder-nav,\n body .contact-form .builder-action-slot .wpcf7-submit,\n body .contact-form .builder-submit-wrap {\n height: 38px !important;\n min-height: 38px !important;\n }\n}\n\n.works-loop {\n width: 100%;\n margin-top: clamp(56px, 7vw, 96px);\n padding-top: 24px;\n border-top: 1px solid var(--line);\n overflow: hidden;\n}\n\n.works-loop__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 20px;\n}\n\n.works-loop__header .section-title {\n margin: 0;\n}\n\n.works-loop__controls {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.works-loop__arrow {\n appearance: none;\n -webkit-appearance: none;\n width: 42px;\n height: 42px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-1);\n line-height: 1;\n cursor: pointer;\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\n}\n\n.works-loop__arrow:hover,\n.works-loop__arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n}\n\n.works-loop__viewport {\n width: 100%;\n min-width: 0;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-inline: contain;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n cursor: grab;\n touch-action: pan-x pan-y;\n}\n\n.works-loop__viewport::-webkit-scrollbar {\n display: none;\n}\n\n.works-loop__viewport.is-dragging {\n cursor: grabbing;\n scroll-snap-type: none;\n user-select: none;\n}\n\n.works-loop__track {\n display: flex;\n align-items: flex-start;\n width: max-content;\n max-width: none;\n gap: clamp(10px, 1.2vw, 16px);\n padding-right: var(--page-x);\n}\n\n.works-loop__item {\n position: relative;\n flex: 0 0 clamp(250px, 28vw, 410px);\n width: clamp(250px, 28vw, 410px);\n aspect-ratio: 16 \/ 9;\n overflow: hidden;\n background: #000051;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n contain: layout paint;\n}\n\n.works-loop__thumbnail,\n.works-loop__item iframe {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n}\n\n.works-loop__thumbnail {\n z-index: 1;\n object-fit: cover;\n object-position: center center;\n background: #000051;\n transform: none;\n}\n\n.works-loop__item iframe {\n z-index: 4;\n background: #000029;\n}\n\nbody .works-loop .works-loop__item {\n position: relative !important;\n aspect-ratio: 16 \/ 9 !important;\n overflow: hidden !important;\n}\n\nbody .works-loop .works-loop__item > img.works-loop__thumbnail,\nbody .works-loop .works-loop__item > iframe {\n position: absolute !important;\n inset: 0 !important;\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n aspect-ratio: auto !important;\n}\n\nbody .works-loop .works-loop__item > img.works-loop__thumbnail {\n object-fit: cover !important;\n object-position: center center !important;\n}\n\n.works-loop__item::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 5;\n pointer-events: none;\n box-shadow: none;\n}\n\n.works-loop__play {\n position: absolute;\n inset: 0;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: #fff;\n font: inherit;\n text-decoration: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.works-loop__play-icon {\n position: relative;\n width: 54px;\n height: 54px;\n display: block;\n border: 1px solid #DCDEE2;\n border-radius: 50%;\n background: #DCDEE2;\n transition: transform .16s ease, background-color .16s ease;\n}\n\n.works-loop__play-icon::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: 2px;\n transform: translate(-50%, -50%);\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n border-left: 11px solid currentColor;\n}\n\n.works-loop__play:hover .works-loop__play-icon,\n.works-loop__play:focus-visible .works-loop__play-icon {\n transform: scale(1.06);\n background: #DCDEE2;\n}\n\n.works-loop__play:focus-visible {\n outline: 2px solid #fff;\n outline-offset: -4px;\n}\n\n.works-loop__status {\n position: absolute;\n left: 12px;\n bottom: 10px;\n z-index: 2;\n color: #DCDEE2;\n font-size: var(--scale-minus-1);\n line-height: 1.3;\n letter-spacing: .1em;\n text-transform: uppercase;\n pointer-events: none;\n}\n\n@media (max-width: 720px) {\n .works-loop {\n margin-top: 48px;\n padding-top: 20px;\n }\n\n .works-loop__header {\n margin-bottom: 16px;\n }\n\n .works-loop__controls {\n display: none;\n }\n\n .works-loop__track {\n gap: 10px;\n padding-right: 18px;\n }\n\n .works-loop__item {\n flex-basis: min(82vw, 330px);\n width: min(82vw, 330px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .works-loop__viewport {\n scroll-behavior: auto !important;\n }\n\n .works-loop__arrow,\n .works-loop__play-icon {\n transition: none;\n }\n}\n\n.construction-title {\n position: relative;\n left: 50%;\n width: 100vw;\n max-width: none;\n margin: 0 0 clamp(56px, 7vw, 96px) -50vw;\n padding: 0 var(--page-x);\n text-align: center;\n font-family: var(--serif);\n font-weight: 400;\n font-size: var(--scale-11);\n line-height: .9;\n letter-spacing: -.075em;\n white-space: normal;\n}\n\n.construction-title span {\n display: inline;\n font-family: var(--serif);\n font-style: italic;\n letter-spacing: -.085em;\n}\n\n@media (max-width: 720px) {\n .construction-title {\n font-size: var(--scale-7);\n line-height: .94;\n margin-bottom: 48px;\n }\n}\n\n.page {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n grid-template-columns: minmax(0, 1fr);\n overflow-x: hidden;\n overflow-x: clip;\n}\n\nmain,\n.grid,\n.hero,\n.info,\n.clients,\n.clients__marquee,\n.works-loop,\n.works-loop__viewport,\n.project-contact,\n.project-contact__layout {\n min-width: 0;\n max-width: 100%;\n}\n\n@media (max-width: 900px) {\n main {\n width: calc(100% - (var(--page-x) * 2)) !important;\n max-width: 100% !important;\n margin-right: auto !important;\n margin-left: auto !important;\n }\n\n .grid,\n .project-contact__layout {\n width: 100% !important;\n grid-template-columns: minmax(0, 1fr) !important;\n }\n\n .hero,\n .info,\n .services,\n .clients,\n .works-loop,\n .project-contact,\n .contact-form {\n width: 100% !important;\n max-width: 100% !important;\n }\n}\n\n.construction-title {\n margin-bottom: clamp(34px, 4vw, 56px) !important;\n}\n\nmain > .grid {\n width: min(100%, 980px) !important;\n margin: 0 auto !important;\n grid-template-columns: minmax(0, 1fr) !important;\n justify-content: center !important;\n justify-items: center !important;\n gap: clamp(52px, 6vw, 82px) !important;\n text-align: center !important;\n}\n\nmain > .grid .hero {\n width: 100% !important;\n max-width: 100% !important;\n justify-self: center !important;\n padding: 0 !important;\n text-align: center !important;\n}\n\nmain > .grid .contact {\n width: min(100%, 440px) !important;\n margin: 0 auto !important;\n padding-top: 0 !important;\n text-align: center !important;\n}\n\nmain > .grid .intro {\n margin-right: auto !important;\n margin-left: auto !important;\n text-align: center !important;\n}\n\nmain > .grid .socials {\n justify-content: center !important;\n}\n\nmain > .grid .info {\n width: min(100%, 900px) !important;\n max-width: 900px !important;\n margin: 0 auto !important;\n justify-self: center !important;\n overflow: hidden !important;\n text-align: center !important;\n}\n\nmain > .grid .services {\n width: 100% !important;\n max-width: 820px !important;\n margin: 0 auto !important;\n}\n\nmain > .grid .section-title,\nmain > .grid .clients__label {\n text-align: center !important;\n}\n\nmain > .grid .services__list {\n width: 100% !important;\n max-width: 760px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n justify-items: center !important;\n}\n\nmain > .grid .service {\n display: inline-grid !important;\n grid-template-columns: auto auto !important;\n justify-content: center !important;\n text-align: center !important;\n}\n\nmain > .grid .clients {\n width: 100% !important;\n max-width: 900px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\n@media (max-width: 720px) {\n .construction-title {\n margin-bottom: 30px !important;\n }\n\n main > .grid {\n gap: 44px !important;\n }\n\n main > .grid .services__list {\n max-width: 360px !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n justify-items: center !important;\n }\n\n main > .grid .service {\n width: 100% !important;\n grid-template-columns: auto auto !important;\n justify-content: center !important;\n text-align: center !important;\n }\n}\n\nmain > .construction-title {\n text-align: center !important;\n}\n\nmain > .grid {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: flex-start !important;\n width: min(100%, 1120px) !important;\n max-width: 1120px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n gap: clamp(58px, 6vw, 86px) !important;\n text-align: center !important;\n}\n\nmain > .grid > .hero,\nmain > .grid > .info {\n width: 100% !important;\n max-width: 100% !important;\n margin-right: auto !important;\n margin-left: auto !important;\n justify-self: auto !important;\n align-self: auto !important;\n text-align: center !important;\n}\n\nmain > .grid .contact {\n width: min(100%, 520px) !important;\n margin-right: auto !important;\n margin-left: auto !important;\n text-align: center !important;\n}\n\nmain > .grid .intro,\nmain > .grid .section-title,\nmain > .grid .clients__label {\n text-align: center !important;\n}\n\nmain > .grid .socials {\n justify-content: center !important;\n}\n\nmain > .grid .services {\n width: min(100%, 900px) !important;\n max-width: 900px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .grid .services__list {\n width: min(100%, 820px) !important;\n max-width: 820px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n justify-items: center !important;\n}\n\nmain > .grid .service {\n justify-content: center !important;\n text-align: center !important;\n}\n\nmain > .grid .clients {\n width: min(100%, 1040px) !important;\n max-width: 1040px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n text-align: center !important;\n}\n\nmain > .grid .clients__marquee {\n width: 100% !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .works-loop {\n width: min(100%, 1180px) !important;\n max-width: 1180px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .works-loop .works-loop__header {\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 14px !important;\n text-align: center !important;\n}\n\nmain > .works-loop .works-loop__header .section-title {\n width: 100% !important;\n text-align: center !important;\n}\n\nmain > .works-loop .works-loop__controls {\n justify-content: center !important;\n}\n\nmain > .works-loop .works-loop__viewport {\n width: 100% !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\n@media (max-width: 720px) {\n main > .grid {\n gap: 46px !important;\n }\n\n main > .grid .services__list {\n width: min(100%, 380px) !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n\n main > .works-loop .works-loop__header {\n gap: 12px !important;\n }\n}\n\nmain > .grid .info {\n display: grid !important;\n grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr) !important;\n align-items: start !important;\n gap: clamp(44px, 6vw, 88px) !important;\n width: min(100%, 1120px) !important;\n max-width: 1120px !important;\n overflow: visible !important;\n}\n\nmain > .grid .services,\nmain > .grid .clients {\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n}\n\nmain > .grid .clients {\n padding-top: 0 !important;\n border-top: 0 !important;\n overflow: hidden !important;\n}\n\nmain > .grid .services__list {\n width: 100% !important;\n max-width: 440px !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: clamp(24px, 3vw, 42px) !important;\n row-gap: 24px !important;\n}\n\nmain > .grid .service {\n display: flex !important;\n width: 100% !important;\n align-items: center !important;\n justify-content: center !important;\n grid-template-columns: none !important;\n gap: 0 !important;\n text-align: center !important;\n}\n\nmain > .grid .service::before {\n content: none !important;\n display: none !important;\n}\n\nmain > .works-loop {\n width: min(100%, 1440px) !important;\n max-width: 1440px !important;\n overflow: visible !important;\n}\n\nmain > .works-loop .works-loop__header {\n display: block !important;\n margin-bottom: 18px !important;\n}\n\nmain > .works-loop .works-loop__carousel {\n display: grid !important;\n grid-template-columns: 44px minmax(0, 1fr) 44px !important;\n align-items: center !important;\n gap: clamp(10px, 1.2vw, 18px) !important;\n width: 100% !important;\n}\n\nmain > .works-loop .works-loop__arrow {\n display: inline-flex !important;\n position: relative !important;\n z-index: 8 !important;\n flex: 0 0 auto !important;\n}\n\nmain > .works-loop .works-loop__viewport {\n min-width: 0 !important;\n width: 100% !important;\n}\n\nmain > .works-loop .works-loop__track {\n gap: clamp(8px, .8vw, 12px) !important;\n padding-right: 0 !important;\n}\n\nmain > .works-loop .works-loop__item {\n flex: 0 0 clamp(190px, 17vw, 250px) !important;\n width: clamp(190px, 17vw, 250px) !important;\n}\n\n@media (max-width: 900px) {\n main > .grid .info {\n grid-template-columns: minmax(0, 1fr) !important;\n gap: 46px !important;\n width: 100% !important;\n }\n\n main > .grid .services,\n main > .grid .clients {\n width: min(100%, 620px) !important;\n margin-right: auto !important;\n margin-left: auto !important;\n }\n\n main > .grid .clients {\n padding-top: 26px !important;\n border-top: 1px solid var(--line) !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .grid .services__list {\n width: min(100%, 380px) !important;\n max-width: 380px !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 12px !important;\n row-gap: 16px !important;\n }\n\n main > .works-loop .works-loop__carousel {\n grid-template-columns: 36px minmax(0, 1fr) 36px !important;\n gap: 8px !important;\n }\n\n main > .works-loop .works-loop__arrow {\n width: 36px !important;\n height: 36px !important;\n font-size: var(--scale-0) !important;\n }\n\n main > .works-loop .works-loop__item {\n flex-basis: min(62vw, 260px) !important;\n width: min(62vw, 260px) !important;\n }\n}\n\n:root {\n --section-width: 1240px;\n}\n\nmain > .construction-title,\nmain > .grid,\nmain > .works-loop,\nmain > .project-contact {\n width: min(100%, var(--section-width)) !important;\n max-width: var(--section-width) !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .construction-title {\n position: static !important;\n left: auto !important;\n padding-right: 0 !important;\n padding-left: 0 !important;\n font-size: var(--scale-9) !important;\n text-align: center !important;\n}\n\nmain > .grid .hero,\nmain > .grid .contact,\nmain > .grid .info {\n width: 100% !important;\n max-width: 100% !important;\n}\n\nmain > .grid .info {\n display: flex !important;\n flex-direction: column !important;\n align-items: stretch !important;\n gap: clamp(38px, 4.5vw, 60px) !important;\n overflow: hidden !important;\n}\n\nmain > .grid .services,\nmain > .grid .clients {\n width: 100% !important;\n max-width: 100% !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .grid .services__list {\n width: 100% !important;\n max-width: 100% !important;\n display: grid !important;\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n column-gap: clamp(28px, 4vw, 64px) !important;\n row-gap: 22px !important;\n align-items: center !important;\n justify-items: stretch !important;\n}\n\nmain > .grid .service {\n display: flex !important;\n width: 100% !important;\n min-height: 34px !important;\n align-items: center !important;\n justify-content: center !important;\n padding: 0 8px !important;\n text-align: center !important;\n}\n\nmain > .grid .service::before {\n content: none !important;\n display: none !important;\n}\n\nmain > .grid .clients {\n padding-top: 30px !important;\n border-top: 1px solid var(--line) !important;\n}\n\nmain > .works-loop {\n overflow: visible !important;\n}\n\nmain > .works-loop .works-loop__carousel {\n width: 100% !important;\n grid-template-columns: 48px minmax(0, 1fr) 48px !important;\n gap: clamp(12px, 1.5vw, 22px) !important;\n}\n\nmain > .works-loop .works-loop__track {\n gap: clamp(12px, 1.2vw, 18px) !important;\n}\n\nmain > .works-loop .works-loop__item {\n flex: 0 0 clamp(300px, 28vw, 380px) !important;\n width: clamp(300px, 28vw, 380px) !important;\n}\n\nmain > .project-contact .project-contact__layout {\n width: 100% !important;\n max-width: 100% !important;\n}\n\n@media (max-width: 900px) {\n main > .construction-title,\n main > .grid,\n main > .works-loop,\n main > .project-contact {\n width: 100% !important;\n max-width: 100% !important;\n }\n\n main > .grid .info {\n gap: 42px !important;\n }\n\n main > .grid .services__list {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n column-gap: 18px !important;\n }\n\n main > .works-loop .works-loop__item {\n flex-basis: clamp(280px, 42vw, 340px) !important;\n width: clamp(280px, 42vw, 340px) !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .construction-title {\n font-size: var(--scale-7) !important;\n }\n\n main > .grid .services__list {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 12px !important;\n row-gap: 16px !important;\n }\n\n main > .grid .clients {\n padding-top: 26px !important;\n }\n\n main > .works-loop .works-loop__carousel {\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\n gap: 8px !important;\n }\n\n main > .works-loop .works-loop__item {\n flex-basis: min(74vw, 320px) !important;\n width: min(74vw, 320px) !important;\n }\n}\n\nmain > .construction-title,\nmain > .grid,\nmain > .works-loop,\nmain > .project-contact {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n}\n\nmain > .grid,\nmain > .grid > .hero,\nmain > .grid > .info,\nmain > .grid .services,\nmain > .grid .clients,\nmain > .grid .clients__marquee,\nmain > .project-contact .project-contact__layout {\n width: 100% !important;\n max-width: none !important;\n}\n\nmain > .grid .contact {\n width: 100% !important;\n max-width: none !important;\n}\n\nmain > .grid .intro {\n max-width: 560px !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\n\nmain > .grid .services__list {\n width: 100% !important;\n max-width: none !important;\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n}\n\nmain > .grid .clients {\n width: 100% !important;\n max-width: none !important;\n}\n\n@media (min-width: 901px) {\n main > .works-loop {\n overflow: visible !important;\n }\n\n main > .works-loop .works-loop__carousel {\n display: block !important;\n width: 100% !important;\n }\n\n main > .works-loop .works-loop__arrow {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport {\n width: 100% !important;\n overflow: visible !important;\n scroll-snap-type: none !important;\n cursor: default !important;\n touch-action: auto !important;\n }\n\n main > .works-loop .works-loop__track {\n display: grid !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n gap: clamp(12px, 1.25vw, 22px) !important;\n width: 100% !important;\n max-width: none !important;\n padding: 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n scroll-snap-align: none !important;\n }\n}\n\n@media (min-width: 901px) and (max-width: 1250px) {\n main > .works-loop .works-loop__track {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n}\n\n@media (max-width: 900px) {\n main > .works-loop .works-loop__carousel {\n display: grid !important;\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\n gap: 8px !important;\n }\n\n main > .works-loop .works-loop__arrow {\n display: inline-flex !important;\n }\n\n main > .works-loop .works-loop__viewport {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n scroll-snap-type: x mandatory !important;\n cursor: grab !important;\n }\n\n main > .works-loop .works-loop__track {\n display: flex !important;\n width: max-content !important;\n gap: 12px !important;\n }\n\n main > .works-loop .works-loop__item {\n flex: 0 0 min(74vw, 340px) !important;\n width: min(74vw, 340px) !important;\n }\n}\n\n@media (min-width: 901px) {\n main > .works-loop .works-loop__carousel {\n display: block !important;\n width: 100% !important;\n }\n\n main > .works-loop .works-loop__arrow,\n main > .works-loop .works-loop__controls {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport {\n width: 100% !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n overscroll-behavior-inline: contain !important;\n scroll-snap-type: x mandatory !important;\n scrollbar-width: none !important;\n cursor: grab !important;\n touch-action: pan-x pan-y !important;\n }\n\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport.is-dragging {\n cursor: grabbing !important;\n scroll-snap-type: none !important;\n }\n\n main > .works-loop .works-loop__track {\n --video-strip-gap: 16px;\n display: flex !important;\n width: 100% !important;\n max-width: none !important;\n gap: var(--video-strip-gap) !important;\n padding: 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n flex: 0 0 calc(25% - 12px) !important;\n width: calc(25% - 12px) !important;\n min-width: 0 !important;\n max-width: none !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n}\n\n@media (min-width: 901px) {\n main > .works-loop {\n overflow: visible !important;\n }\n\n main > .works-loop .works-loop__carousel {\n display: block !important;\n width: 100% !important;\n }\n\n main > .works-loop .works-loop__arrow,\n main > .works-loop .works-loop__controls {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport {\n width: 100% !important;\n overflow: visible !important;\n scroll-snap-type: none !important;\n cursor: default !important;\n touch-action: auto !important;\n }\n\n main > .works-loop .works-loop__track {\n display: grid !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n gap: clamp(12px, 1.25vw, 22px) !important;\n width: 100% !important;\n max-width: none !important;\n padding: 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n scroll-snap-align: none !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .works-loop {\n overflow: hidden !important;\n }\n\n main > .works-loop .works-loop__carousel {\n display: block !important;\n width: 100% !important;\n }\n\n main > .works-loop .works-loop__arrow,\n main > .works-loop .works-loop__controls {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport {\n width: 100% !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n overscroll-behavior-inline: contain !important;\n scroll-snap-type: x mandatory !important;\n scrollbar-width: none !important;\n touch-action: pan-x pan-y !important;\n cursor: grab !important;\n }\n\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\n display: none !important;\n }\n\n main > .works-loop .works-loop__track {\n display: flex !important;\n width: max-content !important;\n max-width: none !important;\n gap: 10px !important;\n padding: 0 18px 0 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n flex: 0 0 clamp(145px, 43vw, 190px) !important;\n width: clamp(145px, 43vw, 190px) !important;\n min-width: 0 !important;\n max-width: none !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: normal !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .works-loop {\n overflow: visible !important;\n }\n\n main > .works-loop .works-loop__carousel {\n display: block !important;\n width: 100% !important;\n }\n\n main > .works-loop .works-loop__arrow,\n main > .works-loop .works-loop__controls {\n display: none !important;\n }\n\n main > .works-loop .works-loop__viewport {\n width: 100% !important;\n overflow: visible !important;\n scroll-snap-type: none !important;\n scrollbar-width: auto !important;\n touch-action: auto !important;\n cursor: default !important;\n }\n\n main > .works-loop .works-loop__track {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 10px !important;\n width: 100% !important;\n max-width: none !important;\n padding: 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n scroll-snap-align: none !important;\n scroll-snap-stop: normal !important;\n }\n}\n\n.websites {\n width: 100%;\n margin-top: clamp(48px, 6vw, 80px);\n padding-top: 24px;\n border-top: 1px solid var(--line);\n font-family: var(--inter);\n overflow: hidden;\n}\n\n.websites__header {\n width: 100%;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}\n\n.websites__header .section-title {\n margin: 0;\n text-align: left;\n}\n\n.websites__controls {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.websites__arrow {\n appearance: none;\n -webkit-appearance: none;\n width: 42px;\n height: 42px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-1);\n line-height: 1;\n cursor: pointer;\n transition: border-color .16s ease, background-color .16s ease, color .16s ease, opacity .16s ease;\n}\n\n.websites__arrow:hover,\n.websites__arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n}\n\n.websites__arrow:disabled {\n opacity: .28;\n cursor: default;\n pointer-events: none;\n}\n\n.websites__links {\n display: flex;\n align-items: stretch;\n gap: clamp(10px, 1.2vw, 16px);\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 0 8px;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-inline: contain;\n scroll-snap-type: x proximity;\n scroll-behavior: smooth;\n touch-action: pan-x pan-y;\n}\n\n.websites__links::-webkit-scrollbar {\n display: none;\n}\n\n.website-link {\n position: relative;\n isolation: isolate;\n flex: 0 0 clamp(220px, 21vw, 292px);\n width: clamp(220px, 21vw, 292px);\n aspect-ratio: .78;\n min-width: 0;\n overflow: hidden;\n border-radius: clamp(22px, 2.5vw, 30px);\n background: #fff;\n color: #000029;\n text-decoration: none;\n scroll-snap-align: start;\n -webkit-tap-highlight-color: transparent;\n}\n\n.website-link::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n left: 0;\n right: 0;\n top: 24%;\n bottom: 0;\n border-radius: clamp(22px, 2.5vw, 30px);\n background: #DCDEE2;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}\n\n.website-link::after {\n content: \"\";\n position: absolute;\n z-index: 0;\n left: 0;\n top: 15%;\n width: 48%;\n height: 15%;\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0;\n background: #DCDEE2;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}\n\n.website-link__number,\n.website-link__content,\n.website-link__arrow {\n position: absolute;\n z-index: 2;\n}\n\n.website-link__number {\n top: 29%;\n left: clamp(20px, 2.4vw, 28px);\n font-family: var(--inter);\n font-size: var(--scale-6);\n font-weight: 400;\n line-height: .9;\n letter-spacing: -.075em;\n font-variant-numeric: tabular-nums;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}\n\n.website-link__arrow {\n top: 28.5%;\n right: clamp(18px, 2.2vw, 26px);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n font-size: var(--scale-2);\n font-weight: 300;\n line-height: 1;\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease;\n}\n\n.website-link__content {\n left: clamp(20px, 2.4vw, 28px);\n right: clamp(20px, 2.4vw, 28px);\n bottom: clamp(20px, 2.5vw, 28px);\n display: grid;\n gap: 7px;\n opacity: 1;\n transform: translateY(0);\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1);\n}\n\n.website-link__name {\n display: block;\n font-family: var(--inter);\n font-size: var(--scale-1);\n line-height: 1.12;\n font-weight: 500;\n letter-spacing: -.035em;\n}\n\n.website-link__description {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n color: #000051;\n font-family: var(--inter);\n font-size: var(--scale-minus-1);\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: -.01em;\n}\n\n.website-link--preview::before,\n.website-link--preview::after {\n z-index: 1;\n}\n\n.website-link--preview::before {\n top: 48%;\n}\n\n.website-link--preview::after {\n top: 40%;\n height: 14%;\n}\n\n.website-link__preview {\n position: absolute;\n z-index: 0;\n top: 10px;\n right: 10px;\n left: 10px;\n width: calc(100% - 20px);\n height: 55%;\n display: block;\n border-radius: clamp(16px, 2vw, 22px);\n object-fit: cover;\n object-position: 50% 26%;\n background: #DCDEE2;\n transform: translateZ(0);\n}\n\n.website-link--preview .website-link__number {\n top: 54%;\n}\n\n.website-link--preview .website-link__arrow {\n top: 53.5%;\n}\n\n.website-link:hover,\n.website-link:focus-visible {\n outline: none;\n}\n\n.website-link:hover::before,\n.website-link:focus-visible::before {\n top: 58%;\n}\n\n.website-link:hover::after,\n.website-link:focus-visible::after {\n top: 50%;\n}\n\n.website-link:hover .website-link__number,\n.website-link:focus-visible .website-link__number {\n top: 61%;\n}\n\n.website-link:hover .website-link__arrow,\n.website-link:focus-visible .website-link__arrow {\n top: 60%;\n transform: translate(3px, -3px);\n}\n\n.website-link:hover .website-link__content,\n.website-link:focus-visible .website-link__content {\n opacity: 0;\n transform: translateY(14px);\n}\n\n@media (max-width: 720px) {\n .websites {\n margin-top: 46px;\n }\n\n .websites__header {\n justify-content: center;\n }\n\n .websites__header .section-title {\n text-align: center;\n }\n\n .websites__controls {\n display: none;\n }\n\n .websites__links {\n gap: 12px;\n scroll-snap-type: x mandatory;\n }\n\n .website-link {\n flex-basis: min(72vw, 270px);\n width: min(72vw, 270px);\n }\n}\n\n@media (max-width: 420px) {\n .website-link {\n flex-basis: min(78vw, 250px);\n width: min(78vw, 250px);\n }\n\n .website-link__number {\n left: 20px;\n font-size: var(--scale-6);\n }\n\n .website-link__arrow {\n right: 18px;\n font-size: var(--scale-1);\n }\n\n .website-link__content {\n left: 20px;\n right: 20px;\n bottom: 20px;\n }\n\n .website-link__name {\n font-size: var(--scale-0);\n }\n\n .website-link__description {\n font-size: var(--scale-minus-1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .websites__links {\n scroll-behavior: auto;\n }\n\n .websites__arrow,\n .website-link::before,\n .website-link::after,\n .website-link__number,\n .website-link__content,\n .website-link__arrow {\n transition: none !important;\n }\n}\n\n:root {\n --logo-box-width: 156px;\n --logo-box-height: 58px;\n --logo-gap: clamp(38px, 4.4vw, 66px);\n}\n\n.clients__logo img,\n.clients__logo svg,\n.clients__text-logo {\n transform: scale(1.38) !important;\n transform-origin: center center !important;\n}\n\n.clients__logo--arp,\n.clients__logo--pes,\n.clients__logo--nck,\n.clients__logo--btt,\n.clients__logo--bok,\n.clients__logo--medicover {\n height: 62px !important;\n}\n\n@media (max-width: 720px) {\n :root {\n --logo-box-width: 132px;\n --logo-box-height: 50px;\n --logo-gap: 30px;\n }\n\n .clients__logo img,\n .clients__logo svg,\n .clients__text-logo {\n transform: scale(1.32) !important;\n }\n}\n\n@media (max-width: 520px) {\n :root {\n --logo-box-width: 120px;\n --logo-box-height: 46px;\n --logo-gap: 26px;\n }\n\n .clients__logo img,\n .clients__logo svg,\n .clients__text-logo {\n transform: scale(1.28) !important;\n }\n\n .clients__logo--arp,\n .clients__logo--pes,\n .clients__logo--nck,\n .clients__logo--btt,\n .clients__logo--bok,\n .clients__logo--medicover {\n height: 54px !important;\n }\n}\n\nmain > .construction-title {\n font-family: var(--serif) !important;\n font-weight: 400 !important;\n letter-spacing: -.065em !important;\n -webkit-font-smoothing: antialiased;\n}\n\nmain > .construction-title span {\n font-family: var(--serif) !important;\n font-weight: 400 !important;\n letter-spacing: -.07em !important;\n}\n\n:root {\n --text: #000029;\n --muted: #000051;\n --soft: #000051;\n --line: #DCDEE2;\n --logo-gray: #000051;\n}\n\nmain > .construction-title,\n.project-contact__title {\n color: #000029;\n}\n\n.section-title,\n.clients__label {\n color: #000051;\n}\n\n.service::before {\n color: #000051;\n}\n\n.social-link {\n color: #000051;\n}\n\n.social-link:hover,\n.social-link:focus-visible {\n color: #000029;\n}\n\n.clients__logo {\n color: #000051;\n}\n\n.clients__logo img,\n.clients__logo svg,\n.clients__text-logo {\n opacity: .76 !important;\n}\n\n.clients__logo img {\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\n}\n\n.clients__logo--crosscore img {\n filter: grayscale(1) saturate(0) brightness(.42) contrast(1.1) !important;\n opacity: .8 !important;\n}\n\n.website-link {\n background: #000029;\n color: #fff;\n}\n\n.website-link::before,\n.website-link::after {\n background: #000029;\n}\n\n.website-link__description {\n color: #BABABA;\n}\n\n.websites__arrow,\n.works-loop__arrow {\n border-color: #DCDEE2;\n}\n\n.websites__arrow:hover,\n.websites__arrow:focus-visible,\n.works-loop__arrow:hover,\n.works-loop__arrow:focus-visible {\n border-color: #000029;\n background: #000029;\n color: #fff;\n}\n\n.contact-form .message-builder {\n background: #000051 !important;\n border-color: #000051 !important;\n color: #fff;\n}\n\n.contact-form .builder-head,\n.contact-form .builder-label {\n color: #BABABA;\n}\n\n.contact-form .builder-hint,\n.contact-form .builder-final-note,\n.contact-form .builder-preview-text {\n color: #BABABA;\n}\n\n.contact-form .builder-head,\n.contact-form .builder-preview,\n.contact-form .builder-actions {\n border-color: #BABABA !important;\n}\n\n.contact-form .builder-progress {\n background: #BABABA;\n}\n\n.contact-form .builder-progress-bar {\n background: #fff;\n}\n\n.contact-form .builder-option,\n.contact-form .builder-nav {\n border-color: #BABABA !important;\n color: #fff !important;\n background: transparent !important;\n}\n\n.contact-form .builder-option:hover,\n.contact-form .builder-option:focus-visible,\n.contact-form .builder-option.is-active,\n.contact-form .builder-nav:hover,\n.contact-form .builder-nav:focus-visible {\n border-color: #fff !important;\n background: #FCFCFD !important;\n color: #000029 !important;\n}\n\n.contact-form .builder-input,\n.contact-form .builder-textarea,\n.contact-form .builder-preview-text {\n border-bottom-color: #BABABA !important;\n color: #fff !important;\n}\n\n.contact-form .builder-input:focus,\n.contact-form .builder-textarea:focus,\n.contact-form .builder-preview-text:focus {\n border-bottom-color: #fff !important;\n}\n\n.contact-form .builder-input::placeholder,\n.contact-form .builder-textarea::placeholder {\n color: #BABABA !important;\n}\n\n.contact-form .builder-antirobot {\n border-color: #BABABA !important;\n}\n\n.contact-form .builder-antirobot label {\n color: #DCDEE2 !important;\n}\n\n.contact-form .builder-antirobot input[type=\"checkbox\"] {\n accent-color: #fff;\n}\n\n.contact-form .wpcf7-submit {\n border-color: #fff !important;\n background: #FCFCFD !important;\n color: #000029 !important;\n}\n\n.contact-form .wpcf7-submit:hover,\n.contact-form .wpcf7-submit:focus-visible {\n background: transparent !important;\n color: #fff !important;\n}\n\n.contact-form .wpcf7 form .wpcf7-response-output {\n border-color: #BABABA;\n color: #BABABA;\n}\n\n.clients,\n.websites,\n.works-loop,\n.project-contact {\n border-top-color: #DCDEE2 !important;\n}\n\nmain {\n padding-bottom: 0 !important;\n}\n\nmain > .project-contact {\n width: 100vw !important;\n max-width: none !important;\n margin-right: calc(50% - 50vw) !important;\n margin-left: calc(50% - 50vw) !important;\n padding: clamp(56px, 7vw, 96px)\n max(var(--page-x), calc((100vw - 1240px) \/ 2))\n clamp(64px, 8vw, 112px) !important;\n border-top: 0 !important;\n background: #000029 !important;\n color: #fff !important;\n}\n\nmain > .project-contact .project-contact__layout {\n width: 100% !important;\n max-width: 1240px !important;\n margin: 0 auto !important;\n}\n\nmain > .project-contact .project-contact__title {\n color: #fff !important;\n}\n\nmain > .project-contact .section-title {\n color: #BABABA !important;\n}\n\nmain > .project-contact .project-contact__copy {\n color: #BABABA !important;\n}\n\nmain > .project-contact .contact-form {\n border-top: 0 !important;\n padding-top: 0 !important;\n}\n\nmain > .project-contact .contact-form .message-builder {\n border: 0 !important;\n background: #000051 !important;\n}\n\nmain > .project-contact .contact-form .builder-head {\n border-bottom: 0 !important;\n}\n\n@media (max-width: 760px) {\n main > .project-contact {\n padding-right: var(--page-x) !important;\n padding-left: var(--page-x) !important;\n }\n}\n\n@media (min-width: 901px) {\n main > .works-loop .works-loop__track {\n display: grid !important;\n grid-template-columns: repeat(5, minmax(0, 1fr)) !important;\n gap: clamp(10px, 1vw, 16px) !important;\n width: 100% !important;\n max-width: none !important;\n padding: 0 !important;\n transform: none !important;\n }\n\n main > .works-loop .works-loop__item {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n scroll-snap-align: none !important;\n }\n}\n\n@media (min-width: 721px) {\n main > .grid .clients__label {\n text-align: left !important;\n }\n\n main > .works-loop .works-loop__header {\n align-items: flex-start !important;\n justify-content: flex-start !important;\n text-align: left !important;\n }\n\n main > .works-loop .works-loop__header .section-title {\n text-align: left !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .grid .clients__label,\n main > .works-loop .works-loop__header,\n main > .works-loop .works-loop__header .section-title {\n text-align: center !important;\n }\n\n main > .works-loop .works-loop__header {\n align-items: center !important;\n justify-content: center !important;\n }\n}\n\n@media (min-width: 721px) {\n main > .construction-title {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n text-align: left !important;\n }\n\n main > .grid {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n align-items: stretch !important;\n text-align: left !important;\n }\n\n main > .grid > .hero,\n main > .grid > .info {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n text-align: left !important;\n }\n\n main > .grid .contact {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n text-align: left !important;\n }\n\n main > .grid .intro {\n max-width: 560px !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n text-align: left !important;\n }\n\n main > .grid .socials {\n justify-content: flex-start !important;\n }\n\n main > .grid .info {\n justify-items: stretch !important;\n }\n\n main > .grid .services {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n text-align: left !important;\n }\n\n main > .grid .services .section-title {\n text-align: left !important;\n }\n\n main > .grid .services__list {\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n justify-items: start !important;\n }\n\n main > .grid .service {\n justify-content: start !important;\n text-align: left !important;\n }\n}\n\nmain > .grid .services {\n border-top: 1px solid var(--line) !important;\n padding-top: 30px !important;\n}\n\n@media (min-width: 721px) {\n main > .project-contact .project-contact__layout {\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n }\n\n main > .project-contact .project-contact__intro,\n main > .project-contact .project-contact__intro .section-title,\n main > .project-contact .project-contact__title,\n main > .project-contact .project-contact__copy {\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\n}\n\n.clients__logo--nck img,\n.clients__logo--nck svg,\n.clients__logo--nck .clients__text-logo,\n.clients__logo--btt img,\n.clients__logo--btt svg,\n.clients__logo--btt .clients__text-logo {\n transform: scale(1.50) !important;\n}\n\n@media (max-width: 720px) {\n .clients__logo--nck img,\n .clients__logo--nck svg,\n .clients__logo--nck .clients__text-logo,\n .clients__logo--btt img,\n .clients__logo--btt svg,\n .clients__logo--btt .clients__text-logo {\n transform: scale(1.44) !important;\n }\n}\n\n@media (max-width: 520px) {\n .clients__logo--nck img,\n .clients__logo--nck svg,\n .clients__logo--nck .clients__text-logo,\n .clients__logo--btt img,\n .clients__logo--btt svg,\n .clients__logo--btt .clients__text-logo {\n transform: scale(1.40) !important;\n }\n}\n\nmain > .grid .services__accordion {\n width: 100%;\n margin: 0;\n border-bottom: 0;\n}\n\nmain > .grid .service-accordion {\n width: 100%;\n margin: 0;\n border-top: 1px solid var(--line);\n}\n\nmain > .grid .service-accordion:first-child {\n border-top: 0;\n}\n\nmain > .grid .service-accordion summary {\n position: relative;\n display: grid;\n grid-template-columns: 34px minmax(0, 1fr) 28px;\n align-items: center;\n gap: 12px;\n min-height: 62px;\n margin: 0;\n padding: 0;\n color: var(--text);\n cursor: pointer;\n list-style: none;\n user-select: none;\n}\n\nmain > .grid .service-accordion summary::-webkit-details-marker {\n display: none;\n}\n\nmain > .grid .service-accordion__no {\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n line-height: 1;\n letter-spacing: .08em;\n}\n\nmain > .grid .service-accordion__name {\n min-width: 0;\n font-size: var(--scale-0);\n font-weight: 400;\n line-height: 1.25;\n letter-spacing: -.025em;\n}\n\nmain > .grid .service-accordion__toggle {\n position: relative;\n width: 28px;\n height: 28px;\n justify-self: end;\n}\n\nmain > .grid .service-accordion__toggle::before,\nmain > .grid .service-accordion__toggle::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 12px;\n height: 1px;\n background: currentColor;\n transform: translate(-50%, -50%);\n transition: transform .18s ease, opacity .18s ease;\n}\n\nmain > .grid .service-accordion__toggle::after {\n transform: translate(-50%, -50%) rotate(90deg);\n}\n\nmain > .grid .service-accordion[open] .service-accordion__toggle::after {\n opacity: 0;\n transform: translate(-50%, -50%) rotate(0deg);\n}\n\nmain > .grid .service-accordion__content {\n max-width: 620px;\n padding: 0 40px 20px 46px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.65;\n letter-spacing: -.005em;\n}\n\n@media (hover: hover) and (pointer: fine) {\n main > .grid .service-accordion summary:hover .service-accordion__name {\n opacity: .58;\n }\n}\n\nmain > .grid .service-accordion summary:focus-visible {\n outline: 1px solid currentColor;\n outline-offset: 4px;\n}\n\nmain > .project-contact {\n padding-left: var(--page-x) !important;\n padding-right: var(--page-x) !important;\n}\n\nmain > .project-contact .project-contact__layout {\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n}\n\nmain > .project-contact .project-contact__intro {\n justify-self: start !important;\n margin: 0 !important;\n text-align: left !important;\n}\n\nmain > .project-contact .project-contact__intro .section-title,\nmain > .project-contact .project-contact__title,\nmain > .project-contact .project-contact__copy {\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n}\n\n@media (max-width: 720px) {\n main > .grid .service-accordion summary {\n grid-template-columns: 28px minmax(0, 1fr) 28px;\n min-height: 58px;\n text-align: left;\n }\n\n main > .grid .service-accordion__content {\n max-width: none;\n padding: 0 36px 18px 40px;\n text-align: left;\n }\n\n main > .project-contact .project-contact__intro,\n main > .project-contact .project-contact__intro .section-title,\n main > .project-contact .project-contact__title,\n main > .project-contact .project-contact__copy {\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\n}\n\n@media (min-width: 721px) {\n main > .grid .services__accordion {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: clamp(28px, 4vw, 56px) !important;\n align-items: start !important;\n }\n\n main > .grid .service-accordion {\n min-width: 0 !important;\n }\n\n main > .grid .service-accordion:nth-child(-n + 2) {\n border-top: 0 !important;\n }\n\n main > .grid .service-accordion__name {\n font-size: var(--scale-2) !important;\n line-height: 1.15 !important;\n letter-spacing: -.035em !important;\n }\n\n main > .grid .service-accordion__content {\n max-width: none !important;\n padding-right: 34px !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .grid .services__accordion {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 18px !important;\n row-gap: 0 !important;\n align-items: start !important;\n }\n\n main > .grid .service-accordion {\n min-width: 0 !important;\n }\n\n main > .grid .service-accordion__name {\n font-size: var(--scale-0) !important;\n }\n}\n\nmain > .grid .service-accordion {\n border-top: 0 !important;\n border-bottom: 0 !important;\n}\n\nmain > .grid .service-accordion summary {\n grid-template-columns: minmax(0, 1fr) 28px !important;\n}\n\nmain > .grid .service-accordion__content {\n padding-left: 0 !important;\n}\n\n@media (max-width: 720px) {\n main > .grid .service-accordion summary {\n grid-template-columns: minmax(0, 1fr) 28px !important;\n }\n\n main > .grid .service-accordion__content {\n padding-left: 0 !important;\n }\n}\n\nmain > .grid .service-accordion summary {\n grid-template-columns: minmax(0, 1fr) !important;\n cursor: pointer;\n}\n\nmain > .grid .service-accordion__toggle,\nmain > .grid .service-accordion__toggle::before,\nmain > .grid .service-accordion__toggle::after {\n display: none !important;\n content: none !important;\n}\n\nmain > .grid .service-accordion__heading {\n display: block;\n min-height: 0;\n margin: 0 0 8px;\n padding: 0;\n color: var(--text);\n cursor: default;\n user-select: text;\n}\n\nmain > .grid .service-accordion__content {\n display: block !important;\n padding-top: 0 !important;\n}\n\n@media (min-width: 721px) {\n main > .grid .service-accordion {\n padding: 12px 0 18px;\n }\n}\n\n@media (max-width: 720px) {\n main > .grid .service-accordion {\n padding: 10px 0 16px;\n }\n}\n\nmain > .grid .service-accordion__heading {\n width: 100%;\n border: 0;\n background: transparent;\n font: inherit;\n text-align: left;\n color: var(--text);\n appearance: none;\n -webkit-appearance: none;\n}\n\n@media (min-width: 721px) {\n main > .grid .service-accordion__heading {\n pointer-events: none;\n }\n\n main > .grid .service-accordion__content {\n display: block !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .grid .service-accordion {\n padding: 8px 0 10px !important;\n }\n\n main > .grid .service-accordion__heading {\n display: flex;\n align-items: center;\n min-height: 44px;\n margin: 0 !important;\n padding: 8px 0 !important;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n main > .grid .service-accordion__heading:focus-visible {\n outline: 1px solid currentColor;\n outline-offset: 4px;\n }\n\n main > .grid .service-accordion__content {\n display: none !important;\n padding: 0 0 12px !important;\n }\n\n main > .grid .service-accordion.is-open .service-accordion__content {\n display: block !important;\n }\n}\n\n.clients__logo--playboy {\n --logo-w: 62px !important;\n --logo-h: 32px !important;\n}\n\n.clients__logo--bit {\n width: 158px !important;\n min-width: 158px !important;\n --logo-w: 108px !important;\n --logo-h: 32px !important;\n}\n\n.clients__logo--medicover {\n width: 184px !important;\n min-width: 184px !important;\n height: 64px !important;\n --logo-w: 132px !important;\n --logo-h: 38px !important;\n}\n\n@media (max-width: 720px) {\n .clients__logo--playboy {\n --logo-w: 56px !important;\n --logo-h: 29px !important;\n }\n\n .clients__logo--bit {\n width: 146px !important;\n min-width: 146px !important;\n --logo-w: 100px !important;\n --logo-h: 30px !important;\n }\n\n .clients__logo--medicover {\n width: 160px !important;\n min-width: 160px !important;\n height: 58px !important;\n --logo-w: 122px !important;\n --logo-h: 35px !important;\n }\n}\n\n@media (max-width: 520px) {\n .clients__logo--playboy {\n --logo-w: 52px !important;\n --logo-h: 27px !important;\n }\n\n .clients__logo--bit {\n width: 134px !important;\n min-width: 134px !important;\n --logo-w: 94px !important;\n --logo-h: 28px !important;\n }\n\n .clients__logo--medicover {\n width: 154px !important;\n min-width: 154px !important;\n height: 56px !important;\n --logo-w: 116px !important;\n --logo-h: 33px !important;\n }\n}\n\nbody .websites .website-link--preview {\n background: #DCDEE2 !important;\n color: #000029 !important;\n box-shadow: none;\n}\n\nbody .websites .website-link--preview::before,\nbody .websites .website-link--preview::after {\n background: #DCDEE2 !important;\n}\n\nbody .websites .website-link--preview::before {\n top: 48%;\n}\n\nbody .websites .website-link--preview::after {\n top: 40%;\n height: 14%;\n}\n\nbody .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 0 !important;\n top: 10px !important;\n right: 10px !important;\n bottom: auto !important;\n left: 10px !important;\n display: block !important;\n width: calc(100% - 20px) !important;\n height: 55% !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: clamp(16px, 2vw, 22px) !important;\n object-fit: cover !important;\n object-position: 50% 35% !important;\n opacity: 1 !important;\n filter: none !important;\n mix-blend-mode: normal !important;\n transform: none !important;\n}\n\nbody .websites .website-link--preview .website-link__number {\n top: 54%;\n}\n\nbody .websites .website-link--preview .website-link__arrow {\n top: 53.5%;\n}\n\nbody .websites .website-link--preview .website-link__description {\n color: #000051 !important;\n}\n\n @media (max-width: 720px) {\n main > .grid .clients__marquee {\n cursor: grab;\n touch-action: pan-y;\n user-select: none;\n -webkit-user-select: none;\n }\n\n main > .grid .clients__marquee.is-dragging {\n cursor: grabbing;\n }\n\n main > .grid .clients__track {\n animation: none !important;\n will-change: transform;\n }\n }\n\n @media (max-width: 720px) and (prefers-reduced-motion: reduce) {\n main > .grid .clients__group[aria-hidden=\"true\"] {\n display: flex !important;\n }\n }\n\n main > .testimonials {\n width: 100%;\n margin: clamp(56px, 7vw, 96px) 0 0;\n padding-top: 24px;\n border-top: 1px solid var(--line);\n }\n\n main > .testimonials .testimonials__header {\n margin-bottom: clamp(44px, 6vw, 90px);\n }\n\n main > .testimonials .testimonials__header .section-title {\n margin: 0;\n text-align: left;\n }\n\n .testimonial-stage {\n width: 100%;\n min-height: clamp(300px, 32vw, 430px);\n display: grid;\n place-items: center;\n padding: clamp(12px, 2vw, 24px) 0 clamp(24px, 3.5vw, 48px);\n text-align: center;\n touch-action: pan-y;\n }\n\n .testimonial-stage__inner {\n width: min(100%, 920px);\n display: grid;\n justify-items: center;\n gap: 0;\n }\n.testimonial-quote {\n max-width: 820px;\n margin: 0;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-2);\n font-weight: 400;\n line-height: 1.42;\n letter-spacing: -.025em;\n text-wrap: balance;\n }\n\n .testimonial-author {\n display: grid;\n justify-items: center;\n gap: 4px;\n margin-top: clamp(24px, 3vw, 34px);\n }\n\n .testimonial-author strong {\n color: var(--text);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n line-height: 1.3;\n letter-spacing: -.012em;\n }\n\n .testimonial-author span {\n max-width: 420px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.45;\n letter-spacing: .01em;\n }\n\n .testimonial-mobile-cue {\n display: none;\n }\n\n .testimonial-stage {\n position: relative;\n }\n\n .testimonial-side-arrow {\n position: absolute;\n top: 50%;\n z-index: 3;\n width: 48px;\n height: 48px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-1);\n line-height: 1;\n cursor: pointer;\n transform: translateY(-50%);\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n transform .16s ease;\n }\n\n .testimonial-side-arrow--prev {\n left: 0;\n }\n\n .testimonial-side-arrow--next {\n right: 0;\n }\n\n .testimonial-side-arrow:hover,\n .testimonial-side-arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n }\n\n .testimonial-side-arrow:active {\n transform: translateY(-50%) scale(.96);\n }\n\n .testimonial-stage.is-changing .testimonial-quote,\n .testimonial-stage.is-changing .testimonial-author {\n opacity: .16;\n transform: translateY(4px);\n filter: blur(5px);\n }\n\n .testimonial-quote,\n .testimonial-author {\n transition:\n opacity .15s ease,\n transform .22s ease,\n filter .22s ease;\n }\n\n @media (max-width: 720px) {\n .testimonial-side-arrow {\n display: none;\n }\n\n main > .testimonials {\n width: 100vw;\n margin-top: 52px;\n margin-right: calc(50% - 50vw);\n margin-left: calc(50% - 50vw);\n padding-top: 24px;\n }\n\n main > .testimonials .testimonials__header {\n margin-bottom: 40px;\n }\n\n main > .testimonials .testimonials__header .section-title {\n text-align: center;\n }\n\n .testimonial-stage {\n min-height: 300px;\n padding: 4px 0 30px;\n }\n\n .testimonial-stage__inner {\n width: 100%;\n }\n.testimonial-quote {\n max-width: 620px;\n font-size: var(--scale-0);\n line-height: 1.5;\n letter-spacing: -.02em;\n }\n\n .testimonial-author {\n margin-top: 28px;\n }\n\n .testimonial-author span {\n max-width: 290px;\n }\n\n .testimonial-mobile-cue {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin-top: 22px;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n line-height: 1;\n letter-spacing: .14em;\n text-transform: uppercase;\n user-select: none;\n pointer-events: none;\n }\n\n .testimonial-mobile-cue__dots {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .testimonial-mobile-cue__dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: currentColor;\n opacity: .32;\n transition: width .18s ease, opacity .18s ease;\n }\n\n .testimonial-mobile-cue__dot.is-active {\n width: 13px;\n border-radius: 999px;\n opacity: .9;\n }\n\n }\n\n @media (prefers-reduced-motion: reduce) {\n .testimonial-quote,\n .testimonial-author {\n transition: none;\n }\n }\n\n .clients__logo--arp {\n width: 178px !important;\n min-width: 178px !important;\n height: 74px !important;\n --logo-w: 154px;\n --logo-h: 48px;\n }\n\n .clients__logo--nck {\n width: 198px !important;\n min-width: 198px !important;\n height: 82px !important;\n --logo-w: 172px;\n --logo-h: 58px;\n }\n\n .clients__logo--bok {\n width: 158px !important;\n min-width: 158px !important;\n height: 72px !important;\n --logo-w: 136px;\n --logo-h: 46px;\n }\n\n .clients__logo--arp img,\n .clients__logo--arp svg,\n .clients__logo--arp .clients__text-logo,\n .clients__logo--bok img,\n .clients__logo--bok svg,\n .clients__logo--bok .clients__text-logo {\n transform: scale(1.54) !important;\n transform-origin: center center !important;\n }\n\n .clients__logo--nck img,\n .clients__logo--nck svg,\n .clients__logo--nck .clients__text-logo {\n transform: scale(1.62) !important;\n transform-origin: center center !important;\n }\n\n .clients__group {\n min-height: 92px;\n }\n\n @media (max-width: 720px) {\n .clients__logo--arp {\n width: 154px !important;\n min-width: 154px !important;\n height: 66px !important;\n --logo-w: 136px;\n --logo-h: 43px;\n }\n\n .clients__logo--nck {\n width: 174px !important;\n min-width: 174px !important;\n height: 74px !important;\n --logo-w: 154px;\n --logo-h: 52px;\n }\n\n .clients__logo--bok {\n width: 140px !important;\n min-width: 140px !important;\n height: 64px !important;\n --logo-w: 122px;\n --logo-h: 41px;\n }\n\n .clients__logo--arp img,\n .clients__logo--arp svg,\n .clients__logo--arp .clients__text-logo,\n .clients__logo--bok img,\n .clients__logo--bok svg,\n .clients__logo--bok .clients__text-logo {\n transform: scale(1.46) !important;\n }\n\n .clients__logo--nck img,\n .clients__logo--nck svg,\n .clients__logo--nck .clients__text-logo {\n transform: scale(1.54) !important;\n }\n\n .clients__group {\n min-height: 82px;\n }\n }\n\n @media (max-width: 520px) {\n .clients__logo--arp {\n width: 146px !important;\n min-width: 146px !important;\n }\n\n .clients__logo--nck {\n width: 164px !important;\n min-width: 164px !important;\n }\n\n .clients__logo--bok {\n width: 132px !important;\n min-width: 132px !important;\n }\n }\n\n .clients__logo--nck {\n height: 98px !important;\n }\n\n .clients__group {\n min-height: 116px !important;\n }\n\n @media (max-width: 720px) {\n .clients__logo--nck {\n height: 88px !important;\n }\n\n .clients__group {\n min-height: 104px !important;\n }\n }\n\n @media (max-width: 520px) {\n .clients__logo--nck {\n height: 86px !important;\n }\n\n .clients__group {\n min-height: 100px !important;\n }\n }\n\nbody .websites .website-link {\n background: #DCDEE2 !important;\n color: var(--text) !important;\n}\n\nbody .websites .website-link--preview {\n box-shadow: none;\n border: 0 !important;\n}\n\nbody .websites .website-link::before,\nbody .websites .website-link::after {\n background: #DCDEE2 !important;\n}\n\nbody .websites .website-link__description {\n color: var(--muted) !important;\n}\n\nbody .websites .website-link--preview::before {\n z-index: 2 !important;\n top: 24% !important;\n bottom: 0 !important;\n border-radius: clamp(22px, 2.5vw, 30px) !important;\n}\n\nbody .websites .website-link--preview::after {\n z-index: 2 !important;\n left: 0 !important;\n top: 15% !important;\n width: 48% !important;\n height: 15% !important;\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0 !important;\n}\n\nbody .websites .website-link--preview .website-link__number {\n top: 29% !important;\n z-index: 3 !important;\n}\n\nbody .websites .website-link--preview .website-link__arrow {\n top: 28.5% !important;\n z-index: 3 !important;\n}\n\nbody .websites .website-link--preview .website-link__content {\n z-index: 3 !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1) !important;\n}\n\nbody .websites .website-link:hover .website-link__content,\nbody .websites .website-link:focus-visible .website-link__content {\n opacity: 1 !important;\n transform: translateY(0) !important;\n}\n\nbody .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 1 !important;\n top: auto !important;\n right: 1px !important;\n\n bottom: -10px !important;\n left: 1px !important;\n display: block !important;\n width: calc(100% - 2px) !important;\n height: calc(100% + 10px) !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: inherit !important;\n object-fit: cover !important;\n object-position: 50% 34% !important;\n opacity: 1 !important;\n filter: none !important;\n mix-blend-mode: normal !important;\n\n clip-path: none !important;\n -webkit-clip-path: none !important;\n transform: translate3d(0, 0, 0) scale(1.01) !important;\n transform-origin: center bottom !important;\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\n pointer-events: none !important;\n}\n\nbody .websites .website-link--preview:hover::before,\nbody .websites .website-link--preview:focus-visible::before {\n top: 58% !important;\n}\n\nbody .websites .website-link--preview:hover::after,\nbody .websites .website-link--preview:focus-visible::after {\n top: 50% !important;\n}\n\nbody .websites .website-link--preview:hover .website-link__number,\nbody .websites .website-link--preview:focus-visible .website-link__number {\n top: 61% !important;\n}\n\nbody .websites .website-link--preview:hover .website-link__arrow,\nbody .websites .website-link--preview:focus-visible .website-link__arrow {\n top: 60% !important;\n transform: translate(3px, -3px) !important;\n}\n\nbody .websites .website-link--preview:hover > img.website-link__preview,\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\n transform: translate3d(0, -10px, 0) scale(1.01) !important;\n}\n\nbody .websites .website-link {\n --website-card-text-x: clamp(20px, 2.4vw, 28px);\n}\n\nbody .websites .website-link .website-link__number {\n left: var(--website-card-text-x) !important;\n text-align: left !important;\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease !important;\n}\n\nbody .websites .website-link .website-link__content {\n left: var(--website-card-text-x) !important;\n right: var(--website-card-text-x) !important;\n text-align: left !important;\n}\n\nbody .websites .website-link .website-link__name,\nbody .websites .website-link .website-link__description {\n text-align: left !important;\n}\n\nbody .websites .website-link:hover .website-link__number,\nbody .websites .website-link:focus-visible .website-link__number {\n transform: translateY(-14px) !important;\n}\n\n@media (max-width: 420px) {\n body .websites .website-link {\n --website-card-text-x: 20px;\n }\n\n body .websites .website-link:hover .website-link__number,\n body .websites .website-link:focus-visible .website-link__number {\n transform: translateY(-10px) !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .websites .website-link--preview > img.website-link__preview {\n transition: none !important;\n }\n}\n\nbody .websites .website-link::before,\nbody .websites .website-link--preview::before {\n left: 0 !important;\n border-radius: 10px 10px 4px 4px !important;\n}\n\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n content: none !important;\n display: none !important;\n}\n\nbody .websites .website-link__front-tab {\n position: absolute !important;\n z-index: 2 !important;\n left: 0 !important;\n top: 15% !important;\n width: 58% !important;\n height: 17% !important;\n display: block !important;\n overflow: visible !important;\n pointer-events: none !important;\n transform: none !important;\n backface-visibility: visible !important;\n will-change: auto !important;\n transition: top .62s cubic-bezier(.22,.78,.2,1) !important;\n shape-rendering: auto !important;\n}\n\nbody .websites .website-link__front-tab path {\n fill: #DCDEE2 !important;\n stroke: none !important;\n shape-rendering: auto !important;\n}\n\nbody .websites .website-link:hover .website-link__front-tab,\nbody .websites .website-link:focus-visible .website-link__front-tab {\n top: 50% !important;\n}\n\n@media (max-width: 520px) {\n body .websites .website-link::before,\n body .websites .website-link--preview::before {\n border-radius: 8px 8px 3px 3px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .websites .website-link__front-tab {\n transition: none !important;\n }\n}\n\nbody .websites .website-link__arrow {\n color: var(--text) !important;\n font-size: 0 !important;\n -webkit-text-fill-color: currentColor !important;\n}\n\nbody .websites .website-link__arrow svg {\n display: block !important;\n width: 24px !important;\n height: 24px !important;\n overflow: visible !important;\n fill: none !important;\n stroke: currentColor !important;\n stroke-width: 1.45 !important;\n stroke-linecap: square !important;\n stroke-linejoin: miter !important;\n pointer-events: none !important;\n}\n\nbody .websites .website-link::before,\nbody .websites .website-link--preview::before {\n background: transparent !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\n\nbody .websites .website-link__front-tab {\n opacity: 0 !important;\n}\n\nbody .websites .website-link__front-tab path {\n fill: transparent !important;\n}\n\nbody .websites .website-link__number,\nbody .websites .website-link__content,\nbody .websites .website-link__arrow {\n z-index: 3 !important;\n}\n\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n content: \"\" !important;\n position: absolute !important;\n z-index: 2 !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n display: block !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: #BABABA !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n\n -webkit-mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 780 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 1000 L0 168 Q0 150 14.04 150 H237.12 C258.96 150 273 157 288.6 177 C312 207 333.06 240 375.96 240 H752 Q780 240 780 268 V1000 Z'\/%3E%3C\/svg%3E\") !important;\n mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 780 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 1000 L0 168 Q0 150 14.04 150 H237.12 C258.96 150 273 157 288.6 177 C312 207 333.06 240 375.96 240 H752 Q780 240 780 268 V1000 Z'\/%3E%3C\/svg%3E\") !important;\n -webkit-mask-repeat: no-repeat !important;\n mask-repeat: no-repeat !important;\n -webkit-mask-position: 0 0 !important;\n mask-position: 0 0 !important;\n -webkit-mask-size: 100% 100% !important;\n mask-size: 100% 100% !important;\n\n pointer-events: none !important;\n transform: translate3d(0, 0, 0) !important;\n transform-origin: top left !important;\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\n}\n\nbody .websites .website-link:hover::after,\nbody .websites .website-link:focus-visible::after {\n\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n transform: translate3d(0, 34%, 0) !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .websites .website-link::after,\n body .websites .website-link--preview::after {\n transition: none !important;\n }\n}\n\n@media (max-width: 720px) {\n main > .testimonials .testimonials__header {\n margin-bottom: 28px !important;\n }\n\n .testimonial-stage {\n min-height: 240px !important;\n padding: 2px 20px 24px !important;\n }\n\n .testimonial-stage__inner {\n width: min(100%, 520px) !important;\n }\n\n .testimonial-quote {\n max-width: 520px !important;\n font-size: var(--scale-0) !important;\n line-height: 1.48 !important;\n letter-spacing: -.018em !important;\n text-wrap: pretty !important;\n }\n\n .testimonial-author {\n gap: 3px !important;\n margin-top: 20px !important;\n }\n\n .testimonial-author strong {\n font-size: var(--scale-minus-1) !important;\n }\n\n .testimonial-author span {\n max-width: 270px !important;\n font-size: var(--scale-minus-1) !important;\n line-height: 1.4 !important;\n }\n\n .testimonial-mobile-cue {\n gap: 8px !important;\n margin-top: 16px !important;\n font-size: var(--scale-minus-1) !important;\n }\n}\n\n@media (max-width: 420px) {\n .testimonial-stage {\n min-height: 220px !important;\n padding-right: 18px !important;\n padding-left: 18px !important;\n }\n\n .testimonial-quote {\n font-size: var(--scale-minus-1) !important;\n line-height: 1.46 !important;\n }\n\n .testimonial-author {\n margin-top: 18px !important;\n }\n}\n\nbody .websites .website-link--preview {\n overflow: hidden !important;\n -webkit-clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\n clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\n}\n\nbody .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 1 !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n object-fit: cover !important;\n\n object-position: 50% 34% !important;\n\n -webkit-clip-path: none !important;\n clip-path: none !important;\n transform: none !important;\n transform-origin: center center !important;\n will-change: object-position !important;\n transition: object-position .62s cubic-bezier(.22,.78,.2,1) !important;\n pointer-events: none !important;\n}\n\nbody .websites .website-link--preview:hover > img.website-link__preview,\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n transform: none !important;\n object-position: 50% calc(34% - 10px) !important;\n}\n\nbody .websites .website-link--preview::after {\n box-shadow: none;\n outline: 0 !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .websites .website-link--preview > img.website-link__preview {\n transition: none !important;\n }\n}\n\n\n\/* Client logo carousel: native swipe + desktop arrows *\/\n.clients__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.clients__header .clients__label {\n margin: 0 !important;\n}\n\n.clients__controls {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 0 0 auto;\n}\n\n.clients__arrow {\n appearance: none;\n -webkit-appearance: none;\n width: 36px;\n height: 36px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-0);\n line-height: 1;\n cursor: pointer;\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\n}\n\n.clients__arrow:hover,\n.clients__arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n}\n\nmain > .grid .clients__marquee {\n overflow: hidden !important;\n overscroll-behavior-inline: contain;\n touch-action: pan-y !important;\n cursor: default !important;\n}\n\n\/* Keep autoplay on the compositor. JS only changes animation time for swipe\/arrows. *\/\nmain > .grid .clients__track {\n transform: translate3d(0, 0, 0);\n will-change: transform !important;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\nmain > .grid .clients.is-logo-carousel-enhanced .clients__track {\n animation: none !important;\n}\n\n.clients__logo--iratcr {\n width: 142px !important;\n min-width: 142px !important;\n --logo-w: 126px;\n --logo-h: 36px;\n}\n\n.clients__logo--iratcr img {\n object-fit: cover !important;\n object-position: center center !important;\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\n opacity: .62 !important;\n}\n\n.clients__logo--adventure-lab {\n width: 142px !important;\n min-width: 142px !important;\n --logo-w: 126px;\n --logo-h: 38px;\n}\n\n@media (max-width: 900px) and (min-width: 721px) {\n .clients__header {\n position: relative;\n justify-content: center;\n }\n\n .clients__controls {\n position: absolute;\n right: 0;\n }\n}\n\n@media (max-width: 720px) {\n .clients__header {\n justify-content: center;\n }\n\n .clients__controls {\n display: none;\n }\n\n main > .grid .clients__marquee {\n cursor: grab !important;\n }\n\n main > .grid .clients__marquee:active {\n cursor: grabbing !important;\n }\n\n .clients__logo--iratcr,\n .clients__logo--adventure-lab {\n width: 124px !important;\n min-width: 124px !important;\n --logo-w: 110px;\n --logo-h: 34px;\n }\n}\n\n@media (max-width: 520px) {\n .clients__logo--iratcr,\n .clients__logo--adventure-lab {\n width: 112px !important;\n min-width: 112px !important;\n --logo-w: 100px;\n --logo-h: 31px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .clients__controls {\n display: none !important;\n }\n}\n\n\n\n\/* Animated construction title - matched to the existing editorial design *\/\nmain > .construction-title--animated {\n --construction-ink: var(--text);\n overflow: visible !important;\n text-wrap: balance;\n}\n\nmain > .construction-title--animated .construction-word {\n display: inline-block !important;\n white-space: nowrap;\n font-family: var(--serif) !important;\n font-weight: 400 !important;\n line-height: inherit;\n \/* A touch more breathing room gives animated glyphs their own visual slot. *\/\n letter-spacing: -.025em !important;\n}\n\nmain > .construction-title--animated .construction-word--roman {\n font-style: normal !important;\n}\n\nmain > .construction-title--animated .construction-word--italic {\n font-style: italic !important;\n letter-spacing: -.03em !important;\n}\n\nmain > .construction-title--animated .construction-space {\n display: inline-block !important;\n width: .18em;\n font-size: inherit;\n font-style: normal !important;\n}\n\nmain > .construction-title--animated .construction-letter {\n --letter-x: 0em;\n --letter-y: 0em;\n --letter-r: 0deg;\n\n display: inline-block;\n position: relative;\n \/* Reserve a tiny safety gutter around every glyph. The movement is still\n strong, but adjacent letters do not visually collide. *\/\n margin: 0 .03em;\n padding: 0;\n color: var(--construction-ink);\n font: inherit;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: 0;\n -webkit-text-stroke: 0 transparent !important;\n transform: translate3d(var(--letter-x), var(--letter-y), 0) rotate(var(--letter-r));\n transform-origin: 50% 58%;\n transition: transform 720ms cubic-bezier(.16,.84,.22,1);\n will-change: transform;\n text-align: center;\n}\n\nmain > .construction-title--animated:hover .construction-letter {\n transition-duration: 540ms;\n}\n\n@media (max-width: 720px) {\n main > .construction-title--animated .construction-space {\n width: .14em;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n main > .construction-title--animated .construction-letter {\n color: var(--construction-ink) !important;\n -webkit-text-stroke: 0 transparent !important;\n transform: none !important;\n transition: none !important;\n }\n}\n\n\n\/* Fluid type-collage morph: two glyph faces occupy one fixed slot and\n dissolve into each other. The parent itself still only translates\/rotates. *\/\n.construction-letter {\n overflow: visible;\n isolation: isolate;\n}\n\n.construction-letter__measure {\n display: inline-block;\n visibility: hidden;\n pointer-events: none;\n font-family: Georgia, \"Times New Roman\", Times, serif;\n font: inherit;\n line-height: inherit;\n}\n\n.construction-letter__face {\n position: absolute;\n margin: 0;\n padding: 0;\n border: 0;\n text-decoration: none;\n inset: 0;\n display: flex;\n align-items: baseline;\n justify-content: center;\n color: inherit;\n line-height: inherit;\n letter-spacing: 0 !important;\n white-space: nowrap;\n pointer-events: none;\n font-size: 1em !important;\n\n opacity: 0;\n filter: blur(5px);\n transform: translateZ(0);\n transition:\n opacity 760ms cubic-bezier(.22,.61,.36,1),\n filter 760ms cubic-bezier(.22,.61,.36,1);\n will-change: opacity, filter;\n}\n\n.construction-letter__face.is-visible {\n opacity: 1;\n filter: blur(0);\n}\n\nmain > .construction-title--animated:hover .construction-letter__face {\n transition-duration: 760ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .construction-letter__face {\n transition: none !important;\n filter: none !important;\n }\n}\n\n\n\/* --- final tuning: no blur, stable font morph, hero only centered --- *\/\n\n\/* No blur at any point in the font morph. *\/\nmain > .construction-title--animated .construction-letter__face {\n filter: none !important;\n transition: opacity 620ms cubic-bezier(.22,.61,.36,1) !important;\n will-change: opacity !important;\n}\n\n\/* Keep every glyph inside a fixed line box so changing font metrics\n cannot change the title height or move the rest of the page. *\/\nmain > .construction-title--animated .construction-letter {\n line-height: 1em !important;\n height: 1em !important;\n vertical-align: baseline !important;\n}\n\nmain > .construction-title--animated .construction-letter__measure,\nmain > .construction-title--animated .construction-letter__face {\n line-height: 1em !important;\n height: 1em !important;\n}\n\n\/* Center ONLY the hero block. No selectors below touch .info,\n services, clients, works, testimonials or contact sections. *\/\nmain > .grid > .hero {\n margin-inline: auto !important;\n align-self: center !important;\n justify-self: center !important;\n text-align: center !important;\n}\n\nmain > .grid > .hero .contact {\n margin-inline: auto !important;\n}\n\nmain > .grid > .hero .socials {\n justify-content: center !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n main > .construction-title--animated .construction-letter__face {\n transition: none !important;\n }\n}\n\n\n\/* =========================================================\n FINAL HERO \/ TYPEWRITER INTERACTION\n ========================================================= *\/\n\n\/* Entire hero = title + supporting copy + social icons. *\/\nmain > .construction-hero {\n width: min(100%, 1040px);\n margin: 0 auto clamp(54px, 7vw, 92px);\n padding-inline: clamp(2px, 1vw, 12px);\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n overflow: visible;\n}\n\nmain > .construction-hero > .construction-title {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n text-align: center;\n overflow: visible !important;\n}\n\nmain > .construction-hero > .contact {\n width: min(100%, 340px);\n margin: clamp(34px, 4.5vw, 58px) auto 0 !important;\n padding-top: 0 !important;\n text-align: center;\n}\n\nmain > .construction-hero > .contact .intro {\n margin-left: auto;\n margin-right: auto;\n}\n\nmain > .construction-hero > .contact .socials {\n justify-content: center !important;\n}\n\n\/* The original left hero column is gone. Keep the rest of the desktop\n layout aligned to its original right-hand column. *\/\nmain > .grid > .info {\n grid-column: 2;\n}\n\n\/* Title is completely normal before interaction. *\/\nmain > .construction-hero .construction-title--animated {\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n text-wrap: balance;\n overflow: visible !important;\n}\n\nmain > .construction-hero .construction-word {\n display: inline-block !important;\n white-space: nowrap;\n overflow: visible;\n}\n\n\/* Every letter keeps a stable base-font slot. The visible font sits\n absolutely on top, so changing typeface never reflows the page. *\/\nmain > .construction-hero .construction-letter {\n --letter-x: 0em;\n --letter-y: 0em;\n --letter-r: 0deg;\n\n position: relative !important;\n display: inline-block !important;\n width: auto;\n height: 1em !important;\n margin: 0 .022em !important;\n padding: 0 !important;\n line-height: 1em !important;\n vertical-align: baseline !important;\n overflow: visible !important;\n\n transform:\n translate3d(var(--letter-x), var(--letter-y), 0)\n rotate(var(--letter-r)) !important;\n transform-origin: 50% 58%;\n transition: transform 240ms steps(3, end) !important;\n}\n\nmain > .construction-hero .construction-letter__measure {\n position: relative;\n display: inline-block !important;\n visibility: hidden !important;\n pointer-events: none;\n white-space: pre;\n font-family: Georgia, \"Times New Roman\", Times, serif !important;\n font-weight: 400 !important;\n font-style: inherit !important;\n font-size: 1em !important;\n line-height: 1em !important;\n letter-spacing: 0 !important;\n}\n\n\/* One visible glyph only. No blur and no crossfade. *\/\nmain > .construction-hero .construction-letter__face {\n position: absolute !important;\n inset: 0 !important;\n display: flex !important;\n align-items: baseline;\n justify-content: center;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n opacity: 1 !important;\n filter: none !important;\n transition: none !important;\n animation: none;\n white-space: nowrap;\n pointer-events: none;\n color: inherit !important;\n line-height: 1em !important;\n letter-spacing: 0 !important;\n}\n\n\/* Mechanical typewriter strike: disappear for one \"key hit\", switch face,\n then snap back. No scaling, no skew, no blur. *\/\n@keyframes constructionTypeStrike {\n 0% { transform: translateY(0); opacity: 1; }\n 45% { transform: translateY(.075em); opacity: 0; }\n 55% { transform: translateY(-.045em); opacity: 0; }\n 100% { transform: translateY(0); opacity: 1; }\n}\n\nmain > .construction-hero .construction-letter.is-typing .construction-letter__face {\n animation: constructionTypeStrike 135ms steps(2, end) both !important;\n}\n\n\/* Fine pointer: hover is the interaction. *\/\n@media (hover: hover) and (pointer: fine) {\n main > .construction-hero .construction-title--animated {\n cursor: crosshair;\n }\n}\n\n\/* Touch: tap toggles the effect. *\/\n@media (hover: none), (pointer: coarse) {\n main > .construction-hero .construction-title--animated {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n}\n\n\/* Mobile: protect the long word from clipping. *\/\n@media (max-width: 900px) {\n main > .grid > .info {\n grid-column: 1;\n }\n\n main > .construction-hero {\n width: 100%;\n margin-bottom: clamp(48px, 10vw, 72px);\n padding-inline: 0;\n }\n}\n\n@media (max-width: 720px) {\n main > .construction-hero > .construction-title {\n width: calc(100vw - (var(--page-x) * 2));\n max-width: 100%;\n padding-inline: 1px;\n font-size: var(--scale-6) !important;\n line-height: 1.02 !important;\n letter-spacing: -.055em !important;\n }\n\n main > .construction-hero .construction-word {\n max-width: 100%;\n }\n\n main > .construction-hero .construction-word--roman,\n main > .construction-hero .construction-word--italic {\n letter-spacing: -.018em !important;\n }\n\n main > .construction-hero .construction-letter {\n margin-inline: .012em !important;\n }\n\n main > .construction-hero > .contact {\n margin-top: 32px !important;\n }\n}\n\n@media (max-width: 420px) {\n main > .construction-hero > .construction-title {\n font-size: var(--scale-5) !important;\n line-height: 1.04 !important;\n }\n\n main > .construction-hero .construction-space {\n width: .11em !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n main > .construction-hero .construction-letter {\n transform: none !important;\n transition: none !important;\n }\n\n main > .construction-hero .construction-letter.is-typing .construction-letter__face {\n animation: none !important;\n }\n}\n\n\n\/* =========================================================\n PATCH v13 - real hero centering + no clipping\n ========================================================= *\/\n\n\/* Treat the whole hero as one centered block. *\/\nmain > .construction-hero {\n width: min(100%, 1180px) !important;\n margin: 0 auto clamp(56px, 7vw, 96px) !important;\n padding-inline: 0 !important;\n display: grid !important;\n justify-items: center !important;\n align-items: start !important;\n text-align: center !important;\n}\n\n\/* Make the title itself a centered, fit-content block so the text\n doesn't look offset inside a full-width heading box. *\/\nmain > .construction-hero > .construction-title {\n display: inline-block !important;\n width: auto !important;\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\n margin: 0 auto !important;\n text-align: center !important;\n text-wrap: initial !important;\n overflow: visible !important;\n font-size: var(--scale-9) !important;\n line-height: .98 !important;\n letter-spacing: -.06em !important;\n}\n\n\/* Controlled line breaks on desktop:\n line 1 = \"Strona\"\n line 2 = \"w przebudowie\" *\/\nmain > .construction-hero > .construction-title > .construction-word--roman:first-of-type {\n display: block !important;\n margin: 0 auto -.02em !important;\n}\n\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(2),\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(3) {\n display: inline-block !important;\n vertical-align: top;\n}\n\n\/* Remove any leftover balancing that can produce awkward offsets. *\/\nmain > .construction-hero .construction-title--animated {\n text-wrap: initial !important;\n width: auto !important;\n}\n\n\/* Tighter, but still safe, slots so the headline doesn't become enormous. *\/\nmain > .construction-hero .construction-letter {\n margin-inline: .012em !important;\n}\n\n\/* Supporting copy + icons centered as part of the same hero block. *\/\nmain > .construction-hero > .contact {\n width: min(100%, 360px) !important;\n margin: clamp(30px, 4vw, 48px) auto 0 !important;\n text-align: center !important;\n}\n\nmain > .construction-hero > .contact .intro {\n text-align: center !important;\n}\n\nmain > .construction-hero > .contact .socials {\n justify-content: center !important;\n}\n\n\/* Tablet \/ small laptop *\/\n@media (max-width: 900px) {\n main > .construction-hero {\n width: 100% !important;\n margin-bottom: clamp(46px, 9vw, 72px) !important;\n }\n\n main > .construction-hero > .construction-title {\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\n font-size: var(--scale-7) !important;\n line-height: 1.01 !important;\n letter-spacing: -.055em !important;\n }\n}\n\n\/* Mobile: stack each word to guarantee no clipping. *\/\n@media (max-width: 720px) {\n main > .construction-hero > .construction-title {\n display: block !important;\n width: calc(100vw - (var(--page-x) * 2)) !important;\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\n font-size: var(--scale-6) !important;\n line-height: 1.02 !important;\n letter-spacing: -.045em !important;\n }\n\n main > .construction-hero > .construction-title > .construction-word {\n display: block !important;\n width: 100% !important;\n margin: 0 auto !important;\n white-space: nowrap !important;\n text-align: center !important;\n }\n\n main > .construction-hero > .construction-title > .construction-word:nth-of-type(2) {\n margin-top: -.04em !important;\n margin-bottom: -.05em !important;\n }\n\n main > .construction-hero .construction-letter {\n margin-inline: .008em !important;\n }\n\n main > .construction-hero > .contact {\n margin-top: 28px !important;\n }\n}\n\n@media (max-width: 420px) {\n main > .construction-hero > .construction-title {\n font-size: var(--scale-5) !important;\n line-height: 1.04 !important;\n letter-spacing: -.038em !important;\n }\n\n main > .construction-hero .construction-letter {\n margin-inline: .004em !important;\n }\n\n main > .construction-hero > .contact {\n width: min(100%, 320px) !important;\n }\n}\n\n\n\/* =========================================================\n PATCH v14 - remove legacy 50vw offset + slightly larger socials\n ========================================================= *\/\n\n\/* IMPORTANT: an older .construction-title rule used:\n position: relative; left: 50%; width: 100vw; margin-left: -50vw.\n Later rules changed the width\/margin but left `left:50%` active.\n Reset the legacy full-bleed positioning completely. *\/\nmain > .construction-hero > h1.construction-title {\n position: relative !important;\n left: auto !important;\n right: auto !important;\n inset-inline: auto !important;\n transform: none !important;\n\n display: inline-block !important;\n width: auto !important;\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\n\n margin-left: auto !important;\n margin-right: auto !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n\n text-align: center !important;\n box-sizing: border-box !important;\n}\n\n\/* Ensure the hero's centering context itself has no horizontal offset. *\/\nmain > .construction-hero {\n position: relative !important;\n left: auto !important;\n right: auto !important;\n margin-left: auto !important;\n margin-right: auto !important;\n justify-items: center !important;\n align-items: start !important;\n}\n\n\/* Slightly larger social icons, keeping the existing visual weight. *\/\nmain > .construction-hero .socials {\n gap: 20px !important;\n}\n\nmain > .construction-hero .social-link {\n width: 26px !important;\n height: 26px !important;\n}\n\nmain > .construction-hero .social-link svg {\n width: 20px !important;\n height: 20px !important;\n}\n\n\/* Mobile remains centered and cannot inherit the old full-viewport title offset. *\/\n@media (max-width: 720px) {\n main > .construction-hero > h1.construction-title {\n position: relative !important;\n left: auto !important;\n right: auto !important;\n width: calc(100vw - (var(--page-x) * 2)) !important;\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\n margin-left: auto !important;\n margin-right: auto !important;\n padding-inline: 0 !important;\n }\n\n main > .construction-hero .social-link {\n width: 27px !important;\n height: 27px !important;\n }\n\n main > .construction-hero .social-link svg {\n width: 21px !important;\n height: 21px !important;\n }\n}\n\n\n\n\/* Editorial offer sections *\/\n.landing-hero,\n.process-section,\n.problems-section,\n.fit-section,\n.included-section,\n.faq-section {\n width: 100%;\n}\n\n.landing-hero {\n display: grid;\n grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);\n gap: clamp(56px, 9vw, 150px);\n align-items: end;\n padding: clamp(22px, 3vw, 40px) 0 clamp(72px, 9vw, 126px);\n}\n\n.landing-hero__copy {\n max-width: 880px;\n}\n\n.landing-hero__copy .section-title {\n margin-bottom: clamp(24px, 3vw, 42px);\n}\n\n.landing-hero__title {\n margin: 0;\n max-width: 920px;\n font-family: var(--serif);\n font-size: var(--scale-9);\n font-weight: 400;\n line-height: .9;\n letter-spacing: -.075em;\n}\n\n.landing-hero__title span {\n font-style: italic;\n font-weight: 400;\n}\n\n.landing-hero__lead {\n max-width: 680px;\n margin: clamp(30px, 4vw, 48px) 0 0;\n color: var(--text);\n font-size: var(--scale-1);\n line-height: 1.52;\n letter-spacing: -.025em;\n}\n\n.landing-hero__lead--secondary {\n margin-top: 14px;\n color: var(--muted);\n font-size: var(--scale-0);\n line-height: 1.65;\n}\n\n.landing-hero__aside {\n padding-top: 20px;\n border-top: 1px solid var(--text);\n}\n\n.landing-hero__aside-label {\n margin: 0;\n font-size: var(--scale-minus-1);\n font-weight: 500;\n line-height: 1.45;\n letter-spacing: -.01em;\n}\n\n.landing-hero__aside-copy {\n margin: 16px 0 26px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.65;\n}\n\n.editorial-header {\n display: grid;\n grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);\n gap: clamp(36px, 7vw, 110px);\n align-items: start;\n margin-bottom: clamp(40px, 5vw, 72px);\n}\n\n.editorial-header .section-title {\n margin: 4px 0 0;\n}\n\n.editorial-title {\n margin: 0;\n max-width: 830px;\n font-family: var(--serif);\n font-size: var(--scale-6);\n font-weight: 400;\n line-height: .98;\n letter-spacing: -.06em;\n}\n\n.process-section,\n.problems-section,\n.fit-section,\n.included-section,\n.faq-section {\n margin-top: clamp(64px, 8vw, 118px);\n padding-top: 28px;\n border-top: 1px solid var(--line);\n}\n\n.process-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0;\n border-top: 1px solid var(--line);\n}\n\n.process-step {\n min-height: 250px;\n padding: 22px clamp(18px, 2vw, 30px) 24px 0;\n border-right: 1px solid var(--line);\n}\n\n.process-step + .process-step {\n padding-left: clamp(18px, 2vw, 30px);\n}\n\n.process-step:last-child {\n border-right: 0;\n}\n\n.process-step__no,\n.problem-card__no {\n display: block;\n margin-bottom: clamp(48px, 5vw, 76px);\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n letter-spacing: .08em;\n}\n\n.process-step h3,\n.problem-card h3 {\n margin: 0;\n font-size: var(--scale-1);\n font-weight: 500;\n line-height: 1.25;\n letter-spacing: -.035em;\n}\n\n.process-step p,\n.problem-card p {\n margin: 14px 0 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.62;\n}\n\n.editorial-header--wide .editorial-title {\n max-width: 920px;\n}\n\n.problem-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-top: 1px solid var(--line);\n border-left: 1px solid var(--line);\n}\n\n.problem-card {\n min-height: 285px;\n padding: clamp(22px, 2.8vw, 38px);\n border-right: 1px solid var(--line);\n border-bottom: 1px solid var(--line);\n}\n\n.problem-card__no {\n margin-bottom: clamp(56px, 7vw, 105px);\n}\n\n.problem-card h3 {\n max-width: 500px;\n font-size: var(--scale-3);\n}\n\n.problem-card p {\n max-width: 520px;\n}\n\n.fit-section {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: clamp(40px, 7vw, 110px);\n}\n\n.fit-section__column {\n min-width: 0;\n}\n\n.fit-section__column .section-title {\n margin-bottom: 28px;\n}\n\n.fit-section__column .editorial-title {\n max-width: 550px;\n font-size: var(--scale-6);\n}\n\n.fit-section__column--muted {\n padding-left: clamp(30px, 5vw, 72px);\n border-left: 1px solid var(--line);\n}\n\n.editorial-list {\n margin: clamp(34px, 4vw, 52px) 0 0;\n padding: 0;\n list-style: none;\n border-top: 1px solid var(--line);\n}\n\n.editorial-list li {\n position: relative;\n margin: 0;\n padding: 16px 0 16px 24px;\n border-bottom: 1px solid var(--line);\n color: var(--text);\n font-size: var(--scale-minus-1);\n line-height: 1.55;\n}\n\n.editorial-list li::before {\n content: \"\u2022\";\n position: absolute;\n left: 2px;\n top: 16px;\n color: var(--soft);\n}\n\n.included-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n border-top: 1px solid var(--line);\n border-left: 1px solid var(--line);\n}\n\n.included-item {\n min-height: 180px;\n padding: clamp(22px, 2.6vw, 34px);\n border-right: 1px solid var(--line);\n border-bottom: 1px solid var(--line);\n}\n\n.included-item strong,\n.included-item span {\n display: block;\n}\n\n.included-item strong {\n font-size: var(--scale-0);\n font-weight: 500;\n line-height: 1.35;\n letter-spacing: -.02em;\n}\n\n.included-item span {\n margin-top: 38px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.6;\n}\n\n.faq-section {\n display: grid;\n grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);\n gap: clamp(48px, 9vw, 150px);\n align-items: start;\n margin-bottom: clamp(72px, 9vw, 120px);\n}\n\n.faq-section__intro .section-title {\n margin-bottom: 26px;\n}\n\n.faq-section__intro .editorial-title {\n font-size: var(--scale-6);\n}\n\n.faq-section__lead {\n max-width: 420px;\n margin: 28px 0 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.65;\n}\n\n.faq-list {\n border-top: 1px solid var(--text);\n}\n\n.faq-item {\n border-bottom: 1px solid var(--line);\n}\n\n.faq-item summary {\n position: relative;\n padding: 20px 42px 20px 0;\n list-style: none;\n cursor: pointer;\n font-size: var(--scale-1);\n font-weight: 500;\n line-height: 1.35;\n letter-spacing: -.025em;\n}\n\n.faq-item summary::-webkit-details-marker {\n display: none;\n}\n\n.faq-item summary::after {\n content: \"+\";\n position: absolute;\n right: 4px;\n top: 50%;\n color: var(--muted);\n font-size: var(--scale-2);\n font-weight: 300;\n transform: translateY(-50%);\n}\n\n.faq-item[open] summary::after {\n content: \"\u2212\";\n}\n\n.faq-item__answer {\n max-width: 720px;\n padding: 0 46px 22px 0;\n}\n\n.faq-item__answer p {\n margin: 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.68;\n}\n\n@media (max-width: 900px) {\n .landing-hero,\n .faq-section {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n\n .landing-hero__aside {\n max-width: 620px;\n }\n\n .editorial-header {\n grid-template-columns: 1fr;\n gap: 22px;\n }\n\n .editorial-header .section-title {\n text-align: left;\n }\n\n .process-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .process-step:nth-child(2) {\n border-right: 0;\n }\n\n .process-step:nth-child(n + 3) {\n border-top: 1px solid var(--line);\n }\n\n .included-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@media (max-width: 720px) {\n .landing-hero {\n padding-top: 0;\n padding-bottom: 64px;\n text-align: left;\n }\n\n .landing-hero__copy .section-title {\n text-align: left;\n }\n\n .landing-hero__title {\n font-size: var(--scale-7);\n line-height: .92;\n }\n\n .landing-hero__lead {\n font-size: var(--scale-0);\n }\n\n .process-section,\n .problems-section,\n .fit-section,\n .included-section,\n .faq-section {\n margin-top: 58px;\n padding-top: 24px;\n }\n\n .editorial-title {\n font-size: var(--scale-5);\n }\n\n .process-grid,\n .problem-grid,\n .fit-section,\n .included-grid {\n grid-template-columns: 1fr;\n }\n\n .process-step,\n .process-step + .process-step {\n min-height: 0;\n padding: 22px 0 28px;\n border-right: 0;\n border-top: 1px solid var(--line);\n }\n\n .process-step:first-child {\n border-top: 0;\n }\n\n .process-step__no,\n .problem-card__no {\n margin-bottom: 34px;\n }\n\n .problem-card {\n min-height: 0;\n padding: 24px 0 30px;\n border-right: 0;\n border-left: 0;\n }\n\n .problem-grid,\n .included-grid {\n border-left: 0;\n }\n\n .fit-section {\n gap: 56px;\n }\n\n .fit-section__column--muted {\n padding: 28px 0 0;\n border-top: 1px solid var(--line);\n border-left: 0;\n }\n\n .included-item {\n min-height: 0;\n padding: 24px 0 28px;\n border-right: 0;\n }\n\n .included-item span {\n margin-top: 20px;\n }\n\n .faq-section {\n margin-bottom: 64px;\n }\n}\n\n\n\/* =========================================================\n UX PRINCIPLES PASS - 2026-09\n Hick \/ Fitts \/ Jakob \/ Proximity \/ Miller \/ Doherty \/\n Von Restorff \/ Serial Position \/ Peak-End \/ Pr\u00e4gnanz \/\n Similarity \/ Uniform Connectedness \/ Tesler \/ Postel \/\n Parkinson \/ Occam \/ Pareto\n ========================================================= *\/\n\n:root {\n --ux-nav-height: 68px;\n}\n\nhtml {\n scroll-padding-top: calc(var(--ux-nav-height) + 20px);\n}\n\n#uslugi,\n#proces,\n#realizacje,\n#realizacje-wideo,\n#rekomendacje,\n#kontakt {\n scroll-margin-top: calc(var(--ux-nav-height) + 20px);\n}\n\nbody .page main {\n padding-top: max(var(--main-top), calc(var(--ux-nav-height) + 32px)) !important;\n}\n\n\/* Skip link *\/\n.ux-skip-link {\n position: fixed;\n z-index: 10001;\n top: 8px;\n left: 8px;\n transform: translateY(-150%);\n min-height: 44px;\n padding: 11px 16px;\n border-radius: 999px;\n background: var(--text);\n color: var(--bg);\n text-decoration: none;\n font: 600 13px\/1.2 var(--sans);\n}\n\n.ux-skip-link:focus {\n transform: translateY(0);\n}\n\n\/* Familiar, compact navigation *\/\n.ux-site-nav {\n position: fixed;\n z-index: 1000;\n inset: 0 0 auto;\n min-height: var(--ux-nav-height);\n border-bottom: 1px solid var(--line);\n background: #DCDEE2;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\n\n.ux-site-nav__inner {\n width: min(calc(100% - (var(--page-x) * 2)), 1320px);\n min-height: var(--ux-nav-height);\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n}\n\n.ux-site-nav__brand,\n.ux-site-nav__link {\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n}\n\n.ux-site-nav__brand {\n font-size: var(--scale-minus-1);\n font-weight: 600;\n letter-spacing: -.02em;\n white-space: nowrap;\n}\n\n.ux-site-nav__links {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.ux-site-nav__link {\n padding: 0 14px;\n border-radius: 999px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n font-weight: 500;\n transition: background-color .16s ease, color .16s ease;\n}\n\n.ux-site-nav__link:hover,\n.ux-site-nav__link:focus-visible {\n background: #DCDEE2;\n color: var(--text);\n outline: none;\n}\n\n.ux-site-nav__link--primary {\n margin-left: 4px;\n padding-inline: 18px;\n background: var(--text);\n color: var(--bg);\n}\n\n.ux-site-nav__link--primary:hover,\n.ux-site-nav__link--primary:focus-visible {\n background: transparent;\n color: var(--text);\n box-shadow: none;\n}\n\n\/* Hero: one obvious primary action, one secondary action *\/\n.landing-hero__actions {\n max-width: 680px;\n margin-top: 28px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.ux-button {\n min-height: 48px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 12px 22px;\n border: 1px solid var(--text);\n border-radius: 999px;\n font: 600 12px\/1.2 var(--sans);\n letter-spacing: .01em;\n text-align: center;\n text-decoration: none;\n transition: transform .16s ease, background-color .16s ease, color .16s ease;\n}\n\n.ux-button:hover {\n transform: translateY(-1px);\n}\n\n.ux-button:focus-visible {\n outline: 2px solid var(--text);\n outline-offset: 3px;\n}\n\n.ux-button--primary {\n background: var(--text);\n color: var(--bg);\n}\n\n.ux-button--primary:hover {\n background: transparent;\n color: var(--text);\n}\n\n.ux-button--secondary {\n background: transparent;\n color: var(--text);\n}\n\n.ux-button--secondary:hover {\n background: #DCDEE2;\n}\n\n.landing-hero__microcopy {\n max-width: 560px;\n margin: 12px 0 0;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n line-height: 1.5;\n}\n\n\/* Fitts: icon links become 44px targets without making icons visually huge *\/\nbody .social-link {\n width: 44px !important;\n height: 44px !important;\n border-radius: 50%;\n}\n\nbody .socials {\n gap: 4px;\n}\n\n\/* Services: scan first, reveal detail on demand *\/\nmain > .grid .services__accordion {\n border-top: 1px solid var(--line) !important;\n}\n\nmain > .grid .service-accordion {\n padding: 0 !important;\n border: 0 !important;\n border-bottom: 1px solid var(--line) !important;\n}\n\nmain > .grid .service-accordion__heading {\n pointer-events: auto !important;\n cursor: pointer !important;\n user-select: none !important;\n min-height: 62px !important;\n margin: 0 !important;\n padding: 12px 0 !important;\n display: grid !important;\n grid-template-columns: minmax(0, 1fr) 28px !important;\n gap: 14px !important;\n align-items: center !important;\n}\n\nmain > .grid .service-accordion__heading::after {\n content: \"+\" !important;\n display: flex !important;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: 1px solid var(--line);\n border-radius: 50%;\n color: var(--muted);\n font-size: var(--scale-1);\n font-weight: 300;\n line-height: 1;\n}\n\nmain > .grid .service-accordion.is-open .service-accordion__heading::after {\n content: \"\u2212\" !important;\n border-color: var(--text);\n color: var(--text);\n}\n\nmain > .grid .service-accordion__heading:focus-visible {\n outline: 2px solid var(--text) !important;\n outline-offset: 3px !important;\n}\n\nmain > .grid .service-accordion__content {\n display: none !important;\n max-width: 620px !important;\n padding: 0 42px 18px 0 !important;\n}\n\nmain > .grid .service-accordion.is-open .service-accordion__content {\n display: block !important;\n}\n\n\/* Stronger, still minimal progress feedback *\/\nbody .contact-form .builder-progress {\n height: 3px !important;\n border-radius: 999px;\n}\n\nbody .contact-form .builder-progress-bar {\n border-radius: inherit;\n}\n\n\/* Fitts: never shrink primary form controls below an accessible touch target *\/\nbody .contact-form .builder-option,\nbody .contact-form .builder-nav,\nbody .contact-form .wpcf7-submit {\n min-height: 44px !important;\n height: auto !important;\n}\n\n\/* Peak-end success state *\/\nbody .contact-form .message-builder.is-sent > :not(.builder-success) {\n display: none !important;\n}\n\n.builder-success {\n min-height: 280px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n padding: clamp(18px, 3vw, 30px);\n border: 1px solid var(--text);\n border-radius: 20px;\n outline: none;\n}\n\n.builder-success__eyebrow {\n color: var(--muted);\n font-size: var(--scale-minus-1);\n letter-spacing: .14em;\n text-transform: uppercase;\n}\n\n.builder-success h3 {\n max-width: 520px;\n margin: 20px 0 0;\n font-family: var(--serif);\n font-size: var(--scale-5);\n font-weight: 400;\n line-height: 1;\n letter-spacing: -.055em;\n}\n\n.builder-success p {\n max-width: 480px;\n margin: 18px 0 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.6;\n}\n\n.builder-success__reset {\n min-height: 44px;\n margin-top: 26px;\n padding: 10px 18px;\n border: 1px solid var(--line);\n border-radius: 999px;\n background: transparent;\n color: var(--text);\n font: 500 11px\/1.2 var(--sans);\n cursor: pointer;\n}\n\n.builder-success__reset:hover,\n.builder-success__reset:focus-visible {\n border-color: var(--text);\n outline: none;\n}\n\n\/* Keep carousel arrow targets comfortable *\/\nbody .works-loop__arrow,\nbody .websites__arrow,\nbody .clients__arrow,\nbody .testimonial-side-arrow {\n min-width: 44px !important;\n min-height: 44px !important;\n}\n\n\/* Focus should be as clear as hover *\/\na:focus-visible,\nbutton:focus-visible,\nsummary:focus-visible {\n outline: 2px solid var(--text);\n outline-offset: 3px;\n}\n\n@media (max-width: 720px) {\n :root {\n --ux-nav-height: 62px;\n }\n\n body .page main {\n padding-top: calc(var(--ux-nav-height) + 28px) !important;\n }\n\n .ux-site-nav__brand {\n display: none;\n }\n\n .ux-site-nav__inner {\n justify-content: center;\n }\n\n .ux-site-nav__links {\n width: 100%;\n justify-content: space-between;\n }\n\n .ux-site-nav__link {\n flex: 1 1 auto;\n padding-inline: 10px;\n }\n\n .ux-site-nav__link--process {\n display: none;\n }\n\n .ux-site-nav__link--primary {\n flex: 0 0 auto;\n min-width: 94px;\n }\n\n .landing-hero__actions {\n margin-top: 24px;\n }\n\n main > .grid .services__accordion {\n grid-template-columns: 1fr !important;\n column-gap: 0 !important;\n }\n\n main > .grid .service-accordion__heading {\n min-height: 56px !important;\n }\n\n main > .grid .service-accordion__content {\n padding-right: 38px !important;\n }\n}\n\n@media (max-width: 520px) {\n .landing-hero__actions {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr;\n }\n\n .ux-button {\n width: 100%;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ux-site-nav__link,\n .ux-button {\n transition: none !important;\n }\n\n .ux-button:hover {\n transform: none;\n }\n}\n\n\n\n\/* =========================================================\n MOTION-MINIMAL-STYLE NAV + PRICING CAROUSEL\n Original implementation inspired by the supplied reference.\n ========================================================= *\/\n\n:root {\n --ux-nav-height: 92px;\n --motion-nav-panel: #DCDEE2;\n --motion-nav-bar: #000051;\n --motion-nav-bar-text: #fff;\n --motion-nav-panel-text: #000029;\n --motion-nav-panel-muted: #BABABA;\n --motion-nav-panel-line: #DCDEE2;\n}\n\nbody {\n transition: background-color .28s ease, color .28s ease;\n}\n\nbody.is-dark {\n --bg: #000029;\n --text: #fff;\n --muted: #BABABA;\n --soft: #000051;\n --line: #BABABA;\n --logo-gray: #BABABA;\n --motion-nav-panel: #000051;\n --motion-nav-bar: #fff;\n --motion-nav-bar-text: #000029;\n --motion-nav-panel-text: #fff;\n --motion-nav-panel-muted: #BABABA;\n --motion-nav-panel-line: #BABABA;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n#o-mnie,\n#cennik,\n#faq {\n scroll-margin-top: calc(var(--ux-nav-height) + 20px);\n}\n\n\/* Old static nav is superseded by the expandable nav. *\/\n.ux-site-nav {\n display: none !important;\n}\n\n.motion-nav {\n position: fixed;\n z-index: 5000;\n top: 14px;\n left: 50%;\n width: min(420px, calc(100vw - 28px));\n transform: translateX(-50%);\n pointer-events: none;\n}\n\n.motion-nav__shell {\n width: 100%;\n padding: 8px;\n border-radius: 30px;\n background: var(--motion-nav-panel);\n box-shadow: none;\n color: var(--motion-nav-panel-text);\n pointer-events: auto;\n transition: background-color .28s ease, box-shadow .28s ease;\n}\n\n.motion-nav__bar {\n min-height: 58px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n padding: 0 14px 0 18px;\n border-radius: 22px;\n background: var(--motion-nav-bar);\n color: var(--motion-nav-bar-text);\n}\n\n.motion-nav__menu-button,\n.motion-nav__theme {\n appearance: none;\n -webkit-appearance: none;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n\n.motion-nav__menu-button {\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 0 4px;\n font-size: var(--scale-0);\n font-weight: 500;\n letter-spacing: -.02em;\n}\n\n.motion-nav__menu-icon {\n position: relative;\n width: 22px;\n height: 22px;\n display: inline-block;\n}\n\n.motion-nav__menu-icon span {\n position: absolute;\n left: 1px;\n width: 20px;\n height: 1.5px;\n border-radius: 99px;\n background: currentColor;\n transition: top .26s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1);\n}\n\n.motion-nav__menu-icon span:first-child { top: 8px; }\n.motion-nav__menu-icon span:last-child { top: 14px; }\n\n.motion-nav.is-open .motion-nav__menu-icon span:first-child {\n top: 11px;\n transform: rotate(45deg);\n}\n\n.motion-nav.is-open .motion-nav__menu-icon span:last-child {\n top: 11px;\n transform: rotate(-45deg);\n}\n\n.motion-nav__utilities {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.motion-nav__theme {\n width: 42px;\n height: 42px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #DCDEE2;\n border-radius: 50%;\n}\n\n.motion-nav__theme svg {\n width: 19px;\n height: 19px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.55;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.motion-nav__theme-moon { display: none; }\nbody.is-dark .motion-nav__theme-sun { display: none; }\nbody.is-dark .motion-nav__theme-moon { display: block; }\n\n.motion-nav__clock {\n min-width: 51px;\n color: #000051;\n font-size: var(--scale-0);\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n letter-spacing: -.02em;\n}\n\nbody.is-dark .motion-nav__clock {\n color: #000051;\n}\n\n.motion-nav__drawer {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows .42s cubic-bezier(.2,.75,.2,1);\n}\n\n.motion-nav.is-open .motion-nav__drawer {\n grid-template-rows: 1fr;\n}\n\n.motion-nav__drawer-inner {\n min-height: 0;\n overflow: hidden;\n}\n\n.motion-nav__content {\n padding: 26px 22px 18px;\n opacity: 0;\n transform: translateY(-10px);\n pointer-events: none;\n transition: opacity .24s ease, transform .34s cubic-bezier(.2,.75,.2,1);\n}\n\n.motion-nav.is-open .motion-nav__content {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n transition-delay: .08s;\n}\n\n.motion-nav__eyebrow {\n margin: 0 0 10px;\n color: var(--motion-nav-panel-muted);\n font-size: var(--scale-minus-1);\n line-height: 1.3;\n}\n\n.motion-nav__links {\n display: grid;\n}\n\n.motion-nav__links a {\n min-height: 40px;\n display: flex;\n align-items: center;\n color: var(--motion-nav-panel-text);\n font-size: var(--scale-1);\n font-weight: 500;\n line-height: 1.1;\n letter-spacing: -.04em;\n text-decoration: none;\n transition: opacity .16s ease, transform .16s ease;\n}\n\n.motion-nav__links a:hover,\n.motion-nav__links a:focus-visible {\n opacity: .48;\n transform: translateX(4px);\n outline: none;\n}\n\n.motion-nav__divider {\n height: 1px;\n margin: 20px 0 24px;\n background: var(--motion-nav-panel-line);\n}\n\n.motion-nav__bottom {\n display: flex;\n align-items: end;\n justify-content: space-between;\n gap: 20px;\n}\n\n.motion-nav__socials {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.motion-nav__socials a {\n width: 40px;\n height: 40px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n color: var(--motion-nav-panel-text);\n}\n\n.motion-nav__socials a:hover,\n.motion-nav__socials a:focus-visible {\n background: var(--motion-nav-panel-line);\n outline: none;\n}\n\n.motion-nav__socials svg {\n width: 17px;\n height: 17px;\n fill: currentColor;\n}\n\n.motion-nav__contact {\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 0 14px;\n border: 1px solid var(--motion-nav-panel-line);\n border-radius: 999px;\n color: var(--motion-nav-panel-text);\n font-size: var(--scale-minus-1);\n font-weight: 600;\n text-decoration: none;\n white-space: nowrap;\n}\n\n.motion-nav__contact:hover,\n.motion-nav__contact:focus-visible {\n border-color: var(--motion-nav-panel-text);\n outline: none;\n}\n\n\/* Pricing *\/\n.pricing-section {\n width: 100%;\n margin-top: clamp(64px, 8vw, 118px);\n padding-top: 28px;\n border-top: 1px solid var(--line);\n overflow: hidden;\n}\n\n.pricing-section__header {\n display: grid;\n grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);\n gap: clamp(42px, 8vw, 120px);\n align-items: end;\n margin-bottom: clamp(34px, 4.5vw, 60px);\n}\n\n.pricing-section__header .section-title {\n margin-bottom: 26px;\n}\n\n.pricing-section__header .editorial-title {\n max-width: 820px;\n}\n\n.pricing-section__meta {\n display: grid;\n gap: 24px;\n}\n\n.pricing-section__meta > p {\n max-width: 390px;\n margin: 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.65;\n}\n\n.pricing-carousel__controls {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.pricing-carousel__arrow {\n appearance: none;\n -webkit-appearance: none;\n width: 46px;\n height: 46px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font: 18px\/1 var(--sans);\n cursor: pointer;\n transition: background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;\n}\n\n.pricing-carousel__arrow:hover,\n.pricing-carousel__arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n}\n\n.pricing-carousel__arrow:disabled {\n opacity: .28;\n cursor: default;\n}\n\n.pricing-carousel__viewport {\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n overscroll-behavior-inline: contain;\n scroll-snap-type: x mandatory;\n -webkit-overflow-scrolling: touch;\n}\n\n.pricing-carousel__viewport::-webkit-scrollbar {\n display: none;\n}\n\n.pricing-carousel__track {\n display: flex;\n width: max-content;\n gap: clamp(12px, 1.3vw, 18px);\n padding: 1px var(--page-x) 4px 0;\n}\n\n.pricing-card {\n position: relative;\n flex: 0 0 clamp(292px, 28vw, 390px);\n width: clamp(292px, 28vw, 390px);\n min-height: 490px;\n display: flex;\n flex-direction: column;\n padding: clamp(22px, 2.5vw, 32px);\n border: 1px solid var(--line);\n border-radius: 24px;\n background: var(--bg);\n color: var(--text);\n scroll-snap-align: start;\n scroll-snap-stop: always;\n transition: transform .18s ease, border-color .18s ease;\n}\n\n.pricing-card:hover {\n transform: translateY(-3px);\n border-color: var(--text);\n}\n\n.pricing-card--featured {\n background: var(--text);\n color: var(--bg);\n border-color: var(--text);\n}\n\n.pricing-card__index {\n display: block;\n margin-bottom: clamp(52px, 6vw, 86px);\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 600;\n letter-spacing: .1em;\n}\n\n.pricing-card--featured .pricing-card__index {\n color: #BABABA;\n}\n\n.pricing-card__badge {\n position: absolute;\n top: 22px;\n right: 22px;\n min-height: 28px;\n display: inline-flex;\n align-items: center;\n padding: 0 11px;\n border: 1px solid #BABABA;\n border-radius: 999px;\n color: #DCDEE2;\n font-size: var(--scale-minus-1);\n letter-spacing: .09em;\n text-transform: uppercase;\n}\n\n.pricing-card__head {\n min-height: 166px;\n}\n\n.pricing-card__kicker {\n margin: 0 0 10px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n letter-spacing: .11em;\n text-transform: uppercase;\n}\n\n.pricing-card--featured .pricing-card__kicker {\n color: #BABABA;\n}\n\n.pricing-card h3 {\n margin: 0;\n font-family: var(--serif);\n font-size: var(--scale-5);\n font-weight: 400;\n line-height: .98;\n letter-spacing: -.055em;\n}\n\n.pricing-card__price {\n margin: 24px 0 0;\n font-size: var(--scale-3);\n font-weight: 600;\n line-height: 1;\n letter-spacing: -.04em;\n}\n\n.pricing-card__unit {\n margin: 7px 0 0;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.4;\n}\n\n.pricing-card--featured .pricing-card__unit {\n color: #BABABA;\n}\n\n.pricing-card ul {\n margin: 28px 0 28px;\n padding: 18px 0 0;\n list-style: none;\n border-top: 1px solid var(--line);\n}\n\n.pricing-card--featured ul {\n border-top-color: #BABABA;\n}\n\n.pricing-card li {\n position: relative;\n margin: 0;\n padding: 7px 0 7px 16px;\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.5;\n}\n\n.pricing-card li::before {\n content: \"\u00b7\";\n position: absolute;\n left: 1px;\n}\n\n.pricing-card--featured li {\n color: #BABABA;\n}\n\n.pricing-card > a {\n min-height: 44px;\n margin-top: auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n padding: 0 14px;\n border-top: 1px solid var(--line);\n color: inherit;\n font-size: var(--scale-minus-1);\n font-weight: 600;\n text-decoration: none;\n}\n\n.pricing-card--featured > a {\n border-top-color: #BABABA;\n}\n\n.pricing-card > a span {\n transition: transform .16s ease;\n}\n\n.pricing-card > a:hover span,\n.pricing-card > a:focus-visible span {\n transform: translate(3px, 3px);\n}\n\n.pricing-card > a:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 4px;\n}\n\n.pricing-section__note {\n max-width: 780px;\n margin: 22px 0 0;\n color: var(--soft);\n font-size: var(--scale-minus-1);\n line-height: 1.55;\n}\n\n@media (max-width: 900px) {\n .pricing-section__header {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n .pricing-section__meta {\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: end;\n }\n}\n\n@media (max-width: 720px) {\n :root {\n --ux-nav-height: 86px;\n }\n\n .motion-nav {\n top: 8px;\n width: calc(100vw - 16px);\n }\n\n .motion-nav__shell {\n padding: 8px;\n border-radius: 26px;\n }\n\n .motion-nav__bar {\n min-height: 56px;\n border-radius: 20px;\n }\n\n .motion-nav__content {\n max-height: calc(100svh - 92px);\n overflow-y: auto;\n padding: 24px 20px 18px;\n }\n\n .motion-nav__links a {\n min-height: 39px;\n font-size: var(--scale-1);\n }\n\n .motion-nav__bottom {\n align-items: start;\n flex-direction: column;\n }\n\n .pricing-section {\n margin-top: 58px;\n padding-top: 24px;\n }\n\n .pricing-section__meta {\n grid-template-columns: 1fr;\n }\n\n .pricing-card {\n flex-basis: min(82vw, 330px);\n width: min(82vw, 330px);\n min-height: 455px;\n border-radius: 22px;\n }\n\n .pricing-card__index {\n margin-bottom: 48px;\n }\n\n .pricing-carousel__track {\n padding-right: 18px;\n }\n}\n\n@media (max-width: 420px) {\n .motion-nav__bar {\n padding-left: 14px;\n padding-right: 10px;\n }\n\n .motion-nav__utilities {\n gap: 10px;\n }\n\n .motion-nav__clock {\n min-width: 47px;\n font-size: var(--scale-0);\n }\n\n .motion-nav__theme {\n width: 40px;\n height: 40px;\n }\n\n .motion-nav__contact {\n width: 100%;\n justify-content: space-between;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n html { scroll-behavior: auto; }\n\n body,\n .motion-nav__shell,\n .motion-nav__drawer,\n .motion-nav__content,\n .motion-nav__menu-icon span,\n .motion-nav__links a,\n .pricing-card,\n .pricing-card > a span {\n transition: none !important;\n }\n}\n\n\n\/* =========================================================\n FINAL UI SYSTEM - Inter \/ 8px rhythm \/ liquid glass\n ========================================================= *\/\n:root {\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-9: 96px;\n\n --type-h1: clamp(48px, 6vw, 80px);\n --type-h2: clamp(36px, 4vw, 56px);\n --type-h3: clamp(24px, 2.4vw, 32px);\n --type-h4: clamp(20px, 1.8vw, 24px);\n --type-h5: clamp(16px, 1.35vw, 18px);\n\n --radius-sm: 12px;\n --radius-md: 20px;\n --radius-pill: 999px;\n}\n\nhtml,\nbody,\nbutton,\ninput,\ntextarea,\nselect {\n font-family: var(--inter) !important;\n}\n\nh1, h2, h3, h4, h5,\n.landing-hero__title,\n.editorial-title,\n.project-contact__title,\n.pricing-card h3,\n.builder-success h3 {\n font-family: var(--inter) !important;\n font-style: normal;\n text-wrap: balance;\n}\n\nh1,\n.landing-hero__title {\n font-size: var(--type-h1) !important;\n line-height: 1.02 !important;\n letter-spacing: -.055em !important;\n font-weight: 600 !important;\n}\n\nh1 span,\n.landing-hero__title span,\n.project-contact__title span {\n font-family: inherit !important;\n font-style: normal !important;\n font-weight: inherit !important;\n letter-spacing: inherit !important;\n}\n\nh2,\n.editorial-title,\n.project-contact__title {\n font-size: var(--type-h2) !important;\n line-height: 1.08 !important;\n letter-spacing: -.045em !important;\n font-weight: 600 !important;\n}\n\nh3,\n.pricing-card h3,\n.process-step h3,\n.problem-card h3,\n.builder-success h3 {\n font-size: var(--type-h3) !important;\n line-height: 1.16 !important;\n letter-spacing: -.035em !important;\n font-weight: 600 !important;\n}\n\nh4 {\n font-size: var(--type-h4) !important;\n line-height: 1.25 !important;\n letter-spacing: -.025em !important;\n font-weight: 600 !important;\n}\n\nh5 {\n font-size: var(--type-h5) !important;\n line-height: 1.35 !important;\n letter-spacing: -.015em !important;\n font-weight: 600 !important;\n}\n\n\/* Liquid glass: no solid panel\/bar fill, only blur + translucent highlight. *\/\n.motion-nav {\n top: var(--space-3);\n width: min(424px, calc(100vw - 24px));\n}\n\n.motion-nav__shell {\n padding: var(--space-2);\n border: 1px solid #BABABA;\n border-radius: 28px;\n background: #BABABA !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n box-shadow: none;\n color: var(--text) !important;\n}\n\n.motion-nav__bar {\n min-height: 56px;\n padding: 0 var(--space-4);\n border: 0;\n border-radius: 20px;\n background: transparent !important;\n color: var(--text) !important;\n}\n\n.motion-nav__utilities {\n gap: var(--space-3);\n}\n\n.motion-nav__clock {\n color: var(--muted) !important;\n font-size: var(--scale-minus-1);\n font-weight: 600;\n}\n\n.motion-nav__content {\n padding: var(--space-5) var(--space-4) var(--space-4);\n}\n\n.motion-nav__links {\n gap: var(--space-1);\n}\n\n.motion-nav__links a {\n min-height: 44px;\n color: var(--text) !important;\n font-size: var(--scale-1);\n line-height: 1.2;\n letter-spacing: -.025em;\n}\n\n.motion-nav__divider {\n margin: var(--space-5) 0;\n background: var(--line);\n}\n\n.motion-nav__bottom {\n gap: var(--space-5);\n}\n\n.motion-nav__eyebrow,\n.motion-nav__socials a,\n.motion-nav__contact {\n color: var(--text) !important;\n}\n\n.motion-nav__contact {\n border-color: var(--line);\n}\n\n\/* Vertical rhythm *\/\n.landing-hero {\n gap: clamp(var(--space-7), 8vw, var(--space-9));\n padding: var(--space-6) 0 clamp(var(--space-8), 9vw, 112px);\n}\n\n.landing-hero__copy .section-title {\n margin-bottom: var(--space-5);\n}\n\n.landing-hero__lead {\n margin-top: var(--space-6);\n}\n\n.landing-hero__lead--secondary {\n margin-top: var(--space-4);\n}\n\n.landing-hero__actions {\n margin-top: var(--space-6);\n gap: var(--space-3);\n}\n\n.landing-hero__microcopy {\n margin-top: var(--space-3);\n}\n\n.landing-hero__aside {\n padding-top: var(--space-5);\n}\n\n.landing-hero__aside-copy {\n margin: var(--space-4) 0 0;\n}\n\n.landing-hero__availability {\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: 1px solid var(--line);\n color: var(--muted);\n font-size: var(--scale-minus-1);\n line-height: 1.65;\n}\n\n.landing-hero__availability strong {\n display: block;\n margin-bottom: var(--space-2);\n color: var(--text);\n font-size: var(--scale-minus-1);\n font-weight: 600;\n line-height: 1.4;\n}\n\n.editorial-header,\n.pricing-section__header {\n gap: clamp(var(--space-6), 7vw, var(--space-9));\n margin-bottom: clamp(var(--space-6), 5vw, var(--space-8));\n}\n\n.process-section,\n.problems-section,\n.fit-section,\n.included-section,\n.faq-section,\n.pricing-section {\n margin-top: clamp(var(--space-8), 8vw, 112px);\n padding-top: var(--space-6);\n}\n\n.process-grid,\n.problem-grid,\n.included-grid {\n gap: 0;\n}\n\n.process-step,\n.problem-card,\n.included-item {\n padding: var(--space-6);\n}\n\n.process-step p,\n.problem-card p,\n.included-item span {\n margin-top: var(--space-4);\n}\n\n.editorial-list {\n margin-top: var(--space-6);\n}\n\n.editorial-list li {\n padding-top: var(--space-4);\n padding-bottom: var(--space-4);\n}\n\n.included-item--priority {\n border-color: var(--text);\n}\n\n.included-item--priority strong::after {\n content: \" \u2022 priorytet\";\n color: var(--soft);\n font-size: var(--scale-minus-1);\n font-weight: 600;\n letter-spacing: .08em;\n text-transform: uppercase;\n}\n\n.pricing-section__meta,\n.pricing-carousel__track {\n gap: var(--space-4);\n}\n\n.pricing-card {\n min-height: 470px;\n padding: var(--space-6);\n border-radius: var(--radius-md);\n}\n\n.pricing-card__index {\n margin-bottom: var(--space-8);\n}\n\n.pricing-card__head {\n min-height: 160px;\n}\n\n.pricing-card__price {\n margin-top: var(--space-5);\n}\n\n.pricing-card ul {\n margin: var(--space-5) 0;\n padding-top: var(--space-4);\n}\n\n.pricing-card li {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n}\n\n@media (max-width: 720px) {\n :root {\n --type-h1: clamp(42px, 12vw, 58px);\n --type-h2: clamp(32px, 9vw, 44px);\n --type-h3: clamp(22px, 6vw, 28px);\n }\n\n .motion-nav {\n top: var(--space-2);\n width: calc(100vw - 16px);\n }\n\n .motion-nav__content {\n padding: var(--space-5) var(--space-4) var(--space-4);\n }\n\n .landing-hero {\n gap: var(--space-7);\n padding-bottom: var(--space-8);\n }\n\n .process-step,\n .problem-card,\n .included-item,\n .pricing-card {\n padding: var(--space-5);\n }\n}\n\n\n\/* Unified palette: Black russian, Alucard night, Palatinate blue,\n Grey placidity, Baby grey; white page canvas. *\/\n:root, body, body.is-dark {\n --bg: #fff;\n --text: #000029;\n --muted: #000051;\n --soft: #000051;\n --line: #DCDEE2;\n --logo-gray: #BABABA;\n --accent: #003BF3;\n --motion-nav-panel: #fff;\n --motion-nav-bar: #000029;\n --motion-nav-bar-text: #fff;\n --motion-nav-panel-text: #000029;\n --motion-nav-panel-muted: #000051;\n --motion-nav-panel-line: #DCDEE2;\n color-scheme: light;\n}\nhtml, body, body.is-dark { background: #FCFCFD !important; color: #000029; }\n::selection { background: #003BF3; color: #fff; }\n.motion-nav__shell { background: #FCFCFD !important; border-color: #DCDEE2; }\n.motion-nav__links a:hover, .social-link:hover { color: #003BF3 !important; }\nmain > .grid .service-accordion__heading::after,\nmain > .grid .service-accordion.is-open .service-accordion__heading::after {\n content: none !important; display: none !important;\n}\nmain > .grid .service-accordion__heading .service-icon {\n width: 24px; height: 24px; display: block; justify-self: center;\n color: #003BF3; fill: none; flex-shrink: 0;\n}\nmain > .grid .service-accordion__heading:hover .service-accordion__name,\nmain > .grid .service-accordion.is-open .service-accordion__name { color: #003BF3 !important; }\nmain > .grid .service-accordion__heading:focus-visible { outline-color: #003BF3 !important; }\nbody .contact-form .builder-progress-bar { background: #003BF3 !important; }\nbody .contact-form .builder-option.is-active,\nbody .contact-form .builder-option:hover,\nbody .contact-form .builder-nav:hover,\nbody .contact-form .wpcf7-submit {\n background: #003BF3 !important; border-color: #003BF3 !important; color: #fff !important;\n}\nbody .contact-form .builder-input:focus,\nbody .contact-form .builder-textarea:focus { border-bottom-color: #003BF3 !important; }\n:where(a,button,input,textarea,select):focus-visible { outline: 2px solid #003BF3; outline-offset: 3px; }\n\n\n\/* Full-width video carousel and blue accents. *\/\nbody main > #realizacje-wideo {\n position: relative !important; left: 50% !important;\n width: 100vw !important; max-width: none !important;\n margin-left: -50vw !important; margin-right: 0 !important;\n padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important;\n border-top-color: #003BF3 !important;\n}\nbody main > #realizacje-wideo .works-loop__header { padding-inline: var(--page-x) !important; }\nbody main > #realizacje-wideo .works-loop__carousel { position: relative; display: block !important; width: 100% !important; }\nbody main > #realizacje-wideo .works-loop__viewport {\n width: 100% !important; max-width: none !important; padding: 0 !important;\n overflow-x: auto !important; overflow-y: hidden !important;\n scroll-snap-type: x mandatory !important; scrollbar-width: none !important;\n touch-action: pan-x pan-y !important;\n}\nbody main > #realizacje-wideo .works-loop__track {\n display: flex !important; width: 100% !important; gap: 0 !important;\n max-width: none !important; padding: 0 !important; transform: none !important;\n}\nbody main > #realizacje-wideo .works-loop__item {\n flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important;\n max-width: none !important; border-radius: 0 !important;\n scroll-snap-align: start !important; scroll-snap-stop: always !important;\n}\nbody main > #realizacje-wideo .works-loop__arrow {\n display: flex !important; position: absolute; top: 50%; transform: translateY(-50%);\n z-index: 10; width: 44px !important; height: 44px !important;\n background: #003BF3 !important; color: #fff !important; border-color: #003BF3 !important;\n}\nbody main > #realizacje-wideo .works-loop__arrow--prev { left: 16px; }\nbody main > #realizacje-wideo .works-loop__arrow--next { right: 16px; }\nbody .works-loop__play { z-index: 6; }\nbody .works-loop__play-icon { background: #003BF3 !important; border-color: #003BF3 !important; }\nbody .section-title, body .clients__label, body .process-step__number { color: #003BF3 !important; }\nbody .landing-hero .editorial-title, body .landing-hero h1 span { color: #003BF3 !important; }\nbody .motion-nav__toggle { background: #003BF3 !important; color: #fff !important; }\nbody .motion-nav__divider { background: #003BF3 !important; }\nbody .included-item--priority { border-color: #003BF3 !important; }\nbody .included-item--priority strong::after { color: #003BF3 !important; }\nbody .faq-item[open] summary { color: #003BF3 !important; }\nbody .website-link:hover { border-color: #003BF3 !important; }\n\n\n\/* Short hero, followed immediately by the collaboration section. *\/\nbody main > .landing-hero { display: block !important; padding-block: clamp(24px,4vw,56px) clamp(56px,7vw,96px) !important; }\nbody .landing-hero__copy { max-width: 1040px; }\nbody .landing-hero__title { max-width: 1040px; }\nbody .landing-hero__lead { max-width: 600px; margin-top: 28px; }\nbody .landing-hero__actions { margin-top: 28px; }\nbody .landing-hero .ux-button--primary { background: #003BF3 !important; border-color: #003BF3 !important; color: #fff !important; }\nbody main > .brand-focus {\n width: min(100%, var(--section-width,1240px)); margin: 0 auto clamp(64px,8vw,112px);\n padding: clamp(32px,5vw,64px) 0 0; border-top: 2px solid #003BF3;\n display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);\n gap: clamp(32px,7vw,104px); align-items: start;\n}\nbody .brand-focus__intro .section-title { margin-bottom: 24px; }\nbody .brand-focus h2 { margin: 0; font-size: var(--scale-6) !important; line-height: 1.05 !important; letter-spacing: -.05em !important; font-weight: 400; }\nbody .brand-focus h2 span { color: #003BF3; }\nbody .brand-focus__details { display: grid; gap: 28px; min-width: 0; }\nbody .brand-focus__point { padding-left: 20px; border-left: 2px solid #003BF3; }\nbody .brand-focus__point h3 { margin: 0 0 12px; font-size: var(--scale-1) !important; line-height: 1.4 !important; letter-spacing: -.02em !important; color: #000029; }\nbody .brand-focus__point p { margin: 0; color: #000051; font-size: var(--scale-0); line-height: 1.7; }\nbody .brand-focus .socials { margin: 0; padding-left: 20px; }\nbody .brand-focus .social-link { color: #003BF3; }\n@media (max-width: 760px) {\n body main > .brand-focus { grid-template-columns: 1fr; gap: 28px; }\n}\n\n\n\/* Nested corners: inner = max(0, outer - padding).\n Keep these values linked at every viewport size. *\/\nbody .motion-nav__shell {\n --nav-outer-radius: 28px;\n --nav-padding: 8px;\n --nav-inner-radius: max(0px, calc(var(--nav-outer-radius) - var(--nav-padding)));\n padding: var(--nav-padding);\n border-radius: var(--nav-outer-radius);\n}\nbody .motion-nav__bar { border-radius: var(--nav-inner-radius); }\n\nbody .contact-form .message-builder {\n --builder-padding: clamp(16px, 2.2vw, 22px);\n --builder-inner-radius: 12px;\n --builder-outer-radius: calc(var(--builder-inner-radius) + var(--builder-padding));\n padding: var(--builder-padding) !important;\n border-radius: var(--builder-outer-radius) !important;\n}\nbody .message-builder .builder-option,\nbody .message-builder .builder-nav,\nbody .message-builder .builder-submit,\nbody .message-builder .wpcf7-submit,\nbody .message-builder .builder-antirobot {\n border-radius: var(--builder-inner-radius) !important;\n}\n\nbody .websites .website-link {\n --card-outer-radius: clamp(22px, 2.5vw, 30px);\n --card-media-padding: 0px;\n --card-inner-radius: max(0px, calc(var(--card-outer-radius) - var(--card-media-padding)));\n border-radius: var(--card-outer-radius) !important;\n}\nbody .websites .website-link--preview {\n clip-path: inset(0 round var(--card-outer-radius)) !important;\n}\nbody .websites .website-link--preview > img.website-link__preview {\n border-radius: var(--card-inner-radius) !important;\n}\n@media (max-width: 760px) {\n body .motion-nav__shell { --nav-outer-radius: 26px; }\n}\n@media (max-width: 600px) {\n body .contact-form .message-builder { --builder-padding: 14px; }\n}\n\n\n\/* Modular typography: base 16px, ratio 1.25; label size uses base \/ 1.12. *\/\n:root {\n --font-base: 1rem;\n --scale-ratio: 1.25;\n --font-xs: calc(var(--font-base) \/ var(--scale-ratio));\n --font-sm: calc(var(--font-base) \/ 1.12);\n --font-md: var(--font-base);\n --font-lg: calc(var(--font-md) * var(--scale-ratio));\n --font-xl: calc(var(--font-lg) * var(--scale-ratio));\n --font-2xl: calc(var(--font-xl) * var(--scale-ratio));\n --font-3xl: calc(var(--font-2xl) * var(--scale-ratio));\n --type-base: var(--font-base);\n --type-ratio: var(--scale-ratio);\n --scale-0: var(--type-base);\n --scale-minus-1: calc(var(--scale-0) \/ var(--type-ratio));\n --scale-1: calc(var(--scale-0) * var(--type-ratio));\n --scale-2: calc(var(--scale-1) * var(--type-ratio));\n --scale-3: calc(var(--scale-2) * var(--type-ratio));\n --scale-4: calc(var(--scale-3) * var(--type-ratio));\n --scale-5: calc(var(--scale-4) * var(--type-ratio));\n --scale-6: calc(var(--scale-5) * var(--type-ratio));\n --scale-7: calc(var(--scale-6) * var(--type-ratio));\n --scale-8: calc(var(--scale-7) * var(--type-ratio));\n --scale-9: calc(var(--scale-8) * var(--type-ratio));\n --scale-10: calc(var(--scale-9) * var(--type-ratio));\n --scale-11: calc(var(--scale-10) * var(--type-ratio));\n --scale-12: calc(var(--scale-11) * var(--type-ratio));\n --type-h1: var(--font-3xl);\n --type-h2: var(--font-2xl);\n --type-h3: var(--font-xl);\n --type-h4: var(--scale-0);\n --type-h5: var(--scale-0);\n --type-body: var(--font-md);\n --type-caption: var(--font-xs);\n}\n\nhtml { font-size: 100%; }\nbody { font-size: var(--type-body); line-height: 1.5; }\nbody h1, body .landing-hero__title {\n font-size: var(--type-h1) !important; line-height: 1.2 !important;\n letter-spacing: -.03em !important;\n}\nbody h2, body .editorial-title, body .project-contact__title, body .brand-focus h2 {\n font-size: var(--type-h2) !important; line-height: 1.25 !important;\n letter-spacing: -.025em !important;\n}\nbody h3, body .brand-focus__point h3, body .process-step h3, body .problem-card h3,\nbody .builder-success h3 {\n font-size: var(--type-h3) !important; line-height: 1.3 !important;\n letter-spacing: -.015em !important;\n}\nbody h4, body h5, body h6 { font-size: var(--type-body) !important; line-height: 1.3 !important; }\nbody p, body li, body .brand-focus__point p,\nbody .landing-hero__lead, body .service-accordion__content,\nbody .faq-item__answer, body .included-item span,\nbody .builder-input, body .builder-textarea, body .builder-preview-text {\n font-size: var(--type-body) !important; line-height: 1.5 !important;\n}\nbody button, body .ux-button, body .builder-option, body .builder-nav,\nbody .contact-form .wpcf7-submit, body .motion-nav__links a {\n font-size: var(--type-body) !important; line-height: 1.3 !important;\n}\nbody .section-title, body .clients__label, body .builder-label,\nbody .builder-head, body .builder-hint, body .builder-final-note,\nbody .website-link__description, body .testimonial-role,\nbody .landing-hero__microcopy, body .motion-nav__clock,\nbody .works-loop__status {\n font-size: var(--type-caption) !important; line-height: 1.5 !important;\n}\nbody .landing-hero__title { max-width: 28ch; }\nbody .landing-hero__lead { max-width: 58ch; }\nbody .service-accordion__name { font-size: var(--scale-1) !important; line-height: 1.3 !important; }\n\n\nbody small, body .builder-hint, body .builder-final-note,\nbody .website-link__description, body .testimonial-role,\nbody .landing-hero__microcopy, body .works-loop__status {\n font-size: var(--font-xs) !important;\n line-height: 1.4 !important;\n}\nbody label, body .section-title, body .clients__label,\nbody .builder-label, body .builder-head, body .motion-nav__clock {\n font-size: var(--font-sm) !important;\n line-height: 1.4 !important;\n}\n\n\/* Principles: clear hierarchy, familiar feedback and adaptable controls. *\/\nbody .landing-hero .ux-button--primary:hover,\nbody .landing-hero .ux-button--primary:focus-visible {\n background: #000051 !important; border-color: #000051 !important;\n}\nbody .ux-button--secondary { border-color: #DCDEE2; color: #000051; }\nbody .ux-button--secondary:hover { border-color: #003BF3; color: #003BF3; background: #fff; }\nbody .motion-nav__menu-button, body .ux-button,\nbody .builder-option, body .builder-nav, body .motion-nav__links a {\n min-height: 44px; touch-action: manipulation;\n}\nbody .motion-nav__links a:hover { background: #DCDEE2; border-radius: var(--radius-sm); }\nbody :is(a,button,summary,input,textarea,select):focus-visible {\n outline: 2px solid #003BF3 !important; outline-offset: 4px !important;\n}\nbody :is(button,input):disabled { cursor: not-allowed; }\nbody .works-loop__header { display: flex !important; justify-content: space-between !important; gap: 20px; }\nbody .works-loop__position { flex-shrink: 0; color: #003BF3; font-size: var(--font-sm); font-variant-numeric: tabular-nums; }\nbody .ux-skip-link { z-index: 10000; }\nbody .ux-skip-link:focus { background: #003BF3; color: #fff; }\nbody :is(p,li,.service-accordion__content,.brand-focus__point) { overflow-wrap: break-word; }\n@media (prefers-reduced-motion: reduce) {\n html { scroll-behavior: auto !important; }\n body *, body *::before, body *::after {\n animation-duration: .01ms !important; animation-iteration-count: 1 !important;\n transition-duration: .01ms !important; scroll-behavior: auto !important;\n }\n}\n\n\n\/* Full-width gallery: every project is visible without horizontal navigation. *\/\nbody main > #realizacje-wideo .works-loop__viewport {\n overflow: visible !important; scroll-snap-type: none !important;\n touch-action: auto !important; cursor: default !important;\n}\nbody main > #realizacje-wideo .works-loop__track {\n display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n gap: 16px !important; padding: 0 var(--page-x) !important;\n width: 100% !important;\n}\nbody main > #realizacje-wideo .works-loop__item {\n width: 100% !important; min-width: 0 !important; flex: none !important;\n scroll-snap-align: none !important; aspect-ratio: 16 \/ 9 !important;\n}\n@media (max-width: 1000px) {\n body main > #realizacje-wideo .works-loop__track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }\n}\n@media (max-width: 600px) {\n body main > #realizacje-wideo .works-loop__track { grid-template-columns: minmax(0, 1fr) !important; }\n}\n\n\n\/* Buttons: action hierarchy, equal sizing, explicit interaction states. *\/\n:root { --button-height: 48px; --button-gap: 12px; }\nbody .ux-button,\nbody .contact-form .builder-nav,\nbody .contact-form .builder-option,\nbody .contact-form .wpcf7-submit,\nbody .builder-success__reset,\nbody .motion-nav__menu-button {\n min-height: var(--button-height) !important; min-width: 44px;\n padding: 12px 20px; font-size: var(--font-md) !important;\n line-height: 1.3 !important; font-weight: 500;\n text-transform: none; letter-spacing: 0;\n cursor: pointer; touch-action: manipulation;\n transition: background-color .15s ease, border-color .15s ease, color .15s ease;\n}\nbody .landing-hero__actions {\n display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--button-gap); width: min(100%, 620px); align-items: stretch;\n}\nbody .landing-hero__actions .ux-button { width: 100%; height: 100%; text-align: center; }\nbody .builder-actions, body .builder-options,\nbody .clients__controls, body .websites__controls { gap: var(--button-gap); }\n\n\/* Primary actions. *\/\nbody .landing-hero .ux-button--primary,\nbody .contact-form .builder-next,\nbody .contact-form .wpcf7-submit {\n background: #003BF3 !important; border: 1px solid #003BF3 !important; color: #fff !important;\n}\nbody .landing-hero .ux-button--primary:hover,\nbody .contact-form .builder-next:hover,\nbody .contact-form .wpcf7-submit:hover {\n background: #000051 !important; border-color: #000051 !important; color: #fff !important;\n}\n\n\/* Supporting actions and choices retain a quieter appearance. *\/\nbody .ux-button--secondary,\nbody .contact-form .builder-prev,\nbody .contact-form .builder-option,\nbody .builder-success__reset,\nbody .motion-nav__menu-button {\n background: #FCFCFD !important; border: 1px solid #BABABA !important; color: #000051 !important;\n}\nbody .ux-button--secondary:hover,\nbody .contact-form .builder-prev:hover,\nbody .contact-form .builder-option:hover,\nbody .builder-success__reset:hover,\nbody .motion-nav__menu-button:hover {\n background: #DCDEE2 !important; border-color: #000051 !important; color: #000051 !important;\n}\nbody .motion-nav__menu-button { border-radius: var(--radius-sm); }\nbody .contact-form .builder-option.is-active,\nbody .contact-form .builder-option[aria-pressed=\"true\"] {\n background: #003BF3 !important; border-color: #003BF3 !important; color: #fff !important;\n}\n\n\/* Circular controls use the same minimum target and familiar arrow symbols. *\/\nbody .clients__arrow, body .websites__arrow, body .testimonial-side-arrow {\n width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;\n display: inline-flex; align-items: center; justify-content: center;\n padding: 10px !important; border-radius: 50%;\n border: 1px solid #BABABA !important; background: #FCFCFD !important; color: #000051 !important;\n}\nbody .clients__arrow:hover, body .websites__arrow:hover, body .testimonial-side-arrow:hover {\n background: #DCDEE2 !important; border-color: #000051 !important;\n}\nbody .ux-button:active,\nbody .landing-hero .ux-button--primary:active,\nbody .contact-form .builder-nav:active,\nbody .contact-form .builder-option:active,\nbody .contact-form .wpcf7-submit:active,\nbody .builder-success__reset:active,\nbody .motion-nav__menu-button:active,\nbody .clients__arrow:active, body .websites__arrow:active, body .testimonial-side-arrow:active {\n background: #000029 !important; border-color: #000029 !important; color: #fff !important;\n}\nbody main > .grid .service-accordion__heading:active { background: #DCDEE2 !important; }\nbody .works-loop__play:active .works-loop__play-icon { background: #000029 !important; border-color: #fff !important; }\nbody .social-link:active, body .motion-nav__socials a:active { background: #DCDEE2; color: #000029 !important; }\nbody button:focus-visible, body .ux-button:focus-visible, body input[type=\"submit\"]:focus-visible {\n outline: 2px solid #003BF3 !important; outline-offset: 4px !important;\n}\nbody button:disabled,\nbody .contact-form button:disabled,\nbody .contact-form .wpcf7-submit:disabled,\nbody .clients__arrow:disabled, body .websites__arrow:disabled, body .testimonial-side-arrow:disabled {\n background: #DCDEE2 !important; border-color: #BABABA !important;\n color: #000051 !important; opacity: 1 !important; cursor: not-allowed !important;\n}\n@media (max-width: 600px) {\n body .landing-hero__actions { grid-template-columns: minmax(0, 1fr); }\n}\n@media (prefers-reduced-motion: reduce) {\n body button, body .ux-button { transition: none !important; }\n}\n\n\n\/* Visual breathing room: a concept mockup and a graphic editorial break. *\/\nbody main > .landing-hero {\n display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;\n align-items: center; gap: clamp(28px,4vw,64px) !important;\n}\nbody .creative-mockup { margin: 0; min-width: 0; }\nbody .creative-mockup img { display: block; width: 100%; height: auto; border-radius: 20px; }\nbody .creative-mockup figcaption { margin-top: 12px; color: #000051; font-size: var(--font-xs); line-height: 1.4; }\nbody .creative-interlude { width: min(100%,var(--section-width)); margin: clamp(48px,7vw,96px) auto; }\nbody .creative-interlude__art { overflow: hidden; border-radius: 24px; background: #000051; }\nbody .creative-interlude svg { display: block; width: 100%; height: auto; }\nbody .creative-interlude figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; font-size: var(--font-sm); color: #000051; }\nbody .creative-interlude figcaption span:first-child { font-weight: 600; color: #003BF3; }\nbody main > .brand-focus, body main > .process-section,\nbody main > .problems-section, body main > .fit-section,\nbody main > .included-section, body main > .testimonials { border-top: 0 !important; }\nbody .brand-focus__point { border-left: 0; padding-left: 0; }\nbody .brand-focus .socials { padding-left: 0; }\nbody .problem-card { border: 0 !important; background: #DCDEE2; border-radius: 20px; }\nbody .landing-hero__actions { grid-template-columns: minmax(0,1fr); max-width: 360px; }\n@media (max-width: 900px) {\n body main > .landing-hero { grid-template-columns: minmax(0,1fr) !important; }\n body .creative-mockup { width: min(100%,680px); margin-inline: auto; }\n body .landing-hero__actions { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 620px; }\n}\n@media (max-width: 600px) {\n body .landing-hero__actions { grid-template-columns: minmax(0,1fr); }\n body .creative-interlude figcaption { flex-direction: column; gap: 4px; }\n}\n\n\n\/* Live device mockups. Device geometry is HTML\/CSS; video occupies its screen. *\/\nbody main > .landing-hero { display:block !important; }\nbody .landing-hero__copy { max-width: 900px; }\nbody .landing-hero__actions { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; }\nbody .device-showcase { width:min(100%,var(--section-width)); margin:0 auto clamp(56px,8vw,104px); }\nbody .device-showcase--pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:72px; }\nbody .device-story {\n --device-card-pad:clamp(24px,4vw,56px); position:relative; overflow:hidden;\n background:#DCDEE2; color:#000029; border-radius:32px;\n padding:var(--device-card-pad) var(--device-card-pad) 28px;\n}\nbody .device-story__copy { max-width:640px; margin-bottom:clamp(36px,5vw,72px); }\nbody .device-story__copy h2 { color:inherit !important; margin:0 0 12px; }\nbody .device-story__copy p { color:inherit; margin:0; }\nbody .device-story--dark { background:#000051; color:#fff; }\nbody .device-story--blue { background:#003BF3; color:#fff; }\nbody .device-laptop { width:100%; max-width:1100px; margin:auto; }\nbody .device-laptop__lid {\n --bezel:clamp(8px,1.2vw,16px); --lid-radius:clamp(16px,2vw,28px);\n width:88%; margin:0 auto; padding:var(--bezel); padding-top:calc(var(--bezel) + 8px);\n position:relative; border:2px solid #BABABA; border-bottom:0;\n border-radius:var(--lid-radius) var(--lid-radius) 0 0; background:#000029;\n}\nbody .device-laptop__camera { position:absolute; top:7px; left:50%; width:5px; height:5px; border-radius:50%; background:#BABABA; }\nbody .device-story .works-loop__viewport { width:100% !important; padding:0 !important; overflow:hidden !important; cursor:default; }\nbody .device-story .works-loop__track { display:block !important; width:100% !important; padding:0 !important; transform:none !important; }\nbody .device-story .works-loop__item { width:100% !important; min-width:0 !important; aspect-ratio:16\/9; position:relative; overflow:hidden; border-radius:max(0px,calc(var(--lid-radius) - var(--bezel))) max(0px,calc(var(--lid-radius) - var(--bezel))) 0 0; }\nbody .device-laptop__base { height:clamp(12px,2vw,24px); background:#BABABA; border-radius:2px 2px 50% 50% \/ 2px 2px 100% 100%; position:relative; }\nbody .device-laptop__base span { display:block; width:16%; height:40%; margin:auto; background:#DCDEE2; border-radius:0 0 8px 8px; }\nbody .device-story__hint { margin:24px 0 0; text-align:center; font-size:var(--font-xs) !important; color:inherit; }\nbody .device-story .works-loop__play { border:0; padding:0; }\nbody .device-story .works-loop__play[hidden] { display:none !important; }\nbody .device-story .device-full-player { z-index:9 !important; }\nbody .device-close-player { display:block; min-height:44px; padding:10px 20px; margin:16px auto 0; background:#fff; color:#000029; border:1px solid #BABABA; border-radius:12px; font:inherit; cursor:pointer; }\nbody .device-close-player:active { background:#BABABA; }\n@media(max-width:900px) {\n body .device-showcase--pair { grid-template-columns:1fr; }\n}\n@media(max-width:600px) {\n body .device-story { --device-card-pad:20px; border-radius:24px; }\n body .device-story__copy { margin-bottom:32px; }\n body .device-laptop__lid { width:96%; }\n body .landing-hero__actions { grid-template-columns:1fr; }\n}\n\n\n\/* Responsive sizing supplied by the user. All values are CSS pixels\/rem. *\/\n:root {\n --font-base:1rem; --type-body:1rem; --type-caption:.875rem;\n --type-h1:2.25rem; --type-h2:1.5rem; --type-h3:1.25rem;\n --hero-size:3rem; --button-height:44px; --button-gap:8px;\n --page-x:48px; --content-gap:16px; --section-gap:32px;\n}\nbody main > section { margin-top:var(--section-gap) !important; margin-bottom:var(--section-gap) !important; }\nbody main > .landing-hero { padding-block:32px !important; }\nbody .landing-hero__title { font-size:var(--hero-size) !important; font-weight:700 !important; line-height:1.15 !important; }\nbody .landing-hero__actions { gap:8px !important; }\nbody .device-showcase--pair { gap:16px; }\nbody .device-story { --device-card-pad:16px; padding:16px !important; border-radius:24px; }\nbody .device-story__copy { margin-bottom:32px; }\nbody .device-story__copy h2 { font-weight:600 !important; }\nbody .problem-card, body .fit-card, body .included-item { padding:16px !important; }\nbody .brand-focus__details, body .builder-fields { gap:16px; }\nbody .ux-button, body .contact-form .builder-nav, body .contact-form .builder-option,\nbody .contact-form .wpcf7-submit, body .builder-success__reset, body .motion-nav__menu-button,\nbody .device-close-player {\n min-height:44px !important; padding:10px 20px !important;\n font-size:1rem !important; font-weight:500; line-height:1.3 !important;\n}\nbody .contact-form .message-builder { --builder-padding:16px; }\n@media(min-width:1440px) { :root { --page-x:64px; } }\n@media(min-width:761px) and (max-width:1100px) { :root { --page-x:32px; } }\n@media(max-width:760px) {\n :root {\n --page-x:20px; --type-body:1.0625rem; --type-h1:1.875rem;\n --type-h2:1.375rem; --type-h3:1.25rem; --hero-size:2.125rem;\n --type-caption:.875rem; --button-height:50px; --section-gap:32px;\n }\n body, body p, body li, body .brand-focus__point p,\n body .landing-hero__lead, body .service-accordion__content,\n body .faq-item__answer, body .included-item span,\n body .builder-input, body .builder-textarea, body .builder-preview-text {\n font-size:var(--type-body) !important; line-height:1.3 !important;\n }\n body .section-title, body .clients__label, body .builder-label,\n body .builder-head, body .builder-hint, body .builder-final-note,\n body .website-link__description, body .testimonial-role,\n body .device-story__hint, body .motion-nav__clock, body small {\n font-size:var(--type-caption) !important; line-height:1.4 !important;\n }\n body .ux-button, body .contact-form .builder-nav, body .contact-form .builder-option,\n body .contact-form .wpcf7-submit, body .builder-success__reset,\n body .device-close-player {\n min-height:50px !important; padding:14px 24px !important; font-size:1rem !important;\n }\n}\n@media(max-width:380px) { :root { --page-x:16px; } }\n\n\nbody h1 { font-weight:600 !important; }\nbody .landing-hero__title { font-weight:700 !important; }\nbody h2, body .brand-focus h2, body .device-story__copy h2 { font-weight:600 !important; }\nbody h3, body .brand-focus__point h3, body .process-step h3,\nbody .problem-card h3, body .builder-success h3 { font-weight:500 !important; }\nbody .device-story__external { display:table; margin:8px auto 0; padding:12px 16px; min-height:44px; color:inherit; font-size:var(--font-sm); text-underline-offset:4px; }\nbody .device-story__external:hover { text-decoration-thickness:2px; }\nbody .brand-focus__point p + p, body .device-story__copy p + p { margin-top:16px; }\n\n\/* Frosted navigation. Solid fallback keeps labels readable without blur support. *\/\nbody .motion-nav__shell {\n background: #FCFCFD !important;\n border: 1px solid rgba(220,222,226,.8);\n box-shadow: 0 8px 32px rgba(0,0,41,.10), inset 0 1px 0 rgba(255,255,255,.8);\n}\n@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n body .motion-nav__shell {\n background: rgba(255,255,255,.68) !important;\n -webkit-backdrop-filter: blur(24px) !important;\n backdrop-filter: blur(24px) !important;\n }\n body .motion-nav.is-open .motion-nav__shell { background: rgba(255,255,255,.84) !important; }\n}\nbody .motion-nav__bar { background: transparent !important; }\nbody .motion-nav__menu-button {\n background: rgba(255,255,255,.38) !important;\n border-color: rgba(186,186,186,.6) !important;\n}\nbody .motion-nav__menu-button:hover { background: rgba(220,222,226,.75) !important; }\nbody .motion-nav__menu-button:active { background: #000029 !important; color: #fff !important; }\n@media (prefers-reduced-transparency: reduce) {\n body .motion-nav__shell, body .motion-nav.is-open .motion-nav__shell {\n background: #FCFCFD !important;\n -webkit-backdrop-filter: none !important; backdrop-filter: none !important;\n }\n}\n\n\n\/* Quiet layout: whitespace replaces decorative rules. *\/\nbody main > section,\nbody main > #realizacje-wideo,\nbody main .clients, body main .panel,\nbody main .process-step, body main .faq-item,\nbody main .contact-form, body main .project-contact,\nbody main .brand-focus__point, body main .testimonial-stage {\n border:0 !important;\n}\nbody main > .grid .service-accordion { border:0 !important; }\nbody main > .grid .services__accordion { gap:8px !important; }\nbody main > .grid .service-accordion__heading { padding:12px 0 !important; }\nbody main .faq-list { display:grid; gap:8px; }\nbody main .faq-item summary { padding-top:16px; padding-bottom:16px; }\nbody main .process-step { padding:16px 16px 16px 0 !important; }\nbody main .process-grid { gap:24px; }\nbody main .editorial-header { margin-bottom:24px; }\nbody .motion-nav__divider { display:none; }\nbody main .brand-focus__details { gap:24px; }\nbody main .clients { margin-top:32px !important; padding-top:0 !important; }\n\n\n\/* Menu and contact styling restored from the supplied HTML. *\/\n#reference-menu, #kontakt {\n --bg: #f6f6f6;\n --text: #111;\n --muted: #77736c;\n --soft: #aaa49a;\n --line: rgba(17, 17, 17, .12);\n\n --serif: Georgia, \"Times New Roman\", Times, serif;\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n --inter: \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n\n --page-x: clamp(20px, 4vw, 48px);\n --main-top: clamp(72px, 10vw, 140px);\n --main-bottom: clamp(72px, 9vw, 120px);\n\n --logo-box-width: 116px;\n --logo-box-height: 38px;\n --logo-gap: clamp(24px, 3.4vw, 48px);\n --logo-gray: #96918a;\n }\n#kontakt{\n width: 100% !important;\n margin-top: clamp(64px, 8vw, 112px) !important;\n padding-top: 30px !important;\n border-top: 1px solid var(--line) !important;\n }\n#kontakt .project-contact__layout{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: clamp(48px, 9vw, 140px) !important;\n align-items: start !important;\n }\n#kontakt .project-contact__intro{\n min-width: 0 !important;\n max-width: 520px !important;\n }\n#kontakt .project-contact__intro .section-title{\n margin-bottom: 24px !important;\n }\n#kontakt .project-contact__title{\n margin: 0 !important;\n font-family: var(--serif) !important;\n font-size: clamp(38px, 5.2vw, 76px) !important;\n font-weight: 400 !important;\n line-height: .98 !important;\n letter-spacing: -.07em !important;\n }\n#kontakt .project-contact__title span{\n display: block !important;\n font-style: italic !important;\n letter-spacing: -.08em !important;\n }\n#kontakt .project-contact__copy{\n max-width: 420px !important;\n margin: 24px 0 0 !important;\n color: var(--muted) !important;\n font-size: clamp(13px, 1.05vw, 14px) !important;\n line-height: 1.68 !important;\n letter-spacing: -.01em !important;\n }\n#kontakt .contact-form{\n min-width: 0 !important;\n width: 100% !important;\n border-top: 1px solid var(--text) !important;\n padding-top: 18px !important;\n }\n#kontakt .contact-form .wpcf7{\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .wpcf7-form{\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .wpcf7-form > p:empty{\n display: none !important;\n }\n#kontakt .contact-form .message-builder > p:empty{\n display: none !important;\n }\n#kontakt .message-builder{\n width: 100% !important;\n padding: clamp(16px, 2.2vw, 22px) !important;\n border: 1px solid var(--line) !important;\n border-radius: 24px !important;\n background: var(--bg) !important;\n display: grid !important;\n gap: 18px !important;\n }\n#kontakt .builder-head{\n display: flex !important;\n justify-content: space-between !important;\n align-items: center !important;\n gap: 18px !important;\n padding-bottom: 14px !important;\n border-bottom: 1px solid var(--line) !important;\n color: var(--muted) !important;\n font-size: 9px !important;\n line-height: 1.4 !important;\n letter-spacing: .14em !important;\n text-transform: uppercase !important;\n }\n#kontakt .builder-counter{\n flex: 0 0 auto !important;\n font-variant-numeric: tabular-nums !important;\n }\n#kontakt .builder-progress{\n width: 100% !important;\n height: 1px !important;\n overflow: hidden !important;\n background: var(--line) !important;\n }\n#kontakt .builder-progress-bar{\n display: block !important;\n width: 20% !important;\n height: 100% !important;\n background: var(--text) !important;\n transition: width .22s ease !important;\n }\n#kontakt .builder-step{\n display: none !important;\n gap: 12px !important;\n }\n#kontakt .builder-step.is-active{\n display: grid !important;\n }\n#kontakt .builder-label{\n color: var(--muted) !important;\n font-size: 9px !important;\n line-height: 1.4 !important;\n letter-spacing: .14em !important;\n text-transform: uppercase !important;\n }\n#kontakt .builder-hint{\n margin: -2px 0 2px !important;\n color: var(--soft) !important;\n font-size: 11px !important;\n line-height: 1.5 !important;\n }\n#kontakt .builder-options{\n display: grid !important;\n gap: 8px !important;\n }\n#kontakt .builder-option{\n appearance: none !important;\n -webkit-appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n text-decoration: none !important;\n }\n#kontakt .builder-nav{\n appearance: none !important;\n -webkit-appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n text-decoration: none !important;\n }\n#kontakt .builder-submit{\n appearance: none !important;\n -webkit-appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n text-decoration: none !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n appearance: none !important;\n -webkit-appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n text-decoration: none !important;\n }\n#kontakt .builder-option{\n width: 100% !important;\n min-height: 44px !important;\n border: 1px solid var(--line) !important;\n border-radius: 999px !important;\n background: transparent !important;\n color: var(--text) !important;\n padding: 11px 16px !important;\n font-family: var(--sans) !important;\n font-size: 10px !important;\n line-height: 1.25 !important;\n letter-spacing: .08em !important;\n text-align: center !important;\n text-transform: uppercase !important;\n cursor: pointer !important;\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n opacity .16s ease !important;\n }\n#kontakt .builder-nav{\n width: 100% !important;\n min-height: 44px !important;\n border: 1px solid var(--line) !important;\n border-radius: 999px !important;\n background: transparent !important;\n color: var(--text) !important;\n padding: 11px 16px !important;\n font-family: var(--sans) !important;\n font-size: 10px !important;\n line-height: 1.25 !important;\n letter-spacing: .08em !important;\n text-align: center !important;\n text-transform: uppercase !important;\n cursor: pointer !important;\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n opacity .16s ease !important;\n }\n#kontakt .builder-option:hover{\n border-color: var(--text) !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n }\n#kontakt .builder-option:focus-visible{\n border-color: var(--text) !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n }\n#kontakt .builder-option.is-active{\n border-color: var(--text) !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n }\n#kontakt .builder-nav:hover{\n border-color: var(--text) !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n }\n#kontakt .builder-nav:focus-visible{\n border-color: var(--text) !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n }\n#kontakt .builder-fields{\n display: grid !important;\n gap: 16px !important;\n }\n#kontakt .builder-field{\n display: grid !important;\n gap: 7px !important;\n margin: 0 !important;\n }\n#kontakt .builder-field .wpcf7-form-control-wrap{\n display: block !important;\n width: 100% !important;\n }\n#kontakt .builder-input{\n width: 100% !important;\n margin: 0 !important;\n padding: 11px 0 !important;\n border: 0 !important;\n border-bottom: 1px solid var(--line) !important;\n border-radius: 0 !important;\n outline: 0 !important;\n background: transparent !important;\n color: var(--text) !important;\n font-family: var(--sans) !important;\n font-size: 13px !important;\n font-weight: 400 !important;\n line-height: 1.5 !important;\n letter-spacing: 0 !important;\n box-shadow: none !important;\n appearance: none !important;\n -webkit-appearance: none !important;\n transition: border-color .16s ease !important;\n }\n#kontakt .builder-textarea{\n width: 100% !important;\n margin: 0 !important;\n padding: 11px 0 !important;\n border: 0 !important;\n border-bottom: 1px solid var(--line) !important;\n border-radius: 0 !important;\n outline: 0 !important;\n background: transparent !important;\n color: var(--text) !important;\n font-family: var(--sans) !important;\n font-size: 13px !important;\n font-weight: 400 !important;\n line-height: 1.5 !important;\n letter-spacing: 0 !important;\n box-shadow: none !important;\n appearance: none !important;\n -webkit-appearance: none !important;\n transition: border-color .16s ease !important;\n }\n#kontakt .builder-preview-text{\n width: 100% !important;\n margin: 0 !important;\n padding: 11px 0 !important;\n border: 0 !important;\n border-bottom: 1px solid var(--line) !important;\n border-radius: 0 !important;\n outline: 0 !important;\n background: transparent !important;\n color: var(--text) !important;\n font-family: var(--sans) !important;\n font-size: 13px !important;\n font-weight: 400 !important;\n line-height: 1.5 !important;\n letter-spacing: 0 !important;\n box-shadow: none !important;\n appearance: none !important;\n -webkit-appearance: none !important;\n transition: border-color .16s ease !important;\n }\n#kontakt .builder-input:focus{\n border-bottom-color: var(--text) !important;\n }\n#kontakt .builder-textarea:focus{\n border-bottom-color: var(--text) !important;\n }\n#kontakt .builder-preview-text:focus{\n border-bottom-color: var(--text) !important;\n }\n#kontakt .builder-input::placeholder{\n color: var(--soft) !important;\n opacity: 1 !important;\n }\n#kontakt .builder-textarea::placeholder{\n color: var(--soft) !important;\n opacity: 1 !important;\n }\n#kontakt .builder-textarea{\n min-height: 112px !important;\n resize: vertical !important;\n }\n#kontakt .builder-preview{\n display: grid !important;\n gap: 10px !important;\n padding-top: 14px !important;\n border-top: 1px solid var(--line) !important;\n }\n#kontakt .builder-preview-text{\n min-height: 190px !important;\n resize: vertical !important;\n color: var(--muted) !important;\n font-size: 12px !important;\n line-height: 1.58 !important;\n }\n#kontakt .builder-final-note{\n color: var(--muted) !important;\n font-size: 10px !important;\n line-height: 1.5 !important;\n }\n#kontakt .builder-antirobot{\n min-height: 44px !important;\n padding: 10px 12px !important;\n border: 1px solid var(--line) !important;\n border-radius: 14px !important;\n background: transparent !important;\n transition:\n border-color .16s ease,\n background-color .16s ease !important;\n }\n#kontakt .builder-antirobot .wpcf7-form-control-wrap{\n display: block !important;\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .builder-antirobot .wpcf7-form-control{\n display: block !important;\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .builder-antirobot .wpcf7-list-item{\n display: block !important;\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .builder-antirobot label{\n display: flex !important;\n align-items: center !important;\n gap: 10px !important;\n width: 100% !important;\n color: var(--text) !important;\n font-size: 11px !important;\n line-height: 1.4 !important;\n cursor: pointer !important;\n }\n#kontakt .builder-antirobot input[type=\"checkbox\"]{\n width: 18px !important;\n height: 18px !important;\n flex: 0 0 18px !important;\n margin: 0 !important;\n accent-color: var(--text) !important;\n cursor: pointer !important;\n }\n#kontakt .message-builder.has-antirobot-confirmation .builder-antirobot{\n border-color: var(--text) !important;\n }\n#kontakt .builder-antirobot .wpcf7-not-valid-tip{\n margin-top: 7px !important;\n }\n#kontakt .builder-hidden-fields{\n display: none !important;\n }\n#kontakt .builder-captcha{\n min-height: 0 !important;\n overflow: hidden !important;\n }\n#kontakt .builder-captcha .cf-turnstile{\n max-width: 100% !important;\n }\n#kontakt .builder-captcha .wpcf7-turnstile{\n max-width: 100% !important;\n }\n#kontakt .builder-captcha [data-sitekey]{\n max-width: 100% !important;\n }\n#kontakt .builder-captcha iframe{\n max-width: 100% !important;\n }\n#kontakt .builder-actions{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n padding-top: 14px !important;\n border-top: 1px solid var(--line) !important;\n }\n#kontakt .builder-actions > p{\n display: contents !important;\n margin: 0 !important;\n }\n#kontakt .builder-submit-wrap > p{\n display: contents !important;\n margin: 0 !important;\n }\n#kontakt .builder-prev:disabled{\n opacity: .28 !important;\n pointer-events: none !important;\n }\n#kontakt .builder-submit-wrap{\n display: none !important;\n min-width: 0 !important;\n }\n#kontakt .message-builder.is-final .builder-next{\n display: none !important;\n }\n#kontakt .message-builder.is-final .builder-submit-wrap{\n display: block !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n width: 100% !important;\n min-height: 44px !important;\n margin: 0 !important;\n padding: 11px 16px !important;\n border: 1px solid var(--text) !important;\n border-radius: 999px !important;\n background: var(--text) !important;\n color: var(--bg) !important;\n font-family: var(--sans) !important;\n font-size: 10px !important;\n line-height: 1.25 !important;\n letter-spacing: .08em !important;\n text-transform: uppercase !important;\n cursor: pointer !important;\n transition:\n background-color .16s ease,\n border-color .16s ease,\n color .16s ease,\n opacity .16s ease !important;\n }\n#kontakt .contact-form .wpcf7-submit:hover{\n background: transparent !important;\n color: var(--text) !important;\n }\n#kontakt .contact-form .wpcf7-submit:focus-visible{\n background: transparent !important;\n color: var(--text) !important;\n }\n#kontakt .contact-form .wpcf7-submit:disabled{\n cursor: wait !important;\n opacity: .48 !important;\n }\n#kontakt .contact-form .wpcf7-spinner{\n position: absolute !important;\n margin: 12px 0 0 12px !important;\n }\n#kontakt .contact-form .wpcf7-not-valid-tip{\n margin-top: 6px !important;\n color: #8b3f35 !important;\n font-size: 10px !important;\n line-height: 1.45 !important;\n }\n#kontakt .contact-form .wpcf7 form .wpcf7-response-output{\n margin: 10px 0 0 !important;\n padding: 11px 13px !important;\n border: 1px solid var(--line) !important;\n border-radius: 14px !important;\n color: var(--muted) !important;\n font-size: 10px !important;\n line-height: 1.5 !important;\n }\n@media (max-width: 760px){#kontakt .project-contact__layout{\n grid-template-columns: 1fr !important;\n gap: 46px !important;\n }\n#kontakt .project-contact__intro{\n max-width: 620px !important;\n margin: 0 auto !important;\n text-align: center !important;\n }\n#kontakt .project-contact__intro .section-title{\n text-align: center !important;\n }\n#kontakt .project-contact__copy{\n margin-right: auto !important;\n margin-left: auto !important;\n }\n#kontakt .contact-form{\n max-width: 620px !important;\n margin: 0 auto !important;\n }\n}\n@media (max-width: 520px){#kontakt{\n margin-top: 52px !important;\n padding-top: 24px !important;\n }\n#kontakt .message-builder{\n padding: 14px !important;\n border-radius: 20px !important;\n }\n}\n@media (prefers-reduced-motion: reduce){#kontakt .builder-progress-bar{\n transition: none !important;\n }\n#kontakt .builder-option{\n transition: none !important;\n }\n#kontakt .builder-nav{\n transition: none !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n transition: none !important;\n }\n}\n#kontakt .builder-spam-trap{\n position: absolute !important;\n left: -10000px !important;\n top: auto !important;\n width: 1px !important;\n height: 1px !important;\n overflow: hidden !important;\n opacity: 0 !important;\n pointer-events: none !important;\n }\n#kontakt .contact-form .message-builder{\n min-height: 0 !important;\n padding: 14px !important;\n gap: 12px !important;\n }\n#kontakt .contact-form .builder-head{\n padding-bottom: 10px !important;\n }\n#kontakt .contact-form .builder-progress{\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-step{\n min-height: 0 !important;\n height: auto !important;\n }\n#kontakt .contact-form .builder-step.is-active{\n min-height: 0 !important;\n height: auto !important;\n }\n#kontakt .contact-form .builder-fields{\n min-height: 0 !important;\n height: auto !important;\n }\n#kontakt .contact-form .builder-field{\n min-height: 0 !important;\n height: auto !important;\n }\n#kontakt .contact-form .builder-step.is-active{\n gap: 9px !important;\n align-content: start !important;\n }\n#kontakt .contact-form .builder-fields{\n display: grid !important;\n gap: 10px !important;\n align-items: start !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"4\"] .builder-fields{\n grid-template-columns: 1fr !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"5\"] .builder-fields{\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n#kontakt .contact-form .builder-field{\n display: grid !important;\n align-content: start !important;\n gap: 5px !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-field br{\n display: none !important;\n }\n#kontakt .contact-form .builder-actions br{\n display: none !important;\n }\n#kontakt .contact-form .builder-forward-wrap br{\n display: none !important;\n }\n#kontakt .contact-form .builder-submit-wrap br{\n display: none !important;\n }\n#kontakt .contact-form .builder-input{\n width: 100% !important;\n height: 40px !important;\n min-height: 40px !important;\n max-height: 40px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.3 !important;\n }\n#kontakt .contact-form .builder-textarea{\n width: 100% !important;\n height: 76px !important;\n min-height: 76px !important;\n max-height: 120px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.4 !important;\n resize: vertical !important;\n }\n#kontakt .contact-form .builder-preview{\n gap: 6px !important;\n padding-top: 10px !important;\n }\n#kontakt .contact-form .builder-preview-text{\n width: 100% !important;\n height: 104px !important;\n min-height: 104px !important;\n max-height: 104px !important;\n margin: 0 !important;\n padding: 7px 0 !important;\n line-height: 1.4 !important;\n resize: none !important;\n }\n#kontakt .contact-form .builder-final-note{\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-antirobot{\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-captcha{\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-actions{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n align-items: stretch !important;\n margin: 0 !important;\n padding-top: 10px !important;\n }\n#kontakt .contact-form .builder-forward-wrap{\n display: block !important;\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-nav{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-submit-wrap{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-nav{\n min-height: 40px !important;\n height: 40px !important;\n padding: 8px 12px !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n min-height: 40px !important;\n height: 40px !important;\n padding: 8px 12px !important;\n }\n#kontakt .contact-form .builder-submit-wrap{\n display: none !important;\n }\n#kontakt .contact-form .message-builder.is-final .builder-next{\n display: none !important;\n }\n#kontakt .contact-form .message-builder.is-final .builder-submit-wrap{\n display: block !important;\n }\n#kontakt .contact-form .wpcf7-spinner{\n position: absolute !important;\n margin: 9px 0 0 8px !important;\n }\n@media (max-width: 760px){#kontakt .project-contact__layout{\n grid-template-columns: 1fr !important;\n gap: 34px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"4\"] .builder-fields{\n grid-template-columns: 1fr !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"5\"] .builder-fields{\n grid-template-columns: 1fr !important;\n }\n}\n@media (max-width: 420px){#kontakt .contact-form .message-builder{\n padding: 12px !important;\n }\n#kontakt .contact-form .builder-actions{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 6px !important;\n }\n#kontakt .contact-form .builder-nav{\n min-height: 38px !important;\n height: 38px !important;\n padding: 7px 8px !important;\n font-size: 9px !important;\n }\n#kontakt .contact-form .wpcf7-submit{\n min-height: 38px !important;\n height: 38px !important;\n padding: 7px 8px !important;\n font-size: 9px !important;\n }\n}\n#kontakt .contact-form .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 16px !important;\n row-gap: 14px !important;\n width: 100% !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 16px !important;\n row-gap: 14px !important;\n width: 100% !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 16px !important;\n row-gap: 14px !important;\n width: 100% !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 16px !important;\n row-gap: 14px !important;\n width: 100% !important;\n }\n#kontakt .contact-form .builder-option{\n width: 100% !important;\n min-width: 0 !important;\n min-height: 46px !important;\n height: auto !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-option{\n width: 100% !important;\n min-width: 0 !important;\n min-height: 46px !important;\n height: auto !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-option{\n width: 100% !important;\n min-width: 0 !important;\n min-height: 46px !important;\n height: auto !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-option{\n width: 100% !important;\n min-width: 0 !important;\n min-height: 46px !important;\n height: auto !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-actions{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 10px !important;\n }\n@media (max-width: 520px){#kontakt .contact-form .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n row-gap: 8px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n row-gap: 8px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n row-gap: 8px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n row-gap: 8px !important;\n }\n#kontakt .contact-form .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .05em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .05em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .05em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .05em !important;\n }\n#kontakt .contact-form .builder-actions{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n }\n}\n#kontakt .contact-form .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-auto-flow: row !important;\n column-gap: 18px !important;\n row-gap: 16px !important;\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-auto-flow: row !important;\n column-gap: 18px !important;\n row-gap: 16px !important;\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-auto-flow: row !important;\n column-gap: 18px !important;\n row-gap: 16px !important;\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-options{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-auto-flow: row !important;\n column-gap: 18px !important;\n row-gap: 16px !important;\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-options > p{\n display: contents !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-options > span{\n display: contents !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-options > div:not(.builder-option){\n display: contents !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-options .wpcf7-form-control-wrap{\n display: contents !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n#kontakt .contact-form .builder-options br{\n display: none !important;\n }\n#kontakt .contact-form .builder-options > p > br{\n display: none !important;\n }\n#kontakt .contact-form .builder-options > span > br{\n display: none !important;\n }\n#kontakt .contact-form .builder-options .builder-option{\n display: flex !important;\n grid-column: auto !important;\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 46px !important;\n height: auto !important;\n align-items: center !important;\n justify-content: center !important;\n margin: 0 !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-option{\n display: flex !important;\n grid-column: auto !important;\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 46px !important;\n height: auto !important;\n align-items: center !important;\n justify-content: center !important;\n margin: 0 !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-option{\n display: flex !important;\n grid-column: auto !important;\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 46px !important;\n height: auto !important;\n align-items: center !important;\n justify-content: center !important;\n margin: 0 !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-option{\n display: flex !important;\n grid-column: auto !important;\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 46px !important;\n height: auto !important;\n align-items: center !important;\n justify-content: center !important;\n margin: 0 !important;\n padding: 10px 12px !important;\n white-space: normal !important;\n overflow-wrap: anywhere !important;\n line-height: 1.25 !important;\n }\n#kontakt .contact-form .builder-actions{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 12px !important;\n width: 100% !important;\n }\n#kontakt .contact-form .builder-actions > p{\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-actions > span{\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n }\n#kontakt .contact-form .builder-forward-wrap{\n min-width: 0 !important;\n width: 100% !important;\n margin: 0 !important;\n }\n@media (max-width: 520px){#kontakt .contact-form .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 10px !important;\n row-gap: 10px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 10px !important;\n row-gap: 10px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 10px !important;\n row-gap: 10px !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-options{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 10px !important;\n row-gap: 10px !important;\n }\n#kontakt .contact-form .builder-options .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .045em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"1\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .045em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"2\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .045em !important;\n }\n#kontakt .contact-form .builder-step[data-step=\"3\"] .builder-option{\n min-height: 42px !important;\n padding: 8px 6px !important;\n font-size: 8.5px !important;\n letter-spacing: .045em !important;\n }\n#kontakt .contact-form .builder-actions{\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n column-gap: 8px !important;\n }\n}\n@media (max-width: 1100px){#reference-menu, #kontakt {\n --main-top: clamp(66px, 9vw, 104px);\n }\n}\n@media (max-width: 720px){#reference-menu, #kontakt {\n --page-x: 24px;\n --main-top: clamp(58px, 12vw, 84px);\n --main-bottom: clamp(60px, 12vw, 88px);\n }\n}\n@media (max-width: 720px){#kontakt .contact-form{\n margin-top: 46px !important;\n padding-top: 26px !important;\n }\n#kontakt .contact-form__intro{\n margin-right: auto !important;\n margin-left: auto !important;\n text-align: center !important;\n }\n}\n@media (max-width: 520px){#reference-menu, #kontakt {\n --page-x: 18px;\n --logo-box-width: 90px;\n --logo-box-height: 34px;\n --logo-gap: 18px;\n }\n}\n#kontakt .contact-form .builder-actions{\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n align-items: stretch !important;\n gap: 10px !important;\n}\n#kontakt .contact-form .builder-action-slot{\n display: flex !important;\n width: 100% !important;\n min-width: 0 !important;\n height: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n align-items: stretch !important;\n}\n#kontakt .contact-form .builder-action-slot--forward{\n position: relative !important;\n}\n#kontakt .contact-form .builder-action-slot .builder-nav{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n}\n#kontakt .contact-form .builder-action-slot .builder-submit-wrap{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n}\n#kontakt .contact-form .builder-action-slot .wpcf7-submit{\n width: 100% !important;\n min-width: 0 !important;\n margin: 0 !important;\n}\n#kontakt .contact-form .builder-action-slot .builder-nav{\n display: inline-flex !important;\n height: 40px !important;\n min-height: 40px !important;\n padding: 8px 12px !important;\n align-items: center !important;\n justify-content: center !important;\n line-height: 1 !important;\n}\n#kontakt .contact-form .builder-action-slot .wpcf7-submit{\n display: inline-flex !important;\n height: 40px !important;\n min-height: 40px !important;\n padding: 8px 12px !important;\n align-items: center !important;\n justify-content: center !important;\n line-height: 1 !important;\n}\n#kontakt .contact-form .builder-submit-wrap{\n position: relative !important;\n height: 40px !important;\n}\n#kontakt .contact-form .builder-submit-wrap > p{\n display: contents !important;\n}\n#kontakt .contact-form .builder-submit-wrap .wpcf7-spinner{\n position: absolute !important;\n top: 50% !important;\n right: 12px !important;\n left: auto !important;\n margin: 0 !important;\n transform: translateY(-50%) !important;\n pointer-events: none !important;\n}\n#kontakt .contact-form .message-builder:not(.is-final) .builder-submit-wrap{\n display: none !important;\n}\n#kontakt .contact-form .message-builder.is-final .builder-next{\n display: none !important;\n}\n#kontakt .contact-form .message-builder.is-final .builder-submit-wrap{\n display: block !important;\n}\n@media (max-width: 420px){#kontakt .contact-form .builder-actions{\n gap: 8px !important;\n }\n#kontakt .contact-form .builder-action-slot .builder-nav{\n height: 38px !important;\n min-height: 38px !important;\n }\n#kontakt .contact-form .builder-action-slot .wpcf7-submit{\n height: 38px !important;\n min-height: 38px !important;\n }\n#kontakt .contact-form .builder-submit-wrap{\n height: 38px !important;\n min-height: 38px !important;\n }\n}\n#kontakt{\n min-width: 0 !important;\n max-width: 100% !important;\n}\n#kontakt .project-contact__layout{\n min-width: 0 !important;\n max-width: 100% !important;\n}\n@media (max-width: 900px){#kontakt .project-contact__layout{\n width: 100% !important;\n grid-template-columns: minmax(0, 1fr) !important;\n }\n#kontakt{\n width: 100% !important;\n max-width: 100% !important;\n }\n#kontakt .contact-form{\n width: 100% !important;\n max-width: 100% !important;\n }\n}\n#reference-menu, #kontakt {\n --section-width: 1240px;\n}\nmain > #kontakt{\n width: min(100%, var(--section-width)) !important;\n max-width: var(--section-width) !important;\n margin-right: auto !important;\n margin-left: auto !important;\n}\nmain > #kontakt .project-contact__layout{\n width: 100% !important;\n max-width: 100% !important;\n}\n@media (max-width: 900px){main > #kontakt{\n width: 100% !important;\n max-width: 100% !important;\n }\n}\nmain > #kontakt{\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n}\nmain > #kontakt .project-contact__layout{\n width: 100% !important;\n max-width: none !important;\n}\n#reference-menu, #kontakt {\n --logo-box-width: 156px;\n --logo-box-height: 58px;\n --logo-gap: clamp(38px, 4.4vw, 66px);\n}\n@media (max-width: 720px){#reference-menu, #kontakt {\n --logo-box-width: 132px;\n --logo-box-height: 50px;\n --logo-gap: 30px;\n }\n}\n@media (max-width: 520px){#reference-menu, #kontakt {\n --logo-box-width: 120px;\n --logo-box-height: 46px;\n --logo-gap: 26px;\n }\n}\n#reference-menu, #kontakt {\n --text: #050505;\n --muted: #4a4742;\n --soft: #6d6963;\n --line: rgba(0, 0, 0, .22);\n --logo-gray: #3f3d39;\n}\n#kontakt .project-contact__title{\n color: #000 !important;\n}\n#kontakt .contact-form .message-builder{\n background: #003BF3 !important;\n border-color: #0b0b0b !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-head{\n color: rgba(246, 246, 246, .68) !important;\n}\n#kontakt .contact-form .builder-label{\n color: rgba(246, 246, 246, .68) !important;\n}\n#kontakt .contact-form .builder-hint{\n color: rgba(246, 246, 246, .52) !important;\n}\n#kontakt .contact-form .builder-final-note{\n color: rgba(246, 246, 246, .52) !important;\n}\n#kontakt .contact-form .builder-preview-text{\n color: rgba(246, 246, 246, .52) !important;\n}\n#kontakt .contact-form .builder-head{\n border-color: rgba(255, 255, 255, .18) !important;\n}\n#kontakt .contact-form .builder-preview{\n border-color: rgba(255, 255, 255, .18) !important;\n}\n#kontakt .contact-form .builder-actions{\n border-color: rgba(255, 255, 255, .18) !important;\n}\n#kontakt .contact-form .builder-progress{\n background: rgba(255, 255, 255, .18) !important;\n}\n#kontakt .contact-form .builder-progress-bar{\n background: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-option{\n border-color: rgba(255, 255, 255, .26) !important;\n color: #f6f6f6 !important;\n background: transparent !important;\n}\n#kontakt .contact-form .builder-nav{\n border-color: rgba(255, 255, 255, .26) !important;\n color: #f6f6f6 !important;\n background: transparent !important;\n}\n#kontakt .contact-form .builder-option:hover{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .builder-option:focus-visible{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .builder-option.is-active{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .builder-nav:hover{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .builder-nav:focus-visible{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .builder-input{\n border-bottom-color: rgba(255, 255, 255, .24) !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-textarea{\n border-bottom-color: rgba(255, 255, 255, .24) !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-preview-text{\n border-bottom-color: rgba(255, 255, 255, .24) !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-input:focus{\n border-bottom-color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-textarea:focus{\n border-bottom-color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-preview-text:focus{\n border-bottom-color: #f6f6f6 !important;\n}\n#kontakt .contact-form .builder-input::placeholder{\n color: rgba(246, 246, 246, .38) !important;\n}\n#kontakt .contact-form .builder-textarea::placeholder{\n color: rgba(246, 246, 246, .38) !important;\n}\n#kontakt .contact-form .builder-antirobot{\n border-color: rgba(255, 255, 255, .24) !important;\n}\n#kontakt .contact-form .builder-antirobot label{\n color: rgba(246, 246, 246, .78) !important;\n}\n#kontakt .contact-form .builder-antirobot input[type=\"checkbox\"]{\n accent-color: #f6f6f6 !important;\n}\n#kontakt .contact-form .wpcf7-submit{\n border-color: #f6f6f6 !important;\n background: #f6f6f6 !important;\n color: #050505 !important;\n}\n#kontakt .contact-form .wpcf7-submit:hover{\n background: transparent !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .wpcf7-submit:focus-visible{\n background: transparent !important;\n color: #f6f6f6 !important;\n}\n#kontakt .contact-form .wpcf7 form .wpcf7-response-output{\n border-color: rgba(255, 255, 255, .22) !important;\n color: rgba(246, 246, 246, .7) !important;\n}\n#kontakt{\n border-top-color: rgba(0, 0, 0, .24) !important;\n}\nmain > #kontakt{\n width: 100vw !important;\n max-width: none !important;\n margin-right: calc(50% - 50vw) !important;\n margin-left: calc(50% - 50vw) !important;\n padding: clamp(56px, 7vw, 96px)\n max(var(--page-x), calc((100vw - 1240px) \/ 2))\n clamp(64px, 8vw, 112px) !important;\n border-top: 0 !important;\n background: #003BF3 !important;\n color: #f6f6f6 !important;\n}\nmain > #kontakt .project-contact__layout{\n width: 100% !important;\n max-width: 1240px !important;\n margin: 0 auto !important;\n}\nmain > #kontakt .project-contact__title{\n color: #f6f6f6 !important;\n}\nmain > #kontakt .section-title{\n color: rgba(246, 246, 246, .56) !important;\n}\nmain > #kontakt .project-contact__copy{\n color: rgba(246, 246, 246, .68) !important;\n}\nmain > #kontakt .contact-form{\n border-top: 0 !important;\n padding-top: 0 !important;\n}\nmain > #kontakt .contact-form .message-builder{\n border: 0 !important;\n background: #003BF3 !important;\n}\nmain > #kontakt .contact-form .builder-head{\n border-bottom: 0 !important;\n}\n@media (max-width: 760px){main > #kontakt{\n padding-right: var(--page-x) !important;\n padding-left: var(--page-x) !important;\n }\n}\n@media (min-width: 721px){main > #kontakt .project-contact__layout{\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n }\nmain > #kontakt .project-contact__intro{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__intro .section-title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__copy{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\n}\nmain > #kontakt{\n padding-left: var(--page-x) !important;\n padding-right: var(--page-x) !important;\n}\nmain > #kontakt .project-contact__layout{\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n}\nmain > #kontakt .project-contact__intro{\n justify-self: start !important;\n margin: 0 !important;\n text-align: left !important;\n}\nmain > #kontakt .project-contact__intro .section-title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n}\nmain > #kontakt .project-contact__title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n}\nmain > #kontakt .project-contact__copy{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n}\n@media (max-width: 720px){main > #kontakt .project-contact__intro{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__intro .section-title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__title{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\nmain > #kontakt .project-contact__copy{\n margin-left: 0 !important;\n margin-right: 0 !important;\n text-align: left !important;\n }\n}\n#reference-menu, #kontakt {\n --ux-nav-height: 68px;\n}\n#kontakt .contact-form .builder-progress{\n height: 3px !important;\n border-radius: 999px !important;\n}\n#kontakt .contact-form .builder-progress-bar{\n border-radius: inherit !important;\n}\n#kontakt .contact-form .builder-option{\n min-height: 44px !important;\n height: auto !important;\n}\n#kontakt .contact-form .builder-nav{\n min-height: 44px !important;\n height: auto !important;\n}\n#kontakt .contact-form .wpcf7-submit{\n min-height: 44px !important;\n height: auto !important;\n}\n#kontakt .contact-form .message-builder.is-sent > :not(.builder-success){\n display: none !important;\n}\n#kontakt .builder-success{\n min-height: 280px !important;\n display: flex !important;\n flex-direction: column !important;\n justify-content: center !important;\n align-items: flex-start !important;\n padding: clamp(18px, 3vw, 30px) !important;\n border: 1px solid var(--text) !important;\n border-radius: 20px !important;\n outline: none !important;\n}\n#kontakt .builder-success__eyebrow{\n color: var(--muted) !important;\n font-size: 9px !important;\n letter-spacing: .14em !important;\n text-transform: uppercase !important;\n}\n#kontakt .builder-success h3{\n max-width: 520px !important;\n margin: 20px 0 0 !important;\n font-family: var(--serif) !important;\n font-size: clamp(30px, 4vw, 48px) !important;\n font-weight: 400 !important;\n line-height: 1 !important;\n letter-spacing: -.055em !important;\n}\n#kontakt .builder-success p{\n max-width: 480px !important;\n margin: 18px 0 0 !important;\n color: var(--muted) !important;\n font-size: 13px !important;\n line-height: 1.6 !important;\n}\n#kontakt .builder-success__reset{\n min-height: 44px !important;\n margin-top: 26px !important;\n padding: 10px 18px !important;\n border: 1px solid var(--line) !important;\n border-radius: 999px !important;\n background: transparent !important;\n color: var(--text) !important;\n font: 500 11px\/1.2 var(--sans) !important;\n cursor: pointer !important;\n}\n#kontakt .builder-success__reset:hover{\n border-color: var(--text) !important;\n outline: none !important;\n}\n#kontakt .builder-success__reset:focus-visible{\n border-color: var(--text) !important;\n outline: none !important;\n}\n@media (max-width: 720px){#reference-menu, #kontakt {\n --ux-nav-height: 62px;\n }\n}\n#reference-menu, #kontakt {\n --ux-nav-height: 92px;\n --motion-nav-panel: #ebe8e1;\n --motion-nav-bar: #0b0b0b;\n --motion-nav-bar-text: #f3f1ec;\n --motion-nav-panel-text: #111;\n --motion-nav-panel-muted: #9b968d;\n --motion-nav-panel-line: rgba(17, 17, 17, .10);\n}\n#reference-menu{\n position: fixed !important;\n z-index: 5000 !important;\n top: 14px !important;\n left: 50% !important;\n width: min(420px, calc(100vw - 28px)) !important;\n transform: translateX(-50%) !important;\n pointer-events: none !important;\n}\n#reference-menu .motion-nav__shell{\n width: 100% !important;\n padding: 8px !important;\n border-radius: 30px !important;\n background: var(--motion-nav-panel) !important;\n box-shadow: 0 10px 36px rgba(17, 17, 17, .08) !important;\n color: var(--motion-nav-panel-text) !important;\n pointer-events: auto !important;\n transition: background-color .28s ease, box-shadow .28s ease !important;\n}\n#reference-menu .motion-nav__bar{\n min-height: 58px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: space-between !important;\n gap: 18px !important;\n padding: 0 14px 0 18px !important;\n border-radius: 22px !important;\n background: var(--motion-nav-bar) !important;\n color: var(--motion-nav-bar-text) !important;\n}\n#reference-menu .motion-nav__menu-button{\n appearance: none !important;\n -webkit-appearance: none !important;\n border: 0 !important;\n background: transparent !important;\n color: inherit !important;\n font: inherit !important;\n cursor: pointer !important;\n}\n#reference-menu .motion-nav__theme{\n appearance: none !important;\n -webkit-appearance: none !important;\n border: 0 !important;\n background: transparent !important;\n color: inherit !important;\n font: inherit !important;\n cursor: pointer !important;\n}\n#reference-menu .motion-nav__menu-button{\n min-height: 44px !important;\n display: inline-flex !important;\n align-items: center !important;\n gap: 12px !important;\n padding: 0 4px !important;\n font-size: 16px !important;\n font-weight: 500 !important;\n letter-spacing: -.02em !important;\n}\n#reference-menu .motion-nav__menu-icon{\n position: relative !important;\n width: 22px !important;\n height: 22px !important;\n display: inline-block !important;\n}\n#reference-menu .motion-nav__menu-icon span{\n position: absolute !important;\n left: 1px !important;\n width: 20px !important;\n height: 1.5px !important;\n border-radius: 99px !important;\n background: currentColor !important;\n transition: top .26s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1) !important;\n}\n#reference-menu .motion-nav__menu-icon span:first-child{ top: 8px !important; }\n#reference-menu .motion-nav__menu-icon span:last-child{ top: 14px !important; }\n#reference-menu.is-open .motion-nav__menu-icon span:first-child{\n top: 11px !important;\n transform: rotate(45deg) !important;\n}\n#reference-menu.is-open .motion-nav__menu-icon span:last-child{\n top: 11px !important;\n transform: rotate(-45deg) !important;\n}\n#reference-menu .motion-nav__utilities{\n display: flex !important;\n align-items: center !important;\n gap: 14px !important;\n}\n#reference-menu .motion-nav__theme{\n width: 42px !important;\n height: 42px !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n border: 1px solid rgba(128, 128, 128, .38) !important;\n border-radius: 50% !important;\n}\n#reference-menu .motion-nav__theme svg{\n width: 19px !important;\n height: 19px !important;\n fill: none !important;\n stroke: currentColor !important;\n stroke-width: 1.55 !important;\n stroke-linecap: round !important;\n stroke-linejoin: round !important;\n}\n#reference-menu .motion-nav__theme-moon{ display: none !important; }\n#reference-menu body.is-dark .motion-nav__theme-sun{ display: none !important; }\n#reference-menu body.is-dark .motion-nav__theme-moon{ display: block !important; }\n#reference-menu .motion-nav__clock{\n min-width: 51px !important;\n color: #777 !important;\n font-size: 16px !important;\n font-weight: 600 !important;\n font-variant-numeric: tabular-nums !important;\n letter-spacing: -.02em !important;\n}\n#reference-menu body.is-dark .motion-nav__clock{\n color: #77736c !important;\n}\n#reference-menu .motion-nav__drawer{\n display: grid !important;\n grid-template-rows: 0fr !important;\n transition: grid-template-rows .42s cubic-bezier(.2,.75,.2,1) !important;\n}\n#reference-menu.is-open .motion-nav__drawer{\n grid-template-rows: 1fr !important;\n}\n#reference-menu .motion-nav__drawer-inner{\n min-height: 0 !important;\n overflow: hidden !important;\n}\n#reference-menu .motion-nav__content{\n padding: 26px 22px 18px !important;\n opacity: 0 !important;\n transform: translateY(-10px) !important;\n pointer-events: none !important;\n transition: opacity .24s ease, transform .34s cubic-bezier(.2,.75,.2,1) !important;\n}\n#reference-menu.is-open .motion-nav__content{\n opacity: 1 !important;\n transform: translateY(0) !important;\n pointer-events: auto !important;\n transition-delay: .08s !important;\n}\n#reference-menu .motion-nav__eyebrow{\n margin: 0 0 10px !important;\n color: var(--motion-nav-panel-muted) !important;\n font-size: 12px !important;\n line-height: 1.3 !important;\n}\n#reference-menu .motion-nav__links{\n display: grid !important;\n}\n#reference-menu .motion-nav__links a{\n min-height: 40px !important;\n display: flex !important;\n align-items: center !important;\n color: var(--motion-nav-panel-text) !important;\n font-size: 21px !important;\n font-weight: 500 !important;\n line-height: 1.1 !important;\n letter-spacing: -.04em !important;\n text-decoration: none !important;\n transition: opacity .16s ease, transform .16s ease !important;\n}\n#reference-menu .motion-nav__links a:hover{\n opacity: .48 !important;\n transform: translateX(4px) !important;\n outline: none !important;\n}\n#reference-menu .motion-nav__links a:focus-visible{\n opacity: .48 !important;\n transform: translateX(4px) !important;\n outline: none !important;\n}\n#reference-menu .motion-nav__divider{\n height: 1px !important;\n margin: 20px 0 24px !important;\n background: var(--motion-nav-panel-line) !important;\n}\n#reference-menu .motion-nav__bottom{\n display: flex !important;\n align-items: end !important;\n justify-content: space-between !important;\n gap: 20px !important;\n}\n#reference-menu .motion-nav__socials{\n display: flex !important;\n align-items: center !important;\n gap: 4px !important;\n}\n#reference-menu .motion-nav__socials a{\n width: 40px !important;\n height: 40px !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-radius: 50% !important;\n color: var(--motion-nav-panel-text) !important;\n}\n#reference-menu .motion-nav__socials a:hover{\n background: var(--motion-nav-panel-line) !important;\n outline: none !important;\n}\n#reference-menu .motion-nav__socials a:focus-visible{\n background: var(--motion-nav-panel-line) !important;\n outline: none !important;\n}\n#reference-menu .motion-nav__socials svg{\n width: 17px !important;\n height: 17px !important;\n fill: currentColor !important;\n}\n#reference-menu .motion-nav__contact{\n min-height: 44px !important;\n display: inline-flex !important;\n align-items: center !important;\n gap: 10px !important;\n padding: 0 14px !important;\n border: 1px solid var(--motion-nav-panel-line) !important;\n border-radius: 999px !important;\n color: var(--motion-nav-panel-text) !important;\n font-size: 11px !important;\n font-weight: 600 !important;\n text-decoration: none !important;\n white-space: nowrap !important;\n}\n#reference-menu .motion-nav__contact:hover{\n border-color: var(--motion-nav-panel-text) !important;\n outline: none !important;\n}\n#reference-menu .motion-nav__contact:focus-visible{\n border-color: var(--motion-nav-panel-text) !important;\n outline: none !important;\n}\n@media (max-width: 720px){#reference-menu, #kontakt {\n --ux-nav-height: 86px;\n }\n#reference-menu{\n top: 8px !important;\n width: calc(100vw - 16px) !important;\n }\n#reference-menu .motion-nav__shell{\n padding: 8px !important;\n border-radius: 26px !important;\n }\n#reference-menu .motion-nav__bar{\n min-height: 56px !important;\n border-radius: 20px !important;\n }\n#reference-menu .motion-nav__content{\n max-height: calc(100svh - 92px) !important;\n overflow-y: auto !important;\n padding: 24px 20px 18px !important;\n }\n#reference-menu .motion-nav__links a{\n min-height: 39px !important;\n font-size: 20px !important;\n }\n#reference-menu .motion-nav__bottom{\n align-items: start !important;\n flex-direction: column !important;\n }\n}\n@media (max-width: 420px){#reference-menu .motion-nav__bar{\n padding-left: 14px !important;\n padding-right: 10px !important;\n }\n#reference-menu .motion-nav__utilities{\n gap: 10px !important;\n }\n#reference-menu .motion-nav__clock{\n min-width: 47px !important;\n font-size: 15px !important;\n }\n#reference-menu .motion-nav__theme{\n width: 40px !important;\n height: 40px !important;\n }\n#reference-menu .motion-nav__contact{\n width: 100% !important;\n justify-content: space-between !important;\n }\n}\n@media (prefers-reduced-motion: reduce){#reference-menu .motion-nav__shell{\n transition: none !important;\n }\n#reference-menu .motion-nav__drawer{\n transition: none !important;\n }\n#reference-menu .motion-nav__content{\n transition: none !important;\n }\n#reference-menu .motion-nav__menu-icon span{\n transition: none !important;\n }\n#reference-menu .motion-nav__links a{\n transition: none !important;\n }\n}\n#reference-menu, #kontakt {\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-9: 96px;\n\n --type-h1: clamp(48px, 6vw, 80px);\n --type-h2: clamp(36px, 4vw, 56px);\n --type-h3: clamp(24px, 2.4vw, 32px);\n --type-h4: clamp(20px, 1.8vw, 24px);\n --type-h5: clamp(16px, 1.35vw, 18px);\n\n --radius-sm: 12px;\n --radius-md: 20px;\n --radius-pill: 999px;\n}\n#kontakt .project-contact__title{\n font-family: var(--inter) !important;\n font-style: normal !important;\n text-wrap: balance !important;\n}\n#kontakt .builder-success h3{\n font-family: var(--inter) !important;\n font-style: normal !important;\n text-wrap: balance !important;\n}\n#kontakt .project-contact__title span{\n font-family: inherit !important;\n font-style: normal !important;\n font-weight: inherit !important;\n letter-spacing: inherit !important;\n}\n#kontakt .project-contact__title{\n font-size: var(--type-h2) !important;\n line-height: 1.08 !important;\n letter-spacing: -.045em !important;\n font-weight: 600 !important;\n}\n#kontakt .builder-success h3{\n font-size: var(--type-h3) !important;\n line-height: 1.16 !important;\n letter-spacing: -.035em !important;\n font-weight: 600 !important;\n}\n#reference-menu{\n top: var(--space-3) !important;\n width: min(424px, calc(100vw - 24px)) !important;\n}\n#reference-menu .motion-nav__shell{\n padding: var(--space-2) !important;\n border: 1px solid rgba(255, 255, 255, .44) !important;\n border-radius: 28px !important;\n background: rgba(255, 255, 255, .08) !important;\n -webkit-backdrop-filter: blur(24px) saturate(180%) !important;\n backdrop-filter: blur(24px) saturate(180%) !important;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, .40),\n 0 10px 30px rgba(17, 17, 17, .07) !important;\n color: var(--text) !important;\n}\n#reference-menu .motion-nav__bar{\n min-height: 56px !important;\n padding: 0 var(--space-4) !important;\n border: 0 !important;\n border-radius: 20px !important;\n background: transparent !important;\n color: var(--text) !important;\n}\n#reference-menu .motion-nav__utilities{\n gap: var(--space-3) !important;\n}\n#reference-menu .motion-nav__clock{\n color: var(--muted) !important;\n font-size: 14px !important;\n font-weight: 600 !important;\n}\n#reference-menu .motion-nav__content{\n padding: var(--space-5) var(--space-4) var(--space-4) !important;\n}\n#reference-menu .motion-nav__links{\n gap: var(--space-1) !important;\n}\n#reference-menu .motion-nav__links a{\n min-height: 44px !important;\n color: var(--text) !important;\n font-size: 18px !important;\n line-height: 1.2 !important;\n letter-spacing: -.025em !important;\n}\n#reference-menu .motion-nav__divider{\n margin: var(--space-5) 0 !important;\n background: var(--line) !important;\n}\n#reference-menu .motion-nav__bottom{\n gap: var(--space-5) !important;\n}\n#reference-menu .motion-nav__eyebrow{\n color: var(--text) !important;\n}\n#reference-menu .motion-nav__socials a{\n color: var(--text) !important;\n}\n#reference-menu .motion-nav__contact{\n color: var(--text) !important;\n}\n#reference-menu .motion-nav__contact{\n border-color: var(--line) !important;\n}\n@media (max-width: 720px){#reference-menu, #kontakt {\n --type-h1: clamp(42px, 12vw, 58px);\n --type-h2: clamp(32px, 9vw, 44px);\n --type-h3: clamp(22px, 6vw, 28px);\n }\n#reference-menu{\n top: var(--space-2) !important;\n width: calc(100vw - 16px) !important;\n }\n#reference-menu .motion-nav__content{\n padding: var(--space-5) var(--space-4) var(--space-4) !important;\n }\n}\n\n#reference-menu { --text:#000029; --muted:#000051; --line:#DCDEE2; }\n#reference-menu .motion-nav__divider { display:block; }\n#reference-menu .motion-nav__menu-button { min-height:44px !important; }\n#reference-menu .motion-nav__shell { -webkit-backdrop-filter:blur(24px) saturate(180%) !important; backdrop-filter:blur(24px) saturate(180%) !important; }\nbody main > #kontakt { background:#003BF3 !important; }\nbody main > #kontakt .contact-form .message-builder { background:#003BF3 !important; }\n@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {\n #reference-menu .motion-nav__shell { background:#fff !important; }\n}\n\n\/* Generous section rhythm and compact service icon navigation. *\/\nbody main > section { margin-top:clamp(112px,10vw,160px) !important; margin-bottom:0 !important; }\nbody main > section#kontakt { margin-top:clamp(112px,10vw,160px) !important; margin-bottom:0 !important; }\nbody main > .landing-hero { margin-top:0 !important; }\nbody main .clients { margin-top:64px !important; }\nbody .service-strip { width:100%; min-width:0; }\nbody .service-strip__icons { display:flex; gap:16px; align-items:center; overflow-x:auto; padding:8px 4px; scrollbar-width:thin; scrollbar-color:#BABABA transparent; }\nbody .service-strip__button {\n display:flex; align-items:center; justify-content:center; flex:1 0 48px;\n min-width:48px; height:56px; padding:12px; border:0; border-radius:12px;\n background:transparent; color:#003BF3; cursor:pointer; touch-action:manipulation;\n transition:background-color .16s ease,color .16s ease;\n}\nbody .service-strip__button svg { width:28px; height:28px; flex-shrink:0; stroke:currentColor; fill:none; }\nbody .service-strip__button:hover { background:#DCDEE2; }\nbody .service-strip__button[aria-expanded=\"true\"] { background:#003BF3; color:#fff; }\nbody .service-strip__button:active { background:#000051; color:#fff; }\nbody .service-strip__button:focus-visible { outline:2px solid #003BF3; outline-offset:2px; }\nbody .service-strip__panel { padding:24px 4px 0; max-width:640px; animation:serviceReveal .18s ease; }\nbody .service-strip__panel[hidden] { display:none !important; }\nbody .service-strip__panel h3 { margin:0 0 8px; color:#003BF3; }\nbody .service-strip__panel p { margin:0; color:#000051; }\n@keyframes serviceReveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }\n@media(max-width:760px) {\n body main > section, body main > section#kontakt { margin-top:80px !important; }\n body main > .landing-hero { margin-top:0 !important; }\n body .service-strip__icons { gap:8px; }\n body main .clients { margin-top:48px !important; }\n}\n@media(prefers-reduced-motion:reduce) { body .service-strip__panel { animation:none; } }\n\n\n\/* Full-width animated hero using the established palette. *\/\n:root {\n --apple-font: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n}\n\nhtml, body, button, input, textarea, select,\nbody h1, body h2, body h3, body h4, body h5, body h6 {\n font-family: var(--apple-font) !important;\n}\n\nbody main > .landing-hero {\n position: relative !important;\n left: 50% !important;\n width: 100vw !important;\n max-width: none !important;\n min-height: min(820px, 82svh);\n margin: 0 0 clamp(112px, 10vw, 160px) -50vw !important;\n padding: clamp(136px, 15vh, 190px)\n max(var(--page-x), calc((100vw - 1240px) \/ 2))\n clamp(96px, 12vh, 144px) !important;\n display: flex !important;\n align-items: center;\n overflow: hidden;\n color: #fff !important;\n background: linear-gradient(115deg, #000029 0%, #000051 30%, #003BF3 58%, #000051 78%, #000029 100%) !important;\n background-size: 260% 260% !important;\n animation: heroGradientShift 14s ease-in-out infinite;\n isolation: isolate;\n}\n\nbody main > .landing-hero::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background-image:\n radial-gradient(circle at 12% 24%, rgba(255,255,255,.18) 0 1px, transparent 2px),\n radial-gradient(circle at 78% 68%, rgba(255,255,255,.12) 0 1px, transparent 2px);\n background-size: 48px 48px, 64px 64px;\n opacity: .55;\n}\n\nbody .landing-hero__copy {\n width: min(100%, 1180px) !important;\n max-width: 1180px !important;\n}\n\nbody .landing-hero__title {\n max-width: 12ch !important;\n margin: 0 !important;\n color: #fff !important;\n font-size: clamp(64px, 8.2vw, 124px) !important;\n font-weight: 700 !important;\n line-height: .92 !important;\n letter-spacing: -.06em !important;\n text-wrap: balance;\n}\n\nbody .landing-hero__title span {\n color: #DCDEE2 !important;\n font-family: inherit !important;\n font-style: normal !important;\n}\n\nbody .landing-hero .section-title,\nbody .landing-hero__lead {\n color: #fff !important;\n}\n\nbody .landing-hero .section-title {\n margin-bottom: 32px !important;\n opacity: .76;\n}\n\nbody .landing-hero__lead {\n max-width: 48ch !important;\n margin-top: 32px !important;\n font-size: clamp(17px, 1.35vw, 20px) !important;\n line-height: 1.5 !important;\n}\n\nbody .landing-hero__actions {\n margin-top: 40px !important;\n}\n\nbody .landing-hero .ux-button--primary {\n background: #FCFCFD !important;\n border-color: #fff !important;\n color: #000051 !important;\n}\n\nbody .landing-hero .ux-button--primary:hover,\nbody .landing-hero .ux-button--primary:focus-visible {\n background: #DCDEE2 !important;\n border-color: #DCDEE2 !important;\n color: #000029 !important;\n}\n\nbody .landing-hero .ux-button--secondary {\n background: transparent !important;\n border-color: #fff !important;\n color: #fff !important;\n}\n\nbody .landing-hero .ux-button--secondary:hover,\nbody .landing-hero .ux-button--secondary:focus-visible {\n background: #FCFCFD !important;\n color: #000051 !important;\n}\n\n@keyframes heroGradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n}\n\n@media (max-width: 760px) {\n body main > .landing-hero {\n min-height: 700px;\n margin-bottom: 80px !important;\n padding: 128px var(--page-x) 88px !important;\n }\n body .landing-hero__title {\n max-width: 10ch !important;\n font-size: clamp(48px, 14vw, 72px) !important;\n line-height: .94 !important;\n }\n body .landing-hero .section-title { margin-bottom: 24px !important; }\n body .landing-hero__lead { margin-top: 24px !important; }\n body .landing-hero__actions { margin-top: 32px !important; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body main > .landing-hero {\n animation: none !important;\n background-position: 50% 50% !important;\n }\n}\n\n\n\/* Final type hierarchy and section rhythm. Every size follows 16px \u00d7 1.25^n. *\/\n:root {\n --font-xs: 0.8rem; \/* 12.8 *\/\n --font-sm: 0.894rem; \/* 14.3 *\/\n --font-md: 1rem; \/* 16 *\/\n --font-lg: 1.25rem; \/* 20 *\/\n --font-xl: 1.5625rem; \/* 25 *\/\n --font-2xl: 1.953rem; \/* 31.25 *\/\n --font-3xl: 2.441rem; \/* 39.06 *\/\n --font-4xl: 3.052rem; \/* 48.83 *\/\n --font-5xl: 3.815rem; \/* 61.04 *\/\n --font-6xl: 4.768rem; \/* 76.29 *\/\n --font-7xl: 5.96rem; \/* 95.37 *\/\n\n --type-display: var(--font-7xl);\n --type-section: var(--font-3xl);\n --type-subsection: var(--font-xl);\n --type-card: var(--font-lg);\n --type-body: var(--font-md);\n --type-label: var(--font-sm);\n --type-caption: var(--font-xs);\n\n --section-rhythm: clamp(160px, 12vw, 208px);\n --section-header-gap: 48px;\n --content-gap: 24px;\n}\n\nhtml, body, button, input, textarea, select {\n font-family: var(--apple-font, -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif) !important;\n}\n\nbody {\n font-size: var(--type-body) !important;\n font-weight: 400;\n line-height: 1.55 !important;\n}\n\n\/* One vertical rhythm for every top-level section. *\/\nbody main > section {\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n}\nbody main > section + section {\n margin-top: var(--section-rhythm) !important;\n}\nbody main > .landing-hero {\n margin: 0 0 0 -50vw !important;\n}\nbody main > .landing-hero + section {\n margin-top: clamp(128px, 10vw, 176px) !important;\n}\nbody main > section#kontakt {\n margin-top: var(--section-rhythm) !important;\n}\n\n\/* Display: only the page-opening statement uses this size. *\/\nbody .landing-hero__title {\n font-size: var(--type-display) !important;\n font-weight: 700 !important;\n line-height: .94 !important;\n letter-spacing: -.055em !important;\n}\n\n\/* Major section headings. *\/\nbody h2,\nbody .editorial-title,\nbody .brand-focus h2,\nbody .section-title--major,\nbody main > #kontakt .project-contact__title {\n margin-top: 0;\n font-size: var(--type-section) !important;\n font-weight: 600 !important;\n line-height: 1.1 !important;\n letter-spacing: -.035em !important;\n text-transform: none !important;\n text-wrap: balance;\n}\n\n\/* Subsection titles, including the active service. *\/\nbody h3,\nbody .service-strip__panel h3 {\n font-size: var(--type-subsection) !important;\n font-weight: 600 !important;\n line-height: 1.2 !important;\n letter-spacing: -.02em !important;\n}\n\n\/* Repeated card titles are deliberately quieter than section titles. *\/\nbody .process-step h3,\nbody .brand-focus__point h3,\nbody .website-link__name,\nbody .faq-item summary {\n font-size: var(--type-card) !important;\n font-weight: 600 !important;\n line-height: 1.3 !important;\n letter-spacing: -.012em !important;\n}\n\nbody p,\nbody li,\nbody .service-strip__panel p,\nbody .service-accordion__content,\nbody .faq-item__answer,\nbody .project-contact__copy,\nbody .builder-input,\nbody .builder-textarea,\nbody .builder-preview-text {\n font-size: var(--type-body) !important;\n line-height: 1.55 !important;\n}\n\nbody .landing-hero__lead {\n font-size: var(--font-lg) !important;\n line-height: 1.5 !important;\n}\n\nbody .section-title:not(.section-title--major),\nbody .clients__label,\nbody .builder-label,\nbody .builder-head,\nbody label {\n font-size: var(--type-label) !important;\n font-weight: 600 !important;\n line-height: 1.4 !important;\n letter-spacing: .08em !important;\n}\n\nbody small,\nbody .builder-hint,\nbody .builder-final-note,\nbody .website-link__description,\nbody .testimonial-role,\nbody .works-loop__position,\nbody .works-loop__status {\n font-size: var(--type-caption) !important;\n line-height: 1.45 !important;\n}\n\n\/* Consistent internal spacing inside every section. *\/\nbody .editorial-header,\nbody .websites__header,\nbody .works-loop__header,\nbody .testimonials__header,\nbody .faq-section__intro {\n margin-bottom: var(--section-header-gap) !important;\n}\nbody .section-title--major {\n margin-bottom: var(--section-header-gap) !important;\n}\nbody .editorial-header .section-title + .editorial-title,\nbody .brand-focus__intro .section-title + h2 {\n margin-top: 24px !important;\n}\nbody .process-grid,\nbody .brand-focus__details,\nbody .faq-list {\n gap: var(--content-gap) !important;\n}\n\n@media (max-width: 900px) {\n :root {\n --type-display: var(--font-6xl);\n --section-rhythm: 144px;\n }\n}\n\n@media (max-width: 760px) {\n :root {\n --type-display: var(--font-4xl);\n --type-section: var(--font-2xl);\n --type-subsection: var(--font-lg);\n --type-card: var(--font-lg);\n --type-body: 1.0625rem;\n --section-rhythm: 112px;\n --section-header-gap: 32px;\n --content-gap: 16px;\n }\n body main > .landing-hero {\n margin-left: -50vw !important;\n }\n body main > .landing-hero + section {\n margin-top: 112px !important;\n }\n body .landing-hero__title {\n line-height: .98 !important;\n letter-spacing: -.04em !important;\n }\n body p,\n body li,\n body .service-strip__panel p,\n body .faq-item__answer,\n body .project-contact__copy {\n line-height: 1.4 !important;\n }\n}\n\n\n\n\/* Standalone interactive grid and name reveal, implemented without Framer runtime. *\/\nbody main > .landing-hero {\n background:#000029 !important;\n animation:none !important;\n isolation:isolate;\n}\nbody main > .landing-hero::after { content:none !important; display:none !important; }\nbody .interactive-hero-grid {\n display:block; position:absolute; inset:0; width:100%; height:100%;\n z-index:0; pointer-events:none;\n}\nbody .landing-hero__copy { position:relative; z-index:1; }\nbody .landing-hero__title,\nbody .landing-hero__lead { text-shadow:none; }\n.name-preloader { display:none; }\n.has-name-reveal .name-preloader {\n position:fixed; inset:0; z-index:20000;\n display:flex; align-items:center; justify-content:center;\n background:#003BF3; color:#fff; pointer-events:none;\n padding:24px; overflow:hidden;\n animation:nameRevealExit .85s cubic-bezier(.76,0,.24,1) .85s both;\n}\n.name-preloader__line { overflow:hidden; }\n.name-preloader__text {\n display:block; font-family:-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Arial,sans-serif;\n font-size:clamp(30px,7vw,104px); font-weight:600;\n line-height:1.08; letter-spacing:-.05em; text-align:center;\n animation:nameRevealText .65s cubic-bezier(.22,1,.36,1) .08s both;\n}\n@keyframes nameRevealText {\n from { transform:translateY(115%); opacity:0; }\n to { transform:translateY(0); opacity:1; }\n}\n@keyframes nameRevealExit {\n from { clip-path:inset(0 0 0 0); }\n to { clip-path:inset(0 0 100% 0); visibility:hidden; }\n}\n@media(prefers-reduced-motion:reduce) {\n .has-name-reveal .name-preloader { display:none !important; }\n}\n\n\n\/* Keep every description in the same grid cell. Hidden panels still size\n the row, reserving the tallest description at the current viewport width. *\/\nbody .service-strip__details {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n align-items: start;\n}\nbody .service-strip__details > .service-strip__panel {\n grid-area: 1 \/ 1;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n}\nbody .service-strip__details > .service-strip__panel[hidden] {\n display: block !important;\n visibility: hidden !important;\n pointer-events: none;\n animation: none;\n}\nbody .problem-card h3, body .included-item strong {\n font-size: var(--type-card) !important;\n font-weight: 600 !important;\n line-height: 1.3 !important;\n}\nbody .included-item span {\n font-size: var(--type-body) !important;\n line-height: 1.55 !important;\n}\n\n\/* Solid hero starts at the top edge, under the floating navigation. *\/\nbody, body .page { margin-top:0 !important; padding-top:0 !important; }\nbody .page > main#main-content { padding-top:0 !important; margin-top:0 !important; }\nbody main > .landing-hero {\n background:#003BF3 !important;\n background-image:none !important;\n animation:none !important;\n border:0 !important;\n border-radius:0 !important;\n margin-top:0 !important;\n}\nbody main > .landing-hero::before, body main > .landing-hero::after { display:none !important; content:none !important; }\nbody .landing-hero__title {\n max-width:1100px !important;\n font-size:clamp(28px, 8vw, 95px) !important;\n line-height:1.12 !important;\n letter-spacing:-.04em !important;\n}\nbody .landing-hero__title span { color:#fff !important; font-style:normal; font-size:inherit; letter-spacing:inherit; }\n\/* Title is completely normal before interaction. *\/\nbody .landing-hero .landing-hero__title {\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n text-wrap: balance;\n overflow: visible !important;\n}\n\nbody .landing-hero .construction-word {\n display: inline-block !important;\n white-space: nowrap;\n overflow: visible;\n}\n\n\/* Every letter keeps a stable base-font slot. The visible font sits\n absolutely on top, so changing typeface never reflows the page. *\/\nbody .landing-hero .construction-letter {\n --letter-x: 0em;\n --letter-y: 0em;\n --letter-r: 0deg;\n\n position: relative !important;\n display: inline-block !important;\n width: auto;\n height: 1em !important;\n margin: 0 .022em !important;\n padding: 0 !important;\n line-height: 1em !important;\n vertical-align: baseline !important;\n overflow: visible !important;\n\n transform:\n translate3d(var(--letter-x), var(--letter-y), 0)\n rotate(var(--letter-r)) !important;\n transform-origin: 50% 58%;\n transition: transform 240ms steps(3, end) !important;\n}\n\nbody .landing-hero .construction-letter__measure {\n position: relative;\n display: inline-block !important;\n visibility: hidden !important;\n pointer-events: none;\n white-space: pre;\n font-family: var(--apple-font) !important;\n font-weight: 700 !important;\n font-style: inherit !important;\n font-size: 1em !important;\n line-height: 1em !important;\n letter-spacing: 0 !important;\n}\n\n\/* One visible glyph only. No blur and no crossfade. *\/\nbody .landing-hero .construction-letter__face {\n position: absolute !important;\n inset: 0 !important;\n display: flex !important;\n align-items: baseline;\n justify-content: center;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n opacity: 1 !important;\n filter: none !important;\n transition: none !important;\n animation: none;\n white-space: nowrap;\n pointer-events: none;\n color: inherit !important;\n line-height: 1em !important;\n letter-spacing: 0 !important;\n}\n\n\/* Mechanical typewriter strike: disappear for one \"key hit\", switch face,\n then snap back. No scaling, no skew, no blur. *\/\n@keyframes constructionTypeStrike {\n 0% { transform: translateY(0); opacity: 1; }\n 45% { transform: translateY(.075em); opacity: 0; }\n 55% { transform: translateY(-.045em); opacity: 0; }\n 100% { transform: translateY(0); opacity: 1; }\n}\n\nbody .landing-hero .construction-letter.is-typing .construction-letter__face {\n animation: constructionTypeStrike 135ms steps(2, end) both !important;\n}\n\n\n@media(prefers-reduced-motion:reduce) {\n body .landing-hero .construction-letter { transition:none !important; }\n body .landing-hero .construction-letter__face { animation:none !important; }\n}\n\n\/* Optical size: equal lowercase height, shared baseline and stable slots. *\/\nbody .landing-hero .construction-letter__measure,\nbody .landing-hero .construction-letter__face {\n font-size:1em !important;\n font-size-adjust:0.52;\n}\nbody .landing-hero .construction-word--italic {\n font-family:Georgia, \"Times New Roman\", serif !important;\n font-weight:400 !important;\n font-style:italic !important;\n}\n<\/style>\n<!-- Embedded Lucide SVG icons. https:\/\/lucide.dev\nISC License\n\nCopyright (c) 2026 Lucide Icons and Contributors\n\nPermission to use, copy, modify, and\/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES\nWITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR\nANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN\nACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF\nOR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n\n--\n\nThe following Lucide icons are derived from the Feather project:\n\nairplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out\n\nThe MIT License (MIT) (for the icons listed above)\n\nCopyright (c) 2013-present Cole Bemis\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and\/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n-->\n\n\n<style id=\"fit-game-styles\">\n\/* Typeface pairing carried over from the second code: editorial Georgia + system UI sans. *\/\n:root {\n --serif: Georgia, \"Times New Roman\", Times, serif;\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n --apple-font: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n}\n\nhtml, body, button, input, textarea, select {\n font-family: var(--sans) !important;\n}\n\nbody h1,\nbody h2,\nbody .editorial-title,\nbody .landing-hero__title,\nbody .construction-title,\nbody main > #kontakt .project-contact__title {\n font-family: var(--serif) !important;\n font-weight: 400 !important;\n}\n\n\/* Interactive fit check *\/\nbody main > .fit-game {\n display: grid !important;\n grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr) !important;\n gap: clamp(48px, 8vw, 128px) !important;\n align-items: start !important;\n}\n\nbody .fit-game__intro {\n min-width: 0;\n max-width: 500px;\n}\n\nbody .fit-game__intro .section-title {\n margin-bottom: 24px !important;\n}\n\nbody .fit-game__intro .editorial-title {\n max-width: 480px;\n font-size: var(--type-section) !important;\n line-height: 1.02 !important;\n letter-spacing: -.045em !important;\n}\n\nbody .fit-game__lead {\n max-width: 430px;\n margin: 28px 0 0 !important;\n color: var(--muted);\n font-family: var(--sans) !important;\n font-size: var(--type-body) !important;\n line-height: 1.55 !important;\n}\n\nbody .fit-game__legend {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 28px;\n}\n\nbody .fit-game__legend span {\n padding: 8px 11px;\n border: 1px solid var(--line);\n border-radius: 999px;\n color: var(--muted);\n font-family: var(--sans);\n font-size: var(--type-caption);\n line-height: 1;\n}\n\nbody .fit-game__panel {\n min-width: 0;\n min-height: 510px;\n padding: clamp(22px, 3vw, 40px) !important;\n border: 0 !important;\n border-radius: 28px;\n background: #f6f6f6;\n display: flex;\n flex-direction: column;\n}\n\nbody .fit-game__topline {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n align-items: center;\n color: var(--muted);\n font-size: var(--type-caption);\n line-height: 1.4;\n}\n\nbody .fit-game__counter {\n color: var(--text);\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n\nbody .fit-game__microcopy {\n text-align: right;\n}\n\nbody .fit-game__progress {\n width: 100%;\n height: 2px;\n margin-top: 16px;\n overflow: hidden;\n background: rgba(0, 0, 41, .12);\n}\n\nbody .fit-game__progress span {\n display: block;\n width: 10%;\n height: 100%;\n background: #003BF3;\n transform-origin: left center;\n transition: width .32s cubic-bezier(.22, 1, .36, 1);\n}\n\nbody .fit-game__question,\nbody .fit-game__result {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: clamp(36px, 5vw, 70px) 0 clamp(28px, 4vw, 52px);\n}\n\nbody .fit-game__question[hidden],\nbody .fit-game__result[hidden] {\n display: none !important;\n}\n\nbody .fit-game__kind {\n margin: 0 0 14px !important;\n color: #003BF3;\n font-family: var(--sans) !important;\n font-size: var(--type-caption) !important;\n font-weight: 600 !important;\n letter-spacing: .08em;\n line-height: 1.3 !important;\n text-transform: uppercase;\n}\n\nbody .fit-game__question h3,\nbody .fit-game__result h3 {\n max-width: 740px;\n margin: 0 !important;\n color: var(--text);\n font-family: var(--serif) !important;\n font-size: clamp(30px, 3.3vw, 52px) !important;\n font-weight: 400 !important;\n line-height: 1.02 !important;\n letter-spacing: -.04em !important;\n text-wrap: balance;\n}\n\nbody .fit-game__answers {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px;\n margin-top: clamp(30px, 4vw, 48px);\n}\n\nbody .fit-game__answer,\nbody .fit-game__cta,\nbody .fit-game__reset,\nbody .fit-game__back {\n appearance: none;\n -webkit-appearance: none;\n min-height: 50px;\n border-radius: 999px;\n font-family: var(--sans) !important;\n font-size: 15px !important;\n line-height: 1.2 !important;\n cursor: pointer;\n transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;\n}\n\nbody .fit-game__answer {\n width: 100%;\n padding: 13px 18px;\n border: 1px solid rgba(0, 0, 41, .18);\n background: rgba(255, 255, 255, .54);\n color: var(--text);\n text-align: left;\n}\n\nbody .fit-game__answer:hover,\nbody .fit-game__answer:focus-visible {\n border-color: var(--text);\n background: #fff;\n transform: translateY(-1px);\n}\n\nbody .fit-game__answer.is-picked {\n border-color: #003BF3;\n background: #003BF3;\n color: #fff;\n}\n\nbody .fit-game__footer {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n align-items: center;\n padding-top: 18px;\n border-top: 1px solid rgba(0, 0, 41, .10);\n}\n\nbody .fit-game__back {\n min-height: 40px;\n padding: 8px 0;\n border: 0;\n background: transparent;\n color: var(--text);\n}\n\nbody .fit-game__back:disabled {\n opacity: .28;\n cursor: default;\n}\n\nbody .fit-game__back:not(:disabled):hover,\nbody .fit-game__back:not(:disabled):focus-visible {\n transform: translateX(-2px);\n}\n\nbody .fit-game__hint {\n max-width: 360px;\n color: var(--soft);\n font-size: var(--type-caption);\n line-height: 1.4;\n text-align: right;\n}\n\nbody .fit-game__score {\n margin: 0 0 12px;\n color: #003BF3;\n font-family: var(--serif);\n font-size: clamp(64px, 9vw, 118px);\n font-weight: 400;\n line-height: .85;\n letter-spacing: -.065em;\n}\n\nbody .fit-game__result-copy {\n max-width: 650px;\n margin: 22px 0 0 !important;\n color: var(--muted);\n font-family: var(--sans) !important;\n font-size: var(--type-body) !important;\n line-height: 1.55 !important;\n}\n\nbody .fit-game__result-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 30px;\n}\n\nbody .fit-game__cta,\nbody .fit-game__reset {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 13px 22px;\n text-decoration: none;\n}\n\nbody .fit-game__cta {\n border: 1px solid #003BF3;\n background: #003BF3;\n color: #fff;\n}\n\nbody .fit-game__cta:hover,\nbody .fit-game__cta:focus-visible {\n transform: translateY(-1px);\n}\n\nbody .fit-game__reset {\n border: 1px solid rgba(0, 0, 41, .18);\n background: transparent;\n color: var(--text);\n}\n\nbody .fit-game__reset:hover,\nbody .fit-game__reset:focus-visible {\n border-color: var(--text);\n background: #fff;\n}\n\nbody .fit-game__noscript {\n grid-column: 1 \/ -1;\n padding: 18px;\n background: #f6f6f6;\n color: var(--muted);\n}\n\nbody .fit-game.is-transitioning .fit-game__question {\n animation: fitQuestionIn .32s cubic-bezier(.22, 1, .36, 1) both;\n}\n\n@keyframes fitQuestionIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 900px) {\n body main > .fit-game {\n grid-template-columns: 1fr !important;\n gap: 40px !important;\n }\n body .fit-game__intro { max-width: 680px; }\n body .fit-game__panel { min-height: 480px; }\n}\n\n@media (max-width: 600px) {\n body .fit-game__panel {\n min-height: 0;\n padding: 20px !important;\n border-radius: 22px;\n }\n body .fit-game__microcopy { display: none; }\n body .fit-game__question,\n body .fit-game__result { padding: 34px 0 28px; }\n body .fit-game__question h3,\n body .fit-game__result h3 {\n font-size: clamp(29px, 9vw, 40px) !important;\n }\n body .fit-game__answers { grid-template-columns: 1fr; }\n body .fit-game__answer { min-height: 52px; }\n body .fit-game__footer { align-items: flex-end; }\n body .fit-game__hint { max-width: 190px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .fit-game__progress span,\n body .fit-game__answer,\n body .fit-game__cta,\n body .fit-game__reset,\n body .fit-game__back { transition: none; }\n body .fit-game.is-transitioning .fit-game__question { animation: none; }\n}\n\n\/* --- Layout refresh: hero, clients, problems, included, brand-focus --- *\/\nbody main > .landing-hero {\n justify-content: center !important;\n align-items: center !important;\n text-align: center !important;\n min-height: min(860px, 90svh) !important;\n}\n\nbody .landing-hero__copy {\n margin: 0 auto !important;\n display: grid !important;\n justify-items: center !important;\n text-align: center !important;\n}\n\nbody .landing-hero__title {\n max-width: 13ch !important;\n margin-inline: auto !important;\n text-align: center !important;\n}\n\nbody .landing-hero__lead {\n margin-inline: auto !important;\n}\n\nbody .landing-hero__actions {\n justify-content: center !important;\n margin-inline: auto !important;\n}\n\nbody main > .landing-hero + .clients {\n margin-top: 0 !important;\n margin-bottom: clamp(112px, 10vw, 156px) !important;\n padding-top: 0 !important;\n border-top: 0 !important;\n}\n\nbody main > .landing-hero + .clients .clients__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n margin-bottom: 24px;\n}\n\nbody .brand-focus--editorial {\n display: grid !important;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;\n gap: clamp(40px, 7vw, 120px) !important;\n align-items: start !important;\n}\n\nbody .brand-focus--editorial .brand-focus__intro,\nbody .brand-focus--editorial .brand-focus__details {\n min-width: 0;\n}\n\nbody .brand-focus--editorial .brand-focus__lead {\n max-width: 46ch;\n margin: 28px 0 0;\n color: var(--muted);\n font-size: clamp(15px, 1.1vw, 17px);\n line-height: 1.7;\n letter-spacing: -.01em;\n}\n\nbody .brand-focus--editorial .brand-focus__details {\n display: grid !important;\n gap: clamp(22px, 2.4vw, 30px) !important;\n}\n\nbody .brand-focus--editorial .brand-focus__point {\n padding: clamp(24px, 2.6vw, 32px) !important;\n border: 1px solid var(--line) !important;\n border-radius: 28px !important;\n background: rgba(255,255,255,.72) !important;\n backdrop-filter: blur(10px);\n}\n\nbody .brand-focus--editorial .brand-focus__eyebrow {\n display: inline-block;\n margin-bottom: 18px;\n color: #003BF3;\n font-family: var(--inter);\n font-size: 11px;\n letter-spacing: .16em;\n text-transform: uppercase;\n}\n\nbody .brand-focus--editorial .brand-focus__point h3 {\n margin: 0 0 10px !important;\n}\n\nbody .brand-focus--editorial .brand-focus__point p {\n margin: 0 !important;\n}\n\nbody .brand-focus--editorial .socials { display: none !important; }\n\nbody .problems-section--cards .problem-grid {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: clamp(24px, 3vw, 40px) !important;\n border: 0 !important;\n}\n\nbody .problems-section--cards .problem-card--icon {\n display: block !important;\n padding: clamp(26px, 2.8vw, 34px) !important;\n border: 1px solid var(--line) !important;\n border-radius: 28px !important;\n background: #FCFCFD !important;\n transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease !important;\n}\n\nbody .problems-section--cards .problem-card--icon:hover,\nbody .problems-section--cards .problem-card--icon:focus-within {\n transform: translateY(-6px);\n border-color: rgba(23, 61, 237, .34) !important;\n box-shadow: 0 20px 45px rgba(0, 0, 41, .08);\n background: #fff;\n}\n\nbody .problems-section--cards .problem-card__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n margin-bottom: clamp(20px, 2.2vw, 28px);\n}\n\nbody .problems-section--cards .problem-card__icon,\nbody .included-section--cards .included-item__icon {\n width: 52px;\n height: 52px;\n border: 1px solid var(--line);\n border-radius: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #003BF3;\n background: rgba(23, 61, 237, .05);\n flex: 0 0 auto;\n}\n\nbody .problems-section--cards .problem-card__icon svg,\nbody .included-section--cards .included-item__icon svg {\n width: 22px;\n height: 22px;\n display: block;\n}\n\nbody .problems-section--cards .problem-card__no {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 46px;\n height: 46px;\n padding: 0 14px;\n border-radius: 999px;\n background: rgba(23, 61, 237, .08);\n color: #003BF3;\n font-family: var(--inter);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: .12em;\n}\n\nbody .problems-section--cards .problem-card h3 {\n margin: 0 0 14px !important;\n}\n\nbody .problems-section--cards .problem-card p {\n margin: 0 !important;\n}\n\nbody .included-section--cards .included-grid {\n display: grid !important;\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n gap: clamp(22px, 2.6vw, 34px) !important;\n}\n\nbody .included-section--cards .included-item {\n display: grid !important;\n align-content: start;\n gap: 18px;\n padding: clamp(24px, 2.4vw, 30px) !important;\n border: 1px solid var(--line) !important;\n border-radius: 28px !important;\n background: #FCFCFD !important;\n transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;\n}\n\nbody .included-section--cards .included-item:hover,\nbody .included-section--cards .included-item:focus-within {\n transform: translateY(-6px);\n border-color: rgba(23, 61, 237, .34) !important;\n box-shadow: 0 18px 40px rgba(0, 0, 41, .08);\n}\n\nbody .included-section--cards .included-item strong {\n display: block;\n margin: 0;\n}\n\nbody .included-section--cards .included-item span:last-child {\n display: block;\n margin: 0;\n}\n\nbody .included-section--cards .included-item--priority {\n grid-column: span 2;\n}\n\n@media (max-width: 1080px) {\n body .included-section--cards .included-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n}\n\n@media (max-width: 900px) {\n body .brand-focus--editorial,\n body .problems-section--cards .problem-grid {\n grid-template-columns: 1fr !important;\n }\n}\n\n@media (max-width: 760px) {\n body main > .landing-hero {\n min-height: 720px !important;\n }\n\n body .landing-hero__actions {\n grid-template-columns: 1fr !important;\n width: min(100%, 360px);\n }\n\n body .included-section--cards .included-grid {\n grid-template-columns: 1fr !important;\n }\n\n body .included-section--cards .included-item--priority {\n grid-column: auto;\n }\n}\n\n\n\/* --- Refinement: cleaner video cards + serif only where it helps --- *\/\nbody h2.section-title.section-title--major,\nbody .section-title--major {\n font-family: var(--sans) !important;\n font-weight: 600 !important;\n letter-spacing: -.025em !important;\n}\n\n\/* Keep editorial section headlines serif, but utility\/section labels sans. *\/\nbody .editorial-title,\nbody .process-section .editorial-title,\nbody .faq-section .editorial-title,\nbody .fit-game__intro .editorial-title,\nbody .brand-focus__intro h2,\nbody main > #kontakt .project-contact__title {\n font-family: var(--serif) !important;\n}\n\n\/* Video links section: remove extra UI overlays, leave only the play button. *\/\nbody .works-loop__status,\nbody .works-loop__controls,\nbody .works-loop__arrow {\n display: none !important;\n}\n\nbody .works-loop__item::after {\n display: none !important;\n}\n\nbody .works-loop__play {\n z-index: 6 !important;\n}\n\nbody .works-loop__play-icon {\n width: 62px !important;\n height: 62px !important;\n border: 0 !important;\n background: #003BF3 !important;\n color: #fff !important;\n box-shadow: 0 12px 30px rgba(23, 61, 237, .28) !important;\n}\n\nbody .works-loop__play-icon::after {\n border-top-width: 8px !important;\n border-bottom-width: 8px !important;\n border-left-width: 13px !important;\n}\n\nbody .works-loop__play:hover .works-loop__play-icon,\nbody .works-loop__play:focus-visible .works-loop__play-icon {\n transform: scale(1.07) !important;\n background: #003BF3 !important;\n}\n\nbody .works-loop__play:focus-visible {\n outline: 2px solid rgba(23, 61, 237, .45) !important;\n outline-offset: -4px !important;\n}\n\n\n\/* --- Hero visibility hard-fix: no JS-dependent letter rendering --- *\/\nbody main > .landing-hero {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n text-align: center !important;\n}\n\nbody main > .landing-hero .landing-hero__copy {\n position: relative !important;\n z-index: 5 !important;\n width: min(100%, 1120px) !important;\n max-width: 1120px !important;\n margin: 0 auto !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n opacity: 1 !important;\n visibility: visible !important;\n transform: none !important;\n}\n\nbody main > .landing-hero .section-title,\nbody main > .landing-hero .landing-hero__title,\nbody main > .landing-hero .landing-hero__lead,\nbody main > .landing-hero .landing-hero__actions {\n opacity: 1 !important;\n visibility: visible !important;\n}\n\nbody main > .landing-hero .landing-hero__title {\n display: block !important;\n max-width: 13ch !important;\n color: #fff !important;\n font-family: var(--sans) !important;\n font-weight: 700 !important;\n line-height: .98 !important;\n letter-spacing: -.055em !important;\n}\n\nbody main > .landing-hero .landing-hero__title em {\n color: #fff !important;\n font-family: var(--serif) !important;\n font-weight: 400 !important;\n font-style: italic !important;\n letter-spacing: -.045em !important;\n}\n\nbody main > .landing-hero .landing-hero__lead {\n color: #fff !important;\n max-width: 54ch !important;\n}\n\nbody main > .landing-hero .landing-hero__actions {\n display: grid !important;\n}\n\n\n\n\/* =========================================================\n REFERENCE TYPOGRAPHY + VIDEO BEHAVIOUR SYNC\n ========================================================= *\/\n:root {\n --serif: Georgia, \"Times New Roman\", Times, serif;\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n --inter: \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n}\n\nhtml, body, button, input, textarea, select {\n font-family: var(--sans) !important;\n}\n\n\/* Top menu sits over the dark hero: all bar items stay white. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__menu-button,\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__utilities,\n#reference-menu .motion-nav__clock {\n color: #fff !important;\n}\n#reference-menu .motion-nav__menu-icon span {\n background: #FCFCFD !important;\n}\n\n\/* Reference hierarchy: utility labels are small sans, not display headings. *\/\nbody .section-title,\nbody .section-title--major,\nbody h2.section-title.section-title--major,\nbody .clients__label,\nbody .builder-label,\nbody .builder-head {\n margin: 0 0 24px !important;\n color: var(--soft) !important;\n font-family: var(--sans) !important;\n font-size: 9px !important;\n font-weight: 400 !important;\n line-height: 1.4 !important;\n letter-spacing: .14em !important;\n text-transform: uppercase !important;\n}\n\nbody .websites__header,\nbody .works-loop__header,\nbody .testimonials__header {\n margin-bottom: 24px !important;\n}\n\n\/* Editorial headlines: Georgia, light weight, tight leading. *\/\nbody .editorial-title,\nbody .brand-focus__intro h2,\nbody .fit-game__intro .editorial-title,\nbody .faq-section__intro .editorial-title,\nbody main > #kontakt .project-contact__title {\n margin: 0 !important;\n max-width: 830px;\n font-family: var(--serif) !important;\n font-size: clamp(38px, 5.2vw, 76px) !important;\n font-weight: 400 !important;\n line-height: .98 !important;\n letter-spacing: -.06em !important;\n text-transform: none !important;\n text-wrap: balance;\n}\n\n\/* Hero adopts the same serif voice as the supplied reference. *\/\nbody main > .landing-hero .landing-hero__title {\n max-width: 13ch !important;\n margin: 0 auto !important;\n font-family: var(--serif) !important;\n font-size: clamp(42px, 6.2vw, 88px) !important;\n font-weight: 400 !important;\n line-height: .98 !important;\n letter-spacing: -.075em !important;\n}\nbody main > .landing-hero .landing-hero__title em {\n font-family: var(--serif) !important;\n font-style: italic !important;\n font-weight: 400 !important;\n letter-spacing: -.085em !important;\n}\n\n\/* Editorial header arrangement from the reference language. *\/\nbody .editorial-header {\n display: grid !important;\n grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr) !important;\n gap: clamp(36px, 7vw, 110px) !important;\n align-items: start !important;\n margin-bottom: clamp(40px, 5vw, 72px) !important;\n}\nbody .editorial-header .section-title {\n margin-top: 4px !important;\n}\n\n\/* Card\/service typography remains sans and quieter than editorial headlines. *\/\nbody .process-step h3,\nbody .problem-card h3,\nbody .included-item strong,\nbody .service-strip__panel h3,\nbody .brand-focus__point h3 {\n font-family: var(--sans) !important;\n font-weight: 500 !important;\n letter-spacing: -.03em !important;\n}\nbody .process-step h3,\nbody .brand-focus__point h3,\nbody .included-item strong {\n font-size: clamp(16px, 1.35vw, 20px) !important;\n line-height: 1.3 !important;\n}\nbody .problem-card h3,\nbody .service-strip__panel h3 {\n font-size: clamp(20px, 2vw, 28px) !important;\n line-height: 1.22 !important;\n}\nbody .process-step p,\nbody .problem-card p,\nbody .included-item span:last-child,\nbody .brand-focus__point p,\nbody .service-strip__panel p {\n font-family: var(--sans) !important;\n font-size: clamp(13px, 1.05vw, 14px) !important;\n line-height: 1.62 !important;\n}\n\n\/* ---------- VIDEO: exactly thumbnails + click-through play; no player UI ---------- *\/\n#realizacje-wideo .works-loop__controls,\n#realizacje-wideo .works-loop__arrow,\n#realizacje-wideo .works-loop__status,\n#realizacje-wideo .works-loop__position,\n#realizacje-wideo .works-loop__preview,\n#realizacje-wideo iframe {\n display: none !important;\n}\n\n#realizacje-wideo .works-loop__viewport {\n width: 100% !important;\n min-width: 0 !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-inline: contain;\n scroll-snap-type: x mandatory !important;\n scrollbar-width: none !important;\n cursor: grab;\n touch-action: pan-x pan-y;\n}\n#realizacje-wideo .works-loop__viewport::-webkit-scrollbar { display: none !important; }\n#realizacje-wideo .works-loop__viewport.is-dragging {\n cursor: grabbing;\n scroll-snap-type: none !important;\n user-select: none;\n}\n#realizacje-wideo .works-loop__track {\n display: flex !important;\n align-items: flex-start !important;\n grid-template-columns: none !important;\n width: max-content !important;\n max-width: none !important;\n gap: clamp(10px, 1.2vw, 16px) !important;\n padding-right: var(--page-x) !important;\n}\n#realizacje-wideo .works-loop__item {\n position: relative !important;\n flex: 0 0 clamp(250px, 28vw, 410px) !important;\n width: clamp(250px, 28vw, 410px) !important;\n min-width: 0 !important;\n aspect-ratio: 16 \/ 9 !important;\n overflow: hidden !important;\n background: #171717 !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n contain: layout paint;\n}\n#realizacje-wideo .works-loop__thumbnail {\n position: absolute !important;\n inset: 0 !important;\n z-index: 1 !important;\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n object-fit: cover !important;\n object-position: center center !important;\n background: #171717 !important;\n transform: none !important;\n}\n#realizacje-wideo .works-loop__item::after { display: none !important; }\n#realizacje-wideo .works-loop__play {\n position: absolute !important;\n inset: 0 !important;\n z-index: 5 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 100% !important;\n padding: 0 !important;\n border: 0 !important;\n background: transparent !important;\n text-decoration: none !important;\n cursor: pointer !important;\n}\n#realizacje-wideo .works-loop__play-icon {\n position: relative !important;\n width: 62px !important;\n height: 62px !important;\n display: block !important;\n border: 0 !important;\n border-radius: 50% !important;\n background: #003BF3 !important;\n color: #fff !important;\n opacity: 1 !important;\n box-shadow: 0 12px 30px rgba(23, 61, 237, .28) !important;\n transition: transform .16s ease !important;\n}\n#realizacje-wideo .works-loop__play-icon::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: 2px;\n transform: translate(-50%, -50%);\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 13px solid currentColor;\n}\n#realizacje-wideo .works-loop__play:hover .works-loop__play-icon,\n#realizacje-wideo .works-loop__play:focus-visible .works-loop__play-icon {\n transform: scale(1.05) !important;\n}\n\n\/* ---------- PRELOADER ---------- *\/\n.name-preloader { display: none; }\n.has-name-reveal .name-preloader {\n position: fixed;\n inset: 0;\n z-index: 20000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n overflow: hidden;\n background: #003BF3;\n color: #fff;\n pointer-events: none;\n animation: nameRevealExit .85s cubic-bezier(.76,0,.24,1) 1s both;\n}\n.name-preloader__line { overflow: hidden; }\n.name-preloader__text {\n display: block;\n color: #fff;\n font-family: var(--serif) !important;\n font-size: clamp(42px, 6.2vw, 88px) !important;\n font-weight: 400 !important;\n font-style: normal !important;\n line-height: .98 !important;\n letter-spacing: -.075em !important;\n text-align: center;\n animation: nameRevealText .65s cubic-bezier(.22,1,.36,1) .08s both;\n}\n\n@media (max-width: 760px) {\n body .editorial-header {\n grid-template-columns: 1fr !important;\n gap: 22px !important;\n }\n body .editorial-title,\n body .brand-focus__intro h2,\n body .fit-game__intro .editorial-title,\n body .faq-section__intro .editorial-title,\n body main > #kontakt .project-contact__title {\n font-size: clamp(34px, 10vw, 54px) !important;\n }\n body main > .landing-hero .landing-hero__title {\n font-size: clamp(42px, 13vw, 62px) !important;\n }\n #realizacje-wideo .works-loop__item {\n flex-basis: min(82vw, 330px) !important;\n width: min(82vw, 330px) !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .has-name-reveal .name-preloader { display: none !important; }\n #realizacje-wideo .works-loop__play-icon { transition: none !important; }\n}\n\n\n\/* --- Final polish: equal included cards, priority card, quiz arrow, folders, preloader --- *\/\n\n\/* Included benefits: perfectly even 3 \u00d7 2 grid on desktop. *\/\nbody .included-section--cards .included-grid {\n display: grid !important;\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;\n grid-auto-flow: row !important;\n gap: clamp(22px, 2.6vw, 34px) !important;\n align-items: stretch !important;\n border: 0 !important;\n}\n\nbody .included-section--cards .included-item,\nbody .included-section--cards .included-item--priority {\n grid-column: auto !important;\n min-width: 0 !important;\n min-height: 220px !important;\n height: 100% !important;\n padding: clamp(26px, 2.5vw, 34px) !important;\n display: grid !important;\n grid-template-rows: auto auto 1fr !important;\n align-content: start !important;\n gap: 18px !important;\n border: 1px solid rgba(0, 0, 41, .12) !important;\n border-radius: 28px !important;\n background: #FCFCFD !important;\n color: #000051 !important;\n}\n\n\/* Lucide icons without the extra square frame. *\/\nbody .included-section--cards .included-item__icon {\n width: auto !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: flex-start !important;\n justify-self: start !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n color: #003BF3 !important;\n padding: 0 !important;\n}\n\nbody .included-section--cards .included-item__icon svg {\n width: 26px !important;\n height: 26px !important;\n}\n\nbody .included-section--cards .included-item strong {\n color: inherit !important;\n}\n\nbody .included-section--cards .included-item > span:last-child {\n align-self: end !important;\n color: #000051 !important;\n margin: 0 !important;\n}\n\n\/* Priority benefit: same size as the other five, but fully blue. *\/\nbody .included-section--cards .included-item--priority {\n background: #003BF3 !important;\n border-color: #003BF3 !important;\n color: #fff !important;\n box-shadow: none !important;\n}\n\nbody .included-section--cards .included-item--priority .included-item__icon,\nbody .included-section--cards .included-item--priority strong,\nbody .included-section--cards .included-item--priority > span:last-child {\n color: #fff !important;\n}\n\nbody .included-section--cards .included-item--priority strong::after {\n content: none !important;\n display: none !important;\n}\n\nbody .included-section--cards .included-item--priority:hover,\nbody .included-section--cards .included-item--priority:focus-within {\n background: #003BF3 !important;\n border-color: #003BF3 !important;\n transform: translateY(-6px) !important;\n}\n\n\/* Fit game: icon-only back action, no pill\/button treatment. *\/\nbody .fit-game__footer {\n min-height: 72px !important;\n padding-top: 22px !important;\n gap: clamp(28px, 5vw, 72px) !important;\n}\n\nbody .fit-game__back {\n flex: 0 0 auto !important;\n width: 44px !important;\n height: 44px !important;\n min-height: 44px !important;\n padding: 0 !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: flex-start !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n color: #000051 !important;\n font-family: var(--sans) !important;\n font-size: 28px !important;\n font-weight: 400 !important;\n line-height: 1 !important;\n box-shadow: none !important;\n}\n\nbody .fit-game__back:disabled {\n opacity: .24 !important;\n background: transparent !important;\n}\n\nbody .fit-game__hint {\n margin-left: auto !important;\n}\n\n\/* Website folders: lighter front flap\/body. *\/\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n background: #eeeeee !important;\n}\n\nbody .websites .website-link__front-tab path {\n fill: #eeeeee !important;\n}\n\n\/* Preloader: give Georgia enough vertical room for ascenders\/descenders. *\/\n.name-preloader__line {\n overflow: visible !important;\n padding: .18em .10em .24em !important;\n}\n\n.name-preloader__text {\n display: block !important;\n padding: .04em 0 .08em !important;\n font-family: var(--serif) !important;\n font-size: clamp(42px, 6.2vw, 88px) !important;\n font-weight: 400 !important;\n line-height: 1.14 !important;\n letter-spacing: -.06em !important;\n text-rendering: geometricPrecision;\n}\n\n@media (max-width: 1080px) {\n body .included-section--cards .included-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n grid-template-rows: repeat(3, minmax(220px, 1fr)) !important;\n }\n}\n\n@media (max-width: 760px) {\n body .included-section--cards .included-grid {\n grid-template-columns: 1fr !important;\n grid-template-rows: none !important;\n }\n\n body .included-section--cards .included-item,\n body .included-section--cards .included-item--priority {\n min-height: 0 !important;\n }\n\n body .fit-game__footer {\n gap: 20px !important;\n }\n\n body .fit-game__hint {\n max-width: 260px !important;\n }\n}\n\n\n\/* =========================================================\n HERO IMAGE + SUBCOPY + WHITE DRAWER ITEMS\n ========================================================= *\/\nbody main > .landing-hero {\n position: relative !important;\n isolation: isolate !important;\n min-height: 0 !important;\n margin-top: 0 !important;\n padding-top: 0 !important;\n background-color: #000029 !important;\n background-image: none !important;\n animation: none !important;\n}\n\nbody main > .landing-hero::after {\n content: none !important;\n display: none !important;\n}\n\nbody main > .landing-hero .landing-hero__copy {\n width: min(100%, 1120px) !important;\n max-width: 1120px !important;\n gap: 0 !important;\n}\n\nbody main > .landing-hero .landing-hero__subcopy {\n width: min(100%, 760px) !important;\n margin: clamp(36px, 5vw, 64px) auto 0 !important;\n display: grid !important;\n justify-items: center !important;\n text-align: center !important;\n}\n\nbody main > .landing-hero .landing-hero__subeyebrow {\n margin: 0 0 16px !important;\n color: rgba(255,255,255,.78) !important;\n font-family: var(--sans) !important;\n font-size: 9px !important;\n font-weight: 500 !important;\n line-height: 1.4 !important;\n letter-spacing: .14em !important;\n text-transform: uppercase !important;\n}\n\nbody main > .landing-hero .landing-hero__subheading {\n max-width: 12ch !important;\n margin: 0 !important;\n color: #fff !important;\n font-family: var(--serif) !important;\n font-size: clamp(32px, 4.4vw, 62px) !important;\n font-weight: 400 !important;\n line-height: .98 !important;\n letter-spacing: -.06em !important;\n text-wrap: balance !important;\n}\n\nbody main > .landing-hero .landing-hero__subheading em {\n font: inherit !important;\n font-style: italic !important;\n letter-spacing: -.07em !important;\n}\n\nbody main > .landing-hero .landing-hero__subcopy .landing-hero__lead {\n max-width: 58ch !important;\n margin: 20px auto 0 !important;\n color: rgba(255,255,255,.9) !important;\n font-family: var(--sans) !important;\n font-size: clamp(14px, 1.15vw, 17px) !important;\n line-height: 1.62 !important;\n letter-spacing: -.01em !important;\n}\n\n\/* Drawer\/submenu items: always white, no hover background. *\/\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer-inner,\n#reference-menu .motion-nav__content {\n color: #fff !important;\n}\n\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__socials a,\n#reference-menu .motion-nav__contact {\n color: #fff !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__socials a:hover,\n#reference-menu .motion-nav__socials a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n background: transparent !important;\n background-color: transparent !important;\n color: #fff !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible {\n opacity: .62 !important;\n}\n\n#reference-menu .motion-nav__divider {\n background: rgba(255,255,255,.22) !important;\n}\n\n#reference-menu .motion-nav__contact {\n border-color: rgba(255,255,255,.32) !important;\n}\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n border-color: #fff !important;\n}\n\n@media (max-width: 760px) {\n body main > .landing-hero {\n min-height: 0 !important;\n padding-top: 0 !important;\n background-image: none !important;\n }\n body main > .landing-hero .landing-hero__subcopy {\n margin-top: 32px !important;\n }\n body main > .landing-hero .landing-hero__subheading {\n font-size: clamp(30px, 9vw, 46px) !important;\n }\n}\n\n\n\n\/* =========================================================\n ALIGNMENT PASS - HERO \/ INCLUDED \/ FAQ \/ FOLDERS\n ========================================================= *\/\n\n\/* Remove the residual white strip above the full-bleed hero. *\/\nhtml, body { margin: 0 !important; padding: 0 !important; }\nbody .page { margin-top: 0 !important; padding-top: 0 !important; }\nbody main#main-content { padding-top: 0 !important; margin-top: 0 !important; }\nbody main#main-content > .landing-hero {\n margin-top: 0 !important;\n}\n\n\/* Hero: the main display line is now the brand-focus message. *\/\nbody main > .landing-hero .landing-hero__title {\n max-width: 12ch !important;\n}\nbody main > .landing-hero .landing-hero__subcopy {\n margin-top: clamp(28px, 4vw, 48px) !important;\n}\nbody main > .landing-hero .landing-hero__subeyebrow {\n margin-bottom: 14px !important;\n}\nbody main > .landing-hero .landing-hero__subcopy .landing-hero__lead {\n margin-top: 0 !important;\n}\n\n\/* Included section: no frame around the section\/grid. *\/\nbody main > .included-section--cards,\nbody main > .included-section--cards .included-grid {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n}\n\n\/* Perfect vertical alignment inside all six benefit cards. *\/\nbody .included-section--cards .included-grid {\n align-items: stretch !important;\n}\nbody .included-section--cards .included-item,\nbody .included-section--cards .included-item--priority {\n min-height: 238px !important;\n height: 100% !important;\n display: grid !important;\n grid-template-rows: 30px 54px auto !important;\n align-content: start !important;\n align-items: start !important;\n row-gap: 16px !important;\n padding: clamp(28px, 2.6vw, 36px) !important;\n}\nbody .included-section--cards .included-item__icon {\n width: 30px !important;\n height: 30px !important;\n margin: 0 !important;\n align-self: start !important;\n justify-self: start !important;\n line-height: 1 !important;\n}\nbody .included-section--cards .included-item__icon svg {\n width: 26px !important;\n height: 26px !important;\n display: block !important;\n}\nbody .included-section--cards .included-item strong {\n min-height: 54px !important;\n margin: 0 !important;\n display: flex !important;\n align-items: flex-start !important;\n align-self: start !important;\n}\nbody .included-section--cards .included-item > span:last-child {\n margin: 0 !important;\n align-self: start !important;\n}\n\n\/* FAQ: Lucide chevron replaces the typographic plus\/minus. *\/\nbody .faq-item summary {\n display: flex !important;\n align-items: center !important;\n justify-content: space-between !important;\n gap: 24px !important;\n padding-right: 2px !important;\n}\nbody .faq-item summary::after {\n content: none !important;\n display: none !important;\n}\nbody .faq-item__question {\n min-width: 0;\n}\nbody .faq-item__icon {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #003BF3;\n transition: transform .2s ease;\n}\nbody .faq-item__icon svg {\n width: 20px;\n height: 20px;\n display: block;\n}\nbody .faq-item[open] .faq-item__icon {\n transform: rotate(180deg);\n}\n\n\/* Folder cards: remove the 1px\/subpixel outer edge and keep the face #eee. *\/\nbody .websites .website-link {\n background: transparent !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n}\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n left: -1px !important;\n right: -1px !important;\n width: calc(100% + 2px) !important;\n height: calc(100% + 1px) !important;\n background: #eeeeee !important;\n}\nbody .websites .website-link__front-tab path {\n fill: #eeeeee !important;\n}\n\n\/* Preloader serif: extra line box prevents Georgia from clipping. *\/\n.name-preloader {\n overflow: visible !important;\n}\n.name-preloader__line {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n min-height: 1.55em !important;\n padding: .30em .20em .38em !important;\n overflow: visible !important;\n}\n.name-preloader__text {\n display: block !important;\n padding: .08em .02em .12em !important;\n font-family: var(--serif) !important;\n line-height: 1.24 !important;\n overflow: visible !important;\n}\n\n@media (max-width: 760px) {\n body .included-section--cards .included-item,\n body .included-section--cards .included-item--priority {\n min-height: 0 !important;\n grid-template-rows: 30px auto auto !important;\n }\n body .included-section--cards .included-item strong {\n min-height: 0 !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .faq-item__icon { transition: none !important; }\n}\n\n<\/style>\n\n\n<style id=\"folder-reference-final\">\n\/* Folder appearance copied from supplied reference only. *\/\n.websites {\n width: 100%;\n margin-top: clamp(48px, 6vw, 80px);\n padding-top: 24px;\n border-top: 1px solid var(--line);\n font-family: var(--inter);\n overflow: hidden;\n}.websites__header {\n width: 100%;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}.websites__header .section-title {\n margin: 0;\n text-align: left;\n}.websites__controls {\n display: flex;\n align-items: center;\n gap: 8px;\n}.websites__arrow {\n appearance: none;\n -webkit-appearance: none;\n width: 42px;\n height: 42px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--line);\n border-radius: 50%;\n background: transparent;\n color: var(--text);\n font-family: var(--sans);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n transition: border-color .16s ease, background-color .16s ease, color .16s ease, opacity .16s ease;\n}.websites__arrow:hover,\n.websites__arrow:focus-visible {\n border-color: var(--text);\n background: var(--text);\n color: var(--bg);\n outline: none;\n}.websites__arrow:disabled {\n opacity: .28;\n cursor: default;\n pointer-events: none;\n}.websites__links {\n display: flex;\n align-items: stretch;\n gap: clamp(10px, 1.2vw, 16px);\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 0 8px;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-inline: contain;\n scroll-snap-type: x proximity;\n scroll-behavior: smooth;\n touch-action: pan-x pan-y;\n}.websites__links::-webkit-scrollbar {\n display: none;\n}.website-link {\n position: relative;\n isolation: isolate;\n flex: 0 0 clamp(220px, 21vw, 292px);\n width: clamp(220px, 21vw, 292px);\n aspect-ratio: .78;\n min-width: 0;\n overflow: hidden;\n border-radius: clamp(22px, 2.5vw, 30px);\n background: #f6f6f6;\n color: #000;\n text-decoration: none;\n scroll-snap-align: start;\n -webkit-tap-highlight-color: transparent;\n}.website-link::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n left: 0;\n right: 0;\n top: 24%;\n bottom: 0;\n border-radius: clamp(22px, 2.5vw, 30px);\n background: #eeeeee;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}.website-link::after {\n content: \"\";\n position: absolute;\n z-index: 0;\n left: 0;\n top: 15%;\n width: 48%;\n height: 15%;\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0;\n background: #eeeeee;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}.website-link__number,\n.website-link__content,\n.website-link__arrow {\n position: absolute;\n z-index: 2;\n}.website-link__number {\n top: 29%;\n left: clamp(20px, 2.4vw, 28px);\n font-family: var(--inter);\n font-size: clamp(48px, 5.2vw, 66px);\n font-weight: 400;\n line-height: .9;\n letter-spacing: -.075em;\n font-variant-numeric: tabular-nums;\n transition: top .62s cubic-bezier(.22,.78,.2,1);\n}.website-link__arrow {\n top: 28.5%;\n right: clamp(18px, 2.2vw, 26px);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n font-size: clamp(19px, 2vw, 23px);\n font-weight: 300;\n line-height: 1;\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease;\n}.website-link__content {\n left: clamp(20px, 2.4vw, 28px);\n right: clamp(20px, 2.4vw, 28px);\n bottom: clamp(20px, 2.5vw, 28px);\n display: grid;\n gap: 7px;\n opacity: 1;\n transform: translateY(0);\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1);\n}.website-link__name {\n display: block;\n font-family: var(--inter);\n font-size: clamp(15px, 1.45vw, 19px);\n line-height: 1.12;\n font-weight: 500;\n letter-spacing: -.035em;\n}.website-link__description {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n color: #777;\n font-family: var(--inter);\n font-size: clamp(11px, .95vw, 13px);\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: -.01em;\n}.website-link--preview::before,\n.website-link--preview::after {\n z-index: 1;\n}.website-link--preview::before {\n top: 48%;\n}.website-link--preview::after {\n top: 40%;\n height: 14%;\n}.website-link__preview {\n position: absolute;\n z-index: 0;\n top: 10px;\n right: 10px;\n left: 10px;\n width: calc(100% - 20px);\n height: 55%;\n display: block;\n border-radius: clamp(16px, 2vw, 22px);\n object-fit: cover;\n object-position: 50% 26%;\n background: #ddd;\n transform: translateZ(0);\n}.website-link--preview .website-link__number {\n top: 54%;\n}.website-link--preview .website-link__arrow {\n top: 53.5%;\n}.website-link:hover,\n.website-link:focus-visible {\n outline: none;\n}.website-link:hover::before,\n.website-link:focus-visible::before {\n top: 58%;\n}.website-link:hover::after,\n.website-link:focus-visible::after {\n top: 50%;\n}.website-link:hover .website-link__number,\n.website-link:focus-visible .website-link__number {\n top: 61%;\n}.website-link:hover .website-link__arrow,\n.website-link:focus-visible .website-link__arrow {\n top: 60%;\n transform: translate(3px, -3px);\n}.website-link:hover .website-link__content,\n.website-link:focus-visible .website-link__content {\n opacity: 0;\n transform: translateY(14px);\n}@media (max-width: 720px) {\n.websites {\n margin-top: 46px;\n }.websites__header {\n justify-content: center;\n }.websites__header .section-title {\n text-align: center;\n }.websites__controls {\n display: none;\n }.websites__links {\n gap: 12px;\n scroll-snap-type: x mandatory;\n }.website-link {\n flex-basis: min(72vw, 270px);\n width: min(72vw, 270px);\n }\n}\n@media (max-width: 420px) {\n.website-link {\n flex-basis: min(78vw, 250px);\n width: min(78vw, 250px);\n }.website-link__number {\n left: 20px;\n font-size: clamp(46px, 15vw, 58px);\n }.website-link__arrow {\n right: 18px;\n font-size: 20px;\n }.website-link__content {\n left: 20px;\n right: 20px;\n bottom: 20px;\n }.website-link__name {\n font-size: 16px;\n }.website-link__description {\n font-size: 11.5px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n.websites__links {\n scroll-behavior: auto;\n }.websites__arrow,\n .website-link::before,\n .website-link::after,\n .website-link__number,\n .website-link__content,\n .website-link__arrow {\n transition: none !important;\n }\n}\n.website-link {\n background: #050505;\n color: #f6f6f6;\n}.website-link::before,\n.website-link::after {\n background: #111;\n}.website-link__description {\n color: rgba(246, 246, 246, .64);\n}.websites__arrow,\n.works-loop__arrow {\n border-color: rgba(0, 0, 0, .34);\n}.websites__arrow:hover,\n.websites__arrow:focus-visible,\n.works-loop__arrow:hover,\n.works-loop__arrow:focus-visible {\n border-color: #050505;\n background: #050505;\n color: #f6f6f6;\n}.clients,\n.websites,\n.works-loop,\n.project-contact {\n border-top-color: rgba(0, 0, 0, .24) !important;\n}body .websites .website-link--preview {\n background: #dce3ec !important;\n color: #111 !important;\n box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .16);\n}body .websites .website-link--preview::before,\nbody .websites .website-link--preview::after {\n background: #e9edf3 !important;\n}body .websites .website-link--preview::before {\n top: 48%;\n}body .websites .website-link--preview::after {\n top: 40%;\n height: 14%;\n}body .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 0 !important;\n top: 10px !important;\n right: 10px !important;\n bottom: auto !important;\n left: 10px !important;\n display: block !important;\n width: calc(100% - 20px) !important;\n height: 55% !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: clamp(16px, 2vw, 22px) !important;\n object-fit: cover !important;\n object-position: 50% 35% !important;\n opacity: 1 !important;\n filter: none !important;\n mix-blend-mode: normal !important;\n transform: none !important;\n}body .websites .website-link--preview .website-link__number {\n top: 54%;\n}body .websites .website-link--preview .website-link__arrow {\n top: 53.5%;\n}body .websites .website-link--preview .website-link__description {\n color: #6f747c !important;\n}body .websites .website-link {\n background: #e4e4e4 !important;\n color: var(--text) !important;\n}body .websites .website-link--preview {\n box-shadow: none !important;\n border: 0 !important;\n}body .websites .website-link::before,\nbody .websites .website-link::after {\n background: #eeeeee !important;\n}body .websites .website-link__description {\n color: var(--muted) !important;\n}body .websites .website-link--preview::before {\n z-index: 2 !important;\n top: 24% !important;\n bottom: 0 !important;\n border-radius: clamp(22px, 2.5vw, 30px) !important;\n}body .websites .website-link--preview::after {\n z-index: 2 !important;\n left: 0 !important;\n top: 15% !important;\n width: 48% !important;\n height: 15% !important;\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0 !important;\n}body .websites .website-link--preview .website-link__number {\n top: 29% !important;\n z-index: 3 !important;\n}body .websites .website-link--preview .website-link__arrow {\n top: 28.5% !important;\n z-index: 3 !important;\n}body .websites .website-link--preview .website-link__content {\n z-index: 3 !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1) !important;\n}body .websites .website-link:hover .website-link__content,\nbody .websites .website-link:focus-visible .website-link__content {\n opacity: 1 !important;\n transform: translateY(0) !important;\n}body .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 1 !important;\n top: auto !important;\n right: 1px !important;\n\n bottom: -10px !important;\n left: 1px !important;\n display: block !important;\n width: calc(100% - 2px) !important;\n height: calc(100% + 10px) !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: inherit !important;\n object-fit: cover !important;\n object-position: 50% 34% !important;\n opacity: 1 !important;\n filter: none !important;\n mix-blend-mode: normal !important;\n\n clip-path: none !important;\n -webkit-clip-path: none !important;\n transform: translate3d(0, 0, 0) scale(1.01) !important;\n transform-origin: center bottom !important;\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\n pointer-events: none !important;\n}body .websites .website-link--preview:hover::before,\nbody .websites .website-link--preview:focus-visible::before {\n top: 58% !important;\n}body .websites .website-link--preview:hover::after,\nbody .websites .website-link--preview:focus-visible::after {\n top: 50% !important;\n}body .websites .website-link--preview:hover .website-link__number,\nbody .websites .website-link--preview:focus-visible .website-link__number {\n top: 61% !important;\n}body .websites .website-link--preview:hover .website-link__arrow,\nbody .websites .website-link--preview:focus-visible .website-link__arrow {\n top: 60% !important;\n transform: translate(3px, -3px) !important;\n}body .websites .website-link--preview:hover > img.website-link__preview,\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\n transform: translate3d(0, -10px, 0) scale(1.01) !important;\n}body .websites .website-link {\n --website-card-text-x: clamp(20px, 2.4vw, 28px);\n}body .websites .website-link .website-link__number {\n left: var(--website-card-text-x) !important;\n text-align: left !important;\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease !important;\n}body .websites .website-link .website-link__content {\n left: var(--website-card-text-x) !important;\n right: var(--website-card-text-x) !important;\n text-align: left !important;\n}body .websites .website-link .website-link__name,\nbody .websites .website-link .website-link__description {\n text-align: left !important;\n}body .websites .website-link:hover .website-link__number,\nbody .websites .website-link:focus-visible .website-link__number {\n transform: translateY(-14px) !important;\n}@media (max-width: 420px) {\nbody .websites .website-link {\n --website-card-text-x: 20px;\n }body .websites .website-link:hover .website-link__number,\n body .websites .website-link:focus-visible .website-link__number {\n transform: translateY(-10px) !important;\n }\n}\n@media (prefers-reduced-motion: reduce) {\nbody .websites .website-link--preview > img.website-link__preview {\n transition: none !important;\n }\n}\nbody .websites .website-link::before,\nbody .websites .website-link--preview::before {\n left: 0 !important;\n border-radius: 10px 10px 4px 4px !important;\n}body .websites .website-link::after,\nbody .websites .website-link--preview::after {\n content: none !important;\n display: none !important;\n}body .websites .website-link__front-tab {\n position: absolute !important;\n z-index: 2 !important;\n left: 0 !important;\n top: 15% !important;\n width: 58% !important;\n height: 17% !important;\n display: block !important;\n overflow: visible !important;\n pointer-events: none !important;\n transform: none !important;\n backface-visibility: visible !important;\n will-change: auto !important;\n transition: top .62s cubic-bezier(.22,.78,.2,1) !important;\n shape-rendering: auto !important;\n}body .websites .website-link__front-tab path {\n fill: #eeeeee !important;\n stroke: none !important;\n shape-rendering: auto !important;\n}body .websites .website-link:hover .website-link__front-tab,\nbody .websites .website-link:focus-visible .website-link__front-tab {\n top: 50% !important;\n}@media (max-width: 520px) {\nbody .websites .website-link::before,\n body .websites .website-link--preview::before {\n border-radius: 8px 8px 3px 3px !important;\n }\n}\n@media (prefers-reduced-motion: reduce) {\nbody .websites .website-link__front-tab {\n transition: none !important;\n }\n}\nbody .websites .website-link__arrow {\n color: var(--text) !important;\n font-size: 0 !important;\n -webkit-text-fill-color: currentColor !important;\n}body .websites .website-link__arrow svg {\n display: block !important;\n width: 24px !important;\n height: 24px !important;\n overflow: visible !important;\n fill: none !important;\n stroke: currentColor !important;\n stroke-width: 1.45 !important;\n stroke-linecap: square !important;\n stroke-linejoin: miter !important;\n pointer-events: none !important;\n}body .websites .website-link::before,\nbody .websites .website-link--preview::before {\n background: transparent !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}body .websites .website-link__front-tab {\n opacity: 0 !important;\n}body .websites .website-link__front-tab path {\n fill: transparent !important;\n}body .websites .website-link__number,\nbody .websites .website-link__content,\nbody .websites .website-link__arrow {\n z-index: 3 !important;\n}body .websites .website-link::after,\nbody .websites .website-link--preview::after {\n content: \"\" !important;\n position: absolute !important;\n z-index: 2 !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n display: block !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: rgba(238, 238, 238, .62) !important;\n -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;\n backdrop-filter: blur(18px) saturate(1.18) !important;\n\n -webkit-mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 780 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 1000 L0 168 Q0 150 14.04 150 H237.12 C258.96 150 273 157 288.6 177 C312 207 333.06 240 375.96 240 H752 Q780 240 780 268 V1000 Z'\/%3E%3C\/svg%3E\") !important;\n mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 780 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 1000 L0 168 Q0 150 14.04 150 H237.12 C258.96 150 273 157 288.6 177 C312 207 333.06 240 375.96 240 H752 Q780 240 780 268 V1000 Z'\/%3E%3C\/svg%3E\") !important;\n -webkit-mask-repeat: no-repeat !important;\n mask-repeat: no-repeat !important;\n -webkit-mask-position: 0 0 !important;\n mask-position: 0 0 !important;\n -webkit-mask-size: 100% 100% !important;\n mask-size: 100% 100% !important;\n\n pointer-events: none !important;\n transform: translate3d(0, 0, 0) !important;\n transform-origin: top left !important;\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\n}body .websites .website-link:hover::after,\nbody .websites .website-link:focus-visible::after {\n\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n transform: translate3d(0, 34%, 0) !important;\n}@media (prefers-reduced-motion: reduce) {\nbody .websites .website-link::after,\n body .websites .website-link--preview::after {\n transition: none !important;\n }\n}\nbody .websites .website-link--preview {\n overflow: hidden !important;\n -webkit-clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\n clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\n}body .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 1 !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n object-fit: cover !important;\n\n object-position: 50% 34% !important;\n\n -webkit-clip-path: none !important;\n clip-path: none !important;\n transform: none !important;\n transform-origin: center center !important;\n will-change: object-position !important;\n transition: object-position .62s cubic-bezier(.22,.78,.2,1) !important;\n pointer-events: none !important;\n}body .websites .website-link--preview:hover > img.website-link__preview,\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n transform: none !important;\n object-position: 50% calc(34% - 10px) !important;\n}body .websites .website-link--preview::after {\n box-shadow: none !important;\n outline: 0 !important;\n}@media (prefers-reduced-motion: reduce) {\nbody .websites .website-link--preview > img.website-link__preview {\n transition: none !important;\n }\n}\nbody .websites {\n overflow: visible !important;\n}body .websites .websites__header {\n justify-content: flex-start !important;\n}body .websites .websites__controls {\n display: none !important;\n}body .websites .websites__links {\n display: grid !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n align-items: stretch !important;\n gap: clamp(12px, 1.4vw, 20px) !important;\n width: 100% !important;\n max-width: none !important;\n overflow: visible !important;\n padding: 0 !important;\n scroll-snap-type: none !important;\n scroll-behavior: auto !important;\n touch-action: auto !important;\n}body .websites .website-link,\nbody .websites .website-link--preview {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n aspect-ratio: .78 !important;\n scroll-snap-align: none !important;\n}@media (max-width: 1100px) {\nbody .websites .websites__links {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n}\n@media (max-width: 760px) {\nbody .websites .websites__header {\n justify-content: center !important;\n }body .websites .websites__links {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 12px !important;\n }\n}\n@media (max-width: 460px) {\nbody .websites .websites__links {\n grid-template-columns: 1fr !important;\n gap: 14px !important;\n }body .websites .website-link,\n body .websites .website-link--preview {\n width: min(100%, 320px) !important;\n justify-self: center !important;\n }\n}\n\n<\/style>\n\n\n<style id=\"menu-blend-visibility\">\n\/* Adaptive white menu text: authored as white, blended for contrast over any backdrop. *\/\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact {\n color: #fff !important;\n mix-blend-mode: difference !important;\n}\n\n\/* Keep submenu hover clean; no fill\/background. *\/\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n background: transparent !important;\n background-color: transparent !important;\n}\n<\/style>\n\n\n<style id=\"contrast-folders-spacing-fix\">\n\/* Stable white navigation over any backdrop. Backdrop-filter makes mix-blend unreliable,\n so keep the glyphs white and give them a subtle dark edge instead. *\/\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact {\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n mix-blend-mode: normal !important;\n text-shadow:\n 0 0 1px rgba(0,0,0,.95),\n 0 1px 3px rgba(0,0,0,.78),\n 0 0 10px rgba(0,0,0,.42) !important;\n -webkit-text-stroke: .22px rgba(0,0,0,.58);\n}\n\n#reference-menu .motion-nav__menu-icon span {\n background: #FCFCFD !important;\n mix-blend-mode: normal !important;\n box-shadow: 0 0 1px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.72) !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n background: transparent !important;\n background-color: transparent !important;\n}\n\n\/* All website folders use the same rounded clipping, not only the preview card. *\/\nbody .websites .website-link,\nbody .websites .website-link--preview {\n --folder-radius: clamp(22px, 2.5vw, 30px);\n border-radius: var(--folder-radius) !important;\n overflow: hidden !important;\n -webkit-clip-path: inset(0 round var(--folder-radius)) !important;\n clip-path: inset(0 round var(--folder-radius)) !important;\n background-clip: padding-box !important;\n}\n\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n border-radius: var(--folder-radius) !important;\n}\n\n@media (max-width: 520px) {\n body .websites .website-link,\n body .websites .website-link--preview {\n --folder-radius: 22px;\n }\n}\n\n\/* Give the client controls breathing room below the hero. *\/\nbody main > .landing-hero + .clients {\n margin-top: 0 !important;\n padding-top: clamp(44px, 5vw, 72px) !important;\n}\n\n@media (max-width: 760px) {\n body main > .landing-hero + .clients {\n padding-top: 34px !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-cleanup-final\">\n\/* Final cleanup: no frame\/shadows on the top navigation or its labels\/links. *\/\n#reference-menu .motion-nav__shell {\n border: 0 !important;\n box-shadow: none !important;\n}\n\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact,\n#reference-menu .motion-nav__socials a {\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n}\n\n#reference-menu .motion-nav__menu-icon span {\n box-shadow: none !important;\n}\n\n\/* Menu + submenu items: unified light grey. *\/\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact,\n#reference-menu .motion-nav__socials a {\n color: #eeeeee !important;\n -webkit-text-fill-color: #eeeeee !important;\n}\n\n#reference-menu .motion-nav__menu-icon span {\n background: #eeeeee !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n color: #eeeeee !important;\n -webkit-text-fill-color: #eeeeee !important;\n}\n<\/style>\n\n\n<style id=\"hero-background-image-final\">\nbody main#main-content {\n margin-top: 0 !important;\n padding-top: 0 !important;\n}\nbody main#main-content > .landing-hero {\n margin-top: 0 !important;\n \/* Keep menu clearance, but crop the PNG's built-in empty blue area above the characters. *\/\n padding-top: 132px !important;\n padding-bottom: 38vw !important;\n min-height: 0 !important;\n background-color: #003BF3 !important;\n background-image: url(\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/c25a8a6f-b7d0-4b4f-b4ea-e1e6d945736c.png\") !important;\n background-repeat: no-repeat !important;\n background-size: 84% auto !important;\n background-position: center bottom !important;\n}\n@media (max-width: 720px) {\n body main#main-content > .landing-hero {\n padding-top: 132px !important;\n padding-bottom: 50vw !important;\n background-position: center bottom !important;\n background-size: 80% auto !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"mobile-hero-layout-fix\">\n\/* Mobile stabilization: override the accumulated desktop\/full-bleed hero rules in one place. *\/\n@media (max-width: 720px) {\n html,\n body {\n margin: 0 !important;\n padding: 0 !important;\n overflow-x: hidden !important;\n }\n\n body .page,\n body main#main-content {\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n\n \/* Full bleed without the old left:50% \/ -50vw combination. *\/\n body main#main-content > .landing-hero {\n position: relative !important;\n left: auto !important;\n right: auto !important;\n width: 100vw !important;\n max-width: none !important;\n min-height: 0 !important;\n box-sizing: border-box !important;\n margin-top: 0 !important;\n margin-right: calc(50% - 50vw) !important;\n margin-bottom: 0 !important;\n margin-left: calc(50% - 50vw) !important;\n\n \/* Clear the floating menu, then reserve a real image zone under the CTAs. *\/\n padding-top: 132px !important;\n padding-right: 18px !important;\n padding-bottom: calc(50vw + 24px) !important;\n padding-left: 18px !important;\n\n display: flex !important;\n align-items: flex-start !important;\n justify-content: center !important;\n overflow: hidden !important;\n text-align: center !important;\n background-color: #003BF3 !important;\n background-image: url(\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/c25a8a6f-b7d0-4b4f-b4ea-e1e6d945736c.png\") !important;\n background-repeat: no-repeat !important;\n background-size: 80% auto !important;\n background-position: center bottom !important;\n animation: none !important;\n }\n\n body main#main-content > .landing-hero::before,\n body main#main-content > .landing-hero::after {\n content: none !important;\n display: none !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__copy {\n width: 100% !important;\n max-width: 520px !important;\n margin: 0 auto !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: flex-start !important;\n gap: 0 !important;\n text-align: center !important;\n }\n\n body main#main-content > .landing-hero .section-title {\n width: 100% !important;\n max-width: 32ch !important;\n margin: 0 auto 24px !important;\n color: rgba(255,255,255,.92) !important;\n font-size: 11px !important;\n font-weight: 600 !important;\n line-height: 1.45 !important;\n letter-spacing: .10em !important;\n text-align: center !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__title {\n width: 100% !important;\n max-width: 10.5ch !important;\n margin: 0 auto !important;\n color: #fff !important;\n font-size: clamp(40px, 12.5vw, 52px) !important;\n font-weight: 400 !important;\n line-height: .96 !important;\n letter-spacing: -.06em !important;\n text-align: center !important;\n text-wrap: balance !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__title em {\n font-family: var(--serif) !important;\n font-style: italic !important;\n font-weight: 400 !important;\n letter-spacing: -.065em !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__subcopy {\n width: 100% !important;\n max-width: 34ch !important;\n margin: 30px auto 0 !important;\n display: grid !important;\n justify-items: center !important;\n text-align: center !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__subeyebrow {\n margin: 0 0 14px !important;\n color: rgba(255,255,255,.78) !important;\n font-size: 10px !important;\n line-height: 1.4 !important;\n letter-spacing: .16em !important;\n white-space: normal !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__subcopy .landing-hero__lead {\n max-width: 32ch !important;\n margin: 0 auto !important;\n color: rgba(255,255,255,.94) !important;\n font-size: 16px !important;\n line-height: 1.52 !important;\n letter-spacing: -.015em !important;\n text-align: center !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__actions {\n width: 100% !important;\n max-width: 420px !important;\n margin: 30px auto 0 !important;\n display: grid !important;\n grid-template-columns: 1fr !important;\n gap: 12px !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__actions .ux-button {\n width: 100% !important;\n min-height: 54px !important;\n height: auto !important;\n padding: 13px 18px !important;\n border-radius: 999px !important;\n box-sizing: border-box !important;\n font-size: 15px !important;\n line-height: 1.2 !important;\n }\n\n \/* Compact mobile navigation; keep the glass effect but stop it dominating the viewport. *\/\n #reference-menu {\n top: 8px !important;\n width: calc(100vw - 24px) !important;\n max-width: 420px !important;\n }\n\n #reference-menu .motion-nav__shell {\n padding: 6px !important;\n border-radius: 24px !important;\n background: rgba(255,255,255,.10) !important;\n -webkit-backdrop-filter: blur(18px) saturate(145%) !important;\n backdrop-filter: blur(18px) saturate(145%) !important;\n }\n\n #reference-menu .motion-nav__bar {\n min-height: 50px !important;\n padding: 0 12px !important;\n border-radius: 18px !important;\n gap: 12px !important;\n }\n\n #reference-menu .motion-nav__menu-button {\n min-height: 44px !important;\n gap: 10px !important;\n font-size: 16px !important;\n }\n\n #reference-menu .motion-nav__clock {\n min-width: 44px !important;\n font-size: 14px !important;\n }\n\n \/* Restore normal section spacing after the full-bleed hero. *\/\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: 44px !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero {\n padding-top: 126px !important;\n padding-right: 16px !important;\n padding-bottom: calc(52vw + 22px) !important;\n padding-left: 16px !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__title {\n font-size: clamp(38px, 12vw, 47px) !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__subcopy .landing-hero__lead {\n font-size: 15.5px !important;\n }\n}\n<\/style>\n\n<style id=\"hero-0039F2-size-spacing-final\">\n\/* Final hero tuning: smaller artwork and more clearance below the fixed menu. *\/\nbody main#main-content > .landing-hero {\n background-color: #003BF3 !important;\n background-size: 84% auto !important;\n}\n@media (max-width: 720px) {\n body main#main-content > .landing-hero {\n padding-top: 132px !important;\n padding-bottom: calc(50vw + 24px) !important;\n background-size: 80% auto !important;\n background-position: center bottom !important;\n }\n}\n@media (max-width: 390px) {\n body main#main-content > .landing-hero {\n padding-top: 126px !important;\n padding-bottom: calc(52vw + 22px) !important;\n background-size: 82% auto !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-original-image-size-final\">\n\/* New hero artwork: preserve its intrinsic\/native dimensions on every viewport. *\/\nbody main#main-content > .landing-hero {\n background-image: url(\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/c25a8a6f-b7d0-4b4f-b4ea-e1e6d945736c.png\") !important;\n background-size: auto !important;\n background-repeat: no-repeat !important;\n background-position: center bottom !important;\n}\n@media (max-width: 720px) {\n body main#main-content > .landing-hero {\n background-size: auto !important;\n background-position: center bottom !important;\n }\n}\n@media (max-width: 390px) {\n body main#main-content > .landing-hero {\n background-size: auto !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-exact-native-size-final\">\n\/* Source artwork is 1774 \u00d7 887 px: keep that exact rendered background size. *\/\nbody main#main-content > .landing-hero {\n background-size: 1774px 887px !important;\n background-position: center bottom !important;\n background-repeat: no-repeat !important;\n}\n@media (max-width: 720px) {\n body main#main-content > .landing-hero {\n background-size: 1774px 887px !important;\n }\n}\n<\/style>\n\n<style id=\"hero-native-image-final\">\n\/* Keep Projekt-bez-nazwy.png at its native 2500 \u00d7 1080 CSS-pixel size. *\/\nbody main#main-content > .landing-hero {\n background-image: url(\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Projekt-bez-nazwy.png\") !important;\n background-repeat: no-repeat !important;\n background-size: 2500px 1080px !important;\n background-position: center bottom !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero {\n background-size: 2500px 1080px !important;\n background-position: center bottom !important;\n }\n}\n<\/style>\n\n<style id=\"hero-projekt-scaled-down-final\">\n\/* Display the 2500\u00d71080 source proportionally, but never at its huge native CSS-pixel width. *\/\nbody main#main-content > .landing-hero {\n background-size: min(1150px, 68vw) auto !important;\n background-position: center bottom !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero {\n background-size: 86vw auto !important;\n background-position: center bottom !important;\n }\n}\n\n@media (max-width: 520px) {\n body main#main-content > .landing-hero {\n background-size: 82vw auto !important;\n }\n}\n<\/style>\n\n<style id=\"hero-full-width-final\">\n\/* Final hero sizing: image fills the hero width, with proportional height. *\/\nbody main#main-content > .landing-hero {\n background-size: 100% auto !important;\n}\n<\/style>\n\n<style id=\"hero-mesh-gradient-final\">\n\/* Replace the hero artwork with a luminous mesh gradient. *\/\nbody main#main-content > .landing-hero {\n background-color: #003BF3 !important;\n background-image:\n radial-gradient(72% 58% at 88% 12%, rgba(118, 248, 255, 0.70) 0%, rgba(118, 248, 255, 0.34) 28%, rgba(118, 248, 255, 0.08) 48%, rgba(118, 248, 255, 0) 62%),\n radial-gradient(58% 44% at 54% 16%, rgba(97, 150, 255, 0.50) 0%, rgba(97, 150, 255, 0.26) 30%, rgba(97, 150, 255, 0.08) 50%, rgba(97, 150, 255, 0) 68%),\n radial-gradient(30% 60% at 0% 0%, rgba(0, 4, 34, 0.98) 0%, rgba(0, 4, 34, 0.82) 22%, rgba(0, 4, 34, 0.30) 46%, rgba(0, 4, 34, 0) 68%),\n linear-gradient(100deg, #000437 0%, #0d1da8 18%, #1237de 42%, #1d66ff 68%, #44e4ff 100%) !important;\n background-repeat: no-repeat !important;\n background-size: 100% 100% !important;\n background-position: center top !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero {\n background-image:\n radial-gradient(88% 42% at 84% 12%, rgba(118, 248, 255, 0.64) 0%, rgba(118, 248, 255, 0.28) 28%, rgba(118, 248, 255, 0.06) 48%, rgba(118, 248, 255, 0) 62%),\n radial-gradient(74% 36% at 50% 16%, rgba(97, 150, 255, 0.40) 0%, rgba(97, 150, 255, 0.18) 30%, rgba(97, 150, 255, 0.05) 52%, rgba(97, 150, 255, 0) 72%),\n radial-gradient(44% 54% at 0% 0%, rgba(0, 4, 34, 0.98) 0%, rgba(0, 4, 34, 0.82) 22%, rgba(0, 4, 34, 0.28) 46%, rgba(0, 4, 34, 0) 68%),\n linear-gradient(100deg, #000437 0%, #0d1da8 20%, #1237de 46%, #1d66ff 72%, #44e4ff 100%) !important;\n }\n}\n<\/style>\n\n<style id=\"hero-mesh-gradient-animated-final\">\n\/* Animated mesh gradient + remove the extra image-reservation spacing. *\/\n@keyframes heroMeshFloat {\n 0% {\n background-position: 88% 10%, 52% 16%, 0% 0%, center top;\n background-size: 138% 138%, 126% 126%, 118% 118%, 100% 100%;\n }\n 50% {\n background-position: 82% 18%, 58% 10%, -3% 2%, center top;\n background-size: 144% 144%, 130% 130%, 120% 120%, 100% 100%;\n }\n 100% {\n background-position: 94% 12%, 48% 22%, 2% -2%, center top;\n background-size: 140% 140%, 128% 128%, 116% 116%, 100% 100%;\n }\n}\n\nbody main#main-content > .landing-hero {\n background-color: #003BF3 !important;\n background-image:\n radial-gradient(72% 58% at 88% 12%, rgba(118, 248, 255, 0.72) 0%, rgba(118, 248, 255, 0.34) 28%, rgba(118, 248, 255, 0.08) 48%, rgba(118, 248, 255, 0) 62%),\n radial-gradient(58% 44% at 54% 16%, rgba(97, 150, 255, 0.52) 0%, rgba(97, 150, 255, 0.26) 30%, rgba(97, 150, 255, 0.08) 50%, rgba(97, 150, 255, 0) 68%),\n radial-gradient(30% 60% at 0% 0%, rgba(0, 4, 34, 0.98) 0%, rgba(0, 4, 34, 0.82) 22%, rgba(0, 4, 34, 0.30) 46%, rgba(0, 4, 34, 0) 68%),\n linear-gradient(100deg, #000437 0%, #0d1da8 18%, #1237de 42%, #1d66ff 68%, #44e4ff 100%) !important;\n background-repeat: no-repeat !important;\n background-position: 88% 10%, 52% 16%, 0% 0%, center top !important;\n background-size: 138% 138%, 126% 126%, 118% 118%, 100% 100% !important;\n animation: heroMeshFloat 18s ease-in-out infinite alternate !important;\n\n \/* Remove the old reserved illustration area and keep balanced hero spacing. *\/\n min-height: 0 !important;\n padding-top: clamp(132px, 12vw, 168px) !important;\n padding-bottom: clamp(64px, 7vw, 96px) !important;\n}\n\nbody main#main-content > .landing-hero + .clients,\nbody main#main-content > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: clamp(28px, 4vw, 44px) !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero {\n background-position: 84% 12%, 50% 18%, 0% 0%, center top !important;\n background-size: 156% 156%, 138% 138%, 126% 126%, 100% 100% !important;\n padding-top: 124px !important;\n padding-bottom: 56px !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero {\n padding-top: 112px !important;\n padding-right: 18px !important;\n padding-bottom: 42px !important;\n padding-left: 18px !important;\n background-position: 86% 10%, 52% 14%, 0% 0%, center top !important;\n background-size: 176% 176%, 150% 150%, 134% 134%, 100% 100% !important;\n }\n\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section {\n padding-top: 32px !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero {\n padding-top: 106px !important;\n padding-right: 16px !important;\n padding-bottom: 36px !important;\n padding-left: 16px !important;\n background-size: 188% 188%, 158% 158%, 140% 140%, 100% 100% !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body main#main-content > .landing-hero {\n animation: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-darker-final\">\n\/* Darker navigation text\/icons for stronger contrast and less glare. *\/\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact,\n#reference-menu .motion-nav__socials a {\n color: #c7c7c7 !important;\n -webkit-text-fill-color: #c7c7c7 !important;\n}\n\n#reference-menu .motion-nav__menu-icon span {\n background: #c7c7c7 !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible,\n#reference-menu .motion-nav__socials a:hover,\n#reference-menu .motion-nav__socials a:focus-visible {\n color: #b8b8b8 !important;\n -webkit-text-fill-color: #b8b8b8 !important;\n}\n<\/style>\n\n\n<style id=\"hero-mesh-gradient-seamless-final\">\n\/*\n Real mesh motion:\n - static base gradient on the hero\n - two oversized luminous layers move independently\n - 0% and 100% are identical, so each animation loops without a jump\n*\/\nbody main#main-content > .landing-hero {\n position: relative !important;\n isolation: isolate !important;\n overflow: hidden !important;\n\n \/* Stop the old background-position animation. *\/\n animation: none !important;\n\n background-color: #003BF3 !important;\n background-image:\n radial-gradient(100% 82% at 100% 0%,\n rgba(73, 221, 255, .32) 0%,\n rgba(73, 221, 255, .12) 34%,\n rgba(73, 221, 255, 0) 62%),\n linear-gradient(108deg,\n #000322 0%,\n #06126f 18%,\n #0c2ac5 42%,\n #003BF3 67%,\n #18b8f4 100%) !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n background-size: 100% 100% !important;\n}\n\n\/* Re-enable pseudo-elements that older mobile overrides disabled. *\/\nbody main#main-content > .landing-hero::before,\nbody main#main-content > .landing-hero::after {\n content: \"\" !important;\n display: block !important;\n position: absolute !important;\n pointer-events: none !important;\n z-index: -1 !important;\n will-change: transform !important;\n transform-origin: center center !important;\n}\n\n\/* Cyan \/ electric-blue luminous field. *\/\nbody main#main-content > .landing-hero::before {\n inset: -34% -28% !important;\n opacity: .92 !important;\n background:\n radial-gradient(38% 34% at 78% 18%,\n rgba(93, 244, 255, .96) 0%,\n rgba(93, 244, 255, .52) 24%,\n rgba(49, 175, 255, .16) 50%,\n rgba(49, 175, 255, 0) 72%),\n radial-gradient(42% 38% at 54% 28%,\n rgba(63, 139, 255, .76) 0%,\n rgba(63, 139, 255, .32) 38%,\n rgba(63, 139, 255, 0) 72%);\n filter: blur(18px) !important;\n animation: heroMeshLayerA 16s cubic-bezier(.45,0,.55,1) infinite !important;\n}\n\n\/* Dark navy counter-field that gives the mesh depth. *\/\nbody main#main-content > .landing-hero::after {\n inset: -30% -24% !important;\n opacity: .82 !important;\n background:\n radial-gradient(38% 54% at 9% 12%,\n rgba(0, 1, 25, .98) 0%,\n rgba(0, 2, 42, .80) 28%,\n rgba(0, 4, 67, .30) 54%,\n rgba(0, 4, 67, 0) 76%),\n radial-gradient(30% 34% at 34% 76%,\n rgba(7, 18, 112, .50) 0%,\n rgba(7, 18, 112, .16) 48%,\n rgba(7, 18, 112, 0) 76%);\n filter: blur(22px) !important;\n animation: heroMeshLayerB 21s cubic-bezier(.45,0,.55,1) infinite !important;\n}\n\n\/* Keep hero content above both animated layers. *\/\nbody main#main-content > .landing-hero > * {\n position: relative !important;\n z-index: 1 !important;\n}\n\n@keyframes heroMeshLayerA {\n 0%, 100% {\n transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg);\n }\n 20% {\n transform: translate3d(4%, -6%, 0) scale(1.10) rotate(1.2deg);\n }\n 40% {\n transform: translate3d(8%, 1%, 0) scale(1.06) rotate(-.8deg);\n }\n 60% {\n transform: translate3d(2%, 7%, 0) scale(1.12) rotate(.7deg);\n }\n 80% {\n transform: translate3d(-7%, 3%, 0) scale(1.08) rotate(-1deg);\n }\n}\n\n@keyframes heroMeshLayerB {\n 0%, 100% {\n transform: translate3d(3%, 1%, 0) scale(1.06) rotate(0deg);\n }\n 25% {\n transform: translate3d(-5%, 5%, 0) scale(1.11) rotate(-1deg);\n }\n 50% {\n transform: translate3d(-1%, -5%, 0) scale(1.07) rotate(.8deg);\n }\n 75% {\n transform: translate3d(6%, -1%, 0) scale(1.12) rotate(-.6deg);\n }\n}\n\n\/* Slightly larger motion on narrow screens so it remains visibly alive. *\/\n@media (max-width: 720px) {\n body main#main-content > .landing-hero::before {\n inset: -26% -52% !important;\n filter: blur(14px) !important;\n }\n\n body main#main-content > .landing-hero::after {\n inset: -24% -48% !important;\n filter: blur(18px) !important;\n }\n}\n\n\/* Respect system accessibility preference. *\/\n@media (prefers-reduced-motion: reduce) {\n body main#main-content > .landing-hero::before,\n body main#main-content > .landing-hero::after {\n animation: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-zasob1-bottom-final\">\n\/* Final hero: use Zasob-1.svg at the bottom of the section, with copy above it. *\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n position: relative !important;\n isolation: isolate !important;\n overflow: hidden !important;\n display: flex !important;\n align-items: flex-start !important;\n justify-content: center !important;\n margin-top: 0 !important;\n padding-top: clamp(138px, 12vw, 176px) !important;\n padding-right: clamp(18px, 2.4vw, 28px) !important;\n padding-bottom: clamp(320px, 28vw, 470px) !important;\n padding-left: clamp(18px, 2.4vw, 28px) !important;\n min-height: 0 !important;\n background-color: #003BF3 !important;\n background-image: url(\"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Hero-2027-1.svg\") !important;\n background-repeat: no-repeat !important;\n background-position: center bottom !important;\n background-size: min(100%, 1680px) auto !important;\n animation: none !important;\n}\n\nbody main#main-content > .landing-hero::before,\nbody main#main-content > .landing-hero::after,\nbody main > .landing-hero::before,\nbody main > .landing-hero::after {\n content: none !important;\n display: none !important;\n}\n\nbody main#main-content > .landing-hero > *,\nbody main > .landing-hero > * {\n position: relative !important;\n z-index: 1 !important;\n}\n\nbody main#main-content > .landing-hero .landing-hero__copy,\nbody main > .landing-hero .landing-hero__copy {\n width: 100% !important;\n max-width: 920px !important;\n margin: 0 auto !important;\n text-align: center !important;\n}\n\nbody main#main-content > .landing-hero + .clients,\nbody main#main-content > .landing-hero + section,\nbody main > .landing-hero + .clients,\nbody main > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: clamp(28px, 4vw, 40px) !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-top: 128px !important;\n padding-bottom: calc(52vw + 28px) !important;\n background-size: calc(100% - 32px) auto !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n width: 100vw !important;\n max-width: none !important;\n margin-right: calc(50% - 50vw) !important;\n margin-left: calc(50% - 50vw) !important;\n padding-top: 114px !important;\n padding-right: 18px !important;\n padding-bottom: calc(58vw + 18px) !important;\n padding-left: 18px !important;\n background-size: calc(100% - 18px) auto !important;\n background-position: center bottom !important;\n }\n\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section,\n body main > .landing-hero + .clients,\n body main > .landing-hero + section {\n padding-top: 28px !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-top: 108px !important;\n padding-right: 16px !important;\n padding-bottom: calc(62vw + 12px) !important;\n padding-left: 16px !important;\n background-size: calc(100% - 14px) auto !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n animation: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-image-fullwidth-much-lower-final\">\n\/* Push the hero artwork much lower and make it span the full hero width. *\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n background-size: 100% auto !important;\n background-position: center bottom !important;\n\n \/* More room between the copy and the artwork. *\/\n padding-bottom: clamp(520px, 43vw, 760px) !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n background-size: 100% auto !important;\n padding-bottom: calc(68vw + 56px) !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n background-size: 100% auto !important;\n background-position: center bottom !important;\n padding-bottom: calc(74vw + 52px) !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(78vw + 44px) !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-image-even-lower-final\">\n\/* Move the full-width hero artwork even lower. *\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n background-position: center bottom !important;\n padding-bottom: clamp(640px, 52vw, 900px) !important;\n}\n\n@media (max-width: 900px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(82vw + 72px) !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(90vw + 64px) !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(96vw + 54px) !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-mobile-image-higher-final\">\n\/* Mobile only: bring the full-width hero artwork higher. Desktop remains unchanged. *\/\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(72vw + 42px) !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(76vw + 36px) !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-folder-mobile-tuning-final\">\n\/* =========================================================\n HERO POSITION TUNING\n Desktop: artwork a little lower.\n Mobile: artwork noticeably higher.\n ========================================================= *\/\n@media (min-width: 901px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: clamp(700px, 56vw, 960px) !important;\n background-position: center bottom !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(60vw + 26px) !important;\n background-position: center bottom !important;\n }\n}\n\n@media (max-width: 390px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: calc(64vw + 22px) !important;\n }\n}\n\n\/* =========================================================\n WEBSITE FOLDERS - MOBILE-FIRST SWIPE CAROUSEL\n ========================================================= *\/\n@media (max-width: 720px) {\n body .websites {\n overflow: visible !important;\n }\n\n body .websites__header {\n margin-bottom: 16px !important;\n }\n\n \/* On mobile, swipe is the primary control. *\/\n body .websites__controls {\n display: none !important;\n }\n\n body .websites__links {\n display: flex !important;\n flex-wrap: nowrap !important;\n gap: 12px !important;\n width: calc(100% + 18px) !important;\n margin-right: -18px !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n padding: 2px 18px 12px 0 !important;\n scroll-padding-left: 0 !important;\n scroll-padding-right: 18px !important;\n scroll-snap-type: x mandatory !important;\n scroll-behavior: smooth !important;\n -webkit-overflow-scrolling: touch !important;\n overscroll-behavior-x: contain !important;\n touch-action: pan-x pan-y !important;\n scrollbar-width: none !important;\n cursor: grab !important;\n }\n\n body .websites__links::-webkit-scrollbar {\n display: none !important;\n }\n\n body .websites__links:active {\n cursor: grabbing !important;\n }\n\n body .websites .website-link {\n flex: 0 0 min(82vw, 310px) !important;\n width: min(82vw, 310px) !important;\n max-width: 310px !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n}\n\n@media (max-width: 390px) {\n body .websites__links {\n width: calc(100% + 16px) !important;\n margin-right: -16px !important;\n padding-right: 16px !important;\n scroll-padding-right: 16px !important;\n gap: 10px !important;\n }\n\n body .websites .website-link {\n flex-basis: min(86vw, 292px) !important;\n width: min(86vw, 292px) !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"services-clean-reference-final\">\nbody .service-strip {\n width: 100% !important;\n min-width: 0 !important;\n}\n\nbody .service-strip__icons {\n display: flex !important;\n gap: 16px !important;\n align-items: center !important;\n width: 100% !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n padding: 8px 4px !important;\n scrollbar-width: thin !important;\n scrollbar-color: #BABABA transparent !important;\n -webkit-overflow-scrolling: touch !important;\n}\n\nbody .service-strip__button {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n flex: 1 0 48px !important;\n min-width: 48px !important;\n width: auto !important;\n height: 56px !important;\n min-height: 56px !important;\n aspect-ratio: auto !important;\n padding: 12px !important;\n margin: 0 !important;\n border: 0 !important;\n border-radius: 12px !important;\n background: transparent !important;\n color: #003BF3 !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n transition: background-color .16s ease, color .16s ease !important;\n}\n\nbody .service-strip__button svg {\n width: 28px !important;\n height: 28px !important;\n margin: 0 !important;\n flex-shrink: 0 !important;\n stroke: currentColor !important;\n fill: none !important;\n}\n\nbody .service-strip__button:hover {\n background: #DCDEE2 !important;\n}\n\nbody .service-strip__button[aria-expanded=\"true\"] {\n background: #003BF3 !important;\n color: #fff !important;\n}\n\nbody .service-strip__button:active {\n background: #000051 !important;\n color: #fff !important;\n}\n\nbody .service-strip__button:focus-visible {\n outline: 2px solid #003BF3 !important;\n outline-offset: 2px !important;\n}\n\nbody .service-strip__details {\n display: grid !important;\n grid-template-columns: minmax(0, 1fr) !important;\n align-items: start !important;\n width: 100% !important;\n}\n\nbody .service-strip__details > .service-strip__panel {\n grid-area: 1 \/ 1 !important;\n min-width: 0 !important;\n width: 100% !important;\n max-width: 640px !important;\n box-sizing: border-box !important;\n padding: 24px 4px 0 !important;\n margin: 0 !important;\n animation: serviceRevealClean .18s ease !important;\n}\n\nbody .service-strip__details > .service-strip__panel[hidden] {\n display: block !important;\n visibility: hidden !important;\n pointer-events: none !important;\n animation: none !important;\n}\n\nbody .service-strip__panel h3 {\n margin: 0 0 8px !important;\n color: #003BF3 !important;\n}\n\nbody .service-strip__panel p {\n margin: 0 !important;\n color: #000051 !important;\n}\n\n@keyframes serviceRevealClean {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 760px) {\n body .service-strip__icons {\n gap: 8px !important;\n scrollbar-width: none !important;\n }\n\n body .service-strip__icons::-webkit-scrollbar {\n display: none !important;\n }\n\n body .service-strip__button {\n flex: 0 0 56px !important;\n width: 56px !important;\n min-width: 56px !important;\n }\n\n body .service-strip__details > .service-strip__panel {\n max-width: 100% !important;\n padding-top: 20px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .service-strip__details > .service-strip__panel {\n animation: none !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"website-folders-shorter-final\">\n\/* Website folders: shorter, closer in visual weight to the video thumbnails. *\/\nbody .websites .website-link,\nbody .websites .website-link--preview {\n aspect-ratio: 1.28 \/ 1 !important;\n}\n\n\/* Rebalance the content for the reduced height. *\/\nbody .websites .website-link__number {\n top: 25% !important;\n font-size: clamp(40px, 4vw, 54px) !important;\n}\n\nbody .websites .website-link__arrow {\n top: 25% !important;\n}\n\nbody .websites .website-link__content {\n bottom: clamp(16px, 1.8vw, 22px) !important;\n gap: 5px !important;\n}\n\nbody .websites .website-link__name {\n font-size: clamp(14px, 1.25vw, 17px) !important;\n}\n\nbody .websites .website-link__description {\n font-size: clamp(10.5px, .9vw, 12px) !important;\n line-height: 1.3 !important;\n}\n\n\/* Keep the folder-face transition proportional to the new, shorter card. *\/\nbody .websites .website-link:hover::after,\nbody .websites .website-link:focus-visible::after {\n transform: translate3d(0, 30%, 0) !important;\n}\n\n@media (max-width: 720px) {\n body .websites .website-link,\n body .websites .website-link--preview {\n aspect-ratio: 1.22 \/ 1 !important;\n }\n\n body .websites .website-link__number {\n top: 24% !important;\n font-size: 42px !important;\n }\n\n body .websites .website-link__arrow {\n top: 24% !important;\n }\n\n body .websites .website-link__content {\n bottom: 16px !important;\n }\n}\n\n@media (max-width: 390px) {\n body .websites .website-link,\n body .websites .website-link--preview {\n aspect-ratio: 1.18 \/ 1 !important;\n }\n}\n<\/style>\n\n\n<style id=\"clients-seamless-marquee-final\">\n\/* =========================================================\n CLIENT LOGOS - one authoritative seamless marquee engine.\n Motion is driven only by translate3d() from requestAnimationFrame.\n ========================================================= *\/\n\nbody .clients__marquee {\n position: relative !important;\n width: 100% !important;\n overflow: hidden !important;\n cursor: grab !important;\n touch-action: pan-y !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n scrollbar-width: none !important;\n}\n\nbody .clients__marquee.is-dragging {\n cursor: grabbing !important;\n}\n\nbody .clients__track,\nbody .clients.is-logo-carousel-enhanced .clients__track {\n display: flex !important;\n width: max-content !important;\n max-width: none !important;\n animation: none !important;\n transform: translate3d(0, 0, 0);\n will-change: transform !important;\n backface-visibility: hidden !important;\n -webkit-backface-visibility: hidden !important;\n contain: layout paint style !important;\n}\n\nbody .clients__group {\n display: flex !important;\n flex: 0 0 auto !important;\n align-items: center !important;\n}\n\n\/* Controls remain fully functional. *\/\nbody .clients__controls {\n display: flex !important;\n align-items: center !important;\n gap: 8px !important;\n}\n\nbody .clients__arrow {\n pointer-events: auto !important;\n touch-action: manipulation !important;\n}\n\n@media (max-width: 720px) {\n body .clients__header {\n justify-content: space-between !important;\n }\n\n body .clients__controls {\n display: flex !important;\n }\n\n body .clients__arrow {\n width: 34px !important;\n height: 34px !important;\n }\n}\n<\/style>\n\n\n<style id=\"problem-cards-icon-number-alignment-final\">\n\/* Align icon badges with the 01 \/ 02 \/ 03 \/ 04 number badges. *\/\nbody .problems-section--cards .problem-card__top {\n align-items: flex-start !important;\n}\n\nbody .problems-section--cards .problem-card__icon {\n width: 46px !important;\n height: 46px !important;\n border-radius: 14px !important;\n margin-top: 0 !important;\n}\n\nbody .problems-section--cards .problem-card__icon svg {\n width: 20px !important;\n height: 20px !important;\n}\n\nbody .problems-section--cards .problem-card__no {\n min-width: 46px !important;\n height: 46px !important;\n margin-top: 0 !important;\n}\n<\/style>\n\n\n<style id=\"mobile-hero-line-spacing-final\">\n@media (max-width: 720px) {\n body .landing-hero__subeyebrow {\n line-height: 1.45 !important;\n }\n\n body .landing-hero__lead {\n line-height: 1.62 !important;\n }\n\n body .landing-hero__title {\n line-height: 1.12 !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"preloader-original-text-animation-percent-final\">\n\/* Percentage version using the ORIGINAL text-preloader motion. *\/\n.has-name-reveal .name-preloader {\n animation: none !important;\n opacity: 1;\n visibility: visible;\n clip-path: inset(0 0 0 0);\n -webkit-clip-path: inset(0 0 0 0);\n}\n\n\/* At real 100%, run exactly the old exit motion. *\/\n.has-name-reveal .name-preloader.is-loading-complete {\n animation: nameRevealExit .85s cubic-bezier(.76,0,.24,1) .12s both !important;\n}\n\n\/* Restore the original text entrance animation for the percentage too. *\/\n.name-preloader__text[data-loading-percent] {\n min-width: 3.2ch;\n font-variant-numeric: tabular-nums;\n font-feature-settings: \"tnum\" 1;\n animation: nameRevealText .65s cubic-bezier(.22,1,.36,1) .08s both !important;\n}\n\n\/* Original site's exit animation, repeated here as the final authoritative definition. *\/\n@keyframes nameRevealExit {\n from {\n clip-path: inset(0 0 0 0);\n -webkit-clip-path: inset(0 0 0 0);\n visibility: visible;\n }\n to {\n clip-path: inset(0 0 100% 0);\n -webkit-clip-path: inset(0 0 100% 0);\n visibility: hidden;\n }\n}\n\n@keyframes nameRevealText {\n from {\n transform: translateY(115%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .has-name-reveal .name-preloader.is-loading-complete {\n animation-duration: .25s !important;\n animation-delay: .04s !important;\n }\n}\n<\/style>\n\n\n<style id=\"website-folders-taller-final\">\n\/* Taller website folders - between the original tall version and the shortened one. *\/\nbody .websites .website-link,\nbody .websites .website-link--preview {\n aspect-ratio: 1.08 \/ 1 !important;\n}\n\n@media (max-width: 720px) {\n body .websites .website-link,\n body .websites .website-link--preview {\n aspect-ratio: 1.03 \/ 1 !important;\n }\n}\n\n@media (max-width: 390px) {\n body .websites .website-link,\n body .websites .website-link--preview {\n aspect-ratio: 1 \/ 1 !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"website-folder-color-media-final\">\n\/* One shared blue media color behind every existing folder front.\n The original folder front, masks, hover motion and transitions remain untouched. *\/\nbody .websites .website-link[data-folder-theme] { --folder-media-color: #0f21ae; }\n\nbody .websites .website-link > .website-link__color-preview {\n position: absolute !important;\n z-index: 1 !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: var(--folder-media-color) !important;\n pointer-events: none !important;\n transform: none !important;\n}\n\n<\/style>\n\n\n<style id=\"case-studies-and-folder-number-final\">\n\/* ---------------------------------------------------------\n FOLDER NUMBERS - one authoritative motion for 01-07.\n Every number now follows exactly the same downward motion as 01.\n --------------------------------------------------------- *\/\nbody .websites .website-link .website-link__number {\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease !important;\n}\nbody .websites .website-link:hover .website-link__number,\nbody .websites .website-link:focus-visible .website-link__number {\n top: 61% !important;\n transform: translateY(-14px) !important;\n}\n@media (max-width: 420px) {\n body .websites .website-link:hover .website-link__number,\n body .websites .website-link:focus-visible .website-link__number {\n top: 61% !important;\n transform: translateY(-10px) !important;\n }\n}\n\n\/* ---------------------------------------------------------\n CASE STUDY - full-screen editorial overlay.\n --------------------------------------------------------- *\/\nhtml.case-study-open,\nhtml.case-study-open body {\n overflow: hidden !important;\n}\n\n.case-study-shell {\n position: fixed;\n inset: 0;\n z-index: 10000;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n background: #f6f6f3;\n color: #000029;\n transition: opacity .38s ease, visibility 0s linear .38s;\n}\n\n.case-study-shell.is-open {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n transition: opacity .38s ease, visibility 0s;\n}\n\n.case-study-shell__viewport {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scroll-behavior: smooth;\n}\n\n.case-study-shell__chrome {\n position: sticky;\n top: 0;\n z-index: 30;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n padding: 12px var(--page-x);\n background: color-mix(in srgb, #f6f6f3 86%, transparent);\n -webkit-backdrop-filter: blur(18px) saturate(1.1);\n backdrop-filter: blur(18px) saturate(1.1);\n border-bottom: 1px solid rgba(0,0,41,.10);\n}\n\n.case-study-shell__brand {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n font-family: var(--inter);\n font-size: var(--scale-minus-1);\n letter-spacing: .08em;\n text-transform: uppercase;\n}\n\n.case-study-shell__brand-dot {\n width: 10px;\n height: 10px;\n flex: 0 0 10px;\n border-radius: 50%;\n background: var(--case-accent, #000029);\n box-shadow: inset 0 0 0 1px rgba(0,0,41,.12);\n}\n\n.case-study-shell__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.case-study-shell__button,\n.case-story__live,\n.case-story__nav-button {\n appearance: none;\n border: 1px solid rgba(0,0,41,.18);\n background: transparent;\n color: inherit;\n text-decoration: none;\n border-radius: 999px;\n min-height: 42px;\n padding: 10px 15px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: var(--inter);\n font-size: var(--scale-minus-1);\n line-height: 1;\n letter-spacing: .06em;\n text-transform: uppercase;\n cursor: pointer;\n transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;\n}\n\n.case-study-shell__button:hover,\n.case-study-shell__button:focus-visible,\n.case-story__nav-button:hover,\n.case-story__nav-button:focus-visible {\n transform: translateY(-1px);\n border-color: #000029;\n background: #000029;\n color: #fff;\n outline: none;\n}\n\n.case-study-shell__button--close {\n width: 42px;\n padding: 0;\n font-size: 18px;\n}\n\n.case-story {\n --case-accent: #000029;\n --case-ink: #000029;\n display: none;\n width: 100%;\n}\n\n.case-story.is-active {\n display: block;\n animation: caseStoryIn .52s cubic-bezier(.22,1,.36,1) both;\n}\n\n@keyframes caseStoryIn {\n from { opacity: 0; transform: translateY(18px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.case-story__hero {\n position: relative;\n min-height: min(82vh, 820px);\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);\n align-items: end;\n gap: clamp(40px, 7vw, 120px);\n padding: clamp(70px, 10vw, 138px) var(--page-x) clamp(54px, 8vw, 96px);\n overflow: hidden;\n border-bottom: 1px solid rgba(0,0,41,.10);\n background:\n radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--case-accent) 28%, transparent) 0 17%, transparent 47%),\n linear-gradient(180deg, color-mix(in srgb, var(--case-accent) 12%, #f6f6f3) 0%, #f6f6f3 72%);\n}\n\n.case-story__hero::after {\n content: \"\";\n position: absolute;\n width: min(46vw, 620px);\n aspect-ratio: 1;\n right: -10vw;\n top: -14vw;\n border-radius: 50%;\n border: 1px solid color-mix(in srgb, var(--case-accent) 45%, transparent);\n pointer-events: none;\n transform: translate3d(var(--case-pointer-x, 0), var(--case-pointer-y, 0), 0);\n transition: transform .35s ease-out;\n}\n\n.case-story__eyebrow {\n margin: 0 0 18px;\n font-family: var(--inter);\n font-size: var(--scale-minus-1);\n line-height: 1.35;\n letter-spacing: .14em;\n text-transform: uppercase;\n color: rgba(0,0,41,.58);\n}\n\n.case-story__title {\n max-width: 850px;\n margin: 0;\n font-family: var(--serif);\n font-size: clamp(50px, 8.2vw, 128px);\n line-height: .88;\n letter-spacing: -.075em;\n font-weight: 400;\n}\n\n.case-story__lead {\n max-width: 560px;\n margin: 28px 0 0;\n font-size: clamp(16px, 1.45vw, 21px);\n line-height: 1.55;\n letter-spacing: -.025em;\n color: #000051;\n}\n\n.case-story__hero-meta {\n position: relative;\n z-index: 2;\n align-self: end;\n display: grid;\n gap: 22px;\n padding: clamp(22px, 3vw, 34px);\n border: 1px solid rgba(0,0,41,.10);\n border-radius: 28px;\n background: rgba(255,255,255,.55);\n -webkit-backdrop-filter: blur(18px);\n backdrop-filter: blur(18px);\n}\n\n.case-story__hero-number {\n font-family: var(--serif);\n font-size: clamp(76px, 9vw, 132px);\n line-height: .8;\n letter-spacing: -.08em;\n color: var(--case-accent);\n -webkit-text-stroke: 1px color-mix(in srgb, var(--case-ink) 14%, transparent);\n}\n\n.case-story__meta-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n}\n\n.case-story__meta-item small,\n.case-story__section-kicker,\n.case-story__font-role,\n.case-story__visual-label {\n display: block;\n margin-bottom: 6px;\n font-family: var(--inter);\n font-size: 11px;\n line-height: 1.3;\n letter-spacing: .13em;\n text-transform: uppercase;\n color: rgba(0,0,41,.50);\n}\n\n.case-story__meta-item strong {\n font-family: var(--inter);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.45;\n}\n\n.case-story__live {\n width: fit-content;\n border-color: var(--case-accent);\n background: var(--case-accent);\n color: var(--case-ink);\n}\n\n.case-story__live:hover,\n.case-story__live:focus-visible {\n transform: translateY(-2px);\n filter: brightness(.96);\n outline: none;\n}\n\n.case-story__section {\n padding: clamp(72px, 9vw, 126px) var(--page-x);\n border-bottom: 1px solid rgba(0,0,41,.10);\n}\n\n.case-story__section-inner {\n width: min(100%, 1320px);\n margin: 0 auto;\n}\n\n.case-story__section-head {\n display: grid;\n grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);\n gap: clamp(28px, 6vw, 100px);\n align-items: start;\n margin-bottom: clamp(38px, 6vw, 72px);\n}\n\n.case-story__section-title {\n margin: 0;\n max-width: 800px;\n font-family: var(--serif);\n font-size: clamp(38px, 5.4vw, 78px);\n line-height: .98;\n letter-spacing: -.055em;\n font-weight: 400;\n}\n\n.case-story__copy-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: clamp(24px, 5vw, 84px);\n}\n\n.case-story__copy-card {\n padding-top: 20px;\n border-top: 1px solid #000029;\n}\n\n.case-story__copy-card h3 {\n margin: 0 0 16px;\n font-family: var(--inter);\n font-size: 12px;\n letter-spacing: .14em;\n text-transform: uppercase;\n font-weight: 500;\n}\n\n.case-story__copy-card p {\n margin: 0;\n max-width: 610px;\n color: #000051;\n font-size: clamp(16px, 1.25vw, 19px);\n line-height: 1.7;\n letter-spacing: -.018em;\n}\n\n.case-story__visuals {\n display: grid;\n grid-template-columns: minmax(0, 1.75fr) minmax(220px, .65fr);\n gap: clamp(18px, 3vw, 34px);\n align-items: start;\n}\n\n.case-story__desktop-stack,\n.case-story__mobile-stack {\n display: grid;\n gap: clamp(18px, 2vw, 26px);\n}\n\n.case-story__visual {\n position: relative;\n overflow: hidden;\n border-radius: clamp(18px, 2vw, 28px);\n background:\n linear-gradient(135deg, color-mix(in srgb, var(--case-accent) 72%, #fff) 0%, color-mix(in srgb, var(--case-accent) 18%, #f6f6f3) 100%);\n box-shadow: inset 0 0 0 1px rgba(0,0,41,.10);\n transition: transform .32s cubic-bezier(.22,.78,.2,1), box-shadow .32s ease;\n transform-style: preserve-3d;\n}\n\n.case-story__visual:hover {\n transform: translateY(-5px) rotateX(.8deg) rotateY(-.8deg);\n box-shadow: 0 24px 60px rgba(0,0,41,.10), inset 0 0 0 1px rgba(0,0,41,.10);\n}\n\n.case-story__visual--desktop {\n aspect-ratio: 16 \/ 10;\n}\n\n.case-story__visual--mobile {\n aspect-ratio: 9 \/ 18;\n width: min(100%, 280px);\n justify-self: center;\n}\n\n.case-story__browser-bar {\n height: 38px;\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 14px;\n background: rgba(255,255,255,.65);\n border-bottom: 1px solid rgba(0,0,41,.08);\n}\n\n.case-story__browser-bar i {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: rgba(0,0,41,.24);\n}\n\n.case-story__placeholder-ui {\n position: absolute;\n inset: 38px 0 0;\n padding: clamp(18px, 3vw, 40px);\n display: grid;\n align-content: space-between;\n gap: 18px;\n}\n\n.case-story__placeholder-line {\n display: block;\n height: 10px;\n max-width: 72%;\n border-radius: 999px;\n background: color-mix(in srgb, var(--case-ink) 18%, transparent);\n}\n.case-story__placeholder-line--lg { height: clamp(34px, 5vw, 72px); max-width: 74%; border-radius: 14px; }\n.case-story__placeholder-line--sm { max-width: 42%; }\n\n.case-story__placeholder-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0,1fr));\n gap: 12px;\n}\n.case-story__placeholder-grid span {\n aspect-ratio: 1.3 \/ 1;\n border-radius: 12px;\n background: rgba(255,255,255,.55);\n box-shadow: inset 0 0 0 1px rgba(0,0,41,.06);\n}\n\n.case-story__visual-label {\n position: absolute;\n z-index: 3;\n left: 14px;\n bottom: 12px;\n margin: 0;\n color: var(--case-ink);\n opacity: .72;\n}\n\n.case-story__system-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: clamp(22px, 4vw, 60px);\n}\n\n.case-story__system-block {\n padding: clamp(22px, 3vw, 34px);\n border: 1px solid rgba(0,0,41,.10);\n border-radius: 26px;\n background: #fff;\n}\n\n.case-story__system-block h3 {\n margin: 0 0 26px;\n font-family: var(--inter);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: .14em;\n text-transform: uppercase;\n}\n\n.case-story__fonts {\n display: grid;\n gap: 14px;\n}\n\n.case-story__font-card {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 18px;\n padding: 18px 0;\n border-top: 1px solid rgba(0,0,41,.10);\n}\n\n.case-story__font-card:first-child { border-top: 0; padding-top: 0; }\n.case-story__font-name {\n font-family: var(--serif);\n font-size: clamp(30px, 3vw, 46px);\n letter-spacing: -.04em;\n}\n\n.case-story__swatches {\n display: grid;\n grid-template-columns: repeat(2, minmax(0,1fr));\n gap: 12px;\n}\n\n.case-story__swatch {\n appearance: none;\n min-height: 112px;\n padding: 14px;\n display: flex;\n align-items: flex-end;\n justify-content: flex-start;\n border-radius: 18px;\n border: 1px solid rgba(0,0,41,.10);\n background: var(--swatch);\n color: var(--swatch-text, #000029);\n font-family: var(--inter);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: .06em;\n cursor: pointer;\n transition: transform .18s ease;\n}\n.case-story__swatch:hover,\n.case-story__swatch:focus-visible { transform: translateY(-3px); outline: none; }\n.case-story__swatch.is-copied::after { content: \"Copied\"; margin-left: 8px; opacity: .65; }\n\n.case-story__footer {\n padding: clamp(54px, 8vw, 96px) var(--page-x) clamp(70px, 10vw, 120px);\n}\n.case-story__footer-inner {\n width: min(100%, 1320px);\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}\n.case-story__footer-title {\n margin: 0;\n font-family: var(--serif);\n font-size: clamp(34px, 4.5vw, 66px);\n font-weight: 400;\n letter-spacing: -.055em;\n}\n.case-story__nav { display: flex; gap: 8px; }\n\n.case-study-toast {\n position: fixed;\n left: 50%;\n bottom: 24px;\n z-index: 10020;\n transform: translate(-50%, 16px);\n opacity: 0;\n pointer-events: none;\n padding: 10px 14px;\n border-radius: 999px;\n background: #000029;\n color: #fff;\n font-family: var(--inter);\n font-size: 12px;\n transition: opacity .2s ease, transform .2s ease;\n}\n.case-study-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }\n\n@media (max-width: 900px) {\n .case-story__hero { grid-template-columns: 1fr; min-height: auto; }\n .case-story__hero-meta { max-width: 620px; }\n .case-story__section-head { grid-template-columns: 1fr; gap: 12px; }\n .case-story__visuals { grid-template-columns: 1fr; }\n .case-story__mobile-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }\n .case-story__visual--mobile { width: 100%; max-width: 280px; }\n}\n\n@media (max-width: 680px) {\n .case-study-shell__chrome { padding: 10px 14px; }\n .case-study-shell__brand { max-width: 48vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n .case-study-shell__button--text { display: none; }\n .case-story__hero,\n .case-story__section,\n .case-story__footer { padding-left: 18px; padding-right: 18px; }\n .case-story__copy-grid,\n .case-story__system-grid { grid-template-columns: 1fr; }\n .case-story__mobile-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }\n .case-story__footer-inner { align-items: flex-start; flex-direction: column; }\n .case-story__nav { width: 100%; }\n .case-story__nav-button { flex: 1; }\n}\n\n@media (max-width: 430px) {\n .case-story__mobile-stack { grid-template-columns: 1fr 1fr; }\n .case-story__swatches { grid-template-columns: 1fr 1fr; }\n .case-story__hero-meta { border-radius: 22px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .case-study-shell,\n .case-story.is-active,\n .case-story__visual,\n .case-story__swatch,\n .case-study-shell__button,\n .case-story__nav-button,\n .case-story__hero::after { animation: none !important; transition: none !important; }\n .case-study-shell__viewport { scroll-behavior: auto; }\n}\n<\/style>\n\n\n<style id=\"case-study-password-gate-final\">\n\/* Temporary client-side password gate for all case studies. *\/\n.case-study-shell.is-locked .case-study-shell__viewport {\n visibility: hidden;\n pointer-events: none;\n}\n.case-password-gate {\n position: absolute;\n inset: 0;\n z-index: 80;\n display: grid;\n place-items: center;\n padding: clamp(20px, 5vw, 64px);\n background:\n radial-gradient(circle at 78% 18%, rgba(0,59,243,.16) 0 12%, transparent 42%),\n #f6f6f3;\n}\n.case-password-gate[hidden] { display: none !important; }\n.case-password-gate__panel {\n width: min(100%, 520px);\n padding: clamp(28px, 5vw, 52px);\n border: 1px solid rgba(0,0,41,.14);\n border-radius: clamp(24px, 3vw, 36px);\n background: rgba(255,255,255,.76);\n -webkit-backdrop-filter: blur(20px) saturate(1.1);\n backdrop-filter: blur(20px) saturate(1.1);\n box-shadow: 0 30px 90px rgba(0,0,41,.10);\n animation: casePasswordIn .46s cubic-bezier(.22,1,.36,1) both;\n}\n@keyframes casePasswordIn {\n from { opacity: 0; transform: translateY(18px) scale(.985); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n}\n.case-password-gate__eyebrow {\n margin: 0 0 14px;\n font-family: var(--inter);\n font-size: 11px;\n line-height: 1.3;\n letter-spacing: .14em;\n text-transform: uppercase;\n color: rgba(0,0,41,.48);\n}\n.case-password-gate__title {\n margin: 0;\n font-family: var(--serif);\n font-size: clamp(42px, 7vw, 72px);\n line-height: .94;\n letter-spacing: -.06em;\n font-weight: 400;\n}\n.case-password-gate__copy {\n margin: 18px 0 28px;\n max-width: 42ch;\n color: #000051;\n font-size: 15px;\n line-height: 1.6;\n}\n.case-password-gate__form { display: grid; gap: 12px; }\n.case-password-gate__field {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 8px;\n align-items: stretch;\n}\n.case-password-gate__input {\n width: 100%;\n min-width: 0;\n height: 48px;\n padding: 0 16px;\n border: 1px solid rgba(0,0,41,.20);\n border-radius: 999px;\n outline: 0;\n background: #fff;\n color: #000029;\n font: 500 15px\/1 var(--inter);\n transition: border-color .18s ease, box-shadow .18s ease;\n}\n.case-password-gate__input:focus {\n border-color: #003BF3;\n box-shadow: 0 0 0 3px rgba(0,59,243,.10);\n}\n.case-password-gate__submit,\n.case-password-gate__close {\n appearance: none;\n min-height: 48px;\n border-radius: 999px;\n border: 1px solid #003BF3;\n padding: 0 20px;\n background: #003BF3;\n color: #fff;\n font: 500 12px\/1 var(--inter);\n letter-spacing: .08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: transform .18s ease, filter .18s ease;\n}\n.case-password-gate__submit:hover,\n.case-password-gate__submit:focus-visible,\n.case-password-gate__close:hover,\n.case-password-gate__close:focus-visible {\n transform: translateY(-1px);\n filter: brightness(.94);\n outline: none;\n}\n.case-password-gate__close {\n width: 100%;\n border-color: rgba(0,0,41,.16);\n background: transparent;\n color: #000029;\n}\n.case-password-gate__error {\n min-height: 20px;\n margin: 0;\n color: #b42318;\n font: 500 13px\/1.45 var(--inter);\n}\n.case-password-gate.is-error .case-password-gate__panel {\n animation: casePasswordShake .32s ease;\n}\n@keyframes casePasswordShake {\n 0%,100% { transform: translateX(0); }\n 25% { transform: translateX(-7px); }\n 75% { transform: translateX(7px); }\n}\n@media (max-width: 520px) {\n .case-password-gate__field { grid-template-columns: 1fr; }\n .case-password-gate__submit { width: 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n .case-password-gate__panel,\n .case-password-gate.is-error .case-password-gate__panel { animation: none !important; }\n}\n<\/style>\n\n<style id=\"websites-eyebrow-final\">\nbody .websites__header {\n align-items: flex-end !important;\n}\nbody .websites__heading-copy {\n display: grid;\n gap: 12px;\n min-width: 0;\n}\nbody .websites__heading-copy .section-title--major {\n margin: 0 !important;\n}\nbody .websites__eyebrow {\n margin: 0 !important;\n color: #003BF3 !important;\n font-family: var(--sans) !important;\n font-size: var(--type-label, .875rem) !important;\n font-weight: 600 !important;\n line-height: 1.4 !important;\n letter-spacing: .08em !important;\n text-transform: uppercase;\n}\n@media (max-width: 760px) {\n body .websites__header {\n align-items: flex-start !important;\n }\n}\n<\/style>\n\n<style id=\"www-folders-blue-final\">\n\/* WWW folders: no preview photography; darker back + brighter blue front from the site palette. *\/\nbody .websites .website-link,\nbody .websites .website-link--preview {\n background: #000051 !important;\n}\n\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n background: #003BF3 !important;\n}\n\n\/* Safety fallback in case preview markup is reintroduced later. *\/\nbody .websites .website-link__preview {\n display: none !important;\n}\n<\/style>\n\n\n\n<style id=\"service-strip-mobile-swipe-dots-final\">\n\/* Mobile-only, non-verbal swipe cue for the services carousel.\n Matches the testimonial dot language: tiny dots + elongated active state. *\/\nbody .service-strip__mobile-dots {\n display: none;\n}\n\n@media (max-width: 720px) {\n body .service-strip__mobile-dots {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n margin: -18px 0 18px;\n color: var(--soft);\n user-select: none;\n pointer-events: none;\n }\n\n body .service-strip__mobile-dots[hidden] {\n display: none !important;\n }\n\n body .service-strip__mobile-dot {\n width: 4px;\n height: 4px;\n flex: 0 0 auto;\n border-radius: 50%;\n background: currentColor;\n opacity: .32;\n transition: width .18s ease, opacity .18s ease;\n }\n\n body .service-strip__mobile-dot.is-active {\n width: 13px;\n border-radius: 999px;\n opacity: .9;\n }\n\n \/* Preserve the original vertical rhythm after inserting the cue. *\/\n body .service-strip__details {\n margin-top: 0 !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .service-strip__mobile-dot {\n transition: none;\n }\n}\n<\/style>\n\n\n<style id=\"liquid-glass-nav-pro-redesign\">\n\/* Minimal liquid-glass navigation: icon-only, transparent, flat, no gradients or shadows. *\/\n:root {\n --ux-nav-height: 76px;\n --liquid-nav-ink: #003BF3;\n --liquid-nav-muted: rgba(0,59,243,.52);\n --liquid-nav-focus: rgba(0,59,243,.74);\n}\n\n.liquid-nav {\n position: fixed;\n z-index: 10000;\n top: 14px;\n left: 50%;\n width: min(264px, calc(100vw - 24px));\n transform: translateX(-50%);\n isolation: isolate;\n}\n\n.liquid-nav.is-on-dark {\n --liquid-nav-ink: #fff;\n --liquid-nav-muted: rgba(255,255,255,.62);\n --liquid-nav-focus: rgba(255,255,255,.82);\n}\n\n.liquid-nav__glass {\n --active-index: 0;\n position: relative;\n width: 100%;\n height: 54px;\n padding: 4px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: stretch;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,.30);\n border-radius: 999px;\n background: rgba(255,255,255,.055);\n -webkit-backdrop-filter: blur(14px) saturate(118%);\n backdrop-filter: blur(14px) saturate(118%);\n box-shadow: none !important;\n}\n\n.liquid-nav__glass::before,\n.liquid-nav__glass::after {\n content: none !important;\n display: none !important;\n}\n\n.liquid-nav__indicator {\n position: absolute;\n z-index: 1;\n top: 4px;\n left: 4px;\n width: calc((100% - 8px) \/ 4);\n height: calc(100% - 8px);\n border: 1px solid rgba(255,255,255,.30);\n border-radius: 999px;\n background: rgba(255,255,255,.13);\n -webkit-backdrop-filter: blur(9px) saturate(112%);\n backdrop-filter: blur(9px) saturate(112%);\n box-shadow: none !important;\n transform: translate3d(calc(var(--active-index) * 100%),0,0);\n transition: transform 460ms cubic-bezier(.2,1.18,.32,1);\n will-change: transform;\n pointer-events: none;\n}\n\n.liquid-nav__item {\n position: relative;\n z-index: 2;\n min-width: 0;\n min-height: 46px;\n display: grid;\n place-items: center;\n border-radius: 999px;\n color: var(--liquid-nav-muted);\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n transition: color .18s ease, transform .2s ease;\n}\n\n.liquid-nav__item svg {\n width: 21px;\n height: 21px;\n display: block;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.65;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform .2s ease;\n}\n\n.liquid-nav__item.is-active,\n.liquid-nav__item[aria-current=\"page\"],\n.liquid-nav__item:hover,\n.liquid-nav__item:focus-visible {\n color: var(--liquid-nav-ink);\n}\n\n.liquid-nav__item:hover svg,\n.liquid-nav__item:focus-visible svg {\n transform: scale(1.04);\n}\n\n.liquid-nav__item:focus-visible {\n outline: 1px solid var(--liquid-nav-focus);\n outline-offset: -7px;\n}\n\n#o-mnie,\n#uslugi,\n#realizacje,\n#kontakt {\n scroll-margin-top: calc(var(--ux-nav-height) + 12px) !important;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .liquid-nav__glass { background: rgba(255,255,255,.70); }\n .liquid-nav__indicator { background: rgba(255,255,255,.44); }\n}\n\n@media (max-width: 720px) {\n :root { --ux-nav-height: 70px; }\n .liquid-nav {\n top: max(10px, env(safe-area-inset-top));\n width: min(244px, calc(100vw - 20px));\n }\n .liquid-nav__glass { height: 50px; padding: 4px; }\n .liquid-nav__indicator {\n top: 4px;\n left: 4px;\n width: calc((100% - 8px) \/ 4);\n height: calc(100% - 8px);\n }\n .liquid-nav__item { min-height: 42px; }\n .liquid-nav__item svg { width: 20px; height: 20px; }\n}\n\n@media (max-width: 380px) {\n .liquid-nav { width: min(232px, calc(100vw - 16px)); }\n .liquid-nav__glass { height: 48px; }\n .liquid-nav__item { min-height: 40px; }\n .liquid-nav__item svg { width: 19px; height: 19px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .liquid-nav__indicator,\n .liquid-nav__item,\n .liquid-nav__item svg {\n transition: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"collaboration-model-copy-final\">\n\/* Collaboration section follows the same editorial grid, type scale and spacing\n already used by the rest of the page. *\/\nbody .collaboration-model {\n width: 100%;\n}\n\nbody .collaboration-model__header {\n margin-bottom: var(--section-header-gap) !important;\n}\n\nbody .collaboration-model__title {\n max-width: 15ch;\n font-family: var(--inter) !important;\n font-style: normal !important;\n font-weight: 600 !important;\n line-height: .98 !important;\n letter-spacing: -.055em !important;\n}\n\nbody .collaboration-model__title em {\n font-family: var(--serif) !important;\n font-style: italic !important;\n font-weight: 400 !important;\n letter-spacing: -.065em !important;\n}\n\n\/* Pull the collaboration statement closer to the hero without changing the\n rhythm between the following sections. *\/\nbody main#main-content > .landing-hero + .collaboration-model {\n margin-top: clamp(88px, 6vw, 120px) !important;\n}\n\nbody .collaboration-model__copy-layout {\n display: grid;\n grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);\n gap: clamp(36px, 7vw, 110px);\n align-items: start;\n}\n\nbody .collaboration-model__copy {\n grid-column: 2;\n width: min(100%, 62ch);\n display: grid;\n gap: var(--content-gap);\n}\n\nbody .collaboration-model__copy p {\n margin: 0;\n color: var(--muted);\n font-family: var(--sans) !important;\n font-size: var(--type-body) !important;\n line-height: 1.55 !important;\n letter-spacing: 0;\n}\n\nbody .collaboration-model__copy strong {\n color: var(--text);\n font-weight: 600;\n}\n\n@media (max-width: 760px) {\n body main#main-content > .landing-hero + .collaboration-model {\n margin-top: 88px !important;\n }\n\n body .collaboration-model__title {\n letter-spacing: -.05em !important;\n }\n\n body .collaboration-model__title em {\n letter-spacing: -.06em !important;\n }\n\n body .collaboration-model__copy-layout {\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n body .collaboration-model__copy {\n grid-column: 1;\n width: min(100%, 38rem);\n }\n}\n<\/style>\n\n\n<style id=\"linkedin-instagram-final\">\n\/* Page navigation and social links are two separate controls. *\/\nbody .liquid-nav {\n width: min(372px, calc(100vw - 24px));\n}\n\nbody .liquid-nav__row {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\nbody .liquid-nav__glass {\n flex: 1 1 auto;\n width: auto;\n min-width: 0;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\nbody .liquid-nav__indicator {\n width: calc((100% - 8px) \/ 4);\n}\n\nbody .liquid-nav__socials {\n flex: 0 0 104px;\n height: 54px;\n padding: 4px;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: stretch;\n border: 1px solid rgba(255,255,255,.30);\n border-radius: 999px;\n background: rgba(255,255,255,.055);\n -webkit-backdrop-filter: blur(14px) saturate(118%);\n backdrop-filter: blur(14px) saturate(118%);\n}\n\nbody .liquid-nav__social {\n min-width: 0;\n min-height: 46px;\n display: grid;\n place-items: center;\n border-radius: 999px;\n color: var(--liquid-nav-muted);\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n transition: color .18s ease, transform .2s ease;\n}\n\nbody .liquid-nav__social:hover,\nbody .liquid-nav__social:focus-visible {\n color: var(--liquid-nav-ink);\n}\n\nbody .liquid-nav__social:focus-visible {\n outline: 1px solid var(--liquid-nav-focus);\n outline-offset: -7px;\n}\n\nbody .liquid-nav__social svg {\n width: 19px;\n height: 19px;\n display: block;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.65;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform .2s ease;\n}\n\nbody .liquid-nav__social:hover svg,\nbody .liquid-nav__social:focus-visible svg {\n transform: scale(1.04);\n}\n\nbody .liquid-nav__social .liquid-nav__icon-dot {\n fill: currentColor;\n stroke: none;\n}\n\nbody .collaboration-model__resume {\n margin: clamp(22px, 2.2vw, 30px) 0 0;\n}\n\nbody .collaboration-model__resume a {\n display: inline-flex;\n align-items: center;\n color: var(--text);\n font-family: var(--sans);\n font-size: var(--scale-minus-1);\n font-weight: 600;\n line-height: 1.4;\n letter-spacing: -.01em;\n text-decoration: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 3px;\n transition: opacity .16s ease;\n}\n\nbody .collaboration-model__resume a:hover,\nbody .collaboration-model__resume a:focus-visible {\n opacity: .52;\n outline: none;\n}\n\n@media (max-width: 720px) {\n body .liquid-nav {\n width: min(348px, calc(100vw - 20px));\n }\n\n body .liquid-nav__row {\n gap: 7px;\n }\n\n body .liquid-nav__socials {\n flex-basis: 94px;\n height: 50px;\n }\n\n body .liquid-nav__social {\n min-height: 42px;\n }\n\n body .liquid-nav__social svg {\n width: 18px;\n height: 18px;\n }\n\n body .collaboration-model__resume {\n margin-top: 20px;\n }\n}\n\n@media (max-width: 380px) {\n body .liquid-nav {\n width: calc(100vw - 16px);\n }\n\n body .liquid-nav__row {\n gap: 6px;\n }\n\n body .liquid-nav__socials {\n flex-basis: 88px;\n height: 48px;\n }\n\n body .liquid-nav__social {\n min-height: 40px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .liquid-nav__social,\n body .liquid-nav__social svg {\n transition: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-first-paint-guard\">\n\/* Prevent FOUC: the interactive hero orbit is styled later in the document.\n Keep its raw HTML hidden until all hero CSS has been parsed. *\/\nhtml:not(.hero-orbit-ready) .hero-service-orbit {\n visibility: hidden !important;\n opacity: 0 !important;\n}\n<\/style>\n\n<\/head>\n\n<body id=\"top\">\n<div class=\"name-preloader\" aria-hidden=\"true\">\n <div class=\"name-preloader__line\"><span class=\"name-preloader__text\" data-loading-percent>0%<\/span><\/div>\n<\/div>\n<a class=\"ux-skip-link\" href=\"#main-content\">Przejd\u017a do tre\u015bci<\/a>\n\n <header id=\"liquid-glass-nav\" class=\"liquid-nav\" aria-label=\"G\u0142\u00f3wna nawigacja\" data-liquid-glass-nav>\n <div class=\"liquid-nav__row\">\n <nav class=\"liquid-nav__glass\" aria-label=\"Nawigacja strony\">\n <span class=\"liquid-nav__indicator\" aria-hidden=\"true\"><\/span>\n\n <a class=\"liquid-nav__item is-active\" href=\"#o-mnie\" aria-label=\"O mnie\" aria-current=\"page\" data-liquid-nav-item>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M3.5 10.7 12 3.5l8.5 7.2v8.1a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7v-8.1Z\" \/>\n <path d=\"M9.1 20.5v-6.2a2.9 2.9 0 0 1 5.8 0v6.2\" \/>\n <\/svg>\n <\/a>\n\n <a class=\"liquid-nav__item\" href=\"#uslugi\" aria-label=\"Us\u0142ugi\" data-liquid-nav-item>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <rect x=\"3.2\" y=\"7.2\" width=\"17.6\" height=\"12.2\" rx=\"2.8\" \/>\n <path d=\"M8.4 7.2V5.7A2.2 2.2 0 0 1 10.6 3.5h2.8a2.2 2.2 0 0 1 2.2 2.2v1.5M3.4 11.1h17.2M9.4 10.2v1.8M14.6 10.2v1.8\" \/>\n <\/svg>\n <\/a>\n\n <a class=\"liquid-nav__item\" href=\"#realizacje\" aria-label=\"Realizacje\" data-liquid-nav-item>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <rect x=\"3.2\" y=\"4\" width=\"17.6\" height=\"16\" rx=\"3\" \/>\n <circle cx=\"8.2\" cy=\"9\" r=\"1.55\" \/>\n <path d=\"m5.8 17 4.4-4.5 3.2 3 2.2-2.2 2.6 3.7\" \/>\n <\/svg>\n <\/a>\n\n <a class=\"liquid-nav__item\" href=\"#kontakt\" aria-label=\"Kontakt\" data-liquid-nav-item>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"3\" \/>\n <path d=\"m4.6 7 6.3 5.1a1.75 1.75 0 0 0 2.2 0L19.4 7\" \/>\n <\/svg>\n <\/a>\n <\/nav>\n\n <div class=\"liquid-nav__socials\" aria-label=\"Media spo\u0142eczno\u015bciowe\">\n <a class=\"liquid-nav__social\" href=\"https:\/\/instagram.com\/michal.plebaniak\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram Micha\u0142a Plebaniaka\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" \/>\n <circle cx=\"12\" cy=\"12\" r=\"4\" \/>\n <circle cx=\"17.6\" cy=\"6.7\" r=\".9\" class=\"liquid-nav__icon-dot\" \/>\n <\/svg>\n <\/a>\n\n <a class=\"liquid-nav__social\" href=\"https:\/\/www.linkedin.com\/in\/michalplebaniak\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn Micha\u0142a Plebaniaka\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2.5\" \/>\n <path d=\"M8 10v6M8 7.5v.1M11.2 16v-3.35c0-1.55.9-2.65 2.3-2.65 1.35 0 2.5.9 2.5 2.75V16M11.2 10.2v5.8\" \/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n <div class=\"page\">\n <main id=\"main-content\">\n\n\n\n <section class=\"landing-hero\" id=\"o-mnie\" aria-labelledby=\"landing-title\">\n <div class=\"landing-hero__copy\">\n <h1 class=\"landing-hero__title\" id=\"landing-title\">Kompleksowe<br class=\"mobile-title-break\"> wsparcie dla<br class=\"mobile-title-break\"> <em>Twojej marki.<\/em><\/h1>\n <div class=\"landing-hero__subcopy\">\n <p class=\"landing-hero__subeyebrow\">Bezpo\u015brednia wsp\u00f3\u0142praca z wykonawc\u0105.<\/p>\n <p class=\"landing-hero__lead\">M\u00f3j model wsp\u00f3\u0142pracy oznacza szybsze decyzje, wi\u0119ksz\u0105 odpowiedzialno\u015b\u0107 za efekt ko\u0144cowy i brak zb\u0119dnych koszt\u00f3w.<\/p>\n <\/div>\n <div class=\"landing-hero__actions\" aria-label=\"Najwa\u017cniejsze dzia\u0142ania\">\n <a class=\"ux-button ux-button--primary\" href=\"#kontakt\">Porozmawiajmy o projekcie<\/a>\n <a class=\"ux-button ux-button--secondary\" href=\"#realizacje\">Zobacz realizacje<\/a>\n <\/div>\n <\/div>\n\n <!-- Interactive service-icon orbit: mirrors the Services selector below. -->\n <div class=\"hero-art-stage\" aria-label=\"Ilustracja us\u0142ug\">\n<div class=\"hero-service-orbit\" data-hero-service-orbit aria-label=\"Us\u0142ugi. Wybierz ikon\u0119, aby przej\u015b\u0107 do szczeg\u00f3\u0142\u00f3w.\">\n <span class=\"hero-service-orbit__arc\" aria-hidden=\"true\"><\/span>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--ai\" type=\"button\" data-service-index=\"7\" aria-label=\"AI content\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\" \/>\n <path d=\"M20 2v4\" \/><path d=\"M22 4h-4\" \/><circle cx=\"4\" cy=\"20\" r=\"2\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--video\" type=\"button\" data-service-index=\"0\" aria-label=\"Video\" aria-pressed=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\" \/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--calendar\" type=\"button\" data-service-index=\"2\" aria-label=\"Content day\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M8 2v4\" \/><path d=\"M16 2v4\" \/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" \/><path d=\"M3 10h18\" \/><path d=\"M8 14h.01\" \/><path d=\"M12 14h.01\" \/><path d=\"M16 14h.01\" \/><path d=\"M8 18h.01\" \/><path d=\"M12 18h.01\" \/><path d=\"M16 18h.01\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--web\" type=\"button\" data-service-index=\"1\" aria-label=\"Web design\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" \/><path d=\"M3 9h18\" \/><path d=\"M9 21V9\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--camera\" type=\"button\" data-service-index=\"3\" aria-label=\"Fotografia\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z\" \/><circle cx=\"12\" cy=\"13\" r=\"3\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--design\" type=\"button\" data-service-index=\"4\" aria-label=\"Design\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\" \/><path d=\"m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18\" \/><path d=\"m2.3 2.3 7.286 7.286\" \/><circle cx=\"11\" cy=\"11\" r=\"2\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--marketing\" type=\"button\" data-service-index=\"5\" aria-label=\"Marketing\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z\" \/><path d=\"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14\" \/><path d=\"M8 6v8\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"hero-service-orbit__item hero-service-orbit__item--consulting\" type=\"button\" data-service-index=\"6\" aria-label=\"Consulting\" aria-pressed=\"false\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" \/><path d=\"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1\" \/>\n <\/svg>\n <\/button>\n\n <div class=\"hero-service-orbit__panel\" data-hero-service-panel role=\"status\" aria-live=\"polite\">\n <strong data-hero-service-title>Video<\/strong>\n <span data-hero-service-copy>Ruch, rytm i emocje, kt\u00f3re od pierwszych sekund pokazuj\u0105 charakter marki.<\/span>\n <\/div>\n <\/div>\n <img class=\"hero-art-stage__illustration\" src=\"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Hero-2027-1.svg\" alt=\"\" aria-hidden=\"true\" decoding=\"async\" fetchpriority=\"high\" \/>\n <svg class=\"hero-gaze-svg\" data-hero-gaze-svg\n viewBox=\"0 0 2048 807\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <circle class=\"hero-gaze-svg__pupil hero-gaze-svg__pupil--left\"\n data-pupil-left\n cx=\"989.735\" cy=\"179.943\" r=\"8.2\" \/>\n <circle class=\"hero-gaze-svg__pupil hero-gaze-svg__pupil--right\"\n data-pupil-right\n cx=\"1052.498\" cy=\"200.361\" r=\"8.2\" \/>\n <\/svg>\n <\/div>\n \n<\/section>\n\n <section class=\"collaboration-model\" aria-labelledby=\"collaboration-model-title\">\n <div class=\"editorial-header collaboration-model__header\">\n <p class=\"section-title clients__label\">Model wsp\u00f3\u0142pracy<\/p>\n <h2 class=\"editorial-title collaboration-model__title\" id=\"collaboration-model-title\">Nie jestem agencj\u0105.<br><em>I w\u0142a\u015bnie na tym polega pomys\u0142.<\/em><\/h2>\n <\/div>\n <div class=\"collaboration-model__copy-layout\">\n <div class=\"collaboration-model__copy\">\n <p>\u0141\u0105cz\u0119 strategi\u0119, web design, wideo, fotografi\u0119, branding, marketing i AI w jednym procesie, bez przekazywania projektu mi\u0119dzy dzia\u0142ami, accountami i kolejnymi osobami w CC.<\/p>\n <p>Pracujesz bezpo\u015brednio ze mn\u0105: szybciej podejmujemy decyzje, mniej rzeczy ginie po drodze, a ca\u0142a komunikacja marki m\u00f3wi jednym g\u0142osem.<\/p>\n <p>Prowadz\u0119 jedynie ograniczon\u0105 liczb\u0119 projekt\u00f3w jednocze\u015bnie, \u017ceby mie\u0107 czas na kreatywne my\u015blenie, dopracowanie detali i normalny kontakt. <strong>Mniej projekt\u00f3w. Wi\u0119cej uwagi.<\/strong><\/p>\n <p class=\"collaboration-model__resume\"><a href=\"https:\/\/www.linkedin.com\/in\/michalplebaniak\" target=\"_blank\" rel=\"noopener noreferrer\">Zobacz moje do\u015bwiadczenie na LinkedIn<\/a><\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"clients\" aria-label=\"Klienci\">\n <div class=\"clients__header\">\n <p class=\"clients__label\">Wybrani klienci<\/p>\n <div class=\"clients__controls\" aria-label=\"Sterowanie logotypami klient\u00f3w\">\n <button class=\"clients__arrow clients__arrow--prev\" type=\"button\" aria-label=\"Poprzednie logotypy\" aria-controls=\"clients-logo-strip\" title=\"Poprzednie logotypy\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M19 12H5\"><\/path>\n <path d=\"M11 18l-6-6 6-6\"><\/path>\n<\/svg><\/button>\n <button class=\"clients__arrow clients__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pne logotypy\" aria-controls=\"clients-logo-strip\" title=\"Nast\u0119pne logotypy\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M5 12h14\"><\/path>\n <path d=\"M13 6l6 6-6 6\"><\/path>\n<\/svg><\/button>\n <\/div>\n <\/div>\n\n <div class=\"clients__marquee\" id=\"clients-logo-strip\">\n <div class=\"clients__track\">\n <div class=\"clients__group\">\n <span class=\"clients__logo clients__logo--playboy\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"Playboy\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--esquire\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"Esquire\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--cosmo\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"Cosmopolitan\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"Agencja Rozwoju Pomorza\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--pes\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/logotyp-pes-rgb-png.png\" alt=\"Pomorska Ekonomia Spo\u0142eczna\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--nck\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"Narodowe Centrum Kultury\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bit\">\n <img src=\"https:\/\/companieslogo.com\/img\/orig\/11B.WA_BIG-6530fcb7.png?t=1720244490\" alt=\"11 bit studios\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--btt\">\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"Klub Bokserski BTT\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--sans\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Sopocka-Akademia-Nauk-Stosowanych.png\" alt=\"Sopocka Akademia Nauk Stosowanych\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--crosscore\">\n <img src=\"https:\/\/static.wixstatic.com\/media\/d9e90f_c665f81a623b4ded9d1c610b33b6ee2a~mv2.png\/v1\/crop\/x_41%2Cy_31%2Cw_1783%2Ch_1337\/fill\/w_360%2Ch_270%2Cal_c%2Cq_85%2Cusm_0.66_1.00_0.01%2Cenc_avif%2Cquality_auto\/cross%20team.png\" alt=\"CrossCore Gym Gda\u0144sk\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--agora\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/7e\/Agora_S.A._2025.svg\" alt=\"Agora S.A.\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bok\">\n <img src=\"https:\/\/bip.bok.waw.pl\/wp-content\/themes\/twentytwenty-child\/assets\/images\/LOGO-BOK.png\" alt=\"Bia\u0142o\u0142\u0119cki O\u015brodek Kultury\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--medicover\">\n <img src=\"https:\/\/prowly-prod.s3.eu-west-1.amazonaws.com\/uploads\/4277\/assets\/803095\/compressed_original-771ff2212e6c76f0c71788a41f2088ef.png\" alt=\"Medicover\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--iratcr\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"Geocaching\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--adventure-lab\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Adventure_Lab_Logo_300dpi.png\" alt=\"Geocaching Adventure Lab\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bazaar\" aria-label=\"Harper's Bazaar\">\n <span class=\"clients__text-logo\" aria-hidden=\"true\">Bazaar<\/span>\n <\/span>\n <\/div>\n\n <div class=\"clients__group\" aria-hidden=\"true\">\n <span class=\"clients__logo clients__logo--playboy\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--esquire\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--cosmo\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--pes\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/logotyp-pes-rgb-png.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--nck\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bit\">\n <img src=\"https:\/\/companieslogo.com\/img\/orig\/11B.WA_BIG-6530fcb7.png?t=1720244490\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--btt\">\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--sans\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Sopocka-Akademia-Nauk-Stosowanych.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--crosscore\">\n <img src=\"https:\/\/static.wixstatic.com\/media\/d9e90f_c665f81a623b4ded9d1c610b33b6ee2a~mv2.png\/v1\/crop\/x_41%2Cy_31%2Cw_1783%2Ch_1337\/fill\/w_360%2Ch_270%2Cal_c%2Cq_85%2Cusm_0.66_1.00_0.01%2Cenc_avif%2Cquality_auto\/cross%20team.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--agora\">\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/7e\/Agora_S.A._2025.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bok\">\n <img src=\"https:\/\/bip.bok.waw.pl\/wp-content\/themes\/twentytwenty-child\/assets\/images\/LOGO-BOK.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--medicover\">\n <img src=\"https:\/\/prowly-prod.s3.eu-west-1.amazonaws.com\/uploads\/4277\/assets\/803095\/compressed_original-771ff2212e6c76f0c71788a41f2088ef.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--iratcr\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--adventure-lab\">\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Adventure_Lab_Logo_300dpi.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\n <\/span>\n\n <span class=\"clients__logo clients__logo--bazaar\">\n <span class=\"clients__text-logo\">Bazaar<\/span>\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"grid\" id=\"uslugi\" aria-label=\"Us\u0142ugi\">\n\n\n <aside class=\"info\">\n <section class=\"panel services\" aria-labelledby=\"services-heading\">\n <h2 class=\"section-title clients__label\" id=\"services-heading\">Us\u0142ugi<\/h2>\n\n <div class=\"service-strip\" data-service-strip><div class=\"service-strip__icons\" aria-label=\"Wybierz us\u0142ug\u0119\"><button class=\"service-strip__button\" id=\"service-trigger-0\" type=\"button\" aria-label=\"Video\" aria-expanded=\"true\" aria-controls=\"service-wideo-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"Video\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\" \/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-1\" type=\"button\" aria-label=\"Web design\" aria-expanded=\"false\" aria-controls=\"service-web-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"PanelsTopLeft\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" \/><path d=\"M3 9h18\" \/><path d=\"M9 21V9\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-2\" type=\"button\" aria-label=\"Content day\" aria-expanded=\"false\" aria-controls=\"service-content-day-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"CalendarDays\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8 2v4\" \/><path d=\"M16 2v4\" \/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" \/><path d=\"M3 10h18\" \/><path d=\"M8 14h.01\" \/><path d=\"M12 14h.01\" \/><path d=\"M16 14h.01\" \/><path d=\"M8 18h.01\" \/><path d=\"M12 18h.01\" \/><path d=\"M16 18h.01\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-3\" type=\"button\" aria-label=\"Fotografia\" aria-expanded=\"false\" aria-controls=\"service-fotografia-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"Camera\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z\" \/><circle cx=\"12\" cy=\"13\" r=\"3\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-4\" type=\"button\" aria-label=\"Design\" aria-expanded=\"false\" aria-controls=\"service-design-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"PenTool\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\" \/><path d=\"m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18\" \/><path d=\"m2.3 2.3 7.286 7.286\" \/><circle cx=\"11\" cy=\"11\" r=\"2\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-5\" type=\"button\" aria-label=\"Marketing\" aria-expanded=\"false\" aria-controls=\"service-marketing-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"Megaphone\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z\" \/><path d=\"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14\" \/><path d=\"M8 6v8\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-6\" type=\"button\" aria-label=\"Consulting\" aria-expanded=\"false\" aria-controls=\"service-consulting-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"MessagesSquare\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" \/><path d=\"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1\" \/><\/svg><\/button><button class=\"service-strip__button\" id=\"service-trigger-7\" type=\"button\" aria-label=\"AI content\" aria-expanded=\"false\" aria-controls=\"service-ai-content-content\"><svg class=\"service-icon lucide\" data-lucide-icon=\"Sparkles\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\" \/><path d=\"M20 2v4\" \/><path d=\"M22 4h-4\" \/><circle cx=\"4\" cy=\"20\" r=\"2\" \/><\/svg><\/button><\/div><div class=\"service-strip__details\"><div class=\"service-strip__panel\" id=\"service-wideo-content\" role=\"region\" aria-labelledby=\"service-trigger-0\"><div class=\"service-strip__left\"><h3>Video<\/h3><p class=\"service-strip__description\">Filmy promocyjne, rolki, kr\u00f3tkie formaty do social media, wywiady, relacje z wydarze\u0144 i proste animacje. Mog\u0119 wej\u015b\u0107 w projekt od pomys\u0142u i scenariusza, przez realizacj\u0119, po monta\u017c materia\u0142u gotowego do publikacji.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-web-content\" role=\"region\" aria-labelledby=\"service-trigger-1\" hidden><div class=\"service-strip__left\"><h3>Web design<\/h3><p class=\"service-strip__description\">Projektuj\u0119 landing page\u2019e i strony internetowe z czyteln\u0105 struktur\u0105, dopracowan\u0105 warstw\u0105 wizualn\u0105 i pe\u0142n\u0105 responsywno\u015bci\u0105. Zakres mo\u017ce obejmowa\u0107 UX, projekt graficzny, wdro\u017cenie oraz przygotowanie strony do dalszej samodzielnej obs\u0142ugi.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-content-day-content\" role=\"region\" aria-labelledby=\"service-trigger-2\" hidden><div class=\"service-strip__left\"><h3>Content day<\/h3><p class=\"service-strip__description\">Zaplanowana produkcja zdj\u0119\u0107 i video do regularnej komunikacji marki. Przed realizacj\u0105 ustalamy tematy, kadry i formaty tak, \u017ceby z jednego spotkania powsta\u0142 u\u017cyteczny bank materia\u0142\u00f3w do wielu publikacji.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-fotografia-content\" role=\"region\" aria-labelledby=\"service-trigger-3\" hidden><div class=\"service-strip__left\"><h3>Fotografia<\/h3><p class=\"service-strip__description\">Sesje wizerunkowe, produktowe, biznesowe i eventowe. Wsp\u00f3lnie ustalamy kierunek wizualny, charakter zdj\u0119\u0107 oraz ich p\u00f3\u017aniejsze wykorzystanie, od strony internetowej po kampanie i social media.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-design-content\" role=\"region\" aria-labelledby=\"service-trigger-4\" hidden><div class=\"service-strip__left\"><h3>Design<\/h3><p class=\"service-strip__description\">Identyfikacja wizualna, logo, key visuale, prezentacje oraz materia\u0142y do kampanii, social media i komunikacji firmowej. Projekty powstaj\u0105 jako sp\u00f3jny system, kt\u00f3ry mo\u017cna p\u00f3\u017aniej wygodnie rozwija\u0107 w r\u00f3\u017cnych kana\u0142ach.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-marketing-content\" role=\"region\" aria-labelledby=\"service-trigger-5\" hidden><div class=\"service-strip__left\"><h3>Marketing<\/h3><p class=\"service-strip__description\">Pomagam uporz\u0105dkowa\u0107 komunikacj\u0119, zaplanowa\u0107 kampani\u0119 albo zbudowa\u0107 kierunek dzia\u0142a\u0144 contentowych wok\u00f3\u0142 konkretnego celu biznesowego. Zakres mo\u017ce obejmowa\u0107 pomys\u0142 kreatywny, kana\u0142y, formaty tre\u015bci i plan dalszych dzia\u0142a\u0144.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-consulting-content\" role=\"region\" aria-labelledby=\"service-trigger-6\" hidden><div class=\"service-strip__left\"><h3>Consulting<\/h3><p class=\"service-strip__description\">Godzinna konsultacja kreatywna lub strategiczna dotycz\u0105ca marki, komunikacji, strony, contentu albo konkretnego problemu projektowego. Spotkanie ko\u0144czymy konkretnymi rekomendacjami i kierunkiem dalszego dzia\u0142ania.<\/p><\/div><\/div><div class=\"service-strip__panel\" id=\"service-ai-content-content\" role=\"region\" aria-labelledby=\"service-trigger-7\" hidden><div class=\"service-strip__left\"><h3>AI content<\/h3><p class=\"service-strip__description\">Obrazy produktowe, mockupy, koncepty wizualne, warianty kreacji i workflow wspierane AI. Dobieram narz\u0119dzia do konkretnego zastosowania i przygotowuj\u0119 materia\u0142y tak, \u017ceby by\u0142y u\u017cyteczne w realnej komunikacji marki.<\/p><\/div><\/div><\/div><\/div><\/section>\n\n <\/aside>\n <\/section>\n\n <section class=\"process-section\" id=\"proces\" aria-labelledby=\"process-heading\">\n <div class=\"editorial-header\">\n <p class=\"section-title clients__label\">Jak wygl\u0105da wsp\u00f3\u0142praca<\/p>\n <h2 class=\"editorial-title\" id=\"process-heading\">Od pierwszej rozmowy do gotowych materia\u0142\u00f3w.<\/h2>\n <\/div>\n <div class=\"process-grid\">\n <article class=\"process-step\">\n <span class=\"process-step__no\">01<\/span>\n <h3>Rozmowa wst\u0119pna<\/h3>\n <p>Ustalamy kontekst, potrzeby, priorytety i realny zakres. Bez rozbudowanego briefu na start.<\/p>\n <\/article>\n <article class=\"process-step\">\n <span class=\"process-step__no\">02<\/span>\n <h3>Audyt i kierunek<\/h3>\n <p>Porz\u0105dkuj\u0119 ofert\u0119, komunikacj\u0119 i punkty, kt\u00f3re maj\u0105 najwi\u0119kszy wp\u0142yw na odbi\u00f3r marki.<\/p>\n <\/article>\n <article class=\"process-step\">\n <span class=\"process-step__no\">03<\/span>\n <h3>Produkcja<\/h3>\n <p>Powstaj\u0105 konkretne rzeczy: strona, copy, identyfikacja, zdj\u0119cia, wideo, content lub materia\u0142y wspierane AI.<\/p>\n <\/article>\n <article class=\"process-step\">\n <span class=\"process-step__no\">04<\/span>\n <h3>Publikacja i dalszy rytm<\/h3>\n <p>Wdra\u017cam projekt, przekazuj\u0119 gotowe materia\u0142y albo przechodzimy w regularn\u0105 wsp\u00f3\u0142prac\u0119.<\/p>\n <\/article>\n <\/div>\n <\/section>\n\n<section class=\"selected-work-controller\" id=\"realizacje\" aria-labelledby=\"selected-work-title\" data-selected-work>\n <div class=\"selected-work-controller__header\">\n <p class=\"section-title clients__label selected-work-controller__eyebrow\" id=\"selected-work-title\">Wybrane realizacje<\/p>\n <div class=\"selected-work-tabs\" role=\"tablist\" aria-label=\"Kategorie realizacji\">\n <button class=\"selected-work-tab\" id=\"selected-work-tab-websites\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"realizacje-websites\" tabindex=\"-1\" data-selected-work-tab=\"websites\">Strony internetowe<\/button>\n <button class=\"selected-work-tab is-active\" id=\"selected-work-tab-video\" type=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"realizacje-wideo\" tabindex=\"0\" data-selected-work-tab=\"video\">Wideo<\/button>\n <button class=\"selected-work-tab\" id=\"selected-work-tab-photography\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"fotografia-analogowa\" tabindex=\"-1\" data-selected-work-tab=\"photography\">Fotografia analogowa<\/button>\n <button class=\"selected-work-tab\" id=\"selected-work-tab-branding\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"branding\" tabindex=\"-1\" data-selected-work-tab=\"branding\">Branding<\/button>\n <\/div>\n <\/div>\n<\/section>\n<section class=\"websites selected-work-panel\" id=\"realizacje-websites\" data-selected-work-panel=\"websites\" role=\"tabpanel\" aria-labelledby=\"selected-work-tab-websites\" hidden aria-hidden=\"true\" data-websites-carousel>\n <div class=\"websites__header\">\n <div class=\"websites__controls\" aria-label=\"Sterowanie karuzel\u0105 stron internetowych\">\n <button class=\"websites__arrow websites__arrow--prev\" type=\"button\" aria-label=\"Poprzedni projekt\" title=\"Poprzedni projekt\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M19 12H5\"><\/path>\n <path d=\"M11 18l-6-6 6-6\"><\/path>\n<\/svg><\/button>\n <button class=\"websites__arrow websites__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pny projekt\" title=\"Nast\u0119pny projekt\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M5 12h14\"><\/path>\n <path d=\"M13 6l6 6-6 6\"><\/path>\n<\/svg><\/button>\n <\/div>\n <\/div>\n\n <div class=\"websites__links\" tabindex=\"0\" aria-label=\"Karuzela projekt\u00f3w stron internetowych. Na telefonie przesu\u0144 palcem.\">\n <div class=\"website-project\" data-project-key=\"prestige\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"prestige\" href=\"http:\/\/prestigejewellery.pl\/\" data-live-url=\"http:\/\/prestigejewellery.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">01<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Galeria Bi\u017cuterii Prestige<\/span>\n <span class=\"website-link__description\">Elegancka prezentacja marki, kolekcji bi\u017cuterii i oferty salonu.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"talent\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"talent\" href=\"https:\/\/michalplebaniak.com\/talent-complete\/\" data-live-url=\"https:\/\/michalplebaniak.com\/talent-complete\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">02<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Talent Complete<\/span>\n <span class=\"website-link__description\">Serwis us\u0142ugi HR skupiony na rekrutacji, talentach i wsparciu biznesu.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"crosscore\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"crosscore\" href=\"https:\/\/crosscoregdansk.pl\/\" data-live-url=\"https:\/\/crosscoregdansk.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">03<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">CrossCore Gda\u0144sk<\/span>\n <span class=\"website-link__description\">Dynamiczna strona klubu treningowego z ofert\u0105 zaj\u0119\u0107 i kontaktem.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"agata\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"agata\" href=\"https:\/\/bajkvv.com\/\" data-live-url=\"https:\/\/bajkvv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">04<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Agata Bajkov<\/span>\n <span class=\"website-link__description\">Personalna marka trenerki z ofert\u0105 trening\u00f3w i wsp\u00f3\u0142pracy indywidualnej.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"nordtrail\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"nordtrail\" href=\"https:\/\/nordtrailrace.com\/\" data-live-url=\"https:\/\/nordtrailrace.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">05<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Nord Trail Race<\/span>\n <span class=\"website-link__description\">Strona biegu terenowego z informacjami o trasie, zapisach i wydarzeniu.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"lura\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"lura\" href=\"https:\/\/michalplebaniak.com\/lura-cafe\/\" data-live-url=\"https:\/\/michalplebaniak.com\/lura-cafe\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">06<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Lura Cafe<\/span>\n <span class=\"website-link__description\">Strona kawiarni Lura z ofert\u0105 kawy, produktami marki i informacjami o lokalu.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"amber\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"amber\" href=\"https:\/\/michalplebaniak.com\/amber-org\" data-live-url=\"https:\/\/michalplebaniak.com\/amber-org\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">07<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Amber Org<\/span>\n <span class=\"website-link__description\">Work in Progress - projekt strony Amber Org, obecnie w trakcie realizacji.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <div class=\"website-project\" data-project-key=\"blumin\">\n<a class=\"website-link website-link--preview\" data-folder-theme=\"blumin\" href=\"https:\/\/michalplebaniak.com\/blumin-beauty-bar\/\" data-live-url=\"https:\/\/michalplebaniak.com\/blumin-beauty-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M0 170 L0 18 Q0 0 18 0 H304 C332 0 350 7 370 27 C400 57 427 90 482 90 H580 V170 Z\" \/>\n <\/svg>\n <span class=\"website-link__number\" aria-hidden=\"true\">08<\/span>\n <span class=\"website-link__content\">\n <span class=\"website-link__name\">Blumin Beauty Bar<\/span>\n <span class=\"website-link__description\">Strona internetowa Blumin Beauty Bar.<\/span>\n <\/span>\n <span class=\"website-link__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M7 17L17 7M9 7h8v8\" \/><\/svg><\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n<section class=\"works-loop selected-work-panel is-active\" id=\"realizacje-wideo\" data-selected-work-panel=\"video\" role=\"tabpanel\" aria-labelledby=\"selected-work-tab-video\" aria-hidden=\"false\" data-works-loop>\n <div class=\"works-loop__header\">\n <\/div>\n\n <div class=\"works-loop__carousel\">\n\n <div class=\"works-loop__viewport\" aria-label=\"Wszystkie realizacje wideo\">\n <div class=\"works-loop__track\">\n <div class=\"works-loop__item\" data-youtube-id=\"w3bjcWP0-zM\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"1191830305\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"310881669\"><\/div>\n <div class=\"works-loop__item\" data-youtube-id=\"kMQtY2t2M_Q\" data-video-url=\"https:\/\/youtu.be\/kMQtY2t2M_Q\"><\/div>\n <div class=\"works-loop__item\" data-youtube-id=\"DsV_hk9__6A\" data-video-url=\"https:\/\/youtu.be\/DsV_hk9__6A\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"1204144635\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"310873953\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"1154238773\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"276783004\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"310875799\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"273568381\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"405101306\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"1154324138\"><\/div>\n <div class=\"works-loop__item\" data-vimeo-id=\"1161850865\"><\/div>\n <div class=\"works-loop__item\" data-youtube-id=\"KDBijt3FTUU\" data-video-url=\"https:\/\/youtu.be\/KDBijt3FTUU\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n<section class=\"analog-gallery selected-work-panel\" id=\"fotografia-analogowa\" data-selected-work-panel=\"photography\" role=\"tabpanel\" aria-labelledby=\"selected-work-tab-photography\" hidden aria-hidden=\"true\">\n\n <div class=\"analog-gallery__grid\">\n <div class=\"analog-bento__row analog-bento__row--one\">\n <figure class=\"analog-gallery__item analog-gallery__item--wide\" style=\"--photo-ratio:2.232142857;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Kodak-200.webp\"\n width=\"1000\" height=\"448\"\n alt=\"Analogowa fotografia architektury z \u017c\u00f3\u0142tymi parasolami na balkonach\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Waleria-01.webp\"\n width=\"1000\" height=\"1000\"\n alt=\"Analogowy portret kobiety w \u015bwietle przebijaj\u0105cym przez drzewa\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Michal.webp\"\n width=\"1000\" height=\"1000\"\n alt=\"Analogowy portret osoby le\u017c\u0105cej w\u015br\u00f3d \u017c\u00f3\u0142tych kwiat\u00f3w\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <\/div>\n\n <div class=\"analog-bento__row analog-bento__row--two\">\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Pola.webp\"\n width=\"1000\" height=\"1000\"\n alt=\"Czarno-bia\u0142a fotografia analogowa osoby le\u017c\u0105cej na trawie\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/07\/Image_05.png\"\n width=\"1000\" height=\"1000\"\n alt=\"Fotografia analogowa, wybrany kadr\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/07\/Image_04.png\"\n width=\"1000\" height=\"1000\"\n alt=\"Fotografia analogowa, wybrany kadr\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <figure class=\"analog-gallery__item\" style=\"--photo-ratio:1.333333333;\">\n <img loading=\"lazy\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Octopussy.webp\"\n width=\"1000\" height=\"750\"\n alt=\"Fotografia analogowa, Octopussy\"\n loading=\"lazy\" decoding=\"async\" \/>\n <\/figure>\n <\/div>\n <\/div>\n<\/section>\n<section class=\"branding-wip selected-work-panel\" id=\"branding\" data-selected-work-panel=\"branding\" role=\"tabpanel\" aria-labelledby=\"selected-work-tab-branding\" hidden aria-hidden=\"true\" aria-disabled=\"true\">\n\n <div class=\"branding-wip__canvas\" aria-hidden=\"true\">\n <span class=\"branding-wip__canvas-label\">Sekcja w przygotowaniu<\/span>\n <\/div>\n<\/section>\n\n<section class=\"problems-section problems-section--cards\" aria-labelledby=\"problems-heading\">\n <div class=\"editorial-header editorial-header--wide\">\n <p class=\"section-title\">Brzmi znajomo?<\/p>\n <h2 class=\"editorial-title\" id=\"problems-heading\">Mniej przekazywania. Wi\u0119cej odpowiedzialno\u015bci za ca\u0142o\u015b\u0107.<\/h2>\n <\/div>\n\n <div class=\"problem-grid\">\n <article class=\"problem-card problem-card--icon\">\n <div class=\"problem-card__top\">\n <span class=\"problem-card__icon\"><svg class=\"lucide\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"3\" width=\"6\" height=\"6\" rx=\"1.2\"\/><rect x=\"15\" y=\"3\" width=\"6\" height=\"6\" rx=\"1.2\"\/><rect x=\"15\" y=\"15\" width=\"6\" height=\"6\" rx=\"1.2\"\/><path d=\"M9 6h3a3 3 0 0 1 3 3v6\"\/><path d=\"M15 18h-3a3 3 0 0 1-3-3V9\"\/><\/svg><\/span>\n <span class=\"problem-card__no\">01<\/span>\n <\/div>\n <h3>Content powstaje bez wsp\u00f3lnego kierunku.<\/h3>\n <p>S\u0105 posty, grafiki i pojedyncze pomys\u0142y, ale brakuje jednej historii, kt\u00f3ra \u0142\u0105czy ofert\u0119, stron\u0119 i social media.<\/p>\n <\/article>\n <article class=\"problem-card problem-card--icon\">\n <div class=\"problem-card__top\">\n <span class=\"problem-card__icon\"><svg class=\"lucide\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/span>\n <span class=\"problem-card__no\">02<\/span>\n <\/div>\n <h3>Ka\u017cdy element robi kto\u015b inny.<\/h3>\n <p>Copy, design, zdj\u0119cia, wideo i web trafiaj\u0105 do r\u00f3\u017cnych os\u00f3b. Koordynacja zostaje po Twojej stronie, a marka zaczyna m\u00f3wi\u0107 kilkoma j\u0119zykami.<\/p>\n <\/article>\n <article class=\"problem-card problem-card--icon\">\n <div class=\"problem-card__top\">\n <span class=\"problem-card__icon\"><svg class=\"lucide\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"m21 21-4.3-4.3\"\/><path d=\"M11 8v6\"\/><path d=\"M8 11h6\"\/><\/svg><\/span>\n <span class=\"problem-card__no\">03<\/span>\n <\/div>\n <h3>Masz dobry produkt, ale komunikacja tego nie pokazuje.<\/h3>\n <p>Oferta jest mocna, tylko strona i materia\u0142y nie t\u0142umacz\u0105 jej wystarczaj\u0105co jasno albo wygl\u0105daj\u0105 s\u0142abiej ni\u017c sama us\u0142uga.<\/p>\n <\/article>\n <article class=\"problem-card problem-card--icon\">\n <div class=\"problem-card__top\">\n <span class=\"problem-card__icon\"><svg class=\"lucide\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 3\"\/><\/svg><\/span>\n <span class=\"problem-card__no\">04<\/span>\n <\/div>\n <h3>Robisz marketing samodzielnie, kiedy znajdzie si\u0119 chwila.<\/h3>\n <p>Pomys\u0142y s\u0105, ale brakuje czasu na ich dopracowanie i regularn\u0105 produkcj\u0119. W efekcie komunikacja dzia\u0142a zrywami.<\/p>\n <\/article>\n <\/div>\n<\/section>\n\n<section class=\"fit-section fit-game\" aria-labelledby=\"fit-heading\" data-fit-game>\n <div class=\"fit-game__intro\">\n <p class=\"section-title\">Dobre dopasowanie?<\/p>\n <h2 class=\"editorial-title\" id=\"fit-heading\">Sprawd\u017amy, czy ten model wsp\u00f3\u0142pracy jest dla Ciebie.<\/h2>\n <p class=\"fit-game__lead\">12 szybkich wybor\u00f3w. Bez formularza i bez podawania danych. Po prostu wybierz odpowied\u017a, kt\u00f3ra jest Ci najbli\u017csza.<\/p>\n <div class=\"fit-game__legend\" aria-hidden=\"true\">\n <span>12 pyta\u0144<\/span>\n <span>~ 60 sekund<\/span>\n <span>wynik od razu<\/span>\n <\/div>\n <\/div>\n\n <div class=\"fit-game__panel\">\n <div class=\"fit-game__topline\">\n <span class=\"fit-game__counter\" data-fit-counter>01 \/ 12<\/span>\n <span class=\"fit-game__microcopy\">Wybierz to, co jest Ci bli\u017csze<\/span>\n <\/div>\n\n <div class=\"fit-game__progress\" aria-hidden=\"true\">\n <span data-fit-progress><\/span>\n <\/div>\n\n <div class=\"fit-game__question\" data-fit-question-wrap>\n <p class=\"fit-game__kind\" data-fit-kind>Wsp\u00f3\u0142praca<\/p>\n <h3 data-fit-question>Chc\u0119 po\u0142\u0105czy\u0107 strategi\u0119, tre\u015b\u0107 i stron\u0119 wizualn\u0105 zamiast zamawia\u0107 je osobno.<\/h3>\n <div class=\"fit-game__answers\" role=\"group\" aria-label=\"Wybierz odpowied\u017a\">\n <button class=\"fit-game__answer\" type=\"button\" data-fit-value=\"3\">Zdecydowanie tak<\/button>\n <button class=\"fit-game__answer\" type=\"button\" data-fit-value=\"2\">Raczej tak<\/button>\n <button class=\"fit-game__answer\" type=\"button\" data-fit-value=\"1\">Raczej nie<\/button>\n <button class=\"fit-game__answer\" type=\"button\" data-fit-value=\"0\">Zdecydowanie nie<\/button>\n <\/div>\n <\/div>\n\n <div class=\"fit-game__result\" data-fit-result hidden aria-live=\"polite\">\n <p class=\"fit-game__kind\">Tw\u00f3j wynik<\/p>\n <h3 data-fit-result-title><\/h3>\n <p class=\"fit-game__result-copy\" data-fit-result-copy><\/p>\n <div class=\"fit-game__result-actions\">\n <a class=\"fit-game__cta\" href=\"#kontakt\">Porozmawiajmy<\/a>\n <button class=\"fit-game__reset\" type=\"button\" data-fit-reset>Zagraj jeszcze raz<\/button>\n <\/div>\n <\/div>\n\n <div class=\"fit-game__footer\" data-fit-footer>\n <button class=\"fit-game__back\" type=\"button\" data-fit-back disabled aria-label=\"Wr\u00f3\u0107 do poprzedniego pytania\">\u2190<\/button>\n <span class=\"fit-game__hint\">Nie ma dobrych odpowiedzi. Jest tylko dopasowanie.<\/span>\n <\/div>\n <\/div>\n\n <noscript>\n <div class=\"fit-game__noscript\">Ta sekcja jest interaktywna i wymaga w\u0142\u0105czonego JavaScript.<\/div>\n <\/noscript>\n<\/section>\n\n\n<section class=\"testimonials\" id=\"rekomendacje\" aria-labelledby=\"testimonials-heading\" data-testimonials>\n <div class=\"testimonials__header\">\n <h2 class=\"section-title section-title--major\" id=\"testimonials-heading\">Rekomendacje<\/h2>\n <\/div>\n\n <div class=\"testimonial-stage\">\n <button class=\"testimonial-side-arrow testimonial-side-arrow--prev\" type=\"button\" data-testimonial-prev aria-label=\"Poprzednia rekomendacja\" title=\"Poprzednia rekomendacja\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M19 12H5\"><\/path>\n <path d=\"M11 18l-6-6 6-6\"><\/path>\n<\/svg><\/button>\n\n <div class=\"testimonial-stage__inner\">\n<blockquote class=\"testimonial-quote\" data-testimonial-quote>Mia\u0142em ogromn\u0105 przyjemno\u015b\u0107 pracowa\u0107 z Micha\u0142em w Scalo i mog\u0119 powiedzie\u0107, \u017ce jego do\u015bwiadczenie w content marketingu jest naprawd\u0119 wyj\u0105tkowe. Wyr\u00f3\u017cnia go po\u0142\u0105czenie kompetencji kreatywnych, technologicznych i digitalowych. Micha\u0142 potrafi przek\u0142ada\u0107 z\u0142o\u017cone tematy IT na anga\u017cuj\u0105ce tre\u015bci, dzi\u0119ki czemu technologia staje si\u0119 bardziej zrozumia\u0142a.<\/blockquote>\n\n <div class=\"testimonial-author\">\n <strong data-testimonial-name>Grzegorz Witkowski<\/strong>\n <span data-testimonial-role>Head of Marketing @ Scalo<\/span>\n <\/div>\n\n <div class=\"testimonial-mobile-cue\" aria-hidden=\"true\">\n <span>Przesu\u0144<\/span>\n <span class=\"testimonial-mobile-cue__dots\" data-testimonial-dots><\/span>\n <\/div>\n\n <\/div>\n\n <button class=\"testimonial-side-arrow testimonial-side-arrow--next\" type=\"button\" data-testimonial-next aria-label=\"Nast\u0119pna rekomendacja\" title=\"Nast\u0119pna rekomendacja\"><svg class=\"circle-arrow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M5 12h14\"><\/path>\n <path d=\"M13 6l6 6-6 6\"><\/path>\n<\/svg><\/button>\n <\/div>\n<\/section>\n\n\n<section class=\"project-contact\" id=\"kontakt\" aria-label=\"Formularz kontaktowy\">\n <div class=\"project-contact__layout\">\n <div class=\"project-contact__intro\">\n <p class=\"section-title\">Kontakt<\/p>\n\n <h2 class=\"project-contact__title\">\n Porozmawiajmy\n <span>o projekcie.<\/span>\n <\/h2>\n\n <p class=\"project-contact__copy\">\n Opisz, czego potrzebujesz i na jakim etapie jest projekt. Na tej podstawie wr\u00f3c\u0119 z propozycj\u0105 sensownego zakresu i kolejnych krok\u00f3w.\n <\/p>\n <\/div>\n\n <div class=\"contact-form\">\n \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1972-o1\" lang=\"pl-PL\" dir=\"ltr\" data-wpcf7-id=\"1972\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/3774#wpcf7-f1972-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formularz kontaktowy\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"1972\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"pl_PL\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f1972-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"message-builder\" data-project-builder>\n\t<div class=\"builder-head\">\n\t\t<p><span>Brief projektu<\/span><br \/>\n<span class=\"builder-counter\">01 \/ 05<\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"builder-progress\" aria-hidden=\"true\">\n\t\t<p><span class=\"builder-progress-bar\"><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<section class=\"builder-step is-active\" data-step=\"1\">\n\t\t<p><span class=\"builder-label\">Jakiej us\u0142ugi potrzebujesz?<\/span>\n\t\t<\/p>\n\t\t<div class=\"builder-options\">\n\t\t\t<p><button type=\"button\" class=\"builder-option is-active\" data-field=\"service\" data-value=\"Fotografia\">Fotografia<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"service\" data-value=\"Wideo i animacja\">Wideo i animacja<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"service\" data-value=\"Web\">Web<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"service\" data-value=\"Design\">Design<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"service\" data-value=\"Marketing\">Marketing<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"service\" data-value=\"Consulting\">Consulting<\/button>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/section>\n\t<section class=\"builder-step\" data-step=\"2\">\n\t\t<p><span class=\"builder-label\">Jaki jest termin?<\/span>\n\t\t<\/p>\n\t\t<div class=\"builder-options\">\n\t\t\t<p><button type=\"button\" class=\"builder-option is-active\" data-field=\"deadline\" data-value=\"Jak najszybciej\">Jak najszybciej<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"deadline\" data-value=\"W ci\u0105gu miesi\u0105ca\">W ci\u0105gu miesi\u0105ca<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"deadline\" data-value=\"W ci\u0105gu 2\u20133 miesi\u0119cy\">W ci\u0105gu 2\u20133 miesi\u0119cy<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"deadline\" data-value=\"Termin elastyczny\">Termin elastyczny<\/button>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/section>\n\t<section class=\"builder-step\" data-step=\"3\">\n\t\t<p><span class=\"builder-label\">Jaki jest bud\u017cet?<\/span>\n\t\t<\/p>\n\t\t<div class=\"builder-options\">\n\t\t\t<p><button type=\"button\" class=\"builder-option is-active\" data-field=\"budget\" data-value=\"Do 3 000 z\u0142\">Do 3 000 z\u0142<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"budget\" data-value=\"3 000\u20137 000 z\u0142\">3 000\u20137 000 z\u0142<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"budget\" data-value=\"7 000\u201315 000 z\u0142\">7 000\u201315 000 z\u0142<\/button><br \/>\n<button type=\"button\" class=\"builder-option\" data-field=\"budget\" data-value=\"Powy\u017cej 15 000 z\u0142\">Powy\u017cej 15 000 z\u0142<\/button>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/section>\n\t<section class=\"builder-step\" data-step=\"4\">\n\t\t<p><span class=\"builder-label\">Opowiedz o projekcie<\/span>\n\t\t<\/p>\n\t\t<div class=\"builder-fields\">\n\t\t\t<p><label class=\"builder-field\"><br \/>\n<span class=\"builder-label\">Marka \/ projekt<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"project-name\"><input size=\"40\" maxlength=\"120\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required builder-input\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nazwa marki lub projektu\" value=\"\" type=\"text\" name=\"project-name\" \/><\/span><br \/>\n<\/label>\n\t\t\t<\/p>\n\t\t\t<p><label class=\"builder-field\"><br \/>\n<span class=\"builder-label\">Opis<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"extra-info\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2500\" minlength=\"20\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required builder-textarea\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Cel, zakres i najwa\u017cniejsze informacje\" name=\"extra-info\"><\/textarea><\/span><br \/>\n<\/label>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/section>\n\t<section class=\"builder-step\" data-step=\"5\">\n\t\t<p><span class=\"builder-label\">Dane kontaktowe<\/span>\n\t\t<\/p>\n\t\t<div class=\"builder-fields\">\n\t\t\t<p><label class=\"builder-field\"><br \/>\n<span class=\"builder-label\">Imi\u0119 i nazwisko<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"100\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required builder-input\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Imi\u0119 i nazwisko\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><br \/>\n<\/label>\n\t\t\t<\/p>\n\t\t\t<p><label class=\"builder-field\"><br \/>\n<span class=\"builder-label\">E-mail<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"150\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email builder-input\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"adres@email.pl\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><br \/>\n<\/label>\n\t\t\t<\/p>\n\t\t\t<p><label class=\"builder-field\"><br \/>\n<span class=\"builder-label\">Telefon<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-phone\"><input size=\"40\" maxlength=\"30\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel builder-input\" autocomplete=\"tel\" aria-invalid=\"false\" placeholder=\"+48 000 000 000\" value=\"\" type=\"tel\" name=\"your-phone\" \/><\/span><br \/>\n<\/label>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"builder-preview\">\n\t\t\t<p><span class=\"builder-label\">Podgl\u0105d wiadomo\u015bci<\/span><br \/>\n<textarea class=\"builder-preview-text\" readonly aria-label=\"Podgl\u0105d wiadomo\u015bci\"><\/textarea>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"builder-antirobot\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"antirobot\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"antirobot\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Potwierdzam, \u017ce nie jestem automatem.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"builder-captcha\">\n\t\t\n\t\t<\/div>\n\t\t<p class=\"builder-final-note\">Formularz chroni\u0105 Turnstile, Akismet, honeypot, limit czasu i ograniczenie liczby wysy\u0142ek.\n\t\t<\/p>\n\t<\/section>\n\t<div class=\"builder-hidden-fields\">\n\t<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"Fotografia\" type=\"hidden\" name=\"service\" \/>\n\t<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"Jak najszybciej\" type=\"hidden\" name=\"deadline\" \/>\n\t<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"Do 3 000 z\u0142\" type=\"hidden\" name=\"budget\" \/>\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"builder-actions\">\n\t\t<p><button type=\"button\" class=\"builder-nav builder-prev\" disabled>Wstecz<\/button>\n\t\t<\/p>\n\t\t<div class=\"builder-forward-wrap\">\n\t\t\t<p><button type=\"button\" class=\"builder-nav builder-next\">Dalej<\/button><br \/>\n<span class=\"builder-submit-wrap\"><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Wy\u015blij zapytanie\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"_wpcf7_ak_\"><label>Δ<textarea name=\"_wpcf7_ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"_wpcf7_ak_js\" value=\"45\"\/><script>\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n<\/script>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n<script>\n(function () {\n \"use strict\";\n\n function initWebsitesCarousel(section) {\n if (!section || section.dataset.carouselReady === \"true\") return;\n\n var viewport = section.querySelector(\".websites__links\");\n var previous = section.querySelector(\".websites__arrow--prev\");\n var next = section.querySelector(\".websites__arrow--next\");\n if (!viewport || !viewport.children.length) return;\n\n section.dataset.carouselReady = \"true\";\n\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n var ticking = false;\n\n function gapSize() {\n var styles = window.getComputedStyle(viewport);\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\n }\n\n function stepSize() {\n var first = viewport.firstElementChild;\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\n }\n\n function maxScroll() {\n return Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n }\n\n function updateButtons() {\n var max = maxScroll();\n var left = viewport.scrollLeft;\n var tolerance = 3;\n\n if (previous) previous.disabled = left <= tolerance;\n if (next) next.disabled = left >= max - tolerance;\n }\n\n function move(direction) {\n viewport.scrollBy({\n left: direction * stepSize(),\n behavior: reducedMotion ? \"auto\" : \"smooth\"\n });\n }\n\n if (previous) previous.addEventListener(\"click\", function () { move(-1); });\n if (next) next.addEventListener(\"click\", function () { move(1); });\n\n viewport.addEventListener(\"keydown\", function (event) {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n move(-1);\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n move(1);\n }\n });\n\n viewport.addEventListener(\"scroll\", function () {\n if (ticking) return;\n ticking = true;\n window.requestAnimationFrame(function () {\n ticking = false;\n updateButtons();\n });\n }, { passive: true });\n\n window.addEventListener(\"resize\", updateButtons, { passive: true });\n updateButtons();\n }\n\n function bootWebsitesCarousels() {\n Array.prototype.forEach.call(\n document.querySelectorAll(\"[data-websites-carousel]\"),\n initWebsitesCarousel\n );\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", bootWebsitesCarousels);\n } else {\n bootWebsitesCarousels();\n }\n}());\n;\n(function () {\n \"use strict\";\n\n function list(nodes) {\n return Array.prototype.slice.call(nodes || []);\n }\n\n function playerProvider(item) {\n if (item.getAttribute(\"data-youtube-id\")) return \"youtube\";\n if (item.getAttribute(\"data-vimeo-id\")) return \"vimeo\";\n return \"\";\n }\n\n function postToPlayer(iframe, method) {\n if (!iframe || !iframe.contentWindow) return;\n\n var provider = iframe.getAttribute(\"data-player-provider\");\n\n try {\n if (provider === \"youtube\") {\n iframe.contentWindow.postMessage(JSON.stringify({\n event: \"command\",\n func: method === \"pause\" ? \"pauseVideo\" : method,\n args: []\n }), \"https:\/\/www.youtube-nocookie.com\");\n } else {\n iframe.contentWindow.postMessage({ method: method }, \"https:\/\/player.vimeo.com\");\n }\n } catch (error) {\n\n }\n }\n\n function pausePlayers(section) {\n list(section.querySelectorAll(\"iframe\")).forEach(function (iframe) {\n postToPlayer(iframe, \"pause\");\n });\n }\n\n function applyMediaSizing(element) {\n\n element.style.setProperty(\"position\", \"absolute\", \"important\");\n element.style.setProperty(\"inset\", \"0\", \"important\");\n element.style.setProperty(\"display\", \"block\", \"important\");\n element.style.setProperty(\"width\", \"100%\", \"important\");\n element.style.setProperty(\"height\", \"100%\", \"important\");\n element.style.setProperty(\"min-width\", \"100%\", \"important\");\n element.style.setProperty(\"min-height\", \"100%\", \"important\");\n element.style.setProperty(\"max-width\", \"none\", \"important\");\n element.style.setProperty(\"max-height\", \"none\", \"important\");\n element.style.setProperty(\"margin\", \"0\", \"important\");\n element.style.setProperty(\"padding\", \"0\", \"important\");\n element.style.setProperty(\"border\", \"0\", \"important\");\n }\n\n function insertThumbnail(item, source, alt, status) {\n var image = document.createElement(\"img\");\n image.className = \"works-loop__thumbnail\";\n\n image.alt = alt || \"Miniatura realizacji wideo\";\n image.loading = \"lazy\";\n image.decoding = \"async\";\n\n applyMediaSizing(image);\n image.style.setProperty(\"object-fit\", \"cover\", \"important\");\n image.style.setProperty(\"object-position\", \"center center\", \"important\");\n\n var youtube = item.getAttribute(\"data-youtube-id\");\n var candidates = youtube ? [\"maxresdefault.jpg\", \"sddefault.jpg\", \"hqdefault.jpg\"].map(function (name) {\n return \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(youtube) + \"\/\" + name;\n }) : [source];\n var candidate = 0;\n function fallback() {\n if (candidate + 1 < candidates.length) {\n image.src = candidates[++candidate];\n } else {\n image.hidden = true;\n image.style.setProperty(\"display\", \"none\", \"important\");\n if (status) status.textContent = \"Miniatura niedost\u0119pna. Otw\u00f3rz wideo\";\n }\n }\n image.addEventListener(\"load\", function () {\n \/\/ YouTube may return a 120px placeholder with a successful HTTP status.\n if (youtube && image.naturalWidth <= 120) { fallback(); return; }\n if (status && status.parentNode) status.remove();\n });\n image.addEventListener(\"error\", fallback);\n image.src = candidates[0];\n\n item.insertBefore(image, item.firstChild);\n }\n\n function loadVideoThumbnail(item) {\n var provider = playerProvider(item);\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\n var youtubeId = item.getAttribute(\"data-youtube-id\");\n if (!provider) return;\n\n var status = document.createElement(\"span\");\n status.className = \"works-loop__status\";\n status.textContent = \"\u0141adowanie miniatury\";\n item.appendChild(status);\n\n if (provider === \"youtube\") {\n insertThumbnail(\n item,\n \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(youtubeId) + \"\/hqdefault.jpg\",\n \"Miniatura realizacji wideo z YouTube\",\n status\n );\n return;\n }\n\n var refreshThumbnail = item.getAttribute(\"data-thumbnail-refresh\") === \"true\";\n var cacheBust = refreshThumbnail ? \"&cb=\" + Date.now() : \"\";\n var endpoint = \"https:\/\/vimeo.com\/api\/oembed.json?url=\" +\n encodeURIComponent(\"https:\/\/vimeo.com\/\" + vimeoId) + \"&width=1920&dnt=1\" + cacheBust;\n\n fetch(endpoint, {\n mode: \"cors\",\n credentials: \"omit\",\n cache: refreshThumbnail ? \"no-store\" : \"default\"\n })\n .then(function (response) {\n if (!response.ok) throw new Error(\"Vimeo thumbnail request failed\");\n return response.json();\n })\n .then(function (data) {\n if (!data || !data.thumbnail_url) throw new Error(\"Missing Vimeo thumbnail\");\n\n var thumbnailSource = data.thumbnail_url;\n if (refreshThumbnail) {\n thumbnailSource += (thumbnailSource.indexOf(\"?\") === -1 ? \"?\" : \"&\") +\n \"cb=\" + Date.now();\n }\n\n insertThumbnail(\n item,\n thumbnailSource,\n data.title ? data.title : \"Miniatura realizacji wideo\",\n status\n );\n })\n .catch(function () {\n status.textContent = \"Otw\u00f3rz wideo\";\n });\n }\n\n function videoDirectUrl(item) {\n var customUrl = item.getAttribute(\"data-video-url\");\n var youtubeId = item.getAttribute(\"data-youtube-id\");\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\n\n if (customUrl) {\n return customUrl;\n }\n\n if (youtubeId) {\n return \"https:\/\/www.youtube.com\/watch?v=\" + encodeURIComponent(youtubeId);\n }\n\n if (vimeoId) {\n return \"https:\/\/vimeo.com\/\" + encodeURIComponent(vimeoId);\n }\n\n return \"\";\n }\n\n function createVideoLink(item) {\n var directUrl = videoDirectUrl(item);\n if (!directUrl) return;\n\n var featured = !!item.closest(\".device-story\");\n var link = document.createElement(featured ? \"button\" : \"a\");\n var icon = document.createElement(\"span\");\n\n link.className = \"works-loop__play\";\n link.href = directUrl;\n link.target = \"_blank\";\n link.rel = \"noopener noreferrer\";\n link.draggable = false;\n link.setAttribute(\"aria-label\", \"Otw\u00f3rz wideo w nowej karcie\");\n\n icon.className = \"works-loop__play-icon\";\n icon.setAttribute(\"aria-hidden\", \"true\");\n link.appendChild(icon);\n\n if (featured) {\n link.type = \"button\";\n link.setAttribute(\"aria-label\", \"Odtw\u00f3rz film w ekranie laptopa\");\n link.addEventListener(\"click\", function () {\n window.dispatchEvent(new Event(\"device-play\"));\n document.querySelectorAll('.device-close-player').forEach(function (button) { button.click(); });\n var frame = document.createElement('iframe');\n frame.className = 'device-full-player';\n frame.src = 'https:\/\/www.youtube-nocookie.com\/embed\/' + encodeURIComponent(item.dataset.youtubeId) + '?autoplay=1&playsinline=1&rel=0';\n frame.title = 'Odtwarzacz realizacji wideo';\n frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';\n frame.allowFullscreen = true;\n frame.referrerPolicy = 'strict-origin-when-cross-origin';\n item.appendChild(frame);\n link.hidden = true;\n var close = document.createElement('button');\n close.type = 'button';\n close.className = 'device-close-player';\n close.textContent = 'Zamknij film';\n var card = item.closest('.device-story');\n card.appendChild(close);\n close.addEventListener('click', function () {\n frame.remove(); close.remove(); link.hidden = false; link.focus();\n });\n close.focus();\n });\n }\n item.appendChild(link);\n }\n\n function initWorksLoop(section) {\n if (!section || section.getAttribute(\"data-loop-ready\") === \"true\") return;\n\n var viewport = section.querySelector(\".works-loop__viewport\");\n var track = section.querySelector(\".works-loop__track\");\n var previous = section.querySelector(\".works-loop__arrow--prev\");\n var next = section.querySelector(\".works-loop__arrow--next\");\n if (!viewport || !track || !track.children.length) return;\n\n section.setAttribute(\"data-loop-ready\", \"true\");\n\n var items = list(track.children);\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n var dragging = false;\n var dragStartX = 0;\n var dragStartScroll = 0;\n var suppressVideoClick = false;\n\n function gapSize() {\n var styles = window.getComputedStyle(track);\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\n }\n\n function stepSize() {\n var first = track.firstElementChild;\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\n }\n\n function nearestIndex() {\n var step = stepSize();\n if (!step) return 0;\n return Math.max(0, Math.min(items.length - 1, Math.round(viewport.scrollLeft \/ step)));\n }\n\n function move(direction, userInitiated) {\n var current = nearestIndex();\n var target = current + direction;\n\n if (target >= items.length) target = 0;\n if (target < 0) target = items.length - 1;\n\n pausePlayers(section);\n viewport.scrollTo({\n left: target * stepSize(),\n behavior: reducedMotion ? \"auto\" : \"smooth\"\n });\n\n }\n\n items.forEach(createVideoLink);\n\n if (\"IntersectionObserver\" in window) {\n var thumbnailObserver = new IntersectionObserver(function (entries, observer) {\n entries.forEach(function (entry) {\n if (!entry.isIntersecting) return;\n observer.unobserve(entry.target);\n loadVideoThumbnail(entry.target);\n });\n }, { rootMargin: \"400px 200px\", threshold: 0.01 });\n\n items.forEach(function (item) { thumbnailObserver.observe(item); });\n } else {\n items.forEach(loadVideoThumbnail);\n }\n\n if (section.dataset.videoLayout === \"grid\") return;\n\n if (previous) {\n previous.addEventListener(\"click\", function () {\n move(-1, true);\n });\n }\n\n if (next) {\n next.addEventListener(\"click\", function () {\n move(1, true);\n });\n }\n\n viewport.addEventListener(\"keydown\", function (event) {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n move(-1, true);\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n move(1, true);\n }\n });\n\n viewport.addEventListener(\"pointerdown\", function (event) {\n if (event.pointerType !== \"mouse\") return;\n\n dragging = true;\n suppressVideoClick = false;\n dragStartX = event.clientX;\n dragStartScroll = viewport.scrollLeft;\n\n });\n\n viewport.addEventListener(\"pointermove\", function (event) {\n if (!dragging) return;\n\n var deltaX = event.clientX - dragStartX;\n\n if (!suppressVideoClick && Math.abs(deltaX) > 6) {\n suppressVideoClick = true;\n viewport.classList.add(\"is-dragging\");\n\n if (viewport.setPointerCapture) {\n viewport.setPointerCapture(event.pointerId);\n }\n }\n\n if (!suppressVideoClick) return;\n\n event.preventDefault();\n viewport.scrollLeft = dragStartScroll - deltaX;\n });\n\n viewport.addEventListener(\"click\", function (event) {\n if (!suppressVideoClick || !event.target.closest(\".works-loop__play\")) return;\n event.preventDefault();\n suppressVideoClick = false;\n }, true);\n\n function endDrag(event) {\n if (!dragging) return;\n dragging = false;\n viewport.classList.remove(\"is-dragging\");\n if (viewport.hasPointerCapture && viewport.hasPointerCapture(event.pointerId)) {\n viewport.releasePointerCapture(event.pointerId);\n }\n }\n\n viewport.addEventListener(\"pointerup\", endDrag);\n viewport.addEventListener(\"pointercancel\", endDrag);\n\n document.addEventListener(\"visibilitychange\", function () {\n if (document.hidden) pausePlayers(section);\n });\n }\n\n function bootWorksLoops() {\n list(document.querySelectorAll(\"[data-works-loop]\")).forEach(initWorksLoop);\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", bootWorksLoops);\n } else {\n bootWorksLoops();\n }\n}());\n;\n(function () {\n \"use strict\";\n\n function pad(value) {\n return String(value).padStart(2, \"0\");\n }\n\n function initBuilder(root) {\n if (!root || root.dataset.ready === \"true\") return;\n\n const steps = Array.from(root.querySelectorAll(\".builder-step\"));\n const counter = root.querySelector(\".builder-counter\");\n const progress = root.querySelector(\".builder-progress-bar\");\n const previous = root.querySelector(\".builder-prev\");\n const next = root.querySelector(\".builder-next\");\n const preview = root.querySelector(\".builder-preview-text\");\n const cf7Form = root.closest(\".wpcf7-form\");\n const antirobot = root.querySelector('[name=\"antirobot\"]');\n const submit = cf7Form\n ? cf7Form.querySelector('input[type=\"submit\"], button[type=\"submit\"]')\n : null;\n let submitWrap = root.querySelector(\".builder-submit-wrap\");\n const actions = root.querySelector(\".builder-actions\");\n\n function normalizeActionButtons() {\n if (!actions || !previous || !next || !submit) return;\n\n if (!submitWrap) {\n submitWrap = document.createElement(\"div\");\n submitWrap.className = \"builder-submit-wrap\";\n submitWrap.appendChild(submit);\n }\n\n const spinner = cf7Form\n ? cf7Form.querySelector(\".wpcf7-spinner\")\n : null;\n const backSlot = document.createElement(\"div\");\n const forwardSlot = document.createElement(\"div\");\n\n backSlot.className = \"builder-action-slot builder-action-slot--back\";\n forwardSlot.className = \"builder-action-slot builder-action-slot--forward\";\n\n backSlot.appendChild(previous);\n forwardSlot.appendChild(next);\n forwardSlot.appendChild(submitWrap);\n\n if (spinner && !submitWrap.contains(spinner)) {\n submitWrap.appendChild(spinner);\n }\n\n actions.replaceChildren(backSlot, forwardSlot);\n }\n\n normalizeActionButtons();\n\n const spamGate = {\n honeypot: null,\n startedAt: null,\n proof: null\n };\n\n const fields = {\n projectName: root.querySelector('[name=\"project-name\"]'),\n extraInfo: root.querySelector('[name=\"extra-info\"]'),\n name: root.querySelector('[name=\"your-name\"]'),\n email: root.querySelector('[name=\"your-email\"]'),\n phone: root.querySelector('[name=\"your-phone\"]'),\n service: root.querySelector('[name=\"service\"]'),\n deadline: root.querySelector('[name=\"deadline\"]'),\n budget: root.querySelector('[name=\"budget\"]'),\n message: root.querySelector('[name=\"your-message\"]')\n };\n\n const state = {\n currentStep: 0,\n service: \"Do ustalenia\",\n deadline: \"Do ustalenia\",\n budget: \"Do ustalenia\"\n };\n\n root.dataset.ready = \"true\";\n\n function proofFor(startedAt) {\n return String(((startedAt * 17) + 23) % 1000003);\n }\n\n function ensureSpamGate() {\n if (!cf7Form) return;\n\n let trap = root.querySelector(\".builder-spam-trap\");\n\n if (!trap) {\n trap = document.createElement(\"div\");\n trap.className = \"builder-spam-trap\";\n trap.setAttribute(\"aria-hidden\", \"true\");\n trap.innerHTML = [\n '<label for=\"portfolio-company-site\">Leave this field empty<\/label>',\n '<input id=\"portfolio-company-site\" type=\"text\" name=\"portfolio-company-site\"',\n ' autocomplete=\"off\" tabindex=\"-1\" value=\"\">',\n '<input type=\"hidden\" name=\"portfolio-started-at\" value=\"\">',\n '<input type=\"hidden\" name=\"portfolio-js-proof\" value=\"\">'\n ].join(\"\");\n cf7Form.appendChild(trap);\n }\n\n spamGate.honeypot = trap.querySelector('[name=\"portfolio-company-site\"]');\n spamGate.startedAt = trap.querySelector('[name=\"portfolio-started-at\"]');\n spamGate.proof = trap.querySelector('[name=\"portfolio-js-proof\"]');\n\n resetSpamGate();\n }\n\n function resetSpamGate() {\n const startedAt = Math.floor(Date.now() \/ 1000);\n\n if (spamGate.honeypot) spamGate.honeypot.value = \"\";\n if (spamGate.startedAt) spamGate.startedAt.value = String(startedAt);\n if (spamGate.proof) spamGate.proof.value = proofFor(startedAt);\n\n }\n\n function combinedContent() {\n return [\n value(fields.projectName),\n value(fields.extraInfo),\n value(fields.name),\n value(fields.email),\n value(fields.phone)\n ].join(\" \");\n }\n\n function passesClientSpamChecks() {\n const startedAt = spamGate.startedAt\n ? Number(spamGate.startedAt.value || 0)\n : 0;\n const content = combinedContent();\n const urls = content.match(\/(?:https?:\\\/\\\/|www\\.)\/gi) || [];\n\n if (spamGate.honeypot && spamGate.honeypot.value.trim()) return false;\n if (!startedAt) return false;\n if (!spamGate.proof || spamGate.proof.value !== proofFor(startedAt)) return false;\n if (urls.length > 3) return false;\n if (\/<\\s*(?:script|iframe|a)\\b|\\[url=\/i.test(content)) return false;\n\n return true;\n }\n\n function value(field) {\n return field ? String(field.value || \"\").trim() : \"\";\n }\n\n function buildMessage() {\n return [\n \"Dzie\u0144 dobry,\",\n \"\",\n \"chc\u0119 porozmawia\u0107 o nowym projekcie.\",\n \"\",\n \"Us\u0142uga: \" + state.service,\n \"Termin: \" + state.deadline,\n \"Bud\u017cet: \" + state.budget,\n \"Marka \/ projekt: \" + (value(fields.projectName) || \"-\"),\n \"\",\n \"Opis projektu:\",\n value(fields.extraInfo) || \"-\",\n \"\",\n \"Dane kontaktowe:\",\n \"Imi\u0119 i nazwisko: \" + (value(fields.name) || \"-\"),\n \"E-mail: \" + (value(fields.email) || \"-\"),\n \"Telefon: \" + (value(fields.phone) || \"-\")\n ].join(\"\\n\");\n }\n\n function syncFields() {\n if (fields.service) fields.service.value = state.service;\n if (fields.deadline) fields.deadline.value = state.deadline;\n if (fields.budget) fields.budget.value = state.budget;\n\n const message = buildMessage();\n\n if (fields.message) {\n fields.message.value = message;\n fields.message.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n\n if (preview) preview.value = message;\n }\n\n function syncAntirobot() {\n const confirmed = !antirobot || antirobot.checked;\n\n root.classList.toggle(\n \"has-antirobot-confirmation\",\n Boolean(antirobot && antirobot.checked)\n );\n\n if (submit) {\n submit.disabled = !confirmed;\n submit.setAttribute(\"aria-disabled\", String(!confirmed));\n }\n }\n\n function showStep(index, shouldFocus) {\n state.currentStep = Math.max(0, Math.min(index, steps.length - 1));\n\n steps.forEach(function (step, stepIndex) {\n step.classList.toggle(\"is-active\", stepIndex === state.currentStep);\n });\n\n root.classList.toggle(\n \"is-final\",\n state.currentStep === steps.length - 1\n );\n\n if (counter) {\n counter.textContent =\n pad(state.currentStep + 1) + \" \/ \" + pad(steps.length);\n }\n\n if (progress) {\n progress.style.width =\n (((state.currentStep + 1) \/ steps.length) * 100) + \"%\";\n }\n\n if (previous) previous.disabled = state.currentStep === 0;\n\n syncFields();\n\n if (shouldFocus) {\n const activeStep = steps[state.currentStep];\n const focusTarget = activeStep &&\n activeStep.querySelector(\n \".builder-option, .builder-input, .builder-textarea\"\n );\n\n root.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\n if (focusTarget) {\n window.setTimeout(function () {\n focusTarget.focus({ preventScroll: true });\n }, 180);\n }\n }\n }\n\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\n button.addEventListener(\"click\", function () {\n const fieldName = button.dataset.field;\n const selectedValue = button.dataset.value;\n\n if (!fieldName || !selectedValue) return;\n\n state[fieldName] = selectedValue;\n\n root\n .querySelectorAll('[data-field=\"' + fieldName + '\"]')\n .forEach(function (option) {\n option.classList.toggle(\"is-active\", option === button);\n });\n\n syncFields();\n });\n });\n\n [\n fields.projectName,\n fields.extraInfo,\n fields.name,\n fields.email,\n fields.phone\n ].forEach(function (field) {\n if (!field) return;\n field.addEventListener(\"input\", syncFields);\n field.addEventListener(\"change\", syncFields);\n });\n\n if (previous) {\n previous.addEventListener(\"click\", function () {\n showStep(state.currentStep - 1, true);\n });\n }\n\n if (next) {\n next.addEventListener(\"click\", function () {\n showStep(state.currentStep + 1, true);\n });\n }\n\n if (cf7Form) {\n cf7Form.addEventListener(\"submit\", function (event) {\n syncFields();\n\n if (!passesClientSpamChecks()) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }, true);\n\n cf7Form.addEventListener(\"wpcf7invalid\", function () {\n showStep(steps.length - 1, true);\n });\n\n cf7Form.addEventListener(\"wpcf7mailsent\", function () {\n state.service = \"Do ustalenia\";\n state.deadline = \"Do ustalenia\";\n state.budget = \"Do ustalenia\";\n\n if (antirobot) {\n antirobot.checked = false;\n }\n\n resetSpamGate();\n syncAntirobot();\n\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\n button.classList.remove(\"is-active\");\n });\n\n let success = root.querySelector(\".builder-success\");\n if (!success) {\n success = document.createElement(\"div\");\n success.className = \"builder-success\";\n success.setAttribute(\"role\", \"status\");\n success.setAttribute(\"tabindex\", \"-1\");\n success.innerHTML = [\n '<span class=\"builder-success__eyebrow\">Wiadomo\u015b\u0107 wys\u0142ana<\/span>',\n '<h3>Dzi\u0119kuj\u0119. Mam wszystko, czego potrzebuj\u0119 na start.<\/h3>',\n '<p>Zapoznam si\u0119 z projektem i wr\u00f3c\u0119 z propozycj\u0105 sensownych kolejnych krok\u00f3w.<\/p>',\n '<button class=\"builder-success__reset\" type=\"button\">Wy\u015blij kolejn\u0105 wiadomo\u015b\u0107<\/button>'\n ].join(\"\");\n root.appendChild(success);\n\n success.querySelector(\".builder-success__reset\").addEventListener(\"click\", function () {\n root.classList.remove(\"is-sent\");\n success.remove();\n if (cf7Form) cf7Form.reset();\n resetSpamGate();\n syncAntirobot();\n showStep(0, false);\n const firstControl = root.querySelector(\".builder-option, .builder-input, .builder-textarea\");\n if (firstControl) firstControl.focus({ preventScroll: true });\n });\n }\n\n root.classList.add(\"is-sent\");\n success.focus({ preventScroll: true });\n });\n }\n\n ensureSpamGate();\n\n if (antirobot) {\n antirobot.addEventListener(\"change\", syncAntirobot);\n }\n\n syncAntirobot();\n showStep(0, false);\n }\n\n function boot() {\n document\n .querySelectorAll(\"[data-project-builder]\")\n .forEach(initBuilder);\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", boot);\n } else {\n boot();\n }\n\n document.addEventListener(\"wpcf7init\", boot);\n }());\n;\n(function () {\n \"use strict\";\n\n const items = Array.from(\n document.querySelectorAll(\"main > .grid .service-accordion\")\n );\n\n function setOpen(item, open) {\n const button = item.querySelector(\".service-accordion__heading\");\n item.classList.toggle(\"is-open\", open);\n if (button) button.setAttribute(\"aria-expanded\", open ? \"true\" : \"false\");\n }\n\n items.forEach(function (item, index) {\n setOpen(item, index === 0);\n\n const button = item.querySelector(\".service-accordion__heading\");\n if (!button) return;\n\n button.addEventListener(\"click\", function () {\n const shouldOpen = !item.classList.contains(\"is-open\");\n\n items.forEach(function (other) {\n setOpen(other, false);\n });\n\n if (shouldOpen) setOpen(item, true);\n });\n });\n}())\n;\n(function () {\n \"use strict\";\n\n const root = document.querySelector('main > .grid .clients');\n const marquee = root && root.querySelector('.clients__marquee');\n const track = marquee && marquee.querySelector('.clients__track');\n const firstGroup = track && track.querySelector('.clients__group');\n const previousButton = root && root.querySelector('.clients__arrow--prev');\n const nextButton = root && root.querySelector('.clients__arrow--next');\n const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n const mobile = window.matchMedia('(max-width: 720px)');\n\n if (!root || !marquee || !track || !firstGroup || typeof track.animate !== 'function') return;\n\n const cycleDuration = 64000;\n const arrowDuration = 360;\n let cycleWidth = 0;\n let motion = null;\n let dragging = false;\n let pointerId = null;\n let startPointerX = 0;\n let startAnimationTime = 0;\n let arrowFrame = 0;\n let resizeFrame = 0;\n\n function measure() {\n cycleWidth = firstGroup.getBoundingClientRect().width;\n return cycleWidth;\n }\n\n function currentTime() {\n return motion && Number.isFinite(Number(motion.currentTime)) ? Number(motion.currentTime) : 0;\n }\n\n function createMotion(phase) {\n measure();\n if (!cycleWidth) return;\n\n if (motion) motion.cancel();\n\n motion = track.animate(\n [\n { transform: 'translate3d(0px, 0, 0)' },\n { transform: 'translate3d(' + (-cycleWidth) + 'px, 0, 0)' }\n ],\n {\n duration: cycleDuration,\n iterations: Infinity,\n easing: 'linear',\n fill: 'both'\n }\n );\n\n motion.currentTime = Math.max(0, Math.min(1, phase || 0)) * cycleDuration;\n\n if (reducedMotion.matches) {\n motion.pause();\n } else {\n motion.play();\n }\n }\n\n function pixelsToTime(px) {\n return cycleWidth ? (px \/ cycleWidth) * cycleDuration : 0;\n }\n\n function getStep() {\n const logos = firstGroup.querySelectorAll('.clients__logo');\n if (logos.length > 1) {\n return Math.abs(logos[1].getBoundingClientRect().left - logos[0].getBoundingClientRect().left);\n }\n return Math.max(140, marquee.clientWidth * 0.28);\n }\n\n function stopArrowTween() {\n if (arrowFrame) cancelAnimationFrame(arrowFrame);\n arrowFrame = 0;\n }\n\n function resumeMotion() {\n if (motion && !reducedMotion.matches && !dragging) motion.play();\n }\n\n function move(direction) {\n if (!motion || reducedMotion.matches) return;\n\n stopArrowTween();\n measure();\n if (!cycleWidth) return;\n\n motion.pause();\n\n const stepTime = pixelsToTime(getStep());\n let from = currentTime();\n\n \/* Keep previous-arrow movement positive so WAAPI never clamps at time 0. *\/\n if (direction < 0 && from < stepTime) {\n from += cycleDuration;\n motion.currentTime = from;\n }\n\n const to = from + (direction * stepTime);\n const started = performance.now();\n\n function tween(now) {\n const p = Math.min(1, (now - started) \/ arrowDuration);\n const eased = 1 - Math.pow(1 - p, 3);\n motion.currentTime = from + ((to - from) * eased);\n\n if (p < 1) {\n arrowFrame = requestAnimationFrame(tween);\n } else {\n arrowFrame = 0;\n resumeMotion();\n }\n }\n\n arrowFrame = requestAnimationFrame(tween);\n }\n\n if (previousButton) {\n previousButton.addEventListener('click', function () {\n move(-1);\n });\n }\n\n if (nextButton) {\n nextButton.addEventListener('click', function () {\n move(1);\n });\n }\n\n marquee.addEventListener('pointerdown', function (event) {\n if (!mobile.matches || event.pointerType === 'mouse' || !motion) return;\n\n stopArrowTween();\n dragging = true;\n pointerId = event.pointerId;\n startPointerX = event.clientX;\n startAnimationTime = currentTime();\n motion.pause();\n marquee.classList.add('is-dragging');\n\n if (typeof marquee.setPointerCapture === 'function') {\n marquee.setPointerCapture(pointerId);\n }\n });\n\n marquee.addEventListener('pointermove', function (event) {\n if (!dragging || event.pointerId !== pointerId || !motion) return;\n\n const dx = event.clientX - startPointerX;\n let nextTime = startAnimationTime - pixelsToTime(dx);\n\n if (nextTime < 0) {\n nextTime += Math.ceil(Math.abs(nextTime) \/ cycleDuration) * cycleDuration;\n }\n\n motion.currentTime = nextTime;\n });\n\n function releasePointer(event) {\n if (!dragging || (event && event.pointerId !== pointerId)) return;\n\n dragging = false;\n marquee.classList.remove('is-dragging');\n\n if (pointerId !== null && typeof marquee.releasePointerCapture === 'function') {\n try { marquee.releasePointerCapture(pointerId); } catch (error) {}\n }\n\n pointerId = null;\n resumeMotion();\n }\n\n marquee.addEventListener('pointerup', releasePointer);\n marquee.addEventListener('pointercancel', releasePointer);\n\n window.addEventListener('resize', function () {\n if (resizeFrame) cancelAnimationFrame(resizeFrame);\n resizeFrame = requestAnimationFrame(function () {\n resizeFrame = 0;\n const phase = ((currentTime() % cycleDuration) + cycleDuration) % cycleDuration \/ cycleDuration;\n createMotion(phase);\n });\n }, { passive: true });\n\n function syncMotionPreference() {\n if (!motion) return;\n\n if (reducedMotion.matches) {\n stopArrowTween();\n dragging = false;\n pointerId = null;\n marquee.classList.remove('is-dragging');\n motion.currentTime = 0;\n motion.pause();\n } else {\n motion.play();\n }\n }\n\n if (typeof reducedMotion.addEventListener === 'function') {\n reducedMotion.addEventListener('change', syncMotionPreference);\n } else if (typeof reducedMotion.addListener === 'function') {\n reducedMotion.addListener(syncMotionPreference);\n }\n\n root.classList.add('is-logo-carousel-enhanced');\n createMotion(0);\n}());\n(function () {\n \"use strict\";\n\n var root = document.querySelector(\"[data-testimonials]\");\n if (!root || root.dataset.ready === \"true\") return;\n root.dataset.ready = \"true\";\n\n var reviews = [{\"name\": \"Grzegorz Witkowski\", \"role\": \"Head of Marketing @ Scalo\", \"quote\": \"Mia\u0142em ogromn\u0105 przyjemno\u015b\u0107 pracowa\u0107 z Micha\u0142em w Scalo i mog\u0119 powiedzie\u0107, \u017ce jego do\u015bwiadczenie w content marketingu jest naprawd\u0119 wyj\u0105tkowe. Wyr\u00f3\u017cnia go po\u0142\u0105czenie kompetencji kreatywnych, technologicznych i digitalowych. Micha\u0142 potrafi przek\u0142ada\u0107 z\u0142o\u017cone tematy IT na anga\u017cuj\u0105ce tre\u015bci, dzi\u0119ki czemu technologia staje si\u0119 bardziej zrozumia\u0142a.\"}, {\"name\": \"Yevhen Hnatenko\", \"role\": \"Online Marketing Team Leader @ Scalo\", \"quote\": \"Mia\u0142em przyjemno\u015b\u0107 pracowa\u0107 z Micha\u0142em w jednym zespole marketingowym. Bardzo wysoko oceniam jego znajomo\u015b\u0107 nowoczesnych narz\u0119dzi marketingowych, szczeg\u00f3lnie w obszarze grafiki i video. Doceniam te\u017c jego umiej\u0119tno\u015bci contentowe, zgodne z aktualnymi standardami SEO i copywritingu pisanego dla ludzi.\"}, {\"name\": \"Kamil \u0141azarz\", \"role\": \"Senior Software Engineer \/ Product Owner\", \"quote\": \"Micha\u0142 jest profesjonalist\u0105 w tym, co robi. Ma du\u017co pomys\u0142\u00f3w i pokazuje w praktyce, \u017ce content marketing ma realne znaczenie dla rozwoju biznesu. Ka\u017cdego dnia pozytywnie zaskakiwa\u0142 mnie tym, jak sprawnie zarz\u0105dza swoj\u0105 prac\u0105.\"}, {\"name\": \"Damian Winkowski\", \"role\": \"AI, ludzie i dowo\u017cenie projekt\u00f3w\", \"quote\": \"Micha\u0142 to bardzo zaanga\u017cowany tw\u00f3rca contentu. Podczas naszej wsp\u00f3\u0142pracy w LEOCODE pracowa\u0142 ze mn\u0105 rami\u0119 w rami\u0119 przy podcastach, grafikach, tekstach blogowych i materia\u0142ach video. By\u0142 kreatywny, przychodzi\u0142 z dobrymi pomys\u0142ami i potrafi\u0142 przek\u0142ada\u0107 je na realne dzia\u0142ania.\"}, {\"name\": \"Katarzyna Musialska\", \"role\": \"HR Manager \/ HR Business Partner\", \"quote\": \"Micha\u0142 jest osob\u0105 proaktywn\u0105, zawsze z ciekaw\u0105 propozycj\u0105 kreatywnego rozwi\u0105zania. Od pierwszych dni wsp\u00f3\u0142pracy wida\u0107 by\u0142o jego wielkie zaanga\u017cowanie nie tylko w tematy szeroko rozumianego marketingu, grafiki i tre\u015bci video, ale r\u00f3wnie\u017c w cel zespo\u0142owy.\"}, {\"name\": \"Ireneusz R\u00f3\u017ca\u0144ski\", \"role\": \"Web Side Story\", \"quote\": \"Kategoria PRO: po\u0142\u0105czenie kreatywno\u015bci z odpowiedzialno\u015bci\u0105 i doskona\u0142ym wyczuciem obrazu.\"}, {\"name\": \"Anna Gajda\", \"role\": \"Psychologia pracy i komunikacji\", \"quote\": \"Wsp\u00f3\u0142praca z Micha\u0142em jest czyst\u0105 przyjemno\u015bci\u0105. Zawsze profesjonalny, cz\u0142owiek od zada\u0144 specjalnych, kt\u00f3ry ka\u017cdy problem traktuje jako nowe wyzwanie.\"}];\n var stage = root.querySelector(\".testimonial-stage\");\n var quote = root.querySelector(\"[data-testimonial-quote]\");\n var name = root.querySelector(\"[data-testimonial-name]\");\n var role = root.querySelector(\"[data-testimonial-role]\");\n var previousButton = root.querySelector(\"[data-testimonial-prev]\");\n var nextButton = root.querySelector(\"[data-testimonial-next]\");\n var dots = root.querySelector(\"[data-testimonial-dots]\");\n\n var active = 0;\n var changingTimer = null;\n var autoplayTimer = null;\n var autoplayDelay = 6500;\n var pointerId = null;\n var startX = 0;\n var startY = 0;\n var paused = true;\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n function updateDots() {\n if (!dots) return;\n\n Array.prototype.forEach.call(dots.children, function (dot, index) {\n dot.classList.toggle(\"is-active\", index === active);\n });\n }\n\n function buildDots() {\n if (!dots) return;\n\n dots.innerHTML = \"\";\n reviews.forEach(function (_, index) {\n var dot = document.createElement(\"span\");\n dot.className = \"testimonial-mobile-cue__dot\" + (index === active ? \" is-active\" : \"\");\n dots.appendChild(dot);\n });\n }\n\n function applyReview(index) {\n active = (index + reviews.length) % reviews.length;\n var review = reviews[active];\n\n quote.textContent = review.quote;\n name.textContent = review.name;\n role.textContent = review.role;\n updateDots();\n\n }\n\n function render(index) {\n clearTimeout(changingTimer);\n\n if (reducedMotion) {\n applyReview(index);\n return;\n }\n\n stage.classList.add(\"is-changing\");\n\n changingTimer = setTimeout(function () {\n applyReview(index);\n\n requestAnimationFrame(function () {\n stage.classList.remove(\"is-changing\");\n });\n }, 120);\n }\n\n function stopAutoplay() {\n clearInterval(autoplayTimer);\n autoplayTimer = null;\n }\n\n function startAutoplay() {\n if (reducedMotion || paused || reviews.length < 2) return;\n\n stopAutoplay();\n autoplayTimer = setInterval(function () {\n render(active + 1);\n }, autoplayDelay);\n }\n\n function restartAutoplay() {\n stopAutoplay();\n startAutoplay();\n }\n\n if (previousButton) {\n previousButton.addEventListener(\"click\", function () {\n render(active - 1);\n restartAutoplay();\n });\n }\n\n if (nextButton) {\n nextButton.addEventListener(\"click\", function () {\n render(active + 1);\n restartAutoplay();\n });\n }\n\n root.addEventListener(\"keydown\", function (event) {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n render(active - 1);\n restartAutoplay();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n render(active + 1);\n restartAutoplay();\n }\n });\n\n stage.addEventListener(\"pointerdown\", function (event) {\n if (event.pointerType === \"mouse\") return;\n\n paused = true;\n stopAutoplay();\n\n pointerId = event.pointerId;\n startX = event.clientX;\n startY = event.clientY;\n\n if (stage.setPointerCapture) {\n stage.setPointerCapture(pointerId);\n }\n });\n\n stage.addEventListener(\"pointerup\", function (event) {\n if (pointerId === null || event.pointerId !== pointerId) return;\n\n var dx = event.clientX - startX;\n var dy = event.clientY - startY;\n\n pointerId = null;\n paused = false;\n\n if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) {\n render(active + (dx < 0 ? 1 : -1));\n }\n\n startAutoplay();\n });\n\n stage.addEventListener(\"pointercancel\", function () {\n pointerId = null;\n paused = false;\n startAutoplay();\n });\n\n root.addEventListener(\"mouseenter\", function () {\n paused = true;\n stopAutoplay();\n });\n\n root.addEventListener(\"mouseleave\", function () {\n paused = false;\n startAutoplay();\n });\n\n root.addEventListener(\"focusin\", function () {\n paused = true;\n stopAutoplay();\n });\n\n root.addEventListener(\"focusout\", function (event) {\n if (!root.contains(event.relatedTarget)) {\n paused = false;\n startAutoplay();\n }\n });\n\n document.addEventListener(\"visibilitychange\", function () {\n if (document.hidden) {\n stopAutoplay();\n } else {\n startAutoplay();\n }\n });\n\n buildDots();\n applyReview(0);\n startAutoplay();\n}());\n lockLetterSlots();\n\n var slotResizeTimer;\n window.addEventListener(\"resize\", function() {\n clearTimeout(slotResizeTimer);\n slotResizeTimer = setTimeout(lockLetterSlots, 160);\n });\n\n<\/script>\n\n\n\n\n<script>\n(function () {\n \"use strict\";\n\n const nav = document.querySelector(\"[data-motion-nav]\");\n const toggle = nav && nav.querySelector(\"[data-motion-nav-toggle]\");\n const label = nav && nav.querySelector(\"[data-motion-nav-label]\");\n const drawer = nav && nav.querySelector(\"[data-motion-nav-drawer]\");\n const clock = nav && nav.querySelector(\"[data-live-clock]\");\n\n function setOpen(open) {\n if (!nav || !toggle || !drawer) return;\n nav.classList.toggle(\"is-open\", open);\n toggle.setAttribute(\"aria-expanded\", String(open));\n if (label) label.textContent = open ? \"Zamknij\" : \"Menu\";\n drawer.inert = !open;\n }\n\n if (nav && toggle && drawer) {\n drawer.inert = true;\n\n toggle.addEventListener(\"click\", function () {\n setOpen(!nav.classList.contains(\"is-open\"));\n });\n\n nav.querySelectorAll('a[href^=\"#\"]').forEach(function (link) {\n link.addEventListener(\"click\", function () {\n setOpen(false);\n });\n });\n\n document.addEventListener(\"keydown\", function (event) {\n if (event.key === \"Escape\") {\n setOpen(false);\n toggle.focus();\n }\n });\n\n document.addEventListener(\"pointerdown\", function (event) {\n if (nav.classList.contains(\"is-open\") && !nav.contains(event.target)) {\n setOpen(false);\n }\n });\n }\n\n\n function updateClock() {\n if (!clock) return;\n const now = new Date();\n clock.textContent = new Intl.DateTimeFormat([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: false\n }).format(now);\n clock.setAttribute(\"datetime\", now.toISOString());\n }\n\n updateClock();\n window.setInterval(updateClock, 15000);\n}());\n\n\n<\/script>\n\n\n<script>\n(function () {\n const section = document.querySelector('#realizacje-wideo');\n if (!section) return;\n const viewport = section.querySelector('.works-loop__viewport');\n const items = Array.from(section.querySelectorAll('.works-loop__item'));\n const counter = document.createElement('span');\n counter.className = 'works-loop__position';\n counter.setAttribute('role', 'status');\n counter.setAttribute('aria-live', 'polite');\n section.querySelector('.works-loop__header').appendChild(counter);\n let timer;\n function update() {\n counter.textContent = items.length + ' realizacji';\n counter.setAttribute('aria-label', 'Wszystkie realizacje wideo: ' + items.length);\n }\n viewport.addEventListener('scroll', function () { clearTimeout(timer); timer = setTimeout(update, 180); }, {passive:true});\n window.addEventListener('resize', update);\n update();\n}());\n<\/script>\n<script>\n(function(){\n const root = document.querySelector('[data-service-strip]');\n if (!root) return;\n\n const buttons = Array.from(root.querySelectorAll('.service-strip__button'));\n const panels = Array.from(root.querySelectorAll('.service-strip__panel'));\n if (buttons.length < 2) return;\n\n const AUTO_DELAY = 1800;\n const RESUME_DELAY = 600;\n const TOUCH_RESUME_DELAY = 4600;\n const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n let activeIndex = Math.max(0, buttons.findIndex(button => button.getAttribute('aria-expanded') === 'true'));\n let autoTimer = null;\n let resumeTimer = null;\n let pointerInside = false;\n let focusInside = false;\n let inView = true;\n let lastPointerType = 'mouse';\n\n function show(index) {\n activeIndex = (index + buttons.length) % buttons.length;\n buttons.forEach((button, i) => {\n button.setAttribute('aria-expanded', String(i === activeIndex));\n });\n panels.forEach((panel, i) => {\n panel.hidden = i !== activeIndex;\n });\n }\n\n function stopTimers() {\n window.clearTimeout(autoTimer);\n window.clearTimeout(resumeTimer);\n autoTimer = null;\n resumeTimer = null;\n }\n\n function canAutoplay() {\n return !reducedMotion && !pointerInside && !focusInside && inView && !document.hidden;\n }\n\n function scheduleAutoplay(delay = AUTO_DELAY) {\n window.clearTimeout(autoTimer);\n autoTimer = null;\n if (!canAutoplay()) return;\n autoTimer = window.setTimeout(() => {\n show(activeIndex + 1);\n scheduleAutoplay(AUTO_DELAY);\n }, delay);\n }\n\n function pauseAutoplay() {\n window.clearTimeout(autoTimer);\n window.clearTimeout(resumeTimer);\n autoTimer = null;\n resumeTimer = null;\n }\n\n function resumeAutoplay(delay = RESUME_DELAY) {\n window.clearTimeout(resumeTimer);\n resumeTimer = window.setTimeout(() => {\n scheduleAutoplay(AUTO_DELAY);\n }, delay);\n }\n\n show(activeIndex);\n\n buttons.forEach((button, index) => {\n button.addEventListener('pointerenter', event => {\n if (event.pointerType === 'mouse') show(index);\n });\n\n button.addEventListener('pointerdown', event => {\n lastPointerType = event.pointerType || 'mouse';\n pauseAutoplay();\n });\n\n button.addEventListener('focus', () => {\n show(index);\n });\n\n button.addEventListener('click', () => {\n show(index);\n pauseAutoplay();\n if (lastPointerType === 'touch' || lastPointerType === 'pen') {\n resumeAutoplay(TOUCH_RESUME_DELAY);\n }\n });\n\n button.addEventListener('keydown', event => {\n if (event.key === 'Escape') {\n event.preventDefault();\n show(0);\n button.blur();\n resumeAutoplay(RESUME_DELAY);\n }\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n event.preventDefault();\n const direction = event.key === 'ArrowRight' ? 1 : -1;\n const next = (index + direction + buttons.length) % buttons.length;\n buttons[next].focus();\n }\n });\n });\n\n root.addEventListener('pointerenter', event => {\n if (event.pointerType !== 'mouse') return;\n pointerInside = true;\n pauseAutoplay();\n });\n\n root.addEventListener('pointerleave', event => {\n if (event.pointerType !== 'mouse') return;\n pointerInside = false;\n if (!focusInside) resumeAutoplay(RESUME_DELAY);\n });\n\n root.addEventListener('focusin', () => {\n focusInside = true;\n pauseAutoplay();\n });\n\n root.addEventListener('focusout', event => {\n if (root.contains(event.relatedTarget)) return;\n focusInside = false;\n if (!pointerInside) resumeAutoplay(RESUME_DELAY);\n });\n\n if ('IntersectionObserver' in window) {\n const observer = new IntersectionObserver(entries => {\n const entry = entries[0];\n inView = !!entry && entry.isIntersecting && entry.intersectionRatio >= 0.2;\n if (inView) resumeAutoplay(350);\n else pauseAutoplay();\n }, { threshold: [0, 0.2, 0.5] });\n observer.observe(root);\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) pauseAutoplay();\n else resumeAutoplay(500);\n });\n\n scheduleAutoplay(AUTO_DELAY);\n}());<\/script>\n\n<script>\n\n(function () {\n \"use strict\";\n\n var title = document.querySelector(\"[data-construction-title-disabled]\");\n if (!title) return;\n\n var letters = Array.prototype.slice.call(\n title.querySelectorAll(\".construction-letter\")\n );\n if (!letters.length) return;\n\n var reducedMotion = window.matchMedia &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n var finePointer = window.matchMedia &&\n window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n\n var active = false;\n var sequenceToken = 0;\n var touchResetTimer = null;\n\n \/* Intentionally varied collage. The first entries use local\/system fonts,\n so the effect is visible immediately even before web fonts load. *\/\n var fontPool = [\n { family: 'Georgia, \"Times New Roman\", serif', weight: \"400\", style: \"italic\" },\n { family: '-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif', weight: \"700\", style: \"normal\" }\n ];\n var collageOrder = [0, 1];\n\n var baseRoman = {\n family: '-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif',\n weight: \"700\",\n style: \"normal\"\n };\n\n var baseItalic = {\n family: 'Georgia, \"Times New Roman\", serif',\n weight: \"400\",\n style: \"italic\"\n };\n\n function applyFont(face, spec) {\n face.style.setProperty(\"font-family\", spec.family, \"important\");\n face.style.setProperty(\"font-weight\", spec.weight, \"important\");\n face.style.setProperty(\"font-style\", spec.style, \"important\");\n face.style.setProperty(\"letter-spacing\", \"0\", \"important\");\n }\n\n function buildLetter(letter) {\n var char = letter.textContent;\n var isItalic = !!letter.closest(\".construction-word--italic\");\n var base = isItalic ? baseItalic : baseRoman;\n\n letter.textContent = \"\";\n letter.dataset.char = char;\n letter.dataset.baseItalic = isItalic ? \"1\" : \"0\";\n\n var measure = document.createElement(\"span\");\n measure.className = \"construction-letter__measure\";\n measure.textContent = char;\n applyFont(measure, base);\n\n var face = document.createElement(\"i\");\n face.className = \"construction-letter__face\";\n face.setAttribute(\"aria-hidden\", \"true\");\n face.textContent = char;\n applyFont(face, base);\n\n letter.appendChild(measure);\n letter.appendChild(face);\n }\n\n function baseSpec(letter) {\n return letter.dataset.baseItalic === \"1\" ? baseItalic : baseRoman;\n }\n\n function setNormal(letter) {\n var face = letter.querySelector(\".construction-letter__face\");\n if (!face) return;\n\n applyFont(face, baseSpec(letter));\n letter.style.setProperty(\"--letter-x\", \"0em\");\n letter.style.setProperty(\"--letter-y\", \"0em\");\n letter.style.setProperty(\"--letter-r\", \"0deg\");\n }\n\n function setCollage(letter, index) {\n var face = letter.querySelector(\".construction-letter__face\");\n if (!face) return;\n\n var spec = fontPool[collageOrder[index % collageOrder.length]];\n applyFont(face, spec);\n\n \/* Movement remains translate + rotate only. *\/\n var direction = index % 2 === 0 ? -1 : 1;\n var yPattern = [-0.10, 0.07, -0.035, 0.115, -0.065, 0.04];\n var xPattern = [0.000, 0.010, -0.006, 0.014, -0.010];\n\n var y = yPattern[index % yPattern.length];\n var x = xPattern[index % xPattern.length];\n var r = direction * (1.4 + (index % 4) * 0.95);\n\n letter.style.setProperty(\"--letter-x\", x.toFixed(3) + \"em\");\n letter.style.setProperty(\"--letter-y\", y.toFixed(3) + \"em\");\n letter.style.setProperty(\"--letter-r\", r.toFixed(2) + \"deg\");\n }\n\n function strike(letter, callback) {\n if (reducedMotion) {\n callback();\n return;\n }\n\n letter.classList.remove(\"is-typing\");\n void letter.offsetWidth;\n letter.classList.add(\"is-typing\");\n\n window.setTimeout(function () {\n callback();\n\n window.setTimeout(function () {\n letter.classList.remove(\"is-typing\");\n }, 82);\n }, 54);\n }\n\n function typeIn(onComplete) {\n active = true;\n sequenceToken += 1;\n var token = sequenceToken;\n\n letters.forEach(function (letter, index) {\n window.setTimeout(function () {\n if (!active || token !== sequenceToken) return;\n\n strike(letter, function () {\n setCollage(letter, index);\n });\n }, index * 58);\n });\n\n window.setTimeout(function () {\n if (active && token === sequenceToken && typeof onComplete === \"function\") {\n onComplete();\n }\n }, Math.max(0, (letters.length - 1) * 58) + 170);\n }\n\n function typeOut(onComplete) {\n active = false;\n sequenceToken += 1;\n var token = sequenceToken;\n\n letters.slice().reverse().forEach(function (letter, reverseIndex) {\n window.setTimeout(function () {\n if (token !== sequenceToken) return;\n\n strike(letter, function () {\n setNormal(letter);\n });\n }, reverseIndex * 34);\n });\n\n window.setTimeout(function () {\n if (token === sequenceToken && typeof onComplete === \"function\") {\n onComplete();\n }\n }, Math.max(0, (letters.length - 1) * 34) + 170);\n }\n\n function setHoveredLetter(letter, index, transformed) {\n var hoverToken = (parseInt(letter.dataset.hoverToken || \"0\", 10) + 1);\n letter.dataset.hoverToken = String(hoverToken);\n\n strike(letter, function () {\n if (String(hoverToken) !== letter.dataset.hoverToken) return;\n if (transformed) {\n setCollage(letter, index);\n } else {\n setNormal(letter);\n }\n });\n }\n\n \/* Build stable base-font slots, then stay completely normal initially. *\/\n letters.forEach(function (letter) {\n buildLetter(letter);\n setNormal(letter);\n });\n\n var introComplete = false;\n if (reducedMotion) return;\n\n if (finePointer) {\n \/* After the automatic intro, desktop interaction is per-letter only:\n the glyph under the cursor uses the same collage font assigned to it\n in the full animation, and returns to the base face on mouseleave. *\/\n letters.forEach(function (letter, index) {\n letter.addEventListener(\"mouseenter\", function () {\n if (!introComplete) return;\n setHoveredLetter(letter, index, true);\n });\n\n letter.addEventListener(\"mouseleave\", function () {\n if (!introComplete) return;\n setHoveredLetter(letter, index, false);\n });\n });\n } else {\n \/* Touch keeps the existing whole-title tap interaction after the intro. *\/\n title.addEventListener(\"click\", function () {\n if (!introComplete) return;\n\n window.clearTimeout(touchResetTimer);\n\n if (active) {\n typeOut();\n return;\n }\n\n typeIn();\n\n touchResetTimer = window.setTimeout(function () {\n if (active) typeOut();\n }, 4200);\n });\n }\n\n \/* Automatic opening sequence: start after 0.5 s, show the current\n collage-font state, then restore the original title. Only after that\n do desktop per-letter hover interactions become active. *\/\n window.setTimeout(function () {\n typeIn(function () {\n window.setTimeout(function () {\n typeOut(function () {\n introComplete = true;\n\n if (finePointer) {\n letters.forEach(function (letter, index) {\n if (letter.matches && letter.matches(\":hover\")) {\n setHoveredLetter(letter, index, true);\n }\n });\n }\n });\n }, 650);\n });\n }, 2500);\n\n document.addEventListener(\"visibilitychange\", function () {\n if (document.hidden && active) {\n window.clearTimeout(touchResetTimer);\n typeOut(function () {\n if (!introComplete) introComplete = true;\n });\n }\n });\n}());\n\n<\/script>\n\n<script id=\"fit-game-script\">\n(function () {\n 'use strict';\n\n const root = document.querySelector('[data-fit-game]');\n if (!root) return;\n\n const questions = [\n { kind: 'Zakres', positive: true, text: 'Chc\u0119 po\u0142\u0105czy\u0107 strategi\u0119, tre\u015b\u0107 i stron\u0119 wizualn\u0105 zamiast zamawia\u0107 je osobno.' },\n { kind: 'Kontakt', positive: true, text: 'Ceni\u0119 bezpo\u015bredni kontakt z osob\u0105, kt\u00f3ra faktycznie prowadzi i wykonuje projekt.' },\n { kind: 'Umowa', positive: true, text: 'Wol\u0119 zacz\u0105\u0107 od konkretnego projektu lub kr\u00f3tszej wsp\u00f3\u0142pracy, bez rocznej umowy na start.' },\n { kind: 'Bud\u017cet', positive: true, text: 'Je\u015bli bud\u017cet jest ograniczony, wol\u0119 zaw\u0119zi\u0107 zakres do najwa\u017cniejszego elementu ni\u017c robi\u0107 wszystko po trochu.' },\n { kind: 'Kana\u0142y', positive: true, text: 'Potrzebuj\u0119 wsparcia szerszego ni\u017c same social media, na przyk\u0142ad przy stronie, designie, foto, video lub contencie.' },\n { kind: 'Proces', positive: true, text: 'Ceni\u0119 jasne etapy, konkretny spos\u00f3b kontaktu i materia\u0142y do akceptacji zamiast przekazywania projektu mi\u0119dzy wieloma osobami.' },\n { kind: 'Prowadzenie', positive: true, text: 'Chc\u0119, \u017ceby jedna osoba odpowiada\u0142a za kierunek, komunikacj\u0119 i jako\u015b\u0107 ca\u0142ego projektu.' },\n { kind: 'Wycena', positive: true, text: 'Akceptuj\u0119, \u017ce cena wynika z realnego zakresu i poziomu produkcji, a nie z jednego gotowego pakietu.' },\n { kind: 'Elastyczno\u015b\u0107', positive: true, text: 'Wa\u017cne jest dla mnie, \u017ceby wsp\u00f3\u0142prac\u0119 mo\u017cna by\u0142o zako\u0144czy\u0107 na jasnych zasadach bez rocznej blokady.' },\n { kind: 'Dopasowanie', positive: true, text: 'Je\u015bli projekt potrzebuje innego specjalisty lub wi\u0119kszego zespo\u0142u, wol\u0119 us\u0142ysze\u0107 to wprost przed startem.' },\n { kind: 'Priorytet', positive: false, text: 'Szukam przede wszystkim najta\u0144szego wykonania pojedynczego elementu.' },\n { kind: 'Zesp\u00f3\u0142', positive: false, text: 'Potrzebuj\u0119 du\u017cego zespo\u0142u dost\u0119pnego jednocze\u015bnie przez ca\u0142y dzie\u0144.' }\n ];\n\n const counter = root.querySelector('[data-fit-counter]');\n const progress = root.querySelector('[data-fit-progress]');\n const kind = root.querySelector('[data-fit-kind]');\n const question = root.querySelector('[data-fit-question]');\n const questionWrap = root.querySelector('[data-fit-question-wrap]');\n const answers = Array.from(root.querySelectorAll('[data-fit-value]'));\n const back = root.querySelector('[data-fit-back]');\n const footer = root.querySelector('[data-fit-footer]');\n const result = root.querySelector('[data-fit-result]');\n const resultTitle = root.querySelector('[data-fit-result-title]');\n const resultCopy = root.querySelector('[data-fit-result-copy]');\n const reset = root.querySelector('[data-fit-reset]');\n\n let index = 0;\n let picks = new Array(questions.length).fill(null);\n\n function formatStep(number) {\n return String(number).padStart(2, '0');\n }\n\n function renderQuestion(animate) {\n const item = questions[index];\n counter.textContent = formatStep(index + 1) + ' \/ ' + formatStep(questions.length);\n progress.style.width = (((index + 1) \/ questions.length) * 100) + '%';\n kind.textContent = item.kind;\n question.textContent = item.text;\n back.disabled = index === 0;\n\n answers.forEach(function (button) {\n const value = Number(button.dataset.fitValue);\n button.classList.toggle('is-picked', picks[index] === value);\n button.setAttribute('aria-pressed', picks[index] === value ? 'true' : 'false');\n });\n\n if (animate && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n root.classList.remove('is-transitioning');\n void root.offsetWidth;\n root.classList.add('is-transitioning');\n }\n }\n\n function calculateScore() {\n let total = 0;\n questions.forEach(function (item, i) {\n const raw = picks[i] == null ? 0 : picks[i];\n total += item.positive ? raw : (3 - raw);\n });\n return Math.round((total \/ (questions.length * 3)) * 100);\n }\n\n function showResult() {\n const score = calculateScore();\n questionWrap.hidden = true;\n result.hidden = false;\n footer.hidden = true;\n counter.textContent = 'DOPASOWANIE';\n progress.style.width = '100%';\n\n if (score >= 80) {\n resultTitle.textContent = 'Wygl\u0105da na bardzo dobre dopasowanie.';\n resultCopy.textContent = 'Najwa\u017cniejsze elementy tego modelu s\u0105 zbie\u017cne z tym, czego szukasz: jedna osoba \u0142\u0105czy kierunek, wykonanie i odpowiedzialno\u015b\u0107 za ca\u0142o\u015b\u0107. Warto przej\u015b\u0107 do konkretnego projektu i sprawdzi\u0107 zakres.';\n } else if (score >= 58) {\n resultTitle.textContent = 'Jest potencja\u0142. Warto porozmawia\u0107 o zakresie.';\n resultCopy.textContent = 'Cz\u0119\u015b\u0107 za\u0142o\u017ce\u0144 dobrze do Ciebie pasuje, ale s\u0105 te\u017c punkty, kt\u00f3re warto doprecyzowa\u0107 przed startem. Najlepszym kolejnym krokiem b\u0119dzie kr\u00f3tka rozmowa o sposobie pracy, dost\u0119pno\u015bci i priorytetach.';\n } else {\n resultTitle.textContent = 'Prawdopodobnie lepszy b\u0119dzie inny model wsp\u00f3\u0142pracy.';\n resultCopy.textContent = 'Twoje odpowiedzi wskazuj\u0105, \u017ce potrzebujesz raczej innego uk\u0142adu: wi\u0119kszego zespo\u0142u, mocniejszego nacisku na koszt lub pe\u0142nego przej\u0119cia marketingu. Lepiej ustali\u0107 to przed rozpocz\u0119ciem projektu.';\n }\n }\n\n function choose(value, button) {\n picks[index] = value;\n answers.forEach(function (item) { item.classList.remove('is-picked'); });\n button.classList.add('is-picked');\n\n window.setTimeout(function () {\n if (index < questions.length - 1) {\n index += 1;\n renderQuestion(true);\n answers[0].focus({ preventScroll: true });\n } else {\n showResult();\n resultTitle.setAttribute('tabindex', '-1');\n resultTitle.focus({ preventScroll: true });\n }\n }, window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 150);\n }\n\n answers.forEach(function (button) {\n button.addEventListener('click', function () {\n choose(Number(button.dataset.fitValue), button);\n });\n });\n\n back.addEventListener('click', function () {\n if (index === 0) return;\n index -= 1;\n renderQuestion(true);\n });\n\n reset.addEventListener('click', function () {\n index = 0;\n picks = new Array(questions.length).fill(null);\n result.hidden = true;\n questionWrap.hidden = false;\n footer.hidden = false;\n resultTitle.removeAttribute('tabindex');\n renderQuestion(false);\n question.focus && question.focus({ preventScroll: true });\n });\n\n renderQuestion(false);\n}());\n<\/script>\n\n\n\n<script id=\"clients-seamless-marquee-script\">\n(function () {\n \"use strict\";\n\n function initSeamlessClientsMarquee() {\n const root = document.querySelector('.clients');\n if (!root || root.dataset.seamlessMarqueeReady === 'true') return;\n\n const viewport = root.querySelector('.clients__marquee');\n const track = root.querySelector('.clients__track');\n const groups = track ? Array.from(track.querySelectorAll('.clients__group')) : [];\n const firstGroup = groups[0];\n const prev = root.querySelector('.clients__arrow--prev');\n const next = root.querySelector('.clients__arrow--next');\n\n if (!viewport || !track || !firstGroup) return;\n\n \/* Guarantee the duplicated second group exists for a gapless loop. *\/\n if (groups.length < 2) {\n const clone = firstGroup.cloneNode(true);\n clone.setAttribute('aria-hidden', 'true');\n clone.querySelectorAll('[alt]').forEach(function (el) {\n el.setAttribute('alt', '');\n });\n track.appendChild(clone);\n }\n\n root.dataset.seamlessMarqueeReady = 'true';\n root.classList.add('is-logo-carousel-enhanced');\n\n let cycleWidth = 0;\n let x = 0;\n let lastTime = 0;\n let pointerId = null;\n let dragStartX = 0;\n let dragStartOffset = 0;\n let dragging = false;\n let arrowTween = null;\n let resizeRaf = 0;\n\n \/* Clearly visible speed; still calm enough for brand logos. *\/\n function pixelsPerSecond() {\n return window.matchMedia('(max-width: 720px)').matches ? 92 : 118;\n }\n\n function measure() {\n const rect = firstGroup.getBoundingClientRect();\n cycleWidth = rect.width || firstGroup.scrollWidth || 1;\n normalize();\n render();\n }\n\n function normalizeValue(value) {\n if (!cycleWidth) return value;\n\n \/* Keep offset inside [-cycleWidth, 0) with no visual reset. *\/\n value = value % cycleWidth;\n if (value > 0) value -= cycleWidth;\n return value;\n }\n\n function normalize() {\n x = normalizeValue(x);\n }\n\n function render() {\n track.style.transform = 'translate3d(' + x.toFixed(3) + 'px,0,0)';\n }\n\n function getStep() {\n const logos = firstGroup.querySelectorAll('.clients__logo');\n if (logos.length > 1) {\n const a = logos[0].getBoundingClientRect();\n const b = logos[1].getBoundingClientRect();\n const step = Math.abs(b.left - a.left);\n if (step > 0) return step;\n }\n return Math.max(120, viewport.clientWidth * 0.24);\n }\n\n function startArrowTween(direction) {\n const from = x;\n const to = x - (direction * getStep());\n const start = performance.now();\n const duration = 260;\n\n arrowTween = {\n from: from,\n to: to,\n start: start,\n duration: duration\n };\n }\n\n function tick(now) {\n if (!lastTime) lastTime = now;\n const dt = Math.min(34, now - lastTime);\n lastTime = now;\n\n if (arrowTween) {\n const p = Math.min(1, (now - arrowTween.start) \/ arrowTween.duration);\n const eased = 1 - Math.pow(1 - p, 3);\n x = arrowTween.from + ((arrowTween.to - arrowTween.from) * eased);\n\n if (p >= 1) {\n arrowTween = null;\n normalize();\n }\n } else if (!dragging) {\n \/*\n Transform-only movement: no layout reads\/writes per frame,\n so the browser can keep it on the compositor.\n *\/\n x -= pixelsPerSecond() * (dt \/ 1000);\n normalize();\n }\n\n render();\n requestAnimationFrame(tick);\n }\n\n if (prev) {\n prev.addEventListener('click', function (event) {\n event.preventDefault();\n startArrowTween(-1);\n });\n }\n\n if (next) {\n next.addEventListener('click', function (event) {\n event.preventDefault();\n startArrowTween(1);\n });\n }\n\n \/*\n Custom horizontal drag\/swipe manipulates the same transform as autoplay,\n so there is no fight between native scrollLeft and the marquee animation.\n touch-action: pan-y keeps vertical page scrolling native.\n *\/\n viewport.addEventListener('pointerdown', function (event) {\n if (event.button !== undefined && event.button !== 0) return;\n\n arrowTween = null;\n dragging = true;\n pointerId = event.pointerId;\n dragStartX = event.clientX;\n dragStartOffset = x;\n viewport.classList.add('is-dragging');\n\n if (viewport.setPointerCapture) {\n try { viewport.setPointerCapture(pointerId); } catch (e) {}\n }\n });\n\n viewport.addEventListener('pointermove', function (event) {\n if (!dragging || event.pointerId !== pointerId) return;\n x = normalizeValue(dragStartOffset + (event.clientX - dragStartX));\n render();\n });\n\n function release(event) {\n if (!dragging) return;\n if (event && event.pointerId !== pointerId) return;\n\n dragging = false;\n viewport.classList.remove('is-dragging');\n\n if (viewport.releasePointerCapture && pointerId !== null) {\n try { viewport.releasePointerCapture(pointerId); } catch (e) {}\n }\n\n pointerId = null;\n lastTime = performance.now();\n }\n\n viewport.addEventListener('pointerup', release);\n viewport.addEventListener('pointercancel', release);\n\n \/* Re-measure if logo sizing\/layout changes. *\/\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(function () {\n if (resizeRaf) cancelAnimationFrame(resizeRaf);\n resizeRaf = requestAnimationFrame(function () {\n resizeRaf = 0;\n measure();\n });\n });\n observer.observe(firstGroup);\n observer.observe(viewport);\n } else {\n window.addEventListener('resize', function () {\n if (resizeRaf) cancelAnimationFrame(resizeRaf);\n resizeRaf = requestAnimationFrame(function () {\n resizeRaf = 0;\n measure();\n });\n }, { passive: true });\n }\n\n \/* Lazy-loaded external logo dimensions can settle after DOMContentLoaded. *\/\n window.addEventListener('load', measure, { once: true });\n\n measure();\n requestAnimationFrame(tick);\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initSeamlessClientsMarquee, { once: true });\n } else {\n initSeamlessClientsMarquee();\n }\n})();\n<\/script>\n\n\n<script id=\"loading-percent-preloader-script\">\n(function () {\n \"use strict\";\n\n const loader = document.querySelector(\".name-preloader\");\n const output = loader && loader.querySelector(\"[data-loading-percent]\");\n if (!loader || !output) return;\n\n \/*\n Browsers do not expose byte-accurate progress for an entire document.\n This meter therefore follows the real completion state of critical\n page resources and only reaches 100% on window.load.\n *\/\n const criticalImages = Array.from(document.images).filter(function (img) {\n return img.getAttribute(\"loading\") !== \"lazy\";\n });\n\n const stylesheetLinks = Array.from(\n document.querySelectorAll('link[rel=\"stylesheet\"][href]')\n );\n\n const state = {\n dom: document.readyState !== \"loading\",\n fonts: !document.fonts,\n windowLoaded: document.readyState === \"complete\",\n imagesDone: 0,\n imagesTotal: criticalImages.length,\n stylesDone: 0,\n stylesTotal: stylesheetLinks.length\n };\n\n let shown = 0;\n let target = 0;\n let finished = false;\n let raf = 0;\n\n function countLoadedImages() {\n state.imagesDone = criticalImages.reduce(function (sum, img) {\n return sum + (img.complete ? 1 : 0);\n }, 0);\n }\n\n function countLoadedStyles() {\n state.stylesDone = stylesheetLinks.reduce(function (sum, link) {\n try {\n return sum + (link.sheet ? 1 : 0);\n } catch (e) {\n return sum;\n }\n }, 0);\n }\n\n function calculateTarget() {\n countLoadedImages();\n countLoadedStyles();\n\n \/*\n Weighted real milestones:\n DOM 10%\n stylesheets 15%\n fonts 15%\n critical img 40%\n window.load 20%\n *\/\n let value = 0;\n\n if (state.dom) value += 10;\n\n value += state.stylesTotal\n ? 15 * (state.stylesDone \/ state.stylesTotal)\n : 15;\n\n if (state.fonts) value += 15;\n\n value += state.imagesTotal\n ? 40 * (state.imagesDone \/ state.imagesTotal)\n : 40;\n\n if (state.windowLoaded) value += 20;\n\n target = Math.min(state.windowLoaded ? 100 : 96, Math.round(value));\n\n if (state.windowLoaded) target = 100;\n }\n\n function render() {\n calculateTarget();\n\n \/* Smooth visual interpolation without inventing completion past target. *\/\n if (shown < target) {\n const distance = target - shown;\n shown += Math.max(0.18, distance * 0.075);\n if (shown > target) shown = target;\n }\n\n const visibleValue = Math.min(100, Math.floor(shown));\n output.textContent = visibleValue + \"%\";\n\n if (state.windowLoaded && visibleValue >= 100 && !finished) {\n finished = true;\n output.textContent = \"100%\";\n loader.classList.add(\"is-loading-complete\");\n\n loader.addEventListener(\"animationend\", function onEnd(event) {\n if (event.target !== loader || event.animationName !== \"nameRevealExit\") return;\n loader.removeEventListener(\"animationend\", onEnd);\n loader.remove();\n document.documentElement.classList.remove(\"has-name-reveal\");\n });\n\n \/* Safety fallback if animation events are suppressed. *\/\n window.setTimeout(function () {\n if (document.body && document.body.contains(loader)) {\n loader.remove();\n document.documentElement.classList.remove(\"has-name-reveal\");\n }\n }, 1400);\n\n return;\n }\n\n raf = requestAnimationFrame(render);\n }\n\n criticalImages.forEach(function (img) {\n if (!img.complete) {\n img.addEventListener(\"load\", calculateTarget, { once: true });\n img.addEventListener(\"error\", calculateTarget, { once: true });\n }\n });\n\n stylesheetLinks.forEach(function (link) {\n if (!link.sheet) {\n link.addEventListener(\"load\", calculateTarget, { once: true });\n link.addEventListener(\"error\", calculateTarget, { once: true });\n }\n });\n\n if (document.fonts && document.fonts.ready) {\n document.fonts.ready.then(function () {\n state.fonts = true;\n calculateTarget();\n }).catch(function () {\n state.fonts = true;\n calculateTarget();\n });\n }\n\n if (!state.dom) {\n document.addEventListener(\"DOMContentLoaded\", function () {\n state.dom = true;\n calculateTarget();\n }, { once: true });\n }\n\n if (!state.windowLoaded) {\n window.addEventListener(\"load\", function () {\n state.windowLoaded = true;\n state.dom = true;\n state.fonts = true;\n calculateTarget();\n }, { once: true });\n }\n\n calculateTarget();\n raf = requestAnimationFrame(render);\n})();\n<\/script>\n\n\n<section class=\"case-study-shell\" data-case-shell role=\"dialog\" aria-modal=\"true\" aria-label=\"Case study\" aria-hidden=\"true\">\n\n <div class=\"case-password-gate\" data-case-password-gate hidden>\n <div class=\"case-password-gate__panel\" role=\"document\">\n <p class=\"case-password-gate__eyebrow\">Protected case study<\/p>\n <h2 class=\"case-password-gate__title\">Case study na has\u0142o.<\/h2>\n <p class=\"case-password-gate__copy\">Ten materia\u0142 jest obecnie dost\u0119pny tylko po podaniu has\u0142a.<\/p>\n <form class=\"case-password-gate__form\" data-case-password-form novalidate>\n <div class=\"case-password-gate__field\">\n <input class=\"case-password-gate__input\" data-case-password-input type=\"password\" name=\"case-password\" autocomplete=\"current-password\" placeholder=\"Has\u0142o\" aria-label=\"Has\u0142o do case study\" aria-describedby=\"case-password-error\" required \/>\n <button class=\"case-password-gate__submit\" type=\"submit\">Otw\u00f3rz<\/button>\n <\/div>\n <p class=\"case-password-gate__error\" id=\"case-password-error\" data-case-password-error aria-live=\"polite\"><\/p>\n <button class=\"case-password-gate__close\" type=\"button\" data-case-password-close>Wr\u00f3\u0107 do strony<\/button>\n <\/form>\n <\/div>\n <\/div>\n <div class=\"case-study-shell__viewport\" data-case-viewport>\n <div class=\"case-study-shell__chrome\">\n <div class=\"case-study-shell__brand\"><span class=\"case-study-shell__brand-dot\" aria-hidden=\"true\"><\/span><span data-case-shell-name>Case study<\/span><\/div>\n <div class=\"case-study-shell__actions\">\n <button class=\"case-study-shell__button case-study-shell__button--text\" type=\"button\" data-case-top>Do g\u00f3ry \u2191<\/button>\n <button class=\"case-study-shell__button case-study-shell__button--close\" type=\"button\" data-case-close aria-label=\"Zamknij case study\">\u00d7<\/button>\n <\/div>\n <\/div>\n \n<article class=\"case-story\" id=\"case-prestige\" data-case-key=\"prestige\" data-case-name=\"Galeria Bi\u017cuterii Prestige\" data-case-accent=\"#006039\" data-case-ink=\"#FFFFFF\" data-case-description=\"Cyfrowa oprawa marki premium, kt\u00f3ra ma budowa\u0107 warto\u015b\u0107 produktu jeszcze zanim u\u017cytkownik zobaczy kolekcj\u0119.\" aria-labelledby=\"case-prestige-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Luxury retail \/ Brand website<\/p>\n <h2 class=\"case-story__title\" id=\"case-prestige-title\">Galeria Bi\u017cuterii Prestige<\/h2>\n <p class=\"case-story__lead\">Cyfrowa oprawa marki premium, kt\u00f3ra ma budowa\u0107 warto\u015b\u0107 produktu jeszcze zanim u\u017cytkownik zobaczy kolekcj\u0119.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">01<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"http:\/\/prestigejewellery.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-prestige-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-prestige-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>Marka potrzebowa\u0142a spokojnej, luksusowej prezentacji, kt\u00f3ra nie konkuruje z bi\u017cuteri\u0105. Kluczowym wyzwaniem by\u0142o pogodzenie elegancji, czytelnej hierarchii kolekcji i prostego prowadzenia do kontaktu lub wizyty w salonie.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Interfejs oparto na du\u017cych oddechach, mocnych kadrach produktowych i oszcz\u0119dnej typografii. Nawigacja prowadzi u\u017cytkownika od emocji marki do kolekcji i decyzji zakupowej, a ziele\u0144 inspirowana Rolex Green buduje rozpoznawalny kod premium.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-prestige-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-prestige-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-prestige-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-prestige-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Cormorant Garamond<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#006039\" style=\"--swatch:#006039;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #006039\">#006039<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#F4EFE7\" style=\"--swatch:#F4EFE7;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #F4EFE7\">#F4EFE7<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#000029\" style=\"--swatch:#000029;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #000029\">#000029<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#D8C6A0\" style=\"--swatch:#D8C6A0;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #D8C6A0\">#D8C6A0<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-talent\" data-case-key=\"talent\" data-case-name=\"Talent Complete\" data-case-accent=\"#7A3FF2\" data-case-ink=\"#FFFFFF\" data-case-description=\"Serwis HR zbudowany wok\u00f3\u0142 zaufania, kompetencji i szybkiego zrozumienia oferty przez kandydat\u00f3w oraz biznes.\" aria-labelledby=\"case-talent-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ HR \/ Service website<\/p>\n <h2 class=\"case-story__title\" id=\"case-talent-title\">Talent Complete<\/h2>\n <p class=\"case-story__lead\">Serwis HR zbudowany wok\u00f3\u0142 zaufania, kompetencji i szybkiego zrozumienia oferty przez kandydat\u00f3w oraz biznes.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">02<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/michalplebaniak.com\/talent-complete\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-talent-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-talent-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>Us\u0142ugi rekrutacyjne bywaj\u0105 komunikowane zbyt og\u00f3lnie. Wyzwaniem by\u0142o uporz\u0105dkowanie wielu kompetencji w prost\u0105 narracj\u0119, kt\u00f3ra jednocze\u015bnie jest przyjazna dla kandydat\u00f3w i wiarygodna dla klient\u00f3w B2B.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Struktura tre\u015bci zosta\u0142a podzielona wed\u0142ug realnych potrzeb odbiorc\u00f3w, z wyra\u017anymi CTA i kr\u00f3tkimi modu\u0142ami. Fiolet nadaje marce energi\u0119 i odr\u00f3\u017cnia j\u0105 od konserwatywnej estetyki sektora HR.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-talent-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-talent-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-talent-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-talent-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Manrope<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#7A3FF2\" style=\"--swatch:#7A3FF2;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #7A3FF2\">#7A3FF2<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#F5F1FF\" style=\"--swatch:#F5F1FF;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #F5F1FF\">#F5F1FF<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#18122B\" style=\"--swatch:#18122B;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #18122B\">#18122B<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#C6B4FF\" style=\"--swatch:#C6B4FF;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #C6B4FF\">#C6B4FF<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-crosscore\" data-case-key=\"crosscore\" data-case-name=\"CrossCore Gda\u0144sk\" data-case-accent=\"#FF6A00\" data-case-ink=\"#111111\" data-case-description=\"Energetyczna strona klubu treningowego, kt\u00f3ra ma prze\u0142o\u017cy\u0107 dynamik\u0119 treningu na szybkie zapisanie si\u0119 na zaj\u0119cia.\" aria-labelledby=\"case-crosscore-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Fitness \/ Local business<\/p>\n <h2 class=\"case-story__title\" id=\"case-crosscore-title\">CrossCore Gda\u0144sk<\/h2>\n <p class=\"case-story__lead\">Energetyczna strona klubu treningowego, kt\u00f3ra ma prze\u0142o\u017cy\u0107 dynamik\u0119 treningu na szybkie zapisanie si\u0119 na zaj\u0119cia.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">03<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/crosscoregdansk.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-crosscore-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-crosscore-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>U\u017cytkownik musi w kilka sekund zrozumie\u0107 charakter trening\u00f3w, poziom intensywno\u015bci, lokalizacj\u0119 i spos\u00f3b zapisu. Serwis powinien dzia\u0142a\u0107 r\u00f3wnie dobrze dla nowych os\u00f3b, jak i sta\u0142ych klubowicz\u00f3w.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Mocna typografia, kr\u00f3tkie komunikaty i pomara\u0144czowy kod akcji tworz\u0105 wyra\u017ane tempo strony. Najwa\u017cniejsze informacje s\u0105 podane modu\u0142owo i \u0142atwe do zeskanowania na telefonie.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-crosscore-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-crosscore-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-crosscore-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-crosscore-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Bebas Neue<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FF6A00\" style=\"--swatch:#FF6A00;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #FF6A00\">#FF6A00<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#151515\" style=\"--swatch:#151515;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #151515\">#151515<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#F7F5F0\" style=\"--swatch:#F7F5F0;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #F7F5F0\">#F7F5F0<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FFB37A\" style=\"--swatch:#FFB37A;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #FFB37A\">#FFB37A<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-agata\" data-case-key=\"agata\" data-case-name=\"Agata Bajkov\" data-case-accent=\"#000000\" data-case-ink=\"#FFFFFF\" data-case-description=\"Minimalistyczna marka osobista, w kt\u00f3rej trenerka, jej metoda i efekty wsp\u00f3\u0142pracy s\u0105 wa\u017cniejsze ni\u017c dekoracyjny interfejs.\" aria-labelledby=\"case-agata-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Personal brand \/ Fitness<\/p>\n <h2 class=\"case-story__title\" id=\"case-agata-title\">Agata Bajkov<\/h2>\n <p class=\"case-story__lead\">Minimalistyczna marka osobista, w kt\u00f3rej trenerka, jej metoda i efekty wsp\u00f3\u0142pracy s\u0105 wa\u017cniejsze ni\u017c dekoracyjny interfejs.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">04<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/bajkvv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-agata-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-agata-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>Najwa\u017cniejsze by\u0142o zbudowanie wiarygodno\u015bci bez prze\u0142adowania strony. Komunikacja musia\u0142a by\u0107 bezpo\u015brednia, osobista i czytelna dla u\u017cytkowniczek szukaj\u0105cych konkretnej formy wsp\u00f3\u0142pracy.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Czarno-bia\u0142a baza wzmacnia fotografie i ton komunikacji. Prosta architektura prowadzi od poznania osoby i metody do oferty, efekt\u00f3w oraz kontaktu, zachowuj\u0105c mocny charakter marki.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-agata-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-agata-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-agata-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-agata-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Helvetica Neue<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#000000\" style=\"--swatch:#000000;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #000000\">#000000<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FFFFFF\" style=\"--swatch:#FFFFFF;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #FFFFFF\">#FFFFFF<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#E8E8E8\" style=\"--swatch:#E8E8E8;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #E8E8E8\">#E8E8E8<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#6F6F6F\" style=\"--swatch:#6F6F6F;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #6F6F6F\">#6F6F6F<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-nordtrail\" data-case-key=\"nordtrail\" data-case-name=\"Nord Trail Race\" data-case-accent=\"#39FF14\" data-case-ink=\"#081008\" data-case-description=\"Strona wydarzenia biegowego z szybkim dost\u0119pem do zapis\u00f3w, trasy i informacji organizacyjnych.\" aria-labelledby=\"case-nordtrail-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Event \/ Outdoor<\/p>\n <h2 class=\"case-story__title\" id=\"case-nordtrail-title\">Nord Trail Race<\/h2>\n <p class=\"case-story__lead\">Strona wydarzenia biegowego z szybkim dost\u0119pem do zapis\u00f3w, trasy i informacji organizacyjnych.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">05<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/nordtrailrace.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-nordtrail-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-nordtrail-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>W dniu premiery i przed samym wydarzeniem u\u017cytkownicy szukaj\u0105 innych informacji. Projekt musia\u0142 wspiera\u0107 zar\u00f3wno emocjonaln\u0105 promocj\u0119 biegu, jak i bardzo praktyczne potrzeby uczestnik\u00f3w.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Neonowa ziele\u0144 dzia\u0142a jako jednoznaczny sygna\u0142 akcji i outdoorowej energii. Modu\u0142owa struktura pozwala eksponowa\u0107 zapisy, map\u0119, harmonogram i aktualno\u015bci bez utraty czytelno\u015bci.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-nordtrail-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-nordtrail-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-nordtrail-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-nordtrail-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Space Grotesk<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#39FF14\" style=\"--swatch:#39FF14;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #39FF14\">#39FF14<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#081008\" style=\"--swatch:#081008;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #081008\">#081008<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#F3F6EF\" style=\"--swatch:#F3F6EF;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #F3F6EF\">#F3F6EF<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#B8FFAA\" style=\"--swatch:#B8FFAA;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #B8FFAA\">#B8FFAA<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-lura\" data-case-key=\"lura\" data-case-name=\"Lura Cafe\" data-case-accent=\"#FFD400\" data-case-ink=\"#171300\" data-case-description=\"Ciep\u0142a, charakterystyczna strona kawiarni, kt\u00f3ra \u0142\u0105czy miejsce, produkty i osobowo\u015b\u0107 marki w jeden prosty system.\" aria-labelledby=\"case-lura-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Hospitality \/ Brand website<\/p>\n <h2 class=\"case-story__title\" id=\"case-lura-title\">Lura Cafe<\/h2>\n <p class=\"case-story__lead\">Ciep\u0142a, charakterystyczna strona kawiarni, kt\u00f3ra \u0142\u0105czy miejsce, produkty i osobowo\u015b\u0107 marki w jeden prosty system.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">06<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Selected work<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/michalplebaniak.com\/lura-cafe\/\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-lura-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-lura-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>Kawiarnia potrzebowa\u0142a komunikacji, kt\u00f3ra jest jednocze\u015bnie lokalna i gotowa na rozw\u00f3j produkt\u00f3w marki. Serwis mia\u0142 zach\u0119ca\u0107 do wizyty, ale te\u017c budowa\u0107 rozpoznawalny j\u0119zyk wizualny.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>\u017b\u00f3\u0142ty kolor tworzy natychmiastow\u0105 identyfikacj\u0119, a lekka typografia i modu\u0142y produktowe utrzymuj\u0105 przyjazny rytm. Informacje o lokalu, menu i marce s\u0105 dost\u0119pne bez zb\u0119dnych poziom\u00f3w nawigacji.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-lura-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-lura-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-lura-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-lura-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">DM Serif Display<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FFD400\" style=\"--swatch:#FFD400;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #FFD400\">#FFD400<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FFF8D6\" style=\"--swatch:#FFF8D6;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #FFF8D6\">#FFF8D6<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#171300\" style=\"--swatch:#171300;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #171300\">#171300<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#B87A00\" style=\"--swatch:#B87A00;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #B87A00\">#B87A00<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n<article class=\"case-story\" id=\"case-amber\" data-case-key=\"amber\" data-case-name=\"Amber Org\" data-case-accent=\"#FFFFFF\" data-case-ink=\"#000029\" data-case-description=\"Czysty system komunikacji dla projektu organizacyjnego, projektowany jako elastyczna baza pod dalszy rozw\u00f3j tre\u015bci.\" aria-labelledby=\"case-amber-title\">\n <header class=\"case-story__hero\">\n <div>\n <p class=\"case-story__eyebrow\">Case study \/ Organization \/ Work in progress<\/p>\n <h2 class=\"case-story__title\" id=\"case-amber-title\">Amber Org<\/h2>\n <p class=\"case-story__lead\">Czysty system komunikacji dla projektu organizacyjnego, projektowany jako elastyczna baza pod dalszy rozw\u00f3j tre\u015bci.<\/p>\n <\/div>\n <aside class=\"case-story__hero-meta\" aria-label=\"Informacje o projekcie\">\n <div class=\"case-story__hero-number\" aria-hidden=\"true\">07<\/div>\n <div class=\"case-story__meta-grid\">\n <div class=\"case-story__meta-item\"><small>Zakres<\/small><strong>Strategy \u00b7 UX\/UI \u00b7 Web<\/strong><\/div>\n <div class=\"case-story__meta-item\"><small>Status<\/small><strong>Work in progress<\/strong><\/div>\n <\/div>\n <a class=\"case-story__live\" href=\"https:\/\/michalplebaniak.com\/amber-org\" target=\"_blank\" rel=\"noopener noreferrer\">Otw\u00f3rz live site \u2197<\/a>\n <\/aside>\n <\/header>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-amber-approach\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">01 \/ Approach<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-amber-approach\">Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki.<\/h3>\n <\/div>\n <div class=\"case-story__copy-grid\">\n <div class=\"case-story__copy-card\"><h3>Challenge<\/h3><p>Projekt jest w trakcie realizacji, dlatego interfejs musi pozosta\u0107 odporny na zmiany zakresu i nowych typ\u00f3w tre\u015bci. Priorytetem jest klarowna hierarchia oraz \u0142atwe skalowanie.<\/p><\/div>\n <div class=\"case-story__copy-card\"><h3>Solution<\/h3><p>Neutralna bia\u0142a baza i granatowa typografia tworz\u0105 spokojny system, kt\u00f3ry mo\u017cna rozwija\u0107 modu\u0142owo. Layout opiera si\u0119 na powtarzalnych blokach i jasnych zasadach odst\u0119p\u00f3w.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-amber-layouts\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">02 \/ Layouts<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-amber-layouts\">Placeholdery pod finalne widoki desktop i mobile.<\/h3>\n <\/div>\n <div class=\"case-story__visuals\">\n <div class=\"case-story__desktop-stack\">\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Desktop \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--desktop\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Desktop \/ Detail<\/span><\/div>\n <\/div>\n <div class=\"case-story__mobile-stack\">\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><div class=\"case-story__placeholder-grid\"><span><\/span><span><\/span><span><\/span><\/div><\/div><span class=\"case-story__visual-label\">Mobile \/ Home<\/span><\/div>\n <div class=\"case-story__visual case-story__visual--mobile\"><div class=\"case-story__browser-bar\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"case-story__placeholder-ui\"><span class=\"case-story__placeholder-line\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--lg\"><\/span><span class=\"case-story__placeholder-line case-story__placeholder-line--sm\"><\/span><\/div><span class=\"case-story__visual-label\">Mobile \/ Flow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-story__section\" aria-labelledby=\"case-amber-system\">\n <div class=\"case-story__section-inner\">\n <div class=\"case-story__section-head\">\n <span class=\"case-story__section-kicker\">03 \/ Design system<\/span>\n <h3 class=\"case-story__section-title\" id=\"case-amber-system\">Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk.<\/h3>\n <\/div>\n <div class=\"case-story__system-grid\">\n <div class=\"case-story__system-block\"><h3>Typography<\/h3><div class=\"case-story__fonts\"><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Inter<\/span><span class=\"case-story__font-role\">Display \/ headlines<\/span><\/div><div class=\"case-story__font-card\"><span class=\"case-story__font-name\">Georgia<\/span><span class=\"case-story__font-role\">UI \/ body<\/span><\/div><\/div><\/div>\n <div class=\"case-story__system-block\"><h3>Color palette<\/h3><div class=\"case-story__swatches\"><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#FFFFFF\" style=\"--swatch:#FFFFFF;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #FFFFFF\">#FFFFFF<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#000029\" style=\"--swatch:#000029;--swatch-text:#FFFFFF\" aria-label=\"Kopiuj kolor #000029\">#000029<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#ECEFF3\" style=\"--swatch:#ECEFF3;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #ECEFF3\">#ECEFF3<\/button><button class=\"case-story__swatch\" type=\"button\" data-copy-color=\"#D7A63E\" style=\"--swatch:#D7A63E;--swatch-text:#000029\" aria-label=\"Kopiuj kolor #D7A63E\">#D7A63E<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"case-story__footer\">\n <div class=\"case-story__footer-inner\">\n <h3 class=\"case-story__footer-title\">Nast\u0119pny case?<\/h3>\n <nav class=\"case-story__nav\" aria-label=\"Nawigacja mi\u0119dzy case studies\">\n <button class=\"case-story__nav-button\" type=\"button\" data-case-prev>\u2190 Poprzedni<\/button>\n <button class=\"case-story__nav-button\" type=\"button\" data-case-next>Nast\u0119pny \u2192<\/button>\n <\/nav>\n <\/div>\n <\/footer>\n<\/article>\n <\/div>\n<\/section>\n<div class=\"case-study-toast\" data-case-toast role=\"status\" aria-live=\"polite\">Skopiowano kolor<\/div>\n\n\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"ItemList\",\"name\":\"Selected website case studies\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Galeria Bi\u017cuterii Prestige\",\"description\":\"Cyfrowa oprawa marki premium, kt\u00f3ra ma budowa\u0107 warto\u015b\u0107 produktu jeszcze zanim u\u017cytkownik zobaczy kolekcj\u0119.\",\"genre\":\"Luxury retail \/ Brand website\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Talent Complete\",\"description\":\"Serwis HR zbudowany wok\u00f3\u0142 zaufania, kompetencji i szybkiego zrozumienia oferty przez kandydat\u00f3w oraz biznes.\",\"genre\":\"HR \/ Service website\"}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"CrossCore Gda\u0144sk\",\"description\":\"Energetyczna strona klubu treningowego, kt\u00f3ra ma prze\u0142o\u017cy\u0107 dynamik\u0119 treningu na szybkie zapisanie si\u0119 na zaj\u0119cia.\",\"genre\":\"Fitness \/ Local business\"}},{\"@type\":\"ListItem\",\"position\":4,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Agata Bajkov\",\"description\":\"Minimalistyczna marka osobista, w kt\u00f3rej trenerka, jej metoda i efekty wsp\u00f3\u0142pracy s\u0105 wa\u017cniejsze ni\u017c dekoracyjny interfejs.\",\"genre\":\"Personal brand \/ Fitness\"}},{\"@type\":\"ListItem\",\"position\":5,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Nord Trail Race\",\"description\":\"Strona wydarzenia biegowego z szybkim dost\u0119pem do zapis\u00f3w, trasy i informacji organizacyjnych.\",\"genre\":\"Event \/ Outdoor\"}},{\"@type\":\"ListItem\",\"position\":6,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Lura Cafe\",\"description\":\"Ciep\u0142a, charakterystyczna strona kawiarni, kt\u00f3ra \u0142\u0105czy miejsce, produkty i osobowo\u015b\u0107 marki w jeden prosty system.\",\"genre\":\"Hospitality \/ Brand website\"}},{\"@type\":\"ListItem\",\"position\":7,\"item\":{\"@type\":\"CreativeWork\",\"name\":\"Amber Org\",\"description\":\"Czysty system komunikacji dla projektu organizacyjnego, projektowany jako elastyczna baza pod dalszy rozw\u00f3j tre\u015bci.\",\"genre\":\"Organization \/ Work in progress\"}}]}<\/script>\n<script id=\"case-studies-interactions\">\n(function () {\n const shell = document.querySelector('[data-case-shell]');\n if (!shell) return;\n\n const viewport = shell.querySelector('[data-case-viewport]');\n const closeButton = shell.querySelector('[data-case-close]');\n const topButton = shell.querySelector('[data-case-top]');\n const shellName = shell.querySelector('[data-case-shell-name]');\n const shellDot = shell.querySelector('.case-study-shell__brand-dot');\n const toast = document.querySelector('[data-case-toast]');\n const passwordGate = shell.querySelector('[data-case-password-gate]');\n const passwordForm = shell.querySelector('[data-case-password-form]');\n const passwordInput = shell.querySelector('[data-case-password-input]');\n const passwordError = shell.querySelector('[data-case-password-error]');\n const passwordClose = shell.querySelector('[data-case-password-close]');\n const CASE_UNLOCK_KEY = 'mp-case-studies-unlocked';\n const CASE_PASSWORD_SHA256 = '9d50c1d6242a4598779de3630dbf57d132d3d61f441885e01717c40a1be9e950';\n const caseLinks = Array.from(document.querySelectorAll('.websites .website-project__case[data-case-key]'));\n const stories = Array.from(shell.querySelectorAll('.case-story'));\n const caseKeys = stories.map(story => story.dataset.caseKey);\n const originalTitle = document.title;\n const metaDescription = document.querySelector('meta[name=\"description\"]');\n const originalDescription = metaDescription ? metaDescription.getAttribute('content') : '';\n let previousFocus = null;\n let activeKey = null;\n let pendingKey = null;\n let pendingSkipHash = false;\n let toastTimer = 0;\n\n function hasCaseAccess() {\n try { return sessionStorage.getItem(CASE_UNLOCK_KEY) === '1'; }\n catch (error) { return false; }\n }\n\n function rememberCaseAccess() {\n try { sessionStorage.setItem(CASE_UNLOCK_KEY, '1'); }\n catch (error) {}\n }\n\n async function hashPassword(value) {\n if (window.crypto && window.crypto.subtle && window.TextEncoder) {\n const bytes = new TextEncoder().encode(value);\n const digest = await window.crypto.subtle.digest('SHA-256', bytes);\n return Array.from(new Uint8Array(digest)).map(byte => byte.toString(16).padStart(2, '0')).join('');\n }\n \/* Compatibility fallback for very old browsers. *\/\n return value === 'mpassword' ? CASE_PASSWORD_SHA256 : '';\n }\n\n function showPasswordGate(key, options) {\n const story = getStory(key);\n if (!story || !passwordGate) return false;\n options = options || {};\n\n if (!shell.classList.contains('is-open')) previousFocus = document.activeElement;\n pendingKey = key;\n pendingSkipHash = !!options.skipHash;\n activeKey = null;\n stories.forEach(item => item.classList.remove('is-active'));\n shell.classList.add('is-open', 'is-locked');\n shell.setAttribute('aria-hidden', 'false');\n document.documentElement.classList.add('case-study-open');\n passwordGate.hidden = false;\n passwordGate.classList.remove('is-error');\n if (passwordError) passwordError.textContent = '';\n if (passwordInput) passwordInput.value = '';\n shellName.textContent = 'Case study. Dost\u0119p chroniony';\n shellDot.style.background = '#003BF3';\n restoreMeta();\n\n if (!options.skipHash && location.hash !== '#case-' + key) {\n history.pushState({ caseStudy: key, locked: true }, '', '#case-' + key);\n }\n\n requestAnimationFrame(() => {\n if (passwordInput) passwordInput.focus({ preventScroll: true });\n });\n return true;\n }\n\n function hidePasswordGate() {\n if (!passwordGate) return;\n passwordGate.hidden = true;\n passwordGate.classList.remove('is-error');\n shell.classList.remove('is-locked');\n if (passwordError) passwordError.textContent = '';\n }\n\n function setMeta(story) {\n const name = story.dataset.caseName || 'Case study';\n const desc = story.dataset.caseDescription || originalDescription;\n document.title = name + ' | Case Study | ' + originalTitle;\n if (metaDescription && desc) metaDescription.setAttribute('content', desc);\n }\n\n function restoreMeta() {\n document.title = originalTitle;\n if (metaDescription) metaDescription.setAttribute('content', originalDescription);\n }\n\n function getStory(key) {\n return stories.find(story => story.dataset.caseKey === key) || null;\n }\n\n function openCase(key, options) {\n const story = getStory(key);\n if (!story) return false;\n options = options || {};\n\n if (!options.bypassPassword && !hasCaseAccess()) {\n return showPasswordGate(key, options);\n }\n\n hidePasswordGate();\n if (!shell.classList.contains('is-open')) previousFocus = document.activeElement;\n pendingKey = null;\n pendingSkipHash = false;\n activeKey = key;\n\n stories.forEach(item => item.classList.toggle('is-active', item === story));\n shell.style.setProperty('--case-accent', story.dataset.caseAccent || '#000029');\n shell.style.setProperty('--case-ink', story.dataset.caseInk || '#000029');\n story.style.setProperty('--case-accent', story.dataset.caseAccent || '#000029');\n story.style.setProperty('--case-ink', story.dataset.caseInk || '#000029');\n shellName.textContent = story.dataset.caseName || 'Case study';\n shellDot.style.background = story.dataset.caseAccent || '#000029';\n\n shell.classList.add('is-open');\n shell.setAttribute('aria-hidden', 'false');\n document.documentElement.classList.add('case-study-open');\n viewport.scrollTop = 0;\n setMeta(story);\n\n if (!options.skipHash && location.hash !== '#case-' + key) {\n history.pushState({ caseStudy: key }, '', '#case-' + key);\n }\n\n requestAnimationFrame(() => closeButton.focus({ preventScroll: true }));\n return true;\n }\n\n function closeCase(options) {\n options = options || {};\n if (!shell.classList.contains('is-open')) return;\n shell.classList.remove('is-open');\n shell.setAttribute('aria-hidden', 'true');\n document.documentElement.classList.remove('case-study-open');\n stories.forEach(item => item.classList.remove('is-active'));\n hidePasswordGate();\n activeKey = null;\n pendingKey = null;\n pendingSkipHash = false;\n restoreMeta();\n\n if (!options.keepHash && location.hash.indexOf('#case-') === 0) {\n history.pushState({}, '', location.pathname + location.search);\n }\n\n if (previousFocus && typeof previousFocus.focus === 'function') {\n requestAnimationFrame(() => previousFocus.focus({ preventScroll: true }));\n }\n }\n\n function openAdjacent(direction) {\n if (!activeKey) return;\n const index = caseKeys.indexOf(activeKey);\n const next = (index + direction + caseKeys.length) % caseKeys.length;\n const key = caseKeys[next];\n history.pushState({ caseStudy: key }, '', '#case-' + key);\n openCase(key, { skipHash: true });\n }\n\n caseLinks.forEach(link => {\n link.addEventListener('click', function (event) {\n const key = link.dataset.caseKey;\n if (!getStory(key)) return;\n event.preventDefault();\n openCase(key);\n });\n });\n\n if (passwordForm) {\n passwordForm.addEventListener('submit', async function (event) {\n event.preventDefault();\n const value = passwordInput ? passwordInput.value : '';\n const digest = await hashPassword(value);\n if (digest === CASE_PASSWORD_SHA256) {\n rememberCaseAccess();\n const key = pendingKey;\n const skipHash = pendingSkipHash;\n hidePasswordGate();\n if (key) openCase(key, { skipHash: skipHash, bypassPassword: true });\n return;\n }\n\n if (passwordError) passwordError.textContent = 'Nieprawid\u0142owe has\u0142o.';\n if (passwordGate) {\n passwordGate.classList.remove('is-error');\n void passwordGate.offsetWidth;\n passwordGate.classList.add('is-error');\n }\n if (passwordInput) {\n passwordInput.select();\n passwordInput.focus({ preventScroll: true });\n }\n });\n }\n\n if (passwordClose) passwordClose.addEventListener('click', () => closeCase());\n\n closeButton.addEventListener('click', () => closeCase());\n topButton.addEventListener('click', () => viewport.scrollTo({ top: 0, behavior: 'smooth' }));\n\n shell.addEventListener('click', function (event) {\n const prev = event.target.closest('[data-case-prev]');\n const next = event.target.closest('[data-case-next]');\n const swatch = event.target.closest('[data-copy-color]');\n if (prev) openAdjacent(-1);\n if (next) openAdjacent(1);\n if (swatch) {\n const value = swatch.dataset.copyColor;\n const done = function () {\n swatch.classList.add('is-copied');\n clearTimeout(toastTimer);\n toast.textContent = 'Skopiowano ' + value;\n toast.classList.add('is-visible');\n toastTimer = setTimeout(() => {\n swatch.classList.remove('is-copied');\n toast.classList.remove('is-visible');\n }, 1300);\n };\n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(value).then(done).catch(done);\n } else {\n done();\n }\n }\n });\n\n shell.addEventListener('pointermove', function (event) {\n const story = event.target.closest('.case-story.is-active');\n if (!story) return;\n const rect = story.getBoundingClientRect();\n const x = ((event.clientX - rect.left) \/ Math.max(rect.width, 1) - .5) * 18;\n const y = ((event.clientY - rect.top) \/ Math.max(rect.height, 1) - .5) * 18;\n story.style.setProperty('--case-pointer-x', x + 'px');\n story.style.setProperty('--case-pointer-y', y + 'px');\n }, { passive: true });\n\n document.addEventListener('keydown', function (event) {\n if (!shell.classList.contains('is-open')) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n closeCase();\n return;\n }\n if (event.key === 'ArrowRight' && !event.target.matches('input, textarea, select')) openAdjacent(1);\n if (event.key === 'ArrowLeft' && !event.target.matches('input, textarea, select')) openAdjacent(-1);\n\n if (event.key === 'Tab') {\n const focusables = Array.from(shell.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'))\n .filter(el => el.offsetParent !== null);\n if (!focusables.length) return;\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n if (event.shiftKey && document.activeElement === first) {\n event.preventDefault(); last.focus();\n } else if (!event.shiftKey && document.activeElement === last) {\n event.preventDefault(); first.focus();\n }\n }\n });\n\n function syncFromHash() {\n const match = location.hash.match(\/^#case-([a-z0-9-]+)$\/i);\n if (match && getStory(match[1])) {\n openCase(match[1], { skipHash: true });\n } else if (shell.classList.contains('is-open')) {\n closeCase({ keepHash: true });\n }\n }\n\n window.addEventListener('popstate', syncFromHash);\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', syncFromHash, { once: true });\n } else {\n syncFromHash();\n }\n})();\n<\/script>\n\n<style id=\"website-folders-front-blue-white-text-final\">\n\/* Unified blue folders: dark blue back, significantly lighter blue glass fronts, white typography. *\/\nbody .websites {\n --folder-back-blue: #0f21ae;\n --folder-front-blue: rgba(97, 150, 255, .92);\n}\n\nbody .websites .website-link,\nbody .websites .website-link--preview {\n background: var(--folder-back-blue) !important;\n color: #fff !important;\n}\n\nbody .websites .website-link::after,\nbody .websites .website-link--preview::after {\n background: var(--folder-front-blue) !important;\n -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;\n backdrop-filter: blur(18px) saturate(1.18) !important;\n}\n\nbody .websites .website-link__front-tab {\n opacity: 0 !important;\n}\n\nbody .websites .website-link__front-tab path {\n fill: transparent !important;\n}\n\nbody .websites .website-link__number,\nbody .websites .website-link__content,\nbody .websites .website-link__name,\nbody .websites .website-link__description,\nbody .websites .website-link__arrow {\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n}\n\nbody .websites .website-link__description {\n opacity: .92 !important;\n}\n\nbody .websites .website-link__arrow svg {\n stroke: currentColor !important;\n}\n<\/style>\n\n\n<style id=\"website-folder-photos-restored-final\">\n\/* Restored original folder photography; the black glass front remains above it. *\/\nbody .websites .website-link--preview > img.website-link__preview {\n position: absolute !important;\n z-index: 1 !important;\n inset: 0 !important;\n width: 100% !important;\n height: 100% !important;\n min-width: 100% !important;\n min-height: 100% !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n object-fit: cover !important;\n object-position: 50% 34% !important;\n pointer-events: none !important;\n transform: none !important;\n transition: object-position .62s cubic-bezier(.22,.78,.2,1) !important;\n}\nbody .websites .website-link--preview:hover > img.website-link__preview,\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\n object-position: 50% calc(34% - 10px) !important;\n}\n<\/style>\n\n<style id=\"page-background-fcfcfd-final\">\n:root { --bg: #FCFCFD !important; }\nhtml, body { background: #FCFCFD !important; }\n<\/style>\n\n<style id=\"website-public-links-case-split-final\">\n\/* Public live-site links and protected case-study access are deliberately separate. *\/\nbody .websites .website-project {\n min-width: 0;\n display: grid;\n align-content: start;\n gap: 10px;\n}\n\nbody .websites .website-project > .website-link,\nbody .websites .website-project > .website-link--preview {\n width: 100% !important;\n max-width: none !important;\n min-width: 0 !important;\n flex: none !important;\n scroll-snap-align: none !important;\n}\n\nbody .websites .website-project__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 0 4px;\n}\n\nbody .websites .website-project__live,\nbody .websites .website-project__case {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n min-height: 28px;\n color: #000029;\n font-family: var(--inter);\n font-size: clamp(10.5px, .82vw, 12px);\n font-weight: 500;\n line-height: 1.2;\n letter-spacing: .02em;\n text-decoration: none;\n white-space: nowrap;\n transition: color .18s ease, transform .18s ease, opacity .18s ease;\n}\n\nbody .websites .website-project__live::after,\nbody .websites .website-project__case::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 2px;\n height: 1px;\n background: currentColor;\n transform: scaleX(.26);\n transform-origin: left center;\n opacity: .38;\n transition: transform .22s ease, opacity .22s ease;\n}\n\nbody .websites .website-project__live:hover,\nbody .websites .website-project__live:focus-visible,\nbody .websites .website-project__case:hover,\nbody .websites .website-project__case:focus-visible {\n color: #003BF3;\n transform: translateY(-1px);\n}\n\nbody .websites .website-project__live:hover::after,\nbody .websites .website-project__live:focus-visible::after,\nbody .websites .website-project__case:hover::after,\nbody .websites .website-project__case:focus-visible::after {\n transform: scaleX(1);\n opacity: 1;\n}\n\n@media (max-width: 720px) {\n body .websites .website-project {\n flex: 0 0 min(82vw, 310px) !important;\n width: min(82vw, 310px) !important;\n max-width: 310px !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n body .websites .website-project > .website-link,\n body .websites .website-project > .website-link--preview {\n width: 100% !important;\n max-width: none !important;\n }\n body .websites .website-project__actions { padding: 0 2px; }\n}\n\n@media (max-width: 390px) {\n body .websites .website-project {\n flex-basis: min(86vw, 292px) !important;\n width: min(86vw, 292px) !important;\n }\n}\n<\/style>\n\n<style id=\"mobile-heading-lineheight-final\">\n\/* More comfortable multiline heading rhythm on mobile only. *\/\n@media (max-width: 760px) {\n body .landing-hero__title,\n body main > .landing-hero .landing-hero__title {\n line-height: 1.06 !important;\n }\n\n body h2,\n body .editorial-title,\n body .brand-focus h2,\n body .section-title--major,\n body main > #kontakt .project-contact__title {\n line-height: 1.18 !important;\n }\n\n body h3,\n body .service-strip__panel h3 {\n line-height: 1.28 !important;\n }\n\n .case-story__title {\n line-height: 1.08 !important;\n }\n\n .case-story__section-title,\n .case-story__footer-title {\n line-height: 1.2 !important;\n }\n}\n<\/style>\n\n<style id=\"website-case-link-hidden-final\">\n\/* Case studies stay functional through direct #case-* URLs, but no visible CTA is shown under folders. *\/\nbody .websites .website-project__actions {\n justify-content: flex-start !important;\n}\nbody .websites .website-project__case {\n display: none !important;\n}\n<\/style>\n\n<style id=\"website-folders-mobile-fullwidth-final\">\n\/* Mobile: full-width, centered website folders. This intentionally overrides the old swipe-card widths. *\/\n@media (max-width: 720px) {\n body .websites .websites__links {\n display: grid !important;\n grid-template-columns: minmax(0, 1fr) !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 auto !important;\n padding: 0 !important;\n gap: 18px !important;\n overflow: visible !important;\n scroll-snap-type: none !important;\n scroll-padding: 0 !important;\n touch-action: auto !important;\n cursor: default !important;\n }\n\n body .websites .website-project {\n display: grid !important;\n width: 100% !important;\n max-width: none !important;\n min-width: 0 !important;\n margin: 0 auto !important;\n padding: 0 !important;\n flex: none !important;\n justify-self: stretch !important;\n scroll-snap-align: none !important;\n }\n\n body .websites .website-project > .website-link,\n body .websites .website-project > .website-link--preview,\n body .websites .website-link,\n body .websites .website-link--preview {\n width: 100% !important;\n max-width: none !important;\n min-width: 0 !important;\n margin: 0 auto !important;\n flex: none !important;\n justify-self: stretch !important;\n scroll-snap-align: none !important;\n }\n\n body .websites .website-project__actions {\n width: 100% !important;\n padding: 0 2px !important;\n justify-content: flex-start !important;\n }\n}\n\n@media (max-width: 390px) {\n body .websites .websites__links,\n body .websites .website-project,\n body .websites .website-link,\n body .websites .website-link--preview {\n width: 100% !important;\n max-width: none !important;\n }\n}\n<\/style>\n\n<style id=\"website-public-cta-removed-final\">\n\/* Public website remains accessible by clicking the folder itself; redundant CTA below is hidden. *\/\nbody .websites .website-project__actions,\nbody .websites .website-project__live {\n display: none !important;\n}\n<\/style>\n\n\n\n\n\n\n\n\n<script id=\"hero-service-orbit-interaction-final\">\n(function () {\n 'use strict';\n\n const root = document.querySelector('[data-hero-service-orbit]');\n if (!root) return;\n\n const heroButtons = Array.from(root.querySelectorAll('.hero-service-orbit__item[data-service-index]'));\n const panel = root.querySelector('[data-hero-service-panel]');\n const title = root.querySelector('[data-hero-service-title]');\n const copy = root.querySelector('[data-hero-service-copy]');\n const sourceRoot = document.querySelector('[data-service-strip]');\n const sourcePanels = sourceRoot ? Array.from(sourceRoot.querySelectorAll('.service-strip__panel')) : [];\n if (!heroButtons.length || !panel || !title || !copy) return;\n\n const heroContent = [\n ['Video', 'Ruch, rytm i emocje, kt\u00f3re od pierwszych sekund pokazuj\u0105 charakter marki.'],\n ['Web design', 'Strona jako narz\u0119dzie marki: czytelna, charakterystyczna i zaprojektowana pod realny cel.'],\n ['Content day', 'Jeden dobrze zaplanowany dzie\u0144 zdj\u0119ciowy, z kt\u00f3rego powstaje sp\u00f3jny bank tre\u015bci do wielu kana\u0142\u00f3w.'],\n ['Fotografia', 'Kadry buduj\u0105ce rozpoznawalny \u015bwiat marki, od ludzi i produktu po atmosfer\u0119 miejsca.'],\n ['Design', 'System wizualny, kt\u00f3ry porz\u0105dkuje komunikacj\u0119 i sprawia, \u017ce ka\u017cdy materia\u0142 wygl\u0105da jak cz\u0119\u015b\u0107 jednej marki.'],\n ['Marketing', 'Pomys\u0142y i komunikacja podporz\u0105dkowane temu, co odbiorca ma zauwa\u017cy\u0107, zapami\u0119ta\u0107 i zrobi\u0107.'],\n ['Consulting', '\u015awie\u017ce spojrzenie z zewn\u0105trz, konkretne decyzje i kierunek przed kolejnym etapem projektu.'],\n ['AI content', 'AI tam, gdzie naprawd\u0119 przyspiesza produkcj\u0119, testowanie kierunk\u00f3w i tworzenie nowych format\u00f3w.']\n ];\n\n const AUTO_DELAY = 1800;\n const RESUME_DELAY = 600;\n const TOUCH_RESUME_DELAY = 4600;\n const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n let activeIndex = 0;\n let autoTimer = null;\n let resumeTimer = null;\n let pointerInside = false;\n let focusInside = false;\n let inView = true;\n let lastPointerType = 'mouse';\n\n function serviceContent(index) {\n return heroContent[index] || heroContent[0];\n }\n\n function buttonFor(index) {\n return heroButtons.find(button => Number(button.dataset.serviceIndex) === index) || null;\n }\n\n function placeLabelUnderButton(button) {\n if (!button || window.innerWidth <= 720) return;\n\n const rootRect = root.getBoundingClientRect();\n const buttonRect = button.getBoundingClientRect();\n\n const rawX = buttonRect.left - rootRect.left + (buttonRect.width \/ 2);\n const rawY = buttonRect.bottom - rootRect.top;\n\n \/* Keep the service name fully inside the hero even for the outer icons. *\/\n const labelWidth = Math.max(panel.offsetWidth || 0, 120);\n const sideGap = 12;\n const minX = (labelWidth \/ 2) + sideGap;\n const maxX = rootRect.width - (labelWidth \/ 2) - sideGap;\n const x = Math.max(minX, Math.min(maxX, rawX));\n\n root.style.setProperty('--hero-service-label-x', x + 'px');\n root.style.setProperty('--hero-service-label-y', rawY + 'px');\n }\n\n function show(index) {\n activeIndex = (index + heroContent.length) % heroContent.length;\n const activeButton = buttonFor(activeIndex);\n\n heroButtons.forEach(button => {\n button.setAttribute('aria-pressed', String(button === activeButton));\n });\n\n const content = serviceContent(activeIndex);\n title.textContent = content[0];\n copy.textContent = content[1];\n\n root.classList.remove('is-changing');\n void root.offsetWidth;\n root.classList.add('is-changing');\n\n window.requestAnimationFrame(() => placeLabelUnderButton(activeButton));\n }\n\n function canAutoplay() {\n return !reducedMotion && !pointerInside && !focusInside && inView && !document.hidden;\n }\n\n function pauseAutoplay() {\n window.clearTimeout(autoTimer);\n window.clearTimeout(resumeTimer);\n autoTimer = null;\n resumeTimer = null;\n }\n\n function scheduleAutoplay(delay = AUTO_DELAY) {\n window.clearTimeout(autoTimer);\n autoTimer = null;\n if (!canAutoplay()) return;\n autoTimer = window.setTimeout(() => {\n show(activeIndex + 1);\n scheduleAutoplay(AUTO_DELAY);\n }, delay);\n }\n\n function resumeAutoplay(delay = RESUME_DELAY) {\n window.clearTimeout(resumeTimer);\n resumeTimer = window.setTimeout(() => scheduleAutoplay(AUTO_DELAY), delay);\n }\n\n heroButtons.forEach(button => {\n const index = Number(button.dataset.serviceIndex);\n\n button.addEventListener('pointerenter', event => {\n if (event.pointerType === 'mouse') show(index);\n });\n\n button.addEventListener('pointerdown', event => {\n lastPointerType = event.pointerType || 'mouse';\n pauseAutoplay();\n });\n\n button.addEventListener('focus', () => show(index));\n\n button.addEventListener('click', () => {\n show(index);\n pauseAutoplay();\n if (lastPointerType === 'touch' || lastPointerType === 'pen') {\n resumeAutoplay(TOUCH_RESUME_DELAY);\n }\n });\n\n button.addEventListener('keydown', event => {\n if (event.key === 'Escape') {\n event.preventDefault();\n show(0);\n button.blur();\n resumeAutoplay(RESUME_DELAY);\n return;\n }\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n event.preventDefault();\n const ordered = heroButtons.slice().sort((a, b) => Number(a.dataset.serviceIndex) - Number(b.dataset.serviceIndex));\n const current = ordered.indexOf(button);\n const direction = event.key === 'ArrowRight' ? 1 : -1;\n ordered[(current + direction + ordered.length) % ordered.length].focus();\n }\n });\n });\n\n root.addEventListener('pointerenter', event => {\n if (event.pointerType !== 'mouse') return;\n pointerInside = true;\n pauseAutoplay();\n });\n\n root.addEventListener('pointerleave', event => {\n if (event.pointerType !== 'mouse') return;\n pointerInside = false;\n if (!focusInside) resumeAutoplay(RESUME_DELAY);\n });\n\n root.addEventListener('focusin', () => {\n focusInside = true;\n pauseAutoplay();\n });\n\n root.addEventListener('focusout', event => {\n if (root.contains(event.relatedTarget)) return;\n focusInside = false;\n if (!pointerInside) resumeAutoplay(RESUME_DELAY);\n });\n\n if ('IntersectionObserver' in window) {\n const observer = new IntersectionObserver(entries => {\n const entry = entries[0];\n inView = !!entry && entry.isIntersecting && entry.intersectionRatio >= 0.2;\n if (inView) resumeAutoplay(350);\n else pauseAutoplay();\n }, { threshold: [0, 0.2, 0.5] });\n observer.observe(root);\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) pauseAutoplay();\n else resumeAutoplay(500);\n });\n\n let resizeFrame = null;\n window.addEventListener('resize', () => {\n if (resizeFrame) window.cancelAnimationFrame(resizeFrame);\n resizeFrame = window.requestAnimationFrame(() => {\n placeLabelUnderButton(buttonFor(activeIndex));\n resizeFrame = null;\n });\n }, { passive: true });\n\n show(0);\n scheduleAutoplay(AUTO_DELAY);\n}());\n<\/script>\n\n<style id=\"hero-service-orbit-final\">\n\/* Interactive service icons around the hero artwork. *\/\nbody main#main-content > .landing-hero .hero-service-orbit,\nbody main > .landing-hero .hero-service-orbit {\n position: absolute !important;\n z-index: 2 !important;\n left: 50% !important;\n right: auto !important;\n top: auto !important;\n bottom: clamp(72px, 5vw, 112px) !important;\n width: min(94vw, 1720px) !important;\n height: min(45vw, 820px) !important;\n min-height: 460px !important;\n transform: translateX(-50%) !important;\n pointer-events: none !important;\n user-select: none !important;\n}\n\nbody main#main-content > .landing-hero .landing-hero__copy,\nbody main > .landing-hero .landing-hero__copy {\n z-index: 4 !important;\n}\n\nbody .hero-service-orbit__arc {\n position: absolute;\n left: 7%;\n right: 7%;\n top: 8%;\n height: 78%;\n border: 2px dashed rgba(255,255,255,.20);\n border-bottom-color: transparent;\n border-radius: 50% 50% 0 0 \/ 100% 100% 0 0;\n opacity: .9;\n pointer-events: none;\n}\n\nbody .hero-service-orbit__item {\n position: absolute;\n display: grid;\n place-items: center;\n width: clamp(48px, 4.4vw, 72px);\n aspect-ratio: 1;\n margin: 0;\n padding: 0;\n border: 1px solid rgba(255,255,255,.86);\n border-radius: 50%;\n background: rgba(255,255,255,.94);\n color: #0f21ae;\n box-shadow: 0 10px 34px rgba(0,0,41,.12);\n opacity: .96;\n transform: translate(-50%, -50%);\n cursor: pointer;\n pointer-events: auto;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;\n}\n\nbody .hero-service-orbit__item svg {\n width: 48%;\n height: 48%;\n display: block;\n stroke: currentColor;\n fill: none;\n pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n body .hero-service-orbit__item:hover {\n transform: translate(-50%, -50%) scale(1.08);\n border-color: #fff;\n box-shadow: 0 14px 40px rgba(0,0,41,.18);\n }\n}\n\nbody .hero-service-orbit__item[aria-pressed=\"true\"] {\n background: #0f21ae;\n color: #fff;\n border-color: #fff;\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.10);\n box-shadow: 0 14px 42px rgba(0,0,41,.24), 0 0 0 5px rgba(255,255,255,.16);\n}\n\nbody .hero-service-orbit__item:active {\n transform: translate(-50%, -50%) scale(.98);\n}\n\nbody .hero-service-orbit__item:focus-visible {\n outline: 3px solid #fff;\n outline-offset: 4px;\n}\n\nbody .hero-service-orbit__panel {\n position: absolute;\n left: 50%;\n bottom: 2%;\n z-index: 3;\n display: grid;\n gap: 5px;\n width: min(430px, 42vw);\n padding: 14px 18px 15px;\n border: 1px solid rgba(255,255,255,.82);\n border-radius: 18px;\n background: rgba(255,255,255,.94);\n color: #000051;\n box-shadow: 0 12px 36px rgba(0,0,41,.14);\n transform: translateX(-50%);\n pointer-events: none;\n text-align: center;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n}\n\nbody .hero-service-orbit__panel strong {\n color: #0f21ae;\n font-family: var(--inter, sans-serif);\n font-size: clamp(13px, 1vw, 15px);\n line-height: 1.2;\n letter-spacing: .02em;\n}\n\nbody .hero-service-orbit__panel span {\n color: #000051;\n font-family: var(--inter, sans-serif);\n font-size: clamp(10.5px, .84vw, 12px);\n line-height: 1.45;\n}\n\nbody .hero-service-orbit.is-changing .hero-service-orbit__panel {\n animation: heroServicePanelReveal .18s ease;\n}\n\n@keyframes heroServicePanelReveal {\n from { opacity: .45; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n\n\/* Eight service icons distributed along one broad semicircle. *\/\nbody .hero-service-orbit__item--ai { left: 8%; top: 68%; }\nbody .hero-service-orbit__item--video { left: 11%; top: 47%; }\nbody .hero-service-orbit__item--calendar { left: 19%; top: 27%; }\nbody .hero-service-orbit__item--web { left: 31%; top: 12%; }\nbody .hero-service-orbit__item--camera { left: 50%; top: 5%; }\nbody .hero-service-orbit__item--design { left: 68%; top: 12%; }\nbody .hero-service-orbit__item--marketing { left: 81%; top: 29%; }\nbody .hero-service-orbit__item--consulting { left: 89%; top: 51%; }\n\n@media (max-width: 1100px) {\n body main#main-content > .landing-hero .hero-service-orbit,\n body main > .landing-hero .hero-service-orbit {\n bottom: 34px !important;\n width: 96vw !important;\n height: 52vw !important;\n min-height: 390px !important;\n }\n body .hero-service-orbit__item {\n width: clamp(42px, 5.2vw, 60px);\n }\n body .hero-service-orbit__panel {\n width: min(390px, 48vw);\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero .hero-service-orbit,\n body main > .landing-hero .hero-service-orbit {\n bottom: 2px !important;\n width: 108vw !important;\n height: 67vw !important;\n min-height: 280px !important;\n }\n\n body .hero-service-orbit__arc {\n left: 10%;\n right: 10%;\n top: 9%;\n height: 75%;\n border-width: 1px;\n opacity: .5;\n }\n\n body .hero-service-orbit__item {\n width: clamp(34px, 9vw, 44px);\n box-shadow: 0 5px 18px rgba(0,0,41,.10);\n }\n\n body .hero-service-orbit__panel {\n bottom: -5px;\n width: min(310px, 76vw);\n padding: 9px 12px 10px;\n border-radius: 14px;\n }\n\n body .hero-service-orbit__panel span {\n display: none;\n }\n\n body .hero-service-orbit__item--ai { left: 9%; top: 67%; }\n body .hero-service-orbit__item--video { left: 13%; top: 45%; }\n body .hero-service-orbit__item--calendar { left: 22%; top: 26%; }\n body .hero-service-orbit__item--web { left: 33%; top: 12%; }\n body .hero-service-orbit__item--camera { left: 50%; top: 5%; }\n body .hero-service-orbit__item--design { left: 67%; top: 12%; }\n body .hero-service-orbit__item--marketing { left: 79%; top: 28%; }\n body .hero-service-orbit__item--consulting { left: 88%; top: 49%; }\n}\n\n@media (max-width: 420px) {\n body .hero-service-orbit__item--video,\n body .hero-service-orbit__item--marketing {\n display: none;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .hero-service-orbit__item,\n body .hero-service-orbit__panel {\n transition: none !important;\n animation: none !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"hero-svg-over-interactive-icons-final\">\n\/*\n Final hero layer order:\n 0 hero blue background\n 1 interactive service icons + dotted arc\n 2 Hero-2027.svg artwork\n 3 interactive service description panel\n 4 hero copy \/ CTA\n\n Hero-2027.svg is moved out of the element background and rendered as a\n foreground pseudo-layer. This lets the service icons genuinely sit UNDER\n the SVG artwork while remaining clickable because the SVG layer ignores\n pointer events.\n*\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n background-image: none !important;\n}\n\nbody main#main-content > .landing-hero::before,\nbody main > .landing-hero::before {\n content: \"\" !important;\n display: block !important;\n position: absolute !important;\n z-index: 2 !important;\n inset: 0 !important;\n width: 100% !important;\n height: 100% !important;\n background-color: transparent !important;\n background-image: url(\"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Hero-2027-1.svg\") !important;\n background-repeat: no-repeat !important;\n background-position: center bottom !important;\n background-size: 100% auto !important;\n pointer-events: none !important;\n transform: none !important;\n animation: none !important;\n}\n\nbody main#main-content > .landing-hero::after,\nbody main > .landing-hero::after {\n content: none !important;\n display: none !important;\n}\n\n\/* Do not make the orbit wrapper its own stacking context. Its children can\n now sit on both sides of the SVG artwork layer. *\/\nbody main#main-content > .landing-hero .hero-service-orbit,\nbody main > .landing-hero .hero-service-orbit {\n z-index: auto !important;\n left: 0 !important;\n right: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n transform: none !important;\n}\n\n\/* Arc and icon buttons are behind Hero-2027.svg. *\/\nbody .hero-service-orbit__arc {\n z-index: 0 !important;\n}\n\nbody .hero-service-orbit__item {\n z-index: 1 !important;\n}\n\n\/* The information panel stays readable above the artwork. *\/\nbody .hero-service-orbit__panel {\n z-index: 3 !important;\n}\n\n\/* Copy and CTA remain the top hero layer. *\/\nbody main#main-content > .landing-hero .landing-hero__copy,\nbody main > .landing-hero .landing-hero__copy {\n position: relative !important;\n z-index: 4 !important;\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero .hero-service-orbit,\n body main > .landing-hero .hero-service-orbit {\n left: -4vw !important;\n right: auto !important;\n margin: 0 !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"hero-zorder-illustration-icons-background-final\">\n\/*\n FINAL HERO STACK - requested order:\n 5 hero copy \/ CTA\n 4 service information panel\n 3 Hero-2027.svg illustration - crisp, NO blur\n 2 interactive service icons + arc\n 0 hero background #003BF3\n*\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n position: relative !important;\n isolation: isolate !important;\n background-color: #003BF3 !important;\n background-image: none !important;\n}\n\n\/* Crisp SVG illustration is the foreground visual layer. Explicitly clear\n the blur\/filter inherited from the older animated mesh ::before rule. *\/\nbody main#main-content > .landing-hero::before,\nbody main > .landing-hero::before {\n content: \"\" !important;\n display: block !important;\n position: absolute !important;\n z-index: 3 !important;\n inset: 0 !important;\n width: 100% !important;\n height: 100% !important;\n opacity: 1 !important;\n background: transparent url(\"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Hero-2027-1.svg\") center bottom \/ 100% auto no-repeat !important;\n filter: none !important;\n -webkit-filter: none !important;\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n transform: none !important;\n transform-origin: center bottom !important;\n animation: none !important;\n will-change: auto !important;\n pointer-events: none !important;\n}\n\nbody main#main-content > .landing-hero::after,\nbody main > .landing-hero::after {\n content: none !important;\n display: none !important;\n}\n\n\/* Orbit itself does not create a competing stacking context. *\/\nbody main#main-content > .landing-hero .hero-service-orbit,\nbody main > .landing-hero .hero-service-orbit {\n z-index: auto !important;\n}\n\n\/* Interactive icons are BETWEEN background and SVG illustration. *\/\nbody .hero-service-orbit__arc {\n z-index: 1 !important;\n}\nbody .hero-service-orbit__item {\n z-index: 2 !important;\n}\n\n\/* Information remains readable, but does not blur the SVG beneath it. *\/\nbody .hero-service-orbit__panel {\n z-index: 4 !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n background: rgba(255,255,255,.96) !important;\n}\n\n\/* Copy and CTAs remain above everything. *\/\nbody main#main-content > .landing-hero .landing-hero__copy,\nbody main > .landing-hero .landing-hero__copy {\n position: relative !important;\n z-index: 5 !important;\n}\n<\/style>\n\n\n<style id=\"hero-art-stage-responsive-final\">\n\/* =========================================================\n FINAL HERO ART SYSTEM\n Desktop: illustration + interactive orbit share ONE stage,\n so they scale and zoom together without drifting apart.\n Mobile: illustration only; orbit and hero service copy hidden.\n Layer order: copy > panel > SVG > icons\/arc > #003BF3.\n ========================================================= *\/\nbody main#main-content > .landing-hero,\nbody main > .landing-hero {\n position: relative !important;\n isolation: isolate !important;\n display: block !important;\n overflow: hidden !important;\n background: #003BF3 !important;\n background-image: none !important;\n padding-bottom: clamp(58px, 6vw, 96px) !important;\n}\n\n\/* Old pseudo-element artwork is disabled. The real SVG now lives inside\n .hero-art-stage, together with the coded icon arc. *\/\nbody main#main-content > .landing-hero::before,\nbody main#main-content > .landing-hero::after,\nbody main > .landing-hero::before,\nbody main > .landing-hero::after {\n content: none !important;\n display: none !important;\n background: none !important;\n filter: none !important;\n -webkit-filter: none !important;\n}\n\nbody main#main-content > .landing-hero .landing-hero__copy,\nbody main > .landing-hero .landing-hero__copy {\n position: relative !important;\n z-index: 10 !important;\n}\n\n\/* Shared coordinate system. Its height comes from the SVG's own intrinsic\n ratio, so browser zoom \/ resizing changes the SVG and orbit as one object. *\/\nbody .hero-art-stage {\n position: relative !important;\n z-index: 1 !important;\n width: min(100%, 1680px) !important;\n max-width: 1680px !important;\n margin: clamp(140px, 11vw, 230px) auto 112px !important;\n padding: 0 !important;\n container-type: inline-size;\n isolation: isolate;\n line-height: 0;\n}\n\nbody .hero-art-stage__illustration {\n position: relative !important;\n z-index: 3 !important;\n display: block !important;\n width: 100% !important;\n height: auto !important;\n max-width: none !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n opacity: 1 !important;\n filter: none !important;\n -webkit-filter: none !important;\n transform: none !important;\n pointer-events: none !important;\n user-select: none !important;\n}\n\n\/* Orbit uses exactly the same box as the SVG instead of its own vw\/bottom\n calculations. That prevents separation when resizing or changing zoom. *\/\nbody main#main-content > .landing-hero .hero-service-orbit,\nbody main > .landing-hero .hero-service-orbit,\nbody .hero-art-stage > .hero-service-orbit {\n position: absolute !important;\n z-index: auto !important;\n inset: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 0 !important;\n max-width: none !important;\n margin: 0 !important;\n padding: 0 !important;\n transform: none !important;\n pointer-events: none !important;\n user-select: none !important;\n}\n\n\/* The arc stays deliberately wider than the illustrated character. *\/\nbody .hero-service-orbit__arc {\n position: absolute !important;\n z-index: 1 !important;\n left: 4.5% !important;\n right: 4.5% !important;\n top: 4% !important;\n width: auto !important;\n height: 75% !important;\n border: 2px dashed rgba(255,255,255,.20) !important;\n border-bottom-color: transparent !important;\n border-radius: 50% 50% 0 0 \/ 100% 100% 0 0 !important;\n opacity: .72 !important;\n pointer-events: none !important;\n}\n\nbody .hero-service-orbit__item {\n z-index: 2 !important;\n width: clamp(44px, 4.2vw, 70px) !important;\n width: clamp(44px, 4.2cqw, 70px) !important;\n min-width: 44px !important;\n max-width: 70px !important;\n pointer-events: auto !important;\n}\n\n\/* Keep the centre of the illustration clear. Icons sit on the OUTER arc,\n so the figure covers only small portions of the inside edge at most. *\/\nbody .hero-service-orbit__item--ai { left: 5.5% !important; top: 64% !important; }\nbody .hero-service-orbit__item--video { left: 8.5% !important; top: 44% !important; }\nbody .hero-service-orbit__item--calendar { left: 15.5% !important; top: 25% !important; }\nbody .hero-service-orbit__item--web { left: 28.5% !important; top: 10% !important; }\nbody .hero-service-orbit__item--camera { left: 71.5% !important; top: 10% !important; }\nbody .hero-service-orbit__item--design { left: 84.5% !important; top: 25% !important; }\nbody .hero-service-orbit__item--marketing { left: 91.5% !important; top: 44% !important; }\nbody .hero-service-orbit__item--consulting { left: 94.5% !important; top: 64% !important; }\n\n\/* Hero-specific copy lives just below the artwork, not on top of the desk. *\/\nbody .hero-service-orbit__panel {\n position: absolute !important;\n z-index: 4 !important;\n top: calc(100% - 20px) !important;\n bottom: auto !important;\n left: 50% !important;\n width: min(430px, 42cqw) !important;\n max-width: calc(100% - 32px) !important;\n padding: 14px 18px 15px !important;\n border: 1px solid rgba(255,255,255,.88) !important;\n border-radius: 18px !important;\n background: rgba(255,255,255,.97) !important;\n box-shadow: 0 12px 36px rgba(0,0,41,.14) !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n transform: translateX(-50%) !important;\n pointer-events: none !important;\n text-align: center !important;\n line-height: normal !important;\n}\n\nbody .hero-service-orbit.is-changing .hero-service-orbit__panel {\n animation: heroServiceCopyFadeFinal .18s ease !important;\n}\n@keyframes heroServiceCopyFadeFinal {\n from { opacity: .45; }\n to { opacity: 1; }\n}\n\n\/* Medium desktop \/ laptop: still one coordinate system, only the stage gap\n and icon scale get slightly tighter. *\/\n@media (min-width: 721px) and (max-width: 1100px) {\n body .hero-art-stage {\n width: min(100%, 1320px) !important;\n margin-top: clamp(118px, 12vw, 170px) !important;\n margin-bottom: 106px !important;\n }\n body .hero-service-orbit__item {\n width: clamp(42px, 4.5cqw, 58px) !important;\n }\n body .hero-service-orbit__panel {\n width: min(390px, 48cqw) !important;\n }\n}\n\n\/* MOBILE: no arc, no service icons, no repeated hero service description.\n Only the same crisp SVG illustration remains. *\/\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: clamp(40px, 10vw, 64px) !important;\n }\n\n body .hero-art-stage {\n width: 100% !important;\n max-width: none !important;\n margin: clamp(48px, 12vw, 76px) auto 0 !important;\n padding: 0 !important;\n }\n\n body .hero-art-stage > .hero-service-orbit,\n body main#main-content > .landing-hero .hero-service-orbit,\n body main > .landing-hero .hero-service-orbit {\n display: none !important;\n }\n\n body .hero-art-stage__illustration {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .hero-service-orbit__item,\n body .hero-service-orbit__panel {\n transition: none !important;\n animation: none !important;\n }\n}\n<\/style>\n\n\n\n<style id=\"hero-art-stage-fullwidth-panel-fix-final\">\n\/* =========================================================\n FINAL DESKTOP TUNING\n - SVG + orbit remain one responsive coordinate system.\n - Artwork breaks out to the full browser width.\n - Orbit icons are pushed farther outside the character silhouette.\n - Hero service copy is larger, on a clean white surface with no border.\n ========================================================= *\/\n@media (min-width: 721px) {\n body .hero-art-stage {\n width: 100vw !important;\n max-width: none !important;\n margin-top: clamp(150px, 11vw, 235px) !important;\n margin-right: calc(50% - 50vw) !important;\n margin-bottom: 150px !important;\n margin-left: calc(50% - 50vw) !important;\n padding: 0 !important;\n }\n\n body .hero-art-stage__illustration {\n display: block !important;\n width: 100% !important;\n max-width: none !important;\n height: auto !important;\n margin: 0 !important;\n }\n\n \/* Keep the icon halo out of the busiest parts of the figure.\n In particular, Web design is moved clear of the raised camera\/hand. *\/\n body .hero-service-orbit__item--ai { left: 4.5% !important; top: 64% !important; }\n body .hero-service-orbit__item--video { left: 6.5% !important; top: 43% !important; }\n body .hero-service-orbit__item--calendar { left: 12.5% !important; top: 24% !important; }\n body .hero-service-orbit__item--web { left: 21.0% !important; top: 9% !important; }\n body .hero-service-orbit__item--camera { left: 79.0% !important; top: 9% !important; }\n body .hero-service-orbit__item--design { left: 87.5% !important; top: 24% !important; }\n body .hero-service-orbit__item--marketing { left: 93.5% !important; top: 43% !important; }\n body .hero-service-orbit__item--consulting { left: 95.5% !important; top: 64% !important; }\n\n body .hero-service-orbit__arc {\n left: 2.8% !important;\n right: 2.8% !important;\n top: 3.5% !important;\n height: 76% !important;\n }\n\n body .hero-service-orbit__panel {\n top: calc(100% - 10px) !important;\n bottom: auto !important;\n width: min(620px, 52vw) !important;\n max-width: calc(100% - 48px) !important;\n padding: 21px 28px 23px !important;\n border: 0 !important;\n border-radius: 18px !important;\n background: #FCFCFD !important;\n box-shadow: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n }\n\n body .hero-service-orbit__panel strong {\n display: block !important;\n margin: 0 0 7px !important;\n color: #0f21ae !important;\n font-size: clamp(18px, 1.35vw, 23px) !important;\n font-weight: 600 !important;\n line-height: 1.15 !important;\n letter-spacing: -.02em !important;\n }\n\n body .hero-service-orbit__panel span {\n display: block !important;\n color: #000051 !important;\n font-size: clamp(14px, 1vw, 17px) !important;\n line-height: 1.5 !important;\n letter-spacing: -.01em !important;\n }\n}\n\n\/* Mobile remains illustration-only and full width. *\/\n@media (max-width: 720px) {\n body .hero-art-stage,\n body .hero-art-stage__illustration {\n width: 100% !important;\n max-width: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-white-band-balance-final\">\n\/* =========================================================\n HERO BOTTOM BALANCE\n - Remove the leftover oversized desktop bottom padding from older hero rules.\n - Add an intentional white continuation under the illustration for the service copy.\n - Keep the transition seamless because the lower part of the SVG is already white.\n ========================================================= *\/\n@media (min-width: 721px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n position: relative !important;\n overflow: visible !important;\n padding-bottom: clamp(34px, 4vw, 58px) !important;\n background: linear-gradient(\n to bottom,\n #003BF3 0,\n #003BF3 calc(100% - clamp(124px, 10vw, 164px)),\n #FCFCFD calc(100% - clamp(124px, 10vw, 164px)),\n #FCFCFD 100%\n ) !important;\n }\n\n body .hero-art-stage {\n margin-top: clamp(150px, 11vw, 235px) !important;\n margin-bottom: clamp(102px, 8.2vw, 132px) !important;\n }\n\n body .hero-service-orbit__panel {\n top: calc(100% - 6px) !important;\n width: min(640px, 54vw) !important;\n max-width: calc(100% - 40px) !important;\n padding: 22px 30px 24px !important;\n }\n\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section,\n body main > .landing-hero + .clients,\n body main > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: clamp(18px, 2.6vw, 34px) !important;\n }\n}\n\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n background: #003BF3 !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-no-blue-stripe-final\">\n\/* Final seamless handoff: hide the blue\/white boundary underneath the\n already-white lower part of Hero-2027.svg. *\/\n@media (min-width: 721px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n background: linear-gradient(\n to bottom,\n #003BF3 0,\n #003BF3 calc(100% - clamp(230px, 15vw, 310px)),\n #FCFCFD calc(100% - clamp(230px, 15vw, 310px)),\n #FCFCFD 100%\n ) !important;\n }\n\n body .hero-art-stage {\n position: relative !important;\n }\n\n \/* White bridge sits BELOW the illustration and ABOVE the hero background.\n Its top is hidden by the white bottom of the SVG, so no blue separator\n can appear behind the service description. *\/\n body .hero-art-stage::after {\n content: \"\" !important;\n position: absolute !important;\n z-index: 2 !important;\n left: 0 !important;\n right: 0 !important;\n bottom: clamp(-124px, -7vw, -88px) !important;\n width: 100% !important;\n height: clamp(170px, 12vw, 230px) !important;\n background: #FCFCFD !important;\n pointer-events: none !important;\n }\n\n body .hero-art-stage__illustration {\n position: relative !important;\n z-index: 3 !important;\n }\n\n body .hero-service-orbit__panel {\n z-index: 5 !important;\n background: #FCFCFD !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-mobile-fullwidth-no-blue-strip-final\">\n\/* =========================================================\n MOBILE FIX\n - Break the illustration out to the full viewport width.\n - Keep the text padded, but make the SVG itself truly edge-to-edge.\n - Remove the unnecessary blue strip under the illustration by\n handing the lower part of the hero off to #FCFCFD.\n ========================================================= *\/\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n position: relative !important;\n overflow: visible !important;\n padding-right: 0 !important;\n padding-left: 0 !important;\n padding-bottom: 0 !important;\n background: linear-gradient(\n to bottom,\n #003BF3 0,\n #003BF3 calc(100% - clamp(74px, 18vw, 110px)),\n #FCFCFD calc(100% - clamp(74px, 18vw, 110px)),\n #FCFCFD 100%\n ) !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__copy,\n body main > .landing-hero .landing-hero__copy {\n padding-right: 18px !important;\n padding-left: 18px !important;\n }\n\n body .hero-art-stage {\n position: relative !important;\n width: 100vw !important;\n max-width: none !important;\n margin-top: clamp(34px, 9vw, 54px) !important;\n margin-right: calc(50% - 50vw) !important;\n margin-bottom: 0 !important;\n margin-left: calc(50% - 50vw) !important;\n padding: 0 !important;\n line-height: 0 !important;\n }\n\n body .hero-art-stage__illustration {\n display: block !important;\n width: 100vw !important;\n max-width: none !important;\n height: auto !important;\n margin: 0 !important;\n }\n\n \/* Bridge the lower white part of the SVG into the page background so\n the user does not see a leftover blue strip below the illustration. *\/\n body .hero-art-stage::after {\n content: \"\" !important;\n position: absolute !important;\n left: 0 !important;\n right: 0 !important;\n bottom: clamp(-38px, -8vw, -22px) !important;\n width: 100% !important;\n height: clamp(54px, 12vw, 76px) !important;\n background: #FCFCFD !important;\n pointer-events: none !important;\n }\n\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section,\n body main > .landing-hero + .clients,\n body main > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: clamp(8px, 2vw, 16px) !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-mobile-svg-white-only-final\">\n\/* MOBILE - the white transition now comes ONLY from Hero-2027.svg itself.\n No CSS white band is placed behind the illustration. *\/\n@media (max-width: 720px) {\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-right: 0 !important;\n padding-bottom: 0 !important;\n padding-left: 0 !important;\n background: #003BF3 !important;\n }\n\n body .hero-art-stage {\n width: 100vw !important;\n max-width: none !important;\n margin-right: calc(50% - 50vw) !important;\n margin-bottom: 0 !important;\n margin-left: calc(50% - 50vw) !important;\n padding: 0 !important;\n background: transparent !important;\n }\n\n body .hero-art-stage__illustration {\n display: block !important;\n width: 100vw !important;\n max-width: none !important;\n height: auto !important;\n margin: 0 !important;\n }\n\n \/* Disable the previous artificial white bridge. *\/\n body .hero-art-stage::after {\n content: none !important;\n display: none !important;\n }\n\n \/* The next section begins immediately after the SVG's own white footer. *\/\n body main#main-content > .landing-hero + .clients,\n body main#main-content > .landing-hero + section,\n body main > .landing-hero + .clients,\n body main > .landing-hero + section {\n margin-top: 0 !important;\n padding-top: clamp(8px, 2vw, 16px) !important;\n background: #FCFCFD !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-remove-dashed-arc-desktop-final\">\n\/* Desktop: keep interactive icons, remove only the decorative dashed arc line. *\/\n@media (min-width: 721px) {\n body .hero-service-orbit__arc {\n display: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-service-name-under-active-icon-final\">\n\/* Desktop: the active service name follows its icon.\n The old large description panel below the hero is no longer used. *\/\n@media (min-width: 721px) {\n body .hero-service-orbit__panel {\n position: absolute !important;\n z-index: 6 !important;\n left: var(--hero-service-label-x, 50%) !important;\n top: var(--hero-service-label-y, 50%) !important;\n right: auto !important;\n bottom: auto !important;\n display: block !important;\n width: max-content !important;\n max-width: min(220px, 24vw) !important;\n margin: 0 !important;\n padding: 9px 15px 10px !important;\n border: 0 !important;\n border-radius: 999px !important;\n background: #FCFCFD !important;\n box-shadow: none !important;\n transform: translate(-50%, 11px) !important;\n text-align: center !important;\n white-space: nowrap !important;\n pointer-events: none !important;\n line-height: 1 !important;\n }\n\n body .hero-service-orbit__panel strong {\n display: block !important;\n margin: 0 !important;\n color: #0f21ae !important;\n font-size: clamp(15px, 1.05vw, 18px) !important;\n font-weight: 600 !important;\n line-height: 1.1 !important;\n letter-spacing: -.015em !important;\n }\n\n body .hero-service-orbit__panel span {\n display: none !important;\n }\n\n body .hero-service-orbit.is-changing .hero-service-orbit__panel {\n animation: heroServiceNamePop .16s ease !important;\n }\n\n @keyframes heroServiceNamePop {\n from { opacity: .45; transform: translate(-50%, 15px); }\n to { opacity: 1; transform: translate(-50%, 11px); }\n }\n\n \/* The lower white area no longer has to reserve space for a large description card. *\/\n body .hero-art-stage {\n margin-bottom: clamp(28px, 2.5vw, 44px) !important;\n }\n\n body main#main-content > .landing-hero,\n body main > .landing-hero {\n padding-bottom: clamp(10px, 1.6vw, 24px) !important;\n }\n}\n\n\/* Mobile remains illustration-only. *\/\n@media (max-width: 720px) {\n body .hero-service-orbit__panel {\n display: none !important;\n }\n}\n<\/style>\n<style id=\"hero-icon-balance-and-service-pricing-final\">\n\/* =========================================================\n HERO ICON BALANCE - desktop only\n Four icons per side, positioned as a symmetrical visual halo.\n They remain in the same responsive coordinate system as Hero-2027.svg.\n ========================================================= *\/\n@media (min-width: 721px) {\n body .hero-service-orbit__item {\n width: clamp(48px, 3.7cqw, 64px) !important;\n min-width: 48px !important;\n max-width: 64px !important;\n }\n\n body .hero-service-orbit__item--ai { left: 7.0% !important; top: 64% !important; }\n body .hero-service-orbit__item--video { left: 9.8% !important; top: 45% !important; }\n body .hero-service-orbit__item--calendar { left: 15.5% !important; top: 28% !important; }\n body .hero-service-orbit__item--web { left: 24.0% !important; top: 14% !important; }\n\n body .hero-service-orbit__item--camera { left: 76.0% !important; top: 14% !important; }\n body .hero-service-orbit__item--design { left: 84.5% !important; top: 28% !important; }\n body .hero-service-orbit__item--marketing { left: 90.2% !important; top: 45% !important; }\n body .hero-service-orbit__item--consulting { left: 93.0% !important; top: 64% !important; }\n}\n\n\/* =========================================================\n LOWER SERVICES - fuller scope and price boundaries\n ========================================================= *\/\nbody .service-strip__panel {\n max-width: 820px !important;\n}\n\nbody .service-strip__panel > p:not(.service-strip__price):not(.service-strip__price-note) {\n max-width: 72ch !important;\n line-height: 1.65 !important;\n}\n\nbody .service-strip__panel .service-strip__price {\n margin: 20px 0 0 !important;\n color: #0f21ae !important;\n font-size: clamp(17px, 1.25vw, 20px) !important;\n line-height: 1.2 !important;\n}\n\nbody .service-strip__panel .service-strip__price strong {\n font-weight: 650 !important;\n}\n\nbody .service-strip__panel .service-strip__price-note {\n max-width: 72ch !important;\n margin: 8px 0 0 !important;\n color: #000051 !important;\n opacity: .78 !important;\n font-size: clamp(12.5px, .92vw, 14px) !important;\n line-height: 1.55 !important;\n}\n\n@media (max-width: 720px) {\n body .service-strip__panel .service-strip__price {\n margin-top: 16px !important;\n }\n\n body .service-strip__panel .service-strip__price-note {\n font-size: 12.5px !important;\n line-height: 1.5 !important;\n }\n}\n<\/style>\n\n\n<style id=\"hero-better-icon-arc-and-pricing-toggle-final\">\n\/* =========================================================\n HERO DESKTOP ICONS\n A higher, more even halo around the figure.\n The two upper icons use the empty space above the head.\n The side icons no longer sit close to the desk\/bottom edge.\n ========================================================= *\/\n@media (min-width: 721px) {\n body .hero-service-orbit__item {\n width: clamp(48px, 3.65cqw, 64px) !important;\n min-width: 48px !important;\n max-width: 64px !important;\n }\n\n body .hero-service-orbit__item--ai { left: 7.5% !important; top: 44% !important; }\n body .hero-service-orbit__item--video { left: 12.0% !important; top: 29% !important; }\n body .hero-service-orbit__item--calendar { left: 21.0% !important; top: 16% !important; }\n body .hero-service-orbit__item--web { left: 39.0% !important; top: 3% !important; }\n\n body .hero-service-orbit__item--camera { left: 61.0% !important; top: 3% !important; }\n body .hero-service-orbit__item--design { left: 79.0% !important; top: 16% !important; }\n body .hero-service-orbit__item--marketing { left: 88.0% !important; top: 29% !important; }\n body .hero-service-orbit__item--consulting { left: 92.5% !important; top: 44% !important; }\n}\n\n\/* =========================================================\n LOWER SERVICES PRICING\n Prices stay hidden until the visitor asks for the range.\n ========================================================= *\/\nbody .service-strip__price-toggle {\n appearance: none !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n min-height: 44px !important;\n margin: 20px 0 0 !important;\n padding: 10px 16px !important;\n border: 1px solid rgba(15,33,174,.18) !important;\n border-radius: 999px !important;\n background: transparent !important;\n color: #0f21ae !important;\n font: inherit !important;\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 1 !important;\n cursor: pointer !important;\n transition: background .16s ease, border-color .16s ease, transform .16s ease !important;\n}\n\nbody .service-strip__price-toggle:hover,\nbody .service-strip__price-toggle:focus-visible {\n background: rgba(15,33,174,.06) !important;\n border-color: rgba(15,33,174,.34) !important;\n}\n\nbody .service-strip__price-toggle:active {\n transform: translateY(1px) !important;\n}\n\nbody .service-strip__price-details {\n max-width: 72ch !important;\n margin-top: 16px !important;\n padding-top: 16px !important;\n border-top: 1px solid rgba(0,0,81,.10) !important;\n}\n\nbody .service-strip__price-details[hidden] {\n display: none !important;\n}\n\nbody .service-strip__price {\n margin: 0 !important;\n color: #0f21ae !important;\n font-size: clamp(18px, 1.3vw, 21px) !important;\n line-height: 1.2 !important;\n}\n\nbody .service-strip__price strong {\n font-weight: 650 !important;\n}\n\nbody .service-strip__price-note {\n margin: 9px 0 0 !important;\n color: #000051 !important;\n opacity: .78 !important;\n font-size: clamp(12.5px, .92vw, 14px) !important;\n line-height: 1.55 !important;\n}\n\nbody .service-strip__panel {\n scroll-margin-top: clamp(92px, 10vh, 132px) !important;\n}\n<\/style>\n\n<script id=\"service-pricing-toggle-and-hero-jump-final\">\n(function () {\n 'use strict';\n\n const serviceRoot = document.querySelector('[data-service-strip]');\n if (!serviceRoot) return;\n\n const serviceButtons = Array.from(serviceRoot.querySelectorAll('.service-strip__button'));\n const servicePanels = Array.from(serviceRoot.querySelectorAll('.service-strip__panel'));\n\n function collapsePrices(exceptPanel) {\n servicePanels.forEach(panel => {\n if (panel === exceptPanel) return;\n const toggle = panel.querySelector('.service-strip__price-toggle');\n const details = panel.querySelector('.service-strip__price-details');\n if (!toggle || !details) return;\n toggle.setAttribute('aria-expanded', 'false');\n toggle.textContent = 'Poznaj wide\u0142ki';\n details.hidden = true;\n });\n }\n\n serviceRoot.addEventListener('click', event => {\n const toggle = event.target.closest('.service-strip__price-toggle');\n if (toggle) {\n const panel = toggle.closest('.service-strip__panel');\n const detailsId = toggle.getAttribute('aria-controls');\n const details = detailsId ? document.getElementById(detailsId) : null;\n if (!details) return;\n\n const isOpen = toggle.getAttribute('aria-expanded') === 'true';\n collapsePrices(panel);\n toggle.setAttribute('aria-expanded', String(!isOpen));\n toggle.textContent = isOpen ? 'Poznaj wide\u0142ki' : 'Ukryj wide\u0142ki';\n details.hidden = isOpen;\n return;\n }\n\n const serviceButton = event.target.closest('.service-strip__button');\n if (serviceButton) collapsePrices(null);\n });\n\n const heroButtons = Array.from(document.querySelectorAll(\n '[data-hero-service-orbit] .hero-service-orbit__item[data-service-index]'\n ));\n\n heroButtons.forEach(heroButton => {\n heroButton.addEventListener('click', () => {\n const index = Number(heroButton.dataset.serviceIndex);\n const targetButton = serviceButtons[index];\n const targetPanel = servicePanels[index];\n if (!targetButton || !targetPanel) return;\n\n \/* Reuse the existing service-strip interaction so the correct\n icon and description become active before scrolling. *\/\n targetButton.click();\n\n window.requestAnimationFrame(() => {\n targetPanel.scrollIntoView({\n behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',\n block: 'center'\n });\n });\n });\n });\n}());\n<\/script>\n<style id=\"hero-icons-even-invisible-arc-final\">\n\/* =========================================================\n HERO ICONS - 8 evenly spaced points on one invisible ellipse.\n The whole halo is lifted higher above the character.\n Equal angular spacing, mirrored left\/right.\n ========================================================= *\/\n@media (min-width: 721px) {\n \/* The guide arc stays invisible. *\/\n body .hero-service-orbit__arc {\n display: none !important;\n }\n\n body .hero-service-orbit__item {\n width: clamp(48px, 3.65cqw, 64px) !important;\n min-width: 48px !important;\n max-width: 64px !important;\n }\n\n \/*\n Invisible ellipse:\n center \u2248 50% \/ 49%\n radius \u2248 46% \/ 47%\n angles are evenly distributed from left to right.\n *\/\n body .hero-service-orbit__item--ai { left: 4.7% !important; top: 40.8% !important; }\n body .hero-service-orbit__item--video { left: 11.4% !important; top: 23.5% !important; }\n body .hero-service-orbit__item--calendar { left: 24.1% !important; top: 9.9% !important; }\n body .hero-service-orbit__item--web { left: 40.9% !important; top: 2.9% !important; }\n\n body .hero-service-orbit__item--camera { left: 59.1% !important; top: 2.9% !important; }\n body .hero-service-orbit__item--design { left: 75.9% !important; top: 9.9% !important; }\n body .hero-service-orbit__item--marketing { left: 88.6% !important; top: 23.5% !important; }\n body .hero-service-orbit__item--consulting { left: 95.3% !important; top: 40.8% !important; }\n}\n<\/style>\n\n<style id=\"service-strip-clean-three-zone-layout-final\">\n\/* =========================================================\n SERVICES - clean, intentional layout\n Desktop:\n LEFT = service title + description + pricing button\n MIDDLE = deliberately empty\n RIGHT = price range + explanation\n Tablet\/mobile = one clean vertical column\n ========================================================= *\/\n\n@media (min-width: 1101px) {\n body .service-strip__details {\n width: 100% !important;\n max-width: none !important;\n }\n\n body .service-strip__details > .service-strip__panel {\n display: grid !important;\n grid-template-columns: 38% 24% 38% !important;\n align-items: start !important;\n width: 100% !important;\n max-width: none !important;\n min-height: 250px !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body .service-strip__details > .service-strip__panel[hidden] {\n display: none !important;\n }\n\n \/* LEFT *\/\n body .service-strip__panel > .service-strip__left {\n grid-column: 1 !important;\n width: 100% !important;\n max-width: 620px !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body .service-strip__left > h3 {\n margin: 0 0 16px !important;\n max-width: none !important;\n }\n\n body .service-strip__left > .service-strip__description {\n width: 100% !important;\n max-width: 58ch !important;\n margin: 0 !important;\n line-height: 1.65 !important;\n word-break: normal !important;\n overflow-wrap: normal !important;\n }\n\n body .service-strip__left > .service-strip__price-toggle {\n display: inline-flex !important;\n position: static !important;\n width: auto !important;\n margin: 26px 0 0 !important;\n transform: none !important;\n }\n\n \/* MIDDLE = grid column 2. Intentionally empty. *\/\n\n \/* RIGHT *\/\n body .service-strip__panel > .service-strip__price-details {\n grid-column: 3 !important;\n align-self: start !important;\n justify-self: end !important;\n position: static !important;\n width: 100% !important;\n max-width: 600px !important;\n min-width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n transform: none !important;\n }\n\n body .service-strip__panel > .service-strip__price-details[hidden] {\n display: none !important;\n }\n\n body .service-strip__price {\n margin: 0 0 14px !important;\n font-size: clamp(20px, 1.35vw, 25px) !important;\n line-height: 1.15 !important;\n }\n\n body .service-strip__price-note {\n width: 100% !important;\n max-width: 58ch !important;\n margin: 0 !important;\n font-size: clamp(13px, .95vw, 15px) !important;\n line-height: 1.6 !important;\n word-break: normal !important;\n overflow-wrap: normal !important;\n }\n}\n\n\/* Tablet \/ mobile: simple vertical reading order, no desktop grid leakage. *\/\n@media (max-width: 1100px) {\n body .service-strip__icons {\n display: flex !important;\n flex-wrap: nowrap !important;\n gap: 10px !important;\n width: 100% !important;\n margin-bottom: 32px !important;\n overflow-x: auto !important;\n overflow-y: hidden !important;\n scrollbar-width: none !important;\n -webkit-overflow-scrolling: touch !important;\n }\n\n body .service-strip__icons::-webkit-scrollbar {\n display: none !important;\n }\n\n body .service-strip__details,\n body .service-strip__details > .service-strip__panel,\n body .service-strip__panel > .service-strip__left,\n body .service-strip__panel > .service-strip__price-details {\n display: block !important;\n position: static !important;\n width: 100% !important;\n max-width: none !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n transform: none !important;\n }\n\n body .service-strip__details > .service-strip__panel[hidden],\n body .service-strip__panel > .service-strip__price-details[hidden] {\n display: none !important;\n }\n\n body .service-strip__left > h3 {\n margin: 0 0 14px !important;\n }\n\n body .service-strip__left > .service-strip__description {\n width: 100% !important;\n max-width: 62ch !important;\n margin: 0 !important;\n line-height: 1.62 !important;\n word-break: normal !important;\n overflow-wrap: normal !important;\n }\n\n body .service-strip__left > .service-strip__price-toggle {\n display: inline-flex !important;\n position: static !important;\n width: auto !important;\n margin: 24px 0 0 !important;\n transform: none !important;\n }\n\n body .service-strip__panel > .service-strip__price-details {\n max-width: 62ch !important;\n margin-top: 24px !important;\n padding-top: 20px !important;\n border-top: 1px solid rgba(0,0,81,.10) !important;\n }\n\n body .service-strip__price {\n margin: 0 0 10px !important;\n }\n\n body .service-strip__price-note {\n width: 100% !important;\n max-width: 62ch !important;\n margin: 0 !important;\n line-height: 1.55 !important;\n word-break: normal !important;\n overflow-wrap: normal !important;\n }\n}\n\n@media (max-width: 720px) {\n body .service-strip__button,\n body .service-strip__button[aria-expanded=\"true\"] {\n flex: 0 0 58px !important;\n width: 58px !important;\n min-width: 58px !important;\n max-width: 58px !important;\n height: 58px !important;\n min-height: 58px !important;\n padding: 0 !important;\n }\n\n body .service-strip__icons {\n margin-bottom: 30px !important;\n }\n}\n<\/style>\n\n\n<style id=\"service-strip-more-space-below-icons-final\">\n\/* More breathing room between the service icon row and the content below. *\/\n@media (min-width: 1101px) {\n body .service-strip__details {\n margin-top: clamp(54px, 4.5vw, 78px) !important;\n }\n}\n\n@media (max-width: 1100px) {\n body .service-strip__details {\n margin-top: 34px !important;\n }\n}\n<\/style>\n\n\n<style id=\"faq-font-match-final\">\n\/* FAQ questions: use the same Inter stack as the rest of the interface. *\/\nbody .faq-item summary,\nbody .faq-item__question {\n font-family: var(--inter, \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif) !important;\n font-style: normal !important;\n}\n<\/style>\n\n\n<style id=\"hero-coded-cursor-eyes-svg-final\">\n\/* Exact pupil overlay based on the original Hero-2027 artwork coordinates. *\/\nbody .hero-art-stage {\n position: relative !important;\n}\n\nbody .hero-gaze-svg {\n position: absolute !important;\n z-index: 6 !important;\n inset: 0 !important;\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n overflow: visible !important;\n pointer-events: none !important;\n}\n\nbody .hero-gaze-svg__pupil {\n fill: #0f21ae !important;\n stroke: none !important;\n vector-effect: non-scaling-stroke;\n transform-box: fill-box;\n transform-origin: center;\n will-change: transform;\n}\n\n@media (max-width: 720px), (pointer: coarse), (prefers-reduced-motion: reduce) {\n body .hero-gaze-svg__pupil {\n transform: none !important;\n }\n}\n<\/style>\n\n<script id=\"hero-coded-cursor-eyes-svg-script-final\">\n(function () {\n 'use strict';\n\n const svg = document.querySelector('[data-hero-gaze-svg]');\n if (!svg) return;\n\n const left = svg.querySelector('[data-pupil-left]');\n const right = svg.querySelector('[data-pupil-right]');\n if (!left || !right) return;\n\n const desktopPointer = window.matchMedia('(min-width: 721px) and (pointer: fine)');\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n const eyes = [\n { el: left, x: 989.735, y: 179.943 },\n { el: right, x: 1052.498, y: 200.361 }\n ];\n\n let mouseX = null;\n let mouseY = null;\n let raf = 0;\n\n function reset() {\n eyes.forEach(eye => {\n eye.el.setAttribute('transform', '');\n });\n }\n\n function update() {\n raf = 0;\n\n if (!desktopPointer.matches || reduceMotion.matches || mouseX === null || mouseY === null) {\n reset();\n return;\n }\n\n const rect = svg.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n \/* Convert cursor position from screen pixels into the SVG's 2048x807 coordinate space. *\/\n const cursorX = (mouseX - rect.left) \/ rect.width * 2048;\n const cursorY = (mouseY - rect.top) \/ rect.height * 807;\n\n \/* Original pupil radius is ~8px in this coordinate system.\n Limit movement so pupils stay naturally inside the white eye shapes. *\/\n const maxTravelX = 6.5;\n const maxTravelY = 5.0;\n\n eyes.forEach(eye => {\n const dx = cursorX - eye.x;\n const dy = cursorY - eye.y;\n const dist = Math.hypot(dx, dy) || 1;\n\n const strength = Math.min(1, dist \/ 260);\n const tx = (dx \/ dist) * maxTravelX * strength;\n const ty = (dy \/ dist) * maxTravelY * strength;\n\n eye.el.setAttribute(\n 'transform',\n 'translate(' + tx.toFixed(2) + ' ' + ty.toFixed(2) + ')'\n );\n });\n }\n\n function queue() {\n if (!raf) raf = requestAnimationFrame(update);\n }\n\n window.addEventListener('pointermove', event => {\n if (event.pointerType && event.pointerType !== 'mouse' && event.pointerType !== 'pen') return;\n mouseX = event.clientX;\n mouseY = event.clientY;\n queue();\n }, { passive: true });\n\n document.documentElement.addEventListener('mouseleave', () => {\n mouseX = null;\n mouseY = null;\n reset();\n });\n\n window.addEventListener('blur', () => {\n mouseX = null;\n mouseY = null;\n reset();\n });\n\n window.addEventListener('resize', queue, { passive: true });\n\n reset();\n}());\n<\/script>\n\n\n<style id=\"hero-service-icons-draggable-final\">\n\/* User-positionable hero service icons. *\/\n@media (min-width: 721px) {\n body .hero-service-orbit__item {\n z-index: 5 !important;\n cursor: grab !important;\n touch-action: none !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n will-change: left, top, transform !important;\n }\n\n body .hero-service-orbit__item.is-dragging,\n body .hero-service-orbit__item[data-dragging=\"true\"] {\n z-index: 7 !important;\n cursor: grabbing !important;\n transition: none !important;\n }\n\n body .hero-service-orbit__item.is-dragging:hover,\n body .hero-service-orbit__item.is-dragging:active,\n body .hero-service-orbit__item.is-dragging[aria-pressed=\"true\"] {\n transform: translate(-50%, -50%) scale(1.06) !important;\n }\n}\n<\/style>\n\n<script id=\"hero-service-icons-draggable-script-final\">\n(function () {\n 'use strict';\n\n const root = document.querySelector('[data-hero-service-orbit]');\n if (!root) return;\n\n const buttons = Array.from(root.querySelectorAll('.hero-service-orbit__item[data-service-index]'));\n const panel = root.querySelector('[data-hero-service-panel]');\n if (!buttons.length) return;\n\n const DRAG_THRESHOLD = 5;\n let drag = null;\n let resizeFrame = 0;\n\n const clamp = (value, min, max) => Math.max(min, Math.min(max, value));\n\n function heroFor(button) {\n return button.closest('.landing-hero') || root;\n }\n\n function setButtonCenter(button, centerX, centerY, savePosition) {\n const hero = heroFor(button);\n const heroRect = hero.getBoundingClientRect();\n const rootRect = root.getBoundingClientRect();\n const buttonRect = button.getBoundingClientRect();\n const halfW = buttonRect.width \/ 2;\n const halfH = buttonRect.height \/ 2;\n\n if (!heroRect.width || !heroRect.height || !rootRect.width || !rootRect.height) return;\n\n const safeX = clamp(centerX, heroRect.left + halfW, heroRect.right - halfW);\n const safeY = clamp(centerY, heroRect.top + halfH, heroRect.bottom - halfH);\n\n button.style.setProperty('left', (safeX - rootRect.left) + 'px', 'important');\n button.style.setProperty('top', (safeY - rootRect.top) + 'px', 'important');\n\n if (savePosition) {\n button.dataset.heroDragX = String((safeX - heroRect.left) \/ heroRect.width);\n button.dataset.heroDragY = String((safeY - heroRect.top) \/ heroRect.height);\n }\n\n updateActiveLabel(button);\n }\n\n function updateActiveLabel(button) {\n if (!panel || window.innerWidth <= 720 || button.getAttribute('aria-pressed') !== 'true') return;\n\n const rootRect = root.getBoundingClientRect();\n const buttonRect = button.getBoundingClientRect();\n const rawX = buttonRect.left - rootRect.left + (buttonRect.width \/ 2);\n const rawY = buttonRect.bottom - rootRect.top;\n const labelWidth = Math.max(panel.offsetWidth || 0, 120);\n const sideGap = 12;\n const minX = (labelWidth \/ 2) + sideGap;\n const maxX = rootRect.width - (labelWidth \/ 2) - sideGap;\n const x = maxX >= minX ? clamp(rawX, minX, maxX) : rawX;\n\n root.style.setProperty('--hero-service-label-x', x + 'px');\n root.style.setProperty('--hero-service-label-y', rawY + 'px');\n }\n\n function restoreNormalizedPosition(button) {\n if (!button.dataset.heroDragX || !button.dataset.heroDragY) return;\n\n const hero = heroFor(button);\n const rect = hero.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nx = clamp(Number(button.dataset.heroDragX), 0, 1);\n const ny = clamp(Number(button.dataset.heroDragY), 0, 1);\n setButtonCenter(button, rect.left + nx * rect.width, rect.top + ny * rect.height, false);\n }\n\n function finishDrag(event, cancelled) {\n if (!drag || event.pointerId !== drag.pointerId) return;\n\n const button = drag.button;\n const moved = drag.moved;\n\n if (button.hasPointerCapture && button.hasPointerCapture(event.pointerId)) {\n try { button.releasePointerCapture(event.pointerId); } catch (error) {}\n }\n\n button.classList.remove('is-dragging');\n button.removeAttribute('data-dragging');\n\n if (!cancelled && moved) {\n button.dataset.heroDragSuppressClick = '1';\n window.setTimeout(() => {\n delete button.dataset.heroDragSuppressClick;\n }, 0);\n }\n\n drag = null;\n }\n\n buttons.forEach(button => {\n button.addEventListener('pointerdown', event => {\n if (event.button !== undefined && event.button !== 0) return;\n\n const rect = button.getBoundingClientRect();\n drag = {\n button,\n pointerId: event.pointerId,\n startX: event.clientX,\n startY: event.clientY,\n offsetX: event.clientX - (rect.left + rect.width \/ 2),\n offsetY: event.clientY - (rect.top + rect.height \/ 2),\n moved: false\n };\n\n try { button.setPointerCapture(event.pointerId); } catch (error) {}\n try { button.focus({ preventScroll: true }); } catch (error) { button.focus(); }\n button.setAttribute('data-dragging', 'true');\n });\n\n button.addEventListener('pointermove', event => {\n if (!drag || drag.button !== button || drag.pointerId !== event.pointerId) return;\n\n const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);\n if (!drag.moved && distance < DRAG_THRESHOLD) return;\n\n if (!drag.moved) {\n drag.moved = true;\n button.classList.add('is-dragging');\n }\n\n event.preventDefault();\n setButtonCenter(\n button,\n event.clientX - drag.offsetX,\n event.clientY - drag.offsetY,\n true\n );\n });\n\n button.addEventListener('pointerup', event => finishDrag(event, false));\n button.addEventListener('pointercancel', event => finishDrag(event, true));\n button.addEventListener('lostpointercapture', event => {\n if (drag && drag.button === button && drag.pointerId === event.pointerId) {\n finishDrag(event, true);\n }\n });\n });\n\n \/* A real drag should reposition the icon, not trigger its existing click action. *\/\n root.addEventListener('click', event => {\n const button = event.target.closest('.hero-service-orbit__item[data-service-index]');\n if (!button || button.dataset.heroDragSuppressClick !== '1') return;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n delete button.dataset.heroDragSuppressClick;\n }, true);\n\n window.addEventListener('resize', () => {\n if (resizeFrame) cancelAnimationFrame(resizeFrame);\n resizeFrame = requestAnimationFrame(() => {\n buttons.forEach(restoreNormalizedPosition);\n const active = buttons.find(button => button.getAttribute('aria-pressed') === 'true');\n if (active) updateActiveLabel(active);\n resizeFrame = 0;\n });\n }, { passive: true });\n}());\n<\/script>\n\n\n<script id=\"tab-visibility-title\">\n(function () {\n 'use strict';\n const originalTitle = document.title;\n document.addEventListener('visibilitychange', function () {\n document.title = document.hidden ? 'Do zobaczenia!' : originalTitle;\n });\n}());\n<\/script>\n\n\n<style id=\"www-folders-front-003bf3-back-0f21ae\">\n\/* WWW folders: front #003BF3, back #0F21AE, and no preview photos. *\/\nbody .websites .website-link,\nbody .websites .website-link--preview {\n background: #0F21AE !important;\n color: #ffffff !important;\n box-shadow: none !important;\n}\n\nbody .websites .website-link::before,\nbody .websites .website-link::after,\nbody .websites .website-link--preview::before,\nbody .websites .website-link--preview::after {\n background: #003BF3 !important;\n}\n\nbody .websites .website-link__front-tab path {\n fill: #003BF3 !important;\n}\n\nbody .websites .website-link__number,\nbody .websites .website-link__name,\nbody .websites .website-link__arrow,\nbody .websites .website-link--preview .website-link__number,\nbody .websites .website-link--preview .website-link__name,\nbody .websites .website-link--preview .website-link__arrow {\n color: #ffffff !important;\n fill: currentColor !important;\n}\n\nbody .websites .website-link__description,\nbody .websites .website-link--preview .website-link__description {\n color: rgba(255,255,255,.82) !important;\n}\n\nbody .websites .website-link__preview,\nbody .websites .website-link--preview > img.website-link__preview {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n}\n<\/style>\n\n\n<style id=\"top-menu-black-final\">\n\/* Top menu only: black type\/items. Drawer\/submenu stays unchanged. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__bar button,\n#reference-menu .motion-nav__bar a,\n#reference-menu .motion-nav__bar .motion-nav__menu-label,\n#reference-menu .motion-nav__bar .motion-nav__clock,\n#reference-menu .motion-nav__bar .motion-nav__utilities {\n color: #000000 !important;\n -webkit-text-fill-color: #000000 !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n#reference-menu .motion-nav__bar .motion-nav__menu-icon span {\n background: #000000 !important;\n box-shadow: none !important;\n mix-blend-mode: normal !important;\n}\n<\/style>\n\n\n\n<style id=\"analog-gallery-and-black-submenu-final\">\n\/* Analog photography - editorial gallery directly below WWW. *\/\nbody .analog-gallery {\n width: 100%;\n margin-top: clamp(64px, 8vw, 112px);\n padding-top: 24px;\n border-top: 1px solid var(--line);\n font-family: var(--inter);\n}\n\nbody .analog-gallery__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n margin-bottom: clamp(24px, 3vw, 38px);\n}\n\nbody .analog-gallery__eyebrow {\n margin: 0 0 9px;\n color: #003BF3;\n font-family: var(--inter);\n font-size: var(--type-label, .875rem);\n font-weight: 600;\n line-height: 1.4;\n letter-spacing: .08em;\n text-transform: uppercase;\n}\n\nbody .analog-gallery__header .section-title {\n margin: 0 !important;\n text-align: left !important;\n}\n\nbody .analog-gallery__grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: clamp(10px, 1.35vw, 18px);\n width: 100%;\n}\n\nbody .analog-gallery__item {\n min-width: 0;\n margin: 0;\n overflow: hidden;\n background: #111;\n}\n\nbody .analog-gallery__item--wide {\n grid-column: 1 \/ -1;\n}\n\nbody .analog-gallery__item img {\n display: block;\n width: 100%;\n height: auto;\n aspect-ratio: 1 \/ 1;\n object-fit: cover;\n object-position: center;\n}\n\nbody .analog-gallery__item--wide img {\n aspect-ratio: 1000 \/ 448;\n}\n\n\/* Submenu\/drawer: black typography, links, icons and CTA items. *\/\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer .motion-nav__content,\n#reference-menu .motion-nav__drawer .motion-nav__eyebrow,\n#reference-menu .motion-nav__drawer .motion-nav__links a,\n#reference-menu .motion-nav__drawer .motion-nav__contact,\n#reference-menu .motion-nav__drawer .motion-nav__socials a {\n color: #000000 !important;\n -webkit-text-fill-color: #000000 !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__links a:hover,\n#reference-menu .motion-nav__drawer .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__drawer .motion-nav__contact:hover,\n#reference-menu .motion-nav__drawer .motion-nav__contact:focus-visible,\n#reference-menu .motion-nav__drawer .motion-nav__socials a:hover,\n#reference-menu .motion-nav__drawer .motion-nav__socials a:focus-visible {\n color: #000000 !important;\n -webkit-text-fill-color: #000000 !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__socials svg {\n color: #000000 !important;\n fill: currentColor !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__divider {\n background: rgba(0,0,0,.16) !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__contact {\n border-color: rgba(0,0,0,.30) !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__contact:hover,\n#reference-menu .motion-nav__drawer .motion-nav__contact:focus-visible {\n border-color: #000000 !important;\n}\n\n@media (max-width: 760px) {\n body .analog-gallery {\n margin-top: 56px;\n }\n body .analog-gallery__header {\n justify-content: center;\n text-align: center;\n }\n body .analog-gallery__header .section-title,\n body .analog-gallery__eyebrow {\n text-align: center !important;\n }\n body .analog-gallery__grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n body .analog-gallery__item--wide {\n grid-column: auto;\n }\n}\n\n@media (max-width: 520px) {\n body .analog-gallery__item--wide img {\n aspect-ratio: 4 \/ 3;\n object-fit: cover;\n }\n}\n<\/style>\n\n\n<style id=\"analog-extra-images-and-branding-wip-final\">\n\/* Branding placeholder - deliberately disabled \/ greyed out while work is in progress. *\/\nbody .branding-wip {\n width: 100%;\n margin-top: clamp(64px, 8vw, 112px);\n padding-top: 24px;\n border-top: 1px solid #c8c8cc;\n color: #96969d;\n font-family: var(--inter);\n filter: grayscale(1);\n user-select: none;\n}\n\nbody .branding-wip__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n margin-bottom: clamp(24px, 3vw, 38px);\n}\n\nbody .branding-wip__eyebrow {\n margin: 0 0 9px;\n color: #a3a3aa;\n font-family: var(--inter);\n font-size: var(--type-label, .875rem);\n font-weight: 600;\n line-height: 1.4;\n letter-spacing: .08em;\n text-transform: uppercase;\n}\n\nbody .branding-wip__header .section-title {\n margin: 0 !important;\n color: #8d8d94 !important;\n text-align: left !important;\n}\n\nbody .branding-wip__status {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 36px;\n padding: 9px 14px;\n border: 1px solid #bdbdc3;\n border-radius: 999px;\n background: #ececee;\n color: #8a8a91;\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: .12em;\n text-transform: uppercase;\n}\n\nbody .branding-wip__canvas {\n position: relative;\n display: grid;\n grid-template-columns: 1.15fr .85fr;\n grid-template-rows: repeat(2, minmax(160px, 22vw));\n gap: clamp(10px, 1.35vw, 18px);\n width: 100%;\n padding: clamp(18px, 2.2vw, 28px);\n overflow: hidden;\n border: 1px solid #d0d0d4;\n background: #e6e6e9;\n}\n\nbody .branding-wip__canvas::after {\n content: \"WORK IN PROGRESS\";\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(232,232,235,.68);\n color: #8a8a90;\n font-family: var(--inter);\n font-size: clamp(20px, 3vw, 44px);\n font-weight: 600;\n line-height: 1;\n letter-spacing: .12em;\n text-align: center;\n text-transform: uppercase;\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n\nbody .branding-wip__block {\n min-width: 0;\n min-height: 0;\n border: 1px solid #c8c8cc;\n background: linear-gradient(135deg, #d7d7da 0%, #cfcfd3 100%);\n}\n\nbody .branding-wip__block--mark {\n grid-row: span 2;\n}\n\nbody .branding-wip__block--wide {\n background: linear-gradient(135deg, #d2d2d6 0%, #c5c5ca 100%);\n}\n\n@media (max-width: 760px) {\n body .branding-wip {\n margin-top: 56px;\n }\n\n body .branding-wip__header {\n align-items: center;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n }\n\n body .branding-wip__header .section-title,\n body .branding-wip__eyebrow {\n text-align: center !important;\n }\n\n body .branding-wip__canvas {\n grid-template-columns: 1fr;\n grid-template-rows: repeat(3, minmax(150px, 48vw));\n }\n\n body .branding-wip__block--mark {\n grid-row: auto;\n }\n\n body .branding-wip__canvas .branding-wip__block:last-child {\n display: none;\n }\n}\n<\/style>\n\n\n<style id=\"menu-navy-glass-white-final\">\n\/* Final navigation treatment: dark navy glass (#0F21AE) with white content. *\/\n#reference-menu .motion-nav__shell {\n background: rgba(15, 33, 174, .76) !important;\n border: 1px solid rgba(255, 255, 255, .16) !important;\n -webkit-backdrop-filter: blur(24px) saturate(165%) !important;\n backdrop-filter: blur(24px) saturate(165%) !important;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, .18),\n 0 12px 34px rgba(0, 0, 41, .16) !important;\n color: #ffffff !important;\n}\n\n#reference-menu.is-open .motion-nav__shell {\n background: rgba(15, 33, 174, .82) !important;\n}\n\n\/* Bar + drawer remain transparent so the glass shell reads as one surface. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer-inner,\n#reference-menu .motion-nav__content {\n background: transparent !important;\n}\n\n\/* Every menu label, link, item and icon is white. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__menu-button,\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__utilities,\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__content,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__links a,\n#reference-menu .motion-nav__contact,\n#reference-menu .motion-nav__socials a,\n#reference-menu .motion-nav__contact span {\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n#reference-menu .motion-nav__menu-icon span {\n background: #ffffff !important;\n box-shadow: none !important;\n}\n\n#reference-menu svg,\n#reference-menu .motion-nav__socials svg {\n color: #ffffff !important;\n}\n\n#reference-menu .motion-nav__socials svg {\n fill: currentColor !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible,\n#reference-menu .motion-nav__socials a:hover,\n#reference-menu .motion-nav__socials a:focus-visible {\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible {\n opacity: .68 !important;\n}\n\n#reference-menu .motion-nav__divider {\n background: rgba(255, 255, 255, .22) !important;\n}\n\n#reference-menu .motion-nav__contact {\n border-color: rgba(255, 255, 255, .42) !important;\n}\n\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n border-color: #ffffff !important;\n}\n\n#reference-menu .motion-nav__socials a:hover,\n#reference-menu .motion-nav__socials a:focus-visible {\n background: rgba(255, 255, 255, .12) !important;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n #reference-menu .motion-nav__shell,\n #reference-menu.is-open .motion-nav__shell {\n background: rgba(15, 33, 174, .94) !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-white-items-hard-override\">\n\/* Hard override: all top-menu and submenu text\/items\/icons are white. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__bar *,\n#reference-menu .motion-nav__bar button,\n#reference-menu .motion-nav__bar button *,\n#reference-menu .motion-nav__bar a,\n#reference-menu .motion-nav__bar a *,\n#reference-menu .motion-nav__bar .motion-nav__menu-label,\n#reference-menu .motion-nav__bar .motion-nav__clock,\n#reference-menu .motion-nav__bar .motion-nav__utilities,\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer *,\n#reference-menu .motion-nav__drawer .motion-nav__content,\n#reference-menu .motion-nav__drawer .motion-nav__eyebrow,\n#reference-menu .motion-nav__drawer .motion-nav__links a,\n#reference-menu .motion-nav__drawer .motion-nav__links a:link,\n#reference-menu .motion-nav__drawer .motion-nav__links a:visited,\n#reference-menu .motion-nav__drawer .motion-nav__links a:hover,\n#reference-menu .motion-nav__drawer .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__drawer .motion-nav__links a:active,\n#reference-menu .motion-nav__drawer .motion-nav__contact,\n#reference-menu .motion-nav__drawer .motion-nav__contact span,\n#reference-menu .motion-nav__drawer .motion-nav__socials a {\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n#reference-menu .motion-nav__bar .motion-nav__menu-icon span {\n background: #ffffff !important;\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n box-shadow: none !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__socials svg,\n#reference-menu .motion-nav__drawer .motion-nav__socials svg path,\n#reference-menu .motion-nav__drawer svg,\n#reference-menu .motion-nav__drawer svg path {\n color: #ffffff !important;\n fill: #ffffff !important;\n stroke: currentColor;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__divider {\n background: rgba(255,255,255,.22) !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__contact {\n border-color: rgba(255,255,255,.42) !important;\n}\n\n#reference-menu .motion-nav__drawer .motion-nav__contact:hover,\n#reference-menu .motion-nav__drawer .motion-nav__contact:focus-visible {\n border-color: #ffffff !important;\n}\n<\/style>\n\n\n<style id=\"menu-clean-and-analog-natural-ratio-final\">\n\/* Menu: keep navy transparent glass + blur, remove outer frame and shadow. *\/\n#reference-menu .motion-nav__shell,\n#reference-menu.is-open .motion-nav__shell {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n filter: none !important;\n}\n\n\/* Analog gallery: preserve each source image's natural aspect ratio - no cropping. *\/\nbody .analog-gallery__item {\n overflow: visible !important;\n background: transparent !important;\n}\n\nbody .analog-gallery__item img,\nbody .analog-gallery__item--wide img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center !important;\n}\n\n@media (max-width: 520px) {\n body .analog-gallery__item img,\n body .analog-gallery__item--wide img {\n width: 100% !important;\n height: auto !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-white-blue-and-gallery-equal-height-final\">\n\/* NAV: white transparent glass surface, blue content, no frame\/shadow. *\/\n#reference-menu .motion-nav__shell,\n#reference-menu.is-open .motion-nav__shell {\n background: rgba(255,255,255,.76) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n -webkit-backdrop-filter: blur(24px) saturate(165%) !important;\n backdrop-filter: blur(24px) saturate(165%) !important;\n color: #003BF3 !important;\n}\n\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer-inner,\n#reference-menu .motion-nav__content {\n background: transparent !important;\n}\n\n\/* Top menu + submenu: all typography, links, controls and items blue. *\/\n#reference-menu .motion-nav__bar,\n#reference-menu .motion-nav__bar *,\n#reference-menu .motion-nav__bar button,\n#reference-menu .motion-nav__bar button *,\n#reference-menu .motion-nav__bar a,\n#reference-menu .motion-nav__bar a *,\n#reference-menu .motion-nav__drawer,\n#reference-menu .motion-nav__drawer *,\n#reference-menu .motion-nav__drawer a,\n#reference-menu .motion-nav__drawer a:link,\n#reference-menu .motion-nav__drawer a:visited,\n#reference-menu .motion-nav__drawer a:hover,\n#reference-menu .motion-nav__drawer a:focus-visible,\n#reference-menu .motion-nav__drawer a:active,\n#reference-menu .motion-nav__menu-label,\n#reference-menu .motion-nav__clock,\n#reference-menu .motion-nav__eyebrow,\n#reference-menu .motion-nav__contact,\n#reference-menu .motion-nav__contact span,\n#reference-menu .motion-nav__socials a {\n color: #003BF3 !important;\n -webkit-text-fill-color: #003BF3 !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n#reference-menu .motion-nav__menu-icon span {\n background: #003BF3 !important;\n box-shadow: none !important;\n}\n\n#reference-menu svg,\n#reference-menu svg path,\n#reference-menu .motion-nav__socials svg,\n#reference-menu .motion-nav__socials svg path {\n color: #003BF3 !important;\n stroke: currentColor !important;\n}\n\n#reference-menu .motion-nav__socials svg,\n#reference-menu .motion-nav__socials svg path {\n fill: currentColor !important;\n}\n\n#reference-menu .motion-nav__divider {\n background: rgba(0,59,243,.22) !important;\n}\n\n#reference-menu .motion-nav__contact {\n border-color: rgba(0,59,243,.42) !important;\n}\n\n#reference-menu .motion-nav__contact:hover,\n#reference-menu .motion-nav__contact:focus-visible {\n border-color: #003BF3 !important;\n background: rgba(0,59,243,.07) !important;\n}\n\n#reference-menu .motion-nav__links a:hover,\n#reference-menu .motion-nav__links a:focus-visible,\n#reference-menu .motion-nav__socials a:hover,\n#reference-menu .motion-nav__socials a:focus-visible {\n color: #003BF3 !important;\n -webkit-text-fill-color: #003BF3 !important;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n #reference-menu .motion-nav__shell,\n #reference-menu.is-open .motion-nav__shell {\n background: rgba(255,255,255,.95) !important;\n }\n}\n\n\/* ANALOG GALLERY: every image uses the same visible height, without cropping. *\/\nbody .analog-gallery__item,\nbody .analog-gallery__item--wide {\n height: clamp(280px, 30vw, 430px) !important;\n min-height: 0 !important;\n overflow: hidden !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n background: transparent !important;\n}\n\nbody .analog-gallery__item img,\nbody .analog-gallery__item--wide img {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 0 !important;\n max-height: 100% !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center center !important;\n}\n\n@media (max-width: 720px) {\n body .analog-gallery__item,\n body .analog-gallery__item--wide {\n height: clamp(240px, 72vw, 360px) !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-transparent-blue-force-final\">\n\/* Final menu override: more transparent white glass, blue content everywhere. *\/\nbody #reference-menu .motion-nav__shell,\nbody #reference-menu.is-open .motion-nav__shell {\n background: rgba(255,255,255,.38) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n -webkit-backdrop-filter: blur(24px) saturate(150%) !important;\n backdrop-filter: blur(24px) saturate(150%) !important;\n}\n\n\/* Keep submenu transparent inside the same glass surface. *\/\nbody #reference-menu .motion-nav__bar,\nbody #reference-menu .motion-nav__drawer,\nbody #reference-menu .motion-nav__drawer-inner,\nbody #reference-menu .motion-nav__content {\n background: transparent !important;\n}\n\n\/* Force every textual\/menu item to blue. *\/\nbody #reference-menu,\nbody #reference-menu *,\nbody #reference-menu a,\nbody #reference-menu a:link,\nbody #reference-menu a:visited,\nbody #reference-menu a:hover,\nbody #reference-menu a:focus-visible,\nbody #reference-menu a:active,\nbody #reference-menu button,\nbody #reference-menu button *,\nbody #reference-menu .motion-nav__menu-label,\nbody #reference-menu .motion-nav__clock,\nbody #reference-menu .motion-nav__eyebrow,\nbody #reference-menu .motion-nav__links a,\nbody #reference-menu .motion-nav__contact,\nbody #reference-menu .motion-nav__socials a {\n color: #003BF3 !important;\n -webkit-text-fill-color: #003BF3 !important;\n text-shadow: none !important;\n -webkit-text-stroke: 0 !important;\n mix-blend-mode: normal !important;\n}\n\n\/* Hamburger \/ simple UI strokes. *\/\nbody #reference-menu .motion-nav__menu-icon span {\n background: #003BF3 !important;\n box-shadow: none !important;\n}\n\nbody #reference-menu svg,\nbody #reference-menu svg *,\nbody #reference-menu .motion-nav__socials svg,\nbody #reference-menu .motion-nav__socials svg * {\n color: #003BF3 !important;\n stroke: #003BF3 !important;\n}\n\n\/* Filled social icons stay blue as well. *\/\nbody #reference-menu .motion-nav__socials svg,\nbody #reference-menu .motion-nav__socials svg path {\n fill: #003BF3 !important;\n}\n\n\/* Supporting menu details in blue. *\/\nbody #reference-menu .motion-nav__divider {\n background: rgba(0,59,243,.22) !important;\n}\n\nbody #reference-menu .motion-nav__contact {\n border-color: rgba(0,59,243,.45) !important;\n}\n\nbody #reference-menu .motion-nav__contact:hover,\nbody #reference-menu .motion-nav__contact:focus-visible {\n border-color: #003BF3 !important;\n background: rgba(0,59,243,.06) !important;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n body #reference-menu .motion-nav__shell,\n body #reference-menu.is-open .motion-nav__shell {\n background: rgba(255,255,255,.78) !important;\n }\n}\n<\/style>\n\n\n<style id=\"analog-gallery-masonry-natural-ratio-final\">\n\/* Analog photography: responsive masonry layout with original image framing preserved. *\/\nbody .analog-gallery {\n display: block !important;\n column-count: 3 !important;\n column-gap: clamp(12px, 1.5vw, 20px) !important;\n width: 100% !important;\n}\n\n\/* Every gallery item becomes an independent masonry tile. *\/\nbody .analog-gallery__item,\nbody .analog-gallery__item--wide {\n display: inline-block !important;\n width: 100% !important;\n height: auto !important;\n min-height: 0 !important;\n margin: 0 0 clamp(12px, 1.5vw, 20px) !important;\n padding: 0 !important;\n overflow: visible !important;\n break-inside: avoid !important;\n -webkit-column-break-inside: avoid !important;\n page-break-inside: avoid !important;\n background: transparent !important;\n}\n\n\/* Preserve each source file's original proportions and framing. *\/\nbody .analog-gallery__item img,\nbody .analog-gallery__item--wide img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: 100% !important;\n max-height: none !important;\n aspect-ratio: auto !important;\n object-fit: initial !important;\n object-position: initial !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n\/* Neutralize any old \"wide\" spanning logic from the previous grid version. *\/\nbody .analog-gallery__item--wide {\n grid-column: auto !important;\n grid-row: auto !important;\n}\n\n\/* Tablet: two balanced columns. *\/\n@media (max-width: 980px) {\n body .analog-gallery {\n column-count: 2 !important;\n }\n}\n\n\/* Mobile: single natural-flow column. *\/\n@media (max-width: 560px) {\n body .analog-gallery {\n column-count: 1 !important;\n column-gap: 0 !important;\n }\n\n body .analog-gallery__item,\n body .analog-gallery__item--wide {\n margin-bottom: 12px !important;\n }\n}\n<\/style>\n\n\n<style id=\"menu-ultra-transparent-blue-and-justified-bento-final\">\n\/* MENU - ultra-transparent white glass, blue interface. *\/\nhtml body header#reference-menu .motion-nav__shell,\nhtml body header#reference-menu.is-open .motion-nav__shell {\n background: rgba(255,255,255,.18) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n -webkit-backdrop-filter: blur(24px) saturate(150%) !important;\n backdrop-filter: blur(24px) saturate(150%) !important;\n}\n\nhtml body header#reference-menu .motion-nav__bar,\nhtml body header#reference-menu .motion-nav__drawer,\nhtml body header#reference-menu .motion-nav__drawer-inner,\nhtml body header#reference-menu .motion-nav__content {\n background: transparent !important;\n box-shadow: none !important;\n}\n\nhtml body header#reference-menu .motion-nav__menu-label,\nhtml body header#reference-menu .motion-nav__clock,\nhtml body header#reference-menu .motion-nav__eyebrow,\nhtml body header#reference-menu .motion-nav__links a,\nhtml body header#reference-menu .motion-nav__links a:link,\nhtml body header#reference-menu .motion-nav__links a:visited,\nhtml body header#reference-menu .motion-nav__links a:hover,\nhtml body header#reference-menu .motion-nav__links a:focus-visible,\nhtml body header#reference-menu .motion-nav__links a:active,\nhtml body header#reference-menu .motion-nav__contact,\nhtml body header#reference-menu .motion-nav__contact span,\nhtml body header#reference-menu .motion-nav__socials a,\nhtml body header#reference-menu .motion-nav__socials a:visited {\n color: #003BF3 !important;\n -webkit-text-fill-color: #003BF3 !important;\n text-shadow: none !important;\n opacity: 1 !important;\n mix-blend-mode: normal !important;\n}\n\nhtml body header#reference-menu .motion-nav__menu-icon span {\n background: #003BF3 !important;\n box-shadow: none !important;\n}\n\nhtml body header#reference-menu .motion-nav__socials svg,\nhtml body header#reference-menu .motion-nav__socials svg path {\n color: #003BF3 !important;\n fill: #003BF3 !important;\n stroke: none !important;\n}\n\nhtml body header#reference-menu .motion-nav__divider {\n background: rgba(0,59,243,.18) !important;\n}\n\nhtml body header#reference-menu .motion-nav__contact {\n border-color: rgba(0,59,243,.34) !important;\n background: transparent !important;\n}\n\nhtml body header#reference-menu .motion-nav__contact:hover,\nhtml body header#reference-menu .motion-nav__contact:focus-visible {\n border-color: #003BF3 !important;\n background: rgba(0,59,243,.05) !important;\n}\n\n\/* ANALOG PHOTO - compact justified bento \/ mosaic, original ratios, zero cropping. *\/\nhtml body .analog-gallery__grid {\n display: flex !important;\n flex-direction: column !important;\n align-items: stretch !important;\n width: 100% !important;\n gap: 10px !important;\n column-count: initial !important;\n column-gap: initial !important;\n grid-template-columns: none !important;\n grid-auto-rows: initial !important;\n}\n\nhtml body .analog-gallery__grid > .analog-bento__row {\n display: flex !important;\n align-items: flex-start !important;\n width: 100% !important;\n gap: 10px !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\nhtml body .analog-gallery__grid .analog-gallery__item,\nhtml body .analog-gallery__grid .analog-gallery__item--wide {\n flex: 0 0 auto !important;\n width: auto !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: visible !important;\n break-inside: auto !important;\n background: transparent !important;\n grid-column: auto !important;\n grid-row: auto !important;\n}\n\nhtml body .analog-gallery__grid .analog-gallery__item img,\nhtml body .analog-gallery__grid .analog-gallery__item--wide img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: 100% !important;\n max-height: none !important;\n aspect-ratio: auto !important;\n object-fit: fill !important;\n object-position: initial !important;\n margin: 0 !important;\n padding: 0 !important;\n transform: none !important;\n}\n\n@media (max-width: 720px) {\n html body .analog-gallery__grid,\n html body .analog-gallery__grid > .analog-bento__row {\n gap: 7px !important;\n }\n}\n<\/style>\n<style id=\"analog-bento-column-leak-fix\">\n\/* FIX: an older masonry rule was applying CSS columns to the whole section,\n splitting the header and gallery into separate columns. *\/\nhtml body section.analog-gallery {\n display: block !important;\n columns: auto !important;\n column-count: initial !important;\n column-width: auto !important;\n column-gap: normal !important;\n width: 100% !important;\n}\n\n\/* Header always occupies the full section width. *\/\nhtml body section.analog-gallery > .analog-gallery__header {\n display: flex !important;\n width: 100% !important;\n break-inside: auto !important;\n column-span: all !important;\n}\n\n\/* Only the photo area is responsible for layout. *\/\nhtml body section.analog-gallery > .analog-gallery__grid {\n width: 100% !important;\n max-width: none !important;\n columns: auto !important;\n column-count: initial !important;\n column-width: auto !important;\n column-gap: initial !important;\n}\n\n\/* Original framing\/proportions: never crop or stretch the photos. *\/\nhtml body .analog-gallery__grid .analog-gallery__item img,\nhtml body .analog-gallery__grid .analog-gallery__item--wide img {\n width: 100% !important;\n height: auto !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center !important;\n}\n<\/style>\n\n\n<style id=\"hamburger-blue-final\">\n\/* Final hamburger color override. *\/\nhtml body #reference-menu .motion-nav__menu-icon,\nhtml body #reference-menu .motion-nav__menu-icon span,\nhtml body #reference-menu .motion-nav__menu-button .motion-nav__menu-icon span {\n color: #003BF3 !important;\n}\n\nhtml body #reference-menu .motion-nav__menu-icon span,\nhtml body #reference-menu .motion-nav__menu-button .motion-nav__menu-icon span {\n background: #003BF3 !important;\n border-color: #003BF3 !important;\n box-shadow: none !important;\n}\n<\/style>\n\n\n<style id=\"analog-bento-full-bleed-final\">\n\/* Photo bento goes full viewport width while the section heading stays aligned to page content. *\/\nhtml body section.analog-gallery > .analog-gallery__grid {\n position: relative !important;\n left: 50% !important;\n width: 100vw !important;\n max-width: none !important;\n margin-left: -50vw !important;\n margin-right: 0 !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n box-sizing: border-box !important;\n}\n\nhtml body section.analog-gallery > .analog-gallery__grid > .analog-bento__row {\n width: 100% !important;\n max-width: none !important;\n}\n\n\/* Keep every source photo uncropped and in its natural ratio. *\/\nhtml body section.analog-gallery .analog-gallery__item img,\nhtml body section.analog-gallery .analog-gallery__item--wide img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center !important;\n}\n\n@media (max-width: 720px) {\n html body section.analog-gallery > .analog-gallery__grid {\n width: 100vw !important;\n margin-left: -50vw !important;\n }\n}\n<\/style>\n\n\n<style id=\"analog-bento-stable-no-js-final\">\n\/* Stable justified bento - no JS re-layout, no duplicate render, no crop. *\/\nhtml body section.analog-gallery {\n display: block !important;\n columns: auto !important;\n column-count: initial !important;\n column-width: auto !important;\n width: 100% !important;\n}\n\nhtml body section.analog-gallery > .analog-gallery__header {\n width: 100% !important;\n column-span: all !important;\n}\n\nhtml body section.analog-gallery > .analog-gallery__grid {\n position: relative !important;\n left: 50% !important;\n width: 100vw !important;\n max-width: none !important;\n margin: 0 0 0 -50vw !important;\n padding: 0 !important;\n display: flex !important;\n flex-direction: column !important;\n gap: 10px !important;\n columns: auto !important;\n column-count: initial !important;\n grid-template-columns: none !important;\n box-sizing: border-box !important;\n}\n\nhtml body section.analog-gallery .analog-bento__row {\n display: flex !important;\n width: 100% !important;\n max-width: none !important;\n align-items: flex-start !important;\n gap: 10px !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n\/* Widths follow the source aspect ratio, so every image in a row has the same rendered height. *\/\nhtml body section.analog-gallery .analog-bento__row > .analog-gallery__item,\nhtml body section.analog-gallery .analog-bento__row > .analog-gallery__item--wide {\n flex: var(--photo-ratio) 1 0 !important;\n width: 0 !important;\n height: auto !important;\n min-width: 0 !important;\n max-width: none !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n display: block !important;\n overflow: visible !important;\n background: transparent !important;\n grid-column: auto !important;\n grid-row: auto !important;\n break-inside: auto !important;\n}\n\n\/* Native image dimensions + width\/height attributes reserve the correct ratio before the file loads. *\/\nhtml body section.analog-gallery .analog-bento__row img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n max-width: 100% !important;\n max-height: none !important;\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center !important;\n margin: 0 !important;\n padding: 0 !important;\n transform: none !important;\n}\n\n\/* Small screens: avoid unreadably tiny four-across tiles; still no cropping or JS reflow. *\/\n@media (max-width: 680px) {\n html body section.analog-gallery > .analog-gallery__grid {\n gap: 7px !important;\n }\n\n html body section.analog-gallery .analog-bento__row {\n display: grid !important;\n grid-template-columns: 1fr 1fr !important;\n gap: 7px !important;\n align-items: start !important;\n }\n\n html body section.analog-gallery .analog-bento__row > .analog-gallery__item,\n html body section.analog-gallery .analog-bento__row > .analog-gallery__item--wide {\n width: 100% !important;\n }\n\n html body section.analog-gallery .analog-bento__row--one > .analog-gallery__item:first-child {\n grid-column: 1 \/ -1 !important;\n }\n}\n\n@media (max-width: 420px) {\n html body section.analog-gallery .analog-bento__row {\n grid-template-columns: 1fr !important;\n }\n\n html body section.analog-gallery .analog-bento__row--one > .analog-gallery__item:first-child {\n grid-column: auto !important;\n }\n}\n<\/style>\n\n\n<style id=\"portfolio-consistency-photo-branding-final\">\n\/* =========================================================\n PHOTO + BRANDING - one spacing \/ typography \/ width system\n ========================================================= *\/\n\n\/* Both sections follow the same direct-section rhythm as the rest of the page. *\/\nhtml body main#main-content > section.analog-gallery,\nhtml body main#main-content > section.branding-wip {\n position: relative !important;\n left: auto !important;\n right: auto !important;\n width: 100% !important;\n max-width: none !important;\n margin-right: 0 !important;\n margin-left: 0 !important;\n padding-right: 0 !important;\n padding-left: 0 !important;\n box-sizing: border-box !important;\n font-family: var(--sans) !important;\n}\n\n\/* Same separator and top inset used by WWW \/ video portfolio sections. *\/\nhtml body section.analog-gallery,\nhtml body section.branding-wip {\n padding-top: 24px !important;\n border-top: 1px solid var(--line) !important;\n}\n\n\/* Section headers use the existing site rhythm instead of custom spacing. *\/\nhtml body .analog-gallery__header,\nhtml body .branding-wip__header {\n width: 100% !important;\n margin: 0 0 var(--section-header-gap) !important;\n display: flex !important;\n align-items: flex-end !important;\n justify-content: space-between !important;\n gap: var(--content-gap) !important;\n text-align: left !important;\n}\n\nhtml body .analog-gallery__heading-copy,\nhtml body .branding-wip__heading-copy {\n display: grid !important;\n gap: 12px !important;\n min-width: 0 !important;\n}\n\nhtml body .analog-gallery__eyebrow,\nhtml body .branding-wip__eyebrow {\n margin: 0 !important;\n font-family: var(--sans) !important;\n font-size: var(--type-label, .875rem) !important;\n font-weight: 600 !important;\n line-height: 1.4 !important;\n letter-spacing: .08em !important;\n text-transform: uppercase !important;\n text-align: left !important;\n}\n\nhtml body .analog-gallery__eyebrow {\n color: #003BF3 !important;\n}\n\nhtml body .branding-wip__eyebrow {\n color: #9A9AA1 !important;\n}\n\nhtml body .analog-gallery__header .section-title--major,\nhtml body .branding-wip__header .section-title--major {\n margin: 0 !important;\n text-align: left !important;\n}\n\n\/* ---------------------------------------------------------\n ANALOG PHOTO - contained bento, aligned to page gutters\n --------------------------------------------------------- *\/\n\nhtml body section.analog-gallery > .analog-gallery__grid {\n position: static !important;\n left: auto !important;\n right: auto !important;\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: flex !important;\n flex-direction: column !important;\n gap: clamp(10px, 1.2vw, 16px) !important;\n\n columns: auto !important;\n column-count: initial !important;\n column-width: auto !important;\n grid-template-columns: none !important;\n box-sizing: border-box !important;\n}\n\nhtml body section.analog-gallery .analog-bento__row {\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: flex !important;\n align-items: flex-start !important;\n gap: clamp(10px, 1.2vw, 16px) !important;\n}\n\nhtml body section.analog-gallery .analog-bento__row > .analog-gallery__item,\nhtml body section.analog-gallery .analog-bento__row > .analog-gallery__item--wide {\n flex: var(--photo-ratio) 1 0 !important;\n width: 0 !important;\n min-width: 0 !important;\n max-width: none !important;\n height: auto !important;\n min-height: 0 !important;\n\n margin: 0 !important;\n padding: 0 !important;\n display: block !important;\n overflow: hidden !important;\n background: transparent !important;\n\n grid-column: auto !important;\n grid-row: auto !important;\n break-inside: auto !important;\n}\n\nhtml body section.analog-gallery .analog-bento__row img {\n display: block !important;\n width: 100% !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: 100% !important;\n max-height: none !important;\n\n margin: 0 !important;\n padding: 0 !important;\n\n aspect-ratio: auto !important;\n object-fit: contain !important;\n object-position: center !important;\n transform: none !important;\n}\n\n\/* ---------------------------------------------------------\n BRANDING WIP - quiet editorial placeholder, no pill\n --------------------------------------------------------- *\/\n\nhtml body section.branding-wip {\n color: #929299 !important;\n filter: none !important;\n user-select: none !important;\n}\n\nhtml body .branding-wip__header .section-title--major {\n color: #929299 !important;\n}\n\nhtml body .branding-wip__status {\n display: none !important;\n}\n\nhtml body .branding-wip__canvas {\n position: relative !important;\n width: 100% !important;\n min-height: clamp(180px, 18vw, 260px) !important;\n height: auto !important;\n\n margin: 0 !important;\n padding: clamp(24px, 3vw, 40px) !important;\n\n display: flex !important;\n align-items: flex-end !important;\n justify-content: flex-start !important;\n\n overflow: hidden !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n background: #F0F0F2 !important;\n box-sizing: border-box !important;\n}\n\n\/* Remove the old skeleton \/ overlay language completely. *\/\nhtml body .branding-wip__canvas::before,\nhtml body .branding-wip__canvas::after,\nhtml body .branding-wip__block {\n content: none !important;\n display: none !important;\n}\n\nhtml body .branding-wip__canvas-label {\n position: relative !important;\n z-index: 1 !important;\n\n color: #9A9AA1 !important;\n font-family: var(--sans) !important;\n font-size: var(--type-label, .875rem) !important;\n font-weight: 600 !important;\n line-height: 1.4 !important;\n letter-spacing: .08em !important;\n text-transform: uppercase !important;\n}\n\n\/* Mobile follows the same left-aligned section language used elsewhere. *\/\n@media (max-width: 760px) {\n html body .analog-gallery__header,\n html body .branding-wip__header {\n align-items: flex-start !important;\n justify-content: flex-start !important;\n text-align: left !important;\n }\n\n html body .analog-gallery__eyebrow,\n html body .branding-wip__eyebrow,\n html body .analog-gallery__header .section-title--major,\n html body .branding-wip__header .section-title--major {\n text-align: left !important;\n }\n\n html body section.analog-gallery .analog-bento__row {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n align-items: start !important;\n gap: 10px !important;\n }\n\n html body section.analog-gallery .analog-bento__row > .analog-gallery__item,\n html body section.analog-gallery .analog-bento__row > .analog-gallery__item--wide {\n width: 100% !important;\n }\n\n html body section.analog-gallery .analog-bento__row--one > .analog-gallery__item:first-child {\n grid-column: 1 \/ -1 !important;\n }\n\n html body .branding-wip__canvas {\n min-height: 170px !important;\n padding: 24px !important;\n }\n}\n\n@media (max-width: 520px) {\n html body section.analog-gallery .analog-bento__row {\n grid-template-columns: 1fr !important;\n }\n\n html body section.analog-gallery .analog-bento__row--one > .analog-gallery__item:first-child {\n grid-column: auto !important;\n }\n}\n<\/style>\n\n\n<style id=\"scroll-nav-and-back-to-top-final\">\n\/* Scroll-aware top navigation. *\/\nhtml body header#reference-menu {\n transform: translate(-50%, 0) !important;\n transition-property: transform !important;\n transition-duration: .34s !important;\n transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;\n will-change: transform !important;\n}\n\nhtml body header#reference-menu.is-scroll-hidden {\n transform: translate(-50%, calc(-100% - 28px)) !important;\n transition-timing-function: cubic-bezier(.4, 0, 1, 1) !important;\n}\n\n\/* Compact back-to-top control using the Lucide ArrowUp geometry. *\/\n.back-to-top {\n position: fixed;\n z-index: 4800;\n right: clamp(16px, 2.4vw, 32px);\n bottom: clamp(16px, 2.4vw, 32px);\n width: 48px;\n height: 48px;\n padding: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n border: 0;\n border-radius: 999px;\n outline: 0;\n background: rgba(255,255,255,.58);\n color: #003BF3;\n box-shadow: none;\n -webkit-backdrop-filter: blur(18px) saturate(150%);\n backdrop-filter: blur(18px) saturate(150%);\n cursor: pointer;\n\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transform: translateY(10px);\n transition:\n opacity .22s ease,\n transform .28s cubic-bezier(.22,1,.36,1),\n background-color .18s ease;\n}\n\n.back-to-top.is-visible {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.back-to-top:hover,\n.back-to-top:focus-visible {\n background: rgba(255,255,255,.82);\n}\n\n.back-to-top:focus-visible {\n outline: 2px solid #003BF3;\n outline-offset: 3px;\n}\n\n.back-to-top svg {\n width: 22px;\n height: 22px;\n display: block;\n fill: none;\n stroke: currentColor;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n@media (max-width: 520px) {\n .back-to-top {\n width: 44px;\n height: 44px;\n right: 16px;\n bottom: 16px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n html body header#reference-menu,\n html body header#reference-menu.is-scroll-hidden,\n .back-to-top {\n transition: none !important;\n }\n}\n<\/style>\n\n<button class=\"back-to-top\" type=\"button\" aria-label=\"Wr\u00f3\u0107 na g\u00f3r\u0119\" title=\"Wr\u00f3\u0107 na g\u00f3r\u0119\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"m5 12 7-7 7 7\"><\/path>\n <path d=\"M12 19V5\"><\/path>\n <\/svg>\n<\/button>\n\n<script id=\"scroll-nav-and-back-to-top\">\n(function () {\n 'use strict';\n\n const nav = document.getElementById('reference-menu');\n const backToTop = document.querySelector('.back-to-top');\n\n if (!nav) return;\n\n let lastY = Math.max(window.scrollY || 0, 0);\n let ticking = false;\n const minDelta = 5;\n const hideAfter = 96;\n\n function showNav() {\n nav.classList.remove('is-scroll-hidden');\n }\n\n function hideNav() {\n if (!nav.classList.contains('is-open')) {\n nav.classList.add('is-scroll-hidden');\n }\n }\n\n function update() {\n const currentY = Math.max(window.scrollY || 0, 0);\n const delta = currentY - lastY;\n\n if (currentY <= hideAfter) {\n showNav();\n } else if (Math.abs(delta) >= minDelta) {\n if (delta > 0) {\n hideNav();\n } else {\n showNav();\n }\n }\n\n if (backToTop) {\n backToTop.classList.toggle('is-visible', currentY > 520);\n }\n\n lastY = currentY;\n ticking = false;\n }\n\n window.addEventListener('scroll', function () {\n if (!ticking) {\n window.requestAnimationFrame(update);\n ticking = true;\n }\n }, { passive: true });\n\n const menuToggle = nav.querySelector('[data-motion-nav-toggle]');\n if (menuToggle) {\n menuToggle.addEventListener('click', showNav);\n }\n\n if (backToTop) {\n backToTop.addEventListener('click', function () {\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n window.scrollTo({\n top: 0,\n behavior: reduceMotion ? 'auto' : 'smooth'\n });\n showNav();\n });\n }\n\n update();\n}());\n<\/script>\n\n\n<style id=\"submenu-social-arrow-blue-final\">\n\/* Final force override: submenu social icons + arrow stay blue. *\/\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials a,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials a *,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__links a,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__links a *,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__contact,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__contact *,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__arrow,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__arrow * {\n color: #3D6EFF !important;\n -webkit-text-fill-color: #3D6EFF !important;\n}\n\n\/* Social icons that are fill-based. *\/\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials svg,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials svg *,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials path,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__socials circle {\n fill: #3D6EFF !important;\n stroke: #3D6EFF !important;\n color: #3D6EFF !important;\n}\n\n\/* Submenu arrows \/ chevrons that are stroke-based. *\/\nhtml body #reference-menu .motion-nav__drawer svg,\nhtml body #reference-menu .motion-nav__drawer svg path,\nhtml body #reference-menu .motion-nav__drawer svg polyline,\nhtml body #reference-menu .motion-nav__drawer svg line {\n stroke: #3D6EFF !important;\n color: #3D6EFF !important;\n}\n\n\/* If any submenu arrow is implemented as text or pseudo-element. *\/\nhtml body #reference-menu .motion-nav__drawer a::before,\nhtml body #reference-menu .motion-nav__drawer a::after,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__contact::before,\nhtml body #reference-menu .motion-nav__drawer .motion-nav__contact::after {\n color: #3D6EFF !important;\n border-color: #3D6EFF !important;\n}\n<\/style>\n\n\n<style id=\"circle-arrow-centering-final\">\n\/* All circular arrow controls use geometric SVG centering instead of font glyph metrics. *\/\nhtml body .clients__arrow,\nhtml body .websites__arrow,\nhtml body .works-loop__arrow,\nhtml body .testimonial-side-arrow,\nhtml body .back-to-top {\n display: inline-grid !important;\n place-items: center !important;\n padding: 0 !important;\n line-height: 0 !important;\n text-align: center !important;\n}\n\nhtml body .clients__arrow .circle-arrow-icon,\nhtml body .websites__arrow .circle-arrow-icon,\nhtml body .works-loop__arrow .circle-arrow-icon,\nhtml body .testimonial-side-arrow .circle-arrow-icon {\n position: static !important;\n display: block !important;\n width: 20px !important;\n height: 20px !important;\n margin: 0 !important;\n padding: 0 !important;\n transform: none !important;\n overflow: visible !important;\n fill: none !important;\n stroke: currentColor !important;\n stroke-width: 1.8 !important;\n stroke-linecap: round !important;\n stroke-linejoin: round !important;\n pointer-events: none !important;\n}\n\n\/* Prevent inherited text baseline or pseudo-element offsets from affecting the center. *\/\nhtml body .clients__arrow::before,\nhtml body .clients__arrow::after,\nhtml body .websites__arrow::before,\nhtml body .websites__arrow::after,\nhtml body .works-loop__arrow::before,\nhtml body .works-loop__arrow::after,\nhtml body .testimonial-side-arrow::before,\nhtml body .testimonial-side-arrow::after {\n content: none !important;\n display: none !important;\n}\n<\/style>\n\n\n<style id=\"arrow-alignment-corrections-final\">\n\/* Questionnaire: restore the original simple back arrow treatment. *\/\nhtml body .fit-game__back {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: flex-start !important;\n line-height: 1 !important;\n font-family: var(--sans) !important;\n font-size: 28px !important;\n padding: 0 !important;\n}\n\n\/* Back to top: true Lucide ArrowUp, centered optically and geometrically. *\/\nhtml body .back-to-top {\n display: grid !important;\n place-items: center !important;\n padding: 0 !important;\n line-height: 0 !important;\n}\n\nhtml body .back-to-top > svg {\n position: relative !important;\n inset: auto !important;\n display: block !important;\n width: 22px !important;\n height: 22px !important;\n margin: 0 !important;\n transform: translateY(-1px) !important;\n overflow: visible !important;\n fill: none !important;\n stroke: currentColor !important;\n stroke-width: 2 !important;\n stroke-linecap: round !important;\n stroke-linejoin: round !important;\n}\n\n\/* Client carousel controls must never be covered or clipped by the hero above. *\/\nhtml body main > .collaboration-model + .clients {\n position: relative !important;\n z-index: 30 !important;\n overflow: visible !important;\n isolation: isolate !important;\n}\n\nhtml body main > .collaboration-model + .clients .clients__header {\n position: relative !important;\n z-index: 40 !important;\n overflow: visible !important;\n padding-top: 2px !important;\n}\n\nhtml body main > .collaboration-model + .clients .clients__controls {\n position: relative !important;\n z-index: 50 !important;\n overflow: visible !important;\n align-items: center !important;\n}\n\nhtml body main > .collaboration-model + .clients .clients__arrow {\n position: relative !important;\n z-index: 60 !important;\n overflow: visible !important;\n flex: 0 0 auto !important;\n}\n\n\/* Keep only the scrolling logo strip clipped horizontally. *\/\nhtml body main > .collaboration-model + .clients .clients__marquee {\n position: relative !important;\n z-index: 1 !important;\n overflow-x: hidden !important;\n overflow-y: visible !important;\n}\n<\/style>\n\n\n<style id=\"branding-wip-radius-final\">\n\/* Branding WIP uses the same corner radius as the main rounded cards\/folders. *\/\nhtml body .branding-wip__canvas {\n border-radius: clamp(22px, 2.5vw, 30px) !important;\n}\n\n@media (max-width: 520px) {\n html body .branding-wip__canvas {\n border-radius: 22px !important;\n }\n}\n<\/style>\n\n\n<style id=\"analog-photo-lightbox-final\">\n\/* Photo thumbnails clearly signal that a detailed view is available. *\/\nhtml body .analog-gallery__item img,\nhtml body .analog-gallery__item--wide img {\n cursor: zoom-in !important;\n}\n\n\/* Full-screen photo viewer. *\/\n.photo-lightbox {\n position: fixed;\n z-index: 99999;\n inset: 0;\n display: grid;\n grid-template-rows: auto 1fr;\n background: rgba(0, 0, 41, .92);\n -webkit-backdrop-filter: blur(14px);\n backdrop-filter: blur(14px);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity .22s ease, visibility .22s ease;\n}\n\n.photo-lightbox.is-open {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.photo-lightbox__bar {\n position: relative;\n z-index: 3;\n min-height: 72px;\n padding: 14px clamp(16px, 2.4vw, 32px);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n}\n\n.photo-lightbox__button {\n width: 44px;\n height: 44px;\n padding: 0;\n display: grid;\n place-items: center;\n border: 0;\n border-radius: 999px;\n outline: 0;\n background: rgba(255,255,255,.12);\n color: #fff;\n -webkit-backdrop-filter: blur(12px);\n backdrop-filter: blur(12px);\n cursor: pointer;\n transition: background-color .16s ease, transform .16s ease;\n}\n\n.photo-lightbox__button:hover,\n.photo-lightbox__button:focus-visible {\n background: rgba(255,255,255,.22);\n}\n\n.photo-lightbox__button:active {\n transform: scale(.96);\n}\n\n.photo-lightbox__button:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 2px;\n}\n\n.photo-lightbox__button svg {\n width: 20px;\n height: 20px;\n display: block;\n fill: none;\n stroke: currentColor;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.photo-lightbox__stage {\n position: relative;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n touch-action: none;\n cursor: grab;\n user-select: none;\n}\n\n.photo-lightbox__stage.is-dragging {\n cursor: grabbing;\n}\n\n.photo-lightbox__image {\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n max-width: min(92vw, 1800px);\n max-height: calc(100vh - 104px);\n width: auto;\n height: auto;\n transform-origin: center center;\n will-change: transform;\n pointer-events: none;\n -webkit-user-drag: none;\n user-select: none;\n}\n\n.photo-lightbox__hint {\n position: absolute;\n z-index: 2;\n left: 50%;\n bottom: 18px;\n transform: translateX(-50%);\n padding: 8px 12px;\n border-radius: 999px;\n background: rgba(0,0,0,.28);\n color: rgba(255,255,255,.78);\n font-family: var(--sans);\n font-size: 11px;\n font-weight: 500;\n line-height: 1.2;\n letter-spacing: .05em;\n white-space: nowrap;\n pointer-events: none;\n opacity: 1;\n transition: opacity .2s ease;\n}\n\n.photo-lightbox.has-interacted .photo-lightbox__hint {\n opacity: 0;\n}\n\nbody.photo-lightbox-open {\n overflow: hidden !important;\n}\n\n@media (max-width: 620px) {\n .photo-lightbox__bar {\n min-height: 62px;\n padding: 9px 12px;\n }\n\n .photo-lightbox__button {\n width: 42px;\n height: 42px;\n }\n\n .photo-lightbox__image {\n max-width: 94vw;\n max-height: calc(100vh - 88px);\n }\n\n .photo-lightbox__hint {\n bottom: 12px;\n max-width: calc(100vw - 28px);\n white-space: normal;\n text-align: center;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .photo-lightbox,\n .photo-lightbox__button,\n .photo-lightbox__hint {\n transition: none !important;\n }\n}\n<\/style>\n\n<div class=\"photo-lightbox\" data-photo-lightbox aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Powi\u0119kszony podgl\u0105d zdj\u0119cia\">\n <div class=\"photo-lightbox__bar\">\n <button class=\"photo-lightbox__button\" type=\"button\" data-photo-zoom-out aria-label=\"Pomniejsz zdj\u0119cie\" title=\"Pomniejsz\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><\/svg>\n <\/button>\n <button class=\"photo-lightbox__button\" type=\"button\" data-photo-reset aria-label=\"Przywr\u00f3\u0107 rozmiar zdj\u0119cia\" title=\"Reset\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 12a9 9 0 1 0 3-6.7\"><\/path>\n <path d=\"M3 3v6h6\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"photo-lightbox__button\" type=\"button\" data-photo-zoom-in aria-label=\"Powi\u0119ksz zdj\u0119cie\" title=\"Powi\u0119ksz\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 5v14\"><\/path><path d=\"M5 12h14\"><\/path><\/svg>\n <\/button>\n <button class=\"photo-lightbox__button\" type=\"button\" data-photo-close aria-label=\"Zamknij podgl\u0105d\" title=\"Zamknij\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"><\/path><path d=\"m6 6 12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"photo-lightbox__stage\" data-photo-stage>\n <img class=\"photo-lightbox__image\" data-photo-image alt=\"\" draggable=\"false\" \/>\n <div class=\"photo-lightbox__hint\">Powi\u0119ksz i przeci\u0105gnij zdj\u0119cie, aby zobaczy\u0107 detale<\/div>\n <\/div>\n<\/div>\n\n<script id=\"analog-photo-lightbox\">\n(function () {\n 'use strict';\n\n const lightbox = document.querySelector('[data-photo-lightbox]');\n const stage = document.querySelector('[data-photo-stage]');\n const viewerImage = document.querySelector('[data-photo-image]');\n const closeButton = document.querySelector('[data-photo-close]');\n const zoomInButton = document.querySelector('[data-photo-zoom-in]');\n const zoomOutButton = document.querySelector('[data-photo-zoom-out]');\n const resetButton = document.querySelector('[data-photo-reset]');\n const thumbnails = Array.from(document.querySelectorAll('.analog-gallery__item img, .analog-gallery__item--wide img'));\n\n if (!lightbox || !stage || !viewerImage || !thumbnails.length) return;\n\n let scale = 1;\n let x = 0;\n let y = 0;\n let dragging = false;\n let dragStartX = 0;\n let dragStartY = 0;\n let startX = 0;\n let startY = 0;\n let lastFocused = null;\n\n const pointers = new Map();\n let pinchStartDistance = 0;\n let pinchStartScale = 1;\n\n const MIN_SCALE = 1;\n const MAX_SCALE = 6;\n const STEP = .35;\n\n function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n }\n\n function updateTransform() {\n viewerImage.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px)) scale(${scale})`;\n }\n\n function markInteracted() {\n lightbox.classList.add('has-interacted');\n }\n\n function resetView() {\n scale = 1;\n x = 0;\n y = 0;\n updateTransform();\n }\n\n function setScale(nextScale, originX, originY) {\n const previousScale = scale;\n scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);\n\n if (typeof originX === 'number' && typeof originY === 'number' && previousScale !== scale) {\n const rect = stage.getBoundingClientRect();\n const centerX = rect.width \/ 2;\n const centerY = rect.height \/ 2;\n const localX = originX - rect.left - centerX - x;\n const localY = originY - rect.top - centerY - y;\n const ratio = scale \/ previousScale;\n\n x -= localX * (ratio - 1);\n y -= localY * (ratio - 1);\n }\n\n if (scale === 1) {\n x = 0;\n y = 0;\n }\n\n updateTransform();\n markInteracted();\n }\n\n function openLightbox(img) {\n lastFocused = document.activeElement;\n viewerImage.src = img.currentSrc || img.src;\n viewerImage.alt = img.alt || 'Powi\u0119kszone zdj\u0119cie';\n resetView();\n lightbox.classList.remove('has-interacted');\n lightbox.classList.add('is-open');\n lightbox.setAttribute('aria-hidden', 'false');\n document.body.classList.add('photo-lightbox-open');\n closeButton.focus({ preventScroll: true });\n }\n\n function closeLightbox() {\n lightbox.classList.remove('is-open');\n lightbox.setAttribute('aria-hidden', 'true');\n document.body.classList.remove('photo-lightbox-open');\n pointers.clear();\n dragging = false;\n stage.classList.remove('is-dragging');\n\n setTimeout(function () {\n viewerImage.removeAttribute('src');\n }, 220);\n\n if (lastFocused && typeof lastFocused.focus === 'function') {\n lastFocused.focus({ preventScroll: true });\n }\n }\n\n thumbnails.forEach(function (img) {\n img.setAttribute('tabindex', '0');\n img.setAttribute('role', 'button');\n img.setAttribute('aria-label', (img.alt ? img.alt + '. ' : '') + 'Otw\u00f3rz powi\u0119kszony podgl\u0105d');\n\n img.addEventListener('click', function () {\n openLightbox(img);\n });\n\n img.addEventListener('keydown', function (event) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n openLightbox(img);\n }\n });\n });\n\n closeButton.addEventListener('click', closeLightbox);\n\n zoomInButton.addEventListener('click', function () {\n setScale(scale + STEP);\n });\n\n zoomOutButton.addEventListener('click', function () {\n setScale(scale - STEP);\n });\n\n resetButton.addEventListener('click', function () {\n resetView();\n markInteracted();\n });\n\n stage.addEventListener('dblclick', function (event) {\n if (scale > 1) {\n resetView();\n } else {\n setScale(2.25, event.clientX, event.clientY);\n }\n markInteracted();\n });\n\n stage.addEventListener('wheel', function (event) {\n event.preventDefault();\n const delta = event.deltaY < 0 ? STEP : -STEP;\n setScale(scale + delta, event.clientX, event.clientY);\n }, { passive: false });\n\n stage.addEventListener('pointerdown', function (event) {\n stage.setPointerCapture(event.pointerId);\n pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });\n\n if (pointers.size === 1 && scale > 1) {\n dragging = true;\n dragStartX = event.clientX;\n dragStartY = event.clientY;\n startX = x;\n startY = y;\n stage.classList.add('is-dragging');\n }\n\n if (pointers.size === 2) {\n const values = Array.from(pointers.values());\n pinchStartDistance = Math.hypot(values[1].x - values[0].x, values[1].y - values[0].y);\n pinchStartScale = scale;\n dragging = false;\n stage.classList.remove('is-dragging');\n }\n });\n\n stage.addEventListener('pointermove', function (event) {\n if (!pointers.has(event.pointerId)) return;\n pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });\n\n if (pointers.size === 2) {\n const values = Array.from(pointers.values());\n const distance = Math.hypot(values[1].x - values[0].x, values[1].y - values[0].y);\n\n if (pinchStartDistance > 0) {\n setScale(pinchStartScale * (distance \/ pinchStartDistance));\n }\n return;\n }\n\n if (!dragging || scale <= 1) return;\n\n x = startX + (event.clientX - dragStartX);\n y = startY + (event.clientY - dragStartY);\n updateTransform();\n markInteracted();\n });\n\n function releasePointer(event) {\n pointers.delete(event.pointerId);\n\n if (pointers.size < 2) {\n pinchStartDistance = 0;\n }\n\n if (pointers.size === 0) {\n dragging = false;\n stage.classList.remove('is-dragging');\n }\n }\n\n stage.addEventListener('pointerup', releasePointer);\n stage.addEventListener('pointercancel', releasePointer);\n\n lightbox.addEventListener('click', function (event) {\n if (event.target === lightbox) closeLightbox();\n });\n\n document.addEventListener('keydown', function (event) {\n if (!lightbox.classList.contains('is-open')) return;\n\n if (event.key === 'Escape') {\n closeLightbox();\n } else if (event.key === '+' || event.key === '=') {\n setScale(scale + STEP);\n } else if (event.key === '-') {\n setScale(scale - STEP);\n } else if (event.key === '0') {\n resetView();\n markInteracted();\n }\n });\n}());\n<\/script>\n\n\n\n<script id=\"service-strip-mobile-swipe-dots-final\">\n(function () {\n 'use strict';\n\n const root = document.querySelector('[data-service-strip]');\n if (!root) return;\n\n const scroller = root.querySelector('.service-strip__icons');\n if (!scroller || root.querySelector('.service-strip__mobile-dots')) return;\n\n const dots = document.createElement('div');\n dots.className = 'service-strip__mobile-dots';\n dots.setAttribute('aria-hidden', 'true');\n scroller.insertAdjacentElement('afterend', dots);\n\n let dotCount = 0;\n let frame = 0;\n\n function buildDots(count) {\n if (count === dotCount) return;\n dotCount = count;\n dots.replaceChildren();\n\n for (let index = 0; index < count; index += 1) {\n const dot = document.createElement('span');\n dot.className = 'service-strip__mobile-dot';\n dots.appendChild(dot);\n }\n }\n\n function update() {\n frame = 0;\n\n if (window.innerWidth > 720) {\n dots.hidden = true;\n return;\n }\n\n const maxScroll = Math.max(0, scroller.scrollWidth - scroller.clientWidth);\n if (maxScroll <= 2) {\n dots.hidden = true;\n return;\n }\n\n const pages = Math.max(2, Math.ceil(scroller.scrollWidth \/ scroller.clientWidth));\n buildDots(pages);\n dots.hidden = false;\n\n const progress = maxScroll ? scroller.scrollLeft \/ maxScroll : 0;\n const active = Math.max(0, Math.min(pages - 1, Math.round(progress * (pages - 1))));\n\n Array.from(dots.children).forEach(function (dot, index) {\n dot.classList.toggle('is-active', index === active);\n });\n }\n\n function requestUpdate() {\n if (frame) return;\n frame = window.requestAnimationFrame(update);\n }\n\n scroller.addEventListener('scroll', requestUpdate, { passive: true });\n window.addEventListener('resize', requestUpdate, { passive: true });\n window.addEventListener('orientationchange', requestUpdate, { passive: true });\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(requestUpdate);\n observer.observe(scroller);\n }\n\n update();\n}());\n<\/script>\n\n\n\n<style id=\"menu-plus-idle-and-mobile-headline-final\">\n:root {\n --menu-light-blue: #3D6EFF;\n}\n\n\/* Desktop keeps the original headline flow; only mobile gets forced line breaks. *\/\n.mobile-title-break {\n display: none;\n}\n\n\/* Final menu color: menu + drawer\/submenu + utility items. *\/\nhtml body #reference-menu .motion-nav__menu-label,\nhtml body #reference-menu .motion-nav__clock,\nhtml body #reference-menu .motion-nav__eyebrow,\nhtml body #reference-menu .motion-nav__links a,\nhtml body #reference-menu .motion-nav__contact,\nhtml body #reference-menu .motion-nav__socials a,\nhtml body #reference-menu .motion-nav__drawer a,\nhtml body #reference-menu .motion-nav__drawer button {\n color: var(--menu-light-blue) !important;\n -webkit-text-fill-color: var(--menu-light-blue) !important;\n}\n\nhtml body #reference-menu .motion-nav__menu-icon span {\n background: var(--menu-light-blue) !important;\n}\n\nhtml body #reference-menu .motion-nav__drawer svg,\nhtml body #reference-menu .motion-nav__drawer svg *,\nhtml body #reference-menu .motion-nav__socials svg,\nhtml body #reference-menu .motion-nav__socials svg * {\n color: var(--menu-light-blue) !important;\n stroke: var(--menu-light-blue) !important;\n}\n\nhtml body #reference-menu .motion-nav__socials svg path,\nhtml body #reference-menu .motion-nav__socials svg circle {\n fill: var(--menu-light-blue) !important;\n}\n\nhtml body #reference-menu .motion-nav__contact {\n border-color: rgba(61,110,255,.34) !important;\n}\n\n\/* Remove every possible arrow decoration next to the project CTA. *\/\nhtml body #reference-menu .motion-nav__contact span,\nhtml body #reference-menu .motion-nav__contact::before,\nhtml body #reference-menu .motion-nav__contact::after {\n display: none !important;\n content: none !important;\n}\n\n\/*\n Full\/restored state: the complete closed menu is centered.\n The old scroll-away transform is neutralized so it cannot fight the morph.\n*\/\nhtml body header#reference-menu,\nhtml body header#reference-menu.is-scroll-hidden {\n top: 16px !important;\n left: 50% !important;\n right: auto !important;\n width: min(424px, calc(100vw - 32px)) !important;\n max-width: 424px !important;\n transform: translateX(-50%) !important;\n transition:\n left .46s cubic-bezier(.22,1,.36,1),\n width .46s cubic-bezier(.22,1,.36,1),\n max-width .46s cubic-bezier(.22,1,.36,1),\n top .32s ease !important;\n}\n\nhtml body #reference-menu .motion-nav__shell {\n transition:\n width .46s cubic-bezier(.22,1,.36,1),\n height .46s cubic-bezier(.22,1,.36,1),\n min-height .46s cubic-bezier(.22,1,.36,1),\n padding .38s cubic-bezier(.22,1,.36,1),\n border-radius .46s cubic-bezier(.22,1,.36,1),\n background-color .24s ease !important;\n}\n\nhtml body #reference-menu .motion-nav__bar {\n transition:\n min-height .38s cubic-bezier(.22,1,.36,1),\n height .38s cubic-bezier(.22,1,.36,1),\n padding .38s cubic-bezier(.22,1,.36,1),\n border-radius .38s cubic-bezier(.22,1,.36,1) !important;\n}\n\n\/*\n Idle state: the whole centered bar narrows while its center travels to the\n right edge. Because the transform stays constant, the motion is one clean morph.\n*\/\nhtml body header#reference-menu.is-idle-collapsed,\nhtml body header#reference-menu.is-idle-collapsed.is-scroll-hidden {\n left: calc(100% - 40px) !important;\n right: auto !important;\n width: 48px !important;\n max-width: 48px !important;\n transform: translateX(-50%) !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__shell {\n width: 48px !important;\n height: 48px !important;\n min-height: 48px !important;\n padding: 0 !important;\n overflow: hidden !important;\n border-radius: 999px !important;\n background: rgba(255,255,255,.22) !important;\n -webkit-backdrop-filter: blur(18px) saturate(150%) !important;\n backdrop-filter: blur(18px) saturate(150%) !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__bar {\n width: 48px !important;\n height: 48px !important;\n min-height: 48px !important;\n padding: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-radius: 999px !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-button {\n width: 48px !important;\n height: 48px !important;\n min-width: 48px !important;\n min-height: 48px !important;\n padding: 0 !important;\n margin: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 0 !important;\n border: 0 !important;\n border-radius: 999px !important;\n background: transparent !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-label,\nhtml body #reference-menu.is-idle-collapsed .motion-nav__utilities,\nhtml body #reference-menu.is-idle-collapsed .motion-nav__drawer {\n display: none !important;\n}\n\n\/* Convert the existing two-line menu glyph into a plus without extra markup. *\/\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-icon {\n position: relative !important;\n display: block !important;\n width: 20px !important;\n height: 20px !important;\n margin: 0 !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-icon span {\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n width: 18px !important;\n height: 2px !important;\n margin: 0 !important;\n border-radius: 999px !important;\n opacity: 1 !important;\n background: var(--menu-light-blue) !important;\n transform-origin: 50% 50% !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-icon span:first-child {\n transform: translate(-50%, -50%) rotate(0deg) !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-icon span:last-child {\n transform: translate(-50%, -50%) rotate(90deg) !important;\n}\n\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-button:hover,\nhtml body #reference-menu.is-idle-collapsed .motion-nav__menu-button:focus-visible {\n background: rgba(255,255,255,.34) !important;\n}\n\n@media (max-width: 720px) {\n \/* Requested exact mobile headline composition. *\/\n .mobile-title-break {\n display: block !important;\n }\n\n body main#main-content > .landing-hero .landing-hero__title {\n max-width: none !important;\n text-wrap: nowrap !important;\n }\n\n \/* Full mobile bar stays centered. *\/\n html body header#reference-menu,\n html body header#reference-menu.is-scroll-hidden {\n top: 8px !important;\n left: 50% !important;\n right: auto !important;\n width: calc(100vw - 24px) !important;\n max-width: 420px !important;\n transform: translateX(-50%) !important;\n }\n\n \/* Plus finishes 12px from the right edge. *\/\n html body header#reference-menu.is-idle-collapsed,\n html body header#reference-menu.is-idle-collapsed.is-scroll-hidden {\n top: 12px !important;\n left: calc(100% - 35px) !important;\n right: auto !important;\n width: 46px !important;\n max-width: 46px !important;\n transform: translateX(-50%) !important;\n }\n\n html body #reference-menu.is-idle-collapsed .motion-nav__shell,\n html body #reference-menu.is-idle-collapsed .motion-nav__bar,\n html body #reference-menu.is-idle-collapsed .motion-nav__menu-button {\n width: 46px !important;\n height: 46px !important;\n min-width: 46px !important;\n min-height: 46px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n html body header#reference-menu,\n html body #reference-menu .motion-nav__shell,\n html body #reference-menu .motion-nav__bar {\n transition: none !important;\n }\n}\n<\/style>\n\n<script id=\"menu-plus-idle-controller-final\">\n(function () {\n 'use strict';\n\n const nav = document.getElementById('reference-menu');\n if (!nav) return;\n\n const toggle = nav.querySelector('[data-motion-nav-toggle]');\n const label = nav.querySelector('[data-motion-nav-label]');\n const drawer = nav.querySelector('[data-motion-nav-drawer]');\n if (!toggle || !drawer) return;\n\n const IDLE_DELAY = 4500;\n let idleTimer = 0;\n\n function setAccessibleLabel() {\n if (nav.classList.contains('is-idle-collapsed')) {\n toggle.setAttribute('aria-label', 'Rozwi\u0144 menu');\n } else if (nav.classList.contains('is-open')) {\n toggle.setAttribute('aria-label', 'Zamknij menu');\n } else {\n toggle.setAttribute('aria-label', 'Otw\u00f3rz menu');\n }\n }\n\n function forceCloseDrawer() {\n nav.classList.remove('is-open');\n toggle.setAttribute('aria-expanded', 'false');\n if (label) label.textContent = 'Menu';\n drawer.inert = true;\n }\n\n function collapseToPlus() {\n \/* Do not steal keyboard focus from a user actively navigating drawer links. *\/\n if (drawer.contains(document.activeElement) && document.activeElement !== toggle) {\n scheduleCollapse();\n return;\n }\n\n forceCloseDrawer();\n nav.classList.add('is-idle-collapsed');\n nav.classList.remove('is-scroll-hidden');\n setAccessibleLabel();\n }\n\n function expandFromPlus() {\n \/* Plus restores the centered CLOSED bar first; it does not open the drawer. *\/\n forceCloseDrawer();\n nav.classList.remove('is-idle-collapsed');\n nav.classList.remove('is-scroll-hidden');\n setAccessibleLabel();\n }\n\n function scheduleCollapse(delay) {\n window.clearTimeout(idleTimer);\n idleTimer = window.setTimeout(\n collapseToPlus,\n typeof delay === 'number' ? delay : IDLE_DELAY\n );\n }\n\n \/* Start as the normal centered, unopened menu, then collapse after inactivity. *\/\n forceCloseDrawer();\n nav.classList.remove('is-idle-collapsed');\n nav.classList.remove('is-scroll-hidden');\n setAccessibleLabel();\n scheduleCollapse();\n\n \/*\n Capture phase is intentional: while the control is a plus, stop the old menu\n click handler from opening the drawer. The first click only restores the bar.\n *\/\n toggle.addEventListener('click', function (event) {\n if (!nav.classList.contains('is-idle-collapsed')) return;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n expandFromPlus();\n scheduleCollapse();\n }, true);\n\n \/* Normal Menu click still uses the original drawer logic. *\/\n toggle.addEventListener('click', function () {\n setAccessibleLabel();\n scheduleCollapse();\n });\n\n nav.addEventListener('pointermove', function () {\n if (!nav.classList.contains('is-idle-collapsed')) scheduleCollapse();\n }, { passive: true });\n\n nav.addEventListener('pointerleave', function () {\n if (!nav.classList.contains('is-idle-collapsed')) scheduleCollapse();\n }, { passive: true });\n\n nav.addEventListener('focusin', function () {\n window.clearTimeout(idleTimer);\n setAccessibleLabel();\n });\n\n nav.addEventListener('focusout', function () {\n if (!nav.classList.contains('is-idle-collapsed')) scheduleCollapse();\n });\n\n nav.querySelectorAll('a').forEach(function (link) {\n link.addEventListener('click', function () {\n scheduleCollapse(700);\n });\n });\n\n document.addEventListener('pointerdown', function (event) {\n if (!nav.contains(event.target) && !nav.classList.contains('is-idle-collapsed')) {\n scheduleCollapse(900);\n }\n }, { passive: true });\n\n window.addEventListener('scroll', function () {\n \/* Never let the legacy scroll script move this menu offscreen. *\/\n nav.classList.remove('is-scroll-hidden');\n if (!nav.classList.contains('is-idle-collapsed')) scheduleCollapse();\n }, { passive: true });\n}());\n<\/script>\n\n<style id=\"hero-mixed-serif-sans-final\">\n\/* Main hero: modern sans-serif statement + editorial serif accent. *\/\nhtml body main#main-content > .landing-hero .landing-hero__title {\n font-family: var(--inter) !important;\n font-style: normal !important;\n font-weight: 600 !important;\n letter-spacing: -.055em !important;\n}\n\nhtml body main#main-content > .landing-hero .landing-hero__title em {\n font-family: var(--serif) !important;\n font-style: italic !important;\n font-weight: 400 !important;\n letter-spacing: -.065em !important;\n}\n\n@media (max-width: 720px) {\n html body main#main-content > .landing-hero .landing-hero__title {\n font-weight: 600 !important;\n letter-spacing: -.05em !important;\n }\n\n html body main#main-content > .landing-hero .landing-hero__title em {\n font-weight: 400 !important;\n letter-spacing: -.06em !important;\n }\n}\n<\/style>\n\n\n<script id=\"liquid-glass-nav-pro-controller\">\n(function () {\n 'use strict';\n\n const header = document.querySelector('[data-liquid-glass-nav]');\n if (!header) return;\n\n const glass = header.querySelector('.liquid-nav__glass');\n const items = Array.from(header.querySelectorAll('[data-liquid-nav-item]'));\n const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n if (!glass || !items.length) return;\n\n const targets = items.map(function (item) {\n const id = item.getAttribute('href');\n return id && id.charAt(0) === '#' ? document.querySelector(id) : null;\n });\n\n let activeIndex = 0;\n let raf = 0;\n\n function paintIndicator(index) {\n glass.style.setProperty('--active-index', String(index));\n }\n\n function setActive(index) {\n if (index < 0 || index >= items.length) return;\n activeIndex = index;\n paintIndicator(index);\n\n items.forEach(function (item, i) {\n const active = i === index;\n item.classList.toggle('is-active', active);\n if (active) item.setAttribute('aria-current', 'page');\n else item.removeAttribute('aria-current');\n });\n }\n\n function readOpaqueBackground(element) {\n let node = element;\n while (node && node !== document.documentElement) {\n const style = window.getComputedStyle(node);\n const color = style.backgroundColor;\n const match = color && color.match(\/rgba?\\(([^)]+)\\)\/);\n if (match) {\n const parts = match[1].split(',').map(function (part) { return parseFloat(part); });\n const alpha = parts.length > 3 ? parts[3] : 1;\n if (alpha > .2) return parts.slice(0, 3);\n }\n\n \/* Gradients are common in the hero. When the base color is transparent,\n use the first painted gradient color as a practical contrast cue. *\/\n if (style.backgroundImage && style.backgroundImage !== 'none') {\n const gradientColor = style.backgroundImage.match(\/rgba?\\(([^)]+)\\)\/);\n if (gradientColor) {\n const gradientParts = gradientColor[1].split(',').map(function (part) { return parseFloat(part); });\n return gradientParts.slice(0, 3);\n }\n }\n node = node.parentElement;\n }\n return [255, 255, 255];\n }\n\n function updateAdaptiveTone() {\n const rect = header.getBoundingClientRect();\n const x = Math.max(0, Math.min(window.innerWidth - 1, rect.left + rect.width \/ 2));\n const y = Math.max(0, Math.min(window.innerHeight - 1, rect.bottom + 8));\n const under = document.elementFromPoint(x, y);\n const rgb = readOpaqueBackground(under);\n const luminance = (rgb[0] * .2126 + rgb[1] * .7152 + rgb[2] * .0722) \/ 255;\n header.classList.toggle('is-on-dark', luminance < .56);\n }\n\n function detectActiveSection() {\n raf = 0;\n updateAdaptiveTone();\n const probe = window.scrollY + Math.min(window.innerHeight * .36, 320);\n let best = 0;\n\n targets.forEach(function (target, index) {\n if (!target) return;\n const top = target.getBoundingClientRect().top + window.scrollY;\n if (top <= probe) best = index;\n });\n\n \/* Contact wins near the bottom even if its heading starts late. *\/\n if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 80) {\n best = items.length - 1;\n }\n\n setActive(best);\n }\n\n function requestSectionCheck() {\n if (raf) return;\n raf = window.requestAnimationFrame(detectActiveSection);\n }\n\n items.forEach(function (item, index) {\n item.addEventListener('pointerenter', function () {\n paintIndicator(index);\n });\n\n item.addEventListener('pointerleave', function () {\n paintIndicator(activeIndex);\n });\n\n item.addEventListener('focus', function () {\n paintIndicator(index);\n });\n\n item.addEventListener('blur', function () {\n paintIndicator(activeIndex);\n });\n\n item.addEventListener('click', function (event) {\n const target = targets[index];\n if (!target) return;\n event.preventDefault();\n setActive(index);\n target.scrollIntoView({\n behavior: reducedMotion.matches ? 'auto' : 'smooth',\n block: 'start'\n });\n if (history.replaceState) history.replaceState(null, '', item.getAttribute('href'));\n });\n\n item.addEventListener('keydown', function (event) {\n let next = null;\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % items.length;\n if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + items.length) % items.length;\n if (event.key === 'Home') next = 0;\n if (event.key === 'End') next = items.length - 1;\n if (next === null) return;\n event.preventDefault();\n items[next].focus();\n });\n });\n\n glass.addEventListener('pointermove', function (event) {\n const rect = glass.getBoundingClientRect();\n const x = ((event.clientX - rect.left) \/ rect.width) * 100;\n const y = ((event.clientY - rect.top) \/ rect.height) * 100;\n glass.style.setProperty('--glow-x', x.toFixed(1) + '%');\n glass.style.setProperty('--glow-y', y.toFixed(1) + '%');\n }, { passive: true });\n\n glass.addEventListener('pointerleave', function () {\n glass.style.setProperty('--glow-x', '50%');\n glass.style.setProperty('--glow-y', '0%');\n paintIndicator(activeIndex);\n }, { passive: true });\n\n window.addEventListener('scroll', requestSectionCheck, { passive: true });\n window.addEventListener('resize', requestSectionCheck, { passive: true });\n window.addEventListener('hashchange', requestSectionCheck);\n\n detectActiveSection();\n}());\n<\/script>\n\n\n<style id=\"top-nav-social-divider-and-selected-work-final\">\n\/* Top navigation: one glass capsule. Social links are separated only by a quiet vertical rule. *\/\nbody .liquid-nav {\n width: min(372px, calc(100vw - 24px)) !important;\n}\n\nbody .liquid-nav__row {\n width: 100%;\n height: 54px;\n display: flex;\n align-items: stretch;\n gap: 0 !important;\n padding: 4px;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,.30);\n border-radius: 999px;\n background: rgba(255,255,255,.055);\n -webkit-backdrop-filter: blur(14px) saturate(118%);\n backdrop-filter: blur(14px) saturate(118%);\n}\n\nbody .liquid-nav__glass {\n position: relative;\n flex: 1 1 auto;\n width: auto !important;\n height: 46px !important;\n min-width: 0;\n padding: 0 !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n border: 0 !important;\n border-radius: 999px 0 0 999px !important;\n background: transparent !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n overflow: hidden;\n}\n\nbody .liquid-nav__indicator {\n top: 0 !important;\n left: 0 !important;\n width: 25% !important;\n height: 100% !important;\n}\n\nbody .liquid-nav__socials {\n position: relative;\n flex: 0 0 96px !important;\n height: 46px !important;\n padding: 0 0 0 9px !important;\n margin: 0 0 0 9px !important;\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: stretch;\n border: 0 !important;\n border-left: 1px solid rgba(0,59,243,.16) !important;\n border-radius: 0 !important;\n background: transparent !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\n\nbody .liquid-nav.is-on-dark .liquid-nav__socials {\n border-left-color: rgba(255,255,255,.22) !important;\n}\n\nbody .liquid-nav__social {\n min-height: 46px !important;\n}\n\n\/* Portfolio as one interactive chapter, using the same label, line and spacing system as the rest of the page. *\/\nbody main > .selected-work-controller {\n margin-top: var(--section-rhythm) !important;\n margin-bottom: 0 !important;\n}\n\nbody .selected-work-controller__header {\n width: 100%;\n display: grid;\n gap: 24px;\n}\n\nbody .selected-work-controller__eyebrow {\n margin: 0 !important;\n text-align: left !important;\n}\n\nbody .selected-work-tabs {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n width: 100%;\n border-top: 1px solid var(--line);\n border-bottom: 1px solid var(--line);\n}\n\nbody .selected-work-tab {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n min-width: 0;\n min-height: 58px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: 0;\n border-right: 1px solid var(--line);\n background: transparent;\n color: var(--muted);\n padding: 14px 18px;\n margin: 0;\n font-family: var(--sans);\n font-size: var(--type-body);\n font-weight: 500;\n line-height: 1.3;\n letter-spacing: -.01em;\n text-align: left;\n cursor: pointer;\n transition: color .18s ease, background-color .18s ease;\n}\n\nbody .selected-work-tab:last-child {\n border-right: 0;\n}\n\nbody .selected-work-tab::after {\n content: \"\";\n position: absolute;\n left: 18px;\n right: 18px;\n bottom: -1px;\n height: 1px;\n background: transparent;\n transform: scaleX(0);\n transform-origin: left center;\n transition: transform .22s ease, background-color .22s ease;\n}\n\nbody .selected-work-tab:hover,\nbody .selected-work-tab:focus-visible,\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n color: var(--text);\n}\n\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n color: #003BF3;\n}\n\nbody .selected-work-tab.is-active::after,\nbody .selected-work-tab[aria-selected=\"true\"]::after {\n background: #003BF3;\n transform: scaleX(1);\n}\n\nbody .selected-work-tab:focus-visible {\n outline: 1px solid #003BF3;\n outline-offset: -1px;\n}\n\nbody main > .selected-work-panel {\n margin-top: clamp(42px, 4vw, 64px) !important;\n margin-bottom: 0 !important;\n opacity: 1;\n transform: translateY(0);\n will-change: opacity, transform;\n}\n\nbody main > .selected-work-panel[hidden] {\n display: none !important;\n}\n\n\/* Keep the active portfolio panel visually attached to the controller. *\/\nbody main > .selected-work-controller + .selected-work-panel,\nbody main > .selected-work-controller ~ .selected-work-panel:not([hidden]) {\n margin-top: clamp(42px, 4vw, 64px) !important;\n}\n\n\/* The next page chapter keeps the normal global rhythm. *\/\nbody main > .selected-work-panel:not([hidden]) + .problems-section,\nbody main > .selected-work-panel[hidden] + .problems-section {\n margin-top: var(--section-rhythm) !important;\n}\n\n@media (max-width: 720px) {\n body .liquid-nav {\n width: min(348px, calc(100vw - 20px)) !important;\n }\n\n body .liquid-nav__row {\n height: 50px;\n }\n\n body .liquid-nav__glass,\n body .liquid-nav__socials {\n height: 42px !important;\n }\n\n body .liquid-nav__socials {\n flex-basis: 88px !important;\n margin-left: 7px !important;\n padding-left: 7px !important;\n }\n\n body .liquid-nav__social {\n min-height: 42px !important;\n }\n\n body .selected-work-controller__header {\n gap: 18px;\n }\n\n body .selected-work-tabs {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n body .selected-work-tab {\n min-height: 52px;\n padding: 12px 14px;\n font-size: var(--type-caption);\n }\n\n body .selected-work-tab:nth-child(2) {\n border-right: 0;\n }\n\n body .selected-work-tab:nth-child(-n + 2) {\n border-bottom: 1px solid var(--line);\n }\n\n body .selected-work-tab::after {\n left: 14px;\n right: 14px;\n }\n\n body main > .selected-work-panel,\n body main > .selected-work-controller + .selected-work-panel,\n body main > .selected-work-controller ~ .selected-work-panel:not([hidden]) {\n margin-top: 34px !important;\n }\n}\n\n@media (max-width: 380px) {\n body .liquid-nav {\n width: calc(100vw - 16px) !important;\n }\n\n body .liquid-nav__socials {\n flex-basis: 82px !important;\n margin-left: 6px !important;\n padding-left: 6px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .selected-work-tab,\n body .selected-work-tab::after {\n transition: none !important;\n }\n}\n<\/style>\n\n<style id=\"selected-work-editorial-tabs-v10\">\n\/* Selected work: quiet editorial filter integrated with the site's existing hierarchy. *\/\nbody main > .selected-work-controller {\n margin-top: var(--section-rhythm) !important;\n margin-bottom: 0 !important;\n}\n\nbody .selected-work-controller__header {\n width: 100%;\n display: flex !important;\n align-items: flex-end !important;\n justify-content: space-between !important;\n gap: clamp(24px, 4vw, 64px) !important;\n padding-bottom: 14px;\n border-bottom: 1px solid var(--line);\n}\n\nbody .selected-work-controller__eyebrow {\n flex: 0 0 auto;\n margin: 0 !important;\n padding: 0 0 8px !important;\n text-align: left !important;\n}\n\nbody .selected-work-tabs {\n width: auto !important;\n min-width: 0;\n display: inline-flex !important;\n align-items: flex-end;\n justify-content: flex-end;\n gap: clamp(18px, 2.4vw, 34px);\n border: 0 !important;\n overflow: visible;\n}\n\nbody .selected-work-tab {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: auto !important;\n min-width: 0;\n min-height: 0 !important;\n display: inline-flex !important;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n border: 0 !important;\n background: transparent !important;\n color: var(--soft) !important;\n padding: 0 0 8px !important;\n margin: 0;\n font-family: var(--sans);\n font-size: var(--type-caption) !important;\n font-weight: 500 !important;\n line-height: 1.35;\n letter-spacing: .01em !important;\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n transition: color .18s ease, opacity .18s ease !important;\n}\n\nbody .selected-work-tab::after {\n content: \"\";\n position: absolute;\n left: 0 !important;\n right: auto !important;\n bottom: 0 !important;\n width: 100%;\n height: 1px !important;\n background: currentColor !important;\n transform: scaleX(0) !important;\n transform-origin: left center;\n opacity: .9;\n transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;\n}\n\nbody .selected-work-tab:hover,\nbody .selected-work-tab:focus-visible {\n color: var(--muted) !important;\n}\n\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n color: var(--text) !important;\n}\n\nbody .selected-work-tab.is-active::after,\nbody .selected-work-tab[aria-selected=\"true\"]::after {\n transform: scaleX(1) !important;\n}\n\nbody .selected-work-tab:focus-visible {\n outline: 0 !important;\n}\n\n\/* With category navigation above, panel-internal headings are intentionally removed. *\/\nbody main > .selected-work-panel {\n margin-top: clamp(30px, 3.4vw, 48px) !important;\n}\n\nbody .websites__header {\n justify-content: flex-end !important;\n align-items: center !important;\n min-height: 42px;\n margin-bottom: 18px !important;\n}\n\nbody .works-loop__header {\n justify-content: flex-end !important;\n align-items: center !important;\n min-height: 24px;\n margin-bottom: 18px !important;\n}\n\nbody .analog-gallery__grid,\nbody .branding-wip__canvas {\n margin-top: 0 !important;\n}\n\n@media (max-width: 900px) {\n body .selected-work-controller__header {\n display: grid !important;\n grid-template-columns: 1fr;\n align-items: start !important;\n gap: 12px !important;\n padding-bottom: 0;\n border-bottom: 0;\n }\n\n body .selected-work-controller__eyebrow {\n padding-bottom: 0 !important;\n }\n\n body .selected-work-tabs {\n width: 100% !important;\n justify-content: flex-start;\n gap: 22px;\n padding: 0 0 10px;\n border-bottom: 1px solid var(--line) !important;\n overflow-x: auto !important;\n overflow-y: hidden;\n overscroll-behavior-inline: contain;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n body .selected-work-tabs::-webkit-scrollbar {\n display: none;\n }\n\n body .selected-work-tab {\n font-size: var(--type-caption) !important;\n padding-bottom: 9px !important;\n }\n\n body main > .selected-work-panel,\n body main > .selected-work-controller + .selected-work-panel,\n body main > .selected-work-controller ~ .selected-work-panel:not([hidden]) {\n margin-top: 28px !important;\n }\n}\n\n@media (max-width: 520px) {\n body .selected-work-tabs {\n gap: 20px;\n }\n\n body .websites__header,\n body .works-loop__header {\n margin-bottom: 14px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .selected-work-tab,\n body .selected-work-tab::after {\n transition: none !important;\n }\n}\n<\/style>\n\n<script id=\"selected-work-tabs-controller\">\n(function () {\n 'use strict';\n\n const controller = document.querySelector('[data-selected-work]');\n if (!controller) return;\n\n const tabs = Array.from(controller.querySelectorAll('[data-selected-work-tab]'));\n const panels = Array.from(document.querySelectorAll('[data-selected-work-panel]'));\n if (!tabs.length || !panels.length) return;\n\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n let transitionToken = 0;\n\n function panelFor(key) {\n return panels.find(function (panel) {\n return panel.getAttribute('data-selected-work-panel') === key;\n });\n }\n\n function setTabs(key, focusTab) {\n tabs.forEach(function (tab) {\n const active = tab.getAttribute('data-selected-work-tab') === key;\n tab.classList.toggle('is-active', active);\n tab.setAttribute('aria-selected', active ? 'true' : 'false');\n tab.setAttribute('tabindex', active ? '0' : '-1');\n if (active && focusTab) tab.focus({ preventScroll: true });\n });\n }\n\n function showImmediately(key) {\n setTabs(key, false);\n panels.forEach(function (panel) {\n const active = panel.getAttribute('data-selected-work-panel') === key;\n panel.hidden = !active;\n panel.classList.toggle('is-active', active);\n panel.setAttribute('aria-hidden', active ? 'false' : 'true');\n });\n window.requestAnimationFrame(function () {\n window.dispatchEvent(new Event('resize'));\n });\n }\n\n async function activate(key, focusTab) {\n const target = panelFor(key);\n if (!target) return;\n\n const current = panels.find(function (panel) { return !panel.hidden; });\n setTabs(key, focusTab);\n\n if (current === target) return;\n\n const token = ++transitionToken;\n\n if (reduceMotion.matches) {\n if (current) {\n current.hidden = true;\n current.classList.remove('is-active');\n current.setAttribute('aria-hidden', 'true');\n }\n target.hidden = false;\n target.classList.add('is-active');\n target.setAttribute('aria-hidden', 'false');\n window.dispatchEvent(new Event('resize'));\n return;\n }\n\n if (current) {\n current.setAttribute('aria-hidden', 'true');\n const out = current.animate(\n [\n { opacity: 1, transform: 'translateY(0)' },\n { opacity: 0, transform: 'translateY(-10px)' }\n ],\n {\n duration: 170,\n easing: 'cubic-bezier(.4,0,.2,1)',\n fill: 'forwards'\n }\n );\n try { await out.finished; } catch (e) {}\n if (token !== transitionToken) return;\n out.cancel();\n current.hidden = true;\n current.classList.remove('is-active');\n }\n\n target.hidden = false;\n target.classList.add('is-active');\n target.setAttribute('aria-hidden', 'false');\n\n const incoming = target.animate(\n [\n { opacity: 0, transform: 'translateY(12px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ],\n {\n duration: 260,\n easing: 'cubic-bezier(.2,.8,.2,1)',\n fill: 'both'\n }\n );\n try { await incoming.finished; } catch (e) {}\n if (token !== transitionToken) return;\n incoming.cancel();\n\n window.requestAnimationFrame(function () {\n window.dispatchEvent(new Event('resize'));\n });\n }\n\n tabs.forEach(function (tab, index) {\n tab.addEventListener('click', function () {\n activate(tab.getAttribute('data-selected-work-tab'), false);\n });\n\n tab.addEventListener('keydown', function (event) {\n if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n let next = index;\n if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;\n if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;\n if (event.key === 'Home') next = 0;\n if (event.key === 'End') next = tabs.length - 1;\n activate(tabs[next].getAttribute('data-selected-work-tab'), true);\n });\n });\n\n showImmediately('video');\n})();\n<\/script>\n\n\n<script id=\"hero-first-paint-ready\">\n(function () {\n var reveal = function () {\n document.documentElement.classList.add('hero-orbit-ready');\n };\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function () {\n requestAnimationFrame(reveal);\n }, { once: true });\n } else {\n requestAnimationFrame(reveal);\n }\n}());\n<\/script>\n\n\n<style id=\"selected-work-tabs-v12-large-responsive\">\n\/* Portfolio filters: larger editorial navigation, aligned with the site's section rhythm. *\/\nbody .selected-work-controller__header {\n display: grid !important;\n grid-template-columns: 1fr !important;\n align-items: start !important;\n justify-content: stretch !important;\n gap: clamp(26px, 3vw, 38px) !important;\n padding-bottom: 0 !important;\n border-bottom: 0 !important;\n}\n\nbody .selected-work-controller__eyebrow {\n margin: 0 !important;\n padding: 0 !important;\n}\n\nbody .selected-work-tabs {\n width: 100% !important;\n display: grid !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n gap: 0 !important;\n padding: 0 !important;\n overflow: visible !important;\n border-top: 1px solid var(--line) !important;\n border-bottom: 1px solid var(--line) !important;\n}\n\nbody .selected-work-tab {\n position: relative !important;\n width: 100% !important;\n min-width: 0 !important;\n min-height: clamp(82px, 7vw, 104px) !important;\n display: flex !important;\n align-items: center !important;\n justify-content: flex-start !important;\n padding: 18px clamp(14px, 1.5vw, 22px) !important;\n border: 0 !important;\n border-right: 1px solid var(--line) !important;\n background: transparent !important;\n color: var(--muted) !important;\n font-family: var(--sans) !important;\n font-size: clamp(20px, 1.75vw, 28px) !important;\n font-weight: 400 !important;\n line-height: 1.08 !important;\n letter-spacing: -.035em !important;\n text-align: left !important;\n white-space: normal !important;\n overflow-wrap: normal !important;\n cursor: pointer !important;\n transition: color .22s ease, background-color .22s ease !important;\n}\n\nbody .selected-work-tab:last-child {\n border-right: 0 !important;\n}\n\nbody .selected-work-tab::after {\n content: \"\" !important;\n position: absolute !important;\n left: clamp(14px, 1.5vw, 22px) !important;\n right: clamp(14px, 1.5vw, 22px) !important;\n bottom: -1px !important;\n width: auto !important;\n height: 2px !important;\n background: #003BF3 !important;\n transform: scaleX(0) !important;\n transform-origin: left center !important;\n opacity: 1 !important;\n transition: transform .25s cubic-bezier(.2,.8,.2,1) !important;\n}\n\nbody .selected-work-tab:hover,\nbody .selected-work-tab:focus-visible {\n color: var(--text) !important;\n}\n\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n color: #003BF3 !important;\n}\n\nbody .selected-work-tab.is-active::after,\nbody .selected-work-tab[aria-selected=\"true\"]::after {\n transform: scaleX(1) !important;\n}\n\nbody .selected-work-tab:focus-visible {\n outline: 0 !important;\n}\n\nbody main > .selected-work-panel,\nbody main > .selected-work-controller + .selected-work-panel,\nbody main > .selected-work-controller ~ .selected-work-panel:not([hidden]) {\n margin-top: clamp(34px, 4vw, 56px) !important;\n}\n\n@media (max-width: 720px) {\n body .selected-work-controller__header {\n gap: 22px !important;\n }\n\n body .selected-work-tabs {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n overflow: visible !important;\n border-bottom: 1px solid var(--line) !important;\n }\n\n body .selected-work-tab {\n min-height: 82px !important;\n padding: 15px 14px !important;\n font-size: clamp(19px, 5.4vw, 23px) !important;\n line-height: 1.08 !important;\n }\n\n body .selected-work-tab:nth-child(2n) {\n border-right: 0 !important;\n }\n\n body .selected-work-tab:nth-child(-n + 2) {\n border-bottom: 1px solid var(--line) !important;\n }\n\n body .selected-work-tab::after {\n left: 14px !important;\n right: 14px !important;\n }\n\n body main > .selected-work-panel,\n body main > .selected-work-controller + .selected-work-panel,\n body main > .selected-work-controller ~ .selected-work-panel:not([hidden]) {\n margin-top: 32px !important;\n }\n}\n\n@media (max-width: 380px) {\n body .selected-work-tab {\n min-height: 78px !important;\n padding: 13px 12px !important;\n font-size: 18px !important;\n }\n\n body .selected-work-tab::after {\n left: 12px !important;\n right: 12px !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .selected-work-tab,\n body .selected-work-tab::after {\n transition: none !important;\n }\n}\n<\/style>\n\n<style id=\"selected-work-hero-buttons-and-websites-mobile-grid-v13\">\n\/* Portfolio category filters use the same pill-button language as the hero CTAs. *\/\nbody .selected-work-controller__header {\n gap: clamp(22px, 2.6vw, 32px) !important;\n}\n\nbody .selected-work-tabs {\n width: 100% !important;\n display: flex !important;\n flex-wrap: wrap !important;\n align-items: stretch !important;\n justify-content: flex-start !important;\n gap: 10px !important;\n padding: 0 !important;\n border: 0 !important;\n overflow: visible !important;\n}\n\nbody .selected-work-tab {\n position: relative !important;\n width: auto !important;\n min-width: 0 !important;\n min-height: 48px !important;\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n padding: 12px 22px !important;\n border: 1px solid #BABABA !important;\n border-radius: 999px !important;\n background: #FCFCFD !important;\n color: #000051 !important;\n font-family: var(--sans) !important;\n font-size: 12px !important;\n font-weight: 600 !important;\n line-height: 1.2 !important;\n letter-spacing: .01em !important;\n text-align: center !important;\n white-space: normal !important;\n cursor: pointer !important;\n transform: none !important;\n transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease !important;\n}\n\nbody .selected-work-tab::after {\n content: none !important;\n display: none !important;\n}\n\nbody .selected-work-tab:hover,\nbody .selected-work-tab:focus-visible {\n background: #DCDEE2 !important;\n border-color: #000051 !important;\n color: #000051 !important;\n transform: translateY(-1px) !important;\n}\n\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n background: #003BF3 !important;\n border-color: #003BF3 !important;\n color: #fff !important;\n}\n\nbody .selected-work-tab.is-active:hover,\nbody .selected-work-tab[aria-selected=\"true\"]:hover,\nbody .selected-work-tab.is-active:focus-visible,\nbody .selected-work-tab[aria-selected=\"true\"]:focus-visible {\n background: #000051 !important;\n border-color: #000051 !important;\n color: #fff !important;\n}\n\nbody .selected-work-tab:focus-visible {\n outline: 2px solid #000051 !important;\n outline-offset: 3px !important;\n}\n\n\/* Website portfolio: mobile is a fixed two-column grid, not a swipe carousel. *\/\n@media (max-width: 720px) {\n body .selected-work-tabs {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 10px !important;\n }\n\n body .selected-work-tab {\n width: 100% !important;\n min-height: 48px !important;\n padding: 11px 12px !important;\n }\n\n body .websites .websites__links {\n display: grid !important;\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n align-items: stretch !important;\n gap: 10px !important;\n width: 100% !important;\n max-width: none !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: visible !important;\n scroll-snap-type: none !important;\n scroll-behavior: auto !important;\n touch-action: auto !important;\n cursor: default !important;\n }\n\n body .websites .website-link,\n body .websites .website-link--preview {\n width: 100% !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: none !important;\n justify-self: stretch !important;\n aspect-ratio: .78 !important;\n border-radius: 16px !important;\n scroll-snap-align: none !important;\n scroll-snap-stop: normal !important;\n }\n\n body .websites .website-link::before {\n border-radius: 16px !important;\n }\n\n body .websites .website-link::after {\n border-radius: 16px 16px 18px 0 !important;\n }\n\n body .websites .website-link__preview {\n top: 7px !important;\n right: 7px !important;\n left: 7px !important;\n width: calc(100% - 14px) !important;\n border-radius: 11px !important;\n }\n\n body .websites .website-link__number {\n left: 12px !important;\n font-size: clamp(32px, 10vw, 44px) !important;\n }\n\n body .websites .website-link__arrow {\n right: 11px !important;\n width: 20px !important;\n height: 20px !important;\n font-size: 18px !important;\n }\n\n body .websites .website-link__content {\n left: 12px !important;\n right: 12px !important;\n bottom: 12px !important;\n gap: 4px !important;\n }\n\n body .websites .website-link__name {\n font-size: clamp(12px, 3.8vw, 15px) !important;\n line-height: 1.1 !important;\n }\n\n body .websites .website-link__description {\n font-size: 10px !important;\n line-height: 1.28 !important;\n -webkit-line-clamp: 2 !important;\n }\n}\n\n@media (max-width: 380px) {\n body .selected-work-tabs {\n gap: 8px !important;\n }\n\n body .selected-work-tab {\n min-height: 46px !important;\n padding: 10px 9px !important;\n font-size: 11px !important;\n }\n\n body .websites .websites__links {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n gap: 8px !important;\n }\n\n body .websites .website-link__description {\n display: none !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .selected-work-tab {\n transition: none !important;\n }\n}\n<\/style>\n\n\n<style id=\"selected-work-header-right-borderless-v14\">\n\/* Portfolio controller: section label left, category controls right. *\/\n@media (min-width: 901px) {\n body .selected-work-controller__header {\n display: grid !important;\n grid-template-columns: max-content minmax(0, 1fr) !important;\n align-items: center !important;\n column-gap: clamp(32px, 5vw, 80px) !important;\n row-gap: 0 !important;\n width: 100% !important;\n }\n\n body .selected-work-controller__eyebrow {\n align-self: center !important;\n }\n\n body .selected-work-tabs {\n width: auto !important;\n justify-self: end !important;\n justify-content: flex-end !important;\n }\n}\n\n\/* Borderless pill controls: no contour, no hover shadow. *\/\nbody .selected-work-tab {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n background: #F1F2F5 !important;\n color: #000051 !important;\n transform: none !important;\n transition: background-color .16s ease, color .16s ease !important;\n}\n\nbody .selected-work-tab:hover,\nbody .selected-work-tab:focus-visible {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n background: #E4E6EB !important;\n color: #000051 !important;\n transform: none !important;\n}\n\nbody .selected-work-tab.is-active,\nbody .selected-work-tab[aria-selected=\"true\"] {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n background: #003BF3 !important;\n color: #fff !important;\n}\n\nbody .selected-work-tab.is-active:hover,\nbody .selected-work-tab[aria-selected=\"true\"]:hover,\nbody .selected-work-tab.is-active:focus-visible,\nbody .selected-work-tab[aria-selected=\"true\"]:focus-visible {\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n background: #000051 !important;\n color: #fff !important;\n}\n\n@media (max-width: 900px) {\n body .selected-work-controller__header {\n display: grid !important;\n grid-template-columns: 1fr !important;\n align-items: start !important;\n gap: 22px !important;\n }\n\n body .selected-work-tabs {\n width: 100% !important;\n justify-self: stretch !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body .selected-work-tab {\n transition: none !important;\n }\n}\n<\/style>\n\n\n\n\n\n<style id=\"liquid-nav-centering-correction-final\">\n\/* Final geometric centering: clickable nav cells and the active indicator\n occupy the exact same four tracks, with icons centered inside each cell. *\/\nbody .liquid-nav__glass {\n display: grid !important;\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n grid-template-rows: 1fr !important;\n align-items: stretch !important;\n justify-items: stretch !important;\n}\n\nbody .liquid-nav__item {\n width: 100% !important;\n height: 100% !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n display: grid !important;\n place-items: center !important;\n align-self: stretch !important;\n justify-self: stretch !important;\n line-height: 0 !important;\n}\n\nbody .liquid-nav__item svg {\n display: block !important;\n margin: 0 !important;\n flex: none !important;\n transform-origin: 50% 50% !important;\n}\n\nbody .liquid-nav__indicator {\n top: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 25% !important;\n height: auto !important;\n margin: 0 !important;\n box-sizing: border-box !important;\n transform: translate3d(calc(var(--active-index) * 100%), 0, 0) !important;\n transform-origin: 0 50% !important;\n}\n\n\/* Keep the two social buttons on the same vertical centerline as the main nav. *\/\nbody .liquid-nav__socials {\n align-items: stretch !important;\n}\n\nbody .liquid-nav__social {\n width: 100% !important;\n height: 100% !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n display: grid !important;\n place-items: center !important;\n line-height: 0 !important;\n}\n\nbody .liquid-nav__social svg {\n display: block !important;\n margin: 0 !important;\n}\n<\/style>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Strategia, content, design i produkcja 0% Przejd\u017a do tre\u015bci Kompleksowe wsparcie dla Twojej marki. Bezpo\u015brednia wsp\u00f3\u0142praca z wykonawc\u0105. M\u00f3j model wsp\u00f3\u0142pracy oznacza szybsze decyzje, wi\u0119ksz\u0105 odpowiedzialno\u015b\u0107 za efekt ko\u0144cowy i brak zb\u0119dnych koszt\u00f3w. Porozmawiajmy o projekcie Zobacz realizacje Video Ruch, rytm i emocje, kt\u00f3re od pierwszych sekund pokazuj\u0105 charakter marki. Model wsp\u00f3\u0142pracy Nie jestem agencj\u0105.I w\u0142a\u015bnie na tym polega pomys\u0142. \u0141\u0105cz\u0119 strategi\u0119, web design, wideo, fotografi\u0119, branding, marketing i AI w jednym procesie, bez przekazywania projektu mi\u0119dzy dzia\u0142ami, accountami i kolejnymi osobami w CC. Pracujesz bezpo\u015brednio ze mn\u0105: szybciej podejmujemy decyzje, mniej rzeczy ginie po drodze, a ca\u0142a komunikacja marki m\u00f3wi jednym g\u0142osem. Prowadz\u0119 jedynie ograniczon\u0105 liczb\u0119 projekt\u00f3w jednocze\u015bnie, \u017ceby mie\u0107 czas na kreatywne my\u015blenie, dopracowanie detali i normalny kontakt. Mniej projekt\u00f3w. Wi\u0119cej uwagi. Zobacz moje do\u015bwiadczenie na LinkedIn Wybrani klienci Bazaar Bazaar Us\u0142ugi Video Filmy promocyjne, rolki, kr\u00f3tkie formaty do social media, wywiady, relacje z wydarze\u0144 i proste animacje. Mog\u0119 wej\u015b\u0107 w projekt od pomys\u0142u i scenariusza, przez realizacj\u0119, po monta\u017c materia\u0142u gotowego do publikacji. Web design Projektuj\u0119 landing page\u2019e i strony internetowe z czyteln\u0105 struktur\u0105, dopracowan\u0105 warstw\u0105 wizualn\u0105 i pe\u0142n\u0105 responsywno\u015bci\u0105. Zakres mo\u017ce obejmowa\u0107 UX, projekt graficzny, wdro\u017cenie oraz przygotowanie strony do dalszej samodzielnej obs\u0142ugi. Content day Zaplanowana produkcja zdj\u0119\u0107 i video do regularnej komunikacji marki. Przed realizacj\u0105 ustalamy tematy, kadry i formaty tak, \u017ceby z jednego spotkania powsta\u0142 u\u017cyteczny bank materia\u0142\u00f3w do wielu publikacji. Fotografia Sesje wizerunkowe, produktowe, biznesowe i eventowe. Wsp\u00f3lnie ustalamy kierunek wizualny, charakter zdj\u0119\u0107 oraz ich p\u00f3\u017aniejsze wykorzystanie, od strony internetowej po kampanie i social media. Design Identyfikacja wizualna, logo, key visuale, prezentacje oraz materia\u0142y do kampanii, social media i komunikacji firmowej. Projekty powstaj\u0105 jako sp\u00f3jny system, kt\u00f3ry mo\u017cna p\u00f3\u017aniej wygodnie rozwija\u0107 w r\u00f3\u017cnych kana\u0142ach. Marketing Pomagam uporz\u0105dkowa\u0107 komunikacj\u0119, zaplanowa\u0107 kampani\u0119 albo zbudowa\u0107 kierunek dzia\u0142a\u0144 contentowych wok\u00f3\u0142 konkretnego celu biznesowego. Zakres mo\u017ce obejmowa\u0107 pomys\u0142 kreatywny, kana\u0142y, formaty tre\u015bci i plan dalszych dzia\u0142a\u0144. Consulting Godzinna konsultacja kreatywna lub strategiczna dotycz\u0105ca marki, komunikacji, strony, contentu albo konkretnego problemu projektowego. Spotkanie ko\u0144czymy konkretnymi rekomendacjami i kierunkiem dalszego dzia\u0142ania. AI content Obrazy produktowe, mockupy, koncepty wizualne, warianty kreacji i workflow wspierane AI. Dobieram narz\u0119dzia do konkretnego zastosowania i przygotowuj\u0119 materia\u0142y tak, \u017ceby by\u0142y u\u017cyteczne w realnej komunikacji marki. Jak wygl\u0105da wsp\u00f3\u0142praca Od pierwszej rozmowy do gotowych materia\u0142\u00f3w. 01 Rozmowa wst\u0119pna Ustalamy kontekst, potrzeby, priorytety i realny zakres. Bez rozbudowanego briefu na start. 02 Audyt i kierunek Porz\u0105dkuj\u0119 ofert\u0119, komunikacj\u0119 i punkty, kt\u00f3re maj\u0105 najwi\u0119kszy wp\u0142yw na odbi\u00f3r marki. 03 Produkcja Powstaj\u0105 konkretne rzeczy: strona, copy, identyfikacja, zdj\u0119cia, wideo, content lub materia\u0142y wspierane AI. 04 Publikacja i dalszy rytm Wdra\u017cam projekt, przekazuj\u0119 gotowe materia\u0142y albo przechodzimy w regularn\u0105 wsp\u00f3\u0142prac\u0119. Wybrane realizacje Strony internetowe Wideo Fotografia analogowa Branding 01 Galeria Bi\u017cuterii Prestige Elegancka prezentacja marki, kolekcji bi\u017cuterii i oferty salonu. 02 Talent Complete Serwis us\u0142ugi HR skupiony na rekrutacji, talentach i wsparciu biznesu. 03 CrossCore Gda\u0144sk Dynamiczna strona klubu treningowego z ofert\u0105 zaj\u0119\u0107 i kontaktem. 04 Agata Bajkov Personalna marka trenerki z ofert\u0105 trening\u00f3w i wsp\u00f3\u0142pracy indywidualnej. 05 Nord Trail Race Strona biegu terenowego z informacjami o trasie, zapisach i wydarzeniu. 06 Lura Cafe Strona kawiarni Lura z ofert\u0105 kawy, produktami marki i informacjami o lokalu. 07 Amber Org Work in Progress – projekt strony Amber Org, obecnie w trakcie realizacji. 08 Blumin Beauty Bar Strona internetowa Blumin Beauty Bar. Sekcja w przygotowaniu Brzmi znajomo? Mniej przekazywania. Wi\u0119cej odpowiedzialno\u015bci za ca\u0142o\u015b\u0107. 01 Content powstaje bez wsp\u00f3lnego kierunku. S\u0105 posty, grafiki i pojedyncze pomys\u0142y, ale brakuje jednej historii, kt\u00f3ra \u0142\u0105czy ofert\u0119, stron\u0119 i social media. 02 Ka\u017cdy element robi kto\u015b inny. Copy, design, zdj\u0119cia, wideo i web trafiaj\u0105 do r\u00f3\u017cnych os\u00f3b. Koordynacja zostaje po Twojej stronie, a marka zaczyna m\u00f3wi\u0107 kilkoma j\u0119zykami. 03 Masz dobry produkt, ale komunikacja tego nie pokazuje. Oferta jest mocna, tylko strona i materia\u0142y nie t\u0142umacz\u0105 jej wystarczaj\u0105co jasno albo wygl\u0105daj\u0105 s\u0142abiej ni\u017c sama us\u0142uga. 04 Robisz marketing samodzielnie, kiedy znajdzie si\u0119 chwila. Pomys\u0142y s\u0105, ale brakuje czasu na ich dopracowanie i regularn\u0105 produkcj\u0119. W efekcie komunikacja dzia\u0142a zrywami. Dobre dopasowanie? Sprawd\u017amy, czy ten model wsp\u00f3\u0142pracy jest dla Ciebie. 12 szybkich wybor\u00f3w. Bez formularza i bez podawania danych. Po prostu wybierz odpowied\u017a, kt\u00f3ra jest Ci najbli\u017csza. 12 pyta\u0144 ~ 60 sekund wynik od razu 01 \/ 12 Wybierz to, co jest Ci bli\u017csze Wsp\u00f3\u0142praca Chc\u0119 po\u0142\u0105czy\u0107 strategi\u0119, tre\u015b\u0107 i stron\u0119 wizualn\u0105 zamiast zamawia\u0107 je osobno. Zdecydowanie tak Raczej tak Raczej nie Zdecydowanie nie Tw\u00f3j wynik Porozmawiajmy Zagraj jeszcze raz \u2190 Nie ma dobrych odpowiedzi. Jest tylko dopasowanie. Ta sekcja jest interaktywna i wymaga w\u0142\u0105czonego JavaScript. Rekomendacje Mia\u0142em ogromn\u0105 przyjemno\u015b\u0107 pracowa\u0107 z Micha\u0142em w Scalo i mog\u0119 powiedzie\u0107, \u017ce jego do\u015bwiadczenie w content marketingu jest naprawd\u0119 wyj\u0105tkowe. Wyr\u00f3\u017cnia go po\u0142\u0105czenie kompetencji kreatywnych, technologicznych i digitalowych. Micha\u0142 potrafi przek\u0142ada\u0107 z\u0142o\u017cone tematy IT na anga\u017cuj\u0105ce tre\u015bci, dzi\u0119ki czemu technologia staje si\u0119 bardziej zrozumia\u0142a. Grzegorz Witkowski Head of Marketing @ Scalo Przesu\u0144 Kontakt Porozmawiajmy o projekcie. Opisz, czego potrzebujesz i na jakim etapie jest projekt. Na tej podstawie wr\u00f3c\u0119 z propozycj\u0105 sensownego zakresu i kolejnych krok\u00f3w. Protected case study Case study na has\u0142o. Ten materia\u0142 jest obecnie dost\u0119pny tylko po podaniu has\u0142a. Otw\u00f3rz Wr\u00f3\u0107 do strony Case study Do g\u00f3ry \u2191 \u00d7 Case study \/ Luxury retail \/ Brand website Galeria Bi\u017cuterii Prestige Cyfrowa oprawa marki premium, kt\u00f3ra ma budowa\u0107 warto\u015b\u0107 produktu jeszcze zanim u\u017cytkownik zobaczy kolekcj\u0119. 01 ZakresStrategy \u00b7 UX\/UI \u00b7 Web StatusSelected work Otw\u00f3rz live site \u2197 01 \/ Approach Problem \u2192 jasny system \u2192 do\u015bwiadczenie marki. Challenge Marka potrzebowa\u0142a spokojnej, luksusowej prezentacji, kt\u00f3ra nie konkuruje z bi\u017cuteri\u0105. Kluczowym wyzwaniem by\u0142o pogodzenie elegancji, czytelnej hierarchii kolekcji i prostego prowadzenia do kontaktu lub wizyty w salonie. Solution Interfejs oparto na du\u017cych oddechach, mocnych kadrach produktowych i oszcz\u0119dnej typografii. Nawigacja prowadzi u\u017cytkownika od emocji marki do kolekcji i decyzji zakupowej, a ziele\u0144 inspirowana Rolex Green buduje rozpoznawalny kod premium. 02 \/ Layouts Placeholdery pod finalne widoki desktop i mobile. Desktop \/ Home Desktop \/ Detail Mobile \/ Home Mobile \/ Flow 03 \/ Design system Typografia i kolory zaprojektowane jako prosty, skalowalny j\u0119zyk. Typography Cormorant GaramondDisplay \/ headlinesInterUI \/ body Color palette #006039#F4EFE7#000029#D8C6A0 Nast\u0119pny case? \u2190 Poprzedni Nast\u0119pny \u2192 Case<\/p>","protected":false},"author":1,"featured_media":3791,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3774","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Micha\u0142 Plebaniak - Creative Services<\/title>\n<meta name=\"description\" content=\"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/michalplebaniak.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micha\u0142 Plebaniak - Creative Services\" \/>\n<meta property=\"og:description\" content=\"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/michalplebaniak.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"Micha\u0142 Plebaniak\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-17T12:09:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Thumbnail-1024x682.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"682\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/\",\"url\":\"https:\\\/\\\/michalplebaniak.com\\\/\",\"name\":\"Micha\u0142 Plebaniak - Creative Services\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/michalplebaniak.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Thumbnail.webp\",\"datePublished\":\"2026-09-16T17:15:05+00:00\",\"dateModified\":\"2026-09-17T12:09:49+00:00\",\"description\":\"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/michalplebaniak.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/michalplebaniak.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Thumbnail.webp\",\"contentUrl\":\"https:\\\/\\\/michalplebaniak.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Thumbnail.webp\",\"width\":2000,\"height\":1333},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/michalplebaniak.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Micha\u0142 Plebaniak – Freelance Creative\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/michalplebaniak.com\\\/#website\",\"url\":\"https:\\\/\\\/michalplebaniak.com\\\/\",\"name\":\"Micha\u0142 Plebaniak\",\"description\":\"Freelance Creative\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/michalplebaniak.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Micha\u0142 Plebaniak - Creative Services","description":"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/michalplebaniak.com\/en\/","og_locale":"en_GB","og_type":"article","og_title":"Micha\u0142 Plebaniak - Creative Services","og_description":"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.","og_url":"https:\/\/michalplebaniak.com\/en\/","og_site_name":"Micha\u0142 Plebaniak","article_modified_time":"2026-09-17T12:09:49+00:00","og_image":[{"width":1024,"height":682,"url":"http:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Thumbnail-1024x682.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/michalplebaniak.com\/","url":"https:\/\/michalplebaniak.com\/","name":"Micha\u0142 Plebaniak - Creative Services","isPartOf":{"@id":"https:\/\/michalplebaniak.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/michalplebaniak.com\/#primaryimage"},"image":{"@id":"https:\/\/michalplebaniak.com\/#primaryimage"},"thumbnailUrl":"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Thumbnail.webp","datePublished":"2026-09-16T17:15:05+00:00","dateModified":"2026-09-17T12:09:49+00:00","description":"Web design, branding, fotografia i video dla marek i ludzi. Kompleksowa realizacja w jednym miejscu - bez po\u015brednik\u00f3w. Jako\u015b\u0107 agencji, koszt freelancera.","breadcrumb":{"@id":"https:\/\/michalplebaniak.com\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/michalplebaniak.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/michalplebaniak.com\/#primaryimage","url":"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Thumbnail.webp","contentUrl":"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/09\/Thumbnail.webp","width":2000,"height":1333},{"@type":"BreadcrumbList","@id":"https:\/\/michalplebaniak.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/michalplebaniak.com\/"},{"@type":"ListItem","position":2,"name":"Micha\u0142 Plebaniak – Freelance Creative"}]},{"@type":"WebSite","@id":"https:\/\/michalplebaniak.com\/#website","url":"https:\/\/michalplebaniak.com\/","name":"Micha\u0142 Plebaniak","description":"Freelance Creative","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/michalplebaniak.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/3774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/comments?post=3774"}],"version-history":[{"count":22,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/3774\/revisions"}],"predecessor-version":[{"id":3810,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/3774\/revisions\/3810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/media\/3791"}],"wp:attachment":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/media?parent=3774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}